/* Hexant Analytics marketing site — custom styles.
   Tailwind (CDN) handles layout; this file carries brand primitives and the
   bits Tailwind would make ugly (marquee, switches, focus rings). */

:root {
    --hx-bg:        #020617;
    --hx-panel:     #0b1220;
    --hx-border:    #1e293b;
    --hx-accent:    #fbbf24;
    --hx-emerald:   #34d399;
    --hx-rose:      #f87171;
    --hx-slate:     #94a3b8;
}

html { color-scheme: dark; scroll-behavior: smooth; }

body { font-feature-settings: 'ss01', 'cv11'; }

/* Subtle grid texture behind the hero, stock-terminal-esque. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      linear-gradient(rgba(148,163,184,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148,163,184,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
}
main, header, footer, .hx-ticker-wrap { position: relative; z-index: 1; }

/* --- Ticker tape --- */
.hx-ticker-wrap { overflow: hidden; }
.hx-ticker {
    display: inline-flex;
    gap: 2.5rem;
    padding: 0.6rem 0;
    white-space: nowrap;
    animation: hx-ticker 60s linear infinite;
    will-change: transform;
}
.hx-tick {
    display: inline-flex;
    gap: 0.5rem;
    letter-spacing: 0.08em;
    color: var(--hx-slate);
}
@keyframes hx-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hx-ticker { animation: none; }
}

/* --- Custom switches --- */
.hx-switch { display: inline-flex; align-items: center; cursor: pointer; }
.hx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.hx-switch-track {
    display: inline-block;
    position: relative;
    width: 2.5rem;
    height: 1.35rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 999px;
    transition: background 160ms ease, border-color 160ms ease;
}
.hx-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.05rem;
    height: 1.05rem;
    background: #cbd5e1;
    border-radius: 999px;
    transition: transform 160ms ease, background 160ms ease;
}
.hx-switch input:checked + .hx-switch-track {
    background: rgba(251,191,36,0.25);
    border-color: var(--hx-accent);
}
.hx-switch input:checked + .hx-switch-track .hx-switch-thumb {
    transform: translateX(1.15rem);
    background: var(--hx-accent);
}
.hx-switch input:focus-visible + .hx-switch-track {
    outline: 2px solid var(--hx-accent);
    outline-offset: 2px;
}
.hx-switch input:disabled + .hx-switch-track {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Rotate chevron when a category is expanded. */
[data-action="toggle-category"][aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Focus ring for buttons/links */
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--hx-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Slight lift on the hero preview card */
.hx-lift { transition: transform 300ms ease, box-shadow 300ms ease; }
.hx-lift:hover { transform: translateY(-2px); }