/* ==========================================================================
   VIBE89 — homepage-only layer (index.html)
   Four new concepts, none of which exist elsewhere on the site or demos:
     1. Hero "live wall": a perspective-tilted mosaic of real client
        screenshots drifting behind the headline, nudged by page scroll.
     2. "Watch it get built": a sticky browser mock that assembles itself
        stage by stage as the four free-demo steps scroll past.
     3. Coverflow work carousel: cards tilt and dim by their position in the
        scroller using CSS scroll-driven animations (view timelines), plus a
        live tick rail + counter under the controls.
     4. Industry ring: a 3D cylinder of the twelve demo templates you can
        drag, tab through, or step with buttons. Collapses to a snap
        scroller on small screens.
   Everything degrades: no JS -> static wall, static browser, plain cards,
   static ring. Reduced motion -> no drift, no auto-spin, instant stages.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. Hero live wall                                                       */
/* ---------------------------------------------------------------------- */

.hero__wall{
  display:none;
}

@media (min-width: 1024px){
  .hero__wall{
    display:block;
    position:absolute; z-index:1; top:50%; right:-6vw;
    width:min(50vw, 720px); height:min(124vh, 1120px);
    transform:translateY(-50%);
    perspective:1500px; perspective-origin:40% 50%;
    pointer-events:none;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 56% 50%, #000 32%, transparent 100%);
    mask-image:radial-gradient(ellipse 62% 58% at 56% 50%, #000 32%, transparent 100%);
  }
  .hero__content{ max-width:660px; }
  .hero__stats{
    display:grid; grid-template-columns:repeat(2, minmax(0, max-content)); gap:22px 44px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px){
  .hero__wall{ width:46vw; right:-9vw; }
  .hero__content{ max-width:600px; }
}

.wall{
  position:absolute; inset:-12% -6%;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.3vw, 20px);
  transform:rotateX(16deg) rotateY(-24deg) rotateZ(7deg) translateZ(-160px);
  transform-style:preserve-3d;
}
.wall__col{
  display:flex; flex-direction:column; gap:clamp(12px, 1.3vw, 20px);
  animation:wall-drift var(--dur, 52s) ease-in-out infinite alternate;
}
.wall__col--1{ --dur:54s; }
.wall__col--2{ --dur:66s; margin-top:-150px; animation-direction:alternate-reverse; }
.wall__col--3{ --dur:48s; margin-top:-64px; }

.wall__tile{
  display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top center;
  border-radius:12px; background:var(--bg-card);
  border:1px solid rgba(var(--cloud-rgb), .12);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
}
.wall__tile--mobile{
  aspect-ratio:390 / 844; width:58%; align-self:center;
  border-radius:20px; border:4px solid #0c101d;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06), 0 0 40px -10px rgba(6,182,212,.25);
}
.wall__col--1 .wall__tile--mobile{ align-self:flex-end; }
.wall__col--3 .wall__tile--mobile{ align-self:flex-start; }

@keyframes wall-drift{
  from{ transform:translateY(0); }
  to{ transform:translateY(-16%); }
}

/* Scroll nudge: the whole wall slides and flattens a touch as the hero
   leaves. Pure CSS scroll timeline; browsers without it just skip it. */
@supports (animation-timeline: scroll()){
  @media (min-width: 1024px){
    .hero__wall{
      animation:wall-scroll linear both;
      animation-timeline:scroll(root);
      animation-range:0 100vh;
    }
  }
}
@keyframes wall-scroll{
  from{ transform:translateY(-50%) translateX(0); }
  to{ transform:translateY(-38%) translateX(6%); }
}

@media (prefers-reduced-motion: reduce){
  .wall__col{ animation:none; }
  .hero__wall{ animation:none; }
}

/* ---------------------------------------------------------------------- */
/* 2. Watch it get built (free demo scene)                                  */
/* ---------------------------------------------------------------------- */

.build{
  display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  gap:clamp(32px, 5vw, 80px); align-items:start;
}
.build__stage{
  position:sticky; top:calc(var(--nav-height) + 40px);
}
.build__sticky{ position:relative; padding-right:11%; }

.browser{
  position:relative; border-radius:16px; overflow:hidden;
  background:#0b0f1c;
  border:1px solid rgba(var(--cloud-rgb), .14);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.5);
  transition:box-shadow .8s ease, border-color .8s ease;
}
.browser__bar{
  display:flex; align-items:center; gap:14px; padding:10px 14px;
  background:linear-gradient(180deg, #161c2f, #11162a);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.browser__dots{ display:flex; gap:6px; }
.browser__dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14); display:block; }
.browser__url{
  flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:26px; padding:0 12px; border-radius:8px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.06);
  font-size:.74rem; color:var(--gray-500); font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.browser__url-text{ transition:color .5s ease; }
.browser__live{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#6ee7b7; opacity:0; transform:translateX(6px); transition:opacity .5s ease, transform .5s ease;
}
.browser__live::before{
  content:''; width:6px; height:6px; border-radius:50%; background:#10b981;
  box-shadow:0 0 10px #10b981; animation:pulse-dot 1.6s infinite;
}
.browser__body{ position:relative; aspect-ratio:16 / 10; overflow:hidden; background:#0b0f1c; }

/* wireframe skeleton */
.wire{ position:absolute; inset:0; padding:6% 6%; display:grid; grid-template-rows:auto 1fr auto; gap:6%; transition:opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.wire__row{ display:flex; gap:4%; align-items:center; }
.wire__b{
  border-radius:6px; background:rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.wire__b::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%);
  transform:translateX(-100%); animation:wire-shimmer 2.6s ease-in-out infinite;
}
@keyframes wire-shimmer{ to{ transform:translateX(100%); } }
.wire__logo{ width:18%; height:14px; border-radius:4px; }
.wire__nav{ margin-left:auto; width:9%; height:8px; }
.wire__hero{ display:grid; grid-template-columns:1.1fr 1fr; gap:6%; align-items:center; }
.wire__lines{ display:grid; gap:10%; align-content:center; }
.wire__lines .wire__b{ height:12px; }
.wire__lines .wire__b:nth-child(1){ width:88%; height:18px; }
.wire__lines .wire__b:nth-child(2){ width:70%; height:18px; }
.wire__lines .wire__b:nth-child(3){ width:60%; }
.wire__lines .wire__b:nth-child(4){ width:34%; height:22px; border-radius:100px; background:rgba(37,99,235,.28); }
.wire__img{ aspect-ratio:4 / 3; border-radius:10px; }
.wire__cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4%; }
.wire__cards .wire__b{ height:34px; }

