:root {
  --ink: #041518;
  --ink-2: #082328;
  --ink-3: #0c3233;
  --panel: #0b292b;
  --green: #9bf56f;
  --green-bright: #baff75;
  --green-deep: #4fc65e;
  --mint: #50e3b3;
  --gold: #ffd45f;
  --orange: #ff9d3d;
  --red: #f34e43;
  --cream: #f5f0d8;
  --white: #fbfdf2;
  --muted: #9bb9ac;
  --line: rgba(203, 255, 223, .16);
  --display: "Bungee", "Arial Black", sans-serif;
  --body: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --radius: 24px;
  --shell: min(1320px, calc(100vw - 64px));
  --shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--green-deep) var(--ink); }
body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
::selection { background: var(--green); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { width: 1.25em; height: 1.25em; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding: 130px 0; overflow: hidden; }

.noise {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid rgba(201, 255, 221, .13);
  background: linear-gradient(180deg, rgba(3, 15, 19, .92), rgba(3, 15, 19, .6));
  backdrop-filter: blur(16px);
}
.nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand img { filter: drop-shadow(0 0 15px rgba(137, 255, 115, .24)); }
.brand-name { font-family: var(--display); font-size: 25px; line-height: 1; letter-spacing: .4px; color: var(--white); }
.brand-cn { padding-left: 11px; border-left: 1px solid rgba(255,255,255,.24); color: var(--muted); font-size: 11px; letter-spacing: .18em; line-height: 1.1; }
.nav-menu { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 34px); margin-left: auto; margin-right: auto; }
.nav-menu a { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: rgba(245, 240, 216, .78); transition: color .25s ease; white-space: nowrap; }
.nav-menu a:hover { color: var(--green-bright); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.social-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(221,255,227,.24); border-radius: 50%; transition: .25s ease; }
.social-btn:hover { background: var(--green); border-color: var(--green); color: var(--ink); transform: translateY(-2px); }
.social-btn svg { width: 17px; height: 17px; }
.nav-buy {
  margin-left: 4px; display: inline-flex; align-items: center; gap: 11px; min-height: 43px; padding: 0 20px;
  border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 13px; font-weight: 800;
  transition: .25s ease; white-space: nowrap;
}
.nav-buy svg { width: 17px; }
.nav-buy:hover { background: var(--green-bright); box-shadow: 0 0 25px rgba(161, 255, 116, .25); transform: translateY(-2px); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; padding: 11px; cursor: pointer; }
.nav-toggle span { display: block; width: 100%; height: 2px; margin: 4px 0; background: var(--cream); transition: .3s; }

