/* ================================================
   MAPLE CODE STUDIOS - Premium Professional Stylesheet
   Clean, Modern, Privacy-First Design
   ================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Serif+Display&display=swap');

/* ================================================
   CSS Variables - Maple Leaf Inspired Theme
   Colors derived from the maple leaf logo gradient
   ================================================ */
:root {
    /* Background Colors - Warm Cream Tones */
    --color-bg: #F8FBFF;
    --color-bg-secondary: #F3F6FB;
    --color-bg-tertiary: #EDF2F7;
    --color-bg-card: #FFFFFF;
    --color-bg-elevated: #FFFFFF;
    --color-bg-dark: #0F172A;

    /* Text Colors - Crisp Slate */
    --color-text: #1F2A3D;
    --color-text-secondary: #2F3E56;
    --color-text-muted: #4B5563;
    --color-text-light: #6B7280;
    --color-text-inverse: #F8FBFF;

    /* Brand Colors - Maple Leaf Gradient */
    --color-primary: #2563EB;
    --color-primary-light: #3B82F6;
    --color-primary-dark: #1D4ED8;
    --color-primary-deep: #0B3AAA;
    --color-primary-50: #EFF6FF;
    --color-primary-100: #DBEAFE;

    /* Secondary - Amber accent (maple nod) */
    --color-secondary: #F59E0B;
    --color-secondary-light: #FDBA74;
    --color-secondary-dark: #C2410C;

    /* Accent */
    --color-accent: #0EA5E9;
    --color-accent-light: #38BDF8;

    /* Status Colors */
    --color-success: #5B7A4A;
    --color-warning: #E8A33C;
    --color-error: #C45A3B;

    /* Gradients - Matching Maple Leaf */
    --gradient-primary: linear-gradient(135deg, #2563EB 0%, #0EA5E9 50%, #38BDF8 100%);
    --gradient-primary-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(14, 165, 233, 0.14));
    --gradient-secondary: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --gradient-hero: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 50%, #F3F6FB 100%);
    --gradient-section: linear-gradient(180deg, #F3F6FB 0%, #FFFFFF 100%);
    --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --gradient-card-hover: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(14, 165, 233, 0.06) 100%);

    /* Sparkle/Orbital Ring Colors (from logo) */
    --color-sparkle: #E8A33C;
    --color-sparkle-dim: rgba(212, 121, 58, 0.6);
    --color-orbital: rgba(196, 90, 59, 0.4);

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Shadows - Warm tones */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
    --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.16);
    --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.18);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.06);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Container */
    --container-max: 1200px;
    --container-sm: 720px;
    --container-lg: 1400px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

/* Prevent horizontal scrolling on all elements */
* {
    max-width: 100%;
}

::selection {
    background: var(--color-primary);
    color: white;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

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

/* ================================================
   Typography
   ================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-green {
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

.lead {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* ================================================
   Layout
   ================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
    box-sizing: border-box;
}

.container-sm {
    max-width: var(--container-sm);
}

.container-lg {
    max-width: var(--container-lg);
}

.section {
    padding: var(--space-3xl) 0;
    position: relative;
    width: 100%;
    overflow: hidden;
}

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

.section-lg {
    padding: var(--space-4xl) 0;
}

/* ================================================
   Announcement Bar
   ================================================ */
.announcement-bar {
    background: var(--gradient-secondary);
    padding: 10px 20px;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    overflow: hidden;
}

.announcement-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.1), transparent);
    animation: shimmer 4s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
}

.announcement-bar span {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .announcement-bar {
        padding: 8px 12px;
    }

    .announcement-bar span {
        font-size: 0.8rem;
        gap: 6px;
    }
}

