:root{
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --dark:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --soft:#f8fafc;
  --success:#16a34a;
}

body{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--dark);
  background:#fff;
}

a{ text-decoration:none; }

.navbar{
  background:rgba(255,255,255,.95);
  border-bottom:1px solid rgba(15,23,42,.06);
  backdrop-filter:blur(8px);
}

.brand-mark{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--brand), #60a5fa);
  color:#fff;font-weight:800;
}

.hero{
  padding:86px 0 56px;
  background: radial-gradient(circle at top right, rgba(37,99,235,.1), transparent 28%), linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
}
.hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#eff6ff;color:var(--brand);
  border:1px solid #dbeafe;border-radius:999px;
  padding:.45rem .9rem;font-size:.92rem;font-weight:700;
}
.hero h1{
  font-size:clamp(2.1rem, 6vw, 4rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
}
.hero p{
  color:var(--muted);
  font-size:1.05rem;
  max-width:650px;
}
.hero-card,
.feature-card,
.checkout-card,
.content-card,
.login-card,
.status-card,
.dashboard-card{
  border:1px solid rgba(15,23,42,.07);
  border-radius:24px;
  box-shadow:0 20px 40px rgba(15,23,42,.05);
  background:#fff;
}

.preview-shell{
  border-radius:28px;
  background:#0f172a;
  padding:14px;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
}
.preview-screen{
  aspect-ratio:16/9;
  border-radius:18px;
  background:linear-gradient(135deg,#111827,#1e293b);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  position:relative;
}
.preview-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.45));
}
.preview-overlay{
  position:relative;
  z-index:2;
  padding:1.3rem;
  color:#fff;
}

.section-pad{ padding:72px 0; }
.section-title{ font-size:clamp(1.8rem,4vw,2.5rem); font-weight:800; }
.section-sub{ color:var(--muted); max-width:700px; }

.icon-badge{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:#eff6ff;color:var(--brand);
  font-size:1.25rem;
}

.checkout-card{
  position:sticky; top:96px;
}
.price-line .old{ color:#94a3b8; text-decoration:line-through; }
.price-line .new{ font-size:2.3rem; font-weight:800; color:var(--dark); }
.small-muted{ color:var(--muted); }

.form-control, .form-select{
  border-radius:14px;
  border:1px solid #dbe3ef;
  padding:.85rem 1rem;
}
.form-control:focus, .form-select:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 .2rem rgba(37,99,235,.12);
}
.btn-brand{
  background:var(--brand);
  border-color:var(--brand);
  border-radius:14px;
  padding:.9rem 1.2rem;
  font-weight:700;
}
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-soft{
  border-radius:14px;
  padding:.9rem 1.2rem;
  font-weight:700;
}

.faq-item{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.footer{
  background:#0b1220;
  color:#cbd5e1;
}
.footer a{ color:#fff; }

.dashboard-sidebar{
  min-height:100vh;
  background:#0b1220;
  color:#fff;
}
.dashboard-sidebar .nav-link{
  color:#cbd5e1;
  border-radius:12px;
  padding:.8rem .9rem;
}
.dashboard-sidebar .nav-link.active,
.dashboard-sidebar .nav-link:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.video-embed-placeholder{
  aspect-ratio:16/9;
  border-radius:18px;
  background:linear-gradient(135deg,#0f172a,#334155);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
}

.badge-soft{
  background:#eff6ff;
  color:var(--brand);
  border-radius:999px;
  padding:.4rem .8rem;
}

@media (max-width: 991.98px){
  .checkout-card{ position:static; }
  .dashboard-sidebar{ min-height:auto; }
}