/* ============================================================
   SEEL · صيل  —  Cinematic single-page experience
   ============================================================ */

:root,
:root[data-theme="dark"]{
  --ink:        #0a0a0a;
  --ink-2:      #050507;
  --ink-3:      #111114;
  --paper:      #ffffff;
  --accent:     #00AAFF;
  --accent-2:   #4cc5ff;
  --accent-dim: rgba(0,170,255,.16);
  --t1:         rgba(255,255,255,.96);
  --t2:         rgba(255,255,255,.62);
  --t3:         rgba(255,255,255,.36);
  --t4:         rgba(255,255,255,.18);
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.14);
  --card-bg:    linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  --card-bg-solid: linear-gradient(170deg, #0d0d11, #050507);
  --logo-invert: invert(1) hue-rotate(180deg);
  --grain-opacity: .06;
  --shadow-color: rgba(0,170,255,.7);
  --cursor-blend: difference;
  color-scheme: dark;

  --ease:       cubic-bezier(.16,1,.3,1);
  --ease-soft:  cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.36,.64,1);

  --maxw: 1480px;
  --pad-x: 6vw;
}

:root[data-theme="light"]{
  --ink:        #f6f6f8;
  --ink-2:      #ececef;
  --ink-3:      #e0e0e4;
  --paper:      #ffffff;
  --accent:     #00AAFF;
  --accent-2:   #007ec2;
  --accent-dim: rgba(0,170,255,.10);
  --t1:         rgba(15,15,25,.95);
  --t2:         rgba(15,15,25,.65);
  --t3:         rgba(15,15,25,.42);
  --t4:         rgba(15,15,25,.22);
  --line:       rgba(0,0,0,.08);
  --line-2:     rgba(0,0,0,.14);
  --card-bg:    linear-gradient(160deg, rgba(0,0,0,.025), rgba(0,0,0,.01));
  --card-bg-solid: linear-gradient(170deg, #ffffff, #f0f0f3);
  --logo-invert: none;
  --grain-opacity: .03;
  --shadow-color: rgba(0,120,180,.35);
  --cursor-blend: normal;
  color-scheme: light;
}

@media (max-width:900px){ :root{ --pad-x: 24px; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

html{ scroll-behavior:smooth; background:var(--ink); }
body{
  font-family:'Tajawal','Cairo',system-ui,sans-serif;
  background:var(--ink); color:var(--t1);
  overflow-x:hidden;
  font-size:16px; line-height:1.65;
  font-weight:400;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:0; color:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:#001626; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ───── Typography ───── */
h1,h2,h3,h4{ font-family:'Cairo',sans-serif; font-weight:700; line-height:1.05; letter-spacing:-.02em; }
.display-xxl{ font-size:clamp(56px,11vw,180px); font-weight:800; line-height:.92; letter-spacing:-.045em; }
.display-xl { font-size:clamp(40px,7.2vw,108px); font-weight:800; line-height:.96; letter-spacing:-.04em; }
.display-l  { font-size:clamp(34px,5.4vw,76px);  font-weight:700; line-height:1.02; letter-spacing:-.035em; }
.display-m  { font-size:clamp(26px,3.4vw,46px);  font-weight:600; line-height:1.15; letter-spacing:-.02em; }
.eyebrow{
  font-family:'Cairo',sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:''; width:36px; height:1px; background:var(--accent);
}
.lede{ font-size:clamp(17px,1.4vw,21px); color:var(--t2); line-height:1.75; max-width:62ch; font-weight:300; }
.mono{ font-family:'Cairo',sans-serif; font-feature-settings:'tnum'; font-variant-numeric:tabular-nums; letter-spacing:.04em; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
section{ position:relative; padding-block:clamp(96px,12vw,180px); }

/* ───── Background fabric — subtle grain + gradient field ───── */
.grain{
  position:fixed; inset:-50%; z-index:80; pointer-events:none; opacity:var(--grain-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(7) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-6%,5%) }
  40%{ transform:translate(5%,-4%) }  60%{ transform:translate(-3%,6%) } 80%{ transform:translate(4%,-3%) }
}

/* ───── Loader / intro veil ───── */
#veil{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .9s var(--ease) .2s, visibility .9s var(--ease) .2s;
}
#veil .v-logo{ width:160px; height:auto; opacity:.0; transform:scale(.92); animation:vlogo 1.3s var(--ease) .15s forwards; filter:var(--logo-invert); }
#veil .v-line{
  position:absolute; left:50%; bottom:18%; width:0; height:1px; background:var(--accent);
  animation: vline 1.1s var(--ease) .6s forwards;
}
@keyframes vlogo{ to{ opacity:1; transform:scale(1); } }
@keyframes vline{ to{ width:38vw; transform:translateX(-50%); } }
body.loaded #veil{ opacity:0; visibility:hidden; }

/* ───── Cursor ───── */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; z-index:120; pointer-events:none; border-radius:50%; will-change:transform; }
.cursor-dot{ width:6px; height:6px; background:var(--accent); transform:translate(-50%,-50%); }
.cursor-ring{ width:38px; height:38px; border:1px solid rgba(0,170,255,.5); transform:translate(-50%,-50%);
  transition: width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.cursor-ring.hov{ width:72px; height:72px; background:var(--accent-dim); border-color:var(--accent); }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } body{ cursor:auto; } }

/* ───── Nav ───── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  padding:18px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  transition: padding .5s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:12px var(--pad-x);
  background:color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-logo{ display:flex; align-items:center; gap:14px; }
.nav-logo .nav-mark{
  width:36px; height:36px; flex-shrink:0; object-fit:contain;
  transition: width .4s var(--ease), height .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease);
}
.nav-logo:hover .nav-mark{
  filter: drop-shadow(0 0 16px rgba(0,170,255,.6));
  transform: rotate(-6deg);
}
.nav-logo .nav-name{
  font-family:'Cairo'; font-weight:700; font-size:26px; letter-spacing:-.02em;
  color:var(--t1); line-height:1;
  transition: font-size .4s var(--ease);
}
.nav.scrolled .nav-logo .nav-mark{ width:32px; height:32px; }
.nav.scrolled .nav-logo .nav-name{ font-size:22px; }
.nav-menu{ display:flex; align-items:center; gap:36px; }
.nav-menu a{
  font-size:14px; color:var(--t2); font-weight:500; position:relative;
  transition:color .3s var(--ease);
}
.nav-menu a:hover{ color:var(--t1); }
.nav-menu a::after{
  content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--accent);
  transition: width .4s var(--ease);
}
.nav-menu a:hover::after{ width:100%; }
.nav-cta{
  padding:11px 22px; border:1px solid var(--line-2); border-radius:999px;
  font-size:13px; font-weight:500; color:var(--t1);
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:#001626; }

/* Theme toggle */
.theme-toggle{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line-2); background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--t1); cursor:pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease);
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(20deg); }
.theme-toggle svg{ width:18px; height:18px; transition: transform .5s var(--ease); }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:none; }

