/*
Theme Name: BelalApps WP
Theme URI: https://belalapps.com/
Author: OpenAI for Khaled Belal
Description: First-step WordPress theme conversion for the Belal Apps static design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: belalapps-wp
*/

:root{
  --bg:#0b1220;
  --ink:#eaf2ff;
  --muted:#9aa6bf;
  --brand:#4f7cff;
  --brand-2:#27e0ff;
  --stroke:rgba(255,255,255,.12);

  /* خطوط عربية */
  --font-arabic-body: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic-heading: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* الجسم الافتراضي بالعربي (وهيلزم للباراجرافات) */
body{
  min-height:100svh;
  font-family:var(--font-arabic-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 90%, rgba(39,224,255,.12), transparent 60%),
    var(--bg);
}

/* العناوين العربية الرئيسية (شخصي + تقني) */
h1,
h2,
h3,
.section__title,
.hero__title-name,
.hero__title-sub,
.section__eyebrow,
.testimonial-card__meta{
  font-family:var(--font-arabic-heading);
}

/* نترك النصوص الإنجليزية على system-ui زي ما هي */
.en{
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}
/* جسم النص العربي (براجرافات) */
p{
  font-family: var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* بعض الفقرات اللي حابّينها تكون أوضح شوية */
.hero__subtitle,
.card__body,
.section__block p{
  font-family: var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* قائمة التنقل الرئيسية */
.site-nav__link{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 600;
}

/* أزرار الأكشن */
.btn{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 700;
}

/* اللوجو النصي (خالد بلال / Belal APPs لو بالعربي) */
.site-brand__name{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 800;
}

/* لو كتبت "تطبيقات بلال" أو نص عربي تحت اللوجو */
.site-brand__apps{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
}


html,
body{
  margin:0;
  padding:0;
}

body{
  min-height:100svh;
  font-family:var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 90%, rgba(39,224,255,.12), transparent 60%),
    var(--bg);
  position:relative;
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:0;
  filter:blur(10px);
}

body::before{
  width:42vw;
  height:42vw;
  min-width:280px;
  min-height:280px;
  top:8%;
  right:-10%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,124,255,.20) 0%, rgba(79,124,255,.08) 38%, rgba(79,124,255,0) 72%);
  animation:floatGlowOne 18s ease-in-out infinite;
}

body::after{
  width:36vw;
  height:36vw;
  min-width:240px;
  min-height:240px;
  bottom:8%;
  left:-8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(39,224,255,.18) 0%, rgba(39,224,255,.08) 36%, rgba(39,224,255,0) 72%);
  animation:floatGlowTwo 22s ease-in-out infinite;
}

/* ===== Layout ===== */

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  isolation:isolate;
}

.page::before,
.page::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
}

.page::before{
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:140px 140px;
  mask-image:radial-gradient(circle at center, black 32%, transparent 88%);
  opacity:.35;
}

.page::after{
  top:14%;
  left:50%;
  width:58vw;
  height:58vw;
  max-width:820px;
  max-height:820px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.06) 0%, rgba(255,255,255,.018) 34%, rgba(255,255,255,0) 68%);
  filter:blur(22px);
  opacity:.34;
  animation:pulseHalo 14s ease-in-out infinite;
}

main{
  flex:1 0 auto;
}

.site-header,
main,
.site-footer{
  position:relative;
  z-index:1;
}

.section,
.hero,
.page-hero,
.single-post__header,
.post-card,
.card,
.hero-photo{
  position:relative;
}

.section::before,
.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
  opacity:.55;
}

.section{
  padding-block:52px;
  padding-inline:16px;
}

.section--card{
  padding-block:46px;
}

.section__inner{
  max-width:1100px;
  margin-inline:auto;
}

.section__header{
  margin-block-end:24px;
}

.section__eyebrow{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 4px;
}

.section__title{
  margin:0;
  font-size: clamp(22px, 4vw, 28px);
}

.section-grid{
  display:grid;
  gap:20px;
}

.section-grid--2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

/* ===== Header ===== */

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(18px);
  background:linear-gradient(90deg, rgba(5,10,22,.80), rgba(5,10,22,.92));
  border-bottom:1px solid rgba(255,255,255,.04);
}

