/* Values taken 1:1 from Figma node 1182:1133 (Evo-Private). The file has no variables, so the dark values
   below are the raw Figma colours, collected into tokens so the light theme (html.theme-light) can swap them. */

:root {
  --bg: #060709;
  --bg-rgb: 6, 7, 9;
  --line: #191c24;
  --blue: #0b5bf2;
  --chip: rgba(161, 172, 194, 0.1);
  --chip-rgb: 161, 172, 194;
  --muted: #a1acc2;

  --text: #fff;
  --text-2: #c9d1e0;
  --text-3: #a9b1c0;
  --text-4: #6b7590;
  --text-5: #4b5468;
  --link: #6f9bff;
  --link-hover: #9dbbff;
  --surface: #0b0d13;
  --surface-rgb: 11, 13, 19;
  --surface-raised: #0d1018;
  --surface-hover: #151a26;
  --surface-press: #0e1119;
  --surface-accent: #0e1220;
  --btn2: #1e2531;
  --btn2-line: #282f3e;
  --btn2-hover: #262e3d;
  --btn2-line-hover: #3a4560;
  --btn2-press: #1a2030;
  --btn-disabled: #17223a;
  --field-line: #232a38;
  --chip-line: #1f242d;
  --chip-line-2: #2f3440;
  --bullet: #3a4258;
  --accent-line: #2b5b96;
  --stripe: #0b0c0f;
  --grid-rgb: 42, 48, 60;
  --shadow-rgb: 0, 0, 0;
  --err: #ff7b7b;
  --err-strong: #ffb0b0;
  --err-rgb: 255, 123, 123;
  --focus-c: #8fb4ff;
  --img-invert: 0; /* light theme: flips the light-on-dark client logos and icons */
}

/* light theme: #ECF0F9 page, white cards, navy text, the same brand blue */
html.theme-light {
  --bg: #ecf0f9;
  --bg-rgb: 236, 240, 249;
  --line: #d3dae8;
  --chip: rgba(70, 85, 115, 0.08);
  --chip-rgb: 70, 85, 115;
  --muted: #5b6579;

  --text: #0b1220;
  --text-2: #2a3347;
  --text-3: #47516a;
  --text-4: #7a849a;
  --text-5: #a3acbe;
  --link: #0b5bf2;
  --link-hover: #0846c2;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-raised: #ffffff;
  --surface-hover: #eef2fa;
  --surface-press: #e3e9f4;
  --surface-accent: #e8efff;
  --btn2: #ffffff;
  --btn2-line: #cdd5e4;
  --btn2-hover: #f4f6fb;
  --btn2-line-hover: #aab5cb;
  --btn2-press: #e6ebf5;
  --btn-disabled: #c9d6f0;
  --field-line: #cdd5e4;
  --chip-line: #dfe5f0;
  --chip-line-2: #d3dae8;
  --bullet: #b6bfd1;
  --accent-line: #9dbbff;
  --stripe: #d9dfeb;
  --grid-rgb: 120, 135, 165;
  --shadow-rgb: 30, 45, 80;
  --err: #d33a40;
  --err-strong: #a8262c;
  --err-rgb: 211, 58, 64;
  --focus-c: #0b5bf2;
  --img-invert: 1;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
}

body { overflow-x: hidden; }

p, h1 { margin: 0; }

a { text-decoration: none; color: inherit; }

button { font: inherit; color: inherit; border: 0; cursor: pointer; }

img { display: block; max-width: none; }

.frame {
  position: relative;
  width: 1920px;
  height: 5250px; /* Figma: 3286. Page ends with the footer + a closing stripe band (the Figma band is removed for now) */
  margin: 0; /* centred by #smooth-content padding, not auto margins (see below) */
  overflow: hidden;
  background: var(--bg);
  direction: ltr; /* Figma auto layout order is left-to-right; text runs carry their own dir */
  font-family: 'Lahzeh', sans-serif;
  font-style: normal;
  zoom: var(--fit, 1);
}

.frame > * { position: absolute; }

/* Centring without auto margins: the free space is computed from 100vw minus the scrollbar width measured
   in <head> (--sbw), so it is the same before and after the loader unlocks scrolling and the scrollbar
   appears. With margin: auto the whole frame slid sideways at that moment (a big layout shift). */
