/* ==========================================================================
   OrbBits — layout and components
   Written with CSS logical properties throughout (padding-inline,
   inset-inline-start …) so the Arabic RTL layout needs no separate rules.
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

svg {
  flex: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* --- Accessibility helpers ---------------------------------------------- */

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 200;
  padding: 0.65rem 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* The skip target takes focus without advertising itself as a control. */
#main:focus {
  outline: none;
}

/* --- Layout primitives --------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section__head {
  max-width: 44rem;
  margin-block-end: clamp(2rem, 4vw, 3.25rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-block-end: 0.9rem;
}

.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 1.5px;
  background: var(--seam);
  border-radius: 2px;
}

.section__head--center .eyebrow::after {
  content: "";
  inline-size: 1.75rem;
  block-size: 1.5px;
  background: var(--seam);
  border-radius: 2px;
}

.h2 {
  font-size: var(--fs-h2);
}

.lead {
  margin-block-start: 1rem;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.accent-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The gradient only paints inside the inline box. Arabic ascenders and
     Latin descenders must stay inside it or they render transparent. */
  padding-block: 0.16em;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: 46px;
  padding-inline: 1.35rem;
  padding-block: 0.7rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-border: var(--text);
  box-shadow: var(--shadow-sm);
}

.btn--accent {
  --btn-bg: var(--grad-cta);
  --btn-fg: #ffffff;
  --btn-border: transparent;
  background-image: var(--grad-cta);
  box-shadow: 0 10px 30px -14px rgba(196, 43, 43, 0.6);
}

.btn--ghost {
  --btn-bg: transparent;
}

.btn--block {
  display: flex;
  inline-size: 100%;
}

.btn svg {
  inline-size: 16px;
  block-size: 16px;
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .poster__cta:hover svg {
    transform: translateX(4px);
  }

  [dir="rtl"] .poster__cta:hover svg {
    transform: translateX(-4px);
  }

  .btn:hover {
    border-color: var(--text-muted);
  }

  .btn--primary:hover {
    --btn-bg: var(--text);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .btn--accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px -14px rgba(196, 43, 43, 0.72);
  }

  .btn--ghost:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
  }

  .btn:hover svg.arrow {
    transform: translateX(3px);
  }

  [dir="rtl"] .btn:hover svg.arrow {
    transform: translateX(-3px);
  }
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header {
    background: var(--bg);
  }
}

.site-header.is-scrolled {
  border-block-end-color: var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-block-size: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-inline-end: auto;
  padding-block: 0.5rem;
}

.brand__mark {
  display: block;
  inline-size: 40px;
  block-size: 40px;
}

/* Two colourways of the same SVG; the theme picks one. */
.brand__mark[data-mark="dark"] {
  display: none;
}

[data-theme="dark"] .brand__mark[data-mark="light"] {
  display: none;
}

[data-theme="dark"] .brand__mark[data-mark="dark"] {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark[data-mark="light"] {
    display: none;
  }

  :root:not([data-theme="light"]) .brand__mark[data-mark="dark"] {
    display: block;
  }
}