.site-header__inner{
  max-width:1100px;
  margin-inline:auto;
  padding:10px 0px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.site-brand{
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.site-brand__mark{
  inline-size:28px;
  block-size:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size: 28px; 
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.site-brand__mark{
  font-size: 28px;      /* كبّر القيمة أو صغّرها حسب ما يناسب عينك */
  line-height: 1;
  inline-size: 34px;    /* حجم الصندوق حوالين الـ B */
  block-size: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-brand__text{
  display: inline-flex;
  flex-direction: row;      /* بدل column */
  align-items: baseline;
  gap: 4px;                 /* مسافة صغيرة بين Belal و APPs */
}
.site-brand{
  display:flex;
  align-items:center;
  gap:6px; /* كان 8px قبل كده غالبًا */
}

.site-brand__name{
  font-size:14px;
  font-weight:600;
}

.site-brand__apps{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.site-brand__text{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-brand__line{
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* الـ slug تحت الاسم */
.site-brand__slug{
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
  margin-top: -2px;
  letter-spacing: 0.04em;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
}

.site-nav__link{
  position:relative;
  text-decoration:none;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:
    color .18s ease-out,
    border-color .18s ease-out,
    background .18s ease-out;
}

.site-nav__link:hover{
  color:var(--ink);
}

.site-nav__link--primary{
  color:var(--ink);
  border-color:rgba(79,124,255,.65);
  background:rgba(79,124,255,.22);
}

/* ===== Hero ===== */

.hero{
  padding-inline:16px;
  padding-block:72px 56px;
}

.hero__inner{
  max-width:1100px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2.5fr);
  gap:40px;
  align-items:center;
}

.hero__content{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.hero__eyebrow{
  margin:0;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.16em;
  text-transform:uppercase;
  display:block;
}
.hero__title-main .hero__eyebrow {
  display: block;
}
.hero__title{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hero__title-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-size:clamp(26px, 6vw, 34px);
}

.hero__title-name{
  font-weight:800;
}

.hero__title-apps{
  font-weight:800;
  padding:.18rem .6rem;
  border-radius:999px;
  background:rgba(79,124,255,.14);
  border:1px solid rgba(79,124,255,.35);
  color:#cfe0ff;
  font-size:clamp(14px, 3vw, 15px);
}

.hero__title-sub{
  font-size:clamp(16px, 4vw, 18px);
  color:var(--muted);
}

.hero__underline{
  inline-size:100%;
  block-size:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}

.hero__subtitle{
  margin:0;
  font-size:14px;
  color:var(--muted);
  max-width:420px;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

/* Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:.55rem 1.1rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:
    background .18s ease-out,
    border-color .18s ease-out,
    transform .12s ease-out,
    box-shadow .18s ease-out;
}

.btn--primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:rgba(79,124,255,.75);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  color:#f5f7ff;
}

.btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.55);
}

.btn--ghost{
  background:rgba(10,18,36,.70);
  border-color:rgba(150,180,255,.35);
  color:var(--ink);
}

.btn--ghost:hover{
  background:rgba(14,24,48,.90);
}

/* Hero side */

.hero__side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.hero-photo{
  inline-size:100%;
  aspect-ratio:4/3;
  border-radius:20px;
  border:1px solid rgba(150,180,255,.35);
  background:radial-gradient(circle at 10% 0, rgba(79,124,255,.28), transparent 60%),
             radial-gradient(circle at 100% 100%, rgba(39,224,255,.22), transparent 55%),
             rgba(6,12,26,.9);
  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* لو استخدمت <img> داخل hero-photo */
.hero-photo img{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}

/* Terminal */

.terminal{
  border-radius:16px;
  background:rgba(5,10,22,.72);
  border:1px solid rgba(150,180,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

.terminal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:linear-gradient(90deg, rgba(8,14,30,.95), rgba(14,22,40,.95));
}

.terminal__dots{
  display:flex;
  align-items:center;
  gap:5px;
}

.terminal__dot{
  inline-size:9px;
  block-size:9px;
  border-radius:50%;
}

.terminal__dot--red{background:#ff5f57;}
.terminal__dot--yellow{background:#febc2e;}
.terminal__dot--green{background:#28c840;}

.terminal__title{
  font-size:11px;
  color:var(--muted);
}

.terminal__body{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
}

.terminal__prompt{
  color:#7dd3fc;
}

.terminal__cmd{
  background:linear-gradient(90deg, #eaf2ff, #bde8ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.terminal__caret{
  inline-size:10px;
  block-size:1.4em;
  background:linear-gradient(180deg, #ffffff, #bde8ff);
  display:inline-block;
  animation:blink 1.1s steps(1,end) infinite;
}

/* Badge */

.hero__badge{
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:.55rem .9rem;
  border-radius:14px;
  font-size:13px;
  font-weight:600;
  background:rgba(79,124,255,.14);
  border:1px solid rgba(79,124,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== Cards / Chips ===== */

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}

.card{
  padding:18px 18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.04);
  background:radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
             rgba(10,16,32,.96);
  box-shadow:0 14px 32px rgba(0,0,0,.40);
  transition:
    transform .16s ease-out,
    box-shadow .16s ease-out,
    border-color .16s ease-out,
    background .18s ease-out;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(150,180,255,.45);
  box-shadow:0 20px 42px rgba(0,0,0,.55);
}

.card__title{
  margin:0 0 6px;
  font-size:15px;
}

.card__meta{
  margin:0 0 10px;
  font-size:12px;
  color:var(--muted);
}

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

.cards-grid--showcase{
  align-items:stretch;
}

.card--showcase{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.card__visual{
  position:relative;
  margin:0;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at top right, rgba(39,224,255,.18), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    #0b1628;
}

.card__visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .28s ease, filter .28s ease;
}

.card--showcase:hover .card__visual img{
  transform:scale(1.06);
  filter:saturate(1.05);
}

.card__visual::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:40%;
  background:linear-gradient(180deg, rgba(8,17,31,0), rgba(8,17,31,.72));
  pointer-events:none;
}

.card__badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,17,31,.72);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(10px);
}

.card__content{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}

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

.chip{
  font-size:12px;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(150,180,255,.40);
  background:rgba(10,16,32,.90);
  color:var(--ink);
}

/* ===== Footer ===== */

.site-footer{
  padding:18px 16px 22px;
  border-top:1px solid rgba(255,255,255,.04);
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* ===== Utilities ===== */

.en{
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Animations ===== */

@keyframes blink{
  50%{opacity:0;}
}

@keyframes floatGlowOne{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); opacity:.92; }
  50%{ transform:translate3d(-3%, 4%, 0) scale(1.08); opacity:1; }
}

@keyframes floatGlowTwo{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); opacity:.82; }
  50%{ transform:translate3d(4%, -5%, 0) scale(1.06); opacity:1; }
}

@keyframes pulseHalo{
  0%, 100%{ transform:translateX(-50%) scale(1); opacity:.22; }
  50%{ transform:translateX(-50%) scale(1.05); opacity:.38; }
}

/* ===== Responsive ===== */

@media (max-width:900px){
  .hero__inner{
    grid-template-columns:1fr;
    gap:32px;
  }

  .hero__side{
    max-width:520px;
    margin-inline:auto;
  }

  .cards-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .section-grid--2{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .site-header__inner{
    padding-inline:12px;
  }

  .site-nav{
    gap:4px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .site-nav__link{
    padding:5px 8px;
    font-size:12px;
  }

  .hero{
    padding-block:16px 40px;
  }

  .cards-grid{
    grid-template-columns:1fr;
  }

  .section{
    padding-block:40px 36px;
  }
}

@media (prefers-reduced-motion:reduce){
  .terminal__caret,
  body::before,
  body::after,
  .page::after{
    animation:none;
  }

  .btn,
  .card,
  .site-nav__link::after{
    transition:none;
  }
}

/* ===== تحسينات عامة ===== */

html{
  scroll-behavior:smooth;
}

/* شادو أوضح للهيدر مع الحفاظ على الـ blur */
.site-header{
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}

/* ===== تحسين القائمة الرئيسية ===== */

.site-nav__link{
  position:relative;
}

.site-nav__link::after{
  content:"";
  position:absolute;
  inset-inline:10px;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease-out, opacity .18s ease-out;
  opacity:0;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

/* تركيز أوضح للكيبورد */
.site-nav__link:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:2px;
}

/* ===== تحسين الأزرار ===== */

.btn{
  transform:translateY(0);
}

.btn:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}

/* ===== حركة لطيفة للصورة الشخصية ===== */

.hero-photo{
  transform:translateY(0);
  transition:
    transform .5s ease-out,
    box-shadow .5s ease-out,
    border-color .3s ease-out;
}

.hero-photo:hover{
  transform:none;
  border-color:rgba(150,180,255,.6);
  box-shadow:0 26px 60px rgba(0,0,0,.7);
}

/* نضيف ترانزيشن للصورة نفسها */
.hero-photo img{
  transition:transform .6s ease-out;
}

.hero-photo:hover img{
  transform:scale(1.04);
}

/* ===== تحسين التفاعل مع Chips ===== */

.chip{
  transition:
    background .18s ease-out,
    border-color .18s ease-out,
    transform .16s ease-out,
    box-shadow .16s ease-out;
}

.chip:hover{
  transform:translateY(-2px);
  background:rgba(79,124,255,.18);
  border-color:rgba(150,180,255,.7);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* ===== تحسين الريسبونسيف للموبايل الصغير ===== */

@media (max-width:640px){
  .site-nav{
    overflow-x:auto;
    padding-bottom:4px;
  }

  .site-nav::-webkit-scrollbar{
    display:none;
  }
}

@media (max-width:480px){
  .hero__title-main{
    font-size:22px;
  }

  .hero__title-sub{
    font-size:14px;
  }

  .hero__subtitle{
    font-size:13px;
  }

  .site-header__inner{
    gap:8px;
  }
}
/* من أنا – تنسيق البلوكات والقائمة */

.section__block{

  font-family: var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* لو فيه باراجرافات جوه البلوك */
.section__block p{
  margin: 0 0 0.75rem;
}

/* القائمة الجانبية (النقط) */
.section__block ul{
  margin: 0;
  padding-inline-start: 1.2rem; /* مسافة قبل النقط */
  list-style: disc;
}

.section__block li{
  margin-bottom: 0.5rem;
}

/* إبراز الـ <strong> شوية */
strong{
  color: var(--ink);
  font-weight: 700;
}

/* تنسيق محتوى كروت الخدمات */

.card__body p{
  margin: 0 0 0.6rem;
}

.card__body ul{
  margin: 0;
  padding-inline-start: 1.1rem; /* مسافة قبل النقط */
  list-style: disc;
}

.card__body li{
  margin-bottom: 0.35rem;
  line-height: 1.8;
}



.stack__intro{
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.stack-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.stack-column{
  padding: 16px 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    rgba(8,12,26,.96);
  box-shadow: 0 14px 32px rgba(0,0,0,.38);
}

.stack-column__title{
  margin: 0 0 10px;
  font-size: 15px;
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
}

.tech-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(150,180,255,.45);
  background: rgba(10,16,32,.92);
  font-size: 12px;
  cursor: default;
  transition:
    background .18s ease-out,
    border-color .18s ease-out,
    transform .14s ease-out,
    box-shadow .16s ease-out;
}

.tech-chip__icon{
  inline-size: 18px;
  block-size: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,.35), transparent 60%),
              rgba(35,52,96,.95);
}

.tech-chip__label{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Hover صغير لطيف */
.tech-chip:hover{
  transform: translateY(-2px);
  background: rgba(79,124,255,.16);
  border-color: rgba(150,180,255,.85);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}

/* موبايل */
@media (max-width: 900px){
  .stack-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

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

.contact-grid{
  align-items: flex-start;
}

.contact-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    rgba(8,12,26,.96);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.contact-item__icon{
  inline-size: 28px;
  block-size: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,.35), transparent 60%),
              rgba(35,52,96,.95);
}

.contact-item__body{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-item__label{
  font-size: 13px;
  color: var(--muted);
}

.contact-item__value{
  font-size: 14px;
}

.contact-link{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed rgba(150,180,255,.6);
  padding-bottom: 1px;
}

.contact-link:hover{
  border-bottom-style: solid;
}

/* موبايل */
@media (max-width: 640px){
  .contact-item{
    padding: 10px;
  }
}
/* انسيابية في السكрол (لو مش مضافة قبل كده) */
html{
  scroll-behavior:smooth;
}

/* تعويض الهيدر الستيكي عشان الجزء ما يستخباش تحته */
.hero,
.section{
  scroll-margin-top: 80px;
}

/* زر قائمة الموبايل (الهامبرجر) */
.nav-toggle{
  inline-size: 34px;
  block-size: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,16,32,.92);
  display: none; /* يبان بس على الموبايل في media query */
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.nav-toggle__icon{
  inline-size: 26px;
  block-size: 26px;
  stroke: #eaf2ff;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* لمسة بسيطة عند تفعيل القائمة (اختياري) */
.nav-toggle.nav-toggle--active .nav-toggle__icon{
  stroke: var(--brand-2);
}
/* شكل الـ X عند فتح القائمة */
.nav-toggle.nav-toggle--active .nav-toggle__line:nth-child(1){
  transform: translateY(3px) rotate(45deg);
}

.nav-toggle.nav-toggle--active .nav-toggle__line:nth-child(2){
  opacity: 0;
}

.nav-toggle.nav-toggle--active .nav-toggle__line:nth-child(3){
  transform: translateY(-3px) rotate(-45deg);
}

/* حالة الـ active في القائمة */
.site-nav__link--active{
  color: var(--ink);
}

.site-nav__link--active::after{
  transform: scaleX(1);
  opacity: 1;
}

/* ===== موبايل / تابلت – تحويل القائمة لهامبرجر ===== */

@media (max-width: 900px){
  .site-header__inner{
    position: relative;
  }

  .nav-toggle{
    display: inline-flex;
  }

  .site-nav{
    position: absolute;
    inset-inline-end: 8px;
    inset-inline-start: auto;
    inline-size: min(50vw, 320px);
    max-inline-size: calc(100vw - 16px);
    top: calc(100% + 6px);
    margin-top: 0;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, rgba(7,11,24,.97), rgba(9,16,32,.97));
    box-shadow: 0 18px 40px rgba(0,0,0,.7);
    flex-direction: column;
    gap: 4px;
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -8px, 0) scale(.98);
    transform-origin: top right;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 30;
  }

  .site-nav.site-nav--open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .site-nav__link{
    width: 100%;
    text-align: right;
    justify-content: flex-start;
  }
}
.hero__badge{
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


/* ===== تظبيط الـ Theme عام ===== */

:root{
  /* خلفية الصفحة أغمق */
  --bg: #020617;
  /* خلفية البلوكات أفتح شوية من الخلفية العامة */
  --surface: #0b1220;
  --surface-soft: #111827;
}

/* خلفية الجسم تفضل دارك جدًا */
body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.10), transparent 60%),
    radial-gradient(1000px 500px at 90% 90%, rgba(39,224,255,.10), transparent 60%),
    var(--bg);
}

/* ===== البلوكات / الكروت تكون أفتح من الخلفية ===== */

/* سكشنات الكارد نفسها تظل شفافة، اللي يبان هو البلوكات جوّاها */
.section--card{
  background: transparent;
}

/* الكروت العامة (الخدمات + المشاريع) */
.card{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.14), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

/* أعمدة التقنيات */
.stack-column{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.14), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

/* عناصر التواصل */
.contact-item{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.12), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 16px 38px rgba(0,0,0,.65);
}

/* عناصر الـ FAQ */
.faq-item{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 38px rgba(0,0,0,.65);
}

/* التيرمنال في الهيرو */
.terminal{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.16), transparent 55%),
    var(--surface);
  border-color: rgba(255,255,255,.10);
}

/* الصورة (البلوك اللي حواليها) */
.hero-photo{
  background:
    radial-gradient(circle at 10% 0, rgba(79,124,255,.28), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(39,224,255,.22), transparent 55%),
    var(--surface-soft);
  border-color: rgba(150,180,255,.45);
}

/* بادج الخبرة في الهيرو أفتح شوية عن الخلفية */
.hero__badge{
  background: rgba(15,23,42,.96);
  border-color: rgba(79,124,255,.45);
}

.stack-note{
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.6);
  background: rgba(15,23,42,0.7);
}
.testimonials-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.testimonial-card{
  padding: 16px 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.14), transparent 55%),
    var(--surface-soft, #111827);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

.testimonial-card__header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.testimonial-card__avatar{
  inline-size: 60px;
  block-size: 60px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.7);
  background:
    radial-gradient(circle at 30% 0, rgba(255,255,255,.35), transparent 60%),
    #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-card__avatar img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.testimonial-card__avatar-fallback{
  font-size: 13px;
  font-weight: 700;
  color: #e5e7eb;
}

.testimonial-card__meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name{
  font-size: 14px;
  font-weight: 700;
}

.testimonial-card__role{
  font-size: 12px;
  color: var(--muted);
}

.testimonial-card__body{
  position: relative;
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
}

/* الغي الديكور الخلفي القديم لو كان موجود */
.testimonial-card__body::before{
  content: none;
}

/* فقرة التستيمونيال نفسها */
.testimonial-card__quote{
  position: relative;
  margin: 0 0 0.5rem;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  text-align: right;
  padding-inline-start: 6px;
  padding-inline-end: 6px;
}

/* كوتيشن في أول وآخر الفقرة */
.testimonial-card__quote::before{
  content: "«";
  position: relative;
  margin-inline-start: 4px;
}

.testimonial-card__quote::after{
  content: "»";
  position: relative;
  margin-inline-end: 4px;
}

.testimonial-card__quote:last-child{
  margin-bottom: 0;
}

/* موبايل: كروت مستقبلًا لو زادت */
@media (min-width: 900px){
  .testimonials-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

 /* خلفية مخفّة لسكشن من أنا */
#about .section-grid{
  padding:22px 22px 24px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.04);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    rgba(10,16,32,.96);
  box-shadow:0 14px 32px rgba(0,0,0,.40);
}
/* ========= شركاء تعاونت معهم (اللوجوهات) ========= */
/* ===== شركات تعاونت معها – صف لوجوهات يتحرك ===== */

/* الحاوية: تسمح بالسكرول، وتخفي الـ scrollbar */
.brands-scroller{
  width: 100%;
  overflow-x: auto;              /* المستخدم يقدر يسحب يمين/شمال */
  overflow-y: hidden;
  padding-block: 8px;
  direction: ltr;                /* عشان scrollLeft يكون بسيط وموحّد */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* فايرفوكس */
  -ms-overflow-style: none;   

  cursor: grab;   /* IE/Edge القديم */
}

.brands-scroller::-webkit-scrollbar{
  display: none;                 /* إخفاء السكروول في كروم/سفاري */
}

/* الصف نفسه */
.brands-track{
  display: inline-flex;
  gap: 32px;
  align-items: center;
  white-space: nowrap;
}

/* كل لوجو كعنصر مستقل */
.brand-card{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 180px;
  padding-inline: 4px;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transition:
    transform .16s ease-out,
    opacity .16s ease-out;
}

.brand-card:active{
  cursor: grabbing;
}

/* اللوجو نفسه – كبير وبدون أي خلفية إضافية */
.brand-card__logo{ 
  inline-size: 100%;
  block-size: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  overflow: hidden;
  border-radius: 20px;
  padding-inline: 10px;
  box-sizing: border-box;   /* 👈 أهم سطر هنا */
}

.brand-card__logo img{
  max-inline-size: 100%;
  max-block-size: 120px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* الشعارات تظل ثابتة وواضحة بدون مؤثرات الكروت */
#partners .brand-card,
#partners .brand-card__logo,
#partners .brand-card__logo img{
  transform:none !important;
  filter:none !important;
  animation:none !important;
}

#partners .brand-card__logo{
  box-shadow:none !important;
}

#partners .brand-card:hover,
#partners .brand-card:hover .brand-card__logo,
#partners .brand-card:focus-visible .brand-card__logo{
  transform:none !important;
  box-shadow:none !important;
}

/* fallback لو حطيت نص بدل صورة */
.brand-card__logo-fallback{
  font-size: 22px;
  font-weight: 700;
  color: #e5e7eb;
}

/* موبايل: اللوجو ياخد مساحة أكبر نسبيًا */
@media (max-width: 640px){
  .brand-card{
    min-width: 70%;
    min-height: 170px;
  }
}

@media (max-width: 640px){
  .brands-track{
    gap: 16px; /* بدل 32px */
  }

  .brand-card{
    min-width: 35%; /* كانت 70%، خليها أضيق شوية لو تحب */
  }
}


/* ===== سلايدر الخدمات + نماذج من أعمالي على الموبايل ===== */

@media (max-width: 768px){
  /* نحول الجريد في السكشنين لسلايدر أفقي */
  #services .cards-grid,
  #cases .cards-grid{
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    padding-inline: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 10px;
  }

  #services .cards-grid::-webkit-scrollbar,
  #cases .cards-grid::-webkit-scrollbar{
    display: none;
  }

  /* كل كارت = سلايد بنسبة ~80% */
  #services .cards-grid .card,
  #cases .cards-grid .card{
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }
}

