/* Lootera, looterarpg.com. Palette taken from the wordmark and app icon:
   near-black / navy grounds, weathered gold, a cold gem cyan, warm torchlight. */

@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap;
  src:url(cormorant-600.woff2) format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:italic; font-weight:600; font-display:swap;
  src:url(cormorant-600i.woff2) format("woff2");
}
@font-face{
  font-family:"Cinzel"; font-style:normal; font-weight:600; font-display:swap;
  src:url(cinzel-600.woff2) format("woff2");
}

:root{
  --bg0:#06090f;
  --bg1:#0b1424;
  --bg2:#101d33;
  --ink:#eef1f6;
  --body:#c9d1de;
  --muted:#8e99ab;
  --gold:#d9a83a;
  --gold-2:#f3cf6b;
  --gold-deep:#8a6318;
  --gem:#4cc9ff;
  --gem-2:#a7e7ff;
  --torch:#ff9a3c;
  --line:rgba(217,168,58,.22);
  --line-soft:rgba(238,241,246,.09);
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --caps:"Cinzel",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1160px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--bg0); color:var(--body);
  font:17px/1.65 var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block}
p{margin:0 0 1em}
a{color:var(--gold-2)}
a:hover{color:#fff}
h1,h2,h3{color:var(--ink); margin:0}
strong{color:var(--ink)}
[hidden]{display:none!important}

.wrap{width:min(var(--wrap),100% - 32px); margin-inline:auto}
@media (min-width:720px){ .wrap{width:min(var(--wrap),100% - 64px)} }

.skip{
  position:absolute; left:16px; top:-60px; z-index:100; padding:10px 14px;
  background:var(--gold); color:#1a1204; border-radius:8px; font-weight:700; text-decoration:none;
}
.skip:focus{top:16px}

/* ---------- Type ---------- */
.eyebrow{
  font:600 .78rem/1.2 var(--caps); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px;
}
.h2{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  font:600 clamp(2rem,4.4vw,3.3rem)/1.05 var(--display);
  letter-spacing:-.005em; margin:0 0 clamp(28px,4vw,48px);
}
.h2-num{
  font:600 .8rem/1 var(--caps); letter-spacing:.24em; color:var(--gold);
  position:relative; top:-.35em; padding-right:16px;
}
.h2-num::after{
  content:""; position:absolute; right:0; top:50%; width:1px; height:1.3em; margin-top:-.65em;
  background:var(--line);
}
h3{font:600 clamp(1.55rem,2.6vw,2.05rem)/1.15 var(--display); margin:0 0 14px}
.lede{font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.6; color:var(--ink)}
.note{font-size:.95rem; color:var(--muted); max-width:72ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 24px;
  border-radius:999px; text-decoration:none; white-space:nowrap;
  font:600 .78rem/1 var(--caps); letter-spacing:.12em; text-transform:uppercase;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, border-color .35s, color .35s;
}
.btn svg{width:16px; height:16px; fill:currentColor}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-2),#c9962e); color:#1a1204;
  box-shadow:0 12px 34px -12px rgba(217,168,58,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{color:#1a1204; transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(217,168,58,.85), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{
  color:var(--ink); border:1px solid rgba(238,241,246,.32);
  background:rgba(7,11,20,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{color:#fff; border-color:var(--gold); transform:translateY(-2px)}
.btn-small{padding:10px 16px; font-size:.66rem; border:1px solid rgba(217,168,58,.5); color:var(--gold-2); background:rgba(7,11,20,.4)}
.btn-small:hover{background:rgba(217,168,58,.14); color:#fff}

/* ---------- Header ---------- */
.top{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;
  background:linear-gradient(180deg,rgba(6,9,15,.65),rgba(6,9,15,0));
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.top.scrolled{
  background:rgba(6,9,15,.82); border-bottom-color:var(--line-soft);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.top-logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto}
.top-logo img{width:36px; height:36px; border-radius:8px; box-shadow:0 0 0 1px rgba(76,201,255,.25), 0 0 18px rgba(76,201,255,.25)}
.top-logo span{font:600 .95rem/1 var(--caps); letter-spacing:.2em; color:var(--gold-2)}
.top-nav{display:none; gap:26px}
.top-nav a{font:600 .7rem/1 var(--caps); letter-spacing:.16em; text-transform:uppercase; color:var(--body); text-decoration:none; position:relative; padding:6px 0}
.top-nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .35s var(--ease)}
.top-nav a:hover{color:#fff}
.top-nav a:hover::after{right:0}
@media (min-width:860px){ .top-nav{display:flex} .top{padding-inline:36px} }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:calc(96px + env(safe-area-inset-top,0px)) 16px 96px; overflow:hidden; isolation:isolate;
  background:var(--bg0);
}
.hero-media{
  position:absolute; inset:0; z-index:-2;
  background:url(hero.jpg) center/cover no-repeat;
}
.hero-video{width:100%; height:100%; object-fit:cover; transform:scale(1.03)}
.hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(6,9,15,.15), rgba(6,9,15,.55) 70%),
    linear-gradient(180deg, rgba(6,9,15,.62) 0%, rgba(6,9,15,.28) 35%, rgba(6,9,15,.55) 70%, var(--bg0) 100%);
}
.hero-inner{text-align:center; max-width:920px; width:100%}
.hero-logo{
  width:clamp(220px,46vw,470px); height:auto; margin:0 auto 26px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(76,201,255,.18));
}
.anchor{
  font:600 clamp(1.85rem,6.2vw,4.9rem)/1.04 var(--display); margin:0 0 18px; letter-spacing:-.01em;
  text-shadow:0 6px 30px rgba(0,0,0,.7);
}
.anchor-a{display:block; color:rgba(238,241,246,.8)}
.anchor-b{
  display:block; font-style:italic; color:var(--gold-2);
  background:linear-gradient(90deg,#f7dc8a,#d9a83a 55%,#f3cf6b);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  padding-bottom:.08em;
}
.sub{font-size:clamp(1.02rem,1.5vw,1.25rem); color:var(--body); margin:0 0 30px; text-shadow:0 2px 14px rgba(0,0,0,.8)}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:26px}
@media (max-width:419px){ /* long labels wrap inside the pill instead of pushing past the viewport */
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{white-space:normal; justify-content:center; text-align:center; line-height:1.35; padding:13px 20px}
}
.hero-status{
  display:inline-block; font-size:.82rem; letter-spacing:.04em; color:var(--muted); margin:0;
  padding:8px 14px; border:1px solid var(--line-soft); border-radius:999px; background:rgba(6,9,15,.45);
}
.scroll-cue{
  position:absolute; left:50%; bottom:22px; width:24px; height:44px; margin-left:-12px;
  border:1px solid rgba(238,241,246,.35); border-radius:14px; z-index:1;
}
.scroll-cue span{
  position:absolute; left:50%; top:8px; width:3px; height:8px; margin-left:-1.5px; border-radius:2px;
  background:var(--gold-2); animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(0); opacity:1} 70%{transform:translateY(18px); opacity:0} 100%{opacity:0} }

/* ---------- Reveal (JS adds .in; without JS everything is simply visible) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0; translate:0 24px; transition:opacity .9s var(--ease), translate .9s var(--ease)}
  .js .rv.in{opacity:1; translate:0 0}
  .js .hero-inner > *{animation:rise 1.1s var(--ease) both}
  .js .hero-inner > :nth-child(2){animation-delay:.12s}
  .js .hero-inner > :nth-child(3){animation-delay:.22s}
  .js .hero-inner > :nth-child(4){animation-delay:.34s}
  .js .hero-inner > :nth-child(5){animation-delay:.46s}
  .js .hero-inner > :nth-child(6){animation-delay:.58s}
  @keyframes rise{from{opacity:0; translate:0 18px} to{opacity:1; translate:0 0}}
}
[data-parallax]{will-change:transform}

/* ---------- Phone frame ---------- */
.phone{
  position:relative; width:min(250px,64vw); aspect-ratio:9/18.4; margin:0 0 42px;
  padding:9px; border-radius:34px; background:#0a1020;
  border:1px solid rgba(217,168,58,.42);
  box-shadow:
    0 40px 70px -28px rgba(0,0,0,.85),
    0 0 0 1px rgba(76,201,255,.08),
    inset 0 0 0 5px #070b14,
    inset 0 0 0 6px rgba(217,168,58,.12);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.phone:hover{box-shadow:0 50px 80px -28px rgba(0,0,0,.9), 0 0 40px -10px rgba(217,168,58,.35), inset 0 0 0 5px #070b14, inset 0 0 0 6px rgba(217,168,58,.2)}
.phone-screen{position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden; background:#000}
.phone-screen::before{
  content:""; position:absolute; top:10px; left:50%; width:74px; height:18px; margin-left:-37px;
  background:#070b14; border-radius:999px; z-index:2;
}
.phone-screen img{width:100%; height:100%; object-fit:cover}
.phone figcaption{
  position:absolute; top:100%; left:0; right:0; margin-top:14px; text-align:center;
  font:600 .66rem/1.3 var(--caps); letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ---------- Walk it ---------- */
.walk{padding:clamp(72px,10vw,130px) 0 clamp(60px,8vw,100px); background:linear-gradient(180deg,var(--bg0),var(--bg1))}
.walk-grid{display:grid; gap:56px; align-items:center}
.walk-text{max-width:56ch}
.walk-phones{position:relative; display:flex; justify-content:center; align-items:flex-start; gap:0; min-height:520px; padding-top:10px}
.phone-back{width:min(230px,56vw); margin-right:-70px; margin-top:40px; opacity:.92}
.phone-back figcaption{text-align:left; padding-left:12px}
.phone-front{width:min(250px,60vw); z-index:1}
@media (min-width:900px){
  .walk-grid{grid-template-columns:1.05fr 1fr; gap:40px}
  .walk-phones{min-height:600px}
  .phone-back{margin-right:-60px}
}

/* ---------- Full-bleed band ---------- */
.band{position:relative; height:clamp(260px,44vw,560px); overflow:hidden; isolation:isolate; background:var(--bg1)}
.band-img{position:absolute; left:0; right:0; top:-18%; height:136%; background-position:center; background-size:cover; z-index:-1}
.band-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,var(--bg1) 0%, rgba(11,20,36,0) 28%, rgba(6,9,15,0) 62%, var(--bg0) 100%);
}

/* ---------- What you actually do ---------- */
.do{padding:clamp(72px,10vw,130px) 0 clamp(40px,6vw,80px); background:var(--bg0)}
.chapter{display:grid; gap:36px; align-items:center; padding:clamp(40px,6vw,80px) 0; border-top:1px solid var(--line-soft)}
.chapter:first-of-type{border-top:0; padding-top:0}
.chapter-text{max-width:56ch}
.chapter-text p{font-size:1.05rem}
.phone-solo{justify-self:center}
@media (min-width:860px){
  .chapter{grid-template-columns:1.1fr .9fr; gap:56px}
  .chapter-forge .chapter-text{order:1}
  .chapter-forge .phone-solo{order:0}
  .chapter-bank .chapter-text{order:1}
  .chapter-bank .ledger{order:0}
}

/* Dungeon gates */
.chapter-dungeons{grid-template-areas:"text" "phone" "gates"}
.chapter-dungeons .chapter-text{grid-area:text}
.chapter-dungeons .phone-solo{grid-area:phone}
.gates{grid-area:gates; list-style:none; padding:0; margin:10px 0 0; display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){
  .chapter-dungeons{grid-template-areas:"text phone" "gates gates"}
  .gates{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1100px){ .gates{grid-template-columns:repeat(6,1fr)} }
.gate{ /* one real frame per dungeon, cut from the dungeon tour clip */
  position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; isolation:isolate;
  border:1px solid rgba(217,168,58,.2); background:var(--bg1);
  display:flex; align-items:flex-end; padding:14px;
  transition:transform .6s var(--ease), border-color .6s, box-shadow .6s;
}
.gate:hover{transform:translateY(-6px); border-color:rgba(217,168,58,.55); box-shadow:0 26px 40px -20px rgba(0,0,0,.9), 0 0 30px -12px rgba(217,168,58,.4)}
.gate img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 40%; transition:transform 1.2s var(--ease)}
.gate:hover img{transform:scale(1.06)}
.gate::after{content:""; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:-1; background:linear-gradient(180deg,rgba(6,9,15,0),rgba(6,9,15,.86))}
.gate-label{
  font:600 .68rem/1.4 var(--caps); letter-spacing:.1em; text-transform:uppercase; color:#f5e9c8;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}

/* Mine window */
.window{position:relative; margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 70px -30px rgba(0,0,0,.9)}
.window img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform 1.2s var(--ease)}
.window:hover img{transform:scale(1.04)}
.window::before{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 80px rgba(6,9,15,.7); border-radius:18px}
.window figcaption{
  position:absolute; left:16px; bottom:14px; padding:8px 12px; border-radius:8px;
  background:rgba(6,9,15,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font:600 .64rem/1.3 var(--caps); letter-spacing:.14em; text-transform:uppercase; color:#f5e9c8;
}

/* Forge meter */
.forge-meter{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:22px}
.pip{
  width:44px; height:44px; display:grid; place-items:center; border-radius:10px;
  font:600 .78rem/1 var(--caps); color:var(--gold-2);
  border:1px solid rgba(217,168,58,.4); background:linear-gradient(180deg,rgba(217,168,58,.16),rgba(217,168,58,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.pip:nth-child(2){opacity:.9} .pip:nth-child(3){opacity:.8} .pip:nth-child(4){opacity:.7}
.pip-last{
  opacity:1; color:#1a1204; border-color:var(--gold-2);
  background:linear-gradient(180deg,var(--gold-2),#c9962e);
  box-shadow:0 0 22px rgba(217,168,58,.55);
}
@media (prefers-reduced-motion:no-preference){
  .pip-last{animation:pipglow 2.6s ease-in-out infinite alternate}
  @keyframes pipglow{from{box-shadow:0 0 12px rgba(217,168,58,.35)} to{box-shadow:0 0 30px rgba(255,154,60,.75)}}
}
.forge-warn{flex-basis:100%; font-size:.86rem; color:var(--torch); letter-spacing:.02em; margin-top:4px}

/* Trade pair */
.phones-pair{display:flex; justify-content:center; align-items:flex-start; gap:22px; flex-wrap:wrap}
.phones-pair .phone{width:min(220px,42vw)}
.phones-pair .phone:last-child{margin-top:40px}
@media (max-width:519px){ .phones-pair .phone:last-child{margin-top:0} }

/* Ledger: 144 bank slots */
.ledger{display:grid; gap:22px; align-items:center; grid-template-columns:minmax(0,220px) 1fr; max-width:520px}
.slots{display:grid; gap:10px}
.slots-grid{
  display:block; width:100%; aspect-ratio:1; border-radius:8px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 calc(100% / 12 - 3px), var(--bg0) calc(100% / 12 - 3px) calc(100% / 12)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 calc(100% / 12 - 3px), var(--bg0) calc(100% / 12 - 3px) calc(100% / 12)),
    linear-gradient(135deg, rgba(243,207,107,.75), rgba(138,99,24,.6));
  box-shadow:0 0 30px -8px rgba(217,168,58,.35);
}
.slots-cap{font-size:.9rem; color:var(--muted); text-align:center}
.slots-cap strong{font:600 1.6rem/1 var(--display); color:var(--gold-2); margin-right:6px}
.ledger-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ledger-list li{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line-soft); background:rgba(16,29,51,.5); color:var(--ink); font-size:.95rem;
}
.ledger-list svg{width:20px; height:20px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none}
@media (max-width:459px){ .ledger{grid-template-columns:1fr} }

/* ---------- The road ---------- */
.road{padding:clamp(72px,10vw,130px) 0; background:linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 50%,var(--bg0) 100%); position:relative}
.road::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(ellipse 50% 40% at 80% 30%, rgba(76,201,255,.08), rgba(76,201,255,0) 70%);
}
.road-grid{display:grid; gap:40px; margin-bottom:34px; position:relative}
@media (min-width:900px){ .road-grid{grid-template-columns:1.4fr 1fr; gap:56px; align-items:start} }
.miles{list-style:none; margin:0; padding:0}
.mile{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"lv t" "bar bar";
  gap:10px 16px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
}
.mile-lv{grid-area:lv; font:600 1.35rem/1.2 var(--display); color:var(--ink)}
.mile-t{grid-area:t; font-size:.92rem; color:var(--body); white-space:nowrap; text-align:right}
.mile-bar{grid-area:bar; position:relative; height:10px; border-radius:5px; background:rgba(238,241,246,.06); overflow:visible}
.mile-bar > span{
  position:absolute; left:0; top:0; height:100%; width:var(--w); min-width:6px; border-radius:5px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));
  box-shadow:0 0 14px -2px rgba(217,168,58,.45);
  transition:width 1.4s var(--ease);
}
.mile-bar > span.range::after{ /* the 28 to 33 hour spread, drawn as the lighter tail */
  content:""; position:absolute; left:100%; top:0; height:100%; width:17.6%; border-radius:0 5px 5px 0;
  background:repeating-linear-gradient(90deg, rgba(243,207,107,.55) 0 4px, rgba(243,207,107,.12) 4px 8px);
}
.mile-cap .mile-lv{color:var(--gold-2)}
@media (prefers-reduced-motion:no-preference){ .js .miles:not(.in) .mile-bar > span{width:0} }
@media (min-width:600px){
  .mile{grid-template-columns:10.5rem 1fr auto; grid-template-areas:"lv bar t"; gap:16px}
}
.facts{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
.fact{
  padding:20px 22px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,29,51,.75),rgba(11,20,36,.75));
  display:grid; gap:4px; align-content:start;
}
.fact-n{font:600 3rem/1 var(--display); color:var(--gold-2)}
.fact-l{font-size:.92rem; color:var(--body)}
.fact-tiers{grid-column:1 / -1}
.tiers{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.tier{
  padding:7px 12px; border-radius:999px; font:600 .66rem/1 var(--caps); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(238,241,246,.16); color:var(--ink);
}
.tier.t1{background:rgba(120,82,44,.35); border-color:rgba(160,110,60,.5)}
.tier.t2{background:rgba(140,148,160,.22); border-color:rgba(170,178,190,.45)}
.tier.t3{background:rgba(76,201,255,.14); border-color:rgba(76,201,255,.5); color:var(--gem-2)}
.tier.t4{background:rgba(150,110,255,.16); border-color:rgba(170,140,255,.55); color:#d8ccff}

/* ---------- Three honest cards ---------- */
.honest{padding:clamp(20px,4vw,40px) 0 clamp(72px,10vw,130px); background:var(--bg0)}
.cards3{display:grid; gap:16px}
@media (min-width:800px){ .cards3{grid-template-columns:repeat(3,1fr)} }
.card{
  position:relative; padding:28px 26px 22px; border-radius:16px; border:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(16,29,51,.6),rgba(11,20,36,.4));
  transition:border-color .5s, transform .5s var(--ease);
}
.card:hover{border-color:var(--line); transform:translateY(-4px)}
.card h2{font:600 1.55rem/1.2 var(--display); margin:0 0 10px}
.card p{margin:0; font-size:.98rem}
.card-ico{width:30px; height:30px; margin-bottom:16px; fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.card-ico .thin{stroke-width:1}

/* ---------- Comparison ---------- */
.compare{padding:clamp(72px,10vw,130px) 0; background:linear-gradient(180deg,var(--bg1),var(--bg0))}
/* Giris ve alt not ayni olcude: tablo tam genislikte oldugu icin dar metin
   yarim kalmis gibi duruyordu. 86ch hala rahat okunur ust sinir. */
.compare .lede{max-width:86ch; margin-bottom:30px}
.compare .note{max-width:86ch}
.tablewrap{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:14px; background:rgba(11,20,36,.6); -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:600px; font-size:.95rem}
th,td{text-align:left; padding:16px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{font:600 .68rem/1.3 var(--caps); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); background:rgba(6,9,15,.5)}
tbody tr:last-child td{border-bottom:0}
tr.us td{background:rgba(217,168,58,.09); color:var(--ink)}
tr.us td:first-child{box-shadow:inset 3px 0 0 var(--gold)}

/* ---------- FAQ ---------- */
.faq{padding:clamp(72px,10vw,130px) 0; background:var(--bg0)}
.faq-grid{display:grid; gap:18px}
@media (min-width:800px){ .faq-grid{grid-template-columns:1fr 1fr; gap:22px} }
.qa{padding:22px 24px; border-radius:14px; border:1px solid var(--line-soft); background:rgba(16,29,51,.35); transition:border-color .5s}
.qa:hover{border-color:var(--line)}
.qa h3{font-size:1.32rem; margin-bottom:8px}
.qa p{margin:0; font-size:.97rem}

/* ---------- Where / links ---------- */
.where{padding:clamp(72px,10vw,130px) 0; background:linear-gradient(180deg,var(--bg0),var(--bg1)); border-top:1px solid var(--line-soft)}
.where-grid{display:grid; gap:40px}
@media (min-width:800px){ .where-grid{grid-template-columns:1fr 1fr; gap:64px} }
.where h2{font:600 1.9rem/1.15 var(--display); margin:0 0 14px}
.links{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.links a{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px;
  border:1px solid var(--line-soft); border-radius:12px; text-decoration:none; color:var(--ink);
  background:rgba(16,29,51,.35); transition:border-color .4s, background .4s, transform .4s var(--ease);
}
.links a:hover{border-color:var(--gold); background:rgba(217,168,58,.08); transform:translateX(4px); color:#fff}
.links svg{width:18px; height:18px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Footer ---------- */
.foot{padding:36px 0 calc(40px + env(safe-area-inset-bottom,0px)); background:var(--bg1); border-top:1px solid var(--line-soft)}
.foot-inner{display:flex; align-items:center; gap:14px; color:var(--muted); font-size:.9rem}
.foot-inner img{border-radius:8px; opacity:.9}
.foot-inner p{margin:0}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-video{display:none}
  .scroll-cue span{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
}