:root {
          --gold: #C9A227;
          --gold-light: #E8C547;
          --gold-dark: #A07B10;
          --dark: #1C1C1C;
          --dark2: #2A2A2A;
          --dark3: #383838;
          --silver: #B0B0B0;
          --silver-light: #D8D8D8;
          --white: #FFFFFF;
          --off-white: #F5F5F5;
          --text-light: #CCCCCC;
        }

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

        html {
          scroll-behavior: smooth;
          scroll-padding-top: 92px;
        }
        section[id] { scroll-margin-top: 92px; }

        body {
          font-family: 'Cairo', 'Tajawal', sans-serif;
          background: var(--dark);
          color: var(--white);
          direction: rtl;
          overflow-x: hidden;
        }
        html[dir="ltr"] body {
          direction: ltr;
        }
        html[dir="ltr"] .form-group input,
        html[dir="ltr"] .form-group textarea,
        html[dir="ltr"] .form-group select {
          direction: ltr;
          text-align: left;
        }

        /* SCROLLBAR */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--dark2); }
        ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

        /* ===== NAVBAR ===== */
        nav {
          position: fixed;
          top: 0; left: 0; right: 0;
          z-index: 1000;
          background: rgba(28,28,28,0.95);
          backdrop-filter: blur(12px);
          border-bottom: 1px solid rgba(201,162,39,0.25);
          transition: all 0.3s ease;
        }
        .scroll-progress {
          position: absolute;
          top: 0;
          right: 0;
          height: 2px;
          width: 0%;
          background: linear-gradient(90deg, var(--gold), var(--gold-light));
          box-shadow: 0 0 14px rgba(201,162,39,0.4);
          transition: width 0.16s linear;
        }
        nav.scrolled {
          background: rgba(28,28,28,0.99);
          box-shadow: 0 4px 30px rgba(0,0,0,0.5);
        }
        .nav-inner {
          max-width: 1300px;
          margin: 0 auto;
          padding: 0 2rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 72px;
          gap: 1.25rem;
        }
        .nav-logo {
          display: flex;
          align-items: center;
          gap: 14px;
          text-decoration: none;
        }
        .nav-logo img {
          height: 48px;
          object-fit: contain;
          filter: drop-shadow(0 0 8px rgba(201,162,39,0.4));
        }
        .nav-logo > img:not(.nav-logo-real) {
          display: none;
        }
        .nav-logo .nav-logo-real {
          height: 50px;
          width: auto;
        }
        .nav-logo-text {
          display: flex;
          flex-direction: column;
          gap: 2px;
          line-height: 1.1;
        }
        .nav-logo-text strong {
          color: var(--white);
          font-size: 0.95rem;
          font-weight: 800;
          letter-spacing: 0.08em;
        }
        .nav-logo-text small {
          color: var(--silver);
          font-size: 0.66rem;
          font-weight: 600;
          letter-spacing: 0.08em;
        }
        .nav-links {
          display: flex;
          list-style: none;
          gap: 0.2rem;
          align-items: center;
          margin-inline-start: auto;
        }
        .nav-links a {
          color: var(--silver-light);
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 600;
          padding: 0.5rem 0.9rem;
          border-radius: 6px;
          transition: all 0.25s;
          position: relative;
        }
        .nav-links a::after {
          content: '';
          position: absolute;
          bottom: 2px; left: 50%; right: 50%;
          height: 2px;
          background: var(--gold);
          transition: all 0.3s;
        }
        .nav-links a:hover { color: var(--gold); }
        .nav-links a:hover::after { left: 10%; right: 10%; }
        .nav-links a.is-active {
          color: var(--gold);
          background: rgba(201,162,39,0.08);
        }
        .nav-links a.is-active::after {
          left: 10%;
          right: 10%;
        }
        .nav-cta {
          background: var(--gold) !important;
          color: var(--dark) !important;
          font-weight: 700 !important;
          padding: 0.5rem 1.2rem !important;
          border-radius: 8px !important;
        }
        .nav-cta:hover { background: var(--gold-light) !important; transform: translateY(-1px); }
        .nav-cta::after { display: none !important; }
        .nav-side {
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }

        .hamburger {
          display: none;
          flex-direction: column;
          gap: 5px;
          cursor: pointer;
          background: none;
          border: none;
          padding: 4px;
        }
        .hamburger span {
          display: block;
          width: 26px;
          height: 2px;
          background: var(--gold);
          transition: all 0.3s;
          border-radius: 2px;
        }

        /* ===== HERO ===== */
        .hero {
          min-height: 100vh;
          position: relative;
          display: flex;
          align-items: center;
          overflow: hidden;
          background: #101010;
        }
        .hero-media {
          position: absolute;
          inset: 0;
          z-index: 0;
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          opacity: 0.8;
          filter: brightness(0.8) contrast(1.08) saturate(1);
          transform: scale(1.01);
          pointer-events: none;
        }
        .hero-canvas {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: min(58vw, 780px);
          height: 100%;
          z-index: 1;
          pointer-events: none;
          opacity: 0;
          transition: opacity 1.2s ease;
          mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 70%, transparent 100%);
          -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.92) 70%, transparent 100%);
        }
        .hero-bg {
          position: absolute;
          inset: 0;
          z-index: 1;
          background:
            radial-gradient(circle at 15% 20%, rgba(201,162,39,0.1), transparent 28%),
            radial-gradient(circle at 82% 18%, rgba(255,255,255,0.04), transparent 24%),
            linear-gradient(135deg, rgba(12,12,12,0.42) 0%, rgba(24,24,24,0.3) 42%, rgba(47,36,16,0.44) 100%);
        }
        .hero-overlay {
          position: absolute;
          inset: 0;
          background:
            radial-gradient(circle at 18% 42%, rgba(201,162,39,0.06), transparent 32%),
            linear-gradient(90deg,
            rgba(10,10,10,0.2) 0%,
            rgba(18,18,18,0.42) 42%,
            rgba(12,12,12,0.78) 100%);
        }
        .hero-diagonal {
          position: absolute;
          bottom: 0; left: 0;
          width: 100%;
          height: 120px;
          background: var(--dark);
          clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
        }
        .layer-2 { z-index: 2; }
        .hero-content {
          position: relative;
          z-index: 3;
          max-width: 1300px;
          margin: 0 auto;
          padding: 7.5rem 2rem 5rem;
          width: 100%;
        }
        .hero-inner {
          display: grid;
          grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
          gap: 2rem;
          align-items: end;
        }
        .hero-copy {
          max-width: 700px;
          position: relative;
          z-index: 3;
        }
        .hero-aside {
          display: grid;
          gap: 1rem;
          justify-self: stretch;
          position: relative;
          z-index: 3;
        }
        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(201,162,39,0.15);
          border: 1px solid rgba(201,162,39,0.4);
          color: var(--gold-light);
          padding: 0.4rem 1rem;
          border-radius: 50px;
          font-size: 0.8rem;
          font-weight: 600;
          margin-bottom: 1.5rem;
          letter-spacing: 0.05em;
          animation: fadeInDown 0.8s ease;
        }
        .hero-badge svg { width: 14px; height: 14px; fill: var(--gold-light); }
        .hero h1 {
          font-size: clamp(2.4rem, 6vw, 5rem);
          font-weight: 900;
          line-height: 1.18;
          margin-bottom: 0.8rem;
          animation: fadeInUp 0.9s ease 0.1s both;
        }
        .hero h1 .highlight {
          color: var(--gold);
          display: block;
          line-height: 1.06;
          margin-bottom: 0.28em;
        }
        .hero h1 .kml-abbr {
          color: var(--silver-light);
          font-size: 0.55em;
          font-weight: 600;
          display: block;
          letter-spacing: 0.12em;
          line-height: 1.28;
          margin-top: 0.15rem;
        }
        .hero-desc {
          color: var(--text-light);
          font-size: 1.05rem;
          line-height: 1.8;
          max-width: 580px;
          margin-bottom: 2.5rem;
          font-weight: 400;
          animation: fadeInUp 0.9s ease 0.25s both;
        }
        .hero-buttons {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
          animation: fadeInUp 0.9s ease 0.35s both;
        }
        .btn-primary {
          background: linear-gradient(135deg, var(--gold), var(--gold-dark));
          color: var(--dark);
          padding: 0.85rem 2rem;
          border-radius: 8px;
          font-size: 0.95rem;
          font-weight: 700;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: all 0.3s;
          box-shadow: 0 4px 20px rgba(201,162,39,0.3);
          border: 2px solid transparent;
        }
        .btn-primary:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 30px rgba(201,162,39,0.5);
          background: linear-gradient(135deg, var(--gold-light), var(--gold));
        }
        .btn-outline {
          border: 2px solid var(--gold);
          color: var(--gold);
          padding: 0.85rem 2rem;
          border-radius: 8px;
          font-size: 0.95rem;
          font-weight: 700;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: all 0.3s;
        }
        .btn-outline:hover {
          background: rgba(201,162,39,0.12);
          transform: translateY(-3px);
          color: var(--gold-light);
        }
        .hero-stats {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 1rem;
          margin-top: 0;
          animation: fadeInUp 0.9s ease 0.5s both;
        }
        .hero-card {
          background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 22px;
          padding: 1.25rem;
          backdrop-filter: blur(14px);
          box-shadow: 0 24px 60px rgba(0,0,0,0.28);
        }
        .hero-card-title {
          color: var(--silver-light);
          font-size: 0.78rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          margin-bottom: 1rem;
        }
        .stat {
          text-align: center;
          padding: 1rem 0.85rem;
          border-radius: 16px;
          background: rgba(0,0,0,0.18);
          border: 1px solid rgba(255,255,255,0.06);
        }
        .stat-num {
          font-size: 2.2rem;
          font-weight: 900;
          color: var(--gold);
          line-height: 1;
        }
        .stat-label {
          font-size: 0.78rem;
          color: var(--silver);
          margin-top: 4px;
          font-weight: 500;
        }

        /* ===== SECTION COMMON ===== */
        section { padding: 90px 0; }
        .container {
          max-width: 1300px;
          margin: 0 auto;
          padding: 0 2rem;
        }
        .section-header {
          text-align: center;
          margin-bottom: 4rem;
        }
        .section-tag {
          display: inline-block;
          color: var(--gold);
          font-size: 0.78rem;
          font-weight: 700;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          margin-bottom: 0.8rem;
          position: relative;
          padding: 0 1.5rem;
        }
        .section-tag::before, .section-tag::after {
          content: '';
          position: absolute;
          top: 50%;
          width: 30px;
          height: 1px;
          background: var(--gold);
          opacity: 0.6;
        }
        .section-tag::before { right: 100%; margin-right: -1rem; }
        .section-tag::after { left: 100%; margin-left: -1rem; }
        .section-title {
          font-size: clamp(1.8rem, 4vw, 2.8rem);
          font-weight: 800;
          margin-bottom: 1rem;
          line-height: 1.2;
        }
        .section-title span { color: var(--gold); }
        .section-subtitle {
          color: var(--text-light);
          font-size: 1rem;
          line-height: 1.8;
          max-width: 600px;
          margin: 0 auto;
        }
        .section-subtitle-spaced { margin-top: 1rem; }
        .clients-text-spaced { margin-top: 1.2rem; }
        .divider {
          width: 60px;
          height: 3px;
          background: linear-gradient(90deg, var(--gold), transparent);
          margin: 1rem auto 0;
          border-radius: 2px;
        }

        /* ===== ABOUT ===== */
        #about { background: var(--dark2); }
        .about-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: center;
        }
        .about-image-wrap {
          position: relative;
          min-height: 520px;
        }
        .about-image-wrap::before {
          content: '';
          position: absolute;
          inset: -10px;
          border: 2px solid var(--gold);
          border-radius: 20px;
          opacity: 0.3;
          pointer-events: none;
        }
        .about-visual {
          position: relative;
          min-height: 520px;
          border-radius: 28px;
          overflow: hidden;
          background:
            radial-gradient(circle at 24% 24%, rgba(201,162,39,0.18), transparent 24%),
            radial-gradient(circle at 78% 32%, rgba(255,255,255,0.08), transparent 22%),
            linear-gradient(145deg, #1e1e1e 0%, #262626 48%, #181818 100%);
          border: 1px solid rgba(201,162,39,0.16);
          box-shadow: 0 24px 70px rgba(0,0,0,0.45);
          perspective: 1400px;
        }
        .about-visual::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 28%, transparent 72%, rgba(0,0,0,0.28));
          pointer-events: none;
        }
        .about-visual-grid {
          display: none;
          position: absolute;
          inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
          background-size: 42px 42px;
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.95));
        }
        .about-stage {
          display: none;
          position: absolute;
          inset: 14% 10% 12%;
          transform-style: preserve-3d;
        }
        .about-visual-canvas {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          display: block;
          cursor: grab;
          touch-action: none;
        }
        .about-visual-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
          padding: 1.25rem;
        }
        .about-visual-note {
          background: rgba(15,15,15,0.7);
          border: 1px solid rgba(201,162,39,0.18);
          backdrop-filter: blur(10px);
          border-radius: 16px;
          box-shadow: 0 14px 34px rgba(0,0,0,0.24);
        }
        .about-visual-note {
          max-width: 270px;
          padding: 0.95rem 1.05rem;
          text-align: right;
        }
        .about-visual-note strong {
          display: block;
          color: var(--gold);
          font-size: 0.82rem;
          margin-bottom: 0.35rem;
        }
        .about-visual-note p {
          color: var(--silver-light);
          font-size: 0.8rem;
          line-height: 1.7;
        }
        .about-glow {
          position: absolute;
          inset: 18% 20% 18% 12%;
          background: radial-gradient(circle, rgba(201,162,39,0.18), transparent 62%);
          filter: blur(24px);
        }
        .about-orbit {
          position: absolute;
          border-radius: 50%;
          border: 1px solid rgba(201,162,39,0.16);
          transform-style: preserve-3d;
        }
        .about-orbit.one {
          width: 280px;
          height: 280px;
          top: 6%;
          left: 6%;
          transform: rotateX(72deg) rotateZ(14deg);
        }
        .about-orbit.two {
          width: 360px;
          height: 360px;
          bottom: -2%;
          right: -2%;
          transform: rotateX(76deg) rotateZ(-18deg);
          border-color: rgba(255,255,255,0.08);
        }
        .about-line {
          position: absolute;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(201,162,39,0.45), transparent);
          transform-origin: center;
        }
        .about-line.one {
          width: 220px;
          top: 30%;
          right: 4%;
          transform: rotate(-18deg);
        }
        .about-line.two {
          width: 180px;
          bottom: 22%;
          left: 8%;
          transform: rotate(14deg);
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
        }
        .about-gear-main,
        .about-gear-secondary {
          position: absolute;
          border-radius: 50%;
          transform-style: preserve-3d;
          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 18px 40px rgba(0,0,0,0.38);
        }
        .about-gear-main {
          width: 220px;
          height: 220px;
          top: 18%;
          left: 18%;
          background:
            radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 20%),
            radial-gradient(circle at center, #c9a227 0 24%, #1e1e1e 25% 43%, #8a6b10 44% 64%, #111 65% 100%);
          transform: rotateX(66deg) rotateZ(18deg);
        }
        .about-gear-main::before,
        .about-gear-secondary::before {
          content: '';
          position: absolute;
          inset: -18px;
          border-radius: 50%;
          background: conic-gradient(from 0deg,
            #8a6b10 0deg 12deg, transparent 12deg 24deg,
            #8a6b10 24deg 36deg, transparent 36deg 48deg,
            #8a6b10 48deg 60deg, transparent 60deg 72deg,
            #8a6b10 72deg 84deg, transparent 84deg 96deg,
            #8a6b10 96deg 108deg, transparent 108deg 120deg,
            #8a6b10 120deg 132deg, transparent 132deg 144deg,
            #8a6b10 144deg 156deg, transparent 156deg 168deg,
            #8a6b10 168deg 180deg, transparent 180deg 192deg,
            #8a6b10 192deg 204deg, transparent 204deg 216deg,
            #8a6b10 216deg 228deg, transparent 228deg 240deg,
            #8a6b10 240deg 252deg, transparent 252deg 264deg,
            #8a6b10 264deg 276deg, transparent 276deg 288deg,
            #8a6b10 288deg 300deg, transparent 300deg 312deg,
            #8a6b10 312deg 324deg, transparent 324deg 336deg,
            #8a6b10 336deg 348deg, transparent 348deg 360deg);
          mask: radial-gradient(circle, transparent 0 66%, #000 67%);
        }
        .about-gear-main::after,
        .about-gear-secondary::after {
          content: '';
          position: absolute;
          inset: 37%;
          border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), #141414 72%);
          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
        }
        .about-gear-secondary {
          width: 128px;
          height: 128px;
          top: 56%;
          left: 56%;
          background:
            radial-gradient(circle at center, #b6b6b6 0 22%, #232323 23% 42%, #8e8e8e 43% 64%, #131313 65% 100%);
          transform: rotateX(68deg) rotateZ(-14deg);
        }
        .about-gear-secondary::before {
          inset: -12px;
          background: conic-gradient(from 0deg,
            #9c9c9c 0deg 14deg, transparent 14deg 28deg,
            #9c9c9c 28deg 42deg, transparent 42deg 56deg,
            #9c9c9c 56deg 70deg, transparent 70deg 84deg,
            #9c9c9c 84deg 98deg, transparent 98deg 112deg,
            #9c9c9c 112deg 126deg, transparent 126deg 140deg,
            #9c9c9c 140deg 154deg, transparent 154deg 168deg,
            #9c9c9c 168deg 182deg, transparent 182deg 196deg,
            #9c9c9c 196deg 210deg, transparent 210deg 224deg,
            #9c9c9c 224deg 238deg, transparent 238deg 252deg,
            #9c9c9c 252deg 266deg, transparent 266deg 280deg,
            #9c9c9c 280deg 294deg, transparent 294deg 308deg,
            #9c9c9c 308deg 322deg, transparent 322deg 336deg,
            #9c9c9c 336deg 350deg, transparent 350deg 360deg);
        }
        .about-gear-tertiary {
          position: absolute;
          width: 88px;
          height: 88px;
          top: 16%;
          right: 16%;
          border-radius: 50%;
          background:
            radial-gradient(circle at center, #d5d5d5 0 20%, #212121 21% 40%, #8f8f8f 41% 63%, #141414 64% 100%);
          transform: rotateX(68deg) rotateZ(8deg);
          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 14px 30px rgba(0,0,0,0.28);
        }
        .about-gear-tertiary::before {
          content: '';
          position: absolute;
          inset: -10px;
          border-radius: 50%;
          background: conic-gradient(from 0deg,
            #8d8d8d 0deg 16deg, transparent 16deg 32deg,
            #8d8d8d 32deg 48deg, transparent 48deg 64deg,
            #8d8d8d 64deg 80deg, transparent 80deg 96deg,
            #8d8d8d 96deg 112deg, transparent 112deg 128deg,
            #8d8d8d 128deg 144deg, transparent 144deg 160deg,
            #8d8d8d 160deg 176deg, transparent 176deg 192deg,
            #8d8d8d 192deg 208deg, transparent 208deg 224deg,
            #8d8d8d 224deg 240deg, transparent 240deg 256deg,
            #8d8d8d 256deg 272deg, transparent 272deg 288deg,
            #8d8d8d 288deg 304deg, transparent 304deg 320deg,
            #8d8d8d 320deg 336deg, transparent 336deg 352deg,
            #8d8d8d 352deg 360deg);
          mask: radial-gradient(circle, transparent 0 64%, #000 65%);
        }
        .about-gear-tertiary::after {
          content: '';
          position: absolute;
          inset: 35%;
          border-radius: 50%;
          background: #171717;
        }
        .about-text h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1.2rem; }
        .about-text h2 span { color: var(--gold); }
        .about-text p { color: var(--text-light); line-height: 1.9; margin-bottom: 1.2rem; font-size: 0.97rem; }
        .about-features {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
          margin-top: 1.5rem;
        }
        .company-meta { margin-top: 1.5rem; }
        .company-meta p {
          font-size: 0.8rem;
          color: var(--silver);
        }
        .company-meta strong { color: var(--gold); }
        .feat-item {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          background: rgba(201,162,39,0.06);
          border: 1px solid rgba(201,162,39,0.15);
          border-radius: 10px;
          padding: 0.9rem;
        }
        .feat-icon {
          color: var(--gold);
          font-size: 1.2rem;
          flex-shrink: 0;
          margin-top: 2px;
        }
        .feat-text { font-size: 0.85rem; color: var(--text-light); font-weight: 500; line-height: 1.5; }

        /* ===== SERVICES ===== */
        #services { background: var(--dark); }
        .services-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 1.5rem;
        }
        .service-card {
          background: var(--dark2);
          border: 1px solid rgba(201,162,39,0.12);
          border-radius: 16px;
          padding: 2rem;
          transition: all 0.35s ease;
          position: relative;
          overflow: hidden;
        }
        .service-card::before {
          content: '';
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 3px;
          background: linear-gradient(90deg, var(--gold), var(--gold-dark));
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.35s;
        }
        .service-card:hover {
          transform: translateY(-6px);
          border-color: rgba(201,162,39,0.35);
          box-shadow: 0 16px 40px rgba(0,0,0,0.4);
        }
        .service-card:hover::before { transform: scaleX(1); transform-origin: left; }
        .service-icon {
          width: 56px;
          height: 56px;
          background: linear-gradient(135deg, rgba(201,162,39,0.2), rgba(201,162,39,0.05));
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 1.2rem;
          font-size: 1.6rem;
          border: 1px solid rgba(201,162,39,0.2);
        }
        .service-title {
          font-size: 1.1rem;
          font-weight: 700;
          margin-bottom: 0.7rem;
          color: var(--white);
        }
        .service-desc {
          font-size: 0.875rem;
          color: var(--text-light);
          line-height: 1.75;
        }
        .service-list {
          list-style: none;
          margin-top: 0.8rem;
        }
        .service-list li {
          font-size: 0.82rem;
          color: var(--silver);
          padding: 0.3rem 0;
          padding-right: 1rem;
          position: relative;
          line-height: 1.5;
        }
        .service-list li::before {
          content: '◆';
          position: absolute;
          right: 0;
          color: var(--gold);
          font-size: 0.5rem;
          top: 0.45rem;
        }

        /* ===== MACHINERY ===== */
        #machinery { background: var(--dark2); }
        .machinery-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: 1.2rem;
        }
        .machine-card {
          background: var(--dark3);
          border-radius: 12px;
          padding: 1.5rem;
          border: 1px solid rgba(176,176,176,0.1);
          transition: all 0.3s;
        }
        .machine-card:hover {
          border-color: rgba(201,162,39,0.3);
          transform: translateY(-4px);
        }
        .machine-section-title {
          color: var(--gold);
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          margin-bottom: 0.8rem;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .machine-section-title::after {
          content: '';
          flex: 1;
          height: 1px;
          background: rgba(201,162,39,0.25);
        }
        .machine-card h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
        .machine-card p { font-size: 0.82rem; color: var(--text-light); line-height: 1.6; }

        /* ===== MISSION VISION ===== */
        #mv { background: var(--dark); }
        .mv-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
        }
        .mv-card {
          border-radius: 20px;
          padding: 3rem 2.5rem;
          position: relative;
          overflow: hidden;
        }
        .mv-card.mission {
          background: linear-gradient(135deg, var(--dark2), var(--dark3));
          border: 1px solid rgba(201,162,39,0.2);
        }
        .mv-card.vision {
          background: linear-gradient(135deg, var(--gold-dark), #7A5C08);
          border: 1px solid rgba(201,162,39,0.5);
        }
        .mv-card::after {
          content: '';
          position: absolute;
          bottom: -30px;
          left: -30px;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background: rgba(255,255,255,0.04);
          pointer-events: none;
        }
        .mv-label {
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          opacity: 0.7;
          margin-bottom: 0.8rem;
        }
        .mv-card h3 {
          font-size: 1.6rem;
          font-weight: 800;
          margin-bottom: 1.2rem;
        }
        .mv-card.mission h3 { color: var(--gold); }
        .mv-card.vision h3 { color: var(--dark); }
        .mv-card p {
          line-height: 2;
          font-size: 0.98rem;
          text-wrap: pretty;
        }
        .mv-card.vision p { color: rgba(28,28,28,0.85); }
        .vision2030 {
          background: rgba(28,28,28,0.9);
          border-radius: 12px;
          padding: 2rem;
          margin-top: 2rem;
          border: 1px solid rgba(201,162,39,0.2);
        }
        .vision2030-offset { margin-top: 1.2rem; }
        .vision-label-dark { color: rgba(28,28,28,0.6); }
        .vision-title-dark { color: var(--dark); }
        .vision-copy-dark { color: rgba(28,28,28,0.8); }
        .vision2030 h4 {
          color: var(--gold);
          font-size: 1.1rem;
          font-weight: 700;
          margin-bottom: 1rem;
        }
        .vision2030 ul {
          list-style: none;
        }
        .vision2030 li {
          color: var(--text-light);
          font-size: 0.88rem;
          padding: 0.5rem 0;
          padding-right: 1.2rem;
          position: relative;
          line-height: 1.6;
          border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .vision2030 li:last-child { border-bottom: none; }
        .vision2030 li::before { content: '✦'; position: absolute; right: 0; color: var(--gold); font-size: 0.6rem; top: 0.65rem; }

        /* ===== CLIENTS ===== */
        #clients { background: var(--dark2); }
        .clients-text {
          text-align: center;
          color: var(--text-light);
          margin-bottom: 3rem;
          font-size: 0.97rem;
        }
        .clients-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
          gap: 1.4rem;
        }
        .client-logo {
          background: var(--white);
          border-radius: 16px;
          padding: 1.8rem 1.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid rgba(255,255,255,0.1);
          transition: all 0.3s;
          min-height: 156px;
          text-align: center;
          box-shadow: 0 18px 40px rgba(0,0,0,0.16);
        }
        .client-logo:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 30px rgba(0,0,0,0.4);
          border-color: var(--gold);
        }
        .client-logo img {
          max-width: 100%;
          width: auto;
          height: 76px;
          object-fit: contain;
          filter: saturate(1.02);
        }

        /* ===== ACHIEVEMENTS ===== */
        #achievements { background: var(--dark); }
        .achievements-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 1.5rem;
        }
        .ach-card {
          background: var(--dark2);
          border: 1px solid rgba(201,162,39,0.15);
          border-radius: 16px;
          padding: 2rem;
          text-align: center;
          transition: all 0.3s;
        }
        .ach-card:hover { border-color: var(--gold); transform: translateY(-5px); }
        .ach-icon {
          font-size: 2.5rem;
          margin-bottom: 1rem;
        }
        .ach-card h4 { color: var(--gold); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
        .ach-card p { font-size: 0.85rem; color: var(--text-light); line-height: 1.7; }

        /* ===== CONTACT ===== */
        #contact {
          background: var(--dark2);
          position: relative;
          overflow: hidden;
        }
        #contact::before {
          content: '';
          position: absolute;
          top: -100px; right: -100px;
          width: 400px;
          height: 400px;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(201,162,39,0.08) 0%, transparent 70%);
          pointer-events: none;
        }
        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: start;
        }
        .contact-info h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
        .contact-info h2 span { color: var(--gold); }
        .contact-info p { color: var(--text-light); line-height: 1.8; margin-bottom: 2rem; font-size: 0.95rem; }
        .contact-items { display: flex; flex-direction: column; gap: 1.2rem; }
        .contact-item {
          display: flex;
          align-items: flex-start;
          gap: 1rem;
          background: rgba(201,162,39,0.05);
          border: 1px solid rgba(201,162,39,0.12);
          border-radius: 12px;
          padding: 1.1rem 1.3rem;
          transition: all 0.3s;
        }
        .contact-item:hover {
          border-color: rgba(201,162,39,0.3);
          background: rgba(201,162,39,0.1);
        }
        .contact-item-icon {
          font-size: 1.4rem;
          flex-shrink: 0;
          color: var(--gold);
        }
        .contact-item-content { flex: 1; }
        .contact-item-label { font-size: 0.72rem; color: var(--silver); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
        .contact-item-value { font-size: 0.95rem; font-weight: 600; color: var(--white); }
        .contact-item-value a { color: var(--white); text-decoration: none; transition: color 0.2s; }
        .contact-item-value a:hover { color: var(--gold); }

        /* CONTACT FORM */
        .contact-form { background: var(--dark3); border-radius: 20px; padding: 2.5rem; border: 1px solid rgba(201,162,39,0.12); }
        .contact-form h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--gold); }
        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--silver-light); margin-bottom: 0.5rem; }
        .form-group input, .form-group textarea, .form-group select {
          width: 100%;
          background: var(--dark2);
          border: 1px solid rgba(201,162,39,0.2);
          border-radius: 8px;
          padding: 0.75rem 1rem;
          color: var(--white);
          font-size: 0.9rem;
          font-family: 'Cairo', sans-serif;
          transition: border-color 0.3s;
          outline: none;
          direction: rtl;
        }
        .form-group input:focus, .form-group textarea:focus {
          border-color: var(--gold);
          background: rgba(201,162,39,0.04);
        }
        .form-group textarea { height: 120px; resize: vertical; }
        .input-ltr-right {
          direction: ltr !important;
          text-align: right !important;
        }
        .input-ltr-left {
          direction: ltr !important;
          text-align: left !important;
        }
        .form-validation-summary {
          color: #ffb4a8;
          background: rgba(180,45,32,0.16);
          border: 1px solid rgba(255,180,168,0.26);
          border-radius: 10px;
          padding: 0.85rem 1rem;
          margin-bottom: 1rem;
          font-size: 0.86rem;
          line-height: 1.7;
        }
        .validation-summary-valid {
          display: none;
        }
        .field-validation-error {
          display: block;
          color: #ffb4a8;
          font-size: 0.76rem;
          margin-top: 0.4rem;
        }
        .contact-success {
          color: #bff0cd;
          background: rgba(39,174,96,0.14);
          border: 1px solid rgba(191,240,205,0.25);
          border-radius: 10px;
          padding: 0.85rem 1rem;
          margin-bottom: 1rem;
          font-size: 0.86rem;
          line-height: 1.7;
        }
        .turnstile-wrap {
          display: flex;
          justify-content: flex-start;
          margin: 0.35rem 0 1.1rem;
        }
        .form-submit {
          width: 100%;
          background: linear-gradient(135deg, var(--gold), var(--gold-dark));
          color: var(--dark);
          border: none;
          border-radius: 8px;
          padding: 0.9rem;
          font-size: 1rem;
          font-weight: 700;
          font-family: 'Cairo', sans-serif;
          cursor: pointer;
          transition: all 0.3s;
          margin-top: 0.5rem;
        }
        .form-submit:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(201,162,39,0.4);
        }

        /* ===== FOOTER ===== */
        footer {
          background: #111111;
          border-top: 1px solid rgba(201,162,39,0.2);
          padding: 2.5rem 0 1.5rem;
        }
        .footer-inner {
          max-width: 1300px;
          margin: 0 auto;
          padding: 0 2rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2rem;
        }
        .footer-logo > img:not(.footer-logo-real) {
          display: none;
        }
        .footer-brand {
          display: grid;
          justify-items: center;
          gap: 1rem;
        }
        .footer-logo img {
          height: 76px;
          width: auto;
          filter: drop-shadow(0 0 14px rgba(201,162,39,0.24));
        }
        .footer-cert-row {
          display: grid;
          grid-template-columns: minmax(0, 1.15fr) auto;
          align-items: center;
          gap: 2rem;
          width: 100%;
          max-width: 760px;
          padding: 1.4rem 1.6rem;
          background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
          border: 1px solid rgba(201,162,39,0.14);
          border-radius: 24px;
          box-shadow: 0 24px 60px rgba(0,0,0,0.22);
        }
        .footer-cert-logos {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          gap: 1rem;
          min-width: 0;
        }
        .footer-vision-badge {
          width: min(220px, 100%);
          height: auto;
          max-height: 118px;
          object-fit: contain;
          display: block;
          background: rgba(255,255,255,0.95);
          border-radius: 14px;
          padding: 0.6rem 0.85rem;
          border: 1px solid rgba(201,162,39,0.22);
          box-shadow: 0 16px 34px rgba(0,0,0,0.22);
        }
        .footer-iso-badge {
          width: 150px;
          height: auto;
          display: block;
          box-shadow: 0 16px 34px rgba(0,0,0,0.25);
        }
        .footer-registry {
          display: grid;
          gap: 0.8rem;
          text-align: right;
        }
        .footer-registry p {
          color: var(--silver-light);
          font-size: 0.95rem;
          line-height: 1.5;
        }
        .footer-registry span {
          color: var(--gold);
          font-weight: 800;
        }
        .footer-brand-note {
          color: var(--silver);
          font-size: 0.78rem;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }
        .footer-tagline {
          color: var(--text-light);
          font-size: 0.96rem;
          text-align: center;
          max-width: 760px;
          line-height: 1.9;
        }
        .footer-bottom {
          display: flex;
          align-items: center;
          gap: 1rem;
          flex-wrap: wrap;
          justify-content: center;
          padding-top: 1.2rem;
          border-top: 1px solid rgba(255,255,255,0.06);
          width: 100%;
        }
        .footer-bottom p { color: var(--silver); font-size: 0.78rem; }
        .footer-bottom span { color: var(--gold); }
        .footer-separator { color: rgba(255,255,255,0.3); }
        .delay-1 { transition-delay: 0.06s; }
        .delay-2 { transition-delay: 0.08s; }
        .delay-3 { transition-delay: 0.1s; }
        .delay-4 { transition-delay: 0.12s; }
        .delay-5 { transition-delay: 0.16s; }
        .delay-6 { transition-delay: 0.18s; }
        .delay-7 { transition-delay: 0.2s; }
        .delay-8 { transition-delay: 0.24s; }
        .delay-9 { transition-delay: 0.3s; }
        .delay-10 { transition-delay: 0.32s; }
        .delay-11 { transition-delay: 0.36s; }
        .delay-12 { transition-delay: 0.4s; }
        .delay-13 { transition-delay: 0.42s; }
        .delay-14 { transition-delay: 0.48s; }
        .delay-15 { transition-delay: 0.56s; }

        /* ===== ANIMATIONS ===== */
        keyframes fadeInDown {
          from { opacity: 0; transform: translateY(-20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        keyframes fadeInUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .reveal {
          opacity: 0;
          transform: translateY(40px);
          transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal.visible {
          opacity: 1;
          transform: translateY(0);
        }
        .reveal-left {
          opacity: 0;
          transform: translateX(40px);
          transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal-left.visible {
          opacity: 1;
          transform: translateX(0);
        }
        .reveal-right {
          opacity: 0;
          transform: translateX(-40px);
          transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .reveal-right.visible {
          opacity: 1;
          transform: translateX(0);
        }

        /* ===== BACK TO TOP ===== */
        #backToTop {
          position: fixed;
          bottom: 2rem;
          left: 2rem;
          width: 46px;
          height: 46px;
          background: var(--gold);
          color: var(--dark);
          border: none;
          border-radius: 50%;
          font-size: 1.2rem;
          cursor: pointer;
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s;
          box-shadow: 0 4px 15px rgba(201,162,39,0.4);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 999;
        }
        #backToTop.show { opacity: 1; pointer-events: auto; }
        #backToTop:hover { transform: translateY(-3px); background: var(--gold-light); }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 900px) {
          .about-grid, .mv-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
          .about-image-wrap {
            min-height: 420px;
            order: 2;
          }
          .about-visual,
          .about-stage { min-height: 420px; }
          .hero-canvas {
            width: 100%;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.66) 55%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.66) 55%, transparent 100%);
          }
          .hero { align-items: flex-start; }
          .hero-media { object-position: 42% center; }
          .hero-content { padding: 6.25rem 1.5rem 4rem; }
          .hero-inner {
            grid-template-columns: 1fr;
            gap: 1.4rem;
            align-items: start;
          }
          .hero-copy { max-width: none; }
          .hero-aside {
            max-width: 560px;
            width: 100%;
          }
          .hero-stats { gap: 0.9rem; }
          .nav-links { display: none; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: rgba(28,28,28,0.98); padding: 1rem 2rem 2rem; border-bottom: 1px solid rgba(201,162,39,0.2); gap: 0.2rem; box-shadow: 0 18px 45px rgba(0,0,0,0.32); }
          .nav-links.open { display: flex; }
          .hamburger { display: flex; }
          .nav-logo-text small { display: none; }
        }
        @media (max-width: 600px) {
          .about-features { grid-template-columns: 1fr; }
          .about-image-wrap { min-height: 360px; }
          .about-visual,
          .about-stage { min-height: 360px; }
          .about-visual-overlay {
            padding: 0.9rem;
          }
          .about-visual-note {
            max-width: none;
          }
          .about-gear-main {
            width: 176px;
            height: 176px;
            top: 22%;
            left: 16%;
          }
          .about-gear-secondary {
            width: 102px;
            height: 102px;
            top: 58%;
            left: 56%;
          }
          .about-gear-tertiary {
            width: 72px;
            height: 72px;
            top: 18%;
            right: 12%;
          }
          .mv-card {
            padding: 2.15rem 1.4rem 2rem;
          }
          .mv-label {
            font-size: 0.72rem;
            letter-spacing: 0.08em;
          }
          .mv-card h3 {
            font-size: 1.9rem;
            margin-bottom: 0.95rem;
          }
          .mv-card p {
            font-size: 0.9rem;
            line-height: 2.05;
          }
          .vision2030 {
            padding: 1.35rem;
            margin-top: 1.4rem;
          }
          .vision2030 h4 {
            font-size: 1rem;
          }
          .vision2030 li {
            font-size: 0.84rem;
            line-height: 1.8;
          }
          .hero h1 {
            line-height: 1.12;
            margin-bottom: 0.95rem;
          }
          .hero h1 .highlight {
            font-size: 0.92em;
            margin-bottom: 0.34em;
          }
          .hero h1 .kml-abbr {
            font-size: 0.48em;
            line-height: 1.35;
            letter-spacing: 0.08em;
          }
          .contact-grid {
            gap: 1.35rem;
          }
          .contact-form {
            padding: 1.4rem 1rem 1.1rem;
            border-radius: 16px;
          }
          .contact-form h3 {
            margin-bottom: 1rem;
            text-align: center;
            font-size: 1.15rem;
          }
          .form-group {
            margin-bottom: 0.95rem;
          }
          .form-group label {
            font-size: 0.8rem;
            margin-bottom: 0.4rem;
          }
          .form-group input,
          .form-group textarea,
          .form-group select {
            padding: 0.72rem 0.85rem;
            font-size: 0.88rem;
          }
          .form-group textarea {
            height: 110px;
          }
          .form-submit {
            padding: 0.82rem;
            font-size: 0.95rem;
          }
          .hero h1 {
            font-size: 1.88rem;
            line-height: 1.14;
          }
          .hero h1 .highlight {
            font-size: 0.9em;
            margin-bottom: 0.38em;
          }
          .hero h1 .kml-abbr {
            font-size: 0.44em;
            line-height: 1.38;
          }
          .hero-canvas { opacity: 0.3 !important; }
          .hero-media {
            object-position: 100% center;
            transform: scale(1);
          }
          .hero-content { padding: 5.75rem 1rem 3.25rem; }
          .hero-inner { gap: 1.2rem; }
          .hero-buttons a { width: 100%; justify-content: center; }
          .hero-stats { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
          .hero-card {
            padding: 1rem;
            border-radius: 14px;
          }
          .stat { padding: 0.9rem 0.65rem; }
          .stat-num { font-size: 1.7rem; }
          .hero-desc { font-size: 0.96rem; }
          .nav-inner { padding: 0 1rem; }
          .nav-logo .nav-logo-real { height: 42px; }
          .nav-logo-text { display: none; }
          .footer-brand { gap: 0.85rem; }
          .footer-logo img { height: 64px; }
          .footer-inner {
            padding: 0 1rem;
          }
          .footer-vision-badge {
            width: min(190px, 100%);
            max-height: 96px;
          }
          .footer-cert-row {
            grid-template-columns: 1fr;
            justify-items: center;
            text-align: center;
            width: 100%;
            max-width: 100%;
            padding: 1rem;
            gap: 1.1rem;
            border-radius: 16px;
          }
          .footer-cert-logos {
            width: 100%;
            flex-direction: column;
            gap: 0.9rem;
          }
          .footer-registry { text-align: center; }
          .footer-iso-badge { width: 132px; }
        }