/* Riselet website. Deep navy and glowing blue from the logo, paper and ink from the game.
   Motion is slow and smooth (one easing curve everywhere) and switches off for "Reduce motion". */
:root {
  --paper: #F7F6F2; --paper-2: #EFEDE7; --ink: #1D1D21; --muted: #6A675F; --line: rgba(29,29,33,.1);
  --navy: #01051E; --navy-2: #071148; --blue: #2F7BFF; --blue-2: #6CC3FF; --white: #F4F8FF;
  --radius: 22px; --max: 1120px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0D0E12; --paper-2: #14161C; --ink: #EDEBE6; --muted: #A09D96; --line: rgba(237,235,230,.12); color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: #000; padding: 8px 12px; border-radius: 8px; z-index: 20; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 max(22px, env(safe-area-inset-left)); }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- header: glass, tightens on scroll */
.top { position: fixed; inset: 0 0 auto; z-index: 10; color: var(--white); transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; transition: height .5s var(--ease); }
body:not(.home) .top, .scrolled .top { background: rgba(1,5,30,.86); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,.07); }
.scrolled .top .wrap { height: 54px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: .16em; }
.brand img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 18px rgba(80,160,255,.35); }
.nav { display: flex; gap: 2px; align-items: center; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; opacity: .8; transition: opacity .3s, background .3s; }
.nav a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.nav a.play { background: var(--blue); opacity: 1; font-weight: 600; box-shadow: 0 4px 18px rgba(47,123,255,.45); }
@media (max-width: 560px) { .nav a.hide-sm { display: none; } }
body:not(.home) main { padding-top: 64px; }

/* ---------------------------------------------------------------- buttons */
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 999px;
  font-weight: 600; font-size: 17px; text-decoration: none; border: 0; cursor: pointer; transition: transform .5s var(--ease), translate .5s var(--ease), box-shadow .5s var(--ease), background .3s; }
.btn.primary { background: linear-gradient(180deg, #5C9DFF, var(--blue)); color: #fff; box-shadow: 0 10px 34px rgba(47,123,255,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 44px rgba(47,123,255,.6), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.ghost { background: rgba(255,255,255,.07); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.ghost:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
/* a band of light that sweeps across now and then */
.shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: shine 5s var(--ease) 2.2s infinite; }
@keyframes shine { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; color: var(--white); overflow: hidden;
  background: radial-gradient(120% 80% at 50% 10%, var(--navy-2) 0%, var(--navy) 62%); padding: 96px 0 72px; isolation: isolate; }
.aura { position: absolute; width: 900px; height: 900px; left: 50%; top: 42%; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(64,140,255,.38), rgba(64,140,255,0) 62%); filter: blur(10px); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .65; scale: 1.08; } }
/* ink rings drifting up, like the game */
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky i { position: absolute; left: var(--x); bottom: -120px; width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid rgba(160,205,255,var(--o));
  box-shadow: 0 0 22px rgba(90,170,255,calc(var(--o) * .8)); animation: rise var(--t) linear var(--d) infinite; }
@keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-120svh) rotate(160deg); opacity: 0; } }
.hero-inner { will-change: transform, opacity; }
/* the logo: a transparent-cornered tile (no square ever shows), a breathing glow and a ring orbiting it like the
   game's rings. Three layers so the entrance, the pointer/scroll tilt and the float never fight over one transform.
   No CSS filters here: on iPhone Safari they blur and box the image. */
.logo-wrap { position: relative; width: min(190px, 46vw); margin: 0 auto 30px; perspective: 900px; animation: pop-in 1.5s var(--ease) both; }
.logo-wrap::before { content: ""; position: absolute; inset: -38%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(90,170,255,.55), rgba(47,123,255,.18) 38%, rgba(47,123,255,0) 64%); animation: halo 4.5s ease-in-out infinite; }
.logo-wrap::after { content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(160,205,255,.16); border-top-color: rgba(190,225,255,.85); border-right-color: rgba(160,205,255,.4);
  animation: orbit 9s linear infinite, fade-in 1.2s var(--ease) 1s both; }
