@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Caveat:wght@700&display=swap');
:root { --forest:#14271b; --forest-2:#25442e; --moss:#6f9366; --gold:#efbd5b; --paper:#fff8e8; --ink:#243126; --berry:#a8425a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Quicksand',system-ui,sans-serif; color:var(--ink); background:var(--paper); }
.site-header { position:absolute; z-index:5; top:0; left:50%; transform:translateX(-50%); width:min(1180px,calc(100% - 36px)); display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.logo { color:#fff5d7; text-decoration:none; font-family:'Caveat',cursive; font-size:29px; font-weight:700; }
.logo span { margin-right:7px; }
nav { display:flex; align-items:center; gap:12px; }
.nav-link,.nav-button { color:#fff5d7; text-decoration:none; font-weight:700; font-size:14px; padding:10px 16px; border-radius:22px; }
.nav-button { background:var(--gold); color:#26301e; }
.welcome-user { color:#fff5d7; font-size:14px; }
.hero { min-height:700px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; padding:120px max(24px,calc((100vw - 1180px)/2)) 80px; background:radial-gradient(circle at 78% 28%,rgba(239,189,91,.16),transparent 24%),linear-gradient(145deg,#102118,#23432c 65%,#31543a); color:#fff; overflow:hidden; }
.hero-copy { max-width:650px; position:relative; z-index:2; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.15em; font-size:12px; font-weight:700; margin:0 0 13px; }
h1 { font-family:'Caveat',cursive; font-size:clamp(52px,6vw,78px); line-height:.98; color:#fff2c9; margin:0 0 24px; }
.hero-text { font-size:18px; line-height:1.7; color:rgba(255,255,255,.82); max-width:610px; }
.hero-actions { display:flex; gap:12px; margin:30px 0 20px; }
.primary,.secondary { display:inline-block; text-decoration:none; border-radius:26px; padding:14px 22px; font-weight:700; }
.primary { background:var(--gold); color:#26301e; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.secondary { color:#fff6dc; border:1px solid rgba(255,255,255,.35); }
.guardian-note { font-size:12.5px; color:rgba(255,255,255,.65); }
.hero-scene { height:470px; position:relative; border-radius:46% 46% 16% 16%; background:radial-gradient(ellipse at bottom,#73905c 0,#385b3d 38%,transparent 39%),radial-gradient(circle at 55% 25%,#f2d58b 0 4%,rgba(242,213,139,.2) 5%,transparent 18%); }
.moon { position:absolute; right:25%; top:16%; font-size:42px; color:#ffe49a; filter:drop-shadow(0 0 16px #ffe49a); }
.tree { position:absolute; bottom:30px; font-size:145px; filter:saturate(.65) brightness(.65); }
.tree-left { left:-28px; }.tree-right { right:-25px; transform:scale(.82); }
.dwarf-card-hero { position:absolute; inset:auto 50% 48px auto; transform:translateX(50%); width:230px; min-height:230px; border:1px solid rgba(255,255,255,.24); background:rgba(255,248,232,.12); backdrop-filter:blur(12px); border-radius:50% 50% 24px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 24px 50px rgba(0,0,0,.3); }
.dwarf-card-hero span { font-size:76px; }.dwarf-card-hero strong { font-family:'Caveat'; font-size:32px; color:#ffe7a5; }.dwarf-card-hero small { color:rgba(255,255,255,.7); }
.fireflies { position:absolute; top:40%; left:5%; width:90%; color:#ffe69c; font-size:28px; letter-spacing:20px; opacity:.65; }
.steps-section { padding:95px max(24px,calc((100vw - 1080px)/2)); text-align:center; }
h2 { font-family:'Caveat',cursive; color:var(--forest-2); font-size:44px; margin:0 0 34px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.steps article { position:relative; padding:32px 26px; background:#fff; border:1px solid #eadfc8; border-radius:20px; box-shadow:0 8px 25px rgba(34,50,33,.07); }
.step-number { position:absolute; top:14px; left:16px; color:#a5977d; font-weight:700; }.step-icon { font-size:40px; }.steps h3 { color:var(--forest-2); margin:13px 0 7px; }.steps p { color:#716956; line-height:1.55; margin:0; }
.clans-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:80px max(24px,calc((100vw - 1080px)/2)); background:#edf1e7; }
.clans-section h2 { margin-bottom:0; }.clan-cloud { display:flex; flex-wrap:wrap; gap:11px; }.clan-cloud span { background:#fff; padding:12px 16px; border-radius:22px; border:1px solid #d6dfce; font-weight:700; color:#36503a; }
.safety-section { display:grid; grid-template-columns:120px 1fr; gap:34px; align-items:center; width:min(1000px,calc(100% - 48px)); margin:80px auto; padding:38px 44px; border-radius:24px; background:var(--forest-2); color:#fff; }
.safety-icon { font-size:70px; text-align:center; }.safety-section h2 { color:#fff2c9; margin-bottom:12px; }.safety-section p:last-child { color:rgba(255,255,255,.78); line-height:1.65; }
footer { display:flex; justify-content:space-between; padding:28px max(24px,calc((100vw - 1080px)/2)); background:var(--forest); color:rgba(255,255,255,.65); font-size:13px; }
@media(max-width:800px){.site-header{padding:18px 0}.logo{font-size:24px}.nav-link{display:none}.hero{grid-template-columns:1fr;padding-top:130px}.hero-scene{height:350px}.steps,.clans-section{grid-template-columns:1fr}.safety-section{grid-template-columns:1fr;text-align:center}.steps-section{padding-top:70px}footer{display:block;text-align:center}footer span{display:block;margin:6px}.welcome-user{display:none}}