/* ===== CSS Variables / Design Tokens (Dialog Style Reference) ===== */
:root {
    /* Dialog Design Tokens */
    --color-tangerine-tag: #7fa8d0; /* Primary CTA & Action accent */
    --color-midnight-ink: #141c2a;  /* Primary body text */
    --color-graphite: #42505f;      /* Secondary body text */
    --color-deep-slate: #27405f;    /* Dark card background for preserved sections */
    --color-carbon: #000000;        /* Headings & primary labels */
    --color-stone: #636363;         /* Nav labels & supporting text */
    --color-pebble: #949494;        /* Placeholder & muted text */
    --color-ash: #8b8b8b;           /* Faint borders & stroke */
    --color-fog: #f4f7fb;           /* Page canvas background */
    --color-snow: #ffffff;          /* Card surfaces */
    
    /* Theme Mappings (Dialog Light Theme with Preserved Dark Islands) */
    --bg-primary: var(--color-fog);
    --bg-secondary: #ffffff;
    --bg-card: var(--color-snow);
    --bg-card-solid: #ffffff;
    --bg-card-hover: #fafafa;
    
    --gold: var(--color-tangerine-tag);
    --gold-light: #a6c4e2;
    --gold-dark: #4e7ba8;
    --gold-50: rgba(127, 168, 208, 0.08);
    --gold-100: rgba(127, 168, 208, 0.15);
    --gold-200: rgba(127, 168, 208, 0.28);
    --gold-300: rgba(127, 168, 208, 0.45);
    
    --text-primary: var(--color-carbon);
    --text-secondary: var(--color-graphite);
    --text-muted: var(--color-stone);
    
    --border: rgba(20, 28, 42, 0.09);
    --border-hover: var(--color-tangerine-tag);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(20, 28, 42, 0.03);
    --shadow-md: rgba(20, 28, 42, 0.08) 0px 4px 12px -2px;
    --shadow-lg: rgba(20, 28, 42, 0.12) 0px 10px 24px -4px;
    --shadow-subtle: rgba(20, 28, 42, 0.10) 0px 2px 5px -2px;
    --shadow-gold: 0 6px 20px rgba(127, 168, 208, 0.25);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-full: 100px;
    --nav-height: 76px;
    --ease-mymind: cubic-bezier(0.19, 1, 0.22, 1);
    --transition-fast: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    --transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    --transition-slow: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    --transition-pop: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.7s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.35s ease, background-color 0.35s ease;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

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

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

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

/* ===== Animated Loading Screen (Preloader) ===== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--deep-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
}

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

/* Added by js/main.js once the fade above has finished. Without this the
   preloader stayed display: flex for the life of the page: invisible, but
   still a full-screen fixed layer running 10 infinite animations. See the
   comment in js/main.js for the measurements. */
.preloader.preloader-done {
    display: none;
}

.preloader-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.preloader-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(56, 189, 248, 0.05) 45%, transparent 70%);
    filter: blur(40px);
    animation: glowBreath 3s ease-in-out infinite;
}

.preloader-radar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px dashed rgba(56, 189, 248, 0.18);
    animation: radarSpin 20s linear infinite;
}

.preloader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    max-width: 460px;
}

/* Animated Logo Container */
.preloader-logo-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.logo-pulse {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, transparent 70%);
    animation: pulseCore 2.4s ease-in-out infinite;
}

.logo-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    inset: -6px;
    border: 2px dashed rgba(56, 189, 248, 0.4);
    border-top-color: var(--gold-light);
    border-bottom-color: var(--gold);
    animation: ringRotateClockwise 8s linear infinite;
}

.ring-2 {
    inset: -18px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-left-color: rgba(56, 189, 248, 0.7);
    border-right-color: rgba(56, 189, 248, 0.7);
    animation: ringRotateCounter 6s linear infinite;
}

.preloader-logo {
    position: relative;
    width: 105px;
    height: 105px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.6));
    animation: logoFloatGlow 3s ease-in-out infinite;
}

/* Brand Typography */
.preloader-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
    line-height: 1.1;
}

.preloader-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light), #fff 80%, var(--gold));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 3.5s linear infinite;
}

.preloader-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Animated Slogan Badge */
.preloader-slogan-wrapper {
    margin-bottom: 28px;
}

.slogan-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15);
    animation: badgeFloat 3s ease-in-out infinite;
}

.slogan-shield {
    color: var(--gold-light);
    font-size: 15px;
    animation: shieldPulse 2s ease-in-out infinite;
}

.slogan-text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    background: linear-gradient(135deg, #ffffff, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glowing Progress Bar */
.preloader-progress-bar {
    width: 240px;
    height: 3px;
    background: rgba(56, 189, 248, 0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
    border-radius: 3px;
    box-shadow: 0 0 12px var(--gold);
    transition: width 0.3s ease;
}

/* Status Indicator */
.preloader-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    font-weight: 600;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
    animation: statusDotPulse 1.2s infinite;
}

/* Keyframe Animations for Loading */
@keyframes glowBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.15; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.3; }
}

@keyframes radarSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ringRotateClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringRotateCounter {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes pulseCore {
    0%, 100% { transform: scale(0.92); opacity: 0.4; }
    50% { transform: scale(1.12); opacity: 0.8; }
}

@keyframes logoFloatGlow {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 16px rgba(201, 169, 106, 0.45));
    }
    50% {
        transform: translateY(-5px) scale(1.04);
        filter: drop-shadow(0 0 28px rgba(201, 169, 106, 0.85));
    }
}

@keyframes textShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes shieldPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--gold)); }
    50% { transform: scale(1.18); filter: drop-shadow(0 0 8px var(--gold-light)); }
}