.nav-burger{ display:none; width:28px; height:18px; position:relative; }
.nav-burger span{ position:absolute; left:0; right:0; height:1.5px; background:var(--t1); transition: transform .4s var(--ease), top .4s var(--ease), opacity .3s var(--ease); }
.nav-burger span:nth-child(1){ top:2px; } .nav-burger span:nth-child(2){ top:50%; } .nav-burger span:nth-child(3){ top:calc(100% - 3px); }
body.menu-open .nav-burger span:nth-child(1){ top:50%; transform:rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2){ opacity:0; }
body.menu-open .nav-burger span:nth-child(3){ top:50%; transform:rotate(-45deg); }
@media (max-width:900px){
  .nav-menu{
    position:fixed; inset:0; flex-direction:column; justify-content:center;
    background:color-mix(in srgb, var(--ink) 96%, transparent);
    backdrop-filter:blur(20px); gap:28px;
    transform:translateY(-100%); transition: transform .6s var(--ease); z-index:85;
  }
  .nav-menu a{ font-size:24px; color:var(--t1); }
  body.menu-open .nav-menu{ transform:translateY(0); }
  .nav-burger{ display:block; z-index:91; }
  .nav-cta{ display:none; }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  min-height:100svh; padding-top:140px; padding-bottom:80px;
  display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero-canvas{ position:absolute; inset:0; z-index:0; }
.hero-pattern{
  position:absolute; inset:0; z-index:1; opacity:.18; pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0, transparent 18%, rgba(0,170,255,.08) 18.4%, transparent 19%),
    radial-gradient(circle at 0% 0%,   transparent 0, transparent 18%, rgba(0,170,255,.05) 18.4%, transparent 19%),
    radial-gradient(circle at 100% 0%, transparent 0, transparent 18%, rgba(0,170,255,.05) 18.4%, transparent 19%),
    radial-gradient(circle at 0% 100%, transparent 0, transparent 18%, rgba(0,170,255,.05) 18.4%, transparent 19%),
    radial-gradient(circle at 100% 100%,transparent 0, transparent 18%, rgba(0,170,255,.05) 18.4%, transparent 19%);
  background-size: 120px 120px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero-glow{
  position:absolute; left:50%; top:50%; width:1200px; height:1200px; transform:translate(-50%,-50%); z-index:1;
  background: radial-gradient(circle at 50% 50%, rgba(0,170,255,.18), rgba(0,170,255,.05) 30%, transparent 60%);
  filter: blur(20px); pointer-events:none;
  animation: float-glow 14s ease-in-out infinite;
}
@keyframes float-glow{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{    transform:translate(-50%,-52%) scale(1.08); }
}
.hero-content{ position:relative; z-index:2; width:100%; }
.hero-mark{
  width:240px; height:auto; margin-bottom:48px;
  opacity:0; transform:translateY(20px);
  animation: rise 1.1s var(--ease) .9s forwards;
}
.hero-mark img{ width:100%; height:auto; filter: var(--logo-invert) drop-shadow(0 0 40px rgba(0,170,255,.55)); }
@media (max-width:640px){ .hero-mark{ width:180px; } }
.hero h1{
  font-family:'Cairo'; font-weight:800;
  font-size:clamp(48px,9vw,140px);
  line-height:1.08; letter-spacing:-.035em;
  margin-bottom:28px;
  padding-block:.05em;
}
.hero h1 .word{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.15em 0 .2em;
  line-height:1;
}
.hero h1 .word span{
  display:inline-block; transform:translateY(110%);
  animation: rise2 1.2s var(--ease) forwards;
  padding-bottom:.05em;
}
@keyframes rise2{ to{ transform:translateY(0); } }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
.hero h1 .accent{ color:var(--accent); }
.hero-sub{
  font-size:clamp(20px,2vw,32px); color:var(--t2); font-weight:300; margin-bottom:64px;
  opacity:0; animation: rise 1s var(--ease) 1.3s forwards;
}
.hero-actions{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  opacity:0; animation: rise 1s var(--ease) 1.55s forwards;
}
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 32px; border-radius:999px;
  font-size:15px; font-weight:600;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position:relative; overflow:hidden;
}
.btn-primary{
  background:var(--accent); color:#001828;
  box-shadow: 0 18px 60px -22px rgba(0,170,255,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 26px 80px -22px rgba(0,170,255,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary .arrow{ width:18px; height:18px; transition: transform .4s var(--ease); }
.btn-primary:hover .arrow{ transform:translateX(-6px); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--t1); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

.hero-scroll{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--t3); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  opacity:0; animation: rise 1s var(--ease) 1.8s forwards;
}
.hero-scroll .track{
  width:1px; height:48px; background:linear-gradient(to bottom, transparent, var(--t3), transparent);
  position:relative; overflow:hidden;
}
.hero-scroll .track::after{
  content:''; position:absolute; left:0; top:-50%; width:100%; height:50%; background:var(--accent);
  animation: scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ top:-50%; } 100%{ top:100%; } }

/* ===========================================================
   ABOUT — eclipse
   =========================================================== */
.about{ background: linear-gradient(180deg, transparent, var(--ink-2) 60%, var(--ink-2)); }
.about-wrap{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px,8vw,140px); align-items:center; }
@media (max-width:1024px){ .about-wrap{ grid-template-columns: 1fr; } }
.eclipse{
  position:relative; width:100%; aspect-ratio:1; max-width:560px; margin-inline:auto;
}
.eclipse .ring{
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-2);
}
.eclipse .ring.r2{ inset:8%; border-color:rgba(0,170,255,.18); }
.eclipse .ring.r3{ inset:18%; border-color:var(--line); }
.eclipse .ring.r4{ inset:32%; border-color:rgba(0,170,255,.1); border-style:dashed; }
.eclipse .sun{
  position:absolute; inset:18%; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #1a1a1e 0%, #060608 60%, #000 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 0 80px rgba(0,170,255,.12);
}
.eclipse .corona{
  position:absolute; inset:8%; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(0,170,255,.5) 18%, transparent 36%, transparent 100%);
  filter: blur(22px); opacity:.55; mix-blend-mode:screen;
  animation: spin 28s linear infinite;
}
.eclipse .moon{
  position:absolute; width:50%; height:50%; left:24%; top:8%; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #111114 0%, #000 70%);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  animation: orbit 14s ease-in-out infinite alternate;
}
@keyframes orbit{ from{ transform:translate(-12%,-8%); } to{ transform:translate(14%,12%); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.eclipse .dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); }
.eclipse .dot.d1{ top:6%; left:50%; }
.eclipse .dot.d2{ bottom:6%; left:30%; }
.eclipse .dot.d3{ top:42%; right:4%; }
.about-text .eyebrow{ margin-bottom:24px; }
.about-text h2{ margin-bottom:32px; }
.about-text p{ color:var(--t2); margin-bottom:18px; max-width:54ch; font-size:17px; line-height:1.85; font-weight:300; }
.about-stats{ display:flex; gap:48px; margin-top:48px; padding-top:36px; border-top:1px solid var(--line); flex-wrap:wrap; }
.about-stats .stat .n{ font-family:'Cairo'; font-weight:700; font-size:48px; color:var(--accent); letter-spacing:-.04em; line-height:1; }
.about-stats .stat .l{ color:var(--t3); font-size:13px; margin-top:8px; letter-spacing:.06em; }

/* ===========================================================
   VALUES
   =========================================================== */
