/* =====================================================================
   Grameen Trading — 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;
  /* Every accent below is tied to the actual logo gradient (#00F0FF cyan to
     #00E599 green) — these used to be five unrelated colors (a UIkit blue,
     a separate cyan, a gold, a purple, a different green), which is why
     buttons/nav/logo never visually matched. */
  --td-blue: #00cfff;
  --td-cyan: #00f0ff;
  --td-gold: #00e599;
  --td-purple: #00e599;
  --td-green: #00e599;
  --td-radius: 20px;
  --td-gradient: linear-gradient(90deg, #00f0ff, #00e599);
}

/* Sitewide brand-color fix: the vendor template's own compiled theme (in
   style.css) ships a raw tan/gold #c49a6c as .uk-button-primary's default
   background, and a matching amber as the active-nav-item color — colors
   that have nothing to do with this brand. Earlier overrides in this file
   only re-colored a few specific buttons (the hero slideshow's CTA, for
   instance), so every OTHER .uk-button-primary — including the one inside
   the mobile full-screen nav menu — kept falling back to that raw vendor
   tan. This pair of global rules, loaded after style.css so they win the
   cascade, brings every instance in line with the logo's actual cyan-to-
   green gradient, everywhere on the site, without having to hunt down each
   individual usage. */
.uk-button-primary {
  background: var(--td-gradient) !important;
  color: #08131b !important;
}
.uk-button-primary:hover {
  background: var(--td-gradient) !important;
  opacity: 0.9;
  color: #08131b !important;
}
.uk-nav-default > li.uk-active > a {
  color: var(--td-green) !important;
}
/* Same raw-vendor-blue issue as .uk-button-primary above, on the circular
   icon badges (.in-icon-wrap.primary-color) several inner pages use for
   their "Who we are / Our Vision / Our Mission"-style info blocks. */
.in-icon-wrap.primary-color {
  background: var(--td-gradient) !important;
  color: #08131b !important;
}

/* The vendor stylesheet hardcodes a generic UIkit blue (#1a73e8) on the
   scroll-to-top button — the one spot on the page that never got
   brought in line with the brand's cyan-to-green gradient. */
.to-top {
  background: var(--td-gradient) !important;
}
.to-top i {
  color: #08131b !important;
}

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 market-data 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;
}

/* Hero market-data 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;
}

@media (max-width: 640px) {
  /* The glass headline panel's 40px padding (added above for the desktop
     hero look) eats too much of a narrow phone viewport otherwise. */
  .in-slideshow .uk-overlay {
    padding: 22px;
  }
  .in-slideshow h1 {
    font-size: 1.8rem !important;
    line-height: 1.25 !important;
  }
  .in-slideshow {
    min-height: 0;
  }
}

