/* Harpia Technologies - Modern Savunma Sanayi Web Sitesi */

:root {
    --primary-blue: #002244;
    --secondary-blue: #003d6b;
    --accent-blue: #005a9e;
    --light-blue: #f0f7ff;
    --dark-blue: #001122;
    --text-dark: #1a1a1a;
    --text-light: #4a4a4a;
    --white: #ffffff;
    --gray-light: #f8f9fa;
    --gray-medium: #e9ecef;
    --border-color: #dee2e6;
    --gradient-blue: linear-gradient(135deg, #002244 0%, #005a9e 100%);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.7;
    color: var(--text-dark);
    overflow-x: hidden;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header Styles */
.header {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 968px) {
    .header {
        z-index: 1001;
    }
}

.header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--primary-blue);
}

.logo img {
    height: 50px;
    width: auto;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
}

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

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 6px;
}

.nav-link:hover {
    color: var(--accent-blue);
    background: var(--light-blue);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-blue);
    transition: width 0.3s ease;
}

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

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 250px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    list-style: none;
    padding: 1rem 0;
    margin-top: 1rem;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    padding: 0.75rem 1.5rem;
}

.dropdown-link {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: block;
    padding: 0.5rem 0;
}

.dropdown-link:hover {
    color: var(--accent-blue);
    padding-left: 0.5rem;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--primary-blue);
    transition: all 0.3s ease;
}

/* Hero Section */
.hero {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 10rem 2rem 8rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
    animation: hero-pattern 20s linear infinite;
}

@keyframes hero-pattern {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

.hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite;
}

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

.hero-visual-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-geometric-1 {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation: float-slow 8s ease-in-out infinite;
}

.hero-geometric-2 {
    position: absolute;
    bottom: 15%;
    left: 15%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.04);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    animation: float-slow 10s ease-in-out infinite reverse;
}

.hero-geometric-3 {
    position: absolute;
    top: 50%;
    right: 20%;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    animation: float-slow 12s ease-in-out infinite;
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
    animation: hero-pattern 20s linear infinite;
}

@keyframes hero-pattern {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

.hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite;
}

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

.hero-visual-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-geometric-1 {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation: float-slow 8s ease-in-out infinite;
}

.hero-geometric-2 {
    position: absolute;
    bottom: 15%;
    left: 15%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.04);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    animation: float-slow 10s ease-in-out infinite reverse;
}

.hero-geometric-3 {
    position: absolute;
    top: 50%;
    right: 20%;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    animation: float-slow 12s ease-in-out infinite;
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.hero p {
    font-size: 1.35rem;
    margin-bottom: 3rem;
    opacity: 0.95;
    animation: fadeInUp 1s ease 0.2s both;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    animation: fadeInUp 1s ease 0.4s both;
}

.btn {
    padding: 1.1rem 2.75rem;
    border: none;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.3px;
}

.btn-primary {
    background: var(--white);
    color: var(--primary-blue);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    background: var(--gray-light);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Sections */
.section {
    padding: 6rem 2rem;
}

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

.section-title {
    text-align: center;
    font-size: 2.8rem;
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.section-subtitle {
    text-align: center;
    color: var(--text-light);
    font-size: 1.15rem;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* Cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.card {
    background: var(--white);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.card-icon {
    width: 70px;
    height: 70px;
    background: var(--light-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.card:hover .card-icon {
    background: var(--accent-blue);
    color: var(--white);
    transform: scale(1.1);
}

/* STM Benzeri Activity Grid */
.stm-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.stm-activity-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 400px;
    display: block;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--white);
}

.stm-activity-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.stm-activity-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stm-activity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stm-activity-card:hover .stm-activity-image img {
    transform: scale(1.1);
}

.stm-activity-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 34, 68, 0.7) 100%);
    transition: background 0.4s ease;
}

.stm-activity-card:hover .stm-activity-overlay {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 34, 68, 0.85) 100%);
}

.stm-activity-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.stm-activity-content h3 {
    color: var(--white);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.stm-activity-arrow {
    width: 48px;
    height: 48px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stm-activity-card:hover .stm-activity-arrow {
    transform: translateX(5px) scale(1.1);
    background: var(--accent-blue);
    color: var(--white);
}

/* Activity Grid - Faaliyet Alanları Görsel Hover */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
}

.activity-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 450px;
    display: block;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
    background: var(--white);
}

