/* ============================================================
   EZORW — DESIGN & MOTION
   1. Tokens & base
   2. Background
   3. Navigation
   4. Hero
   5. Marquee
   6. Sections
   7. Work accordion
   8. Services
   9. Process
   10. About
   11. Contact & footer
   12. Lightbox
   13. Motion & utilities
   14. Responsive
   15. Arabic / RTL
   ============================================================ */

/* ---------------- 1. Tokens & base ---------------- */

:root {
  --bg: #06001a;
  --panel: #0e0733;
  --line: #27196b;
  --text: #efeafc;
  --muted: #a39dcc;
  --mag: #f03cf0;
  --pink: #f29cf8;
  --violet: #9b6bff;
  --ice: #bcc8f0;
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(104px + env(safe-area-inset-top, 0px));
  scrollbar-color: var(--violet) var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 Manrope, system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.lb-open { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  font-family: Michroma, Manrope, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.05;
}

p { margin: 0; }
ul { margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--pink); color: #1a0f33; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: -80px;
  inset-inline-start: 16px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.noscript-note {
  padding: 18px 24px;
  margin: 20px auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--muted);
  text-align: center;
}

/* ---------------- 2. Background ---------------- */

.bg-art {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../img/background.jpg") center / cover no-repeat;
  filter: brightness(calc(.68 - var(--d, 0) * .38));
  transition: filter .45s ease-out;
  animation: kb 45s ease-in-out infinite alternate;
  pointer-events: none;
}

.bg-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 42% at 18% 28%, rgba(155, 107, 255, .42), transparent 70%),
    radial-gradient(34% 38% at 82% 72%, rgba(240, 60, 240, .30), transparent 70%),
    radial-gradient(30% 34% at 70% 18%, rgba(90, 120, 255, .22), transparent 70%);
}

.bg-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(6, 0, 26, .55), rgba(6, 0, 26, .2) 75%);
}

/* ---------------- 3. Navigation ---------------- */

