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

:root{
  --ink:#10141C; --panel:#171D29; --panel2:#1D2433; --border:#262E3D;
  --bone:#EDE8DD; --muted:#8B93A6;
  --orig:#4FA8C9; --kadu:#D68A3E;
  --profit:#7FB88F; --loss:#C1554A;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--bone);
  font-family:'Inter',-apple-system,sans-serif; font-size:15px; line-height:1.55;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-0.01em}
a{color:inherit; text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.muted{color:var(--muted)} .small{font-size:12.5px}
.up{color:var(--profit)} .down{color:var(--loss)}

/* ---- header/footer ---- */
.site-header{
  border-bottom:1px solid var(--border); padding:18px 0; position:sticky; top:0;
  background:var(--panel2);
  z-index:10;
}
.header-inner{display:flex; justify-content:space-between; align-items:center}
.header-actions{display:flex; align-items:center; gap:16px}
.brand{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px}
.admin-link{color:var(--orig); font-size:13.5px}
.site-footer{border-top:1px solid var(--border); margin-top:64px; padding:24px 0; color:var(--muted); font-size:12.5px; text-align:center}

/* ---- hero ---- */
.hero{padding:56px 0 32px; max-width:760px}
.eyebrow{color:var(--kadu); text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; font-weight:600; margin:0 0 10px}
.hero h1{font-size:36px; font-weight:600; line-height:1.15; margin-bottom:14px}
.hero-sub{color:var(--muted); font-size:15.5px; max-width:640px}

/* ---- filter bar ---- */
.filter-bar{display:flex; gap:20px; flex-wrap:wrap; padding:16px 0 28px; border-bottom:1px solid var(--border); margin-bottom:28px}
.filter-bar label{font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:6px}
.filter-bar select{
  background:var(--panel2); border:1px solid var(--border); color:var(--bone);
  padding:8px 10px; border-radius:6px; font:inherit; min-width:170px;
}

/* ---- dashboard cards ---- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; padding-bottom:60px}
.strat-card{
  display:block; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; transition:border-color .15s, transform .15s;
}
.strat-card:hover{border-color:var(--orig); transform:translateY(-2px)}
.card-top{display:flex; justify-content:space-between; align-items:start; gap:8px; margin-bottom:6px}
.card-top h2{font-size:17px; font-weight:600}
.card-desc{color:var(--muted); font-size:13px; margin:0 0 14px; min-height:34px}
.card-spark{margin:8px 0}
.sparkline{display:block}
.card-stats{display:flex; gap:20px; margin:14px 0}
.stat-col{display:flex; flex-direction:column; gap:2px}
.stat-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.stat-label.orig{color:var(--orig)} .stat-label.kadu{color:var(--kadu)}
.stat-val{font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:600}
.stat-sub{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted)}
.card-tags{display:flex; gap:6px; margin-top:6px}

.tag{background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:3px 9px; font-size:11px; color:var(--muted)}
.pill{border-radius:20px; padding:3px 10px; font-size:11px; border:1px solid var(--border)}
.pill-public{color:var(--profit); border-color:var(--profit)}
.pill-private{color:var(--loss); border-color:var(--loss)}
.pill-link_only{color:var(--kadu); border-color:var(--kadu)}

/* ---- detail page ---- */
.back-link{display:inline-block; margin:20px 0 12px; color:var(--muted); font-size:13px}
.detail-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:10px}
.detail-head h1{font-size:28px}
.detail-desc{color:var(--muted); max-width:760px; margin:0 0 32px}

.section-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin:0 0 12px}
.chart-section{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:32px}
.chart-box{margin-bottom:20px}

/* ---- dark/light sliding toggle switch (visitor-facing, sits in the nav bar) ---- */
/* ---- floating WhatsApp button (stays fixed while scrolling) ---- */
.wa-float-btn{
  position:fixed; bottom:24px; right:24px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .15s ease;
}
.wa-float-btn:hover{transform:scale(1.07)}
.wa-float-btn svg{width:30px; height:30px; fill:#FFFFFF}

.theme-toggle-switch{background:none; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center}
.theme-toggle-track{
  position:relative; width:52px; height:28px; border-radius:20px;
  background:var(--panel2); border:1px solid var(--border);
  display:flex; align-items:center; padding:0 6px; justify-content:space-between;
  transition:background .2s ease;
}
.theme-toggle-icon{font-size:12px; line-height:1; opacity:.7; position:relative; z-index:1}
.theme-toggle-thumb{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--orig); box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .25s ease, background .25s ease;
}
.theme-toggle-switch.is-light .theme-toggle-thumb{transform:translateX(24px); background:var(--kadu)}
.dd-chart-box{position:relative; height:90px; transition:height .35s ease}
.dd-chart-box canvas{width:100% !important; height:100% !important}
.dd-chart-box.expanded{height:180px}
.chart-box:last-child{margin-bottom:0}

