/* ============== DESIGN SYSTEM (TB-quality) ============== */
:root {
  --gold: #FFD700;
  --gold-soft: #FFEC8B;
  --orange: #FF5E00;
  --red: #FF2E5C;
  --bg-deep: #050510;
  --bg-mid: #0c0c1a;
  --emerald: #00FFB3;
  --cyan: #00D4FF;
  --purple: #A855F7;
  --text: rgba(255,255,255,.95);
  --text-d: rgba(255,255,255,.65);
  --text-m: rgba(255,255,255,.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}
button, a, input, textarea, select {
  font-family: inherit;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
button:active, a:active { transform: scale(.98); transition: all .12s cubic-bezier(.4,0,.2,1); }
button { cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
.gold-text {
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============== TOP NAVIGATION ============== */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(5,5,16,.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,215,0,.08);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.topnav.hidden { transform: translateY(-110%); }
.topnav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.topnav-logo .mark {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  filter: drop-shadow(0 4px 12px rgba(255,215,0,.4));
}
.topnav-logo .mark img {
  width: 100%; height: 100%; object-fit: contain;
}
.topnav-logo .name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 15px;
  letter-spacing: .04em;
  color: #fff;
}
.topnav-logo .name span { color: #FFD700; }

.topnav-links {
  display: flex; gap: 22px;
  font-size: 13px; font-weight: 600;
}
.topnav-links a {
  color: rgba(255,255,255,.7);
  transition: color .2s;
}
.topnav-links a:hover { color: #FFD700; }

.topnav-cta {
  display: flex; gap: 8px;
}
.topnav-cta .btn-login {
  padding: 8px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.topnav-cta .btn-login:hover {
  border-color: rgba(255,215,0,.4);
}
.topnav-cta .btn-register {
  padding: 8px 18px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255,215,0,.35);
}
.topnav-cta .btn-register:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,215,0,.5);
}

/* ============== MOBILE HAMBURGER + DRAWER ============== */
.topnav-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 12px;
  cursor: pointer;
  margin-left: 8px;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.topnav-burger:hover, .topnav-burger.open {
  background: rgba(255,215,0,.12);
  border-color: rgba(255,215,0,.5);
}
.topnav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: #FFD700;
  border-radius: 2px;
  position: relative;
  transition: transform .25s, opacity .25s;
}
.topnav-burger span::before,
.topnav-burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px;
  background: #FFD700; border-radius: 2px;
  transition: transform .25s, top .25s;
}
.topnav-burger span::before { top: -6px; }
.topnav-burger span::after  { top:  6px; }
.topnav-burger.open span { background: transparent; }
.topnav-burger.open span::before { top: 0; transform: rotate(45deg); }
.topnav-burger.open span::after  { top: 0; transform: rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px);
  background: rgba(8,8,18,.96);
  backdrop-filter: blur(28px) saturate(1.4);
  border-left: 1px solid rgba(255,215,0,.18);
  z-index: 9998;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
  padding: 84px 22px 28px;
  gap: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 9997;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.mobile-drawer-overlay.show { opacity: 1; pointer-events: auto; }
.mobile-drawer .md-section-title {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,215,0,.7);
  padding: 18px 8px 8px;
}
.mobile-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s;
}
.mobile-drawer a:hover, .mobile-drawer a:active {
  background: rgba(255,215,0,.08);
  color: #FFD700;
  transform: translateX(4px);
}
.mobile-drawer a .md-ico {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
}
.mobile-drawer a.md-cta {
  margin-top: 8px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  font-weight: 800;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(255,215,0,.35);
}
.mobile-drawer a.md-cta:hover { transform: translateY(-1px); color: #06060a; }
.mobile-drawer a.md-login {
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,.14);
  justify-content: center;
}
.mobile-drawer .md-footer {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.4);
  text-align: center;
}
.mobile-drawer .md-footer .live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: center;
  padding: 6px 12px;
  background: rgba(0,255,179,.08);
  border: 1px solid rgba(0,255,179,.25);
  border-radius: 999px;
  color: #00FFB3;
  font-weight: 700; font-size: 11px;
}
.mobile-drawer .md-footer .live-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00FFB3;
  box-shadow: 0 0 8px rgba(0,255,179,.7);
  animation: livePulse 1.6s infinite;
}

@media (max-width: 800px) {
  .topnav-links { display: none; }
  .topnav { padding: 10px 14px; }
  .topnav-burger { display: inline-flex; }
}
@media (max-width: 480px) {
  .topnav-cta .btn-login { display: none; }
  .topnav-cta .btn-register { padding: 8px 14px; font-size: 11px; }
}

/* ============== HERO SECTION ============== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 110px 20px 60px;
}
.hero-atmosphere {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #050510 0%, #0c0c1a 50%, #1a0c0a 100%);
}
.hero-atmosphere::before, .hero-atmosphere::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
}
.hero-atmosphere::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 25%, rgba(255,215,0,.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(255,94,0,.14), transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(168,85,247,.08), transparent 70%);
  animation: atmosShift 18s ease-in-out infinite;
}
.hero-atmosphere::after {
  background:
    radial-gradient(circle at 90% 10%, rgba(0,212,255,.08), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(0,255,179,.06), transparent 50%);
  animation: atmosShift 22s ease-in-out infinite reverse;
}
@keyframes atmosShift {
  0%,100% { transform: scale(1) translate(0,0); opacity: 1; }
  33% { transform: scale(1.1) translate(20px,-10px); opacity: .85; }
  66% { transform: scale(.95) translate(-15px,15px); opacity: .95; }
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,215,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-float {
  position: absolute;
  font-size: 28px;
  opacity: .25;
  animation: floatBob var(--dur, 12s) ease-in-out infinite;
  filter: drop-shadow(0 4px 20px rgba(255,215,0,.3));
}
@keyframes floatBob {
  0%,100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(20px,-30px) rotate(15deg); }
  50% { transform: translate(-10px,-50px) rotate(-10deg); }
  75% { transform: translate(-30px,-20px) rotate(20deg); }
}
.hero-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255,215,0,.04) 50%, transparent 100%);
  animation: scanMove 4s linear infinite;
}
@keyframes scanMove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.hero-content {
  position: relative; z-index: 10;
  max-width: 1200px; width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}

.hero-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,94,0,.08));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,215,0,.3);
  font-size: 12px; font-weight: 700;
  color: rgba(255,236,139,.95);
  letter-spacing: .05em;
  animation: badgeFloat 4s ease-in-out infinite;
  box-shadow: 0 8px 30px rgba(255,215,0,.15);
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.hero-badge .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00FFB3;
  box-shadow: 0 0 0 0 rgba(0,255,179,.7), 0 0 12px rgba(0,255,179,.6);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,179,.7), 0 0 12px rgba(0,255,179,.6); }
  70% { box-shadow: 0 0 0 10px rgba(0,255,179,0), 0 0 14px rgba(0,255,179,.8); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,179,0), 0 0 12px rgba(0,255,179,.6); }
}

.hero-h1 {
  font-size: clamp(52px, 10vw, 128px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.hero-h1 .line {
  display: block;
  background: linear-gradient(135deg, #fff 0%, #FFD700 40%, #FF5E00 70%, #FFEC8B 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 6s linear infinite;
  filter: drop-shadow(0 0 60px rgba(255,215,0,.3));
}
.hero-h1 .line.alt {
  background: linear-gradient(135deg, #FFD700 0%, #FF5E00 50%, #FF2E5C 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 6s linear infinite reverse;
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.hero-tag {
  font-size: clamp(15px, 2vw, 19px);
  color: var(--text-d);
  max-width: 640px;
  line-height: 1.55;
  font-weight: 400;
}
.hero-tag b { color: var(--gold); font-weight: 700; }

.hero-cta {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 12px;
}

/* ============== TIPSPORT WIN PUSH NOTIFICATION ============== */
.hero-win-alert {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px auto 6px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(38,38,40,0.94) 0%, rgba(20,20,22,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.5),
    0 0 24px rgba(255,160,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  transition: transform .3s cubic-bezier(.16,1.3,.3,1), box-shadow .3s, filter .3s;
  animation: hwaIntro .8s cubic-bezier(.16,1,.3,1) .4s backwards, hwaPulseBox 4s cubic-bezier(.4,0,.6,1) 1.4s infinite;
  cursor: pointer;
  max-width: 460px;
  width: max-content;
  min-width: 320px;
}
@keyframes hwaIntro {
  from { opacity: 0; transform: translateY(-12px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hwaPulseBox {
  /* Klidný heartbeat: tap-tap → dlouhá pauza. Jemná zelená záře po obvodu. */
  0%   { box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 16px rgba(0,200,140,0.14), 0 0 0 0 rgba(0,255,179,0), inset 0 1px 0 rgba(255,255,255,0.06); }
  5%   { box-shadow: 0 14px 42px rgba(0,0,0,0.55), 0 0 26px rgba(0,255,179,0.32), 0 0 0 1px rgba(0,255,179,0.22), inset 0 1px 0 rgba(255,255,255,0.09); }
  10%  { box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 18px rgba(0,210,150,0.18), 0 0 0 0 rgba(0,255,179,0), inset 0 1px 0 rgba(255,255,255,0.07); }
  15%  { box-shadow: 0 14px 42px rgba(0,0,0,0.55), 0 0 26px rgba(0,255,179,0.32), 0 0 0 1px rgba(0,255,179,0.22), inset 0 1px 0 rgba(255,255,255,0.09); }
  22%  { box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 18px rgba(0,210,150,0.16), 0 0 0 0 rgba(0,255,179,0), inset 0 1px 0 rgba(255,255,255,0.06); }
  100% { box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 16px rgba(0,200,140,0.14), 0 0 0 0 rgba(0,255,179,0), inset 0 1px 0 rgba(255,255,255,0.06); }
}
.hero-win-alert::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,160,0,.10) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hero-win-alert:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.08);
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 36px rgba(255,160,0,0.35);
}
.hero-win-alert:hover::before { transform: translateX(100%); }

.hwa-app-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.hwa-app-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hwa-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.hwa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hwa-app-name {
  color: rgba(255,255,255,0.7);
}

.hwa-time {
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  margin-left: auto;
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 11.5px;
}

.hwa-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-top: 2px;
}

.hwa-body {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
  margin-top: 1px;
}

@media (max-width: 720px) {
  .hero-win-alert {
    padding: 10px 12px;
    gap: 10px;
    max-width: calc(100vw - 32px);
    min-width: 0;
    margin-top: 14px;
  }
  .hwa-app-icon { width: 36px; height: 36px; border-radius: 8px; }
  .hwa-header { font-size: 10.5px; }
  .hwa-title { font-size: 13px; }
  .hwa-body { font-size: 12px; }
}