.nav {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 8px 10px 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 40px -22px rgba(0, 0, 0, .7);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.brand img {
  height: 38px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-inline-start: auto;
}

.nav-links a {
  position: relative;
  padding: 6px 1px;
  color: var(--muted);
  font: 400 11px/1 Michroma, sans-serif;
  font-style: italic;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .3s;
}

.nav-links a:hover,
.nav-links a.is-active { color: var(--text); }
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.lang {
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  font: 600 13px/1 Cairo, Manrope, sans-serif;
  cursor: pointer;
  transition: border-color .25s, transform .25s, background .25s;
}

.lang:hover {
  border-color: var(--pink);
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

.menu-btn {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s, opacity .2s;
}

.menu-btn span { top: 50%; margin-top: -1px; }
.menu-btn span::before { top: -5px; }
.menu-btn span::after { top: 5px; }

.nav.menu-open .menu-btn span { transform: rotate(45deg); }
.nav.menu-open .menu-btn span::before { transform: translateY(5px) rotate(-90deg); }
.nav.menu-open .menu-btn span::after { opacity: 0; }

/* ---------------- 4. Hero ---------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: calc(100vh - 118px);
  min-height: calc(100svh - 118px);
  padding: 42px 0 96px;
  text-align: center;
}

.frame {
  position: absolute;
  inset-inline-start: 0;
  top: 36px;
  width: clamp(120px, 20vw, 250px);
  height: clamp(70px, 10vw, 125px);
  border-top: 2px solid #fff;
  border-inline-start: 2px solid #fff;
  transform-origin: 0 0;
  animation: draw 1.2s .2s cubic-bezier(.2, .8, .2, 1) both;
  pointer-events: none;
}

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
}
.frame::before { top: -5px; inset-inline-end: -5px; }
.frame::after { bottom: -5px; inset-inline-start: -5px; }

.vert {
  position: absolute;
  inset-inline-end: -4px;
  top: 60px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 400 12px Michroma, sans-serif;
  font-style: italic;
  letter-spacing: .9em;
  color: rgba(239, 234, 252, .6);
  animation: rise 1s .9s both;
  pointer-events: none;
}

.logo {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
  animation: pop 1s cubic-bezier(.2, .8, .2, 1) both;
}

.logo::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(closest-side, rgba(240, 60, 240, .3), rgba(155, 107, 255, .26) 45%, transparent 72%);
  filter: blur(12px);
  animation: pulse 5.5s ease-in-out infinite;
  pointer-events: none;
}

.logo img {
  position: relative;
  width: clamp(140px, 17vw, 210px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(155, 107, 255, .35));
  animation: float 7s ease-in-out infinite;
}

.hero h1 {
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1.28;
  font-style: italic;
  letter-spacing: -.01em;
}

.hero h1 i {
  display: block;
  font-style: italic;
  animation: rise .9s .2s cubic-bezier(.2, .8, .2, 1) both;
}

.hero h1 span {
  display: block;
  background-image: linear-gradient(100deg, var(--pink), var(--violet), var(--ice), var(--pink));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    rise .9s .38s cubic-bezier(.2, .8, .2, 1) both,
    shift 7s 1.4s linear infinite;
}

.hero > p:not(.avail) {
  max-width: 52ch;
  margin: 24px auto 0;
  color: var(--text);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.75;
  animation: rise .9s .55s cubic-bezier(.2, .8, .2, 1) both;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  animation: rise .9s .72s cubic-bezier(.2, .8, .2, 1) both;
}

.avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  color: var(--muted);
  font: 400 11px/1 Michroma, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: rise .9s .9s cubic-bezier(.2, .8, .2, 1) both;
}

.avail i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #67f5b6;
  box-shadow: 0 0 0 0 rgba(103, 245, 182, .55);
  animation: ping 2.4s ease-out infinite;
}

.scroll-cue {
  position: absolute;
  bottom: 20px;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 400 9px/1 Michroma, sans-serif;
  letter-spacing: .35em;
  text-transform: uppercase;
  text-decoration: none;
  animation: rise 1s 1.1s both;
}

.scroll-cue i {
  position: relative;
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -100%;
  height: 100%;
  background: linear-gradient(var(--pink), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}

/* ---------------- 5. Marquee ---------------- */

.marquee {
  overflow: hidden;
  margin: 6px 0 0;
  padding: 15px 0;
  border-block: 1px solid rgba(255, 255, 255, .13);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.mq-group {
  display: flex;
  align-items: center;
  flex: none;
}

.mq-group span {
  padding: 0 24px;
  color: var(--ice);
  font: 400 11px/1 Michroma, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mq-group b {
  color: var(--pink);
  font-size: 10px;
  font-weight: 400;
}

/* ---------------- 6. Sections ---------------- */

.section { padding-top: clamp(64px, 8vw, 108px); }

.sec-head {
  max-width: 700px;
  margin-bottom: 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--mag);
  font: 400 11px/1 Michroma, sans-serif;
  font-style: italic;
  letter-spacing: .5em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--pink), transparent);
}

.section h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -.02em;
}

.sub {
  max-width: 54ch;
  margin-top: 14px;
  color: var(--muted);
}

/* ---------------- 7. Work accordion ---------------- */

.cases { display: grid; gap: 16px; }

.case {
  --mx: 50%;
  --my: 0%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 55%, rgba(155, 107, 255, .08));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 50px -28px rgba(0, 0, 0, .75);
  transition: border-color .4s, box-shadow .4s;
}

.case::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(240, 60, 240, .16), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}

.case::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(240, 60, 240, .95), rgba(155, 107, 255, .6) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}

.case:hover::before,
.case:hover::after,
.case.open::after { opacity: 1; }

.case.open {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 80px -30px rgba(155, 107, 255, .6);
}

.case-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}

.case-head:focus-visible { outline-offset: -3px; }

.badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #1a0f33;
  font: 400 20px/1 Michroma, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -10px 18px rgba(110, 60, 255, .35), 0 12px 28px -8px rgba(240, 60, 240, .6);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.case-head:hover .badge { transform: rotate(-8deg) scale(1.08); }

.meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.meta strong {
  font: 400 clamp(18px, 2.1vw, 23px)/1.2 Michroma, sans-serif;
  letter-spacing: -.01em;
}

.meta em {
  color: var(--muted);
  font-size: 15px;
  font-style: normal;
}

.stack {
  display: flex;
  flex: none;
  margin-inline-end: 4px;
}

.stack i {
  width: 36px;
  height: 48px;
  margin-inline-start: -18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(155, 107, 255, .14));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.stack i:nth-child(1) { transform: rotate(-9deg); }
.stack i:nth-child(2) { transform: rotate(0); }
.stack i:nth-child(3) { transform: rotate(9deg); }

.case-head:hover .stack i:nth-child(1) { transform: translateX(-14px) rotate(-16deg); }
.case-head:hover .stack i:nth-child(3) { transform: translateX(14px) rotate(16deg); }

.count {
  flex: none;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--ice);
  font-size: 13px;
  white-space: nowrap;
}

.plus {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--text);
}

.plus::after { transform: rotate(90deg); }

.case.open .plus {
  transform: rotate(135deg);
  border-color: transparent;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}

.case.open .plus::before,
.case.open .plus::after { background: #1a0f33; }

.case-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1);
}

.case.open .case-body { grid-template-rows: 1fr; }

.inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 26px;
}

.pad { padding: 0 0 28px; }

.case-desc {
  max-width: 62ch;
  margin-bottom: 20px;
  color: var(--muted);
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(108px, 13vw, 162px);
  gap: 12px;
}

.bento .work:first-child { grid-column: span 2; grid-row: span 2; }
.bento .work:nth-child(4):last-child { grid-column: span 2; }

/* Exactly three works: big tile + two wide strips, so no cell is left empty. */
.bento .work:first-child:nth-last-child(3) ~ .work { grid-column: span 2; }

/* Six or more works: an even wall instead of the hero mosaic. */
.bento.dense {
  grid-auto-flow: dense;
}

.bento.dense > .work {
  grid-column: span 1;
  grid-row: span 1;
}

.bento.dense > .work.vertical { grid-row: span 2; }

.duo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.duo .work {
  flex: 1 1 260px;
  aspect-ratio: var(--ar, 16 / 9);
}

.duo .work.vertical { max-width: 360px; }

.work {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 16px;
  border: 1px dashed rgba(155, 107, 255, .4);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(155, 107, 255, .24), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(240, 60, 240, .15), transparent 60%),
    rgba(6, 0, 26, .45);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .4s;
}

.work:nth-child(2n) {
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(240, 60, 240, .18), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(90, 120, 255, .16), transparent 60%),
    rgba(6, 0, 26, .45);
}

.work:nth-child(3n) {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(155, 107, 255, .22), transparent 65%),
    radial-gradient(90% 80% at 100% 0%, rgba(240, 60, 240, .12), transparent 60%),
    rgba(6, 0, 26, .45);
}

.work.is-empty:hover {
  transform: translateY(-4px);
  border-color: var(--pink);
  border-style: solid;
  box-shadow: 0 22px 50px -18px rgba(240, 60, 240, .5);
}

.work.is-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .8s;
  pointer-events: none;
}

.work.is-empty:hover::after { transform: translateX(130%); }

.work.has-media {
  padding: 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, .13);
  background: #06001a;
  cursor: pointer;
}

.work.has-media img,
.work.has-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.work.has-media:hover img { transform: scale(1.055); }
.work.has-media:hover { border-color: rgba(255, 255, 255, .4); }

.work-ratio {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  background: rgba(6, 0, 26, .55);
  color: var(--ice);
  font: 400 9px/1 Michroma, sans-serif;
  letter-spacing: .12em;
}

.lbl { position: relative; z-index: 2; }

.work-title {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 34px 14px 12px;
  background: linear-gradient(transparent, rgba(4, 0, 20, .9));
  color: var(--text);
  font-size: 13px;
  text-align: start;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .35s;
}

.work.has-media:hover .work-title,
.work.has-media:focus-visible .work-title {
  opacity: 1;
  transform: none;
}

