/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 1: FOUNDATION & PATTERNS
   Full-Spectrum Multisensory Computing Design System
   ============================================================ */

:root {
    /* Core Brand Colors */
    --primary-navy: #0a1628;
    --secondary-navy: #1a2332;
    --accent-blue: #4a90e2;
    --accent-cyan: #00d4ff;
    --accent-purple: #8b5cf6;

    /* Neural Network Gradient */
    --gradient-neural: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-cyber: linear-gradient(135deg, #00d4ff 0%, #4a90e2 100%);
    --gradient-sensory: linear-gradient(135deg, #4a90e2 0%, #8b5cf6 50%, #00d4ff 100%);

    /* Soft Backgrounds */
    --soft-gray: #f8fafc;
    --soft-blue: #f0f9ff;
    --text-dark: #1e293b;
    --text-muted: #64748b;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.18);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 8px 32px rgba(74, 144, 226, 0.25);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
}

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

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    background: var(--soft-gray);
    padding-top: 80px;
    overflow-x: hidden;
    position: relative;
}

/* Animated Background Pattern - Neural Network Particles */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 20% 30%, var(--accent-blue) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, var(--accent-cyan) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, var(--accent-purple) 1px, transparent 1px),
        radial-gradient(circle at 90% 80%, var(--accent-blue) 1px, transparent 1px);
    background-size: 100px 100px, 150px 150px, 120px 120px, 180px 180px;
    background-position: 0 0, 40px 60px, 80px 20px, 120px 100px;
    animation: particleFloat 20s ease-in-out infinite;
}

@keyframes particleFloat {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.03;
    }

    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.05;
    }
}

/* Subtle Circuit Pattern Overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.015;
    background-image:
        linear-gradient(90deg, var(--accent-blue) 1px, transparent 1px),
        linear-gradient(0deg, var(--accent-blue) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-navy);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

p {
    color: var(--text-muted);
    line-height: 1.8;
}

a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection Color */
::selection {
    background-color: var(--accent-blue);
    color: white;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

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

.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

/* Fade-in Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Floating Animation */
@keyframes float {

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

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

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

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--soft-gray);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 10px;
}

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

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 2: NAVIGATION BAR
   Glassmorphism Navigation with Midnight Blue Accent
   ============================================================ */

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

.navbar {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 1rem 0;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    border-bottom: 1px solid rgba(74, 144, 226, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Scrolled State - More Solid */
.navbar.scrolled {
    background: rgba(10, 22, 40, 0.98);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(74, 144, 226, 0.1) inset;
    padding: 0.75rem 0;
}

/* Brand Logo 
.navbar-brand {
    font-weight: 700;
    font-size: 1.35rem;
    color: #ffffff !important;
    letter-spacing: -0.02em;
    position: relative;
    padding-left: 2.5rem;
    transition: all 0.3s ease;
}*/
/* Brand Logo with Icon */
.navbar-brand {
    font-weight: 700;
    font-size: 1.35rem;
    color: #ffffff !important;
    letter-spacing: -0.02em;
    position: relative;
    padding-left: 0;
    /* Remove left padding since we're using an actual image */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Logo Icon Image */
.navbar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(74, 144, 226, 0.4));
}

/* Hover Effects */
.navbar-brand:hover {
    color: var(--accent-cyan) !important;
    transform: translateX(3px);
}

.navbar-brand:hover .navbar-logo {
    transform: scale(1.08) rotate(-5deg);
    filter: drop-shadow(0 4px 12px rgba(74, 144, 226, 0.6));
}

/* Remove the old ::before pseudo-element */
.navbar-brand::before {
    display: none;
    /* This removes the old gradient box */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .navbar-logo {
        width: 32px;
        height: 32px;
    }

    .navbar-brand {
        font-size: 1.1rem;
        gap: 0.5rem;
    }
}

/* Icon Space (for your midnight blue favicon) */
.navbar-brand::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 100%);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(74, 144, 226, 0.3),
        0 0 0 2px rgba(74, 144, 226, 0.2);
    transition: all 0.3s ease;
}

.navbar-brand:hover::before {
    transform: translateY(-50%) scale(1.05) rotate(5deg);
    box-shadow:
        0 6px 20px rgba(74, 144, 226, 0.4),
        0 0 0 3px rgba(74, 144, 226, 0.3);
}

.navbar-brand:hover {
    color: var(--accent-cyan) !important;
    transform: translateX(3px);
}

/* Navigation Links */
.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0.75rem;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 0.5rem 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

/* Hover Effect - Subtle Background Glow */
.nav-link:hover {
    color: #ffffff !important;
    background: rgba(74, 144, 226, 0.1);
    transform: translateY(-2px);
}

/* Active Link Underline */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Whitepaper Button */
.btn-whitepaper {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
    color: white !important;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(74, 144, 226, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    cursor: pointer;
    letter-spacing: 0.01em;
}



/* Shimmer Effect on Hover */
.btn-whitepaper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left 0.5s ease;
}

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

.btn-whitepaper:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(74, 144, 226, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset;
    color: white !important;
}

.btn-whitepaper:active {
    transform: translateY(-1px);
}

/* Mobile Toggle Button */
.navbar-toggler {
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
}

