:root{
  --sage:#597563; --sage-d:#3f5a49; --sage-soft:#eef0ec;
  --gold:#b8975a; --gold-d:#9a7b42; --gold-soft:#f3ece0; --gold-lt:#dcc491;
  --cream:#faf8f4; --cream-2:#f4f1ea; --navy:#20344c; --navy-2:#2a4260;
  --ink:#38383a; --muted:#7d776b; --line:#e4ded3; --ok:#3f8a5f;
  --shadow:0 18px 44px rgba(32,52,76,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Questrial',sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:17px}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif}
img{max-width:100%;display:block}
a{color:var(--sage-d)}
.narrow{max-width:760px;margin:0 auto;padding:0 22px}

/* HERO */
.hero{background:radial-gradient(1000px 600px at 30% 0%, var(--navy-2) 0%, var(--navy) 55%, #182838 100%);color:var(--cream);padding:46px 0 64px;position:relative;overflow:hidden;text-align:center}
.hero .medal-bg{position:absolute;right:-120px;top:-120px;width:440px;opacity:.09;pointer-events:none}
.check{width:74px;height:74px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 0 0 10px rgba(63,138,95,.18)}
.check svg{width:38px;height:38px}
.kick{letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--gold-lt);margin-bottom:14px}
.hero h1{font-size:50px;font-weight:600;line-height:1.05;margin-bottom:16px}
.hero h1 .em{font-style:italic;color:var(--gold-lt);font-weight:500}
.hero .sub{font-size:19px;color:#d3dad4;max-width:600px;margin:0 auto}
.trust{display:flex;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:#b9c3bb}
.trust span{display:flex;align-items:center;gap:7px}

/* STEPS */
.steps{padding:44px 0 10px}
.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;box-shadow:var(--shadow);margin-bottom:24px;position:relative}
.step-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.num{flex:0 0 42px;height:42px;border-radius:50%;background:var(--navy);color:var(--gold-lt);font-family:'Questrial',sans-serif;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center}
.step h2{font-size:30px;line-height:1.1;color:var(--navy);font-weight:600}
.step p{margin-bottom:12px}
.step .tag{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--gold-soft);color:var(--gold-d);padding:4px 10px;border-radius:20px;margin-bottom:10px}
.step img.mock{border-radius:12px;margin:6px 0 16px;border:1px solid var(--line)}
ol.howto{margin:6px 0 16px 0;padding-left:0;list-style:none;counter-reset:h}
ol.howto li{counter-increment:h;position:relative;padding:0 0 10px 34px}
ol.howto li:before{content:counter(h);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;background:var(--sage-soft);color:var(--sage-d);font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:700}
b,strong{color:var(--navy);font-weight:700}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--gold);color:#fff;font-family:'Questrial',sans-serif;font-size:19px;letter-spacing:.02em;text-decoration:none;padding:19px 22px;border-radius:14px;border:none;cursor:pointer;transition:transform .15s,background .15s;box-shadow:0 12px 30px rgba(184,151,90,.38);text-align:center}
.btn:hover{background:var(--gold-d);transform:translateY(-2px)}
.btn.sage{background:var(--sage);box-shadow:0 12px 30px rgba(89,117,99,.32)}
.btn.sage:hover{background:var(--sage-d)}
.btn.wa{background:#25a35a;box-shadow:0 12px 30px rgba(37,163,90,.3)}
.btn.wa:hover{background:#1e8a4b}
.btn-sec{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;background:transparent;border:1px dashed var(--line);color:var(--muted);font-family:inherit;font-size:15px;padding:12px;border-radius:12px;cursor:pointer}
.btn-sec:hover{border-color:var(--gold);color:var(--gold-d)}
.link-box{font-size:13px;color:var(--muted);word-break:break-all;text-align:center;margin-top:8px}

.note{background:var(--sage-soft);border-radius:14px;padding:16px 18px;font-size:15.5px;margin-top:16px}
.note.gold{background:var(--gold-soft)}
.note p:last-child{margin-bottom:0}
.note-title{font-weight:700;color:var(--navy);margin-bottom:6px;display:block}

.stores{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.stores a{flex:1 1 140px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff;text-decoration:none;padding:12px 14px;border-radius:12px;font-size:15px}
.stores a:hover{background:var(--navy-2)}
.stores svg{width:18px;height:18px;fill:#fff}

/* FAQ */
.faq{padding:30px 0 20px}
.faq h2{font-size:34px;color:var(--navy);text-align:center;margin-bottom:20px;font-weight:600}
details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
summary{cursor:pointer;padding:18px 20px;font-size:17px;color:var(--navy);list-style:none;position:relative;padding-right:48px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:20px;top:12px;font-size:26px;color:var(--gold)}
details[open] summary:after{content:"–"}
details .ans{padding:0 20px 18px;color:var(--ink);font-size:16px}
details .ans p{margin-bottom:10px}

/* SUPPORT + SIGN */
.support{padding:24px 0 40px}
.sign{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);margin-bottom:24px}
.sign img{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:0 0 92px;border:3px solid var(--gold-soft)}
.sign p{font-size:16px}
.sign .who{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--navy);margin-top:6px}

footer{background:#182838;color:#8fa0ad;text-align:center;padding:30px 22px;font-size:13px;line-height:1.7}
footer a{color:var(--gold-lt);text-decoration:none}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:30px;font-size:15px;transition:transform .25s;z-index:9}
.toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:600px){
  body{font-size:16.5px}
  .hero{padding:28px 0 40px}
  .check{width:58px;height:58px;margin-bottom:16px}
  .check svg{width:30px;height:30px}
  .trust{margin-top:18px;font-size:13px}
  .hero h1{font-size:38px}
  .hero .sub{font-size:17px}
  .step{padding:24px 20px}
  .step h2{font-size:26px}
  .sign{flex-direction:column;text-align:center}
}