#smooth-content,
.site-header { padding-left: max(0px, calc((100vw - var(--sbw, 0px) - 1920px * var(--fit, 1)) / 2)); }

/* ---------- sticky header (not in Figma) ----------
   Logo, nav and actions sit on a fixed layer above the scrolling page (ScrollSmoother moves the page with
   transforms, so nothing inside it can be position: fixed). .hdr-frame is the frame's top 111px with the
   same width and scale, so the Figma coordinates of .logo / .nav / .nav-actions still apply.
   At the top it is transparent; once the page scrolls (.is-stuck, motion.js) it gets a blurred backdrop,
   a hairline and moves up 14px. */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  height: calc(111px * var(--fit, 1));
  pointer-events: none; /* only the links and buttons take the pointer */
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  opacity: 0;
}
.site-header.is-stuck { height: calc(83px * var(--fit, 1)); }
.site-header.is-stuck::before { opacity: 1; }
.hdr-frame {
  position: relative;
  width: 1920px;
  height: 111px;
  margin: 0;
  direction: ltr;
  font-family: 'Lahzeh', sans-serif;
  font-style: normal;
  zoom: var(--fit, 1);
}
.hdr-frame > * { position: absolute; pointer-events: auto; }
.site-header.is-stuck .hdr-frame { translate: 0 -14px; }
/* scrolled down: slides up out of view; keyboard focus inside brings it back */
.site-header.is-hidden:not(:focus-within) { translate: 0 -100%; }

/* Figma "text-box-trim: trim-both, edge: cap alphabetic" */
.trim {
  display: block;
  line-height: normal;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

.flip { transform: scaleY(-1); }

/* ---------- logo ---------- */

.logo {
  left: calc(83.33% - 110px);
  top: 33px;
  width: 118px;
  height: 39.792px;
}
.logo img { width: 100%; height: 100%; }

/* ---------- nav links ---------- */

.nav {
  left: calc(50% + 19px);
  top: 33px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  font-stretch: expanded;
  text-align: center;
}
.nav a.r8 { border-radius: 8px; }
.nav a.on { background: var(--chip); color: var(--text); }

/* ---------- nav actions ---------- */

.nav-actions {
  left: 312px;
  top: 33px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.nav-cta {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 41px;
  padding: 4px 14px 4px 4px;
  border-radius: 8px;
  background: var(--blue);
}
.nav-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 100%;
  padding: 6px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg);
}
.nav-cta-icon img { width: 14.625px; height: 14.625px; }
.nav-cta-label {
  width: 99px;
  height: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  font-stretch: expanded;
  text-align: right;
}

.theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  padding: 4px 14px;
  border-radius: 8px;
  background: var(--chip);
}
.theme { color: var(--text-2); }
/* sun (dark theme) and moon (light theme), stacked; motion.css swaps them */
.theme-ico { position: relative; display: block; flex: none; width: 22px; height: 22px; }
.theme-ico i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; line-height: 1; }

.lang {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 4px;
  border-radius: 8px;
  background: var(--chip);
}
.lang a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  font-stretch: extra-expanded;
  text-align: right;
}
.lang a.on { background: var(--surface-raised); border-radius: 4px; }

/* ---------- hero right ---------- */

.hero-right {
  left: 50%;
  top: 111px;
  width: 696px;
  height: 682px;
  overflow: hidden;
}
.hero-content {
  position: absolute;
  left: 108px;
  top: 122px;
  width: 540px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: flex-end;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  width: 100%;
}

.badge {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 14px;
  border-radius: 36px;
  background: var(--chip-line);
  box-shadow: inset 0 0 0 1px var(--chip-line-2); /* Figma stroke here is not part of the auto-layout size (196 × 38) */
}
.badge p {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.badge img { width: 10px; height: 10px; }

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
  width: 100%;
  text-align: right;
  word-break: break-word;
}
.hero-copy h1 {
  color: var(--text);
  font-size: 70px;
  font-weight: 500;
  font-stretch: extra-expanded;
  line-height: 1.34;
  white-space: nowrap;
  font-feature-settings: "ss09" 1;
}
.h1-a { display: block; color: var(--muted); font-weight: 500; }
.h1-b { display: block; font-weight: 600; }
.lead {
  width: 100%;
  color: var(--text-3);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.74;
}

.hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.btn-secondary {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 14px;
  border: 1px solid var(--btn2-line);
  border-radius: 8px;
  background: var(--btn2);
  color: var(--text-3);
  font-size: 18px;
  font-weight: 500;
  font-stretch: expanded;
  text-align: right;
}
.btn-primary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  font-stretch: expanded;
  text-align: right;
}
.btn-primary img { width: 22px; height: 22px; }

/* ---------- hero left grid ---------- */

.hero-left {
  left: 264px;
  top: 111px;
  width: 696px;
  height: 682px;
  overflow: hidden;
}
.grid {
  display: grid;
  grid-template-columns: 99px 100px 99px 100px 99px 99px 100px;
  grid-template-rows: 97px 98px 97px 98px 97px 97px 98px 97px;
}
.grid i { border: 1px solid rgba(var(--grid-rgb), 0.2); transition: background-color 0.6s; }

/* ---------- stripe band ---------- */

.stripes {
  left: 50%;
  top: 793px;
  width: 1390px;
  height: 64px;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.stripes-row {
  position: absolute;
  left: calc(50% - 12.46px);
  top: -12.85px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}
.stripes-row i {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 55.196px;
  height: 89.603px;
  margin-right: -37px;
}
.stripes-row i:last-child { margin-right: 0; }
.stripes-row i::before {
  content: "";
  width: 6px;
  height: 100px;
  flex: none;
  background: var(--stripe);
  transform: rotate(30deg);
}

/* ---------- trust ---------- */

.trust {
  left: calc(75% - 133px);
  top: 857px;
  width: 349px; /* Figma hug result for 1182:1319 */
  height: 163px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 48px 24px 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "swsh" 1;
}
.trust-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.trust-num {
  line-height: 1.5;
  color: var(--blue);
  font-size: 38px;
  font-weight: 800;
}
.trust-title {
  color: var(--text);
  font-size: 28px;
  font-weight: 800;
  font-stretch: extra-expanded;
}
.trust-sub {
  color: var(--muted);
  font-size: 28px;
  font-weight: 500;
  font-stretch: extra-expanded;
}

/* ---------- clients ---------- */

.clients {
  left: 265px;
  top: 857px;
  width: 1042px;
  height: 163px;
  border: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.clients::-webkit-scrollbar { display: none; }
.clients-row {
  position: absolute;
  left: -0.5px;
  top: -0.5px;
  display: flex;
  align-items: center;
}
.client {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 163px;
  padding: 24px;
  border: 1px solid var(--line);
}
.w260 { width: 260px; }
.w261 { width: 261px; }
.gap10 { gap: 10px; }
.row { display: flex; align-items: center; }
.gap14 { gap: 14px; }
.gap12 { gap: 12.407px; }
.gap9 { gap: 9.167px; justify-content: center; }

.alo-text {
  display: flex;
  flex-direction: column;
  gap: 8.084px;
  align-items: flex-start;
  justify-content: center;
  height: 46.486px;
}

.pak-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-end;
  justify-content: center;
  color: #8b8f99; /* the neutral grey of the other client logos (SVG fills), not a theme colour */
  font-family: 'Vazirmatn', 'Lahzeh', sans-serif;
}
.pak-name { font-size: 26px; font-weight: 700; }
.pak-sub { font-size: 12px; font-weight: 600; }
.pak-img { width: 71px; height: 71px; object-position: bottom; filter: grayscale(1); } /* monochrome like the other logos */

/* ---------- full-width band ---------- */

.band {
  left: 50%;
  top: 1940px; /* Figma: 1611; moved down by 329px to make room for the services section */
  width: 1920px;
  height: 1142px;
  transform: translateX(-50%);
  background: var(--surface);
}

/* ---------- guide lines ---------- */

.line { width: 1px; top: 0; }
.line-left { left: 263.5px; height: 100%; }
.line-right { left: calc(100% - 264.5px); height: 100%; }
.line-center { left: 959.5px; top: 111px; height: 682px; }

.hline {
  left: 264px;
  width: 1392px;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hline > div { flex: none; position: relative; width: 0; height: 1392px; transform: rotate(90deg); }
.hline img { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; height: 100%; }
.hline-793 { top: 793px; }
.hline-111 { top: 111px; }

.sq {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
}

/* ---------- glow ---------- */

.glow {
  left: calc(83.33% - 176px);
  top: 462px;
  width: 776px;
  height: 776px;
  pointer-events: none;
}
/* Figma inset -128.87% of 776px = -1000px on each side → the 2776px blurred SVG */
.glow img { position: absolute; left: -1000px; top: -1000px; width: 2776px; height: 2776px; }

/* ---------- hero right: wider column + KPI row (deviates from Figma 1182:1149) ----------
   The headline keeps Figma's 70px. The column widens to 600px (48px from the centre line and from the
   right guide), and a KPI row with minimal pixel glyphs fills the space under the CTAs.
   top is set so the block is centred in the 682px hero. */
.hero-content { left: 48px; top: 43px; width: 600px; gap: 48px; }
.hero-text { gap: 20px; }
.hero-copy { gap: 28px; }
.lead { font-size: 20px; }
.btn-secondary { height: 52px; padding: 14px 18px; }
.btn-primary { height: 52px; padding: 12px 16px 12px 14px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  direction: rtl;
}
.kpis li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start; /* = right edge in rtl */
  padding: 0 24px;
  border-left: 1px solid var(--line);
  cursor: default;
}
.kpis li:first-child { padding-right: 0; }
.kpis li:last-child { border-left: 0; }
.kpi-top { display: flex; gap: 12px; align-items: center; }
.kpi-num {
  color: var(--text);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
}
.kpi-label {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  font-stretch: expanded;
  white-space: nowrap;
  transition: color 0.2s;
}
.kpis li:hover .kpi-label { color: var(--text); }

/* 10×10 filled pixel glyphs drawn by motion.js (3px per pixel) */
.glyph { display: block; width: 30px; height: 30px; }
.glyph svg { display: block; width: 100%; height: 100%; overflow: visible; shape-rendering: crispEdges; }
.glyph .b { fill: #0b5bf2; }
.glyph .l { fill: #dce8ff; }

/* ---------- services (not in Figma; content doc section 4) ----------
   Stripe divider (same as hero → client strip), then a full-width header band with the title on the
   right and an animated dither field in its top-left corner, then four equal columns on the frame grid.
   The band of the next section and the frame height were moved down to make room. */
.stripes-svc { top: 1020px; }
.svc-section { left: 264px; top: 1084px; width: 1392px; height: 856px; direction: rtl; }

.svc-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 1392px;
  height: 196px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to left, var(--surface), rgba(var(--surface-rgb), 0) 70%);
  overflow: hidden;
}
.svc-heading {
  position: absolute;
  top: 46px;
  right: 44px;
  margin: 0;
  font-feature-settings: "ss09" 1;
  white-space: nowrap;
}
.svc-heading .lead-line {
  display: block;
  color: var(--text);
  font-size: 34px;
  font-weight: 700;
  font-stretch: extra-expanded;
  line-height: 1.4;
}
.svc-heading .muted {
  display: block;
  color: var(--muted);
  font-size: 32px;
  font-weight: 500;
  font-stretch: expanded;
  line-height: 1.4;
}
/* animated Bayer-dither field (motion.js): dense in the top-left corner, fading right and down */
.svc-dither {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 40%, transparent);
  mask-image: linear-gradient(to right, #000 40%, transparent);
}

.svc-cols {
  position: absolute;
  top: 196px;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 348px);
  height: 660px; /* fits the longest column (5 items) */
  border-bottom: 1px solid var(--line); /* closes the grid at the bottom */
  direction: rtl;
}
.svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 52px 36px 44px;
  border-left: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.svc:last-child { border-left: 0; }