.values-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:72px; gap:48px; flex-wrap:wrap; }
.values-head .lede{ max-width:44ch; }
.values-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px;
}
@media (max-width:1024px){ .values-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .values-grid{ grid-template-columns: 1fr; } }
.value{
  position:relative; padding:40px 32px 36px;
  border:1px solid var(--line);
  border-radius:18px;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  overflow:hidden;
  transition: transform .6s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  min-height:240px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.value::before{
  content:''; position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(0,170,255,.18), transparent 40%);
  opacity:0; transition: opacity .5s var(--ease);
}
.value:hover{ transform:translateY(-6px); border-color:rgba(0,170,255,.35); }
.value:hover::before{ opacity:1; }
.value .num{ font-family:'Cairo'; font-size:13px; color:var(--accent); letter-spacing:.12em; }
.value .ttl{ font-family:'Cairo'; font-size:38px; font-weight:700; letter-spacing:-.02em; line-height:1.1; margin-top:auto; padding-top:32px; }
.value .desc{ color:var(--t3); font-size:14px; margin-top:14px; line-height:1.7; font-weight:300; }
.value.float-a{ animation: floatA 9s ease-in-out infinite; }
.value.float-b{ animation: floatB 11s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes floatB{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ===========================================================
   WHY — three icon blocks + 4-step process indicator
   =========================================================== */
.why{ background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.why-head{ text-align:center; margin-bottom:80px; }
.why-head .eyebrow{ justify-content:center; }
.why-head h2{ margin-top:24px; }
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-bottom:120px; }
@media (max-width:900px){ .why-grid{ grid-template-columns: 1fr; } }
.why-card{
  padding:48px 36px;
  border:1px solid var(--line);
  border-radius:20px;
  background: var(--card-bg);
  text-align:center;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
  position:relative; overflow:hidden;
}
.why-card:hover{ transform:translateY(-6px); border-color:var(--accent); }
.why-icon{
  width:72px; height:72px; margin:0 auto 28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
  background: radial-gradient(circle at 30% 30%, rgba(0,170,255,.2), rgba(0,170,255,.05));
  border:1px solid rgba(0,170,255,.3);
  box-shadow: inset 0 0 24px rgba(0,170,255,.15);
}
.why-icon svg{ width:34px; height:34px; color:var(--accent); }
.why-card h3{ font-size:26px; font-weight:700; margin-bottom:14px; }
.why-card p{ color:var(--t2); font-size:15px; font-weight:300; line-height:1.7; }

.process-bar{ position:relative; padding-block: 8px; }
.process-bar .line{
  position:absolute; left:0; right:0; top:38px; height:1px; background:var(--line);
}
.process-bar .line .fill{
  position:absolute; inset:0 auto 0 0; background:var(--accent); width:0;
  box-shadow: 0 0 18px var(--accent);
  transition: width 1.4s var(--ease);
}
.process-bar.in .line .fill{ width:100%; }
.process-bar .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:900px){ .process-bar .steps{ grid-template-columns:repeat(2,1fr); } .process-bar .line{ display:none; } }
.process-bar .step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.process-bar .dot{
  width:14px; height:14px; border-radius:50%; background:var(--ink); border:2px solid var(--t3);
  position:relative; z-index:2; transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.process-bar.in .step.on .dot{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 24px var(--accent); }
.process-bar .step .label{ color:var(--t2); font-size:14px; font-weight:500; }
.process-bar .step .n{ font-family:'Cairo'; font-size:12px; color:var(--t3); letter-spacing:.16em; }

/* ===========================================================
   PROCESS — horizontal scroll timeline
   =========================================================== */
.proc{ background:var(--ink); padding-block: clamp(60px,8vw,120px) 0; }
.proc-head{ margin-bottom:80px; }
.proc-track{
  position:relative; height: 380vh;
}
.proc-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center; overflow:hidden;
}
.proc-rail{
  display:flex; gap: clamp(32px,5vw,64px); padding-inline: var(--pad-x); will-change:transform;
}
.proc-card{
  flex:0 0 clamp(320px, 64vw, 720px);
  height:74vh; max-height:680px;
  border-radius:22px; overflow:hidden; position:relative;
  border:1px solid var(--line);
  background: linear-gradient(160deg, #0f0f12, #050507);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(32px,4vw,56px);
}
.proc-card .stage{
  font-family:'Cairo'; font-size:13px; letter-spacing:.32em; color:var(--accent); text-transform:uppercase;
}
.proc-card .num{
  position:absolute; left: clamp(28px,4vw,56px); top: clamp(28px,4vw,56px);
  font-family:'Cairo'; font-weight:800; font-size: clamp(180px,22vw,320px);
  color: rgba(255,255,255,.04); letter-spacing:-.06em; line-height:.85;
  pointer-events:none;
}
.proc-card h3{ font-family:'Cairo'; font-size: clamp(36px,4.4vw,68px); line-height:1.02; max-width:14ch; }
.proc-card .body{ color:var(--t2); font-size:16px; line-height:1.8; max-width:48ch; font-weight:300; }
.proc-card .bg-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%);
}
.proc-card .glow{
  position:absolute; width:520px; height:520px; right:-100px; top:-100px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,170,255,.16), transparent 60%);
  filter:blur(10px); pointer-events:none;
}
.proc-progress{
  position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:36px; height:2px;
  background: var(--line); border-radius:2px; overflow:hidden; z-index:3;
}
.proc-progress .pf{ position:absolute; inset:0 auto 0 0; width:0; background:var(--accent); box-shadow:0 0 18px var(--accent); }
.proc-counter{
  position:absolute; right:var(--pad-x); bottom:56px; font-family:'Cairo'; font-size:14px; color:var(--t2); letter-spacing:.12em; z-index:3;
}
@media (max-width:900px){
  .proc-track{ height:auto; }
  .proc-sticky{ position:relative; height:auto; }
  .proc-rail{ flex-direction:column; padding-block:24px; }
  .proc-card{ flex:0 0 auto; height:auto; min-height:520px; }
  .proc-progress, .proc-counter{ display:none; }
}

/* ===========================================================
   SERVICES — creative cards
   =========================================================== */
.serv{ background: linear-gradient(180deg, var(--ink), var(--ink-2)); }
.serv-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap; margin-bottom:72px; }
.serv-head .lede{ max-width:42ch; }
.serv-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width:1024px){ .serv-grid{ grid-template-columns: 1fr; max-width:560px; margin-inline:auto; } }

.serv-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:24px;
  background: var(--card-bg-solid);
  display:flex; flex-direction:column;
  transition: transform .6s var(--ease), border-color .5s var(--ease);
}
.serv-card:hover{ transform:translateY(-8px); border-color: rgba(0,170,255,.4); }

.serv-card .visual{
  position:relative; aspect-ratio: 1.45; overflow:hidden;
  border-bottom:1px solid var(--line);
  background: radial-gradient(circle at center, rgba(0,170,255,.06), transparent 70%), #060608;
}
.serv-card .visual::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 85%);
}
.serv-card .serv-num{
  position:absolute; top:18px; left:18px; z-index:3;
  font-family:'Cairo'; color: var(--accent);
  font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; font-weight:600;
  background: rgba(0,170,255,.08); border:1px solid rgba(0,170,255,.22);
  padding: 7px 12px; border-radius:999px;
  backdrop-filter: blur(8px);
}
.serv-card .vart{ position:absolute; inset:0; }

.serv-card .body{ padding: 32px 32px 30px; display:flex; flex-direction:column; gap:18px; flex:1; }
.serv-card h3{
  font-family:'Cairo'; font-size: clamp(44px,4.4vw,64px);
  font-weight:800; line-height:.98; letter-spacing:-.045em;
}
.serv-card h3 .dot{ color:var(--accent); }
.serv-card .serv-lede{ color:var(--t2); font-size:15px; line-height:1.6; font-weight:300; }
.serv-card ul{ list-style:none; padding:0; margin:0; }
.serv-card li{
  padding: 13px 0; border-top:1px solid var(--line);
  color: var(--t2); font-size:14px;
  display:flex; align-items:center; gap:14px;
  transition: color .35s var(--ease), padding .35s var(--ease);
  cursor:default;
}
.serv-card li::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background: var(--accent); flex-shrink:0; transition: width .3s var(--ease), border-radius .3s var(--ease);
}
.serv-card li:hover{ color:var(--t1); padding-inline-start:8px; }
.serv-card li:hover::before{ width:16px; border-radius:3px; }
.serv-card .foot{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  color:var(--t3); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  transition: color .4s var(--ease);
}
.serv-card .foot svg{ transition: transform .4s var(--ease); width:18px; height:18px; }
.serv-card:hover .foot{ color: var(--accent); }
.serv-card:hover .foot svg{ transform: translate(-4px,-4px); }

