@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Orbitron:wght@600;700;800&display=swap');
:root{--bg:#050505;--panel:#0e0e0f;--panel2:#151515;--gold:#e2ad31;--gold2:#ffe083;--muted:#a8a8aa;--line:rgba(226,173,49,.25);--white:#f7f5ee;--shadow:0 0 35px rgba(226,173,49,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}.container{width:min(1180px,calc(100% - 40px));margin:auto}.section-pad{padding:110px 0;position:relative}.alt-section{background:linear-gradient(180deg,#080808,#030303)}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:90;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.scroll-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#8a5e00,#ffe585);width:0;z-index:120}.watermark{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0;opacity:.035}.watermark img{width:min(58vw,720px);filter:grayscale(1) sepia(1) hue-rotate(350deg) saturate(3)}main,footer,.site-header{position:relative;z-index:2}.site-header{position:sticky;top:0;z-index:100;padding:14px 0;background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.55),transparent);backdrop-filter:blur(10px)}.navbar{height:78px;background:rgba(18,18,18,.92);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;padding:10px 18px;position:relative;overflow:hidden}.navbar:before,.navbar:after{content:"";position:absolute;width:90px;height:2px;background:linear-gradient(90deg,transparent,var(--gold2));animation:headerMove 4s linear infinite}.navbar:before{left:0;top:0}.navbar:after{right:0;bottom:0;transform:rotate(180deg)}@keyframes headerMove{0%{transform:translateX(-100%)}100%{transform:translateX(1400%)}}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;position:relative;z-index:2}.brand img{width:56px;height:56px;object-fit:contain}.brand span{display:flex;flex-direction:column}.brand b{font-family:Orbitron,sans-serif;letter-spacing:1.4px;color:var(--gold2)}.brand small{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#d4d4d4}.nav-links{display:flex;align-items:center;gap:25px}.nav-links>a:not(.btn){color:#eee;text-decoration:none;font-size:14px;font-weight:700;position:relative}.nav-links>a:not(.btn):after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--gold);transition:.3s}.nav-links>a:hover:after{right:0}.btn{--b:1px;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:12px;color:#fff;text-decoration:none;font-weight:800;position:relative;background:linear-gradient(#101010,#101010) padding-box,conic-gradient(from var(--angle),transparent 20%,var(--gold2),transparent 45%) border-box;border:var(--b) solid transparent;box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 25px rgba(226,173,49,.16);animation:borderSpin 3s linear infinite;overflow:hidden}.btn:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,224,131,.24),transparent 38%);opacity:0;transition:.3s}.btn:hover:before{opacity:1}.btn span{position:relative;z-index:1}.btn.compact{min-height:42px;padding:0 18px;font-size:13px}.btn.ghost{background:linear-gradient(#050505,#050505) padding-box,conic-gradient(from var(--angle),transparent 25%,#8d6717,transparent 55%) border-box}@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes borderSpin{to{--angle:360deg}}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px}.hero{min-height:820px;display:grid;align-items:center;overflow:hidden;background:radial-gradient(circle at 72% 40%,rgba(226,173,49,.14),transparent 28%),radial-gradient(circle at 15% 30%,rgba(12,47,125,.18),transparent 32%)}.hero-grid,.split-grid,.trading-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.eyebrow{display:inline-block;color:var(--gold2);font-weight:800;font-size:12px;letter-spacing:2.3px;margin-bottom:18px}.hero h1,.section-copy h2,.section-heading h2,.cta-box h2{font-family:Orbitron,sans-serif;line-height:1.08;margin:0 0 22px}.hero h1{font-size:clamp(45px,6.2vw,82px);max-width:790px}.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#b77c04,#ffe99a,#c88b10);-webkit-background-clip:text;background-clip:text}.hero p,.section-copy p,.section-heading p,.cta-box p{color:#bebec2;line-height:1.8;font-size:17px}.hero-actions{display:flex;gap:15px;margin:34px 0}.hero-pills{display:flex;flex-wrap:wrap;gap:10px}.hero-pills span{padding:9px 13px;border:1px solid var(--line);background:#0c0c0c;border-radius:30px;font-size:12px;color:#ddd}.hero-visual{min-height:570px;display:grid;place-items:center;position:relative}.coin-shell{width:min(420px,80vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#1b1b1b 0 48%,#030303 49% 55%,#8e650e 56%,#171717 60%,#030303 67%);box-shadow:0 0 90px rgba(226,173,49,.22);animation:float 5s ease-in-out infinite}.coin-shell img{width:54%;filter:drop-shadow(0 0 30px rgba(255,208,69,.3))}.coin-ring{position:absolute;inset:0px;border:3px solid rgba(255,210,85,.25);border-radius:50%}.ring-a{animation:spin 18s linear infinite}.ring-b{inset:9px;border-style:dashed;animation:spin 30s linear reverse infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-14px)}}.floating-card{position:absolute;background:rgba(12,12,12,.86);border:1px solid var(--line);padding:14px 18px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;backdrop-filter:blur(8px)}.floating-card strong{font-family:Orbitron;color:var(--gold2);font-size:22px}.floating-card span{font-size:11px;color:#bbb}.fc-one{left:2%;top:20%;animation:float 4s ease-in-out infinite}.fc-two{right:0;bottom:17%;animation:float 5.5s ease-in-out infinite}.hero-orbit{position:absolute;border:1px solid rgba(226,173,49,.1);border-radius:50%}.orbit-one{width:600px;height:600px;right:-220px;top:80px}.orbit-two{width:400px;height:400px;left:-200px;bottom:-50px}.section-copy h2,.section-heading h2,.cta-box h2{font-size:clamp(32px,4vw,54px)}.check-list{list-style:none;padding:0;margin:28px 0}.check-list li{margin:14px 0;padding-left:30px;color:#d7d7da;position:relative}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--gold2);font-weight:900}.feature-cluster{display:grid;grid-template-columns:1fr 1fr;gap:18px}.glass-card,.service-card,.timeline-card{background:linear-gradient(145deg,#151515,#090909);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}.glass-card{padding:25px;border-radius:18px;min-height:190px;transition:.35s}.glass-card:hover,.service-card:hover,.timeline-card:hover{transform:translateY(-7px);border-color:var(--line)}.glass-card i{font-style:normal;font-size:28px;color:var(--gold2)}.glass-card h3{margin:12px 0 8px}.glass-card p,.service-card p,.timeline-card p{color:var(--muted);line-height:1.7;font-size:14px}.section-heading{text-align:center;max-width:820px;margin:0 auto 55px}.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{border-radius:22px;padding:34px;min-height:350px;position:relative;overflow:hidden;transition:.35s}.service-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(226,173,49,.08);right:-70px;bottom:-80px;filter:blur(8px)}.icon-box{width:70px;height:70px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#191919,#090909);border:1px solid var(--line);font:800 20px Orbitron;color:var(--gold2);box-shadow:inset 0 0 20px rgba(226,173,49,.08),0 0 30px rgba(226,173,49,.09)}.service-card h3{font:700 22px Orbitron;margin-top:30px}.service-card span{display:block;color:var(--gold2);font-size:12px;font-weight:800;margin-top:35px}.align-center{align-items:center}.ai-core{min-height:560px;display:grid;place-items:center;position:relative}.chip{width:min(330px,78vw);aspect-ratio:1;border-radius:34px;background:linear-gradient(145deg,#292929,#080808);border:10px solid #181818;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 40px rgba(226,173,49,.15),0 0 70px rgba(226,173,49,.2);position:relative;z-index:2;transform:rotate(-5deg)}.chip:before{content:"";position:absolute;inset:14px;border:1px solid var(--line);border-radius:23px}.chip span{font:800 22px Orbitron;color:#ddd}.chip b{font:800 92px Orbitron;background:linear-gradient(#fff4ad,#bd7e00);-webkit-background-clip:text;color:transparent}.chip small{letter-spacing:2px;color:#999}.pulse{position:absolute;width:380px;height:380px;border:1px solid var(--line);border-radius:50%;animation:pulse 3s ease-out infinite}.p2{animation-delay:1s}.p3{animation-delay:2s}@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.45);opacity:0}}.mini-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.mini-steps div{background:#101010;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px}.mini-steps b{color:var(--gold2);margin-right:9px}.mini-steps span{font-weight:800}.mini-steps small{display:block;color:#888;margin:8px 0 0 34px}.timeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.timeline-card{padding:28px;border-radius:18px;position:relative;transition:.35s}.timeline-card b{color:#6e6e74;font-family:Orbitron}.timeline-card i{display:block;font-style:normal;font-size:30px;color:var(--gold2);margin:24px 0 12px}.timeline-card h3{font-size:17px}.terminal{background:#0a0a0a;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 25px 80px rgba(0,0,0,.55),0 0 40px rgba(226,173,49,.12);transform:perspective(1000px) rotateY(5deg)}.terminal-top{display:flex;align-items:center;gap:7px;color:#777;font-size:11px}.terminal-top span{width:9px;height:9px;border-radius:50%;background:#5f4a16}.terminal-top b{margin-left:auto;color:var(--gold2);font-family:Orbitron}.chart{height:300px;margin:25px 0;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(226,173,49,.05),transparent);border-radius:12px}.chart-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px}.chart svg{position:absolute;inset:0;width:100%;height:100%}.terminal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.terminal-stats span{padding:13px;background:#121212;border-radius:10px}.terminal-stats small{display:block;color:#777}.terminal-stats b{font-size:12px;color:var(--gold2)}.trade-list{margin-top:28px}.trade-list>div{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}.trade-list b{font-family:Orbitron;color:var(--gold2)}.trade-list span{display:flex;flex-direction:column}.trade-list small{color:#999;margin-top:6px;line-height:1.5}.faq-wrap{max-width:920px}.accordion details{background:#111;border:1px solid rgba(255,255,255,.06);border-radius:15px;margin:12px 0;overflow:hidden}.accordion summary{list-style:none;padding:22px 24px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between}.accordion summary::-webkit-details-marker{display:none}.accordion summary span{color:var(--gold2);font-size:22px}.accordion p{margin:0;padding:0 24px 24px;color:#aaa;line-height:1.7}.cta-section{padding-top:60px}.cta-box{background:linear-gradient(100deg,#111,#181208,#0d0d0d);border:1px solid var(--line);border-radius:28px;padding:45px;display:grid;grid-template-columns:150px 1fr auto;gap:35px;align-items:center;box-shadow:var(--shadow);overflow:hidden}.cta-box img{width:140px;filter:drop-shadow(0 0 25px rgba(226,173,49,.25))}footer{border-top:1px solid rgba(255,255,255,.06);background:#030303;padding:35px 0}.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:25px}.footer-brand img{width:45px;height:45px}.footer-grid p{color:#777;font-size:13px}.footer-links{display:flex;gap:18px}.footer-links a{color:#8b8b8e;text-decoration:none;font-size:13px}.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#111;color:var(--gold2);z-index:80;opacity:0;transform:translateY(20px);transition:.3s}.to-top.show{opacity:1;transform:none}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.13s}.delay-2{transition-delay:.26s}.delay-3{transition-delay:.39s}
@media(max-width:980px){.nav-links{position:absolute;left:0;right:0;top:78px;display:none;flex-direction:column;background:#101010;padding:25px;border:1px solid var(--line)}.nav-links.open{display:flex}.menu-toggle{display:block}.navbar{overflow:visible}.hero-grid,.split-grid,.trading-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-actions,.hero-pills{justify-content:center}.hero-visual{min-height:480px}.cards-3{grid-template-columns:1fr 1fr}.timeline-grid{grid-template-columns:1fr 1fr}.cta-box{grid-template-columns:110px 1fr}.cta-box .btn{grid-column:1/-1}.footer-grid{flex-direction:column;text-align:center}}@media(max-width:640px){.container{width:min(100% - 24px,1180px)}.section-pad{padding:78px 0}.site-header{padding:8px 0}.navbar{height:68px;padding:8px 12px}.brand img{width:45px;height:45px}.brand b{font-size:13px}.brand small{font-size:7px}.nav-links{top:68px}.hero{min-height:auto;padding-top:80px}.hero h1{font-size:42px}.hero p,.section-copy p,.section-heading p{font-size:15px}.hero-actions{flex-direction:column}.btn{width:100%}.hero-visual{min-height:390px}.coin-shell{width:285px}.floating-card{padding:10px 12px}.feature-cluster,.cards-3,.timeline-grid,.mini-steps{grid-template-columns:1fr}.service-card{min-height:auto}.terminal{transform:none}.terminal-stats{grid-template-columns:1fr}.cta-box{grid-template-columns:1fr;text-align:center;padding:30px 22px}.cta-box img{margin:auto}.footer-links{flex-wrap:wrap;justify-content:center}.section-heading{text-align:left}.orbit-one,.orbit-two{display:none}}


/* =========================================================
   HYBRIX GOLD + BLUE RUNNING BORDER UPGRADE
   Applied to the MAIN HYBRIX website (not the Coming Soon page)
   ========================================================= */

:root{
  --electric-blue:#1264ff;
  --electric-blue-soft:#6ea2ff;
}

/* Shared animated-border base */
.btn,
.hero-pills span,
.floating-card,
.glass-card,
.service-card,
.timeline-card,
.mini-steps div,
.terminal,
.trade-list > div,
.accordion details,
.cta-box,
.icon-box,
.to-top{
  /*position:relative;*/
  isolation:isolate;
  border-color:transparent !important;
  background:
    linear-gradient(145deg,#151515,#080808) padding-box,
    conic-gradient(
      from var(--angle),
      transparent 0deg 245deg,
      var(--electric-blue) 278deg,
      #d9e8ff 302deg,
      var(--gold2) 330deg,
      #ffbd18 348deg,
      transparent 360deg
    ) border-box !important;
  border:1px solid transparent !important;
  animation:borderSpin 4s linear infinite;
  box-shadow:
    0 18px 42px rgba(0,0,0,.48),
    0 0 24px rgba(18,100,255,.08),
    0 0 26px rgba(226,173,49,.10);
}

/* Make the moving light visibly splash around corners */
.btn::after,
.hero-pills span::after,
.floating-card::after,
.glass-card::after,
.service-card::before,
.timeline-card::after,
.mini-steps div::after,
.terminal::after,
.trade-list > div::after,
.accordion details::after,
.cta-box::after,
.icon-box::after,
.to-top::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--spark-x,15%) var(--spark-y,0%),
      rgba(255,235,155,.58) 0 1px,
      rgba(18,100,255,.40) 2px,
      transparent 16%);
  filter:blur(.2px);
  animation:borderSpark 3.8s linear infinite;
}

@keyframes borderSpark{
  0%{--spark-x:5%;--spark-y:0%;opacity:.65}
  25%{--spark-x:100%;--spark-y:10%;opacity:1}
  50%{--spark-x:95%;--spark-y:100%;opacity:.75}
  75%{--spark-x:0%;--spark-y:90%;opacity:1}
  100%{--spark-x:5%;--spark-y:0%;opacity:.65}
}

/* Buttons use a stronger gold/blue sweep */
.btn{
  background:
    linear-gradient(#101010,#101010) padding-box,
    conic-gradient(
      from var(--angle),
      transparent 0deg 230deg,
      var(--electric-blue) 270deg,
      #d8e6ff 300deg,
      var(--gold2) 328deg,
      #ffb800 350deg,
      transparent 360deg
    ) border-box !important;
  border-width:2px !important;
}

.btn.ghost{
  background:
    linear-gradient(#050505,#050505) padding-box,
    conic-gradient(
      from var(--angle),
      transparent 0deg 225deg,
      #073bba 265deg,
      var(--electric-blue-soft) 295deg,
      var(--gold2) 330deg,
      transparent 360deg
    ) border-box !important;
}

/* Header changed to a premium gold-blue animated frame */
.navbar{
  border:2px solid transparent !important;
  border-radius:18px;
  background:
    linear-gradient(rgba(18,18,18,.95),rgba(12,12,13,.94)) padding-box,
    conic-gradient(
      from var(--angle),
      transparent 0deg 235deg,
      var(--electric-blue) 278deg,
      #e3ecff 300deg,
      var(--gold2) 332deg,
      transparent 360deg
    ) border-box !important;
  animation:borderSpin 5s linear infinite;
  box-shadow:
    0 18px 48px rgba(0,0,0,.56),
    0 0 25px rgba(18,100,255,.09),
    0 0 28px rgba(226,173,49,.12);
}

.navbar::before{
  width:160px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--electric-blue),var(--gold2),transparent);
  animation:headerMove 3.4s linear infinite;
}
.navbar::after{
  width:160px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold2),var(--electric-blue),transparent);
  animation:headerMove 3.4s linear infinite reverse;
}