.hwa-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px auto 6px;
  isolation: isolate;
}
.hwa-wrap .hero-win-alert {
  margin: 0;
  animation:
    hwaIntro .8s cubic-bezier(.16,1,.3,1) .4s backwards,
    hwaPulseBox 4s cubic-bezier(.4,0,.6,1) 1.4s infinite;
}

.hwa-hint {
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  color: #FFD600;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  opacity: 0;
  animation:
    hwaHintIntro 1s cubic-bezier(.16,1,.3,1) 1.6s forwards,
    hwaHintBreathe 4.2s ease-in-out 2.6s infinite;
  white-space: nowrap;
}
@keyframes hwaHintIntro {
  0%   { opacity: 0; transform: translate(8px, -50%) rotate(-2deg); }
  100% { opacity: 1; transform: translate(0, -50%) rotate(0deg); }
}
@keyframes hwaHintBreathe {
  0%, 100% { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)); transform: translate(0, -50%) rotate(0deg); }
  50%      { filter: drop-shadow(0 2px 10px rgba(255,214,0,0.35)); transform: translate(-1.5px, -50%) rotate(-0.5deg); }
}

.hwa-hint-text {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  color: #FFD600;
  text-shadow: 0 0 10px rgba(255,214,0,0.35);
  white-space: nowrap;
  letter-spacing: 0.005em;
  align-self: flex-start;
  margin-top: -28px;
}

.hwa-hint-arrow {
  width: 56px;
  height: 56px;
  color: #FFD600;
  flex-shrink: 0;
  margin-right: -8px;
  filter: drop-shadow(0 0 10px rgba(255,214,0,0.4));
}
.hwa-hint-arrow path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: hwaHintDraw 1.4s cubic-bezier(.7,0,.3,1) 1.2s forwards;
}
@keyframes hwaHintDraw {
  to { stroke-dashoffset: 0; }
}



@media (max-width: 900px) {
  .hwa-hint {
    position: static;
    transform: none;
    margin: 8px auto 0;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
    white-space: normal;
  }
  .hwa-hint-text {
    font-size: 22px;
    transform: rotate(-3deg);
    transform-origin: left center;
    margin-top: 18px;
    align-self: auto;
  }
  .hwa-hint-arrow {
    width: 46px; height: 46px;
    margin-top: -2px;
    margin-left: -2px;
    transform: scaleX(1) rotate(-12deg);
  }
}
@media (max-width: 900px) {
  @keyframes hwaHintIntro {
    0%   { opacity: 0; transform: translateY(-6px) rotate(-2deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
  }
  @keyframes hwaHintBreathe {
    0%, 100% { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)); transform: translateY(0) rotate(0deg); }
    50%      { filter: drop-shadow(0 2px 10px rgba(255,214,0,0.35)); transform: translateY(-1.5px) rotate(-0.5deg); }
  }
}

/* ============== HERO TODAY BANNER ============== */
.hero-today {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 16px auto 0;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(255,193,7,0.12) 0%, rgba(255,140,0,0.08) 100%);
  border: 1px solid rgba(255,193,7,0.32);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255,193,7,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  transition: transform .3s cubic-bezier(.16,1.3,.3,1), box-shadow .3s, filter .3s;
  max-width: max-content;
}
.hero-today::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,224,102,.16) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hero-today:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.08);
  box-shadow: 0 12px 30px rgba(255,193,7,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
}
.hero-today:hover::before { transform: translateX(100%); }

.hero-today-bolt {
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(255,193,7,0.7));
  animation: todayBolt 2.2s ease-in-out infinite;
}
@keyframes todayBolt {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2) rotate(-6deg); opacity: 0.85; }
}
.hero-today-text {
  flex: 1;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.005em;
  line-height: 1.35;
}
.hero-today-text b {
  color: #FFC107;
  font-weight: 900;
}
.hero-today-link {
  font-size: 12px;
  font-weight: 800;
  color: #2AABEE;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .hero-today {
    margin: 14px 24px 0;
    padding: 9px 14px;
    gap: 10px;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .hero-today-bolt { font-size: 16px; }
  .hero-today-text { font-size: 12px; flex: 1 1 100%; order: 2; }
  .hero-today-link { font-size: 11px; flex: 1 1 100%; order: 3; text-align: center; }
}

.btn-3d {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 32px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,.55);
  font-size: 15px; font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer; user-select: none;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.16,1.3,.3,1), box-shadow .3s, filter .3s;
  white-space: nowrap;
}
.btn-3d.primary {
  background: linear-gradient(135deg, #FFD700 0%, #FF5E00 100%);
  color: #0a0a14;
  border-color: rgba(0,0,0,.65);
  box-shadow: 0 6px 18px rgba(255,215,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-3d.primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.btn-3d.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px rgba(255,215,0,.42), inset 0 1px 0 rgba(255,255,255,.45);
  filter: brightness(1.06);
}
.btn-3d.primary:hover::before { transform: translateX(100%); }

/* HERO TG button — UNIKÁTNÍ subscription-card style */
/* HERO CTA — text kompaktni (mensi, ne rozteklej) */
.btn-3d.primary[data-track="hero-tg"] .btn-text,
.btn-3d.ebook-cta .btn-text,
.btn-3d.pricing-cta .btn-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.015em;
  flex: 1;
  text-align: center;
  line-height: 1.1;
}
@media (max-width: 720px) {
  .btn-3d.primary[data-track="hero-tg"] .btn-text,
  .btn-3d.ebook-cta .btn-text,
  .btn-3d.pricing-cta .btn-text {
    font-size: 12.5px;
  }
}

/* HERO EBOOK button — premium orange-gold (book vibe) */
.btn-3d.ebook-cta {
  position: relative;
  font-size: 13px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #FFE066 0%, #FFA000 50%, #FF5E00 100%);
  color: #14110a;
  border-color: rgba(0,0,0,.6);
  box-shadow:
    0 6px 20px rgba(255,140,0,.32),
    inset 0 1px 0 rgba(255,255,255,.4);
  letter-spacing: .01em;
  gap: 7px;
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}
.btn-3d.ebook-cta .ebook-icon {
  width: 16px; height: 16px;
  fill: #14110a;
  filter: drop-shadow(0 2px 2px rgba(255,255,255,.25));
  flex-shrink: 0;
  transition: transform .5s cubic-bezier(.16,1.3,.3,1);
}
.btn-3d.ebook-cta:hover .ebook-icon {
  transform: rotateY(180deg) scale(1.15);
}
.btn-3d.ebook-cta .ebook-glow {
  position: absolute;
  pointer-events: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);
  left: 22px; top: 50%;
  transform: translateY(-50%) scale(0.8);
  animation: ebookGlowPulse 2.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes ebookGlowPulse {
  0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(0.8); }
  50%      { opacity: 0.7; transform: translateY(-50%) scale(1.2); }
}
.btn-3d.ebook-cta:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
  box-shadow:
    0 10px 28px rgba(255,140,0,.45),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-3d.ebook-cta .ebook-arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.btn-3d.ebook-cta:hover .ebook-arrow {
  transform: translateY(3px);
}
@keyframes ebookPulseGold {
  0%, 100% {
    box-shadow:
      0 10px 40px rgba(255,140,0,.5),
      0 0 0 0 rgba(255,193,7,.6),
      inset 0 2px 0 rgba(255,255,255,.5),
      inset 0 -2px 0 rgba(0,0,0,.18);
  }
  50% {
    box-shadow:
      0 14px 50px rgba(255,140,0,.7),
      0 0 0 12px rgba(255,193,7,0),
      inset 0 2px 0 rgba(255,255,255,.55),
      inset 0 -2px 0 rgba(0,0,0,.18);
  }
}

/* HERO PRICING button — premium burgundy/crimson red (VIP exclusive feel) */
.btn-3d.pricing-cta {
  position: relative;
  font-size: 13px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #FF1744 0%, #C2185B 45%, #8E0000 100%);
  color: #fff;
  border-color: rgba(0,0,0,.7);
  box-shadow:
    0 6px 20px rgba(255,23,68,.32),
    inset 0 1px 0 rgba(255,255,255,.28);
  letter-spacing: .01em;
  gap: 7px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.btn-3d.pricing-cta svg {
  width: 16px; height: 16px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
  flex-shrink: 0;
  transition: transform .55s cubic-bezier(.16,1.3,.3,1);
}
.btn-3d.pricing-cta:hover svg {
  transform: rotateY(180deg) scale(1.15);
}
.btn-3d.pricing-cta:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 10px 28px rgba(255,23,68,.48),
    inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-3d.pricing-cta .pricing-arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.btn-3d.pricing-cta:hover .pricing-arrow {
  transform: translateY(3px);
}
@keyframes pricingPulseRed {
  0%, 100% {
    box-shadow:
      0 10px 40px rgba(255,23,68,.5),
      0 0 0 0 rgba(194,24,91,.6),
      inset 0 2px 0 rgba(255,255,255,.32),
      inset 0 -2px 0 rgba(0,0,0,.28);
  }
  50% {
    box-shadow:
      0 14px 50px rgba(255,23,68,.7),
      0 0 0 12px rgba(194,24,91,0),
      inset 0 2px 0 rgba(255,255,255,.4),
      inset 0 -2px 0 rgba(0,0,0,.28);
  }
}

/* ============ TG LAUNCH ARROW — animovaná šipka pro Telegram CTA ============ */
.tg-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  margin-left: 6px;
  flex-shrink: 0;
  position: relative;
  transition: transform .42s cubic-bezier(.2,1.05,.4,1);
  animation: tgArrowIdle 2.4s ease-in-out infinite;
}
.tg-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.tg-arrow .tg-arrow-trail {
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, currentColor 60%, transparent);
  border-radius: 2px;
  opacity: 0;
  transition: width .4s ease-out, opacity .4s ease-out;
  pointer-events: none;
}
.btn-3d:hover .tg-arrow {
  transform: translateX(7px) scale(1.08);
  animation: tgArrowZip .55s cubic-bezier(.16,1,.3,1) infinite alternate;
}
.btn-3d:hover .tg-arrow .tg-arrow-trail {
  width: 14px;
  opacity: 0.85;
}
@keyframes tgArrowIdle {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}
@keyframes tgArrowZip {
  from { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  to   { filter: brightness(1.25) drop-shadow(0 0 5px currentColor); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-arrow,
  .btn-3d:hover .tg-arrow { animation: none; transform: none; }
}

/* ============ HERO CTA UNIVERSAL SPARKLES (WOW effect) ============ */
.btn-3d.primary[data-track="hero-tg"] .btn-sparkle,
.btn-3d.ebook-cta .btn-sparkle,
.btn-3d.pricing-cta .btn-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px currentColor, 0 0 14px rgba(255,255,255,0.5);
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
  animation: btnSparkleTwinkle 2.6s ease-in-out infinite;
}
.btn-sparkle.s1 { top: -7px; right: 14%; animation-delay: 0s; font-size: 16px; }
.btn-sparkle.s2 { bottom: -6px; left: 18%; animation-delay: 1.1s; font-size: 11px; }
.btn-sparkle.s3 { top: 28%; right: -8px; animation-delay: 0.55s; font-size: 9px; opacity: 0.9; }
.btn-sparkle.s4 { top: 60%; left: -7px; animation-delay: 1.7s; font-size: 12px; }

@keyframes btnSparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  40%      { opacity: 1; transform: scale(1.25) rotate(120deg); }
  60%      { opacity: 1; transform: scale(1.15) rotate(180deg); }
  100%     { opacity: 0; transform: scale(0.5) rotate(360deg); }
}