.svc-chip {
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--chip-line);
}
.svc-chip .glyph { width: 40px; height: 40px; }
/* every title reserves two lines, so the dividers line up across the columns */
.svc-title {
  min-height: 2.9em;
  margin-top: 48px;
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  font-stretch: expanded;
  line-height: 1.45;
}
.svc-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 34px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.svc-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--text-3);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}
/* pixel bullet */
.svc-list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  translate: 0 -4px;
  background: var(--bullet);
}

/* ---------- portfolio (not in Figma) ----------
   Featured project: a full-width row (info on the right, a browser + phone mockup scene on the left).
   Then a 2 × 2 of 696px cards: mockup stage on top, project info below.
   Mockups show real screenshots from assets/work/<id>-desktop.jpg / -mobile.jpg when they exist,
   and the client's mark until then (never fake UI). */
.stripes-work { top: 1940px; }
.work-section { left: 264px; top: 2004px; width: 1392px; height: 1888px; direction: rtl; }

.work-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 1392px;
  height: 168px;
  border-bottom: 1px solid var(--line);
}
.work-heading {
  position: absolute;
  top: 38px;
  right: 44px;
  margin: 0;
  white-space: nowrap;
  font-feature-settings: "ss09" 1;
}
.work-heading .lead-line {
  display: block;
  color: var(--text);
  font-size: 34px;
  font-weight: 700;
  font-stretch: extra-expanded;
  line-height: 1.4;
}
.work-heading .muted {
  display: block;
  color: var(--muted);
  font-size: 32px;
  font-weight: 500;
  font-stretch: expanded;
  line-height: 1.4;
}
/* left cell of the header (split on the centre line): a one-line intro, then the all-projects button */
.work-head-side {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  width: 696px;
  height: 168px;
  padding: 0 44px;
  border-right: 1px solid var(--line);
  direction: rtl;
}
.work-intro { max-width: 330px; color: var(--muted); font-size: 17px; font-weight: 500; line-height: 1.8; }
/* the hero's secondary button, with the site's arrow icon */
.work-all {
  display: inline-flex;
  flex: none;
  gap: 12px;
  align-items: center;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--btn2-line);
  border-radius: 8px;
  background: var(--btn2);
  color: var(--text-3);
  font-size: 18px;
  font-weight: 500;
  font-stretch: expanded;
  white-space: nowrap;
}

