/* ================================================
   MEX Global Markets - Stylesheet
   Modern dark theme with gold accents
   RTL Arabic, fully responsive
   ================================================ */

/* ============== INTRO OVERLAY (Logo Reveal) ============== */
.intro-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:radial-gradient(ellipse at center,#0a1024 0%,#040813 60%,#020407 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  animation:introFadeOut 0.6s cubic-bezier(0.7,0,0.84,0) 2.1s forwards;
}
body.intro-done .intro-overlay{display:none}
body.intro-loading{overflow:hidden;height:100vh}

.intro-bg{position:absolute;inset:0;pointer-events:none}
.intro-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0;
  animation:introOrbIn 1s ease forwards;
}
.intro-orb--gold{
  top:15%;left:20%;
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(34,211,238,0.6),transparent 70%);
  animation-delay:0s;
}
.intro-orb--blue{
  bottom:15%;right:20%;
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(42,74,138,0.55),transparent 70%);
  animation-delay:0.15s;
}
@keyframes introOrbIn{to{opacity:0.65}}

.intro-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(34,211,238,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,0.06) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000 30%,transparent 80%);
  opacity:0;
  animation:introOrbIn 1.2s ease 0.2s forwards;
}

.intro-particles{position:absolute;inset:0;pointer-events:none}
.intro-particle{
  position:absolute;
  width:3px;height:3px;
  background:#22D3EE;
  border-radius:50%;
  box-shadow:0 0 12px rgba(34,211,238,0.8);
  opacity:0;
  animation:introParticleRise 2.4s ease-out infinite;
}
@keyframes introParticleRise{
  0%{transform:translateY(60px) scale(0);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(-280px) scale(1);opacity:0}
}

.intro-stage{
  position:relative;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:54px 78px;
  animation:introStageOut 0.5s cubic-bezier(0.7,0,0.84,0) 2.05s forwards;
}
@keyframes introStageOut{
  to{transform:scale(1.18);opacity:0;filter:blur(14px)}
}

/* Frame corners */
.intro-corner{
  position:absolute;
  width:32px;height:32px;
  border:2px solid rgba(34,211,238,0.75);
  opacity:0;
  animation:introCornerIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.85s forwards;
}
.intro-corner--tl{top:0;left:0;border-right:0;border-bottom:0}
.intro-corner--tr{top:0;right:0;border-left:0;border-bottom:0}
.intro-corner--bl{bottom:0;left:0;border-right:0;border-top:0}
.intro-corner--br{bottom:0;right:0;border-left:0;border-top:0}
@keyframes introCornerIn{
  from{opacity:0;transform:scale(0.4) translate(var(--tx,0),var(--ty,0))}
  to{opacity:1;transform:scale(1) translate(0,0)}
}
.intro-corner--tl{--tx:-10px;--ty:-10px}
.intro-corner--tr{--tx:10px;--ty:-10px}
.intro-corner--bl{--tx:-10px;--ty:10px}
.intro-corner--br{--tx:10px;--ty:10px}

/* Gold sweep line */
.intro-line{
  position:absolute;
  top:50%;left:50%;
  width:340px;height:2px;
  background:linear-gradient(90deg,transparent,#22D3EE 50%,transparent);
  box-shadow:0 0 20px rgba(34,211,238,0.9);
  transform:translate(-50%,-50%) scaleX(0);
  transform-origin:center;
  animation:introLineDraw 0.55s cubic-bezier(0.65,0,0.35,1) 0.15s forwards,introLineFade 0.4s ease 0.85s forwards;
}
@keyframes introLineDraw{to{transform:translate(-50%,-50%) scaleX(1)}}
@keyframes introLineFade{to{opacity:0}}

/* Logo image */
.intro-logo{
  position:relative;
  margin-bottom:32px;
  filter:drop-shadow(0 18px 50px rgba(34,211,238,0.5));
  opacity:0;
  animation:introLogoIn 0.75s cubic-bezier(0.34,1.4,0.5,1) 0.55s forwards;
}
@keyframes introLogoIn{
  from{opacity:0;transform:translateY(-8px) scale(0.9);clip-path:inset(50% 0 50% 0)}
  to{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)}
}
.intro-logo__img{
  height:96px;
  width:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.intro-logo__shine{
  position:absolute;
  top:-15%;left:-50%;
  width:55%;height:130%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.55) 50%,transparent 70%);
  transform:skewX(-18deg);
  pointer-events:none;
  opacity:0;
  animation:introShine 1.1s ease 0.95s forwards;
  mix-blend-mode:overlay;
}
@keyframes introShine{
  0%{left:-50%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{left:130%;opacity:0}
}

/* Tagline */
.intro-tagline{
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:700;letter-spacing:5px;
  color:rgba(34,211,238,0.85);
  text-transform:uppercase;
  font-family:'Cairo',sans-serif;
  margin-bottom:26px;
  opacity:0;
  animation:introUpFade 0.55s ease 1.05s forwards;
}
.intro-tagline__line{
  width:36px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,0.6),transparent);
}
.intro-tagline__dot{color:rgba(34,211,238,0.5);font-size:14px;letter-spacing:0}
@keyframes introUpFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Loader bar */
.intro-loader{
  width:240px;
  height:2px;
  background:rgba(34,211,238,0.12);
  border-radius:99px;
  overflow:hidden;
  position:relative;
  opacity:0;
  animation:introUpFade 0.4s ease 1.15s forwards;
}
.intro-loader__bar{
  position:absolute;
  top:0;left:0;
  height:100%;width:0;
  background:linear-gradient(90deg,#0F7FE0,#22D3EE,#0EA5E9);
  border-radius:99px;
  box-shadow:0 0 12px rgba(34,211,238,0.7);
  animation:introLoaderFill 0.85s cubic-bezier(0.4,0,0.2,1) 1.2s forwards;
}
@keyframes introLoaderFill{to{width:100%}}

@keyframes introFadeOut{
  to{opacity:0;visibility:hidden;pointer-events:none}
}

/* Mobile intro */
@media (max-width:600px){
  .intro-stage{padding:38px 50px}
  .intro-logo__img{height:62px}
  .intro-line{width:240px}
  .intro-tagline{font-size:9.5px;letter-spacing:3.5px;gap:10px;margin-bottom:22px}
  .intro-tagline__line{width:24px}
  .intro-tagline__dot{font-size:12px}
  .intro-loader{width:180px}
  .intro-corner{width:24px;height:24px}
  .intro-orb{width:380px;height:380px}
}

/* Reduced motion - skip intro animations */
@media (prefers-reduced-motion:reduce){
  .intro-overlay{animation:introFadeOut 0.3s ease 0.6s forwards}
  .intro-stage{animation:none}
  .intro-logo,.intro-tagline,.intro-loader,.intro-corner,.intro-line,.intro-orb,.intro-grid{
    animation:none !important;
    opacity:1;
    clip-path:none;
    transform:none;
  }
  .intro-logo__shine{display:none}
  .intro-loader__bar{width:100%}
}

/* ---------- RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;overflow-x:clip;width:100%;max-width:100%}
body{
  font-family:'Tajawal','Cairo',system-ui,-apple-system,sans-serif;
  font-weight:400;
  background:#040813;
  color:#cfd5e6;
  line-height:1.6;
  overflow-x:clip;
  width:100%;
  max-width:100%;
  direction:rtl;
}

/* I18N — language-aware direction & fonts */
html[dir="ltr"] body,
html[lang="en"] body,
html[lang="ru"] body,
html[lang="tr"] body,
html[lang="es"] body,
html[lang="fr"] body,
html[lang="zh"] body{
  direction: ltr;
}
html[lang="en"] body,
html[lang="tr"] body,
html[lang="es"] body,
html[lang="fr"] body{
  font-family: 'Inter','Segoe UI','Helvetica Neue',system-ui,-apple-system,Arial,sans-serif;
}
html[lang="ru"] body{
  font-family: 'Inter','Roboto','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
html[lang="zh"] body{
  font-family: 'Inter','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
}
/* Force LTR alignment when html dir is ltr */
html[dir="ltr"] .container,
html[dir="ltr"] .top-bar__inner{
  text-align: start;
}
a{color:inherit;text-decoration:none;transition:color .2s ease}
img,svg{max-width:100%;display:block}
button{border:0;background:transparent;cursor:pointer;font-family:inherit;color:inherit}
ul{list-style:none}

:root{
  /* ---- Brand tokens (aligned with frontend/src/styles/system.css) ----
     Logo (auth/assets/logo-mex.png) = white wordmark + blue (#0070d0) / teal
     (#00c0c0) mark. There is NO gold in the brand; `--gold` below is a
     legacy alias kept only so older selectors keep resolving. Use the
     semantic names in new code. See docs/brand-guidelines.md. */
  --brand-blue:#0F7FE0;
  --brand-cyan:#22D3EE;
  --accent:#4f7cff;                 /* app accent (system.css --accent) */
  --accent-rgb:79,124,255;
  --accent-bg:rgba(79,124,255,.12);
  --accent-line:rgba(79,124,255,.35);
  --cyan:var(--brand-cyan);
  --accent-cyan:var(--brand-cyan);

  /* surfaces / borders / text (same scale as the app shell) */
  --s0:#070a12; --s1:#0b1020; --s2:#111729; --s3:#161e33; --s4:#1b2440;
  --b1:rgba(160,180,220,.10); --b2:rgba(160,180,220,.18); --b3:rgba(160,180,220,.28);
  --t1:#e8eef9; --t2:#a7b3c9; --t3:#6e7a93;

  /* semantic (app: --up / --down / --warn / --info) */
  --up:#1fbf75;   --up-bg:rgba(31,191,117,.12);
  --down:#f04a5a; --down-bg:rgba(240,74,90,.12);
  --warn:#e7a93a; --warn-bg:rgba(231,169,58,.12);
  --info:#59a7ff;

  /* radius / shadow / motion scale (app) */
  --r1:4px; --r2:6px; --r3:8px; --r4:12px;
  --sh-pop:0 8px 24px -8px rgba(0,0,0,.55), 0 0 0 1px var(--b2);
  --sh-modal:0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px var(--b2);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:140ms;

  /* ---- Marketing-site legacy tokens (values unchanged) ---- */
  --bg:#040813;
  --bg-2:#0a1024;
  --bg-3:#0f1730;
  --surface:#0d1428;
  --line:#1b2545;
  --text:#cfd5e6;
  --text-dim:#8a93ad;
  --text-bright:#ffffff;
  --gold:var(--brand-cyan);         /* DEPRECATED alias: it is cyan, not gold */
  --gold-2:#0EA5E9;
  --gold-3:var(--brand-blue);
  --green:var(--up);
  --red:var(--down);
  --container:1320px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-glow:0 10px 40px -10px rgba(34,211,238,.35);
  --shadow-card:0 18px 50px -20px rgba(0,0,0,.6);
}

/* Global motion opt-out for the marketing/auth pages (the app has the same
   rule in system.css). Individual reduced-motion blocks below stay as-is. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- LAYOUT ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

.section{padding:110px 0;position:relative}
.section-head{max-width:780px;margin:0 0 60px}
.section-head--center{margin:0 auto 60px;text-align:center}
.section-head .eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
  padding:6px 14px;
  border:1px solid rgba(34,211,238,.35);
  border-radius:99px;
  margin-bottom:18px;
  background:rgba(34,211,238,.06);
}
.section-head h2{
  font-family:'Cairo',sans-serif;
  font-size:clamp(28px,4vw,46px);
  font-weight:800;
  color:var(--text-bright);
  line-height:1.2;
  margin-bottom:14px;
  letter-spacing:-.5px;
}
.section-head p{font-size:17px;color:var(--text-dim);max-width:680px}
.gold{
  background:linear-gradient(135deg,#22D3EE 0%,#0EA5E9 50%,#0F7FE0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  padding:11px 22px;
  border-radius:10px;
  cursor:pointer;
  transition:all .25s ease;
  border:1.5px solid transparent;
  white-space:nowrap;
  font-family:inherit;
}
.btn--primary{
  background:var(--brand-blue);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.btn--primary:hover{
  background:#1a8cf0;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.btn--primary:focus-visible,.btn--outline:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn--outline{
  background:transparent;
  color:#fff;
  border-color:rgba(34,211,238,.55);
}
.btn--outline:hover{
  background:rgba(34,211,238,.1);
  border-color:var(--gold);
}
.btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.18);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.4);
}
.btn--lg{padding:15px 30px;font-size:15px}
.btn--block{width:100%}

/* ---------- TOP BAR ---------- */
.top-bar{
  background:linear-gradient(90deg,#0a1024 0%,#0f1730 50%,#0a1024 100%);
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--text-dim);
  padding:9px 0;
  position:relative;
  z-index:60;
}
.top-bar__inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.top-bar__left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top-bar__right{display:flex;align-items:center;gap:18px}
.top-bar__sep{color:#2c3656}
.top-bar__link:hover{color:var(--gold)}
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--line);border-radius:6px;
  font-weight:600;
}
.lang-switch:hover{border-color:var(--gold);color:var(--gold)}

.badge-live{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--green);font-weight:700;font-size:12px;
  padding:3px 10px;background:rgba(34,201,147,.12);border-radius:99px;
}
.badge-live .dot{
  width:7px;height:7px;background:var(--green);border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,201,147,.7);
  animation:pulseDot 1.6s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(34,201,147,.7)}
  70%{box-shadow:0 0 0 10px rgba(34,201,147,0)}
  100%{box-shadow:0 0 0 0 rgba(34,201,147,0)}
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(4,8,19,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s ease, padding .3s ease;
}
.site-header.scrolled{background:rgba(4,8,19,.96)}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;gap:24px;
}
.logo{
  display:inline-flex;align-items:center;flex-shrink:0;
  text-decoration:none;
  position:relative;
  padding:4px 0;
  transition:transform .25s ease, filter .25s ease;
}
.logo:hover{transform:translateY(-1px)}
.logo__img{
  display:block;
  height:46px;width:auto;
  object-fit:contain;
  max-width:100%;
  transition:filter .3s ease;
  filter:drop-shadow(0 2px 8px rgba(34,211,238,0.18));
}
.logo:hover .logo__img{
  filter:drop-shadow(0 2px 14px rgba(34,211,238,0.35));
}

.main-nav{flex:1;display:flex;justify-content:center}
.main-nav>ul{display:flex;align-items:center;gap:2px}
.main-nav li{position:relative}
.main-nav a{
  display:inline-flex;align-items:center;gap:4px;
  padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:#cfd5e6;
  letter-spacing:.1px;
  white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.main-nav a:hover{color:var(--gold);background:rgba(34,211,238,.06)}
.caret{font-size:9px;opacity:.55;margin-inline-start:2px;transition:transform .2s ease}
.has-mega:hover > a .caret{transform:rotate(180deg);opacity:.9}
/* Hide drawer-only elements on desktop (they're injected by JS for the mobile drawer) */
.mnav-head,
.mnav-foot,
.main-nav > ul > li > a > .mnav-ico{display:none}

.mega{
  position:absolute;top:calc(100% + 6px);right:0;
  background:linear-gradient(180deg, #0d1428 0%, #0a1020 100%);
  border:1px solid rgba(212,168,83,.18);
  border-radius:12px;
  padding:18px;min-width:460px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  box-shadow: 0 24px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(34,211,238,.04);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index:55;
}
.mega::before{
  content:"";
  position:absolute; top:-5px; right:32px;
  width:10px; height:10px;
  background: inherit;
  border-left:1px solid rgba(212,168,83,.18);
  border-top:1px solid rgba(212,168,83,.18);
  transform: rotate(45deg);
}
.mega--3{grid-template-columns:repeat(3,1fr);min-width:600px}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__col h5{
  font-size:10px;font-weight:800;letter-spacing:2px;
  color:var(--gold);text-transform:uppercase;
  margin: 0 0 10px;padding: 0 0 8px;
  border-bottom:1px solid rgba(212,168,83,.12);
  opacity: .85;
}
.mega__col a{
  display:block;padding:7px 8px;font-size:12.5px;
  color:#cfd5e6;font-weight:500;
  border-radius:6px;
  transition: color .18s ease, background .18s ease, padding .18s ease;
}
.mega__col a:hover{
  color:var(--gold);
  background:rgba(34,211,238,.05);
  padding-right:14px;
}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  width:36px;height:36px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;
}
.hamburger span{width:18px;height:2px;background:#fff;transition:all .25s}

/* ============== HERO - QUANTUM TRADE VISION ============== */
.hero{
  position:relative;
  min-height:600px;
  height:calc(100svh - 78px - 38px);
  max-height:860px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 80% 0%,rgba(34,211,238,0.10) 0%,transparent 50%),
    radial-gradient(ellipse at 20% 100%,rgba(28,40,80,0.4) 0%,transparent 60%),
    linear-gradient(180deg,#060914 0%,#040813 50%,#02050d 100%);
}
/* Seamless colour hand-off into the ticker section below (no visible seam) */
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:90px;
  z-index:8;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(7,11,28,0.35) 55%,rgba(7,11,28,0.85) 100%);
}

.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* Animated dot grid */
.hero-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(34,211,238,0.10) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 30%,transparent 80%);
  animation:gridDrift 90s linear infinite;
}
@keyframes gridDrift{
  from{background-position:0 0}
  to{background-position:40px 40px}
}

/* Glowing orbs */
.hero-orb{
  position:absolute;
  width:700px;height:700px;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.22;
  pointer-events:none;
}
.hero-orb--gold{
  top:-150px;right:-200px;
  background:radial-gradient(circle,#22D3EE 0%,rgba(34,211,238,0.4) 40%,transparent 70%);
  animation:orbDrift 22s ease-in-out infinite;
}
.hero-orb--blue{
  bottom:-200px;left:-200px;
  background:radial-gradient(circle,#2a4a8a 0%,rgba(42,74,138,0.4) 40%,transparent 70%);
  animation:orbDrift 28s ease-in-out infinite reverse;
}
@keyframes orbDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,30px) scale(0.95)}
}

/* Particles */
.hero-particles{position:absolute;inset:0;overflow:hidden}
.hero-particle{
  position:absolute;
  width:2px;height:2px;
  background:rgba(34,211,238,0.7);
  border-radius:50%;
  box-shadow:0 0 8px rgba(34,211,238,0.6);
  animation:particleRise linear infinite;
}
@keyframes particleRise{
  0%{transform:translateY(110vh) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-10vh) translateX(40px);opacity:0}
}

/* Subtle scanlines */
.hero-scanline{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 49%,rgba(34,211,238,0.025) 50%,transparent 51%,transparent 100%);
  background-size:100% 4px;
  pointer-events:none;
  opacity:0.4;
}


/* Layout */
.hero-wrap{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
  height:100%;
  padding-top:50px;
  padding-bottom:40px;
}

/* slideIn animation */
@keyframes slideIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* ----- LEFT side ----- */
.hero-left{position:relative;z-index:5}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;color:#fff;
  padding:8px 16px;
  background:rgba(34,211,238,0.06);
  border:1px solid rgba(34,211,238,0.3);
  border-radius:99px;
  margin-bottom:24px;
  animation:slideIn 1s 0.1s both;
}
.pulse-dot{
  width:8px;height:8px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,211,238,0.7);
  animation:pulseDot 1.8s infinite;
}
.hero-title{
  font-family:'Cairo',sans-serif;
  font-size:clamp(34px,4.6vw,58px);
  font-weight:900;
  line-height:1.12;
  color:#fff;
  letter-spacing:-1px;
  margin-bottom:22px;
  animation:slideIn 1s 0.3s both;
}
.title-grad{
  position:relative;
  display:inline-block;
  background:linear-gradient(135deg,#22D3EE 0%,#0EA5E9 50%,#0F7FE0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.title-grad::after{
  content:"";
  position:absolute;
  bottom:8px;left:0;right:0;
  height:8px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,0.4),transparent);
  z-index:-1;
  filter:blur(8px);
}
.hero-sub{
  font-size:clamp(15px,1.4vw,17px);
  color:#a8b0c8;
  max-width:540px;
  line-height:1.7;
  margin-bottom:34px;
  animation:slideIn 1s 0.5s both;
}
.hero-sub b{color:var(--gold);font-weight:700}
.hero-cta{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-bottom:42px;
  animation:slideIn 1s 0.7s both;
}
.hero-mini-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:22px;
  animation:slideIn 1s 0.9s both;
}
.mstat{display:flex;flex-direction:column;align-items:flex-start}
.mstat strong{
  font-family:'Cairo',sans-serif;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:800;
  color:#fff;
  line-height:1;
}
.mstat strong i{
  font-style:normal;
  color:var(--gold);
  font-size:0.7em;
  margin-right:1px;
  vertical-align:baseline;
}
.mstat em{
  font-style:normal;
  font-size:11.5px;
  color:#7a8299;
  margin-top:6px;
}
.hero-trust-mini{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;
  font-size:11.5px;color:#7a8299;
  animation:slideIn 1s 1.1s both;
}
.hero-trust-mini__lbl{letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-left:4px}
.hero-trust-mini em{
  font-style:normal;font-weight:800;
  color:#cfd5e6;letter-spacing:1.5px;
  padding:3px 9px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:5px;
  font-size:10.5px;
}
/* Regulator badges: tiny logo + abbreviation underneath */
.hero-trust-mini .treg{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:0;
  background:transparent;
  border:none;
}
.hero-trust-mini .treg-mark{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  flex-shrink:0;
  transition:transform .25s ease, border-color .25s ease;
}
.hero-trust-mini .treg-mark svg{
  display:block;
  width:18px;
  height:18px;
  border-radius:3px;
}
.hero-trust-mini .treg:hover .treg-mark{
  transform:translateY(-1px);
  border-color:rgba(197,165,114,0.45);
}
.hero-trust-mini .treg em{
  font-style:normal;
  font-weight:800;
  color:#cfd5e6;
  letter-spacing:1px;
  font-size:9px;
  line-height:1;
  padding:0;
  background:none;
  border:none;
  border-radius:0;
}

/* ============== HERO RIGHT - QUANTUM TRADE VISION ============== */
.hero-right{
  position:relative;
  min-height:520px;
  z-index:5;
  animation:slideIn 1.2s 0.3s both;
}
.ptt--desktop{display:block}
.ptt--mobile{display:none}

/* ===================================================
   DESKTOP: PRO TRADING TERMINAL (Interactive)
=================================================== */
.ptt--desktop{
  position:relative;
  width:100%;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(34,211,238,0.05) 0%, transparent 60%),
    linear-gradient(165deg, rgba(15,22,46,0.96) 0%, rgba(8,12,28,0.94) 100%);
  border:1px solid rgba(34,211,238,0.22);
  border-radius:18px;
  padding:14px;
  box-shadow:
    0 60px 140px -50px rgba(0,0,0,0.9),
    0 0 0 1px rgba(34,211,238,0.06),
    inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  transform:perspective(2000px) rotateY(-1.5deg) rotateX(0.8deg);
  transform-origin:center center;
  transition:transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.qtv--desktop:hover{
  transform:perspective(2000px) rotateY(-0.5deg) rotateX(0.2deg);
}
.ptt--desktop::before{
  content:"";
  position:absolute;
  top:-2px;left:-2px;right:-2px;bottom:-2px;
  background:linear-gradient(135deg,rgba(34,211,238,0.4),transparent 35%,transparent 65%,rgba(34,211,238,0.22));
  border-radius:20px;
  z-index:-1;
  opacity:0.55;
  filter:blur(3px);
  animation:glowSweep 5s ease-in-out infinite;
}
@keyframes glowSweep{
  0%,100%{opacity:0.45}
  50%{opacity:0.85}
}

/* Aura ring orbits */
.ptt-aura{
  position:absolute;
  inset:-12px;
  pointer-events:none;
  z-index:-2;
}
.ptt-ring{
  position:absolute;
  inset:0;
  border:1px solid rgba(34,211,238,0.16);
  border-radius:22px;
  animation:ringPulse 6s ease-in-out infinite;
}
.ptt-ring--2{inset:8px;border-color:rgba(34,211,238,0.10);animation-delay:-1.2s}
@keyframes ringPulse{
  0%,100%{opacity:0.3;transform:scale(1)}
  50%{opacity:0.7;transform:scale(1.015)}
}
.ptt-orbit{
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:conic-gradient(from 0deg,transparent 80%,rgba(34,211,238,0.45) 92%,transparent 100%);
  filter:blur(3px);
  opacity:0.5;
  animation:orbitSpin 9s linear infinite;
}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

