:root { --primary: #24cc9c; --secondary: #137056; --on-primary: #111111; --on-secondary: #ffffff; --bg: #ffffff; --surface: #f6f8fb; --light: #e9edf3; --dark: #12151b; --muted: #566173; } body { font-family: 'Inter', sans-serif; color: var(--dark); line-height: 1.6; } h1, h2, h3 { font-family: 'Sora', sans-serif; font-weight: 800; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; } .navbar { padding: 20px 0; } .hero { padding: 88px 0; background: var(--surface); } .offer-card { background: white; padding: 32px; border-radius: 20px; border: 1px solid var(--light); box-shadow: 0 20px 40px rgba(0,0,0,0.05); } .features-list { list-style: none; padding: 0; } .features-list li { margin-bottom: 12px; font-weight: 500; } input { width: 100%; padding: 14px; border: 1px solid var(--light); border-radius: 12px; margin-bottom: 16px; } .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 15px 30px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: filter .25s ease; } .btn-cta { background: var(--primary); color: var(--on-primary); } .btn-cta:hover { filter: brightness(.94); } .chapter-card { padding: 28px; background: var(--surface); border-radius: 16px; height: 100%; }