/* ════════════════════════════════════════════════════════
   1xBot — landing page (signed-out visitors)
   Uses the tokens from styles.css.
   ════════════════════════════════════════════════════════ */
#landing { position: relative; overflow-x: hidden; }
.l-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.l-nav { position: sticky; top: 0; z-index: 80; background: rgba(7,9,18,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.l-nav .l-wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.l-links { display: flex; gap: 4px; margin-inline-start: 10px; }
.l-links button { background: none; border: none; color: var(--dim); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 9px; } .l-links button:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.l-nav-cta { margin-inline-start: auto; display: flex; gap: 8px; }

/* ── Hero ── */
.l-hero { position: relative; padding: 64px 0 40px; }
.l-hero::before { content: ''; position: absolute; inset: -66px 0 0; pointer-events: none; z-index: -1;
  background: radial-gradient(55% 60% at 78% 38%, rgba(139,123,255,0.30), transparent 70%), radial-gradient(40% 50% at 12% 10%, rgba(62,203,255,0.14), transparent 70%); }
.l-hero .l-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.l-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 30px; border: 1px solid var(--brand-line); background: var(--brand-soft); font-size: 12.5px; font-weight: 600; margin-bottom: 20px; }
.l-eyebrow .dot { color: var(--pos); }
.l-h1 { font-family: var(--display); font-size: clamp(38px, 5.2vw, 66px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; margin-bottom: 18px; }
.l-h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-lead { font-size: 17.5px; color: var(--dim); max-width: 520px; margin-bottom: 28px; }
.l-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.l-cta .btn { padding: 14px 22px; font-size: 15px; border-radius: 13px; }
.l-trust { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--mute); } .l-trust span { display: inline-flex; align-items: center; gap: 7px; } .l-trust .ic { width: 15px; height: 15px; color: var(--pos); }

/* ── 3D scene ── */
.scene { position: relative; height: 540px; perspective: 1500px; perspective-origin: 50% 40%; }
.stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(9deg + var(--rx, 0deg))) rotateY(calc(-19deg + var(--ry, 0deg))); transition: transform .25s ease-out; }
.floor { position: absolute; left: -20%; right: -20%; bottom: -70px; height: 420px; transform: rotateX(78deg) translateZ(-140px); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(139,123,255,0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(139,123,255,0.35) 1px, transparent 1px); background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 60%, #000 10%, transparent 75%); opacity: .55; }
.orb { position: absolute; width: 260px; height: 260px; right: 4%; top: 2%; border-radius: 50%; transform: translateZ(-120px); filter: blur(6px);
  background: radial-gradient(circle at 32% 30%, #b9afff, #6a59ff 45%, #2a1f7a 75%, transparent 76%); opacity: .55; animation: bob 9s ease-in-out infinite; }
.mock { position: absolute; left: 6%; right: 8%; top: 56px; bottom: 70px; border-radius: 22px; border: 1px solid var(--line2); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)), #0d1120; box-shadow: 0 60px 120px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(139,123,255,0.18), 0 30px 80px -30px rgba(139,123,255,0.55); display: grid; grid-template-columns: 62px 1fr; }
.mock-rail { border-inline-end: 1px solid var(--line); padding: 14px 0; display: grid; gap: 12px; justify-items: center; align-content: start; background: rgba(0,0,0,0.25); }
.mock-rail i { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.06); } .mock-rail i:first-child { background: var(--grad); } .mock-rail i:nth-child(3) { background: var(--brand-soft); border: 1px solid var(--brand-line); }
.mock-main { padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.mock-top { display: flex; justify-content: space-between; align-items: center; } .mock-top b { font-family: var(--display); font-size: 15px; } .mock-top span { font-size: 10px; color: var(--mute); }
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-tile { padding: 9px 10px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); } .mock-tile small { display: block; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .mock-tile b { font-family: var(--display); font-size: 17px; }
.mock-chart { border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); padding: 10px 12px 6px; } .mock-chart small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .mock-chart svg { width: 100%; height: 86px; display: block; }
.mock-rows { display: grid; gap: 6px; } .mock-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 11px; color: var(--dim); background: rgba(255,255,255,0.025); }
.mock-row .bar { flex: 1; height: 5px; border-radius: 5px; background: var(--panel3); overflow: hidden; } .mock-row .bar i { display: block; height: 100%; background: var(--grad); border-radius: 5px; }
.float { position: absolute; border-radius: 16px; border: 1px solid var(--line2); background: rgba(21,26,45,0.92); backdrop-filter: blur(8px); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.85); padding: 13px 15px; animation: bob 7s ease-in-out infinite; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.f-signal { right: -2%; top: 26px; width: 280px; transform: translateZ(110px); border-color: var(--brand-line); }
.f-signal .teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 12.5px; margin: 8px 0; } .f-signal .teams b { font-family: var(--display); font-size: 18px; white-space: nowrap; flex-shrink: 0; }
.f-signal .teams span { display: flex; align-items: center; gap: 6px; min-width: 0; } .f-signal img { width: 22px; height: 22px; object-fit: contain; }
.f-signal .pick { font-size: 11px; color: var(--brand); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.f-signal .conf { margin: 8px 0 0; }
.f-odds { left: -3%; top: 44%; transform: translateZ(150px); animation-delay: -2s; display: flex; align-items: center; gap: 12px; }
.f-odds small { display: block; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; } .f-odds b { font-family: var(--display); font-size: 22px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-mode { right: 6%; bottom: 20px; transform: translateZ(90px); animation-delay: -4s; display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; }
.f-mode .pillbox { display: flex; padding: 3px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); } .f-mode .pillbox span { padding: 5px 10px; border-radius: 7px; font-size: 11px; color: var(--mute); } .f-mode .pillbox span.on { background: var(--pos-soft); color: var(--pos); border: 1px solid var(--pos-line); }
.f-live { left: 10%; top: 0; transform: translateZ(60px); animation-delay: -1s; padding: 8px 12px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* ── Sections ── */
.l-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.l-strip .l-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.l-stat { padding: 24px 18px; text-align: center; border-inline-start: 1px solid var(--line); } .l-stat:first-child { border-inline-start: none; }
.l-stat b { display: block; font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; } .l-stat span { font-size: 13px; color: var(--mute); }
.l-sec { padding: 84px 0 0; }
.l-head { max-width: 640px; margin: 0 auto 38px; text-align: center; }
.l-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.l-h2 { font-family: var(--display); font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px; }
.l-head p { color: var(--dim); font-size: 16px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.shown { opacity: 1; transform: none; }

.l-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.l-step { padding: 26px; position: relative; counter-increment: step; }
.l-step::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: #070912; font-family: var(--display); font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.l-step h3, .l-feat h3 { font-family: var(--display); font-size: 18px; margin-bottom: 6px; letter-spacing: -0.01em; } .l-step p, .l-feat p { color: var(--dim); font-size: 14px; }
.l-step .tag { position: absolute; top: 26px; inset-inline-end: 26px; }

.l-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; perspective: 1200px; }
.l-feat { padding: 24px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; transform-style: preserve-3d; }
.l-feat:hover { transform: translateY(-6px) rotateX(4deg); border-color: var(--brand-line); box-shadow: 0 30px 60px -30px rgba(139,123,255,0.7); }
.l-feat .feat-ic { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 16px; } .l-feat .feat-ic .ic { width: 21px; height: 21px; }
.l-feat .badge { margin-inline-start: 8px; vertical-align: middle; }

.l-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.l-preview .signal { animation: none; } .l-lock { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg2); border: 1px dashed var(--brand-line); border-radius: 13px; padding: 11px 13px; font-size: 13px; color: var(--dim); }
.l-lock b { filter: blur(5px); user-select: none; color: var(--text); }
.l-note { text-align: center; color: var(--mute); font-size: 13px; margin-top: 16px; }

.l-strats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.l-strat { padding: 15px 16px; border-radius: 15px; border: 1px solid var(--line2); background: var(--panel); } .l-strat b { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 15px; margin-bottom: 4px; } .l-strat b .badge { margin-inline-start: auto; } .l-strat span { font-size: 13px; color: var(--dim); }

.l-faq { max-width: 800px; margin: 0 auto; display: grid; gap: 10px; }
.l-faq details { border: 1px solid var(--line2); border-radius: 15px; background: var(--panel); padding: 0 20px; }
.l-faq summary { cursor: pointer; list-style: none; padding: 17px 0; font-weight: 600; font-size: 15.5px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: '+'; font-family: var(--display); font-size: 22px; color: var(--brand); transition: transform .2s; } .l-faq details[open] summary::after { transform: rotate(45deg); }
.l-faq p { color: var(--dim); padding: 0 0 18px; font-size: 14.5px; }

.l-final { margin: 84px 0 0; } .l-final .card { text-align: center; padding: 54px 24px; border-color: var(--brand-line); background: radial-gradient(60% 120% at 50% 0%, rgba(139,123,255,0.28), transparent 70%), var(--panel); }
.l-final .l-cta { justify-content: center; margin: 22px 0 0; }
.l-foot { margin-top: 70px; border-top: 1px solid var(--line); padding: 30px 0 46px; font-size: 13px; color: var(--mute); }
.l-foot .l-wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .l-foot p { max-width: 640px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--mute); font-weight: 600; font-size: 13px; margin-bottom: 22px; } .back-link:hover { color: var(--text); }

@media (max-width: 980px) {
  .l-hero .l-wrap { grid-template-columns: 1fr; } .l-links { display: none; }
  .scene { height: 440px; max-width: 560px; margin: 0 auto; width: 100%; }
  .l-steps, .l-feats, .l-preview { grid-template-columns: 1fr; } .l-strip .l-wrap { grid-template-columns: 1fr 1fr; } .l-stat:nth-child(3) { border-inline-start: none; } .l-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) { .scene { height: 360px; } .f-odds, .f-live { display: none; } .f-signal { width: 210px; right: 0; } .l-hero { padding-top: 36px; } .l-nav-cta .btn.ghost { display: none; } }
@media (prefers-reduced-motion: reduce) { .float, .orb { animation: none; } .stage { transition: none; } .reveal { opacity: 1; transform: none; transition: none; } }
.l-links a { color: var(--dim); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 9px; text-decoration: none; } .l-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); text-decoration: none; }
a.l-strat { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; } a.l-strat:hover { border-color: var(--brand-line); transform: translateY(-2px); text-decoration: none; }
.l-note a { font-weight: 600; }