/* ============================================
   UNWITA INSIGHTS - ENHANCED GREEN THEME
   Multi-Page Corporate Website
   Theme: Clean Enterprise with Enhanced Green/Mint Accents
   ============================================ */

/* ============================================
   PAGE LOADER
   ============================================ */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #F4FBF8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #C0EBE7;
    border-top-color: #08B8AB;
    border-radius: 50%;
    animation: loaderSpin 0.7s linear infinite;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* CSS Variables - Light Theme (Default) */
/* Color Palette: #4EBE9A (mint green), #08B8AB (teal) - Logo Gradient */
:root {
    /* Primary Colors - New Color Palette */
    --primary-mint: #4EBE9A;
    --primary-teal: #08B8AB;
    --primary-forest: #068F84;
    --primary-green: #08B8AB;
    --primary-sage: #F5FAFA;
    --primary-light-green: #4EBE9A;

    /* Enhanced Gradient Definitions */
    --brand-gradient: linear-gradient(135deg, #4EBE9A 0%, #08B8AB 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(78, 190, 154, 0.2) 0%, rgba(8, 184, 171, 0.2) 100%);
    --brand-gradient-subtle: linear-gradient(135deg, rgba(78, 190, 154, 0.1) 0%, rgba(8, 184, 171, 0.1) 100%);

    /* Corner Gradient Accents */
    --gradient-tl: linear-gradient(135deg, rgba(78, 190, 154, 0.15) 0%, transparent 50%);
    --gradient-tr: linear-gradient(225deg, rgba(8, 184, 171, 0.12) 0%, transparent 50%);
    --gradient-bl: linear-gradient(45deg, rgba(8, 184, 171, 0.1) 0%, transparent 50%);
    --gradient-br: linear-gradient(315deg, rgba(8, 184, 171, 0.1) 0%, transparent 50%);

    /* Radial Gradients */
    --brand-gradient-radial: radial-gradient(ellipse at 20% 20%, rgba(8, 184, 171, 0.12) 0%, transparent 50%);
    --brand-gradient-radial-alt: radial-gradient(ellipse at 80% 80%, rgba(8, 184, 171, 0.1) 0%, transparent 50%);
    --brand-gradient-radial-spot: radial-gradient(circle at 50% 50%, rgba(8, 184, 171, 0.06) 0%, transparent 70%);
    --brand-gradient-radial-teal: radial-gradient(ellipse at 30% 70%, rgba(8, 184, 171, 0.08) 0%, transparent 50%);

    /* Ambient Glow Effects */
    --glow-mint: radial-gradient(ellipse at center, rgba(8, 184, 171, 0.15) 0%, transparent 70%);
    --glow-soft: radial-gradient(ellipse at top left, rgba(8, 184, 171, 0.1) 0%, transparent 60%);
    --glow-forest: radial-gradient(circle at 70% 30%, rgba(8, 184, 171, 0.12) 0%, transparent 50%);

    /* Background Colors - Clean with Subtle Teal Tint */
    --bg-white: #F5FAFA;
    --bg-off-white: #F4FBF8;
    --bg-light: #EDF5F4;
    --bg-mint-tint: #E5F0EF;
    --bg-card: white;
    --bg-dark-accent: #067A71;

    /* Enhanced Background with Subtle Green Tint */
    --bg-primary-tint: rgba(8, 184, 171, 0.04);
    --bg-secondary-tint: rgba(8, 184, 171, 0.03);
    --bg-tertiary-tint: rgba(8, 184, 171, 0.06);

    /* Background Patterns */
    --bg-pattern-subtle: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2308B8AB' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --bg-pattern-dots: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2308B8AB' fill-opacity='0.06'%3E%3Ccircle cx='10' cy='10' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    --bg-pattern-leaves: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 C40 10 45 25 40 40 C40 40 25 35 20 40 C20 40 30 30 40 30 C50 30 60 35 60 40 C60 40 55 25 40 10 Z' fill='%2308B8AB' fill-opacity='0.05'/%3E%3C/svg%3E");
    --bg-pattern-waves: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 0 50 10 T 100 10 L 100 20 L 0 20 Z' fill='%2308B8AB' fill-opacity='0.03'/%3E%3C/svg%3E");

    /* Text Colors */
    --text-primary: #1A2964;
    --text-secondary: #2E3F7A;
    --text-muted: #4A5A8A;
    --text-light: #7A88A8;
    --text-inverse: #F5FAFA;

    /* Border Colors */
    --border-light: #C0EBE7;
    --border-medium: #A0DED8;
    --border-highlight: rgba(8, 184, 171, 0.3);

    /* Shadow Colors */
    --shadow-sm: 0 1px 3px rgba(8, 184, 171, 0.1);
    --shadow-md: 0 4px 12px rgba(8, 184, 171, 0.12);
    --shadow-lg: 0 12px 24px rgba(8, 184, 171, 0.15);
    --shadow-xl: 0 24px 48px rgba(8, 184, 171, 0.18);
    --shadow-2xl: 0 32px 64px rgba(8, 184, 171, 0.2);
    --shadow-mint: 0 6px 20px rgba(78, 190, 154, 0.25);
    --shadow-mint-hover: 0 12px 32px rgba(78, 190, 154, 0.35);
    --shadow-inner: inset 0 2px 4px rgba(8, 184, 171, 0.05);

    /* Spacing - Consistent Layout */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 450ms ease;

    /* Container */
    --container-max: 100%;
    --header-height: 72px;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    /* Primary Colors - New Palette for Dark Mode */
    --primary-mint: #A6DECC;
    --primary-teal: #4EBE9A;
    --primary-forest: #068F84;
    --primary-green: #4EBE9A;
    --primary-sage: #F5FAFA;
    --primary-light-green: #A6DECC;

    /* Enhanced Gradient Definitions */
    --brand-gradient: linear-gradient(135deg, #A6DECC 0%, #4EBE9A 50%, #08B8AB 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(166, 222, 204, 0.15) 0%, rgba(78, 190, 154, 0.15) 100%);
    --brand-gradient-subtle: linear-gradient(135deg, rgba(166, 222, 204, 0.08) 0%, rgba(78, 190, 154, 0.08) 100%);

    /* Corner Gradient Accents - Dark Mode */
    --gradient-tl: linear-gradient(135deg, rgba(166, 222, 204, 0.1) 0%, transparent 50%);
    --gradient-tr: linear-gradient(225deg, rgba(78, 190, 154, 0.08) 0%, transparent 50%);
    --gradient-bl: linear-gradient(45deg, rgba(8, 184, 171, 0.06) 0%, transparent 50%);
    --gradient-br: linear-gradient(315deg, rgba(78, 190, 154, 0.06) 0%, transparent 50%);

    /* Radial Gradients - Dark Mode Enhanced */
    --brand-gradient-radial: radial-gradient(ellipse at 20% 20%, rgba(166, 222, 204, 0.1) 0%, transparent 50%);
    --brand-gradient-radial-alt: radial-gradient(ellipse at 80% 80%, rgba(78, 190, 154, 0.08) 0%, transparent 50%);
    --brand-gradient-radial-spot: radial-gradient(circle at 50% 50%, rgba(166, 222, 204, 0.05) 0%, transparent 70%);
    --brand-gradient-radial-teal: radial-gradient(ellipse at 30% 70%, rgba(78, 190, 154, 0.08) 0%, transparent 50%);

    /* Ambient Glow Effects - Dark Mode */
    --glow-mint: radial-gradient(ellipse at center, rgba(166, 222, 204, 0.15) 0%, transparent 70%);
    --glow-soft: radial-gradient(ellipse at top left, rgba(240, 239, 231, 0.1) 0%, transparent 60%);
    --glow-forest: radial-gradient(circle at 70% 30%, rgba(8, 184, 171, 0.1) 0%, transparent 50%);

    /* Background Colors - Dark Theme */
    --bg-white: #1a2523;
    --bg-off-white: #202d2a;
    --bg-light: #283a36;
    --bg-mint-tint: #253530;
    --bg-card: #202d2a;
    --bg-dark-accent: #151d1b;

    /* Enhanced Background with Subtle Tint - Dark */
    --bg-primary-tint: rgba(78, 190, 154, 0.03);
    --bg-secondary-tint: rgba(8, 184, 171, 0.02);
    --bg-tertiary-tint: rgba(78, 190, 154, 0.05);

    /* Background Patterns - Subtle for Dark */
    --bg-pattern-subtle: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234EBE9A' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --bg-pattern-dots: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234EBE9A' fill-opacity='0.03'%3E%3Ccircle cx='10' cy='10' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    --bg-pattern-leaves: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 C40 10 45 25 40 40 C40 40 25 35 20 40 C20 40 30 30 40 30 C50 30 60 35 60 40 C60 40 55 25 40 10 Z' fill='%234EBE9A' fill-opacity='0.03'/%3E%3C/svg%3E");
    --bg-pattern-waves: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 0 50 10 T 100 10 L 100 20 L 0 20 Z' fill='%234EBE9A' fill-opacity='0.02'/%3E%3C/svg%3E");

    /* Text Colors */
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-light: #64748B;
    --text-inverse: #F5FAFA;

    /* Border Colors */
    --border-light: #354a45;
    --border-medium: #455a55;
    --border-dark: #556a65;
    --border-highlight: rgba(78, 190, 154, 0.3);

    /* Shadow Colors - Enhanced for dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.7);
    --shadow-mint: 0 6px 20px rgba(78, 190, 154, 0.25);
    --shadow-mint-hover: 0 12px 32px rgba(78, 190, 154, 0.4);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--bg-off-white);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--transition-slow), color var(--transition-slow);
    position: relative;
    overflow-x: hidden;
}

[data-theme="dark"] body {
    background: linear-gradient(135deg, #1a2523 0%, #151d1b 100%) fixed;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    transition: color var(--transition-base);
}

h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
}

p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    transition: color var(--transition-base);
}

a {
    color: var(--primary-teal);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-mint);
}

/* Enhanced Link Styles - Disabled to prevent unwanted underlines */
/* Underline hover effect removed to avoid visual artifacts on cards/icons */

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 10rem);
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(244, 251, 248, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    transition: all var(--transition-base);
}

[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Subtle gradient line at bottom of navbar */
.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-mint) 50%, transparent 100%);
}

