/* ============================================
   AIRELIA - Enhanced Design System CSS
   Adapted from external modern design tokens
   ============================================ */

/* ===========================================
   FONT FACES - Outfit Family
   =========================================== */
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit Variable';
    src: url('./fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ===========================================
   DESIGN TOKENS - Color Palette
   =========================================== */
:root {
    /* Grey Palette (from external design system) */
    --palette-grey-0: #FFFFFF;
    --palette-grey-10: #F8F9FC;
    --palette-grey-15: #F0F1F5;
    --palette-grey-20: #EFF2F7;
    --palette-grey-50: #E6EAF0;
    --palette-grey-100: #E1E6EC;
    --palette-grey-200: #CDD4DC;
    --palette-grey-300: #B2BBC5;
    --palette-grey-400: #B7BFD9;
    --palette-grey-600: #AAB1CC4D;
    --palette-grey-800: #45474D;
    --palette-grey-900: #2F3034;
    --palette-grey-1000: #212226;
    --palette-grey-1100: #18191D;
    --palette-grey-1200: #121317;
    
    /* RGB versions for alpha compositing */
    --palette-grey-0-rgb: 255, 255, 255;
    --palette-grey-50-rgb: 230, 234, 240;
    --palette-grey-400-rgb: 183, 191, 217;
    --palette-grey-600-rgb: 170, 177, 204;
    --palette-grey-1000-rgb: 33, 34, 38;
    --palette-grey-1200-rgb: 18, 19, 23;

    /* Legacy color mappings (for backwards compatibility) */
    --color-cream: rgb(250, 249, 245);
    --color-dark: var(--palette-grey-1200);
    --color-white: var(--palette-grey-0);
    --color-black: var(--palette-grey-1200);
    --color-text-dark: var(--palette-grey-1000);
    --color-text-light: var(--palette-grey-800);
    
    /* ===========================================
       THEME TOKENS - Surfaces
       =========================================== */
    --theme-surface-surface: var(--palette-grey-0);
    --theme-surface-on-surface: var(--palette-grey-1200);
    --theme-surface-on-surface-variant: var(--palette-grey-800);
    --theme-surface-surface-container: var(--palette-grey-10);
    --theme-surface-surface-container-high: var(--palette-grey-20);
    --theme-surface-surface-container-higher: var(--palette-grey-50);
    --theme-surface-surface-container-highest: var(--palette-grey-100);
    --theme-surface-inverse-surface: var(--palette-grey-1200);
    --theme-surface-inverse-on-surface: var(--palette-grey-10);
    --theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
    
    /* Surface Overlays */
    --theme-surface-overlay: rgba(var(--palette-grey-0-rgb), 0.95);
    --theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), 0.12);
    --theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), 0.24);
    --theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), 0.72);
    --theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), 0.95);
    --theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
    
    /* Inverse Surface Overlays */
    --theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), 0.01);
    --theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), 0.24);
    --theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), 0.72);
    --theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), 0.95);
    --theme-inverse-surface: var(--palette-grey-1200);
    
    /* ===========================================
       THEME TOKENS - Outlines & Dividers
       =========================================== */
    --theme-outline: rgba(var(--palette-grey-1000-rgb), 0.12);
    --theme-outline-variant: rgba(var(--palette-grey-1000-rgb), 0.06);
    --theme-inverse-outline: rgba(var(--palette-grey-50-rgb), 0.12);
    --theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), 0.06);
    --divider: var(--theme-outline-variant);
    
    /* Legacy border tokens */
    --border-standard: 1px solid var(--theme-outline);
    --border-white: 1px solid rgba(255, 255, 255, 0.12);
    
    /* ===========================================
       THEME TOKENS - Interactive States
       =========================================== */
    --theme-primary-primary: var(--theme-surface-on-surface);
    --theme-primary-on-primary: var(--theme-surface-surface);
    --theme-tonal-tonal: var(--theme-surface-surface-container);
    --theme-tonal-on-tonal: var(--theme-surface-on-surface);
    --theme-protected-protected: var(--theme-surface-surface-container);
    --theme-protected-on-protected: var(--theme-surface-on-surface);
    
    /* Button States */
    --theme-button-states-primary-enabled: var(--theme-primary-primary);
    --theme-button-states-primary-disabled: var(--palette-grey-10);
    --theme-button-states-primary-hovered: var(--palette-grey-900);
    --theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), 0.12);
    --theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), 0.2);
    --theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), 0.2);
    --theme-secondary-button: rgba(var(--palette-grey-400-rgb), 0.1);
    --theme-button-secondary-hover: var(--palette-grey-15);
    --theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), 0.3);
    --theme-button-states-disabled: var(--palette-grey-100);
    --theme-button-states-on-disabled: #6A6A71;
    --theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), 0.04);
    --theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), 0.06);
    --theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), 0.12);
    
    /* Nav Button States */
    --theme-nav-button: rgba(var(--palette-grey-400-rgb), 0.09);
    --theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), 0.2);
    
    /* Text Link States */
    --theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
    --theme-text-link-states-hovered: var(--palette-grey-1000);
    --theme-text-link-states-focused: var(--palette-grey-1100);
    --theme-text-link-states-pressed: var(--palette-grey-1000);
    --theme-text-link-states-disabled: #6A6A71;
    
    /* ===========================================
       TYPOGRAPHY TOKENS
       =========================================== */
    /* Display / Hero */
    --landing-main-text-size: 131px;
    --landing-main-text-line-height: 110.04px;
    --landing-main-text-letter-spacing: -2.62px;
    
    /* Heading Scale */
    --9xl-size: 148px;
    --9xl-line-height: 145.04px;
    --9xl-letter-spacing: -2.96px;
    
    --8xl-size: 124px;
    --8xl-line-height: 121.52px;
    --8xl-letter-spacing: -2.48px;
    
    --7xl-size: 98px;
    --7xl-line-height: 82.04px;
    --7xl-letter-spacing: -1.8px;
    
    --6xl-size: 72px;
    --6xl-line-height: 72px;
    --6xl-letter-spacing: -1.44px;
    
    --5xl-size: 54px;
    --5xl-line-height: 56.16px;
    --5xl-letter-spacing: -0.95px;
    
    --4xl-size: 42px;
    --4xl-line-height: 43.68px;
    --4xl-letter-spacing: -0.73px;
    
    --3xl-size: 32px;
    --3xl-line-height: 33.92px;
    --3xl-letter-spacing: -0.15px;
    
    --2xl-size: 28px;
    --2xl-line-height: 30.24px;
    --2xl-letter-spacing: -0.1px;
    
    --xl-size: 24px;
    --xl-line-height: 25.92px;
    --xl-letter-spacing: -0.07px;
    
    --lg-size: 22px;
    --lg-line-height: 24.64px;
    --lg-letter-spacing: -0.08px;
    
    --md-size: 20px;
    --md-line-height: 26px;
    --md-letter-spacing: -0.05px;
    
    --base-size: 17.5px;
    --base-line-height: 25.38px;
    --base-letter-spacing: 0.18px;
    
    --sm-size: 14.5px;
    --sm-line-height: 21.02px;
    --sm-letter-spacing: 0.16px;
    
    --xs-size: 10px;
    --xs-line-height: 14.5px;
    --xs-letter-spacing: 0.11px;
    
    /* CTA Typography */
    --cta-size: 17.5px;
    --cta-line-height: 25.38px;
    --cta-letter-spacing: 0.18px;
    
    --cta-sm-size: 14.5px;
    --cta-sm-line-height: 21.02px;
    --cta-sm-letter-spacing: 0.11px;
    
    /* ===========================================
       SPACING TOKENS
       =========================================== */
    --space-none: 0px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 36px;
    --space-2xl: 48px;
    --space-3xl: 60px;
    --space-4xl: 80px;
    --space-5xl: 88px;
    --space-6xl: 120px;
    --space-7xl: 180px;
    
    /* ===========================================
       SHAPE TOKENS
       =========================================== */
    --shape-corner-xs: 4px;
    --shape-corner-sm: 8px;
    --shape-corner-md: 14px;
    --shape-corner-lg: 24px;
    --shape-corner-xl: 36px;
    --shape-corner-2xl: 48px;
    --shape-corner-rounded: 9999px;
    
    /* Legacy border radius */
    --border-radius-small: var(--shape-corner-sm);
    --border-radius-medium: var(--shape-corner-sm);
    
    /* ===========================================
       LAYOUT TOKENS
       =========================================== */
    --breakpoint-max: 1728px;
    --breakpoint-xl: 1728px;
    --breakpoint-lg: 1440px;
    --breakpoint-md: 1024px;
    --breakpoint-sm: 767px;
    --breakpoint-xs: 425px;
    
    --grid-gutter: 64px;
    --grid-columns: 12;
    --page-margin: 72px;
    --nav-height: 52px;
    
    /* ===========================================
       ANIMATION TOKENS
       =========================================== */
    --transition-standard: 0.3s ease;
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --ease-out-back: cubic-bezier(0.34, 1.85, 0.64, 1);
}

