/* 99exchi.org — shared shell (header, footer, tokens, seo box, wa float) */
:root{
  --b1:#2a58e0; --b2:#12307f; --b3:#0a1740; --b4:#061029;
  --gold:#f6c418; --gold-2:#ffa41b;
  --ink:#12213f; --ink-dim:#5a6a8c;
  --pap:#ffffff; --line:#dde5f6;
  --wht:#ffffff; --wht-dim:#c3d0ee;
  --radius:14px;
  --shadow:0 18px 44px rgba(4,10,32,.42);
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--wht);
  background:#0a1740;
  background:
    radial-gradient(900px 520px at 50% -8%,rgba(90,140,255,.34),transparent 62%),
    linear-gradient(180deg,#2450cf 0%,#1a3aa6 34%,#0f2160 70%,#0a1740 100%);
  background-attachment:fixed;
  min-height:100vh;line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--gold);text-decoration:none}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#12213f;
  padding:10px 16px;font-weight:700;z-index:999}
.skip-link:focus{left:0}

/* ---------- header ---------- */
.hdr{position:relative;background:rgba(6,16,41,.82);border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(7px)}
.hdr-in{max-width:1140px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:36px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav a{color:var(--wht-dim);font-size:.9rem;font-weight:600;white-space:nowrap}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold)}
.cta-top{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#241a00 !important;
  padding:9px 18px;border-radius:30px;font-weight:800;font-size:.86rem;letter-spacing:.2px}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:9px;width:42px;height:38px;font-size:1.2rem;cursor:pointer;line-height:1}

@media(max-width:900px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;
    gap:0;background:#0a1740;border-bottom:1px solid rgba(255,255,255,.14);
    max-height:0;overflow:hidden;transition:max-height .28s ease;z-index:60}
  .nav.open{max-height:520px}
  .nav a{padding:13px 20px;border-top:1px solid rgba(255,255,255,.08)}
  .cta-top{margin:12px 20px 16px;text-align:center;border-radius:10px}
}