@media (max-width: 768px){
  #testimonials .testimonials-grid{
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    padding-inline: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 10px;
  }

  #testimonials .testimonials-grid::-webkit-scrollbar{
    display: none;
  }

  #testimonials .testimonial-card{
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }
}


/* ===== Blog ===== */

.page-hero{
  margin-bottom:32px;
}

.page-hero__text{
  max-width:760px;
  color:var(--muted);
}

.posts-section__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.posts-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
}

.post-card{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.post-card__thumb{
  aspect-ratio:16/10;
  display:block;
  background:linear-gradient(135deg, rgba(79,124,255,.18), rgba(39,224,255,.12));
}

.post-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.post-card__placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--ink);
  font-weight:800;
}

.post-card__content{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.post-card__meta,
.single-post__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}

.post-card__category,
.single-post__meta a{
  color:var(--brand-2);
  text-decoration:none;
}

.post-card__author,
.single-post__author{
  color:var(--muted);
}


.post-card__category-wrap,
.single-post__category-wrap{
  display:flex;
  align-items:center;
}

.single-post__category{
  display:inline-flex;
  align-items:center;
  padding:.28rem .7rem;
  border-radius:999px;
  background:rgba(39,224,255,.08);
  border:1px solid rgba(39,224,255,.14);
  color:var(--brand-2);
  text-decoration:none;
  font-size:12px;
  line-height:1.2;
}

