/* Snipers-R-Us Access Gate — display wordmark + premium shell */
:root {
  --ag-bg: #000000;
  --ag-panel: rgba(22, 22, 24, 0.94);
  --ag-card: rgba(15, 15, 17, 0.88);
  --ag-line: rgba(255, 255, 255, 0.1);
  --ag-fg: #e7e9ea;
  --ag-muted: #71767b;
  --ag-accent: #22c55e;
  --ag-purple: #a855f7;
  --ag-cyan: #1d9bf0;
  --ag-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ag-display: "Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif;
  --ag-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ag-bg);
  color: var(--ag-fg);
  font-family: var(--ag-font);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(168, 85, 247, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(34, 197, 94, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 80%, rgba(168, 85, 247, 0.08), transparent 50%),
    var(--ag-bg);
}

/* Full-bleed market ticker — spans entire viewport, always on */
.ag-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100%;
  /* This page already ships viewport-fit=cover, so without a top inset the
     ticker renders underneath the status bar on notched iPhones. */
  box-sizing: border-box;
  height: calc(28px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 2000;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(5, 5, 7, 0.98), rgba(9, 9, 13, 0.98));
  border-bottom: 1px solid rgba(168, 85, 247, 0.35);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
}
.ag-ticker-track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  padding-left: 100vw;
  animation: agTickerScroll 56s linear infinite;
  will-change: transform;
}
.ag-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ag-ticker-item .sym {
  color: #a3a3a3;
  font-weight: 800;
}
.ag-ticker-item .px {
  color: #e7e9ea;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ag-ticker-item .chg {
  font-weight: 800;
  font-size: 10px;
}
.ag-ticker-item .chg.up { color: #22c55e; }
.ag-ticker-item .chg.down { color: #a855f7; }
@keyframes agTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-ticker-track { animation: none; padding-left: 12px; }
}

.ag-shell {
  width: min(540px, 100%);
  margin: 0 auto;
  /* room for fixed ticker + notch above it, and the home indicator below */
  padding: calc(44px + env(safe-area-inset-top, 0px)) 18px
           calc(40px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ag-hero {
  width: 100%;
  margin-bottom: 22px;
}

.ag-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
  width: 100%;
}

.ag-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
}
.ag-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.2), rgba(168, 85, 247, 0.14) 55%, transparent 72%);
  filter: blur(12px);
  animation: ag-logo-glow 4s ease-in-out infinite;
}
.ag-reticle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.ag-reticle-rings {
  transform-origin: 70px 70px;
  animation: ag-reticle-spin 28s linear infinite;
}
.ag-reticle-dash-wrap {
  transform-origin: 70px 70px;
  animation: ag-reticle-spin-rev 20s linear infinite;
}
.ag-reticle-line {
  animation: ag-reticle-pulse 3.2s ease-in-out infinite;
}
.ag-reticle-t { animation-delay: 0s; }
.ag-reticle-r { animation-delay: 0.4s; }
.ag-reticle-b { animation-delay: 0.8s; }
.ag-reticle-l { animation-delay: 1.2s; }
.ag-reticle-dot {
  animation: ag-reticle-dot 3.2s ease-in-out infinite;
}
.ag-logo-scan {
  position: absolute;
  left: 18%;
  right: 18%;
  height: 2px;
  z-index: 3;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.85), rgba(34, 197, 94, 0.15), transparent);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: ag-logo-scan 7s ease-in-out infinite;
}
.ag-logo {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 28px;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(34, 197, 94, 0.22));
}

