/* ============================================================
   AEROZ · v7 Design System  —  "Ambient Fog, evolved"
   Premium dark · powder-blue · Palantir/Nvidia register
   Shared across every page. One source of truth.
   ============================================================ */

:root{
  /* — surfaces — */
  --bg:        #12171f;   /* base */
  --bg-1:      #161c25;   /* primary section */
  --bg-2:      #1b222c;   /* alt section */
  --bg-deep:   #0d1118;   /* deepest */
  --card:      #1c242f;   /* card base */
  --card-2:    #232c39;   /* card gradient end */
  --card-hi:   #2b3543;   /* card hover */

  /* — ink — */
  --ink:       #f5f8fb;   /* primary text */
  --ink-soft:  #c9d0da;   /* secondary */
  --ink-mute:  #9aa3b0;   /* tertiary / labels */
  --ink-dim:   #a5adba;   /* faint */

  /* — brand — */
  --powder:      #86c6ec;
  --powder-soft: #aedcf6;
  --powder-dim:  #6ea6c6;
  --powder-deep: #06222f;  /* text-on-powder */
  --green:     #6fe3ad;    /* verified */
  --amber:     #f4c879;    /* watch */
  --red:       #ff8f9c;    /* alert */

  /* — lines / glass — */
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.16);
  --line-warm:  rgba(134,198,236,.18);
  --glass:      rgba(24,31,41,.78);

  /* — type — */
  --sans: 'Switzer',-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
  --mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* — motion — */
  --ease:  cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.16,1,.3,1);

  /* — rhythm — */
  --wrap: 1240px;
  --pad: 40px;
  --r: 18px;     /* card radius */
  --r-lg: 28px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(134,198,236,.26);color:#fff}

/* ============ ambient background ============ */
.amb{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% -5%,rgba(134,198,236,.16),transparent 55%),
    radial-gradient(ellipse 45% 40% at 92% 18%,rgba(93,151,184,.12),transparent 60%),
    radial-gradient(ellipse 50% 40% at 5% 60%,rgba(134,198,236,.09),transparent 55%),
    linear-gradient(180deg,#131821 0,#0f161e 55%,#131821 100%);
}
.amb::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(ellipse 38% 30% at 50% 28%,rgba(134,198,236,.1),transparent 60%);
  animation:drift 20s var(--ease) infinite}
.amb::after{content:"";position:absolute;inset:0;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%,100%{transform:translate(-3%,-2%)}50%{transform:translate(3%,2%)}}
.grid-mask{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(134,198,236,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(134,198,236,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%)}

/* ============ layout ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{position:relative;padding:120px 0}
.sec-sm{padding:80px 0}
.sec-tight{padding:64px 0}
.center{text-align:center}
.mxw{max-width:760px}
.mxw.center{margin-left:auto;margin-right:auto}

/* ============ type ============ */
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--powder);margin-bottom:24px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--powder);box-shadow:0 0 10px var(--powder)}
.eyebrow.no-dot::before{display:none}

h1,h2,h3{letter-spacing:-.03em;line-height:1.02;font-weight:300}
.h1{font-size:clamp(44px,6.6vw,90px);letter-spacing:-.04em;line-height:.98}
.h2{font-size:clamp(34px,4.6vw,62px);letter-spacing:-.03em;line-height:1.03}
.h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.022em;line-height:1.1}
.em{color:var(--powder);font-weight:500}
.dim{color:var(--ink-mute)}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--ink-soft);max-width:60ch;margin-top:26px;font-weight:400}
.kicker{font-size:15px;color:var(--ink-soft);line-height:1.6}
.mono{font-family:var(--mono)}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;letter-spacing:-.005em;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  min-height:48px}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--powder);color:var(--powder-deep);
  box-shadow:0 14px 40px -12px rgba(134,198,236,.5)}
.btn-primary:hover{background:#fff;transform:translateY(-2px);box-shadow:0 20px 54px -12px rgba(134,198,236,.65)}
.btn-ghost{color:var(--ink-soft);border-color:var(--line-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--powder);background:rgba(134,198,236,.06)}
.btn-text{color:var(--powder);padding:14px 4px}
.btn-lg{font-size:15.5px;padding:18px 34px}

/* ============ nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:18px var(--pad);
  background:linear-gradient(180deg,rgba(8,11,17,.82),rgba(8,11,17,0));
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,11,17,.92);border-bottom-color:var(--line);padding:12px var(--pad)}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink)}
.nav-logo .dot{width:9px;height:9px;border-radius:50%;background:var(--powder);box-shadow:0 0 12px var(--powder)}
.nav-links{display:flex;gap:34px;font-size:14.5px;font-weight:500;color:var(--ink-soft);align-items:center}
.nav-links>a{transition:color .35s var(--ease)}
.nav-links>a:hover{color:var(--ink)}
.nav-dd{position:relative}
.nav-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .35s var(--ease)}
.nav-dd:hover .nav-trigger{color:var(--ink)}
.nav-caret{font-size:9px;opacity:.7;transition:transform .35s var(--ease)}
.nav-dd:hover .nav-caret{transform:rotate(180deg)}
.nav-dd::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:20px}
.nav-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:560px;padding:16px;opacity:0;visibility:hidden;
  background:rgba(12,17,25,.96);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--line-2);border-radius:20px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;z-index:110}
.nav-dd:hover .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-mi{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;transition:background .25s var(--ease)}
.nav-mi:hover{background:rgba(134,198,236,.08)}
.nav-mi .t{font-size:14px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:8px}
.nav-mi .s{font-size:12px;color:var(--ink-mute);line-height:1.4}
.nav-mi:hover .s{color:var(--ink-soft)}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-cta{background:var(--powder);color:var(--powder-deep);padding:10px 22px;border-radius:999px;
  font-size:13.5px;font-weight:600;border:1px solid var(--powder);transition:all .35s var(--ease)}
.nav-cta:hover{background:#fff;border-color:#fff;transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;
  background:0 0;border:1px solid var(--line-2);border-radius:12px}
.nav-toggle span{width:18px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),opacity .3s var(--ease)}
body.mnav-open .nav-toggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.mnav-open .nav-toggle span:nth-child(2){opacity:0}
body.mnav-open .nav-toggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* mobile drawer */
.mnav{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  padding:96px 24px 40px;background:rgba(6,9,14,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transform:translateY(-12px);overflow-y:auto;
  transition:opacity .4s var(--ease),transform .45s var(--ease),visibility .4s}
body.mnav-open .mnav{opacity:1;visibility:visible;transform:none}
.mnav a{padding:16px 8px;font-size:20px;font-weight:500;color:var(--ink-soft);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;transition:color .3s var(--ease)}
.mnav a:hover,.mnav a:active{color:var(--ink)}
.mnav .mnav-head{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--powder);padding:22px 8px 6px;border:0}
.mnav .mnav-sub{font-size:16px;color:var(--ink-mute);padding-left:18px}
.mnav .mnav-cta{margin-top:26px;justify-content:center;background:var(--powder);color:var(--powder-deep);
  border-radius:999px;border:0;font-size:16px;font-weight:600}

/* ============ hero ============ */
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;flex-direction:column;
  justify-content:center;padding:150px 0 90px;overflow:hidden}
