/*
 * 291 Group - Main Stylesheet
 * Premium corporate design with dark theme
 */

/* ============================================================
   IMPORT FONTS
   ============================================================ */

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

/* ============================================================
   VARIABLES & FOUNDATIONS
   ============================================================ */

:root {
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --spacing-xxl: 8rem;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme (Default) */
:root,
[data-theme="dark"] {
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #111111;
    --color-bg-tertiary: #1a1a1a;
    --color-bg-elevated: #222222;

    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0a0;
    --color-text-tertiary: #707070;

    --color-accent-primary: #00ff88;
    --color-accent-secondary: #0088ff;

    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.2);
}

/* Light Theme - WCAG AA compliant contrast */
[data-theme="light"] {
    --color-bg-primary: #f5f5f5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e8e8e8;
    --color-bg-elevated: #ffffff;

    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #666666;

    --color-accent-primary: #008f50;
    --color-accent-secondary: #0055aa;

    --color-border: rgba(0, 0, 0, 0.15);
    --color-border-hover: rgba(0, 0, 0, 0.25);
}

/* Light Theme Overrides */
[data-theme="light"] .nav {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .nav.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .hero {
    background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 50%, #e8e8e8 100%);
}

/* Theme toggle in light mode */
[data-theme="light"] .theme-toggle-btn {
    background: transparent;
    border: none;
}

[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .hero-overlay {
    background: radial-gradient(circle at 50% 50%, rgba(0, 168, 95, 0.08) 0%, transparent 70%);
}

[data-theme="light"] .hero-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #000000 !important;
    background-clip: unset !important;
    color: #000000 !important;
}

[data-theme="light"] .hero-description {
    color: var(--color-text-primary);
    font-weight: 500;
}

[data-theme="light"] .hero-label {
    background: rgba(0, 168, 95, 0.1);
    color: var(--color-accent-primary);
    border: 1px solid rgba(0, 168, 95, 0.2);
}

[data-theme="light"] .dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-nav:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .card-hover-effect {
    background: linear-gradient(135deg, rgba(0, 179, 107, 0.05) 0%, rgba(9, 105, 218, 0.05) 100%);
}

/* Section backgrounds */
[data-theme="light"] .capabilities {
    background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 100%) !important;
}

[data-theme="light"] .sectors {
    background: linear-gradient(180deg, #c0c0c0 0%, #e8e8e8 100%) !important;
}

/* Override inline dark section styles */
[data-theme="light"] section[style*="background: linear-gradient(180deg, #0a0a0a"] {
    background: linear-gradient(180deg, #e8e8e8 0%, #d4d4d4 100%) !important;
}

[data-theme="light"] section[style*="background: linear-gradient"] {
    background: linear-gradient(180deg, #d4d4d4 0%, #c0c0c0 100%) !important;
}

/* Button overrides */
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #00b36b 0%, #0969da 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 179, 107, 0.25);
}

[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(0, 179, 107, 0.35);
    color: #ffffff;
}

[data-theme="light"] .btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(27, 31, 36, 0.15);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(27, 31, 36, 0.25);
}

[data-theme="light"] .btn-outline {
    border-color: rgba(27, 31, 36, 0.15);
}

[data-theme="light"] .btn-outline:hover {
    background: rgba(0, 179, 107, 0.05);
    border-color: var(--color-accent-primary);
}

/* Card overrides */
[data-theme="light"] .capability-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: #f0f0f0;
}

[data-theme="light"] .capability-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

[data-theme="light"] .card-background {
    background: radial-gradient(circle at top right, rgba(0, 168, 95, 0.12), transparent 50%);
}

[data-theme="light"] .card-icon {
    background: rgba(0, 168, 95, 0.15);
    border-color: rgba(0, 168, 95, 0.25);
}

/* Select dropdown styling */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

/* Form elements */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background-color: #f0f0f0;
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--color-text-primary);
}

[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: var(--color-accent-primary);
    background: #f0f0f0;
}

/* Desktop nav - remove background/shadow in light mode */
@media (min-width: 1025px) {
    [data-theme="light"] .nav-menu {
        background: transparent;
        box-shadow: none;
    }
}

/* Mobile menu */
[data-theme="light"] .mobile-menu-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* Mobile Menu Copyright - hidden by default (desktop) */
.mobile-menu-copyright {
    display: none;
}