/* ---- ledger: signature split-column layout ---- */
.ledger{display:grid; grid-template-columns:1fr 28px 1fr; gap:0; margin-bottom:32px}
.ledger-col{padding:4px 22px}
.ledger-spine{
  position:relative;
  background-image:repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 6px, transparent 6px, transparent 14px);
  width:1px; margin:0 auto;
}
.ledger-spine::before, .ledger-spine::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--panel); border:1px solid var(--border);
}
.ledger-spine::before{top:-4px} .ledger-spine::after{bottom:-4px}
.variant-title{font-size:15px; font-weight:600; padding-bottom:10px; margin-bottom:10px; border-bottom:2px solid var(--border)}
.variant-title.orig{color:var(--orig); border-bottom-color:var(--orig)}
.variant-title.kadu{color:var(--kadu); border-bottom-color:var(--kadu)}

.stat-table{width:100%; border-collapse:collapse}
.stat-table td{padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px}
.stat-name{color:var(--muted)}
.stat-value{font-family:'IBM Plex Mono',monospace; text-align:right; font-weight:600}

.notes-section{background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:32px}
.notes-body{color:var(--bone); font-size:14px; white-space:pre-line}



/* ---- split equity charts (cube-form, side by side) ---- */
.equity-pair{display:flex; gap:18px; margin-bottom:24px}
.equity-pair.single{display:block}
.chart-square{position:relative; height:420px; padding-top:34px; flex:1 1 0; transition:flex-grow .35s ease, flex-basis .35s ease}
.chart-square canvas{width:100% !important; height:100% !important; transition:opacity .25s ease}
.chart-square.expanded{flex:0 0 90%}
.chart-square.collapsed{flex:0 0 10%; cursor:pointer}
.chart-square.collapsed canvas{opacity:0; pointer-events:none}
.chart-square.collapsed .chart-box-title{writing-mode:vertical-rl; text-orientation:mixed; top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; opacity:.85}
.chart-square.collapsed .chart-expand-btn{display:none}
.chart-wide{position:relative; height:320px; padding-top:34px}
.chart-wide canvas{width:100% !important; height:100% !important}
.chart-box-title{position:absolute; top:10px; left:16px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.chart-box-title.orig{color:var(--orig)} .chart-box-title.kadu{color:var(--kadu)}
.chart-expand-btn{
  position:absolute; top:8px; right:12px; z-index:2; width:26px; height:26px; border-radius:6px;
  background:var(--panel2); border:1px solid var(--border); color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
}
.chart-expand-btn:hover{color:var(--bone); border-color:var(--orig)}
.chart-square.expanded .chart-expand-btn, .dd-chart-box.expanded .chart-expand-btn{background:var(--kadu); color:#12141A; border-color:var(--kadu)}

/* ---- stacked trade sections ---- */
.trades-stack{margin-bottom:60px}
.trades-block{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:20px}
.trades-block .variant-title{margin-bottom:14px}

.trade-toggle{
  display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--border);
  color:var(--bone); padding:10px 16px; border-radius:8px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
}
.trade-toggle:hover{border-color:var(--orig)}
.toggle-icon{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--orig); color:#0A1118; font-weight:700; font-size:14px; line-height:1;
}
.trade-panel{margin-top:16px}
.trade-scroll{max-height:520px; overflow-y:auto; border:1px solid var(--border); border-radius:8px}

