/* ============================================================
   BWG PLATFORM — shared styles
   Direction: "private trading floor" — near-black, gold hairlines,
   editorial display type (Unbounded) + Golos Text body.
   ============================================================ */

:root {
  --bg:        #0A0A0C;
  --bg-2:      #0F0F12;
  --panel:     #131317;
  --panel-2:   #17171C;
  --line:      rgba(245, 166, 35, 0.16);
  --line-soft: rgba(255, 255, 255, 0.07);
  --gold:      #F5A623;
  --gold-2:    #FFD700;
  --gold-grad: linear-gradient(135deg, #F5A623 0%, #FFD700 100%);
  --ink:       rgba(255, 255, 255, 0.94);
  --ink-2:     rgba(255, 255, 255, 0.62);
  --ink-3:     rgba(255, 255, 255, 0.38);
  --green:     #2BD98A;
  --red:       #F0564B;
  --radius:    18px;
  --font-d:    'Unbounded', 'Segoe UI', sans-serif;
  --font-b:    'Golos Text', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* nothing may push the page sideways on phones (owner saw the layout shifted left) */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* film grain over everything */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.55;
}

::selection { background: rgba(245,166,35,0.35); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */

h1, h2, h3, .display {
  font-family: var(--font-d);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.h-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-d);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.h-kicker::before {
  content: ''; width: 26px; height: 1px;
  background: var(--gold-grad);
}

.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sec-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: 14px; }
.sec-sub   { color: var(--ink-2); max-width: 640px; font-size: 1.02rem; }

section { padding: 96px 0; position: relative; }
section.tight { padding: 64px 0; }

/* ---------- nav ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(10,10,12,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  height: 66px;
  display: flex; align-items: center; gap: 28px;
}
.brand {
  font-family: var(--font-d);
  font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 10px;
  margin-right: auto;
}
.brand i {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--gold-grad);
  display: inline-flex; align-items: center; justify-content: center;
  color: #0A0A0C; font-style: normal; font-size: 0.8rem; font-weight: 800;
  box-shadow: 0 0 22px rgba(245,166,35,0.4);
}
.brand span { color: var(--gold); }

.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-size: 0.86rem; color: var(--ink-2);
  letter-spacing: 0.02em;
  transition: color .2s;
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--gold-grad);
  transition: width .25s ease;
}
.nav-links a:hover::after { width: 100%; }

.lang-btn {
  font-family: var(--font-d); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
  background: transparent;
  padding: 7px 12px; border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lang-btn:hover { color: var(--gold); border-color: var(--line); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .25s; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-d);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 17px 38px;
  border-radius: 999px;
  color: #0A0A0C;
  background: var(--gold-grad);
  box-shadow: 0 4px 26px rgba(245,166,35,0.32);
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s ease;
  border: 0; cursor: pointer;
  white-space: nowrap;
}
.btn::before {
  content: ''; position: absolute; top: 0; left: -110%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
}
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 42px rgba(245,166,35,0.6), 0 12px 34px rgba(245,166,35,0.3); }
.btn:hover::before { left: 160%; transition: left .55s ease; }
.btn:active { transform: translateY(-1px) scale(0.98); }

.btn.ghost {
  background: rgba(245,166,35,0.07);   /* readable on the busy hero art, not just an outline */
  color: var(--ink);
  border: 1px solid rgba(245,166,35,0.55);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 26px rgba(245,166,35,0.18); }

.btn.sm { padding: 12px 26px; font-size: 0.68rem; }

.pulse-wrap { position: relative; display: inline-block; }
.pulse-wrap::before, .pulse-wrap::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 999px;
  border: 1.5px solid rgba(245,166,35,0.4);
  animation: ring 2.6s ease-out infinite;
  pointer-events: none;
}
.pulse-wrap::after { animation-delay: 1.3s; }
@keyframes ring {
  0%   { transform: scale(1);    opacity: .5; }
  100% { transform: scale(1.22); opacity: 0;  }
}

/* ---------- hero ---------- */

.hero {
  min-height: 92vh;
  display: flex; align-items: center;
  padding: 150px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(245,166,35,0.09) 0%, transparent 62%);
  top: -180px; right: -260px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(245,166,35,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 65% at 60% 40%, black 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 60% 40%, black 25%, transparent 72%);
  pointer-events: none;
}

.hero-in { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  font-weight: 800;
  max-width: 900px;
}
.hero p.lead {
  margin-top: 26px;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  color: var(--ink-2);
  max-width: 620px;
}
.hero-cta { margin-top: 44px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 20px; font-size: 0.82rem; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.hero-note b { color: var(--green); font-weight: 600; }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(43,217,138,0.6);
  animation: livepulse 1.8s infinite;
  display: inline-block;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(43,217,138,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(43,217,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,217,138,0); }
}

/* staggered reveal on load / scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(0.2,0.7,0.2,1); }
.rv.on { opacity: 1; transform: none; }

/* ---------- ticker ---------- */

.ticker {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.015);
  overflow: hidden;
  padding: 13px 0;
  position: relative;
}
.ticker-track {
  display: flex; gap: 54px;
  width: max-content;
  animation: tick 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.tk {
  font-family: var(--font-d); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap;
}
.tk b { color: var(--gold); font-weight: 500; }
.tk::after { content: '◆'; color: rgba(245,166,35,0.35); font-size: 0.55rem; }

/* ---------- tool cards ---------- */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 54px;
}

.tool-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 38px 34px 34px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column; gap: 14px;
}
.tool-card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(245,166,35,0.07);
}
.tool-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,166,35,0.55), transparent);
  opacity: 0; transition: opacity .3s;
}
.tool-card:hover::before { opacity: 1; }

.tool-num {
  position: absolute; top: 22px; right: 26px;
  font-family: var(--font-d); font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
.tool-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(245,166,35,0.09);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.tool-card h3 { font-size: 1.18rem; }
.tool-card p { color: var(--ink-2); font-size: 0.95rem; flex: 1; }
.tool-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(245,166,35,0.08);
  border: 1px solid var(--line);
  padding: 4px 11px; border-radius: 999px;
}
.tool-link {
  margin-top: 10px;
  font-family: var(--font-d); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 8px;
}
.tool-link i { font-style: normal; transition: transform .25s; }
.tool-card:hover .tool-link i { transform: translateX(5px); }