.post-card__meta--inline{
  gap:8px;
}

.post-card__meta-separator{
  opacity:.75;
}

.post-card__title{
  margin:0;
  font-size:22px;
  line-height:1.45;
}

.post-card__title a{
  color:var(--ink);
  text-decoration:none;
}

.post-card__excerpt p{
  margin:0;
}

.post-card__link{
  margin-top:auto;
  width:max-content;
}

.single-post__header{
  margin-bottom:24px;
}

.single-post__title{
  margin:12px 0 10px;
  font-size:clamp(28px, 5vw, 40px);
  line-height:1.35;
}

.single-post__meta{
  margin-bottom:14px;
}

.single-post__intro{
  font-size:16px;
}

.single-post__thumbnail{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--stroke);
  margin-bottom:24px;
}

.single-post__thumbnail img{
  width:100%;
  height:auto;
  display:block;
}

.single-post__content{
  border:1px solid var(--stroke);
  border-radius:24px;
  background:rgba(255,255,255,.03);
  padding:28px;
}

.single-post__content > *:first-child{
  margin-top:0;
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4{
  margin-bottom:.6em;
}

.single-post__content ul,
.single-post__content ol{
  padding-inline-start:22px;
  color:var(--muted);
  font-family: var(--font-arabic-body);
}

.single-post__footer{
  margin-top:24px;
}

.empty-state{
  padding:28px;
  border:1px dashed var(--stroke);
  border-radius:24px;
  background:rgba(255,255,255,.02);
}

.empty-state__title{
  margin:0 0 8px;
}

.empty-state__text{
  margin:0 0 16px;
}

.navigation.pagination{
  margin-top:32px;
}

.navigation.pagination .nav-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.navigation.pagination .page-numbers{
  min-width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--stroke);
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.03);
}