.breaking {
  position: absolute; top: 82px; left: 0; right: 0; z-index: 99; min-height: 44px; display: flex; align-items: stretch;
  background: var(--red); color: #fff; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,.3);
}
.breaking-label {
  display: flex; align-items: center; gap: 9px; padding: 0 34px 0 max(32px, calc((100vw - min(1320px, calc(100vw - 64px))) / 2));
  background: #c72b28; font-size: 12px; font-weight: 900; letter-spacing: .1em; white-space: nowrap;
}
.live-dot, .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: pulse 1.7s infinite; }
.ticker-window { flex: 1; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: ticker 28s linear infinite; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.ticker-track b { color: #ffd5c9; font-size: 17px; line-height: 1; }

.hero {
  position: relative; min-height: 930px; padding: 150px 0 70px; isolation: isolate;
  background:
    radial-gradient(circle at 68% 44%, rgba(32, 180, 136, .24), transparent 37%),
    radial-gradient(circle at 16% 63%, rgba(76, 129, 72, .27), transparent 34%),
    linear-gradient(112deg, #0b4b68 0%, #0c5862 42%, #092c34 75%, #051a20 100%);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .52;
  background: linear-gradient(180deg, rgba(0, 17, 27, .64) 0, transparent 34%, transparent 68%, rgba(2, 20, 18, .9) 100%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 160px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #092529 85%);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .6; }
.orb-one { width: 560px; height: 560px; top: 220px; left: -210px; background: radial-gradient(circle, rgba(128,255,152,.27), transparent 67%); }
.orb-two { width: 700px; height: 700px; top: -180px; right: 18%; background: radial-gradient(circle, rgba(2,116,155,.35), transparent 65%); }
.web-lines {
  position: absolute; width: 730px; height: 600px; left: 2%; top: 220px; opacity: .23;
  background-image: radial-gradient(circle at center, transparent 0 13%, rgba(197,255,218,.45) 13.2% 13.4%, transparent 13.6% 25%, rgba(197,255,218,.28) 25.2% 25.35%, transparent 25.5% 38%, rgba(197,255,218,.15) 38.2% 38.3%, transparent 38.5%);
  transform: rotate(-7deg) scale(1.2);
}
.hero-shell { position: relative; min-height: 720px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 444px); gap: 48px; align-items: start; }
.hero-copy { position: relative; z-index: 4; padding-top: 60px; max-width: 720px; }
.eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; color: rgba(229, 255, 217, .74); font-family: var(--display); font-size: 11px; letter-spacing: .13em; }
.eyebrow i { width: 38px; height: 1px; background: var(--green); box-shadow: 0 0 10px var(--green); }
.hero h1 {
  margin: 0 0 27px; font-size: clamp(72px, 7.4vw, 112px); line-height: .94; letter-spacing: -.065em; font-weight: 900;
  text-wrap: balance; text-shadow: 0 12px 50px rgba(0,0,0,.2);
}
.hero h1 span { position: relative; display: inline-block; color: var(--green-bright); }
.hero h1 span::after {
  content: ""; position: absolute; left: 3%; right: -3%; height: 9px; bottom: -2px; border-radius: 50%; background: rgba(151,255,113,.24); filter: blur(7px);
}
.hero-lead { margin: 0; max-width: 620px; color: rgba(245, 246, 221, .84); font-size: 16px; line-height: 1.9; font-weight: 500; }
.hero-lead strong { color: var(--gold); }
.hero-actions { display: flex; align-items: center; gap: 13px; margin-top: 30px; }
.btn {
  min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 25px;
  border: 1px solid transparent; border-radius: 14px; font-size: 14px; font-weight: 800; letter-spacing: .02em; transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--green-bright); color: #10200e; box-shadow: 0 12px 34px rgba(82, 243, 111, .2), inset 0 -3px 0 rgba(34, 104, 28, .22); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(107,255,121,.3), inset 0 -3px 0 rgba(34,104,28,.22); background: #cbff82; }
.btn-ghost { border-color: rgba(242, 249, 221, .35); background: rgba(9, 37, 38, .34); color: var(--cream); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--cream); background: rgba(244, 241, 218, .12); transform: translateY(-3px); }
.hero-countdown { margin-top: 32px; display: flex; align-items: center; gap: 21px; }
.countdown-title { max-width: 80px; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: rgba(234, 247, 221, .57); }
.countdown-title .pulse-dot { display: inline-block; margin-right: 6px; background: var(--green); box-shadow: 0 0 0 0 rgba(151,255,112,.5); }
.countdown { display: flex; align-items: center; gap: 7px; }
.countdown div { width: 58px; height: 57px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(202, 255, 213, .18); border-radius: 11px; background: rgba(4, 24, 28, .44); backdrop-filter: blur(8px); }
.countdown b { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--white); font-weight: 400; }
.countdown span { margin-top: 5px; font-size: 8px; color: var(--muted); letter-spacing: .1em; }
.countdown i { color: rgba(238,255,225,.45); font-style: normal; font-family: var(--display); }

.hero-art { position: absolute; z-index: 2; width: min(850px, 71vw); left: 4%; top: 245px; pointer-events: none; filter: drop-shadow(0 28px 45px rgba(0,0,0,.16)); }
.hero-art > img { width: 100%; animation: heroFloat 6.5s ease-in-out infinite; }
.art-tag {
  position: absolute; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(208,255,218,.24);
  border-radius: 999px; background: rgba(3, 26, 29, .76); color: rgba(240,250,225,.7); backdrop-filter: blur(10px);
  box-shadow: 0 9px 28px rgba(0,0,0,.22); font-size: 10px; font-weight: 700; letter-spacing: .05em;
}
.art-tag span { color: var(--gold); font-family: var(--display); font-size: 12px; }
.tag-one { top: 27%; right: 8%; }
.tag-two { top: 55%; left: 7%; animation-delay: -2.4s; }
.energy-ring { position: absolute; border: 1px solid rgba(147,255,187,.17); border-radius: 50%; left: 31%; top: 24%; pointer-events: none; }
.ring-one { width: 370px; height: 370px; animation: rotate 22s linear infinite; border-style: dashed; }
.ring-two { width: 480px; height: 480px; left: 25%; top: 17%; animation: rotateReverse 35s linear infinite; border-color: rgba(255,218,109,.11); }

.buy-card {
  position: relative; z-index: 5; align-self: start; margin-top: 17px; padding: 25px 25px 21px;
  border: 2px solid rgba(238,255,244,.9); border-radius: 28px;
  background: linear-gradient(155deg, rgba(13, 79, 114, .98), rgba(7, 42, 62, .985));
  box-shadow: 0 28px 90px rgba(0, 9, 16, .48), inset 0 0 45px rgba(99, 229, 207, .06), 0 0 0 6px rgba(9, 54, 72, .24);
  backdrop-filter: blur(18px);
}
.buy-card::before { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(122, 235, 203, .17); border-radius: 21px; }
.buy-status { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.buy-status span { display: flex; align-items: center; gap: 7px; color: #bfffc9; }
.buy-status span i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 1.7s infinite; }
.buy-status em { font-style: normal; color: rgba(219,255,238,.5); font-family: var(--display); font-size: 9px; }
.presale-round-label { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1; }
.presale-round-label small { color: rgba(219,255,238,.68); font-size: 8px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.buy-heading { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; }
.kicker { display: block; color: #6bd1c2; font-family: var(--display); font-size: 8px; letter-spacing: .12em; margin-bottom: 2px; }
.buy-heading h2 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.04em; }
.buy-heading h2 strong { color: var(--gold); font-weight: 900; }
.token-sigil { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(193,255,208,.27); border-radius: 50%; background: rgba(1,30,38,.44); }
.token-sigil img { width: 38px; height: 38px; }
.payment-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 13px; background: rgba(2,24,37,.45); }
.payment-tab { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: rgba(226,247,239,.55); font-size: 11px; font-weight: 700; cursor: pointer; transition: .22s; }
.payment-tab:hover { color: #fff; }
.payment-tab.active { background: rgba(218,255,235,.96); color: #0b3541; box-shadow: 0 4px 15px rgba(0,0,0,.17); }
.eth-icon { color: #9ccffc; margin-right: 2px; }
.usdt-icon { color: #5fe5c3; }
.card-icon { font-size: 15px; }
.swap-box { position: relative; }
.swap-field { position: relative; padding: 12px 14px 10px; border: 1px solid rgba(183,255,218,.2); border-radius: 14px; background: rgba(1, 21, 29, .4); transition: border-color .2s; }
.swap-field:focus-within { border-color: rgba(158,255,126,.72); box-shadow: 0 0 0 3px rgba(144,255,107,.08); }
.swap-field label { display: block; font-size: 9px; color: rgba(210,239,226,.55); margin-bottom: 5px; }
.input-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.input-row input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-family: var(--display); font-size: 22px; line-height: 1.25; padding: 0; }
.input-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.input-token { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(194,255,216,.14); border-radius: 10px; background: rgba(0,12,19,.34); font-size: 11px; font-weight: 800; color: #eaf9e8; }
.input-token b { color: #84c8ff; }
.input-token img { width: 17px; height: 17px; }
.receive-field { margin-top: 8px; }
.ribbit-token { color: var(--green-bright); }
.field-balance { display: flex; justify-content: space-between; color: rgba(207,238,225,.43); font-size: 8px; margin-top: 4px; }
.field-balance button { border: 0; background: none; color: var(--green); padding: 0; cursor: pointer; font-weight: 900; }
.field-balance > span { color: rgba(255,217,104,.68); }
.swap-switch { position: absolute; z-index: 2; top: 50%; left: 50%; width: 27px; height: 27px; transform: translate(-50%, -50%) rotate(90deg); border: 1px solid rgba(217,255,229,.25); border-radius: 50%; background: #0c4b63; display: grid; place-items: center; cursor: pointer; }
.swap-switch svg { width: 13px; }
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 10px; }
.quick-amounts button { min-height: 30px; border: 1px solid rgba(185,255,212,.15); border-radius: 8px; background: rgba(3,27,34,.3); color: rgba(230,249,232,.65); font-size: 9px; font-weight: 800; cursor: pointer; transition: .2s; }
.quick-amounts button:hover, .quick-amounts button.active { background: rgba(155,245,111,.13); border-color: rgba(155,245,111,.45); color: var(--green-bright); }
.progress-meta { display: flex; justify-content: space-between; margin: 16px 1px 7px; font-size: 9px; color: rgba(210,239,226,.52); }
.progress-meta strong { color: #f3f5db; }
.progress-meta span:last-child strong { color: var(--gold); }
.progress-track { height: 8px; padding: 2px; border-radius: 99px; background: rgba(0, 12, 18, .6); box-shadow: inset 0 1px 3px rgba(0,0,0,.32); overflow: hidden; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #40d68f, #c9ff72); box-shadow: 0 0 15px rgba(131,255,116,.5); transition: width .7s cubic-bezier(.22,1,.36,1); }
.buy-button { width: 100%; min-height: 52px; margin-top: 16px; padding: 0 17px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 12px; background: var(--green-bright); color: #10200e; font-size: 13px; font-weight: 900; cursor: pointer; transition: .25s; box-shadow: inset 0 -3px 0 rgba(31,103,22,.22), 0 10px 24px rgba(82,255,110,.16); }
.buy-button:hover { transform: translateY(-2px); background: #d2ff8a; box-shadow: inset 0 -3px 0 rgba(31,103,22,.22), 0 14px 32px rgba(82,255,110,.26); }
.buy-button svg { width: 18px; height: 18px; }
.buy-button.connected { background: var(--gold); }
.buy-safe { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 8px; color: rgba(214,243,230,.48); }
.buy-safe svg { width: 12px; height: 12px; color: #84e1b6; }
.hero-floor { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(11, 43, 35, .5)); }
.scroll-cue { position: absolute; z-index: 5; bottom: 27px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: rgba(226,245,216,.4); font-family: var(--display); font-size: 7px; letter-spacing: .16em; }
.scroll-cue span { position: relative; width: 1px; height: 28px; background: rgba(204,255,212,.2); overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 70%; background: var(--green); animation: scrollDown 2.2s ease-in-out infinite; }

.proof-strip { position: relative; z-index: 6; padding: 37px 0 40px; background: #0b2b29; border-top: 1px solid rgba(196,255,213,.1); border-bottom: 1px solid rgba(196,255,213,.11); }
.proof-inner { display: flex; align-items: center; gap: 45px; }
.proof-inner > p { flex: none; margin: 0; font-size: 11px; letter-spacing: .14em; color: rgba(230,245,221,.45); }
.press-logos { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.press-logo { font-size: clamp(13px, 1.4vw, 23px); color: rgba(247,246,227,.68); white-space: nowrap; filter: grayscale(1); transition: .25s; }
.press-logo:hover { color: var(--cream); filter: none; transform: translateY(-2px); }
.press-logo.serif { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.05em; }
.press-logo.sans { font-weight: 900; letter-spacing: -.06em; }
.press-logo.mono { font-family: Consolas, monospace; letter-spacing: -.06em; font-weight: 700; }
.press-logo.potato { font-family: "Arial Black", sans-serif; letter-spacing: -.06em; }

.section-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--green); font-family: var(--display); font-size: 9px; letter-spacing: .14em; }
.section-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(154,255,111,.65); }
.section-heading { display: grid; grid-template-columns: 1.6fr .75fr; align-items: end; gap: 65px; margin-bottom: 62px; }
.section-heading h2, .how-intro h2, .faq-heading h2, .community-copy h2 { margin: 0; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.11; letter-spacing: -.055em; font-weight: 900; }
.section-heading h2 span, .how-intro h2 span, .faq-heading h2 span, .community-copy h2 span { color: var(--green-bright); }
.section-heading > p { max-width: 380px; margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.section-heading.centered { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 72px; }
.section-heading.centered p { max-width: 580px; margin-top: 18px; }

.about { background: radial-gradient(circle at 14% 35%, rgba(51, 122, 70, .23), transparent 30%), linear-gradient(180deg, #092529, #071d20); }
.about::before { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(202,255,222,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(202,255,222,.06) 1px, transparent 1px); background-size: 84px 84px; mask-image: radial-gradient(circle at center, #000, transparent 70%); }
.section-glow { position: absolute; width: 550px; height: 550px; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.glow-left { background: rgba(53, 175, 106, .13); left: -250px; top: 30%; }
.bento-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.bento-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(18, 60, 55, .76), rgba(7, 31, 32, .88)); box-shadow: inset 0 1px 0 rgba(236,255,230,.04); }
.bento-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 22%); opacity: .5; }
.card-index { position: relative; z-index: 2; color: rgba(203, 244, 213, .43); font-family: var(--display); font-size: 8px; letter-spacing: .14em; }
.bento-feature { grid-column: span 7; grid-row: span 2; min-height: 610px; display: flex; flex-direction: column; justify-content: space-between; padding: 37px; background: radial-gradient(circle at 72% 60%, rgba(127,255,106,.17), transparent 32%), linear-gradient(150deg, #143e35, #082022 73%); }
.feature-copy { position: relative; z-index: 2; width: 54%; }
.feature-copy h3, .community-card h3, .chain-card h3, .contract-card h3 { margin: 14px 0 15px; font-size: 31px; line-height: 1.28; letter-spacing: -.045em; }
.feature-copy p, .chain-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.feature-copy a { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--green-bright); font-size: 11px; font-weight: 800; }
.feature-copy a svg { width: 15px; transition: transform .2s; }
.feature-copy a:hover svg { transform: translateX(4px); }
.feature-frog { position: absolute; z-index: 1; right: -4%; bottom: -7%; width: 64%; aspect-ratio: 1; display: grid; place-items: center; }
.feature-frog > img { position: relative; z-index: 2; width: 46%; filter: drop-shadow(0 20px 35px rgba(0,0,0,.45)); animation: heroFloat 5s ease-in-out infinite; }
.orbit { position: absolute; border: 1px solid rgba(149,255,126,.19); border-radius: 50%; }
.orbit-a { inset: 10%; border-style: dashed; animation: rotate 20s linear infinite; }
.orbit-b { inset: 24%; animation: rotateReverse 14s linear infinite; border-color: rgba(255,216,94,.17); }
.orbit-a::before, .orbit-b::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); left: 8%; top: 5%; box-shadow: 0 0 12px var(--gold); }
.sticker { position: absolute; z-index: 3; padding: 6px 11px; border-radius: 4px; font-family: var(--display); font-size: 9px; letter-spacing: .08em; transform: rotate(-8deg); box-shadow: 0 7px 15px rgba(0,0,0,.25); }
.sticker-one { left: 4%; top: 24%; background: var(--gold); color: var(--ink); }
.sticker-two { right: 1%; bottom: 25%; background: var(--green-bright); color: var(--ink); transform: rotate(7deg); }
.metric-card { grid-column: span 5; min-height: 297px; padding: 28px 31px; }
.metric-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; color: rgba(225,250,224,.66); font-size: 11px; font-weight: 700; }
.metric-top svg { color: var(--green); width: 16px; }
.metric-card > strong { position: relative; z-index: 2; display: block; margin-top: 24px; font-family: var(--display); font-size: clamp(56px, 6vw, 86px); line-height: 1; color: var(--cream); font-weight: 400; letter-spacing: -.04em; }
.metric-card > strong small { margin-left: 3px; font-family: var(--body); font-size: 20px; font-weight: 800; color: var(--green); }
.metric-card > p { position: relative; z-index: 2; width: 66%; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.metric-lines { position: absolute; right: -20px; bottom: 20px; width: 45%; height: 65%; display: flex; gap: 6px; align-items: end; transform: rotate(-7deg); opacity: .45; }
.metric-lines i { flex: 1; height: 20%; border-radius: 4px 4px 0 0; background: linear-gradient(var(--green), transparent); }
.metric-lines i:nth-child(2) { height: 43%; }.metric-lines i:nth-child(3) { height: 35%; }.metric-lines i:nth-child(4) { height: 71%; }.metric-lines i:nth-child(5) { height: 98%; }
.green-card { background: linear-gradient(145deg, #82e76e, #39ad6c); color: var(--ink); border-color: rgba(211,255,199,.44); }
.green-card .metric-top, .green-card > p { color: rgba(7,41,35,.7); }
.green-card .metric-top svg, .green-card > strong small { color: #0d4233; }
.green-card > strong { color: #092e28; }
.lock-ring { position: absolute; right: 29px; bottom: 26px; width: 103px; height: 103px; border: 11px solid rgba(7,62,52,.16); border-top-color: #0a493b; border-right-color: #0a493b; border-radius: 50%; display: grid; place-items: center; transform: rotate(28deg); }
.lock-ring span { font-family: var(--display); font-size: 12px; color: #0b4639; transform: rotate(-28deg); }
.community-card { grid-column: span 7; min-height: 320px; padding: 31px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg, #172f3b, #0b2225); }
.community-card h3 { margin-bottom: 0; font-size: 28px; }
.community-card .community-stat { position: absolute; right: 28px; bottom: 30px; text-align: right; }
.community-stat strong { display: block; font-family: var(--display); font-size: 27px; font-weight: 400; color: var(--gold); }
.community-stat span { font-size: 9px; color: var(--muted); }
.community-avatars { display: flex; align-items: center; }
.community-avatars span { width: 37px; height: 37px; margin-left: -8px; display: grid; place-items: center; border: 2px solid #17343c; border-radius: 50%; background: #dfeacb; font-size: 16px; }
.community-avatars span:first-child { margin-left: 0; }.community-avatars span:nth-child(2) { background: #bddf98; }.community-avatars span:nth-child(3) { background: #ffda7a; }.community-avatars span:nth-child(4) { background: #83c8b0; }
.community-avatars span:last-child { width: auto; padding: 0 9px; border-radius: 20px; background: var(--green-bright); color: var(--ink); font-size: 9px; font-weight: 900; }
.chain-card { grid-column: span 5; min-height: 320px; padding: 31px; background: radial-gradient(circle at 83% 35%, rgba(83,203,186,.22), transparent 32%), linear-gradient(150deg, #0b3739, #081f23); }
.chain-card h3 { font-size: 26px; margin-top: 24px; }
.chain-card p { width: 72%; }
.chain-orbit { position: absolute; right: 18px; top: 48px; width: 135px; height: 135px; border: 1px dashed rgba(109,240,208,.25); border-radius: 50%; animation: rotate 20s linear infinite; }
.chain-orbit::before, .chain-orbit::after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(155,245,111,.14); border-radius: 50%; }.chain-orbit::after { inset: 45px; background: rgba(115,245,133,.08); }
.chain-orbit span { position: absolute; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #103f45; border: 1px solid rgba(151,255,193,.22); font-family: var(--display); font-size: 8px; }
.chain-orbit span:nth-child(1) { left: 3px; top: 51px; }.chain-orbit span:nth-child(2) { right: 7px; top: 21px; }.chain-orbit span:nth-child(3) { right: 30px; bottom: 4px; }
.contract-card { grid-column: 1 / -1; min-height: 200px; padding: 30px 34px; display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; background: linear-gradient(100deg, #122c2d, #0b2327); }
.contract-card h3 { margin: 10px 0 0; font-size: 25px; }
.contract-icon { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgba(167,255,151,.24); border-radius: 50%; background: rgba(152,255,117,.07); color: var(--green); }
.contract-icon svg { width: 28px; height: 28px; }
.copy-contract { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid rgba(203,255,209,.17); border-radius: 10px; background: rgba(3,21,24,.53); color: rgba(236,249,220,.7); font-family: Consolas, monospace; font-size: 11px; cursor: pointer; transition: .2s; }
.copy-contract:hover { border-color: var(--green); color: var(--green-bright); }
.copy-contract svg { width: 16px; }

.tokenomics { background: radial-gradient(circle at 50% 58%, rgba(77,161,112,.18), transparent 42%), #061b1e; }
.token-bg-mark { position: absolute; left: 50%; top: 105px; transform: translateX(-50%); color: transparent; -webkit-text-stroke: 1px rgba(188,255,207,.055); font-family: var(--display); font-size: clamp(130px, 19vw, 310px); line-height: 1; pointer-events: none; white-space: nowrap; }
.token-layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; max-width: 1080px; margin: 0 auto; }
.token-chart-wrap { position: relative; display: grid; place-items: center; padding: 30px; }
.token-chart { position: relative; width: min(100%, 470px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#8ff36f 0 40%, #ffd35a 40% 65%, #4dd8bc 65% 85%, #5a91e9 85% 95%, #e56b55 95% 100%); box-shadow: 0 0 80px rgba(94,206,107,.12); transform: rotate(-38deg); }
.token-chart::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: #071d20; box-shadow: inset 0 0 55px rgba(0,0,0,.32); }
.token-chart::after { content: ""; position: absolute; inset: -15px; border-radius: 50%; border: 1px dashed rgba(198,255,213,.17); }
.token-chart-inner { position: relative; z-index: 2; transform: rotate(38deg); display: flex; flex-direction: column; align-items: center; }
.token-chart-inner img { width: 74px; height: 74px; margin-bottom: 11px; filter: drop-shadow(0 0 20px rgba(124,255,120,.2)); }
.token-chart-inner strong { font-family: var(--display); font-size: clamp(40px, 5vw, 62px); line-height: 1; color: var(--cream); font-weight: 400; letter-spacing: -.03em; }
.token-chart-inner span { margin-top: 8px; font-size: 10px; letter-spacing: .16em; color: var(--muted); }
.chart-sticker { position: absolute; right: -20px; top: 17%; width: 78px; height: 78px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--gold); color: var(--ink); font-family: var(--display); font-size: 9px; line-height: 1.3; transform: rotate(10deg); box-shadow: 0 12px 25px rgba(0,0,0,.28); }
.token-details { padding-left: 20px; }
.token-legend { border-top: 1px solid var(--line); }
.token-legend > div { display: grid; grid-template-columns: 12px 1fr 70px 55px; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); }
.token-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--color); box-shadow: 0 0 12px color-mix(in srgb, var(--color), transparent 35%); }
.token-legend span { font-size: 13px; }
.token-legend strong { font-family: var(--display); font-size: 14px; font-weight: 400; color: var(--cream); text-align: right; }
.token-legend em { color: var(--muted); font-size: 9px; font-style: normal; text-align: right; }
.token-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 25px; background: var(--line); border: 1px solid var(--line); }
.token-facts div { padding: 16px; background: #0a2426; }
.token-facts span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.token-facts strong { font-size: 12px; color: var(--cream); }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 25px; color: var(--green-bright); font-size: 11px; font-weight: 800; }
.text-link svg { width: 16px; transition: .2s; }
.text-link:hover svg { transform: translateX(4px); }

.roadmap { background: linear-gradient(180deg, #06181c, #092527); }
.roadmap::before { content: ""; position: absolute; left: 5%; right: 5%; top: 55%; height: 1px; background: linear-gradient(90deg, transparent, rgba(170,255,189,.16), transparent); }
.roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.roadmap-card { position: relative; min-height: 430px; padding: 25px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, rgba(13,47,46,.88), rgba(6,25,29,.94)); }
.roadmap-card::after { content: ""; position: absolute; right: -40px; bottom: -80px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(158,255,170,.1); box-shadow: 0 0 0 25px rgba(158,255,170,.025), 0 0 0 50px rgba(158,255,170,.015); }
.roadmap-card.live { border-color: rgba(193,255,114,.55); background: linear-gradient(155deg, #1b4c35, #0b2928); box-shadow: 0 0 35px rgba(108,222,98,.08); }
.roadmap-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 8px; letter-spacing: .12em; color: rgba(216,249,219,.43); }
.roadmap-top em { padding: 5px 9px; border-radius: 999px; background: rgba(201,255,202,.08); color: rgba(226,250,218,.63); font-family: var(--body); font-style: normal; font-size: 8px; letter-spacing: .06em; }
.roadmap-card.active .roadmap-top em { color: var(--green-bright); background: rgba(146,255,106,.09); }.roadmap-card.live .roadmap-top em { background: var(--gold); color: var(--ink); font-weight: 900; }
.phase-icon { position: relative; z-index: 2; width: 72px; height: 72px; margin: 34px 0 25px; display: grid; place-items: center; border: 1px dashed rgba(180,255,198,.27); border-radius: 50%; }
.phase-icon span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(151,255,121,.1); font-family: var(--display); font-size: 14px; color: var(--green); }
.live .phase-icon span { background: var(--green-bright); color: var(--ink); box-shadow: 0 0 25px rgba(152,255,118,.25); }
.roadmap-card h3 { position: relative; z-index: 2; margin: 0 0 22px; font-size: 22px; letter-spacing: -.04em; }
.roadmap-card ul { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; }
.roadmap-card li { position: relative; padding-left: 14px; margin-bottom: 10px; color: var(--muted); font-size: 11px; }
.roadmap-card li::before { content: ""; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: rgba(151,255,111,.6); }
.roadmap-progress { position: absolute; left: 24px; right: 24px; bottom: 20px; height: 3px; border-radius: 99px; background: rgba(213,255,222,.1); overflow: hidden; }
.roadmap-progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); }

.how-to-buy { background: linear-gradient(120deg, #86e968, #55cf7a 55%, #2ca680); color: var(--ink); }
.how-to-buy::before { content: "RIBBIT"; position: absolute; right: -3%; bottom: -16%; font-family: var(--display); font-size: 28vw; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(3,54,37,.12); pointer-events: none; }
.how-layout { display: grid; grid-template-columns: .88fr 1.5fr; gap: 76px; align-items: center; }
.how-intro { position: relative; z-index: 2; }
.how-intro .section-kicker { color: #0d513d; }.how-intro .section-kicker::before { background: #0d513d; box-shadow: none; }
.how-intro h2 span { color: #0b4033; }
.how-intro p { max-width: 430px; margin: 20px 0 28px; color: rgba(3,45,35,.68); font-size: 13px; line-height: 1.9; }
.how-intro .btn-primary { background: #092f29; color: var(--cream); box-shadow: 0 12px 30px rgba(1,50,39,.2); }
.how-intro .btn-primary:hover { background: #0c4237; }
.steps { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.step-card { position: relative; min-height: 145px; padding: 23px 26px 23px 117px; border: 1px solid rgba(3,47,37,.16); border-radius: 17px; background: rgba(244,255,223,.68); backdrop-filter: blur(9px); display: flex; flex-direction: column; justify-content: center; transition: .25s; }
.step-card:hover { background: rgba(248,255,232,.9); transform: translateX(6px); box-shadow: 0 12px 30px rgba(10,70,50,.12); }
.step-number { position: absolute; left: 20px; top: 22px; font-family: var(--display); font-size: 29px; color: rgba(9,71,50,.22); }
.step-icon { position: absolute; left: 79px; top: 50%; transform: translateY(-50%); width: 29px; height: 29px; color: #0b5e43; }
.step-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.03em; }
.step-card p { margin: 0; max-width: 540px; color: rgba(4,45,35,.6); font-size: 11px; line-height: 1.7; }

.faq { background: radial-gradient(circle at 15% 45%, rgba(49,133,104,.19), transparent 30%), #071d20; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }
.faq-heading { position: sticky; top: 40px; }
.faq-heading p { max-width: 390px; margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 25px; list-style: none; padding: 25px 5px; font-size: 16px; font-weight: 700; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex: none; position: relative; width: 24px; height: 24px; border: 1px solid rgba(205,255,218,.2); border-radius: 50%; }
.faq-list summary span::before, .faq-list summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: var(--green); transform: translate(-50%,-50%); transition: .25s; }
.faq-list summary span::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-list details[open] summary { color: var(--green-bright); }
.faq-list details[open] summary span { border-color: rgba(176,255,116,.5); background: rgba(154,255,108,.08); }
.faq-list details[open] summary span::after { transform: translate(-50%,-50%) rotate(0); }
.faq-answer { padding: 0 48px 22px 5px; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }

.community { position: relative; min-height: 720px; padding: 105px 0 0; overflow: hidden; background: linear-gradient(115deg, #0c5a60, #0b3944 55%, #061f27); }
.community::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 45%, rgba(151,255,131,.17), transparent 33%), linear-gradient(180deg, transparent 65%, rgba(3,17,21,.65)); pointer-events: none; }
.community-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.community-bg span { position: absolute; display: block; color: transparent; -webkit-text-stroke: 1px rgba(184,255,206,.08); font-family: var(--display); font-size: 24vw; line-height: 1; white-space: nowrap; }
.community-bg span:first-child { left: -5%; top: 3%; }.community-bg span:last-child { right: -15%; bottom: 2%; -webkit-text-stroke-color: rgba(255,216,91,.06); }
.community-inner { position: relative; z-index: 2; min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 25px; }
.community-frog { position: relative; height: 530px; margin-left: -70px; }
.community-frog::before { content: ""; position: absolute; inset: 4% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(121,255,134,.25), transparent 65%); filter: blur(20px); }
.community-frog img { position: absolute; width: 690px; max-width: none; left: -30px; bottom: -80px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); animation: heroFloat 6s ease-in-out infinite; }
.community-copy { position: relative; z-index: 3; padding-bottom: 40px; }
.community-copy h2 { font-size: clamp(45px, 5vw, 72px); }
.community-copy > p { max-width: 520px; margin: 22px 0 27px; color: rgba(222,245,223,.68); font-size: 13px; line-height: 1.9; }
.community-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.community-actions .btn-ghost { border-color: rgba(230,255,226,.24); }
.community-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; font-size: 9px; color: rgba(219,243,219,.53); }
.community-trust span { display: flex; align-items: center; gap: 7px; }.community-trust i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.marquee-band { position: absolute; z-index: 3; left: -2%; right: -2%; bottom: 0; padding: 13px 0; overflow: hidden; background: var(--gold); color: var(--ink); transform: rotate(-1deg); }
.marquee-band div { width: max-content; font-family: var(--display); font-size: 19px; white-space: nowrap; animation: ticker 25s linear infinite; }

.site-footer { position: relative; padding: 65px 0 30px; background: #041316; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.footer-top > p { margin: 0 0 0 auto; color: var(--muted); font-size: 12px; }
.footer-socials { display: flex; gap: 8px; margin-left: 16px; }
.footer-socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: rgba(236,250,221,.64); transition: .2s; }
.footer-socials a:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
.footer-socials svg { width: 16px; }
.footer-links { display: flex; gap: 29px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.footer-links a { color: rgba(230,244,216,.52); font-size: 10px; transition: .2s; }.footer-links a:hover { color: var(--green); }
.footer-legal { display: flex; justify-content: space-between; gap: 50px; padding-top: 25px; color: rgba(206,230,205,.34); font-size: 8px; line-height: 1.8; }
.footer-legal p { margin: 0; }.footer-legal p:first-child { max-width: 790px; }

.wallet-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.wallet-modal.open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(1, 12, 14, .74); backdrop-filter: blur(12px); }
.wallet-dialog { position: relative; z-index: 2; width: min(100%, 430px); padding: 35px; border: 1px solid rgba(204,255,224,.2); border-radius: 25px; background: linear-gradient(155deg, #0d3942, #071f27); box-shadow: var(--shadow); transform: translateY(12px) scale(.98); transition: transform .25s; }
.wallet-modal.open .wallet-dialog { transform: none; }
.modal-close { position: absolute; top: 17px; right: 17px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; color: var(--muted); }
.modal-close:hover { color: var(--cream); border-color: rgba(206,255,222,.4); }
.modal-close svg { width: 15px; }
.wallet-logo { width: 57px; height: 57px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 50%; background: rgba(3,27,31,.46); }
.wallet-logo img { width: 46px; height: 46px; }
.wallet-dialog h2 { margin: 0 0 5px; font-size: 29px; letter-spacing: -.04em; }
.wallet-dialog > p { margin: 0 0 23px; color: var(--muted); font-size: 11px; }
.wallet-options { display: flex; flex-direction: column; gap: 8px; }
.wallet-options button { min-height: 59px; padding: 0 15px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(207,255,221,.14); border-radius: 12px; background: rgba(3,24,30,.38); cursor: pointer; transition: .2s; }
.wallet-options button:hover { border-color: rgba(160,255,118,.58); background: rgba(148,255,111,.07); transform: translateX(3px); }
.wallet-options strong { font-size: 13px; }.wallet-options button > svg { width: 16px; margin-left: auto; color: var(--muted); }
.wallet-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; font-family: var(--display); font-size: 13px; }
.wallet-icon.fox { background: #f3a24e; color: #4d2610; }.wallet-icon.okx { background: #e9f0ee; color: #101715; }.wallet-icon.wc { background: #5b99f8; color: #fff; }
.wallet-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0 !important; color: rgba(210,240,217,.42) !important; font-size: 8px !important; }.wallet-note svg { width: 13px; color: var(--green); }
.toast { position: fixed; z-index: 1200; left: 50%; bottom: 25px; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 8px; padding: 11px 17px; border: 1px solid rgba(209,255,221,.22); border-radius: 999px; background: #0b3434; color: var(--cream); font-size: 11px; opacity: 0; visibility: hidden; transition: .25s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }.toast svg { width: 15px; color: var(--gold); }

.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js-ready .reveal { opacity: 0; transform: translateY(22px); }
.js-ready .reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }.delay-2 { transition-delay: .16s; }.delay-3 { transition-delay: .24s; }.delay-4 { transition-delay: .32s; }

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes heroFloat { 0%,100% { transform: translateY(0) rotate(-.2deg); } 50% { transform: translateY(-10px) rotate(.2deg); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotateReverse { to { transform: rotate(-360deg); } }
@keyframes scrollDown { 0% { top: -80%; } 70%,100% { top: 110%; } }

@media (max-width: 1180px) {
  :root { --shell: min(100% - 44px, 1120px); }
  .nav-menu { gap: 18px; }
  .hero-shell { grid-template-columns: minmax(0, 1fr) minmax(360px, 400px); gap: 24px; }
  .hero h1 { font-size: clamp(68px, 8vw, 95px); }
  .hero-art { width: 740px; left: -3%; top: 260px; }
  .buy-card { padding-inline: 22px; }
  .feature-copy { width: 57%; }
  .feature-frog { right: -12%; width: 68%; }
  .token-layout { gap: 55px; }
  .roadmap-card { padding-inline: 19px; }.roadmap-progress { left: 19px; right: 19px; }
  .how-layout { gap: 42px; }
  .faq-layout { gap: 60px; }
}

@media (max-width: 980px) {
  .section { padding: 100px 0; }
  .nav-menu { position: absolute; top: 73px; left: 22px; right: 22px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4, 23, 27, .98); box-shadow: var(--shadow); }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 13px 12px; border-bottom: 1px solid rgba(200,255,219,.08); }
  .nav-menu a:last-child { border-bottom: 0; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-actions .social-btn { display: none; }
  .nav-actions { margin-left: 0; }
  .hero { min-height: auto; padding-bottom: 95px; }
  .hero-shell { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { max-width: 730px; padding-top: 45px; }
  .hero-art { position: relative; top: auto; left: auto; width: min(900px, 112%); margin: -160px auto -70px; order: 2; }
  .buy-card { order: 3; width: min(100%, 530px); margin: 0 auto; }
  .hero-bg { background: radial-gradient(circle at 50% 53%, rgba(40,189,143,.22), transparent 35%); }
  .hero::after { height: 100px; }
  .hero-countdown { margin-top: 25px; }
  .scroll-cue { display: none; }
  .proof-inner { flex-direction: column; gap: 22px; }
  .press-logos { width: 100%; gap: 18px; flex-wrap: wrap; justify-content: center; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 42px; }
  .section-heading > p { max-width: 600px; }
  .bento-feature { grid-column: 1 / -1; grid-row: auto; min-height: 570px; }
  .metric-card { grid-column: span 6; }
  .community-card { grid-column: 1 / -1; }
  .chain-card { grid-column: 1 / -1; min-height: 280px; }
  .chain-card p { width: 65%; }
  .contract-card { grid-template-columns: 1fr auto; }
  .contract-icon { display: none; }
  .copy-contract { grid-column: 1 / -1; width: max-content; }
  .token-layout { grid-template-columns: 1fr; gap: 65px; max-width: 620px; }
  .token-details { padding-left: 0; }
  .roadmap-grid { grid-template-columns: repeat(2, 1fr); }
  .how-layout { grid-template-columns: 1fr; gap: 48px; }
  .how-intro { max-width: 650px; }
  .faq-layout { grid-template-columns: 1fr; gap: 45px; }
  .faq-heading { position: relative; top: auto; }
  .community { min-height: auto; padding-top: 80px; }
  .community-inner { grid-template-columns: 1fr; min-height: auto; }
  .community-frog { height: 390px; margin-left: 0; order: 2; }
  .community-frog img { width: 580px; left: 50%; transform: translateX(-50%); bottom: -35px; }
  .community-copy { padding: 20px 0 20px; max-width: 700px; }
  .marquee-band { position: relative; margin-top: 20px; }
  .footer-legal { flex-direction: column; gap: 15px; }
}

@media (max-width: 680px) {
  :root { --shell: calc(100% - 32px); --radius: 18px; }
  body { font-size: 15px; }
  .nav { min-height: 68px; }
  .brand img { width: 39px; height: 39px; }
  .brand-name { font-size: 20px; }
  .brand-cn { display: none; }
  .nav-buy { display: none; }
  .nav-toggle { width: 40px; height: 40px; }
  .nav-menu { top: 62px; left: 16px; right: 16px; }
  .breaking { top: 68px; min-height: 38px; }
  .breaking-label { padding-left: 16px; padding-right: 16px; font-size: 9px; }
  .ticker-track { font-size: 9px; gap: 16px; animation-duration: 20s; }
  .hero { padding-top: 128px; padding-bottom: 76px; }
  .hero-copy { padding-top: 25px; }
  .eyebrow { font-size: 8px; gap: 9px; }
  .hero h1 { font-size: clamp(56px, 16vw, 78px); line-height: .98; margin-bottom: 22px; }
  .hero-lead { font-size: 13px; line-height: 1.8; }
  .hero-lead br { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 9px; }
  .hero-actions .btn { width: 100%; }
  .hero-countdown { align-items: flex-start; flex-direction: column; gap: 12px; }
  .countdown-title { max-width: none; }
  .countdown div { width: clamp(52px, 18vw, 66px); height: 53px; }
  .countdown b { font-size: 18px; }
  .hero-art { width: 132%; left: -16%; margin-top: -80px; margin-bottom: -30px; }
  .art-tag { display: none; }
  .energy-ring { display: none; }
  .buy-card { margin-top: 10px; padding: 21px 17px 17px; border-radius: 22px; }
  .buy-heading h2 { font-size: 22px; }
  .token-sigil { width: 43px; height: 43px; }.token-sigil img { width: 34px; }
  .payment-tab { font-size: 10px; }
  .proof-strip { padding: 28px 0; }
  .press-logos { gap: 15px 20px; }
  .press-logo { font-size: 12px; }
  .section { padding: 82px 0; }
  .section-heading h2, .how-intro h2, .faq-heading h2, .community-copy h2 { font-size: clamp(38px, 11.5vw, 52px); }
  .section-heading { margin-bottom: 34px; }
  .section-heading > p { font-size: 12px; }
  .section-kicker { font-size: 8px; }
  .bento-grid { gap: 10px; }
  .bento-feature { min-height: 560px; padding: 27px 22px; }
  .feature-copy { width: 100%; }
  .feature-copy h3 { font-size: 29px; }
  .feature-copy p { max-width: 84%; }
  .feature-frog { width: 90%; right: -18%; bottom: -2%; }
  .metric-card { grid-column: 1 / -1; min-height: 250px; padding: 25px; }
  .metric-card > p { width: 70%; }
  .metric-lines { width: 38%; }
  .community-card { min-height: 370px; padding: 25px; }
  .community-card h3 { font-size: 25px; }
  .community-stat { position: relative !important; right: auto !important; bottom: auto !important; margin-top: 20px; text-align: left !important; }
  .chain-card { min-height: 350px; padding: 25px; }
  .chain-card p { width: 90%; }
  .chain-orbit { width: 110px; height: 110px; top: 37px; }
  .contract-card { min-height: 240px; padding: 25px; gap: 18px; }
  .contract-card h3 { font-size: 22px; }
  .copy-contract { width: 100%; justify-content: space-between; }
  .token-layout { gap: 45px; }
  .token-chart-wrap { padding: 5px; }
  .token-chart { width: 91%; }
  .token-chart-inner img { width: 55px; height: 55px; }
  .chart-sticker { width: 62px; height: 62px; right: -6px; font-size: 7px; }
  .token-legend > div { grid-template-columns: 10px 1fr 59px 48px; gap: 8px; min-height: 52px; }
  .token-facts { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .roadmap-card { min-height: 390px; padding: 23px; }
  .roadmap-progress { left: 23px; right: 23px; }
  .how-layout { gap: 35px; }
  .step-card { padding: 22px 20px 22px 82px; min-height: 150px; }
  .step-number { left: 17px; font-size: 23px; }.step-icon { left: 52px; width: 24px; }.step-card h3 { font-size: 15px; }.step-card p { font-size: 10px; }
  .faq-list summary { padding: 21px 2px; font-size: 14px; }
  .faq-answer { padding-right: 30px; }
  .community { padding-top: 65px; }
  .community-copy h2 { font-size: clamp(38px, 11vw, 53px); }
  .community-copy > p { font-size: 12px; }
  .community-actions .btn { width: 100%; }
  .community-frog { height: 300px; }
  .community-frog img { width: 480px; bottom: -45px; }
  .marquee-band div { font-size: 15px; }
  .footer-top { flex-wrap: wrap; }
  .footer-top > p { order: 3; width: 100%; margin: 0; }
  .footer-socials { margin-left: auto; }
  .footer-links { gap: 15px; flex-wrap: wrap; }
  .wallet-dialog { padding: 29px 21px; }
  .wallet-dialog h2 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready .reveal { opacity: 1; transform: none; }
}

/* Mobile refinement pass */
@media (max-width: 680px) {
  .nav-toggle {
    display: block;
    background: rgba(186, 255, 117, .08);
    border-color: rgba(186, 255, 117, .42);
    box-shadow: 0 0 18px rgba(151, 245, 111, .08);
  }
  .nav-toggle span { background: var(--green-bright); }
  .section-heading h2 { font-size: clamp(34px, 9.8vw, 46px); letter-spacing: -.06em; }
  .bento-feature {
    min-height: 730px;
    justify-content: flex-start;
    gap: 18px;
  }
  .feature-copy { margin-top: 8px; }
  .feature-frog {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(440px, 118%);
    height: 360px;
    margin: 4px auto -10px;
    flex: none;
  }
  .feature-frog > img { width: 43%; }
  .sticker-one { left: 8%; top: 20%; }
  .sticker-two { right: 4%; bottom: 21%; }
}

/* Keep the breaking-news rail on one line at every width */
.ticker-window { min-width: 0; }
.ticker-track span { flex: none; white-space: nowrap; }
@media (max-width: 680px) {
  .breaking-label { max-width: 126px; overflow: hidden; }
  .ticker-track { animation-duration: 24s; }
}

/* ==== Expanded premium experience ==== */
.cursor-glow {
  position: fixed; z-index: 2; width: 420px; height: 420px; left: -210px; top: -210px; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle, rgba(142,255,112,.08), transparent 66%);
  filter: blur(12px); mix-blend-mode: screen;
}
.site-loader {
  position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #041518; color: rgba(234,249,220,.62); font-family: var(--display); font-size: 10px; letter-spacing: .13em;
  transition: opacity .5s ease, visibility .5s ease;
}
.site-loader.hidden { opacity: 0; visibility: hidden; }
.loader-frog { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(155,245,111,.24); border-radius: 50%; animation: loaderPulse 1.8s ease-in-out infinite; }
.loader-frog::after { content: ""; position: absolute; inset: -12px; border: 1px dashed rgba(155,245,111,.18); border-radius: 50%; animation: rotate 8s linear infinite; }
.loader-frog img { width: 58px; height: 58px; }

.hero { min-height: 1080px; padding-bottom: 105px; }
.hero-shell { min-height: 860px; }
.hero-scanlines {
  position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(231,255,235,.34) 3px 4px);
  mask-image: linear-gradient(90deg, transparent 20%, #000 60%, transparent 100%);
}
.hero-particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--green); filter: blur(.4px); box-shadow: 0 0 15px var(--green); animation: particleFloat 5s ease-in-out infinite; }
.hero-particles i:nth-child(1) { left: 15%; top: 18%; animation-delay: -.5s; }
.hero-particles i:nth-child(2) { left: 81%; top: 31%; animation-delay: -1.8s; background: var(--gold); box-shadow: 0 0 15px var(--gold); }
.hero-particles i:nth-child(3) { left: 68%; top: 12%; animation-delay: -3.1s; }
.hero-particles i:nth-child(4) { left: 27%; top: 71%; animation-delay: -4.3s; background: var(--gold); box-shadow: 0 0 15px var(--gold); }
.hero-particles i:nth-child(5) { left: 91%; top: 64%; animation-delay: -2.2s; }
.hero-particles i:nth-child(6) { left: 48%; top: 83%; animation-delay: -1.1s; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 31px; max-width: 655px; }
.hero-metric {
  position: relative; min-height: 96px; padding: 16px 14px 13px; overflow: hidden; border: 1px solid rgba(197,255,211,.14); border-radius: 13px;
  background: linear-gradient(145deg, rgba(2,30,33,.5), rgba(10,55,54,.2)); backdrop-filter: blur(8px);
}
.hero-metric::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 70px; height: 70px; border: 1px solid rgba(156,255,125,.1); border-radius: 50%; }
.hero-metric .metric-index { position: absolute; top: 10px; right: 10px; color: rgba(227,255,224,.24); font-family: var(--display); font-size: 7px; }
.hero-metric > strong { display: block; font-family: var(--display); font-size: 23px; line-height: 1; font-weight: 400; color: var(--cream); }
.hero-metric > div { display: flex; flex-direction: column; margin-top: 8px; }
.hero-metric b { color: var(--green-bright); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.hero-metric small { margin-top: 2px; color: rgba(216,243,215,.43); font-size: 7px; }

.contract-copy { position: relative; z-index: 2; width: 100%; margin-top: 8px; padding: 5px 3px 0; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; color: rgba(211,242,225,.38); font-family: Consolas, monospace; font-size: 8px; cursor: pointer; transition: .2s; }
.contract-copy:hover { color: var(--green); }
.contract-copy svg { width: 11px; height: 11px; }
.buy-safe { margin-top: 8px; }

.showcase { padding: 105px 0 110px; background: linear-gradient(180deg, #061a1e, #0a292b); }
.showcase::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(180,255,201,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(180,255,201,.04) 1px, transparent 1px); background-size: 90px 90px; mask-image: radial-gradient(circle at center, #000, transparent 74%); }
.showcase-aurora { position: absolute; width: 760px; height: 420px; top: -120px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(93,233,156,.14), transparent 65%); filter: blur(35px); }
.showcase-heading { align-items: center; margin-bottom: 46px; }
.showcase-metrics { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--line); }
.showcase-metric { position: relative; min-height: 220px; padding: 27px 25px 24px; background: linear-gradient(150deg, rgba(10,47,46,.97), rgba(5,28,32,.98)); overflow: hidden; }
.showcase-metric::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(174,255,157,.05), transparent 40%); }
.metric-head { position: relative; display: flex; justify-content: space-between; align-items: center; color: rgba(208,243,210,.35); font-family: var(--display); font-size: 7px; }
.metric-head em { padding: 4px 7px; border: 1px solid rgba(161,255,119,.15); border-radius: 99px; color: var(--green); font-style: normal; font-family: var(--body); font-size: 7px; letter-spacing: .04em; }
.showcase-metric > strong { position: relative; display: block; margin-top: 33px; font-family: var(--display); font-size: clamp(31px, 3.2vw, 46px); line-height: 1; font-weight: 400; letter-spacing: -.025em; color: var(--cream); }
.showcase-metric > p { position: relative; margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.signal-line { position: absolute; left: 25px; right: 25px; bottom: 20px; height: 34px; display: flex; align-items: end; gap: 5px; opacity: .42; }
.signal-line i { flex: 1; height: 30%; border-radius: 2px 2px 0 0; background: linear-gradient(var(--green), transparent); }
.signal-line i:nth-child(2) { height: 67%; }.signal-line i:nth-child(3) { height: 44%; }.signal-line i:nth-child(4) { height: 89%; }.signal-line i:nth-child(5) { height: 58%; }.signal-line i:nth-child(6) { height: 100%; }

.story { padding: 150px 0; background: radial-gradient(circle at 23% 45%, rgba(63,169,107,.2), transparent 34%), linear-gradient(120deg, #082226, #071a1d 70%); }
.story-orbit { position: absolute; width: 700px; height: 700px; left: -120px; top: 50%; transform: translateY(-50%); border: 1px dashed rgba(160,255,175,.09); border-radius: 50%; box-shadow: 0 0 0 80px rgba(160,255,175,.012), 0 0 0 160px rgba(160,255,175,.008); }
.story-layout { position: relative; display: grid; grid-template-columns: 1.06fr .94fr; gap: 90px; align-items: center; }
.story-visual { position: relative; min-height: 650px; }
.story-frame { position: absolute; inset: 0 30px 0 0; overflow: hidden; border: 1px solid rgba(190,255,205,.18); border-radius: 34px; background: radial-gradient(circle at 50% 64%, #145244, #071d22 67%); box-shadow: 0 40px 100px rgba(0,0,0,.32); }
.story-frame::before { content: ""; position: absolute; inset: 17px; z-index: 2; border: 1px solid rgba(204,255,213,.09); border-radius: 24px; pointer-events: none; }
.story-frame img { position: absolute; width: 110%; max-width: none; left: -4%; bottom: -2%; filter: drop-shadow(0 25px 35px rgba(0,0,0,.4)); animation: heroFloat 7s ease-in-out infinite; }
.story-scan { position: absolute; z-index: 3; left: 0; right: 0; top: -10%; height: 15%; background: linear-gradient(180deg, transparent, rgba(155,255,184,.09), transparent); animation: scan 5s linear infinite; }
.story-float-card { position: absolute; z-index: 5; right: 0; top: 65px; width: 170px; padding: 20px; border: 1px solid rgba(206,255,211,.25); border-radius: 18px; background: rgba(6,33,35,.83); backdrop-filter: blur(15px); box-shadow: var(--shadow); transform: rotate(4deg); }
.story-float-card span { display: block; color: rgba(204,244,208,.46); font-family: var(--display); font-size: 7px; letter-spacing: .12em; }
.story-float-card strong { display: block; margin-top: 12px; font-family: var(--display); font-size: 34px; line-height: 1; font-weight: 400; color: var(--gold); }
.story-float-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; line-height: 1.6; }
.story-copy h2 { margin: 0 0 24px; font-size: clamp(45px, 4.7vw, 68px); line-height: 1.12; letter-spacing: -.06em; }
.story-copy > p { margin: 0; color: rgba(221,240,216,.66); font-size: 14px; line-height: 2; }
.story-copy blockquote { position: relative; margin: 29px 0 24px; padding: 20px 22px 20px 27px; border-left: 2px solid var(--green); background: linear-gradient(90deg, rgba(151,255,111,.07), transparent); color: var(--cream); font-size: 16px; font-weight: 700; line-height: 1.75; }
.story-copy blockquote::before { content: "“"; position: absolute; right: 16px; top: -8px; color: rgba(155,255,111,.12); font-family: Georgia, serif; font-size: 88px; }
.story-bullets { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.story-bullets li { display: flex; align-items: center; gap: 9px; color: rgba(220,243,215,.67); font-size: 11px; }
.story-bullets svg { width: 15px; color: var(--green); }
.story-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 31px; border: 1px solid var(--line); background: var(--line); }
.story-stats div { padding: 16px 12px; background: rgba(5,28,31,.72); }
.story-stats strong { display: block; font-family: var(--display); font-size: 20px; line-height: 1; font-weight: 400; color: var(--cream); }
.story-stats span { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; }

.pillars { background: #071d20; }
.pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.pillar-card { position: relative; min-height: 350px; padding: 30px 32px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: linear-gradient(150deg, rgba(13,48,46,.86), rgba(5,26,30,.96)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pillar-card:hover { transform: translateY(-5px); border-color: rgba(174,255,146,.34); box-shadow: 0 25px 55px rgba(0,0,0,.25); }
.pillar-card.accent-gold { background: linear-gradient(145deg, #e6bd4c, #9b7423); color: #142117; }
.pillar-card.accent-blue { background: radial-gradient(circle at 83% 20%, rgba(80,131,230,.24), transparent 31%), linear-gradient(150deg, #0e3444, #081f2c); }
.pillar-card.accent-aqua { background: radial-gradient(circle at 80% 70%, rgba(76,218,188,.19), transparent 35%), linear-gradient(150deg, #0b3c3c, #071f24); }
.pillar-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.pillar-top > span { display: flex; align-items: center; gap: 8px; color: rgba(225,250,219,.59); font-size: 10px; font-weight: 700; }
.pillar-top svg { width: 16px; color: var(--green); }
.accent-gold .pillar-top > span { color: rgba(20,48,35,.62); }.accent-gold .pillar-top svg { color: #133f34; }
.pillar-top em { color: rgba(217,248,211,.24); font-family: var(--display); font-size: 8px; font-style: normal; }
.pillar-value { position: relative; z-index: 2; margin-top: 45px; font-family: var(--display); font-size: clamp(56px, 6.4vw, 92px); line-height: 1; font-weight: 400; letter-spacing: -.04em; color: var(--cream); }
.pillar-value small { margin-left: 5px; font-family: var(--body); font-size: 18px; font-weight: 900; }
.accent-gold .pillar-value, .accent-gold .pillar-value small { color: #0b332b; }
.pillar-card h3 { position: relative; z-index: 2; margin: 25px 0 9px; font-size: 22px; letter-spacing: -.035em; }
.pillar-card > p { position: relative; z-index: 2; max-width: 460px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.accent-gold h3 { color: #0b3027; }.accent-gold > p { color: rgba(8,45,36,.67); }
.pillar-orbit { position: absolute; right: -75px; bottom: -110px; width: 310px; height: 310px; border: 1px solid rgba(170,255,183,.12); border-radius: 50%; }
.pillar-orbit::before { content: ""; position: absolute; inset: 38px; border: 1px dashed rgba(255,216,98,.16); border-radius: 50%; animation: rotate 28s linear infinite; }
.pillar-orbit i { position: absolute; top: 22%; left: 11%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.pillar-orbit i:nth-child(2) { top: 12%; left: 62%; width: 5px; height: 5px; background: var(--green); }.pillar-orbit i:nth-child(3) { top: 69%; left: 27%; width: 4px; height: 4px; background: var(--cream); }
.accent-gold .pillar-orbit { border-color: rgba(10,55,42,.14); }.accent-gold .pillar-orbit::before { border-color: rgba(10,55,42,.18); }

.stages { background: radial-gradient(circle at 50% 40%, rgba(57,168,121,.16), transparent 38%), linear-gradient(180deg, #071d20, #092528); }
.stages-glow { position: absolute; width: 650px; height: 650px; left: 50%; top: 48%; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(102,233,132,.06); filter: blur(90px); }
.stage-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.stage-rail::before { content: ""; position: absolute; left: 5%; right: 5%; top: 91px; height: 1px; background: linear-gradient(90deg, rgba(161,255,133,.4), rgba(161,255,133,.08), transparent); }
.stage-card { position: relative; min-height: 330px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 20px; background: rgba(7,31,33,.7); }
.stage-card.live { border-color: rgba(189,255,113,.5); background: radial-gradient(circle at 50% 30%, rgba(139,255,107,.1), transparent 37%), linear-gradient(155deg, #173e31, #0a2828); box-shadow: 0 20px 55px rgba(0,0,0,.18); }
.stage-card.done { opacity: .66; }
.stage-card.next { border-color: rgba(255,214,92,.2); }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--display); font-size: 7px; letter-spacing: .1em; color: rgba(219,245,215,.37); }
.stage-head em { padding: 4px 8px; border-radius: 99px; background: rgba(185,255,184,.08); color: rgba(229,250,222,.62); font-family: var(--body); font-style: normal; font-size: 7px; }
.stage-card.live .stage-head em { background: var(--gold); color: var(--ink); font-weight: 900; }
.stage-node { position: relative; z-index: 2; width: 68px; height: 68px; margin: 31px 0 25px; display: grid; place-items: center; border: 1px dashed rgba(187,255,196,.24); border-radius: 50%; }
.stage-node span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: rgba(155,245,111,.1); color: var(--green); font-family: var(--display); font-size: 12px; }
.stage-card.live .stage-node span { background: var(--green-bright); color: #10200e; box-shadow: 0 0 24px rgba(171,255,112,.26); }
.stage-card h3 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.04em; }
.stage-card > strong { display: block; color: var(--gold); font-family: var(--display); font-size: 18px; font-weight: 400; }
.stage-card > p { margin: 8px 0 0; color: var(--muted); font-size: 9px; }
.stage-progress { position: absolute; left: 22px; right: 22px; bottom: 18px; height: 3px; border-radius: 99px; background: rgba(218,255,222,.08); overflow: hidden; }
.stage-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-deep, #4fc65e), var(--green)); }
.stage-note { margin: 20px 0 0; text-align: right; color: rgba(208,242,212,.35); font-size: 8px; }

.meme-lab { background: radial-gradient(circle at 30% 60%, rgba(99,172,231,.12), transparent 31%), radial-gradient(circle at 78% 38%, rgba(149,255,121,.1), transparent 33%), #06181c; }
.meme-grid-bg { position: absolute; inset: 0; opacity: .19; background-image: linear-gradient(rgba(194,255,211,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(194,255,211,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at center, #000, transparent 80%); }
.meme-lab-layout { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 75px; align-items: center; }
.meme-preview-wrap { position: relative; padding: 24px; border: 1px solid rgba(198,255,215,.18); border-radius: 29px; background: rgba(3,23,28,.72); box-shadow: 0 40px 100px rgba(0,0,0,.33); }
.meme-preview-wrap::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(205,255,214,.07); border-radius: 20px; pointer-events: none; }
.meme-preview-glow { position: absolute; inset: 15%; border-radius: 50%; background: rgba(151,255,116,.11); filter: blur(55px); }
#meme-canvas { position: relative; z-index: 2; width: 100%; height: auto; border-radius: 15px; background: #071f24; box-shadow: 0 20px 50px rgba(0,0,0,.36); }
.canvas-badge { position: absolute; z-index: 3; right: 38px; bottom: 39px; padding: 5px 9px; border: 1px solid rgba(219,255,220,.15); border-radius: 99px; background: rgba(3,19,23,.62); color: rgba(232,249,221,.48); font-family: var(--display); font-size: 6px; letter-spacing: .08em; }
.meme-controls { display: flex; flex-direction: column; gap: 23px; }
.control-block > label { display: block; margin-bottom: 12px; color: rgba(230,248,220,.64); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.meme-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.meme-preset { position: relative; min-height: 77px; padding: 14px 12px 12px 34px; border: 1px solid rgba(206,255,218,.12); border-radius: 12px; background: rgba(5,29,33,.64); text-align: left; cursor: pointer; transition: .2s; }
.meme-preset:hover, .meme-preset.active { border-color: rgba(173,255,121,.45); background: rgba(139,255,108,.07); }
.meme-preset i { position: absolute; left: 13px; top: 16px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.meme-preset span { display: block; font-size: 11px; font-weight: 800; color: var(--cream); }
.meme-preset small { display: block; margin-top: 4px; color: rgba(210,240,211,.38); font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#meme-caption { width: 100%; min-height: 105px; resize: vertical; padding: 14px 15px 23px; border: 1px solid rgba(201,255,211,.15); border-radius: 13px; outline: 0; background: rgba(4,24,29,.63); color: var(--cream); font-size: 12px; line-height: 1.65; transition: .2s; }
#meme-caption:focus { border-color: rgba(163,255,118,.55); box-shadow: 0 0 0 3px rgba(155,245,111,.06); }
.character-count { display: block; margin-top: -20px; padding-right: 14px; text-align: right; color: rgba(222,244,215,.32); font-size: 8px; }
.character-count b { color: var(--green); font-weight: 700; }
.meme-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meme-actions .btn { width: 100%; }
.meme-tip { display: flex; gap: 10px; padding: 13px 14px; border: 1px solid rgba(255,216,94,.13); border-radius: 11px; background: rgba(255,216,94,.045); }
.meme-tip svg { flex: none; width: 16px; color: var(--gold); }
.meme-tip p { margin: 0; color: rgba(224,239,210,.5); font-size: 8px; line-height: 1.7; }
.meme-tip strong { color: var(--gold); }

.testimonials { background: linear-gradient(180deg, #082226, #06191d); }
.testimonial-orb { position: absolute; width: 650px; height: 650px; right: -260px; top: 0; border-radius: 50%; background: rgba(87,218,148,.1); filter: blur(80px); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.testimonial-card { position: relative; min-height: 310px; padding: 28px 27px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(150deg, rgba(15,49,47,.83), rgba(5,27,31,.95)); overflow: hidden; }
.testimonial-card:nth-child(2) { background: linear-gradient(150deg, rgba(114,88,26,.48), rgba(34,31,21,.94)); border-color: rgba(255,216,94,.18); }
.testimonial-card:nth-child(3) { background: linear-gradient(150deg, rgba(21,59,85,.8), rgba(5,24,31,.95)); }
.quote-mark { position: absolute; right: 18px; top: 3px; color: rgba(156,255,118,.1); font-family: Georgia, serif; font-size: 110px; line-height: 1; }
.testimonial-card > p { position: relative; z-index: 2; margin: 48px 0 32px; color: rgba(239,243,222,.76); font-size: 14px; line-height: 1.9; }
.testimonial-person { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; }
.testimonial-person > span { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(190,255,203,.17); border-radius: 50%; background: rgba(155,245,111,.08); color: var(--green); font-family: var(--display); font-size: 11px; }
.testimonial-person strong { display: block; color: var(--cream); font-size: 11px; }
.testimonial-person small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.testimonial-stars { position: absolute; right: 25px; bottom: 26px; color: var(--gold); font-size: 8px; letter-spacing: .2em; }

.waitlist { padding: 120px 0; background: radial-gradient(circle at 72% 45%, rgba(86,224,155,.17), transparent 35%), linear-gradient(120deg, #092d2c, #071d21); }
.waitlist::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle, rgba(202,255,218,.25) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.waitlist-bg { position: absolute; right: -3%; bottom: -18%; color: transparent; -webkit-text-stroke: 1px rgba(189,255,207,.06); font-family: var(--display); font-size: 23vw; line-height: 1; pointer-events: none; }
.waitlist-layout { position: relative; display: grid; grid-template-columns: 1fr .78fr; gap: 110px; align-items: center; }
.waitlist-copy h2 { margin: 0 0 20px; font-size: clamp(45px, 5vw, 72px); line-height: 1.1; letter-spacing: -.06em; }
.waitlist-copy h2 span { color: var(--green-bright); }
.waitlist-copy > p { max-width: 540px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.waitlist-features { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.waitlist-features span { display: flex; align-items: center; gap: 6px; color: rgba(222,243,214,.56); font-size: 9px; }
.waitlist-features svg { width: 13px; color: var(--green); }
.waitlist-form { position: relative; padding: 30px; border: 1px solid rgba(205,255,218,.2); border-radius: 24px; background: linear-gradient(155deg, rgba(12,52,50,.91), rgba(5,28,32,.97)); box-shadow: 0 35px 80px rgba(0,0,0,.32); }
.form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; color: rgba(215,246,215,.36); font-family: var(--display); font-size: 7px; letter-spacing: .13em; }
.waitlist-form > label { display: block; margin: 15px 0 7px; color: rgba(230,247,221,.6); font-size: 9px; font-weight: 700; }
.form-field { display: flex; align-items: center; gap: 10px; padding: 0 13px; min-height: 48px; border: 1px solid rgba(194,255,208,.15); border-radius: 11px; background: rgba(3,22,27,.62); transition: .2s; }
.form-field:focus-within { border-color: rgba(160,255,117,.52); box-shadow: 0 0 0 3px rgba(155,245,111,.06); }
.form-field svg { flex: none; width: 16px; color: rgba(173,255,145,.55); }
.form-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--cream); font-size: 12px; }
.waitlist-form .btn { width: 100%; margin-top: 22px; }
.form-privacy { margin: 13px 0 0; text-align: center; color: rgba(211,237,211,.31); font-size: 7px; line-height: 1.6; }
.form-success { display: flex; align-items: center; gap: 7px; max-height: 0; margin-top: 0; overflow: hidden; color: var(--green); font-size: 10px; opacity: 0; transition: .3s; }
.form-success.show { max-height: 80px; margin-top: 16px; opacity: 1; }
.form-success svg { width: 16px; }

@keyframes loaderPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155,245,111,.16); } 50% { transform: scale(1.04); box-shadow: 0 0 45px rgba(155,245,111,.12); } }
@keyframes particleFloat { 0%,100% { transform: translate3d(0,0,0); opacity: .35; } 50% { transform: translate3d(12px,-24px,0); opacity: 1; } }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(800%); } }

@media (max-width: 1180px) {
  .nav-menu { gap: 14px; }
  .nav-menu a { font-size: 11px; }
  .hero-metrics { max-width: 590px; }
  .story-layout { gap: 55px; }
  .story-visual { min-height: 580px; }
  .meme-lab-layout { gap: 45px; }
  .waitlist-layout { gap: 65px; }
  .stage-card { padding-inline: 18px; }.stage-progress { left: 18px; right: 18px; }
}

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-shell { min-height: 0; }
  .hero-metrics { max-width: 720px; }
  .showcase-metrics { grid-template-columns: repeat(2, 1fr); }
  .story { padding: 110px 0; }
  .story-layout { grid-template-columns: 1fr; gap: 55px; }
  .story-visual { width: min(100%, 680px); min-height: 560px; margin-inline: auto; }
  .story-copy { max-width: 760px; }
  .pillars-grid { gap: 10px; }
  .pillar-card { min-height: 330px; padding: 27px; }
  .stage-rail { grid-template-columns: repeat(2, 1fr); }
  .stage-rail::before { display: none; }
  .meme-lab-layout { grid-template-columns: 1fr; gap: 50px; }
  .meme-preview-wrap { width: min(100%, 700px); margin-inline: auto; }
  .meme-controls { width: min(100%, 700px); margin-inline: auto; }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .testimonial-card:last-child { grid-column: 1 / -1; min-height: 230px; }
  .waitlist-layout { grid-template-columns: 1fr; gap: 45px; }
  .waitlist-form { width: min(100%, 620px); }
}

@media (max-width: 680px) {
  .hero-metrics { grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 25px; }
  .hero-metric { min-height: 84px; padding: 13px 11px 10px; }
  .hero-metric:last-child { grid-column: 1 / -1; }
  .hero-metric > strong { font-size: 20px; }
  .showcase { padding: 80px 0; }
  .showcase-metrics { grid-template-columns: 1fr 1fr; border-radius: 15px; }
  .showcase-metric { min-height: 190px; padding: 21px 18px; }
  .showcase-metric > strong { margin-top: 27px; font-size: 30px; }
  .signal-line { left: 18px; right: 18px; }
  .story { padding: 82px 0; }
  .story-visual { min-height: 430px; }
  .story-frame { inset: 0 6px; border-radius: 22px; }
  .story-frame img { width: 130%; left: -15%; }
  .story-float-card { width: 135px; top: 28px; right: -2px; padding: 15px; }
  .story-float-card strong { font-size: 26px; }
  .story-copy h2 { font-size: clamp(36px, 10vw, 48px); }
  .story-copy > p { font-size: 12px; }
  .story-copy blockquote { font-size: 13px; }
  .story-stats { grid-template-columns: 1fr; }
  .story-stats div { display: flex; justify-content: space-between; align-items: center; }
  .story-stats span { margin-top: 0; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-card { min-height: 310px; padding: 24px; }
  .pillar-value { margin-top: 37px; font-size: 60px; }
  .stage-rail { grid-template-columns: 1fr; }
  .stage-card { min-height: 300px; padding: 22px; }
  .stage-progress { left: 22px; right: 22px; }
  .stage-note { text-align: left; }
  .meme-preview-wrap { padding: 10px; border-radius: 20px; }
  .canvas-badge { right: 20px; bottom: 22px; }
  .meme-presets { grid-template-columns: 1fr 1fr; }
  .meme-preset { min-height: 72px; padding-left: 29px; }
  .meme-actions { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card:last-child { grid-column: auto; min-height: 310px; }
  .waitlist { padding: 82px 0; }
  .waitlist-layout { gap: 35px; }
  .waitlist-copy h2 { font-size: clamp(38px, 11vw, 51px); }
  .waitlist-form { padding: 23px 18px; border-radius: 18px; }
  .waitlist-features { gap: 10px 15px; }
}

/* Final readability polish */
.section-heading h2, .story-copy h2, .waitlist-copy h2, .community-copy h2 { text-wrap: balance; }
.hero-metric {
  background: linear-gradient(145deg, rgba(4,31,34,.94), rgba(5,27,30,.96));
  backdrop-filter: blur(15px);
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
}
.hero-metric small { color: rgba(216,243,215,.56); }
@media (min-width: 981px) and (max-width: 1250px) {
  .section-heading h2 { font-size: clamp(40px, 4.35vw, 57px); }
}

/* Product suite */
.product-suite { padding: 100px 0 115px; background: radial-gradient(circle at 50% 38%, rgba(77,206,143,.14), transparent 42%), #06191d; }
.product-aurora { position: absolute; width: 780px; height: 380px; left: 50%; top: 90px; transform: translateX(-50%); border-radius: 50%; background: rgba(88,231,153,.08); filter: blur(80px); }
.product-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.product-card { position: relative; min-height: 470px; padding: 32px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(203,255,215,.16); border-radius: 25px; background: radial-gradient(circle at 85% 20%, rgba(155,245,111,.13), transparent 30%), linear-gradient(145deg, #123d35, #071f23); }
.product-card.product-blue { background: radial-gradient(circle at 85% 20%, rgba(71,139,255,.2), transparent 31%), linear-gradient(145deg, #0d3047, #061b27); }
.product-card::before { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(220,255,229,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(220,255,229,.08) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(120deg, #000, transparent 68%); }
.product-card-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; color: rgba(208,245,213,.46); font-family: var(--display); font-size: 7px; letter-spacing: .12em; }
.product-card-top em { color: rgba(214,249,210,.22); font-style: normal; }
.product-card-body { position: relative; z-index: 2; margin-top: 60px; max-width: 78%; }
.product-card-body h3 { margin: 0 0 16px; font-size: clamp(30px, 3.1vw, 45px); line-height: 1.17; letter-spacing: -.055em; }
.product-card-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.product-card-bottom { position: relative; z-index: 2; margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.product-card-bottom > div { display: flex; flex-direction: column; }
.product-card-bottom strong { font-family: var(--display); font-size: 29px; line-height: 1; font-weight: 400; color: var(--gold); }
.product-card-bottom div span { margin-top: 6px; color: var(--muted); font-size: 8px; }
.product-card-bottom a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(190,255,198,.26); color: var(--green-bright); font-size: 10px; font-weight: 800; }
.product-card-bottom a svg { width: 15px; transition: .2s; }
.product-card-bottom a:hover svg { transform: translateX(4px); }
.product-visual { position: absolute; right: -35px; top: 95px; width: 240px; height: 240px; display: grid; place-items: center; border: 1px dashed rgba(193,255,204,.13); border-radius: 50%; animation: rotate 30s linear infinite; }
.product-visual::before { content: ""; position: absolute; inset: 37px; border: 1px solid rgba(255,212,95,.11); border-radius: 50%; }
.product-visual b { width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: rgba(155,245,111,.09); color: var(--green); font-family: var(--display); font-size: 17px; font-weight: 400; animation: rotateReverse 30s linear infinite; }
.product-blue .product-visual b { background: rgba(85,150,255,.1); color: #84b9ff; }
.product-visual i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.product-visual i:nth-child(1) { top: 8%; left: 28%; }.product-visual i:nth-child(2) { right: 12%; bottom: 23%; width: 4px; height: 4px; }.product-visual i:nth-child(3) { left: 9%; bottom: 20%; width: 5px; height: 5px; background: var(--green); }

@media (max-width: 980px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 430px; }
}
@media (max-width: 680px) {
  .product-suite { padding: 80px 0; }
  .product-card { min-height: 460px; padding: 24px; }
  .product-card-body { max-width: 100%; margin-top: 48px; }
  .product-visual { right: -85px; top: 78px; width: 220px; height: 220px; opacity: .52; }
  .product-card-bottom { align-items: flex-start; flex-direction: column; }
}