@keyframes statusDotPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.3); }
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Gold Gradient Text ===== */
.gold-gradient {
    background: linear-gradient(135deg, #7fa8d0 0%, #a6c4e2 50%, #4e7ba8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* ===== Floating Capsule Sticky Navbar (Identical to mymind.com) ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 1000;
    transition: top 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                width 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                border-radius 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                background 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(20, 28, 42, 0.08);
}

.navbar.scrolled {
    top: 18px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 980px;
    max-width: calc(100vw - 32px);
    height: 58px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(20, 28, 42, 0.09);
    box-shadow: 0px 8px 30px rgba(116, 130, 151, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    padding: 0 14px 0 20px;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1001;
}

.logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-logo:hover .logo-img {
    transform: scale(1.06);
}

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

.logo-protek {
    font-family: 'Oswald', 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #000000;
}

.logo-subtitle {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--color-tangerine-tag);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* mymind-style Nav Items with colored dots */
.nav-link {
    position: relative;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #4a5465;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    transition: color 0.25s ease, background 0.25s ease;
}

.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dot-orange { background-color: #7fa8d0; }
.dot-yellow { background-color: #c9a96a; }
.dot-pink   { background-color: #a6c4e2; }
.dot-green  { background-color: #6e98c4; }
.dot-blue   { background-color: #4e7ba8; }
.dot-purple { background-color: #8fa9c6; }

.nav-link:hover .nav-dot,
.nav-link.active .nav-dot {
    transform: scale(1.3);
    box-shadow: 0 0 8px currentColor;
}

.dot-orange { color: #7fa8d0; }
.dot-yellow { color: #c9a96a; }
.dot-pink   { color: #a6c4e2; }
.dot-green  { color: #6e98c4; }
.dot-blue   { color: #4e7ba8; }
.dot-purple { color: #8fa9c6; }

.nav-link:hover,
.nav-link.active {
    color: #000000;
    background: rgba(20, 28, 42, 0.04);
}

.nav-contact-btn {
    padding: 8px 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    background: #7fa8d0;
    border: none;
    border-radius: 24px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    margin-left: 6px;
    box-shadow: 0 4px 12px rgba(127, 168, 208, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-contact-btn:hover {
    background: #4e7ba8;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(127, 168, 208, 0.38);
}

/* ===== Hamburger Button ===== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transition: var(--transition);
    transform-origin: center;
}

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

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

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

/* ===== Mobile Menu ===== */
.mobile-menu {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    background: rgba(5, 10, 21, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px 24px 36px;
    border-bottom: 1px solid var(--border);
    z-index: 999;
    flex-direction: column;
    gap: 6px;
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
}

.mobile-link {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #94a3b8;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.mobile-link:hover {
    color: var(--gold);
    background: var(--gold-50);
    padding-left: 24px;
}

/* ===== Hero Section (Light Mint & Iris Theme) ===== */
/* ===== Hero Section (Dialog Theme) ===== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: calc(var(--nav-height) + 50px) 0 80px;
    background: var(--color-fog);
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-skyscraper-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(247, 247, 247, 0.98) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(247, 247, 247, 0.98) 100%),
                radial-gradient(ellipse at 80% 30%, rgba(127, 168, 208, 0.08) 0%, transparent 70%);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
}

.hero-glow-1 {
    width: 650px;
    height: 650px;
    background: var(--color-tangerine-tag);
    top: -150px;
    right: -50px;
    animation: heroFloat 8s ease-in-out infinite;
}

.hero-glow-2 {
    width: 500px;
    height: 500px;
    background: #fad7c1;
    bottom: -100px;
    left: -100px;
    animation: heroFloat 10s ease-in-out infinite reverse;
}

.hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(20, 28, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 28, 42, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.hero-ambient-radar {
    position: absolute;
    right: 18%;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
}

.radar-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(127, 168, 208, 0.2);
}

.rc-1 {
    inset: 30px;
}

.rc-2 {
    inset: 80px;
}

.radar-dot-gold {
    position: absolute;
    top: 42%;
    left: 48%;
    width: 7px;
    height: 7px;
    background: var(--color-tangerine-tag);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--color-tangerine-tag);
    animation: blipPulse 2s infinite;
}

.hero-container-left {
    position: relative;
    z-index: 5;
    max-width: 820px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', monospace;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-tangerine-tag);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.kicker-icon {
    font-size: 14px;
    color: var(--color-tangerine-tag);
}

.hero-main-title {
    font-family: 'Oswald', 'Barlow Condensed', sans-serif;
    font-size: clamp(52px, 8.5vw, 92px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 26px;
    display: flex;
    flex-direction: column;
}

.title-white {
    color: #000000;
}

.title-gold {
    color: var(--color-tangerine-tag);
}

.hero-subtitle {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--color-graphite);
    max-width: 620px;
    margin-bottom: 38px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.btn-hero-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--color-tangerine-tag);
    color: #000000;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 28px;
    text-transform: uppercase;
    transition: var(--transition);
    border: none;
    box-shadow: rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.02) 0px 2px 4px;
}

.btn-hero-gold:hover {
    background: #a6c4e2;
    transform: translateY(-3px) scale(1.02);
    box-shadow: rgba(127, 168, 208, 0.35) 0px 8px 22px;
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #ffffff;
    color: #000000;
    border: 1px solid rgba(20, 28, 42, 0.15);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 28px;
    text-transform: uppercase;
    transition: var(--transition);
}

.btn-hero-outline:hover {
    background: #ffffff;
    border-color: #000000;
    color: #000000;
    transform: translateY(-3px) scale(1.02);
    box-shadow: rgba(20, 28, 42, 0.12) 0px 8px 20px;
}

.hero-compliance-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.comp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid var(--warm-sand);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--aubergine);
    font-family: monospace;
    letter-spacing: 1px;
    box-shadow: var(--shadow-sm);
}

.comp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--iris);
    box-shadow: 0 0 6px var(--iris);
}

.comp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px var(--gold);
}

/* ===== Buttons Common ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: inherit;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-tangerine-tag);
    color: #000000;
    border: none;
    border-radius: 28px;
    font-weight: 600;
    box-shadow: rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.02) 0px 2px 4px;
}

.btn-primary:hover {
    background: #a6c4e2;
    transform: translateY(-2px);
    box-shadow: rgba(127, 168, 208, 0.35) 0px 6px 18px;
}

/* ===== Scroll Indicator ===== */
.scroll-indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s ease infinite;
}

.scroll-arrow {
    width: 18px;
    height: 18px;
    border-right: 2px solid var(--color-tangerine-tag);
    border-bottom: 2px solid var(--color-tangerine-tag);
    transform: rotate(45deg);
}

/* ===== Section Styles ===== */
.section {
    padding: 90px 0;
    position: relative;
}

.about-section { background: var(--bg-primary); }
.whychoose-section { background: var(--bg-secondary); }
.solutions-section { background: var(--bg-primary); }
.training-section {
    background: var(--bg-primary);
    padding: 80px 0;
}
.leadership-section { background: var(--bg-secondary); }
.clients-section { background: var(--bg-primary); }
.registrations-section { background: var(--bg-secondary); }
.contact-section { background: var(--bg-primary); }

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-tag {
    display: inline-block;
    padding: 5px 16px;
    background: #ffffff;
    border: 1px solid rgba(20, 28, 42, 0.09);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-stone);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.section-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #000000;
}

.section-desc {
    font-size: 15.5px;
    color: var(--color-stone);
    max-width: 640px;
    margin: 16px auto 0;
    line-height: 1.7;
}

/* ===== About Section ===== */
.about-split-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: start;
}

.about-headline {
    font-family: 'Oswald', 'Barlow Condensed', sans-serif;
    font-size: clamp(38px, 5.5vw, 64px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.head-white {
    color: #000000;
}

.head-gold {
    color: var(--color-tangerine-tag);
}

.about-gold-line {
    width: 65px;
    height: 3px;
    background: var(--color-tangerine-tag);
    border-radius: 2px;
    margin-bottom: 28px;
}

/* About collage. Sizes are aspect ratios rather than fixed pixel
   heights: the brief specifies proportions (670x350, 325x180), and a
   ratio holds those at any column width instead of only at 670px.
   Desktop:  IMAGE 1 full width, then IMAGE 2 | IMAGE 3 side by side.
   Mobile:   all three stacked full width - see the 767px block below. */
.about-collage {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.collage-top {
    width: 100%;
    /* 670 x 350 */
    aspect-ratio: 1.9;
    border-radius: 16px;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: rgba(20, 28, 42, 0.08) 0px 4px 12px;
}
.collage-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.collage-item {
    /* 325 x 180 */
    aspect-ratio: 1.8;
    border-radius: 16px;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: rgba(20, 28, 42, 0.08) 0px 4px 12px;
}
/* ------------------------------------------------------------
   Phones: stack all three, full width.
   Side by side, IMAGE 2 and 3 would each get roughly 160px. That
   is too narrow for IMAGE 2 in particular - it holds a supervisor
   plus eight guards across a 2.09:1 frame, and at half width the
   faces stop reading. Full width also lets IMAGE 3 keep both the
   CCTV wall and the operator in shot.
   Ratios follow the brief: IMAGE 1 at 55-60% of its width, the
   other two at 50-55%.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .about-collage {
        gap: 14px;
    }
    .collage-top {
        /* ~360 x 207 */
        aspect-ratio: 1.74;
    }
    .collage-bottom {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .collage-item {
        /* ~360 x 195 */
        aspect-ratio: 1.85;
    }
}
.collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.collage-top:hover .collage-img,
.collage-item:hover .collage-img {
    transform: scale(1.04);
}

.about-text-group p {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--color-graphite);
    margin-bottom: 20px;
}

.about-text-group p:last-child {
    margin-bottom: 0;
}

.mission-box {
    margin-top: 32px;
    padding: 26px 30px;
    background: #ffffff;
    border: 1px solid rgba(20, 28, 42, 0.09);
    border-left: 3.5px solid var(--color-tangerine-tag);
    border-radius: 0 16px 16px 0;
    box-shadow: rgba(20, 28, 42, 0.06) 0px 2px 8px;
}

.mission-tag {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--color-tangerine-tag);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: monospace;
}

.mission-box p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--color-midnight-ink);
    margin-bottom: 0;
}

.mission-quote-box {
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(127, 168, 208, 0.06);
    border-left: 3.5px solid var(--color-tangerine-tag);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    font-style: italic;
    color: var(--color-graphite);
}

.quote-icon {
    font-size: 16px;
    color: var(--color-tangerine-tag);
    flex-shrink: 0;
}

/* ===== Benefits Grid (Why Choose Us) ===== */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 1050px;
    margin: 0 auto;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.benefit-item:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    transform: translateX(6px);
}

.benefit-item i {
    color: var(--gold);
    font-size: 18px;
    flex-shrink: 0;
}

.benefit-item span {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===== Solutions Grid ===== */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.solution-card {
    padding: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.solution-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: var(--transition);
}

.solution-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
    box-shadow: var(--shadow-gold);
}

.solution-card:hover::after {
    opacity: 1;
}

.solution-icon {
    width: 56px;
    height: 56px;
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: var(--transition);
}

.solution-card:hover .solution-icon {
    background: var(--gold-200);
    border-color: var(--gold);
}

.solution-icon i {
    font-size: 24px;
    color: var(--gold);
}

.solution-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.solution-card p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
}

/* ===== Tech Section ===== */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 18px;
}

.tech-anim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.tech-anim-card:hover {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(201, 169, 106, 0.25);
    background: #151e30;
}

/* Icon Wrap Container */
.tech-icon-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.tech-icon {
    width: 52px;
    height: 52px;
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.tech-anim-card:hover .tech-icon {
    background: var(--gold-200);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(201, 169, 106, 0.4);
}

.tech-icon i {
    font-size: 22px;
    color: var(--gold);
    transition: var(--transition);
}

.tech-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    transition: var(--transition);
}

.tech-anim-card:hover .tech-label {
    color: var(--gold);
}

.tech-sublabel {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ===================================================
   16 LIVE REAL-WORLD BEHAVIOR ANIMATIONS
   =================================================== */

/* 1. Walkie-Talkie Radio Waves */
.radio-waves {
    position: absolute;
    top: -2px;
    right: 2px;
    width: 24px;
    height: 24px;
    z-index: 3;
    pointer-events: none;
}

.radio-waves .wave {
    position: absolute;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    opacity: 0;
}

.wave-1 { width: 8px; height: 8px; top: 8px; right: 8px; animation: radioWave 1.8s infinite 0s; }
.wave-2 { width: 14px; height: 14px; top: 5px; right: 5px; animation: radioWave 1.8s infinite 0.4s; }
.wave-3 { width: 20px; height: 20px; top: 2px; right: 2px; animation: radioWave 1.8s infinite 0.8s; }

.status-led {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 4;
}

.led-green {
    background: #5c9c86;
    box-shadow: 0 0 8px #5c9c86;
    animation: ledFlash 1.5s infinite;
}

@keyframes radioWave {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes ledFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.8); }
}

/* 2. ADDA App Mobile Notification */
.app-notif {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c4655f;
    border: 2px solid #050a15;
    box-shadow: 0 0 8px #c4655f;
    z-index: 4;
    animation: notifPop 2s ease-in-out infinite;
}

.tech-anim-card[data-tech="adda"] .tech-icon i {
    animation: phoneVibe 3s ease-in-out infinite;
}

@keyframes notifPop {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.35); }
    30% { transform: scale(0.9); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}

@keyframes phoneVibe {
    0%, 70%, 100% { transform: rotate(0); }
    75% { transform: rotate(-8deg) scale(1.05); }
    80% { transform: rotate(8deg) scale(1.05); }
    85% { transform: rotate(-6deg); }
    90% { transform: rotate(6deg); }
    95% { transform: rotate(0); }
}

/* 3. MyGate Barrier & Access */
.gate-barrier {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.barrier-arm {
    position: absolute;
    bottom: 12px;
    left: 8px;
    width: 32px;
    height: 3px;
    background: repeating-linear-gradient(90deg, #c4655f 0px, #c4655f 6px, #fff 6px, #fff 12px);
    border-radius: 2px;
    transform-origin: left center;
    animation: barrierLift 3.2s ease-in-out infinite;
}

.access-pass {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5c9c86;
    color: #fff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: passGranted 3.2s ease-in-out infinite;
}

@keyframes barrierLift {
    0%, 35%, 100% { transform: rotate(0deg); }
    50%, 85% { transform: rotate(-55deg); }
}

@keyframes passGranted {
    0%, 40%, 90%, 100% { opacity: 0; transform: scale(0.5); }
    50%, 80% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px #5c9c86; }
}

/* 4. CCTV Live Sweep & REC */
.cctv-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.tech-anim-card[data-tech="cctv"] .tech-icon i {
    transform-origin: 30% 50%;
    animation: cctvPan 4s ease-in-out infinite;
}

.cctv-rec {
    position: absolute;
    top: 4px;
    right: 2px;
    font-size: 8px;
    font-weight: 800;
    color: #c4655f;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,0.6);
    padding: 1px 4px;
    border-radius: 3px;
}

.rec-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c4655f;
    box-shadow: 0 0 6px #c4655f;
    animation: recBlink 1s infinite;
}

.cctv-cone {
    position: absolute;
    bottom: 2px;
    right: 4px;
    width: 24px;
    height: 18px;
    background: radial-gradient(ellipse at top left, rgba(201, 169, 106, 0.4), transparent 70%);
    clip-path: polygon(0 0, 100% 40%, 60% 100%);
    animation: cctvConeSweep 4s ease-in-out infinite;
}

@keyframes cctvPan {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(20deg); }
}

@keyframes cctvConeSweep {
    0%, 100% { transform: rotate(-15deg); opacity: 0.3; }
    50% { transform: rotate(20deg); opacity: 0.8; }
}

@keyframes recBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* 5. Biometric Laser Scanner */
.laser-scanner {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.laser-beam {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #5c9c86;
    box-shadow: 0 0 10px #5c9c86, 0 0 20px #5c9c86;
    animation: laserScan 2s ease-in-out infinite;
}

@keyframes laserScan {
    0% { top: 10%; opacity: 0.2; }
    50% { top: 85%; opacity: 1; }
    100% { top: 10%; opacity: 0.2; }
}

/* 6. RFID NFC Wave Ripple */
.nfc-signal {
    position: absolute;
    inset: -6px;
    pointer-events: none;
    z-index: 1;
}

.nfc-pulse {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--gold);
    border-radius: var(--radius-md);
    opacity: 0;
}

.pulse-1 { animation: nfcRipple 2.2s ease-out infinite 0s; }
.pulse-2 { animation: nfcRipple 2.2s ease-out infinite 1.1s; }

.tech-anim-card[data-tech="rfid"] .tech-icon i {
    animation: rfidTap 2.2s ease-in-out infinite;
}

@keyframes nfcRipple {
    0% { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

@keyframes rfidTap {
    0%, 100% { transform: translateY(0); }
    15% { transform: translateY(-4px) scale(1.1); color: var(--gold-light); }
    30% { transform: translateY(0); }
}

/* 7. Drone Flight & Searchlight */
.drone-flight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.tech-anim-card[data-tech="drone"] .tech-icon i {
    animation: droneHover 2.4s ease-in-out infinite;
}

.rotor-blur {
    position: absolute;
    top: 10px;
    width: 14px;
    height: 2px;
    background: rgba(201, 169, 106, 0.7);
    border-radius: 2px;
    animation: rotorSpin 0.2s linear infinite;
}

.rotor-left { left: 8px; }
.rotor-right { right: 8px; }

.searchlight-beam {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 14px;
    background: radial-gradient(ellipse at top, rgba(201, 169, 106, 0.5), transparent 70%);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
    animation: lightSweep 2.4s ease-in-out infinite;
}

@keyframes droneHover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes rotorSpin {
    from { transform: scaleX(1); }
    to { transform: scaleX(0.2); }
}

@keyframes lightSweep {
    0%, 100% { transform: translateX(-50%) rotate(-10deg); }
    50% { transform: translateX(-50%) rotate(10deg); }
}

/* 8. HHMD Metal Detector Sweep */
.metal-detect {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.metal-sweep {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), #c4655f, transparent);
    animation: metalWandSweep 2.5s ease-in-out infinite;
}

.tech-anim-card[data-tech="hhmd"]:hover .metal-sweep {
    background: linear-gradient(90deg, transparent, #c4655f, #c4655f, transparent);
    box-shadow: 0 0 10px #c4655f;
}

@keyframes metalWandSweep {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(34px); opacity: 1; }
}

/* 9. Rapiscan X-Ray Tunnel */
.xray-tunnel {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.conveyor-line {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 4px, transparent 4px, transparent 8px);
    animation: conveyorSlide 1.2s linear infinite;
}

.xray-laser {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #6ea8c4;
    box-shadow: 0 0 10px #6ea8c4, 0 0 20px #6ea8c4;
    animation: xrayScan 2.4s ease-in-out infinite;
}

@keyframes conveyorSlide {
    from { background-position: 0 0; }
    to { background-position: 16px 0; }
}

@keyframes xrayScan {
    0%, 100% { left: 15%; opacity: 0.4; }
    50% { left: 80%; opacity: 1; }
}

/* 10. GPS Tracking Radar */
.radar-ping {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ping-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #5c9c86;
    border-radius: 50%;
    opacity: 0;
}

.ring-a { width: 30px; height: 30px; animation: radarRing 2s ease-out infinite 0s; }
.ring-b { width: 50px; height: 50px; animation: radarRing 2s ease-out infinite 1s; }

.target-blip {
    position: absolute;
    top: 40%;
    right: 25%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4655f;
    box-shadow: 0 0 8px #c4655f;
    animation: blipPulse 1s infinite;
}

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

@keyframes blipPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.5); }
}

/* 11. Panic Alarm Siren */
.alarm-strobe {
    position: absolute;
    inset: -4px;
    pointer-events: none;
    z-index: 1;
}

.strobe-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: radial-gradient(circle, rgba(196, 101, 95, 0.4) 0%, transparent 70%);
    opacity: 0;
    animation: strobeFlash 1.6s infinite;
}

.tech-anim-card[data-tech="alarm"] .tech-icon i {
    animation: bellRattle 1.6s ease-in-out infinite;
}

@keyframes bellRattle {
    0%, 60%, 100% { transform: rotate(0); color: var(--gold); }
    65% { transform: rotate(-14deg) scale(1.1); color: #c4655f; }
    70% { transform: rotate(14deg) scale(1.1); color: #c4655f; }
    75% { transform: rotate(-10deg); }
    80% { transform: rotate(10deg); }
    85% { transform: rotate(0); }
}

@keyframes strobeFlash {
    0%, 60%, 100% { opacity: 0; transform: scale(0.95); }
    65%, 85% { opacity: 1; transform: scale(1.15); }
}

/* 12. Guardso Terminal Matrix */
.code-matrix {
    position: absolute;
    bottom: 6px;
    left: 10px;
    right: 10px;
    height: 4px;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.matrix-line {
    display: block;
    height: 2px;
    background: #5c9c86;
    border-radius: 1px;
    opacity: 0.8;
}

.line-1 { width: 60%; animation: codeFlow 1.8s infinite 0s; margin-bottom: 1px; }
.line-2 { width: 85%; animation: codeFlow 1.8s infinite 0.6s; }

@keyframes codeFlow {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* 13. Incident App Check Stamp & Cloud */
.incident-stamp {
    position: absolute;
    top: 4px;
    right: 4px;
    pointer-events: none;
    z-index: 3;
}

.sync-cloud {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px #3b82f6;
    animation: cloudSync 2.5s ease-in-out infinite;
}

@keyframes cloudSync {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-4px) scale(1.15); opacity: 1; }
}

/* 14. Video Door Phone Intercom */
.video-intercom {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 3;
}

.video-frame {
    position: absolute;
    inset: 2px;
    border: 1px dashed rgba(201, 169, 106, 0.4);
    border-radius: 6px;
    animation: videoBorderPulse 2s infinite;
}

@keyframes videoBorderPulse {
    0%, 100% { opacity: 0.3; border-color: rgba(201, 169, 106, 0.4); }
    50% { opacity: 1; border-color: #6ea8c4; box-shadow: inset 0 0 8px rgba(110, 168, 196, 0.3); }
}

/* 15. Thermal Scanner Heatmap Gradient */
.thermal-heat {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.heat-grad {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(196, 101, 95, 0.35) 0%, rgba(245, 158, 11, 0.25) 40%, rgba(59, 130, 246, 0.15) 70%, transparent 100%);
    animation: thermalPulse 3s ease-in-out infinite;
}

.temp-readout {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 8px;
    font-weight: 800;
    color: #c9a96a;
    background: rgba(0,0,0,0.7);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
    animation: tempTick 3s infinite;
}

@keyframes thermalPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 0.9; transform: scale(1.1); }
}

@keyframes tempTick {
    0%, 100% { color: #5c9c86; }
    50% { color: #c4655f; }
}

/* 16. Motion Sensor PIR Cones */
.pir-motion {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.pir-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid var(--gold-light);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.beam-1 { width: 34px; height: 34px; animation: pirPulse 2.4s ease-out infinite 0s; }
.beam-2 { width: 54px; height: 54px; animation: pirPulse 2.4s ease-out infinite 1.2s; }

.tech-anim-card[data-tech="motion"] .tech-icon i {
    animation: lightBulbFlash 2.4s ease-in-out infinite;
}

@keyframes pirPulse {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}

@keyframes lightBulbFlash {
    0%, 70%, 100% { color: var(--gold); filter: drop-shadow(0 0 0 transparent); }
    75%, 90% { color: #e8dcb8; filter: drop-shadow(0 0 12px #e8dcb8); }
}

/* ===== Tactical Sectors & Incident Map Section ===== */
.tactical-telemetry-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 28px;
    background: rgba(10, 17, 40, 0.85);
    border: 1px solid rgba(201, 169, 106, 0.25);
    border-radius: var(--radius-md);
    margin-bottom: 36px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.telemetry-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.telemetry-label {
    color: var(--text-muted);
}

.telemetry-val {
    font-weight: 800;
    font-family: 'Inter', monospace;
}

.text-green { color: #5c9c86; }
.text-cyan { color: #6ea8c4; }
.text-gold { color: var(--gold-light); }

.telemetry-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5c9c86;
    box-shadow: 0 0 10px #5c9c86;
    animation: statusDotPulse 1.2s infinite;
}

.telemetry-divider {
    width: 1px;
    height: 24px;
    background: rgba(201, 169, 106, 0.15);
}

/* Tactical Grid & Network Canvas */
.tactical-grid-wrapper {
    position: relative;
    padding: 10px;
    border-radius: var(--radius-xl);
    background: radial-gradient(ellipse at center, rgba(10, 20, 45, 0.5) 0%, transparent 80%);
}

.sector-network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tactical-sectors-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 18px;
}

.tactical-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 14px 22px;
    background: rgba(13, 20, 36, 0.9);
    border: 1px solid rgba(201, 169, 106, 0.18);
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.tactical-card:hover,
.tactical-card.active-corridor {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 0 25px rgba(201, 169, 106, 0.3), inset 0 0 15px rgba(201, 169, 106, 0.1);
    background: rgba(20, 30, 52, 0.95);
}

.tactical-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    opacity: 0.5;
    transition: var(--transition);
}

.tactical-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    opacity: 0.5;
    transition: var(--transition);
}

.tactical-card:hover::before,
.tactical-card:hover::after {
    opacity: 1;
    width: 18px;
    height: 18px;
    border-color: var(--gold-light);
}

.card-radar-blip {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5c9c86;
    box-shadow: 0 0 8px #5c9c86;
    animation: blipPulse 1.5s infinite;
}

.sector-code {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--gold);
    background: rgba(201, 169, 106, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(201, 169, 106, 0.25);
    font-family: 'Inter', monospace;
}

.sector-icon {
    width: 50px;
    height: 50px;
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.tactical-card:hover .sector-icon {
    background: var(--gold-200);
    border-color: var(--gold);
    transform: scale(1.08);
}

.sector-icon i {
    font-size: 20px;
    color: var(--gold);
}

.sector-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    transition: var(--transition);
}

.tactical-card:hover .sector-name {
    color: var(--gold-light);
}

.sector-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    color: #5c9c86;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.status-indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5c9c86;
    box-shadow: 0 0 6px #5c9c86;
    animation: statusDotPulse 1.2s infinite;
}

/* ===== mymind Inspired Interactive Board Container ===== */
.mymind-board-frame {
    position: relative;
    background: #f7f9fc;
    border: 1px solid rgba(20, 28, 42, 0.09);
    border-top: 3px solid var(--color-tangerine-tag);
    border-radius: 20px;
    padding: 36px 36px 44px 54px;
    box-shadow: rgba(127, 168, 208, 0.16) 0px 35px 80px -25px, rgba(20, 28, 42, 0.05) 0px 10px 30px -10px;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Left Vertical Tab Badge (Identical to mymind 🔗 my mind tab) */
.board-side-tab {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #94a3b8;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.board-side-tab i {
    color: var(--color-tangerine-tag);
    font-size: 12px;
    transform: rotate(90deg);
}

/* Board Header with Search & Interactive Filter Pills */
.board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(20, 28, 42, 0.08);
    flex-wrap: wrap;
    gap: 16px;
}

.board-search-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.board-search-icon {
    font-size: 20px;
    color: #94a3b8;
}

.board-search-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 400;
    color: #475569;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
}

.board-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--color-tangerine-tag);
    margin-left: 6px;
    animation: caretBlink 1s infinite;
}

@keyframes caretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.board-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.board-pill {
    padding: 6px 16px;
    background: #ffffff;
    border: 1px solid rgba(20, 28, 42, 0.1);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.board-pill:hover,
.board-pill.active {
    background: var(--color-tangerine-tag);
    border-color: var(--color-tangerine-tag);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(127, 168, 208, 0.3);
}

/* ===== Masonry Gallery Grid (4 Columns, Multi-Height Cards) ===== */
.mymind-masonry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.masonry-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Base Card Styling */
.mymind-card {
    background: #ffffff;
    border: 1px solid rgba(20, 28, 42, 0.08);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.4s ease,
                filter 0.4s ease,
                border-color 0.3s ease;
    will-change: transform, box-shadow;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* mymind Signature Focus Pop-out: Hovered card pops up while siblings gently soften */
.mymind-masonry-grid:hover .mymind-card:not(:hover) {
    opacity: 0.75;
    transform: scale(0.985);
    filter: blur(0.2px);
}

.mymind-card:hover {
    opacity: 1 !important;
    transform: translateY(-8px) scale(1.025) !important;
    filter: none !important;
    z-index: 20;
    border-color: var(--color-tangerine-tag);
    box-shadow: rgba(127, 168, 208, 0.35) 0px 22px 45px -10px, rgba(20, 28, 42, 0.12) 0px 10px 20px -8px;
}

/* 1. Quote Style Card (Top Left) */
.card-quote-style {
    background: #ffffff;
    padding: 28px 24px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-quote-mark {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 54px;
    line-height: 0.8;
    color: var(--color-tangerine-tag);
    margin-bottom: 12px;
}

.card-quote-text {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.card-quote-author {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #94a3b8;
    text-transform: uppercase;
}

/* 2. Note Style Card */
.card-note-style {
    background: #fdfdf9;
    border: 1px solid rgba(226, 232, 240, 0.9);
    padding: 20px;
}

.card-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.note-pin {
    color: var(--color-tangerine-tag);
    font-size: 11px;
}

.note-time {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748b;
}

.card-note-text {
    font-family: 'Inter', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #334155;
}

/* 3. Quick Tip Micro Card */
.card-quick-tip {
    background: #ffffff;
    padding: 16px 20px;
    border-left: 3px solid var(--color-tangerine-tag);
}

.quick-tip-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-tangerine-tag);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.quick-tip-text {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
}

/* 4. Yellow Highlighter Text Card */
.card-highlight-style {
    background: #fffbeb;
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 22px;
}

.highlight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #9c7f45;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.highlight-body {
    font-size: 13.5px;
    line-height: 1.8;
    color: #1e293b;
}

.mymind-hl {
    background: linear-gradient(120deg, rgba(254, 240, 138, 0.95) 0%, rgba(253, 224, 71, 0.95) 100%);
    padding: 2px 6px;
    border-radius: 4px;
    color: #0f172a;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* 5. Tactical Radar / Clock Card (Like Braun Clock card) */
.card-compass-style {
    background: #111827;
    color: #ffffff;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tactical-clock-face {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #1f2937;
    border: 2px solid rgba(127, 168, 208, 0.4);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 16px rgba(127, 168, 208, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
}

.clock-radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(127, 168, 208, 0.5) 0deg, transparent 60deg, transparent 360deg);
    animation: radarClockRotate 4s linear infinite;
}

@keyframes radarClockRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.clock-crosshair-h {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(127, 168, 208, 0.25);
}

.clock-crosshair-v {
    position: absolute;
    height: 100%;
    width: 1px;
    background: rgba(127, 168, 208, 0.25);
}

.clock-center-dot {
    position: relative;
    z-index: 5;
    width: 8px;
    height: 8px;
    background: var(--color-tangerine-tag);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-tangerine-tag);
}

.clock-brand {
    position: absolute;
    top: 24px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    z-index: 5;
}

.clock-sub {
    position: absolute;
    bottom: 24px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-tangerine-tag);
    z-index: 5;
}

.card-compass-style h3 {
    color: #ffffff !important;
    font-size: 15px !important;
    margin-top: 10px;
}

.card-compass-style p {
    color: #94a3b8 !important;
    font-size: 12.5px !important;
}

/* Image Wrapping & Badges */
.training-img-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #e2e8f0;
}

.training-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.mymind-card:hover .training-img {
    transform: scale(1.07);
}

.training-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(127, 168, 208, 0.35);
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-tangerine-tag);
    backdrop-filter: blur(8px);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.mymind-card:hover .training-tag {
    background: var(--color-tangerine-tag);
    color: #ffffff;
}

/* Corner Price/Ref Tag (Like $2890 badge on Rimowa card) */
.card-price-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    font-family: 'Inter', monospace;
    font-size: 10.5px;
    font-weight: 800;
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.mymind-card:hover .card-price-badge {
    transform: translateY(-2px) scale(1.05);
    background: var(--color-tangerine-tag);
    color: #ffffff;
}

/* Video Center Play Button Overlay (Like vintage car video card) */
.card-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-tangerine-tag);
    font-size: 17px;
    padding-left: 3px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), background 0.3s ease, color 0.3s ease;
}