.navbar-toggler:hover {
    border-color: var(--accent-blue);
    background: rgba(74, 144, 226, 0.1);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Menu Dropdown */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(10, 22, 40, 0.98);
        backdrop-filter: blur(20px);
        margin-top: 1rem;
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid rgba(74, 144, 226, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .nav-link {
        margin: 0.5rem 0;
        padding: 0.75rem 1rem !important;
    }

    .btn-whitepaper {
        margin-top: 1rem;
        width: 100%;
        text-align: center;
    }
}

/* Navbar Animation on Load */
@keyframes navSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

.navbar {
    animation: navSlideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Optional: Add Pulse Effect to Whitepaper Button */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow:
            0 4px 15px rgba(74, 144, 226, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    50% {
        box-shadow:
            0 4px 25px rgba(74, 144, 226, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    }
}

.btn-whitepaper {
    animation: pulseGlow 2s ease-in-out infinite;
}

.btn-whitepaper:hover {
    animation: none;
}

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 3: HERO SECTION
   Animated Gradient Background with Floating Particles
   ============================================================ */

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

.hero-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            #0a1628 0%,
            #1a2845 25%,
            #2a3f5f 50%,
            #1a2845 75%,
            #0a1628 100%);
    background-size: 400% 400%;
    padding: 8rem 2rem 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: gradientShift 15s ease infinite;
}

/* Animated Gradient Background */
@keyframes gradientShift {

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

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

/* Neural Network Pattern Overlay */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image:
        radial-gradient(circle at 10% 20%, rgba(74, 144, 226, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(0, 212, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    animation: pulseNetwork 8s ease-in-out infinite;
    pointer-events: none; */
    background-image:
        /* Floating particles - various sizes */
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 2px),
        radial-gradient(circle at 90% 30%, rgba(0, 212, 255, 0.15) 2px, transparent 3px),
        radial-gradient(circle at 25% 80%, rgba(255, 255, 255, 0.08) 1px, transparent 2px),
        radial-gradient(circle at 75% 70%, rgba(0, 212, 255, 0.12) 2px, transparent 3px),
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.1) 1px, transparent 2px),
        radial-gradient(circle at 35% 55%, rgba(0, 212, 255, 0.1) 1px, transparent 2px),
        radial-gradient(circle at 65% 15%, rgba(255, 255, 255, 0.12) 2px, transparent 3px),
        radial-gradient(circle at 15% 60%, rgba(0, 212, 255, 0.08) 1px, transparent 2px),
        /* Data stream lines */
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200px 100%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    animation: particleFloat 15s linear infinite;
}


@keyframes pulseNetwork {

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

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

/* Floating Particles */
.hero-section::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(1px 1px at 15% 90%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    opacity: 0.4;
    animation: particlesDrift 20s linear infinite;
    pointer-events: none;
}

@keyframes particlesDrift {
    0% {
        background-position: 0% 0%;
    }

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

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

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

    from {
        opacity: 0;
        transform: translateY(40px);
    }
}

/* Hero Title */
.hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-shadow:
        0 2px 20px rgba(74, 144, 226, 0.5),
        0 0 60px rgba(0, 212, 255, 0.3);
    position: relative;
}

/* Gradient Text Effect */
.hero-content h1 span,
.text-gradient {
    background: linear-gradient(135deg,
            #ffffff 0%,
            #00d4ff 30%,
            #4a90e2 60%,
            #8b5cf6 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 4s ease infinite;
}

@keyframes gradientFlow {

    0%,
    100% {
        background-position: 0% center;
    }

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

/* Hero Subtitle */
.hero-content h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Decorative Line 
.hero-content h2::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    margin: 0 auto 1.5rem;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.6);
}*/

/* Button Container */
.hero-content .mt-4 {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

/* Floating Animation for Content */
.hero-content h1 {
    animation: fadeInUp 1s ease-out forwards, floatGentle 6s ease-in-out infinite;
    animation-delay: 0.2s, 1s;
}

@keyframes floatGentle {

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

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

/* Glow Effect on Hover */
.hero-section:hover::before {
    animation: pulseNetwork 4s ease-in-out infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        min-height: 80vh;
        padding: 6rem 1.5rem 4rem;
    }

    .hero-content h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-content h2 {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .hero-content .mt-4 {
        flex-direction: column;
        align-items: center;
    }
}

/* Extra Polish: Scanline Effect (Optional - Very Subtle) 
.hero-section::after {
    background-image:
        linear-gradient(to bottom,
            transparent 50%,
            rgba(255, 255, 255, 0.02) 50%),
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(1px 1px at 15% 90%, white, transparent);
    background-size: 100% 4px, 200% 200%;
}*/

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 4: BUTTONS & CTAs
   Modern Button System with Hover Effects & Animations
   ============================================================ */

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

.btn-primary-custom {
    background: linear-gradient(135deg, #4a90e2 0%, #00d4ff 100%);
    color: white;
    padding: 1.1rem 2.5rem;
    font-size: 1.05rem;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    margin: 0.5rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(74, 144, 226, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    cursor: pointer;
    letter-spacing: 0.01em;
}

/* Shimmer Effect */
.btn-primary-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: left 0.6s ease;
}

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

.btn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 30px rgba(74, 144, 226, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset;
    color: white;
}

.btn-primary-custom:active {
    transform: translateY(-1px);
    box-shadow:
        0 5px 15px rgba(74, 144, 226, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

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

.btn-secondary-custom {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    color: var(--accent-blue);
    padding: 1.1rem 2.5rem;
    font-size: 1.05rem;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    margin: 0.5rem;
    font-weight: 600;
    border: 2px solid var(--accent-blue);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}

/* Fill Effect on Hover */
.btn-secondary-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    transition: width 0.4s ease;
    z-index: -1;
}

.btn-secondary-custom:hover::before {
    width: 100%;
}

.btn-secondary-custom:hover {
    color: white;
    border-color: var(--accent-cyan);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(74, 144, 226, 0.3);
}

.btn-secondary-custom:active {
    transform: translateY(-1px);
}

/* ==================== CTA BUTTON (White Background) ==================== */

.btn-cta {
    background: white;
    color: var(--primary-navy);
    padding: 1.1rem 2.5rem;
    font-size: 1.05rem;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(74, 144, 226, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}

.btn-cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.1;
}

.btn-cta:hover::after {
    width: 300px;
    height: 300px;
}

.btn-cta:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    color: var(--accent-blue);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(74, 144, 226, 0.3);
}

.btn-cta:active {
    transform: translateY(-1px) scale(1);
}

/* ==================== DOWNLOAD BUTTON ==================== */

.btn-download {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    color: white;
    padding: 1.3rem 3rem;
    font-size: 1.15rem;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    margin-top: 2rem;
    box-shadow:
        0 8px 25px rgba(74, 144, 226, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

/* Download Icon Animation */
.btn-download::after {
    content: '↓';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.btn-download:hover::after {
    opacity: 1;
    animation: downloadBounce 1s ease infinite;
}

@keyframes downloadBounce {

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

    50% {
        transform: translateY(calc(-50% + 5px));
    }
}

.btn-download:hover {
    transform: translateY(-4px);
    padding-right: 3.5rem;
    box-shadow:
        0 12px 35px rgba(74, 144, 226, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.25) inset;
    color: white;
}

.btn-download:active {
    transform: translateY(-2px);
}

/* ==================== BUTTON GROUPS ==================== */

.btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* ==================== ICON BUTTONS (Small) ==================== */

.btn-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 144, 226, 0.1);
    border: 2px solid var(--accent-blue);
    color: var(--accent-blue);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-icon:hover {
    background: var(--accent-blue);
    color: white;
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

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

@media (max-width: 768px) {

    .btn-primary-custom,
    .btn-secondary-custom,
    .btn-cta {
        padding: 1rem 2rem;
        font-size: 1rem;
        width: 100%;
        max-width: 350px;
        text-align: center;
    }

    .btn-download {
        padding: 1.1rem 2.5rem;
        font-size: 1.05rem;
        width: 100%;
        max-width: 350px;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
}

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

.btn-primary-custom:focus,
.btn-secondary-custom:focus,
.btn-cta:focus,
.btn-download:focus {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(74, 144, 226, 0.3),
        0 8px 25px rgba(74, 144, 226, 0.4);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    .btn-primary-custom,
    .btn-secondary-custom,
    .btn-cta,
    .btn-download {
        transition: none;
        animation: none;
    }

    .btn-primary-custom::before,
    .btn-secondary-custom::before,
    .btn-download::after {
        display: none;
    }
}

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 5: CONTENT SECTIONS
   Modern Section Layouts with Subtle Animations
   ============================================================ */

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

.content-section {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Alternating Background */
.content-section.alt-bg {
    background: linear-gradient(180deg,
            rgba(248, 250, 252, 0.5) 0%,
            rgba(240, 249, 255, 0.8) 100%);
    position: relative;
}

/* Subtle Pattern Overlay for Alt Background */
.content-section.alt-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 25% 25%, var(--accent-blue) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, var(--accent-cyan) 2px, transparent 2px);
    background-size: 100px 100px;
    pointer-events: none;
}

/* ==================== INTRO SECTION ==================== */

.intro-section {
    padding: 7rem 0;
    background: white;
    position: relative;
    overflow: hidden;
}

/* Decorative Corner Accent */
.intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
    pointer-events: none;
}

.intro-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-30%, 30%);
    pointer-events: none;
}

.intro-section h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block;
    letter-spacing: -0.02em;
}

/* Gradient Underline Effect */
.intro-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.3);
}

.intro-section p {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.9;
    color: var(--text-muted);
    max-width: 900px;
    margin: 0 auto 1.5rem;
}

.intro-section p strong {
    color: var(--primary-navy);
    font-weight: 700;
    position: relative;
    padding: 0 4px;
}

/* Subtle Highlight on Strong Text */
.intro-section p strong::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(90deg, rgba(74, 144, 226, 0.15), rgba(0, 212, 255, 0.1));
    z-index: -1;
    border-radius: 2px;
}

/* ==================== SECTION TITLES ==================== */

.section-title {
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    letter-spacing: -0.02em;
}

/* Decorative Lines Around Title */
.section-title::before,
.section-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
    transform: translateY(-50%);
}