/* stage 1: assets arrive */
.assets{ position:absolute; inset:0; pointer-events:none; }
.asset{
  position:absolute; opacity:0; transform:translateY(18px) scale(.94);
  transition:opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d, 0s);
}
.asset--logo{
  top:6%; left:6%; padding:6px 10px; border-radius:8px;
  font-family:var(--font-display, Inter, sans-serif); font-weight:800; font-size:clamp(.7rem, 1.1vw, .9rem); letter-spacing:-.02em;
  color:#fff; background:linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow:0 10px 30px -10px rgba(168,85,247,.7);
}
.asset--swatches{ top:7%; right:6%; display:flex; gap:6px; }
.asset--swatches i{ width:18px; height:18px; border-radius:50%; display:block; box-shadow:0 0 0 2px rgba(255,255,255,.12) inset, 0 6px 14px -6px rgba(0,0,0,.8); }
.asset--photos{ bottom:8%; left:6%; display:flex; gap:8px; }
.asset--photos i{
  display:block; width:clamp(40px, 6vw, 64px); aspect-ratio:1; border-radius:8px;
  background-image:url('/images/clients/sizzurp-sodalab-600.webp'); background-size:420%;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 24px -10px rgba(0,0,0,.9);
}
.asset--photos i:nth-child(1){ background-position:30% 10%; }
.asset--photos i:nth-child(2){ background-position:70% 40%; }
.asset--photos i:nth-child(3){ background-position:50% 90%; }

/* stage 2: research scan + tags */
.scan{
  position:absolute; left:0; right:0; top:-8%; height:8%; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(6,182,212,.18), rgba(6,182,212,.55));
  box-shadow:0 2px 24px rgba(6,182,212,.45);
  mix-blend-mode:screen;
}
.tags{ position:absolute; inset:0; pointer-events:none; }
.tag{
  position:absolute; padding:5px 10px; border-radius:100px; white-space:nowrap;
  font-size:clamp(.58rem, .9vw, .72rem); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#a5f3fc; background:rgba(6,182,212,.14); border:1px solid rgba(6,182,212,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d, 0s);
}
.tag--1{ top:30%; right:8%; }
.tag--2{ top:52%; left:44%; }
.tag--3{ bottom:22%; right:14%; }

/* stage 3: the real site paints in from the top */
.site{
  position:absolute; inset:0;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s cubic-bezier(.65,0,.35,1);
}
.site img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.site::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .3s ease;
}

.phone{
  position:absolute; right:0; bottom:-10%; width:22%; aspect-ratio:390 / 844;
  border-radius:clamp(14px, 2vw, 26px); overflow:hidden; border:clamp(4px, .6vw, 8px) solid #0c101d; background:#0c101d;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px -20px rgba(37,99,235,.4);
  opacity:0; transform:translate(18%, 12%) rotate(6deg);
  transition:opacity .6s ease .5s, transform .9s cubic-bezier(.22,1,.36,1) .5s;
}
.phone img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }

.build__caption{
  margin:18px 11% 0 0; font-size:.82rem; color:var(--gray-500); text-align:left;
  opacity:0; transform:translateY(6px); transition:opacity .5s ease .6s, transform .5s ease .6s;
}

/* stage switching */
.build[data-stage="1"] .asset,
.build[data-stage="2"] .asset,
.build[data-stage="3"] .asset--logo{ opacity:1; transform:none; }
.build[data-stage="3"] .asset--swatches,
.build[data-stage="3"] .asset--photos,
.build[data-stage="4"] .asset{ opacity:0; transform:translateY(-10px) scale(.96); transition-delay:0s; }
.build[data-stage="3"] .asset--logo,
.build[data-stage="4"] .asset--logo{ opacity:0; }

.build[data-stage="2"] .scan{ opacity:1; animation:scan-sweep 2.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scan-sweep{ from{ top:-8%; } to{ top:104%; } }
.build[data-stage="2"] .tag{ opacity:1; transform:none; }

.build[data-stage="3"] .site,
.build[data-stage="4"] .site{ clip-path:inset(0 0 0 0); }
.build[data-stage="3"] .wire,
.build[data-stage="4"] .wire{ opacity:0; transform:scale(1.02); }
.build[data-stage="3"] .phone,
.build[data-stage="4"] .phone{ opacity:1; transform:translate(28%, 4%) rotate(-4deg); }
.build[data-stage="3"] .build__caption,
.build[data-stage="4"] .build__caption{ opacity:1; transform:none; }

.build[data-stage="4"] .browser{
  border-color:rgba(16,185,129,.45);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(16,185,129,.25), 0 0 80px -20px rgba(16,185,129,.45);
}
.build[data-stage="4"] .browser__live{ opacity:1; transform:none; }
.build[data-stage="4"] .browser__url-text{ color:var(--gray-200); }

/* steps column */
.build__steps{ list-style:none; margin:0; padding:0; counter-reset:none; }
.build__step{
  position:relative; padding:0 0 0 clamp(44px, 5vw, 64px); min-height:min(56vh, 520px);
  display:flex; flex-direction:column; justify-content:center;
  opacity:.35; transition:opacity .5s ease;
}
.build__step:first-child{ min-height:min(48vh, 420px); }
.build__step:last-child{ min-height:min(46vh, 400px); }
.build__step::before{
  content:''; position:absolute; left:15px; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(var(--cloud-rgb), .25) 15%, rgba(var(--cloud-rgb), .25) 85%, transparent);
}
.build__step:first-child::before{ top:50%; }
.build__step:last-child::before{ bottom:50%; }
.build__num{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--bg-card); border:1px solid rgba(var(--cloud-rgb), .25); color:var(--gray-400);
  transition:background .4s ease, color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.build__step.is-active{ opacity:1; }