.announcement-bar .heart {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ================================================
   Header & Navigation
   ================================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(241, 247, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
    transition: all var(--transition-base);
}

.header.has-announcement {
    top: 42px;
}

.header.scrolled {
    background: rgba(241, 247, 255, 0.98);
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.25rem;
    transition: opacity var(--transition-fast);
}

.logo:hover {
    color: var(--color-text);
    opacity: 0.8;
}

.logo-icon {
    width: 72px;
    height: 72px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    border: none;
    flex-shrink: 0;
}

.logo-icon svg,
.logo-icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    display: block;
    transform: scale(1.55);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-text .company-name {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.logo-text .tagline {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-text);
    background: var(--color-bg-tertiary);
}

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

.nav-cta {
    background: var(--gradient-primary);
    color: white !important;
    padding: 10px 20px;
    margin-left: 8px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
    color: white !important;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    margin: 6px 0;
    border-radius: 2px;
    transition: var(--transition-fast);
}

@media (max-width: 900px) {
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(241, 247, 255, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-base);
        z-index: 1000;
    }

    .nav.active {
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        font-size: 1.5rem;
        padding: 12px 24px;
    }

    .nav-cta {
        margin-left: 0;
        margin-top: 16px;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 1002;
    }

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

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

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

    /* Ensure header stays on top of announcement bar when scrolled */
    .header {
        z-index: 1000;
    }

    .header.has-announcement {
        top: 42px;
    }
}

/* ================================================
   Hero Section
   ================================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 140px;
    padding-bottom: var(--space-3xl);
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero.has-announcement {
    padding-top: 182px;
}

/* Decorative Background - Maple Leaf Inspired */
.hero-decoration {
    position: absolute;
    pointer-events: none;
}

.hero-decoration-1 {
    top: 10%;
    right: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(232, 163, 60, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-decoration-2 {
    bottom: 10%;
    left: 5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(91, 122, 74, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-decoration-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(212, 121, 58, 0.04) 0%, transparent 50%);
    border-radius: 50%;
}

/* Sparkle Decorations - Inspired by Logo */
.sparkle {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
}

.sparkle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-sparkle);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sparkle-sm { width: 12px; height: 12px; }
.sparkle-md { width: 18px; height: 18px; }
.sparkle-lg { width: 24px; height: 24px; }

.sparkle-1 { top: 15%; right: 15%; animation: sparkle-float 4s ease-in-out infinite; }
.sparkle-2 { top: 25%; left: 10%; animation: sparkle-float 5s ease-in-out infinite 0.5s; }
.sparkle-3 { bottom: 30%; right: 8%; animation: sparkle-float 4.5s ease-in-out infinite 1s; }
.sparkle-4 { top: 60%; left: 15%; animation: sparkle-float 5.5s ease-in-out infinite 1.5s; }

@keyframes sparkle-float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
    50% { transform: translateY(-8px) rotate(15deg); opacity: 0.8; }
}

/* Diamond sparkles (from logo) */
.diamond-sparkle {
    position: absolute;
    pointer-events: none;
    width: 8px;
    height: 8px;
    background: var(--color-sparkle);
    transform: rotate(45deg);
    opacity: 0.5;
}

.diamond-sparkle-1 { top: 20%; left: 20%; animation: diamond-pulse 3s ease-in-out infinite; }
.diamond-sparkle-2 { bottom: 25%; right: 20%; animation: diamond-pulse 3.5s ease-in-out infinite 0.5s; }

@keyframes diamond-pulse {
    0%, 100% { opacity: 0.3; transform: rotate(45deg) scale(1); }
    50% { opacity: 0.7; transform: rotate(45deg) scale(1.2); }
}

/* Orbital Ring Effect (subtle) */
.orbital-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border: 1px dashed var(--color-orbital);
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
}

/* Nature/Tree Decorations - From Logo Background */
.nature-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Tree silhouette - left side */
.tree-decor-left {
    left: -50px;
    bottom: 0;
    width: 300px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath d='M80 400 Q75 350 70 320 Q50 280 30 250 Q20 220 35 200 Q25 180 40 160 Q30 140 50 120 Q45 100 60 85 Q55 70 75 60 Q70 45 90 40 Q95 55 100 50 Q105 35 120 45 Q130 40 135 55 Q145 50 150 65 Q160 60 160 80 Q175 75 170 95 Q185 95 175 115 Q190 120 175 140 Q195 150 175 170 Q200 185 175 205 Q210 230 180 260 Q200 290 170 320 Q175 360 160 400' fill='%235B7A4A' opacity='0.15'/%3E%3Cpath d='M70 400 Q72 380 75 360 Q78 340 80 320' stroke='%233D2314' stroke-width='8' fill='none' opacity='0.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    opacity: 0.6;
}