/* ===========================================
   RESPONSIVE TOKEN OVERRIDES
   =========================================== */
@media (max-width: 1728px) {
    :root {
        --landing-main-text-size: 105px;
        --landing-main-text-line-height: 92.04px;
        --landing-main-text-letter-spacing: -2px;
        --grid-gutter: 48px;
    }
}

@media (max-width: 1024px) {
    :root {
        --grid-gutter: 28px;
        --grid-columns: 8;
        --page-margin: 40px;
        
        --9xl-size: 38px;
        --9xl-line-height: 40.28px;
        --9xl-letter-spacing: -0.76px;
        
        --8xl-size: 36px;
        --8xl-line-height: 38.16px;
        --8xl-letter-spacing: -0.72px;
        
        --7xl-size: 34px;
        --7xl-line-height: 36.04px;
        --7xl-letter-spacing: -0.68px;
        
        --6xl-size: 32px;
        --6xl-line-height: 33.92px;
        --6xl-letter-spacing: -0.64px;
        
        --5xl-size: 30px;
        --5xl-line-height: 31.8px;
        --5xl-letter-spacing: -0.3px;
        
        --4xl-size: 28px;
        --4xl-line-height: 29.68px;
        --4xl-letter-spacing: -0.28px;
        
        --3xl-size: 26px;
        --3xl-line-height: 28.08px;
        --3xl-letter-spacing: -0.26px;
        
        --2xl-size: 24px;
        --2xl-line-height: 25.92px;
        --2xl-letter-spacing: -0.14px;
        
        --xl-size: 22px;
        --xl-line-height: 24.64px;
        --xl-letter-spacing: -0.13px;
        
        --lg-size: 20px;
        --lg-line-height: 22.8px;
        --lg-letter-spacing: -0.08px;
        
        --md-size: 18px;
        --md-line-height: 23.4px;
        --md-letter-spacing: -0.07px;
    }
    
    .hidden-sm {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :root {
        --landing-main-text-size: 68px;
        --landing-main-text-line-height: 58px;
        --landing-main-text-letter-spacing: -1.35px;
        --grid-gutter: 28px;
        --grid-columns: 4;
        --page-margin: 28px;
    }
    
    .hidden-xs {
        display: none !important;
    }
}

@media (max-width: 425px) {
    :root {
        --grid-columns: 4;
        --shape-corner-xl: 24px;
    }
}

/* ===========================================
   CSS RESET & BASE STYLES
   =========================================== */
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    font-family: Outfit, -apple-system, "SF Pro", "Segoe UI", "Roboto Slab", Ubuntu, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: var(--theme-surface-on-surface);
    background-color: var(--color-cream);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-weight: 450;
    line-height: 1.1;
}

