/* =========================
   TOKENS / BASE
   ========================= */
:root{
  --ink-900:#0e1420; --ink-700:#334155; --ink-500:#64748B; --ink-300:#CBD5E1;
  --white:#fff;
  --blue:#2563eb; --blue-2:#1d4ed8; --cyan:#06b6d4; --violet:#7c3aed; --indigo:#1e40af;
  --radius-xl:42px;
  --container:1240px;
  --container-wide:1400px;
  --gutter:24px;
  --edge-max:1680px;
  --kpi-overhang:-90px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{ overflow-x:hidden }
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink-900);
  background:#fff;
}
img,video{ max-width:100%; height:auto; display:block }
a{ text-decoration:none; color:inherit }

/* Containers */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px }
.edge{ width:min(var(--edge-max), calc(100% - 32px)); margin-inline:auto }

/* Utilities */
.hide-sm{ display:inline }
@media (max-width:680px){ .hide-sm{ display:none } }

/* =========================
   HEADER (glass over hero → solid on scroll)
   ========================= */
.site-header{
  position:fixed; inset:0 0 auto; z-index:110;
  background:transparent; transition:background .25s, box-shadow .25s;
}
body.scrolled-header .site-header{ background:#fff; box-shadow:0 8px 24px rgba(2,8,23,.08) }

.header-inner{
  max-width:var(--container); margin:0 auto; display:flex; align-items:center; gap:12px;
  padding:10px 12px; min-height:64px; transform:translateY(30px); transition:transform .25s;
}
body.header-blur .header-inner,
body.scrolled-header .header-inner{ transform:translateY(0) }

.brand{ color:#0f172a; display:flex; align-items:center; gap:8px; font-weight:800 }
body:not(.scrolled-header) .brand{ color:#fff }

/* Contact button */
.btn-contact{ margin-left:8px; display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 18px; border-radius:999px; font-weight:800 }
.btn-contact--grad{ background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; border:none; box-shadow:0 8px 24px rgba(37,99,235,.25) }
.btn-contact .btn-dot{ width:32px; height:32px; border-radius:999px; background:#fff; color:#111; display:grid; place-items:center; box-shadow:0 8px 18px rgba(2,8,23,.18) }

/* Center nav (glass over hero) */
.nav-center{ flex:1; display:flex; justify-content:center; position:relative }
.nav-glass{
  display:flex; gap:14px; align-items:center; padding:8px 14px; border-radius:999px;
  background:rgba(16,24,40,.35); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 10px 30px rgba(2,8,23,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-glass .nav-link{ color:#f1f5f9; opacity:.95; font-weight:700; padding:8px 10px; border-radius:10px }
.nav-glass .nav-link:hover{ background:rgba(255,255,255,.08); opacity:1 }

body.scrolled-header .nav-glass{ background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; border-radius:0 }
body.scrolled-header .nav-glass .nav-link{ color:#0f172a; opacity:1; padding:8px 10px; border-radius:8px }
body.scrolled-header .nav-glass .nav-link:hover{ background:rgba(2,8,23,.05) }

/* Mid-state blur while still in hero */
body.header-blur:not(.scrolled-header) .site-header{
  background:rgba(16,24,40,.22);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:none; box-shadow:0 10px 30px rgba(2,8,23,.16);
}

/* Mobile header */
.hamburger{ display:none; background:transparent; border:0; padding:6px; margin-left:12px }
.hamburger span{ display:block; width:24px; height:2px; background:#111; margin:5px 0; border-radius:2px }
@media (max-width:1024px){ .nav-center{ display:none } .btn-contact{ display:none } .hamburger{ display:block } }

/* =========================
   MOBILE DRAWER
   ========================= */
.scrim{ position:fixed; inset:0; background:rgba(0,10,20,.35); opacity:0; pointer-events:none; transition:opacity .22s; z-index:68 }
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(92vw,380px); max-width:420px; height:100vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#fff; box-shadow:0 30px 80px rgba(2,8,23,.3); transform:translateX(110%); transition:transform .28s; z-index:80; padding:20px;
}
.drawer-nav{ display:flex; flex-direction:column; gap:12px }
.drawer-nav a{ padding:10px 8px; border-radius:10px; color:#0e1420; font-weight:700 }
.drawer-nav a:hover{ background:rgba(2,8,23,.06) }
.drawer-nav hr{ border:0; border-top:1px solid #e5e7eb; margin:12px 0 }
.drawer-cta{ display:inline-flex; align-items:center; gap:10px }
.is-menu-open .scrim{ opacity:1; pointer-events:auto }
.is-menu-open .mobile-drawer{ transform:translateX(0) }
@media (min-width:1025px){ .mobile-drawer,.scrim{ display:none !important; visibility:hidden !important; pointer-events:none !important } }

/* =========================
   HERO
   ========================= */
.hero{
  position:relative; margin:24px 24px 96px !important; border-radius:24px; color:#fff; background:#0a0f1d; overflow:visible;
  padding-top:clamp(70px,10vw,96px);
}
.hero::after{ content:""; position:absolute; inset:0; border-radius:24px 24px var(--radius-xl) var(--radius-xl); pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) }

/* animated blobs */
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden }
.hero-bg .blob{ position:absolute; filter:blur(44px); opacity:.85; border-radius:50%; transform:translateZ(0); animation:drift 18s ease-in-out infinite alternate }
.hero-bg .a{ width:540px; height:540px; left:-120px; top:-120px; background:radial-gradient(60% 60% at 40% 40%, #0ea5e9 0%, transparent 60%), radial-gradient(60% 60% at 70% 60%, #1d4ed8 0%, transparent 70%) }
.hero-bg .b{ width:620px; height:620px; right:-180px; top:120px; animation-duration:22s; animation-direction:reverse; background:radial-gradient(60% 60% at 40% 40%, #7c3aed 0%, transparent 60%), radial-gradient(60% 60% at 70% 60%, #0ea5e9 0%, transparent 70%) }
.hero-bg .c{ width:480px; height:480px; left:40%; bottom:-160px; animation-duration:20s; background:radial-gradient(60% 60% at 50% 50%, #1e3a8a 0%, transparent 65%), radial-gradient(60% 60% at 40% 60%, #0ea5e9 0%, transparent 70%) }
@keyframes drift{ to{ transform:translate3d(12px,-10px,0) scale(1.05) } }

.hero-pad{ position:relative; z-index:1; min-height:60vh; padding:120px 0 220px }
.hero-copy{ max-width:980px; margin:0 }
.hero-title{ font-weight:800; line-height:.95; letter-spacing:-.02em; font-size:clamp(48px,7.8vw,120px); margin:0 0 18px }
.hero-lead{ max-width:680px; color:#e8eff8; font-size:clamp(16px,1.3vw,18px); line-height:1.6; margin:0 }

/* CTA buttons under subhead */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.01em; border-radius:999px; padding:12px 18px; line-height:1; transition:transform .12s, box-shadow .2s, background .2s, color .2s; cursor:pointer; user-select:none }
.btn:active{ transform:translateY(1px) }
.btn--primary{ color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 10px 26px rgba(37,99,235,.28) }
.btn--primary:hover{ box-shadow:0 14px 36px rgba(37,99,235,.34) }
.btn--ghost{ color:#e6eef6; background:transparent; border:1px solid rgba(255,255,255,.28); backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px) }
.btn--ghost:hover{ background:rgba(255,255,255,.06) }
.hero-actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap }
@media (max-width:560px){ .hero-actions{ gap:10px } .btn{ width:100%; justify-content:center } }

/* Learn more */
.learn-more{ position:absolute; bottom:26px; display:flex; align-items:center; gap:8px; color:#e6eef6; font-weight:700; opacity:.95; left:max(var(--gutter), calc((100vw - var(--container))/2 + 20px)) }
.learn-more:hover{ opacity:1 }

/* KPI slab */
.kpi-panel{
  position:absolute; bottom:-40px; z-index:2; background:#fff; color:#0b1a2a; border-radius:28px; box-shadow:0 18px 70px rgba(2,8,23,.25);
  padding:24px 28px; display:flex; gap:28px; align-items:flex-end; flex-wrap:wrap;
  right:calc(max(24px, (100vw - var(--container))/2 + 10px) + var(--kpi-overhang));
}
.kpi{ display:flex; align-items:flex-end; gap:10px; min-width:210px }
.kpi-num{ font-size:52px; font-weight:800; color:#1f3fbf; line-height:1 }
.kpi-text{ font-size:15px; color:#3b4a63 }
@media (max-width:860px){ .kpi-panel{ position:static; margin:16px var(--gutter) 0; border-radius:18px } }

/* =========================
   BENEFITS (panel + marquee)
   ========================= */
.benefits{ padding:72px 0 }
.benefits-shell{
  position:relative; width:min(1400px, calc(100% - 48px)); margin:0 auto; border-radius:28px; padding:36px 28px 32px; overflow:hidden;
  background:radial-gradient(1200px 600px at 85% 30%, rgba(55,119,255,.28), transparent 60%),
             radial-gradient(900px 520px at 15% 10%, rgba(11,139,210,.25), transparent 60%),
             linear-gradient(180deg, #0e1430, #0b1230 60%, #0b1130);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px rgba(2,8,23,.35) inset, 0 14px 40px rgba(2,8,23,.25);
}
.benefits-head{ padding:18px 10px 26px; text-align:center }
.benefits-title{ margin:0; color:#eaf0ff; font-weight:800; letter-spacing:-.01em; line-height:1.12; font-size:clamp(26px,3.6vw,52px); text-shadow:0 2px 20px rgba(0,0,0,.25) }

.benefits-grid{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0,1fr)) }
.benefit-card{ display:flex; align-items:flex-start; gap:12px; padding:18px; border-radius:18px; color:#e6ebff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px); box-shadow:0 12px 26px rgba(2,8,23,.28) }
.bf-ico{ font-size:22px; line-height:1; opacity:.95 }
.bf-text{ margin:0; font-size:15px; line-height:1.55; color:#e9eeff }
@media (max-width:1200px){ .benefits-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:900px){ .benefits-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .benefits-shell{ padding:28px 18px } .benefits-grid{ grid-template-columns:1fr } }

.benefits-divider{ border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); margin:22px 0 10px }

/* Clients marquee */
.clients-section{ width:min(1400px, calc(100% - 48px)); margin:0 auto; text-align:center }
.clients-title{ margin-bottom:10px; font-weight:800; letter-spacing:-.01em; font-size:clamp(14px,2vw,22px); color:#eaf0ff; text-shadow:0 2px 20px rgba(0,0,0,.25) }

.logo-marquee{ --marquee-gap:56px; position:relative; overflow:hidden; padding:18px 0; -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent) }
.marquee-track{ display:flex; width:max-content; animation:marquee-scroll var(--speed,28s) linear infinite; will-change:transform }
.marquee-row{ display:flex; gap:var(--marquee-gap); align-items:center; list-style:none; padding:0; margin:0 }
.logo-item{ flex:0 0 auto }
.logo-item img{ display:block; width:92px; height:52px; object-fit:contain; filter:grayscale(1) opacity(.85); transition:filter .2s, transform .2s }
.logo-item img:hover{ filter:grayscale(0) opacity(1); transform:translateY(-2px) }
@keyframes marquee-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =========================
   SECTION: TITLE + MEDIA WITH OVERLAY
   ========================= */
.section{ padding:70px 0 }
.sec-title{ margin:0 0 18px; text-align:center; font-weight:800; letter-spacing:-.01em; color:var(--ink-900); font-size:clamp(24px,3vw,36px); margin-inline:auto }
.media-card{ margin:0; overflow:hidden; border-radius:28px; border:1px solid var(--ink-300); box-shadow:0 18px 70px rgba(2,8,23,.12) }
.media-card>img,.media-card>video{ width:100%; height:auto; display:block }
.media-card.has-overlay{ position:relative; overflow:hidden }
.media-card.has-overlay::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 50%, rgba(8,15,30,.35) 70%, rgba(8,15,30,.72) 100%) }
.media-overlay{ position:absolute; left:clamp(16px,3vw,32px); right:clamp(16px,6vw,80px); bottom:clamp(16px,3vw,32px); color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.25); pointer-events:none }
.ovr-eyebrow{ display:block; margin-bottom:8px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(12px,.9vw,14px); opacity:.9 }
.ovr-title{ margin:0 0 6px; font-weight:800; letter-spacing:-.02em; line-height:.98; font-size:clamp(28px,5vw,72px) }
.ovr-sub{ margin:0; font-size:clamp(14px,1.3vw,18px); opacity:.95 }

/* =========================
   SEQUENCE (left text, sticky right image)
   ========================= */
.sequence{ padding:96px 0 140px }
.sequence .container{ padding-inline:12px; max-width:var(--container) }
.seq-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 600px; gap:72px; align-items:start }
.seq-text{ position:relative; padding-left:8px }
.seq-step{ min-height:84vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0; opacity:.28; transform:translateY(0); transition:opacity .28s, transform .28s }
.seq-step.is-active{ opacity:1; transform:translateY(-6px) }
.seq-index{ color:#2563eb; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; display:block; margin-bottom:12px }
.seq-h{ font-size:clamp(30px,4.2vw,54px); line-height:1.06; margin:0 0 18px; font-weight:800 }
.seq-h .accent{ color:#2563eb }
.seq-body{ max-width:56ch; color:#475569; font-size:clamp(15px,1.1vw,18px); line-height:1.7; margin:0 }
.seq-figure{ position:sticky; top:110px; width:100%; max-width:600px; aspect-ratio:4/3; height:auto; border-radius:12px; overflow:hidden; box-shadow:0 28px 90px rgba(2,8,23,.18); border:1px solid #e6eef8; align-self:start }
.seq-figure img{ width:100%; height:100%; object-fit:cover; transition:opacity .28s; opacity:1 }
.seq-figure.is-fixed{ box-shadow:0 32px 100px rgba(2,8,23,.18); border-radius:12px }
@media (min-width:1200px){ .seq-text::before{ content:""; position:absolute; left:-36px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, transparent, rgba(37,99,235,.35), transparent) } }
@media (max-width:1024px){ .seq-grid{ grid-template-columns:1fr; gap:28px } .seq-figure{ position:relative; top:auto; max-width:100%; aspect-ratio:4/3 } .seq-step{ min-height:auto; opacity:1; transform:none; padding:22px 0 } .seq-text::before{ display:none } .seq-bubble{ position:absolute; bottom:12px; left:12px; transform:none; display:flex } }

/* =========================
   PITFALLS (heading left, cards right)
   ========================= */
.pitfalls{ padding:84px 0 }
.pitfalls__inner{ max-width:var(--container); margin-inline:auto; padding-left:0; padding-right:12px }
.pitfalls__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:start }
.pitfalls__lead{ padding-top:6px }
.eyebrow{ display:block; color:#2563EB; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; font-size:13px }
.pitfalls__title{ margin:0; font-weight:800; color:var(--ink-900); font-size:clamp(44px,7vw,110px); line-height:.98; letter-spacing:-.02em; word-break:keep-all }
.nowrap{ display:inline-block; white-space:nowrap }
.pitfalls__cards{ display:flex; flex-direction:column; gap:18px; align-items:stretch }
.card.pitfall{ display:flex; gap:18px; align-items:flex-start; background:linear-gradient(180deg,#f6fbff,#f3f8ff); border:1px solid rgba(37,99,235,0.06); padding:20px; border-radius:12px; box-shadow:0 18px 40px rgba(15,23,42,0.04) }
.card__icon{ flex:0 0 44px; margin-top:4px }
.card__content{ flex:1 }
.card__title{ margin:0 0 6px; font-weight:700; font-size:18px; color:var(--ink-900) }
.card__desc{ margin:0; color:var(--ink-700); font-size:15px; line-height:1.6 }
@media (max-width:1024px){ .pitfalls__grid{ grid-template-columns:1fr; gap:28px } .pitfalls__title{ font-size:clamp(32px,7.5vw,56px); line-height:1.02 } .pitfalls__cards{ order:2 } .pitfalls__lead{ order:1 } .card.pitfall{ padding:16px } }
@media (max-width:480px){ .pitfalls{ padding:48px 0 } .card__title{ font-size:16px } .card__desc{ font-size:14px } }

/* =========================
   FOOTER CTA
   ========================= */
.footer-cta{ width:min(1400px, calc(100% - 48px)); margin:36px auto 80px; position:relative; border-radius:22px; overflow:hidden; box-shadow:0 16px 60px rgba(2,8,23,.14) }
.footer-cta__bg{ margin:0 }
.footer-cta__bg img{ width:100%; height:240px; object-fit:cover; display:block }
.footer-cta::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(9,18,40,.88) 0%, rgba(13,52,156,.75) 40%, rgba(13,52,156,.35) 60%, rgba(13,52,156,0) 82%) }
.footer-cta__content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; padding:40px 48px }
.footer-cta__title{ margin:0; color:#fff; font-weight:800; letter-spacing:-.01em; font-size:clamp(20px,2.4vw,30px) }
.footer-cta__sub{ margin:0; color:#deecff; font-size:14px; max-width:46ch; line-height:1.6 }
.btn-cta{ margin:10px 0 0; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; font-weight:800; color:#0b1730; background:#fff; box-shadow:0 10px 28px rgba(2,8,23,.18) }
@media (max-width:560px){ .footer-cta{ width:calc(100% - 32px) } .footer-cta__bg img{ height:200px } .footer-cta__content{ padding:24px } }

/* =========================
   MEGA FOOTER + WAVE + LEGAL
   ========================= */
.mega-footer{ position:relative; padding-top:34px; background:#fff; overflow:hidden }
.mega-footer__grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start }
.brand--footer{ display:flex; align-items:center; gap:10px; font-weight:800; color:#0b1730 }
.mf-left .mf-block{ margin-top:16px }
.mf-h{ margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:#64748B }
.mf-p{ margin:0; color:#0b1730; opacity:.9; font-size:14px; line-height:1.8 }
.mf-links{ display:grid; grid-template-columns:repeat(3, minmax(140px,1fr)); gap:20px; justify-items:start }
.mf-col{ list-style:none; padding:0; margin:0 }
.mf-col-h{ font-weight:800; font-size:14px; margin-bottom:10px; color:#0b1730 }
.mf-col a{ color:#334155; font-size:14px; line-height:1.9 }
.mf-col a:hover{ color:#0E7C86 }
.footer-social{ display:flex; gap:12px; margin-top:12px }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(14,165,233,0.12); color:#0ea5e9; transition:all .25s }
.footer-social a:hover{ background:rgba(14,165,233,0.25); box-shadow:0 4px 12px rgba(14,165,233,0.35); transform:translateY(-2px) }
.footer-wave{ width:100%; overflow:hidden; line-height:0; display:block; position:relative; margin-top:32px }
.footer-wave svg{ display:block; width:100%; height:140px; transform:translateY(2px) }
.legal{ background:linear-gradient(90deg,#0a0f1d 0%,#13244f 40%,#0ea5e9 100%); color:#e2e8f0; padding:14px 24px }
.legal__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; line-height:1.6 }
.legal__links{ display:flex; gap:16px }
.legal__links a{ color:#e2e8f0; opacity:.8; transition:opacity .2s }
.legal__links a:hover{ opacity:1 }
@media (max-width:1024px){ .mega-footer__grid{ grid-template-columns:1fr; gap:28px } .mf-links{ grid-template-columns:repeat(2, minmax(140px,1fr)) } }
@media (max-width:560px){ .mf-links{ grid-template-columns:1fr } }

/* =========================
   INTERIOR PAGES
   ========================= */
body.interior .site-header{ position:fixed; top:0; left:0; right:0; z-index:110; background:#fff; box-shadow:0 8px 24px rgba(2,8,23,.08) }
body.interior .header-inner{ transform:none !important }
body.interior .brand{ color:#0f172a }
body.interior .nav-center .nav-glass{ background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; border-radius:0 }
body.interior .nav-center .nav-link{ color:#0f172a; opacity:1; padding:8px 10px; border-radius:8px }
body.interior .nav-center .nav-link:hover{ background:rgba(2,8,23,.05) }
body.interior .contact-hero{ margin-top:88px }
@media (max-width:1024px){ body.interior .contact-hero{ margin-top:72px } }