.hero-glow{position:absolute;left:50%;top:30%;transform:translateX(-50%);width:90%;height:60%;z-index:-1;
  pointer-events:none;background:radial-gradient(ellipse,rgba(134,198,236,.14),transparent 65%);filter:blur(30px)}
.hero h1{max-width:16ch}
.hero-anchor{font-size:clamp(18px,1.8vw,25px);line-height:1.3;color:var(--powder);margin-top:26px;max-width:38ch;font-weight:400}
.hero-sub{font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--ink-soft);max-width:54ch;margin-top:22px}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:46px}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:40px;max-width:760px}
.chips span{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--ink-soft);transition:all .35s var(--ease)}
.chips span:hover{background:rgba(134,198,236,.09);border-color:var(--line-warm);color:var(--ink)}

/* ============ marquee ============ */
.marq{overflow:hidden;padding:36px 0;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-row{display:flex;gap:64px;width:max-content;animation:scroll 32s linear infinite;align-items:center}
.marq:hover .marq-row{animation-play-state:paused}
.marq-row span{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--ink-mute);white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ bento / cards ============ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:60px}
.card{position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--line);
  padding:30px;transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease)}
.card::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(ellipse at 100% 0,rgba(134,198,236,.1),transparent 55%);transition:opacity .55s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--line-warm);box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}
.card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--powder)}
.card h3{margin-top:14px;font-weight:400;font-size:22px;letter-spacing:-.018em;color:var(--ink)}
.card p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.card .more{margin-top:18px;font-size:13px;font-weight:500;color:var(--powder);display:inline-flex;gap:7px;align-items:center;transition:gap .35s var(--ease)}
.card:hover .more{gap:11px}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}
.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
.cards{display:grid;gap:18px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}

/* feature card big */
.feat{padding:40px;display:flex;flex-direction:column;justify-content:space-between;min-height:340px}
.feat .icon{width:46px;height:46px;color:var(--powder);margin-bottom:auto}

/* ============ spec table ============ */
.specs{display:flex;flex-direction:column;gap:0;margin-top:8px}
.spec{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec:last-child{border-bottom:0}
.spec .k{color:var(--ink-mute)}
.spec .v{color:var(--ink);font-weight:500;font-family:var(--mono);text-align:right}

/* metric bars */
.metrics{display:flex;flex-direction:column}
.metric{display:grid;grid-template-columns:1fr 64px auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.metric:last-child{border-bottom:0}
.metric .k{color:var(--ink-mute)}
.metric .bar{height:3px;background:rgba(134,198,236,.12);border-radius:2px;overflow:hidden}
.metric .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--powder-dim),var(--powder));border-radius:2px;box-shadow:0 0 8px rgba(134,198,236,.5)}
.metric .v{color:var(--ink);font-weight:500;font-family:var(--mono);text-align:right}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.stat{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--card-2))}
.stat .n{font-family:var(--mono);font-size:clamp(30px,3.4vw,44px);font-weight:500;color:var(--ink);letter-spacing:-.02em}
.stat .l{font-size:13px;color:var(--ink-mute);margin-top:8px;line-height:1.4}

/* split */
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:center}
.split.rev{grid-template-columns:1fr 1.25fr}

/* pill row */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pill{font-family:var(--mono);font-size:12px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-soft)}

/* step flow */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:60px;position:relative}
.flow::before{content:"";position:absolute;left:9%;right:9%;top:19px;height:1px;
  background:linear-gradient(90deg,rgba(134,198,236,.4),rgba(134,198,236,.2),rgba(134,198,236,.4));z-index:0}
.fstep{position:relative;z-index:1;text-align:center;padding:0 6px}
.fstep .n{width:38px;height:38px;border-radius:50%;background:var(--bg);border:1px solid var(--line-warm);color:var(--powder);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:500;
  box-shadow:0 0 0 6px var(--bg),0 0 20px rgba(134,198,236,.25)}
.fstep h5{margin-top:18px;font-size:14px;font-weight:500;color:var(--ink)}
.fstep p{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}