p {
    margin: 0;
}

a {
    color: var(--theme-surface-on-surface-variant);
    text-decoration: none;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

img, picture {
    max-width: 100%;
    display: block;
}

input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

ol, ul {
    list-style: none;
}

main {
    flex: 1;
}

/* ===========================================
   TYPOGRAPHY UTILITY CLASSES
   =========================================== */
.landing-main {
    font-size: var(--landing-main-text-size);
    line-height: var(--landing-main-text-line-height);
    letter-spacing: var(--landing-main-text-letter-spacing);
    font-weight: 400;
}

.heading-1 {
    font-size: var(--7xl-size);
    line-height: var(--7xl-line-height);
    letter-spacing: var(--7xl-letter-spacing);
    font-weight: 400;
}

.heading-2 {
    font-size: var(--6xl-size);
    line-height: var(--6xl-line-height);
    letter-spacing: var(--6xl-letter-spacing);
    font-weight: 400;
}

.heading-3 {
    font-size: var(--5xl-size);
    line-height: var(--5xl-line-height);
    letter-spacing: var(--5xl-letter-spacing);
    font-weight: 400;
}

.heading-4 {
    font-size: var(--4xl-size);
    line-height: var(--4xl-line-height);
    letter-spacing: var(--4xl-letter-spacing);
    font-weight: 400;
}

.heading-5 {
    font-size: var(--3xl-size);
    line-height: var(--3xl-line-height);
    letter-spacing: var(--3xl-letter-spacing);
    font-weight: 400;
}

.heading-6 {
    font-size: var(--2xl-size);
    line-height: var(--2xl-line-height);
    letter-spacing: var(--2xl-letter-spacing);
    font-weight: 400;
}

.body {
    font-size: var(--base-size);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
    font-weight: 370;
}

.body strong {
    font-weight: 600;
}

.body em {
    font-style: italic;
}

.caption {
    font-size: var(--sm-size);
    line-height: var(--sm-line-height);
    letter-spacing: var(--sm-letter-spacing);
    font-weight: 370;
}

.small {
    font-size: var(--xs-size);
    line-height: var(--xs-line-height);
    letter-spacing: var(--xs-letter-spacing);
    font-weight: 370;
}

/* ===========================================
   GRID SYSTEM
   =========================================== */
.grid-container {
    width: 100%;
    max-width: calc(var(--breakpoint-max) + var(--page-margin) * 2);
    margin: 0 auto;
    padding: 0 var(--page-margin);
}

.grid-row {
    display: flex;
    flex-flow: var(--grid-flex-flow, row) wrap;
    margin-left: calc(-1 * var(--grid-gutter) / 2);
    margin-right: calc(-1 * var(--grid-gutter) / 2);
    gap: var(--grid-gap, 0);
}

.grid-col {
    flex: 1 1 auto;
    padding-left: calc(var(--grid-gutter) / 2);
    padding-right: calc(var(--grid-gutter) / 2);
}

/* ===========================================
   NAVBAR
   =========================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
    background-color: var(--color-cream);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.logo {
    height: 49px;
    width: auto;
    object-fit: contain;
    padding-right: 1rem;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    padding-left: 1rem;
}

.nav-links a {
    text-decoration: none;
    font-size: var(--cta-sm-size);
    line-height: var(--cta-sm-line-height);
    letter-spacing: var(--cta-sm-letter-spacing);
    color: var(--theme-surface-on-surface-variant);
    font-weight: 430;
    padding: 8px 16px;
    border-radius: 14px;
    transition: 0.15s all ease-out;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: var(--theme-surface-on-surface);
    background: var(--theme-nav-button-hover);
    outline: none;
}

.nav-links a.active {
    color: var(--theme-surface-on-surface);
    background: var(--theme-nav-button);
}

/* ===========================================
   BUTTONS
   =========================================== */
.contact-btn {
    font-size: var(--base-size);
    line-height: var(--cta-line-height);
    letter-spacing: var(--cta-letter-spacing);
    font-weight: 430;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    padding: 10px 24px;
    transition: 0.15s all ease-out;
    background: var(--theme-primary-primary);
    color: var(--theme-primary-on-primary);
}

.contact-btn:hover,
.contact-btn:focus-visible {
    outline: none;
    background: var(--theme-button-states-primary-hovered);
}

.contact-btn:disabled {
    background: var(--theme-button-states-disabled);
    color: var(--theme-button-states-on-disabled);
    cursor: not-allowed;
}

/* Secondary Button Style */
.btn-secondary {
    color: var(--theme-surface-on-surface);
    background: var(--theme-secondary-button);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--theme-outline-variant);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    outline: none;
    background: var(--theme-button-secondary-hover);
}

