/* ============================================================
   Aquagent — marketing site
   Design language: marine instrumentation. Precise, dark,
   hairline rules, wide-tracked labels, tight display type.
   ============================================================ */

/* ---------- Fonts (self-hosted — no third-party requests) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sora-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-latin-700-normal.woff2') format('woff2');}

:root{
  --abyss:   #04080E;
  --hull:    #070D16;
  --deck:    #0C1420;
  --deck-hi: #111C2B;
  --rule:    rgba(255,255,255,.075);
  --rule-hi: rgba(255,255,255,.14);

  --text:    #EDF3F9;
  --muted:   #8EA2B8;
  --dim:     #65788E;

  --cyan:    #3FAEE8;
  --cyan-hi: #7FD4FF;
  --cyan-lo: #16608F;
  --jade:    #4FCFA0;
  --amber:   #D9A441;

  --maxw: 1200px;
  --gut:  clamp(20px, 5vw, 52px);
  --r:    14px;
  --r-lg: 20px;
  --ease: cubic-bezier(.2,.65,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

body{
  margin:0; background:var(--abyss); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--cyan-hi); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:'Sora',sans-serif; margin:0 0 .55em; line-height:1.12; font-weight:600; letter-spacing:-.03em; }
h1{ font-size:clamp(2.4rem,4.9vw,3.75rem); line-height:1.06; }
h2{ font-size:clamp(1.9rem,3.9vw,3rem); }
h3{ font-size:1.18rem; letter-spacing:-.02em; }
h4{ font-size:1rem; letter-spacing:-.01em; }
p{ margin:0 0 1.15em; }
.lede{ font-size:clamp(1.06rem,1.9vw,1.24rem); color:var(--muted); line-height:1.62; }
.dim{ color:var(--dim); }

/* instrument-panel label */
.label{
  font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); margin:0 0 1.25rem; display:flex; align-items:center; gap:.8rem;
}
.label::before{ content:''; width:22px; height:1px; background:var(--cyan); opacity:.6; flex:none; }
.label.c{ justify-content:center; }
.label.c::before{ display:none; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.narrow{ max-width:800px; margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; padding:clamp(70px,9vw,124px) 0; }
.hair{ border-top:1px solid var(--rule); }
.c{ text-align:center; }
.head{ max-width:700px; margin-bottom:clamp(38px,5vw,64px); }
.head.c{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Inter',sans-serif; font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  padding:.95rem 1.7rem; border-radius:8px; border:1px solid transparent; cursor:pointer;
  transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
  text-decoration:none!important; white-space:nowrap;
}
.btn-p{ background:var(--cyan); color:#04121C; box-shadow:0 6px 24px -8px rgba(63,174,232,.5); }
.btn-p:hover{ background:var(--cyan-hi); transform:translateY(-1px); box-shadow:0 10px 32px -8px rgba(63,174,232,.65); }
.btn-g{ background:transparent; border-color:var(--rule-hi); color:var(--text); }
.btn-g:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.28); transform:translateY(-1px); }
.btn-lg{ padding:1.08rem 2.1rem; font-size:1rem; }
.btns{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* ---------- Nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease); }
.nav.on{ background:rgba(4,8,14,.86); backdrop-filter:blur(16px) saturate(150%); border-bottom-color:var(--rule); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:.95rem var(--gut); display:flex; align-items:center; gap:2rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:'Sora',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-.04em; color:var(--text); text-decoration:none!important; }
.brand:hover{ color:var(--cyan-hi); }
.brand svg{ flex:none; }
.nlinks{ display:flex; gap:1.8rem; margin-left:auto; align-items:center; }
.nlinks a{ color:var(--muted); font-size:.9rem; font-weight:500; text-decoration:none!important; transition:color .2s; }
.nlinks a:hover{ color:var(--text); }
.nlinks a.btn-p, .nlinks a.btn-p:hover{ color:#04121C; }
.ncta{ margin-left:.5rem; }
.ntog{ display:none; margin-left:auto; background:none; border:1px solid var(--rule-hi); border-radius:7px; padding:.5rem .65rem; cursor:pointer; }
.ntog span{ display:block; width:17px; height:1.5px; background:var(--text); border-radius:2px; }
.ntog span+span{ margin-top:4px; }
@media (max-width:920px){
  .nlinks{ position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(4,8,14,.98); backdrop-filter:blur(18px); border-bottom:1px solid var(--rule);
    padding:.5rem var(--gut) 1.5rem; display:none; }
  .nlinks.open{ display:flex; }
  .nlinks a{ padding:.9rem 0; border-bottom:1px solid var(--rule); font-size:1rem; }
  .ncta{ margin:1.1rem 0 0; }
  .ntog{ display:block; }
}

/* ---------- Backdrop ---------- */
.bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg::before{
  content:''; position:absolute; left:50%; top:-45%; transform:translateX(-50%);
  width:min(1400px,160vw); aspect-ratio:1.5; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(22,96,143,.42), rgba(12,46,78,.14) 45%, transparent 70%);
  filter:blur(60px);
}
.sonar{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 79px, var(--rule) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--rule) 79px 80px);
  mask-image:radial-gradient(ellipse 65% 60% at 50% 28%, #000 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 28%, #000 10%, transparent 75%);
  opacity:.65;
}

