@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Rye&display=swap');
:root { --ink:#0b0d0a; --paper:#f1eedf; --goblin:#5de31e; --goblin-dark:#2ca708; --acid:#d8ff43; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:"DM Sans",Arial,sans-serif; }
a { color:inherit; }
button,input,textarea { font:inherit; }
.hero { min-height:100svh; position:relative; overflow:hidden; padding:0 clamp(24px,6vw,96px) 60px; background:radial-gradient(circle at 78% 44%,rgba(86,227,30,.20),transparent 23%),linear-gradient(125deg,#151912 0%,#090b08 54%,#111b0c 100%); }
.hero::after { content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.hero-glow { position:absolute; width:540px; height:540px; right:7%; top:20%; border:1px solid rgba(128,255,73,.13); border-radius:50%; box-shadow:0 0 110px rgba(74,255,0,.07),inset 0 0 100px rgba(74,255,0,.04); }
.site-nav { height:112px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; border-bottom:1px solid rgba(241,238,223,.15); }
.brand-mark img { width:152px; height:auto; display:block; }
.nav-links { display:flex; gap:36px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.nav-links a,.footer-links a { text-decoration:none; transition:color .2s; }
.nav-links a:hover,.footer-links a:hover { color:var(--goblin); }
.hero-content { max-width:720px; position:relative; z-index:2; padding-top:clamp(92px,14vh,150px); }
.eyebrow,.chapter { margin:0 0 24px; color:var(--goblin); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:12px; }
.eyebrow span { width:28px; height:2px; background:var(--goblin); }
h1,h2 { margin:0; font-family:"Rye",Georgia,serif; font-weight:400; line-height:.98; letter-spacing:-.025em; }
h1 { font-size:clamp(54px,7.3vw,108px); }
h2 { color:var(--ink); font-size:clamp(42px,5.4vw,78px); }
h1 em,h2 em { color:var(--goblin); font-style:normal; }
.hero-copy { max-width:580px; margin:30px 0 0; color:#c5c7bc; font-size:clamp(17px,1.5vw,20px); line-height:1.65; }
.hero-actions,.game-actions { display:flex; align-items:center; gap:18px; margin-top:38px; flex-wrap:wrap; }
.button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:0 24px; border:1px solid transparent; text-decoration:none; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--goblin); color:#081007; box-shadow:5px 5px 0 rgba(216,255,67,.23); }
.button-primary:hover { background:var(--acid); }
.button-quiet { border-color:rgba(241,238,223,.35); }
.button-quiet:hover { border-color:var(--paper); }
.hero-art { position:absolute; z-index:1; right:3vw; top:19%; width:min(43vw,610px); }
.hero-art img { width:100%; opacity:.86; filter:drop-shadow(0 25px 40px rgba(0,0,0,.45)); }
.rune { position:absolute; color:var(--goblin); opacity:.55; }
.rune-one { top:3%; right:2%; font-size:34px; transform:rotate(18deg); }
.rune-two { bottom:10%; left:0; font-size:22px; }
.scroll-note { position:absolute; z-index:2; right:clamp(24px,6vw,96px); bottom:34px; margin:0; color:#7f857a; font-size:10px; letter-spacing:.17em; text-transform:uppercase; }
.game-section { position:relative; padding:42px clamp(24px,7vw,120px) clamp(90px,12vw,160px); background:var(--paper); color:var(--ink); overflow:hidden; }
.game-section::after { content:""; position:absolute; right:-70px; bottom:-130px; width:330px; height:330px; border:1px solid rgba(44,167,8,.25); transform:rotate(45deg); }
.section-kicker { width:fit-content; margin:-66px auto 76px; position:relative; z-index:3; background:var(--acid); color:var(--ink); padding:18px 34px; transform:rotate(-2deg); font-family:"Rye",Georgia,serif; font-size:18px; box-shadow:7px 7px 0 var(--goblin-dark); }
.game-grid { max-width:1200px; margin:auto; display:grid; grid-template-columns:minmax(300px,.8fr) 1.2fr; gap:clamp(60px,9vw,130px); align-items:center; }
.game-poster-wrap { position:relative; justify-self:center; }
.poster-shape { position:absolute; inset:-22px; background:var(--goblin); transform:rotate(-4deg); clip-path:polygon(5% 0,100% 5%,94% 100%,0 93%); }
.game-poster { display:block; position:relative; width:min(100%,360px); aspect-ratio:267/352; object-fit:cover; box-shadow:16px 18px 0 rgba(11,13,10,.15); }
.beta-stamp { position:absolute; z-index:2; right:-40px; bottom:32px; width:92px; height:92px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--acid); font-family:"Rye",Georgia,serif; transform:rotate(10deg); }
.game-copy p:not(.chapter) { max-width:610px; margin:30px 0 0; color:#4d5148; font-size:18px; line-height:1.7; }
.game-copy strong { color:var(--ink); }
.text-link { font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-underline-offset:5px; }
.contact-section { padding:clamp(80px,10vw,140px) clamp(24px,7vw,120px); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(60px,10vw,150px); background:#11150f; }
.contact-intro h2 { color:var(--paper); }
.contact-intro>p:not(.chapter) { max-width:460px; margin:28px 0 20px; color:#adb1a6; line-height:1.7; }
.contact-intro>a { color:var(--goblin); font-weight:700; text-underline-offset:5px; }
.contact-form { align-self:center; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form label { display:block; margin-bottom:22px; color:#adb1a6; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.contact-form input,.contact-form textarea { width:100%; margin-top:9px; border:1px solid #3b4237; border-radius:0; background:#0b0d0a; color:var(--paper); padding:16px; outline:none; text-transform:none; letter-spacing:0; font-size:15px; resize:vertical; transition:border-color .2s; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--goblin); }
.contact-form .button { border:0; }
.form-note { color:#71776d; font-size:12px; margin:16px 0 0; }
footer { min-height:120px; padding:30px clamp(24px,6vw,96px); display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid #292e26; background:#080a07; }
.footer-brand img { width:105px; display:block; }
footer p { color:#72776e; font-size:12px; text-align:center; }
.footer-links { display:flex; gap:25px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:900px) { .hero{min-height:auto;padding-bottom:90px}.hero-art{opacity:.24;width:75vw;right:-20vw;top:24%}.hero-content{padding-top:90px}.game-grid,.contact-section{grid-template-columns:1fr}.game-grid{gap:75px}.contact-section{gap:70px} }
@media (max-width:600px) { .site-nav{height:90px}.brand-mark img{width:120px}.nav-links{gap:18px;font-size:10px}h1{font-size:clamp(47px,15vw,68px)}.hero-actions .button{width:100%}.scroll-note{display:none}.game-section{padding-top:32px}.section-kicker{margin-bottom:65px}.game-poster{width:min(78vw,330px)}.beta-stamp{right:-18px}.field-row{grid-template-columns:1fr;gap:0}.contact-form .button{width:100%}footer{flex-direction:column;padding-block:42px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{transition:none!important} }