.brand__name {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.nav__link.is-active,
.nav__link:hover {
  color: var(--text);
  background: var(--surface-2);
}

.nav__cta {
  display: none;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

.icon-btn svg {
  inline-size: 19px;
  block-size: 19px;
}

.theme-btn .icon-sun,
.theme-btn .icon-moon {
  display: none;
}

[data-theme="light"] .theme-btn .icon-moon,
[data-theme="dark"] .theme-btn .icon-sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  /* Before the pre-paint script runs there is no data-theme attribute. Once it
     (or the toggle) sets one, the rules above take over. */
  :root:not([data-theme]) .theme-btn .icon-sun {
    display: block;
  }

  :root:not([data-theme]) .theme-btn .icon-moon {
    display: none;
  }
}

.lang-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-select select {
  appearance: none;
  -webkit-appearance: none;
  min-block-size: 38px;
  padding-inline: 0.85rem 1.9rem;
  padding-block: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: transparent;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.lang-select select:hover {
  border-color: var(--border-strong);
}

.lang-select__chevron {
  position: absolute;
  inset-inline-end: 0.6rem;
  inline-size: 12px;
  block-size: 12px;
  pointer-events: none;
  color: var(--text-faint);
}

.header__cta {
  margin-inline-start: 0.4rem;
  min-block-size: 40px;
  padding-inline: 1.1rem;
  font-size: var(--fs-xs);
}

.burger {
  display: none;
}

.burger__box {
  position: relative;
  inline-size: 20px;
  block-size: 14px;
}

.burger__box span {
  position: absolute;
  inset-inline: 0;
  block-size: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.burger__box span:nth-child(1) {
  inset-block-start: 0;
}

.burger__box span:nth-child(2) {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.burger__box span:nth-child(3) {
  inset-block-end: 0;
}

.site-header.is-open .burger__box span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .burger__box span:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .burger__box span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .burger {
    display: inline-flex;
  }

  .header__cta {
    display: none;
  }

  .nav {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    block-size: calc(100dvh - var(--header-h));
    max-block-size: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem var(--gutter) 2rem;
    background: var(--bg);
    border-block-end: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease),
      visibility 180ms;
  }

  .site-header.is-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding-block: 0.95rem;
    padding-inline: 0.25rem;
    border-radius: 0;
    border-block-end: 1px solid var(--border);
    font-size: 1.0625rem;
  }

  .nav__link:hover,
  .nav__link.is-active {
    background: transparent;
    color: var(--accent-ink);
  }

  .nav__cta {
    display: flex;
    margin-block-start: 1.25rem;
  }
}

/* Below this the mark alone carries the brand; the wordmark would crowd the
   controls. */
@media (max-width: 359px) {
  .brand__name {
    display: none;
  }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem);
}

.hero__glow {
  position: absolute;
  inset-block-start: -18rem;
  inset-inline-end: -8rem;
  inline-size: min(46rem, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(
      circle at 66% 34%,
      rgba(251, 191, 36, 0.18),
      transparent 52%
    ),
    radial-gradient(circle at 44% 52%, rgba(196, 43, 43, 0.22), transparent 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
}

/* Hero slide 1 — poster. Type carries the slide: a mono meta rule, an
   oversized statement, two actions. The orbit ring is drawn from tokens so
   it works in both themes, and the stat strip of the study lives in the
   Stats section below instead of repeating here. */

.poster {
  position: relative;
  inline-size: 100%;
  padding-block: clamp(0.25rem, 1vw, 0.75rem);
}

.poster__orb {
  position: absolute;
  inset-block-start: 14%;
  inset-inline-end: clamp(0.5rem, 3vw, 2.5rem);
  inline-size: min(30rem, 40vw);
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    var(--accent-wash),
    transparent 62%
  );
  pointer-events: none;
}

/* The orbit carries the amber bit around the ring; the ring and core stay
   still, so the motion reads as the mark rather than a spinning decoration. */
.poster__orbit {
  position: absolute;
  inset: 0;
  animation: orb-orbit 24s linear infinite;
}

.poster__bit {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--bit);
  box-shadow: 0 0 0 7px var(--accent-wash);
}

@keyframes orb-orbit {
  to {
    rotate: 1turn;
  }
}

/* The core, a soft garnet glow at the centre. */
.poster__orb::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(196, 43, 43, 0.2),
    transparent 68%
  );
  animation: orb-core 9s ease-in-out infinite;
}