/* compare table */
.cmp{margin-top:54px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,var(--card),var(--card-2))}
.cmp table{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.cmp tbody td:first-child{color:var(--ink-soft)}
.cmp .yes{color:var(--green)}.cmp .no{color:var(--red)}.cmp .mid{color:var(--amber)}
.cmp .hl{background:rgba(134,198,236,.05);color:var(--ink);font-weight:500}
.cmp tr:last-child td{border-bottom:0}

/* CTA panel */
.cta-panel{position:relative;border-radius:var(--r-lg);padding:72px;overflow:hidden;
  background:radial-gradient(ellipse 60% 80% at 100% 0,rgba(134,198,236,.18),transparent 60%),
             radial-gradient(ellipse 50% 60% at 0 100%,rgba(134,198,236,.1),transparent 60%),
             linear-gradient(135deg,#20334a,#152330 60%,#18202d);
  border:1px solid var(--line-warm);box-shadow:0 60px 140px -50px rgba(0,0,0,.75)}
.cta-panel::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,214,240,.55),transparent)}
.cta-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.cta-includes{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.cta-includes h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--powder);margin-bottom:18px}
.cta-includes ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.cta-includes li{display:flex;gap:13px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.cta-includes li svg{flex:0 0 18px;margin-top:3px;color:var(--powder)}
.cta-includes li strong{color:var(--ink);font-weight:500}
.cta-meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px}
.cta-meta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
.cta-meta .v{font-size:18px;font-weight:500;color:var(--ink)}

/* end cta */
.end{text-align:center;padding:120px 0 150px;position:relative}
.end .big{font-weight:300;font-size:clamp(34px,5.2vw,68px);letter-spacing:-.03em;line-height:1.03;max-width:20ch;margin:0 auto}
.end .sub{font-size:18px;color:var(--ink-soft);margin-top:30px}

/* ============ footer ============ */
.foot{border-top:1px solid var(--line);padding:72px 0 44px;background:var(--bg-deep)}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:48px}
.foot-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.foot-logo .dot{width:8px;height:8px;border-radius:50%;background:var(--powder);box-shadow:0 0 10px var(--powder)}
.foot-sub{font-size:14px;line-height:1.6;color:var(--ink-mute);max-width:34ch}
.foot-col h5{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}
.foot-col a{display:block;padding:6px 0;font-size:14px;color:var(--ink-mute);transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-mute)}
.foot-bottom a{color:var(--ink-mute);transition:color .3s}.foot-bottom a:hover{color:var(--ink)}

/* ============ reveal ============ */
:where(html.js) .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.amb::before,.marq-row{animation:none}}

/* ============ responsive ============ */
@media(max-width:1024px){
  :root{--pad:32px}
  .bento{grid-template-columns:repeat(6,1fr)}
  .col-3{grid-column:span 3}.col-4,.col-5{grid-column:span 6}.col-6{grid-column:span 6}.col-7,.col-8{grid-column:span 6}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .split,.split.rev{grid-template-columns:1fr;gap:44px}
  .cta-grid{grid-template-columns:1fr;gap:40px}
  .flow{grid-template-columns:repeat(3,1fr);gap:32px 14px}.flow::before{display:none}
  .nav-menu{min-width:440px}
}
@media(max-width:860px){
  .nav-links,.nav-right .nav-cta{display:none}
  .nav-toggle{display:flex}
  .sec{padding:88px 0}.sec-sm{padding:64px 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .cmp{overflow-x:auto}
  .cta-panel{padding:44px 32px}
  .hero{padding:128px 0 64px;min-height:auto}
}
@media(max-width:560px){
  :root{--pad:20px}
  body{font-size:17px}
  .sec{padding:64px 0}
  .bento,.cards-2,.cards-3,.cards-4{grid-template-columns:1fr}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:22px}
  .flow{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{justify-content:center}
  .end{padding:80px 0 100px}
  .cta-panel{padding:32px 22px}
  .marq-row{gap:40px}
}

/* ============================================================
   HOMEPAGE v7.1 — motion + product visuals (additive)
   New components only. Does not touch shared classes above.
   ============================================================ */

/* ---- two-column hero ---- */
.hero-2{align-items:center}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-copy{max-width:none}
.hero-copy .h1{max-width:14ch}
.hero-copy .hero-sub{max-width:50ch}

/* ---- animated product diagram ---- */
.viz{position:relative;width:100%;aspect-ratio:1/1;max-width:560px;margin-inline:auto}
.viz svg{width:100%;height:100%;overflow:visible}
.viz-fog{position:absolute;inset:-10% -10% -20% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 60%,rgba(134,198,236,.16),transparent 65%);
  filter:blur(26px);animation:vizfog 16s var(--ease) infinite}
@keyframes vizfog{0%,100%{transform:translate(-3%,2%) scale(1)}50%{transform:translate(4%,-3%) scale(1.08)}}

/* nfc pulse rings */
.nfc-ring{transform-origin:center;transform-box:fill-box;animation:nfcpulse 3.2s var(--ease) infinite}
.nfc-ring.r2{animation-delay:.5s}
.nfc-ring.r3{animation-delay:1s}
@keyframes nfcpulse{0%{opacity:.9;transform:scale(.45)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0;transform:scale(1.25)}}

/* scan beam sweep */
.scan-beam{animation:scansweep 4.6s var(--ease) infinite}
@keyframes scansweep{0%{transform:translateY(0);opacity:0}10%{opacity:1}40%{transform:translateY(74px);opacity:1}52%{opacity:0}100%{transform:translateY(74px);opacity:0}}

/* data tendrils flowing along the path */
.tendril{stroke-dasharray:6 10;animation:tendril 2.4s linear infinite}
@keyframes tendril{to{stroke-dashoffset:-32}}

/* ledger rows ticking in */
.ledger-row{opacity:0;transform-origin:left center;transform-box:fill-box;animation:ledgerin 4.6s var(--ease) infinite}
.ledger-row.l1{animation-delay:.2s}
.ledger-row.l2{animation-delay:.9s}
.ledger-row.l3{animation-delay:1.6s}
.ledger-row.l4{animation-delay:2.3s}
@keyframes ledgerin{0%{opacity:0;transform:translateX(-8px)}8%{opacity:1;transform:none}88%{opacity:1}100%{opacity:.25}}