/* ---------- why / comparison ---------- */

.vs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 54px;
}
.vs-col {
  border-radius: var(--radius);
  padding: 36px 34px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
}
.vs-col.us {
  border-color: var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(245,166,35,0.08) 0%, transparent 55%),
    var(--panel);
}
.vs-col h3 { font-size: 1rem; margin-bottom: 24px; letter-spacing: 0.04em; }
.vs-col.us h3 { color: var(--gold); }
.vs-col li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 11px 0;
  font-size: 0.95rem;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line-soft);
}
.vs-col li:last-child { border-bottom: 0; }
.vs-col.us li { color: var(--ink); }
.vs-mark { flex: 0 0 auto; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; }
.vs-col.us .vs-mark { background: rgba(43,217,138,0.14); color: var(--green); }
.vs-col.them .vs-mark { background: rgba(240,86,75,0.12); color: var(--red); }

/* ---------- numbers band ---------- */

.numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 54px;
}
.num-cell { background: var(--panel); padding: 34px 28px; }
.num-cell b {
  display: block;
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.num-cell span { font-size: 0.84rem; color: var(--ink-3); display: block; margin-top: 8px; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; counter-reset: step; }
.step {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
}
.step::before {
  counter-increment: step;
  content: '0' counter(step);
  font-family: var(--font-d);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--gold);
  display: block; margin-bottom: 16px;
}
.step h4 { font-family: var(--font-d); font-size: 0.92rem; font-weight: 700; margin-bottom: 10px; }
.step p { font-size: 0.88rem; color: var(--ink-2); }

/* ---------- testimonials (TG-bubble style) ---------- */

.tg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
.tg-msg {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 4px 18px 18px 18px;
  padding: 22px 22px 18px;
  position: relative;
  transition: border-color .3s, transform .3s;
}
.tg-msg:hover { border-color: var(--line); transform: translateY(-4px); }
.tg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tg-ava {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold-grad);
  color: #0A0A0C; font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.tg-name { font-weight: 600; font-size: 0.92rem; }
.tg-geo  { font-size: 0.76rem; color: var(--ink-3); }
.tg-msg p { font-size: 0.92rem; color: var(--ink-2); }
.tg-time { text-align: right; font-size: 0.7rem; color: var(--ink-3); margin-top: 10px; }
.tg-time b { color: var(--gold); font-weight: 500; }

/* ---------- FAQ ---------- */

.faq { max-width: 780px; margin: 46px auto 0; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  font-weight: 600;
  font-size: 1.0rem;
  transition: color .2s;
}
.faq summary:hover { color: var(--gold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-d);
  color: var(--gold);
  font-size: 1.15rem; font-weight: 400;
  transition: transform .25s;
  flex: 0 0 auto;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 4px 22px; color: var(--ink-2); font-size: 0.95rem; max-width: 660px; }

/* ---------- CTA band ---------- */

.cta-band {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 74px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 50% 115%, rgba(245,166,35,0.14) 0%, transparent 60%),
    var(--panel);
}
.cta-band h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 720px; margin: 0 auto 16px; }
.cta-band p { color: var(--ink-2); max-width: 560px; margin: 0 auto 38px; }

/* ---------- page hero (subpages) ---------- */

.page-hero { padding: 158px 0 64px; position: relative; overflow: hidden; }
.page-hero::before {
  content: '';
  position: absolute; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(245,166,35,0.08) 0%, transparent 60%);
  top: -220px; right: -180px; pointer-events: none;
}
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 820px; }
.page-hero .lead { margin-top: 20px; color: var(--ink-2); max-width: 640px; font-size: 1.06rem; }
.crumbs { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 26px; display: flex; gap: 8px; align-items: center; }
.crumbs a:hover { color: var(--gold); }

/* feature list on tool pages */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 46px; }
.feat-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 840px; }
.feat {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.feat b { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; margin-bottom: 10px; font-weight: 700; }
.feat b i { font-style: normal; }
.feat p { font-size: 0.88rem; color: var(--ink-2); }

/* demo window mock */
.mock {
  margin-top: 54px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--bg-2);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); font-style: normal; }
.mock-bar i:first-child { background: rgba(240,86,75,0.6); }
.mock-bar i:nth-child(2) { background: rgba(245,166,35,0.6); }
.mock-bar i:nth-child(3) { background: rgba(43,217,138,0.6); }
.mock-bar span { margin-left: 10px; font-size: 0.74rem; color: var(--ink-3); letter-spacing: 0.06em; }
.mock-body { padding: 30px; display: grid; gap: 12px; }
.mock-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 15px 20px;
  font-size: 0.88rem;
}
.mock-row .lbl { color: var(--ink-3); font-size: 0.8rem; }
.mock-row .win { color: var(--green); font-weight: 700; }
.mock-row .amt { font-family: var(--font-d); font-size: 0.8rem; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line-soft);
  padding: 64px 0 44px;
  background: var(--bg-2);
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; }
.foot-brand p { color: var(--ink-3); font-size: 0.86rem; margin-top: 14px; max-width: 280px; }
footer h5 {
  font-family: var(--font-d); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
footer li { margin-bottom: 11px; }
footer li a { font-size: 0.9rem; color: var(--ink-2); transition: color .2s; }
footer li a:hover { color: var(--gold); }
.foot-bottom {
  margin-top: 54px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--ink-3);
}
.risk-note { font-size: 0.72rem; color: var(--ink-3); margin-top: 26px; max-width: 720px; line-height: 1.6; }

/* ============================================================
   CINEMATIC LAYER (v2) — live terminal, win-toasts, beams,
   outline type, animated counters, tilt cards
   ============================================================ */

