/* ══════════════════════════════════════════════════════════════
   Cortex — shared site stylesheet
   Used by index.html, ai-agents.html, meta-ads.html, saas.html,
   contact.html.  Bump the ?v= in each page's <link> after editing:
   .htaccess caches CSS for a week and sw.js is cache-first.
   ══════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
html,body{overflow-x:clip}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;line-height:1.6;background:#fff;color:#0a0a0f;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.08}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid #6366f1;outline-offset:3px;border-radius:4px}

/* ══════════════════════════════════════════════════════════════
   OFFICIAL COLOURS
   Cortex purple #6366f1 (logo) — headlines & CTAs only.
   White primary, light grey + dark grey sections. Meta blue = logo.
   ══════════════════════════════════════════════════════════════ */
:root{
  --purple:#6366f1;
  --purple-btn:#4f46e5;
  --purple-hover:#4338ca;
  --purple-light:#818cf8;
  --meta:#1877f2;
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 2px 8px rgba(24,20,60,.05);
  --shadow-md:0 14px 36px -8px rgba(24,20,60,.12),0 3px 10px rgba(24,20,60,.05);
  --shadow-lg:0 40px 90px -24px rgba(28,22,78,.28),0 10px 28px rgba(28,22,78,.08);
}
.t-white{
  --bg:#fff; --surface:#f8f8fc; --surface-2:#eef0f6;
  --fg:#0a0a0f; --fg-muted:#54545f; --fg-faint:#6c6c78;
  --bdr:rgba(10,10,40,.11); --bdr-2:rgba(10,10,40,.24);
  --head:var(--purple);
}
.t-grey{
  --bg:#f6f6fa; --surface:#fff; --surface-2:#ebedf4;
  --fg:#0a0a0f; --fg-muted:#54545f; --fg-faint:#6c6c78;
  --bdr:rgba(10,10,40,.1); --bdr-2:rgba(10,10,40,.22);
  --head:var(--purple);
}
.t-dark{
  --bg:#17171d; --surface:#20202a; --surface-2:#2b2b37;
  --fg:#fff; --fg-muted:#adadba; --fg-faint:#9494a3;
  --bdr:rgba(255,255,255,.13); --bdr-2:rgba(255,255,255,.26);
  --head:var(--purple-light);
  --shadow-md:0 14px 36px -8px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.3);
  --shadow-lg:0 40px 90px -24px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.35);
}

/* ── Premium gradient washes ──
   Prefixed with .sect so they beat `.sect{background:var(--bg)}`. */