/* ---------- page shell ---------- */
main{display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.crumb{max-width:1140px;margin:0 auto;padding:14px 16px 0;font-size:.8rem;color:var(--wht-dim)}
.crumb a{color:var(--wht-dim)}
.crumb a:hover{color:var(--gold)}

.hero{max-width:820px;margin:0 auto;padding:26px 16px 4px;text-align:center}
.hero h1{margin:0 0 8px;font-size:1.72rem;line-height:1.25;letter-spacing:-.3px}
.hero p{margin:0;color:var(--wht-dim);font-size:.98rem}
@media(max-width:600px){.hero h1{font-size:1.36rem}}

.cardwrap{display:flex;justify-content:center;padding:22px 16px 34px}

/* ---------- panel card (same format on every page) ---------- */
.panel{width:100%;max-width:396px;background:#fff;border-radius:10px;padding:26px 24px 24px;
  box-shadow:var(--shadow)}
.panel-wide{max-width:452px;padding:28px 28px 26px}
.panel-logo{display:block;margin:0 auto 20px;height:58px;width:auto}
.panel .cardttl{margin:0 0 20px;text-align:center;font-size:1.5rem;font-weight:500;color:#1e3fa0;
  letter-spacing:.6px;display:flex;align-items:center;justify-content:center;gap:9px}
.panel-wide .cardttl{font-size:1.58rem}
.mail{display:block;text-align:center;margin:14px 0 0;font-size:.93rem;color:#2c56c6}
.dash{border:0;border-top:1px dashed #b9c4da;margin:16px 0 17px}

/* shared card bits */
.field{display:flex;align-items:center;gap:10px;width:100%;padding:13px 15px;margin-bottom:13px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:#8a94a8;font-size:.95rem}
.field:hover{border-color:var(--b1)}
.field .ic{margin-left:auto;opacity:.75;flex:0 0 auto}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 16px;
  border-radius:9px;font-weight:700;font-size:.97rem;margin-bottom:11px;text-align:center}
.btn-blue{background:#1e3fa0;color:#fff !important}
.btn-blue:hover{background:#17337f}
.btn-blue-2{background:#2c56c6;color:#fff !important}
.btn-dark{background:#141c2f;color:#fff !important}
.btn-wa{background:#25D366;color:#04250F !important}
.btn-purple{background:#4a2a86;color:#fff !important}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#241a00 !important}
.small{font-size:.74rem;color:#6c7a93;line-height:1.5;text-align:center}
.small a{color:#2c56c6}

/* ---------- seo box (bottom of page) ---------- */
.seo-box{max-width:980px;margin:6px auto 30px;padding:20px 22px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  max-height:300px;overflow-y:auto;scrollbar-width:thin}
.seo-box h2{margin:0 0 10px;font-size:1.12rem;color:var(--gold)}
.seo-box h3{margin:16px 0 6px;font-size:.98rem;color:#fff}
.seo-box p{margin:0 0 10px;font-size:.9rem;color:var(--wht-dim)}
.seo-box ul,.seo-box ol{margin:0 0 10px;padding-left:20px;font-size:.9rem;color:var(--wht-dim)}
.seo-box li{margin-bottom:5px}
.seo-box table{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:.86rem;color:var(--wht-dim)}
.seo-box th,.seo-box td{border:1px solid rgba(255,255,255,.16);padding:6px 9px;text-align:left;vertical-align:top}
.seo-box th{color:#fff;font-weight:600}
.seo-box dl{margin:0 0 10px;font-size:.9rem;color:var(--wht-dim)}
.seo-box dt{color:#fff;font-weight:600;margin-top:8px}
.seo-box dd{margin:2px 0 0;padding:0}
.seo-box::-webkit-scrollbar{width:7px}
.seo-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:6px}

/* ---------- footer ---------- */
.ftr{background:rgba(4,10,28,.72);border-top:1px solid rgba(255,255,255,.12);padding:28px 16px 22px}
.ftr-in{max-width:1140px;margin:0 auto}
.ftr-top{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.ftr-top img{height:34px;width:auto}
.strip{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0 0;padding:0;list-style:none}
.strip a{color:var(--wht-dim);font-size:.83rem;font-weight:600}
.strip a:hover{color:var(--gold)}

/* seo box #2 — keyword cloud inside footer */
.ftr-seo{margin-top:20px;padding:16px 18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  max-height:190px;overflow-y:auto;scrollbar-width:thin}
.ftr-seo h2,.ftr-seo h3{margin:0 0 10px;font-size:.95rem;color:var(--gold);letter-spacing:.3px}
.also-search{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.also-search li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);
  color:var(--wht-dim);font-size:.76rem;padding:5px 11px;border-radius:20px}
.also-search li.hot{background:rgba(246,196,24,.14);border-color:rgba(246,196,24,.42);color:#ffdf7a}
.ftr-seo::-webkit-scrollbar{width:7px}
.ftr-seo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:6px}

.ftr-blurb{margin-top:16px;font-size:.82rem;color:var(--wht-dim);line-height:1.65;max-width:820px}
.social{display:flex;gap:14px;margin-top:16px;align-items:center}
.social a{color:var(--wht-dim);display:inline-flex}
.social svg{width:26px;height:26px;fill:currentColor;display:block}
.social a:hover{color:var(--gold)}
.legal{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.76rem;color:#8ea0c6;line-height:1.65}

/* ---------- whatsapp float ---------- */
.wa{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;z-index:80;
  box-shadow:0 8px 22px rgba(0,0,0,.4);animation:wapulse 2.2s infinite}
.wa svg{width:33px;height:33px;fill:#fff}
@keyframes wapulse{
  0%{box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 0 17px rgba(37,211,102,0)}
  100%{box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 0 0 rgba(37,211,102,0)}
}
@media(max-width:600px){.wa{width:54px;height:54px;right:14px;bottom:14px}.wa svg{width:29px;height:29px}}