/* Variables */
:root {
  --color-primary: #6B4EE6;
  --color-primary-dark: #5438C5;
  --color-secondary: #FF6B9D;
  --color-bone: #FFF8F0;
  --color-night: #2D1B4E;
  --color-mint: #7FDBCA;
  --color-text: #333;
  --color-text-light: #666;
  --font-display: 'Fredoka One', 'Comic Sans MS', cursive;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 1200px;
  --spacing: 2rem;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--color-text); line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; }
img { max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); }

/* Header */
.header { background: white; padding: 1rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; }
.header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: bold; color: var(--color-night); }
.nav { display: flex; gap: 1.5rem; align-items: center; }
.nav a { color: var(--color-text); font-weight: 500; }

/* Buttons */
.btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-small { padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn-large { padding: 1rem 2rem; font-size: 1.1rem; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--color-bone) 0%, #fff 100%); padding: 4rem 0; }
.hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero h1 { font-size: 2.8rem; color: var(--color-night); margin: 0 0 1rem; }
.hero-subtitle { font-size: 1.25rem; color: var(--color-text-light); margin-bottom: 2rem; }
.placeholder-image { background: var(--color-mint); border-radius: 20px; padding: 4rem; text-align: center; }
.placeholder-image span { font-size: 5rem; display: block; margin-bottom: 1rem; }

/* Benefits */
.benefits { padding: 5rem 0; background: white; }
.benefits h2 { text-align: center; font-size: 2rem; color: var(--color-night); margin-bottom: 3rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.benefit-card { text-align: center; padding: 2rem; border-radius: 16px; background: var(--color-bone); }
.benefit-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.benefit-card h3 { margin: 0 0 0.5rem; color: var(--color-night); }
.benefit-card p { margin: 0; color: var(--color-text-light); font-size: 0.95rem; }

/* CTA Section */
.cta-section { padding: 5rem 0; background: var(--color-night); color: white; text-align: center; }
.cta-content { max-width: 600px; margin: 0 auto; }
.cta-section h2 { font-size: 2.5rem; margin: 0 0 1rem; }
.cta-section > .container > .cta-content > p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; }
.signup-form { margin-top: 2rem; }
.form-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.form-input { padding: 1rem 1.5rem; border-radius: 50px; border: none; font-size: 1rem; min-width: 280px; }
.form-note { font-size: 0.85rem; opacity: 0.7; margin-top: 1rem; }

/* What's Inside */
.whats-inside { padding: 5rem 0; background: var(--color-bone); }
.whats-inside h2 { text-align: center; font-size: 2rem; color: var(--color-night); margin-bottom: 3rem; }
.inside-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.inside-card { background: white; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.inside-card h3 { margin: 0 0 0.5rem; }
.inside-card p { margin: 0; color: var(--color-text-light); font-size: 0.95rem; }

/* Footer */
.footer { padding: 3rem 0; background: var(--color-night); color: white; }
.footer-content { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.footer .logo { color: white; }
.ai-disclosure { font-size: 0.85rem; opacity: 0.7; margin: 0.5rem 0 0; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: white; opacity: 0.8; }
.footer-links a:hover { opacity: 1; }
.copyright { text-align: center; font-size: 0.85rem; opacity: 0.6; margin: 0; }

/* Mobile Responsive */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero h1 { font-size: 2rem; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .inside-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .benefits-grid, .inside-grid { grid-template-columns: 1fr; }
  .form-group { flex-direction: column; align-items: center; }
  .form-input { width: 100%; }
  .footer-content { flex-direction: column; gap: 1.5rem; text-align: center; }
}