.section-title::before {
    left: -80px;
}

.section-title::after {
    right: -80px;
}

/* Mobile: Hide Decorative Lines */
@media (max-width: 768px) {

    .section-title::before,
    .section-title::after {
        display: none;
    }
}

/* ==================== SECTION SUBTITLE ==================== */

.section-subtitle {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    margin-top: 4rem;
    position: relative;
    padding-left: 1.5rem;
}

/* Accent Line on Left */
.section-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 70%;
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}

/* ==================== CONTENT TEXT ==================== */

.content-text {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.content-text strong {
    color: var(--primary-navy);
    font-weight: 600;
}

/* ==================== PAGE HEADER ==================== */

.page-header {
    background: linear-gradient(135deg,
            var(--primary-navy) 0%,
            #1a2845 50%,
            #2a3f5f 100%);
    color: white;
    padding: 6rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Animated Background Pattern */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
    animation: headerPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes headerPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.page-header h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

.page-header p {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 400;
    opacity: 0.95;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ==================== HIGHLIGHT BOXES ==================== */

.highlight-box {
    background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.08) 0%,
            rgba(0, 212, 255, 0.05) 100%);
    border-left: 4px solid var(--accent-blue);
    padding: 2.5rem;
    margin: 3rem 0;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.1);
    transition: all 0.3s ease;
}

.highlight-box:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.15);
}

/* Decorative Corner */
.highlight-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, transparent 50%, rgba(74, 144, 226, 0.1) 50%);
    border-radius: 0 12px 0 0;
}