/* Gold-blue glow on hover */
.glass-card:hover,
.service-card:hover,
.timeline-card:hover,
.trade-list > div:hover,
.accordion details:hover,
.hero-pills span:hover,
.floating-card:hover,
.mini-steps div:hover{
  transform:translateY(-7px);
  box-shadow:
    0 22px 48px rgba(0,0,0,.55),
    0 0 30px rgba(18,100,255,.16),
    0 0 32px rgba(226,173,49,.18);
}

/* Keep service card decorative circle without interfering */
.service-card:after{
  z-index:-1;
}

/* Scroll reveal gets a subtle blue-gold glow when entering */
.reveal.show{
  animation:revealGlow .85s ease both;
}
@keyframes revealGlow{
  0%{
    opacity:0;
    transform:translateY(34px) scale(.985);
    filter:drop-shadow(0 0 0 transparent);
  }
  70%{
    opacity:1;
    transform:translateY(-3px) scale(1);
    filter:drop-shadow(0 0 18px rgba(18,100,255,.08))
           drop-shadow(0 0 18px rgba(226,173,49,.08));
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

/* Background animated energy beams */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto;
  z-index:0;
  pointer-events:none;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(95px);
  opacity:.11;
  animation:bgGlow 8s ease-in-out infinite alternate;
}
body::before{
  left:-170px;
  top:20%;
  background:var(--electric-blue);
}
body::after{
  right:-180px;
  bottom:8%;
  background:var(--gold);
  animation-delay:1.8s;
}
@keyframes bgGlow{
  from{transform:translate3d(0,0,0) scale(.9)}
  to{transform:translate3d(55px,-38px,0) scale(1.12)}
}

/* Responsive border speed and lighter effects */
@media(max-width:768px){
  .btn,
  .hero-pills span,
  .floating-card,
  .glass-card,
  .service-card,
  .timeline-card,
  .mini-steps div,
  .terminal,
  .trade-list > div,
  .accordion details,
  .cta-box,
  .icon-box,
  .to-top,
  .navbar{
    animation-duration:5.5s;
  }
}


/* =========================================================
   FULL CENTER HEADER + INTERACTIVE TRADING UPGRADE
   ========================================================= */

@property --angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

.navbar-centered{
  position:sticky;
  top:14px;
  z-index:1000;
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  min-height:104px;
  padding:10px 22px !important;
  overflow:visible;
}

.nav-wing{
  display:flex;
  align-items:center;
  gap:16px;
}
.nav-left{justify-content:flex-end}
.nav-right{justify-content:flex-start}

.brand-center{
  width:150px;
  height:116px;
  border-radius:26px;
  display:grid !important;
  place-items:center;
  position:relative;
  overflow:hidden;
  padding:5px;
  background:
    linear-gradient(#111113,#050506) padding-box,
    conic-gradient(
      from var(--angle),
      transparent 0 240deg,
      #1264ff 275deg,
      #e5efff 305deg,
      #f4c451 335deg,
      transparent 360deg
    ) border-box !important;
  border:2px solid transparent !important;
  animation:borderSpin 4s linear infinite;
  box-shadow:
    0 18px 44px rgba(0,0,0,.58),
    0 0 26px rgba(18,100,255,.12),
    0 0 28px rgba(244,196,81,.15);
}
.brand-center img{
  width:130px !important;
  height:92px !important;
  object-fit:contain;
  animation:logoFloat 3s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(244,196,81,.24));
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

.running-border{
  position:relative;
  isolation:isolate;
  border:2px solid transparent !important;
  background:
    linear-gradient(145deg,rgba(18,18,20,.96),rgba(6,6,7,.94)) padding-box,
    conic-gradient(
      from var(--angle),
      transparent 0 238deg,
      #1264ff 275deg,
      #d9e9ff 304deg,
      #f4c451 334deg,
      #ffba18 350deg,
      transparent 360deg
    ) border-box !important;
  animation:borderSpin 4.4s linear infinite;
  box-shadow:
    0 18px 42px rgba(0,0,0,.48),
    0 0 26px rgba(18,100,255,.08),
    0 0 28px rgba(244,196,81,.10);
}
.running-border:hover{
  box-shadow:
    0 22px 48px rgba(0,0,0,.56),
    0 0 34px rgba(18,100,255,.17),
    0 0 36px rgba(244,196,81,.20);
}

.trading-execution-section{
  padding-top:110px;
  padding-bottom:110px;
  position:relative;
}
.trading-execution-section::before{
  content:"";
  position:absolute;
  inset:12% -8% auto;
  height:520px;
  background:
    radial-gradient(circle at 18% 45%,rgba(18,100,255,.09),transparent 25%),
    radial-gradient(circle at 78% 40%,rgba(244,196,81,.08),transparent 27%);
  pointer-events:none;
  z-index:-1;
}
.trading-execution-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:28px;
  align-items:stretch;
}
.trade-visual-shell{
  min-height:590px;
  border-radius:28px;
  padding:20px;
}
.trade-visual-stage{
  min-height:548px;
  border-radius:22px;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 35%,rgba(244,196,81,.16),transparent 32%),
    linear-gradient(180deg,#0f1014,#050506);
}
.trade-visual-stage::before,
.trade-visual-stage::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(244,196,81,.17);
  width:350px;
  height:350px;
  animation:visualOrbit 13s linear infinite;
}
.trade-visual-stage::after{
  width:250px;
  height:250px;
  border-style:dashed;
  border-color:rgba(18,100,255,.24);
  animation-duration:8s;
  animation-direction:reverse;
}
@keyframes visualOrbit{to{transform:rotate(360deg)}}