/* cards: square cells on the frame grid (outer edges sit on the frame lines), each closed by its own
   1px line; touching neighbours add up to a 2px divider */
.work {
  border: 1px solid var(--line);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
}
.work-feature {
  position: absolute;
  top: 168px;
  left: 0;
  display: grid;
  grid-template-columns: 464px 1fr;
  width: 1392px;
  height: 520px;
  direction: rtl;
}
.work-grid {
  position: absolute;
  top: 688px;
  left: 0;
  display: grid;
  grid-template-columns: 696px 696px;
  grid-template-rows: 600px 600px;
  direction: rtl;
}
.work-grid .work { display: grid; grid-template-rows: 340px 1fr; }

/* mockup stage */
.work-stage {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.work-feature .work-stage { border-bottom: 0; border-right: 1px solid var(--line); }
.work-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(11, 91, 242, 0.2), transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}

.mk-browser, .mk-phone {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--chip-line), 0 30px 70px -20px rgba(var(--shadow-rgb), 0.75);
}
.mk-browser { border-radius: 12px 12px 0 0; overflow: hidden; }
.mk-bar {
  display: flex;
  flex: none;
  gap: 6px;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  direction: ltr;
}
.mk-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-line-2); }
.mk-url {
  flex: 1;
  height: 16px;
  margin: 0 40px 0 14px;
  border-radius: 8px;
  background: var(--line);
  color: var(--text-4);
  font: 500 10px/16px 'Lahzeh', sans-serif;
  text-align: center;
}
.mk-phone { padding: 8px; border-radius: 30px; }
.mk-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  width: 64px;
  height: 16px;
  border-radius: 8px;
  background: var(--bg);
  translate: -50% 0;
}