.add,
.play {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(155, 107, 255, .18);
  transition: transform .4s, background .3s;
}

.add::before,
.add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 2px;
  background: var(--text);
}

.add::after { transform: rotate(90deg); }

.play::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 14px;
  border-left: 14px solid var(--text);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.work.is-empty:hover .add,
.work.is-empty:hover .play {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  transform: scale(1.1);
}

.work.has-media .play {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 3;
  background: rgba(6, 0, 26, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .35s, background .3s;
}

.work.has-media:hover .play {
  transform: scale(1.12);
  background: linear-gradient(135deg, var(--pink), var(--violet));
}

.case-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.case-tags li {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--ice);
  font-size: 12px;
}

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, gap .25s;
}

.case-link:hover { border-color: var(--pink); gap: 12px; }

/* ---------------- 8. Services ---------------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 34px;
}

.svc {
  position: relative;
  padding: 24px 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s;
}

.svc:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 28px 55px -26px rgba(155, 107, 255, .7);
}

.svc-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #1a0f33;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 24px -8px rgba(240, 60, 240, .65);
}

.svc-ic svg { width: 27px; height: 27px; }

.svc h3 {
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.35;
}

.svc p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.svc ul {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  list-style: none;
  color: var(--ice);
  font-size: 13.5px;
}

.svc li {
  position: relative;
  padding-inline-start: 17px;
}

.svc li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

/* ---------------- 9. Process ---------------- */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 34px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 20px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  color: var(--mag);
  font: 400 11px/1 Michroma, sans-serif;
  letter-spacing: .22em;
}

.step::after {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--pink), transparent);
}

.step h3 {
  margin: 16px 0 8px;
  font-size: 16px;
}

.step p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ---------------- 10. About ---------------- */

.about {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

.about-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
}

.about-card {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 32px;
  padding: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background:
    radial-gradient(120% 130% at 8% 0%, rgba(155, 107, 255, .3), transparent 58%),
    linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(6, 0, 26, .35) 58%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 30px 60px -38px rgba(0, 0, 0, .9);
}

/* fine grid texture so the panel reads as a crafted card, not a flat box */
.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(90% 90% at 80% 0%, #000, transparent 72%);
  mask-image: radial-gradient(90% 90% at 80% 0%, #000, transparent 72%);
  pointer-events: none;
}

.about-glow {
  position: absolute;
  inset: auto -30% -60% -30%;
  z-index: -1;
  height: 90%;
  background: radial-gradient(closest-side, rgba(240, 60, 240, .34), transparent);
  filter: blur(24px);
}

.about-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-card img {
  flex: none;
  width: 62px;
  height: auto;
  filter: drop-shadow(0 12px 26px rgba(155, 107, 255, .5));
}

.about-id {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.about-word {
  font: 400 19px/1 Michroma, sans-serif;
  letter-spacing: .34em;
  color: var(--ice);
  margin-inline-start: .34em;
}

.about-role {
  color: var(--pink);
  font: 400 9.5px/1 Michroma, sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.about-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--ice);
  font-size: 12.5px;
  line-height: 1.2;
}

.about-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ef2a0;
  box-shadow: 0 0 0 4px rgba(94, 242, 160, .14);
  animation: pulseDot 2.6s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(94, 242, 160, .12); }
  50% { box-shadow: 0 0 0 6px rgba(94, 242, 160, .04); }
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.about-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ice);
  font-size: 13px;
  text-decoration: none;
  transition: color .2s;
}

.about-links a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
  transition: transform .2s, opacity .2s;
}

.about-links a:hover { color: #fff; }
.about-links a:hover::after { opacity: 1; transform: translate(2px, -2px) rotate(45deg); }

.about-body > p {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.85;
}

.about-body > p.about-lead {
  position: relative;
  margin-bottom: 18px;
  padding-inline-start: 18px;
  color: var(--text);
  font-size: clamp(18px, 1.7vw, 20px);
  line-height: 1.75;
}

.about-lead::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  bottom: .3em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--pink), var(--violet));
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.about-facts div { display: grid; gap: 6px; }

