:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --muted:#5b6472;
  --accent:#6d28d9;
  --accent-2:#0891b2;
  --card:#ffffff;
  --card-border:#e2e8f0;
  --text:#0f172a;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,system-ui,Arial, sans-serif;background:var(--bg);color:var(--text);line-height:1.4}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.site-header{border-bottom:1px solid var(--card-border);position:sticky;top:0;background:rgba(255,255,255,0.9);backdrop-filter:blur(6px);z-index:20}
#features,#providers,#screenshots,#pricing,#faq,#contact{scroll-margin-top:110px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-weight:700;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:0.5rem}
.logo img{display:block}
.main-nav a{color:var(--muted);margin-left:1rem;text-decoration:none}
.main-nav a:hover{color:var(--text)}
.nav-toggle{display:none;background:none;border:0;color:var(--muted);font-size:1.25rem}
.hero{padding:4rem 0;text-align:center}
.eyebrow{display:inline-block;color:var(--accent-2);font-size:0.8rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:0.75rem;font-weight:600}
.hero h1{font-size:2.1rem;margin:0 0 0.5rem}
.lead{color:var(--muted);max-width:800px;margin:0 auto 1.25rem}
.hero-stats{display:flex;justify-content:center;gap:2.5rem;margin-top:2rem}
.stat{display:flex;flex-direction:column;align-items:center}
.stat strong{font-size:1.6rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:0.85rem}
.btn{display:inline-block;padding:0.6rem 1rem;border-radius:8px;background:transparent;color:var(--text);text-decoration:none;border:1px solid var(--card-border)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:white}
.btn.secondary{border:1px solid var(--card-border);color:var(--text)}
.btn:hover{border-color:var(--accent)}
.btn.primary:hover{opacity:0.92}
.features .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;align-items:stretch}
.section-lead{color:var(--muted);margin:0 0 1.25rem}
.feature{background:var(--card);padding:1.25rem;border-radius:12px;border:1px solid var(--card-border);box-shadow:0 1px 2px rgba(15,23,42,0.04);display:flex;flex-direction:column;gap:0.65rem;transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease}
.feature:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,0.08);border-color:rgba(109,40,217,0.3)}
.feature-icon{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(147,51,234,0.12)}
.feature:nth-child(6n+2) .feature-icon{background:rgba(234,88,12,0.12)}
.feature:nth-child(6n+3) .feature-icon{background:rgba(219,39,119,0.12)}
.feature:nth-child(6n+4) .feature-icon{background:rgba(101,163,13,0.13)}
.feature:nth-child(6n+5) .feature-icon{background:rgba(202,138,4,0.13)}
.feature:nth-child(6n) .feature-icon{background:rgba(220,38,38,0.1)}
.feature h3{margin:0;font-size:1rem;line-height:1.3}
.feature p{margin:0;color:var(--muted);font-size:0.92rem;line-height:1.55}
.provider-group{margin-top:1.75rem}
.provider-group:first-of-type{margin-top:1.25rem}
.provider-group h3{margin:0 0 0.15rem;font-size:1.05rem}
.provider-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.75rem;margin-top:0.75rem}
.provider-tile{background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:0.85rem 0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;text-align:center;transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease}
.provider-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,0.08);border-color:rgba(109,40,217,0.3)}
.provider-tile img{width:28px;height:28px;object-fit:contain}
.provider-tile span{font-size:0.78rem;color:var(--text);line-height:1.2}
.providers-note{margin-top:2rem}
.screenshots .shot{margin:0 0 2rem;text-align:center}
.screenshots .shot img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--card-border);box-shadow:0 8px 24px rgba(15,23,42,0.08)}
.screenshots figcaption{color:var(--muted);margin-top:0.6rem;font-size:0.9rem}
.how-it-works .steps{display:flex;flex-wrap:wrap;gap:1rem}
.step{flex:1 1 220px;background:var(--card);padding:1rem;border-radius:8px;border:1px solid var(--card-border)}
.testimonials .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.quote{background:var(--card);padding:1rem;border-radius:10px;margin:0;border:1px solid var(--card-border);border-left:3px solid var(--accent)}
.quote p{margin:0 0 0.5rem;color:var(--text)}
.quote cite{color:var(--muted);font-style:normal;font-size:0.85rem}
.muted{color:var(--muted)}
.muted.small{font-size:0.85rem}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:1rem;align-items:stretch}
.card{background:var(--card);padding:1.5rem;border-radius:12px;border:1px solid var(--card-border);box-shadow:0 1px 2px rgba(15,23,42,0.04);display:flex;flex-direction:column;transition:transform 0.15s ease,box-shadow 0.15s ease}
.card.popular{box-shadow:0 10px 30px rgba(109,40,217,0.14);border-color:rgba(109,40,217,0.35)}
.card.coming-soon{background:#f8fafc;border-style:dashed}
.card.coming-soon .card-price{color:var(--muted)}
.card.coming-soon .btn{opacity:0.6;cursor:not-allowed}
.badge{display:inline-block;font-size:0.7rem;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;color:var(--accent-2);background:rgba(8,145,178,0.1);border-radius:999px;padding:0.15rem 0.55rem;margin-left:0.5rem;vertical-align:middle}
.card-header{font-weight:700;font-size:1.05rem;margin-bottom:0.6rem}
.card-price{font-size:1.6rem;font-weight:700;margin-bottom:0.3rem;display:flex;align-items:center;flex-wrap:wrap;gap:0.4rem}
.card-price .badge{margin-left:0}
.card-trial{font-size:0.8rem;font-weight:600;color:var(--accent);margin:0 0 1rem}
.pricing-promo{margin:0 0 1.25rem}
.card-features{list-style:none;padding:0;margin:0 0 1.5rem 0;color:var(--muted);display:flex;flex-direction:column;gap:0.6rem;flex:1}
.card-features li{position:relative;padding-left:1.35rem;font-size:0.9rem;line-height:1.45}
.card-features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent-2);font-weight:700}
.card.coming-soon .card-features li::before{color:var(--muted)}
.card-cta{text-align:center;margin-top:auto}
.compare-table-wrap{overflow-x:auto;margin-top:2rem}
.compare-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden;border:1px solid var(--card-border)}
.compare-table th,.compare-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--card-border)}
.compare-table th{color:var(--text);background:#f1f5f9}
.compare-table td{color:var(--muted)}
.compare-table tr:last-child td{border-bottom:none}
.faq .accordion{margin-top:1rem}
.qa{margin-bottom:0.5rem}
.q{width:100%;text-align:left;background:var(--card);border:1px solid var(--card-border);padding:0.75rem;border-radius:6px;color:var(--text);cursor:pointer}
.q:hover{border-color:var(--accent)}
.a{display:none;padding:0.75rem;background:#f8fafc;border:1px solid var(--card-border);border-top:none;border-radius:0 0 6px 6px;margin-top:-1px;color:var(--muted)}
.site-footer{border-top:1px solid var(--card-border);padding:2rem 0;margin-top:2rem;color:var(--muted);background:var(--surface)}
.footer-inner{display:flex;flex-wrap:wrap;gap:2rem}
.footer-col{display:flex;flex-direction:column;gap:0.4rem;min-width:160px}
.footer-col a{color:var(--muted);text-decoration:none}
.footer-col a:hover{color:var(--text)}
.footer-heading{color:var(--text);font-weight:600;margin-bottom:0.25rem}
.footer-copyright{width:100%;margin-top:1rem;font-size:0.8rem;color:var(--muted)}
.contact{text-align:center;padding-top:1rem}
.contact .section-lead{margin-left:auto;margin-right:auto}
.contact-form{max-width:520px;margin:1.5rem auto 0;text-align:left;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:1.5rem;box-shadow:0 1px 2px rgba(15,23,42,0.04)}
.form-row{margin-bottom:1rem}
.form-row:last-of-type{margin-bottom:0}
.form-row label{display:block;font-size:0.85rem;font-weight:600;color:var(--text);margin-bottom:0.35rem}
.form-row input,.form-row textarea{width:100%;padding:0.55rem 0.7rem;border:1px solid var(--card-border);border-radius:8px;font-family:inherit;font-size:0.95rem;color:var(--text);background:#fff}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent)}
.form-row textarea{resize:vertical}
.form-status{min-height:1.2em;font-size:0.85rem;margin:0.75rem 0 0}
.form-status.error{color:#b91c1c}
.form-status.success{color:#15803d}
.contact .card-cta{margin-top:0.75rem}
.success{text-align:center;padding-top:3rem}
.success .logo{justify-content:center;margin-bottom:2rem}
.success h1{font-size:1.8rem}
.success p{color:var(--muted);max-width:600px;margin:0 auto 1rem}
.legal{max-width:760px;margin:0 auto;padding-top:2rem;padding-bottom:3rem}
.legal h1{font-size:1.9rem;margin:0 0 0.4rem}
.legal .updated{color:var(--muted);font-size:0.85rem;margin:0 0 1.5rem}
.legal h2{font-size:1.25rem;margin:2rem 0 0.75rem}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--text);line-height:1.65;margin:0 0 1rem}
.legal ul{color:var(--text);line-height:1.65;margin:0 0 1rem;padding-left:1.4rem}
.legal li{margin-bottom:0.4rem}
.legal a{color:var(--accent-2)}

@media (max-width:800px){
  .nav-toggle{display:block}
  .main-nav{display:none}
  .main-nav.open{display:flex;flex-direction:column;position:absolute;top:64px;right:1rem;background:var(--surface);padding:0.5rem;border-radius:8px;border:1px solid var(--card-border);box-shadow:0 8px 24px rgba(15,23,42,0.12)}
  .hero-stats{gap:1.25rem;flex-wrap:wrap}
  .footer-inner{flex-direction:column;gap:1rem}
}
