/* =========================================================
   Abdullah Dawod — Portfolio
   Premium dark & light cinematic UI · EN/AR bilingual
   ========================================================= */

/* ---------- THEME TOKENS ---------- */
:root,
:root[data-theme="dark"]{
  --bg: #0B0F19;
  --bg-2: #0a0d17;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #EEF1F8;
  --text-soft: #b9c0d4;
  --muted: #8B92A8;
  --muted-2: #5B617A;
  --indigo: #7c5cff;
  --indigo-2: #9d8bff;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --green: #34d399;
  --grad-1: linear-gradient(135deg,#7c5cff 0%,#3b82f6 50%,#22d3ee 100%);
  --grad-2: linear-gradient(135deg,#9d8bff 0%,#7c5cff 100%);
  --grad-text-strong: linear-gradient(180deg, #ffffff 0%, #b9c0d4 110%);
  --glow: 0 0 80px rgba(124,92,255,.35);
  --orb-1: #5b3fbf;
  --orb-2: #22d3ee;
  --orb-3: #3b82f6;
  --orb-1-op: .55;
  --orb-2-op: .25;
  --orb-3-op: .30;
  --grid-line: rgba(255,255,255,.025);
  --noise-op: .04;
  --mock-bg: linear-gradient(135deg, #1a1f33, #0f1322);
  --mock-screen: #0a0d17;
  --code-card: rgba(20,24,40,.6);
  --shadow-card: 0 30px 80px -30px rgba(0,0,0,.6);
  --shadow-portrait: 0 30px 80px -20px rgba(0,0,0,.6);
}

:root[data-theme="light"]{
  --bg: #F4F5FA;
  --bg-2: #ECEFF6;
  --surface: rgba(255,255,255,0.72);
  --surface-2: rgba(255,255,255,0.85);
  --border: rgba(15,20,40,0.08);
  --border-strong: rgba(15,20,40,0.14);
  --text: #0E1424;
  --text-soft: #2D3552;
  --muted: #5C6582;
  --muted-2: #8D94AC;
  --indigo: #6044e6;
  --indigo-2: #7c5cff;
  --blue: #2563eb;
  --cyan: #0891b2;
  --green: #059669;
  --grad-1: linear-gradient(135deg,#6044e6 0%,#2563eb 50%,#0891b2 100%);
  --grad-2: linear-gradient(135deg,#7c5cff 0%,#6044e6 100%);
  --grad-text-strong: linear-gradient(180deg, #0E1424 0%, #4a527a 110%);
  --glow: 0 0 60px rgba(96,68,230,.18);
  --orb-1: #b8a7ff;
  --orb-2: #93d5e8;
  --orb-3: #b6cdfa;
  --orb-1-op: .50;
  --orb-2-op: .35;
  --orb-3-op: .40;
  --grid-line: rgba(15,20,40,.045);
  --noise-op: .025;
  --mock-bg: linear-gradient(135deg, #ffffff, #eef0f7);
  --mock-screen: #ffffff;
  --code-card: rgba(255,255,255,0.85);
  --shadow-card: 0 30px 80px -30px rgba(70,80,140,.25);
  --shadow-portrait: 0 30px 60px -15px rgba(70,80,140,.30);
}

/* Smooth cross-theme transitions on color-bearing surfaces */
html,body,.nav-wrap,.bento-card,.skill-card,.service-card,.tl-card,.tm-card,
.project,.contact-wrap,.field input,.field textarea,.btn-ghost,.nav-cta,
.nav-links,.status-pill,.icon-btn,.lang-btn,.socials a,.float-card,
.proj-mock,.proj-phone,.proj-landing,.tile-card,.footer,.fc-bar,.skill-meter,
.tile-grid span{
  transition:
    background-color .45s ease,
    color .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Tajawal", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a{color:inherit;text-decoration:none}
button{font: inherit; cursor: pointer}
img{display:block;max-width:100%}

::selection{background:rgba(124,92,255,.45);color:#fff}
:root[data-theme="light"] ::selection{background:rgba(96,68,230,.22);color:#0E1424}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,120,140,.18);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,120,140,.32)}

.container{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.muted{color:var(--muted)}

/* =========================================================
   LANGUAGE / RTL ADAPTATION
   ========================================================= */
:root[lang="ar"] body{
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}
:root[lang="ar"] .hero-title,
:root[lang="ar"] .section-title,
:root[lang="ar"] .bento-title,
:root[lang="ar"] .stat-num,
:root[lang="ar"] h3,
:root[lang="ar"] h4{
  font-family: "Cairo", sans-serif;
  letter-spacing: -.01em;
  font-weight: 700;
}
:root[lang="ar"] strong,
:root[lang="ar"] .hero-title strong,
:root[lang="ar"] .section-title strong,
:root[lang="ar"] .philosophy p,
:root[lang="ar"] .tm-card blockquote{
  font-family: "Cairo", sans-serif;
  letter-spacing: 0;
}
:root[lang="ar"] .eyebrow,
:root[lang="ar"] .field label,
:root[lang="ar"] .contact-info span,
:root[lang="ar"] .proj-tag{
  letter-spacing: .04em;
}

/* RTL flips */
:root[dir="rtl"] .dir-flip{transform: scaleX(-1)}
:root[dir="rtl"] .nav-links{flex-direction: row-reverse}
:root[dir="rtl"] .marquee-track{animation-name: marquee-rtl}
:root[dir="rtl"] .tl-card:hover{transform: translateX(-4px) !important}
:root[dir="rtl"] .float-1{
  left: auto; right: 4%;
  transform: rotate(4deg);
}
:root[dir="rtl"] .float-2{
  right: auto; left: 4%;
  transform: rotate(-4deg);
}
:root[dir="rtl"] .float-3{
  right: auto; left: 8%;
}
:root[dir="rtl"] .tl-line{left: auto; right: 8px}
:root[dir="rtl"] .timeline{padding-left: 0; padding-right: 40px}
:root[dir="rtl"] .tl-dot{left: auto; right: -40px}
:root[dir="rtl"] .svc-arrow{right: auto; left: 28px}
:root[dir="rtl"] .portrait-badge{
  right: auto; left: -12px;
}
:root[dir="rtl"] .stat-card{text-align: right}
:root[dir="rtl"] .contact-info li{flex-direction: row-reverse; text-align: right}
:root[dir="rtl"] .footer-copy{text-align: left}
:root[dir="rtl"] .nav-cta .pulse,
:root[dir="rtl"] .nav-cta .dot{margin-left: 0}

@media (max-width: 768px){
  :root[dir="rtl"] .timeline{padding-right: 32px; padding-left: 0}
  :root[dir="rtl"] .tl-dot{right: -32px}
  :root[dir="rtl"] .footer-copy{text-align: center}
}

/* =========================================================
   COSMIC BACKGROUND
   ========================================================= */
.cosmic-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(60,40,120,.25), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(34,211,238,.07), transparent 70%),
    var(--bg);
  transition: background .45s ease;
}
:root[data-theme="light"] .cosmic-bg{
  background:
    radial-gradient(ellipse at top, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(34,180,210,.06), transparent 70%),
    var(--bg);
}
.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9), transparent 70%);
}
.orb{
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  animation: drift 22s ease-in-out infinite;
}
.orb-1{width:520px;height:520px;background:var(--orb-1);opacity:var(--orb-1-op);top:-150px;left:-120px;animation-delay:-2s}
.orb-2{width:420px;height:420px;background:var(--orb-2);opacity:var(--orb-2-op);top:40%;right:-100px;animation-delay:-8s}
.orb-3{width:380px;height:380px;background:var(--orb-3);opacity:var(--orb-3-op);bottom:-100px;left:30%;animation-delay:-14s}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.08)}
}
.noise{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:var(--noise-op);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.cursor-glow{
  position: fixed;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,255,.18), transparent 60%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  transform: translate(-50%,-50%);
  transition: opacity .25s ease;
  opacity: 0;
}
:root[data-theme="light"] .cursor-glow{
  background: radial-gradient(circle, rgba(96,68,230,.10), transparent 60%);
  mix-blend-mode: multiply;
}

.scroll-progress{
  position: fixed; top:0; left:0;
  height: 2px;
  background: var(--grad-1);
  z-index: 1000;
  width: 0%;
  box-shadow: 0 0 12px rgba(124,92,255,.6);
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav-wrap{
  position: fixed; top: 0; left:0; right:0;
  z-index: 100;
  padding: 18px 0;
}
.nav-wrap.scrolled{
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.nav{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
grid-template-columns: 1fr auto 1fr;  /* عمود مرن في اليسار + وسط تلقائي + عمود مرن في اليمين */
  align-items: center;
  gap: 20px;
}
.nav-brand{
  display:flex; align-items:center; gap: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  justify-self: start;
}
.nav-logo{
  width: 60px; height: 60px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 3px 15px rgba(124,92,255,.4);
}
.muted{font-weight:400}
.nav-links{
  display: flex; gap: 4px;
  list-style: none; padding: 0; margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
   justify-self: center;
  margin: 0; 
}
.nav-links a{
  display: block;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  transition: all .2s ease;
}
.nav-links a:hover{color: var(--text); background: var(--surface-2)}

.nav-tools{
  display: flex; align-items: center; gap: 8px;
  justify-self: end;
}

.nav-cta{
  display: inline-flex; align-items:center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.25);
  color: #2bb6d1;
}
:root[data-theme="dark"] .nav-cta{color: #a5f3fc}
.nav-cta .dot{
  width: 7px; height: 7px;
  border-radius:50%;
  background: #22d3ee;
  box-shadow: 0 0 12px #22d3ee;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.85)}
}

/* Theme + lang buttons */
.icon-btn, .lang-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.icon-btn{width: 36px; padding: 0}
.icon-btn:hover, .lang-btn:hover{
  border-color: rgba(124,92,255,.4);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(124,92,255,.5);
}
.icon-btn:active, .lang-btn:active{transform: translateY(0)}

.icon-btn svg{
  position: absolute;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.icon-btn .icon-moon{opacity: 1; transform: rotate(0)}
.icon-btn .icon-sun{opacity: 0; transform: rotate(90deg) scale(.7)}
:root[data-theme="light"] .icon-btn .icon-moon{opacity: 0; transform: rotate(-90deg) scale(.7)}
:root[data-theme="light"] .icon-btn .icon-sun{opacity: 1; transform: rotate(0) scale(1); color: #b07d20}

.lang-btn{padding: 0 12px}
.lang-globe{opacity: .7}
.lang-current{
  display: inline-block;
  min-width: 16px;
  text-align: center;
}

/* Subtle ripple ring on theme change */
.icon-btn::after{
  content:'';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(124,92,255,.5);
  opacity: 0;
  pointer-events: none;
}
.icon-btn.ring::after{
  animation: ring 0.7s ease-out;
}
@keyframes ring{
  0%{opacity: 1; transform: scale(1)}
  100%{opacity: 0; transform: scale(1.8)}
}

/* MOBILE TOGGLE (hamburger) */
.nav-toggle{
  display: none;
  grid-column: 1;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.nav-toggle:hover{
  border-color: color-mix(in srgb, var(--indigo) 40%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--indigo) 55%, transparent);
}
.nav-toggle-lines{
  position: relative;
  display: block;
  width: 18px; height: 12px;
}
.nav-toggle-lines span{
  position: absolute;
  left: 0;
  height: 1.6px;
  background: var(--text);
  border-radius: 2px;
  transition: all .35s cubic-bezier(.65,0,.35,1);
  transform-origin: center;
}
.nav-toggle-lines span:nth-child(1){top: 0;    width: 18px}
.nav-toggle-lines span:nth-child(2){top: 5px;  width: 12px; right: 0; left: auto}
.nav-toggle-lines span:nth-child(3){top: 10px; width: 18px}
.nav-toggle:hover .nav-toggle-lines span:nth-child(2){width: 18px}
/* When drawer is open, transform into X */
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1){
  top: 5px; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2){
  opacity: 0; transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3){
  top: 5px; transform: rotate(-45deg);
}

/* =========================================================
   MOBILE DRAWER (premium side panel)
   ========================================================= */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(7,10,20,.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  z-index: 199;
  transition: opacity .4s ease, visibility .4s ease;
}
:root[data-theme="light"] .drawer-backdrop{
  background: rgba(20,25,55,.32);
}
.drawer-backdrop.open{opacity: 1; visibility: visible}

.mobile-drawer{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 88vw);
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid var(--border-strong);
  box-shadow:
    24px 0 60px -20px rgba(0,0,0,.55),
    inset -1px 0 0 rgba(255,255,255,.04);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform .55s cubic-bezier(.65,0,.05,1),
    visibility .55s linear;
  overflow: hidden;
}
:root[dir="rtl"] .mobile-drawer{
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border-strong);
  box-shadow:
    -24px 0 60px -20px rgba(0,0,0,.55),
    inset 1px 0 0 rgba(255,255,255,.04);
  transform: translateX(100%);
}
:root[data-theme="light"] .mobile-drawer{
  box-shadow:
    24px 0 60px -20px rgba(70,80,140,.25),
    inset -1px 0 0 rgba(255,255,255,.6);
}
:root[data-theme="light"][dir="rtl"] .mobile-drawer{
  box-shadow:
    -24px 0 60px -20px rgba(70,80,140,.25),
    inset 1px 0 0 rgba(255,255,255,.6);
}
.mobile-drawer.open{
  transform: translateX(0);
  visibility: visible;
}
:root[dir="rtl"] .mobile-drawer.open{
  transform: translateX(0);
}

/* Decorative glow inside drawer */
.mobile-drawer::before{
  content:'';
  position: absolute;
  top: -120px; left: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 35%, transparent), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.mobile-drawer::after{
  content:'';
  position: absolute;
  bottom: -100px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 60%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
:root[dir="rtl"] .mobile-drawer::before{left: auto; right: -120px}
:root[dir="rtl"] .mobile-drawer::after{right: auto; left: -80px}

.drawer-head{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
}
.drawer-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-brand img{
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  box-shadow: 0 6px 18px -8px rgba(124,92,255,.5);
}
.drawer-brand span{display: flex; flex-direction: column; gap: 2px}
.drawer-brand strong{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.drawer-brand small{
  font-size: 13px;
  color: var(--muted);
  font-style: normal;
  letter-spacing: 0;
}
.drawer-close{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all .25s ease;
}
.drawer-close:hover{
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: rotate(90deg);
}

.drawer-nav{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 16px;
  overflow-y: auto;
}
.drawer-nav a{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--text);
  position: relative;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  border: 1px solid transparent;
}
.drawer-icon{
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  flex-shrink: 0;
  transition:
    background .3s cubic-bezier(.2,.7,.2,1),
    border-color .3s cubic-bezier(.2,.7,.2,1),
    color .3s ease,
    transform .3s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s ease;
}
.drawer-icon svg{
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.drawer-nav a:hover .drawer-icon{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--indigo) 22%, transparent),
    color-mix(in srgb, var(--cyan)   10%, transparent));
  border-color: color-mix(in srgb, var(--indigo) 35%, transparent);
  color: var(--indigo-2);
  transform: translateY(-1px) rotate(-3deg);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--indigo) 55%, transparent);
}

.drawer-nav a:hover .drawer-arrow, .drawer-nav a:hover span{
  border-color: color-mix(in srgb, var(--indigo) 35%, transparent);
  color: var(--indigo-2);
}

.drawer-nav a:hover .drawer-icon svg{
  transform: scale(1.08);
}

.drawer-nav a.active .drawer-icon{
  background: var(--grad-1);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--indigo) 60%, transparent);
}
.drawer-foot{
  position: relative;
  z-index: 1;
  padding: 18px 24px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drawer-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -.005em;
}
.drawer-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse-dot 2s ease-in-out infinite;
}
.drawer-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--grad-1);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  box-shadow:
    0 10px 30px -10px rgba(124,92,255,.55),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}