/* Enhanced navbar scroll effect */
.navbar.scrolled {
    background: rgba(244, 251, 248, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .navbar.scrolled {
    background: rgba(15, 23, 42, 0.95);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 10rem);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.logo-icon {
    height: 42px;
    width: auto;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base);
}

.logo:hover .logo-icon {
    transform: scale(1.05);
}

.logo-text {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
    margin-left: auto;
}

.nav-link {
    position: relative;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    padding: var(--spacing-xs) 0;
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-forest);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-mint);
    transition: width 0.3s ease, background-color 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


/* Theme Toggle Button */
.theme-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-left: var(--spacing-md);
}

.theme-toggle:hover {
    background: var(--brand-gradient-subtle);
    border-color: var(--primary-mint);
    transform: translateY(-2px);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.theme-toggle:hover svg {
    color: var(--primary-mint);
}

.theme-toggle .sun-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-toggle span {
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

/* ============================================
   BUTTONS - ENHANCED GREEN THEME
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.btn:active {
    opacity: 0.9;
}

.btn-primary {
    background: var(--brand-gradient);
    color: #F5FAFA;
}

.btn-primary:hover {
    background: var(--primary-forest);
    color: #F5FAFA;
    box-shadow: 0 0 20px rgba(8, 184, 171, 0.4), 0 6px 20px rgba(8, 184, 171, 0.25);
}

.btn-secondary {
    background: var(--brand-gradient-soft);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
}

.btn-secondary:hover {
    border-color: var(--primary-mint);
    color: var(--primary-teal);
    box-shadow: 0 0 0 3px rgba(8, 184, 171, 0.15), 0 4px 12px rgba(8, 184, 171, 0.12);
    background: var(--brand-gradient-subtle);
}

.btn svg {
    width: 18px;
    height: 18px;
    transition: opacity 0.2s ease;
}

.btn:hover svg {
    opacity: 0.85;
}

/* ============================================
   SECTIONS - WITH GREEN DESIGN ELEMENTS
   ============================================ */
.section {
    padding: var(--spacing-3xl) 0;
    background: transparent;
    position: relative;
}

.section>* {
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--spacing-2xl);
}

.section-label {
    display: inline-block;
    padding: 0.375rem 0.876rem;
    background: var(--brand-gradient-subtle);
    color: var(--primary-teal);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(78, 190, 154, 0.15);
    transition: all var(--transition-base);
}

.section-label:hover {
    background: var(--brand-gradient);
    color: #F5FAFA;
    transform: translateY(-2px);
    box-shadow: var(--shadow-mint);
}

.section-title {
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
}

/* Section divider */
.section:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(240, 239, 231, 0.3) 50%, transparent 100%);
}

