:root {
  --motion-fast: 180ms;
  --motion-normal: 360ms;
  --motion-slow: 560ms;
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --shadow-normal: 0 12px 28px rgba(7, 2, 16, .25);
  --shadow-raised: 0 20px 36px rgba(7, 2, 16, .42);
  --orange-glow: rgba(245, 80, 0, .24);
  --reveal-distance: 12px;
}

/* The mockup is a single responsive composition. */
/* Keep the real capture static: vertical auto-scroll clips it inside the frame. */
#hero-desktop { animation:none; transform:none; }
.mock { transition:transform var(--motion-normal) var(--ease-premium), box-shadow var(--motion-normal); }
.mock img { transition:opacity var(--motion-fast) ease; background:#211039; }
.mock img.is-changing { opacity:.72; }

/* Title only animates the requested words and only after JS enables it. */
.title-word { display:inline-block; color:#ff8b56; }
@media (prefers-reduced-motion:no-preference) {
  .title-animated .title-word { opacity:0; transform:translateY(10px); animation:title-word-in var(--motion-normal) var(--ease-premium) forwards; animation-delay:var(--word-delay); }
  @keyframes title-word-in { to { opacity:1; transform:translateY(0); color:#ffb080; } }
}

/* One-time entry accent: content stays fully visible (opacity 1); only a
   short 12px lift is animated. Absent class means static on JS failure. */
@media (prefers-reduced-motion:no-preference) {
  .will-reveal { transform:translateY(var(--reveal-distance)); transition:transform 250ms var(--ease-premium); }
  .will-reveal.is-revealed { transform:none; }
}

/* Brand flame reacts only to intentional interaction. */
.logo img { transition:transform var(--motion-fast) var(--ease-premium), filter var(--motion-fast); }
.logo:hover img, .logo:focus-visible img { transform:rotate(-2deg) translateY(-1px) scale(1.07); filter:drop-shadow(0 3px 7px rgba(245,80,0,.45)); }

/* Thin scroll indicator stays visually quiet at top. */
.scroll-progress { position:absolute; left:0; right:0; bottom:-2px; height:2px; transform:scaleX(0); transform-origin:left; background:var(--orange); opacity:.9; pointer-events:none; }

.tech-module { transition:transform var(--motion-fast) var(--ease-premium); }
.tech-module:hover { transform:translateY(-3px); }
.tech-module .face { transition:border-color var(--motion-fast), box-shadow var(--motion-fast); }
.tech-module:hover .face { border-color:rgba(255,139,86,.65); box-shadow:var(--shadow-normal); }

/* Model depth is limited to its preview area and does not reflow cards. */
.model, .card { position:relative; transition:transform var(--motion-fast) var(--ease-premium), box-shadow var(--motion-fast), border-color var(--motion-fast); }
.model .preview, .card .preview { isolation:isolate; }
.model .preview::after, .card .preview::after { content:""; pointer-events:none; position:absolute; inset:0; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%); transform:translateX(-115%); }
.model:hover, .model:focus-within, .card:hover, .card:focus-within { transform:translateY(-4px); border-color:rgba(255,139,86,.58); box-shadow:var(--shadow-raised); }
.model:hover .preview .d, .model:focus-within .preview .d, .card:hover .preview .d, .card:focus-within .preview .d { transform:translate(2px,-2px); }
.model:hover .preview .p, .model:focus-within .preview .p, .card:hover .preview .m, .card:focus-within .preview .m { transform:translate(-2px,2px); }
.model .preview img, .card .preview img { transition:transform var(--motion-normal) var(--ease-premium); }
.model:hover .preview::after, .model:focus-within .preview::after, .card:hover .preview::after, .card:focus-within .preview::after { animation:preview-sheen var(--motion-slow) var(--ease-premium) 1; }
@keyframes preview-sheen { to { transform:translateX(115%); } }

/* The three steps are independent milestones, not a progress meter. */
.step { position:relative; overflow:hidden; transition:box-shadow var(--motion-normal), border-color var(--motion-normal), transform var(--motion-normal) var(--ease-premium); }
.step::before { content:""; position:absolute; width:130px; height:130px; right:-62px; top:-68px; border-radius:50%; background:radial-gradient(circle,rgba(245,80,0,.19),transparent 68%); opacity:.45; pointer-events:none; }
.step strong { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,139,86,.38); border-radius:15px; background:rgba(245,80,0,.08); transition:transform var(--motion-normal) var(--ease-premium), background var(--motion-normal), color var(--motion-normal); }
.step.is-lit { border-color:rgba(255,139,86,.55); box-shadow:0 12px 26px rgba(245,80,0,.14); transform:translateY(-3px); }
.step.is-lit strong { color:#260c2f; background:#ff8b56; transform:rotate(-4deg); }

/* Formula clarifies the two different charges without changing card copy. */
.price-formula { max-width:860px; margin:0 auto 15px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; display:flex; justify-content:center; align-items:baseline; gap:8px; color:#ffb080; font:800 .9rem Poppins,sans-serif; background:rgba(255,255,255,.035); text-align:center; }
.price-formula small { color:var(--dim); font:600 .72rem Inter,sans-serif; }.price-formula b { color:#ff8b56; font-size:1.2rem; }

/* Tags communicate optional possibilities and never capture clicks. */
.custom .center-box { position:relative; }.custom-tags { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:0 auto 20px; pointer-events:none; }
.custom-tags span { padding:5px 9px; border:1px solid rgba(255,139,86,.35); border-radius:999px; color:#ffc7a9; background:rgba(245,80,0,.07); font-size:.75rem; font-weight:700; }
@media (prefers-reduced-motion:no-preference) and (min-width:700px) {
  .custom-tags span:nth-child(odd) { animation:tag-drift 5s var(--ease-premium) 1; }
  .custom-tags span:nth-child(even) { animation:tag-drift 5s var(--ease-premium) 1 reverse; }
  @keyframes tag-drift { 50% { transform:translateY(-4px); } }
}

/* CTA reflection is one-time in view; hover provides a short replay. */
.cta-sheen { position:relative; overflow:hidden; isolation:isolate; }
.cta-sheen::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.42) 50%,transparent 64%); transform:translateX(-125%); }
.cta-sheen.sheen-once::after, .cta-sheen:hover::after, .cta-sheen:focus-visible::after { animation:cta-sheen var(--motion-slow) var(--ease-premium) 1; }
@keyframes cta-sheen { to { transform:translateX(125%); } }

@media (max-width:700px) {
  .price-formula { border-radius:12px; flex-wrap:wrap; line-height:1.25; }
}
@media (prefers-reduced-motion:reduce) {
  .will-reveal { transform:none!important; }
  .cta-sheen::after, .model .preview::after, .card .preview::after { display:none; }
}