/* ── Lumetrik AI corporate site — tokens from Website Dev Handoff v1.0 ── */
:root{
  --navy:#030D20;         /* Midnight Navy — dark sections / primary text */
  --lumen:#0689FA;        /* Lumen Blue — AI states / CTAs */
  --electric:#0457FB;     /* Electric Blue — gradient / active paths */
  --sky:#EAF5FF;          /* Sky Tint — soft AI background */
  --cloud:#F6F8FB;        /* Cloud — light sections */
  --line:#DCE6F0;         /* Line — borders */
  --slate:#667085;        /* Slate — secondary text */
  --charcoal:#1E293B;     /* Charcoal — primary light text */
  --white:#FFFFFF;
  --grad:linear-gradient(90deg,var(--electric),var(--lumen));
  --radius:14px;
  --shadow-lg:0 24px 60px rgba(3,13,32,.35);
  --shadow-sm:0 6px 24px rgba(3,13,32,.10);
  --header-h:72px;
  color-scheme: light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:'Inter',Arial,system-ui,sans-serif;
  font-size:16px;line-height:1.6;color:var(--charcoal);
  background:var(--navy);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:1024px){ .container{width:92%;padding:0} .container{margin:0 auto} }
@media (max-width:640px){ .container{width:calc(100% - 32px)} }

/* ── Type ── */
h1{font-size:clamp(40px,5.4vw,70px);font-weight:800;line-height:1.06;letter-spacing:-.02em;text-shadow:0 2px 28px rgba(3,13,32,.6)}
h2{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.015em}
.h2-sm{font-size:clamp(26px,3vw,36px)}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lumen);margin-bottom:16px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18.5px;color:#CBD8EA;margin:24px 0 36px;max-width:44ch;text-shadow:0 1px 14px rgba(3,13,32,.6)}
.body-lg{font-size:18px;line-height:1.75;color:var(--slate);max-width:56ch}
.body-dim{font-size:16.5px;line-height:1.7;color:#9FB0C8;max-width:52ch;margin-top:20px}
.narrow{margin:16px auto 0}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14.5px;font-weight:600;
  padding:12px 22px;border-radius:10px;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(6,137,250,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(6,137,250,.45)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.section-light .btn-ghost{color:var(--charcoal);border-color:var(--line);background:#fff}
.btn-block{width:100%;justify-content:center}
.arrow{font-weight:400}
.play{font-size:10px;background:rgba(255,255,255,.12);border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}

/* ── Header ── */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .3s,box-shadow .3s;background:transparent}
.site-header.scrolled{background:var(--navy);box-shadow:0 2px 24px rgba(3,13,32,.5)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 32px;height:var(--header-h);display:flex;align-items:center;gap:36px}
.brand-logo{height:30px;width:auto;filter:invert(1) hue-rotate(180deg) saturate(1.4)}
.main-nav{display:flex;gap:28px;margin:0 auto}
.main-nav a{font-size:14px;font-weight:500;color:#C6D3E6;transition:color .2s}
.main-nav a:hover{color:#fff}
.header-actions{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.menu-toggle span{width:22px;height:2px;background:#fff;border-radius:2px}
.mobile-only{display:none}
@media (max-width:860px){
  .main-nav{position:fixed;top:var(--header-h);left:0;right:0;background:var(--navy);flex-direction:column;
    padding:20px 28px 28px;gap:18px;margin:0;border-top:1px solid rgba(255,255,255,.08);
    transform:translateY(-130%);transition:transform .3s;box-shadow:0 30px 40px rgba(3,13,32,.5)}
  .main-nav.open{transform:translateY(0)}
  .menu-toggle{display:flex}
  .desktop-only{display:none}
  .mobile-only{display:inline-flex;margin-top:6px}
}

/* ── Hero — image blended full-bleed into the navy, no frame ── */
/* Hero wears the Challenge layout (Enam, Sep 29): copy left, workflow art +
   fragmented-data callout right, all on flat navy — no backdrop image */
.hero{position:relative;background:var(--navy);color:#fff;padding:calc(var(--header-h) + 84px) 0 110px;overflow:hidden;
  display:flex;align-items:center;min-height:640px}
.hero-glow{position:absolute;top:-220px;right:-180px;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,137,250,.16),transparent 65%);pointer-events:none}
.hero .container{position:relative}
/* Art gets the bigger share of the hero (Enam: picture a little larger).
   .hero prefix outranks the base .challenge-grid rule further down */
.hero .hero-challenge{align-items:center;grid-template-columns:1fr 1.9fr;gap:40px}
.hero-copy h1{font-size:clamp(38px,4.6vw,60px)}
.hero-copy .lead{margin:22px 0 34px}
.screen-frame{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-lg);background:#0A1830}
.screen-frame img{width:100%}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:960px){
  .hero{min-height:0;padding:calc(var(--header-h) + 36px) 0 40px}
  .hero-copy .lead{margin:18px 0 26px}
  .cta-row .btn-lg{padding:13px 22px;font-size:14.5px}
  /* Stack: copy → art → callout (challenge-grid collapses at 900px; cover the
     900–960 sliver too so the hero never squeezes into two cramped columns) */
  .hero .hero-challenge{grid-template-columns:1fr;gap:36px}
}

/* ── Sections ── */
.section{padding:110px 0}
.section.tall{padding:132px 0}
.section-dark{background:var(--navy);color:#fff}
.section-light{background:var(--cloud);color:var(--charcoal)}
.section-light:nth-of-type(odd){background:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.split-head{margin-bottom:48px;max-width:560px}
.center-head{text-align:center;max-width:720px;margin:0 auto 56px}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:36px} .section{padding:80px 0} .section.tall{padding:88px 0} }

/* ── Challenge diagram ── */
.challenge-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
.fragment-diagram{display:flex;align-items:center;gap:26px}
.challenge-art-wrap{min-width:0;flex:1;display:block}
/* Blended like the hero: no frame — the art melts into the section navy */
.challenge-art{width:100%;border:none;border-radius:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect}
.frag-result{border-left:2px solid rgba(6,137,250,.5);padding-left:22px;flex-shrink:0}
.frag-label{font-size:15px;color:#9FB0C8;line-height:1.5}
.frag-cta{font-size:19px;font-weight:700;margin-top:12px;line-height:1.35;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:900px){
  .challenge-grid{grid-template-columns:1fr;gap:40px}
  .fragment-diagram{flex-direction:column;align-items:flex-start}
}

/* ── Difference steps ── */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:18px;align-items:flex-start;padding:14px 0}
.step-icon{width:52px;height:52px;border-radius:14px;background:var(--sky);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line)}
.step-icon img{width:36px;height:36px;object-fit:contain}
.step h3{margin-bottom:2px}
.step p{color:var(--slate);font-size:14.5px}
.step-connector{width:2px;height:18px;background:var(--grad);margin-left:25px;border-radius:2px;opacity:.5}
/* ── Why Lumetrik refinement — Mira's dev handoff, Sep 30 ──
   Top row: headline left, connected-data diagram right.
   Bottom: numbered Connect→Understand→Act→Predict journey on one line. */
.why-top{align-items:center}
.dataflow{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;position:relative}
.df-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.df-col-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:2px;white-space:nowrap}
.df-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(6,137,250,.14);border-radius:12px;
  padding:11px 14px;font-size:14.5px;font-weight:600;color:var(--charcoal);box-shadow:0 4px 14px rgba(15,30,53,.06);position:relative}
