/* ═══════════════════════════════════════════
   SYCNAP'S TRADEZ — PREMIUM 3D STYLESHEET
   ═══════════════════════════════════════════ */

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#04080f}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#38bdf8,#00d4a0);border-radius:10px}

/* ── CURSOR GLOW — disabled ── */
.cursor-glow{ display:none; }

/* ── NAV GLASSMORPHISM ── */
nav{
  background:rgba(4,8,15,0.7) !important;
  backdrop-filter:blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
  border-bottom:1px solid rgba(56,189,248,0.1) !important;
  box-shadow:0 4px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(56,189,248,0.08) !important;
}

/* ── HERO ORBS ── */
.orb{
  position:absolute;border-radius:50%;filter:blur(80px);
  pointer-events:none;z-index:0;animation:orbFloat 8s ease-in-out infinite;
}
.orb-1{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(56,189,248,0.12),transparent 70%);
  top:-100px;right:-100px;animation-delay:0s;
}
.orb-2{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,212,160,0.1),transparent 70%);
  bottom:0;left:-80px;animation-delay:-3s;
}
.orb-3{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(139,92,246,0.08),transparent 70%);
  top:50%;left:50%;animation-delay:-5s;
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1)}
  33%{transform:translateY(-30px) scale(1.05)}
  66%{transform:translateY(20px) scale(0.97)}
}

/* ── 3D TILT CARDS (VanillaTilt target) ── */
.plan-card,.payout-card,.review-card,.blog-card,.step-card,.feature-card{
  transform-style:preserve-3d;
  transition:box-shadow 0.3s ease, border-color 0.3s ease !important;
  will-change:transform;
}
.plan-card:hover,.payout-card:hover,.review-card:hover,.blog-card:hover,.step-card:hover{
  box-shadow:0 25px 60px rgba(0,0,0,0.5), 0 0 30px rgba(56,189,248,0.08) !important;
  border-color:rgba(56,189,248,0.25) !important;
}
.plan-card.popular:hover{
  box-shadow:0 30px 70px rgba(0,0,0,0.5), 0 0 40px rgba(56,189,248,0.15) !important;
}

/* ── CARD SHINE SWEEP ── */
.plan-card,.payout-card,.review-card,.blog-card{
  position:relative;
}
.payout-card,.review-card,.blog-card{
  overflow:hidden;
}
.payout-card::before,.review-card::before,.blog-card::before{
  content:'';position:absolute;top:-100%;left:-100%;
  width:60%;height:300%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.04) 50%,transparent 60%);
  transition:all 0.6s ease;pointer-events:none;z-index:1;
}
.payout-card:hover::before,.review-card:hover::before,.blog-card:hover::before{
  top:100%;left:100%;
}

/* ── 3D BUTTONS ── */
.plan-btn,.btn-primary,.hero-btn-primary,.cta-btn,.plan-btn.outline{
  position:relative;
  transform:translateY(0) !important;
  transition:transform 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow:0 4px 15px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset !important;
}
.plan-btn:hover,.btn-primary:hover,.hero-btn-primary:hover,.cta-btn:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 8px 25px rgba(56,189,248,0.3), 0 0 20px rgba(56,189,248,0.15) !important;
}
.plan-btn:active,.btn-primary:active,.hero-btn-primary:active,.cta-btn:active{
  transform:translateY(1px) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ── GLOWING BORDER CARDS ── */
.plan-card.popular{
  box-shadow:0 0 0 1px rgba(56,189,248,0.3), 0 20px 50px rgba(0,0,0,0.4), 0 0 40px rgba(56,189,248,0.06) !important;
}

/* ── SECTION REVEAL ── */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible{
  opacity:1;transform:translateY(0);
}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

/* ── FLOATING ELEMENTS ── */
.float-anim{animation:floatUp 4s ease-in-out infinite}
.float-anim-2{animation:floatUp 5s ease-in-out infinite;animation-delay:-2s}
@keyframes floatUp{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

/* glow-text removed — no decorative text shadows on headings */
.glow-text{ }
.glow-green{ }

/* ── 3D INPUT FIELDS ── */
input,select,textarea{
  transition:box-shadow 0.2s ease, border-color 0.2s ease !important;
}
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(56,189,248,0.12), 0 4px 20px rgba(0,0,0,0.3) !important;
  border-color:rgba(56,189,248,0.5) !important;
}

/* stat glow removed */
.stat-num,.payout-amount{ transition:color 0.3s ease; }

/* ── VERIFIED BADGE PULSE ── */
.verified-badge{
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,212,160,0.3)}
  50%{box-shadow:0 0 0 6px rgba(0,212,160,0)}
}

/* ── STEP CARDS 3D STACK ── */
.step-card{
  background:linear-gradient(135deg,rgba(13,24,41,0.8),rgba(8,15,26,0.9)) !important;
  border:1px solid rgba(56,189,248,0.1) !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.3), 0 1px 0 rgba(56,189,248,0.05) inset !important;
  transition:transform 0.3s ease, box-shadow 0.3s ease !important;
}
.step-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 20px rgba(56,189,248,0.08) !important;
}
.step-num{
  box-shadow:0 0 20px rgba(56,189,248,0.3), 0 4px 15px rgba(0,0,0,0.3) !important;
  animation:numGlow 3s ease-in-out infinite;
}
@keyframes numGlow{
  0%,100%{box-shadow:0 0 20px rgba(56,189,248,0.3),0 4px 15px rgba(0,0,0,0.3)}
  50%{box-shadow:0 0 35px rgba(56,189,248,0.5),0 4px 15px rgba(0,0,0,0.3)}
}