@keyframes orb-core {
  0%,
  100% {
    opacity: 0.65;
    scale: 1;
  }

  50% {
    opacity: 1;
    scale: 1.14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster__orbit,
  .poster__orb::after {
    animation: none;
  }
}

@media (max-width: 759px) {
  .poster__orb {
    display: none;
  }
}

.poster__meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding-block-end: 0.6rem;
  border-block-end: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.poster__meta span:nth-child(2) {
  margin-inline-start: auto;
}

.poster__title {
  position: relative;
  margin-block: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(2.85rem, 0.85rem + 8.4vw, 8.6rem);
  line-height: 0.87;
  letter-spacing: -0.05em;
  font-weight: 600;
}

.poster__line {
  display: block;
}

.poster__dot {
  color: var(--accent);
}

/* Arabic needs the extra leading the poster's tight stack would otherwise
   take away. */
html[lang="ar"] .poster__title {
  line-height: 1.16;
}

.poster__lead {
  position: relative;
  max-inline-size: 38rem;
  font-size: var(--fs-lg);
  color: var(--text-muted);
  text-wrap: pretty;
}

.poster__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

.poster__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding-block-end: 0.4rem;
  border-block-end: 2px solid var(--text);
  color: var(--text);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.poster__cta svg {
  inline-size: 18px;
  block-size: 18px;
  transition: transform var(--dur) var(--ease);
}

.poster__cta:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

.poster__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding-block-end: 0.2rem;
  border-block-end: 1px solid var(--border-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.poster__link:hover {
  color: var(--text);
  border-color: var(--text);
}

/* Hero deck — three slides on a horizontal track. Native scroll-snap does the
   swiping; js/main.js adds arrows, dots, keys and a slow auto-advance. */

.deck {
  position: relative;
}

.deck__track {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.deck__track::-webkit-scrollbar {
  display: none;
}

.deck__slide {
  display: flex;
  flex: 0 0 100%;
  min-inline-size: 0;
  scroll-snap-align: start;
}

.deck__slide > * {
  inline-size: 100%;
  min-inline-size: 0;
}

/* Slide controls — a labelled contents row. The tabs say what the deck
   contains instead of three anonymous dots; arrows sit at the inline end. */

.deck__nav {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
  border-block-start: 1px solid var(--border);
}

.deck__tabs {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.deck__tabs::-webkit-scrollbar {
  display: none;
}

.deck__tab {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding-block: 0.85rem 0.7rem;
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.deck__tab-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.deck__tab[aria-current="true"] {
  color: var(--text);
  border-color: var(--accent);
}

.deck__tab[aria-current="true"] .deck__tab-num {
  color: var(--accent-ink);
}

.deck__arrows {
  display: flex;
  gap: 0.25rem;
  margin-inline-start: auto;
  padding-block-end: 0.35rem;
}

.deck__arrow {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.deck__arrow svg {
  inline-size: 14px;
  block-size: 14px;
}

.deck__arrow:hover {
  background: var(--surface-2);
  color: var(--text);
}

@media (max-width: 600px) {
  .deck__tabs {
    gap: 0.8rem;
  }

  .deck__tab {
    font-size: var(--fs-xs);
  }

  /* The labels matter more than the index numbers on a narrow screen. */
  .deck__tab-num {
    display: none;
  }
}

/* Slides 2 and 3 reuse the poster frame from slide 1: a mono meta rule, one
   statement, a lead, then a hairline list. Sharing the frame keeps the deck
   seamless instead of switching to a boxed card on the second swipe. */

.poster--compact .poster__title {
  margin-block: clamp(1.1rem, 2.2vw, 1.7rem) clamp(0.85rem, 1.6vw, 1.2rem);
  font-size: clamp(2.1rem, 0.95rem + 4vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.poster__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.poster__ai {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
}

/* The use-case and risk lists share one pattern: a top hairline, then rows
   separated by hairlines. Two columns from tablet up. */

.use-cases,
.risks {
  margin: clamp(0.9rem, 1.8vw, 1.35rem) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--border);
}

@media (min-width: 720px) {
  .use-cases,
  .risks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.6rem, 3vw, 3rem);
  }
}

/* Eight cases fit three rows on a desktop instead of four, keeping the deck
   close to the height of the poster slide. */
@media (min-width: 1080px) {
  .use-cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.use-cases li {
  padding-block: 0.68rem;
  border-block-end: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.52;
  color: var(--text-muted);
}

.use-cases strong {
  display: block;
  margin-block-end: 0.08rem;
  font-weight: 600;
  color: var(--text);
}

.risks__item {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.35rem;
  padding-block: 0.68rem;
  border-block-end: 1px solid var(--border);
}

.risks__num {
  padding-block-start: 0.2rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}

.risks__body {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.risks__body strong {
  display: block;
  margin-block-end: 0.08rem;
  font-weight: 600;
  color: var(--text);
}

/* The two lists are the tallest part of their slides; on a phone they are
   compressed so the hero does not grow past the slide controls. */
@media (max-width: 479px) {
  .use-cases li,
  .risks__item {
    padding-block: 0.52rem;
  }

  .risks__item {
    grid-template-columns: 1.65rem minmax(0, 1fr);
  }

  .use-cases li,
  .risks__body {
    font-size: 0.875rem;
    line-height: 1.46;
  }
}

/* Terminal / deploy log */

.window {
  position: relative;
  border: 1px solid var(--code-border);
  border-radius: var(--r-lg);
  background: var(--code-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  direction: ltr;
  text-align: left;
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 0.9rem;
  border-block-end: 1px solid #1b222d;
  background: #0b1017;
}

.window__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: #2a3442;
}

.window__dot:first-child {
  background: #3d4757;
}

.window__title {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7688;
}

.window__body {
  margin: 0;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.68rem + 0.25vw, 0.875rem);
  line-height: 2;
  color: #c3cbd6;
  white-space: pre;
}

.window__body .prompt {
  color: #fbbf24;
}

.window__body .flag {
  color: #f87171;
}

.window__body .ok {
  color: #34d399;
}

.window__body .dim {
  color: #6b7688;
}

.window__body .val {
  color: #dbe4ee;
}

.window__cursor {
  display: inline-block;
  inline-size: 7px;
  block-size: 1.05em;
  margin-inline-start: 2px;
  vertical-align: -0.16em;
  background: #fbbf24;
  animation: blink 1.15s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

.window__caption {
  padding: 0.8rem 1.1rem;
  border-block-start: 1px solid #1b222d;
  background: #0b1017;
  font-size: var(--fs-xs);
  color: #8a95a6;
  line-height: 1.5;
}

/* --- Stats --------------------------------------------------------------- */

.stats {
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-inline: 1px solid var(--border);
}

.stat {
  padding: clamp(1.25rem, 3vw, 2.1rem) clamp(0.85rem, 2.2vw, 1.75rem);
  background: var(--bg-alt);
}

.stat__value {
  display: block;
  font-size: var(--fs-num);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Keep "84+" reading as a number, not "+84". */
[dir="rtl"] .stat__value {
  direction: ltr;
  text-align: right;
}

.stat__value::after {
  content: "+";
  color: var(--bit);
  margin-inline-start: 0.05em;
}

.stat__value--plain::after {
  content: none;
}

.stat__label {
  display: block;
  margin-block-start: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-wrap: balance;
}

@media (min-width: 760px) {
  .stat {
    padding-block: clamp(1.75rem, 3vw, 2.4rem);
  }

  .stat__label {
    font-size: var(--fs-base);
  }
}

/* --- Services ------------------------------------------------------------ */

.cards {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

/* Six cards, three across — otherwise wide screens leave two orphans. */
@media (min-width: 1000px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.3rem, 2.2vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  inset-inline: 1.4rem;
  inset-block-start: -1px;
  block-size: 1px;
  background: var(--seam);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
  }

  .card:hover::after {
    opacity: 1;
  }
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  margin-block-end: 0.35rem;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.card__icon svg {
  inline-size: 21px;
  block-size: 21px;
}

.card__title {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.card__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.65;
}

/* --- Process ------------------------------------------------------------- */

.steps {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: step;
}

/* Four stages, four columns, no orphan on the second row. */
@media (min-width: 1000px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step {
  position: relative;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--border-strong);
}

.step::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 2.75rem;
  block-size: 2px;
  background: var(--seam);
}

.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-block-end: 0.6rem;
}

.step__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-block-end: 0.5rem;
}

.step__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.68;
}

/* --- Work / portfolio ---------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1.75rem;
}

.filter {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.filter:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.filter[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.work__grid {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* Six projects, three across. */
@media (min-width: 1000px) {
  .work__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.project {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .project:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
  }

  .project:hover .thumb__art {
    transform: scale(1.04);
  }
}

.project[hidden] {
  display: none;
}

.project__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-block-end: 1px solid var(--border);
  background-image: linear-gradient(145deg, var(--t1), var(--t2));
  background-color: var(--surface-2);
}

.project[data-accent="1"] .project__thumb {
  --t1: rgba(196, 43, 43, 0.32);
  --t2: rgba(122, 20, 20, 0.16);
}

.project[data-accent="2"] .project__thumb {
  --t1: rgba(122, 20, 20, 0.34);
  --t2: rgba(251, 191, 36, 0.16);
}

.project[data-accent="3"] .project__thumb {
  --t1: rgba(251, 191, 36, 0.28);
  --t2: rgba(196, 43, 43, 0.16);
}

.project[data-accent="4"] .project__thumb {
  --t1: rgba(251, 191, 36, 0.3);
  --t2: rgba(196, 43, 43, 0.15);
}

.project[data-accent="5"] .project__thumb {
  --t1: rgba(196, 43, 43, 0.3);
  --t2: rgba(251, 191, 36, 0.16);
}

.project[data-accent="6"] .project__thumb {
  --t1: rgba(122, 20, 20, 0.28);
  --t2: rgba(251, 191, 36, 0.15);
}

.thumb__art {
  inline-size: 72%;
  block-size: auto;
  color: var(--text);
  opacity: 0.22;
  transition: transform 400ms var(--ease);
}

.thumb-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface);
  /* The embedded demo is always LTR; without this the 1280px iframe aligns
     to the right in an RTL page and is clipped out of view. */
  direction: ltr;
}

.thumb-frame iframe {
  display: block;
  inline-size: 1280px;
  block-size: 720px;
  border: 0;
  background: var(--surface);
  pointer-events: none;
  transform-origin: 0 0;
}

.project__open {
  position: absolute;
  inset-block-end: 0.7rem;
  inset-inline-end: 0.7rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.project:hover .project__open,
.project:focus-visible .project__open {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .project__open { opacity: 1; transform: none; }
}

.project__chip {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-start: 0.85rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.project__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.05rem, 1.8vw, 1.4rem);
}

.project__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.project__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: 0.35rem;
}

.tag {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
}


/* --- Single case study (work section) ------------------------------------ */

.work__list {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  min-inline-size: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.case__copy {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
}

.case__identity {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.case__identity-copy {
  min-inline-size: 0;
}

.case__identity .case__kicker {
  margin-block-end: 0.22rem;
}

.case__identity .case__title {
  margin: 0;
}

.case__logo {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
}

.case__logo img {
  display: block;
  inline-size: 48px;
  block-size: 48px;
  object-fit: contain;
}

.case__logo--ecologic img {
  inline-size: 39px;
  block-size: 43px;
}

.case__kicker {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.case__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}

.case__desc {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.68;
}

.case__points {
  display: grid;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.case__points li {
  display: flex;
  gap: 0.6rem;
}

.case__points li::before {
  content: "✓";
  flex: none;
  font-weight: 700;
  color: var(--accent);
}

.case__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-start: auto;
  padding-block-start: 0.4rem;
}

.case__note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.case__preview {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-inline-start: 1px solid var(--border);
  background: var(--surface-2);
}

.case__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.case__url {
  margin-inline-start: 0.5rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.case__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-block-end: 0.2rem;
}

.case__tab {
  flex: none;
  padding: 0.34rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.case__tab:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.case__tab[aria-selected="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.case__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  direction: ltr;
}

.case__stage iframe {
  display: block;
  inline-size: 1280px;
  block-size: 800px;
  border: 0;
  background: var(--surface);
  transform-origin: 0 0;
}

.case__hint {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

@media (max-width: 980px) {
  .case {
    grid-template-columns: minmax(0, 1fr);
  }

  .case__preview {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .case__tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .case__logo {
    inline-size: 46px;
    block-size: 46px;
  }

  .case__logo img {
    inline-size: 42px;
    block-size: 42px;
  }

  .case__logo--ecologic img {
    inline-size: 34px;
    block-size: 38px;
  }
}

/* Empty slot, shown only while the grid has no cards. js/main.js swaps it for
   the filter row once a project is added. */
.work__empty {
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2rem);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
  text-align: center;
}

/* --- Pricing -------------------------------------------------------------
   One spotlight for the engagement most clients choose, two quiet alternates
   beside it, then the ongoing options as ruled rows. This keeps the section
   from reading as three identical SaaS cards. */

.pricing-spot {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
}

@media (min-width: 900px) {
  .pricing-spot {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.pricing-spot__main {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--code-border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(251, 191, 36, 0.16), transparent 55%),
    radial-gradient(90% 90% at 0% 100%, rgba(196, 43, 43, 0.5), transparent 60%),
    var(--code-bg);
  color: #f4f7fb;
}

.pricing-spot__flag {
  align-self: flex-start;
  padding: 0.22rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-amber);
}

.pricing-spot__name {
  margin-block-start: 1.4rem;
  font-size: var(--fs-h3);
  font-weight: 600;
}

.pricing-spot__price {
  margin-block-start: 0.35rem;
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}

.pricing-spot__period {
  margin-block-start: 0.3rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.62);
}

.pricing-spot__desc {
  margin-block-start: 1rem;
  max-inline-size: 34rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.pricing-spot__list {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
}

.pricing-spot__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.45;
}

.pricing-spot__list svg {
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  margin-block-start: 0.2em;
  color: var(--brand-amber);
}

.pricing-spot__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.6rem;
  margin-block-start: auto;
  padding: 0.8rem 1.2rem;
  border-radius: var(--r-full);
  background: #ffffff;
  color: #0b1220;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.pricing-spot__cta:hover {
  background: var(--brand-amber);
}

.pricing-spot__cta svg {
  inline-size: 14px;
  block-size: 14px;
}

.pricing-spot__side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.pricing-mini {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.4vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.pricing-mini__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.pricing-mini__name {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.pricing-mini__price {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: end;
  white-space: nowrap;
}

.pricing-mini__price em {
  display: block;
  margin-block-start: 0.1rem;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-faint);
}

.pricing-mini__desc {
  margin-block-start: 0.35rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

.pricing-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.9rem;
  inline-size: fit-content;
  border-block-end: 1px solid transparent;
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.pricing-link:hover {
  border-color: currentColor;
}

.pricing-link svg {
  inline-size: 14px;
  block-size: 14px;
}

.pricing-rows {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: 1px solid var(--border);
}

.pricing-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) auto auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1rem;
  border-block-end: 1px solid var(--border);
}

.pricing-row__name {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.pricing-row__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.pricing-row__price {
  font-weight: 600;
  white-space: nowrap;
}

.pricing-row__price em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-faint);
}

.pricing-row__go {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: end;
  inline-size: 44px;
  block-size: 44px;
  margin-block: -0.5rem;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}

.pricing-row__go:hover {
  color: var(--accent-ink);
}

.pricing-row__go svg {
  inline-size: 15px;
  block-size: 15px;
}

@media (max-width: 720px) {
  .pricing-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
  }

  .pricing-row__name {
    grid-column: 1;
    grid-row: 1;
  }

  .pricing-row__price {
    grid-column: 2;
    grid-row: 1;
    text-align: end;
  }

  .pricing-row__desc {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-inline-end: 2.5rem;
  }

  .pricing-row__go {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}

.pricing__note {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--border-strong);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 46rem;
}

/* --- Testimonials -------------------------------------------------------- */

.quotes {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.3rem, 2.2vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.quote__mark {
  inline-size: 22px;
  block-size: 22px;
  color: var(--accent);
  opacity: 0.8;
}

.quote__text {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text);
}

.quote__author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-block-start: auto;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--border);
}

