.elementor-14039 .elementor-element.elementor-element-4432cba{--display:flex;}/* Start custom CSS for html, class: .elementor-element-253fc7f *//* ============================================
           CYBERSECURITY THEME - BASE STYLES
           ============================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #0a0a0f 0%, #0d1a25 50%, #0a0f1a 100%);
            font-family: 'Segoe UI', 'Arial', sans-serif;
            overflow-x: hidden;
            color: #00ff88;
        }

        /* Cyber Grid Background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(ellipse at 15% 25%, rgba(0, 255, 200, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 75%, rgba(255, 100, 200, 0.06) 0%, transparent 50%),
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 200, 0.02) 2px, rgba(0, 255, 200, 0.02) 4px);
            pointer-events: none;
            z-index: 0;
        }
        
        section {
            border-radius: 20px;
            border: 1px solid rgba(0, 245, 255, 0.3);
        }
        /* ============================================
           FLOATING PARTICLES
           ============================================ */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: #00ffc8;
            border-radius: 50%;
            opacity: 0.4;
            animation: particleFloat 20s linear infinite;
        }

        .particle:nth-child(odd) { background: #ff64c8; }
        .particle:nth-child(3n) { background: #ffc864; }
        .particle:nth-child(5n) { background: #64c8ff; }

        @keyframes particleFloat {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 0.4; }
            90% { opacity: 0.4; }
            100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
        }

        .particle:nth-child(1) { left: 5%; animation-delay: 0s; animation-duration: 18s; }
        .particle:nth-child(2) { left: 12%; animation-delay: -2s; animation-duration: 22s; }
        .particle:nth-child(3) { left: 18%; animation-delay: -4s; animation-duration: 16s; }
        .particle:nth-child(4) { left: 25%; animation-delay: -1s; animation-duration: 24s; }
        .particle:nth-child(5) { left: 32%; animation-delay: -3s; animation-duration: 20s; }
        .particle:nth-child(6) { left: 40%; animation-delay: -5s; animation-duration: 19s; }
        .particle:nth-child(7) { left: 48%; animation-delay: -2s; animation-duration: 23s; }
        .particle:nth-child(8) { left: 55%; animation-delay: -4s; animation-duration: 17s; }
        .particle:nth-child(9) { left: 62%; animation-delay: -1s; animation-duration: 21s; }
        .particle:nth-child(10) { left: 70%; animation-delay: -3s; animation-duration: 25s; }
        .particle:nth-child(11) { left: 78%; animation-delay: -5s; animation-duration: 18s; }
        .particle:nth-child(12) { left: 85%; animation-delay: -2s; animation-duration: 22s; }
        .particle:nth-child(13) { left: 92%; animation-delay: -4s; animation-duration: 16s; }
        .particle:nth-child(14) { left: 97%; animation-delay: -1s; animation-duration: 20s; }

        /* ============================================
           HEADER SECTION
           ============================================ */
        .header {
            text-align: center;
            padding: 30px 20px 20px;
            position: relative;
            z-index: 10;
        }

        .header h1 {
            font-size: 2.8em;
            text-transform: uppercase;
            letter-spacing: 6px;
            text-shadow: 
                0 0 10px #00ffc8,
                0 0 20px #00ffc8,
                0 0 40px #00ffc8;
            animation: titlePulse 4s ease-in-out infinite;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #00ffc8, #ff64c8, #ffc864);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes titlePulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }

        .header .subtitle {
            font-size: 1em;
            color: #88aacc;
            letter-spacing: 3px;
            opacity: 0.9;
            margin-bottom: 15px;
        }

        .source-badge {
            display: inline-block;
            padding: 8px 20px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #00ffc8;
            border-radius: 20px;
            font-size: 0.75em;
            color: #00ffc8;
            letter-spacing: 1px;
        }

        .tagline {
            margin-top: 20px;
            font-size: 0.9em;
            color: #ff64c8;
            font-style: italic;
        }

        /* ============================================
           ABAC CONCEPT INTRO
           ============================================ */
        .concept-intro {
            max-width: 1200px;
            margin: 30px auto;
            padding: 30px;
            background: rgba(10, 20, 30, 0.8);
            border: 1px solid rgba(0, 255, 200, 0.2);
            border-radius: 15px;
            position: relative;
            z-index: 10;
            text-align: center;
        }

        .concept-title {
            font-size: 1.5em;
            color: #00ffc8;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        .concept-desc {
            font-size: 1em;
            color: #aaa;
            line-height: 1.8;
            max-width: 900px;
            margin: 0 auto;
        }

        .concept-highlight {
            color: #ff64c8;
            font-weight: bold;
        }

        .vs-comparison {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 25px;
        }

        .vs-item {
            padding: 20px 30px;
            border-radius: 12px;
            font-size: 0.85em;
        }

        .vs-old {
            background: rgba(255, 50, 50, 0.1);
            border: 1px solid rgba(255, 50, 50, 0.3);
        }

        .vs-new {
            background: rgba(0, 255, 200, 0.1);
            border: 1px solid rgba(0, 255, 200, 0.3);
        }

        .vs-label {
            font-weight: bold;
            margin-bottom: 8px;
            font-size: 1.1em;
        }

        .vs-old .vs-label { color: #ff5050; }
        .vs-new .vs-label { color: #00ffc8; }

        .vs-text {
            color: #aaa;
            font-style: italic;
        }

        /* ============================================
           MAIN SIMULATION CONTAINER
           ============================================ */
        .simulation-container {
            position: relative;
            width: 100%;
            max-width: 1400px;
            height: 700px;
            margin: 0 auto;
            perspective: 2000px;
            z-index: 5;
        }

        .simulation-scene {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }

        /* Floor Grid */
        .floor-grid {
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) rotateX(80deg) translateZ(-50px);
            width: 1300px;
            height: 450px;
            background: 
                linear-gradient(90deg, rgba(0, 255, 200, 0.08) 1px, transparent 1px),
                linear-gradient(rgba(0, 255, 200, 0.08) 1px, transparent 1px);
            background-size: 50px 50px;
            border: 1px solid rgba(0, 255, 200, 0.15);
            box-shadow: 0 0 60px rgba(0, 255, 200, 0.1);
        }

        /* ============================================
           SUBJECT ENTITY (Sarah)
           ============================================ */
        .subject-entity {
            position: absolute;
            left: 4%;
            top: 12%;
            transform-style: preserve-3d;
            z-index: 10;
        }

        .subject-card {
            position: relative;
            width: 180px;
            height: 300px;
            transform-style: preserve-3d;
            animation: entityFloat 5s ease-in-out infinite;
        }

        @keyframes entityFloat {
            0%, 100% { transform: translateY(0) rotateY(-8deg); }
            50% { transform: translateY(-12px) rotateY(-8deg); }
        }

        .subject-face {
            position: absolute;
            width: 180px;
            height: 340px;
            background: linear-gradient(145deg, #1a2535 0%, #0d1520 100%);
            border: 2px solid #00ffc8;
            border-radius: 15px;
            box-shadow: 
                0 0 25px rgba(0, 255, 200, 0.4),
                inset 0 0 30px rgba(0, 255, 200, 0.1);
            transform: translateZ(20px);
        }

        .subject-icon {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

        .subject-icon-emoji {
            font-size: 3em;
            display: block;
        }

        .subject-label-text {
            font-size: 0.7em;
            color: #00ffc8;
            letter-spacing: 1px;
            margin-top: 5px;
        }

        .subject-attributes {
            position: absolute;
            top: 120px;
            left: 15px;
            right: 15px;
        }

        .attr-item {
            padding: 8px 10px;
            margin-bottom: 6px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 6px;
            font-size: 0.65em;
            border-left: 3px solid #00ffc8;
            animation: attrPulse 12s ease-in-out infinite;
        }

        .attr-item:nth-child(1) { animation-delay: 0s; }
        .attr-item:nth-child(2) { animation-delay: 0.5s; }
        .attr-item:nth-child(3) { animation-delay: 1s; }
        .attr-item:nth-child(4) { animation-delay: 1.5s; }

        @keyframes attrPulse {
            0%, 15% { background: rgba(0, 0, 0, 0.3); }
            20%, 35% { background: rgba(0, 255, 200, 0.2); }
            40%, 100% { background: rgba(0, 0, 0, 0.3); }
        }

        .attr-label {
            color: #888;
            display: block;
        }

        .attr-value {
            color: #00ffc8;
            font-weight: bold;
        }

        .entity-label {
            position: absolute;
            bottom: -85px;
            left: 50%;
            transform: translateX(-50%);
            padding: 8px 20px;
            background: rgba(0, 0, 0, 0.85);
            border: 2px solid;
            border-radius: 8px;
            font-size: 0.85em;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .subject-entity .entity-label {
            border-color: #00ffc8;
            color: #00ffc8;
            box-shadow: 0 0 15px rgba(0, 255, 200, 0.4);
        }

        /* ============================================
           PDP - POLICY DECISION POINT
           ============================================ */
        .pdp-entity {
            position: absolute;
            left: 50%;
            top: 5%;
            transform: translateX(-50%);
            transform-style: preserve-3d;
            z-index: 15;
        }

        .pdp-card {
            position: relative;
            width: 260px;
            height: 445px;
            transform-style: preserve-3d;
            animation: pdpFloat 4s ease-in-out infinite;
        }

        @keyframes pdpFloat {
            0%, 100% { transform: translateY(0) rotateY(0deg); }
            50% { transform: translateY(-8px) rotateY(3deg); }
        }

        .pdp-face {
            position: absolute;
            width: 260px;
            height: 480px;
            background: linear-gradient(145deg, #1a2535 0%, #0d1520 100%);
            border: 3px solid #ff64c8;
            border-radius: 20px;
            box-shadow: 
                0 0 35px rgba(255, 100, 200, 0.4),
                inset 0 0 40px rgba(255, 100, 200, 0.1);
            transform: translateZ(25px);
        }

        .pdp-header {
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            text-align: center;
            padding: 12px;
            border-bottom: 1px solid rgba(255, 100, 200, 0.3);
        }

        .pdp-title {
            font-size: 1.1em;
            font-weight: bold;
            color: #ff64c8;
            letter-spacing: 3px;
        }

        .pdp-subtitle {
            font-size: 0.65em;
            color: #888;
            margin-top: 3px;
        }

        .pdp-components {
            position: absolute;
            top: 110px;
            left: 15px;
            right: 15px;
        }

        .pdp-component {
            margin-bottom: 10px;
            padding: 12px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            border-left: 4px solid;
            animation: componentPulse 12s ease-in-out infinite;
        }

        .pdp-component:nth-child(1) { border-color: #00ffc8; animation-delay: 0s; }
        .pdp-component:nth-child(2) { border-color: #ffc864; animation-delay: 0.3s; }
        .pdp-component:nth-child(3) { border-color: #64c8ff; animation-delay: 0.6s; }
        .pdp-component:nth-child(4) { border-color: #ff64c8; animation-delay: 0.9s; }

        @keyframes componentPulse {
            0%, 15% { box-shadow: none; }
            20%, 35% { box-shadow: 0 0 20px currentColor; }
            40%, 100% { box-shadow: none; }
        }

        .comp-name {
            font-size: 0.75em;
            font-weight: bold;
            margin-bottom: 3px;
        }

        .pdp-component:nth-child(1) .comp-name { color: #00ffc8; }
        .pdp-component:nth-child(2) .comp-name { color: #ffc864; }
        .pdp-component:nth-child(3) .comp-name { color: #64c8ff; }
        .pdp-component:nth-child(4) .comp-name { color: #ff64c8; }

        .comp-desc {
            font-size: 0.6em;
            color: #aaa;
        }

        .pdp-result {
            position: absolute;
            bottom: 15px;
            left: 15px;
            right: 15px;
            padding: 12px;
            background: rgba(0, 255, 136, 0.1);
            border-radius: 10px;
            text-align: center;
            animation: resultBlink 12s ease-in-out infinite;
        }

        @keyframes resultBlink {
            0%, 55% { background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.3); }
            60%, 75% { background: rgba(0, 255, 136, 0.3); border: 1px solid #00ff88; box-shadow: 0 0 30px rgba(0, 255, 136, 0.5); }
            80%, 100% { background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.3); }
        }

        .result-label {
            font-size: 0.7em;
            color: #888;
            margin-bottom: 5px;
        }

        .result-value {
            font-size: 1em;
            font-weight: bold;
            color: #00ff88;
        }

        .pdp-entity .entity-label {
            border-color: #ff64c8;
            color: #ff64c8;
            box-shadow: 0 0 15px rgba(255, 100, 200, 0.4);
        }

        /* ============================================
           RESOURCE ENTITY
           ============================================ */
        .resource-entity {
            position: absolute;
            right: 4%;
            top: 12%;
            transform-style: preserve-3d;
            z-index: 10;
        }

        .resource-card {
            position: relative;
            width: 180px;
            height: 300px;
            transform-style: preserve-3d;
            animation: entityFloat 5s ease-in-out infinite;
            animation-delay: -2.5s;
        }

        .resource-face {
            position: absolute;
            width: 180px;
            height: 340px;
            background: linear-gradient(145deg, #1a2535 0%, #0d1520 100%);
            border: 2px solid #ffc864;
            border-radius: 15px;
            box-shadow: 
                0 0 25px rgba(255, 200, 100, 0.4),
                inset 0 0 30px rgba(255, 200, 100, 0.1);
            transform: translateZ(20px);
        }

        .resource-icon {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

        .resource-icon-emoji {
            font-size: 3em;
            display: block;
        }

        .resource-label-text {
            font-size: 0.7em;
            color: #ffc864;
            letter-spacing: 1px;
            margin-top: 5px;
        }

        .resource-attributes {
            position: absolute;
            top: 120px;
            left: 15px;
            right: 15px;
        }

        .resource-entity .attr-item {
            border-left-color: #ffc864;
        }

        .resource-entity .attr-value {
            color: #ffc864;
        }

        .resource-entity .entity-label {
            border-color: #ffc864;
            color: #ffc864;
            box-shadow: 0 0 15px rgba(255, 200, 100, 0.4);
        }

        /* ============================================
           CONNECTION PATHS & FLOWS
           ============================================ */
        .connection-paths {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
        }

        .path-subject-pdp {
            position: absolute;
            top: 38%;
            left: 16%;
            width: 26%;
            height: 3px;
            background: rgba(0, 255, 200, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }

        .path-subject-pdp::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 100%;
            background: linear-gradient(90deg, transparent, #00ffc8, transparent);
            animation: flowRight 2s linear infinite;
        }

        .path-pdp-resource {
            position: absolute;
            top: 38%;
            right: 16%;
            width: 26%;
            height: 3px;
            background: rgba(255, 200, 100, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }

        .path-pdp-resource::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 100%;
            background: linear-gradient(90deg, transparent, #ffc864, transparent);
            animation: flowRight 2.5s linear infinite;
            animation-delay: 1s;
        }

        @keyframes flowRight {
            0% { left: -60px; }
            100% { left: 100%; }
        }

        /* ============================================
           ANIMATED DATA PACKETS
           ============================================ */
        .packets-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 20;
        }

        .packet {
            position: absolute;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 0.65em;
            font-weight: bold;
            letter-spacing: 1px;
            white-space: nowrap;
            opacity: 0;
        }

        /* Subject Attributes Packet */
        .packet-subject-attrs {
            top: 30%;
            left: 16%;
            background: rgba(0, 255, 200, 0.15);
            border: 2px solid #00ffc8;
            color: #00ffc8;
            animation: subjectAttrsMove 12s ease-in-out infinite;
        }

        .packet-subject-attrs::before { content: '📤 SUBJECT ATTRIBUTES'; }

        @keyframes subjectAttrsMove {
            0%, 5% { left: 16%; opacity: 0; transform: scale(0.8); }
            8% { opacity: 1; transform: scale(1); }
            20% { left: 36%; opacity: 1; }
            25% { opacity: 0; transform: scale(0.8); }
            100% { opacity: 0; }
        }

        /* Environment Packet */
        .packet-env {
            top: 42%;
            left: 16%;
            background: rgba(100, 200, 255, 0.15);
            border: 2px solid #64c8ff;
            color: #64c8ff;
            animation: envMove 12s ease-in-out infinite;
        }

        .packet-env::before { content: '🌍 ENVIRONMENT'; }

        @keyframes envMove {
            0%, 8% { left: 16%; opacity: 0; transform: scale(0.8); }
            12% { opacity: 1; transform: scale(1); }
            22% { left: 36%; opacity: 1; }
            27% { opacity: 0; transform: scale(0.8); }
            100% { opacity: 0; }
        }

        /* Policy Evaluation */
        .packet-policy {
            top: 48%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 100, 200, 0.15);
            border: 2px solid #ff64c8;
            color: #ff64c8;
            animation: policyEval 12s ease-in-out infinite;
        }

        .packet-policy::before { content: '⚙️ EVALUATING POLICY...'; }

        @keyframes policyEval {
            0%, 27% { opacity: 0; transform: translateX(-50%) scale(0.8); }
            30% { opacity: 1; transform: translateX(-50%) scale(1); }
            50% { opacity: 1; transform: translateX(-50%) scale(1); }
            55% { opacity: 0; transform: translateX(-50%) scale(0.8); }
            100% { opacity: 0; }
        }

        /* Access Decision */
        .packet-decision {
            top: 55%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 255, 136, 0.2);
            border: 2px solid #00ff88;
            color: #00ff88;
            animation: decisionMove 12s ease-in-out infinite;
        }

        .packet-decision::before { content: '✓ ACCESS GRANTED'; }

        @keyframes decisionMove {
            0%, 55% { opacity: 0; transform: translateX(-50%) scale(0.8); }
            60% { opacity: 1; transform: translateX(-50%) scale(1); }
            75% { opacity: 1; transform: translateX(-50%) scale(1); }
            80% { opacity: 0; transform: translateX(-50%) scale(0.8); }
            100% { opacity: 0; }
        }

        /* Resource Access */
        .packet-resource-access {
            top: 35%;
            left: 56%;
            background: rgba(255, 200, 100, 0.15);
            border: 2px solid #ffc864;
            color: #ffc864;
            animation: resourceAccessMove 12s ease-in-out infinite;
        }

        .packet-resource-access::before { content: '📄 ACCESSING RESOURCE'; }

        @keyframes resourceAccessMove {
            0%, 80% { left: 56%; opacity: 0; transform: scale(0.8); }
            84% { opacity: 1; transform: scale(1); }
            92% { left: 76%; opacity: 1; }
            96% { opacity: 0; transform: scale(0.8); }
            100% { opacity: 0; }
        }

        /* ============================================
           ABAC COMPONENT LEGEND
           ============================================ */
        .component-legend {
            position: absolute;
            bottom: -80px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 20;
        }

        .legend-item {
            text-align: center;
            padding: 15px 25px;
            background: rgba(10, 10, 20, 0.9);
            border-radius: 12px;
            border: 2px solid;
            min-width: 150px;
        }

        .legend-item:nth-child(1) {
            border-color: #00ffc8;
            animation: legendPulse1 12s ease-in-out infinite;
        }

        .legend-item:nth-child(2) {
            border-color: #ffc864;
            animation: legendPulse2 12s ease-in-out infinite;
        }

        .legend-item:nth-child(3) {
            border-color: #ff64c8;
            animation: legendPulse3 12s ease-in-out infinite;
        }

        .legend-item:nth-child(4) {
            border-color: #64c8ff;
            animation: legendPulse4 12s ease-in-out infinite;
        }

        @keyframes legendPulse1 {
            0%, 20% { box-shadow: 0 0 5px #00ffc8; }
            15% { box-shadow: 0 0 30px #00ffc8, 0 0 60px #00ffc8; }
            30%, 100% { box-shadow: 0 0 5px #00ffc8; }
        }

        @keyframes legendPulse2 {
            0%, 35% { box-shadow: 0 0 5px #ffc864; }
            30% { box-shadow: 0 0 30px #ffc864, 0 0 60px #ffc864; }
            45%, 100% { box-shadow: 0 0 5px #ffc864; }
        }

        @keyframes legendPulse3 {
            0%, 55% { box-shadow: 0 0 5px #ff64c8; }
            50% { box-shadow: 0 0 30px #ff64c8, 0 0 60px #ff64c8; }
            65%, 100% { box-shadow: 0 0 5px #ff64c8; }
        }

        @keyframes legendPulse4 {
            0%, 30% { box-shadow: 0 0 5px #64c8ff; }
            25% { box-shadow: 0 0 30px #64c8ff, 0 0 60px #64c8ff; }
            40%, 100% { box-shadow: 0 0 5px #64c8ff; }
        }

        .legend-icon {
            font-size: 1.8em;
            margin-bottom: 8px;
        }

        .legend-label {
            font-size: 0.75em;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .legend-item:nth-child(1) .legend-label { color: #00ffc8; }
        .legend-item:nth-child(2) .legend-label { color: #ffc864; }
        .legend-item:nth-child(3) .legend-label { color: #ff64c8; }
        .legend-item:nth-child(4) .legend-label { color: #64c8ff; }

        .legend-desc {
            font-size: 0.6em;
            color: #666;
            margin-top: 5px;
        }

        /* ============================================
           PROCESS TIMELINE
           ============================================ */
        .timeline {
            position: absolute;
            bottom: -210px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 0;
            z-index: 25;
        }

        .timeline-node {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .timeline-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            font-weight: bold;
            background: rgba(10, 10, 20, 0.9);
        }

        .timeline-node:nth-child(1) .timeline-circle {
            border-color: #00ffc8;
            color: #00ffc8;
            animation: nodeGlow1 12s ease-in-out infinite;
        }

        .timeline-node:nth-child(3) .timeline-circle {
            border-color: #ff64c8;
            color: #ff64c8;
            animation: nodeGlow2 12s ease-in-out infinite;
        }

        .timeline-node:nth-child(5) .timeline-circle {
            border-color: #ffc864;
            color: #ffc864;
            animation: nodeGlow3 12s ease-in-out infinite;
        }

        @keyframes nodeGlow1 {
            0%, 30% { box-shadow: 0 0 5px #00ffc8; transform: scale(1); }
            15% { box-shadow: 0 0 30px #00ffc8; transform: scale(1.1); }
            35%, 100% { box-shadow: 0 0 5px #00ffc8; transform: scale(1); }
        }

        @keyframes nodeGlow2 {
            0%, 60% { box-shadow: 0 0 5px #ff64c8; transform: scale(1); }
            50% { box-shadow: 0 0 30px #ff64c8; transform: scale(1.1); }
            65%, 100% { box-shadow: 0 0 5px #ff64c8; transform: scale(1); }
        }

        @keyframes nodeGlow3 {
            0%, 85% { box-shadow: 0 0 5px #ffc864; transform: scale(1); }
            75% { box-shadow: 0 0 30px #ffc864; transform: scale(1.1); }
            90%, 100% { box-shadow: 0 0 5px #ffc864; transform: scale(1); }
        }

        .timeline-label {
            margin-top: 10px;
            font-size: 0.7em;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .timeline-node:nth-child(1) .timeline-label { color: #00ffc8; }
        .timeline-node:nth-child(3) .timeline-label { color: #ff64c8; }
        .timeline-node:nth-child(5) .timeline-label { color: #ffc864; }

        .timeline-desc {
            font-size: 0.55em;
            color: #666;
            margin-top: 3px;
            text-align: center;
        }

        .timeline-connector {
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #00ffc8, #ff64c8, #ffc864);
            opacity: 0.5;
            position: relative;
        }

        .timeline-connector::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: #00ff88;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
        }

        .timeline-connector:first-of-type::after {
            animation: connectorMove1 12s linear infinite;
        }

        .timeline-connector:last-of-type::after {
            animation: connectorMove2 12s linear infinite;
        }

        @keyframes connectorMove1 {
            0%, 30% { left: 0; opacity: 0; }
            35% { opacity: 1; }
            50% { left: calc(100% - 10px); opacity: 1; }
            55%, 100% { opacity: 0; }
        }

        @keyframes connectorMove2 {
            0%, 60% { left: 0; opacity: 0; }
            65% { opacity: 1; }
            80% { left: calc(100% - 10px); opacity: 1; }
            85%, 100% { opacity: 0; }
        }

        /* ============================================
           REAL-WORLD SCENARIO
           ============================================ */
        .scenario-section {
            max-width: 1100px;
            margin: 280px auto;
            padding: 35px;
            background: rgba(10, 20, 30, 0.8);
            border: 1px solid rgba(255, 100, 200, 0.2);
            border-radius: 15px;
            position: relative;
            z-index: 10;
        }

        .scenario-title {
            text-align: center;
            font-size: 1.5em;
            color: #ff64c8;
            margin-bottom: 25px;
            letter-spacing: 2px;
        }

        .scenario-content {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 20px;
        }

        .scenario-card {
            padding: 20px;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid;
        }

        .scenario-card:nth-child(1) { border-color: #00ffc8; }
        .scenario-card:nth-child(2) { border-color: #ffc864; }
        .scenario-card:nth-child(3) { border-color: #64c8ff; }
        .scenario-card:nth-child(4) { border-color: #ff64c8; }

        .scenario-card-title {
            font-size: 1em;
            font-weight: bold;
            margin-bottom: 12px;
            text-align: center;
        }

        .scenario-card:nth-child(1) .scenario-card-title { color: #00ffc8; }
        .scenario-card:nth-child(2) .scenario-card-title { color: #ffc864; }
        .scenario-card:nth-child(3) .scenario-card-title { color: #64c8ff; }
        .scenario-card:nth-child(4) .scenario-card-title { color: #ff64c8; }

        .scenario-list {
            list-style: none;
            font-size: 0.75em;
            color: #aaa;
        }

        .scenario-list li {
            padding: 5px 0;
            padding-left: 15px;
            position: relative;
        }

        .scenario-list li::before {
            content: '•';
            position: absolute;
            left: 0;
        }

        .scenario-card:nth-child(1) .scenario-list li::before { color: #00ffc8; }
        .scenario-card:nth-child(2) .scenario-list li::before { color: #ffc864; }
        .scenario-card:nth-child(3) .scenario-list li::before { color: #64c8ff; }
        .scenario-card:nth-child(4) .scenario-list li::before { color: #ff64c8; }

        .policy-box {
            grid-column: 1 / -1;
            margin-top: 20px;
            padding: 20px;
            background: rgba(0, 255, 136, 0.1);
            border: 1px solid rgba(0, 255, 136, 0.3);
            border-radius: 10px;
        }

        .policy-title {
            color: #00ff88;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 0.9em;
        }

        .policy-code {
            font-family: 'Courier New', monospace;
            font-size: 0.75em;
            color: #aaa;
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 8px;
            line-height: 1.6;
        }

        .policy-keyword {
            color: #ff64c8;
        }

        .policy-value {
            color: #00ffc8;
        }

        /* ============================================
           IMPLEMENTATION STEPS
           ============================================ */
        .implementation-section {
            max-width: 1000px;
            margin: 0px auto;
            padding: 0 20px;
            position: relative;
            z-index: 10;
        }

        .impl-title {
            text-align: center;
            font-size: 1.4em;
            color: #ffc864;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }

        .impl-steps {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .impl-step {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            padding: 20px;
            background: rgba(10, 10, 20, 0.7);
            border-radius: 12px;
            border-left: 4px solid;
            transition: transform 0.3s ease;
        }

        .impl-step:hover {
            transform: translateX(10px);
        }

        .impl-step:nth-child(odd) { border-color: #00ffc8; }
        .impl-step:nth-child(even) { border-color: #ff64c8; }

        .step-number {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2em;
            flex-shrink: 0;
        }

        .impl-step:nth-child(odd) .step-number { color: #00ffc8; border: 2px solid #00ffc8; }
        .impl-step:nth-child(even) .step-number { color: #ff64c8; border: 2px solid #ff64c8; }

        .step-content {
            flex: 1;
        }

        .step-title {
            color: #fff;
            font-weight: bold;
            font-size: 1em;
            margin-bottom: 8px;
        }

        .step-desc {
            color: #888;
            font-size: 0.8em;
            line-height: 1.6;
        }

        /* ============================================
           MISTAKES & BEST PRACTICES
           ============================================ */
        .practices-section {
            max-width: 1000px;
            margin: 50px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            position: relative;
            z-index: 10;
        }

        .practices-card {
            padding: 25px;
            background: rgba(10, 10, 20, 0.8);
            border-radius: 15px;
        }

        .practices-card.mistakes {
            border: 1px solid rgba(255, 50, 50, 0.3);
        }

        .practices-card.success {
            border: 1px solid rgba(0, 255, 136, 0.3);
        }

        .practices-title {
            font-size: 1.1em;
            margin-bottom: 20px;
            text-align: center;
        }

        .mistakes .practices-title { color: #ff5050; }
        .success .practices-title { color: #00ff88; }

        .practices-list {
            list-style: none;
        }

        .practices-list li {
            padding: 10px 0;
            font-size: 0.8em;
            color: #aaa;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .practices-list li:last-child {
            border-bottom: none;
        }

        .practices-list li::before {
            content: '';
            margin-right: 10px;
        }

        .mistakes .practices-list li::before { content: '❌'; }
        .success .practices-list li::before { content: '✅'; }

        .practice-name {
            color: #fff;
            font-weight: bold;
        }

        /* ============================================
           XACML STANDARDS
           ============================================ */
        .xacml-section {
            max-width: 1000px;
            margin: 50px auto;
            padding: 30px;
            background: linear-gradient(135deg, rgba(100, 200, 255, 0.1) 0%, rgba(255, 100, 200, 0.1) 100%);
            border: 1px solid rgba(100, 200, 255, 0.3);
            border-radius: 15px;
            position: relative;
            z-index: 10;
        }

        .xacml-title {
            text-align: center;
            font-size: 1.3em;
            color: #64c8ff;
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        .xacml-desc {
            text-align: center;
            font-size: 0.85em;
            color: #aaa;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .xacml-components {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .xacml-item {
            padding: 15px 25px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            text-align: center;
            border: 1px solid rgba(100, 200, 255, 0.2);
        }

        .xacml-item-name {
            font-weight: bold;
            color: #64c8ff;
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .xacml-item-desc {
            font-size: 0.7em;
            color: #888;
        }

        /* ============================================
           RESPONSIVE DESIGN
           ============================================ */
        @media (max-width: 1200px) {
            .scenario-content {
                grid-template-columns: 1fr 1fr;
            }
            .practices-section {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.6em;
                letter-spacing: 3px;
            }
            .vs-comparison {
                flex-direction: column;
                gap: 15px;
            }
            .simulation-container {
                height: 580px;
            }
            .component-legend {
                flex-wrap: wrap;
                gap: 10px;
            }
            .legend-item {
                min-width: auto;
                padding: 10px 15px;
            }
            .timeline {
                flex-wrap: wrap;
                justify-content: center;
            }
            .timeline-connector {
                display: none;
            }
            .scenario-content {
                grid-template-columns: 1fr;
            }
            .subject-card, .resource-card {
                width: 130px;
                height: 200px;
            }
            .pdp-card {
                width: 180px;
                height: 260px;
            }
        }/* End custom CSS */