.about-facts dt {
  color: var(--mag);
  font: 400 9px/1 Michroma, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.about-facts dd {
  margin: 0;
  color: var(--ice);
  font-size: 13.5px;
  line-height: 1.5;
}

.about-body h3 {
  margin: 28px 0 12px;
  color: var(--mag);
  font: 400 10px/1 Michroma, sans-serif;
  letter-spacing: .4em;
  text-transform: uppercase;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tags span {
  padding: 6px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--ice);
  font-size: 14px;
}

/* ---------------- 11. Contact & footer ---------------- */

footer {
  margin-top: clamp(64px, 8vw, 104px);
  color: var(--text);
}

.endcap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  margin-bottom: 30px;
  padding: clamp(34px, 5vw, 62px) clamp(22px, 4vw, 52px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background:
    radial-gradient(85% 130% at 92% -20%, rgba(155, 107, 255, .42), transparent 58%),
    radial-gradient(60% 90% at 0% 120%, rgba(240, 60, 240, .18), transparent 62%),
    linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%, rgba(155, 107, 255, .07));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 30px 70px -42px rgba(0, 0, 0, .95);
  text-align: start;
}

.endcap::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 156, 248, .75), transparent);
}

.endcap-word {
  position: absolute;
  inset-inline-start: -0.02em;
  bottom: -0.22em;
  z-index: -1;
  color: transparent;
  font: 400 clamp(96px, 13.2vw, 190px)/1 Michroma, sans-serif;
  letter-spacing: .02em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.endcap-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--ice);
  font-size: 12.5px;
  line-height: 1.2;
}

.endcap-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ef2a0;
  box-shadow: 0 0 0 4px rgba(94, 242, 160, .14);
  animation: pulseDot 2.6s ease-in-out infinite;
}

.endcap h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 4.6vw, 56px);
  font-style: italic;
  line-height: 1.12;
  background: linear-gradient(100deg, #fff, var(--ice) 45%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.endcap p {
  max-width: 44ch;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
}

.endcap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.endcap .btn.ghost { gap: 10px; }

.endcap .btn.ghost svg {
  flex: none;
  width: 17px;
  height: 17px;
}

.endcap-side {
  display: grid;
  place-items: center;
}

.stamp {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(168px, 19vw, 214px);
  aspect-ratio: 1;
  direction: ltr;
}

.stamp::before,
.stamp::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.stamp::before {
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  background: radial-gradient(circle at 50% 32%, rgba(155, 107, 255, .3), rgba(6, 0, 26, .5) 68%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 26px 50px -30px rgba(240, 60, 240, .55);
}

.stamp::after {
  inset: 16%;
  border: 1px dashed rgba(255, 255, 255, .16);
}

.stamp-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: stampSpin 34s linear infinite;
}

.stamp-ring text {
  fill: var(--ice);
  font: 400 10px Michroma, sans-serif;
  letter-spacing: .14em;
}

.stamp img {
  position: relative;
  z-index: 1;
  width: 32%;
  height: auto;
  filter: drop-shadow(0 12px 26px rgba(155, 107, 255, .55));
}

@keyframes stampSpin {
  to { transform: rotate(360deg); }
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--pink), var(--violet));
  color: #1a0f33;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -10px 18px rgba(110, 60, 255, .35), 0 14px 34px -12px rgba(155, 107, 255, .8);
  transition: transform .2s, box-shadow .2s;
}

.btn::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 52%;
  background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 40px -12px rgba(155, 107, 255, .95);
}

.btn.ghost {
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-weight: 600;
}

.btn.ghost::before { display: none; }
.btn.ghost:hover { border-color: var(--pink); background: rgba(255, 255, 255, .11); }

.btn.big {
  padding: 17px 38px;
  font-size: 17px;
}

.btn.big::after {
  content: "";
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s;
}

.btn.big:hover::after { transform: translateX(5px) rotate(45deg); }

.ch-label {
  margin-bottom: 14px;
  color: var(--mag);
  font: 400 11px/1 Michroma, sans-serif;
  font-style: italic;
  letter-spacing: .6em;
  text-transform: uppercase;
}

.channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 55%, rgba(155, 107, 255, .08));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  color: var(--text);
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s;
}

.ch:hover {
  transform: translateY(-6px);
  border-color: var(--pink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 24px 50px -22px rgba(240, 60, 240, .6);
}

.ch-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fff;
  color: #06001a;
  box-shadow: inset 0 -6px 12px rgba(155, 107, 255, .25), 0 8px 20px -8px rgba(255, 255, 255, .5);
}

.ch-ic svg { width: 25px; height: 25px; }

.ch-t {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ch-t b { font-size: 16px; font-weight: 600; }

.ch-t small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
}

.arr {
  flex: none;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--muted);
  border-top: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .3s, border-color .3s;
}

.ch:hover .arr {
  transform: translate(4px, -4px) rotate(45deg);
  border-color: var(--pink);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  padding: 22px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--muted);
  font-size: 13px;
}

.bar-l {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font: 400 13px/1 Michroma, sans-serif;
}

.bar-l img { height: 26px; width: auto; }

.top {
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  text-decoration: none;
  transition: border-color .25s, transform .25s;
}

.top:hover {
  border-color: var(--pink);
  transform: translateY(-2px);
}

/* ---------------- 12. Lightbox ---------------- */

.lightbox {
  width: min(1080px, 94vw);
  max-width: 1080px;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(3, 0, 18, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lb-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  background: rgba(10, 4, 48, .95);
  box-shadow: 0 40px 120px -30px #000;
}

.lb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 12px;
}

.lb-cap {
  overflow: hidden;
  color: var(--ice);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, transform .25s;
}

.lb-close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }

.lb-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  overflow: hidden;
  border-radius: 14px;
  background: #06001a;
}

.lb-stage img,
.lb-stage video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 74vh;
}

.lb-stage iframe {
  display: block;
  width: min(100%, 1000px);
  aspect-ratio: 16 / 9;
  border: 0;
}

.lb-stage.is-vertical iframe {
  width: min(420px, 100%, calc(74vh * 9 / 16));
  aspect-ratio: 9 / 16;
}

.lb-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0 0 3px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(6, 0, 26, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .25s;
}

.lb-nav:hover { background: rgba(155, 107, 255, .6); }
.lb-nav[hidden] { display: none; }
.lb-nav.prev { inset-inline-start: 24px; }
.lb-nav.next { inset-inline-end: 24px; }

/* ---------------- 13. Motion & utilities ---------------- */

@keyframes float {
  50% { transform: translateY(-14px) rotate(-1.5deg); }
}

@keyframes pulse {
  50% { opacity: .55; transform: scale(1.06); }
}

