/*
  Hero terminal — Binance / OKX ticker layout (no decorative rings)
  Load after sr-typography-institutional.css
*/

body.sr-site .hero-terminal-shell {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

body.sr-site .hero-terminal-intro {
  text-align: center;
  padding-inline: 0.5rem;
}

body.sr-site .hero-premium-kicker,
body.sr-site .hero-terminal-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(234, 179, 8, 0.92);
}

body.sr-site .hero-visual-h1.hero-terminal-title {
  margin: 0;
  font-size: clamp(1.125rem, 3.4vw, 1.625rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.2 !important;
  color: #f4f4f5 !important;
  max-width: none;
}

/* Main terminal card */
body.sr-site .hero-terminal-card {
  position: relative;
  width: 100%;
  border-radius: 1.125rem;
  background: rgba(11, 14, 17, 0.94);
  border: 1px solid rgba(43, 49, 57, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

body.sr-site .hero-terminal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 185, 11, 0.35), rgba(56, 189, 248, 0.35), transparent);
  pointer-events: none;
}

body.sr-site .hero-t-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(43, 49, 57, 0.9);
  background: rgba(255, 255, 255, 0.02);
}

body.sr-site .hero-t-head-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

body.sr-site .hero-t-pair {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f4f4f5;
  white-space: nowrap;
}

body.sr-site .hero-t-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0ecb81;
  background: rgba(14, 203, 129, 0.1);
  border: 1px solid rgba(14, 203, 129, 0.22);
}

body.sr-site .hero-t-live i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: #0ecb81;
  box-shadow: 0 0 8px rgba(14, 203, 129, 0.8);
  font-style: normal;
}

body.sr-site .hero-t-status-line {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(161, 170, 179, 0.95);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sr-site .hero-t-status-line strong {
  color: #eaecef;
  font-weight: 600;
}

body.sr-site .hero-t-body {
  padding: 1.35rem 1.1rem 1.1rem;
}

body.sr-site .hero-t-price-block {
  text-align: center;
  margin-bottom: 1.15rem;
}

body.sr-site .hero-t-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  line-height: 1;
}

body.sr-site .hero-freq-value,
body.sr-site #hero-freq {
  font-family: var(--sr-font-mono) !important;
  font-size: clamp(3.5rem, 16vw, 5.75rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.95 !important;
  color: #eaecef !important;
  -webkit-text-fill-color: #eaecef !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}

body.sr-site .hero-freq-unit {
  font-family: var(--sr-font-sans) !important;
  font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
  font-weight: 500 !important;
  color: rgba(161, 170, 179, 0.9) !important;
  padding-bottom: 0.45rem;
}

body.sr-site .hero-readout-sub,
body.sr-site .hero-t-tagline {
  margin: 0.75rem 0 0;
  font-size: clamp(0.9375rem, 2.8vw, 1.0625rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: rgba(234, 236, 239, 0.88) !important;
  line-height: 1.4;
}

/* Metrics row — exchange style */
body.sr-site .hero-t-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.sr-site .hero-t-metric {
  padding: 0.75rem 0.55rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(43, 49, 57, 0.85);
  text-align: center;
  min-width: 0;
}

body.sr-site .hero-t-metric dt {
  margin: 0 0 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(132, 142, 156, 0.95);
}

body.sr-site .hero-t-metric dd {
  margin: 0;
  font-family: var(--sr-font-mono) !important;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #eaecef;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

body.sr-site .hero-t-metric dd .metric-up { color: #0ecb81; }
body.sr-site .hero-t-metric dd .metric-down { color: #f6465d; }
body.sr-site .hero-t-metric dd .metric-neutral { color: #a78bfa; }

body.sr-site .hero-t-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  padding: 0 1.1rem 1.1rem;
}

body.sr-site .hero-t-actions .hero-cta-primary {
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 3rem;
  border-radius: 0.65rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #0b0e11 !important;
  background: linear-gradient(180deg, #fcd535 0%, #f0b90b 100%) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(240, 185, 11, 0.22) !important;
}

body.sr-site .hero-t-actions .hero-cta-secondary {
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 0.65rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #eaecef !important;
  background: rgba(43, 49, 57, 0.55) !important;
  border: 1px solid rgba(71, 77, 87, 0.9) !important;
}

/* Audience strip */
body.sr-site .hero-t-audience {
  width: 100%;
}

body.sr-site .hero-t-audience .hero-audience-card {
  width: 100%;
  margin: 0;
  padding: 0.9rem 1rem !important;
  border-radius: 0.85rem !important;
  background: rgba(11, 14, 17, 0.92) !important;
  border: 1px solid rgba(43, 49, 57, 0.95) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
}

body.sr-site .hero-t-audience .hero-audience-radar {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: 1px solid rgba(43, 49, 57, 0.95);
  background: rgba(255, 255, 255, 0.02);
}

body.sr-site .hero-t-audience .hero-audience-count {
  font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
  font-weight: 500 !important;
  color: #eaecef !important;
  -webkit-text-fill-color: #eaecef !important;
  background: none !important;
}

body.sr-site .hero-t-audience .hero-audience-chip {
  color: rgba(161, 170, 179, 0.95);
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

body.sr-site .hero-t-audience .hero-audience-title {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #eaecef !important;
}

body.sr-site .hero-t-audience .hero-audience-desc {
  font-size: 0.75rem !important;
  color: rgba(132, 142, 156, 0.95) !important;
}

body.sr-site .hero-t-audience .hero-audience-signal {
  margin-left: auto;
  height: 1.75rem;
}

body.sr-site .hero-t-audience .hero-audience-bar {
  background: #0ecb81;
  animation: none;
  opacity: 0.85;
}

body.sr-site .hero-features-premium {
  max-width: none;
}

body.sr-site .hero-features-premium .card {
  background: rgba(11, 14, 17, 0.88) !important;
  border: 1px solid rgba(43, 49, 57, 0.9) !important;
  border-radius: 0.75rem !important;
}

/* Hide old dial decorations */
body.sr-site .hero-dial-aura,
body.sr-site .hero-dial-ring,
body.sr-site .hero-dial-live-badge,
body.sr-site .hero-premium-dial .hero-readout-shell {
  display: none !important;
}

body.sr-site .hero-premium-dial,
body.sr-site .hero-terminal-card-wrap {
  display: contents;
}

body.sr-site .hero-stat-grid {
  display: none !important;
}

body.sr-site .hero-cta-premium:not(.hero-t-actions) {
  display: none !important;
}

@media (min-width: 768px) {
  body.sr-site .hero-terminal-shell {
    max-width: 36rem;
  }

  body.sr-site .hero-visual-h1.hero-terminal-title {
    font-size: 1.5rem !important;
  }

  body.sr-site .hero-t-actions {
    grid-template-columns: 1fr 1fr;
  }

  body.sr-site .hero-t-actions .hero-cta-primary {
    grid-column: 1;
  }

  body.sr-site .hero-t-actions .hero-cta-secondary {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  body.sr-site .hero-visual-h1.hero-terminal-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 1.05rem !important;
  }

  body.sr-site .hero-t-head {
    flex-wrap: wrap;
  }

  body.sr-site .hero-t-status-line {
    width: 100%;
    text-align: left;
    white-space: normal;
  }
}