/* ============================================================
   JDL Strategies: Buying Power Check
   Dark UI · Anton display · blue accent
   ============================================================ */
:root{
  --bg:#080a0d; --bg-card:#12161c; --bg-card2:#171c24;
  --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.14);
  --white:#eef2f8; --grey:#8b93a3; --grey2:#6a7284; --faint:#49505e;
  --blue:#5e9ef5; --blue2:#8dbcff; --blue-deep:#3a7fd4;
  --blue-glow:rgba(94,158,245,0.38);
  --display:'Anton',Impact,sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--white); font-family:var(--sans);
  min-height:100vh; padding-bottom:118px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ambient blue bloom */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(620px 420px at 50% 32%, rgba(94,158,245,0.09), transparent 70%),
    radial-gradient(500px 500px at 50% 120%, rgba(94,158,245,0.07), transparent 70%);
}

/* ── header ── */
.wrap{position:relative; z-index:2; max-width:680px; margin:0 auto; padding:0 20px;}
.hdr{display:flex; align-items:center; gap:14px; padding:22px 0 18px; border-bottom:1px solid var(--border);}
.logo{display:flex; align-items:center;}
.logo img{height:26px; width:auto; display:block;}
.status{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--border2); border-radius:999px; padding:8px 15px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
}
.status .dot{width:7px; height:7px; border-radius:50%; background:var(--blue); animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,158,245,0.55);}70%{box-shadow:0 0 0 8px rgba(94,158,245,0);}100%{box-shadow:0 0 0 0 rgba(94,158,245,0);}}

/* ── card ── */
.card{
  position:relative; margin:34px 0 0; border-radius:26px;
  border:1px solid var(--border); padding:34px 26px 34px;
  background:
    radial-gradient(420px 240px at 50% -8%, rgba(94,158,245,0.12), transparent 70%),
    linear-gradient(180deg, var(--bg-card2), var(--bg-card));
  box-shadow:0 30px 80px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.03);
  text-align:center;
}
.badge{
  display:inline-flex; align-items:center; gap:13px; margin:0 auto 30px;
  border:1px solid var(--blue); border-radius:999px; padding:11px 26px 11px 16px;
  box-shadow:0 0 22px -6px var(--blue-glow), inset 0 0 18px -10px var(--blue-glow);
}
.badge .ic{width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--blue); flex:0 0 auto;}
.badge .ic svg{width:18px; height:18px;}
.badge b{font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--blue2);}

.head{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(29px,7.4vw,44px); line-height:.97; letter-spacing:.005em;
  transform:skewX(-6deg); transform-origin:center; margin:0 auto;
  text-wrap:balance;
}
.head .w{color:var(--white);}
.head .m{color:var(--grey);}
.head .a{color:var(--blue2); font-size:1.24em; text-shadow:0 0 26px var(--blue-glow); padding:0 .02em;}

.body{
  font-size:clamp(16px,4.2vw,19px); line-height:1.6; color:var(--grey);
  max-width:420px; margin:24px auto 0;
}
.body b{color:var(--white); font-weight:700;}

/* ── VSL player ── */
.vsl{
  margin:28px 0 34px; border-radius:18px; overflow:hidden;
  border:1px solid var(--border2);
  box-shadow:0 24px 70px -30px rgba(0,0,0,0.9), 0 0 40px -18px var(--blue-glow);
  background:#000;
}
.vsl video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;}

/* breathing room between video, headline and body on the intro */
#sc-intro .head{margin-top:clamp(4px, 1.5vw, 10px);}
#sc-intro .body{margin-top:clamp(18px, 4vw, 26px);}

/* ── CTA ── */
.cta-wrap{display:flex; justify-content:center; margin:30px 0 0;}
.cta{
  display:inline-flex; align-items:center; gap:14px;
  font-size:18px; font-weight:500; color:#08131f;
  padding:18px 38px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, var(--blue2), var(--blue-deep));
  box-shadow:0 16px 50px -14px var(--blue-glow), 0 0 0 1px rgba(94,158,245,0.45);
  transition:transform .18s, box-shadow .18s;
  font-family:var(--sans);
}
.cta:hover{transform:translateY(-2px); box-shadow:0 22px 60px -12px var(--blue-glow), 0 0 0 1px rgba(94,158,245,0.65);}
.cta:focus-visible{outline:2px solid var(--blue2); outline-offset:4px;}
.cta .arr{font-size:20px; line-height:1;}