.screen {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: linear-gradient(160deg, var(--surface), var(--surface));
}
.mk-phone .screen { border-radius: 22px; }
.screen-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.screen-ph img { height: 64px; width: auto; opacity: 0.85; }
.mk-phone .screen-ph img { height: 52px; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* placement: small cards (696 × 360 stage); the device peeks up from the bottom edge */
.mk-web .mk-browser { left: 88px; top: 52px; width: 520px; height: 355px; }
.mk-app .mk-phone { left: 253px; top: 40px; width: 190px; height: 392px; }
/* featured scene (928 × 520 stage): browser with a phone in front */
.mk-both .mk-browser { left: 72px; top: 64px; width: 640px; height: 430px; }
.mk-both .mk-phone { left: 640px; top: 120px; width: 200px; height: 412px; }
.mk-both .mk-browser .screen-ph img { height: 96px; }

/* project info: category, name, description, then a footer row (meta + button) closed by a top line */
.work-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 28px 36px 30px;
}
.work-cat { color: var(--link); font-size: 14px; font-weight: 600; font-stretch: expanded; }
.work-name {
  margin-top: 4px;
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  font-stretch: expanded;
  line-height: 1.4;
  white-space: nowrap;
}
.work-name[dir="ltr"] { align-self: flex-start; } /* flex-start is the right edge in RTL */
.work-desc {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}
.work-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.work-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.work-meta div { padding-left: 16px; }
.work-meta div + div { padding-right: 16px; border-right: 1px solid var(--line); }
.work-meta dt { color: var(--text-4); font-size: 13px; font-weight: 500; }
.work-meta dd { margin: 4px 0 0; color: var(--text); font-size: 15px; font-weight: 600; white-space: nowrap; }

/* buttons: the hero's secondary button (8px radius, #1e2531 fill, #282f3e stroke).
   One labelled button on the featured card; the grid cards use the square icon size of it,
   since the whole card is already the link and five identical labels would repeat one intent. */
.work-go {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--btn2-line);
  border-radius: 8px;
  background: var(--btn2);
  color: var(--text-3);
  font-size: 18px;
  font-weight: 500;
  font-stretch: expanded;
  white-space: nowrap;
}
.work-go-sq { justify-content: center; width: 48px; height: 48px; padding: 0; }
.work-go-sq .go-label { display: none; } /* shown on phones, where every card gets the featured card's button (responsive.css) */
/* the hero button's arrow (Figma ArrowDownLeft, flipped), tinted with the label colour through a mask */
.go-ico { display: flex; overflow: hidden; }
.go-ico i {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url(assets/arrow-down-left.svg) center / contain no-repeat;
  mask: url(assets/arrow-down-left.svg) center / contain no-repeat;
}

/* featured info: meta as stacked rows, full-width button at the bottom */
.work-feature .work-info { min-height: 0; padding: 36px 44px; } /* must fit the 520px row */
.work-feature .work-name { font-size: 34px; font-weight: 700; font-stretch: extra-expanded; }
.work-feature .work-desc { margin-top: 14px; font-size: 17px; }
.work-feature .work-foot {
  grid-template-columns: 1fr;
  gap: 20px;
  flex: 1;
  align-content: space-between;
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}
.work-feature .work-meta { grid-template-columns: 1fr; }
.work-feature .work-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.work-feature .work-meta div:first-child { border-top: 1px solid var(--line); }
.work-feature .work-meta dd { margin: 0; font-size: 16px; }
.work-feature .work-go { justify-content: space-between; width: 100%; }

/* portfolio cover photos (temporary Unsplash images): full bleed, edges blended into the dark page */
.cover-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}
.work-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(var(--bg-rgb), 0.45), transparent 45%),
    linear-gradient(to bottom, rgba(var(--bg-rgb), 0.25), transparent 30%);
  pointer-events: none;
}

/* ---------- contact (not in Figma) ----------
   Stripe divider, then two cells split on the centre line: on the right the title with the services
   dither field in its top-left corner, what happens next and the channels; on the left the form.
   Every field reserves its error line, so validation never shifts the fixed-height layout. */
.stripes-contact { top: 3892px; }
.ct-section { left: 264px; top: 3956px; width: 1392px; height: 714px; direction: rtl; }

.ct-body {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 696px 696px;
  width: 1392px;
  height: 714px; /* the form plus 44px padding */
  border-bottom: 1px solid var(--line);
}

