:root{
  --blue:#0b4ea2; --blue2:#155cbd; --blue-dark:#0a3f83;
  --green:#16a34a; --white:#ffffff; --muted:#c1c9d4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(900px 520px at 18% 10%, rgba(96,165,250,.28) 0%, rgba(96,165,250,0) 60%),radial-gradient(780px 520px at 82% 0%, rgba(45,212,191,.22) 0%, rgba(45,212,191,0) 58%),radial-gradient(900px 600px at 60% 85%, rgba(99,102,241,.18) 0%, rgba(99,102,241,0) 55%),linear-gradient(180deg, #081225 0%, #071326 50%, #06101f 100%) fixed;color:var(--white)}
a{color:#bde4ff}
.container{max-width:1140px;margin:0 auto;padding:24px}
.section{position:relative;padding:56px 0}
.section__title{font-size:32px;margin:0 0 14px}
.lead{font-weight:600;opacity:.95}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:12px 18px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn-lg{padding:14px 22px;font-size:16px}
.btn-primary{background:linear-gradient(180deg,#1fd071,#0ea54e)}
.topbar{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.12)}
.topbar__grid{display:flex;align-items:center;justify-content:space-between;padding:8px 24px}
.logo{height:32px}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero__text h1{font-size:42px;line-height:1.15;margin:0 0 10px}
.badge{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;font-size:12px;margin-bottom:10px}
.trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.trust__item{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:10px}
.card-3d{perspective:1000px}
.card-3d__inner{width:320px;height:200px;border-radius:20px;background:linear-gradient(135deg,#0f3a7a 0%, #134b97 50%, #1763c8 100%);box-shadow:0 20px 40px rgba(0,0,0,.35);transform:rotateY(-12deg) rotateX(6deg);position:relative;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.card-3d__emblem{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #5bffbf, #06b66c);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.card-3d__title{font-weight:800;letter-spacing:.5px}
.card-3d__chip{position:absolute;right:18px;top:18px;width:38px;height:28px;border-radius:6px;background:linear-gradient(180deg,#ffd479,#d5a749)}
.card-3d__rows .row{display:flex;justify-content:space-between;font-size:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);padding:6px 8px;border-radius:8px;margin-top:6px}
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter: blur(8px);border-radius:18px}
.quiz__card{padding:22px}
.quiz__progress{position:relative;height:10px;background:rgba(255,255,255,.08);border-radius:999px;margin-bottom:14px;overflow:hidden}
.quiz__progress-bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#1fd071,#00c081);border-radius:999px;width:0%}
.quiz__progress-info{margin:6px 0 10px;color:#d3dbe6;font-size:13px}
.step{display:none}
.step.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h3{margin:0 0 10px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-span-2{grid-column:1/-1}
.opt{background:rgba(255,255,255,.06);padding:14px;border-radius:12px;cursor:pointer;border:1.5px solid rgba(255,255,255,.14)}
.opt input{margin-right:8px}
.opt:hover{border-color:#57c9ff}
.fld span{display:block;font-size:12px;color:#b6c4d5;margin-bottom:6px}
.fld input{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;outline:none;background:rgba(255,255,255,.06);color:#fff}
.chk{font-size:14px}
.nav{display:flex;gap:12px;margin-top:16px}
.footer{background:rgba(0,0,0,.25);border-top:1px solid rgba(255,255,255,.12);padding:28px 0}
.footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Mobile */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .steps__grid,.proof__grid,.footer__grid{grid-template-columns:1fr}
}
@media (max-width:540px){
  .topbar__grid{padding-left:12px;padding-right:12px}
  .logo{height:28px}
  .hero__text h1{font-size:28px}
  .lead{font-size:14px}
  .btn, .btn.btn-lg{width:100%;justify-content:center}
  .trust{gap:8px}
  .trust__item{font-size:12px}
  .quiz__card{padding:16px}
}


/* === Center Toast Notification === */
.toast {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -20%) scale(0.95);
  background: #16a34a;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  font-weight: 700;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  text-align: center;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -20%) scale(1);
}
@media (max-width:540px){
  .toast { top: 16%; padding: 12px 14px; border-radius: 10px; }
}


/* === Center Modal (auto-hide) === */
.modal-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal-overlay.show{opacity:1; pointer-events:auto;}
.modal-box{
  background: #0c2b18; /* default success bg (dark green) */
  color:#fff; border-radius:16px; padding:18px 20px; width:min(92vw,520px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35); text-align:center;
  transform: translateY(10px) scale(.98); transition: transform .25s ease;
}
.modal-overlay.show .modal-box{ transform: translateY(0) scale(1); }
.modal-title{font-weight:800; margin:0 0 6px; font-size:18px}
.modal-text{margin:0; opacity:.95}
.modal-box.success{ background: #0f5132; } /* green */
.modal-box.warn{ background: #5a4607; }    /* amber */
.modal-box.error{ background: #5a0d0d; }   /* red */
@media (max-width:540px){
  .modal-box{ padding:16px 14px; border-radius:14px}
  .modal-title{ font-size:16px }
}

/* Equal-size button helper for header/CTA */
.btn.btn--equal{min-width:220px; justify-content:center}
@media (max-width:768px){
  .btn.btn--equal{min-width:0; width:100%} /* stack on mobile */
}


/* === V2 facelift (focus: quiz + WhatsApp) === */
:root{
  --accent-a:#22d3ee;
  --accent-b:#7c3aed;
  --accent-c:#ff3d9a;
  --wa:#18b26b;
  --card: rgba(255,255,255,.06);
  --card-b: rgba(255,255,255,.14);
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  border: 0;
  color:#07111f;
}
.btn-quiz{
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  border: 0;
  color:#07111f;
}
.btn-wa{
  background: linear-gradient(135deg, #1ee57a, var(--wa));
  border: 0;
  color:#07111f;
}
.btn-quiz:hover,.btn-wa:hover,.btn-primary:hover{filter:brightness(1.05)}
.btn{box-shadow: 0 10px 28px rgba(0,0,0,.22)}
.topbar__right{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.hero__text h1{letter-spacing:-.3px}
.hero-note{margin-top:10px;max-width:620px}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.cta-row .btn{min-width:280px}
@media(max-width:768px){
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%;min-width:0}
}

.value__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value__card{padding:18px}
.value__icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(124,58,237,.25));
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;
  margin-bottom:10px;
}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pill{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#dbe7f7}

.quiz__progress-bar{background:linear-gradient(90deg, var(--accent-a), var(--accent-b));}
.opt:hover{border-color: var(--accent-a)}
a{color:#c7efff}

/* WhatsApp mini icon (kept simple & consistent) */
.wa-ic{
  width:18px;height:18px;display:inline-block;border-radius:6px;
  background: rgba(0,0,0,.18);
  position: relative;
}
.wa-ic:before{
  content:"";
  position:absolute;left:4px;top:5px;width:10px;height:8px;border-radius:4px;
  background: rgba(0,0,0,.25);
}

/* Floating WhatsApp */
.fab-wa{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background: linear-gradient(135deg, #1ee57a, var(--wa));
  color:#07111f;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
}
.fab-wa__text{font-size:14px}
@media(min-width:981px){
  .fab-wa{bottom:22px;right:22px}
}
@media(max-width:980px){
  .value__grid{grid-template-columns:1fr}
  .fab-wa__text{display:none}
  .fab-wa{padding:12px}
}

/* /wa page helpers */
.hero--mini .hero__grid{align-items:flex-start}
.note{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.note__item{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:10px 12px;border-radius:12px}
.steps-lite{margin-top:14px;padding:16px}
.steps-lite__title{font-weight:800;margin-bottom:8px}
.steps-lite__list{margin:0;padding-left:18px}
.card-3d--wa .card-3d__inner{background:linear-gradient(135deg,#0f3a7a 0%, #2247d1 45%, #1ee57a 100%);}
.badge--hot{background:rgba(255,61,154,.16);border-color:rgba(255,61,154,.3)}


/* --- Visual refresh: ratings, reviews, WhatsApp focus --- */
.section__head{margin-bottom:16px}
.section__head h2{margin:0 0 6px;font-size:28px}
.section__head p{margin:0;max-width:70ch}

.rating{display:flex;align-items:center;gap:10px;margin:10px 0 12px}
.rating__stars{display:flex;gap:3px;font-size:14px;line-height:1}
.star{opacity:.95}
.star--half{position:relative}
.star--half::after{content:"★";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:rgba(255,255,255,.95)}
.rating__text{font-size:13px;color:rgba(255,255,255,.82)}
.rating--big .rating__stars{font-size:18px}
.rating--big .rating__text{font-size:14px}

.hero__art{position:relative}
.hero__illus{position:absolute;inset:-40px -30px -40px -30px;opacity:.95;pointer-events:none;z-index:0}
.card-3d{position:relative;z-index:1}

.reviews__summary{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 14px}
.reviews__cta{display:flex;flex-direction:column;gap:8px;min-width:240px}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.review p{margin:10px 0 0;color:rgba(255,255,255,.86)}
.review__top{display:flex;align-items:center;gap:10px}
.review__stars{margin-left:auto;letter-spacing:1px;color:rgba(255,255,255,.85)}
.avatar{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;
  background:linear-gradient(135deg, rgba(45,212,191,.8), rgba(96,165,250,.7));color:#062038;box-shadow:0 10px 20px rgba(0,0,0,.25)}
.review__name{font-weight:800}
.review__meta{font-size:12px;color:rgba(255,255,255,.72);margin-top:2px}

.wa-fab{position:fixed;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;text-decoration:none;
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(20,184,166,.95));
  color:#052014;border-radius:999px;padding:10px 14px;box-shadow:0 16px 40px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.22);z-index:999}
.wa-fab__icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);font-weight:900}
.wa-fab__text b{display:block;font-size:14px}
.wa-fab__text small{display:block;font-size:11px;opacity:.9}

.btn--lg{padding:14px 16px;border-radius:14px;font-size:16px}
.btn--sm{padding:9px 12px;border-radius:12px;font-size:13px}
.hint h3{margin:0 0 10px}
.check{margin:0;padding-left:18px}
.check li{margin:6px 0;color:rgba(255,255,255,.86)}

.hero__grid--wa{grid-template-columns:1.05fr .95fr}
.hero--wa .lead{font-size:16px;color:rgba(255,255,255,.86)}
.phone-mock{max-width:360px;margin-left:auto;border-radius:30px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden}
.phone-mock__top{display:flex;align-items:center;gap:6px;padding:10px 12px;background:rgba(0,0,0,.22);border-bottom:1px solid rgba(255,255,255,.08)}
.phone-mock__title{margin-left:auto;font-weight:800;letter-spacing:.3px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.chat{padding:12px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03))}
.msg{max-width:88%;padding:10px 10px;border-radius:14px;margin:10px 0;position:relative;font-size:13px;line-height:1.35}
.msg--in{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12)}
.msg--out{margin-left:auto;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.22)}
.msg--highlight{box-shadow:0 0 0 2px rgba(45,212,191,.18)}
.time{display:block;margin-top:6px;font-size:11px;opacity:.75}
.phone-mock__bar{height:14px;background:rgba(0,0,0,.20)}

@media (max-width: 980px){
  .reviews__grid{grid-template-columns:1fr}
  .hero__grid--wa{grid-template-columns:1fr}
  .phone-mock{margin:18px auto 0}
  .wa-fab{right:14px;bottom:14px}
}



/* === Revamp: closer to reference (quiz + WhatsApp first) === */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(5,14,28,.62);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topbar__grid{padding:14px 24px}
.topbar__right{gap:10px}
.wa-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  text-decoration:none;font-weight:800;
  color:#052014;
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(20,184,166,.95));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.wa-pill:hover{transform:translateY(-1px);filter:saturate(1.05)}
/* reuse existing wa icon */
.wa-pill .wa-ic{display:inline-block}

/* headline highlight like in ref */
.hl{
  display:inline-block;
  padding:6px 12px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(96,165,250,.30), rgba(59,130,246,.18));
  border:1px solid rgba(96,165,250,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero h1{line-height:1.08; letter-spacing:-.02em}
.hero__grid{align-items:center}
.hero__text{max-width:560px}

/* hero visual */
.hero__visual{
  position:relative;
  width:min(620px, 100%);
  margin-left:auto;
}
.hero__image{
  width:100%;
  height:auto;
  border-radius:28px;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
}
.hero__scale{
  position:absolute;
  top:18px; right:18px;
  width:82px; height:82px;
  border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(191,219,254,.95);
  background:rgba(8,18,37,.55);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.hero__scale svg{width:56px;height:56px}

/* make primary CTAs more prominent */
.cta-row{gap:12px}
.btn-quiz{
  background:linear-gradient(135deg, rgba(96,165,250,.95), rgba(59,130,246,.90));
  border:1px solid rgba(255,255,255,.22);
  color:#07121f;
}
.btn-wa,.btn--wa{
  background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(20,184,166,.95));
  border:1px solid rgba(255,255,255,.22);
  color:#052014;
}
.btn-quiz:hover,.btn-wa:hover,.btn--wa:hover{filter:saturate(1.05)}

/* reviews: white cards like in the reference */
.reviews__grid .card{
  background:rgba(255,255,255,.96);
  color:#0b1220;
  border:1px solid rgba(2,6,23,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.reviews__grid .review__meta{color:rgba(2,6,23,.62)}
.reviews__grid .review p{color:rgba(2,6,23,.78)}
.reviews__grid .review__stars{color:rgba(2,6,23,.70)}
.reviews__grid .avatar{box-shadow:0 10px 20px rgba(0,0,0,.20)}

/* section heads */
.section__head h2{letter-spacing:-.02em}


/* WhatsApp floating button icon */
.wa-fab__icon{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);
  color:#fff;font-weight:900;
}
.wa-fab__icon::before{content:"WA";font-size:12px;letter-spacing:.5px}