:root {
    color-scheme: light;
}

body {
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.08), transparent 28rem),
        #f8fafc;
}

::selection {
    background: #bfdbfe;
    color: #172554;
}

.site-header {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(226, 232, 240, 0.9);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.main-nav-indicator {
    width: 0;
    opacity: 0;
    transform: translateX(0);
    transition:
        width 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease;
}

.main-nav-indicator.is-visible {
    opacity: 1;
}

.main-nav-link {
    transition: color 280ms ease;
}

.main-nav-link.is-active,
.main-nav-link.is-previewed {
    color: white;
}

.main-navigation.is-previewing .main-nav-link.is-active:not(.is-previewed) {
    color: #475569;
}

.mobile-nav-link {
    transition: color 320ms ease, background-color 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav-link:hover {
    background: #f1f5f9;
    transform: translateX(0.2rem);
}

.mobile-nav-link.is-active {
    color: #1d4ed8;
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

.hero-grid {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
}

.product-shell {
    box-shadow:
        0 44px 90px rgba(15, 23, 42, 0.22),
        0 8px 24px rgba(15, 23, 42, 0.12);
}

.soft-card {
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.interactive-card {
    transform: translateY(0);
    transition:
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 520ms ease,
        box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.interactive-card:hover {
    transform: translateY(-0.2rem);
}

.glass-card {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.section-orb {
    filter: blur(72px);
    pointer-events: none;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.interactive-card.reveal {
    transition:
        opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 520ms ease,
        box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.interactive-card.reveal.is-visible:hover {
    transform: translateY(-0.2rem);
}

.mobile-panel {
    visibility: hidden;
    opacity: 0;
    transition: visibility 200ms, opacity 200ms ease;
}

.mobile-panel [data-mobile-drawer] {
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-panel.is-open {
    visibility: visible;
    opacity: 1;
}

.mobile-panel.is-open [data-mobile-drawer] {
    transform: translateX(0);
}

.showcase-slide {
    display: none;
}

.showcase-slide.is-active {
    display: block;
    animation: slide-in 360ms ease both;
}

.showcase-tab[aria-selected="true"] {
    color: white;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.72));
    border-color: rgba(96, 165, 250, 0.72);
    box-shadow: 0 16px 38px rgba(30, 64, 175, 0.24);
}

.showcase-tab[aria-selected="true"] .showcase-tab-index {
    color: white;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.showcase-tab[aria-selected="true"] .showcase-tab-description {
    color: #dbeafe;
}

.showcase-tab[aria-selected="true"] .showcase-tab-arrow {
    transform: translateX(2px);
}

.showcase-tab-progress {
    opacity: 0;
    transform: scaleX(0);
}

.showcase-tab[aria-selected="true"] .showcase-tab-progress {
    opacity: 1;
    animation: showcase-progress 6.5s linear both;
}

details[open] .faq-icon {
    transform: rotate(45deg);
}

details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: hidden;
    transition: block-size 250ms, content-visibility 250ms, opacity 250ms;
    transition-behavior: allow-discrete;
}

details[open]::details-content {
    block-size: auto;
    opacity: 1;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes showcase-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}