@media (max-width: 1024px) {
    [data-theme="light"] .nav-menu {
        background: #e8e8e8;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    }
}

/* Footer */
[data-theme="light"] .footer {
    background: #e8e8e8;
    border-top: 1px solid var(--color-border);
}

/* Stats section */
[data-theme="light"] .stat-value {
    background: linear-gradient(135deg, #00b36b 0%, #0969da 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
    /* Note: scroll-behavior: smooth removed - causes double-click bug in Chrome at page bottom.
       Smooth scrolling is handled via JS instead (see smoothScroll in main.js) */
    /* .nav is position: fixed and 81px tall, so anything the browser scrolls to
       on its own lands underneath it: the skip link's #main-content, a Chrome
       text fragment (#:~:text=), a restored offset. section carries its own
       scroll-margin-top; this covers every target that doesn't. */
    scroll-padding-top: 96px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
}

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

/* Selection */
::selection {
    background-color: var(--color-accent-primary);
    color: var(--color-bg-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-accent-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-secondary);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid var(--color-accent-secondary);
    outline-offset: 2px;
}

/* Enhanced focus states */
*:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Print styles */
@media print {
    nav,
    .nav,
    .footer,
    .theme-toggle,
    .scroll-progress,
    .mobile-menu-backdrop,
    .cta,
    .hero-canvas {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: 1rem;
}

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

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

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s, visibility 0.5s;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
}

.loader-path {
    fill: none;
    stroke: var(--color-accent-primary);
    stroke-width: 2;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: loaderDraw 2s ease-in-out infinite;
}

@keyframes loaderDraw {
    0%, 100% { stroke-dashoffset: 300; }
    50% { stroke-dashoffset: 0; }
}

.loader-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.2em;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: all var(--transition-base);
}

.nav.scrolled {
    background: rgba(10, 10, 10, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.nav-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.logo-svg {
    height: 32px;
    width: auto;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    fill: var(--color-text-primary);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: inline-block;
    padding: 1rem 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color var(--transition-fast);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent-primary);
    transition: width var(--transition-base);
}

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

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

/* Dropdown chevron */
.nav-chevron {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.nav-item.has-dropdown:hover .nav-chevron,
.nav-item.has-dropdown.dropdown-open .nav-chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    pointer-events: none;
}

.nav-item:hover .nav-dropdown,
.nav-item.dropdown-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.dropdown-content {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem;
    min-width: 320px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dropdown-item.active {
    background: rgba(0, 255, 136, 0.06);
    border-left: 2px solid var(--color-accent-primary);
}

.dropdown-item.active .dropdown-text h4 {
    color: var(--color-accent-primary);
}

.dropdown-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.dropdown-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-accent-primary);
    fill: none;
    stroke-width: 2;
}

.dropdown-text h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.dropdown-text p {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin: 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.btn-nav {
    padding: 10px 24px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-nav:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border-hover);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    transition: transform var(--transition-base);
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle-btn {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.theme-toggle-btn:hover {
    border-color: var(--color-border-hover);
}

.theme-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    border-radius: 50%;
    transition: transform var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .theme-toggle-slider {
    transform: translateX(24px);
}

.theme-toggle-icon {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

/* Mobile menu backdrop */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-backdrop.active {
    opacity: 1;
}

@media (max-width: 1024px) {
    .mobile-menu-backdrop {
        display: block;
        pointer-events: none;
    }

    .mobile-menu-backdrop.active {
        pointer-events: all;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 400px;
        height: 100dvh;
        height: 100vh; /* fallback for older browsers */
        height: 100dvh;
        background: var(--color-bg-elevated);
        border-left: 1px solid var(--color-border);
        padding: 6rem 2rem 2rem;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .nav-menu.open {
        transform: translateX(0);
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-link {
        display: block;
        width: 100%;
        padding: 1.25rem 0;
        font-size: 1rem;
    }

    /* Products is the only submenu, so in the drawer it is expanded by default.
       That state lives here rather than being applied by script when the menu
       opens: as a CSS default it is already open on first paint, instead of
       animating itself open behind the drawer. A tap collapses it.
       1000px clears the tallest the panel gets — 7 items at ~74px plus wrapping,
       padding and margins (~700px). Raise it if the Products list grows. */
    .nav-dropdown {
        position: static;
        transform: none;
        margin-top: 0;
        padding-top: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        max-height: 1000px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-item.dropdown-collapsed .nav-dropdown {
        max-height: 0;
    }

    /* Older cached copies of main.js toggle .dropdown-open on tap instead of
       .dropdown-collapsed. Honour both, so the collapse works whichever script
       a returning visitor has cached. Current main.js never sets .dropdown-open
       below this breakpoint, so this rule is inert once the new file is in use. */
    .nav-item.dropdown-open .nav-dropdown {
        max-height: 0;
    }

    .dropdown-content {
        margin: 0.5rem 0 1rem 1rem;
        box-shadow: none;
        border: none;
        background: rgba(255, 255, 255, 0.02);
    }

    /* The tint above is white, so it does nothing against the light drawer.
       Darken instead, to the same barely-there degree. */
    [data-theme="light"] .dropdown-content {
        background: rgba(0, 0, 0, 0.05);
    }

    .nav-toggle {
        display: flex;
        z-index: 1001;
    }

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

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

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

    /* Mobile Menu Copyright - visible only on mobile */
    .mobile-menu-copyright {
        display: block;
        width: 100%;
        margin-top: auto;
        padding: 1.5rem 0 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        text-align: center;
        font-size: 0.75rem;
        color: var(--color-text-tertiary);
        border-top: 1px solid var(--color-border);
    }

    /* Hide scroll-to-top when mobile menu is open */
    body.mobile-menu-open .scroll-to-top {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 0 6rem;
    overflow: hidden;
}

.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 255, 136, 0.05) 0%,
        transparent 70%
    );
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-content {
    max-width: 900px;
}

.hero-label {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
    margin-bottom: 2rem;
}

.hero-title {
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* The typewriter stacks two copies of the headline — a hidden spacer that
       holds the layout space and the visible typed copy above it. Tapping or
       zooming starts a selection across both runs at once, and because the
       glyphs are filled by a clipped gradient rather than a text colour, WebKit
       leaves an underline-shaped artifact behind. Selecting the title also
       yields the text doubled. Neither is wanted, so don't select it. */
    -webkit-user-select: none;
    user-select: none;
}

.title-line {
    display: block;
}

.hero-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    max-width: fit-content;
    margin: 1.5rem auto 4rem auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00ff88 0%, #0088ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-suffix {
    display: inline;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00ff88 0%, #0088ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.scroll-indicator {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scroll-text {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--color-accent-primary), transparent);
    animation: scrollLineMove 2s ease-in-out infinite;
}

@keyframes scrollLineMove {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(20px); opacity: 0; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, #00ff88 0%, #0088ff 100%);
    color: var(--color-bg-primary);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
    transform: translateY(-2px);
    color: var(--color-bg-primary);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

.btn-large {
    padding: 18px 40px;
    font-size: 1.125rem;
}

.btn-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ============================================================
   SECTIONS
   ============================================================ */

section {
    padding: 2.5rem 0;
    position: relative;
    scroll-margin-top: 80px; /* Account for fixed header */
}

.section-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.section-label {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================================
   CAPABILITIES
   ============================================================ */

.capabilities {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.capability-card {
    position: relative;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2rem;
    transition: all var(--transition-base);
    overflow: hidden;
}

.capability-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(0, 255, 136, 0.1), transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 0;
}

.capability-card:hover .card-background {
    opacity: 1;
}

.card-content {
    position: relative;
    z-index: 1;
}

.card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.card-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-accent-primary);
    fill: none;
    stroke-width: 2;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-description {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.card-features {
    list-style: none;
    margin-bottom: 1.5rem;
}

.card-features li {
    padding: 6px 0 6px 24px;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    position: relative;
}

.card-features li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent-primary);
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent-primary);
    font-weight: 600;
    transition: gap var(--transition-fast);
}

.card-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.card-link:hover {
    gap: 12px;
    color: var(--color-accent-primary);
}

.card-hover-effect {
    /* Placeholder for future effects */
}

/* ============================================================
   FEATURED PRODUCT
   ============================================================ */

.featured-product {
    position: relative;
    padding: 2.5rem 0;
    overflow: hidden;
}

.product-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        var(--color-bg-primary) 0%,
        transparent 30%,
        transparent 70%,
        var(--color-bg-primary) 100%
    );
}

.product-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 1024px) {
    .product-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent-primary);
    margin-bottom: 1.5rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent-primary);
    border-radius: 50%;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.product-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

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

