/* ===========================================================================
   slides.css · per-scene composition
   Every scene sits on the shared earth backdrop; panels are glass so the
   planet keeps reading through the interface.
   =========================================================================== */

/* ===========================================================================
   01 · COVER
   =========================================================================== */
/* above the video plate: both used to sit at z-index 4 and the plate comes
   later in the DOM, so its faint outer wash was painting over the headline */
.cover-copy{position:absolute;left:112px;top:0;bottom:0;width:930px;
  display:flex;flex-direction:column;justify-content:center;gap:0;z-index:6}
.cover-agency{display:flex;align-items:center;margin-bottom:58px}
.cover-agency div{font-size:16.5px;line-height:1.72;font-weight:600;letter-spacing:1.1px;
  color:var(--ink-2);text-transform:uppercase}
.cover-agency div b{display:block;font-size:23px;line-height:1.34;font-weight:700;color:#fff;
  letter-spacing:.2px;margin-top:12px}

.cover-copy h1{margin:0;font-size:57px;line-height:1.22;font-weight:700;letter-spacing:-.6px;color:#fff;
  text-transform:uppercase;
  filter:drop-shadow(0 10px 60px rgb(20 70 160 / .5))}
.cover-rule{width:180px;height:2px;margin:46px 0;border:0;
  background:linear-gradient(90deg,var(--blue-2),rgb(93 164 255 / 0))}

.cover-presenter{display:flex;align-items:center;gap:20px}
/* Square with rounded corners, holding the presenter's portrait. The initials
   stay underneath as the fallback: if assets/img/presenter.jpg is not supplied,
   deck.js drops the <img> and the monogram shows instead. */
.cover-presenter .cover-av{position:relative;width:78px;height:78px;border-radius:22px;flex:none;
  overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1;
  font-size:24px;font-weight:700;letter-spacing:.5px;color:#dceaff;
  background:linear-gradient(140deg,rgb(47 123 255 / .55),rgb(47 209 165 / .40));
  border:1px solid var(--line-2);box-shadow:0 12px 44px -10px rgb(30 90 200 / .8)}
.cover-presenter .cover-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-presenter>div>b{display:block;font-size:25px;font-weight:650;color:#fff;letter-spacing:-.2px}
/* the role is the second line of the introduction, not a footnote — it was set
   in the dimmest ink and read as background chatter. Scoped with > so it cannot
   reach the avatar, which is also a <span> inside .cover-presenter. */
.cover-presenter>div>span{display:block;font-size:19.5px;font-weight:450;
  color:var(--ink-2);margin-top:8px;letter-spacing:-.1px}

/* The agency video, sitting in shadow. It is a square plate whose four edges
   dissolve into the background, so no frame is ever drawn — the eye reads
   moving darkness rather than a bordered video.
   The mask has to be applied to the <video> itself as well as its wrapper:
   Chromium composites video on its own layer and can ignore an ancestor mask,
   the same way it ignores an ancestor clip-path. */
.cover-orb{position:absolute;right:-260px;top:50%;width:1380px;height:1380px;margin-top:-690px;z-index:4;
  /* pushed right as it grew: the falloff has to clear the headline, whose
     longest line ends at x=939 on the 1920 canvas */
  /* reaches nothing well inside the box, so the plate's faint outer wash
     never creeps under the headline on the left */
  --soft-round:radial-gradient(closest-side,#000 0%,#000 42%,rgb(0 0 0 / .34) 64%,transparent 86%)}
.cover-orb-shade{position:absolute;inset:-12%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(2 8 22 / .95),rgb(2 8 22 / 0) 72%);filter:blur(40px)}
.cover-orb-disc{position:absolute;inset:0;overflow:hidden;isolation:isolate}
/* A circular plate whose rim dissolves: one radial mask carries it to nothing
   well before the clip, and the overlay below takes the content to the
   background colour on the way out, so no edge is ever drawn. Mask and radius
   both go on the <video> too — Chromium composites it on its own layer and
   ignores an ancestor's clip or mask. */
.cover-orb-disc,
.cover-orb-disc video{
  border-radius:50%;
  -webkit-mask-image:var(--soft-round);
  mask-image:var(--soft-round)}
.cover-orb-disc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.30) brightness(.70) contrast(1.35) hue-rotate(-14deg)}
.cover-orb-disc::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,rgb(6 20 48 / .05) 0%,rgb(3 11 28 / .62) 42%,rgb(1 5 16 / 1) 82%)}
.cover-orb-mark{position:absolute;left:50%;top:50%;width:440px;z-index:3;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 12px 48px rgb(0 8 26 / .95));
  animation:orbfloat 9s var(--ease-soft) infinite alternate}
@keyframes orbfloat{from{transform:translate(-50%,-50%)}to{transform:translate(-50%,calc(-50% - 15px))}}

/* ===========================================================================
   02 · LEGACY — where we started
   The retired platform's browser mock is gone; the five areas that were studied
   are cards now, and the research figure holds its own full-height panel.
   =========================================================================== */
/* a longer title, and it is scaled up while it holds centre frame */
.slide.has-titlecard .head h2{font-size:52px;letter-spacing:-1.2px}

.lg-stat{position:absolute;left:0;top:0;bottom:0;width:472px;padding:54px 48px;border-radius:26px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:
    linear-gradient(158deg,rgb(8 26 62 / .58) 0%,rgb(4 13 32 / .74) 46%,rgb(2 8 22 / .86) 100%),
    url('img/earth-wide.jpg') 56% 86% / cover no-repeat;
  border:1px solid var(--line-2);
  box-shadow:0 30px 90px -32px rgb(0 8 28 / .95)}
.lg-logo{position:absolute;left:48px;top:44px;width:232px;height:auto;
  filter:drop-shadow(0 8px 26px rgb(0 8 26 / .9))}
.lg-tag{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:700;
  letter-spacing:2.6px;color:var(--blue-3);text-transform:uppercase}
.lg-tag svg{width:22px;height:22px;flex:none}
.lg-fig{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:30px 0 0}
.lg-fig strong{font-size:132px;line-height:.9;font-weight:750;letter-spacing:-4.8px;color:#fff}
.lg-fig span{font-size:66px;line-height:1.02;font-weight:500;color:var(--ink-2);letter-spacing:-2px}

.lg-grid-label{position:absolute;left:520px;top:-2px;margin:0;
  font-size:13px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--ink-4)}
