/* Forge Games — site styles */
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jost-latin-500-normal.woff2) format("woff2")}
:root{
  --bg:#070608; --bg2:#0d0b0c; --iron:#16130f; --iron2:#221d18; --edge:#3a2f26;
  --text:#f1ebe4; --muted:#9a8f86; --dim:#6b625b;
  --ember:#ff7a1a; --molten:#ffb24a; --hot:#ff4d0a; --glow:rgba(255,122,26,.55);
  --font:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:var(--molten);text-decoration:none}
a:hover{color:#fff}
::selection{background:var(--ember);color:#000}
:focus-visible{outline:2px solid var(--molten);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,4vw,56px);transition:background .3s,backdrop-filter .3s,padding .3s}
.site-head.solid{background:rgba(8,7,8,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 rgba(255,140,60,.08)}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);font-weight:400;letter-spacing:.42em;font-size:14px;text-transform:uppercase}
.brand:hover{color:#fff}
.brand svg{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 10px rgba(255,140,50,.35))}
.nav{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(14,12,12,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav a{color:var(--text);font-size:15px;padding:8px 20px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover,.nav a[aria-current=page]{background:rgba(255,122,26,.16);color:#fff}

/* ---------- hero scene ---------- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:-3;background:#070608 url(/img/forge-poster.jpg) 50% 55%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(ellipse 60% 45% at 50% 42%,rgba(0,0,0,.45),rgba(0,0,0,0) 70%),
   linear-gradient(180deg,rgba(7,6,8,.55) 0%,rgba(7,6,8,0) 18%,rgba(7,6,8,0) 78%,var(--bg) 100%),
   radial-gradient(ellipse 120% 90% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.hero-inner{position:relative;height:100%;display:grid;place-items:center;text-align:center;padding:0 16px}
.hero-stack{transform:translateY(-1vh)}
.title{margin:0;font-weight:300;font-size:clamp(46px,8.6vw,128px);letter-spacing:.14em;line-height:1;padding-left:.14em;
  background:linear-gradient(180deg,#ffffff 0%,#e9e3de 45%,#9d948d 78%,#6f6760 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.6))}
.tagline{margin:22px 0 0;font-weight:400;font-size:clamp(14px,1.55vw,22px);letter-spacing:.42em;padding-left:.42em;color:#e7dfd8;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.side-words{position:absolute;top:50%;transform:translateY(-10%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;letter-spacing:.3em;color:rgba(230,220,210,.55);text-transform:uppercase}
.side-words::after{content:"";width:16px;height:1px;background:rgba(230,220,210,.4);margin-top:10px}
.side-words.l{left:clamp(170px,18vw,300px)}.side-words.r{right:clamp(170px,18vw,300px)}
.discover{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#e8e0d9;font-size:13px;letter-spacing:.3em;padding-left:.3em}
.discover span{width:1px;height:34px;background:linear-gradient(#e8e0d9,rgba(232,224,217,0));position:relative;animation:drip 2.2s ease-in-out infinite}
.discover svg{width:14px;height:14px;margin-top:-8px}
@keyframes drip{0%,100%{transform:scaleY(.6);transform-origin:top}50%{transform:scaleY(1)}}
.floor-tag{position:absolute;right:clamp(16px,3vw,44px);bottom:26px;font-size:11px;letter-spacing:.28em;color:rgba(230,220,210,.5)}

/* ---------- forged iron plate ---------- */
.plate-card{--heat:0;position:relative;display:flex;align-items:center;gap:26px;margin:clamp(34px,8vh,78px) auto 0;padding:18px 20px 18px 18px;max-width:720px;text-align:left;
  border-radius:14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 140% at 50% 120%,rgba(255,110,30,calc(.16 + var(--heat)*.2)),rgba(255,110,30,0) 60%),
    linear-gradient(180deg,#26211c 0%,#15120f 55%,#0f0c0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,235,210,.14),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(90,72,58,.55),
    0 0 0 1px rgba(0,0,0,.7),
    0 18px 50px rgba(0,0,0,.65),
    0 0 calc(30px + var(--heat)*40px) rgba(255,110,30,calc(.18 + var(--heat)*.3));
  transition:box-shadow .35s, transform .35s}
.plate-card::before{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,90,10,0),var(--hot) 20%,var(--molten) 50%,var(--hot) 80%,rgba(255,90,10,0));
  box-shadow:0 0 14px 2px var(--glow);opacity:calc(.7 + var(--heat)*.3)}
.plate-card .rivet{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8c7a6a,#2c241e 60%,#0d0a08);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.rivet.tl{left:8px;top:8px}.rivet.tr{right:8px;top:8px}.rivet.bl{left:8px;bottom:8px}.rivet.br{right:8px;bottom:8px}
.plate-card:hover{--heat:1;transform:translateY(-2px)}
.plate-card .art{flex:none;width:118px;height:118px;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,180,110,.35),0 8px 24px rgba(0,0,0,.6),0 0 24px rgba(255,120,40,.25)}
.plate-card .art img{width:100%;height:100%}
.plate-card .meta{flex:1;min-width:0;padding-right:4px;border-right:1px solid rgba(255,220,190,.12)}
.eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.plate-card h2{margin:0;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.1;color:#fff}
.plate-card .sub{margin:6px 0 0;color:var(--muted);font-size:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;border:1.5px solid rgba(255,240,225,.85);color:#fff;font:500 16px/1 var(--font);letter-spacing:.02em;background:rgba(10,8,8,.4);white-space:nowrap;cursor:pointer;
  box-shadow:0 0 18px rgba(255,120,40,.25),inset 0 0 12px rgba(255,120,40,.12);transition:background .2s,box-shadow .2s,transform .2s,color .2s}
.btn:hover{background:linear-gradient(180deg,var(--molten),var(--ember));color:#1a0c02;border-color:var(--molten);box-shadow:0 0 30px rgba(255,130,40,.6);transform:translateY(-1px)}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(3px)}
.btn.solid{background:linear-gradient(180deg,var(--molten),var(--ember));color:#1a0c02;border-color:transparent}
.btn.solid:hover{filter:brightness(1.08)}
.btn[aria-disabled=true]{opacity:.75;pointer-events:none}
.btn svg{width:18px;height:18px}

/* ---------- sections ---------- */
.section{position:relative;padding:clamp(72px,11vw,140px) clamp(16px,5vw,64px)}
.wrap{max-width:1160px;margin:0 auto}
.kicker{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--ember);margin:0 0 14px}
.h2{margin:0 0 18px;font-weight:300;font-size:clamp(32px,4.6vw,58px);line-height:1.08;letter-spacing:.02em}
.lede{max-width:640px;color:#cfc6be;font-size:clamp(17px,1.5vw,20px);margin:0}
.ember-line{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,rgba(255,122,26,.5),transparent)}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:48px}
.feat{padding:24px;border-radius:var(--r);background:linear-gradient(180deg,#15120f,#0e0c0b);box-shadow:inset 0 0 0 1px rgba(90,72,58,.4),inset 0 1px 0 rgba(255,235,210,.06)}
.feat b{display:block;font-weight:500;font-size:18px;color:#fff;margin-bottom:6px}
.feat p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.feat .n{font-size:12px;letter-spacing:.3em;color:var(--ember);margin-bottom:14px;display:block}

/* screenshots rail */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 22px;margin-top:44px;scrollbar-width:thin;scrollbar-color:#3a2f26 transparent}
.rail figure{margin:0;flex:0 0 clamp(200px,22vw,260px);scroll-snap-align:start;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,180,110,.18),0 20px 40px rgba(0,0,0,.5);background:#0b0f1f}
.rail img{width:100%;height:auto;aspect-ratio:560/1214;object-fit:cover}

/* split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.phone{justify-self:center;width:min(300px,78vw);aspect-ratio:432/936;border-radius:40px;padding:10px;background:linear-gradient(160deg,#2a241f,#0e0c0a);box-shadow:0 0 0 1px rgba(255,190,120,.25),0 30px 80px rgba(0,0,0,.7),0 0 70px rgba(255,110,30,.18)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:31px;background:#0b0f1f}

.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.pill-list li{padding:8px 14px;border-radius:999px;font-size:14px;color:#e9dfd6;background:rgba(255,122,26,.08);box-shadow:inset 0 0 0 1px rgba(255,122,26,.28)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.fine{color:var(--dim);font-size:13px}

/* page hero (inner pages) */
.page-hero{position:relative;padding:clamp(150px,20vh,210px) clamp(16px,5vw,64px) clamp(40px,7vw,80px);overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/img/forge-poster.webp) 50% 40%/cover no-repeat;opacity:.38;filter:saturate(1.1)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,6,8,.55),var(--bg) 92%)}
.game-head{display:flex;gap:28px;align-items:center}
.game-head .icon{width:clamp(96px,14vw,150px);height:auto;border-radius:28%;box-shadow:0 0 0 1px rgba(255,190,120,.3),0 20px 50px rgba(0,0,0,.6),0 0 50px rgba(255,120,40,.25);flex:none}
.game-head h1{margin:0;font-weight:300;font-size:clamp(36px,6vw,74px);line-height:1.02}
.game-head p{margin:10px 0 0;color:#d3c9c0;font-size:clamp(16px,1.6vw,20px)}

/* prose (legal/support) */
.prose{max-width:760px;margin:0 auto}
.prose h1{font-weight:300;font-size:clamp(36px,5vw,58px);margin:0 0 6px;line-height:1.1}
.prose h2{font-weight:500;font-size:21px;margin:44px 0 10px;color:#fff}
.prose h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--ember);box-shadow:0 0 10px var(--ember);margin:0 12px 3px 0;transform:rotate(45deg)}
.prose p,.prose li{color:#d4cbc3}
.prose ul{padding-left:22px}
.prose .muted{color:var(--muted);font-size:14px;letter-spacing:.04em}
.prose .card{padding:22px 24px;border-radius:var(--r);background:linear-gradient(180deg,#15120f,#0e0c0b);box-shadow:inset 0 0 0 1px rgba(90,72,58,.45);margin:18px 0}
details.faq{border-radius:14px;background:#110e0c;box-shadow:inset 0 0 0 1px rgba(90,72,58,.4);margin:10px 0;padding:0 20px}
details.faq summary{cursor:pointer;padding:16px 0;font-weight:500;color:#fff;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.faq summary::after{content:"+";color:var(--ember);font-size:22px;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:0 0 18px}

/* footer */
.site-foot{padding:56px clamp(16px,5vw,64px) 40px;border-top:1px solid rgba(255,140,60,.1);background:linear-gradient(180deg,var(--bg),#050405)}
.foot-grid{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-links a{color:#cfc6be;font-size:15px}
.foot-links a:hover{color:var(--molten)}
.copy{max-width:1160px;margin:34px auto 0;color:var(--dim);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){.side-words{display:none}}
@media (max-width:760px){
  body{font-size:16px}
  .brand{letter-spacing:.3em;font-size:12px;gap:10px}.brand svg{width:32px;height:32px}
  .nav a{padding:7px 14px;font-size:14px}
  .site-head{padding:16px}
  .title{letter-spacing:.1em;padding-left:.1em}
  .tagline{letter-spacing:.28em;padding-left:.28em}
  .plate-card{flex-wrap:wrap;gap:16px;padding:16px;max-width:360px}
  .plate-card .art{width:84px;height:84px;border-radius:19px}
  .plate-card .meta{border-right:0;padding:0}
  .plate-card .btn{width:100%;justify-content:center}
  .floor-tag{display:none}
  .split{grid-template-columns:1fr}
  .game-head{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:380px){.brand span{display:none}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}