.highlight-box h4 {
    color: var(--primary-navy);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.highlight-box p {
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}

/* ==================== HIGHLIGHT TEXT (Inline) ==================== */

.highlight-text {
    background: linear-gradient(90deg,
            rgba(255, 243, 205, 0.6),
            rgba(255, 235, 170, 0.4));
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: 600;
    color: var(--primary-navy);
    border-bottom: 2px solid rgba(255, 193, 7, 0.3);
}

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

@media (max-width: 968px) {
    .content-section {
        padding: 4rem 0;
    }

    .intro-section {
        padding: 5rem 0;
    }

    .page-header {
        padding: 4rem 0 3rem;
    }

    .highlight-box {
        padding: 2rem;
        margin: 2rem 0;
    }
}

@media (max-width: 768px) {
    .section-title {
        margin-bottom: 2rem;
    }

    .section-subtitle {
        margin-top: 2rem;
    }
}

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 6: CARDS SYSTEM
   Modern Card Designs with Hover Effects & Animations
   ============================================================ */

/* ==================== PILLAR CARDS (Main Feature Cards) ==================== */

.pillar-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.pillar-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(74, 144, 226, 0.2);
    border-color: rgba(74, 144, 226, 0.3);
}

/* Number Badge */
.number-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.15),
            rgba(0, 212, 255, 0.1));
    color: var(--accent-blue);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.2);
    transition: all 0.3s ease;
}

.pillar-card:hover .number-badge {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
}

/* Icon Container */
.icon-container {
    width: 85px;
    height: 85px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    box-shadow:
        0 8px 25px rgba(74, 144, 226, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Glow Effect Behind Icon */
.icon-container::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 20px;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.5s ease;
    z-index: -1;
}

.pillar-card:hover .icon-container {
    transform: scale(1.1) rotate(-5deg);
    box-shadow:
        0 12px 35px rgba(74, 144, 226, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset;
}

.pillar-card:hover .icon-container::before {
    opacity: 0.6;
}

/* SVG Icons - White Stroke */
.icon-svg {
    width: 42px;
    height: 42px;
    stroke: white;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

.pillar-card:hover .icon-svg {
    transform: scale(1.05);
}

/* Card Title */
.pillar-card h3 {
    color: var(--primary-navy);
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Card Description */
.pillar-card p {
    color: var(--text-muted);
    line-height: 1.8;
    text-align: center;
    font-size: 1.05rem;
}

/* Decorative Corner Gradient */
.pillar-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(74, 144, 226, 0.04) 50%);
    border-radius: 16px 0 16px 0;
    transition: all 0.4s ease;
    pointer-events: none;
}

.pillar-card:hover::after {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(74, 144, 226, 0.1) 50%);
}

/* ==================== ARCH CARDS (Architecture Cards) ==================== */

.arch-card {
    background: white;
    padding: 2.5rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border-left: 5px solid var(--accent-blue);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.arch-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.15);
    border-left-width: 6px;
}

.arch-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.arch-card .badge {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: white;
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 1rem;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(74, 144, 226, 0.3);
    letter-spacing: 0.5px;
}

.arch-card p {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1.05rem;
}

/* ==================== DEVICE GRID & CARDS ==================== */

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.device-class {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
}

.device-class:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(74, 144, 226, 0.15);
    border-color: rgba(74, 144, 226, 0.3);
}

/* Device Icon */
.device-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: all 0.4s ease;
}

.device-icon img {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 4px 15px rgba(74, 144, 226, 0.2));
    transition: all 0.4s ease;
}

.device-class:hover .device-icon {
    transform: scale(1.15) rotate(-5deg);
}

.device-class:hover .device-icon img {
    filter: drop-shadow(0 8px 25px rgba(74, 144, 226, 0.4));
}

.device-class h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.device-class p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Subtle Background Pattern on Device Cards */
.device-class::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.device-class:hover::before {
    opacity: 1;
}

/* ==================== CATEGORY CARDS (Ecosystem) ==================== */

.category-card {
    background: white;
    padding: 2.5rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border-left: 5px solid var(--accent-blue);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.15);
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.category-header .device-icon {
    margin-right: 1rem;
    margin-bottom: 0;
    font-size: 2.5rem;
}

.category-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0;
}

/* Status Indicators */
.status-indicator {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-alpha {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    box-shadow: 0 2px 8px rgba(21, 87, 36, 0.2);
}

.status-development {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    color: #856404;
    box-shadow: 0 2px 8px rgba(133, 100, 4, 0.2);
}

.status-research {
    background: linear-gradient(135deg, #cce5ff, #b8daff);
    color: #004085;
    box-shadow: 0 2px 8px rgba(0, 64, 133, 0.2);
}

.status-experimental {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    box-shadow: 0 2px 8px rgba(114, 28, 36, 0.2);
}

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

@media (max-width: 768px) {

    .pillar-card,
    .arch-card,
    .device-class,
    .category-card {
        padding: 2rem 1.5rem;
    }

    .icon-container {
        width: 70px;
        height: 70px;
        margin-bottom: 1.5rem;
    }

    .icon-svg {
        width: 36px;
        height: 36px;
    }

    .number-badge {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

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

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 7: COUNCIL, LAB & PROFILE
   Team Member Cards, Research Labs, and Profile Layouts
   ============================================================ */

/* ==================== COUNCIL SEAT CARDS ==================== */

.seat-card {
    background: white;
    padding: 2.5rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border-left: 5px solid var(--accent-blue);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.seat-card:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 35px rgba(74, 144, 226, 0.2);
    border-left-width: 7px;
}

/* Gradient Background Effect */
.seat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.06) 0%, transparent 70%);
    opacity: 0;
    transition: all 0.5s ease;
}

.seat-card:hover::before {
    opacity: 1;
    right: -20%;
}

.seat-label {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: white;
    padding: 0.45rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.seat-card h3 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.seat-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}

/* ==================== LAB CARDS ==================== */

.lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.lab-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.lab-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 50px rgba(74, 144, 226, 0.25);
}

/* Lab Header with Gradient */
.lab-header {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
    color: white;
    padding: 3rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Animated Background Pattern */
.lab-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    animation: labHeaderPulse 6s ease-in-out infinite;
}

