:root{
      --teal1:#16d2c3; --teal2:#05b7ad;
      --text:#111; --line:#e9e9e9; --shadow: 0 12px 30px rgba(0,0,0,.10);
      --green:#12b35b;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#fff;color:var(--text)}
    a{text-decoration:none;color:inherit}
    .wrap{max-width:980px;margin:0 auto;padding:0 14px 70px}

    h2{font-size:30px;letter-spacing:-.4px;margin:28px 4px 14px}

    .card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}
    .field{margin:12px 0}
    label{display:block;font-size:13px;color:#444;margin-bottom:8px;font-weight:900}

    .row{display:grid;grid-template-columns: 1fr 1fr;gap:10px;align-items:start}
    .input, .select{
      width:100%;padding:14px 14px;border-radius:16px;border:1px solid var(--line);
      background:#f4f4f4;outline:none;font-size:16px
    }
    textarea.input{min-height:110px;resize:vertical}
    .hint{font-size:12px;color:#777;margin-top:8px}

    .btnRow{margin-top:12px;display:grid;gap:12px}
    .btn{
      width:100%;border:none;padding:16px 16px;border-radius:999px;
      font-weight:900;cursor:pointer;font-size:16px;box-shadow:0 12px 26px rgba(0,0,0,.12)
    }
    .btn.green{background:var(--green);color:#fff}
    .btn i{margin-right:10px}

    .msg{padding:12px 14px;border-radius:16px;margin:12px 0;font-weight:900}
    .err{background:#fff2f2;border:1px solid #ffd0d0;color:#9b1c1c}
    .err i{margin-right:8px}

    /* picker */
    .pickerWrap{position:relative}
    .countryList{
      position:absolute;left:0;right:0;top:74px;
      display:none;max-height:320px;overflow:auto;
      background:#fff;border:1px solid var(--line);
      border-radius:16px;box-shadow:var(--shadow);z-index:9999;
    }
    .countryRow{padding:12px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center}
    .countryRow:hover{background:#f5f5f5}
    .countryLeft{font-weight:900;display:flex;gap:10px;align-items:center}
    .flag{font-size:18px}
    .countryDial{font-weight:900;color:#111}

    /* Toast */
    .toast{
      position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
      background:rgba(0,0,0,.82);color:#fff;padding:12px 14px;border-radius:14px;
      font-weight:900;display:none;z-index:99999;min-width:220px;
      box-shadow:0 10px 26px rgba(0,0,0,.25);
    }
    .toast i{margin-right:10px}
    .toast.ok{border:1px solid rgba(40,220,120,.35)}
    .toast.err{border:1px solid rgba(255,80,80,.35)}

    /* Modal - match screenshot layout */
    .modalOverlay{
      position:fixed; inset:0; background:rgba(0,0,0,.45);
      display:none; align-items:center; justify-content:center; z-index:999999;
      padding:14px;
    }
    .modal{
      width:min(560px, 100%);
      background:#fff; border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .modalTop{
      padding:14px 16px;
      display:flex; align-items:center; justify-content:space-between;
      border-bottom:1px solid var(--line);
      font-weight:1000;
    }
    .modalTop .left{display:flex;align-items:center;gap:10px}
    .modalTop .left i{opacity:.9}
    .modalClose{
      border:none; background:transparent; font-size:22px; cursor:pointer; padding:6px 10px;
    }
    .modalBody{padding:18px}
    .modalH1{font-size:24px;letter-spacing:-.6px;margin:0 0 6px;font-weight:1100}
    .modalP{margin:0 0 14px;color:#666;line-height:1.45;font-size:16px}

    .bigLinkRow{display:flex;gap:14px;align-items:flex-end;margin:12px 0 14px}
    .waBlob{
      width:20px;height:20px;border-radius:14px;background:#e9fff3;
      display:grid;place-items:center;font-size:22px;color:#11a84f;flex:0 0 auto;
    }
    .bigLink{
      font-size:20px;font-weight:1200;line-height:1.02;letter-spacing:-.8px;
      word-break:break-word;
    }

    .btnRow2{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
    .pill{
      border-radius:999px;padding:12px 16px;font-weight:1000;border:1px solid var(--line);
      background:#fff;cursor:pointer;display:inline-flex;gap:10px;align-items:center;
    }
    .pill.black{background:#111;color:#fff;border-color:#111}
    .pill i{font-size:16px}

    .qrBox{
      border:1px solid var(--line);
      background:#fafafa;
      border-radius:14px;
      padding:14px;
      display:grid;
      place-items:center;
      margin:14px 0 14px;
    }
    .qrImg{
      width:240px;max-width: 90%;
      background:#fff;border-radius:12px;
      box-shadow:0 10px 26px rgba(0,0,0,.10);
      padding:10px;
    }

    @media (max-width:640px){
      .hero h1{font-size:30px}
      h2{font-size:28px}
      .row{grid-template-columns: 1fr}
      .modalH1{font-size:24px}
      .bigLink{font-size:20px}
    }
    
    .qrBoxWrap{
  border:1px solid var(--line);
  background:#fafafa;
  border-radius:14px;
  padding:14px;
  display:grid;
  place-items:center;
  margin:12px 0 14px;
}
.qrCanvas{
  width:280px;
  height:280px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  display:flex;              /* ✅ */
  align-items:center;        /* ✅ */
  justify-content:center;    /* ✅ */
  overflow:hidden;           /* ✅ */
}
.qrCanvas canvas, .qrCanvas img{
  display:block;
  max-width:100%;
  max-height:100%;
}

/* ================= HEADER (Animated WhatsApp Green) ================= */

.mainHeader{
  width:100%;
  padding:16px 18px;
  position:sticky;
  top:0;
  z-index:100002;
  color:#fff;

  /* WhatsApp-ish animated gradient */
  background:linear-gradient(120deg,#15c7c2,#13b7c3,#119fc1,#075E54);
  background-size: 320% 320%;
  animation: wameGradient 10s ease-in-out infinite;

  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

@keyframes wameGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.headerInner{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* LEFT BRAND */
.brandWrap{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
}

.diamond{
  width:42px;
  height:42px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.brandText{
  font-size:18px;
  font-weight:900;
  letter-spacing:.8px;
  line-height:1;
}

/* CENTER LANG DROPDOWN */
.langWrap{ position:relative; }

.langBtn{
  display:flex;
  align-items:center;
  gap:10px;
  border:none;
  cursor:pointer;

  padding:10px 14px;
  border-radius:999px;

  background: rgba(255,255,255,.14);
  color:#fff;
  font-weight:900;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
}

.langBtn:active{ transform: translateY(1px); }

.langCode{
  letter-spacing:.6px;
}

/* Dropdown panel */
.langDropdown{
  position:absolute;
  right:0;
  top:52px;
  width:220px;

  display:none;
  background:#fff;
  color:#111;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.08);
  z-index:99999;
}

.langDropdown.open{ display:block; }

.langItem{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border:none;
  background:#fff;
  cursor:pointer;
  font-weight:900;
}

.langItem:hover{
  background:#f3f4f6;
}

/* ===== MENU WRAP ===== */
.menuWrap{
  position:relative;
}

/* ===== HAMBURGER BUTTON ===== */
.menuBtn{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0px;
  cursor:pointer;
  position: relative;
  z-index: 100001;
}

.menuBtn span{
  height:3px;
  width:26px;
  background:#fff;
  border-radius:4px;
  margin:auto;
  transition: all .25s ease;
    z-index: 100001;
}

/* Animate to X */
.menuBtn.isOpen span:nth-child(1){
  transform: translateY(9px) rotate(45deg);
}
.menuBtn.isOpen span:nth-child(2){
  opacity:0;
}
.menuBtn.isOpen span:nth-child(3){
  transform: translateY(-9px) rotate(-45deg);
}

/* ===== DROPDOWN ===== */
.menuDropdown{
  position:fixed;
  right:0;
  top:60px;
  width:230px;
  display:none;
  flex-direction:column;

  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,.08);
  z-index:100003;
}

.menuDropdown.open{
  display:flex;
  animation:fadeMenu .25s ease;
}

@keyframes fadeMenu{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}

.menuItem{
  padding:14px 16px;
  font-weight:1000;
  text-decoration:none;
  color:#111;
  display:flex;
  align-items:center;
  gap:12px;
  transition:.2s;
}

.menuItem:hover{
  background:#f3f4f6;
}

.menuItem i{
  width:18px;
}

/* Premium highlight */
.premiumItem{
  background:linear-gradient(90deg,#25D366,#128C7E);
  color:#fff;
}

.premiumItem:hover{
  opacity:.92;
}

/* ===== BLUR BACKGROUND ===== */
.blurOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index:99998;
}

.blurOverlay.show{
  opacity:1;
  pointer-events:auto;
}

/* HERO CARD (animated gradient like header) */
.heroCard{
  margin-top:16px;
  border-radius:28px;
  padding:14px;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
}

.heroInner{
  border-radius:24px;
  padding:34px 18px 28px;
  text-align:center;
  color:#fff;

  /* animated whatsapp green gradient */
  background: linear-gradient(120deg, #25D366, #128C7E, #25D366, #075E54);
  background-size: 320% 320%;
  animation: wameGradient 10s ease-in-out infinite;

  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.heroInner h1{
  margin:0;
  font-size:40px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:-.6px;
  text-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.heroInner p{
  margin:14px auto 0;
  max-width: 56ch;
  font-size:18px;
  line-height:1.6;
  opacity:.95;
}

.heroHost{
  font-weight:1000;
  word-break: break-word;
  display:inline-block;
}

@media (max-width:640px){
  .heroInner h1{ font-size:32px; }
  .heroInner p{ font-size:16px; }
}

/* GRADIENT BUTTON (like header) */
.btnGradient{
  width:100%;
  border:none;
  padding:18px 18px;
  border-radius:999px;
  font-weight:1000;
  font-size:18px;
  cursor:pointer;
  color:#fff;

  background: linear-gradient(120deg, #25D366, #128C7E, #25D366, #075E54);
  background-size: 320% 320%;
  animation: wameGradient 8s ease-in-out infinite;

  box-shadow:0 18px 36px rgba(0,0,0,.12);
  transition: transform .12s ease, filter .12s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.btnGradient:active{
  transform: translateY(1px) scale(.99);
}

.btnGradient:hover{
  filter: brightness(1.03);
}

/* ===== Footer (match reference style) ===== */
.siteFooter{
  margin-top:26px;
  background:#243845; /* dark slate like screenshot */
  color:#fff;
  padding:22px 14px 18px;
  position:relative;
  overflow:hidden;
}

/* subtle gradient glow */
.siteFooter::before{
  content:"";
  position:absolute;
  inset:-120px -80px auto -80px;
  height:220px;
  background: radial-gradient(closest-side, rgba(37,211,102,.22), transparent 70%);
  pointer-events:none;
}

/* Promo pill */
.footPromo{
  max-width:980px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 14px;
  border-radius:18px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.footPromoIcon{
  width:34px;height:34px;
  border-radius:999px;
  display:grid;place-items:center;
  background: linear-gradient(120deg, #25D366, #128C7E, #25D366, #075E54);
  background-size:320% 320%;
  animation:wameGradient 10s ease-in-out infinite;
  box-shadow:0 14px 34px rgba(0,0,0,.25);
  flex:0 0 auto;
}
.footPromoIcon i{font-size:18px;color:#fff}

.footPromoText{flex:1}
.footPromoTitle{
  font-weight:1000;
  font-size:14px;
  letter-spacing:-.4px;
  line-height:1.1;
}
.footPromoSub{
  margin-top:2px;
  font-size:10px;
  opacity:.9;
  font-weight:800;
}

.footPromoBtn{
  width:38px;height:38px;
  border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  flex:0 0 auto;
}

/* Main footer wrap */
.footWrap{
  max-width:980px;
  margin:0 auto;
}

.footTitle{
  font-size:18px;
  font-weight:1100;
  letter-spacing:-.6px;
  margin:10px 0 14px;
}

.footGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.footCard{
  border-radius:14px;
  padding:8px 10px;
  background:#0f6b57;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.20);
  display:flex;
  align-items:center;
  gap:3px;
  min-height:52px;
}

.footCardMain{
  display:block;
  font-size:14px;   /* smaller */
  font-weight:900;
  line-height:1.1;
}

.footCardSub{
  display:block;
  font-size:12px;   /* slightly bigger for readability */
  font-weight:800;
  opacity:.9;
  line-height:1.1;
}

.footCardIcon{
  width:22px;
  height:22px;
}
.footCardIcon i{
  font-size:14px;
}

/* Social row */
.footSocial{
  display:flex;
  justify-content:center;
  gap:22px;
  margin:20px 0 12px;
}

.footSocialBtn{
  width:46px;height:46px;
  border-radius:999px;
  display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.footSocialBtn i{font-size:24px}

/* Trusted */
.footTitle2{
  font-size:24px;
  font-weight:1100;
  letter-spacing:-.6px;
  margin:18px 0 12px;
}

.footTrust{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  justify-content:center;
  align-items:center;
  opacity:.95;
  margin-bottom:16px;
}

.trustItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
}
.trustItem i{opacity:.95}

/* Copyright */
.footCopy{
  text-align:center;
  font-size:12px;
  opacity:.85;
  padding-top:10px;
}

/* Mobile tuning */
@media (max-width:520px){
  .footTitle, .footTitle2{font-size:22px}
  .footPromoTitle{font-size:14px}
  .footPromoSub{font-size:10px}
}