/* Pitaka Quest marketing site. Single Night world on purpose: the app defaults to Night.
   Colour tokens mirror the Pitaka design system tokens.json. */
/* Layout: a scroll film. Pinned "scenes" (sticky stages scrubbed by scroll) alternate with quiet bands.
   Smooth camera, stepped sprites: the page moves like Apple, the characters move like 8-bit.
   Single Night world on purpose: the app itself defaults to Night. */
:root{
  --bg:#110d22; --deep:#0b0818; --battle:#1a0f22; --panel:#1c1636; --raised:#2a2150; --sunk:#161230;
  --edge:#3a2f6b; --edge-strong:#4a3d8c; --ink:#0a0716;
  --text:#f4efff; --muted:#b9aee0; --dim:#8f84bd; --unlit:#4d4380;
  --gold:#ffd166; --gold-hi:#ffe7a8; --gold-shade:#b07a12; --on-gold:#1a1300;
  --crimson:#ff5d73; --crimson-text:#ff8a9b; --mana:#4fe3c1; --violet:#8f7cff; --violet-text:#c4b8ff; --orange:#ff9f43;
  --scene:var(--bg);
  --f-display:"Pixelify Sans", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --f-label:"Silkscreen", ui-monospace, "SF Mono", monospace;
  --f-body:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --f-mono:"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--scene); color:var(--text); font-family:var(--f-body); font-size:17px; line-height:1.5;
  transition:background-color 1.1s var(--ease-out); overflow-x:clip; -webkit-font-smoothing:antialiased;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--deep)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
h1,h2,h3{font-family:var(--f-display); font-weight:700; margin:0; text-wrap:balance; line-height:1}
p{margin:0}
.kicker{font-family:var(--f-label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--gutter-l); padding-right:var(--gutter-r)}
.sprite{display:block; image-rendering:pixelated}
.sprite path{shape-rendering:crispEdges}
svg{overflow:visible}

/* ---------- starfield + nav ---------- */
#stars{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
main, footer{position:relative; z-index:1}
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:color-mix(in srgb, var(--deep) 72%, transparent); backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid color-mix(in srgb, var(--edge) 60%, transparent);
}
.nav .wrap{display:flex; align-items:center; gap:24px; height:52px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-size:18px}
.brand .sprite{width:24px; height:24px}
.nav-links{display:flex; gap:22px; margin-left:auto; font-size:13px; color:var(--muted)}
.nav-links a{text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav .btn{padding:7px 14px; font-size:12px}
.hud{position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent}
.hud i{position:absolute; inset:0 auto 0 0; width:calc(var(--prog,0) * 100%); background:linear-gradient(90deg, var(--mana), var(--gold)); box-shadow:0 0 12px var(--gold)}
.hud-lv{font-family:var(--f-label); font-size:10px; letter-spacing:.12em; color:var(--gold); min-width:52px; text-align:right}
.hud-lv.pop{animation:pop .5s var(--ease-out)}
@keyframes pop{30%{transform:scale(1.5); color:var(--text)}}
@media (max-width:760px){.nav-links{display:none} .hud-lv{margin-left:auto}}

/* ---------- buttons ---------- */
.btn{
  --c:var(--gold); display:inline-flex; align-items:center; gap:10px; font-family:var(--f-label); font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--on-gold); background:var(--c); border:2px solid var(--ink); padding:14px 22px; cursor:pointer;
  box-shadow:inset -3px -3px 0 var(--gold-shade), inset 3px 3px 0 var(--gold-hi), 4px 4px 0 var(--ink);
  transition:transform .12s steps(2), box-shadow .12s steps(2);
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:inset -3px -3px 0 var(--gold-shade), inset 3px 3px 0 var(--gold-hi), 6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px); box-shadow:inset -3px -3px 0 var(--gold-shade), inset 3px 3px 0 var(--gold-hi), 1px 1px 0 var(--ink)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--edge-strong); box-shadow:none}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn .sprite{width:20px; height:20px}
.badge{display:inline-block; line-height:0; transition:transform .12s steps(2), filter .12s steps(2)}
.badge img{display:block; height:auto}
.badge:hover{transform:translate(-2px,-2px); filter:drop-shadow(4px 4px 0 var(--ink))}
.badge:active{transform:translate(2px,2px); filter:none}

/* ---------- scenes ---------- */
.scene{position:relative}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center}