/* Branch silhouette - right side */
.branch-decor-right {
    right: -30px;
    top: 50px;
    width: 250px;
    height: 300px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 300'%3E%3Cpath d='M250 50 Q200 60 180 80 Q160 70 150 90 Q130 85 125 105 Q100 100 105 125 Q80 130 95 150' stroke='%233D2314' stroke-width='6' fill='none' opacity='0.25'/%3E%3Ccircle cx='95' cy='150' r='25' fill='%235B7A4A' opacity='0.12'/%3E%3Ccircle cx='120' cy='130' r='20' fill='%235B7A4A' opacity='0.1'/%3E%3Ccircle cx='140' cy='155' r='18' fill='%235B7A4A' opacity='0.08'/%3E%3Cellipse cx='170' cy='100' rx='30' ry='20' fill='%23D4793A' opacity='0.1'/%3E%3Cellipse cx='195' cy='85' rx='25' ry='18' fill='%23E8A33C' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    opacity: 0.7;
}

/* ================================================
   Falling Maple Leaves - Improved Animation
   ================================================ */

.falling-leaves {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    overflow: hidden;
    mix-blend-mode: normal;
}

.leaf {
    position: absolute;
    top: -12vh;
    left: 0;
    width: var(--leaf-size, 44px);
    height: var(--leaf-size, 44px);
    animation: leaf-fall var(--fall-duration, 18s) linear infinite;
    will-change: transform;
    filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.14));
    opacity: 0;
}

.leaf__inner {
    width: 100%;
    height: 100%;
    display: block;
    animation: leaf-sway var(--sway-duration, 7s) ease-in-out infinite alternate;
}

.leaf svg {
    width: 100%;
    height: 100%;
}

@keyframes leaf-fall {
    0% {
        opacity: 0;
        transform: translate3d(var(--x-start, 0vw), -12vh, 0) rotate(0deg);
    }
    10% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--x-end, 50vw), 110vh, 0) rotate(360deg);
    }
}

@keyframes leaf-sway {
    from {
        transform: translateX(-12px) rotate(-10deg);
    }
    to {
        transform: translateX(12px) rotate(12deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .falling-leaves {
        display: none;
    }
}

/* ================================================
   Technology Elements - Code & Circuit Accents
   ================================================ */

/* Subtle code bracket decorations */
.tech-bracket {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 4rem;
    font-weight: 300;
    color: var(--color-primary);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.tech-bracket--left {
    left: 5%;
    top: 20%;
}

.tech-bracket--right {
    right: 5%;
    bottom: 20%;
}

/* Circuit line decoration */
.circuit-line {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
}

.circuit-line::before {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    height: 1px;
}

.circuit-line--horizontal::before {
    width: 150px;
    height: 1px;
}

.circuit-line--vertical::before {
    width: 1px;
    height: 100px;
}

/* Binary decoration (very subtle) */
.binary-decor {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: var(--color-primary);
    opacity: 0.04;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 2px;
}

/* Dot grid pattern (tech feel) */
.dot-grid {
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

/* Bottom foliage decoration */
.foliage-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cellipse cx='100' cy='150' rx='120' ry='80' fill='%235B7A4A' opacity='0.08'/%3E%3Cellipse cx='350' cy='150' rx='100' ry='60' fill='%235B7A4A' opacity='0.06'/%3E%3Cellipse cx='800' cy='150' rx='150' ry='90' fill='%235B7A4A' opacity='0.07'/%3E%3Cellipse cx='1100' cy='150' rx='130' ry='70' fill='%235B7A4A' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    background: rgba(91, 122, 74, 0.1);
    border: 1px solid rgba(91, 122, 74, 0.2);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
}

.hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-secondary);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.hero h1 {
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

.hero-description {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
    max-width: 600px;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Trust Badges */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.trust-badge-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
}

/* ================================================
   Buttons
   ================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.0625rem;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.875rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
    color: white !important;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    background: #f0f5ff;
    color: var(--color-primary) !important;
    border: 1px solid rgba(37, 99, 235, 0.25);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.btn-secondary:hover {
    background: var(--color-primary-100);
    border-color: rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
    color: var(--color-primary-dark) !important;
}

.btn-ghost {
    background: transparent;
    color: var(--color-primary) !important;
    padding: 8px 0;
}

.btn-ghost:hover {
    color: var(--color-primary-dark) !important;
}

.btn-ghost svg {
    transition: transform var(--transition-fast);
}

.btn-ghost:hover svg {
    transform: translateX(4px);
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ================================================
   Section Headers
   ================================================ */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-2xl);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(14, 165, 233, 0.12));
    border: 1px solid rgba(14, 165, 233, 0.12);
}

