/* ============================================================
   NuAura.ai — Autonomous Reliability Engine
   Design system: "Aurora Signal" (foresight) + "Instrument Readout" (audit)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:#040302;
  --ink-2:#15110f;
  --snow:#ffffff;
  --mist:#f4f5f7;
  --mist-2:#eceef1;
  --slate:#5b5b6b;
  --slate-2:#83838f;
  --line:rgba(4,3,2,.10);
  --line-dark:rgba(255,255,255,.12);
  --accent:#f71e33;
  --accent-press:#cf1126;

  /* aurora */
  --a-blue:#f71e33;
  --a-cyan:#ff6a4d;
  --a-violet:#ff2e74;

  --maxw:1120px;
  --textw:780px;
  --radius:18px;
  --radius-lg:26px;
  --radius-sm:12px;

  --font-display:"Inter Tight",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--snow);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(72px,11vw,148px) 0}
.section--tight{padding:clamp(54px,8vw,96px) 0}
.center{text-align:center}
.measure{max-width:var(--textw);margin-left:auto;margin-right:auto}

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
  font-weight:500;
}
.eyebrow--dim{color:var(--slate-2)}
h1,h2,h3{font-family:var(--font-display);font-weight:680;letter-spacing:-.02em;line-height:1.05;margin:0}
.h-hero{font-size:clamp(2.6rem,6.4vw,4.7rem);letter-spacing:-.035em;line-height:1.02}
.h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.h3{font-size:clamp(1.18rem,2vw,1.4rem);font-weight:620;letter-spacing:-.01em}
.lead{font-size:clamp(1.12rem,1.7vw,1.36rem);color:var(--slate);line-height:1.5;font-weight:400}
.lead-tight{font-size:1.12rem;color:var(--slate);line-height:1.5}
p{margin:0 0 1em}
.muted{color:var(--slate)}
.balance{text-wrap:balance}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:550;font-size:1rem;
  padding:.82em 1.5em;border-radius:980px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-press);box-shadow:0 8px 26px rgba(247,30,51,.32)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(4,3,2,.04)}
.btn-on-dark{background:#fff;color:var(--ink)}
.btn-on-dark:hover{background:#e9eaf0;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.btn-ghost-dark{background:transparent;color:#fff;border-color:var(--line-dark)}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-link{color:var(--accent);font-weight:550;display:inline-flex;align-items:center;gap:.35em}
.btn-link:hover{text-decoration:underline}
.btn-link .arw{transition:transform .2s var(--ease)}
.btn-link:hover .arw{transform:translateX(3px)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:26px;width:auto;display:block}
.footer .brand img{height:24px}
.brand .dot{width:22px;height:22px;border-radius:7px;background:
   radial-gradient(120% 120% at 20% 15%,var(--a-cyan),transparent 60%),
   radial-gradient(120% 120% at 80% 30%,var(--a-violet),transparent 60%),
   linear-gradient(135deg,var(--a-blue),var(--accent));
   box-shadow:0 2px 10px rgba(51,88,255,.4)}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{font-size:.95rem;color:var(--ink);opacity:.82;transition:opacity .2s}
.nav__links a:hover,.nav__links a.active{opacity:1}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__cta .btn{padding:.55em 1.1em;font-size:.92rem}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.nav__toggle svg{width:24px;height:24px}

@media(max-width:900px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__toggle{display:block}
}
.mobile-menu{
  position:fixed;inset:60px 0 auto 0;z-index:55;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease);
  padding:14px 24px 26px;
}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a{display:block;padding:13px 4px;font-size:1.08rem;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:18px;width:100%;justify-content:center}

/* ---------- Hero / Aurora signature ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(96px,15vw,168px) 24px clamp(80px,11vw,128px);text-align:center}
.hero .lead{color:rgba(255,255,255,.74)}
.hero .eyebrow{color:#ff9aa6}

/* aurora field */
.aurora{position:absolute;inset:0;z-index:0;overflow:hidden}
.aurora::before,.aurora::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  background:radial-gradient(circle at 30% 30%,var(--a-cyan),transparent 60%),
             radial-gradient(circle at 70% 60%,var(--a-violet),transparent 60%);
  animation:drift 22s var(--ease) infinite alternate;
}
.aurora::before{width:760px;height:760px;left:-120px;top:-220px;
  background:radial-gradient(circle at 40% 40%,var(--a-blue),transparent 62%)}