/* Pencil-line artistic accent (subtle hand-drawn feel) */
.btn-3d.primary[data-track="hero-tg"] .btn-art-line,
.btn-3d.ebook-cta .btn-art-line,
.btn-3d.pricing-cta .btn-art-line {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: screen;
}
.btn-art-line.top {
  top: -3px; left: 8%; right: 8%; height: 4px;
}
.btn-art-line svg {
  width: 100%; height: 100%;
  display: block;
}

/* HERO TG button — ORIGINAL premium cyan/blue, kompaktní velikost (jako ebook) */
.btn-3d.primary[data-track="hero-tg"] {
  position: relative;
  font-size: 13px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #00D4FF 0%, #0088CC 50%, #00FFB3 100%);
  color: #fff;
  box-shadow:
    0 10px 40px rgba(0,212,255,.5),
    0 0 0 0 rgba(0,212,255,.7),
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.25);
  animation: tgPulseBlue 2.4s cubic-bezier(.4,0,.6,1) infinite;
  letter-spacing: .01em;
  gap: 7px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}
.btn-3d.primary[data-track="hero-tg"] svg {
  width: 15px; height: 15px;
  fill: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  flex-shrink: 0;
  transform: translateX(-1px);
  transition: transform .55s cubic-bezier(.16,1.3,.3,1);
}
.btn-3d.primary[data-track="hero-tg"]:hover svg {
  transform: translateX(-1px) rotateY(180deg) scale(1.15);
}
.btn-3d.primary[data-track="hero-tg"]:hover {
  transform: translateY(-3px) scale(1.04);
  filter: brightness(1.1);
  box-shadow:
    0 16px 48px rgba(0,212,255,.65),
    0 0 0 4px rgba(0,255,179,0.25),
    inset 0 2px 0 rgba(255,255,255,.35);
}
.btn-3d.primary[data-track="hero-tg"] .tg-arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.btn-3d.primary[data-track="hero-tg"]:hover .tg-arrow {
  transform: translateX(4px);
}
@keyframes tgPulseBlue {
  0%, 100% {
    box-shadow:
      0 10px 40px rgba(0,212,255,.5),
      0 0 0 0 rgba(0,212,255,.7),
      inset 0 2px 0 rgba(255,255,255,.3),
      inset 0 -2px 0 rgba(0,0,0,.25);
  }
  50% {
    box-shadow:
      0 14px 50px rgba(0,212,255,.7),
      0 0 0 12px rgba(0,212,255,0),
      inset 0 2px 0 rgba(255,255,255,.4),
      inset 0 -2px 0 rgba(0,0,0,.25);
  }
}

/* ============== EBOOK 3D BOOK HOVER ============== */
.lm-pdf-stack { cursor: pointer; will-change: transform; }
.lm-pdf-stack:hover {
  transform: rotateY(-6deg) rotateX(2deg) translateY(-3px) scale(1.02);
  filter: drop-shadow(0 20px 40px rgba(255,215,0,.25));
}
.lm-pdf-cover {
  position: absolute; inset: 0;
  transition: transform 1s cubic-bezier(.16,1,.3,1), box-shadow .8s;
  transform-origin: left center;
  background: linear-gradient(135deg,#1a1a2e 0%,#0a0a14 100%);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 6px 12px 12px 6px;
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 50px -10px rgba(255,215,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
.lm-pdf-stack:hover .lm-pdf-cover {
  transform: rotateY(-10deg);
  box-shadow: 0 25px 55px -10px rgba(255,215,0,.4);
}
.lm-pdf-back {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,#15151f,#08080d);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px 12px 12px 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,215,0,.4);
  font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase;
}
.lm-pdf-back::before {
  content: "📖 Bankroll 101 · 22 stran"; opacity: .5;
}

/* ============== MEMBERSHIP WOW (pricing) ============== */
.price.featured {
  position: relative;
  overflow: hidden;
}
.price.featured::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,215,0,.08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: priceShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes priceShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}
.price.featured:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 50px 120px -25px rgba(255,215,0,.6);
}
.price.featured .price-tier {
  background: linear-gradient(135deg, #FFD700, #FF5E00, #FFD700);
  background-size: 200% auto;
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============== GATED RESULTS (TG-locked) ============== */
.results-locked {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,215,0,.25);
  background: linear-gradient(135deg, rgba(10,10,20,.6), rgba(15,15,25,.4));
  backdrop-filter: blur(20px);
  padding: 64px 32px;
  text-align: center;
  margin: 32px auto;
  max-width: 720px;
}
.results-locked::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,215,0,.15), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,212,255,.1), transparent 50%);
  pointer-events: none;
}
.results-locked .lock-icon {
  font-size: 64px; margin-bottom: 18px;
  filter: drop-shadow(0 10px 30px rgba(255,215,0,.4));
}
.results-locked h3 {
  font-size: 24px; font-weight: 900; color: #fff; margin: 0 0 10px;
  font-family: 'Orbitron', sans-serif;
}
.results-locked p {
  font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7;
  margin: 0 auto 28px; max-width: 480px;
}
.results-locked .unlock-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 32px;
  background: linear-gradient(135deg,#00D4FF 0%,#0088CC 100%);
  color: #fff; text-decoration: none;
  font-weight: 900; font-size: 14px;
  text-transform: uppercase; letter-spacing: .08em;
  border-radius: 999px;
  box-shadow: 0 10px 40px rgba(0,212,255,.5);
  animation: tgPulse 2.4s infinite;
  position: relative; z-index: 1;
}
.btn-3d.ghost {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text);
  backdrop-filter: blur(20px);
}
.btn-3d.ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,215,0,.5);
  transform: translateY(-2px);
}

.hero-cards-wrap {
  position: relative; z-index: 5;
  margin-top: 40px;
  display: flex; gap: 20px;
  justify-content: center; flex-wrap: wrap;
  perspective: 1200px;
}
.live-card {
  position: relative;
  width: 280px;
  padding: 20px;
  background: rgba(8,8,18,.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.8), 0 0 30px rgba(255,215,0,.1);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .25s;
  transform: rotate(var(--rot, 0deg));
  animation: cardFloat var(--dur, 6s) ease-in-out infinite;
}
.live-card:nth-child(1) { --rot: -3deg; --dur: 5s; }
.live-card:nth-child(2) { --rot: 1deg; --dur: 6s; animation-delay: -1s; }
.live-card:nth-child(3) { --rot: 4deg; --dur: 7s; animation-delay: -2s; }
@keyframes cardFloat {
  0%,100% { transform: rotate(var(--rot)) translateY(0); }
  50% { transform: rotate(var(--rot)) translateY(-12px); }
}
.live-card:hover {
  transform: rotate(0) translateY(-8px) scale(1.05);
  border-color: rgba(255,215,0,.5);
  box-shadow: 0 30px 80px -15px rgba(255,215,0,.3), 0 0 50px rgba(255,215,0,.25);
  z-index: 20;
}
.live-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.live-card-sport {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold);
}
.live-card-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  color: var(--red);
  text-transform: uppercase; letter-spacing: .1em;
}
.live-card-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  animation: livePulse 1.6s infinite;
}
.live-card-match {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
.live-card-pred { font-size: 12px; color: var(--text-d); margin-bottom: 14px; }
.live-card-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: rgba(255,215,0,.05);
  border-radius: 12px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,215,0,.12);
}
.live-card-row span:first-child {
  font-size: 11px; color: var(--text-m);
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700;
}
.live-card-row span:last-child {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--gold);
}
.live-card-edge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  padding: 5px 10px;
  background: rgba(0,255,179,.1);
  border: 1px solid rgba(0,255,179,.3);
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  color: var(--emerald);
  font-family: 'Orbitron', sans-serif;
}

.hero-stats-strip {
  margin-top: 40px;
  display: flex; gap: 32px;
  flex-wrap: wrap; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  position: relative;
  z-index: 6;
}
.hero-stat {
  text-align: left;
  position: relative;
  padding-left: 18px;
  min-width: 140px;
  display: flex; flex-direction: column;
}
.hero-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}
.hero-stat-num { font-size: 26px; font-weight: 900; color: var(--gold); letter-spacing: -.02em; line-height: 1.1; }
.hero-stat-label { font-size: 10px; color: var(--text-m); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-top: 4px; line-height: 1.2; white-space: nowrap; }