/* Card Button */
.card-btn {
    background-color: transparent;
    color: var(--theme-surface-on-surface);
    border: none;
    padding: 0.8rem 1.5rem;
    font-weight: 430;
    font-size: var(--cta-sm-size);
    cursor: pointer;
    transition: 0.15s all ease-out;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    text-align: right;
    margin-left: auto;
}

.card-btn::after {
    content: "→";
    margin-left: var(--space-sm);
    transition: transform 0.3s var(--ease-out-quint);
}

.card-btn:hover::after,
.card-btn:focus::after {
    transform: translateX(4px);
}

.card-btn:hover {
    color: var(--theme-text-link-states-hovered);
}

/* ===========================================
   LANGUAGE SWITCHER
   =========================================== */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 2rem;
    margin-right: 0.5rem;
}

.lang-link {
    text-decoration: none;
    color: var(--theme-surface-on-surface-variant);
    font-weight: 430;
    font-size: var(--xs-size);
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: var(--shape-corner-xs);
    transition: 0.15s all ease-out;
}

.lang-link:hover {
    color: var(--theme-surface-on-surface);
    background: var(--theme-button-states-hovered);
}

.lang-separator {
    color: var(--palette-grey-300);
    font-weight: 300;
}

/* ===========================================
   HERO SECTION
   =========================================== */
