@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
  --bg:#f4f0e3;
  --paper:#fffdf7;
  --paper-2:#edf4e8;
  --ink:#102d20;
  --muted:#6f7d73;
  --forest:#06291a;
  --forest-2:#0c4229;
  --green:#35b85e;
  --lime:#a8f75a;
  --gold:#d9b956;
  --line:rgba(16,45,32,.12);
  --shadow:0 28px 70px rgba(13,53,32,.10);
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:"DM Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  opacity:.026;
  background-image:radial-gradient(#0b3422 .6px,transparent .6px);
  background-size:9px 9px;
}
a{text-decoration:none;color:inherit}
.nav{
  height:78px;
  padding:0 max(24px,calc((100vw - 1180px)/2));
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  background:rgba(244,240,227,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.18em;font-size:16px}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 8px 22px rgba(7,50,29,.14)}
.nav nav{display:flex;gap:30px;color:#637268;font-size:12px;font-weight:600}
.nav nav a{transition:.2s}.nav nav a:hover{color:var(--green)}
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 18px;border-radius:999px;
  background:var(--forest);color:#fff;font-weight:800;font-size:11px;
  box-shadow:0 10px 25px rgba(6,41,26,.14);
}
.nav-cta span{color:var(--lime)}
main{overflow:hidden}
.hero{
  max-width:1180px;
  min-height:690px;
  margin:auto;
  padding:72px 30px 70px;
  display:grid;grid-template-columns:1fr .9fr;
  gap:55px;align-items:center;
}
.hero-copy{position:relative;z-index:2}
.kicker,.section-tag{
  font-size:9px;letter-spacing:.25em;text-transform:uppercase;font-weight:800;color:#27894b;
}
.kicker{display:flex;align-items:center;gap:10px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(53,184,94,.11)}
.hero h1{
  margin:22px 0 20px;
  font-family:Manrope,sans-serif;
  font-size:clamp(56px,7.4vw,96px);
  line-height:.9;letter-spacing:-.065em;
  font-weight:800;
}
.hero h1 span,.story em,.roadmap em,.community em,.world em{color:var(--green);font-style:normal}
.hero p{
  max-width:555px;margin:0;
  color:var(--muted);font-size:16px;line-height:1.72;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:999px;
  font-weight:800;font-size:11px;transition:.2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--forest);color:#fff;box-shadow:0 13px 28px rgba(6,41,26,.15)}
