
:root{
  --bg: #0b1220;
  --ink: #0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --brand:#0ea5e9;
  --brand-2:#0369a1;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --ring: rgba(14,165,233,.35);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.lead{color:var(--muted);max-width:750px}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e5e7eb;z-index:50}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{height:44px;width:auto;border-radius:12px}
.brand-text{display:flex;flex-direction:column}
.tagline{font-size:12px;color:var(--muted)}

.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--brand)}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid #e5e7eb;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.ghost{background:transparent}
.btn.w100{width:100%;text-align:center}

#nav-toggle{display:none}
.burger{display:none;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}

@media (max-width: 880px){
  .burger{display:block}
  .nav{position:fixed;inset:72px 0 auto 0;background:white;border-bottom:1px solid #e5e7eb;padding:16px;display:none;flex-direction:column}
  #nav-toggle:checked ~ .burger + .nav{display:flex}
}

.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:36px;align-items:center;padding:56px 0}
.hero h1{font-size:42px;line-height:1.1;margin:0}
.hero p{color:var(--ink-2)}
.hero-ctas{display:flex;gap:12px;margin-top:16px}
.hero-visual{min-height:300px}
.video-placeholder{position:relative;border:1px solid #e2e8f0;background:linear-gradient(180deg,#fff,#f8fafc);height:100%;border-radius:24px;box-shadow:0 8px 28px rgba(2,8,23,.08)}
.video-placeholder .chip{position:absolute;bottom:16px;left:16px;background:#0ea5e9;color:white;padding:6px 10px;border-radius:999px;font-size:12px;margin-right:8px;box-shadow:0 6px 16px rgba(14,165,233,.35)}
.video-placeholder .chip + .chip{left:auto;right:16px;background:#111827}
.trust{display:flex;gap:16px;color:var(--muted);font-size:14px;margin-top:16px;padding:0}
.trust li{list-style: none}

@media (max-width: 880px){
  .hero{grid-template-columns:1fr}
}

.trustbar{background:#fff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.trustbar-inner{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;color:var(--muted);padding:16px 0}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.card{border:1px solid #e5e7eb;border-radius:var(--radius);padding:18px;background:#fff;box-shadow:0 4px 16px rgba(2,8,23,.04)}
.card h3{margin-top:0;margin-bottom:6px}
.card ul{padding-left:18px}
.card .btn{margin-top:12px}
@media (max-width: 1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 620px){.cards{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.step{border:1px dashed #d1d5db;border-radius:var(--radius);padding:18px;background:#fff}
.step-number{width:28px;height:28px;border-radius:999px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;font-weight:700}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.mini{color:var(--muted)}

@media (max-width: 880px){
  .steps,.grid-3{grid-template-columns:1fr}
}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.price-card{border:1px solid #e5e7eb;border-radius:var(--radius);padding:18px;background:#fff;box-shadow:0 6px 20px rgba(2,8,23,.04)}
.price-card .price-top{display:flex;align-items:center;justify-content:space-between}
.price-card .tag{background:var(--surface-2);color:#111827;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;font-size:12px}
.price-card .price{font-size:32px;font-weight:800;margin:8px 0}
.price-card.highlight{border-color:var(--brand);box-shadow:0 10px 26px rgba(14,165,233,.18)}
@media (max-width: 880px){.pricing{grid-template-columns:1fr}}

.embed{border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden;background:#fff}
.embed-placeholder{padding:36px;color:var(--muted);text-align:center}

.about{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:12px}
.about-card{border:1px solid #e5e7eb;border-radius:var(--radius);padding:16px;background:#fff}
.testimonials blockquote{border-left:4px solid var(--brand);padding:8px 12px;margin:0 0 12px 0;background:#f8fafc;border-radius:8px}
.testimonials span{color:var(--muted)}
@media (max-width: 880px){.about{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr}}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
label{display:block;margin:8px 0 6px 0;color:#111827;font-weight:600}
input,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #d1d5db;font:inherit;outline:none}
input:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.actions{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.muted{color:var(--muted)}

@media (max-width: 880px){.contact-grid{grid-template-columns:1fr}}

.site-footer{border-top:1px solid #e5e7eb;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0}
.foot-brand{font-weight:800}
.footer-nav a{color:var(--ink-2);text-decoration:none;margin-left:16px}
.footer-nav a:hover{color:var(--brand)}