/* Top bar: brand + status */
.ptt-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 4px 10px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  margin-bottom:10px;
  position:relative;z-index:3;
  gap:10px;
  flex-wrap:wrap;
}
.ptt-brand{
  display:inline-flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.ptt-logo{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#22D3EE,#0EA5E9);
  color:#0a0a0a;border-radius:7px;
  box-shadow:0 4px 12px -2px rgba(34,211,238,0.45);
}
.ptt-brand strong{
  font-family:'Cairo',sans-serif;
  font-size:13px;font-weight:800;
  color:#fff;letter-spacing:0.2px;
}
.ptt-ver{
  font-style:normal;font-size:9px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-weight:700;letter-spacing:0.5px;
  padding:2px 6px;border-radius:99px;
  background:rgba(34,211,238,0.12);
  color:#22D3EE;
}
.ptt-status{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:9.5px;color:#7a8299;
  letter-spacing:0.3px;
}
.ptts{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ptts b{color:#cfd5e6;font-weight:700}
.ptts--live{
  color:#22c993;
  font-weight:800;letter-spacing:0.6px;
}
.ptts--live i{
  width:6px;height:6px;border-radius:50%;
  background:#22c993;
  box-shadow:0 0 8px #22c993;
  animation:pulseDot 1.6s infinite;
}

/* Asset switcher (interactive cards) */
.ptt-assets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-bottom:10px;
  position:relative;
  z-index:2;
}
.ptt-asset{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:3px 7px;
  padding:7px 8px 6px;
  background:rgba(13,20,40,0.55);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:9px;
  cursor:pointer;
  transition:all 0.22s ease;
  font-family:inherit;
  text-align:right;
  min-width:0;
  overflow:hidden;
}
.ptt-asset:hover{
  background:rgba(34,211,238,0.05);
  border-color:rgba(34,211,238,0.22);
  transform:translateY(-1px);
}
.ptt-asset.is-active{
  background:linear-gradient(135deg,rgba(34,211,238,0.16),rgba(34,211,238,0.04));
  border-color:rgba(34,211,238,0.45);
  box-shadow:0 0 22px -6px rgba(34,211,238,0.5),inset 0 1px 0 rgba(34,211,238,0.18);
}
.ptt-asset.is-active::before{
  content:"";
  position:absolute;
  top:0;left:8px;right:8px;height:2px;
  background:linear-gradient(90deg,transparent,#22D3EE,transparent);
  border-radius:0 0 4px 4px;
}
.pa-icon{
  grid-row:1 / span 2;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(34,211,238,0.22),rgba(34,211,238,0.06));
  color:#22D3EE;
  border:1px solid rgba(34,211,238,0.25);
  border-radius:7px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:9.5px;font-weight:800;
  letter-spacing:0.3px;
  flex-shrink:0;
}
.pa-info{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pa-name{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;font-weight:700;
  color:#fff;letter-spacing:0.3px;
  white-space:nowrap;
}
.pa-sub{
  font-size:8.5px;color:#5a6390;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.pa-meta{
  display:flex;flex-direction:column;
  align-items:flex-end;line-height:1.1;
  grid-column:3;grid-row:1;
}
.pa-meta b{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10.5px;color:#fff;font-weight:800;
}
.pa-meta i{
  font-style:normal;font-size:9px;font-weight:700;
  margin-top:1px;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.pa-chg.up{color:#22c993}
.pa-chg.dn{color:#ff5b6b}
.pa-spark{
  grid-column:2 / span 2;grid-row:2;
  width:100%;height:14px;display:block;
  margin-top:1px;
}
.pas-line{fill:none;stroke-width:1.5}
.pas-line.up{stroke:#22c993;filter:drop-shadow(0 0 3px rgba(34,201,147,0.5))}
.pas-line.dn{stroke:#ff5b6b;filter:drop-shadow(0 0 3px rgba(255,91,107,0.5))}

/* Floating AI signal */
.ptt-signal{
  position:absolute;
  top:60px;right:18px;
  z-index:10;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;
  background:linear-gradient(135deg,rgba(34,201,147,0.22),rgba(34,201,147,0.06));
  border:1px solid rgba(34,201,147,0.45);
  border-radius:99px;
  box-shadow:0 8px 22px -6px rgba(34,201,147,0.45),inset 0 1px 0 rgba(255,255,255,0.08);
  animation:signalFloat 4s ease-in-out infinite;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  pointer-events:none;
}
@keyframes signalFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.psg-pulse{
  position:absolute;inset:-2px;
  border-radius:99px;
  border:1.5px solid #22c993;
  animation:signalPulseRing 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes signalPulseRing{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.3)}
}
.psg-icon{
  width:18px;height:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#22c993;color:#0a0a0a;
  border-radius:50%;
}
.psg-body{display:flex;flex-direction:column;line-height:1.1}
.psg-body em{
  font-style:normal;font-size:8.5px;
  letter-spacing:1px;
  color:rgba(34,201,147,0.95);font-weight:800;
  text-transform:uppercase;
}
.psg-body strong{
  font-size:10.5px;color:#fff;font-weight:800;
  margin-top:1px;
}

/* Stage: chart + flow */
.ptt-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 168px;
  gap:10px;
  z-index:2;
}

/* Chart card */
.ptt-chart{
  background:linear-gradient(180deg,rgba(8,12,28,0.6),rgba(13,20,40,0.5));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  overflow:hidden;
  display:flex;flex-direction:column;
  min-width:0;
}
.pc-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 11px 7px;
  background:linear-gradient(180deg,rgba(20,28,56,0.55),rgba(13,20,40,0.4));
  border-bottom:1px solid rgba(255,255,255,0.04);
  gap:10px;
  flex-wrap:nowrap;
  min-height:34px;
}
.pc-symbol{
  display:inline-flex;align-items:center;gap:6px;
  flex-shrink:0;
}
.pc-symbol strong{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:12.5px;color:#fff;font-weight:800;letter-spacing:0.4px;
}
.pc-symbol em{
  font-style:normal;font-size:10px;
  color:#7a8299;letter-spacing:0.3px;
  padding:1px 5px;
  background:rgba(34,211,238,0.1);
  color:#22D3EE;font-weight:700;
  border-radius:3px;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.pc-live{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9px;color:#22c993;font-weight:700;
  letter-spacing:0.3px;
}
.pc-live i{
  width:5px;height:5px;border-radius:50%;
  background:#22c993;
  box-shadow:0 0 6px #22c993;
  animation:pulseDot 1.6s infinite;
}
.pc-ohlc{
  display:flex;gap:9px;align-items:center;
  font-family:'JetBrains Mono','SF Mono',monospace;
  flex:1;justify-content:flex-end;
  overflow:hidden;
}
.pc-ohlc span{font-size:9.5px;color:#5a6390;letter-spacing:0.3px;white-space:nowrap}
.pc-ohlc b{color:#cfd5e6;font-weight:700;margin-right:2px;font-size:10px}
.pc-ohlc b.up{color:#22c993}
.pc-ohlc b.dn{color:#ff5b6b}

/* Toolbar */
.pc-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 9px;
  background:rgba(8,12,28,0.45);
  border-bottom:1px solid rgba(255,255,255,0.03);
  gap:8px;
  flex-wrap:nowrap;
}
.pc-types,.pc-tfs,.pc-actions{
  display:inline-flex;gap:1px;
  background:rgba(13,20,40,0.65);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:6px;
  padding:2px;
}
.pct,.pctf,.pca{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:9.5px;font-weight:700;
  padding:4px 7px;border-radius:4px;
  color:#7a8299;
  background:transparent;
  cursor:pointer;
  transition:all 0.15s;
  border:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:22px;
}
.pct svg,.pca svg{display:block}
.pct:hover,.pctf:hover,.pca:hover{color:#cfd5e6;background:rgba(255,255,255,0.04)}
.pct.is-active,.pctf.is-active{
  background:linear-gradient(135deg,rgba(34,211,238,0.18),rgba(34,211,238,0.08));
  color:#22D3EE;
  box-shadow:inset 0 1px 0 rgba(34,211,238,0.18);
}
.pca[aria-pressed="false"] .pca-pause{display:none}
.pca[aria-pressed="false"] .pca-play{display:block !important}

/* Canvas */
.pc-canvas{
  position:relative;
  height:230px;
  flex:1;
  overflow:hidden;
  cursor:crosshair;
}
.pc-canvas svg#pcChart{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.pc-volume{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:32px;
  pointer-events:none;
  opacity:0.45;
  z-index:1;
}
.pc-axis-y{
  position:absolute;right:5px;top:0;
  height:calc(100% - 32px);
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:5px 0;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:8.5px;color:#5a6390;
  pointer-events:none;
  z-index:2;
}
.pc-axis-y span{
  background:rgba(8,12,28,0.7);
  padding:1px 5px;border-radius:2px;
  letter-spacing:0.3px;
}
.pc-price-tag{
  position:absolute;
  background:#22D3EE;
  color:#0a0a0a;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10.5px;font-weight:800;
  padding:2px 7px;
  border-radius:3px;
  right:6px;
  transform:translateY(-50%);
  z-index:3;
  box-shadow:0 4px 12px -2px rgba(34,211,238,0.6);
  pointer-events:none;
  letter-spacing:0.3px;
}
.pc-price-tag::before{
  content:"";
  position:absolute;
  left:-5px;top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-right-color:#22D3EE;
}

/* Crosshair price tag (follows cursor) */
.pc-cross-tag{
  position:absolute;
  background:#0d1428;
  color:#cfd5e6;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;font-weight:700;
  padding:2px 7px;
  border-radius:3px;
  border:1px solid rgba(34,211,238,0.4);
  right:6px;
  transform:translateY(-50%);
  z-index:4;
  pointer-events:none;
  display:none;
  letter-spacing:0.3px;
}
.pc-cross-tag.is-show{display:block}
.pc-cross-tag::before{
  content:"";
  position:absolute;
  left:-5px;top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-right-color:rgba(34,211,238,0.4);
}

/* Tooltip */
.pc-tooltip{
  position:absolute;
  background:rgba(8,12,28,0.96);
  border:1px solid rgba(34,211,238,0.3);
  border-radius:7px;
  padding:7px 9px;
  z-index:5;
  min-width:118px;
  pointer-events:none;
  display:none;
  box-shadow:0 12px 28px -8px rgba(0,0,0,0.7);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.pc-tooltip.is-show{display:block}
.pct-time{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:9px;font-weight:700;
  color:#22D3EE;letter-spacing:0.3px;
  padding-bottom:4px;margin-bottom:4px;
  border-bottom:1px solid rgba(34,211,238,0.15);
}
.pct-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:1px 0;
}
.pct-row span{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:8.5px;color:#5a6390;
  letter-spacing:0.4px;
}
.pct-row b{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;font-weight:700;color:#cfd5e6;
}
.pct-row b.up{color:#22c993}
.pct-row b.dn{color:#ff5b6b}

/* Hint overlay */
.pc-hint{
  position:absolute;
  bottom:8px;left:50%;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;
  background:rgba(13,20,40,0.85);
  border:1px solid rgba(34,211,238,0.18);
  border-radius:99px;
  font-size:9.5px;font-weight:700;
  color:#7a8299;letter-spacing:0.3px;
  pointer-events:none;
  z-index:3;
  animation:hintPulse 2.5s ease-in-out infinite;
}
.pc-hint svg{color:#22D3EE;flex-shrink:0}
.pc-hint.is-hidden{display:none}
@keyframes hintPulse{
  0%,100%{opacity:0.7}
  50%{opacity:1}
}

/* Crosshair */
.pc-crosshair{pointer-events:none}
.pc-ch-line{
  stroke:rgba(34,211,238,0.55);
  stroke-width:1;
  stroke-dasharray:4 4;
  shape-rendering:crispEdges;
}

/* Candles */
.pc-candle-up rect{fill:#22c993;filter:drop-shadow(0 0 2px rgba(34,201,147,0.45))}
.pc-candle-up line{stroke:#22c993;stroke-width:1.2}
.pc-candle-dn rect{fill:#ff5b6b;filter:drop-shadow(0 0 2px rgba(255,91,107,0.45))}
.pc-candle-dn line{stroke:#ff5b6b;stroke-width:1.2}
.pc-candle-current{animation:candlePulse 1.4s ease-in-out infinite}
@keyframes candlePulse{
  0%,100%{opacity:1}
  50%{opacity:0.6}
}
.pc-area{opacity:0.85}
.pc-line{
  fill:none;
  stroke:url(#pcLineGrad);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.55));
}
.pc-ma{
  fill:none;
  stroke:url(#pcMaGrad);
  stroke-width:1.5;
  opacity:0.7;
  filter:drop-shadow(0 0 4px rgba(124,140,255,0.4));
  stroke-dasharray:4 2;
}
.pc-price-line{
  stroke:#22D3EE;
  stroke-width:1;
  stroke-dasharray:5 5;
  opacity:0.55;
}
.pc-last-dot{
  fill:#22D3EE;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.85));
}
.pc-last-pulse{
  fill:none;
  stroke:#22D3EE;
  stroke-width:1.5;
  opacity:0.8;
  animation:lastPulse 1.6s ease-out infinite;
  transform-origin:center;
}
@keyframes lastPulse{
  0%{opacity:0.85;r:4}
  100%{opacity:0;r:14}
}

/* Mode visibility */
.pc-mode-line .pc-candle-up,.pc-mode-line .pc-candle-dn,
.pc-mode-area .pc-candle-up,.pc-mode-area .pc-candle-dn{display:none}
.pc-mode-line .pc-area,.pc-mode-candles .pc-area,
.pc-mode-candles .pc-line{display:none}
.pc-mode-line .pc-line{display:block}
.pc-mode-area .pc-line{display:block;opacity:0.85}
.pc-mode-candles .pc-volume{opacity:0.45}
.pc-mode-line .pc-volume,.pc-mode-area .pc-volume{opacity:0.25}

/* Side: Order Flow */
.ptt-flow{
  background:linear-gradient(180deg,rgba(13,20,40,0.65),rgba(8,12,28,0.5));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:10px 0 6px;
  display:flex;flex-direction:column;
  overflow:hidden;
  min-width:0;
}
.pf-head{
  display:flex;align-items:center;gap:7px;
  padding:0 12px 8px;
  font-size:9.5px;font-weight:700;
  color:#cfd5e6;letter-spacing:1px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(34,211,238,0.1);
  margin-bottom:6px;
}
.pf-dot{
  width:6px;height:6px;
  background:#22c993;border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,201,147,0.7);
  animation:pulseDot 1.6s infinite;
  flex-shrink:0;
}
.pf-cnt{
  font-style:normal;
  margin-right:auto;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:8.5px;color:#7a8299;
  letter-spacing:0.5px;
}
.pf-list{
  display:flex;flex-direction:column;
  gap:1px;
  padding:0 4px;
  flex:1;
  overflow:hidden;
}
.pf-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:5px;
  align-items:center;
  padding:5px 9px;
  border-radius:5px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:9.5px;
  animation:flowRowIn 0.4s ease;
  position:relative;
  overflow:hidden;
}
@keyframes flowRowIn{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
.pf-row.buy{background:rgba(34,201,147,0.08)}
.pf-row.sell{background:rgba(255,91,107,0.08)}
.pfr-side{
  font-weight:800;font-size:8.5px;
  letter-spacing:0.5px;
  text-align:right;
}
.pf-row.buy .pfr-side{color:#22c993}
.pf-row.sell .pfr-side{color:#ff5b6b}
.pfr-vol{color:#cfd5e6;font-weight:700;font-size:9.5px}
.pfr-prc{color:#7a8299;font-size:9px;text-align:left;direction:ltr}

/* Bottom: Action bar */
.ptt-action{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.05);
  position:relative;
  z-index:2;
}
.pa-meta-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,auto));
  gap:5px;
  background:rgba(13,20,40,0.5);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:9px;
  padding:6px 8px;
}
.pmr-cell{
  text-align:center;
  display:flex;flex-direction:column;
  gap:1px;
  padding:0 6px;
  position:relative;
}
.pmr-cell + .pmr-cell::before{
  content:"";
  position:absolute;
  right:-3px;top:20%;bottom:20%;
  width:1px;background:rgba(255,255,255,0.06);
}
.pmr-cell em{
  font-style:normal;font-size:8.5px;
  color:#5a6390;letter-spacing:0.3px;
}
.pmr-cell strong{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:12px;color:#fff;font-weight:800;
}
.pmr-cell strong i{
  font-style:normal;color:#22D3EE;
  font-size:0.72em;font-weight:700;
}
.pa-trade-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.pa-tbtn{
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:9px;
  font-family:'Cairo',sans-serif;
  font-weight:800;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:all 0.25s ease;
  border:1px solid;
}
.pa-tbtn::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 100%,rgba(255,255,255,0.18),transparent 70%);
  opacity:0;
  transition:opacity 0.25s;
}
.pa-tbtn:hover::before{opacity:1}
.pa-tbtn--sell{
  background:linear-gradient(180deg,rgba(255,91,107,0.18),rgba(255,91,107,0.06));
  border-color:rgba(255,91,107,0.5);
  color:#ff5b6b;
}
.pa-tbtn--sell:hover{
  background:linear-gradient(180deg,rgba(255,91,107,0.28),rgba(255,91,107,0.1));
  box-shadow:0 8px 24px -8px rgba(255,91,107,0.5);
  transform:translateY(-1px);
}
.pa-tbtn--buy{
  background:linear-gradient(180deg,rgba(34,201,147,0.18),rgba(34,201,147,0.06));
  border-color:rgba(34,201,147,0.5);
  color:#22c993;
}
.pa-tbtn--buy:hover{
  background:linear-gradient(180deg,rgba(34,201,147,0.28),rgba(34,201,147,0.1));
  box-shadow:0 8px 24px -8px rgba(34,201,147,0.5);
  transform:translateY(-1px);
}
.pat-arrow{font-size:10px;opacity:0.7;line-height:1}
.pat-body{display:flex;flex-direction:column;line-height:1.15;text-align:center}
.pat-body em{
  font-style:normal;font-size:11px;
  font-weight:700;letter-spacing:0.3px;
}
.pat-body b{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:14px;font-weight:800;
}

/* ===================================================
   MOBILE: Compact Trade Card (different layout)
=================================================== */
.pmc{
  position:relative;
  background:linear-gradient(165deg,rgba(15,22,46,0.95) 0%,rgba(8,12,28,0.92) 100%);
  border:1px solid rgba(34,211,238,0.25);
  border-radius:16px;
  padding:14px 12px 12px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:hidden;
}
.pmc::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg,rgba(34,211,238,0.4),transparent 40%,transparent 60%,rgba(34,211,238,0.25));
  border-radius:18px;
  z-index:-1;
  filter:blur(2px);
  opacity:0.5;
  animation:glowSweep 5s ease-in-out infinite;
}

.pmc-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
  gap:8px;
}
.pmc-ai{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  background:linear-gradient(135deg,#22c993,#1ba978);
  border-radius:99px;
  color:#0a0a0a;
  font-size:10px;font-weight:800;
  letter-spacing:0.2px;
  box-shadow:0 6px 18px -4px rgba(34,201,147,0.6);
  font-family:inherit;
}
.pmc-ai-pulse{
  width:5px;height:5px;
  background:#0a0a0a;
  border-radius:50%;
  animation:miniPulse 1.4s infinite;
}
@keyframes miniPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.7);opacity:0.4}
}
.pmc-ver{
  font-family:'Cairo',sans-serif;
  font-size:10px;font-weight:800;
  color:#22D3EE;letter-spacing:0.5px;
  padding:3px 9px;
  background:rgba(34,211,238,0.1);
  border:1px solid rgba(34,211,238,0.22);
  border-radius:99px;
}

.pmc-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
  gap:10px;
}
.pmc-sym{
  display:flex;align-items:center;gap:9px;
  min-width:0;
  flex:1;
}
.pmc-icon{
  width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(34,211,238,0.22),rgba(34,211,238,0.06));
  border:1px solid rgba(34,211,238,0.3);
  border-radius:8px;
  color:#22D3EE;font-weight:800;font-size:11px;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.pmc-sym > div{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pmc-sym strong{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:14px;font-weight:800;color:#fff;
  letter-spacing:0.3px;
}
.pmc-sym em{
  font-style:normal;font-size:10px;
  color:#7a8299;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmc-price{text-align:left;flex-shrink:0}
.pmc-price strong{
  display:block;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:21px;font-weight:800;color:#fff;
  letter-spacing:-0.3px;
  line-height:1.05;
}
.pmc-chg{
  display:inline-block;
  font-size:10.5px;font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  font-family:'JetBrains Mono','SF Mono',monospace;
  margin-top:3px;
}
.pmc-chg.up{color:#22c993;background:rgba(34,201,147,0.14)}
.pmc-chg.dn{color:#ff5b6b;background:rgba(255,91,107,0.14)}

/* Asset chips */
.pmc-assets{
  display:flex;gap:5px;
  margin-bottom:9px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.pmc-assets::-webkit-scrollbar{display:none}
.pmc-chip{
  flex:1;
  min-width:0;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;font-weight:700;
  padding:6px 8px;border-radius:7px;
  border:1px solid rgba(255,255,255,0.05);
  background:rgba(13,20,40,0.55);
  color:#7a8299;
  cursor:pointer;
  transition:all 0.18s ease;
  letter-spacing:0.3px;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.pmc-chip:hover{color:#cfd5e6}
.pmc-chip.is-active{
  background:linear-gradient(135deg,rgba(34,211,238,0.18),rgba(34,211,238,0.06));
  border-color:rgba(34,211,238,0.4);
  color:#22D3EE;
  box-shadow:0 4px 12px -4px rgba(34,211,238,0.4);
}

/* Chart wrap */
.pmc-chart{
  position:relative;
  height:130px;
  margin-bottom:9px;
  padding:6px 4px;
  background:rgba(8,12,28,0.4);
  border-radius:10px;
  overflow:hidden;
  cursor:crosshair;
  touch-action:pan-y;
}
.pmc-chart svg{
  width:100%;height:100%;display:block;
  position:relative;z-index:1;
}
.pmc-line{
  fill:none;
  stroke:#22c993;
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(34,201,147,0.55));
  transition:stroke 0.3s ease;
}
.pmc-line.dn{
  stroke:#ff5b6b;
  filter:drop-shadow(0 0 6px rgba(255,91,107,0.55));
}
.pmc-dot{
  fill:#22D3EE;
  filter:drop-shadow(0 0 8px rgba(34,211,238,0.85));
}
.pmc-pulse{
  fill:none;
  stroke:#22D3EE;
  stroke-width:1.5;
  opacity:0.6;
  animation:lastPulse 1.6s ease-out infinite;
}
.pmc-cross-dot{
  fill:#22D3EE;
  stroke:#0a0a0a;
  stroke-width:1.5;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.8));
}
.pmc-ch{
  stroke:rgba(34,211,238,0.55);
  stroke-width:1;
  stroke-dasharray:3 3;
  shape-rendering:crispEdges;
}
.pmc-tag{
  position:absolute;
  top:8px;left:8px;
  background:#22D3EE;
  color:#0a0a0a;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10.5px;font-weight:800;
  padding:2px 7px;
  border-radius:4px;
  z-index:3;
  box-shadow:0 4px 10px -2px rgba(34,211,238,0.5);
  pointer-events:none;
}
.pmc-cross-tag{
  position:absolute;
  background:#0d1428;
  color:#22D3EE;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;font-weight:700;
  padding:3px 7px;
  border-radius:4px;
  border:1px solid rgba(34,211,238,0.4);
  z-index:4;
  pointer-events:none;
  display:none;
  letter-spacing:0.3px;
}
.pmc-cross-tag.is-show{display:block}

/* Timeframes */
.pmc-tfs{
  display:flex;gap:3px;
  background:rgba(13,20,40,0.6);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:7px;
  padding:2px;
  margin-bottom:9px;
}
.pmc-tf{
  flex:1;
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:10px;font-weight:700;
  padding:5px 0;
  border-radius:5px;
  color:#7a8299;
  background:transparent;
  cursor:pointer;
  border:0;
  transition:all 0.15s;
  letter-spacing:0.3px;
  -webkit-tap-highlight-color:transparent;
}
.pmc-tf.is-active{
  background:linear-gradient(135deg,rgba(34,211,238,0.18),rgba(34,211,238,0.06));
  color:#22D3EE;
}

/* Stats */
.pmc-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-bottom:9px;
}
.pmcs{
  text-align:center;
  padding:7px 4px;
  background:rgba(13,20,40,0.6);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:8px;
  min-width:0;
}
.pmcs em{
  font-style:normal;display:block;
  font-size:9.5px;color:#7a8299;
  margin-bottom:3px;letter-spacing:0.2px;
}
.pmcs strong{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:13px;font-weight:800;color:#fff;
}
.pmcs strong i{
  font-style:normal;color:#22D3EE;
  font-size:0.72em;font-weight:700;
}

/* Trade buttons */
.pmc-trade{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.pmc-tbtn{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;
  padding:9px 6px;
  border-radius:10px;
  font-family:'Cairo',sans-serif;
  font-weight:800;
  cursor:pointer;
  border:1px solid;
  transition:all 0.2s ease;
  position:relative;
  overflow:hidden;
}
.pmc-tbtn::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,0.22),transparent 70%);
  opacity:0;transition:opacity 0.25s;
}
.pmc-tbtn:active::before{opacity:1}
.pmc-tbtn em{font-style:normal;font-size:11px;font-weight:700}
.pmc-tbtn b{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:13px;font-weight:800;
}
.pmc-tbtn--sell{
  background:linear-gradient(180deg,rgba(255,91,107,0.18),rgba(255,91,107,0.06));
  border-color:rgba(255,91,107,0.5);
  color:#ff5b6b;
}
.pmc-tbtn--buy{
  background:linear-gradient(180deg,rgba(34,201,147,0.18),rgba(34,201,147,0.06));
  border-color:rgba(34,201,147,0.5);
  color:#22c993;
}

/* Mobile movers strip */
.pmc-movers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:10px;
}
.pmc-mover{
  background:rgba(13,20,40,0.5);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:9px;
  padding:8px 5px;
  text-align:center;
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.pmc-mover span{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:9.5px;font-weight:700;
  color:#cfd5e6;letter-spacing:0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmc-mover b{
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-size:11px;font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmc-mover i{
  font-style:normal;font-size:9.5px;font-weight:700;
  font-family:'JetBrains Mono','SF Mono',monospace;
}
.pmc-mover i.up{color:#22c993}
.pmc-mover i.dn{color:#ff5b6b}

/* ============== Hero responsive ============== */
@media (max-width:1280px){
  .ptt-stage{grid-template-columns:minmax(0,1fr) 152px}
  .pa-name{font-size:9.5px}
  .pa-sub{font-size:8px}
  .pa-meta b{font-size:9.5px}
  .pa-meta i{font-size:8.5px}
  .pc-canvas{height:200px}
  .pc-ohlc{gap:6px}
  .pc-ohlc span{font-size:9px}
  .pc-ohlc b{font-size:9.5px}
  .ptt-signal{top:55px;right:14px}
}
@media (max-width:1100px){
  .hero{height:auto;min-height:auto;max-height:none;padding-bottom:60px}
  .hero-wrap{grid-template-columns:1fr;gap:50px;padding-top:30px}
  .hero-right{min-height:auto;padding:30px 0;max-width:820px;margin:0 auto}
  .ptt--desktop{transform:none}
  .ptt-stage{grid-template-columns:minmax(0,1fr) 180px}
  .pa-name{font-size:10.5px}
  .pa-sub{font-size:8.5px}
  .pa-meta b{font-size:11px}
  .pa-meta i{font-size:9.5px}
  .pc-canvas{height:240px}
  .ptt-signal{top:65px;right:18px}
}
@media (max-width:900px){
  .ptt--desktop{display:none !important}
  .ptt--mobile{display:block !important}
}
@media (max-width:768px){
  .hero{padding-bottom:30px}
  .hero-wrap{gap:30px;padding-top:48px}
  .hero-title{font-size:30px;margin-bottom:18px}
  .hero-sub{font-size:14px;margin-bottom:24px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:30px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-mini-stats{grid-template-columns:repeat(2,1fr);gap:14px;padding:18px 0;margin-bottom:18px}
  .mstat strong{font-size:20px}
  .mstat em{font-size:11px;margin-top:5px}
  .hero-trust-mini{gap:8px;font-size:10.5px;justify-content:center}
  .hero-trust-mini em{padding:2px 6px;font-size:10px}
  .hero-trust-mini .treg{gap:2px}
  .hero-trust-mini .treg-mark{width:20px;height:20px}
  .hero-trust-mini .treg-mark svg{width:16px;height:16px}
  .hero-trust-mini .treg em{padding:0;background:none;border:none;font-size:8.5px;letter-spacing:0.8px}
  .hero-right{padding:8px 0 0}
}
@media (max-width:420px){
  .hero-title{font-size:26px}
  .hero-sub{font-size:13.5px}
  .hero-mini-stats{gap:10px;padding:14px 0}
  .mstat strong{font-size:18px}
  .mstat em{font-size:10.5px}
  .pmc{padding:12px 10px 10px;border-radius:14px}
  .pmc-ai{font-size:9.5px;padding:4px 9px}
  .pmc-ver{font-size:9px;padding:2px 7px}
  .pmc-header{margin-bottom:8px;gap:8px}
  .pmc-icon{width:30px;height:30px;font-size:10.5px}
  .pmc-sym strong{font-size:12.5px}
  .pmc-sym em{font-size:9.5px}
  .pmc-price strong{font-size:18px}
  .pmc-chg{font-size:10px;padding:2px 5px}
  .pmc-assets{gap:4px;margin-bottom:8px}
  .pmc-chip{font-size:9.5px;padding:5px 6px}
  .pmc-chart{height:115px;margin-bottom:8px}
  .pmc-tag{font-size:9.5px;padding:2px 6px;top:6px;left:6px}
  .pmc-tfs{margin-bottom:8px}
  .pmc-tf{font-size:9.5px;padding:5px 0}
  .pmc-stats{gap:5px;margin-bottom:8px}
  .pmcs{padding:6px 3px}
  .pmcs em{font-size:9px;margin-bottom:2px}
  .pmcs strong{font-size:12px}
  .pmc-tbtn{padding:8px 4px;border-radius:9px}
  .pmc-tbtn em{font-size:10.5px}
  .pmc-tbtn b{font-size:12px}
  .pmc-trade{gap:5px}
  .pmc-movers{gap:5px;margin-top:8px}
  .pmc-mover{padding:7px 4px;border-radius:8px}
  .pmc-mover span{font-size:9px}
  .pmc-mover b{font-size:10.5px}
  .pmc-mover i{font-size:9px}
}
@media (max-width:360px){
  .pmc{padding:10px 8px 9px}
  .pmc-sym{gap:7px}
  .pmc-icon{width:28px;height:28px;font-size:10px}
  .pmc-sym strong{font-size:11.5px}
  .pmc-sym em{font-size:9px}
  .pmc-price strong{font-size:16px}
  .pmc-chart{height:102px}
  .pmcs strong{font-size:11px}
  .pmc-tbtn b{font-size:11.5px}
  .pmc-mover b{font-size:10px}
  .pmc-mover span{font-size:8.5px}
}

/* ---------- TICKER (Premium Redesign) ---------- */
.ticker-section{
  background:
    radial-gradient(1200px 200px at 50% 0%, rgba(34,211,238,0.06), transparent 70%),
    radial-gradient(900px 200px at 50% 100%, rgba(207,168,111,0.05), transparent 70%),
    linear-gradient(90deg,#070b1c 0%,#0c1430 50%,#070b1c 100%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  box-shadow:0 8px 24px -16px rgba(0,0,0,0.6);
  display:flex;align-items:stretch;
  position:relative;z-index:20;
  min-height:54px;
}
.ticker-label{
  padding:0 18px;
  background:
    linear-gradient(135deg,#22D3EE 0%,#0F7FE0 60%,#0a4f9c 100%);
  color:#03101f;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
  position:relative;z-index:3;
  box-shadow:6px 0 24px -8px rgba(34,211,238,0.45);
  overflow:hidden;
}
.ticker-label::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,0.18) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:labelShine 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes labelShine{
  0%,55%{transform:translateX(-100%)}
  75%,100%{transform:translateX(100%)}
}
.ticker-label__dot{
  width:8px;height:8px;background:#03101f;border-radius:50%;
  box-shadow:0 0 0 0 rgba(3,16,31,0.6);
  animation:pulseDotDark 1.6s infinite;
}
.ticker-label__icon{
  width:22px;height:22px;
  color:#03101f;
  position:relative;z-index:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.25));
  animation:tickerIconPulse 2.8s ease-in-out infinite;
}
@keyframes tickerIconPulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}
.ticker-label__beam{
  position:absolute;top:0;bottom:0;width:14px;
  right:-14px;
  background:linear-gradient(90deg,rgba(15,127,224,0.7),transparent);
  filter:blur(6px);
  pointer-events:none;
  opacity:.8;
}
[dir="rtl"] .ticker-label__beam{
  right:auto;left:-14px;
  background:linear-gradient(270deg,rgba(15,127,224,0.7),transparent);
}
@keyframes pulseDotDark{
  0%,100%{opacity:.55;transform:scale(1);box-shadow:0 0 0 0 rgba(3,16,31,0.6)}
  50%{opacity:1;transform:scale(1.25);box-shadow:0 0 0 5px rgba(3,16,31,0)}
}
.ticker{flex:1;overflow:hidden;position:relative;min-width:0}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;width:90px;height:100%;z-index:2;pointer-events:none;
}
.ticker::before{right:0;background:linear-gradient(270deg,#070b1c 8%,rgba(7,11,28,0.85) 50%,transparent 100%)}
.ticker::after{left:0;background:linear-gradient(90deg,#070b1c 8%,rgba(7,11,28,0.85) 50%,transparent 100%)}
.ticker__track{
  display:flex;gap:0;
  animation:tickerScroll 90s linear infinite;
  width:max-content;
  will-change:transform;
}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
[dir="rtl"] .ticker__track{animation-name:tickerScrollRtl}
@keyframes tickerScrollRtl{
  from{transform:translateX(0)}
  to{transform:translateX(50%)}
}
.tk{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;
  border-left:1px solid rgba(255,255,255,0.05);
  font-size:13px;
  white-space:nowrap;
  position:relative;
  transition:background .25s ease, transform .25s ease;
  cursor:default;
}
.tk::before{
  content:"";position:absolute;left:0;top:50%;
  width:3px;height:0;background:linear-gradient(180deg,transparent,#22D3EE,transparent);
  transform:translateY(-50%);
  opacity:0;
  transition:height .35s ease, opacity .35s ease;
}
.tk:hover{background:linear-gradient(180deg,rgba(34,211,238,0.04),transparent)}
.tk:hover::before{height:70%;opacity:1}
.tk__cat-dot{
  width:6px;height:6px;border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 8px currentColor;
}
.tk[data-cat="metal"] .tk__cat-dot{background:#cfa86f;color:rgba(207,168,111,0.6)}
.tk[data-cat="oil"]   .tk__cat-dot{background:#22D3EE;color:rgba(34,211,238,0.6)}
.tk[data-cat="stock"] .tk__cat-dot{background:#5DD4CF;color:rgba(93,212,207,0.6)}
.tk__sym{
  font-weight:800;
  background:rgba(255,255,255,0.05);
  padding:3px 9px;border-radius:5px;
  font-size:10.5px;letter-spacing:0.6px;
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  font-family:'SF Mono','Monaco','Menlo',monospace;
}
.tk__name{
  color:#9ea7c2;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.2px;
}
.tk__price{
  color:#eef1f8;
  font-variant-numeric:tabular-nums;
  font-weight:700;font-size:13.5px;
  transition:color .3s;
  letter-spacing:0.3px;
}
.tk__price.flash-up{color:#22c993;animation:priceFlashUp .6s ease}
.tk__price.flash-dn{color:#ff5b6b;animation:priceFlashDn .6s ease}
@keyframes priceFlashUp{
  0%{opacity:.55}
  100%{opacity:1}
}
@keyframes priceFlashDn{
  0%{opacity:.55}
  100%{opacity:1}
}
.tk__chg{
  font-weight:700;font-size:11.5px;
  font-variant-numeric:tabular-nums;
  padding:3px 9px;border-radius:5px;
  display:inline-flex;align-items:center;gap:3px;
  letter-spacing:0.3px;
  font-family:'SF Mono','Monaco','Menlo',monospace;
}
.tk__chg.up{
  color:#22c993;
  background:linear-gradient(180deg,rgba(34,201,147,0.16),rgba(34,201,147,0.06));
  border:1px solid rgba(34,201,147,0.18);
}
.tk__chg.dn{
  color:#ff5b6b;
  background:linear-gradient(180deg,rgba(255,91,107,0.16),rgba(255,91,107,0.06));
  border:1px solid rgba(255,91,107,0.18);
}
.tk__chg.up::before{content:"▲";font-size:7px;opacity:.9}
.tk__chg.dn::before{content:"▼";font-size:7px;opacity:.9}

/* Category symbol accents */
.tk[data-cat="metal"] .tk__sym{
  color:#cfa86f;
  background:rgba(207,168,111,0.10);
  border-color:rgba(207,168,111,0.22);
}
.tk[data-cat="oil"] .tk__sym{
  color:#22D3EE;
  background:rgba(34,211,238,0.10);
  border-color:rgba(34,211,238,0.22);
}
.tk[data-cat="stock"] .tk__sym{
  color:#5DD4CF;
  background:rgba(93,212,207,0.10);
  border-color:rgba(93,212,207,0.22);
}

/* ---------- LIVE STATS HUB ---------- */
.lstats{
  padding:80px 0 70px;
  position:relative;
  background:
    radial-gradient(900px 400px at 80% 20%, rgba(34,211,238,0.06), transparent 60%),
    radial-gradient(700px 350px at 10% 90%, rgba(93,212,207,0.045), transparent 60%),
    linear-gradient(180deg, #060916 0%, #0a1024 50%, #060916 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.lstats::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.lstats .container{position:relative;z-index:2}

.lstats__head{
  text-align:center;
  margin-bottom:48px;
}
.lstats__live{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:99px;
  background:rgba(34,201,147,0.08);
  border:1px solid rgba(34,201,147,0.22);
  color:#22c993;
  font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.lstats__live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c993;
  box-shadow:0 0 12px rgba(34,201,147,0.7);
  animation:pulseDotGreen 1.4s infinite;
}
@keyframes pulseDotGreen{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.75)}
}
.lstats__title{
  font-size:38px;font-weight:800;color:#fff;
  margin:0 0 14px;
  letter-spacing:-0.5px;
}
.lstats__title .gold{
  background:linear-gradient(135deg, #22D3EE, #0F7FE0);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lstats__sub{
  color:#a8b0c5;font-size:15px;
  max-width:600px;margin:0 auto;
  line-height:1.7;
}

/* SLIDER */
.lstats__slider{position:relative;padding:0 56px}
.lstats__viewport{overflow:hidden;border-radius:18px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.lstats__track{display:flex;gap:22px;transition:transform .55s cubic-bezier(.65,.05,.36,1);will-change:transform;padding:8px 4px}
.lstats__track > .lcard{flex:0 0 calc((100% - 22px * 2) / 3);min-width:0}
.lstats__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg, rgba(34,211,238,0.18), rgba(15,127,224,0.12));
  border:1.5px solid rgba(34,211,238,0.4);
  color:#22D3EE;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:all .25s ease;
  box-shadow:0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.lstats__nav:hover{background:linear-gradient(135deg, rgba(34,211,238,0.35), rgba(15,127,224,0.25));border-color:rgba(34,211,238,0.7);transform:translateY(-50%) scale(1.08);box-shadow:0 6px 24px rgba(34,211,238,0.35)}
.lstats__nav:active{transform:translateY(-50%) scale(.96)}
.lstats__nav:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.lstats__nav--prev{right:0}
.lstats__nav--next{left:0}
.lstats__dots{display:flex;gap:9px;justify-content:center;margin-top:24px}
.lstats__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:none;cursor:pointer;padding:0;
  transition:all .3s ease;
}
.lstats__dot:hover{background:rgba(34,211,238,0.5)}
.lstats__dot.active{
  background:linear-gradient(90deg,#22D3EE,#0EA5E9);
  width:26px;border-radius:6px;
  box-shadow:0 0 12px rgba(34,211,238,0.6);
}

/* CHART */
.lcard__chart{
  margin:14px 0 4px;
  padding:12px 10px 6px;
  background:linear-gradient(180deg, rgba(34,211,238,0.04), rgba(15,127,224,0.02));
  border:1px solid rgba(34,211,238,0.12);
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.lcard__chart::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 100% at 50% 0%, rgba(34,211,238,0.08), transparent 70%);
  pointer-events:none;
}
.lcard__chart-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;position:relative;z-index:1;
}
.lcard__chart-head span{
  font-size:10px;color:rgba(255,255,255,0.55);
  letter-spacing:0.5px;text-transform:uppercase;font-weight:600;
}
.lcard__chart-head strong{
  font-size:12px;font-weight:800;
  background:linear-gradient(90deg,#22D3EE,#0EA5E9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:"JetBrains Mono","Fira Code",monospace;
}
.lcard__chart-svg{
  width:100%;height:54px;display:block;position:relative;z-index:1;
  overflow:visible;
}
.lcard__chart-area{
  fill:url(#lcardGrad);
  opacity:0;
  transition:opacity .8s ease .2s;
}
.lcard__chart-line{
  fill:none;
  stroke:url(#lcardLineGrad);
  stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(34,211,238,0.5));
  stroke-dasharray:300;
  stroke-dashoffset:300;
  transition:stroke-dashoffset 1.2s cubic-bezier(.65,.05,.36,1) .1s;
}
.lcard__chart-dot{
  fill:#22D3EE;
  stroke:#0a1024;stroke-width:1.5;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.9));
  opacity:0;
  transition:opacity .4s ease 1.2s;
}
.lcard.in-view .lcard__chart-area{opacity:1}
.lcard.in-view .lcard__chart-line{stroke-dashoffset:0}
.lcard.in-view .lcard__chart-dot{opacity:1;animation:dotPulse 2.4s ease-in-out 1.4s infinite}
@keyframes dotPulse{
  0%,100%{r:2.2}
  50%{r:3}
}
.lcard__chart-years{
  display:flex;justify-content:space-between;
  margin-top:4px;position:relative;z-index:1;
}
.lcard__chart-years span{
  font-size:9px;color:rgba(255,255,255,0.4);
  font-family:"JetBrains Mono","Fira Code",monospace;
  letter-spacing:0.5px;
}

.lcard{
  position:relative;
  padding:26px 22px 22px;
  background:linear-gradient(180deg, rgba(20,28,52,0.85), rgba(10,16,36,0.95));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.lcard__glow{
  position:absolute;inset:0;
  background:radial-gradient(400px 200px at 50% -10%, var(--card-accent-soft, rgba(34,211,238,0.10)), transparent 70%);
  pointer-events:none;
  opacity:0.7;
}
.lcard::after{
  content:"";position:absolute;
  top:0;right:18%;left:18%;height:1.5px;
  background:linear-gradient(90deg, transparent, var(--card-accent, #22D3EE), transparent);
  opacity:0.7;
}
.lcard:hover{
  transform:translateY(-5px);
  border-color:var(--card-accent, rgba(34,211,238,0.40));
  box-shadow:0 20px 50px -20px var(--card-accent-soft, rgba(34,211,238,0.20));
}

.lcard[data-card="accounts"]{
  --card-accent:#5DD4CF;
  --card-accent-soft:rgba(93,212,207,0.18);
}
.lcard[data-card="deposits"]{
  --card-accent:#22D3EE;
  --card-accent-soft:rgba(34,211,238,0.18);
}
.lcard[data-card="profits"]{
  --card-accent:#22c993;
  --card-accent-soft:rgba(34,201,147,0.18);
}
.lcard[data-card="withdrawals"]{
  --card-accent:#7C9CF7;
  --card-accent-soft:rgba(124,156,247,0.18);
}

.lcard__top{
  display:flex;align-items:center;gap:14px;
  margin-bottom:20px;
  position:relative;z-index:2;
}
.lcard__icon{
  width:46px;height:46px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--card-accent-soft, rgba(34,211,238,0.13)), rgba(255,255,255,0.02));
  border:1px solid var(--card-accent, rgba(34,211,238,0.25));
  border-color:rgba(255,255,255,0.10);
  color:var(--card-accent, #22D3EE);
  flex-shrink:0;
  position:relative;
}
.lcard__icon::before{
  content:"";position:absolute;inset:-1px;border-radius:12px;
  border:1px solid var(--card-accent, #22D3EE);
  opacity:0.35;
  pointer-events:none;
}
.lcard__head{flex:1;min-width:0}
.lcard__head h3{
  font-size:15.5px;font-weight:700;color:#fff;
  margin:0 0 5px;
  letter-spacing:-0.2px;
}
.lcard__pulse{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;color:var(--card-accent, #22c993);
  font-weight:800;letter-spacing:1px;
  text-transform:uppercase;
}
.lcard__pulse .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--card-accent, #22c993);
  animation:pulseDotGreen 1.4s infinite;
  box-shadow:0 0 8px var(--card-accent, #22c993);
}

.lcard__rows{
  list-style:none;padding:0;margin:0;
  border-top:1px solid rgba(255,255,255,0.06);
  position:relative;z-index:2;
}
.lcard__rows li{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:14px 0;
  border-bottom:1px dashed rgba(255,255,255,0.05);
  gap:10px;
}
.lcard__rows li:last-child{border-bottom:none}
.lcard__lbl{
  font-size:12.5px;color:#7a8299;
  font-weight:500;
}
.lcard__val{
  font-size:22px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.4px;
  position:relative;
  display:inline-block;
  transition:color .3s;
}
.lcard__val.flash{
  color:var(--card-accent, #22D3EE);
  animation:lcardFlash .8s ease-out;
}
@keyframes lcardFlash{
  0%{transform:scale(1.06)}
  60%{transform:scale(1.02)}
  100%{transform:scale(1)}
}

.lcard__foot{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.06);
  position:relative;z-index:2;
}
.lcard__delta{
  font-size:11.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
}
.lcard__delta.up{color:#22c993}
.lcard__delta.dn{color:#ff5b6b}
.lcard__delta.up::before{content:"▲";font-size:9px}
.lcard__delta.dn::before{content:"▼";font-size:9px}

/* ---------- TRUST BAR ---------- */
/* ---------- REGULATORS ---------- */
.regulators{padding:80px 0;background:radial-gradient(120% 100% at 50% 0%, #0a1024 0%, #060a18 60%, #040813 100%);position:relative;overflow:hidden}
.regulators::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(40% 60% at 20% 20%, rgba(34,211,238,0.06), transparent 60%),
    radial-gradient(40% 60% at 80% 80%, rgba(15,127,224,0.05), transparent 60%);
  pointer-events:none;
}
.regulators .container{position:relative;z-index:1}
.regulators .section-sub{
  text-align:center;color:var(--text-dim);font-size:14px;
  margin-top:10px;letter-spacing:0.3px;
}

.regulators__grid{
  display:grid;grid-template-columns:repeat(9,1fr);
  gap:18px;margin-top:38px;
  max-width:1100px;margin-left:auto;margin-right:auto;
}
.regulator-flag{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:16px 8px 14px;
  background:linear-gradient(180deg, rgba(20,28,52,0.5), rgba(10,16,36,0.7));
  border:1.5px solid rgba(255,255,255,0.06);
  border-radius:14px;
  cursor:pointer;
  transition:all .3s cubic-bezier(.65,.05,.36,1);
  overflow:hidden;
  font-family:inherit;
  text-align:center;
}
.regulator-flag::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(34,211,238,0.0), rgba(34,211,238,0.0));
  transition:background .35s ease;
  pointer-events:none;
}
.regulator-flag:hover{
  border-color:rgba(34,211,238,0.35);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,0.4), 0 0 24px rgba(34,211,238,0.12);
}
.regulator-flag:hover::before{
  background:linear-gradient(180deg, rgba(34,211,238,0.06), rgba(15,127,224,0.02));
}
.regulator-flag.active{
  border-color:rgba(34,211,238,0.7);
  box-shadow:0 0 0 1px rgba(34,211,238,0.5) inset, 0 14px 36px rgba(34,211,238,0.18);
}
.regulator-flag.active::before{
  background:linear-gradient(180deg, rgba(34,211,238,0.12), rgba(15,127,224,0.05));
}
.regulator-flag__circle{
  width:54px;height:54px;border-radius:50%;
  background-size:cover;background-position:center;
  border:2px solid rgba(255,255,255,0.12);
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.regulator-flag__circle::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.25), inset 0 -2px 6px rgba(255,255,255,0.08);
  pointer-events:none;
}
.regulator-flag:hover .regulator-flag__circle{
  border-color:rgba(34,211,238,0.5);
  transform:scale(1.05);
}
.regulator-flag.active .regulator-flag__circle{
  border-color:#22D3EE;
  box-shadow:0 0 0 3px rgba(34,211,238,0.18), 0 6px 18px rgba(34,211,238,0.4);
  transform:scale(1.06);
}
.regulator-flag__abbr{
  font-family:"JetBrains Mono","Fira Code",monospace;
  font-size:13px;font-weight:800;
  color:#fff;letter-spacing:1px;line-height:1;
  position:relative;z-index:1;
}
.regulator-flag.active .regulator-flag__abbr{
  background:linear-gradient(90deg,#22D3EE,#0EA5E9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.regulator-flag__country{
  font-size:11px;color:var(--text-dim);font-weight:600;
  letter-spacing:0.3px;line-height:1.2;
  position:relative;z-index:1;
}

/* PANEL */
.regulators__panel{
  margin:30px auto 0;max-width:980px;
  background:linear-gradient(180deg, rgba(20,28,52,0.7), rgba(10,16,36,0.85));
  border:1.5px solid rgba(34,211,238,0.18);
  border-radius:18px;
  padding:28px 32px;
  position:relative;
  overflow:hidden;
  min-height:200px;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(12px);
  animation:panelIn .5s ease forwards;
}
@keyframes panelIn{
  to{opacity:1;transform:translateY(0)}
}
.regulators__panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#22D3EE,#0EA5E9,#0F7FE0);
  opacity:0.85;
}
.regulators__panel::after{
  content:"";position:absolute;top:-50%;right:-20%;width:50%;height:200%;
  background:radial-gradient(circle at center, rgba(34,211,238,0.08), transparent 60%);
  pointer-events:none;
}
.regpanel__top{
  display:flex;align-items:center;gap:18px;margin-bottom:18px;
  position:relative;z-index:1;flex-wrap:wrap;
}
.regpanel__flag{
  width:64px;height:64px;border-radius:50%;
  background-size:cover;background-position:center;
  border:2.5px solid rgba(34,211,238,0.5);
  box-shadow:0 0 0 4px rgba(34,211,238,0.1), 0 8px 24px rgba(0,0,0,0.5);
  flex-shrink:0;
  position:relative;
}
.regpanel__flag::after{
  content:"";position:absolute;inset:-2.5px;border-radius:50%;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.25);
  pointer-events:none;
}
.regpanel__head{flex:1;min-width:200px}
.regpanel__authority{
  font-size:24px;font-weight:800;
  background:linear-gradient(90deg,#fff 0%, #22D3EE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px;line-height:1.2;
}
.regpanel__country{
  font-size:13px;color:var(--text-dim);
  display:flex;align-items:center;gap:8px;
}
.regpanel__country::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#22D3EE;box-shadow:0 0 8px rgba(34,211,238,0.7);
}
.regpanel__badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:30px;
  background:linear-gradient(135deg, rgba(34,211,238,0.18), rgba(15,127,224,0.12));
  border:1px solid rgba(34,211,238,0.4);
  font-family:"JetBrains Mono","Fira Code",monospace;
  font-size:11.5px;font-weight:700;color:#22D3EE;
  letter-spacing:0.5px;
  white-space:nowrap;
}
.regpanel__company{
  font-size:14px;font-weight:700;color:#fff;
  margin:6px 0 10px;letter-spacing:0.3px;
  position:relative;z-index:1;
}
.regpanel__desc{
  font-size:14px;line-height:1.85;color:#cfd5e6;
  margin-bottom:22px;
  position:relative;z-index:1;
}
.regpanel__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:10px;
  background:linear-gradient(135deg, #22D3EE, #0EA5E9);
  color:#0a1024;font-weight:800;font-size:14px;
  text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 6px 20px rgba(34,211,238,0.3);
  align-self:flex-start;
  position:relative;z-index:1;
}
.regpanel__cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(34,211,238,0.45);
}
.regpanel__cta:active{transform:translateY(0)}
.regpanel__cta svg{transition:transform .25s ease}
.regpanel__cta:hover svg{transform:translateX(-4px)}
.regpanel__cta--disabled{
  background:rgba(255,255,255,0.06);
  color:var(--text-dim);
  cursor:not-allowed;
  box-shadow:none;
  pointer-events:none;
}

@media (max-width:1100px){
  .regulators__grid{grid-template-columns:repeat(5,1fr);max-width:760px;gap:14px}
}
@media (max-width:768px){
  .regulators{padding:54px 0}
  .regulators__grid{grid-template-columns:repeat(3,1fr);max-width:480px;gap:12px;margin-top:26px}
  .regulator-flag{padding:14px 6px 12px;border-radius:12px}
  .regulator-flag__circle{width:46px;height:46px}
  .regulator-flag__abbr{font-size:12px}
  .regulator-flag__country{font-size:10.5px}
  .regulators__panel{padding:22px 18px;border-radius:14px;margin-top:24px}
  .regpanel__top{gap:14px;margin-bottom:14px}
  .regpanel__flag{width:54px;height:54px}
  .regpanel__authority{font-size:19px}
  .regpanel__country{font-size:12px}
  .regpanel__badge{font-size:10.5px;padding:6px 12px}
  .regpanel__company{font-size:13px}
  .regpanel__desc{font-size:13px;line-height:1.75;margin-bottom:18px}
  .regpanel__cta{font-size:13px;padding:11px 18px}
}
@media (max-width:420px){
  .regulators__grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .regulator-flag{padding:12px 4px 10px}
  .regulator-flag__circle{width:40px;height:40px;border-width:1.5px}
  .regulator-flag__abbr{font-size:11px;letter-spacing:0.5px}
  .regulator-flag__country{font-size:10px}
}

/* ---------- PRODUCTS ---------- */
.products{background:radial-gradient(120% 90% at 50% 0%, #050b1c 0%, #040813 60%, #03060f 100%);position:relative;overflow:hidden}
.products::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(50% 60% at 15% 30%, rgba(34,211,238,0.06), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(15,127,224,0.05), transparent 60%);
  pointer-events:none;
}
.products .container{position:relative;z-index:1}

/* ===== SLIDER ===== */
.products__slider{position:relative;padding:0 60px;margin-top:36px}
.pslider__viewport{
  overflow:hidden;border-radius:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
}
.pslider__track{
  display:flex;gap:24px;
  transition:transform .6s cubic-bezier(.65,.05,.36,1);
  will-change:transform;padding:10px 6px;
}
.pslider__track > .pcard{flex:0 0 calc((100% - 24px * 2) / 3);min-width:0}

.pslider__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg, rgba(34,211,238,0.2), rgba(15,127,224,0.14));
  border:1.5px solid rgba(34,211,238,0.45);
  color:#22D3EE;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:all .25s ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pslider__nav:hover{
  background:linear-gradient(135deg, rgba(34,211,238,0.4), rgba(15,127,224,0.28));
  border-color:rgba(34,211,238,0.75);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 8px 28px rgba(34,211,238,0.4);
}
.pslider__nav:active{transform:translateY(-50%) scale(.96)}
.pslider__nav:disabled{opacity:.32;cursor:not-allowed;pointer-events:none}
.pslider__nav--prev{right:0}
.pslider__nav--next{left:0}

.pslider__dots{display:flex;gap:10px;justify-content:center;margin-top:28px}
.pslider__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:none;cursor:pointer;padding:0;
  transition:all .3s ease;
}
.pslider__dot:hover{background:rgba(34,211,238,0.5)}
.pslider__dot.active{
  background:linear-gradient(90deg,#22D3EE,#0EA5E9);
  width:30px;border-radius:6px;
  box-shadow:0 0 14px rgba(34,211,238,0.6);
}

/* ===== CARD BASE ===== */
.pcard{
  position:relative;
  background:linear-gradient(180deg, rgba(20,28,52,0.8), rgba(8,14,32,0.92));
  border:1.5px solid rgba(255,255,255,0.06);
  border-radius:20px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:all .35s cubic-bezier(.65,.05,.36,1);
  isolation:isolate;
}
.pcard::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(34,211,238,0) 0%, rgba(34,211,238,0) 100%);
  opacity:0;transition:opacity .35s ease;
  pointer-events:none;z-index:1;
}
.pcard:hover{
  transform:translateY(-8px);
  border-color:rgba(34,211,238,0.4);
  box-shadow:0 12px 28px -12px rgba(0,0,0,0.5);
}
.pcard:hover::before{opacity:1}

/* ===== VIZ AREA (TOP) ===== */
.pcard__viz{
  position:relative;
  height:180px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.05);
  isolation:isolate;
}
.viz-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
    radial-gradient(60% 80% at 50% 30%, rgba(34,211,238,0.18), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.pcard:hover .viz-bg{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
    radial-gradient(60% 80% at 50% 30%, rgba(34,211,238,0.32), transparent 65%);
}

/* ===== FX VIZ ===== */
.pcard--fx .viz-bg{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 19px, rgba(34,211,238,0.06) 19px, rgba(34,211,238,0.06) 20px),
    repeating-linear-gradient(90deg, transparent 0, transparent 19px, rgba(34,211,238,0.06) 19px, rgba(34,211,238,0.06) 20px),
    radial-gradient(60% 80% at 50% 30%, rgba(34,211,238,0.18), transparent 65%);
}
.viz-fx-grid{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
}
.viz-fx-area{opacity:0;animation:fxAreaIn 1.4s ease forwards .3s}
.viz-fx-path{
  stroke-dasharray:300;stroke-dashoffset:300;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.6));
  animation:fxPathDraw 2s ease forwards .2s, fxPathPulse 4s ease-in-out 2.2s infinite;
}
.viz-fx-dot{
  filter:drop-shadow(0 0 8px rgba(34,211,238,0.95));
  opacity:0;
  animation:fxDotIn .4s ease forwards 2.1s, fxDotPulse 1.8s ease-in-out 2.5s infinite;
}
@keyframes fxAreaIn{to{opacity:1}}
@keyframes fxPathDraw{to{stroke-dashoffset:0}}
@keyframes fxPathPulse{0%,100%{filter:drop-shadow(0 0 6px rgba(34,211,238,0.6))}50%{filter:drop-shadow(0 0 12px rgba(34,211,238,0.95))}}
@keyframes fxDotIn{to{opacity:1}}
@keyframes fxDotPulse{0%,100%{r:3.5}50%{r:5}}

.viz-fx-symbols{position:absolute;inset:0;z-index:2;pointer-events:none}
.viz-fx-sym{
  position:absolute;
  font-family:'Cairo',sans-serif;font-weight:900;font-size:22px;
  background:linear-gradient(135deg,#22D3EE,#0EA5E9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(34,211,238,0.5));
  opacity:0;
}
.viz-fx-sym--1{top:18%;left:10%;animation:fxSymFloat 5s ease-in-out infinite .3s, fxSymFade .8s ease forwards .8s}
.viz-fx-sym--2{top:55%;left:24%;font-size:26px;animation:fxSymFloat 5s ease-in-out infinite .8s, fxSymFade .8s ease forwards 1.1s}
.viz-fx-sym--3{top:25%;right:18%;animation:fxSymFloat 5s ease-in-out infinite .5s, fxSymFade .8s ease forwards 1.4s}
.viz-fx-sym--4{top:62%;right:30%;font-size:20px;animation:fxSymFloat 5s ease-in-out infinite 1s, fxSymFade .8s ease forwards 1.7s}
@keyframes fxSymFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fxSymFade{to{opacity:0.85}}

.viz-fx-pair{
  position:absolute;bottom:12px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px;border-radius:8px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(34,211,238,0.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:"JetBrains Mono",monospace;
  opacity:0;animation:fxPairIn .6s ease forwards 1.6s;
}
@keyframes fxPairIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.viz-fx-pair__name{font-size:10.5px;font-weight:700;color:rgba(255,255,255,0.7);letter-spacing:0.5px}
.viz-fx-pair__price{font-size:13px;font-weight:800;color:#22D3EE}
.viz-fx-pair__delta{font-size:10.5px;font-weight:700;color:#22c993}

/* ===== METALS VIZ ===== */
.pcard--metal .viz-bg{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%),
    radial-gradient(60% 80% at 50% 40%, rgba(245,180,80,0.15), transparent 65%),
    radial-gradient(40% 60% at 50% 50%, rgba(34,211,238,0.08), transparent 70%);
}
.viz-metal-bar{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  width:130px;height:60px;
  background:linear-gradient(135deg, #d4a356 0%, #f4d27a 30%, #e8b965 50%, #c89548 80%, #b8862e 100%);
  border-radius:8px;
  box-shadow:
    0 12px 28px rgba(180,130,40,0.45),
    0 0 30px rgba(34,211,238,0.2),
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.25);
  overflow:hidden;
  z-index:2;
  animation:metalFloat 4s ease-in-out infinite;
}
.viz-metal-bar--2{
  width:90px;height:42px;
  top:72%;left:74%;
  transform:translate(-50%,-50%) rotate(18deg);
  background:linear-gradient(135deg, #c8c8d0 0%, #f0f0f8 30%, #d8d8e0 50%, #b0b0b8 80%, #909098 100%);
  box-shadow:
    0 8px 20px rgba(150,150,160,0.4),
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.25);
  z-index:1;
  animation:metalFloat2 5s ease-in-out infinite .6s;
}
@keyframes metalFloat{
  0%,100%{transform:translate(-50%,-50%) rotate(-12deg)}
  50%{transform:translate(-50%,-54%) rotate(-10deg)}
}
@keyframes metalFloat2{
  0%,100%{transform:translate(-50%,-50%) rotate(18deg)}
  50%{transform:translate(-50%,-46%) rotate(20deg)}
}
.viz-metal-bar__shine{
  position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  animation:metalShine 3s ease-in-out infinite;
}
@keyframes metalShine{
  0%{left:-40%}
  60%,100%{left:140%}
}
.viz-metal-bar__label{
  position:absolute;top:6px;left:8px;
  font-family:"JetBrains Mono",monospace;font-size:8.5px;font-weight:700;
  color:rgba(80,40,0,0.7);letter-spacing:0.5px;
}
.viz-metal-bar__au{
  position:absolute;bottom:6px;right:10px;
  font-family:'Cairo',sans-serif;font-weight:900;font-size:18px;
  color:rgba(80,40,0,0.85);
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
}

.viz-sparks{position:absolute;inset:0;z-index:3;pointer-events:none}
.viz-spark{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #ffe9a0 40%, transparent 80%);
  box-shadow:0 0 10px rgba(255,233,160,0.9);
  opacity:0;
}
.viz-spark--1{top:18%;left:20%;animation:sparkTwinkle 2.4s ease-in-out infinite}
.viz-spark--2{top:30%;right:14%;animation:sparkTwinkle 2.4s ease-in-out infinite .4s}
.viz-spark--3{top:65%;left:14%;animation:sparkTwinkle 2.4s ease-in-out infinite .8s}
.viz-spark--4{top:22%;left:55%;animation:sparkTwinkle 2.4s ease-in-out infinite 1.2s}
.viz-spark--5{top:78%;right:32%;animation:sparkTwinkle 2.4s ease-in-out infinite 1.6s}
.viz-spark--6{top:48%;right:8%;animation:sparkTwinkle 2.4s ease-in-out infinite 2s}
@keyframes sparkTwinkle{
  0%,100%{opacity:0;transform:scale(0.5)}
  50%{opacity:1;transform:scale(1.4)}
}

.viz-metal-price{
  position:absolute;top:12px;right:14px;z-index:3;
  display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding:5px 10px;border-radius:7px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(245,180,80,0.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:"JetBrains Mono",monospace;
}
.viz-metal-price__name{font-size:9.5px;color:rgba(255,255,255,0.65);font-weight:700;letter-spacing:0.5px}
.viz-metal-price__val{font-size:13px;color:#f4d27a;font-weight:800}

/* ===== STOCKS VIZ ===== */
.pcard--stock .viz-bg{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(34,211,238,0.05) 24px, rgba(34,211,238,0.05) 25px),
    radial-gradient(60% 80% at 50% 30%, rgba(34,211,238,0.16), transparent 65%);
}
.viz-stock-bars{
  position:absolute;
  bottom:14px;left:0;right:0;
  height:115px;
  display:flex;justify-content:center;align-items:flex-end;gap:8px;
  padding:0 16px;
  z-index:1;
}
.viz-stock-bar{
  width:18px;
  background:linear-gradient(180deg, #22D3EE 0%, #0EA5E9 100%);
  border-radius:4px 4px 2px 2px;
  box-shadow:0 0 12px rgba(34,211,238,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  transform-origin:bottom;
  animation:stockBar 3.5s ease-in-out infinite;
}
.viz-stock-bar:nth-child(1){--h:55%;animation-delay:0s}
.viz-stock-bar:nth-child(2){--h:78%;animation-delay:.2s}
.viz-stock-bar:nth-child(3){--h:42%;animation-delay:.4s}
.viz-stock-bar:nth-child(4){--h:88%;animation-delay:.6s}
.viz-stock-bar:nth-child(5){--h:62%;animation-delay:.8s}
.viz-stock-bar:nth-child(6){--h:95%;animation-delay:1s}
.viz-stock-bar:nth-child(7){--h:72%;animation-delay:1.2s}
@keyframes stockBar{
  0%{height:0;opacity:0.4}
  20%{height:calc(var(--h) * 0.6);opacity:1}
  60%{height:var(--h);opacity:1}
  100%{height:calc(var(--h) * 0.85);opacity:0.85}
}

.viz-stock-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.viz-stock-tag{
  position:absolute;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:6px;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;font-weight:800;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;
}
.viz-stock-tag em{font-style:normal;font-size:10px;font-weight:700}
.viz-stock-tag--up{background:rgba(34,201,147,0.18);border:1px solid rgba(34,201,147,0.55);color:#22c993}
.viz-stock-tag--up em{color:#22c993}
.viz-stock-tag--dn{background:rgba(255,91,107,0.18);border:1px solid rgba(255,91,107,0.55);color:#ff5b6b}
.viz-stock-tag--dn em{color:#ff5b6b}
.viz-stock-tag--up:nth-child(1){top:14%;left:14%;animation:stockTagFloat 4s ease-in-out infinite .2s, stockTagIn .5s ease forwards .6s}
.viz-stock-tag--up:nth-child(2){top:8%;right:18%;animation:stockTagFloat 4s ease-in-out infinite 1.2s, stockTagIn .5s ease forwards .9s}
.viz-stock-tag--dn{top:30%;right:8%;animation:stockTagFloat 4s ease-in-out infinite 2s, stockTagIn .5s ease forwards 1.2s}
@keyframes stockTagIn{to{opacity:1}}
@keyframes stockTagFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== INDICES VIZ ===== */
.pcard--index .viz-bg{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, rgba(167,139,250,0.05) 23px, rgba(167,139,250,0.05) 24px),
    radial-gradient(60% 80% at 50% 30%, rgba(167,139,250,0.15), transparent 65%);
}
.viz-idx-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.viz-idx-line{
  fill:none;stroke-linecap:round;
  stroke-dasharray:300;stroke-dashoffset:300;
}
.viz-idx-line--1{filter:drop-shadow(0 0 5px rgba(34,211,238,0.6));animation:idxDraw 1.6s ease forwards .3s}
.viz-idx-line--2{filter:drop-shadow(0 0 5px rgba(34,201,147,0.6));animation:idxDraw 1.6s ease forwards .6s}
.viz-idx-line--3{filter:drop-shadow(0 0 5px rgba(167,139,250,0.6));animation:idxDraw 1.6s ease forwards .9s}
@keyframes idxDraw{to{stroke-dashoffset:0}}

.viz-idx-dot{opacity:0}
.viz-idx-dot--1{animation:idxDotIn .4s ease forwards 1.6s, idxDotPulse 2s ease-in-out 2s infinite;filter:drop-shadow(0 0 6px rgba(34,211,238,0.9))}
.viz-idx-dot--2{animation:idxDotIn .4s ease forwards 1.9s, idxDotPulse 2s ease-in-out 2.3s infinite;filter:drop-shadow(0 0 6px rgba(34,201,147,0.9))}
.viz-idx-dot--3{animation:idxDotIn .4s ease forwards 2.2s, idxDotPulse 2s ease-in-out 2.6s infinite;filter:drop-shadow(0 0 6px rgba(167,139,250,0.9))}
@keyframes idxDotIn{to{opacity:1}}
@keyframes idxDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

.viz-idx-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.viz-idx-tag{
  position:absolute;
  padding:3px 8px;border-radius:5px;
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px;font-weight:800;letter-spacing:0.5px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;animation:idxTagIn .5s ease forwards 2.2s;
}
.viz-idx-tag--1{top:8%;right:12%;background:rgba(34,211,238,0.18);border:1px solid rgba(34,211,238,0.55);color:#22D3EE}
.viz-idx-tag--2{top:32%;right:12%;animation-delay:2.4s;background:rgba(34,201,147,0.18);border:1px solid rgba(34,201,147,0.55);color:#22c993}
.viz-idx-tag--3{top:48%;right:12%;animation-delay:2.6s;background:rgba(167,139,250,0.18);border:1px solid rgba(167,139,250,0.55);color:#a78bfa}
@keyframes idxTagIn{to{opacity:1}}

/* ===== COMMODITIES VIZ ===== */
.pcard--comm .viz-bg{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%),
    radial-gradient(60% 80% at 50% 30%, rgba(34,211,238,0.16), transparent 65%);
}
.viz-com-barrel{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:110px;height:auto;
  z-index:1;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}
.viz-com-wave--1{
  animation:comWave 4s ease-in-out infinite;
  transform-origin:center;
}
.viz-com-wave--2{
  animation:comWave 4s ease-in-out infinite .5s;
  transform-origin:center;
}
@keyframes comWave{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-30px)}
}

.viz-com-bubbles{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:80px;height:100px;
  z-index:2;pointer-events:none;
  overflow:hidden;
  border-radius:10px;
}
.viz-com-bubble{
  position:absolute;
  bottom:0;
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9) 0%, rgba(34,211,238,0.5) 50%, transparent 80%);
  box-shadow:0 0 6px rgba(34,211,238,0.6);
  opacity:0;
}
.viz-com-bubble--1{left:18%;animation:comBubble 3.5s ease-in infinite}
.viz-com-bubble--2{left:42%;width:6px;height:6px;animation:comBubble 3.5s ease-in infinite .8s}
.viz-com-bubble--3{left:62%;width:10px;height:10px;animation:comBubble 3.5s ease-in infinite 1.4s}
.viz-com-bubble--4{left:32%;width:5px;height:5px;animation:comBubble 3.5s ease-in infinite 2s}
.viz-com-bubble--5{left:75%;width:7px;height:7px;animation:comBubble 3.5s ease-in infinite 2.6s}
@keyframes comBubble{
  0%{bottom:0;opacity:0;transform:scale(0.4)}
  20%{opacity:1;transform:scale(1)}
  100%{bottom:80%;opacity:0;transform:scale(0.6) translateX(8px)}
}

.viz-com-tag{
  position:absolute;
  padding:4px 9px;border-radius:6px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(34,211,238,0.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:"JetBrains Mono",monospace;
  font-size:10px;font-weight:800;color:#22D3EE;
  letter-spacing:0.5px;
  z-index:3;
  opacity:0;animation:comTagIn .6s ease forwards 1s;
}
.viz-com-tag--1{top:18%;left:14%;animation-delay:1s}
.viz-com-tag--2{bottom:18%;right:14%;animation-delay:1.4s}
@keyframes comTagIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== CRYPTO VIZ ===== */
.pcard--crypto .viz-bg{
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
    radial-gradient(60% 80% at 50% 50%, rgba(244,196,90,0.14), transparent 65%),
    radial-gradient(40% 60% at 50% 50%, rgba(34,211,238,0.1), transparent 70%);
}
.viz-crypto-orbits{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:160px;height:160px;
  z-index:1;
  pointer-events:none;
}
.viz-crypto-orbit{
  position:absolute;
  top:50%;left:50%;
  border-radius:50%;
  border:1.5px dashed rgba(34,211,238,0.35);
  transform:translate(-50%,-50%);
}
.viz-crypto-orbit--1{
  width:90px;height:90px;
  border-color:rgba(34,211,238,0.5);
  animation:orbitSpin 12s linear infinite;
}
.viz-crypto-orbit--2{
  width:130px;height:130px;
  border-color:rgba(167,139,250,0.4);
  animation:orbitSpin 18s linear infinite reverse;
}
.viz-crypto-orbit--3{
  width:170px;height:170px;
  border-color:rgba(244,196,90,0.3);
  animation:orbitSpin 24s linear infinite;
}
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.viz-crypto-coin{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #f8d568 0%, #f4a93a 40%, #d68920 75%, #a86915 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 8px 28px rgba(244,169,58,0.5),
    0 0 36px rgba(244,169,58,0.4),
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.25);
  z-index:3;
  animation:coinPulse 3s ease-in-out infinite;
}
@keyframes coinPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 8px 28px rgba(244,169,58,0.5), 0 0 36px rgba(244,169,58,0.4), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.25)}
  50%{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 12px 40px rgba(244,169,58,0.7), 0 0 50px rgba(244,169,58,0.6), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.25)}
}
.viz-crypto-coin__face{
  font-family:'Cairo',sans-serif;font-weight:900;font-size:32px;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
  line-height:1;
}

.viz-crypto-nodes{position:absolute;inset:0;z-index:2;pointer-events:none}
.viz-crypto-node{
  position:absolute;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg, rgba(34,211,238,0.25), rgba(15,127,224,0.15));
  border:1.5px solid rgba(34,211,238,0.6);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#22D3EE;
  font-family:'Cairo',sans-serif;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(34,211,238,0.3);
}
.viz-crypto-node--1{top:18%;left:22%;animation:nodeFloat 4s ease-in-out infinite}
.viz-crypto-node--2{top:24%;right:22%;animation:nodeFloat 4s ease-in-out infinite .8s}
.viz-crypto-node--3{bottom:22%;left:24%;animation:nodeFloat 4s ease-in-out infinite 1.6s}
.viz-crypto-node--4{bottom:18%;right:20%;animation:nodeFloat 4s ease-in-out infinite 2.4s}
@keyframes nodeFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.05)}
}

.viz-crypto-pulse{
  position:absolute;
  top:50%;left:50%;
  width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(244,169,58,0.6);
  transform:translate(-50%,-50%);
  z-index:1;
  animation:cryptoPulseRing 2.4s ease-out infinite;
}
@keyframes cryptoPulseRing{
  0%{opacity:1;width:64px;height:64px}
  100%{opacity:0;width:160px;height:160px}
}

/* ===== CARD BODY ===== */
.pcard__body{
  position:relative;
  padding:22px 22px 24px;
  display:flex;flex-direction:column;
  flex:1;
  z-index:2;
}
.pcard__tag{
  display:inline-block;
  align-self:flex-start;
  padding:4px 10px;border-radius:5px;
  background:linear-gradient(135deg, rgba(34,211,238,0.15), rgba(15,127,224,0.1));
  border:1px solid rgba(34,211,238,0.4);
  font-family:"JetBrains Mono",monospace;
  font-size:10px;font-weight:800;color:#22D3EE;
  letter-spacing:1px;
  margin-bottom:12px;
}
.pcard__body h3{
  font-family:'Cairo',sans-serif;font-size:21px;font-weight:800;color:#fff;
  margin-bottom:10px;line-height:1.3;
}
.pcard__body p{
  font-size:13.5px;line-height:1.7;color:#cfd5e6;
  margin-bottom:16px;
}
.pcard__body p b{color:#22D3EE;font-weight:700}

.pcard__feats{margin-bottom:20px;list-style:none;padding:0}
.pcard__feats li{
  position:relative;
  padding:8px 18px 8px 0;
  font-size:13px;color:#cfd5e6;
  border-bottom:1px dashed rgba(255,255,255,0.06);
}
.pcard__feats li:last-child{border-bottom:0}
.pcard__feats li::before{
  content:"";position:absolute;right:0;top:14px;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#22D3EE,#0EA5E9);
  box-shadow:0 0 8px rgba(34,211,238,0.6);
}

.pcard__cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:9px;
  background:linear-gradient(135deg, rgba(34,211,238,0.12), rgba(15,127,224,0.08));
  border:1.5px solid rgba(34,211,238,0.4);
  color:#22D3EE;font-weight:800;font-size:13.5px;
  text-decoration:none;
  align-self:flex-start;
  margin-top:auto;
  transition:all .25s ease;
}
.pcard__cta svg{transition:transform .25s ease}
.pcard__cta:hover{
  background:linear-gradient(135deg, #22D3EE, #0EA5E9);
  border-color:transparent;
  color:#0a1024;
  box-shadow:0 8px 22px rgba(34,211,238,0.4);
  transform:translateY(-2px);
}
.pcard__cta:hover svg{transform:translateX(-4px)}

/* ---------- PLATFORMS ---------- */
.platforms{
  background:linear-gradient(180deg,#040813 0%,#070d1f 100%);
  position:relative;
}
.platforms::before{
  content:"";position:absolute;top:10%;left:-200px;width:500px;height:500px;
  background:radial-gradient(circle,rgba(34,211,238,.06),transparent 70%);
  z-index:0;
}
.platforms__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  position:relative;z-index:1;
}
.platform-card--feature{
  grid-column:span 2;grid-row:span 2;
  display:flex;flex-direction:column;
  padding:0;overflow:hidden;
}
.platform-card{
  background:linear-gradient(180deg,#0d1428,#0a1024);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;transition:all .3s;
  display:flex;flex-direction:column;
}
.platform-card:hover{border-color:rgba(34,211,238,.4);transform:translateY(-4px)}
.platform-card__visual{
  background:linear-gradient(135deg,#0f1730,#1a2548);
  padding:30px;flex:1;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.platform-card__visual::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%,rgba(34,211,238,.15),transparent 60%);
}
.screen{
  position:relative;z-index:1;
  width:100%;max-width:380px;aspect-ratio:16/10;
  background:#0a0e1c;border:1px solid #2a3556;border-radius:12px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.screen__bar{
  display:flex;gap:5px;padding:8px 12px;background:#141b32;border-bottom:1px solid #2a3556;
}
.screen__bar span{width:10px;height:10px;border-radius:50%;background:#3a4670}
.screen__chart{padding:14px;height:calc(100% - 30px)}
.screen__chart svg{width:100%;height:100%}
.platform-card__body{padding:30px}
.platform-card__body .badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:4px 10px;background:rgba(34,211,238,.15);color:var(--gold);
  border-radius:99px;margin-bottom:12px;
}
.platform-card__body h3{
  font-family:'Cairo',sans-serif;font-size:28px;font-weight:800;color:#fff;
  margin-bottom:10px;
}
.platform-card__body p{color:var(--text-dim);margin-bottom:18px}
.platform-card__feats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.platform-card__feats span{
  font-size:12px;padding:5px 12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:99px;color:#cfd5e6;
}
.platform-card__head{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.platform-card__head svg{
  width:42px;height:42px;color:var(--gold);
  padding:8px;background:rgba(34,211,238,.1);border-radius:10px;
  flex-shrink:0;
}
.platform-card__head h3{
  font-family:'Cairo',sans-serif;font-size:19px;font-weight:800;color:#fff;
}
.platform-card>p{color:var(--text-dim);font-size:14px;margin-bottom:14px;flex:1}
.platform-card>a{color:var(--gold);font-weight:700;font-size:14px;align-self:flex-start}
.platform-card>a:hover{transform:translateX(-4px);display:inline-block}

/* ---------- TIERS / ACCOUNT LEVELS ---------- */
.tiers{
  background:radial-gradient(120% 90% at 50% 0%, #060c20 0%, #04081a 60%, #03060f 100%);
  position:relative;overflow:hidden;
}
.tiers::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(40% 60% at 15% 25%, rgba(34,211,238,0.06), transparent 60%),
    radial-gradient(40% 60% at 85% 75%, rgba(244,196,90,0.05), transparent 60%);
  pointer-events:none;
}
.tiers .container{position:relative;z-index:1}

.tiers__slider{position:relative;padding:0 60px;margin-top:36px}
.tslider__viewport{
  overflow:hidden;border-radius:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
}
.tslider__track{
  display:flex;gap:22px;
  transition:transform .6s cubic-bezier(.65,.05,.36,1);
  will-change:transform;padding:14px 6px;align-items:stretch;
}
.tslider__track > .tcard{flex:0 0 calc((100% - 22px * 2) / 3);min-width:0}

.tslider__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg, rgba(34,211,238,0.2), rgba(15,127,224,0.14));
  border:1.5px solid rgba(34,211,238,0.45);
  color:#22D3EE;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:all .25s ease;
  box-shadow:0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.tslider__nav:hover{
  background:linear-gradient(135deg, rgba(34,211,238,0.4), rgba(15,127,224,0.28));
  border-color:rgba(34,211,238,0.75);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 8px 28px rgba(34,211,238,0.4);
}
.tslider__nav:active{transform:translateY(-50%) scale(.96)}
.tslider__nav:disabled{opacity:.32;cursor:not-allowed;pointer-events:none}
.tslider__nav--prev{right:0}
.tslider__nav--next{left:0}

.tslider__dots{display:flex;gap:10px;justify-content:center;margin-top:28px}
.tslider__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:none;cursor:pointer;padding:0;
  transition:all .3s ease;
}
.tslider__dot:hover{background:rgba(34,211,238,0.5)}
.tslider__dot.active{
  background:linear-gradient(90deg,#22D3EE,#0EA5E9);
  width:30px;border-radius:6px;
  box-shadow:0 0 14px rgba(34,211,238,0.6);
}

/* ===== TIER CARD BASE ===== */
.tcard{
  position:relative;
  padding:30px 24px 22px;
  background:linear-gradient(180deg, rgba(20,28,52,0.85), rgba(8,14,32,0.95));
  border:1.5px solid rgba(255,255,255,0.06);
  border-radius:20px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:all .35s cubic-bezier(.65,.05,.36,1);
  isolation:isolate;
}
.tcard__bg{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  opacity:0.5;
  transition:opacity .4s ease;
}
.tcard:hover{
  transform:translateY(-10px);
  box-shadow:0 12px 28px -12px rgba(0,0,0,0.55);
}
.tcard:hover .tcard__bg{opacity:0.85}
.tcard > *:not(.tcard__bg){position:relative;z-index:1}

/* MEDAL */
.tcard__medal{
  width:84px;height:84px;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.tcard__medal svg{width:100%;height:100%;display:block}
.tcard__medal::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,0.22), transparent 70%);
  z-index:-1;
  animation:medalPulse 3s ease-in-out infinite;
}
@keyframes medalPulse{
  0%,100%{opacity:0.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.12)}
}

/* LEVEL BADGE */
.tcard__lvlbadge{
  display:inline-block;
  align-self:center;
  padding:4px 12px;border-radius:30px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px;font-weight:800;color:rgba(255,255,255,0.75);
  letter-spacing:1px;
  margin-bottom:12px;
}
.tcard__title{
  font-family:'Cairo',sans-serif;
  font-size:24px;font-weight:900;color:#fff;
  text-align:center;margin-bottom:18px;
  line-height:1.2;
}

/* DEPOSIT */
.tcard__deposit{
  text-align:center;
  padding:16px 12px;border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.06);
  margin-bottom:18px;
}
.tcard__deposit-lbl{
  display:block;
  font-size:11.5px;color:var(--text-dim);font-weight:600;
  letter-spacing:0.5px;margin-bottom:4px;
}
.tcard__deposit-val{
  display:block;
  font-family:'Cairo',sans-serif;
  font-size:32px;font-weight:900;line-height:1;
  letter-spacing:-0.5px;
}

/* FEATURES */
.tcard__feats{
  list-style:none;padding:0;margin:0 0 16px;
  flex:1;
}
.tcard__feats li{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 0;
  font-size:13px;color:#cfd5e6;line-height:1.5;
  border-bottom:1px dashed rgba(255,255,255,0.06);
}
.tcard__feats li:last-child{border-bottom:0}
.tcard__feats li b{color:#22D3EE;font-weight:800}
.tcard__feats .check{
  flex-shrink:0;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,#22D3EE,#0EA5E9);
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:2px;
  position:relative;
  box-shadow:0 0 8px rgba(34,211,238,0.4);
}
.tcard__feats .check::after{
  content:"";
  width:8px;height:4px;
  border-left:2px solid #0a1024;border-bottom:2px solid #0a1024;
  transform:rotate(-45deg) translateY(-1px);
}

/* BONUS BADGE */
.tcard__bonus{
  display:inline-flex;align-items:center;gap:6px;
  align-self:center;
  padding:7px 14px;border-radius:30px;
  background:linear-gradient(135deg, rgba(34,211,238,0.18), rgba(15,127,224,0.12));
  border:1px solid rgba(34,211,238,0.4);
  color:#22D3EE;font-size:12px;font-weight:800;
  letter-spacing:0.3px;
  margin-bottom:14px;
}
.tcard__bonus svg{flex-shrink:0}

/* CTA */
.tcard__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:11px;
  background:linear-gradient(135deg, rgba(34,211,238,0.14), rgba(15,127,224,0.1));
  border:1.5px solid rgba(34,211,238,0.45);
  color:#22D3EE;font-weight:800;font-size:13.5px;
  text-decoration:none;
  transition:all .25s ease;
  margin-bottom:14px;
}
.tcard__cta:hover{
  background:linear-gradient(135deg, #22D3EE, #0EA5E9);
  border-color:transparent;color:#0a1024;
  box-shadow:0 8px 22px rgba(34,211,238,0.4);
  transform:translateY(-2px);
}
.tcard__cta svg{transition:transform .25s ease}
.tcard__cta:hover svg{transform:translateX(-4px)}

/* LIVE COUNT */
.tcard__live{
  display:flex;align-items:center;gap:8px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:11.5px;
}
.tcard__live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c993;
  box-shadow:0 0 10px rgba(34,201,147,0.85);
  animation:liveDot 1.5s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes liveDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.85)}
}
.tcard__live-count{
  font-family:"JetBrains Mono",monospace;
  font-size:13px;font-weight:800;color:#fff;
  letter-spacing:0.3px;
  transition:color .25s ease;
}
.tcard__live-count.bumped{color:#22c993}
.tcard__live-lbl{color:var(--text-dim);font-weight:600;line-height:1.2}

/* ===== TIER VARIANTS ===== */

/* Beginner */
.tcard--beginner .tcard__bg{
  background:radial-gradient(80% 60% at 50% 0%, rgba(34,211,238,0.18), transparent 65%);
}
.tcard--beginner{border-color:rgba(34,211,238,0.18)}
.tcard--beginner:hover{border-color:rgba(34,211,238,0.5);box-shadow:0 12px 28px -12px rgba(0,0,0,0.55)}
.tcard--beginner .tcard__deposit-val{color:#22D3EE}

/* Silver */
.tcard--silver .tcard__bg{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(220,225,235,0.16), transparent 65%),
    linear-gradient(180deg, rgba(150,160,180,0.05), transparent 70%);
}
.tcard--silver{border-color:rgba(200,210,225,0.18)}
.tcard--silver:hover{border-color:rgba(200,210,225,0.5);box-shadow:0 12px 28px -12px rgba(0,0,0,0.55)}
.tcard--silver .tcard__deposit-val{
  background:linear-gradient(180deg, #f0f0f8 0%, #c8c8d0 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tcard--silver .tcard__lvlbadge{
  background:linear-gradient(135deg, rgba(220,225,235,0.18), rgba(150,160,180,0.08));
  border-color:rgba(220,225,235,0.35);color:#e8ebef;
}

/* Gold */
.tcard--gold .tcard__bg{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(244,196,90,0.18), transparent 65%),
    linear-gradient(180deg, rgba(180,140,50,0.06), transparent 70%);
}
.tcard--gold{border-color:rgba(244,196,90,0.25)}
.tcard--gold:hover{border-color:rgba(244,196,90,0.55);box-shadow:0 12px 28px -12px rgba(0,0,0,0.55)}
.tcard--gold .tcard__deposit-val{
  background:linear-gradient(180deg, #f8d568 0%, #f4a93a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tcard--gold .tcard__lvlbadge{
  background:linear-gradient(135deg, rgba(244,196,90,0.18), rgba(180,140,50,0.08));
  border-color:rgba(244,196,90,0.4);color:#f4d27a;
}
.tcard--gold .tcard__bonus{
  background:linear-gradient(135deg, rgba(244,196,90,0.18), rgba(180,140,50,0.1));
  border-color:rgba(244,196,90,0.4);color:#f4d27a;
}

/* Platinum */
.tcard--platinum .tcard__bg{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(168,189,224,0.18), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(34,211,238,0.08), transparent 70%);
}
.tcard--platinum{border-color:rgba(168,189,224,0.22)}
.tcard--platinum:hover{border-color:rgba(168,189,224,0.55);box-shadow:0 12px 28px -12px rgba(0,0,0,0.55)}
.tcard--platinum .tcard__deposit-val{
  background:linear-gradient(180deg, #e8eef8 0%, #a4b5cc 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tcard--platinum .tcard__lvlbadge{
  background:linear-gradient(135deg, rgba(168,189,224,0.18), rgba(90,112,144,0.08));
  border-color:rgba(168,189,224,0.4);color:#e8eef8;
}

/* VIP */
.tcard--vip{
  background:linear-gradient(180deg, rgba(20,18,42,0.95), rgba(10,8,28,0.98));
  border-color:rgba(244,196,90,0.45);
  box-shadow:0 12px 28px -12px rgba(0,0,0,0.6);
}
.tcard--vip .tcard__bg{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(244,196,90,0.22), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(34,211,238,0.12), transparent 70%);
}
.tcard--vip:hover{border-color:rgba(244,196,90,0.7);box-shadow:0 14px 32px -12px rgba(0,0,0,0.7)}
.tcard--vip .tcard__featured{
  position:absolute;top:14px;right:-30px;
  padding:5px 36px;
  background:linear-gradient(135deg, #f4a93a, #d68920);
  color:#1a1408;font-size:10.5px;font-weight:900;letter-spacing:1.5px;
  transform:rotate(35deg);
  box-shadow:0 4px 14px rgba(244,169,58,0.4);
  z-index:3;
}
.tcard--vip .tcard__deposit{
  background:linear-gradient(180deg, rgba(244,196,90,0.08), rgba(244,169,58,0.04));
  border-color:rgba(244,196,90,0.25);
}
.tcard--vip .tcard__deposit-val{
  background:linear-gradient(180deg, #f8d568 0%, #f4a93a 60%, #d68920 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tcard--vip .tcard__lvlbadge{
  background:linear-gradient(135deg, rgba(244,196,90,0.22), rgba(180,140,50,0.1));
  border-color:rgba(244,196,90,0.5);color:#f4d27a;
}
.tcard--vip .tcard__bonus--vip{
  background:linear-gradient(135deg, rgba(244,196,90,0.22), rgba(180,140,50,0.12));
  border-color:rgba(244,196,90,0.5);color:#f8d568;
}
.tcard--vip .tcard__cta--vip{
  background:linear-gradient(135deg, #f4a93a, #d68920);
  border-color:transparent;color:#1a1408;
  box-shadow:0 6px 20px rgba(244,169,58,0.35);
}
.tcard--vip .tcard__cta--vip:hover{
  background:linear-gradient(135deg, #f8d568, #f4a93a);
  box-shadow:0 10px 28px rgba(244,169,58,0.55);
  color:#1a1408;
}

@media (max-width:1100px){
  .tslider__track > .tcard{flex:0 0 calc((100% - 22px) / 2)}
  .tiers__slider{padding:0 50px}
  .tslider__track{gap:18px}
}
@media (max-width:768px){
  .tiers__slider{padding:0 8px;margin-top:24px}
  .tslider__track{gap:14px}
  .tslider__track > .tcard{flex:0 0 100%}
  .tslider__viewport{-webkit-mask-image:none;mask-image:none;border-radius:18px}
  .tslider__nav{
    width:40px;height:40px;
    background:linear-gradient(135deg, rgba(34,211,238,0.32), rgba(15,127,224,0.22));
  }
  .tslider__nav--prev{right:-2px}
  .tslider__nav--next{left:-2px}
  .tslider__dots{margin-top:20px}
  .tcard{padding:24px 18px 18px;border-radius:16px}
  .tcard__medal{width:72px;height:72px;margin-bottom:12px}
  .tcard__title{font-size:21px;margin-bottom:16px}
  .tcard__deposit{padding:14px 10px;margin-bottom:14px}
  .tcard__deposit-val{font-size:28px}
  .tcard__feats li{font-size:12.5px;padding:7px 0}
  .tcard__feats .check{width:16px;height:16px}
  .tcard__cta{font-size:13px;padding:11px 16px;margin-bottom:12px}
}

/* ---------- WHY US ---------- */
.why{background:linear-gradient(180deg,#040813 0%,#080d1f 100%)}
.why__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.why-card{
  position:relative;
  padding:36px 30px;
  background:rgba(13,20,40,.6);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:all .3s;
}
.why-card:hover{
  border-color:rgba(34,211,238,.4);
  background:rgba(34,211,238,.04);
  transform:translateY(-4px);
}
.why-card__num{
  font-family:'Cairo',sans-serif;
  font-size:54px;font-weight:900;
  background:linear-gradient(180deg,rgba(34,211,238,.5),rgba(34,211,238,.05));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;margin-bottom:14px;
}
.why-card h3{
  font-family:'Cairo',sans-serif;font-size:20px;font-weight:800;color:#fff;
  margin-bottom:10px;
}
.why-card p{font-size:14.5px;color:var(--text-dim);line-height:1.7}

/* ---------- AWARDS / ACHIEVEMENTS ---------- */
.awards{
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(244,196,90,0.06), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(34,211,238,0.05), transparent 70%),
    linear-gradient(180deg, #040813 0%, #060c20 50%, #040813 100%);
  position:relative;overflow:hidden;
}
.awards__bg{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
}
.awards__bg::before,
.awards__bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(244,196,90,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 76% 38%, rgba(34,211,238,0.45), transparent 50%),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 78%, rgba(244,196,90,0.5), transparent 50%),
    radial-gradient(1px 1px at 12% 84%, rgba(34,211,238,0.45), transparent 50%);
  background-size:480px 480px;
}
.awards__bg::after{
  background-size:380px 380px;
  background-position:140px 90px;
  opacity:0.6;
}
.awards__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.2;
  pointer-events:none;
}
.awards__orb--1{
  width:340px;height:340px;
  background:radial-gradient(circle, rgba(244,196,90,0.45), transparent 65%);
  top:8%;left:6%;
  animation:awardsOrb1 18s ease-in-out infinite;
}
.awards__orb--2{
  width:300px;height:300px;
  background:radial-gradient(circle, rgba(34,211,238,0.4), transparent 65%);
  bottom:10%;right:8%;
  animation:awardsOrb2 22s ease-in-out infinite;
}
.awards__orb--3{
  width:240px;height:240px;
  background:radial-gradient(circle, rgba(244,196,90,0.32), transparent 65%);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:awardsOrb3 26s ease-in-out infinite;
}
@keyframes awardsOrb1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,30px) scale(1.1)}
  66%{transform:translate(-30px,50px) scale(0.95)}
}
@keyframes awardsOrb2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-50px,-40px) scale(1.15)}
}
@keyframes awardsOrb3{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.4}
  50%{transform:translate(-50%,-50%) scale(1.25);opacity:0.55}
}
.awards .container{position:relative;z-index:1}

/* ===== MARQUEE STRIP ===== */
.awards__marquee{
  direction:ltr;
  position:relative;
  overflow:hidden;
  margin-top:50px;
  padding:8px 0;
  -webkit-mask:linear-gradient(90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%);
          mask:linear-gradient(90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%);
}
.awards__track{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  padding:18px 0;
  animation:awardsScroll 60s linear infinite;
  will-change:transform;
}
.awards__marquee:hover .awards__track,
.awards__marquee:focus-within .awards__track{
  animation-play-state:paused;
}
.awards__track > .award-card{
  direction:rtl;
  flex:0 0 300px;
  margin-inline-end:24px;
}
@keyframes awardsScroll{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion: reduce){
  .awards__track{animation:none;justify-content:center;flex-wrap:wrap;width:auto}
  .awards__marquee{-webkit-mask:none;mask:none}
}

.section-head__sub{
  font-size:15px;color:var(--text-dim);
  margin-top:14px;line-height:1.6;
  max-width:620px;margin-inline:auto;
}

/* ===== AWARD CARD ===== */
.award-card{
  position:relative;
  padding:42px 28px 30px;
  background:
    linear-gradient(180deg, rgba(20,28,52,0.85) 0%, rgba(8,14,32,0.95) 100%);
  border:1.5px solid rgba(244,196,90,0.18);
  border-radius:22px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s cubic-bezier(.65,.05,.36,1),
             border-color .45s ease,
             box-shadow .45s ease;
  cursor:default;
}
.award-card::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(244,196,90,0.14), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(34,211,238,0.07), transparent 70%);
  z-index:-1;
  opacity:0.65;
  transition:opacity .45s ease;
}
.award-card::after{
  content:"";
  position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(135deg,
    rgba(244,196,90,0.5) 0%,
    transparent 35%,
    transparent 65%,
    rgba(34,211,238,0.4) 100%);
  opacity:0;
  z-index:-1;
  transition:opacity .45s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1.5px;
}
.award-card:hover{
  transform:translateY(-12px);
  border-color:rgba(244,196,90,0.45);
  box-shadow:
    0 25px 65px rgba(0,0,0,0.6),
    0 0 60px rgba(244,196,90,0.18),
    0 0 30px rgba(34,211,238,0.1);
}
.award-card:hover::before{opacity:1}
.award-card:hover::after{opacity:1}

/* Shine sweep on hover */
.award-card__shine{
  position:absolute;
  top:-50%;left:-100%;
  width:60%;height:200%;
  background:linear-gradient(110deg,
    transparent 0%,
    transparent 40%,
    rgba(244,196,90,0.18) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 65%,
    transparent 100%);
  transform:rotate(15deg);
  z-index:0;
  pointer-events:none;
  transition:left .9s cubic-bezier(.4,0,.2,1);
}
.award-card:hover .award-card__shine{left:200%}

/* Particles */
.award-card__particles{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.award-card__particles i{
  position:absolute;bottom:-6px;
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle, rgba(244,196,90,0.95), rgba(244,196,90,0));
  opacity:0;
  animation:awardParticle 5s ease-in-out infinite;
  filter:blur(0.3px);
}
.award-card__particles i:nth-child(1){left:12%;animation-delay:0s;animation-duration:4.5s}
.award-card__particles i:nth-child(2){left:28%;animation-delay:1.2s;animation-duration:5.2s}
.award-card__particles i:nth-child(3){left:48%;animation-delay:2.4s;animation-duration:4.8s;background:radial-gradient(circle, rgba(34,211,238,0.85), rgba(34,211,238,0))}
.award-card__particles i:nth-child(4){left:65%;animation-delay:0.6s;animation-duration:5s}
.award-card__particles i:nth-child(5){left:80%;animation-delay:1.8s;animation-duration:4.3s}
.award-card__particles i:nth-child(6){left:92%;animation-delay:3s;animation-duration:5.5s;background:radial-gradient(circle, rgba(34,211,238,0.85), rgba(34,211,238,0))}

@keyframes awardParticle{
  0%{opacity:0;transform:translateY(0) scale(0.5)}
  15%{opacity:0.95}
  85%{opacity:0.6}
  100%{opacity:0;transform:translateY(-260px) scale(1.3)}
}

/* Ribbon (year) */
.award-card__ribbon{
  position:absolute;top:18px;right:18px;
  z-index:3;
  padding:6px 14px;
  background:
    linear-gradient(135deg, #fde68a 0%, #f4a93a 50%, #b87a1f 100%);
  border-radius:30px;
  box-shadow:
    0 4px 16px rgba(244,169,58,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(124,58,8,0.3);
  font-family:'Cairo',sans-serif;
  font-weight:900;font-size:12.5px;
  color:#1a1408;
  letter-spacing:1.5px;
  transition:transform .35s ease;
}
.award-card:hover .award-card__ribbon{
  transform:scale(1.1) rotate(-3deg);
}
.award-card__ribbon::before{
  content:"";
  position:absolute;inset:0;
  border-radius:30px;
  background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
}
.award-card:hover .award-card__ribbon::before{
  opacity:1;
  animation:ribbonShine 1.5s ease;
}
@keyframes ribbonShine{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* Trophy container */
.award-card__trophy{
  position:relative;
  width:130px;height:150px;
  margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  perspective:600px;
}
.award-card__halo{
  position:absolute;inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,196,90,0.28), transparent 65%);
  z-index:-1;
  animation:awardHalo 3.5s ease-in-out infinite;
  pointer-events:none;
}
.award-card__halo::before{
  content:"";
  position:absolute;inset:8px;
  border-radius:50%;
  border:1.5px dashed rgba(244,196,90,0.18);
  animation:awardRing 22s linear infinite;
}
.award-card__halo::after{
  content:"";
  position:absolute;inset:18px;
  border-radius:50%;
  border:1px solid rgba(34,211,238,0.15);
  animation:awardRing 18s linear infinite reverse;
}
@keyframes awardHalo{
  0%,100%{opacity:0.55;transform:scale(1)}
  50%{opacity:0.9;transform:scale(1.12)}
}
@keyframes awardRing{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.trophy-svg{
  width:100%;height:100%;
  display:block;
  filter:drop-shadow(0 10px 18px rgba(244,169,58,0.32))
         drop-shadow(0 0 8px rgba(244,196,90,0.2));
  transform-style:preserve-3d;
  animation:trophyFloat 4.5s ease-in-out infinite;
  transition:transform .5s cubic-bezier(.65,.05,.36,1),
             filter .5s ease;
}
.award-card:hover .trophy-svg{
  filter:drop-shadow(0 14px 24px rgba(244,169,58,0.5))
         drop-shadow(0 0 16px rgba(244,196,90,0.4));
}
.award-card:nth-child(odd):hover .trophy-svg{
  animation:trophyFloat 4.5s ease-in-out infinite, trophyTiltL .8s ease-out forwards;
}
.award-card:nth-child(even):hover .trophy-svg{
  animation:trophyFloat 4.5s ease-in-out infinite, trophyTiltR .8s ease-out forwards;
}
@keyframes trophyFloat{
  0%,100%{transform:translateY(0) rotateZ(0deg)}
  50%{transform:translateY(-8px) rotateZ(1deg)}
}
@keyframes trophyTiltL{
  to{transform:translateY(-4px) rotateY(-12deg) rotateZ(-2deg) scale(1.08)}
}
@keyframes trophyTiltR{
  to{transform:translateY(-4px) rotateY(12deg) rotateZ(2deg) scale(1.08)}
}

/* Title + org */
.award-card__title{
  font-family:'Cairo',sans-serif;
  font-size:16.5px;font-weight:800;
  color:#fff;
  margin-bottom:10px;
  line-height:1.45;
  position:relative;z-index:2;
  min-height:48px;
  display:flex;align-items:center;justify-content:center;
  transition:color .35s ease;
}
.award-card:hover .award-card__title{color:#fde68a}

.award-card__org{
  font-size:13px;
  color:var(--text-dim);
  position:relative;z-index:2;
  font-weight:600;
  letter-spacing:0.3px;
  font-family:'JetBrains Mono', monospace;
}
.award-card__org::before{
  content:"";
  display:block;
  width:32px;height:2px;
  background:linear-gradient(90deg, transparent, rgba(244,196,90,0.7), transparent);
  margin:0 auto 10px;
  transition:width .4s ease;
}
.award-card:hover .award-card__org::before{
  width:60px;
  background:linear-gradient(90deg, transparent, rgba(244,196,90,1), transparent);
}

/* Responsive */
@media (max-width:1100px){
  .awards__marquee{margin-top:40px}
  .awards__track > .award-card{flex:0 0 280px;margin-inline-end:20px}
  .award-card{padding:38px 24px 28px;border-radius:20px}
  .award-card__trophy{width:120px;height:140px;margin-bottom:18px}
  .awards__orb{filter:blur(50px)}
  .awards__orb--1{width:280px;height:280px}
  .awards__orb--2{width:240px;height:240px}
}
@media (max-width:640px){
  .awards__marquee{
    margin-top:32px;
    -webkit-mask:linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
            mask:linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  .awards__track{animation-duration:45s;padding:14px 0}
  .awards__track > .award-card{flex:0 0 240px;margin-inline-end:14px}
  .award-card{padding:30px 20px 22px;border-radius:18px}
  .award-card__trophy{width:100px;height:116px;margin-bottom:14px}
  .award-card__title{font-size:14.5px;min-height:auto;margin-bottom:8px}
  .award-card__org{font-size:12px}
  .award-card__ribbon{font-size:11px;padding:5px 11px;top:12px;right:12px;letter-spacing:1px}
  .awards__orb{filter:blur(40px);opacity:0.3}
  .awards__orb--1{width:200px;height:200px}
  .awards__orb--2{width:180px;height:180px}
  .awards__orb--3{width:160px;height:160px}
  .section-head__sub{font-size:13.5px;padding:0 8px}
}

/* ---------- TOOLS ---------- */
.tools{
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(34,211,238,0.05), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(244,196,90,0.04), transparent 70%),
    linear-gradient(180deg, #040813 0%, #060c20 50%, #04081a 100%);
  position:relative;overflow:hidden;
}
.tools__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.tools__orb{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:0.16;
  pointer-events:none;
}
.tools__orb--1{
  width:380px;height:380px;
  background:radial-gradient(circle, rgba(34,211,238,0.45), transparent 60%);
  top:8%;right:6%;
  animation:toolsOrb1 20s ease-in-out infinite;
}
.tools__orb--2{
  width:320px;height:320px;
  background:radial-gradient(circle, rgba(244,196,90,0.32), transparent 60%);
  bottom:8%;left:8%;
  animation:toolsOrb2 24s ease-in-out infinite;
}
.tools__grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(34,211,238,0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34,211,238,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask:radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 80%);
          mask:radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 80%);
  opacity:0.5;
}
@keyframes toolsOrb1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-40px,30px) scale(1.12)}
}
@keyframes toolsOrb2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(50px,-30px) scale(1.1)}
}
.tools .container{position:relative;z-index:1}
.tools__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:50px;
}

/* ===== TOOL CARD ===== */
.tool-card{
  position:relative;
  background:linear-gradient(180deg, rgba(20,28,52,0.85) 0%, rgba(8,14,32,0.95) 100%);
  border:1.5px solid rgba(255,255,255,0.07);
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .4s cubic-bezier(.65,.05,.36,1),
             border-color .4s ease,
             box-shadow .4s ease;
  cursor:default;
}
.tool-card::before{
  content:"";position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(135deg,
    rgba(34,211,238,0.5) 0%,
    transparent 40%,
    transparent 60%,
    rgba(244,196,90,0.45) 100%);
  opacity:0;z-index:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1.5px;
  transition:opacity .4s ease;
  pointer-events:none;
}
.tool-card:hover{
  transform:translateY(-10px);
  border-color:rgba(34,211,238,0.4);
  box-shadow:
    0 22px 56px rgba(0,0,0,0.55),
    0 0 50px rgba(34,211,238,0.16),
    0 0 24px rgba(244,196,90,0.08);
}
.tool-card:hover::before{opacity:1}

/* VIZ AREA */
.tool-card__viz{
  position:relative;
  height:185px;
  background:
    linear-gradient(180deg, rgba(34,211,238,0.06) 0%, rgba(244,196,90,0.025) 50%, transparent 100%),
    linear-gradient(135deg, rgba(8,14,32,0.6), rgba(20,28,52,0.4));
  border-bottom:1px solid rgba(34,211,238,0.1);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tool-card__bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(34,211,238,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34,211,238,0.04) 1px, transparent 1px);
  background-size:18px 18px;
  pointer-events:none;
  -webkit-mask:radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
          mask:radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
}
.tool-card__viz::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,0.5) 100%);
  pointer-events:none;
  z-index:1;
}
.tool-card__viz::after{
  content:"";position:absolute;
  top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.06) 50%,
    transparent 70%);
  z-index:2;
  pointer-events:none;
  transition:left .9s cubic-bezier(.4,0,.2,1);
}
.tool-card:hover .tool-card__viz::after{left:200%}