/* ═════════ ROI CALCULATOR ═════════ */
.sb-roi {
  margin: 28px auto 0;
  max-width: 720px;
  padding: 22px 24px;
  background: linear-gradient(150deg, rgba(255,215,0,.06), rgba(0,212,255,.04) 60%, rgba(255,46,92,.04));
  border: 1px solid rgba(255,215,0,.24);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04) inset;
  position: relative;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sb-roi::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 23px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,215,0,.4), rgba(0,212,255,.2), rgba(255,46,92,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
}
.sb-roi-head { text-align: center; margin-bottom: 18px; }
.sb-roi-title { font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.sb-roi-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px; letter-spacing: .04em; }
.sb-roi-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: center; }
.sb-roi-lbl { display: block; font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 12px; }
.sb-roi-amount {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px; font-weight: 900;
  color: #FFD700;
  text-align: center;
  margin: 4px 0 6px;
  text-shadow: 0 0 28px rgba(255,215,0,.4);
}
.sb-roi-amount .per { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 600; margin-left: 4px; letter-spacing: .04em; }
.sb-roi-range { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .08em; margin-top: 4px; }
#sb-roi-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFD700 0%, #FFD700 var(--p,30%), rgba(255,255,255,.1) var(--p,30%));
  outline: none;
  cursor: pointer;
  margin: 8px 0;
}
#sb-roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 4px 14px rgba(255,215,0,.6), 0 0 0 4px rgba(255,215,0,.18);
  transition: transform .12s;
}
#sb-roi-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
#sb-roi-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  border: 0; border-radius: 50%;
  cursor: grab;
  box-shadow: 0 4px 14px rgba(255,215,0,.6);
}
.sb-roi-vs { display: flex; flex-direction: column; gap: 14px; }
.sb-roi-bar-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.sb-roi-bar-label span { font-weight: 500; opacity: .65; text-transform: none; letter-spacing: 0; font-size: 10px; }
.sb-roi-bar-track { height: 14px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; position: relative; }
.sb-roi-bar-fill { height: 100%; border-radius: 999px; transition: width .55s cubic-bezier(.18,.89,.32,1.18); position: relative; }
.sb-roi-bar-them .sb-roi-bar-fill { background: linear-gradient(90deg, rgba(255,46,92,.4), rgba(255,46,92,.7)); width: 30%; }
.sb-roi-bar-us .sb-roi-bar-fill {
  background: linear-gradient(90deg, #FFD700, #00FFB3, #00D4FF);
  background-size: 200% 100%;
  animation: sb-flow 4s linear infinite;
  width: 92%;
}
@keyframes sb-flow { to { background-position: 200% 0; } }
.sb-roi-bar-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px; font-weight: 900;
  color: #fff;
  margin-top: 6px;
  letter-spacing: -.01em;
}
.sb-roi-bar-them .sb-roi-bar-num { color: #FF6B85; }
.sb-roi-bar-us .sb-roi-bar-num { color: #00FFB3; }
.sb-roi-delta {
  margin: 16px 0 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(0,255,179,.1), rgba(0,212,255,.06));
  border: 1px solid rgba(0,255,179,.28);
  border-radius: 14px;
  text-align: center;
}
.sb-roi-delta-num {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px; font-weight: 900;
  color: #00FFB3;
  letter-spacing: -.01em;
  text-shadow: 0 0 24px rgba(0,255,179,.4);
}
.sb-roi-delta-lbl { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.sb-roi-cta {
  display: block;
  text-align: center;
  padding: 14px 22px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  font-size: 13px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(255,215,0,.4);
  font-family: 'Manrope', sans-serif;
  transition: transform .12s;
}
.sb-roi-cta:hover { transform: translateY(-2px); }
.sb-roi-disclaimer { font-size: 10px; color: rgba(255,255,255,.38); text-align: center; margin-top: 10px; line-height: 1.5; letter-spacing: .03em; }
@media (max-width: 720px) {
  .sb-roi { margin: 20px 16px 0; padding: 18px 16px; }
  .sb-roi-body { grid-template-columns: 1fr; gap: 18px; }
  .sb-roi-amount { font-size: 24px; }
  .sb-roi-delta-num { font-size: 24px; }
}

/* HERO LOGO (oficial StrategyBet horse) */
.hero-logo {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  margin-bottom: 22px;
  position: relative;
  z-index: 6;
}
.hero-logo img {
  width: 130px; height: auto;
  filter: drop-shadow(0 12px 28px rgba(255,215,0,.45));
  animation: logoBreath 3.5s ease-in-out infinite;
}
@keyframes logoBreath {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}
.hero-logo .since {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: .26em;
  color: rgba(255,215,0,.55);
  text-transform: uppercase;
  font-weight: 700;
}
@media (max-width: 720px) {
  .hero-logo img { width: 90px; }
}

.scroll-down {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--text-m);
  text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Orbitron', sans-serif;
  animation: scrollFloat 2.5s ease-in-out infinite;
  z-index: 5;
}
@keyframes scrollFloat {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .6; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ============== SECTION COMMON ============== */
.section {
  position: relative;
  padding: 100px 24px;
  overflow: visible;
}
.section::after { content: ""; }
.section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, rgba(255,215,0,.4)), transparent);
}
.section-bg-fx {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 30%, var(--bg-fx-1, rgba(168,85,247,.06)), transparent 50%),
    radial-gradient(ellipse at 70% 70%, var(--bg-fx-2, rgba(255,94,0,.05)), transparent 50%);
}
.section-wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.section-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  font-family: 'Orbitron', sans-serif;
  margin-bottom: 16px;
}
.section-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.section-title .alt { background: linear-gradient(135deg, #FFD700, #FF5E00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-lead {
  color: var(--text-d);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  max-width: 620px;
  font-family: 'Manrope', sans-serif;
}
.section-head { text-align: center; margin-bottom: 36px; }
.section-head .section-lead { margin: 0 auto; }

/* ============== LEAD MAGNET (free ebook) ============== */
.lead-magnet {
  --accent: rgba(0,255,179,.4);
  --bg-fx-1: rgba(0,255,179,.08);
  --bg-fx-2: rgba(0,212,255,.05);
  padding: 110px 24px;
}
.lm-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .lm-grid { grid-template-columns: 1fr; gap: 40px; }
  .lm-mock { order: -1; }
}
.lm-content h2 {
  font-size: clamp(28px, 4.5vw, 48px);
  margin: 14px 0 14px;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.lm-content h2 .alt {
  background: linear-gradient(135deg, #00FFB3, #00d4ff, #FFD700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lm-includes {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  margin: 22px 0 26px;
  font-family: 'Manrope', sans-serif;
}
.lm-includes li {
  padding: 10px 14px;
  background: rgba(0,255,179,.04);
  border: 1px solid rgba(0,255,179,.18);
  border-radius: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.lm-form {
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(8,8,16,.6);
  border: 1px solid rgba(0,255,179,.25);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(20px);
}
.lm-form input[type="email"], .lm-form input[type="tel"] {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: #fff; font-size: 15px;
  outline: none;
  font-family: 'Manrope', sans-serif;
  transition: border-color .25s, background .25s;
}
.lm-form input:focus {
  border-color: #00FFB3;
  background: rgba(0,255,179,.04);
}
.lm-form input::placeholder { color: rgba(255,255,255,.4); }
.lm-submit {
  padding: 16px 24px;
  background: linear-gradient(135deg, #00FFB3 0%, #FFD700 100%);
  color: #06060a;
  font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
  border: none; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(0,255,179,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .25s, box-shadow .25s;
  font-family: inherit;
}
.lm-submit:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,255,179,.55);
}
.lm-submit.success {
  background: linear-gradient(135deg, #FFD700, #FF5E00);
}
.lm-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-family: 'Manrope', sans-serif;
  line-height: 1.5;
  cursor: pointer;
}
.lm-consent input { margin-top: 3px; flex-shrink: 0; accent-color: #00FFB3; }
.lm-consent strong { color: rgba(255,255,255,.85); }
.lm-trust {
  margin-top: 16px;
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: rgba(255,255,255,.45);
  font-weight: 700;
}

/* PDF mockup stack */
.lm-mock {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
  min-height: 420px;
}
.lm-pdf-stack {
  position: relative;
  width: 280px; height: 380px;
  transform: rotateY(-8deg) rotateX(8deg) rotateZ(-3deg);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.lm-pdf-stack:hover {
  transform: rotateY(0) rotateX(0) rotateZ(0) scale(1.05);
}
.lm-pdf-shadow {
  position: absolute;
  inset: -10px -10px -20px -10px;
  background: radial-gradient(ellipse at center, rgba(0,255,179,.4), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.lm-pdf-back, .lm-pdf-cover {
  position: absolute; inset: 0;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.lm-pdf-back {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transform: translate(12px, 12px);
  z-index: 1;
}
.lm-pdf-cover {
  background:
    radial-gradient(ellipse at top right, rgba(0,255,179,.4), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(0,212,255,.2), transparent 60%),
    linear-gradient(135deg, #0a0a14 0%, #1a1a2a 100%);
  border: 1px solid rgba(0,255,179,.4);
  z-index: 2;
  display: flex; flex-direction: column;
  padding: 28px;
  overflow: hidden;
}
.lm-pdf-cover::before {
  content: ""; position: absolute;
  top: 30%; left: -20%;
  width: 140%; height: 1px;
  background: linear-gradient(90deg, transparent, #00FFB3, transparent);
  filter: blur(2px);
}
.lm-pdf-cover-eyebrow {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #00FFB3;
  margin-bottom: 24px;
}
.lm-pdf-cover-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(38px, 8vw, 56px); font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff, #00FFB3 50%, #FFD700);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.lm-pdf-cover-sub {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: auto;
}
.lm-pdf-cover-pages {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.4);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lm-pdf-cover-mark {
  position: absolute;
  bottom: 22px; right: 22px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 24px rgba(255,215,0,.4));
}
.lm-pdf-cover-mark img { width: 100%; height: 100%; object-fit: contain; }

/* ============== LEAGUE LOGOS STRIP (originál framer) ============== */
.featured {
  padding: 36px 0 28px;
  text-align: center;
  background: linear-gradient(180deg, #050510, #0a0a14);
}
.featured-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.4);
  margin-bottom: 22px;
  font-family: 'Orbitron', sans-serif;
}
.featured-marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.featured-track {
  display: flex; gap: 60px;
  align-items: center;
  animation: featuredSlide 45s linear infinite;
  will-change: transform;
}
@keyframes featuredSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.featured-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 18px;
  transition: transform .35s, filter .35s;
}
.featured-item:hover {
  transform: scale(1.08);
  filter: brightness(1.15) drop-shadow(0 4px 18px rgba(255,215,0,.3));
}
.featured-item img {
  max-height: 50px;
  max-width: 180px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

/* ============== TELEGRAM FUNNEL ============== */
.tg-funnel {
  --accent: rgba(0,136,204,.4);
  --bg-fx-1: rgba(0,136,204,.12);
  --bg-fx-2: rgba(0,136,204,.06);
}
.tg-funnel-card {
  position: relative;
  padding: 56px 40px;
  background:
    radial-gradient(ellipse at top left, rgba(0,136,204,.18) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0,136,204,.12) 0%, transparent 50%),
    rgba(8,8,13,.7);
  border: 2px solid rgba(0,136,204,.4);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,136,204,.45), 0 0 60px rgba(0,136,204,.15);
  text-align: center;
}
@media (max-width: 700px) { .tg-funnel-card { padding: 40px 22px; } }
.tg-funnel-card h2 {
  font-size: clamp(30px, 5vw, 48px);
  margin: 14px 0;
}
.tg-funnel-card h2 .tg { color: #0088cc; text-shadow: 0 0 30px rgba(0,136,204,.5); }
.tg-perks {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
  margin: 28px auto;
  max-width: 580px;
  text-align: left;
}
@media (max-width: 600px) { .tg-perks { grid-template-columns: 1fr; } }
.tg-perk {
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 10px;
}
.tg-perk-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,136,204,.2);
  border: 1px solid rgba(0,136,204,.4);
  display: flex; align-items: center; justify-content: center;
  color: #0088cc;
  flex-shrink: 0;
  font-weight: 900;
}
.tg-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px 16px 22px;
  background: linear-gradient(135deg, #0088cc 0%, #00bfff 100%);
  color: #fff !important;
  font-size: 15px; font-weight: 800;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(0,136,204,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .25s, box-shadow .25s, filter .25s;
  min-width: 320px;
  max-width: 100%;
}
.tg-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,136,204,.7);
  filter: brightness(1.05);
}
.tg-cta-badge {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
}

/* ============== LOYALTY ============== */
.loyalty {
  --accent: rgba(255,215,0,.3);
  --bg-fx-1: rgba(168,85,247,.08);
  --bg-fx-2: rgba(255,215,0,.05);
  text-align: center;
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
  text-align: left;
}
@media (max-width: 900px) { .tier-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  position: relative;
  padding: 28px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .35s;
}
.tier::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--tc, #fff); opacity: .7;
}
.tier::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, var(--tbg, transparent), transparent 70%);
  pointer-events: none;
}
.tier > * { position: relative; z-index: 1; }
.tier:hover { transform: translateY(-6px); border-color: var(--tc); box-shadow: 0 30px 60px -20px var(--tg, rgba(255,215,0,.3)); }
.tier-bronze   { --tc: #cd7f32; --tbg: rgba(205,127,50,.1); --tg: rgba(205,127,50,.3); }
.tier-silver   { --tc: #c0c0c0; --tbg: rgba(192,192,192,.1); --tg: rgba(192,192,192,.25); }
.tier-gold     { --tc: #FFD700; --tbg: rgba(255,215,0,.14); --tg: rgba(255,215,0,.4); border-color: rgba(255,215,0,.4); }
.tier-platinum { --tc: #E5E4E2; --tbg: rgba(229,228,226,.16); --tg: rgba(229,228,226,.3); }
.tier-popular {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  font-size: 9px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em;
  border-radius: 999px;
}
.tier-icon { font-size: 42px; line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 4px 16px var(--tc)); }
.tier-name { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 900; color: var(--tc); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.tier-pts { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: -.01em; }
.tier-pts span { display: block; font-size: 10px; color: rgba(255,255,255,.4); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.tier-perks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.7); }
.tier-perks li { display: flex; gap: 8px; }
.tier-perks li::before { content: "✓"; color: var(--tc); font-weight: 900; flex-shrink: 0; }

/* ============== COUPONS ============== */
.coupons { --accent: rgba(255,94,0,.35); --bg-fx-1: rgba(255,215,0,.04); --bg-fx-2: rgba(255,94,0,.06); text-align: center; }
.coupon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; text-align: left; }
@media (max-width: 900px) { .coupon-grid { grid-template-columns: 1fr; } }
.coupon {
  position: relative;
  display: flex;
  background: linear-gradient(135deg, rgba(255,215,0,.06), rgba(255,94,0,.04));
  border: 1px dashed rgba(255,215,0,.35);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s, border-color .25s, box-shadow .35s;
}
.coupon:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(255,215,0,.6); border-style: solid; box-shadow: 0 24px 60px -15px rgba(255,215,0,.4); }
.coupon-disc {
  flex-shrink: 0; width: 130px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  padding: 22px 12px;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  position: relative;
}
.coupon-disc::before, .coupon-disc::after {
  content: ""; position: absolute; right: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #050510;
  border: 1px dashed rgba(255,215,0,.35);
}
.coupon-disc::before { top: -8px; }
.coupon-disc::after { bottom: -8px; }
.coupon-disc-num { font-size: 38px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.coupon-disc-pct { font-size: 18px; font-weight: 800; }
.coupon-disc-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-top: 6px; }
.coupon-info { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.coupon-title { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 900; color: #fff; }
.coupon-desc { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.5; }
.coupon-code-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.coupon-code-row code {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,215,0,.4);
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; font-weight: 800;
  color: #FFD700;
  letter-spacing: .12em;
  text-align: center;
}
.coupon-cp {
  padding: 8px 12px;
  background: rgba(255,215,0,.15);
  border: 1px solid rgba(255,215,0,.4);
  border-radius: 8px;
  color: #FFD700;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .25s;
}
.coupon-cp:hover { background: rgba(255,215,0,.25); }
.coupon-cp.copied { background: rgba(0,255,179,.2); border-color: rgba(0,255,179,.5); color: var(--emerald); }
.coupon-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10px; color: var(--text-m); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 8px; }
.coupon-meta span { padding: 3px 8px; background: rgba(255,255,255,.04); border-radius: 6px; }

/* ============== PRICING (4-tier framer originál) ============== */
.pricing { --accent: rgba(255,215,0,.3); --bg-fx-1: rgba(255,215,0,.06); --bg-fx-2: rgba(255,94,0,.04); text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 36px; align-items: stretch; text-align: left; }
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } }
.price {
  position: relative;
  padding: 36px 28px;
  margin-top: 14px; /* prostor pro top-positioned badge */
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .25s;
  overflow: visible; /* badge top:-12px nesmí být ořezaný */
}
.price > .price-popular,
.price > span[style*="top:-12px"] {
  z-index: 2;
}
.price:hover { transform: translateY(-6px); border-color: rgba(255,215,0,.4); }
.price.featured {
  background: linear-gradient(180deg, rgba(255,215,0,.08), rgba(255,94,0,.04));
  border-color: rgba(255,215,0,.4);
  box-shadow: 0 30px 80px -25px rgba(255,215,0,.4);
}
.price-popular {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 22px; border-radius: 999px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  font-size: 10px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  box-shadow: 0 6px 24px rgba(255,94,0,.45);
  white-space: nowrap;
  z-index: 5;
}
.price.featured { padding-top: 56px; }
.price-tier { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 900; color: #FFD700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; }
.price-amt { font-family: 'Orbitron', sans-serif; font-size: 48px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.price-amt-period { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.5); }
.price-amt-sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }
.price-tagline { font-size: 14px; color: rgba(255,255,255,.65); margin: 14px 0 22px; line-height: 1.5; }
.price-feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
.price-feats li::before {
  content: "✓"; flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,230,118,.15);
  border: 1px solid rgba(0,230,118,.4);
  color: #00e676;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.price-feats li.disabled { color: rgba(255,255,255,.3); text-decoration: line-through; }
