/* homepage */

/* ---------- shared: css watch frame for 2d faces ---------- */
.wf {
  --metal: #1b1b1d;
  --w: 150px;
  position: relative; flex: none;
  width: var(--w); aspect-ratio: 38.6 / 45.2;
  padding: calc(var(--w) * .07);
  border-radius: 24% / 20%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(160deg, var(--metal), color-mix(in srgb, var(--metal) 55%, #000) 55%, var(--metal) 82%, color-mix(in srgb, var(--metal) 72%, #000));
  box-shadow:
    0 26px 50px -18px rgba(0,0,0,.9),
    -10px 0 32px -12px rgba(255,90,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -2px 4px rgba(0,0,0,.45);
}
.wf::before, .wf::after {
  content: ""; position: absolute; left: 21%; right: 21%; height: 40%;
  background: linear-gradient(90deg, #0b0b0c, #202023 45%, #0e0e0f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.wf::before { bottom: calc(100% - 2px); border-radius: 12px 12px 3px 3px; -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent); }
.wf::after { top: calc(100% - 2px); border-radius: 3px 3px 12px 12px; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.wf--narrow::before, .wf--narrow::after { left: 33%; right: 33%; }
.wf__btns { position: absolute; inset: 0; pointer-events: none; }
.wf__btns::before, .wf__btns::after {
  content: ""; position: absolute; width: 3.4%; height: 10%; border-radius: 2px;
  background: color-mix(in srgb, var(--metal) 80%, #fff);
}
.wf__btns::before { left: -2.8%; top: 30%; }
.wf__btns::after {
  right: -2.8%; top: 20%;
  box-shadow: 0 calc(var(--w) * .26) 0 color-mix(in srgb, var(--metal) 80%, #fff), 0 calc(var(--w) * .52) 0 color-mix(in srgb, var(--metal) 80%, #fff);
}
.wf__screen {
  position: relative; overflow: hidden;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 16% / 13.5%;
  background: #050506;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,0,0,.6);
}
.wf__screen canvas { width: 80%; height: auto; aspect-ratio: 200 / 228; margin-top: -3%; }
.wf--round { aspect-ratio: 1; border-radius: 50%; padding: calc(var(--w) * .05); }
.wf--round::before, .wf--round::after { left: 29%; right: 29%; }
.wf--round.wf--narrow::before, .wf--round.wf--narrow::after { left: 37%; right: 37%; }
.wf--round .wf__screen { border-radius: 50%; }
.wf--round .wf__screen canvas { width: 100%; aspect-ratio: 1; margin: 0; border-radius: 50%; }
.wf--round .wf__btns::before { top: 42%; }
.wf--round .wf__btns::after { top: 24%; box-shadow: 0 calc(var(--w) * .2) 0 color-mix(in srgb, var(--metal) 80%, #fff), 0 calc(var(--w) * .4) 0 color-mix(in srgb, var(--metal) 80%, #fff); }
.wf--xs { --w: 120px; }
.wf--md { --w: 128px; }

main .section-head.center { margin-inline: auto; }

/* ---------- hero ---------- */
.hero {
  --pull: calc(var(--bar-h) + var(--announce-h));
  --grid-size: 72px;
  position: relative; isolation: isolate; overflow: clip;
  margin-top: calc(-1 * var(--pull));
  padding-top: var(--pull);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  view-timeline: --hero block;
}
#site-header.no-announce ~ main .hero { --announce-h: 0px; }
.hero.grid-bg::before { -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 60% 45%, #000 15%, transparent 78%); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg .hero__par { position: absolute; inset: 0; }
.hero__orb--a { --size: min(980px, 140vw); --o: .5; --blur: 70px; right: -22%; top: -18%; }
.hero__orb--b { --size: min(520px, 90vw); --o: .28; left: -12%; bottom: -22%; animation-delay: -6s; }
.hero__beam {
  position: absolute; inset: -20% -10%;
  background: linear-gradient(112deg, transparent 38%, rgba(255,122,31,.07) 47%, rgba(255,176,0,.05) 51%, transparent 60%);
  animation: hm-beam 12s ease-in-out infinite alternate;
}
@keyframes hm-beam { from { transform: translate3d(-6%,0,0); } to { transform: translate3d(8%,0,0); } }

.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center; gap: 24px;
  padding-block: clamp(24px, 4vh, 56px) clamp(80px, 11vh, 120px);
}
.hero__copy { position: relative; z-index: 2; min-width: 0; }
.hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero__title {
  margin: 26px 0 0;
  font: 900 clamp(56px, 6.3vw, 104px)/.9 var(--font-display);
  letter-spacing: -.05em;
}
.hero__line { display: block; white-space: nowrap; }
.hero__line--in { padding-left: .9em; }
.hero__title .outline-text { --stroke: rgba(255,122,31,.85); --stroke-w: 1.5px; }
.hero__title .text-gradient { padding-right: .06em; }
.hero__lead { margin-top: 28px; max-width: 54ch; }
.hero__ctas { margin-top: 34px; }
.hero__price {
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 999px;
  background: rgba(0,0,0,.16); font: 700 13px/1 var(--font-mono); letter-spacing: 0;
}
.btn--ghost .hero__price { background: rgba(255,255,255,.08); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 30px 0 0; padding: 0; }
.hero__meta li { display: inline-flex; align-items: center; gap: 9px; font: 600 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.hero__meta li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--orange); box-shadow: 0 0 10px var(--glow); transform: rotate(45deg); }

.hero__stage { position: relative; height: min(76vh, 720px); min-height: 480px; }
.hero__ghost-wrap { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.hero__ghost {
  font: 900 min(40vw, 560px)/.8 var(--font-display); letter-spacing: -.08em;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,122,31,.2);
  background: linear-gradient(180deg, rgba(255,90,0,.14), transparent 70%);
  -webkit-background-clip: text; background-clip: text;
  user-select: none; transform: translateX(-4%);
}
.hero__orbit { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.hero__orbit > span {
  position: relative; width: min(100%, 560px); aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(255,122,31,.22);
  box-shadow: inset 0 0 80px -30px rgba(255,90,0,.35);
  animation: hm-spin 48s linear infinite;
}
.hero__orbit > span::after {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 16px 3px var(--glow);
}
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hero__watch-wrap { position: absolute; inset: 0; z-index: 1; }
.hero__watch { position: absolute; inset: 0; }
/* soften the canvas edges so the ground glow never shows a hard cut */
.hero__watch, .story__watch, .final__watch {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 86%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 86%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}

.hchip-pos { position: absolute; z-index: 3; }
.hchip-pos--1 { left: -6%; top: 14%; }
.hchip-pos--2 { right: -8%; top: 30%; }
.hchip-pos--3 { left: -2%; bottom: 22%; }
.hchip-pos--4 { right: -3%; bottom: 9%; }
.hchip-float { animation: hm-float 7s ease-in-out infinite; }
.hchip-pos--2 .hchip-float { animation-delay: -2s; animation-duration: 8s; }
.hchip-pos--3 .hchip-float { animation-delay: -4s; animation-duration: 6.5s; }
.hchip-pos--4 .hchip-float { animation-delay: -1s; animation-duration: 7.5s; }
@keyframes hm-float { 50% { transform: translate3d(0,-10px,0); } }
.hchip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 16px;
  transition: border-color .3s, box-shadow .4s var(--ease);
}
.hchip:hover { border-color: rgba(255,90,0,.5); box-shadow: 0 0 40px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.06); }
.hchip__icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(180deg, #ff6b17, var(--orange)); color: #0a0a0a;
  box-shadow: 0 6px 20px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.hchip__icon svg { width: 20px; height: 20px; }
.hchip__txt { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.hchip__txt strong { font: 800 15px/1.1 var(--font-display); letter-spacing: -.02em; }
.hchip__txt small { margin-top: 4px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.hero__cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
  transition: color .25s;
}
.hero__cue:hover { color: var(--orange-2); }
.hero__cue-mouse { position: relative; width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid currentColor; }
.hero__cue-mouse span { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--orange); animation: hm-cue 1.8s var(--ease) infinite; }
@keyframes hm-cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0,1fr); gap: 8px; padding-block: 28px 84px; }
  .hero__title { font-size: clamp(38px, 12.4vw, 84px); margin-top: 20px; }
  .hero__stage { height: clamp(380px, 92vw, 620px); min-height: 0; margin-top: 4px; }
  .hero__ghost { font-size: min(92vw, 560px); }
  .hchip-pos--1 { left: 0; top: 5%; }
  .hchip-pos--2 { right: 0; top: 14%; }
  .hchip-pos--3 { left: 0; bottom: 16%; }
  .hchip-pos--4 { right: 0; bottom: 4%; }
  .hero__cue { display: none; }
}
@media (max-width: 480px) {
  .hchip { gap: 9px; padding: 7px 11px 7px 7px; border-radius: 13px; }
  .hchip__icon { width: 30px; height: 30px; border-radius: 9px; }
  .hchip__icon svg { width: 16px; height: 16px; }
  .hchip__txt strong { font-size: 12.5px; }
  .hchip__txt small { font-size: 9px; letter-spacing: .08em; }
  .hero__ctas .btn { width: 100%; }
  .hero__ctas .btn--lg { padding: 0 18px; font-size: 15px; }
  .hero__lead { margin-top: 22px; }
}

/* ---------- tape ---------- */
.tape { position: relative; z-index: 1; overflow: clip; padding-block: clamp(36px, 5vw, 72px); }
.tape .marquee { -webkit-mask-image: none; mask-image: none; }
.tape__band { width: 112vw; margin-left: calc(50% - 56vw); }
.tape__band--a {
  position: relative; z-index: 2;
  padding-block: 8px;
  background: linear-gradient(90deg, var(--ember), var(--orange) 40%, var(--orange-2) 80%, var(--amber));
  color: #050505;
  transform: rotate(-2.4deg);
  box-shadow: 0 24px 70px -24px var(--glow), 0 0 0 1px rgba(255,160,90,.4);
}
.tape__band--b {
  position: relative; z-index: 1;
  margin-top: -18px; padding-block: 6px;
  background: #0b0b0b; border-block: 1px solid var(--line);
  transform: rotate(1.8deg);
}
.tape .marquee--big .marquee__track > .tape__item {
  display: inline-flex; align-items: center;
  font-size: clamp(30px, 4.8vw, 68px); line-height: 1.15;
}
.tape__item::after {
  content: ""; flex: none; width: .42em; height: .42em; margin-inline: .5em;
  background: #050505;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.tape__band--a .marquee__track > :nth-child(even) { -webkit-text-stroke: 1.5px #050505; }
.tape .tape__band--b .marquee__track > .tape__item { font-size: clamp(22px, 3.2vw, 44px); }
.tape .tape__band--b .marquee__track > .tape__item:nth-child(odd) { color: var(--muted); }
.tape__band--b .marquee__track > :nth-child(even) { -webkit-text-stroke: 1px #6a645e; }
.tape__band--b .tape__item::after { background: var(--orange); }

/* ---------- battery ---------- */
.batt { overflow: clip; isolation: isolate; }
.batt__ghost {
  position: absolute; left: 0; right: 0; top: 50%; z-index: -1;
  display: flex; flex-direction: column; gap: .02em;
  font: 900 clamp(90px, 17vw, 280px)/.84 var(--font-display); letter-spacing: -.06em;
  white-space: nowrap; pointer-events: none; user-select: none;
  transform: translateY(-50%);
}
.batt__ghost span { display: block; }
.batt__ghost-a { --stroke: rgba(255,255,255,.07); margin-left: -8%; }
.batt__ghost-b { color: rgba(255,90,0,.06); margin-left: -30%; }
.batt__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 24px; align-items: stretch; }
.batt__panel { display: flex; flex-direction: column; gap: 34px; padding: clamp(24px, 3vw, 40px); }
.batt__panel:hover, .batt__month:hover { transform: none; }
.batt__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.batt__years { font: 800 clamp(24px, 2.6vw, 32px)/1 var(--font-display); letter-spacing: -.03em; color: var(--orange-2); font-variant-numeric: tabular-nums; }
.batt__range {
  --p: 25%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 36px; margin: 14px 0 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.batt__range:focus { outline: none; }
.batt__range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, var(--ember), var(--orange), var(--amber)) 0 0 / var(--p) 100% no-repeat, var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.batt__range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.batt__range::-moz-range-progress { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--ember), var(--orange), var(--amber)); }
.batt__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -11px; border-radius: 50%;
  background: #fff; border: 7px solid var(--orange);
  box-shadow: 0 0 0 6px rgba(255,90,0,.16), 0 0 26px var(--glow);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.batt__range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 7px solid var(--orange);
  box-shadow: 0 0 0 6px rgba(255,90,0,.16), 0 0 26px var(--glow);
}
.batt__range:hover::-webkit-slider-thumb, .batt__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.batt__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--orange), 0 0 26px var(--glow); }
.batt__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--orange); }
.batt__ticks { display: flex; justify-content: space-between; padding-inline: 11px; margin-top: 6px; font: 600 11px/1 var(--font-mono); color: var(--dim); }
.batt__ticks span { width: 8px; text-align: center; }
.batt__bars { display: grid; gap: 24px; }
.bbar__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.bbar__name { font-size: 14.5px; font-weight: 700; color: var(--muted); line-height: 1.35; }
.bbar--us .bbar__name { color: var(--text); }
.bbar__num { font: 800 clamp(26px, 3vw, 38px)/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bbar--us .bbar__num { color: var(--orange-2); }
.bbar__track { height: 16px; border-radius: 999px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.bbar__fill {
  display: block; width: 100%; height: 100%;
  transform-origin: 0 50%; transform: scaleX(var(--s, 0));
  transition: transform 1.1s var(--ease-out);
}
.bbar--them .bbar__fill { background: repeating-linear-gradient(90deg, #6b655f 0 7px, #3a3632 7px 9px); }
.bbar--us .bbar__fill { background: linear-gradient(90deg, var(--orange), var(--amber)); box-shadow: 0 0 18px var(--glow); }
.batt__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-top: 26px; border-top: 1px solid var(--line); margin-top: auto; }
.batt__diff { font: 900 clamp(56px, 8vw, 116px)/.9 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; padding-right: .05em; }
.batt__result .stat__label { margin: 0; font-size: 12px; }

.batt__month { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.month { display: grid; gap: 26px; margin-top: 22px; }
.month__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.month__who { font-weight: 800; font-size: 15px; }
.month__count { font-size: 12px; color: var(--muted); }
.month__row--us .month__count { color: var(--orange-2); }
.month__cells { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 6px; }
.month__cells i {
  display: block; aspect-ratio: 1; border-radius: 6px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
}
.month.is-live .month__cells i.is-on {
  background: #3b3733 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8b0a6' d='M13 2 4.5 13.5H12L11 22l8.5-11.5H12L13 2Z'/%3E%3C/svg%3E") center / 56% no-repeat;
  box-shadow: inset 0 0 0 1px #4d4843;
  animation: hm-pop .5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.month.is-live .month__row--us .month__cells i.is-on {
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23050505' d='M13 2 4.5 13.5H12L11 22l8.5-11.5H12L13 2Z'/%3E%3C/svg%3E") center / 56% no-repeat;
  box-shadow: 0 0 18px -2px var(--glow);
  animation-delay: 1.3s;
}
.month.is-live .month__row--us .month__cells i:not(.is-on) { background: linear-gradient(180deg, rgba(255,90,0,.08), rgba(255,90,0,.02)); box-shadow: inset 0 0 0 1px rgba(255,90,0,.16); }
@keyframes hm-pop { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); } }
.batt__plug { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.batt__plug-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: var(--orange); background: rgba(255,90,0,.1); border: 1px solid rgba(255,90,0,.25); }
.batt__plug-icon svg { width: 20px; height: 20px; }
.batt__plug p { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.batt__note { margin-top: auto; padding-top: 22px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
@media (max-width: 900px) {
  .batt__grid { grid-template-columns: minmax(0,1fr); }
}

/* ---------- lineup ---------- */
.lineup { overflow: clip; }
.lineup__orb { --size: 620px; --o: .22; left: -14%; top: 22%; }
.lineup__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.lineup__head .section-head { margin-bottom: 0; }
.lineup__all { margin-bottom: 10px; }
.lineup__grid { align-items: stretch; }
.lineup__card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lineup__stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  height: 320px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 55%, rgba(255,90,0,.16), transparent 58%),
    linear-gradient(180deg, #0f0f0f, #0a0a0a);
}
.lineup__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%);
}
.lineup__stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,0,.55), transparent 65%);
  filter: blur(30px); opacity: .35;
  transform: scale(.8);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.lineup__card:hover .lineup__stage::after { opacity: .75; transform: scale(1.1); }