.aurora::after{width:680px;height:680px;right:-140px;top:-80px;animation-delay:-8s;
  background:radial-gradient(circle at 50% 50%,var(--a-violet),transparent 60%),
             radial-gradient(circle at 30% 70%,var(--a-cyan),transparent 60%)}
.aurora__grid{position:absolute;inset:0;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 35%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 35%,transparent 75%);
}
.hero__signal{position:relative;z-index:2;margin:42px auto 0;max-width:760px}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(40px,30px,0) scale(1.12)}
}

/* signal line svg */
.sigline{width:100%;height:auto;display:block}
.sigline path.base{stroke:rgba(255,255,255,.22)}
.sigline path.live{stroke:url(#auragrad);stroke-dasharray:6 0;filter:drop-shadow(0 0 8px rgba(77,124,255,.7))}
.sigline .pulse{animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-1200}}

/* ---------- Sections / generic ---------- */
.section.mist{background:var(--mist)}
.section.ink{background:var(--ink);color:#fff}
.section.ink .lead,.section.ink .muted{color:rgba(255,255,255,.72)}
.section.ink .eyebrow{color:#ff9aa6}
.sec-head{max-width:760px}
.center .sec-head{margin:0 auto}
.sec-head .lead{margin-top:16px}

/* ---------- Pillars / feature grid ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--snow);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.mist .card{background:#fff}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(4,3,2,.09);border-color:transparent}
.card .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(247,30,51,.12),rgba(255,106,77,.16));color:var(--accent)}
.card .ic svg{width:22px;height:22px}
.card h3{margin-bottom:8px}
.card p{color:var(--slate);margin:0;font-size:.98rem}
.card--num .n{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.1em;margin-bottom:14px}

/* pillar large */
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.pillar+.pillar{margin-top:clamp(56px,8vw,104px)}
.pillar--rev .pillar__media{order:-1}
@media(max-width:820px){.pillar{grid-template-columns:1fr}.pillar--rev .pillar__media{order:0}}
.pillar__media{position:relative}

/* ---------- Explainability card (signature UI) ---------- */
.xcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 26px 60px rgba(4,3,2,.14);overflow:hidden;font-size:14px;
}
.ink .xcard,.hero .xcard{box-shadow:0 30px 80px rgba(0,0,0,.5)}
.xcard__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--mist)}
.xcard__bar .led{width:9px;height:9px;border-radius:50%;background:#d7d9df}
.xcard__bar .led.g{background:#33c27a}
.xcard__bar .ttl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--slate);margin-left:6px;text-transform:uppercase}
.xcard__body{padding:20px 18px}
.xrow{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.xrow .pin{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(247,30,51,.10);color:var(--accent)}
.xrow .pin svg{width:15px;height:15px}
.xrow strong{font-weight:600;display:block;color:var(--ink);font-size:14.5px}
.xrow span{color:var(--slate)}
.tier{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:980px;font-weight:500}
.tier.causal{background:rgba(51,194,122,.14);color:#1c8f55}
.tier.correlated{background:rgba(255,150,40,.16);color:#c9760a}
.tier.obs{background:rgba(131,131,143,.16);color:var(--slate)}
.xmeta{border-top:1px dashed var(--line);padding-top:13px;margin-top:4px;font-family:var(--font-mono);font-size:11.5px;color:var(--slate-2);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bars{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.bar{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11.5px;color:var(--slate)}
.bar i{height:7px;border-radius:980px;background:linear-gradient(90deg,var(--a-blue),var(--a-cyan));display:block}
.bar i.v{background:linear-gradient(90deg,var(--a-violet),var(--a-blue))}

/* small feature list */
.flist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.flist li{display:flex;gap:12px;align-items:flex-start;color:var(--slate);font-size:1rem}
.flist .ck{flex:none;width:22px;height:22px;border-radius:7px;background:rgba(247,30,51,.10);color:var(--accent);display:grid;place-items:center;margin-top:1px}
.flist .ck svg{width:13px;height:13px}
.flist b{color:var(--ink);font-weight:600}

/* ---------- Steps (process) ---------- */
.steps{display:grid;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-family:var(--font-mono);font-size:13px;color:var(--accent);letter-spacing:.1em;padding-top:5px}
.step h3{margin-bottom:7px}
.step p{color:var(--slate);margin:0;max-width:62ch}

/* ---------- Comparison table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.cmp{border-collapse:collapse;width:100%;min-width:680px;font-size:.95rem}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-weight:500;vertical-align:bottom}
table.cmp thead th.us{color:var(--accent)}
table.cmp tbody td{color:var(--slate)}
table.cmp tbody td:first-child{color:var(--ink);font-weight:500}
table.cmp td.us{background:rgba(247,30,51,.05);color:var(--ink);font-weight:600}
table.cmp tr:last-child td{border-bottom:0}
.yes{color:#1c8f55;font-weight:700}
.no{color:#c2c4cc}
.part{color:var(--slate-2);font-size:.86rem}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:22px}
@media(max-width:880px){.price-grid{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;background:#fff;display:flex;flex-direction:column}
.plan.feature{background:var(--ink);color:#fff;border-color:transparent;position:relative;overflow:hidden}
.plan.feature .muted{color:rgba(255,255,255,.7)}
.plan.feature .aurora{opacity:.5}
.plan__z{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}
.plan .kicker{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.plan.feature .kicker{color:#ff9aa6}
.plan h3{font-size:1.5rem;margin-bottom:8px}
.plan .desc{color:var(--slate);font-size:.98rem;margin-bottom:22px}
.plan.feature .desc{color:rgba(255,255,255,.74)}
.plan .flist{margin-bottom:26px}
.plan .btn{margin-top:auto;width:100%;justify-content:center}
.plan.feature .flist .ck{background:rgba(255,255,255,.14);color:#ff9aa6}
.plan.feature .flist li{color:rgba(255,255,255,.82)}
.plan.feature .flist b{color:#fff}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;font-family:var(--font-display);font-weight:560;font-size:1.12rem;color:var(--ink);letter-spacing:-.01em}
.faq__q .pm{flex:none;width:24px;height:24px;position:relative;transition:transform .3s var(--ease)}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:var(--accent);border-radius:2px}
.faq__q .pm::before{left:50%;top:4px;width:2px;height:16px;transform:translateX(-50%);transition:opacity .3s}
.faq__q .pm::after{top:50%;left:4px;height:2px;width:16px;transform:translateY(-50%)}
.faq__item.open .pm::before{opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq__a p{color:var(--slate);padding:0 4px 24px;margin:0;max-width:68ch}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:clamp(20px,3vw,34px)}
.cta__z{position:relative;z-index:2;padding:clamp(48px,7vw,84px) 28px;text-align:center;max-width:760px;margin:0 auto}
.cta .lead{color:rgba(255,255,255,.78);margin:16px auto 30px}

/* ---------- Contact form ---------- */
.form{display:grid;gap:18px;max-width:640px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.form .two{grid-template-columns:1fr}}
.field label{display:block;font-size:.82rem;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(247,30,51,.12)}
.field textarea{resize:vertical;min-height:120px}
.note{font-size:.85rem;color:var(--slate-2)}

/* ---------- Logos / trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;align-items:center}
.trust .chip{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);
  border:1px solid var(--line);border-radius:980px;padding:8px 16px}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:620px){.stats{grid-template-columns:1fr}}
.stat{padding:8px 0}
.stat .big{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);font-weight:680;letter-spacing:-.03em}
.stat .lbl{color:var(--slate);font-size:.96rem;margin-top:4px}
.ink .stat .lbl{color:rgba(255,255,255,.7)}

/* ---------- Footer ---------- */
.footer{background:var(--mist);border-top:1px solid var(--line);padding:64px 0 40px;font-size:.92rem}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;margin-bottom:48px}
@media(max-width:760px){.footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.footer__top{grid-template-columns:1fr}}
.footer h4{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin:0 0 16px;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a{color:var(--slate);transition:color .2s}
.footer a:hover{color:var(--ink)}
.footer__brand p{color:var(--slate);max-width:34ch;margin:14px 0 0}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;color:var(--slate-2)}
.footer__bottom a{color:var(--slate-2)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   Animated Resolution Flow — "watch NuAura.Ai resolve an incident"
   ============================================================ */
.flow-sec{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.flow-sec .aurora{opacity:.32}
.flow-sec .sec-head{position:relative;z-index:2}
.flow-sec .eyebrow{color:#ff9aa6}
.flow-sec .lead{color:rgba(255,255,255,.72)}

.flow{position:relative;z-index:2;margin-top:48px;display:grid;grid-template-columns:1fr;gap:0;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  overflow:hidden;backdrop-filter:blur(6px)}

/* chart */
.flow__chart{position:relative;padding:26px 26px 8px}
.flow__statusrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.flow__status{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 13px;border-radius:980px;background:rgba(255,255,255,.06);transition:background .4s,color .4s}
.flow__status .dotled{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.35}}
.flow__clock{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.5)}
.flow[data-step="0"] .flow__status{color:#ff7a7a}
.flow[data-step="1"] .flow__status{color:#ff7a7a}
.flow[data-step="2"] .flow__status{color:#ffc56b}
.flow[data-step="3"] .flow__status{color:#5fe0a0}
.flow[data-step="3"] .flow__status .dotled{animation:none}

.flow__svg{width:100%;height:150px;display:block}
.flow__svg .band-danger{fill:rgba(247,30,51,.10)}
.flow__svg .band-ok{fill:rgba(95,224,160,.10)}
.flow__svg .gridline{stroke:rgba(255,255,255,.07)}
.flow__svg .sig-base{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2}
.flow__svg .sig-live{fill:none;stroke:url(#flowgrad);stroke-width:3.5;stroke-linecap:round;
  transition:stroke-dashoffset 1.1s var(--ease)}
.flow__svg .marker{transition:transform 1.1s var(--ease);filter:drop-shadow(0 0 7px rgba(255,120,90,.9))}
.flow__svg .marker circle{r:6}

/* steps */
.flow__steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark)}
.flow__step{position:relative;background:none;border:0;cursor:pointer;text-align:left;color:#fff;
  padding:18px 18px 20px;border-right:1px solid var(--line-dark);transition:background .3s}
.flow__step:last-child{border-right:0}
.flow__step:hover{background:rgba(255,255,255,.04)}
.flow__step .sn{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.45);transition:color .3s}
.flow__step .sl{display:block;margin-top:6px;font-family:var(--font-display);font-weight:580;font-size:1.02rem;letter-spacing:-.01em;color:rgba(255,255,255,.55);transition:color .3s}
.flow__step .sbar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.08)}
.flow__step .sbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a-blue),var(--a-cyan));transition:width .3s linear}
.flow__step.active .sn{color:#ff9aa6}
.flow__step.active .sl{color:#fff}
.flow__step.done .sl{color:rgba(255,255,255,.82)}
.flow__step.done .sn::after{content:" ✓";color:#5fe0a0}

/* stage card */
.flow__stage{position:relative;border-top:1px solid var(--line-dark);min-height:188px;background:rgba(0,0,0,.18)}
.fstage{position:absolute;inset:0;padding:24px 26px;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.fstage.show{opacity:1;transform:none;pointer-events:auto}
.fstage__top{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.fstage__ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.fstage__ic svg{width:18px;height:18px}
.fstage[data-tone="bad"] .fstage__ic{background:rgba(247,30,51,.18);color:#ff7a7a}
.fstage[data-tone="warn"] .fstage__ic{background:rgba(255,180,70,.18);color:#ffc56b}
.fstage[data-tone="good"] .fstage__ic{background:rgba(95,224,160,.18);color:#5fe0a0}
.fstage h4{font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;margin:0 0 3px}
.fstage p{margin:0;color:rgba(255,255,255,.66);font-size:.96rem}
.fstage .fmeta{margin-top:14px;font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.5);display:flex;gap:18px;flex-wrap:wrap}
.fstage .fmeta b{color:rgba(255,255,255,.85);font-weight:500}
.fbars{display:flex;flex-direction:column;gap:8px;margin-top:4px;max-width:380px}
.fbar{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.6)}
.fbar i{height:6px;border-radius:980px;background:linear-gradient(90deg,var(--a-blue),var(--a-cyan));display:block}

@media(max-width:640px){
  .flow__steps{grid-template-columns:1fr 1fr}
  .flow__step:nth-child(2){border-right:0}
  .flow__step{border-bottom:1px solid var(--line-dark)}
  .fstage .fmeta{gap:10px}
  .fbar{grid-template-columns:96px 1fr}
}
@media(prefers-reduced-motion:reduce){
  .flow__status .dotled{animation:none}
}

/* ============================================================
   MOBILE RESPONSIVE — full audit pass
   ============================================================ */

/* --- Hero: text was invisible / clipped on small screens --- */
@media(max-width:640px){
  .hero__inner{
    padding:clamp(72px,18vw,96px) 20px clamp(56px,12vw,72px);
    text-align:center;
  }
  .hero .h-hero{font-size:clamp(2rem,9vw,2.8rem);letter-spacing:-.025em}
  .hero .lead{font-size:1.05rem;color:rgba(255,255,255,.78)}
  .hero .eyebrow{font-size:11px;letter-spacing:.12em}
  .hero .btn-row{flex-direction:column;gap:12px;align-items:stretch}
  .hero .btn-row .btn{justify-content:center;text-align:center;width:100%}
}

/* --- Section headings --- */
@media(max-width:640px){
  .h1{font-size:clamp(1.7rem,7.5vw,2.1rem)}
  .h2{font-size:clamp(1.4rem,6vw,1.7rem)}
  .lead{font-size:1.05rem}
  .section{padding:clamp(48px,10vw,72px) 0}
  .section--tight{padding:clamp(36px,7vw,56px) 0}
  .wrap{padding:0 18px}
}

/* --- Pillar layout --- */
@media(max-width:640px){
  .pillar,.pillar--rev{gap:28px}
  .pillar__media{margin-top:4px}
}

/* --- Cards --- */
@media(max-width:640px){
  .card{padding:22px 18px}
  .xcard__body{padding:16px 14px}
  .xrow{gap:10px}
  .xrow strong{font-size:13.5px}
  .xrow span{font-size:.88rem}
  .bars{gap:7px}
  .bar{grid-template-columns:90px 1fr;gap:9px;font-size:10.5px}
  .tier{font-size:10px;padding:4px 8px;gap:5px}
  .xmeta{font-size:10.5px;gap:8px}
}

/* --- Comparison table: scrollable + readable --- */
@media(max-width:640px){
  .tablewrap{border-radius:12px}
  table.cmp th,table.cmp td{padding:11px 12px;font-size:.82rem}
  table.cmp thead th{font-size:10px}
}

/* --- Flow section --- */
@media(max-width:640px){
  .flow__chart{padding:16px 14px 6px}
  .flow__svg{height:110px}
  .flow__status{font-size:10.5px;padding:5px 10px}
  .flow__clock{font-size:10.5px}
  .flow__steps{grid-template-columns:1fr 1fr}
  .flow__step{padding:14px 14px 16px;border-bottom:1px solid var(--line-dark)}
  .flow__step:nth-child(2){border-right:0}
  .flow__step:nth-child(3){border-bottom:0}
  .flow__step:nth-child(4){border-right:0;border-bottom:0}
  .flow__step .sl{font-size:.9rem}
  .fstage{padding:18px 16px}
  .fstage h4{font-size:1rem}
  .fstage p{font-size:.9rem}
  .fmeta{font-size:10.5px;gap:8px}
  .fbars{gap:7px}
  .fbar{grid-template-columns:96px 1fr;font-size:10px;gap:9px}
  .flow__stage{min-height:200px}
}

/* --- Steps (process) --- */
@media(max-width:640px){
  .step{grid-template-columns:32px 1fr;gap:14px;padding:22px 0}
  .step__n{font-size:11px;padding-top:4px}
  .step h3{font-size:1.1rem;margin-bottom:5px}
  .step p{font-size:.95rem}
}

/* --- Pricing grid --- */
@media(max-width:640px){
  .price-grid{gap:16px}
  .plan{padding:24px 20px}
  .plan h3{font-size:1.3rem}
}

/* --- Stats --- */
@media(max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  .stat .big{font-size:1.9rem}
}

/* --- CTA band --- */
@media(max-width:640px){
  .cta__z{padding:36px 20px}
  .cta .h1{font-size:clamp(1.5rem,6.5vw,1.9rem)}
  .cta .lead{font-size:1rem}
  .cta .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .cta .btn-row .btn{justify-content:center;width:100%}
}

/* --- Contact form --- */
@media(max-width:640px){
  .form .two{grid-template-columns:1fr}
}

/* --- Footer --- */
@media(max-width:640px){
  .footer{padding:48px 0 32px}
  .footer__top{grid-template-columns:1fr;gap:28px}
  .footer__brand p{max-width:none}
  .footer__bottom{flex-direction:column;gap:10px;font-size:.82rem}
  .footer__brand img{height:22px}
}

/* --- Misc utility on small screens --- */
@media(max-width:640px){
  .btn-row:not(.cta .btn-row):not(.hero .btn-row){flex-wrap:wrap}
  .grid-2{grid-template-columns:1fr}
  .flist li{font-size:.95rem}
}

/* --- Tablet 641–880px tweaks --- */
@media(min-width:641px) and (max-width:880px){
  .hero .h-hero{font-size:clamp(2.4rem,5.5vw,3.4rem)}
  .hero__inner{padding:clamp(80px,13vw,120px) 32px clamp(64px,10vw,96px)}
  .price-grid{grid-template-columns:1fr 1fr}
  .flow__steps{grid-template-columns:repeat(4,1fr)}
}

/* Prevent any element from overflowing horizontally */
html,body{overflow-x:hidden}
img,svg,table,pre{max-width:100%}