.price-feats li.disabled::before { content: "×"; background: rgba(255,71,87,.1); border-color: rgba(255,71,87,.3); color: #ff4757; }
.price-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800; font-size: 14px;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
}
.price-cta.featured-cta {
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(255,215,0,.4);
}
.price-cta:hover { transform: translateY(-1px); }

/* ============== TIPS PREVIEW ============== */
.tips-preview { --accent: rgba(0,255,179,.3); --bg-fx-1: rgba(0,255,179,.04); --bg-fx-2: rgba(0,212,255,.05); text-align: center; }
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.tip {
  position: relative;
  padding: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  text-align: left;
  transition: transform .35s, border-color .25s, box-shadow .35s;
  overflow: hidden;
}
.tip::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--tc, var(--gold)), transparent);
  transform: scaleX(0);
  transition: transform .4s;
}
.tip:hover { transform: translateY(-4px); border-color: rgba(255,215,0,.4); box-shadow: 0 20px 50px -15px rgba(255,215,0,.25); }
.tip:hover::before { transform: scaleX(1); }
.tip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 11px; color: var(--text-m); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.tip-tier { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.tip-tier.free { background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.3); color: #FFD700; }
.tip-tier.basic { background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.3); color: var(--cyan); }
.tip-tier.vip { background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.3); color: var(--purple); }
.tip-match { font-family: 'Orbitron', sans-serif; font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.tip-pred { display: inline-block; padding: 8px 14px; background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.25); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.tip-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.tip-stat { text-align: center; padding: 8px 4px; background: rgba(255,255,255,.025); border-radius: 8px; }
.tip-stat-label { font-size: 9px; color: var(--text-m); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 3px; }
.tip-stat-val { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 800; }
.tip-stat-val.gold { color: var(--gold); }
.tip-stat-val.green { color: var(--emerald); }

/* ============== BOOKMAKERS ============== */
.bookmakers { text-align: center; --accent: rgba(255,255,255,.15); --bg-fx-1: transparent; --bg-fx-2: transparent; }
.bookmakers-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-top: 36px; }
@media (max-width: 900px) { .bookmakers-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .bookmakers-grid { grid-template-columns: 1fr; } }
.bm-card {
  position: relative;
  padding: 22px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  text-align: center;
  transition: transform .35s, border-color .25s, box-shadow .35s;
  overflow: hidden;
}
.bm-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--bm, #FFD700); opacity: .7;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.bm-card:hover { transform: translateY(-5px); border-color: var(--bm); box-shadow: 0 20px 50px -15px var(--bm); }
.bm-card:hover::before { transform: scaleX(1); }
.bm-mark {
  width: 64px; height: 64px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.96);
  margin: 0 auto 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.25);
  overflow: hidden;
  padding: 8px;
}
.bm-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.bm-name { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.bm-tag { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 12px; }
.bm-stats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 10px; color: rgba(255,255,255,.7); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bm-stats span { padding: 3px 8px; background: rgba(255,255,255,.04); border-radius: 999px; }

/* ============== CAPITAL QUALIFIER ============== */
.capital-qualifier {
  margin-top: 60px;
  padding: 40px 32px;
  background:
    radial-gradient(ellipse at top, rgba(0,255,179,.06), transparent 60%),
    rgba(8,8,16,.6);
  border: 1px solid rgba(0,255,179,.2);
  border-radius: 24px;
  backdrop-filter: blur(20px);
}
@media (max-width: 700px) { .capital-qualifier { padding: 32px 22px; } }
.cq-header {
  text-align: center;
  margin-bottom: 32px;
}
.cq-header h3 {
  font-size: clamp(24px, 3.5vw, 36px);
  text-transform: uppercase;
  margin-top: 12px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: -.02em;
}
.cq-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 700px) { .cq-options { grid-template-columns: 1fr; } }
.cq-card {
  position: relative;
  padding: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .35s;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
.cq-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #00FFB3, transparent);
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.cq-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,255,179,.5);
  box-shadow: 0 20px 50px -15px rgba(0,255,179,.3);
}
.cq-card:hover::before { transform: scaleX(1); }