/* ---------- Hero ---------- */
.hero{ padding-top:clamp(124px,15vw,180px); padding-bottom:clamp(60px,7vw,96px); }
.hero .wrap{ position:relative; z-index:2; }
.hgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,70px); align-items:center; }
@media (max-width:980px){ .hgrid{ grid-template-columns:1fr; gap:48px; } }
.hero h1 em{ font-style:normal; color:var(--cyan-hi); }
.hero .lede{ max-width:33em; }
.hnote{ margin-top:1.8rem; font-size:.85rem; color:var(--dim); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pip{ width:6px; height:6px; border-radius:50%; background:var(--jade); box-shadow:0 0 10px var(--jade); flex:none; }

/* ---------- Knowledge-base diagram ---------- */
.kb{
  border:1px solid var(--rule); border-radius:var(--r-lg); background:linear-gradient(170deg,var(--deck-hi),var(--hull));
  padding:clamp(22px,3vw,30px); box-shadow:0 30px 70px -28px rgba(0,0,0,.85); position:relative; overflow:hidden;
}
.kb::before{ content:''; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(127,212,255,.45),transparent); }
.kb-t{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:1.1rem; }
.ins{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:1.1rem; }
.in{
  border:1px solid var(--rule); border-radius:9px; padding:.65rem .55rem; text-align:center;
  background:rgba(255,255,255,.022); font-size:.72rem; color:var(--muted); line-height:1.35;
}
.in svg{ color:var(--cyan); margin:0 auto .38rem; display:block; }
.flow{ display:flex; justify-content:center; margin:.2rem 0 1rem; }
.flow svg{ color:var(--cyan); opacity:.55; }
.core{
  border:1px solid rgba(63,174,232,.3); border-radius:11px; padding:.95rem 1.1rem; text-align:center;
  background:linear-gradient(135deg,rgba(63,174,232,.14),rgba(22,96,143,.05)); margin-bottom:1rem;
}
.core b{ font-family:'Sora',sans-serif; font-size:.98rem; letter-spacing:-.02em; display:block; }
.core span{ font-size:.74rem; color:var(--muted); }
.qa{ display:grid; gap:.5rem; }
.q, .a{ border-radius:9px; padding:.7rem .85rem; font-size:.85rem; line-height:1.5; }
.q{ background:rgba(63,174,232,.1); border:1px solid rgba(63,174,232,.2); color:var(--text); }
.a{ background:rgba(255,255,255,.03); border:1px solid var(--rule); color:var(--muted); }
.a b{ color:var(--cyan-hi); font-weight:600; }
.cite{ margin-top:.5rem; padding-top:.45rem; border-top:1px solid var(--rule); font-size:.72rem; color:var(--cyan); display:flex; gap:.3rem; align-items:center; }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in-v{ opacity:1; transform:none; }
.d1{ transition-delay:.07s } .d2{ transition-delay:.14s } .d3{ transition-delay:.21s } .d4{ transition-delay:.28s }

/* ---------- Cards / grids ---------- */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
@media (max-width:880px){ .grid3{ grid-template-columns:1fr; } .grid2{ grid-template-columns:1fr; } }

