/* =====================================================================
   Tradexness — 3D Marketing Redesign
   Dark navy + glass + gradient theme, loaded after style.css/custom.css
   so these rules win the normal cascade. A few components further down
   the page ship their own inline <style> block with equal-specificity
   selectors that appears *later* in the DOM than this file's <link> —
   those specific overrides use !important to guarantee they still win.
   ===================================================================== */

:root {
  --td-bg: #0a0e17;
  --td-bg-2: #060810;
  --td-elevated: #111827;
  --td-glass: rgba(255, 255, 255, 0.045);
  --td-glass-strong: rgba(255, 255, 255, 0.07);
  --td-glass-border: rgba(255, 255, 255, 0.1);
  --td-text: #ffffff;
  --td-text-dim: #aab2c2;
  --td-text-dimmer: #6b7280;
  --td-blue: #2980f2;
  --td-cyan: #40c7fa;
  --td-gold: #f2c158;
  --td-purple: #8c73f2;
  --td-green: #34d67a;
  --td-radius: 20px;
  --td-gradient: linear-gradient(90deg, var(--td-blue), var(--td-cyan));
}

html {
  background: var(--td-bg);
}

body {
  background: var(--td-bg) !important;
  color: var(--td-text-dim);
}

/* ---------------------------------------------------------------- */
/* Navbar                                                            */
/* ---------------------------------------------------------------- */
.uk-navbar-container {
  background: rgba(8, 11, 18, 0.72) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--td-glass-border);
}

.uk-navbar-container .uk-logo,
.uk-navbar-nav > li > a {
  color: var(--td-text) !important;
}

.uk-navbar-nav > li > a:hover {
  color: var(--td-cyan) !important;
}

.uk-navbar-dropdown {
  background: var(--td-elevated) !important;
  border: 1px solid var(--td-glass-border);
}

.uk-navbar-dropdown-nav a {
  color: var(--td-text-dim) !important;
}

.uk-navbar-dropdown-nav a:hover {
  color: var(--td-cyan) !important;
}

.in-optional-nav a.uk-button-link {
  color: var(--td-text) !important;
}

/* UIkit's own theme forces a white sticky-navbar background once scrolled
   (.uk-sticky.uk-active { background: #fff !important; }), and that selector
   (2 classes) has higher specificity than the plain .uk-navbar-container
   override above (1 class) — so it was winning despite both being
   !important, turning the whole sticky bar white while every link/button
   above still rendered white text on top of it (invisible). This selector
   is 3 classes, so it wins over UIkit's regardless of source order. */
.uk-navbar-container.uk-sticky.uk-active {
  background: rgba(8, 11, 18, 0.92) !important;
  border-bottom: 1px solid var(--td-glass-border) !important;
  box-shadow: none !important;
}

.uk-sticky.uk-active .uk-navbar-nav > li > a,
.uk-sticky.uk-active .uk-logo {
  color: var(--td-text) !important;
}

.uk-sticky.uk-active .in-optional-nav a.uk-button-link {
  color: var(--td-text) !important;
}

/* ---------------------------------------------------------------- */
/* Hero / slideshow                                                   */
/* ---------------------------------------------------------------- */
.in-slideshow {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 900px 700px at 72% 35%, #16233c 0%, #0a0e17 55%, #030408 100%) !important;
  min-height: 620px;
}

.in-slideshow h1 {
  color: #fff !important;
  font-weight: 700;
}

.in-slideshow h1 .in-highlight {
  background: var(--td-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

.in-slideshow h1 .in-highlight::before {
  /* style.css draws a peach "highlighter pen" bar behind this word for the
     old light theme — clashes with the new dark gradient-text treatment */
  display: none !important;
}

.in-slideshow .uk-text-lead {
  color: var(--td-text-dim) !important;
}

.in-slideshow .uk-text-small {
  color: var(--td-text-dimmer) !important;
}

.in-slideshow .uk-overlay {
  background: var(--td-glass);
  border: 1px solid var(--td-glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--td-radius);
  padding: 40px;
  position: relative;
  z-index: 2;
}

.in-slideshow .uk-position-center img {
  display: none !important; /* replaced by the 3D globe canvas */
}

.in-slideshow .in-slideshow-button .uk-button-primary {
  background: var(--td-gradient) !important;
  border: none !important;
  color: #06101f !important;
  font-weight: 600;
}

.in-slideshow .in-slideshow-button .uk-button-default {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--td-glass-border) !important;
  color: #fff !important;
}

.in-slideshow-feature p {
  color: var(--td-text-dim) !important;
}

.in-slideshow .in-icon-wrap {
  background: var(--td-glass-strong) !important;
  border: 1px solid var(--td-glass-border);
  color: var(--td-cyan) !important;
  box-shadow: none !important;
}

/* 3D globe canvas + floating price chip (see hero-3d.js) */
#td-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.in-slideshow .uk-container {
  position: relative;
  z-index: 1;
}