.hero {
    position: relative;
    width: 100%;
    padding: 0 0 7rem 0;
    overflow: hidden;
    background-color: var(--color-cream);
}

#hero-animation-canvas {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 0;
    padding-top: 1rem;
}

.dotted-waves {
    position: absolute;
    top: 15%;
    right: -150px;
    transform: translateY(-35%) scaleX(-1);
    max-width: 700px;
    height: auto;
    opacity: 0.03;
    z-index: 0;
    pointer-events: none;
}

.hero-title {
    letter-spacing: var(--5xl-letter-spacing);
    font-size: var(--5xl-size);
    font-weight: 100;
    color: var(--theme-surface-on-surface);
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    text-align: center;
    padding-top: 0;
}

.fluid-gradient {
    background: linear-gradient(135deg, rgb(90, 190, 227) 0%, rgb(63, 104, 240) 50%, rgb(200, 121, 245) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--xl-size);
    color: var(--theme-primary-on-primary);
    font-weight: 100;
    margin-bottom: 1rem;
    background-color: var(--theme-primary-primary);
    padding: 0.2rem 1rem;
    border-radius: var(--shape-corner-sm);
    display: inline-block;
}

.hero-subtitle-inverted {
    color: var(--theme-surface-on-surface) !important;
    background-color: var(--color-cream);
    font-weight: 100;
    padding: 0.2rem 1rem;
    border-radius: var(--shape-corner-sm);
    display: inline-block;
}

/* Hero Landing Content */
.hero-landing-content {
    text-align: left;
    padding-bottom: 0;
    padding-top: 1.1rem;
}

.hero-landing-title {
    font-family: "Outfit", -apple-system, "SF Pro", "Segoe UI", "Roboto Slab", Ubuntu, sans-serif;
    letter-spacing: var(--4xl-letter-spacing);
    font-size: 4rem;
    font-weight: 300;
    color: var(--theme-surface-on-surface);
    line-height: 1;
    margin-bottom: 0.4rem;
    padding-top: 5.7rem;
    text-align: left;
}

.hero-landing-subtitle {
    font-size: var(--2xl-size);
    color: var(--theme-surface-on-surface-variant);
    font-weight: 200;
    margin-bottom: 1rem;
    padding: 0.2rem 0;
    padding-bottom: 2.7rem;
    border-radius: var(--shape-corner-sm);
    display: inline-block;
    text-align: left;
}

.hero-description {
    font-size: var(--base-size);
    line-height: var(--base-line-height);
    font-weight: 370;
    color: var(--theme-surface-on-surface-variant);
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 0;
    text-align: left;
    padding: var(--space-xl) 0;
}