.avatar {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--grad-cta);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.quote__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.quote__role {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.4;
}

/* --- Contact ------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
}

.contact__glow {
  position: absolute;
  inset-block-start: -12rem;
  inset-inline-start: -10rem;
  inline-size: min(40rem, 100vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(196, 43, 43, 0.16),
    transparent 65%
  );
  pointer-events: none;
}

.contact__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .contact__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.contact__list {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 2rem;
}

.contact__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

a.contact__item:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.contact__icon {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.contact__icon svg {
  inline-size: 18px;
  block-size: 18px;
}

.contact__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.4;
}

.contact__value {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}

/* Phone numbers and addresses are Latin runs: stop Arabic bidi from
   reversing "+963 900 000 000" into "000 000 900 963+". */
.contact__value[dir="ltr"] {
  text-align: start;
}

[dir="rtl"] .contact__value[dir="ltr"] {
  text-align: right;
}

/* Panels on the right */

.panel {
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  align-self: start;
}

.panel__title {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.panel__text {
  margin-block-start: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

.form {
  display: grid;
  gap: 0.9rem;
  margin-block-start: 1.4rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.field__input,
.field__textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.field__textarea {
  resize: vertical;
  min-block-size: 6.5rem;
  line-height: 1.6;
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--text-faint);
}

.field__error {
  font-size: var(--fs-xs);
  color: #d92d20;
  display: none;
}

.field.has-error .field__input,
.field.has-error .field__textarea {
  border-color: #d92d20;
}

.field.has-error .field__error {
  display: block;
}

.form__note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.5;
}

.form__status {
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.form__status[data-state="ok"] {
  color: var(--accent-ink);
}

.form__status[data-state="err"] {
  color: #d92d20;
}

[hidden] {
  display: none !important;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--bg-alt);
  border-block-start: 1px solid var(--border);
  padding-block-start: clamp(2.5rem, 5vw, 3.75rem);
}

.footer__grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  padding-block-end: clamp(2rem, 4vw, 3rem);
}