.ag-wordmark {
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--ag-display);
  /* "snipers-R-us" is ~12 glyphs plus 0.1em tracking, so the rendered width is
     roughly 8.5x the font-size. At 17vw that overflowed any phone: on a 430px
     screen it measured 554px and the wordmark was clipped on both edges. The
     58px floor made it unfixable, since clamp() could not shrink further.
     11.5vw keeps it edge-to-edge without ever exceeding the viewport. */
  font-size: clamp(30px, 11.5vw, 96px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
.wm-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  padding: 0 4px 12px;
  text-align: center;
  /* Never clip the brand: overflow:hidden here silently chopped the wordmark
     to "pers-R." instead of letting it shrink. The font-size rules keep it in
     bounds; if it ever exceeds them the text must stay legible rather than be
     cut, so scale it down instead of hiding the ends. */
  max-width: 100%;
  white-space: nowrap;
}
.wm-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 320px);
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ag-purple) 20%, var(--ag-accent) 50%, var(--ag-purple) 80%, transparent);
  opacity: 0.85;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), 0 0 14px rgba(34, 197, 94, 0.28);
}
.wm-snipers {
  color: #ffffff;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 32px rgba(255, 255, 255, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.5);
}
.wm-dash {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0.06em;
  letter-spacing: 0;
  transform: translateY(-0.04em);
}
.wm-r {
  display: inline-block;
  color: var(--ag-accent);
  font-size: 1.22em;
  letter-spacing: 0.04em;
  transform: translateY(-0.02em);
  text-shadow:
    0 0 32px rgba(34, 197, 94, 0.75),
    0 0 64px rgba(34, 197, 94, 0.3),
    0 3px 0 rgba(0, 0, 0, 0.45);
}
.wm-us {
  color: var(--ag-purple);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 32px rgba(168, 85, 247, 0.7),
    0 0 64px rgba(168, 85, 247, 0.25),
    0 3px 0 rgba(0, 0, 0, 0.45);
}

@keyframes ag-logo-glow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes ag-reticle-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ag-reticle-spin-rev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes ag-reticle-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes ag-reticle-dot {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes ag-logo-scan {
  0%, 72%, 100% { top: 22%; opacity: 0; }
  8% { opacity: 0.9; }
  18% { top: 78%; opacity: 0.9; }
  28% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-reticle-rings,
  .ag-reticle-dash-wrap,
  .ag-reticle-line,
  .ag-reticle-dot,
  .ag-logo-scan,
  .ag-logo-wrap::before {
    animation: none;
  }
  .ag-logo-scan { display: none; }
}

.ag-sub {
  margin: 0 auto;
  max-width: 38ch;
  color: var(--ag-muted);
  font-size: 15px;
  line-height: 1.5;
}
.ag-sub strong { color: var(--ag-fg); font-weight: 700; }

.ag-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.1);
  color: #e9d5ff;
  font-family: var(--ag-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ag-info-btn:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.65);
}
.ag-info-btn:active { transform: scale(0.98); }
.ag-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.ag-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ag-info-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--ag-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--ag-purple);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.ag-info-link:hover { color: #c084fc; }

.ag-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ag-modal-backdrop[hidden] { display: none; }
.ag-modal {
  width: min(560px, 100%);
  max-height: min(92vh, 900px);
  margin: auto 0 0;
  padding: 18px 16px 22px;
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--ag-line);
  border-bottom: none;
  background: #0c0c0e;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.55);
  text-align: left;
  overflow-y: auto;
}
@media (min-width: 520px) {
  .ag-modal-backdrop {
    align-items: center;
    padding: 24px 16px;
  }
  .ag-modal {
    margin: auto;
    border-radius: 20px;
    border-bottom: 1px solid var(--ag-line);
    max-height: min(88vh, 900px);
  }
}
.ag-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ag-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--ag-fg);
}
.ag-modal-close {
  appearance: none;
  border: 1px solid var(--ag-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ag-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.ag-modal-close:hover { color: var(--ag-fg); background: rgba(255, 255, 255, 0.08); }
.ag-modal-lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ag-muted);
  line-height: 1.5;
}
.ag-modal-foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ag-muted);
  line-height: 1.45;
  text-align: center;
}
.ag-modal-foot strong { color: var(--ag-accent); }

