:root{
  --brand:#00c389;
  --brand-600:#00b07d;
  --bg:#0f172a;
  --card:#111827;
  --soft:#1f2937;
  --text:#e5e7eb;
  --muted:#9aa3ad;

  /* Exness */
  --exness-yellow:#FFD800;
  --exness-black:#0b1220;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:hidden} /* prevent tiny horizontal scroll on mobile */
body{
  background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif
}

/* Typewriter caret */
.cj-caret{
  display:inline-block; width:1px; height:1em;
  background:var(--text); margin-left:2px; vertical-align:-0.15em;
  animation:cj-blink 1s steps(2,start) infinite;
}
@keyframes cj-blink { to { background:transparent; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cj-caret{ animation:none; }
}

/* Layout helpers */
.pt-fixed{padding-top:72px}
.bg-soft{background:var(--soft)!important}
.bg-darker{background:#0b1220}
.text-brand{color:var(--brand)!important}
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Navbar (glass) */
.navbar{backdrop-filter:saturate(1.2) blur(8px);background:rgba(15,23,42,.7)!important;border-bottom:1px solid rgba(255,255,255,.06)}
.navbar .nav-link{color:var(--text)!important}
.navbar .nav-link.active{color:var(--brand)!important}

/* Force white burger icon + clearer border */
.navbar-dark .navbar-toggler{
  border-color:rgba(255,255,255,.6);
}
.navbar-dark .navbar-toggler-icon{
  /* pure white 3 bars */
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  filter:none!important; /* override any previous filter */
}

/* Buttons */
.btn-brand{
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-600);
  --bs-btn-hover-border-color:var(--brand-600);
  color:#081b17;font-weight:600
}
/* Ghost light buttons must stay readable (white) */
.btn-ghost-light{
  --bdr: rgba(255,255,255,.28);
  color:#ffffff !important;
  border:1px solid var(--bdr);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, transform .15s ease, background .2s ease;
}
.btn-ghost-light:hover{
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}

/* Cards */
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);transition:transform .25s ease}
.card:hover{transform:translateY(-2px)}

/* Hero */
.hero{min-height:65vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 110% -10%, rgba(0,195,137,.18), transparent 60%)}
.hero-stats .h3{font-weight:700}

/* Media/thumbs */
.thumb{aspect-ratio:16/9;background:#0b1220;border-radius:.5rem;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02)}
.locked::after{content:"Login to watch";position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-weight:600;letter-spacing:.2px;border-radius:.5rem}
.play-badge{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);padding:.35rem .5rem;border-radius:.375rem;font-size:.85rem}

/* Tables */
.table td,.table th{color:var(--text)}
.table thead{border-bottom:1px solid rgba(255,255,255,.08)}