.drawer-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 14px 36px -10px rgba(124,92,255,.7),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.drawer-socials{
  list-style: none;
  margin: 6px 0 0; padding: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.drawer-socials a{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all .25s ease;
}
.drawer-socials a:hover{
  background: color-mix(in srgb, var(--indigo) 10%, transparent);
  border-color: color-mix(in srgb, var(--indigo) 30%, transparent);
  color: var(--indigo-2);
  transform: translateY(-2px);
}

/* Lock body scroll when drawer open */
body.drawer-open{overflow: hidden}

/* =========================================================
   NAV RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .nav{
    padding: 9px 15px;
    position: relative;
    grid-template-columns: auto 1fr auto;
  }
  .nav-toggle{display: inline-flex; grid-column: 1; justify-self: start;}
  .nav-links{display: none}

  /* الشعار في منتصف الصفحة بالضبط (لا يتأثر بحجم الزر أو الأدوات) */
  .nav-brand{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-column: unset;
    justify-self: unset;
    pointer-events: auto;
    z-index: 1;
  }
  .nav-brand:hover{
    transform: translate(-50%, calc(-50% - 1px));
  }

  .nav-tools{
    grid-column: 3;
    justify-self: end;
  }
  .nav-cta{display: none}

}

@media (max-width: 520px){
  .nav{padding: 8px 13px; gap: 10px}
  .nav-tools{gap: 6px}
  .lang-btn span.lang-current{font-size: 11.5px}
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-in 1s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal-in{
  to{opacity:1; transform: translateY(0)}
}
.in-view{
  opacity: 1 !important;
  transform: translateY(0) !important;
}
[data-observe]{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
}
.hero-inner{
  position: relative;
  text-align: center;
}
.hero-meta{margin-bottom: 32px}
.status-pill{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.status-pill .pulse{
  width: 7px; height:7px; border-radius:50%;
  background: #22d3ee;
  box-shadow: 0 0 10px #22d3ee;
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero-title{
  font-family: "Tajawal", sans-serif;
  font-size: clamp(50px, 8vw, 70px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 28px;
  max-width: 30ch;
  margin-inline: auto;
}
:root[lang="ar"] .hero-title {
  font-size: clamp(40px, 8vw, 60px);
  line-height: 1.3;
}

.hero-title .line{
  display: block;
  background: var(--grad-text-strong);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title strong{
  font-family: "Tajawal", sans-serif;
  font-weight: 500;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .1em;
}

.hero-sub{
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto 40px;
  font-weight: 350;
  line-height: 1.65;
}
.hero-sub strong{color: var(--text); font-weight: 500}

.hero-ctas{
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.btn{
  display: inline-flex;
  align-items:center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.btn.sm{padding: 10px 18px; font-size: 13px}
.btn.full{width: 100%; justify-content: center}
.btn-primary{
  background: var(--grad-1);
  color: white;
  box-shadow:
    0 10px 30px -10px rgba(124,92,255,.6),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 16px 40px -10px rgba(124,92,255,.7),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-ghost{
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover{
  background: var(--surface-2);
  border-color: rgba(124,92,255,.3);
  transform: translateY(-2px);
}

/* HERO STAGE */
.hero-stage{
  position: relative;
  margin: 60px auto 0;
  max-width: 900px;
  height: 340px;
  pointer-events: none;
}
.hero-portrait{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  pointer-events: auto;
}
.portrait-frame{
  position: relative;
  width: 100%; aspect-ratio: 4/5;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(124,92,255,.15), rgba(34,211,238,.05));
  box-shadow:
    var(--shadow-portrait),
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.portrait-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(.95);
}
.portrait-ring{
  position:absolute; inset:-1px;
  border-radius: 26px;
  background: conic-gradient(from 90deg, transparent, rgba(124,92,255,.6), transparent 60%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  animation: spin 12s linear infinite;
  pointer-events:none;
}
@keyframes spin{to{transform: rotate(360deg)}}
.portrait-glow{
  position:absolute;
  inset:-30px;
  border-radius: 40px;
  background: radial-gradient(circle, rgba(124,92,255,.4), transparent 60%);
  z-index: -1;
  filter: blur(40px);
}
.portrait-badge{
  position:absolute;
  bottom:-12px; right:-12px;
  width: 56px; height: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  box-shadow: 0 12px 30px -10px rgba(124,92,255,.6);
}
.portrait-badge img{width:100%;height:100%;object-fit:cover}

.float-card{
  position: absolute;
  background: var(--code-card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 20px 50px -10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: auto;
  animation: float 6s ease-in-out infinite;
}
:root[data-theme="light"] .float-card{
  box-shadow:
    0 20px 40px -15px rgba(70,80,140,.25),
    inset 0 1px 0 rgba(255,255,255,.6);
}
@keyframes float{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-12px)}
}

.float-1{
  left: 4%;
  top: 20%;
  width: 280px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.7;
  animation-delay: -1s;
  transform: rotate(-4deg);
}
.fc-head{
  display:flex; align-items:center; gap:6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.fc-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15)}
.fc-dot.red{background:#ff5f57}
.fc-dot.yellow{background:#febc2e}
.fc-dot.green{background:#28c840}
.fc-title{margin-left:8px; font-size:10.5px; color: var(--muted); font-family: 'Sora', sans-serif}
.fc-body{
  margin:0;
  padding: 12px 14px;
  color: var(--text-soft);
  white-space: pre;
  overflow:hidden;
}
.kw{color:#9d8bff}
.fn{color:#22d3ee}
.str{color:#d18e2e}
:root[data-theme="dark"] .str{color:#ffd58c}
.cls{color:#3b82f6}
:root[data-theme="dark"] .cls{color:#7fb3ff}

.float-2{
  right: 4%; top: 18%;
  width: 220px;
  padding: 16px;
  animation-delay: -3s;
  transform: rotate(4deg);
}
.fc-stat{display:flex; justify-content: space-between; align-items: baseline}
.fc-label{font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em}
.fc-value{font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--text)}
.fc-bar{
  margin: 10px 0;
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow:hidden;
}
.fc-bar i{
  display:block; height:100%;
  width: var(--w,0);
  background: var(--grad-1);
  border-radius: 999px;
}
.fc-row{display:flex; justify-content: space-between; font-size: 11.5px; color: var(--muted)}
.green-txt{color: var(--green)}

.float-3{
  right: 8%; bottom: 12%;
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  animation-delay: -5s;
  color: var(--text);
}
.fc-mini{display:flex; flex-direction: column; gap:4px}
.mini-tag{
  display:inline-block;
  padding: 2px 8px;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.3);
  border-radius: 6px;
  color: var(--cyan);
  font-size: 10px;
  width: fit-content;
}

.hero-marquee{
  margin-top: 80px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display:flex; gap: 32px;
  width: max-content;
  animation: marquee 30s linear infinite;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: -.005em;
}
.marquee-track span:nth-child(odd){color: var(--text)}
@keyframes marquee{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}
@keyframes marquee-rtl{
  from{transform: translateX(0)}
  to{transform: translateX(50%)}
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{
  position: relative;
  padding: 120px 0;
}
.section-head{
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}
.eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
#about .eyebrow svg{
  color: var(--indigo-2);
  margin-top: -0.3em;
}
#skills .eyebrow svg{
  color: var(--indigo-2);
  /* margin-top: -0.1em; */
}
#work .eyebrow svg{
  color: var(--indigo-2);
  margin-top: -0.2em;
}
#services .eyebrow svg{
  color: var(--indigo-2);
}
#journey .eyebrow svg{
  color: var(--indigo-2);
}
#testimonials .eyebrow svg{
  color: var(--indigo-2);
}
#contact .eyebrow svg{
  color: var(--indigo-2);
}
:root[lang="ar"] .section-title {
  font-size: clamp(35px, 7vw, 55px);
  line-height: 1.3;
}

.section-title{
  font-size: clamp(30px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.01;
  margin: 0;
  background: var(--grad-text-strong);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-title strong{
  font-family: "Tajawal", sans-serif;
  font-weight: 500;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .1em;
}

/* =========================================================
   BENTO
   ========================================================= */
.bento{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bento-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  position: relative;
  overflow: hidden;
}
.bento-card::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(124,92,255,.08), transparent 40%);
  opacity:0;
  transition: opacity .3s;
  pointer-events:none;
}
:root[data-theme="light"] .bento-card::before{
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(96,68,230,.06), transparent 40%);
}
.bento-card:hover{
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.bento-card:hover::before{opacity:1}

.span-2{grid-column: span 2}

.bio-card{
  display:flex; flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 280px;
}
.bio-header{
  display:flex; gap: 16px; align-items: center;
}
.bio-avatar{
  width: 64px; height: 64px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
}
.bento-title{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
.bento-sub{
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.bio-text{
  color: var(--text);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}
.bio-tags{display: flex; flex-wrap: wrap; gap: 8px}
.bio-tags span{
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.stat-card{
  display:flex; flex-direction: column;
  justify-content: flex-end;
  position: relative;
  min-height: 200px;
}
.stat-card .stat-num{
  font-family: 'Sora', sans-serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--grad-text-strong);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card .stat-plus,
.stat-card .stat-pct{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 36px;
  color: var(--indigo-2);
  font-weight: 400;
  vertical-align: top;
  margin-left: 4px;
}
.stat-card .stat-label{
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.glow-card{
  background: linear-gradient(180deg, rgba(124,92,255,.12), rgba(124,92,255,.02));
  border-color: rgba(124,92,255,.25);
}
:root[data-theme="light"] .glow-card{
  background: linear-gradient(180deg, rgba(96,68,230,.10), rgba(96,68,230,.02));
  border-color: rgba(96,68,230,.18);
}
.glow-card .stat-num{
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
}

.philosophy{
  display:flex; flex-direction: column;
  gap: 16px;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(124,92,255,.04));
}
:root[data-theme="light"] .philosophy{
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(96,68,230,.05));
}
.philo-quote{
  font-family: 'Instrument Serif', serif;
  font-size: 80px;
  line-height: .5;
  color: var(--indigo-2);
  opacity:.6;
}
.philosophy p{
  font-family: 'Instrument Serif', serif;
  /* font-style: italic; */
  font-size: 20px;
  line-height: 1.45;
  margin: 0;
  color: var(--text);
}
.philo-sign{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================================================
   SKILLS
   ========================================================= */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.skill-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.skill-card::before{
  content:'';
  position:absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from var(--a,0deg), transparent 0deg, rgba(124,92,255,.3) 90deg, transparent 180deg);
  opacity: 0;
  transition: opacity .4s;
  z-index:0;
  animation: rot 8s linear infinite;
}
.skill-card > *{position:relative; z-index:1}
.skill-card:hover{
  transform: translateY(-4px);
  border-color: rgba(124,92,255,.3);
  box-shadow: 0 20px 50px -20px rgba(124,92,255,.4);
}
.skill-card:hover::before{opacity: .15}
@keyframes rot{to{--a: 360deg}}
.skill-card.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(34,211,238,.04));
  border-color: rgba(124,92,255,.3);
}
:root[data-theme="light"] .skill-card.primary{
  background: linear-gradient(135deg, rgba(96,68,230,.10), rgba(34,180,210,.04));
  border-color: rgba(96,68,230,.25);
}
/* =========================================================
   SKILL ICONS — premium 3D-feel logos
   ========================================================= */
.skill-icon{
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;

  /* 3D base: gradient + inner highlight + deep shadow */
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--tech-color, var(--indigo)) 18%, transparent),
      color-mix(in srgb, var(--tech-color, var(--indigo)) 4%,  transparent)),
    linear-gradient(145deg,
      color-mix(in srgb, #ffffff 8%, transparent),
      color-mix(in srgb, #000000 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--tech-color, var(--indigo)) 22%, var(--border));
  box-shadow:
    0 10px 24px -12px color-mix(in srgb, var(--tech-color, var(--indigo)) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -8px 18px -10px rgba(0,0,0,.25);
  transition:
    transform .5s cubic-bezier(.2,.7,.2,1),
    box-shadow .5s cubic-bezier(.2,.7,.2,1),
    border-color .4s ease;
  transform-style: preserve-3d;
  perspective: 600px;
}

/* Subtle top sheen (glass reflection) */
.skill-icon::before{
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 17px 17px 60% 60% / 17px 17px 30% 30%;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events: none;
  opacity: .85;
}
:root[data-theme="light"] .skill-icon::before{
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
}

/* Soft outer glow halo */
.skill-icon::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 0%,
    color-mix(in srgb, var(--tech-color, var(--indigo)) 35%, transparent),
    transparent 70%);
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  transition: opacity .4s ease;
}

/* The actual Devicon logo */
.skill-icon i{
  font-size: 34px;
  line-height: 1;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.28))
    drop-shadow(0 1px 0 rgba(255,255,255,.08));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Hover — full 3D lift, tilt, and glow */
.skill-card:hover .skill-icon{
  transform: translateY(-4px) rotateX(8deg) rotateY(-8deg);
  box-shadow:
    0 18px 38px -14px color-mix(in srgb, var(--tech-color, var(--indigo)) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 18px -10px rgba(0,0,0,.25);
  border-color: color-mix(in srgb, var(--tech-color, var(--indigo)) 50%, transparent);
}
.skill-card:hover .skill-icon::after{opacity: 1}
.skill-card:hover .skill-icon i{
  transform: translateZ(20px) scale(1.06);
}

/* Per-technology accent colors (drives gradient + glow + border) */
.skill-icon[data-tech="php"]{       --tech-color: #777BB4}
.skill-icon[data-tech="laravel"]{   --tech-color: #FF2D20}
.skill-icon[data-tech="tailwind"]{  --tech-color: #38BDF8}
.skill-icon[data-tech="js"]{        --tech-color: #F7DF1E}
.skill-icon[data-tech="mysql"]{     --tech-color: #00758F}
.skill-icon[data-tech="api"]{       --tech-color: #22D3EE}
.skill-icon[data-tech="git"]{       --tech-color: #F05032}
.skill-icon[data-tech="bootstrap"]{ --tech-color: #7952B3}
.skill-icon[data-tech="ajax"]{      --tech-color: #0769AD}

/* Primary card (Laravel) — make it pop harder */
.skill-card.primary .skill-icon{
  background:
    linear-gradient(145deg,
      color-mix(in srgb, #FF2D20 35%, transparent),
      color-mix(in srgb, #FF2D20 12%, transparent)),
    linear-gradient(145deg,
      rgba(255,255,255,.14),
      rgba(0,0,0,.05));
  border-color: color-mix(in srgb, #FF2D20 50%, transparent);
  box-shadow:
    0 14px 32px -12px rgba(255,45,32,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 18px -10px rgba(0,0,0,.3);
}

/* Light theme — softer backgrounds, keep brand colors readable */
:root[data-theme="light"] .skill-icon{
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--tech-color, var(--indigo)) 14%, transparent),
      color-mix(in srgb, var(--tech-color, var(--indigo)) 3%,  transparent)),
    linear-gradient(145deg,
      rgba(255,255,255,.85),
      rgba(255,255,255,.55));
  border-color: color-mix(in srgb, var(--tech-color, var(--indigo)) 30%, var(--border));
  box-shadow:
    0 10px 24px -14px color-mix(in srgb, var(--tech-color, var(--indigo)) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -8px 18px -10px rgba(40,50,90,.08);
}
:root[data-theme="light"] .skill-icon i{
  filter:
    drop-shadow(0 3px 5px rgba(40,50,90,.18))
    drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
.skill-card h4{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  color: var(--text);
}
.skill-card p{
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.6;
}
.skill-meter{
  height: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow:hidden;
}
.skill-meter i{
  display:block;
  height: 100%;
  width: var(--w, 0);
  background: var(--grad-1);
  border-radius: 999px;
}

@property --a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.project{
  /* Stacked layout: image on top, meta below (perfect for narrow cards) */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all .35s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.project:hover{
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.project.featured{
  grid-column: 1 / -1;
}
.project.featured{
  background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(34,211,238,.02));
  border-color: rgba(124,92,255,.2);
  /* The featured card keeps the wider 2-column layout (image | meta) */
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto;
  gap: 32px;
  padding: 26px;
}
:root[data-theme="light"] .project.featured{
  background: linear-gradient(135deg, rgba(96,68,230,.07), rgba(34,180,210,.02));
  border-color: rgba(96,68,230,.18);
}

/* =========================================================
   PROJECT VISUAL — pure cinematic image frame
   ========================================================= */
.project-visual{
  position: relative;
  display: grid;
  place-items: center;
  padding: 36px 28px;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;

  /* Layered ambient background */
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in srgb, var(--indigo) 22%, transparent),
      transparent 55%),
    radial-gradient(110% 100% at 100% 100%,
      color-mix(in srgb, var(--cyan) 16%, transparent),
      transparent 55%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--surface-2) 100%, transparent),
      color-mix(in srgb, var(--surface) 80%, transparent));
  border: 1px solid var(--border);
}

/* Subtle dotted grid texture behind the frame */
.project-visual::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px,
    color-mix(in srgb, var(--text) 6%, transparent) 1px,
    transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="light"] .project-visual::before{opacity: .8}

/* Spotlight that follows the mouse (driven from JS via --mx / --my) */
.project-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--indigo) 28%, transparent),
    transparent 60%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}
.project:hover .project-visual::after{opacity: 1}

/* Decorative blurred orbs */
.proj-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.proj-orb-1{
  width: 240px; height: 240px;
  top: -70px; left: -50px;
  background: color-mix(in srgb, var(--indigo) 60%, transparent);
  opacity: .5;
  animation: orbFloat 11s ease-in-out infinite;
}
.proj-orb-2{
  width: 220px; height: 220px;
  bottom: -60px; right: -40px;
  background: color-mix(in srgb, var(--cyan) 55%, transparent);
  opacity: .42;
  animation: orbFloat 13s ease-in-out infinite reverse;
}
:root[data-theme="light"] .proj-orb-1{opacity: .35}
:root[data-theme="light"] .proj-orb-2{opacity: .30}
@keyframes orbFloat{
  0%,100%{transform: translate(0,0) scale(1)}
  50%{transform: translate(24px,-18px) scale(1.10)}
}

/* The frame holding the screenshot */
.proj-frame{
  position: relative;
  width: 100%;
  max-width: 540px;
  border-radius: 18px;
  background: var(--mock-screen);
  border: 1px solid color-mix(in srgb, var(--indigo) 25%, var(--border-strong));
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.65),
    0 20px 40px -20px rgba(0,0,0,.4),
    0 0 0 1px color-mix(in srgb, var(--indigo) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
  z-index: 1;
  transform-style: preserve-3d;
  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    box-shadow .7s cubic-bezier(.2,.7,.2,1),
    border-color .5s ease;
  will-change: transform;
}
:root[data-theme="light"] .proj-frame{
  border-color: color-mix(in srgb, var(--indigo) 18%, var(--border-strong));
  box-shadow:
    0 40px 80px -30px rgba(70,80,140,.35),
    0 14px 30px -15px rgba(70,80,140,.25),
    0 0 0 1px color-mix(in srgb, var(--indigo) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Animated conic-gradient ring — the “premium” signature */
.proj-ring{
  position: absolute;
  inset: -1.5px;
  border-radius: 19px;
  padding: 1.5px;
  background: conic-gradient(from var(--ang, 0deg),
    transparent 0deg,
    color-mix(in srgb, var(--indigo) 80%, transparent) 55deg,
    color-mix(in srgb, var(--cyan)   80%, transparent) 115deg,
    transparent 195deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ringSpin 6s linear infinite;
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}
:root[data-theme="light"] .proj-ring{opacity: .75}
@property --ang{syntax: '<angle>'; initial-value: 0deg; inherits: false;}
@keyframes ringSpin{to{--ang: 360deg}}

/* Screenshot container */
.proj-screen{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 17px;
  background: var(--surface);
}
.proj-img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter: saturate(1.05) contrast(1.04);
}
.project:hover .proj-img{transform: scale(1.05)}

/* Shimmer placeholder shown until the image loads */
.proj-shimmer{
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(110deg,
      transparent 30%,
      color-mix(in srgb, var(--surface-2) 100%, transparent) 50%,
      transparent 70%),
    color-mix(in srgb, var(--surface) 100%, transparent);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer{
  0%{background-position: 200% 0}
  100%{background-position: -200% 0}
}
.proj-screen.loaded .proj-shimmer{
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

/* Diagonal shine sweep on hover */
.proj-shine{
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 55%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.22) 50%,
    transparent 70%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  transition: left 1.1s cubic-bezier(.2,.7,.2,1);
}
.project:hover .proj-shine{left: 130%}

/* Bottom reflection — gives the frame a "floating glass" feel */
.proj-frame::after{
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -18px;
  height: 20px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--indigo) 50%, transparent),
    transparent 70%);
  filter: blur(14px);
  opacity: .55;
  z-index: 0;
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.project:hover .proj-frame::after{opacity: .85; transform: translateY(4px)}

/* 3D hover lift on the frame */
.project:hover .proj-frame{
  transform: translateY(-8px) rotateX(3deg) rotateY(-3deg);
  border-color: color-mix(in srgb, var(--indigo) 45%, transparent);
  box-shadow:
    0 70px 110px -30px rgba(0,0,0,.7),
    0 30px 50px -20px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb, var(--indigo) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12);
}
:root[data-theme="light"] .project:hover .proj-frame{
  box-shadow:
    0 60px 100px -30px rgba(70,80,140,.45),
    0 24px 40px -20px rgba(70,80,140,.30),
    0 0 0 1px color-mix(in srgb, var(--indigo) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .proj-orb, .proj-ring{animation: none}
  .proj-frame, .proj-img, .proj-shine{transition: none}
}
.tile-grid span{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tile-grid span.hl{
  background: var(--grad-1);
  box-shadow: 0 0 30px rgba(124,92,255,.5);
  border-color: transparent;
}
.tile-card{
  position:absolute;
  bottom: -20px; right: -10px;
  background: var(--mock-screen);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.4);
  transform: rotate(3deg);
}
.tile-card em{color: var(--cyan); font-style: normal; margin-right: 8px}
.tile-card strong{display:block; margin-top: 4px; color: var(--green); font-weight: 500}

.proj-phone{
  width: 200px;
  aspect-ratio: 9/19;
  background: var(--mock-bg);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  position: relative;
  z-index: 1;
}
.phone-screen{
  width: 100%; height: 100%;
  background: var(--mock-screen);
  border-radius: 22px;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.phone-status{
  width: 60px; height: 4px;
  background: var(--border-strong);
  border-radius: 999px;
  margin: 0 auto;
}
.phone-card{
  background: var(--grad-1);
  border-radius: 14px;
  padding: 14px;
  color: white;
}
.phone-card b{font-size: 13px; display: block; margin-bottom: 4px}
.phone-card span{font-size: 10.5px; opacity: .85}
.phone-list{display:grid; gap: 8px}
.phone-list div{
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 10.5px;
  border: 1px solid var(--border);
}
.phone-list i{width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-2)}
.phone-list em{margin-left: auto; font-style: normal; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 9.5px}
.phone-list span{color: var(--text)}

.proj-landing{
  width: 100%; max-width: 360px;
  background: var(--mock-screen);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 24px 20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.5);
}
.land-hero b{
  display:block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.land-hero span{display:block; font-size: 11px; color: var(--muted); margin: 4px 0 14px}
.land-hero em{
  display: inline-block;
  padding: 6px 12px;
  background: var(--grad-1);
  border-radius: 999px;
  font-size: 10.5px;
  color: white;
  font-style: normal;
}
.land-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
}
.land-cards div{
  height: 50px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.project-meta{
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}
.project.featured .project-meta{justify-content: center}

.project:not(.featured) .project-meta h3{
  font-size: clamp(19px, 1.6vw, 24px);
}
.project:not(.featured) .project-meta p{
  font-size: 14px;
  -webkit-line-clamp: 3;
       line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Make the compact image frame smaller so two cards fit nicely */
.project:not(.featured) .project-visual{
  min-height: 240px;
  padding: 24px 20px;
}
.project:not(.featured) .proj-frame{
  max-width: 100%;
}

/* =========================================================
   PROJECT TAG — premium pill with tech icon (Devicon)
   ========================================================= */
.proj-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--indigo-2);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--indigo) 14%, transparent),
    color-mix(in srgb, var(--cyan)   6%,  transparent));
  border: 1px solid color-mix(in srgb, var(--indigo) 28%, transparent);
  width: fit-content;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 4px 12px -6px color-mix(in srgb, var(--indigo) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: all .3s cubic-bezier(.2,.7,.2,1);
}

/* RTL — flip the asymmetric padding */
:root[dir="rtl"] .proj-tag{
  padding: 6px 6px 6px 14px;
}

:root[data-theme="light"] .proj-tag{
  box-shadow:
    0 4px 12px -6px color-mix(in srgb, var(--indigo) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* Devicon badge — small rounded square */
.proj-tag-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, #ffffff 8%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  flex-shrink: 0;
  overflow: visible;
  transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"] .proj-tag-icon{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,20,40,.08);
}
/* Text inside the pill */
.proj-tag-text{
  display: inline-block;
  letter-spacing: .1em;
  line-height: 1;
}

/* Hover state */
.project:hover .proj-tag{
  border-color: color-mix(in srgb, var(--indigo) 55%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--indigo) 22%, transparent),
    color-mix(in srgb, var(--cyan)   12%, transparent));
  box-shadow:
    0 8px 20px -8px color-mix(in srgb, var(--indigo) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.project-meta h3{
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0;
  line-height: 1.1;
  color: var(--text);
}
.project-meta p{
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  font-weight: 500;
}
.proj-stack{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px}
.proj-stack span{
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 950;
}
.proj-actions{display:flex; gap: 8px; margin-top: 4px}
/* =========================================================
   SERVICES — premium cards with thematic SVG backgrounds
   ========================================================= */
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Card shell */
.service-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px 28px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .5s cubic-bezier(.2,.7,.2,1),
    border-color .4s ease,
    box-shadow .5s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* =========================================================
   BACKGROUND LAYERS — the magic happens here
   ========================================================= */
.svc-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Layer 1: soft mesh gradient — per-service color */
.svc-bg-mesh{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 100% 0%,
      var(--svc-color, color-mix(in srgb, var(--indigo) 18%, transparent)),
      transparent 55%),
    radial-gradient(80% 100% at 0% 100%,
      var(--svc-color-2, color-mix(in srgb, var(--cyan) 14%, transparent)),
      transparent 60%);
  opacity: .55;
  transition: opacity .6s ease;
}
:root[data-theme="light"] .svc-bg-mesh{opacity: .65}

/* Layer 2: SVG pattern — the thematic illustration */
.svc-bg-pattern{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--svc-color-pattern, var(--indigo-2));
  opacity: .22;
  transition: opacity .5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"] .svc-bg-pattern{opacity: .18}

/* Layer 3: animated glow blob */
.svc-bg-blob{
  position: absolute;
  width: 220px;
  height: 220px;
  bottom: -80px;
  inset-inline-end: -60px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--svc-color, color-mix(in srgb, var(--indigo) 55%, transparent)),
    transparent 65%);
  filter: blur(40px);
  opacity: .35;
  animation: svcBlobFloat 9s ease-in-out infinite;
  transition: opacity .6s ease;
}
:root[data-theme="light"] .svc-bg-blob{opacity: .25}
@keyframes svcBlobFloat{
  0%,100%{transform: translate(0,0) scale(1)}
  50%{transform: translate(-20px,-15px) scale(1.15)}
}

/* =========================================================
   PER-SERVICE COLOR THEMING
   ========================================================= */
.service-card[data-svc="fullstack"]{
  --svc-color:         color-mix(in srgb, #7c5cff 20%, transparent);
  --svc-color-2:       color-mix(in srgb, #3b82f6 14%, transparent);
  --svc-color-pattern: #9d8bff;
}
.service-card[data-svc="laravel"]{
  --svc-color:         color-mix(in srgb, #FF2D20 16%, transparent);
  --svc-color-2:       color-mix(in srgb, #f97316 10%, transparent);
  --svc-color-pattern: #FF6B5C;
}
.service-card[data-svc="dashboard"]{
  --svc-color:         color-mix(in srgb, #22d3ee 18%, transparent);
  --svc-color-2:       color-mix(in srgb, #3b82f6 12%, transparent);
  --svc-color-pattern: #67e8f9;
}
.service-card[data-svc="api"]{
  --svc-color:         color-mix(in srgb, #10b981 16%, transparent);
  --svc-color-2:       color-mix(in srgb, #22d3ee 12%, transparent);
  --svc-color-pattern: #34d399;
}
.service-card[data-svc="ui"]{
  --svc-color:         color-mix(in srgb, #ec4899 16%, transparent);
  --svc-color-2:       color-mix(in srgb, #7c5cff 12%, transparent);
  --svc-color-pattern: #f472b6;
}
.service-card[data-svc="landing"]{
  --svc-color:         color-mix(in srgb, #f59e0b 16%, transparent);
  --svc-color-2:       color-mix(in srgb, #ec4899 12%, transparent);
  --svc-color-pattern: #fbbf24;
}

/* =========================================================
   CARD CONTENT — sits above the bg layers
   ========================================================= */
.service-card > .svc-icon,
/* .service-card > .svc-num, */
.service-card > h4,
.service-card > p{
  position: relative;
  z-index: 2;
}

/* Icon container — refined for the new look */
.svc-icon{
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  margin-bottom: 22px;
  color: var(--indigo-2);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 20%, transparent),
      color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 4%,  transparent)),
    linear-gradient(145deg,
      rgba(255,255,255,.10),
      rgba(0,0,0,.04));
  border: 1px solid color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 35%, var(--border-strong));
  box-shadow:
    0 12px 24px -12px color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -6px 14px -8px rgba(0,0,0,.22);
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    box-shadow .55s cubic-bezier(.2,.7,.2,1),
    background .4s ease;
  transform-style: preserve-3d;
  perspective: 600px;
}
:root[data-theme="light"] .svc-icon{
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 14%, transparent),
      color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 4%,  transparent)),
    linear-gradient(145deg,
      rgba(255,255,255,.85),
      rgba(255,255,255,.5));
  box-shadow:
    0 10px 22px -12px color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.svc-icon::before{
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 14px 14px 60% 60% / 14px 14px 30% 30%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events: none;
  opacity: .85;
}
:root[data-theme="light"] .svc-icon::before{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
}

.svc-icon svg{
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.28))
    drop-shadow(0 1px 0 rgba(255,255,255,.10));
  transition: transform .5s cubic-bezier(.2,.7,.2,1), color .4s ease;
}

/* Number badge */
.svc-num{
  position: absolute;
  top: 28px;
  inset-inline-end: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted-2);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  transition: all .3s ease;
}

/* Heading + paragraph stay clean */
/* Heading + paragraph stay clean */
.service-card h4{
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.3;
  padding-inline-end: 56px; /* leave room for the /XX badge */
}
.service-card p{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  font-weight: 300;
}

/* =========================================================
   HOVER STATE — backgrounds wake up, icon flies in 3D
   ========================================================= */
.service-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 40%, transparent);
  box-shadow:
    0 30px 60px -25px color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--svc-color-pattern, var(--indigo)) 25%, transparent);
}

/* Backgrounds intensify */
.service-card:hover .svc-bg-mesh{opacity: .85}
.service-card:hover .svc-bg-pattern{
  opacity: .4;
  transform: scale(1.06);
}
.service-card:hover .svc-bg-blob{opacity: .6}

:root[data-theme="light"] .service-card:hover .svc-bg-mesh{opacity: .95}
:root[data-theme="light"] .service-card:hover .svc-bg-pattern{opacity: .28}

/* Icon — 3D lift */
.service-card:hover .svc-icon{
  transform: translateY(-4px) rotateX(10deg) rotateY(-10deg);
  background:
    linear-gradient(145deg,
      var(--svc-color-pattern),
      color-mix(in srgb, var(--svc-color-pattern) 60%, #fff)),
    linear-gradient(145deg,
      rgba(255,255,255,.16),
      rgba(0,0,0,.05));
  border-color: var(--svc-color-pattern);
  box-shadow:
    0 22px 38px -16px color-mix(in srgb, var(--svc-color-pattern) 75%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.service-card:hover .svc-icon svg{
  transform: translateZ(22px) scale(1.12) rotate(-6deg);
  color: #fff;
}

.service-card:hover .svc-num{
  background: color-mix(in srgb, var(--svc-color-pattern) 15%, transparent);
  border-color: color-mix(in srgb, var(--svc-color-pattern) 40%, transparent);
  color: var(--svc-color-pattern);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .services-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 600px){
  .services-grid{grid-template-columns: 1fr; gap: 14px}
  .service-card{padding: 28px 24px; min-height: 240px}
  .svc-bg-pattern{opacity: .15}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .svc-bg-blob{animation: none}
  .service-card, .svc-icon, .svc-icon svg, .svc-bg-pattern{transition: none}
}

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 40px;
}
.tl-line{
  position:absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(124,92,255,.4) 10%,
    rgba(124,92,255,.4) 90%,
    transparent 100%);
}
.tl-item{position: relative; padding-bottom: 40px}
.tl-item:last-child{padding-bottom: 0}
.tl-dot{
  position: absolute;
  left: -40px;
  top: 10px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(124,92,255,.5);
  display: grid;
  place-items: center;
}
.tl-dot::after{
  content:'';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-1);
  box-shadow: 0 0 16px rgba(124,92,255,.8);
}
.tl-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all .3s ease;
}
.tl-card:hover{
  border-color: var(--border-strong);
  transform: translateX(4px);
}
.tl-year{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--indigo-2);
  letter-spacing: .04em;
}
.tl-card h4{
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 6px 0 8px;
  color: var(--text);
}
.tl-card p{
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.65;
  font-weight: 300;
}
/* =========================================================
   TESTIMONIALS — premium client reviews
   ========================================================= */

/* Trust stats bar above the cards */
.tm-stats{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 22px 32px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--indigo) 10%, transparent),
      color-mix(in srgb, var(--cyan)   4%,  transparent)),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--indigo) 22%, var(--border-strong));
  border-radius: 20px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 14px 30px -16px color-mix(in srgb, var(--indigo) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
  flex-wrap: wrap;
}
:root[data-theme="light"] .tm-stats{
  box-shadow:
    0 14px 30px -16px color-mix(in srgb, var(--indigo) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.tm-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  flex: 1;
  min-width: 120px;
}
.tm-stat-num{
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.tm-stat-label{
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .04em;
}
.tm-stars{
  display: inline-flex;
  gap: 2px;
  color: #fbbf24;
  filter: drop-shadow(0 1px 2px rgba(251,191,36,.4));
}
.tm-stat-divider{
  width: 1px;
  height: 38px;
  background: var(--border);
  flex-shrink: 0;
}

/* The cards grid */
.testimonials{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Individual testimonial card */
.tm-card{
  position: relative;
  margin: 0;
  padding: 36px 32px 28px;
  border-radius: 22px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 100%, transparent),
      var(--surface));
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition:
    transform .5s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .5s ease;
  overflow: hidden;
  isolation: isolate;
}

/* Decorative gradient blob in the corner */
.tm-card::before{
  content: "";
  position: absolute;
  top: -80px;
  inset-inline-end: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--indigo) 35%, transparent),
    transparent 65%);
  filter: blur(30px);
  z-index: 0;
  opacity: .55;
  transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.tm-card::after{
  content: "";
  position: absolute;
  bottom: -60px;
  inset-inline-start: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--cyan) 25%, transparent),
    transparent 65%);
  filter: blur(28px);
  z-index: 0;
  opacity: .4;
  transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}