.lg-grid{position:absolute;left:520px;right:0;top:36px;bottom:0;
  display:flex;flex-direction:column;gap:14px}
/* one full-width row per area: the icon is pinned to the left of each card and
   the title runs beside it, so the rows stay short and the icons stay large */
.lg-card{flex:1;position:relative;overflow:hidden;border-radius:20px;
  padding:0 170px 0 168px;display:flex;align-items:center;
  background:rgb(9 20 44 / .52);border:1px solid var(--line);backdrop-filter:blur(22px);
  box-shadow:0 20px 60px -34px rgb(0 6 22 / .9)}
.lg-card::before{content:'';position:absolute;left:28px;right:28px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgb(150 200 255 / .45),transparent)}
/* the accent reads as a wash from the pinned icon rather than a boxed tile */
.lg-card::after{content:'';position:absolute;left:-40px;top:50%;width:280px;height:280px;
  margin-top:-140px;border-radius:50%;
  background:radial-gradient(closest-side,var(--accent,var(--blue)) 0%,transparent 70%);
  opacity:.15;pointer-events:none}

/* a band of light travelling across the glass, offset per row so it reads as
   one light moving down the list rather than five separate flashes */
.lg-card .sheen,.ai-card .sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.lg-card .sheen::after,.ai-card .sheen::after{content:'';position:absolute;top:-60%;bottom:-60%;width:24%;left:-45%;
  background:linear-gradient(100deg,transparent,rgb(175 218 255 / .17),transparent);
  transform:skewX(-16deg);filter:blur(7px)}
.slide.is-in .lg-card .sheen::after,
.slide.is-in .ai-card .sheen::after{animation:lg-sheen 6.2s var(--ease-soft) var(--sd,0ms) infinite}
@keyframes lg-sheen{0%{left:-45%}38%{left:125%}100%{left:125%}}

/* the pinned icons breathe, gently and out of phase with one another */
.slide.is-in .lg-card .ico{animation:lg-icon 5.6s var(--ease-soft) var(--sd,0ms) infinite}
@keyframes lg-icon{
  0%,100%{filter:drop-shadow(0 10px 30px rgb(0 8 26 / .9))}
  50%    {filter:drop-shadow(0 10px 30px rgb(0 8 26 / .9)) drop-shadow(0 0 16px var(--accent,var(--blue)))}
}

/* and the planet behind the figure drifts, the way the deck's backdrop does */
.slide.is-in .lg-stat{animation:lg-drift 34s var(--ease-soft) infinite alternate}
@keyframes lg-drift{
  from{background-position:0 0,53% 89%}
  to  {background-position:0 0,61% 81%}
}

.lg-card-top{display:contents}
.lg-card .ico{position:absolute;left:34px;top:50%;transform:translateY(-50%);
  color:var(--accent,var(--blue));filter:drop-shadow(0 10px 30px rgb(0 8 26 / .9))}
.lg-card .ico svg{width:96px;height:96px;stroke-width:1.1}
/* How much feedback fell into this category. It counts up as its card lands,
   which is why it is a data-count rather than literal text. */
.lg-card .num{position:absolute;top:50%;right:34px;transform:translateY(-50%);pointer-events:none;
  font-family:'Geist','Alex',sans-serif;
  font-size:66px;line-height:1;font-weight:800;letter-spacing:-3px;
  color:rgb(198 226 255 / .72);font-variant-numeric:tabular-nums;
  text-shadow:0 10px 36px rgb(4 14 38 / .95)}
.lg-card .lg-body{display:flex;flex-direction:column;gap:15px;width:100%}
.lg-card b{font-size:26px;font-weight:600;line-height:1.28;letter-spacing:-.4px;color:#fff}

/* Each category's share of all the feedback, on a traffic-light scale. The
   track is the whole 192, so a bar's length and its percentage say the same
   thing — read one or the other, they cannot disagree. It fills off the card's
   own --at, so the bar arrives with the card rather than on its own clock. */
.lg-card .lg-bar{display:flex;align-items:center;gap:18px;width:100%}
.lg-card .lg-bar i{flex:1;position:relative;height:6px;border-radius:999px;overflow:hidden;
  background:rgb(130 175 245 / .13)}
.lg-card .lg-bar i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,rgb(255 255 255 / .30),var(--lvl));
  box-shadow:0 0 16px -3px var(--lvl);
  transition:width 1150ms var(--ease) calc(var(--at,0ms) + 420ms)}
.slide.is-in .lg-card .lg-bar i::after{width:var(--p,0%)}
#deck.is-still .lg-card .lg-bar i::after{width:var(--p,0%);transition:none!important}
.lg-card .lg-bar em{font-style:normal;font-family:'Geist','Alex',sans-serif;
  font-size:19px;font-weight:700;letter-spacing:.3px;color:var(--lvl);
  min-width:52px;text-align:right;font-variant-numeric:tabular-nums}

.lg-card.lv-hi{--lvl:var(--rose)}
.lg-card.lv-mid{--lvl:var(--amber)}
.lg-card.lv-lo{--lvl:var(--teal)}
.lg-card.c1{--accent:var(--blue-2)}
.lg-card.c2{--accent:var(--amber)}
.lg-card.c3{--accent:var(--teal)}
.lg-card.c4{--accent:var(--violet)}
.lg-card.c5{--accent:var(--rose)}

/* ===========================================================================
   03 · STATEMENT — everything changed
   =========================================================================== */
.st{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;z-index:4}
.st-pill{display:inline-flex;align-items:center;gap:20px;padding:13px 28px;border-radius:999px;
  font-size:19px;font-weight:600;letter-spacing:.4px;margin-bottom:56px;
  background:rgb(8 20 44 / .62);border:1px solid var(--line-2);backdrop-filter:blur(18px)}
.st-pill .old{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgb(255 107 129 / .55)}
.st-pill .new{color:#fff}
.st-pill .arw{width:34px;height:1px;background:var(--line-3);position:relative}
.st-pill .arw::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--line-3);border-right:1px solid var(--line-3);transform:rotate(45deg)}
.st h2{margin:0;font-size:82px;line-height:1.14;font-weight:800;letter-spacing:-1.6px;color:#fff;
  text-transform:uppercase;max-width:1500px;filter:drop-shadow(0 14px 70px rgb(16 60 150 / .6))}
.st-sub{margin:44px 0 0;font-size:28px;line-height:1.5;color:var(--ink-sub);max-width:960px}