.section-header h2 {
    margin-bottom: var(--space-sm);
}

.section-header p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    margin-bottom: 0;
}

/* ================================================
   Values Section
   ================================================ */
.values-section {
    background: var(--color-bg);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

.value-card {
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.value-card:hover {
    border-color: rgba(37, 99, 235, 0.18);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.value-card:hover::before {
    transform: scaleX(1);
}

.value-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--color-primary-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.value-card h3 {
    margin-bottom: 8px;
    font-size: 1.125rem;
}

.value-card p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 0;
    line-height: 1.7;
}

/* ================================================
   Products Section
   ================================================ */
.products-section {
    background: var(--color-bg-secondary);
}

.products-grid {
    display: grid;
    gap: 32px;
}

.product-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    background: var(--color-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.product-card:hover {
    box-shadow: var(--shadow-xl);
    border-color: rgba(37, 99, 235, 0.18);
}

.product-card.featured {
    border: 2px solid var(--color-primary);
}

.product-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

@media (max-width: 900px) {
    .product-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.product-badge.flagship {
    background: rgba(37, 99, 235, 0.12);
    color: var(--color-primary-dark);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.product-badge.new {
    background: rgba(14, 165, 233, 0.14);
    color: var(--color-primary);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.product-badge.coming {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary-dark);
    border: 1px solid rgba(37, 99, 235, 0.22);
}

.product-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--space-sm);
}

.product-description {
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    margin-bottom: var(--space-lg);
    line-height: 1.8;
}

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

.product-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

@media (max-width: 900px) {
    .product-features {
        display: inline-block;
        text-align: left;
    }
}

.product-features li::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: var(--color-success);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.product-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ================================================
   VoxType Family Section
   ================================================ */
.suite-section {
    background: var(--gradient-section);
}

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

@media (max-width: 768px) {
    .suite-grid {
        grid-template-columns: 1fr;
    }
}

.suite-card {
    background: var(--color-bg-card);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.suite-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.12), transparent 45%),
                radial-gradient(circle at 80% 60%, rgba(14, 165, 233, 0.08), transparent 40%);
    pointer-events: none;
    opacity: 0.7;
}

.suite-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(14, 165, 233, 0.2);
}

.suite-card h3 {
    font-family: var(--font-display);
    margin-bottom: var(--space-sm);
}

.suite-card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.suite-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.suite-pill {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(14, 165, 233, 0.08);
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid rgba(14, 165, 233, 0.18);
}

.suite-status {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid transparent;
}

.suite-status.success {
    background: rgba(52, 211, 153, 0.14);
    color: #047857;
    border-color: rgba(52, 211, 153, 0.2);
}

.suite-status.info {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.22);
}

.suite-status.soon {
    background: rgba(234, 179, 8, 0.14);
    color: #b45309;
    border-color: rgba(234, 179, 8, 0.2);
}

.suite-list {
    list-style: none;
    margin-bottom: var(--space-md);
}