/* ============================================
   CARDS - ENHANCED WITH GREEN ELEMENTS
   ============================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle gradient overlay on cards */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient-subtle);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Corner accent on cards */
.card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, transparent 50%, rgba(78, 190, 154, 0.05) 50%);
    border-radius: 0 var(--radius-lg) 0 0;
    pointer-events: none;
}

.card:hover {
    box-shadow: 0 12px 40px rgba(8, 184, 171, 0.18), 0 4px 12px rgba(8, 184, 171, 0.1);
    border-color: var(--border-highlight);
}

.card:hover::before {
    opacity: 0;
}

.card-icon {
    width: 52px;
    height: 52px;
    background: rgba(78, 190, 154, 0.1);
    border: 1px solid rgba(78, 190, 154, 0.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.card:hover .card-icon {
    background: var(--brand-gradient);
    box-shadow: 0 4px 16px rgba(8, 184, 171, 0.35);
    border-color: transparent;
}

.card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary-teal);
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.card:hover .card-icon svg {
    color: #F5FAFA;
}

.card-title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-xs);
}

.card-description {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   PRODUCT CARDS - ENHANCED GREEN THEME
   ============================================ */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

/* Gradient overlay for product cards */
.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient-subtle);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

/* Top gradient accent bar */
.product-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.product-card:active {
    transform: scale(0.98) translateY(-4px);
    border-color: var(--primary-mint);
    box-shadow: 0 0 0 1px var(--primary-mint), var(--shadow-md);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.product-card:hover::before {
    opacity: 0;
}

.product-card:hover::after {
    transform: scaleX(1);
}

.product-card-icon {
    width: 60px;
    height: 60px;
    background: rgba(78, 190, 154, 0.1);
    border: 1px solid rgba(78, 190, 154, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
}

.product-card:hover .product-card-icon {
    transform: translateY(-3px);
    background: var(--brand-gradient);
    box-shadow: var(--shadow-mint);
}

.product-card-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-teal);
    transition: color var(--transition-base);
}

