/* premium.css — Xanguard noir/gold design system (2026-07 redesign)
   Loaded after base/buttons/nav/footer — wins by cascade. Zero gradients,
   zero glow. Type does the work: Space Grotesk display + JetBrains Mono data. */

/* ── Film grain (self-contained SVG turbulence, CSP-safe) ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Shared atoms ── */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.hairline-top { border-top: 1px solid var(--border); }

/* ── Mega hero (homepage) ── */
.mega-hero {
  position: relative;
  padding: 180px 0 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(212,175,55,0.06), transparent 60%),
    var(--bg-primary);
}
.mega-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.mega-hero__label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.mega-hero__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.2vw, 104px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  max-width: 16ch;
}
.mega-hero__title em {
  font-style: normal;
  color: var(--accent-bright);
}
.mega-hero__sub {
  margin-top: 32px;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--text-secondary);
}
.mega-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.mega-hero__meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.mega-hero__meta-item { min-width: 120px; }
.mega-hero__meta-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
}
.mega-hero__meta-value b { color: var(--accent-bright); font-weight: 600; }
.mega-hero__meta-label {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Terminal (delivery receipts) ── */
.terminal-wrap {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  padding: 40px 0 0;
}
.terminal {
  background: #0d0d10;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: #101014;
}
.terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: #2c2c33; }
.terminal__dot--gold { background: var(--accent); }
.terminal__title {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.terminal__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent-bright);
}
.terminal__live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bright);
  animation: termPulse 1.6s ease-in-out infinite;
}
@keyframes termPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.terminal__body {
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 2.05;
  overflow-x: auto;
  white-space: nowrap;
}
.terminal__row { display: block; color: var(--text-secondary); }
.terminal__ts { color: var(--text-muted); }
.terminal__handle { color: var(--text-primary); }
.terminal__ms { color: var(--accent-bright); }
.terminal__pipe { color: var(--accent); }
.terminal__text { color: var(--text-muted); }
@media (max-width: 720px) {
  .terminal__body { font-size: 11px; white-space: normal; }
}

/* ── Ticker ── */
.ticker {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-secondary);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: tickerScroll 46s linear infinite;
}
.ticker__track:hover { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ticker__item b { color: var(--accent-bright); font-weight: 600; }
.ticker__sep { color: var(--accent); }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* ── Numbered editorial rows (products) ── */
.prow {
  display: grid;
  grid-template-columns: 90px 1.2fr 2fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  transition: background 0.25s ease, padding 0.25s ease;
}
.prow:hover { background: var(--bg-card); padding-left: 16px; }
.prow__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}
.prow__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.prow__desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.prow__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-bright);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .prow { grid-template-columns: 48px 1fr; }
  .prow__desc, .prow__price { grid-column: 2; }
}

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .mega-hero { padding-top: 130px; }
  .mega-hero__meta { gap: 24px; }
}