.ag-pass-grid {
  display: grid;
  gap: 10px;
}
.ag-pass-card {
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.28);
}
.ag-pass-card-featured {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.06);
}
.ag-pass-card-lifetime {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.1), rgba(34, 197, 94, 0.06));
}
.ag-pass-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.ag-pass-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}
.ag-pass-price {
  font-family: var(--ag-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ag-fg);
}
.ag-pass-duration {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ag-muted);
}
.ag-pass-features {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
}
.ag-pass-features li {
  position: relative;
  padding-left: 18px;
  margin: 4px 0;
  color: var(--ag-muted);
}
.ag-pass-features li.yes { color: #d1fae5; }
.ag-pass-features li.no { color: #6b7280; }
.ag-pass-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ag-pass-features li.yes::before { background: var(--ag-accent); box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
.ag-pass-features li.no::before { background: rgba(255, 255, 255, 0.15); }

.ag-card {
  width: 100%;
  text-align: left;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
  border-radius: 20px;
  padding: 20px 18px 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.ag-section {
  margin: 16px 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-muted);
  font-weight: 700;
}
.ag-section:first-child { margin-top: 0; }

.ag-row-invite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.ag-wallet-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ag-wallet-intro {
  margin: 0 0 10px;
  text-align: center;
}

.ag-btn {
  appearance: none;
  border: 1px solid var(--ag-line);
  background: var(--ag-panel);
  color: var(--ag-fg);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--ag-font);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  width: 100%;
}
.ag-btn:active { transform: scale(0.98); }
.ag-btn:hover { background: rgba(255, 255, 255, 0.06); }
.ag-btn.primary {
  background: #eff3f4;
  color: #0f1419;
  border-color: #eff3f4;
}
.ag-btn.primary:hover { background: #d7dbdc; }
.ag-btn.sacrifice {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.28), rgba(34, 197, 94, 0.12));
  border-color: rgba(34, 197, 94, 0.5);
  color: #bbf7d0;
}
.ag-btn.ghost {
  background: transparent;
  color: var(--ag-muted);
}
.ag-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ag-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ag-muted);
  line-height: 1.45;
  text-align: center;
}
.ag-addr {
  font-family: var(--ag-mono);
  font-size: 12px;
  color: var(--ag-muted);
  word-break: break-all;
  margin: 10px 0 0;
  text-align: center;
}

.ag-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 6px;
  color: var(--ag-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.ag-divider::before,
.ag-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ag-line);
}

.ag-trust-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.ag-trust-item {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag-muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
}

.ag-crypto-options {
  display: grid;
  gap: 12px;
}
.ag-crypto-option {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px;
}
.ag-crypto-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ag-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ag-crypto-divider::before,
.ag-crypto-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ag-line);
}

.ag-plans {
  display: grid;
  gap: 10px;
}
.ag-plan {
  text-align: left;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  color: inherit;
  width: 100%;
  font-family: var(--ag-font);
  transition: border-color 0.15s, background 0.15s;
}
.ag-plan:hover { border-color: rgba(255, 255, 255, 0.18); }
.ag-plan.selected {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.07);
}
.ag-plan-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.ag-plan-name { font-size: 17px; font-weight: 800; }
.ag-plan-price {
  font-family: var(--ag-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ag-fg);
}
.ag-plan-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--ag-muted);
}
.ag-plan-main { color: var(--ag-muted); }
.ag-plan-crypto {
  color: var(--ag-accent);
  font-weight: 700;
}
.ag-plan-meta s { opacity: 0.65; }

.ag-restore { margin-top: 4px; }
.ag-restore .ag-row-invite { margin-top: 8px; }

.ag-crypto-pay { margin-top: 14px; }
.ag-coin-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.ag-coin {
  appearance: none;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ag-muted);
  border-radius: 12px;
  padding: 12px 8px;
  font-family: var(--ag-font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  min-height: 46px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ag-coin:hover { border-color: rgba(255, 255, 255, 0.2); color: var(--ag-fg); }
.ag-coin.active {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}
.ag-select, .ag-input {
  width: 100%;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ag-fg);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--ag-font);
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
}

.ag-quote {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ag-muted);
}
.ag-quote strong { color: var(--ag-fg); }
.ag-quote code {
  font-family: var(--ag-mono);
  font-size: 12px;
  color: #7dd3fc;
  word-break: break-all;
}

.ag-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.ag-status {
  margin-top: 12px;
  min-height: 20px;
  font-size: 14px;
  color: var(--ag-muted);
  text-align: center;
}
.ag-status-sticky {
  margin: 0 0 14px;
  padding: 10px 12px;
  min-height: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.4;
}
.ag-status-sticky:empty {
  display: none;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}