.product-features {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.feature-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.feature-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 50%;
    font-family: monospace;
    font-weight: 700;
    color: var(--color-accent-primary);
}

.feature-item h4 {
    font-size: 1.125rem;
    margin-bottom: 4px;
}

.feature-item p {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.product-stats-inline {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.stat-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-inline .stat-number {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00ff88 0%, #0088ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-inline .stat-unit {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.product-visual {
    position: relative;
}

.visual-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.visual-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.3), transparent 70%);
    filter: blur(40px);
    z-index: -1;
}

/* ============================================================
   SECTORS
   ============================================================ */

.sectors {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.sector-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2rem;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.sector-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #00ff88 0%, #0088ff 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.sector-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

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

.sector-content {
    position: relative;
    z-index: 1;
}

.sector-icon-large {
    margin-bottom: 1.5rem;
}

.sector-icon-large svg {
    width: 48px;
    height: 48px;
    stroke: var(--color-accent-primary);
    fill: none;
    stroke-width: 2;
}

.sector-card h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.sector-card p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.sector-list {
    list-style: none;
    margin-bottom: 1.5rem;
}

.sector-list li {
    padding: 8px 0 8px 24px;
    color: var(--color-text-secondary);
    position: relative;
}

.sector-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent-primary);
    font-weight: 700;
}

