/* CSS OF BANNER SECTION */
:root{
  --bg-deep:#0b0d10; --bg-elev-1:#101319; --bg-elev-2:#131720;
  --glass:#131313cc; --glass-strong:#0f1118cc;
  --gold-1:#CBA24A; --gold-2:#E4C77D; --gold-3:#F4E3A1;
  --text-1:#f5f7fa; --text-2:#c9d1d9; --accent:#3ec9d6;
  --shadow-lg:0 20px 60px rgba(0,0,0,.75);
  --shadow-md:0 12px 32px rgba(0,0,0,.55);
  --blur:16px;
}

/* Global base */
body{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(203,162,74,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(228,199,125,.06), transparent 60%),
    linear-gradient(180deg, #0b0d10 0%, #0a0c12 100%);
  color:var(--text-1);
}

/* Hero */
.premium-hero{
  position:relative; isolation:isolate;
  padding: 230px 0 80px;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
  overflow:hidden; perspective:1000px;
}

.hero-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.03;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  mix-blend-mode:soft-light; z-index:0;
}
.hero-gold-gradient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(60vw 40vw at 20% 20%, rgba(203,162,74,.18), transparent 60%),
    radial-gradient(80vw 50vw at 85% 15%, rgba(244,227,161,.10), transparent 65%),
    radial-gradient(100vw 60vw at 50% 100%, rgba(228,199,125,.08), transparent 60%);
  filter: blur(12vw);
  z-index: -1;
}

@media (max-width: 768px) {
  .hero-gold-gradient {
    inset: -30%; /* more coverage for small screens */
    background:
      radial-gradient(120vw 80vw at 20% 20%, rgba(203,162,74,.18), transparent 60%),
      radial-gradient(140vw 90vw at 70% 20%, rgba(244,227,161,.10), transparent 65%),
      radial-gradient(160vw 100vw at 50% 90%, rgba(228,199,125,.08), transparent 60%);
    filter: blur(18vw);
  }
}

