:root { --bg:#080b0d; --panel:#111619; --line:#293036; --ink:#f5f0e8; --muted:#a6afb0; --accent:#54c9a2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse 70% 36% at 50% 16%, rgba(84,201,162,.12), transparent 65%); }
.wrap { width:min(1040px,calc(100% - 40px)); margin-inline:auto; position:relative; }
.header { height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.09); }
.brand { display:flex; gap:11px; align-items:center; color:var(--ink); text-decoration:none; letter-spacing:.12em; font-weight:800; font-size:15px; }
.brand-logo { width:32px; height:32px; object-fit:cover; object-position:50% 28%; border-radius:50%; }
.header-note { color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; }
.hero { padding:78px 0 80px; text-align:center; }
.eyebrow { margin:0; color:var(--accent); font:500 11px 'DM Mono',monospace; letter-spacing:.12em; }
.eyebrow span { display:inline-block; width:6px; height:6px; border-radius:50%; margin:0 8px 1px 0; background:var(--accent); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:18px auto 19px; max-width:760px; font-size:clamp(38px,6vw,68px); line-height:1.02; letter-spacing:-.065em; }
.intro { max-width:565px; margin:0 auto 40px; color:var(--muted); font-size:16px; line-height:1.65; }
.vsl-shell { padding:0; background:transparent; }
.vsl-container { overflow:visible; background:#000; }
.vsl-container iframe,.vsl-container video { display:block; width:100%; height:100%; border:0; }
.vsl-placeholder { height:100%; display:grid; place-content:center; gap:10px; background:radial-gradient(circle at 50% 50%,rgba(84,201,162,.16),transparent 26%); }
.vsl-placeholder p { margin:3px 0 0; font-weight:700; font-size:16px; }.vsl-placeholder small { color:var(--muted); font-size:12px; }
.play-icon { width:58px; height:58px; margin:auto; border-radius:50%; background:var(--accent); position:relative; box-shadow:0 0 0 9px rgba(84,201,162,.12); }
.play-icon::after { content:""; position:absolute; left:23px; top:18px; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:16px solid #07110e; }
.video-caption { margin:14px 0 44px; color:#7c8788; font-size:12px; }
.offer-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 27px; text-align:left; border:1px solid var(--line); border-radius:14px; background:rgba(17,22,25,.78); }
.offer-label { margin:0 0 7px; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }.price { margin:0; font-size:38px; line-height:1; font-weight:800; letter-spacing:-.05em; }.price span { font-size:23px; }.payment { margin:6px 0 0; color:var(--muted); font-size:12px; }
.button { flex:none; display:inline-flex; justify-content:center; align-items:center; gap:24px; padding:16px 20px; border:0; border-radius:8px; background:var(--accent); color:#06110e; text-decoration:none; font:800 14px Manrope,Arial,sans-serif; cursor:pointer; transition:transform .2s, background .2s; }.button:hover { transform:translateY(-2px); background:#75dfbb; }
.features { padding:100px 0; border-top:1px solid rgba(255,255,255,.08); }.section-heading { text-align:center; }.section-heading h2,.final-cta h2 { margin:18px 0 0; font-size:clamp(30px,4vw,46px); letter-spacing:-.055em; line-height:1.08; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:44px; }.feature { min-height:190px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }.feature span { color:var(--accent); font:500 11px 'DM Mono',monospace; }.feature h3 { margin:44px 0 8px; font-size:15px; letter-spacing:-.02em; }.feature p { color:var(--muted); font-size:12px; line-height:1.55; }
.final-cta { margin-bottom:80px; padding:66px 30px; text-align:center; border-radius:16px; background:var(--accent); color:#06110e; }.final-cta .eyebrow { color:#1f6e58; }.final-cta .eyebrow span { background:#1f6e58; }.final-cta h2 { margin-bottom:28px; }.button-light { background:#07110e; color:var(--ink); }.button-light:hover { background:#17221e; }
.footer { display:flex; justify-content:space-between; gap:24px; padding:24px 0 35px; border-top:1px solid rgba(255,255,255,.08); color:#788283; font-size:11px; }.footer p { max-width:530px; margin:0; text-align:right; line-height:1.45; }
.quiz-screen { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px; background:rgba(3,6,8,.88); backdrop-filter:blur(12px); overflow:auto; }
.quiz-screen[hidden] { display:none; }
.quiz-step[hidden],
.quiz-loading[hidden],
.quiz-result[hidden] { display:none; }
.quiz-card { position:relative; width:min(650px,100%); min-height:530px; padding:42px; border:1px solid rgba(84,201,162,.35); border-radius:18px; background:#101719; box-shadow:0 22px 90px rgba(0,0,0,.55); }
.quiz-close { position:absolute; top:15px; right:18px; width:34px; height:34px; border:0; background:transparent; color:var(--muted); font-size:29px; cursor:pointer; }
.quiz-meta { display:flex; justify-content:space-between; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.quiz-progress,.loading-track { height:4px; margin:16px 0 34px; overflow:hidden; border-radius:99px; background:#283134; }
.quiz-progress span,.loading-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease; }
.quiz-step h2,.quiz-loading h2,.quiz-result h2 { max-width:570px; margin:18px 0 13px; font-size:clamp(28px,4.8vw,42px); line-height:1.08; letter-spacing:-.055em; }
.quiz-copy,.quiz-loading > p:not(.eyebrow),.quiz-result > p:not(.eyebrow) { max-width:530px; color:var(--muted); font-size:15px; line-height:1.6; }
.quiz-options { display:grid; gap:10px; margin-top:28px; }
.quiz-option { width:100%; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:#151d20; color:var(--ink); text-align:left; font:600 14px Manrope,Arial,sans-serif; cursor:pointer; transition:border-color .18s, transform .18s, background .18s; }
.quiz-option:hover { transform:translateX(3px); border-color:var(--accent); background:#182624; }
.quiz-disclaimer { margin:22px 0 0; color:#788283; font-size:11px; line-height:1.45; }
.quiz-loading { min-height:445px; display:grid; align-content:center; justify-items:center; text-align:center; }
.quiz-loading h2 { margin-inline:auto; }.quiz-loading > p:not(.eyebrow) { margin:0 auto 22px; }.quiz-loading small { color:#788283; font-size:11px; }
.loading-orbit { display:grid; place-items:center; width:86px; height:86px; margin-bottom:28px; border:2px solid rgba(84,201,162,.18); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }.loading-orbit span { width:20px; height:20px; border-radius:50%; background:var(--accent); box-shadow:0 0 24px rgba(84,201,162,.8); }
.loading-track { width:min(340px,100%); margin:12px 0 16px; }.loading-track span { transition:width .8s ease; }
.quiz-result { min-height:445px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.result-list { display:grid; gap:11px; margin:14px 0 28px; color:#d8e5df; font-size:14px; }.result-list span { display:flex; gap:9px; }.result-list span::first-letter { color:var(--accent); }.result-button { width:100%; }.quiz-result .quiz-disclaimer { text-align:left; }
body.quiz-open { overflow:hidden; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:700px) { .header { height:72px; }.header-note { display:none; }.hero { padding:58px 0 60px; }.offer-card { align-items:stretch; flex-direction:column; }.button { width:100%; }.feature-grid { grid-template-columns:repeat(2,1fr); }.features { padding:70px 0; }.footer { flex-direction:column; }.footer p { text-align:left; } }
@media (max-width:520px) { .quiz-screen { padding:12px; }.quiz-card { min-height:calc(100vh - 24px); padding:52px 22px 28px; border-radius:14px; }.quiz-option { padding:15px; } }
@media (max-width:420px) { .wrap { width:min(100% - 28px,1040px); }.feature-grid { grid-template-columns:1fr; }.feature { min-height:150px; }.feature h3 { margin-top:24px; } }