/* ============================================================
   Digital Sovereignty LP — animated section visuals
   Two-column split layout + 3 self-contained GSAP visuals
   (omni- / vault- / eng- prefixed). Built via workflow.
   ============================================================ */

/* --- Two-column split (visual + text) --- */
.sv-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
    margin-top: 56px;
}
.sv-split__text .sv-features { margin-top: 0; }
.sv-split__list { margin-top: 4px; }
.sv-split--rev .sv-split__viz { order: 2; }
@media (max-width: 991px) {
    .sv-split { grid-template-columns: 1fr; gap: 34px; }
    .sv-split--rev .sv-split__viz { order: 0; }
}

/* ============================================================
   OMNI — Private AI console
   ============================================================ */
.omni-viz {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 360px;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(60,60,255,.08), transparent 60%),
    radial-gradient(110% 90% at 100% 100%, rgba(255,40,60,.05), transparent 55%),
    #191919;
  padding: clamp(12px, 3.5%, 20px);
  display: flex;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
}
.omni-viz * { box-sizing: border-box; }
.omni-window {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  overflow: hidden;
}
.omni-titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02);
}
.omni-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.omni-lock { position: relative; width: 14px; height: 15px; flex: 0 0 auto; display: inline-block; }
.omni-lock-shackle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border: 1.5px solid rgba(255,255,255,.6); border-bottom: none; border-radius: 4px 4px 0 0; }
.omni-lock-body { position: absolute; bottom: 0; left: 0; width: 14px; height: 9px; border-radius: 2px; background: linear-gradient(180deg, hsl(240 100% 65%), hsl(290 100% 60%)); }
.omni-title-text { font-size: 12.5px; font-weight: 600; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omni-dot-sep { color: rgba(255,255,255,.35); }
.omni-status { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(120,255,170,.22); background: rgba(60,220,130,.07); }
.omni-status-dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(150 80% 55%); box-shadow: 0 0 0 0 rgba(70,230,140,.5); }
.omni-status-label { font-size: 10.5px; color: rgba(180,255,210,.85); letter-spacing: .3px; }
.omni-body { padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.omni-msg { display: flex; gap: 8px; align-items: flex-start; }
.omni-avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.omni-avatar-user { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.omni-avatar-ai { background: linear-gradient(135deg, hsl(240 100% 55%), hsl(290 100% 58%)); color: #fff; font-size: 13px; }
.omni-bubble { border-radius: 10px; padding: 8px 11px; font-size: 12.5px; max-width: 100%; }
.omni-bubble-user { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.omni-prompt-text { color: rgba(255,255,255,.85); }
.omni-answer { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1 1 auto; }
.omni-bubble-ai { background: linear-gradient(180deg, rgba(120,110,255,.10), rgba(120,110,255,.04)); border: 1px solid rgba(140,130,255,.14); color: rgba(255,255,255,.92); }
.omni-answer-text { color: rgba(255,255,255,.92); }
.omni-caret { display: inline-block; width: 2px; height: 12px; margin-left: 1px; vertical-align: -2px; background: hsl(290 100% 70%); border-radius: 1px; }
.omni-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.omni-chip-spark { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, hsl(240 100% 60%), hsl(290 100% 60%)); flex: 0 0 auto; }
.omni-chip-model-text { color: rgba(255,255,255,.7); }
.omni-verify { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.omni-verify-label { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.4); }
.omni-agents { display: flex; flex-wrap: wrap; gap: 7px; }
.omni-agent { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); font-size: 11px; }
.omni-agent-name { color: rgba(255,255,255,.72); white-space: nowrap; }
.omni-agent-human { border-color: rgba(120,255,170,.2); background: rgba(60,220,130,.06); }
.omni-agent-human .omni-agent-name { color: rgba(190,255,215,.85); }
.omni-check { position: relative; width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03); display: inline-flex; align-items: center; justify-content: center; }
.omni-check-mark { position: relative; width: 8px; height: 8px; }
.omni-check-mark::before, .omni-check-mark::after { content: ""; position: absolute; background: #fff; border-radius: 1px; transform-origin: left center; }
.omni-check-mark::before { width: 3px; height: 1.6px; left: 0px; top: 5px; transform: rotate(45deg); }
.omni-check-mark::after { width: 7px; height: 1.6px; left: 2px; top: 4px; transform: rotate(-50deg); }
.omni-footer { border-top: 1px solid rgba(255,255,255,.07); padding: 10px 12px; background: rgba(255,255,255,.015); }
.omni-cloud-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.omni-cloud-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(120,255,170,.25); background: rgba(60,220,130,.08); font-size: 11px; color: rgba(200,255,220,.9); flex: 0 0 auto; }
.omni-shield { width: 10px; height: 11px; flex: 0 0 auto; background: hsl(150 75% 55%); clip-path: polygon(50% 0%, 100% 22%, 100% 60%, 50% 100%, 0% 60%, 0% 22%); }
.omni-bytes { font-weight: 700; color: #fff; }
.omni-cloud-dest { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; }
.omni-cloud-pill { padding: 3px 7px; border-radius: 6px; font-size: 10px; color: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); white-space: nowrap; }
.omni-cloud-block { position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; transform: translateY(-50%) scaleX(0); transform-origin: right center; background: hsl(0 100% 60%); border-radius: 2px; box-shadow: 0 0 6px rgba(255,60,70,.5); }
@media (max-width: 400px) { .omni-viz { font-size: 12px; } .omni-cloud-line { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   VAULT — sealed digital vault
   ============================================================ */
.vault-viz{ position:relative; width:100%; max-width:100%; min-height:360px; box-sizing:border-box; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background: radial-gradient(120% 90% at 50% -10%, rgba(90,60,255,.10), transparent 60%), #191919; color:#fff; font-size:12px; line-height:1.2; }
.vault-viz *{box-sizing:border-box;}
.vault-topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); }
.vault-title{ font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.75); }
.vault-status{ display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; border:1px solid rgba(120,255,180,.25); background:rgba(80,255,160,.07); font-size:11px; color:rgba(190,255,215,.9); }
.vault-status-dot{ width:7px;height:7px;border-radius:50%; background:hsl(150 90% 60%); box-shadow:0 0 8px hsl(150 90% 60%); }
.vault-status-text{font-weight:600;letter-spacing:.03em;}
.vault-stage{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:18px 14px 16px; }
.vault-clouds{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; }
.vault-cloud{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:11px; color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); white-space:nowrap; }
.vault-cloud-dot{ width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.3); }
.vault-frame{ position:relative; width:100%; max-width:300px; aspect-ratio:1 / .84; }
.vault-wall{ position:absolute; inset:0; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,.05), transparent 55%), linear-gradient(180deg, #232323, #171717); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 6px rgba(0,0,0,.20); }
.vault-rivet{ position:absolute; width:5px;height:5px;border-radius:50%; background:rgba(255,255,255,.18); }
.vault-rivet--tl{top:9px;left:9px;}
.vault-rivet--tr{top:9px;right:9px;}
.vault-rivet--bl{bottom:9px;left:9px;}
.vault-rivet--br{bottom:9px;right:9px;}
.vault-door{ position:absolute; top:14px;left:14px; width:42%; bottom:14px; border-radius:14px 8px 8px 14px; border:1px solid rgba(255,255,255,.09); background: linear-gradient(120deg, rgba(255,255,255,.04), transparent 60%), linear-gradient(180deg, #262626, #1b1b1b); overflow:hidden; }
.vault-seam{ position:absolute; top:8%;right:6px;bottom:8%; width:2px; border-radius:2px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.5), transparent); }
.vault-dial{ position:absolute; top:50%;left:50%; width:clamp(52px, 34%, 74px); aspect-ratio:1; transform:translate(-50%,-50%); }
.vault-dial-ring{ position:absolute;inset:0;border-radius:50%; border:2px solid rgba(255,255,255,.14); background: conic-gradient(from 0deg, rgba(255,255,255,.05) 0 8%, transparent 8% 12.5%, rgba(255,255,255,.05) 12.5% 20.5%, transparent 20.5% 25%, rgba(255,255,255,.05) 25% 33%, transparent 33% 37.5%, rgba(255,255,255,.05) 37.5% 45.5%, transparent 45.5% 50%, rgba(255,255,255,.05) 50% 58%, transparent 58% 62.5%, rgba(255,255,255,.05) 62.5% 70.5%, transparent 70.5% 75%, rgba(255,255,255,.05) 75% 83%, transparent 83% 87.5%, rgba(255,255,255,.05) 87.5% 95.5%, transparent 95.5% 100%); }
.vault-dial-notch{ position:absolute; top:4px;left:50%; width:3px;height:22%; border-radius:2px; transform:translateX(-50%); background:linear-gradient(180deg, hsl(240 100% 62%), hsl(290 100% 60%)); }
.vault-dial-core{ position:absolute;inset:22%;border-radius:50%; border:1px solid rgba(255,255,255,.16); background:radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), #1e1e1e; display:flex; align-items:center; justify-content:center; }
.vault-lock{ position:relative; width:34%; aspect-ratio:.8; border-radius:2px; background:hsl(150 90% 62%); box-shadow:0 0 8px hsl(150 90% 55%); }
.vault-lock:before{ content:""; position:absolute; left:50%;top:-52%; width:70%;aspect-ratio:1; transform:translateX(-50%); border:2px solid hsl(150 90% 62%); border-bottom:0; border-radius:50% 50% 0 0; }
.vault-tiles{ position:absolute; top:16px;right:16px;bottom:16px; left:50%; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:6px; }
/* labels must fit: tiles are ~52px at the 300px-capped frame, and "Workspace"/"Messaging" overflowed at 10px.
   Widened tiles (left 56%→50%) + 9px + tighter horizontal padding + nowrap so single words never clip. */
.vault-tile{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:6px 4px; border-radius:8px; font-size:9px; line-height:1.15; white-space:nowrap; font-weight:500; color:rgba(255,255,255,.8); border:1px solid rgba(120,180,255,.18); background: radial-gradient(120% 120% at 30% 20%, rgba(120,140,255,.12), transparent 60%), rgba(255,255,255,.03); overflow:hidden; }
.vault-tile-glyph{ width:14px;height:14px;border-radius:4px; background:linear-gradient(135deg, hsl(240 100% 60%), hsl(290 100% 58%)); box-shadow:0 0 10px rgba(120,90,255,.5); }
.vault-shield{ position:absolute; top:0;left:-6%; width:112%;height:100%; pointer-events:none; }
.vault-impact{ position:absolute; top:50%;left:5%; width:34px;height:34px; transform:translate(-50%,-50%); border-radius:50%; border:2px solid hsl(0 100% 60%); opacity:0; }
.vault-arrow{ position:absolute; top:50%;left:0; width:26px;height:3px; border-radius:3px; transform:translate(-40px,-50%); background:linear-gradient(90deg, transparent, hsl(0 100% 62%)); opacity:0; }
.vault-arrow:after{ content:""; position:absolute; right:-2px;top:50%; width:7px;height:7px; transform:translateY(-50%) rotate(45deg); border-top:2px solid hsl(0 100% 62%); border-right:2px solid hsl(0 100% 62%); }
.vault-deny{ position:absolute; top:50%;left:4%; width:20px;height:20px; transform:translate(-50%,-50%); opacity:0; }
.vault-deny-x, .vault-deny-x:before{ position:absolute; top:50%;left:0; width:100%;height:2.5px; border-radius:2px; background:hsl(0 100% 62%); content:""; }
.vault-deny-x{transform:translateY(-50%) rotate(45deg);}
.vault-deny-x:before{transform:rotate(-90deg);}
.vault-caption{ font-size:11px; text-align:center; color:rgba(255,255,255,.42); letter-spacing:.02em; }
@media (max-width:360px){ .vault-viz{min-height:340px;} .vault-title{font-size:11px;} .vault-cloud{padding:4px 8px;font-size:10px;} .vault-caption{font-size:10px;} }

/* ============================================================
   ENG — Sovereign Engine integration diagram
   ============================================================ */
.eng-viz{position:relative;width:100%;max-width:100%;min-height:360px;display:flex;flex-direction:column;box-sizing:border-box;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 100% at 80% 0%,#1c1c1f 0%,#161617 55%,#141415 100%);color:#fff;font-size:13px;line-height:1.2}
.eng-viz *{box-sizing:border-box}
.eng-head{display:flex;align-items:center;gap:8px;padding:14px 16px 8px;flex:0 0 auto}
.eng-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.eng-dot--g{background:linear-gradient(135deg,hsl(240 100% 55%),hsl(290 100% 55%),hsl(0 100% 55%))}
.eng-title{font-size:13px;font-weight:600;letter-spacing:.2px;color:rgba(255,255,255,.9)}
.eng-badge{margin-left:auto;font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:3px 9px}
.eng-stage{position:relative;flex:1 1 auto;min-height:0;padding:2px 8px 4px}
.eng-svg{display:block;width:100%;height:100%;min-height:220px}
.eng-link{stroke:rgba(255,255,255,.10);stroke-width:2}
.eng-spine{stroke:url(#eng-grad2);stroke-width:2}
.eng-flow{fill:hsl(290 100% 65%);filter:drop-shadow(0 0 4px hsla(290,100%,60%,.8))}
.eng-nodebox{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.12);stroke-width:1}
.eng-nodedot{fill:hsl(200 90% 60%)}
.eng-nodetxt{fill:rgba(255,255,255,.82);font-size:12px;font-weight:500;dominant-baseline:middle}
.eng-hubglow{fill:none;stroke:url(#eng-grad);stroke-width:1.5;opacity:.35}
.eng-hubbox{fill:rgba(28,26,40,.9);stroke:rgba(255,255,255,.14);stroke-width:1}
.eng-hubtitle{fill:#fff;font-size:14px;font-weight:700;text-anchor:middle}
.eng-hubsub{fill:rgba(255,255,255,.55);font-size:10.5px;text-anchor:middle;letter-spacing:.3px}
.eng-orchbox{fill:rgba(255,255,255,.06);stroke:hsla(290,100%,60%,.5);stroke-width:1}
.eng-orchdot{fill:hsl(290 100% 65%)}
.eng-orchtxt{fill:rgba(255,255,255,.85);font-size:11px;font-weight:600;text-anchor:middle;dominant-baseline:middle}
.eng-foot{display:flex;flex-wrap:wrap;gap:6px;padding:6px 16px 14px;flex:0 0 auto}
.eng-status{font-size:10px;letter-spacing:.3px;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:3px 9px;display:inline-flex;align-items:center;gap:6px}
.eng-status::before{content:"";width:6px;height:6px;border-radius:50%;background:hsl(140 70% 55%);box-shadow:0 0 6px hsla(140,70%,55%,.7)}
@media (max-width:360px){ .eng-title{font-size:12px} .eng-status{font-size:9px;padding:2px 7px} .eng-badge{font-size:9px} }

/* ============================================================
   THE EXPERIENCE — pinned horizontal showcase (Twitch-Rivals style)
   Default = native horizontal swipe (accessible). .is-pinned (added by JS
   on desktop + motion) = pinned scroll-scrubbed horizontal travel.
   ============================================================ */
.sv-exp { position: relative; background: linear-gradient(180deg,#141414,#0f0f0f); overflow: hidden; }
.sv-exp__row {
    display: flex; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sv-exp__row::-webkit-scrollbar { display: none; }
.sv-exp__panel {
    flex: 0 0 auto; scroll-snap-align: center;
    display: flex; align-items: center;
    min-height: 70vh; padding: 80px clamp(26px,5vw,80px);
}
.sv-exp.is-pinned { height: 100vh; }
.sv-exp.is-pinned .sv-exp__row { overflow: visible; height: 100vh; width: max-content; scroll-snap-type: none; will-change: transform; }
.sv-exp.is-pinned .sv-exp__panel { min-height: 100vh; }

/* intro panel */
.sv-exp__intro-inner { max-width: 60vw; }
.sv-exp__headline { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 10px 0 26px; }
.sv-exp__num { font-family: "Poppins", sans-serif; font-weight: 800; line-height: .88; font-size: clamp(110px,17vw,300px); background: linear-gradient(135deg, hsl(240 100% 62%), hsl(290 100% 64%), hsl(0 100% 62%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sv-exp__num-word { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(34px,6vw,92px); color: #fff; line-height: 1; padding-bottom: clamp(10px,2vw,26px); }
.sv-exp__intro-desc { max-width: 520px; font-size: clamp(16px,1.6vw,21px); line-height: 1.6; color: rgba(255,255,255,.62); margin: 0; }

/* case slide */
.sv-exp__slide { display: flex; align-items: center; gap: clamp(20px,3vw,44px); }
.sv-exp__card { position: relative; flex: 0 0 auto; width: clamp(220px,30vw,410px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.sv-exp__card--blue { background: radial-gradient(120% 120% at 22% 15%, hsl(230 90% 24%), #0c0c14); }
.sv-exp__card--violet { background: radial-gradient(120% 120% at 22% 15%, hsl(285 85% 26%), #120c16); }
.sv-exp__card--pink { background: radial-gradient(120% 120% at 22% 15%, hsl(330 85% 28%), #160c12); }
.sv-exp__blob { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; filter: blur(40px); opacity: .55; background: linear-gradient(135deg, hsl(240 100% 60%), hsl(300 100% 60%)); animation: sv-blob 7s ease-in-out infinite; }
.sv-exp__card--violet .sv-exp__blob { background: linear-gradient(135deg, hsl(280 100% 62%), hsl(330 100% 60%)); animation-delay: -2.3s; }
.sv-exp__card--pink .sv-exp__blob { background: linear-gradient(135deg, hsl(330 100% 62%), hsl(20 100% 60%)); animation-delay: -4.6s; }
@keyframes sv-blob { 0%,100% { transform: translate(-9%,7%) scale(1); } 50% { transform: translate(9%,-7%) scale(1.16); } }
.sv-exp__glyph { position: relative; font-size: clamp(56px,8vw,116px); font-weight: 300; color: rgba(255,255,255,.92); mix-blend-mode: plus-lighter; }
.sv-exp__slide-text { max-width: 300px; }
/* line-height was inheriting the theme's fixed 28px while the font scales to 50px, so the line box
   sat 22px SHORTER than the glyphs — any title that wrapped overlapped itself. Unitless, so it
   tracks the clamp. */
.sv-exp__label { display: inline-block; font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(26px,3.4vw,50px); line-height: 1.02; color: #fff; letter-spacing: -1px; margin-bottom: 18px; }
.sv-exp__region { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: hsl(292 100% 78%); margin: 0 0 12px; }
.sv-exp__desc { font-size: 15px; line-height: 1.6; text-transform: uppercase; letter-spacing: .3px; color: rgba(255,255,255,.72); margin: 0; }

/* progress */
.sv-exp__progress { position: absolute; left: 0; right: 0; bottom: clamp(22px,4vh,52px); pointer-events: none; }
.sv-exp__bar { width: min(520px,64vw); height: 3px; margin: 0 auto; background: rgba(255,255,255,.16); border-radius: 3px; overflow: hidden; }
.sv-exp__bar-fill { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0.06); background: linear-gradient(90deg, hsl(240 100% 60%), hsl(300 100% 60%), hsl(0 100% 60%)); }
.sv-exp__meta { width: min(520px,64vw); margin: 9px auto 0; display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.5); }

@media (max-width: 991px) {
    /* Mobile: no pin, no horizontal scroll — stack the cases vertically */
    .sv-exp, .sv-exp.is-pinned { height: auto; }
    .sv-exp__row,
    .sv-exp.is-pinned .sv-exp__row {
        flex-direction: column;
        width: auto; height: auto;
        overflow: visible;
        transform: none !important;
        scroll-snap-type: none;
        will-change: auto;
    }
    .sv-exp__panel,
    .sv-exp.is-pinned .sv-exp__panel {
        min-height: auto; width: 100%;
        padding: 54px clamp(22px,6vw,44px);
    }
    .sv-exp__intro-inner { max-width: 100%; }
    .sv-exp__slide { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
    /* .sv-exp__metric is a FLEX row, so the slide's `text-align: center` does nothing to it — its
       number + caption stayed flush left inside a full-width row (up to 43px off-centre). Flex
       needs justify-content; wrap + centred caption for the two-line ones like "ROI in 6 months". */
    .sv-exp__metric { justify-content: center; flex-wrap: wrap; row-gap: 4px; }
    .sv-exp__stat-cap { text-align: center; }
    .sv-exp__slide-text { max-width: 460px; }
    .sv-exp__card { width: min(320px, 76vw); }
    .sv-exp__progress { display: none; }
    /* (a `.sv-exp__cue { display:none }` used to sit here — it never applied: the base
       `display:inline-flex` is declared later in the file and won on source order. The cue is
       wanted on mobile anyway, it just has to point the right way — see below.) */
}
@media (prefers-reduced-motion: reduce) {
    .sv-exp__blob { animation: none; }
}

/* scroll cue on the intro panel */
.sv-exp__cue { display: inline-flex; align-items: center; gap: 9px; margin-top: 32px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.42); }
.sv-exp__cue span { display: inline-block; animation: sv-cue 1.6s ease-in-out infinite; }
@keyframes sv-cue { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
/* Below 992px the carousel stops being a pinned horizontal track and stacks into a column, so
   "Scroll to explore →" is pointing the wrong way — the reader scrolls DOWN. Rotating the glyph
   turns the arrow and its nudge together, with no second glyph to keep in sync. */
@media (max-width: 991px) {
    .sv-exp__cue span { transform: rotate(90deg); animation-name: sv-cue-down; }
}
@keyframes sv-cue-down { 0%,100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(7px); } }

/* ====================== use-case scenes ====================== */
/* -- legal_vault -- */
.lv-scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:9%; z-index:2; box-sizing:border-box; container-type:size; }
.lv-scene *{ box-sizing:border-box; }
.lv-doc{ position:relative; width:76%; aspect-ratio:0.82; padding:11% 11% 9%; display:flex; flex-direction:column; gap:6%; border-radius:1.1em; background:linear-gradient(160deg, hsl(0 0% 100% / 0.10), hsl(0 0% 100% / 0.04)); border:1px solid hsl(0 0% 100% / 0.16); box-shadow:0 1.2em 2.4em hsl(240 60% 4% / 0.45), inset 0 1px 0 hsl(0 0% 100% / 0.12); backdrop-filter:blur(2px); overflow:hidden; font-size:clamp(9px, 3.4cqmin, 15px); }
.lv-header{ display:flex; align-items:center; gap:0.6em; }
.lv-header-dot{ width:0.85em; height:0.85em; border-radius:50%; flex:0 0 auto; background:linear-gradient(135deg, hsl(240 100% 60%), hsl(290 100% 60%)); box-shadow:0 0 0.5em hsl(290 100% 60% / 0.45); }
.lv-header-bar{ height:0.6em; width:52%; border-radius:1em; background:hsl(0 0% 100% / 0.55); }
.lv-body{ display:flex; flex-direction:column; gap:0.8em; margin-top:0.4em; }
.lv-line{ height:0.5em; width:100%; border-radius:1em; background:hsl(0 0% 100% / 0.18); }
.lv-line-short{ width:70%; }
.lv-clause{ position:relative; display:block; padding-bottom:0.5em; }
.lv-clause-text{ display:block; height:0.5em; width:88%; border-radius:1em; background:hsl(0 0% 100% / 0.42); }
.lv-clause-underline{ position:absolute; left:0; bottom:0; height:0.28em; width:88%; border-radius:1em; background:linear-gradient(90deg, hsl(240 100% 60%), hsl(290 100% 60%), hsl(330 100% 60%)); box-shadow:0 0 0.6em hsl(290 100% 60% / 0.5); transform-origin:left center; animation:lv-underline 4.5s ease-in-out infinite; }
.lv-scan{ position:absolute; left:0; right:0; top:0; height:26%; pointer-events:none; background:linear-gradient(to bottom, hsl(0 0% 100% / 0) 0%, hsl(200 100% 80% / 0.10) 55%, hsl(290 100% 70% / 0.22) 100%); border-bottom:1px solid hsl(290 100% 75% / 0.55); opacity:0; animation:lv-scan 4.5s cubic-bezier(.5,0,.5,1) infinite; }
.lv-seal{ position:absolute; right:8%; bottom:8%; width:26%; aspect-ratio:1/1.14; display:flex; align-items:center; justify-content:center; clip-path:polygon(50% 0, 100% 22%, 100% 68%, 50% 100%, 0 68%, 0 22%); background:linear-gradient(150deg, hsl(240 100% 60%), hsl(290 100% 60%), hsl(330 100% 60%)); box-shadow:0 0.3em 0.8em hsl(290 80% 20% / 0.55); animation:lv-seal-pulse 3s ease-in-out infinite; }
.lv-seal-check{ display:block; width:34%; height:20%; border-left:0.16em solid hsl(0 0% 100% / 0.95); border-bottom:0.16em solid hsl(0 0% 100% / 0.95); transform:rotate(-45deg) translateY(-15%); }
@keyframes lv-scan{ 0%{ transform:translateY(-30%); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateY(400%); opacity:0; } }
@keyframes lv-seal-pulse{ 0%,100%{ box-shadow:0 0.3em 0.8em hsl(290 80% 20% / 0.55), 0 0 0 hsl(290 100% 60% / 0); } 50%{ box-shadow:0 0.3em 0.8em hsl(290 80% 20% / 0.55), 0 0 0.9em 0.15em hsl(290 100% 65% / 0.55); } }
@keyframes lv-underline{ 0%,18%{ transform:scaleX(0); opacity:0.4; } 32%,82%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:1; } }

/* -- parts_match (authored to spec: static-correct resting state + subtle motion) -- */
.pm-scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:14%; z-index:2; box-sizing:border-box; }
.pm-scene *{ box-sizing:border-box; }
.pm-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:11%; width:100%; aspect-ratio:1; }
.pm-token{ width:100%; height:100%; background:hsl(0 0% 100% / 0.05); border:1px solid hsl(0 0% 100% / 0.16); border-radius:22%; }
.pm-token--circle{ border-radius:50%; }
.pm-token--hex{ border:none; background:hsl(0 0% 100% / 0.09); clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); }
.pm-token--tri{ border:none; background:hsl(0 0% 100% / 0.09); clip-path:polygon(50% 6%,96% 92%,4% 92%); }
.pm-token--query,.pm-token--found{ background:linear-gradient(135deg, hsl(240 100% 62%), hsl(290 100% 62%), hsl(330 100% 62%)); filter:drop-shadow(0 0 .5em hsl(290 100% 60% / 0.55)); }
.pm-token--found{ animation:pm-pulse 3.6s ease-in-out infinite; }
.pm-token--query{ animation:pm-pulse 3.6s ease-in-out infinite .25s; }
.pm-reticle{ position:absolute; left:-2%; right:-2%; top:0; height:15%; border-radius:6px; pointer-events:none; background:linear-gradient(to bottom, hsl(200 100% 80% / 0), hsl(290 100% 70% / 0.16)); border-bottom:1.5px solid hsl(290 100% 78% / 0.7); animation:pm-sweep 3.6s cubic-bezier(.5,0,.5,1) infinite; }
.pm-link{ position:absolute; left:50%; top:83%; width:42%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, hsl(290 100% 60% / 0.4), transparent 65%); filter:blur(4px); }
.pm-check{ position:absolute; left:63%; top:69%; width:17%; aspect-ratio:1; border-radius:50%; background:hsl(150 80% 45%); display:flex; align-items:center; justify-content:center; box-shadow:0 0 .6em hsl(150 80% 50% / 0.6); }
.pm-check-mark{ width:42%; height:24%; border-left:.14em solid #fff; border-bottom:.14em solid #fff; transform:rotate(-45deg) translateY(-10%); }
@keyframes pm-sweep{ 0%{ transform:translateY(-10%); opacity:0; } 10%{ opacity:1; } 66%{ transform:translateY(620%); opacity:1; } 78%,100%{ transform:translateY(620%); opacity:0; } }
@keyframes pm-pulse{ 0%,55%,100%{ filter:drop-shadow(0 0 .5em hsl(290 100% 60% / 0.55)); } 68%,82%{ filter:drop-shadow(0 0 1em hsl(290 100% 66% / 0.9)); } }

/* -- service_ai -- */
.sa-scene{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:9%; box-sizing:border-box; font-size:clamp(10px, 4.2%, 17px); }
.sa-chat{ width:100%; display:flex; flex-direction:column; gap:0.85em; }
.sa-row{ display:flex; align-items:flex-end; gap:0.5em; }
.sa-row--user{ justify-content:flex-end; }
.sa-row--bot{ justify-content:flex-start; }
.sa-avatar{ flex:0 0 auto; width:1.5em; height:1.5em; border-radius:50%; background:linear-gradient(135deg, hsl(240 100% 60%), hsl(290 100% 60%), hsl(330 100% 60%)); box-shadow:0 0 0.6em hsl(290 100% 60% / 0.55); }
.sa-bubble{ box-sizing:border-box; padding:0.75em 0.9em; border-radius:1em; background:hsl(0 0% 100% / 0.07); border:1px solid hsl(0 0% 100% / 0.14); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:flex; flex-direction:column; gap:0.4em; }
.sa-bubble--user{ max-width:72%; border-bottom-right-radius:0.25em; background:hsl(0 0% 100% / 0.1); }
.sa-bubble--bot{ position:relative; min-width:4.5em; max-width:74%; min-height:2.7em; justify-content:center; border-bottom-left-radius:0.25em; background:linear-gradient(hsl(240 100% 60% / 0.1), hsl(330 100% 60% / 0.08)), hsl(0 0% 100% / 0.05); border-color:hsl(275 100% 70% / 0.28); }
.sa-line{ display:block; height:0.42em; border-radius:1em; background:hsl(0 0% 100% / 0.55); }
.sa-line--q1{ width:6.5em; }
.sa-line--q2{ width:4em; background:hsl(0 0% 100% / 0.35); }
.sa-typing{ display:flex; align-items:center; gap:0.4em; }
.sa-dot{ width:0.5em; height:0.5em; border-radius:50%; background:hsl(0 0% 100% / 0.75); animation:sa-blink 3.6s ease-in-out infinite; }
.sa-dot:nth-child(2){ animation-delay:0.18s; }
.sa-dot:nth-child(3){ animation-delay:0.36s; }
.sa-reply{ position:absolute; left:0.9em; right:0.9em; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:0.4em; opacity:0; animation:sa-reply 3.6s ease-in-out infinite; }
.sa-reply .sa-line{ transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg, hsl(240 100% 72%), hsl(290 100% 72%), hsl(330 100% 72%)); animation:sa-grow 3.6s ease-in-out infinite; }
.sa-line--r1{ width:100%; }
.sa-line--r2{ width:62%; animation-delay:0.12s; }
@keyframes sa-blink{ 0%,42%,100%{ opacity:1; transform:translateY(0); } 55%,92%{ opacity:0; } 21%{ opacity:0.35; transform:translateY(-0.12em); } }
@keyframes sa-reply{ 0%,46%{ opacity:0; } 56%,92%{ opacity:1; } 100%{ opacity:0; } }
@keyframes sa-grow{ 0%,48%{ transform:scaleX(0); } 60%,92%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .sv-exp__cue span { animation: none; }
    .lv-scan { animation: none; opacity: 0; }
    .lv-seal { animation: none; }
    .lv-clause-underline { animation: none; transform: scaleX(1); opacity: 1; }
    .pm-reticle { animation: none; opacity: 0; }
    .pm-token--found, .pm-token--query { animation: none; }
    .sa-dot, .sa-reply, .sa-reply .sa-line { animation: none; }
    .sa-typing { display: none; }
    .sa-reply { opacity: 1; }
    .sa-reply .sa-line { transform: scaleX(1); }
}

/* ============================================================
   Engraved medallion — guilloché coin frame + topical emblem
   (use-case card art). Frame is defined once (.gl-defs #gl-frame)
   and referenced per card via <use>; each card recolours it.
   ============================================================ */
.gl-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.gl-scene{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    pointer-events:none;
}
.gl-svg{
    width:86%;
    height:86%;
    overflow:visible;
    filter:drop-shadow(0 0 20px hsl(0 0% 0% / 0.45));
}
.gl-ring{
    fill:none;
    stroke:hsl(0 0% 100% / 0.14);
    stroke-width:0.6;
    vector-effect:non-scaling-stroke;
}
.gl-guilloche{ fill:none; }
.gl-guilloche path{
    stroke-width:0.9;
    opacity:0.7;
    vector-effect:non-scaling-stroke;
}
.gl-emblem{
    fill:none;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.gl-emblem *{ fill:none; vector-effect:non-scaling-stroke; }
/* subtle life: the engraved frame turns slowly; the emblem stays crisp */
.gl-scene use{
    transform-box:view-box;
    transform-origin:center;
    animation:gl-spin 90s linear infinite;
}
@keyframes gl-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
    .gl-scene use{ animation:none; }
}