#td-price-chip {
  position: absolute;
  right: 8%;
  bottom: 14%;
  z-index: 2;
  background: var(--td-glass-strong);
  border: 1px solid var(--td-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 14px;
  padding: 14px 20px;
  color: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  animation: td-bob 5s ease-in-out infinite;
  will-change: transform;
  transform: rotate(4deg);
}

#td-price-chip .td-pair {
  display: block;
  font-size: 12px;
  color: var(--td-text-dim);
  margin-bottom: 2px;
}

#td-price-chip .td-price {
  display: block;
  font-size: 20px;
  font-weight: 700;
}

#td-price-chip .td-delta {
  display: block;
  font-size: 12px;
  color: var(--td-green);
  margin-top: 2px;
}

@keyframes td-bob {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-12px); }
}

@media (max-width: 959px) {
  #td-price-chip { display: none; }
}

/* ---------------------------------------------------------------- */
/* "What can you trade" instrument grid                               */
/* ---------------------------------------------------------------- */
.in-profit-14 {
  background: radial-gradient(ellipse 1000px 500px at 20% 0%, #0f1728 0%, var(--td-bg) 60%) !important;
}

.in-profit-14 h2 {
  color: #fff !important;
}

.instrument-card {
  background: var(--td-glass);
  border: 1px solid var(--td-glass-border);
  border-radius: 18px;
  padding: 28px 16px 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.instrument-card:hover {
  border-color: rgba(64, 199, 250, 0.4);
  box-shadow: 0 20px 40px rgba(41, 128, 242, 0.18);
}

.instrument-card h4 {
  color: #fff !important;
}

.instrument-card p {
  color: var(--td-text-dim) !important;
  font-size: 13px;
}

/* ---------------------------------------------------------------- */
/* Account Types                                                     */
/* ---------------------------------------------------------------- */
.account-types {
  background: var(--td-bg) !important;
}

.account-types h2 {
  color: #fff !important;
}

.account-types > p {
  color: var(--td-text-dim) !important;
}

.account-card {
  background: linear-gradient(180deg, var(--td-elevated), var(--td-bg-2)) !important;
  color: var(--td-text) !important;
  border: 1px solid var(--td-glass-border);
  border-radius: var(--td-radius) !important;
  box-shadow: none !important;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: visible !important;
}

.account-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--td-radius);
  padding: 1px;
  background: linear-gradient(135deg, var(--td-cyan), transparent 40%, var(--td-gold));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.account-card:hover {
  box-shadow: 0 24px 50px rgba(41, 128, 242, 0.2) !important;
}

.account-card:hover::before {
  opacity: 0.8;
}

.card-header {
  border-bottom: 1px solid var(--td-glass-border) !important;
}

.card-header h3 {
  color: #fff !important;
}

.card-header p {
  color: var(--td-text-dim) !important;
}

.card-body ul li {
  color: #dfe4ec;
}

.card-body .cta-button {
  background: var(--td-gradient) !important;
  color: #06101f !important;
}

.card-body .cta-button:hover {
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------- */
/* Trading Platform                                                   */
/* ---------------------------------------------------------------- */
.trading-platform {
  background: radial-gradient(ellipse 1100px 600px at 25% 20%, #172137 0%, var(--td-bg) 60%) !important;
  position: relative;
  overflow: hidden;
}

.trading-platform h2,
.trading-platform .feature h3 {
  color: #fff !important;
}

.trading-platform .description,
.trading-platform .feature p,
.trading-platform .cta p {
  color: var(--td-text-dim) !important;
}

.trading-platform .feature {
  background: var(--td-glass);
  border: 1px solid var(--td-glass-border);
  border-radius: 18px;
  padding: 24px 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.trading-platform .feature:hover {
  box-shadow: 0 20px 40px rgba(41, 128, 242, 0.15);
}

.trading-platform .feature .badge {
  background: rgba(64, 199, 250, 0.15) !important;
  color: var(--td-cyan) !important;
}

.trading-platform .platform-image-container {
  background: none !important;
}

.trading-platform .cta-button {
  background: var(--td-gradient) !important;
  color: #06101f !important;
}

.trading-platform .cta-button:hover {
  background: var(--td-gradient) !important;
  filter: brightness(1.08);
}

/* Floating 3D chart card */
.td-float-chart {
  position: absolute;
  right: 6%;
  bottom: 10%;
  width: 170px;
  height: 120px;
  background: var(--td-glass-strong);
  border: 1px solid rgba(64, 199, 250, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(41, 128, 242, 0.25);
  transform: rotate(-8deg);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 16px;
  will-change: transform;
}

.td-float-chart span {
  display: block;
  width: 14px;
  border-radius: 3px;
}

.td-float-chart span.up { background: var(--td-green); }
.td-float-chart span.down { background: #f2545b; }

@media (max-width: 959px) {
  .td-float-chart { display: none; }
}

/* ---------------------------------------------------------------- */
/* Live price ticker (spread-steps-sec) — page ships an inline
   <style> block later in the DOM with equal specificity, so these
   need !important to reliably win regardless of source order.      */
/* ---------------------------------------------------------------- */
.spread-steps-sec {
  --bg: #0b1220 !important;
  --card: #121a2b !important;
  --muted: #8892a4 !important;
  --line: rgba(255, 255, 255, 0.1) !important;
  --primary: var(--td-blue) !important;
  --primary-hover: var(--td-cyan) !important;
  --ink: #e8ecf3 !important;
  --ink-2: #c3c9d6 !important;
  background: var(--td-bg) !important;
}

.spread-steps-sec h2 {
  color: #fff !important;
}

.tab-list label {
  background: var(--card) !important;
  color: var(--ink-2) !important;
  border-color: transparent !important;
}

.tabs input:checked ~ .tabbar-scroll .tabbar-inner label {
  background: var(--card) !important;
  color: #fff !important;
  border-color: var(--line) var(--line) var(--card) !important;
}

.tab-content {
  background: var(--card) !important;
  border-color: var(--line) !important;
}

.live-price-widgets table {
  background: var(--card) !important;
}

.live-price-widgets td {
  color: var(--ink) !important;
}

thead th {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}

tbody td {
  border-bottom-color: var(--line) !important;
}

.coin-logo {
  background: #fff;
}

/* custom.css ships a higher-specificity `.live-price-widgets a.trade-btn`
   rule (transparent background + black text) that beats the inline
   <style> block's plain `.trade-btn` — invisible on the dark theme.
   !important guarantees this wins regardless of load order. */
.live-price-widgets a.trade-btn {
  background: var(--td-gradient) !important;
  color: #06101f !important;
  border: 1px solid transparent !important;
  font-weight: 700 !important;
}

.live-price-widgets a.trade-btn:hover {
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------- */
/* Get Started steps                                                  */
/* ---------------------------------------------------------------- */
.get-started {
  background: radial-gradient(ellipse 1000px 500px at 80% 0%, #172137 0%, var(--td-bg) 60%) !important;
}

.get-started h2 {
  color: #fff !important;
}

.get-started p {
  color: var(--td-text-dim) !important;
}

.get-started .step {
  background: var(--td-glass);
  border: 1px solid var(--td-glass-border);
  border-radius: 18px;
  padding: 24px 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.get-started .step h3 {
  color: #fff !important;
}

.get-started .step p {
  color: var(--td-text-dim) !important;
}

/* ---------------------------------------------------------------- */
/* Testimonials                                                       */
/* ---------------------------------------------------------------- */
.testimonial-section {
  background: var(--td-bg) !important;
}

.testimonial-section .section-title {
  color: #fff !important;
}

.swiper-slide {
  background: var(--td-glass-strong) !important;
  border: 1px solid var(--td-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.testimonial-items .testimonial-text,
.testimonial-items .testimonial-title {
  color: #fff !important;
}

/* ---------------------------------------------------------------- */
/* Funding strip + "Platform by traders" + Footer                    */
/* ---------------------------------------------------------------- */
.in-profit-16 {
  background: var(--td-bg) !important;
}

.in-profit-16 h4,
.in-profit-16 .in-create-account .uk-text-lead {
  color: #fff !important;
}

.in-profit-16 .uk-text-muted {
  color: var(--td-text-dimmer) !important;
}

.in-profit-16 .uk-tile {
  background: var(--td-glass) !important;
  border-radius: 12px;
}

.in-profit-16 .uk-input {
  background: var(--td-glass) !important;
  border: 1px solid var(--td-glass-border) !important;
  color: #fff !important;
}

.in-profit-16 .uk-label {
  background: var(--td-gradient) !important;
  color: #06101f !important;
}

.in-profit-17 {
  background: radial-gradient(ellipse 1100px 600px at 50% 0%, #16233c 0%, var(--td-bg) 60%) !important;
}

.in-profit-17 h2 {
  color: #fff !important;
}

.in-profit-17 .uk-text-lead {
  color: var(--td-text-dim) !important;
}

.in-profit-17 .in-button-app {
  background: var(--td-glass) !important;
  border: 1px solid var(--td-glass-border) !important;
  color: #fff !important;
}

footer .uk-section-secondary {
  background: var(--td-bg-2) !important;
  border-top: 1px solid var(--td-glass-border);
}

footer h4,
footer .footer-warning h5 {
  color: #fff !important;
}

footer a,
footer p,
footer .uk-text-small {
  color: var(--td-text-dim) !important;
}

footer a:hover {
  color: var(--td-cyan) !important;
}

/* ---------------------------------------------------------------- */
/* Tilt-card mechanics (JS toggles rotateX/rotateY via inline style;  */
/* this just declares the perspective + reduced-motion escape hatch) */
/* ---------------------------------------------------------------- */
.account-cards-container,
.in-profit-14 .uk-child-width-1-4\@m,
.trading-platform .features {
  perspective: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  .account-card,
  .instrument-card,
  .trading-platform .feature,
  #td-price-chip {
    animation: none !important;
    transition: none !important;
  }
}