* { margin:0;padding:0;box-sizing:border-box}
:root { --bg:#fff;--bg2:#f8f9fa;--txt:#1a1a1a;--txt2:#666;--border:#e5e5e5;--accent:#1a1a1a;--accent2:#0066ff;--radius:8px;--shadow:0 2px 8px rgba(0,0,0,.08);--transition:all .2s ease}
[data-theme="dark"] { --bg:#0d0d0d;--bg2:#1a1a1a;--txt:#f5f5f5;--txt2:#999;--border:#2a2a2a;--accent:#fff;--shadow:0 2px 8px rgba(0,0,0,.3)}
html { scroll-behavior:smooth}
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:var(--txt);background:var(--bg);transition:var(--transition)}
a { color:inherit;text-decoration:none;transition:var(--transition)}
ul,ol { list-style:none}
img { max-width:100%;display:block}
.container { max-width:1200px;margin:0 auto;padding:0 24px}
header { position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;transition:var(--transition)}
[data-theme="dark"] header { background:rgba(13,13,13,.9)}
header .container { display:flex;justify-content:space-between;align-items:center;height:64px}
.logo { font-size:20px;font-weight:700;letter-spacing:-.5px}
.logo:hover { opacity:.7}
nav { display:flex;align-items:center;gap:8px}
nav a { padding:8px 16px;font-size:14px;font-weight:500;color:var(--txt2);border-radius:var(--radius)}
nav a:hover,nav a.active { color:var(--txt);background:var(--bg2)}
.nav-cta { background:var(--accent)!important;color:var(--bg)!important}
.nav-cta:hover { opacity:.85!important}
.theme-toggle { width:36px;height:36px;border:none;background:var(--bg2);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.theme-toggle:hover { transform:scale(1.1)}
.theme-toggle svg { width:18px;height:18px;stroke:var(--txt)}
.mobile-toggle { display:none;width:36px;height:36px;border:none;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.mobile-toggle span { width:20px;height:2px;background:var(--txt);transition:var(--transition)}
main { min-height:calc(100vh - 64px)}
.hero { padding:100px 0 80px;text-align:center}
.hero h1 { font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;letter-spacing:-1px;line-height:1.15;margin-bottom:20px;opacity:0;animation:fadeUp .6s ease forwards}
.hero p { font-size:1.25rem;color:var(--txt2);max-width:560px;margin:0 auto 32px;opacity:0;animation:fadeUp .6s ease .1s forwards}
.hero-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .6s ease .2s forwards}
.btn { display:inline-flex;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:600;border-radius:var(--radius);border:2px solid var(--accent);transition:var(--transition);cursor:pointer}
.btn-primary { background:var(--accent);color:var(--bg)}
.btn-primary:hover { transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-secondary { background:transparent;color:var(--txt)}
.btn-secondary:hover { background:var(--bg2)}
.stats { display:flex;justify-content:center;gap:48px;margin-top:64px;padding-top:48px;border-top:1px solid var(--border);opacity:0;animation:fadeUp .6s ease .3s forwards}
.stat { text-align:center}
.stat-value { font-size:2rem;font-weight:700;color:var(--accent2)}
.stat-label { font-size:13px;color:var(--txt2);margin-top:4px}
section { padding:80px 0}
section:nth-child(even) { background:var(--bg2)}
.section-header { text-align:center;margin-bottom:48px}
.section-header h2 { font-size:2rem;font-weight:700;letter-spacing:-.5px;margin-bottom:12px}
.section-header p { color:var(--txt2);max-width:500px;margin:0 auto}
.steps { display:flex;flex-direction:column;gap:24px;max-width:600px;margin:0 auto}
.step { display:flex;align-items:flex-start;gap:20px;padding:24px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.step:hover { border-color:var(--accent);transform:translateX(4px)}
.step-num { width:40px;height:40px;background:var(--accent);color:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.step-content h3 { font-size:1.1rem;font-weight:600;margin-bottom:4px}
.step-content p { font-size:14px;color:var(--txt2)}
.grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card { padding:32px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.card:hover { border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow)}
.card-icon { width:48px;height:48px;background:var(--bg2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card-icon svg { width:24px;height:24px;stroke:var(--accent)}
.card h3 { font-size:1.1rem;font-weight:600;margin-bottom:8px}
.card p { font-size:14px;color:var(--txt2);line-height:1.7}
.pricing { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.pricing-card { padding:40px;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius);text-align:center;transition:var(--transition);position:relative}
.pricing-card.featured { border-color:var(--accent);transform:scale(1.02)}
.pricing-card.featured::before { content:'Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--bg);padding:4px 16px;border-radius:20px;font-size:12px;font-weight:600}
.pricing-card:hover { transform:translateY(-4px);box-shadow:var(--shadow)}
.pricing-card.featured:hover { transform:scale(1.02) translateY(-4px)}
.pricing-card h3 { font-size:1.25rem;font-weight:600;margin-bottom:8px}
.price { font-size:3rem;font-weight:700;margin:16px 0}
.price span { font-size:1rem;color:var(--txt2);font-weight:400}
.pricing-features { margin:24px 0;text-align:left}
.pricing-features li { padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;display:flex;align-items:center;gap:8px}
.pricing-features li::before { content:'✓';color:var(--accent2);font-weight:700}
.list-check li { padding:12px 0;border-bottom:1px solid var(--border);font-size:15px;display:flex;align-items:center;gap:12px}
.list-check li::before { content:'✓';width:20px;height:20px;background:var(--bg2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--accent2);font-weight:700}
.list-x li::before { content:'✗';color:var(--txt2)}
.faq { max-width:700px;margin:0 auto}
.faq-item { border-bottom:1px solid var(--border)}
.faq-item summary { padding:20px 0;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::after { content:'+';font-size:1.5rem;color:var(--txt2);transition:var(--transition)}
.faq-item[open] summary::after { transform:rotate(45deg)}
.faq-item p { padding-bottom:20px;color:var(--txt2);font-size:15px}
.cta-section { text-align:center;padding:100px 0;background:var(--accent);color:var(--bg)}
[data-theme="dark"] .cta-section { background:var(--bg2);color:var(--txt)}
.cta-section h2 { font-size:2rem;font-weight:700;margin-bottom:16px}
.cta-section p { opacity:.8;margin-bottom:32px}
.cta-section .btn { border-color:var(--bg);color:var(--accent)}
.cta-section .btn:hover { background:var(--bg)}
[data-theme="dark"] .cta-section .btn { border-color:var(--txt);color:var(--txt)}
[data-theme="dark"] .cta-section .btn:hover { background:var(--txt);color:var(--bg)}
footer { padding:48px 0;border-top:1px solid var(--border);text-align:center}
footer p { font-size:14px;color:var(--txt2)}
footer nav { margin-top:16px;display:flex;justify-content:center;gap:24px}
footer nav a { font-size:13px;color:var(--txt2)}
footer nav a:hover { color:var(--txt)}
.contact-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.contact-card { padding:32px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.contact-card svg { width:32px;height:32px;stroke:var(--accent);margin-bottom:16px}
.contact-card h3 { font-size:1.1rem;font-weight:600;margin-bottom:8px}
.contact-card p { font-size:14px;color:var(--txt2)}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){
header .container { height:auto;padding:16px 24px;flex-wrap:wrap}
nav { display:none;width:100%;flex-direction:column;padding:16px 0;gap:4px}
nav.open { display:flex}
nav a { width:100%;text-align:center;padding:12px}
.mobile-toggle { display:flex}
.hero { padding:60px 0 48px}
.stats { flex-wrap:wrap;gap:24px}
.stat { flex:1 1 40%}
.pricing-card.featured { transform:none}
.pricing-card.featured:hover { transform:translateY(-4px)}
}