/* right cell */
.ct-info {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 44px 44px;
  border-left: 1px solid var(--line);
}
.ct-info > :not(canvas) { position: relative; } /* above the dither field */
/* the services dither field, in the cell corner next to the centre line, fading right and down */
.ct-info .svc-dither {
  width: 78%;
  height: 300px;
  -webkit-mask-image: radial-gradient(100% 100% at 0 0, #000 25%, transparent 75%);
  mask-image: radial-gradient(100% 100% at 0 0, #000 25%, transparent 75%);
}
.svc-heading.ct-heading { position: relative; top: auto; right: auto; margin: 0 0 36px; }
.ct-lead { max-width: 520px; color: var(--muted); font-size: 18px; font-weight: 500; line-height: 1.85; }

/* channels: label / value lines, then the social row, pinned to the bottom of the cell */
.ct-reach { margin-top: auto; }
.ct-lines { margin: 0; }
.ct-lines div {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.ct-lines dt { flex: none; color: var(--text-4); font-size: 15px; font-weight: 500; }
.ct-lines dd { margin: 0; color: var(--text); font-size: 17px; font-weight: 600; white-space: nowrap; }
.ct-lines a { color: inherit; transition: color 0.2s; }
.ct-lines a:hover { color: var(--link-hover); }
.ct-social {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ct-social > span { color: var(--text-4); font-size: 15px; font-weight: 500; }
.ct-social nav { display: flex; gap: 8px; direction: ltr; }
/* square icon buttons in the secondary-button style */
.ct-soc {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--btn2-line);
  border-radius: 8px;
  background: var(--btn2);
  color: var(--text-3);
  font-size: 20px;
}

/* left cell: form */
.ct-form-cell { position: relative; padding: 44px 48px; }
.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin: 0; }
.ct-field { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-wide { grid-column: 1 / -1; }
.ct-field > label, .ct-field > legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 500;
}
.ct-opt { color: var(--text-4); font-size: 14px; }
.ct-input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 500 17px/1.6 'Lahzeh', sans-serif;
  outline: none;
}
.ct-input[dir="ltr"] { text-align: left; }
.ct-input::placeholder { color: var(--text-5); }
textarea.ct-input { height: 128px; padding: 14px 18px; resize: none; }
/* reserved error line */
.ct-err { overflow: hidden; height: 20px; white-space: nowrap; text-overflow: ellipsis; margin: 4px 0 0; color: var(--err); font-size: 13px; font-weight: 500; line-height: 20px; }

/* accordion input: looks like a text field; opens downward over the next row with the options.
   Services is multi-select (checkboxes), budget single-select (radios, closes on pick). */
.ct-acc-wrap { position: relative; }
.ct-acc-btn {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--text-5);
  text-align: right;
  cursor: pointer;
}
.ct-acc-btn.has-value { color: var(--text); }
.ct-acc-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* pixel chevron (10 × 6) */
.ct-caret {
  flex: none;
  width: 10px;
  height: 6px;
  background: var(--text-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 2h2v2H6zM8 0h2v2H8z%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 2h2v2H6zM8 0h2v2H8z%27/%3E%3C/svg%3E") center / contain no-repeat;
}
.ct-acc-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
}
.ct-acc-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0 6px;
  border: 1px solid var(--blue);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface-raised);
  box-shadow: 0 24px 48px -16px rgba(var(--shadow-rgb), 0.7);
}
.ct-acc.is-open .ct-acc-btn { border-radius: 8px 8px 0 0; }
.ct-acc.is-open .ct-acc-list { padding-top: 6px; padding-bottom: 6px; }
.ct-opt-row { position: relative; display: flex; cursor: pointer; }
.ct-opt-row input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ct-opt-row span {
  display: flex;
  flex: 1;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px; /* a long option wraps onto a second line instead of running past the panel */
  border-radius: 6px;
  color: var(--text-3);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
/* pixel box that fills when selected (radios too: the page has no round shapes) */
.ct-opt-row span::before { content: ""; flex: none; width: 10px; height: 10px; box-shadow: inset 0 0 0 1px var(--text-5); }

.ct-foot { display: flex; gap: 20px; align-items: center; margin-top: 6px; }
.ct-submit { position: relative; flex: none; height: 52px; cursor: pointer; }
.ct-dots { display: none; gap: 4px; }
.ct-dots i { width: 6px; height: 6px; background: #fff; }
.ct-note { color: var(--text-4); font-size: 14px; font-weight: 500; line-height: 1.7; }
.ct-alert {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(var(--err-rgb), 0.35);
  border-radius: 8px;
  background: rgba(var(--err-rgb), 0.06);
  color: var(--err-strong);
  font-size: 15px;
  font-weight: 500;
}

/* success: replaces the form in the same cell */
.ct-done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  padding: 52px 48px;
  outline: none;
}
.ct-done[hidden] { display: none; }
.ct-done .svc-chip .glyph { width: 40px; height: 40px; }
.ct-done-title { margin: 12px 0 0; color: var(--text); font-size: 34px; font-weight: 700; font-stretch: extra-expanded; }
.ct-done-text { max-width: 460px; color: var(--muted); font-size: 18px; font-weight: 500; line-height: 1.8; }
.ct-again { margin-top: 12px; cursor: pointer; }

/* ---------- footer (not in Figma) ----------
   Stripe divider, then a 388px band: the brand cell on the right of the centre line (logo, the hero tagline
   and the logo badge large in animated pixel dither, drawn by motion.js), and on the left a cell grid: email +
   status (196px), then three 64px rows of social links. A 64px bottom strip closes the page. */
.stripes-footer { top: 4670px; }
.stripes-end { top: 5186px; border-top: 1px solid var(--line); }
.ft { left: 264px; top: 4734px; width: 1392px; height: 452px; direction: rtl; }

.ft-brand {
  position: absolute;
  top: 0;
  right: 0;
  width: 696px;
  height: 388px;
  overflow: hidden;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 44px;
  border-left: 1px solid var(--line);
}
/* logo and tagline share the top row: the tagline sits beside the logo, past a hairline */
.ft-logo { display: block; flex: none; margin-top: 12px; } /* centred on the two-line tagline (64px vs 40px) */
.ft-logo img { width: 118px; height: auto; }
.ft-tagline { padding-right: 24px; border-right: 1px solid var(--line); font-size: 22px; font-stretch: expanded; line-height: 1.45; }
.ft-tagline span { display: block; }
.ft-tagline span:first-child { color: var(--muted); font-weight: 500; }
.ft-tagline span:last-child { color: var(--text); font-weight: 600; }
.ft-dither { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 210px; image-rendering: pixelated; }

.ft-cell {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 348px;
  height: 196px;
  padding: 36px 32px;
  border-bottom: 1px solid var(--line);
}
.ft-cell:nth-of-type(2) { left: 348px; border-left: 1px solid var(--line); } /* email: next to the centre line */
.ft-cell:nth-of-type(3) { left: 0; }
.ft-label { color: var(--text-4); font-size: 15px; font-weight: 500; }
.ft-value { display: inline-flex; gap: 12px; align-items: center; align-self: flex-start; color: var(--text); font-size: 19px; font-weight: 600; }
.ft-value i { color: var(--link); font-size: 22px; }
.ft-badge { align-self: flex-start; direction: ltr; }

.ft-social {
  position: absolute;
  top: 196px;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 64px);
  width: 696px;
}
.ft-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 32px;
  color: var(--text-2);
  font-size: 17px;
  font-weight: 500;
}
.ft-link:nth-child(odd) { border-left: 1px solid var(--line); }
.ft-link:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
.ft-link > i { color: var(--text-4); font-size: 22px; }
.ft-link .go-ico { margin-right: auto; color: var(--text-4); opacity: 0; }