/* dpp card glint */
.dpp-card{animation:dppbreath 5s var(--ease) infinite}
@keyframes dppbreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.dpp-glint{animation:dppglint 4.6s var(--ease) infinite}
@keyframes dppglint{0%,60%{opacity:0;transform:translateX(-40px)}75%{opacity:.7}100%{opacity:0;transform:translateX(40px)}}

/* verified check */
.vmark{stroke-dasharray:28;stroke-dashoffset:28;animation:vdraw 4.6s var(--ease) infinite}
@keyframes vdraw{0%,62%{stroke-dashoffset:28}74%,100%{stroke-dashoffset:0}}

.blink{animation:blink 1.8s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}

@media(prefers-reduced-motion:reduce){
  .viz-fog,.nfc-ring,.scan-beam,.tendril,.ledger-row,
  .dpp-card,.dpp-glint,.vmark,.blink{animation:none}
  .ledger-row{opacity:1}
  .vmark{stroke-dashoffset:0}
}

/* ---- trust strip ---- */
.trust-note{text-align:center;font-size:13.5px;color:var(--ink-mute);
  font-family:var(--mono);letter-spacing:.04em;padding:0 var(--pad);margin-bottom:-12px}
.marq.grey .marq-row span{color:var(--ink-dim);filter:grayscale(1);transition:color .35s var(--ease)}
.marq.grey:hover .marq-row span{color:var(--ink-mute)}

/* ---- 3-up stat band ---- */
.stats-3{grid-template-columns:repeat(3,1fr)}
.stat .n .u{font-size:.5em;color:var(--ink-mute);margin-left:4px;letter-spacing:0}
.stat.big-stat .n{font-size:clamp(40px,5vw,64px);color:var(--powder)}

/* ---- scrollytelling: how it works ---- */
.chap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:56px 0;border-top:1px solid var(--line)}
.chap:first-of-type{border-top:0}
.chap.rev .chap-copy{order:2}
.chap.rev .chap-viz{order:1}
.chap-num{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--powder);
  display:flex;align-items:center;gap:12px;margin-bottom:20px}
.chap-num::after{content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,var(--line-warm),transparent)}
.chap-copy h3{font-size:clamp(26px,3vw,40px);font-weight:300;letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
.chap-copy p{margin-top:18px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:46ch}
.chap-copy .chap-spec{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.chap-copy .chap-spec span{font-family:var(--mono);font-size:11.5px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--ink-soft)}
.chap-viz{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),var(--card-2));aspect-ratio:16/11;
  display:flex;align-items:center;justify-content:center;padding:30px}
.chap-viz::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:radial-gradient(ellipse at 80% 10%,rgba(134,198,236,.1),transparent 55%)}
.chap-viz svg{width:100%;height:100%;max-height:240px;overflow:visible;position:relative;z-index:1}

/* ---- browser-chrome mockup ---- */
.browser{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-warm);
  background:linear-gradient(180deg,var(--card-2),var(--card));
  box-shadow:0 80px 180px -60px rgba(0,0,0,.85),0 0 90px -30px rgba(134,198,236,.18)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02)}
.browser-bar .dot{width:11px;height:11px;border-radius:50%;background:var(--ink-dim);opacity:.55}
.browser-bar .dot:nth-child(1){background:#ff7a8a}
.browser-bar .dot:nth-child(2){background:#f4c879}
.browser-bar .dot:nth-child(3){background:#6fe3ad}
.browser-bar .url{margin-left:14px;flex:1;max-width:340px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-mute);padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);display:flex;align-items:center;gap:7px}
.browser-bar .url::before{content:"";width:9px;height:9px;border-radius:2px;border:1.4px solid var(--powder-dim)}
.browser img{width:100%;display:block}

/* ---- photo slot with on-brand overlay ---- */
.photo{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.82) contrast(1.05)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,17,.30),rgba(8,11,17,.85)),
            radial-gradient(ellipse 70% 60% at 70% 10%,rgba(134,198,236,.18),transparent 60%)}
.photo .photo-cap{position:absolute;left:22px;bottom:20px;z-index:2;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--powder)}

/* hero accent photo (under the viz, subtle) */
.hero-accent{position:absolute;right:0;top:0;width:46%;height:100%;z-index:-1;opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000,transparent 72%)}
.hero-accent img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.6)}

@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-copy .h1{max-width:18ch}
  .viz{max-width:440px}
  .chap,.chap.rev{grid-template-columns:1fr;gap:32px}
  .chap.rev .chap-copy{order:1}.chap.rev .chap-viz{order:2}
  .hero-accent{display:none}
}
@media(max-width:860px){
  .stats-3{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero-grid{gap:36px}
  .viz{max-width:320px}
  .chap-viz{aspect-ratio:16/12;padding:22px}
}

/* ============ blog / resources teaser ============ */
.blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.blog-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.blog-feat{display:flex;flex-direction:column;padding:0;overflow:hidden}
.blog-feat-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.blog-feat-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.8);transition:transform .8s var(--ease)}
.blog-feat:hover .blog-feat-img img{transform:scale(1.04)}
.blog-feat-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,17,.25),rgba(8,11,17,.85))}
.blog-badge{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--powder-deep);background:var(--powder);padding:5px 12px;border-radius:999px}
.blog-feat-body{padding:28px 30px 30px}
.blog-feat-body h3{font-weight:400;font-size:24px;line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin-top:12px}
.blog-feat-body p{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.blog-feat-body .more{margin-top:18px;font-size:13px;font-weight:500;color:var(--powder);display:inline-flex;gap:7px;align-items:center;transition:gap .35s var(--ease)}
.blog-feat:hover .blog-feat-body .more{gap:11px}
.blog-side{display:flex;flex-direction:column;gap:18px}
.blog-item{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px 28px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--card-2));transition:transform .5s var(--ease),border-color .5s var(--ease)}
.blog-item:hover{transform:translateY(-3px);border-color:var(--line-warm)}
.blog-item h4{font-weight:400;font-size:18px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr}}

