:root {
  --bg:          #030508;
  --bg2:         #07090f;
  --surface:     #0d1422;
  --surface2:    #111b2e;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.13);
  --cyan:        #00ffcc;
  --cyan-glow:   rgba(0,255,204,0.2);
  --cyan-dim:    rgba(0,255,204,0.07);
  --gold:        #ffd700;
  --gold-glow:   rgba(255,215,0,0.2);
  --gold-dim:    rgba(255,215,0,0.07);
  --green:       #00e87a;
  --green-dim:   rgba(0,232,122,0.07);
  --red:         #ff4d4d;
  --purple:      #a855f7;
  --purple-dim:  rgba(168,85,247,0.07);
  --blue:        #3b82f6;
  --orange:      #ea580c;
  --text:        #e8edf5;
  --muted:       #6e87a3;
  --muted2:      #90a7c0;
  --radius:      14px;
  --radius-sm:   9px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }

@keyframes pulse-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,232,122,0.55); }
  50%      { box-shadow: 0 0 0 9px rgba(0,232,122,0); }
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes sparkle {
  0%,100% { opacity:0.85; transform:scale(1) rotate(0deg); }
  50%      { opacity:1;    transform:scale(1.3) rotate(20deg); }
}
@keyframes cursor-blink { 0%,100%{opacity:1} 48%{opacity:1} 50%{opacity:0} 98%{opacity:0} }
@keyframes type-text {
  from { width:0 }
  to   { width: 11ch }
}
@keyframes check-draw {
  from { stroke-dashoffset: 40 }
  to   { stroke-dashoffset: 0 }
}
@keyframes shield-scan {
  0%   { transform: translateY(-30px); opacity:0 }
  30%  { opacity:0.8 }
  70%  { opacity:0.8 }
  100% { transform: translateY(30px); opacity:0 }
}
@keyframes msg-pill-in {
  from { opacity:0; transform: translateX(-8px) scale(0.95); }
  to   { opacity:1; transform: translateX(0) scale(1); }
}
@keyframes count-notif {
  0%   { transform:scale(1) }
  50%  { transform:scale(1.4) }
  100% { transform:scale(1) }
}
@keyframes scan-v {
  0%,100% { transform: translateY(-6px); opacity:0 }
  20%     { opacity:0.7 }
  80%     { opacity:0.7 }
  100%    { transform: translateY(6px) }
}
@keyframes fade-in-up {
  from { opacity:0; transform:translateY(28px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes conn-draw {
  from { width:0 }
  to   { width:100% }
}
@keyframes cursor-float {
  0%,100% { opacity:1; transform:translateY(0) }
  50%     { opacity:0.4; transform:translateY(2px) }
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes filling-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.6; transform:scale(0.96); }
}
@keyframes countdown-tick { 0%,100%{opacity:1} 50%{opacity:0.7} }
/* ── Hero headline glitch ────────────────────────────────────────────── */
@keyframes hglitch {
  0%,82%,100% { transform:none; text-shadow:none; }
  83%  { transform:translate(-3px,0) skewX(-2deg); text-shadow:-3px 0 rgba(0,255,204,0.7),3px 0 rgba(255,55,55,0.7); }
  84%  { transform:translate(3px,0) skewX(1deg);   text-shadow:3px 0 rgba(0,255,204,0.5),-3px 0 rgba(255,55,55,0.5); }
  85%  { transform:translate(-1px,1px) skewX(-1deg); text-shadow:-2px 0 rgba(0,255,204,0.6),2px 0 rgba(255,55,55,0.4); }
  86%  { transform:none; text-shadow:none; }
  88%  { transform:translate(2px,-1px) skewX(1.5deg); text-shadow:2px 0 rgba(255,200,0,0.55),-2px 0 rgba(0,200,255,0.45); }
  89%  { transform:none; text-shadow:none; }
}
.hero-glitch { animation:none; position:relative; } /* glitch disabled — looks spammy */

/* ── Stat community breakdown ────────────────────────────────────────── */
.stat-community { gap:6px !important; }
.stat-comm-grid { display:flex; gap:10px; align-items:flex-end; justify-content:center; }
.stat-comm-grid > div { display:flex; flex-direction:column; align-items:center; gap:1px; }
.stat-comm-grid strong { font-size:clamp(0.88rem,2.4vw,1.1rem) !important; }
.stat-comm-grid em { color:var(--muted); font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; font-style:normal; }
.stat-comm-sep { width:1px; height:22px; background:var(--border); align-self:center; flex-shrink:0; }

@keyframes activity-in {
  from { opacity:0; transform:translateY(-100%) scaleY(0.8); }
  to   { opacity:1; transform:translateY(0) scaleY(1); }
}
@keyframes activity-out {
  from { opacity:1; transform:translateY(0); max-height:44px; }
  to   { opacity:0; transform:translateY(4px); max-height:0; padding:0; margin:0; }
}
@keyframes popup-in {
  from { opacity:0; transform:translateY(20px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes popup-bar-shrink {
  from { width:100%; }
  to   { width:0%; }
}

[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease calc(var(--delay,0ms)),
              transform 0.7s ease calc(var(--delay,0ms));
}
[data-animate].visible { opacity:1; transform:translateY(0); }

.gradient-text {
  background: linear-gradient(120deg, var(--cyan) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.section-label::before {
  content:"";
  display:block;
  width:18px; height:2px;
  background: var(--cyan);
  box-shadow: 0 0 7px var(--cyan);
  border-radius:2px;
  flex-shrink:0;
}

h2 {
  font-size: clamp(1.55rem, 5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 10px;
}

.section-sub {
  color: var(--muted2);
  font-size: clamp(0.88rem, 2.5vw, 0.97rem);
  line-height: 1.7;
  margin-bottom: 44px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); opacity:0.88; }
.btn-primary { background: var(--cyan); color: #020509; }
.btn-primary:hover { box-shadow: 0 0 30px rgba(0,255,204,0.5), 0 6px 20px rgba(0,255,204,0.2); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 0.83rem; }
.btn-telegram {
  display: flex; width: 100%;
  background: #229ed9; color:#fff;
  font-size: 0.95rem; font-weight:700;
}
.btn-telegram:hover { box-shadow: 0 0 26px rgba(34,158,217,0.5), 0 6px 20px rgba(34,158,217,0.25); }
.btn-disabled { opacity:0.28 !important; pointer-events:none !important; transform:none !important; }

#ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
}

.fomo-ticker {
  position: sticky;
  top: 0;
  z-index: 180;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0,255,204,0.08) 0%, rgba(255,215,0,0.06) 50%, rgba(0,255,204,0.08) 100%);
  border-bottom: 1px solid rgba(0,255,204,0.15);
  height: 36px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(16px);
}
.fomo-ticker-track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: ticker-scroll 28s linear infinite;
  padding-inline: 28px;
}
.fomo-ticker-track:hover { animation-play-state: paused; }
.fomo-ticker-track span { color: var(--muted2); font-size: 0.74rem; font-weight: 600; flex-shrink: 0; }
.fomo-ticker-track strong { color: var(--cyan); font-weight: 800; }
.tick-sep { color: var(--muted) !important; margin: 0 4px; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Mobile: text at top (16px padding), so table zone opens from ~38% down */
  background: linear-gradient(180deg,
    rgba(3,5,8,0.97) 0%,
    rgba(3,5,8,0.95) 36%,
    rgba(3,5,8,0.38) 58%,
    rgba(3,5,8,0.06) 80%,
    transparent 100%
  );
}

@media (min-width: 900px) {
  .hero-overlay {
    /* Desktop: left = solid text zone, right = 3D visible zone. Clean split. */
    background: linear-gradient(to right,
      rgba(3,5,8,0.98) 0%,
      rgba(3,5,8,0.97) 34%,
      rgba(3,5,8,0.80) 50%,
      rgba(3,5,8,0.18) 66%,
      transparent 78%
    );
  }
  .hero-copy { max-width: 52%; }
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,255,204,0.01) 3px, rgba(0,255,204,0.01) 4px
  );
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding: clamp(52px, 10vw, 96px) clamp(16px,4vw,48px) clamp(48px,8vw,80px);
}
@media (max-width: 767px) {
  /* Text at top, table visible below — hero shrinks to fit so no dead black space */
  .hero { align-items: flex-start; min-height: 0; height: 100svh; }
  .hero-inner { padding-top: 72px; padding-bottom: 20px; }
  /* Tighten sections so there's no giant gap after hero */
  .section { padding-top: clamp(36px,6vw,56px); padding-bottom: clamp(36px,6vw,56px); }
  .how-section { padding-top: clamp(36px,6vw,56px); padding-bottom: clamp(36px,6vw,56px); }
  .circuit-section { padding-top: clamp(36px,6vw,56px); padding-bottom: clamp(36px,6vw,56px); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 14px;
  border: 1px solid rgba(0,255,204,0.22);
  border-radius: 999px;
  background: rgba(0,255,204,0.06);
  color: var(--cyan);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse-ring 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

.hero-online-num {
  color: var(--green);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.hero-copy h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  max-width: 600px;
  text-shadow: 0 2px 28px rgba(3,5,8,0.9), 0 0 60px rgba(3,5,8,0.7);
}

.hero-copy > p {
  max-width: 480px;
  color: rgba(232,237,245,0.82);
  font-size: clamp(0.92rem, 2.5vw, 1.02rem);
  line-height: 1.7;
  margin-bottom: 28px;
  text-shadow: 0 1px 12px rgba(3,5,8,0.98), 0 2px 20px rgba(3,5,8,0.9);
}

.hero-form .input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}

.hero-form input[type="email"] {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(0,255,204,0.2);
  border-radius: var(--radius-sm);
  background: rgba(13,20,34,0.92);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-form input[type="email"]:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,255,204,0.1);
}
.hero-form input[type="email"]::placeholder { color: var(--muted); }
.hero-form .btn { height: 52px; width:100%; font-size:0.95rem; }
.form-note { margin-top:10px; color:var(--muted); font-size:0.73rem; }

@media (min-width: 480px) {
  .hero-form .input-row { flex-direction: row; }
  .hero-form .btn { width: auto; flex-shrink:0; }
}

.stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0,255,204,0.09);
  border-bottom: 1px solid rgba(0,255,204,0.09);
  background: linear-gradient(180deg, rgba(0,255,204,0.025) 0%, transparent 100%);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  text-align: center;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Stats are at DOM positions 1,3,5,7 (dividers at 2,4,6 are hidden).
   In 2-col grid: col-2 = positions 3 and 7 → no right border.
   Last row = positions 5 and 7 → no bottom border. */
@media (max-width: 639px) {
  .stats-bar .stat:nth-child(3),
  .stats-bar .stat:nth-child(7) { border-right: none; }
  .stats-bar .stat:nth-child(5),
  .stats-bar .stat:nth-child(7) { border-bottom: none; }
}
.stat strong {
  font-size: clamp(1.1rem,3.5vw,1.45rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat span { color:var(--muted); font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.stat-divider { display:none; }

@media (min-width: 640px) {
  .stats-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .stat { flex: 1; padding: 22px 28px; border-right: none; border-bottom: none; }
  .stat-divider { display:block; width:1px; background:var(--border); margin:14px 0; flex-shrink:0; }
}

.how-section {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(0,255,204,0.055) 0%, transparent 65%),
    var(--bg2);
  padding: clamp(56px,8vw,100px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(0,255,204,0.08);
}
.how-inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(16px,4vw,48px);
}
.how-inner > h2, .how-inner > .section-sub { max-width:680px; }
.how-inner > h2, .how-inner > .section-label { display:block; }

.how-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}

.how-connector {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.conn-line {
  position: absolute;
  top: 88px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  box-shadow: 0 0 8px rgba(0,255,204,0.4);
  width: 0;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1) 0.4s;
}
.conn-line.drawn { width:100%; }
#conn1 { left: calc(33.33% - 32px); }
#conn2 { left: calc(66.66% - 32px); }

.how-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s;
}
.how-step:hover { border-color: rgba(0,255,204,0.25); }
.how-step::before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(0,255,204,0.05) 0%, transparent 65%);
  opacity:0; transition: opacity 0.3s;
}
.how-step:hover::before { opacity:1; }