/* ── BLOG CARD 3D ── */
.blog-card{
  box-shadow:0 8px 30px rgba(0,0,0,0.3) !important;
  transition:transform 0.3s ease, box-shadow 0.3s ease !important;
}
.blog-card:hover{
  transform:translateY(-8px) scale(1.01) !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 25px rgba(56,189,248,0.08) !important;
}

/* ── MODAL 3D ENTRANCE ── */
.modal{
  animation:modalEntrance 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalEntrance{
  from{transform:scale(0.85) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}

/* ── SECTION DIVIDER GLOW ── */
section{
  position:relative;
}

/* ── FOOTER GLASS ── */
footer{
  border-top:1px solid rgba(56,189,248,0.08) !important;
  box-shadow:0 -20px 60px rgba(0,0,0,0.3) !important;
}

/* ── TOAST 3D ── */
.toast{
  box-shadow:0 10px 40px rgba(0,0,0,0.4), 0 0 20px rgba(56,189,248,0.1) !important;
  backdrop-filter:blur(16px) !important;
}

/* ── NAV LINK HOVER ── */
.nav-link{
  transition:all 0.2s ease !important;
}
.nav-link:hover,.nav-link.active{
  box-shadow:inset 3px 0 0 rgba(56,189,248,0.6), 0 0 20px rgba(56,189,248,0.05) !important;
}

/* ── BADGE GLOW ── */
.badge.active,.payout-tag.tag-green{
  box-shadow:0 0 12px rgba(0,212,160,0.3) !important;
}
.badge.suspended{
  box-shadow:0 0 12px rgba(239,68,68,0.2) !important;
}

/* ── TABLE ROWS ── */
.tbl tbody tr{
  transition:background 0.2s ease, box-shadow 0.2s ease !important;
}
.tbl tbody tr:hover{
  background:rgba(56,189,248,0.04) !important;
  box-shadow:inset 2px 0 0 rgba(56,189,248,0.4) !important;
}

/* ── HERO SECTION ── */
#hero,section:first-of-type{
  overflow:hidden;
  position:relative;
}

/* ── GRID BACKGROUND PATTERN ── */
.grid-bg::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(56,189,248,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;z-index:0;
}

/* ── REVIEW STARS GLOW ── */
.review-stars{
  text-shadow:0 0 10px rgba(245,158,11,0.6) !important;
}

/* section-tag glow removed — clean transparent background */

/* ── LIGHT MODE OVERRIDES (html.light-active = explicit light OR auto+OS-light) ── */
html.light-active ::-webkit-scrollbar-track { background:#eef2f7; }
html.light-active nav { background:rgba(255,255,255,0.92) !important; border-bottom:1px solid rgba(14,31,59,0.08) !important; box-shadow:0 1px 0 rgba(14,31,59,0.06),0 4px 24px rgba(0,0,0,0.06) !important; }
html.light-active .step-card { background:linear-gradient(135deg,#ffffff,#f8fafc) !important; border:1px solid rgba(14,31,59,0.09) !important; box-shadow:0 4px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04) !important; }
html.light-active .step-card:hover { box-shadow:0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05) !important; transform:translateY(-8px) !important; }
html.light-active .plan-card:hover,
html.light-active .payout-card:hover,
html.light-active .review-card:hover { box-shadow:0 16px 48px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.05) !important; border-color:rgba(14,165,217,0.2) !important; }
html.light-active .plan-card.popular { box-shadow:0 0 0 1px rgba(14,165,217,0.28),0 12px 40px rgba(0,0,0,0.09),0 0 30px rgba(14,165,217,0.07) !important; }
html.light-active footer { border-top:1px solid rgba(14,31,59,0.08) !important; box-shadow:0 -6px 24px rgba(0,0,0,0.05) !important; }
html.light-active .blog-card { box-shadow:0 2px 12px rgba(0,0,0,0.07),0 1px 3px rgba(0,0,0,0.04) !important; }
html.light-active .blog-card:hover { box-shadow:0 16px 48px rgba(0,0,0,0.10),0 0 20px rgba(14,165,217,0.06) !important; }
html.light-active input:focus,
html.light-active select:focus,
html.light-active textarea:focus { box-shadow:0 0 0 3px rgba(14,165,217,0.14),0 2px 8px rgba(0,0,0,0.05) !important; }
html.light-active .plan-btn:hover,
html.light-active .hero-btn-primary:hover { box-shadow:0 8px 24px rgba(14,165,217,0.22),0 0 14px rgba(14,165,217,0.10) !important; }
html.light-active .step-num { box-shadow:0 0 16px rgba(14,165,217,0.18),0 4px 12px rgba(0,0,0,0.08) !important; }