/* ---------- Promo banner (under the nav; 3 rotating slides, rotation in promo.js) ---------- */
.promo {
    --promo-ms: 7000ms;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #060913;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.promo::after { /* moving shine sweep */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.10) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: promo-shine 3.5s ease-in-out infinite;
}
@keyframes promo-shine { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
.promo-stage { display: grid; position: relative; z-index: 2; }
.promo-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 56px 12px 24px;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.45;
    color: #eef2fb;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.98);
    filter: blur(6px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease, visibility 0s linear .6s;
}
.promo-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease, visibility 0s;
}
.promo-slide::before { /* per-slide animated backdrop */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: 300% 300%;
    animation: promo-flow 10s ease infinite;
}
@keyframes promo-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.promo-text { margin: 0; }
.promo-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px dashed currentColor;
    background: rgba(0, 0, 0, 0.35);
}
.promo-grad { background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 200% auto; animation: promo-text-flow 4s linear infinite; }
@keyframes promo-text-flow { to { background-position: 200% center; } }
.promo-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.promo-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: promo-pulse 2.4s ease-in-out infinite;
}
.promo-cta:hover { transform: translateY(-2px) scale(1.04); }
.promo-cta span { transition: transform .2s ease; }
.promo-cta:hover span { transform: translateX(4px); }
@keyframes promo-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--promo-glow, rgba(59, 130, 246, .55)); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* Slide 1: Agent! for Mac */
.promo-mac::before { background-image: linear-gradient(120deg, #0b1a3a, #1e1b4b, #0c2a3a, #1e1b4b, #0b1a3a); }
.promo-mac { --promo-glow: rgba(34, 211, 238, .55); }
.promo-mac .promo-grad { background-image: linear-gradient(90deg, #60a5fa, #22d3ee, #a78bfa, #60a5fa); }
.promo-mac .promo-icon { color: #fff; background: linear-gradient(135deg, #3b82f6, #22d3ee); box-shadow: 0 0 18px rgba(34, 211, 238, .5); }
.promo-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 700; font-size: 0.85em; }
.chip-as { color: #e9d5ff; background: rgba(167, 139, 250, .18); border: 1px solid rgba(167, 139, 250, .5); }
.chip-intel { color: #bae6fd; background: rgba(56, 189, 248, .15); border: 1px solid rgba(56, 189, 248, .5); }
.promo-mac .promo-cta { background: linear-gradient(135deg, #3b82f6, #22d3ee); }

/* Slide 2: AgentiLoopCLI (Rust + Go) */
.promo-cli::before { background-image: linear-gradient(120deg, #1a0f08, #0a1f24, #24110a, #06222a, #1a0f08); }
.promo-cli { --promo-glow: rgba(249, 115, 22, .55); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; }
.promo-cli .promo-grad { background-image: linear-gradient(90deg, #fb923c, #f97316, #22d3ee, #00add8, #fb923c); }
.promo-prompt { font-weight: 800; color: #4ade80; background: #0b0f0c; border: 1px solid rgba(74, 222, 128, .45); box-shadow: 0 0 14px rgba(74, 222, 128, .35); font-size: 0.85rem; }
.promo-new {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.78em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0b0f0c;
    background: #4ade80;
    animation: promo-blink-bg 1.6s ease-in-out infinite;
}
@keyframes promo-blink-bg { 50% { background: #bbf7d0; } }
.promo-lang { font-weight: 800; text-decoration: none; padding: 1px 8px; border-radius: 6px; transition: background .2s ease, transform .2s ease; display: inline-block; }
.promo-lang:hover { transform: translateY(-1px); }
.lang-rust { color: #fdba74; background: rgba(249, 115, 22, .16); border: 1px solid rgba(249, 115, 22, .5); }
.lang-rust:hover { background: rgba(249, 115, 22, .32); }
.lang-go { color: #67e8f9; background: rgba(0, 173, 216, .16); border: 1px solid rgba(0, 173, 216, .5); }
.lang-go:hover { background: rgba(0, 173, 216, .32); }
.promo-caret { display: inline-block; width: 9px; height: 1.05em; margin-left: 4px; vertical-align: -2px; background: #4ade80; animation: promo-caret 1s steps(1) infinite; }
@keyframes promo-caret { 50% { opacity: 0; } }
.promo-cli .promo-cta { background: linear-gradient(135deg, #f97316, #00add8); }

/* Slide 3: Sponsor (Fluxion AI) */
.promo-fx::before { background-image: linear-gradient(120deg, #1c1407, #2a1d05, #151a26, #2a1d05, #1c1407); }
.promo-fx { --promo-glow: rgba(250, 204, 21, .55); }
.promo-fx .promo-grad { background-image: linear-gradient(90deg, #fde68a, #f59e0b, #e5e7eb, #fde68a); }
.promo-sponsored {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fde68a;
    border: 1px solid rgba(250, 204, 21, .55);
    background: rgba(250, 204, 21, .1);
}
.promo-save { display: inline-block; font-weight: 700; color: #fef3c7; }
.promo-save b { font-size: 1.25em; color: #facc15; text-shadow: 0 0 12px rgba(250, 204, 21, .7); }
.promo-fx code { color: #fde68a; }
.promo-fx .promo-cta { color: #1c1407; background: linear-gradient(135deg, #fde68a, #f59e0b); }

/* Dots with a progress fill that tracks the rotation timer */
.promo-dots { position: absolute; z-index: 3; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.promo-dot { position: relative; width: 6px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .2); cursor: pointer; overflow: hidden; }
.promo-dot span { position: absolute; left: 0; right: 0; top: 0; height: 0; background: #fff; border-radius: 3px; }
.promo-dot.is-active span { animation: promo-progress var(--promo-ms) linear forwards; }
.promo.is-paused .promo-dot.is-active span { animation-play-state: paused; }
@keyframes promo-progress { to { height: 100%; } }

@media (max-width: 640px) {
    .promo-slide { padding: 12px 36px 12px 16px; font-size: 0.9rem; gap: 8px 10px; }
    .promo-icon, .promo-sponsored { display: none; }
    .promo-dots { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .promo::after, .promo-slide::before, .promo-grad, .promo-cta, .promo-new, .promo-caret { animation: none; }
    .promo-slide { transition: opacity .3s ease, visibility 0s linear .3s; transform: none; filter: none; }
}