.step-num-badge {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em;
  color: var(--cyan); text-shadow: 0 0 10px rgba(0,255,204,0.4);
}

.how-step-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.how-step-copy h3 { font-size: clamp(1rem, 2.5vw, 1.1rem); font-weight: 700; margin-bottom: 8px; }
.how-step-copy p  { color: var(--muted2); font-size: clamp(0.84rem,2vw,0.9rem); line-height: 1.65; margin: 0; }

@media (min-width: 860px) {
  .how-steps { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .how-connector { display:block; }
}

.mock-email {
  width: 100%; max-width: 280px;
  border: 1px solid rgba(0,255,204,0.18);
  border-radius: 10px;
  background: var(--surface2);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.mock-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
}
.mock-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.2); flex-shrink:0; }
.mock-url { flex:1; font-size:0.65rem; color:var(--muted2); font-weight:600; text-align:center; letter-spacing:0.02em; }
.mock-form-inner { padding: 16px; display: grid; gap: 10px; }
.mock-label { font-size:0.68rem; font-weight:700; color:var(--muted2); }
.mock-input-wrap {
  display: flex; align-items: center; gap: 2px;
  height: 34px; padding: 0 10px;
  border: 1px solid rgba(0,255,204,0.28);
  border-radius: 6px;
  background: rgba(0,255,204,0.04);
  box-shadow: 0 0 0 3px rgba(0,255,204,0.06);
}
.mock-typed {
  font-size:0.72rem; color:var(--cyan); font-weight:600;
  overflow:hidden; width:0; white-space:nowrap;
  animation: type-text 1.8s steps(16) 0.5s infinite alternate;
}
.mock-cursor-blink { color:var(--cyan); font-weight:300; font-size:0.9rem; animation:cursor-blink 1.1s step-end infinite; }
.mock-submit {
  height:34px; border-radius:6px; background:var(--cyan); color:#020509;
  font-size:0.72rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}