.product-card:hover .product-card-icon svg {
    color: #F5FAFA;
}

.product-card-title {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.product-card-description {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
}

.product-card-features {
    list-style: none;
    margin-bottom: var(--spacing-lg);
}

.product-card-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.product-card-features li svg {
    width: 16px;
    height: 16px;
    color: var(--primary-mint);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.product-card-features li:hover svg {
    transform: scale(1.2);
}

.product-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary-teal);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--transition-base);
}

.product-card-link:hover {
    gap: 0.75rem;
    color: var(--primary-mint);
}

.product-card-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.product-card-link:hover svg {
    transform: translateX(4px);
}

/* ============================================
   FEATURES GRID - ENHANCED DEPTH
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.feature-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.feature-icon {
    width: 52px;
    height: 52px;
    background: rgba(78, 190, 154, 0.08);
    border: 1px solid rgba(78, 190, 154, 0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item:hover .feature-icon {
    background: var(--brand-gradient);
    box-shadow: var(--shadow-mint);
    border-color: transparent;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    color: var(--primary-teal);
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item:hover .feature-icon svg {
    color: #F5FAFA;
}

.feature-content h4 {
    font-size: 1rem;
    margin-bottom: 0.375rem;
}

.feature-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   WHY US CARDS - ENHANCED GREEN ELEMENTS
   ============================================ */
