/* ==========================================================================
   KOCIAL — cinema layer

   The grammar of a cut: bars pinch in, the frame dips, the camera is somewhere
   else when the light comes back. Everything here is transform/opacity only,
   so a transition costs the compositor and nothing else.
   ========================================================================== */

/* ---------- letterbox ---------- */
.cine{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cine__bar{
  position:absolute;left:-2%;right:-2%;height:0;background:#04050a;
  box-shadow:0 0 24px 6px rgba(0,0,0,.8);
  transition:height .42s cubic-bezier(.7,0,.2,1);
  will-change:height;
}
.cine__bar--t{top:0}
.cine__bar--b{bottom:0}
/* a permanent sliver frames the picture; a cut pinches it wide */
.app[data-gl="ready"] .cine__bar{height:1.6%}
.app[data-cut="true"] .cine__bar{height:6%;transition-duration:.32s}

/* ---------- the dip between shots ---------- */
.cine__dip{
  position:absolute;inset:0;background:#04050a;opacity:0;
  transition:opacity .3s ease-out;will-change:opacity;
}
.app[data-cut="true"] .cine__dip{opacity:.28;transition-duration:.22s}

/* ---------- a single frame of flash on a hard beat ---------- */
.cine__flash{
  position:absolute;inset:0;background:#dfeaff;opacity:0;mix-blend-mode:screen;
  transition:opacity .5s ease-out;
}
.app[data-flash="true"] .cine__flash{opacity:.08;transition-duration:.12s}

/* ---------- anamorphic streak + gate weave, only while cutting ---------- */
.cine__streak{
  position:absolute;left:0;right:0;top:50%;height:2px;translate:0 -50%;
  background:linear-gradient(90deg,transparent,rgba(120,190,255,.65),transparent);
  opacity:0;filter:blur(2px);
  transition:opacity .35s ease-out, transform .5s cubic-bezier(.2,0,.1,1);
  transform:scaleX(.2);
}
.app[data-cut="true"] .cine__streak{opacity:.9;transform:scaleX(1);transition-duration:.12s}

/* ---------- slides arrive like a cut, not a scroll ---------- */
.slide{
  transition:opacity .34s cubic-bezier(.4,0,.2,1),
             transform .62s cubic-bezier(.16,1,.3,1),
             filter .42s ease-out,
             visibility .62s;
}
.slide:not([data-active="true"]){filter:blur(3px)}
.slide[data-active="true"]{filter:none}
.slide[data-past="true"]{transform:translate3d(0,-30px,0) scale(.97)}
.slide:not([data-past="true"]):not([data-active="true"]){transform:translate3d(0,34px,0) scale(.97)}

/* the copy inside a slide staggers in like titles */
.slide[data-active="true"] [data-reveal].is-in{
  animation:cine-in .62s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cine-in{
  from{opacity:0;transform:translate3d(0,12px,0);filter:blur(2px)}
  to  {opacity:1;transform:none;filter:none}
}
.slide[data-active="true"] [data-reveal][data-d="1"].is-in{animation-delay:.07s}
.slide[data-active="true"] [data-reveal][data-d="2"].is-in{animation-delay:.14s}
.slide[data-active="true"] [data-reveal][data-d="3"].is-in{animation-delay:.21s}
.slide[data-active="true"] [data-reveal][data-d="4"].is-in{animation-delay:.28s}

/* ---------- the shot slate, bottom-left, like a camera report ---------- */
.slate{
  position:absolute;left:var(--pad);bottom:12px;z-index:19;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  font-family:'Space Grotesk',monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
  opacity:0;transition:opacity .45s var(--ease);
}
.app[data-gl="ready"] .slate{opacity:.55}
.slate i{
  width:6px;height:6px;border-radius:50%;background:#ff3d57;
  box-shadow:0 0 9px #ff3d57;animation:rec 2s steps(2) infinite;
}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.15}}
.slate b{color:var(--accent);font-weight:700}
@media (max-width:900px){ .slate{display:none} }

/* ---------- respect the setting ---------- */
@media (prefers-reduced-motion:reduce){
  .cine__bar,.cine__dip,.cine__flash,.cine__streak{transition:none}
  .app[data-cut="true"] .cine__bar{height:1.6%}
  .app[data-cut="true"] .cine__dip,.app[data-flash="true"] .cine__flash,
  .app[data-cut="true"] .cine__streak{opacity:0}
  .slide{transition:opacity .2s linear,visibility .2s;transform:none !important;filter:none !important}
  .slide[data-active="true"] [data-reveal].is-in{animation:none}
  .slate i{animation:none}
}