.sector-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent-primary);
    font-weight: 600;
    transition: gap var(--transition-fast);
}

.sector-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.sector-link:hover {
    gap: 12px;
    color: var(--color-accent-primary);
}

/* ============================================================
   WHY US
   ============================================================ */

.why-us {
    position: relative;
}

.why-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .why-content {
        grid-template-columns: 1fr;
    }
}

.why-text {
    position: sticky;
    top: 120px;
}

@media (max-width: 1024px) {
    .why-text {
        position: relative;
        top: 0;
    }
}

.why-description {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

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

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

.why-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    transition: all var(--transition-base);
}

.why-item:hover {
    border-color: var(--color-accent-primary);
    transform: translateY(-4px);
}

.why-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.why-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-accent-primary);
    fill: none;
    stroke-width: 2;
}

.why-item h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.why-item p {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* ============================================================
   CTA SECTION
   ============================================================ */

.cta {
    position: relative;
    background: var(--color-bg-secondary);
    padding: 2.5rem 0;
    overflow: hidden;
}

.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cta-grid-overlay {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

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

.cta-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1.5rem;
}

.cta-description {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cta-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.contact-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.contact-link:hover {
    color: var(--color-accent-primary);
}

.contact-divider {
    color: var(--color-border);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: 4rem 0 2rem;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--color-border);
}

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

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

.footer-logo {
    height: 32px;
    width: auto;
    margin-bottom: 1.5rem;
}

.footer-tagline {
    font-size: 0.875rem;
    color: var(--color-accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.footer-description {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.footer-motto {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
    font-style: italic;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 3rem;
    justify-content: end;
}

@media (max-width: 768px) {
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        justify-content: start;
    }
}

@media (max-width: 480px) {
    .footer-links {
        grid-template-columns: 1fr;
        justify-content: start;
    }
}

.footer-col h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 8px;
}

.footer-col a {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.footer-col a:hover {
    color: var(--color-accent-primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

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

    .footer-legal {
        width: 100%;
    }

    .footer-legal-links {
        justify-content: center;
    }
}

.footer-legal p {
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    margin-bottom: 8px;
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: var(--color-accent-primary);
}

.footer-legal-links span {
    color: var(--color-border);
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--color-accent-primary);
}

.footer-social svg {
    width: 18px;
    height: 18px;
    fill: var(--color-text-secondary);
    transition: fill var(--transition-fast);
}


.footer-social a:hover svg {
    fill: var(--color-accent-primary);
}

/* ============================================================
   NOSCRIPT MESSAGE
   ============================================================ */

.noscript-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.noscript-content {
    text-align: center;
    max-width: 500px;
    padding: 3rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

[data-theme="light"] .noscript-message {
    background: #e8e8e8;
}

/* ============================================================
   SCROLL PROGRESS & SCROLL TO TOP
   ============================================================ */

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    z-index: 10000;
    transition: width 0.1s ease-out;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: 9999;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
}

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

/* Light theme overrides */
[data-theme="light"] .scroll-progress {
    background: linear-gradient(90deg, #00b36b 0%, #0969da 100%);
}

[data-theme="light"] .scroll-to-top {
    background: linear-gradient(135deg, #00b36b 0%, #0969da 100%);
    box-shadow: 0 4px 12px rgba(0, 179, 107, 0.25);
}

[data-theme="light"] .scroll-to-top:hover {
    box-shadow: 0 6px 20px rgba(0, 179, 107, 0.35);
}

/* ============================================================
   TYPEWRITER EFFECT
   ============================================================ */

.typing-content {
    background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: inherit;
}

[data-theme="light"] .typing-content {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #000000 !important;
    background-clip: unset !important;
    color: #000000 !important;
}

/* The headline ships as real text in the HTML (for crawlers and no-JS
   visitors), but app.typewriter() empties it and types it back. main.js is a
   blocking script at the end of body, so between the hero painting and the
   script running there is a window where the finished headline is on screen —
   it then vanishes and types itself. Hide the lines until the typewriter has
   claimed the title by adding .typewriter to it.

   visibility (not display) so the spacer keeps holding the layout and nothing
   reflows. Gated on .js-typewriter, which header.php's inline script adds and
   then drops again after 3s, so the headline is never left invisible if JS is
   off or main.js fails to run. */
html.js-typewriter .hero-title:not(.typewriter) .title-line {
    visibility: hidden;
}

/* Ensure typewriter doesn't break spacing */
.hero-title.typewriter {
    margin-bottom: 2rem;
}

.hero-title.typewriter .title-line:last-child {
    margin-bottom: 0;
}

.hero-title .typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--color-accent-primary);
    margin-left: 4px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}

[data-theme="light"] .hero-title .typewriter-cursor {
    background: #00b36b;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 45px;
        height: 45px;
    }

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

    .noscript-content {
        margin: 0 1rem;
        padding: 2rem 1.5rem;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet and below - fix all 2-column grids */
@media (max-width: 1024px) {
    /* Force all inline 2-column grids to stack */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* Mobile - comprehensive fixes */
@media (max-width: 768px) {
    .nav-logo {
        margin-right: 1rem;
    }

    section {
        padding: 2rem 0;
    }

    .hero {
        padding: calc(80px + 4rem) 0 2rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .capabilities-grid,
    .sectors-grid {
        grid-template-columns: 1fr;
    }

    /* Force all grids to single column on mobile */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Reduce padding on mobile */
    .container {
        padding: 0 1.5rem;
    }

    /* Fix text sizing */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* Reduce gaps on mobile */
    div[style*="gap: 4rem"] {
        gap: 2rem !important;
    }

    div[style*="gap: 3rem"] {
        gap: 1.5rem !important;
    }
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */

[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-scroll-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for multiple elements */
[data-scroll-reveal]:nth-child(1) { transition-delay: 0s; }
[data-scroll-reveal]:nth-child(2) { transition-delay: 0.1s; }
[data-scroll-reveal]:nth-child(3) { transition-delay: 0.2s; }
[data-scroll-reveal]:nth-child(4) { transition-delay: 0.3s; }
[data-scroll-reveal]:nth-child(5) { transition-delay: 0.4s; }
[data-scroll-reveal]:nth-child(6) { transition-delay: 0.5s; }
/* ============================================================
   ENHANCEMENTS - Profile Cards & Hover Effects
   ============================================================ */

/* Profile card hover effects for about page */
.team-profile-card,
div[style*="border-radius: 16px"][style*="overflow: hidden"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-profile-card:hover,
div[style*="border-radius: 16px"][style*="overflow: hidden"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 255, 136, 0.15);
}

/* "Join Team" card hover effect */
div[style*="Join Our Team"] {
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Mobile touch target improvements */
@media (max-width: 768px) {
    /* Ensure minimum 44x44px touch targets */
    button:not(.theme-toggle-btn),
    a.btn,
    .btn,
    .nav-link,
    .nav-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Add space between logo and theme toggle on mobile */
    .theme-toggle {
        margin-left: 1rem;
    }

    /* Theme toggle button - keep original size but center slider */
    .theme-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .theme-toggle-slider {
        position: relative;
        top: auto;
        left: 2px;
    }

    [data-theme="light"] .theme-toggle-slider {
        left: 26px;
        transform: none;
    }
    
    /* Adjust button padding on mobile */
    .btn {
        padding: 15px 24px;
    }
    
    /* Social links touch targets */
    a[href*="linkedin"],
    a[href*="github"],
    a[href*="twitter"],
    a[href*="x.com"] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Image lazy loading - prevent layout shift */
img[loading="lazy"] {
    min-height: 100px;
}

img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ============================================================
   UTILITY CLASSES - For migrating inline styles
   ============================================================ */

/* Layout */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Spacing */
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 2.5rem; }

.py-2 { padding-top: 1rem; padding-bottom: 1rem; }
.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.py-6 { padding-top: 3rem; padding-bottom: 3rem; }
.py-8 { padding-top: 4rem; padding-bottom: 4rem; }

.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.p-6 { padding: 3rem; }

/* Widths */
.w-full { width: 100%; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1000px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Typography */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 2rem; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent-primary); }

/* Backgrounds */
.bg-primary { background: var(--color-bg-primary); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-elevated { background: var(--color-bg-elevated); }

/* Borders */
.border { border: 1px solid var(--color-border); }
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }

/* Form Elements */
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color 0.3s;
}

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

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

.form-section-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-accent-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
}

/* Cards */
.card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2rem;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .md\:flex-col { flex-direction: column; }
}

/* Leadership Team Grid - 3 columns on desktop, 1 column on mobile */
.leadership-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

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

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