/* Grid layout (used on about page) */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.why-us-grid .why-us-card {
    width: auto;
    min-width: 0;
    flex: none;
}

/* Carousel wrapper */
.why-us-carousel {
    position: relative;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.why-us-viewport {
    overflow: hidden;
    clip-path: inset(0);
}

.why-us-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-us-page {
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    flex-shrink: 0;
    overflow: hidden;
    padding: 12px 0;
}

.why-us-page--centered {
    grid-template-columns: repeat(2, 1fr);
    max-width: 80%;
    margin: 0 auto;
    padding: 0 10%;
}

.why-us-card {
    text-align: center;
    padding: clamp(1rem, 2vw, 2rem);
    background: #F5FAFA;
    border: 1.5px solid rgba(8, 184, 171, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 18px rgba(8, 184, 171, 0.2), 0 10px 36px rgba(26, 41, 100, 0.1);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    min-width: 0;
}


/* Carousel controls */
.why-us-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.why-us-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.why-us-btn:hover {
    background: rgba(78, 190, 154, 0.1);
}

.why-us-btn svg {
    width: 22px;
    height: 22px;
    color: var(--primary-teal);
    transition: color var(--transition-base);
}

.why-us-btn:hover svg {
    color: var(--primary-mint);
}

.why-us-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.why-us-btn:disabled:hover {
    background: transparent;
}

.why-us-dots {
    display: flex;
    gap: 10px;
    align-items: center;
}

.why-us-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-light);
    cursor: pointer;
    transition: all var(--transition-base);
}

.why-us-dot.active {
    background: var(--primary-teal);
}

/* Gradient background overlay */
.why-us-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient-subtle);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

/* Top accent bar */
.why-us-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--brand-gradient);
    border-radius: 0 0 3px 3px;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.why-us-card:hover {
    box-shadow: var(--shadow-2xl);
    border-color: var(--border-highlight);
}

