:root {
  --bg: #f7f8fb;
  --panel: rgba(255,255,255,.78);
  --ink: #111319;
  --muted: #787d88;
  --line: rgba(18,24,38,.09);
  --blue: #22b8ff;
  --pink: #ff5fa8;
  --violet: #8c70ff;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 12% 16%, rgba(63,205,255,.10), transparent 25rem),
    radial-gradient(circle at 86% 78%, rgba(255,102,169,.09), transparent 30rem),
    linear-gradient(180deg, #fbfcfe 0%, #f5f6f9 100%);
}

a { color: inherit; }

.site-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 30px clamp(24px, 5vw, 72px);
}

.brand {
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: .42em;
  white-space: nowrap;
}

.toplink {
  color: #6f7480;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .18s ease;
}
.toplink:hover { color: #1b1d23; }

.hero {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px 24px 64px;
  overflow: hidden;
}

.hero-inner {
  width: min(900px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eyebrow {
  margin: 10px 0 12px;
  color: #767b86;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .40em;
  text-transform: uppercase;
}

.seed-wordmark {
  margin: 0;
  font-size: clamp(42px, 7vw, 88px);
  line-height: .98;
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em;
}

.subline {
  margin: 18px 0 4px;
  color: #666b76;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.icon-wrap {
  position: relative;
  width: min(56vw, 520px);
  margin: 10px 0 0;
  isolation: isolate;
}

.icon-wrap::before {
  content: "";
  position: absolute;
  inset: 17% 16%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 30deg,
    rgba(73,194,255,.22),
    rgba(159,118,255,.20),
    rgba(255,105,170,.19),
    rgba(255,195,78,.15),
    rgba(80,222,187,.17),
    rgba(73,194,255,.22));
  filter: blur(44px);
  opacity: .74;
  animation: breathe 6.5s ease-in-out infinite;
}

.seed-icon {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 38px rgba(70, 84, 125, .10));
  user-select: none;
  -webkit-user-drag: none;
}

.coming {
  margin-top: -14px;
  font-size: 10px;
  color: #717681;
  font-weight: 650;
  letter-spacing: .38em;
  text-transform: uppercase;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px clamp(24px, 5vw, 72px) 28px;
  color: #8a8f98;
  font-size: 10px;
  letter-spacing: .08em;
}

.footer a {
  text-decoration: none;
  color: #6e737d;
}
.footer a:hover { color: #17191e; }
.footer-links { display: inline-flex; align-items: center; gap: 7px; }

@keyframes breathe {
  0%, 100% { transform: scale(.96); opacity: .58; }
  50% { transform: scale(1.04); opacity: .86; }
}

/* Support */
.support-main {
  width: min(760px, calc(100% - 40px));
  margin: 24px auto 80px;
}

.support-hero {
  padding: 64px 0 42px;
  text-align: center;
}

.support-mark {
  width: 112px;
  height: 112px;
  object-fit: contain;
  margin-bottom: 16px;
}

.support-hero h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 550;
  letter-spacing: -.025em;
}

.support-hero p {
  max-width: 570px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.support-card {
  margin: 18px 0;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(31, 44, 70, .05);
  backdrop-filter: blur(16px);
}

.support-card h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 650;
}

.support-card p {
  margin: 0;
  color: #676d78;
  font-size: 15px;
  line-height: 1.6;
}

.support-card + .support-card { margin-top: 14px; }

.mail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #17191e;
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

.mini-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.mini-item {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mini-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.mini-item span {
  display: block;
  color: #7b808a;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .topbar { padding: 22px 20px; }
  .brand { font-size: 13px; letter-spacing: .32em; }
  .hero { padding-bottom: 38px; }
  .icon-wrap { width: min(90vw, 450px); }
  .seed-wordmark { letter-spacing: .25em; text-indent: .25em; }
  .footer { padding: 18px 20px 24px; }
  .support-main { width: min(100% - 28px, 760px); margin-top: 0; }
  .support-hero { padding-top: 42px; }
  .support-card { border-radius: 20px; padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .icon-wrap::before { animation: none; }
}