:root{
    /* ── Brand color system ─────────────────────────── */
    --abyss:   #081C2E;  /* deep navy — primary dark bg          */
    --ocean:   #0A3D62;  /* ocean blue — cards, structural depth */
    --white:   #FFFFFF;  /* clean light surfaces                 */
    --ice:     #D9E2EC;  /* ice blue — fills, hairlines          */
    --seafoam: #119DA4;  /* primary accent / CTAs                */
    --cyan:    #2EC4B6;  /* hover / active / feature accents     */
    --slate:   #4F5D75;  /* body text on light                   */

    --font-display: 'DM Sans', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --maxw: 1180px;
    --r: 14px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-body);
    color:var(--abyss);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-0.02em;font-weight:600}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-family:var(--font-body);font-size:.72rem;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;color:var(--seafoam);
    display:inline-flex;align-items:center;gap:9px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--seafoam);display:inline-block}
  .eyebrow.on-dark{color:var(--cyan)}
  .eyebrow.on-dark::before{background:var(--cyan)}

  /* ── Buttons ─────────────────────────── */
  .btn{
    font-family:var(--font-body);font-weight:600;font-size:.95rem;
    display:inline-flex;align-items:center;gap:9px;
    padding:14px 26px;border-radius:10px;cursor:pointer;border:1px solid transparent;
    transition:background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
  }
  .btn-primary{background:var(--seafoam);color:var(--white)}
  .btn-primary:hover{background:var(--cyan);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--ice);border-color:rgba(217,226,236,.28)}
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
  .btn-ghost.dark{color:var(--ocean);border-color:rgba(10,61,98,.3)}
  .btn-ghost.dark:hover{border-color:var(--seafoam);color:var(--seafoam)}
  .btn .arrow{transition:transform .18s ease}
  .btn:hover .arrow{transform:translateX(3px)}

  /* ── Nav ─────────────────────────── */
  header.nav{position:sticky;top:0;z-index:50;background:rgba(8,28,46,.82);
    backdrop-filter:blur(12px);border-bottom:1px solid rgba(217,226,236,.1)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:11px;color:var(--white)}
  .brand .logo{width:30px;height:30px}
  .brand b{font-family:var(--font-display);font-weight:600;font-size:1.18rem;letter-spacing:-.02em}
  .brand b span{color:var(--cyan)}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-links a{font-size:.92rem;color:var(--ice);font-weight:500;opacity:.82;transition:opacity .15s,color .15s}
  .nav-links a:hover{opacity:1;color:var(--cyan)}
  .nav-cta{display:flex;align-items:center;gap:18px}
  .nav-cta .signin{font-size:.92rem;color:var(--ice);font-weight:500}
  .nav-cta .signin:hover{color:var(--cyan)}
  .menu-toggle{display:none;background:none;border:0;color:var(--ice);cursor:pointer}

  /* ── Hero ─────────────────────────── */
  .hero{position:relative;background:var(--abyss);color:var(--white);overflow:hidden}
  .hero::before{ /* nautical chart grid */
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(46,196,182,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46,196,182,.05) 1px, transparent 1px);
    background-size:46px 46px;
    mask-image:radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 70%);
    -webkit-mask-image:radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 70%);
  }
  .hero::after{ /* depth glow */
    content:"";position:absolute;width:680px;height:680px;right:-160px;top:-180px;
    background:radial-gradient(circle, rgba(17,157,164,.28) 0%, transparent 62%);
    pointer-events:none;
  }
  .hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
    align-items:center;padding:84px 0 96px}
  .hero h1{font-size:clamp(2.6rem,5.2vw,4.05rem);font-weight:700;margin:22px 0 0}
  .hero h1 .accent{color:var(--cyan)}
  .hero .sub{font-size:1.16rem;color:var(--ice);max-width:540px;margin:24px 0 0;opacity:.92}
  .hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
  .hero-meta{display:flex;gap:30px;margin-top:40px;flex-wrap:wrap}
  .hero-meta .stat .n{font-family:var(--font-display);font-weight:600;font-size:1.7rem;color:var(--white)}
  .hero-meta .stat .l{font-size:.82rem;color:var(--ice);opacity:.72;margin-top:2px}

  /* ── Watch dial signature ─────────────────────────── */
  .dial-card{
    position:relative;background:linear-gradient(165deg, #0c2a44 0%, var(--ocean) 100%);
    border:1px solid rgba(46,196,182,.22);border-radius:24px;padding:26px 26px 22px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  }
  .dial-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .dial-head .t{font-family:var(--font-display);font-weight:500;font-size:.95rem;color:var(--white)}
  .dial-head .live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;
    color:var(--cyan);font-weight:600;letter-spacing:.06em}
  .dial-head .live .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);
    box-shadow:0 0 0 0 rgba(46,196,182,.7);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,196,182,.55)}70%{box-shadow:0 0 0 9px rgba(46,196,182,0)}100%{box-shadow:0 0 0 0 rgba(46,196,182,0)}}
  .dial-wrap{display:flex;justify-content:center;padding:6px 0 2px}
  svg.dial{width:100%;max-width:340px;height:auto}
  .sweep{transform-origin:160px 160px;animation:sweep 26s linear infinite}
  @keyframes sweep{to{transform:rotate(360deg)}}
  .dial-center .big{font-family:var(--font-display);font-weight:600;font-size:30px;fill:var(--white)}
  .dial-center .lab{font-family:var(--font-body);font-size:9.5px;fill:var(--ice);letter-spacing:.14em;font-weight:600}
  .dial-center .sm{font-family:var(--font-body);font-size:10.5px;fill:var(--cyan);font-weight:600}
  .dial-center .nx{font-family:var(--font-body);font-size:9.5px;fill:#9fb3c8}
  .tick{stroke:rgba(217,226,236,.32)}
  .ticklab{font-family:var(--font-body);font-size:9px;fill:#9fb3c8;font-weight:600}
  .dial-legend{display:flex;justify-content:center;gap:18px;margin-top:6px;flex-wrap:wrap}
  .dial-legend span{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--ice);font-weight:500}
  .dial-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
  .dial-note{margin-top:14px;padding-top:14px;border-top:1px solid rgba(217,226,236,.12);
    display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--ice)}
  .dial-note .flag{flex-shrink:0;color:var(--cyan)}
  .dial-note b{color:var(--white);font-weight:600}

  /* ── Logo strip ─────────────────────────── */
  .trust{background:var(--abyss);border-top:1px solid rgba(217,226,236,.08);padding:30px 0 42px}
  .trust p{text-align:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
    color:#7d93aa;font-weight:600;margin-bottom:20px}
  .trust-row{display:flex;justify-content:center;align-items:center;gap:46px;flex-wrap:wrap;opacity:.62}
  .trust-row span{font-family:var(--font-display);font-weight:600;font-size:1.18rem;color:var(--ice);letter-spacing:-.01em}

  /* ── Section scaffold ─────────────────────────── */
  section{padding:96px 0}
  .sec-head{max-width:640px;margin:0 auto 56px;text-align:center}
  .sec-head h2{font-size:clamp(2rem,3.6vw,2.85rem);margin:16px 0 0;color:var(--abyss)}
  .sec-head p{color:var(--slate);font-size:1.12rem;margin-top:18px}

  /* ── Problem / Solution ─────────────────────────── */
  .ps{background:var(--white)}
  .ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:8px}
  .ps-col{border-radius:18px;padding:38px 34px}
  .ps-before{background:var(--ice);border:1px solid #c6d3e0}
  .ps-after{background:var(--ocean);color:var(--white);position:relative;overflow:hidden}
  .ps-after::after{content:"";position:absolute;width:340px;height:340px;right:-120px;bottom:-140px;
    background:radial-gradient(circle,rgba(46,196,182,.22),transparent 65%)}
  .ps-tag{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:8px}
  .ps-before .ps-tag{color:#8593a7}
  .ps-after .ps-tag{color:var(--cyan);position:relative;z-index:1}
  .ps-col h3{font-size:1.5rem;margin:14px 0 22px}
  .ps-before h3{color:var(--abyss)}
  .ps-after h3{color:var(--white);position:relative;z-index:1}
  .ps-list{list-style:none;display:flex;flex-direction:column;gap:15px;position:relative;z-index:1}
  .ps-list li{display:flex;gap:13px;align-items:flex-start;font-size:1rem}
  .ps-before li{color:var(--slate)}
  .ps-after li{color:var(--ice)}
  .ps-icon{flex-shrink:0;margin-top:1px}
  .ps-before .ps-icon{color:#9aa7ba}
  .ps-after .ps-icon{color:var(--cyan)}

  /* ── Feature deep dive ─────────────────────────── */
  .feat{background:var(--abyss);color:var(--white)}
  .feat .sec-head h2{color:var(--white)}
  .feat .sec-head p{color:var(--ice);opacity:.88}
  .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:48px 0}
  .feat-row + .feat-row{border-top:1px solid rgba(217,226,236,.1)}
  .feat-row.flip .feat-copy{order:2}
  .feat-row.flip .feat-visual{order:1}
  .feat-label{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
  .feat-copy h3{font-size:1.92rem;margin:14px 0 16px;color:var(--white)}
  .feat-copy p{color:var(--ice);opacity:.86;font-size:1.06rem;max-width:480px}
  .feat-points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
  .feat-points li{display:flex;gap:11px;font-size:.98rem;color:var(--ice)}
  .feat-points .chk{color:var(--cyan);flex-shrink:0}
  .feat-visual{background:linear-gradient(165deg,#0c2a44,var(--ocean));border:1px solid rgba(46,196,182,.2);
    border-radius:18px;padding:26px;min-height:260px}

  /* mini schedule grid visual */
  .mini-sched{display:grid;grid-template-columns:auto repeat(6,1fr);gap:5px;font-size:.66rem}
  .mini-sched .hd{color:#9fb3c8;font-weight:600;text-align:center;padding-bottom:6px;font-family:var(--font-body)}
  .mini-sched .rl{color:var(--ice);font-weight:600;padding-right:8px;display:flex;align-items:center;font-size:.7rem}
  .cell{height:26px;border-radius:5px;background:rgba(217,226,236,.07)}
  .cell.a{background:var(--seafoam)}
  .cell.b{background:var(--cyan)}
  .cell.c{background:rgba(217,226,236,.5)}
  .cell.rest{background:repeating-linear-gradient(45deg,rgba(217,226,236,.12),rgba(217,226,236,.12) 4px,transparent 4px,transparent 8px)}

  /* compliance bars */
  .comp-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
  .comp-row .who{width:74px;font-size:.82rem;color:var(--ice);font-weight:600;flex-shrink:0}
  .comp-bar{flex:1;height:9px;border-radius:6px;background:rgba(217,226,236,.12);overflow:hidden}
  .comp-bar i{display:block;height:100%;border-radius:6px}
  .comp-val{width:54px;text-align:right;font-size:.78rem;font-weight:600;font-family:var(--font-display)}
  .comp-legend{margin-top:18px;font-size:.74rem;color:#9fb3c8;display:flex;gap:16px;flex-wrap:wrap}
  .comp-legend span{display:inline-flex;align-items:center;gap:6px}
  .comp-legend i{width:9px;height:9px;border-radius:2px}

  /* handover steps */
  .ho-step{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
  .ho-step + .ho-step{border-top:1px solid rgba(217,226,236,.1)}
  .ho-num{width:30px;height:30px;border-radius:8px;background:rgba(46,196,182,.14);color:var(--cyan);
    font-family:var(--font-display);font-weight:600;font-size:.92rem;display:flex;align-items:center;
    justify-content:center;flex-shrink:0}
  .ho-step .ht{font-weight:600;font-size:.94rem;color:var(--white);font-family:var(--font-body)}
  .ho-step .hd{font-size:.83rem;color:#9fb3c8;margin-top:2px}

  /* ── Proof band ─────────────────────────── */
  .proof{background:var(--ocean);color:var(--white);text-align:center}
  .proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .proof .n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4vw,3rem);color:var(--cyan)}
  .proof .l{font-size:.92rem;color:var(--ice);opacity:.85;margin-top:6px}

  /* ── Final CTA ─────────────────────────── */
  .cta-final{background:var(--abyss);color:var(--white);text-align:center;position:relative;overflow:hidden}
  .cta-final::after{content:"";position:absolute;width:760px;height:760px;left:50%;top:30%;transform:translateX(-50%);
    background:radial-gradient(circle,rgba(17,157,164,.22),transparent 60%);pointer-events:none}
  .cta-final .inner{position:relative;z-index:1;max-width:620px;margin:0 auto}
  .cta-final h2{font-size:clamp(2.1rem,4vw,3rem);color:var(--white)}
  .cta-final p{color:var(--ice);font-size:1.14rem;margin:20px 0 32px;opacity:.9}
  .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .cta-fine{margin-top:22px;font-size:.82rem;color:#7d93aa}

  /* ── Dev token reference ─────────────────────────── */
  .tokens{background:var(--white);border-top:1px solid var(--ice)}
  .tokens .sec-head{margin-bottom:40px}
  .swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-bottom:46px}
  .sw{border-radius:12px;overflow:hidden;border:1px solid var(--ice)}
  .sw .chip{height:74px}
  .sw .meta{padding:10px 11px;background:var(--white)}
  .sw .nm{font-size:.78rem;font-weight:600;color:var(--abyss);font-family:var(--font-body)}
  .sw .hx{font-size:.72rem;color:var(--slate);font-family:var(--font-body);letter-spacing:.02em;margin-top:2px}
  .type-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:8px}
  .type-card{border:1px solid var(--ice);border-radius:12px;padding:24px}
  .type-card .role{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--seafoam)}
  .type-card .name{font-size:2rem;margin-top:8px;color:var(--abyss)}
  .type-card.body-c .name{font-family:var(--font-body);font-weight:600}
  .type-card .use{font-size:.86rem;color:var(--slate);margin-top:8px}

  /* ── Footer ─────────────────────────── */
  footer.ft{background:var(--abyss);color:var(--ice);padding:54px 0 36px;border-top:1px solid rgba(217,226,236,.1)}
  .ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
  .ft .brand{margin-bottom:14px}
  .ft-blurb{font-size:.9rem;color:#9fb3c8;max-width:280px}
  .ft-col h5{font-family:var(--font-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
    color:#7d93aa;margin-bottom:16px;font-weight:600}
  .ft-col a{display:block;font-size:.9rem;color:var(--ice);opacity:.82;margin-bottom:11px;transition:color .15s,opacity .15s}
  .ft-col a:hover{color:var(--cyan);opacity:1}
  .ft-bot{border-top:1px solid rgba(217,226,236,.1);padding-top:24px;display:flex;
    justify-content:space-between;align-items:center;font-size:.82rem;color:#7d93aa;flex-wrap:wrap;gap:12px}

  /* ── Responsive ─────────────────────────── */
  @media(max-width:920px){
    .nav-links{display:none}
    .menu-toggle{display:block}
    .hero-grid{grid-template-columns:1fr;gap:44px;padding:60px 0 72px}
    .dial-card{max-width:420px;margin:0 auto}
    .ps-grid{grid-template-columns:1fr}
    .feat-row{grid-template-columns:1fr;gap:30px}
    .feat-row.flip .feat-copy{order:1}
    .feat-row.flip .feat-visual{order:2}
    .proof-grid{grid-template-columns:1fr 1fr;gap:30px 20px}
    .swatches{grid-template-columns:repeat(3,1fr)}
    .type-pair{grid-template-columns:1fr}
    .ft-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:520px){
    .wrap{padding:0 20px}
    section{padding:68px 0}
    .hero-meta{gap:22px}
    .proof-grid{grid-template-columns:1fr 1fr}
    .swatches{grid-template-columns:repeat(2,1fr)}
    .ft-grid{grid-template-columns:1fr 1fr}
    .ft-bot{flex-direction:column;align-items:flex-start}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  }
  :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ════════════════════════════════════════════
   v2 — logo, 6-module grid, compliance section
   ════════════════════════════════════════════ */

/* Logo lockups — mark image + live DM Sans wordmark */
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  letter-spacing:.03em;color:#fff;line-height:1}
.nav-mark{height:34px;width:auto;display:block}
.ft-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ft-mark{height:40px;width:auto;display:block}
.ft-word{font-size:1.7rem}
.nav-mobile-cta{display:none}

/* ── 6-module grid ── */
.modules{background:var(--white)}
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mod-card{
  background:var(--ocean);color:#fff;border-radius:18px;padding:28px 26px;
  display:flex;flex-direction:column;border:1px solid rgba(46,196,182,.16);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mod-card:hover{transform:translateY(-4px);border-color:rgba(46,196,182,.5);
  box-shadow:0 24px 50px -28px rgba(8,28,46,.7)}
.mod-ico{width:46px;height:46px;border-radius:12px;background:rgba(46,196,182,.14);
  display:flex;align-items:center;justify-content:center;color:var(--cyan);margin-bottom:18px}
.mod-ico svg{width:24px;height:24px}
.mod-card h3{font-size:1.3rem;color:#fff;margin-bottom:10px}
.mod-card p{font-size:.95rem;color:var(--ice);opacity:.86;margin-bottom:20px}
.mod-ui{margin-top:auto;background:rgba(8,28,46,.45);border:1px solid rgba(217,226,236,.1);
  border-radius:12px;padding:13px 14px;font-family:var(--font-body)}

/* mini UI element primitives (inside module cards) */
.ui-row{display:flex;align-items:center;gap:11px}
.ui-avatar{width:34px;height:34px;border-radius:9px;background:var(--seafoam);color:#fff;
  font-weight:600;font-size:.76rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ui-flag{width:34px;height:34px;border-radius:9px;background:rgba(46,196,182,.18);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.ui-id{flex:1;min-width:0}
.ui-id b{display:block;font-size:.83rem;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-id small{font-size:.71rem;color:#9fb3c8}
.ui-pill{font-size:.67rem;font-weight:600;padding:4px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.ui-pill.ok{background:rgba(46,196,182,.16);color:var(--cyan)}
.ui-pill.warn{background:rgba(217,226,236,.14);color:var(--ice)}
.ui-chips{display:flex;gap:5px;margin-bottom:11px}
.ui-chips .chip{height:22px;flex:1;border-radius:4px}
.chip.a{background:var(--seafoam)}
.chip.b{background:var(--cyan)}
.chip.c{background:rgba(217,226,236,.55)}
.chip.rest{background:repeating-linear-gradient(45deg,rgba(217,226,236,.18),rgba(217,226,236,.18) 3px,transparent 3px,transparent 7px)}
.ui-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui-foot small{font-size:.71rem;color:#9fb3c8}
.ui-pay{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui-pay span{font-size:.77rem;color:#9fb3c8}
.ui-pay b{font-size:.88rem;color:#fff;font-weight:600}
.ui-pay.sub{margin-top:8px;padding-top:8px;border-top:1px solid rgba(217,226,236,.1)}
.ui-pay.sub b{color:var(--cyan)}
.ui-doc{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ui-bar{height:6px;border-radius:6px;background:rgba(217,226,236,.14);overflow:hidden}
.ui-bar i{display:block;height:100%;background:var(--cyan);border-radius:6px}
.ui-pipe{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ui-pipe .stage{font-size:.67rem;font-weight:600;padding:4px 9px;border-radius:6px;background:rgba(217,226,236,.08);color:#9fb3c8}
.ui-pipe .stage.done{background:rgba(46,196,182,.14);color:var(--cyan)}
.ui-pipe .stage.active{background:var(--seafoam);color:#fff}

/* ── Compliance band ── */
.compliance{background:var(--abyss);color:#fff}
.compliance .sec-head h2{color:#fff}
.compliance .sec-head p{color:var(--ice);opacity:.88}
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.comp-card{background:linear-gradient(165deg,#0c2a44,var(--ocean));border:1px solid rgba(46,196,182,.18);
  border-radius:18px;padding:30px 28px}
.comp-ico{width:48px;height:48px;border-radius:13px;background:rgba(46,196,182,.14);
  display:flex;align-items:center;justify-content:center;color:var(--cyan);margin-bottom:18px}
.comp-ico svg{width:25px;height:25px}
.comp-card h3{font-size:1.28rem;color:#fff;margin-bottom:10px}
.comp-card p{font-size:.95rem;color:var(--ice);opacity:.85;margin-bottom:16px}
.comp-src{font-size:.71rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.comp-hl {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color:var(--cyan);
}

/* ── Responsive (v2 additions) ── */
@media(max-width:920px){
  .nav-links.open{display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:70px;left:0;right:0;background:var(--abyss);
    border-bottom:1px solid rgba(217,226,236,.12);padding:14px 28px 22px;gap:14px}
  .nav-links.open a{font-size:1rem;padding:6px 0;opacity:.92}
  .nav-links.open .nav-mobile-cta{display:inline-flex;justify-content:center;margin-top:6px}
  .nav-cta{display:none}
  .mod-grid{grid-template-columns:1fr 1fr}
  .comp-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .mod-grid{grid-template-columns:1fr}
}

/* Offset anchored sections so the sticky nav never covers their headings */
#modules, #compliance, #proof, #cta{scroll-margin-top:88px}

/* ════════════════════════════════════════════
   v3 — interactive dashboard preview + demo form
   ════════════════════════════════════════════ */

/* Dashboard preview card (replaces the watch dial) */
.dash-card{position:relative;background:linear-gradient(165deg,#0c2a44 0%,var(--ocean) 100%);
  border:1px solid rgba(46,196,182,.22);border-radius:24px;padding:22px 22px 18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.dash-vessel{display:block;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff}
.dash-sub{display:block;font-size:.76rem;color:#9fb3c8;margin-top:2px}
.dash-head .live{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;color:var(--cyan);
  font-weight:600;letter-spacing:.06em;flex-shrink:0}
.dash-head .live .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 0 rgba(46,196,182,.7);animation:pulse 2.4s infinite}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dash-stat{background:rgba(8,28,46,.45);border:1px solid rgba(217,226,236,.1);border-radius:12px;
  padding:12px 10px;text-align:center}
.dash-stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:#fff}
.dash-stat small{font-size:.67rem;color:#9fb3c8}

.dash-tabs{display:flex;gap:4px;background:rgba(8,28,46,.5);border:1px solid rgba(217,226,236,.1);
  border-radius:12px;padding:4px;margin-bottom:14px}
.dash-tab{flex:1;border:0;background:transparent;color:#9fb3c8;font-family:var(--font-body);
  font-weight:600;font-size:.8rem;padding:8px 4px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.dash-tab:hover{color:var(--ice)}
.dash-tab.active{background:var(--seafoam);color:#fff}

.dash-body{min-height:196px}
.dash-panel{display:none;flex-direction:column;gap:9px;animation:fade .25s ease}
.dash-panel.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.d-row{display:flex;align-items:center;gap:11px;background:rgba(8,28,46,.4);
  border:1px solid rgba(217,226,236,.08);border-radius:10px;padding:9px 12px}
.d-av{width:32px;height:32px;border-radius:8px;background:var(--seafoam);color:#fff;font-weight:600;
  font-size:.72rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.d-id{flex:1;min-width:0}
.d-id b{display:block;font-size:.84rem;color:#fff;font-weight:600}
.d-id small{font-size:.72rem;color:#9fb3c8}
.d-more{font-size:.75rem;color:#9fb3c8;text-align:center;padding:6px}
.d-line{display:flex;align-items:center;justify-content:space-between;background:rgba(8,28,46,.4);
  border:1px solid rgba(217,226,236,.08);border-radius:10px;padding:11px 13px}
.d-line span{font-size:.8rem;color:#9fb3c8}
.d-line b{font-size:.86rem;color:#fff;font-weight:600}
.d-meter{display:flex;align-items:center;gap:12px}
.d-meter span{width:92px;font-size:.8rem;color:var(--ice);flex-shrink:0}
.d-meter .ui-bar{flex:1}
.d-meter b{width:42px;text-align:right;font-size:.8rem;color:var(--cyan);font-weight:600;font-family:var(--font-display)}
.d-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;
  padding-top:10px;border-top:1px solid rgba(217,226,236,.1)}
.d-foot small{font-size:.72rem;color:#9fb3c8}
.dash-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;
  padding-top:14px;border-top:1px solid rgba(217,226,236,.12);font-size:.8rem;color:#9fb3c8}
.dash-cta{color:var(--cyan);font-weight:600;white-space:nowrap}
.dash-cta:hover{color:#fff}

/* extra pill variant: urgent (on-brand seafoam, no red needed) */
.ui-pill.alert{background:var(--seafoam);color:#fff}

/* Demo request form (dark CTA section) */
.demo-form{max-width:540px;margin:30px auto 0;text-align:left}
.df-row{display:flex;gap:14px}
.df-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;flex:1;min-width:0}
.df-field span{font-size:.8rem;font-weight:600;color:var(--ice)}
.df-field input,.df-field select,.df-field textarea{
  font-family:var(--font-body);font-size:.95rem;color:#fff;background:rgba(8,28,46,.55);
  border:1px solid rgba(217,226,236,.18);border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .15s, box-shadow .15s}
.df-field input::placeholder,.df-field textarea::placeholder{color:#6f8295}
.df-field input:focus,.df-field select:focus,.df-field textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(46,196,182,.18)}
.df-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="%239fb3c8" stroke-width="2"><path d="M2 4l4 4 4-4"/></svg>');
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.df-field select option{color:#081C2E;background:#fff}
.df-field textarea{resize:vertical;min-height:84px}
.df-submit{width:100%;justify-content:center;margin-top:6px}
.cta-final .cta-fine a{color:var(--cyan)}
.cta-final .cta-fine a:hover{color:#fff}

@media(max-width:560px){
  .df-row{flex-direction:column;gap:0}
}