.build__step.is-active .build__num{
  background:var(--gradient); color:#fff; border-color:transparent;
  box-shadow:0 0 0 6px rgba(37,99,235,.15), 0 0 28px rgba(37,99,235,.45);
}
.build__step-label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.build__step-title{ font-family:var(--font-display, Inter, sans-serif); font-size:clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing:-.02em; margin:0 0 10px; }
.build__step-desc{ color:var(--gray-400); line-height:1.7; font-size:1.02rem; max-width:44ch; }
.build__step-desc strong{ color:var(--white); font-weight:600; }

@media (max-width: 900px){
  .build{ grid-template-columns:1fr; gap:24px; }
  /* solid backing so the steps scrolling underneath never show through */
  .build__stage{ top:calc(var(--nav-height) + 8px); z-index:2; background:var(--bg-dark); padding:8px 0 10px; }
  /* cap the mockup by viewport height so the steps below always have room to read
     (tablets: the full-width browser otherwise eats ~55% of the screen) */
  .build__sticky{ padding-right:9%; max-width:min(100%, calc(64vh - 60px)); margin:0 auto; }
  .build__caption{ display:none; }
  .build__step{ min-height:38vh; padding-left:48px; scroll-margin-top:calc(var(--nav-height) + 45vh); }
  .build__step:first-child{ min-height:34vh; }
  .build__step-desc{ font-size:.96rem; }
  /* scrim so scrolling text under the sticky browser stays readable */
  .build__stage::after{
    content:''; position:absolute; left:-24px; right:-24px; bottom:-36px; height:36px;
    background:linear-gradient(180deg, var(--bg-dark), transparent); pointer-events:none;
  }
  .build__stage::before{
    content:''; position:absolute; left:-24px; right:-24px; top:0; bottom:0;
    background:var(--bg-dark); z-index:-1;
  }
}

@media (prefers-reduced-motion: reduce){
  .wire__b::after, .build[data-stage="2"] .scan{ animation:none; }
  .site, .phone, .asset, .tag, .wire, .build__caption, .browser__live{ transition-duration:.01s; transition-delay:0s; }
}

/* ---------------------------------------------------------------------- */
/* 3. Coverflow work carousel                                               */
/* ---------------------------------------------------------------------- */

@supports (animation-timeline: view()){
  @media (min-width: 640px) and (prefers-reduced-motion: no-preference){
    .work-showcase__track{ perspective:1600px; }
    .work-card{
      scroll-snap-align:center;
      animation:work-coverflow linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% exit 100%;
      transform-origin:50% 60%;
      will-change:transform, filter;
    }
    /* hover lift moves to `translate`, which composes with the animated transform */
    .work-card:hover{ transform:none; translate:0 -12px; }
    .work-card:hover .work-card__device{ transform:translate(50%, calc(-25% - 6px)) rotate(-3deg); }
  }
}
@keyframes work-coverflow{
  0%   { transform:rotateY(28deg) scale(.86) translateZ(-60px); filter:brightness(.5) saturate(.8); }
  40%  { transform:rotateY(6deg) scale(.98) translateZ(0); filter:brightness(.92) saturate(1); }
  50%  { transform:none; filter:none; }
  60%  { transform:rotateY(-6deg) scale(.98) translateZ(0); filter:brightness(.92) saturate(1); }
  100% { transform:rotateY(-28deg) scale(.86) translateZ(-60px); filter:brightness(.5) saturate(.8); }
}

/* tick rail + counter, injected between the prev/next buttons */
.work-rail{
  display:flex; align-items:center; gap:18px;
  min-width:220px; padding:0 4px;
}
.work-rail__count{
  font-variant-numeric:tabular-nums; font-size:.82rem; font-weight:700; letter-spacing:.06em;
  color:var(--gray-300); white-space:nowrap; min-width:64px; text-align:center;
}
.work-rail__count b{ color:var(--white); font-weight:800; }
.work-rail__ticks{ display:flex; gap:6px; align-items:center; }
.work-rail__tick{
  width:14px; height:3px; border-radius:2px; background:rgba(255,255,255,.14);
  transition:width .35s cubic-bezier(.22,1,.36,1), background .35s ease, box-shadow .35s ease;
}
.work-rail__tick.is-active{
  width:30px; background:linear-gradient(90deg, var(--cloud), var(--accent));
  box-shadow:0 0 14px rgba(6,182,212,.55);
}
@media (max-width: 560px){
  .work-rail{ order:3; width:100%; justify-content:center; min-width:0; }
}

/* ---------------------------------------------------------------------- */
/* 4. Industry ring                                                          */
/* ---------------------------------------------------------------------- */

