/* ═══════════════════════════════════════════════
       VARIABLES
    ═══════════════════════════════════════════════ */
        :root {
          --bg: #070711;
          --bg2: #0d0d1a;
          --card: rgba(255, 255, 255, .04);
          --card-b: rgba(255, 255, 255, .07);
          --primary: #6366f1;
          --violet: #8b5cf6;
          --cyan: #06b6d4;
          --green: #10b981;
          --red: #f43f5e;
          --text: #f1f5f9;
          --muted: #94a3b8;
          --border: rgba(255, 255, 255, .07);
          --font-ar: 'Cairo', sans-serif;
          --font-en: 'Poppins', sans-serif;
          --radius: 20px;
          /* theme-variant helpers */
          --nav-bg: rgba(7, 7, 17, .88);
          --mob-bg: rgba(5, 5, 16, .97);
          --float-card: rgba(10, 10, 22, .93);
          --modal-bg: rgba(7, 7, 20, .97);
          --surface: rgba(255, 255, 255, .03);
          --surface-b: rgba(255, 255, 255, .04);
          --dot-line: rgba(255, 255, 255, .012);
          --track-bg: rgba(255, 255, 255, .06);
          --ghost-num: rgba(255, 255, 255, .025);
          --chip-bg: rgba(255, 255, 255, .04);
          --input-bg: rgba(255, 255, 255, .04);
          --form-bg: rgba(255, 255, 255, .025);
        }

        /* ═══════════════════════════════════════════════
       LIGHT THEME
    ═══════════════════════════════════════════════ */
        html[data-theme="light"] {
          --bg: #f0f4f8;
          --bg2: #e8edf4;
          --card: rgba(0, 0, 0, .04);
          --card-b: rgba(0, 0, 0, .09);
          --text: #0f172a;
          --muted: #64748b;
          --border: rgba(0, 0, 0, .1);
          --nav-bg: rgba(255, 255, 255, .95);
          --mob-bg: rgba(248, 250, 252, .99);
          --float-card: rgba(255, 255, 255, .95);
          --modal-bg: #ffffff;
          --surface: rgba(255, 255, 255, .75);
          --surface-b: rgba(255, 255, 255, .85);
          --dot-line: rgba(0, 0, 0, .045);
          --track-bg: rgba(0, 0, 0, .09);
          --ghost-num: rgba(0, 0, 0, .05);
          --chip-bg: rgba(0, 0, 0, .05);
          --input-bg: #ffffff;
          --form-bg: rgba(255, 255, 255, .8);
        }

        /* background gradient lighter in light mode */
        html[data-theme="light"] .aw-bg {
          background:
            radial-gradient(ellipse 70% 60% at 10% 0%, rgba(99, 102, 241, .08) 0%, transparent 65%),
            radial-gradient(ellipse 50% 40% at 90% 100%, rgba(139, 92, 246, .06) 0%, transparent 65%),
            linear-gradient(var(--dot-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--dot-line) 1px, transparent 1px);
          background-size: 100% 100%, 100% 100%, 55px 55px, 55px 55px;
        }

        html[data-theme="light"] body {
          background: var(--bg);
        }

        /* navbar */
        html[data-theme="light"] #aw-nav.stuck {
          background: var(--nav-bg);
          box-shadow: 0 1px 24px rgba(0, 0, 0, .08);
        }

        html[data-theme="light"] .nav-links a:hover,
        html[data-theme="light"] .nav-links a.is-active {
          background: rgba(0, 0, 0, .07);
        }

        /* mobile menu */
        html[data-theme="light"] #mob-menu {
          background: var(--mob-bg);
        }

        html[data-theme="light"] #mob-menu .mob-link {
          color: rgba(15, 23, 42, .6);
        }

        html[data-theme="light"] #mob-menu .mob-link:hover,
        html[data-theme="light"] #mob-menu .mob-link:active {
          color: #0f172a;
          background: rgba(0, 0, 0, .07);
        }

        html[data-theme="light"] #mob-menu-close {
          background: rgba(0, 0, 0, .07);
          border-color: rgba(0, 0, 0, .12);
          color: #0f172a;
        }

        html[data-theme="light"] #mob-menu-close:hover {
          background: rgba(0, 0, 0, .12);
        }

        html[data-theme="light"] .mob-lang-a {
          background: rgba(0, 0, 0, .05);
          border-color: rgba(0, 0, 0, .1);
        }

        /* dropdown */
        html[data-theme="light"] .nav-dd {
          background: #fff;
          border-color: rgba(0, 0, 0, .1);
          box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
        }

        /* hero floating cards */
        html[data-theme="light"] .hero-card {
          box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
        }

        html[data-theme="light"] .hero-card-title {
          color: #0f172a;
        }

        html[data-theme="light"] .hero-card-sub {
          color: #64748b;
        }

        /* about */
        html[data-theme="light"] .about-exp-badge {
          box-shadow: 0 8px 32px rgba(0, 0, 0, .1);
        }

        html[data-theme="light"] .astat-lbl,
        html[data-theme="light"] .tsc-name {
          color: #64748b;
          -webkit-text-fill-color: #64748b;
        }

        html[data-theme="light"] .tsc-item:hover {
          background: rgba(0, 0, 0, .05);
        }

        /* skills */
        html[data-theme="light"] .skill-card:hover {
          box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
        }

        /* contact inputs */
        html[data-theme="light"] .aw-input {
          background: var(--input-bg);
          border-color: rgba(0, 0, 0, .12);
        }

        html[data-theme="light"] .aw-input::placeholder {
          color: #94a3b8;
        }

        html[data-theme="light"] input.aw-input:-webkit-autofill,
        html[data-theme="light"] input.aw-input:-webkit-autofill:focus {
          -webkit-box-shadow: 0 0 0 1000px #fff inset;
          -webkit-text-fill-color: #0f172a;
        }

        /* work modal */
        html[data-theme="light"] #workModal .modal-content {
          background: #fff;
          border-color: rgba(0, 0, 0, .1);
          color: #0f172a;
        }

        html[data-theme="light"] #workModal .modal-header {
          border-color: rgba(0, 0, 0, .08);
        }

        html[data-theme="light"] #workModal .modal-title {
          color: #0f172a;
        }

        html[data-theme="light"] #workModal .btn-close {
          filter: none;
        }

        html[data-theme="light"] .wm-badge {
          background: rgba(0, 0, 0, .05);
          border-color: rgba(0, 0, 0, .08);
          color: #64748b;
        }

        html[data-theme="light"] .wm-info .tl-desc {
          color: #64748b;
        }

        /* captcha */
        html[data-theme="light"] .aw-captcha-inner {
          background: #f8fafc;
        }

        html[data-theme="light"] .aw-captcha-hd {
          border-color: rgba(0, 0, 0, .08) !important;
        }

        /* toast */
        html[data-theme="light"] .aw-toast {
          background: rgba(255, 255, 255, .97);
          box-shadow: 0 8px 40px rgba(0, 0, 0, .15);
        }

        html[data-theme="light"] .aw-toast-title {
          color: #0f172a;
        }

        html[data-theme="light"] .aw-toast-msg {
          color: #64748b;
        }

        html[data-theme="light"] .aw-toast-close {
          color: #64748b;
        }

        html[data-theme="light"] .aw-toast-close:hover {
          background: rgba(0, 0, 0, .08);
          color: #0f172a;
        }

        /* lightbox */
        html[data-theme="light"] #aw-lb {
          background: rgba(0, 0, 0, .85) !important;
        }

        /* tech showcase */
        html[data-theme="light"] .tech-tag:hover {
          background: rgba(99, 102, 241, .08);
        }

        /* cards hover */
        html[data-theme="light"] .work-card:hover {
          box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
        }

        html[data-theme="light"] .contact-link:hover {
          box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
        }

        /* theme toggle button */
        html[data-theme="light"] #aw-theme-btn {
          color: var(--muted);
          border-color: var(--border);
        }

        html[data-theme="light"] #aw-theme-btn:hover {
          border-color: var(--primary);
          color: var(--primary);
        }

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

        html {
          scroll-behavior: smooth;
          overflow-x: hidden;
          max-width: 100%;
        }

        body {
          background: var(--bg);
          color: var(--text);
          font-family: var(--font-ar);
          line-height: 1.6;
          overflow-x: hidden;
          max-width: 100%;
          width: 100%;
        }

        [dir="ltr"] body {
          font-family: var(--font-en);
        }

        a {
          text-decoration: none;
          color: inherit;
        }

        img {
          max-width: 100%;
          display: block;
        }

        button {
          font-family: inherit;
        }

        /* ═══════════════════════════════════════════════
       UTILITIES
    ═══════════════════════════════════════════════ */
        .grad-text {
          background: linear-gradient(135deg, var(--primary), var(--violet), var(--cyan));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .glass {
          background: var(--card);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border: 1px solid var(--card-b);
          border-radius: var(--radius);
        }

        .sec-label {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(99, 102, 241, .1);
          border: 1px solid rgba(99, 102, 241, .2);
          border-radius: 50px;
          padding: 5px 16px;
          font-size: 11px;
          font-weight: 700;
          color: var(--primary);
          letter-spacing: 1.5px;
          text-transform: uppercase;
          margin-bottom: 14px;
        }

        .sec-title {
          font-size: clamp(28px, 4vw, 46px);
          font-weight: 900;
          line-height: 1.35;
          margin-bottom: 14px;
        }

        .sec-muted {
          color: var(--muted);
          font-size: 15px;
          line-height: 1.8;
        }

        section {
          padding: 100px 0;
        }

        /* ═══════════════════════════════════════════════
       BACKGROUND GRID
    ═══════════════════════════════════════════════ */
        .aw-bg {
          position: fixed;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          background:
            radial-gradient(ellipse 70% 60% at 10% 0%, rgba(99, 102, 241, .14) 0%, transparent 65%),
            radial-gradient(ellipse 50% 40% at 90% 100%, rgba(139, 92, 246, .10) 0%, transparent 65%),
            linear-gradient(var(--dot-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--dot-line) 1px, transparent 1px);
          background-size: 100% 100%, 100% 100%, 55px 55px, 55px 55px;
        }

        .aw-wrap {
          position: relative;
          z-index: 1;
        }

        /* ═══════════════════════════════════════════════
       SCROLL PROGRESS
    ═══════════════════════════════════════════════ */
        #aw-progress {
          position: fixed;
          top: 0;
          left: 0;
          height: 2px;
          width: 0;
          background: linear-gradient(90deg, var(--primary), var(--cyan));
          z-index: 9999;
          transition: width .1s linear;
        }

        /* ═══════════════════════════════════════════════
       NAVBAR
    ═══════════════════════════════════════════════ */
        #aw-nav {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          padding: 18px 0;
          transition: all .35s;
        }

        #aw-nav.stuck {
          background: var(--nav-bg);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border-bottom: 1px solid var(--border);
          padding: 10px 0;
        }

        .nav-in {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
        }

        .nav-logo img {
          height: 40px;
          width: auto;
        }

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

        .nav-links a {
          color: var(--muted);
          font-size: 14px;
          font-weight: 600;
          padding: 7px 15px;
          border-radius: 10px;
          transition: all .2s;
        }

        .nav-links a:hover,
        .nav-links a.is-active {
          color: var(--text);
          background: var(--card);
        }

        .nav-right {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .nav-lang-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          background: transparent;
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 7px 13px;
          color: var(--muted);
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          transition: all .2s;
          text-decoration: none;
        }

        .nav-lang-btn:hover {
          border-color: var(--primary);
          color: var(--primary);
        }

        #aw-theme-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 38px;
          height: 38px;
          border-radius: 10px;
          background: transparent;
          border: 1px solid var(--border);
          color: var(--muted);
          font-size: 14px;
          cursor: pointer;
          transition: all .2s;
          flex-shrink: 0;
        }

        #aw-theme-btn:hover {
          border-color: var(--primary);
          color: var(--primary);
        }

        .nav-dd {
          background: var(--float-card) !important;
          border-color: var(--border) !important;
          backdrop-filter: blur(20px);
        }

        .nav-dd .dropdown-item {
          color: var(--text) !important;
          border-radius: 8px;
        }

        .nav-dd .dropdown-item:hover {
          background: var(--card) !important;
          color: var(--primary) !important;
        }

        .nav-burger {
          display: none;
          flex-direction: column;
          gap: 5px;
          background: transparent;
          border: none;
          cursor: pointer;
          padding: 4px;
        }

        .nav-burger span {
          display: block;
          width: 22px;
          height: 2px;
          background: var(--text);
          border-radius: 2px;
          transition: all .3s;
        }

        /* ═══════════════════════════════════════════════
       MOBILE OVERLAY MENU
    ═══════════════════════════════════════════════ */
        #mob-menu {
          position: fixed;
          inset: 0;
          z-index: 1100;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          background: var(--mob-bg);
          backdrop-filter: blur(28px);
          -webkit-backdrop-filter: blur(28px);
          opacity: 0;
          pointer-events: none;
          transform: translateY(-10px);
          transition: opacity .25s ease, transform .25s ease;
        }

        #mob-menu.open {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0);
        }

        #mob-menu .mob-link {
          font-size: 24px;
          font-weight: 800;
          letter-spacing: -.3px;
          color: var(--muted);
          padding: 11px 40px;
          border-radius: 14px;
          width: 100%;
          max-width: 300px;
          text-align: center;
          transition: color .18s, background .18s;
          display: block;
        }

        #mob-menu .mob-link:hover,
        #mob-menu .mob-link:active {
          color: var(--text);
          background: var(--card);
        }

        #mob-menu-close {
          position: absolute;
          top: 20px;
          width: 44px;
          height: 44px;
          border-radius: 13px;
          background: var(--card);
          border: 1px solid var(--border);
          color: var(--text);
          font-size: 17px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background .18s;
        }

        [dir="rtl"] #mob-menu-close {
          left: 20px;
          right: auto;
        }

        [dir="ltr"] #mob-menu-close {
          right: 20px;
          left: auto;
        }

        #mob-menu-close:hover {
          background: var(--card-b);
        }

        .mob-footer {
          position: absolute;
          bottom: 36px;
          display: flex;
          gap: 10px;
          align-items: center;
        }

        .mob-lang-a {
          padding: 8px 20px;
          border-radius: 10px;
          font-size: 13px;
          font-weight: 600;
          border: 1px solid var(--border);
          background: var(--card);
          color: var(--muted);
          transition: all .18s;
          display: block;
        }

        .mob-lang-a.mob-active,
        .mob-lang-a:hover {
          background: rgba(99, 102, 241, .18);
          border-color: rgba(99, 102, 241, .35);
          color: var(--text);
        }

        /* ═══════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════ */
        #home {
          min-height: 100vh;
          display: flex;
          align-items: center;
          padding-top: 90px;
          position: relative;
          overflow: hidden;
        }

        .hero-blob {
          position: absolute;
          border-radius: 50%;
          filter: blur(90px);
          pointer-events: none;
        }

        .hero-blob-1 {
          width: 550px;
          height: 550px;
          background: radial-gradient(circle, rgba(99, 102, 241, .18), transparent 70%);
          top: -120px;
          right: -120px;
          animation: heroFloat 9s ease-in-out infinite;
        }

        .hero-blob-2 {
          width: 420px;
          height: 420px;
          background: radial-gradient(circle, rgba(6, 182, 212, .12), transparent 70%);
          bottom: -80px;
          left: -80px;
          animation: heroFloat 12s ease-in-out infinite reverse;
        }

        @keyframes heroFloat {

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

          50% {
            transform: translateY(-28px) scale(1.04);
          }
        }

        .hero-avail {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          background: rgba(16, 185, 129, .1);
          border: 1px solid rgba(16, 185, 129, .22);
          border-radius: 50px;
          padding: 6px 18px;
          font-size: 13px;
          font-weight: 700;
          color: var(--green);
          margin-bottom: 26px;
        }

        .hero-avail-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--green);
          animation: gPulse 2s infinite;
        }

        @keyframes gPulse {

          0%,
          100% {
            box-shadow: 0 0 0 0 rgba(16, 185, 129, .5);
          }

          50% {
            box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
          }
        }

        .hero-name {
          font-size: clamp(44px, 6.5vw, 84px);
          font-weight: 900;
          line-height: 1.06;
          margin-bottom: 18px;
        }

        .hero-role {
          font-size: clamp(16px, 2.2vw, 22px);
          color: var(--muted);
          font-weight: 400;
          margin-bottom: 24px;
        }

        .hero-role strong {
          color: var(--text);
          font-weight: 800;
        }

        .hero-desc {
          font-size: 15px;
          color: var(--muted);
          line-height: 1.9;
          max-width: 500px;
          margin-bottom: 38px;
        }

        .hero-btns {
          display: flex;
          gap: 14px;
          flex-wrap: wrap;
        }

        .btn-prim {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          padding: 13px 28px;
          background: linear-gradient(135deg, var(--primary), var(--violet));
          color: #fff;
          border: none;
          border-radius: 13px;
          font-size: 15px;
          font-weight: 700;
          cursor: pointer;
          transition: all .3s;
          box-shadow: 0 8px 32px rgba(99, 102, 241, .38);
        }

        .btn-prim:hover {
          transform: translateY(-2px);
          box-shadow: 0 14px 40px rgba(99, 102, 241, .55);
          color: #fff;
        }

        .btn-ghost {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          padding: 13px 28px;
          background: transparent;
          color: var(--text);
          border: 1px solid var(--border);
          border-radius: 13px;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          transition: all .3s;
        }

        .btn-ghost:hover {
          border-color: var(--primary);
          color: var(--primary);
          background: rgba(99, 102, 241, .07);
          transform: translateY(-2px);
        }

        .hero-socials {
          display: flex;
          gap: 10px;
          margin-top: 36px;
          flex-wrap: wrap;
        }

        .hero-social-a {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          border: 1px solid var(--border);
          background: var(--surface);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--muted);
          font-size: 16px;
          transition: all .22s;
        }

        .hero-social-a:hover {
          border-color: var(--primary);
          color: var(--primary);
          background: rgba(99, 102, 241, .1);
          transform: translateY(-3px);
        }

        /* Avatar */
        .hero-right {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }

        .hero-ring {
          position: absolute;
          width: 400px;
          height: 400px;
          border-radius: 50%;
          border: 1px dashed rgba(99, 102, 241, .28);
          animation: ringRotate 22s linear infinite;
        }

        @keyframes ringRotate {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }

        .hero-ring::before {
          content: '';
          position: absolute;
          width: 11px;
          height: 11px;
          border-radius: 50%;
          background: var(--primary);
          top: 50%;
          right: -5px;
          transform: translateY(-50%);
          box-shadow: 0 0 12px var(--primary);
        }

        .hero-avatar {
          width: 310px;
          height: 310px;
          border-radius: 50%;
          object-fit: cover;
          border: 3px solid rgba(99, 102, 241, .25);
          position: relative;
          z-index: 2;
          box-shadow: 0 0 60px rgba(99, 102, 241, .2);
        }

        .hero-card {
          position: absolute;
          z-index: 3;
          background: var(--float-card);
          backdrop-filter: blur(20px);
          border: 1px solid var(--border);
          border-radius: 16px;
          padding: 13px 18px;
          display: flex;
          align-items: center;
          gap: 12px;
          animation: cardFloat 7s ease-in-out infinite;
        }

        .hero-card-2 {
          animation-delay: -3.5s;
        }

        /* Desktop LTR */
        #techCard {
          bottom: 20px;
          left: -10px;
        }

        #statCard {
          top: 20px;
          right: -10px;
        }

        /* Desktop RTL */
        [dir="rtl"] #techCard {
          right: -10px;
          left: auto;
        }

        [dir="rtl"] #statCard {
          left: -10px;
          right: auto;
        }

        /* scale var: controlled per-breakpoint, used inside keyframes */
        .hero-card {
          --cs: 1;
        }

        @keyframes cardFloat {

          0%,
          100% {
            transform: scale(var(--cs)) translateY(0);
          }

          50% {
            transform: scale(var(--cs)) translateY(-10px);
          }
        }

        .hero-card-icon {
          width: 40px;
          height: 40px;
          border-radius: 11px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          flex-shrink: 0;
        }

        .hero-card-title {
          font-weight: 800;
          font-size: 14px;
        }

        .hero-card-sub {
          font-size: 11px;
          color: var(--muted);
          margin-top: 1px;
        }

        .hc-sfx {
          font-size: 11px;
          font-weight: 600;
          color: var(--muted);
        }

        /* ═══════════════════════════════════════════════
       STATS BAR
    ═══════════════════════════════════════════════ */
        .stats-strip {
          padding: 52px 0;
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
        }

        .stat-num {
          display: block;
          font-size: 48px;
          font-weight: 900;
          line-height: 1;
          background: linear-gradient(135deg, var(--primary), var(--cyan));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .stat-lbl {
          display: block;
          color: var(--muted);
          -webkit-text-fill-color: var(--muted);
          font-size: 13px;
          margin-top: 5px;
        }

        /* ═══════════════════════════════════════════════
       ABOUT
    ═══════════════════════════════════════════════ */
        .about-img {
          width: 100%;
          border-radius: 24px;
          object-fit: cover;
          max-height: 540px;
          box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
        }

        .about-img-wrap {
          position: relative;
        }

        .about-exp-badge {
          position: absolute;
          bottom: 28px;
          background: var(--float-card);
          backdrop-filter: blur(20px);
          border: 1px solid var(--border);
          border-radius: 16px;
          padding: 16px 22px;
          text-align: center;
        }

        [dir="rtl"] .about-exp-badge {
          right: 28px;
        }

        [dir="ltr"] .about-exp-badge {
          left: 28px;
        }

        .info-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;
          margin: 26px 0;
        }

        .info-cell {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 14px;
          padding: 15px 18px;
          transition: border-color .25s;
        }

        .info-cell:hover {
          border-color: rgba(99, 102, 241, .25);
        }

        .info-cell-lbl {
          display: block;
          font-size: 11px;
          color: var(--muted);
          text-transform: uppercase;
          letter-spacing: .5px;
          margin-bottom: 5px;
        }

        .info-cell-val {
          font-weight: 700;
          font-size: 13px;
        }

        /* ═══════════════════════════════════════════════
       SKILLS
    ═══════════════════════════════════════════════ */
        .skills-section {
          background: linear-gradient(180deg, transparent, rgba(99, 102, 241, .03) 50%, transparent);
        }

        .skill-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 16px;
          padding: 18px 20px;
          display: flex;
          align-items: center;
          gap: 14px;
          transition: all .3s;
        }

        .skill-card:hover {
          border-color: rgba(99, 102, 241, .25);
          transform: translateY(-3px);
        }

        .skill-ic {
          width: 46px;
          height: 46px;
          border-radius: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          flex-shrink: 0;
        }

        .skill-body {
          flex: 1;
          min-width: 0;
        }

        .skill-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
        }

        .skill-name {
          font-weight: 700;
          font-size: 14px;
        }

        .skill-pct {
          font-size: 13px;
          font-weight: 800;
        }

        .skill-track {
          height: 4px;
          background: var(--track-bg);
          border-radius: 2px;
        }

        .skill-fill {
          height: 100%;
          border-radius: 2px;
          width: 0;
          transition: width 1.4s ease;
        }

        /* ═══════════════════════════════════════════════
       SERVICES
    ═══════════════════════════════════════════════ */
        .svc-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 22px;
          padding: 38px 30px;
          height: 100%;
          position: relative;
          overflow: hidden;
          transition: all .35s;
        }

        .svc-card::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, rgba(99, 102, 241, .07), transparent);
          opacity: 0;
          transition: opacity .35s;
        }

        .svc-card:hover {
          border-color: rgba(99, 102, 241, .28);
          transform: translateY(-5px);
        }

        .svc-card:hover::after {
          opacity: 1;
        }

        .svc-num {
          position: absolute;
          top: 18px;
          font-size: 68px;
          font-weight: 900;
          color: var(--ghost-num);
          line-height: 1;
          font-family: var(--font-en);
          z-index: 0;
        }

        [dir="rtl"] .svc-num {
          left: 22px;
        }

        [dir="ltr"] .svc-num {
          right: 22px;
        }

        .svc-icon {
          width: 62px;
          height: 62px;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 27px;
          margin-bottom: 26px;
          position: relative;
          z-index: 1;
        }

        .svc-title {
          font-size: 20px;
          font-weight: 800;
          margin-bottom: 12px;
          position: relative;
          z-index: 1;
        }

        .svc-desc {
          color: var(--muted);
          font-size: 14px;
          line-height: 1.8;
          position: relative;
          z-index: 1;
        }

        /* ═══════════════════════════════════════════════
       PORTFOLIO
    ═══════════════════════════════════════════════ */
        .portfolio-section {
          background: linear-gradient(180deg, transparent, rgba(139, 92, 246, .03) 50%, transparent);
        }

        .work-card {
          position: relative;
          overflow: hidden;
          border-radius: 20px;
          background: var(--surface);
          border: 1px solid var(--border);
          transition: all .35s;
          cursor: pointer;
        }

        .work-card:hover {
          border-color: rgba(99, 102, 241, .28);
          transform: translateY(-6px);
          box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
        }

        .work-logo-bg {
          height: 190px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, rgba(99, 102, 241, .13), rgba(139, 92, 246, .13));
          position: relative;
          overflow: hidden;
        }

        .work-logo {
          max-height: 130px;
          max-width: 78%;
          object-fit: contain;
          border-radius: 12px;
        }

        .work-hover {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, .45);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity .3s;
        }

        .work-card:hover .work-hover {
          opacity: 1;
        }

        .work-hover-btn {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          background: var(--primary);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 18px;
          transform: scale(.6);
          transition: transform .3s;
        }

        .work-card:hover .work-hover-btn {
          transform: scale(1);
        }

        .work-body {
          padding: 18px 20px;
        }

        .work-name {
          font-weight: 800;
          font-size: 16px;
          margin-bottom: 4px;
        }

        .work-title {
          color: var(--muted);
          font-size: 13px;
          margin-bottom: 12px;
        }

        .store-chips {
          display: flex;
          gap: 7px;
          flex-wrap: wrap;
        }

        .store-chip {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 11px;
          font-weight: 600;
          color: var(--muted);
          background: var(--chip-bg);
          border: 1px solid var(--border);
          border-radius: 6px;
          padding: 3px 9px;
        }

        /* ═══════════════════════════════════════════════
       EXPERIENCE TIMELINE
    ═══════════════════════════════════════════════ */
        .exp-section {
          background: linear-gradient(180deg, transparent, rgba(6, 182, 212, .025) 50%, transparent);
        }

        .tl-head {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 19px;
          font-weight: 800;
          margin-bottom: 32px;
        }

        .tl-head-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 17px;
        }

        .timeline {
          position: relative;
        }

        .timeline::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          width: 1px;
          background: linear-gradient(180deg, var(--primary), var(--cyan), transparent);
        }

        [dir="rtl"] .timeline {
          padding-right: 32px;
        }

        [dir="rtl"] .timeline::before {
          right: 0;
        }

        [dir="ltr"] .timeline {
          padding-left: 32px;
        }

        [dir="ltr"] .timeline::before {
          left: 0;
        }

        .tl-item {
          position: relative;
          margin-bottom: 28px;
        }

        .tl-dot {
          position: absolute;
          top: 8px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
        }

        [dir="rtl"] .tl-dot {
          right: -38px;
        }

        [dir="ltr"] .tl-dot {
          left: -38px;
        }

        .tl-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 16px;
          padding: 22px 24px;
          transition: border-color .3s;
        }

        .tl-card:hover {
          border-color: rgba(99, 102, 241, .2);
        }

        .tl-period {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          font-weight: 700;
          margin-bottom: 6px;
        }

        .tl-title {
          font-size: 17px;
          font-weight: 800;
          margin-bottom: 4px;
        }

        .tl-company {
          font-size: 13px;
          font-weight: 700;
          margin-bottom: 10px;
        }

        .tl-desc {
          color: var(--muted);
          font-size: 14px;
          line-height: 1.75;
          margin: 0;
        }

        /* Tech tags */
        .tech-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 7px;
        }

        .tech-tag {
          background: var(--chip-bg);
          border: 1px solid var(--border);
          border-radius: 7px;
          padding: 4px 12px;
          font-size: 12px;
          font-weight: 600;
          font-family: var(--font-en);
          transition: border-color .2s;
        }

        .tech-tag:hover {
          border-color: var(--primary);
          color: var(--primary);
        }

        /* ═══════════════════════════════════════════════
       CONTACT
    ═══════════════════════════════════════════════ */
        .contact-section {
          background: linear-gradient(180deg, transparent, rgba(16, 185, 129, .025) 50%, transparent);
        }

        .contact-link {
          display: flex;
          align-items: center;
          gap: 18px;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 18px;
          padding: 22px 24px;
          color: var(--text);
          transition: all .3s;
          margin-bottom: 12px;
        }

        [dir="rtl"] .contact-link:hover {
          transform: translateX(5px);
        }

        [dir="ltr"] .contact-link:hover {
          transform: translateX(5px);
        }

        .contact-link:hover {
          border-color: rgba(99, 102, 241, .3);
          background: rgba(99, 102, 241, .05);
          color: var(--text);
        }

        .contact-ic {
          width: 52px;
          height: 52px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          flex-shrink: 0;
        }

        .contact-lbl {
          font-size: 11px;
          color: var(--muted);
          display: block;
          margin-bottom: 3px;
        }

        .contact-val {
          font-weight: 700;
          font-size: 14px;
        }

        .contact-chev {
          margin-right: auto;
          color: var(--muted);
          font-size: 12px;
        }

        [dir="ltr"] .contact-chev {
          margin-right: 0;
          margin-left: auto;
          transform: scaleX(-1);
        }

        .form-wrap {
          background: var(--form-bg);
          border: 1px solid var(--border);
          border-radius: 24px;
          padding: 36px;
        }

        .aw-input {
          width: 100%;
          background: var(--input-bg);
          border: 1px solid var(--border);
          border-radius: 12px;
          padding: 13px 17px;
          color: var(--text);
          font-size: 14px;
          line-height: 1.6;
          font-family: var(--font-ar);
          outline: none;
          transition: border-color .2s, background .2s;
          margin-bottom: 13px;
          -webkit-appearance: none;
          appearance: none;
          box-sizing: border-box;
        }

        [dir="ltr"] .aw-input {
          font-family: var(--font-en);
        }

        .aw-input::placeholder {
          color: var(--muted);
          opacity: 1;
        }

        .aw-input:focus {
          border-color: var(--primary);
          background: rgba(99, 102, 241, .05);
        }

        input.aw-input:focus {
          border-color: var(--primary);
          background: rgba(99, 102, 241, .05);
          outline: none;
        }

        .aw-err {
          border-color: rgba(246, 78, 96, .55) !important;
        }

        .aw-err:focus {
          border-color: rgba(246, 78, 96, .9) !important;
          background: rgba(246, 78, 96, .04) !important;
        }

        input.aw-err:focus {
          border-color: rgba(246, 78, 96, .9) !important;
          background: rgba(246, 78, 96, .04) !important;
        }

        .aw-field-err {
          display: block;
          color: rgba(246, 78, 96, .85);
          font-size: 12px;
          margin-top: -9px;
          margin-bottom: 11px;
          padding: 0 4px;
        }

        input.aw-input:-webkit-autofill,
        input.aw-input:-webkit-autofill:focus {
          -webkit-box-shadow: 0 0 0 1000px #14142a inset;
          -webkit-text-fill-color: var(--text);
          border-color: var(--primary);
        }

        input.aw-input {
          font-family: var(--font-ar);
          font-size: 14px;
          height: auto;
          padding: 13px 17px;
          border: 1px solid var(--border);
          border-radius: 12px;
          line-height: 1.6;
        }

        [dir="ltr"] input.aw-input {
          font-family: var(--font-en);
        }

        /* contact field: value always LTR (phone/email), placeholder follows page direction */
        input[name="contact"].aw-input {
          direction: ltr;
          text-align: left;
        }

        [dir="rtl"] input[name="contact"].aw-input::placeholder {
          text-align: right;
          direction: rtl;
        }

        textarea.aw-input {
          resize: vertical;
          min-height: 130px;
        }

        [dir="ltr"] textarea.aw-input {
          font-family: var(--font-en);
        }

        /* ── Cloudflare Turnstile card ── */
        .aw-captcha-wrap {
          position: relative;
          margin-bottom: 13px;
          border-radius: 17px;
          padding: 1.5px;
          background: linear-gradient(135deg, rgba(99, 102, 241, .65) 0%, rgba(6, 182, 212, .65) 100%);
        }

        .aw-captcha-wrap::after {
          content: '';
          position: absolute;
          inset: -5px;
          border-radius: 22px;
          background: linear-gradient(135deg, rgba(99, 102, 241, .28) 0%, rgba(6, 182, 212, .22) 100%);
          filter: blur(14px);
          z-index: -1;
        }

        .aw-captcha-inner {
          background: var(--modal-bg);
          border-radius: 15.5px;
          overflow: hidden;
        }

        /* header */
        .aw-captcha-hd {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 15px 18px 13px;
          border-bottom: 1px solid var(--border);
        }

        .aw-captcha-icon {
          width: 38px;
          height: 38px;
          flex-shrink: 0;
          border-radius: 10px;
          font-size: 16px;
          background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(6, 182, 212, .18));
          border: 1px solid rgba(99, 102, 241, .30);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #a5b4fc;
          animation: aw-cap-pulse 2.8s ease-in-out infinite;
        }

        @keyframes aw-cap-pulse {

          0%,
          100% {
            box-shadow: 0 0 0 0 rgba(99, 102, 241, .45);
          }

          50% {
            box-shadow: 0 0 0 7px rgba(99, 102, 241, .0);
          }
        }

        .aw-captcha-ttl {
          font-size: 13px;
          font-weight: 700;
          color: var(--text);
          line-height: 1.3;
        }

        .aw-captcha-sub {
          font-size: 11px;
          color: var(--muted);
          margin-top: 2px;
        }

        .aw-captcha-meta {
          margin-right: auto;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 5px;
        }

        [dir="ltr"] .aw-captcha-meta {
          margin-right: 0;
          margin-left: auto;
          align-items: flex-start;
        }

        .aw-captcha-badge {
          font-size: 9px;
          font-weight: 700;
          letter-spacing: .9px;
          text-transform: uppercase;
          color: rgba(148, 163, 184, .6);
        }

        .aw-captcha-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #22c55e;
          box-shadow: 0 0 7px rgba(34, 197, 94, .9);
          align-self: flex-end;
          animation: aw-cap-blink 2.2s ease-in-out infinite;
        }

        [dir="ltr"] .aw-captcha-dot {
          align-self: flex-start;
        }

        @keyframes aw-cap-blink {

          0%,
          100% {
            opacity: 1
          }

          50% {
            opacity: .3
          }
        }

        /* widget area */
        .aw-captcha-body {
          padding: 13px 14px 14px;
        }

        .aw-captcha-body .cf-turnstile {
          width: 100%;
        }

        /* footer */
        .aw-captcha-ft {
          padding: 9px 18px;
          border-top: 1px solid var(--border);
          display: flex;
          align-items: center;
          gap: 7px;
        }

        .aw-captcha-ft-txt {
          font-size: 10px;
          color: var(--muted);
          opacity: .55;
        }

        .aw-captcha-ft i {
          font-size: 9px;
          color: var(--muted);
          opacity: .5;
        }

        /* ═══════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════ */
        .aw-footer {
          padding: 28px 0;
          border-top: 1px solid var(--border);
          text-align: center;
          color: var(--muted);
          font-size: 13px;
        }

        .aw-footer strong {
          color: var(--text);
        }

        /* ═══════════════════════════════════════════════
       SCROLL-TO-TOP
    ═══════════════════════════════════════════════ */
        #aw-top {
          position: fixed;
          bottom: 28px;
          z-index: 500;
          width: 44px;
          height: 44px;
          border-radius: 13px;
          background: linear-gradient(135deg, var(--primary), var(--violet));
          color: #fff;
          border: none;
          cursor: pointer;
          display: none;
          align-items: center;
          justify-content: center;
          font-size: 15px;
          box-shadow: 0 8px 28px rgba(99, 102, 241, .45);
          transition: all .3s;
        }

        [dir="rtl"] #aw-top {
          left: 28px;
        }

        [dir="ltr"] #aw-top {
          right: 28px;
        }

        #aw-top.on {
          display: flex;
        }

        #aw-top:hover {
          transform: translateY(-3px);
        }

        /* ═══════════════════════════════════════════════
       FADE-UP ANIMATION
    ═══════════════════════════════════════════════ */
        .fu {
          opacity: 0;
          transform: translateY(32px);
          transition: opacity .7s ease, transform .7s ease;
        }

        .fu.vis {
          opacity: 1;
          transform: translateY(0);
        }

        /* ═══════════════════════════════════════════════
       SUCCESS TOAST
    ═══════════════════════════════════════════════ */
        .aw-toast {
          position: fixed;
          bottom: 32px;
          left: 32px;
          z-index: 9999;
          display: flex;
          align-items: flex-start;
          gap: 14px;
          padding: 18px 20px 20px;
          width: 320px;
          background: var(--float-card);
          border: 1px solid rgba(99, 102, 241, 0.3);
          border-radius: 18px;
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.1), 0 24px 64px rgba(0, 0, 0, 0.6);
          transform: translateY(120%) scale(0.9);
          opacity: 0;
          transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
          overflow: hidden;
        }

        [dir="rtl"] .aw-toast {
          left: auto;
          right: 32px;
        }

        .aw-toast.show {
          transform: translateY(0) scale(1);
          opacity: 1;
        }

        .aw-toast::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--primary), var(--cyan));
        }

        .aw-toast-icon {
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          border-radius: 12px;
          background: rgba(16, 185, 129, 0.12);
          border: 1px solid rgba(16, 185, 129, 0.25);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .aw-toast-icon svg {
          width: 20px;
          height: 20px;
        }

        .aw-toast-icon svg path {
          stroke-dasharray: 30;
          stroke-dashoffset: 30;
          transition: stroke-dashoffset 0.5s ease 0.3s;
        }

        .aw-toast.show .aw-toast-icon svg path {
          stroke-dashoffset: 0;
        }

        .aw-toast-body {
          flex: 1;
          min-width: 0;
        }

        .aw-toast-title {
          font-size: 14px;
          font-weight: 700;
          color: #fff;
          margin-bottom: 3px;
        }

        .aw-toast-msg {
          font-size: 13px;
          color: var(--muted);
          line-height: 1.5;
        }

        .aw-toast-close {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          background: rgba(255, 255, 255, 0.06);
          border: none;
          border-radius: 6px;
          color: var(--muted);
          font-size: 15px;
          line-height: 1;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background .2s, color .2s;
        }

        .aw-toast-close:hover {
          background: rgba(255, 255, 255, 0.12);
          color: #fff;
        }

        .aw-toast-bar {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, var(--primary), var(--cyan));
          transform-origin: left;
          border-radius: 0 0 18px 18px;
        }

        @media (max-width: 480px) {
          .aw-toast {
            width: calc(100vw - 32px);
            left: 16px;
            right: 16px;
            bottom: 20px;
          }

          [dir="rtl"] .aw-toast {
            left: 16px;
            right: 16px;
          }
        }

        /* ═══════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════ */

        /* ── Tablet ≤ 991px ──────────────────────────── */
        @media (max-width: 991px) {
          .nav-links {
            display: none;
          }

          .nav-burger {
            display: flex;
          }

          .hero-ring {
            width: 300px;
            height: 300px;
          }

          .hero-right {
            min-height: 300px;
          }

          .hero-avatar {
            width: 230px;
            height: 230px;
          }

          section {
            padding: 72px 0;
          }

          /* Cards — scale down, anchor to ring edges */
          .hero-card {
            --cs: 0.82;
          }

          [dir="ltr"] #techCard {
            bottom: 22px;
            left: calc(50% - 175px);
            transform-origin: bottom left;
          }

          [dir="ltr"] #statCard {
            top: 22px;
            right: calc(50% - 175px);
            transform-origin: top right;
          }

          [dir="rtl"] #techCard {
            bottom: 22px;
            right: calc(50% - 175px);
            left: auto;
            transform-origin: bottom right;
          }

          [dir="rtl"] #statCard {
            top: 22px;
            left: calc(50% - 175px);
            right: auto;
            transform-origin: top left;
          }
        }

        /* ── Mobile ≤ 767px ──────────────────────────── */
        @media (max-width: 767px) {
          section {
            padding: 52px 0;
          }

          /* Hero — remove tall min-height on mobile */
          #home {
            min-height: 0;
            padding-top: 96px;
            padding-bottom: 24px;
            align-items: flex-start;
          }

          .hero-avatar {
            width: 195px;
            height: 195px;
          }

          .hero-ring {
            width: 256px;
            height: 256px;
          }

          .hero-right {
            min-height: 256px;
          }

          .hero-card {
            --cs: 0.78;
          }

          [dir="ltr"] #techCard {
            bottom: 18px;
            left: calc(50% - 153px);
            transform-origin: bottom left;
          }

          [dir="ltr"] #statCard {
            top: 18px;
            right: calc(50% - 153px);
            transform-origin: top right;
          }

          [dir="rtl"] #techCard {
            bottom: 18px;
            right: calc(50% - 153px);
            left: auto;
            transform-origin: bottom right;
          }

          [dir="rtl"] #statCard {
            top: 18px;
            left: calc(50% - 153px);
            right: auto;
            transform-origin: top left;
          }

          .hero-desc {
            max-width: 100%;
            font-size: 14px;
          }

          .hero-btns {
            gap: 10px;
          }

          /* Stats */
          .stats-strip {
            padding: 40px 0;
          }

          .stat-num {
            font-size: 38px;
          }

          .stat-lbl {
            font-size: 12px;
          }

          /* About */
          .info-grid {
            grid-template-columns: 1fr;
          }

          .astat-num {
            font-size: 34px;
          }

          /* Services */
          .svc-card {
            padding: 28px 22px;
          }

          /* Portfolio — hide hover overlay on touch screens */
          .work-hover {
            display: none;
          }

          /* Timeline */
          .tl-card {
            padding: 18px 20px;
          }

          [dir="rtl"] .timeline {
            padding-right: 26px;
          }

          [dir="ltr"] .timeline {
            padding-left: 26px;
          }

          /* Contact */
          .contact-link {
            padding: 16px 18px;
            gap: 12px;
          }

          .contact-ic {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            font-size: 18px;
          }

          .contact-val {
            font-size: 13px;
            word-break: break-all;
          }

          /* Form */
          .form-wrap {
            padding: 24px 18px;
          }

          /* (mob-menu-close direction handled in base CSS) */
        }

        /* ── Small phones ≤ 575px ────────────────────── */
        @media (max-width: 575px) {
          section {
            padding: 44px 0;
          }

          /* Navbar */
          .nav-lang-btn {
            padding: 6px 10px;
            font-size: 12px;
          }

          /* Hero */
          #home {
            padding-top: 76px;
            padding-bottom: 16px;
          }

          .hero-avatar {
            width: 165px;
            height: 165px;
          }

          .hero-ring {
            width: 216px;
            height: 216px;
          }

          .hero-right {
            min-height: 216px;
          }

          .hero-card {
            --cs: 0.72;
          }

          [dir="ltr"] #techCard {
            bottom: 14px;
            left: max(6px, calc(50% - 130px));
            transform-origin: bottom left;
          }

          [dir="ltr"] #statCard {
            top: 14px;
            right: max(6px, calc(50% - 130px));
            transform-origin: top right;
          }

          [dir="rtl"] #techCard {
            bottom: 14px;
            right: max(6px, calc(50% - 130px));
            left: auto;
            transform-origin: bottom right;
          }

          [dir="rtl"] #statCard {
            top: 14px;
            left: max(6px, calc(50% - 130px));
            right: auto;
            transform-origin: top left;
          }

          .hero-avail {
            font-size: 12px;
            padding: 5px 14px;
            margin-bottom: 16px;
          }

          .hero-desc {
            font-size: 14px;
            margin-bottom: 24px;
          }

          .hero-btns {
            flex-direction: column;
          }

          .hero-btns .btn-prim,
          .hero-btns .btn-ghost {
            width: 100%;
            justify-content: center;
          }

          .hero-socials {
            gap: 8px;
            margin-top: 22px;
          }

          /* Stats */
          .stats-strip {
            padding: 32px 0;
          }

          .stat-num {
            font-size: 32px;
          }

          /* About */
          .astat-num {
            font-size: 30px;
          }

          .about-exp-badge {
            padding: 12px 16px;
          }

          /* Services */
          .svc-card {
            padding: 24px 18px;
          }

          .svc-icon {
            width: 52px;
            height: 52px;
            font-size: 22px;
            margin-bottom: 18px;
          }

          .svc-title {
            font-size: 18px;
          }

          .svc-num {
            font-size: 54px;
          }

          /* Portfolio */
          .work-logo-bg {
            height: 160px;
          }

          .work-body {
            padding: 14px 16px;
          }

          .work-name {
            font-size: 15px;
          }

          /* Timeline */
          .tl-head {
            font-size: 16px;
            margin-bottom: 22px;
          }

          .tl-card {
            padding: 16px 16px;
          }

          .tl-title {
            font-size: 15px;
          }

          .tl-desc {
            font-size: 13px;
          }

          [dir="rtl"] .timeline {
            padding-right: 22px;
          }

          [dir="ltr"] .timeline {
            padding-left: 22px;
          }

          [dir="rtl"] .tl-dot {
            right: -28px;
          }

          [dir="ltr"] .tl-dot {
            left: -28px;
          }

          /* Contact */
          .contact-link {
            padding: 14px 16px;
            gap: 10px;
            border-radius: 14px;
          }

          .contact-ic {
            width: 40px;
            height: 40px;
            border-radius: 11px;
            font-size: 16px;
          }

          .contact-lbl {
            font-size: 10px;
          }

          /* Form */
          .form-wrap {
            padding: 20px 14px;
            border-radius: 18px;
          }

          .aw-captcha-hd {
            padding: 12px 14px 11px;
            gap: 10px;
          }

          .aw-captcha-ttl {
            font-size: 12px;
          }

          .aw-captcha-ft {
            padding: 8px 14px;
          }

          /* Scroll-to-top */
          [dir="rtl"] #aw-top {
            left: 16px;
            bottom: 16px;
          }

          [dir="ltr"] #aw-top {
            right: 16px;
            bottom: 16px;
          }

          /* Typography */
          .sec-muted {
            font-size: 14px;
          }

          /* Fix RTL gutter overflow — reduce g-5 rows on mobile */
          .row {
            --bs-gutter-x: 1.2rem;
          }

          /* Prevent flex children from overflowing */
          .col-lg-5,
          .col-lg-6,
          .col-lg-7,
          .col-md-6,
          .col-12 {
            min-width: 0;
          }
        }

        /* ── Very small phones ≤ 380px ───────────────── */
        @media (max-width: 380px) {
          .hero-avatar {
            width: 148px;
            height: 148px;
          }

          .hero-ring {
            width: 194px;
            height: 194px;
          }

          .hero-right {
            min-height: 194px;
          }

          .hero-card {
            --cs: 0.65;
          }

          [dir="ltr"] #techCard {
            bottom: 10px;
            left: max(6px, calc(50% - 117px));
            transform-origin: bottom left;
          }

          [dir="ltr"] #statCard {
            top: 10px;
            right: max(6px, calc(50% - 117px));
            transform-origin: top right;
          }

          [dir="rtl"] #techCard {
            bottom: 10px;
            right: max(6px, calc(50% - 117px));
            left: auto;
            transform-origin: bottom right;
          }

          [dir="rtl"] #statCard {
            top: 10px;
            left: max(6px, calc(50% - 117px));
            right: auto;
            transform-origin: top left;
          }

          .stat-num {
            font-size: 28px;
          }

          .hero-social-a {
            width: 38px;
            height: 38px;
            font-size: 14px;
          }

          .nav-lang-btn {
            padding: 5px 8px;
            font-size: 11px;
          }
        }

        /* ─── Tech Card Cycle ─── */
        #techCard,
        #statCard {
          transition: opacity .35s ease;
        }

        /* ── Lightbox ── */
        #aw-lb {
          opacity: 0;
          transition: opacity .22s;
        }

        #aw-lb.open {
          opacity: 1;
        }

        #aw-lb img {
          transition: opacity .16s, transform .25s;
          transform: scale(.93);
        }

        #aw-lb.open img {
          transform: scale(1);
        }

        /* ─── About Panel ─── */
        .about-panel {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .astat-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 18px;
          padding: 22px 20px;
        }

        .astat-num {
          font-size: 42px;
          font-weight: 900;
          line-height: 1;
          font-family: 'Poppins', sans-serif;
        }

        .astat-lbl {
          color: var(--muted);
          -webkit-text-fill-color: var(--muted);
          font-size: 12px;
          margin-top: 6px;
        }

        .tech-showcase-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 18px;
          padding: 22px;
        }

        .tsc-header {
          font-size: 11px;
          color: var(--muted);
          text-transform: uppercase;
          letter-spacing: .8px;
          margin-bottom: 16px;
        }

        .tsc-item {
          padding: 14px 4px;
          border-radius: 14px;
          transition: background .2s;
          cursor: default;
        }

        .tsc-item:hover {
          background: var(--card);
        }

        .tsc-icon {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          font-size: 19px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 8px;
        }

        .tsc-name {
          font-size: 10px;
          font-weight: 700;
          color: var(--muted);
          font-family: 'Poppins', sans-serif;
        }

        /* ─── Form redesign ─── */
        .fw-group {
          position: relative;
          margin-bottom: 13px;
        }

        .fw-group .fw-ic {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          color: rgba(148, 163, 184, .6);
          font-size: 13px;
          pointer-events: none;
          z-index: 2;
        }

        .fw-group textarea~.fw-ic {
          top: 16px;
          transform: none;
        }

        [dir="rtl"] .fw-group .fw-ic {
          right: 16px;
        }

        [dir="ltr"] .fw-group .fw-ic {
          left: 16px;
        }

        [dir="rtl"] .fw-group .aw-input {
          padding-right: 44px;
        }

        [dir="ltr"] .fw-group .aw-input {
          padding-left: 44px;
        }

        .fw-group .aw-input {
          margin-bottom: 0;
        }

        /* ─── Work Modal ─── */
        #workModal .modal-content {
          background: var(--modal-bg);
          border: 1px solid var(--border);
          border-radius: 22px;
          overflow: hidden;
          color: var(--text);
        }

        #workModal .modal-header {
          border-bottom: 1px solid var(--border);
          padding: 20px 24px;
        }

        #workModal .modal-body {
          padding: 0;
        }

        .wm-screens {
          background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(139, 92, 246, .12));
          padding: 24px;
          display: flex;
          justify-content: center;
          min-height: 260px;
          align-items: center;
        }

        .wm-screens img {
          max-height: 280px;
          border-radius: 14px;
          object-fit: contain;
        }

        .wm-info {
          padding: 24px;
        }

        .wm-meta-row {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin: 16px 0;
        }

        .wm-badge {
          background: var(--chip-bg);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 5px 13px;
          font-size: 12px;
          font-weight: 600;
          color: var(--muted);
        }

        .wm-badge strong {
          color: var(--text);
        }

        .wm-sub {
          color: var(--muted);
          font-size: 13px;
        }

        .wm-desc {
          color: var(--muted);
          font-size: 14px;
          line-height: 1.8;
          margin-bottom: 16px;
        }