.df-ico{width:30px;height:30px;border-radius:9px;background:var(--sky);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--electric)}
.df-ico svg{width:18px;height:18px}
/* Thin dotted connector stubs reaching toward the intelligence node */
.df-chip::after{content:'';position:absolute;top:50%;width:22px;border-top:2px dashed rgba(4,87,251,.35)}
.df-in::after{right:-24px}
.df-out::after{left:-24px}
.df-node-wrap{position:relative;padding:26px 24px}
.df-node-wrap::before{content:'';position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,137,250,.14),transparent 68%);pointer-events:none}
.df-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;
  border:1px solid rgba(6,137,250,.18);border-radius:18px;padding:22px 26px;box-shadow:0 10px 30px rgba(6,137,250,.14)}
.df-node-ico{width:44px;height:44px;border-radius:12px;background:var(--sky);display:flex;align-items:center;justify-content:center;color:var(--electric);margin-bottom:6px}
.df-node-ico svg{width:26px;height:26px}
.df-node strong{font-size:17px;color:var(--navy,#030D20);letter-spacing:-.01em}
.df-node-sub{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
/* Journey: one continuous blue line behind four evenly spread stages */
.journey{position:relative;display:flex;gap:24px;margin-top:72px}
.journey-line{position:absolute;left:26px;right:26px;top:26px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(4,87,251,.45) 3%,rgba(4,87,251,.45) 97%,transparent)}
.stage{flex:1;position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.stage .step-icon{margin-bottom:8px;background:#fff;box-shadow:0 0 0 8px var(--cloud)}
.section-light:nth-of-type(odd) .stage .step-icon{box-shadow:0 0 0 8px #fff}
.stage-num{color:var(--electric);font-weight:700;font-size:15px;letter-spacing:.08em}
.stage h3{font-size:16px;letter-spacing:.09em;text-transform:uppercase;margin:0}
.stage p{color:var(--slate);font-size:15px;line-height:1.55}
@media (max-width:1100px){ .dataflow{gap:12px} .df-chip{font-size:13.5px;padding:10px 11px} .df-node-wrap{padding:18px 8px} }
@media (max-width:900px){
  /* Stack: headline → diagram (inputs, node, outputs) → vertical journey */
  .dataflow{grid-template-columns:1fr;justify-items:center;gap:18px}
  .df-col{width:100%;max-width:420px}
  .df-chip::after{display:none}
  .df-col-label{text-align:center;align-self:center}
  .journey{flex-direction:column;gap:26px;margin-top:52px}
  .journey-line{left:26px;right:auto;top:26px;bottom:26px;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,rgba(4,87,251,.45) 3%,rgba(4,87,251,.45) 97%,transparent)}
  .stage{display:grid;grid-template-columns:52px 1fr;column-gap:18px;row-gap:2px}
  .stage .step-icon{grid-row:1 / span 3;margin-bottom:0}
}

/* ── Ask Lumen — flagship master section (Mira's brief, Sep 30) ──
   One story: your data → Ask Lumen → get insight → take action.
   Copy ~38% left, layered product composition ~62% right, thin story
   rail underneath. All UI is live HTML; only the dashboard is an image. */
.asklumen{overflow:hidden}
.al-grid{display:grid;grid-template-columns:38fr 62fr;gap:64px;align-items:center}
.al-lead{max-width:56ch}
.al-pillars{display:flex;flex-direction:column;gap:18px;margin:30px 0 34px}
.al-pillar{display:flex;gap:14px;align-items:flex-start}
.al-pill-ico{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,137,250,.12);border:1px solid rgba(6,137,250,.3);color:var(--lumen)}
.al-pill-ico svg{width:20px;height:20px}
.al-pillar h3{font-size:16.5px;color:#fff;margin-bottom:2px}
.al-pillar p{font-size:14.5px;color:#9FB0C8}
/* Stage: dashboard behind top-right, Ask Lumen + insight stacked front-left,
   InvoiceShield proof floating right */
.al-stage{position:relative;min-height:800px}
.al-glow{position:absolute;inset:-10% -6%;border-radius:50%;
  background:radial-gradient(ellipse at 55% 40%,rgba(6,137,250,.2),transparent 65%);pointer-events:none}
.al-dash{position:absolute;top:0;right:0;width:86%;border-radius:16px;border:1px solid rgba(6,137,250,.28);
  box-shadow:0 30px 80px rgba(2,8,20,.65),0 0 60px rgba(6,137,250,.16)}
.al-front{position:absolute;left:0;top:42%;width:62%;min-width:330px;display:flex;flex-direction:column;gap:16px;z-index:2}
.al-panel,.al-insight,.al-proof{background:linear-gradient(160deg,#0A1B38,#061226);border:1px solid rgba(6,137,250,.3);
  border-radius:16px;box-shadow:0 22px 54px rgba(2,8,20,.6)}
.al-panel{padding:16px 18px}
.al-panel-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.al-orb{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 35%,#9CCBFF,var(--lumen) 45%,#02306B 90%);box-shadow:0 0 24px rgba(6,137,250,.8)}
.al-panel-title{flex:1;min-width:0}
.al-panel-title b{display:block;font-size:15px;color:#fff}
.al-panel-title small{display:block;font-size:11px;color:#7F93B2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-wave{display:flex;align-items:center;gap:2.5px;height:18px;flex-shrink:0}
.al-wave i{width:2.5px;border-radius:2px;background:var(--lumen);height:30%;animation:alwave 1.4s ease-in-out infinite}
.al-wave i:nth-child(2){animation-delay:.15s}
.al-wave i:nth-child(3){animation-delay:.3s}
.al-wave i:nth-child(4){animation-delay:.45s}
.al-wave i:nth-child(5){animation-delay:.6s}
@keyframes alwave{0%,100%{height:28%}50%{height:95%}}
.al-voice{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#CFE4FB;
  border:1px solid rgba(6,137,250,.45);background:rgba(6,137,250,.16);border-radius:9999px;padding:4px 10px;flex-shrink:0}
.al-voice svg{width:11px;height:11px}
.al-prompt{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:#C6D6EE;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:9px 12px;margin-bottom:8px}
.al-prompt:last-child{margin-bottom:0}
.al-prompt.active{background:var(--grad);color:#fff;border-color:transparent;font-weight:600}
.al-send{font-size:11px}
.al-insight{padding:14px 16px;margin-left:9%}
.al-ins-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.al-ins-head b{font-size:13.5px;color:#fff}
.al-ins-head small{font-size:10.5px;color:#7F93B2}
.al-ins-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.al-num{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.n1{background:rgba(239,68,68,.18);color:#F87171}
.n2{background:rgba(245,158,11,.18);color:#FBBF24}
.n3{background:rgba(6,137,250,.18);color:#7CB8F7}
.al-ins-row b{display:block;font-size:12px;color:#E4EEFA;line-height:1.35}
.al-ins-row small{font-size:10.5px;color:#7F93B2}
.al-proof{position:absolute;right:0;top:52%;width:31%;min-width:240px;padding:15px 16px;z-index:3}
.al-proof-head{display:flex;gap:10px;align-items:center;margin-bottom:11px}
.al-shield{width:32px;height:32px;border-radius:9px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.al-shield svg{width:17px;height:17px}
.al-proof-head b{display:block;font-size:13px;color:#fff}
.al-proof-head small{font-size:10.5px;color:#7F93B2}
.al-verified{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.4);border-radius:8px;padding:8px 10px;margin-bottom:10px}
.al-verified b{display:block;color:#7DEFC2;font-weight:700;font-size:12px}
.al-verified small{font-size:10.5px;color:#9FD8C2}
.al-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:11px}
.al-row:last-child{border-bottom:none}
.al-row span{color:#7F93B2}
.al-row b{color:#fff;font-weight:600}
.al-chip{background:rgba(16,185,129,.18);color:#5EE0A8 !important;font-size:9px;letter-spacing:.06em;padding:2px 8px;border-radius:9999px}
/* Story rail: your data → Ask Lumen → get insight → take action */
.al-rail{display:flex;align-items:center;gap:14px;margin:64px auto 0;max-width:900px}
.al-rail-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#C6D6EE;white-space:nowrap}
.al-rail-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid rgba(6,137,250,.5);background:rgba(6,137,250,.14);color:var(--lumen)}
.al-rail-dot svg{width:13px;height:13px}
.al-rail-line{flex:1;height:1px;background:rgba(6,137,250,.4)}
@media (prefers-reduced-motion: reduce){ .al-wave i{animation:none;height:60%} }
@media (max-width:1180px){ .al-front{width:66%} .al-proof{width:33%} }
@media (max-width:960px){
  .al-grid{grid-template-columns:1fr;gap:48px}
  /* Stack per the brief: copy block, then panel → insight → dashboard → proof */
  .al-stage{min-height:0;display:flex;flex-direction:column;gap:16px}
  .al-front{position:static;width:100%;min-width:0;order:1}
  .al-insight{margin-left:0}
  .al-dash{position:static;width:100%;order:2}
  .al-proof{position:static;width:100%;min-width:0;order:3}
  .al-rail{flex-wrap:wrap;justify-content:center;row-gap:12px;margin-top:44px}
  .al-rail-line{display:none}
}

/* ── Platform module cards — Module Cards Dev Brief v1.0 (Mira) ──
   One complete product story per card: visual → title → tagline →
   description → CTA. Visual is full-bleed 5:3, never an icon tile. */
.container-wide{max-width:1500px}
/* Solutions section — Mira's 2×3 handoff (Sep 30): 3 cols × 2 rows, 32px gaps,
   16px radius, soft 0 8px 24px shadow, section rides the standard container */
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.module-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(6,137,250,.10);
  border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(16,24,40,.08);
  transition:transform .2s ease,box-shadow .2s ease}
.module-card:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(3,13,32,.14)}
.module-visual{width:100%;aspect-ratio:388/253;object-fit:cover;display:block;transition:filter .2s ease}
.module-card:hover .module-visual{filter:brightness(1.04)}
.module-body{padding:24px;display:flex;flex-direction:column;flex:1}
.module-body h3{font-size:22px;font-weight:700;color:#030D20;margin-bottom:6px}
.module-tag{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.module-body p{font-size:15.5px;color:#4B5563;line-height:1.45;margin-bottom:16px}
.module-cta{margin-top:auto;font-size:15px;font-weight:600;color:#0457FB}
.module-cta:hover{text-decoration:underline}
/* Module accents — tagline + hover ring only, never the card background */
.m-shield  .module-tag{color:#3B82F6} .m-shield:hover{box-shadow:0 22px 52px rgba(3,13,32,.14),0 0 0 2px rgba(59,130,246,.25)}
.m-finance .module-tag{color:#10B981} .m-finance:hover{box-shadow:0 22px 52px rgba(3,13,32,.14),0 0 0 2px rgba(16,185,129,.25)}
.m-freight .module-tag{color:#F59E0B} .m-freight:hover{box-shadow:0 22px 52px rgba(3,13,32,.14),0 0 0 2px rgba(245,158,11,.25)}
.m-connect .module-tag{color:#8B5CF6} .m-connect:hover{box-shadow:0 22px 52px rgba(3,13,32,.14),0 0 0 2px rgba(139,92,246,.25)}
.m-sales   .module-tag{color:#DB2777} .m-sales:hover{box-shadow:0 22px 52px rgba(3,13,32,.14),0 0 0 2px rgba(219,39,119,.25)}
.m-voice   .module-tag{color:#0EA5E9} .m-voice:hover{box-shadow:0 22px 52px rgba(3,13,32,.14),0 0 0 2px rgba(14,165,233,.25)}
@media (max-width:1000px){ .module-grid{grid-template-columns:repeat(2,1fr);gap:24px} }
@media (max-width:767px){
  .module-grid{grid-template-columns:1fr;gap:18px}
  .module-body{padding:20px}
}
@media (prefers-reduced-motion: reduce){
  .module-card,.module-visual{transition:none}
  .module-card:hover{transform:none}
}

/* ── Audience ── */
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.audience-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.audience-art{height:150px;display:flex;align-items:center;justify-content:center;font-size:52px}
.a1{background:linear-gradient(140deg,var(--sky),#D8ECFF)}
.a2{background:linear-gradient(140deg,#EDF3FE,#DDE8FB)}
.a3{background:linear-gradient(140deg,#EAF0F8,#DCE6F0)}
.audience-card h3{padding:20px 22px 4px;font-size:16px}
.audience-card p{padding:0 22px 24px;font-size:14px;color:var(--slate)}
@media (max-width:900px){ .audience-grid{grid-template-columns:1fr} }

/* ── Outcomes ── */
.outcomes-section{padding:96px 0}
.outcomes-row{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:center}
.outcome-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.outcome{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:20px}
.o-icon{width:40px;height:40px;border-radius:10px;background:rgba(6,137,250,.16);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.outcome h3{font-size:15px;margin-bottom:2px}
.outcome p{font-size:13px;color:#9FB0C8}
@media (max-width:900px){ .outcomes-row{grid-template-columns:1fr;gap:36px} .outcome-tiles{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .outcome-tiles{grid-template-columns:1fr} }

/* ── Closing ── */
.closing{position:relative;color:#fff;padding:130px 0;overflow:hidden;
  background:linear-gradient(100deg,rgba(3,13,32,.94) 34%,rgba(3,13,32,.55) 68%,rgba(3,13,32,.35)),
             url('assets/closing-skyline.png') center/cover no-repeat,var(--navy)}
.closing-glow{position:absolute;bottom:-260px;left:50%;transform:translateX(-50%);width:900px;height:520px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(4,87,251,.20),transparent 65%);pointer-events:none}
.closing-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center;position:relative}
.closing .cta-row{margin-top:32px}
.demo-card{background:#fff;color:var(--charcoal);border-radius:18px;padding:30px;box-shadow:var(--shadow-lg)}
.demo-title{font-size:19px;font-weight:700;margin-bottom:18px}
.demo-card label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:14px}
.demo-card input,.demo-card textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;font-family:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:9px;outline:none;color:var(--charcoal);background:var(--cloud);transition:border .2s}
.demo-card input:focus,.demo-card textarea:focus{border-color:var(--lumen);background:#fff}
.form-note{font-size:12px;color:var(--slate);text-align:center;margin-top:12px}
.form-success{text-align:center;padding:34px 10px}
.success-icon{width:58px;height:58px;border-radius:50%;background:var(--grad);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-success h3{font-size:20px;margin-bottom:8px}
.form-success p{font-size:14.5px;color:var(--slate)}
@media (max-width:900px){ .closing-grid{grid-template-columns:1fr;gap:48px} .closing{padding:88px 0} .closing .cta-row .btn{width:100%;justify-content:center} }

/* ── Footer ── */
.site-footer{background:#020A19;color:#8DA0BC;padding:34px 0}
.footer-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.footer-logo{height:22px;width:auto;filter:invert(1) hue-rotate(180deg) saturate(1.4)}
.footer-nav{display:flex;gap:22px;margin:0 auto}
.footer-nav a{font-size:13px;transition:color .2s}
.footer-nav a:hover{color:#fff}
.footer-copy{font-size:12.5px}
@media (max-width:640px){ .footer-inner{flex-direction:column;text-align:center} .footer-nav{margin:0} }

/* ── Reveal animation (reduced-motion safe) ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}