:root[data-theme="light"] .tm-quote-mark{
  color: color-mix(in srgb, var(--indigo) 20%, transparent);
}

/* Stars at top */
.tm-stars-row{
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 3px;
  color: #fbbf24;
  margin-bottom: 18px;
  filter: drop-shadow(0 2px 4px rgba(251,191,36,.35));
}
.tm-stars-row svg{
  animation: starPop .5s cubic-bezier(.5,1.7,.5,1) backwards;
}
.tm-stars-row svg:nth-child(1){animation-delay: .05s}
.tm-stars-row svg:nth-child(2){animation-delay: .15s}
.tm-stars-row svg:nth-child(3){animation-delay: .25s}
.tm-stars-row svg:nth-child(4){animation-delay: .35s}
.tm-stars-row svg:nth-child(5){animation-delay: .45s}
@keyframes starPop{
  from{opacity: 0; transform: scale(0) rotate(-180deg)}
  to{opacity: 1; transform: scale(1) rotate(0)}
}

/* The quote text */
.tm-card blockquote{
  position: relative;
  z-index: 2;
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  font-weight: 300;
  font-family: 'Tajawal', sans-serif;
  font-style: normal;
  letter-spacing: -.005em;
}
:root[lang="ar"] .tm-card blockquote{
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
}