.mock-eligibility { display:flex; flex-direction:column; align-items:center; gap:16px; }
.shield-wrap { position:relative; width:72px; height:80px; display:flex; align-items:center; justify-content:center; }
.shield-svg { width:72px; height:80px; }
.shield-scan { stroke-width:8; animation:shield-scan 2.5s ease-in-out infinite; }
.check-path {
  stroke-dasharray:40; stroke-dashoffset:40;
  animation: check-draw 0.6s ease-out 1.2s forwards, check-draw 0.6s ease-out 3.7s forwards;
}
.eligibility-tags { display:flex; gap:8px; }
.etag { padding:4px 11px; border-radius:999px; font-size:0.68rem; font-weight:800; }
.etag-age { background:rgba(0,255,204,0.1); color:var(--cyan); border:1px solid rgba(0,255,204,0.2); }
.etag-ok  { background:rgba(0,232,122,0.1); color:var(--green); border:1px solid rgba(0,232,122,0.2); }

.mock-telegram { display:flex; flex-direction:column; align-items:center; gap:10px; }
.tg-handle { color:var(--cyan); font-size:0.71rem; font-weight:800; letter-spacing:0.02em; opacity:0.85; }
.tg-circle {
  position:relative; width:64px; height:64px; border-radius:50%;
  box-shadow:0 0 24px rgba(34,158,217,0.4);
  animation: float-y 2.8s ease-in-out infinite;
}
.tg-circle svg { width:100%; height:100%; }
.notif-badge {
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; border-radius:999px;
  background:var(--red); border:2px solid var(--bg2);
  display:flex; align-items:center; justify-content:center;
}
.notif-num { font-size:0.6rem; font-weight:900; color:white; animation:count-notif 1.5s ease-in-out 2s infinite; }
.tg-messages-preview { display:grid; gap:7px; width:100%; max-width:220px; }
.tg-msg-pill {
  padding:6px 12px; border-radius:999px;
  background:var(--surface2); border:1px solid var(--border2);
  font-size:0.7rem; font-weight:700; color:var(--text);
  opacity:0;
  animation: msg-pill-in 0.4s ease-out var(--mp-delay, 0s) forwards,
             msg-pill-in 0.4s ease-out calc(var(--mp-delay, 0s) + 3s) forwards;
}

.circuit-section {
  padding: clamp(56px,8vw,100px) clamp(16px,4vw,48px);
  background:
    radial-gradient(ellipse 55% 60% at 88% 55%, rgba(255,215,0,0.05) 0%, transparent 65%),
    var(--bg);
}
.circuit-inner { max-width: 1100px; margin-inline: auto; }
.circuit-inner > h2,
.circuit-inner > .section-sub { max-width:680px; }
.circuit-inner > h2,
.circuit-inner > .section-label { display:block; }

.circuit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 540px) { .circuit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .circuit-grid { grid-template-columns: repeat(4,1fr); } }

.circuit-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.2s;
}
.circuit-card:hover { transform: translateY(-3px); }
.circuit-card::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(0,255,204,0.05) 0%, transparent 70%);
  opacity:0; transition: opacity 0.3s;
}
.circuit-card:hover::before { opacity:1; }
.circuit-live {
  border-color: rgba(255,215,0,0.25);
  background: linear-gradient(135deg, var(--surface), rgba(255,215,0,0.04));
}
.circuit-live::before { background: radial-gradient(circle at 50% 0%, rgba(255,215,0,0.08) 0%, transparent 70%); }
.circuit-private { border-color: rgba(168,85,247,0.2); }

.circuit-status-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }

.circuit-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  width: fit-content;
}
.status-live    { background:rgba(255,215,0,0.1); color:var(--gold); border:1px solid rgba(255,215,0,0.25); }
.status-soon    { background:rgba(0,255,204,0.08); color:var(--cyan); border:1px solid rgba(0,255,204,0.2); }
.status-tonight { background:rgba(0,232,122,0.08); color:var(--green); border:1px solid rgba(0,232,122,0.2); }
.status-private { background:rgba(168,85,247,0.08); color:var(--purple); border:1px solid rgba(168,85,247,0.2); }

.live-ring {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); animation:pulse-ring 1.5s ease-in-out infinite; box-shadow:0 0 5px var(--gold);
}

.filling-fast {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em;
  color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,0.6);
  animation: filling-pulse 1.2s ease-in-out infinite;
}

.countdown-wrap { display:flex; align-items:baseline; gap:6px; margin-bottom:-4px; }
.countdown-label { color:var(--muted2); font-size:0.7rem; font-weight:600; }
.countdown-timer {
  font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--gold); text-shadow: 0 0 14px rgba(255,215,0,0.4);
  animation: countdown-tick 1s step-end infinite;
}