.why-us-card:active {
    transform: scale(0.98) translateY(-5px);
    border-color: var(--primary-mint);
    box-shadow: 0 0 0 1px var(--primary-mint), var(--shadow-md);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.why-us-card:hover::before {
    opacity: 0;
}

.why-us-card:hover::after {
    opacity: 1;
}

.why-us-icon {
    width: clamp(52px, 5vw, 68px);
    height: clamp(52px, 5vw, 68px);
    background: rgba(78, 190, 154, 0.08);
    border: 1px solid rgba(78, 190, 154, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1), border-color 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.why-us-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.why-us-card:hover .why-us-icon::after {
    opacity: 1;
}

.why-us-card:hover .why-us-icon {
    box-shadow: var(--shadow-mint);
    border-color: transparent;
}

.why-us-icon svg {
    width: 32px;
    height: 32px;
    color: var(--primary-teal);
    transition: color 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.why-us-card:hover .why-us-icon svg {
    color: #F5FAFA;
}

.why-us-title {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-sm);
}

.why-us-description {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.why-us-list {
    color: var(--text-muted);
    font-size: clamp(0.8rem, 1.2vw, 0.9rem);
    list-style: none;
    display: inline-block;
    text-align: left;
    padding-left: 0;
    margin: 0;
    word-break: break-word;
}

.why-us-list li {
    padding: 0.35rem 0;
    color: var(--text-muted);
}

.why-us-list li::marker {
    color: var(--primary-teal);
}

/* Why Us — scroll entrance animations */
.why-us-card.card-hidden {
    visibility: hidden;
}

.why-us-card.slide-from-left {
    animation: cardFromLeft 0.7s ease both;
}

.why-us-card.slide-from-right {
    animation: cardFromRight 0.7s ease both;
}

.why-us-card.slide-from-bottom {
    animation: cardFromBottom 0.7s ease both;
}

@keyframes cardFromLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardFromRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   CTA BANNER - SHARED
   ============================================ */
.cta-banner {
    background: linear-gradient(135deg, #4EBE9A 0%, #08B8AB 50%, #068F84 100%);
    background-size: 200% 200%;
    animation: ctaGradientShift 8s ease infinite;
    padding: var(--spacing-3xl);
    text-align: center;
    color: #F5FAFA;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(8, 184, 171, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cta-orb--1 {
    width: 250px;
    height: 250px;
    top: -80px;
    right: -60px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    animation: ctaFloat 7s ease-in-out infinite;
}

.cta-orb--2 {
    width: 180px;
    height: 180px;
    bottom: -50px;
    left: 5%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: ctaFloat 9s ease-in-out 2s infinite reverse;
}

.cta-orb--3 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 55%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    animation: ctaFloat 6s ease-in-out 1s infinite;
}

.cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    animation: ctaPulseGlow 4s ease-in-out infinite;
    pointer-events: none;
}

.cta-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: ctaShimmer 5s ease-in-out infinite;
    pointer-events: none;
    transform: skewX(-15deg);
}

.cta-heading {
    color: #F5FAFA;
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 2.25rem;
    position: relative;
    z-index: 1;
}

.cta-text {
    color: #F5FAFA;
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cta-btn-primary {
    background: #F5FAFA;
    color: #08B8AB;
    font-weight: 600;
    padding: 0.875rem 2rem;
    transition: all var(--transition-base);
}

.cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cta-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid #F5FAFA;
    color: #F5FAFA;
    font-weight: 600;
    padding: 0.875rem 2rem;
    transition: all var(--transition-base);
}

.cta-btn-secondary:hover {
    background: #068F84;
    color: #F5FAFA;
    border-color: #068F84;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

@keyframes ctaShimmer {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 150%;
    }
}

@keyframes ctaGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes ctaFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
    }
}

@keyframes ctaPulseGlow {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* ============================================
   FOOTER - ENHANCED WITH GREEN DESIGN
   ============================================ */
/* Footer */
.footer {
    background: linear-gradient(135deg, rgba(78, 190, 154, 0.18) 0%, #0f1f3c 40%, #0f1f3c 60%, rgba(8, 184, 171, 0.18) 100%), #0f1f3c;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #2dc0a0, #1a73e8);
}

.footer-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 10rem);
}

.footer-main {
    padding: 60px 0 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
    align-items: start;
}

/* Brand */
.brand-name {
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    margin-top: -4px;
    margin-bottom: 16px;
    line-height: 1;
}

.brand-name span {
    color: #2dc0a0;
}

.brand-desc {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
}

/* Social Icons */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    text-decoration: none;
    margin-right: 8px;
    transition: all 0.2s;
}

.social-icon:hover {
    background: #2dc0a0;
    border-color: #2dc0a0;
    color: #fff;
}

/* Column Headings */
.footer h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Links */
.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer ul li {
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.footer ul li a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.footer ul li a:hover {
    color: #2dc0a0;
}

/* Contact Info */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* Newsletter */
.newsletter-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.footer-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--primary-teal);
    color: #F5FAFA;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    margin-top: 4px;
}