.navigation.pagination .current{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#08101d;
  border-color:transparent;
}

.search-form{
  display:flex;
  gap:12px;
  margin-bottom:24px;
}

.search-form label{
  flex:1;
}

.search-field{
  width:100%;
  height:50px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  padding:0 16px;
  font-family:var(--font-arabic-body);
}

.search-submit{
  height:50px;
  border:0;
  border-radius:14px;
  padding:0 20px;
  font-family:var(--font-arabic-heading);
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#08101d;
}

@media (max-width: 900px){
  .posts-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

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

  .posts-section__header{
    flex-direction:column;
    align-items:flex-start;
  }

  .search-form{
    flex-direction:column;
  }

  .single-post__content{
    padding:20px;
  }
}



/* ===== Blog Premium Layer ===== */
.blog-page .page-hero,
.single-post__header{
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:24px;
  background:
    radial-gradient(circle at top right, rgba(79,124,255,.12), transparent 44%),
    radial-gradient(circle at top left, rgba(39,224,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow:0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
}

.blog-page .section__title,
.single-post__title{
  text-wrap:balance;
}

.blog-page .page-hero__text,
.single-post__intro{
  max-width:68ch;
}

.posts-grid{
  align-items:stretch;
}

.post-card{
  position:relative;
  background:
    radial-gradient(circle at top right, rgba(79,124,255,.09), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:0 14px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03);
}

.post-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 34%);
  opacity:.7;
}

.post-card__thumb{
  position:relative;
  overflow:hidden;
}

.post-card__thumb::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:40%;
  background:linear-gradient(180deg, rgba(11,18,32,0), rgba(11,18,32,.28));
  pointer-events:none;
}

.post-card__content{
  position:relative;
  z-index:1;
}

.post-card__meta,
.single-post__meta{
  gap:8px;
  row-gap:6px;
  font-size:12px;
  letter-spacing:.01em;
}

.post-card__category,
.single-post__meta a{
  display:inline-flex;
  align-items:center;
  padding:.24rem .55rem;
  border-radius:999px;
  background:rgba(39,224,255,.08);
  border:1px solid rgba(39,224,255,.14);
  font-size:12px;
  line-height:1.2;
}

.post-card__title{
  font-size:21px;
}

.post-card__excerpt p{
  line-height:1.9;
}

.post-card__link{
  margin-top:auto;
}

.single-post{
  position:relative;
}

.single-post__thumbnail{
  box-shadow:0 16px 42px rgba(0,0,0,.24);
}

.single-post__content{
  background:
    radial-gradient(circle at top right, rgba(79,124,255,.08), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 18px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03);
  line-height:2;
}

.single-post__content p,
.single-post__content li{
  font-size:15px;
  line-height:2;
}

.single-post__content a{
  color:#c9f6ff;
  text-underline-offset:3px;
}

.single-post__content blockquote{
  margin:1.5rem 0;
  padding:1rem 1.1rem;
  border-inline-start:3px solid rgba(39,224,255,.44);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  color:#dbe7ff;
}

.single-post__content img{
  border-radius:18px;
  max-width:100%;
  height:auto;
}

.single-post__footer{
  display:flex;
  justify-content:flex-start;
}

.navigation.pagination .nav-links{
  justify-content:center;
}

.navigation.pagination .page-numbers{
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.blog-page .page-hero,
.single-post__header,
.post-card,
.single-post__thumbnail,
.single-post__content,
.navigation.pagination,
.single-post__footer{
  --surface-soft: rgba(255,255,255,.04);
}

@media (max-width:640px){
  .blog-page .page-hero,
  .single-post__header{
    padding:18px;
    border-radius:22px;
  }

  .post-card{
    border-radius:22px;
  }

  .single-post__thumbnail,
  .single-post__content{
    border-radius:22px;
  }
}

/* ===== Premium Soft Glow + Subtle Interactive UI + Reveal on Scroll ===== */

:root{
  --soft-glow-blue: rgba(79,124,255,.24);
  --soft-glow-cyan: rgba(39,224,255,.20);
  --soft-glow-white: rgba(255,255,255,.08);
  --interactive-lift: translateY(-6px);
}

body{
  background:
    radial-gradient(1100px 560px at 12% 8%, rgba(79,124,255,.14), transparent 62%),
    radial-gradient(980px 520px at 86% 88%, rgba(39,224,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)),
    var(--bg);
}

body::before{
  width:46vw;
  height:46vw;
  top:5%;
  right:-11%;
  filter:blur(14px);
  background:radial-gradient(circle, rgba(79,124,255,.26) 0%, rgba(79,124,255,.12) 34%, rgba(79,124,255,0) 72%);
  animation:floatGlowOne 16s ease-in-out infinite alternate;
}

body::after{
  width:40vw;
  height:40vw;
  bottom:5%;
  left:-8%;
  filter:blur(14px);
  background:radial-gradient(circle, rgba(39,224,255,.22) 0%, rgba(39,224,255,.10) 34%, rgba(39,224,255,0) 72%);
  animation:floatGlowTwo 20s ease-in-out infinite alternate;
}

.page::before{
  opacity:.42;
  background:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:130px 130px;
}

.page::after{
  top:10%;
  width:62vw;
  height:62vw;
  max-width:900px;
  max-height:900px;
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 30%, rgba(255,255,255,0) 68%);
  filter:blur(28px);
  opacity:.42;
  animation:pulseHalo 12s ease-in-out infinite;
}

.site-header{
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.site-header.is-scrolled{
  background:rgba(7,11,24,.82);
  border-color:rgba(148,163,184,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(18px);
}

.section,
.page-hero,
.single-post__content,
.empty-state,
.navigation.pagination .page-numbers,
.search-field,
.search-submit,
.site-brand,
.contact-item,
.stack-column,
.card,
.post-card,
.testimonial-card,
.hero-photo,
.terminal,
.hero__badge,
.faq-item,
.tech-chip,
.chip,
.btn,
.site-nav__link{
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    background-color .28s ease,
    background .28s ease,
    opacity .28s ease,
    filter .28s ease,
    color .28s ease;
}

.btn,
.site-nav__link,
.post-card__title a,
.post-card__category,
.contact-link,
.hero-photo,
.card,
.post-card,
.testimonial-card,
.tech-chip,
.chip,
.navigation.pagination .page-numbers{
  will-change:transform;
}

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-120% auto -120% -35%;
  width:42%;
  transform:rotate(18deg) translateX(-220%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}

.btn > *{
  position:relative;
  z-index:1;
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.05) inset;
}

.btn:hover::before{
  animation:buttonSheen .9s ease forwards;
}

.btn--primary:hover{
  box-shadow:0 18px 34px rgba(79,124,255,.24), 0 10px 24px rgba(0,0,0,.34);
}

.site-nav__link{
  border-radius:12px;
}

.site-nav__link:hover,
.site-nav__link:focus-visible{
  color:var(--ink);
  background:rgba(255,255,255,.03);
  transform:translateY(-1px);
}

.site-brand:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 10px 24px rgba(79,124,255,.18));
}