@keyframes labHeaderPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.lab-icon {
    font-size: 3.5rem;
    margin-bottom: 1.25rem;
    display: inline-block;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.2));
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.lab-card:hover .lab-icon {
    transform: scale(1.1) rotate(-5deg);
}

.lab-header h3 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: white;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}

.lab-role {
    font-size: 1.15rem;
    font-weight: 600;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    letter-spacing: 0.02em;
}

.lab-location {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.3rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

/* Lab Body */
.lab-body {
    padding: 2.5rem;
    background: white;
}

.lab-body p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.lab-body ul {
    list-style: none;
    padding-left: 0;
}

.lab-body ul li {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;
    line-height: 1.7;
}

.lab-body ul li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Lab Quote */
.lab-quote {
    background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.08),
            rgba(0, 212, 255, 0.05));
    border-left: 4px solid var(--accent-blue);
    padding: 1.5rem;
    margin-top: 1.5rem;
    font-style: italic;
    color: var(--primary-navy);
    font-weight: 500;
    border-radius: 0 8px 8px 0;
    position: relative;
}

.lab-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 3rem;
    color: var(--accent-blue);
    opacity: 0.3;
    font-family: Georgia, serif;
}

/* ==================== PROFILE SECTION ==================== */

.profile-section {
    padding: 6rem 0;
    background: white;
    position: relative;
}

.profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
}

/* Profile Image */
.profile-image {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #e0e7ee 0%, #c9d6e3 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: var(--primary-navy);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(74, 144, 226, 0.1) inset;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.profile-image:hover {
    transform: scale(1.03);
    box-shadow:
        0 20px 60px rgba(74, 144, 226, 0.25),
        0 0 0 2px rgba(74, 144, 226, 0.2) inset;
}

/* Decorative Corner Pattern */
.profile-image::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(74, 144, 226, 0.1) 50%);
    border-radius: 20px 0 20px 0;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Profile Info */
.profile-info h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.profile-titles {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.9;
    margin-bottom: 2rem;
}

.profile-titles p {
    margin: 0.4rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.profile-titles p::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-size: 1.5rem;
    line-height: 1;
}

.profile-bio {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--text-muted);
    margin-top: 2rem;
}

.profile-bio p {
    margin-bottom: 1.5rem;
}

/* ==================== OBJECTIVES LIST ==================== */

.objectives-list {
    background: white;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.objectives-list h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.objectives-list ol {
    padding-left: 2rem;
    counter-reset: objective-counter;
}

.objectives-list li {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    line-height: 1.8;
    position: relative;
    padding-left: 1rem;
    counter-increment: objective-counter;
}

.objectives-list li::marker {
    color: var(--accent-blue);
    font-weight: 700;
}

.objectives-list li strong {
    color: var(--primary-navy);
    font-weight: 700;
}

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

@media (max-width: 968px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .profile-image {
        max-width: 300px;
        margin: 0 auto;
    }

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

@media (max-width: 768px) {

    .lab-card,
    .seat-card {
        padding: 2rem 1.5rem;
    }

    .lab-header {
        padding: 2.5rem 2rem;
    }

    .objectives-list {
        padding: 2rem;
    }
}

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 8: DOCUMENTS & STATUS
   Document Displays, Status Boxes, Project Items, Vision Boxes
   ============================================================ */

/* ==================== DOCUMENT SECTION ==================== */

.document-section {
    padding: 6rem 0;
    background: white;
}

.document-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 5rem;
    align-items: start;
}

/* Document Cover */
.document-cover {
    /* background: linear-gradient(135deg, #e8eef5 0%, #d4dfe9 100%); */
    /* aspect-ratio: 8.5/11; */
    /* border-radius: 12px; */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(74, 144, 226, 0.1) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 0.5rem; */
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.document-cover:hover {
    transform: translateY(-10px) rotate(-1deg);
    box-shadow:
        0 30px 80px rgba(74, 144, 226, 0.3),
        0 0 0 2px rgba(74, 144, 226, 0.2) inset;
}

/* Document Cover Top Accent 
.document-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.4);
}*/

.document-cover img {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: block;
    margin: 0 auto;
    transition: all 0.4s ease;
}

.document-cover:hover img {
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.document-cover h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-navy);
    line-height: 1.3;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.document-cover p {
    font-size: 1rem;
    color: #5a6c7d;
    margin: 0.5rem 0;
}

.doc-badge {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 2rem;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Document Details */
.document-details h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 2.5rem;
    letter-spacing: -0.02em;
}

.detail-item {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.detail-value {
    font-size: 1.15rem;
    color: var(--primary-navy);
    font-weight: 600;
    line-height: 1.6;
}

/* ==================== STATUS BOX ==================== */

.status-box {
    background: linear-gradient(135deg,
            rgba(255, 243, 205, 0.6) 0%,
            rgba(255, 235, 170, 0.4) 100%);
    border: 2px solid #ffc107;
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    margin-top: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(255, 193, 7, 0.2);
}

/* Animated Background Pattern */
.status-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 193, 7, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 193, 7, 0.08) 0%, transparent 50%);
    animation: statusPulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.status-box h3 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.status-box p {
    font-size: 1.1rem;
    color: #6b5400;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.status-badge {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: white;
    padding: 0.6rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ==================== PROJECTS SECTION ==================== */

.projects-section {
    background: linear-gradient(135deg,
            rgba(232, 244, 253, 0.6) 0%,
            rgba(212, 233, 247, 0.4) 100%);
    padding: 4rem 0;
    margin-top: 3rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.projects-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 30% 40%, rgba(74, 144, 226, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.project-item {
    background: white;
    padding: 2.5rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid var(--accent-blue);
    position: relative;
}

.project-item:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.15);
    border-left-width: 6px;
}

.project-item h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.project-item p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ==================== VISION SECTION ==================== */

.vision-section {
    padding: 6rem 0;
    background: linear-gradient(135deg,
            var(--soft-gray) 0%,
            var(--soft-blue) 100%);
    position: relative;
}

.vision-box {
    background: white;
    padding: 4rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border-left: 8px solid var(--accent-blue);
    position: relative;
    overflow: hidden;
}

/* Decorative Pattern */
.vision-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.vision-box h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 2.5rem;
    letter-spacing: -0.02em;
}

.vision-quote {
    font-size: 1.25rem;
    line-height: 2;
    color: var(--text-muted);
    font-style: italic;
    position: relative;
    padding-left: 3rem;
}

.vision-quote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -20px;
    font-size: 5rem;
    color: var(--accent-blue);
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 1;
}

