:root {
  --bg: #f6f9ff;
  --bg-soft: #eef5ff;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: #ffffff;
  --line: #dde8fa;
  --text: #12244a;
  --muted: #617391;
  --blue: #2563eb;
  --blue-2: #60a5fa;
  --navy: #0d1b43;
  --gold: #f4b64f;
  --green: #1db87b;
  --shadow: 0 18px 50px rgba(35, 65, 120, 0.10);
  --shadow-soft: 0 12px 28px rgba(20, 42, 84, 0.06);
  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.18), transparent 26%),
    radial-gradient(circle at 100% 12%, rgba(255, 217, 127, 0.18), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(37, 99, 235, 0.08), transparent 30%),
    linear-gradient(180deg, #f6f9ff 0%, #f1f7ff 38%, #ffffff 100%);
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
input, textarea, select, button { font: inherit; }
.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
.narrow { max-width: 820px; }

header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid rgba(221,232,250,0.9);
}
.nav { min-height: 74px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.brand img { height:42px; }
.brand-title { font-family:"Outfit",sans-serif; font-size:0.98rem; font-weight:800; color:var(--navy); display:block; }
.brand-sub { margin-top:4px; font-size:0.72rem; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; font-weight:700; display:block; }
.nav-links { display:flex; list-style:none; gap:30px; align-items:center; padding:0; }
.nav-links a { color:var(--muted); font-weight:800; font-size:0.93rem; }
.nav-actions { display:flex; gap:12px; align-items:center; }

.hero { padding: 40px 0 56px; }
.hero-grid, .split, .cta-wrap, .why-showcase { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.hero-copy h1, h2, h3, h4 { font-family:"Outfit",sans-serif; color:var(--navy); letter-spacing:-0.04em; margin:0; }
.hero-copy h1 { font-size: clamp(2.6rem, 5.4vw, 4.7rem); line-height:0.93; font-weight:800; }
.hero-copy p, .section-head p, .why-mini-content p, .cta-copy p, .form-card p, .status-card p, .site-footer p { line-height:1.72; color:var(--muted); }
.text-blue { color: var(--blue); }
.text-gold { color: #df9f2f; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,0.78); border:1px solid #d8e8ff; box-shadow:0 10px 22px rgba(34,66,122,0.05); color:var(--blue); font-size:0.68rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; }
.eyebrow .dot { width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--blue-2)); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 20px; border-radius:999px; border:1px solid transparent; font-weight:800; cursor:pointer; white-space:nowrap; font-size:0.92rem; }
.btn-large { min-height: 56px; padding-inline: 28px; }
.btn-primary { background:linear-gradient(135deg, var(--blue), var(--blue-2)); color:#fff; box-shadow:0 18px 40px rgba(37,99,235,0.22); }
.btn-secondary { background:rgba(255,255,255,0.9); color:var(--navy); border-color:#dae8fb; box-shadow:0 10px 26px rgba(16,37,74,0.05); }
.chip-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.chip { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,0.84); border:1px solid #dce9fb; color:var(--navy); font-size:0.82rem; font-weight:700; box-shadow:0 8px 18px rgba(16,37,74,0.04); }
.chip i { color:var(--green); }
.hero-cta, .form-actions, .pay-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.hero-stats, .steps, .audience-grid, .b2b-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; }
.stat, .step, .audience-card, .b2b-card, .price-box, .summary-box {
  background: rgba(255,255,255,0.82); border:1px solid #dfebf8; border-radius:20px; padding:18px; box-shadow:var(--shadow-soft);
}
.stat strong { display:block; font-family:"Outfit",sans-serif; font-size:1.55rem; color:var(--navy); }
.stat strong span { color:var(--blue); }
.stat small, .step p, .audience-card p, .b2b-card p { color:var(--muted); font-size:0.9rem; font-weight:600; }
.hero-visual { position:relative; min-height:560px; }
.visual-card { position:absolute; background:#fff; border:1px solid #e2ecfa; border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
.card-main { top:0; right:0; width:72%; height:74%; }
.card-small-left { bottom:0; left:0; width:45%; height:42%; }
.card-small-right { bottom:8%; right:7%; width:37%; height:28%; }
.visual-card img { width:100%; height:100%; object-fit:cover; }
.floating-badge { position:absolute; z-index:2; background:rgba(255,255,255,0.92); border:1px solid #dfeaf9; box-shadow:0 16px 30px rgba(16,37,74,0.08); border-radius:16px; padding:12px 13px; min-width:180px; max-width:240px; }
.badge-1 { top:8%; left:-1%; }
.badge-2 { bottom:24%; left:26%; }
.floating-badge strong { display:block; font-size:0.92rem; color:var(--navy); font-family:"Outfit",sans-serif; }
.floating-badge small { display:block; margin-top:6px; color:var(--muted); line-height:1.5; font-size:0.76rem; font-weight:600; }
.trust-strip { padding:0 0 24px; }
.trust-box, .report-card, .video-card, .form-card, .status-card, .why-main, .why-mini-card, .cta-wrap {
  background: rgba(255,255,255,0.9); border:1px solid #e2ebf9; border-radius:24px; box-shadow:var(--shadow); padding:22px;
}
.trust-box { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.section { padding:76px 0; }
.section-alt { background: linear-gradient(180deg, rgba(239,246,255,0.72), rgba(255,255,255,0.94)); border-top:1px solid rgba(221,232,250,0.75); border-bottom:1px solid rgba(221,232,250,0.75); }
.section-head { max-width:780px; margin:0 auto 38px; text-align:center; }
.section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height:0.98; font-weight:800; }
.why-showcase { grid-template-columns: 1.12fr 0.88fr; align-items:stretch; }
.why-main { position:relative; min-height:560px; overflow:hidden; padding:0; }
.why-main img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.why-main-badge { position:absolute; left:18px; right:18px; bottom:18px; background:rgba(255,255,255,0.94); border:1px solid rgba(226,235,249,0.96); border-radius:18px; padding:16px 18px; }
.why-side { display:grid; gap:18px; }
.why-mini-card { display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:stretch; overflow:hidden; min-height:250px; padding:0; }
.why-mini-image img { width:100%; height:100%; object-fit:cover; }
.why-mini-content { padding:18px 18px 18px 0; display:flex; flex-direction:column; justify-content:center; }
.step-num, .icon {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, #e8f3ff, #f1f8ff); border:1px solid #d8e7f9; color:var(--blue); font-family:"Outfit",sans-serif; font-weight:800; margin-bottom:14px;
}
.report-mock { margin-top:18px; border-radius:18px; overflow:hidden; border:1px solid #d9e6f8; background:#f8fbff; }
.report-top { background: linear-gradient(135deg, var(--navy), #24438f); color:#fff; padding:16px 18px; }
.report-top small { display:block; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; opacity:0.82; font-weight:800; }
.report-top strong { display:block; margin-top:8px; font-size:1.12rem; font-family:"Outfit",sans-serif; }
.report-body { padding:16px; display:grid; gap:12px; }
.mock-section { background:#fff; border:1px solid #e0ebf9; border-radius:14px; padding:14px; }
.mock-kicker { color:var(--blue); font-size:0.75rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.mock-title { margin-top:8px; font-weight:800; color:var(--navy); font-family:"Outfit",sans-serif; }
.bar { margin-top:12px; }
.bar label { display:flex; justify-content:space-between; font-size:0.82rem; color:var(--muted); font-weight:800; margin-bottom:6px; }
.bar-track { height:9px; border-radius:999px; background:#dce8fa; overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--blue), var(--blue-2)); }
.real-video-wrap { margin-top:18px; display:flex; justify-content:center; align-items:center; padding:14px; border-radius:20px; background:linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%); border:1px solid #dce8f8; }
.real-video { width:min(100%, 320px); aspect-ratio:9/16; border-radius:18px; border:1px solid #d9e6f8; background:#000; object-fit:cover; }
.video-note { margin-top:12px; padding:12px 14px; border-radius:14px; background:#f7fbff; border:1px solid #e0ebf9; color:var(--muted); font-size:0.86rem; font-weight:600; }
.cta-wrap { grid-template-columns: 0.95fr 1.05fr; align-items:stretch; }
.price-strip { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.price-box.highlight, .summary-box.highlight { background: linear-gradient(135deg, #edf5ff, #fff8ea); border-color:#cfe0fb; }
.price-label, .summary-box span { display:block; font-size:0.72rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#6c7f9f; margin-bottom:6px; }
.price-box strong, .summary-box strong { display:block; font-family:"Outfit",sans-serif; font-size:1.55rem; color:#0f1f49; }
.advance-note, .small-note { margin-top:10px; padding:12px 14px; border-radius:14px; background:#f7fbff; border:1px solid #e1ebf8; color:#62718d; font-size:0.88rem; font-weight:600; }
.cta-info-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px; }
.cta-info-card { display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:16px; background:rgba(255,255,255,0.76); border:1px solid #e0ebf8; box-shadow:var(--shadow-soft); }
.cta-info-card i { width:38px; height:38px; flex:0 0 38px; border-radius:12px; display:grid; place-items:center; color:var(--blue); background:linear-gradient(135deg, #eef6ff, #f7fbff); border:1px solid #deebfa; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:14px; }
.field { display:grid; gap:8px; }
.field.full { grid-column:1 / -1; }
.field label { font-size:0.8rem; color:var(--navy); font-weight:800; }
.field input, .field select, .field textarea {
  width:100%; min-height:46px; padding:0 14px; border-radius:14px; border:1px solid #d9e7f8; background:rgba(251,253,255,0.94); color:var(--text); outline:none; font-weight:600; font-size:0.92rem;
}
.field textarea { min-height:104px; padding-top:12px; resize:vertical; }
.field ul.errorlist, .form-errors ul { margin:0; padding-left:18px; color:#b42318; font-size:0.82rem; }
.form-errors { margin-top: 10px; }
.note { margin-top:12px; font-size:0.8rem; color:var(--muted); font-weight:600; }
.page-shell { padding: 56px 0 96px; }
.status-card { text-align:left; }
.status-card h1 { font-size: clamp(2rem,4vw,3rem); margin: 12px 0; }
.status-pill { display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; background:#edf5ff; color:var(--blue); font-weight:800; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; }
.status-pill.success { background:#e9fff4; color:#198754; }
.status-pill.failed { background:#fff2f0; color:#b42318; }
.summary-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:22px 0; }
.summary-grid-two { grid-template-columns:repeat(2, minmax(0,1fr)); }
.booking-meta { background:#f7fbff; border:1px solid #e1ebf8; border-radius:16px; padding:16px; }
.booking-meta p { margin: 0 0 10px; }
.booking-meta p:last-child { margin-bottom: 0; }
.failure-text { color:#b42318 !important; font-weight:700; }
.messages-wrap { padding-top: 16px; }
.message { padding:14px 16px; border-radius:14px; margin:10px 0; font-weight:700; }
.message-error { background:#fff1f2; color:#b42318; border:1px solid #fecdd3; }
.message-success { background:#ecfdf3; color:#067647; border:1px solid #abefc6; }
.site-footer { border-top:1px solid #dfeaf9; margin-top:20px; padding:24px 0 48px; }
.footer-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; font-weight:700; color:var(--muted); }

@media (max-width: 1140px) {
  .hero-grid, .split, .cta-wrap, .why-showcase { grid-template-columns:1fr; }
  .hero-stats, .steps, .audience-grid, .b2b-grid, .form-grid, .price-strip, .summary-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .why-side { grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-links, .nav-actions { display:none; }
  .hero-stats, .steps, .audience-grid, .b2b-grid, .form-grid, .price-strip, .summary-grid, .why-side { grid-template-columns:1fr; }
  .trust-box, .footer-inner { grid-template-columns:1fr; display:grid; }
  .hero-visual { min-height:420px; }
  .why-mini-card { grid-template-columns:1fr; }
  .why-mini-content { padding:18px; }
}
@media (max-width: 560px) {
  .container { width:min(var(--container), calc(100% - 20px)); }
  .hero-copy h1, .status-card h1 { font-size: clamp(2rem,10vw,3.5rem); }
  .hero-cta, .form-actions, .pay-actions { flex-direction:column; align-items:stretch; }
  .btn { width:100%; }
  .brand-sub { display:none; }
  .hero-visual { min-height:360px; }
  .visual-card { border-radius:18px; }
  .badge-1 { left: 4px; top: 8px; }
  .badge-2 { left: 18%; bottom: 14%; }
}