.circuit-icon { display:flex; align-items:center; justify-content:center; height:56px; }
.circuit-card h3 { font-size:0.98rem; font-weight:700; color:var(--text); }

.prize-row { display:flex; justify-content:space-between; align-items:baseline; }
.prize-row span { color:var(--muted2); font-size:0.76rem; }
.prize-amount { font-size:1.05rem; font-weight:900; color:var(--gold); letter-spacing:-0.01em; }

.fill-bar { height:5px; border-radius:999px; background:rgba(255,255,255,0.06); overflow:hidden; }
.fill-bar-inner {
  height:100%; width:0; border-radius:999px;
  background:var(--fill-color, var(--cyan));
  box-shadow:0 0 8px var(--fill-color, var(--cyan));
  transition: width 1.4s cubic-bezier(0.34,1.56,0.64,1) var(--fill-delay,0s);
}
.circuit-section.bars-animated .fill-bar-inner { width: var(--fill-pct); }

.fill-meta { display:flex; justify-content:space-between; font-size:0.71rem; color:var(--muted2); font-weight:600; }
.fill-pct-label { color:var(--muted); }

.circuit-cta {
  display:flex; align-items:center; justify-content:center;
  height:38px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.05); border:1px solid var(--border2);
  color:var(--text); font-size:0.82rem; font-weight:700; margin-top:auto;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.circuit-cta:hover { background:var(--cyan-dim); border-color:rgba(0,255,204,0.3); color:var(--cyan); }

.activity-stream {
  display:flex; flex-direction:column; gap:6px;
  margin: 18px 0 -8px; height:44px; min-height:44px; overflow:hidden;
}
.activity-item {
  display:none; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid rgba(0,255,204,0.1); border-radius:var(--radius-sm);
  background:rgba(0,255,204,0.03);
  font-size:0.8rem; color:var(--muted2); line-height:1.4;
  max-height:44px; overflow:hidden;
}
.activity-item strong { color:var(--text); }
.activity-item.activity-visible { display:flex; animation:activity-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.activity-item.activity-leaving { display:flex !important; animation:activity-out 0.35s ease forwards; }

.circuit-footer {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  margin-top:40px; text-align:center; padding:28px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:rgba(0,255,204,0.03);
}
.circuit-footer p { color:var(--muted2); font-size:0.92rem; max-width:460px; }
.circuit-footer strong { color:var(--text); }

.features-section {
  background:
    radial-gradient(ellipse 75% 50% at 50% 50%, rgba(168,85,247,0.04) 0%, transparent 70%),
    var(--bg2);
  border-top: 1px solid rgba(0,255,204,0.07);
}

.section {
  padding: clamp(56px,8vw,100px) clamp(16px,4vw,48px);
}
.section > .section-label,
.section > h2,
.section > .section-sub { display:block; max-width:680px; margin-inline:auto; text-align:center; }
.section > .section-label { display:flex; justify-content:center; }

/* ── Features — editorial 2-col grid ───────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 900px;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width:540px) { .features-grid { grid-template-columns: 1fr 1fr; } }

.feature-card {
  position: relative;
  padding: 34px 36px;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  overflow: hidden;
  transition: background 0.2s;
  cursor: default;
}
/* Remove right border from even cards (right column) */
@media (min-width:540px) {
  .feature-card:nth-child(2n) { border-right: none; }
  /* Remove bottom border from last row (5th and 6th cards) */
  .feature-card:nth-last-child(-n+2) { border-bottom: none; }
}
/* Mobile: only last card has no bottom border */
@media (max-width:539px) {
  .feature-card:last-child { border-bottom: none; }
}

.feature-card:hover {
  background: rgba(255,255,255,0.022);
  transform: none;
  box-shadow: none;
}
.feature-card::before { display: none; }
.feature-card:hover::before { display: none; }
.card-glow-overlay { display: none; }
.feat-icon-wrap { display: none; }

/* Each card gets a small accent square in the corner to replace icons */
.feature-card::after {
  content: '';
  position: absolute;
  top: 34px; right: 36px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-dot, rgba(0,255,204,0.45));
  box-shadow: 0 0 8px var(--card-dot, rgba(0,255,204,0.3));
}
.feature-gold   { --card-dot: rgba(255,215,0,0.55); }
.feature-green  { --card-dot: rgba(0,232,122,0.55); }
.feature-purple { --card-dot: rgba(168,85,247,0.55); }
.feature-blue   { --card-dot: rgba(59,130,246,0.55); }
.feature-orange { --card-dot: rgba(234,88,12,0.55); }

/* Neutralize the gold card's special styling */
.feature-gold { border-color: var(--border); background: var(--surface); }

.feat-svg { display: none; }

.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.feature-card p  { color: var(--muted2); font-size: 0.88rem; line-height: 1.72; margin: 0; }

.icon-sparkle   { transform-origin:center; opacity:0.85; }
.icon-spin-slow { animation: spin 8s linear infinite; transform-origin:center; }
.icon-cursor-blink { animation: cursor-float 1.8s ease-in-out infinite; }
.icon-node      { animation: node-pulse 2s ease-in-out infinite alternate; }
.scan-line-anim { animation: scan-v 2.5s ease-in-out infinite; transform-origin:center; }

@keyframes node-pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
@keyframes cursor-float {
  0%,100%{opacity:1; transform:translateY(0)}
  50%{opacity:0.4; transform:translateY(2px)}
}

.telegram-section {
  background:
    radial-gradient(ellipse 55% 60% at 15% 50%, rgba(34,158,217,0.055) 0%, transparent 65%),
    var(--bg2);
  border-top: 1px solid rgba(0,255,204,0.07);
  border-bottom: 1px solid rgba(0,255,204,0.07);
  padding: clamp(56px,8vw,100px) clamp(16px,4vw,48px);
}
.tg-inner {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  max-width: 1100px; margin-inline: auto;
}
@media (min-width:860px) { .tg-inner { grid-template-columns: 1fr minmax(280px,440px); align-items:center; } }

.tg-copy h2 { font-size:clamp(1.5rem,4vw,2.2rem); margin-bottom:14px; }
.tg-copy > p { color:var(--muted2); font-size:clamp(0.88rem,2vw,0.93rem); line-height:1.7; margin-bottom:24px; max-width:480px; }
.tg-list { display:grid; gap:11px; }
.tg-item { display:flex; align-items:center; gap:11px; font-size:0.88rem; font-weight:600; }
.tg-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex-shrink:0; }

