/* ===================================================================
   Gold Dragon FX — shared stylesheet
   Palette pulled directly from brand mark:
     --red   #C92322  (dragon)
     --gold  #CDA83B  (dragon tail / wordmark)
   Brief calls for white / light-grey backgrounds and black text,
   so the palette below stays inside that instruction and uses the
   brand red/gold only as accent, never as a background field.
=================================================================== */

:root {
  --red: #C92322;
  --red-dark: #a01c1b;
  --gold: #CDA83B;
  --gold-dark: #a9862a;
  --ink: #141414;
  --grey-line: #e2e2e0;
  --white: #ffffff;
  --grey: #f4f4f3;
  --grey-mid: #ececeb;
  --max: 1160px;

  --font-display: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

}
/* -----------------------
TOP BAR
-------------------------*/

.topbar{

    background:#111;

   

    display:flex;

    align-items:center;

}

.topbar .container{

    width:92%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-left{

    color:#ddd;

    font-size:14px;

    font-weight:500;

}

.top-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.top-right a{

    color:#fff;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}

.top-right a:hover{

    color:#d92c2c;

}

.open-btn{

    background:#d92c2c;

    padding:9px 22px;

    border-radius:30px;

    font-weight:600;

}

.open-btn:hover{

    background:#b90000;

    color:#fff !important;

}

#google_translate_element{

    transform:scale(.85);

    transform-origin:right center;

}

/* -----------------------
ACTION BANNER
-------------------------*/

.action-banner{

    background:rgba(15,15,15,.98);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(255,255,255,.08);

    position:sticky;

    top:0;

    z-index:9999;

    box-shadow:0 8px 25px rgba(0,0,0,.2);

}

.action-banner .container{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

}

/* LEFT */

.banner-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.banner-left img{

   

}

.banner-text h4{

    color:#fff;

    margin:0;

    font-size:22px;

    font-weight:700;

}

.banner-text span{

    color:#e53935;

}

.banner-text p{

    margin:4px 0 0;

    color:#bbb;

    font-size:14px;

}


/* RIGHT */

.banner-right{

    display:flex;

    gap:15px;

}


/* LOGIN */

.btn-login{

    padding:12px 26px;

    border:2px solid #d4af37;

    color:#d4af37;

    border-radius:50px;

    text-decoration:none;

    transition:.35s;

    font-weight:600;

}

.btn-login:hover{

    background:#d4af37;

    color:#111;

}


/* ACCOUNT */

.btn-account{

    padding:12px 30px;

    background:linear-gradient(135deg,#ff4d4d,#b40000);

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:0 10px 25px rgba(255,0,0,.25);

}

.btn-account:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(255,0,0,.35);

}


/* Google Translate */

#google_translate_element{

    transform:scale(.9);

    transform-origin:right center;

}


/* Mobile */

@media(max-width:768px){

.action-banner .container{

    flex-direction:column;

    gap:18px;

    text-align:center;
	
	width: 96%;

}

.banner-left{

    flex-direction:column;

}

.banner-right{

    width:100%;

}

.banner-right a{

    flex:1;

    text-align:center;

}

.banner-text h4{

    font-size:18px;

}

.banner-text p{

    font-size:13px;

}

.top-bar .container{

    flex-direction:column;

    gap:6px;

    padding:8px 0;

}

.top-bar{

    height:auto;

}

}
/* Hide Google branding */
.goog-logo-link,
.goog-te-gadget span {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
}

/* Style the dropdown */
.goog-te-combo {
    background: #1b1b1b !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    border-radius: 30px !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    min-width: 160px;
}

.goog-te-combo:hover {
    border-color: #d92c2c !important;
}

/* Remove top Google banner */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 16px; }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- top utility bar (translate) ---------- */
.util-bar {
  background: var(--ink);
  color: #cfcfcf;
  font-size: 0.78rem;
}
.util-bar .wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 34px;
  gap: 10px;
}
#google_translate_element {
  line-height: 1;
}
.goog-te-gadget { font-family: var(--font-body) !important; color: #cfcfcf !important; font-size: 0.78rem !important; }
.goog-te-gadget img { vertical-align: middle; }

/* ---------- header / nav ---------- */
header.site-header {
  border-bottom: 1px solid var(--grey-line);
  background: var(--white);
  position: relative;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img{
     transform:scale(1.35) !important;   /* Zoom */
    transform-origin:left center !important;
    display:block !important;
    width:200px;      /* Increase as needed */
    height:auto;
    object-fit:contain;
}

nav.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
nav.primary-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
nav.primary-nav a:hover,
nav.primary-nav a:focus-visible {
  border-bottom-color: var(--red);
}
nav.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--gold);
  color: var(--red);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--grey-line);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.nav-toggle span::before { content: ""; top: -6px; position: absolute; }
