:root{
    /* --bg, --card-bg, --glass, --glass-border, --cyan, --gold,
       --gold-deep, --text, --muted now live in css/root.css
       (shared by all pages) */
    --page-bg:#ffffff;
    --wrap-grad:linear-gradient(135deg,#faf8f2,#f0ead9 75%);
    --danger:#c0392b;
    --save:#3c6e4a;
  }
  body{
    margin:0;
    min-height:100vh;
    font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
    background:var(--wrap-grad);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px 16px;
  }

  .page-wrap{ width:100%; max-width:1000px; margin:0 auto; }
  .promo{ max-width:560px; margin-left:auto; margin-right:auto; }
  .form-wrap{ max-width:560px; margin:0 auto; }

  /* ---- Promo section (outside the form) ---- */
  .promo{ text-align:center; margin-bottom:26px; }
  .promo .congrats{
    font-size:19px;
    font-weight:800;
    letter-spacing:.01em;
    line-height:1.4;
    text-transform:uppercase;
    margin:0 0 14px;
    background:#e1b54c;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .promo .anyone-line{
    font-size:14.5px;
    color:var(--text);
    margin:0 0 18px;
  }
  .promo .price-line{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:16px;
    font-weight:700;
    color:var(--text);
    padding:10px 20px;
    border-radius:999px;
    background:var(--glass);
    border:1px solid rgba(225,181,76,0.35);
  }
  .promo .old-price{
    position:relative;
    display:inline-block;
    font-size:14.5px;
    font-weight:600;
    color:var(--muted);
  }
  .promo .old-price::before,
  .promo .old-price::after{
    content:"";
    position:absolute;
    top:50%; left:-2px;
    width:calc(100% + 4px);
    height:1.5px;
    background:var(--muted);
  }
  .promo .old-price::before{ transform:rotate(15deg); }
  .promo .old-price::after{ transform:rotate(-15deg); }
  .promo .final-price{
    color:var(--gold-deep);
    font-size:19px;
    font-weight:800;
  }

  /* ---- Form card ---- */
  .form-wrap{
    width:100%;
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    border-radius:20px;
    padding:0px 32px 30px;
    box-shadow:0 20px 50px rgba(0,0,0,0.1);
  }

  .logo{ display:flex; justify-content:center; margin-bottom:18px; }
  .logo img{ height:140px; width:auto; object-fit:contain; }
  .logo .logo-fallback{ font-size:20px; font-weight:800; letter-spacing:.03em; color:var(--text); }
  .logo .logo-fallback span{ color:var(--gold); }

  .timer-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--gold-deep);
    background:rgba(225,181,76,0.1);
    border:1px solid rgba(225,181,76,0.3);
    border-radius:999px;
    padding:8px 16px;
    margin:0 auto 26px;
    max-width:fit-content;
  }
  .timer-bar svg{ width:14px; height:14px; }
  #timer{ font-variant-numeric:tabular-nums; font-weight:800; text-transform:none; letter-spacing:0; }

  label{ display:block; font-size:12px; font-weight:600; margin:0 0 7px; color:var(--muted); }
  label .req{ color:var(--gold-deep); }

  .field{ margin-bottom:16px; }

  .field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .field-row .field{ margin-bottom:16px; }

  @media (max-width:420px){
    .field-row{ grid-template-columns:1fr; }
  }

  /* ---- Input icon wrapper ---- */
  .input-wrap{ position:relative; }
  .input-wrap svg{
    position:absolute;
    left:14px; top:50%;
    transform:translateY(-50%);
    width:16px; height:16px;
    color:var(--muted);
    pointer-events:none;
  }
  .input-wrap input,
  .input-wrap select{
    padding-left:40px;
  }

  input, select{
    width:100%;
    padding:12px 14px;
    font-size:13.5px;
    font-family:inherit;
    color:var(--text);
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:10px;
    outline:none;
    transition:border-color .2s ease, background .2s ease;
    appearance:none;
    -webkit-appearance:none;
  }
  input::placeholder{ color:var(--muted); opacity:.75; }
  input:focus, select:focus{ border-color:var(--cyan); background:rgba(225,181,76,0.06); }

  .select-wrap{ position:relative; }
  .select-wrap::after{
    content:"";
    position:absolute;
    right:16px; top:50%;
    width:9px; height:9px;
    border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted);
    transform:translateY(-65%) rotate(45deg);
    pointer-events:none;
  }
  select{ cursor:pointer; padding-right:36px; }

  .error-msg{ font-size:11.5px; color:var(--danger); margin-top:6px; display:none; }
  .field.invalid input, .field.invalid select{ border-color:var(--danger); }
  .field.invalid .error-msg{ display:block; }

  .whatsapp-note{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:13px; color:var(--text); margin:8px 0 20px;
  }
  .whatsapp-note svg{ width:18px; height:18px; flex:none; }

  .next-btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:11px;
    background:#e1b54c;
    color:#1a1712;
    font-size:15px;
    font-weight:800;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(225,181,76,0.4);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .next-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(225,181,76,0.5); }
  .next-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

  .fine-print{ text-align:center; font-size:11.5px; line-height:1.6; color:var(--muted); margin-top:16px; }
  .fine-print a{ color:var(--gold-deep); text-decoration:underline; }

  .success-msg{
    display:none; text-align:center; font-size:13.5px; color:var(--gold-deep);
    background:rgba(225,181,76,0.1); border:1px solid rgba(225,181,76,0.3);
    border-radius:10px; padding:12px; margin-top:16px;
  }

  /* ---- Bonuses section (after the form) ---- */
  .bonus-section{
    width:100%;
    max-width:960px;
    margin:56px auto 0;
    text-align:center;
  }

  .bonus-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:fit-content;
    margin:0 auto 18px;
    padding:6px 16px;
    border-radius:999px;
    background:rgba(225,181,76,0.12);
    border:1px solid rgba(225,181,76,0.3);
    color:var(--gold-deep);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .bonus-eyebrow svg{ width:13px; height:13px; }

  .bonus-heading{
    font-size:clamp(21px,3vw,28px);
    font-weight:800;
    line-height:1.4;
    color:var(--text);
    margin:0 0 40px;
  }
  .bonus-heading .accent{
    background:#e1b54c;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .bonus-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-bottom:44px;
  }
  .bonus-card{
    position:relative;
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    border-radius:20px;
    padding:32px 24px 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .bonus-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg,#e1b54c,#f5dfa0,#e1b54c);
    opacity:0;
    transition:opacity .3s ease;
  }
  .bonus-card:hover{
    transform:translateY(-8px);
    border-color:rgba(225,181,76,0.45);
    box-shadow:0 22px 44px rgba(0,0,0,0.1);
  }
  .bonus-card:hover::before{ opacity:1; }

  .bonus-icon{
    width:56px; height:56px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(225,181,76,0.18),rgba(225,181,76,0.06));
    border:1px solid rgba(225,181,76,0.3);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-deep);
  }
  .bonus-icon svg{ width:26px; height:26px; }

  .bonus-tag{
    display:inline-flex;
    align-items:center;
    padding:5px 14px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    background:rgba(60,110,74,0.12);
    border:1px solid rgba(60,110,74,0.3);
    color:var(--save);
  }
  .bonus-desc{
    font-size:14.5px;
    line-height:1.6;
    color:var(--text);
    font-weight:600;
    margin:0;
    min-height:48px;
  }
  .bonus-value{
    font-size:15px;
    font-weight:800;
    color:var(--danger);
    margin:0;
    padding-top:12px;
    border-top:1px solid var(--glass-border);
    width:100%;
  }

  .cert-line{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:14.5px;
    line-height:1.7;
    color:var(--text);
    max-width:800px;
    margin:0 auto 40px;
    padding:14px 26px;
    border-radius:999px;
    background:var(--glass);
    border:1px solid var(--glass-border);
  }
  .cert-line svg{ width:18px; height:18px; color:var(--gold-deep); flex:none; }
  .cert-line b{ color:var(--gold-deep); }

  .trust-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    padding:28px;
    border-radius:20px;
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    width:100%;
    max-width:1110px;
    margin:0 auto;
  }
  .trust-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    border-radius:14px;
    background:var(--glass);
    border:1px solid var(--glass-border);
    transition:transform .25s ease, border-color .25s ease;
  }
  .trust-item:hover{
    transform:translateY(-3px);
    border-color:rgba(225,181,76,0.35);
  }
  .trust-icon{
    width:38px;height:38px;
    border-radius:50%;
    background:rgba(225,181,76,0.14);
    border:1px solid rgba(225,181,76,0.3);
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-deep);
    flex:none;
  }
  .trust-icon svg{ width:18px; height:18px; }
  .trust-item span{
    font-size:12.5px;
    line-height:1.4;
    color:var(--text);
    font-weight:700;
    text-align:left;
  }
  .trust-secure{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 22px;
    border-radius:14px;
    background:rgba(192,57,43,0.06);
    border:1px solid rgba(192,57,43,0.2);
    text-align:left;
  }
  .trust-secure .lock-badge{
    width:38px;height:38px;
    border-radius:50%;
    background:rgba(192,57,43,0.12);
    border:1px solid rgba(192,57,43,0.3);
    display:flex;align-items:center;justify-content:center;
    color:var(--danger);
    flex:none;
  }
  .trust-secure .lock-badge svg{ width:18px; height:18px; }
  .trust-secure strong{
    display:block;
    font-size:13px;
    font-weight:800;
    color:var(--danger);
    margin-bottom:3px;
  }
  .trust-secure p{
    margin:0;
    font-size:11.5px;
    line-height:1.5;
    color:var(--muted);
    max-width:220px;
  }

  @media (max-width:760px){
    .bonus-grid{ grid-template-columns:1fr; }
    .trust-row{ flex-direction:column; align-items:stretch; }
    .trust-item, .trust-secure{ width:100%; }
  }

  /* ================= PAYMENT / ORDER SUMMARY STEP ================= */
  .payment-wrap{
    display:none;
    max-width:560px;
    margin:0 auto;
  }
  .payment-wrap.active{ display:block; }
  .page-wrap.step-2 .promo,
  .page-wrap.step-2 .form-wrap,
  .page-wrap.step-2 .bonus-section{ display:none; }

  .pay-card{
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    border-radius:20px;
    padding:26px 26px 28px;
    box-shadow:0 20px 50px rgba(0,0,0,0.1);
  }

  .pay-eyebrow{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:fit-content; margin:0 auto 16px;
    padding:6px 16px; border-radius:999px;
    background:rgba(192,57,43,0.1); border:1px solid rgba(192,57,43,0.3);
    color:var(--danger); font-size:11px; font-weight:800;
    letter-spacing:.05em; text-transform:uppercase;
  }
  .pay-eyebrow svg{ width:13px; height:13px; }

  .order-title{
    text-align:center; font-size:13px; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:.05em; margin:0 0 4px;
  }
  .order-course{
    text-align:center; font-size:17px; font-weight:800; color:var(--text);
    margin:0 0 20px;
  }

  .price-box{
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:16px; margin-bottom:20px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(225,181,76,0.14),rgba(225,181,76,0.05));
    border:1px solid rgba(225,181,76,0.35);
  }
  .price-box .was{
    position:relative; font-size:16px; color:var(--muted); font-weight:600;
  }
  .price-box .was::before{
    content:""; position:absolute; top:50%; left:-2px;
    width:calc(100% + 4px); height:1.5px; background:var(--muted); transform:rotate(-10deg);
  }
  .price-box .now{ font-size:28px; font-weight:800; color:var(--gold-deep); }
  .price-box .off-tag{
    font-size:11px; font-weight:800; color:var(--save);
    background:rgba(60,110,74,0.12); border:1px solid rgba(60,110,74,0.3);
    padding:4px 10px; border-radius:999px;
  }

  .summary-list{
    list-style:none; margin:0 0 18px; padding:14px 16px;
    border-radius:12px; background:var(--glass); border:1px solid var(--glass-border);
  }
  .summary-list li{
    display:flex; justify-content:space-between; align-items:center;
    font-size:13px; color:var(--text); padding:7px 0;
  }
  .summary-list li.total{
    border-top:1px dashed var(--glass-border); margin-top:6px; padding-top:12px;
    font-weight:800; font-size:14.5px; color:var(--gold-deep);
  }
  .summary-list li .lbl{ color:var(--muted); font-weight:600; }
  .summary-list li.discount .val{ color:var(--danger); font-weight:700; }

  .unlock-note{
    display:flex; align-items:center; gap:8px; justify-content:center;
    font-size:12px; font-weight:700; color:var(--gold-deep);
    margin:0 0 12px;
  }
  .unlock-note svg{ width:15px; height:15px; }

  .perk-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; }
  .perk-list li{
    display:flex; gap:10px; align-items:flex-start;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:11px 13px;
  }
  .perk-list .perk-icon{
    flex:none; width:26px; height:26px; border-radius:8px;
    background:rgba(225,181,76,0.16); border:1px solid rgba(225,181,76,0.3);
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .perk-list .perk-text{ font-size:13px; line-height:1.5; }
  .perk-list .perk-text b{ display:block; color:var(--text); font-weight:700; }
  .perk-list .perk-text span{ color:var(--muted); font-size:11.5px; }

  .contact-confirm{
    border-top:1px solid var(--glass-border); padding-top:16px; margin-top:4px; margin-bottom:20px;
  }
  .contact-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:13px; padding:8px 0;
  }
  .contact-row .lbl{ color:var(--muted); }
  .contact-row .val{ font-weight:700; color:var(--text); }
  .contact-row .note{ display:block; font-size:11px; color:var(--muted); font-weight:400; margin-top:2px; }
  .change-link{
    background:none; border:none; color:var(--gold-deep); font-weight:700;
    font-size:12px; text-decoration:underline; cursor:pointer; padding:0;
  }

  .pay-btn{
    width:100%; padding:16px; border:none; border-radius:11px;
    background:#e1b54c; color:#1a1712; font-size:16px; font-weight:800;
    cursor:pointer; box-shadow:0 10px 26px rgba(225,181,76,0.4);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .pay-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(225,181,76,0.5); }

  .powered-by{
    text-align:center; font-size:11px; color:var(--muted); margin-top:14px;
  }