.card:hover,
.testimonial-card:hover,
.stack-column:hover,
.contact-item:hover,
.faq-item:hover{
  transform:var(--interactive-lift);
  border-color:rgba(148,163,184,.18);
  box-shadow:0 26px 54px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.03) inset;
}

.card:hover,
.testimonial-card:hover{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.18), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--surface-soft, rgba(255,255,255,.04));
}

.card:hover .card__title,
.testimonial-card:hover .testimonial-card__name{
  color:#f6f9ff;
}

.hero-photo,
.terminal{
  overflow:hidden;
}

.hero-photo::after,
.terminal::after,
.card::after,
.testimonial-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 22%, transparent 72%, rgba(255,255,255,.03));
  opacity:0;
  transition:opacity .28s ease;
}

.post-card::after{
  content:"";
  position:absolute;
  inset:-120% auto -120% -35%;
  width:42%;
  transform:rotate(18deg) translateX(-220%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
  z-index:2;
}

.hero-photo:hover{
  transform:none;
  box-shadow:0 30px 62px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.hero-photo:hover::after,
.card:hover::after,
.testimonial-card:hover::after{
  opacity:1;
}

.post-card:hover::after,
.post-card:focus-within::after{
  animation:buttonSheen .9s ease forwards;
}

.post-card__thumb,
.testimonial-card__avatar,
.hero-photo img,
.post-card__thumb img{
  transition:transform .42s ease, filter .42s ease, box-shadow .28s ease;
}

.hero-photo:hover img{
  transform:scale(1.045);
  filter:saturate(1.05) contrast(1.02);
}

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

.tech-chip:hover,
.chip:hover,
.navigation.pagination .page-numbers:hover,
.search-submit:hover{
  transform:translateY(-2px);
}

.search-field:focus{
  outline:none;
  border-color:rgba(79,124,255,.42);
  box-shadow:0 0 0 4px rgba(79,124,255,.10), 0 10px 22px rgba(0,0,0,.18);
}

.search-submit:hover{
  box-shadow:0 16px 30px rgba(79,124,255,.22), 0 8px 20px rgba(0,0,0,.18);
}

.contact-link:hover,
.post-card__title a:hover,
.post-card__category:hover,
.single-post__meta a:hover{
  color:#dff7ff;
}

.reveal-on-scroll{
  opacity:0;
  transform:translateY(22px) scale(.985);
  transition:
    opacity .62s cubic-bezier(.22,1,.36,1),
    transform .62s cubic-bezier(.22,1,.36,1),
    filter .62s ease;
  filter:blur(7px);
}

.reveal-on-scroll--from-top{
  transform:translateY(-22px) scale(.985);
}


.reveal-on-scroll--scale-only{
  transform:scale(.985);
}

.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

.portfolio-replay-reset{
  opacity:0 !important;
  transform:translateY(22px) scale(.985) !important;
  transition:none !important;
  filter:blur(7px) !important;
}

.reveal-on-scroll[data-reveal-delay="1"]{ transition-delay:.08s; }
.reveal-on-scroll[data-reveal-delay="2"]{ transition-delay:.16s; }
.reveal-on-scroll[data-reveal-delay="3"]{ transition-delay:.24s; }

@keyframes buttonSheen{
  0%{ transform:rotate(18deg) translateX(-220%); }
  100%{ transform:rotate(18deg) translateX(520%); }
}

@keyframes floatGlowOne{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-18px, 24px, 0) scale(1.05); }
  100%{ transform:translate3d(8px,-12px,0) scale(.98); }
}

@keyframes floatGlowTwo{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(20px,-20px,0) scale(1.04); }
  100%{ transform:translate3d(-10px, 10px, 0) scale(.98); }
}

@keyframes pulseHalo{
  0%,100%{ opacity:.34; transform:translateX(-50%) scale(1); }
  50%{ opacity:.48; transform:translateX(-50%) scale(1.05); }
}

@media (prefers-reduced-motion:reduce){
  .reveal-on-scroll,
  .reveal-on-scroll.is-visible,
  .site-header,
  .section,
  .page-hero,
  .single-post__content,
  .empty-state,
  .navigation.pagination .page-numbers,
  .search-field,
  .search-submit,
  .hero__content,
  .hero__side,
  .site-brand,
  .contact-item,
  .stack-column,
  .card,
  .post-card,
  .testimonial-card,
  .hero-photo,
  .terminal,
  .hero__badge,
  .faq-item,
  .tech-chip,
  .chip,
  .btn,
  .site-nav__link,
  .post-card__thumb img,
  .hero-photo img,
  body::before,
  body::after,
  .page::after,
  .btn::before{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1;
  }
}


.blog-page .post-card__thumb::before,
.single-post-page .single-post__thumbnail::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%, transparent 72%, rgba(79,124,255,.14));
  opacity:0;
  transition:opacity .36s ease;
}

.blog-page .post-card:not(.reveal-on-scroll):hover .post-card__thumb::before,
.blog-page .post-card.reveal-on-scroll.is-visible:hover .post-card__thumb::before,
.single-post-page .single-post__thumbnail:not(.reveal-on-scroll):hover::before,
.single-post-page .single-post__thumbnail.reveal-on-scroll.is-visible:hover::before{
  opacity:1;
}

.blog-page .post-card__title a,
.single-post-page .single-post__content a{
  transition:color .28s ease, text-shadow .28s ease, letter-spacing .28s ease;
}

.blog-page .post-card:not(.reveal-on-scroll):hover .post-card__title a,
.blog-page .post-card.reveal-on-scroll.is-visible:hover .post-card__title a{
  letter-spacing:.01em;
  text-shadow:0 0 18px rgba(79,124,255,.16);
}

.single-post-page .single-post__header:not(.reveal-on-scroll):hover,
.single-post-page .single-post__thumbnail:not(.reveal-on-scroll):hover,
.single-post-page .single-post__content:not(.reveal-on-scroll):hover,
.single-post-page .single-post__header.reveal-on-scroll.is-visible:hover,
.single-post-page .single-post__thumbnail.reveal-on-scroll.is-visible:hover,
.single-post-page .single-post__content.reveal-on-scroll.is-visible:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 58px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.03) inset;
}


.single-post-page .single-post__content{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

.single-post-page .single-post__content:hover{
  transform:none;
  box-shadow:none;
}

.single-post-page .single-post__content-block{
  position:relative;
  margin:0 0 1.1rem;
  padding:1.05rem 1.15rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(18, 28, 48, .84), rgba(12, 19, 35, .74));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}

.single-post-page .single-post__content > .single-post__content-block:last-child{
  margin-bottom:0;
}

.single-post-page .single-post__content > .single-post__content-block > *:first-child{
  margin-top:0;
}

.single-post-page .single-post__content > .single-post__content-block > *:last-child{
  margin-bottom:0;
}

.single-post-page .single-post__content > p.single-post__content-block{
  line-height:2.05;
}