/* ===========================================
   SHOWCASE SECTION (Cards)
   =========================================== */
.showcase {
    padding: 0 2rem;
    background-color: var(--color-cream);
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 0;
}

.showcase-card {
    width: 100%;
    border-radius: var(--shape-corner-xl);
    background: var(--palette-grey-10);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.showcase-card h3 {
    font-size: var(--lg-size);
    line-height: var(--lg-line-height);
    font-weight: 450;
    color: var(--theme-surface-on-surface);
    margin-bottom: var(--space-md);
    text-align: left;
}

.showcase-card p {
    font-size: var(--base-size);
    line-height: var(--base-line-height);
    font-weight: 370;
    color: var(--theme-surface-on-surface-variant);
    margin-bottom: var(--space-lg);
    text-align: left;
    flex-grow: 1;
}

/* Card Label/Tag */
.showcase-card label {
    border: 1px solid var(--divider);
    border-radius: var(--shape-corner-sm);
    background: var(--theme-surface-surface);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin-bottom: var(--space-sm);
    padding: 6px 12px;
    font-size: var(--sm-size);
    font-weight: 400;
}

/* Hero section showcase needs opaque background */
.hero .showcase-grid {
    background-color: var(--color-cream);
}

.hero .showcase-card {
    background: var(--palette-grey-10);
}

/* ===========================================
   PAGE SECTIONS
   =========================================== */
.section {
    min-height: 100vh;
    padding: var(--space-4xl) 0 var(--space-6xl) 0;
    display: flex;
    align-items: center;
}

.section:nth-child(even) {
    background-color: var(--color-cream);
}

.section:nth-child(even) .showcase-card {
    background: var(--palette-grey-10);
}

/* Page Hero */
.page-hero {
    background-color: var(--color-cream);
    padding: var(--space-3xl) 0;
    text-align: center;
}

.page-title {
    font-size: var(--4xl-size);
    line-height: var(--4xl-line-height);
    font-weight: 450;
    color: var(--theme-surface-on-surface);
    margin-bottom: var(--space-md);
}

.page-subtitle {
    font-size: var(--lg-size);
    color: var(--theme-surface-on-surface-variant);
    font-weight: 370;
}

/* ===========================================
   COMPANY CONTENT
   =========================================== */
.company-content {
    background-color: var(--color-cream);
}

.content-container {
    padding: var(--space-3xl) 2rem;
    border-top: 1px solid var(--divider);
    max-width: 800px;
    margin: 0 auto;
}

.company-section {
    margin-bottom: var(--space-xl);
}

.company-section h2 {
    font-size: var(--2xl-size);
    line-height: var(--2xl-line-height);
    font-weight: 450;
    color: var(--theme-surface-on-surface);
    margin-bottom: var(--space-md);
    text-align: center;
}

.company-section p {
    font-size: var(--base-size);
    line-height: var(--base-line-height);
    color: var(--theme-surface-on-surface-variant);
    margin-bottom: var(--space-md);
}

.company-details {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.company-details h3 {
    color: var(--theme-surface-on-surface);
    font-size: var(--xl-size);
    margin: 0;
}

.company-details p {
    margin: 0;
    line-height: var(--base-line-height);
    font-size: var(--base-size);
    font-weight: 370;
    text-align: left;
}

.contact-info {
    background-color: var(--theme-surface-surface-container);
    padding: var(--space-lg);
    border-radius: var(--shape-corner-md);
    border-left: 4px solid var(--theme-surface-on-surface);
}

.contact-info p {
    margin-bottom: var(--space-xs);
}

/* ===========================================
   DARK SECTIONS
   =========================================== */
#cybersecurity-operations,
#ai-solutions {
    background-color: var(--theme-surface-inverse-surface);
    color: var(--theme-surface-inverse-on-surface);
}

#cybersecurity-operations .hero-title,
#cybersecurity-operations .hero-subtitle,
#cybersecurity-operations .hero-description,
#ai-solutions .hero-title,
#ai-solutions .hero-subtitle,
#ai-solutions .hero-description {
    color: var(--theme-surface-inverse-on-surface);
}

