/* =========================================================
   Mohamed El Adly — portfolio
   Design tokens
   ========================================================= */
:root{
  --bg:#0B0F14;
  --bg-panel:#10161D;
  --bg-panel-2:#141B23;
  --border:#1E2731;
  --text:#E8EAED;
  --text-dim:#8A93A0;
  --accent:#FFB454;
  --accent-2:#5EEAD4;
  --danger:#FF6B6B;
  --ok:#5EEAD4;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --font-ar:'Cairo', sans-serif;

  --radius:10px;
  --radius-lg:16px;
  --maxw:1180px;
  --dur:.25s;

  /* depth / glass layer added for the 3D experience */
  --glass-bg:rgba(16,22,29,.55);
  --glass-border:rgba(232,234,237,.08);
  --glow-accent:rgba(255,180,84,.35);
  --glow-accent-2:rgba(94,234,212,.28);
  --grid-line:rgba(232,234,237,.045);
  --ease-premium:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* =========================================================
   3D / premium layer — see also main.js, hero-scene.js, motion.js
   Everything here degrades to plain flat panels if JS/WebGL is
   unavailable: the base styles below already look complete on
   their own before any script touches them.
   ========================================================= */

/* perspective host for any tilting card group */
.cards, .projects-grid, .pricing-grid, .testimonials-grid{ perspective:1400px; }

/* cursor-reactive highlight, opacity toggled by JS; pure CSS no-op if JS never runs */
.card, .project-card, .price-card, .testimonial-card{ position:relative; }
.card::before, .project-card::before, .price-card::before, .testimonial-card::before{
  content:'';
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,-20%), var(--glow-accent-2), transparent 62%);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.card.tilt-active::before, .project-card.tilt-active::before, .price-card.tilt-active::before, .testimonial-card.tilt-active::before{ opacity:1; }
.card > *, .project-card > *, .price-card > *, .testimonial-card > *{ position:relative; }
.card, .project-card, .price-card, .testimonial-card{ transform-style:preserve-3d; will-change:transform; }

@keyframes badgeFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.price-badge{ animation:badgeFloat 3.6s ease-in-out infinite; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

html[dir="rtl"] body{ font-family:var(--font-ar); }
html[dir="rtl"] .mono{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{ font-family:var(--font-ar); }

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}

h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing:-0.01em;}
h1{font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.12;}
h2{font-size:clamp(1.6rem, 3vw, 2.3rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em; color:var(--text-dim);}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.mono{font-family:var(--font-mono); letter-spacing:-0.01em;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85em 1.6em; border-radius:8px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform var(--dur), background var(--dur), border-color var(--dur), color var(--dur);
}
.btn-primary{background:var(--accent); color:#14100a;}
.btn-primary:hover{transform:translateY(-2px); background:#ffc172;}
.btn-outline{border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--border); color:var(--text); padding:.6em 1.2em; font-size:.88rem;}
.btn-ghost:hover{border-color:var(--accent-2); color:var(--accent-2);}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(11,15,20,.72); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--glass-border);
  transition:box-shadow .3s ease, background-color .3s ease;
}
.nav.is-scrolled{
  background:rgba(11,15,20,.88);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; gap:1.5rem;
}
.logo{font-family:var(--font-display); font-weight:600; font-size:1.05rem; white-space:nowrap;}

.tabs{display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  display:flex; align-items:center;
  font-size:.9rem; color:var(--text-dim);
  padding:.55em .85em; border-radius:6px 6px 0 0; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color var(--dur), background var(--dur), border-color var(--dur);
}
.tab:hover{color:var(--text); background:var(--bg-panel);}
.tab.active{color:var(--text); border-color:var(--accent); background:var(--bg-panel);}

.nav-actions{display:flex; align-items:center; gap:.6rem;}
.lang-switch{
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  border-radius:6px; padding:.5em .8em; font-size:.82rem; cursor:pointer;
  transition:border-color var(--dur), color var(--dur);
}
.lang-switch:hover{border-color:var(--accent-2); color:var(--accent-2);}
.nav-cta{display:none;}
@media (min-width:860px){ .nav-cta{display:inline-flex;} }

.burger{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  width:34px; height:34px; background:none; border:1px solid var(--border); border-radius:6px; cursor:pointer;
}
.burger span{width:16px; height:1.5px; background:var(--text); margin:0 auto; transition:transform var(--dur), opacity var(--dur);}
@media (min-width:860px){ .burger{display:none;} .tabs{display:flex;} }
@media (max-width:859px){ .tabs{display:none;} .nav-actions{margin-inline-start:auto;} }