.suite-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 6px 0;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.suite-list li::before {
    content: '▸';
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 2px;
}

.suite-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.link-muted {
    color: var(--color-primary);
    font-weight: 700;
}

.pro-plus-callout {
    margin-top: var(--space-xl);
}

.pro-plus-inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.pro-plus-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}

.pro-plus-inner h3 {
    margin-bottom: 6px;
}

.pro-plus-inner p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Product Visual */
.product-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-shot {
    position: relative;
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.18);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22), 0 6px 16px rgba(15, 23, 42, 0.12);
    background: linear-gradient(180deg, #f8fbff 0%, #e9f2ff 100%);
}

.product-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-shot--tall {
    max-width: 320px;
    aspect-ratio: 9 / 18;
}

.product-shot--wide {
    max-width: 460px;
    aspect-ratio: 16 / 10;
}

.product-shot--desktop {
    max-width: 480px;
    aspect-ratio: 16 / 9;
}

.product-shot--meeting {
    max-width: 460px;
    aspect-ratio: 16 / 9;
}

.shot-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(37, 99, 235, 0.92);
    color: white;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
    backdrop-filter: blur(6px);
}

/* ================================================
   Roadmap Section
   ================================================ */
.roadmap-section {
    background: var(--gradient-dark);
    color: white;
}

.roadmap-section .section-header h2,
.roadmap-section .section-header p {
    color: white;
}

.roadmap-section .section-header p {
    color: rgba(255,255,255,0.7);
}

.roadmap-section .section-badge {
    color: var(--color-primary-light);
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1000px) {
    .roadmap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .roadmap-grid {
        grid-template-columns: 1fr;
    }
}

.roadmap-item {
    padding: var(--space-lg);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    position: relative;
    transition: all var(--transition-base);
}

.roadmap-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(37, 99, 235, 0.35);
    transform: translateY(-4px);
}