#cybersecurity-operations .showcase-card,
#ai-solutions .showcase-card {
    background: rgba(var(--palette-grey-0-rgb), 0.05);
    color: var(--theme-surface-inverse-on-surface);
}

#cybersecurity-operations .showcase-card h3,
#cybersecurity-operations .showcase-card p,
#ai-solutions .showcase-card h3,
#ai-solutions .showcase-card p {
    color: var(--theme-surface-inverse-on-surface) !important;
}

#cybersecurity-operations .showcase-card p,
#ai-solutions .showcase-card p {
    color: var(--theme-surface-inverse-on-surface-variant) !important;
}

/* ===========================================
   NAVBAR DARK MODE
   =========================================== */
.navbar.dark-mode {
    background-color: var(--theme-surface-inverse-surface);
}

.navbar.dark-mode .logo {
    content: url('./images/airelia-logo-inverted.png');
}

.navbar.dark-mode .nav-links a {
    color: var(--theme-surface-inverse-on-surface-variant);
}

.navbar.dark-mode .nav-links a:hover,
.navbar.dark-mode .nav-links a.active {
    color: var(--theme-surface-inverse-on-surface);
    background: rgba(var(--palette-grey-0-rgb), 0.1);
}

.navbar.dark-mode .contact-btn {
    background-color: var(--palette-grey-0);
    color: var(--palette-grey-1200);
}

.navbar.dark-mode .contact-btn:hover {
    background-color: var(--theme-surface-surface-container-high);
}

.navbar.dark-mode .language-switcher a {
    color: var(--theme-surface-inverse-on-surface-variant);
}

.navbar.dark-mode .lang-separator {
    color: var(--palette-grey-800);
}

/* ===========================================
   FOOTER
   =========================================== */
footer {
    background-color: var(--theme-surface-inverse-surface);
    color: var(--theme-surface-inverse-on-surface);
    text-align: left;
    padding: var(--space-2xl);
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* ===========================================
   MOBILE MENU
   =========================================== */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    flex-direction: column;
    cursor: pointer;
    padding: var(--space-sm);
    gap: 0.25rem;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background-color: var(--theme-surface-on-surface);
    transition: all 0.3s var(--ease-out-quint);
}