.trade-table{font-size:12.5px; font-family:'IBM Plex Mono',monospace; width:100%; border-collapse:collapse}
.trade-table thead th{
  position:sticky; top:0; background:var(--panel2); color:var(--muted); font-family:'Inter',sans-serif; font-weight:600;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:9px 10px; cursor:pointer;
  border-bottom:1px solid var(--border); white-space:nowrap; user-select:none;
}
.trade-table thead th:hover{color:var(--bone)}
.trade-table thead th.sorted-asc, .trade-table thead th.sorted-desc{color:var(--kadu); background:#241C14}
.trade-table thead th.sorted-asc::after{content:' \25B2'; font-size:9px}
.trade-table thead th.sorted-desc::after{content:' \25BC'; font-size:9px}
.trade-table td{padding:6px 10px; border-bottom:1px solid var(--border); white-space:nowrap}
.trade-table td.sorted-col{background:rgba(214,138,62,0.08)}
.trade-table td.capital-cell{color:var(--profit); font-weight:700}

.ledger.single{grid-template-columns:1fr}

/* ---- drawdown show/hide toggle ---- */
.dd-toggle{display:flex; gap:10px; margin-bottom:14px}
.dd-toggle-btn{
  display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--border);
  color:var(--muted); padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer;
  font-family:'Inter',sans-serif; opacity:.55;
}
.dd-toggle-btn .sw{width:10px; height:10px; border-radius:50%; background:var(--sw, var(--muted)); display:inline-block}
.dd-toggle-btn.active{color:var(--bone); opacity:1; border-color:var(--sw, var(--border))}

/* ---- whatsapp contact ---- */
.whatsapp-wrap{display:flex; justify-content:center; margin:48px 0 20px}
.whatsapp-btn{
  display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#06210F;
  padding:14px 28px; border-radius:30px; font-weight:700; font-size:15px; box-shadow:0 10px 30px -12px rgba(37,211,102,.6);
}
.whatsapp-btn:hover{filter:brightness(1.05)}
.whatsapp-btn .wa-icon{font-size:18px}

@media(max-width:860px){
  .equity-pair{flex-direction:column}
  .chart-square, .chart-square.expanded, .chart-square.collapsed{flex-basis:auto}
  .chart-square.collapsed canvas{opacity:1; pointer-events:auto}
  .chart-square.collapsed .chart-box-title{writing-mode:horizontal-tb; position:absolute; top:10px; left:16px; transform:none}
}

@media(max-width:860px){
  .ledger{grid-template-columns:1fr}
  .ledger-spine{width:auto; height:1px; margin:20px 0; background-image:repeating-linear-gradient(to right, var(--border) 0, var(--border) 6px, transparent 6px, transparent 14px)}
  .ledger-spine::before,.ledger-spine::after{top:50%; left:-4px; transform:translateY(-50%)}
  .ledger-spine::after{left:auto; right:-4px}
  .hero h1{font-size:27px}
}

/* =======================================================================
   Marketing homepage (index.php) — namespaced with mkt- to avoid clashing
   with the dashboard/strategy-page styles above.
   ======================================================================= */
body.mkt{background:var(--ink)}

/* ---- ticker tape (signature element) ---- */
.mkt-ticker{background:var(--panel2); border-bottom:1px solid var(--border); overflow:hidden; white-space:nowrap; padding:9px 0}
.mkt-ticker-track{display:inline-block; animation:mkt-scroll-left 38s linear infinite}
.mkt-ticker-track span{display:inline-block; padding:0 28px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.02em; color:var(--muted)}
.mkt-ticker-track span.up{color:var(--profit)}
@keyframes mkt-scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.mkt-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--kadu); box-shadow:0 0 10px var(--kadu); margin-right:8px; vertical-align:middle}
.mkt-nav-links{display:flex; gap:28px; font-size:14px; color:var(--muted)}
.mkt-nav-links a:hover{color:var(--bone)}
.mkt-btn-cta{background:var(--kadu); color:#12141A; padding:10px 20px; border-radius:8px; font-weight:700; font-size:14px; display:inline-block}
.mkt-btn-cta:hover{filter:brightness(1.08)}
.mkt-btn-outline{border:1px solid var(--border); padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600; color:var(--bone); display:inline-block}
.mkt-btn-outline:hover{border-color:var(--orig)}
.mkt-link{color:var(--orig); font-weight:600; font-size:14px}

/* ---- hero ---- */
.mkt-hero{padding:64px 0 48px; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center}
.mkt-eyebrow{display:flex; align-items:center; gap:8px}
.mkt-eyebrow::before{content:''; width:18px; height:1px; background:var(--kadu)}
.mkt-h1{font-family:'Space Grotesk',sans-serif; font-size:46px; line-height:1.08; margin-bottom:20px; font-weight:600}
.mkt-hl{color:var(--kadu)}
.mkt-hero-sub{font-size:16.5px; color:var(--muted); max-width:520px; margin-bottom:30px}
.mkt-hero-actions{display:flex; gap:14px; margin-bottom:26px; flex-wrap:wrap}
.mkt-hero-note{font-size:13px; color:var(--muted); display:flex; gap:18px; flex-wrap:wrap}
.mkt-hero-note span{display:flex; align-items:center; gap:6px}
.mkt-pip{width:6px; height:6px; border-radius:50%; background:var(--profit); display:inline-block}
.mkt-hero-chart{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:22px}
.mkt-hero-chart-head{display:flex; justify-content:space-between; margin-bottom:6px; gap:12px}
.mkt-big{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--profit)}
.mkt-hero-chart canvas{width:100% !important; height:220px !important}