.logo-tilt { transform: rotateX(var(--lx, 0deg)) rotateY(var(--ly, 0deg)); transform-style: preserve-3d; transition: transform .6s var(--ease); will-change: transform; }
.logo { width: 100%; height: auto; animation: float 6s ease-in-out 1.5s infinite; }
@keyframes float { 50% { translate: 0 -12px; } }
@keyframes halo { 50% { opacity: .6; scale: 1.08; } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(30px) scale(.82); } to { opacity: 1; transform: none; } }
/* the name: letters rise and turn into place one by one. The glow is a separate blurred copy behind them, because a
   filter on gradient-clipped text renders blurry in Safari (that was the "blurred text" on iPhone). */
.hero h1 { position: relative; font-weight: 200; font-size: clamp(56px, 13vw, 128px); letter-spacing: .26em; line-height: 1.05; margin: 0 0 18px; padding-left: .26em; perspective: 600px; }
.hero h1::before { content: attr(data-text); position: absolute; inset: 0; padding-left: inherit; z-index: -1; color: rgba(108,195,255,.55); filter: blur(22px);
  pointer-events: none; animation: fade-in 1.6s var(--ease) 1s both, breathe-glow 5s ease-in-out 2.6s infinite; }
.hero h1 span { display: inline-block; background: linear-gradient(180deg, #fff 35%, #9FD2FF); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform-origin: 50% 100%; animation: letter 1.3s var(--ease) both; animation-delay: calc(.4s + var(--i) * .075s); }
@keyframes letter { from { opacity: 0; transform: translateY(.45em) rotateX(-75deg); } to { opacity: 1; transform: none; } }
@keyframes breathe-glow { 50% { opacity: .55; } }
.tag { font-size: clamp(19px, 3.4vw, 26px); font-weight: 400; margin: 0 auto 34px; max-width: 26em; color: rgba(244,248,255,.86); animation: enter-up 1.4s var(--ease) .9s both; }
.hero .cta { animation: enter-up 1.4s var(--ease) 1.05s both; }
.hero .small { margin-top: 22px; font-size: 14px; color: rgba(244,248,255,.55); animation: enter-up 1.4s var(--ease) 1.2s both; }
@keyframes enter-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.scroll-cue { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; width: 26px; height: 42px; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.35); animation: enter-up 1.4s var(--ease) 1.6s both; }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* the hero phone: real gameplay, rising out of the hero with a 3D tilt that straightens as you scroll */
.hero { grid-template-rows: auto auto; align-content: center; gap: 0; }
.hero-stage { perspective: 1400px; margin-top: 56px; display: grid; place-items: center; animation: enter-up 1.6s var(--ease) 1.35s both; }
.tilt-pill { position: fixed; z-index: 40; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 14px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(12,18,40,.72); color: #EDF1FA;
  font: 600 14px/1 -apple-system, system-ui, sans-serif; cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(108,195,255,.15); animation: pillIn .6s var(--ease) both; }
.tilt-pill svg { width: 20px; height: 20px; fill: none; stroke: #8FD4FF; stroke-width: 1.7; stroke-linecap: round; animation: tiltNudge 2.4s ease-in-out infinite; }
@keyframes pillIn { from { opacity: 0; translate: -50% 20px; } }
@keyframes tiltNudge { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(14deg); } 65% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .tilt-pill, .tilt-pill svg { animation: none; } }
/* every phone mockup turns with the tilt (set by site.js) and a glare slides over its glass */
.phone-col, .step { perspective: 1300px; }
.phone.device, .mini-phone.device { rotate: var(--trot, 0 1 0 0deg); }
.device .bezel::after { content: ""; position: absolute; inset: 3.2%; z-index: 3; border-radius: 13.2% / 6.1%; pointer-events: none;
  background: linear-gradient(110deg, transparent calc(28% + var(--gl, 0) * 34%), rgba(255,255,255,.26) calc(40% + var(--gl, 0) * 34%), transparent calc(52% + var(--gl, 0) * 34%));
  opacity: var(--glo, .22); mix-blend-mode: screen; }

.hero-phone { width: min(300px, 64vw); transform: rotateX(var(--rx, 24deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, .92)); transform-origin: 50% 0;
  transition: transform .25s linear; will-change: transform; }
.hero-phone .screen video { opacity: 1; transform: none; }


/* ---------------------------------------------------------------- statement: words light up with scroll */
.statement { padding: 18vh 0; }
.words { font-size: clamp(32px, 6.2vw, 68px); font-weight: 700; line-height: 1.14; letter-spacing: -.025em; margin: 0; max-width: 16em; }
.words span { opacity: .14; transition: opacity .6s var(--ease); }
.words span.lit { opacity: 1; }
.words span.lit.hl { background: linear-gradient(90deg, var(--blue), #7A5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- showcase: pinned phone */
.showcase { padding: 4vh 0 10vh; }
.show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; }
.phone-col { position: sticky; top: calc(50vh - 345px); height: 690px; display: grid; place-items: center; }
/* a modern Pro-style phone, drawn in CSS: titanium edge, thin black bezel, Dynamic Island, side buttons */
.device { position: relative; aspect-ratio: 9 / 19.5; border-radius: 17% / 7.9%; padding: 1.3%;
  background: linear-gradient(135deg, #C9CDD3 0%, #7E838C 18%, #E8EAED 34%, #8C9199 52%, #D5D8DC 70%, #6F747C 88%, #B9BDC3 100%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.5), 0 60px 120px -30px rgba(0,0,0,.5), 0 30px 70px -40px rgba(47,123,255,.55); }
.device .bezel { position: relative; width: 100%; height: 100%; border-radius: 16% / 7.4%; padding: 3.2%; background: #050506; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
/* Dynamic Island sized like the iPhone 18 Pro's: a short pill (about a fifth of the screen width) with the lens at its right end */
.device .island { position: absolute; z-index: 2; top: 3.1%; left: 50%; translate: -50% 0; width: 20.5%; height: 3.4%; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.device .island::after { content: ""; position: absolute; right: 9%; top: 50%; width: 27%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2A3550, #05070C 60%); }
.device .screen { position: relative; width: 100%; height: 100%; border-radius: 13.2% / 6.1%; overflow: hidden; background: #F7F6F2; }
.device .side { position: absolute; width: 1.4%; border-radius: 2px; background: linear-gradient(90deg, #6F747C, #D5D8DC 60%, #8C9199); }
.device .side.action { left: -1%; top: 17%; height: 4.5%; }
.device .side.vol-up { left: -1%; top: 24%; height: 7.5%; }
.device .side.vol-down { left: -1%; top: 33%; height: 7.5%; }
.device .side.power { right: -1%; top: 25%; height: 11%; }
.device .side.camera { right: -.8%; top: 62%; height: 7%; width: 1%; }
.phone { width: 300px; }
.screen img, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.screen img.on, .screen video.on { opacity: 1; transform: none; }
.step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.step.on { opacity: 1; transform: none; }
.step h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.025em; margin: 6px 0 14px; }
.step p { color: var(--muted); font-size: 19px; max-width: 26em; margin: 0; }
.step p.kicker { color: var(--blue); font-size: 15px; margin: 0 0 6px; }
.kicker { color: var(--blue); font-weight: 600; font-size: 15px; letter-spacing: .02em; margin: 0 0 6px; }
/* phones and tablets: no pinned phone; each caption brings its own phone, which slides in */
.mini-phone { display: none; }
@media (max-width: 820px) {
  .show-grid { grid-template-columns: 1fr; gap: 0; }
  .phone-col { display: none; }
  .step { min-height: 0; padding: 28px 0 56px; text-align: center; align-items: center; opacity: 1; transform: none; }
  .mini-phone { display: block; width: min(240px, 60vw); margin: 0 auto 34px;
    opacity: 0; transform: translateY(50px) scale(.94) rotate(-2deg); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); }
  .mini-phone .screen img, .mini-phone .screen video { opacity: 1; transform: none; }
  .mini-phone.device { box-shadow: 0 0 0 .5px rgba(0,0,0,.5), 0 28px 50px -22px rgba(0,0,0,.45), 0 18px 40px -26px rgba(47,123,255,.5); }
  .step.seen .mini-phone { opacity: 1; transform: none; }
  .step h2 { font-size: 30px; }
  .step p { font-size: 17px; }
}


/* ---------------------------------------------------------------- the ring gallery: two rows gliding past, every ring spinning */
.gallery { overflow: hidden; padding-bottom: 72px; }
.gallery h2.big { margin-bottom: 30px; }
.marquee { overflow: hidden; padding: 10px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 34px; width: max-content; animation: glide 70s linear infinite; }
.marquee.rev .track { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .track { animation-play-state: paused; }
.track figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.track img { width: 110px; height: 110px; animation: spin var(--sp) linear infinite; animation-direction: normal; transition: transform .6s var(--ease); }
.track figure:nth-child(even) img { animation-direction: reverse; }
.track figure:hover img { scale: 1.15; }
.track figcaption { font-size: 13px; font-weight: 600; color: var(--muted); }
@keyframes glide { to { transform: translateX(-50%); } }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-color-scheme: dark) { .track img { filter: invert(1) hue-rotate(180deg); } }

/* ---------------------------------------------------------------- Diwali collection: glowing lamps, rising embers */
.diwali { position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #FFF3E2;
  background: radial-gradient(120% 70% at 50% 105%, #4A1D07 0%, #1A0A1E 52%, var(--navy) 100%); }
.diwali .kicker { color: #FFB347; }
.diwali .kicker::before { background: linear-gradient(90deg, #FFB347, #FF5C7A); }
.diwali .lead { color: rgba(255,236,214,.74); margin: -24px auto 46px; max-width: 34em; }
.diwali .warm { position: absolute; left: 50%; top: 62%; width: 820px; height: 520px; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,150,50,.26), rgba(255,120,40,0)); animation: breathe 6s ease-in-out infinite; }
.lamps { list-style: none; padding: 0; margin: 0 auto 46px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
.lamps li { display: grid; justify-items: center; }
.lamps .halo { position: relative; width: min(176px, 27vw); aspect-ratio: 1; animation: bob 5.2s ease-in-out infinite; animation-delay: var(--b, 0s); transition: scale .6s var(--ease); }
.lamps .halo::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,176,70,.5), rgba(255,120,40,0) 64%); animation: flicker 3.4s ease-in-out infinite; animation-delay: var(--b, 0s); }
.lamps img { width: 100%; height: 100%; animation: spin 20s linear infinite; }
.lamps li:nth-child(2) img { animation-direction: reverse; animation-duration: 26s; }
.lamps li:hover .halo { scale: 1.1; }
.lamps h3 { margin: 14px 0 0; font-size: clamp(16px, 2.6vw, 21px); }
.lamps p { margin: 2px 0 0; font-size: 14px; color: rgba(255,236,214,.68); }
.lamps p b { color: #FFC466; font-size: 17px; }
.btn.primary.glow-warm { color: #2A1204; background: linear-gradient(180deg, #FFB347, #F0661C); box-shadow: 0 14px 40px -12px rgba(255,130,40,.7); }
.embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.embers i { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFF0C4, #FF9A3C 55%, rgba(255,120,40,0) 72%); animation: ember var(--t) linear infinite; animation-delay: var(--d); }
@keyframes ember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: .95; } 55% { transform: translate(16px, -480px) scale(.8); }
  100% { transform: translate(-12px, -980px) scale(.4); opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: .85; scale: 1; } 30% { opacity: 1; scale: 1.07; } 55% { opacity: .7; scale: .96; } 80% { opacity: .95; scale: 1.03; } }

/* ---------------------------------------------------------------- sections */
section { padding: 96px 0; }
section.alt { background: var(--paper-2); }
h2 { font-size: clamp(28px, 5vw, 36px); margin: 0 0 8px; letter-spacing: -.02em; }
h2.big { font-size: clamp(38px, 7vw, 72px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 40px; }
h2.huge { font-size: clamp(44px, 9vw, 104px); line-height: 1; letter-spacing: -.04em; margin: 0 0 34px; }
.lead { color: var(--muted); margin: -24px 0 32px; max-width: 40em; font-size: 19px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid > * { min-width: 0; }   /* a long word or button label can never make the cards wider than the screen */
.card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
/* a soft light that follows the pointer across the card */
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(47,123,255,.12), transparent 60%); }
.card:hover::before { opacity: 1; }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(0,0,0,.25); }
.card h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); }
.steps { margin: 0; padding-left: 22px; }
.steps li { margin: 6px 0; }
.note { color: var(--muted); font-size: 15px; }
kbd { font: inherit; font-weight: 600; padding: 1px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--paper-2); white-space: nowrap; }
/* narrow phones (or large text): roomier cards, and long button names like "Add to Home screen" may wrap inside their chip */
@media (max-width: 480px) {
  .card { padding: 22px 20px; }
  .steps { padding-left: 20px; }
  .steps li { margin: 8px 0; overflow-wrap: break-word; }
  kbd { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.9; }
}
.devices { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 28px; }
.devices span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; font-weight: 600; }

/* tiny live demos on the How it plays cards */
.demo { position: relative; height: 150px; margin: -6px -6px 18px; border-radius: 16px; background: linear-gradient(180deg, var(--paper-2), var(--paper)); overflow: hidden; }
.demo i, .demo b { position: absolute; display: block; }
.demo .ring { left: 50%; top: 22px; width: 40px; height: 40px; margin-left: -20px; border: 3px solid var(--ink); border-radius: 50%; }
.demo .ball { left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 14px rgba(47,123,255,.6); }
.dash .line { left: 50%; top: 66px; bottom: 10px; border-left: 2px dotted rgba(127,127,127,.6); }
.dash .ball { top: 112px; animation: dash 2.6s var(--ease) infinite; }
.dash .tap { left: 50%; top: 112px; width: 40px; height: 40px; margin: -12px 0 0 -20px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; animation: tap 2.6s ease-out infinite; }
@keyframes dash { 0%, 30% { transform: translateY(0); } 55%, 80% { transform: translateY(-78px); } 100% { transform: translateY(0); opacity: 0; } }
@keyframes tap { 0%, 22% { opacity: 0; transform: scale(.4); } 28% { opacity: .9; } 45% { opacity: 0; transform: scale(1.4); } 100% { opacity: 0; } }
.perfect .ring { top: 40px; animation: pop 2.4s var(--ease) infinite; }
.perfect .ball { top: 52px; }
.perfect .pulse { left: 50%; top: 40px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; border: 2px solid var(--blue); animation: pulse 2.4s ease-out infinite; }
.perfect b { left: 0; right: 0; top: 104px; text-align: center; font-size: 13px; letter-spacing: .14em; color: var(--blue); animation: word 2.4s var(--ease) infinite; }
@keyframes pop { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 30% { transform: scale(1); } }
@keyframes pulse { 0% { opacity: .9; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes word { 0% { opacity: 0; transform: translateY(8px); } 15%, 60% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tide .ring { top: 30px; }
.tide .ball { top: 42px; animation: bob 3s ease-in-out infinite; }
.tide .wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 60px; fill: var(--ink); opacity: .85; animation: tide 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes tide { 0% { transform: translate(0, 34px); } 50% { transform: translate(-25%, 6px); } 100% { transform: translate(-50%, 34px); } }

/* numbers */
.facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; padding: 0; list-style: none; }
.facts li { border-top: 1px solid var(--line); padding: 18px 0 0; }
.facts b { display: block; font-size: clamp(44px, 6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.04em; margin-bottom: 6px;
  background: linear-gradient(180deg, var(--ink) 30%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.facts span { color: var(--muted); font-size: 15px; }

/* finale */
.finale { position: relative; text-align: center; color: var(--white); background: var(--navy); overflow: hidden; isolation: isolate; padding: 18vh 0; }
.finale .aura { top: 50%; width: 760px; height: 760px; }
.finale h2.huge { background: linear-gradient(180deg, #fff 40%, #9FD2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* follow on Instagram: a glass chip; the icon sits in a gradient ring that keeps turning and pulses now and then */
.follow { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 10px 22px 10px 10px; border-radius: 999px; text-decoration: none; color: var(--white);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .6s var(--ease), translate .5s var(--ease), background .4s, box-shadow .6s var(--ease); }
.follow b { font-weight: 600; background: linear-gradient(90deg, #FFD36E, #FF5C7A, #B65CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.follow .ig { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; isolation: isolate; }
.follow .ig::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -2;
  background: conic-gradient(from 0deg, #FFD36E, #FF8A3D, #FF3D6E, #C13DFF, #5C6BFF, #FFD36E); animation: orbit 6s linear infinite; }
.follow .ig::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; z-index: -1; background: #071148; }
.follow .ig svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; animation: ig-pop 4s var(--ease) 2s infinite; }
.follow:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 18px 40px -18px rgba(255,61,110,.6); }
.follow:hover .ig::before { animation-duration: 1.6s; }
.follow.fb { margin-top: 0; }
/* the three follow chips sit in one row, the same size, and stack evenly on narrow phones */
.follows { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.follows > p { margin: 0; }
.follows .follow { margin-top: 0; padding: 8px 20px 8px 8px; gap: 12px; font-size: 15px; white-space: nowrap; }
.follows .follow .ig { width: 40px; height: 40px; }
.follow .nm { display: none; font-style: normal; }
@media (max-width: 560px) { /* phones: three equal tiles side by side, icon over the name */
  .follows { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .follows > p { flex: 1 1 0; min-width: 0; }
  .follows .follow { width: 100%; flex-direction: column; gap: 8px; padding: 14px 6px 12px; border-radius: 22px; font-size: 13px; }
  .follows .follow > span:not(.ig) { display: none; }
  .follows .follow .nm { display: block; color: var(--white); opacity: .9; } }
.follow.fb b { background: linear-gradient(90deg, #8EC5FF, #1877F2 60%, #6CC3FF); -webkit-background-clip: text; background-clip: text; }
.follow.fb .ig::before { background: conic-gradient(from 0deg, #6CC3FF, #1877F2, #0B4FC2, #4AA3FF, #6CC3FF); }
.follow.fb .ig svg { width: 24px; height: 24px; }
.follow.fb:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 18px 40px -18px rgba(24,119,242,.7); }
.follow.yt { margin-top: 0; }
.follow.yt b { background: linear-gradient(90deg, #FF9A8E, #FF0033 60%, #FF6B5E); -webkit-background-clip: text; background-clip: text; }
.follow.yt .ig::before { background: conic-gradient(from 0deg, #FF6B5E, #FF0033, #B3001F, #FF4A3D, #FF6B5E); }
.follow.yt .ig svg { width: 24px; height: 24px; }
.follow.yt:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 18px 40px -18px rgba(255,0,51,.6); }
@keyframes ig-pop { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.22) rotate(-8deg); } 86% { transform: scale(.94); } }
.foot a.social:hover svg { animation: ig-pop 1s var(--ease); }

/* ---------------------------------------------------------------- scroll reveal */
.js .reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
/* big headings: each word slides up out of its own line */
.js .split.reveal { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.2s var(--ease); transition-delay: calc(var(--d, 0s) + var(--wi) * 70ms); }
.split.in .w > span { transform: none; }
.finale h2.huge.split { background: none; color: inherit; }
.finale h2.huge .w > span { background: linear-gradient(180deg, #fff 40%, #9FD2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* a line that draws itself in front of each section's label */
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), #7A5CFF); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease) .2s; }
.kicker.in::before, .step .kicker::before { transform: none; }
/* reading progress along the top edge */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 11; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none;
  background: linear-gradient(90deg, #2F7BFF, #6CC3FF, #7A5CFF); box-shadow: 0 0 12px rgba(108,195,255,.7); }

/* ---------------------------------------------------------------- legal pages */
.doc { max-width: 720px; padding-top: 56px; padding-bottom: 72px; }
.doc h1 { font-size: clamp(32px, 6vw, 46px); letter-spacing: -.03em; margin: 0 0 4px; }
.doc h2 { font-size: 21px; margin: 34px 0 6px; }
.doc .meta { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.doc .btn.primary { color: #fff; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--navy); color: var(--white); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 15px; border-top: 1px solid rgba(255,255,255,.06); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { opacity: .75; text-decoration: none; transition: opacity .3s; }
.foot a:hover { opacity: 1; }
.foot a.social { display: inline-flex; align-items: center; gap: 7px; }
.foot a.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.foot small { opacity: .6; }
.love { width: 100%; text-align: center; margin-top: 10px; font-size: 14px; color: rgba(244,248,255,.7); }
.love .heart { display: inline-block; color: #FF5C7A; animation: beat 1.6s ease-in-out infinite; }
.love .cup { display: inline-block; animation: steam 3s ease-in-out infinite; }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.25); } 20% { transform: scale(1.05); } }
@keyframes steam { 50% { transform: translateY(-2px) rotate(-6deg); } }

/* ---------------------------------------------------------------- everything still for "Reduce motion" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .split .w > span { transform: none; }
  .kicker::before { transform: none; }
  .progress { display: none; }
  .words span { opacity: 1; }
  .step { opacity: 1; transform: none; }
  .sky, .embers { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- 3D homepage: rise3d.js adds body.space when WebGL runs
   (not with Reduce motion), and every section turns into dark glass over the ring tunnel. Without it the page is unchanged. */
canvas.rise3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; pointer-events: none; }
body.space { --paper: #0B0F22; --paper-2: rgba(255,255,255,.05); --ink: #EDF1FA; --muted: #A7B1C7; --line: rgba(255,255,255,.12); background: #02040F; color-scheme: dark; }
.space .hero, .space .finale, .space .foot { background: transparent; }
.space .hero .sky, .space .hero .aura { display: none; }
.space .hero h1::before { color: rgba(108,195,255,.4); }
.space section.alt { background: linear-gradient(180deg, rgba(4,8,26,0), rgba(4,8,26,.55) 12%, rgba(4,8,26,.55) 88%, rgba(4,8,26,0)); }
.space .card, .space .devices span, .space kbd { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.space .card { box-shadow: 0 30px 70px -36px rgba(0,0,0,.9); }
.space .demo { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.space .track img { filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 10px rgba(120,190,255,.35)); }
.space .diwali { background: radial-gradient(120% 70% at 50% 105%, rgba(74,29,7,.85) 0%, rgba(26,10,30,.7) 52%, rgba(1,5,30,.35) 100%); }
.space .statement .words span { opacity: .22; } .space .statement .words span.lit { opacity: 1; }
.space .step h2, .space h2.big, .space .facts b { text-shadow: 0 2px 30px rgba(2,4,15,.8); }
.space .facts b { background: linear-gradient(180deg, #fff 30%, #8ECFFF); -webkit-background-clip: text; background-clip: text; }
.space .facts li { border-color: rgba(255,255,255,.14); }
.space .foot { border-top-color: rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(2,4,15,0), rgba(2,4,15,.8)); }
.space .scrolled .top, .space.scrolled .top { background: rgba(2,4,15,.6); }

/* "Coming soon on Google Play" badge under the hero buttons (until playStoreUrl is set) */
.soon { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 22px 10px 12px; border-radius: 16px; text-align: left;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 34px -14px rgba(47,123,255,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: enter-up 1.4s var(--ease) 1.3s both; position: relative; overflow: hidden; }
.soon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-120%); animation: soonShine 4.5s ease-in-out 2.5s infinite; pointer-events: none; }
.soon-logo { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.soon-logo svg { width: 30px; height: 32px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.soon-t { display: grid; line-height: 1.15; }
.soon-t em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9FD2FF; display: flex; align-items: center; gap: 7px; }
.soon-t b { font-size: 19px; font-weight: 600; color: var(--white); letter-spacing: -.01em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: livePulse 1.8s ease-out infinite; flex: none; display: inline-block; }
.soon-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,160,255,.16), rgba(0,230,118,.10) 50%, rgba(255,188,0,.10)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 14px 34px -18px rgba(0,160,255,.8); }
.soon-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(-120%); animation: soonShine 4.5s ease-in-out 1s infinite; pointer-events: none; }
.soon-card .soon-logo { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.soon-card .soon-logo svg { width: 26px; height: 28px; animation: soonBob 3s ease-in-out infinite; }
.soon-card > span:last-child { display: grid; line-height: 1.25; }
.soon-card em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #19B866; display: flex; align-items: center; gap: 7px; }
.soon-card b { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.soon-card small { font-size: 14px; color: var(--muted); }
@keyframes soonBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } }
@keyframes soonShine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .soon, .soon::after, .live-dot, .soon-card::after, .soon-card .soon-logo svg { animation: none; } }