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

html {
    scroll-behavior: smooth;
}

/* ============================================
   COLOR SCHEMA - Ivory Forest Theme (Kreia-inspired)
   ============================================ */

:root {
    /* Background Scale (900 = darkest footer/nav, 800 = main page, lower = card surfaces) */
    --color-bg-900: #0c3d20;       /* dark forest green — footer, nav overlay, cookie banner */
    --color-bg-800: #fffff0;       /* Background 1 — main page (ivory/cream) */
    --color-bg-700: #ffffe7;       /* Background 2 — secondary sections */
    --color-bg-600: #f4f2d8;       /* card surfaces */
    --color-bg-500: #e9e7c8;       /* elevated / subtle */
    --color-bg-400: #d4d0a8;       /* borders */
    --color-bg-300: #bbb88a;       /* strong borders / muted separators */

    /* Primary Green - Dark Forest */
    --color-green-400: #d5fba7;    /* Accent 1 — light mint for highlights/glows */
    --color-green-500: #0e4629;    /* Accent 3 — main primary (dark forest green) */
    --color-green-600: #0c3b22;
    --color-green-700: #0a3020;
    --color-green-800: #07231a;

    /* Accent Pink/Magenta */
    --color-pink-400: #ffa0e2;
    --color-pink-500: #ff78d7;     /* Accent 2 */
    --color-pink-600: #e05cbe;

    /* Text Colors — warm dark tones for light backgrounds */
    --color-text-100: #1a1a10;     /* near-black warm */
    --color-text-200: #2c2c1e;
    --color-text-300: #484838;     /* body text */
    --color-text-400: #66664e;     /* muted */
    --color-text-500: #888870;     /* dim */
    --color-text-600: #aaa88c;     /* very dim */

    /* Base Colors */
    --color-white: #fffff0;
    --color-black: #0a1a0a;

    /* Semantic Mapping */
    --color-primary: var(--color-green-500);        /* #0e4629 */
    --color-primary-dark: var(--color-green-700);
    --color-primary-darker: var(--color-green-800);
    --color-primary-light: var(--color-green-400);  /* #d5fba7 — for text on dark bg */
    --color-primary-lighter: var(--color-green-400);

    --color-accent: var(--color-pink-500);          /* #ff78d7 */
    --color-accent-light: var(--color-pink-400);
    --color-accent-dark: var(--color-pink-600);

    --color-text-primary: var(--color-text-100);    /* near-black for main text */
    --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);        /* #fffff0 main background */
    --color-bg-secondary: var(--color-bg-700);      /* #ffffe7 secondary sections */
    --color-bg-surface: var(--color-bg-600);        /* card surfaces */
    --color-bg-elevated: var(--color-bg-500);
    --color-bg-dark: var(--color-bg-900);           /* #0c3d20 dark footer/header */

    --color-border: var(--color-bg-400);            /* #d4d0a8 */
    --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-700) 100%);
    --gradient-surface: linear-gradient(135deg, var(--color-bg-600) 0%, var(--color-bg-500) 100%);
    --gradient-green-subtle: linear-gradient(135deg, rgba(14, 70, 41, 0.06) 0%, rgba(14, 70, 41, 0.02) 100%);

    /* Overlay Colors */
    --overlay-dark: rgba(10, 26, 10, 0.65);
    --overlay-light: rgba(255, 255, 240, 0.1);
    --overlay-green: rgba(14, 70, 41, 0.05);
}

/* ============================================
   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-body-dark     { color: var(--color-white); }
.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(14, 70, 41, 0.2); }

/* ============================================
   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(14, 70, 41, 0.1);
    color: var(--color-green-500);
    display: block;
}

.form-message.error {
    background-color: rgba(255, 120, 215, 0.15);
    color: var(--color-pink-600);
    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-700); }
::-webkit-scrollbar-thumb { background: var(--color-bg-400); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ============================================
   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%;
}