body {
    box-sizing: border-box;
}

/* html {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
} */

/* html {
  font-family: "Space grotesk", sans-serif;
  font-optical-sizing: auto;
} */

/* body { font-family: 'Space Grotesk', system-ui, sans-serif; } */

html {
    font-family: 'Satoshi', system-ui, sans-serif;
}

.site-header {
    /* background: rgba(255, 255, 255, 0.95); */
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    /* backdrop-filter: blur(12px); */
    padding: 0;
    transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}

.site-header-floating {
    background: transparent;
    border-bottom-color: transparent;
    padding-top: 0.75rem;
}

.site-header-card {
    border-radius: 0;
    padding: 16px 0;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: padding 0.4s ease;
}

.site-header-nav {
    gap: 2rem;
}

.site-header-cta {
    gap: 1.25rem;
}

.site-header-inverted .site-header-nav a {
    color: rgba(255, 255, 255, 0.78);
}

.site-header-inverted .site-header-nav a:hover {
    color: #fff;
}

.site-header-inverted .site-header-cta button {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .site-header {
        padding-top: 0.75rem;
    }

    .site-header-card {
        border-radius: 20px;
        padding: 12px 16px;
        width: 100% !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(15, 23, 42, 0.08);
    }

    .site-header-nav {
        gap: 1.5rem;
    }
}

.site-header-card {
        backdrop-filter: blur(12px);

}

/* Framer-style text animation on hover for buttons and links */
.hover-slide-up {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.hover-slide-up:hover {
    transform: translateY(-2px);
}

/* Smooth rotation animation with fade */
@keyframes rotateWithFade {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: rotate(180deg);
        opacity: 0.3;
    }

    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

.rotate-fade {
    animation: rotateWithFade 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.testimonial-white-shadow {
    box-shadow: 0px -275px 73px -32px rgba(255, 255, 255, 0.75) inset;
    -webkit-box-shadow: 0px -275px 73px -32px rgba(255, 255, 255, 0.75) inset;
    -moz-box-shadow: 0px -275px 73px -32px rgba(255, 255, 255, 0.75) inset;
}

.hero-fireflies canvas {
    width: 100%;
    height: 100%;
    display: block;
    filter: blur(1px);
    opacity: 0.7;
}

.pill-dot {
    height: 3px;
    width: 48px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    transition: width 0.35s cubic-bezier(0.4, 0.0, 0.2, 1),
        background 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.pill-dot-active {
    width: 96px;
    background: rgba(239, 68, 68, 0.9);
}

.blur-container {
    bottom: calc(calc(100% - min(var(--framer-viewport-height, 100%), 100%)) + 0px);
    height: calc(min(var(--framer-viewport-height, 100%), 100%) * .1);
    position: var(--framer-canvas-fixed-position, fixed);
    z-index: 8;
    flex: none;
    order: 1004;
    width: 100%;
    left: 0%;
}

.hero-visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-swiper {
    width: 100%;
    height: 100%;
}

.hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) saturate(1.1);
    transform: scale(1.05);
    transition: transform 6s ease;
}

.hero-swiper .swiper-slide-active img {
    transform: scale(1.15);
}

.hero-carousel-dim {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(239, 68, 68, 0.25), transparent 40%),
        linear-gradient(120deg, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0.58) 45%, rgba(2, 6, 23, 0.94));
    pointer-events: none;
    backdrop-filter: blur(4px);
    z-index: 1;
}

.hero-progress {
    margin-top: 2.5rem;
}

.hero-progress-label {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.hero-progress-track {
    margin-top: 0.85rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.hero-progress-dot {
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    position: relative;
}

.hero-progress-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ef4444, #f97316);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.hero-progress-dot.active::after {
    transform: scaleX(1);
}

@media (max-width: 640px) {
    .hero-progress-dot {
        width: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-swiper .swiper-slide img {
        transition: none;
        transform: scale(1);
    }
}