.nav-toggle span::after  { content: ""; top: 6px; position: absolute; }

/* ---------- scroll-in action banner ---------- */
.action-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  
}
.action-banner.is-visible { transform: translateY(0); }
.action-banner .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  gap: 16px;
}
.action-banner .banner-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
}
.action-banner .banner-msg img { height: 26px; }
.action-banner .banner-actions { display: flex; gap: 10px; }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}
.btn-ghost:hover { border-color: var(--white); }
.btn-solid {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn-solid:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-dark:hover { background: var(--ink); color: var(--white); }

/* ---------- layout utilities (replace one-off inline styles) ---------- */
.hero--compact { padding-bottom: 0; }
.hero--compact .wrap { padding-bottom: 40px; }
.text-center { text-align: center; }
.w-narrow { max-width: 700px; margin-left: auto; margin-right: auto; }
.section-note {
  max-width: 760px;
  margin: 32px auto 0;
  text-align: center;
  color: #3a3a3a;
}
/*==========================
 HERO ANIMATION
===========================*/

.hero{
    overflow:hidden;
}

/* Left Content */
.hero .copy{
    opacity:0;
    transform:translateX(-70px);
    animation:heroLeft 1s ease forwards;
    animation-delay:.3s;
}

/* Right SVG */
.hero .hero-visual{
    opacity:0;
    transform:translateX(70px) scale(.9);
    animation:heroRight 1.2s ease forwards;
    animation-delay:.6s;
}

/* Eyebrow */
.hero .eyebrow{
    display:inline-block;
    opacity:0;
    transform:translateY(20px);
    animation:fadeUp .8s ease forwards;
    animation-delay:.5s;
}

/* Hero Text */
.claim-rotator{
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp .8s ease forwards;
    animation-delay:.7s;
}

.hero-sub{
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp .8s ease forwards;
    animation-delay:.9s;
}

/* Buttons */
.hero-cta{
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp .8s ease forwards;
    animation-delay:1.1s;
}

/* SVG Floating */
.hero-visual svg{
    animation:float 5s ease-in-out infinite;
}

/* Gold Line Drawing */
.hero-visual path:last-of-type{
    stroke-dasharray:800;
    stroke-dashoffset:800;
    animation:drawLine 3s ease forwards 1.3s;
}

/* Candles */
.hero-visual rect{
    transform-origin:bottom;
    animation:candleGrow .8s ease forwards;
    transform:scaleY(0);
}

.hero-visual rect:nth-of-type(1){animation-delay:1.4s;}
.hero-visual rect:nth-of-type(2){animation-delay:1.5s;}
.hero-visual rect:nth-of-type(3){animation-delay:1.6s;}
.hero-visual rect:nth-of-type(4){animation-delay:1.7s;}
.hero-visual rect:nth-of-type(5){animation-delay:1.8s;}
.hero-visual rect:nth-of-type(6){animation-delay:1.9s;}
.hero-visual rect:nth-of-type(7){animation-delay:2s;}
.hero-visual rect:nth-of-type(8){animation-delay:2.1s;}
.hero-visual rect:nth-of-type(9){animation-delay:2.2s;}
.hero-visual rect:nth-of-type(10){animation-delay:2.3s;}

/*==========================
KEYFRAMES
===========================*/

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

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

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

@keyframes drawLine{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes candleGrow{
    to{
        transform:scaleY(1);
    }
}
/* ---------- hero / rotating claims ---------- */
.hero {
  background: var(--grey);
  border-bottom: 1px solid var(--grey-line);
  overflow: hidden;
}
.hero .wrap { padding: 72px 24px 56px; text-align: center; }
.hero .eyebrow { display: block; text-align: center; }

.claim-rotator {
  position: relative;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.claim-rotator ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.claim-rotator li {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.6rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.claim-rotator li.is-active {
  opacity: 1;
  transform: translateY(0);
}
.claim-rotator li .zero { color: var(--red); }

.hero-sub {
  max-width: 640px;
  margin: 0 auto 28px;
  color: #3a3a3a;
}
.hero-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---------- tiles ---------- */
.tiles-section { padding: 64px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tile {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: 8px;
  padding: 32px 26px;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile:hover { border-color: var(--gold); transform: translateY(-3px); }
.tile-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
}
.tile h3 { margin-bottom: 10px; }
.tile p { margin: 0; color: #3f3f3f; font-size: 0.96rem; }

/* ---------- generic content sections ---------- */
.section { padding: 60px 0; }
.section.alt { background: var(--grey); border-top: 1px solid var(--grey-line); border-bottom: 1px solid var(--grey-line); }
.section .kicker-block { max-width: 760px; }
.section .kicker-block.center { margin: 0 auto; text-align: center; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.value-card {
  display: block;
  border: 1px solid var(--grey-line);
  border-radius: 8px;
  padding: 22px 18px;
  background: var(--white);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.value-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.value-card .scale {
  width: 28px; height: 28px; margin: 0 auto 10px;
}
.value-card span { font-weight: 700; font-family: var(--font-display); color: var(--ink); }

.no-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.no-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--grey-line);
  border-radius: 6px;
  background: var(--white);
}
.no-list li .tag {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 3px 7px;
  margin-top: 2px;
}

.subsection { padding-top: 46px; border-top: 1px solid var(--grey-line); margin-top: 46px; }
.subsection:first-of-type { padding-top: 0; border-top: none; margin-top: 0; }

/* ---------- scroll-reveal animation system ----------
   Any element with class="reveal" fades + rises into place the first
   time it scrolls into the viewport (handled by IntersectionObserver
   in the shared <script> below). Add reveal-1..reveal-4 for a staggered
   delay on grids of cards (tiles, values, stats, steps). Respects
   prefers-reduced-motion (see media query further down). */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-1 { --reveal-delay: 0.05s; }
.reveal-2 { --reveal-delay: 0.15s; }
.reveal-3 { --reveal-delay: 0.25s; }
.reveal-4 { --reveal-delay: 0.35s; }

/* small pop/scale used for stat numbers + icons once revealed */
.reveal-pop {
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-pop.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.callout {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 20px;
  color: #3a3a3a;
  font-size: 0.98rem;
}

/* ---------- hero, split layout with illustration ---------- */
.hero-split .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  text-align: left;
  padding-top: 60px;
  padding-bottom: 46px;
}
.hero-split .eyebrow { text-align: left; }
.hero-split .claim-rotator { justify-content: flex-start; margin: 0 0 18px; }
.hero-split .claim-rotator li { justify-content: flex-start; }
.hero-split .hero-sub { margin: 0 0 28px; }
.hero-split .hero-cta { justify-content: flex-start; }
.hero-visual { position: relative; }
.hero-visual svg { width: 100%; height: auto; display: block; }

/* ---------- stats / trust bar ---------- */
.stats-bar {
  border-top: 1px solid var(--grey-line);
  border-bottom: 1px solid var(--grey-line);
  background: var(--white);
}
.stats-bar .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 28px 24px;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-item svg { flex: none; width: 30px; height: 30px; }
.stat-item .stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.2;
}
.stat-item .stat-label {
  display: block;
  font-size: 0.78rem;
  color: #5a5a5a;
}

/* ---------- how it works / steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
  position: relative;
}
.step {
  position: relative;
  padding: 30px 24px;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: 8px;
}
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--red);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}
.step:nth-child(2) .step-num { border-color: var(--gold); color: var(--gold-dark); }
.step:nth-child(3) .step-num { border-color: var(--red); color: var(--red); }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; color: #3f3f3f; font-size: 0.95rem; }
.step-arrow {
  display: none;
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  color: var(--grey-line);
}
@media (min-width: 901px) {
  .step-arrow { display: block; }
  .step:last-child .step-arrow { display: none; }
}

/* ---------- platform preview (illustrative chart mock) ---------- */
/*=========================
 PLATFORM SECTION ANIMATION
=========================*/

.platform-preview{
    overflow:hidden;
}

/* Initial State */
.platform-preview .copy{
    opacity:0;
    transform:translateX(-80px);
}

.platform-preview .visual{
    opacity:0;
    transform:translateX(80px) scale(.95);
}

.platform-preview .eyebrow,
.platform-preview h2,
.platform-preview p,
.platform-preview .btn{
    opacity:0;
    transform:translateY(25px);
}

/* Active Animation */

.platform-preview.active .copy{
    animation:leftSlide 1s ease forwards;
}

.platform-preview.active .visual{
    animation:rightSlide 1s ease forwards .3s;
}

.platform-preview.active .eyebrow{
    animation:fadeUp .7s ease forwards .4s;
}

.platform-preview.active h2{
    animation:fadeUp .7s ease forwards .6s;
}

.platform-preview.active p{
    animation:fadeUp .7s ease forwards .8s;
}

.platform-preview.active .btn{
    animation:fadeUp .7s ease forwards 1s;
}

/* Floating Chart */

.platform-preview.active .chart-mock{
    animation:floatChart 5s ease-in-out infinite;
}

/* Draw Gold Trend Line */

.platform-preview.active svg path{
    stroke-dasharray:700;
    stroke-dashoffset:700;
    animation:drawChart 2.5s ease forwards 1.2s;
}

/* Candlestick Animation */

.platform-preview.active svg rect{
    transform-origin:bottom;
    transform:scaleY(0);
    animation:candleGrow .5s ease forwards;
}

/* Delay each candle */

.platform-preview.active svg rect:nth-of-type(1){animation-delay:1.3s;}
.platform-preview.active svg rect:nth-of-type(2){animation-delay:1.35s;}
.platform-preview.active svg rect:nth-of-type(3){animation-delay:1.4s;}
.platform-preview.active svg rect:nth-of-type(4){animation-delay:1.45s;}
.platform-preview.active svg rect:nth-of-type(5){animation-delay:1.5s;}
.platform-preview.active svg rect:nth-of-type(6){animation-delay:1.55s;}
.platform-preview.active svg rect:nth-of-type(7){animation-delay:1.6s;}
.platform-preview.active svg rect:nth-of-type(8){animation-delay:1.65s;}
.platform-preview.active svg rect:nth-of-type(9){animation-delay:1.7s;}
.platform-preview.active svg rect:nth-of-type(10){animation-delay:1.75s;}
.platform-preview.active svg rect:nth-of-type(11){animation-delay:1.8s;}
.platform-preview.active svg rect:nth-of-type(12){animation-delay:1.85s;}
.platform-preview.active svg rect:nth-of-type(13){animation-delay:1.9s;}
.platform-preview.active svg rect:nth-of-type(14){animation-delay:1.95s;}
.platform-preview.active svg rect:nth-of-type(15){animation-delay:2s;}

/*=========================
 KEYFRAMES
=========================*/

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

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

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes drawChart{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes candleGrow{
    to{
        transform:scaleY(1);
    }
}

@keyframes floatChart{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}
.platform-preview {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: center;
}
.platform-preview .copy .eyebrow { display: inline-block; }
.chart-mock {
  background: var(--ink);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}
.chart-mock svg { width: 100%; height: auto; display: block; }
.chart-mock .chart-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #cfcfcf;
  font-size: 0.72rem;
  padding-bottom: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.chart-mock .chart-topline .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display:inline-block; margin-right:6px; }

/* ---------- funding flow ---------- */
.funding-flow {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}
.flow-diagram svg { width: 100%; height: auto; display: block; }

/* ---------- values teaser strip ---------- */
/*==============================
 CORE VALUES
===============================*/

.core-values-section{

    padding:110px 0;
    background:#fff;

}

.core-heading{

    text-align:center;
    max-width:760px;
    margin:auto;
    margin-bottom:70px;

}

.core-heading span{

    color:#C92322;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

}

.core-heading h2{

    margin:18px 0;
    font-size:48px;
    color:#111;
    font-weight:700;

}

.core-heading p{

    color:#666;
    font-size:18px;
    line-height:1.8;

}

/* GRID */

.core-values-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;

}

/* CARD */

.core-card{

    display:flex;
    align-items:center;

    background:#fff;

    padding:35px;

    border-radius:18px;

    border:1px solid #ececec;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.core-card::before{

    content:'';

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:#C92322;

    transform:scaleY(0);

    transition:.4s;

}

.core-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    border-color:#fff;

}

.core-card:hover::before{

    transform:scaleY(1);

}

/* ICON */

.core-icon{

    width:80px;
    height:80px;

    border-radius:18px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:34px;

    flex-shrink:0;

    color:#fff;

    margin-right:25px;

}

.core-icon.red{

    background:#CDA83B;

}

.core-icon.gold{

    background:#CDA83B;

}

/* CONTENT */

.core-content h3{

    font-size:24px;

    margin-bottom:12px;

    color:#111;

}

.core-content p{

    color:#666;

    line-height:1.7;

    margin:0;

}

/* Hover */

.core-card:hover .core-icon{

    transform:rotate(10deg) scale(1.08);

    transition:.4s;

}

/* Responsive */

@media(max-width:991px){

.core-values-grid{

grid-template-columns:1fr;

}

.core-heading h2{

font-size:34px;

}

.core-card{

padding:25px;

}

.core-icon{

width:65px;
height:65px;
font-size:28px;

}

}
.core-card{
    opacity:0;
    transform:translateY(60px);
}

.core-card.show{
    animation:cardShow .8s forwards;
}

.core-card:nth-child(2).show{
    animation-delay:.2s;
}

.core-card:nth-child(3).show{
    animation-delay:.4s;
}

.core-card:nth-child(4).show{
    animation-delay:.6s;
}

@keyframes cardShow{

from{

opacity:0;
transform:translateY(60px);

}

to{

opacity:1;
transform:translateY(0);

}

}

@media (max-width: 900px) {
  .hero-split .wrap { grid-template-columns: 1fr; text-align: center; padding-top: 44px; }
  .hero-split .eyebrow,
  .hero-split .claim-rotator,
  .hero-split .hero-cta { justify-content: center; text-align: center; }
  .hero-split .claim-rotator li { justify-content: center; }
  .hero-visual { max-width: 380px; margin: 0 auto; order: -1; }
  .stats-bar .wrap { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .platform-preview,
  .funding-flow { grid-template-columns: 1fr; }
  .platform-preview .visual { order: -1; }
  
}
@media (max-width: 520px) {
  .stats-bar .wrap { grid-template-columns: 1fr 1fr; }
  .values-teaser .wrap { grid-template-columns: 1fr; }
}

/* ---------- CTA band ---------- */

/*==========================
 CTA SECTION
==========================*/
/* Moving dashed line */

.flow-line{

    stroke-dasharray:8 8;

    animation:flowMove 1s linear infinite;

}

/* Gold arrow */

.gold-arrow{

    animation:arrowPulse 1s ease infinite;

}

/* Red arrow */

.red-arrow{

    animation:arrowPulse 1s ease infinite .5s;

}

@keyframes flowMove{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-16;

    }

}

@keyframes arrowPulse{

    0%{

        opacity:.3;
        transform:translateX(0);

    }

    50%{

        opacity:1;
        transform:translateX(3px);

    }

    100%{

        opacity:.3;
        transform:translateX(0);

    }

}
/*==============================
FUNDING SECTION ANIMATION
===============================*/

/* Initial State */

.funding-flow .flow-diagram,
.funding-flow .copy{

    opacity:0;
    transition:1s ease;

}

.funding-flow .flow-diagram{

    transform:translateX(-100px);

}

.funding-flow .copy{

    transform:translateX(100px);

}

.funding-flow.active .flow-diagram{

    opacity:1;
    transform:translateX(0);

}

.funding-flow.active .copy{

    opacity:1;
    transform:translateX(0);

}


/*==============================
TEXT
===============================*/

.funding-flow .eyebrow,
.funding-flow h2,
.funding-flow p,
.funding-flow .btn{

    opacity:0;
    transform:translateY(40px);

}

.funding-flow.active .eyebrow{

    animation:fadeUp .6s forwards .3s;

}

.funding-flow.active h2{

    animation:fadeUp .7s forwards .5s;

}

.funding-flow.active p{

    animation:fadeUp .7s forwards .8s;

}

.funding-flow.active .btn{

    animation:fadeUp .7s forwards 1.1s;

}


/*==============================
WALLET
===============================*/

.flow-diagram rect:nth-of-type(1){

    animation:floatWallet 3s ease-in-out infinite;

}


/*==============================
ACCOUNT
===============================*/

.flow-diagram rect:nth-of-type(2){

    animation:pulseAccount 2s infinite;

}


/*==============================
TRADING SCREEN
===============================*/

.flow-diagram rect:nth-of-type(3){

    animation:floatChart 3s ease-in-out infinite;

}


/*==============================
MOVING DASH
===============================*/

.flow-line{

    stroke-dasharray:8 8;

    animation:flowMove .8s linear infinite;

}

@keyframes flowMove{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-16;

    }

}


/*==============================
ARROWS
===============================*/

.arrow-head{

    animation:arrowMove 1s infinite;

}

.red-arrow{

    animation-delay:.4s;

}

@keyframes arrowMove{

0%{

opacity:.3;

transform:translateX(0);

}

50%{

opacity:1;

transform:translateX(5px);

}

100%{

opacity:.3;

transform:translateX(0);

}

}


/*==============================
ACCOUNT ICON
===============================*/

.flow-diagram circle{

    animation:ringPulse 2s infinite;

}

@keyframes ringPulse{

0%{

transform-origin:center;

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}


/*==============================
FLOATING
===============================*/

@keyframes floatWallet{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes floatChart{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes pulseAccount{

0%{

filter:drop-shadow(0 0 0 rgba(201,35,34,.2));

}

50%{

filter:drop-shadow(0 0 15px rgba(201,35,34,.8));

}

100%{

filter:drop-shadow(0 0 0 rgba(201,35,34,.2));

}

}


/*==============================
TEXT
===============================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
.cta-band{
    background:#f4f4f3;
    padding:100px 0;
    text-align:center;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

.cta-band h2{
    font-size:48px;
    font-weight:700;
    color:#111;
    margin-bottom:20px;
    line-height:1.2;
}

.cta-band p{
    max-width:700px;
    margin:0 auto 40px;
    font-size:18px;
    color:#666;
    line-height:1.8;
}

.cta-band .hero-cta{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

/* Open Account Button */

.cta-band .btn-solid{
    background:#C92322;
    color:#fff;
    padding:16px 40px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
    text-decoration:none;
}

.cta-band .btn-solid:hover{
    background:#a61b1b;
    transform:translateY(-3px);
}

/* Login Button */

.cta-band .btn-ghost{
    background:transparent;
    color:#111;
    border:2px solid #111;
    padding:16px 40px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
    text-decoration:none;
}

.cta-band .btn-ghost:hover{
    background:#111;
    color:#fff;
}

/* Responsive */



@media (max-width:768px){

    .cta-band{
        padding:70px 20px;
    }

    .cta-band h2{
        font-size:32px;
    }

    .cta-band p{
        font-size:16px;
    }

    .cta-band .hero-cta{
        flex-direction:column;
    }

    .cta-band .btn-solid,
    .cta-band .btn-ghost{
        width:220px;
        text-align:center;
    }

}
/* ---------- partner contact card ---------- */
.contact-card {
  border: 1px solid var(--grey-line);
  border-radius: 8px;
  padding: 30px;
  background: var(--grey);
  margin-top: 20px;
}
.contact-card__email { margin: 0; }
.contact-card a.email {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid var(--red);
}

/* ---------- footer ---------- */
/*==========================
        FOOTER
===========================*/

.fx-footer{
    background:#0b0b0b;
    color:#fff;
    padding:70px 0 0;
    border-top:1px solid rgba(255,255,255,.08);
}

.fx-container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

.fx-footer-main{
    display:flex;
    justify-content:space-between;
    gap:80px;
    padding-bottom:50px;
}

/* LEFT */

.fx-company{
    flex:2;
}

.fx-company img{
   
    margin-bottom:18px;
}

.fx-company h3{
    font-size:34px;
    margin-bottom:20px;
    color:#fff;
}

.fx-company h5{
    font-size:20px;
    color:#d4af37;
    margin:25px 0 18px;
    position:relative;
}

.fx-company h5:after{
    content:"";
    width:60px;
    height:2px;
    background:#d4af37;
    display:block;
    margin-top:8px;
}

.fx-company p{
    color:#bfbfbf;
    line-height:1.9;
    font-size:15px;
    margin-bottom:18px;
}

/* RIGHT */

.fx-right{
    width:320px;
}

.fx-links h4,
.fx-social h4{
    color:#fff;
    margin-bottom:18px;
    font-size:22px;
}

.fx-links ul{
    margin:0;
    padding:0;
    list-style:none;
}

.fx-links li{
    margin-bottom:14px;
}

.fx-links a{
    color:#bdbdbd;
    text-decoration:none;
    transition:.3s;
}

.fx-links a:hover{
    color:#d4af37;
    padding-left:8px;
}

/* SOCIAL */

.fx-social{
    margin-top:40px;
}

.fx-icons{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

.fx-icons a{
    width:45px;
    height:45px;
    border-radius:50%;
    border:1px solid #333;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:17px;
    transition:.3s;
}

.fx-icons a:hover{
    background:#d42027;
    border-color:#d42027;
}

/* EMAIL */

.fx-email{
    color:#d4af37;
    text-decoration:none;
    display:block;
    margin-bottom:35px;
    font-size:15px;
}

.fx-email:hover{
    color:#fff;
}

/* BUTTONS */

.fx-right button{
    width:100%;
    height:52px;
    border-radius:40px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
    margin-bottom:15px;
}

/* Login */

.fx-right button:first-of-type{
    background:transparent;
    border:2px solid #d4af37;
    color:#d4af37;
}

.fx-right button:first-of-type:hover{
    background:#d4af37;
    color:#000;
}

/* Open Account */

.fx-right button:last-of-type{
    border:none;
    color:#fff;
    background:linear-gradient(90deg,#d51920,#ff3636);
    box-shadow:0 12px 25px rgba(213,25,32,.35);
}

.fx-right button:last-of-type:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(213,25,32,.45);
}

/* COPYRIGHT */

.fx-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    padding:22px 0;
    color:#999;
    font-size:14px;
}

/* Responsive */



@media(max-width:992px){

.fx-footer-main{
    flex-direction:column;
    gap:50px;
}

.fx-right{
    width:100%;
}

}

@media(max-width:576px){

.fx-company h3{
    font-size:28px;
}

.fx-company h5{
    font-size:18px;
}

.fx-links h4,
.fx-social h4{
    font-size:20px;
}

}
.fx-action-buttons{
    margin-top:25px;
}

.fx-login-btn,
.fx-open-btn{
    display:block;
    text-align:center;
    text-decoration:none;
    padding:15px;
    border-radius:40px;
    font-weight:600;
    margin-bottom:15px;
}

.fx-login-btn{
    border:2px solid #d4af37;
    color:#d4af37;
}

.fx-login-btn:hover{
    background:#d4af37;
    color:#000;
}

.fx-open-btn{
    color:#fff;
    background:linear-gradient(90deg,#d51920,#ff3333);
}

.fx-open-btn:hover{
    opacity:.9;
}
/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  nav.primary-nav { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; }
  header.site-header.nav-open nav.primary-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey-line);
    padding: 10px 24px 18px;
  }
  header.site-header.nav-open nav.primary-nav ul {
    flex-direction: column;
    gap: 4px;
  }
  .action-banner .banner-msg span.msg-text { display: none; }
 
}

@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
 
}

@media (prefers-reduced-motion: reduce) {
  .claim-rotator li { transition: none; }
  .action-banner { transition: none; }
  .reveal, .reveal-pop { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
   ============  MOBILE RESPONSIVE FIXES (ADDED — DESKTOP UNTOUCHED) =
   Everything below lives inside max-width media queries only, so
   nothing above this line (desktop / tablet-up view) is affected.
=================================================================== */

/* Prevent any accidental horizontal scroll on small screens */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ---- generic containers / spacing ---- */
@media (max-width: 768px) {
  .wrap { padding: 0 16px; }
  .fx-container { width: 94%; }
  .section { padding: 40px 0; }
  .tiles-section { padding: 44px 0; }
  .hero .wrap { padding: 44px 16px 36px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 14px; }
  .section { padding: 32px 0; }
}

/* ---- top utility / translate bar ---- */
@media (max-width: 480px) {
  .util-bar .wrap { justify-content: center; flex-wrap: wrap; padding: 6px 0; }
  #google_translate_element { transform: scale(0.8); transform-origin: center; }
}

/* ---- header / logo / nav toggle ---- */
@media (max-width: 760px) {
  .header-inner { padding: 10px 0; gap: 12px; }
  .brand img {
    width: 140px !important;
    transform: scale(1) !important;
  }
}
@media (max-width: 400px) {
  .brand img { width: 120px !important; }
}

/* ---- legacy top-bar / open-account button block ---- */
@media (max-width: 600px) {
  .topbar .container { flex-direction: column; gap: 8px; padding: 8px 0; text-align: center; }
  .top-right { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

/* ---- fixed action banner: keep full width + stackable on phones ---- */
@media (max-width: 760px) {
  .action-banner { width: 100%; }
  .action-banner .wrap { flex-direction: column; gap: 10px; padding: 10px 16px; text-align: center; }
  .action-banner .banner-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
  .action-banner .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 480px) {
  .action-banner .banner-msg { font-size: 0.82rem; }
}

/* ---- legacy banner-left/banner-right block used on some pages ---- */
@media (max-width: 600px) {
  .banner-left { text-align: center; }
  .btn-login, .btn-account { width: 100%; text-align: center; box-sizing: border-box; }
  .banner-right { flex-direction: column; width: 100%; }
}

/* ---- hero claim rotator sizing on very small phones ---- */
@media (max-width: 480px) {
  .claim-rotator { height: 4.6em; }
  .hero-cta .btn, .hero-cta a { width: 100%; }
  .hero-cta { flex-direction: column; }
}

/* ---- hero-split illustration never overflows ---- */
@media (max-width: 600px) {
  .hero-visual { max-width: 280px; }
}

/* ---- tiles / values / steps: already 1-col from 900px down, tighten padding ---- */
@media (max-width: 600px) {
  .tile { padding: 24px 20px; }
  .step { padding: 22px 18px; }
  .value-card { padding: 18px 14px; }
}

/* ---- stats bar: single column on very narrow phones ---- */
@media (max-width: 400px) {
  .stats-bar .wrap { grid-template-columns: 1fr; }
}

/* ---- platform preview / funding flow: reduce gap + center on mobile ---- */
@media (max-width: 760px) {
  .platform-preview, .funding-flow { gap: 28px; }
  .chart-mock { padding: 14px; }
}

/* ---- core values section ---- */
@media (max-width: 600px) {
  .core-values-section { padding: 60px 0; }
  .core-heading { margin-bottom: 40px; }
  .core-heading h2 { font-size: 28px; }
  .core-heading p { font-size: 15px; }
  .core-card { flex-direction: column; text-align: center; padding: 22px; }
  .core-icon { margin: 0 0 16px; }
}

/* ---- CTA band ---- */
@media (max-width: 480px) {
  .cta-band { padding: 50px 16px; }
  .cta-band h2 { font-size: 26px; }
  .cta-band .btn-solid, .cta-band .btn-ghost { width: 100%; max-width: 280px; }
}

/* ---- footer tightened for phones ---- */
@media (max-width: 600px) {
  .fx-footer { padding: 50px 0 0; }
  .fx-footer-main { gap: 36px; padding-bottom: 34px; }
  .fx-company h3 { font-size: 24px; }
  .fx-right { width: 100%; }
}

/* ---- contact card ---- */
@media (max-width: 480px) {
  .contact-card { padding: 20px; }
}

/* ---- nav toggle visibility already handled at 760px; ensure logo row wraps cleanly ---- */
@media (max-width: 340px) {
  .header-inner { flex-wrap: wrap; }
}

/* ===================================================================
   ========  HEADER / TOP-BAR OVERFLOW FIX (ADDITIONAL, MOBILE ONLY) =
   Root cause: the black top rows (topbar/top-right and the legacy
   action-banner banner-left/banner-right markup with pill buttons)
   were laid out in a single flex row with no wrap, so on narrow
   screens the "Open Account" pill ran past the viewport edge and
   dragged the whole page into horizontal scroll. Fixed below by
   forcing these rows to wrap / stack on small screens. Desktop
   (anything above these max-widths) is completely unaffected.
=================================================================== */

/* Absolute safety net: nothing is ever allowed wider than the screen */
@media (max-width: 900px) {
  html, body { width: 100%; overflow-x: hidden; }
  .topbar, .action-banner, header.site-header, .util-bar {
    width: 100%;
    max-width: 100%;
  }
}

/* ---- legacy .topbar (Select Language / Login / Open Account row) ---- */
@media (max-width: 600px) {
  .topbar { height: auto; padding: 8px 0; }
  .topbar .container {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .top-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .top-right a { font-size: 13px; }
  .open-btn { padding: 7px 16px; font-size: 13px; }
  #google_translate_element { transform: scale(0.8); transform-origin: center; }
}

/* ---- legacy .action-banner (logo + Login pill + Open Account pill) ---- */
@media (max-width: 600px) {
  .action-banner .container {
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    text-align: center;
    width: 100%;
  }
  .banner-left { flex-direction: column; gap: 6px; }
  .banner-right {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  .banner-right a,
  .btn-login,
  .btn-account {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ---- util bar (language selector row used on some pages) ---- */
@media (max-width: 480px) {
  .util-bar .wrap { flex-wrap: wrap; justify-content: center; padding: 8px 0; }
}

/* ---- final catch-all: no flex row in the header area may refuse to wrap ---- */
@media (max-width: 600px) {
  .topbar .container,
  .top-right,
  .action-banner .container,
  .banner-left,
  .banner-right {
    flex-wrap: wrap;
  }
}