.trade-svg{
  width:min(78%,390px);
  min-height:330px;
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  transition:.3s ease;
}
.trade-svg svg{
  width:100%;
  height:100%;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.7));
}
.trade-visual-copy{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  z-index:3;
  padding:17px 18px;
  border-radius:16px;
  background:rgba(6,6,8,.78);
  border:1px solid rgba(244,196,81,.23);
  backdrop-filter:blur(12px);
}
.trade-visual-copy span{
  display:block;
  color:#ffe993;
  font-weight:800;
  margin-bottom:5px;
}
.trade-visual-copy p{
  color:#aaaab3;
  font-size:14px;
  line-height:1.6;
}

.trade-hover-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.trade-hover-item{
  min-height:92px;
  border-radius:20px;
  padding:22px 64px 22px 24px;
  cursor:pointer;
  transition:.34s ease;
  overflow:hidden;
}
.trade-hover-item:hover,
.trade-hover-item.active{
  transform:translateX(8px);
}
.trade-hover-item h3{
  font-size:24px;
  color:#f5f5f5;
  transition:.25s;
}
.trade-hover-item p{
  color:#a9a9b2;
  line-height:1.7;
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:.34s ease;
}
.trade-hover-item:hover p,
.trade-hover-item.active p{
  max-height:150px;
  opacity:1;
  margin-top:10px;
}
.trade-hover-item:hover h3,
.trade-hover-item.active h3{
  color:#ffe993;
}
.trade-number{
  position:absolute;
  right:22px;
  top:22px;
  color:rgba(244,196,81,.55);
  font-weight:800;
  letter-spacing:.08em;
}

