/* Base styles */
:root{--ink:#17191b;--sky:#a9dfff;--pink:#ff92a3;--cream:#fffaf0;--butter:#fbe595;--mint:#d9f6e1;--line:#181818;--font-display:'Luckiest Guy','Arial Black',sans-serif;--font-body:'DM Sans','Trebuchet MS',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:var(--font-body)}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}section{scroll-margin-top:86px}::selection{background:var(--pink);color:var(--ink)}
.site-shell{overflow:hidden}.section-wrap{width:min(100% - 64px,1240px);margin-inline:auto}
.site-header{position:relative;z-index:20;background:#fffdf6;border-bottom:3px solid var(--line)}.header-inner{width:min(100% - 64px,1320px);height:86px;display:flex;align-items:center;justify-content:space-between;gap:28px;margin:auto}.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:25px;letter-spacing:.015em;white-space:nowrap;line-height:1}.brand-mark{width:50px;height:50px;display:grid;place-items:center;background:var(--sky);border:2.5px solid var(--ink);border-radius:50%;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}.brand-mark img{width:50px;height:50px;object-fit:cover;transform:scale(1.14) translateY(2px)}.brand-dot{color:#ed697f}.main-nav{display:flex;align-items:center;gap:7px;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:5px;box-shadow:4px 4px 0 var(--ink)}.main-nav a{font-size:13px;font-weight:800;line-height:1;padding:12px 18px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}.main-nav a:hover,.main-nav a.active{background:var(--pink)}.header-buy,.chart-out-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-weight:800;font-size:13px;border:2.5px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);background:var(--butter);padding:10px 15px;transition:transform .2s,box-shadow .2s}.header-buy:hover,.chart-out-link:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.header-buy img{width:24px;height:24px;object-fit:contain}
.hero{position:relative;background:radial-gradient(circle at 81% 16%,#cff1ff 0,#b9e8ff 22%,transparent 52%),linear-gradient(125deg,#93d0f4 0%,#c7edff 55%,#a6dfff 100%);border-bottom:3px solid var(--ink)}.hero:before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:radial-gradient(#fff 1.5px,transparent 1.5px);background-size:27px 27px;mask-image:linear-gradient(90deg,transparent,black)}.hero-inner{position:relative;width:min(100% - 64px,1320px);min-height:650px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;margin:auto}.hero-copy{position:relative;z-index:3;padding:56px 0 70px}.eyebrow,.section-kicker{font-size:12px;font-weight:800;letter-spacing:.17em}.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 27px;padding:11px 15px 10px;border:2px solid var(--ink);border-radius:999px;background:#fffdf4;box-shadow:4px 4px 0 var(--ink)}.eyebrow-spark{font-size:16px;line-height:0;color:#f28091}.hero h1{font-family:var(--font-display);font-size:clamp(72px,7.7vw,126px);font-weight:400;line-height:.93;letter-spacing:.006em;margin:0;text-shadow:5px 6px 0 #fffdf1}.hero h1 span:not(.heading-bang){color:#f87d95;-webkit-text-stroke:2.5px var(--ink);text-shadow:5px 6px 0 var(--ink)}.hero h1 .heading-bang{color:#f87d95}.hero-lede{font-size:17px;font-weight:600;line-height:1.55;max-width:495px;margin:24px 0 20px}.ticker-line{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:12px;letter-spacing:.07em;background:#fff;border:2px solid var(--ink);border-radius:7px;padding:8px 11px;box-shadow:3px 3px 0 var(--ink)}.ticker-line strong{font-size:13px;color:#e5627a}.ticker-pulse{width:8px;height:8px;border-radius:50%;background:#85d865;box-shadow:0 0 0 3px #dff7d4}.hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,215px));gap:12px;margin-top:28px}.action{min-height:58px;display:flex;align-items:center;gap:11px;padding:9px 14px;border:2.5px solid var(--ink);border-radius:13px;box-shadow:5px 5px 0 var(--ink);font-family:var(--font-display);font-size:19px;letter-spacing:.005em;transition:transform .2s,box-shadow .2s,background .2s}.action:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}.action img{width:34px;height:34px;object-fit:contain;flex:none}.action .action-icon{width:34px;height:34px;display:grid;place-items:center;flex:none}.action .action-icon img{width:25px;height:25px}.action-arrow{font-family:var(--font-body);font-weight:800;font-size:18px;margin-left:auto}.action-buy{background:var(--pink)}.action-x{background:#fffdf5}.action-dex{background:var(--butter);font-size:17px}.action-telegram{background:#d8f6ff}.hero-aside{font-size:10px;font-weight:800;letter-spacing:.16em;margin:30px 0 0}.hero-visual{height:100%;min-height:650px;position:relative;display:grid;place-items:end center}.visual-halo{position:absolute;width:min(95%,620px);aspect-ratio:1;border-radius:50%;top:5%;left:10%;background:#fff7d6;border:3px solid #17191b;box-shadow:16px 14px 0 #f2a0ad;transform:rotate(-8deg)}.visual-halo:after{content:"";position:absolute;inset:6%;border:2px dashed #17191b;border-radius:50%;opacity:.4}.hero-cow{position:relative;z-index:2;width:min(112%,690px);max-width:none;align-self:end;margin-bottom:62px;filter:drop-shadow(9px 13px 0 rgba(16,23,25,.16));animation:bob 4s ease-in-out infinite}.cow-ground{position:absolute;bottom:49px;left:12%;right:8%;height:38px;background:#3c789b7d;border-radius:50%;filter:blur(7px)}.cow-orbit-label{position:absolute;z-index:3;top:12%;right:0;width:110px;height:110px;display:grid;place-items:center;text-align:center;border:3px solid var(--ink);border-radius:50%;background:var(--pink);font-family:var(--font-display);font-size:20px;line-height:.95;transform:rotate(13deg);box-shadow:6px 6px 0 var(--ink)}.visual-star{position:absolute;z-index:3;line-height:1;color:#ff8298;-webkit-text-stroke:2px var(--ink)}.visual-star-one{left:2%;top:18%;font-size:47px;transform:rotate(-15deg)}.visual-star-two{right:4%;bottom:15%;font-size:45px;color:#fff8db}.visual-star-three{left:5%;bottom:25%;font-size:27px;color:#fff8db}.hero-bottom{position:relative;z-index:4;display:flex;justify-content:center;align-items:center;gap:40px;overflow:hidden;height:53px;background:var(--pink);border-top:3px solid var(--ink);font-family:var(--font-display);font-size:22px;white-space:nowrap;word-spacing:2px}.hero-bottom span:nth-child(even){font-family:var(--font-body);font-size:25px}
.roadmap{padding-top:108px;padding-bottom:94px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}.section-kicker{margin:0 0 14px;color:#cf6078}.section-heading h2{font-family:var(--font-display);font-weight:400;font-size:clamp(46px,5.8vw,78px);line-height:1;letter-spacing:.01em;margin:0}.section-heading h2 span{color:#fa8197;-webkit-text-stroke:1.5px var(--ink)}.section-heading>p{max-width:340px;font-size:16px;font-weight:600;line-height:1.55;margin:0 0 7px}.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.roadmap-card{position:relative;min-height:360px;display:flex;flex-direction:column;padding:31px;border:3px solid var(--ink);border-radius:24px;background:#b9e8fa;box-shadow:8px 9px 0 var(--ink);overflow:hidden;transition:transform .22s,box-shadow .22s}.roadmap-card:hover{transform:translateY(-6px);box-shadow:8px 15px 0 var(--ink)}.roadmap-card-pink{background:#ffc5ce}.roadmap-card-yellow{background:#fce8a3}.roadmap-number{font-family:var(--font-display);font-size:72px;line-height:1;-webkit-text-stroke:2px var(--ink);color:#fffdf5;text-shadow:4px 4px 0 var(--ink)}.roadmap-doodle{position:absolute;right:28px;top:25px;font-size:46px;color:#fffdf5;-webkit-text-stroke:2px var(--ink);transform:rotate(-12deg)}.roadmap-card .phase{font-size:11px;font-weight:800;letter-spacing:.18em;margin:43px 0 8px}.roadmap-card h3{font-family:var(--font-display);font-size:33px;font-weight:400;line-height:1;margin:0 0 10px}.roadmap-card>p:not(.phase){font-size:15px;font-weight:600;line-height:1.5;margin:0 0 23px}.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--ink);padding-top:17px;font-size:11px;letter-spacing:.1em;font-weight:800}.card-foot span{font-size:20px;line-height:1}.roadmap-note{text-align:center;font-family:var(--font-display);font-size:23px;letter-spacing:.02em;margin-top:48px}.roadmap-note span{color:#ef8197;margin:0 15px}
.chart-section{padding:100px 0 95px;background:#e7f8ff;border-top:3px solid var(--ink)}.chart-heading{margin-bottom:35px}.chart-out-link{align-self:end;background:var(--butter);margin-bottom:5px;padding:10px 15px;font-size:12px;letter-spacing:.06em}.chart-out-link img{width:25px;height:25px}.chart-frame{border:3px solid var(--ink);border-radius:20px;overflow:hidden;background:#17191b;box-shadow:10px 11px 0 var(--ink)}.chart-toolbar{height:56px;display:flex;align-items:center;gap:20px;padding:0 20px;background:#fffdf5;border-bottom:3px solid var(--ink);font-size:12px;letter-spacing:.07em}.window-dots{display:flex;gap:7px}.window-dots i{display:block;width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:var(--pink)}.window-dots i:nth-child(2){background:var(--butter)}.window-dots i:nth-child(3){background:#9ee4c6}.toolbar-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#deefdc;border:2px solid var(--ink);border-radius:999px;padding:5px 9px;font-size:10px}.toolbar-live i{width:7px;height:7px;border-radius:50%;background:#61c750}.chart-body{height:520px;position:relative}.dex-iframe{display:block;width:100%;height:100%;border:0}.chart-empty{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:#fffdf5;background:radial-gradient(circle at 50% 60%,#323d43 0,#1b242b 55%,#141a20 100%);overflow:hidden}.chart-empty:before{content:"";position:absolute;inset:0;opacity:.07;background:linear-gradient(to right,#fff 1px,transparent 1px),linear-gradient(to bottom,#fff 1px,transparent 1px);background-size:58px 58px}.chart-empty-icon{z-index:1;width:100px;height:100px;display:grid;place-items:center;background:var(--butter);border:3px solid #fff;border-radius:27px;box-shadow:7px 7px 0 var(--pink);transform:rotate(-8deg);margin-bottom:25px}.chart-empty-icon img{width:74px;height:74px;object-fit:contain}.chart-empty h3{position:relative;z-index:1;font-family:var(--font-display);font-size:clamp(32px,4vw,52px);font-weight:400;letter-spacing:.02em;margin:0 0 6px}.chart-empty p{position:relative;z-index:1;font-size:15px;font-weight:600;color:#d5e1e5;margin:0;max-width:420px}.chart-line-art{position:absolute;inset:auto 0 5% 0;width:100%;height:40%;opacity:.3}.chart-line-art svg{width:100%;height:100%}.chart-line-art path{fill:none;stroke:#b9e593;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.chart-disclaimer{font-size:12px;font-weight:600;opacity:.65;margin:27px 3px 0}.site-footer{background:#191c20;color:#fffdf5}.footer-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;font-weight:800;letter-spacing:.1em}.site-footer a{text-decoration:underline;text-underline-offset:4px}.toast{position:fixed;z-index:99;bottom:25px;left:50%;max-width:calc(100% - 32px);padding:13px 18px;border:2px solid var(--ink);border-radius:12px;background:#fffdf5;box-shadow:5px 5px 0 var(--ink);font-weight:800;font-size:13px;white-space:nowrap;opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@media(max-width:1100px){.header-inner{width:min(100% - 40px,1320px)}.hero-inner{width:min(100% - 40px,1320px)}.hero h1{font-size:clamp(65px,7.7vw,104px)}.hero-cow{width:min(125%,650px)}.visual-halo{left:3%;width:100%}.cow-orbit-label{right:-3%;top:9%;width:90px;height:90px;font-size:17px}.section-wrap{width:min(100% - 40px,1240px)}.brand{font-size:20px}.brand-mark{width:43px;height:43px}.main-nav a{padding:11px 12px}.header-buy span:nth-child(2){display:none}}
@media(max-width:760px){section{scroll-margin-top:122px}.header-inner{height:auto;min-height:116px;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:9px 0 11px}.brand{grid-column:1;grid-row:1}.header-buy{grid-column:2;grid-row:1}.header-buy span:nth-child(2){display:inline}.main-nav{grid-column:1 / -1;grid-row:2;justify-content:center;justify-self:stretch;margin-top:7px;box-shadow:3px 3px 0 var(--ink)}.main-nav a{flex:1;text-align:center}.hero-inner{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:58px 0 15px}.hero h1{font-size:clamp(70px,14vw,112px)}.hero-lede{max-width:580px}.hero-visual{min-height:510px;height:510px;margin:0 auto;width:min(100%,600px)}.hero-cow{width:min(112%,600px);margin-bottom:36px}.visual-halo{left:8%;top:0;width:84%}.cow-orbit-label{right:0;top:8%}.visual-star-one{left:5%}.roadmap{padding-top:75px;padding-bottom:74px}.section-heading{align-items:start;flex-direction:column;gap:14px}.roadmap-grid{grid-template-columns:1fr;gap:17px}.roadmap-card{min-height:300px}.roadmap-card .phase{margin-top:25px}.roadmap-note{line-height:1.2}.chart-section{padding:75px 0 70px}.chart-heading{gap:22px}.chart-out-link{align-self:start}.chart-body{height:470px}}
@media(max-width:470px){.header-inner,.hero-inner,.section-wrap{width:calc(100% - 32px)}.brand{font-size:19px}.brand-mark{width:40px;height:40px}.brand-mark img{width:40px;height:40px}.header-buy{padding:7px 10px;font-size:11px;gap:4px}.header-buy img{width:19px;height:19px}.header-buy span:nth-child(2){display:none}.main-nav a{font-size:12px;padding:10px 9px}.hero-copy{padding-top:43px}.eyebrow{font-size:9px;letter-spacing:.12em;gap:5px;margin-bottom:26px}.hero h1{font-size:clamp(61px,15.5vw,82px);text-shadow:3px 4px 0 #fffdf1}.hero h1 span:not(.heading-bang){text-shadow:3px 4px 0 var(--ink);-webkit-text-stroke:1.7px var(--ink)}.hero-lede{font-size:15px;margin-top:20px}.hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.action{font-size:16px;gap:5px;padding:8px 9px;min-height:56px;box-shadow:4px 4px 0 var(--ink)}.action img,.action .action-icon{width:29px;height:29px}.action .action-icon img{width:21px;height:21px}.action-dex{font-size:12px}.action-telegram{font-size:14px}.action-x{font-size:13px}.action-arrow{font-size:14px}.hero-aside{font-size:9px;line-height:1.5}.hero-visual{height:370px;min-height:370px;width:calc(100% + 20px);margin-left:-10px}.hero-cow{width:107%;margin-bottom:25px}.visual-halo{top:2%;left:5%;width:90%}.cow-orbit-label{width:70px;height:70px;font-size:13px;right:4%;top:3%}.cow-ground{bottom:16px}.visual-star-one{font-size:31px}.visual-star-two{font-size:31px}.hero-bottom{font-size:16px;height:42px;gap:20px}.section-heading h2{font-size:clamp(45px,12vw,64px)}.section-heading>p{font-size:14px}.roadmap-card{padding:25px;min-height:315px}.roadmap-number{font-size:61px}.roadmap-card h3{font-size:30px}.roadmap-note{font-size:19px}.roadmap-note span{margin:0 4px}.chart-out-link{font-size:11px}.chart-toolbar{gap:8px;padding:0 10px;font-size:9px}.window-dots{gap:4px}.window-dots i{width:9px;height:9px}.toolbar-live{font-size:9px}.chart-body{height:390px}.chart-empty-icon{width:82px;height:82px}.chart-empty-icon img{width:59px;height:59px}.chart-empty h3{font-size:30px}.chart-empty p{font-size:13px}.footer-inner{min-height:78px;font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-cow{animation:none}.action,.header-buy,.chart-out-link,.roadmap-card,.toast{transition:none}}


/* Hero */
/* The first section keeps the original sky backdrop and adds a playful
   poster composition around the supplied cow. */
.hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 81% 16%, #cff1ff 0, #b9e8ff 22%, transparent 52%),
    linear-gradient(125deg, #93d0f4 0%, #c7edff 55%, #a6dfff 100%);
}

.hero-inner {
  min-height: 710px;
  grid-template-columns: 51% 49%;
}

.hero-copy {
  padding: 64px 0 74px;
}

.hero-copy::before {
  content: "✳";
  position: absolute;
  top: 5%;
  right: 12%;
  color: #ff98ad;
  font-size: 66px;
  line-height: 1;
  transform: rotate(-14deg);
  opacity: .75;
}

.hero h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(70px, 8vw, 128px);
  line-height: .9;
  text-shadow: 5px 6px 0 #fffdf1;
}

.hero h1 span:not(.heading-bang) {
  color: #f87d95;
  -webkit-text-stroke: 2.5px var(--ink);
  text-shadow: 5px 6px 0 var(--ink);
}

.hero h1 .heading-bang {
  color: #f87d95;
}

.hero-lede {
  color: var(--ink);
  max-width: 475px;
  margin-top: 30px;
}

.ticker-line {
  color: var(--ink);
  background: #d6f3ac;
  border-radius: 9px;
  box-shadow: 5px 5px 0 #0b1721;
  transform: rotate(-2deg);
}

.ticker-line strong {
  color: #b83961;
}

.hero-actions {
  column-gap: 18px;
  row-gap: 19px;
  margin-top: 34px;
}

.action {
  color: var(--ink);
  min-height: 66px;
  border-width: 3px;
  border-radius: 15px;
  box-shadow: 6px 7px 0 #0b1721;
  transition: transform .2s, box-shadow .2s, rotate .2s;
}

.action-buy { rotate: -3deg; background: #ff96a9; }
.action-x { rotate: 2deg; background: #fffdf5; }
.action-dex { rotate: 2deg; background: #ffe38b; }
.action-telegram { rotate: -2deg; background: #c4edff; }

.action:hover {
  transform: translate(3px, 3px) scale(1.035);
  box-shadow: 3px 4px 0 #0b1721;
}

.hero-visual {
  min-height: 710px;
  isolation: isolate;
}

.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 11% 7% 14% 9%;
  background: #a7e3fb;
  border: 4px solid #101820;
  border-radius: 39px;
  box-shadow: 14px 16px 0 #ff92a7, 17px 19px 0 #101820;
  transform: rotate(7deg);
}

.visual-halo {
  z-index: -1;
  top: 11%;
  left: 11%;
  width: min(84%, 570px);
  border: 3px solid #17212b;
  background: repeating-conic-gradient(from -9deg, #fff4d3 0 15deg, #ffe5ac 15deg 30deg);
  box-shadow: none;
  transform: rotate(-8deg);
}

.visual-halo::after {
  inset: 10%;
  border: 2px dashed #151b20;
  opacity: .45;
}

.hero-cow {
  width: min(110%, 690px);
  margin-bottom: 48px;
  filter: drop-shadow(10px 12px 0 rgba(16, 24, 32, .18));
}

.cow-ground {
  bottom: 38px;
  background: #11283c78;
}

.visual-star-one {
  top: 11%;
  left: 1%;
  color: #ffe48c;
  font-size: 58px;
  -webkit-text-stroke: 2px #131c24;
  transform: rotate(-15deg);
}

.visual-star-two {
  right: -1%;
  bottom: 19%;
  color: #ff9aab;
  font-size: 54px;
  -webkit-text-stroke: 2px #131c24;
}

.visual-star-three {
  left: 3%;
  bottom: 21%;
  color: #fff2c9;
  font-size: 34px;
  -webkit-text-stroke: 2px #131c24;
}

.hero-bottom {
  height: 59px;
  color: #151b20;
  background: var(--pink);
}

@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(65px, 7.7vw, 102px); }
  .hero-visual::before { inset: 12% 5% 15% 7%; }
  .visual-halo { left: 7%; width: 91%; }
}

@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 54px 0 14px; }
  .hero-copy::before { top: 5%; right: 8%; font-size: 53px; }
  .hero h1 { font-size: clamp(70px, 14vw, 108px); }
  .hero-visual { min-height: 510px; height: 510px; }
  .hero-visual::before { inset: 5% 9% 14% 9%; }
  .visual-halo { top: 3%; left: 10%; width: 80%; }
  .hero-cow { width: min(110%, 600px); margin-bottom: 25px; }
  .cow-ground { bottom: 18px; }
  .hero-bottom { height: 49px; }
}

@media (max-width: 470px) {
  .hero-copy { padding-top: 38px; }
  .hero-copy::before { top: 2%; right: 5%; font-size: 38px; }
  .hero h1 { font-size: clamp(61px, 15.5vw, 82px); text-shadow: 3px 4px 0 #fffdf1; }
  .hero h1 span:not(.heading-bang) { -webkit-text-stroke: 1.7px var(--ink); text-shadow: 3px 4px 0 var(--ink); }
  .hero-lede { margin-top: 22px; }
  .hero-actions { gap: 13px 11px; margin-top: 29px; }
  .action { min-height: 60px; box-shadow: 5px 5px 0 #0b1721; }
  .hero-visual { width: calc(100% + 20px); min-height: 395px; height: 395px; }
  .hero-visual::before { inset: 5% 8% 16% 10%; border-radius: 27px; box-shadow: 9px 11px 0 #ff92a7, 11px 13px 0 #101820; }
  .visual-halo { top: 3%; left: 10%; width: 80%; }
  .hero-cow { width: 100%; margin-bottom: 27px; }
  .cow-ground { bottom: 13px; }
  .visual-star-one { left: 1%; top: 12%; font-size: 38px; }
  .visual-star-two { right: 1%; bottom: 18%; font-size: 34px; }
  .visual-star-three { left: 4%; bottom: 20%; font-size: 25px; }
  .hero-bottom { height: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  .action { transition: none; }
}


/* Sticky header and scrollbar */
/* Keep the header in view while the page scrolls. */
.site-shell {
  overflow: clip;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
}

/* Hide the browser scrollbar without disabling scrolling. */
html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


/* Section transitions */
/* Section transition overlay. */
main > section { min-height: 100svh; }
.hero .hero-inner { min-height: max(710px, calc(100svh - 62px)); }
.udder-transition {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.udder-transition.is-running {
  visibility: visible;
}

.udder-transition__wipe {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 27%, #d5f3ff, transparent 40%),
    linear-gradient(115deg, #9dd6f7, #c7edff);
  border-top: 4px solid #17191b;
  border-bottom: 4px solid #17191b;
  transform: translateX(-102%);
}

.udder-transition__wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(#fff 1.5px, transparent 1.5px);
  background-size: 23px 23px;
}

.udder-transition__runner {
  position: absolute;
  top: 53%;
  left: 0;
  width: clamp(160px, 20vw, 265px);
  transform: translate3d(-140%, -50%, 0);
  will-change: transform;
}

.udder-transition__cow {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  transform-origin: 48% 87%;
  filter: drop-shadow(9px 12px 0 #1b283329);
}

.udder-transition__speed {
  position: absolute;
  z-index: 1;
  top: 37%;
  right: 88%;
  width: 76%;
  height: 48%;
  transform: rotate(-6deg);
  background:
    linear-gradient(#17191b, #17191b) 30% 12% / 58% 3px no-repeat,
    linear-gradient(#17191b, #17191b) 0 45% / 79% 3px no-repeat,
    linear-gradient(#17191b, #17191b) 26% 79% / 52% 3px no-repeat;
  opacity: .72;
}

.udder-transition__dust {
  position: absolute;
  z-index: 1;
  left: 13%;
  bottom: 0;
  width: 17px;
  height: 17px;
  border: 3px solid #17191b;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: -24px 7px 0 -3px #fffaf0, -47px 10px 0 -6px #fffaf0;
}

.udder-transition.is-running .udder-transition__wipe {
  animation: udder-wipe 950ms ease-in-out both;
}

.udder-transition.is-running .udder-transition__runner {
  animation: udder-cross 950ms linear both;
}

.udder-transition.is-running .udder-transition__cow {
  animation: udder-run 130ms ease-in-out infinite alternate;
}

.udder-transition.is-running .udder-transition__dust {
  animation: udder-dust 130ms ease-in-out infinite alternate;
}

.udder-transition-instant { scroll-behavior: auto !important; }

@keyframes udder-wipe {
  0% { transform: translateX(-102%); }
  43%, 57% { transform: translateX(0); }
  100% { transform: translateX(102%); }
}

@keyframes udder-cross {
  0% { transform: translate3d(-140%, -50%, 0); }
  100% { transform: translate3d(calc(100vw + 40%), -50%, 0); }
}

@keyframes udder-run {
  from { transform: translateY(8px) rotate(-4deg) scaleX(.98); }
  to { transform: translateY(-10px) rotate(4deg) scaleX(1.02); }
}

@keyframes udder-dust {
  from { transform: translateY(0) scale(1); opacity: .8; }
  to { transform: translateY(8px) scale(.6); opacity: .25; }
}

@media (max-width: 600px) {
  .udder-transition__runner { top: 51%; width: 155px; }
  .udder-transition__speed { height: 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .udder-transition { display: none; }
}


/* Viewport layout and farm artwork */
/* The hero and sticky header fill exactly one viewport. */
:root {
  --site-header-height: 89px;
  --hero-ribbon-height: 59px;
}

.hero {
  height: calc(100svh - var(--site-header-height));
  min-height: 0;
  overflow: hidden;
}

.hero .hero-inner {
  height: calc(100% - var(--hero-ribbon-height));
  min-height: 0;
}

.hero-copy {
  padding: clamp(16px, 4svh, 48px) 0;
}

.hero h1 {
  font-size: clamp(54px, min(7.2vw, 14svh), 116px);
}

.hero-lede {
  margin-top: clamp(10px, 2svh, 24px);
}

.hero-actions {
  margin-top: clamp(14px, 2.5svh, 26px);
  row-gap: clamp(8px, 1.5svh, 16px);
}

.action {
  min-height: clamp(48px, 8svh, 66px);
}

.hero-visual {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.hero-cow {
  width: 100%;
  height: calc(100% - 24px);
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 12px;
  object-fit: contain;
  object-position: center bottom;
}

/* Keep the first section focused on the character. */
.hero-copy::before,
.hero::after,
.hero-visual::after {
  content: none;
}

.roadmap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(120px, 13svh, 150px);
}

.farm-clouds {
  position: absolute;
  z-index: 0;
  top: calc(var(--site-header-height) + 6px);
  right: 0;
  width: clamp(180px, 22vw, 300px);
  height: auto;
  pointer-events: none;
}

.roadmap .section-heading {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.roadmap .section-heading > p {
  max-width: 640px;
  margin: 0;
  text-align: center;
}

.roadmap::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -42px;
  width: clamp(160px, 24vw, 315px);
  aspect-ratio: 2;
  background: url("assets/pasture-fence-v1.png") center / contain no-repeat;
  pointer-events: none;
}

.roadmap::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(135px, 16vw, 205px);
  aspect-ratio: 1;
  bottom: 0;
  right: -12px;
  background: url("assets/farm-barn-v1.png") center bottom / contain no-repeat;
  pointer-events: none;
}

.roadmap > .section-heading,
.roadmap > .roadmap-grid,
.roadmap > .roadmap-note {
  position: relative;
  z-index: 1;
}

.roadmap-doodle,
.roadmap-note > span { display: none; }

.chart-section {
  position: relative;
  overflow: hidden;
  scroll-margin-top: var(--site-header-height);
  height: calc(100svh - var(--site-header-height));
  min-height: 0;
  padding: 98px 0 0;
}

.chart-section::before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: clamp(10px, 2vw, 28px);
  width: clamp(150px, 15vw, 190px);
  aspect-ratio: 1;
  background: url("assets/milk-pail-v1.png") center bottom / contain no-repeat;
  pointer-events: none;
}

.chart-section::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: clamp(10px, 2vw, 28px);
  bottom: 0;
  width: clamp(220px, 25vw, 320px);
  aspect-ratio: 2;
  background: url("assets/pasture-bushes-v1.png") center bottom / contain no-repeat;
  pointer-events: none;
}

.chart-section > .section-wrap {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 145px;
}

.chart-heading {
  flex: none;
  margin-bottom: 18px;
}

.chart-frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.chart-toolbar {
  height: 52px;
  flex: 0 0 52px;
}

.chart-body {
  height: auto;
  flex: 1;
  min-height: 0;
}

.chart-disclaimer {
  flex: none;
  margin-top: 12px;
}

.chart-section > .farm-clouds {
  left: 12px;
  right: auto;
  width: 210px;
  top: 5px;
}

@media (max-width: 760px) {
  :root {
    --site-header-height: 119px;
    --hero-ribbon-height: 49px;
  }

  .hero .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
  }

  .hero-copy {
    padding: clamp(10px, 2svh, 22px) 0 2px;
  }

  .hero-copy::before {
    top: 2px;
    right: 1%;
    font-size: 30px;
  }

  .hero h1 {
    font-size: clamp(47px, min(13vw, 8.8svh), 75px);
    line-height: .84;
  }

  .hero-lede {
    max-width: 100%;
    margin: 9px 0 8px;
    font-size: clamp(12px, 1.8svh, 15px);
    line-height: 1.35;
  }

  .ticker-line {
    padding: 5px 8px;
    font-size: 10px;
  }

  .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-top: 14px;
  }

  .action {
    min-height: clamp(42px, 6svh, 52px);
    padding: 5px 8px;
    font-size: 15px;
    box-shadow: 4px 4px 0 #0b1721;
  }

  .action-x, .action-dex { font-size: 12px; }
  .action-telegram { font-size: 13px; }
  .action img, .action .action-icon { width: 27px; height: 27px; }
  .action .action-icon img { width: 20px; height: 20px; }

  .hero-visual {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
  }

  .hero-visual::before {
    inset: 4% 12% 9%;
    border-radius: 25px;
  }

  .hero-cow {
    width: 100%;
    height: calc(100% - 12px);
    max-width: 100%;
    margin-bottom: 6px;
  }

  .cow-ground { bottom: 4px; }
  .farm-clouds { width: 170px; right: -10px; }
  .roadmap { padding-top: 210px; padding-bottom: 145px; }
  .roadmap::before { width: 160px; left: -35px; }
  .roadmap::after { width: 140px; right: -22px; }
  .chart-section { padding-top: 82px; }
  .chart-section > .section-wrap { padding-bottom: 108px; }
  .chart-heading { margin-bottom: 12px; }
  .chart-toolbar { height: 45px; flex-basis: 45px; }
  .chart-section::before { width: 140px; right: 8px; }
  .chart-section::after { width: 180px; left: 8px; }
  .chart-section > .farm-clouds { left: 8px; width: 150px; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .chart-section { padding-top: 65px; }
  .chart-section > .section-wrap { padding-bottom: 82px; }
  .chart-heading { gap: 8px; margin-bottom: 8px; }
  .chart-heading h2 { font-size: clamp(32px, 9vw, 45px); }
  .chart-out-link { padding: 6px 10px; }
  .chart-disclaimer { margin-top: 7px; font-size: 10px; line-height: 1.2; }
  .chart-empty { padding: 8px; }
  .chart-empty-icon { width: 50px; height: 50px; margin-bottom: 8px; border-radius: 14px; }
  .chart-empty-icon img { width: 36px; height: 36px; }
  .chart-empty h3 { font-size: clamp(18px, 5vw, 25px); }
  .chart-empty p { display: none; }
  .chart-section::before { width: 112px; }
  .chart-section::after { width: 150px; }
  .chart-section > .farm-clouds { width: 120px; }
}

@media (min-width: 761px) and (max-height: 700px) {
  .chart-section { padding-top: 70px; }
  .chart-section > .section-wrap { padding-bottom: 110px; }
  .chart-heading { margin-bottom: 10px; }
  .chart-toolbar { height: 40px; flex-basis: 40px; }
  .chart-empty-icon { width: 55px; height: 55px; margin-bottom: 8px; border-radius: 15px; }
  .chart-empty-icon img { width: 39px; height: 39px; }
  .chart-empty h3 { font-size: 25px; }
  .chart-empty p { display: none; }
  .chart-section::before { width: 130px; }
  .chart-section::after { width: 220px; }
  .chart-section > .farm-clouds { width: 160px; }
}

@media (min-width: 761px) and (max-height: 530px) {
  .chart-section { padding-top: 18px; }
  .chart-section > .section-wrap { padding-bottom: 65px; }
  .chart-heading { margin-bottom: 8px; }
  .chart-heading h2 { font-size: 36px; }
  .chart-out-link { padding: 5px 10px; }
  .chart-toolbar { height: 34px; flex-basis: 34px; }
  .chart-disclaimer, .chart-section > .farm-clouds { display: none; }
  .chart-empty-icon { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 14px; }
  .chart-empty-icon img { width: 36px; height: 36px; }
  .chart-empty h3 { font-size: 24px; }
  .chart-empty p { display: none; }
  .chart-section::before { width: 105px; }
  .chart-section::after { width: 170px; }
}


@media (max-width: 470px) {
  :root { --hero-ribbon-height: 43px; }
  .hero h1 { font-size: clamp(47px, min(13vw, 8.8svh), 64px); }
  .hero-visual::before { inset: 4% 13% 9%; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .hero-copy { padding-top: 8px; }
  .hero h1 { font-size: clamp(40px, min(12vw, 8svh), 58px); }
  .hero-lede { margin: 5px 0; font-size: 11px; line-height: 1.25; }
  .ticker-line { padding: 4px 7px; font-size: 9px; }
  .hero-actions { margin-top: 8px; gap: 6px 8px; }
  .action { min-height: 40px; padding: 3px 6px; font-size: 13px; }
  .action-x, .action-dex { font-size: 11px; }
  .action-telegram { font-size: 12px; }
  .action img, .action .action-icon { width: 23px; height: 23px; }
}

@media (min-width: 761px) and (max-height: 530px) {
  .hero-copy { padding: 8px 0; }
  .hero h1 { font-size: clamp(44px, 6vw, 66px); }
  .hero-lede { display: none; }
  .hero-actions { margin-top: 8px; row-gap: 6px; }
  .action { min-height: 42px; padding: 4px 8px; }
  .action img, .action .action-icon { width: 24px; height: 24px; }
  .action .action-icon img { width: 18px; height: 18px; }
}

[hidden] { display: none !important; }
