/* ===== Botomout — shared stylesheet ===== */
:root{
  --bg:#0b1020; --bg2:#0e1428; --panel:#131a2e; --panel2:#182banner;
  --line:#243154; --text:#e6ebf5; --muted:#9aa6c0;
  --gold:#f5c451; --gold2:#e0a92e; --green:#22c55e; --red:#ef4444;
  --blue:#3b82f6; --radius:14px; --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,#16203e 0%,var(--bg) 55%);
  color:var(--text);line-height:1.6;min-height:100vh;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.btn{
  display:inline-block;padding:12px 22px;border-radius:10px;font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#11161f;
  border:none;cursor:pointer;transition:.2s transform,.2s box-shadow;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(245,196,81,.25);color:#11161f}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.green{background:linear-gradient(135deg,#34d399,#16a34a);color:#06210f}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--text);white-space:nowrap;flex:0 0 auto}
.brand .dot{width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--gold),var(--green));display:grid;place-items:center;
  color:#0b1020;font-weight:900}
.menu{display:flex;gap:26px;align-items:center}
.menu a{color:var(--muted);font-weight:600}
.menu a:hover,.menu a.active{color:var(--text)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-cta .btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;line-height:1}
.burger{display:none;background:none;border:none;color:var(--text);font-size:26px;cursor:pointer}

/* hero */
.hero{padding:84px 0 60px;text-align:center}
.tag{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.5px;margin-bottom:22px}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.05;font-weight:900;letter-spacing:-1px}
.hero h1 .grad{background:linear-gradient(135deg,var(--gold),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{max-width:720px;margin:20px auto 30px;color:var(--muted);font-size:19px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* sections */
section{padding:64px 0}
.section-head{text-align:center;max-width:740px;margin:0 auto 44px}
.section-head h2{font-size:clamp(26px,4vw,40px);font-weight:800}
.section-head p{color:var(--muted);margin-top:12px;font-size:17px}
.eyebrow{color:var(--gold);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px}

/* grid cards */
.grid{display:grid;gap:22px;align-items:stretch}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;transition:.2s}
.card:hover{border-color:#33457a;transform:translateY(-3px)}
.card .ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:22px;
  background:rgba(245,196,81,.12);margin-bottom:16px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}

/* pricing */
.price{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.plan{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;text-align:center;position:relative;
  display:flex;flex-direction:column}
.plan .btn{margin-top:auto;align-self:stretch;justify-content:center}
.plan.pop{border-color:var(--gold);box-shadow:0 12px 40px rgba(245,196,81,.12)}
.plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#11161f;font-weight:800;font-size:12px;padding:4px 12px;border-radius:999px}
.plan h3{font-size:20px}
.plan .amt{font-size:42px;font-weight:900;margin:10px 0}
.plan .amt span{font-size:16px;color:var(--muted);font-weight:600}
.plan ul{list-style:none;text-align:left;margin:18px 0 24px}
.plan li{padding:8px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.plan li::before{content:"✓";color:var(--green);font-weight:900;margin-right:10px}

/* steps */
.steps{counter-reset:s;display:grid;gap:18px}
.step{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
.step .num{counter-increment:s;flex:0 0 44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--green));color:#0b1020;font-weight:900;
  display:grid;place-items:center;font-size:18px}
.step .num::before{content:counter(s)}
.step h4{font-size:17px;margin-bottom:4px}
.step p{color:var(--muted);font-size:15px}
code,.kbd{background:#0a0f1f;border:1px solid var(--line);border-radius:6px;padding:2px 8px;
  font-family:Consolas,monospace;color:#ffd479;font-size:14px}
.note{background:rgba(59,130,246,.08);border:1px solid #2a3f6b;border-left:4px solid var(--blue);
  border-radius:10px;padding:16px 18px;color:#c7d3ee;margin:18px 0}
.warn{background:rgba(239,68,68,.08);border:1px solid #5a2a2a;border-left:4px solid var(--red);
  border-radius:10px;padding:16px 18px;color:#f3c9c9;margin:18px 0}

/* widgets */
.tv-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;overflow:hidden}
.tv-wrap+.tv-wrap{margin-top:24px}

/* ===== Forex trading sessions graph ===== */
.fxs-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.fxs-clock{font-size:15px;color:var(--muted)}
.fxs-clock b{color:var(--gold);font-size:18px;font-variant-numeric:tabular-nums}
.fxs-open-now{font-size:14px;color:var(--muted)}
.fxs-open-now b{color:var(--green)}
.fxs-row{display:flex;align-items:center;gap:14px;margin:9px 0}
.fxs-label{width:140px;flex:0 0 140px;font-size:14px}
.fxs-label .nm{font-weight:700;color:var(--text)}
.fxs-label .hr{display:block;font-size:12px;color:var(--muted)}
.fxs-track{position:relative;flex:1;height:30px;background:#0a0f1f;border:1px solid var(--line);
  border-radius:7px;overflow:hidden}
.fxs-bar{position:absolute;top:3px;bottom:3px;border-radius:5px;opacity:.9}
.fxs-bar span{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:11px;
  font-weight:700;color:#0b1020;white-space:nowrap}
.fxs-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;z-index:6;
  box-shadow:0 0 8px rgba(255,255,255,.8)}
.fxs-status{flex:0 0 78px;text-align:right}
.fxs-ruler{position:relative;flex:1;height:18px}
.fxs-ruler span{position:absolute;transform:translateX(-50%);font-size:11px;color:#6b7795;font-variant-numeric:tabular-nums}
.fxs-note{color:#6b7795;font-size:12px;margin-top:14px;text-align:center}
@media(max-width:680px){.fxs-label{width:96px;flex:0 0 96px}.fxs-status{flex:0 0 60px}}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:40px;color:var(--muted)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.foot-grid a{color:var(--muted);display:block;padding:4px 0}
.foot-grid a:hover{color:var(--gold)}
.disc{font-size:13px;color:#6b7795;margin-top:24px;border-top:1px solid var(--line);padding-top:18px}

/* admin/login */
.auth{max-width:380px;margin:80px auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px}
.auth h2{text-align:center;margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 12px;background:#0a0f1f;border:1px solid var(--line);
  border-radius:9px;color:var(--text);font-size:15px}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{background:#0e1530;color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
tr:hover td{background:#0e1530}
.pill{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.ok{background:rgba(34,197,94,.15);color:#86efac}
.pill.exp{background:rgba(239,68,68,.15);color:#fca5a5}
.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-weight:600}
.flash.ok{background:rgba(34,197,94,.12);color:#86efac;border:1px solid #1f5132}
.flash.err{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid #5a2a2a}

/* ===== scroll reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.stat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:26px 18px;
  display:flex;flex-direction:column;justify-content:center}
.stat .num{font-size:36px;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--muted);font-size:14px;margin-top:6px}

/* ===== testimonials ===== */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;padding:24px}
.tcard .stars{color:var(--gold);margin-bottom:10px;letter-spacing:2px}
.tcard p{color:var(--muted)}
.tcard .who{display:flex;align-items:center;gap:10px;margin-top:16px}
.tcard .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--green));
  display:grid;place-items:center;color:#0b1020;font-weight:800}
.tcard .who b{display:block} .tcard .who span{color:var(--muted);font-size:13px}

/* ===== FAQ accordion ===== */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:0 18px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:22px;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details>p{color:var(--muted);padding:0 0 16px;margin:0}

/* ===== payment badges ===== */
.paybadges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.paybadges .pb{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;color:var(--muted);font-weight:700;font-size:14px}

/* ===== checkout trust row ===== */
.trust-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.trust-row .ti{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}

/* ===== LIGHT THEME ===== */
:root[data-theme="light"]{
  --bg:#eef1f7; --bg2:#f7f9fc; --panel:#ffffff;
  --line:#e3e8f0; --text:#0b1020; --muted:#566074; --gold2:#c98f12;
}
[data-theme="light"] body{background:radial-gradient(1200px 600px at 80% -10%,#ffffff 0%,#eef1f7 55%);color:var(--text)}
[data-theme="light"] header.nav{background:rgba(255,255,255,.9);border-bottom-color:var(--line)}
[data-theme="light"] .menu a{color:#566074}
[data-theme="light"] .menu a:hover,[data-theme="light"] .menu a.active{color:#0b1020}
[data-theme="light"] .card,[data-theme="light"] .plan,[data-theme="light"] .stat,[data-theme="light"] .tcard,[data-theme="light"] .step,[data-theme="light"] .faq details,[data-theme="light"] .auth{background:#ffffff;border-color:var(--line)}
[data-theme="light"] .btn.ghost{color:#0b1020;border-color:var(--line)}
[data-theme="light"] table{background:#ffffff}
[data-theme="light"] th{background:#eef2f9;color:#9a7b1e}
[data-theme="light"] tr:hover td{background:#f5f8fc}
[data-theme="light"] code,[data-theme="light"] .kbd{background:#eef2f9;color:#b4791a;border-color:var(--line)}
[data-theme="light"] .note{color:#1e3a6b}
[data-theme="light"] .warn{color:#7a1f1f}
[data-theme="light"] .field input,[data-theme="light"] .field select{background:#f1f4fa;color:#0b1020;border-color:var(--line)}
/* flip common hard-coded dark fills (inputs, tiles) */
[data-theme="light"] [style*="#0a0f1f"]{background:#f1f4fa !important;color:#0b1020 !important}
[data-theme="light"] [style*="#0e1530"]{background:#f5f8fc !important}
/* keep market widgets on dark cards so TradingView (dark) stays readable */
[data-theme="light"] .tv-wrap{background:#0e1428;border-color:#243154}
[data-theme="light"] .buybar{background:rgba(255,255,255,.97)}
[data-theme="light"] .buybar .bp{color:#0b1020}

/* theme toggle button */
.theme-toggle{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;width:42px;height:42px;cursor:pointer;font-size:17px;display:inline-grid;place-items:center;flex:0 0 auto}
.theme-toggle:hover{border-color:var(--gold)}
.theme-toggle.floating{position:fixed;left:18px;bottom:18px;z-index:9000;background:var(--panel);box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* ===== animated hero background ===== */
.hero{position:relative;z-index:0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(38% 38% at 20% 30%, rgba(245,196,81,.18), transparent 60%),
   radial-gradient(38% 38% at 80% 20%, rgba(34,197,94,.16), transparent 60%),
   radial-gradient(40% 40% at 60% 85%, rgba(59,130,246,.14), transparent 60%);
  filter:blur(8px);animation:heroFloat 18s ease-in-out infinite alternate}
@keyframes heroFloat{0%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-2%) scale(1.05)}100%{transform:translate(-2%,2%) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* ===== live BTC chip in header ===== */
.btc-chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--text);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.btc-chip .b{color:#f7931a;font-weight:900}
.btc-chip .c.up{color:#22c55e}.btc-chip .c.down{color:#ef4444}
@media(max-width:1040px){.btc-chip{display:none}}

/* ===== gallery + lightbox ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery figure{margin:0}
.gallery img{width:100%;height:210px;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;transition:.2s;background:#0b1020}
.gallery img:hover{transform:translateY(-3px);border-color:var(--gold)}
.gallery figcaption{color:var(--muted);font-size:13px;margin-top:8px;text-align:center}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;place-items:center;z-index:10000;padding:24px}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .x{position:absolute;top:16px;right:24px;color:#fff;font-size:34px;cursor:pointer;line-height:1}
@media(max-width:860px){.gallery{grid-template-columns:1fr}}

/* ===== calculator cards (equal height, aligned buttons/results) ===== */
.calc-card{display:flex;flex-direction:column}
.calc-card > button{margin-top:auto}
.calc-out{background:linear-gradient(135deg,#10204a,var(--bg2));border:1px solid var(--gold);border-radius:12px;padding:18px;margin-top:14px;text-align:center}
.calc-out .big{font-size:30px;font-weight:900;color:var(--gold)}
.calc-out .lbl{color:var(--muted);font-size:13px}

/* ===== live pulse dot ===== */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px;vertical-align:middle;animation:livePulse 1.4s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* ===== mobile sticky buy bar ===== */
.buybar{display:none}

@media(max-width:860px){
  .g3,.g4,.g2,.price{grid-template-columns:1fr}
  .stats,.testi{grid-template-columns:repeat(2,1fr)}
  .testi{grid-template-columns:1fr}
  .menu{display:none}
  .burger{display:block;z-index:60}
  /* slide-in drawer */
  .menu.open{display:flex;position:fixed;top:0;right:0;bottom:0;left:auto;width:78%;max-width:300px;
    flex-direction:column;gap:6px;background:var(--bg2);padding:78px 24px 24px;border-left:1px solid var(--line);
    box-shadow:-12px 0 50px rgba(0,0,0,.55);animation:bmSlide .25s ease}
  .menu.open a{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  @keyframes bmSlide{from{transform:translateX(100%)}to{transform:none}}
  /* sticky buy bar */
  .buybar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9000;background:rgba(14,20,40,.97);
    backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 14px;gap:12px;align-items:center;justify-content:space-between}
  .buybar .bp{font-weight:800;font-size:14px;color:var(--text)}
  .buybar .bp small{display:block;color:#86efac;font-weight:700;font-size:12px}
  body:not([data-nobuybar]){padding-bottom:66px}
}