:root{--coral:#FF6B68;--reveal:rgba(251,247,245,.96)}

  [data-theme="midnight"]{
    --paper:#0A0D12;--card:#0F172A;--ink:#F6F7F5;--muted:#9AA6BC;--muted2:#8794AE;
    --blue:#1756FF;--cyan:#00E1FF;--teal:#2FE0BE;--coral:#FF8A87;
    --line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.07);--reveal:rgba(10,13,18,.94)}
  section{position:relative}.act{padding:clamp(72px,12vh,120px) 0}
  .achead{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(22px,4vh,40px)}
  .num{font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted)}
  .muted{color:var(--muted)}

  /* HERO — artful, light */
  .hero{position:relative;height:100vh;min-height:640px;overflow:hidden;
    background:radial-gradient(48% 60% at 84% 40%,rgba(37,99,235,.08),transparent 70%),radial-gradient(40% 50% at 12% 92%,rgba(255,107,104,.05),transparent 70%),var(--paper)}
  .hobject{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(52vw,600px);aspect-ratio:1;z-index:1;pointer-events:none;transition:transform .3s ease-out}
  .hglow{position:absolute;inset:0;border-radius:50%;filter:blur(10px);animation:obreath 9s ease-in-out infinite alternate;
    background:radial-gradient(circle at 46% 42%,rgba(37,99,235,.45),rgba(76,141,255,.34) 26%,rgba(124,104,230,.24) 52%,rgba(255,107,104,.18) 78%,transparent 100%)}
  @keyframes obreath{0%{transform:scale(1)}100%{transform:scale(1.06)}}
  .hfield{position:absolute;inset:-10%;width:120%;height:120%;object-fit:contain;filter:drop-shadow(0 0 30px rgba(37,99,235,.22));animation:hdrift 20s ease-in-out infinite alternate,hpulse 7s ease-in-out infinite;
    -webkit-mask-image:radial-gradient(62% 62% at 58% 48%,#000 44%,transparent 82%);mask-image:radial-gradient(62% 62% at 58% 48%,#000 44%,transparent 82%)}
  [data-theme="midnight"] .hfield{filter:drop-shadow(0 0 34px rgba(23,86,255,.45))}
  .hfield.dark{display:none}[data-theme="midnight"] .hfield.light{display:none}[data-theme="midnight"] .hfield.dark{display:block}
  .hspark{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
  @keyframes hdrift{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.06) translate(-2%,1%)}}
  @keyframes hpulse{0%,100%{opacity:.9}50%{opacity:1}}
  @keyframes ospin{to{transform:rotate(360deg)}}
  .hedge{position:absolute;left:16px;top:50%;writing-mode:vertical-rl;rotate:180deg;transform:translateY(-50%);z-index:4;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;max-height:80vh}
  .hidx{position:absolute;left:clamp(24px,5vw,64px);top:clamp(84px,14vh,120px);z-index:4;font-family:var(--display);font-size:12px;color:var(--muted)}
  .hcontent{position:absolute;left:clamp(24px,5vw,64px);bottom:clamp(52px,13vh,120px);z-index:3;max-width:66%}
  .hcontent .eyebrow{margin-bottom:22px}
  .hero h1{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(40px,7.4vw,98px);line-height:.92}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln i{display:block;font-style:normal;transform:translateY(112%);animation:lnup 1s cubic-bezier(.22,.61,.36,1) forwards}
  .hero h1 .ln:nth-child(1) i{animation-delay:.12s}.hero h1 .ln:nth-child(2) i{animation-delay:.26s}
  .hero h1 .k{color:var(--blue)}
  @keyframes lnup{to{transform:none}}@keyframes fade{to{opacity:1}}
  .hero .sub{margin-top:24px;max-width:46ch;color:var(--muted);font-size:clamp(15px,1.2vw,18px);opacity:0;animation:fade .9s .8s ease forwards}
  .hero .cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap;opacity:0;animation:fade .9s 1s ease forwards}

  /* motif hint behind blocks */
  .hint{position:absolute;z-index:0;pointer-events:none;opacity:.55}
  .hint .hl{fill:none;stroke:var(--blue);stroke-opacity:.09;stroke-dasharray:2 8}

  /* CARDS with motifs */
  .cards>.wrap{position:relative;z-index:1}
  .quad{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .qcard{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:20px;overflow:hidden;text-decoration:none;display:block;transition:transform .35s,box-shadow .35s,border-color .35s}
  .qcard:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(11,18,32,.10);border-color:var(--line)}
  .qvis{position:relative;aspect-ratio:16/10;overflow:hidden}
  .mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .mimg.dark{display:none}
  [data-theme="midnight"] .mimg.light{display:none}[data-theme="midnight"] .mimg.dark{display:block}
  .qcard.q3 .mimg{object-fit:contain;object-position:center;padding:4%}
  .qcard.q1 .qvis{background:radial-gradient(120% 120% at 70% 20%,rgba(37,99,235,.14),transparent 60%),var(--card)}
  .qcard.q2 .qvis{background:radial-gradient(120% 120% at 70% 20%,rgba(10,164,236,.16),transparent 60%),var(--card)}
  .qcard.q3 .qvis{background:var(--card)}
  .qcard.q4 .qvis{background:radial-gradient(120% 120% at 70% 20%,rgba(10,164,236,.16),transparent 60%),var(--card)}
  .qbody{padding:22px 22px 26px}
  .qbody h3{font-size:20px}.qbody .qp{margin-top:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600}
  .qbody p{margin-top:12px;font-size:13.5px;color:var(--muted)}
  .mline{fill:none;stroke:var(--blue);stroke-width:1.4;stroke-opacity:.55}
  .mdot{fill:var(--blue)}
  @media(max-width:900px){.quad{grid-template-columns:1fr 1fr}}@media(max-width:480px){.quad{grid-template-columns:1fr}}

  /* FULL-BLEED SOLUTION BLOCKS */
  .fb{position:relative;min-height:78vh;display:flex;align-items:center;padding:clamp(70px,12vh,130px) 0;overflow:hidden}
  .fbmedia{position:absolute;top:0;bottom:0;right:0;width:50vw;z-index:0;overflow:hidden}
  .fb.rev .fbmedia{right:auto;left:0}
  .simg{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink)}
  .simg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
  .simg .cap{position:relative;z-index:1;text-align:center}.simg .cap .t{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink)}.simg .cap .n{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:8px;color:var(--muted)}
  .b1 .simg{background:radial-gradient(110% 110% at 68% 20%,rgba(37,99,235,.20),transparent 55%),linear-gradient(160deg,#e7edfb,var(--card))}
  .b2 .simg{background:radial-gradient(110% 110% at 68% 20%,rgba(10,164,236,.22),transparent 55%),linear-gradient(160deg,#e3f3fc,var(--card))}
  .b3 .simg{background:radial-gradient(110% 110% at 68% 20%,rgba(255,107,104,.20),transparent 55%),linear-gradient(160deg,#fce9e9,var(--card))}
  .b4 .simg{background:radial-gradient(110% 110% at 68% 20%,rgba(10,164,236,.22),transparent 55%),linear-gradient(160deg,#e2faf4,var(--card))}
  [data-theme="midnight"] .simg{color:#fff}[data-theme="midnight"] .simg .cap .t{color:#fff}[data-theme="midnight"] .simg .cap .n{color:rgba(255,255,255,.6)}
  [data-theme="midnight"] .b1 .simg{background:radial-gradient(110% 110% at 68% 20%,#3B82F6,transparent 55%),linear-gradient(160deg,#1E3A8A,#0B1220)}
  [data-theme="midnight"] .b2 .simg{background:radial-gradient(110% 110% at 68% 20%,#0AA4EC,transparent 55%),linear-gradient(160deg,#0C4A6E,#0B1220)}
  [data-theme="midnight"] .b3 .simg{background:radial-gradient(110% 110% at 68% 20%,#FF6B68,transparent 55%),linear-gradient(160deg,#7A2E2C,#0B1220)}
  [data-theme="midnight"] .b4 .simg{background:radial-gradient(110% 110% at 68% 20%,#0DD4B0,transparent 55%),linear-gradient(160deg,#0F766E,#0B1220)}
  /* rests OPEN (image visible) even with no JS; wipe plays once on load, then holds open */
  .spanel{position:absolute;inset:0;z-index:2;background:var(--reveal);backdrop-filter:blur(6px);display:grid;place-items:center;transform:translateX(101%);animation:spwipe 1.3s cubic-bezier(.76,0,.24,1) .45s both}
  .spanel .pk{font-family:var(--display);font-weight:600;font-size:16px;color:var(--muted)}
  .fb.rev .spanel{transform:translateX(-101%);animation-name:spwipeL}
  @keyframes spwipe{0%{transform:none}42%{transform:none}100%{transform:translateX(101%)}}
  @keyframes spwipeL{0%{transform:none}42%{transform:none}100%{transform:translateX(-101%)}}
  .fbmedia .clink{position:absolute;inset:0;z-index:6;text-indent:-9999px;overflow:hidden;cursor:pointer}
  .fb .wrap{position:relative;z-index:1;width:100%}
  .copy{max-width:44%}.fb.rev .copy{margin-left:auto}
  .copy .pt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600}
  .copy h2{font-size:clamp(28px,3.8vw,48px);margin-top:12px}
  .copy .lede{margin-top:16px;color:var(--muted);font-size:clamp(15px,1.15vw,17px);max-width:40ch}
  .copy ul{margin-top:16px;list-style:none;display:flex;flex-direction:column;gap:9px}
  .copy li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
  .copy li svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--blue)}
  .copy .graphrow{margin-top:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .copy .more{margin-top:24px;font-size:14.5px;font-weight:600;display:inline-flex;gap:7px;align-items:center;color:var(--blue);text-decoration:none}
  .gauge{width:92px;height:92px;flex:0 0 auto}.gauge .track{fill:none;stroke:var(--line);stroke-width:9}
  .gauge .fill{fill:none;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(37,99,235,.4))}
  .gauge .gv{font-family:var(--display);font-weight:600;font-size:24px;fill:var(--ink)}
  .spark{width:150px;height:66px;flex:0 0 auto}
  .statbig{font-family:var(--display);font-weight:600;font-size:30px;color:var(--ink);line-height:1}
  .statsm{font-size:12px;color:var(--muted);margin-top:6px}
  @media(max-width:860px){.fbmedia{position:relative;width:100%;height:320px;order:2}.fb{display:block}.fb .wrap{margin-bottom:26px}.copy,.fb.rev .copy{max-width:100%}}

  /* CONNECT — Intelligence Field reveals the map on scroll */
  .connect{background:var(--card);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);text-align:center;overflow:hidden}
  .graph{position:relative;margin:34px auto 0;max-width:820px;height:clamp(440px,58vh,600px);border-radius:22px;overflow:hidden;--gp:0}
  @media(max-width:1024px){.graph{height:clamp(300px,64vw,560px)}}
  .ggrid{position:absolute;inset:0;z-index:0;background-image:radial-gradient(var(--line) 1.2px,transparent 1.4px);background-size:26px 26px;background-position:center;opacity:calc(.1 + var(--gp)*.75)}
  .gaxis{position:absolute;z-index:0;background:var(--line);opacity:calc(var(--gp)*.7)}
  .gaxis-h{left:9%;right:9%;top:50%;height:1px}.gaxis-v{top:9%;bottom:9%;left:50%;width:1px}
  .gfield{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;z-index:2;opacity:calc(1 - var(--gp)*.82);animation:hdrift 26s ease-in-out infinite alternate;
    -webkit-mask-image:radial-gradient(66% 66% at 54% 48%,#000 40%,transparent 82%);mask-image:radial-gradient(66% 66% at 54% 48%,#000 40%,transparent 82%)}
  .gfield.dark{display:none}[data-theme="midnight"] .gfield.light{display:none}[data-theme="midnight"] .gfield.dark{display:block}
  .gspark{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;pointer-events:none;opacity:calc(1 - var(--gp)*.82)}
  .gcore{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);text-shadow:0 1px 12px var(--card),0 0 6px var(--card);opacity:calc(var(--gp));pointer-events:none}
  .gl{position:absolute;z-index:3;display:flex;flex-direction:column;line-height:1.15;opacity:calc(var(--gp))}
  .gl b{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
  .gl i{font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
  .gl.top{top:16px;left:50%;transform:translateX(-50%);align-items:center}
  .gl.right{top:50%;right:18px;transform:translateY(-50%);align-items:flex-end}
  .gl.bottom{bottom:16px;left:50%;transform:translateX(-50%);align-items:center}
  .gl.left{top:50%;left:18px;transform:translateY(-50%);align-items:flex-start}
  .ghint{position:absolute;z-index:3;bottom:14px;right:16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:calc(1 - var(--gp)*2.2)}

  /* PROOF */
  .proof .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:20px}
  .proof .st{border-left:2px solid var(--blue);padding-left:18px}
  .proof .st .v{font-family:var(--display);font-weight:600;font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.02em}
  .proof .st .l{margin-top:8px;font-size:13px;color:var(--muted)}
  .logowall{margin-top:56px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
  .logowall .lp{aspect-ratio:5/2;border:1px solid var(--line2);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:12px 16px}
  .logowall .lp img{max-width:100%;max-height:56%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .35s,opacity .35s}
  .logowall .lp:hover img{filter:none;opacity:1}
  @media(max-width:860px){.proof .stats{grid-template-columns:1fr 1fr}.logowall{grid-template-columns:repeat(3,1fr)}}

  .final{text-align:center;padding:clamp(96px,15vh,160px) 0;background:radial-gradient(46% 60% at 50% 50%,rgba(37,99,235,.08),transparent 70%),var(--paper)}
  .final h2{font-size:clamp(34px,5.4vw,72px);max-width:16ch;margin:0 auto}
  .final .cta{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  @media(prefers-reduced-motion:reduce){.hero h1 .ln i,.hero .sub,.hero .cta{opacity:1;transform:none}.spanel{transform:translateX(101%)}}

  @media(max-width:700px){
    .hero{height:auto;min-height:0;padding:clamp(104px,17vh,138px) clamp(22px,6vw,40px) clamp(46px,8vh,72px)}
    .hcontent{position:relative;z-index:3;left:auto;right:auto;top:auto;bottom:auto;transform:none;max-width:100%}
    .hobject{display:none}
    .hero h1{font-size:clamp(32px,8.5vw,52px)}
    .hero .sub{max-width:100%}
    .hedge,.hidx{display:none}
  }
  @media(min-width:701px) and (max-width:1024px){
    .hero h1{font-size:clamp(44px,7vw,70px)}
    .hcontent{max-width:78%}
    .hobject{width:min(46vw,440px);opacity:.6}
  }