.ft-bottom {
  position: absolute;
  top: 388px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1392px;
  height: 64px;
  padding: 0 44px;
  border-top: 1px solid var(--line);
}
.ft-copy { color: var(--text-4); font-size: 14px; font-weight: 500; }
.ft-top-btn { display: inline-flex; gap: 10px; align-items: center; color: var(--muted); font-size: 15px; font-weight: 500; }
.ft-top-btn i { font-size: 18px; }

/* ---------- light theme: assets with colours baked in ---------- */
/* the frame lines are dark-stroke SVGs: in light, hide the drawing and show the box in the line colour */
html.theme-light img.line,
html.theme-light .hline img { object-position: -9999px 0; background: var(--line); }
html.theme-light .glow { opacity: 0.4; }
html.theme-light .ct-acc-list { box-shadow: 0 18px 40px -18px rgba(30, 45, 80, 0.28); }
html.theme-light .work-stage::after { opacity: 0.35; } /* the cover photos' edge shade, kept faint on light */

/* Phosphor icons, inlined as an SVG sprite at the top of <body> (no icon font, no CDN) */
.ph, .ph-fill { display: inline-flex; width: 1em; height: 1em; line-height: 1; }
.ph > svg, .ph-fill > svg { display: block; width: 100%; height: 100%; fill: currentColor; }