/* Scroll reveal polish */
.reveal{
  opacity:0;
  transform:translateY(38px) scale(.985);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.75,.2,1),
    filter .8s ease;
  filter:blur(7px);
}
.reveal.show{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* Background parallax support */
.parallax-layer{
  will-change:transform;
}

/* Mobile menu for center header */
.menu-btn{
  display:none;
  width:48px;
  height:48px;
  border-radius:13px;
  background:#0b0b0d;
  border:1px solid rgba(244,196,81,.28);
  padding:11px;
}
.menu-btn span{
  display:block;
  height:2px;
  margin:5px 0;
  background:linear-gradient(90deg,#1264ff,#f4c451);
}

@media(max-width:980px){
  .navbar-centered{
    grid-template-columns:1fr auto;
    min-height:90px;
  }
  .brand-center{
    width:125px;
    height:88px;
    grid-column:1;
    grid-row:1;
  }
  .brand-center img{
    width:108px !important;
    height:70px !important;
  }
  .menu-btn{
    display:block;
    justify-self:end;
  }
  .nav-wing{
    position:absolute;
    right:0;
    width:230px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:10px;
    border:1px solid rgba(244,196,81,.24);
    border-radius:16px;
    background:rgba(9,9,11,.96);
    backdrop-filter:blur(15px);
  }
  .nav-left{top:98px}
  .nav-right{top:252px}
  .navbar-centered.open .nav-wing{display:flex}
  .nav-wing a{
    padding:13px;
    text-align:left;
  }
  .trading-execution-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .trade-visual-shell{min-height:480px}
  .trade-visual-stage{min-height:438px}
  .trade-hover-item h3{font-size:20px}
  .trading-execution-section{padding-top:78px;padding-bottom:78px}
}


/* =========================================================
   GOLD-BLACK HEAVY THEME + CENTER HEADER + INTERACTIVE TRADING
   ========================================================= */

:root{
  --gold:#e2ad31;
  --gold2:#ffe083;
  --gold3:#9d6d0c;
  --soft-blue:#163a78;
  --soft-blue-2:#0d2957;
}

/* Global tone shift: reduce blue, increase gold-black */
body{
  background:
    radial-gradient(circle at 18% 24%, rgba(255,208,95,.06), transparent 20%),
    radial-gradient(circle at 82% 70%, rgba(255,214,122,.05), transparent 24%),
    linear-gradient(180deg,#050505,#020202 58%,#040404);
}
.hero{
  background:
    radial-gradient(circle at 74% 36%,rgba(226,173,49,.16),transparent 28%),
    radial-gradient(circle at 15% 34%,rgba(226,173,49,.07),transparent 30%) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.20;
  background:
    linear-gradient(120deg, transparent 0 43%, rgba(255,218,129,.03) 43.2% 43.4%, transparent 43.6%),
    linear-gradient(35deg, transparent 0 67%, rgba(255,214,123,.025) 67.2% 67.4%, transparent 67.6%);
}
.watermark img{
  filter:grayscale(1) sepia(1) saturate(2.3) hue-rotate(346deg) brightness(1.02);
}

/* Center header */
.site-header-centered{
  top:0;
  padding:16px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.48),transparent);
}
.navbar-centered{
  min-height:102px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:10px 22px;
  border-radius:22px;
  overflow:visible;
  background:
    linear-gradient(rgba(18,18,19,.94),rgba(9,9,10,.92)) padding-box,
    conic-gradient(from var(--angle), transparent 0 250deg, rgba(80,50,0,.65) 280deg, var(--gold2) 314deg, rgba(148,103,10,.95) 340deg, transparent 360deg) border-box !important;
  border:2px solid transparent !important;
}
.navbar-centered::before,
.navbar-centered::after{
  display:none;
}
.nav-wing{
  display:flex;
  align-items:center;
  gap:16px;
}
.nav-left{justify-content:flex-end}
.nav-right{justify-content:flex-start}
.nav-wing a:not(.btn){
  color:#f2f2f2;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  padding:10px 12px;
  border-radius:10px;
  position:relative;
}
.nav-wing a:not(.btn)::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:5px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold2), transparent);
  transform:scaleX(0);
  transition:.25s ease;
}
.nav-wing a:not(.btn):hover{
  color:var(--gold2);
  background:rgba(255,224,131,.05);
}
.nav-wing a:not(.btn):hover::after{transform:scaleX(1)}
.brand-center{
  width:156px;
  height:116px;
  display:grid;
  place-items:center;
  border-radius:26px;
  overflow:hidden;
  background:
    linear-gradient(#121212,#060606) padding-box,
    conic-gradient(from var(--angle), transparent 0 245deg, rgba(100,64,0,.75) 282deg, var(--gold2) 320deg, rgba(154,108,8,.95) 344deg, transparent 360deg) border-box !important;
  border:2px solid transparent !important;
  box-shadow:0 18px 44px rgba(0,0,0,.58),0 0 28px rgba(226,173,49,.16);
  animation:borderSpin 4s linear infinite;
}
.brand-center img{
  width:128px !important;
  height:92px !important;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(255,214,117,.22));
  animation:logoFloatUpDown 3s ease-in-out infinite;
}
@keyframes logoFloatUpDown{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
.header-btn{margin-left:6px}
.menu-btn{
  display:none;
  width:48px;
  height:48px;
  border-radius:14px;
  background:#0b0b0d;
  border:1px solid rgba(226,173,49,.26);
  padding:10px;
  cursor:pointer;
}
.menu-btn span{
  display:block;
  height:2px;
  margin:6px 0;
  background:linear-gradient(90deg,var(--gold3),var(--gold2));
}

/* Make all major boxes gold dominant */
.running-border,
.btn,
.hero-pills span,
.floating-card,
.glass-card,
.service-card,
.timeline-card,
.mini-steps div,
.terminal,
.accordion details,
.cta-box,
.icon-box,
.to-top{
  background:
    linear-gradient(145deg,rgba(18,18,18,.96),rgba(7,7,7,.96)) padding-box,
    conic-gradient(from var(--angle), transparent 0 255deg, rgba(111,75,7,.82) 285deg, var(--gold2) 320deg, rgba(255,192,59,.95) 345deg, transparent 360deg) border-box !important;
}
.btn.ghost{
  background:
    linear-gradient(#050505,#050505) padding-box,
    conic-gradient(from var(--angle), transparent 0 255deg, rgba(100,65,3,.88) 286deg, rgba(255,224,131,.95) 322deg, rgba(255,190,55,.88) 346deg, transparent 360deg) border-box !important;
}
.service-card:hover,.timeline-card:hover,.glass-card:hover,.trade-hover-item:hover,.trade-hover-item.active{
  box-shadow:0 22px 48px rgba(0,0,0,.58),0 0 30px rgba(226,173,49,.18);
}

/* Interactive trading section */
.trading-interactive{
  position:relative;
  overflow:hidden;
}
.trading-interactive::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 18% 50%,rgba(255,221,139,.09),transparent 23%),
    radial-gradient(circle at 80% 22%,rgba(226,173,49,.07),transparent 20%);
}
.trading-interactive::after{
  content:"";
  position:absolute;
  left:-15%;
  top:10%;
  width:130%;
  height:80%;
  pointer-events:none;
  z-index:0;
  opacity:.22;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,224,131,.045) 44.1% 44.25%, transparent 44.4%),
    linear-gradient(65deg, transparent 0 62%, rgba(255,224,131,.04) 62.1% 62.25%, transparent 62.4%);
  animation:sectionSweep 16s linear infinite;
}
@keyframes sectionSweep{
  0%{transform:translateX(-4%) translateY(0)}
  50%{transform:translateX(3%) translateY(2%)}
  100%{transform:translateX(-4%) translateY(0)}
}
.trading-interactive .container{
  position:relative;
  z-index:1;
}
.trading-interactive-grid{
  display:grid;
  grid-template-columns:.96fr 1.04fr;
  gap:30px;
  align-items:stretch;
}
.trade-visual-panel{
  border-radius:28px;
  padding:20px;
  min-height:590px;
}
.trade-visual-stage{
  min-height:548px;
  border-radius:22px;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,224,131,.13),transparent 30%),
    linear-gradient(180deg,#121212,#070707);
}
.trade-visual-stage::before,
.trade-visual-stage::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,224,131,.16);
  width:360px;
  height:360px;
  animation:tradeOrbit 13s linear infinite;
}
.trade-visual-stage::after{
  width:255px;
  height:255px;
  border-style:dashed;
  border-color:rgba(180,134,24,.20);
  animation-duration:8s;
  animation-direction:reverse;
}
.trade-stage-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.18;
}
.trade-stage-glow-a{
  width:210px;height:210px;left:8%;top:10%;
  background:#f0c24e;
  animation:glowFloatA 10s ease-in-out infinite;
}
.trade-stage-glow-b{
  width:180px;height:180px;right:10%;bottom:12%;
  background:#9a6b10;
  animation:glowFloatB 12s ease-in-out infinite;
}
@keyframes glowFloatA{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(20px,18px)}
}
@keyframes glowFloatB{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-22px,-10px)}
}
@keyframes tradeOrbit{to{transform:rotate(360deg)}}
.trade-svg-holder{
  width:min(78%,390px);
  min-height:330px;
  display:grid;
  place-items:center;
  position:relative;
  z-index:2;
  transition:.28s ease;
}
.trade-svg-holder svg{
  width:100%;
  height:100%;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.72));
}
.trade-stage-caption{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  z-index:3;
  padding:18px;
  border-radius:18px;
  background:rgba(6,6,7,.82);
  box-shadow:0 16px 34px rgba(0,0,0,.35);
}
.running-border-soft{
  border:1px solid rgba(255,224,131,.18);
}
.trade-stage-caption strong{
  display:block;
  color:var(--gold2);
  font-size:17px;
  margin-bottom:6px;
}
.trade-stage-caption p{
  margin:0;
  color:#b8b8bd;
  line-height:1.7;
  font-size:14px;
}
.trade-hover-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.trade-hover-item{
  position:relative;
  min-height:96px;
  border-radius:20px;
  padding:22px 68px 22px 24px;
  cursor:pointer;
  transition:.32s ease;
  overflow:hidden;
}
.trade-hover-item:hover,
.trade-hover-item.active{
  transform:translateX(8px);
}
.trade-hover-item h3{
  margin:0;
  font-size:24px;
  color:#f6f5ef;
  transition:.25s ease;
}
.trade-hover-item p{
  margin:0;
  margin-top:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  color:#a9a9b2;
  line-height:1.7;
  transition:.34s ease;
}
.trade-hover-item:hover h3,
.trade-hover-item.active h3{
  color:var(--gold2);
}
.trade-hover-item:hover p,
.trade-hover-item.active p{
  margin-top:10px;
  max-height:140px;
  opacity:1;
}
.trade-number{
  position:absolute;
  top:22px;
  right:22px;
  color:rgba(255,224,131,.50);
  font-family:Orbitron,sans-serif;
  font-size:14px;
  letter-spacing:.08em;
}