.footer-cta-btn:hover {
    background: var(--primary-forest);
    transform: translateY(-1px);
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom a:hover {
    color: #2dc0a0;
}

/* Footer responsive */
@media (max-width: 900px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-container {
        padding: 0 24px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
}

/* ============================================
   HERO HEADER - FULL WIDTH NO CARD - Enhanced Gradients
   ============================================ */
.hero-header {
    padding: calc(var(--header-height) + var(--spacing-2xl)) 0 var(--spacing-xl);
    background: transparent;
    position: relative;
    overflow: visible;
}

.hero-content-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 3vw, 4rem);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-text {
    position: relative;
}

/* ============================================
   NEURAL DATA WEB + FOCUS & SHIFT
   ============================================ */

/* Neural web canvas */
.hero-neural-web {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-neural-web.active {
    opacity: 1;
}

/* Image — alive pulse */
.hero-graphic--dormant .hero-network-img {
    filter: drop-shadow(0 4px 8px rgba(8, 184, 171, 0.15));
    animation: imgPulse 2.5s ease-in-out infinite;
}

@keyframes imgPulse {

    0%,
    100% {
        filter: drop-shadow(0 4px 8px rgba(8, 184, 171, 0.15)) brightness(1);
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 8px 24px rgba(78, 190, 154, 0.45)) brightness(1.06);
        transform: scale(1.015);
    }
}

/* Closing text hidden until reveal */
.hero-closing--hidden {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-closing--hidden.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* CTA hidden until light sweep */
.hero-cta--hidden {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
}

.hero-cta--hidden.revealed {
    opacity: 1;
    transform: translateY(0);
}

.hero-cta--hidden.revealed .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245, 250, 250, 0.35), transparent);
    animation: ctaSweep 0.8s ease 0.3s forwards;
    border-radius: inherit;
    pointer-events: none;
}

@keyframes ctaSweep {
    0% {
        left: -60%;
    }

    100% {
        left: 110%;
    }
}

.hero-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
    color: var(--text-primary);
}

.hero-title .highlight {
    color: var(--primary-teal);
    background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-mint) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hero slide-in animations */
.hero-slide-left {
    opacity: 0;
    transform: translateX(-60px);
    animation: slideFromLeft 0.8s ease forwards;
}

.hero-slide-right {
    opacity: 0;
    transform: translateX(60px);
    animation: slideFromRight 0.8s ease 0.15s forwards;
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-graphic {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1;
    background: transparent;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all var(--transition-base);
}

.hero-graphic:hover {
    transform: scale(1.02);
}

.hero-graphic img {
    max-width: 100%;
    height: auto;
    transition: transform var(--transition-slow);
}

.hero-graphic:hover img {
    transform: scale(1.05);
}

/* ============================================
   PAGE HEADERS (For Other Pages) - ENHANCED
   ============================================ */
.page-header {
    padding: calc(var(--header-height) + var(--spacing-2xl)) 0 var(--spacing-xl);
    background: transparent;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header .section-label {
    display: inline-block;
    padding: 0.375rem 0.876rem;
    background: var(--brand-gradient-subtle);
    color: var(--primary-teal);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(78, 190, 154, 0.15);
}

.page-header-title {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.page-header-description {
    max-width: 560px;
    margin: 0 auto;
    font-size: 1.0625rem;
    color: var(--text-secondary);
}

.page-header-stat {
    text-align: left;
}

.page-header-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.375rem;
    transition: color var(--transition-base);
}

.page-header-stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============================================
   ABOUT PAGE STYLES - ENHANCED DEPTH
   ============================================ */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: stretch;
}

.about-visual {
    position: relative;
    min-height: 250px;
}

.about-text h2 {
    margin-bottom: var(--spacing-lg);
}

.about-text p {
    margin-bottom: var(--spacing-md);
}

.about-quote {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--brand-gradient-subtle);
    border-left: 3px solid var(--primary-mint);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.about-quote:hover {
    border-left-color: var(--primary-teal);
    box-shadow: var(--shadow-md);
}

.about-main-visual {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.about-main-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient-subtle);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.about-main-visual:hover::before {
    opacity: 1;
}

.about-main-visual:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--border-highlight);
}

.about-main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 1;
    transition: transform var(--transition-slow);
}