.single-post-page .single-post__content > ul.single-post__content-block,
.single-post-page .single-post__content > ol.single-post__content-block,
.single-post-page .single-post__content > blockquote.single-post__content-block,
.single-post-page .single-post__content > pre.single-post__content-block,
.single-post-page .single-post__content > table.single-post__content-block,
.single-post-page .single-post__content > figure.single-post__content-block,
.single-post-page .single-post__content > .wp-block-image.single-post__content-block,
.single-post-page .single-post__content > .wp-block-gallery.single-post__content-block,
.single-post-page .single-post__content > .wp-block-quote.single-post__content-block,
.single-post-page .single-post__content > .wp-block-code.single-post__content-block,
.single-post-page .single-post__content > .wp-block-table.single-post__content-block{
  line-height:1.9;
}

.single-post-page .single-post__content > .single-post__content-block + h2,
.single-post-page .single-post__content > .single-post__content-block + h3,
.single-post-page .single-post__content > .single-post__content-block + h4{
  margin-top:2rem;
}


/* Disable hover effects on single post blocks */
.single-post-page .single-post__header:hover,
.single-post-page .single-post__thumbnail:hover,
.single-post-page .single-post__footer:hover,
.single-post-page .single-post__content:hover,
.single-post-page .single-post__content-block:hover,
.single-post-page .single-post__header.reveal-on-scroll.is-visible:hover,
.single-post-page .single-post__thumbnail.reveal-on-scroll.is-visible:hover,
.single-post-page .single-post__footer.reveal-on-scroll.is-visible:hover,
.single-post-page .single-post__content.reveal-on-scroll.is-visible:hover,
.single-post-page .single-post__content-block.reveal-on-scroll.is-visible:hover{
  transform:none !important;
  box-shadow:inherit !important;
  filter:none !important;
}

.single-post-page .single-post__thumbnail:hover::before,
.single-post-page .single-post__thumbnail.reveal-on-scroll.is-visible:hover::before,
.single-post-page .single-post__content-block:hover::before,
.single-post-page .single-post__content-block.reveal-on-scroll.is-visible:hover::before,
.single-post-page .single-post__content-block:hover::after,
.single-post-page .single-post__content-block.reveal-on-scroll.is-visible:hover::after{
  opacity:0 !important;
}


.post-card__tags,
.single-post__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.post-card__tags__item{
  display:inline-block;
  max-width:150px;
  min-width:0;
  padding:.42rem .82rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.single-post__tags__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.42rem .82rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  line-height:1.2;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.post-card__tags__item:hover,
.single-post__tags__item:hover{
  background:rgba(39,224,255,.08);
  border-color:rgba(39,224,255,.24);
  color:var(--brand-2);
  transform:translateY(-1px);
}

.single-post__tags{
  margin-bottom:18px;
}

.single-post__tags--footer{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid rgba(148,163,184,.16);
}

/* ===== Works Page ===== */

/* Works page should keep the same Arabic font as the rest of the site */
.works-page,
.works-page button,
.works-page a,
.works-page span,
.works-page strong,
.works-page p,
.works-page h1,
.works-page h2,
.works-page h3{
  font-family:var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
}

.works-hero__stats .en,
.works-hero__panel .en{
  font-family:var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
}
.works-page{
  position:relative;
}

.works-hero{
  padding-block:68px 44px;
}

.works-hero__inner{
  display:grid;
  grid-template-columns:minmax(0, 1.22fr) minmax(300px, .95fr);
  gap:28px;
  align-items:stretch;
}

.works-hero__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}

.works-hero .section__title{
  font-size:clamp(20px, 3.2vw, 26px);
}

.works-hero__text{
  max-width:680px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.9;
}

.works-hero__actions{
  margin-top:8px;
}

.works-hero__stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.works-hero__stats span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:.34rem .68rem;
  border-radius:999px;
  border:1px solid rgba(150,180,255,.18);
  background:rgba(10,16,32,.48);
  white-space:nowrap;
}

.works-hero__stats strong{
  color:var(--ink);
  font-size:14px;
  line-height:1;
}

.works-hero__panel{
  position:relative;
  overflow:hidden;
  min-height:220px;
  padding:28px;
  border-radius:24px;
  border:1px solid rgba(150,180,255,.26);
  background:
    radial-gradient(circle at 20% 0, rgba(79,124,255,.26), transparent 48%),
    radial-gradient(circle at 100% 100%, rgba(39,224,255,.16), transparent 42%),
    rgba(10,16,32,.92);
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}

.works-hero__panel::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}

.works-hero__panel-label{
  position:relative;
  width:max-content;
  max-width:100%;
  padding:.38rem .78rem;
  border-radius:999px;
  border:1px solid rgba(150,180,255,.28);
  background:rgba(255,255,255,.05);
  color:var(--brand-2);
  font-size:12px;
  font-weight:700;
}

.works-hero__panel strong{
  position:relative;
  color:var(--ink);
  font-size:clamp(22px, 3.4vw, 31px);
  line-height:1.42;
}

.works-hero__panel p{
  position:relative;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}

.works-stats-section{
  padding-block:24px;
}

.works-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.works-stat-card{
  min-height:112px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(150,180,255,.18);
  background:linear-gradient(180deg, rgba(18,28,48,.82), rgba(10,16,32,.74));
  box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.works-stat-card strong{
  color:var(--ink);
  font-size:20px;
  line-height:1.35;
}

.works-stat-card span{
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.portfolio-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}

.portfolio-filter{
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  clip-path:inset(0 round 999px);
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight:600;
  line-height:1.5;
  color:rgba(218,228,255,.68);
  background:rgba(10,16,32,.74);
  border-color:rgba(150,180,255,.34);
}

.portfolio-filter:hover{
  color:rgba(246,251,255,.94);
  border-color:rgba(150,180,255,.66);
  background:rgba(79,124,255,.16);
}

.portfolio-filter.is-active{
  background:linear-gradient(135deg, rgba(39,224,255,.40), rgba(79,124,255,.42));
  border-color:rgba(39,224,255,.88);
  color:#ffffff;
  font-weight:600;
  box-shadow:0 14px 28px rgba(0,0,0,.34), 0 0 0 1px rgba(39,224,255,.52) inset, 0 0 18px rgba(39,224,255,.18);
}

.portfolio-filter:active{
  overflow:hidden;
  clip-path:inset(0 round 999px);
}

.portfolio-filter:focus-visible{
  outline:2px solid rgba(39,224,255,.55);
  outline-offset:2px;
}

.works-grid{
  align-items:stretch;
}

.works-card{
  min-height:100%;
}

.works-card[hidden]{
  display:none !important;
}

.works-card__visual img{
  object-fit:contain;
  background:
    radial-gradient(circle at 30% 20%, rgba(79,124,255,.18), transparent 46%),
    radial-gradient(circle at 78% 80%, rgba(39,224,255,.16), transparent 42%),
    rgba(8,17,31,.84);
}

.works-card__content{
  gap:12px;
}

.works-card__heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.works-card__title{
  flex:0 0 auto;
  min-width:0;
  margin-bottom:0;
  font-size:17px;
  line-height:1.35;
  white-space:nowrap;
}

.works-card__summary{
  display:-webkit-box;
  min-height:calc(13px * 1.9 * 5);
  margin:0;
  overflow:hidden;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
}

.works-card__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.works-card__label{
  color:var(--ink);
  font-size:12px;
  font-weight:700;
}

.works-card__chips{
  flex-wrap:nowrap;
  gap:7px;
}

.works-card__chip{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:11px;
  padding:.32rem .62rem;
  color:var(--muted);
}

.works-card__chip--more{
  cursor:pointer;
  color:var(--brand-2);
  font-family:inherit;
}

.works-card__chip--more:hover,
.works-card__chip--more.is-open{
  border-color:rgba(39,224,255,.46);
  background:rgba(39,224,255,.10);
  color:var(--ink);
}

.works-card__chip--more:focus-visible{
  outline:2px solid rgba(39,224,255,.55);
  outline-offset:2px;
}

.works-card__more-wrap{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  z-index:5;
}

.works-card__hidden-fields{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:20;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  width:max-content;
  min-width:150px;
  max-width:min(220px, calc(100vw - 48px));
  padding:10px;
  border:1px solid rgba(150,180,255,.24);
  border-radius:16px;
  background:rgba(8,17,31,.94);
  box-shadow:0 18px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateX(calc(-50% + var(--fields-panel-shift, 0px))) translateY(-4px);
  backdrop-filter:blur(12px);
}

.works-card__hidden-fields::after{
  content:"";
  position:absolute;
  left:var(--fields-arrow-left, 50%);
  bottom:-6px;
  width:12px;
  height:12px;
  border-right:1px solid rgba(150,180,255,.24);
  border-bottom:1px solid rgba(150,180,255,.24);
  background:rgba(8,17,31,.94);
  transform:translateX(-50%) rotate(45deg);
}

.works-card__hidden-fields[hidden]{
  display:none !important;
}

.works-card__hidden-fields span{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:.28rem .56rem;
  border-radius:999px;
  border:1px solid rgba(150,180,255,.20);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  white-space:nowrap;
}

.works-card__tech{
  position:absolute;
  left:5px;
  right:auto;
  bottom:5px;
  z-index:2;
  display:block;
  width:max-content;
  max-width:calc(100% - 28px);
  padding:2px 5px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,17,31,.72);
  color:var(--ink);
  font-size:10px;
  font-weight:700;
  line-height:1.45;
  text-align:left;
  white-space:normal;
  direction:ltr;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
}