.card{
  border:1px solid var(--rule); border-radius:var(--r); padding:1.7rem 1.55rem;
  background:linear-gradient(165deg,rgba(17,28,43,.6),rgba(12,20,32,.35));
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.card:hover{ border-color:var(--rule-hi); }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.95rem; margin:0; }
.ic{
  width:38px; height:38px; border-radius:9px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:rgba(63,174,232,.12); border:1px solid rgba(63,174,232,.22); color:var(--cyan-hi);
}
.num{
  font-family:'Sora',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.1em;
  color:var(--cyan); opacity:.7; display:block; margin-bottom:.9rem;
}

/* feature table rows */
.rows{ border-top:1px solid var(--rule); }
.row{
  display:grid; grid-template-columns:200px 1fr; gap:1.5rem;
  padding:1.5rem 0; border-bottom:1px solid var(--rule); align-items:start;
}
@media (max-width:760px){ .row{ grid-template-columns:1fr; gap:.4rem; } }
.row .k{ font-family:'Sora',sans-serif; font-size:.98rem; font-weight:600; letter-spacing:-.02em; }
.row .v{ color:var(--muted); font-size:.96rem; }
.row .v b{ color:var(--text); font-weight:600; }
.tag{
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.18rem .5rem; border-radius:4px; margin-left:.5rem; vertical-align:middle;
}
.tag-soon{ color:var(--amber); border:1px solid rgba(217,164,65,.35); background:rgba(217,164,65,.08); }
.tag-live{ color:var(--jade); border:1px solid rgba(79,207,160,.3); background:rgba(79,207,160,.08); }

/* ticks */
.ticks{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.8rem; }
.ticks li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; color:var(--muted); }
.ticks svg{ flex:none; margin-top:5px; color:var(--cyan); }
.ticks b{ color:var(--text); font-weight:600; }

/* split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,70px); align-items:center; }
.split.flip .sc{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split.flip .sc{ order:0; } }
.shot{ border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 26px 60px -26px rgba(0,0,0,.8); background:var(--deck); }
.shot img{ width:100%; }
.cap{ padding:.7rem 1rem; border-top:1px solid var(--rule); background:rgba(0,0,0,.25); font-size:.74rem; color:var(--dim); }

/* pull quote */
.pull{
  border-left:2px solid var(--cyan); padding:.3rem 0 .3rem 1.4rem; margin:1.9rem 0;
  font-family:'Sora',sans-serif; font-size:clamp(1.08rem,1.9vw,1.3rem); line-height:1.45; letter-spacing:-.02em; color:var(--text);
}
.pull cite{ display:block; font-family:'Inter',sans-serif; font-size:.82rem; font-style:normal; color:var(--dim); margin-top:.8rem; letter-spacing:0; }

/* panel */
.panel{
  border:1px solid var(--rule); border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(17,28,43,.75),rgba(7,13,22,.6));
  padding:clamp(26px,3.8vw,46px);
}
.panel.jade{ border-color:rgba(79,207,160,.24); background:linear-gradient(155deg,rgba(79,207,160,.07),rgba(7,13,22,.6)); }
.panel.amber{ border-color:rgba(217,164,65,.22); background:linear-gradient(155deg,rgba(217,164,65,.06),rgba(7,13,22,.6)); }

/* question list */
.asks{ display:grid; gap:.65rem; }
.ask{
  border:1px solid var(--rule); border-radius:10px; padding:.8rem 1rem; background:rgba(255,255,255,.022);
  font-size:.95rem; color:var(--text); display:flex; gap:.7rem; align-items:flex-start; line-height:1.5;
}
.ask::before{ content:'?'; font-family:'Sora',sans-serif; font-weight:700; color:var(--cyan); flex:none; font-size:.9rem; margin-top:1px; }

/* metric strip */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; }
@media (max-width:760px){ .strip{ grid-template-columns:repeat(2,1fr); } }
.met{ background:var(--hull); padding:1.4rem 1.2rem; }
.met .n{ font-family:'Sora',sans-serif; font-size:1.5rem; font-weight:600; letter-spacing:-.03em; color:var(--cyan-hi); display:block; }
.met .l{ font-size:.78rem; color:var(--dim); margin-top:.2rem; }

