/* ═══════════════════════════════════════════════════════════════
   VANTARA Q — Design System
   Palette:  #060606 void / #0d0d0f card / #161616 card-raised
             #FFD700 gold-bright / #FFA500 gold-amber / #B8860B gold-deep / #FFEC8B gold-pale
             #0ecb81 success / #f6465d danger / #8a8a8f muted text
   Type:     Cinzel (display, regal/luxury serif) + Inter (body) + JetBrains Mono (data/numbers)
   Signature: hexagon candlestick mark + gold-particle motion, used deliberately not everywhere
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --void:#060606;
  --card:#0d0d0f;
  --card2:#161616;
  --border:rgba(255,215,0,0.14);
  --border-strong:rgba(255,215,0,0.4);
  --gold:#FFD700;
  --gold-amber:#FFA500;
  --gold-deep:#B8860B;
  --gold-pale:#FFEC8B;
  --text:#f2f0e8;
  --text-dim:#9a968a;
  --text-mute:#605c52;
  --success:#0ecb81;
  --danger:#f6465d;
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --font-display:'Cinzel',serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 800px 500px at 15% -5%, rgba(255,215,0,0.06), transparent),
    radial-gradient(ellipse 600px 400px at 90% 15%, rgba(255,165,0,0.04), transparent);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
::selection{background:rgba(255,215,0,0.25);color:#fff;}

/* ── Gold shimmer text (signature, used sparingly — headings & key numbers only) ── */
.gold-shimmer{
  background:linear-gradient(100deg,#FFD700 0%,#FFF6D6 18%,#FFA500 36%,#FFD700 54%,#B8860B 72%,#FFEC8B 88%,#FFD700 100%);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 4.5s linear infinite;
}
@keyframes shimmer{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}

/* ── Layout ── */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
section{position:relative;}

/* ── Nav ── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  background:rgba(6,6,6,0.72);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:0.5px;}
.nav-logo svg{width:32px;height:32px;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{font-size:14px;color:var(--text-dim);font-weight:500;transition:color .25s;position:relative;}
.nav-links a:hover{color:var(--gold);}
.nav-links a.active{color:var(--gold);}
.nav-cta{
  padding:10px 22px;border-radius:999px;
  background:linear-gradient(100deg,var(--gold),var(--gold-amber));
  color:#0a0a0a;font-weight:700;font-size:13.5px;letter-spacing:0.2px;
  box-shadow:0 4px 20px rgba(255,180,0,0.25);
  transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 26px rgba(255,180,0,0.4);}
.nav-burger{display:none;width:22px;height:16px;position:relative;cursor:pointer;}
.nav-burger span{position:absolute;left:0;width:100%;height:2px;background:var(--gold);border-radius:2px;}
.nav-burger span:nth-child(1){top:0;} .nav-burger span:nth-child(2){top:7px;} .nav-burger span:nth-child(3){top:14px;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 34px;border:none;border-radius:999px;
  font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:0.2px;
  cursor:pointer;transition:transform .2s, box-shadow .2s;
}
.btn-gold{
  background:linear-gradient(100deg,var(--gold-pale),var(--gold),var(--gold-amber));
  color:#0a0a0a;box-shadow:0 6px 28px rgba(255,180,0,0.28);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(255,180,0,0.42);}
.btn-outline{
  background:transparent;border:1.5px solid var(--border-strong);color:var(--gold-pale);
}
.btn-outline:hover{background:rgba(255,215,0,0.08);border-color:var(--gold);}

/* ── Cards ── */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:28px;transition:border-color .25s, transform .25s;
}
.card:hover{border-color:var(--border-strong);}

/* ── Hexagon icon frame (signature shape, reused as icon container everywhere) ── */
.hex-frame{
  width:56px;height:56px;position:relative;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hex-frame svg{position:absolute;inset:0;width:100%;height:100%;}
.hex-frame .hex-inner{position:relative;z-index:2;font-size:20px;}

/* ── Section labels (eyebrow) ── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold-amber);margin-bottom:18px;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--gold-amber);}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:0.2px;}
h2{font-size:clamp(28px,4vw,42px);}
h3{font-size:20px;}
p{color:var(--text-dim);}
.mono{font-family:var(--font-mono);}

/* ── Footer ── */
.site-footer{border-top:1px solid var(--border);padding:60px 0 30px;margin-top:100px;}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.site-footer h4{font-family:var(--font-body);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-amber);margin-bottom:16px;}
.site-footer a{display:block;font-size:14px;color:var(--text-dim);margin-bottom:10px;transition:color .2s;}
.site-footer a:hover{color:var(--gold);}
.footer-bottom{max-width:1180px;margin:40px auto 0;padding:24px 24px 0;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

/* ── Coin (used in rain animation + inline accents) ── */
.gold-coin{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFF6D6, #FFD700 40%, #B8860B 85%);
  box-shadow:0 0 12px rgba(255,215,0,0.5), inset 0 0 8px rgba(0,0,0,0.25);
}

/* ── Hide TradingView attribution on Lightweight Charts ── */
.tv-lightweight-charts a[href*="tradingview"]{display:none!important;}
#heroLiveChart table td:last-child{display:none!important;}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-burger{display:block;}
  .site-footer .wrap{grid-template-columns:1fr 1fr;}
}

/* ── Live ticker strip (sticky, sits right below the fixed nav) ── */
.ticker-strip{
  position:fixed;top:72px;left:0;right:0;z-index:400;
  overflow:hidden;border-bottom:1px solid var(--border);
  background:var(--card);padding:12px 0;
}
body.has-ticker{padding-top:112px;} /* nav (72px) + ticker (~40px) */
body:not(.has-ticker){padding-top:0;}
.ticker-track{display:flex;gap:44px;width:max-content;animation:tickerScroll 32s linear infinite;}
.ticker-strip:hover .ticker-track{animation-play-state:paused;}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.ticker-item{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13.5px;white-space:nowrap;}
.ticker-item .sym{color:var(--text);font-weight:600;}
.ticker-item .up{color:var(--success);}
.ticker-item .down{color:var(--danger);}

/* ── Testimonials ── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
.testi-card{padding:26px;}
.testi-stars{color:var(--gold);font-size:14px;margin-bottom:14px;letter-spacing:2px;}
.testi-quote{font-size:14px;color:var(--text-dim);margin-bottom:18px;font-style:italic;}
.testi-author{display:flex;align-items:center;gap:10px;}
.testi-avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:#0a0a0a;font-size:14px;
}
.testi-name{font-size:13.5px;font-weight:600;}
.testi-loc{font-size:11.5px;color:var(--text-mute);}

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