@font-face{font-family:"Rokkitt";src:url(/fonts/display.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --bg:#0b1420;--surface:#101b2a;--surface2:#152c44;--ink:#fff0d4;--muted:#cdbfa6;--faint:#9a8f7c;
  --line:#24384f;--accent:#d6a34a;--accent-ink:#1a1006;--felt:#13a65d;--wood:#442817;
  --display:"Rokkitt",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:17px/1.6 var(--sans);
  background:radial-gradient(1200px 600px at 80% -10%,color-mix(in srgb,var(--felt) 45%,transparent),transparent 70%),
             radial-gradient(900px 500px at -10% 30%,color-mix(in srgb,var(--wood) 40%,transparent),transparent 70%),var(--bg);
  background-attachment:fixed;min-height:100vh}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
.brand{display:flex;align-items:center;gap:10px;font:600 21px/1 var(--display);color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px}
nav{display:flex;gap:18px}
nav a{color:var(--muted);text-decoration:none;font-size:15px}
nav a:hover,nav a[aria-current]{color:var(--ink)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:40px 0 56px}
.hero .logo{width:min(220px,48vw);height:auto;display:block;margin:0 0 18px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}
.hero h1{font:600 clamp(40px,6.4vw,66px)/1.02 var(--display);letter-spacing:-.01em;margin:0 0 18px}
.hero h1 em{color:var(--accent);font-style:italic}
.hero p{font-size:19px;color:var(--muted);margin:0;max-width:32em}
.stores{margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:99px;font-size:15px;color:var(--ink);background:color-mix(in srgb,var(--surface) 80%,transparent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.hero .platforms{font-size:14px;color:var(--faint);margin-top:14px}
.shots{position:relative;height:560px}
.shots img{position:absolute;top:0;width:250px;height:auto;border-radius:28px;border:6px solid #07090c;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.shots img:nth-child(1){left:50%;transform:translateX(-50%);z-index:3}
.shots img:nth-child(2){left:2%;top:46px;transform:rotate(-6deg) scale(.9);z-index:2;opacity:.92}
.shots img:nth-child(3){right:2%;top:46px;transform:rotate(6deg) scale(.9);z-index:1;opacity:.92}
.art{display:grid;place-items:center}
.art img{width:min(420px,80vw);height:auto;border-radius:22%;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:8px 0 48px}
.card{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{font:600 22px/1.2 var(--display);margin:0 0 6px;color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.wide{margin:0 0 56px}
.wide img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.45);display:block}
.band{background:linear-gradient(135deg,color-mix(in srgb,var(--wood) 70%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:18px;padding:28px;margin:0 0 20px}
.band h2,.promise h2{font:600 30px/1.2 var(--display);margin:0 0 10px}
.band p,.promise p{margin:0 0 10px;color:var(--muted);max-width:44em}
.band .small{font-size:14.5px;color:var(--faint);margin:0}
.prices{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:16px 0 18px}
.prices li{background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid var(--line);border-radius:14px;padding:14px 20px;min-width:130px}
.prices strong{display:block;font:600 28px/1.1 var(--display);color:var(--accent)}
.prices span{color:var(--muted);font-size:14.5px}
.promise{border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:18px;padding:24px 28px;margin:0 0 56px}
article{max-width:760px;padding:30px 0 56px}
article h1{font:600 clamp(38px,7vw,54px)/1.05 var(--display);margin:0 0 6px}
article .meta{color:var(--faint);font-size:15px;margin:0 0 30px}
article h2{font:600 27px/1.2 var(--display);margin:38px 0 10px;color:var(--ink)}
article p,article li{color:var(--muted)}
article li{margin:0 0 8px}
article strong{color:var(--ink)}
article .lede{font-size:19px;color:var(--ink)}
.summary{background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);border-radius:16px;padding:6px 24px 10px;margin:26px 0}
.summary h2{margin-top:18px}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--faint);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer a{color:var(--faint)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:24px}
  .shots{height:520px}
  .shots img{width:210px}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .shots{height:470px}
  .shots img{width:190px}
  .shots img:nth-child(2){left:-4%} .shots img:nth-child(3){right:-4%}
  nav{gap:14px}
  .band,.promise{padding:22px}
}