/* ============================================================
   TROY TRADE — design tokens
   Palette: deep navy ledger + warm paper + antique gold foil
   Type: Fraunces (display serif) / IBM Plex Sans (body) / IBM Plex Mono (data)
   Signature: engraved medallion tier badges + ledger tick-rule dividers
   ============================================================ */

:root{
  --navy-900:#0e1a38;
  --navy-800:#16244f;
  --navy-700:#1d2f63;
  --paper:#f6f3ea;
  --paper-2:#efe9db;
  --ink:#1b2130;
  --muted:#6a6e7c;
  --muted-on-navy:#aab0c8;
  --gold:#b08a2e;
  --gold-bright:#d6ad4d;
  --line-warm:#dcd4bf;
  --line-navy:#2a3868;
  --ok:#3c6e4f;

  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:2px;
  --container:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--navy-900);
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:560;line-height:1.03;}
h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;}
h3{font-size:1.28rem;}
p{margin:0 0 1em;color:var(--ink);}
.lede{font-size:1.15rem;color:var(--muted);max-width:640px;}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);display:inline-block;}

.nums{font-family:var(--mono);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;
  font-family:var(--sans);font-weight:600;font-size:.94rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--gold);color:var(--navy-900);}
.btn-primary:hover{background:var(--gold-bright);}
.btn-ghost{border-color:var(--line-navy);color:var(--paper);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);}
.btn-outline{border-color:var(--navy-900);color:var(--navy-900);}
.btn-outline:hover{background:var(--navy-900);color:var(--paper);}
.btn[disabled], .btn.disabled{opacity:.5;cursor:not-allowed;}
@media (prefers-reduced-motion:no-preference){ .btn:hover{transform:translateY(-1px);} }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--navy-900);
  border-bottom:1px solid var(--line-navy);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--serif);color:var(--paper);
  font-size:1.2rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;
}
.brand .mark{
  width:30px;height:30px;border-radius:50%;
  background:conic-gradient(from 220deg, var(--gold) 0deg, #7c611c 90deg, var(--gold-bright) 180deg, #7c611c 270deg, var(--gold) 360deg);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.brand .mark svg{width:16px;height:16px;}

.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center;}
.nav-links a{
  color:var(--muted-on-navy);
  text-decoration:none;
  font-size:.88rem;font-weight:500;
  padding:10px 14px;border-radius:var(--radius);
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--paper);}
.nav-links a.active{color:var(--gold-bright);}
.nav-cta{margin-left:8px;}
.nav-toggle{display:none;background:none;border:0;color:var(--paper);font-size:1.6rem;cursor:pointer;}

@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute;top:74px;left:0;right:0;
    background:var(--navy-900);
    flex-direction:column;align-items:stretch;
    border-bottom:1px solid var(--line-navy);
    display:none;padding:8px 20px 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 6px;border-bottom:1px solid var(--line-navy);}
  .nav-cta{margin-left:0;margin-top:10px;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--navy-900);
  color:var(--paper);
  padding:96px 0 84px;
  position:relative;
  overflow:hidden;
}
.hero .container{position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;}
.hero h1{color:var(--paper);}
.hero .lede{color:var(--muted-on-navy);}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

/* ticker line signature element */
.ticker-line{
  position:relative;height:1px;background:var(--line-navy);
  margin:40px 0 0;
}
.ticker-line::before{
  content:"";position:absolute;top:-3px;left:0;
  width:7px;height:7px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 0 4px rgba(214,173,77,.15);
  animation:ticker-move 9s linear infinite;
}
@keyframes ticker-move{
  0%{left:0%;}
  50%{left:97%;}
  100%{left:0%;}
}
@media (prefers-reduced-motion:reduce){ .ticker-line::before{animation:none;left:30%;} }

.hero-stats{display:flex;gap:34px;margin-top:12px;flex-wrap:wrap;}
.hero-stats div{border-left:1px solid var(--line-navy);padding-left:14px;}
.hero-stats .num{font-family:var(--mono);font-size:1.5rem;color:var(--gold-bright);display:block;}
.hero-stats .label{font-size:.78rem;color:var(--muted-on-navy);}

.hero-panel{
  background:var(--navy-700);
  border:1px solid var(--line-navy);
  padding:26px;
}
.hero-panel .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line-navy);font-size:.9rem;}
.hero-panel .row:last-child{border-bottom:none;}
.hero-panel .row span:first-child{color:var(--muted-on-navy);}
.hero-panel .row span:last-child{font-family:var(--mono);color:var(--paper);}

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