/* ==================== ABSTRACT SECTION ==================== */

.abstract-section {
    padding: 6rem 0;
    background: var(--soft-gray);
}

.abstract-box {
    background: white;
    padding: 4rem;
    border-radius: 20px;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.abstract-box h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 1rem;
}

.abstract-box h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 2px;
}

.abstract-box p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

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

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

    .document-cover {
        max-width: 400px;
        margin: 0 auto;
    }

    .vision-box,
    .abstract-box {
        padding: 3rem 2rem;
    }

    .vision-quote {
        font-size: 1.1rem;
        padding-left: 2rem;
    }
}

@media (max-width: 768px) {
    .status-box {
        padding: 2rem;
    }

    .project-item {
        padding: 2rem 1.5rem;
    }

    .vision-box,
    .abstract-box {
        padding: 2rem 1.5rem;
    }

    .vision-quote::before {
        font-size: 3.5rem;
        top: -10px;
    }
}

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 9: NEWS, FAQ, CONTACT
   News Feed, FAQ Items, Contact Cards, Address Sections
   ============================================================ */

/* ==================== NEWS SECTION ==================== */

.news-feed {
    margin-top: 3rem;
}

.news-item {
    background: white;
    padding: 2.5rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border-left: 5px solid var(--accent-blue);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.news-item:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 35px rgba(74, 144, 226, 0.2);
    border-left-width: 7px;
}

/* Gradient Background on Hover */
.news-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(74, 144, 226, 0.03),
            transparent);
    transition: right 0.5s ease;
}

.news-item:hover::before {
    right: 0;
}

.news-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.1),
            rgba(0, 212, 255, 0.05));
    border-radius: 6px;
}

.news-item h3 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.news-item:hover h3 {
    color: var(--accent-blue);
}

.news-item p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.news-link {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.news-link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.news-link:hover {
    color: var(--accent-cyan);
    gap: 0.8rem;
}

.news-link:hover::after {
    transform: translateX(5px);
}

/* ==================== FAQ SECTION ==================== */

.faq-section {
    padding: 6rem 0;
    background: white;
}

.faq-item {
    background: white;
    padding: 2.5rem;
    margin-bottom: 2rem;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 5px solid var(--accent-blue);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.faq-item:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.15);
    border-left-width: 6px;
}

/* Decorative Corner */
.faq-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(74, 144, 226, 0.05) 50%);
    border-radius: 14px 0 14px 0;
    transition: all 0.3s ease;
}

.faq-item:hover::after {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg,
            transparent 50%,
            rgba(74, 144, 226, 0.08) 50%);
}

.faq-question {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    letter-spacing: -0.01em;
}

.faq-question:before {
    content: "Q:";
    color: var(--accent-blue);
    font-weight: 800;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.faq-answer {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
    padding-left: 2.5rem;
}

.faq-answer strong {
    color: var(--primary-navy);
    font-weight: 700;
}

.faq-answer em {
    background: linear-gradient(90deg,
            rgba(255, 243, 205, 0.6),
            rgba(255, 235, 170, 0.4));
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-style: normal;
    font-weight: 600;
    color: var(--primary-navy);
}

/* ==================== CONTACT SECTION ==================== */

.contact-section {
    padding: 6rem 0;
    background: white;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.contact-card {
    background: white;
    padding: 3rem;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-top: 5px solid var(--accent-blue);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(74, 144, 226, 0.2);
}

/* Gradient Background Effect */
.contact-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(74, 144, 226, 0.05) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.contact-card:hover::before {
    opacity: 1;
}

.contact-card h3 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.contact-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.contact-email {
    background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.1),
            rgba(0, 212, 255, 0.05));
    padding: 1rem 1.5rem;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
}

.contact-email:hover {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: white;
    transform: translateX(5px);
    border-color: var(--accent-cyan);
}

/* Contact Box (Alternative Style) */
.contact-box {
    background: linear-gradient(135deg,
            rgba(248, 250, 252, 0.8) 0%,
            rgba(240, 249, 255, 0.6) 100%);
    padding: 3rem;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
}

.contact-box h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.contact-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.15);
}

.contact-item h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.contact-item p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin: 0.5rem 0;
    line-height: 1.6;
}

.contact-item a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-item a:hover {
    color: var(--accent-cyan);
    text-decoration: underline;
}

/* ==================== ADDRESS SECTION ==================== */

.address-section {
    padding: 6rem 0;
    background: linear-gradient(135deg,
            var(--soft-gray) 0%,
            var(--soft-blue) 100%);
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.address-card {
    background: white;
    padding: 3rem;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
}

.address-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 45px rgba(74, 144, 226, 0.2);
    border-color: rgba(74, 144, 226, 0.3);
}

/* Decorative Pattern */
.address-card::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle,
            rgba(74, 144, 226, 0.08) 0%,
            transparent 70%);
    border-radius: 50%;
    transition: all 0.5s ease;
}

.address-card:hover::before {
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
}