/* Author block */
.tm-card figcaption{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.tm-avatar{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow:
    0 6px 16px -6px rgba(124,92,255,.5),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.tm-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tm-info strong{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
}
.tm-info > span{
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0;
}

/* "via Upwork" badge */
.tm-platform{
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 10px;
  width: fit-content;
  font-size: 10.5px !important;
  font-weight: 500;
  color: #14a800 !important;
  background: color-mix(in srgb, #14a800 10%, transparent);
  border: 1px solid color-mix(in srgb, #14a800 25%, transparent);
  border-radius: 999px;
  letter-spacing: .03em;
}
.tm-platform svg{
  color: #14a800;
  flex-shrink: 0;
}

/* =========================================================
   HOVER STATE
   ========================================================= */
.tm-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--indigo) 35%, transparent);
  box-shadow:
    0 30px 50px -20px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in srgb, var(--indigo) 18%, transparent);
}
:root[data-theme="light"] .tm-card:hover{
  box-shadow:
    0 30px 50px -20px rgba(70,80,140,.30),
    0 0 0 1px color-mix(in srgb, var(--indigo) 22%, transparent);
}
.tm-card:hover::before{
  opacity: .85;
  transform: translate(-20px, 20px) scale(1.15);
}
.tm-card:hover::after{
  opacity: .7;
  transform: translate(20px, -20px) scale(1.15);
}
.tm-card:hover .tm-quote-mark{
  transform: scale(1.08) rotate(-6deg);
  color: color-mix(in srgb, var(--indigo) 50%, transparent);
}
.tm-card:hover .tm-avatar{
  transform: scale(1.08) rotate(-4deg);
  box-shadow:
    0 10px 22px -6px rgba(124,92,255,.65),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 880px){
  .tm-stats{
    gap: 16px;
    padding: 18px 22px;
  }
  .tm-stat-num{font-size: 22px}
  .testimonials{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tm-card{padding: 30px 24px 24px}
  .tm-quote-mark{font-size: 90px; top: 10px}
}
@media (max-width: 480px){
  .tm-stat-divider{display: none}
  .tm-stat{min-width: 100px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tm-stars-row svg{animation: none}
  .tm-card, .tm-card::before, .tm-card::after, .tm-quote-mark, .tm-avatar{
    transition: none;
  }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(34,211,238,.02));
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  padding: 60px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="light"] .contact-wrap{
  background: linear-gradient(135deg, rgba(96,68,230,.06), rgba(34,180,210,.02));
  box-shadow:
    0 40px 100px -30px rgba(70,80,140,.25),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.contact-left .eyebrow{margin-bottom: 16px}
.contact-left .section-title{
  text-align: left;
  font-size: clamp(28px, 3.5vw, 44px);
}
:root[dir="rtl"] .contact-left .section-title{text-align: right}
.contact-lead{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 24px 0 32px;
  font-weight: 500;
  max-width: 400px;
}
.contact-info{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.contact-info li{display: flex; align-items: center; gap: 24px}
.contact-info span{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
  min-width: 80px;
}
.contact-info a{
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
  transition: color .2s;
}
.contact-info a[href]:hover{color: var(--indigo-2)}

.contact-form{display: grid; gap: 16px}
.field{display: grid; gap: 8px}
.field label{
  font-size: 12px;
  font-weight: 55 0;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}
.field input,
.field textarea{
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  resize: vertical;
  transition: all .2s ease;
}
:root[lang="ar"] .field input,
:root[lang="ar"] .field textarea{font-family: 'Cairo', sans-serif}
.field input::placeholder,
.field textarea::placeholder{color: var(--muted-2)}

/* =========================================================
   CONTACT FORM — premium validation
   ========================================================= */

/* Wrapper around input — needed for icons inside */
.field-input-wrap{
  position: relative;
}

/* Success checkmark — hidden by default, animates in on valid */
.field-check{
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  transform: translateY(-50%) scale(.5);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.5,1.7,.5,1);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--green) 50%, transparent);
}
.field[data-field="message"] .field-check{
  top: 16px;
  transform: scale(.5);
}
.field.is-valid .field-check{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.field[data-field="message"].is-valid .field-check{
  transform: scale(1);
}

/* Character counter (textarea only) */
.field-counter{
  position: absolute;
  bottom: 8px;
  inset-inline-end: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted-2);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  padding: 2px 7px;
  border-radius: 5px;
  pointer-events: none;
  transition: color .3s ease;
}
.field.is-near-limit .field-counter{color: #f59e0b}
.field.is-over-limit .field-counter{color: #ef4444}

/* Adjust input padding to make room for the check icon */
.field input,
.field textarea{
  padding-inline-end: 44px !important;
  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    color .25s ease;
}

/* =========================================================
   FIELD STATES
   ========================================================= */

/* Focus state */
.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--indigo) 60%, transparent);
  background: color-mix(in srgb, var(--indigo) 6%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 12%, transparent);
}

