:root {
  --ink: #102a46;
  --blue: #4db0f7;
  --cream: #fff9e9;
  --yellow: #ffe367;
  --green: #6fb95e;
  --line: rgba(16, 42, 70, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute; z-index: 10; top: 0; left: 0; right: 0;
  min-height: 96px; padding: 18px clamp(22px, 4vw, 72px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font-family: "Baloo 2", cursive; line-height: .86; }
.brand__mark { width: 59px; height: 59px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(10, 38, 57, .28)); }
.brand--header-mark .brand__mark { width: 66px; height: 66px; filter: none; }
.brand__copy { display: grid; gap: 5px; font-size: 14px; letter-spacing: .45px; color: #fff; text-shadow: 0 2px 0 rgba(16, 42, 70, .26); }
.brand__copy strong { font-weight: 800; }
.brand__copy span { color: var(--yellow); font: 800 13px/1 "DM Sans", sans-serif; letter-spacing: .12em; }

.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); color: #fff; font: 800 13px/1 "DM Sans", sans-serif; letter-spacing: .11em; }
.main-nav a { opacity: .88; transition: opacity .2s ease, transform .2s ease; }
.main-nav a:hover { opacity: 1; transform: translateY(-2px); }
.buy-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); box-shadow: 0 4px 0 var(--ink); font: 800 14px/1 "DM Sans", sans-serif; letter-spacing: .1em; transition: transform .18s ease, box-shadow .18s ease; }
.buy-button:hover, .action:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.buy-button--header { justify-self: end; padding: 13px 22px; }
.buy-button--header span { font-size: 17px; }