.btn.primary b{color:var(--lime)}
.btn.ghost{background:rgba(255,255,255,.62);border:1px solid var(--line)}
.micro{display:flex;gap:12px;align-items:center;margin-top:28px;color:#77847b;font-size:8px;letter-spacing:.19em;font-weight:800}
.micro i{width:4px;height:4px;background:var(--gold);border-radius:50%}

.hero-visual{height:560px;display:grid;place-items:center;position:relative}
.halo{
  position:absolute;width:475px;height:475px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#d9ff9b 0,#70d94b 27%,#1c6c3e 59%,#082d1c 70%,transparent 71%);
  box-shadow:0 35px 90px rgba(24,100,53,.15);
}
.hero-mascot{
  position:relative;z-index:2;
  width:min(500px,95%);height:auto;
  border-radius:50%;
  filter:drop-shadow(0 32px 35px rgba(6,46,27,.22));
}
.orb{position:absolute;border-radius:50%;z-index:3}
.orb-a{width:17px;height:17px;right:7%;top:18%;background:var(--gold);box-shadow:0 0 0 7px rgba(217,185,86,.10)}
.orb-b{width:9px;height:9px;left:9%;bottom:17%;background:var(--green)}
.seal{
  position:absolute;right:0;bottom:5%;z-index:4;
  padding:14px 17px;border-radius:16px;
  background:rgba(255,253,247,.88);
  border:1px solid rgba(16,45,32,.10);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(7,48,28,.12);
  text-align:right;
}
.seal span,.seal strong{display:block}.seal span{font-size:7px;letter-spacing:.18em;color:#78867c}.seal strong{font:800 14px Manrope;margin-top:4px}

.listing{
  max-width:1180px;margin:0 auto 82px;
  padding:20px;
  display:grid;grid-template-columns:1.05fr 1.8fr .65fr;
  gap:16px;align-items:stretch;
  background:var(--forest);color:#fff;
  border-radius:24px;
  box-shadow:0 24px 55px rgba(5,41,25,.16);
}
.listing-label{
  padding:14px 16px;
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid rgba(255,255,255,.10)
}
.listing-label span,.listing-label small{font-size:8px;letter-spacing:.19em;color:#9bb8a5}
.listing-label strong{font:800 23px Manrope;margin:5px 0}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.countdown div{
  min-height:76px;padding:11px 6px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
}
.countdown b{font:800 27px Manrope;color:var(--lime);line-height:1}
.countdown span{text-transform:uppercase;font-size:7px;letter-spacing:.16em;color:#a9c2b1;margin-top:6px}
.listing-note{display:flex;align-items:center;justify-content:center;text-align:center;color:#b5c9bc;font-size:9px;letter-spacing:.12em;text-transform:uppercase}

.story,.roadmap{max-width:1180px;margin:auto;padding:95px 30px;border-top:1px solid var(--line)}
.story-grid,.roadmap-head{display:grid;grid-template-columns:1fr 1fr;gap:100px;margin-top:25px}
.story h2,.roadmap h2,.community h2,.world h2{
  margin:0;font:800 clamp(45px,6vw,74px)/.94 Manrope;letter-spacing:-.065em
}
.story p,.roadmap-head p,.community p,.world p{color:var(--muted);font-size:16px;line-height:1.75}
.line-link{display:inline-flex;margin-top:15px;color:#1c8e4c;font-size:12px;font-weight:800}

.token{
  max-width:1180px;margin:0 auto 25px;
  padding:42px;border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.token-top{display:flex;justify-content:space-between;align-items:end}
.token h2{margin:10px 0 0;font:800 64px Manrope;letter-spacing:-.065em}
.chain{font-size:9px;letter-spacing:.2em;font-weight:800;color:#78857c}.chain span{color:var(--green)}
.token-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:12px;margin-top:27px}
.token-card{
  min-height:190px;padding:24px;border-radius:20px;
  border:1px solid var(--line);background:#faf9f1;
  transition:.2s;
}
.token-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(11,54,31,.07)}
.token-card.dark{background:var(--forest);color:#fff;border-color:var(--forest)}
.token-card span{font-size:8px;letter-spacing:.18em;color:#7c8a80;font-weight:800}.token-card.dark span{color:#a9c0b1}
.token-card strong{display:block;margin:22px 0 8px;font:800 22px Manrope}
.token-card p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}.token-card.dark p{color:#b7cabe}
.feature-card{display:flex;align-items:center;gap:20px;background:#eff6e9}
.utility-mark{
  width:82px;height:82px;flex:0 0 82px;border-radius:22px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#b9fb76,#39b860 55%,#0b3a24);
  color:#fff;font:800 24px Manrope;
  box-shadow:0 14px 30px rgba(27,121,62,.18);
}

.world-clean{
  max-width:1180px;margin:0 auto;
  padding:88px 7vw;border-radius:var(--radius);
  background:
    radial-gradient(circle at 85% 20%,rgba(168,247,90,.18),transparent 28%),
    linear-gradient(135deg,#082d1c,#10472d 58%,#082719);
  color:#fff;position:relative;overflow:hidden;
}
.world-clean:after{
  content:"";position:absolute;width:430px;height:430px;border-radius:50%;
  right:-180px;bottom:-250px;background:rgba(168,247,90,.12)
}
.world-copy-clean{position:relative;z-index:2;max-width:650px}
.world-copy-clean .section-tag{color:#b5ed7a}
.world-copy-clean h2{font-size:clamp(50px,6vw,78px);margin:13px 0 18px}
.world-copy-clean p{color:#c7d8cc;max-width:610px}

.roadmap{margin-top:0}
.roadmap-line{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid var(--line)}
.roadmap-line article{padding:25px 20px 10px;border-right:1px solid var(--line);transition:.2s}
.roadmap-line article:first-child{padding-left:0}.roadmap-line article:last-child{border-right:0}
.roadmap-line article:hover{background:rgba(255,255,255,.25)}
.roadmap-line b{font:800 10px Manrope;color:#2b9952;letter-spacing:.14em}
.roadmap-line h3{font:800 19px Manrope;margin:22px 0 8px}.roadmap-line p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}

.community{
  max-width:1180px;margin:0 auto 80px;
  padding:62px 65px;border-radius:var(--radius);
  background:linear-gradient(135deg,#e2f2d4,#eef5e5);
  border:1px solid rgba(16,45,32,.08);
  position:relative;overflow:hidden;
}
.community:after{
  content:"";position:absolute;width:330px;height:330px;border-radius:50%;
  right:-120px;bottom:-190px;background:rgba(168,247,90,.22)
}
.community>div{position:relative;z-index:2;max-width:700px}
.community h2{margin:13px 0 17px}.community p{max-width:610px}
footer{
  max-width:1180px;margin:auto;padding:25px 0 38px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;
  color:#7b877e;font-size:9px;letter-spacing:.16em
}
.grain{opacity:.02}

@media(max-width:900px){
  .nav{padding:0 20px}.nav nav{display:none}
  .hero{grid-template-columns:1fr;padding:55px 24px 55px;gap:15px}
  .hero-visual{height:430px}
  .halo{width:360px;height:360px}
  .hero-mascot{width:min(390px,90vw)}
  .listing{margin:0 18px 60px;grid-template-columns:1fr;padding:15px}
  .listing-label{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:10px 12px}
  .listing-note{padding:10px}
  .story,.roadmap{padding:70px 24px}
  .story-grid,.roadmap-head{grid-template-columns:1fr;gap:25px}
  .token{margin:0 18px 20px;padding:27px 22px}
  .token-grid{grid-template-columns:1fr}
  .world-clean{margin:0 18px;padding:62px 28px}
  .roadmap-line{grid-template-columns:1fr 1fr}
  .roadmap-line article{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .community{margin:0 18px 60px;padding:48px 28px}
  footer{margin:0 20px;gap:15px}
}
@media(max-width:560px){
  .nav{height:70px}.brand{font-size:14px;letter-spacing:.16em}.brand img{width:40px;height:40px}
  .nav-cta{padding:10px 14px;font-size:10px}
  .hero h1{font-size:54px}.hero p{font-size:15px}
  .hero-visual{height:380px}.halo{width:310px;height:310px}.seal{right:2%;bottom:3%}
  .micro{font-size:7px}
  .countdown b{font-size:22px}.countdown div{min-height:68px}
  .story h2,.roadmap h2,.community h2{font-size:48px}
  .token h2{font-size:52px}
  .roadmap-line{grid-template-columns:1fr}
  .roadmap-line article,.roadmap-line article:first-child{padding:21px 0;border-right:0}
  .feature-card{align-items:flex-start}.utility-mark{width:66px;height:66px;flex-basis:66px}
  .world-clean{padding:52px 23px}.world-copy-clean h2{font-size:48px}
  .community .actions{gap:8px}.community .btn{min-height:46px;padding:0 16px}
  footer{flex-direction:column}
}