/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #071522; }
::-webkit-scrollbar-thumb { background: #1a9e8f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4fd1c5; }

/* ── Selection ── */
::selection { background: #4fd1c5; color: #071522; }

/* ── Navbar ── */
#navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(10, 37, 51, 0.08);
}
.nav-logo-text { color: #0a1f33; }
#navbar.scrolled .nav-logo-text { color: #0a1f33; }

/* ── Hero Gradient ── */
.hero-gradient {
    background: linear-gradient(135deg, #040d17 0%, #0a1f33 25%, #0f2a45 50%, #1a3a5c 75%, #0a2540 100%);
}
.hero-pattern {
    background-image: radial-gradient(circle at 25% 25%, rgba(79, 209, 197, 0.15) 0%, transparent 50%),
                      radial-gradient(circle at 75% 75%, rgba(79, 209, 197, 0.1) 0%, transparent 50%);
}
.hero-orb { pointer-events: none; }

/* ── Hero Animations ── */
@keyframes heroFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.05); }
}
@keyframes heroFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, 30px) scale(1.03); }
}
@keyframes heroFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(15px, 15px); }
}
.hero-orb-1 { animation: heroFloat1 8s ease-in-out infinite; }
.hero-orb-2 { animation: heroFloat2 10s ease-in-out infinite; }
.hero-orb-3 { animation: heroFloat3 7s ease-in-out infinite; }

@keyframes heroBadgeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroHeadlineIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroSubtitleIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroCtasIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroScrollIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hero-badge { animation: heroBadgeIn 0.8s ease forwards; animation-delay: 0.2s; opacity: 0; }
.hero-headline { animation: heroHeadlineIn 0.9s ease forwards; animation-delay: 0.4s; opacity: 0; }
.hero-subtitle { animation: heroSubtitleIn 0.9s ease forwards; animation-delay: 0.6s; opacity: 0; }
.hero-ctas { animation: heroCtasIn 0.9s ease forwards; animation-delay: 0.8s; opacity: 0; }
.hero-scroll { animation: heroScrollIn 1s ease forwards; animation-delay: 1.2s; opacity: 0; }

/* ── Marquee ── */
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track { animation: marqueeScroll 30s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { display: inline-block; padding: 0 4px; }

/* ── Section Labels ── */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #1a9e8f;
    background: linear-gradient(135deg, #f0fdf9, #ccfbef);
    padding: 0.4em 1em;
    border-radius: 100px;
    border: 1px solid rgba(79, 209, 197, 0.3);
}
.section-label-dark {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4fd1c5;
    background: rgba(79, 209, 197, 0.1);
    padding: 0.4em 1em;
    border-radius: 100px;
    border: 1px solid rgba(79, 209, 197, 0.25);
}

/* ── Section Headings ── */
.section-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: #0a1f33;
    letter-spacing: -0.02em;
}
.section-heading-light {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: #f0f4f8;
    letter-spacing: -0.02em;
}

/* ── Reveal Animations ── */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-up { transform: translateY(0); }
.reveal-left { transform: translateX(0); }
.reveal-right { transform: translateX(0); }

@media (prefers-reduced-motion: no-preference) {
    .reveal-up {
        opacity: 0;
        transform: translateY(40px);
    }
    .reveal-left {
        opacity: 0;
        transform: translateX(-40px);
    }
    .reveal-right {
        opacity: 0;
        transform: translateX(40px);
    }
    .reveal-up.revealed,
    .reveal-left.revealed,
    .reveal-right.revealed {
        opacity: 1;
        transform: none;
    }
}

/* ── Product Cards ── */
.product-card {
    border: 1px solid rgba(10, 37, 51, 0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.product-card:hover {
    transform: translateY(-4px);
}

/* ── Philosophy Cards ── */
.philosophy-card {
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(79, 209, 197, 0.12);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.philosophy-card:hover {
    border-color: rgba(79, 209, 197, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

/* ── Button Ripple on Focus ── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #4fd1c5;
    outline-offset: 2px;
}

/* ── Mobile Menu ── */
#mobile-menu {
    animation: mobileMenuIn 0.3s ease forwards;
}
@keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.mobile-menu-link {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(10, 37, 51, 0.06);
}
.mobile-menu-link:last-child { border-bottom: none; }