.play-pulse-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(127, 168, 208, 0.5);
    animation: playPulse 2s infinite;
}

@keyframes playPulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.mymind-card:hover .card-play-overlay {
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--color-tangerine-tag);
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(127, 168, 208, 0.45);
}

.card-live-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(196, 101, 95, 0.9);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 4px;
    backdrop-filter: blur(6px);
}

.live-dot {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    animation: liveBlink 1s infinite;
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Training Card Text Info */
.training-info {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
}

.training-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    line-height: 1.35;
}

.training-info p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* ===== Training Section ===== */
.training-content {
    text-align: center;
    padding: 72px 48px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

.training-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--gold-50) 0%, transparent 70%);
    pointer-events: none;
}

.training-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: 50%;
    margin-bottom: 24px;
}

.training-badge i {
    font-size: 34px;
    color: var(--color-tangerine-tag);
}

.training-quote {
    position: relative;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #000000;
}

.training-subquote {
    position: relative;
    font-size: 16px;
    color: var(--color-stone);
    margin-top: 14px;
}

.training-line {
    position: relative;
    width: 80px;
    height: 3px;
    background: var(--color-tangerine-tag);
    border-radius: 2px;
    margin: 28px auto 0;
}

/* ===== Leadership Section ===== */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.leader-card {
    padding: 40px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.leader-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.leader-avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    padding: 3px;
    background: var(--color-tangerine-tag);
    box-shadow: 0 6px 20px rgba(127, 168, 208, 0.25);
    transition: var(--transition);
}