.footer__brand {
  grid-column: 1 / -1;
  max-inline-size: 24rem;
}

@media (min-width: 760px) {
  .footer__brand {
    grid-column: span 2;
  }
}

.footer__blurb {
  margin-block-start: 0.9rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

.footer__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: 0.9rem;
}

.footer__links {
  display: grid;
  gap: 0.6rem;
  font-size: var(--fs-sm);
}

.footer__links a {
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
  width: fit-content;
}

.footer__links a:hover {
  color: var(--text);
}

.social {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 1.1rem;
}

.social a {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.social a:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}

.social svg {
  inline-size: 16px;
  block-size: 16px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.25rem 1.5rem;
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.footer__bottom p {
  line-height: 1.5;
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.to-top:hover {
  color: var(--text);
}

.to-top svg {
  inline-size: 13px;
  block-size: 13px;
}

/* --- Floating back-to-top ------------------------------------------------ */

.scroll-top {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 80;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur), color var(--dur) var(--ease);
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.scroll-top:hover {
  color: var(--text);
}

.scroll-top svg {
  inline-size: 16px;
  block-size: 16px;
}

/* --- Reveal on scroll ----------------------------------------------------
   Nothing is hidden until the `js` class is present, so a blocked or
   slow script never leaves the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Directional icons --------------------------------------------------- */

[dir="rtl"] .flip-x {
  transform: scaleX(-1);
}

/* --- Wide screens -------------------------------------------------------- */

@media (min-width: 1600px) {
  :root {
    --container: 1320px;
  }
}

@media (min-width: 2200px) {
  :root {
    --container: 1440px;
    --fs-base: 1.125rem;
  }
}

/* --- Short viewports (landscape phones) --------------------------------- */

@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --section-y: 2.75rem;
  }

  .hero {
    padding-block: 2rem;
  }

  .window__body {
    line-height: 1.7;
  }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .window__cursor {
    animation: none;
  }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header,
  .scroll-top,
  .filters,
  .hero__actions,
  .social,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding-block: 1.5rem;
  }

  .card,
  .project,
  .pricing-spot__main,
  .pricing-mini,
  .pricing-row,
  .quote,
  .panel {
    break-inside: avoid;
    box-shadow: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #555;
  }
}

/* --- Inner pages (about / faq / careers) --------------------------------- */

.pageTop {
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem))
    clamp(1rem, 2.5vw, 2rem);
}

.page__title {
  max-inline-size: 24ch;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.pageHead .lead {
  margin-block-start: 1.15rem;
  max-inline-size: 48rem;
}

.bodyText {
  margin-block-start: 1rem;
  max-inline-size: 64ch;
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.about__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }
}

.about__facts {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.about__facts ul {
  display: grid;
  gap: 0.9rem;
}

.about__facts li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.about__facts strong {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.about__facts em {
  font-style: normal;
  color: var(--bit);
}

.about__note {
  margin-block-start: 1.1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.pageCta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.pageCta__title {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.pageCta__text {
  margin-block-start: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.faq {
  display: grid;
  gap: 0.55rem;
  max-inline-size: 56rem;
}

.faq__item {
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  color: var(--accent-ink);
  font-weight: 600;
}

.faq__item[open] summary::after {
  content: "–";
}

.faq__item p {
  margin-block-start: 0.65rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

.faq__more {
  margin-block-start: 1.75rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.faq__more a {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.careers__panel {
  max-inline-size: 44rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.careers__panel .btn {
  margin-block-start: 1.5rem;
}