/* Waves */
.hero-waves{ position:absolute; left:0; right:0; height:420px; pointer-events:none; z-index:1; transform-style:preserve-3d; }
.wave-back, .wave-front{ position:absolute; left:0; right:0; }
.wave-back{
  bottom:-140px; opacity:.35; filter:blur(2px);
  background:linear-gradient(to right,
    rgba(203,162,74,.18) 0%, rgba(203,162,74,.06) 20%,
    rgba(203,162,74,.14) 40%, rgba(203,162,74,.06) 60%,
    rgba(203,162,74,.18) 80%, rgba(203,162,74,.06) 100%);
  background-size:1600px 100%;
  -webkit-mask:
    radial-gradient(1200px 280px at 50% 40%, #000 60%, transparent 62%) top/100% 50% no-repeat,
    radial-gradient(1200px 260px at 50% 60%, #000 60%, transparent 62%) bottom/100% 60% no-repeat;
  mask:
    radial-gradient(1200px 280px at 50% 40%, #000 60%, transparent 62%) top/100% 50% no-repeat,
    radial-gradient(1200px 260px at 50% 60%, #000 60%, transparent 62%) bottom/100% 60% no-repeat;
  animation:waveScrollBack 16s linear infinite;
  transform: translateZ(-40px);
}
.wave-front{
  bottom:-120px; opacity:.55;
  background:linear-gradient(to right,
    rgba(244,227,161,.25) 0%, rgba(203,162,74,.10) 16%,
    rgba(244,227,161,.22) 33%, rgba(203,162,74,.10) 50%,
    rgba(244,227,161,.25) 66%, rgba(203,162,74,.10) 83%,
    rgba(244,227,161,.22) 100%);
  background-size:1400px 100%;
  -webkit-mask:
    radial-gradient(900px 220px at 50% 38%, #000 62%, transparent 64%) top/100% 55% no-repeat,
    radial-gradient(900px 220px at 50% 62%, #000 62%, transparent 64%) bottom/100% 60% no-repeat;
  mask:
    radial-gradient(900px 220px at 50% 38%, #000 62%, transparent 64%) top/100% 55% no-repeat,
    radial-gradient(900px 220px at 50% 62%, #000 62%, transparent 64%) bottom/100% 60% no-repeat;
  animation:waveScrollFront 22s linear infinite;
  transform: translateZ(-20px);
}
@keyframes waveScrollBack{ from{background-position:0 0;} to{background-position:1600px 0;} }
@keyframes waveScrollFront{ from{background-position:0 0;} to{background-position:1400px 0;} }

@media (max-width: 992px){
  .premium-hero{ padding:100px 0 70px; }
  .hero-waves{ height:320px; }
  .wave-back{ bottom:-120px; }
  .wave-front{ bottom:-110px; }
}

/* Headings and text */
.banner-title.neon-gold-text{
  font-size: clamp(3.6rem, 3vw + 1rem, 3rem);
  line-height:1.1; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(92deg, #F4E3A1, #E4C77D 35%, #CBA24A 70%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
 /* text-shadow:0 4px 18px rgba(228,199,125,.18);*/
}

.banner-title.neon-gold-text-b{
  font-size: clamp(3rem, 3vw + 1rem, 2rem);
  text-shadow:0 4px 18px rgba(228,199,125,.18);
}

/* Mobile view adjustments */
@media (max-width: 768px){
  .banner-title.neon-gold-text {
    font-size: clamp(2.7rem, 5vw, 2.7rem);
    padding: 50x 50px; /* Left & right padding */
    line-height: 1.2;
  }

  .banner-title.neon-gold-text-b{
    font-size: clamp(1.8rem, 5vw, 1.8rem);
  }
}

.hero-subtitle {
  font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.1rem); /* Increased size */
  line-height: 1.6;
  color: #ffffff; /* Adjust if needed */
  max-width: 800px;
  margin: 20px auto 0; /* Adds top margin for spacing */
  text-align: left;
  padding-top: 10px; /* Additional top padding */
  padding-bottom: 10px; /* Additional top padding */
}

/* Mobile view adjustments */
@media (max-width: 768px) {
  .hero-subtitle {
      text-align: center;
    font-size: clamp(0.9rem, 4.5vw, 0.9rem);
    padding: 8px 25px 0; /* Top padding + side padding */
  }
}

/* TradingView panel */
.tradingview-panel{
  background:rgba(19,19,19,.7);
  border-radius:24px; padding:2rem 1.5rem; width:100%; height:550px;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
 /* backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);*/
  box-shadow:0 12px 25px rgba(0,0,0,.4);
}


/*.tradingview-panel:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.6); }*/
.tradingview-panel.glass-panel{
  border:1px solid rgba(203,162,74,.32);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.04);
}
.tradingview-widget-container{ height:100% !important; width:100% !important; overflow:hidden; }
.tv-ticker .tradingview-widget-container{ height:46px !important; }
.tv-ticker .tradingview-widget-copyright{ display:none; }

@media (max-width: 767px) {
  .tradingview-mobile-margin {
    margin-top: 30px; /* adjust as needed */
  }
}

/* Metrics */
.metric-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 16px 18px;
 /* backdrop-filter: blur(8px);*/
 /* -webkit-backdrop-filter: blur(8px);*/
  box-shadow: var(--shadow-md);
  transition: transform .25s ease, box-shadow .25s ease;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0,0,0,.55);
}

.metric-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold-3);
  letter-spacing: .02em;
}

.metric-label {
  color: var(--text-2);
  font-size: .9rem;
}

/* Entrance + motion */
/*.reveal-up {
  opacity: 0;
  transform: translateY(15px);
  animation: revealUp .6s ease forwards;}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
*/
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .metric-card {
    padding: 12px 14px;
    border-radius: 12px;
  }
  .metric-value {
    font-size: 1.2rem;
  }
  .metric-label {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .metric-card {
    padding: 10px 12px;
  }
  .metric-value {
    font-size: 1.1rem;
  }
  .metric-label {
    font-size: 0.75rem;
  }
}

/*
.tilt-3d{ will-change:transform; transform-style:preserve-3d; }
*/
.sp_theme_btn,.sp_border_btn{ padding:.9rem 1.4rem; font-weight:500; letter-spacing:.02em; }



/********* slide in left and right animation/
/* Slide in from left */
.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInLeft 0.8s ease-out forwards;
}

/* Slide in from right */
.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  animation: slideInRight 0.8s ease-out forwards;
}

/* Keyframes */
@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/***********************/

/* Mobile view */
@media (max-width: 768px) {
  .sp_theme_btn,
  .sp_border_btn {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }
}

.depth-scene{ position:absolute; inset:0; z-index:0; pointer-events:none; transform-style:preserve-3d; }
.depth-grid{
  mix-blend-mode:screen; position:absolute; inset:auto -10% -15% -10%;
  background:
    linear-gradient(rgba(203,162,74,.08) 1px, transparent 1px) 0 0/ 40px 40px,
    linear-gradient(90deg, rgba(203,162,74,.08) 1px, transparent 1px) 0 0/ 40px 40px;
  transform: rotateX(60deg) translateZ(-120px);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  opacity:.6; animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift{
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 200px 120px, 200px 120px; }
}
.depth-particles{
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(244,227,161,.35), transparent 60%),
    radial-gradient(2px 2px at 70% 40%, rgba(203,162,74,.35), transparent 60%),
    radial-gradient(2px 2px at 40% 70%, rgba(244,227,161,.25), transparent 60%),
    radial-gradient(2px 2px at 85% 80%, rgba(203,162,74,.30), transparent 60%),
    radial-gradient(2px 2px at 12% 78%, rgba(244,227,161,.25), transparent 60%);
  animation: particleFloat 22s ease-in-out infinite alternate;
  transform: translateZ(-80px);
  opacity:.5; mix-blend-mode: screen;
}
@keyframes particleFloat{
  0%   { transform: translate3d(0, 0, -80px); filter: hue-rotate(0deg); }
  50%  { transform: translate3d(-10px, 8px, -80px); }
  100% { transform: translate3d(12px, -10px, -80px); filter: hue-rotate(10deg); }
}
.light-sweep{
  position:absolute; inset:0;
  background: radial-gradient(600px 300px at -10% 20%, rgba(244,227,161,.12), transparent 70%),
              radial-gradient(700px 340px at 110% 35%, rgba(203,162,74,.10), transparent 70%);
  filter: blur(28px);
  animation: lightSweep 12s ease-in-out infinite alternate;
  transform: translateZ(-120px); opacity:.55;
}
@keyframes lightSweep{
  0%   { background-position: -10% 20%, 110% 35%; opacity:.45; }
  100% { background-position: 30% 10%, 70% 45%; opacity:.65; }
}

