/* Base */
* { box-sizing: border-box; }
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #2563eb;
  --success: #16a34a;
  --ring: 0 10px 24px rgba(37,99,235,.18);
  --ring-green: 0 10px 24px rgba(22,163,74,.18);
  --card: #ffffff;
  --border: #e5e7eb;
}
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans'; }
img { display:block; max-width:100%; }
.container { width:min(1120px,92%); margin-inline:auto; }
.container.narrow { width:min(980px,92%); }
.center { text-align:center; }
.muted { color:var(--muted); }
.gradient { background: linear-gradient(90deg,#2563eb,#22c55e); -webkit-background-clip:text; background-clip:text; color:transparent; }
.accent { color: var(--success); }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter: saturate(160%) blur(6px); border-bottom:1px solid var(--border); }
.header-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand { display:flex; gap:10px; align-items:center; font-weight:800; }
.nav { display:flex; gap:18px; align-items:center; }
.nav a { color:#334155; text-decoration:none; font-weight:600; }
.nav a:hover { color:#0f172a; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:12px 18px; text-decoration:none; font-weight:700; transition:transform .05s ease, box-shadow .2s ease, background .2s ease; }
.btn-sm { padding:8px 14px; font-size:14px; }
.btn-lg { padding:16px 22px; font-size:18px; }
.btn-xl { padding:18px 26px; font-size:20px; }
.btn-primary { background:var(--primary); color:white; box-shadow: var(--ring); }
.btn-primary:hover { background:#1d4ed8; }
.btn-success { background:var(--success); color:white; box-shadow: var(--ring-green); }
.btn-success:hover { background:#15803d; }

/* Hero */
.hero { padding:64px 0 28px; }
.badge { display:inline-flex; gap:8px; align-items:center; background:#e8f5ee; border:1px solid #bbf7d0; padding:8px 12px; border-radius:999px; color:#14532d; font-weight:700; }
.hero h1 { font-size: clamp(32px, 5vw, 56px); line-height:1.1; margin:18px 0 8px; }
.lead { font-size: clamp(16px, 2.4vw, 20px); color:#374151; max-width:900px; }
.tick-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.tick-list li { position:relative; padding-left:28px; }
.tick-list li::before { content:''; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%; background:#e7f7ee; border:2px solid #22c55e; box-shadow: inset 0 0 0 3px white; }
.hero-cta { display:flex; gap:16px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.slots { color:#64748b; display:flex; gap:8px; align-items:center; }
.trust-row { display:flex; gap:24px; color:#334155; flex-wrap:wrap; margin-top:22px; }
.ti { width:18px; height:18px; margin-right:6px; fill:none; display:inline-block; }

/* Preview */
.preview { padding: 24px 0; }
.video-card { text-align:center; background: linear-gradient(180deg,#f3f4f6,#ffffff); border:1px solid var(--border); border-radius:20px; padding:40px 24px; box-shadow: 0 22px 48px rgba(2,6,23,.06); }
.play { border:0; background:white; border-radius:999px; padding:14px; border:2px solid #dbeafe; cursor:pointer; }
.stats { margin-top:16px; display:grid; grid-template-columns: repeat(3,1fr); gap:12px; background: linear-gradient(90deg,#e8f5ee,#f0f9ff); border:1px solid var(--border); border-radius:16px; padding:16px; }
.stat { text-align:center; }
.stat .num { font-size:28px; font-weight:800; }
.stat .lbl { color:#475569; }

/* Social Proof */
.social-proof { padding:48px 0; }
.social-proof h2 { text-align:center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom:8px; }
.testimonials { margin-top:22px; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.t-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow: 0 16px 36px rgba(2,6,23,.06); }
.t-quote { line-height:1.6; }
.t-person { display:flex; gap:12px; align-items:center; margin-top:14px; }
.t-person img { width:40px; height:40px; border-radius:50%; background:#e5e7eb; }
.kpi-row { margin-top:22px; display:grid; grid-template-columns: repeat(4,1fr); gap:12px; text-align:center; }
.kpi { font-size:28px; font-weight:800; }
.kpi-row .lbl { color:#64748b; display:block; }

/* Value */
.value { padding:48px 0; }
.value h2 { text-align:center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom:8px; }
.value-list { list-style:none; margin:22px 0; padding:0; display:grid; gap:12px; }
.value-list li { display:flex; align-items:center; justify-content:space-between; gap:18px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: 0 12px 28px rgba(2,6,23,.05); }
.v-left { display:flex; gap:12px; align-items:flex-start; }
.ico { display:inline-flex; width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; }
.ico img { width:24px; height:24px; }
.bg-blue { background:#DBEAFE; } .bg-green{ background:#DCFCE7; } .bg-purple{ background:#E9D5FF; } .bg-orange{ background:#FFE4B5; } .bg-red{ background:#FEE2E2; } .bg-slate{ background:#E2E8F0; }
.price-pill { background:#E9F5EC; border:1px solid #CFF3D8; color:#14532d; padding:8px 12px; border-radius:999px; font-weight:800; white-space:nowrap; }
.price-pill.ghost { background:#f1f5f9; border-color:var(--border); color:#334155; }

.pricing { margin-top:18px; text-align:center; background: linear-gradient(180deg,#e8f5ee,#f0fdf4); border:1px solid #dcfce7; border-radius:20px; padding:28px 16px; box-shadow: 0 24px 48px rgba(16,185,129,.12); }
.tv { color:#64748b; font-weight:700; }
.tv-num { color:#64748b; font-size:28px; }
.sp { margin-top:8px; color:#065f46; font-weight:800; }
.sp-num { font-size: clamp(36px, 6vw, 56px); color:#16a34a; font-weight: 800; line-height:1; margin: 6px 0 12px; }
.tiny { margin-top:8px; font-size:14px; }

/* Why */
.why { padding:48px 0; }
.feature-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:18px; }
.feature { background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: 0 12px 28px rgba(2,6,23,.04); }
.feature h3 { margin:10px 0 6px; }

/* Coach */
.coach { padding:48px 0; }
.coach-row { display:grid; grid-template-columns: 340px 1fr; gap:24px; align-items:center; }
.coach-photo img { border-radius:18px; border:1px solid var(--border); box-shadow: 0 16px 36px rgba(2,6,23,.06); }
.dot-list { margin:14px 0; padding-left:18px; }
.dot-list li { margin:6px 0; }

/* Footer */
.site-footer { border-top:1px solid var(--border); padding:24px 0; background:#fafafa; }
.foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-left { display:flex; gap:10px; align-items:center; color:#475569; }
.foot-right { display:flex; gap:16px; }
.foot-right a { color:#475569; text-decoration:none; }
.foot-right a:hover { color:#111827; }

/* Responsive */
@media (max-width: 980px) {
  .testimonials { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2,1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .coach-row { grid-template-columns: 1fr; }
}