.activity-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.activity-image {
    width: 100%;
    height: 60%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Askeri Ürünler - Drone/Radar görseli */
.activity-card:nth-child(1) .activity-icon-placeholder::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.activity-card:nth-child(1) .activity-icon-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

/* Special Çözümler - Arama kurtarma görseli */
.activity-card:nth-child(2) .activity-icon-placeholder::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    clip-path: polygon(50% 0%, 0% 50%, 25% 50%, 25% 100%, 75% 100%, 75% 50%, 100% 50%);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.activity-card:nth-child(2) .activity-icon-placeholder::after {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Aviyonik Sistemleri - Radar/Radar görseli */
.activity-card:nth-child(3) .activity-icon-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.activity-card:nth-child(3) .activity-icon-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    animation: radar-sweep 3s linear infinite;
}

@keyframes radar-sweep {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.activity-overlay {
    padding: 2.5rem;
    background: var(--white);
    height: 40%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.activity-card:hover .activity-overlay {
    background: var(--light-blue);
}

.activity-overlay h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.activity-overlay p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    flex-grow: 1;
}

.activity-link {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.activity-card:hover .activity-link {
    transform: translateX(5px);
    color: var(--primary-blue);
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.news-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.news-image-wrapper {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.news-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-image-wrapper img {
    transform: scale(1.1);
}

.news-image-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    position: relative;
    overflow: hidden;
}

.news-image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
    opacity: 0.6;
}

.news-image-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    clip-path: polygon(50% 0%, 0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.news-card:nth-child(1) .news-image-placeholder {
    background: linear-gradient(135deg, #001a33 0%, #003d6b 50%, #005a9e 100%);
}

.news-card:nth-child(2) .news-image-placeholder {
    background: linear-gradient(135deg, #002244 0%, #004080 50%, #0066cc 100%);
}

.news-card:nth-child(3) .news-image-placeholder {
    background: linear-gradient(135deg, #001122 0%, #003366 50%, #005588 100%);
}

.news-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-date {
    color: var(--accent-blue);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: block;
    letter-spacing: 0.3px;
}

.news-content h3 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.news-content p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    flex-grow: 1;
}

.news-link {
    color: var(--accent-blue);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.news-link:hover {
    color: var(--primary-blue);
    transform: translateX(5px);
}

/* Career Hero Section */
.career-hero {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
}

.career-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.career-hero-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.career-text h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.career-text p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    opacity: 0.95;
}

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

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

.career-feature-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    position: relative;
    flex-shrink: 0;
}

.career-feature-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 4px;
}

.career-feature-item span {
    font-size: 1.1rem;
    font-weight: 500;
}

.career-visual {
    position: relative;
}

.career-visual-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.career-visual-placeholder::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: float 6s ease-in-out infinite;
}

.career-visual-placeholder::after {
    content: '';
    position: absolute;
    bottom: 20%;
    right: 20%;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.12);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    animation: float 8s ease-in-out infinite reverse;
}

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

/* Value Prop Icon Placeholder */
.value-prop-icon-placeholder {
    width: 90px;
    height: 90px;
    margin: 0 auto 2rem;
    background: var(--light-blue);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.value-prop-icon-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.value-prop:hover .value-prop-icon-placeholder {
    background: var(--accent-blue);
    transform: scale(1.1);
}

.value-prop:hover .value-prop-icon-placeholder::before {
    background: var(--white);
}

/* Card Icon Placeholder */
.card-icon-placeholder {
    width: 70px;
    height: 70px;
    background: var(--light-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.card-icon-placeholder::before {
    content: '';
    width: 35px;
    height: 35px;
    background: var(--accent-blue);
    border-radius: 8px;
    position: absolute;
}

.card:hover .card-icon-placeholder {
    background: var(--accent-blue);
    transform: scale(1.1);
}

.card:hover .card-icon-placeholder::before {
    background: var(--white);
}

/* Jobs Grid */
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.job-card {
    background: var(--white);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.job-header h3 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    flex-grow: 1;
}

.job-badge {
    background: var(--accent-blue);
    color: var(--white);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.job-department {
    color: var(--accent-blue);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.job-description {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.job-requirements {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.job-requirements strong {
    color: var(--primary-blue);
    display: block;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.job-requirements ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.job-requirements li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
}

.job-requirements li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

/* Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.process-step {
    text-align: center;
    position: relative;
}

.process-step-number {
    width: 80px;
    height: 80px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
}

.process-step h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.process-step p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Methodology Grid */
.methodology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.methodology-item {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.methodology-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.methodology-icon {
    width: 70px;
    height: 70px;
    background: var(--light-blue);
    border-radius: 12px;
    margin: 0 auto 1.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.methodology-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.methodology-item:hover .methodology-icon {
    background: var(--accent-blue);
    transform: scale(1.1);
}

.methodology-item:hover .methodology-icon::before {
    background: var(--white);
}

.methodology-item h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.methodology-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

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

.partnership-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.partnership-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.partnership-card h4 {
    color: var(--primary-blue);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.partnership-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Facilities Grid */
.facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.facility-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.facility-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.facility-image-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    position: relative;
}

.facility-image-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

.facility-card h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 1.5rem 1.5rem 1rem;
}

.facility-card p {
    color: var(--text-light);
    line-height: 1.7;
    margin: 0 1.5rem 1.5rem;
    font-size: 1.05rem;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.blog-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.blog-image-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    position: relative;
    overflow: hidden;
}

.blog-image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255,255,255,0.03) 15px, rgba(255,255,255,0.03) 30px),
        repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255,255,255,0.03) 15px, rgba(255,255,255,0.03) 30px);
}

.blog-image-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.12);
    clip-path: polygon(50% 0%, 0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%);
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.blog-card:nth-child(1) .blog-image-placeholder {
    background: linear-gradient(135deg, #001a33 0%, #003d6b 50%, #005a9e 100%);
}

.blog-card:nth-child(2) .blog-image-placeholder {
    background: linear-gradient(135deg, #002244 0%, #004080 50%, #0066cc 100%);
}

.blog-card:nth-child(3) .blog-image-placeholder {
    background: linear-gradient(135deg, #001122 0%, #003366 50%, #005588 100%);
}

.blog-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-category {
    display: inline-block;
    background: var(--light-blue);
    color: var(--accent-blue);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.blog-date {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: block;
}

.blog-content h3 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.blog-content p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    flex-grow: 1;
}

.blog-link {
    color: var(--accent-blue);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.blog-link:hover {
    color: var(--primary-blue);
    transform: translateX(5px);
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.video-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.video-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.video-placeholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 34, 68, 0.4);
    z-index: 1;
    transition: background 0.3s ease;
}

.video-card:hover .video-placeholder::before {
    background: rgba(0, 34, 68, 0.2);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px);
}

.video-play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-play-button::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 25px solid var(--accent-blue);
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin-left: 5px;
}

.video-card:hover .video-play-button {
    transform: scale(1.1);
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-info {
    padding: 2rem;
}

.video-info h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.video-info p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Product Visuals */
.product-visual-drone,
.product-visual-radar,
.product-visual-defense {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Drone Visual */
.product-visual-drone::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    clip-path: polygon(50% 0%, 0% 50%, 20% 50%, 20% 100%, 80% 100%, 80% 50%, 100% 50%);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.product-visual-drone::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

/* Radar Visual */
.product-visual-radar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.product-visual-radar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 250px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.7);
    animation: radar-sweep 3s linear infinite;
}

/* Defense Visual */
.product-visual-defense::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.12);
    clip-path: polygon(50% 0%, 0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.product-visual-defense::after {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
}

/* Kompakt Ürün Sayfası Stilleri */
.product-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.tech-specs-compact {
    background: var(--light-blue);
    padding: 2.5rem;
    border-radius: 12px;
}

.tech-specs-compact h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.specs-grid-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.spec-item-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--white);
    border-radius: 8px;
    border-left: 4px solid var(--accent-blue);
}

.spec-item-compact strong {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.95rem;
}

.spec-item-compact span {
    color: var(--text-light);
    font-size: 0.95rem;
    text-align: right;
}

.engineering-section-compact {
    margin: 4rem 0;
}

.engineering-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.engineering-card-compact {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.engineering-card-compact:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.engineering-card-compact h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.engineering-card-compact p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.features-section-compact {
    margin: 4rem 0;
}

.product-features-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-item-compact {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.feature-item-compact:hover {
    border-color: var(--accent-blue);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.feature-item-compact .feature-text h5 {
    color: var(--primary-blue);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.feature-item-compact .feature-text p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.usage-section-compact {
    margin: 4rem 0;
}

.usage-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.usage-card-compact {
    background: var(--light-blue);
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.usage-card-compact:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.usage-card-compact h4 {
    color: var(--primary-blue);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.usage-card-compact p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0;
}

/* Enhanced Page Header */
.page-header-enhanced {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.page-header-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

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

.page-header-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.page-header-content p {
    font-size: 1.3rem;
    opacity: 0.95;
    line-height: 1.6;
}

.page-header-visual {
    position: relative;
    z-index: 1;
}

.page-header-visual img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Sustainability Styles */
.sustainability-intro {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    margin-bottom: 5rem;
    padding: 3rem;
    background: var(--light-blue);
    border-radius: 16px;
}

.sustainability-intro-text h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.sustainability-intro-text p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.sustainability-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sustainability-stat-item {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.sustainability-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 600;
}

.sustainability-section {
    margin: 5rem 0;
}

.sustainability-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.sustainability-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.sustainability-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.sustainability-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.sustainability-card:hover::before {
    transform: scaleY(1);
}

.sustainability-card-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 2rem;
    position: relative;
}

.icon-energy,
.icon-recycle,
.icon-water,
.icon-carbon {
    width: 100%;
    height: 100%;
    background: var(--light-blue);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.sustainability-card:hover .icon-energy,
.sustainability-card:hover .icon-recycle,
.sustainability-card:hover .icon-water,
.sustainability-card:hover .icon-carbon {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.icon-energy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.icon-recycle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 50%;
    border: 4px solid var(--white);
}

.icon-water::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
}

.icon-carbon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    clip-path: polygon(50% 0%, 0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%);
}

.sustainability-card h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.sustainability-card p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.sustainability-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sustainability-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.7;
}

.sustainability-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Social Responsibility */
.social-responsibility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.social-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.social-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.social-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.social-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.social-metrics {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.metric-label {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 600;
}

/* Economic Sustainability */
.economic-sustainability {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.economic-item {
    background: var(--light-blue);
    padding: 2.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.economic-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
}

.economic-item h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.economic-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Goals Timeline */
.goals-timeline {
    margin-top: 3rem;
    position: relative;
    padding-left: 3rem;
}

.goals-timeline::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--light-blue);
}

.goal-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.goal-year {
    position: absolute;
    left: -3rem;
    width: 60px;
    height: 60px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 90, 158, 0.3);
    z-index: 1;
}

.goal-content {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    flex: 1;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.goal-item:hover .goal-content {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.goal-content h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.goal-content p {
    color: var(--text-light);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.goal-progress {
    width: 100%;
    height: 8px;
    background: var(--gray-medium);
    border-radius: 4px;
    overflow: hidden;
}

.goal-progress-bar {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 4px;
    width: 0;
    transition: width 1s ease;
}

/* Report Section */
.sustainability-report-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    margin: 5rem 0;
    padding: 3rem;
    background: var(--light-blue);
    border-radius: 16px;
}

.report-content h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.report-content p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.report-features {
    margin-top: 2rem;
}

.report-feature {
    padding: 1rem;
    background: var(--white);
    border-radius: 8px;
    margin-bottom: 1rem;
    color: var(--text-light);
    font-size: 1.05rem;
}

.report-feature strong {
    color: var(--primary-blue);
}

.report-download {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-download-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    width: 100%;
    transition: all 0.3s ease;
}

.pdf-download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.pdf-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-download-card h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.pdf-download-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.pdf-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.pdf-download-btn:hover {
    background: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 90, 158, 0.3);
}

.pdf-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--accent-blue);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* About Page Styles */
.about-intro {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    margin-bottom: 5rem;
    padding: 3rem;
    background: var(--light-blue);
    border-radius: 16px;
}

.about-intro-text h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.about-intro-text p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

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

.about-stat-item {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.about-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin: 5rem 0;
}

.mission-vision-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.mission-vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.mission-vision-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.mission-vision-card:hover::before {
    transform: scaleY(1);
}

.mission-vision-card h3 {
    color: var(--primary-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.mission-vision-card p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.values-section {
    margin: 5rem 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.value-card-enhanced {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all 0.4s ease;
}

.value-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.value-icon-enhanced {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: var(--light-blue);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.value-icon-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.value-card-enhanced:hover .value-icon-enhanced {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.value-card-enhanced:hover .value-icon-enhanced::before {
    background: var(--white);
}

.value-card-enhanced h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.value-card-enhanced p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.activity-areas-section {
    margin: 5rem 0;
}

.activity-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.activity-area-card {
    background: var(--light-blue);
    padding: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.activity-area-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
    background: var(--white);
}

.activity-area-card h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.activity-area-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Timeline */
.timeline-section {
    margin: 5rem 0;
}

.timeline {
    position: relative;
    padding-left: 3rem;
    margin-top: 3rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--light-blue);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.timeline-year {
    position: absolute;
    left: -3rem;
    width: 60px;
    height: 60px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 90, 158, 0.3);
    z-index: 1;
}

.timeline-content {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    flex: 1;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-content {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.timeline-content h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Vision Mission Styles */
.vision-mission-hero {
    margin: 4rem 0;
}

.vision-card {
    background: var(--white);
    padding: 4rem;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-blue);
}

.vision-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-blue);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.vision-card:hover .vision-icon {
    transform: scale(1.1) rotate(10deg);
    background: var(--accent-blue);
    color: var(--white);
}

.vision-card h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.vision-card p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.mission-details {
    margin: 5rem 0;
}

.mission-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.pillar-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.pillar-card:hover::before {
    transform: scaleY(1);
}

.pillar-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--light-blue);
    margin-bottom: 1rem;
    line-height: 1;
    transition: all 0.3s ease;
}

.pillar-card:hover .pillar-number {
    color: var(--accent-blue);
    transform: scale(1.1);
}

.pillar-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.pillar-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.strategic-goals-section {
    margin: 5rem 0;
}

.strategic-goals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.strategic-goal-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    text-align: center;
}

.strategic-goal-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.goal-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    position: relative;
}

.goal-icon {
    width: 100%;
    height: 100%;
    background: var(--light-blue);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.goal-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.strategic-goal-card:hover .goal-icon {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.strategic-goal-card:hover .goal-icon::before {
    background: var(--white);
}

.strategic-goal-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.strategic-goal-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.goal-metrics {
    padding: 1rem;
    background: var(--light-blue);
    border-radius: 8px;
    margin-top: 1.5rem;
}

.goal-metrics span {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.goal-metrics {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

.core-values-section {
    margin: 5rem 0;
}

.core-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.core-value-item {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.core-value-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.core-value-item h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.core-value-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Management Styles */
.management-intro {
    margin: 4rem 0;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.management-intro h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.management-intro p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.management-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin: 5rem 0;
}

.management-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
    border: 1px solid var(--border-color);
}

.management-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.management-photo {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.management-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.management-card:hover .management-photo img {
    transform: scale(1.1);
}

.management-info {
    padding: 2.5rem;
}

.management-info h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.management-name {
    color: var(--accent-blue);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.management-experience {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.management-description {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.management-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.skill-tag {
    background: var(--light-blue);
    color: var(--primary-blue);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.management-philosophy-section {
    margin: 5rem 0;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.philosophy-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all 0.4s ease;
}

.philosophy-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.philosophy-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-blue);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.philosophy-card:hover .philosophy-icon {
    background: var(--accent-blue);
    color: var(--white);
    transform: scale(1.1) rotate(5deg);
}

.philosophy-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.philosophy-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.leadership-principles {
    margin: 5rem 0;
}

.principles-list {
    margin-top: 3rem;
}

.principle-item {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem;
    background: var(--white);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.principle-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.principle-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--light-blue);
    min-width: 60px;
    transition: all 0.3s ease;
}

.principle-item:hover .principle-number {
    color: var(--accent-blue);
    transform: scale(1.1);
}

.principle-content h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.principle-content p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Policies Styles */
.policies-intro {
    max-width: 900px;
    margin: 4rem auto;
    text-align: center;
}

.policies-intro p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.2rem;
}

.policies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin: 5rem 0;
}

.policy-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.policy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.policy-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.policy-card:hover::before {
    transform: scaleY(1);
}

.policy-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 2rem;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-blue);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.policy-card:hover .policy-icon {
    background: var(--accent-blue);
    color: var(--white);
    transform: scale(1.1) rotate(5deg);
}

.policy-card h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.policy-card > p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.policy-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1rem;
}

.policy-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.2rem;
}

.policy-implementation {
    margin: 5rem 0;
}

.implementation-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.implementation-step {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.implementation-step:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.implementation-step h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.implementation-step p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Certificates Styles */
.certificates-intro {
    max-width: 900px;
    margin: 4rem auto;
    text-align: center;
}

.certificates-intro p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.2rem;
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin: 5rem 0;
}

.certificate-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.certificate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-blue);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.certificate-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

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

.certificate-badge {
    width: 80px;
    height: 80px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 2rem;
    transition: all 0.3s ease;
}

.certificate-card:hover .certificate-badge {
    transform: scale(1.1) rotate(5deg);
    background: var(--primary-blue);
}

.certificate-card h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.certificate-type {
    color: var(--accent-blue);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.certificate-description {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.certificate-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.cert-date {
    color: var(--text-light);
    font-size: 0.9rem;
}

.cert-status {
    background: #10b981;
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.certification-process {
    margin: 5rem 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.process-step {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.process-step:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.process-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.process-step h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.process-step p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.quality-commitment {
    margin: 5rem 0;
    text-align: center;
}

.quality-commitment p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto 3rem;
}

.commitment-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.metric-card {
    background: var(--light-blue);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
}

.metric-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.metric-label {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 600;
}

/* Quality Management Styles */
.quality-intro {
    max-width: 900px;
    margin: 4rem auto;
    text-align: center;
}

.quality-intro h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.quality-intro p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.quality-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin: 5rem 0;
}

.principle-card-enhanced {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all 0.4s ease;
}

.principle-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.principle-icon-enhanced {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: var(--light-blue);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.principle-icon-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.principle-card-enhanced:hover .principle-icon-enhanced {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.principle-card-enhanced:hover .principle-icon-enhanced::before {
    background: var(--white);
}

.principle-card-enhanced h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.principle-card-enhanced p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.quality-process-section {
    margin: 5rem 0;
}

.process-timeline {
    position: relative;
    padding-left: 3rem;
    margin-top: 3rem;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--light-blue);
}

.process-timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.timeline-marker {
    position: absolute;
    left: -3rem;
    width: 60px;
    height: 60px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 90, 158, 0.3);
    z-index: 1;
}

.timeline-content-enhanced {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    flex: 1;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.process-timeline-item:hover .timeline-content-enhanced {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.timeline-content-enhanced h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.timeline-content-enhanced p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.7;
}

.test-validation-section {
    margin: 5rem 0;
}

.test-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.test-type-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.test-type-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.test-type-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.test-type-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.quality-metrics-section {
    margin: 5rem 0;
}

.metrics-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.metric-item-large {
    background: var(--light-blue);
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.metric-item-large:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: var(--white);
}

.metric-value-large {
    font-size: 4rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 1rem;
}

.metric-label-large {
    color: var(--text-light);
    font-size: 1.2rem;
    font-weight: 600;
}

/* AR&GE Styles */
.rd-intro {
    margin: 4rem 0;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.rd-intro h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.rd-intro p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.rd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.rd-stat-item {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: all 0.3s ease;
}

.rd-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.rd-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.rd-stat-label {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 600;
}

.rd-areas-section {
    margin: 5rem 0;
}

.rd-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.rd-area-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.rd-area-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.rd-area-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.rd-area-card:hover::before {
    transform: scaleY(1);
}

.rd-area-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 2rem;
    position: relative;
}

.icon-ai, .icon-radar, .icon-drone, .icon-comm, .icon-target, .icon-security {
    width: 100%;
    height: 100%;
    background: var(--light-blue);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.icon-ai::before, .icon-radar::before, .icon-drone::before, .icon-comm::before, .icon-target::before, .icon-security::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.rd-area-card:hover .icon-ai,
.rd-area-card:hover .icon-radar,
.rd-area-card:hover .icon-drone,
.rd-area-card:hover .icon-comm,
.rd-area-card:hover .icon-target,
.rd-area-card:hover .icon-security {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.rd-area-card:hover .icon-ai::before,
.rd-area-card:hover .icon-radar::before,
.rd-area-card:hover .icon-drone::before,
.rd-area-card:hover .icon-comm::before,
.rd-area-card:hover .icon-target::before,
.rd-area-card:hover .icon-security::before {
    background: var(--white);
}

.rd-area-card h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.rd-area-card > p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.rd-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rd-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.rd-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

.innovation-projects-section {
    margin: 5rem 0;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.project-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
    position: relative;
}

.project-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.project-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.project-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.project-status {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--light-blue);
    color: var(--primary-blue);
}

.university-partnerships {
    margin: 5rem 0;
}

.partnership-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.partnership-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.partnership-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.partnership-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.partnership-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.patents-section {
    margin: 5rem 0;
    text-align: center;
}

.patent-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.patent-stat-item {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.patent-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.patent-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.patent-label {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 600;
}

/* Product Showcase Styles */
.portfolio-intro {
    max-width: 1000px;
    margin: 4rem auto;
    text-align: center;
}

.portfolio-intro h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.portfolio-intro p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.product-showcase-section {
    margin: 6rem 0;
}

.product-showcase-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
}

.showcase-badge {
    width: 80px;
    height: 80px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 90, 158, 0.3);
}

.showcase-title h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.showcase-title p {
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1.6;
}

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

.product-showcase-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 500px;
}

.product-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-showcase-section:hover .product-showcase-image img {
    transform: scale(1.05);
}

.product-overlay-badge {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: var(--accent-blue);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-showcase-details {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

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

.highlight-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--light-blue);
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.highlight-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
    background: var(--white);
}

.highlight-icon {
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border-radius: 10px;
    flex-shrink: 0;
    position: relative;
}

.highlight-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: var(--white);
    border-radius: 4px;
}

.highlight-content {
    flex: 1;
}

.highlight-content strong {
    display: block;
    color: var(--primary-blue);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.highlight-content span {
    color: var(--text-light);
    font-size: 0.95rem;
}

.product-description-enhanced h3 {
    color: var(--primary-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.product-description-enhanced p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.product-specs-enhanced {
    background: var(--light-blue);
    padding: 2.5rem;
    border-radius: 12px;
}

.product-specs-enhanced h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

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

.spec-item-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: var(--white);
    border-radius: 8px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.spec-item-enhanced:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.spec-label {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 600;
}

.spec-value {
    color: var(--primary-blue);
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
}

.product-features-list {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.product-features-list h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.features-list-enhanced {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.features-list-enhanced li {
    padding: 1rem;
    padding-left: 2.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    background: var(--light-blue);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.features-list-enhanced li:hover {
    background: var(--white);
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.features-list-enhanced li::before {
    content: '✓';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
}

.product-cta {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.competitive-advantages {
    margin: 5rem 0;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.advantage-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

.advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.advantage-icon-large {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    background: var(--light-blue);
    border-radius: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.advantage-icon-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border-radius: 10px;
}

.advantage-card:hover .advantage-icon-large {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.advantage-card:hover .advantage-icon-large::before {
    background: var(--white);
}

.advantage-card h4 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.advantage-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.technical-standards {
    margin: 5rem 0;
}

.standards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.standard-item {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.standard-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.standard-item h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.standard-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Special Solutions Styles */
.special-solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin: 5rem 0;
}

.special-solution-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
}

.special-solution-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.solution-number {
    position: absolute;
    top: 2rem;
    left: 2rem;
    width: 60px;
    height: 60px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 90, 158, 0.3);
}

.solution-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.solution-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.special-solution-card:hover .solution-image img {
    transform: scale(1.1);
}

.solution-content {
    padding: 2.5rem;
}

.solution-content h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.solution-subtitle {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.solution-features-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.feature-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

.feature-check {
    width: 24px;
    height: 24px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.solution-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: var(--light-blue);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.stat-compact {
    text-align: center;
}

.stat-compact strong {
    display: block;
    color: var(--accent-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-compact span {
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-small {
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
}

.use-cases-section {
    margin: 5rem 0;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.use-case-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.use-case-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.use-case-card h4 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.use-case-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.product-highlights-section {
    margin: 5rem 0;
}

/* Academy Styles */
.academy-stats-section {
    margin: 5rem 0;
}

.training-programs-section {
    margin: 5rem 0;
}

.training-programs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 3rem;
}

.training-program-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.training-program-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.training-program-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.training-program-card:hover::before {
    transform: scaleY(1);
}

.program-number {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--light-blue);
    color: var(--primary-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.training-program-card:hover .program-number {
    background: var(--accent-blue);
    color: var(--white);
    transform: scale(1.1) rotate(5deg);
}

.program-icon-large {
    width: 80px;
    height: 80px;
    background: var(--light-blue);
    border-radius: 12px;
    margin-bottom: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.program-icon-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.training-program-card:hover .program-icon-large {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.training-program-card:hover .program-icon-large::before {
    background: var(--white);
}

.training-program-card h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.program-subtitle {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.program-details {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--light-blue);
    border-radius: 8px;
}

.program-duration, .program-level {
    color: var(--text-light);
    font-size: 0.95rem;
}

.program-duration strong, .program-level strong {
    color: var(--primary-blue);
}

.program-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.program-features-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1rem;
}

.program-features-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.1rem;
}

.program-price {
    background: var(--accent-blue);
    color: var(--white);
    padding: 1.25rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-label {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
}

.price-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.methodology-section {
    margin: 5rem 0;
}

.methodology-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.methodology-card-enhanced {
    background: var(--white);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.methodology-card-enhanced:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.methodology-icon-enhanced {
    width: 80px;
    height: 80px;
    background: var(--light-blue);
    border-radius: 12px;
    margin-bottom: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.methodology-icon-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.methodology-card-enhanced:hover .methodology-icon-enhanced {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.methodology-card-enhanced:hover .methodology-icon-enhanced::before {
    background: var(--white);
}

.methodology-card-enhanced h4 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.methodology-card-enhanced > p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.methodology-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.methodology-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.methodology-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

.partnership-stats {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.facilities-section {
    margin: 5rem 0;
}

.facilities-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 3rem;
}

.facility-card-enhanced {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

.facility-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.facility-image-placeholder {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.facility-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.facility-card-enhanced:hover .facility-image-placeholder img {
    transform: scale(1.1);
}

.facility-content {
    padding: 2.5rem;
}

.facility-content h4 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.facility-content > p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.facility-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.facility-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.facility-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

.certification-section {
    margin: 5rem 0;
}

.certification-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.cert-benefit-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.cert-benefit-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.cert-benefit-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cert-benefit-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Career Styles */
.why-harpia-section {
    margin: 5rem 0;
}

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

.why-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.why-icon-large {
    width: 80px;
    height: 80px;
    background: var(--light-blue);
    border-radius: 12px;
    margin-bottom: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.why-icon-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.why-card:hover .why-icon-large {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.why-card:hover .why-icon-large::before {
    background: var(--white);
}

.why-card h4 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.why-card > p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.why-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.why-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

.company-stats-section {
    margin: 5rem 0;
}

.open-positions-section {
    margin: 5rem 0;
}

.jobs-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.job-card-enhanced {
    background: var(--white);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.job-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.job-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.job-card-enhanced:hover::before {
    transform: scaleY(1);
}

.job-header-enhanced {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.job-title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.job-title-section h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}

.job-badge-enhanced {
    background: var(--accent-blue);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.job-department-enhanced {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.job-description-enhanced {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.job-requirements-enhanced {
    background: var(--light-blue);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.job-requirements-enhanced h5 {
    color: var(--primary-blue);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirements-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.requirements-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

.job-benefits {
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--accent-blue);
    color: var(--text-light);
    font-size: 0.95rem;
}

.job-benefits strong {
    color: var(--primary-blue);
}

.application-process-section {
    margin: 5rem 0;
}

.process-timeline-enhanced {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.process-step-enhanced {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
    position: relative;
}

.process-step-enhanced:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

.process-step-number-enhanced {
    position: absolute;
    top: -20px;
    left: 2rem;
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 90, 158, 0.3);
}

.process-step-content h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.process-step-content p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.benefits-section {
    margin: 5rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.benefit-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.benefit-icon {
    width: 70px;
    height: 70px;
    background: var(--light-blue);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.benefit-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    background: var(--accent-blue);
    border-radius: 8px;
}

.benefit-card:hover .benefit-icon {
    background: var(--accent-blue);
    transform: scale(1.1) rotate(5deg);
}

.benefit-card:hover .benefit-icon::before {
    background: var(--white);
}

.benefit-card h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.benefit-card > p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.benefit-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-features li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.benefit-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

.company-culture-section {
    margin: 5rem 0;
}

.culture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.culture-item {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.culture-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.culture-item h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.culture-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
}

.card h3 {
    color: var(--primary-blue);
    margin-bottom: 1.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
}

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

/* Footer */
.footer {
    background: var(--dark-blue);
    color: var(--white);
    padding: 5rem 2rem 2.5rem;
    margin-top: 6rem;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

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

.footer-section h4 {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.3px;
}

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

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--white);
    padding-left: 0.75rem;
    transform: translateX(5px);
}

.footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    margin: 2rem 0;
}

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

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    position: relative;
}

.footer-legal-links a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

/* Page Content */
.page-header {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.page-content {
    padding: 5rem 2rem;
    background: var(--white);
}

.content-section {
    max-width: 1100px;
    margin: 0 auto 4rem;
}

.content-section h2 {
    color: var(--primary-blue);
    font-size: 2.2rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 3px solid var(--accent-blue);
    font-weight: 700;
    letter-spacing: -0.3px;
}

.content-section p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.75rem;
    font-size: 1.1rem;
}

.content-section ul {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.content-section li {
    color: var(--text-light);
    margin-bottom: 0.75rem;
    line-height: 1.8;
}

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

.product-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.product-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    background: var(--light-blue);
}

.product-content {
    padding: 2rem;
}

.product-content h3 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.product-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.product-features {
    list-style: none;
    margin-top: 1rem;
}

.product-features li {
    padding: 0.5rem 0;
    color: var(--text-light);
    padding-left: 1.5rem;
    position: relative;
}

.product-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

/* Contact Form */
.contact-form {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

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

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

/* Responsive */
@media (max-width: 968px) {
    .header {
        position: relative;
        z-index: 1002;
    }

    .logo {
        position: relative;
        z-index: 1003;
    }

    .menu-toggle {
        display: flex;
        z-index: 1003;
        position: relative;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        padding: 5rem 2rem 2rem;
        transition: left 0.3s ease;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .nav-link {
        width: 100%;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-link span {
        font-size: 0.75rem;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        margin-top: 0.5rem;
        margin-left: 1rem;
        width: calc(100% - 1rem);
        background: var(--gray-light);
        border-radius: 8px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-item.dropdown.active .dropdown-menu {
        max-height: 500px;
        padding: 0.5rem 0;
    }

    /* Desktop dropdown still works on hover */
    @media (min-width: 969px) {
        .dropdown:hover .dropdown-menu {
            max-height: none;
            padding: 1rem 0;
        }
    }

    .dropdown-item {
        padding: 0.75rem 1rem;
    }

    .dropdown-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .cards-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile Menu Overlay and Backdrop */
@media (max-width: 968px) {
    /* Backdrop overlay */
    .menu-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1000;
        pointer-events: none;
    }

    /* Smooth scroll for mobile menu */
    .nav-menu {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Better touch targets */
    .nav-link,
    .dropdown-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        pointer-events: auto;
        cursor: pointer;
    }

    /* Ensure all interactive elements are clickable */
    .nav-item,
    .dropdown-item {
        pointer-events: auto;
    }
}

/* Product Detail Page Styles */
.product-hero {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 6rem 2rem 4rem;
    position: relative;
    overflow: hidden;
}

.product-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.product-hero-content {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.product-hero-image {
    width: 100%;
    height: 400px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
}

.product-hero-text h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.product-hero-text p {
    font-size: 1.2rem;
    opacity: 0.95;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Technical Specifications */
.tech-specs {
    background: var(--white);
    border-radius: 12px;
    padding: 3.5rem;
    margin: 4rem 0;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.tech-specs h3 {
    color: var(--primary-blue);
    font-size: 2rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 3px solid var(--accent-blue);
    font-weight: 700;
}

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

.spec-item {
    padding: 1.75rem;
    background: var(--gray-light);
    border-radius: 8px;
    border-left: 4px solid var(--accent-blue);
    transition: all 0.3s ease;
}

.spec-item:hover {
    background: var(--light-blue);
    transform: translateX(5px);
}

.spec-item strong {
    color: var(--primary-blue);
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.spec-item span {
    color: var(--text-light);
    line-height: 1.6;
}

/* Engineering Details */
.engineering-section {
    background: var(--gray-light);
    padding: 5rem 2rem;
    margin: 4rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.engineering-content {
    max-width: 1200px;
    margin: 0 auto;
}

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

.engineering-card {
    background: var(--white);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    height: 100%;
}

.engineering-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.engineering-card h4 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
}

.engineering-card h4::before {
    content: '';
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 8px;
    display: inline-block;
    margin-right: 1rem;
}

.engineering-card p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.engineering-card ul {
    list-style: none;
    margin-top: 1.5rem;
}

.engineering-card li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1rem;
}

.engineering-card li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
}

/* Product Features Enhanced */
.product-features-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.feature-item:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
}

.feature-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: var(--light-blue);
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.feature-icon::before {
    content: '';
    width: 30px;
    height: 30px;
    background: var(--accent-blue);
    border-radius: 4px;
    position: absolute;
}

.feature-item:hover .feature-icon {
    background: var(--accent-blue);
    transform: scale(1.1);
}

.feature-item:hover .feature-icon::before {
    background: var(--white);
}

.feature-text h5 {
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.feature-text p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Stats Section */
.stats-section {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 5rem 2rem;
    margin: 4rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.stat-item h3 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -1px;
}

.stat-item p {
    font-size: 1.2rem;
    opacity: 0.95;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Enhanced Product Cards */
.product-card-enhanced {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card-enhanced:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.product-image-enhanced {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--light-blue) 0%, #d0e5ff 100%);
    position: relative;
    overflow: hidden;
}

.product-image-enhanced::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 51, 102, 0.1) 100%);
}

.product-content-enhanced {
    padding: 2.5rem;
}

.product-badge {
    display: inline-block;
    background: var(--accent-blue);
    color: var(--white);
    padding: 0.6rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    letter-spacing: 0.3px;
}

.product-content-enhanced h3 {
    color: var(--primary-blue);
    font-size: 1.9rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.product-content-enhanced .product-description {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.75rem;
    font-size: 1.1rem;
}

/* Tabbed Content */
.tabs {
    margin: 3rem 0;
}

.tab-buttons {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tab-button {
    padding: 1rem 2rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    top: 2px;
}

.tab-button.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Index Enhancements */
.hero-video-section {
    position: relative;
    height: 600px;
    overflow: hidden;
    background: var(--gradient-blue);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 51, 102, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.hero-overlay-content {
    text-align: center;
    color: var(--white);
    z-index: 2;
    position: relative;
}

.hero-overlay-content h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.hero-overlay-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* Value Propositions */
.value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin: 4rem 0;
}

.value-prop {
    text-align: center;
    padding: 2.5rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.value-prop:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.value-prop-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 2rem;
    background: var(--light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    transition: all 0.3s ease;
}

.value-prop:hover .value-prop-icon {
    transform: scale(1.1);
    background: var(--accent-blue);
    color: var(--white);
}

.value-prop h3 {
    color: var(--primary-blue);
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.value-prop p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
}

@media (max-width: 968px) {
    .product-hero-content {
        grid-template-columns: 1fr;
    }
    
    .product-hero-text h1 {
        font-size: 2rem;
    }
    
    .engineering-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hero {
        padding: 5rem 1.5rem;
    }

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

    .hero-buttons {
        flex-direction: column;
    }

    .section {
        padding: 3rem 1.5rem;
    }
    
    .product-hero {
        padding: 4rem 1.5rem 3rem;
    }
    
    .product-hero-text h1 {
        font-size: 1.8rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .tab-buttons {
        flex-direction: column;
    }
    
    .activity-grid {
        grid-template-columns: 1fr;
    }
    
    .stm-activity-grid {
        grid-template-columns: 1fr;
    }
    
    .product-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .engineering-grid-compact {
        grid-template-columns: 1fr;
    }
    
    .product-features-compact {
        grid-template-columns: 1fr;
    }
    
    .usage-grid-compact {
        grid-template-columns: 1fr;
    }
    
    .page-header-enhanced {
        grid-template-columns: 1fr;
        padding: 4rem 1.5rem;
    }
    
    .sustainability-intro {
        grid-template-columns: 1fr;
    }
    
    .sustainability-grid {
        grid-template-columns: 1fr;
    }
    
    .social-responsibility-grid {
        grid-template-columns: 1fr;
    }
    
    .economic-sustainability {
        grid-template-columns: 1fr;
    }
    
    .sustainability-report-section {
        grid-template-columns: 1fr;
    }
    
    .about-intro {
        grid-template-columns: 1fr;
    }
    
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .activity-areas-grid {
        grid-template-columns: 1fr;
    }
    
    .management-team-grid {
        grid-template-columns: 1fr;
    }
    
    .philosophy-grid {
        grid-template-columns: 1fr;
    }
    
    .policies-grid {
        grid-template-columns: 1fr;
    }
    
    .certificates-grid {
        grid-template-columns: 1fr;
    }
    
    .quality-principles-grid {
        grid-template-columns: 1fr;
    }
    
    .rd-areas-grid {
        grid-template-columns: 1fr;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .rd-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .patent-stats {
        grid-template-columns: 1fr;
    }
    
    .product-showcase-content {
        grid-template-columns: 1fr;
    }
    
    .special-solutions-grid {
        grid-template-columns: 1fr;
    }
    
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .standards-grid {
        grid-template-columns: 1fr;
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
    }
    
    .features-list-enhanced {
        grid-template-columns: 1fr;
    }
    
    .specs-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .product-highlights {
        grid-template-columns: 1fr;
    }
    
    .solution-features-compact {
        grid-template-columns: 1fr;
    }
    
    .solution-stats {
        grid-template-columns: 1fr;
    }
    
    .training-programs-grid {
        grid-template-columns: 1fr;
    }
    
    .methodology-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .facilities-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .certification-benefits {
        grid-template-columns: 1fr;
    }
    
    .why-harpia-grid {
        grid-template-columns: 1fr;
    }
    
    .jobs-grid-enhanced {
        grid-template-columns: 1fr;
    }
    
    .process-timeline-enhanced {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .culture-grid {
        grid-template-columns: 1fr;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .career-hero-content {
        grid-template-columns: 1fr;
    }
    
    .career-text h2 {
        font-size: 2rem;
    }
    
    .jobs-grid {
        grid-template-columns: 1fr;
    }
    
    .process-steps {
        grid-template-columns: 1fr;
    }
    
    .methodology-grid {
        grid-template-columns: 1fr;
    }
    
    .partnership-grid {
        grid-template-columns: 1fr;
    }
    
    .facilities-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .video-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-geometric-1,
    .hero-geometric-2,
    .hero-geometric-3 {
        display: none;
    }
    
    .hero {
        min-height: 500px;
        padding: 6rem 1.5rem;
    }
    
    .footer {
        padding: 3rem 1.5rem 2rem;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .footer-legal-links {
        flex-direction: column;
        gap: 1rem;
    }
    
    .footer-legal-links a {
        text-align: center;
        width: 100%;
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-section h4 {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .footer-links {
        font-size: 0.9rem;
    }
    
    .footer-legal-links {
        gap: 0.75rem;
    }
    
    .footer-legal-links a {
        font-size: 0.85rem;
        padding: 0.6rem;
    }
    
    .footer-bottom {
        font-size: 0.85rem;
        padding-top: 1.5rem;
    }
}

/* Military Products Enhanced Styles */
.military-hero {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
}

.military-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.military-hero-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.military-hero-text {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.military-hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--white);
}

.hero-subtitle {
    font-size: 1.2rem;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 2.5rem;
    color: var(--white);
}

.hero-trust-indicators {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.trust-icon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--white);
}

.military-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.hero-stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.hero-stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.stat-number-large {
    font-size: 3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label-large {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Trust Section */
.military-trust-section {
    margin: 5rem 0;
    padding: 4rem 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.trust-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.trust-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.trust-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--light-blue);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.trust-card:hover .trust-card-icon {
    background: var(--accent-blue);
    transform: scale(1.1);
}

/* Shield Icon */
.trust-icon-shield {
    background: var(--light-blue);
}

.trust-icon-shield::before {
    content: '';
    width: 40px;
    height: 45px;
    background: var(--accent-blue);
    clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 50% 85%, 0% 100%, 0% 20%);
    position: absolute;
}

.trust-icon-shield::after {
    content: '';
    width: 25px;
    height: 30px;
    background: var(--white);
    clip-path: polygon(50% 0%, 100% 15%, 100% 70%, 50% 60%, 0% 70%, 0% 15%);
    position: absolute;
}

.trust-card:hover .trust-icon-shield::before {
    background: var(--white);
}

.trust-card:hover .trust-icon-shield::after {
    background: var(--accent-blue);
}

/* Trophy Icon */
.trust-icon-trophy {
    background: var(--light-blue);
}

.trust-icon-trophy::before {
    content: '';
    width: 50px;
    height: 35px;
    background: var(--accent-blue);
    border-radius: 4px 4px 0 0;
    position: absolute;
    top: 10px;
}

.trust-icon-trophy::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid var(--accent-blue);
    position: absolute;
    bottom: 15px;
}

.trust-card:hover .trust-icon-trophy::before,
.trust-card:hover .trust-icon-trophy::after {
    background: var(--white);
    border-top-color: var(--white);
}

/* Certificate Icon */
.trust-icon-certificate {
    background: var(--light-blue);
}

.trust-icon-certificate::before {
    content: '';
    width: 45px;
    height: 35px;
    background: var(--accent-blue);
    border-radius: 2px;
    position: absolute;
    top: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trust-icon-certificate::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--white);
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 12px 0 var(--white), 0 20px 0 var(--white);
}

.trust-card:hover .trust-icon-certificate::before {
    background: var(--white);
}

.trust-card:hover .trust-icon-certificate::after {
    background: var(--accent-blue);
    box-shadow: 0 12px 0 var(--accent-blue), 0 20px 0 var(--accent-blue);
}

/* Lock Icon */
.trust-icon-lock {
    background: var(--light-blue);
}

.trust-icon-lock::before {
    content: '';
    width: 30px;
    height: 25px;
    background: var(--accent-blue);
    border-radius: 4px;
    position: absolute;
    bottom: 15px;
}

.trust-icon-lock::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid var(--accent-blue);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.trust-card:hover .trust-icon-lock::before,
.trust-card:hover .trust-icon-lock::after {
    background: var(--white);
    border-color: var(--white);
}

.trust-card h3 {
    color: var(--primary-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.trust-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1rem;
}

/* Operational Excellence */
.operational-excellence-section {
    background: var(--light-blue);
    padding: 5rem 2rem;
    border-radius: 16px;
    margin: 5rem 0;
}

.excellence-header {
    text-align: center;
    margin-bottom: 4rem;
}

.excellence-header .section-title {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.excellence-header .section-subtitle {
    color: var(--text-light);
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

.excellence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.excellence-card {
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.excellence-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-blue);
}

.excellence-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 1rem;
    line-height: 1;
}

.excellence-card h4 {
    color: var(--primary-blue);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.excellence-card p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1rem;
}

/* Test & Validation */
.test-validation-section {
    margin: 5rem 0;
    padding: 4rem 0;
}

.test-header {
    text-align: center;
    margin-bottom: 4rem;
}

.test-header .section-title {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.test-header .section-subtitle {
    color: var(--text-light);
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

.test-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.test-process-item {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border-left: 4px solid var(--accent-blue);
    position: relative;
}

.test-process-item:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.test-process-number {
    position: absolute;
    top: -15px;
    left: 2.5rem;
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
}

.test-process-item h4 {
    color: var(--primary-blue);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 1.5rem 0 1rem 0;
}

.test-process-item p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1rem;
}

/* Standards Enhanced */
.standard-item {
    position: relative;
    padding-left: 3rem;
}

.standard-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-blue);
    border-radius: 12px;
}

/* Flag Icon */
.standard-icon-flag {
    position: relative;
}

.standard-icon-flag::before {
    content: '';
    width: 25px;
    height: 18px;
    background: var(--accent-blue);
    position: absolute;
    border-radius: 2px;
}

.standard-icon-flag::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 8px solid var(--accent-blue);
    position: absolute;
    right: -8px;
}

/* Check Icon */
.standard-icon-check::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid var(--accent-blue);
    border-radius: 4px;
    position: absolute;
}

.standard-icon-check::after {
    content: '';
    width: 6px;
    height: 12px;
    border: 3px solid var(--accent-blue);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    position: absolute;
    top: 8px;
    left: 10px;
}

/* Gear Icon */
.standard-icon-gear {
    position: relative;
}

.standard-icon-gear::before {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid var(--accent-blue);
    border-radius: 50%;
    position: absolute;
}

.standard-icon-gear::after {
    content: '';
    width: 30px;
    height: 30px;
    background: 
        radial-gradient(circle at center, var(--accent-blue) 2px, transparent 2px),
        radial-gradient(circle at center, transparent 8px, var(--accent-blue) 8px, transparent 12px);
    position: absolute;
    border-radius: 50%;
}

/* Code Icon */
.standard-icon-code::before {
    content: '<>';
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-blue);
    position: absolute;
    font-family: 'Courier New', monospace;
    letter-spacing: -2px;
}

/* Test Icon */
.standard-icon-test {
    position: relative;
}

.standard-icon-test::before {
    content: '';
    width: 25px;
    height: 25px;
    border: 3px solid var(--accent-blue);
    border-radius: 4px;
    position: absolute;
}

.standard-icon-test::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    box-shadow: 0 8px 0 var(--accent-blue);
}

/* Support Icon */
.standard-icon-support {
    position: relative;
}

.standard-icon-support::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid var(--accent-blue);
    position: absolute;
    top: 5px;
}

.standard-icon-support::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid var(--light-blue);
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
}

/* Military CTA Section */
.military-cta-section {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 5rem 2rem;
    border-radius: 16px;
    margin: 5rem 0;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--white);
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

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

.btn-large {
    padding: 1.25rem 3rem;
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 968px) {
    .military-hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .military-hero-text h1 {
        font-size: 2.5rem;
    }
    
    .military-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .excellence-grid,
    .test-process-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .military-hero {
        padding: 4rem 1.5rem;
    }
    
    .military-hero-text h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .military-hero-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-number-large {
        font-size: 2.5rem;
    }
    
    .hero-trust-indicators {
        flex-direction: column;
        gap: 1rem;
    }
    
    .trust-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-content h2 {
        font-size: 1.8rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .btn-large {
        width: 100%;
    }
}

/* Telemetry Section */
.telemetry-section {
    background: linear-gradient(135deg, #0a1a2e 0%, #162b4a 100%);
    border-radius: 20px;
    padding: 3rem;
    margin: 4rem 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 153, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.telemetry-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 153, 255, 0.03) 2px, rgba(0, 153, 255, 0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 153, 255, 0.03) 2px, rgba(0, 153, 255, 0.03) 4px);
    pointer-events: none;
}

.telemetry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.telemetry-header h2 {
    color: var(--white);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.telemetry-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff4444;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.6);
    animation: pulse 2s infinite;
}

.status-indicator.active {
    background: #44ff44;
    box-shadow: 0 0 10px rgba(68, 255, 68, 0.6);
}

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

.status-text {
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
}

.telemetry-display {
    position: relative;
    z-index: 1;
}

.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.telemetry-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 153, 255, 0.3);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.telemetry-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 153, 255, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 153, 255, 0.2);
}

.telemetry-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(0, 153, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    border: 2px solid rgba(0, 153, 255, 0.4);
}

.telemetry-icon::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--accent-blue);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.altitude-icon::before {
    clip-path: polygon(50% 0%, 0% 100%, 50% 80%, 100% 100%);
}

.speed-icon::before {
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}

.gps-icon::before {
    clip-path: circle(50%);
}

.battery-icon::before {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.signal-icon::before {
    clip-path: polygon(0% 100%, 25% 50%, 50% 75%, 75% 25%, 100% 50%, 100% 100%);
}

.distance-icon::before {
    clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}

.telemetry-content {
    flex: 1;
}

.telemetry-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.telemetry-value {
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px rgba(0, 153, 255, 0.5);
}

.telemetry-value.gps-value {
    font-size: 1.3rem;
    line-height: 1.4;
}

.telemetry-unit {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 400;
}

/* Product Breadcrumb */
.product-breadcrumb {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.product-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-breadcrumb a:hover {
    color: var(--white);
}

.product-breadcrumb span {
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.product-subtitle {
    display: block;
    font-size: 0.5em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Product Title Row */
.product-title-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.product-code {
    color: var(--accent-blue);
    font-size: 0.9em;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.combat-proven-badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: rgba(255, 69, 0, 0.1);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ff4500;
    letter-spacing: 0.5px;
}

/* Capabilities Section */
.capabilities-section {
    margin: 3rem 0;
}

.capabilities-section h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

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

.capability-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--gray-light);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.capability-item:hover {
    background: var(--light-blue);
    transform: translateX(5px);
}

.capability-check {
    width: 20px;
    height: 20px;
    background: var(--accent-blue);
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
}

.capability-check::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: 2px solid var(--white);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.capability-item span:last-child {
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Product Specs Table */
.product-specs-table {
    margin: 3rem 0;
}

.product-specs-table h4 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.specs-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.specs-table tbody tr:last-child {
    border-bottom: none;
}

.specs-table tbody tr:hover {
    background: var(--light-blue);
}

.spec-label-cell {
    padding: 1.25rem 1.5rem;
    color: var(--text-dark);
    font-weight: 600;
    width: 40%;
    border-right: 1px solid var(--border-color);
}

.spec-value-cell {
    padding: 1.25rem 1.5rem;
    color: var(--accent-blue);
    font-weight: 600;
    text-align: right;
}

/* Product Section Alt */
.product-section-alt {
    background: var(--gray-light);
    padding: 5rem 2rem;
    border-radius: 16px;
    margin: 5rem 0;
}

.product-content-reverse {
    flex-direction: row-reverse;
}

.product-content-reverse .product-showcase-image {
    order: 2;
}

.product-content-reverse .product-showcase-details {
    order: 1;
}

/* Responsive for new elements */
@media (max-width: 968px) {
    .product-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
    
    .specs-table {
        font-size: 0.9rem;
    }
    
    .spec-label-cell,
    .spec-value-cell {
        padding: 1rem;
    }
    
    .product-content-reverse {
        flex-direction: column;
    }
    
    .product-content-reverse .product-showcase-image,
    .product-content-reverse .product-showcase-details {
        order: 0;
    }
}

@media (max-width: 640px) {
    .product-code {
        font-size: 0.8em;
    }
    
    .combat-proven-badge {
        font-size: 0.75rem;
        padding: 0.3rem 1rem;
    }
    
    .capabilities-grid {
        gap: 0.75rem;
    }
    
    .capability-item {
        padding: 0.5rem;
    }
    
    .spec-label-cell {
        width: 50%;
        font-size: 0.85rem;
    }
    
    .spec-value-cell {
        font-size: 0.85rem;
    }
}

/* Military Category Hero - Unique Design */
.military-category-hero {
    background: linear-gradient(135deg, #0a1a2e 0%, #162b4a 50%, #1a3d5f 100%);
    color: var(--white);
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
}

.military-category-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(0, 102, 204, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 153, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.military-hero-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.military-hero-main h1 {
    font-size: 3.8rem;
    font-weight: 800;
    margin: 1.5rem 0;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, #a0c4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-badge-military {
    display: inline-block;
    background: rgba(0, 153, 255, 0.2);
    border: 1px solid rgba(0, 153, 255, 0.4);
    color: #66b3ff;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.military-hero-description {
    font-size: 1.25rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
}

.military-stats-inline {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
}

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

.stat-inline .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #66b3ff;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-inline .stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

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

.hero-visual-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.2) 0%, rgba(0, 153, 255, 0.1) 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 153, 255, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-icon-drone {
    width: 200px;
    height: 150px;
    position: relative;
}

.visual-icon-drone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 60px;
    background: rgba(102, 179, 255, 0.4);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border: 2px solid rgba(102, 179, 255, 0.6);
}

.visual-icon-drone::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 20px;
    background: rgba(102, 179, 255, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(102, 179, 255, 0.5);
}

/* Trust Banner */
.military-trust-banner {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 3rem;
    margin: 4rem 0;
    border: 1px solid var(--border-color);
}

.trust-banner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

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

.trust-icon-circle {
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.trust-icon-circle::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-size: 1.5rem;
    font-weight: bold;
}

.trust-banner-content h4 {
    color: var(--primary-blue);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.trust-banner-content p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.6;
}

/* Military Intro Enhanced */
.military-intro-enhanced {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    margin: 5rem 0;
    align-items: start;
}

.military-intro-content h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.military-intro-content p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.military-intro-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.feature-box {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.feature-box:hover {
    border-color: var(--accent-blue);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.feature-box h4 {
    color: var(--primary-blue);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.feature-box p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Military Products Section */
.military-products-section {
    margin: 5rem 0;
}

.products-header {
    text-align: center;
    margin-bottom: 4rem;
}

.products-header h2 {
    color: var(--primary-blue);
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.products-header p {
    color: var(--text-light);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

.product-category-block {
    margin-bottom: 5rem;
}

.category-header {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.category-number {
    font-size: 4rem;
    font-weight: 800;
    color: var(--accent-blue);
    opacity: 0.2;
    line-height: 1;
    flex-shrink: 0;
}

.category-title-group h3 {
    color: var(--primary-blue);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.category-title-group p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.7;
}

.product-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2.5rem;
}

.product-showcase-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    border: 1px solid var(--border-color);
}

.product-showcase-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-blue);
}

.showcase-image-wrapper {
    width: 100%;
    height: 280px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--light-blue) 0%, #d0e5ff 100%);
}

.showcase-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-showcase-card:hover .showcase-image-wrapper img {
    transform: scale(1.1);
}

.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 51, 102, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-showcase-card:hover .showcase-overlay {
    opacity: 1;
}

.view-details {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border: 2px solid var(--white);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.view-details:hover {
    background: var(--white);
    color: var(--primary-blue);
}

.showcase-content {
    padding: 2.5rem;
}

.product-code-badge {
    display: inline-block;
    background: var(--accent-blue);
    color: var(--white);
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.showcase-content h4 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.showcase-content p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.showcase-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.feature-tag {
    display: inline-block;
    background: var(--light-blue);
    color: var(--accent-blue);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Activity Hero Section (Category Page) - Keep for Special */
.activity-hero-section {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
}

.activity-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.activity-hero-content {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.activity-hero-text {
    max-width: 900px;
}

.activity-hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--white);
}

.hero-description {
    font-size: 1.3rem;
    line-height: 1.8;
    opacity: 0.95;
    color: var(--white);
}

/* Activity Intro Section */
.activity-intro-section {
    margin: 5rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.activity-intro-section h2 {
    color: var(--primary-blue);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.activity-intro-section p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Capabilities List Section */
.capabilities-list-section {
    margin: 4rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.capabilities-list-section h3 {
    color: var(--primary-blue);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.capabilities-list {
    list-style: none;
    padding: 0;
}

.capabilities-list li {
    padding: 1rem 0;
    padding-left: 2rem;
    position: relative;
    color: var(--text-dark);
    font-size: 1.05rem;
    line-height: 1.7;
    border-bottom: 1px solid var(--border-color);
}

.capabilities-list li:last-child {
    border-bottom: none;
}

.capabilities-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Product Categories Section */
.product-categories-section {
    margin: 5rem 0;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.product-categories-section h2 {
    color: var(--primary-blue);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.category-description {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 3rem;
}

/* Product Card Enhanced Link */
a.product-card-enhanced {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.product-card-enhanced:hover {
    text-decoration: none;
}

a.product-card-enhanced .product-content-enhanced h3 {
    transition: color 0.3s ease;
}

a.product-card-enhanced:hover .product-content-enhanced h3 {
    color: var(--accent-blue);
}

/* Responsive for category pages */
@media (max-width: 968px) {
    .activity-hero-text h1 {
        font-size: 2.5rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .activity-intro-section h2 {
        font-size: 2rem;
    }
    
    .product-categories-section h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 968px) {
    .military-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .military-hero-main h1 {
        font-size: 2.8rem;
    }
    
    .military-stats-inline {
        gap: 2rem;
    }
    
    .trust-banner-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .military-intro-enhanced {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .military-intro-features {
        grid-template-columns: 1fr;
    }
    
    .product-showcase-grid {
        grid-template-columns: 1fr;
    }
    
    .category-header {
        flex-direction: column;
        gap: 1rem;
    }
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@media (max-width: 968px) {
    .telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .telemetry-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .telemetry-icon {
        width: 50px;
        height: 50px;
    }
    
    .telemetry-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 640px) {
    .telemetry-section {
        padding: 2rem 1.5rem;
    }
    
    .telemetry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .telemetry-header h2 {
        font-size: 1.5rem;
    }
    
    .telemetry-grid {
        grid-template-columns: 1fr;
    }
    
    .telemetry-value {
        font-size: 1.3rem;
    }
    
    .telemetry-value.gps-value {
        font-size: 1.1rem;
    }
    
    .military-category-hero {
        padding: 4rem 1.5rem;
    }
    
    .military-hero-main h1 {
        font-size: 2.2rem;
    }
    
    .military-hero-description {
        font-size: 1.1rem;
    }
    
    .military-stats-inline {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .stat-inline .stat-number {
        font-size: 2rem;
    }
    
    .military-trust-banner {
        padding: 2rem 1.5rem;
    }
    
    .military-intro-content h2 {
        font-size: 2rem;
    }
    
    .products-header h2 {
        font-size: 2rem;
    }
    
    .category-title-group h3 {
        font-size: 1.8rem;
    }
    
    .activity-hero-section {
        padding: 4rem 1.5rem;
    }
    
    .activity-hero-text h1 {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .activity-intro-section {
        margin: 3rem 0;
        padding: 0 1rem;
    }
    
    .activity-intro-section h2 {
        font-size: 1.8rem;
    }
    
    .capabilities-list-section {
        margin: 3rem 0;
        padding: 0 1rem;
    }
    
    .product-categories-section {
        margin: 3rem 0;
        padding: 0 1rem;
    }
}

/* Contact Form Styles */
.contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: var(--primary-blue);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--white);
    color: var(--text-dark);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 90, 158, 0.1);
    background: var(--white);
}

.form-group input::placeholder {
    color: var(--text-light);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
    max-height: 300px;
}

.form-group input[type="file"] {
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    width: 100%;
}

.form-group input[type="file"]:hover {
    border-color: var(--accent-blue);
}

.form-group input[type="file"]:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 90, 158, 0.1);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-light);
    font-size: 0.875rem;
    line-height: 1.4;
}

.contact-form button {
    grid-column: auto;
    justify-self: flex-start;
}

/* Form Message Styles */
.form-message {
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 600;
    border-left: 4px solid transparent;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border-left-color: #28a745;
    display: block !important;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-left-color: #dc3545;
    display: block !important;
}

/* Responsive Contact Form */
@media (max-width: 768px) {
    .contact-form {
        grid-template-columns: 1fr;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.875rem;
        font-size: 16px;
    }
}

/* ============================================
   SİBER GÜVENLİK SAYFALARI STİLLERİ
   ============================================ */

/* Cyber Capabilities Section */
.cyber-capabilities-section {
    margin: 4rem 0;
}

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

.cyber-capability-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-light);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.cyber-capability-item:hover {
    background: var(--light-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Cyber Features Section */
.cyber-features-section {
    margin: 4rem 0;
}

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

.cyber-feature-card {
    padding: 2rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    text-align: center;
}

.cyber-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.cyber-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: var(--light-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cyber-feature-card h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.cyber-feature-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Cyber Feature Icons */
.ai-icon::before {
    content: "🤖";
    font-size: 2rem;
}

.realtime-icon::before {
    content: "⚡";
    font-size: 2rem;
}

.quarantine-icon::before {
    content: "🔒";
    font-size: 2rem;
}

.cloud-icon::before {
    content: "☁️";
    font-size: 2rem;
}

.silent-icon::before {
    content: "🔇";
    font-size: 2rem;
}

.auto-icon::before {
    content: "▶️";
    font-size: 2rem;
}

.rule-icon::before {
    content: "📋";
    font-size: 2rem;
}

.policy-icon::before {
    content: "📜";
    font-size: 2rem;
}

.analysis-icon::before {
    content: "📊";
    font-size: 2rem;
}

.learning-icon::before {
    content: "🧠";
    font-size: 2rem;
}

.report-icon::before {
    content: "📈";
    font-size: 2rem;
}

.integration-icon::before {
    content: "🔗";
    font-size: 2rem;
}

.ddos-icon::before {
    content: "🛡️";
    font-size: 2rem;
}

.rate-icon::before {
    content: "⏱️";
    font-size: 2rem;
}

.validation-icon::before {
    content: "✅";
    font-size: 2rem;
}

.waf-icon::before {
    content: "🔥";
    font-size: 2rem;
}

.monitor-icon::before {
    content: "👁️";
    font-size: 2rem;
}

.auth-icon::before {
    content: "🔐";
    font-size: 2rem;
}

/* Cyber Product Visuals */
.cyber-product-visual {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.threatshield-visual,
.drivenrule-visual,
.apisecurity-visual {
    background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
}

.cyber-shield-icon,
.cyber-rule-icon,
.cyber-api-icon {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cyber-shield-icon::before {
    content: "🛡️";
    font-size: 4rem;
}

.cyber-rule-icon::before {
    content: "📋";
    font-size: 4rem;
}

.cyber-api-icon::before {
    content: "🔌";
    font-size: 4rem;
}

.cyber-product-hero-visual {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.threatshield-hero,
.drivenrule-hero,
.apisecurity-hero {
    background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
}

.cyber-shield-large,
.cyber-rule-large,
.cyber-api-large {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: pulse 2s ease-in-out infinite;
}

.cyber-shield-large::before {
    content: "🛡️";
    font-size: 6rem;
}

.cyber-rule-large::before {
    content: "📋";
    font-size: 6rem;
}

.cyber-api-large::before {
    content: "🔌";
    font-size: 6rem;
}

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

/* Visual Icon Cyber */
.visual-icon-cyber {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.visual-icon-cyber::before {
    content: "🔐";
    font-size: 5rem;
}

/* Why ThreatShield Section */
.why-threatshield-section {
    margin: 4rem 0;
    padding: 3rem;
    background: var(--light-blue);
    border-radius: 16px;
}

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

.threatshield-stat-card {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.stat-number-large {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.stat-label-large {
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 600;
}

/* How It Works Section */
.how-it-works-section {
    margin: 4rem 0;
}

.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.work-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.work-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--gradient-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.step-content h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.step-content p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Responsive Cyber Security Pages */
@media (max-width: 768px) {
    .cyber-capabilities-grid,
    .cyber-features-grid {
        grid-template-columns: 1fr;
    }
    
    .threatshield-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .how-it-works-steps {
        grid-template-columns: 1fr;
    }
    
    .cyber-product-hero-visual {
        height: 300px;
    }
    
    .cyber-shield-large,
    .cyber-rule-large,
    .cyber-api-large {
        width: 150px;
        height: 150px;
    }
    
    .cyber-shield-large::before,
    .cyber-rule-large::before,
    .cyber-api-large::before {
        font-size: 4rem;
    }
}

/* Extra Mobile Improvements */
@media (max-width: 480px) {
    .nav-menu {
        padding: 4rem 1.5rem 2rem;
    }

    .nav-link {
        padding: 0.875rem;
        font-size: 0.9rem;
    }

    .dropdown-menu {
        margin-left: 0.5rem;
        width: calc(100% - 0.5rem);
    }

    .dropdown-item {
        padding: 0.625rem 0.75rem;
    }

    .dropdown-link {
        font-size: 0.875rem;
    }

    .header-container {
        padding: 1rem 1.5rem;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .logo img {
        height: 40px;
    }

    .threatshield-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-number-large {
        font-size: 2.5rem;
    }
}