.anim-fade-up-1{ animation: fadeUp .8s ease both; }
.anim-fade-up-2{ animation: fadeUp .9s ease .1s both; }
.anim-fade-up-3{ animation: fadeUp 1s ease .2s both; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to  { opacity:1; transform: translateY(0); }
}
.anim-stagger .metric-rise{ opacity:0; transform: translateY(16px) scale(.98); }
.anim-stagger .metric-rise:nth-child(1){ animation: riseIn .6s ease .2s forwards; }
.anim-stagger .metric-rise:nth-child(2){ animation: riseIn .6s ease .32s forwards; }
.anim-stagger .metric-rise:nth-child(3){ animation: riseIn .6s ease .44s forwards; }
.anim-stagger .metric-rise:nth-child(4){ animation: riseIn .6s ease .56s forwards; }
.anim-stagger .metric-rise:nth-child(5){ animation: riseIn .6s ease .68s forwards; }
.anim-stagger .metric-rise:nth-child(6){ animation: riseIn .6s ease .80s forwards; }
@keyframes riseIn{ to{ opacity:1; transform: translateY(0) scale(1); } }

.btn-anim{ position:relative; transition: transform .18s ease, filter .25s ease, box-shadow .25s ease; will-change: transform, filter; }
.btn-anim:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn-anim:active{ transform: translateY(0) scale(.98); }
.glow-hover{ box-shadow: 0 10px 28px rgba(203,162,74,.20), inset 0 1px 0 rgba(255,255,255,.05); }
.glow-hover:hover{ box-shadow: 0 14px 38px rgba(203,162,74,.28), inset 0 1px 0 rgba(255,255,255,.06); }
.btn-magnetic{ overflow:hidden; }
.btn-magnetic:before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), rgba(244,227,161,.18), transparent 60%);
  opacity:.0; transition: opacity .25s ease;
}
.btn-magnetic:hover:before{ opacity:.9; }