/* ==========================================================================
   Filmstrip — a section plays as a sequence of frames, not one still.
   Frames cross-dissolve on a timer with a slow Ken Burns move, so a section
   reads as footage rather than a screenshot with a caption under it.
   ========================================================================== */
.film{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--surface-2) 92%,transparent);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
  aspect-ratio:16/10;
}
.film--tall{aspect-ratio:4/3}

.film__frame{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity .85s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.film__frame[data-on="true"]{opacity:1}
.film__frame img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transform:scale(1.06); transition:transform 5.4s linear;
  will-change:transform;
}
.film__frame[data-on="true"] img{transform:scale(1.0) translate3d(0,-1.4%,0)}

.film__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 15px 13px;
  background:linear-gradient(transparent,rgba(4,5,10,.94));
  font-size:.82rem; font-weight:600; color:#fff; line-height:1.35;
}
.film__cap small{
  display:block; font-weight:500; color:var(--ink-mute); font-size:.72rem;
  margin-top:2px; letter-spacing:.02em;
}

/* the strip of frame ticks, doubling as a progress bar */
.film__ticks{
  position:absolute; top:11px; left:11px; right:11px; z-index:3;
  display:flex; gap:4px;
}
.film__ticks i{
  flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.22);
  overflow:hidden; position:relative;
}
.film__ticks i::after{
  content:''; position:absolute; inset:0; width:0; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.film__ticks i[data-done="true"]::after{width:100%}
.film__ticks i[data-run="true"]::after{width:100%; transition:width 3.4s linear}

/* a running-camera badge, so it reads as playback */
.film__rec{
  position:absolute; top:20px; right:13px; z-index:3;
  display:flex; align-items:center; gap:6px;
  font-family:'Space Grotesk',sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.film__rec::before{
  content:''; width:6px; height:6px; border-radius:50%; background:#ff3d57;
  box-shadow:0 0 8px #ff3d57; animation:rec 2s steps(2) infinite;
}

@media (prefers-reduced-motion:reduce){
  .film__frame{transition:none}
  .film__frame img{transform:none;transition:none}
  .film__ticks i[data-run="true"]::after{transition:none}
  .film__rec::before{animation:none}
}

/* ==================================================== feature band ===
   A wall of real product features that drifts past the camera. The point
   is density: you should register "there are dozens of these" before you
   read a single label. Each lane holds its chips twice and travels exactly
   -50%, which is what makes the loop seamless — change one without the
   other and it visibly jumps.

   Everything moves on transform only, so the lanes composite on the GPU
   and never touch layout. Pointer or keyboard inside the band stops all
   of it, because a moving target you cannot click is hostile.
   =================================================================== */
.band{
  display:grid; gap:10px; width:100%; min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.band__row{ overflow:hidden; min-width:0; }
.band__track{
  display:flex; gap:10px; width:max-content;
  animation:band-drift var(--dur,58s) linear infinite;
  will-change:transform;
}
.band__row[data-rev="1"] .band__track{ animation-direction:reverse; }
.band__half{ display:contents; }

/* Halt on any intent to interact — hover, or a tab into a chip. */
.band:hover .band__track,
.band:focus-within .band__track{ animation-play-state:paused; }

@keyframes band-drift{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

.feat{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:9px 15px 9px 10px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  text-decoration:none; color:var(--ink);
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.feat__i{
  display:grid; place-items:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:9px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent);
  transition:background .22s ease, box-shadow .22s ease;
}
.feat__i svg{ width:19px; height:19px; display:block; }
.feat__t{
  display:flex; flex-direction:column; line-height:1.25;
  font-size:var(--t-sm); font-weight:600; white-space:nowrap;
}
.feat__t small{
  font-size:var(--t-xs); font-weight:400; color:var(--ink-dim);
  letter-spacing:.01em;
}
.feat:hover,.feat:focus-visible{
  background:rgba(255,255,255,.075);
  border-color:color-mix(in srgb, var(--accent) 48%, var(--line));
  transform:translateY(-2px);
}
.feat:hover .feat__i{
  background:color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow:0 0 18px -4px var(--accent);
}

/* ------------------------------------------------------- the tally --- */
.tally{ display:flex; flex-wrap:wrap; gap:26px 40px; }
.tally__i{ display:flex; flex-direction:column; gap:2px; }
.tally__i b{
  font-size:clamp(28px,4.4vw,46px); font-weight:700; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.tally__i span{ font-size:var(--t-xs); color:var(--ink-dim); letter-spacing:.06em; text-transform:uppercase; }

/* ------------------------------------------------------- restraint --- */
@media (max-width:620px){
  .feat{ padding:7px 12px 7px 8px; gap:8px; }
  .feat__i{ width:29px; height:29px; border-radius:8px; }
  .feat__i svg{ width:16px; height:16px; }
  .band{ gap:8px; }
  .band__track{ gap:8px; }
}

/* Motion here is decorative. If it is unwelcome, the wall still has to
   read as a wall — so it stops and wraps instead of disappearing. */
@media (prefers-reduced-motion:reduce){
  .band{ -webkit-mask-image:none; mask-image:none; }
  .band__row{ overflow:visible; }
  .band__track{ animation:none; flex-wrap:wrap; width:100%; }
  .band__half[data-dup]{ display:none; }
}

/* Block-flow siblings inside a slide, so they carry their own rhythm. */
.tally{ margin-bottom:clamp(14px,2.2vh,24px); }

/* ------------------------------------------------- the report shelf ---
   Named products with real prices beat a wall of one-word tags. */
.shelf{ display:grid; gap:7px; }
.shelf__i{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 13px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  text-decoration:none; color:var(--ink);
  transition:background .2s ease, border-color .2s ease;
}
.shelf__i:hover,.shelf__i:focus-visible{
  background:rgba(255,255,255,.07);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
}
.shelf__t{ display:flex; flex-direction:column; gap:1px; font-size:var(--t-sm); font-weight:600; min-width:0; }
.shelf__t small{ font-size:var(--t-xs); font-weight:400; color:var(--ink-dim); }
/* Was a price. Now it is the ask, so it needs to read as an affordance. */
.shelf__p{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:var(--t-xs); font-weight:700; color:var(--accent);
}
.shelf__p svg{ width:14px; height:14px; }

/* ================================================= services & plans ===
   The agency division sells two different shapes of thing — done-for-you
   engagements and a self-serve platform — so the page needs a numbered
   walkthrough, a price table and a contact matrix that does not read as a
   wall. All three share the slide's accent and stay inside the viewport.
   =================================================================== */

/* A strip of what the practice actually sells, above the detail. */
.crafts{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0;
         margin:0 0 clamp(12px,2vh,20px); }
.crafts li{
  font-size:var(--t-xs); padding:5px 11px; border-radius:8px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  color:var(--ink);
}

/* ------------------------------------------------ numbered walkthrough --- */
.steps{ display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.steps__i{
  display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:start; gap:14px;
  padding:14px 16px; border-radius:13px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
}
.steps__n{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.08em;
  color:var(--accent); padding-top:9px; font-variant-numeric:tabular-nums;
}
.steps__ico{
  display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
}
.steps__ico svg{ width:20px; height:20px; }
.steps__b{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.steps__b b{ font-size:1rem; }
.steps__b span{ font-size:var(--t-sm); color:var(--ink-dim); }

/* ------------------------------------------------------------- plans --- */
.plans{
  display:grid; gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr));
}
.plan{
  position:relative; display:flex; flex-direction:column; gap:7px; min-width:0;
  padding:18px 17px; border-radius:15px;
  border:1px solid var(--line); background:rgba(255,255,255,.035);
}
.plan--pop{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 7%, rgba(255,255,255,.035));
}
.plan__flag{
  position:absolute; top:-9px; left:17px;
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px; border-radius:6px; background:var(--accent); color:#05070c;
}
.plan__tag{ font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); }
.plan__n{ font-size:1.04rem; }
.plan__p{ display:flex; align-items:baseline; gap:3px; }
.plan__p b{ font-size:clamp(26px,3.4vw,36px); line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.plan__p span{ font-size:var(--t-xs); color:var(--ink-dim); }
.plan__w{ font-size:var(--t-xs); color:var(--ink-dim); }
.plan__h{
  font-size:.63rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); margin-top:5px; padding-top:9px; border-top:1px solid var(--line);
}
.plan__keys,.plan__f{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.plan__keys li,.plan__f li{
  font-size:var(--t-xs); color:var(--ink-dim);
  padding-left:15px; position:relative;
}
.plan__keys li{ color:var(--ink); font-weight:600; }
.plan__keys li::before,.plan__f li::before{
  content:''; position:absolute; left:2px; top:.52em;
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75;
}

.terms{
  display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; padding:0;
  margin:clamp(11px,1.8vh,16px) 0 0; font-size:var(--t-xs); color:var(--ink-dim);
}
.terms li{ position:relative; padding-left:15px; }
.terms li::before{
  content:''; position:absolute; left:0; top:.42em; width:8px; height:8px;
  border-radius:50%; border:1.6px solid var(--accent);
}

/* ------------------------------------------------- the contact matrix --- */
.reasons{
  display:grid; gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,292px),1fr));
}
.reason{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.reason__h{ display:flex; align-items:center; gap:10px; }
.reason__i{
  display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px;
  border-radius:9px; background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent);
}
.reason__i svg{ width:18px; height:18px; }
.reason__h h3{ font-size:.98rem; }
.reason__l{ list-style:none; padding:0; margin:0; display:grid; gap:6px; flex:1 1 auto; }
.reason__l li{
  font-size:var(--t-xs); color:var(--ink-dim); line-height:1.5;
  padding-left:14px; position:relative;
}
.reason__l li::before{
  content:''; position:absolute; left:1px; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.6;
}
.reason__a{
  display:flex; align-items:center; gap:8px; margin-top:auto;
  padding:9px 12px; border-radius:10px; text-decoration:none;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--ink); font-size:var(--t-xs); font-weight:600;
  transition:background .2s ease, border-color .2s ease;
}
.reason__a svg{ width:15px; height:15px; flex:0 0 auto; }
.reason__a span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.reason__a:hover,.reason__a:focus-visible{
  background:rgba(255,255,255,.08);
  border-color:color-mix(in srgb, var(--accent) 48%, var(--line));
}