/* One line, four phrases, two seconds each. It is a CSS loop rather than a JS
   timer so it restarts with the scene, holds when the deck is paused, and has
   no state to leak. The whole cycle waits for the heading's own --at, or the
   first phrase would already be half over by the time the heading arrives. */
.st-cycle{position:relative;display:block;width:100%;height:1.14em}
/* Each phrase is filled with a moving highlight rather than flat white, so a
   band of light travels across the words while they hold. Two animations on one
   element: the swap owns opacity/transform, the shine owns background-position,
   and they never touch the same property — which is why the shorthand can carry
   both without either being cancelled. */
.st-cycle span{position:absolute;left:0;right:0;top:0;
  opacity:0;transform:translate3d(0,26px,0);filter:blur(8px);
  background-image:var(--shine);background-size:300% 100%;background-position:160% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.slide.is-in .st-cycle span{
  animation:st-cycle 8s var(--ease) var(--at,0ms) infinite,
            st-shine 8s linear var(--at,0ms) infinite}
@keyframes st-shine{0%{background-position:150% 0}34%{background-position:-40% 0}100%{background-position:-40% 0}}
.slide.is-in .st-cycle span:nth-child(2){animation-delay:calc(var(--at,0ms) + 2s)}
.slide.is-in .st-cycle span:nth-child(3){animation-delay:calc(var(--at,0ms) + 4s)}
.slide.is-in .st-cycle span:nth-child(4){animation-delay:calc(var(--at,0ms) + 6s)}
@keyframes st-cycle{
  0%  {opacity:0;transform:translate3d(0,26px,0);filter:blur(8px)}
  3%  {opacity:1;transform:none;filter:blur(0)}
  25% {opacity:1;transform:none;filter:blur(0)}
  28% {opacity:0;transform:translate3d(0,-22px,0);filter:blur(8px)}
  100%{opacity:0;transform:translate3d(0,-22px,0);filter:blur(8px)}
}
/* a still frame shows the first phrase rather than whatever the loop was mid-way through */
#deck.is-still .st-cycle span{animation:none!important;opacity:0}
#deck.is-still .st-cycle span:first-child{opacity:1;transform:none;filter:none}

/* concentric arcs sweeping out of the corner */
.st-arcs{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.85}
.st-arcs circle{fill:none;stroke:rgb(120 190 255 / .22);stroke-width:1.2}

/* ===========================================================================
   04 · REVEAL — Atlas 2.0
   =========================================================================== */
.rv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:4}
.rv-badge{position:relative;width:300px;height:300px;margin-bottom:56px;display:grid;place-items:center}
.rv-badge img{width:210px;filter:drop-shadow(0 16px 60px rgb(0 10 34 / .9))}
.rv-halo{position:absolute;inset:-70px;border-radius:50%;
  background:radial-gradient(circle,rgb(47 123 255 / .40),transparent 66%);filter:blur(24px)}
.rv-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgb(140 195 255 / .40)}
.rv-ring::after{content:'';position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--sky);box-shadow:0 0 18px 4px var(--glow-cyan)}
.rv h2{margin:0;font-size:118px;line-height:1;font-weight:800;letter-spacing:-4.6px;color:#fff}
.rv h2 em{font-style:normal;
  background:linear-gradient(100deg,var(--sky),var(--blue-2) 45%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rv-rule{width:0;height:1px;margin:46px 0 40px;background:linear-gradient(90deg,transparent,var(--line-3) 30%,var(--line-3) 70%,transparent);
  transition:width 1600ms var(--ease) var(--at,0ms)}
.slide.is-in .rv-rule{width:620px}
.rv-sub{margin:0;font-size:30px;line-height:1.45;color:var(--ink-sub);max-width:1080px;font-weight:400}

/* ===========================================================================
   THE ATLAS 2.0 LOCKUP
   The brand wordmark, recoloured for this deck by qa/make-logo.cjs. It stands
   in for every spelled-out "NQAAE Atlas 2.0", so the name is always set in the
   real mark rather than in the deck's own typeface.
   =========================================================================== */
.atlas-lockup{display:block;height:auto;width:auto}
.atlas-lockup.is-hero{width:760px;filter:drop-shadow(0 14px 60px rgb(16 60 150 / .55))}
.atlas-lockup.is-st{width:560px;margin-bottom:58px;filter:drop-shadow(0 14px 60px rgb(16 60 150 / .55))}
.atlas-lockup.is-final{width:660px;filter:drop-shadow(0 14px 60px rgb(0 8 30 / .95))}
.atlas-lockup.is-pill{height:34px;margin:-3px 0}
.atlas-lockup.is-chrome{height:30px;opacity:.85}

/* ===========================================================================
   05-09 · ECOSYSTEM BUILD — one platform lights up per scene
   Five slots are always on the rail; unreached ones stay grey so the audience
   can see where the story is going before it gets there.
   =========================================================================== */
/* the sequence sets its titles in caps — each frame reads as a chapter plate,
   and the tracking opens up a little because caps need the air */
.slide[data-group="eco"] .head h2{text-transform:uppercase;letter-spacing:-.6px}

.grow{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px}

.grow-core{display:inline-flex;align-items:center;gap:16px;padding:15px 30px 15px 22px;border-radius:999px;
  font-size:22px;font-weight:650;letter-spacing:-.3px;color:#fff;
  background:linear-gradient(135deg,rgb(24 66 142 / .9),rgb(9 26 60 / .84));
  border:1px solid rgb(140 190 255 / .42);backdrop-filter:blur(20px);
  box-shadow:0 0 70px -14px var(--glow-blue)}
.grow-core img{width:112px;height:auto}

.grow-rail{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:56px}
.grow-line{position:absolute;left:110px;right:110px;top:78px;height:1px;transform-origin:left center;
  background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent)}
.grow-fill{position:absolute;left:110px;top:77px;width:0;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--blue),var(--sky));box-shadow:0 0 16px var(--glow-blue);
  transition:width 1500ms var(--ease) var(--at,0ms)}
.slide.is-in .grow-fill{width:calc((100% - 220px) * var(--f,0))}
#deck.is-still .grow-fill{width:calc((100% - 220px) * var(--f,0));transition:none}