@media (max-width: 959px) {
  /* Both of these already carry UIkit's own uk-visible@m (meant to hide them
     below 960px via style.css's `display: none !important` media rule), but
     on-device testing showed the second hero slide's "Discover account"
     button and the icon-feature row overlapping on actual phones anyway —
     not reproducible in a desktop browser's mobile emulation, which suggests
     a UIkit slideshow JS timing quirk (it recalculates/re-applies inline
     styles on slide elements) beats its own CSS rule in that situation.
     Restating the same hide here, scoped to the same breakpoint, means it no
     longer depends on that timing at all. */
  .in-slideshow-feature,
  .in-slideshow-button .uk-button-default {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- */
/* "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);
}

/* Several instrument icons (e.g. img/Energy.webp) ship as flat product
   photos with an opaque white square baked into the file, unlike the
   transparent-background icons the rest of the row uses — dropped
   directly onto the dark glass card that white square reads as a
   rendering bug. Giving every icon in the row the same light tile
   turns that white square into a deliberate, consistent badge instead
   of a one-off glitch. */
.instrument-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(180deg, #f5f7fa, #e8ecf2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.instrument-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

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

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

/* On phones, UIkit's grid stacks these to one full-width card per row —
   six full-screen cards in a row read as a wall of separate pages to
   scroll through. A horizontal swipe-to-scroll strip with snap points
   shows the same six cards in far less vertical space, and the next
   card peeking in at the edge signals there's more to swipe to. */
@media (max-width: 639px) {
  .instrument-cards-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    margin-left: 0 !important;
  }
  .instrument-cards-row::-webkit-scrollbar {
    display: none;
  }
  .instrument-cards-row > .instrument-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
    padding-left: 12px !important;
    margin-left: 0 !important;
  }
}

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

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

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

/* The vendor stylesheet's light #f9f9f9 band behind this section left an
   odd bright strip floating in an otherwise all-dark page. */
.account-cards-section {
  background-color: transparent !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;
}

/* ---------------------------------------------------------------- */
/* Legal/Docs pages (Risk Warning, Privacy Policy, KYC, Transaction)  */
/* ---------------------------------------------------------------- */
.legal-doc-page {
  background: var(--td-bg) !important;
  min-height: 60vh;
  padding: 60px 0 80px;
}
.legal-doc-page h1 {
  color: #fff !important;
  margin-bottom: 8px;
}
.legal-doc-page .legal-updated {
  color: var(--td-text-dimmer) !important;
  font-size: 13px;
  margin-bottom: 40px;
  display: block;
}
.legal-doc-page h2 {
  color: #fff !important;
  font-size: 20px;
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-doc-page p,
.legal-doc-page li {
  color: var(--td-text-dim) !important;
  line-height: 1.7;
  font-size: 14.5px;
}
.legal-doc-page ul {
  margin: 12px 0 12px 20px;
  list-style: disc;
}
.legal-doc-page strong { color: #fff; }
.legal-doc-page a { color: var(--td-cyan); }

/* ---------------------------------------------------------------- */
/* 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 {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- */
/* About page — its "meet-excellence"/"feature-card"/"trading-features" */
/* sections are unique to this page (not shared with index.php), and    */
/* style.css hardcodes them for a light page: white cards, #1a1a1a/#555 */
/* text. None of that is unreadable on its own (dark-on-white still has */
/* contrast) — it just sits as a stray white block on the otherwise     */
/* dark site, which is what needed fixing here, not text visibility.    */
/* ---------------------------------------------------------------- */
.meet-excellence,
.trading-features {
  background: var(--td-bg) !important;
}

.meet-excellence .feature-card,
.trading-features .feature-card {
  background: linear-gradient(180deg, var(--td-elevated), var(--td-bg-2)) !important;
  border: 1px solid var(--td-glass-border);
  box-shadow: none !important;
}

.meet-excellence h1,
.meet-excellence h2,
.trading-features h2,
.feature-card h3 {
  color: #fff !important;
}

.meet-excellence h1 span {
  background: var(--td-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.meet-excellence .subtitle,
.meet-excellence .feature-card > p,
.feature-card p {
  color: var(--td-text-dim) !important;
}

.btn-primary {
  background: var(--td-gradient) !important;
  color: #08131b !important;
}
.btn-primary:hover {
  background: var(--td-gradient) !important;
  opacity: 0.9;
}

/* ---------------------------------------------------------------- */
/* Sitewide safety net for plain vendor-template content blocks       */
/* ---------------------------------------------------------------- */
/* Several inner pages (about.php's "About Company" section, and the
   same boilerplate block reused on other pages) place plain <h1>/<h3>/
   <p> tags directly inside a generic .uk-section with no page-specific
   wrapper class for redesign-3d.css to target. style.css's default for
   those tags is a near-black heading color meant for a light page —
   sitting directly on this theme's dark body (no white card behind it,
   unlike .meet-excellence above) that reads as literally invisible
   text, not just low-contrast. Scoped to <main> so it can't touch
   header/nav/footer, which already have their own correct, more
   specific color rules elsewhere in this file. */
main h1, main h2, main h3, main h4 {
  color: #fff !important;
}
main p, main .uk-text-muted, main .uk-text-lead {
  color: var(--td-text-dim) !important;
}