/* ── Visual 1: نكتب — typography drift ────── */
.vart-write .letter{
  position:absolute; font-family:'Cairo'; font-weight:600;
  color: rgba(255,255,255,.16); line-height:1; user-select:none;
  animation: drift 18s ease-in-out infinite;
}
.vart-write .l1{ top:18%; left:18%; font-size:72px; color: rgba(0,170,255,.42); animation-delay:-2s; }
.vart-write .l2{ top:46%; left:64%; font-size:54px; animation-delay:-5s; }
.vart-write .l3{ top:62%; left:26%; font-size:48px; color: rgba(0,170,255,.28); animation-delay:-8s; }
.vart-write .l4{ top:18%; left:72%; font-size:42px; animation-delay:-11s; }
.vart-write .l5{ top:74%; left:70%; font-size:38px; color: rgba(0,170,255,.34); animation-delay:-14s; }
.vart-write .line{ position:absolute; left:12%; right:12%; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
.vart-write .line.ln1{ top:32%; } .vart-write .line.ln2{ top:54%; } .vart-write .line.ln3{ top:76%; }
.vart-write .caret{
  position:absolute; top:46%; left:48%; width:2px; height:34px; background:var(--accent);
  box-shadow: 0 0 14px var(--accent); animation: caret 1.1s steps(2) infinite;
}
@keyframes caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes drift{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(8px,-10px); } }
.serv-card.s1:hover .vart-write .letter{ animation-duration: 9s; }

/* ── Visual 2: نُصمّم — geometric forms ────── */
.vart-design .shape{ position:absolute; }
.vart-design .sh1{
  width:96px; height:96px; border:1.6px solid rgba(0,170,255,.7);
  border-radius:50%; top:22%; left:18%;
  animation: spin 16s linear infinite;
}
.vart-design .sh1::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,170,255,.22), transparent 65%);
  filter: blur(10px);
}
.vart-design .sh2{
  width:64px; height:64px; border:1.6px solid rgba(255,255,255,.45);
  top:52%; left:58%;
  animation: spinr 22s linear infinite;
}
.vart-design .sh3{
  width:0; height:0;
  border-left:34px solid transparent; border-right:34px solid transparent;
  border-bottom:58px solid rgba(0,170,255,.22);
  top:20%; left:62%;
  animation: floaty 8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(0,170,255,.3));
}
.vart-design .sh4{
  width:12px; height:12px; background: var(--accent); border-radius:50%;
  top:70%; left:30%; box-shadow: 0 0 20px var(--accent);
  animation: floaty 6s ease-in-out infinite;
}
.vart-design .axis{
  position:absolute; top:50%; left:50%; width:60%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,170,255,.3), transparent);
  transform: translate(-50%, -50%);
}
.vart-design .axis.ax2{ width:1px; height:60%; background: linear-gradient(180deg, transparent, rgba(0,170,255,.3), transparent); }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes spinr{ to{ transform: rotate(-360deg); } }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }
.serv-card.s2:hover .vart-design .sh1{ animation-duration: 6s; }
.serv-card.s2:hover .vart-design .sh2{ animation-duration: 8s; }

/* ── Visual 3: نُبهج — light burst ────── */
.vart-events .burst{
  position:absolute; top:50%; left:50%;
  width:90%; height:90%; transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, transparent 0%, rgba(0,170,255,.32) 14%, transparent 28%, rgba(0,170,255,.32) 42%, transparent 56%, rgba(0,170,255,.32) 70%, transparent 84%, rgba(0,170,255,.32) 98%, transparent 100%);
  border-radius:50%; filter: blur(16px); opacity:.85;
  animation: spin 24s linear infinite;
}
.vart-events .ring{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:60%; aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(0,170,255,.3);
  animation: spinr 30s linear infinite;
}
.vart-events .dot-core{
  position:absolute; top:50%; left:50%; width:22px; height:22px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, #fff 0%, var(--accent) 50%, transparent 90%);
  box-shadow: 0 0 36px var(--accent), 0 0 80px rgba(0,170,255,.65);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.2); } }
.vart-events .spark{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: spark 4s ease-in-out infinite;
}
.vart-events .sp1{ top:22%; left:30%; animation-delay:0s; }
.vart-events .sp2{ top:30%; left:72%; animation-delay:-.8s; }
.vart-events .sp3{ top:66%; left:22%; animation-delay:-1.6s; }
.vart-events .sp4{ top:74%; left:68%; animation-delay:-2.4s; }
.vart-events .sp5{ top:50%; left:14%; animation-delay:-3.2s; }
.vart-events .sp6{ top:48%; left:86%; animation-delay:-2s; }
@keyframes spark{ 0%,100%{ opacity:.25; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.5); } }
.serv-card.s3:hover .vart-events .burst{ animation-duration: 8s; }
.serv-card.s3:hover .vart-events .dot-core{ animation-duration: 1.2s; }

/* ===========================================================
   PROJECTS — case study cards
   =========================================================== */