.works-card__button{
  width:max-content;
  max-width:100%;
  margin-top:2px;
}

.works-empty-message{
  margin:24px 0 0;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(150,180,255,.18);
  background:rgba(10,16,32,.78);
  color:var(--muted);
  text-align:center;
}

.works-slider-dots{
  display:none;
}

.works-slider-dots[hidden]{
  display:none !important;
}


.works-capabilities-grid{
  gap:18px;
}

.works-capability-block h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:16px;
}

.works-capability-block p{
  margin:0;
  color:var(--muted);
  line-height:1.9;
}

.works-cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px;
  border-radius:24px;
  border:1px solid rgba(150,180,255,.22);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.20), transparent 50%),
    linear-gradient(180deg, rgba(18,28,48,.86), rgba(10,16,32,.78));
  box-shadow:0 22px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}

.works-cta-card .section__title{
  margin-bottom:10px;
  font-size:clamp(20px, 4vw, 30px);
}

.works-cta-card p:not(.section__eyebrow){
  margin:0;
  color:var(--muted);
  line-height:1.9;
}

@media (max-width:900px){
  .works-hero__inner{
    grid-template-columns:1fr;
  }

  .works-cta-card{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width:768px){
  .works-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    overflow-x:auto;
    overflow-y:visible;
    padding-inline:4px;
    padding-top:10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .works-grid::-webkit-scrollbar{
    display:none;
  }

  .works-grid .works-card{
    flex:0 0 85%;
    max-width:85%;
    scroll-snap-align:start;
  }

  .works-slider-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:16px 0 8px;
  }

  .works-slider-dot{
    inline-size:8px;
    block-size:8px;
    padding:0;
    border:1px solid rgba(150,180,255,.42);
    border-radius:999px;
    background:rgba(150,180,255,.20);
    cursor:pointer;
    transition:inline-size .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
  }

  .works-slider-dot.is-active{
    inline-size:24px;
    border-color:rgba(39,224,255,.75);
    background:linear-gradient(135deg, rgba(79,124,255,.95), rgba(39,224,255,.88));
    box-shadow:0 0 0 4px rgba(39,224,255,.10);
  }
}

@media (max-width:640px){
  .works-hero{
    padding-block:34px 30px;
  }

  .works-hero__stats{
    gap:7px;
    font-size:12px;
  }

  .works-hero__stats span{
    padding:.3rem .58rem;
  }

  .portfolio-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-block:6px 10px;
    margin-inline:-4px;
    padding-inline:4px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .portfolio-filters::-webkit-scrollbar{
    display:none;
  }

  .portfolio-filter{
    flex:0 0 auto;
  }

  .works-card__button{
    width:100%;
  }
}


@media (max-width: 640px){
  .works-card__heading{
    align-items:center;
    gap:8px;
  }

  .works-card__title{
    font-size:16px;
  }

  .works-card__tech{
    left:5px;
    right:auto;
    bottom:5px;
    max-width:calc(100% - 24px);
    padding:2px 5px;
    font-size:9.5px;
    line-height:1.45;
    white-space:normal;
  }
}

/* Works page: keep project image static on card hover */
.works-page .works-card:hover .card__visual img,
.works-page .works-card:focus-within .card__visual img{
  transform:scale(1.01);
  filter:none;
}

/* Section header action button */
.section__header--with-action{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.section__header-action{
  flex:0 0 auto;
  min-height:42px;
  padding:.62rem 1rem;
  font-size:13px;
}

@media (max-width:640px){
  .section__header--with-action{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .section__header-action{
    width:max-content;
    max-width:100%;
  }
}

/* Works page: project cards use the same fixed light language as the works hero panel */
.works-page .works-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(150,180,255,.26);
  background:
    radial-gradient(circle at 20% 0, rgba(79,124,255,.26), transparent 48%),
    radial-gradient(circle at 100% 100%, rgba(39,224,255,.16), transparent 42%),
    rgba(10,16,32,.92);
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}

.works-page .works-card > *{
  position:relative;
  z-index:2;
}


.works-page .works-card::after{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 20% 0, rgba(79,124,255,.32), transparent 46%),
    radial-gradient(circle at 100% 100%, rgba(39,224,255,.24), transparent 44%);
  transform:scale(.94);
  transition:opacity .32s ease, transform .38s ease, filter .38s ease;
}

.works-page .works-card:hover,
.works-page .works-card:focus-within{
  border-color:rgba(150,180,255,.44);
  box-shadow:0 24px 54px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.07), 0 0 34px rgba(39,224,255,.10);
}


.works-page .works-card:hover::after,
.works-page .works-card:focus-within::after{
  opacity:1;
  filter:saturate(1.08);
  transform:scale(1.04);
}

/* ===== Services section: business-result focused cards ===== */
@media (min-width: 901px){
  #services .cards-grid--showcase{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#services .card__title{
  font-size: 16px;
  line-height: 1.7;
}

#services .card__body p{
  margin-top: 0;
}