.tv-anim{ animation: tvFloat 6s ease-in-out infinite; transform-origin: center 80%; }
@keyframes tvFloat{ 0%{ transform: translateY(0) rotateX(0) } 50%{ transform: translateY(-6px) rotateX(.6deg) } 100%{ transform: translateY(0) rotateX(0) } }
.tv-anim:hover{ animation-play-state: paused; }

.neon-gold-text, .hero-subtitle, .tradingview-panel, .metric-card{
  transition: transform .35s ease, color .25s ease, opacity .35s ease, box-shadow .35s ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .depth-grid, .depth-particles, .light-sweep, .tv-anim,
  .wave-front, .wave-back, .anim-fade-up-1, .anim-fade-up-2, .anim-fade-up-3,
  .anim-stagger .metric-rise{ animation:none !important; }
}

/* TV responsive */
@media (max-width: 1200px){ .tradingview-panel{ height:450px; padding:1.75rem 1.25rem; } }
@media (max-width: 992px){ .tradingview-panel{ height:400px; } }

/* Why Choose section */
:root{
  --bg-glass:#0E1117;
  --text-muted:#AAB4CB;
  --gold-glow:rgba(244,227,161,.20);
  --grad-gold: linear-gradient(90deg,#F4E3A1 0%,#E4C77D 40%,#CBA24A 100%);
  --grad-gold-soft: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --border-card: rgba(255,255,255,.10);
  --border-gold: rgba(203,162,74,.28);
}
.py-100{ padding:80px 0; }
@media (min-width:992px){ .py-100{ padding:96px 0; } }
.premium-why-gold{
  position:relative; isolation:isolate; color:var(--text-1);
  background:
    radial-gradient(1100px 560px at 10% -10%, rgba(244,227,161,.08), transparent 65%),
    radial-gradient(1200px 640px at 95% 5%, rgba(203,162,74,.06), transparent 68%);
}
.premium-why-gold .container{ max-width:1180px; }
.wcg-bg-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.035;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light; z-index:0;
}
.wcg-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:.5rem .9rem; border-radius:999px;
  font-weight:800; letter-spacing:.02em; font-size:.9rem;
  color:#201a09;
  background: var(--grad-gold) padding-box, linear-gradient(#0f1319,#0b0f14) border-box;
  border:1px solid transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.wcg-badge-dot{
  width:8px; height:8px; border-radius:999px;
  background: radial-gradient(circle at 40% 40%, #F4E3A1, #CBA24A);
  box-shadow: 0 0 12px var(--gold-glow);
}
.wcg-title{
  margin:12px auto 10px;
  font-size: clamp(28px, 3.6vw + 8px, 52px);
  font-weight:800; letter-spacing:.01em; text-align:center;
  color:#EDEFF6;
}
.wcg-title .wcg-accent{
  background: var(--grad-gold);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 22px rgba(228,199,125,.14);
}
.wcg-subtitle{
  max-width:980px; text-align:center; margin:0 auto 42px;
  color:#CFC9B0; font-size: clamp(15px, 1.1vw + 10px, 20px); line-height:1.8;
}
.grid-3{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:768px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
/*.wcg-card{
  position:relative; border-radius:18px; padding:28px 26px;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(244,227,161,.12), rgba(25, 25, 26, 0.82) 48%),
    var(--grad-gold-soft);
  border:1px solid var(--border-card);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
  */

  .wcg-card {
  position: relative;
  border-radius: 18px;
  padding: 28px 26px;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(244,227,161,.12), rgba(25,25,26,.82) 48%),
    var(--grad-gold-soft);
  border: 1px solid var(--border-card);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.wcg-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--border-gold);
  box-shadow: 0 22px 52px rgba(0,0,0,.55), 0 0 0 1px rgba(203,162,74,.10) inset;
}


.wcg-card:before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(300px 120px at 100% 0%, rgba(244,227,161,.18), transparent 60%),
              radial-gradient(300px 120px at 0% 100%, rgba(203,162,74,.16), transparent 60%);
  opacity:.55; filter: blur(14px);
}
/*
.wcg-card:hover{
  transform: translateY(-4px);
  border-color: var(--border-gold);
  box-shadow: 0 22px 52px rgba(0,0,0,.55), 0 0 0 1px rgba(203,162,74,.10) inset;
}
  */