/* Utility */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.footer{color:var(--muted)}
.badge-admin{background:rgba(0,195,137,.15);border:1px solid rgba(0,195,137,.35);color:#9ff3d5}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);transition:all .5s ease}
.reveal.in{opacity:1;transform:none}

/* TradingView container (responsive height) */
.tv-embed{ height: clamp(280px, 52vh, 520px); }

/* Reveal-from-sides */
.reveal-right{ opacity:0; transform:translateX(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal-right.in{ opacity:1; transform:none; }
.reveal-left{ opacity:0; transform:translateX(-24px); transition:opacity .6s ease, transform .6s ease; }
.reveal-left.in{ opacity:1; transform:none; }

/* Big footer */
.footer-lg{
  background: linear-gradient(180deg, rgba(15,23,42,.8), #0b1220 70%);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Footer links */
.footer-nav a{
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  padding: .2rem 0;
  opacity: .85;
}
.footer-nav a:hover{ color: var(--brand); opacity: 1; }

/* Social icons */
.social-links a{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: var(--text);
  opacity: .9;
}
.social-links a:hover{ color: #0f172a; background: var(--brand); border-color: var(--brand); }

.footer-info li{ margin-bottom: .4rem; }
.footer-info i{ margin-right: .4rem; }

/* Floating WhatsApp button (safe-area aware) */
.whatsapp-fab{
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 1050;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #0b1220;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.45); text-decoration: none; }
.whatsapp-fab i{ font-size: 1.5rem; line-height: 1; }

/* Avatar-style round logos used elsewhere */
.logo{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.logo img{ width: 100%; height: 100%; object-fit: cover; }

/* Snapshot card headers (keep single line) */
.tv-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; white-space:nowrap;
}
.tv-card-head > * { white-space:nowrap; }

/* Lock mini TradingView widget height */
.mini-tv{ height: 180px; }

/* Announce badge */
.badge-announce{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .75rem;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  font-size:.875rem;
}
.badge-announce .dot{
  width:8px;height:8px;border-radius:50%;
  background:#00c389;box-shadow:0 0 0 0 rgba(0,195,137,.45);
  animation: ping 1.8s infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(0,195,137,.45)}
  70%{box-shadow:0 0 0 10px rgba(0,195,137,0)}
  100%{box-shadow:0 0 0 0 rgba(0,195,137,0)}
}

/* ——— NAV: glass + gradient details ——— */
.cj-navbar{
  background: rgba(9,14,24,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
  padding-block: .6rem;
  position: relative;
  isolation: isolate;
}
.cj-navbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg,#2BD4A6, #8AF0C9, #2BD4A6);
  background-size: 200% 100%;
  animation: moveGrad 7s linear infinite;
  opacity:.65;
}
@keyframes moveGrad { to { background-position: 200% 0; } }

.cj-navbar.scrolled{
  background: rgba(9,14,24,.8);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding-block: .4rem;
}

/* Brand: scope navbar logo ONLY to brand container to avoid clashes */
.brand-glow .logo{
  width: 34px; height: 34px; object-fit: contain;
  border-radius: 0; /* keep brand mark square; remove if you want it round */
  filter: drop-shadow(0 4px 12px rgba(0,195,137,.18));
  transition: transform .2s ease;
}
.brand-glow:hover .logo{ transform: translateY(-1px) scale(1.03); }

.brand-text{
  background: linear-gradient(90deg,#FFFFFF,#CFFAEA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing:.3px;
}

/* Links: animated underline + active glow */
.nav-link{
  position: relative;
  padding:.4rem .6rem;
  color: #cbd5e1!important; /* ensure not overridden to dark */
  transition: color .2s ease, opacity .2s ease;
}
.nav-link:hover{ color:#fff!important; }
.link-spark::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.15rem; height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#2BD4A6,#8AF0C9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  opacity:.9;
}
.nav-link:hover::after{ transform: scaleX(1); }
.nav-link.active{
  color:#fff!important;
  text-shadow: 0 0 20px rgba(43,212,166,.25);
}
.nav-link.active::after{ transform: scaleX(1); }

/* Admin badge with tiny pulse */
.badge-admin{
  display:inline-flex; align-items:center; gap:.35rem;
  background: rgba(43,212,166,.12);
  color:#93f2d7; border:1px solid rgba(43,212,166,.28);
  padding:.35rem .55rem; border-radius: 999px; font-weight:600;
}
.pulse-dot{
  width:8px;height:8px;border-radius:50%; background:#2BD4A6;
  box-shadow: 0 0 0 0 rgba(43,212,166,.45);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(43,212,166,.45)}
  70%{box-shadow:0 0 0 10px rgba(43,212,166,0)}
  100%{box-shadow:0 0 0 0 rgba(43,212,166,0)}
}

/* Toggler focus polish */
.cj-tog{
  border:1px solid rgba(255,255,255,.6);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.cj-tog:focus{ box-shadow: 0 0 0 .2rem rgba(43,212,166,.25); }

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .cj-navbar, .brand-glow .logo, .nav-link, .btn-ghost-light { transition: none !important; }
  .cj-navbar::after, .pulse-dot, .btn-brand.glow-sweep::after { animation: none !important; }
}

/* ===== Recommended Broker (Exness) ===== */
.broker-card{
  position: relative; overflow: hidden;
  background: var(--exness-black);
  border-radius: .75rem;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--exness-black), var(--exness-black)) padding-box,
    linear-gradient(135deg, rgba(255,216,0,.6), rgba(255,216,0,.1)) border-box;
}
.broker-card::before{
  content:''; position:absolute; inset:-20%;
  background:
    radial-gradient(600px 320px at 10% -10%, rgba(255,216,0,.10), transparent 60%),
    radial-gradient(520px 260px at 110% 110%, rgba(255,216,0,.08), transparent 70%);
  filter: blur(10px);
  pointer-events:none;
}
.broker-card > *{ position:relative; z-index:1; }

/* Scale the SVG/logo and prevent layout break on mobile */
.broker-logo{
  height: 40px; width:auto; display:block; max-width: 160px;
}
@media (max-width: 576px){
  .broker-logo{ height: 34px; max-width: 130px; }
}

/* Ensure the text block beside logo can shrink and wrap */
.broker-card .d-flex.align-items-center.gap-3 > div:nth-child(2){
  min-width: 0; /* allow wrapping/truncation */
}
.broker-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem;
  background: rgba(255,216,0,.10);
  border:1px solid rgba(255,216,0,.25);
  color: var(--exness-yellow);
  padding:.35rem .7rem; border-radius:999px;
}

/* Buttons (force non-black) */
.btn-exness{
  background: var(--exness-yellow) !important;
  color: #111 !important;
  border: 1px solid var(--exness-yellow) !important;
  min-width: 170px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-exness:hover{
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255,216,0,.25);
  filter: brightness(1.02);
}
.btn-exness-outline{
  background: transparent !important;
  color: var(--exness-yellow) !important;
  border: 1px solid rgba(255,216,0,.6) !important;
  min-width: 150px;
}
.broker-card .btn-exness-outline:hover,
.broker-card .btn-exness-outline:focus,
.broker-card .btn-exness-outline:active {
  color: #fff !important;
  background: rgba(255,216,0,.12) !important;
  box-shadow: 0 6px 18px rgba(255,216,0,.18) inset !important;
}

/* small polish for the right-side CTA group on narrow screens */
@media (max-width: 576px){
  .broker-cta{ width:100%; }
  .broker-cta .btn{ flex:1; }
}

/* ===== Testimonials ===== */
/* Force testimonial text to white even if incoming content has dark classes */
#testi, #testiInner, #testi .carousel-item, #testi .carousel-item *{
  color: var(--text) !important;
}
#testi .carousel-inner{ background: var(--card); }
#testi .carousel-control-prev-icon,
#testi .carousel-control-next-icon{ filter: invert(1) contrast(1.2); }

/* ===== Contact page (right card) ===== */
/* Make contact info text white */
.card .d-grid.gap-2 .align-items-center span{
  color: var(--text) !important;
}

/* ===== Mobile polish ===== */
@media (max-width: 575.98px){
  .hero { padding-block: 2rem; }
  .display-5 { font-size: 1.75rem; line-height: 1.2; }
  .lead { font-size: 1rem; }
  .hero-stats { gap: 1.1rem; }
  .btn.btn-lg { padding:.6rem 1rem; font-size:1rem; }
  .mini-tv { height: 160px; }
}

/* Buttons: ghost + sweep (kept) */
.btn-brand.glow-sweep{ position: relative; overflow: hidden; }
.btn-brand.glow-sweep::after{
  content:""; position:absolute; top:0; bottom:0; left:-150%;
  width:50%; transform: skewX(-20deg);
  background: linear-gradient(120deg,transparent, rgba(255,255,255,.4), transparent);
}
.btn-brand.glow-sweep:hover::after{ animation: sweep .75s ease forwards; }
@keyframes sweep{ to { left:160%; } }
.broker-logo { height: 40px; max-width: 160px; } 
/* Prevent broker row overflow + allow wraps */
.broker-card{ overflow: hidden; }
.broker-head{ flex-wrap: wrap; }
.broker-meta{ min-width: 0; }              /* let text wrap instead of pushing width */
.broker-meta h5, .broker-meta .small{ white-space: normal; }

/* Buttons & layout on small screens: full width, no overflow */
@media (max-width: 576.98px){
  .broker-card{ padding: 1rem !important; }
  .broker-cta{ width:100%; flex-wrap:wrap; }
  .broker-cta .btn{ flex:1 1 100%; min-width:0; }  /* stack buttons nicely */
  .broker-logo{ height: 34px; max-width: 130px; }  /* already in your CSS, keep */
}