@keyframes pop {
  from { opacity: 0; transform: translateX(40px) scale(.86); }
  to { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes shift {
  to { background-position: 200% 0; }
}

@keyframes draw {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: none; }
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(103, 245, 182, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(103, 245, 182, 0); }
}

@keyframes scrollLine {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes kb {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

@keyframes workIn {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fsw {
  from { opacity: .25; }
  to { opacity: 1; }
}

@keyframes navIn {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}

.fade-sw { animation: fsw .4s ease-out both; }

.case.open .work {
  animation: workIn .6s calc(var(--i) * 90ms + .12s) cubic-bezier(.2, .8, .2, 1) both;
}

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2, .8, .2, 1);
}

.rv.in { opacity: 1; transform: none; }

.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------------- 14. Responsive ---------------- */

@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .bento { grid-auto-rows: 132px; }
  .about { grid-template-columns: 1fr; }
  .about-card { max-width: 420px; }
}

@media (max-width: 900px) {
  .nav { padding: 8px 10px 8px 16px; }
  .nav-actions { margin-inline-start: auto; }
  .menu-btn { display: block; }

  .nav-links {
    counter-reset: navitem;
    position: absolute;
    top: calc(100% + 12px);
    inset-inline: 0;
    z-index: 2;
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 10px;
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 26px;
    background:
      radial-gradient(120% 130% at 100% 0%, rgba(240, 60, 240, .20), transparent 58%),
      radial-gradient(120% 120% at 0% 100%, rgba(155, 107, 255, .24), transparent 58%),
      rgba(8, 2, 32, .96);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 30px 60px -24px rgba(0, 0, 0, .85);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transform-origin: top center;
    transition: opacity .28s ease, transform .34s cubic-bezier(.2, .8, .2, 1), visibility .28s;
  }

  .nav.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-links a {
    counter-increment: navitem;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 17px;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--muted);
    transition: color .25s, background .3s;
  }

  .nav-links a::before {
    content: "0" counter(navitem);
    flex: none;
    font: 400 9px/1 Michroma, sans-serif;
    font-style: normal;
    letter-spacing: .08em;
    color: rgba(230, 226, 255, .34);
    transition: color .3s;
  }

  .nav-links a::after {
    content: "\2192";
    position: static;
    inset: auto;
    display: block;
    flex: none;
    margin-inline-start: auto;
    width: auto;
    height: auto;
    background: none;
    font-size: 13px;
    line-height: 1;
    opacity: .3;
    transform: none;
    transition: opacity .25s, translate .25s;
  }

  html[dir="rtl"] .nav-links a::after { content: "\2190"; }

  .nav-links a:hover,
  .nav-links a:focus-visible,
  .nav-links a.is-active {
    color: var(--text);
    background: linear-gradient(90deg, rgba(240, 60, 240, .18), rgba(155, 107, 255, .05));
  }

  .nav-links a:hover::before,
  .nav-links a.is-active::before { color: rgba(255, 255, 255, .8); }

  .nav-links a:hover::after,
  .nav-links a.is-active::after { opacity: .9; translate: 3px 0; }

  html[dir="rtl"] .nav-links a:hover::after,
  html[dir="rtl"] .nav-links a.is-active::after { translate: -3px 0; }

  .nav.menu-open .nav-links a {
    animation: navIn .42s cubic-bezier(.2, .8, .2, 1) both;
  }

  .nav.menu-open .nav-links a:nth-child(1) { animation-delay: .03s; }
  .nav.menu-open .nav-links a:nth-child(2) { animation-delay: .06s; }
  .nav.menu-open .nav-links a:nth-child(3) { animation-delay: .09s; }
  .nav.menu-open .nav-links a:nth-child(4) { animation-delay: .12s; }
  .nav.menu-open .nav-links a:nth-child(5) { animation-delay: .15s; }
  .nav.menu-open .nav-links a:nth-child(6) { animation-delay: .18s; }

  .hero { min-height: auto; padding-top: 76px; }
  .vert { display: none; }
  .about-card { margin-top: 24px; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 18px; }

  .hero { padding: 54px 0 64px; }
  .hero .logo { margin-bottom: 24px; }
  .frame { width: 90px; height: 56px; top: 16px; }

  .hero h1 { font-size: clamp(25px, 6.2vw, 34px); }
  .hero > p:not(.avail) { font-size: 16.5px; line-height: 1.8; }
  .scroll-cue { display: none; }

  .marquee { margin-top: 4px; }

  .section { padding-top: 68px; }
  .sec-head { margin-bottom: 24px; }

  .case-head { gap: 13px; padding: 16px; }
  .badge { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
  .stack, .count { display: none; }
  .plus { width: 34px; height: 34px; }
  .inner { padding: 0 16px; }
  .pad { padding-bottom: 20px; }

  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 124px; gap: 10px; }
  .bento .work:first-child { grid-column: span 2; grid-row: span 1; }
  .bento .work:nth-child(4):last-child { grid-column: span 2; }
  .bento .work:first-child:nth-last-child(3) { grid-row: span 2; }
  .bento .work:first-child:nth-last-child(3) ~ .work { grid-column: span 1; }

  .bento.dense > .work { grid-column: span 1; grid-row: span 1; }
  .bento.dense > .work.vertical { grid-row: span 2; }

  .duo { gap: 10px; }

  .case-foot { align-items: flex-start; flex-direction: column; gap: 14px; }

  .svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc { padding: 20px; }

  .process { grid-template-columns: 1fr; gap: 20px; }

  .about-card { max-width: none; }

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

  .endcap {
    grid-template-columns: 1fr;
    padding: 42px 22px 46px;
  }

  .endcap-side { display: none; }
  .endcap-word { font-size: 17vw; bottom: -0.24em; }
  .endcap-kicker { margin-bottom: 16px; }

  .bar { justify-content: center; text-align: center; }

  .lb-panel { padding: 10px; }
  .lb-nav.prev { inset-inline-start: 14px; }
  .lb-nav.next { inset-inline-end: 14px; }
  .lb-stage img, .lb-stage video { max-height: 70vh; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 14px; }
  .nav { padding-inline: 12px; }
  .brand img { height: 34px; }
  .lang { padding: 6px 13px; }

  .hero { padding-top: 44px; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; padding-inline: 18px; }

  .case-head { padding: 14px; }
  .meta em { font-size: 14px; }
  .meta strong { font-size: 18px; }

  .bento { grid-auto-rows: 104px; }
  .work.has-media .play { width: 38px; height: 38px; }
  .work.has-media .play::before { left: 15px; top: 11px; border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }

  .lb-top { padding-bottom: 8px; }
  .lb-cap { font-size: 12px; }

  .about-facts { grid-template-columns: 1fr; gap: 12px; }
  .endcap-actions .btn { width: 100%; }
}