/* rotating gold beams behind hero */
.beams {
  position: absolute; inset: -30% -20%;
  pointer-events: none;
  opacity: 0.75;
  filter: blur(60px);
}
.beams::before, .beams::after {
  content: '';
  position: absolute;
  width: 52vw; height: 52vw;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 40%, rgba(245,166,35,0.16) 50%, transparent 60% 100%);
  animation: beamspin 22s linear infinite;
}
.beams::before { top: -10%; right: -6%; }
.beams::after  { bottom: -20%; left: -10%; animation-duration: 34s; animation-direction: reverse; opacity: 0.6; }
@keyframes beamspin { to { transform: rotate(360deg); } }

/* huge outline word */
.hl-outline {
  -webkit-text-stroke: 1.5px rgba(245,166,35,0.85);
  color: transparent;
  background: none;
}

/* shimmering gold text */
.gold-shimmer {
  background: linear-gradient(110deg, #F5A623 20%, #FFF3C4 40%, #FFD700 55%, #F5A623 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer { 0%{background-position: 120% 0} 100%{background-position: -120% 0} }

/* watermark behind hero */
.hero-mark {
  position: absolute;
  right: 1vw; bottom: 2vw;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* BWG-branded watermark — the logo itself, big and ghosted */
.hero-mark img {
  display: block;
  width: clamp(300px, 30vw, 520px);
  opacity: 0.16;
  filter: drop-shadow(0 0 30px rgba(245,166,35,0.35));
}

/* hero 2-col with terminal */
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}
.hero-grid > * { min-width: 0; }   /* grid blowout guard — nowrap children must not widen the page */
.hero-side { align-self: start; }  /* phone top lines up with the headline instead of sagging */

/* ---------- live terminal ---------- */

.term {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(23,23,28,0.92), rgba(13,13,16,0.96));
  border: 1px solid rgba(245,166,35,0.22);
  box-shadow:
    0 40px 90px rgba(0,0,0,0.6),
    0 0 70px rgba(245,166,35,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.term::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.017) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.term-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.term-head .dots { display: flex; gap: 7px; }
.term-head .dots i { width: 10px; height: 10px; border-radius: 50%; font-style: normal; }
.term-head .dots i:nth-child(1) { background: rgba(240,86,75,0.7); }
.term-head .dots i:nth-child(2) { background: rgba(245,166,35,0.7); }
.term-head .dots i:nth-child(3) { background: rgba(43,217,138,0.7); }
.term-title {
  margin-left: 8px;
  font-family: var(--font-d); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
}
.term-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-d); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
}
.term-body {
  padding: 22px 22px 16px;
  font-family: 'Consolas', 'SF Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.9;
  min-height: 285px;
  color: var(--ink-2);
}
.term-body { overflow: hidden; }
.term-body .tl { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; overflow: hidden; min-width: 0; max-width: 100%; }
.term-body .tl .l { overflow: hidden; text-overflow: ellipsis; }
.term-body .dim  { color: var(--ink-3); }
.term-body .win  { color: var(--green); font-weight: 700; }
.term-body .loss { color: var(--red); }
.term-body .gld  { color: var(--gold); }
.term-caret {
  display: inline-block; width: 8px; height: 15px;
  background: var(--gold);
  vertical-align: -2px;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.term-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(245,166,35,0.045);
}
.term-foot .lbl { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.term-balance {
  font-family: var(--font-d); font-size: 1.25rem; font-weight: 800;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- win toasts ---------- */

.toasts {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 900;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: rgba(19,19,23,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245,166,35,0.25);
  border-radius: 14px;
  padding: 11px 16px 11px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 26px rgba(245,166,35,0.08);
  transform: translateX(-120%);
  animation: toastin 6.5s cubic-bezier(0.22,1,0.36,1) forwards;
  max-width: 320px;
}
@keyframes toastin {
  0%   { transform: translateX(-120%); opacity: 0; }
  7%   { transform: translateX(0);     opacity: 1; }
  86%  { transform: translateX(0);     opacity: 1; }
  100% { transform: translateX(-120%); opacity: 0; }
}
.toast .t-flag { font-size: 1.3rem; }
.toast .t-txt  { font-size: 0.8rem; color: var(--ink-2); line-height: 1.4; }
.toast .t-txt b { color: var(--ink); font-weight: 600; }
.toast .t-amt  { margin-left: auto; font-family: var(--font-d); font-size: 0.8rem; font-weight: 800; color: var(--green); white-space: nowrap; }
@media (max-width: 680px) { .toasts { display: none; } }

/* ---------- animated counters get gold flare ---------- */

.num-cell b { position: relative; }

/* ---------- marquee brands strip spacing fix ---------- */
.ticker { position: relative; z-index: 2; }

/* ---------- tilt (JS sets --rx/--ry) ---------- */
.tool-card { will-change: transform; }
.tool-card.tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* section divider glow line */
.glow-line {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(245,166,35,0.5), transparent);
}

/* ============================================================
   SITE LAYER (v3) — dropdown nav, TG-chat demo, ecosystem map,
   trust badges, tool pager, catalog page
   ============================================================ */

/* --- nav dropdown --- */
.dd { position: relative; }
.dd > a::after { display: none; }
.dd-menu {
  position: absolute; top: calc(100% + 14px); left: -18px;
  min-width: 250px;
  background: rgba(15,15,18,0.97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.55), 0 0 40px rgba(245,166,35,0.06);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 1001;
}
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.dd-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 11px;
  font-size: 0.88rem !important;
  color: var(--ink-2);
  transition: background .18s, color .18s;
}
.dd-menu a::after { display: none; }
.dd-menu a:hover { background: rgba(245,166,35,0.08); color: var(--ink); }
.dd-menu .ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(245,166,35,0.09); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex: 0 0 auto; }
.dd-menu small { display: block; font-size: 0.7rem; color: var(--ink-3); margin-top: 1px; }
.dd-caret { display: inline-block; margin-left: 5px; font-size: 0.55rem; color: var(--ink-3); transition: transform .2s; }
.dd:hover .dd-caret { transform: rotate(180deg); color: var(--gold); }
@media (max-width: 680px) {
  .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; background: transparent; box-shadow: none; padding: 0 0 0 12px; min-width: 0; }
  .dd-caret { display: none; }
}

/* --- trust badges row --- */
.trust {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 30px;
}
.trust span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.8rem; color: var(--ink-3);
}
.trust span i { font-style: normal; color: var(--gold); font-size: 0.95rem; }

