:root {
    color-scheme: dark;
    --brand-amber: #f59e0b;
    --brand-gold: #fbbf24;
    --brand-cyan: #22d3ee;
    --brand-ink: #08090c;
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at 15% 0%, rgba(245, 158, 11, .08), transparent 28rem),
        radial-gradient(circle at 90% 10%, rgba(34, 211, 238, .06), transparent 24rem),
        #08090c;
}

::selection { background: var(--brand-gold); color: #111827; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand-cyan);
    outline-offset: 3px;
}

.brand-card {
    background: linear-gradient(145deg, rgba(21, 24, 33, .96), rgba(12, 14, 20, .96));
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

.brand-card:hover { border-color: rgba(245, 158, 11, .42); }

.brand-button { transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.brand-button:hover { transform: translateY(-1px); filter: brightness(1.07); }
.brand-button:active { transform: translateY(0); }

.status-dot { box-shadow: 0 0 0 4px rgba(16, 185, 129, .12), 0 0 22px rgba(16, 185, 129, .55); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}