@font-face{ font-family:'Baloo 2'; font-style:normal; font-weight:600 800; font-display:swap; src:url(../fonts/baloo2-latin.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/inter-latin.woff2) format('woff2'); }

:root{
  --bg: #0B0B1F;
  --bg-elevated: #14142E;
  --accent: #5B4FEB;
  --accent-light: #ECE9FD;
  --gray-box: #F4F4F7;
  --text-dark: #0F0F1E;
  --text-gray: #5B6270;
  --text-light-gray: #A8A8C0;
  --white: #FFFFFF;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-pill: 999px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; position:relative; }

/* Header */
header{ padding:32px 0 0; position:relative; z-index:2; }
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; }
.logo img{ height:45px; width:auto; display:block; }
.nav-cta{ background:var(--accent); color:var(--white); padding:11px 24px; border-radius:var(--radius-pill); font-weight:600; font-size:15px; transition:transform .15s ease, box-shadow .15s ease; }
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(91,79,235,0.45); }

/* Decorative crescent */
.crescent{ position:absolute; top:-140px; right:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(91,79,235,0.28), rgba(91,79,235,0.05) 60%, transparent 70%); pointer-events:none; z-index:1; }

/* Hero */
.hero{ position:relative; padding:88px 0 64px; text-align:center; }
.hero h1{ font-family:'Baloo 2', sans-serif; font-size:56px; line-height:1.08; font-weight:800; max-width:760px; letter-spacing:-1px; margin:0 auto; }
.hero p.sub{ font-size:20px; color:var(--text-light-gray); margin:18px auto 0; font-weight:500; }
.hero-ctas{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.btn-primary{ background:var(--accent); color:var(--white); padding:16px 32px; border-radius:var(--radius-pill); font-weight:700; font-size:17px; display:inline-block; transition:transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(91,79,235,0.5); }
.btn-secondary{ background:transparent; color:var(--white); padding:16px 32px; border-radius:var(--radius-pill); font-weight:600; font-size:17px; border:1.5px solid rgba(255,255,255,0.25); transition:border-color .15s ease, background .15s ease; }
.btn-secondary:hover{ border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.05); }

/* Main white card */
.card{ position:relative; z-index:2; background:var(--white); color:var(--text-dark); border-radius:var(--radius-lg); padding:56px; margin-bottom:64px; }
.card h2{ font-family:'Baloo 2', sans-serif; font-size:32px; font-weight:700; letter-spacing:-0.5px; }

.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:28px 0 48px; }
.stat-box{ border-radius:var(--radius-md); padding:28px 30px; display:flex; align-items:center; gap:20px; }
.stat-box.purple{ background:var(--accent-light); }
.stat-box.gray{ background:var(--gray-box); }
.stat-num{ font-family:'Baloo 2', sans-serif; font-size:38px; font-weight:800; color:var(--accent); white-space:nowrap; }
.stat-label{ font-size:15px; font-weight:600; color:var(--text-dark); }

.card p.lede{ color:var(--text-gray); font-size:16px; line-height:1.6; max-width:820px; margin-top:14px; }

.features-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.feature{ background:var(--gray-box); border-left:5px solid var(--accent); border-radius:12px; padding:20px 24px; display:flex; gap:14px; align-items:flex-start; }
.check{ flex-shrink:0; width:22px; height:22px; border-radius:6px; background:var(--accent); display:flex; align-items:center; justify-content:center; margin-top:2px; }
.check svg{ width:13px; height:13px; }
.feature h3{ font-size:16px; font-weight:700; margin-bottom:4px; }
.feature p{ font-size:14px; color:var(--text-gray); line-height:1.5; }

/* Benefits dark box */
.benefits{ background:var(--bg); border-radius:20px; padding:36px 40px; margin-top:44px; }
.benefits h3{ font-family:'Baloo 2', sans-serif; font-size:26px; font-weight:700; color:var(--white); }
.benefits > p{ color:var(--text-light-gray); font-size:15px; margin-top:6px; margin-bottom:24px; }
.benefits-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; row-gap:18px; column-gap:24px; }
.benefit-item{ display:flex; align-items:center; gap:10px; color:var(--white); font-size:15px; font-weight:600; }

/* Footer CTA */
footer{ position:relative; z-index:2; text-align:center; padding:20px 0 60px; }
.footer-eyebrow{ color:#8B80F5; font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; }
.footer-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.footer-row .btn-primary{ padding:14px 28px; font-size:16px; }
.footer-dot{ color:var(--text-light-gray); }
.footer-email{ font-weight:700; font-size:17px; }
.footer-email:hover{ color:var(--accent); }
.copyright{ margin-top:48px; color:var(--text-light-gray); font-size:13px; }

@media (max-width: 860px){
  .hero h1{ font-size:38px; }
  .hero p.sub{ font-size:17px; }
  .card{ padding:32px 22px; }
  .stats-grid, .features-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:1fr 1fr; }
  .benefits{ padding:28px 22px; }
}
@media (max-width: 480px){
  .benefits-grid{ grid-template-columns:1fr; }
  .nav-cta{ display:none; }
}

/* Accessibility */
a:focus-visible{ outline:3px solid #8B80F5; outline-offset:3px; border-radius:8px; }
.skip{ position:absolute; left:-9999px; top:8px; background:var(--white); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:700; z-index:10; }
.skip:focus{ left:8px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}