*{box-sizing:border-box}
:root{
  --yellow:#f6b900;
  --black:#070708;
  --dark:#111317;
  --tile:#1d2025;
  --tile2:#26200d;
  --line:#30343b;
  --text:#fff;
  --muted:#b9bec7;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--black);color:var(--text)}
a{text-decoration:none;color:inherit}
.site-header{
  height:68px;
  background:#050505;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.header-inner{
  width:min(1120px,calc(100% - 28px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{font-size:28px;font-weight:500;display:flex;align-items:center;gap:6px}
.brand-icon{color:var(--yellow)}
.brand-name{color:#fff}
.header-actions{display:flex;align-items:center;gap:12px}
.header-badge{
  background:#1c1c1c;
  border:1px solid rgba(246,185,0,.38);
  color:var(--yellow);
  padding:9px 12px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.header-btn{
  background:var(--yellow);
  color:#111;
  border:0;
  padding:12px 18px;
  font-weight:950;
  cursor:pointer;
  text-transform:uppercase;
}
.screen{display:none;min-height:calc(100vh - 68px);padding:40px 16px}
.screen.active{display:flex;align-items:center;justify-content:center}
.intro{position:relative}
.intro-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.56),rgba(0,0,0,.78)),
    url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1900&q=80') center/cover;
}
.metro-card{
  position:relative;
  z-index:1;
  width:min(920px,100%);
  background:linear-gradient(135deg,#15171b,#101216);
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.48);
  padding:42px;
}
.tag{
  display:inline-flex;
  background:var(--yellow);
  color:#111;
  padding:8px 12px;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
h1{
  font-size:clamp(42px,6vw,68px);
  line-height:1;
  margin:20px 0 16px;
  letter-spacing:-.06em;
}
h2{
  font-size:clamp(30px,5vw,48px);
  line-height:1.08;
  margin:20px 0 12px;
  letter-spacing:-.04em;
}
p,.help{
  color:var(--muted);
  line-height:1.6;
  font-size:17px;
}
.microcopy{
  margin-top:14px;
  color:#e2e2e2;
  font-weight:800;
}
.metro-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:28px 0;
}
.metro-grid div{
  background:var(--tile);
  border-left:5px solid var(--yellow);
  padding:17px;
}
.metro-grid strong{
  display:block;
  color:#fff;
  margin-bottom:5px;
}
.metro-grid span{
  color:var(--muted);
  font-size:13px;
}
.lead-benefits{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:26px 0 10px;
}
.benefit-card{
  background:#1d2025;
  border:1px solid #2f343d;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition:.25s;
}
.benefit-card:hover{
  border-color:var(--yellow);
  background:#26200d;
}
.benefit-card span{
  width:34px;
  height:34px;
  background:var(--yellow);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex:0 0 auto;
}
.benefit-card strong{
  display:block;
  color:#fff;
  margin-bottom:6px;
  font-size:15px;
}
.benefit-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.yellow-btn,.black-btn{
  border:0;
  min-height:56px;
  padding:0 28px;
  font-weight:950;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.yellow-btn{
  background:var(--yellow);
  color:#111;
  box-shadow:0 16px 34px rgba(246,185,0,.25);
}
.black-btn {
    background: #e8ba3f;
    color: #000000;
    margin-top: 26px;
}
.link{margin-top:18px}
.quiz{
  background:
    radial-gradient(circle at top left,rgba(246,185,0,.18),transparent 35%),
    #0b0b0d;
}
.quiz-card{padding:0;overflow:hidden}
.progress-head{
  display:flex;
  justify-content:space-between;
  padding:26px 32px 16px;
  border-bottom:1px solid var(--line);
  color:#fff;
}
.progress-small{
  display:block;
  color:var(--yellow);
  font-size:12px;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:6px;
}
#percentLabel{
  background:#2a2410;
  color:var(--yellow);
  padding:8px 12px;
  border-radius:99px;
  font-weight:900;
}
.progress{height:8px;background:#222833}
.progress div{height:100%;width:0;background:var(--yellow);transition:.3s}
form{padding:36px 32px}
.step{display:none;animation:slide .25s ease both}
.step.active{display:block}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.choices{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:24px;
}
.choices button{
  min-height:76px;
  background:var(--tile);
  border:2px solid var(--line);
  color:#fff;
  padding:18px;
  text-align:left;
  font-size:16px;
  font-weight:850;
  cursor:pointer;
  transition:.18s;
  display:flex;
  align-items:center;
  gap:12px;
}
.choices button:hover,.choices button.selected{
  border-color:var(--yellow);
  background:var(--tile2);
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(246,185,0,.12);
}
.conversion-box{
  background:#221d0d;
  border-left:5px solid var(--yellow);
  padding:22px;
  margin:22px 0 24px;
}
.conversion-box h3{
  margin:0 0 14px;
  color:#fff;
}
.conversion-box ul{
  margin:0;
  padding-left:18px;
  color:#ddd;
}
.conversion-box li{
  margin-bottom:10px;
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:22px;
}
label{font-size:13px;font-weight:900;color:#fff}
input,select{
  width:100%;
  height:56px;
  margin-top:8px;
  background:var(--tile);
  border:2px solid var(--line);
  color:#fff;
  padding:0 14px;
  font-size:16px;
  outline:none;
}
input:focus,select:focus{border-color:var(--yellow)}
.consent{
  display:flex;
  gap:12px;
  margin-top:18px;
  color:var(--muted);
  line-height:1.45;
}
.consent input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--yellow);
  flex:0 0 auto;
}
.consent a{text-decoration:underline;color:#fff}
.full{width:100%;margin-top:18px}
.error{color:#ffb0a3;font-weight:900}
.nav{margin-top:22px}
#backBtn{
  display:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}
#backBtn.visible{display:inline-flex}
.hp{position:absolute!important;left:-9999px!important;opacity:0!important}
.success{background:#0b0b0d}
.success-card{text-align:center}
.success-icon{
  width:84px;
  height:84px;
  background:var(--yellow);
  color:#111;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  font-size:50px;
  font-weight:950;
}
.footer{
  background:#000;
  color:#fff;
  padding:28px 16px;
}
.footer-inner{
  width:min(1120px,100%);
  margin:0 auto;
  display:flex;
  gap:18px;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
}
.policy-page{background:#fff;color:#111;min-height:100vh}
.policy-card{max-width:900px;margin:36px auto;padding:30px;line-height:1.7}
@media(max-width:800px){
  .metro-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .site-header{height:auto;padding:12px 0}
  .header-inner{align-items:flex-start}
  .header-actions{display:grid;gap:8px}
  .header-badge{font-size:10px}
  .metro-card{padding:28px 20px}
  .metro-grid,.lead-benefits,.choices,.contact-grid{grid-template-columns:1fr}
  h1{font-size:38px}
  .screen{padding:24px 10px}
  .yellow-btn,.black-btn{width:100%}
  .footer-inner{display:grid}
}

/* Softer information blocks + stronger CTA */
.metro-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 18px}
.metro-grid div{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;border-left:3px solid rgba(246,185,0,.55)!important;padding:12px 13px!important;opacity:.86}
.metro-grid strong{font-size:13px!important;color:#fff!important;margin-bottom:3px!important}
.metro-grid span{font-size:12px!important;color:rgba(185,190,199,.78)!important}

.lead-benefits{grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 20px}
.benefit-card{display:block!important;padding:12px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.07)!important;opacity:.74;transition:.22s ease}
.benefit-card:hover{opacity:.95;border-color:rgba(246,185,0,.38)!important;background:rgba(246,185,0,.055)!important;transform:translateY(-1px)}
.benefit-card span{width:auto!important;height:auto!important;background:transparent!important;color:rgba(246,185,0,.82)!important;display:block!important;font-size:12px;margin-bottom:7px}
.benefit-card strong{font-size:13px!important;line-height:1.25;margin-bottom:5px!important}
.benefit-card p{font-size:11.5px!important;line-height:1.45!important;color:rgba(185,190,199,.72)!important}

.yellow-btn.cta-focus{position:relative;overflow:hidden;min-height:62px;padding:0 28px;border-radius:18px;box-shadow:0 18px 38px rgba(246,185,0,.34),0 0 0 0 rgba(246,185,0,.45);animation:ctaPulseMarquiz 1.9s ease-in-out infinite;gap:12px}
.yellow-btn.cta-focus:before{content:"";position:absolute;top:0;left:-70%;width:52%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transform:skewX(-22deg);animation:ctaShineMarquiz 2.4s ease-in-out infinite}
.yellow-btn.cta-focus span,.yellow-btn.cta-focus b{position:relative;z-index:1}
.yellow-btn.cta-focus b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#111;color:#f6b900;border-radius:50%;font-size:18px;line-height:1;transition:.22s ease}
.yellow-btn.cta-focus:hover b{transform:translateX(4px)}
@keyframes ctaPulseMarquiz{0%,100%{transform:translateY(0) scale(1);box-shadow:0 18px 38px rgba(246,185,0,.30),0 0 0 0 rgba(246,185,0,.34)}50%{transform:translateY(-1px) scale(1.018);box-shadow:0 22px 48px rgba(246,185,0,.42),0 0 0 8px rgba(246,185,0,.06)}}
@keyframes ctaShineMarquiz{0%{left:-70%}42%,100%{left:135%}}
.soft-note{opacity:.82;font-size:14px!important;color:rgba(255,255,255,.78)!important}

.conversion-box{background:rgba(246,185,0,.065)!important;border-left:3px solid rgba(246,185,0,.55)!important;padding:16px 18px!important}
.conversion-box h3{font-size:18px}
.conversion-box li{color:rgba(221,221,221,.78);font-size:13px;margin-bottom:6px!important}

@media(max-width:800px){.metro-grid,.lead-benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.metro-grid,.lead-benefits{grid-template-columns:1fr}.benefit-card{display:flex!important;gap:10px!important;align-items:flex-start}.benefit-card span{flex:0 0 auto;margin-bottom:0}.yellow-btn.cta-focus{width:100%;min-height:64px}}