.mobile-menu{
  position:fixed; inset:0; top:60px; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; padding:1rem 1.5rem; gap:.2rem;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity var(--dur), transform var(--dur);
}
.mobile-menu.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.mobile-menu a{padding:1em .2em; border-bottom:1px solid var(--border); font-size:1rem;}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; padding:4.5rem 1.5rem 3.5rem; overflow:hidden;
  isolation:isolate;
}
/* static 2D fallback — always present, so no-JS / no-WebGL / reduced-motion visitors
   get a complete, deliberate background rather than a blank one */
.hero::before{
  content:''; position:absolute; inset:-10% -10%; z-index:-2;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,180,84,.14), transparent 42%),
    radial-gradient(circle at 82% 68%, rgba(94,234,212,.11), transparent 46%),
    var(--bg);
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
}
.hero-scene{
  position:absolute; inset:0; z-index:-1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-scene canvas{
  width:100%; height:100%; opacity:0;
  transition:opacity 1.1s var(--ease-premium);
}
html.has-3d-hero .hero-scene canvas.is-ready{ opacity:1; }

/* full-page persistent 3D world (mid/high-tier devices only — see main.js).
   Sits behind literally everything, including the body background, and is
   only ever visible once has-3d-world is set and its canvas has painted. */
.world-scene{
  position:fixed; inset:0; z-index:-100;
  pointer-events:none;
}
.world-scene canvas{
  width:100%; height:100%; display:block; opacity:0;
  transition:opacity 1.6s var(--ease-premium);
}
html.has-3d-world .world-scene canvas.is-ready{ opacity:1; }

/* once the real 3D world is running, let it show through: drop the hero's
   flat 2D fallback and make section backdrops translucent instead of solid.
   Cards/panels/forms keep their own solid backgrounds for readability. */
html.has-3d-world .hero::before,
html.has-3d-world .hero::after{ opacity:0; transition:opacity .8s ease; }
html.has-3d-world .section-alt{ background-color:rgba(16,22,29,.82); }
html.has-3d-world .section:not(.section-alt){ background-color:rgba(11,15,20,.4); }

/* DOM-to-world depth sync (see spatial-dom.js): each section's content
   wrapper gets real perspective/rotate/translateZ driven by how close it is
   to screen-centre plus pointer position, so it reads as a location the
   camera is passing through rather than a flat card over a WebGL backdrop.
   The custom properties default to an identity transform, so this rule is a
   safe no-op until spatial-dom.js is actually running. */
html.has-3d-world .hero-inner,
html.has-3d-world .about-grid,
html.has-3d-world .cards,
html.has-3d-world .why-grid,
html.has-3d-world .projects-grid,
html.has-3d-world .pricing-grid,
html.has-3d-world .testimonials-grid,
html.has-3d-world .faq-list,
html.has-3d-world .contact-grid{
  transform:perspective(1600px) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg)) translateZ(var(--depth-z,0px)) scale(var(--depth-scale,1));
  transition:transform .12s linear;
  will-change:transform;
}

/* glass panels: once the world is visible behind them, cards/forms/panels
   read as floating consoles in the same space instead of opaque flat boxes */
html.has-3d-world .card,
html.has-3d-world .project-card,
html.has-3d-world .price-card,
html.has-3d-world .testimonial-card,
html.has-3d-world .contact-form,
html.has-3d-world .info-block,
html.has-3d-world .faq-item{
  background-color:var(--glass-bg);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-color:var(--glass-border);
}

.hero-inner{
  max-width:840px; margin:0 auto; text-align:center;
}
.hero-cta{justify-content:center;}
.hero-stats{justify-content:center;}

.hero-sub{font-size:1.06rem; max-width:46ch; margin-left:auto; margin-right:auto;}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap; margin:1.6rem 0 2.2rem;}
.hero-stats{display:flex; gap:2.2rem; flex-wrap:wrap;}
.stat{display:flex; flex-direction:column;}
.stat-num{font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--accent);}
.stat-label{font-size:.82rem; color:var(--text-dim);}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding:5rem 1.5rem; max-width:var(--maxw); margin:0 auto;}
.section-alt{
  background:var(--bg-panel); max-width:none; padding-left:1.5rem; padding-right:1.5rem;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:42px 42px;
}
.section-alt > *{max-width:var(--maxw); margin-left:auto; margin-right:auto;}
.section-sub{max-width:56ch; margin-top:0; margin-bottom:2rem;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* about */
.about-grid{display:grid; grid-template-columns:.32fr .68fr; gap:3rem; align-items:start;}
@media (max-width:760px){ .about-grid{grid-template-columns:1fr;} }
.photo-frame{
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-panel); aspect-ratio:1/1;
}
.photo-frame img{width:100%; height:100%; object-fit:cover;}
.photo-fallback{
  display:none; width:100%; height:100%; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:3rem; letter-spacing:.04em;
  color:var(--accent);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,180,84,.22), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(94,234,212,.18), transparent 55%),
    var(--bg-panel);
}
.role{color:var(--accent); margin-bottom:1rem; font-size:.9rem;}
.about-tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem;}
.about-tags li{border:1px solid var(--border); padding:.35em .75em; border-radius:6px; font-size:.78rem; color:var(--text-dim);}

