/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#2D3436;background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}

/* ===== Nav ===== */
.nav{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 2rem;position:absolute;top:0;left:0;right:0;z-index:10}
.nav-brand{font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.nav-cta{background:rgba(255,255,255,.15);color:#fff;padding:.45rem 1.1rem;border-radius:6px;font-size:.85rem;transition:background .25s}
.nav-cta:hover{background:rgba(255,255,255,.3)}

/* ===== Hero ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(135deg,#6C5CE7 0%,#a855f7 50%,#FD79A8 100%);color:#fff;padding:2rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.06);top:-120px;right:-100px}
.hero::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);bottom:-80px;left:-60px}
.hero-content{position:relative;z-index:1;max-width:640px}
.hero-title{font-size:3.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem}
.hero-slogan{font-size:1.35rem;font-weight:500;opacity:.95;margin-bottom:1rem}
.hero-desc{font-size:1rem;opacity:.82;margin-bottom:2rem;max-width:480px;margin-left:auto;margin-right:auto}
.hero-btn{display:inline-block;background:#fff;color:#6C5CE7;padding:.7rem 2rem;border-radius:8px;font-weight:600;font-size:.95rem;transition:transform .2s,box-shadow .2s}
.hero-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}

/* ===== Features ===== */
.features{padding:5rem 2rem;background:#F8F9FA}
.section-title{text-align:center;font-size:1.8rem;font-weight:700;margin-bottom:3rem;color:#2D3436}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;max-width:960px;margin:0 auto}
.card{background:#fff;border-radius:12px;padding:2rem;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;opacity:0;transform:translateY(20px)}
.card.visible{opacity:1;transform:translateY(0)}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.1)}
.card-icon{margin-bottom:1.25rem;display:flex;justify-content:center}
.card-title{font-size:1.15rem;font-weight:700;margin-bottom:.5rem;color:#2D3436}
.card-desc{font-size:.9rem;color:#636e72;line-height:1.55}

/* ===== CTA ===== */
.cta{padding:5rem 2rem;text-align:center;background:linear-gradient(135deg,#2D3436 0%,#636e72 100%);color:#fff}
.cta-title{font-size:1.8rem;font-weight:700;margin-bottom:.75rem}
.cta-desc{opacity:.8;margin-bottom:2rem;font-size:.95rem}
.cta-form{display:flex;justify-content:center;gap:.75rem;max-width:440px;margin:0 auto}
.cta-input{flex:1;padding:.7rem 1rem;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-size:.9rem;outline:none;transition:border-color .25s}
.cta-input::placeholder{color:rgba(255,255,255,.5)}
.cta-input:focus{border-color:#6C5CE7}
.cta-btn{padding:.7rem 1.6rem;background:#6C5CE7;color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .25s}
.cta-btn:hover{background:#5a4bd1}
.cta-thanks{margin-top:1rem;color:#00B894;font-weight:600}

/* ===== Footer ===== */
.footer{text-align:center;padding:1.5rem;background:#2D3436;color:rgba(255,255,255,.5);font-size:.8rem}

/* ===== Responsive ===== */
@media(max-width:600px){
  .hero-title{font-size:2.4rem}
  .hero-slogan{font-size:1.1rem}
  .cta-form{flex-direction:column}
  .cards{grid-template-columns:1fr}
}