/* ── step dots ── */
.dots{display:flex; justify-content:center; gap:7px; margin-top:18px;}
.dots i{width:22px; height:3px; border-radius:2px; background:var(--border2); display:block; transition:background .3s, width .3s;}
.dots i.on{background:var(--blue); width:34px;}
.dots i.done{background:var(--blue-deep);}

.note{
  max-width:460px; margin:24px auto 0; padding-top:20px; border-top:1px solid var(--border);
  font-size:11.5px; line-height:1.6; color:var(--faint);
}

/* ── sticky footer ── */
.foot{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  border-top:1px solid var(--border); background:rgba(8,10,13,0.85);
  backdrop-filter:blur(14px);
}
.foot-inner{max-width:680px; margin:0 auto; padding:16px 20px; display:flex; align-items:center; gap:14px;}
.foot-txt{display:flex; flex-direction:column; gap:3px;}
.foot-txt .t1{font-family:var(--display); text-transform:uppercase; font-size:20px; line-height:1; color:var(--white);}
.foot-txt .t2{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey2);}
.foot-cta{
  margin-left:auto; display:inline-flex; align-items:center; gap:11px;
  font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#08131f;
  padding:13px 22px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, var(--blue2), var(--blue-deep));
  box-shadow:0 8px 26px -10px var(--blue-glow); transition:transform .18s; white-space:nowrap;
  font-family:var(--sans);
}
.foot-cta:hover{transform:translateY(-1px);}
.foot-cta:focus-visible{outline:2px solid var(--blue2); outline-offset:3px;}
.foot[hidden]{display:none;}

@keyframes fade{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:translateY(0);}}

/* ============================================================
   QUIZ SCREENS
   ============================================================ */
.screen{display:none;}
.screen.on{display:block; animation:fade .4s ease;}

/* Card variant for questions: left aligned, tighter */
.card--q{text-align:left; padding:30px 26px 30px;}

.q-top{
  display:flex; align-items:center; gap:12px;
  padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--border);
}
.q-step{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue2);
}
.q-back{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey2); background:none; border:1px solid var(--border2);
  border-radius:999px; padding:7px 14px; cursor:pointer;
  transition:color .18s, border-color .18s;
}
.q-back:hover{color:var(--white); border-color:var(--grey2);}
.q-back:focus-visible{outline:2px solid var(--blue2); outline-offset:3px;}
.q-back[hidden]{display:none;}

.q-head{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(23px,5.4vw,32px); line-height:1.02; letter-spacing:.005em;
  color:var(--white); transform:skewX(-6deg); transform-origin:left center;
  margin-bottom:10px; text-wrap:balance;
}
.q-sub{font-size:14.5px; line-height:1.55; color:var(--grey); margin-bottom:22px;}

/* group label when a screen holds two questions */
.q-group{margin-top:30px;}
.q-group-label{
  font-family:var(--display); text-transform:uppercase; font-size:19px;
  color:var(--white); transform:skewX(-6deg); transform-origin:left center;
  margin-bottom:14px; line-height:1.1;
}

/* ── option list ── */
.opts{display:grid; gap:9px;}
.opts--2{grid-template-columns:1fr 1fr;}
.opt{
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; padding:15px 18px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,0.028); border:1px solid var(--border);
  border-radius:14px; color:var(--white); font-family:var(--sans); font-size:15.5px;
  transition:background .18s, border-color .18s, transform .18s;
}
.opt:hover{background:rgba(94,158,245,0.09); border-color:rgba(94,158,245,0.42); transform:translateX(3px);}
.opt:focus-visible{outline:2px solid var(--blue2); outline-offset:3px;}
.opt.sel{
  background:rgba(94,158,245,0.14); border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue), 0 10px 30px -16px var(--blue-glow);
}
.opt .txt{flex:1;}
.opt .mark{
  width:19px; height:19px; flex:0 0 auto; border-radius:50%;
  border:1.5px solid var(--border2); display:grid; place-items:center;
  transition:border-color .18s, background .18s;
}
.opt.sel .mark{border-color:var(--blue); background:var(--blue);}
.opt .mark::after{
  content:''; width:7px; height:7px; border-radius:50%;
  background:#08131f; opacity:0; transition:opacity .18s;
}
.opt.sel .mark::after{opacity:1;}
.opts--2 .opt{padding:14px 15px; font-size:14.5px; gap:9px;}