.about-main-visual:hover img {
    transform: scale(1.05);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Scroll Reveal Animations */
.reveal-left,
.reveal-right,
.reveal-bottom {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left {
    transform: translateX(-80px);
}

.reveal-right {
    transform: translateX(80px);
}

.reveal-bottom {
    transform: translateY(60px);
}

.reveal-left.active,
.reveal-right.active,
.reveal-bottom.active {
    opacity: 1;
    transform: translate(0);
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Staggered Animation Delays */
.animation-delay-100 {
    animation-delay: 0.1s;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

/* ============================================
   SCROLL TO TOP - ENHANCED
   ============================================ */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 0.5rem;
    width: 40px;
    height: 40px;
    background: var(--brand-gradient);
    color: #F5FAFA;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: 999;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: var(--primary-forest);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.scroll-to-top svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--spacing-xs);
}

.mb-2 {
    margin-bottom: var(--spacing-sm);
}

.mb-3 {
    margin-bottom: var(--spacing-md);
}

.mb-4 {
    margin-bottom: var(--spacing-lg);
}

.mb-5 {
    margin-bottom: var(--spacing-xl);
}

.mb-6 {
    margin-bottom: var(--spacing-2xl);
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--spacing-xs);
}

.mt-2 {
    margin-top: var(--spacing-sm);
}

.mt-3 {
    margin-top: var(--spacing-md);
}

.mt-4 {
    margin-top: var(--spacing-lg);
}

.mt-5 {
    margin-top: var(--spacing-xl);
}

.mt-6 {
    margin-top: var(--spacing-2xl);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

/* Policy Pages - Page Header */
.policy-page #pageHeader {
    background-image: url('../assets/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 40px rgba(8, 184, 171, 0.3);
    position: relative;
    padding: calc(var(--header-height) + var(--spacing-3xl)) 0 var(--spacing-3xl);
}

.policy-page #pageHeader .page-header-title {
    color: #F5FAFA;
}

.policy-page #pageHeader .page-header-description {
    color: rgba(245, 250, 250, 0.9);
}

/* Policy Pages - Content */
.policy-content {
    color: var(--text-secondary);
    line-height: 1.8;
}

.policy-content h2 {
    font-size: 1.35rem;
    color: var(--text-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}

.policy-content p {
    margin-bottom: var(--spacing-md);
}

.policy-content ul {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.policy-content ul li {
    margin-bottom: var(--spacing-xs);
}

.policy-content a {
    color: var(--primary-teal);
}

/* ============================================
   SHARED RESPONSIVE DESIGN
   Single source of truth for all pages
   ============================================ */
@media (max-width: 1023px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .about-visual {
        order: -1;
    }
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .contact-info {
        max-width: 100%;
        text-align: center;
    }

    .contact-details {
        align-items: center;
    }

    .contact-item {
        max-width: 400px;
        width: 100%;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-2xl);
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-graphic {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --spacing-3xl: 3rem;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-white);
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-xs);
        border-bottom: 1px solid var(--border-light);
        box-shadow: var(--shadow-md);
    }

    [data-theme="dark"] .nav-links {
        background: var(--bg-off-white);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links .nav-link {
        padding: var(--spacing-sm);
    }


    .theme-toggle {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .mobile-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

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

    .mobile-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .page-header {
        padding: calc(var(--header-height) + var(--spacing-lg)) 0 var(--spacing-lg);
        text-align: center;
    }

    .page-header-title {
        font-size: 1.75rem;
    }

    .page-header-description {
        font-size: 1rem;
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-banner {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }

    .cta-heading {
        font-size: 1.75rem;
    }

    .cta-text {
        font-size: 1rem;
    }

    .hero-content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-2xl);
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-visual {
        order: -1;
    }

    .hero-graphic {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    .product-card {
        padding: var(--spacing-md);
    }

    .contact-form-wrapper {
        padding: var(--spacing-lg);
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    .cta-heading {
        font-size: 1.5rem;
    }
}