.leader-card:hover .leader-avatar {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(127, 168, 208, 0.4);
}

.leader-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    background: #e2e8f0;
}

.leader-avatar span {
    font-size: 22px;
    font-weight: 800;
    color: #000000;
    letter-spacing: 1px;
}

.leader-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 6px;
}

.leader-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-tangerine-tag);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.leader-card p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--color-graphite);
}

/* ===== Management Team ===== */
.mgmt-section {
    margin-top: 60px;
}

.mgmt-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 32px;
}

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

.mgmt-card {
    padding: 24px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition);
}

.mgmt-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    background: var(--bg-card-hover);
}

.mgmt-avatar {
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    padding: 2.5px;
    background: var(--color-tangerine-tag);
    box-shadow: 0 4px 14px rgba(127, 168, 208, 0.2);
    transition: var(--transition);
}

.mgmt-card:hover .mgmt-avatar {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(127, 168, 208, 0.35);
}

.mgmt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    background: #e2e8f0;
}

.mgmt-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    background: var(--gold-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mgmt-icon i {
    font-size: 18px;
    color: var(--color-tangerine-tag);
}

.mgmt-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 6px;
}

.mgmt-card p {
    font-size: 12.5px;
    color: var(--color-stone);
}

/* ===== Clients Section ===== */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.client-card-link {
    display: block;
    text-decoration: none;
}