.sect.grad-hero{
  background:
    radial-gradient(1100px 560px at 12% -14%, rgba(99,102,241,.17), transparent 62%),
    radial-gradient(820px 460px at 92% 4%, rgba(129,140,248,.15), transparent 64%),
    radial-gradient(700px 400px at 50% 108%, rgba(99,102,241,.08), transparent 66%),
    linear-gradient(180deg,#fcfcff 0%,#f6f6fc 58%,#f0f1fa 100%);
}
.sect.grad-grey{
  background:
    radial-gradient(760px 380px at 88% -10%, rgba(99,102,241,.09), transparent 64%),
    linear-gradient(180deg,#fafafe 0%,#f4f5fb 100%);
}
.sect.grad-dark{
  background:
    radial-gradient(880px 440px at 10% -6%, rgba(99,102,241,.24), transparent 62%),
    radial-gradient(620px 360px at 94% 100%, rgba(129,140,248,.12), transparent 66%),
    linear-gradient(168deg,#1b1b24 0%,#16161d 58%,#101015 100%);
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */
.wrap{max-width:1160px;margin:0 auto;padding:0 1.5rem}
.sect{position:relative;padding:7.25rem 0;background:var(--bg);color:var(--fg)}
.sect.tight{padding:5rem 0}
.sect.hairline{border-top:1px solid var(--bdr)}
.split{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media(min-width:1000px){.split{grid-template-columns:1fr 1.12fr;gap:4rem}}
.split-visual{min-width:0}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.675rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:1.25rem}
.eyebrow::before{content:'';width:22px;height:1px;background:currentColor;flex-shrink:0}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:'';width:22px;height:1px;background:currentColor;flex-shrink:0}
h1{font-size:clamp(2.3rem,5.1vw,3.7rem);letter-spacing:-.042em}
.h2{font-size:clamp(1.98rem,4.1vw,3rem);color:var(--head)}
.h3{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.pp{color:var(--head)}
.lede{color:var(--fg-muted);font-size:1.05rem;line-height:1.68;max-width:34rem}
.body-sm{color:var(--fg-muted);font-size:.885rem;line-height:1.62}
.center{text-align:center}
/* Matches both a .lede inside a centred block and a .lede that is itself
   centred (class="lede center") — the latter was left-aligning in CTA bands. */
.center .lede,.lede.center{margin-left:auto;margin-right:auto}
.sect-head{max-width:44rem;margin:0 auto 3.4rem}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.89rem;font-weight:650;padding:.9rem 1.65rem;border-radius:999px;transition:transform .24s var(--ease),background .24s,border-color .24s,box-shadow .24s;white-space:nowrap}
.btn-primary{background:var(--purple-btn);color:#fff;box-shadow:0 6px 18px rgba(79,70,229,.24)}
.btn-primary:hover{background:var(--purple-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgba(79,70,229,.34)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{color:var(--fg);border:1px solid var(--bdr-2);background:transparent}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--fg)}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.05rem}
.btn-row.center{justify-content:center}

/* ══════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════ */
/* Augen-style floating sticky pill: logo left, menu centred, CTA right. */
.nav-shell{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:1rem 1rem 0;pointer-events:none}
/* Glassier and a touch smaller: lower opacity, stronger blur to keep text legible. */
.nav{pointer-events:auto;width:100%;max-width:1020px;border-radius:999px;border:1px solid rgba(10,10,40,.07);background:rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);color:#0a0a0f;--nav-muted:#54545f;--nav-hover:rgba(10,10,40,.055);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease}
.nav.scrolled{background:rgba(255,255,255,.8);border-color:rgba(10,10,40,.09);box-shadow:0 10px 30px rgba(24,20,60,.09)}
.nav.on-dark{background:rgba(23,23,29,.45);border-color:rgba(255,255,255,.12);color:#fff;--nav-muted:#adadba;--nav-hover:rgba(255,255,255,.1)}
.nav.on-dark.scrolled{background:rgba(16,16,21,.78);border-color:rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.nav-inner{height:52px;padding:0 .5rem 0 1.2rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
/* 1.18rem keeps the purple logo dot above 18.66px bold, where the
   large-text contrast threshold (3:1) applies instead of 4.5:1. */
.nav-logo{display:inline-flex;align-items:center;justify-self:start;font-size:1.16rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
/* The dot is small text, so it uses the darker brand shade (6.3:1 on light)
   rather than #6366f1 (4.25:1) — stays safe at any nav size. */
.nav-logo span{color:var(--purple-btn)}
.foot .nav-logo span,.nav.on-dark .nav-logo span{color:var(--purple-light)}
.nav-links{display:none;align-items:center;gap:.15rem;justify-self:center}
.nav-links a{display:block;font-size:.85rem;font-weight:550;color:var(--nav-muted);padding:.45rem .82rem;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.active,.nav-links a.current{color:inherit;background:var(--nav-hover)}
.nav-right{display:flex;align-items:center;gap:.4rem;justify-self:end}
.nav-cta{font-size:.805rem;font-weight:650;padding:.55rem 1.1rem}
.nav-ham{display:flex;flex-direction:column;gap:5px;padding:.6rem}
.nav-ham span{display:block;width:18px;height:1.6px;background:currentColor;border-radius:2px}
@media(min-width:760px){.nav-links{display:flex}.nav-ham{display:none}}
@media(max-width:759px){.nav-inner{grid-template-columns:1fr auto;height:56px}}
@media(max-width:520px){.nav-shell{padding:.6rem .6rem 0}.nav-inner{padding-left:1.1rem}}
@media(max-width:420px){.nav-cta{padding:.55rem .95rem;font-size:.79rem}}

.mob{position:fixed;inset:0;z-index:99;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background:#17171d;color:#fff}
.mob.open{display:flex}
.mob a.mob-lnk{font-size:1.7rem;font-weight:750;letter-spacing:-.03em;transition:color .2s}
.mob a.mob-lnk:hover,.mob a.mob-lnk.current{color:var(--purple-light)}
.mob-x{position:absolute;top:1.15rem;right:1.35rem;font-size:1.6rem;line-height:1;color:#adadba;padding:.5rem}

/* ══════════════════════════════════════════════════════════════
   HERO (landing) + PAGE HERO (inner pages)
   ══════════════════════════════════════════════════════════════ */
/* Compact hero: title sits high, mockup follows close behind. */
#home{padding-top:7.25rem;padding-bottom:0;overflow:hidden}
.page-hero{padding-top:8.25rem;padding-bottom:4.5rem}
.hero-copy{max-width:62rem;margin:0 auto;text-align:center}
.hero-copy h1{font-size:clamp(2.1rem,6.6vw,4rem);letter-spacing:-.045em;line-height:1.04}
/* Headline holds one line once there's room; wraps on small phones. */
@media(min-width:600px){.hero-copy h1{white-space:nowrap}}
.hero-copy .lede{margin:1.1rem auto 0;max-width:35rem}
.hero-copy .btn-row{justify-content:center;margin-top:1.6rem}
/* The mockup is the star — wide, centred, lifted off the page */
.hero-mock{max-width:1180px;margin:2.6rem auto 0;padding:0 1.5rem}
/* The window meets the section edge, so square off the bottom and drop the
   bottom border — rounded corners against the next section looked cut-off. */
.hero-mock .mac{border-radius:12px 12px 0 0;border-bottom:none;
  box-shadow:0 -2px 0 rgba(10,10,40,.02),0 40px 90px -34px rgba(28,22,78,.3),0 12px 32px -12px rgba(28,22,78,.12)}
@media(max-width:640px){#home{padding-top:6.25rem}.hero-mock{margin-top:1.9rem;padding:0 1rem}}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem 1rem;border-radius:999px;font-size:.77rem;font-weight:600;background:rgba(255,255,255,.7);border:1px solid var(--bdr);color:var(--fg-muted);margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--purple);flex-shrink:0}
/* Meta-ads hero — a row of Meta glyphs forms a quiet header band across the
   very top of the section, above the breadcrumb. Static and subtle (low
   opacity, hairline rule under it) so it reads as a design flourish rather
   than a second title. */
.page-hero{position:relative}
.meta-strip{width:100%;padding:1.15rem 1.5rem;background:linear-gradient(180deg,rgba(24,119,242,.055),rgba(24,119,242,0) 90%);border-bottom:1px solid rgba(24,119,242,.12)}
.meta-strip-row{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.9rem;row-gap:.8rem}
.meta-strip-row svg{width:19px;height:19px;stroke:#1877f2;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.34;flex-shrink:0}
@media(max-width:640px){.meta-strip{padding:.9rem 1rem}.meta-strip-row{gap:1.15rem;row-gap:.6rem}.meta-strip-row svg{width:16px;height:16px}}
.hero-stats{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.9rem;padding-top:1.85rem;border-top:1px solid var(--bdr)}
.stat-num{font-size:1.78rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.stat-lbl{font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-faint);margin-top:.42rem}

/* breadcrumb on inner pages */
.crumb{display:inline-flex;align-items:center;gap:.4rem;font-size:.755rem;font-weight:550;color:var(--fg-muted);margin-bottom:1.1rem}
.crumb a:hover{color:var(--fg)}
.crumb svg{width:12px;height:12px;stroke:var(--fg-faint);fill:none;stroke-width:2.2}

/* ══════════════════════════════════════════════════════════════
   MAC WINDOW MOCKUP — AI agent at work
   ══════════════════════════════════════════════════════════════ */
.mac{border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(10,10,40,.1);box-shadow:var(--shadow-lg)}
.mac-bar{display:flex;align-items:center;gap:.7rem;padding:.58rem .75rem;background:#f3f3f7;border-bottom:1px solid rgba(10,10,40,.08)}
.mac-lights{display:flex;gap:.36rem;flex-shrink:0}
.mac-lights i{width:10px;height:10px;border-radius:50%;display:block}
.mac-url{flex:1;height:25px;border-radius:7px;background:#fff;border:1px solid rgba(10,10,40,.08);display:flex;align-items:center;gap:.4rem;padding:0 .55rem;font-size:.645rem;color:#6c6c78;min-width:0}
.mac-url svg{width:11px;height:11px;stroke:#8b8b99;fill:none;stroke-width:2;flex-shrink:0}
.mac-arrows{display:flex;gap:.3rem;flex-shrink:0}
.mac-arrows svg{width:13px;height:13px;stroke:#6c6c78;fill:none;stroke-width:2.2}
.mac-body{display:grid;grid-template-columns:1fr;min-height:340px}
@media(min-width:420px){.mac-body{grid-template-columns:126px 1fr}}
.mac-side{background:#fafafd;border-right:1px solid rgba(10,10,40,.07);padding:.75rem .5rem;display:none}
@media(min-width:420px){.mac-side{display:block}}
.mac-ws{display:flex;align-items:center;gap:.4rem;padding:.28rem .38rem;border-radius:7px;margin-bottom:.75rem}
.mac-ws-av{width:17px;height:17px;border-radius:5px;background:var(--purple-btn);color:#fff;font-size:.5rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mac-ws-name{font-size:.695rem;font-weight:700;color:#0a0a0f}
.mac-lbl{font-size:.545rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#6c6c78;padding:0 .38rem;margin-bottom:.35rem}
.mac-item{display:flex;align-items:center;gap:.42rem;padding:.31rem .38rem;border-radius:6px;font-size:.665rem;color:#54545f;transition:background .2s}
.mac-item.on{background:#fff;box-shadow:0 1px 4px rgba(24,20,60,.09);color:#0a0a0f;font-weight:600}
.mac-item i{width:13px;height:13px;border-radius:3.5px;background:#e4e4ee;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.44rem;font-weight:800;color:#54545f}
.mac-count{margin-left:auto;font-size:.575rem;color:#6c6c78;font-weight:600}
.mac-gap{height:.7rem}
.mac-main{padding:1.5rem 1.15rem 1.3rem;display:flex;flex-direction:column;background:#fff;min-width:0}
.mac-ask{border:1px solid rgba(10,10,40,.12);border-radius:12px;padding:.6rem .65rem;box-shadow:0 3px 12px rgba(24,20,60,.07);background:#fff}
.mac-ask-row{display:flex;align-items:center;gap:.5rem}
.mac-ask-txt{flex:1;font-size:.71rem;color:#6c6c78;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mac-ask-btn{font-size:.635rem;font-weight:650;padding:.28rem .62rem;border-radius:7px;white-space:nowrap;flex-shrink:0}
.mac-ask-btn.ghost{color:#54545f;background:#f2f2f7}
.mac-ask-btn.solid{color:#fff;background:var(--purple-btn)}
.mac-chips{display:flex;align-items:center;gap:.32rem;margin-top:.5rem;flex-wrap:wrap}
.mac-chip{display:inline-flex;align-items:center;gap:.24rem;font-size:.585rem;font-weight:600;color:#6c6c78;background:#f4f4f9;border:1px solid rgba(10,10,40,.06);padding:.2rem .48rem;border-radius:999px;white-space:nowrap}
.mac-chip.r{margin-left:auto}
/* ── Automation flow inside the mockup: trigger → AI → actions ── */
.auto-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:1.2rem 0 1rem;flex-wrap:wrap}
.auto-title{font-size:.87rem;font-weight:750;color:#0a0a0f;letter-spacing:-.02em}
.auto-sub{font-size:.63rem;color:#6c6c78;margin-top:.1rem}
.auto-live{display:inline-flex;align-items:center;gap:.35rem;font-size:.615rem;font-weight:650;color:#54545f;background:#f2f2f7;border:1px solid rgba(10,10,40,.07);padding:.2rem .58rem;border-radius:999px;white-space:nowrap}
.auto-live i{width:6px;height:6px;border-radius:50%;background:var(--purple);flex-shrink:0;animation:autoBlink 1.8s ease-in-out infinite}
@keyframes autoBlink{0%,100%{opacity:.35}50%{opacity:1}}

.flow{display:grid;grid-template-columns:1fr;gap:.55rem;align-items:center}
@media(min-width:700px){.flow{grid-template-columns:1fr 44px 1fr 44px 1fr;gap:0}}
.fcol{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.flbl{font-size:.545rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#6c6c78;margin-bottom:.1rem}
.fnode{display:flex;align-items:center;gap:.55rem;background:#fdfdff;border:1px solid rgba(10,10,40,.09);border-radius:10px;padding:.55rem .6rem;transition:border-color .3s,box-shadow .3s}
.fico{width:28px;height:28px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#f2f2f7;border:1px solid rgba(10,10,40,.06)}
.fico svg{width:14px;height:14px;stroke:#54545f;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fname{font-size:.685rem;font-weight:700;color:#0a0a0f;line-height:1.25}
.fdesc{font-size:.585rem;color:#6c6c78;margin-top:.08rem;line-height:1.3}
/* the AI node breathes */
.fnode.is-ai{border-color:var(--purple);animation:aiPulse 2.9s ease-in-out infinite}
.fnode.is-ai .fico{background:var(--purple-btn);border-color:var(--purple-btn)}
.fnode.is-ai .fico svg{stroke:#fff}
@keyframes aiPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.3)}55%{box-shadow:0 0 0 7px rgba(99,102,241,0)}}
/* actions light up one after another */
.fnode.act{opacity:.55;animation:actIn 5.7s ease-in-out infinite}
.fnode.act.a2{animation-delay:1.9s}
.fnode.act.a3{animation-delay:3.8s}
@keyframes actIn{
  0%,8%{opacity:.5;border-color:rgba(10,10,40,.09)}
  16%,38%{opacity:1;border-color:var(--purple)}
  50%,100%{opacity:.55;border-color:rgba(10,10,40,.09)}
}
/* connectors with a travelling pulse */
.flink{position:relative;justify-self:center;width:2px;height:20px;background:rgba(10,10,40,.1);border-radius:2px;overflow:hidden}
.fdash{position:absolute;left:0;top:-45%;width:100%;height:45%;background:linear-gradient(180deg,transparent,var(--purple),transparent);animation:fdown 1.9s linear infinite}
.flink.l2 .fdash{animation-delay:.5s}
@keyframes fdown{to{top:100%}}
@keyframes fright{to{left:100%}}
@media(min-width:700px){
  .flink{width:auto;height:2px;justify-self:stretch;margin:1.1rem .55rem 0}
  .fdash{top:0;left:-42%;width:42%;height:100%;background:linear-gradient(90deg,transparent,var(--purple),transparent);animation-name:fright}
}
/* footer stats strip */
.auto-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(10,10,40,.08)}
.auto-stats div{text-align:center}
.auto-stats b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.03em;color:#0a0a0f;line-height:1}
.auto-stats span{display:block;font-size:.585rem;color:#6c6c78;margin-top:.25rem;line-height:1.3}

/* ══════════════════════════════════════════════════════════════
   CARDS / CHIPS
   ══════════════════════════════════════════════════════════════ */
.card{position:relative;background:var(--surface);border:1px solid var(--bdr);border-radius:var(--radius);padding:1.55rem 1.7rem;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
/* step index in a card corner */
.card-num{position:absolute;top:1.45rem;right:1.6rem;font-size:.7rem;font-weight:800;letter-spacing:.12em;color:var(--fg-faint)}
.card:hover{transform:translateY(-5px);border-color:var(--bdr-2);box-shadow:var(--shadow-md)}
.card-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--bdr);margin-bottom:1rem}
.card-ico svg{width:18px;height:18px;stroke:var(--fg);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.grid-3{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:560px){.grid-2{grid-template-columns:1fr 1fr}}

/* service cards that link to the detail pages */
.svc-card{display:flex;flex-direction:column;height:100%}
/* #6366f1 is only 4.47:1 on white — fine for large headlines, not for
   small text. Link-sized purple text uses the darker button shade. */
.svc-card .svc-more{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.83rem;font-weight:650;color:var(--purple-btn)}
.t-dark .svc-card .svc-more{color:var(--purple-light)}
.svc-card:hover .svc-more svg{transform:translateX(3px)}
.svc-card .svc-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s var(--ease)}

.feat{display:flex;gap:.95rem;align-items:flex-start;padding:.95rem;border-radius:13px;border:1px solid transparent;transition:background .25s,border-color .25s}
.feat:hover{background:var(--surface);border-color:var(--bdr)}
.feat-ico{width:36px;height:36px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--bdr)}
.feat:hover .feat-ico{background:var(--bg)}
.feat-ico svg{width:17px;height:17px;stroke:var(--fg);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat-list{display:flex;flex-direction:column;gap:.3rem}

.chip{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--bdr);border-radius:12px;padding:.82rem 1rem;font-size:.82rem;font-weight:550;color:var(--fg-muted);transition:transform .24s var(--ease),border-color .24s,color .24s,box-shadow .24s}
.chip:hover{transform:translateY(-3px);border-color:var(--bdr-2);color:var(--fg);box-shadow:var(--shadow-sm)}
.chip svg{width:16px;height:16px;flex-shrink:0;stroke:var(--fg-muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chip:hover svg{stroke:var(--fg)}
.tag{font-size:.745rem;font-weight:550;color:var(--fg-muted);background:var(--surface);border:1px solid var(--bdr);border-radius:999px;padding:.3rem .82rem;transition:color .2s,border-color .2s}
.tag:hover{color:var(--fg);border-color:var(--bdr-2)}

/* ══════════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════════ */
.panel{background:var(--surface);border:1px solid var(--bdr);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.78rem 1rem;border-bottom:1px solid var(--bdr);background:var(--bg);flex-wrap:wrap}
.panel-body{padding:1rem}
.panel-mark{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:800;color:var(--bg);background:var(--fg);flex-shrink:0}
.panel-name{font-size:.845rem;font-weight:700;letter-spacing:-.02em}
.badge{display:inline-flex;align-items:center;gap:.32rem;font-size:.615rem;font-weight:650;color:var(--fg-muted);background:var(--surface-2);border:1px solid var(--bdr);padding:.14rem .52rem;border-radius:999px;white-space:nowrap}
.badge i{width:5px;height:5px;border-radius:50%;background:var(--fg-muted);flex-shrink:0}
.panel-meta{font-size:.65rem;color:var(--fg-faint)}
.note{font-size:.62rem;color:var(--fg-faint);margin-top:.75rem;line-height:1.5}

.tile{background:var(--bg);border:1px solid var(--bdr);border-radius:12px;padding:.88rem;text-align:center}
.tile-num{font-size:1.38rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.tile-lbl{font-size:.675rem;color:var(--fg-muted);margin-top:.32rem;line-height:1.4}

.kpi{background:var(--bg);border:1px solid var(--bdr);border-radius:12px;padding:.8rem .85rem}
.kpi-lbl{font-size:.565rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:.34rem}
.kpi-val{font-size:1.24rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--fg)}
.kpi-delta{font-size:.615rem;font-weight:600;color:var(--fg-muted);margin-top:.32rem}
.kpi-spark{margin-top:.42rem;height:16px}
.kpi-spark svg{width:100%;height:16px;overflow:visible}
.kpi-spark path{fill:none;stroke:var(--purple);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:.52rem}
@media(min-width:560px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}

.sub{background:var(--bg);border:1px solid var(--bdr);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.58rem .78rem;border-bottom:1px solid var(--bdr)}
.row:last-child{border-bottom:none}
.row-t{font-size:.76rem;font-weight:550;color:var(--fg)}
.row-s{font-size:.64rem;color:var(--fg-faint);margin-top:.08rem}
.row-h{padding:.52rem .78rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.row-h span{font-size:.605rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}

/* ── charts ── */
.chart{display:flex;align-items:flex-end;gap:7px;height:112px}
.mbar{flex:1;border-radius:3px 3px 0 0;height:var(--h);background:var(--surface-2);transition:height 1s var(--ease)}
.mbar.on{background:var(--purple)}
.reveal.anim:not(.in) .mbar{height:4%}
.chart-x{display:flex;justify-content:space-between;margin-top:.5rem}
.chart-x span{font-size:.59rem;color:var(--fg-faint)}
.chart-x span.on{color:var(--purple-btn);font-weight:700}
.t-dark .chart-x span.on{color:var(--purple-light)}
.legend{display:inline-flex;align-items:center;gap:.38rem;font-size:.62rem;color:var(--fg-muted)}
.legend i{width:8px;height:8px;border-radius:2px;background:var(--purple);display:inline-block}

/* ── funnel ── */
.funnel{display:flex;flex-direction:column;gap:.5rem}
.fn-row{display:flex;align-items:center;gap:.75rem}
.fn-lbl{width:5.1rem;flex-shrink:0;font-size:.675rem;font-weight:600;color:var(--fg-muted)}
.fn-track{flex:1;height:24px;background:var(--surface-2);border-radius:6px;overflow:hidden;min-width:0}
.fn-fill{height:100%;width:var(--w);background:linear-gradient(90deg,var(--purple),var(--purple-btn));border-radius:6px;transition:width 1.1s var(--ease)}
.reveal.anim:not(.in) .fn-fill{width:0}
/* Values live outside the bar so they stay legible even on the narrowest fill */
.fn-val{width:4.1rem;flex-shrink:0;text-align:right;font-size:.685rem;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.fn-pct{width:2.8rem;flex-shrink:0;text-align:right;font-size:.655rem;font-weight:600;color:var(--fg-muted);font-variant-numeric:tabular-nums}
@media(max-width:560px){.fn-pct{display:none}.fn-lbl{width:4.1rem;font-size:.625rem}.fn-val{width:3.5rem;font-size:.635rem}}

/* ── breakdown table ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:.58rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-faint);text-align:right;padding:.5rem .6rem;border-bottom:1px solid var(--bdr);white-space:nowrap}
.tbl th:first-child{text-align:left}
.tbl td{font-size:.735rem;color:var(--fg);text-align:right;padding:.55rem .6rem;border-bottom:1px solid var(--bdr);white-space:nowrap}
.tbl td:first-child{text-align:left;font-weight:600}
.tbl tr:last-child td{border-bottom:none}
.tbl-scroll{overflow-x:auto}

/* ══════════════════════════════════════════════════════════════
   AI AGENT WORKFLOW
   ══════════════════════════════════════════════════════════════ */
.wf{display:flex;flex-direction:column}
.wf-step{display:flex;gap:.9rem;align-items:center;background:var(--bg);border:1px solid var(--bdr);border-radius:13px;padding:.8rem .95rem;transition:border-color .3s,transform .3s var(--ease)}
.wf-step:hover{transform:translateX(3px);border-color:var(--bdr-2)}
.wf-step.is-ai{border-color:var(--purple)}
.wf-ico{width:35px;height:35px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--bdr)}
.wf-step.is-ai .wf-ico{background:var(--purple-btn);border-color:var(--purple-btn)}
.wf-ico svg{width:17px;height:17px;stroke:var(--fg);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wf-step.is-ai .wf-ico svg{stroke:#fff}
.wf-t{font-size:.82rem;font-weight:650;color:var(--fg)}
.wf-s{font-size:.675rem;color:var(--fg-faint);margin-top:.05rem}
.wf-link{position:relative;height:20px;width:2px;margin-left:2rem;background:var(--bdr);overflow:hidden;flex-shrink:0}
.wf-pulse{position:absolute;left:-1px;width:4px;height:10px;border-radius:2px;background:var(--purple);top:-12px;animation:wf-fall 2.6s linear infinite}
@keyframes wf-fall{0%{top:-12px;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:20px;opacity:0}}
.wf-link:nth-of-type(4) .wf-pulse{animation-delay:.52s}
.wf-link:nth-of-type(6) .wf-pulse{animation-delay:1.04s}
/* SMS conversation preview */
.sms{margin-top:.85rem;background:var(--bg);border:1px solid var(--bdr);border-radius:12px;padding:.8rem}
.sms-h{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:.6rem}
.bub{max-width:88%;font-size:.735rem;line-height:1.5;padding:.5rem .7rem;border-radius:12px;margin-bottom:.4rem}
.bub.them{background:var(--surface-2);color:var(--fg);border-bottom-left-radius:4px}
.bub.us{background:var(--purple-btn);color:#fff;border-bottom-right-radius:4px;margin-left:auto}
.bub-time{font-size:.575rem;color:var(--fg-faint);text-align:right}

/* ══════════════════════════════════════════════════════════════
   STEPS
   ══════════════════════════════════════════════════════════════ */
.hsteps{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:700px){.hsteps{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.hsteps{grid-template-columns:repeat(4,1fr);gap:1rem}}
.hstep{position:relative;background:var(--surface);border:1px solid var(--bdr);border-radius:var(--radius);padding:1.6rem 1.5rem;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.hstep:hover{border-color:var(--bdr-2);transform:translateY(-6px);box-shadow:var(--shadow-md)}
.hstep-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.95rem}
.hstep-n{width:29px;height:29px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.755rem;font-weight:800;color:var(--fg);border:1.5px solid var(--bdr-2);transition:background .3s,color .3s,border-color .3s}
.hstep:hover .hstep-n{background:var(--purple-btn);border-color:var(--purple-btn);color:#fff}
.hstep-ico{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--bdr)}
.hstep-ico svg{width:17px;height:17px;stroke:var(--fg);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1000px){
  .hstep::after{content:'';position:absolute;top:50%;right:-1rem;width:1rem;height:1.5px;background:var(--bdr-2);transform:scaleX(1);transform-origin:left;transition:transform .55s var(--ease)}
  .hstep:last-child::after{display:none}
  .reveal.anim:not(.in) .hstep::after{transform:scaleX(0)}
  .reveal.anim.in .hstep:nth-child(1)::after{transition-delay:.35s}
  .reveal.anim.in .hstep:nth-child(2)::after{transition-delay:.55s}
  .reveal.anim.in .hstep:nth-child(3)::after{transition-delay:.75s}
}
/* staggered entrance */
.reveal.anim .hstep,.reveal.anim .card,.reveal.anim .chip,.reveal.anim .why-item{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s var(--ease)}
.reveal.anim.in .hstep,.reveal.anim.in .card,.reveal.anim.in .chip,.reveal.anim.in .why-item{opacity:1;transform:none}
.reveal.anim.in .hstep:nth-child(2),.reveal.anim.in .card:nth-child(2),.reveal.anim.in .chip:nth-child(2),.reveal.anim.in .why-item:nth-child(2){transition-delay:.09s}
.reveal.anim.in .hstep:nth-child(3),.reveal.anim.in .card:nth-child(3),.reveal.anim.in .chip:nth-child(3),.reveal.anim.in .why-item:nth-child(3){transition-delay:.18s}
.reveal.anim.in .hstep:nth-child(4),.reveal.anim.in .chip:nth-child(4),.reveal.anim.in .why-item:nth-child(4){transition-delay:.27s}
.reveal.anim.in .chip:nth-child(5){transition-delay:.36s}
.reveal.anim.in .chip:nth-child(6){transition-delay:.45s}

/* ══════════════════════════════════════════════════════════════
   WHY / STAT BLOCKS
   ══════════════════════════════════════════════════════════════ */
/* connected stat band — 1px gaps read as dividers, not separate cards */
.statband{display:grid;grid-template-columns:1fr;gap:1px;background:var(--bdr);
  border:1px solid var(--bdr);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
@media(min-width:700px){.statband{grid-template-columns:repeat(3,1fr)}}
.statband > div{background:var(--surface);padding:1.75rem 1.4rem;text-align:center;transition:background .25s}
.statband > div:hover{background:var(--bg)}
.statband b{display:block;font-size:1.95rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--fg)}
.statband span{display:block;font-size:.775rem;color:var(--fg-muted);margin-top:.55rem;line-height:1.5}
@media(max-width:640px){.statband > div{padding:1.35rem 1.1rem}.statband b{font-size:1.6rem}}

.why{display:grid;grid-template-columns:1fr;gap:.8rem;margin-top:1.8rem}
@media(min-width:520px){.why{grid-template-columns:repeat(3,1fr)}}
.why-item{background:var(--surface);border:1px solid var(--bdr);border-radius:13px;padding:1.05rem 1.1rem;transition:border-color .25s,transform .25s var(--ease)}
.why-item:hover{border-color:var(--bdr-2);transform:translateY(-3px)}
.why-num{font-size:1.28rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--fg)}
.why-lbl{font-size:.705rem;color:var(--fg-muted);margin-top:.38rem;line-height:1.45}

/* ══════════════════════════════════════════════════════════════
   CHAIN OF THOUGHT — agent reasoning beside a live conversation
   ══════════════════════════════════════════════════════════════ */
.cot{display:flex;flex-direction:column}
/* reasoning card — sits BEHIND, top-right */
.cot-card{width:min(100%,21rem);margin-left:auto;background:var(--surface);border:1px solid var(--bdr);border-radius:17px;padding:1.15rem 1.2rem;box-shadow:var(--shadow-lg)}
.cot-card-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.95rem}
.cot-spark{width:27px;height:27px;border-radius:9px;background:var(--fg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cot-spark svg{width:15px;height:15px;stroke:var(--bg);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cot-card-t{font-size:.83rem;font-weight:750;letter-spacing:-.02em;color:var(--fg)}
.cot-step{display:flex;align-items:center;gap:.62rem;padding:.36rem 0;font-size:.785rem;color:var(--fg);line-height:1.35}
.cot-tick{width:19px;height:19px;border-radius:50%;background:var(--purple-btn);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cot-tick svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.cot-step.pending .cot-tick{background:transparent;border:1.6px solid var(--bdr-2)}
.cot-step.pending{color:var(--fg-muted)}
/* steps tick in one after another */
.reveal.anim .cot-step{opacity:0;transform:translateX(-7px);transition:opacity .45s ease,transform .45s var(--ease)}
.reveal.anim.in .cot-step{opacity:1;transform:none}
.reveal.anim.in .cot-step:nth-child(2){transition-delay:.12s}
.reveal.anim.in .cot-step:nth-child(3){transition-delay:.24s}
.reveal.anim.in .cot-step:nth-child(4){transition-delay:.36s}
.reveal.anim.in .cot-step:nth-child(5){transition-delay:.48s}
.reveal.anim.in .cot-step:nth-child(6){transition-delay:.6s}
/* dotted join between reasoning and conversation */
.cot-join{width:2px;height:30px;margin:.3rem 4.5rem .3rem auto;flex-shrink:0;
  background:repeating-linear-gradient(180deg,var(--purple) 0 4px,transparent 4px 9px);opacity:.5}
/* conversation panel, offset left */
.cot-chat{width:min(100%,21.5rem);border-radius:17px;overflow:hidden;border:1px solid var(--bdr);box-shadow:var(--shadow-md);background:var(--bg)}
.cot-bar{background:#17171d;color:#fff;padding:.72rem 1rem;font-size:.8rem;font-weight:700;letter-spacing:-.01em}
.cot-body{padding:1rem;background:var(--surface)}
.cot-bub{max-width:88%;font-size:.775rem;line-height:1.5;padding:.58rem .78rem;border-radius:14px;margin-bottom:.5rem;background:var(--surface-2);color:var(--fg)}
.cot-bub.them{margin-left:auto;border-bottom-right-radius:5px}
.cot-bub.ai{border-bottom-left-radius:5px}
.cot-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:.75rem}
.cot-doc{background:var(--bg);border:1px solid var(--bdr);border-radius:11px;padding:.6rem .4rem;text-align:center;transition:border-color .25s}
.cot-doc:hover{border-color:var(--bdr-2)}
.cot-doc-ico{width:26px;height:26px;margin:0 auto .4rem;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.cot-doc-ico svg{width:13px;height:13px;stroke:var(--fg-muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cot-doc-n{font-size:.605rem;font-weight:650;color:var(--fg);line-height:1.25;margin-bottom:.45rem;min-height:2.1em;display:flex;align-items:center;justify-content:center}
.cot-doc-b{font-size:.575rem;font-weight:650;padding:.24rem .55rem;border-radius:999px;border:1px solid var(--bdr-2);color:var(--fg);display:inline-block}
.cot-doc.on .cot-doc-b{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* Layered composition once there's room: checklist behind (top-right),
   agent card in front (bottom-left), dashed elbow joining the two. */
.cot-wire{display:none}
@media(min-width:620px){
  /* padding-top (not margin on the chat) — a top margin would collapse out
     of the container and both cards would stack at y=0.
     Checklist sits top-LEFT and the chat overlaps its right-hand margin,
     which is empty on every row, so no tick or label is ever covered. */
  .cot{display:block;position:relative;padding-top:8rem}
  .cot-card{position:absolute;top:0;left:0;z-index:1;width:min(92%,19rem);margin:0}
  .cot-chat{position:relative;z-index:2;width:min(96%,19rem);margin:0 0 0 auto}
  .cot-join{display:none}
  .cot-wire{display:block;position:absolute;z-index:0;left:42%;right:26%;top:3.4rem;height:4.6rem;
    border-top:2px dashed var(--purple);border-right:2px dashed var(--purple);
    border-top-right-radius:16px;opacity:.45;pointer-events:none}
}
@media(max-width:619px){
  .cot-card,.cot-chat{width:100%;margin-left:0}
  .cot-join{margin-right:auto;margin-left:auto}
}

/* ══════════════════════════════════════════════════════════════
   KNOWLEDGE GRAPH — interconnected business processes
   ══════════════════════════════════════════════════════════════ */
.kg{background:var(--surface);border:1px solid var(--bdr);border-radius:var(--radius);padding:1.4rem 1.25rem 1.1rem;box-shadow:var(--shadow-md)}
.kg svg{width:100%;height:auto;overflow:visible}
.kg-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.kg-title{font-size:.8rem;font-weight:750;color:var(--fg);letter-spacing:-.02em}
.kg-node{fill:var(--bg);stroke:var(--bdr-2);stroke-width:1.1}
.kg-node.hub{stroke:var(--purple);stroke-width:1.6}
.kg-txt{fill:var(--fg);font-size:13px;font-weight:650;font-family:inherit;letter-spacing:-.01em}
.kg-link{fill:none;stroke:var(--purple);stroke-width:1.4;stroke-dasharray:3 6;stroke-linecap:round;opacity:.55;animation:kgflow 2.6s linear infinite}
.kg-link.slow{animation-duration:3.6s;opacity:.38}
.kg-link.d1{animation-delay:.6s}.kg-link.d2{animation-delay:1.2s}
@keyframes kgflow{to{stroke-dashoffset:-18}}
.kg-dot{fill:var(--purple)}
.kg-pulse{animation:kgBreathe 3.2s ease-in-out infinite}
.kg-pulse.p1{animation-delay:.9s}.kg-pulse.p2{animation-delay:1.8s}
@keyframes kgBreathe{0%,100%{opacity:.35}50%{opacity:1}}
.kg-legend{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--bdr)}
.kg-legend span{display:inline-flex;align-items:center;gap:.4rem;font-size:.665rem;color:var(--fg-muted)}
.kg-legend i{width:14px;height:2px;border-radius:2px;background:var(--purple);flex-shrink:0}
.kg-legend i.dim{opacity:.4}
/* The graph scales down on phones, so bump the type and swap the two
   longest labels for shorter ones that still fit their boxes. */
.kg-short{display:none}
@media(max-width:760px){
  .kg-txt{font-size:23px}
  .kg-long{display:none}
  .kg-short{display:block}
}

/* ══════════════════════════════════════════════════════════════
   INDUSTRIES — "what we cover"
   ══════════════════════════════════════════════════════════════ */
.ind-grid{display:grid;grid-template-columns:1fr;gap:1.05rem}
@media(min-width:560px){.ind-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ind-grid{grid-template-columns:repeat(4,1fr)}}
.ind{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  background:var(--surface);border:1px solid var(--bdr);border-radius:18px;padding:1.8rem 1.55rem;
  overflow:hidden;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
/* accent rule wipes in on hover */
.ind::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--purple);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}
.ind:hover::before{transform:scaleX(1)}
.ind:hover{transform:translateY(-6px);border-color:var(--bdr-2);box-shadow:var(--shadow-md)}
.ind-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--bdr);margin-bottom:1.2rem;transition:border-color .3s,background .3s}
.ind:hover .ind-ico{border-color:var(--purple);background:var(--surface-2)}
.ind-ico svg{width:21px;height:21px;stroke:var(--fg);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ind-name{font-size:1.02rem;font-weight:750;color:var(--fg);letter-spacing:-.02em;margin-bottom:.5rem}
.ind-use{font-size:.81rem;color:var(--fg-muted);line-height:1.6}
/* closing "anything else" card, keeps the 4-up grid balanced */
.ind.ind-cta{background:var(--bg);border-style:dashed}
.ind.ind-cta:hover{border-style:solid}
.ind-more{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.83rem;font-weight:650;color:var(--purple-btn)}
.ind-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s var(--ease)}
.ind.ind-cta:hover .ind-more svg{transform:translateX(3px)}
.reveal.anim .ind{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s var(--ease)}
.reveal.anim.in .ind{opacity:1;transform:none}
.reveal.anim.in .ind:nth-child(2){transition-delay:.05s}
.reveal.anim.in .ind:nth-child(3){transition-delay:.1s}
.reveal.anim.in .ind:nth-child(4){transition-delay:.15s}
.reveal.anim.in .ind:nth-child(5){transition-delay:.2s}
.reveal.anim.in .ind:nth-child(6){transition-delay:.25s}
.reveal.anim.in .ind:nth-child(7){transition-delay:.3s}
.reveal.anim.in .ind:nth-child(8){transition-delay:.35s}

/* ══════════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════════ */
.cta-band{background:var(--surface);border:1px solid var(--bdr);border-radius:24px;padding:3rem 2rem;text-align:center;box-shadow:var(--shadow-md)}
.cta-band .h2{margin-bottom:.9rem}

/* ══════════════════════════════════════════════════════════════
   FAQ / CONTACT / FOOTER
   ══════════════════════════════════════════════════════════════ */
.faq-item{background:var(--surface);border:1px solid var(--bdr);border-radius:13px;margin-bottom:.65rem;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item.open{border-color:var(--bdr-2);box-shadow:var(--shadow-sm)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;color:var(--fg);font-size:.985rem;font-weight:650;padding:1.1rem 1.3rem}
.faq-ico{flex-shrink:0;width:19px;height:19px;color:var(--fg-muted);transition:transform .3s var(--ease)}
.faq-item.open .faq-ico{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .33s var(--ease)}
.faq-a-in{padding:0 1.3rem 1.2rem;color:var(--fg-muted);font-size:.895rem;line-height:1.7}

.info-row{display:flex;align-items:center;gap:.95rem}
.info-ic{width:42px;height:42px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--bdr);transition:border-color .2s}
.info-row:hover .info-ic{border-color:var(--bdr-2)}
.info-ic svg{width:17px;height:17px;stroke:var(--fg);fill:none;stroke-width:1.7}
.info-lbl{font-size:.59rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:.18rem}
.info-val{font-size:.87rem;font-weight:550;color:var(--fg)}
.form-card{background:var(--surface);border:1px solid var(--bdr);border-radius:20px;padding:2rem;box-shadow:var(--shadow-md)}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.59rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-faint)}
.input{background:var(--bg);border:1px solid var(--bdr);border-radius:11px;padding:.8rem 1rem;color:var(--fg);font-size:.87rem;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.input::placeholder{color:var(--fg-faint)}
.input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
textarea.input{resize:vertical;min-height:110px}
.form-grid{display:grid;grid-template-columns:1fr;gap:.95rem}
@media(min-width:560px){.form-grid{grid-template-columns:1fr 1fr}}

.foot{background:#101015;color:#fff;padding:3rem 0 2.25rem}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.7rem;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-links a{font-size:.835rem;color:#adadba;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-soc{display:flex;gap:.45rem}
.foot-soc a{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.foot-soc a:hover{border-color:#fff}
.foot-soc svg{width:15px;height:15px;stroke:#adadba;fill:none;stroke-width:1.6}
.foot-soc a:hover svg{stroke:#fff}
.foot-btm{font-size:.745rem;color:#9494a3;padding-top:1.45rem}

/* ══════════════════════════════════════════════════════════════
   REVEAL / PARALLAX
   ══════════════════════════════════════════════════════════════ */
.reveal{opacity:1}
.reveal.anim{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s var(--ease)}
.reveal.anim.in{opacity:1;transform:none}
.parallax{will-change:transform}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:999px){.split-visual{order:2}}
@media(max-width:640px){
  .sect{padding:4.4rem 0}
  .sect.tight{padding:3.4rem 0}
  #home,.page-hero{padding-top:7.5rem;padding-bottom:3.6rem}
  .sect-head{margin-bottom:2.4rem}
  .btn-row .btn{width:100%}
  .hero-stats{gap:1.7rem;margin-top:2.4rem}
  .stat-num{font-size:1.5rem}
  .card,.hstep{padding:1.35rem 1.4rem}
  .form-card{padding:1.5rem 1.25rem}
  .cta-band{padding:2.2rem 1.35rem}
  .kpi-val{font-size:1.08rem}
  .foot-links{gap:.85rem}
  .mac-main{padding:1rem .85rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wf-pulse{animation:none;opacity:0}
  .fdash{animation:none;opacity:0}
  .kg-link,.kg-pulse{animation:none}
  .fnode.is-ai,.auto-live i{animation:none}
  .fnode.act{animation:none;opacity:1}
  .reveal.anim,.reveal.anim .hstep,.reveal.anim .card,.reveal.anim .chip,.reveal.anim .why-item,.reveal.anim .ind,.reveal.anim .cot-step{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.chip:hover,.hstep:hover,.wf-step:hover,.why-item:hover,.ind:hover{transform:none}
  .parallax{transform:none!important}
}