.ring-section{ position:relative; overflow:hidden; padding-bottom:80px; }
.ring-section::before{
  content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(1200px, 120vw); height:520px; pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 60%, rgba(37,99,235,.18), transparent 70%),
             radial-gradient(ellipse 30% 40% at 50% 100%, rgba(var(--cloud-rgb),.08), transparent 70%);
}
.ring-section .section__header{ margin-bottom:24px; position:relative; z-index:1; }

.ring-stage{ position:relative; z-index:1; }
.ring-scene{
  --card-w:300px; --r:640px;
  position:relative; height:440px;
  display:flex; justify-content:center;
  perspective:1700px; perspective-origin:50% 40%;
  overflow:hidden; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
  /* dissolve the floor reflections instead of clipping them */
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
}
.ring-scene.is-dragging{ cursor:grabbing; }
.ring-scene::before, .ring-scene::after{
  content:''; position:absolute; top:0; bottom:0; width:22%; z-index:3; pointer-events:none;
}
.ring-scene::before{ left:0; background:linear-gradient(90deg, var(--bg-dark), transparent); }
.ring-scene::after{ right:0; background:linear-gradient(270deg, var(--bg-dark), transparent); }

.ring{
  list-style:none; margin:0; padding:0;
  position:relative; width:var(--card-w); height:calc(var(--card-w) * .625 + 42px);
  transform-style:preserve-3d;
  /* push the cylinder back by its radius so the front card sits at z=0 (true size)
     and the rest recede behind it */
  transform:translateZ(calc(-1 * var(--r))) rotateX(-6deg) rotateY(var(--rot, 0deg));
}
.ring__item{
  position:absolute; inset:0;
  transform:rotateY(calc(var(--i) * (360deg / var(--n)))) translateZ(var(--r));
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  filter:brightness(var(--f, 1));
}
.ring-card{
  display:block; position:relative; width:var(--card-w); border-radius:14px; overflow:hidden;
  background:var(--bg-card); color:inherit; text-decoration:none;
  border:1px solid rgba(var(--cloud-rgb), .14);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5);
  transition:border-color .3s ease, box-shadow .3s ease;
}
@media (min-width: 761px){
  .ring-card{ -webkit-box-reflect:below 8px linear-gradient(transparent 74%, rgba(0,0,0,.22)); }
}
.ring-card:hover, .ring-card:focus-visible{
  border-color:var(--cloud-line); color:inherit;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(var(--cloud-rgb),.12), 0 0 50px -12px rgba(6,182,212,.5);
}
.ring-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.ring-card img{ display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top center; }
.ring-card__meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; background:linear-gradient(180deg, #141a2d, #10152a);
  border-top:1px solid rgba(255,255,255,.06);
}
.ring-card__label{ font-family:var(--font-display, Inter, sans-serif); font-weight:700; font-size:.98rem; letter-spacing:-.01em; color:var(--white); }
.ring-card__tag{
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:rgba(6,182,212,.12); border:1px solid rgba(6,182,212,.28); padding:3px 8px; border-radius:100px; white-space:nowrap;
}

.ring-controls{
  display:flex; align-items:center; justify-content:center; gap:18px; margin-top:-60px; position:relative; z-index:4;
}
.ring-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-light);
  background:rgba(10,14,26,.9); color:var(--white); cursor:pointer; display:inline-grid; place-items:center;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.ring-btn:hover{ background:rgba(37,99,235,.5); border-color:rgba(6,182,212,.55); box-shadow:0 0 28px rgba(37,99,235,.35); }
.ring-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ring-controls__label{
  min-width:170px; text-align:center; font-size:.9rem; color:var(--gray-300); font-weight:600;
}
.ring-controls__label b{ color:var(--white); font-weight:800; }
.ring-controls__hint{ font-size:.78rem; color:var(--gray-500); text-align:center; margin:10px auto 0; max-width:none; }

.ring-section__actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:28px; position:relative; z-index:1; }

@media (max-width: 1100px){
  .ring-scene{ --card-w:260px; --r:560px; height:360px; }
}

/* Small screens: the ring flattens into a snap scroller with the same cards */
@media (max-width: 760px){
  .ring-scene{
    --card-w:240px; height:auto; perspective:none; display:block; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; padding:8px 24px 28px; cursor:default; touch-action:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none; mask-image:none;
  }
  .ring-scene::-webkit-scrollbar{ display:none; }
  .ring-scene::before, .ring-scene::after{ display:none; }
  .ring{ display:flex; gap:16px; width:max-content; height:auto; transform:none !important; }
  .ring__item{ position:static; transform:none !important; filter:none !important; scroll-snap-align:center; }
  .ring-controls{ display:none; }
  .ring-controls__hint{ display:none; }
}

/* ======================================================================== */
/* Middle-of-page pass: What We Do bento, How It Works rail, included       */
/* checklist, ownership ledger, network split, add-ons, callback form.      */
/* ======================================================================== */

/* hero: the gradient hook is two short lines now */
.hero__title .gradient-text{ white-space:normal; }

/* ---- What We Do bento ---- */
section:has(#what-we-do) .section__header{ margin-bottom:40px; }
.wwd{
  display:grid; grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:auto auto; gap:20px;
}
.wwd__card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:24px; border-radius:18px; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border);
  color:inherit; text-decoration:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.wwd__card:hover{ color:inherit; transform:translateY(-4px); border-color:var(--cloud-line); box-shadow:var(--shadow-lg), 0 0 0 1px rgba(var(--cloud-rgb),.08) inset; }