.tg-board {
  border:1px solid rgba(0,255,204,0.14); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,255,204,0.05), 0 30px 80px rgba(0,0,0,0.65);
}
.tg-board-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--border);
  background:rgba(0,255,204,0.035);
}
.tg-live { color:var(--green); font-size:0.7rem; font-weight:800; letter-spacing:0.06em; text-shadow:0 0 8px var(--green); animation:blink 2s step-end infinite; }
.tg-board-header span:last-child { color:var(--muted2); font-size:0.76rem; font-weight:600; }

.tg-message {
  padding:13px 18px; border-bottom:1px solid var(--border);
  opacity:0; transform:translateX(-8px);
  transition: opacity 0.45s ease var(--msg-delay,0s), transform 0.45s ease var(--msg-delay,0s);
}
.tg-message.visible { opacity:1; transform:translateX(0); }
.tg-message:last-child { border-bottom:none; }
.tg-message p { margin-top:6px; color:var(--text); font-size:0.83rem; line-height:1.5; }

.msg-label {
  display:inline-flex; padding:2px 8px; border-radius:4px;
  font-size:0.64rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em;
}
.msg-label.championship { background:var(--gold-dim); color:var(--gold); border:1px solid rgba(255,215,0,0.18); }
.msg-label.challenge    { background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(0,255,204,0.18); }
.msg-label.freeroll     { background:var(--green-dim); color:var(--green); border:1px solid rgba(0,232,122,0.18); }
.msg-label.private      { background:var(--purple-dim); color:var(--purple); border:1px solid rgba(168,85,247,0.18); }

.join-section { background: var(--bg); }
.join-inner {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  max-width: 1100px; margin-inline: auto; align-items: start;
}
@media (min-width:860px) { .join-inner { grid-template-columns:1fr minmax(320px,460px); } }

.join-copy h2 { font-size:clamp(1.5rem,4vw,2.2rem); margin-bottom:14px; }
.join-copy > p { color:var(--muted2); font-size:0.92rem; line-height:1.7; margin-bottom:22px; max-width:460px; }
.eligibility-info > p { color:var(--muted2); font-size:0.86rem; line-height:1.65; margin-bottom:16px; }
.eligibility-info strong { color:var(--text); }

.license-block {
  display:grid; gap:4px; padding:14px 16px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
}
.license-block span { color:var(--muted); font-size:0.69rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; }
.license-block span:last-child { font-weight:500; text-transform:none; letter-spacing:0; }
.license-block strong { color:var(--text); font-size:0.86rem; }

.join-form {
  display: grid; gap: 11px; padding: 24px;
  border: 1px solid rgba(0,255,204,0.14); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0 40px rgba(0,255,204,0.04), 0 30px 80px rgba(0,0,0,0.5);
  position: relative; overflow: hidden;
}
.join-form::before {
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:0.55;
}
.join-form h3 { font-size:1rem; font-weight:700; margin-bottom:4px; }
.join-form label { color:var(--muted2); font-size:0.78rem; font-weight:700; margin-top:2px; }

.join-form input[type="email"],
.join-form select {
  width:100%; height:48px; padding:0 13px;
  border:1px solid var(--border2); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text);
  font:inherit; font-size:0.92rem;
  transition:border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance:none;
}
.join-form input[type="email"]:focus,
.join-form select:focus {
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,255,204,0.1);
}
.join-form input[type="email"]::placeholder { color:var(--muted); }
.join-form select { cursor:pointer; }
.join-form select option { background:var(--surface); }

.checkbox-label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:4px 0; }
.checkbox-label input[type="checkbox"] { width:18px; height:18px; margin-top:1px; accent-color:var(--cyan); cursor:pointer; flex-shrink:0; }
.checkbox-label span { color:var(--muted2); font-size:0.84rem; line-height:1.5; }

.form-status {
  padding:11px 13px; border-radius:var(--radius-sm);
  background:rgba(0,255,204,0.04); border:1px solid rgba(0,255,204,0.1);
  color:var(--muted2); font-size:0.83rem; line-height:1.45;
}
.form-status.blocked { background:rgba(255,77,77,0.07); border-color:rgba(255,77,77,0.2); color:#fca5a5; }
.form-status.ready   { background:rgba(0,232,122,0.07); border-color:rgba(0,232,122,0.22); color:#6ee7b7; }

.form-note-small { color:var(--muted); font-size:0.74rem; line-height:1.5; text-align:center; }

.footer {
  background: var(--surface);
  border-top: 1px solid rgba(0,255,204,0.07);
  padding: 28px clamp(16px,4vw,48px);
}
.footer-inner {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: 1140px; margin-inline: auto; text-align: center;
}
.footer-brand { display:flex; align-items:center; gap:10px; font-size:0.86rem; font-weight:800; justify-content:center; }
.footer-brand img { border-radius:7px; }
.footer-inner > p { color:var(--muted); font-size:0.74rem; line-height:1.6; max-width:600px; margin-inline:auto; }
.footer-inner nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; }
.footer-inner nav a { color:var(--muted2); font-size:0.78rem; font-weight:600; transition:color 0.15s; }
.footer-inner nav a:hover { color:var(--cyan); }

@media (min-width:860px) {
  .footer-inner { grid-template-columns:auto 1fr auto; text-align:left; align-items:center; }
  .footer-brand { justify-content:flex-start; }
  .footer-inner > p { text-align:center; margin:0; }
  .footer-inner nav { justify-content:flex-end; }
}

.fomo-popup {
  position: fixed; bottom: 24px; left: 24px; z-index: 500;
  max-width: 320px; width: calc(100vw - 48px);
  border: 1px solid rgba(255,215,0,0.25); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255,215,0,0.08), 0 24px 64px rgba(0,0,0,0.7);
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(16px) scale(0.97);
}
.fomo-popup.visible {
  opacity:1; pointer-events:all; transform:translateY(0) scale(1);
  animation: popup-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.fomo-popup.hiding { opacity:0; transform:translateY(8px) scale(0.97); }

.fomo-popup-inner { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; }
.fomo-popup-icon  { font-size:1.4rem; flex-shrink:0; margin-top:1px; }
.fomo-popup-copy  { flex:1; display:flex; flex-direction:column; gap:3px; }
.fomo-popup-copy strong { font-size:0.86rem; font-weight:700; color:var(--text); }
.fomo-popup-copy span   { font-size:0.76rem; color:var(--muted2); line-height:1.45; }

.fomo-popup-close {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:1.2rem; padding:2px 4px; line-height:1; flex-shrink:0; margin-top:-2px;
  transition: color 0.15s;
}
.fomo-popup-close:hover { color:var(--text); }

.fomo-popup-bar {
  height:3px;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  animation: popup-bar-shrink 7s linear forwards;
}
.fomo-popup.hiding .fomo-popup-bar { animation:none; width:0; }


/* ╔════════════════════ POKER DEMO SECTION ═══════════════════════════════╗ */
.poker-demo {
  padding: clamp(72px,10vw,128px) 0;
  background: var(--bg2);
  position: relative; overflow: hidden;
}
.poker-demo::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 65% 45% at 50% 50%, rgba(0,255,204,0.035) 0%, transparent 70%);
  pointer-events:none;
}
.pd-wrap { max-width:1060px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }

/* Header */
.pd-header { text-align:center; margin-bottom:clamp(32px,5vw,52px); }
.pd-header h2 { font-size:clamp(1.75rem,4.5vw,2.9rem); font-weight:900; letter-spacing:-0.03em; line-height:1.15; }
.pd-subhead { color:var(--muted); font-size:clamp(0.9rem,2vw,1.05rem); margin-top:12px; }

/* ── Stage (felt table) ──────────────────────────────────────────────── */
.pd-stage {
  background: radial-gradient(ellipse 92% 85% at 50% 50%, #0b4d2e 0%, #073a22 48%, #040e08 100%);
  border: 1.5px solid rgba(0,255,204,0.22);
  border-radius: 28px;
  padding: clamp(20px,4vw,36px) clamp(16px,3vw,32px);
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0,255,204,0.06),
    0 0 70px rgba(0,255,204,0.07),
    0 0 140px rgba(0,0,0,0.7),
    inset 0 0 80px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: clamp(10px,2.5vw,20px);
}
/* subtle scanline overlay */
.pd-stage::after {
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.025) 3px, rgba(0,0,0,0.025) 4px);
}

/* ── Rows ────────────────────────────────────────────────────────────── */
.pd-dealer-row,
.pd-player-row {
  display:flex; align-items:center; gap:clamp(8px,2vw,16px);
}
.pd-dealer-row  { flex-direction: row-reverse; justify-content: flex-start; }
.pd-player-row  { flex-direction: row;         justify-content: flex-start; }

/* Community row */
.pd-community-row {
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.pd-community { display:flex; gap:clamp(5px,1.5vw,10px); align-items:center; justify-content:center; flex-wrap:wrap; }

/* ── Pot ─────────────────────────────────────────────────────────────── */
.pd-pot-wrap {
  display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,0.38); border:1px solid rgba(0,255,204,0.12);
  border-radius:999px; padding:6px 18px; position:relative;
}
.pd-pot-chips { display:flex; position:relative; height:20px; min-width:56px; }
.pd-chip {
  position:absolute; width:18px; height:18px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.22);
  animation: chip-pop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
  transform:scale(0);
}
@keyframes chip-pop { to { transform:scale(1); } }
.pd-pot-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); }
.pd-pot-label strong { color:var(--cyan); font-size:0.9rem; letter-spacing:0; font-variant-numeric:tabular-nums; }

/* ── Player pills ────────────────────────────────────────────────────── */
.pd-player-pill {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 12px; background:rgba(0,0,0,0.42);
  border:1px solid var(--border); border-radius:12px;
  min-width:68px; text-align:center; flex-shrink:0;
}
.pd-player-pill--you { border-color:rgba(0,255,204,0.18); }
.pd-pip {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:900; letter-spacing:0.04em; line-height:1;
  background:rgba(255,255,255,0.07); color:var(--muted2);
  flex-shrink:0; text-transform:uppercase;
}
.pd-pip--player { background:rgba(0,255,204,0.12); color:var(--cyan); }
.pd-pname{ font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); }
.pd-stack{ font-size:0.74rem; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; transition:color 0.4s; }

/* ── Card hands ──────────────────────────────────────────────────────── */
.pd-hand { display:flex; gap:clamp(5px,1.5vw,9px); }

/* ═══════════════════════════ CARD COMPONENT ════════════════════════════ */
.pd-card {
  width: clamp(48px,7vw,62px);
  height: clamp(68px,10vw,88px);
  perspective: 700px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-24px) scale(0.82);
  transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.34,1.4,0.64,1);
}
.pd-card--comm {
  width:  clamp(44px,6.5vw,57px);
  height: clamp(62px,9.5vw,81px);
}
.pd-card--visible { opacity:1; transform:translateY(0) scale(1); }

.pd-card-i {
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d;
  transition:transform 0.52s cubic-bezier(0.34,1.08,0.64,1);
}
.pd-card--flipped .pd-card-i { transform:rotateY(180deg); }

