:root {
    --dark: #2f4858;
    --dark-mid: #175661;
    --blue-mid: #006b82;
    --blue-light: #00919e;
    --cyan: #93fae4;
    --mint: #68edcb;
    --mint-strong: #3bf243;
    --green-water: #cfffcf;
    --green-light: #a1ff94;
    --white: #ffffff;

    --gradient-hero: linear-gradient(135deg, #2f4858 0%, #175661 40%, #006b82 70%, #00919e 100%);
    --gradient-accent: linear-gradient(90deg, #68edcb, #3bf243);
    --gradient-card: linear-gradient(135deg, rgba(147, 250, 228, 0.08), rgba(59, 242, 67, 0.05));
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── CUSTOM SCROLLBAR ─── */
/* Chrome, Safari, Edge */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0d1f2d;
}

::-webkit-scrollbar-thumb {
    background: rgba(147, 250, 228, 0.15);
    border: 1px solid rgba(147, 250, 228, 0.1);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(104, 237, 203, 0.3);
    border-color: var(--mint);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 250, 228, 0.2) #0d1f2d;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Work Sans', sans-serif;
    background: #0d1f2d;
    color: var(--white);
    overflow-x: hidden;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Archivo', sans-serif;
}

/* ─── NOISE OVERLAY ─── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* ─── LOGO WATERMARK ─── */
.r-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    color: rgba(104, 237, 203, 0.02);
    /* Very subtle mint */
    transition: transform 0.1s ease-out;
}

/* ─── VISUAL STABILITY (Prevent FOUC/Layout Shift) ─── */
.reveal-el,
.hero-title,
.hero-subtitle,
.hero-badge,
.hero-actions,
.stat,
.why-card {
    opacity: 0;
}

/* Reserve space for blog grid to prevent jump */
#blogGrid {
    min-height: 400px;
    transition: opacity 0.3s ease;
}

/* Ensure progress bars start at zero if they are meant to animate */
.progress-fill {
    width: 0 !important;
}