.wcg-icon{
  width:64px; height:64px; border-radius:16px; display:grid; place-items:center; margin-bottom:16px;
  background: linear-gradient(180deg, #2a2314, #1b170e);
  border:1px solid rgba(203,162,74,.42);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.wcg-card-title{
  font-size:20px; font-weight:800; color:#F2EEDC; margin:8px 0 8px; letter-spacing:.01em;
}
.wcg-card-text{
  color:#D5CFB6; line-height:1.75; margin:0; font-size:15.5px;
}
@media (prefers-reduced-motion: reduce){
  .wcg-card{ transition:none; }
}

.custom-alert-modal {
  position: fixed;
  inset: 0;
  z-index: 9999; /* very high z-index to overlay everything */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.custom-alert-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(11, 13, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9998; /* just below modal content */
}

.custom-alert-content {
  position: relative;
  background: var(--bg-elev-2);
  border: 1px solid var(--gold-1);
  box-shadow: var(--shadow-lg);
  padding: 2rem 2.5rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  z-index: 9999;
  animation: fadeInScale 0.3s ease forwards;
}


.custom-alert-title {
  margin-bottom: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 1.5rem;
}

.custom-alert-message {
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--text-2);
}

.custom-alert-content .btn.sp_theme_btn {
  background: var(--gold-1);
  color: #1b1b1b;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.75rem 0;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
  transition: background-color 0.25s ease;
}

.custom-alert-content .btn.sp_theme_btn:hover {
  background: var(--gold-2);
}

/* Animation */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



/*CSS OF ALGO SECTION*/

  :root{
    --bg:#0B0D10; --e1:#101319; --glass:#0E1117;
    --t1:#F4F6FB; --t2:#C9D1D9; --tw:#D5CFB6;
    --g1:#CBA24A; --g2:#E4C77D; --g3:#F4E3A1;
    --gg:linear-gradient(90deg,#F4E3A1 0%,#E4C77D 40%,#CBA24A 100%);
    --glassGrad:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    --bCard:rgba(255,255,255,.10);
    --shMd:0 12px 32px rgba(0,0,0,.55);
    --shLg:0 20px 60px rgba(0,0,0,.75);
  }


/*
  .algo-plans-gold{
    position:relative; isolation:isolate; color:var(--t1); overflow:clip;
    background:
      radial-gradient(1200px 600px at 8% -10%, rgba(244,227,161,.08), transparent 65%),
      radial-gradient(1100px 540px at 95% 0%, rgba(203,162,74,.06), transparent 68%);
  }
  
  .algo-animated-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
  .algo-animated-bg .stars,.algo-animated-bg .twinkles,.algo-animated-bg .auras{ position:absolute; inset:0; }
  .algo-animated-bg .stars{
    background:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.20) 50%, transparent 51%),
      radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.18) 50%, transparent 51%),
      radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,.15) 50%, transparent 51%),
      radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,.16) 50%, transparent 51%); opacity:.18;
    animation: drift 120s linear infinite; filter: blur(.2px);
  }
  .algo-animated-bg .twinkles{
    background:
      radial-gradient(2px 2px at 25% 40%, rgba(228,199,125,.45) 40%, transparent 41%),
      radial-gradient(2px 2px at 70% 60%, rgba(203,162,74,.35) 40%, transparent 41%),
      radial-gradient(2px 2px at 50% 20%, rgba(244,227,161,.40) 40%, transparent 41%);
    animation: twinkle 8s ease-in-out infinite; opacity:.28;
  }
  .algo-animated-bg .auras{
    background:
      radial-gradient(600px 300px at 10% 15%, rgba(244,227,161,.10), transparent 60%),
      radial-gradient(700px 360px at 90% 10%, rgba(203,162,74,.08), transparent 65%),
      radial-gradient(900px 500px at 50% 120%, rgba(244,227,161,.06), transparent 70%);
    animation: breathe 22s ease-in-out infinite; mix-blend-mode:screen; opacity:.45;
  }
  @keyframes drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-60px,-30px,0)}}
  @keyframes twinkle{0%,100%{opacity:.18;filter:brightness(.9)}50%{opacity:.42;filter:brightness(1.25)}}
  @keyframes breathe{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.03);opacity:.55}}

  .algo-noise{
    position:absolute; inset:0; opacity:.03; z-index:0;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 2px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
    mix-blend-mode:soft-light;
  }
*/

  .algo-card{
    position:relative; display:flex; flex-direction:column; height:100%; z-index:1;
   /* background: radial-gradient(140% 120% at 100% 0%, rgba(244,227,161,.12), rgba(16,19,25,.82) 48%), var(--glassGrad);*/
    background: radial-gradient(140% 120% at 100% 0%, rgba(244,227,161,.12), rgba(16,19,25,.82) 48%), var(--glassGrad);
    border:1px solid var(--bCard); border-radius:16px; padding:22px; overflow:hidden;
    box-shadow: var(--shMd), inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    margin:5px;
  }
  
  .algo-card:hover{ transform:translateY(-6px); box-shadow:var(--shLg); border-color:rgba(203,162,74,.30); }
  .algo-rim{
    position:absolute; inset:0; pointer-events:none; filter: blur(14px); opacity:.55;
    background:
      radial-gradient(300px 120px at 100% 0%, rgba(244,227,161,.18), transparent 60%),
      radial-gradient(300px 120px at 0% 100%, rgba(203,162,74,.16), transparent 60%);
  }

  .card-line{ display:flex; align-items:center; gap:14px; }
  .brand-icon{
    width:56px; height:56px; border-radius:14px; display:grid; place-items:center; flex:0 0 56px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08); color:#E4C77D; font-size:22px;
  }
  .title-wrap{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .name-row{ display:flex; align-items:center; gap:10px; }
  .plan-title{ margin:0; font-size:22px; font-weight:900; color:#F2EEDC; letter-spacing:.01em; }
  .plan-desc{ margin:0; color:#C9D1D9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

  .chip-stack{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .chip{
    font-weight:800; font-size:.78rem; padding:.35rem .6rem; border-radius:999px;
    color:#0B0D10; background: var(--gg); border:0; white-space:nowrap;
  }
  .chip-featured i,.chip-trending i,.chip-premium i{ font-size:.85em; }

  .price-wrap{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:16px; padding:12px 14px; border-radius:12px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
  }
  
  .price-left{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
  .price-current{ font-size:24px; font-weight:900; color:var(--g3); line-height:1; }
  .price-current .currency{
    font-size:.9rem; opacity:.95; margin-left:6px; color:#0B0D10; background:var(--gg);
    padding:.12rem .45rem; border-radius:8px;
  }
  .price-fake{ font-size:16px; color:#C9D1D9; opacity:.7; text-decoration: line-through; line-height:1; }
  .price-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .badge-off{ font-weight:900; font-size:.78rem; padding:.25rem .5rem; border-radius:8px; color:#0B0D10; background: var(--gg); }
  .duration{ color:#F4F6FB; font-weight:800; }

  .sheen{
    position:absolute; top:-25%; left:-40%; width:60%; height:200%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 70%);
    transform: rotate(20deg); animation: sheen 6s ease-in-out infinite; pointer-events:none;
  }
  @keyframes sheen{
    0%{ transform:translateX(-40%) rotate(20deg); opacity:0 }
    40%{ opacity:.8 }
    100%{ transform:translateX(220%) rotate(20deg); opacity:0 }
  }

  .algo-middle{ margin-top:14px; }
  .algo-middle h6{ font-weight:800; color:#EDEFF6; }
  .algo-features{
    list-style:none; margin:12px 0 0; padding:10px 16px;
    background: linear-gradient(180deg,#12161d,#0f1319);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
  }
  .algo-features li{
    padding:10px 0; color:#D5CFB6; border-bottom:1px dashed rgba(255,255,255,.10);
    display:flex; align-items:flex-start;
  }
  .algo-features li:last-child{ border-bottom:none; }
  .algo-features i{ color:var(--g2); margin-top:2px; }

  .algo-foot{ margin-top:auto; }
  .btn.gold-solid{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    color:#0B0D10; background:var(--gg); border:none; border-radius:12px;
    padding:.9rem 1.05rem; font-weight:900; letter-spacing:.02em;
    box-shadow:0 12px 28px rgba(203,162,74,.25);
    transition: transform .18s ease, filter .25s ease, box-shadow .25s ease;
  }

  .btn.gold-solid:hover{ transform: translateY(-2px); filter:brightness(1.05); }

  .btn.gold-outline {
    position: relative; /* Ensure z-index works */
    z-index: 10; /* Bring above section content */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.85rem 1.6rem;
    font-weight: 800;
    letter-spacing: .02em;
    border: 1px solid var(--g2);
    border-radius: 4px;
    color: var(--g2);
    background: transparent;
    transition: all .3s ease;
    text-decoration: none;
    cursor: pointer; /* Ensure it's clickable */
}

.btn.gold-outline:hover {
    background: linear-gradient(120deg, rgba(244,227,161,.12), rgba(203,162,74,.10));
    border-color: var(--g3);
    color: var(--g3);
    transform: translateY(-2px) scale(1.02);
}

.btn.gold-outline i {
    transition: transform .3s ease;
}

.btn.gold-outline:hover i {
    transform: translateX(4px);
}

@media (max-width: 768px) {
  .algo-card {
    padding: 16px;
    margin: 8px;
  }

 
  .brand-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    font-size: 18px;
  }

  .plan-title {
    font-size: 22px;
  }

  .plan-desc {
    font-size: 14px;
    white-space: normal;
  }

  .price-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .price-current {
    font-size: 20px;
  }

  .price-fake {
    font-size: 14px;
  }

  .badge-off {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  .algo-features {
    padding: 8px 12px;
  }

  .algo-features li {
    padding: 8px 0;
    font-size: 14px;
  }

  .btn.gold-solid {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }
}

/* Title */
.hiw-title{
  margin:12px 0 10px; font-weight:800; letter-spacing:.01em;
  font-size: clamp(28px, 3.6vw + 8px, 52px); color:#EDEFF6;
}
.hiw-title .hiw-accent{
  background: var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 6px 22px rgba(228,199,125,.14);
}

/* Subtitle */
.hiw-subtitle{
  max-width:980px; color:#CFC9B0; line-height:1.8; margin-bottom:36px;
  font-size: clamp(15px, 1.1vw + 10px, 20px);
}



.py-100{ padding:80px 0; }
@media (min-width:992px){ .py-100{ padding:96px 0; } }

/* Section */
.hiw{ position:relative; isolation:isolate; color:var(--text-1); }
.hiw .container{ max-width:1180px; }
.hiw-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.03;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode:soft-light;
}
.hiw-gold{
  background:
    radial-gradient(1100px 560px at 8% -10%, rgba(244,227,161,.08), transparent 65%),
    radial-gradient(1200px 640px at 92% 0%, rgba(203,162,74,.06), transparent 68%);
}

.hiw-heading {
  margin:20px;  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* space between them */
  flex-wrap: wrap; /* so they stack on mobile if needed */
}

.hiw-title,
.hiw-subtitle {
  margin: 0;
}

/* Badge */
.hiw-badge{
  display:inline-flex; align-items:center; gap:10px; padding:.5rem .9rem;
  border-radius:999px; font-weight:800; letter-spacing:.02em; font-size:.9rem;
  color:#201a09; background: var(--grad-gold) padding-box, linear-gradient(#0f1319,#0b0f14) border-box;
  border:1px solid transparent; box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.hiw-badge-dot{
  width:8px; height:8px; border-radius:999px;
  background: radial-gradient(circle at 40% 40%, #F4E3A1, #CBA24A);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* Title */
.hiw-titlee{
  margin:12px 20px 20px; font-weight:800; letter-spacing:.01em;
  font-size: clamp(28px, 3.6vw + 8px, 52px); color:#EDEFF6;
}
.hiw-titlee .hiw-accent{
  background: var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 6px 22px rgba(228,199,125,.14);
}
/* Subtitle */
.hiw-subtitlee{
  max-width:980px; color:#CFC9B0; line-height:1.8; margin-bottom:36px;
  font-size: clamp(15px, 1.1vw + 10px, 20px);
}


/* Steps grid */
.hiw-steps{ display:grid; grid-template-columns: repeat(1, 1fr); gap:22px; }
@media (min-width: 992px){ .hiw-steps{ grid-template-columns: repeat(4, 1fr); } }

/* Card */
.hiw-card{
  position:relative; border-radius:18px; padding:48px 24px 28px;
  background: radial-gradient(140% 120% at 100% 0%, rgba(244,227,161,.12), rgba(16,19,25,.82) 48%), var(--grad-card);
  border:1px solid var(--border-card);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform; overflow: visible;
}
.hiw-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hiw-card:before{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(300px 120px at 100% 0%, rgba(244,227,161,.18), transparent 60%),
    radial-gradient(300px 120px at 0% 100%, rgba(203,162,74,.16), transparent 60%);
  opacity:.55; filter: blur(14px);
}

/* Step number bubble */
.hiw-step-bubble{
  position:absolute; top:-14px; left:calc(50% - 18px); width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; font-weight:800; color:#0B0D10; z-index:2;
  background: var(--grad-gold); box-shadow: 0 10px 22px rgba(203,162,74,.25);
  border:1px solid rgba(203,162,74,.45);
}

/* Icon bubbles */
.hiw-icon{
  width:64px; height:64px; border-radius:16px; display:grid; place-items:center; margin:10px auto 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.hiw-icon-blue{   background: linear-gradient(180deg, #142033, #0f1726); border-color: rgba(57,167,255,.35); }
.hiw-icon-purple{ background: linear-gradient(180deg, #1a122b, #140e22); border-color: rgba(138,92,246,.38); }
.hiw-icon-gold{   background: linear-gradient(180deg, #2a2314, #1b170e); border-color: rgba(203,162,74,.42); }
.hiw-icon-amber{  background: linear-gradient(180deg, #2b1a10, #1c130c); border-color: rgba(255,163,90,.40); }

/* Card text */
.hiw-card-title{ text-align:center; color:#F2EEDC; font-weight:800; font-size:19px; margin-bottom:8px; }
.hiw-card-text{ text-align:center; color:var(--text-warm); line-height:1.75; font-size:15.5px; margin:0; }

/* Entrance animation (kept subtle; remove if you want instant render) */
@keyframes fadeUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.hiw-card{ animation: fadeUp .6s ease both; }
.hiw-card:nth-child(1){ animation-delay:.05s; }
.hiw-card:nth-child(2){ animation-delay:.12s; }
.hiw-card:nth-child(3){ animation-delay:.19s; }
.hiw-card:nth-child(4){ animation-delay:.26s; }
@media (prefers-reduced-motion: reduce){ .hiw-card{ animation:none; } }

/*CSS OF */