.wwd__card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wwd__card--big{ grid-column:1; grid-row:1 / 3; }
.wwd__card--wide{ grid-column:2 / 4; grid-row:2; flex-direction:row; align-items:center; gap:28px; }
.wwd__card--wide .wwd__wide-text{ display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.wwd__kicker{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.wwd__title{ font-family:var(--font-display, Inter, sans-serif); font-size:clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing:-.02em; margin:0; color:var(--white); }
.wwd__desc{ color:var(--gray-400); font-size:.95rem; line-height:1.65; margin:0; max-width:48ch; }
.wwd__link{ margin-top:auto; padding-top:6px; font-size:.9rem; font-weight:600; color:var(--accent); }
.wwd__card:hover .wwd__link{ color:var(--white); }

.wwd__collage{
  position:relative; aspect-ratio:4 / 3; margin:-24px -24px 12px; overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%, rgba(37,99,235,.25), transparent 60%), #0b0f1c;
  border-bottom:1px solid var(--border);
}
.wwd__collage img{
  position:absolute; border-radius:10px; border:1px solid rgba(var(--cloud-rgb),.14);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95); object-fit:cover; object-position:top; height:auto;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.wwd__collage img:nth-child(1){ width:70%; left:6%; top:10%; transform:rotate(-2deg); }
.wwd__collage img:nth-child(2){ width:64%; right:4%; bottom:8%; transform:rotate(2deg); }
.wwd__collage-phone{ width:22% !important; aspect-ratio:390/844; right:10%; top:8%; border-radius:16px !important; border:3px solid #0c101d !important; transform:rotate(6deg) !important; z-index:2; }
.wwd__card:hover .wwd__collage img:nth-child(1){ transform:rotate(-2deg) translateY(-6px); }
.wwd__card:hover .wwd__collage img:nth-child(2){ transform:rotate(2deg) translateY(-4px); }
.wwd__card:hover .wwd__collage-phone{ transform:rotate(4deg) translateY(-8px) !important; }

.wwd__visual{
  margin:-24px -24px 10px; padding:22px 22px 18px; min-height:132px; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); border-bottom:1px solid var(--border);
}
.wwd__card--wide .wwd__visual{ margin:-24px 0 -24px -24px; align-self:stretch; border-bottom:0; border-right:1px solid var(--border); width:44%; flex-shrink:0; padding:20px; }
.wwd__visual--email{ align-items:center; justify-content:center; }

/* mini search mock */
.mini-search{ width:100%; display:grid; gap:8px; font-size:.72rem; }
.mini-search__bar{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--gray-300); }
.mini-search__bar::before{ content:''; width:10px; height:10px; border:2px solid var(--gray-400); border-radius:50%; box-shadow:3px 3px 0 -1px var(--gray-400); }
.mini-search__result{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.3); }
.mini-search__pin{ width:14px; height:14px; border-radius:50% 50% 50% 0; background:var(--accent); transform:rotate(-45deg); flex-shrink:0; }
.mini-search__lines{ flex:1; display:grid; gap:5px; }
.mini-search__lines i{ display:block; height:6px; border-radius:3px; background:rgba(255,255,255,.35); }
.mini-search__lines i:last-child{ width:60%; background:rgba(255,255,255,.18); }
.mini-search__stars{ color:#fbbf24; letter-spacing:.05em; font-size:.7rem; }
.mini-search__ai{ justify-self:start; padding:5px 10px; border-radius:100px; background:rgba(124,58,237,.16); border:1px solid rgba(124,58,237,.4); color:#c4b5fd; font-weight:700; letter-spacing:.04em; }
.mini-search__ai::before{ content:'✦ '; }

/* mini flow mock */
.mini-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; font-size:.7rem; }
.mini-flow__chip{ padding:6px 10px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--gray-200); font-weight:600; white-space:nowrap; }
.mini-flow__chip--end{ background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.4); color:#6ee7b7; }
.mini-flow__arrow{ width:14px; height:1px; background:linear-gradient(90deg, var(--accent), transparent); position:relative; }
.mini-flow__arrow::after{ content:''; position:absolute; right:0; top:-2px; border:2.5px solid transparent; border-left-color:var(--accent); }

