:root{--bg:#120c09;--bg2:#1b120d;--card:#21160f;--line:#3a2a1e;--text:#fbefe2;--muted:#c4ad98;--a1:#ffb33b;--a2:#ff7a2a;--a3:#ff4d6d;--grass:#5fae45;--grad:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3))}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(30px,4vw,46px);font-weight:900;margin-bottom:12px}
h3{font-size:20px;font-weight:800}
code{font:13px/1.5 Consolas,monospace;background:#0c0806;border:1px solid var(--line);border-radius:6px;padding:2px 6px;word-break:break-all}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);margin-bottom:10px}
.sub{color:var(--muted);font-size:18px;max-width:640px;margin:0 0 40px}
.sub.flush{margin-bottom:22px}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;border-radius:14px;padding:13px 22px;transition:transform .15s,box-shadow .2s,background .2s;cursor:pointer;white-space:nowrap}
.btn svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--grad);color:#1d0d05;box-shadow:0 6px 0 #a33a1c,0 14px 30px -8px #ff6a3d88}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 #a33a1c,0 20px 40px -8px #ff6a3daa}
.btn.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #a33a1c}
.btn.ghost{background:#ffffff14;border:2px solid #ffffff2a;backdrop-filter:blur(6px)}
.btn.ghost:hover{background:#ffffff22}
.btn.big{font-size:18px;padding:17px 30px;border-radius:16px}
.btn.small{padding:9px 16px;font-size:14px;border-radius:12px;box-shadow:0 4px 0 #a33a1c}

.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.top.scrolled{background:#120c09e6;backdrop-filter:blur(12px);border-color:var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;line-height:1.05;font-size:15px}
.brand img{border-radius:9px}
nav{display:flex;gap:26px;margin-left:auto;font-weight:700;color:var(--muted)}
nav a:hover{color:var(--text)}

.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;image-rendering:pixelated}
.hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,#120c0966 0%,#120c0900 30%,#120c0900 62%,#120c09 100%),linear-gradient(90deg,#120c09e6 0%,#120c0999 35%,#120c0900 65%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:end;flex:1}
.hero-text{align-self:center;padding:40px 0}
.chip{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:99px;background:#0008;border:1px solid #ffffff22;font-weight:700;font-size:14px;margin-bottom:22px;backdrop-filter:blur(6px)}
.dot{width:9px;height:9px;border-radius:50%;background:#9a8a7c}
.dot.on{background:#62e06a;box-shadow:0 0 0 0 #62e06a99;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px #62e06a00}100%{box-shadow:0 0 0 0 #62e06a00}}
h1{font-size:clamp(40px,6.4vw,80px);font-weight:900;max-width:760px;text-shadow:0 4px 30px #0009}
.lead{font-size:clamp(17px,1.6vw,21px);color:#f1dfcc;max-width:560px;margin:22px 0 34px;text-shadow:0 2px 12px #000a}
.actions{display:flex;gap:16px;flex-wrap:wrap}

.hero-mascot{position:relative;justify-self:center;width:min(300px,100%);margin-bottom:9vh}
.mascot{display:block;width:100%;image-rendering:pixelated;filter:drop-shadow(0 10px 0 #0004);animation:hop 2.6s cubic-bezier(.5,0,.5,1) infinite;transform-origin:50% 100%}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.06,.94)}35%{transform:translateY(-34px) scale(.97,1.04)}55%{transform:translateY(0) scale(1,1)}62%{transform:translateY(0) scale(1.05,.95)}70%{transform:translateY(0) scale(1,1)}}
.shadow{height:14px;margin:6px auto 0;width:70%;border-radius:50%;background:#0007;animation:shade 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes shade{35%{transform:scale(.7);opacity:.5}}
.bubble{position:absolute;right:-6px;top:-74px;background:#fff7ec;color:#3a1d0c;font-weight:800;font-size:15px;line-height:1.3;padding:12px 16px;border-radius:14px;box-shadow:0 5px 0 #c9a98c;animation:float 4s ease-in-out infinite}
.bubble::after{content:"";position:absolute;left:28px;bottom:-12px;border:8px solid transparent;border-top:8px solid #fff7ec;border-left:8px solid #fff7ec}
@keyframes float{50%{transform:translateY(-6px)}}

.stats{position:relative;list-style:none;margin:0 0 -54px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:#1d130d;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px -20px #000c;overflow:hidden}
.stats li{padding:24px 26px;border-left:1px solid var(--line)}
.stats li:first-child{border-left:0}
.stats b{display:block;font-size:clamp(26px,3vw,36px);font-weight:900;font-variant-numeric:tabular-nums}
.stats li:first-child b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{color:var(--muted);font-weight:600;font-size:14px}

section{padding:120px 0 40px}
#world{padding-top:150px}
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.js .reveal.in{opacity:1;transform:none}

.server{display:grid;grid-template-columns:1fr 1.1fr;background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px #000}
.server-art{position:relative;min-height:340px;overflow:hidden}
.server-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% bottom;image-rendering:pixelated;transition:transform 6s ease}
.server:hover .server-art img{transform:scale(1.08)}
.server-badge{position:absolute;left:20px;top:20px;padding:7px 14px;border-radius:99px;background:#000a;font-weight:800;font-size:14px;backdrop-filter:blur(6px)}
.server-badge.on{background:#1f5c2acc;color:#c9ffc9}
.server-body{padding:40px 42px}
.server-desc{color:var(--muted);margin:10px 0 26px}
.perks{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:18px}
.perks li{display:flex;gap:14px}
.perks b{display:block;font-size:16px}
.perks span{color:var(--muted);font-size:15px}
.perks i{flex:none;width:40px;height:40px;border-radius:11px;background-color:#ffb33b1f;border:1px solid #ffb33b44;background-repeat:no-repeat;background-position:center;background-size:22px}
.p-house{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb33b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21H3z'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E")}
.p-leaf{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb33b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.1-6C9.5 14.5 12 13 13 12'/%3E%3C/svg%3E")}
.p-chat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb33b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.p-shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb33b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}

.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 28px 30px;transition:transform .2s,border-color .2s}
.steps li:hover{transform:translateY(-6px);border-color:#ffb33b66}
.steps p{color:var(--muted);margin:8px 0 0}
.num{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;font-weight:900;font-size:24px;color:#1d0d05;background:var(--grad);border-radius:12px;box-shadow:0 5px 0 #a33a1c}

.download{position:relative;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;padding:54px 56px;border-radius:30px;background:radial-gradient(circle at 15% 50%,#ff7a2a33,transparent 55%),linear-gradient(135deg,#2a1810,#1a110c);border:1px solid #ff9b4d44;overflow:hidden}
.download::before{content:"";position:absolute;inset:auto 0 0;height:10px;background:repeating-linear-gradient(90deg,var(--grass) 0 16px,#4c9238 16px 32px)}
.dl-mascot{width:220px;image-rendering:pixelated;animation:float 3.4s ease-in-out infinite;filter:drop-shadow(0 16px 20px #0008)}
.meta{color:var(--muted);font-size:14px;margin:16px 0 0}
.hash{margin-top:14px;color:var(--muted);font-size:14px}
.hash summary{cursor:pointer;font-weight:700}
.hash>code{display:block;margin:10px 0 6px}

.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:30px}
.news article{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;transition:transform .2s}
.news article:hover{transform:translateY(-4px)}
.news time{color:var(--a1);font-weight:700;font-size:13px}
.news h3{margin:6px 0 8px}
.news p{color:var(--muted);margin:0}
.news a{display:inline-block;margin-top:12px;color:var(--a1);font-weight:700}

details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;padding:0 22px}
#faq h2{margin-bottom:30px}
details summary{cursor:pointer;padding:18px 0;font-weight:800;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::after{content:"+";color:var(--a1);font-size:24px;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 18px;color:var(--muted)}
.hash{background:none;border:0;padding:0}
.hash summary{padding:0;font-size:14px;justify-content:flex-start}

.cta{text-align:center;padding:110px 0 120px}
.cta h2{margin-bottom:28px}

footer{border-top:1px solid var(--line);padding:30px 0;color:#8f7b6a;font-size:13px}
.foot{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.foot .brand{color:var(--text)}

@media (max-width:900px){
  nav{display:none}
  .nav .btn{margin-left:auto}
  .hero-grid{grid-template-columns:1fr}
  .hero-mascot{width:170px;margin:0 0 30px;justify-self:end}
  .bubble{right:auto;left:-150px;top:-30px;font-size:13px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats li:nth-child(3){border-left:0}
  .stats li:nth-child(n+3){border-top:1px solid var(--line)}
  .server,.download{grid-template-columns:1fr}
  .server-art{min-height:220px}
  .server-body{padding:30px 26px}
  .steps{grid-template-columns:1fr}
  .download{padding:40px 26px 50px;gap:20px}
  .dl-mascot{width:140px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}