.viz-svg{
  width:175px;height:130px;
  position:relative;z-index:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.4));
  transition:transform .5s cubic-bezier(.65,.05,.36,1);
}
.tool-card:hover .viz-svg{transform:scale(1.06)}

/* BODY */
.tool-card__body{padding:22px 24px 22px}
.tool-card__title{
  font-family:'Cairo',sans-serif;
  font-size:18px;font-weight:800;
  color:#fff;
  margin-bottom:8px;
  display:flex;align-items:center;gap:10px;
  transition:color .3s ease;
}
.tool-card__title::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#22D3EE,#0EA5E9);
  box-shadow:0 0 10px rgba(34,211,238,0.7);
  flex-shrink:0;
}
.tool-card:hover .tool-card__title{color:#67e8f9}
.tool-card__desc{
  font-size:13.5px;color:var(--text-dim);
  line-height:1.65;
  margin-bottom:16px;
  min-height:44px;
}
.tool-card__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:800;
  color:#22D3EE;
  text-decoration:none;
  letter-spacing:0.3px;
  transition:color .25s ease;
  font-family:'Cairo',sans-serif;
}
.tool-card__cta svg{
  width:14px;height:14px;
  transition:transform .3s ease;
}
.tool-card:hover .tool-card__cta{color:#fde68a}
.tool-card:hover .tool-card__cta svg{transform:translateX(-5px)}

/* ===== ANIMATIONS ===== */

/* 1. Calendar */
.cal-event{
  transform-origin:center;
  transform-box:fill-box;
  animation:calEvent 2.4s ease-in-out infinite;
}
@keyframes calEvent{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.4;transform:scale(1.5)}
}
.cal-today{
  transform-origin:center;
  transform-box:fill-box;
  animation:calToday 2.2s ease-in-out infinite;
}
@keyframes calToday{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.75;transform:scale(1.12)}
}
.tool-card[data-tool="cal"]:hover .cal-event{animation-duration:1.2s}
.tool-card[data-tool="cal"]:hover .cal-today{animation-duration:1s}