.address-flag {
    font-size: 3.5rem;
    margin-bottom: 1.25rem;
    display: inline-block;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
    transition: all 0.4s ease;
}

.address-card:hover .address-flag {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.15));
}

.address-card h3 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.address-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0.5rem 0;
}

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

@media (max-width: 968px) {

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

    .address-card {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {

    .news-item,
    .faq-item,
    .contact-card,
    .address-card {
        padding: 2rem 1.5rem;
    }

    .faq-question {
        font-size: 1.2rem;
    }

    .faq-answer {
        padding-left: 1.5rem;
    }

    .contact-box {
        padding: 2rem;
    }
}

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 10: FOOTER & CTAs
   Footer, Citation Sections, CTA Sections, Media Kit
   ============================================================ */

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

.footer {
    background: linear-gradient(135deg,
            var(--primary-navy) 0%,
            #0d1a2d 50%,
            var(--primary-navy) 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
}

/* Animated Background Pattern */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(74, 144, 226, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(0, 212, 255, 0.06) 0%, transparent 50%);
    animation: footerPulse 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes footerPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Footer Content */
.footer .container {
    position: relative;
    z-index: 1;
}

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

.footer h4 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.footer p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.8;
}


.footer strong {
    color: white;
    font-weight: 600;
}

.footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.footer a:hover {
    color: var(--accent-cyan);
    text-decoration: none;
}

/* Underline Animation */
.footer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    transition: width 0.3s ease;
}

.footer a:hover::after {
    width: 100%;
}

/* Footer Border Top */
.footer .row.mt-3 {
    position: relative;
    z-index: 1;
}

.footer .row.mt-3 p {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Footer Links */
.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
    display: inline-block;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    transition: width 0.3s ease;
}

.footer-link:hover {
    color: var(--accent-cyan);
}

.footer-link:hover::after {
    width: 100%;
}

/* Footer Bottom Bar */
.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 1.5rem;
        text-align: center;
    }

    .footer .col-md-6 {
        text-align: center !important;
        margin-bottom: 2rem;
    }

    .footer .text-md-end {
        text-align: center !important;
    }

    .footer-bottom {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
}

/* Optional: Add subtle grid pattern */
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(74, 144, 226, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 144, 226, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

/* ==================== CITATION SECTION ==================== */

.citation-section {
    padding: 6rem 0;
    background: white;
}

.citation-box {
    background: linear-gradient(135deg,
            rgba(248, 250, 252, 0.8) 0%,
            rgba(240, 249, 255, 0.6) 100%);
    padding: 3rem;
    border-radius: 18px;
    border-left: 8px solid var(--accent-blue);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
}

.citation-box h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.citation-box p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.citation-format {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.citation-format:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.15);
}

.citation-format h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.01em;
}

.citation-format h4::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 2px;
}

.citation-format pre {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
    padding: 1.75rem;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    border: 1px solid rgba(74, 144, 226, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) inset;
}

.citation-format pre::-webkit-scrollbar {
    height: 8px;
}

.citation-format pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.citation-format pre::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 10px;
}

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

.cta-section {
    background: linear-gradient(135deg,
            var(--accent-blue) 0%,
            var(--accent-cyan) 100%);
    color: white;
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Animated Background Pattern */
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    animation: ctaPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaPulse {

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

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

.cta-section h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
}

.cta-section p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==================== MEDIA KIT BOX ==================== */

.media-kit-box {
    background: linear-gradient(135deg,
            rgba(232, 244, 253, 0.8) 0%,
            rgba(212, 233, 247, 0.6) 100%);
    padding: 3.5rem;
    border-radius: 18px;
    text-align: center;
    margin-top: 3rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(74, 144, 226, 0.2);
}

/* Decorative Pattern */
.media-kit-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(74, 144, 226, 0.1) 0%,
            transparent 70%);
    animation: mediaKitRotate 20s linear infinite;
    pointer-events: none;
}

@keyframes mediaKitRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.media-kit-box h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    letter-spacing: -0.01em;
}

.media-kit-box p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
    line-height: 1.8;
}

/* ==================== PARTNER BOX ==================== */

.partner-box {
    background: linear-gradient(135deg,
            var(--primary-navy) 0%,
            #1a2845 50%,
            #0a1628 100%);
    color: white;
    padding: 4.5rem 4rem;
    border-radius: 20px;
    text-align: center;
    margin-top: 3rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Animated Background */
.partner-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(74, 144, 226, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 212, 255, 0.12) 0%, transparent 50%);
    animation: partnerPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes partnerPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.partner-box h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}

.partner-box p {
    font-size: 1.15rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    line-height: 1.8;
}

/* ==================== ECOSYSTEM PHILOSOPHY ==================== */

.ecosystem-philosophy {
    background: white;
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    margin-bottom: 3rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.ecosystem-philosophy h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.ecosystem-philosophy p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--text-muted);
}

/* ==================== APPLY BOX ==================== */

.apply-box {
    background: linear-gradient(135deg,
            rgba(232, 244, 253, 0.8) 0%,
            rgba(212, 233, 247, 0.6) 100%);
    padding: 3.5rem;
    border-radius: 18px;
    text-align: center;
    margin-top: 3rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.apply-box h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.apply-box p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
}

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

@media (max-width: 968px) {
    .footer {
        padding: 3rem 0 1.5rem;
    }

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

    .footer .col-md-6 {
        text-align: center !important;
        margin-bottom: 2rem;
    }

    .citation-box,
    .media-kit-box,
    .partner-box,
    .apply-box {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: 3.5rem 0;
    }

    .citation-format pre {
        padding: 1.25rem;
        font-size: 0.85rem;
    }

    .partner-box {
        padding: 3rem 2rem;
    }
}

/* ============================================================
   SENSORA-OS UNIFIED STYLES - PART 11: FINAL SECTIONS
   Privacy, Careers, Roles, Culture, and Responsive Polish
   ============================================================ */