/* ---- stat strip ---- */
.mkt-stat-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:36px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.mkt-stat-strip > div{text-align:center; display:flex; flex-direction:column; justify-content:flex-end; min-height:66px}
.mkt-num{font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:600; color:var(--kadu); line-height:1.25}
.mkt-lbl{font-size:12.5px; color:var(--muted); margin-top:4px}

/* ---- sections ---- */
.mkt-section{padding:80px 0}
.mkt-section-head{max-width:620px; margin:0 auto 46px; text-align:center}
.mkt-section-head .mkt-eyebrow{justify-content:center}
.mkt-section-head .mkt-eyebrow::before{display:none}
.mkt-h2{font-family:'Space Grotesk',sans-serif; font-size:32px; margin:0 0 12px; font-weight:600}

/* ---- services (3-up) ---- */
.mkt-services{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.mkt-service-card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:30px; position:relative}
.mkt-service-card.featured{border-color:var(--kadu); box-shadow:0 20px 50px -24px rgba(0,0,0,.45)}
.mkt-service-num{font-family:'IBM Plex Mono',monospace; color:var(--kadu); font-size:13px; display:block; margin-bottom:14px}
.mkt-service-card h3{font-family:'Space Grotesk',sans-serif; font-size:20px; margin-bottom:10px}
.mkt-service-card p{color:var(--muted); font-size:14px; margin:0 0 18px}
.mkt-list{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:10px}
.mkt-list li{font-size:13.5px; display:flex; gap:9px}
.mkt-list li::before{content:'✓'; color:var(--profit); font-weight:700}

/* ---- steps ---- */
.mkt-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.mkt-step{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px 20px}
.mkt-step-n{font-family:'IBM Plex Mono',monospace; color:var(--kadu); font-size:13px; margin-bottom:12px}
.mkt-step h4{font-size:15.5px; margin:0 0 8px}
.mkt-step p{font-size:13px; color:var(--muted); margin:0}

/* ---- best-growth stat (extra-wide number) ---- */
.mkt-num-growth{font-size:19px; letter-spacing:-.01em; line-height:1.25}

/* ---- auto-scrolling top-10 strip ---- */
.mkt-strip-wrap{overflow:hidden; padding:8px 0 4px; -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent)}
.mkt-strip-track{display:flex; gap:18px; width:max-content; animation:mkt-strip-scroll 60s linear infinite}
.mkt-strip-wrap:hover .mkt-strip-track{animation-play-state:paused}
.mkt-strip-card{width:300px; flex:0 0 auto}
.mkt-strip-card .strat-card{height:100%}
@keyframes mkt-strip-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- trust ---- */
.mkt-trust{background:var(--panel2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:44px 0}
.mkt-trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:center}
.mkt-trust-grid h4{font-family:'Space Grotesk',sans-serif; font-size:15px; margin:0 0 6px}
.mkt-trust-grid p{font-size:13px; color:var(--muted); margin:0}

/* ---- final cta ---- */
.mkt-final-cta{background:linear-gradient(135deg,var(--panel2),var(--ink) 65%); border:1px solid var(--border); border-radius:20px; padding:56px; text-align:center; margin:0 auto}
.mkt-final-cta p{color:var(--muted); max-width:520px; margin:0 auto 28px}

@media(max-width:900px){
  .mkt-hero{grid-template-columns:1fr}
  .mkt-stat-strip, .mkt-services, .mkt-steps, .mkt-trust-grid{grid-template-columns:1fr 1fr}
  .mkt-h1{font-size:34px}
  .mkt-nav-links{display:none}
}
@media(max-width:600px){
  .mkt-stat-strip, .mkt-services, .mkt-steps, .mkt-trust-grid{grid-template-columns:1fr}
}