/* ---------------- 15. Arabic / RTL ---------------- */

html[dir="rtl"] .progress { transform-origin: 100% 50%; }
html[dir="rtl"] .frame { transform-origin: 100% 0; }
html[dir="rtl"] .arr { transform: rotate(-135deg); }
html[dir="rtl"] .ch:hover .arr { transform: translate(-4px, -4px) rotate(-135deg); }
html[dir="rtl"] .btn.big::after { transform: rotate(-135deg); }
html[dir="rtl"] .btn.big:hover::after { transform: translateX(-5px) rotate(-135deg); }
html[dir="rtl"] .case-link span { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .lb-nav { transform: translateY(-50%) scaleX(-1); }
html[dir="rtl"] .marquee-track { animation-direction: reverse; }

html[lang="ar"] body {
  font-family: Cairo, Manrope, system-ui, sans-serif;
}

html[lang="ar"] :is(
  .hero h1, .hero h1 i, .hero h1 span, .hero p, .avail, .scroll-cue,
  .sub, .eyebrow, .meta strong, .meta em, .case-desc, .case-link,
  .lbl, .work-title, .count, .case-tags li, .btn, .ch-label, .ch-t b, .ch-t small,
  .endcap p, .about p, .about h3, .about-role, .tags span,
  .svc h3, .svc p, .svc li, .step h3, .step p,
  .bar, .top, .lb-cap, .lb-close,
  .mq-group span
) {
  font-family: Cairo, Manrope, system-ui, sans-serif;
  font-style: normal;
  letter-spacing: 0;
}

html[lang="ar"] :is(.hero h1, .section h2, .endcap h2, .meta strong) {
  font-weight: 700;
  line-height: 1.45;
}

html[lang="ar"] .hero h1 {
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.55;
}

html[lang="ar"] :is(.hero p, .sub, .about-body > p, .case-desc, .svc p, .step p) {
  line-height: 1.95;
}

html[lang="ar"] nav a {
  font-family: Cairo, Manrope, system-ui, sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .ch-label {
  letter-spacing: 0;
}

html[lang="ar"] .vert {
  letter-spacing: .5em;
  font-style: normal;
}

html[lang="ar"] .about-word,
html[lang="ar"] .bar-l {
  font-family: Michroma, sans-serif;
}

html[lang="ar"] .about-facts dt {
  font-family: Cairo, Manrope, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  html[dir="rtl"] .nav { padding: 8px 16px 8px 10px; }
  html[dir="rtl"] .nav-links a { text-align: right; }
}

/* ---------------- 16. Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .rv { opacity: 1; transform: none; }
  .bg-art { transform: none; }
  .marquee-track { transform: none; }
}