/* =========================
   Base / Utilities
   ========================= */
html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
        "Apple Color Emoji", "Segoe UI Emoji";
}

.code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

.glass {
    backdrop-filter: saturate(180%) blur(10px);
    background: rgba(255, 255, 255, .6);
}

.gradient {
    background: radial-gradient(80% 50% at 50% 0%, rgba(59, 130, 246, .25), rgba(255, 255, 255, 0));
}

.shadow-soft {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.ring-brand {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, .13);
}

/* =========================
   Hero
   ========================= */
.hero-shell {
    position: relative;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: -10% -20% -30% -20%;
    z-index: -1;
    background:
        radial-gradient(900px 500px at 10% 10%, rgba(124, 58, 237, .12), transparent 40%),
        radial-gradient(900px 500px at 90% 90%, rgba(59, 130, 246, .10), transparent 40%),
        #fff;
}

/* =========================
   Dashboard bits
   ========================= */
.dash {
    background: linear-gradient(180deg, rgba(2, 6, 23, .03), rgba(2, 6, 23, .01));
    border: 1px solid rgba(2, 6, 23, .06);
}

.dash-tab[aria-selected="true"] {
    color: #0f172a;
    background: #fff;
    border-color: rgb(226, 232, 240);
}

/* Tiny charts */
.bar {
    transform-origin: bottom;
    transition: height .9s cubic-bezier(.2, .9, .25, 1), opacity .4s;
}

.spark path {
    stroke-width: 2;
    fill: none;
}

.ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* =========================
   Text Marquee
   ========================= */
.ticker {
    overflow: hidden;
    position: relative;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.track {
    display: inline-flex;
    gap: 5rem;
    padding: 12px 5rem;
    white-space: nowrap;
    animation: marquee-slide 28s linear infinite;
}

@keyframes marquee-slide {
    to {
        transform: translateX(-50%);
    }
}

/* =========================
   Logos Marquee
   ========================= */
.logos-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: marquee-logos 60s linear infinite;
}

.logos-marquee:hover .marquee-row {
    animation-play-state: paused;
}

@keyframes marquee-logos {
    to {
        transform: translateX(-100%);
    }
}

.logo-tile {
    height: 120px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    display: block;
    height: var(--h, auto);
    width: auto;
    max-height: none;
    object-fit: contain;
    opacity: .8;
    filter: grayscale(100%);
}

@media (prefers-reduced-motion: reduce) {

    .track,
    .marquee-row {
        animation: none;
    }
}