/* ============================================================
   BRAXTRADE · Design System
   CFD & Forex · Tema Mundial · Premium / Institucional
   Cores derivadas do logotipo (verde-bosque + dourado champanhe)
   ============================================================ */

:root{
  /* Marca — azul-marinho profundo (nomes legados --green-* remapeados p/ navy) */
  --green-950:#04070F;
  --green-900:#070C1C;   /* fundo escuro principal */
  --green-850:#0A1228;
  --green-800:#0C1838;   /* superfície primária / navy de marca */
  --green-700:#142a5e;
  --green-600:#21407F;
  --green-500:#2E6FE0;

  /* Azul elétrico (luz de estádio) */
  --blue:#2E7BFF;
  --blue-bright:#5B9CFF;
  --blue-soft:rgba(46,123,255,.14);

  /* Marca — dourado champanhe (combina com as imagens) */
  --gold-700:#A07E36;
  --gold-600:#BC9442;
  --gold:#CBA34E;        /* dourado principal */
  --gold-400:#DCBA68;
  --gold-300:#ECD693;

  /* Neutros */
  --ink:#10140F;
  --charcoal:#1A1F1A;
  --cream:#F6F3EB;
  --cream-2:#EFEBDF;
  --paper:#FFFFFF;
  --line:rgba(14,51,34,.12);
  --line-dark:rgba(214,200,160,.16);

  /* Mercado */
  --up:#2BB673;
  --up-soft:rgba(43,182,115,.14);
  --down:#E5544B;
  --down-soft:rgba(229,84,75,.14);

  /* Texto */
  --t-strong:#10140F;
  --t-body:#3A4138;
  --t-muted:#6B7268;
  --t-on-dark:#EDE9DC;
  --t-on-dark-mut:rgba(237,233,220,.62);

  /* Tipografia */
  --f-display:"Sora", system-ui, sans-serif;
  --f-body:"Manrope", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --maxw:1280px;
  --gut:clamp(20px,4vw,56px);
  --radius:14px;
  --radius-lg:22px;
  --header-h:74px;
  --ticker-h:40px;

  /* Sombra */
  --sh-sm:0 1px 2px rgba(10,36,25,.06), 0 2px 8px rgba(10,36,25,.05);
  --sh-md:0 8px 30px rgba(10,36,25,.10), 0 2px 8px rgba(10,36,25,.06);
  --sh-lg:0 30px 70px rgba(7,26,18,.22), 0 10px 28px rgba(7,26,18,.14);
  --sh-gold:0 18px 50px rgba(160,124,60,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--t-body);
  background:var(--cream);
  font-size:17px;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
::selection{background:var(--gold); color:var(--green-900)}

h1,h2,h3,h4{font-family:var(--f-display); color:var(--t-strong); line-height:1.05; margin:0; letter-spacing:-.02em; font-weight:700}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem); font-weight:800; letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; letter-spacing:-.03em}
h3{font-size:clamp(1.3rem,2.4vw,1.85rem); font-weight:700}
p{margin:0}

.mono{font-family:var(--f-mono); font-feature-settings:"tnum" 1; letter-spacing:-.01em}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-700); font-weight:500; display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); display:inline-block}
.eyebrow.on-dark{color:var(--gold-400)}

/* ---------- Botões ---------- */
.btn{
  --bg:var(--green-800); --fg:var(--cream);
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  font-family:var(--f-body); font-weight:700; font-size:.97rem; letter-spacing:.01em;
  padding:.92em 1.5em; border-radius:11px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.05em; height:1.05em}
.btn-gold{
  --bg:linear-gradient(180deg,var(--gold-400),var(--gold)); --fg:var(--green-900);
  box-shadow:var(--sh-gold); font-weight:800;
}
.btn-gold:hover{box-shadow:0 24px 60px rgba(160,124,60,.42)}
.btn-gold::after{
  content:""; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
}
.btn-gold:hover::after{animation:sheen 1s var(--ease)}
@keyframes sheen{to{transform:translateX(130%)}}
.btn-ghost{--bg:transparent; --fg:var(--cream); border-color:rgba(237,233,220,.32)}
.btn-ghost:hover{background:rgba(237,233,220,.08)}
.btn-outline{--bg:transparent; --fg:var(--green-800); border-color:var(--green-800)}
.btn-outline:hover{background:var(--green-800); color:var(--cream)}
.btn-lg{padding:1.08em 1.9em; font-size:1.04rem}
.btn-sm{padding:.62em 1.05em; font-size:.86rem}

/* ---------- Pills / tags ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  padding:.42em .85em; border-radius:100px; border:1px solid var(--line);
  background:rgba(255,255,255,.6); color:var(--t-muted);
}
.pill.on-dark{border-color:var(--line-dark); background:rgba(255,255,255,.05); color:var(--t-on-dark-mut)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 var(--up); animation:livepulse 2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(43,182,115,.5)}70%{box-shadow:0 0 0 7px rgba(43,182,115,0)}100%{box-shadow:0 0 0 0 rgba(43,182,115,0)}}

.up{color:var(--up)}
.down{color:var(--down)}

/* ---------- Seções ---------- */
.section{padding-block:clamp(64px,9vw,128px)}
.section-dark{background:var(--green-900); color:var(--t-on-dark)}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--cream)}
.section-cream{background:var(--cream)}
.section-paper{background:var(--paper)}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--t-muted); line-height:1.62; max-width:62ch}
.section-dark .lead{color:var(--t-on-dark-mut)}
.section-head{max-width:780px; margin-bottom:clamp(40px,5vw,68px)}
.section-head .eyebrow{margin-bottom:20px}

/* ---------- Cards ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:rgba(199,163,107,.5)}
.card-dark{background:linear-gradient(165deg,var(--green-850),var(--green-900)); border-color:var(--line-dark); color:var(--t-on-dark)}
.card-dark:hover{border-color:rgba(199,163,107,.55)}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important; transform:none!important}
  *{scroll-behavior:auto!important}
}

/* utilidades */
.grid{display:grid; gap:24px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.muted{color:var(--t-muted)}
.gold-text{color:var(--gold-700)}
.divider{height:1px; background:var(--line); border:0}
@media(max-width:1000px){.cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}