/* ============================================================
   SECTION SHELLS
   ============================================================ */
section{padding:80px 0;}
.section-navy{background:var(--navy-900);color:var(--paper);}
.section-navy h2, .section-navy h3{color:var(--paper);}
.section-navy p{color:var(--muted-on-navy);}
.section-alt{background:var(--paper-2);}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

.divider{border:none;border-top:1px solid var(--line-warm);margin:0;}
.divider.on-navy{border-top-color:var(--line-navy);}

/* tick-rule divider — signature motif */
.tick-rule{
  display:flex;align-items:center;gap:6px;margin:0 0 46px;
}
.tick-rule::before, .tick-rule::after{content:"";flex:1;height:1px;background:var(--line-warm);}
.tick-rule span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
}

/* ============================================================
   FEATURE GRID (Why Troy Trade)
   ============================================================ */
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-warm);
  border:1px solid var(--line-warm);
}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){ .feature-grid.cols-4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .feature-grid.cols-4{grid-template-columns:1fr;} }
.feature{background:var(--paper);padding:32px 28px;}
.feature .num{font-family:var(--mono);color:var(--gold);font-size:.78rem;letter-spacing:.1em;}
.feature h3{margin-top:10px;margin-bottom:8px;font-size:1.1rem;}
.feature p{color:var(--muted);font-size:.94rem;margin:0;}
@media (max-width:860px){ .feature-grid{grid-template-columns:1fr;} }

