* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; color:#1e293b; background:#fff; }
a { text-decoration:none; }

/* ── NAVBAR ── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); border-bottom:1px solid #e2e8f0; }
.nav-container { max-width:1200px; margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; color:#0f172a; font-size:20px; }
.nav-logo .logo-icon { width:38px; height:38px; background:linear-gradient(135deg,#3b82f6,#6366f1); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.nav-logo span { font-weight:400; color:#475569; }
.nav-logo strong { color:#0f172a; }
.nav-links { display:flex; list-style:none; gap:4px; }
.nav-links a { padding:8px 16px; border-radius:8px; color:#475569; font-size:14px; font-weight:500; transition:.2s; }
.nav-links a:hover,.nav-links a.active { background:#f1f5f9; color:#0f172a; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.btn-nav-primary { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; padding:9px 20px; border-radius:10px; font-size:14px; font-weight:600; transition:.2s; }
.btn-nav-primary:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 12px rgba(59,130,246,.35); }
.hamburger { display:none; background:none; border:none; font-size:20px; color:#475569; cursor:pointer; }

/* ── HERO ── */
.hero { padding:140px 24px 100px; text-align:center; background:linear-gradient(180deg,#f8fafc 0%,#fff 100%); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 70%); pointer-events:none; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:#eff6ff; border:1px solid #bfdbfe; color:#3b82f6; padding:6px 16px; border-radius:99px; font-size:13px; font-weight:600; margin-bottom:28px; }
.hero h1 { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; color:#0f172a; line-height:1.15; margin-bottom:20px; letter-spacing:-1px; }
.hero h1 span { background:linear-gradient(135deg,#3b82f6,#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-size:1.15rem; color:#64748b; max-width:600px; margin:0 auto 40px; line-height:1.7; }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-primary { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; padding:14px 32px; border-radius:12px; font-size:15px; font-weight:700; transition:.2s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(59,130,246,.35); }
.btn-secondary { background:#fff; color:#0f172a; padding:14px 32px; border-radius:12px; font-size:15px; font-weight:600; border:2px solid #e2e8f0; transition:.2s; display:inline-flex; align-items:center; gap:8px; }
.btn-secondary:hover { border-color:#94a3b8; transform:translateY(-2px); }
.hero-stats { display:flex; justify-content:center; gap:48px; margin-top:60px; flex-wrap:wrap; }
.hero-stat { text-align:center; }
.hero-stat .num { font-size:2rem; font-weight:800; color:#0f172a; }
.hero-stat .lbl { font-size:13px; color:#94a3b8; margin-top:2px; }

/* ── SECTIONS ── */
.section { padding:90px 24px; }
.section-alt { background:#f8fafc; }
.container { max-width:1200px; margin:0 auto; }
.section-label { font-size:13px; font-weight:700; color:#3b82f6; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
.section-title { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:#0f172a; margin-bottom:16px; letter-spacing:-0.5px; }
.section-sub { font-size:1.05rem; color:#64748b; max-width:540px; line-height:1.7; }
.section-header { margin-bottom:56px; }
.section-header.center { text-align:center; }
.section-header.center .section-sub { margin:0 auto; }

/* ── FEATURE CARDS ── */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.feature-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:28px; transition:.2s; }
.feature-card:hover { border-color:#bfdbfe; box-shadow:0 8px 32px rgba(59,130,246,.08); transform:translateY(-2px); }
.feature-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; }
.feature-icon.blue { background:#eff6ff; color:#3b82f6; }
.feature-icon.indigo { background:#eef2ff; color:#6366f1; }
.feature-icon.green { background:#f0fdf4; color:#22c55e; }
.feature-icon.orange { background:#fff7ed; color:#f97316; }
.feature-icon.red { background:#fef2f2; color:#ef4444; }
.feature-icon.purple { background:#faf5ff; color:#a855f7; }
.feature-card h3 { font-size:16px; font-weight:700; color:#0f172a; margin-bottom:8px; }
.feature-card p { font-size:14px; color:#64748b; line-height:1.6; }

/* ── HOW IT WORKS ── */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; position:relative; }
.step { text-align:center; }
.step-num { width:56px; height:56px; background:linear-gradient(135deg,#3b82f6,#6366f1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; font-weight:800; margin:0 auto 20px; }
.step h3 { font-size:17px; font-weight:700; color:#0f172a; margin-bottom:8px; }
.step p { font-size:14px; color:#64748b; line-height:1.6; }

/* ── PRICING ── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; align-items:start; }
.price-card { background:#fff; border:2px solid #e2e8f0; border-radius:20px; padding:36px; transition:.2s; }
.price-card.featured { border-color:#3b82f6; position:relative; box-shadow:0 16px 48px rgba(59,130,246,.12); }
.price-card.featured::before { content:'MOST POPULAR'; position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; font-size:11px; font-weight:700; padding:5px 16px; border-radius:99px; letter-spacing:1px; white-space:nowrap; }
.price-card h3 { font-size:18px; font-weight:700; color:#0f172a; margin-bottom:8px; }
.price-card .desc { font-size:13px; color:#94a3b8; margin-bottom:24px; }
.price-amount { margin-bottom:28px; }
.price-amount .dollar { font-size:18px; font-weight:700; color:#0f172a; vertical-align:top; margin-top:8px; display:inline-block; }
.price-amount .num { font-size:52px; font-weight:900; color:#0f172a; line-height:1; }
.price-amount .period { font-size:14px; color:#94a3b8; }
.price-features { list-style:none; margin-bottom:32px; display:flex; flex-direction:column; gap:10px; }
.price-features li { display:flex; align-items:center; gap:10px; font-size:14px; color:#475569; }
.price-features li i { color:#22c55e; font-size:13px; }
.price-features li.no i { color:#ef4444; }
.price-features li.no { color:#94a3b8; }
.btn-price { display:block; text-align:center; padding:13px; border-radius:12px; font-size:15px; font-weight:700; transition:.2s; }
.btn-price-outline { border:2px solid #e2e8f0; color:#0f172a; }
.btn-price-outline:hover { border-color:#94a3b8; }
.btn-price-primary { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; }
.btn-price-primary:hover { opacity:.9; box-shadow:0 6px 20px rgba(59,130,246,.35); }

/* ── CTA BANNER ── */
.cta-banner { background:linear-gradient(135deg,#1e3a8a,#312e81); color:#fff; padding:80px 24px; text-align:center; border-radius:24px; margin:0 24px 90px; }
.cta-banner h2 { font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; margin-bottom:16px; }
.cta-banner p { color:#93c5fd; font-size:1.05rem; margin-bottom:36px; }
.cta-banner .btn-primary { background:#fff; color:#1e3a8a; }
.cta-banner .btn-primary:hover { box-shadow:0 8px 24px rgba(255,255,255,.25); }

/* ── FOOTER ── */
footer { background:#0f172a; color:#94a3b8; padding:60px 24px 30px; }
.footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand .logo { display:flex; align-items:center; gap:10px; color:#fff; font-size:18px; margin-bottom:14px; }
.footer-brand .logo .logo-icon { width:36px; height:36px; background:linear-gradient(135deg,#3b82f6,#6366f1); border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
.footer-brand p { font-size:13px; line-height:1.7; color:#64748b; }
footer h4 { color:#e2e8f0; font-size:14px; font-weight:700; margin-bottom:16px; }
footer ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
footer ul a { color:#64748b; font-size:13px; transition:.2s; }
footer ul a:hover { color:#94a3b8; }
.footer-bottom { max-width:1200px; margin:0 auto; border-top:1px solid #1e293b; padding-top:24px; display:flex; justify-content:space-between; font-size:12px; }

/* ── CONTACT FORM ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:start; }
.contact-info h3 { font-size:20px; font-weight:700; color:#0f172a; margin-bottom:8px; }
.contact-info p { color:#64748b; font-size:14px; line-height:1.7; margin-bottom:28px; }
.contact-item { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.contact-item-icon { width:42px; height:42px; background:#eff6ff; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#3b82f6; font-size:16px; flex-shrink:0; }
.contact-item-text .label { font-size:12px; color:#94a3b8; }
.contact-item-text .val { font-size:14px; color:#0f172a; font-weight:600; }
.contact-form { background:#f8fafc; border:1px solid #e2e8f0; border-radius:20px; padding:36px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }
.form-group input,.form-group textarea,.form-group select { width:100%; background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; padding:11px 14px; font-size:14px; color:#0f172a; transition:.2s; }
.form-group input:focus,.form-group textarea:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.1); }
.form-group textarea { min-height:120px; resize:vertical; }
.alert { padding:12px 16px; border-radius:10px; font-size:14px; margin-bottom:18px; }
.alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#16a34a; }
.alert-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }

/* ── FEATURES PAGE ── */
.feat-category { margin-bottom:56px; }
.feat-category h2 { font-size:20px; font-weight:800; color:#0f172a; margin-bottom:24px; padding-bottom:12px; border-bottom:2px solid #f1f5f9; display:flex; align-items:center; gap:10px; }
.feat-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.feat-item { display:flex; align-items:flex-start; gap:12px; padding:16px; background:#f8fafc; border-radius:12px; }
.feat-item i { color:#3b82f6; font-size:16px; margin-top:2px; }
.feat-item div h4 { font-size:14px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.feat-item div p { font-size:13px; color:#64748b; line-height:1.5; }

/* ── CODE BLOCK ── */
.code-block { background:#0f172a; border-radius:14px; padding:24px; margin:20px 0; }
.code-block pre { color:#7dd3fc; font-family:monospace; font-size:14px; line-height:1.8; overflow-x:auto; }
.code-block .comment { color:#475569; }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .nav-links { display:none; position:absolute; top:68px; left:0; right:0; background:#fff; flex-direction:column; border-bottom:1px solid #e2e8f0; padding:12px; }
  .nav-links.open { display:flex; }
  .hamburger { display:block; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .hero-stats { gap:24px; }
  .cta-banner { margin:0 12px 60px; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
}