/* AI Agent HUD demo (smart-tech.html) */
.jarvis-section {
    position: relative;
    overflow: hidden;
}

.jarvis-intro {
    max-width: 640px;
    margin: 0 auto var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
    font-family: 'Instrument Sans', sans-serif;
}

.jarvis-hud {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 420px) 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 50% 40%, rgba(0, 247, 212, 0.10), transparent 60%),
        linear-gradient(rgba(0, 247, 212, 0.04) 1px, transparent 1px) 0 0 / 100% 28px,
        linear-gradient(90deg, rgba(0, 247, 212, 0.04) 1px, transparent 1px) 0 0 / 28px 100%,
        var(--surface-background);
    font-family: 'Inter Tight', monospace;
}

/* Corner brackets */
.jarvis-hud::before,
.jarvis-hud::after {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    border: 2px solid var(--primary-color);
    opacity: 0.7;
}
.jarvis-hud::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.jarvis-hud::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* Side panels */
.jarvis-panel {
    align-self: stretch;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(15, 26, 42, 0.6);
    font-size: 13px;
    color: var(--text-secondary);
}

.jarvis-panel-title {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}
.jarvis-panel-title:not(:first-child) { margin-top: 20px; }

.jarvis-status,
.jarvis-log {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jarvis-status li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}
.jarvis-status b { font-weight: 600; }
.jarvis-status .ok { color: var(--status-success); }

.jarvis-meter {
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 247, 212, 0.1);
    overflow: hidden;
}
.jarvis-meter span {
    display: block;
    height: 100%;
    width: 10%;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
    transition: width 0.1s linear;
}

.jarvis-readout {
    margin-top: 12px;
    font-size: 22px;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.jarvis-log li {
    position: relative;
    padding: 8px 0 8px 18px;
    border-bottom: 1px dashed rgba(0, 247, 212, 0.1);
    animation: jarvis-log-in 0.5s ease both;
}
.jarvis-log li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-warning);
    box-shadow: 0 0 8px var(--status-warning);
}
.jarvis-log li.done::before {
    background: var(--status-success);
    box-shadow: 0 0 8px var(--status-success);
}
.jarvis-log small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}

@keyframes jarvis-log-in {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: none; }
}

/* Core */
.jarvis-core-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.jarvis-core {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1;
}

.jarvis-rings,
.jarvis-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ring {
    fill: none;
    stroke: var(--primary-color);
    transform-origin: 200px 200px;
}
.ring-1 { stroke-width: 1; opacity: 0.35; stroke-dasharray: 4 10; animation: jarvis-spin 40s linear infinite; }
.ring-2 { stroke-width: 3; opacity: 0.6; stroke-dasharray: 120 40 20 40; animation: jarvis-spin 18s linear infinite reverse; }
.ring-3 { stroke-width: 1; opacity: 0.3; }
.ring-4 { stroke-width: 2; opacity: 0.8; stroke-dasharray: 60 20; animation: jarvis-spin 8s linear infinite; }
.ring-5 { stroke-width: 1; opacity: 0.5; stroke-dasharray: 2 6; animation: jarvis-spin 12s linear infinite reverse; }

@keyframes jarvis-spin {
    to { transform: rotate(360deg); }
}

.jarvis-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(var(--jarvis-pulse, 1));
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, #E9FFFB 0%, var(--primary-color) 35%, rgba(0, 247, 212, 0.15) 70%, transparent 72%);
    box-shadow: 0 0 40px rgba(0, 247, 212, 0.6), 0 0 90px rgba(0, 247, 212, 0.3);
}
.jarvis-orb span {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.15em;
    color: var(--surface-background);
}

.jarvis-state {
    margin-top: var(--spacing-sm);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.jarvis-bars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    margin: 10px 0;
}
.jarvis-bars i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--primary-color);
    box-shadow: 0 0 6px rgba(0, 247, 212, 0.7);
}

.jarvis-transcript {
    min-height: 4.8em;
    max-width: 380px;
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
}
.jarvis-transcript::after {
    content: "▍";
    color: var(--primary-color);
    animation: jarvis-blink 1s steps(1) infinite;
}

@keyframes jarvis-blink {
    50% { opacity: 0; }
}

.jarvis-note {
    margin-top: var(--spacing-md);
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 960px) {
    .jarvis-hud {
        grid-template-columns: 1fr;
        padding: var(--spacing-lg) var(--spacing-md);
    }
    .jarvis-core-wrap { order: -1; }
    .jarvis-panel-left { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ring,
    .jarvis-log li,
    .jarvis-transcript::after { animation: none; }
}

/* HUD as the page hero */
.jarvis-hero .container {
    max-width: 1400px;
}

.jarvis-hero .hero-content {
    margin-bottom: var(--spacing-2xl);
}

.jarvis-hero .hero-description {
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .jarvis-hero {
        padding: 100px 0 var(--spacing-lg);
    }
}

/* App store buttons: hug the right edge and sit together so they clear the
   wider top banner on this page. Scale the group once instead of each button,
   which removes the dead space the per-button scale left between them. */
@media (min-width: 969px) {
    .app-store-nav {
        top: 20px;
        right: 8px;
        gap: 10px;
        transform: scale(0.6);
        transform-origin: top right;
    }

    .app-store-nav .app-download-btn {
        transform: none;
    }

    .app-store-nav .app-download-btn:hover {
        transform: translateY(-2px);
    }

    .app-store-nav .app-download-btn--coming-soon:hover,
    .app-store-nav .app-download-btn--coming-soon:focus-visible {
        transform: none;
    }
}

/* Voice toggle for the spoken demo */
.jarvis-voice-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--spacing-sm);
    padding: 8px 16px;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    background: rgba(0, 247, 212, 0.08);
    color: var(--primary-color);
    font: 600 13px 'Instrument Sans', sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.jarvis-voice-btn:hover,
.jarvis-voice-btn:focus-visible {
    background: rgba(0, 247, 212, 0.18);
    box-shadow: 0 0 14px rgba(0, 247, 212, 0.4);
}
.jarvis-voice-btn svg {
    width: 16px;
    height: 16px;
}
.jarvis-voice-btn[aria-pressed="true"] {
    background: var(--primary-color);
    color: var(--surface-background);
}
.jarvis-voice-btn[hidden] {
    display: none;
}