:root{
  --text:#1a1a1a; --text-dim:#5a5a5a; --bg:#fff; --gray:#f7f8fb;
  --violet:#7c4dff; --violetDark:#5b2cff; --fuchsia:#d946ef; --blue:#3b82f6; --green:#22c55e; --amber:#f59e0b;
  --radius:18px; --shadow:0 12px 30px rgba(20,20,41,.12);
}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.55}
.tf-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.u-center{text-align:center}.u-muted{color:var(--text-dim)}

.tf-hero{position:relative;color:#fff;isolation:isolate;overflow:hidden;background: conic-gradient(from 200deg at 80% 10%, rgba(124,77,255,.22), rgba(217,70,239,.22), rgba(124,77,255,.22)), #fff; padding: clamp(72px, 12vw, 140px) 24px}
.tf-hero__bg{position:absolute;inset:0;z-index:-1}
.tf-glow{position:absolute;width:55vmin;aspect-ratio:1/1;filter:blur(60px);opacity:.5;border-radius:50%}
.tf-g1{top:-10vmin;left:-10vmin;background:rgba(124,77,255,.6)}
.tf-g2{bottom:-15vmin;right:-12vmin;background:rgba(217,70,239,.6)}
.tf-g3{top:10vmin;right:10vmin;background:rgba(255,255,255,.25)}
.tf-kicker{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:#e9ddff;margin:0 0 .5rem}
.tf-title{font-size:clamp(2rem,6vw,3.2rem);margin:.25rem 0 .75rem}
.tf-sub{font-size:clamp(1rem,2vw,1.15rem);color:#e6e0f3;max-width:64ch;margin:0 0 1.2rem}
.tf-ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.tf-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.15rem;border-radius:16px;font-weight:900;text-decoration:none;transition:transform .16s ease, background .2s, color .2s}
.tf-btn--primary{background:linear-gradient(135deg,var(--violetDark),var(--violet));color:#fff;box-shadow:var(--shadow)}
.tf-btn--primary:hover{transform:translateY(-2px)}
.tf-btn--ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent}
.tf-btn--ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}

section{padding: clamp(56px, 8vw, 96px) 0}
h2{font-size:clamp(1.65rem,4vw,2.5rem);margin:0 0 1rem;color:#311b92;position:relative;display:inline-block;padding-bottom:.35rem}
h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--violetDark),var(--fuchsia));opacity:.35}
h3{margin:.2rem 0 .5rem}
.tf-section--alt{background:var(--gray)}

.tf-grid{display:grid;gap:22px}
@media (min-width:980px){.tf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tf-plan{background:#fff;border:1px solid #ececf3;border-radius:18px;padding:20px;box-shadow:0 10px 24px rgba(20,20,41,.08);position:relative}
.tf-plan:hover{transform:translateY(-2px)}
.tf-plan--popular{border:2px solid color-mix(in oklab, var(--violetDark) 55%, #fff 45%);box-shadow:0 18px 45px rgba(91,44,255,.22)}
.tf-tag{position:absolute;top:-12px;left:16px;background:linear-gradient(135deg,#f59e0b,#d946ef);color:#fff;font-weight:900;padding:.35rem .6rem;border-radius:10px;box-shadow:0 10px 24px rgba(20,20,41,.12);font-size:.8rem}
.tf-price{font-size:1.8rem;font-weight:900;margin:.2rem 0 .6rem;color:#311b92}
.tf-mini{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem;color:#5c5c6a;font-size:.98rem}

.tf-cta{background:radial-gradient(900px 480px at 85% 10%, rgba(124,77,255,.18), transparent 60%);color:#fff}
.tf-cta .tf-wrap{background:#0c0c14;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:32px}
.tf-cta h2{color:#fff}
.tf-cta p{color:#e9e9f4}
.tf-cta .tf-btn--ghost{border:1.5px solid rgba(255,255,255,.6);color:#fff}

[data-anim]{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
[data-anim].is-in{opacity:1;transform:none}