/* ============================
   N6 Diesel Nano Additive
   Main Stylesheet
   ============================ */

/* Base / Body */
body {
    font-family: 'Nunito Sans', sans-serif;
    background-color: #f8f9ff;
    touch-action: pan-x pan-y;
}

/* Global anchor reset — prevent browser-default blue links */
a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    letter-spacing: -0.02em;
    color: #528247;
}

/* Glass Panel */
.glass-panel {
    background: rgba(248, 249, 255, 0.6);
    backdrop-filter: blur(24px);
}

/* ============================
   Golden Ratio Typography System
   Refined Scale (Base: 16px, φ ≈ 1.618)
   ============================ */
:root {
    --fs-base: 1rem;
    /* 16px */
    --fs-md: 1.25rem;
    /* 20px */
    --fs-lg: 2rem;
    /* 32px */
    --fs-xl: 3.2rem;
    /* ~51px */
    --fs-xxl: 5.2rem;
    /* ~83px */
}

.font-base {
    font-size: var(--fs-base);
}

.font-md {
    font-size: var(--fs-md);
}

.font-lg {
    font-size: var(--fs-lg);
}

.font-xl {
    font-size: var(--fs-xl);
}

@media (max-width: 768px) {
    :root {
        --fs-base: 0.9375rem;
        /* 15px */
        --fs-md: 1.0625rem;
        /* 17px */
        --fs-lg: 1.375rem;
        /* 22px */
        --fs-xl: 1.875rem;
        /* 30px */
        --fs-xxl: 2.5rem;
        /* 40px */
    }
}

/* ============================
   Custom Scrollbar for Description Cards
   ============================ */
.description-scroll {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.description-scroll::-webkit-scrollbar {
    width: 4px;
}

.description-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.description-scroll::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 20px;
}

/* ============================
   Lenis Smooth Scroll
   ============================ */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}