/* ============================================================
   v7.3 — per-page headers · confident audit CTAs · fit guards
   ============================================================ */

/* ---- per-page hero with custom Higgsfield header image ---- */
.hero.hero-img{min-height:74vh;min-height:74svh;padding:150px 0 80px}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-bg::after{content:"";position:absolute;inset:0;background:
   linear-gradient(180deg,rgba(8,11,17,.5),rgba(8,11,17,.8) 62%,var(--bg)),
   radial-gradient(ellipse 70% 80% at 28% 42%,transparent,rgba(8,11,17,.55))}
.hero.hero-img .wrap{position:relative;z-index:1}
.hero.hero-img .hero-sub,.hero.hero-img .lead{max-width:50ch}
@media(max-width:560px){.hero.hero-img{min-height:auto;padding:120px 0 56px}.hero-bg img{opacity:.4}}

/* ---- confident audit CTA ---- */
.btn-audit{position:relative;isolation:isolate}
.btn-audit::after{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
  animation:auditpulse 2.8s var(--ease) infinite}
@keyframes auditpulse{
  0%{box-shadow:0 0 0 0 rgba(134,198,236,.5)}
  70%{box-shadow:0 0 0 16px rgba(134,198,236,0)}
  100%{box-shadow:0 0 0 0 rgba(134,198,236,0)}}
@media(prefers-reduced-motion:reduce){.btn-audit::after{animation:none}}

/* trust row under a CTA: ✓ Fixed fee · ✓ 14-day report · ✓ No commitment */
.trust-row{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:20px;font-size:13.5px;color:var(--ink-soft)}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row svg{width:16px;height:16px;color:var(--green);flex:none}
.cta-reassure{margin-top:14px;font-size:13.5px;color:var(--ink-mute)}

/* a confident standalone audit band (optional, reusable) */
.audit-band{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:48px;
  background:radial-gradient(ellipse 50% 90% at 100% 0,rgba(134,198,236,.16),transparent 60%),
             linear-gradient(135deg,#20334a,#152330);border:1px solid var(--line-warm);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.audit-band h3{font-weight:300;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;color:var(--ink);max-width:20ch}
.audit-band .trust-row{margin-top:14px}

/* ---- overlap + fit guards (defensive, won't fight existing rules) ---- */
.hero h1,.hero .h1,.h1,.h2,.h3{overflow-wrap:break-word}
.photo img{width:100%;height:100%;object-fit:cover}
.cmp{overflow-x:auto}
.cmp table{min-width:560px}
.cta-includes,.card,.blog-item{min-width:0}
@media(max-width:560px){
  .audit-band{padding:32px 22px}
  .trust-row{gap:8px 14px;font-size:12.5px}
}

/* ============================================================
   v7.4 — final spacing + mobile hardening
   ============================================================ */
/* mono spec values can be long — let them wrap instead of overflowing on small screens */
.spec .v,.metric .v,.tech-spec .v{overflow-wrap:anywhere}
/* never let any media or pre overflow its container */
img,svg,video,canvas,table{max-width:100%}
/* consistent vertical rhythm: a hero-img header followed immediately by a section shouldn't double-gap on phones */
@media(max-width:560px){
  .hero-ctas{width:100%}
  .hero-ctas .btn{width:100%;justify-content:center}
  .trust-row{margin-top:16px}
  .sec{padding:56px 0}
  .blog-feat-body{padding:22px 20px 24px}
  .browser-bar .url{max-width:none}
  .cta-meta{gap:18px 28px}
}
/* guarantee no element forces horizontal scroll */
html,body{max-width:100%;overflow-x:hidden}
/* tap targets: any inline nav/footer link comfortable on touch */
@media(max-width:860px){
  .foot-col a{padding:8px 0;display:inline-block}
}

/* ============================================================
   v7.5 — cinematic pass: hero viz 2.0 · photo bands · motion
   Additive only. Homepage-first, safe everywhere.
   ============================================================ */

/* ---- richer reveal: depth + focus pull ---- */
:where(html.js) .reveal{opacity:0;transform:translateY(30px) scale(.99);filter:blur(7px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}}

/* ---- hero accent: slow cinematic push-in ---- */
.hero-accent img{animation:kenburns 36s var(--ease) infinite alternate}
@keyframes kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.09) translate(-1.5%,1.5%)}}

/* ---- hero viz 2.0 ---- */
.viz2{position:relative;width:100%;max-width:520px;margin-inline:auto}
.viz2 svg{width:100%;height:auto;overflow:visible;display:block}
.viz2 .viz-fog{inset:-14% -14% -18% -14%}
.viz2::before{content:"";position:absolute;inset:8% 6% 4% 6%;z-index:-1;border-radius:32px;
  background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(134,198,236,.09),transparent 68%)}

