* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ============================================
   COLOR SCHEMA - Dark Forest Theme (Voted)
   ============================================ */

:root {
    /* Dark Background Scale */
    --color-bg-900: #131c12;
    --color-bg-800: #1a2318;
    --color-bg-700: #1f2b1d;
    --color-bg-600: #253326;
    --color-bg-500: #2d3e2b;
    --color-bg-400: #354535;
    --color-bg-300: #4a5a48;

    /* Primary Green - Bright Mint/Sage */
    --color-green-400: #8fd4ac;
    --color-green-500: #7bca9e;
    --color-green-600: #5fb385;
    --color-green-700: #4d9a70;
    --color-green-800: #3d7d5a;

    /* Accent Pink/Coral */
    --color-pink-400: #e89a8f;
    --color-pink-500: #d4786e;
    --color-pink-600: #c46258;

    /* Text Colors - Warm tones */
    --color-text-100: #f0ece4;
    --color-text-200: #e0dbd0;
    --color-text-300: #c4bfb0;
    --color-text-400: #9a9680;
    --color-text-500: #787466;
    --color-text-600: #5c5a4e;

    /* Base Colors */
    --color-white: #f0ece4;
    --color-black: #0d130c;

    /* Semantic Mapping */
    --color-primary: var(--color-green-500);
    --color-primary-dark: var(--color-green-700);
    --color-primary-darker: var(--color-green-800);
    --color-primary-light: var(--color-green-400);
    --color-primary-lighter: var(--color-green-400);

    --color-accent: var(--color-pink-500);
    --color-accent-light: var(--color-pink-400);
    --color-accent-dark: var(--color-pink-600);

    --color-text-primary: var(--color-text-100);
    --color-text-secondary: var(--color-text-400);
    --color-text-tertiary: var(--color-text-300);
    --color-text-dim: var(--color-text-500);

    --color-bg-primary: var(--color-bg-800);
    --color-bg-secondary: var(--color-bg-700);
    --color-bg-surface: var(--color-bg-600);
    --color-bg-elevated: var(--color-bg-500);
    --color-bg-dark: var(--color-bg-900);

    --color-border: var(--color-bg-400);
    --color-border-subtle: var(--color-bg-500);

    --color-success: var(--color-green-500);
    --color-success-dark: var(--color-green-600);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-bg-800) 0%, var(--color-bg-900) 100%);
    --gradient-surface: linear-gradient(135deg, var(--color-bg-600) 0%, var(--color-bg-700) 100%);
    --gradient-green-subtle: linear-gradient(135deg, rgba(123, 202, 158, 0.08) 0%, rgba(123, 202, 158, 0.02) 100%);

    /* Overlay Colors */
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(255, 255, 255, 0.06);
    --overlay-green: rgba(123, 202, 158, 0.06);
}

/* ============================================
   TEXT COLOR UTILITIES
   ============================================ */

.text-primary       { color: var(--color-primary); }
.text-primary-dark  { color: var(--color-primary-dark); }
.text-primary-darker{ color: var(--color-primary-darker); }
.text-primary-light { color: var(--color-primary-light); }
.text-accent        { color: var(--color-accent); }
.text-accent-light  { color: var(--color-accent-light); }
.text-body          { color: var(--color-text-primary); }
.text-body-secondary{ color: var(--color-text-secondary); }
.text-body-tertiary { color: var(--color-text-tertiary); }
.text-body-dim      { color: var(--color-text-dim); }
.text-body-light    { color: var(--color-text-dim); }
.text-white         { color: var(--color-white); }
.text-success       { color: var(--color-success); }

/* ============================================
   BACKGROUND COLOR UTILITIES
   ============================================ */

.bg-primary         { background-color: var(--color-primary); }
.bg-primary-dark    { background-color: var(--color-primary-dark); }
.bg-primary-darker  { background-color: var(--color-primary-darker); }
.bg-body            { background-color: var(--color-bg-primary); }
.bg-body-secondary  { background-color: var(--color-bg-secondary); }
.bg-body-surface    { background-color: var(--color-bg-surface); }
.bg-body-dark       { background-color: var(--color-bg-dark); }
.bg-body-elevated   { background-color: var(--color-bg-elevated); }
.bg-success         { background-color: var(--color-success); }
.bg-accent          { background-color: var(--color-accent); }
.bg-white           { background-color: var(--color-white); }