.projects{ background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.projects-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap; margin-bottom:72px; }
.projects-head h2{ margin-top:24px; }
.projects-head .lede{ max-width:42ch; }
.projects-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:24px;
}
@media (max-width:900px){ .projects-grid{ grid-template-columns: 1fr; } }
.project{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:24px;
  background: linear-gradient(160deg, #0e0e12, #050507);
  padding: 36px;
  display:flex; flex-direction:column; gap:24px;
  min-height:420px;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.project:hover{ transform:translateY(-6px); border-color:rgba(0,170,255,.35); }
.project .browser{
  position:relative; flex:1; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-2);
  background: var(--card-bg);
  min-height:200px;
  display:flex; flex-direction:column;
}
.project .browser .bar{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);
}
.project .browser .bar .dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.project .browser .bar .url{
  margin-inline-start:14px; padding: 6px 14px; border-radius:6px;
  background:rgba(255,255,255,.05); color:var(--t2); font-size:12px; font-family:'Cairo';
  letter-spacing:.04em; flex:1; text-align:center; max-width:60%;
}
.project .browser .canvas{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  background: var(--proj-bg, radial-gradient(circle at 30% 40%, rgba(0,170,255,.22), transparent 60%));
  overflow:hidden;
}
.project .browser .canvas::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%);
}
.project .browser .canvas .label{
  position:relative; z-index:2; font-family:'Cairo'; font-weight:700;
  font-size: clamp(34px, 4vw, 56px); color:var(--t1);
  letter-spacing:-.03em; text-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.project .meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.project .meta .tag{
  font-family:'Cairo'; font-size:12px; letter-spacing:.16em;
  color:var(--accent); padding:6px 14px; border:1px solid rgba(0,170,255,.3);
  border-radius:999px; background:var(--accent-dim);
}
.project .meta .url{
  font-family:'Cairo'; font-size:13px; color:var(--t3); letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:8px;
  transition: color .3s var(--ease);
}
.project:hover .meta .url{ color:var(--accent); }
.project .meta .url svg{ width:14px; height:14px; flex-shrink:0; transition: transform .3s var(--ease); }
.project:hover .meta .url svg{ transform:translate(-3px,-3px); }

/* Details link (internal /projects/{slug}) — small pill button */
.project .meta .details-link{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px; border-radius:999px;
  background: var(--accent-dim); border:1px solid rgba(0,170,255,.3);
  color: var(--accent); font-size:12px; font-weight:600;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.project .meta .details-link:hover{ background: var(--accent); color:#001828; transform: translateY(-1px); }
.project .meta .details-link svg{ width:12px; height:12px; transition: transform .3s var(--ease); }
.project .meta .details-link:hover svg{ transform: translateX(-3px); }
.project .meta{ flex-wrap:wrap; gap:10px; }
.project h3{
  font-family:'Cairo'; font-size: clamp(28px,3vw,40px); font-weight:700;
  line-height:1.1; letter-spacing:-.02em;
}
.project h3 .en{ display:block; font-size:.55em; color:var(--t3); font-weight:500; margin-top:6px; letter-spacing:.04em; font-family:'Tajawal'; }
.project p{ color:var(--t2); font-size:15px; line-height:1.75; font-weight:300; }

/* per-project gradient backgrounds */
.project.p1 .browser .canvas{ background: radial-gradient(circle at 30% 40%, rgba(0,200,140,.32), transparent 65%), radial-gradient(circle at 70% 70%, rgba(0,170,255,.22), transparent 60%), #0a0a0a; }
.project.p2 .browser .canvas{ background: radial-gradient(circle at 30% 30%, rgba(180,140,255,.28), transparent 60%), radial-gradient(circle at 70% 70%, rgba(0,170,255,.22), transparent 65%), #0a0a0a; }
.project.p3 .browser .canvas{ background: radial-gradient(circle at 30% 40%, rgba(255,180,80,.22), transparent 60%), radial-gradient(circle at 70% 70%, rgba(0,170,255,.20), transparent 60%), #0a0a0a; }
.project.p4 .browser .canvas{ background: radial-gradient(circle at 30% 40%, rgba(0,170,255,.30), transparent 60%), radial-gradient(circle at 70% 70%, rgba(80,200,255,.18), transparent 60%), #0a0a0a; }

/* ===========================================================
   GROUP — Seel sister companies
   =========================================================== */
.group{ background: var(--ink); }
.group-head{ text-align:center; margin-bottom:72px; }
.group-head .eyebrow{ justify-content:center; }
.group-head h2{ margin-top:24px; }
.group-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
@media (max-width:900px){ .group-grid{ grid-template-columns: 1fr; } }
.group-card{
  position:relative; overflow:hidden;
  padding: 44px 36px 40px;
  border-radius:22px;
  border:1px solid var(--line);
  background: var(--card-bg);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
  display:flex; flex-direction:column; gap:22px;
  min-height:340px;
}
.group-card::before{
  content:''; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%;
  background: var(--gc-glow, radial-gradient(circle, rgba(0,170,255,.22), transparent 60%));
  filter:blur(10px); pointer-events:none; opacity:.8;
  transition: transform .8s var(--ease), opacity .5s var(--ease);
}
.group-card:hover{ transform:translateY(-6px); border-color: var(--gc-color,var(--accent)); }
.group-card:hover::before{ transform:scale(1.15); opacity:1; }
.group-card .gc-mark{
  width:64px; height:64px; color: var(--gc-color, var(--accent));
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
  background: var(--gc-bg, var(--accent-dim));
  border:1px solid var(--gc-border, rgba(0,170,255,.3));
  box-shadow: inset 0 0 24px var(--gc-shadow, rgba(0,170,255,.16));
}
.group-card .gc-mark svg{ width:36px; height:36px; }
.group-card h3{
  font-family:'Cairo'; font-size:28px; font-weight:700;
  line-height:1.15; letter-spacing:-.02em;
}
.group-card .gc-sub{
  font-family:'Cairo'; font-size:13px; letter-spacing:.16em;
  color: var(--gc-color, var(--accent)); margin-top:-12px;
}
.group-card p{ color:var(--t2); font-size:15px; line-height:1.75; font-weight:300; margin-top:auto; }
.group-card .gc-cta{
  margin-top:14px; font-size:13px; color:var(--t3);
  display:inline-flex; align-items:center; gap:8px;
  transition:color .3s var(--ease);
}
.group-card:hover .gc-cta{ color: var(--gc-color, var(--accent)); }

/* color variants */
.group-card.tech{
  --gc-color: #00AAFF; --gc-bg: rgba(0,170,255,.10); --gc-border:rgba(0,170,255,.3);
  --gc-shadow: rgba(0,170,255,.18);
  --gc-glow: radial-gradient(circle, rgba(0,170,255,.22), transparent 60%);
}
.group-card.build{
  --gc-color: #4CD964; --gc-bg: rgba(76,217,100,.10); --gc-border:rgba(76,217,100,.3);
  --gc-shadow: rgba(76,217,100,.18);
  --gc-glow: radial-gradient(circle, rgba(76,217,100,.22), transparent 60%);
}
.group-card.ads{
  /* lighter shade for text/icon visibility, deeper shade for background mood */
  --gc-color: #c89aae;
  --gc-bg: rgba(91,55,73,.22);
  --gc-border: rgba(200,154,174,.40);
  --gc-shadow: rgba(91,55,73,.30);
  --gc-glow: radial-gradient(circle, rgba(200,154,174,.28), rgba(91,55,73,.10) 40%, transparent 65%);
}

/* ===========================================================
   CLIENTS marquee
   =========================================================== */
.clients{ background:var(--ink-2); padding-block: clamp(80px,10vw,140px); position:relative; overflow:hidden; }
.clients-head{ text-align:center; margin-bottom:72px; }
.clients-head .eyebrow{ justify-content:center; }
.clients-head h2{ margin-top:24px; }

/* Logo-plate grid */
.clients-wall{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border-top:1px solid var(--line); border-inline-start:1px solid var(--line);
  max-width:1320px; margin-inline:auto;
}
@media (max-width:1024px){ .clients-wall{ grid-template-columns: repeat(4,1fr); } }
@media (max-width:640px){  .clients-wall{ grid-template-columns: repeat(2,1fr); } }
.client-cell{
  position:relative; aspect-ratio: 16/9;
  border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  padding: 24px; text-align:center;
  transition: background .5s var(--ease);
  overflow:hidden;
}
.client-cell::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 50%, rgba(0,170,255,.16), transparent 65%);
  opacity:0; transition: opacity .5s var(--ease);
}
.client-cell:hover{ background: rgba(0,170,255,.03); }
.client-cell:hover::before{ opacity:1; }
.client-cell .cl-name{
  font-family:'Cairo'; font-weight:600; font-size: clamp(15px, 1.4vw, 19px);
  color: var(--t2); letter-spacing:.02em;
  position:relative; z-index:2;
  transition: color .4s var(--ease), transform .5s var(--ease);
}
.client-cell:hover .cl-name{ color: var(--t1); transform:translateY(-2px); }
.client-cell .cl-sub{
  display:block; font-size:10px; letter-spacing:.32em; color:var(--accent);
  margin-top:8px; font-weight:500; text-transform:uppercase; opacity:0;
  transition: opacity .4s var(--ease);
}
.client-cell:hover .cl-sub{ opacity:.85; }

/* Mini marquee strip below grid */
.cl-strip{
  margin-top:48px; position:relative; overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cl-strip .track{ display:flex; gap:42px; width:max-content; animation: mq 44s linear infinite; align-items:center; }
.cl-strip:hover .track{ animation-play-state:paused; }
.cl-strip .item{
  flex:0 0 auto; font-family:'Cairo'; font-size:14px; color:var(--t3);
  letter-spacing:.28em; text-transform:uppercase; white-space:nowrap;
  display:inline-flex; align-items:center; gap:42px;
}
.cl-strip .item::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===========================================================
   CONTACT
   =========================================================== */
.contact{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(170,80,255,.18), transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 20%,  rgba(0,170,255,.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 20% 30%,  rgba(180,110,255,.10), transparent 60%),
    var(--ink-2);
  padding-block: clamp(120px,15vw,200px);
}
.contact::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}
.contact-inner{ position:relative; z-index:2; text-align:center; }
.contact .eyebrow{ justify-content:center; margin-bottom:32px; }
.contact h2{ margin-bottom:36px; }
.contact .lede{ margin-inline:auto; text-align:center; margin-bottom:56px; color:var(--t2); }
.contact-channels{
  display:flex; justify-content:center; gap: clamp(32px, 6vw, 96px);
  flex-wrap:wrap; margin-top:48px;
}
.contact-email{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px;
  position:relative; padding: 18px 6px 18px; min-width:240px;
  border-bottom:1px solid var(--line-2);
  transition: border-color .4s var(--ease);
  text-align:start;
}
.contact-email:hover{ border-color:var(--accent); }
.contact-email .ch-label{
  font-family:'Cairo'; font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.contact-email .ch-value{
  font-family:'Cairo'; font-size: clamp(22px, 2.6vw, 36px); font-weight:700;
  color:var(--t1); letter-spacing:-.02em; transition: color .4s var(--ease);
  line-height:1.1;
}
.contact-email:hover .ch-value{ color: var(--accent); }
.contact-email svg{
  position:absolute; left:6px; top:50%; transform: translateY(-50%);
  width:22px; height:22px; color: var(--t3);
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.contact-email:hover svg{ transform: translateY(-50%) translate(-4px,-4px); color: var(--accent); }
html[dir="rtl"] .contact-email svg{ left:auto; right:6px; }
html[dir="rtl"] .contact-email:hover svg{ transform: translateY(-50%) translate(4px,-4px); }
.contact-email[dir="ltr"]{ direction:ltr; text-align:left; }
.contact-email[dir="ltr"] svg{ right:6px; left:auto; }
.contact-email[dir="ltr"]:hover svg{ transform: translateY(-50%) translate(4px,-4px); }
@media (max-width:640px){
  .contact-channels{ flex-direction:column; align-items:center; gap:8px; }
  .contact-email{ width:100%; max-width:360px; align-items:center; text-align:center; }
  .contact-email svg{ display:none; }
}
.contact-actions{ display:flex; justify-content:center; }
.contact-orbit{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(140vmin, 1100px); height:min(140vmin, 1100px); border-radius:50%;
  border:1px solid rgba(255,255,255,.05); pointer-events:none;
}
.contact-orbit::before, .contact-orbit::after{
  content:''; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(255,255,255,.04);
}
.contact-orbit::after{ inset:28%; border-color:rgba(0,170,255,.08); }

/* ===========================================================
   BLOG — Bento grid layout
   =========================================================== */
.blog-hero{ padding: clamp(120px,16vw,200px) 0 clamp(48px,6vw,80px); position:relative; }
.blog-hero-inner{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:48px; flex-wrap:wrap;
}
.blog-hero h1{ font-family:'Cairo'; font-weight:900; letter-spacing:-.04em; line-height:.95; margin:0; }
.blog-hero .lede{ max-width:46ch; margin-top:18px; }
.blog-hero-cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 24px; border-radius:999px;
  background: var(--card-bg); border:1px solid var(--line-2);
  font-size:14px; font-weight:500;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.blog-hero-cta:hover{ background:var(--accent); border-color:var(--accent); color:#001828; transform:translateY(-2px); }

/* Bento Grid Container */
.blog-bento{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap:18px;
  margin-block: clamp(32px,4vw,56px);
}
.blog-bento > *{
  border-radius:24px; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
  transition: transform .55s var(--ease);
}
.blog-bento > *:hover{ transform:translateY(-6px); }

/* Cell sizing */
.bento-feat-large{ grid-column: span 5; grid-row: span 2; min-height:560px; }
.bento-feat-accent{ grid-column: span 4; grid-row: span 2; min-height:560px; }
.bento-feat-side { grid-column: span 3; grid-row: span 2; min-height:560px; }
.bento-tutorial  { grid-column: span 7; grid-row: span 1; min-height:280px; }
.bento-categories{ grid-column: span 5; grid-row: span 1; min-height:280px; }

@media (max-width: 1100px){
  .bento-feat-large{ grid-column: span 12; min-height:480px; grid-row: span 1; }
  .bento-feat-accent{ grid-column: span 7; min-height:420px; grid-row: span 1; }
  .bento-feat-side{ grid-column: span 5; min-height:420px; grid-row: span 1; }
  .bento-tutorial{ grid-column: span 7; }
  .bento-categories{ grid-column: span 5; }
}
@media (max-width: 700px){
  .blog-bento{ grid-template-columns: 1fr; }
  .blog-bento > *{ grid-column: span 1 !important; min-height:340px; }
}

/* ── Feature Large (image hero card) ── */
.bento-feat-large{ background: var(--ink-3); }
.bento-feat-large .bg-img{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition: transform 1.2s var(--ease);
}
.bento-feat-large:hover .bg-img{ transform: scale(1.06); }
.bento-feat-large::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%);
}
.bento-feat-large > .body{
  position:relative; z-index:2; margin-top:auto; padding: 40px;
  color:#fff;
}
.bento-feat-large .badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px; border-radius:999px;
  background: rgba(255,255,255,.16); backdrop-filter:blur(10px);
  color:#fff; font-family:'Cairo'; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600;
}
.bento-feat-large h2{
  font-family:'Cairo'; font-size: clamp(28px,3.4vw,46px);
  font-weight:800; line-height:1.05; letter-spacing:-.025em;
  margin-top:24px; color:#fff;
}
.bento-feat-large .meta{
  margin-top:14px; color:rgba(255,255,255,.7); font-size:13px;
  display:flex; gap:14px; align-items:center;
}
.bento-feat-large .fire{
  position:absolute; top:30px; right:30px; z-index:3;
  width:54px; height:54px; border-radius:50%;
  background: rgba(255,255,255,.12); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}

/* ── Feature Accent (text-only colored card) ── */
.bento-feat-accent{
  background: linear-gradient(160deg, #0a82c5 0%, #00AAFF 100%);
  color:#001828;
  padding: 40px;
}
.bento-feat-accent::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(255,255,255,.10), transparent 60%);
}
.bento-feat-accent .badge{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Cairo'; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#001828; opacity:.7; font-weight:600;
}
.bento-feat-accent .open-arrow{
  position:absolute; top:30px; right:30px; z-index:2;
  width:48px; height:48px; border-radius:50%;
  background:rgba(0,24,40,.16); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  transition: background .4s var(--ease), transform .5s var(--ease);
}
.bento-feat-accent:hover .open-arrow{ background:rgba(0,24,40,.3); transform:rotate(45deg); }
.bento-feat-accent .open-arrow svg{ width:18px; height:18px; color:#001828; }
.bento-feat-accent h2{
  position:relative; z-index:1; margin-top:18px;
  font-family:'Cairo'; font-size: clamp(28px,3vw,42px); font-weight:800;
  letter-spacing:-.025em; line-height:1.05; color:#001828;
}
.bento-feat-accent p{
  position:relative; z-index:1; margin-top:18px; max-width:38ch;
  color:rgba(0,24,40,.78); font-size:14px; line-height:1.7; font-weight:400;
}
.bento-feat-accent .more-link{ color:#001828; text-decoration:underline; font-weight:600; }
.bento-feat-accent .secondary-list{ position:relative; z-index:1; margin-top:auto; padding-top:28px; }
.bento-feat-accent .secondary-list a{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding: 18px 0; border-top:1px solid rgba(0,24,40,.18);
  font-family:'Cairo'; font-size:14px; font-weight:600; color:#001828;
  transition: padding .3s var(--ease);
}
.bento-feat-accent .secondary-list a:hover{ padding-inline-start:8px; }
.bento-feat-accent .secondary-list svg{ width:22px; height:22px; flex-shrink:0; }

/* ── Feature Side (image card, lighter color theme) ── */
.bento-feat-side{
  background: linear-gradient(170deg, #5b3749 0%, #2c1925 100%);
  color:#fff; padding: 28px;
}
.bento-feat-side .badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Cairo'; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.6); font-weight:500;
}
.bento-feat-side .badge .hot{
  background:#fff; color:#5b3749;
  padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:700;
}
.bento-feat-side h2{
  font-family:'Cairo'; font-size: clamp(22px,2vw,30px); font-weight:800;
  line-height:1.1; letter-spacing:-.02em; margin-top:20px;
}
.bento-feat-side .img{
  position:relative; margin-top:auto;
  aspect-ratio: 1/1.1; border-radius:14px; overflow:hidden;
  background-size:cover; background-position:center;
}
.bento-feat-side .img::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(91,55,73,.4) 100%);
}

/* ── Tutorial Card (medium image with play overlay) ── */
.bento-tutorial{
  background: var(--card-bg);
  border:1px solid var(--line);
}
.bento-tutorial .bg-img{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter: brightness(.55) saturate(.9);
  transition: filter .5s var(--ease), transform 1s var(--ease);
}
.bento-tutorial:hover .bg-img{ filter: brightness(.7) saturate(1); transform:scale(1.04); }
.bento-tutorial::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(135deg, rgba(0,0,0,.4), rgba(0,0,0,.1));
}
.bento-tutorial .body{
  position:relative; z-index:2; margin-top:auto; padding: 26px 30px;
}
.bento-tutorial .badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Cairo'; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; opacity:.82; font-weight:500;
}
.bento-tutorial h3{
  font-family:'Cairo'; font-size: clamp(20px,2vw,28px); font-weight:700;
  letter-spacing:-.02em; line-height:1.2; margin-top:14px; color:#fff;
  max-width:28ch;
}
.bento-tutorial .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.bento-tutorial:hover .play{ background:rgba(255,255,255,.3); transform:translate(-50%,-50%) scale(1.08); }
.bento-tutorial .play svg{ width:32px; height:32px; color:#fff; margin-inline-start:4px; }
.bento-tutorial .time-meta{
  position:absolute; top:24px; left:24px; z-index:2;
  font-family:'Cairo'; color:#fff; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.82;
}

/* ── Categories Pills Card ── */
.bento-categories{
  background: linear-gradient(160deg, #6b5b9c 0%, #4a3a7a 100%);
  padding: 36px 32px 28px; color:#fff;
}
.bento-categories::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 12px 12px;
}
.bento-categories .badge{
  position:relative; z-index:1;
  font-family:'Cairo'; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.7); font-weight:600;
}
.bento-categories .pills{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;
}
.bento-categories .pill{
  padding: 8px 16px; border-radius:999px;
  background:rgba(255,255,255,.16);
  font-family:'Cairo'; font-size:13px; font-weight:500;
  color:#fff;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.bento-categories .pill:hover{ background:rgba(255,255,255,.3); transform: translateY(-2px); }
.bento-categories .pill.featured{ background:#fff; color:#4a3a7a; font-weight:600; }
.bento-categories .cat-cta{
  margin-top:auto; padding-top:18px;
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
}
.bento-categories .cat-cta span{
  font-family:'Cairo'; font-size:15px; font-weight:600;
}
.bento-categories .cat-cta .arrow-circle{
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  transition: background .3s var(--ease), transform .4s var(--ease);
}
.bento-categories .cat-cta:hover .arrow-circle{ background:#fff; color:#4a3a7a; transform:translateX(-6px); }
.bento-categories .cat-cta .arrow-circle svg{ width:20px; height:20px; }

/* ── Remaining Posts Grid ── */
.blog-more{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
  margin-top:48px;
}
@media (max-width:900px){ .blog-more{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .blog-more{ grid-template-columns: 1fr; } }
.blog-card{
  background: var(--card-bg); border:1px solid var(--line); border-radius:22px;
  overflow:hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
  display:flex; flex-direction:column;
}
.blog-card:hover{ transform:translateY(-6px); border-color:var(--accent); }
.blog-card .img{
  aspect-ratio: 16/10; overflow:hidden; background:var(--ink-3);
}
.blog-card .img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease);
}
.blog-card:hover .img img{ transform: scale(1.08); }
.blog-card .info{ padding: 24px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.blog-card .meta{
  display:flex; align-items:center; gap:10px;
  font-family:'Cairo'; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t3);
}
.blog-card .meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--t3); }
.blog-card h3{
  font-family:'Cairo'; font-size:20px; font-weight:700; line-height:1.25;
  letter-spacing:-.015em; color:var(--t1);
}
.blog-card p{ color:var(--t2); font-size:14px; line-height:1.65; font-weight:300; margin-top:auto; }

/* Pagination */
.blog-pagination{
  margin-top:48px; display:flex; gap:14px; justify-content:center;
}

/* ===========================================================
   LATEST POSTS — homepage section
   =========================================================== */
.latest-posts{ background: var(--ink); padding-block: clamp(80px,10vw,140px); }
.latest-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:48px;
  flex-wrap:wrap; margin-bottom:56px;
}
.latest-head .eyebrow{ margin-bottom:24px; }
.latest-head h2{ margin:0; }
.latest-head .lede{ max-width:42ch; margin-top:18px; }
.latest-cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px; border-radius:999px;
  background: transparent; border:1px solid var(--line-2);
  color: var(--t1); font-size:14px; font-weight:500;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.latest-cta:hover{ background:var(--accent); border-color:var(--accent); color:#001828; transform:translateY(-2px); }
.latest-cta svg{ transition: transform .3s var(--ease); }
.latest-cta:hover svg{ transform: translateX(-4px); }

.latest-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
@media (max-width:900px){ .latest-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .latest-grid{ grid-template-columns: 1fr; } }
.latest-card{
  background: var(--card-bg); border:1px solid var(--line); border-radius:22px;
  overflow:hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
  display:flex; flex-direction:column;
}
.latest-card:hover{ transform: translateY(-6px); border-color:var(--accent); }
.latest-card .img{
  aspect-ratio: 16/10; overflow:hidden; background: var(--ink-3);
}
.latest-card .img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease);
}
.latest-card:hover .img img{ transform: scale(1.07); }
.latest-card .info{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.latest-card .meta{
  display:flex; align-items:center; gap:10px;
  font-family:'Cairo'; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3);
}
.latest-card .meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--t3); }
.latest-card .meta .cat{ color: var(--accent); font-weight:600; }
.latest-card h3{
  font-family:'Cairo'; font-size:20px; font-weight:700; line-height:1.3;
  letter-spacing:-.015em; color: var(--t1);
}
.latest-card p{ color: var(--t2); font-size:14px; line-height:1.65; font-weight:300; margin-top:auto; }
.latest-card .read-more{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Cairo'; font-size:12px; font-weight:600; letter-spacing:.05em;
  color:var(--accent); margin-top:6px;
}
.latest-card .read-more svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.latest-card:hover .read-more svg{ transform: translateX(-4px); }