@media (max-width:620px){
  .steps__i{ grid-template-columns:auto minmax(0,1fr); gap:11px; padding:12px 13px; }
  .steps__n{ grid-column:1 / -1; padding-top:0; }
  .plan{ padding:15px 14px; }
}

/* ------------------------------------------------- pricing by request ---
   The plan card used to end in a number. It now ends in a conversation,
   so the CTA has to carry the weight the price used to. */
.plan__cta{
  display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:12px;
  padding:9px 12px; border-radius:10px; text-decoration:none;
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  color:var(--ink); font-size:var(--t-xs); font-weight:700;
  transition:background .2s ease, border-color .2s ease;
}
.plan__cta svg{ width:15px; height:15px; flex:0 0 auto; }
.plan__cta span{ flex:1 1 auto; }
.plan__cta:hover,.plan__cta:focus-visible{
  background:color-mix(in srgb, var(--accent) 20%, transparent);
  border-color:var(--accent);
}
.plan{ gap:8px; }
.plan__f{ margin-bottom:12px; }

/* ------------------------------------------------------- testimonials ---
   Review, then the person and their role. Nothing else on the card. */
.quotes{
  display:grid; gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
}
.quote{ display:flex; flex-direction:column; gap:9px; min-width:0; margin:0; }
.quote__s{ color:var(--accent); font-size:.8rem; letter-spacing:.16em; line-height:1; }
.quote__h{ font-size:1rem; line-height:1.3; }
.quote__q{
  margin:0; font-size:var(--t-sm); line-height:1.6; color:var(--ink-dim);
  padding-left:12px; border-left:2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.quote__c{
  display:flex; flex-direction:column; gap:1px; margin-top:auto;
  padding-top:11px; border-top:1px solid var(--line); font-style:normal;
}
.quote__by{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.quote__by b{ font-size:var(--t-sm); letter-spacing:.02em; }
.quote__by i{ font-style:normal; color:var(--ink-dim); opacity:.6; }
.quote__by span{ font-size:var(--t-xs); color:var(--ink-dim); }
.quote__c time{ font-size:.66rem; color:var(--ink-dim); opacity:.7; margin-top:2px; }

/* The last section offers the next page; navigation waits for visitor input. */
.tour{
  position:fixed; z-index:40; left:50%; bottom:clamp(76px,11vh,112px);
  transform:translate(-50%,14px);
  display:flex; align-items:center; gap:12px;
  padding:10px 16px 10px 11px; border-radius:14px;
  text-decoration:none; color:var(--ink);
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background:color-mix(in srgb, #05070c 82%, var(--accent) 18%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 40px -16px #000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .34s ease, transform .34s ease, visibility .34s;
}
.tour[data-on="true"]{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.tour:hover,.tour:focus-visible{ border-color:var(--accent); }

.tour__t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tour__t small{
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.tour__t b{
  font-size:var(--t-sm); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:min(52vw,300px);
}
.tour__a{ width:17px; height:17px; flex:0 0 auto; color:var(--accent); }

/* the crossing itself — a short dip, so the route change reads as a cut */
html[data-leaving] .app{
  transition:opacity .26s ease, transform .26s ease;
  opacity:0;
}
html[data-leaving="fwd"]  .app{ transform:translateY(-14px); }
html[data-leaving="back"] .app{ transform:translateY(14px); }

@media (max-width:620px){
  .tour{ bottom:clamp(68px,10vh,96px); padding:8px 13px 8px 9px; gap:9px; }
  .tour__t b{ max-width:46vw; }
}

@media (prefers-reduced-motion:reduce){
  .tour{ transition:opacity .01s; }
  html[data-leaving] .app{ transition:none; opacity:1; transform:none; }
}

/* A readable foreground over the moving town. */
.slide__in > .stack,
.s-split > .stack{
  padding:clamp(18px,2.2vw,30px);
  border:1px solid rgba(177,204,255,.13);
  border-radius:22px;
  background:linear-gradient(125deg,rgba(9,18,36,.90),rgba(9,18,36,.70));
  box-shadow:0 20px 70px -30px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.slide__in > .stack{margin-block:6px}
.slide__in > .s-head{
  width:fit-content;max-width:100%;padding:16px 22px;border-radius:18px;
  background:linear-gradient(100deg,rgba(9,18,36,.91),rgba(9,18,36,.64));
  border:1px solid rgba(177,204,255,.10);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.slide .lead{line-height:1.65;font-size:clamp(1rem,1.3vw,1.12rem)}
.slide .dcard{
  border-color:color-mix(in srgb,var(--accent) 26%,rgba(177,204,255,.13));
  box-shadow:0 20px 48px -26px #000,inset 0 1px rgba(255,255,255,.06);
  transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s;
}
.slide .dcard:hover{
  transform:translateY(-5px);border-color:var(--accent);
  box-shadow:0 20px 50px -25px var(--accent-glow);
}
.dcard__num{letter-spacing:.08em}
.slide .stat{padding:15px 10px;background:rgba(12,25,47,.6)}
.stat b{font-size:clamp(1.5rem,2.6vw,2rem);background:none;color:var(--ink)}
.stat b span{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;margin:0}
.stat > span{font-size:.64rem;letter-spacing:.06em;color:var(--ink-dim)}
.film{border-radius:20px;border-color:rgba(177,204,255,.28);box-shadow:0 28px 80px -24px #000}
.film__cap{padding:40px 20px 18px;background:linear-gradient(transparent,rgba(5,12,26,.98));font-size:.95rem}
.film__cap small{font-size:.8rem;color:var(--ink-dim)}
.film__rec{padding:5px 9px;background:rgba(5,12,26,.8);border-radius:20px;letter-spacing:.1em}
.rail__b[aria-current="true"] span{
  padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:rgba(5,12,26,.88);
}
.tour__t em{font-style:normal;font-size:.72rem;color:var(--ink-dim);margin-top:3px}
.slate{left:auto;right:var(--pad);bottom:84px;letter-spacing:.10em}

/* Keep the homepage world visible; metrics are supporting detail. */
.slide__in > .home-intro{
  background:none;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.home-intro h1,.home-intro .lead{text-shadow:0 2px 16px rgba(0,0,0,.65)}
.home-intro .grad{text-shadow:none}
.app:not([data-play="on"]):has(#hero[data-active="true"]) .app__wash{opacity:.62}
#hero .home-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  border:0;border-top:1px solid rgba(190,210,235,.16);border-radius:0;
  padding-top:12px;background:none;box-shadow:none;
}
#hero .home-stats .stat{
  padding:0;background:none;text-align:left;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
#hero .home-stats b{font-size:1.05rem;font-weight:500;color:var(--ink-dim)}
#hero .home-stats .stat > span{
  margin-top:3px;font-size:.68rem;letter-spacing:0;text-transform:none;color:var(--ink-dim);
}
@media (max-width:620px){
  .slide__in > .stack,.s-split > .stack{padding:20px 17px;border-radius:18px}
  .slide__in > .s-head{padding:15px 17px}
  .slide .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slide .stat{padding:12px 8px}
  #hero .home-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
  .slide .lead{font-size:.97rem;line-height:1.65}
  .tour{bottom:110px;max-width:calc(100vw - 32px)}
  .film__cap{font-size:.83rem;padding:32px 14px 12px}
  .film__cap small{font-size:.73rem}
}
@media (prefers-reduced-motion:reduce){
  .slide .dcard:hover{transform:none}
}