.lineup__stage .wf { --w: 150px; transition: transform .8s var(--ease); }
.lineup__stage .wf--round { --w: 168px; }
.lineup__card:hover .lineup__stage .wf { transform: translate3d(0,-8px,0) rotate(-5deg) scale(1.04); }
.lineup__badge { position: absolute; top: 16px; left: 16px; z-index: 3; }
.lineup__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 24px 26px 26px; }
.lineup__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lineup__name { font: 800 clamp(20px, 1.9vw, 24px)/1.1 var(--font-display); letter-spacing: -.025em; }
.lineup__name a { transition: color .2s; }
.lineup__name a:hover { color: var(--orange-2); }
.lineup__price { flex: none; font: 800 22px/1 var(--font-display); letter-spacing: -.03em; color: var(--orange-2); }
.lineup__price s { margin-right: 6px; font: 600 14px/1 var(--font-body); color: var(--dim); }
.lineup__line { font-size: 15px; line-height: 1.55; color: var(--muted); }
.lineup__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lineup__swatches { display: flex; gap: 6px; }
.lineup__swatches .swatch { width: 28px; height: 28px; }
.lineup__vlabel { font-size: 12px; color: var(--muted); }
.lineup__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.lineup__actions .btn { flex: 1 1 auto; }
.lineup__card--skel { padding: 0 0 24px; }
.lineup__card--skel > .skeleton--text { margin-inline: 26px; }
.lineup__skel-stage { height: 320px; border-radius: 0; margin-bottom: 20px; }
.lineup__error { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.lineup__error p { color: var(--muted); }

/* css ring */
.cring-wrap { --metal: #d8dbdf; perspective: 700px; transition: transform .8s var(--ease); }
.lineup__card:hover .cring-wrap { transform: translate3d(0,-8px,0) scale(1.06); }
.cring {
  position: relative; width: 190px; aspect-ratio: 1; border-radius: 50%;
  border: 28px solid transparent;
  background:
    conic-gradient(from 210deg, var(--metal), color-mix(in srgb, var(--metal) 40%, #000) 18%, color-mix(in srgb, var(--metal) 60%, #fff) 32%, var(--metal) 45%, color-mix(in srgb, var(--metal) 35%, #000) 62%, color-mix(in srgb, var(--metal) 70%, #fff) 80%, var(--metal)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
  transform: rotateX(58deg) rotateZ(0deg);
  animation: hm-ring 14s linear infinite;
}
@keyframes hm-ring { to { transform: rotateX(58deg) rotateZ(360deg); } }
.cring-wrap { position: relative; filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--metal) 42%, #000)) drop-shadow(0 30px 22px rgba(0,0,0,.6)); }
.cring-wrap::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 20px 4px var(--glow);
  transform: translate3d(0,-46px,0);
  animation: pb-blink 1.6s steps(2) infinite;
}

/* ---------- sticky story ---------- */
.story__head { margin-bottom: clamp(24px, 4vw, 48px); }
.story__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(24px, 5vw, 80px); }
.story__sticky {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: calc(var(--bar-h) + 12px);
  height: calc(100vh - var(--bar-h) - 32px); height: calc(100svh - var(--bar-h) - 32px);
  max-height: 760px; z-index: 2;
}
.story__panels { grid-column: 1; grid-row: 1; }
.story__stage {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100%;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 46%, rgba(255,90,0,.18), transparent 55%),
    linear-gradient(180deg, #101010, #070707);
}
.story__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 72%);
}
.story__sun {
  position: absolute; left: 50%; top: 46%; z-index: -1;
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,120,.55), rgba(255,176,0,.18) 40%, transparent 68%);
  opacity: 0; transform: scale(.6);
  transition: opacity .8s var(--ease), transform 1.2s var(--ease);
}
.story__stage[data-step="0"] .story__sun { opacity: 1; transform: scale(1); }
.story__ring {
  position: absolute; left: 50%; top: 46%; z-index: -1;
  width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%;
  border: 1px dashed rgba(255,122,31,.25);
  animation: hm-spin 40s linear infinite;
}
.story__watch { position: absolute; inset: 44px 0 90px; }
.story__fx {
  position: absolute; left: 16px; right: 16px; bottom: 30px; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  opacity: 0; transform: translate3d(0,14px,0);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.story__stage[data-step="0"] .story__fx--0,
.story__stage[data-step="1"] .story__fx--1,
.story__stage[data-step="2"] .story__fx--2,
.story__stage[data-step="3"] .story__fx--3 { opacity: 1; transform: none; transition-delay: .12s; }
.story__fx--1 .kbd { height: 32px; padding: 0 12px; font-size: 12px; transition: background-color .2s, color .2s, box-shadow .2s; }
.story__stage[data-step="1"] .story__fx--1 .kbd { animation: hm-key 3.2s var(--ease) infinite; }
.story__stage[data-step="1"] .story__fx--1 .kbd:nth-child(2) { animation-delay: .8s; }
.story__stage[data-step="1"] .story__fx--1 .kbd:nth-child(3) { animation-delay: 1.6s; }
.story__stage[data-step="1"] .story__fx--1 .kbd:nth-child(4) { animation-delay: 2.4s; }
@keyframes hm-key { 0%, 22% { background: var(--orange); color: #050505; border-color: var(--orange); box-shadow: 0 0 20px -2px var(--glow); transform: translateY(2px); } 30%, 100% { transform: none; } }
.story__fx--2 { top: 70px; bottom: auto; align-items: flex-start; }
.story__note {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px; min-width: 250px;
  transform: translate3d(30px,0,0);
  transition: transform .7s var(--ease);
}
.story__stage[data-step="2"] .story__note { transform: none; }
.story__note-dot { width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--orange), var(--amber)); box-shadow: 0 0 18px -4px var(--glow); }
.story__note > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.story__note strong { font-size: 13.5px; }
.story__note small { font-size: 13px; color: var(--muted); }
.story__note-act { font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-2); }
.story__progress {
  position: absolute; top: 18px; left: 20px; right: 20px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.story__count { font-size: 12px; color: var(--dim); letter-spacing: .12em; }
.story__count b { color: var(--text); font-weight: 600; }
.story__dots { display: flex; gap: 6px; }
.story__dots i { width: 18px; height: 3px; border-radius: 3px; background: var(--line-2); transition: background-color .3s, width .5s var(--ease), box-shadow .3s; }
.story__stage[data-step="0"] .story__dots i:nth-child(1),
.story__stage[data-step="1"] .story__dots i:nth-child(2),
.story__stage[data-step="2"] .story__dots i:nth-child(3),
.story__stage[data-step="3"] .story__dots i:nth-child(4) { width: 36px; background: var(--orange); box-shadow: 0 0 10px var(--glow); }

.story__panel {
  position: relative;
  min-height: 86vh; min-height: 86svh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px;
  padding-block: 40px;
  opacity: .25;
  transition: opacity .6s var(--ease);
}
.story__panel.is-active { opacity: 1; }
.story__panel .lead { max-width: 46ch; }
.story__panel .btn { margin-top: 10px; }
.story__num {
  font: 900 clamp(64px, 8vw, 120px)/.8 var(--font-display); letter-spacing: -.06em;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255,122,31,.45);
  transform: translate3d(-12px,0,0);
  transition: transform .8s var(--ease), -webkit-text-stroke-color .5s;
}
.story__panel.is-active .story__num { transform: none; -webkit-text-stroke-color: var(--orange); }