/* ===========================================================
   PROJECT SINGLE — detail page
   =========================================================== */
.proj-hero{ padding: clamp(120px,16vw,180px) 0 clamp(48px,6vw,72px); position:relative; }
.proj-back{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--t3); font-family:'Cairo'; font-size:13px; letter-spacing:.08em;
  margin-bottom:48px;
  transition: color .3s var(--ease);
}
.proj-back:hover{ color: var(--accent); }
.proj-back svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.proj-back:hover svg{ transform: translateX(4px); }

.proj-hero-grid{ display:grid; grid-template-columns: 2.4fr 1fr; gap:64px; align-items:end; }
@media (max-width: 900px){ .proj-hero-grid{ grid-template-columns: 1fr; gap: 32px; } }

.proj-meta-top{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  font-family:'Cairo'; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--t3); margin-bottom:24px;
}
.proj-meta-top .proj-tag{
  padding:7px 14px; border-radius:999px;
  background: var(--accent-dim); color: var(--accent);
  border:1px solid rgba(0,170,255,.3); font-weight:600;
}
.proj-meta-top .sep{ width:4px; height:4px; border-radius:50%; background:var(--t3); }

.proj-hero h1{
  font-family:'Cairo'; font-size: clamp(48px, 8vw, 120px);
  font-weight:800; line-height:.96; letter-spacing:-.04em;
  margin:0;
}
.proj-hero .h1-en{
  display:block; font-family:'Tajawal','Cairo'; font-size: .35em; font-weight:400;
  letter-spacing:.04em; color: var(--t3); margin-top:18px; line-height:1.2;
}
.proj-hero .lede{ margin-top:36px; max-width:60ch; }