/* --- Telegram chat demo mock --- */
.tg-demo {
  max-width: 420px;
  border-radius: 26px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #17171C, #101013);
  box-shadow: 0 34px 80px rgba(0,0,0,0.55), 0 0 50px rgba(245,166,35,0.07);
  overflow: hidden;
}
.tg-demo-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line-soft);
}
.tg-demo-ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-grad);
  color: #0A0A0C; font-weight: 800; font-family: var(--font-d); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.tg-demo-name { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
.tg-demo-name .ver { color: #6FB1FC; font-size: 0.8rem; }
.tg-demo-status { font-size: 0.74rem; color: var(--green); }
.tg-demo-body { padding: 20px 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.tg-b {
  max-width: 88%;
  background: #1D1D23;
  border: 1px solid var(--line-soft);
  border-radius: 4px 16px 16px 16px;
  padding: 12px 15px;
  font-size: 0.86rem; color: var(--ink-2);
  line-height: 1.5;
}
.tg-b b { color: var(--ink); }
.tg-b .g { color: var(--gold); font-weight: 600; }
.tg-b .w { color: var(--green); font-weight: 700; }
.tg-b.user {
  align-self: flex-end;
  background: rgba(245,166,35,0.13);
  border-color: rgba(245,166,35,0.25);
  border-radius: 16px 4px 16px 16px;
  color: var(--ink);
}
.tg-kb { display: flex; flex-direction: column; gap: 7px; max-width: 88%; }
.tg-kb span {
  text-align: center;
  background: rgba(245,166,35,0.1);
  border: 1px solid var(--line);
  color: var(--gold);
  border-radius: 11px;
  padding: 9px 12px;
  font-size: 0.82rem; font-weight: 600;
}
.tg-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.tg-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); font-style: normal; animation: typing 1.2s infinite; }
.tg-typing i:nth-child(2) { animation-delay: .18s; }
.tg-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%,60%,100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* demo split layout */
.demo-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
  margin-top: 54px;
}
.demo-split .side h3 { font-size: 1.5rem; margin-bottom: 16px; }
.demo-split .side p { color: var(--ink-2); margin-bottom: 14px; }
.demo-split .side li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; color: var(--ink-2); font-size: 0.95rem;
}
.demo-split .side li i { font-style: normal; color: var(--gold); margin-top: 2px; }
@media (max-width: 960px) {
  .demo-split { grid-template-columns: 1fr; gap: 36px; }
  .tg-demo { margin: 0 auto; }
}

/* --- ecosystem map --- */
.eco {
  margin-top: 54px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.eco::before {
  content: '';
  position: absolute; top: 50%; left: 4%; right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,166,35,0.4), rgba(245,166,35,0.4), transparent);
  z-index: 0;
}
.eco-node {
  position: relative; z-index: 1;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  transition: border-color .3s, transform .3s;
}
.eco-node:hover { border-color: var(--line); transform: translateY(-5px); }
.eco-node .big { font-size: 1.7rem; display: block; margin-bottom: 12px; }
.eco-node b { font-family: var(--font-d); font-size: 0.82rem; display: block; margin-bottom: 8px; }
.eco-node p { font-size: 0.8rem; color: var(--ink-3); line-height: 1.5; }
.eco-node .n {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--font-d); font-size: 0.6rem; color: var(--gold); letter-spacing: 0.16em;
}
@media (max-width: 960px) { .eco { grid-template-columns: 1fr 1fr; } .eco::before { display: none; } }
@media (max-width: 680px) { .eco { grid-template-columns: 1fr; } }

/* ============================================================
   FX LAYER (v4) — intro, particles, hero chart, cursor glow,
   scroll progress
   ============================================================ */

/* intro overlay (once per session) */
.fx-intro {
  position: fixed; inset: 0; z-index: 10000;
  background: #070708;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity .6s ease, visibility .6s;
}
.fx-intro.out { opacity: 0; visibility: hidden; pointer-events: none; }
.fx-intro .word {
  font-family: var(--font-d); font-weight: 800;
  font-size: clamp(3rem, 10vw, 6.5rem);
  letter-spacing: 0.08em;
  display: flex;
}
.fx-intro .word i {
  font-style: normal;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(26px) scale(0.94);
  animation: introLetter .5s cubic-bezier(0.2,0.9,0.3,1.4) forwards;
  filter: drop-shadow(0 0 26px rgba(245,166,35,0.35));
}
.fx-intro .word i:nth-child(2) { animation-delay: .12s; }
.fx-intro .word i:nth-child(3) { animation-delay: .24s; }
.fx-intro .word i:nth-child(4) { animation-delay: .36s; }
@keyframes introLetter { to { opacity: 1; transform: none; } }
.fx-intro .line {
  width: 0; height: 1px;
  background: var(--gold-grad);
  animation: introLine .7s .45s ease forwards;
  box-shadow: 0 0 18px rgba(245,166,35,0.6);
}
@keyframes introLine { to { width: min(340px, 60vw); } }
.fx-intro .tag {
  font-family: var(--font-d); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  animation: introTag .5s .75s ease forwards;
}
@keyframes introTag { to { opacity: 1; } }

/* scroll progress */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--gold-grad);
  box-shadow: 0 0 12px rgba(245,166,35,0.7);
  z-index: 2000;
  pointer-events: none;
}

/* cursor glow (desktop) */
.fx-cursor {
  position: fixed; left: 0; top: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, rgba(245,166,35,0.03) 35%, transparent 65%);
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

/* particles + hero chart canvases */
.fx-particles {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}
.fx-chart {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 46%;
  pointer-events: none;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent, black 40%);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 40%);
  z-index: 0;
}
.hero-in, .ticker, .nav { position: relative; }
.hero-in { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .fx-intro, .fx-cursor, .fx-particles, .fx-chart { display: none !important; }
}

/* ============================================================
   PHOTO BACKGROUNDS (v5) — generated gold artwork
   url() resolves relative to this CSS file -> assets/img/*
   ============================================================ */