.gn{position:relative;width:220px;display:flex;flex-direction:column;align-items:center;gap:22px}
.gn .disc{position:relative;width:156px;height:156px;border-radius:38px;display:grid;place-items:center;
  background:rgb(7 16 36 / .62);border:1px solid var(--line);backdrop-filter:blur(18px);
  transition:background 800ms var(--ease),border-color 800ms var(--ease),box-shadow 800ms var(--ease),
    transform 760ms cubic-bezier(.2,1.15,.35,1)}
.gn .disc>img,.gn .disc>svg{position:relative;z-index:2;opacity:.30;filter:grayscale(1);
  transition:opacity 800ms var(--ease),filter 800ms var(--ease),
    transform 950ms cubic-bezier(.2,1.2,.35,1)}
.gn b{font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-align:center;
  line-height:1.45;color:var(--ink-4);max-width:190px;transition:color 800ms var(--ease)}

/* a platform that has joined the ecosystem */
.gn.is-on .disc{background:rgb(12 30 68 / .72);border-color:rgb(93 164 255 / .38);
  box-shadow:0 0 60px -18px var(--glow-blue),inset 0 1px 0 rgb(180 214 255 / .12)}
.gn.is-on .disc>img,.gn.is-on .disc>svg{opacity:1;filter:none}
.gn.is-on b{color:#fff}

/* the one this scene is about */
.gn.is-new .disc{border-color:var(--line-3);box-shadow:0 0 90px -14px var(--glow-blue),
  0 0 0 6px rgb(80 150 255 / .07),inset 0 1px 0 rgb(180 214 255 / .18)}
.gn.is-new b{color:var(--blue-3)}
.gn .rings{position:absolute;inset:0}
.gn .rings i{border-color:rgb(120 190 255 / .34)}

/* Transient states used when a node ignites mid-sequence. `is-instant` commits
   the unlit look with no transition; dropping both then animates it to lit.
   These must sit after .is-on / .is-new to win the equal-specificity tie. */
.gn.is-dim .disc{background:rgb(7 16 36 / .62);border-color:var(--line);box-shadow:none}
.gn.is-dim .disc>img,.gn.is-dim .disc>svg{opacity:.30;filter:grayscale(1);transform:scale(.86)}

/* Arriving cold, the mark is placed INTO the card a beat after the card lands,
   rather than being painted on it. --at is the card's own stagger, inherited,
   so the marks follow the row down without a second set of numbers to keep in
   sync. Mid-sequence this is off — there the ignition does the work. */
.slide:not(.from-group) .gn .disc>img,
.slide:not(.from-group) .gn .disc>svg{transform:scale(.42)}
.slide.is-in:not(.from-group) .gn .disc>img,
.slide.is-in:not(.from-group) .gn .disc>svg{transform:none;
  transition-delay:0ms,0ms,calc(var(--at,0ms) + 300ms)}
.gn.is-dim b{color:var(--ink-4)}
.gn.is-lit .disc{background:rgb(12 30 68 / .72);border-color:rgb(93 164 255 / .38);
  box-shadow:0 0 60px -18px var(--glow-blue),inset 0 1px 0 rgb(180 214 255 / .12)}
.gn.is-lit .disc>img,.gn.is-lit .disc>svg{opacity:1;filter:none}
.gn.is-lit b{color:#fff}
.gn.is-instant .disc,.gn.is-instant .disc>img,.gn.is-instant .disc>svg,
.gn.is-instant b{transition:none!important}

/* --- dock magnification ---------------------------------------------------
   Only the platform the frame is about stands proud of the rail; every other
   card keeps its authored size. It rides on the DISC, never on .gn: the node
   is held furniture and moving it would break the illusion that the rail
   never restarted.                                                          */
.grow-rail .gn.is-new .disc{transform:scale(1.18)}

/* --- the sequence's payoff ------------------------------------------------
   Once the constellation is complete it collapses inward and the lockup takes
   the centre. The nodes travel by a --dx measured at merge time, so this stays
   correct whatever the rail's geometry. The disc row sits 34px above the rail's
   own centre, which is where the collapse converges. */
.eco-flare{position:absolute;left:50%;top:calc(50% - 34px);width:8px;height:8px;
  margin:-4px 0 0 -4px;border-radius:50%;background:#fff;opacity:0;z-index:5;
  box-shadow:0 0 40px 18px rgb(120 190 255 / .5)}
.slide.is-merged .eco-flare{animation:eco-flare 1200ms cubic-bezier(.16,1,.3,1) 560ms both}
@keyframes eco-flare{
  0%{opacity:0;transform:scale(.4)}
  16%{opacity:1;transform:scale(8)}
  100%{opacity:0;transform:scale(26)}}

.slide.is-merged .gn{
  transition:transform 900ms cubic-bezier(.62,0,.3,1),opacity 600ms ease 120ms;
  transform:translate3d(var(--dx,0px),34px,0) scale(.3);opacity:0}
.slide.is-merged .grow-line,
.slide.is-merged .grow-fill{transition:opacity 520ms ease 260ms;opacity:0}
.slide.is-merged .head{opacity:0;transition:opacity 520ms ease}

.eco-final{position:absolute;left:0;right:0;top:calc(50% - 34px);z-index:6;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:30px;
  opacity:0;transform:translateY(-50%) scale(.84);
  transition:opacity 700ms ease,transform 900ms var(--ease)}
.eco-final img{width:270px;height:auto;filter:drop-shadow(0 14px 60px rgb(0 8 30 / .95))}
.eco-final h3{margin:0;font-size:92px;line-height:1;font-weight:800;letter-spacing:-3.4px;color:#fff;
  filter:drop-shadow(0 10px 50px rgb(16 60 150 / .55))}
.eco-final h3 em{font-style:normal;
  background:linear-gradient(100deg,var(--sky),var(--blue-2) 45%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.eco-final p{margin:0;font-size:26px;line-height:1.45;color:var(--ink-sub);
  text-transform:uppercase;letter-spacing:1.6px;font-weight:600}
.slide.is-merged .eco-final{opacity:1;transform:translateY(-50%) scale(1);
  transition-delay:760ms,760ms}

/* ===========================================================================
   10 · COMFORT — the real institution dashboard
   The panel is the product build, embedded verbatim in its own document
   (assets/panel/institution.html) and shown in the product's own dark tokens.
   It is iframed so the repository's global Tailwind reset cannot reach the
   deck's styles; the deck only frames it and drives its theme.
   =========================================================================== */
/* this scene sets its heading in caps, like the sequence does */
.slide[data-key="comfort"] .head h2{text-transform:uppercase;letter-spacing:-.7px}
/* the stage gained 48px when the subtitle went; the panel keeps its own size
   and centres in it rather than stretching to a shape the product is not */
.slide[data-key="comfort"] .cf-app{top:24px}
/* the mark is the column now, so everything centres on it */
.cf-left{position:absolute;left:0;top:0;bottom:0;width:430px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.cf-block{margin-bottom:44px}
.cf-block h3{margin:26px 0 0;font-size:25px;font-weight:600;letter-spacing:-.4px;color:#fff}
.cf-block p{margin:0 0 20px;font-size:17px;line-height:1.55;color:var(--ink-3)}
/* --- the theme toggle ------------------------------------------------------
   One control, not two: the knob slides and its sun becomes a moon. The
   crescent is carved by a mask circle that slides ACROSS the disc — animating
   its cx/cy is what makes the shape morph rather than cross-fade. The rays
   live in two nested groups so the outer one can scale them away while the
   inner one keeps turning.                                                   */
/* No switch — just the mark itself, big enough to be the control. Clicking it
   turns the sun into a moon: the crescent is carved by a mask circle sliding
   ACROSS the disc, which is what makes it morph rather than cross-fade, and the
   rays sit in two nested groups so the outer can fold them away while the inner
   keeps turning. */
.cf-orbtn{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0}
.cf-orbwrap{position:relative;flex:none;width:262px;height:262px;display:grid;place-items:center}
.cf-halo{position:absolute;inset:-58px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(120 175 255 / .30),transparent 72%);
  transition:background 620ms var(--ease)}
.cf-orbtn.is-light .cf-halo{background:radial-gradient(closest-side,rgb(255 186 84 / .40),transparent 72%)}
#deck:not(.is-still) .cf-halo{animation:orb-breathe 4.8s var(--ease-soft) infinite}
@keyframes orb-breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}
.cf-sm{position:relative;width:262px;height:262px;overflow:visible;
  filter:drop-shadow(0 10px 26px rgb(0 8 26 / .55))}
/* the disc keeps ONE gradient and recolours through its stops, so the crescent
   can be carved and the colour can travel at the same time */
.cf-sm .s1,.cf-sm .s2{transition:stop-color 620ms var(--ease)}
.cf-orbtn:not(.is-light) .cf-sm .s1{stop-color:#f2f8ff}
.cf-orbtn:not(.is-light) .cf-sm .s2{stop-color:#8fb4e8}
.cf-sm .bite{transition:cx 700ms cubic-bezier(.2,1.05,.3,1),cy 700ms cubic-bezier(.2,1.05,.3,1)}
.cf-orbtn:not(.is-light) .cf-sm .bite{cx:28;cy:15.4}
.cf-sm .rays{transform-box:fill-box;transform-origin:center;stroke:#ffb545;
  transition:opacity 420ms var(--ease),transform 640ms cubic-bezier(.2,1.25,.35,1)}
.cf-orbtn:not(.is-light) .cf-sm .rays{opacity:0;transform:scale(.34) rotate(-55deg)}
/* three sparks keep the moon company; they belong to the dark state only */
.cf-sm .sparks{fill:#dbe9ff;transform-box:fill-box;transform-origin:center;opacity:0;
  transform:scale(.5);transition:opacity 460ms var(--ease) 160ms,transform 640ms cubic-bezier(.2,1.25,.35,1) 160ms}
.cf-orbtn:not(.is-light) .cf-sm .sparks{opacity:1;transform:none}
#deck:not(.is-still) .cf-orbtn:not(.is-light) .cf-sm .sparks path{animation:spark 3.8s var(--ease-soft) infinite}
.cf-sm .sparks path:nth-child(2){animation-delay:1.3s}
.cf-sm .sparks path:nth-child(3){animation-delay:2.5s}
@keyframes spark{0%,100%{opacity:.45}50%{opacity:1}}
.cf-sm .rays-spin{transform-box:fill-box;transform-origin:center}
#deck:not(.is-still) .cf-orbtn.is-light .cf-sm .rays-spin{animation:sun-spin 16s linear infinite}
@keyframes sun-spin{to{transform:rotate(360deg)}}

/* the product window */
/* The frame around the panel is exactly what the panel itself paints, so the
   inset reads as part of the page rather than a border in a different colour —
   and it cross-fades on the same 600ms curve, so the two never disagree
   mid-flip. runPanel drives the class. */
.cf-app{position:absolute;right:0;top:0;width:1217px;height:692px;border-radius:22px;overflow:hidden;
  background:rgb(26 33 58);border:1px solid var(--line-2);
  /* The entrance transitions come from [data-a] in motion.css. A bare
     `transition:background-color` here REPLACES them, and the panel then has no
     entrance at all — it snaps to full opacity on the first frame while the rest
     of the scene fades in. Restate them alongside the theme cross-fade. */
  transition:opacity 900ms var(--ease) var(--at,0ms),
    transform 1150ms var(--ease) var(--at,0ms),
    filter 900ms var(--ease) var(--at,0ms),
    background-color 600ms ease;
  box-shadow:0 44px 120px -36px rgb(0 6 22 / 1),inset 0 1px 0 rgb(180 214 255 / .10)}
/* The frame is filled edge to edge; the breathing room is inside the panel
   document itself (see qa/sync-panel.cjs), so the product keeps its own scale. */
.cf-app.is-light{background:#eceff6;border-color:rgb(120 160 220 / .30)}
.cf-app iframe{position:absolute;left:0;top:0;width:1280px;height:728px;border:0;
  transform:scale(.9505);transform-origin:top left;color-scheme:dark}

/* the demonstration pointer — the deck operates its own theme switch on stage */
.cursor{position:absolute;left:0;top:0;width:30px;height:30px;z-index:24;pointer-events:none;opacity:0;
  transform:translate3d(var(--cx,0px),var(--cy,0px),0);
  transition:transform 620ms var(--ease),opacity 300ms ease;
  filter:drop-shadow(0 8px 18px rgb(0 6 22 / .95))}
.cursor.is-on{opacity:1}
.cursor.is-press{transform:translate3d(var(--cx,0px),var(--cy,0px),0) scale(.76)}
.click-ring{position:absolute;left:0;top:0;width:62px;height:62px;margin:-31px 0 0 -31px;z-index:23;
  border-radius:50%;border:2px solid rgb(150 205 255 / .85);opacity:0;pointer-events:none}
.click-ring.go{animation:clickpop 660ms cubic-bezier(.16,1,.3,1)}
@keyframes clickpop{0%{opacity:.95;transform:scale(.18)}100%{opacity:0;transform:scale(1)}}
/* a real press, independent of the 500ms colour transition on these controls */
.cf-orbtn.is-hit .cf-orbwrap{animation:hitpress 280ms var(--ease-soft)}
@keyframes hitpress{0%{transform:scale(1)}38%{transform:scale(.93)}100%{transform:scale(1)}}

/* ===========================================================================
   07 · ATLAS AI hero
   =========================================================================== */
/* scene 11 reuses scene 7's rail wholesale — see .grow / .grow-rail / .gn above.
   Its heading is set in caps the same way the sequence's are. */
.slide[data-key="st-ai"] .head h2{text-transform:uppercase;letter-spacing:-.6px}

/* ===========================================================================
   08-10 · shared AI scene furniture
   =========================================================================== */
.pane-l{position:absolute;left:0;top:0;width:508px;bottom:0;
  display:flex;flex-direction:column;justify-content:center}
.pane-r{position:absolute;left:556px;right:0;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:center}

.card-h{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex:none}
.card-h .mk{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,rgb(47 123 255 / .5),rgb(34 211 238 / .3));border:1px solid var(--line-2)}
.card-h .mk svg{width:20px;height:20px;color:#dceaff}
.card-h b{font-size:20px;font-weight:600;color:#fff;letter-spacing:-.2px}
.card-h span{font-size:13px;color:var(--ink-3);display:block;margin-top:2px}
.card-h .rt{margin-left:auto;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-4)}

.lbl{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--blue-3)}

/* 08 · Atlas Agent ---------------------------------------------------------- */
.ag-cmd{position:absolute;inset:0;padding:40px;border-radius:26px;display:flex;flex-direction:column;
  background:linear-gradient(155deg,rgb(16 46 102 / .8),rgb(7 20 46 / .68));
  border:1px solid var(--line-2);backdrop-filter:blur(26px)}
.ag-cmd .prompt{margin:26px 0 0;font-size:25px;line-height:1.48;color:#fff;font-weight:450;min-height:150px}
.ag-chips-l{margin:36px 0 14px;font-size:12px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--ink-4)}
.ag-chips{display:flex;flex-wrap:wrap;gap:10px}
.ag-chips span{font-size:14.5px;font-weight:550;padding:10px 16px;border-radius:11px;
  background:rgb(120 172 255 / .10);border:1px solid var(--line);color:var(--blue-3)}
.ag-meter{margin-top:auto;padding-top:28px;border-top:1px solid var(--line)}
.ag-meter .n{display:flex;align-items:baseline;gap:10px}
.ag-meter .n b{font-size:52px;font-weight:750;letter-spacing:-2px;color:#fff;font-variant-numeric:tabular-nums}
.ag-meter .n span{font-size:24px;color:var(--ink-3)}
.ag-meter p{margin:12px 0 0;font-size:16px;color:var(--blue-3)}
.ag-track{margin-top:18px;height:4px;border-radius:2px;background:rgb(120 172 255 / .14);overflow:hidden}
.ag-track i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--sky));box-shadow:0 0 16px var(--glow-blue);
  transition:width 2600ms var(--ease) var(--at,0ms)}
.slide.is-in .ag-track i{width:100%}

.ag-list{display:flex;flex-direction:column;gap:16px}
.ag-item{display:flex;align-items:center;gap:22px;padding:24px 26px;border-radius:19px;
  background:rgb(9 20 44 / .55);border:1px solid var(--line);backdrop-filter:blur(20px)}
.ag-item .no{font-size:14px;font-weight:700;color:var(--ink-4);font-variant-numeric:tabular-nums;letter-spacing:1px;flex:none}
.ag-item .bd{flex:1;min-width:0}
.ag-item .bd b{display:block;font-size:21px;font-weight:600;color:#fff;letter-spacing:-.25px}
.ag-item .bd span{display:block;font-size:15px;color:var(--blue-3);margin-top:6px}
.ag-item .bd p{margin:8px 0 0;font-size:15px;color:var(--ink-3)}
.ag-item .chip{flex:none;font-size:12.5px;font-weight:650;letter-spacing:.5px;padding:8px 15px;border-radius:9px;
  background:rgb(120 172 255 / .10);border:1px solid var(--line);color:var(--ink-3);
  transition:all 600ms var(--ease)}
.ag-item .chip.flipped{background:rgb(47 209 165 / .14);border-color:rgb(47 209 165 / .32);color:#84e8c9}

/* 09 · Atlas Expert --------------------------------------------------------- */
.ex-src{display:flex;flex-direction:column;gap:14px}
.ex-src .it{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:17px;
  background:rgb(9 20 44 / .55);border:1px solid var(--line);backdrop-filter:blur(20px)}
.ex-src .it .ico{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgb(47 123 255 / .13);border:1px solid rgb(93 164 255 / .24);color:var(--blue-2)}
.ex-src .it .ico svg{width:20px;height:20px}
.ex-src .it b{display:block;font-size:19px;font-weight:550;color:#fff}
.ex-src .it span{display:block;font-size:14px;color:var(--ink-3);margin-top:5px}
.ex-work{position:relative;overflow:hidden;margin-top:22px;padding:20px 22px;border-radius:15px;
  background:rgb(34 211 238 / .07);border:1px solid rgb(34 211 238 / .24);
  display:flex;align-items:center;gap:14px;font-size:16px;color:#a9e9f7}
.ex-work .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none;box-shadow:0 0 12px var(--glow-cyan)}

.ex-out{position:absolute;inset:0;padding:36px 38px;border-radius:26px;
  display:flex;flex-direction:column;justify-content:center}
.ex-find{display:flex;gap:20px;padding:30px 0;border-bottom:1px solid rgb(120 172 255 / .09)}
.ex-find:last-of-type{border-bottom:0}
.ex-find .no{font-size:13px;font-weight:700;color:var(--blue-2);font-variant-numeric:tabular-nums;letter-spacing:1px;
  padding-top:4px;flex:none;width:26px}
.ex-find b{display:block;font-size:19px;font-weight:600;color:#fff;margin-bottom:8px;letter-spacing:-.2px}
.ex-find p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.ex-note{margin-top:28px;display:flex;align-items:center;gap:12px;padding-top:22px;border-top:1px solid var(--line);
  font-size:16px;font-weight:550;color:#84e8c9}
.ex-note svg{width:20px;height:20px;flex:none}

/* 10 · Atlas Consultant ----------------------------------------------------- */
.cs-swap{display:flex;flex-direction:column;gap:0}
.cs-old{padding:22px 24px;border-radius:17px;background:rgb(120 172 255 / .05);border:1px dashed rgb(120 172 255 / .22);
  opacity:.62}
.cs-old .lbl{color:var(--ink-4)}
.cs-old b{display:block;margin-top:10px;font-size:19px;font-weight:500;color:var(--ink-3);text-decoration:line-through;
  text-decoration-color:rgb(255 107 129 / .5)}
.cs-arrow{height:56px;display:grid;place-items:center;color:var(--blue-2)}
.cs-arrow svg{width:22px;height:22px}
.cs-new{padding:28px 26px;border-radius:19px;
  background:linear-gradient(155deg,rgb(16 46 102 / .8),rgb(7 20 46 / .66));border:1px solid var(--line-2)}
.cs-new .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:rgb(47 209 165 / .16);border:1px solid rgb(47 209 165 / .3);color:var(--teal)}
.cs-new .ico svg{width:22px;height:22px}
.cs-new b{display:block;font-size:26px;font-weight:650;color:#fff;letter-spacing:-.5px}
.cs-new p{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.cs-new em{display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-style:normal;font-size:15px;color:#84e8c9}

.cs-chat{position:absolute;inset:0;padding:30px 32px;border-radius:26px;display:flex;flex-direction:column}
.cs-msg{align-self:flex-end;max-width:74%;padding:18px 22px;border-radius:18px 18px 6px 18px;
  background:linear-gradient(140deg,var(--blue),#1c56c4);color:#fff;font-size:17px;line-height:1.5;
  box-shadow:0 14px 40px -14px var(--glow-blue)}
.cs-msg small{display:block;font-size:12px;opacity:.72;margin-bottom:6px;letter-spacing:.4px}
.cs-think{align-self:flex-start;display:flex;align-items:center;gap:11px;margin-top:20px;
  font-size:14px;color:var(--ink-3)}
.cs-think i{width:7px;height:7px;border-radius:50%;background:var(--blue-2)}
.slide.is-in .cs-think i{animation:bob 1.3s var(--ease-soft) infinite}
.cs-think i:nth-child(2){animation-delay:.16s}
.cs-think i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}
.cs-ans{align-self:flex-start;width:88%;margin-top:18px;padding:24px 26px;border-radius:18px 18px 18px 6px;
  background:rgb(120 172 255 / .07);border:1px solid var(--line)}
.cs-ans>b{display:block;font-size:18px;font-weight:600;color:#fff;margin-bottom:18px}
.cs-step{display:flex;gap:16px;padding:12px 0}
.cs-step .no{font-size:12px;font-weight:700;color:var(--blue-2);font-variant-numeric:tabular-nums;width:22px;flex:none;padding-top:3px}
.cs-step b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px}
.cs-step p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-3)}
.cs-input{margin-top:auto;display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:14px;
  background:rgb(6 14 32 / .7);border:1px solid var(--line)}
.cs-input span{flex:1;font-size:15px;color:var(--ink-4)}
.cs-input i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--blue),#1c56c4);color:#fff}
.cs-input i svg{width:17px;height:17px}

/* ===========================================================================
   11 · TRANSLATE
   =========================================================================== */
.tr-links{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}
.tr-links path{fill:none;stroke:rgb(120 190 255 / .30);stroke-width:1.6}
.tr-links path.pulse-p{stroke:var(--sky);stroke-width:2.4;filter:drop-shadow(0 0 6px var(--glow-cyan))}
.tr-src{position:absolute;left:0;top:120px;width:452px;padding:30px 32px;border-radius:22px;z-index:2}
.tr-src h3{margin:16px 0 20px;font-size:26px;font-weight:600;color:#fff;letter-spacing:-.4px;line-height:1.25}
.tr-lines i{display:block;height:9px;border-radius:5px;background:rgb(120 172 255 / .16);margin-bottom:10px}
.tr-lines i:nth-child(2){width:86%}
.tr-lines i:nth-child(3){width:58%}
.tr-node{position:absolute;left:96px;top:392px;width:340px;display:flex;align-items:center;gap:16px;z-index:3;
  padding:20px 24px;border-radius:17px;
  background:linear-gradient(140deg,rgb(20 58 128 / .92),rgb(9 26 60 / .88));
  border:1px solid rgb(93 164 255 / .42);box-shadow:0 0 60px -12px var(--glow-blue)}
.tr-node .ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgb(34 211 238 / .16);border:1px solid rgb(34 211 238 / .3);color:var(--cyan)}
.tr-node .ico svg{width:22px;height:22px}
.tr-node b{display:block;font-size:19px;font-weight:600;color:#fff}
.tr-node span{display:block;font-size:13.5px;color:var(--blue-3);margin-top:4px}
.tr-out{position:absolute;left:640px;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:18px;z-index:2}
.tr-card{padding:24px 28px;border-radius:20px}
.tr-card h3{margin:14px 0 10px;font-size:25px;font-weight:600;color:#fff;letter-spacing:-.4px}
.tr-card p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.tr-flag{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 12px;border-radius:7px;
  background:rgb(120 172 255 / .10);border:1px solid var(--line);color:var(--ink-3)}
.tr-card.uz .tr-flag{background:rgb(47 209 165 / .13);border-color:rgb(47 209 165 / .3);color:#84e8c9}
.tr-card.ru .tr-flag{background:rgb(93 164 255 / .14);border-color:rgb(93 164 255 / .32);color:var(--blue-3)}
.tr-card.en .tr-flag{background:rgb(167 139 250 / .14);border-color:rgb(167 139 250 / .32);color:#c9b8ff}

/* ===========================================================================
   12 · MOBILE
   =========================================================================== */
.mb-phone{position:absolute;left:78px;top:-10px;width:352px;height:636px;border-radius:52px;padding:12px;
  background:linear-gradient(160deg,#1b2b4c,#070f22);
  border:1px solid rgb(150 200 255 / .26);
  box-shadow:0 50px 120px -34px rgb(0 6 24 / 1),inset 0 1px 0 rgb(180 214 255 / .22)}
.mb-screen{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;
  background:linear-gradient(180deg,#071634,#040c1e);padding:26px 20px 88px;
  display:flex;flex-direction:column}
.mb-notch{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:104px;height:22px;border-radius:12px;
  background:#040a18;z-index:5}
.mb-top{display:flex;align-items:center;justify-content:space-between;margin:16px 0 20px}
.mb-top b{font-size:15px;font-weight:650;color:#fff;letter-spacing:-.1px}
.mb-top i{width:26px;height:26px;border-radius:9px;background:rgb(120 172 255 / .12);border:1px solid var(--line)}
.mb-hi{font-size:12px;color:var(--ink-3)}
.mb-hi b{display:block;font-size:19px;font-weight:650;color:#fff;margin-top:4px;letter-spacing:-.3px}
.mb-minis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 0}
.mb-mini{padding:12px;border-radius:13px;background:rgb(120 172 255 / .07);border:1px solid var(--line);
  display:flex;align-items:center;gap:9px}
.mb-mini i{width:20px;height:20px;border-radius:6px;flex:none}
.mb-mini span{font-size:10.5px;font-weight:550;color:var(--ink-2);line-height:1.25}
.mb-panel{margin-top:auto;padding:18px;border-radius:15px;background:rgb(47 123 255 / .12);border:1px solid rgb(93 164 255 / .26)}
.mb-panel small{font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-4)}
.mb-panel .k{display:block;font-size:11px;color:var(--blue-3);margin-top:10px}
.mb-panel b{display:block;font-size:20px;font-weight:700;color:#fff;margin:5px 0 10px;letter-spacing:-.4px}
.mb-panel .go{font-size:11.5px;color:var(--ink-3)}
.mb-tabs{position:absolute;left:20px;right:20px;bottom:18px;height:52px;border-radius:16px;
  background:rgb(6 14 32 / .9);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-around}
.mb-tabs i{width:20px;height:20px;border-radius:7px;background:rgb(120 172 255 / .16)}
.mb-tabs i:first-child{background:var(--blue-2);box-shadow:0 0 14px var(--glow-blue)}

.mb-status{position:absolute;left:78px;top:648px;width:352px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px;border-radius:12px;font-size:14px;font-weight:600;
  background:rgb(47 209 165 / .10);border:1px solid rgb(47 209 165 / .3);color:#84e8c9}
.mb-status i{width:7px;height:7px;border-radius:50%;background:#2fd1a5;flex:none;animation:ping 2.4s var(--ease-soft) infinite}

.mb-who{position:absolute;left:512px;right:0;top:0;bottom:0;padding:40px 42px;border-radius:26px;
  display:flex;flex-direction:column;justify-content:center}
.mb-row{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid rgb(120 172 255 / .1)}
.mb-row .ico{width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:rgb(47 123 255 / .13);border:1px solid rgb(93 164 255 / .26);color:var(--blue-2)}
.mb-row.t .ico{background:rgb(47 209 165 / .13);border-color:rgb(47 209 165 / .28);color:var(--teal)}
.mb-row .ico svg{width:24px;height:24px}
.mb-row b{display:block;font-size:24px;font-weight:600;color:#fff;margin-bottom:9px;letter-spacing:-.4px}
.mb-row p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.mb-note{margin:30px 0 0;font-size:19px;font-weight:550;color:var(--blue-3);text-align:center}

/* ===========================================================================
   13 · 10x
   =========================================================================== */
.tx-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:24px}
.tx-cell{position:relative;overflow:hidden;padding:34px 38px;border-radius:24px;
  background:rgb(9 20 44 / .55);border:1px solid var(--line);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center}
.tx-cell::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--blue-2),transparent)}
.tx-cell.t::before{background:linear-gradient(180deg,transparent,var(--teal),transparent)}
.tx-cell.v::before{background:linear-gradient(180deg,transparent,var(--violet),transparent)}
.tx-cell.a::before{background:linear-gradient(180deg,transparent,var(--amber),transparent)}
.tx-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tx-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgb(47 123 255 / .13);border:1px solid rgb(93 164 255 / .26);color:var(--blue-2)}
.tx-cell.t .tx-ico{background:rgb(47 209 165 / .13);border-color:rgb(47 209 165 / .28);color:var(--teal)}
.tx-cell.v .tx-ico{background:rgb(167 139 250 / .13);border-color:rgb(167 139 250 / .28);color:var(--violet)}
.tx-cell.a .tx-ico{background:rgb(245 181 68 / .13);border-color:rgb(245 181 68 / .28);color:var(--amber)}
.tx-ico svg{width:22px;height:22px}
.tx-pill{font-size:12.5px;font-weight:650;letter-spacing:.7px;padding:7px 14px;border-radius:8px;
  background:rgb(47 209 165 / .12);border:1px solid rgb(47 209 165 / .28);color:#84e8c9}
.tx-num{display:flex;align-items:baseline;gap:4px;font-size:112px;line-height:1;font-weight:800;letter-spacing:-5px;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 0 60px rgb(93 164 255 / .35)}
.tx-num em{font-style:normal;font-size:74px;font-weight:500;color:var(--blue-3);letter-spacing:-2px}
.tx-lbl{margin:20px 0 0;font-size:20px;line-height:1.4;color:var(--ink-2)}

/* ===========================================================================
   14 · FINALE
   =========================================================================== */
.fn{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:4}
.fn>img{width:270px;height:auto;margin-bottom:52px;filter:drop-shadow(0 14px 60px rgb(0 8 30 / .95))}
.fn h2{margin:0;font-size:82px;line-height:1.06;font-weight:750;letter-spacing:-3px;color:#fff;
  filter:drop-shadow(0 10px 50px rgb(16 60 150 / .55))}
.fn p{margin:26px 0 0;font-size:26px;line-height:1.5;color:var(--ink-2);max-width:940px}
.fn-qr{margin:52px 0 0;width:246px;height:246px;padding:18px;border-radius:24px;background:#fff;
  box-shadow:0 30px 90px -24px rgb(0 8 30 / .9),0 0 0 1px rgb(150 200 255 / .3),0 0 90px -10px var(--glow-blue)}
.fn-qr img{width:100%;height:100%;display:block}
.fn-url{margin:40px 0 0;font-size:24px;font-weight:600;letter-spacing:3px;color:var(--blue-3);text-transform:lowercase}
.fn-corner{position:absolute;top:0;left:0;width:300px;opacity:.30;pointer-events:none;
  filter:brightness(2.6) saturate(.5)}
.fn-corner.r{left:auto;right:0;transform:scaleX(-1)}