/* ============================================================
   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:        #080b11;   /* base */
  --bg-1:      #0a0e15;   /* primary section */
  --bg-2:      #0c111a;   /* alt section */
  --bg-deep:   #05080d;   /* deepest */
  --card:      #0e141d;   /* card base */
  --card-2:    #141b26;   /* card gradient end */
  --card-hi:   #18212e;   /* card hover */

  /* — ink — */
  --ink:       #f0f3f7;   /* primary text */
  --ink-soft:  #b7bdc8;   /* secondary */
  --ink-mute:  #7a818d;   /* tertiary / labels */
  --ink-dim:   #565d68;   /* faint */

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

  /* — lines / glass — */
  --line:       rgba(255,255,255,.07);
  --line-2:     rgba(255,255,255,.11);
  --line-warm:  rgba(134,198,236,.18);
  --glass:      rgba(12,17,25,.72);

  /* — 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,#080b11 0,#05080d 55%,#080b11 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,#142233,#0c1620 60%,#0e141d);
  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 ============ */
.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,#142233,#0c1620);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}
}