/* ==================== PRIVACY SECTION ==================== */

.privacy-content {
    background: white;
    padding: 4rem;
    border-radius: 20px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.privacy-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.privacy-content h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.privacy-content p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.privacy-principle {
    background: linear-gradient(135deg,
            rgba(74, 144, 226, 0.08) 0%,
            rgba(0, 212, 255, 0.05) 100%);
    border-left: 5px solid var(--accent-blue);
    padding: 2.5rem;
    margin: 2.5rem 0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.1);
    transition: all 0.3s ease;
}

.privacy-principle:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.15);
}

.privacy-principle h3 {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-top: 0;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.privacy-principle p {
    margin-bottom: 1rem;
}

/* Privacy List */
.privacy-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.privacy-list li {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    padding-left: 2.5rem;
    position: relative;
    line-height: 1.8;
}

.privacy-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.4rem;
    top: -2px;
}

/* ==================== CAREERS SECTION ==================== */

.culture-section {
    background: white;
    padding: 3.5rem;
    border-radius: 18px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 3rem;
}

.culture-section h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.culture-section p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

/* ==================== ROLES GRID & CARDS ==================== */

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.role-card {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    border-top: 5px solid var(--accent-blue);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.role-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(74, 144, 226, 0.2);
    border-top-width: 7px;
}

/* Gradient Background Effect */
.role-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(74, 144, 226, 0.06),
            transparent);
    transition: top 0.5s ease;
}

.role-card:hover::before {
    top: 0;
}

/* Role Number Badge */
.role-number {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.role-card:hover .role-number {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.role-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.role-meta {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    font-weight: 500;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.role-meta span {
    padding: 0.3rem 0.8rem;
    background: rgba(74, 144, 226, 0.1);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
}

.role-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.role-card ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.role-card ul li {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.6;
}

.role-card ul li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

/* ==================== DIAGRAM PLACEHOLDER ==================== */

.diagram-placeholder {
    width: 100%;
    height: 320px;
    border: 2px dashed rgba(74, 144, 226, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2.5rem 0;
    font-style: italic;
    color: var(--text-muted);
    background: linear-gradient(135deg,
            rgba(248, 250, 252, 0.5) 0%,
            rgba(240, 249, 255, 0.3) 100%);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.diagram-placeholder:hover {
    border-color: var(--accent-blue);
    background: linear-gradient(135deg,
            rgba(232, 244, 253, 0.6) 0%,
            rgba(212, 233, 247, 0.4) 100%);
}

/* Circuit Pattern Overlay */
.diagram-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(90deg, rgba(74, 144, 226, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(74, 144, 226, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

.diagram-placeholder span {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    font-weight: 500;
}

/* ==================== FINAL RESPONSIVE ADJUSTMENTS ==================== */

@media (max-width: 968px) {
    body {
        padding-top: 70px;
    }

    .hero-section {
        padding: 5rem 1.5rem 4rem;
    }

    .privacy-content,
    .culture-section {
        padding: 3rem 2rem;
    }

    .privacy-principle {
        padding: 2rem 1.5rem;
    }

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

@media (max-width: 768px) {

    /* Typography Adjustments */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    /* Section Padding */
    .content-section,
    .intro-section,
    .page-header,
    .privacy-content,
    .culture-section {
        padding: 3rem 1.5rem;
    }

    /* Cards */
    .role-card,
    .pillar-card,
    .lab-card,
    .seat-card,
    .contact-card {
        padding: 2rem 1.5rem;
    }

    /* Diagram */
    .diagram-placeholder {
        height: 250px;
    }

    /* Privacy List */
    .privacy-list li {
        padding-left: 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {

    /* Extra Small Devices */
    .icon-container {
        width: 70px;
        height: 70px;
    }

    .icon-svg {
        width: 35px;
        height: 35px;
    }

    .role-number {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    /* Button Groups Stack */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-custom,
    .btn-secondary-custom,
    .btn-cta,
    .btn-download {
        width: 100%;
        margin: 0.5rem 0;
    }
}

/* ==================== PRINT STYLES ==================== */

@media print {
    body {
        background: white;
        padding-top: 0;
    }

    .navbar,
    .footer,
    .btn-primary-custom,
    .btn-secondary-custom,
    .btn-cta,
    .btn-download {
        display: none;
    }

    .pillar-card,
    .role-card,
    .contact-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

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

/* Focus Visible for Keyboard Navigation */
*:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip to Content Link */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--accent-blue);
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    z-index: 10000;
    font-weight: 600;
}

.skip-to-content:focus {
    top: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

    .pillar-card,
    .role-card,
    .contact-card {
        border: 2px solid currentColor;
    }
}

/* ==================== DARK MODE SUPPORT (Optional) ==================== */

@media (prefers-color-scheme: dark) {
    /* Uncomment if you want automatic dark mode support
    :root {
        --primary-navy: #f8fafc;
        --text-dark: #f1f5f9;
        --text-muted: #cbd5e1;
        --soft-gray: #1e293b;
    }
    
    body {
        background: #0f172a;
        color: #f1f5f9;
    }
    */
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */

/* GPU Acceleration for Animations */
.pillar-card,
.role-card,
.contact-card,
.news-item,
.faq-item {
    will-change: transform;
}

/* Reduce Animations on Low-End Devices */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== FINAL POLISH ==================== */

/* Smooth Scroll Padding for Fixed Header */
html {
    scroll-padding-top: 100px;
}

/* Selection Styling */
::-moz-selection {
    background-color: var(--accent-blue);
    color: white;
}

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

/* Image Loading State */
img {
    max-width: 100%;
    height: auto;
}

/* Loading Animation for Images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ==================== END OF SENSORA-OS STYLES ==================== */