/* ============================================================
   XpressCoinsBot — Featured Tool
   Telegram bot that automates the AliExpress stack.
   Visible everywhere: hero band, floating launcher, nav, footer.
   ============================================================ */

:root{
  --tg:        oklch(0.64 0.13 233);   /* Telegram blue */
  --tg-deep:   oklch(0.50 0.13 245);
  --tg-glow:   oklch(0.64 0.13 233 / .45);
  --coinsbot-coral: #f4694f;           /* matches mascot image bg */
}

/* mascot circle frame — coral bg merges with the mascot's own bg
   so the square image's corners disappear inside the circle */
.mascot-orb{
  position:relative;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #f8806b, var(--coinsbot-coral) 72%);
  box-shadow:var(--shadow-lg), inset 0 0 0 4px rgba(255,255,255,.14);
  flex:none;
}
.mascot-orb img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ----------------------------------------------------------
   FEATURED BAND
   ---------------------------------------------------------- */
.coinsbot-band{ padding-block:clamp(40px,6vw,72px); }
.coinsbot{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); color:#fff;
  background:linear-gradient(135deg, var(--tg-deep), var(--tg) 60%, oklch(0.6 0.14 250));
  box-shadow:var(--shadow-lg);
  padding:clamp(26px,4vw,52px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
/* floating coin sparkles in the panel bg */
.coinsbot::before,
.coinsbot::after{
  content:""; position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none;
}
.coinsbot::before{ width:340px; height:340px; top:-120px; right:-80px; }
.coinsbot::after{ width:240px; height:240px; bottom:-120px; left:-60px; }

.coinsbot__art{ position:relative; z-index:1; display:grid; place-items:center; }
.coinsbot__art .mascot-orb{ width:clamp(160px,20vw,250px); aspect-ratio:1; }
/* little floating coin chips around the mascot */
.coin-chip{
  position:absolute; z-index:2;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:20px; color:#7a4d00;
  background:linear-gradient(160deg,#ffd76a,#f5a623);
  box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.5);
  animation:cb-bob 4.5s ease-in-out infinite;
}
.coin-chip.c1{ top:2%; left:0; animation-delay:0s; }
.coin-chip.c2{ bottom:6%; right:-4%; width:38px; height:38px; font-size:16px; animation-delay:1.2s; }
.coin-chip.c3{ top:44%; right:-8%; width:32px; height:32px; font-size:14px; animation-delay:.6s; }
@keyframes cb-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-12px) rotate(4deg);} }

.coinsbot__copy{ position:relative; z-index:1; }
.coinsbot__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px);
  margin-bottom:16px;
}
.coinsbot__eyebrow svg{ width:15px; height:15px; }
.coinsbot__copy h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,3.6vw,42px); letter-spacing:-.02em; line-height:1.05;
}
.coinsbot__copy h2 b{ color:#ffd76a; font-weight:700; }
.coinsbot__copy p{
  font-size:clamp(15px,1.9vw,18.5px); line-height:1.5;
  color:rgba(255,255,255,.9); margin-top:16px; max-width:48ch;
}
.coinsbot__feats{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px;
}
.coinsbot__feats li{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; color:#fff;
}
.coinsbot__feats svg{ width:20px; height:20px; flex:none; color:#ffd76a; }
.coinsbot__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.btn--tg{
  background:#fff; color:var(--tg-deep);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  display:inline-flex; align-items:center; gap:10px;
}
.btn--tg:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.28); background:#fff; }
.btn--tg svg{ width:20px; height:20px; }
.btn--tg-ghost{
  background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.45);
}
.btn--tg-ghost:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
.coinsbot__free{
  margin-top:16px; font-size:13.5px; color:rgba(255,255,255,.82);
  display:inline-flex; align-items:center; gap:8px;
}
.coinsbot__free .dot{ width:8px; height:8px; border-radius:50%; background:#7ff0a8; box-shadow:0 0 0 0 #7ff0a8; animation:pulse 2.2s infinite; }

@media (max-width:820px){
  .coinsbot{ grid-template-columns:1fr; text-align:center; padding-block:clamp(30px,7vw,46px); }
  .coinsbot__art{ order:-1; }
  .coinsbot__copy p{ margin-inline:auto; }
  .coinsbot__feats{ justify-content:center; }
  .coinsbot__cta{ justify-content:center; }
  .coinsbot__free{ justify-content:center; }
}

/* ----------------------------------------------------------
   NAV LINK badge (header + mobile)
   ---------------------------------------------------------- */
.nav-bot{ display:inline-flex; align-items:center; gap:7px; color:var(--tg) !important; font-weight:600 !important; }
.nav-bot:hover{ background:oklch(0.64 0.13 233 / .1) !important; }
.nav-bot .nav-bot__dot{
  width:7px; height:7px; border-radius:50%; background:var(--tg);
  box-shadow:0 0 0 0 var(--tg-glow); animation:pulse 2.2s infinite;
}
.mobile-nav .nav-bot{ font-size:17px; }

/* ----------------------------------------------------------
   FLOATING LAUNCHER — persistent on every screen
   ---------------------------------------------------------- */
.bot-fab{
  position:fixed; left:22px; bottom:22px; z-index:60;
  display:inline-flex; align-items:center; gap:0;
  text-decoration:none;
}
.bot-fab__orb{
  position:relative;
  width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #f8806b, var(--coinsbot-coral) 72%);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  overflow:visible; flex:none;
}
.bot-fab__orb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
}
/* pulsing ring */
.bot-fab__orb::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 var(--tg-glow);
  animation:fab-pulse 2.4s ease-out infinite;
}
@keyframes fab-pulse{
  0%{ box-shadow:0 0 0 0 var(--tg-glow); }
  70%{ box-shadow:0 0 0 16px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
/* telegram glyph badge */
.bot-fab__badge{
  position:absolute; right:-3px; bottom:-3px;
  width:26px; height:26px; border-radius:50%;
  background:var(--tg); display:grid; place-items:center;
  border:2.5px solid var(--bg); box-shadow:var(--shadow-sm);
}
.bot-fab__badge svg{ width:14px; height:14px; color:#fff; }
/* expanding label */
.bot-fab__label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff;
  background:var(--tg); border-radius:999px;
  margin-left:-32px; padding:0; height:44px;
  display:flex; align-items:center;
  box-shadow:0 10px 26px var(--tg-glow);
  transition:max-width .35s cubic-bezier(.2,.7,.2,1), padding .35s, margin-left .35s;
}
.bot-fab:hover .bot-fab__label,
.bot-fab:focus-visible .bot-fab__label{
  max-width:260px; padding:0 18px 0 40px; margin-left:-32px;
}
@media (max-width:760px){
  .bot-fab{ left:16px; bottom:84px; }   /* clear the mobile sticky CTA bar */
  .bot-fab__label{ display:none; }
  .bot-fab__orb{ width:58px; height:58px; }
}

/* ----------------------------------------------------------
   FOOTER tool card
   ---------------------------------------------------------- */
.foot-bot{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg, var(--tg-deep), var(--tg));
  border-radius:var(--r-md); padding:16px 18px; margin-top:4px;
  text-decoration:none; color:#fff;
  transition:transform .2s, box-shadow .2s;
}
.foot-bot:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.foot-bot .mascot-orb{ width:48px; height:48px; }
.foot-bot__t{ font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; }
.foot-bot__s{ font-size:12.5px; color:rgba(255,255,255,.85); margin-top:2px; }