/* master 8s orchestration */
.orbit{transform-origin:center;transform-box:fill-box;animation:orbit 46s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.orbit-rev{transform-origin:center;transform-box:fill-box;animation:orbit 64s linear infinite reverse}

.v2-beam{animation:v2beam 8s var(--ease) infinite}
@keyframes v2beam{
  0%{transform:translateY(0);opacity:0}
  4%{opacity:1}
  16%{transform:translateY(128px);opacity:1}
  22%{opacity:0}
  100%{transform:translateY(128px);opacity:0}}

.v2-row{opacity:0;transform-box:fill-box;animation:v2row 8s var(--ease) infinite}
.v2-row.r1{animation-delay:1.7s}
.v2-row.r2{animation-delay:2.4s}
.v2-row.r3{animation-delay:3.1s}
.v2-row.r4{animation-delay:3.8s}
@keyframes v2row{
  0%{opacity:0;transform:translateX(-10px)}
  5%{opacity:1;transform:none}
  86%{opacity:1}
  97%,100%{opacity:0}}

.v2-scanline{animation:v2scanline 8s linear infinite;opacity:0}
@keyframes v2scanline{20%{opacity:0}26%{opacity:.5}56%{opacity:.5;transform:translateY(118px)}60%{opacity:0;transform:translateY(118px)}100%{opacity:0}}

.v2-glint{opacity:0;animation:v2glint 8s var(--ease) infinite}
@keyframes v2glint{0%,56%{opacity:0;transform:translateX(-70px) skewX(-18deg)}64%{opacity:.85}74%,100%{opacity:0;transform:translateX(190px) skewX(-18deg)}}

/* check stays drawn — first paint draws it once, then it holds */
.v2-check{stroke-dasharray:30;stroke-dashoffset:30;animation:v2check 1.4s var(--ease) .8s forwards}
@keyframes v2check{to{stroke-dashoffset:0}}

.v2-badge{transform-origin:center;transform-box:fill-box;animation:v2badge 8s var(--ease) infinite}
@keyframes v2badge{0%,56%{transform:scale(1)}62%{transform:scale(1.14)}70%,100%{transform:scale(1)}}

.v2-card{animation:v2card 9s var(--ease) infinite}
@keyframes v2card{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.v2-arc{opacity:0;animation:v2arc 3.4s var(--ease) infinite}
.v2-arc.a2{animation-delay:.45s}
.v2-arc.a3{animation-delay:.9s}
@keyframes v2arc{0%{opacity:0}22%{opacity:.9}70%,100%{opacity:0}}

.v2-die{animation:v2die 3.4s var(--ease) infinite}
@keyframes v2die{0%,100%{opacity:.75}45%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .orbit,.orbit-rev,.v2-beam,.v2-row,.v2-scanline,.v2-glint,.v2-check,.v2-badge,.v2-card,.v2-arc,.v2-die,
  .hero-accent img{animation:none}
  .v2-row{opacity:1}.v2-check{stroke-dashoffset:0}
}

/* ---- full-bleed photographic band w/ parallax ---- */
.band{position:relative;overflow:hidden;padding:150px 0;isolation:isolate}
.band-media{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.band-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.5) contrast(1.06) saturate(.9)}
.band-overlay{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,var(--bg) 0,rgba(8,11,17,.42) 24%,rgba(8,11,17,.5) 70%,var(--bg) 100%),
  radial-gradient(ellipse 70% 80% at 22% 40%,rgba(8,11,17,.55),transparent 70%),
  radial-gradient(ellipse 60% 60% at 85% 15%,rgba(134,198,236,.14),transparent 60%)}
.band .h2{max-width:18ch}
.band-stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:48px}
.band-stats .bs .n{font-family:var(--mono);font-size:clamp(26px,3vw,40px);font-weight:500;color:var(--powder);letter-spacing:-.02em}
.band-stats .bs .l{font-size:13px;color:var(--ink-soft);margin-top:6px;max-width:22ch;line-height:1.45}
@media(max-width:860px){.band{padding:100px 0}.band-stats{gap:26px}}

/* ---- chapter visuals: photographic depth layer ---- */
.chap-viz .viz-bg{position:absolute;inset:0;z-index:0}
.chap-viz .viz-bg img{width:100%;height:100%;object-fit:cover;opacity:.34;
  filter:grayscale(.55) brightness(.62) contrast(1.05);transition:transform 1.2s var(--ease),opacity .8s var(--ease)}
.chap-viz .viz-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(10,14,21,.68),rgba(10,14,21,.42) 55%,rgba(10,14,21,.8)),
             radial-gradient(ellipse 80% 70% at 75% 15%,rgba(134,198,236,.12),transparent 60%)}
.chap:hover .viz-bg img{transform:scale(1.045);opacity:.42}
.chap-viz svg{filter:drop-shadow(0 6px 24px rgba(8,11,17,.55))}

/* ---- technology card: chip photo backdrop ---- */
.feat.feat-img{position:relative}
.feat-img .feat-bg{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden}
.feat-img .feat-bg img{width:100%;height:100%;object-fit:cover;opacity:.22;
  filter:grayscale(.4) brightness(.66) contrast(1.08);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.feat-img .feat-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,20,29,.55),rgba(14,20,29,.92) 78%)}
.feat-img:hover .feat-bg img{opacity:.32;transform:scale(1.04)}

/* ---- v7.5 mobile hardening ---- */
@media(max-width:560px){
  .viz2{max-width:340px}
  .viz2 svg text{font-size:11px}
  .band{padding:88px 0}
  .band .h2{max-width:none}
  .band-stats{gap:20px 28px;margin-top:36px}
  .band-stats .bs .n{font-size:24px}
  .audit-band{flex-direction:column;align-items:flex-start}
  .trust-note{font-size:12.5px;line-height:1.6}
  .chap-viz{aspect-ratio:16/11}
}
@media(max-width:400px){
  .viz2{max-width:300px}
  .stats{grid-template-columns:1fr}
}

/* ---- photo grade: unified cinematic treatment ---- */
.photo img{filter:grayscale(.45) brightness(.72) contrast(1.08) saturate(.85);transition:transform 1.1s var(--ease),filter .8s var(--ease)}
.photo:hover img{transform:scale(1.045);filter:grayscale(.2) brightness(.8) contrast(1.08) saturate(.95)}
.photo::after{background:linear-gradient(180deg,rgba(8,11,17,.22),rgba(8,11,17,.82)),
  radial-gradient(ellipse 70% 60% at 70% 10%,rgba(134,198,236,.16),transparent 60%)}

