/* ============================================================
   NexaFix — Marketing Website
   Implemented from the Claude Design source (NexaFix.dc.html).
   Base component styles live inline in the markup (ported verbatim
   from the design); this file adds the reset, keyframes, hover
   states (the design's style-hover behaviour) and responsive rules.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#0B1120;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(37,99,235,.32);color:#fff}
a{text-decoration:none}
input,textarea,select,button{font-family:'Inter',sans-serif}
input:focus,textarea:focus{outline:none;border-color:#2563EB !important;box-shadow:0 0 0 3px rgba(37,99,235,.14)}

/* ---------- keyframes (home) ---------- */
@keyframes nfMesh{from{background-position:0 0,0 0}to{background-position:60px 60px,60px 60px}}
@keyframes nfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes nfPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes nfRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes nfGlow{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes nfDrift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.04)}}
@keyframes nfParticle{0%{transform:translateY(6px);opacity:0}25%{opacity:1}100%{transform:translateY(-64px);opacity:0}}

/* ---------- keyframes (detail page) ---------- */
@keyframes dpRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes dpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes dpMesh{from{background-position:0 0,0 0}to{background-position:60px 60px,60px 60px}}
@keyframes dpFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ---------- keyframes (device render) ---------- */
@keyframes drRise{0%{transform:translateY(14px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
@keyframes drScan{0%,100%{opacity:.35}50%{opacity:.8}}

/* ---------- FAQ accordion (detail page) ---------- */
details.dp-faq > summary{list-style:none}
details.dp-faq > summary::-webkit-details-marker{display:none}
details.dp-faq > summary::marker{content:''}
.dp-chev{transition:transform .28s ease}
details.dp-faq[open] > summary .dp-chev{transform:rotate(180deg)}
details.dp-faq > p{animation:dpFade .28s ease}

/* ============================================================
   Hover states — faithful to the design's style-hover values.
   Inline styles win on specificity, so overrides use !important.
   ============================================================ */
.hv-navbtn:hover{background:#1d4ed8 !important;transform:translateY(-1px);box-shadow:0 10px 26px rgba(37,99,235,.5) !important}
.hv-navlink:hover{color:#fff !important}

.hv-btn-primary:hover{background:#1d4ed8 !important;transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,99,235,.55) !important}
.hv-btn-ghost:hover{border-color:rgba(255,255,255,.5) !important;background:rgba(255,255,255,.05) !important}
.hv-btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.3) !important}
.hv-btn-whiteghost:hover{background:rgba(255,255,255,.2) !important}

.hv-device:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(11,17,32,.28) !important;border-left-color:#2563EB !important}
.hv-device:hover .device-cta{gap:9px}

.hv-service:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.1) !important;border-left-color:#2563EB !important}
.hv-service:hover .service-icon{background:#DBEAFE !important;transform:scale(1.06)}

.hv-detail-item:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,23,42,.09) !important;border-left-color:#2563EB !important}
.hv-benefit:hover{transform:translateY(-4px);background:rgba(255,255,255,.08) !important}

.hv-footlink:hover{color:#38BDF8 !important}
.hv-social:hover{color:#fff !important;background:rgba(37,99,235,.3) !important}
.hv-social-wa:hover{color:#25D366 !important;background:rgba(37,211,102,.16) !important}

.hv-contactrow{transition:transform .18s ease,box-shadow .18s ease}
.hv-contactrow.wa:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,211,102,.24)}
.hv-contactrow.call:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,99,235,.24)}
.hv-contactrow.mail:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.12)}

.hv-dropdown:hover{background:rgba(37,99,235,.16) !important;color:#fff !important}
.hv-back:hover{color:#38BDF8 !important}
.hv-legal:hover{color:rgba(255,255,255,.6) !important}
.hv-modalclose:hover{background:rgba(255,255,255,.2) !important}

/* ============================================================
   Nav dropdown + mobile menu
   ============================================================ */
.nav-dropdown-wrap{position:relative;padding:6px 0}
.nav-dropdown{
  position:absolute;top:100%;left:-16px;padding-top:14px;display:none;
}
.nav-dropdown-wrap.open .nav-dropdown{display:block}
.nav-hamburger{display:none}

/* Floating WhatsApp pulse */
.wa-float{animation:nfPulse 2.4s ease-out infinite}
.wa-float:hover{transform:scale(1.08)}

/* Modal open helper */
.modal-overlay{animation:nfRise .2s ease}
body.no-scroll{overflow:hidden}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .why-media{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr !important}
}

@media (max-width:900px){
  .nav-center{
    position:fixed;top:0;right:0;bottom:0;width:min(300px,80vw);
    flex-direction:column !important;align-items:flex-start !important;
    gap:6px !important;background:rgba(11,17,32,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    padding:96px 26px 26px;transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    border-left:1px solid rgba(255,255,255,.08);z-index:94;
  }
  body.nav-open .nav-center{transform:translateX(0)}
  .nav-dropdown{position:static;padding-top:6px}
  .nav-hamburger{display:flex !important}
  .nav-phone{display:none !important}
  .hero-cluster{display:none !important}
  .trust-grid{grid-template-columns:repeat(2,1fr) !important}
  .trust-grid > div{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.1)}
  .hiw-line{display:none !important}
  .hiw-row{grid-template-columns:repeat(2,1fr) !important}
  .footer-grid{grid-template-columns:1fr 1fr !important}
  .cta-banner{flex-direction:column;align-items:flex-start !important}
}

@media (max-width:640px){
  .hero-title{font-size:44px !important;line-height:1.08 !important}
  .section-h2{font-size:32px !important}
  .trust-grid{grid-template-columns:1fr !important}
  .hiw-row{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr !important}
  .why-media{grid-template-columns:1fr !important}
  .reviews-two{grid-template-columns:1fr !important}
  section{padding-left:0;padding-right:0}
  .nav-inner,.section-inner{padding-left:20px !important;padding-right:20px !important}
}