.roadmap-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.roadmap-status.live {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.roadmap-status.beta {
    background: rgba(232, 163, 60, 0.2);
    color: #fbbf24;
}

.roadmap-status.development {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.roadmap-status.planned {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.roadmap-item h4 {
    color: white;
    margin-bottom: 8px;
    font-size: 1.125rem;
}

.roadmap-item p {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* ================================================
   Privacy Section
   ================================================ */
.privacy-section {
    background: var(--color-bg);
}

.privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    align-items: center;
}

@media (max-width: 900px) {
    .privacy-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.privacy-content h2 {
    margin-bottom: var(--space-md);
}

.privacy-content p {
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.privacy-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .privacy-features {
        grid-template-columns: 1fr;
    }
}

.privacy-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0,0,0,0.04);
}

.privacy-feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.privacy-feature h4 {
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.privacy-feature p {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* ================================================
   CTA Section
   ================================================ */
.cta-section {
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(212, 121, 58, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    margin-bottom: var(--space-md);
}

.cta-content p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    margin-bottom: var(--space-lg);
}

/* ================================================
   Footer
   ================================================ */
.footer {
    background: var(--color-bg-dark);
    color: white;
    padding: var(--space-3xl) 0 var(--space-lg);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 20px;
    width: 200px;
    height: 250px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'%3E%3Cpath d='M50 0 Q48 30 45 50 Q30 80 20 100 Q15 120 25 135 Q20 150 35 165 Q30 180 50 190 Q48 202 65 205 Q70 195 75 200 Q80 210 95 202 Q105 205 108 192 Q118 195 115 178 Q130 175 120 158 Q135 150 118 132 Q145 115 115 90 Q140 65 110 40 Q115 15 100 0' fill='%235B7A4A' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.4;
}

.footer::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: 30px;
    width: 180px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 200'%3E%3Cpath d='M180 180 Q140 170 120 155 Q100 160 90 145 Q70 148 75 130 Q50 125 65 110' stroke='%23FDFBF7' stroke-width='3' fill='none' opacity='0.06'/%3E%3Ccircle cx='65' cy='110' r='20' fill='%235B7A4A' opacity='0.05'/%3E%3Ccircle cx='90' cy='130' r='15' fill='%235B7A4A' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.5;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

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

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    margin-bottom: var(--space-md);
}

.footer-logo-icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    border: none;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.footer-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    display: block;
    transform: scale(1.55);
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 4px;
}

.footer-logo-text .company-name {
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}

.footer-logo-text .tagline {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

.footer-brand p {
    color: rgba(255,255,255,0.6);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.footer-column h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    margin-bottom: var(--space-md);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.5);
}

@media (max-width: 600px) {
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

.footer-location {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================================================
   Page Header
   ================================================ */
.page-header {
    padding: calc(90px + var(--space-3xl)) 0 var(--space-2xl);
    background: var(--gradient-hero);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    left: -30px;
    bottom: -20px;
    width: 200px;
    height: 250px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'%3E%3Cpath d='M50 250 Q48 220 45 200 Q30 170 20 150 Q15 130 25 115 Q20 100 35 85 Q30 70 50 60 Q48 48 65 45 Q70 55 75 50 Q80 40 95 48 Q105 45 108 58 Q118 55 115 72 Q130 75 120 92 Q135 100 118 118 Q145 135 115 160 Q140 185 110 210 Q115 235 100 250' fill='%235B7A4A' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.5;
}

.page-header::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 80px;
    width: 150px;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 180'%3E%3Cpath d='M150 30 Q120 40 105 55 Q90 50 85 65 Q70 62 75 80 Q55 85 70 100' stroke='%233D2314' stroke-width='4' fill='none' opacity='0.15'/%3E%3Ccircle cx='70' cy='100' r='18' fill='%235B7A4A' opacity='0.08'/%3E%3Ccircle cx='90' cy='85' r='15' fill='%235B7A4A' opacity='0.06'/%3E%3Cellipse cx='110' cy='65' rx='20' ry='14' fill='%23D4793A' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.6;
}

.page-header.has-announcement {
    padding-top: calc(114px + var(--space-3xl));
}

.page-header h1 {
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
}

.page-header p {
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ================================================
   Legal Pages
   ================================================ */
.legal-content {
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.legal-meta {
    display: inline-flex;
    gap: var(--space-lg);
    padding: 16px 24px;
    background: var(--color-bg-secondary);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
    font-size: 0.875rem;
}

.legal-meta span {
    color: var(--color-text-muted);
}

.legal-meta strong {
    color: var(--color-text);
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(0,0,0,0.06);
}

.legal-content h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-content h3 {
    font-size: 1.125rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.legal-content p,
.legal-content li {
    color: var(--color-text-secondary);
}

.legal-content ul,
.legal-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.legal-content li {
    margin-bottom: 0.5em;
}

/* ================================================
   Contact Page
   ================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-card {
    padding: var(--space-xl);
    background: var(--color-bg);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.contact-card:hover {
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.contact-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: var(--color-primary-50);
    border-radius: var(--radius-lg);
    margin: 0 auto var(--space-md);
}

.contact-card h3 {
    margin-bottom: 8px;
}

.contact-card p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);
}

.contact-card a {
    font-weight: 600;
    font-size: 1rem;
}

/* ================================================
   About Page
   ================================================ */
.about-content {
    padding: var(--space-lg) 0;
}

.about-content h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(0,0,0,0.06);
}

.about-content h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.about-content h3 {
    font-size: 1.125rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.about-content p {
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

/* ================================================
   Animations
   ================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   Utilities
   ================================================ */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ================================================
   MOBILE OPTIMIZATION & TOUCH ENHANCEMENTS
   ================================================ */

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn, button, .nav-link, a {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch */
    .btn:hover, .product-card:hover, .value-card:hover, .suite-card:hover {
        transform: none;
    }
    
    /* Add active states for touch feedback */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .nav-link:active {
        background: rgba(37, 99, 235, 0.15);
    }
}

/* Prevent text selection on interactive elements */
.btn, button, .nav-link, .menu-toggle {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Safe area insets for modern phones (notch, home indicator) */
@supports (padding: max(0px)) {
    .footer {
        padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
    }
    
    .hero {
        padding-bottom: max(var(--space-3xl), env(safe-area-inset-bottom));
    }
}

/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        -webkit-overflow-scrolling: touch;
        /* Ensure body starts below fixed announcement bar */
        padding-top: 0;
    }

    /* Better form inputs on mobile */
    input, textarea, select {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Improve hero section on mobile */
    .hero {
        min-height: auto;
        padding-top: 120px; /* 70px header + 50px spacing */
        padding-bottom: var(--space-2xl);
    }

    .hero.has-announcement {
        padding-top: 154px; /* 42px announcement + 70px header + 42px spacing */
    }

    /* Page header mobile spacing */
    .page-header {
        padding-top: calc(70px + var(--space-2xl));
    }

    .page-header.has-announcement {
        padding-top: calc(112px + var(--space-2xl)); /* 42px announcement + 70px header */
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    .trust-badges {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    /* Better button sizing on mobile */
    .btn {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .btn-lg {
        padding: 16px 28px;
    }
    
    /* Product cards mobile */
    .product-card {
        padding: var(--space-lg);
    }
    
    .product-shot {
        max-width: 280px;
    }
    
    /* Suite cards mobile */
    .suite-card {
        padding: var(--space-md);
    }
    
    /* Privacy section mobile */
    .privacy-features {
        gap: 12px;
    }
    
    /* Header height adjustment for mobile */
    .header-inner {
        height: 70px;
    }

    /* Logo adjustments for mobile */
    .logo-icon {
        width: 50px;
        height: 50px;
    }

    .logo-text .company-name {
        font-size: 1rem;
    }

    .logo-text .tagline {
        font-size: 0.65rem;
    }
    
    .footer-logo-icon {
        width: 65px;
        height: 65px;
    }
    
    .footer-logo-text .company-name {
        font-size: 1.15rem;
    }
    
    .footer-logo-text .tagline {
        font-size: 0.75rem;
    }

    /* Reduce/hide decorative elements on mobile to prevent overflow */
    .hero-decoration,
    .tech-bracket,
    .tree-decor-left,
    .branch-decor-right,
    .nature-decor,
    .foliage-bottom {
        display: none;
    }

    .dot-grid {
        opacity: 0.02;
    }

    .sparkle,
    .diamond-sparkle {
        opacity: 0.3;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-sm);
    }

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

    .section-lg {
        padding: var(--space-3xl) 0;
    }

    .hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .section-header h2 {
        font-size: 1.75rem;
        line-height: 1.25;
    }

    .product-title {
        font-size: 1.25rem;
    }

    /* Increase contrast for better readability on mobile */
    .hero-description,
    .section-header p,
    .product-description {
        color: var(--color-text);
        opacity: 0.85;
    }

    /* Ensure proper text sizing prevents horizontal overflow */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Stack buttons on very small screens */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    .product-links {
        flex-direction: column;
    }
    
    .product-links .btn {
        width: 100%;
        justify-content: center;
    }
    
    .suite-links {
        flex-direction: column;
    }
    
    .suite-links .btn,
    .suite-links .link-muted {
        width: 100%;
        text-align: center;
    }
}

/* Landscape mode fixes */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: var(--space-lg);
    }
    
    .hero.has-announcement {
        padding-top: 140px;
    }
}

/* Print styles */
@media print {
    .falling-leaves,
    .announcement-bar,
    .menu-toggle,
    .nav-cta,
    .hero-decoration,
    .sparkle,
    .diamond-sparkle,
    .tech-bracket,
    .dot-grid {
        display: none !important;
    }
    
    .header {
        position: static;
        background: white;
    }
    
    .hero {
        min-height: auto;
        padding-top: var(--space-lg);
    }
    
    .product-card,
    .value-card,
    .suite-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid white;
    }
    
    .btn-secondary {
        border: 2px solid var(--color-primary);
    }
    
    .product-card,
    .value-card,
    .suite-card {
        border-width: 2px;
    }
}