/* ============================================================
   v7.5 — FLUID PASS
   Kills the "AI-built" look: no hard box lines, sharper type,
   softer surfaces that blend into the page instead of stacking
   as outlined rectangles.
   ============================================================ */

/* ---- 1. SHARPER LETTERFORMS ----
   The old stack was over-smoothed (blurry on dark bg). Grayscale
   antialiasing + optical sizing + slightly heavier body weight
   makes text crisp instead of hazy. */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  font-weight:420;                       /* was 400 — crisper on dark */
  letter-spacing:-.011em;                /* tighter, more designed */
  font-optical-sizing:auto;
}
h1,h2,h3,h4,.h1,.h2,.h3{
  font-synthesis-weight:none;            /* never fake-bold = mushy edges */
  text-wrap:balance;                     /* no orphan words in headlines */
}
.h1{font-weight:340;letter-spacing:-.045em}
.h2{font-weight:340;letter-spacing:-.034em}
.h3{font-weight:400;letter-spacing:-.026em}
.em{font-weight:560}
p,.lead,.kicker{text-wrap:pretty}
.lead{color:#c3c9d4;font-weight:410}     /* lift contrast slightly */
.card p,.blog-feat-body p{color:#bcc3ce}
.mono,.eyebrow,.tag,.spec .v,.metric .v{letter-spacing:.02em;font-weight:500}
.eyebrow{letter-spacing:.16em}

/* ---- 2. NO MORE LINES BETWEEN BOXES ----
   Replace every 1px outline with a soft internal glow + shadow so
   surfaces feel lit, not drawn. */
.card,.stat,.blog-item,.cta-includes,.photo,.chap-viz,.cmp,.browser,.blog-feat{
  border:0 !important;
  border-radius:22px;
  background:
    radial-gradient(120% 100% at 50% 0,rgba(255,255,255,.045),transparent 60%),
    linear-gradient(180deg,#1b2433,#161e2b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),          /* top light catch */
    0 1px 2px rgba(0,0,0,.4),
    0 18px 46px -28px rgba(0,0,0,.9);
  transition:transform .6s var(--ease-2),box-shadow .6s var(--ease-2),background .6s var(--ease-2);
}
.card::before,.audit-tile::before,.cmp-card::before{opacity:0 !important}

.card:hover,.blog-item:hover,.blog-feat:hover{
  transform:translateY(-5px);
  background:
    radial-gradient(120% 100% at 50% 0,rgba(134,198,236,.09),transparent 60%),
    linear-gradient(180deg,#202b3b,#18222f);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.4),
    0 34px 70px -34px rgba(0,0,0,.95),
    0 0 44px -18px rgba(134,198,236,.22);   /* light, not an outline */
}

/* section dividers: hairlines → soft fades */
.sec+.sec{border-top:0}
.chap{border-top:0;position:relative}
.chap+.chap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 20%,rgba(255,255,255,.07) 80%,transparent);
}
.foot{border-top:0;position:relative}
.foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(134,198,236,.14),transparent);
}
.foot-bottom{border-top:0;position:relative;padding-top:26px}
.foot-bottom::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.06) 70%,transparent);
}
.spec,.metric{border-bottom:0;position:relative}
.spec::after,.metric::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 70%,transparent);
}
.spec:last-child::after,.metric:last-child::after{display:none}
.cmp th,.cmp td{border-bottom:0;box-shadow:0 1px 0 rgba(255,255,255,.045)}
.cmp tr:last-child td{box-shadow:none}
.marq{border-block:0;position:relative}
.marq::before,.marq::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
}
.marq::before{top:0}.marq::after{bottom:0}

/* chips / pills: outline → soft fill */
.chips span,.pill,.chap-copy .chap-spec span{
  border:0;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.chips span:hover,.pill:hover{background:rgba(134,198,236,.13);box-shadow:inset 0 1px 0 rgba(134,198,236,.2)}
.btn-ghost{border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{border-color:rgba(134,198,236,.5)}

/* nav + panels: lose the drawn edges */
.nav.scrolled{border-bottom-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.05),0 18px 40px -30px rgba(0,0,0,.9)}
.nav-menu{border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 90px -30px rgba(0,0,0,.85)}
.cta-panel,.audit-band{border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 60px 140px -50px rgba(0,0,0,.8)}
.audit-tile{border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 46px -28px rgba(0,0,0,.9)}
.audit-tile-talk{border:0 !important;background:linear-gradient(180deg,rgba(134,198,236,.075),rgba(134,198,236,.02)) !important}

/* ---- 3. FLUID MOTION ----
   Longer, softer easing so the page glides rather than snaps. */
:root{--ease-2:cubic-bezier(.16,1,.3,1)}
:where(html.js) .reveal{transform:translateY(20px);transition:opacity 1.15s var(--ease-2),transform 1.15s var(--ease-2)}
.btn{transition:transform .5s var(--ease-2),background .5s var(--ease-2),color .5s var(--ease-2),box-shadow .5s var(--ease-2),border-color .5s var(--ease-2)}
.photo img,.blog-feat-img img{transition:transform 1.4s var(--ease-2),filter 1.4s var(--ease-2)}
.photo:hover img{transform:scale(1.03)}

/* ---- 4. SOFTER FIELD SURFACES (contact form) ---- */
input,select,textarea{border-color:rgba(255,255,255,.09) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}

/* ---- 5. MEDIUM / EXTERNAL ARTICLE CARD ---- */
.ext-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--powder);
  background:rgba(134,198,236,.11);padding:5px 11px;border-radius:999px}
.ext-tag svg{width:12px;height:12px}

/* ============================================================
   v7.6 — INFOGRAPHICS: regulatory timeline + landscape diagram
   ============================================================ */