/* 2. Calculator */
.calc-glow{
  animation:calcGlow 2s ease-in-out infinite;
}
@keyframes calcGlow{
  0%,100%{opacity:1}
  50%{opacity:0.55}
}
[data-calc-num]{
  transition:fill .3s ease;
}
.tool-card[data-tool="calc"]:hover [data-calc-num]{
  animation:calcFlash .5s ease;
}
@keyframes calcFlash{
  0%,100%{fill:#22c993}
  50%{fill:#fde68a;font-size:15px}
}

/* 3. Signals */
.sig-line{
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:sigDraw 3.5s ease-in-out forwards infinite;
}
@keyframes sigDraw{
  0%{stroke-dashoffset:300}
  60%,100%{stroke-dashoffset:0}
}
.sig-buy, .sig-sell{
  transform-origin:center;
  transform-box:fill-box;
}
.sig-buy{animation:sigPulse 2.2s ease-in-out infinite}
.sig-sell{animation:sigPulse 2.2s ease-in-out infinite .8s}
@keyframes sigPulse{
  0%,100%{opacity:1;transform:translateY(0)}
  50%{opacity:0.85;transform:translateY(-2px)}
}
.tool-card[data-tool="signals"]:hover .sig-buy,
.tool-card[data-tool="signals"]:hover .sig-sell{
  animation-duration:1.2s;
}

/* 4. Technical Analyst */
.ta-line{
  stroke-dasharray:200;
  stroke-dashoffset:200;
  animation:taDraw 3s ease-out forwards infinite;
}
@keyframes taDraw{
  0%{stroke-dashoffset:200}
  60%,100%{stroke-dashoffset:0}
}
.ta-trend{
  stroke-dasharray:240;
  stroke-dashoffset:240;
  animation:taDraw 3s ease-out .6s forwards infinite;
}
.ta-pulse{
  transform-origin:center;
  transform-box:fill-box;
  animation:taPulse 1.8s ease-in-out infinite;
}
@keyframes taPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(1.7)}
}
.ta-candles rect{
  transform-origin:center bottom;
  transform-box:fill-box;
}
.tool-card[data-tool="ta"]:hover .ta-candles rect{
  animation:taCandle .6s ease-out forwards;
}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(2){animation-delay:0s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(4){animation-delay:0.05s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(6){animation-delay:0.1s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(8){animation-delay:0.15s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(10){animation-delay:0.2s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(12){animation-delay:0.25s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(14){animation-delay:0.3s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(16){animation-delay:0.35s}
.tool-card[data-tool="ta"]:hover .ta-candles rect:nth-child(18){animation-delay:0.4s}
@keyframes taCandle{
  0%{transform:scaleY(0.3);opacity:0.5}
  100%{transform:scaleY(1);opacity:1}
}

/* 5. Academy */
.ac-cap{
  transform-origin:100px 36px;
  transform-box:fill-box;
  animation:acCap 4s ease-in-out infinite;
}
@keyframes acCap{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(4deg)}
}
.ac-tassel-ball{
  transform-origin:128px 30px;
  transform-box:fill-box;
  animation:acTassel 2.5s ease-in-out infinite;
}
@keyframes acTassel{
  0%,100%{transform:translateX(-2px) rotate(-8deg)}
  50%{transform:translateX(2px) rotate(8deg)}
}
.ac-star{
  transform-origin:center;
  transform-box:fill-box;
  animation:acStar 2.5s ease-in-out infinite;
}
@keyframes acStar{
  0%,100%{opacity:0.3;transform:scale(0.7) rotate(0deg)}
  50%{opacity:1;transform:scale(1.2) rotate(180deg)}
}
.tool-card[data-tool="academy"]:hover .ac-cap{animation-duration:1.5s}
.tool-card[data-tool="academy"]:hover .ac-star{animation-duration:1.2s}

/* 6. VPS */
.vps-led{
  transform-origin:center;
  transform-box:fill-box;
  animation:vpsLed 1.4s ease-in-out infinite;
}
@keyframes vpsLed{
  0%,100%{opacity:0.4;transform:scale(0.8)}
  50%{opacity:1;transform:scale(1.2);filter:drop-shadow(0 0 4px currentColor)}
}
.vps-flow{
  stroke-dasharray:6 4;
  animation:vpsFlow 2s linear infinite;
}
@keyframes vpsFlow{
  to{stroke-dashoffset:-30}
}
.tool-card[data-tool="vps"]:hover .vps-led{animation-duration:.7s}
.tool-card[data-tool="vps"]:hover .vps-flow{animation-duration:1s}

/* Responsive */
@media (max-width:1100px){
  .tools__grid{grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
  .tool-card__viz{height:170px}
  .viz-svg{width:160px;height:118px}
}
@media (max-width:640px){
  .tools__grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .tool-card{border-radius:18px}
  .tool-card__viz{height:160px}
  .viz-svg{width:158px;height:115px}
  .tool-card__body{padding:20px 22px}
  .tool-card__title{font-size:17px}
  .tool-card__desc{font-size:13px;min-height:auto}
  .tools__orb{filter:blur(40px);opacity:0.25}
  .tools__orb--1{width:200px;height:200px}
  .tools__orb--2{width:180px;height:180px}
}

/* ============== TOOL MODAL ============== */
.tool-modal{
  position:fixed;inset:0;
  z-index:9999;
  display:none;
  align-items:flex-start;justify-content:center;
  padding:40px 20px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.tool-modal.is-open{display:flex;animation:tmFadeIn .35s cubic-bezier(.4,0,.2,1)}
@keyframes tmFadeIn{from{opacity:0}to{opacity:1}}

.tool-modal__overlay{
  position:fixed;inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(15,127,224,0.18) 0%, rgba(0,0,0,0.85) 70%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  cursor:pointer;
}
.tool-modal__panel{
  position:relative;
  width:min(1080px, 100%);
  background:linear-gradient(180deg, rgba(20,28,52,0.97) 0%, rgba(8,14,32,0.99) 100%);
  border:1.5px solid rgba(34,211,238,0.25);
  border-radius:24px;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.7),
    0 0 80px rgba(34,211,238,0.18),
    inset 0 1px 0 rgba(255,255,255,0.04);
  margin:auto;
  overflow:hidden;
  isolation:isolate;
  animation:tmPanelIn .5s cubic-bezier(.34,1.3,.64,1);
}
@keyframes tmPanelIn{
  from{opacity:0;transform:translateY(40px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.tool-modal__panel::before{
  content:"";position:absolute;inset:-1px;border-radius:24px;
  background:linear-gradient(135deg, rgba(34,211,238,0.6) 0%, transparent 35%, transparent 65%, rgba(244,196,90,0.5) 100%);
  z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1.5px;
  opacity:0.7;
}
.tool-modal__close{
  position:absolute;
  top:18px;left:18px;
  width:42px;height:42px;
  display:grid;place-items:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  z-index:5;
  transition:all .25s ease;
  backdrop-filter:blur(8px);
}
.tool-modal__close:hover{
  background:rgba(239,68,68,0.18);
  border-color:rgba(239,68,68,0.5);
  color:#fca5a5;
  transform:rotate(90deg) scale(1.1);
}
.tool-modal__close svg{width:20px;height:20px}

.tool-modal__layout{
  display:grid;grid-template-columns:1.05fr 1fr;
  min-height:540px;
}

/* VISUAL LEFT SIDE */
.tool-modal__visual{
  position:relative;
  background:
    radial-gradient(70% 50% at 50% 50%, rgba(34,211,238,0.12) 0%, transparent 70%),
    linear-gradient(135deg, rgba(13,21,48,0.7) 0%, rgba(8,14,32,0.95) 100%);
  border-left:1px solid rgba(34,211,238,0.15);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:30px;
}
.tool-modal__visual::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(34,211,238,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34,211,238,0.04) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask:radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 100%);
          mask:radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 100%);
  pointer-events:none;
}
.tool-modal__pulse{
  position:absolute;top:50%;left:50%;
  width:380px;height:380px;
  background:radial-gradient(circle, rgba(34,211,238,0.18) 0%, transparent 60%);
  border-radius:50%;
  transform:translate(-50%, -50%);
  filter:blur(40px);
  animation:tmPulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tmPulse{
  0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:0.8;transform:translate(-50%,-50%) scale(1.15)}
}
.tool-modal__hero-svg{
  width:100%;max-width:380px;height:auto;
  position:relative;z-index:1;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,0.5));
  animation:tmSvgIn .8s cubic-bezier(.34,1.3,.64,1) .2s both;
}
@keyframes tmSvgIn{
  from{opacity:0;transform:translateY(20px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* CONTENT RIGHT SIDE */
.tool-modal__content{
  padding:48px 40px 40px;
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.tool-modal__eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:10px;font-weight:800;letter-spacing:2px;
  color:#22D3EE;
  background:rgba(34,211,238,0.1);
  border:1px solid rgba(34,211,238,0.3);
  padding:5px 12px;
  border-radius:30px;
  margin-bottom:14px;
  align-self:flex-start;
  animation:tmContentIn .6s ease .3s both;
}
.tool-modal__title{
  font-family:'Cairo', sans-serif;
  font-size:30px;font-weight:900;
  color:#fff;
  line-height:1.2;
  margin-bottom:14px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  animation:tmContentIn .6s ease .35s both;
}
.tool-modal__badge{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:10px;font-weight:900;letter-spacing:1.5px;
  color:#040813;
  background:linear-gradient(135deg, #22D3EE 0%, #0F7FE0 100%);
  padding:4px 10px;
  border-radius:6px;
  vertical-align:middle;
  box-shadow:0 4px 12px rgba(34,211,238,0.4);
}
.tool-modal__badge--gold{
  background:linear-gradient(135deg, #fde68a 0%, #a06614 100%);
  box-shadow:0 4px 12px rgba(244,196,90,0.4);
}
.tool-modal__badge--ai{
  background:linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(99,102,241,0.5);
}
.tool-modal__badge--free{
  background:linear-gradient(135deg, #22c993 0%, #047857 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(34,201,147,0.4);
}
.tool-modal__lead{
  font-size:15.5px;
  color:rgba(255,255,255,0.78);
  line-height:1.8;
  margin-bottom:24px;
  animation:tmContentIn .6s ease .4s both;
}
.tool-modal__sub{
  font-family:'Cairo', sans-serif;
  font-size:13px;font-weight:800;
  color:#fde68a;
  letter-spacing:1px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(244,196,90,0.2);
  position:relative;
  animation:tmContentIn .6s ease .45s both;
}
.tool-modal__sub::after{
  content:"";position:absolute;
  bottom:-1px;right:0;width:60px;height:1px;
  background:linear-gradient(90deg, transparent, #fde68a);
}
.tool-modal__features{
  list-style:none;padding:0;margin:0 0 28px;
  display:flex;flex-direction:column;gap:12px;
}
.tool-modal__features li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:13.5px;
  color:rgba(255,255,255,0.7);
  line-height:1.65;
  padding:10px 14px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:10px;
  transition:all .25s ease;
  animation:tmContentIn .6s ease both;
}
.tool-modal__features li:nth-child(1){animation-delay:.5s}
.tool-modal__features li:nth-child(2){animation-delay:.55s}
.tool-modal__features li:nth-child(3){animation-delay:.6s}
.tool-modal__features li:nth-child(4){animation-delay:.65s}
.tool-modal__features li:nth-child(5){animation-delay:.7s}
.tool-modal__features li:nth-child(6){animation-delay:.75s}
.tool-modal__features li:hover{
  background:rgba(34,211,238,0.05);
  border-color:rgba(34,211,238,0.2);
  transform:translateX(-4px);
}
.tool-modal__features li strong{
  color:#fff;font-weight:800;
  display:block;margin-bottom:2px;
}
.tool-modal__feature-icon{
  flex-shrink:0;
  display:grid;place-items:center;
  width:18px;height:18px;
  font-size:8px;
  color:#22D3EE;
  background:linear-gradient(135deg, rgba(34,211,238,0.18) 0%, rgba(15,127,224,0.06) 100%);
  border:1px solid rgba(34,211,238,0.4);
  border-radius:50%;
  margin-top:3px;
}
.tool-modal__actions{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-top:auto;
  padding-top:18px;
  animation:tmContentIn .6s ease .8s both;
}
.tool-modal__cta-primary{
  display:inline-flex;align-items:center;gap:8px;
}
.tool-modal__cta-primary svg{
  width:14px;height:14px;
  transition:transform .3s ease;
}
.tool-modal__cta-primary:hover svg{transform:translateX(-5px)}

@keyframes tmContentIn{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== Hero SVG inner animations ===== */
.mh-event{transform-origin:center;transform-box:fill-box;animation:mhPulse 2.4s ease-in-out infinite}
.mh-today{transform-origin:center;transform-box:fill-box;animation:mhTodayPulse 2.2s ease-in-out infinite}
@keyframes mhPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}
@keyframes mhTodayPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.15)}}
.mh-notif{transform-origin:center;transform-box:fill-box;animation:mhFloat 3.5s ease-in-out infinite}
.mh-card-event{transform-origin:center;transform-box:fill-box;animation:mhFloat 3.5s ease-in-out infinite 1s}
@keyframes mhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.mh-glow{animation:mhGlow 2s ease-in-out infinite}
@keyframes mhGlow{0%,100%{opacity:1}50%{opacity:.55}}
.mh-calc-num{animation:mhFlash 3s ease-in-out infinite}
@keyframes mhFlash{0%,100%{fill:#22c993}50%{fill:#fde68a}}
.mh-bubble{transform-origin:center;transform-box:fill-box;animation:mhBubble 3s ease-in-out infinite}
@keyframes mhBubble{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-3px);opacity:.85}}

.mh-line{stroke-dasharray:400;stroke-dashoffset:400;animation:mhDraw 4s ease-in-out infinite forwards}
@keyframes mhDraw{0%{stroke-dashoffset:400}55%,100%{stroke-dashoffset:0}}
.mh-sig-marker{transform-origin:center;transform-box:fill-box;animation:mhMarkerPulse 2.4s ease-in-out infinite}
@keyframes mhMarkerPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
.mh-tg{transform-origin:center;transform-box:fill-box;animation:mhFloat 3.5s ease-in-out infinite .6s}
.mh-stat{transform-origin:center;transform-box:fill-box;animation:mhStatIn 3s ease-out infinite}
@keyframes mhStatIn{0%{opacity:0;transform:scale(.8)}30%,100%{opacity:1;transform:scale(1)}}
.mh-ring{animation:mhRingDraw 3s ease-out infinite}
@keyframes mhRingDraw{0%{stroke-dashoffset:138}40%,100%{stroke-dashoffset:30}}

.mh-ta-line{stroke-dasharray:240;stroke-dashoffset:240;animation:mhDraw 3.5s ease-out infinite forwards}
.mh-ta-trend{stroke-dasharray:280;stroke-dashoffset:280;animation:mhDraw 4s ease-out .8s infinite forwards}
.mh-ta-pulse{transform-origin:center;transform-box:fill-box;animation:mhTodayPulse 1.6s ease-in-out infinite}
.mh-candles rect{transform-origin:center bottom;transform-box:fill-box;animation:mhCandleRise .8s ease-out backwards}
.mh-candles rect:nth-of-type(1){animation-delay:0s}
.mh-candles rect:nth-of-type(2){animation-delay:.05s}
.mh-candles rect:nth-of-type(3){animation-delay:.1s}
.mh-candles rect:nth-of-type(4){animation-delay:.15s}
.mh-candles rect:nth-of-type(5){animation-delay:.2s}
.mh-candles rect:nth-of-type(6){animation-delay:.25s}
.mh-candles rect:nth-of-type(7){animation-delay:.3s}
.mh-candles rect:nth-of-type(8){animation-delay:.35s}
.mh-candles rect:nth-of-type(9){animation-delay:.4s}
.mh-candles rect:nth-of-type(10){animation-delay:.45s}
.mh-candles rect:nth-of-type(11){animation-delay:.5s}
@keyframes mhCandleRise{0%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
.mh-ai-brain{transform-origin:310px 100px;transform-box:fill-box;animation:mhBrainPulse 3s ease-in-out infinite}
@keyframes mhBrainPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.mh-ai-dot{animation:mhDot 1.2s ease-in-out infinite}
@keyframes mhDot{0%,100%{opacity:1}50%{opacity:.4}}
.mh-indicator{transform-origin:center;transform-box:fill-box;animation:mhIndicator 3s ease-in-out infinite}
@keyframes mhIndicator{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.95;transform:translateY(-2px)}}
.mh-bar{transform-origin:left center;transform-box:fill-box;animation:mhBarFill 2.5s ease-out infinite}
@keyframes mhBarFill{0%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}

.mh-ac-cap-anim{transform-origin:180px 56px;transform-box:fill-box;animation:mhCapWobble 4s ease-in-out infinite}
@keyframes mhCapWobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.mh-ac-ball-anim{transform-origin:222px 48px;transform-box:fill-box;animation:mhTassel 2.5s ease-in-out infinite}
@keyframes mhTassel{0%,100%{transform:translateX(-3px) rotate(-10deg)}50%{transform:translateX(3px) rotate(10deg)}}
.mh-cert{transform-origin:center;transform-box:fill-box;animation:mhCertIn 4s ease-out infinite}
@keyframes mhCertIn{0%{opacity:0;transform:scale(.95)}30%,100%{opacity:1;transform:scale(1)}}
.mh-spark-anim{transform-origin:center;transform-box:fill-box;animation:mhSpark 2.5s ease-in-out infinite}
@keyframes mhSpark{0%,100%{opacity:.3;transform:scale(.6) rotate(0deg)}50%{opacity:1;transform:scale(1.3) rotate(180deg)}}

.mh-dc-pulse{transform-origin:center;transform-box:fill-box;animation:mhDcPulse 1.8s ease-in-out infinite}
@keyframes mhDcPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3);filter:drop-shadow(0 0 6px currentColor)}}
.mh-dc-ring{transform-origin:center;transform-box:fill-box;animation:mhDcRing 2.5s ease-out infinite}
@keyframes mhDcRing{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(2.5)}}
.mh-vps-led-anim{transform-origin:center;transform-box:fill-box;animation:mhLed 1.4s ease-in-out infinite}
@keyframes mhLed{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.3);filter:drop-shadow(0 0 4px currentColor)}}
.mh-speed{animation:mhFloat 3s ease-in-out infinite}

/* Modal Responsive */
@media (max-width:980px){
  .tool-modal{padding:24px 14px;align-items:flex-start}
  .tool-modal__panel{border-radius:20px}
  .tool-modal__layout{grid-template-columns:1fr;min-height:auto}
  .tool-modal__visual{padding:24px 20px;min-height:240px}
  .tool-modal__hero-svg{max-width:300px}
  .tool-modal__content{padding:32px 26px 30px}
  .tool-modal__title{font-size:24px}
  .tool-modal__lead{font-size:14.5px}
  .tool-modal__features li{font-size:13px;padding:9px 12px}
  .tool-modal__close{top:14px;left:14px;width:38px;height:38px}
  .tool-modal__pulse{width:280px;height:280px}
}
@media (max-width:640px){
  .tool-modal{padding:16px 10px}
  .tool-modal__panel{border-radius:18px}
  .tool-modal__visual{padding:20px 14px;min-height:200px}
  .tool-modal__hero-svg{max-width:260px}
  .tool-modal__content{padding:26px 20px 22px}
  .tool-modal__eyebrow{font-size:9px;letter-spacing:1.5px;padding:4px 10px}
  .tool-modal__title{font-size:20px;gap:8px}
  .tool-modal__badge{font-size:9px;padding:3px 8px}
  .tool-modal__lead{font-size:13.5px;line-height:1.7;margin-bottom:18px}
  .tool-modal__sub{font-size:12px;margin-bottom:12px}
  .tool-modal__features{gap:9px;margin-bottom:22px}
  .tool-modal__features li{font-size:12.5px;padding:8px 10px;gap:9px;line-height:1.55}
  .tool-modal__feature-icon{width:16px;height:16px;font-size:7px}
  .tool-modal__actions{gap:8px}
  .tool-modal__actions .btn{padding:11px 18px;font-size:12.5px;flex:1;justify-content:center}
  .tool-modal__close{top:10px;left:10px;width:34px;height:34px}
  .tool-modal__close svg{width:16px;height:16px}
}

body.tool-modal-open{overflow:hidden}

/* ============== PARTNERS / MEX PARTNERS PROGRAM ============== */
.partners{
  position:relative;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(15,127,224,.08) 0%, transparent 60%),
    linear-gradient(180deg, #050a1c 0%, #040813 60%, #030610 100%);
  overflow:hidden;
  padding:90px 0 100px;
}
.partners__bg-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(34,211,238,.05) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask:radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
          mask:radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
  opacity:.7;
}
.partners__bg-orb{
  position:absolute;border-radius:50%;
  filter:blur(90px);pointer-events:none;
  opacity:.18;
}
.partners__bg-orb--1{
  width:520px;height:520px;
  top:-160px;right:-160px;
  background:radial-gradient(circle, #22D3EE 0%, transparent 70%);
}
.partners__bg-orb--2{
  width:460px;height:460px;
  bottom:-180px;left:-150px;
  background:radial-gradient(circle, #fde68a 0%, transparent 70%);
  opacity:.18;
}

/* HEADER */
.partners__header{text-align:center;max-width:880px;margin:0 auto 56px;position:relative;z-index:1}
.eyebrow__dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#22c993;margin-left:8px;
  box-shadow:0 0 8px #22c993;
  animation:pHeaderDot 1.6s ease-in-out infinite;
}
@keyframes pHeaderDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.partners__title{
  font-family:'Cairo', sans-serif;
  font-size:clamp(28px, 4vw, 46px);
  font-weight:900;
  line-height:1.2;
  margin:14px 0 18px;
  color:#fff;
}
.partners__title .gold{
  background:linear-gradient(135deg, #fde68a 0%, #f4c45a 50%, #a06614 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.partners__lead{
  font-size:16.5px;line-height:1.85;
  color:rgba(255,255,255,.72);
  max-width:780px;margin:0 auto;
}

/* STATS BAR */
.partners__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0 0 70px;position:relative;z-index:1;
}
.pstat{
  position:relative;
  padding:24px 22px;
  background:linear-gradient(180deg, rgba(20,28,52,.65) 0%, rgba(8,14,32,.85) 100%);
  border:1px solid rgba(34,211,238,.18);
  border-radius:16px;
  display:flex;align-items:center;gap:16px;
  isolation:isolate;
  transition:all .35s ease;
  overflow:hidden;
}
.pstat::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(34,211,238,.08) 0%, transparent 60%);
  z-index:-1;opacity:0;transition:opacity .35s ease;
}
.pstat:hover{
  border-color:rgba(34,211,238,.45);
  transform:translateY(-3px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.4);
}
.pstat:hover::before{opacity:1}
.pstat__pulse{
  position:absolute;top:14px;left:14px;
  width:7px;height:7px;border-radius:50%;
  background:#22c993;
  box-shadow:0 0 8px #22c993, 0 0 0 0 rgba(34,201,147,.7);
  animation:pStatPulse 2s ease-in-out infinite;
}
@keyframes pStatPulse{
  0%{box-shadow:0 0 8px #22c993, 0 0 0 0 rgba(34,201,147,.7)}
  100%{box-shadow:0 0 8px #22c993, 0 0 0 12px rgba(34,201,147,0)}
}
.pstat__icon{
  flex-shrink:0;
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(34,211,238,.18) 0%, rgba(15,127,224,.06) 100%);
  border:1px solid rgba(34,211,238,.25);
  color:#22D3EE;
}
.pstat__icon svg{width:24px;height:24px}
.pstat__num{
  font-family:'JetBrains Mono', monospace;
  font-size:26px;font-weight:900;
  color:#fff;
  line-height:1.1;
  background:linear-gradient(135deg, #22D3EE 0%, #fff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pstat__num--text{
  font-family:'Cairo', sans-serif;
  font-size:22px;
  background:linear-gradient(135deg, #fde68a 0%, #f4c45a 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pstat__label{
  font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.6);
  margin-top:4px;
  line-height:1.4;
}

/* PARTNERSHIP TYPES GRID */
.partners__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  margin-bottom:90px;position:relative;z-index:1;
}
.ptype{
  position:relative;
  padding:30px 28px 28px;
  background:linear-gradient(180deg, rgba(20,28,52,.78) 0%, rgba(8,14,32,.92) 100%);
  border:1px solid rgba(34,211,238,.16);
  border-radius:22px;
  isolation:isolate;
  overflow:hidden;
  transition:all .4s cubic-bezier(.34,1.3,.64,1);
}
.ptype::before{
  content:"";position:absolute;inset:-1px;border-radius:22px;
  background:linear-gradient(135deg, rgba(34,211,238,.45) 0%, transparent 35%, transparent 65%, rgba(244,196,90,.35) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;
  opacity:0;transition:opacity .4s ease;
  z-index:-1;
}
.ptype:hover{
  transform:translateY(-6px);
  border-color:rgba(34,211,238,.45);
  box-shadow:0 14px 32px -12px rgba(0,0,0,.55);
}
.ptype:hover::before{opacity:1}
.ptype__corner{
  position:absolute;top:0;left:0;
  width:140px;height:140px;
  background:radial-gradient(circle at 0 0, rgba(34,211,238,.18) 0%, transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.ptype--affiliate .ptype__corner{background:radial-gradient(circle at 0 0, rgba(168,85,247,.18) 0%, transparent 70%)}
.ptype--whitelabel .ptype__corner{background:radial-gradient(circle at 0 0, rgba(244,196,90,.18) 0%, transparent 70%)}
.ptype--mam .ptype__corner{background:radial-gradient(circle at 0 0, rgba(34,201,147,.18) 0%, transparent 70%)}

.ptype__viz{
  width:100%;height:130px;
  background:linear-gradient(180deg, rgba(13,21,48,.5) 0%, rgba(8,14,32,.3) 100%);
  border:1px solid rgba(255,255,255,.04);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
  overflow:hidden;
}
.ptype__viz svg{width:100%;height:100%}

.ptype__tag{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;font-weight:900;letter-spacing:1.4px;
  color:#040813;
  background:linear-gradient(135deg, #22D3EE 0%, #0F7FE0 100%);
  padding:5px 11px;border-radius:30px;
  margin-bottom:14px;
  box-shadow:0 4px 12px rgba(34,211,238,.35);
}
.ptype__tag--purple{background:linear-gradient(135deg, #a855f7 0%, #6366f1 100%);color:#fff;box-shadow:0 4px 12px rgba(168,85,247,.4)}
.ptype__tag--gold{background:linear-gradient(135deg, #fde68a 0%, #a06614 100%);color:#040813;box-shadow:0 4px 12px rgba(244,196,90,.4)}
.ptype__tag--green{background:linear-gradient(135deg, #22c993 0%, #047857 100%);color:#fff;box-shadow:0 4px 12px rgba(34,201,147,.35)}

.ptype__title{
  font-family:'Cairo', sans-serif;
  font-size:24px;font-weight:900;
  color:#fff;margin-bottom:4px;
  line-height:1.2;
}
.ptype__sub{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;font-weight:600;letter-spacing:.6px;
  color:#22D3EE;
  margin-bottom:14px;
}
.ptype--affiliate .ptype__sub{color:#a855f7}
.ptype--whitelabel .ptype__sub{color:#fde68a}
.ptype--mam .ptype__sub{color:#22c993}

.ptype__desc{
  font-size:14.5px;line-height:1.75;
  color:rgba(255,255,255,.72);
  margin-bottom:18px;
}
.ptype__feats{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:10px;
}
.ptype__feats li{
  position:relative;padding:9px 32px 9px 12px;
  font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  border-radius:10px;
  transition:all .25s ease;
}
.ptype__feats li::before{
  content:"";position:absolute;
  right:11px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg, #22D3EE 0%, #0F7FE0 100%);
  box-shadow:0 0 8px rgba(34,211,238,.6);
}
.ptype--affiliate .ptype__feats li::before{background:linear-gradient(135deg, #a855f7, #6366f1);box-shadow:0 0 8px rgba(168,85,247,.6)}
.ptype--whitelabel .ptype__feats li::before{background:linear-gradient(135deg, #fde68a, #a06614);box-shadow:0 0 8px rgba(244,196,90,.6)}
.ptype--mam .ptype__feats li::before{background:linear-gradient(135deg, #22c993, #047857);box-shadow:0 0 8px rgba(34,201,147,.6)}
.ptype__feats li strong{color:#fff;font-weight:800}

/* PTYPE inner SVG animations */
.ptype-anim-pulse{transform-origin:center;transform-box:fill-box;animation:ptPulse 2.5s ease-in-out infinite}
@keyframes ptPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.ptype-anim-orbit{transform-origin:100px 55px;transform-box:fill-box;animation:ptOrbit 12s linear infinite}
@keyframes ptOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ptype-anim-line{stroke-dasharray:300;stroke-dashoffset:300;animation:ptDraw 4s ease-out infinite}
@keyframes ptDraw{0%{stroke-dashoffset:300}55%,100%{stroke-dashoffset:0}}
.ptype-anim-funnel{animation:ptFunnel 2.4s ease-in-out infinite}
@keyframes ptFunnel{0%,100%{opacity:.85}50%{opacity:1}}
.ptype-anim-leads circle{transform-origin:center;transform-box:fill-box;animation:ptLead 2s ease-in-out infinite}
.ptype-anim-leads circle:nth-child(2){animation-delay:.2s}
.ptype-anim-leads circle:nth-child(3){animation-delay:.4s}
.ptype-anim-leads circle:nth-child(4){animation-delay:.6s}
.ptype-anim-leads circle:nth-child(5){animation-delay:.8s}
@keyframes ptLead{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(40px);opacity:.4}}
.ptype-anim-payout{transform-origin:center;transform-box:fill-box;animation:ptPayout 2.4s ease-in-out infinite}
@keyframes ptPayout{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.ptype-anim-brand{animation:ptBrand 2.4s ease-in-out infinite}
@keyframes ptBrand{0%,100%{opacity:.7}50%{opacity:1}}
.ptype-anim-bar{transform-origin:left center;transform-box:fill-box;animation:ptBar 2.6s ease-out infinite}
@keyframes ptBar{0%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
.ptype-anim-cog{animation:ptCog 6s linear infinite}
@keyframes ptCog{from{transform:translate(135px,75px) rotate(0)}to{transform:translate(135px,75px) rotate(360deg)}}
.ptype-anim-master{transform-origin:center;transform-box:fill-box;animation:ptMaster 2.5s ease-in-out infinite}
@keyframes ptMaster{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ptype-anim-investor-dots circle{transform-origin:center;transform-box:fill-box;animation:ptInv 2.4s ease-in-out infinite}
.ptype-anim-investor-dots circle:nth-child(2){animation-delay:.2s}
.ptype-anim-investor-dots circle:nth-child(3){animation-delay:.4s}
.ptype-anim-investor-dots circle:nth-child(4){animation-delay:.6s}
.ptype-anim-investor-dots circle:nth-child(5){animation-delay:.8s}
.ptype-anim-investor-dots circle:nth-child(6){animation-delay:1s}
@keyframes ptInv{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}

/* COMMISSION LADDER */
.partners__ladder{
  margin-bottom:90px;
  padding:48px 36px 56px;
  background:linear-gradient(180deg, rgba(13,21,48,.55) 0%, rgba(8,14,32,.85) 100%);
  border:1px solid rgba(34,211,238,.18);
  border-radius:24px;
  position:relative;z-index:1;
  overflow:hidden;
}
.partners__ladder::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(90deg, rgba(34,211,238,.04) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask:radial-gradient(80% 60% at 50% 50%, #000 0%, transparent 100%);
          mask:radial-gradient(80% 60% at 50% 50%, #000 0%, transparent 100%);
  pointer-events:none;
}
.pladder__head{text-align:center;max-width:680px;margin:0 auto 38px}
.pladder__head h3{
  font-family:'Cairo', sans-serif;
  font-size:clamp(22px, 3vw, 32px);font-weight:900;
  color:#fff;margin:12px 0 12px;line-height:1.3;
}
.pladder__head p{
  font-size:15px;color:rgba(255,255,255,.65);line-height:1.7;
}
.pladder__steps{
  display:grid;grid-template-columns:repeat(5, 1fr);
  gap:14px;
  position:relative;
}
.pstep{
  position:relative;
  padding:24px 14px 22px;
  background:linear-gradient(180deg, rgba(20,28,52,.65) 0%, rgba(8,14,32,.85) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  text-align:center;
  transition:all .3s ease;
  isolation:isolate;
}
.pstep:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.4);
}
.pstep__connector{
  position:absolute;
  top:42px;right:-14px;
  width:14px;height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.4));
}
.pstep:last-child .pstep__connector{display:none}

.pstep__icon{
  width:54px;height:54px;
  margin:0 auto 14px;
  display:grid;place-items:center;
  border-radius:14px;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  position:relative;
}
.pstep__icon--starter{background:linear-gradient(135deg, #475569 0%, #334155 100%);box-shadow:0 8px 22px rgba(71,85,105,.35)}
.pstep__icon--pro{background:linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);color:#0f172a;box-shadow:0 8px 22px rgba(148,163,184,.4)}
.pstep__icon--elite{background:linear-gradient(135deg, #fde68a 0%, #f4c45a 50%, #a06614 100%);color:#2a1d05;box-shadow:0 8px 22px rgba(244,196,90,.45)}
.pstep__icon--diamond{background:linear-gradient(135deg, #67e8f9 0%, #22D3EE 50%, #0F7FE0 100%);color:#040813;box-shadow:0 8px 24px rgba(34,211,238,.5)}
.pstep__icon--black{
  background:linear-gradient(135deg, #1f2937 0%, #0a0a0a 100%);
  color:#fde68a;
  border:1.5px solid rgba(244,196,90,.55);
  box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 16px rgba(244,196,90,.2);
}

.pstep__name{
  font-family:'Cairo', sans-serif;
  font-size:14px;font-weight:800;
  color:#fff;margin-bottom:8px;
}
.pstep__rate{
  font-family:'JetBrains Mono', monospace;
  font-size:24px;font-weight:900;
  color:#22D3EE;
  margin-bottom:8px;
  line-height:1;
}
.pstep__rate span{
  font-size:11px;font-weight:600;
  color:rgba(255,255,255,.5);
  margin-right:2px;
}
.pstep__cond{
  font-size:11.5px;line-height:1.5;
  color:rgba(255,255,255,.55);
}

.pstep--top{
  background:linear-gradient(180deg, rgba(244,196,90,.06) 0%, rgba(8,14,32,.95) 100%);
  border-color:rgba(244,196,90,.4);
  box-shadow:0 0 30px rgba(244,196,90,.1);
}
.pstep--top .pstep__rate{color:#fde68a}
.pstep__crown{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, #fde68a 0%, #a06614 100%);
  border-radius:50%;
  color:#040813;
  box-shadow:0 6px 18px rgba(244,196,90,.5);
  animation:pCrown 3s ease-in-out infinite;
}
.pstep__crown svg{width:18px;height:18px}
@keyframes pCrown{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}

/* WHY MEX PARTNERS */
.partners__why{
  margin-bottom:90px;
  position:relative;z-index:1;
}
.pwhy__head{text-align:center;max-width:740px;margin:0 auto 40px}
.pwhy__head h3{
  font-family:'Cairo', sans-serif;
  font-size:clamp(24px, 3.4vw, 36px);font-weight:900;
  color:#fff;margin:12px 0 0;line-height:1.3;
}
.pwhy__head h3 .gold{
  background:linear-gradient(135deg, #fde68a 0%, #f4c45a 50%, #a06614 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pwhy__grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;
}
.pwhy__card{
  position:relative;
  padding:28px 24px;
  background:linear-gradient(180deg, rgba(20,28,52,.55) 0%, rgba(8,14,32,.8) 100%);
  border:1px solid rgba(34,211,238,.14);
  border-radius:18px;
  transition:all .35s ease;
  isolation:isolate;
}
.pwhy__card::before{
  content:"";position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(135deg, rgba(34,211,238,.06) 0%, transparent 60%);
  z-index:-1;opacity:0;transition:opacity .35s ease;
}
.pwhy__card:hover{
  transform:translateY(-5px);
  border-color:rgba(34,211,238,.4);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.4);
}
.pwhy__card:hover::before{opacity:1}
.pwhy__icon{
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(34,211,238,.18) 0%, rgba(15,127,224,.06) 100%);
  border:1px solid rgba(34,211,238,.3);
  color:#22D3EE;
  margin-bottom:18px;
  transition:all .35s ease;
}
.pwhy__card:hover .pwhy__icon{
  transform:scale(1.08) rotate(-4deg);
  background:linear-gradient(135deg, rgba(34,211,238,.3) 0%, rgba(15,127,224,.12) 100%);
  box-shadow:0 8px 22px rgba(34,211,238,.25);
}
.pwhy__icon svg{width:26px;height:26px}
.pwhy__card h4{
  font-family:'Cairo', sans-serif;
  font-size:17px;font-weight:800;
  color:#fff;margin-bottom:10px;line-height:1.35;
}
.pwhy__card p{
  font-size:14px;line-height:1.7;
  color:rgba(255,255,255,.7);
}

/* JOURNEY (4 steps) */
.partners__journey{
  position:relative;z-index:1;
  padding:48px 36px 56px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(34,211,238,.07) 0%, transparent 70%),
    linear-gradient(180deg, rgba(13,21,48,.55) 0%, rgba(8,14,32,.85) 100%);
  border:1px solid rgba(34,211,238,.18);
  border-radius:24px;
  overflow:hidden;
}
.pjourney__head{text-align:center;max-width:680px;margin:0 auto 38px}
.pjourney__head h3{
  font-family:'Cairo', sans-serif;
  font-size:clamp(22px, 3vw, 32px);font-weight:900;
  color:#fff;margin:12px 0 0;line-height:1.3;
}
.pjourney__head h3 .gold{
  background:linear-gradient(135deg, #fde68a 0%, #f4c45a 50%, #a06614 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pjourney__steps{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;
  counter-reset:pj;
  position:relative;
}
.pjourney__steps::before{
  content:"";
  position:absolute;
  top:30px;right:6%;left:6%;height:2px;
  background:repeating-linear-gradient(90deg, rgba(34,211,238,.4) 0 8px, transparent 8px 16px);
  z-index:0;
}
.pjstep{
  position:relative;
  padding:18px 18px 20px;
  background:linear-gradient(180deg, rgba(20,28,52,.65) 0%, rgba(8,14,32,.92) 100%);
  border:1px solid rgba(34,211,238,.18);
  border-radius:16px;
  text-align:center;
  transition:all .3s ease;
  z-index:1;
}
.pjstep:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.45);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.pjstep__num{
  width:48px;height:48px;
  margin:-32px auto 14px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, #22D3EE 0%, #0F7FE0 100%);
  color:#040813;
  font-family:'JetBrains Mono', monospace;
  font-size:18px;font-weight:900;
  box-shadow:0 8px 22px rgba(34,211,238,.45), 0 0 0 4px #050a1c;
}
.pjstep h4{
  font-family:'Cairo', sans-serif;
  font-size:15.5px;font-weight:800;
  color:#fff;margin-bottom:8px;line-height:1.35;
}
.pjstep p{
  font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.65);
}

/* RESPONSIVE */
@media (max-width:1100px){
  .partners__stats{grid-template-columns:repeat(2,1fr)}
  .pladder__steps{grid-template-columns:repeat(5,1fr);gap:8px}
  .pstep{padding:18px 8px 16px}
  .pstep__icon{width:46px;height:46px;font-size:12px}
  .pstep__rate{font-size:20px}
  .pstep__cond{font-size:10.5px}
  .pwhy__grid{grid-template-columns:repeat(2,1fr)}
  .pjourney__steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .pjourney__steps::before{display:none}
}
@media (max-width:780px){
  .partners{padding:60px 0 70px}
  .partners__header{margin-bottom:40px}
  .partners__title{font-size:28px}
  .partners__lead{font-size:14.5px;line-height:1.75}
  .partners__stats{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:50px}
  .pstat{padding:16px 14px;gap:12px}
  .pstat__icon{width:40px;height:40px;border-radius:10px}
  .pstat__icon svg{width:20px;height:20px}
  .pstat__num{font-size:20px}
  .pstat__num--text{font-size:18px}
  .pstat__label{font-size:11.5px}
  .partners__grid{grid-template-columns:1fr;gap:18px;margin-bottom:60px}
  .ptype{padding:24px 22px 22px;border-radius:18px}
  .ptype__viz{height:110px;margin-bottom:18px}
  .ptype__title{font-size:21px}
  .ptype__desc{font-size:14px}
  .ptype__feats li{font-size:13px;padding:8px 28px 8px 11px}

  .partners__ladder{padding:36px 22px 40px;margin-bottom:60px;border-radius:20px}
  .pladder__head h3{font-size:22px}
  .pladder__head p{font-size:13.5px}
  .pladder__steps{grid-template-columns:repeat(2,1fr);gap:14px}
  .pstep{padding:18px 12px 16px}
  .pstep__icon{width:48px;height:48px;font-size:13px}
  .pstep__rate{font-size:22px}
  .pstep__connector{display:none}
  .pstep--top{grid-column:span 2}

  .partners__why{margin-bottom:60px}
  .pwhy__head h3{font-size:22px}
  .pwhy__grid{grid-template-columns:1fr;gap:14px}
  .pwhy__card{padding:22px 20px;border-radius:14px}
  .pwhy__icon{width:46px;height:46px;border-radius:12px;margin-bottom:14px}
  .pwhy__icon svg{width:22px;height:22px}
  .pwhy__card h4{font-size:16px}
  .pwhy__card p{font-size:13.5px}

  .partners__journey{padding:36px 20px 40px;border-radius:20px}
  .pjourney__head h3{font-size:22px}
  .pjourney__steps{grid-template-columns:1fr;gap:36px}
  .pjstep__num{width:42px;height:42px;font-size:16px;margin-top:-26px}
}
@media (max-width:480px){
  .partners__bg-orb--1,.partners__bg-orb--2{filter:blur(60px);opacity:.2}
  .ptype__feats li{font-size:12.5px}
  .ptype__viz{height:100px}
  .partners__ladder,.partners__journey{padding:28px 16px 32px}
}

/* ---------- CTA BAND ---------- */
.cta-band{
  padding:70px 0;
  background:
    linear-gradient(135deg,rgba(34,211,238,.15),rgba(194,142,44,.05)),
    linear-gradient(180deg,#0a1024,#040813);
  border-top:1px solid rgba(34,211,238,.2);
  border-bottom:1px solid rgba(34,211,238,.2);
  position:relative;overflow:hidden;
}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;top:0;width:300px;height:100%;
  background:radial-gradient(circle,rgba(34,211,238,.15),transparent 70%);
}
.cta-band::before{right:-100px}
.cta-band::after{left:-100px}
.cta-band__inner{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  flex-wrap:wrap;position:relative;z-index:1;
}
.cta-band h2{
  font-family:'Cairo',sans-serif;font-size:clamp(24px,3vw,36px);
  font-weight:800;color:#fff;margin-bottom:8px;
}
.cta-band p{color:var(--text-dim);font-size:16px}
.cta-band__buttons{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
.site-footer{background:#020510;padding:80px 0 30px;color:var(--text-dim)}
.footer__top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid var(--line);
}
.footer__brand{max-width:340px}
.footer__brand .logo{margin-bottom:18px}
.footer__brand p{font-size:14px;line-height:1.7;margin-bottom:22px}
.footer__social{display:flex;gap:10px}
.footer__social a{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;
  transition:all .25s;
}
.footer__social a:hover{
  background:var(--gold);color:#0a0a0a;border-color:var(--gold);
  transform:translateY(-3px);
}
.footer__col h5{
  font-family:'Cairo',sans-serif;
  font-size:13px;font-weight:800;color:#fff;
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:18px;
}
.footer__col a{
  display:block;padding:6px 0;font-size:13.5px;color:var(--text-dim);
}
.footer__col a:hover{color:var(--gold);padding-right:4px}

.footer__risk{
  padding:30px 0;border-bottom:1px solid var(--line);
}
.footer__risk h6{
  font-family:'Cairo',sans-serif;
  font-size:13px;color:var(--gold);font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:10px;
}
.footer__risk p{font-size:12.5px;line-height:1.8;color:#7a8299}

.footer__bottom{
  padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;font-size:12.5px;
}
.footer__bottom-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dot-sep{color:var(--gold);opacity:.6}

/* ---------- FLOAT CHAT ---------- */
.float-chat{
  position:fixed;bottom:24px;left:24px;z-index:100;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#22D3EE,#0F7FE0);
  color:#0a0a0a;border-radius:50%;
  box-shadow:0 10px 30px -8px rgba(34,211,238,.6);
  transition:all .25s;
  animation:chatBob 2.5s ease-in-out infinite;
}
.float-chat:hover{transform:scale(1.1) translateY(-2px)}
@keyframes chatBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .main-nav{display:none}
  .hamburger{display:flex}
  .footer__top{grid-template-columns:repeat(3,1fr)}
  .footer__brand{grid-column:1/-1}
  .platforms__grid,.why__grid{
    grid-template-columns:repeat(2,1fr);
  }
  .products__slider{padding:0 50px}
  .pslider__track{gap:18px}
  .pslider__track > .pcard{flex:0 0 calc((100% - 18px) / 2)}
  .pslider__nav{width:44px;height:44px}
  .platform-card--feature{grid-column:span 2}

  .lstats__slider{padding:0 48px}
  .lstats__track{gap:18px}
  .lstats__track > .lcard{flex:0 0 calc((100% - 18px) / 2)}
  .lstats__nav{width:42px;height:42px}
}

/* ============== MOBILE DRAWER (≤1100) ============== */
.main-nav.is-open{
  display:flex !important;
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  width:100%;
  height:100vh;
  height:100dvh;
  flex-direction:column;
  align-items:stretch;
  background:
    radial-gradient(1200px 800px at 100% 0%, rgba(34,211,238,0.08), transparent 55%),
    radial-gradient(900px 700px at 0% 100%, rgba(245,200,66,0.06), transparent 55%),
    linear-gradient(180deg,#08101f 0%,#040712 100%);
  padding:0;
  overflow:hidden;
  z-index:9990;
  animation:drawerSlide 0.36s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-30px 0 80px rgba(0,0,0,0.6);
}
@keyframes drawerSlide{
  from{transform:translateX(100%);opacity:0.4}
  to{transform:translateX(0);opacity:1}
}

/* ----- Drawer head (sticky) ----- */
.main-nav.is-open .mnav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  padding-top:max(14px, env(safe-area-inset-top));
  border-bottom:1px solid rgba(34,211,238,0.14);
  background:rgba(8,12,24,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  flex-shrink:0;
  position:relative;
  z-index:2;
}
.main-nav.is-open .mnav-head::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,0.55), transparent);
}
.mnav-brand{display:flex;align-items:center}
.mnav-brand img{
  height:48px;
  width:auto;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.mnav-close{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  border-radius:12px;
  cursor:pointer;
  transition:all 0.25s ease;
}
.mnav-close:hover,.mnav-close:focus{
  background:rgba(34,211,238,0.12);
  border-color:rgba(34,211,238,0.45);
  color:var(--gold);
  transform:rotate(90deg);
}
.mnav-close svg{width:20px;height:20px}

/* ----- Drawer scrollable body (the UL) ----- */
.main-nav.is-open > ul{
  flex:1 1 auto;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  gap:6px;
  padding:18px 16px 22px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.main-nav.is-open > ul::-webkit-scrollbar{width:4px}
.main-nav.is-open > ul::-webkit-scrollbar-thumb{background:rgba(34,211,238,0.25);border-radius:2px}

.main-nav.is-open li{position:static;width:100%}
.main-nav.is-open > ul > li{
  opacity:0;
  transform:translateX(20px);
  animation:mnavItemIn 0.42s cubic-bezier(0.4,0,0.2,1) forwards;
}
.main-nav.is-open > ul > li:nth-child(1){animation-delay:0.06s}
.main-nav.is-open > ul > li:nth-child(2){animation-delay:0.12s}
.main-nav.is-open > ul > li:nth-child(3){animation-delay:0.18s}
.main-nav.is-open > ul > li:nth-child(4){animation-delay:0.24s}
.main-nav.is-open > ul > li:nth-child(5){animation-delay:0.30s}
.main-nav.is-open > ul > li:nth-child(6){animation-delay:0.36s}
.main-nav.is-open > ul > li:nth-child(7){animation-delay:0.42s}
@keyframes mnavItemIn{
  to{opacity:1;transform:translateX(0)}
}

.main-nav.is-open > ul > li > a{
  width:100%;
  padding:14px 14px;
  font-size:15.5px;
  font-weight:700;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  border:1px solid transparent;
  color:#e8ebf5;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012));
  position:relative;
  transition:all 0.25s ease;
}
.main-nav.is-open > ul > li > a .caret{
  margin-inline-start:auto;
  font-size:11px;
  opacity:0.7;
}
/* Icon chip on top-level menu items (mobile drawer only) */
.mnav-ico{
  width:36px;height:36px;
  flex:0 0 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(34,211,238,0.16), rgba(245,200,66,0.10));
  border:1px solid rgba(34,211,238,0.22);
  color:var(--gold);
  box-shadow:0 4px 12px rgba(34,211,238,0.10);
  transition:all 0.3s ease;
}
.main-nav.is-open > ul > li > a > .mnav-ico{display:inline-flex}
.mnav-ico svg{width:18px;height:18px}
.main-nav.is-open > ul > li > a:hover .mnav-ico,
.main-nav.is-open > ul > li > a:focus .mnav-ico,
.main-nav.is-open .has-mega.is-expanded > a .mnav-ico{
  background:linear-gradient(135deg, rgba(34,211,238,0.28), rgba(245,200,66,0.18));
  border-color:rgba(34,211,238,0.5);
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(34,211,238,0.22);
}
.main-nav.is-open > ul > li > a:hover,
.main-nav.is-open > ul > li > a:focus{
  background:linear-gradient(180deg, rgba(34,211,238,0.10), rgba(34,211,238,0.04));
  border-color:rgba(34,211,238,0.28);
  color:var(--gold);
  transform:translateX(-2px);
}
/* Mega menus inside mobile drawer */
.main-nav.is-open .mega{
  position:static !important;
  min-width:0 !important;
  width:100%;
  display:none;
  grid-template-columns:1fr !important;
  background:rgba(13,20,40,0.6);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 14px 6px;
  margin:6px 0 8px;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  box-shadow:none;
  gap:14px;
  z-index:auto;
}
.main-nav.is-open .has-mega.is-expanded .mega{display:grid}
.main-nav.is-open .has-mega.is-expanded > a{
  background:rgba(34,211,238,0.08);
  border-color:rgba(34,211,238,0.2);
  color:var(--gold);
}
.main-nav.is-open .has-mega.is-expanded > a .caret{transform:rotate(180deg)}
.main-nav.is-open .caret{transition:transform 0.25s ease;font-size:11px;opacity:0.85}
.main-nav.is-open .mega__col h5{
  font-size:11px;letter-spacing:1.5px;
  margin-bottom:6px;padding-bottom:6px;
  border-bottom:1px solid rgba(34,211,238,0.15);
  color:var(--gold);
}
.main-nav.is-open .mega__col a{
  padding:9px 4px;font-size:13.5px;
  border:0;
  border-radius:6px;
  color:#cfd5e6;
}
.main-nav.is-open .mega__col a:hover{
  background:rgba(34,211,238,0.05);
  color:var(--gold);
  padding-right:8px;
}

/* ----- Drawer footer (sticky) ----- */
.main-nav.is-open .mnav-foot{
  flex-shrink:0;
  padding:14px 16px max(16px, env(safe-area-inset-bottom));
  background:rgba(8,12,24,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(34,211,238,0.14);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.main-nav.is-open .mnav-foot::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,0.55), transparent);
}
/* CTA buttons row */
.mnav-cta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.mnav-cta__primary,.mnav-cta__ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 14px;
  border-radius:12px;
  font-weight:800;
  font-size:14px;
  letter-spacing:0.3px;
  transition:all 0.28s ease;
  text-align:center;
}
.mnav-cta__primary{
  background:linear-gradient(135deg, #0EA5E9 0%, #0F7FE0 100%);
  color:#ffffff;
  box-shadow:0 8px 22px rgba(15,127,224,0.42),inset 0 1px 0 rgba(255,255,255,0.18);
  border:1px solid rgba(34,211,238,0.55);
  text-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.mnav-cta__primary:hover,.mnav-cta__primary:focus{
  transform:translateY(-2px);
  background:linear-gradient(135deg, #22D3EE 0%, #0EA5E9 100%);
  box-shadow:0 12px 28px rgba(34,211,238,0.5),inset 0 1px 0 rgba(255,255,255,0.25);
  color:#ffffff;
}
.mnav-cta__ghost{
  background:rgba(34,211,238,0.08);
  color:#e8ebf5;
  border:1px solid rgba(34,211,238,0.32);
}
.mnav-cta__ghost:hover,.mnav-cta__ghost:focus{
  background:rgba(34,211,238,0.14);
  border-color:rgba(34,211,238,0.55);
  color:var(--gold);
}

/* Meta row (support / lang / partners) */
.mnav-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 4px;
  border-top:1px dashed rgba(255,255,255,0.06);
  border-bottom:1px dashed rgba(255,255,255,0.06);
}
.mnav-meta__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:#cfd5e6;
  padding:6px 4px;
  transition:color 0.25s ease;
}
.mnav-meta__item svg{width:14px;height:14px;color:var(--gold);opacity:0.85}
.mnav-meta__item:hover,.mnav-meta__item:focus{color:var(--gold)}
.mnav-meta__dot{
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(34,211,238,0.4);
  flex-shrink:0;
}

/* Social row */
.mnav-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.mnav-social a{
  width:38px;height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:#cfd5e6;
  transition:all 0.28s ease;
}
.mnav-social a svg{width:16px;height:16px}
.mnav-social a:hover,.mnav-social a:focus{
  background:rgba(34,211,238,0.14);
  border-color:rgba(34,211,238,0.42);
  color:var(--gold);
  transform:translateY(-2px);
}

/* Hamburger button - hide when drawer is open (we use mnav-close inside drawer) */
.hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--gold)}
.hamburger.is-active span:nth-child(2){opacity:0}
.hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--gold)}
body.nav-open .hamburger{
  visibility:hidden;
  pointer-events:none;
}

/* Lock body when drawer open */
body.nav-open{overflow:hidden;position:fixed;width:100%;left:0;right:0}

@media (max-width:768px){
  /* ----- GLOBAL ----- */
  .container{padding:0 16px}
  .section{padding:60px 0}
  .section-head{margin:0 0 36px}
  .section-head h2{font-size:clamp(22px,5.4vw,30px) !important;margin-bottom:10px}
  .section-head p{font-size:14px}

  /* ----- TOP BAR ----- */
  .top-bar{font-size:11.5px;padding:7px 0}
  .top-bar__inner{gap:10px;justify-content:space-between}
  .top-bar__left{gap:8px;flex:1;min-width:0}
  .top-bar__left span:nth-child(3),.top-bar__sep{display:none}
  .top-bar__right{gap:8px}
  .top-bar__link{font-size:11px}
  .lang-switch{padding:3px 7px;font-size:11px}
  .badge-live{font-size:10.5px;padding:2px 7px}
  .badge-live .dot{width:5px;height:5px}

  /* ----- HEADER ----- */
  .site-header__inner{height:64px;gap:10px;padding:0;min-width:0}
  .header-actions{gap:6px;min-width:0;flex:0 1 auto}
  .header-actions .btn--ghost{display:none}
  .header-actions .btn{padding:8px 14px;font-size:12.5px}
  .header-actions .btn--primary{min-width:0;flex-shrink:1}
  .logo{padding:4px 0;flex-shrink:0}
  .logo__img{height:54px}
  .hamburger{width:40px;height:40px;flex-shrink:0}

  /* ----- TICKER ----- */
  .ticker-section{min-height:46px}
  .ticker-label{padding:0 12px;gap:8px}
  .ticker-label__dot{width:6px;height:6px}
  .ticker-label__icon{width:18px;height:18px}
  .ticker-label__beam{width:10px;right:-10px}
  [dir="rtl"] .ticker-label__beam{left:-10px;right:auto}
  .tk{padding:11px 14px;gap:8px;font-size:12px}
  .tk__cat-dot{width:5px;height:5px}
  .tk__sym{font-size:9.5px;padding:2px 6px;letter-spacing:0.4px}
  .tk__name{display:none}
  .tk__price{font-size:12.5px}
  .tk__chg{font-size:10.5px;padding:2px 7px}
  .ticker::before,.ticker::after{width:50px}

  /* ----- LIVE STATS ----- */
  .lstats{padding:50px 0 40px}
  .lstats__head{margin-bottom:30px}
  .lstats__title{font-size:26px}
  .lstats__sub{font-size:13px;max-width:90%}
  .lstats__live{font-size:10px;padding:5px 12px;letter-spacing:1px}
  .lstats__slider{padding:0 8px}
  .lstats__track{gap:14px}
  .lstats__track > .lcard{flex:0 0 100%}
  .lstats__viewport{-webkit-mask-image:none;mask-image:none;border-radius:14px}
  .lstats__nav{width:38px;height:38px;background:linear-gradient(135deg, rgba(34,211,238,0.28), rgba(15,127,224,0.18))}
  .lstats__nav--prev{right:-2px}
  .lstats__nav--next{left:-2px}
  .lstats__dots{margin-top:18px}
  .lcard__chart-svg{height:46px}
  .lcard{padding:20px 18px}
  .lcard__top{gap:11px;margin-bottom:16px}
  .lcard__icon{width:42px;height:42px;border-radius:11px}
  .lcard__icon svg{width:20px;height:20px}
  .lcard__head h3{font-size:14.5px}
  .lcard__pulse{font-size:9px}
  .lcard__rows li{padding:12px 0}
  .lcard__lbl{font-size:12px}
  .lcard__val{font-size:19px}
  .lcard__delta{font-size:11px}


  /* ----- ALL GRIDS ----- */
  .platforms__grid,.why__grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .products__slider{padding:0 8px}
  .pslider__track{gap:14px}
  .pslider__track > .pcard{flex:0 0 100%}
  .pslider__viewport{-webkit-mask-image:none;mask-image:none;border-radius:18px}
  .pslider__nav{
    width:40px;height:40px;
    background:linear-gradient(135deg, rgba(34,211,238,0.32), rgba(15,127,224,0.22));
  }
  .pslider__nav--prev{right:-2px}
  .pslider__nav--next{left:-2px}
  .pslider__dots{margin-top:20px}
  .pcard__viz{height:160px}
  .pcard__body{padding:18px 18px 20px}
  .pcard__body h3{font-size:18px}
  .pcard__body p{font-size:13px;margin-bottom:14px}
  .pcard__feats li{font-size:12.5px;padding:7px 16px 7px 0}
  .pcard__cta{padding:10px 16px;font-size:13px}
  .platform-card--feature{grid-column:span 1;flex-direction:column}

  /* ----- CTA BAND ----- */
  .cta-band{padding:50px 0}
  .cta-band__inner{flex-direction:column;text-align:center;gap:24px}
  .cta-band h2{font-size:24px}
  .cta-band p{font-size:14px}
  .cta-band__buttons{justify-content:center;width:100%;flex-direction:column}
  .cta-band__buttons .btn{width:100%;justify-content:center}

  /* ----- FOOTER ----- */
  .footer__top{grid-template-columns:repeat(2,1fr);gap:30px}
  .footer__bottom{flex-direction:column;text-align:center;gap:12px}
  .footer__brand p{font-size:13px}
  .footer__col h6{font-size:13px}
  .footer__col a{font-size:12.5px}
  .footer__risk h6{font-size:12px}
  .footer__risk p{font-size:11.5px;line-height:1.7}

  /* ----- FLOAT CHAT ----- */
  .float-chat{width:46px;height:46px;bottom:16px;left:16px}
}

@media (max-width:480px){
  .container{padding:0 14px}
  .section{padding:48px 0}

  /* Top bar - even tighter */
  .top-bar{padding:6px 0}
  .top-bar__right .top-bar__link:nth-child(3){display:none}
  .top-bar__inner{gap:6px}

  /* Header - keep only logo + hamburger + primary CTA tiny */
  .header-actions{gap:5px}
  .header-actions .btn--primary{padding:7px 10px;font-size:11px;letter-spacing:0}
  .logo__img{height:50px}

  /* Footer single column */
  .footer__top{grid-template-columns:1fr;gap:24px}
  .footer__brand{grid-column:1}


  /* Section heads */
  .section-head h2{font-size:22px !important}
}

/* Accessibility - reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* ============== BACK TO TOP ============== */
.back-to-top{
  position:fixed;
  bottom:24px;right:24px;left:auto;
  /* Force physical right placement regardless of dir/RTL */
  inset-inline-start:auto;inset-inline-end:auto;
  width:54px;height:54px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(20,28,52,.92) 0%, rgba(8,14,32,.96) 100%);
  border:1.5px solid rgba(34,211,238,.3);
  border-radius:50%;
  color:#22D3EE;
  cursor:pointer;
  z-index:9000;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.85);
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.3,.64,1), visibility .35s, background .25s ease, border-color .25s ease, color .25s ease;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    0 0 0 4px rgba(34,211,238,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
  isolation:isolate;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.back-to-top:hover{
  background:linear-gradient(135deg, #22D3EE 0%, #0F7FE0 100%);
  border-color:rgba(34,211,238,.7);
  color:#040813;
  transform:translateY(-3px) scale(1.05);
  box-shadow:
    0 16px 40px rgba(0,0,0,.55),
    0 0 24px rgba(34,211,238,.5),
    0 0 0 4px rgba(34,211,238,.12);
}
.back-to-top:active{
  transform:translateY(-1px) scale(1);
}

/* Circular progress ring */
.back-to-top__progress{
  position:absolute;
  inset:-3px;
  pointer-events:none;
  transform:rotate(-90deg);
}
.back-to-top__progress svg{
  width:100%;height:100%;
}
.back-to-top__progress-track{
  fill:none;
  stroke:rgba(34,211,238,.08);
  stroke-width:1.5;
}
.back-to-top__progress-bar{
  fill:none;
  stroke:url(#backToTopGrad);
  stroke:#22D3EE;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:125.6; /* 2 * PI * 20 */
  stroke-dashoffset:125.6;
  filter:drop-shadow(0 0 4px rgba(34,211,238,.6));
  transition:stroke-dashoffset .15s linear;
}
.back-to-top:hover .back-to-top__progress-bar{
  stroke:#fde68a;
  filter:drop-shadow(0 0 6px rgba(244,196,90,.7));
}

/* Icon */
.back-to-top__icon{
  display:grid;place-items:center;
  width:22px;height:22px;
  position:relative;z-index:1;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1);
}
.back-to-top__icon svg{
  width:100%;height:100%;
}
.back-to-top:hover .back-to-top__icon{
  animation:btTopBounce .6s cubic-bezier(.34,1.3,.64,1);
}
@keyframes btTopBounce{
  0%{transform:translateY(0)}
  35%{transform:translateY(-6px)}
  60%{transform:translateY(2px)}
  100%{transform:translateY(0)}
}

/* Tooltip */
.back-to-top__tooltip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;transform:translateY(-50%);
  padding:6px 12px;
  background:linear-gradient(135deg, rgba(20,28,52,.96) 0%, rgba(8,14,32,.98) 100%);
  border:1px solid rgba(34,211,238,.3);
  border-radius:8px;
  font-family:'Cairo', sans-serif;
  font-size:12.5px;font-weight:700;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.back-to-top__tooltip::after{
  content:"";
  position:absolute;
  right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;
  background:linear-gradient(135deg, rgba(20,28,52,.96) 0%, rgba(8,14,32,.98) 100%);
  border-top:1px solid rgba(34,211,238,.3);
  border-right:1px solid rgba(34,211,238,.3);
}
.back-to-top:hover .back-to-top__tooltip{
  opacity:1;
  transform:translateY(-50%) translateX(-4px);
}

/* Pulse ring effect */
.back-to-top.is-visible::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1.5px solid rgba(34,211,238,.4);
  pointer-events:none;
  animation:btTopPulse 2.8s ease-out infinite;
  opacity:0;
}
@keyframes btTopPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.4);opacity:0}
  100%{transform:scale(1.4);opacity:0}
}

/* Responsive */
@media (max-width:780px){
  .back-to-top{
    bottom:18px;right:18px;left:auto;
    width:46px;height:46px;
  }
  .back-to-top__icon{width:18px;height:18px}
  .back-to-top__tooltip{display:none}
  .back-to-top__progress-bar{stroke-dasharray:113.1;stroke-dashoffset:113.1} /* 2 * PI * 18 */
}
@media (max-width:480px){
  .back-to-top{
    bottom:14px;right:14px;left:auto;
    width:42px;height:42px;
  }
  .back-to-top__icon{width:16px;height:16px}
}

/* Desktop-only: force chat icon LEFT and back-to-top RIGHT regardless of language/RTL */
@media (min-width: 781px){
  .back-to-top{
    right: 24px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
  }
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: rgba(8, 14, 30, 0.5);
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.scroll-progress__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    #22D3EE 0%,
    #06B6D4 35%,
    #F4C45A 70%,
    #D4A853 100%);
  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.55),
    0 0 18px rgba(244, 196, 90, 0.35);
  transition: width 0.08s linear;
  border-end-end-radius: 2px;
  position: relative;
}
.scroll-progress__bar::after{
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 100%);
  filter: blur(2px);
  opacity: 0.85;
}
@media (max-width: 768px){
  .scroll-progress{ height: 2.5px; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress__bar{ transition: none; }
}

/* ===========================
   Footer Legal Bar (Payments + Legal Links + Final Disclaimer)
   =========================== */
.footer__legal-bar {
  margin-top: 28px;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.footer__legal-bar *,
.footer__legal-bar *::before,
.footer__legal-bar *::after { box-sizing: border-box; }
.footer__legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  max-width: 100%;
}
/* Payments */
.footer-payments {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-payments__label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 600;
}
.footer-payments__logos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fpay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 60px;
  padding: 0 12px;
  border-radius: 6px;
  background: #ffffff;
  color: #0b1220;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  user-select: none;
  white-space: nowrap;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.fpay sup { font-size: 8px; vertical-align: super; margin-inline-start: 2px; }
.fpay--neteller { background: #00ac41; color: #ffffff; }
.fpay--skrill   { background: #862165; color: #ffffff; font-style: italic; font-weight: 900; }
.fpay--swift    { background: #ffffff; color: #0a3a6a; gap: 5px; }
.fpay-globe { font-size: 14px; }
.fpay--visa     { background: #1a1f71; color: #f7b600; font-style: italic; font-weight: 900; letter-spacing: 1px; }
.fpay--mc       { background: #ffffff; gap: 0; padding: 0 14px; position: relative; min-width: 50px; }
.fpay-mc__c1, .fpay-mc__c2 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
}
.fpay-mc__c1 { background: #eb001b; margin-inline-end: -7px; }
.fpay-mc__c2 { background: #f79e1b; mix-blend-mode: multiply; }

/* Legal Links */
.footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.footer-legal-links li {
  position: relative;
  display: flex;
  align-items: center;
}
.footer-legal-links li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  margin-inline-start: 16px;
}
.footer-legal-links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.footer-legal-links a:hover { color: var(--accent-cyan, #06b6d4); }

/* Final Disclaimer */
.footer__final-disclaimer {
  margin: 20px 0 0;
  padding: 0 0 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.9;
  text-align: justify;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .footer__legal-bar {
    margin-top: 22px;
    padding-top: 22px;
  }
  .footer__legal-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 16px;
  }
  .footer-payments,
  .footer-legal-links {
    justify-content: flex-start;
  }
  .footer-payments { gap: 10px; }
  .footer-payments__logos { gap: 8px; }
  .footer-legal-links {
    gap: 6px 14px;
  }
  .footer-legal-links li:not(:last-child)::after {
    margin-inline-start: 10px;
  }
  .footer-legal-links a { font-size: 12px; }
  .footer__final-disclaimer {
    font-size: 11.5px;
    line-height: 1.8;
    text-align: right;
  }
  .fpay { height: 26px; min-width: 48px; padding: 0 10px; font-size: 11px; }
  .fpay-mc__c1, .fpay-mc__c2 { width: 16px; height: 16px; }
}

@media (max-width: 480px) {
  .footer-payments__label { font-size: 12px; }
  .footer-payments__logos { gap: 6px; }
  .fpay { height: 24px; min-width: 44px; padding: 0 8px; font-size: 10.5px; }
  .footer-legal-links a { font-size: 11.5px; }
  .footer__final-disclaimer { font-size: 11px; line-height: 1.75; }
}

/* ===== Conferbot widget - position on LEFT + mobile fixes ===== */
[id*="conferbot"],
[class*="conferbot"],
[id^="cb-"],
[class^="cb-"],
iframe[src*="conferbot"],
iframe[id*="conferbot"] {
  right: auto !important;
  left: 20px !important;
}

/* Mobile: ensure the chat panel fits the viewport without being clipped */
@media (max-width: 780px) {
  [id*="conferbot"],
  [class*="conferbot"],
  [id^="cb-"],
  [class^="cb-"],
  iframe[src*="conferbot"],
  iframe[id*="conferbot"] {
    left: 10px !important;
    right: 10px !important;
  }
  /* The expanded chat window — keep within viewport */
  iframe[src*="conferbot"]:not([style*="56px"]):not([style*="60px"]):not([style*="64px"]),
  div[id*="conferbot"][style*="height"]:not([style*="56px"]):not([style*="60px"]):not([style*="64px"]) {
    width: calc(100vw - 20px) !important;
    max-width: 380px !important;
    height: calc(100vh - 100px) !important;
    max-height: 600px !important;
    bottom: 80px !important;
    border-radius: 14px !important;
  }
  /* The small launcher button — keep tight to corner */
  iframe[src*="conferbot"][style*="56px"],
  iframe[src*="conferbot"][style*="60px"],
  iframe[src*="conferbot"][style*="64px"] {
    bottom: 16px !important;
    width: 56px !important;
    height: 56px !important;
  }
}

@media (max-width: 480px) {
  [id*="conferbot"],
  [class*="conferbot"],
  [id^="cb-"],
  [class^="cb-"],
  iframe[src*="conferbot"],
  iframe[id*="conferbot"] {
    left: 8px !important;
    right: 8px !important;
  }
  iframe[src*="conferbot"]:not([style*="56px"]):not([style*="60px"]):not([style*="64px"]),
  div[id*="conferbot"][style*="height"]:not([style*="56px"]):not([style*="60px"]):not([style*="64px"]) {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    height: calc(100vh - 90px) !important;
    max-height: none !important;
    bottom: 76px !important;
  }
}

/* ==================================================================
   HERO — NIGHT CITY SKYLINE EDITION
   Layered panorama city that rises from the water, with reflection.
   Layer slots: --l3 (far) → --l2 (mid) → --l1 (front). Phases 2 & 3
   only need a background-image + delay on their slots.
   ================================================================== */
.hero-city{
  position:absolute;
  left:0;right:0;bottom:0;
  height:clamp(280px,44vh,440px);
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  --water-h:18%;
}

/* Soft star field */
.hero-city__stars{
  position:absolute;inset:0 0 var(--water-h) 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,0.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 28% 42%,rgba(255,255,255,0.35) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%,rgba(255,255,255,0.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 61% 34%,rgba(255,255,255,0.3) 50%,transparent 51%),
    radial-gradient(1px 1px at 76% 20%,rgba(255,255,255,0.45) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 89% 44%,rgba(255,255,255,0.35) 50%,transparent 51%),
    radial-gradient(1px 1px at 53% 55%,rgba(255,255,255,0.25) 50%,transparent 51%);
  animation:cityStars 6s ease-in-out infinite alternate;
  opacity:.7;
}
@keyframes cityStars{from{opacity:.45}to{opacity:.85}}

/* Warm light bloom behind the skyline */
.hero-city__skyglow{
  position:absolute;left:0;right:0;bottom:var(--water-h);
  height:70%;
  background:
    radial-gradient(60% 100% at 30% 100%,rgba(255,170,80,0.10) 0%,transparent 65%),
    radial-gradient(55% 90% at 72% 100%,rgba(34,211,238,0.10) 0%,transparent 65%),
    linear-gradient(0deg,rgba(120,140,200,0.10) 0%,transparent 55%);
  opacity:0;
  animation:cityGlowIn 2.4s ease 0.3s both;
}
@keyframes cityGlowIn{from{opacity:0}to{opacity:1}}

/* Buildings — layers rise from behind the waterline */
.hero-city__layers{
  position:absolute;left:0;right:0;top:0;bottom:var(--water-h);
  overflow:hidden;
}
.hero-city__layer{
  position:absolute;left:-1.5%;right:-1.5%;bottom:0;
  height:100%;
  background-repeat:repeat-x;
  background-position:bottom center;
  transform:translateY(103%);
}
/* All city artwork (layer1, layer2, b1-b8) shares ONE 2000x663 canvas with
   the waterline baked at the bottom edge — so every tier MUST render at the
   exact same background-size (auto 100%) for the baselines to line up. */
/* Phase 3 — 8 individual landmark towers. Front-most tier, staggered rise.
   Each tower artwork is tightly cropped (own canvas, waterline at bottom),
   so each one is placed individually via --bx (background-position-x %).
   Desktop: two clusters pushed to the outer edges, clearing the hero copy.
   Mobile: re-composed into a centered skyline (see @media below). */
.hero-city__layer--b{
  z-index:5;
  left:0;right:0;
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-position:var(--bx,50%) bottom;
  filter:brightness(.96) saturate(.98) drop-shadow(0 -4px 24px rgba(34,211,238,0.06));
  animation:cityRise 1.6s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-city__layer--b1{background-image:url("../assets/img/city-b1.png");animation-delay:6.05s}
.hero-city__layer--b2{background-image:url("../assets/img/city-b2.png");animation-delay:5.05s}
.hero-city__layer--b3{background-image:url("../assets/img/city-b3.png");animation-delay:5.3s}
.hero-city__layer--b4{background-image:url("../assets/img/city-b4.png");animation-delay:6.3s}
.hero-city__layer--b5{background-image:url("../assets/img/city-b5.png");animation-delay:5.8s}
.hero-city__layer--b6{background-image:url("../assets/img/city-b6.png");animation-delay:4.8s}
.hero-city__layer--b7{background-image:url("../assets/img/city-b7.png");animation-delay:6.55s}
.hero-city__layer--b8{background-image:url("../assets/img/city-b8.png");animation-delay:5.55s}
/* Per-tower horizontal placement (shared by layer + its water reflection).
   b1 Shanghai WFC / b2 Gherkin / b3 Petronas / b4 blue tower /
   b5 CCTV / b6 Sydney Opera / b7 Burj Khalifa / b8 Museum of the Future */
.hero-city__layer--b3,.hero-city__reflection--b3{--bx:1%}
.hero-city__layer--b6,.hero-city__reflection--b6{--bx:7%}
.hero-city__layer--b4,.hero-city__reflection--b4{--bx:13%}
.hero-city__layer--b5,.hero-city__reflection--b5{--bx:21%}
.hero-city__layer--b1,.hero-city__reflection--b1{--bx:78%}
.hero-city__layer--b8,.hero-city__reflection--b8{--bx:85%}
.hero-city__layer--b7,.hero-city__reflection--b7{--bx:92%}
.hero-city__layer--b2,.hero-city__reflection--b2{--bx:99%}
/* tier 2 (phase 2 — live): rises AFTER tier 1 lands, settles at the SAME
   waterline level IN FRONT of tier 1, covering it (taller NYC towers). */
.hero-city__layer--l2{
  z-index:4;
  background-size:auto 100%;
  filter:brightness(.9) saturate(.95);
  animation:cityRise 2.5s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-city__layer--l2a{background-image:url("../assets/img/city-l2a.png");animation-delay:2.3s}
.hero-city__layer--l2b{background-image:url("../assets/img/city-l2b.png");animation-delay:2.65s}
/* tier 1 (phase 1 — live): front skyline split into 2 groups that rise
   with a small stagger between each group */
.hero-city__layer--l1{
  z-index:3;
  background-size:auto 100%;
  filter:drop-shadow(0 -6px 30px rgba(34,211,238,0.08));
  animation:cityRise 1.5s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-city__layer--l1a{background-image:url("../assets/img/city-l1a.png");animation-delay:0.1s}
.hero-city__layer--l1b{background-image:url("../assets/img/city-l1b.png");animation-delay:0.45s}
/* Tiny window-light glints on the tier-2 towers — fade in only after every
   layer has finished rising, then twinkle gently (opacity only = GPU cheap) */
.hero-city__sparkle{
  position:absolute;inset:0;
  z-index:4;
  background-repeat:no-repeat;
  opacity:0;
  pointer-events:none;
}
.hero-city__sparkle--1{
  background-image:
    radial-gradient(2px 2px at 15% 62%,rgba(255,255,255,0.95) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 37% 55%,rgba(190,230,255,0.9) 40%,transparent 62%),
    radial-gradient(2px 2px at 70% 58%,rgba(255,228,175,0.95) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 60% 68%,rgba(255,255,255,0.85) 40%,transparent 62%),
    radial-gradient(2px 2px at 5% 70%,rgba(255,238,195,0.9) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 90% 66%,rgba(190,230,255,0.85) 40%,transparent 62%);
  animation:citySparkle 3.6s ease-in-out 8.5s infinite;
}
.hero-city__sparkle--2{
  background-image:
    radial-gradient(1.5px 1.5px at 25% 72%,rgba(255,238,195,0.9) 40%,transparent 62%),
    radial-gradient(2px 2px at 52% 54%,rgba(255,255,255,0.9) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 44% 63%,rgba(255,228,175,0.9) 40%,transparent 62%),
    radial-gradient(2px 2px at 96% 60%,rgba(255,255,255,0.85) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 81% 57%,rgba(180,225,255,0.9) 40%,transparent 62%);
  animation:citySparkle 4.4s ease-in-out 9.9s infinite;
}
.hero-city__sparkle--3{
  background-image:
    radial-gradient(2px 2px at 10% 58%,rgba(190,230,255,0.9) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 31% 66%,rgba(255,255,255,0.9) 40%,transparent 62%),
    radial-gradient(2px 2px at 47% 71%,rgba(255,228,175,0.9) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 66% 52%,rgba(190,230,255,0.9) 40%,transparent 62%),
    radial-gradient(2px 2px at 76% 64%,rgba(255,238,195,0.95) 40%,transparent 62%),
    radial-gradient(1.5px 1.5px at 94% 73%,rgba(255,255,255,0.85) 40%,transparent 62%);
  animation:citySparkle 4s ease-in-out 9.1s infinite;
}
@keyframes citySparkle{
  0%,100%{opacity:0}
  12%{opacity:.9}
  32%{opacity:.2}
  55%{opacity:.75}
  76%{opacity:.12}
}
@keyframes cityRise{
  0%{transform:translateY(103%)}
  100%{transform:translateY(0)}
}

/* Water */
.hero-city__water{
  position:absolute;left:0;right:0;bottom:0;
  height:var(--water-h);
  overflow:hidden;
  background:linear-gradient(180deg,#0a1226 0%,#060b1a 45%,#03060f 100%);
}
/* Mirrors of the skyline hanging down INTO the water from the waterline.
   The element fills the water band; the image is anchored to the local
   bottom edge and the whole element is flipped about its center, so the
   mirrored city hangs downward from the waterline and fades with depth. */
/* ONE swaying wrapper carries every reflection — a single compositor layer
   moves on X instead of 12 individually-animated blurred layers (jank fix) */
.hero-city__sway{
  position:absolute;inset:0;
  will-change:transform;
  animation:citySwayX 7s ease-in-out infinite alternate;
}
@keyframes citySwayX{
  from{transform:translateX(-4px)}
  to{transform:translateX(4px)}
}
.hero-city__reflection--l1,
.hero-city__reflection--l2{
  position:absolute;top:0;bottom:0;left:-8px;right:-8px;
  background-repeat:repeat-x;
  background-position:bottom center;
  transform:scaleY(-1);
  filter:blur(2px) saturate(.8) brightness(.95);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.8) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.8) 100%);
  opacity:0;
}
.hero-city__reflection--l1{
  background-size:auto 455%;
  animation:cityReflectIn 1.8s ease both;
}
.hero-city__reflection--l1a{background-image:url("../assets/img/city-l1a.png");animation-delay:1.4s}
.hero-city__reflection--l1b{background-image:url("../assets/img/city-l1b.png");animation-delay:1.75s}
.hero-city__reflection--l2{
  background-size:auto 455%;
  z-index:2;
  animation:cityReflectIn 1.8s ease both;
}
.hero-city__reflection--l2a{background-image:url("../assets/img/city-l2a.png");animation-delay:4.8s}
.hero-city__reflection--l2b{background-image:url("../assets/img/city-l2b.png");animation-delay:5.15s}
/* Mirrors of the 8 phase-3 towers (same --bx placement as their layer) */
.hero-city__reflection--b{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  background-position:var(--bx,50%) bottom;
  background-size:auto 455%;
  transform:scaleY(-1);
  filter:blur(2px) saturate(.8) brightness(.95);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.8) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.8) 100%);
  opacity:0;
  z-index:3;
  animation:cityReflectIn 1.6s ease both;
}
.hero-city__reflection--b1{background-image:url("../assets/img/city-b1.png");animation-delay:7.25s}
.hero-city__reflection--b2{background-image:url("../assets/img/city-b2.png");animation-delay:6.25s}
.hero-city__reflection--b3{background-image:url("../assets/img/city-b3.png");animation-delay:6.5s}
.hero-city__reflection--b4{background-image:url("../assets/img/city-b4.png");animation-delay:7.5s}
.hero-city__reflection--b5{background-image:url("../assets/img/city-b5.png");animation-delay:7s}
.hero-city__reflection--b6{background-image:url("../assets/img/city-b6.png");animation-delay:6s}
.hero-city__reflection--b7{background-image:url("../assets/img/city-b7.png");animation-delay:7.75s}
.hero-city__reflection--b8{background-image:url("../assets/img/city-b8.png");animation-delay:6.75s}
@keyframes cityReflectIn{from{opacity:0}to{opacity:.55}}
/* Moving light shimmer on the water surface — a fixed-size gradient band
   swept across via transform (compositor-only, no repaint) */
.hero-city__shimmer{
  position:absolute;top:0;bottom:0;left:0;
  width:55%;
  background:linear-gradient(90deg,transparent 0%,rgba(34,211,238,0.05) 30%,rgba(255,190,110,0.05) 55%,transparent 100%);
  opacity:0;
  will-change:transform;
}
.hero-city__water .hero-city__shimmer{animation:cityShimmerIn 2s ease 1.2s both,cityShimmer 14s linear 1.2s infinite}
@keyframes cityShimmerIn{from{opacity:0}to{opacity:1}}
@keyframes cityShimmer{
  from{transform:translateX(-110%)}
  to{transform:translateX(292%)}
}
/* Glowing waterline where the city meets the water */
.hero-city__waterline{
  position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(140,190,255,0.28) 18%,rgba(255,205,130,0.34) 50%,rgba(140,190,255,0.28) 82%,transparent 100%);
  box-shadow:0 0 14px rgba(150,190,255,0.25);
  opacity:0;
  animation:cityGlowIn 1.6s ease 0.3s both;
}
/* Atmospheric haze so the content floats above the city — fully gradual,
   fades in AND out so it never paints a visible edge */
.hero-city__haze{
  position:absolute;left:0;right:0;top:0;height:58%;
  background:linear-gradient(180deg,rgba(6,9,20,0) 0%,rgba(6,9,20,0.30) 42%,rgba(6,9,20,0.16) 72%,rgba(6,9,20,0) 100%);
}

/* --- Hero content: single centered column above the skyline --- */
.hero .hero-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:0;
  height:100%;
  padding-top:clamp(24px,4.5vh,48px);
  padding-bottom:0;
}
.hero .hero-left{
  max-width:880px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero .hero-badge{margin-bottom:16px}
.hero .hero-title{margin-bottom:14px}
.hero .hero-sub{margin-left:auto;margin-right:auto;max-width:660px;margin-bottom:22px}
.hero .hero-cta{justify-content:center;margin-bottom:0}
.hero .hero-trust-mini{justify-content:center}

/* --- Floating glass bar: stats + regulators, hovering over the skyline ---
   Kept slim + highly translucent with a light blur so the towers behind it
   remain visible instead of being blocked by a heavy opaque panel */
.hero .hero-glassbar{
  display:inline-flex;
  align-items:center;
  gap:22px;
  margin-top:clamp(14px,2.5vh,26px);
  padding:10px 24px;
  background:linear-gradient(150deg,rgba(15,22,46,0.34) 0%,rgba(8,12,28,0.26) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(1.15);
  backdrop-filter:blur(7px) saturate(1.15);
  border:1px solid rgba(34,211,238,0.16);
  border-radius:16px;
  box-shadow:
    0 18px 44px -18px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 32px -14px rgba(34,211,238,0.16);
  animation:slideIn 1s 0.9s both;
  position:relative;
}
/* subtle top edge light */
.hero .hero-glassbar::before{
  content:"";
  position:absolute;
  top:-1px;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,0.55),transparent);
  pointer-events:none;
}
.hero .hero-glassbar .hero-mini-stats{
  display:flex;
  gap:36px;
  padding:0;
  border:none;
  margin:0;
  width:auto;
  max-width:none;
  animation:none;
}
.hero .hero-glassbar .mstat{align-items:center}
.hero .hero-glassbar .mstat em{white-space:nowrap}
.hero .hero-glassbar__divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,0.18),transparent);
  flex-shrink:0;
}
.hero .hero-glassbar .hero-trust-mini{
  animation:none;
  gap:12px;
  flex-wrap:nowrap;
}

@media (max-width:1100px){
  .hero-city{height:clamp(260px,38vh,400px)}
  .hero .hero-glassbar{gap:20px;padding:14px 22px}
  .hero .hero-glassbar .hero-mini-stats{gap:24px}
}
@media (max-width:768px){
  /* Phone: content stacks ABOVE the skyline — the city gets its own clear
     band at the bottom of the hero so nothing covers the towers */
  .hero-city{height:clamp(200px,30vh,280px)}
  .hero{padding-bottom:0}
  .hero .hero-wrap{
    padding-top:clamp(18px,3vh,32px);
    padding-bottom:calc(clamp(200px,30vh,280px) + 12px);
  }
  /* Glass bar stacks: 2x2 stats grid on top, regulators underneath */
  .hero .hero-glassbar{
    flex-direction:column;
    gap:14px;
    padding:16px 18px;
    width:100%;
    margin-top:clamp(16px,3vh,28px);
  }
  .hero .hero-glassbar .hero-mini-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    width:100%;
    padding:0;
    margin:0;
  }
  .hero .hero-glassbar .mstat strong{font-size:17px}
  .hero .hero-glassbar .mstat em{font-size:9.5px;white-space:normal;text-align:center}
  .hero .hero-glassbar__divider{
    width:100%;
    height:1px;
    align-self:auto;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
  }
  .hero .hero-glassbar .hero-trust-mini{flex-wrap:wrap;justify-content:center;gap:10px}
  /* keep ALL tiers at the same scale (shared canvas baseline) */
  .hero-city__reflection--l1,
  .hero-city__reflection--l2,
  .hero-city__reflection--b{background-size:auto 455%;filter:blur(1.5px) saturate(.8) brightness(.95)}
  /* Phase-3 towers: re-compose into one centered skyline for small screens
     (tallest in the middle, shorter landmarks layered toward the sides) */
  .hero-city__layer--b4,.hero-city__reflection--b4{--bx:2%}
  .hero-city__layer--b3,.hero-city__reflection--b3{--bx:16%}
  .hero-city__layer--b6,.hero-city__reflection--b6{--bx:30%}
  .hero-city__layer--b7,.hero-city__reflection--b7{--bx:50%}
  .hero-city__layer--b8,.hero-city__reflection--b8{--bx:68%}
  .hero-city__layer--b1,.hero-city__reflection--b1{--bx:84%}
  .hero-city__layer--b5,.hero-city__reflection--b5{--bx:93%}
  .hero-city__layer--b2,.hero-city__reflection--b2{--bx:100%}
}
@media (prefers-reduced-motion:reduce){
  .hero-city__layer,
  .hero-city__sway,
  .hero-city__reflection--l1,
  .hero-city__reflection--l2,
  .hero-city__reflection--b,
  .hero-city__skyglow,
  .hero-city__waterline,
  .hero-city__water .hero-city__shimmer{animation:none !important;transform:none}
  .hero-city__layer--l1,.hero-city__layer--l2,.hero-city__layer--b{transform:translateY(0)}
  .hero-city__reflection--l1,.hero-city__reflection--l2,.hero-city__reflection--b{transform:scaleY(-1);opacity:.5}
  .hero-city__skyglow,.hero-city__waterline{opacity:1}
  .hero-city__water .hero-city__shimmer{opacity:1}
}