.pd-card-b, .pd-card-f {
  position:absolute; width:100%; height:100%;
  border-radius:8px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* Back face */
.pd-card-b {
  background:#0c1a5a;
  border:1px solid rgba(0,255,204,0.28);
  box-shadow:0 3px 14px rgba(0,0,0,0.55);
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,255,204,0.04) 0px, rgba(0,255,204,0.04) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(0,255,204,0.04) 0px, rgba(0,255,204,0.04) 1px, transparent 1px, transparent 9px);
}
/* Front face */
.pd-card-f {
  background:#fff;
  border:1px solid rgba(0,0,0,0.09);
  box-shadow:0 3px 14px rgba(0,0,0,0.45);
  transform:rotateY(180deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.pd-rank {
  position:absolute; top:5px; left:6px;
  font-size:clamp(0.6rem,1.2vw,0.74rem); font-weight:900; line-height:1;
}
.pd-rank--br {
  top:auto; left:auto; bottom:5px; right:6px;
  transform:rotate(180deg);
}
.pd-suit-big {
  font-size:clamp(1.1rem,2.2vw,1.55rem); line-height:1; pointer-events:none; user-select:none;
}
/* Win highlight */
.pd-card--win .pd-card-i {
  animation: card-win-bounce 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.pd-card--win .pd-card-f {
  box-shadow:0 0 0 2.5px #ffd700, 0 0 22px rgba(255,215,0,0.55), 0 0 50px rgba(255,215,0,0.28) !important;
}
@keyframes card-win-bounce {
  0%   { transform:rotateY(180deg) scale(1); }
  60%  { transform:rotateY(180deg) scale(1.1) translateY(-6px); }
  100% { transform:rotateY(180deg) scale(1.05); }
}

/* ── Status + action ─────────────────────────────────────────────────── */
.pd-action-row {
  display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:8px;
}
.pd-status {
  font-size:0.87rem; color:var(--muted); text-align:center;
  min-height:1.45em; transition:color 0.3s;
  font-variant-numeric:tabular-nums;
}
.pd-status strong { color:var(--gold); font-weight:800; }
.pd-status em     { color:var(--cyan); font-style:normal; }

.pd-deal-btn {
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#00ffcc,#00d0a0);
  color:var(--bg); border:none; border-radius:12px;
  padding:13px 38px; font-size:1.05rem; font-weight:900; letter-spacing:0.02em;
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 0 26px rgba(0,255,204,0.3),0 4px 18px rgba(0,0,0,0.4);
  transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.pd-deal-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent);
  opacity:0; transition:opacity 0.2s;
}
.pd-deal-btn:hover:not(:disabled)            { transform:translateY(-2px) scale(1.03); box-shadow:0 0 40px rgba(0,255,204,0.5),0 6px 26px rgba(0,0,0,0.5); }
.pd-deal-btn:hover:not(:disabled)::before    { opacity:1; }
.pd-deal-btn:active:not(:disabled)           { transform:scale(0.97); }
.pd-deal-btn:disabled                        { opacity:0.5; cursor:not-allowed; }
.pd-btn-arrow { transition:transform 0.2s ease; }
.pd-deal-btn:hover:not(:disabled) .pd-btn-arrow { transform:translateX(4px); }

/* ── Win CTA ─────────────────────────────────────────────────────────── */
.pd-win-cta {
  margin-top:clamp(28px,4vw,44px); text-align:center;
  opacity:0; transform:translateY(22px) scale(0.95);
  transition:opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
  pointer-events:none;
}
.pd-win-cta[aria-hidden="false"] { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.pd-win-label { font-size:clamp(1.4rem,3.5vw,1.9rem); font-weight:900; margin-bottom:6px; }
.pd-win-label strong { color:var(--gold); }
.pd-win-sub   { color:var(--muted); font-size:0.92rem; margin-bottom:22px; }
.pd-win-btn {
  display:inline-block;
  background:linear-gradient(135deg,#ffd700,#ffa800);
  color:#0d0a00; border-radius:14px; padding:16px 46px;
  font-size:1.1rem; font-weight:900; letter-spacing:0.01em;
  text-decoration:none;
  box-shadow:0 0 36px rgba(255,215,0,0.42), 0 4px 22px rgba(0,0,0,0.45);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  animation:win-btn-pulse 2s ease-in-out infinite;
}
.pd-win-btn:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 0 54px rgba(255,215,0,0.65),0 8px 32px rgba(0,0,0,0.5); }
@keyframes win-btn-pulse {
  0%,100% { box-shadow:0 0 36px rgba(255,215,0,0.42),0 4px 22px rgba(0,0,0,0.45); }
  50%      { box-shadow:0 0 56px rgba(255,215,0,0.7),0 4px 22px rgba(0,0,0,0.45); }
}

/* ── Responsive tweaks ───────────────────────────────────────────────── */
@media (max-width:500px) {
  .pd-card { width:44px; height:63px; }
  .pd-card--comm { width:40px; height:58px; }
  .pd-suit-big { font-size:1rem; }
  .pd-community { gap:4px; }
  .pd-hand { gap:5px; }
  .pd-player-pill { padding:6px 8px; min-width:56px; }
}
/* ── Action buttons (injected by JS) ────────────────────────────────────── */
.pd-actions {
  display: none;
  flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
}
.pd-actions.pd-actions--visible { display: flex; }

.pd-abtn {
  border: none; border-radius: 10px;
  padding: 12px 22px; font-size: 0.94rem; font-weight: 800;
  letter-spacing: 0.015em; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  animation: abtn-in 0.28s cubic-bezier(0.34,1.4,0.64,1) both;
  white-space: nowrap;
}
@keyframes abtn-in {
  from { opacity:0; transform:translateY(14px) scale(0.88); }
  to   { opacity:1; transform:translateY(0)   scale(1);    }
}
.pd-abtn:hover:not(:disabled)  { transform:translateY(-2px) scale(1.05); }
.pd-abtn:active:not(:disabled) { transform:scale(0.96); }
.pd-abtn:disabled              { opacity:0.4; cursor:not-allowed; }

.pd-abtn--fold  { background:rgba(255,77,77,0.12); color:#ff6060; border:1px solid rgba(255,77,77,0.28); }
.pd-abtn--fold:hover:not(:disabled)  { box-shadow:0 0 20px rgba(255,77,77,0.32); }

.pd-abtn--check { background:rgba(255,255,255,0.07); color:rgba(232,237,245,0.72); border:1px solid rgba(255,255,255,0.1); }
.pd-abtn--check:hover:not(:disabled) { box-shadow:0 0 16px rgba(255,255,255,0.1); }

.pd-abtn--call  { background:rgba(0,255,204,0.1); color:var(--cyan); border:1px solid rgba(0,255,204,0.3); box-shadow:0 0 14px rgba(0,255,204,0.1); }
.pd-abtn--call:hover:not(:disabled)  { box-shadow:0 0 28px rgba(0,255,204,0.38); }

.pd-abtn--raise { background:rgba(255,215,0,0.1); color:var(--gold); border:1px solid rgba(255,215,0,0.3); box-shadow:0 0 14px rgba(255,215,0,0.1); }
.pd-abtn--raise:hover:not(:disabled) { box-shadow:0 0 28px rgba(255,215,0,0.4); }

/* All-in button — pulses with urgency */
.pd-abtn--allin {
  background: linear-gradient(135deg,rgba(255,77,77,0.18),rgba(255,215,0,0.14));
  color: var(--gold); border: 1.5px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 20px rgba(255,215,0,0.18);
  animation: abtn-in 0.28s cubic-bezier(0.34,1.4,0.64,1) both,
             allin-pulse 1.4s ease-in-out infinite 0.4s;
}
@keyframes allin-pulse {
  0%,100% { box-shadow:0 0 20px rgba(255,215,0,0.18),0 0 0 0 rgba(255,215,0,0); }
  50%      { box-shadow:0 0 40px rgba(255,215,0,0.55),0 0 0 6px rgba(255,215,0,0.06); }
}
.pd-abtn--allin:hover:not(:disabled) { box-shadow:0 0 52px rgba(255,215,0,0.7); }

/* ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── Activity stream category tags (no emojis) ──────────────────────────── */
.a-tag {
  display: inline-flex; padding: 1px 7px; border-radius: 4px;
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; margin-right: 5px; flex-shrink: 0; white-space: nowrap;
}
.a-champ { background: var(--gold-dim);   color: var(--gold);   }
.a-chal  { background: var(--cyan-dim);   color: var(--cyan);   }
.a-free  { background: var(--green-dim);  color: var(--green);  }
.a-priv  { background: var(--purple-dim); color: var(--purple); }
.activity-item { align-items: baseline !important; }

/* ── Section heading gradient — ties all sections to hero's visual language ── */
.how-section h2,
.circuit-inner > h2,
.features-section > h2,
.tg-copy h2,
.join-copy h2 {
  background: linear-gradient(118deg, #e8edf5 10%, #9dd8d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── How-step cards: slightly more premium default ──────────────────────── */
.how-step {
  box-shadow: 0 4px 28px rgba(0,0,0,0.38);
}
.how-step:hover {
  box-shadow: 0 10px 44px rgba(0,0,0,0.55);
}


/* ── Deal button: idle pulse so it beckons to be clicked ────────────────── */
@keyframes deal-btn-idle {
  0%, 100% { box-shadow: 0 0 28px rgba(0,255,204,0.28), 0 4px 18px rgba(0,0,0,0.4); }
  50%       { box-shadow: 0 0 54px rgba(0,255,204,0.58), 0 6px 24px rgba(0,0,0,0.4); }
}
.pd-deal-btn:not(:disabled) {
  animation: deal-btn-idle 2.4s ease-in-out infinite;
}
.pd-deal-btn:not(:disabled):hover,
.pd-deal-btn:not(:disabled):active {
  animation: none;
}

/* ── Poker stage: pulse border when player must act ─────────────────────── */
@keyframes stage-action-pulse {
  0%, 100% {
    border-color: rgba(0,255,204,0.22);
    box-shadow: 0 0 0 1px rgba(0,255,204,0.06), 0 0 70px rgba(0,255,204,0.07),
                0 0 140px rgba(0,0,0,0.7), inset 0 0 80px rgba(0,0,0,0.35);
  }
  50% {
    border-color: rgba(0,255,204,0.62);
    box-shadow: 0 0 0 2px rgba(0,255,204,0.18), 0 0 110px rgba(0,255,204,0.22),
                0 0 140px rgba(0,0,0,0.7), inset 0 0 80px rgba(0,0,0,0.35);
  }
}
.pd-stage--action {
  animation: stage-action-pulse 1.5s ease-in-out infinite;
}

/* ── Poker stage: gold flash on win ─────────────────────────────────────── */
@keyframes stage-win {
  0%   {
    border-color: rgba(0,255,204,0.22);
    box-shadow: 0 0 0 1px rgba(0,255,204,0.06), 0 0 70px rgba(0,255,204,0.07),
                0 0 140px rgba(0,0,0,0.7), inset 0 0 80px rgba(0,0,0,0.35);
  }
  30%  {
    border-color: rgba(255,215,0,0.75);
    box-shadow: 0 0 0 3px rgba(255,215,0,0.35), 0 0 140px rgba(255,215,0,0.45),
                0 0 140px rgba(0,0,0,0.5), inset 0 0 60px rgba(255,215,0,0.12);
  }
  100% {
    border-color: rgba(255,215,0,0.28);
    box-shadow: 0 0 0 1px rgba(255,215,0,0.12), 0 0 80px rgba(255,215,0,0.18),
                0 0 140px rgba(0,0,0,0.7), inset 0 0 80px rgba(0,0,0,0.35);
  }
}
.pd-stage--won {
  animation: stage-win 1.6s ease-out forwards !important;
}

/* ── Win CTA: bigger, more impactful ────────────────────────────────────── */
.pd-win-label {
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
}
.pd-win-sub { color: var(--muted2); }

/* ── Status text: slightly bigger, more readable ────────────────────────── */
.pd-status {
  font-size: 0.92rem;
  min-height: 1.6em;
}

/* ── Mobile polish ──────────────────────────────────────────────────────── */
/* Better touch targets everywhere */
.btn, .circuit-cta, .pd-deal-btn, .pd-abtn, .pd-win-btn {
  touch-action: manipulation;
}

/* Hero: tighter on very small screens */
@media (max-width: 400px) {
  .hero-copy h1 { font-size: 1.7rem; }
  .badge { font-size: 0.67rem; padding: 6px 11px; }
  .hero-form .btn { font-size: 0.88rem; padding: 0 16px; }
  .pd-abtn { padding: 10px 13px; font-size: 0.85rem; }
  .pd-deal-btn { padding: 12px 28px; font-size: 0.96rem; }
}

/* Poker demo: slightly more breathing room on narrow screens */
@media (max-width: 380px) {
  .pd-stage { padding: 14px 10px; }
  .pd-community { gap: 3px; }
  .pd-card { width: 38px; height: 55px; }
  .pd-card--comm { width: 34px; height: 50px; }
  .pd-suit-big { font-size: 0.85rem; }
  .pd-rank { font-size: 0.52rem; }
}

/* Circuit grid: prevent overflow on very narrow screens */
@media (max-width: 420px) {
  .circuit-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
}

/* How steps: visual mockups scale down gracefully */
@media (max-width: 380px) {
  .how-step-visual { min-height: 130px; }
  .mock-email { max-width: 240px; }
}

/* Join form: comfortable on phones */
@media (max-width: 640px) {
  .join-inner { gap: 28px; }
  .join-form { padding: 18px; }
}

/* Footer: stack cleanly */
@media (max-width: 500px) {
  .footer-inner nav { gap: 6px 14px; }
}