/* ---- regulatory horizon timeline ---- */
.rtl{position:relative;margin-top:56px;padding:8px 4px 4px}
.rtl-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.rtl-track::before{content:"";position:absolute;left:2%;right:2%;top:11px;height:2px;
  background:linear-gradient(90deg,rgba(134,198,236,.65),rgba(134,198,236,.28) 60%,rgba(134,198,236,.08));
  border-radius:2px}
.rtl-node{position:relative;padding:34px 14px 0 14px}
.rtl-node::before{content:"";position:absolute;top:5px;left:14px;width:14px;height:14px;border-radius:50%;
  background:#16202d;border:2px solid var(--powder);box-shadow:0 0 0 5px rgba(134,198,236,.12)}
.rtl-node.live::before{background:var(--powder);box-shadow:0 0 0 5px rgba(134,198,236,.16),0 0 18px rgba(134,198,236,.5);
  animation:rtlPulse 2.6s ease-in-out infinite}
@keyframes rtlPulse{0%,100%{box-shadow:0 0 0 5px rgba(134,198,236,.16),0 0 14px rgba(134,198,236,.4)}
  50%{box-shadow:0 0 0 8px rgba(134,198,236,.08),0 0 26px rgba(134,198,236,.65)}}
.rtl-node .d{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--powder)}
.rtl-node .r{margin-top:7px;font-size:14.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.rtl-node .w{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--dim)}
:where(html.js) .reveal .rtl-node{opacity:0;transform:translateY(14px)}
.reveal.in .rtl-node{opacity:1;transform:none;transition:opacity .9s var(--ease-2),transform .9s var(--ease-2)}
.reveal.in .rtl-node:nth-child(1){transition-delay:.05s}.reveal.in .rtl-node:nth-child(2){transition-delay:.17s}
.reveal.in .rtl-node:nth-child(3){transition-delay:.29s}.reveal.in .rtl-node:nth-child(4){transition-delay:.41s}
.reveal.in .rtl-node:nth-child(5){transition-delay:.53s}.reveal.in .rtl-node:nth-child(6){transition-delay:.65s}
@media(max-width:900px){
  .rtl-track{grid-template-columns:1fr;gap:0}
  .rtl-track::before{left:20px;right:auto;top:2%;bottom:2%;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(134,198,236,.65),rgba(134,198,236,.08))}
  .rtl-node{padding:0 0 30px 52px}
  .rtl-node::before{top:2px;left:14px}
}

/* ---- market landscape layer diagram ---- */
.land{margin-top:54px}
.land-layer{position:relative;border-radius:18px;padding:26px 30px;
  background:radial-gradient(70% 120% at 50% 0,rgba(134,198,236,.2),rgba(134,198,236,.06) 55%,transparent),
    linear-gradient(180deg,#22364f,#172433);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 54px -30px rgba(0,0,0,.9)}
.land-layer .t{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.land-layer .t b{font-size:19px;font-weight:520;letter-spacing:-.02em;color:var(--ink)}
.land-layer .t span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--powder)}
.land-links{display:grid;grid-template-columns:repeat(4,1fr);height:34px;margin:2px 26px}
.land-links i{justify-self:center;width:2px;height:100%;
  background:linear-gradient(180deg,rgba(134,198,236,.55),rgba(134,198,236,.12));border-radius:2px}
.land-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.land-cat{border-radius:16px;padding:20px 18px;background:linear-gradient(180deg,#1b232f,#151d28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 34px -24px rgba(0,0,0,.85)}
.land-cat .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--powder);opacity:.85}
.land-cat .h{margin-top:8px;font-size:14.5px;font-weight:510;color:var(--ink);letter-spacing:-.012em;line-height:1.3}
.land-cat .s{margin-top:6px;font-size:12px;line-height:1.5;color:var(--dim)}
:where(html.js) .reveal .land-layer{opacity:0;transform:translateY(-12px)}
:where(html.js) .reveal .land-links i{transform:scaleY(0);transform-origin:top}
:where(html.js) .reveal .land-cat{opacity:0;transform:translateY(14px)}
.reveal.in .land-layer{opacity:1;transform:none;transition:all 1s var(--ease-2) .55s}
.reveal.in .land-links i{transform:none;transition:transform .7s var(--ease-2) .45s}
.reveal.in .land-cat{opacity:1;transform:none;transition:all .85s var(--ease-2)}
.reveal.in .land-cat:nth-child(1){transition-delay:.02s}.reveal.in .land-cat:nth-child(2){transition-delay:.12s}
.reveal.in .land-cat:nth-child(3){transition-delay:.22s}.reveal.in .land-cat:nth-child(4){transition-delay:.32s}
@media(max-width:860px){.land-cats{grid-template-columns:1fr 1fr}.land-links{grid-template-columns:1fr 1fr;height:26px}
  .land-links i:nth-child(n+3){display:none}}

/* nav-dd-edge-guard: with four dropdowns the outermost menus must not
   centre themselves off the viewport. Anchor the first left, the last right. */
.nav-links > .nav-dd:first-child .nav-menu{left:0;right:auto;transform:translateX(0) translateY(8px)}
.nav-links > .nav-dd:first-child:hover .nav-menu{transform:translateX(0) translateY(0)}
.nav-links > .nav-dd:last-child .nav-menu{left:auto;right:0;transform:translateX(0) translateY(8px)}
.nav-links > .nav-dd:last-child:hover .nav-menu{transform:translateX(0) translateY(0)}

/* no-js safety: .reveal start states are scoped to :where(html.js) above, so if app.js
   never runs - error, blocked script, non-executing crawler - the page renders
   fully visible instead of blank. */
:where(html:not(.js)) .reveal,:where(html:not(.js)) .reveal *{opacity:1!important;transform:none!important;filter:none!important}