/* site-theme.css — ArbTrader's shared type and motion (AdCentrl-inspired),
   on top of each page's own colors. Pages keep their tokens; this only adds
   the display font, pill buttons, accent headlines, the turning rings and the
   scroll-in animation. Respects prefers-reduced-motion. */

:root{ --display: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif; }

/* ---- type ---- */
h1, h2, h3, .brand, .btn, .eyebrow, .app-tab, .label, .faq-q, .section-label, .price-figure, .kpi-k, th{ font-family: var(--display); }
.compare-card h3, .step h3, .footer-brand, .site-nav .brand, .price-card .price-figure{ font-family: var(--display); }
header.hero h1{ font-size: clamp(2.4rem, 4.6vw, 3.5rem); line-height: 1.04; max-width: 13ch; }
/* Headlines after the reference: bold geometric sans, one solid color,
   tight leading, sentence case; the line under the hero headline gets an
   accent bar. */
h1{ font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; color: var(--ink); text-transform: none; }
h2{ font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
h3{ font-weight: 600; letter-spacing: 0; }
h1 .hl, h2 .hl{ color: inherit; }
header.hero .lede, .auth-sub, .acct-email, .wrap > header .updated{ border-left: 2px solid var(--accent); padding-left: 12px; }
.brand{ text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.eyebrow{ color: var(--accent); letter-spacing: 0.2em; }
.app-tab{ text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.btn, .btn-primary, .btn-ghost{ border-radius: 999px; letter-spacing: 0.03em; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn-primary:not([disabled]):hover, .btn:not([disabled]):hover{ transform: translateY(-1px); }
@media (max-width: 520px){
  .brand{ letter-spacing: 0.04em; }
  .app-tab{ letter-spacing: 0.02em; font-size: 0.7rem; padding: 6px 6px; }
}
@media (max-width: 430px){ .app-tabs ~ * .brand, nav .nav-left .brand{ font-size: 0; gap: 0; } }

/* ---- turning rings behind the page header ---- */
html{ overflow-x: hidden; }
body{ overflow-x: clip; }
.has-hero-art{ position: relative; isolation: isolate; }
.has-hero-art > :not(.hero-art){ position: relative; z-index: 1; }
.hero-art{ position: absolute; top: -40px; right: -150px; width: 520px; height: 440px; pointer-events: none; z-index: 0; }
.hero-art .ring{ position: absolute; border-radius: 50%; }
.hero-art .r1{ inset: 0; background: conic-gradient(from 180deg, transparent 0 22%, color-mix(in srgb, var(--accent) 25%, transparent) 34%, var(--accent) 56%, color-mix(in srgb, var(--accent) 30%, transparent) 70%, transparent 84%); -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 77%, #000 88%, transparent 89%); mask: radial-gradient(closest-side, transparent 76%, #000 77%, #000 88%, transparent 89%); animation: at-spin 30s linear infinite; }
.hero-art .r2{ inset: 80px; background: conic-gradient(from 30deg, transparent 0 45%, var(--success) 60%, transparent 74%); -webkit-mask: radial-gradient(closest-side, transparent 83%, #000 84%, #000 89%, transparent 90%); mask: radial-gradient(closest-side, transparent 83%, #000 84%, #000 89%, transparent 90%); animation: at-spin 22s linear infinite reverse; }
.hero-art .glow{ position: absolute; inset: 140px; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%); animation: at-pulse 7s ease-in-out infinite; }
.hero-art .spark{ position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: at-drift 8s ease-in-out infinite; }
.hero-art .s1{ top: 44%; left: 12%; }
.hero-art .s2{ top: 74%; left: 60%; width: 4px; height: 4px; animation-delay: -3s; }
header.hero > .hero-art{ top: 10px; right: -170px; }
.auth-wrap > .hero-art.small{ right: -290px; top: 10px; }
.hero-art.small{ width: 380px; height: 330px; right: -210px; top: -30px; opacity: 0.8; }
@keyframes at-spin{ to{ transform: rotate(360deg); } }
@keyframes at-pulse{ 50%{ opacity: 0.5; transform: scale(1.08); } }
@keyframes at-drift{ 50%{ transform: translate(14px, -10px); opacity: 0.5; } }
@media (max-width: 760px){ .hero-art, .hero-art.small{ width: 320px; height: 280px; right: -170px; top: -20px; opacity: 0.5; } }

/* ---- scroll-in ---- */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  .hero-art .ring, .hero-art .glow, .hero-art .spark{ animation: none; }
}