/* ===== FEATURED — full width, pulsující, wow ===== */
.cq-card.cq-featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  background:
    radial-gradient(ellipse at top right, rgba(255,215,0,.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(255,94,0,.1), transparent 55%),
    rgba(255,255,255,.04);
  border-color: rgba(255,215,0,.55);
  box-shadow: 0 0 0 1px rgba(255,215,0,.15), 0 28px 80px -20px rgba(255,215,0,.45);
  animation: cq-glow-pulse 2.8s ease-in-out infinite;
}
@keyframes cq-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,215,0,.15), 0 28px 80px -20px rgba(255,215,0,.45); border-color: rgba(255,215,0,.55); }
  50% { box-shadow: 0 0 0 2px rgba(255,215,0,.35), 0 28px 80px -10px rgba(255,215,0,.65), 0 0 50px rgba(255,215,0,.18); border-color: rgba(255,215,0,.85); }
}
.cq-card.cq-featured::before {
  background: linear-gradient(90deg, transparent, #FFD700, transparent);
  transform: scaleX(1);
}
.cq-card.cq-featured::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,.07), transparent);
  animation: cq-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cq-shimmer {
  0% { left: -50%; }
  100% { left: 150%; }
}
@media (max-width: 700px) {
  .cq-card.cq-featured { flex-direction: column; }
}

.cq-popular {
  position: absolute; top: 14px; right: 14px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  font-size: 10px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(255,215,0,.5);
  animation: badge-pop 2.8s ease-in-out infinite;
}
@keyframes badge-pop {
  0%, 100% { box-shadow: 0 4px 16px rgba(255,215,0,.5); }
  50% { box-shadow: 0 4px 24px rgba(255,94,0,.7); }
}
.cq-icon {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(255,215,0,.3));
  flex-shrink: 0;
}
.cq-card.cq-featured .cq-icon {
  font-size: 64px;
  filter: drop-shadow(0 6px 24px rgba(255,215,0,.55));
}
.cq-amount {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.cq-card.cq-featured .cq-amount {
  font-size: 22px;
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255,215,0,.4);
}
.cq-recommend {
  font-size: 14px;
  color: rgba(255,255,255,.85);
}
.cq-recommend strong {
  font-family: 'Orbitron', sans-serif;
  color: #FFD700;
  font-size: 16px;
}
.cq-card.cq-featured .cq-recommend strong {
  font-size: 20px;
}
.cq-desc {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  flex: 1;
}
.cq-cta {
  margin-top: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0,136,204,.15), rgba(0,136,204,.08));
  border: 1px solid rgba(0,136,204,.4);
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
  color: #0088cc;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cq-card.cq-featured .cq-cta {
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  color: #06060a;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(255,215,0,.5);
  font-size: 13px;
  padding: 12px 20px;
}

