.breadcrumb { background: #fff; }

        /* Hero Two Column */
        .page-hero {
            padding: 80px 56px;
            background: linear-gradient(135deg, #0a0f14 0%, #0d1a24 50%, #0a1520 100%);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
            max-width: 100%;
        }
        .page-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(230,77,0,0.08) 0%, transparent 70%);
        }
        .page-hero::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(0,177,235,0.06) 0%, transparent 70%);
        }
        .page-hero .hero-content {
            position: relative;
            z-index: 1;
            max-width: 100%;
            min-width: 0;
        }
        .page-hero .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #e64d00;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }
        .page-hero .hero-badge::before { content: ''; width: 32px; height: 2px; background: #e64d00; }
        .page-hero h1 {
            font-size: 32px;
            font-weight: 700;
            letter-spacing: -1.5px;
            line-height: 1.1;
            margin-bottom: 24px;
            color: #fff;
        }
        .page-hero h1 span {
            color: #e64d00;
        }
        .page-hero p {
            font-size: 17px;
            color: rgba(255,255,255,0.7);
            line-height: 1.8;
            margin-bottom: 32px;
        }
        .hero-cta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        .hero-cta a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        /* Open Source Visual */
        .hero-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 420px;
        }
        .oss-visual {
            position: relative;
            width: 380px;
            height: 380px;
        }
        /* Central Logo */
        .oss-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #e64d00 0%, #ff6b1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        .oss-center svg {
            width: 48px;
            height: 48px;
            color: #fff;
        }
        /* Orbiting Icons */
        .oss-orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 280px;
            height: 280px;
            margin-top: -140px;
            margin-left: -140px;
            border: 1px dashed rgba(255,255,255,0.15);
            border-radius: 50%;
            animation: orbit-spin 60s linear infinite;
        }
        @keyframes orbit-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .oss-icon {
            position: absolute;
            width: 56px;
            height: 56px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: counter-spin 60s linear infinite;
            transition: all 0.3s ease;
        }
        .oss-icon:hover {
            background: rgba(230,77,0,0.2);
            border-color: #e64d00;
            transform: scale(1.1);
        }
        @keyframes counter-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }
        .oss-icon svg {
            width: 24px;
            height: 24px;
            color: #fff;
        }
        .oss-icon.linux { top: -28px; left: 50%; margin-left: -28px; }
        .oss-icon.docker { top: 50%; right: -28px; margin-top: -28px; }
        .oss-icon.nginx { bottom: -28px; left: 50%; margin-left: -28px; }
        .oss-icon.proxmox { top: 50%; left: -28px; margin-top: -28px; }
        .oss-icon.git { top: 15%; right: 5%; }
        .oss-icon.db { bottom: 15%; right: 5%; }
        .oss-icon.python { bottom: 15%; left: 5%; }
        .oss-icon.ansible { top: 15%; left: 5%; }

        /* Connection Lines */
        .oss-connections {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin-top: -100px;
            margin-left: -100px;
        }
        .oss-line {
            position: absolute;
            background: linear-gradient(90deg, rgba(230,77,0,0.3) 0%, rgba(230,77,0,0.1) 100%);
            height: 2px;
            transform-origin: left center;
        }

        @media (max-width: 1024px) {
            .page-hero { grid-template-columns: 1fr; gap: 48px; overflow: visible; }
            .hero-visual { height: 320px; }
            .oss-visual { transform: scale(0.85); }
        }
        @media (max-width: 768px) {
            .page-hero {
                padding: 48px 24px;
                overflow: visible;
                display: block;
            }
            .page-hero h1 { font-size: 32px; }
            .page-hero p { font-size: 16px; }
            .page-hero .hero-content {
                width: 100%;
                max-width: 100%;
                margin-bottom: 40px;
            }
            .hero-visual {
                height: 280px;
                width: 100%;
            }
            .oss-visual { transform: scale(0.7); }
            .hero-cta {
                flex-direction: column;
                width: 100%;
            }
            .hero-cta a,
            .hero-cta .btn {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                text-align: center;
                padding: 14px 20px;
            }
        }
        @media (max-width: 480px) {
            .page-hero {
                padding: 32px 16px;
                overflow: visible;
                display: block;
            }
            .page-hero h1 { font-size: 32px; letter-spacing: -1px; }
            .page-hero p { font-size: 15px; margin-bottom: 24px; }
            .hero-badge { font-size: 10px; }
            .page-hero .hero-content {
                width: 100%;
                max-width: 100%;
                margin-bottom: 32px;
            }
            .hero-visual {
                height: 220px;
                width: 100%;
            }
            .oss-visual { transform: scale(0.55); }
            .hero-cta {
                flex-direction: column;
                width: 100%;
            }
            .hero-cta a,
            .hero-cta .btn {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                font-size: 14px;
            }
        }

        /* Hero Stats */
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: #fff;
            border-bottom: 1px solid #e8eaed;
        }
        .hero-stat {
            padding: 36px 24px;
            text-align: center;
            border-right: 1px solid #e8eaed;
        }
        .hero-stat:last-child { border-right: none; }
        .hero-stat-number {
            font-size: 32px;
            font-weight: 700;
            color: #e64d00;
            margin-bottom: 6px;
            letter-spacing: -1px;
        }
        .hero-stat-label {
            font-size: 11px;
            color: #5f6368;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        @media (max-width: 1024px) {
            .hero-stats { grid-template-columns: repeat(2, 1fr); }
            .hero-stat:nth-child(2) { border-right: none; }
        }
        @media (max-width: 768px) {
            .hero-stats { grid-template-columns: 1fr; }
            .hero-stat { border-right: none; border-bottom: 1px solid #e8eaed; }
            .hero-stat:last-child { border-bottom: none; }
        }
        @media (max-width: 480px) {
            .hero-stat { padding: 24px 16px; }
            .hero-stat-number { font-size: 26px; }
        }

        /* Philosophy Section */
        .philosophy-section {
            padding: 80px 56px;
            background: #fff;
        }
        .philosophy-grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 64px;
            align-items: start;
        }
        .philosophy-content .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
        }
        .philosophy-content .section-label::before {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .philosophy-content h2 {
            font-size: 36px;
            font-weight: 700;
            color: #0a0f14;
            line-height: 1.2;
            margin-bottom: 20px;
        }
        .philosophy-content > p {
            font-size: 16px;
            color: #5f6368;
            line-height: 1.8;
        }
        .philosophy-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        .philosophy-card {
            padding: 28px;
            background: #f8f9fa;
            border: 1px solid #e8eaed;
            position: relative;
            transition: all 0.3s ease;
        }
        .philosophy-card:hover {
            border-color: #e64d00;
            transform: translateY(-4px);
        }
        .philosophy-card-icon {
            width: 48px;
            height: 48px;
            background: #fff;
            border: 1px solid #e8eaed;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        .philosophy-card-icon svg {
            width: 24px;
            height: 24px;
            color: #e64d00;
        }
        .philosophy-card h3 {
            font-size: 16px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 8px;
        }
        .philosophy-card p {
            font-size: 13px;
            color: #5f6368;
            line-height: 1.6;
        }
        @media (max-width: 1024px) {
            .philosophy-grid { grid-template-columns: 1fr; gap: 40px; }
        }
        @media (max-width: 768px) {
            .philosophy-section { padding: 48px 24px; }
            .philosophy-cards { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .philosophy-section { padding: 32px 16px; }
            .philosophy-content h2 { font-size: 28px; }
        }

        /* Category Sections */
        .category-section {
            padding: 80px 56px;
        }
        .category-section.gray { background: #f8f9fa; }
        .category-section.white { background: #fff; }
        .category-section.dark {
            background: linear-gradient(135deg, #0a0f14 0%, #0d1a24 100%);
        }
        .category-header {
            margin-bottom: 48px;
        }
        .category-header .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
        }
        .category-header .section-label::before {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .category-header h2 {
            font-size: 32px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 12px;
        }
        .category-header p {
            font-size: 16px;
            color: #5f6368;
            max-width: 700px;
        }
        .category-section.dark .category-header h2 { color: #fff; }
        .category-section.dark .category-header p { color: rgba(255,255,255,0.6); }

        /* Tech Cards Grid */
        .tech-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .tech-card {
            background: #fff;
            border: 1px solid #e8eaed;
            padding: 32px 24px;
            position: relative;
            transition: all 0.3s ease;
        }
        .tech-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            transition: width 0.3s ease;
        }
        .tech-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.06);
        }
        .tech-card:hover::before { width: 100%; }
        .tech-card.proxmox::before { background: #e64d00; }
        .tech-card.proxmox:hover { border-color: #e64d00; }
        .tech-card.debian::before { background: #d70a53; }
        .tech-card.debian:hover { border-color: #d70a53; }
        .tech-card.redhat::before { background: #ee0000; }
        .tech-card.redhat:hover { border-color: #ee0000; }
        .tech-card.ubuntu::before { background: #e95420; }
        .tech-card.ubuntu:hover { border-color: #e95420; }
        .tech-card.docker::before { background: #2496ed; }
        .tech-card.docker:hover { border-color: #2496ed; }
        .tech-card.nginx::before { background: #009639; }
        .tech-card.nginx:hover { border-color: #009639; }
        .tech-card.apache::before { background: #d22128; }
        .tech-card.apache:hover { border-color: #d22128; }
        .tech-card.traefik::before { background: #24a1c1; }
        .tech-card.traefik:hover { border-color: #24a1c1; }
        .tech-card.haproxy::before { background: #106da4; }
        .tech-card.haproxy:hover { border-color: #106da4; }
        .tech-card.redmine::before { background: #b32024; }
        .tech-card.redmine:hover { border-color: #b32024; }
        .tech-card.openproject::before { background: #1a67a3; }
        .tech-card.openproject:hover { border-color: #1a67a3; }
        .tech-card.git::before { background: #f05032; }
        .tech-card.git:hover { border-color: #f05032; }
        .tech-card.postgres::before { background: #336791; }
        .tech-card.postgres:hover { border-color: #336791; }
        .tech-card.mariadb::before { background: #003545; }
        .tech-card.mariadb:hover { border-color: #003545; }
        .tech-card.elastic::before { background: #fed10a; }
        .tech-card.elastic:hover { border-color: #fed10a; }
        .tech-card.grafana::before { background: #f46800; }
        .tech-card.grafana:hover { border-color: #f46800; }
        .tech-card.prometheus::before { background: #e6522c; }
        .tech-card.prometheus:hover { border-color: #e6522c; }
        .tech-card.ansible::before { background: #ee0000; }
        .tech-card.ansible:hover { border-color: #ee0000; }
        .tech-card.terraform::before { background: #7b42bc; }
        .tech-card.terraform:hover { border-color: #7b42bc; }
        .tech-card.kubernetes::before { background: #326ce5; }
        .tech-card.kubernetes:hover { border-color: #326ce5; }
        .tech-card.wazuh::before { background: #00a9e5; }
        .tech-card.wazuh:hover { border-color: #00a9e5; }
        .tech-card.zabbix::before { background: #d40000; }
        .tech-card.zabbix:hover { border-color: #d40000; }
        .tech-card.ceph::before { background: #ef5c55; }
        .tech-card.ceph:hover { border-color: #ef5c55; }
        .tech-card.default::before { background: #00B1EB; }
        .tech-card.default:hover { border-color: #00B1EB; }

        .category-section.dark .tech-card {
            background: rgba(255,255,255,0.03);
            border-color: rgba(255,255,255,0.1);
        }
        .category-section.dark .tech-card:hover {
            box-shadow: 0 12px 24px rgba(0,0,0,0.2);
        }
        .category-section.dark .tech-card h3 { color: #fff; }
        .category-section.dark .tech-card p { color: rgba(255,255,255,0.6); }
        .category-section.dark .tech-features li { color: rgba(255,255,255,0.7); }

        .tech-logo {
            height: 40px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .tech-logo span {
            font-size: 20px;
            font-weight: 700;
            color: #0a0f14;
        }
        .category-section.dark .tech-logo span { color: #fff; }
        .tech-card h3 {
            font-size: 18px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 8px;
        }
        .tech-card > p {
            font-size: 14px;
            color: #5f6368;
            line-height: 1.7;
            margin-bottom: 16px;
        }
        .tech-features {
            list-style: none;
            border-top: 1px solid #e8eaed;
            padding-top: 16px;
        }
        .category-section.dark .tech-features {
            border-color: rgba(255,255,255,0.1);
        }
        .tech-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: #3c4043;
            padding: 5px 0;
        }
        .tech-features li svg {
            width: 16px;
            height: 16px;
            color: #e64d00;
            flex-shrink: 0;
        }
        @media (max-width: 1024px) {
            .tech-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .category-section { padding: 48px 24px; }
            .tech-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .category-section { padding: 32px 16px; }
            .category-header h2 { font-size: 26px; }
        }

        /* Services Banner */
        .services-banner {
            padding: 60px 56px;
            background: linear-gradient(135deg, #e64d00 0%, #ff6b1a 100%);
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 40px;
            align-items: center;
        }
        .services-banner h2 {
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
        }
        .services-banner p {
            font-size: 16px;
            color: rgba(255,255,255,0.9);
        }
        .services-banner .btn-primary {
            background: #fff;
            color: #e64d00;
            flex-shrink: 0;
        }
        .services-banner .btn-primary:hover {
            background: rgba(255,255,255,0.9);
        }
        @media (max-width: 768px) {
            .services-banner {
                grid-template-columns: 1fr;
                padding: 48px 24px;
                text-align: center;
            }
        }
        @media (max-width: 480px) {
            .services-banner { padding: 32px 16px; }
            .services-banner h2 { font-size: 24px; }
        }

        /* Use Cases */
        .usecases-section {
            padding: 80px 56px;
            background: #0a0f14;
        }
        .usecases-header {
            text-align: center;
            margin-bottom: 56px;
        }
        .usecases-header .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
            justify-content: center;
        }
        .usecases-header .section-label::before,
        .usecases-header .section-label::after {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .usecases-header h2 {
            font-size: 32px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
        }
        .usecases-header p {
            font-size: 16px;
            color: rgba(255,255,255,0.6);
            max-width: 600px;
            margin: 0 auto;
        }
        .usecases-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
        }
        .usecase-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 36px;
            transition: all 0.3s ease;
        }
        .usecase-card:hover {
            border-color: rgba(230,77,0,0.4);
            transform: translateY(-4px);
        }
        .usecase-icon {
            width: 56px;
            height: 56px;
            background: rgba(230,77,0,0.15);
            border: 1px solid rgba(230,77,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        .usecase-icon svg {
            width: 28px;
            height: 28px;
            color: #e64d00;
        }
        .usecase-card h3 {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
        }
        .usecase-card p {
            font-size: 14px;
            color: rgba(255,255,255,0.7);
            line-height: 1.7;
            margin-bottom: 20px;
        }
        .usecase-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .usecase-tech span {
            font-size: 11px;
            font-weight: 600;
            color: rgba(255,255,255,0.6);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 6px 12px;
        }
        @media (max-width: 1024px) {
            .usecases-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .usecases-section { padding: 48px 24px; }
        }
        @media (max-width: 480px) {
            .usecases-section { padding: 32px 16px; }
            .usecases-header h2 { font-size: 26px; }
            .usecase-card { padding: 24px; }
        }

        /* Process Section */
        .process-section {
            padding: 80px 56px;
            background: #f8f9fa;
        }
        .process-header {
            text-align: center;
            margin-bottom: 56px;
        }
        .process-header .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
            justify-content: center;
        }
        .process-header .section-label::before,
        .process-header .section-label::after {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .process-header h2 {
            font-size: 32px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 12px;
        }
        .process-timeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
        }
        .process-step {
            text-align: center;
            position: relative;
        }
        .process-step::after {
            content: '';
            position: absolute;
            top: 28px;
            right: -16px;
            width: 32px;
            height: 2px;
            background: #e8eaed;
        }
        .process-step:last-child::after { display: none; }
        .process-number {
            width: 56px;
            height: 56px;
            background: #fff;
            border: 2px solid #e64d00;
            color: #e64d00;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        .process-step h3 {
            font-size: 16px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 8px;
        }
        .process-step p {
            font-size: 13px;
            color: #5f6368;
            line-height: 1.6;
        }
        @media (max-width: 1024px) {
            .process-timeline { grid-template-columns: repeat(2, 1fr); }
            .process-step:nth-child(2)::after { display: none; }
        }
        @media (max-width: 768px) {
            .process-section { padding: 48px 24px; }
            .process-timeline { grid-template-columns: 1fr; }
            .process-step::after { display: none; }
        }
        @media (max-width: 480px) {
            .process-section { padding: 32px 16px; }
            .process-header h2 { font-size: 26px; }
        }

        /* CTA Section */
        .cta-section {
            padding: 80px 56px;
            background: linear-gradient(135deg, #00B1EB 0%, #0077a2 100%);
            text-align: center;
        }
        .cta-section h2 {
            font-size: 36px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 16px;
        }
        .cta-section p {
            font-size: 17px;
            color: rgba(255,255,255,0.9);
            margin-bottom: 32px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .cta-section .btn-primary {
            background: #fff;
            color: #0077a2;
        }
        .cta-section .btn-primary:hover {
            background: rgba(255,255,255,0.9);
            transform: translateY(-2px);
        }
        @media (max-width: 768px) {
            .cta-section { padding: 48px 24px; }
            .cta-section h2 { font-size: 28px; }
        }
        @media (max-width: 480px) {
            .cta-section { padding: 32px 16px; }
            .cta-section h2 { font-size: 24px; }
        }

        /* ============================================
           TECH STACK DIAGRAM
           ============================================ */
        .stack-section {
            padding: 80px 56px;
            background: linear-gradient(135deg, #0a0f14 0%, #0d1a24 100%);
            overflow: hidden;
        }
        .stack-header {
            text-align: center;
            margin-bottom: 56px;
        }
        .stack-header .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
            justify-content: center;
        }
        .stack-header .section-label::before,
        .stack-header .section-label::after {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .stack-header h2 {
            font-size: 32px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
        }
        .stack-header p {
            font-size: 16px;
            color: rgba(255,255,255,0.6);
            max-width: 600px;
            margin: 0 auto;
        }
        .stack-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        .stack-diagram {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .stack-layer {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 20px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .stack-layer::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            transition: all 0.3s ease;
        }
        .stack-layer:hover, .stack-layer.active {
            background: rgba(255,255,255,0.06);
            border-color: rgba(230,77,0,0.4);
            transform: translateX(8px);
        }
        .stack-layer.active::before {
            background: #e64d00;
        }
        .stack-layer.layer-apps::before { background: #8b5cf6; }
        .stack-layer.layer-apps:hover::before, .stack-layer.layer-apps.active::before { background: #8b5cf6; }
        .stack-layer.layer-container::before { background: #2496ed; }
        .stack-layer.layer-container:hover::before, .stack-layer.layer-container.active::before { background: #2496ed; }
        .stack-layer.layer-services::before { background: #10b981; }
        .stack-layer.layer-services:hover::before, .stack-layer.layer-services.active::before { background: #10b981; }
        .stack-layer.layer-virt::before { background: #e64d00; }
        .stack-layer.layer-virt:hover::before, .stack-layer.layer-virt.active::before { background: #e64d00; }
        .stack-layer.layer-os::before { background: #f59e0b; }
        .stack-layer.layer-os:hover::before, .stack-layer.layer-os.active::before { background: #f59e0b; }
        .stack-layer.layer-hardware::before { background: #6b7280; }
        .stack-layer.layer-hardware:hover::before, .stack-layer.layer-hardware.active::before { background: #6b7280; }
        .stack-layer-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            flex-shrink: 0;
        }
        .stack-layer-icon svg {
            width: 20px;
            height: 20px;
            color: #fff;
        }
        .stack-layer-content h4 {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 4px;
        }
        .stack-layer-content span {
            font-size: 12px;
            color: rgba(255,255,255,0.5);
        }
        .stack-layer-techs {
            margin-left: auto;
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .stack-layer-techs span {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            background: rgba(255,255,255,0.08);
            padding: 4px 8px;
            border-radius: 2px;
        }
        .stack-detail {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 32px;
            min-height: 400px;
        }
        .stack-detail-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .stack-detail-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(230,77,0,0.15);
            border: 1px solid rgba(230,77,0,0.3);
        }
        .stack-detail-icon svg {
            width: 28px;
            height: 28px;
            color: #e64d00;
        }
        .stack-detail-title h3 {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 4px;
        }
        .stack-detail-title span {
            font-size: 13px;
            color: rgba(255,255,255,0.5);
        }
        .stack-detail-content p {
            font-size: 14px;
            color: rgba(255,255,255,0.7);
            line-height: 1.8;
            margin-bottom: 24px;
        }
        .stack-detail-techs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .stack-tech-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .stack-tech-item svg {
            width: 16px;
            height: 16px;
            color: #e64d00;
            flex-shrink: 0;
        }
        .stack-tech-item span {
            font-size: 13px;
            color: rgba(255,255,255,0.8);
        }
        @media (max-width: 1024px) {
            .stack-container { grid-template-columns: 1fr; }
            .stack-detail { min-height: auto; }
        }
        @media (max-width: 768px) {
            .stack-section { padding: 48px 24px; }
            .stack-layer-techs { display: none; }
        }
        @media (max-width: 480px) {
            .stack-section { padding: 32px 16px; }
            .stack-header h2 { font-size: 26px; }
            .stack-header p { font-size: 14px; }
            .stack-layer { padding: 16px; }
            .stack-layer-content h4 { font-size: 13px; }
            .stack-layer-content span { font-size: 11px; }
            .stack-detail { padding: 16px; }
            .stack-detail-header { flex-direction: column; text-align: center; gap: 12px; }
            .stack-detail-title h3 { font-size: 18px; }
            .stack-detail-content p { font-size: 13px; }
            .stack-detail-techs { grid-template-columns: 1fr; }
            .stack-tech-item { font-size: 12px; }
        }

        /* ============================================
           TERMINAL ANIMATION
           ============================================ */
        .terminal-section {
            padding: 80px 56px;
            background: #fff;
        }
        .terminal-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        .terminal-content .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
        }
        .terminal-content .section-label::before {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .terminal-content h2 {
            font-size: 32px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 16px;
        }
        .terminal-content > p {
            font-size: 16px;
            color: #5f6368;
            line-height: 1.8;
            margin-bottom: 24px;
        }
        .terminal-features {
            display: grid;
            gap: 16px;
        }
        .terminal-feature {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .terminal-feature svg {
            width: 20px;
            height: 20px;
            color: #e64d00;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .terminal-feature span {
            font-size: 14px;
            color: #3c4043;
        }
        .terminal-window {
            background: #1e1e1e;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.25);
        }
        .terminal-header {
            background: #323232;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .terminal-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .terminal-btn.red { background: #ff5f56; }
        .terminal-btn.yellow { background: #ffbd2e; }
        .terminal-btn.green { background: #27ca3f; }
        .terminal-title {
            margin-left: 12px;
            font-size: 12px;
            color: rgba(255,255,255,0.6);
            font-family: 'SF Mono', 'Fira Code', monospace;
        }
        .terminal-body {
            padding: 20px;
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            font-size: 13px;
            line-height: 1.8;
            min-height: 300px;
        }
        .terminal-line {
            margin-bottom: 8px;
            opacity: 0;
            animation: terminalFadeIn 0.3s ease forwards;
        }
        .terminal-line:nth-child(1) { animation-delay: 0.5s; }
        .terminal-line:nth-child(2) { animation-delay: 1.5s; }
        .terminal-line:nth-child(3) { animation-delay: 2.5s; }
        .terminal-line:nth-child(4) { animation-delay: 3.5s; }
        .terminal-line:nth-child(5) { animation-delay: 4.5s; }
        .terminal-line:nth-child(6) { animation-delay: 5.5s; }
        .terminal-line:nth-child(7) { animation-delay: 6.5s; }
        .terminal-line:nth-child(8) { animation-delay: 7.5s; }
        @keyframes terminalFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .terminal-prompt {
            color: #27ca3f;
        }
        .terminal-command {
            color: #fff;
        }
        .terminal-output {
            color: #888;
        }
        .terminal-success {
            color: #27ca3f;
        }
        .terminal-cursor {
            display: inline-block;
            width: 8px;
            height: 16px;
            background: #fff;
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            margin-left: 4px;
        }
        @keyframes blink {
            50% { opacity: 0; }
        }
        @media (max-width: 1024px) {
            .terminal-grid { grid-template-columns: 1fr; }
            .terminal-window { order: -1; }
        }
        @media (max-width: 768px) {
            .terminal-section { padding: 48px 24px; }
            .terminal-body { min-height: 250px; font-size: 11px; }
        }
        @media (max-width: 480px) {
            .terminal-section { padding: 32px 16px; }
            .terminal-content h2 { font-size: 26px; }
            .terminal-body { padding: 12px; min-height: 200px; font-size: 9px; overflow-x: auto; }
            .terminal-line { white-space: nowrap; }
        }

        /* ============================================
           DEPENDENCY GRAPH
           ============================================ */
        .graph-section {
            padding: 80px 56px;
            background: #f8f9fa;
        }
        .graph-header {
            text-align: center;
            margin-bottom: 56px;
        }
        .graph-header .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
            justify-content: center;
        }
        .graph-header .section-label::before,
        .graph-header .section-label::after {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .graph-header h2 {
            font-size: 32px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 12px;
        }
        .graph-header p {
            font-size: 16px;
            color: #5f6368;
            max-width: 600px;
            margin: 0 auto;
        }
        .graph-container {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
            height: 500px;
        }
        .graph-node {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .graph-node:hover {
            transform: scale(1.1);
        }
        .graph-node:hover .graph-node-circle {
            box-shadow: 0 0 0 8px rgba(230,77,0,0.15);
        }
        .graph-node-circle {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border: 3px solid #e8eaed;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        .graph-node-circle svg {
            width: 28px;
            height: 28px;
        }
        .graph-node-label {
            font-size: 12px;
            font-weight: 600;
            color: #0a0f14;
            text-align: center;
            white-space: nowrap;
        }
        /* Node colors */
        .graph-node.proxmox .graph-node-circle { border-color: #e64d00; }
        .graph-node.proxmox .graph-node-circle svg { color: #e64d00; }
        .graph-node.docker .graph-node-circle { border-color: #2496ed; }
        .graph-node.docker .graph-node-circle svg { color: #2496ed; }
        .graph-node.nginx .graph-node-circle { border-color: #009639; }
        .graph-node.nginx .graph-node-circle svg { color: #009639; }
        .graph-node.postgres .graph-node-circle { border-color: #336791; }
        .graph-node.postgres .graph-node-circle svg { color: #336791; }
        .graph-node.wazuh .graph-node-circle { border-color: #00a9e5; }
        .graph-node.wazuh .graph-node-circle svg { color: #00a9e5; }
        .graph-node.grafana .graph-node-circle { border-color: #f46800; }
        .graph-node.grafana .graph-node-circle svg { color: #f46800; }
        .graph-node.ansible .graph-node-circle { border-color: #ee0000; }
        .graph-node.ansible .graph-node-circle svg { color: #ee0000; }
        .graph-node.ceph .graph-node-circle { border-color: #ef5c55; }
        .graph-node.ceph .graph-node-circle svg { color: #ef5c55; }
        /* Node positions */
        .graph-node.proxmox { top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .graph-node.proxmox .graph-node-circle { width: 90px; height: 90px; border-width: 4px; }
        .graph-node.proxmox .graph-node-circle svg { width: 36px; height: 36px; }
        .graph-node.docker { top: 10%; left: 50%; transform: translateX(-50%); }
        .graph-node.nginx { top: 25%; left: 15%; }
        .graph-node.postgres { top: 25%; right: 15%; }
        .graph-node.wazuh { top: 75%; left: 15%; }
        .graph-node.grafana { top: 75%; right: 15%; }
        .graph-node.ansible { bottom: 5%; left: 50%; transform: translateX(-50%); }
        .graph-node.ceph { top: 50%; right: 5%; transform: translateY(-50%); }
        /* Connection lines */
        .graph-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .graph-lines svg {
            width: 100%;
            height: 100%;
        }
        .graph-line {
            stroke: #e8eaed;
            stroke-width: 2;
            fill: none;
            stroke-dasharray: 8 4;
            animation: dashMove 20s linear infinite;
        }
        @keyframes dashMove {
            to { stroke-dashoffset: -240; }
        }
        .graph-legend {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin-top: 40px;
            flex-wrap: wrap;
        }
        .graph-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #5f6368;
        }
        .graph-legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .graph-legend-dot.virt { background: #e64d00; }
        .graph-legend-dot.container { background: #2496ed; }
        .graph-legend-dot.web { background: #009639; }
        .graph-legend-dot.db { background: #336791; }
        .graph-legend-dot.security { background: #00a9e5; }
        .graph-legend-dot.monitoring { background: #f46800; }
        @media (max-width: 900px) {
            /* Switch to grid layout on tablet/mobile */
            .graph-container {
                height: auto;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 24px;
                padding: 20px;
            }
            .graph-lines { display: none; }
            .graph-node {
                position: relative;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                transform: none !important;
            }
            .graph-node.proxmox {
                grid-column: 1 / -1;
                justify-self: center;
            }
            .graph-node-circle { width: 60px; height: 60px; }
            .graph-node-circle svg { width: 24px; height: 24px; }
            .graph-node.proxmox .graph-node-circle { width: 80px; height: 80px; }
            .graph-node.proxmox .graph-node-circle svg { width: 32px; height: 32px; }
        }
        @media (max-width: 768px) {
            .graph-section { padding: 48px 24px; }
            .graph-container { grid-template-columns: repeat(3, 1fr); gap: 20px; }
            .graph-node-circle { width: 56px; height: 56px; }
            .graph-node-circle svg { width: 22px; height: 22px; }
            .graph-node-label { font-size: 11px; }
            .graph-legend { flex-wrap: wrap; justify-content: center; }
        }
        @media (max-width: 480px) {
            .graph-section { padding: 32px 16px; }
            .graph-header h2 { font-size: 26px; }
            .graph-container { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .graph-node-circle { width: 50px; height: 50px; }
            .graph-node-circle svg { width: 20px; height: 20px; }
            .graph-node.proxmox .graph-node-circle { width: 60px; height: 60px; }
            .graph-node-label { font-size: 10px; }
            .graph-legend { gap: 12px; }
            .graph-legend-item { font-size: 10px; }
        }

        /* ============================================
           SCHULUNGEN / TRAINING
           ============================================ */
        .training-section {
            padding: 80px 56px;
            background: #fff;
        }
        .training-header {
            text-align: center;
            margin-bottom: 56px;
        }
        .training-header .section-label {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e64d00;
            margin-bottom: 16px;
            justify-content: center;
        }
        .training-header .section-label::before,
        .training-header .section-label::after {
            content: '';
            width: 24px;
            height: 2px;
            background: #e64d00;
        }
        .training-header h2 {
            font-size: 36px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 12px;
        }
        .training-header p {
            font-size: 17px;
            color: #5f6368;
            max-width: 600px;
            margin: 0 auto;
        }
        .training-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        .training-card {
            background: #f8f9fa;
            border: 1px solid #e8eaed;
            padding: 32px 24px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }
        .training-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: #e64d00;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        .training-card:hover {
            border-color: #e64d00;
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        }
        .training-card:hover::before {
            transform: scaleX(1);
        }
        .training-card-icon {
            width: 64px;
            height: 64px;
            background: rgba(230,77,0,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        .training-card-icon svg {
            width: 32px;
            height: 32px;
            color: #e64d00;
        }
        .training-card h3 {
            font-size: 18px;
            font-weight: 700;
            color: #0a0f14;
            margin-bottom: 8px;
        }
        .training-card p {
            font-size: 14px;
            color: #5f6368;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        .training-card-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }
        .training-card-topics span {
            font-size: 10px;
            font-weight: 600;
            color: #e64d00;
            background: rgba(230,77,0,0.1);
            padding: 4px 10px;
            border-radius: 12px;
        }
        .training-cta {
            text-align: center;
            margin-top: 48px;
        }
        .training-cta .btn-primary {
            background: #e64d00;
            color: #fff;
        }
        .training-cta .btn-primary:hover {
            background: #cc4400;
            transform: translateY(-2px);
        }
        @media (max-width: 1024px) {
            .training-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .training-section { padding: 48px 24px; }
            .training-header h2 { font-size: 28px; }
            .training-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 480px) {
            .training-section { padding: 32px 16px; }
            .training-header h2 { font-size: 24px; }
            .training-header p { font-size: 14px; }
            .training-card { padding: 20px 16px; }
            .training-card-icon { width: 56px; height: 56px; }
            .training-card-icon svg { width: 28px; height: 28px; }
            .training-card h3 { font-size: 16px; }
            .training-card p { font-size: 13px; }
            .training-cta .btn-primary { width: 100%; justify-content: center; }
        }