/* ============================================
   GRADIENT UTILITIES
   ============================================ */

.bg-gradient-primary      { background: var(--gradient-primary); }
.bg-gradient-surface      { background: var(--gradient-surface); }
.bg-gradient-green-subtle { background: var(--gradient-green-subtle); }

/* ============================================
   BORDER COLOR UTILITIES
   ============================================ */

.border-default       { border-color: var(--color-border); }
.border-subtle        { border-color: var(--color-border-subtle); }
.border-primary       { border-color: var(--color-primary); }
.border-primary-light { border-color: var(--color-primary-light); }

/* ============================================
   HOVER STATE UTILITIES
   ============================================ */

.hover-text-primary:hover   { color: var(--color-primary); }
.hover-bg-primary:hover     { background-color: var(--color-primary); }
.hover-bg-primary-dark:hover{ background-color: var(--color-primary-dark); }
.hover-bg-surface:hover     { background-color: var(--color-bg-surface); }
.hover-bg-elevated:hover    { background-color: var(--color-bg-elevated); }
.hover-bg-success:hover     { background-color: var(--color-success-dark); }

/* ============================================
   FOCUS STATE UTILITIES
   ============================================ */

.focus-border-primary:focus       { outline: none; border-color: var(--color-primary); }
.focus-border-primary-light:focus { outline: none; border-color: var(--color-primary-light); }

/* ============================================
   OVERLAY & BACKDROP UTILITIES
   ============================================ */

.bg-overlay-dark  { background-color: var(--overlay-dark); }
.bg-overlay-light { background-color: var(--overlay-light); }
.bg-overlay-green { background-color: var(--overlay-green); }

.backdrop-blur-light {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow-dark    { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.shadow-dark-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.shadow-dark-xl { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }
.shadow-glow-green { box-shadow: 0 0 20px rgba(123, 202, 158, 0.15); }

/* ============================================
   SHARED ANIMATIONS (used across all pages)
   ============================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpCookie {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn       { animation: fadeIn 0.5s ease; }
.animate-slideUp      { animation: slideUp 0.3s ease; }
.animate-slideUpCookie{ animation: slideUpCookie 0.3s ease-out; }
.fade-in-up           { opacity: 0; animation: fadeInUp 0.6s ease forwards; }

/* ============================================
   SHARED: MODAL & OVERLAY LAYOUT
   ============================================ */

.modal-overlay     { z-index: 9999; }
.cookie-consent    { z-index: 10000; }
.modal-content-width { width: 90%; }
.max-h-screen-90   { max-height: 90vh; }
.min-w-300         { min-width: 300px; }
.textarea-min-h    { min-height: 100px; }

/* ============================================
   SHARED: FORM INPUTS (dark theme)
   ============================================ */

.form-input {
    background-color: var(--color-bg-700);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-input::placeholder {
    color: var(--color-text-500);
}

/* ============================================
   SHARED: FORM MESSAGES
   ============================================ */

.form-message.success {
    background-color: rgba(123, 202, 158, 0.15);
    color: var(--color-green-400);
    display: block;
}

.form-message.error {
    background-color: rgba(212, 120, 110, 0.15);
    color: var(--color-pink-400);
    display: block;
}

/* ============================================
   SHARED: MODAL ACTIVE STATES
   ============================================ */

#trialModal.active,
#demoModal.active,
#contactModal.active,
#cookieSettings.active,
#waitlistModal.active,
#complianceGateModal.active {
    display: flex !important;
}

/* ============================================
   SHARED: MOBILE NAVIGATION
   ============================================ */

.mobile-nav-open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 70px !important;
    right: 20px !important;
    left: auto !important;
    background: var(--color-bg-700) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    z-index: 100 !important;
}

/* ============================================
   SHARED: SCROLLBAR (dark theme)
   ============================================ */

::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-800); }
::-webkit-scrollbar-thumb { background: var(--color-bg-400); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-green-600); }

/* ============================================
   SHARED: SECTION DIVIDER
   ============================================ */

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-bg-400), transparent);
}

/* ============================================
   SHARED: LUCIDE ICON SIZING
   ============================================ */

i[data-lucide] svg {
    width: 100%;
    height: 100%;
}