.mobile-menu-toggle.active .hamburger-line:first-child {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:last-child {
    transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background-color: var(--color-cream);
    border-top: 1px solid var(--divider);
    z-index: 999;
    transform: translateY(-100%);
    transition: transform 0.3s var(--ease-out-quint);
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-nav-links {
    list-style: none;
    padding: var(--space-md) 0;
    margin: 0;
}

.mobile-nav-links li {
    border-bottom: 1px solid var(--divider);
}

.mobile-nav-links li:last-child {
    border-bottom: none;
}

.mobile-nav-links a {
    display: block;
    padding: var(--space-md) var(--space-2xl);
    text-decoration: none;
    color: var(--theme-surface-on-surface);
    font-weight: 430;
    font-size: var(--cta-size);
    transition: background-color 0.15s ease-out;
}

.mobile-nav-links a:hover {
    background-color: var(--theme-button-states-hovered);
}

.contact-icon {
    display: none;
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */
@media (max-width: 1024px) {
    body {
        padding-top: 65px;
    }
    
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .hero-container,
    .content-container {
        padding: 0 var(--page-margin);
    }
    
    .hero-title {
        font-size: var(--4xl-size);
    }
    
    .hero-description {
        font-size: var(--base-size);
    }
    
    .showcase-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-md);
    }
}

@media (max-width: 768px) {
    /* Hide desktop navigation */
    .nav-links,
    .language-switcher {
        display: none;
    }
    
    /* Show mobile menu elements */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .mobile-menu {
        display: block;
    }
    
    /* Contact button mobile styles */
    .contact-text {
        display: none;
    }
    
    .contact-icon {
        display: block;
    }
    
    .contact-btn {
        padding: 0.8rem;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .navbar {
        justify-content: space-between;
        padding: 0.5rem 1rem;
    }
    
    .company-details {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    /* Mobile menu dark mode */
    .navbar.dark-mode .mobile-menu {
        background-color: var(--theme-surface-inverse-surface);
        border-top-color: var(--theme-inverse-outline-variant);
    }
    
    .navbar.dark-mode .mobile-nav-links a {
        color: var(--theme-surface-inverse-on-surface);
    }
    
    .navbar.dark-mode .mobile-nav-links a:hover {
        background-color: rgba(var(--palette-grey-0-rgb), 0.08);
    }
    
    .navbar.dark-mode .mobile-nav-links li {
        border-bottom-color: var(--theme-inverse-outline-variant);
    }
    
    .navbar.dark-mode .hamburger-line {
        background-color: var(--theme-surface-inverse-on-surface);
    }
}

@media (max-width: 600px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin: 0;
    }
    
    .showcase-card {
        border-radius: var(--shape-corner-lg);
    }
    
    .hero-landing-title {
        font-size: 4rem;
        padding-top: 2rem;
    }

    .hero-landing-subtitle {
        font-size: var(--xl-size);
        margin-bottom: var(--space-xl);
    }

    .section {
        padding: var(--space-3xl) 0 var(--space-4xl) 0;
    }
    
    .content-container {
        padding: var(--space-xl) var(--page-margin);
    }
    
    .dotted-waves {
        max-width: 500px;
        right: -100px;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0.5rem;
    }
    
    .hero-container {
        padding: 0 var(--page-margin);
    }
    
    .hero-landing-title {
        font-size: var(--3xl-size);
        line-height: 1.1;
        padding-top: 8.2rem;
    }

    .hero-landing-subtitle {
        font-size: var(--xl-size);
        line-height: 1.1;
        padding-bottom: var(--space-4xl);
    }

    .hero-title {
        font-size: var(--3xl-size);
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-size: var(--xl-size);
        padding: 0.15rem 0.8rem;
        line-height: 1.2;
    }
    
    .hero-description {
        font-size: var(--sm-size);
        line-height: 1.5;
    }
    
    .showcase {
        padding: var(--space-lg) var(--page-margin);
    }
    
    .showcase-card {
        padding: var(--space-md);
    }
    
    .showcase-card h3 {
        font-size: var(--md-size);
        margin-bottom: var(--space-sm);
    }
    
    .showcase-card p {
        font-size: var(--sm-size);
        margin-bottom: var(--space-md);
    }
    
    .card-btn {
        padding: 0.6rem 1rem;
        font-size: var(--sm-size);
    }
    
    .content-container {
        padding: var(--space-lg) var(--page-margin);
    }
    
    .company-section {
        margin-bottom: var(--space-lg);
    }
    
    .company-section h2 {
        font-size: var(--lg-size);
        margin-bottom: var(--space-sm);
    }
    
    .company-section p {
        font-size: var(--sm-size);
        line-height: 1.5;
    }
    
    .contact-info {
        padding: var(--space-md);
        margin: var(--space-md) 0;
    }
    
    footer {
        padding: var(--space-lg) var(--page-margin);
        font-size: var(--sm-size);
    }
    
    .dotted-waves {
        display: none;
    }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */
.no-scroll {
    overflow: hidden;
}

.second-line {
    color: var(--palette-grey-800);
}

.arrow-link,
.arrow-link-left {
    display: inline-flex;
    align-items: center;
    transition: 0.2s opacity;
}

.arrow-link:not(.arrow-link-left)::after {
    content: "→";
    display: inline-flex;
    font-size: 1.25em;
    margin: 0 0 0 var(--space-xs);
    height: inherit;
    opacity: inherit;
    transition: 0.3s transform var(--ease-out-quint);
}

.arrow-link:not(.arrow-link-left):focus::after,
.arrow-link:not(.arrow-link-left):hover::after {
    transform: translateX(50%);
}

.arrow-link-left::before {
    content: "←";
    display: inline-flex;
    font-size: 1.25em;
    margin: 0 var(--space-xs) 0 0;
    height: inherit;
    opacity: inherit;
    transition: 0.3s transform var(--ease-out-quint);
}

.arrow-link-left:focus::before,
.arrow-link-left:hover::before {
    transform: translateX(-50%);
}