/* =====================================================================
   WrapiD Solutions, immersive layer
   ---------------------------------------------------------------------
   Used by the splash home page and the dark hero banners on the landing
   pages. Depends on the tokens in site.css.
   1. Tokens and shared pieces   3. Dark hero (inner pages)
   2. Splash (flipping home)     4. Responsive and reduced motion
   ===================================================================== */

:root{
  --night:#080614; --night2:#150D31;
  --on-dark:#F4F1FF; --on-dark-2:rgba(244,241,255,.76);
  --glass-b:rgba(255,255,255,.17);
  --violet:#8B5CF6; --violet-l:#C4B5FD; --cyan:#67E8F9; --pink:#F9A8D4; --gold:#FCD34D;
  --depth-ease:cubic-bezier(.7,0,.2,1);
}

/* ---------- 1. SHARED PIECES ---------- */
.glass{
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid var(--glass-b);border-radius:20px;color:var(--on-dark);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2);
}
.eyebrow--dark{color:var(--violet-l)}
.grad{background:linear-gradient(95deg,#C4B5FD 10%,#67E8F9 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.chip-d{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:var(--on-dark);padding:8px 15px;border-radius:100px;font-size:13.5px;font-weight:500;line-height:1.2}
.chip-d .icon{width:16px;height:16px;color:var(--violet-l)}
.btn--glow{background:#fff;color:#12082B;box-shadow:0 0 0 0 rgba(196,181,253,.5),0 14px 40px rgba(124,58,237,.45)}
.btn--glow:hover{background:#F5F3FF;box-shadow:0 0 0 6px rgba(196,181,253,.18),0 18px 50px rgba(124,58,237,.6)}
.btn--glow-cyan{box-shadow:0 0 0 0 rgba(103,232,249,.5),0 14px 40px rgba(34,211,238,.38)}
.btn--glow-cyan:hover{box-shadow:0 0 0 6px rgba(103,232,249,.16),0 18px 50px rgba(34,211,238,.55)}
.link-light{color:var(--on-dark);text-underline-offset:4px;text-decoration-color:rgba(196,181,253,.7);font-weight:500}
.link-light:hover{text-decoration-color:#fff}

/* 3D scene: layered cards that float at different depths */
.scene-wrap{perspective:1300px;position:relative;width:100%;max-width:min(560px,66vh);margin-inline:auto;aspect-ratio:1/1}
.scene{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(calc(var(--px,0)*10deg)) rotateX(calc(var(--py,0)*-8deg));transition:transform .3s ease-out}
.fl{position:absolute;transform:translateZ(var(--z,0px));animation:bob var(--dur,7s) ease-in-out var(--delay,0s) infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.75}
.rings{position:absolute;pointer-events:none;color:var(--violet-l)}
.rings svg{width:100%;height:100%;overflow:visible}
.rings .spin{transform-origin:50% 50%;animation:spin 60s linear infinite}
.rings .spin-r{transform-origin:50% 50%;animation:spin 90s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* Glass card contents */
.gc{padding:16px 18px;font-size:13.5px;line-height:1.5}
.gc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;color:var(--violet-l);margin-bottom:10px}
.gc-h em{font-style:normal;color:rgba(244,241,255,.7);letter-spacing:.6px;text-transform:none;font-weight:500;font-size:11.5px}
.gc-line{height:7px;border-radius:6px;background:rgba(255,255,255,.14);margin-top:7px}
.gc-line--s{width:62%}.gc-line--m{width:82%}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 12px}
.pick>div{border:1.5px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 11px;font-size:12px;color:var(--on-dark-2);line-height:1.45}
.pick>div b{display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;color:rgba(244,241,255,.7)}
.pick .on{border-color:var(--violet-l);background:rgba(139,92,246,.2);color:#fff}
.pick .on b{color:var(--violet-l)}
.meter{display:grid;gap:9px}
.meter div{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px;font-size:12px;color:var(--on-dark-2)}
.meter i{display:block;height:7px;border-radius:6px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.meter i::after{content:"";position:absolute;inset:0;width:var(--w,70%);border-radius:6px;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.tagrow{display:flex;flex-wrap:wrap;gap:7px}
.tagrow span{font-size:12px;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:var(--on-dark)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.75;color:var(--on-dark-2);white-space:pre;overflow:hidden}
.code .k{color:#C4B5FD}.code .f{color:#67E8F9}.code .s{color:#FCD34D}.code .c{color:rgba(244,241,255,.62)}
.winbar{display:flex;gap:6px;margin-bottom:12px}
.winbar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.28)}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.flow span{font-size:11.5px;font-weight:500;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);white-space:nowrap}
.flow u{display:block;flex:1;min-width:10px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--cyan) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:dash 1.2s linear infinite;text-decoration:none}
@keyframes dash{to{background-position:24px 0}}
.bars{display:flex;align-items:flex-end;gap:7px;height:64px;margin-top:6px}
.bars i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--cyan),rgba(99,102,241,.5));height:var(--h,50%);transform-origin:bottom;animation:grow 3.2s ease-in-out var(--d,0s) infinite alternate}
@keyframes grow{from{transform:scaleY(.72)}to{transform:scaleY(1)}}
.pill-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#6EE7B7}
.pill-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#34D399;animation:livePulse 2s infinite}
.cardchip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;font-size:13px;font-weight:500;border-radius:100px}
.cardchip .icon{width:16px;height:16px;color:var(--violet-l)}