/* Valid state */
.field.is-valid input,
.field.is-valid textarea{
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
}
.field.is-valid input:focus,
.field.is-valid textarea:focus{
  border-color: color-mix(in srgb, var(--green) 65%, transparent);
  background: color-mix(in srgb, var(--green) 4%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
}

/* Error state */
.field.is-invalid input,
.field.is-invalid textarea{
  border-color: color-mix(in srgb, #ef4444 55%, transparent);
  background: color-mix(in srgb, #ef4444 5%, var(--surface));
  animation: shakeField .45s cubic-bezier(.36,.07,.19,.97);
}
.field.is-invalid input:focus,
.field.is-invalid textarea:focus{
  box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 14%, transparent);
}
@keyframes shakeField{
  10%, 90%{transform: translateX(-2px)}
  20%, 80%{transform: translateX(3px)}
  30%, 50%, 70%{transform: translateX(-5px)}
  40%, 60%{transform: translateX(5px)}
}

/* Error message — appears below the field */
.field-error{
  display: none;
  margin: 8px 0 0;
  padding-inline-start: 22px;
  font-size: 13px;
  line-height: 1.5;
  color: #ef4444;
  position: relative;
  letter-spacing: 0;
  font-weight: 500;
  animation: errorSlide .35s cubic-bezier(.2,.7,.2,1);
}
.field-error::before{
  content: '';
  position: absolute;
  top: 4px;
  inset-inline-start: 0;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.field.is-invalid .field-error{display: block}
@keyframes errorSlide{
  from{opacity: 0; transform: translateY(-4px)}
  to{opacity: 1; transform: translateY(0)}
}

/* =========================================================
   SUBMIT BUTTON — multi-state
   ========================================================= */
.btn.full#formSubmit{
  position: relative;
  min-height: 50px;
  overflow: hidden;
  transition: background .35s ease, transform .25s ease;
}

.btn-state{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  transform: translateY(8px);
}
.btn.full#formSubmit .btn-state-default{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Loading state */
.btn.is-loading .btn-state-default{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
}
.btn.is-loading .btn-state-loading{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn.is-loading{pointer-events: none}

.btn-spinner{
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinForm .7s linear infinite;
}
@keyframes spinForm{to{transform: rotate(360deg)}}

/* Success state */
.btn.is-success .btn-state-default,
.btn.is-success .btn-state-loading{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
}
.btn.is-success .btn-state-success{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn.is-success{
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 10px 30px -10px rgba(16,185,129,.6) !important;
  pointer-events: none;
}

/* =========================================================
   FORM-LEVEL MESSAGE (success notice)
   ========================================================= */
.form-note{
  margin: 0;
  padding: 0;
  min-height: 0;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s ease, transform .4s ease, padding .4s ease, min-height .4s ease;
  overflow: hidden;
}
.form-note.show{
  opacity: 1;
  transform: translateY(0);
  padding: 16px 20px;
  min-height: 50px;
}
.form-note.is-success{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  border-radius: 12px;
  font-weight: 500;
}
.form-note.is-error{
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 8%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 25%, transparent);
  border-radius: 12px;
}
.form-note svg{flex-shrink: 0}


/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top: 1px solid var(--border);
  padding: 60px 0 40px;
  position: relative;
}
.footer-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
}
.footer-brand{display: flex; align-items: center; gap: 14px}
.footer-brand img{
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
}
.footer-brand strong{display: block; font-size: 15px; font-weight: 600; color: var(--text)}
.footer-brand span{font-size: 12.5px; color: var(--muted)}
.socials{
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 8px;
}
.socials a{
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all .25s ease;
}
.socials a:hover{
  background: rgba(124,92,255,.1);
  border-color: rgba(124,92,255,.3);
  color: var(--indigo-2);
  transform: translateY(-2px);
}
.footer-copy{text-align: right; display: grid; gap: 4px}
.footer-copy span{font-size: 12.5px; color: var(--muted)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .bento{grid-template-columns: repeat(2, 1fr)}
    .hero-title{font-size: 55px}
    :root[lang="ar"] .hero-title {
  font-size: 55px
}
  .span-2{grid-column: span 2}
  .skills-grid{grid-template-columns: repeat(2, 1fr)}
  .services-grid{grid-template-columns: repeat(2, 1fr)}
  .project{grid-template-columns: 1fr; gap: 20px}
  .testimonials{grid-template-columns: 1fr}
  .contact-wrap{grid-template-columns: 1fr; gap: 40px; padding: 40px}
  .nav-links{display: none}
}
@media (max-width: 768px){
  .container{padding: 0 20px}
  .section{padding: 80px 0}
  .nav-cta{display: none}
  .nav-toggle{display: block}
  .nav-tools{gap: 6px}
  .hero{padding: 120px 0 60px}
  .hero-stage{height: 380px; margin-top: 40px}
  .hero-portrait{width: 200px}
  .float-1{
    width: 200px;
    left: -10px;
    top: 10%;
    font-size: 9.5px;
    transform: rotate(-6deg) scale(.9);
  }
    .hero-title{font-size: 45px}
        :root[lang="ar"] .hero-title {
  font-size: 45px
}
  .float-2{
    width: 170px;
    right: -10px;
    top: 8%;
    padding: 12px;
    transform: rotate(6deg) scale(.9);
  }
  .float-3{display: none}
  .bento{grid-template-columns: 1fr}
  .span-2{grid-column: span 1}
  .skills-grid{grid-template-columns: 1fr}
  .services-grid{grid-template-columns: 1fr}
  .timeline{padding-left: 32px}
  .tl-dot{left: -32px}
  .footer-inner{grid-template-columns: 1fr; text-align: center; justify-items: center}
  .footer-copy{text-align: center}
  .contact-wrap{padding: 28px 20px}
  .contact-left .section-title{text-align: center}
  :root[dir="rtl"] .contact-left .section-title{text-align: center}
}
@media (max-width: 480px){
  .hero-title{font-size: 35px}
      :root[lang="ar"] .hero-title {
  font-size: 35px
}
  .hero-ctas{flex-direction: column; width: 100%}
  .hero-ctas .btn{width: 100%; justify-content: center}
  .float-1, .float-2{display: none}
  .hero-stage{height: 320px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}
@media (max-width: 1179px){
  .projects{grid-template-columns: 1fr}
  .project.featured{grid-column: auto}

  /* On tablet, all cards (including featured) keep image | meta layout */
  .project{
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    padding: 24px;
  }
  .project:not(.featured) .project-meta h3{
    font-size: clamp(20px, 2.2vw, 26px);
  }
  .project:not(.featured) .project-meta p{
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
  .project:not(.featured) .project-visual{min-height: 280px}
}

/* Mobile — single column, image on top */
@media (max-width: 768px){
  .projects{gap: 20px}
  .project,
  .project.featured{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    padding: 18px;
  }
  .project-meta{justify-content: flex-start}
  .project:not(.featured) .project-visual,
  .project.featured .project-visual{min-height: 220px; padding: 22px 18px}
  .project-meta h3{font-size: clamp(20px, 5vw, 24px) !important}
  .project:not(.featured) .project-meta p{
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
}

/* =========================================================
   WhatsApp Button — Premium & Themed
   ========================================================= */

.wa-float {
  position: fixed;
  bottom: 28px;
  inset-inline-end: 28px;  /* RTL-aware (right in LTR, left in RTL) */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(145deg, #25D366, #128C7E);
  background: linear-gradient(145deg,
    color-mix(in srgb, #25D366 90%, var(--indigo)),
    color-mix(in srgb, #128C7E 85%, var(--indigo))
  );
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4),
              0 0 0 0 rgba(37, 211, 102, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  z-index: 1000;
  animation: wa-pulse 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Pulse animation with glow */
@keyframes wa-pulse {
  0% {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Outer ripple ring */
.wa-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(37, 211, 102, 0.35),
    transparent 70%);
  top: 0;
  left: 0;
  animation: wa-ripple 2s infinite ease-out;
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

@keyframes wa-ripple {
  0% {
    transform: scale(0.95);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Icon styling */
.wa-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wa-icon {
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease;
}

/* Hover effects — matches site's interactive style */
.wa-float:hover {
  transform: scale(1.08) rotate(3deg);
  background: linear-gradient(145deg, #2ecc71, #1abc9c);
  background: linear-gradient(145deg,
    color-mix(in srgb, #2ecc71 90%, var(--indigo-2)),
    color-mix(in srgb, #1abc9c 85%, var(--indigo))
  );
  box-shadow: 0 18px 28px -10px rgba(0, 0, 0, 0.5),
              0 0 0 6px rgba(37, 211, 102, 0.25);
  animation: none;
  border-color: rgba(255,255,255,0.2);
}
.wa-float:hover .wa-icon {
  transform: scale(1.05);
}

/* Tooltip text — glassmorphism style */
.wa-tooltip {
  position: absolute;
  inset-inline-end: 78px;  /* RTL-aware (right in LTR, left in RTL) */
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px);
  padding: 8px 16px;
  border-radius: 40px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  letter-spacing: 0.3px;
  z-index: 1001;
}
:root[dir="rtl"] .wa-tooltip {
  transform: translateX(-12px);
}
.wa-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}
:root[dir="rtl"] .wa-float:hover .wa-tooltip {
  transform: translateX(0);
}

/* Light theme adjustments */
:root[data-theme="light"] .wa-float {
  background: linear-gradient(145deg,
    color-mix(in srgb, #25D366 85%, var(--indigo)),
    color-mix(in srgb, #128C7E 80%, var(--indigo))
  );
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15),
              0 0 0 0 rgba(37, 211, 102, 0.4);
  border: 1px solid rgba(255,255,255,0.5);
}
:root[data-theme="light"] .wa-ripple {
  background: radial-gradient(circle,
    rgba(37, 211, 102, 0.25),
    transparent 70%);
}
:root[data-theme="light"] .wa-tooltip {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid rgba(124,92,255,0.2);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .wa-float {
    bottom: 20px;
    inset-inline-end: 20px;
    width: 56px;
    height: 56px;
  }
  .wa-tooltip {
    display: none;  /* cleaner on small screens, but you can keep if needed */
  }
  .wa-icon {
    width: 24px;
    height: 24px;
  }
}

/* Ensure it doesn't conflict with mobile drawer (z-index) */
@media (max-width: 768px) {
  .wa-float {
    z-index: 99;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-ripple {
    animation: none;
  }
  .wa-float:hover {
    transform: scale(1.05);
  }
}