@media (max-width: 900px) {
  .story__grid { display: block; }
  .story__sticky { top: calc(var(--bar-h) + 4px); height: 46vh; height: 46svh; max-height: 440px; min-height: 300px; }
  .story__sticky::after {
    content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 48px;
    background: linear-gradient(180deg, var(--bg), transparent);
    pointer-events: none;
  }
  .story__watch { inset: 36px 0 64px; }
  .story__fx { bottom: 16px; }
  .story__fx--2 { top: 48px; bottom: auto; }
  .story__note { min-width: 0; }
  .story__panel { min-height: 70vh; min-height: 70svh; justify-content: flex-end; padding-block: 48px 40px; }
  .story__panels { position: relative; z-index: 1; }
  .story__num { font-size: 56px; }
}

/* ---------- faces wall ---------- */
.wall { overflow: clip; }
.wall__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 32px 48px; margin-bottom: 40px; }
.wall__head .section-head { margin-bottom: 0; }
.wall__stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wall__num { font: 900 clamp(56px, 6.2vw, 104px)/.88 var(--font-display); letter-spacing: -.055em; padding-right: .05em; }
.wall__stat .stat__label { margin: 4px 0 18px; }
.wall__rows { display: grid; gap: 4px; }
.wall__row .marquee__track { align-items: flex-start; }
.wtile { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding-block: 58px 14px; }
.wtile .wf { --w: 140px; transition: transform .5s var(--ease), box-shadow .5s; }
.wtile .wf--round { --w: 150px; }
.wtile:hover .wf { transform: translate3d(0,-6px,0) scale(1.05); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 50px -10px var(--glow), inset 0 0 0 1px rgba(255,255,255,.2); }
.wtile figcaption { margin-top: 50px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 900px) {
  .wall__head { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .wtile .wf { --w: 112px; }
  .wtile .wf--round { --w: 120px; }
  .wtile { padding-top: 46px; }
  .wtile figcaption { margin-top: 40px; }
}

/* ---------- developers ---------- */
.dev { overflow: clip; }
.dev__orb { --size: 560px; --o: .2; right: -10%; top: 10%; }
.dev__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.dev__copy .lead { margin-top: 24px; }
.dev__copy .display-l { margin-top: 18px; }
.dev__links { list-style: none; margin: 34px 0 22px; padding: 0; display: grid; gap: 10px; }
.dev__link {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 14px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(255,255,255,.015);
  transition: border-color .3s, background-color .3s, transform .45s var(--ease);
}
.dev__link:hover { border-color: rgba(255,90,0,.5); background: rgba(255,90,0,.05); transform: translate3d(6px,0,0); }
.dev__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--orange); background: rgba(255,90,0,.1); border: 1px solid rgba(255,90,0,.22); transition: background-color .3s, color .3s; }
.dev__link:hover .dev__icon { background: var(--orange); color: #050505; }
.dev__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dev__txt strong { font-size: 16px; }
.dev__txt small { font-size: 13.5px; color: var(--muted); }
.dev__arrow { color: var(--dim); transition: color .3s, transform .4s var(--ease); }
.dev__link:hover .dev__arrow { color: var(--orange-2); transform: translateX(3px); }

.dev__ide-wrap { position: relative; padding: 0 30px 50px 0; }
.dev__ide {
  position: relative; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #0f0f0f, #080808);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 90px -40px var(--glow), inset 0 1px 0 rgba(255,255,255,.05);
}
.dev__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #0b0b0b; }
.dev__lights { display: flex; gap: 7px; }
.dev__lights i { width: 11px; height: 11px; border-radius: 50%; background: #2c2c2c; }
.dev__lights i:first-child { background: var(--orange); box-shadow: 0 0 10px var(--glow); }
.dev__file { font-size: 12.5px; color: var(--text); padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.05); }
.dev__target { margin-left: auto; height: 26px; font-size: 11px; }
.dev__body { position: relative; }
.dev__code {
  margin: 0; padding: 24px 22px 28px;
  min-height: 360px;
  font: 500 13.5px/1.75 var(--font-mono); color: #ebe5dd; tab-size: 2;
  white-space: pre; overflow-x: auto;
  counter-reset: none;
}
.dev__code:focus-visible { outline-offset: -3px; }
.tk-c { color: #6d665f; font-style: italic; }
.tk-k { color: var(--orange); font-weight: 600; }
.tk-s { color: var(--amber); }
.tk-n { color: #ffb68a; }
.tk-f { color: #fff; font-weight: 600; }
.tk-p { color: #8b847c; }
.dev__caret { display: inline-block; width: 8px; height: 1.15em; margin-left: 1px; vertical-align: -3px; background: var(--orange); box-shadow: 0 0 10px var(--glow); animation: pb-blink 1s steps(2) infinite; }
.dev__status { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: #0a0a0a; }
.dev__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pb-blink 1s steps(2) infinite; }
.dev__ide.is-built .dev__status-dot { background: var(--orange); box-shadow: 0 0 10px var(--glow); animation: none; }
.dev__ide.is-built .dev__status { color: var(--text); }
.dev__preview {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 16px; border-radius: 26px;
  background: radial-gradient(circle at 50% 45%, rgba(255,90,0,.3), transparent 70%);
  opacity: .35; transform: translate3d(0,16px,0) scale(.92) rotate(6deg);
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.dev__ide-wrap.is-built .dev__preview { opacity: 1; transform: rotate(6deg); }
.dev__preview .wf { --w: 124px; }
.dev__preview canvas { width: 80%; }
@media (max-width: 900px) {
  .dev__grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .dev__ide-wrap { padding: 0 0 230px; }
  .dev__preview { right: 50%; margin-right: -78px; }
  .dev__code { font-size: 12px; min-height: 0; padding: 18px 16px 22px; }
}

/* ---------- press ---------- */
.press__grid { gap: 20px; }
.press__card { display: flex; flex-direction: column; gap: 26px; padding: clamp(24px, 3.2vw, 40px); min-height: 290px; }
.press__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.press__mark { font-size: clamp(22px, 2.6vw, 32px); line-height: 1; color: var(--text); transition: color .3s; }
.press__card:hover .press__mark { color: var(--orange-2); }
.press__mark--tc { font-family: var(--font-body); font-weight: 800; letter-spacing: -.055em; }
.press__mark--eg { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; }
.press__mark--verge { display: inline-block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.06em; transform: skewX(-9deg); }
.press__mark--ars { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-style: italic; letter-spacing: -.02em; }
.press__date { font-size: 12px; color: var(--dim); letter-spacing: .06em; }
.press__headline { flex: 1; font: 700 clamp(20px, 2.1vw, 28px)/1.22 var(--font-display); letter-spacing: -.025em; color: var(--text); }
.press__card .link-arrow { font-size: 14.5px; }
.press__card:hover .link-arrow .ico { transform: translate(3px,-3px); }

/* ---------- social feed ---------- */
.feed { overflow: clip; }
.feed__orb { --size: 700px; --o: .25; left: 50%; top: 30%; margin-left: -350px; }
.feed__phones {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(18px, 3.4vw, 48px);
  margin-top: 8px; padding-block: 36px 64px;
  perspective: 1600px;
}
.phone {
  --pw: 250px;
  position: relative; flex: none; margin: 0;
  width: var(--pw); aspect-ratio: 9 / 19.5;
  padding: 9px; border-radius: 46px;
  background: linear-gradient(145deg, #2c2c30, #0c0c0e 38%, #1d1d20 70%, #0c0c0e);
  box-shadow: 0 60px 100px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.09), inset 0 0 0 1.5px rgba(255,255,255,.07), 0 0 80px -40px var(--glow);
  transition: transform .8s var(--ease), box-shadow .6s var(--ease);
}
.phone:first-child { transform: rotateY(14deg) rotate(-3deg) translate3d(0,10px,0); }
.phone:last-child { transform: rotateY(-14deg) rotate(3deg) translate3d(0,10px,0); }
.phone--mid { --pw: 280px; transform: translate3d(0,-18px,0); z-index: 1; }
.phone:hover { transform: translate3d(0,-26px,0); box-shadow: 0 70px 110px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(255,90,0,.35), 0 0 100px -30px var(--glow); }
.phone figcaption {
  position: absolute; left: 0; right: 0; top: calc(100% + 18px);
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); text-align: center;
}
.phone__screen {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: 100%; border-radius: 38px;
  background: #060606;
}
.phone__screen::before {
  content: ""; position: absolute; top: 9px; left: 50%; z-index: 6;
  width: 32%; height: 22px; margin-left: -16%; border-radius: 999px; background: #000;
}
.phone__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,90,0,.5), transparent 52%),
    radial-gradient(circle at 80% 90%, rgba(255,176,0,.18), transparent 50%),
    linear-gradient(180deg, #1a0c04, #060606 72%);
}
.phone__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 10%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 42%, #000 10%, transparent 62%);
}
.phone__content { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 26%; }
.phone__watch { position: relative; display: grid; place-items: center; }
.phone__watch .wf { --w: calc(var(--pw) * .5); }
.phone__sticker {
  position: absolute; top: 20%; right: 9%; z-index: 2;
  padding: 5px 9px; border-radius: 7px;
  background: var(--amber); color: #050505;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(8deg);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.6);
  animation: hm-sticker 2.6s ease-in-out infinite paused;
}
@keyframes hm-sticker { 50% { transform: rotate(-4deg) scale(1.08); } }
.phone__ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.phone__tabs { position: absolute; top: 42px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; font-size: 11.5px; font-weight: 700; }
.phone__tabs span { color: rgba(255,255,255,.55); }
.phone__tabs b { position: relative; color: #fff; }
.phone__tabs b::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -5px; height: 2px; border-radius: 2px; background: #fff; }
.phone__rail { position: absolute; right: 10px; bottom: 25%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pi { display: block; width: 28px; height: 28px; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: .92; }
.pi--avatar { width: 34px; height: 34px; border-radius: 50%; -webkit-mask: none; mask: none; background: linear-gradient(135deg, var(--orange), var(--amber)); box-shadow: 0 0 0 2px #fff; opacity: 1; }
.pi--heart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.3 3 4.5 6.7 4.5c2.1 0 3.6 1.2 4.3 2.4.7-1.2 2.2-2.4 4.3-2.4 3.7 0 5.8 3.8 4.3 7.2C19.5 16.4 12 21 12 21Z'/%3E%3C/svg%3E"); }
.pi--chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2.5 6.6 2.5 11c0 2.4 1.2 4.5 3.1 6L5 21l4.3-2.3c.9.2 1.8.3 2.7.3 5.5 0 9.5-3.6 9.5-8S17.5 3 12 3Z'/%3E%3C/svg%3E"); }
.pi--share { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 4.5 22 12l-9 7.5V15c-5.5 0-8.6 1.7-11 5 .9-5.3 3.8-9.6 11-10.5V4.5Z'/%3E%3C/svg%3E"); }
.pi--note { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18.5a3 3 0 1 1-2-2.8V4l12-2v13.5a3 3 0 1 1-2-2.8V6.3l-8 1.4v10.8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18.5a3 3 0 1 1-2-2.8V4l12-2v13.5a3 3 0 1 1-2-2.8V6.3l-8 1.4v10.8Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.phone__cap { position: absolute; left: 14px; right: 54px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.88); }
.phone__cap strong { font-size: 12.5px; color: #fff; }
.phone__cap em { font: 500 10px/1 var(--font-mono); font-style: normal; color: rgba(255,255,255,.6); margin-top: 3px; }
.phone__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 3px; background: rgba(255,255,255,.14); }
.phone__bar span { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); animation: hm-bar 6s linear infinite paused; }
@keyframes hm-bar { to { transform: scaleX(1); } }
.phone.is-playing .phone__bar span, .phone.is-playing .phone__sticker { animation-play-state: running; }

/* loop: face switching */
.phone__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.wf__press { position: absolute; right: -4%; top: 44%; width: 6%; height: 12%; border-radius: 3px; background: var(--orange); opacity: 0; box-shadow: 0 0 16px 4px var(--glow); }
.phone.is-click .phone__flash { animation: hm-flash .35s ease-out; }
.phone.is-click .wf__press { animation: hm-press .4s ease-out; }
.phone.is-click .phone__watch--click .wf { animation: hm-tap .35s var(--ease); }
@keyframes hm-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes hm-press { 0% { opacity: 1; transform: translateX(-2px); } 100% { opacity: 0; transform: none; } }
@keyframes hm-tap { 40% { transform: translateX(-3px) scale(.985); } }

/* loop: notification buzz */
.phone__watch--buzz .wf { animation: hm-buzz 3s linear infinite paused; }
.phone__ripple {
  position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%;
  border: 2px solid rgba(255,122,31,.7); opacity: 0;
  animation: hm-ripple 3s var(--ease-out) infinite paused;
}
.phone__ripple--2 { animation-delay: .18s; }
.phone__notif {
  position: absolute; left: 7%; right: 7%; bottom: 8%;
  display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 9px;
  background: #fff; color: #050505; text-align: left;
  opacity: 0; transform: translate3d(0,120%,0);
  animation: hm-notif 3s var(--ease) infinite paused;
}
.phone__notif-app { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: #ff5500; }
.phone__notif strong { font: 800 13px/1.1 var(--font-display); letter-spacing: -.02em; }
.phone__notif-act { font: 700 9px/1 var(--font-mono); color: #555; }
.phone.is-playing .phone__watch--buzz .wf, .phone.is-playing .phone__ripple, .phone.is-playing .phone__notif { animation-play-state: running; }
@keyframes hm-buzz {
  0%, 1.5% { transform: translate3d(0,0,0); }
  3% { transform: translate3d(-4px,0,0) rotate(-2deg); }
  4.5% { transform: translate3d(4px,0,0) rotate(2deg); }
  6% { transform: translate3d(-4px,0,0) rotate(-1.5deg); }
  7.5% { transform: translate3d(3px,0,0) rotate(1deg); }
  9%, 100% { transform: translate3d(0,0,0); }
}
@keyframes hm-ripple { 0%, 1% { opacity: 0; transform: scale(.55); } 3% { opacity: .9; } 30%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes hm-notif { 0%, 4% { opacity: 0; transform: translate3d(0,120%,0); } 12%, 72% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translate3d(0,-20%,0); } }

/* loop: battery counter */
.daycount {
  width: 80%; aspect-ratio: 200 / 228; margin-top: -3%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%;
  background: #000; color: #fff;
}
.daycount__label { font-size: calc(var(--pw) * .036); font-weight: 700; letter-spacing: .2em; color: #ff5500; }
.daycount__num { font: 900 calc(var(--pw) * .15)/.9 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.daycount__batt { position: relative; width: 58%; height: calc(var(--pw) * .04); padding: 2px; border: 2px solid #fff; border-radius: 3px; }
.daycount__batt::after { content: ""; position: absolute; right: -6px; top: 25%; width: 3px; height: 50%; background: #fff; border-radius: 0 2px 2px 0; }
.daycount__fill { display: block; width: 100%; height: 100%; background: #ff5500; transform-origin: 0 50%; transition: transform .15s linear; }
.daycount__msg { font-size: calc(var(--pw) * .03); letter-spacing: .14em; text-transform: uppercase; color: #aaa; }
.daycount.is-done .daycount__msg { color: #ffaa00; }

.feed__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 20px; margin-top: 44px; }
.feed__tiktok {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 8px; border-radius: 999px;
  border: 1px solid rgba(255,90,0,.4); background: rgba(255,90,0,.06);
  box-shadow: 0 0 50px -20px var(--glow);
}
.feed__tt-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--text); color: #050505; }
.feed__tt-icon svg { width: 20px; height: 20px; }
.feed__tt-txt { display: flex; flex-direction: column; line-height: 1.25; padding-right: 4px; }
.feed__tt-txt strong { font-size: 15px; }
.feed__tt-txt small { font-size: 12.5px; color: var(--muted); }
.feed__socials { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.feed__note { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--dim); }
@media (max-width: 900px) {
  .feed__phones {
    justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 24px var(--gutter) 60px;
    perspective: none;
  }
  .feed__phones::-webkit-scrollbar { display: none; }
  .phone, .phone:first-child, .phone:last-child, .phone--mid { --pw: 232px; transform: none; scroll-snap-align: center; }
  .phone:hover { transform: none; }
}
@media (max-width: 480px) {
  .feed__tiktok { border-radius: 22px; max-width: 100%; }
  .feed__tiktok .badge { display: none; }
}

/* ---------- faq ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--bar-h) + 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.faq__intro .row { gap: 22px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__h { margin: 0; font: inherit; letter-spacing: normal; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 26px 0; text-align: left;
  font: 800 clamp(17px, 1.7vw, 21px)/1.3 var(--font-body); letter-spacing: -.01em; color: var(--text);
  transition: color .2s;
}
.faq__q:hover { color: var(--orange-2); }
.faq__icon {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: transform .5s var(--ease), background-color .3s, border-color .3s;
}
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; margin: -.9px 0 0 -7px; border-radius: 2px; background: currentColor; }
.faq__icon::after { transform: rotate(90deg); }
.faq__q:hover .faq__icon { border-color: var(--orange); }
.faq__item.is-open .faq__icon { transform: rotate(135deg); background: var(--orange); border-color: var(--orange); color: #050505; }
.faq__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s linear .5s; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s var(--ease); }
.faq__a-in { overflow: hidden; min-height: 0; }
.faq__a p { padding: 0 56px 26px 0; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 64ch; }
.faq__a a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,122,31,.4); }
.faq__a a:hover { color: var(--amber); }
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0,1fr); }
  .faq__intro { position: static; }
  .faq__a p { padding-right: 0; }
}

/* ---------- final cta ---------- */
.final {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(88px, 11vw, 160px) clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.final__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.final__orb { --size: min(980px, 150vw); --o: .45; left: 50%; top: 50%; margin: calc(min(980px, 150vw) / -2) 0 0 calc(min(980px, 150vw) / -2); }
.final__rays {
  position: absolute; left: 50%; top: 52%;
  width: 1200px; height: 1200px; margin: -600px 0 0 -600px;
  background: repeating-conic-gradient(from 0deg, rgba(255,122,31,.09) 0 4deg, transparent 4deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 55%);
  mask-image: radial-gradient(circle, #000 5%, transparent 55%);
  animation: hm-spin 90s linear infinite;
}
.final__inner { display: flex; flex-direction: column; align-items: center; }
.final__stage { position: relative; width: 100%; height: clamp(380px, 50vw, 640px); margin-top: 8px; }
.final__title {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 0;
  margin: 0; transform: translateY(-50%);
  font: 900 clamp(44px, 12.4vw, 196px)/.84 var(--font-display); letter-spacing: -.065em;
  white-space: nowrap; pointer-events: none;
}
.final__title .text-gradient { padding-right: .04em; }
.final__watch { position: absolute; inset: 0; z-index: 1; margin-inline: auto; max-width: 560px; }
.final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.final__was { margin-right: 2px; font-weight: 500; opacity: .6; }
.final__fine { margin-top: 28px; font-size: 12px; letter-spacing: .06em; color: var(--dim); }
@media (max-width: 640px) {
  .final__ctas .btn { width: 100%; }
  .final__fine { line-height: 1.8; }
}

/* ---------- scroll-linked motion (compositor only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__copy-in { animation: hm-copy-out linear both; animation-timeline: --hero; animation-range: exit 0% exit 75%; }
    .hero__stage { animation: hm-stage-out linear both; animation-timeline: --hero; animation-range: exit 0% exit 95%; }
    .batt__ghost-a { animation: hm-slide-l linear both; animation-timeline: view(); animation-range: cover; }
    .batt__ghost-b { animation: hm-slide-r linear both; animation-timeline: view(); animation-range: cover; }
    .final__title { animation: hm-title-in linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    .press__grid, .lineup__grid { animation: hm-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes hm-copy-out { to { transform: translate3d(0,-16vh,0); opacity: 0; } }
@keyframes hm-stage-out { to { transform: translate3d(0,8vh,0) scale(.88); opacity: .15; } }
@keyframes hm-slide-l { from { transform: translate3d(10%,0,0); } to { transform: translate3d(-18%,0,0); } }
@keyframes hm-slide-r { from { transform: translate3d(-12%,0,0); } to { transform: translate3d(14%,0,0); } }
@keyframes hm-title-in { from { transform: translateY(-50%) scale(.72); opacity: .2; } to { transform: translateY(-50%) scale(1); opacity: 1; } }
@keyframes hm-rise { from { transform: translate3d(0,60px,0) scale(.97); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__beam, .hero__orbit > span, .hchip-float, .hero__cue-mouse span, .cring, .story__ring, .final__rays,
  .phone__bar span, .phone__sticker, .phone__watch--buzz .wf, .phone__ripple, .dev__caret, .cring-wrap::after { animation: none !important; }
  .phone__notif { animation: none !important; opacity: 1; transform: none; }
}