.hero { position: relative; min-height: max(720px, 100svh); overflow: hidden; display: grid; align-items: center; padding: 150px clamp(22px, 10.2vw, 180px) 83px; }
.hero__art { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__wash { position: absolute; z-index: -2; inset: 0; background: transparent; }
.hero__content { max-width: 560px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .17em; }
.eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 227, 103, .2); }
.hero h1, .section-heading h2 { margin: 0; font-family: "Baloo 2", cursive; font-weight: 800; line-height: .85; letter-spacing: -.045em; }
.hero h1 { font-size: clamp(54px, 6.6vw, 105px); color: #fff; text-shadow: 0 5px 0 rgba(17, 67, 105, .2); }
em { color: var(--yellow); font-style: normal; }
.hero__lede { max-width: 417px; margin: 23px 0 27px; color: rgba(255, 255, 255, .93); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; }
.action-stack { display: grid; gap: 10px; width: min(370px, 100%); }
.action { min-height: 52px; padding: 10px 15px; display: flex; align-items: center; gap: 12px; border: 2px solid var(--ink); border-radius: 10px; background: rgba(255, 255, 255, .96); box-shadow: 0 4px 0 var(--ink); font: 800 13px/1 "DM Sans", sans-serif; letter-spacing: .09em; transition: transform .18s ease, box-shadow .18s ease; }
.action > span { flex: 1; }
.action > i, .action--buy i { font-size: 18px; font-style: normal; }
.action__icon { width: 23px; height: 23px; object-fit: contain; border-radius: 50%; }
.action__icon--x { padding: 4px; border-radius: 50%; background: #111; }
.action--buy { padding: 8px 15px; background: var(--yellow); }
.action--buy > span { flex: initial; font-size: 18px; }
.action--buy b { flex: 1; color: rgba(16, 42, 70, .72); font-size: 9px; letter-spacing: .07em; text-align: right; }
.scroll-cue { position: absolute; right: clamp(22px, 4vw, 72px); bottom: 28px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.scroll-cue span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; font-size: 18px; animation: bob 1.6s infinite ease-in-out; }
@keyframes bob { 50% { transform: translateY(4px); } }

.roadmap { position: relative; padding: 113px clamp(22px, 7vw, 128px) 125px; overflow: hidden; background: var(--cream); }
.roadmap::before { content: "MOO"; position: absolute; right: -25px; top: -75px; color: rgba(107, 190, 97, .12); font: 800 clamp(180px, 25vw, 420px)/1 "Baloo 2", cursive; pointer-events: none; }
.section-heading { position: relative; z-index: 1; max-width: 624px; }
.eyebrow--dark { color: #6e9372; }
.eyebrow--dark span { background: #72be65; box-shadow: 0 0 0 4px rgba(114, 190, 101, .17); }
.section-heading h2 { font-size: clamp(52px, 6vw, 91px); color: var(--ink); }
.section-heading h2 em { color: #75bd63; }
.section-heading > p:last-child { max-width: 365px; margin: 22px 0 0; font-size: 18px; line-height: 1.5; }
.roadmap-grid { position: relative; z-index: 1; max-width: 1250px; margin: 59px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.roadmap-card { min-height: 295px; padding: 23px 22px; display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: 14px; background: #fffdf6; box-shadow: 5px 6px 0 var(--ink); }
.roadmap-card:nth-child(2) { transform: translateY(18px); }
.roadmap-card:nth-child(3) { transform: translateY(36px); }
.roadmap-card:nth-child(4) { transform: translateY(54px); }
.roadmap-card__top { display: flex; justify-content: space-between; align-items: center; color: #7c9a74; font: 800 21px/1 "Baloo 2", cursive; }
.roadmap-card__top b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #d7efce; color: #3d8d47; font: 700 15px/1 "DM Sans", sans-serif; }
.roadmap-card--active { background: #f3ffd9; }
.roadmap-card--active .roadmap-card__top b { color: #fff; background: #5ca7e6; }
.roadmap-card h3 { margin: 30px 0 12px; font: 800 22px/1.05 "Baloo 2", cursive; letter-spacing: .015em; }
.roadmap-card p { margin: 0; color: #49627a; font-size: 14px; line-height: 1.5; }
.roadmap-card small { margin-top: auto; padding-top: 16px; color: #73899d; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.roadmap-card small strong { color: #3c914a; }
.roadmap-card:not(.roadmap-card--complete):not(.roadmap-card--active) small strong { color: #8492a3; }

.chart { position: relative; overflow: hidden; padding: 117px clamp(22px, 7vw, 128px) 112px; background: #102c48; color: #fff; }
.chart__glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.chart__glow--one { width: 550px; height: 550px; top: -300px; left: -180px; background: rgba(80, 185, 246, .3); }
.chart__glow--two { width: 500px; height: 500px; bottom: -370px; right: -130px; background: rgba(255, 218, 94, .16); }
.section-heading--light { margin: 0 auto 45px; text-align: center; }
.section-heading--light .eyebrow { justify-content: center; }
.section-heading--light h2 { color: #fff; }
.section-heading--light h2 em { color: var(--yellow); }
.section-heading--light > p:last-child { margin-inline: auto; color: rgba(255, 255, 255, .75); }
.chart-frame { position: relative; z-index: 1; max-width: 1215px; min-height: 605px; margin: 0 auto; overflow: hidden; border: 2px solid rgba(255, 255, 255, .75); border-radius: 15px; background: #111b2d; box-shadow: 8px 9px 0 rgba(0, 0, 0, .3); }
.chart-frame__bar { height: 46px; padding: 0 17px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .76); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.chart-frame__dot { width: 9px; height: 9px; border-radius: 50%; background: #74ca61; box-shadow: 0 0 10px #74ca61; }
.chart-frame__bar a { margin-left: auto; color: var(--yellow); transition: color .2s ease; }
.chart-frame__bar a:hover { color: #fff; }
#dexscreener-frame { display: block; width: 100%; height: 557px; border: 0; background: #111b2d; }
.chart-placeholder { height: 557px; padding: 28px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .72); text-align: center; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: radial-gradient(circle at center, rgba(77, 176, 247, .22), transparent 58%), #111b2d; }
.chart__note { position: relative; z-index: 1; max-width: 540px; margin: 25px auto 0; color: rgba(255, 255, 255, .57); text-align: center; font-size: 12px; line-height: 1.5; }

.site-footer { min-height: 112px; padding: 18px clamp(22px, 4vw, 72px); display: flex; justify-content: space-between; align-items: center; gap: 22px; background: #0b2135; color: rgba(255, 255, 255, .54); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.brand--footer .brand__mark { width: 48px; height: 48px; filter: none; }
.brand--footer .brand__copy { font-size: 11px; }
.brand--footer .brand__copy span { font-size: 10px; }
.site-footer > a:last-child { color: var(--yellow); }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; padding-inline: 22px; }
  .main-nav { display: none; }
  .hero { padding-left: 7vw; }
  .roadmap-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .roadmap-card:nth-child(n) { transform: none; }
  .roadmap-card:nth-child(even) { transform: translateY(20px); }
}

@media (max-width: 560px) {
  .site-header { min-height: 78px; padding: 11px 16px; }
  .brand__mark { width: 46px; height: 46px; }
  .brand__copy { font-size: 10px; }
  .brand__copy span { font-size: 10px; }
  .buy-button--header { padding: 10px 14px; font-size: 11px; }
  .hero { min-height: 780px; align-items: end; padding: 108px 20px 70px; }
  .hero__art { object-position: 63% center; }
  .hero__wash { background: transparent; }
  .hero h1 { font-size: clamp(51px, 15vw, 74px); }
  .hero__lede { margin-block: 17px 21px; font-size: 16px; }
  .action { min-height: 49px; }
  .action--buy b { font-size: 8px; }
  .scroll-cue { display: none; }
  .roadmap, .chart { padding: 76px 20px; }
  .section-heading h2 { font-size: 52px; }
  .section-heading > p:last-child { margin-top: 17px; font-size: 16px; }
  .roadmap-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .roadmap-card:nth-child(n) { min-height: 240px; transform: none; }
  .chart-frame { min-height: 490px; }
  .chart-frame__bar { padding: 0 12px; font-size: 8px; }
  .chart-frame__bar a { font-size: 8px; }
  #dexscreener-frame, .chart-placeholder { height: 443px; }
  .site-footer { flex-direction: column; padding: 27px 20px; text-align: center; }
}

[hidden] { display: none !important; }