/* Ensure old trade-list gets hidden if still present somewhere */
.trade-list{display:none !important}

@media(max-width:980px){
  .navbar-centered{
    grid-template-columns:1fr auto;
    min-height:90px;
  }
  .brand-center{
    width:126px;
    height:88px;
    grid-column:1;
    grid-row:1;
  }
  .brand-center img{
    width:108px !important;
    height:72px !important;
  }
  .menu-btn{
    display:block;
    justify-self:end;
  }
  .nav-wing{
    position:absolute;
    right:0;
    width:240px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:10px;
    border:1px solid rgba(226,173,49,.24);
    border-radius:16px;
    background:rgba(9,9,10,.96);
    backdrop-filter:blur(15px);
    box-shadow:0 18px 34px rgba(0,0,0,.45);
  }
  .nav-left{top:98px}
  .nav-right{top:258px}
  .navbar-centered.open .nav-wing{display:flex}
  .trading-interactive-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .trade-visual-panel{min-height:470px}
  .trade-visual-stage{min-height:430px}
  .trade-hover-item h3{font-size:20px}
}


/* Blank-page safety fix */
.reveal.visible,
.reveal.show{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

/* The first screen must always remain visible even before JS initializes */
.hero .reveal,
.site-header .reveal{
  opacity:1;
  transform:none;
  filter:none;
}

/* Prevent decorative layers from covering page content */
.noise,
.watermark,
body::before,
.trading-interactive::before,
.trading-interactive::after{
  pointer-events:none !important;
}
main, footer, .site-header{
  position:relative;
  z-index:2;
}


/* =========================================================
   V5 RESPONSIVE + CENTERED HOME + MOBILE-ONLY HEADER LOGO
   ========================================================= */

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

*, *::before, *::after{
  max-width:100%;
}

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

.container{
  width:min(1180px, calc(100% - 32px)) !important;
  max-width:1180px;
}

/* Slower and more premium animation speed */
.btn,
.running-border,
.navbar-centered,
.brand-center,
.hero-pills span,
.floating-card,
.glass-card,
.service-card,
.timeline-card,
.mini-steps div,
.terminal,
.accordion details,
.cta-box,
.icon-box,
.to-top{
  animation-duration:8s !important;
}

.coin-shell{
  animation-duration:8s !important;
}
.ring-a{animation-duration:28s !important}
.ring-b{animation-duration:44s !important}
.trade-visual-stage::before{animation-duration:22s !important}
.trade-visual-stage::after{animation-duration:16s !important}
.trading-interactive::after{animation-duration:28s !important}

/* Reduce blue: gold and black dominate */
body{
  background:
    radial-gradient(circle at 52% 10%,rgba(226,173,49,.09),transparent 24%),
    radial-gradient(circle at 15% 40%,rgba(175,125,22,.045),transparent 22%),
    linear-gradient(180deg,#050505 0%,#020202 60%,#050402 100%) !important;
}

.hero{
  background:
    radial-gradient(circle at 50% 42%,rgba(226,173,49,.13),transparent 32%),
    linear-gradient(180deg,rgba(5,5,5,.15),rgba(2,2,2,.45)) !important;
}

.scroll-progress{
  background:linear-gradient(90deg,#6f4800,#e2ad31,#ffe083) !important;
}

.menu-btn span{
  background:linear-gradient(90deg,#8b5d08,#ffe083) !important;
}

/* Desktop header: logo hidden; menu centered */
.navbar-centered{
  grid-template-columns:1fr 1fr !important;
  min-height:82px !important;
  padding:10px 28px !important;
}

.navbar-centered .brand-center{
  display:none !important;
}

.navbar-centered .nav-left{
  justify-content:flex-end !important;
}

.navbar-centered .nav-right{
  justify-content:flex-start !important;
}

.nav-wing{
  min-width:0;
  flex-wrap:wrap;
}

.nav-wing a{
  white-space:nowrap;
}

/* HOME/HERO only: everything centered, text first and logo below */
.hero{
  min-height:auto !important;
  padding-top:78px !important;
  padding-bottom:100px !important;
}

.hero-grid{
  grid-template-columns:1fr !important;
  gap:50px !important;
  align-items:center !important;
  justify-items:center !important;
}

.hero-copy{
  width:min(940px,100%);
  text-align:center !important;
  margin-inline:auto;
}

.hero h1{
  max-width:940px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero-copy > p{
  max-width:790px;
  margin-left:auto;
  margin-right:auto;
}

.hero-actions,
.hero-pills{
  justify-content:center !important;
}

.hero-visual{
  width:100%;
  min-height:470px !important;
  display:grid !important;
  place-items:center !important;
  margin-inline:auto;
}

.coin-shell{
  width:min(390px,74vw) !important;
  margin-inline:auto;
}

.fc-one{
  left:calc(50% - 305px) !important;
  top:24% !important;
}

.fc-two{
  right:calc(50% - 305px) !important;
  bottom:18% !important;
}

/* Fix top button on the right */
.to-top{
  left:auto !important;
  right:22px !important;
  bottom:22px !important;
  margin:0 !important;
  transform:translateY(20px) !important;
}

.to-top.show{
  transform:translateY(0) !important;
}

/* Keep interactive trading contained */
.trading-interactive-grid,
.trade-visual-panel,
.trade-hover-list,
.trade-hover-item{
  min-width:0;
}

.trade-hover-item{
  max-width:100%;
}

/* Tablet/mobile */
@media(max-width:980px){
  .container{
    width:min(100% - 24px, 1180px) !important;
  }

  .site-header-centered{
    padding:8px 0 !important;
  }

  .navbar-centered{
    grid-template-columns:auto 1fr auto !important;
    min-height:76px !important;
    padding:8px 12px !important;
  }

  /* Mobile-only header logo */
  .navbar-centered .brand-center{
    display:grid !important;
    grid-column:1 !important;
    grid-row:1 !important;
    width:94px !important;
    height:62px !important;
    border-radius:16px !important;
    justify-self:start !important;
  }

  .navbar-centered .brand-center img{
    width:82px !important;
    height:52px !important;
  }

  .menu-btn{
    display:block !important;
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    width:46px !important;
    height:46px !important;
  }

  .nav-wing{
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:8px !important;
    border:1px solid rgba(226,173,49,.25) !important;
    border-radius:14px !important;
    background:rgba(8,8,8,.98) !important;
    box-shadow:0 20px 45px rgba(0,0,0,.6) !important;
  }

  .nav-left{
    top:82px !important;
  }

  .nav-right{
    top:223px !important;
  }

  .navbar-centered.open .nav-wing{
    display:flex !important;
  }

  .nav-wing a{
    width:100%;
    padding:12px 14px !important;
    text-align:left;
  }

  .header-btn{
    margin:0 !important;
  }

  .hero{
    padding-top:55px !important;
  }

  .hero-visual{
    min-height:420px !important;
  }

  .fc-one{
    left:4% !important;
    top:18% !important;
  }

  .fc-two{
    right:4% !important;
    bottom:12% !important;
  }

  .trading-interactive-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:640px){
  .container{
    width:calc(100% - 20px) !important;
  }

  .section-pad{
    padding:70px 0 !important;
  }

  .hero{
    padding-top:38px !important;
    padding-bottom:75px !important;
  }

  .hero h1{
    font-size:clamp(39px,12vw,56px) !important;
    line-height:1.08 !important;
  }

  .hero p,
  .section-copy p,
  .section-heading p{
    font-size:15px !important;
  }

  .hero-actions{
    width:100%;
    flex-direction:column !important;
  }

  .hero-actions .btn{
    width:100% !important;
  }

  .hero-pills{
    gap:8px !important;
  }

  .hero-pills span{
    font-size:11px !important;
  }

  .hero-visual{
    min-height:330px !important;
  }

  .coin-shell{
    width:min(250px,70vw) !important;
  }

  .coin-ring{
    inset:0px !important;
  }

  .ring-b{
    inset:9px !important;
  }

  .floating-card{
    position:relative !important;
    inset:auto !important;
    width:min(260px,90%) !important;
    margin:10px auto 0 !important;
    text-align:center;
  }

  .hero-visual{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  .feature-cluster,
  .cards-3,
  .timeline-grid,
  .mini-steps{
    grid-template-columns:1fr !important;
  }

  .trading-interactive .section-heading{
    text-align:center !important;
  }

  .trade-visual-panel{
    min-height:390px !important;
    padding:12px !important;
  }

  .trade-visual-stage{
    min-height:365px !important;
  }

  .trade-svg-holder{
    min-height:230px !important;
    width:min(78%,280px) !important;
  }

  .trade-stage-caption{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    padding:13px !important;
  }

  .trade-hover-item{
    padding:18px 50px 18px 18px !important;
  }

  .trade-hover-item h3{
    font-size:19px !important;
  }

  .trade-number{
    top:18px !important;
    right:16px !important;
  }

  .to-top{
    right:14px !important;
    bottom:14px !important;
    width:44px !important;
    height:44px !important;
  }
}


/* =========================================================
   MOBILE MENU VISIBILITY FIX
   ========================================================= */

.site-header-centered{
  z-index:9999 !important;
  overflow:visible !important;
}

.navbar-centered{
  z-index:10000 !important;
  overflow:visible !important;
  position:relative !important;
}

@media(max-width:980px){
  .navbar-centered{
    position:relative !important;
  }

  .navbar-centered.open{
    z-index:10050 !important;
  }

  .navbar-centered .nav-wing{
    z-index:10060 !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;
  }

  .navbar-centered.open .nav-wing{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .nav-left{
    top:82px !important;
  }

  .nav-right{
    top:224px !important;
  }

  .nav-wing a,
  .nav-wing .btn{
    color:#ffffff !important;
    background:rgba(16,16,16,.96) !important;
    border:1px solid rgba(226,173,49,.20) !important;
    border-radius:10px !important;
    margin:4px 0 !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
  }

  .nav-wing .btn{
    color:#ffe083 !important;
    padding:0 14px !important;
  }

  .nav-wing a:hover,
  .nav-wing .btn:hover{
    background:rgba(226,173,49,.10) !important;
    color:#ffe083 !important;
  }

  .menu-btn{
    position:relative !important;
    z-index:10070 !important;
  }

  body.menu-open{
    overflow:hidden !important;
  }

  .mobile-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:9990;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
  }

  .mobile-menu-backdrop.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}