/* ============== FAQ INLINE ============== */
.faq-inline { --accent: rgba(168,85,247,.3); --bg-fx-1: rgba(168,85,247,.06); --bg-fx-2: rgba(0,212,255,.04); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.faq-item:hover { border-color: rgba(255,215,0,.3); }
.faq-item[open] {
  border-color: rgba(255,215,0,.5);
  background: rgba(255,215,0,.04);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; font-weight: 400;
  color: var(--gold);
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  background: rgba(255,215,0,.25);
}
.faq-item p {
  padding: 0 22px 22px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
}
.faq-item p strong { color: var(--gold); }

/* ============== FLOATING HELP MENU ============== */
.fab-menu {
  display: none !important;
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 99995;
  font-family: 'Manrope', sans-serif;
}
.fab-trigger {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  cursor: pointer;
  border: none;
  box-shadow: 0 14px 36px rgba(255,215,0,.5), inset 0 2px 0 rgba(255,255,255,.4);
  transition: transform .3s cubic-bezier(.16,1.3,.3,1), box-shadow .3s;
  position: relative;
  z-index: 2;
}
.fab-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 20px 48px rgba(255,215,0,.7);
}
.fab-trigger.open {
  transform: rotate(135deg) scale(1.05);
}
.fab-trigger::before {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,215,0,.4);
  animation: fabPulse 2s infinite;
}
@keyframes fabPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.fab-items {
  position: absolute;
  bottom: 76px; right: 0;
  display: flex; flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.fab-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: rgba(8,8,16,.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(20px) scale(.9);
  transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.fab-item-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--fab-c, linear-gradient(135deg, #FFD700, #FF5E00));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.fab-item:hover {
  border-color: rgba(255,215,0,.6);
  transform: translateX(-4px) scale(1.02) !important;
}
.fab-menu.open .fab-items { pointer-events: auto; }
.fab-menu.open .fab-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fab-menu.open .fab-item:nth-child(1) { transition-delay: .04s; }
.fab-menu.open .fab-item:nth-child(2) { transition-delay: .08s; }
.fab-menu.open .fab-item:nth-child(3) { transition-delay: .12s; }
.fab-menu.open .fab-item:nth-child(4) { transition-delay: .16s; }
.fab-menu.open .fab-item:nth-child(5) { transition-delay: .20s; }

@media (max-width: 600px) {
  .fab-menu { bottom: 16px; right: 16px; }
  .fab-trigger { width: 52px; height: 52px; font-size: 24px; }
}

/* ============== SECTION PROGRESS DOTS (right-side scroll indicator) ============== */
.scroll-dots {
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 50;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 14px 10px;
  background: rgba(8,8,16,.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
}
@media (max-width: 1200px) { .scroll-dots { display: none; } }
.scroll-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  border: none;
  position: relative;
  transition: background .3s, transform .3s;
}
.scroll-dot:hover { background: rgba(255,215,0,.5); transform: scale(1.3); }
.scroll-dot.active {
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(255,215,0,.6);
}
.scroll-dot-tooltip {
  position: absolute;
  right: 24px; top: 50%; transform: translateY(-50%);
  padding: 4px 10px;
  background: rgba(8,8,16,.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  font-family: 'Manrope', sans-serif;
}
.scroll-dot:hover .scroll-dot-tooltip { opacity: 1; }

/* ============== FIRST-VISIT ONBOARDING BANNER ============== */
.welcome-banner {
  position: fixed;
  bottom: 100px;
  top: auto;
  left: 50%; transform: translateX(-50%) translateY(200%);
  z-index: 99990;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(0,255,179,.18), rgba(255,215,0,.12));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,255,179,.4);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0,255,179,.3);
  font-family: 'Manrope', sans-serif;
  transition: transform .6s cubic-bezier(.16,1.3,.3,1);
  max-width: calc(100vw - 32px);
}
@media (max-width:600px){
  .welcome-banner{ bottom: 100px; padding:12px 18px; font-size:12px; }
}
.welcome-banner { pointer-events: none; }
.welcome-banner.show { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.welcome-banner.dismissed { display: none !important; }
.welcome-banner-icon { font-size: 24px; }
.welcome-banner-text {
  font-size: 13px;
  color: #fff;
  line-height: 1.4;
}
.welcome-banner-text strong { color: #FFD700; }
.welcome-banner-cta {
  padding: 8px 16px;
  background: linear-gradient(135deg, #00FFB3, #FFD700);
  color: #06060a;
  font-size: 12px; font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: auto;
}
.welcome-banner-close {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  font-size: 18px; cursor: pointer;
  margin-left: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  pointer-events: auto;
  transition: all .2s;
}
.welcome-banner-close:hover {
  background: rgba(255,46,92,.2);
  border-color: rgba(255,46,92,.4);
  color: #FF6B85;
}

/* ============== FINAL CTA + FOOTER ============== */
.final-cta { --accent: rgba(255,215,0,.5); --bg-fx-1: rgba(255,215,0,.12); --bg-fx-2: transparent; text-align: center; padding: 110px 24px; }
.final-cta h2 {
  font-size: clamp(36px, 6vw, 72px);
  margin-bottom: 20px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, #FFD700 50%, #FF5E00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.final-cta p { font-size: 16px; color: var(--text-d); margin-bottom: 36px; line-height: 1.6; }
.final-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.footer { padding: 60px 24px 40px; background: #050510; border-top: 1px solid rgba(255,255,255,.05); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto 32px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand-name { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 900; margin-bottom: 8px; letter-spacing: .04em; }
.footer-brand-name span { color: #FFD700; }
.footer-blurb { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 16px; max-width: 320px; }
.footer-tg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: rgba(0,136,204,.12); border: 1px solid rgba(0,136,204,.3); border-radius: 999px; color: #0088cc; font-size: 13px; font-weight: 800; text-decoration: none; }
.footer-col h4 { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.45); margin-bottom: 12px; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(255,255,255,.7); font-size: 13px; text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: #FFD700; }
.footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.06); text-align: center; font-size: 11px; color: rgba(255,255,255,.4); line-height: 1.7; }
.footer-bottom strong { color: rgba(255,255,255,.7); }
.footer-bottom a { color: #FFD700; }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Pause infinite animations when offscreen (CSS-only, perf boost) */
.proof-track:not(.in-view), .testi-track:not(.in-view) { animation-play-state: paused; }
.bm-mark, .live-card { will-change: auto; }
.hero-float { will-change: transform; }

/* ============== MOBILE FIX OVERRIDES — základ pro Čistý hero ============== */
@media (max-width: 880px) {
  /* Topnav links schovat pro <880, jen logo + login */
  .topnav-links { display: none; }
  .topnav { padding: 10px 16px; }

  /* Hero h1 — výrazný i na tabletu */
  .hero-h1 .line { font-size: 76px; line-height: .98; }
}

@media (max-width: 720px) {
  /* HERO H1: výrazný pro mobile */
  .hero-h1 { gap: 2px; }
  .hero-h1 .line { font-size: 60px; line-height: .98; letter-spacing: -.03em; }
  .hero-tag { font-size: 15px; padding: 0 20px; line-height: 1.5; }

  /* HERO content padding */
  .hero { padding: 100px 16px 60px; }
  .hero-content { padding: 0 4px; }

  /* Stats strip: vertikálně, ne horizontálně */
  .hero-stats-strip {
    margin-top: 28px;
    gap: 18px 22px;
    padding: 0 8px;
  }
  .hero-stat { min-width: 130px; flex: 0 0 calc(50% - 12px); }
  .hero-stat-num { font-size: 22px; }
  .hero-stat-label { font-size: 9px; letter-spacing: .1em; }

  /* CTA stack vertikálně, vzdušnější — víc margin od krajů, menší padding */
  .hero-cta { flex-direction: column; gap: 10px; padding: 0 32px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .hero-cta a { width: 100%; text-align: center; padding: 14px 20px; font-size: 14px; }
  .hero-cta .btn-3d.primary[data-track="hero-tg"],
  .hero-cta .btn-3d.ebook-cta,
  .hero-cta .btn-3d.pricing-cta { padding: 14px 20px; font-size: 14px; }

  /* Hero floats — schovat většinu (rušilo to text) */
  .hero-floats { opacity: 0.25; }

  /* Award orbs: schovat všechny na mobilu — orb .a překrývala buttons a vytvářela vizuální asymetrii */
  .award-orb { width: 44px; height: 44px; font-size: 16px; }
  .award-orb.a, .award-orb.b, .award-orb.c, .award-orb.d, .award-orb.e { display: none; }

  /* Bankroll pill schovat (už pro <980, ale jistota) */
  .bankroll-pill { display: none !important; }

  /* Hero cards na mobil — místo grid 3 sloupce, scroll horizontálně */
  .hero-cards-wrap {
    display: flex; gap: 14px; overflow-x: auto;
    grid-template-columns: unset;
    padding: 0 16px 8px; margin: 24px -16px 0;
    scroll-snap-type: x mandatory;
  }
  .live-card { min-width: 280px; scroll-snap-align: center; }

  /* FOMO bar zmenšit */
  .fomo-bar { font-size: 10px; padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
  .fomo-bar .pill { font-size: 9px; padding: 2px 6px; }
  .fomo-bar span:nth-child(2) { display: none; } /* schovat dlouhý text */

  /* Win ticker — zmenšit, méně rušivé */
  .win-toast { padding: 8px 10px; font-size: 11px; }
  .win-toast .avatar { width: 28px; height: 28px; font-size: 11px; }
  .win-toast .body .meta { font-size: 9px; }

  /* Welcome banner (ebook) — schovat na mobile, je to rušivé v hero */
  .welcome-banner { display: none !important; }

  /* Section general padding */
  .section { padding: 56px 16px; }
  .section-title { font-size: 30px !important; line-height: 1.1; }
  .section-lead { font-size: 14px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px; text-align: center; }

  /* Scroll-down hint na mobile schovat */
  .scroll-down { display: none; }
}

@media (max-width: 480px) {
  .hero-h1 .line { font-size: 49px; letter-spacing: -.035em; line-height: .96; }
  .hero-stat { flex: 0 0 calc(50% - 12px); min-width: 110px; }
  .hero-stat-num { font-size: 20px; }
  .topnav-logo .name { font-size: 14px; }
  .topnav-cta .btn-pill { font-size: 11px; padding: 8px 14px; }
  .section-title { font-size: 26px !important; }

  /* CTA jeste vzdušnější na velmi malých */
  .hero-cta { padding: 0 24px; }

  /* Hide aurora on small screens (perf) */
  .aurora-bg { display: none; }
}

@media (max-width: 360px) {
  .hero-h1 .line { font-size: 43px; line-height: .96; }
  .hero-tag { font-size: 14px; }
}

/* ============== WIN TICKER (proud výher v rohu) ============== */
.win-ticker {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 90;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 340px;
}
@media (max-width: 720px) {
  .win-ticker { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
.win-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(0,255,179,.18), rgba(0,212,255,.10));
  border: 1px solid rgba(0,255,179,.32);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px rgba(0,255,179,.18), 0 0 0 1px rgba(255,255,255,.04);
  color: #fff;
  font-size: 13px;
  pointer-events: auto;
  transform: translateX(-110%);
  opacity: 0;
  animation: winSlide 7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes winSlide {
  0%   { transform: translateX(-110%); opacity: 0; }
  10%  { transform: translateX(0); opacity: 1; }
  85%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-110%); opacity: 0; }
}
.win-toast .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 13px;
  color: #06060a;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255,215,0,.4);
}
.win-toast .body { line-height: 1.3; }
.win-toast .body strong { color: #00FFB3; font-weight: 700; }
.win-toast .body .meta { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }

/* ============== BANKROLL CHART HERO OVERLAY ============== */
.bankroll-pill {
  position: absolute;
  top: 14%;
  right: 6%;
  z-index: 4;
  width: 280px;
  background: linear-gradient(135deg, rgba(255,215,0,.10), rgba(255,94,0,.06));
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 18px;
  /* removed backdrop-filter blur — heavy GPU work */
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: none;
  /* animation removed — was pillFloat 6s infinite */
}
@media (max-width: 980px) { .bankroll-pill { display: none; } }
.bankroll-pill .label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 700;
}
.bankroll-pill .value {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 28px;
  color: #FFD700;
  margin-top: 2px;
}
.bankroll-pill .delta {
  display: inline-flex; gap: 4px; align-items: center;
  font-size: 11px;
  color: #00FFB3;
  font-weight: 700;
  margin-top: 4px;
}
.bankroll-pill svg.spark { width: 100%; height: 70px; margin-top: 10px; display: block; }
.bankroll-pill svg.spark path.line {
  fill: none; stroke: url(#sparkGrad); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: sparkDraw 2.4s cubic-bezier(.16,1,.3,1) .4s forwards;
}
.bankroll-pill svg.spark path.area {
  fill: url(#sparkAreaGrad);
  opacity: 0;
  animation: sparkFade .8s ease 2.2s forwards;
}
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }
@keyframes sparkFade { to { opacity: 1; } }

/* ============== ORBIT AWARD BADGES ============== */
.hero-awards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.award-orb {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,215,0,.18), rgba(168,85,247,.10));
  border: 1px solid rgba(255,215,0,.3);
  backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 12px 36px rgba(255,215,0,.18);
  animation: orbFloat 8s ease-in-out infinite;
}
.award-orb.a { top: 22%; left: 7%; animation-delay: 0s; }
.award-orb.b { top: 60%; left: 4%; animation: none; transform: rotate(-4deg); }
.award-orb.c { top: 78%; left: 14%; animation: none; transform: rotate(2deg); }
.award-orb.d { top: 36%; right: 12%; animation-delay: .8s; }
.award-orb.e { bottom: 18%; right: 7%; animation: none; transform: rotate(-3deg); }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}
@media (max-width: 720px) { .award-orb.b, .award-orb.c, .award-orb.e { display: none; } }

/* ============== 3D TILT for live cards ============== */
.live-card { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; transform-style: preserve-3d; will-change: transform; }
.live-card.tilt-active { box-shadow: 0 30px 80px rgba(255,215,0,.18), 0 0 0 1px rgba(255,215,0,.18) inset; }

/* ============== COUNTER reveal ============== */
.counter-num { transition: color .4s; }
.counter-num.flash { color: #00FFB3 !important; text-shadow: 0 0 24px rgba(0,255,179,.6); }

/* ============== PROOF MARQUEE ============== */
.proof-marquee {
  margin: 28px 0 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255,215,0,.08);
  border-bottom: 1px solid rgba(255,215,0,.08);
  background: linear-gradient(180deg, rgba(5,5,16,0), rgba(255,215,0,.03), rgba(5,5,16,0));
  overflow: hidden;
  position: relative;
}
.proof-marquee::before, .proof-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.proof-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); }
.proof-marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-deep), transparent); }
.proof-track {
  display: flex; gap: 48px;
  white-space: nowrap;
  animation: proofScroll 36s linear infinite;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 13px;
  color: rgba(255,255,255,.5);
  letter-spacing: .08em; text-transform: uppercase;
}
.proof-track span { display: inline-flex; align-items: center; gap: 8px; }
.proof-track span::before { content: '★'; color: #FFD700; }
@keyframes proofScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============== BIG WIN SECTION ============== */
.big-win-sec {
  background: linear-gradient(180deg, transparent 0%, rgba(255,193,7,0.04) 50%, transparent 100%);
  padding: 80px 24px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.big-win-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(0,255,179,0.15), rgba(255,215,0,0.1));
  border: 1px solid rgba(0,255,179,0.35);
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}
.big-win-eyebrow .live-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00FFB3;
  box-shadow: 0 0 12px #00FFB3;
  animation: bwPulse 1.6s ease-in-out infinite;
}
.big-win-eyebrow .verified {
  font-size: 10px; opacity: 0.85;
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 12px;
  color: #00FFB3;
}
@keyframes bwPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.5); }
}
.big-win-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #FFE066 0%, #FFC107 50%, #FF8C00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.big-win-sub {
  font-size: 15px;
  color: var(--text-d);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.big-win-card {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(20,20,30,0.9), rgba(10,10,18,0.95));
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 24px;
  padding: 28px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.4),
    0 0 60px rgba(255,193,7,0.08);
  position: relative;
  text-align: left;
}
.big-win-card::before {
  content: '🏆';
  position: absolute;
  top: -8px; right: -8px;
  font-size: 100px;
  opacity: 0.05;
  transform: rotate(-12deg);
  pointer-events: none;
}
.big-win-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-m);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.big-win-sport { font-weight: 800; color: var(--gold); }
.big-win-match {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #fff;
  line-height: 1.25;
}
.big-win-pred {
  font-size: 13px;
  color: var(--text-d);
  margin-bottom: 24px;
  font-style: italic;
}
.big-win-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.bw-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 8px;
  text-align: center;
}
.bw-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-m);
  margin-bottom: 6px;
  font-weight: 700;
}
.bw-stat-value {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.bw-stat-value.odds {
  background: linear-gradient(135deg, #00D4FF 0%, #00FFB3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bw-stat-value.profit {
  color: #00FFB3;
  text-shadow: 0 0 24px rgba(0,255,179,0.45);
}
.big-win-proof {
  margin: 20px 0 22px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 8px, transparent 8px, transparent 16px),
    linear-gradient(135deg, rgba(255,193,7,0.05), rgba(0,212,255,0.04));
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 10px;
}
.big-win-proof .proof-icon {
  font-size: 40px; opacity: 0.4;
}
.big-win-proof .proof-text {
  font-size: 13px;
  color: var(--text-m);
  font-weight: 600;
}
.big-win-proof .proof-img {
  width: 100%; display: block; border-radius: 14px;
}
.big-win-proof.has-image { padding: 0; min-height: 0; background: transparent; }
.proof-badge {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.75);
  color: #00FFB3;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(0,255,179,0.35);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.big-win-card-foot {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* ============== VERIFY SECTION ============== */
.big-win-verify {
  margin: 8px 0 4px;
  background: linear-gradient(135deg, rgba(0,136,204,0.08) 0%, rgba(42,171,238,0.04) 100%);
  border: 1.5px solid rgba(42,171,238,0.32);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.big-win-verify::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #2AABEE, #0088CC, #2AABEE);
  background-size: 200% 100%;
  animation: verifyShimmer 4s linear infinite;
}
@keyframes verifyShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.verify-banner {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 14px;
}
.verify-seal {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2AABEE, #0088CC);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 6px 18px rgba(42,171,238,0.45),
    0 0 0 3px rgba(42,171,238,0.15),
    inset 0 1px 0 rgba(255,255,255,0.3);
}
.verify-text { min-width: 0; }
.verify-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.verify-sub {
  font-size: 12.5px;
  color: var(--text-d);
  line-height: 1.5;
}

.verify-screenshot {
  display: block;
  margin: 0 0 14px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(42,171,238,0.4);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 0 1px rgba(42,171,238,0.2);
  transition: transform .3s cubic-bezier(.16,1.3,.3,1), box-shadow .3s;
  background: #0a0a14;
}
.verify-screenshot:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 0 2px rgba(42,171,238,0.5);
}
.verify-shot-img {
  width: 100%;
  display: block;
}
.verify-shot-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 30px 12px 12px;
  background: linear-gradient(to top, rgba(10,10,20,0.95), transparent);
  display: flex; justify-content: center;
  pointer-events: none;
}
.verify-shot-badge {
  background: rgba(42,171,238,0.95);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,136,204,0.5);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
}