/* services / cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem;}
@media (max-width:860px){ .cards{grid-template-columns:1fr;} }
.card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem;
  transition:transform var(--dur), border-color var(--dur);
}
.card:hover{transform:translateY(-4px); border-color:var(--accent-2);}

/* why */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem;}
@media (max-width:860px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }
.why-item h3{font-size:1.02rem; color:var(--text);}
.why-item h3::before{content:'▸ '; color:var(--accent);}
.why-item p{font-size:.92rem;}

/* projects */
.projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:2rem;}
@media (max-width:760px){ .projects-grid{grid-template-columns:1fr;} }
.project-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem;
  display:block; transition:transform var(--dur), border-color var(--dur);
}
.project-card:not(.project-card-muted):hover{transform:translateY(-4px); border-color:var(--accent);}
.project-card-muted{opacity:.75; cursor:default;}
.project-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem;}
.project-tag{font-size:.72rem; color:var(--accent-2); border:1px solid var(--border); padding:.25em .6em; border-radius:5px;}
.project-arrow{color:var(--text-dim); transition:transform var(--dur), color var(--dur);}
.project-card:hover .project-arrow{color:var(--accent); transform:translate(2px,-2px);}
.project-url{color:var(--text-dim); font-size:.78rem;}
.projects-empty{grid-column:1/-1; color:var(--text-dim);}

/* pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1rem;}
@media (max-width:900px){ .pricing-grid{grid-template-columns:1fr;} }
.price-card{
  background:var(--bg-panel-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem;
  position:relative; display:flex; flex-direction:column;
}
.price-card-featured{border-color:var(--accent);}
.price-badge{position:absolute; top:-.8em; inset-inline-start:1.6rem; background:var(--accent); color:#14100a; font-size:.7rem; padding:.3em .7em; border-radius:5px; font-weight:600;}
.price-tag{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--accent); margin:.3em 0 .6em;}
.price-card ul{margin-top:1rem; display:flex; flex-direction:column; gap:.55rem;}
.price-card li{font-size:.86rem; color:var(--text-dim); padding-inline-start:1.3em; position:relative;}
.price-card li::before{content:'✓'; position:absolute; inset-inline-start:0; color:var(--accent-2);}

/* faq */
.faq-list{max-width:820px; margin:1.5rem auto 0; display:flex; flex-direction:column; gap:.7rem;}
.faq-item{border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); overflow:hidden; transition:border-color .3s ease, box-shadow .3s ease;}
.faq-item.open{border-color:var(--accent-2); box-shadow:0 0 0 1px var(--glow-accent-2) inset;}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:none; color:var(--text); text-align:start; padding:1.1rem 1.3rem; font-size:.98rem; cursor:pointer;
}
.faq-icon{color:var(--accent); transition:transform var(--dur); flex:none;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding:0 1.3rem 1.2rem; margin:0; font-size:.92rem;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:2.5rem; margin-top:2rem; align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-form{background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }
.field{margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem;}
.field label{font-size:.84rem; color:var(--text-dim);}
.field .optional{font-size:.74rem; opacity:.75;}
.field input, .field select, .field textarea{
  background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.75em .9em;
  color:var(--text); font-family:var(--font-body); font-size:.94rem; width:100%;
  transition:border-color var(--dur);
}
html[dir="rtl"] .field input, html[dir="rtl"] .field select, html[dir="rtl"] .field textarea{ font-family:var(--font-ar); }
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent-2); outline:none;}
.field textarea{resize:vertical;}
.field-error{font-size:.78rem; color:var(--danger); min-height:1em;}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
.form-submit{width:100%; margin-top:.4rem;}
.form-submit:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.form-status{margin-top:.9rem; font-size:.88rem; min-height:1.2em;}
.form-status.ok{color:var(--ok);}
.form-status.err{color:var(--danger);}

.contact-info{display:flex; flex-direction:column; gap:1.4rem;}
.info-block{background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.4rem;}
.info-label{color:var(--accent-2); font-size:.78rem; margin-bottom:.8rem;}
.info-link{display:flex; align-items:center; gap:.7rem; padding:.5rem 0; font-size:.92rem; color:var(--text); transition:color var(--dur);}
.info-link:hover{color:var(--accent);}
.info-link .icon{width:18px; height:18px; flex:none; color:var(--text-dim);}
.info-link .icon svg{width:100%; height:100%;}
.info-link:hover .icon{color:var(--accent);}
.social-icons{display:flex; gap:.8rem;}
.social-icons a{width:38px; height:38px; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:color var(--dur), border-color var(--dur);}
.social-icons a svg{width:18px; height:18px;}
.social-icons a:hover{color:var(--accent); border-color:var(--accent);}
.reply-time{color:var(--text-dim); font-size:.85rem;}
.reply-value{color:var(--accent); margin-top:.3rem; font-size:1rem; font-weight:600;}

