/* ============================================================================
   Home hero: copy left, animated gamma terminal right (assets/js/home-hero.js).
   Calm on purpose: muted candles, thin levels, no glow. Everything is scoped
   under .ag-hero so the rest of the home page is untouched.
   ============================================================================ */

.ag-hero {
    --agh-bg: #070a11;
    --agh-ink: #e8edf4;
    --agh-ink-2: #aab5c4;
    --agh-ink-3: #6f7c8f;
    --agh-gold: #d9b45a;
    --agh-line: rgba(148, 163, 184, 0.14);
    --agh-display: 'Outfit', 'Inter', system-ui, sans-serif;
    --agh-body: 'Inter', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--agh-bg);
    color: var(--agh-ink);
    font-family: var(--agh-body);
    padding: clamp(3.5rem, 8vw, 6rem) 24px clamp(3.5rem, 7vw, 5rem);
    text-align: left;
}
.ag-hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.ag-hero-wrap { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem; align-items: center; }
.ag-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.05rem; min-width: 0; }

.ag-hero-eyebrow { display: flex; align-items: center; gap: 0.75rem; font: 600 0.76rem var(--agh-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--agh-gold); }
.ag-hero-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.7; }
.ag-hero-stamp { transform: rotate(-1.6deg); font: 600 0.72rem var(--agh-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--agh-ink-2);
    padding: 0.38rem 0.85rem; border: 1px solid rgba(217, 180, 90, 0.4); border-radius: 7px; background: rgba(7, 10, 17, 0.75); }
.ag-hero-stamp b { color: var(--agh-gold); font-weight: 600; }

.ag-hero .ag-hero-title { font-family: var(--agh-display); font-weight: 600; font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.07; letter-spacing: -0.015em; margin: 0.2rem 0 0; color: var(--agh-ink); text-wrap: balance; }
.ag-hero .ag-hero-title span { display: block; color: var(--agh-gold); }

.ag-hero-lede { max-width: 58ch; margin: 0; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.65; color: var(--agh-ink-2); text-wrap: pretty; }
.ag-hero-lede strong { color: var(--agh-ink); font-weight: 600; }

.ag-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; padding: 0.5rem 1rem; border: 1px solid var(--agh-line); border-radius: 999px; background: rgba(7, 10, 17, 0.7); font-size: 0.82rem; color: var(--agh-ink-3); max-width: 100%; }
.ag-hero-chips .lbl { font: 600 0.62rem var(--agh-display); letter-spacing: 0.18em; color: var(--agh-gold); text-transform: uppercase; }
.ag-hero-chips b { color: var(--agh-ink-2); font-weight: 600; }

.ag-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.ag-hero .ag-btn { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.98rem var(--agh-display); padding: 0.85rem 1.35rem; border-radius: 9px; text-decoration: none; transition: background .15s, border-color .15s; }
.ag-hero .ag-btn:focus-visible { outline: 2px solid var(--agh-gold); outline-offset: 3px; }
.ag-hero .ag-btn.primary { background: var(--agh-gold); color: #1a1406; border: 1px solid var(--agh-gold); }
.ag-hero .ag-btn.primary:hover { background: #e4c26e; }
.ag-hero .ag-btn.ghost { color: var(--agh-ink); border: 1px solid rgba(232, 237, 244, 0.25); background: rgba(7, 10, 17, 0.6); }
.ag-hero .ag-btn.ghost:hover { border-color: rgba(232, 237, 244, 0.5); }
.ag-hero .ag-btn svg { flex-shrink: 0; }

.ag-hero-foot { position: absolute; bottom: 1rem; left: 24px; right: 24px; display: flex; justify-content: space-between; font: 600 0.62rem var(--agh-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--agh-ink-3); pointer-events: none; }

@media (max-width: 900px) {
    .ag-hero-wrap { grid-template-columns: minmax(0, 1fr); }
    .ag-hero-copy { align-items: center; text-align: center; }
    .ag-hero-chips, .ag-hero-ctas { justify-content: center; }
    .ag-hero-terminal-slot { display: none; }
}
@media (max-width: 560px) {
    .ag-hero { padding-left: 16px; padding-right: 16px; }
    .ag-hero-foot { left: 16px; right: 16px; }
    .ag-hero-foot span:last-child { display: none; }
    .ag-hero-chips { border-radius: 14px; justify-content: center; }
    .ag-hero-eyebrow { letter-spacing: 0.2em; }
}