/* ============================================================
   TIER MEDALLIONS + CARDS  (Investment Plans)
   ============================================================ */
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.tier-grid > *{min-width:0;}
.tier-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1000px){ .tier-grid.cols-3{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tier-grid.cols-3{grid-template-columns:1fr;} }
@media (max-width:1000px){ .tier-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .tier-grid{grid-template-columns:1fr;} }

.tier-card{
  background:var(--navy-900);
  color:var(--paper);
  border:1px solid var(--line-navy);
  padding:30px 24px;
  display:flex;flex-direction:column;
  position:relative;
}
.tier-card.featured{border-color:var(--gold);}
.tier-card.featured::before{
  content:"DIAMOND CLUB";
  position:absolute;top:-11px;left:24px;
  background:var(--gold);color:var(--navy-900);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  padding:3px 9px;
}

.medallion{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--navy-900);
  position:relative;
}
.medallion::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:1px solid rgba(14,20,40,.25);
}
.medallion.bronze{background:radial-gradient(circle at 32% 28%, #d9a56b, #8a5a30 72%);}
.medallion.silver{background:radial-gradient(circle at 32% 28%, #e7e9ee, #9aa1ae 72%);}
.medallion.gold{background:radial-gradient(circle at 32% 28%, #f0d488, #a9822c 72%);}
.medallion.diamond{background:radial-gradient(circle at 32% 28%, #cfe9f7, #4f83a8 72%);}

.tier-card h3{color:var(--paper);font-size:1.3rem;margin-bottom:2px;}
.tier-sub{font-size:.8rem;color:var(--muted-on-navy);margin-bottom:18px;}
.tier-amount{font-family:var(--mono);font-size:1.5rem;color:var(--gold-bright);margin-bottom:2px;}
.tier-amount-label{font-size:.72rem;color:var(--muted-on-navy);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;}

.tier-target{background:var(--navy-700);border:1px solid var(--line-navy);padding:12px 14px;margin-bottom:20px;}
.tier-target .k{font-size:.7rem;color:var(--muted-on-navy);letter-spacing:.08em;text-transform:uppercase;}
.tier-target .v{font-family:var(--mono);color:var(--gold-bright);font-size:1.1rem;}

.tier-features{list-style:none;margin:0 0 24px;padding:0;flex:1;}
.tier-features li{
  font-size:.88rem;color:var(--muted-on-navy);
  padding:8px 0;border-top:1px dashed var(--line-navy);
  display:flex;gap:8px;
}
.tier-features li:first-child{border-top:none;}
.tier-features li::before{content:"✓";color:var(--gold-bright);font-weight:700;}

.tier-card .btn{width:100%;justify-content:center;}

.footnote{font-size:.82rem;color:var(--muted);margin-top:26px;max-width:760px;}
.footnote.on-navy{color:var(--muted-on-navy);}

/* ---------- compare table ---------- */
.compare-wrap{overflow-x:auto;border:1px solid var(--line-warm);}
table.compare{width:100%;border-collapse:collapse;min-width:640px;background:var(--paper);}
table.compare th, table.compare td{
  padding:14px 18px;text-align:center;border-bottom:1px solid var(--line-warm);font-size:.92rem;
}
table.compare th{background:var(--navy-900);color:var(--paper);font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.03em;}
table.compare td:first-child, table.compare th:first-child{text-align:left;font-weight:600;color:var(--navy-900);}
table.compare tr:last-child td{border-bottom:none;}
.yes{color:var(--ok);font-weight:700;}
.no{color:#b9b2a0;}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:0;counter-reset:step;position:relative;}
.timeline.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:760px){ .timeline.cols-4{grid-template-columns:1fr 1fr;} .timeline.cols-4::before{display:none;} }
@media (max-width:460px){ .timeline.cols-4{grid-template-columns:1fr;} }
.timeline::before{
  content:"";position:absolute;top:22px;left:0;right:0;height:1px;background:var(--line-navy);
}
.tstep{position:relative;padding:0 14px;text-align:left;}
.tstep .dot{
  width:44px;height:44px;border-radius:50%;
  background:var(--navy-700);border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);color:var(--gold-bright);font-size:.9rem;
  margin-bottom:16px;position:relative;z-index:1;
}
.tstep h3{font-size:.98rem;color:var(--paper);margin-bottom:6px;}
.tstep p{font-size:.82rem;color:var(--muted-on-navy);margin:0;}
@media (max-width:1000px){
  .timeline{grid-template-columns:1fr 1fr;gap:36px 20px;}
  .timeline::before{display:none;}
}
@media (max-width:560px){ .timeline{grid-template-columns:1fr;} }

.timeline.on-light .tstep h3{color:var(--navy-900);}
.timeline.on-light .tstep p{color:var(--muted);}
.timeline.on-light .dot{background:var(--navy-900);border-color:var(--gold);}
.timeline.on-light::before{background:var(--line-warm);}

/* ---------- strategy tracks ---------- */
.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:800px){ .track-grid{grid-template-columns:1fr;} }
.track-card{border:1px solid var(--line-warm);background:var(--paper);padding:32px;}
.track-card .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;}
.track-card h3{margin-top:8px;}
.track-card .basis{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-warm);font-size:.86rem;color:var(--muted);}

/* ============================================================
   RISK / CALLOUTS
   ============================================================ */
.callout{
  border-left:3px solid var(--gold);
  background:var(--paper-2);
  padding:20px 24px;
  margin:0 0 20px;
}
.callout p{margin:0;color:var(--ink);font-size:.95rem;}
.callout.warn{border-left-color:#9a6b1f;background:#f4ead0;}

.risk-list{list-style:none;margin:0;padding:0;}
.risk-list li{
  display:flex;gap:16px;
  padding:20px 0;border-top:1px solid var(--line-warm);
}
.risk-list li:first-child{border-top:none;}
.risk-list .idx{font-family:var(--mono);color:var(--gold);font-size:.85rem;padding-top:2px;flex-shrink:0;width:24px;}
.risk-list p{margin:0;color:var(--ink);}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item{border-bottom:1px solid var(--line-warm);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;
  padding:22px 4px;font-family:var(--serif);font-size:1.08rem;color:var(--navy-900);
  display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;
}
.faq-q .plus{font-family:var(--mono);color:var(--gold);font-size:1.2rem;transition:transform .2s ease;flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 4px 22px;color:var(--muted);max-width:760px;}

/* ============================================================
   DOWNLOAD CARDS
   ============================================================ */
.download-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:760px){ .download-grid{grid-template-columns:1fr;} }
.dl-card{
  border:1px solid var(--line-warm);background:var(--paper);
  padding:26px;display:flex;gap:18px;align-items:flex-start;
}
.dl-icon{
  width:44px;height:56px;flex-shrink:0;
  background:var(--navy-900);position:relative;
  clip-path:polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}
.dl-icon::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 0 13px 13px;border-color:transparent transparent var(--gold) transparent;}
.dl-meta{flex:1;}
.dl-meta h3{font-size:1.02rem;margin-bottom:4px;}
.dl-meta p{font-size:.86rem;color:var(--muted);margin:0 0 14px;}
.dl-meta .btn{padding:9px 18px;font-size:.85rem;}
.dl-note{font-size:.82rem;color:var(--muted);}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.contact-grid > div{min-width:0;}
.field select{min-width:0;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.field{margin-bottom:18px;}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px;letter-spacing:.02em;}
.field input, .field select, .field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-warm);background:var(--paper);
  font-family:var(--sans);font-size:.95rem;color:var(--ink);border-radius:var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}
.contact-card{background:var(--navy-900);color:var(--paper);padding:32px;}
.contact-card .row{display:flex;gap:14px;padding:16px 0;border-top:1px dashed var(--line-navy);}
.contact-card .row:first-of-type{border-top:none;}
.contact-card .k{font-size:.72rem;color:var(--muted-on-navy);text-transform:uppercase;letter-spacing:.08em;width:110px;flex-shrink:0;padding-top:2px;}
.contact-card .v{font-family:var(--mono);font-size:.92rem;min-width:0;flex:1;word-break:break-word;}

/* ============================================================
   STATS STRIP (self-trading page)
   ============================================================ */
.stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--navy-700);border-top:1px solid var(--line-navy);border-bottom:1px solid var(--line-navy);
}
.stats-strip .stat{text-align:center;padding:26px 12px;border-right:1px solid var(--line-navy);}
.stats-strip .stat:last-child{border-right:none;}
.stats-strip .stat .num{font-family:var(--mono);font-size:1.7rem;color:var(--gold-bright);display:block;}
.stats-strip .stat .label{font-size:.76rem;color:var(--muted-on-navy);margin-top:4px;}
@media (max-width:700px){ .stats-strip{grid-template-columns:1fr 1fr;} .stats-strip .stat:nth-child(2){border-right:none;} }