.proj-hero-cta{
  display:inline-flex; align-items:center; gap:14px;
  padding: 18px 28px; border-radius:999px;
  background: var(--accent); color: #001828;
  font-family:'Cairo'; font-weight:600; font-size:14px; letter-spacing:.04em;
  white-space:nowrap;
  box-shadow: 0 18px 60px -22px rgba(0,170,255,.6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  align-self:end;
}
.proj-hero-cta:hover{ transform:translateY(-3px); box-shadow: 0 26px 80px -22px rgba(0,170,255,.85); }
.proj-hero-cta svg{ width:18px; height:18px; transition: transform .3s var(--ease); }
.proj-hero-cta:hover svg{ transform: translate(-4px, -4px); }

/* Featured image */
.proj-featured{
  margin-block: clamp(36px,5vw,72px);
  border-radius:24px; overflow:hidden;
  border:1px solid var(--line);
  background: var(--ink-3);
  aspect-ratio: 16/9; position:relative;
}
.proj-featured img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.4s var(--ease);
}
.proj-featured:hover img{ transform: scale(1.03); }
.proj-featured::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 80%, rgba(0,0,0,.3));
}

/* Content + sidebar */
.proj-content-wrap{
  display:grid; grid-template-columns: 280px 1fr; gap: clamp(40px,6vw,80px);
  margin-block: clamp(48px,7vw,96px);
}
@media (max-width: 900px){ .proj-content-wrap{ grid-template-columns: 1fr; } }