.client-card-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(20, 28, 42, 0.09);
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.client-card-link:hover .client-card-v2 {
    border-color: var(--color-tangerine-tag);
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    background: #ffffff;
}

.cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cc-code {
    padding: 4px 10px;
    background: rgba(127, 168, 208, 0.12);
    border: 1px solid rgba(127, 168, 208, 0.3);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    color: var(--color-tangerine-tag);
    letter-spacing: 1.5px;
    font-family: 'Inter', monospace;
}

.cc-zone {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-stone);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cc-zone i {
    color: var(--color-tangerine-tag);
    font-size: 11px;
}

.cc-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5c9c86;
    box-shadow: 0 0 8px #5c9c86;
    animation: statusDotPulse 1.4s infinite;
}

.cc-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cc-icon {
    width: 44px;
    height: 44px;
    background: rgba(127, 168, 208, 0.1);
    border: 1px solid rgba(127, 168, 208, 0.25);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.client-card-link:hover .cc-icon {
    background: var(--color-tangerine-tag);
    border-color: var(--color-tangerine-tag);
}

.client-card-link:hover .cc-icon i {
    color: #000000;
}

.cc-icon i {
    font-size: 18px;
    color: var(--color-tangerine-tag);
    transition: var(--transition);
}

.cc-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 6px;
    line-height: 1.3;
    transition: var(--transition);
}