/* market cards (assets you can trade) */
.market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:1000px){ .market-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .market-grid{grid-template-columns:1fr;} }
.market-card{background:var(--navy-700);border:1px solid var(--line-navy);padding:26px 22px;}
.market-card .m-icon{font-size:1.6rem;display:block;margin-bottom:14px;}
.market-card h3{color:var(--paper);font-size:1.1rem;margin-bottom:6px;}
.market-card p{color:var(--muted-on-navy);font-size:.86rem;margin-bottom:16px;}
.asset-pills{display:flex;flex-wrap:wrap;gap:6px;}
.asset-pill{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:var(--gold-bright);
  border:1px solid var(--line-navy);background:rgba(176,138,46,.08);
  padding:3px 8px;
}

/* live ticker rows (reuses hero-panel look) */
.ticker-row .change.up{color:#4c8f6b;}
.ticker-row .change.dn{color:#c05a5a;}

/* CFD risk callout band */
.risk-band{background:#1b1710;border-top:1px solid #3a2f1c;border-bottom:1px solid #3a2f1c;padding:26px 0;}
.risk-band p{color:#d8c79a;font-size:.84rem;margin:0;line-height:1.7;}
.risk-band strong{color:var(--gold-bright);}

.site-footer{background:var(--navy-900);color:var(--muted-on-navy);padding:56px 0 30px;border-top:1px solid var(--line-navy);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer-grid h4{color:var(--paper);font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{color:var(--muted-on-navy);text-decoration:none;font-size:.9rem;}
.footer-grid a:hover{color:var(--gold-bright);}
.footer-legal{
  border-top:1px solid var(--line-navy);padding-top:24px;
  font-size:.78rem;color:var(--muted-on-navy);line-height:1.7;
}
.footer-legal strong{color:var(--paper);}

/* ============================================================
   PAGE HERO (secondary pages)
   ============================================================ */
.page-hero{background:var(--navy-900);color:var(--paper);padding:64px 0 56px;}
.page-hero h1{color:var(--paper);font-size:clamp(2rem,4vw,2.8rem);}
.page-hero .lede{color:var(--muted-on-navy);}
.breadcrumb{font-family:var(--mono);font-size:.72rem;color:var(--muted-on-navy);letter-spacing:.06em;margin-bottom:16px;text-transform:uppercase;}
.breadcrumb a{color:var(--muted-on-navy);text-decoration:none;}
.breadcrumb a:hover{color:var(--gold-bright);}

/* CTA band */
.cta-band{background:var(--navy-700);border-top:1px solid var(--line-navy);border-bottom:1px solid var(--line-navy);padding:64px 0;text-align:center;}
.cta-band h2{color:var(--paper);}
.cta-band p{color:var(--muted-on-navy);max-width:520px;margin-left:auto;margin-right:auto;}
.cta-actions{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap;}