.ag-status.err { color: #f87171; }
.ag-status.ok { color: #4ade80; }
.ag-status-sticky.err {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}
.ag-status-sticky.ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.35);
}
@keyframes agBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
.ag-btn-pulse {
  animation: agBtnPulse 0.9s ease-out 2;
}

.ag-active-pass {
  text-align: center;
  padding: 18px 14px 8px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 16px;
  margin-bottom: 8px;
}
.ag-active-title {
  font-size: 18px;
  font-weight: 800;
  color: #bbf7d0;
  margin-bottom: 6px;
}
.ag-active-meta {
  font-size: 13px;
  color: var(--ag-muted);
  margin-bottom: 8px;
}
.ag-active-timer {
  font-family: var(--ag-mono);
  font-size: 22px;
  font-weight: 700;
  color: #86efac;
  margin: 8px 0 14px;
  letter-spacing: 0.02em;
}

.ag-foot {
  width: 100%;
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--ag-muted);
  line-height: 1.6;
}
.ag-foot p { margin: 0 0 6px; }
.ag-foot strong { color: var(--ag-fg); font-weight: 700; }
.ag-foot a {
  color: var(--ag-cyan);
  text-decoration: none;
  font-weight: 700;
}
.ag-foot a:hover { text-decoration: underline; }
.ag-copy { font-size: 12px; opacity: 0.85; }

.ag-paypal {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 8px;
}
.ag-paypal-soon {
  margin: 8px 0 0;
  font-size: 13px;
}

/* Free home preview CTA */
.ag-preview-cta {
  margin: 0 0 18px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background:
    linear-gradient(145deg, rgba(34, 197, 94, 0.12), rgba(168, 85, 247, 0.08) 55%, transparent),
    rgba(10, 12, 14, 0.9);
  text-align: center;
  animation: agPreviewIn 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes agPreviewIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ag-preview-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 4px;
}
.ag-preview-title {
  font-family: var(--ag-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 6px;
}
.ag-preview-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ag-muted);
}
.ag-preview-sub strong { color: var(--ag-fg); }
#btn-preview { width: 100%; }

.ag-referral {
  margin: 6px 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.08);
  text-align: left;
}
.ag-referral .ag-section {
  margin: 0 0 4px;
  color: #a855f7;
}
.ag-referral .ag-hint {
  margin: 0;
}

@media (min-width: 520px) {
  .ag-shell { padding-top: 56px; }
  /* The shell is capped at 540px wide, so sizing this in `vw` was measuring
     the WINDOW while the text had to fit a fixed 504px box — at 1440px the
     wordmark rendered 750px wide and got clipped to "pers-R.".
     `cqw`-free fix: size against the container's real width via a fixed ceiling
     that the glyphs actually fit. ~12 glyphs at 0.1em tracking ≈ 8.5x font-size,
     so 56px keeps it inside 504px with margin. */
  .ag-wordmark { font-size: clamp(44px, 11.5vw, 56px); }
  .ag-logo { width: 132px; height: 132px; }
  .ag-logo-wrap { width: 148px; height: 148px; }
  .ag-plans { grid-template-columns: 1fr 1fr; }
  .ag-plans .ag-plan:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  /* Must stay under the base 11.5vw or the smallest phones overflow again —
     the old 15vw/48px floor was the reason this broke worst on small screens. */
  .ag-wordmark { font-size: clamp(26px, 10.5vw, 44px); letter-spacing: 0.06em; }
  .wm-r { font-size: 1.16em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GAME-FI HUD overlayer — theme pass over the gate's geometry.
   Only colors / type / borders / glow are restyled here; layout stays as-is
   so every payment flow keeps working untouched.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ag-bg: #04060d;
  --ag-panel: rgba(10, 13, 24, 0.94);
  --ag-card: rgba(12, 16, 30, 0.88);
  --ag-line: rgba(255, 255, 255, 0.09);
  --ag-fg: #f2f2fa;
  --ag-muted: #a7a7bf;
  --ag-accent: #22c55e;
  --ag-purple: #a855f7;
  --ag-cyan: #22d3ee;
  --ag-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --ag-mono: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  background:
    radial-gradient(ellipse 1000px 480px at 12% -10%, rgba(168, 85, 247, 0.17), transparent 55%),
    radial-gradient(ellipse 800px 420px at 94% 4%, rgba(34, 211, 238, 0.10), transparent 50%),
    radial-gradient(ellipse 700px 480px at 50% 115%, rgba(34, 197, 94, 0.07), transparent 55%),
    #04060d;
  font-family: var(--ag-mono);
}
/* Starfield + scanlines — the arena */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 3px);
}
.ag-shell { position: relative; z-index: 1; }