.client-card-link:hover .cc-info h4 {
    color: var(--color-tangerine-tag);
}

.cc-loc {
    font-size: 13px;
    color: var(--color-stone);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-loc i {
    color: var(--color-tangerine-tag);
    font-size: 12px;
}

.cc-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #f4f7fb;
    border: 1px solid rgba(20, 28, 42, 0.08);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-graphite);
}

.cc-pill i {
    color: var(--color-tangerine-tag);
    font-size: 10px;
}

.cc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed rgba(20, 28, 42, 0.09);
    margin-top: 2px;
}

.cc-status {
    font-size: 11px;
    font-weight: 800;
    color: #5c9c86;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cc-status i {
    font-size: 11px;
}

.cc-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-tangerine-tag);
    letter-spacing: 0.5px;
    transition: var(--transition);
}

.client-card-link:hover .cc-nav {
    color: #4e7ba8;
    transform: translateX(4px);
}

/* ===== Compliance Section ===== */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.compliance-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.compliance-card:hover {
    border-color: var(--color-tangerine-tag);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.compliance-icon {
    width: 48px;
    height: 48px;
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compliance-icon i {
    font-size: 20px;
    color: var(--color-tangerine-tag);
}

.compliance-meta {
    display: flex;
    flex-direction: column;
}

.compliance-label {
    font-size: 12px;
    color: var(--color-stone);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.compliance-value {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    font-family: 'Inter', monospace;
}

/* ===== Contact Section ===== */
.contact-cta {
    text-align: center;
    padding: 64px 48px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.contact-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-tangerine-tag);
}

.contact-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, var(--gold-50), transparent 60%);
    pointer-events: none;
}

