* { box-sizing: border-box; }

:root {
  color-scheme: light;
  --ink: #202333;
  --muted: #687083;
  --purple: #6554c0;
  --purple-dark: #5140a8;
  --teal: #20a58b;
  --line: #e9eaf0;
  --soft: #f7f8fc;
}

html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 5%, rgba(101, 84, 192, .09), transparent 38rem),
    #fff;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: min(100% - 40px, 1080px);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--purple), #8878df);
  color: white;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -1px;
}
.brand-name { font-size: 23px; font-weight: 750; letter-spacing: -1.1px; }
.brand-name span { color: var(--teal); }
.top-note { color: var(--muted); font-size: 13px; }

.hero {
  width: min(100%, 760px);
  margin: auto;
  padding: 86px 0 76px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid #e8e4fa;
  border-radius: 999px;
  background: #fbfaff;
  color: #6254a9;
  font-size: 13px;
  font-weight: 650;
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(32, 165, 139, .12);
}
h1 {
  margin: 27px 0 18px;
  font-size: clamp(40px, 7vw, 68px);
  line-height: 1.08;
  letter-spacing: -2.8px;
  font-weight: 780;
}
h1 span {
  background: linear-gradient(90deg, var(--purple), #8875d9 55%, var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.intro {
  max-width: 610px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}
.primary-button {
  min-height: 56px;
  margin: 34px auto 18px;
  padding: 0 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 12px;
  background: #218c4a;
  box-shadow: 0 7px 18px rgba(33, 140, 74, .18);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.primary-button:hover {
  background: #19783e;
  box-shadow: 0 9px 22px rgba(33, 140, 74, .24);
  transform: translateY(-2px);
}
.primary-button:focus-visible { outline: 3px solid rgba(101, 84, 192, .35); outline-offset: 4px; }
.primary-button span { font-size: 21px; line-height: 1; }
.redirect-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}
.redirect-note strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid #e3e0f4;
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.manual-note { margin: 10px 0 0; color: #9298a7; font-size: 12px; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px 0 38px;
  border-top: 1px solid var(--line);
}
.feature {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.8);
}
.feature-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f0edfc;
  color: var(--purple);
  font-size: 17px;
  font-weight: 750;
}
.feature h2 { margin: 15px 0 7px; font-size: 16px; letter-spacing: -.2px; }
.feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.footer {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  color: #8a90a0;
  font-size: 12px;
}

@media (max-width: 640px) {
  .page { width: min(100% - 32px, 520px); }
  .topbar { height: 72px; }
  .top-note { max-width: 120px; text-align: right; font-size: 11px; }
  .brand-name { font-size: 21px; }
  .hero { padding: 75px 0 66px; }
  h1 { letter-spacing: -1.8px; }
  .intro { font-size: 16px; }
  .features { grid-template-columns: 1fr; gap: 11px; }
  .feature { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; padding: 16px; }
  .feature-icon { grid-row: span 2; }
  .feature h2 { margin: 1px 0 4px; }
  .footer { padding: 17px 0; align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}