.hero.has-bg {
  background:
    linear-gradient(90deg, rgba(10,10,12,0.97) 0%, rgba(10,10,12,0.82) 42%, rgba(10,10,12,0.28) 78%, rgba(10,10,12,0.12) 100%),
    linear-gradient(180deg, rgba(10,10,12,0.35) 0%, transparent 30%, rgba(10,10,12,0.92) 96%),
    url('img/bg-hero.jpg') right center / cover no-repeat;
}
.hero.has-bg::before { opacity: 0.4; }      /* soften old radial glow over photo */
.hero.has-bg .fx-chart { opacity: 0.28; }   /* canvas candles play quieter over photo */

.sec-network {
  background:
    linear-gradient(180deg, rgba(10,10,12,0.93) 0%, rgba(10,10,12,0.82) 50%, rgba(10,10,12,0.95) 100%),
    url('img/bg-network.jpg') center / cover no-repeat;
}

.page-hero.has-bg-network {
  background:
    linear-gradient(180deg, rgba(10,10,12,0.72) 0%, rgba(10,10,12,0.88) 70%, var(--bg) 100%),
    url('img/bg-network.jpg') center / cover no-repeat;
}

.page-hero.has-bg-onair {
  background:
    linear-gradient(180deg, rgba(10,10,12,0.42) 0%, rgba(10,10,12,0.55) 55%, var(--bg) 96%),
    url('img/bg-onair.jpg') center 30% / cover no-repeat;
}

/* ============================================================
   FAQ MODAL — click a question, answer opens in a window
   ============================================================ */

.faq details[data-modal] summary::after { content: '+'; }
.faq details[data-modal] .faq-a { display: none; }   /* answer lives in the modal */

.faq-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(7,7,8,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.faq-modal.open { opacity: 1; visibility: visible; }

.faq-modal .box {
  position: relative;
  max-width: 640px; width: 100%;
  max-height: 82vh; overflow-y: auto;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(245,166,35,0.08) 0%, transparent 55%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 42px 40px 36px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 60px rgba(245,166,35,0.12);
  transform: translateY(22px) scale(0.96);
  transition: transform .32s cubic-bezier(0.2,0.9,0.3,1.1);
}
.faq-modal.open .box { transform: none; }

.faq-modal .kick {
  font-family: var(--font-d); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.faq-modal h3 {
  font-size: 1.35rem;
  margin-bottom: 18px;
  padding-right: 40px;
}
.faq-modal .body { color: var(--ink-2); font-size: 0.98rem; line-height: 1.75; }
.faq-modal .x {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-2);
  font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s;
}
.faq-modal .x:hover { color: var(--gold); border-color: var(--line); transform: rotate(90deg); }
.faq-modal .foot { margin-top: 28px; }
@media (max-width: 680px) {
  .faq-modal .box { padding: 32px 24px 28px; }
}

/* CTA band gets the rays too — premium closer */
.cta-band.has-bg {
  background:
    linear-gradient(90deg, rgba(19,19,23,0.96) 0%, rgba(19,19,23,0.86) 55%, rgba(19,19,23,0.55) 100%),
    url('img/bg-hero.jpg') right center / cover no-repeat;
}

/* tool-page heroes — right-lit artwork, dark left for text */
.page-hero.has-bg-bot,
.page-hero.has-bg-easy,
.page-hero.has-bg-ai {
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.page-hero.has-bg-bot {
  background-image:
    linear-gradient(90deg, rgba(10,10,12,0.97) 0%, rgba(10,10,12,0.75) 50%, rgba(10,10,12,0.2) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 98%),
    url('img/bg-bot.jpg');
}
.page-hero.has-bg-easy {
  background-image:
    linear-gradient(90deg, rgba(10,10,12,0.97) 0%, rgba(10,10,12,0.75) 50%, rgba(10,10,12,0.2) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 98%),
    url('img/bg-easy.jpg');
}
.page-hero.has-bg-ai {
  background-image:
    linear-gradient(90deg, rgba(10,10,12,0.97) 0%, rgba(10,10,12,0.75) 50%, rgba(10,10,12,0.2) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 98%),
    url('img/bg-ai.jpg');
}
.page-hero.has-bg-vip,
.page-hero.has-bg-copy,
.page-hero.has-bg-acad {
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.page-hero.has-bg-vip {
  background-image:
    linear-gradient(90deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.6) 45%, rgba(10,10,12,0.15) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 98%),
    url('img/bg-vip.jpg');
}
.page-hero.has-bg-copy {
  background-image:
    linear-gradient(90deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.6) 45%, rgba(10,10,12,0.15) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 98%),
    url('img/bg-copy.jpg');
}
.page-hero.has-bg-acad {
  background-image:
    linear-gradient(90deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.6) 45%, rgba(10,10,12,0.15) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg) 98%),
    url('img/bg-academy.jpg');
}

/* ladder section — golden staircase */
.sec-stairs {
  background:
    linear-gradient(90deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.8) 55%, rgba(10,10,12,0.45) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%),
    url('img/bg-stairs.jpg') right center / cover no-repeat;
}

/* team section — the three masked figures behind the cards (small + dim,
   so the cards stand ON the scene instead of fighting it) */
.sec-trio {
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10,10,12,0.9) 14%, rgba(10,10,12,0.93) 86%, var(--bg) 100%),
    url('img/bg-trio.jpg') center 12% / min(1100px, 100%) auto no-repeat;
}

/* testimonials — faint gold veins texture */
.sec-texture {
  background:
    linear-gradient(180deg, rgba(15,15,18,0.94) 0%, rgba(15,15,18,0.86) 60%, rgba(15,15,18,0.96) 100%),
    url('img/bg-texture.jpg') center / cover no-repeat;
}

/* ============================================================
   LADDER (шлях у BWG) + TEAM
   ============================================================ */