/* Ticker tape — terminal gold seam */
.ag-ticker {
  border-bottom: 1px solid rgba(34, 197, 94, 0.22);
  background: linear-gradient(90deg, rgba(6, 8, 16, 0.98), rgba(10, 13, 24, 0.98));
  font-family: var(--ag-mono);
}
.ag-ticker-item .sym { color: var(--ag-accent); font-weight: 800; }
.ag-ticker-item .chg.up { color: #16C784; }
.ag-ticker-item .chg.down { color: #FF3B4E; }

/* ── Hero ── */
.ag-wordmark {
  font-family: var(--ag-display);
  font-weight: 900;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 26px rgba(34, 197, 94, 0.22));
}
.wm-snipers { color: #fff; }
.wm-dash { color: var(--ag-muted); }
.wm-r { color: var(--ag-accent); text-shadow: 0 0 18px rgba(34, 197, 94, 0.55); }
.wm-us { color: var(--ag-purple); text-shadow: 0 0 18px rgba(168, 85, 247, 0.55); }
.ag-sub { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 12.5px; letter-spacing: 0.04em; }
.ag-sub strong { color: var(--ag-accent); }
.ag-reticle-ring { animation: agScopePulse 2.6s ease-in-out infinite; }
@keyframes agScopePulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
.ag-info-btn {
  font-family: var(--ag-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ag-accent);
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.07);
  border-radius: 8px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .16s, box-shadow .16s, transform .16s;
}
.ag-info-btn:hover { background: rgba(34, 197, 94, 0.14); box-shadow: 0 0 18px rgba(34, 197, 94, 0.20); transform: translateY(-1px); }
.ag-info-icon { color: var(--ag-accent); }

/* ── Main card — dark glass + HUD corners ── */
.ag-card {
  position: relative;
  background: linear-gradient(165deg, rgba(20, 26, 44, 0.90), rgba(10, 13, 24, 0.95) 60%, rgba(7, 9, 17, 0.97));
  border: 1px solid var(--ag-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(168, 85, 247, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.ag-card::before, .ag-card::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: rgba(34, 197, 94, 0.55); border-style: solid; z-index: 2;
}
.ag-card::before { left: 10px; top: 10px; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.ag-card::after { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; }

/* ── Section labels — HUD accent bar ── */
.ag-section {
  font-family: var(--ag-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ag-accent);
  display: flex; align-items: center; gap: 9px;
}
.ag-section::before {
  content: ""; width: 4px; height: 13px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, var(--ag-accent), var(--ag-purple));
  box-shadow: 0 0 9px rgba(34, 197, 94, 0.5);
}
.ag-hint { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 11px; }

/* ── Inputs — recessed HUD fields ── */
.ag-input {
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.85), rgba(8, 11, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  color: var(--ag-fg);
  font-family: var(--ag-mono);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: border-color .16s, box-shadow .16s;
}
.ag-input:focus {
  outline: none;
  border-color: rgba(34, 197, 94, 0.60);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 0 16px rgba(34, 197, 94, 0.12), inset 0 2px 8px rgba(0, 0, 0, 0.45);
}
.ag-input::placeholder { color: rgba(167, 167, 191, 0.5); }

/* ── Buttons ── */
.ag-btn {
  font-family: var(--ag-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 8px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.ag-btn.primary {
  color: #06120a;
  background: linear-gradient(180deg, #4ade80, var(--ag-accent));
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ag-btn.primary:hover { background: linear-gradient(180deg, #86efac, #4ade80); box-shadow: 0 0 30px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
.ag-btn.sacrifice {
  color: #fff;
  background: linear-gradient(180deg, #b968f5, var(--ag-purple));
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ag-btn.sacrifice:hover { box-shadow: 0 0 30px rgba(168, 85, 247, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: translateY(-1px); }
.ag-btn.ghost {
  color: var(--ag-fg);
  border: 1px solid var(--ag-line);
  background: rgba(255, 255, 255, 0.03);
}
.ag-btn.ghost:hover { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.07); transform: translateY(-1px); }

/* ── Dividers ── */
.ag-divider { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.ag-divider::before, .ag-divider::after {
  content: ""; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent);
  height: 1px;
}

/* ── Plans — loot cards ── */
.ag-plan {
  background: linear-gradient(165deg, rgba(20, 26, 44, 0.75), rgba(10, 13, 24, 0.9));
  border: 1px solid var(--ag-line);
  border-radius: 12px;
  color: var(--ag-fg);
  font-family: var(--ag-mono);
  transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, box-shadow .18s;
}
.ag-plan:hover { transform: translateY(-2px); border-color: rgba(34, 197, 94, 0.40); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.ag-plan.selected {
  border-color: rgba(34, 197, 94, 0.75);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 0 22px rgba(34, 197, 94, 0.18);
  background: linear-gradient(165deg, rgba(50, 40, 14, 0.55), rgba(10, 13, 24, 0.92));
}
.ag-plan-price { color: var(--ag-accent); font-family: var(--ag-display); font-weight: 800; }

/* ── Quotes / wallet / coins ── */
.ag-quote, .ag-addr {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color: var(--ag-fg);
  font-family: var(--ag-mono);
}
.ag-coin {
  font-family: var(--ag-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  border: 1px solid var(--ag-line); background: rgba(255, 255, 255, 0.03);
  color: var(--ag-muted); border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.ag-coin:hover { color: var(--ag-fg); border-color: rgba(34, 197, 94, 0.4); }
.ag-coin.active {
  color: var(--ag-accent); border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.10); box-shadow: 0 0 12px rgba(34, 197, 94, 0.18);
}

/* ── Trust bar ── */
.ag-trust-item {
  font-family: var(--ag-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #16C784;
}
.ag-trust-item::before { content: "✓ "; color: #16C784; }

/* ── Status / banners ── */
.ag-active-pass {
  border: 1px solid rgba(22, 199, 132, 0.45);
  background: linear-gradient(165deg, rgba(22, 60, 44, 0.55), rgba(10, 13, 24, 0.92));
  border-radius: 12px;
}
.ag-active-title { color: #16C784; font-family: var(--ag-display); font-weight: 800; letter-spacing: 0.06em; }
.ag-referral {
  border: 1px solid rgba(34, 211, 238, 0.40);
  background: rgba(34, 211, 238, 0.07);
  border-radius: 10px;
}

/* ── Modal — HUD frame ── */
.ag-modal-backdrop { background: rgba(2, 6, 23, 0.80); backdrop-filter: blur(8px); }
.ag-modal {
  position: relative;
  background:
    radial-gradient(ellipse 500px 240px at 50% -10%, rgba(34, 197, 94, 0.06), transparent 60%),
    linear-gradient(180deg, #0e1322, #080a12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(34, 197, 94, 0.06);
}
.ag-modal::before, .ag-modal::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: rgba(34, 197, 94, 0.6); border-style: solid;
}
.ag-modal::before { left: 10px; top: 10px; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.ag-modal::after { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; }
.ag-modal-title { font-family: var(--ag-display); font-weight: 800; letter-spacing: 0.08em; }
.ag-modal-lead { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 12px; }
.ag-modal-close {
  border: 1px solid var(--ag-line); background: rgba(255, 255, 255, 0.04); color: var(--ag-muted);
  border-radius: 8px; transition: color .15s, border-color .15s, box-shadow .15s;
}
.ag-modal-close:hover { color: #FF3B4E; border-color: rgba(255, 59, 78, 0.6); box-shadow: 0 0 14px rgba(255, 59, 78, 0.25); background: rgba(255, 59, 78, 0.06); }
.ag-pass-card {
  background: linear-gradient(165deg, rgba(20, 26, 44, 0.75), rgba(10, 13, 24, 0.9));
  border: 1px solid var(--ag-line);
  border-radius: 12px;
}
.ag-pass-card-featured { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 22px rgba(168, 85, 247, 0.15); }
.ag-pass-card-lifetime { border-color: rgba(34, 197, 94, 0.55); box-shadow: 0 0 22px rgba(34, 197, 94, 0.15); }
.ag-pass-price { color: var(--ag-accent); font-family: var(--ag-display); font-weight: 800; }
.ag-pass-features li.yes::before { color: #16C784; }
.ag-pass-features li.no { opacity: 0.5; }
.ag-modal-foot { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 11px; }

/* ── Footer ── */
.ag-foot { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 11px; }
.ag-foot a { color: var(--ag-accent); }
.ag-foot a:hover { color: #4ade80; }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .ag-reticle-ring { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   iOS: stop focus-zoom on the gate's inputs
   ──────────────────────────────────────────────────────────────────────────
   Safari zooms the viewport whenever a focused field renders below 16px and
   never zooms back out, so tapping the email or invite box left the whole
   page scaled in and horizontally scrollable. Same 16px floor already applied
   to the app shell in mobile-shell.css.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   Mobile declutter — the desktop hero stacks a 148px glowing logo, a glow-
   heavy wordmark, an underline beam, two sub paragraphs and an info button,
   which reads as overlapping noise on a phone. Tighten the stack, kill the
   heavy shadows, and drop the duplicated backtest note (the landing page
   already makes that claim).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 519px) {
  .ag-logo-wrap { width: 92px; height: 92px; }
  .ag-logo { width: 76px; height: 76px; border-radius: 18px; }
  .ag-logo-wrap::before { animation: none; filter: blur(8px); }
  .ag-logo-scan { display: none; }
  .ag-brand-lockup { gap: 10px; margin-bottom: 12px; }
  .ag-hero { margin-bottom: 14px; }
  .ag-wordmark { filter: none; }
  .wm-line { padding-bottom: 8px; }
  .wm-line::after { height: 2px; box-shadow: none; opacity: 0.7; }
  .wm-snipers { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
  .wm-r { text-shadow: 0 0 14px rgba(34, 197, 94, 0.45), 0 2px 0 rgba(0, 0, 0, 0.45); }
  .wm-us { text-shadow: 0 0 14px rgba(168, 85, 247, 0.45), 0 2px 0 rgba(0, 0, 0, 0.45); }
  .ag-sub { font-size: 13px; max-width: 34ch; line-height: 1.55; }
  .ag-hero .ag-sub ~ .ag-sub { display: none; }
  .ag-info-btn { margin-top: 12px; padding: 8px 14px; }
  .ag-card { padding: 16px 14px 14px; }
  .ag-section { margin: 14px 0 8px; }
  .ag-divider { margin: 16px 0 4px; }
  .ag-status-sticky { margin-bottom: 10px; }
}

@media (max-width: 900px), (pointer: coarse) {
  .ag-input,
  input[type="email"],
  input[type="text"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Upgrade mode — an existing member changing plan, not a new signup. */
.ag-upgrade-banner {
  margin: 0 auto 14px;
  max-width: 640px;
  padding: 10px 14px;
  border: 1px solid rgba(63, 208, 127, .35);
  border-radius: 10px;
  background: rgba(63, 208, 127, .07);
  color: #cfe9d8;
  font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  text-align: center;
}
.ag-upgrade-banner a {
  color: var(--ag-accent);
  font-weight: 700;
  text-decoration: none;
}
.ag-upgrade-banner a:hover { text-decoration: underline; }
/* In upgrade mode the signup copy is noise — they already have an account. */
body.ag-upgrade-mode .ag-signup-copy,
body.ag-upgrade-mode .ag-free-cta { display: none !important; }