/* ---------- Form ---------- */
.beta{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(160deg,rgba(17,28,43,.8),rgba(7,13,22,.7)); }
@media (max-width:900px){ .beta{ grid-template-columns:1fr; } }
.beta-l{ padding:clamp(28px,3.8vw,46px); border-right:1px solid var(--rule); }
@media (max-width:900px){ .beta-l{ border-right:none; border-bottom:1px solid var(--rule); } }
.beta-r{ padding:clamp(28px,3.8vw,46px); }
.f{ margin-bottom:1rem; }
.f label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--muted); margin-bottom:.4rem; }
.f .req{ color:var(--cyan); }
.f input,.f select,.f textarea{
  width:100%; background:rgba(0,0,0,.34); border:1px solid var(--rule-hi); border-radius:8px;
  padding:.76rem .9rem; color:var(--text); font-family:inherit; font-size:.94rem; transition:border-color .2s, box-shadow .2s;
}
.f textarea{ resize:vertical; min-height:84px; }
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(63,174,232,.16); }
.f select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238EA2B8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.3rem; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:520px){ .f2{ grid-template-columns:1fr; } }
.fnote{ font-size:.78rem; color:var(--dim); margin:.9rem 0 0; line-height:1.55; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.status{ margin-top:.9rem; font-size:.9rem; display:none; padding:.75rem .95rem; border-radius:8px; }
.status.ok{ display:block; color:var(--jade); background:rgba(79,207,160,.1); border:1px solid rgba(79,207,160,.26); }
.status.err{ display:block; color:#FF9B88; background:rgba(255,120,100,.09); border:1px solid rgba(255,120,100,.26); }
.gets{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.85rem; }
.gets li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; color:var(--muted); }
.gets .n{ flex:none; width:21px; height:21px; border-radius:5px; display:grid; place-items:center; font-size:.68rem; font-weight:700;
  color:var(--cyan-hi); background:rgba(63,174,232,.13); border:1px solid rgba(63,174,232,.26); margin-top:2px; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ cursor:pointer; list-style:none; padding:1.3rem 2.4rem 1.3rem 0; position:relative;
  font-family:'Sora',sans-serif; font-size:1.02rem; font-weight:500; letter-spacing:-.02em; color:var(--text); transition:color .2s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--cyan-hi); }
.faq summary::after{ content:''; position:absolute; right:.3rem; top:50%; width:8px; height:8px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:translateY(-65%) rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:translateY(-25%) rotate(225deg); }
.faq .ans{ padding:0 2.4rem 1.4rem 0; color:var(--muted); font-size:.95rem; }
.faq .ans p:last-child{ margin-bottom:0; }

/* ---------- CTA ---------- */
.cta{ border:1px solid var(--rule); border-radius:var(--r-lg); padding:clamp(36px,5vw,64px); text-align:center;
  background:radial-gradient(ellipse at 50% 0%, rgba(22,96,143,.3), transparent 62%), linear-gradient(165deg,var(--deck-hi),var(--hull)); }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--rule); padding:clamp(46px,5.5vw,70px) 0 2.2rem; background:var(--hull); }
.fgrid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.2rem; margin-bottom:2.8rem; }
@media (max-width:820px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .fgrid{ grid-template-columns:1fr; } }
.fcol h5{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 .95rem; font-weight:600; font-family:'Inter',sans-serif; }
.fcol ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.fcol a{ color:var(--muted); font-size:.88rem; text-decoration:none!important; transition:color .2s; }
.fcol a:hover{ color:var(--cyan-hi); }
.fabout p{ color:var(--dim); font-size:.87rem; max-width:30em; margin:1rem 0 0; }
.fbot{ border-top:1px solid var(--rule); padding-top:1.7rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.81rem; color:var(--dim); }

/* ---------- Inner pages ---------- */
.phead{ padding-top:clamp(130px,14vw,170px); padding-bottom:clamp(24px,3.5vw,40px); }
.prose h2{ font-size:1.5rem; margin-top:2.5rem; }
.prose h3{ font-size:1.1rem; margin-top:1.8rem; }
.prose p,.prose li{ color:var(--muted); }
.prose strong{ color:var(--text); }
.prose ul{ padding-left:1.15rem; display:grid; gap:.5rem; margin-bottom:1.25rem; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--cyan); color:#04121C; padding:.6rem 1rem; border-radius:7px; }

/* negative ticks (comparison "without" column) */
.ticks.neg li{ color:var(--dim); }
.ticks.neg svg{ color:var(--dim); }