.contact-cta h2 {
    position: relative;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: #000000;
    margin-bottom: 16px;
}

.contact-cta p {
    position: relative;
    font-size: 16px;
    color: var(--color-stone);
    margin-bottom: 36px;
    line-height: 1.7;
}

.contact-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
}

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

.contact-card {
    padding: 36px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
}

.contact-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.contact-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.contact-card:hover .contact-icon {
    background: var(--gold-200);
    border-color: var(--color-tangerine-tag);
}

.contact-icon i {
    font-size: 20px;
    color: var(--color-tangerine-tag);
}

.contact-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.contact-card a,
.contact-card p {
    font-size: 14px;
    color: var(--color-graphite);
    line-height: 1.6;
    word-break: break-word;
}

.contact-card a:hover {
    color: var(--color-tangerine-tag);
}

/* ===== Footer ===== */
.footer {
    background: #ffffff;
    padding: 60px 0 32px;
    border-top: 1px solid var(--border);
}

.emergency-section {
    text-align: center;
    margin-bottom: 48px;
}

.emergency-section h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.emergency-section h3 i {
    font-size: 20px;
    color: var(--color-tangerine-tag);
}

.emergency-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.emergency-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--color-fog);
    border: 1px solid rgba(20, 28, 42, 0.08);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.emergency-item:hover {
    border-color: var(--color-tangerine-tag);
    transform: translateY(-2px);
}

.emergency-item i {
    color: var(--color-tangerine-tag);
    font-size: 14px;
    flex-shrink: 0;
}

.emergency-label {
    font-size: 12px;
    color: var(--color-stone);
    font-weight: 500;
}

.emergency-item a {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-tangerine-tag);
}

.emergency-item a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

/* ===== PRESERVED DARK COMMAND CENTER SECTIONS ===== */
.tech-section,
.sectors-section {
    background: #141c2a !important;
    color: #ffffff !important;
}

.tech-section .section-title,
.sectors-section .section-title {
    color: #ffffff !important;
}

.tech-section .section-desc,
.sectors-section .section-desc {
    color: #949494 !important;
}

.tech-section .section-tag,
.sectors-section .section-tag {
    background: rgba(127, 168, 208, 0.15) !important;
    border-color: rgba(127, 168, 208, 0.35) !important;
    color: #7fa8d0 !important;
    box-shadow: none !important;
}

.tech-anim-card,
.tactical-card {
    background: #27405f !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.tech-anim-card:hover,
.tactical-card:hover {
    border-color: #7fa8d0 !important;
    background: #2b2b3d !important;
    box-shadow: 0 8px 30px rgba(127, 168, 208, 0.25) !important;
}

.tech-icon,
.sector-icon {
    background: rgba(127, 168, 208, 0.12) !important;
    border-color: rgba(127, 168, 208, 0.28) !important;
}

.tech-icon i,
.sector-icon i {
    color: #7fa8d0 !important;
}

.tech-label,
.sector-name {
    color: #ffffff !important;
}

.tech-sublabel {
    color: #949494 !important;
}

.tactical-telemetry-bar {
    background: rgba(39, 64, 95, 0.95) !important;
    border-color: rgba(127, 168, 208, 0.25) !important;
}

.telemetry-label {
    color: #949494 !important;
}

.sector-code {
    color: #7fa8d0 !important;
    background: rgba(127, 168, 208, 0.15) !important;
    border-color: rgba(127, 168, 208, 0.3) !important;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.footer-logo-img {
    height: 36px;
    width: auto;
}

.footer-logo span {
    font-size: 16px;
    font-weight: 700;
}

.footer-bottom p {
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== Keyframe Animations ===== */
@keyframes heroFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero entrance animations — staggered, slow, mymind-style */
.animate-fade-in {
    animation: fadeIn 1.0s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.delay-1 { animation-delay: 0.15s; opacity: 0; }
.delay-2 { animation-delay: 0.35s; opacity: 0; }
.delay-3 { animation-delay: 0.55s; opacity: 0; }
.delay-4 { animation-delay: 0.75s; opacity: 0; }
.delay-5 { animation-delay: 0.95s; opacity: 0; }

/* ================================================================
   mymind SCROLL REVEAL SYSTEM
   - Primary: fade up from 60px with scale(0.94), 1.0s ease-out-expo
   - Variants: left, right, scale-only, fade-only
   - Stagger: children auto-delay via CSS custom properties
   ================================================================ */

/* Base reveal — fade up with 3D perspective tilt (mymind style) */
.reveal {
    opacity: 0;
    transform: perspective(1200px) rotateX(8deg) translateY(60px) scale(0.95);
    transition: opacity 1.1s cubic-bezier(0.19, 1, 0.22, 1),
                transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
}

/* Directional variants */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 1.0s cubic-bezier(0.19, 1, 0.22, 1),
                transform 1.0s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 1.0s cubic-bezier(0.19, 1, 0.22, 1),
                transform 1.0s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale-only variant (for images and large blocks) */
.reveal-scale {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1),
                transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Fade-only (no movement) */
.reveal-fade {
    opacity: 0;
    transition: opacity 1.0s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity;
}

.reveal-fade.visible {
    opacity: 1;
}

/* ================================================================
   mymind CARD HOVER FOCUS SYSTEM
   When you hover over ANY card grid, the hovered card pops forward
   and all its siblings gently dim + shrink — creating a "spotlight"
   ================================================================ */

/* Solutions Grid */
.solutions-grid:hover .solution-card:not(:hover) {
    opacity: 0.65;
    transform: scale(0.97);
    filter: blur(0.3px);
}
.solution-card {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.5s ease,
                filter 0.5s ease;
}
.solution-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 10;
}

/* Leadership Grid */
.leadership-grid:hover .leader-card:not(:hover) {
    opacity: 0.65;
    transform: scale(0.97);
    filter: blur(0.3px);
}
.leader-card {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.5s ease,
                filter 0.5s ease;
}
.leader-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 10;
}

/* Clients Grid */
.clients-grid:hover .client-card:not(:hover) {
    opacity: 0.65;
    transform: scale(0.97);
    filter: blur(0.3px);
}
.client-card {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.5s ease,
                filter 0.5s ease;
}
.client-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 10;
}

/* Compliance Grid */
.compliance-grid:hover .compliance-card:not(:hover) {
    opacity: 0.65;
    transform: scale(0.97);
    filter: blur(0.3px);
}
.compliance-card {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.5s ease,
                filter 0.5s ease;
}
.compliance-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 10;
}