/* footer */
.footer{border-top:1px solid var(--border); padding:2.4rem 1.5rem;}
.footer-inner{max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; color:var(--text-dim); font-size:.85rem;}
.footer-links{display:flex; gap:1.2rem;}
.footer-links a:hover{color:var(--accent);}
.footer-name{font-family:var(--font-display); font-weight:600; color:var(--text);}

/* =========================================================
   BANNER — availability strip + scrolling tech marquee, sits
   directly under the hero as its own thin band.
   ========================================================= */
.banner{
  position:relative; overflow:hidden; isolation:isolate;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg-panel);
}
.banner-inner{max-width:var(--maxw); margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;}
.banner-status{
  display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--text-dim);
  white-space:nowrap; flex:none;
}
.banner-dot{
  width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 0 rgba(94,234,212,.5); animation:bannerPulse 2.2s ease-in-out infinite; flex:none;
}
@keyframes bannerPulse{
  0%{ box-shadow:0 0 0 0 rgba(94,234,212,.5); }
  70%{ box-shadow:0 0 0 7px rgba(94,234,212,0); }
  100%{ box-shadow:0 0 0 0 rgba(94,234,212,0); }
}
.banner-track{flex:1 1 auto; min-width:0; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.banner-marquee{
  display:flex; gap:2.2rem; width:max-content;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; color:var(--text-dim);
  animation:bannerScroll 26s linear infinite;
}
.banner-marquee span::before{content:'◆'; color:var(--accent); margin-inline-end:.6rem; font-size:.65em;}
@keyframes bannerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .banner-marquee{ animation-name:bannerScrollRtl; }
@keyframes bannerScrollRtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* testimonials */
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem;}
@media (max-width:900px){ .testimonials-grid{grid-template-columns:1fr;} }
.testimonial-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem;
  display:flex; flex-direction:column; transition:transform var(--dur), border-color var(--dur);
}
.testimonial-card:hover{transform:translateY(-4px); border-color:var(--accent-2);}
.testimonial-stars{color:var(--accent); letter-spacing:.15em; font-size:.95rem; margin-bottom:.7rem;}
.testimonial-quote{font-size:.94rem; color:var(--text); flex:1;}
.testimonial-author{display:flex; align-items:center; gap:.8rem; margin-top:auto;}
.testimonial-avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--accent);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,180,84,.28), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(94,234,212,.22), transparent 55%),
    var(--bg-panel-2);
  border:1px solid var(--border);
}
.testimonial-name{color:var(--text); font-weight:600; font-size:.92rem; margin:0;}
.testimonial-role{color:var(--text-dim); font-size:.78rem; margin:0;}

/* =========================================================
   SKILLS / TECH STACK
   ========================================================= */
.skills-groups{display:flex; flex-direction:column; gap:2.4rem; margin-top:2rem;}
.skills-cat-title{
  font-family:var(--font-display); font-size:.92rem; font-weight:600;
  color:var(--accent-2); text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:1rem;
}
.skills-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.85rem;}
.skill-card{
  display:flex; align-items:center; gap:.75rem;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem 1rem;
  transition:transform var(--dur), border-color var(--dur);
}
.skill-card:hover{transform:translateY(-3px); border-color:var(--accent-2);}
.skill-badge{
  width:34px; height:34px; flex:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:.7rem; color:var(--accent);
  border:1px solid var(--border);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,180,84,.22), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(94,234,212,.18), transparent 55%),
    var(--bg-panel-2);
}
.skill-name{font-size:.86rem; color:var(--text);}

/* RTL tweaks */
html[dir="rtl"] .why-item h3::before{content:'◂ ';}
html[dir="rtl"] .field-error, html[dir="rtl"] .faq-q{text-align:right;}

/* server-rendered bilingual content (hero text, project descriptions):
   both languages are in the markup, CSS shows the one matching the page direction */
.lang-ar{display:none;}
html[dir="rtl"] .lang-ar{display:block;}
html[dir="rtl"] .lang-en{display:none;}
span.lang-ar{display:none;}
html[dir="rtl"] span.lang-ar{display:inline;}
html[dir="rtl"] .banner-marquee.lang-ar{display:flex;}
html[dir="rtl"] .banner-marquee.lang-en{display:none;}

/* .price-card ul's own display:flex outranks the generic .lang-ar/.lang-en
   toggle above (higher specificity), so the language switch needs its own
   higher-specificity rule here too. */
.price-card ul.lang-ar{display:none;}
html[dir="rtl"] .price-card ul.lang-ar{display:flex;}
html[dir="rtl"] .price-card ul.lang-en{display:none;}