.proj-sidebar{ position:sticky; top:120px; align-self:start; }
.proj-info-block{ padding-block:18px; border-top:1px solid var(--line); }
.proj-info-block:last-child{ border-bottom:1px solid var(--line); }
.proj-info-block .lbl{
  font-family:'Cairo'; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--t3); font-weight:600;
}
.proj-info-block .val{
  font-family:'Cairo'; font-size:16px; color: var(--t1); margin-top:8px;
  font-weight:500;
}

.proj-prose{ color: var(--t2); font-size:17px; line-height:1.85; font-weight:300; }
.proj-prose h2{
  font-family:'Cairo'; color: var(--t1); font-size: clamp(28px,3vw,40px);
  font-weight:700; letter-spacing:-.02em; margin: 56px 0 18px;
}
.proj-prose h3{ color: var(--t1); font-size: 22px; margin: 36px 0 14px; }
.proj-prose p{ margin-bottom: 22px; }
.proj-prose a{ color: var(--accent); border-bottom:1px solid currentColor; }
.proj-prose img{ width:100%; border-radius:14px; margin: 32px 0; border:1px solid var(--line); }
.proj-prose blockquote{
  border-inline-start:3px solid var(--accent);
  padding: 8px 24px; margin: 32px 0;
  color: var(--t1); font-size: 22px; line-height: 1.5; font-style: italic;
}

/* Gallery — asymmetric grid */
.proj-gallery-section{ padding-block: clamp(48px,7vw,96px); background: var(--ink-2); }
.proj-gallery-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; flex-wrap:wrap; margin-bottom: 48px;
}
.proj-gallery-head h2{ margin:0; }

.proj-gallery{
  display:grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 180px; gap: 18px;
}
@media (max-width: 700px){ .proj-gallery{ grid-template-columns: 1fr; grid-auto-rows: auto; } }
.proj-gallery .g-cell{
  border-radius:18px; overflow:hidden; position:relative;
  background: var(--ink-3); border:1px solid var(--line);
  cursor: zoom-in;
  transition: transform .55s var(--ease);
}
.proj-gallery .g-cell:hover{ transform: translateY(-4px); }
.proj-gallery .g-cell img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease);
}
.proj-gallery .g-cell:hover img{ transform: scale(1.05); }
.proj-gallery .g-cell .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  color: #fff; font-size:13px; font-family:'Cairo';
  opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.proj-gallery .g-cell:hover .cap{ opacity:1; transform:none; }

/* asymmetric cell sizes */
.proj-gallery .g-cell:nth-child(1){ grid-column: span 7; grid-row: span 2; }
.proj-gallery .g-cell:nth-child(2){ grid-column: span 5; grid-row: span 2; }
.proj-gallery .g-cell:nth-child(3){ grid-column: span 4; grid-row: span 2; }
.proj-gallery .g-cell:nth-child(4){ grid-column: span 4; grid-row: span 2; }
.proj-gallery .g-cell:nth-child(5){ grid-column: span 4; grid-row: span 2; }
.proj-gallery .g-cell:nth-child(6){ grid-column: span 6; grid-row: span 2; }
.proj-gallery .g-cell:nth-child(7){ grid-column: span 6; grid-row: span 2; }
.proj-gallery .g-cell:nth-child(n+8){ grid-column: span 4; grid-row: span 2; }
@media (max-width:1000px){
  .proj-gallery .g-cell{ grid-column: span 6 !important; grid-row: span 2 !important; }
}
@media (max-width:700px){
  .proj-gallery .g-cell{ grid-column: span 1 !important; grid-row: auto !important; height: 280px; }
}

/* Empty state for gallery */
.proj-gallery-empty{
  border:1px dashed var(--line-2); border-radius:18px;
  padding: 64px 32px; text-align:center;
}
.proj-gallery-empty .icon{ font-size:48px; opacity:.4; margin-bottom:18px; }
.proj-gallery-empty p{ color: var(--t2); }
.proj-gallery-empty code{
  display:inline-block; padding:4px 10px; border-radius:6px;
  background: var(--accent-dim); color: var(--accent); font-family: monospace; font-size:13px;
}

/* Related projects */
.proj-related{ padding-block: clamp(64px,8vw,112px); }
.proj-related h2{ margin-bottom:48px; }
.proj-related-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
@media (max-width:900px){ .proj-related-grid{ grid-template-columns: 1fr; } }
.proj-related-card{
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background: var(--card-bg);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.proj-related-card:hover{ transform: translateY(-6px); border-color: var(--accent); }
.proj-related-card .img{ aspect-ratio: 16/10; overflow:hidden; background: var(--ink-3); }
.proj-related-card img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.proj-related-card:hover img{ transform: scale(1.06); }
.proj-related-card .body{ padding: 20px 22px 22px; }
.proj-related-card .body .tag{
  display:inline-block; font-family:'Cairo'; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--accent); font-weight:600;
}
.proj-related-card .body h3{
  font-family:'Cairo'; font-size:18px; font-weight:700; margin-top:8px;
  letter-spacing:-.015em; color: var(--t1);
}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:48px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.foot-logo{ display:flex; align-items:center; gap:12px; font-family:'Cairo'; font-weight:700; font-size:20px; }
.foot-logo img{ height:42px; width:auto; filter:var(--logo-invert); }
.foot-meta{ color:var(--t3); font-size:13px; letter-spacing:.04em; }
.foot-meta a{ color:var(--t2); transition: color .3s var(--ease); border-bottom:1px solid transparent; }
.foot-meta a:hover{ color:var(--accent); border-color:var(--accent); }
.foot-divider{ width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); margin-block:32px 0; opacity:.4; }

/* ===========================================================
   Reveal system
   =========================================================== */
.rv{ opacity:0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.1s; } .rv.d2{ transition-delay:.2s; } .rv.d3{ transition-delay:.3s; }
.rv.d4{ transition-delay:.4s; } .rv.d5{ transition-delay:.5s; } .rv.d6{ transition-delay:.6s; }

/* split chars */
.split .ch{ display:inline-block; transform:translateY(110%); transition: transform 1s var(--ease); }
.split.in .ch{ transform:translateY(0); }
.split .ch:nth-child(1){ transition-delay:.02s; } .split .ch:nth-child(2){ transition-delay:.04s; }
.split .ch:nth-child(3){ transition-delay:.06s; } .split .ch:nth-child(4){ transition-delay:.08s; }
.split .ch:nth-child(5){ transition-delay:.10s; } .split .ch:nth-child(6){ transition-delay:.12s; }
.split .ch:nth-child(7){ transition-delay:.14s; } .split .ch:nth-child(8){ transition-delay:.16s; }
.split .ch:nth-child(9){ transition-delay:.18s; } .split .ch:nth-child(10){ transition-delay:.20s; }
.split .ch:nth-child(n+11){ transition-delay:.22s; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}