/* hero */
#hero{height:190vh}
#hero .stage{grid-template-rows:1fr auto; padding-block:72px 7vh}
#coin{width:min(54vh, 78vw); height:min(54vh, 78vw); align-self:end}
.hero-copy{text-align:center; display:grid; justify-items:center; gap:22px; padding-left:var(--gutter-l); padding-right:var(--gutter-r); will-change:transform, opacity}
.hero-copy h1{font-size:clamp(2.6rem, 7.4vw, 6.4rem); letter-spacing:-.01em; line-height:.98}
.hero-copy h1 .l2{color:var(--gold); text-shadow:0 4px 0 var(--gold-shade), 0 8px 0 var(--ink)}
.hero-copy .lede{max-width:36ch; font-size:clamp(1.05rem, 1.5vw, 1.25rem); color:var(--muted)}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.ch{display:inline-block; animation:rise 1s var(--ease-out) backwards; animation-delay:calc(var(--i) * 26ms + 380ms)}
@keyframes rise{from{opacity:0; transform:translateY(.55em) rotate(4deg); filter:blur(6px)}}
.fade-in{animation:fadeUp 1s var(--ease-out) backwards; animation-delay:var(--d, 900ms)}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)}}
.scroll-cue{position:absolute; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); left:50%; translate:-50% 0; font-family:var(--f-label); font-size:10px; letter-spacing:.2em; color:var(--dim); display:grid; justify-items:center; gap:6px}
.scroll-cue b{width:2px; height:26px; background:linear-gradient(var(--gold), transparent); animation:cue 1.8s steps(6) infinite}
@keyframes cue{from{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} to{transform:scaleY(0); transform-origin:bottom}}

/* split stage (copy + device) */
.split{width:100%; max-width:1180px; padding-left:var(--gutter-l); padding-right:var(--gutter-r); display:grid; grid-template-columns:1fr auto; gap:clamp(24px, 6vw, 96px); align-items:center}
.caps{position:relative; min-height:22rem; min-width:0}
.cap{position:absolute; inset:0 0 auto 0; display:grid; gap:18px; opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out), transform .8s var(--ease-out)}
.cap.on{opacity:1; transform:none}
.cap h2{font-size:clamp(2.2rem, 5vw, 4.4rem)}
.cap p{color:var(--muted); font-size:clamp(1.02rem, 1.4vw, 1.2rem); max-width:34ch}
.cap .rule{font-family:var(--f-mono); font-size:13px; color:var(--dim); border-left:2px solid var(--edge-strong); padding-left:12px; max-width:40ch}
.steps{display:flex; gap:6px; margin-top:4px}
.steps i{width:22px; height:6px; background:var(--edge); transition:background .4s}
.steps i.on{background:var(--gold)}

