/* Extra depth for the accelerationist landing page. */
body {
  background:
    radial-gradient(circle at 79% 14%, rgba(48, 91, 83, .26), transparent 29rem),
    radial-gradient(circle at 15% 44%, rgba(64, 85, 124, .12), transparent 33rem),
    radial-gradient(circle at 83% 88%, rgba(72, 112, 78, .15), transparent 40rem),
    var(--ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .4;
  background-image:
    radial-gradient(1px 1px at 8% 12%, #dcead3 98%, transparent),
    radial-gradient(1px 1px at 22% 58%, #dcead3 98%, transparent),
    radial-gradient(2px 2px at 43% 22%, #adc5ed 98%, transparent),
    radial-gradient(1px 1px at 67% 72%, #dcead3 98%, transparent),
    radial-gradient(2px 2px at 84% 36%, #c8e7ff 98%, transparent),
    radial-gradient(1px 1px at 96% 84%, #dcead3 98%, transparent);
  background-size: 430px 360px;
}

main, .site-footer { position: relative; z-index: 1; }
.site-header { box-shadow: 0 14px 50px rgba(0, 0, 0, .16); }
.main-nav a { position: relative; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
.header-buy {
  background: linear-gradient(120deg, #e9eed8, #add09f);
  color: var(--ink);
  border-color: #b8d4ab;
  box-shadow: 0 0 28px rgba(148, 204, 142, .16);
}
.header-buy span, .header-buy:hover span { color: var(--ink); }
.header-buy:hover { background: #f4f7e8; box-shadow: 0 0 36px rgba(148, 204, 142, .3); }

.hero { isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  width: min(76vw, 1000px);
  aspect-ratio: 1;
  right: 0;
  top: -33%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 151, 125, .17), rgba(84, 112, 178, .06) 38%, transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(54px, 6vw, 90px);
  letter-spacing: -.075em;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .26);
}
.hero h1 em {
  display: inline-block;
  font-size: .61em;
  letter-spacing: -.055em;
  background: linear-gradient(100deg, #c5e6ac, #8ac5ba 55%, #a7c9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-lede { max-width: 35ch; line-height: 1.5; }
.ticker-line b { color: #cce7bb; }
.action { backdrop-filter: blur(8px); }
.action-primary {
  background: linear-gradient(110deg, #f6f5df, #b6d4af);
  box-shadow: 0 12px 32px rgba(105, 152, 99, .16);
}
.action-primary:hover { box-shadow: 0 16px 36px rgba(105, 152, 99, .26); }
.telegram-icon svg { width: 16px; fill: #74c7ed; }
.hero-art { isolation: isolate; }
.hero-art::before {
  content: "01";
  position: absolute;
  z-index: -1;
  right: -3%;
  top: -26%;
  font: 600 clamp(210px, 29vw, 430px)/1 var(--sans);
  letter-spacing: -.13em;
  color: rgba(225, 238, 207, .055);
  pointer-events: none;
}
.art-frame {
  border-color: rgba(212, 236, 195, .68);
  box-shadow: 0 0 0 8px rgba(184, 215, 173, .035), 0 28px 100px rgba(0, 0, 0, .42), 0 0 95px rgba(102, 174, 169, .24);
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform .6s ease, box-shadow .6s ease;
}
.art-frame:hover {
  transform: perspective(1200px) rotateY(0) rotateX(0) scale(1.015);
  box-shadow: 0 34px 110px rgba(0, 0, 0, .46), 0 0 110px rgba(121, 190, 169, .32);
}
.art-frame::after { box-shadow: inset 0 0 45px rgba(208, 239, 213, .09); }
.art-frame img { filter: saturate(.94) contrast(1.07); }
.art-scan { opacity: .12; }
.art-star { text-shadow: 0 0 15px #d3f2df; }

.signal-strip {
  overflow: hidden;
  border-top: 1px solid rgba(199, 224, 189, .22);
  border-bottom: 1px solid rgba(199, 224, 189, .22);
  background: linear-gradient(90deg, #b4d3a3, #e8ecd2 55%, #b8d4bf);
  color: #102619;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .2);
}
.signal-track { display: flex; width: max-content; animation: signal-move 28s linear infinite; }
.signal-track span {
  flex: none;
  white-space: nowrap;
  padding: 15px 3rem 15px 0;
  font: 600 11px var(--mono);
  letter-spacing: .16em;
}
.signal-track b { margin: 0 2rem; color: #426f62; font-size: 14px; }
@keyframes signal-move { to { transform: translateX(-50%); } }

.roadmap { isolation: isolate; }
.roadmap::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 65vw;
  aspect-ratio: 1;
  left: -35vw;
  top: 0;
  border: 1px solid rgba(164, 204, 175, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(164, 204, 175, .018), 0 0 0 160px rgba(164, 204, 175, .012);
  pointer-events: none;
}
.roadmap-card {
  overflow: hidden;
  background: linear-gradient(145deg, rgba(113, 152, 130, .11), rgba(13, 31, 23, .76) 54%, rgba(7, 18, 13, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 16px 45px rgba(0, 0, 0, .14);
}
.roadmap-card::before {
  content: "";
  position: absolute;
  right: -110px;
  top: 0;
  width: 180px;
  height: 100%;
  transform: skewX(-26deg);
  background: linear-gradient(90deg, transparent, rgba(194, 228, 203, .055), transparent);
  transition: right .6s ease;
  pointer-events: none;
}
.roadmap-card:hover::before { right: 110%; }
.roadmap-card.active { background: linear-gradient(150deg, rgba(140, 194, 147, .21), rgba(15, 36, 25, .83) 54%, #081810); }
.phase-glyph { text-shadow: 0 0 28px rgba(173, 221, 165, .36); }
.chart-window { box-shadow: 0 26px 80px rgba(0, 0, 0, .28), 0 0 0 8px rgba(170, 200, 173, .022); }
.chart-topbar { background: linear-gradient(90deg, rgba(155, 197, 164, .08), rgba(7, 18, 13, .3)); }
.chart-placeholder { background-color: #0b1c15; }
.placeholder-orbit { box-shadow: 0 0 0 12px rgba(156, 186, 140, .03), 0 0 0 31px rgba(156, 186, 140, .02), 0 0 50px rgba(156, 186, 140, .17); }

:focus-visible { outline: 2px solid #c6e8ba; outline-offset: 4px; }
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(50px, 6.8vw, 68px); }
  .hero-art::before { top: -16%; }
}
@media (max-width: 620px) {
  .hero h1 { font-size: clamp(51px, 11.5vw, 70px); }
  .hero h1 em { font-size: .58em; }
  .hero-art::before { top: -24%; right: 0; font-size: 60vw; }
  .art-frame { transform: none; }
  .art-frame:hover { transform: scale(1.01); }
  .signal-track span { font-size: 9px; padding: 13px 2rem 13px 0; }
  .signal-track b { margin: 0 1.2rem; }
  .main-nav a::after { bottom: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-track { animation: none; }
  .art-frame, .art-frame:hover { transform: none; }
}
[hidden] { display: none !important; }