.ladder { margin-top: 54px; display: flex; flex-direction: column; gap: 12px; }
.lad {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 20px; align-items: center;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 20px 24px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.lad:hover { border-color: var(--line); transform: translateX(8px); box-shadow: 0 10px 34px rgba(0,0,0,0.35); }
.lad .lvl {
  font-family: var(--font-d); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--ink-3);
  border: 1px solid var(--line-soft); border-radius: 10px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.lad .nm b { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.lad .nm span { font-size: 0.85rem; color: var(--ink-2); }
.lad .price {
  font-family: var(--font-d); font-size: 0.92rem; font-weight: 800;
  white-space: nowrap;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lad.hot { border-color: var(--line); background: radial-gradient(120% 160% at 100% 0%, rgba(245,166,35,0.09) 0%, transparent 55%), var(--panel); }
.lad.hot .lvl { border-color: var(--line); color: var(--gold); }
.lad.locked { opacity: 0.68; }
.lad.locked .price { -webkit-text-fill-color: initial; background: none; color: var(--ink-3); }
.lad-note { margin-top: 18px; font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 680px) {
  /* keep the level badge on phones — without it the rows read as a wall of text */
  .lad { grid-template-columns: 30px 1fr auto; gap: 12px; padding: 14px 16px; align-items: start; }
  .lad .lvl { width: 30px; height: 30px; font-size: 0.55rem; border-radius: 8px; margin-top: 2px; }
  .lad .nm span { font-size: 0.8rem; }
}

/* ============================================================
   V3 — channel phone feed, duo product cards, balance banner,
   team photo cards, channel-post testimonials
   ============================================================ */

/* phone with auto-scrolling BWG channel */
.phone {
  max-width: 340px; margin-left: auto;
  border-radius: 34px;
  border: 1px solid rgba(245,166,35,0.25);
  background: linear-gradient(180deg, #16161B, #0E0E11);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 70px rgba(245,166,35,0.1);
  overflow: hidden;
}
.ch-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.025);
}
.ch-ava {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold-grad);
  color: #0A0A0C; font-family: var(--font-d); font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ch-name { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
.ch-name .ver { color: #6FB1FC; font-size: 0.8rem; }
.ch-sub { font-size: 0.74rem; color: var(--ink-3); }
.ch-feed { position: relative; }   /* full recording, no crop — the TG UI itself is the proof */
.ch-track { display: flex; flex-direction: column; gap: 12px; padding: 16px; animation: chscroll 22s linear infinite; }
.phone:hover .ch-track { animation-play-state: paused; }
@keyframes chscroll { to { transform: translateY(-50%); } }
/* real screen-recording of the BWG channel inside the phone */
.ch-video { width: 100%; height: auto; display: block; background: #0E0E11; }
.ch-post {
  background: #1B1B21;
  border: 1px solid var(--line-soft);
  border-radius: 6px 16px 16px 16px;
  padding: 13px 15px 10px;
  font-size: 0.83rem; color: var(--ink-2);
  line-height: 1.5;
}
.ch-post b { color: var(--ink); }
.ch-post .g { color: var(--gold); font-weight: 600; }
.ch-post .w { color: var(--green); font-weight: 700; }
.ch-post .meta {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 0.7rem; color: var(--ink-3);
}
.ch-post .meta span { display: inline-flex; gap: 4px; align-items: center; }

/* duo — the flagship offers (Signals + Copy + AI) */
.duo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
.duo {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start;
  border-radius: 22px;
  padding: 32px 28px 30px;
  border: 1px solid var(--line);
  background:
    radial-gradient(130% 140% at 100% 0%, rgba(245,166,35,0.12) 0%, transparent 55%),
    var(--panel);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.duo:hover { transform: translateY(-6px); box-shadow: 0 26px 70px rgba(0,0,0,0.5), 0 0 50px rgba(245,166,35,0.1); }
.duo.dark {
  border-color: rgba(255,255,255,0.14);
  background: radial-gradient(130% 140% at 100% 0%, rgba(255,255,255,0.06) 0%, transparent 55%), var(--panel);
}
.duo .badge {
  display: inline-block;
  font-family: var(--font-d); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #0A0A0C;
  background: var(--gold-grad);
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 20px;
}
.duo.dark .badge { background: linear-gradient(135deg, #E8E8EE, #B9B9C6); }
.duo h3 { font-size: 1.5rem; margin-bottom: 12px; }
.duo .who { font-size: 0.85rem; color: var(--gold); margin-bottom: 14px; }
.duo p { color: var(--ink-2); font-size: 0.95rem; }
.duo .res {
  margin: auto 0 22px;          /* pins results + button to the card bottom — all three cards align */
  padding: 16px 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  display: flex; gap: 18px;
  align-self: stretch;
}
.duo .res div { flex: 1 1 0; min-width: 0; }   /* two stats always side by side, same as cards 1–2 */
.duo p { margin-bottom: 22px; }
.duo .res div b {
  display: block;
  font-family: var(--font-d); font-size: 1.3rem; font-weight: 800;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.duo .res div span { font-size: 0.72rem; color: var(--ink-3); }
@media (max-width: 960px) { .duo-grid { grid-template-columns: 1fr; } }

/* ladder prices — hidden by default, ?prices=1 switches the variant on */
.lad .price { display: none; }
.show-prices .lad .price { display: block; }

/* balance banner — "this is NOT a payment to us" */
.balance-note {
  margin-top: 26px;
  border: 1px solid rgba(43,217,138,0.3);
  background:
    radial-gradient(100% 200% at 0% 0%, rgba(43,217,138,0.09) 0%, transparent 55%),
    var(--panel);
  border-radius: 18px;
  padding: 26px 30px;
  display: flex; gap: 18px; align-items: flex-start;
}
.balance-note .ic { font-size: 1.6rem; }
.balance-note b { display: block; margin-bottom: 6px; font-size: 1.02rem; }
.balance-note p { color: var(--ink-2); font-size: 0.92rem; }
/* the "NOT a payment" explainer only makes sense next to visible prices;
   the default (no-prices) variant shows the "free for partners" note instead */
.balance-note { display: none; }
.show-prices .balance-note { display: flex; }
.balance-note.free { display: flex; }
.show-prices .balance-note.free { display: none; }

/* team photo cards */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
.team {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.team:hover { border-color: var(--line); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(245,166,35,0.08); }
.team .photo {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: #0B0B0D;
}
.team .photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .5s ease;
}
.team:hover .photo img { transform: scale(1.045); }
.team .photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--panel) 100%);
}
.team .tx { padding: 6px 26px 30px; }
.team b { font-family: var(--font-d); font-size: 1.05rem; display: block; }
.team .role { color: var(--gold); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 8px 0 12px; display: block; }
.team p { font-size: 0.88rem; color: var(--ink-2); }
@media (max-width: 960px) { .team-grid { grid-template-columns: 1fr; } .team .photo { height: 380px; } }

/* brand logo image — transparent PNG; soft glow keeps the black
   mask-circle and dark "HUB" letters readable on the dark nav */
.brand img {
  height: 34px; width: auto; display: block;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.28)) drop-shadow(0 0 14px rgba(245,166,35,0.18));
}
@media (max-width: 680px) { .brand img { height: 28px; } }

/* live reviews strip — swipeable gallery of real screenshots */
.reviews-strip {
  display: flex; gap: 16px;
  margin-top: 46px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,166,35,0.4) transparent;
}
.reviews-strip::-webkit-scrollbar { height: 6px; }
.reviews-strip::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.35); border-radius: 3px; }
.reviews-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.rev {
  flex: 0 0 300px;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  transition: border-color .25s, transform .25s;
  background: var(--panel);
}
.rev:hover { border-color: var(--line); transform: translateY(-4px); }
.rev img { width: 100%; display: block; }
@media (max-width: 680px) { .rev { flex-basis: 260px; } }