/* phone */
.phone{
  position:relative; height:min(680px, 78svh); aspect-ratio:340/700; padding:11px; border-radius:54px;
  background:linear-gradient(145deg, #2c2450, #0c0918 40%, #1b1533);
  box-shadow:0 0 0 1px #4a3d8c, inset 0 0 0 2px #05030b, 0 50px 100px -30px #000, 0 0 140px -40px var(--glow, var(--crimson));
}
.phone::after{content:""; position:absolute; top:22px; left:50%; translate:-50% 0; width:30%; height:26px; border-radius:20px; background:#000; z-index:5}
.screen{position:relative; width:100%; height:100%; border-radius:44px; overflow:hidden; background:var(--battle)}
.screen-in{position:absolute; top:0; left:0; width:320px; transform-origin:0 0; transform:scale(var(--k,1)); display:flex; flex-direction:column}
.status{display:flex; justify-content:space-between; padding:18px 30px 0; font:600 14px var(--f-body); height:52px}

/* battle UI */
.battle{flex:1; display:flex; flex-direction:column; padding:14px 18px 22px; gap:12px; position:relative}
.battle .top{display:flex; justify-content:space-between; align-items:baseline}
.tag{font-family:var(--f-label); font-size:9px; letter-spacing:.12em; padding:3px 6px; border:1px solid currentColor}
.boss-name{font-family:var(--f-display); font-size:30px}
.boss-sub{font-size:12px; color:var(--dim); margin-top:-8px}
.arena{position:relative; flex:1; min-height:220px; display:grid; place-items:center;
  background:radial-gradient(60% 50% at 50% 70%, #3a1a2a, transparent 70%), repeating-linear-gradient(0deg, transparent 0 15px, #ffffff06 15px 16px)}
.arena .ground{position:absolute; bottom:22px; width:62%; height:14px; background:#00000066; border-radius:50%; filter:blur(2px)}
#boss{width:190px; height:190px; position:relative; z-index:1}
#boss .sprite{width:100%; height:100%}
.bob{animation:bob 1s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-4%)}}
.dmg{position:absolute; left:50%; top:30%; z-index:3; font-family:var(--f-display); font-size:30px; white-space:nowrap; color:var(--text); text-shadow:3px 3px 0 var(--ink), -1px -1px 0 var(--ink); opacity:0; pointer-events:none; text-align:center; line-height:1}
.dmg small{display:block; font-family:var(--f-label); font-size:11px; color:var(--gold); margin-top:4px; letter-spacing:.1em}
.dmg.crit{color:var(--gold); font-size:38px}
.slash{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(120deg, transparent 46%, #fff 49%, var(--gold) 50%, transparent 53%)}
.hp-row{display:flex; justify-content:space-between; font-family:var(--f-label); font-size:10px; letter-spacing:.1em; color:var(--muted)}
.hp-row b{font-family:var(--f-mono); font-size:14px; color:var(--text); letter-spacing:0; font-variant-numeric:tabular-nums}
.hp{height:16px; border:2px solid var(--ink); background:#3a1a2a; position:relative; box-shadow:0 0 0 2px var(--edge)}
.hp i{position:absolute; inset:0; width:100%; transform-origin:left; background:var(--crimson); box-shadow:inset 0 -4px 0 #c23a52, inset 0 3px 0 #ff9aa8}
.hp u{position:absolute; inset:0; width:100%; transform-origin:left; background:#fff; opacity:.6}
.hp::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%)}
.log{display:grid; gap:6px; min-height:112px; align-content:end}
.log div{display:flex; justify-content:space-between; font-size:12px; padding:6px 8px; background:#ffffff08; border-left:2px solid var(--crimson); opacity:0; transform:translateX(-10px); transition:all .35s var(--ease-out)}
.log div.on{opacity:1; transform:none}
.log div span:last-child{font-family:var(--f-mono); color:var(--gold)}
.strike-btn{font-family:var(--f-label); font-size:13px; letter-spacing:.1em; text-align:center; padding:12px; color:var(--on-gold); background:var(--gold); border:2px solid var(--ink); box-shadow:inset -3px -3px 0 var(--gold-shade), 3px 3px 0 var(--ink); transition:transform .08s}
.strike-btn.press{transform:translate(2px,2px) scale(.97); box-shadow:inset -3px -3px 0 var(--gold-shade), 0 0 0 var(--ink)}
.victory{position:absolute; inset:0; z-index:6; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; opacity:0; pointer-events:none;
  background:radial-gradient(70% 45% at 50% 45%, #ffd16633, transparent 70%), #1a0f22e0}
.victory h3{font-size:58px; color:var(--gold); text-shadow:0 4px 0 var(--gold-shade), 0 8px 0 var(--ink)}
.victory p{font-size:13px; color:var(--muted)}
.xp-chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-label); font-size:11px; letter-spacing:.08em; padding:4px 8px; background:#3a3214; color:var(--gold); border:1px solid var(--gold-shade)}
.confetti{position:absolute; left:50%; top:42%; width:6px; height:6px}

/* mana */
#mana{height:340vh; --glow:var(--mana)}
#mana .stage{align-content:center; gap:clamp(18px, 4vh, 40px); padding-block:76px 24px}
.mana-head{text-align:center; display:grid; gap:14px; justify-items:center; padding-left:var(--gutter-l); padding-right:var(--gutter-r)}
.mana-head h2{font-size:clamp(2.2rem, 5.4vw, 4.6rem)}
.mana-head p{color:var(--muted); max-width:44ch; font-size:clamp(1rem, 1.4vw, 1.15rem)}
.flasks{display:flex; gap:clamp(14px, 5vw, 80px); justify-content:center; align-items:end; padding-left:var(--gutter-l); padding-right:var(--gutter-r)}
.flask{display:grid; justify-items:center; gap:10px; min-width:0}
.flask svg{width:clamp(84px, 15vw, 190px); height:auto; transition:filter .4s}
.flask.low svg{filter:drop-shadow(0 0 18px #ff5d7388); animation:jitter .2s steps(2) infinite}
@keyframes jitter{50%{transform:translateX(2px)}}
.flask .name{font-family:var(--f-label); font-size:11px; letter-spacing:.12em; color:var(--muted)}
.flask .amt{font-family:var(--f-mono); font-weight:600; font-size:clamp(14px, 1.8vw, 20px); font-variant-numeric:tabular-nums}
.flask .of{font-size:12px; color:var(--dim); margin-top:-8px}
.month{display:grid; gap:10px; justify-items:center; padding-left:var(--gutter-l); padding-right:var(--gutter-r); width:100%}
.days{display:grid; grid-template-columns:repeat(31, 1fr); gap:3px; width:min(620px, 100%)}
.days i{aspect-ratio:1; background:var(--sunk); border:1px solid var(--edge); transition:background .25s, transform .25s}
.days i.on{background:var(--mana); border-color:var(--ink); transform:translateY(-2px)}
.month-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; align-items:center; font-family:var(--f-label); font-size:11px; letter-spacing:.1em; color:var(--muted)}
.month-row b{font-family:var(--f-mono); color:var(--text); font-size:14px; letter-spacing:0; font-variant-numeric:tabular-nums}
.oracle-line{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--violet-text); background:#1a1440; border:1px solid #3a2f6b; padding:8px 14px; opacity:0; transform:translateY(8px); transition:all .5s var(--ease-out)}
.oracle-line.on{opacity:1; transform:none}
.oracle-line .sprite{width:20px; height:20px}

/* xp band */
.band{padding-block:clamp(90px, 16vh, 180px)}
.xp-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px, 5vw, 72px); align-items:center}
.xp-grid > *{min-width:0}
.xp-copy{display:grid; gap:18px}
.xp-copy h2{font-size:clamp(2.2rem, 5vw, 4.2rem)}
.xp-copy p{color:var(--muted); max-width:38ch; font-size:clamp(1rem, 1.4vw, 1.15rem)}
.panel{background:var(--panel); border:2px solid var(--ink); box-shadow:inset 0 0 0 2px var(--edge), 6px 6px 0 var(--ink)}
.quest-log{padding:18px; display:grid; gap:8px}
.quest-log header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.quest-log header span:first-child{font-family:var(--f-label); font-size:11px; letter-spacing:.12em; color:var(--muted)}
.qrow{display:grid; grid-template-columns:34px 1fr auto auto; gap:12px; align-items:center; padding:10px; background:var(--sunk); border:1px solid var(--edge); transition:background .3s, border-color .3s}
.qrow.hit{background:#142a26; border-color:var(--mana)}
.qrow .ic{width:34px; height:34px; display:grid; place-items:center; background:var(--raised); font-family:var(--f-display); font-size:16px}
.qrow .t{font-size:15px; min-width:0}
.qrow .t small{display:block; font-size:12px; color:var(--dim)}
.qrow .a{font-family:var(--f-mono); font-size:14px; font-variant-numeric:tabular-nums}
.qrow .a.in{color:var(--mana)}
.qrow .xp-chip{transition:opacity .2s}
.qrow.hit .xp-chip{opacity:.25}
.hero-card{position:relative; padding:22px; display:grid; gap:14px; overflow:hidden; margin-top:22px}
.hero-card .row{display:flex; align-items:center; gap:16px}
.lv-badge{position:relative; width:74px; height:74px; display:grid; place-items:center; background:var(--gold); color:var(--on-gold); border:2px solid var(--ink); box-shadow:inset -4px -4px 0 var(--gold-shade), inset 4px 4px 0 var(--gold-hi); font-family:var(--f-display); line-height:.9; text-align:center}
.lv-badge small{display:block; font-family:var(--f-label); font-size:9px; letter-spacing:.1em}
.lv-badge b{font-size:34px}
.hero-title{font-family:var(--f-display); font-size:24px}
.hero-title small{display:block; font-family:var(--f-label); font-size:10px; letter-spacing:.12em; color:var(--dim); margin-bottom:4px}
.xpbar{height:18px; background:var(--sunk); border:2px solid var(--ink); position:relative; box-shadow:0 0 0 2px var(--edge)}
.xpbar i{position:absolute; inset:0 auto 0 0; width:var(--w, 90%); background:var(--gold); box-shadow:inset 0 -4px 0 var(--gold-shade), inset 0 3px 0 var(--gold-hi); transition:width .45s var(--ease-out)}
.xp-num{display:flex; justify-content:space-between; font-family:var(--f-label); font-size:10px; letter-spacing:.1em; color:var(--muted)}
.xp-num b{font-family:var(--f-mono); color:var(--text); letter-spacing:0; font-size:13px; font-variant-numeric:tabular-nums}
.rays{position:absolute; inset:-60%; background:repeating-conic-gradient(from 0deg, #ffd16622 0 10deg, transparent 10deg 20deg); opacity:0; pointer-events:none}
.hero-card.up .rays{animation:rays 1.8s var(--ease-out)}
@keyframes rays{0%{opacity:0; transform:rotate(0) scale(.6)} 20%{opacity:1} 100%{opacity:0; transform:rotate(90deg) scale(1.1)}}
.hero-card.up .lv-badge{animation:badge 1s var(--ease-out)}
@keyframes badge{0%{transform:scale(1)} 25%{transform:scale(1.35) rotate(-6deg)} 50%{transform:scale(.92) rotate(3deg)} 100%{transform:none}}
.lvup{position:absolute; top:10px; right:14px; font-family:var(--f-display); font-size:22px; color:var(--gold); text-shadow:2px 2px 0 var(--ink); opacity:0}
.hero-card.up .lvup{animation:lvup 2.2s var(--ease-out)}
@keyframes lvup{0%{opacity:0; transform:translateY(12px) scale(.6)} 15%{opacity:1; transform:none} 75%{opacity:1} 100%{opacity:0; transform:translateY(-10px)}}
.flyer{position:fixed; z-index:80; pointer-events:none; margin:0}
.spark{position:fixed; z-index:81; width:6px; height:6px; pointer-events:none}
.replay{justify-self:start; background:none; border:0; color:var(--dim); font-family:var(--f-label); font-size:11px; letter-spacing:.12em; cursor:pointer; padding:6px 0}
.replay:hover{color:var(--gold)}

/* manifesto */
#vow{height:260vh}
#vow .stage{padding-left:var(--gutter-l); padding-right:var(--gutter-r)}
.vow{max-width:22ch; font-family:var(--f-display); font-weight:700; font-size:clamp(2rem, 5.6vw, 4.8rem); line-height:1.08; text-wrap:balance}
.vow span{color:var(--unlit); transition:color .25s}
.vow span.lit{color:var(--text)}
.vow span.g.lit{color:var(--gold)}
.vow-foot{margin-top:28px; font-family:var(--f-label); font-size:11px; letter-spacing:.14em; color:var(--dim)}

/* bestiary */
.bestiary{padding-block:clamp(80px, 14vh, 150px) clamp(60px, 10vh, 110px); overflow:hidden}
.bestiary .head{display:grid; gap:14px; margin-bottom:44px}
.bestiary h2{font-size:clamp(2.2rem, 5vw, 4.2rem)}
.bestiary .head p{color:var(--muted); max-width:46ch}
.track{display:flex; gap:18px; width:max-content; animation:marquee 46s linear infinite; padding-block:10px}
.track.rev{animation-direction:reverse; animation-duration:54s; margin-top:18px}
.bestiary:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mon{width:220px; padding:18px; display:grid; gap:6px; background:var(--panel); border:2px solid var(--ink); box-shadow:inset 0 0 0 2px var(--edge), 5px 5px 0 var(--ink); transition:transform .2s steps(2), box-shadow .2s}
.mon .pic{height:96px; display:grid; place-items:center; background:radial-gradient(50% 50% at 50% 60%, var(--tint, #3a1a2a), transparent 75%)}
.mon .sprite{width:84px; height:84px}
.mon:hover{transform:translateY(-6px); box-shadow:inset 0 0 0 2px var(--gold), 5px 11px 0 var(--ink)}
.mon:hover .sprite{animation:attack .5s steps(3) infinite}
@keyframes attack{33%{transform:translateX(-6px) scale(1.06)} 66%{transform:translateX(6px)}}
.mon b{font-family:var(--f-display); font-size:20px}
.mon span{font-size:13px; color:var(--dim)}
.mon em{font-style:normal; font-family:var(--f-label); font-size:9px; letter-spacing:.12em; color:var(--crimson-text)}

/* bento */
.features{padding-block:clamp(60px, 10vh, 120px)}
.features .head{display:grid; gap:14px; margin-bottom:40px}
.features h2{font-size:clamp(2.2rem, 5vw, 4.2rem)}
.bento{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.tile{position:relative; padding:26px; display:grid; gap:12px; align-content:start; min-height:300px; overflow:hidden; background:var(--panel); border:2px solid var(--ink); box-shadow:inset 0 0 0 2px var(--edge), 6px 6px 0 var(--ink); min-width:0;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)}
.tile:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 2px var(--edge-strong), 6px 10px 0 var(--ink)}
.tile.w2{grid-column:span 2}
.tile h3{font-size:clamp(1.5rem, 2.4vw, 2rem)}
.tile p{color:var(--muted); font-size:15px; max-width:40ch}
.tile .viz{margin-top:auto; padding-top:18px}
.reveal{transition:opacity .9s var(--ease-out), transform 1s var(--ease-out)}
.js .reveal.pre{opacity:.001; transform:translateY(40px) scale(.98)}
/* oracle */
.oracle-box{display:flex; gap:16px; align-items:flex-start}
.oracle-box .sprite{width:56px; height:56px; flex:none; animation:bob 1.6s steps(2) infinite}
.bubble{position:relative; flex:1; min-width:0; background:#1a1440; border:2px solid var(--violet); padding:14px 16px; font-size:15px; color:var(--violet-text); min-height:76px}
.bubble::after{content:"▌"; color:var(--violet); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* ward */
.calls{display:grid; gap:8px}
.call{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--sunk); border:1px solid var(--edge); font-size:13px; position:relative; overflow:hidden}
.call span:last-child{font-family:var(--f-label); font-size:9px; letter-spacing:.1em; color:var(--orange)}
.call::after{content:""; position:absolute; left:0; top:50%; height:2px; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; animation:strike 4.5s var(--ease-out) infinite; animation-delay:var(--d)}
@keyframes strike{0%,12%{transform:scaleX(0)} 30%,85%{transform:scaleX(1)} 100%{transform:scaleX(1); opacity:0}}
/* pin */
.pin{display:flex; gap:16px; justify-content:center}
.pin i{width:22px; height:22px; border:2px solid var(--gold); animation:pin 3.2s steps(1) infinite; animation-delay:calc(var(--n) * .35s)}
@keyframes pin{0%{background:transparent} 12%{background:var(--gold)} 70%{background:var(--gold); transform:none} 74%{transform:translateY(-6px)} 80%{transform:none} 90%{background:transparent}}
.pad{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:16px}
.pad span{text-align:center; font-family:var(--f-display); font-size:18px; padding:6px; background:var(--sunk); border:1px solid var(--edge); color:var(--muted)}
/* ravens */
.raven-sky{position:relative; height:120px}
.raven-sky .sprite{position:absolute; width:58px; height:58px; animation:fly 6s steps(24) infinite}
@keyframes fly{0%{left:-20%; top:60%} 50%{top:10%} 100%{left:100%; top:40%}}
.raven-note{position:absolute; right:0; bottom:0; font-size:13px; background:var(--sunk); border:1px solid var(--edge); padding:8px 12px}
.raven-note b{color:var(--gold); font-family:var(--f-label); font-size:9px; letter-spacing:.1em; display:block}
/* rituals */
.ritual{display:grid; gap:8px}
.ritual div{display:flex; justify-content:space-between; font-size:13px; padding:9px 12px; background:var(--sunk); border:1px solid var(--edge)}
.ritual div span:last-child{font-family:var(--f-label); font-size:9px; letter-spacing:.1em; color:var(--mana); animation:auto 3s steps(1) infinite; animation-delay:var(--d)}
@keyframes auto{0%{opacity:.25} 30%{opacity:1}}
/* cloud */
.sync{display:flex; align-items:center; justify-content:space-between; gap:16px; height:110px; position:relative}
.sync .end{display:grid; justify-items:center; gap:6px; font-family:var(--f-label); font-size:9px; letter-spacing:.1em; color:var(--muted); z-index:1}
.sync .end svg{width:54px; height:54px}
.sync .lane{position:absolute; left:70px; right:70px; top:38%; height:2px; background:repeating-linear-gradient(90deg, var(--edge-strong) 0 6px, transparent 6px 12px)}
.sync .lane .sprite{position:absolute; top:-10px; width:22px; height:22px; animation:ferry 3.4s cubic-bezier(.6,0,.4,1) infinite alternate}
@keyframes ferry{from{left:0} to{left:calc(100% - 22px)}}
/* victory card */
.vcard{width:150px; margin:0 auto; aspect-ratio:4/5; background:linear-gradient(#2a1426, #12060e); border:2px solid var(--gold); display:grid; place-items:center; align-content:center; gap:4px; transform:rotate(-4deg); box-shadow:6px 6px 0 var(--ink); transition:transform .6s var(--ease-out)}
.tile:hover .vcard{transform:rotate(3deg) translateY(-6px)}
.vcard .sprite{width:70px; height:70px; filter:grayscale(1) brightness(.8)}
.vcard b{font-family:var(--f-display); color:var(--gold); font-size:22px}
.vcard span{font-family:var(--f-label); font-size:8px; letter-spacing:.12em; color:var(--muted)}

/* plans */
.plans-sec{padding-block:clamp(90px, 14vh, 170px) clamp(30px, 6vh, 60px)}
.plans-sec .head{display:grid; gap:14px; justify-items:center; text-align:center; margin-bottom:clamp(36px, 6vw, 64px)}
.plans-sec h2{font-size:clamp(2.2rem, 5vw, 4.2rem); max-width:16ch}
.plans-sec .head p{color:var(--muted); max-width:44ch}
.plans{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; max-width:980px; margin:0 auto; perspective:1400px}
.plan{position:relative; padding:clamp(24px, 3vw, 38px); display:grid; gap:18px; align-content:start; background:var(--panel); border:2px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--edge), 8px 8px 0 var(--ink); transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style:preserve-3d;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); overflow:hidden; min-width:0}
.plan::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), #ffffff14, transparent 55%)}
.plan:hover::after{opacity:1}
.plan.guild{background:linear-gradient(170deg, #2a1f14, var(--panel) 55%); box-shadow:inset 0 0 0 2px var(--gold-shade), 8px 8px 0 var(--ink)}
.plan.guild::after{background:radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), #ffd16626, transparent 55%)}
.plan.guild::before{content:""; position:absolute; inset:-2px; pointer-events:none; background:linear-gradient(105deg, transparent 40%, #ffe7a855 50%, transparent 60%); background-size:250% 100%; animation:sheen 4.5s steps(30) infinite}
@keyframes sheen{from{background-position:150% 0} 40%, to{background-position:-100% 0}}
.plan .crest{display:flex; justify-content:space-between; align-items:flex-start}
.plan .crest .sprite{width:56px; height:56px}
.plan.guild .crest .sprite{animation:bob 1.2s steps(2) infinite}
.plan h3{font-size:clamp(2.2rem, 3.6vw, 3.2rem)}
.plan.guild h3{color:var(--gold); text-shadow:0 3px 0 var(--gold-shade), 0 6px 0 var(--ink)}
.plan .sub{color:var(--muted); font-size:15px; margin-top:-6px}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.plan li{display:grid; grid-template-columns:18px 1fr; gap:12px; font-size:16px; line-height:1.35; opacity:1; transform:none; transition:opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--n, 0) * 70ms + 250ms)}
.js .plan.pre li{opacity:0; transform:translateX(-12px)}
.plan li svg{width:16px; height:16px; margin-top:3px; color:var(--mana)}
.plan.guild li svg{color:var(--gold)}
.plan li small{display:block; font-size:13px; color:var(--dim)}
.plan .btn{justify-self:start; margin-top:6px}
.tag-guild{font-family:var(--f-label); font-size:9px; letter-spacing:.12em; color:var(--gold); border:1px solid var(--gold-shade); padding:3px 6px; background:#3a3214}
@media (max-width:760px){.plans{grid-template-columns:1fr}}

/* more from us */
.more{display:grid; gap:16px; justify-items:center; margin-top:56px; width:100%}
.apps{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:100%}
.app{display:flex; align-items:center; gap:14px; text-align:left; text-decoration:none; padding:12px 14px 12px 12px; min-width:0; max-width:100%;
  background:var(--panel); border:2px solid var(--ink); box-shadow:inset 0 0 0 2px var(--edge), 5px 5px 0 var(--ink); transition:transform .15s steps(2), box-shadow .15s steps(2)}
.app:hover{transform:translate(-2px, -3px); box-shadow:inset 0 0 0 2px var(--gold-shade), 7px 8px 0 var(--ink)}
.app img{width:52px; height:52px; border-radius:12px; flex:none; transition:transform .5s var(--ease-out)}
.app:hover img{transform:rotate(-6deg) scale(1.06)}
.app b{display:block; font-family:var(--f-display); font-size:22px; line-height:1}
.app span span{font-size:13px; color:var(--dim)}
.app .get{margin-left:14px; font-style:normal; font-family:var(--f-label); font-size:11px; letter-spacing:.1em; color:var(--on-gold); background:var(--gold); border:2px solid var(--ink); padding:6px 10px; box-shadow:inset -2px -2px 0 var(--gold-shade)}

/* cta */
.cta{padding-block:clamp(110px, 18vh, 200px) 90px; text-align:center; display:grid; justify-items:center; gap:24px; perspective:900px}
.coin3d{width:min(220px, 50vw); aspect-ratio:1; position:relative; transform-style:preserve-3d; animation:spin 7s linear infinite; margin-bottom:12px}
.coin3d .sprite{position:absolute; inset:0; width:100%; height:100%; transform:translateZ(calc(var(--z) * 1px)); }
.coin3d .sprite.core{filter:brightness(.55) sepia(.4)}
@keyframes spin{to{transform:rotateY(360deg)}}
.cta-glow{position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(#ffd16640, transparent 65%); filter:blur(20px); z-index:-1}
.cta h2{font-size:clamp(2.6rem, 7vw, 5.6rem)}
.cta p{color:var(--muted); max-width:40ch; font-size:clamp(1rem, 1.5vw, 1.2rem)}
.cta .fine{font-size:13px; color:var(--dim)}
footer{border-top:1px solid var(--edge); padding-block:32px calc(32px + env(safe-area-inset-bottom, 0px)); font-size:13px; color:var(--dim)}
footer .wrap{display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between}
footer code{font-family:var(--f-mono); color:var(--muted); user-select:all}

/* responsive */
@media (max-width:860px){
  .split{grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:14px; height:100%; padding-block:64px 16px; justify-items:center; align-items:start}
  .caps{min-height:12.5rem; width:100%}
  .caps .steps{display:none}
  .cap{gap:8px}
  .cap h2{font-size:clamp(1.8rem, 8vw, 2.6rem)}
  .cap p{font-size:.95rem}
  .cap .rule{display:none}
  .phone{height:min(560px, 100%); border-radius:40px; padding:8px}
  .screen{border-radius:33px}
  .phone::after{top:16px; height:20px}
  .xp-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .tile.w2{grid-column:auto}
  .tile{min-height:0}
}
@media (max-width:860px) and (max-height:760px){ .caps{min-height:7.5rem} .cap p{display:none} }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .track{animation:none} .coin3d{animation:none; transform:rotateY(-20deg)}
}

/* ---------- faq ---------- */
.faq{padding-block:clamp(60px, 10vh, 120px) clamp(30px, 6vh, 60px)}
.faq .head{display:grid; gap:14px; justify-items:center; text-align:center; margin-bottom:36px}
.faq h2{font-size:clamp(2.2rem, 5vw, 4.2rem)}
.faq-list{display:grid; gap:12px; max-width:780px; margin:0 auto}
.faq details{background:var(--panel); border:2px solid var(--ink); box-shadow:inset 0 0 0 2px var(--edge), 5px 5px 0 var(--ink)}
.faq summary{cursor:pointer; list-style:none; padding:16px 20px; font-family:var(--f-display); font-size:1.25rem; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-label); color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 20px 18px; color:var(--muted); max-width:62ch}
footer .foot-links{display:flex; gap:20px; flex-wrap:wrap}
footer .foot-links a{color:var(--muted)}

/* ---------- coming soon (replaces the App Store badge until Apple approves the app) ---------- */
.soon-badge{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-label); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); background:var(--panel); border:2px solid var(--ink); box-shadow:inset 0 0 0 2px var(--edge-strong), 4px 4px 0 var(--ink); padding:0 22px; min-height:54px}
.soon-badge .sprite{width:20px; height:20px; flex:none}
.soon-badge.soon-lg{font-size:15px; min-height:64px; padding:0 28px}