.verify-cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 50%, #0088CC 100%);
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 28px rgba(0,136,204,0.45),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  transition: transform .3s cubic-bezier(.16,1.3,.3,1), box-shadow .3s, filter .3s;
}
.verify-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.verify-cta:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 14px 36px rgba(0,136,204,0.6),
    inset 0 1px 0 rgba(255,255,255,0.35);
  filter: brightness(1.06);
}
.verify-cta:hover::before { transform: translateX(100%); }
.verify-cta-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.25);
}
.verify-cta-text {
  flex: 1;
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.verify-cta-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.verify-cta-brand {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.verify-cta-arrow {
  font-size: 22px;
  font-weight: 900;
  opacity: 0.9;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.verify-cta:hover .verify-cta-arrow { transform: translateX(4px); }

.verify-foot {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
  justify-content: center;
}
.verify-chip {
  font-size: 10.5px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: var(--text-m);
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .big-win-verify { padding: 14px; }
  .verify-banner { gap: 10px; }
  .verify-seal { width: 38px; height: 38px; }
  .verify-title { font-size: 14px; }
  .verify-sub { font-size: 11.5px; }
  .verify-cta { padding: 12px 14px; gap: 10px; }
  .verify-cta-icon { width: 32px; height: 32px; }
  .verify-cta-brand { font-size: 16px; }
  .verify-foot .verify-chip { font-size: 9.5px; padding: 4px 8px; }
}
.big-win-disclaimer {
  font-size: 12px;
  color: var(--text-m);
  margin-top: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  opacity: 0.85;
}
.big-win-disclaimer a { color: var(--gold); text-decoration: underline; }
@media (max-width: 720px) {
  .big-win-sec { padding: 56px 16px; }
  .big-win-card { padding: 20px; }
  .big-win-match { font-size: 18px; }
  .big-win-stats { gap: 6px; }
  .bw-stat { padding: 12px 4px; border-radius: 10px; }
  .bw-stat-value { font-size: 20px; }
  .bw-stat-label { font-size: 10px; }
  .big-win-proof { min-height: 140px; padding: 18px; }
}

/* ============== FOMO STICKY BAR ============== */
.fomo-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 110;
  background: linear-gradient(90deg, #FF2E5C, #FF5E00, #FFD700);
  background-size: 200% 100%;
  animation: fomoShift 6s linear infinite;
  color: #06060a;
  padding: 8px 16px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(255,46,92,.4);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.fomo-bar.hidden { transform: translateY(-110%); }
.fomo-bar .pill {
  background: rgba(0,0,0,.22);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 12px;
  letter-spacing: .04em;
}
.fomo-bar .cta-link { color: #06060a; text-decoration: underline; font-weight: 800; }
.fomo-bar .close {
  background: rgba(0,0,0,.22); color: #fff; border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; line-height: 1;
  flex-shrink: 0;
}
.fomo-bar .close:hover, .fomo-bar .close:active { background: rgba(0,0,0,.4); }
@keyframes fomoShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
body.has-fomo .topnav { top: 38px; }
@media (max-width: 720px) {
  .fomo-bar { font-size: 11px; gap: 8px; padding: 8px 12px; min-height: 44px; }
  .fomo-bar .pill { font-size: 10px; padding: 2px 7px; }
  .fomo-bar .close {
    width: 36px; height: 36px; font-size: 18px;
    margin-left: auto; /* posun X do pravého rohu pro snazší tap */
  }
  body.has-fomo .topnav { top: 44px; }
}

/* ============== TESTIMONIAL CAROUSEL ============== */
.testi-section {
  padding: 80px 24px;
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(168,85,247,.04), transparent);
}
.testi-wrap { max-width: 1200px; margin: 0 auto; }
.testi-track-outer {
  position: relative;
  overflow: hidden;
  margin-top: 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.testi-track {
  display: flex; gap: 22px;
  animation: testiScroll 50s linear infinite;
  width: max-content;
}
.testi-track:hover { animation-play-state: paused; }
@keyframes testiScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.testi-card {
  flex-shrink: 0;
  width: 340px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,215,0,.12);
  backdrop-filter: blur(16px);
  position: relative;
  box-shadow: 0 18px 48px rgba(0,0,0,.3);
}
.testi-card .stars { color: #FFD700; font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; }
.testi-card .quote { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.85); }
.testi-card .quote::before { content: '“'; font-family: 'Crimson Pro', serif; font-size: 40px; color: rgba(255,215,0,.3); display: block; line-height: 0.6; margin-bottom: 8px; }
.testi-card .who { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,215,0,.08); }
.testi-card .who .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FF5E00);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #06060a;
  font-family: 'Orbitron', sans-serif;
}
.testi-card .who .meta { line-height: 1.2; }
.testi-card .who .name { font-weight: 700; font-size: 13px; color: #fff; }
.testi-card .who .tier { font-size: 11px; color: rgba(255,215,0,.7); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.testi-card .gain {
  position: absolute; top: 16px; right: 16px;
  background: rgba(0,255,179,.15);
  border: 1px solid rgba(0,255,179,.32);
  color: #00FFB3;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
}

/* ============== BEFORE / AFTER section ============== */
.ba-section { padding: 90px 24px; position: relative; }
.ba-wrap { max-width: 1180px; margin: 0 auto; }
.ba-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px;
  align-items: stretch;
  margin-top: 40px;
}
@media (max-width: 880px) {
  .ba-grid { grid-template-columns: 1fr; gap: 18px; }
}
.ba-col {
  border-radius: 24px;
  padding: 28px;
  position: relative;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.06);
}
.ba-col.before {
  background: linear-gradient(180deg, rgba(255,46,92,.08), rgba(255,46,92,.02));
  border-color: rgba(255,46,92,.18);
}
.ba-col.after {
  background: linear-gradient(180deg, rgba(0,255,179,.10), rgba(255,215,0,.04));
  border-color: rgba(0,255,179,.22);
  box-shadow: 0 30px 80px rgba(0,255,179,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.ba-col h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; letter-spacing: .04em;
  margin-bottom: 4px;
}
.ba-col.before h3 { color: #FF6B85; }
.ba-col.after h3  { color: #00FFB3; }
.ba-col .sub { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px; font-weight: 700; }
.ba-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ba-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: rgba(255,255,255,.85);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.ba-list .icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.ba-list .icon.bad { background: rgba(255,46,92,.2); color: #FF6B85; }
.ba-list .icon.good { background: rgba(0,255,179,.2); color: #00FFB3; }
.ba-arrow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 32px; color: #FFD700;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  position: relative;
}
.ba-arrow::after {
  content: '';
  width: 1px; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(255,215,0,.3), transparent);
  position: absolute; top: 20%;
}
@media (max-width: 880px) {
  .ba-arrow { transform: rotate(90deg); padding: 10px 0; }
}
.ba-col .stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 8px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.ba-col .stat-row .big {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 32px;
}
.ba-col.before .stat-row .big { color: #FF6B85; }
.ba-col.after  .stat-row .big { color: #00FFB3; }
.ba-col .stat-row .lbl { font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

/* ============== DASHBOARD PREVIEW ============== */
.dash-section { padding: 80px 24px; position: relative; }
.dash-wrap { max-width: 1180px; margin: 0 auto; }
.dash-frame {
  margin-top: 36px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #0c0c1a, #050510);
  border: 1px solid rgba(255,215,0,.18);
  box-shadow: 0 50px 120px rgba(255,215,0,.10), 0 0 0 1px rgba(255,215,0,.06) inset;
  position: relative;
}
.dash-frame::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,215,0,.5), transparent 40%, transparent 60%, rgba(0,255,179,.3));
  z-index: -1;
  filter: blur(28px);
  opacity: .5;
}
.dash-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.dash-bar .dot.r { background: #FF5F57; }
.dash-bar .dot.y { background: #FEBC2E; }
.dash-bar .dot.g { background: #28C840; }
.dash-bar .url { margin-left: 12px; font-size: 12px; color: rgba(255,255,255,.4); font-family: monospace; }
.dash-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 460px;
}
@media (max-width: 720px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { display: none; }
}
.dash-side {
  background: rgba(255,215,0,.02);
  padding: 18px 14px;
  border-right: 1px solid rgba(255,255,255,.05);
}
.dash-side .item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
  font-weight: 600;
}
.dash-side .item.active {
  background: linear-gradient(135deg, rgba(255,215,0,.18), rgba(255,94,0,.08));
  color: #FFD700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.dash-main { padding: 24px; }
.dash-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
.dash-stat {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.dash-stat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.45); font-weight: 700; }
.dash-stat .val { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 22px; margin-top: 4px; }
.dash-stat .delta { font-size: 11px; margin-top: 2px; font-weight: 700; }
.dash-stat .delta.up { color: #00FFB3; }
.dash-chart {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 18px;
  height: 220px;
  position: relative;
}
.dash-chart svg { width: 100%; height: 100%; display: block; }

/* ============== AURORA GLOW BG (static, lighter) ============== */
.aurora-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(255,215,0,.06), transparent 60%),
    radial-gradient(700px 500px at 85% 75%, rgba(168,85,247,.04), transparent 60%);
  /* removed: mix-blend-mode + animation (perf hit) */
}
@media (max-width: 720px) {
  .aurora-bg { display: none; }
}