/* big marquee variant — uniform cards drifting smoothly, pause on hover */
.reviews-strip.big { overflow: hidden; gap: 0; scrollbar-width: none; scroll-snap-type: none; }
.reviews-strip.big::-webkit-scrollbar { display: none; }
.rev-track {
  display: flex;
  width: max-content;
  animation: revmove 160s linear infinite;   /* slow, readable drift */
}
.reviews-strip.big:hover .rev-track,
.reviews-strip.big:active .rev-track { animation-play-state: paused; }
@keyframes revmove { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rev-track { animation: none; } }
.reviews-strip.big .rev {
  flex: 0 0 420px;
  margin-right: 16px;
  cursor: zoom-in;
}
.reviews-strip.big .rev img { width: 100%; height: auto; display: block; }
@media (max-width: 680px) { .reviews-strip.big .rev { flex-basis: 310px; } }
/* phones: marquee replaced by native swipe + JS drift (class set by app.js) */
.reviews-strip.big.swipe { overflow-x: auto; -webkit-overflow-scrolling: touch; cursor: grab; }
.reviews-strip.big.swipe.dragging { cursor: grabbing; }
.reviews-strip.big.swipe.dragging .rev { pointer-events: none; }
.reviews-strip.big.swipe .rev-track { animation: none; width: max-content; }
.rev-hint { margin-top: 18px; font-size: 0.78rem; color: var(--gold); opacity: .8; }
.rev-hint::before { content: '🔍 '; }

/* instrument walkthrough videos — the real instructions Golden sends */
.vid-wrap { max-width: 860px; margin: 46px auto 0; }
.vid-wrap.vert { max-width: 380px; }

/* tool-page hero — walkthrough video sits beside the copy */
.ph-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4.5vw, 70px); align-items: center; }
.ph-media video {
  width: 100%; display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 50px rgba(245,166,35,0.08);
}
.ph-media.vert { max-width: 300px; justify-self: center; }
.wrap .feat-grid + .cta-band { margin-top: 64px; }
@media (max-width: 900px) {
  .ph-cols { grid-template-columns: 1fr; gap: 34px; }
  .ph-media { max-width: 480px; }
  .ph-media.vert { max-width: 270px; justify-self: start; }
}
.vid-wrap video {
  width: 100%; display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 50px rgba(245,166,35,0.08);
}

/* embedded YouTube player (live streams page) */
.yt-wrap { max-width: 900px; margin: 46px auto 0; position: relative; aspect-ratio: 16 / 9; }
.yt-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 1px solid var(--line); border-radius: 18px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 50px rgba(245,166,35,0.08);
}

