/* =========================================================================
   Yuvau V1 — Homepage Hero + Growth Wheel (Stage 4)
   Reuses Stage 2 typography/buttons/eyebrow + Stage 3 glass. Wheel ported
   faithfully from reference/yuvau-v1-final.html; colours via --yv-* tokens.
   Depends on: tokens.css, base.css, glass.css, buttons.css, global-ui.css.
   ========================================================================= */

/* ------------------------------ Hero layout ------------------------------ */
.yv-hero { position: relative; padding: clamp(132px, 17vh, 190px) 0 clamp(64px, 10vh, 110px); }
.yv-hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center;
}
.yv-hero__lead {
  max-width: 620px; color: var(--yv-text-mid); font-weight: 500;
  margin: clamp(20px, 3vh, 30px) 0 clamp(20px, 3vh, 28px);
}
.yv-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Headline emphasis — blue → light-blue → magenta (Stage 4 direction) */
.yv-hero__accent {
  background: linear-gradient(100deg, var(--yv-blue), #4B9DFF 46%, var(--yv-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------ Wheel frame ------------------------------ */
.yv-wheel-wrap {
  position: relative; min-height: 520px;
  display: grid; place-items: center; isolation: isolate;
}
.yv-wheel-atmosphere {
  position: absolute; width: 390px; height: 390px; border-radius: 50%;
  filter: blur(26px); pointer-events: none; z-index: -2;
}
.yv-wheel-atmosphere--blue    { background: radial-gradient(circle, rgba(21,87,232,.15), transparent 68%); transform: translate(-55px,-35px); }
.yv-wheel-atmosphere--magenta { background: radial-gradient(circle, rgba(232,60,240,.10), transparent 69%); transform: translate(85px,75px); }

.yv-orbit { width: 455px; height: 455px; position: relative; display: grid; place-items: center; }

.yv-orbit-track {
  position: absolute; inset: 45px; border: 1px solid rgba(21,87,232,.14);
  border-radius: 50%; box-shadow: 0 0 0 13px rgba(21,87,232,.025);
}
.yv-orbit-track::before, .yv-orbit-track::after {
  content: ""; position: absolute; border-radius: 50%; inset: 25px;
  border: 1px dashed rgba(21,87,232,.09);
}
.yv-orbit-track::after { inset: -12px; border: 1px solid rgba(232,60,240,.07); }

.yv-orbit-accent {
  position: absolute; inset: 37px; border-radius: 50%;
  border: 12px solid transparent; pointer-events: none;
}
.yv-orbit-accent--a {
  border-top-color: rgba(21,87,232,.76); border-right-color: rgba(86,154,255,.68);
  transform: rotate(-18deg); animation: yv-orbitArcA 19s linear infinite;
}
.yv-orbit-accent--b {
  border-bottom-color: rgba(232,60,240,.72); border-left-color: rgba(126,73,236,.86);
  transform: rotate(147deg); animation: yv-orbitArcB 23s linear infinite;
}
@keyframes yv-orbitArcA { from { transform: rotate(-18deg); } to { transform: rotate(342deg); } }
@keyframes yv-orbitArcB { from { transform: rotate(147deg); } to { transform: rotate(-213deg); } }

/* ------------------------------ Center core ------------------------------ */
.yv-wheel-core {
  width: 215px; height: 215px; position: absolute; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 27px; z-index: 10;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.99), rgba(247,251,255,.92) 56%, rgba(230,239,255,.80));
  border: 1px solid rgba(21,87,232,.14);
  box-shadow: 0 24px 58px rgba(21,87,232,.11), 0 8px 26px rgba(232,60,240,.05), inset 0 1px rgba(255,255,255,.98);
}
.yv-core-kicker { font-size: 8px; letter-spacing: .18em; color: #7A8CA8; font-weight: 850; text-transform: uppercase; }
.yv-core-title  { margin-top: 10px; color: #0A1D3B; font-size: 24px; line-height: .98; letter-spacing: -.06em; font-weight: 820; }
.yv-core-title span {
  background: linear-gradient(90deg, var(--yv-blue), #4C8FFF, var(--yv-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.yv-core-copy { margin-top: 9px; font-size: 9px; color: #6D7E9B; }

/* ------------------------------ Play button ------------------------------ */
.yv-wheel-play {
  width: 44px; height: 44px; margin-top: 14px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, var(--yv-blue), #4B8FFF 62%, var(--yv-magenta));
  box-shadow: 0 0 0 6px rgba(21,87,232,.065), 0 12px 25px rgba(21,87,232,.18);
  transition: transform var(--yv-dur) var(--yv-ease), box-shadow var(--yv-dur) var(--yv-ease);
}
.yv-wheel-play:hover { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(21,87,232,.08), 0 15px 31px rgba(232,60,240,.13); }
.yv-wheel-play:focus-visible { outline: 2px solid var(--yv-focus); outline-offset: 4px; }
.yv-play-triangle {
  width: 0; height: 0; margin-left: 2px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #fff;
}

/* ------------------------------ Orbit stages ------------------------------ */
.yv-orbit-stage {
  position: absolute; z-index: 12;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px;
  min-width: 112px; padding: 9px 11px; border-radius: 12px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(21,87,232,.12);
  box-shadow: 0 13px 30px rgba(21,87,232,.08), inset 0 1px rgba(255,255,255,.90);
  -webkit-backdrop-filter: blur(16px) saturate(145%); backdrop-filter: blur(16px) saturate(145%);
  transition: transform var(--yv-dur) var(--yv-ease), box-shadow var(--yv-dur) var(--yv-ease), border-color var(--yv-dur) var(--yv-ease);
}
/* `translate`, not `transform` — a transform here would erase the radial placement. */
.yv-orbit-stage:hover { translate: 0 -3px; border-color: rgba(21,87,232,.22); box-shadow: 0 17px 34px rgba(21,87,232,.12), 0 7px 18px rgba(232,60,240,.06); }
.yv-stage-index { font-size: 8px; color: #7688A3; font-weight: 850; }
.yv-stage-dot   { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 10px rgba(21,87,232,.17); }
.yv-stage-dot--blue    { background: var(--yv-blue); }
.yv-stage-dot--cyan    { background: #4B9DFF; }
.yv-stage-dot--magenta { background: var(--yv-magenta); }
.yv-stage-dot--yellow  { background: var(--yv-yellow); }
.yv-stage-dot--purple  { background: #9B4BFF; }
.yv-stage-dot--blue2   { background: #3D79FF; }
.yv-stage-name { color: #203452; font-size: 10px; font-weight: 800; white-space: nowrap; letter-spacing: -.1px; }

/* Placed on the orbit by geometry rather than hand-tuned pixels. The old values
   were not symmetric — 01 sat at left:38px while its mirror 02 sat at right:19px,
   and 04/05 differed too, which is what made the wheel look out of alignment.
   --yv-sx / --yv-cy are sin(angle) and -cos(angle) for six points 60° apart.
   The radius is slightly elliptical so the wide side pills stay in the box. */
.yv-orbit { --yv-rx: 150px; --yv-ry: 180px; }
.yv-orbit-stage {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%)
             translate(calc(var(--yv-rx) * var(--yv-sx, 0)), calc(var(--yv-ry) * var(--yv-cy, 0)));
}
.yv-orbit-stage--1 { --yv-sx: -.5; --yv-cy: -.866; }  /* upper left  */
.yv-orbit-stage--2 { --yv-sx:  .5; --yv-cy: -.866; }  /* upper right */
.yv-orbit-stage--3 { --yv-sx:   1; --yv-cy:     0; }  /* right       */
.yv-orbit-stage--4 { --yv-sx:  .5; --yv-cy:  .866; }  /* lower right */
.yv-orbit-stage--5 { --yv-sx: -.5; --yv-cy:  .866; }  /* lower left  */
.yv-orbit-stage--6 { --yv-sx:  -1; --yv-cy:     0; }  /* left        */

/* ------------------------------ Badge ------------------------------ */
.yv-wheel-badge {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: var(--yv-radius-pill);
  background: rgba(255,255,255,.58); border: 1px solid rgba(21,87,232,.11);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 11px 24px rgba(21,87,232,.07);
  color: #6F819B; font-size: 8px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase;
}
.yv-wheel-badge strong { color: var(--yv-magenta); font-size: 10px; }

/* ------------------------------ Dark theme ------------------------------ */
:root[data-theme="dark"] .yv-wheel-core, .dark-theme .yv-wheel-core {
  background: radial-gradient(circle at 30% 25%, rgba(17,43,82,.98), rgba(8,26,56,.95));
  border-color: rgba(111,166,255,.24);
  box-shadow: 0 24px 58px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
}
:root[data-theme="dark"] .yv-core-kicker, :root[data-theme="dark"] .yv-core-copy,
.dark-theme .yv-core-kicker, .dark-theme .yv-core-copy { color: #9CACC5; }
:root[data-theme="dark"] .yv-core-title, .dark-theme .yv-core-title { color: #F4F8FF; }
:root[data-theme="dark"] .yv-orbit-stage, .dark-theme .yv-orbit-stage {
  background: rgba(8,28,59,.60); border-color: rgba(111,166,255,.20);
  box-shadow: 0 15px 30px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.06);
}
:root[data-theme="dark"] .yv-stage-name, .dark-theme .yv-stage-name { color: #EEF4FD; }
:root[data-theme="dark"] .yv-stage-index, .dark-theme .yv-stage-index { color: #93A5C2; }
:root[data-theme="dark"] .yv-wheel-badge, .dark-theme .yv-wheel-badge {
  background: rgba(8,28,59,.56); border-color: rgba(111,166,255,.18); color: #9BACC7;
}
:root[data-theme="dark"] .yv-orbit-track, .dark-theme .yv-orbit-track { border-color: rgba(111,166,255,.18); }
:root[data-theme="dark"] .yv-orbit-track::before, .dark-theme .yv-orbit-track::before { border-color: rgba(111,166,255,.10); }
:root[data-theme="dark"] .yv-orbit-track::after, .dark-theme .yv-orbit-track::after { border-color: rgba(232,60,240,.09); }

/* ------------------------------ Video modal ------------------------------ */
.yv-video-modal {
  position: fixed; inset: 0; z-index: var(--yv-z-modal);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.yv-video-modal.is-open { display: flex; }
.yv-video-modal__backdrop {
  position: absolute; inset: 0; background: rgba(4,10,24,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.yv-video-modal__card {
  position: relative; width: 100%; max-width: 640px; padding: 28px;
  border-radius: var(--yv-radius-panel); background: var(--yv-glass-bg-strong);
  border: 1px solid var(--yv-line); box-shadow: var(--yv-glass-highlight), var(--yv-glass-shadow);
  -webkit-backdrop-filter: blur(var(--yv-glass-blur-strong)) saturate(var(--yv-glass-saturate));
  backdrop-filter: blur(var(--yv-glass-blur-strong)) saturate(var(--yv-glass-saturate));
}
.yv-video-modal__close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--yv-line); background: var(--yv-btn-soft-bg); color: var(--yv-text);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.yv-video-modal__label { font-size: var(--yv-fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--yv-text-mid); font-weight: var(--yv-fw-kicker); }
.yv-video-modal__media {
  margin-top: 14px; aspect-ratio: 16 / 9; border-radius: var(--yv-radius-media);
  display: grid; place-items: center; text-align: center; padding: 16px;
  color: var(--yv-text-mid); border: 1px solid var(--yv-line);
  background: linear-gradient(135deg, #CFE1FF 0%, #EAF2FF 60%, #F8FBFF 100%);
}
:root[data-theme="dark"] .yv-video-modal__media, .dark-theme .yv-video-modal__media {
  background: linear-gradient(135deg, rgba(14,48,98,.5), rgba(8,26,58,.4)); color: var(--yv-text-mid);
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 900px) {
  .yv-hero__grid { grid-template-columns: 1fr; gap: 40px; }  /* text first, wheel below */
  .yv-wheel-wrap { min-height: 410px; }
  .yv-orbit { width: 395px; height: 395px; }
  .yv-orbit-stage { min-width: 104px; padding: 8px 9px; }
  /* Only the radius changes — placement stays geometric. */
  .yv-orbit { --yv-rx: 112px; --yv-ry: 150px; }
}
@media (max-width: 600px) {
  .yv-wheel-wrap { min-height: 345px; }
  .yv-orbit { width: 320px; height: 320px; }
  .yv-wheel-core { width: 166px; height: 166px; padding: 18px; }
  .yv-core-title { font-size: 19px; }
  .yv-core-copy { font-size: 8px; }
  .yv-wheel-play { width: 38px; height: 38px; margin-top: 10px; }
  .yv-orbit-accent { inset: 27px; border-width: 10px; }
  .yv-orbit-track { inset: 33px; }
  .yv-orbit-track::before { inset: 19px; }
  .yv-orbit-stage { min-width: 86px; padding: 7px 8px; gap: 5px; }
  .yv-stage-name { font-size: 8px; }
  .yv-stage-index { font-size: 7px; }
  .yv-stage-dot { width: 5px; height: 5px; }
  .yv-orbit { --yv-rx: 108px; --yv-ry: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .yv-orbit-accent--a, .yv-orbit-accent--b { animation: none; }
}


/* =========================================================
   Stage 9 Homepage visual sync — richer wheel + sequential stage cards
   ========================================================= */
.yv-hero__grid{gap:54px;align-items:center}
.yv-hero__lead{max-width:620px}
.yv-orbit{width:480px;height:480px;transform:translateZ(0)}
.yv-orbit::before{content:"";position:absolute;inset:14px;border-radius:50%;background:conic-gradient(from -50deg,rgba(21,87,232,0) 0deg,rgba(21,87,232,.18) 42deg,rgba(232,60,240,.14) 95deg,rgba(126,73,236,.10) 145deg,rgba(21,87,232,0) 210deg,rgba(232,60,240,.14) 285deg,rgba(21,87,232,0) 360deg);filter:blur(13px);animation:yv-wheelAura 9s ease-in-out infinite;pointer-events:none;z-index:-1}
.yv-orbit::after{content:"";position:absolute;inset:58px;border-radius:50%;border:1px solid rgba(255,255,255,.28);box-shadow:0 0 0 18px rgba(255,255,255,.04),inset 0 0 45px rgba(21,87,232,.05);pointer-events:none;z-index:1}
@keyframes yv-wheelAura{0%,100%{transform:scale(.96) rotate(0deg);opacity:.72}50%{transform:scale(1.03) rotate(12deg);opacity:1}}
.yv-orbit-accent--a,.yv-orbit-accent--b{border-width:13px;filter:drop-shadow(0 0 8px rgba(21,87,232,.14))}
.yv-orbit-stage{min-width:122px;position:absolute;cursor:default;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease,background .32s ease}
.yv-orbit-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 38%,rgba(232,60,240,.045));pointer-events:none}
.yv-orbit-stage::before{content:"";position:absolute;inset:-5px;border-radius:inherit;border:1px solid transparent;pointer-events:none;opacity:0}
.yv-orbit-stage.active::before{border-color:rgba(21,87,232,.22);opacity:1;animation:yvStagePulse 4.2s cubic-bezier(.22,.61,.36,1) both}
@keyframes yvStagePulse{0%{transform:scale(.96);opacity:0}12%{opacity:1}72%{transform:scale(1.06);opacity:.55}100%{transform:scale(1.1);opacity:0}}
.yv-orbit-stage.active{translate:0 -6px;scale:1.06;border-color:rgba(21,87,232,.32);box-shadow:0 22px 42px rgba(21,87,232,.14),0 9px 24px rgba(232,60,240,.08),0 0 0 4px rgba(21,87,232,.06),inset 0 1px rgba(255,255,255,.95)}
.yv-orbit-stage.active .yv-stage-dot{transform:scale(1.5);box-shadow:0 0 0 5px rgba(21,87,232,.08),0 0 17px rgba(232,60,240,.18)}
.yv-orbit-stage.active .yv-stage-index{color:var(--yv-blue)}
.yv-stage-summary{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%) translateY(-3px) scale(.90);width:156px;padding:9px 11px;border-radius:12px;border:1px solid rgba(21,87,232,.13);background:rgba(255,255,255,.80);backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%);box-shadow:0 15px 32px rgba(21,87,232,.10),0 5px 16px rgba(232,60,240,.05);color:#637590;font-size:9px;line-height:1.35;font-weight:720;text-align:left;opacity:0;visibility:hidden;pointer-events:none;z-index:30;transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .24s ease}
/* Shown on hover/focus only. It used to also appear on `.active`, so the
   auto-cycling highlight popped a description card over the wheel that nobody
   asked for — which read as a stuck, misplaced panel. */
.yv-orbit-stage:hover .yv-stage-summary,.yv-orbit-stage:focus-within .yv-stage-summary{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
.yv-orbit-stage--1 .yv-stage-summary,.yv-orbit-stage--2 .yv-stage-summary{top:calc(100% + 9px)}
.yv-orbit-stage--3 .yv-stage-summary{top:50%;left:calc(100% + 9px);right:auto;transform:translateY(-50%) translateX(-4px) scale(.90)}
.yv-orbit-stage--6 .yv-stage-summary{top:50%;left:auto;right:calc(100% + 9px);transform:translateY(-50%) translateX(4px) scale(.90)}
.yv-orbit-stage--4 .yv-stage-summary,.yv-orbit-stage--5 .yv-stage-summary{top:auto;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px) scale(.90)}
.yv-orbit-stage--3:hover .yv-stage-summary,.yv-orbit-stage--3:focus-within .yv-stage-summary{transform:translateY(-50%) translateX(0) scale(1)}
.yv-orbit-stage--6:hover .yv-stage-summary,.yv-orbit-stage--6:focus-within .yv-stage-summary{transform:translateY(-50%) translateX(0) scale(1)}
.yv-orbit-stage--4:hover .yv-stage-summary,.yv-orbit-stage--5:hover .yv-stage-summary,.yv-orbit-stage--4:focus-within .yv-stage-summary,.yv-orbit-stage--5:focus-within .yv-stage-summary{transform:translateX(-50%) translateY(0) scale(1)}
.yv-wheel-core{box-shadow:0 24px 58px rgba(21,87,232,.11),0 8px 26px rgba(232,60,240,.05),inset 0 1px rgba(255,255,255,.98)}
:root[data-theme="dark"] .yv-stage-summary,.dark-theme .yv-stage-summary{background:rgba(8,27,56,.82);border-color:rgba(111,166,255,.22);color:#d5dfef;box-shadow:0 15px 32px rgba(0,0,0,.24),0 5px 16px rgba(232,60,240,.06)}
:root[data-theme="dark"] .yv-orbit-stage,.dark-theme .yv-orbit-stage{background:rgba(8,28,59,.60)}
@media(max-width:900px){.yv-orbit{width:360px;height:360px}.yv-wheel-wrap{min-height:420px}.yv-stage-summary{width:145px;font-size:8.5px}.yv-orbit-stage{min-width:116px}}
@media(max-width:600px){.yv-orbit{width:315px;height:315px}.yv-wheel-wrap{min-height:360px}.yv-wheel-core{width:170px;height:170px;padding:21px}.yv-core-title{font-size:18px}.yv-core-copy{font-size:8px}.yv-wheel-play{width:40px;height:40px}.yv-orbit-stage{min-width:98px;padding:7px 8px;gap:5px}.yv-stage-name{font-size:8.5px}.yv-stage-index{font-size:7px}.yv-stage-summary{width:126px;font-size:8px;padding:7px 8px}}
@media(prefers-reduced-motion:reduce){.yv-orbit::before,.yv-orbit-accent--a,.yv-orbit-accent--b{animation:none}.yv-orbit-stage{transition:none}}


/* Fix C: keep the growth wheel + orbit pills inside narrow viewports. */
@media (max-width: 600px) {
  .yv-hero { overflow-x: clip; }
  .yv-orbit { transform: scale(.86); transform-origin: center; }
}
@media (max-width: 400px) {
  .yv-orbit { transform: scale(.76); }
}


/* ========================= Hero motion polish ========================= */
.yv-wheel-core{animation:yvCoreBreathe 5.5s ease-in-out infinite}
.yv-wheel-play{animation:yvPlayGlow 4.2s ease-in-out infinite}
@keyframes yvCoreBreathe{0%,100%{transform:translateZ(30px) scale(1);box-shadow:0 24px 58px rgba(21,87,232,.11),0 8px 26px rgba(232,60,240,.05),inset 0 1px rgba(255,255,255,.98)}50%{transform:translateZ(30px) scale(1.018);box-shadow:0 28px 70px rgba(21,87,232,.15),0 10px 32px rgba(232,60,240,.08),inset 0 1px rgba(255,255,255,.98)}}
@keyframes yvPlayGlow{0%,100%{box-shadow:0 0 0 6px rgba(21,87,232,.065),0 12px 25px rgba(21,87,232,.18)}50%{box-shadow:0 0 0 10px rgba(21,87,232,.035),0 16px 34px rgba(232,60,240,.16)}}
.yv-stage-summary{font-weight:650}
@media(prefers-reduced-motion:reduce){.yv-wheel-core,.yv-wheel-play{animation:none}.yv-orbit-stage.active::before{animation:none}}


/* ========================= Mobile hero — depth + density pass ========================= */
@media (max-width: 600px) {
  .yv-hero {
    padding-top: 104px;
    padding-bottom: 44px;
    overflow-x: clip;
  }

  .yv-hero__grid {
    gap: 16px;
    align-items: start;
  }

  .yv-hero__lead {
    margin-top: 16px;
    margin-bottom: 18px;
    font-weight: 600;
  }

  .yv-hero__actions {
    gap: 10px;
  }

  /* Give the wheel a dedicated, compact stage instead of a large empty frame. */
  .yv-wheel-wrap {
    min-height: clamp(292px, 78vw, 326px);
    margin-top: -2px;
    overflow: visible;
  }

  .yv-wheel-atmosphere {
    width: 310px;
    height: 310px;
    filter: blur(22px);
  }

  .yv-orbit {
    width: min(330px, 88vw);
    height: min(330px, 88vw);
    transform: perspective(900px) rotateX(6deg) rotateZ(-0.5deg);
    transform-origin: center;
    transform-style: preserve-3d;
    filter: drop-shadow(0 24px 28px rgba(21,87,232,.08));
  }

  /* Layered translucent surfaces create physical depth without making the wheel heavy. */
  .yv-orbit::before {
    inset: 7px;
    filter: blur(11px);
    opacity: .95;
  }

  .yv-orbit::after {
    inset: 51px;
    box-shadow:
      0 0 0 10px rgba(255,255,255,.16),
      0 0 0 20px rgba(21,87,232,.035),
      inset 0 0 42px rgba(21,87,232,.08);
    transform: translateZ(8px);
  }

  .yv-orbit-track {
    inset: 29px;
    box-shadow:
      0 0 0 10px rgba(21,87,232,.025),
      0 12px 24px rgba(21,87,232,.045);
    transform: translateZ(4px);
  }

  .yv-orbit-track::before {
    inset: 18px;
  }

  .yv-orbit-accent {
    inset: 23px;
    border-width: 11px;
    filter: drop-shadow(0 7px 8px rgba(21,87,232,.12));
    transform: translateZ(10px) rotate(-18deg);
  }

  .yv-orbit-accent--b {
    transform: translateZ(10px) rotate(147deg);
  }

  .yv-wheel-core {
    width: 176px;
    height: 176px;
    padding: 20px;
    transform: translateZ(30px);
    box-shadow:
      0 25px 44px rgba(21,87,232,.16),
      0 10px 22px rgba(232,60,240,.08),
      0 0 0 7px rgba(255,255,255,.18),
      inset 0 1px rgba(255,255,255,.98),
      inset 0 -10px 25px rgba(21,87,232,.035);
  }

  .yv-core-kicker { font-size: 8px; }
  .yv-core-title { font-size: 20px; line-height: 1; font-weight: 860; }
  .yv-core-copy { font-size: 8.5px; font-weight: 650; }

  .yv-wheel-play {
    width: 40px;
    height: 40px;
    margin-top: 10px;
    transform: translateZ(10px);
  }

  .yv-orbit-stage {
    min-width: 96px;
    max-width: 108px;
    padding: 8px 9px;
    gap: 5px;
    /* Depth only — the radial placement lives in `transform`, so lifting the
       card must use `translate` or it wipes the position. */
    translate: 0 0 18px;
    box-shadow:
      0 14px 24px rgba(21,87,232,.12),
      0 4px 10px rgba(232,60,240,.05),
      inset 0 1px rgba(255,255,255,.95);
  }

  .yv-orbit-stage.active {
    translate: 0 -5px 24px;
    scale: 1.07;
  }

  .yv-stage-name {
    font-size: 9px;
    font-weight: 850;
  }

  .yv-stage-index { font-size: 7px; }
  .yv-stage-dot { width: 5px; height: 5px; }

  .yv-orbit { --yv-rx: 106px; --yv-ry: 126px; }

  .yv-wheel-badge {
    bottom: -1px;
    padding: 7px 10px;
    transform: translateX(-50%) translateZ(12px);
  }
}

@media (max-width: 380px) {
  .yv-hero { padding-top: 96px; }
  .yv-wheel-wrap { min-height: 286px; }
  .yv-orbit { width: 306px; height: 306px; }
  .yv-wheel-core { width: 164px; height: 164px; padding: 17px; }
  .yv-core-title { font-size: 18px; }
  .yv-orbit-stage { min-width: 90px; max-width: 100px; }
  .yv-orbit { --yv-rx: 100px; --yv-ry: 120px; }
}