/* 99exchi.live — shared shell (background, logo, card base, buttons, WhatsApp float) */

:root{
  --blue:#1e46b8;
  --blue-mid:#153492;
  --blue-deep:#0a1740;
  --btn:#1e3fa0;
  --btn-hi:#2a52c4;
  --gold:#f3ca18;
  --ink:#1a2340;
  --ink-dim:#6b7591;
  --line:#dfe3ec;
  --radius:10px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  padding:30px 16px 96px;
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#2450cf 0%,var(--blue) 30%,var(--blue-mid) 62%,var(--blue-deep) 100%);
  background-attachment:fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
}

img{max-width:100%;height:auto}

a{color:#2563d8}

.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 14px;border-radius:0 0 8px 0;z-index:99;font-weight:700}
.skip-link:focus{left:0}

/* ---------- logo ---------- */
.brand{display:block;margin:6px auto 24px;width:212px}
.brand img{display:block;width:100%;height:auto}

/* ---------- card shell ---------- */
main{width:100%;display:flex;flex-direction:column;align-items:center}

.card{
  width:100%;
  max-width:398px;
  background:#fff;
  border-radius:var(--radius);
  padding:24px 22px 26px;
  box-shadow:0 18px 44px rgba(4,12,40,.34);
}

.card h1{
  margin:0 0 18px;
  font-size:1.6rem;
  font-weight:400;
  text-align:center;
  color:var(--btn);
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.card h1 svg{width:22px;height:22px;fill:var(--btn);flex:none}

/* ---------- fields (plain links styled as inputs — no JS, no form post) ---------- */
.field{
  position:relative;
  display:block;
  margin-bottom:14px;
  padding:14px 46px 14px 15px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  font-size:1rem;
  color:#98a1b5;
  text-decoration:none;
}
.field:hover{border-color:#b9c3da}
.field:focus{outline:2px solid var(--btn-hi);outline-offset:1px}
.field .ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;fill:#101526}

/* ---------- buttons ---------- */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:13px 16px;
  margin:0 0 10px;
  border-radius:6px;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  line-height:1.25;
  text-align:center;
}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--btn);color:#fff}
.btn-primary svg{fill:#fff}
.btn-soft{background:#2c55b8;color:#fff}
.btn-soft svg{fill:#fff}
.btn-dark{background:#14224d;color:#fff}
.btn-dark svg{fill:#fff}
.btn-wa{background:#0f7a49;color:#fff}
.btn-wa svg{fill:#fff}
.btn-share{background:#5b2a86;color:#fff}
.btn-share svg{fill:#fff}
.btn-gold{background:var(--gold);color:#12203f}
.btn-gold svg{fill:#12203f}
.btn-line{background:#fff;color:var(--btn);border:1px solid var(--btn)}
.btn-line svg{fill:var(--btn)}

/* ---------- small bits ---------- */
.legal{margin:6px 0 0;font-size:.78rem;line-height:1.45;color:#333;text-align:center}
.mailrow{display:block;margin:12px 0 4px;text-align:center;font-size:.94rem;color:#2563d8;text-decoration:none}
.split{border:0;border-top:1px dashed #c3cadb;margin:16px 0 14px}

/* ---------- SEO keyword box (scrollable, keeps the page short) ---------- */
.seo-box{
  width:100%;
  max-width:620px;
  margin:24px auto 0;
  padding:15px 16px 14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  max-height:216px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.seo-box h2{
  margin:0 0 11px;
  font-size:.92rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.2px;
}
.also-search{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.also-search li{
  font-size:.76rem;
  line-height:1;
  color:#dbe6ff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:7px 11px;
}
.also-search li.hot{background:rgba(243,202,24,.16);border-color:rgba(243,202,24,.55);color:#ffe98a}
.seo-box::-webkit-scrollbar{width:6px}
.seo-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:99px}

/* seo keyword box — prose / list / table variants (each page a different shape) */
.seo-box p{margin:0 0 9px;font-size:.8rem;line-height:1.6;color:#dbe6ff;overflow-wrap:anywhere}
.seo-box p:last-child{margin-bottom:0}
.seo-box p b,.seo-box strong{color:#ffe98a;font-weight:700}
.seo-box h3{margin:12px 0 6px;font-size:.82rem;font-weight:700;color:#fff}
.seo-box ul.kw,.seo-box ol.kw{margin:0;padding-left:19px;color:#dbe6ff;font-size:.8rem;line-height:1.55}
.seo-box ul.kw li,.seo-box ol.kw li{margin-bottom:6px;overflow-wrap:anywhere}
.seo-box ul.kw li:last-child,.seo-box ol.kw li:last-child{margin-bottom:0}
.seo-box dl{margin:0;color:#dbe6ff;font-size:.8rem;line-height:1.55}
.seo-box dt{font-weight:700;color:#ffe98a;margin-top:9px}
.seo-box dt:first-child{margin-top:0}
.seo-box dd{margin:0 0 2px;overflow-wrap:anywhere}
.seo-box table{width:100%;border-collapse:collapse;font-size:.78rem;color:#dbe6ff}
.seo-box th,.seo-box td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top;overflow-wrap:anywhere;line-height:1.5}
.seo-box th{color:#ffe98a;font-weight:700;white-space:nowrap}
.seo-box tr:last-child td{border-bottom:0}

/* chip cloud wrapper (kept separate from the keyword box) */
.chips-box{width:100%;max-width:620px;margin:16px auto 0;padding:2px 2px 0}
.chips-box h2,.chips-box h3{margin:0 0 10px;font-size:.9rem;font-weight:700;color:#fff;letter-spacing:.2px;text-align:center}

/* card sub-title label (non-heading) */
.lttl{margin:0 0 16px;font-size:1.06rem;color:var(--btn);text-align:center;font-weight:700}

/* footer social icons — logo only, no label */
.foot-social .soc{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.foot-social .soc a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);transition:opacity .15s,transform .15s}
.foot-social .soc a:hover{opacity:.82;transform:translateY(-1px)}
.foot-social .soc svg{width:17px;height:17px;fill:#dbe6ff}

/* ---------- page link strip (crawl path, no content) ---------- */
.strip{
  width:100%;
  max-width:398px;
  margin:20px auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px 9px;
}
.strip a{
  font-size:.76rem;
  color:#cfdcff;
  text-decoration:none;
  padding:5px 10px;
  border:1px solid rgba(207,220,255,.35);
  border-radius:999px;
  line-height:1;
}
.strip a:hover{background:rgba(255,255,255,.12)}
.strip a[aria-current="page"]{background:var(--gold);color:#12203f;border-color:var(--gold);font-weight:700}

.tiny{margin:16px 0 0;font-size:.72rem;color:#a8b7de;text-align:center}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  animation:wapulse 2.2s infinite;
  z-index:60;
}
.wa-float svg{width:34px;height:34px;fill:#fff}
@keyframes wapulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}}

@media (max-width:420px){
  body{padding:22px 12px 92px}
  .brand{width:180px;margin-bottom:20px}
  .card{padding:20px 17px 22px}
  .card h1{font-size:1.42rem}
}