/* mini mail mock */
.mini-mail{ width:min(100%, 260px); border-radius:12px; overflow:hidden; background:#fff; color:#0f172a; box-shadow:0 24px 50px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); font-size:.7rem; transform:rotate(-1.5deg); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.wwd__card:hover .mini-mail{ transform:rotate(0) translateY(-4px); }
.mini-mail__bar{ display:flex; align-items:center; gap:5px; padding:8px 10px; background:#f1f5f9; border-bottom:1px solid #e2e8f0; }
.mini-mail__bar i{ width:7px; height:7px; border-radius:50%; background:#cbd5e1; }
.mini-mail__bar span{ margin-left:6px; font-weight:700; color:#334155; }
.mini-mail__hero{ aspect-ratio:16 / 7; background-size:cover; background-position:top center; }
.mini-mail__body{ padding:12px 14px 14px; display:grid; gap:7px; }
.mini-mail__body b{ display:block; height:9px; width:70%; border-radius:4px; background:#0f172a; }
.mini-mail__body i{ display:block; height:6px; width:92%; border-radius:3px; background:#cbd5e1; }
.mini-mail__body i + i{ width:64%; }
.mini-mail__btn{ justify-self:start; margin-top:4px; padding:6px 12px; border-radius:6px; background:var(--gradient); color:#fff; font-weight:700; }

.wwd__chips{
  list-style:none; margin:20px 0 0; padding:14px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  border-radius:14px; border:1px dashed rgba(var(--cloud-rgb),.22);
}
.wwd__chips li{ font-size:.82rem; color:var(--gray-200); padding:6px 12px; border-radius:100px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.wwd__chips li::before{ content:'✓ '; color:#34d399; font-weight:800; }
.wwd__chips-label{ background:none !important; border:0 !important; padding-left:0 !important; color:var(--accent) !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.72rem !important; }
.wwd__chips-label::before{ content:'' !important; }

@media (max-width: 980px){
  .wwd{ grid-template-columns:1fr 1fr; }
  .wwd__card--big{ grid-column:1 / 3; grid-row:auto; }
  .wwd__card--wide{ grid-column:1 / 3; grid-row:auto; }
  .wwd__collage{ aspect-ratio:16 / 8; }
}
@media (max-width: 640px){
  .wwd{ grid-template-columns:1fr; }
  .wwd__card--big, .wwd__card--wide{ grid-column:auto; }
  .wwd__card--wide{ flex-direction:column; align-items:stretch; gap:12px; }
  .wwd__card--wide .wwd__visual{ width:auto; margin:-24px -24px 6px; border-right:0; border-bottom:1px solid var(--border); }
  .wwd__collage{ aspect-ratio:4 / 3; }
}

/* ---- How It Works rail ---- */
.rail{
  list-style:none; margin:0; padding:36px 0 0; position:relative;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
}
.rail::before{
  content:''; position:absolute; top:0; left:4%; right:4%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--cloud-rgb),.35), var(--accent), rgba(124,58,237,.6), transparent);
}
.rail__step{ position:relative; padding-top:6px; }
.rail__step::before{
  content:''; position:absolute; top:-41px; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--bg-dark); border:2px solid var(--accent); box-shadow:0 0 14px rgba(6,182,212,.6);
}
.rail__num{
  display:block; font-family:var(--font-display, Inter, sans-serif); font-size:2.6rem; font-weight:800; letter-spacing:-.04em; line-height:1;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:12px; font-variant-numeric:tabular-nums;
}
.rail__title{ font-family:var(--font-display, Inter, sans-serif); font-size:1.2rem; letter-spacing:-.02em; margin:0 0 6px; }
.rail__desc{ color:var(--gray-400); font-size:.95rem; line-height:1.6; margin:0; max-width:30ch; }
@media (max-width: 860px){
  .rail{ grid-template-columns:1fr 1fr; gap:32px 24px; padding-top:0; }
  .rail::before, .rail__step::before{ display:none; }
}
@media (max-width: 480px){ .rail{ grid-template-columns:1fr; } }

/* ---- Included checklist ---- */
section:has(#whats-included) .section__header{ text-align:center; margin:0 auto 48px; max-width:700px; }
.inc{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.inc__item{
  padding:20px 20px 18px; border-radius:14px; background:var(--bg-card); border:1px solid var(--border);
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.inc__item:hover{ transform:translateY(-3px); border-color:var(--cloud-line); }
.inc__icon{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background:rgba(37,99,235,.12); font-size:1.15rem; margin-bottom:12px; }
.inc__title{ font-family:var(--font-display, Inter, sans-serif); font-size:1.02rem; letter-spacing:-.01em; margin:0 0 4px; }
.inc__desc{ color:var(--gray-400); font-size:.88rem; line-height:1.55; margin:0; }
.inc__foot{ max-width:640px; margin-left:auto; margin-right:auto; }
@media (max-width: 980px){ .inc{ grid-template-columns:1fr 1fr; } }
@media (max-width: 480px){ .inc{ grid-template-columns:1fr; } }

/* ---- Ownership ledger ---- */
.own{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:980px; margin:0 auto; }
.own__col{ padding:28px; border-radius:16px; background:var(--bg-card); border:1px solid var(--border); }
.own__col--us{ border-color:rgba(6,182,212,.3); background:linear-gradient(180deg, rgba(37,99,235,.08), var(--bg-card)); }
.own__title{ font-family:var(--font-display, Inter, sans-serif); font-size:1.2rem; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.own__tag{ font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:100px; }
.own__tag--you{ background:rgba(var(--cloud-rgb),.12); color:var(--cloud); border:1px solid rgba(var(--cloud-rgb),.3); }
.own__tag--us{ background:rgba(6,182,212,.14); color:var(--accent); border:1px solid rgba(6,182,212,.35); }
.own__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.own__list li{ padding:10px 0 10px 26px; position:relative; color:var(--gray-300); font-size:.95rem; line-height:1.55; border-bottom:1px solid var(--border); }
.own__list li:last-child{ border-bottom:0; }
.own__list li::before{ content:'→'; position:absolute; left:0; top:10px; color:var(--gray-500); }
.own__list--check li::before{ content:'✓'; color:#34d399; font-weight:800; }
@media (max-width: 760px){ .own{ grid-template-columns:1fr; } }

/* ---- The 89 network split ---- */
.net{ align-items:center; }
.net__visual{ position:relative; }
.net__visual img{
  display:block; width:100%; height:auto; border-radius:20px;
  border:1px solid rgba(var(--cloud-rgb),.12); box-shadow:0 40px 90px -40px rgba(0,0,0,.95), 0 0 80px -30px rgba(37,99,235,.5);
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%);
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* ---- CTA + callback form ---- */
.cta-section--form{ text-align:left; }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 72px); align-items:center; }
.cta-grid__copy{ max-width:none; margin:0; }
.cta-section--form .cta-section__desc{ margin-left:0; max-width:48ch; }
.cta-section--form .cta-section__actions{ justify-content:flex-start; }

.callback-wrap{ position:relative; }
.callback{
  position:relative; padding:28px; border-radius:20px;
  background:linear-gradient(180deg, rgba(21,27,46,.95), rgba(15,22,41,.95));
  border:1px solid rgba(var(--cloud-rgb),.16);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4), 0 0 90px -30px rgba(37,99,235,.35);
}
.callback__head{ margin-bottom:20px; }
.callback__badge{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6ee7b7; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35); padding:5px 10px; border-radius:100px; margin-bottom:12px; }
.callback__title{ font-family:var(--font-display, Inter, sans-serif); font-size:clamp(1.35rem, 2vw, 1.7rem); letter-spacing:-.02em; margin:0 0 6px; }
.callback__sub{ color:var(--gray-400); font-size:.95rem; line-height:1.6; margin:0; max-width:none; }
.callback__step[hidden]{ display:none; }
.callback__label{ display:block; font-size:.9rem; font-weight:600; color:var(--gray-200); margin-bottom:10px; }
.callback__row{ display:flex; gap:10px; }
.callback__input{
  flex:1; min-width:0; padding:14px 16px; font-size:1.05rem; font-family:inherit; color:var(--white);
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.callback__input::placeholder{ color:var(--gray-600); }
.callback__input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(6,182,212,.18); }
.callback__input[aria-invalid="true"]{ border-color:#f87171; box-shadow:0 0 0 3px rgba(248,113,113,.18); }
.callback__row .btn{ white-space:nowrap; border-radius:12px; padding:14px 22px; }
.callback__when{ border:0; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.callback__legend{ float:left; font-size:.8rem; color:var(--gray-500); margin-right:4px; padding:0; }
.callback__chip{ position:relative; cursor:pointer; }
.callback__chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.callback__chip span{ display:inline-block; padding:6px 12px; border-radius:100px; font-size:.82rem; color:var(--gray-300); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background .2s, border-color .2s, color .2s; }
.callback__chip input:checked + span{ background:rgba(37,99,235,.25); border-color:rgba(6,182,212,.5); color:var(--white); }
.callback__chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.callback__turnstile{ margin-top:14px; min-height:0; }
.callback__turnstile:empty{ display:none; }
.callback__back{ margin-top:14px; background:none; border:0; padding:0; color:var(--gray-500); font:inherit; font-size:.82rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.callback__back:hover{ color:var(--gray-300); }
.callback__progress{ margin:16px 0 0; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-500); font-weight:700; }
.callback__error{ margin:12px 0 0; color:#fca5a5; font-size:.9rem; }
.callback__legal{ margin:10px 0 0; font-size:.78rem; color:var(--gray-600); }
.callback__legal a{ color:var(--gray-500); }
.callback.is-sending .btn{ opacity:.7; pointer-events:none; }

.callback--done{ text-align:left; }
.callback--done[hidden]{ display:none; }
.callback__check{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(16,185,129,.16); border:1px solid rgba(16,185,129,.45); color:#6ee7b7; font-size:1.3rem; font-weight:800; margin-bottom:16px; box-shadow:0 0 30px rgba(16,185,129,.35); }
.callback--done .callback__sub b{ color:var(--white); }

/* focus the pane when arriving via #callback */
.cta-section--form:target .callback{ animation:callback-pulse 1.4s ease-out 1; }
@keyframes callback-pulse{ 0%{ box-shadow:0 0 0 0 rgba(6,182,212,.5); } 100%{ box-shadow:0 0 0 24px rgba(6,182,212,0); } }

@media (max-width: 900px){
  .cta-grid{ grid-template-columns:1fr; }
  .cta-section--form{ text-align:center; }
  .cta-section--form .cta-section__desc{ margin:0 auto 32px; }
  .cta-section--form .cta-section__actions{ justify-content:center; }
  .callback{ text-align:left; padding:22px; }
  .callback__row{ flex-direction:column; }
}


/* ======================================================================== */
/* Mobile-only hero: swipeable deck of real client phone screenshots.       */
/* Desktop (>=1024px) keeps the live wall and never renders this.           */
/* ======================================================================== */
.hero__subtitle--mobile{ display:none; }
.hero__deck{ display:none; }

@media (max-width: 1023px){
  .hero{ padding-top:calc(var(--nav-height) + 28px); padding-bottom:48px; min-height:0; }
  .hero__badge{ font-size:.78rem; padding:7px 14px; margin-bottom:18px; }
  .hero__title{ margin-bottom:14px; }
  .hero__title .gradient-text{ min-height:0; }
  .hero__subtitle{ display:none; }
  .hero__subtitle--mobile{ display:block; font-size:1.02rem; line-height:1.6; margin-bottom:22px; max-width:none; }
  .hero__actions{ margin-bottom:28px; }

  .hero__deck{
    display:block; position:relative; margin:6px auto 26px; max-width:420px;
    padding:14px 0 0;
  }
  .hero__deck::before{
    content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
    width:120%; height:78%; pointer-events:none; z-index:0;
    background:radial-gradient(ellipse 55% 60% at 50% 50%, rgba(37,99,235,.28), transparent 70%),
               radial-gradient(ellipse 40% 50% at 70% 70%, rgba(6,182,212,.18), transparent 70%);
  }
  .deck{
    position:relative; height:330px; z-index:1;
    perspective:1000px; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  }
  .deck__card{
    position:absolute; left:50%; top:0; width:158px; aspect-ratio:390 / 844;
    margin-left:-79px; border-radius:24px; overflow:hidden; display:block;
    border:5px solid #0c101d; background:#0c101d;
    box-shadow:0 30px 60px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08);
    transform:translateX(var(--x, 0)) translateY(var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
    filter:brightness(var(--b, 1));
    opacity:var(--o, 1);
    z-index:var(--z, 1);
    transition:transform .6s cubic-bezier(.22,1,.36,1), filter .5s ease, opacity .5s ease;
    -webkit-mask-image:linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 78%, transparent 100%);
    will-change:transform;
  }
  .deck__card img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; pointer-events:none; }
  .deck__card[data-pos="0"]{ --x:0; --y:0; --r:0deg; --s:1; --b:1; --o:1; --z:5; animation:deck-float 5s ease-in-out infinite; }
  .deck__card[data-pos="1"]{ --x:74px; --y:12px; --r:9deg; --s:.9; --b:.62; --o:1; --z:4; }
  .deck__card[data-pos="2"]{ --x:-74px; --y:12px; --r:-9deg; --s:.9; --b:.62; --o:1; --z:3; }
  .deck__card[data-pos="3"]{ --x:0; --y:-18px; --r:0deg; --s:.82; --b:.4; --o:.9; --z:2; }
  .deck__card[data-pos="4"]{ --x:0; --y:-26px; --r:0deg; --s:.76; --b:.3; --o:0; --z:1; }
  .deck__card.is-leaving{ transition:transform .45s cubic-bezier(.4,0,.6,1), opacity .35s ease; --o:0; }
  .deck.is-dragging .deck__card{ transition:none; }
  .deck.is-dragging .deck__card[data-pos="0"]{ animation:none; }
  .deck__card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  @keyframes deck-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }

  .deck__bar{
    position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:-30px auto 0; padding:10px 10px 10px 16px; max-width:340px;
    border-radius:16px; background:rgba(10,14,26,.88); border:1px solid rgba(var(--cloud-rgb),.16);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .deck__caption{ display:grid; gap:2px; min-width:0; }
  .deck__name{ font-family:var(--font-display, Inter, sans-serif); font-size:.98rem; letter-spacing:-.01em; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .deck__meta{ font-size:.74rem; color:var(--gray-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .deck__next{
    flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(6,182,212,.4);
    background:linear-gradient(135deg, rgba(37,99,235,.55), rgba(6,182,212,.4)); color:#fff; display:grid; place-items:center; cursor:pointer;
  }
  .deck__next:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .deck__dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
  .deck__dots i{ width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.18); transition:width .3s, background .3s; }
  .deck__dots i.is-active{ width:18px; background:var(--accent); }
  .deck__hint{
    position:absolute; right:6px; top:150px; z-index:6; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gray-300); padding:6px 10px; border-radius:100px; background:rgba(10,14,26,.8); border:1px solid rgba(255,255,255,.1);
    animation:deck-hint 1.6s ease-in-out infinite; transition:opacity .4s ease;
  }
  .deck__hint::after{ content:' ←'; }
  .hero__deck.is-touched .deck__hint{ opacity:0; }
  @keyframes deck-hint{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-6px); } }

  /* stats collapse into a compact chip row */
  .hero__stats{ display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; }
  .hero__stat{ display:flex; align-items:baseline; gap:8px; padding:8px 14px; border-radius:100px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-left:1px solid rgba(255,255,255,.08); text-align:left; }
  .hero__stat::before, .hero__stat::after{ content:none; }
  .hero__stat:nth-child(3)::after{ content:'Lighthouse, all five'; }
  .hero__stat-value{ font-size:1.05rem; }
  .hero__stat-label{ font-size:.74rem; margin:0; color:var(--gray-400); }
  .hero__stat:nth-child(3) .hero__stat-label{ display:none; }
  .hero__stat:nth-child(3)::after{ content:'Lighthouse, all five'; font-size:.74rem; color:var(--gray-400); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce){
  .deck__card[data-pos="0"], .deck__hint{ animation:none; }
}

/* ---- The 89 network diagram (replaces the stock photo) ---- */
.netviz{ position:relative; aspect-ratio:600 / 440; width:100%; max-width:600px; margin:0 auto; }
.netviz::before{
  content:''; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 45% 45% at 50% 50%, rgba(37,99,235,.22), transparent 70%);
}
.netviz__lines{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.netviz__edge{ stroke:rgba(var(--cloud-rgb),.3); stroke-width:1.2; stroke-dasharray:4 6; animation:netviz-flow 6s linear infinite; }
.netviz__edge--hub{ stroke:rgba(6,182,212,.6); stroke-width:1.5; stroke-dasharray:6 8; animation-duration:4s; }
@keyframes netviz-flow{ to{ stroke-dashoffset:-140; } }
.netviz__pulse{ fill:#fff; filter:drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px var(--accent)); }
.netviz__node{
  position:absolute; left:var(--x); top:var(--y); z-index:2; transform:translate(-50%,-50%);
  width:clamp(52px, 13%, 78px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:2px solid rgba(var(--cloud-rgb),.35); background:#0c101d;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.9), 0 0 0 4px rgba(10,14,26,.9), 0 0 24px -6px rgba(6,182,212,.5);
  animation:netviz-bob 6s ease-in-out infinite; animation-delay:var(--d, 0s);
  transition:transform .3s ease, border-color .3s ease;
}
.netviz__node:hover{ transform:translate(-50%,-50%) scale(1.12); border-color:var(--accent); z-index:4; }
.netviz__node img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.netviz__node--hub{
  width:clamp(80px, 18%, 108px); display:grid; place-items:center; overflow:visible; z-index:3; animation:none;
  background:radial-gradient(circle at 50% 40%, #1a2240, #0a0e1a); border-color:rgba(6,182,212,.6);
  box-shadow:0 0 0 6px rgba(10,14,26,.9), 0 0 0 7px rgba(6,182,212,.25), 0 0 60px -10px rgba(37,99,235,.8);
  font-family:var(--font-display, Inter, sans-serif); font-weight:800; font-size:clamp(.8rem, 1.6vw, 1.05rem); letter-spacing:-.02em; color:#fff;
}
.netviz__node--hub::after{
  content:''; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(6,182,212,.35);
  animation:netviz-ring 3s ease-out infinite;
}
@keyframes netviz-ring{ 0%{ transform:scale(.8); opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } }
@keyframes netviz-bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -5px; } }
@media (prefers-reduced-motion: reduce){
  .netviz__edge, .netviz__node, .netviz__node--hub::after{ animation:none; }
  .netviz__pulse{ display:none; }
}