/* fullscreen lightbox for review screenshots */
.lightbox {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(6,6,8,0.92);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s;
  padding: 34px;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(92vw, 640px); max-height: 88vh;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 60px rgba(245,166,35,0.12);
}
.lightbox .x {
  position: absolute; top: 20px; right: 22px;
  background: none; border: 1px solid var(--line-soft); border-radius: 10px;
  width: 40px; height: 40px;
  color: var(--ink-2); font-size: 1.1rem; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lightbox .x:hover { color: var(--gold); border-color: var(--line); }

/* final CTA band — art on the right, copy anchored left so the composition
   reads intentional instead of floating between the figure and the edge */
.cta-band .cta-in { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-band.has-golden,
.cta-band.has-face { text-align: left; }
.cta-band.has-golden .cta-in,
.cta-band.has-face .cta-in { margin: 0; max-width: min(560px, 58%); padding-left: clamp(4px, 3vw, 44px); }
.cta-band.has-golden h2,
.cta-band.has-face h2 { margin: 0 0 16px; }
.cta-band.has-golden p,
.cta-band.has-face p { margin: 0 0 38px; }
.cta-band.has-golden {
  background-color: #0B0B0D;
  background-image:
    linear-gradient(90deg, rgba(14,14,17,0.96) 0%, rgba(14,14,17,0.6) 55%, rgba(14,14,17,0.05) 100%),
    url('img/cta-golden.jpg');
  background-position: right center;
  background-size: auto 100%;    /* full figure visible — head to waist, nothing cropped */
  background-repeat: no-repeat;
}
/* per-page team face via --face custom property (VIP=Black, Copy=Golden, Academy=White) */
.cta-band.has-face {
  background-color: #0B0B0D;
  background-image:
    linear-gradient(90deg, rgba(14,14,17,0.97) 0%, rgba(14,14,17,0.62) 55%, rgba(14,14,17,0.1) 100%),
    var(--face);
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
@media (max-width: 680px) {
  .cta-band.has-golden, .cta-band.has-face { text-align: center; }
  .cta-band.has-golden .cta-in, .cta-band.has-face .cta-in { margin: 0 auto; max-width: 100%; padding-left: 0; }
  .cta-band.has-golden h2, .cta-band.has-face h2 { margin: 0 auto 16px; }
  .cta-band.has-golden p, .cta-band.has-face p { margin: 0 auto 38px; }
  .cta-band.has-golden {
    background:
      linear-gradient(180deg, rgba(14,14,17,0.55) 0%, rgba(14,14,17,0.88) 70%),
      url('img/cta-golden.jpg') 72% center / cover no-repeat;
  }
  .cta-band.has-face {
    background:
      linear-gradient(180deg, rgba(14,14,17,0.6) 0%, rgba(14,14,17,0.9) 70%),
      var(--face) 72% center / cover no-repeat;
    background-color: #0B0B0D;
  }
}

/* channel-post style result cards (replaces chat-bubble testimonials) */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
.post-card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 6px 18px 18px 18px;
  padding: 20px 22px 16px;
  transition: border-color .3s, transform .3s;
}
.post-card:hover { border-color: var(--line); transform: translateY(-4px); }
.post-card .src { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.post-card .src .ch-ava { width: 34px; height: 34px; font-size: 0.75rem; }
.post-card .src b { font-size: 0.85rem; }
.post-card .src span { font-size: 0.7rem; color: var(--ink-3); display: block; }
.post-card .big-num {
  font-family: var(--font-d); font-size: 1.9rem; font-weight: 800;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin: 6px 0 8px;
}
.post-card .big-num.green { background: linear-gradient(135deg, #2BD98A, #7FF0BE); -webkit-background-clip: text; background-clip: text; }
.post-card p { font-size: 0.88rem; color: var(--ink-2); }
.post-card .meta { display: flex; gap: 14px; margin-top: 14px; font-size: 0.72rem; color: var(--ink-3); }
@media (max-width: 960px) { .posts-grid { grid-template-columns: 1fr; } }

/* --- tool pager (prev / next) --- */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 26px;
}
.pager a {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: var(--panel);
  transition: border-color .25s, transform .25s;
}
.pager a:hover { border-color: var(--line); transform: translateY(-3px); }
.pager .dir { font-family: var(--font-d); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 8px; }
.pager .nm { font-weight: 700; font-size: 1.02rem; }
.pager a.next { text-align: right; }
@media (max-width: 680px) { .pager { grid-template-columns: 1fr; } }

/* ---------- responsive (cinematic) ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-mark { display: none; }
}

/* tablets: the longer "What we do" nav label needs breathing room —
   drop the two anchor links (they live in the footer anyway) */
@media (max-width: 900px) and (min-width: 681px) {
  .nav-links { gap: 16px; }
  .nav-links > a[href$="#results"], .nav-links > a[href$="#faq"] { display: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .tools-grid, .vs-grid { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .tg-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  section { padding: 60px 0; }
  body { font-size: 16px; }
  .hero h1 { font-size: clamp(1.8rem, 8.6vw, 2.4rem); }
  .hero h1 br { display: none; }             /* let lines wrap naturally on narrow screens */
  .page-hero h1 { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  .beams { display: none; }                  /* blur(60px) is a mobile GPU killer */
  .fx-chart { display: none; }               /* canvas candles off on phones */
  .sec-title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .hero.has-bg {
    background:
      linear-gradient(180deg, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0.66) 45%, rgba(10,10,12,0.97) 100%),
      url('img/bg-hero-mobile.jpg') center top / cover no-repeat;   /* vertical artwork for phones */
  }
  .page-hero.has-bg-bot, .page-hero.has-bg-easy, .page-hero.has-bg-ai,
  .page-hero.has-bg-vip, .page-hero.has-bg-copy, .page-hero.has-bg-acad {
    background-image:
      linear-gradient(180deg, rgba(10,10,12,0.86) 0%, rgba(10,10,12,0.76) 55%, var(--bg) 100%),
      var(--tool-bg, none);
    background-position: center;
  }
  .page-hero.has-bg-bot  { --tool-bg: url('img/bg-bot.jpg'); }
  .page-hero.has-bg-easy { --tool-bg: url('img/bg-easy.jpg'); }
  .page-hero.has-bg-ai   { --tool-bg: url('img/bg-ai.jpg'); }
  .page-hero.has-bg-vip  { --tool-bg: url('img/bg-vip.jpg'); }
  .page-hero.has-bg-copy { --tool-bg: url('img/bg-copy.jpg'); }
  .page-hero.has-bg-acad { --tool-bg: url('img/bg-academy.jpg'); }
  .hero-cta { gap: 12px; }
  .hero-cta .btn { width: 100%; }
  .hero-cta .pulse-wrap { display: block; width: 100%; }
  .trust { gap: 12px 18px; margin-top: 24px; }
  .term-body { min-height: 240px; font-size: 0.78rem; }
  .phone { margin: 0 auto; max-width: 310px; }
  .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.35; }
  .page-hero { padding: 128px 0 48px; }
  .nav-links {
    position: fixed; top: 66px; left: 0; right: 0;
    background: rgba(10,10,12,0.97);
    border-bottom: 1px solid var(--line-soft);
    flex-direction: column; align-items: flex-start;
    padding: 22px 24px;
    gap: 18px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .burger { display: block; }
  .steps, .feat-grid, .feat-grid.two, .numbers { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding-top: 84px; min-height: auto; }
  .hero p.lead { font-size: 0.95rem; margin-top: 16px; }
  .hero-cta { margin-top: 26px; }
  .hero-note { margin-top: 14px; }
  .hero .trust { margin-top: 18px; }
  .cta-band { padding: 54px 22px; }
  /* v3 blocks on narrow phones */
  .duo { padding: 26px 20px 24px; }
  .duo h3 { font-size: 1.3rem; }
  .duo .res { gap: 16px 22px; padding: 14px 16px; }
  .balance-note { padding: 20px 18px; }
  .team .photo { height: 340px; }
  .lad .nm b { font-size: 0.94rem; }
  .lad .price { font-size: 0.84rem; }
  .eco-node { padding: 22px 18px; }
  .post-card .big-num { font-size: 1.6rem; }
}