/* Homepage refinement: shared tokens stay compatible with account and guide UI. */
:root { --muted: #b1adbd; --muted-2: #9993a5; }
body { min-width: 0; background: radial-gradient(ellipse at 50% 0%, #251341 0, transparent 850px), #09080e; }
body::before { display: none; }
.hero { padding-top: clamp(120px, 12vw, 176px); padding-bottom: 72px; }
.hero h1 { max-width: 1050px; margin-inline: auto; font-size: clamp(42px, 6.4vw, 88px); line-height: 1.06; letter-spacing: -.055em; text-wrap: balance; }
.hero-copy { max-width: 660px; text-wrap: pretty; }
.hero .hero-trial { max-width: 600px; margin: 22px auto 0; color: #c6bbdf; }
.eyebrow { border-color: #a980ff42; background: #9970ef12; color: #e2d3ff; }
.gradient-text { background-image: linear-gradient(105deg, #b39aff 5%, #9665ff 48%, #f1a6ec); }
.product-stage { margin-top: 60px; }
.app-window { border-color: #ba9aff42; box-shadow: 0 40px 100px #0009, 0 0 80px #7b36ed25; }
.button { min-height: 46px; }
.button-primary { background: linear-gradient(115deg, #9366ff, #723bed); }
.section { padding-block: clamp(70px, 8vw, 120px); }
.section h2, .creator-heading h2 { text-wrap: balance; letter-spacing: -.045em; }
.creator-paths { padding-block: 90px 24px; }
.creator-heading { max-width: 650px; margin-bottom: 32px; }
.creator-heading h2 { margin: 10px 0 16px; font-size: clamp(34px, 4vw, 54px); line-height: 1.1; }
.creator-heading > p:last-child { color: var(--muted); }
.creator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.creator-card { display: flex; flex-direction: column; min-width: 0; padding: 32px; border: 1px solid #ac89ff30; border-radius: 24px; background: linear-gradient(145deg, #251936, #111017); transition: border-color .2s, transform .2s; }
.creator-card:nth-child(2) { background: linear-gradient(145deg, #211c42, #111017); }
.creator-card:nth-child(3) { background: linear-gradient(145deg, #361a37, #111017); }
.creator-number { color: #c5a9ff; font-size: 11px; letter-spacing: .16em; font-weight: 700; }
.creator-card h3 { margin: 40px 0 14px; font-size: 27px; line-height: 1.18; letter-spacing: -.035em; text-wrap: balance; }
.creator-card p { margin: 0 0 28px; color: #bdb7ca; font-size: 15px; }
.creator-link { margin-top: auto; font-size: 13px; color: #e0ceff; font-weight: 600; }
.bento { border-color: #ab86e929; background-color: #121017; }
.bento-grid { gap: 20px; }
.pricing-card { border-color: #a180df38; }
.pricing-card.featured { box-shadow: 0 0 70px #7e3bdc20; }
.section-kicker { color: #bea0ff; }
.scroll-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #8860ff, #ef98e8); pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .creator-card:hover { transform: translateY(-5px); border-color: #ba91ff99; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-visible { animation: section-arrive .65s cubic-bezier(.2,.7,.2,1) both; }
  .hero .reveal.is-visible { animation: none; }
  @keyframes section-arrive { from { opacity: .25; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 900px) {
  .creator-card { padding: 24px; }
  .creator-card h3 { font-size: 23px; }
}
@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }
  .creator-grid { grid-template-columns: minmax(0, 1fr); }
  .creator-paths { padding-top: 55px; }
  .creator-card h3 { margin-top: 22px; font-size: 28px; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 360px; margin-inline: auto; }
  .hero-trial { font-size: 13px; }
  .bento, .bento-wide { min-height: 420px; }
  .card-copy { padding: 26px; }
  .card-copy h3 { font-size: 27px; }
  .section h2, .final-cta h2 { font-size: clamp(32px, 9vw, 43px); }
  .nav-links.open { max-height: calc(100dvh - 80px); overflow-y: auto; }
  input, select, textarea { font-size: 16px; }
}