/* Contact Grid */
.contact-grid:hover .contact-card:not(:hover) {
    opacity: 0.65;
    transform: scale(0.97);
    filter: blur(0.3px);
}
.contact-card {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.5s ease,
                filter 0.5s ease;
}
.contact-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 10;
}

/* ================================================================
   mymind BUTTON MICRO-INTERACTIONS
   - Hover: subtle lift + shadow glow
   - Active/Press: scale(0.95) snap
   ================================================================ */
.btn {
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

.btn:active {
    transform: scale(0.95) !important;
    transition-duration: 0.1s;
}

.btn-hero-gold:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(127, 168, 208, 0.35);
}

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

/* Nav link hover underline sweep */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-tangerine-tag);
    border-radius: 1px;
    transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1),
                left 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

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

/* ================================================================
   HERO VIDEO PLACEHOLDER
   ================================================================ */
.hero-video-placeholder {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, rgba(20, 28, 42, 0.9), rgba(20, 28, 42, 0.7));
    border: 1px solid rgba(127, 168, 208, 0.25);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 32px;
    /* Was pointer, from when the frame was a click-to-play placeholder and
       later a click-to-toggle. Nothing here is clickable now, and a pointer
       cursor over dead space is a promise the page does not keep. */
    cursor: default;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.6s cubic-bezier(0.19, 1, 0.22, 1),
                border-color 0.3s ease;
}

.hero-video-placeholder:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: var(--color-tangerine-tag);
    box-shadow: 0 20px 50px rgba(127, 168, 208, 0.25);
}

.hero-video-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(127, 168, 208, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* The video itself. object-fit: cover so any future re-crop of the file
   still fills the 16/9 frame instead of letterboxing inside it.

   display: block removes the inline-element baseline gap that would
   otherwise leave a few stray pixels of the dark frame background
   showing along the bottom edge. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
    /* The wrapper already clips to its 16px radius via overflow: hidden.
       Matching it here as well stops Safari painting square video corners
       outside the rounded frame, which it does when the video gets its own
       compositing layer. */
    border-radius: inherit;
    background: #141c2a;
    pointer-events: none;
}

/* Pause / play control - visually removed on request, on both desktop and
   mobile, so nothing sits on top of the footage.

   The button is still in the DOM and still reachable, rather than deleted.
   WCAG 2.2.2 asks for a way to stop movement that runs longer than five
   seconds, and this video loops forever. Deleting the control outright
   would leave a keyboard or screen-reader user with no way to stop it at
   all. So it is clipped to a single pixel - invisible, takes no space,
   nothing painted over the video - and restores its full appearance only
   when it actually receives keyboard focus. Tabbing to it makes it appear;
   a mouse or a finger never will.

   The clip-path + 1px technique rather than display: none or
   visibility: hidden: both of those remove the element from the
   accessibility tree and make it unfocusable, which would defeat the
   entire point. */
.hero-video-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: #ffffff;
    font-size: 13px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* Keyboard focus brings the real control back. :focus-visible rather than
   :focus so a click could never surface it, only tabbing. */
.hero-video-toggle:focus-visible {
    width: 40px;
    height: 40px;
    overflow: visible;
    clip-path: none;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 23, 35, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* The frame clips to its 16px radius, so an outward outline would be
       shaved off at the corner. Inset keeps it inside the visible area. */
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* ===== Responsive: Tablets ===== */
@media (max-width: 1024px) {
    .about-split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

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

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

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

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

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

    .mymind-masonry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ===== Responsive: Mobile & Tablet Nav ===== */
@media (max-width: 1080px) {
    .nav-links,
    .nav-contact-btn {
        display: none !important;
    }

    .hamburger {
        display: flex !important;
    }

    .mobile-menu {
        display: flex;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-top: calc(var(--nav-height) + 24px);
        padding-bottom: 60px;
    }

    .hero-title {
        font-size: clamp(32px, 10vw, 52px);
        letter-spacing: -1px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 24px;
        padding: 28px 24px;
    }

    .stat-divider {
        width: 48px;
        height: 1px;
    }

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

    .sectors-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

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

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

    .mymind-board-frame {
        padding: 24px 16px 28px;
        border-radius: 16px;
    }

    .board-side-tab {
        display: none;
    }

    .mymind-masonry-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

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

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

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

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

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

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        justify-content: center;
    }

    .section {
        padding: 64px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .contact-cta {
        padding: 40px 24px;
    }

    .training-content {
        padding: 48px 24px;
    }

    .about-content p:first-child::first-letter {
        font-size: 40px;
    }

    .emergency-grid {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== Responsive: Small Mobile ===== */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sector-card {
        padding: 20px 12px;
    }

    .sector-icon {
        width: 44px;
        height: 44px;
    }

    .sector-icon i {
        font-size: 18px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 6px 14px;
    }

    .logo-protek {
        font-size: 15px;
    }

    .logo-subtitle {
        font-size: 7px;
        letter-spacing: 2px;
    }

    .logo-img {
        height: 38px;
    }
}

/* ===================================================
   LAYERED MOTION SYSTEM & CUSTOM CURSOR
   =================================================== */



/* ===== Infinite Auto-Scrolling Tech Ticker ===== */
.tech-ticker-section {
    position: relative;
    overflow: hidden;
    background: var(--deep-plum);
    border-top: 1px solid var(--periwinkle);
    border-bottom: 1px solid var(--periwinkle);
    padding: 16px 0;
    z-index: 10;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tickerLoop 32s linear infinite;
}

.tech-ticker-section:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
    white-space: nowrap;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--cream-mist);
    text-transform: uppercase;
}

.ticker-item i {
    color: var(--mint-keyhole);
    font-size: 14px;
}

.ticker-sep {
    color: var(--lavender-mist);
    font-size: 16px;
}

.ticker-item i {
    color: var(--gold);
    font-size: 14px;
}

.ticker-sep {
    color: var(--gold-dark);
    font-size: 16px;
}

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

/* ===== 3D Tilt Card Perspectives & Dynamic Glare ===== */
.solution-card,
.training-card,
.leader-card,
.client-card,
.compliance-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.7s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Hero Parallax Grid */
.hero-grid-pattern {
    transition: transform 0.2s ease-out;
}

/* ===================================================
   ACCESSIBILITY: PREFERS-REDUCED-MOTION GATING
   =================================================== */
@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;
    }

    .ticker-track {
        animation: none !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }



    .preloader {
        display: none !important;
    }

    .sector-network-canvas {
        display: none !important;
    }

    .hero-glow-1, .hero-glow-2 {
        animation: none !important;
    }
}