/* ---------- 2. SPLASH ---------- */
.splash-body{background:var(--night);color:var(--on-dark)}
.splash{position:relative;isolation:isolate;background:var(--night);color:var(--on-dark)}
.face{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:clamp(24px,4vw,64px);
  padding:104px max(6%,calc((100vw - 1240px)/2)) 150px;overflow:hidden;
  background:radial-gradient(1100px 680px at 80% 28%,var(--g1),transparent 62%),radial-gradient(800px 560px at 8% 92%,var(--g2),transparent 58%),linear-gradient(160deg,var(--night),var(--night2))}
.face--ai{--g1:rgba(139,92,246,.5);--g2:rgba(244,114,182,.24)}
.face--sw{--g1:rgba(34,211,238,.34);--g2:rgba(99,102,241,.38)}
.face::before{content:"";position:absolute;left:-25%;right:-25%;bottom:-6%;height:52%;pointer-events:none;
  background-image:linear-gradient(rgba(167,139,250,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.24) 1px,transparent 1px);background-size:68px 68px;
  transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 80%);mask-image:linear-gradient(to top,#000 5%,transparent 80%);animation:floor 7s linear infinite}
.face--sw::before{background-image:linear-gradient(rgba(103,232,249,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.2) 1px,transparent 1px)}
@keyframes floor{to{background-position:0 68px}}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 38% 14%,#fff,transparent),radial-gradient(1px 1px at 64% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 18%,#fff,transparent),radial-gradient(1px 1px at 24% 46%,#fff,transparent),radial-gradient(1px 1px at 52% 38%,#fff,transparent),radial-gradient(1.5px 1.5px at 92% 52%,#fff,transparent),radial-gradient(1px 1px at 6% 66%,#fff,transparent)}
.face>*{position:relative;z-index:1}
.face-copy{max-width:640px}
.face-eyebrow{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:2.6px;text-transform:uppercase;font-weight:600;color:var(--violet-l);margin-bottom:20px}
.face-eyebrow b{font-family:var(--fh);font-size:15px;letter-spacing:0;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:2px 11px}
.face--sw .face-eyebrow{color:var(--cyan)}
.face h1,.face .face-title{font-family:var(--fh);color:#fff;font-size:clamp(36px,min(4.7vw,7.6vh),76px);font-weight:900;line-height:1.02;letter-spacing:-2px;margin-bottom:22px}
.face h1 em,.face .face-title em{font-weight:400;font-style:italic}
.face-lede{font-size:clamp(16px,min(1.5vw,2.4vh),20px);line-height:1.7;color:var(--on-dark-2);max-width:560px;margin-bottom:30px}
.face-actions{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;margin-bottom:26px}
.face-also{font-size:15px;color:var(--on-dark-2)}
.face-chips{display:flex;flex-wrap:wrap;gap:10px}
.face-scene{display:flex;align-items:center;justify-content:center}
.face .rings{width:min(1000px,120vw);height:min(1000px,120vw);right:-18%;top:50%;margin-top:calc(min(1000px,120vw)/-2);opacity:.28}

.splash-top{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px max(6%,calc((100vw - 1240px)/2))}
.splash-brand{font-family:var(--fh);font-size:23px;font-weight:900;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-.3px}
.splash-brand .D{color:var(--violet-l)}
.splash-links{display:flex;align-items:center;gap:6px}
.splash-links a{color:var(--on-dark);text-decoration:none;font-size:14.5px;font-weight:500;padding:9px 15px;border-radius:100px;transition:background .2s}
.splash-links a:hover{background:rgba(255,255,255,.12)}
.splash-links .pill{border:1px solid rgba(255,255,255,.32);margin-left:6px}

.dock{position:absolute;z-index:20;left:0;right:0;bottom:62px;display:flex;justify-content:center;align-items:center;gap:12px;padding:0 5%}
.dock-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;min-width:min(290px,42vw);text-align:left;cursor:pointer;color:var(--on-dark-2);
  padding:14px 20px 17px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(10,6,24,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:15px;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.dock-tab:hover{background:rgba(255,255,255,.1);color:#fff}
.dock-tab[aria-pressed="true"]{color:#fff;border-color:rgba(196,181,253,.6);background:rgba(139,92,246,.22)}
.dock-tab .sm{display:none}
.dock-num{font-family:var(--fh);font-size:15px;color:var(--violet-l)}
.dock-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1)}
.dock-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.dock-tab[aria-pressed="true"] .dock-bar i{animation:fill var(--hold,9s) linear forwards}
.splash.is-hold .dock-bar i,.splash.is-paused .dock-bar i{animation-play-state:paused}
.splash.is-paused .dock-tab[aria-pressed="true"] .dock-bar i{width:100%;animation:none;opacity:.4}
@keyframes fill{from{width:0}to{width:100%}}
.dock-pause{width:48px;height:48px;border-radius:50%;cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(10,6,24,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center}
.dock-pause:hover{background:rgba(255,255,255,.14)}
.dock-pause svg{width:18px;height:18px;fill:currentColor;stroke:none}
.dock-pause .i-play{display:none}
.splash.is-paused .dock-pause .i-play{display:block}
.splash.is-paused .dock-pause .i-pause{display:none}

.splash-foot{position:absolute;z-index:20;left:0;right:0;bottom:0;padding:14px max(6%,calc((100vw - 1240px)/2)) 16px;display:flex;gap:10px 24px;justify-content:space-between;flex-wrap:wrap;font-size:12.5px;line-height:1.5;color:rgba(244,241,255,.62);border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(0deg,rgba(8,6,20,.85),rgba(8,6,20,.3))}
.splash-foot a{color:rgba(244,241,255,.85);text-underline-offset:3px}

/* Flip behaviour needs JavaScript. Without it both sections simply stack. */
.js .splash{height:100vh;height:100svh;min-height:640px;overflow:hidden;perspective:2200px}
.js .splash-scale{position:absolute;inset:0}
.js .flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.25s var(--depth-ease)}
.js .splash[data-side="1"] .flipper{transform:rotateY(180deg)}
.js .face{position:absolute;inset:0;min-height:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.js .face--sw{transform:rotateY(180deg)}
.js .splash.is-flipping .splash-scale{animation:depth 1.25s var(--depth-ease)}
@keyframes depth{0%,100%{transform:scale(1)}45%{transform:scale(.8)}}
.js .face-copy>*{transition:opacity .6s ease .35s,transform .8s ease .35s}
.js .face:not(.is-current) .face-copy>*{opacity:0;transform:translateY(18px)}
.js .face.is-current .face-copy>*:nth-child(2){transition-delay:.45s}
.js .face.is-current .face-copy>*:nth-child(3){transition-delay:.55s}
.js .face.is-current .face-copy>*:nth-child(4){transition-delay:.65s}
.js .face.is-current .face-copy>*:nth-child(5){transition-delay:.75s}
.no-js-hint{display:none}
html:not(.js) .splash-top,html:not(.js) .splash-foot{position:relative}
html:not(.js) .dock{display:none}

/* ---------- 3. DARK HERO (inner pages) ---------- */
.hero-dark{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);padding:clamp(44px,6vw,84px) 0 clamp(56px,7vw,96px);
  background:radial-gradient(900px 560px at 82% 20%,var(--g1,rgba(139,92,246,.5)),transparent 62%),radial-gradient(700px 480px at 5% 100%,var(--g2,rgba(244,114,182,.22)),transparent 58%),linear-gradient(160deg,var(--night),var(--night2))}
.hero-dark--cyan{--g1:rgba(34,211,238,.32);--g2:rgba(99,102,241,.36)}
.hero-dark--gold{--g1:rgba(139,92,246,.45);--g2:rgba(252,211,77,.2)}
.hero-dark::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-8%;height:60%;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(167,139,250,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.2) 1px,transparent 1px);background-size:64px 64px;
  transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 80%);mask-image:linear-gradient(to top,#000 5%,transparent 80%);animation:floor 7s linear infinite}
.hero-dark--cyan::before{background-image:linear-gradient(rgba(103,232,249,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.18) 1px,transparent 1px)}
.hero-dark-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero-dark h1{font-family:var(--fh);color:#fff;font-size:clamp(38px,5.4vw,70px);font-weight:900;line-height:1.04;letter-spacing:-2px;margin-bottom:22px}
.hero-dark h1 em{font-weight:400;font-style:italic}
.hero-dark .lede{color:var(--on-dark-2);max-width:580px}
.hero-dark .crumbs,.hero-dark .crumbs a{color:rgba(244,241,255,.72)}
.hero-dark .hero-actions{margin-top:30px;margin-bottom:24px}
.hero-dark .btn-outline{color:#fff;border-color:rgba(255,255,255,.38)}
.hero-dark .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero-dark .chips-d{display:flex;flex-wrap:wrap;gap:10px}
.hero-dark .scene-wrap{max-width:520px}
.hero-dark--cyan .eyebrow--dark{color:var(--cyan)}

/* Audience band (ideal for / just as welcome) */
.audience{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.aud-card{border-radius:var(--r-lg);padding:clamp(26px,3.2vw,40px);border:1px solid var(--faint);background:#fff;box-shadow:var(--shadow-sm)}
.aud-card--hl{background:linear-gradient(160deg,#fff,var(--purple-xx));border-color:rgba(91,33,182,.22)}
.aud-card h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:10px;letter-spacing:-.4px}
.aud-card>p{color:var(--muted);margin-bottom:18px}
.aud-card .chip{background:var(--cream)}
.aud-card--hl .chip{background:#fff;border-color:rgba(91,33,182,.2)}

/* Generalist / specialist tracks */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.track{border-radius:var(--r-lg);padding:clamp(26px,3.2vw,40px);position:relative;overflow:hidden}
.track--gen{background:#fff;border:1px solid var(--faint);box-shadow:var(--shadow-sm)}
.track--spec{background:linear-gradient(160deg,var(--night),var(--night2));color:var(--on-dark);box-shadow:var(--shadow-lg)}
.track--spec::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 66%);top:-120px;right:-100px}
.track>*{position:relative}
.track h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:10px;letter-spacing:-.5px}
.track--spec h3{color:#fff}
.track>p{color:var(--muted);margin-bottom:18px}
.track--spec>p{color:var(--on-dark-2)}
.track .checks li{font-size:15.5px}
.track--spec .checks li{color:var(--on-dark)}
.track--spec .checks small{color:rgba(244,241,255,.7)}
.track--spec .checks li .icon{background:var(--violet)}
.track-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;border-radius:100px;padding:5px 13px;margin-bottom:14px;background:var(--purple-x);color:var(--purple)}
.track--spec .track-tag{background:rgba(196,181,253,.16);color:var(--violet-l)}
.domains{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 20px}
.domains span{font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--on-dark)}

/* Bridge to the data company offer */
.bridge{border-radius:var(--r-lg);padding:clamp(30px,4.5vw,56px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;color:var(--on-dark);position:relative;overflow:hidden;
  background:radial-gradient(600px 380px at 90% 10%,rgba(34,211,238,.28),transparent 62%),radial-gradient(500px 360px at 0% 100%,rgba(139,92,246,.4),transparent 60%),linear-gradient(160deg,var(--night),var(--night2))}
.bridge h2{color:#fff;font-size:clamp(28px,3.4vw,44px);font-weight:900;letter-spacing:-1.2px;margin-bottom:14px}
.bridge h2 em{font-weight:400;font-style:italic}
.bridge p{color:var(--on-dark-2)}
.bridge .glass{padding:20px 22px}

/* Partners page */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.profile-card{padding:22px}
.profile-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--cyan));display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:700;color:#fff;font-size:18px;flex-shrink:0}
.profile-top b{display:block;font-size:15.5px;color:#fff;font-weight:600}
.profile-top span{font-size:12.5px;color:rgba(244,241,255,.72)}
.stars{display:flex;gap:3px;color:var(--gold)}
.stars svg{width:15px;height:15px;fill:currentColor}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.badges span{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:100px;background:rgba(52,211,153,.16);color:#6EE7B7;border:1px solid rgba(52,211,153,.3)}

/* ---------- 4. RESPONSIVE AND REDUCED MOTION ---------- */
@media (max-width:1040px){
  .pillars{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .face{grid-template-columns:1fr;align-content:center;padding-top:96px}
  .face-scene{display:none}
  .face .rings{right:-45%;opacity:.35}
  .splash-links .hide-sm{display:none}
  .splash-foot span:last-child{display:none}
  .dock{bottom:76px}
  .face{padding-bottom:160px}
  .hero-dark-grid,.audience,.tracks,.bridge{grid-template-columns:1fr}
  .hero-dark .scene-wrap{max-width:440px}
  .dock-tab{min-width:0;flex:1;padding:12px 14px 15px;font-size:13.5px}
  .dock-tab .dock-num{display:none}
}
@media (max-width:680px){
  .pillars{grid-template-columns:1fr}
  .splash-brand{font-size:20px}
  .face{padding-bottom:158px}
  .face-actions .btn{width:100%}
  .face-chips{display:none}
  .face{padding-top:92px}
  .face-eyebrow{font-size:11.5px;letter-spacing:1.8px;margin-bottom:14px}
  .face h1,.face .face-title{margin-bottom:16px}
  .splash-foot{padding-right:88px}
  .dock-tab .lg{display:none}
  .dock-tab .sm{display:inline}
  .splash-foot{font-size:11.5px;padding-top:10px;padding-bottom:12px}
  .splash-foot span:last-child{display:none}
  .dock{bottom:76px;gap:8px}
}
@media (max-height:860px) and (min-width:901px){
  .face-chips{display:none}
}
@media (max-height:700px) and (min-width:901px){
  .face-lede{margin-bottom:20px}
  .face{padding-bottom:132px}
}
@media (max-height:640px) and (max-width:900px){
  .face-lede{display:none}
  .face-chips{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fl,.rings .spin,.rings .spin-r,.face::before,.hero-dark::before,.flow u,.bars i{animation:none!important}
  .js .face:not(.is-current) .face-copy>*{opacity:1;transform:none}
  .scene{transform:none!important}
}

/* splash main wrapper must not inherit the inner page header offset */
.splash-scale{padding-top:0}
.face>.rings{position:absolute;z-index:0}
.track{display:flex;flex-direction:column}
.track .row{margin-top:auto;padding-top:26px}

/* ---------- Intro video on the splash (studio side) ---------- */
.vid-wrap{position:relative;width:100%;max-width:min(580px,92%);margin-inline:auto;padding:26px 0}
.vid-card{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--glass-b);background:rgba(10,6,24,.6);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 8px rgba(255,255,255,.04),0 0 90px rgba(34,211,238,.18);animation:bob 9s ease-in-out infinite}
.vid-ratio{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#0F172A,#1E1B4B)}
.vid-ratio iframe,.vid-play{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{display:block;padding:0;cursor:pointer;background:none;color:#fff;text-decoration:none}
.vid-play img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s,transform .6s}
.vid-play:hover img{opacity:1;transform:scale(1.04)}
.vid-play::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,20,.6),transparent 55%)}
.vid-btn{position:absolute;z-index:2;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#fff;color:#12082B;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(255,255,255,.16),0 16px 40px rgba(0,0,0,.5);transition:transform .25s}
.vid-play:hover .vid-btn{transform:scale(1.08)}
.vid-btn svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.vid-label{position:absolute;z-index:2;left:18px;bottom:14px;right:18px;font-size:13.5px;color:#fff;font-weight:500;text-align:left}
.vid-foot{display:flex;align-items:center;gap:12px;padding:13px 18px;font-size:13.5px;color:var(--on-dark-2);border-top:1px solid rgba(255,255,255,.12);background:rgba(10,6,24,.5)}
.vid-foot .avatar{width:34px;height:34px;font-size:13px}
.vid-foot strong{color:#fff;font-weight:500}
.vid-wrap .fl{z-index:3}
.vid-play:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
@media (max-width:900px){
  .face{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
  .face>.face-copy{margin-top:auto}
  .face--ai>.face-copy{margin-bottom:auto}
  .face>.face-scene.has-video{display:block;margin:28px 0 auto}
  .vid-wrap{max-width:100%;padding:0}
  .vid-wrap .fl{display:none}
  .vid-card{animation:none}
}
@media (max-width:900px){.splash-top{background:linear-gradient(180deg,rgba(8,6,20,.92) 60%,transparent);padding-bottom:18px}}