:root {
         --bg-main: #14213d;
         --bg-alt: #050914;
         /* أسود كحلي عميق جداً للأقسام التبادلية */
         --bg-card: #0a1122;
         /* لون الكروت */
         --text-primary: #ffffff;
         --text-secondary: #a0aabf;
         /* رمادي مزرق راقي للقراءة */
         --primary-color: #fca311;
         --border-light: rgba(255, 255, 255, 0.05);
         --gradient-text: linear-gradient(135deg, #fca311 0%, #ffffff 100%);
         --font-arabic: "Alexandria", sans-serif;
         --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     }

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

     html {
         scroll-behavior: smooth;
         direction: rtl;
     }

     body {
         background-color: var(--bg-main);
         color: var(--text-primary);
         font-family: var(--font-arabic);
         line-height: 1.7;
         overflow-x: hidden;
     }

     .container {
         width: 90%;
         max-width: 1200px;
         margin: 0 auto;
     }

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

     .mt-50 {
         margin-top: 50px;
     }

     h1,
     h2,
     h3,
     h4 {
         font-weight: 700;
         line-height: 1.4;
     }

     p {
         font-size: 1.1rem;
     }

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

     /* --- الأزرار الموحدة الاحترافية --- */
     .hero-cta {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 20px;
         flex-wrap: wrap;
         opacity: 0;
         margin-top: 20px;
     }

     .primary-button {
         font-family: var(--font-arabic);
         color: white;
         cursor: pointer;
         font-size: 1.1rem;
         font-weight: 700;
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border: 1px solid #0e1822;
         padding: 14px 32px;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FCA311 %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
         background-color: #0e1822;
         background-size: 200%;
         background-position: 200%;
         background-repeat: no-repeat;
         transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         position: relative;
         z-index: 1;
         box-sizing: border-box;
     }

     .primary-button:hover {
         border: 1px solid var(--primary-color);
         color: #000;
         background-position: 40%;
     }

     .primary-button:before {
         content: "";
         position: absolute;
         background-color: var(--primary-color);
         width: 4px;
         height: 4px;
         top: -1px;
         left: -1px;
     }

     .primary-button:after {
         content: "";
         position: absolute;
         background-color: var(--primary-color);
         width: 4px;
         height: 4px;
         bottom: -1px;
         right: -1px;
     }

     .button-borders {
         position: relative;
         width: fit-content;
         height: fit-content;
     }

     .button-borders:before {
         content: "";
         position: absolute;
         width: calc(100% + 10px);
         height: 50%;
         left: -5px;
         top: -5px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-bottom: 0px;
     }

     .button-borders:after {
         content: "";
         position: absolute;
         width: calc(100% + 10px);
         height: 50%;
         left: -5px;
         bottom: -5px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-top: 0px;
         z-index: 0;
     }

     .whatsapp-btn {
         position: relative;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: 14px 32px;
         font-size: 1.1rem;
         font-weight: 700;
         text-decoration: none;
         color: var(--primary-color);
         background: transparent;
         cursor: pointer;
         transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         border: 1px solid rgba(252, 163, 17, 0.3);
         border-radius: 0px;
         box-sizing: border-box;
     }

     .whatsapp-btn:hover {
         background: rgba(252, 163, 17, 0.1);
         border-color: var(--primary-color);
         transform: translateY(-2px);
     }

     /* --- Hero Section (الخاص بالتأثير السينمائي الممسوح) --- */
     .noise-bg {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         pointer-events: none;
         z-index: 2;
         opacity: 0.04;
         background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
     }

     .shadow-container {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
         z-index: 0;
         pointer-events: none;
     }

     .shadow-blob {
         position: absolute;
         background: rgba(0, 0, 0, 0.5);
         filter: blur(120px);
         border-radius: 50%;
         will-change: transform;
     }

     .s-blob-1 {
         width: 70vw;
         height: 70vw;
         top: -30%;
         left: -20%;
     }

     .s-blob-2 {
         width: 60vw;
         height: 60vw;
         bottom: -30%;
         right: -20%;
     }

     .spotlight-wrapper {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
         z-index: 1;
         pointer-events: none;
     }

     .spotlight {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%),
                 rgba(255, 255, 255, 0.05) 0%,
                 transparent 80%);
         opacity: 0;
         transition: opacity 1s ease;
     }

     .hero:hover .spotlight {
         opacity: 1;
     }

     .hero {
         min-height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         overflow: hidden;
         border-bottom: 1px solid var(--border-light);
     }

     .hero-content {
         max-width: 900px;
         z-index: 3;
         width: 100%;
         padding: 0 20px;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .text-container {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
         align-items: center;
         justify-items: center;
         position: relative;
         margin-bottom: 30px;
         padding: 10px 0;
     }

     .main-text {
         grid-column: 1 / 2;
         grid-row: 1 / 2;
         font-size: clamp(2rem, 4.5vw, 4rem);
         font-weight: 800;
         line-height: 1.3;
         text-align: center;
         letter-spacing: -1px;
     }

     .text-1 {
         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
         z-index: 1;
     }

     .text-2 {
         clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
         z-index: 2;
     }

     .eraser-line {
         position: absolute;
         top: -5%;
         right: -2%;
         width: 4px;
         height: 110%;
         background: var(--primary-color);
         box-shadow: 0 0 15px 2px rgba(252, 163, 17, 0.5);
         opacity: 0;
         z-index: 5;
     }

     .hero-subtitle {
         font-size: clamp(1.1rem, 1.5vw, 1.25rem);
         color: var(--text-secondary);
         margin-bottom: 30px;
         font-weight: 300;
         opacity: 0;
         max-width: 700px;
         text-align: center;
     }

     /* --- Sections Layout --- */
     .section {
         padding: 120px 0;
         position: relative;
         z-index: 3;
         border-bottom: 1px solid var(--border-light);
     }

     .bg-alt {
         background-color: var(--bg-alt);
     }

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

     .section-title {
         font-size: clamp(2rem, 3vw, 2.5rem);
         margin-bottom: 20px;
         font-weight: 800;
         letter-spacing: -0.5px;
     }

     .section-subtitle {
         font-size: 1.1rem;
         color: var(--text-secondary);
         max-width: 700px;
         margin: 0 auto;
         font-weight: 300;
     }

     .grid-2 {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
     }

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

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

     .align-center {
         align-items: center;
     }

     /* --- Premium Cards (The Brutal Truth) --- */
     .card {
         background: var(--bg-card);
         border: 1px solid var(--border-light);
         padding: 40px 30px;
         transition: var(--transition);
         position: relative;
         overflow: hidden;
     }

     .card::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 2px;
         background: var(--primary-color);
         transform: scaleX(0);
         transform-origin: right;
         transition: transform 0.4s ease;
     }

     .card:hover {
         transform: translateY(-5px);
         background: #0c1428;
         border-color: rgba(252, 163, 17, 0.2);
     }

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

     .card-icon {
         font-size: 2.5rem;
         margin-bottom: 20px;
         opacity: 0.9;
     }

     .card h3 {
         font-size: 1.3rem;
         margin-bottom: 15px;
         color: #fff;
     }

     .card p {
         color: var(--text-secondary);
         font-size: 1rem;
         font-weight: 300;
     }

     /* --- Authority Factor --- */
     .feature-list {
         display: flex;
         flex-direction: column;
         gap: 40px;
     }

     .feature-item {
         display: flex;
         gap: 20px;
         align-items: flex-start;
     }

     .feature-check {
         color: var(--bg-main);
         background: var(--primary-color);
         width: 28px;
         height: 28px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: bold;
         flex-shrink: 0;
         font-size: 0.9rem;
     }

     .feature-item h4 {
         font-size: 1.2rem;
         margin-bottom: 8px;
         color: #fff;
     }

     .feature-item p {
         color: var(--text-secondary);
         font-weight: 300;
         font-size: 0.95rem;
     }

     .mockup-frame {
         background: #000;
         border: 1px solid var(--border-light);
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
         position: relative;
     }

     .mockup-header {
         background: #0a1122;
         padding: 12px 16px;
         display: flex;
         gap: 8px;
         direction: ltr;
         border-bottom: 1px solid var(--border-light);
     }

     .dot {
         width: 10px;
         height: 10px;
         border-radius: 50%;
         opacity: 0.5;
     }

     .dot.red {
         background: #ff5f56;
     }

     .dot.yellow {
         background: #ffbd2e;
     }

     .dot.green {
         background: #27c93f;
     }

     .mockup-body {
         height: 400px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: radial-gradient(circle at center, #0a1122 0%, #000 100%);
     }

     .placeholder-text {
         font-size: 1.5rem;
         color: rgba(255, 255, 255, 0.1);
         font-weight: 800;
         letter-spacing: 4px;
         text-transform: uppercase;
     }

     /* --- Timeline (Editorial Awwwards Style) --- */
     .timeline {
         max-width: 800px;
         margin: 0 auto;
         position: relative;
     }

     .timeline-item {
         position: relative;
         padding: 40px 0 40px 60px;
         border-right: 1px solid var(--border-light);
         margin-right: 20px;
     }

     .timeline-num {
         position: absolute;
         right: 20px;
         top: 10px;
         font-size: 6rem;
         font-weight: 800;
         color: rgba(255, 255, 255, 0.03);
         line-height: 1;
         user-select: none;
     }

     .timeline-content {
         position: relative;
         z-index: 2;
     }

     .timeline-content h3 {
         font-size: 1.5rem;
         margin-bottom: 10px;
         color: var(--primary-color);
     }

     .timeline-content p {
         color: var(--text-secondary);
         font-weight: 300;
     }

     /* --- Equation Section --- */
     /* ======================================================== */
     /* --- The Fusion Reactor (Tern + Press Equation) --- */
     /* ======================================================== */

     .fusion-reactor {
         display: flex;
         align-items: stretch;
         justify-content: space-between;
         background: rgba(10, 17, 34, 0.4);
         border: 1px solid rgba(255, 255, 255, 0.05);
         border-radius: 30px;
         padding: 40px;
         position: relative;
         box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 30px 60px rgba(0, 0, 0, 0.4);
         overflow: hidden;
         margin-top: 50px;
         perspective: 1000px;
     }

     /* 1. مساحات الجانبين (Tern & Press) */
     .fusion-zone {
         flex: 1;
         padding: 40px;
         position: relative;
         z-index: 2;
         border-radius: 20px;
         border: 1px solid transparent;
         transition: all 0.5s ease;
     }

     .fusion-zone:hover {
         background: rgba(255, 255, 255, 0.02);
         border-color: rgba(255, 255, 255, 0.05);
         transform: translateY(-5px);
     }

     .zone-bg-glow {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 200px;
         height: 200px;
         filter: blur(80px);
         opacity: 0;
         transition: opacity 0.5s ease;
         z-index: 0;
         pointer-events: none;
     }

     .zone-tern .zone-bg-glow {
         background: rgba(255, 255, 255, 0.1);
     }

     .zone-press .zone-bg-glow {
         background: rgba(252, 163, 17, 0.15);
     }

     .fusion-zone:hover .zone-bg-glow {
         opacity: 1;
     }

     .zone-content {
         position: relative;
         z-index: 2;
         text-align: center;
     }

     .zone-content h3 {
         font-size: 2.5rem;
         margin-bottom: 10px;
         font-weight: 800;
         letter-spacing: 2px;
         text-transform: uppercase;
     }

     .zone-content h4 {
         font-size: 1.4rem;
         color: #fff;
         margin-bottom: 15px;
     }

     .zone-content p {
         color: var(--text-secondary);
         font-size: 1rem;
         line-height: 1.8;
         font-weight: 300;
         margin: 0;
     }

     /* 2. Abstract CSS Art (الرموز البصرية) */
     .zone-art {
         height: 80px;
         margin-bottom: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         z-index: 2;
     }

     /* Tern Art (السرعة والخفة) */
     .art-speed {
         position: relative;
         width: 100px;
         height: 50px;
     }

     .art-speed i {
         position: absolute;
         height: 2px;
         background: #fff;
         border-radius: 2px;
         opacity: 0;
     }

     .art-speed i:nth-child(1) {
         top: 10px;
         width: 40px;
         animation: speed-dash 1.2s infinite linear;
     }

     .art-speed i:nth-child(2) {
         top: 25px;
         width: 80px;
         animation: speed-dash 1.5s infinite linear 0.2s;
         box-shadow: 0 0 10px #fff;
     }

     .art-speed i:nth-child(3) {
         top: 40px;
         width: 60px;
         animation: speed-dash 1s infinite linear 0.4s;
     }

     .art-speed i:nth-child(4) {
         top: 18px;
         width: 20px;
         animation: speed-dash 1.8s infinite linear 0.6s;
     }

     @keyframes speed-dash {
         0% {
             right: -50px;
             opacity: 0;
         }

         20% {
             opacity: 1;
         }

         80% {
             opacity: 1;
         }

         100% {
             right: 100px;
             opacity: 0;
         }
     }

     /* Press Art (التحكم والشبكة) */
     .art-control {
         position: relative;
     }

     .grid-box {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px;
         width: 50px;
         height: 50px;
         transform: rotate(45deg);
     }

     .grid-box span {
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(252, 163, 17, 0.4);
         border-radius: 4px;
         transition: 0.3s ease;
     }

     .grid-box span:nth-child(1) {
         animation: pulse-grid 2s infinite;
     }

     .grid-box span:nth-child(4) {
         animation: pulse-grid 2s infinite 1s;
     }

     .fusion-zone:hover .grid-box span {
         background: rgba(252, 163, 17, 0.2);
         box-shadow: 0 0 15px rgba(252, 163, 17, 0.4);
     }

     @keyframes pulse-grid {

         0%,
         100% {
             transform: scale(1);
             background: rgba(255, 255, 255, 0.05);
         }

         50% {
             transform: scale(0.9);
             background: var(--primary-color);
         }
     }

     /* 3. The Bridge & Magnetic Core (منطقة الدمج) */
     .fusion-bridge {
         width: 150px;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         z-index: 3;
     }

     .energy-stream {
         position: absolute;
         top: 50%;
         height: 2px;
         width: 50%;
         background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
         opacity: 0.5;
         z-index: 1;
     }

     .stream-left {
         right: 50%;
         background: linear-gradient(90deg, transparent, #fff);
         animation: flow-left 2s infinite linear;
     }

     .stream-right {
         left: 50%;
         background: linear-gradient(270deg, transparent, var(--primary-color));
         animation: flow-right 2s infinite linear;
     }

     @keyframes flow-left {
         0% {
             transform: translateX(100%);
             opacity: 0;
         }

         50% {
             opacity: 1;
         }

         100% {
             transform: translateX(-10px);
             opacity: 0;
         }
     }

     @keyframes flow-right {
         0% {
             transform: translateX(-100%);
             opacity: 0;
         }

         50% {
             opacity: 1;
         }

         100% {
             transform: translateX(10px);
             opacity: 0;
         }
     }

     /* الغلاف المغناطيسي للزر */
     .magnetic-core-wrapper {
         position: relative;
         width: 120px;
         height: 120px;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 5;
     }

     .magnetic-core {
         width: 70px;
         height: 70px;
         background: rgba(10, 17, 34, 0.8);
         border: 1px solid rgba(252, 163, 17, 0.4);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 3rem;
         font-weight: 300;
         color: var(--primary-color);
         backdrop-filter: blur(10px);
         box-shadow: 0 0 30px rgba(252, 163, 17, 0.2), inset 0 0 20px rgba(252, 163, 17, 0.1);
         cursor: pointer;
         transition: transform 0.1s ease-out, box-shadow 0.3s ease;
     }

     .magnetic-core-wrapper:hover .magnetic-core {
         box-shadow: 0 0 50px rgba(252, 163, 17, 0.5), inset 0 0 30px rgba(252, 163, 17, 0.3);
         color: #fff;
         background: rgba(252, 163, 17, 0.1);
     }

     /* --- تجاوب الموبايل --- */
     @media (max-width: 992px) {
         .fusion-reactor {
             flex-direction: column;
             padding: 20px;
         }

         .fusion-bridge {
             width: 100%;
             height: 150px;
             transform: rotate(90deg);
         }
     }


     /* --- FAQ --- */
     .faq-list {
         max-width: 800px;
         margin: 0 auto;
     }

     .faq-item {
         border-bottom: 1px solid var(--border-light);
         transition: var(--transition);
     }

     .faq-q {
         padding: 30px 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
     }

     .faq-q h3 {
         font-size: 1.1rem;
         font-weight: 600;
         margin: 0;
         color: #fff;
         transition: var(--transition);
     }

     .faq-icon {
         font-size: 1.5rem;
         color: var(--primary-color);
         transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         font-weight: 300;
     }

     .faq-a {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         will-change: max-height;
         /* السطر ده بيسرع الأداء */
     }

     /* --- FAQ --- */
     .faq-item.open .faq-q h3 {
         color: var(--primary-color);
     }

     .faq-item.open .faq-icon {
         transform: rotate(45deg);
     }

     .faq-item.open .faq-a {
         max-height: 200px;
         /* أو ممكن تزودها لـ 300px لو إجاباتك طويلة */
     }

     .faq-a p {
         color: var(--text-secondary);
         font-weight: 300;
         padding-bottom: 30px;
     }

     /* --- Final CTA --- */
     .final-cta {
         text-align: center;
         padding: 150px 0;
         background: radial-gradient(circle at center,
                 rgba(252, 163, 17, 0.05) 0%,
                 transparent 60%);
     }

     .cta-title {
         font-size: clamp(2rem, 4vw, 3rem);
         margin-bottom: 20px;
         letter-spacing: -1px;
     }

     /* --- Scroll Reveal Animations --- */
     .reveal-up {
         opacity: 0;
         transform: translateY(40px);
         transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
     }

     .reveal-up.active {
         opacity: 1;
         transform: translateY(0);
     }

     .delay-1 {
         transition-delay: 0.1s;
     }

     .delay-2 {
         transition-delay: 0.2s;
     }

     .delay-3 {
         transition-delay: 0.3s;
     }

     .delay-4 {
         transition-delay: 0.4s;
     }

     @media (max-width: 992px) {

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

         .grid-2 {
             grid-template-columns: 1fr;
             gap: 40px;
         }
     }

     @media (max-width: 768px) {

         .grid-4,
         .grid-3 {
             grid-template-columns: 1fr;
         }

         .hero-cta {
             flex-direction: column;
             width: 100%;
         }

         .hero-cta .button-borders,
         .hero-cta .whatsapp-btn {
             width: 100%;
             display: flex;
         }

         .hero-cta .primary-button {
             width: 100%;
         }

         .timeline-item {
             padding: 30px 0 30px 40px;
             margin-right: 10px;
         }

         .timeline-num {
             font-size: 4rem;
         }

         .eq-plus {
             transform: rotate(90deg);
             margin: 20px 0;
         }

         .section {
             padding: 80px 0;
         }
     }

     /* --- Interactive Split-Screen Showcase (Premium Level) --- */
     .interactive-showcase {
         display: grid;
         grid-template-columns: 1fr 1.5fr;
         /* الشاشة الزجاجية تأخذ مساحة أكبر */
         gap: 50px;
         align-items: center;
     }

     /* 1. قائمة العناوين (Right Side) */
     .showcase-list {
         display: flex;
         flex-direction: column;
         border-right: 2px solid rgba(255, 255, 255, 0.05);
         /* خط عمودي أنيق */
         padding-right: 0;
     }

     .showcase-item {
         padding: 25px 30px;
         cursor: pointer;
         position: relative;
         transition: all 0.4s ease;
     }

     /* الخط النشط اللي بيتحرك مع التحديد */
     .showcase-item::before {
         content: "";
         position: absolute;
         top: 0;
         right: -2px;
         /* يغطي على الخط الأصلي */
         width: 2px;
         height: 100%;
         background: var(--primary-color);
         transform: scaleY(0);
         transform-origin: top;
         transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     }

     .showcase-item.active::before {
         transform: scaleY(1);
     }

     .item-num {
         display: block;
         font-size: 0.9rem;
         font-weight: 700;
         color: rgba(255, 255, 255, 0.2);
         margin-bottom: 8px;
         letter-spacing: 1px;
         transition: color 0.4s ease;
     }

     .item-title {
         font-size: 1.2rem;
         color: rgba(255, 255, 255, 0.4);
         font-weight: 500;
         transition: color 0.4s ease;
     }

     .showcase-item:hover .item-title {
         color: rgba(255, 255, 255, 0.7);
     }

     .showcase-item.active .item-num {
         color: var(--primary-color);
     }

     .showcase-item.active .item-title {
         color: #ffffff;
         font-weight: 700;
     }

     /* 2. شاشة العرض الزجاجية (Left Side) */
     .showcase-display {
         background: var(--card-bg);
         border: 1px solid var(--border-light);
         border-radius: 20px;
         padding: 50px;
         position: relative;
         min-height: 350px;
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
         overflow: hidden;
     }

     .display-content {
         position: absolute;
         top: 50px;
         left: 50px;
         right: 50px;
         opacity: 0;
         visibility: hidden;
         transform: translateY(20px);
     }

     .display-content.active {
         position: relative;
         top: 0;
         left: 0;
         right: 0;
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     .display-content p {
         color: var(--text-secondary);
         font-size: 1.15rem;
         line-height: 1.8;
         font-weight: 300;
     }

     /* 3. العناصر المرئية المجردة (Abstract Visuals بدل الأيموجي) */
     .abstract-visual {
         margin-bottom: 30px;
         height: 80px;
         display: flex;
         align-items: center;
     }

     /* رسم بياني ينهار */
     .visual-chart {
         display: flex;
         align-items: flex-end;
         gap: 8px;
         height: 60px;
         width: 100%;
     }

     .visual-chart .bar {
         width: 25px;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 4px 4px 0 0;
     }

     .visual-chart .bar:nth-child(1) {
         height: 100%;
     }

     .visual-chart .bar:nth-child(2) {
         height: 75%;
     }

     .visual-chart .bar:nth-child(3) {
         height: 50%;
     }

     .visual-chart .bar.danger {
         height: 15%;
         background: #ff4655;
         /* أحمر يعبر عن الخطر/المبيعات الصفر */
         box-shadow: 0 0 15px rgba(255, 70, 85, 0.4);
     }

     /* شريط تحميل ميت/بطيء */
     .visual-loader {
         width: 50px;
         height: 50px;
         border: 4px solid rgba(255, 255, 255, 0.05);
         border-top-color: var(--text-secondary);
         border-radius: 50%;
         animation: slow-spin 3s linear infinite;
     }

     @keyframes slow-spin {
         100% {
             transform: rotate(360deg);
         }
     }

     /* نصوص باهتة ومملة */
     .visual-text {
         width: 100%;
     }

     .visual-text .t-line {
         height: 10px;
         background: rgba(255, 255, 255, 0.1);
         margin-bottom: 12px;
         border-radius: 4px;
     }

     .visual-text .t-line:nth-child(1) {
         width: 80%;
     }

     .visual-text .t-line:nth-child(2) {
         width: 60%;
         opacity: 0.5;
     }

     .visual-text .t-line.short {
         width: 40%;
         opacity: 0.2;
     }

     /* الموبايل */
     @media (max-width: 768px) {
         .interactive-showcase {
             grid-template-columns: 1fr;
             gap: 30px;
         }

         .showcase-list {
             flex-direction: row;
             border-right: none;
             border-bottom: 2px solid rgba(255, 255, 255, 0.05);
             overflow-x: auto;
             padding-bottom: 10px;
         }

         .showcase-item {
             padding: 15px;
             flex-shrink: 0;
             white-space: nowrap;
         }

         .showcase-item::before {
             width: 100%;
             height: 2px;
             top: auto;
             bottom: -2px;
             right: 0;
             transform: scaleX(0);
             transform-origin: right;
         }

         .showcase-item.active::before {
             transform: scaleX(1);
         }

         .showcase-display {
             padding: 30px;
             min-height: 300px;
         }

         .display-content {
             top: 30px;
             left: 30px;
             right: 30px;
         }
     }




     /* ======================================================== */
     /* --- Cyber-Glass Accordion (The Authority Factor) --- */
     /* ======================================================== */

     .cyber-accordion {
         display: flex;
         gap: 15px;
         height: 480px;
         width: 100%;
     }

     .cyber-panel {
         position: relative;
         flex: 1;
         /* الحجم في وضع الإغلاق */
         background: rgba(255, 255, 255, 0.02);
         border: 1px solid rgba(255, 255, 255, 0.05);
         border-radius: 24px;
         cursor: pointer;
         overflow: hidden;
         transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease, border-color 0.4s ease;
     }

     /* حالة التمدد (عند التحديد أو الـ Hover) */
     .cyber-panel.active {
         flex: 6;
         /* يتمدد ليأخذ 6 أضعاف الحجم */
         background: #0A1122;
         border-color: rgba(252, 163, 17, 0.3);
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
     }

     /* 1. التاب العمودي (يظهر فقط والعمود مغلق) */
     .vertical-tab {
         position: absolute;
         inset: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         opacity: 1;
         transition: opacity 0.3s ease;
     }

     .cyber-panel.active .vertical-tab {
         opacity: 0;
         pointer-events: none;
     }

     .v-num {
         font-size: 1.8rem;
         font-weight: 800;
         color: var(--primary-color);
         margin-bottom: 30px;
     }

     .v-title {
         writing-mode: vertical-rl;
         /* لف النص بشكل عمودي */
         transform: rotate(180deg);
         font-size: 1.3rem;
         font-weight: 700;
         letter-spacing: 2px;
         color: rgba(255, 255, 255, 0.4);
         white-space: nowrap;
     }

     /* 2. المحتوى الداخلي المتمدد */
     .panel-content-wrapper {
         position: absolute;
         inset: 0;
         padding: 50px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         opacity: 0;
         transform: translateX(30px);
         transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
         pointer-events: none;
     }

     .cyber-panel.active .panel-content-wrapper {
         opacity: 1;
         transform: translateX(0);
         pointer-events: auto;
         transition-delay: 0.2s;
         /* تأخير بسيط عشان يظهر بعد التمدد */
     }

     .content-text {
         max-width: 60%;
         position: relative;
         z-index: 2;
     }

     .c-num {
         font-size: 5rem;
         font-weight: 800;
         color: rgba(252, 163, 17, 0.1);
         line-height: 1;
         margin-bottom: 10px;
         transform: translateY(20px);
         transition: transform 0.6s ease;
     }

     .cyber-panel.active .c-num {
         transform: translateY(0);
     }

     .content-text h4 {
         font-size: 1.8rem;
         color: #fff;
         margin-bottom: 15px;
         letter-spacing: -0.5px;
     }

     .content-text p {
         font-size: 1.15rem;
         color: var(--text-secondary);
         font-weight: 300;
         line-height: 1.8;
     }

     /* 3. العناصر الفنية (CSS Abstract Art) */
     .content-visual {
         width: 30%;
         display: flex;
         justify-content: flex-end;
         position: relative;
         z-index: 1;
     }

     /* Art 1: 3D Layers (الاستقرار) */
     .art-layers {
         position: relative;
         width: 100px;
         height: 100px;
         transform: rotateX(60deg) rotateZ(-45deg);
         transform-style: preserve-3d;
     }

     .layer {
         position: absolute;
         width: 80px;
         height: 80px;
         border: 2px solid var(--primary-color);
         border-radius: 8px;
         background: rgba(252, 163, 17, 0.1);
     }

     .layer:nth-child(1) {
         transform: translateZ(40px);
         animation: float-up 3s infinite ease-in-out;
     }

     .layer:nth-child(2) {
         transform: translateZ(20px);
         animation: float-up 3s infinite ease-in-out 0.2s;
         border-color: rgba(255, 255, 255, 0.3);
     }

     .layer:nth-child(3) {
         transform: translateZ(0px);
         box-shadow: 0 0 30px var(--primary-color);
     }

     @keyframes float-up {

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

         50% {
             transform: translateZ(50px);
         }
     }

     /* Art 2: Focus Ring (بدون تشتيت) */
     .art-focus-ring {
         position: relative;
         width: 120px;
         height: 120px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .core {
         width: 30px;
         height: 30px;
         background: var(--primary-color);
         border-radius: 50%;
         box-shadow: 0 0 20px var(--primary-color);
         z-index: 2;
     }

     .ring-1,
     .ring-2 {
         position: absolute;
         border: 1px dashed rgba(255, 255, 255, 0.2);
         border-radius: 50%;
         animation: spin-slow 10s linear infinite;
     }

     .ring-1 {
         width: 80px;
         height: 80px;
     }

     .ring-2 {
         width: 120px;
         height: 120px;
         animation-direction: reverse;
         border-color: rgba(252, 163, 17, 0.5);
     }

     /* Art 3: Data Flow (التواصل) */
     .art-comms {
         display: flex;
         align-items: center;
         gap: 10px;
         width: 150px;
     }

     .comm-node {
         width: 15px;
         height: 15px;
         border-radius: 50%;
         border: 2px solid rgba(255, 255, 255, 0.3);
     }

     .comm-node.glow {
         border-color: var(--primary-color);
         box-shadow: 0 0 15px var(--primary-color);
     }

     .comm-line {
         flex: 1;
         height: 2px;
         background: rgba(255, 255, 255, 0.1);
         position: relative;
         overflow: hidden;
     }

     .comm-line::after {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 50%;
         height: 100%;
         background: var(--primary-color);
         animation: data-flow 1.2s infinite ease-in-out;
     }

     @keyframes data-flow {
         0% {
             left: -50%;
         }

         100% {
             left: 150%;
         }
     }

     /* Art 4: Shield/Asset (الأصل الرقمي) */
     .art-shield {
         width: 70px;
         height: 80px;
         border: 3px solid var(--primary-color);
         border-radius: 10px 10px 35px 35px;
         position: relative;
         overflow: hidden;
         box-shadow: inset 0 0 20px rgba(252, 163, 17, 0.2);
     }

     .shield-scan {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 3px;
         background: #fff;
         box-shadow: 0 0 15px #fff;
         animation: scan-down 2s infinite linear;
     }

     @keyframes scan-down {
         0% {
             top: -10px;
             opacity: 0;
         }

         10% {
             opacity: 1;
         }

         90% {
             opacity: 1;
         }

         100% {
             top: 100%;
             opacity: 0;
         }
     }

     /* --- تجاوب الموبايل (يتحول لأكورديون عمودي بدلاً من أفقي) --- */
     @media (max-width: 992px) {
         .cyber-accordion {
             flex-direction: column;
             height: 600px;
         }

         .v-title {
             writing-mode: horizontal-tb;
             transform: none;
             display: inline-block;
             margin-right: 15px;
         }

         .vertical-tab {
             flex-direction: row;
             justify-content: flex-start;
             padding: 0 30px;
         }

         .v-num {
             margin-bottom: 0;
             font-size: 1.5rem;
         }

         .panel-content-wrapper {
             padding: 30px;
             flex-direction: column;
             text-align: center;
         }

         .content-text {
             max-width: 100%;
         }

         .content-visual {
             width: 100%;
             justify-content: center;
             margin-top: 20px;
         }

         .c-num {
             font-size: 3rem;
             margin-bottom: 0;
         }
     }

     /* ======================================================== */
     /* --- Premium Holographic Cards (Client Journey) --- */
     /* ======================================================== */

     .holo-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
         perspective: 1200px;
         /* لتمكين تأثير الـ 3D العميق */
     }

     .holo-card {
         background: rgba(255, 255, 255, 0.02);
         border: 1px solid rgba(255, 255, 255, 0.05);
         border-radius: 24px;
         padding: 50px 40px;
         position: relative;
         transform-style: preserve-3d;
         /* بيسمح للعناصر الداخلية تبرز لبرة */
         transition: border-color 0.4s ease, box-shadow 0.4s ease;
         cursor: pointer;
     }

     .holo-card:hover {
         border-color: rgba(252, 163, 17, 0.3);
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
     }

     /* 1. تأثير المغناطيس والإضاءة الداخلية */
     .holo-glow-wrapper {
         position: absolute;
         inset: 0;
         overflow: hidden;
         border-radius: 24px;
         z-index: 0;
         transform: translateZ(0);
         /* قاعدة لتأثير 3D */
     }

     .holo-glow {
         position: absolute;
         top: var(--y, 50%);
         left: var(--x, 50%);
         width: 400px;
         height: 400px;
         background: radial-gradient(circle closest-side, rgba(252, 163, 17, 0.15), transparent);
         transform: translate(-50%, -50%);
         opacity: 0;
         transition: opacity 0.4s ease;
         pointer-events: none;
     }

     .holo-card:hover .holo-glow {
         opacity: 1;
     }

     /* 2. الرقم المائي الخلفي (بيغوص لجوة) */
     .holo-num {
         position: absolute;
         top: -10px;
         right: 10px;
         font-size: 8rem;
         font-weight: 800;
         line-height: 1;
         color: rgba(255, 255, 255, 0.02);
         transform: translateZ(-40px);
         /* مدفون في الخلفية */
         transition: color 0.4s ease;
         pointer-events: none;
     }

     .holo-card:hover .holo-num {
         color: rgba(252, 163, 17, 0.05);
     }

     /* 3. العناصر المرئية والأيقونات (بتطير لبرة الكارت) */
     .holo-art {
         height: 80px;
         margin-bottom: 40px;
         position: relative;
         transform: translateZ(60px);
         /* بارز جداً لبرة */
         pointer-events: none;
     }

     /* CSS Art 01: Focus Tracker */
     .art-focus {
         width: 50px;
         height: 50px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         position: relative;
     }

     .art-focus::before,
     .art-focus::after {
         content: '';
         position: absolute;
         width: 12px;
         height: 12px;
         border: 2px solid var(--primary-color);
     }

     .art-focus::before {
         top: -2px;
         left: -2px;
         border-right: none;
         border-bottom: none;
     }

     .art-focus::after {
         bottom: -2px;
         right: -2px;
         border-left: none;
         border-top: none;
     }

     .art-dot {
         position: absolute;
         width: 6px;
         height: 6px;
         background: var(--primary-color);
         border-radius: 50%;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         animation: ping-dot 1.5s infinite;
     }

     @keyframes ping-dot {
         0% {
             box-shadow: 0 0 0 0 rgba(252, 163, 17, 0.6);
         }

         70% {
             box-shadow: 0 0 0 15px rgba(252, 163, 17, 0);
         }

         100% {
             box-shadow: 0 0 0 0 rgba(252, 163, 17, 0);
         }
     }

     /* CSS Art 02: Warp Speed */
     .art-speed {
         width: 100px;
         height: 50px;
         position: relative;
         overflow: hidden;
         border-left: 2px solid rgba(255, 255, 255, 0.1);
         padding-left: 10px;
     }

     .art-line {
         position: absolute;
         height: 2px;
         background: var(--primary-color);
         border-radius: 2px;
     }

     .art-line:nth-child(1) {
         top: 10px;
         left: 0;
         width: 40px;
         animation: streak 1s infinite linear;
     }

     .art-line:nth-child(2) {
         top: 25px;
         left: 20px;
         width: 80px;
         animation: streak 1.5s infinite linear 0.3s;
         opacity: 0.5;
     }

     .art-line:nth-child(3) {
         top: 40px;
         left: -10px;
         width: 30px;
         animation: streak 0.8s infinite linear 0.6s;
     }

     @keyframes streak {
         0% {
             transform: translateX(150px);
             opacity: 0;
         }

         50% {
             opacity: 1;
         }

         100% {
             transform: translateX(-50px);
             opacity: 0;
         }
     }

     /* CSS Art 03: The Filter/Funnel */
     .art-filter {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
     }

     .art-filter span {
         height: 4px;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 4px;
         transition: 0.3s ease;
     }

     .art-filter span:nth-child(1) {
         width: 60px;
     }

     .art-filter span:nth-child(2) {
         width: 40px;
     }

     .art-filter span:nth-child(3) {
         width: 20px;
         background: var(--primary-color);
         box-shadow: 0 0 15px var(--primary-color);
     }

     .holo-card:hover .art-filter span:nth-child(1) {
         width: 70px;
         background: rgba(255, 255, 255, 0.3);
     }

     /* CSS Art 04: Neural Nodes */
     .art-nodes {
         display: flex;
         align-items: center;
         gap: 15px;
         position: relative;
         width: 120px;
     }

     .art-node {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: var(--bg-alt);
         border: 2px solid var(--primary-color);
         box-shadow: 0 0 10px rgba(252, 163, 17, 0.5);
         z-index: 2;
     }

     .art-path {
         height: 2px;
         flex: 1;
         background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 4px, transparent 4px, transparent 8px);
         position: relative;
     }

     .art-signal {
         position: absolute;
         top: -2px;
         left: 0;
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: #fff;
         box-shadow: 0 0 10px #fff;
         animation: travel 1.5s infinite ease-in-out;
     }

     @keyframes travel {
         0% {
             left: 0;
             opacity: 0;
         }

         20% {
             opacity: 1;
         }

         80% {
             opacity: 1;
         }

         100% {
             left: 100%;
             opacity: 0;
         }
     }

     /* 4. محتوى النص (بارز نسبياً) */
     .holo-info {
         transform: translateZ(30px);
         /* بارز لبرة بس أقل من الأيقونة */
         pointer-events: none;
     }

     .holo-info h3 {
         font-size: 1.5rem;
         color: #fff;
         margin-bottom: 15px;
     }

     .holo-info p {
         color: var(--text-secondary);
         font-size: 1.05rem;
         font-weight: 300;
         line-height: 1.7;
     }

     @media (max-width: 992px) {
         .holo-grid {
             grid-template-columns: 1fr;
         }
     }



     /* ======================================================== */
     /* --- The Live Simulator (Process Section) --- */
     /* ======================================================== */

     .simulator-wrapper {
         display: flex;
         gap: 50px;
         align-items: center;
         margin-top: 50px;
     }

     /* 1. قائمة الخطوات (Right Side) */
     .simulator-steps {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 15px;
     }

     .sim-step {
         display: flex;
         gap: 20px;
         padding: 25px;
         border-radius: 16px;
         border: 1px solid transparent;
         cursor: pointer;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
     }

     .sim-step::before {
         content: '';
         position: absolute;
         top: 0;
         right: 0;
         width: 3px;
         height: 100%;
         background: var(--primary-color);
         transform: scaleY(0);
         transition: transform 0.4s ease;
     }

     .sim-step.active {
         background: rgba(255, 255, 255, 0.02);
         border-color: rgba(255, 255, 255, 0.05);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     }

     .sim-step.active::before {
         transform: scaleY(1);
     }

     .step-indicator {
         width: 50px;
         height: 50px;
         flex-shrink: 0;
         border-radius: 12px;
         background: rgba(0, 0, 0, 0.5);
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgba(255, 255, 255, 0.2);
         border: 1px solid rgba(255, 255, 255, 0.05);
         transition: all 0.4s ease;
     }

     .step-indicator svg {
         width: 24px;
         height: 24px;
     }

     .sim-step:hover .step-indicator {
         color: rgba(255, 255, 255, 0.6);
     }

     .sim-step.active .step-indicator {
         color: #000;
         background: var(--primary-color);
         border-color: var(--primary-color);
         box-shadow: 0 0 20px rgba(252, 163, 17, 0.4);
     }

     .step-info h3 {
         font-size: 1.3rem;
         color: rgba(255, 255, 255, 0.5);
         margin-bottom: 8px;
         transition: color 0.4s ease;
     }

     .step-info p {
         color: var(--text-secondary);
         font-size: 0.95rem;
         line-height: 1.6;
         margin: 0;
         opacity: 0.5;
         transition: opacity 0.4s ease;
     }

     .sim-step.active .step-info h3 {
         color: #fff;
     }

     .sim-step.active .step-info p {
         opacity: 1;
     }

     /* 2. شاشة المحاكاة (Left Side) */
     .simulator-screen {
         flex: 1.2;
         background: #050914;
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         overflow: hidden;
         box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
         position: relative;
         height: 450px;
         display: flex;
         flex-direction: column;
     }

     .screen-header {
         background: #0A1122;
         padding: 15px 20px;
         display: flex;
         gap: 8px;
         align-items: center;
         direction: ltr;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .screen-header .dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         opacity: 0.8;
     }

     .screen-title {
         margin-left: 15px;
         font-family: monospace;
         color: rgba(255, 255, 255, 0.3);
         font-size: 0.9rem;
     }

     .screen-body {
         flex: 1;
         position: relative;
         background: radial-gradient(circle at center, #0A1122 0%, #050914 100%);
     }

     .sim-state {
         position: absolute;
         inset: 0;
         padding: 30px;
         opacity: 0;
         visibility: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }

     .sim-state.active {
         opacity: 1;
         visibility: visible;
     }

     .terminal-text {
         position: absolute;
         bottom: 20px;
         left: 30px;
         font-family: monospace;
         color: rgba(255, 255, 255, 0.5);
         font-size: 0.9rem;
         text-align: left;
         direction: ltr;
         line-height: 1.6;
     }

     .color-primary {
         color: var(--primary-color) !important;
     }

     .color-success {
         color: #25D366 !important;
     }

     /* --- Animations for the Screen States --- */

     /* State 0: Radar */
     .radar-container {
         width: 200px;
         height: 200px;
         border: 1px dashed rgba(252, 163, 17, 0.3);
         border-radius: 50%;
         position: relative;
         overflow: hidden;
     }

     .radar-grid {
         position: absolute;
         inset: 0;
         background: linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.1) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, rgba(255, 255, 255, 0.1) 50%, transparent 51%);
     }

     .radar-sweep {
         position: absolute;
         top: 0;
         left: 100px;
         width: 100px;
         height: 100px;
         background: linear-gradient(45deg, rgba(252, 163, 17, 0.4) 0%, transparent 100%);
         transform-origin: bottom left;
         animation: radar-spin 2s linear infinite;
     }

     .target-node {
         position: absolute;
         width: 8px;
         height: 8px;
         background: #fff;
         border-radius: 50%;
         box-shadow: 0 0 10px #fff;
         animation: node-blink 2s infinite;
     }

     @keyframes radar-spin {
         100% {
             transform: rotate(360deg);
         }
     }

     @keyframes node-blink {

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

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

     /* State 1: Copywriting */
     .copy-doc {
         width: 80%;
         background: rgba(255, 255, 255, 0.02);
         border: 1px solid rgba(255, 255, 255, 0.05);
         border-radius: 8px;
         padding: 30px;
     }

     .text-skeleton {
         height: 12px;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 4px;
         margin-bottom: 15px;
     }

     .w-80 {
         width: 80%;
     }

     .w-60 {
         width: 60%;
     }

     .highlight-wrapper {
         position: relative;
         margin-top: 30px;
     }

     .highlight-text {
         background: rgba(255, 255, 255, 0.3);
         width: 90%;
     }

     .highlighter-pen {
         position: absolute;
         top: -5px;
         left: 0;
         height: 22px;
         width: 0%;
         background: rgba(252, 163, 17, 0.4);
         border-radius: 4px;
         z-index: -1;
         animation: highlight-draw 3s infinite ease-in-out;
     }

     @keyframes highlight-draw {

         0%,
         20% {
             width: 0;
         }

         80%,
         100% {
             width: 95%;
         }
     }

     /* State 2: Development */
     .dev-ui {
         display: flex;
         gap: 20px;
         width: 100%;
         height: 150px;
         position: relative;
     }

     .ui-sidebar {
         width: 60px;
         background: rgba(255, 255, 255, 0.05);
         border-radius: 8px;
     }

     .ui-main {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 10px;
     }

     .ui-card {
         flex: 1;
         background: rgba(255, 255, 255, 0.02);
         border: 1px solid rgba(255, 255, 255, 0.05);
         border-radius: 8px;
     }

     .bounce-1 {
         animation: float-ui 3s infinite ease-in-out;
     }

     .bounce-2 {
         animation: float-ui 3s infinite ease-in-out 1.5s;
     }

     .code-overlay {
         position: absolute;
         inset: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         background: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(2px);
         padding: 20px;
         font-family: monospace;
         color: rgba(255, 255, 255, 0.4);
         font-size: 1.1rem;
         direction: ltr;
     }

     .code-overlay span {
         display: block;
         margin-bottom: 5px;
         opacity: 0;
         animation: code-type 4s infinite;
     }

     .code-overlay span:nth-child(1) {
         animation-delay: 0s;
     }

     .code-overlay span:nth-child(2) {
         animation-delay: 0.5s;
     }

     .code-overlay span:nth-child(3) {
         animation-delay: 1s;
     }

     .code-overlay span:nth-child(4) {
         animation-delay: 1.5s;
     }

     .code-overlay span:nth-child(5) {
         animation-delay: 2s;
     }

     .indent-1 {
         margin-left: 20px;
     }

     .indent-2 {
         margin-left: 40px;
     }

     @keyframes float-ui {

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

         50% {
             transform: translateY(-10px);
             border-color: var(--primary-color);
         }
     }

     @keyframes code-type {
         0% {
             opacity: 0;
             transform: translateX(-10px);
         }

         10%,
         90% {
             opacity: 1;
             transform: translateX(0);
         }

         100% {
             opacity: 0;
         }
     }

     /* State 3: Launch */
     .launch-sequence {
         position: relative;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 100%;
     }

     .core-online {
         padding: 15px 30px;
         background: #25D366;
         color: #000;
         font-weight: 800;
         font-family: monospace;
         border-radius: 50px;
         font-size: 1.2rem;
         box-shadow: 0 0 30px rgba(37, 211, 102, 0.6);
         z-index: 2;
         animation: pulse-core 2s infinite;
     }

     .shockwave {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         border: 2px solid #25D366;
         border-radius: 50%;
     }

     .w-1 {
         animation: wave-expand 2s infinite ease-out;
     }

     .w-2 {
         animation: wave-expand 2s infinite ease-out 1s;
     }

     @keyframes pulse-core {

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

         50% {
             transform: scale(1.1);
         }
     }

     @keyframes wave-expand {
         0% {
             width: 0;
             height: 0;
             opacity: 1;
         }

         100% {
             width: 300px;
             height: 300px;
             opacity: 0;
         }
     }

     /* --- تجاوب الشاشات (Mobile) --- */
     @media (max-width: 992px) {
         .simulator-wrapper {
             flex-direction: column-reverse;
         }

         /* الشاشة تظهر أولاً في الموبايل */
         .simulator-screen {
             width: 100%;
             height: 350px;
         }

         .simulator-steps {
             width: 100%;
         }
     }

     /* --- Final CTA Section Enhancements --- */
     .final-cta {
         position: relative;
         overflow: hidden;
         padding: 100px 0;
         text-align: center;
         background-color: var(--bg-alt);
     }

     .cta-glow-orb {
         position: absolute;
         border-radius: 50%;
         filter: blur(80px);
         opacity: 0.4;
         z-index: 0;
         animation: floatOrb 10s infinite alternate ease-in-out;
         pointer-events: none;
     }

     .cta-glow-orb.orb-1 {
         width: 400px;
         height: 400px;
         background: rgba(252, 163, 17, 0.15);
         top: -150px;
         right: -100px;
     }

     .cta-glow-orb.orb-2 {
         width: 300px;
         height: 300px;
         background: rgba(255, 255, 255, 0.05);
         bottom: -50px;
         left: -100px;
         animation-delay: -5s;
     }

     @keyframes floatOrb {
         0% {
             transform: translate(0, 0) scale(1);
         }

         100% {
             transform: translate(-30px, 50px) scale(1.1);
         }
     }

     .cta-glass-card {
         position: relative;
         z-index: 1;
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(255, 255, 255, 0.08);
         border-radius: 24px;
         padding: 60px 40px;
         backdrop-filter: blur(16px);
         -webkit-backdrop-filter: blur(16px);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
         max-width: 800px;
         margin: 0 auto;
         transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
     }

     .cta-glass-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
         border-color: rgba(252, 163, 17, 0.3);
     }

     .cta-title {
         font-size: 2.5rem;
         margin-bottom: 20px;
     }

     .cta-pulse-btn {
         box-shadow: 0 0 20px rgba(252, 163, 17, 0.2);
     }

     .cta-pulse-btn:hover {
         box-shadow: 0 0 30px rgba(252, 163, 17, 0.5);
         transform: translateY(-2px);
     }

     /* ======================================================== */
     /* --- Clients Showcase (Premium Glassmorphism) --- */
     /* ======================================================== */

     .clients-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
         max-width: 1000px;
         margin: 0 auto;
         perspective: 1200px;
     }

     .client-card {
         position: relative;
         background: rgba(255, 255, 255, 0.02);
         border: 1px solid rgba(255, 255, 255, 0.05);
         border-radius: 24px;
         padding: 60px 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         overflow: hidden;
         transform-style: preserve-3d;
         transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
     }

     .client-card:hover {
         background: rgba(10, 17, 34, 0.6);
         border-color: rgba(252, 163, 17, 0.3);
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(252, 163, 17, 0.05);
     }

     /* تأثير النور اللي بيمشي مع الماوس (Spotlight) */
     .client-glow {
         position: absolute;
         width: 300px;
         height: 300px;
         background: radial-gradient(circle closest-side, rgba(252, 163, 17, 0.15), transparent);
         top: var(--mouse-y, 50%);
         left: var(--mouse-x, 50%);
         transform: translate(-50%, -50%);
         opacity: 0;
         transition: opacity 0.4s ease;
         pointer-events: none;
         z-index: 0;
     }

     .client-card:hover .client-glow {
         opacity: 1;
     }

     .client-content {
         position: relative;
         z-index: 2;
         text-align: center;
         transform: translateZ(40px);
         /* بروز المحتوى في الـ 3D */
         pointer-events: none;
         /* عشان ميأثرش على حركة الماوس */
     }

     .client-monogram {
         font-family: monospace;
         font-size: 4rem;
         font-weight: 800;
         color: rgba(255, 255, 255, 0.03);
         letter-spacing: 4px;
         margin-bottom: 20px;
         transition: color 0.5s ease, text-shadow 0.5s ease;
     }

     .client-card:hover .client-monogram {
         color: rgba(252, 163, 17, 0.15);
         text-shadow: 0 0 20px rgba(252, 163, 17, 0.3);
     }

     .client-name {
         color: #fff;
         font-size: 1.8rem;
         font-weight: 700;
         margin-bottom: 30px;
         letter-spacing: 1px;
         text-transform: uppercase;
     }

     .client-link-wrapper {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         color: var(--text-secondary);
         font-size: 1.1rem;
         font-weight: 500;
         opacity: 0.6;
         transform: translateY(15px);
         transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     }

     .client-card:hover .client-link-wrapper {
         opacity: 1;
         color: var(--primary-color);
         transform: translateY(0);
     }

     .link-arrow {
         width: 20px;
         height: 20px;
         transition: transform 0.4s ease;
     }

     .client-card:hover .link-arrow {
         transform: translateX(-10px);
         /* السهم بيتحرك للشمال في الـ RTL */
     }

     /* لمسة السايبر (حواف الأطراف) */
     .cyber-corner {
         position: absolute;
         width: 30px;
         height: 30px;
         border: 2px solid transparent;
         transition: border-color 0.4s ease;
         z-index: 1;
     }

     .cyber-corner.top-right {
         top: 20px;
         right: 20px;
         border-top-color: rgba(255, 255, 255, 0.1);
         border-right-color: rgba(255, 255, 255, 0.1);
     }

     .cyber-corner.bottom-left {
         bottom: 20px;
         left: 20px;
         border-bottom-color: rgba(255, 255, 255, 0.1);
         border-left-color: rgba(255, 255, 255, 0.1);
     }

     .client-card:hover .cyber-corner.top-right,
     .client-card:hover .cyber-corner.bottom-left {
         border-color: var(--primary-color);
         box-shadow: 0 0 15px rgba(252, 163, 17, 0.2);
     }

     /* تجاوب الموبايل للعملاء */
     @media (max-width: 768px) {
         .clients-grid {
             grid-template-columns: 1fr;
             gap: 20px;
         }

         .client-card {
             padding: 40px 20px;
         }
     }

     /* ======================================================== */
     /* --- Client Card Background Image Setup --- */
     /* ======================================================== */

     /* طبقة الصورة الثابتة المطلقة */
     .client-bg {
         position: absolute;
         inset: 0;
         /* تعادل top:0, left:0, right:0, bottom:0 */
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         z-index: 0;
         transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
     }

     /* فلتر زجاجي غامق (Overlay) يغطي الصورة عشان الكلام يظهر */
     .client-bg::after {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(to bottom,
                 rgba(20, 33, 61, 0.4) 0%,
                 /* شفافية خفيفة فوق */
                 rgba(5, 9, 20, 0.9) 100%
                 /* لون الكحلي العميق بتاعك تحت */
             );
         transition: background 0.4s ease;
     }

     /* تأثير زووم ناعم للصورة عند الـ Hover (بيدي إحساس بالفخامة) */
     .client-card:hover .client-bg {
         transform: scale(1.08);
         /* الصورة بتكبر شوية */
     }

     /* تفتيح الـ Overlay شوية وقت الـ Hover */
     .client-card:hover .client-bg::after {
         background: linear-gradient(to bottom,
                 rgba(20, 33, 61, 0.2) 0%,
                 rgba(5, 9, 20, 0.8) 100%);
     }

     /* ======================================================== */
     /* تأمين طبقات الـ Z-Index لباقي العناصر عشان تبان فوق الصورة */
     /* ======================================================== */
     .client-glow {
         z-index: 1 !important;
     }

     .client-content {
         z-index: 2 !important;
     }

     .cyber-corner {
         z-index: 2 !important;
     }