/* ── contact form ── */
.form{display:grid; gap:15px; margin-top:24px; padding-top:24px; border-top:1px solid var(--border);}
.field{display:flex; flex-direction:column; gap:7px; text-align:left;}
.field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey2);
}
.field label i{color:var(--blue); font-style:normal;}
.field input{
  width:100%; padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  color:var(--white); font-family:var(--sans); font-size:15.5px;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.field input::placeholder{color:var(--faint);}
.field input:focus{
  outline:none; background:rgba(255,255,255,0.06);
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(94,158,245,0.15);
}
.err{display:none; font-size:12px; color:#ff8f8f;}
.field.bad input{border-color:#ff8f8f;}
.field.bad .err{display:block;}
.consent{
  font-size:11.5px; line-height:1.6; color:var(--faint);
  padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  background:rgba(255,255,255,0.02);
}
.form .cta{width:100%; justify-content:center;}
.form .cta:disabled{opacity:.65; cursor:default; transform:none;}

/* ── result / booking screen ── */
.res-icon{
  width:66px; height:66px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; color:var(--blue);
  border:1.5px solid rgba(94,158,245,0.42); background:rgba(94,158,245,0.1);
}
.res-icon svg{width:28px; height:28px;}
.res-icon--mute{color:var(--grey2); border-color:var(--border2); background:rgba(255,255,255,0.04);}

/* the indicative position panel */
.range{
  margin:26px auto 0; max-width:440px; padding:26px 22px;
  border:1px solid rgba(94,158,245,0.34); border-radius:18px;
  background:
    radial-gradient(300px 160px at 50% 0%, rgba(94,158,245,0.14), transparent 70%),
    rgba(94,158,245,0.045);
}
.range-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey2); margin-bottom:12px;
}
.range-value{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(24px,6vw,34px); line-height:1.03; color:var(--blue2);
  transform:skewX(-6deg); text-shadow:0 0 26px var(--blue-glow); margin-bottom:12px;
}
.range-note{font-size:14px; line-height:1.6; color:var(--grey);}

.disclaimer{
  max-width:460px; margin:22px auto 0; padding:14px 16px;
  border:1px solid var(--border); border-radius:12px;
  background:rgba(255,255,255,0.02);
  font-size:11.5px; line-height:1.65; color:var(--faint); text-align:left;
}

/* ── booking widget ── */
.booking{
  margin:26px auto 0; max-width:520px;
  border:1px solid var(--border); border-radius:16px;
  background:#fff;              /* the widget renders light; give it a clean ground */
  overflow:hidden; min-height:150px;
}
.booking[hidden]{display:none;}
.booking.is-ready{min-height:0;}
.booking__loading{
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding:44px 20px; background:var(--bg-card);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey2);
}
.booking__spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid var(--border2); border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.booking iframe{display:block; width:100%; border:none; min-height:640px;}

.book-btn{margin-top:26px;}
a.cta{text-decoration:none;}

@media(max-width:560px){
  .foot-txt .t1{font-size:16px;}
  .foot-cta{font-size:11px; padding:12px 16px;}
  .logo img{height:22px;}
  .status{font-size:10px; letter-spacing:.1em; padding:7px 12px;}
  .foot-txt .t2{font-size:9px; letter-spacing:.08em;}
  .badge b{font-size:12px; letter-spacing:.16em;}
  .badge{padding:10px 20px 10px 14px; gap:10px;}
  .card{padding:30px 20px 30px;}
  .card--q{padding:26px 18px 26px;}
  .opt{padding:14px 15px; font-size:14.5px;}
  .opts--2 .opt{padding:12px 11px; font-size:13px; gap:7px;}
  .opts--2 .opt .mark{width:16px; height:16px;}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}