/* ==========================================================================
   12 Loop — styles
   Dark-first. Logical properties throughout so [dir="rtl"] mirrors the layout.

   Motion rule: everything that moves or fades animates `transform` / `opacity` only
   (plus `visibility` as an on/off switch timed to a fade). Hover borders, glows and
   fills are separate layers whose opacity changes — no colour, size, position or
   shadow-spread animation.
   ========================================================================== */

/* ---------- Fonts (self-hosted; SIL Open Font License — see fonts/OFL-*.txt) ----------
   Variable WOFF2 files, one per script the page uses. Families, weight ranges, subsets and
   unicode-ranges match the Google Fonts CSS these replace, so rendering is unchanged.
   Latin files are preloaded in index.html; the Arabic one too on Arabic pages. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/readex-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/readex-pro-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
  /* Brand */
  --c-orange: #ff6b1a;          /* 5.9:1 on --c-surface, 6.8:1 on --c-bg — AA for body text */
  --c-orange-2: #ff8c2e;
  --c-orange-soft: rgba(255, 107, 26, 0.13);
  --c-orange-line: rgba(255, 107, 26, 0.45);

  /* Gunmetal scale */
  --c-bg: #0d0e10;
  --c-bg-2: #121316;
  --c-surface: #1c1e22;
  --c-surface-2: #24272c;
  --c-steel: #3a3d42;
  --c-steel-2: #50545b;
  --c-line: rgba(255, 255, 255, 0.08);
  --c-line-2: rgba(255, 255, 255, 0.15);

  /* Text */
  --c-text: #f2f3f5;
  --c-text-2: #c9ccd1;
  --c-muted: #a3a8b0;           /* 7.0:1 on --c-surface */
  --c-dim: #8a9099;             /* 5.2:1 on --c-surface */

  --grad-brand: linear-gradient(90deg, #8a9099 0%, #50545b 38%, #ff6b1a 72%, #ff8c2e 100%);
  --grad-orange: linear-gradient(90deg, #ff6b1a, #ff8c2e);
  --circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23ffffff' stroke-opacity='.07'%3E%3Cpath d='M0 36h44l18 18h40l18-18h60M90 54v38l18 18h72M0 110h30l20-20h26M36 180v-34l16-16M36 0v12M124 0v22l16 16M124 180v-18M150 180v-40l-14-14h-28M150 0v10'/%3E%3Cg fill='%23ffffff' fill-opacity='.12' stroke='none'%3E%3Ccircle cx='76' cy='90' r='2.5'/%3E%3Ccircle cx='52' cy='130' r='2.5'/%3E%3Ccircle cx='36' cy='12' r='2.5'/%3E%3Ccircle cx='140' cy='38' r='2.5'/%3E%3Ccircle cx='124' cy='162' r='2.5'/%3E%3Ccircle cx='108' cy='126' r='2.5'/%3E%3Ccircle cx='150' cy='10' r='2.5'/%3E%3C/g%3E%3C/svg%3E");

  /* Type */
  --f-display: "Space Grotesk", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --f-code: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace; /* stays Latin mono in every language */
  --track-tight: -0.025em;
  --track-wide: 0.14em;

  /* Shape & motion */
  --cut: 14px;
  --header-h: 68px;
  --container: 1200px;
  --gutter: 16px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Control heights — every CTA uses one of these */
  --h-sm: 40px;
  --h-md: 48px;
  --h-lg: 54px;
  --h-xl: 60px;
}

/* Arabic: one family that covers both scripts, no letter-spacing (it breaks joining). */
[lang="ar"] {
  --f-display: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --f-mono: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --track-tight: 0;
  --track-wide: 0;
}

/* Uppercase labels would only shout the Latin words ("12 LOOP") inside Arabic text. */
[lang="ar"] :is(.eyebrow, .section-index, .extras__label, .hero__tagline p, .site-footer__tagline) {
  text-transform: none;
}

@media (max-width: 639.98px) { :root { --header-h: 62px; } }
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }
@media (min-width: 1600px) { :root { --container: 1280px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  background: var(--c-bg);
  color-scheme: dark;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 1rem/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

[lang="ar"] body { line-height: 1.8; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { overflow-wrap: break-word; }
[hidden] { display: none !important; }

::selection { background: var(--c-orange); color: #111; }

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

/* Language switch: no flash of the wrong language on load… */
.i18n-pending body { visibility: hidden; }
/* …and a short fade that hides the one re-layout when switching live. */
main,
.site-footer,
.site-header__inner { transition: opacity 0.14s ease; }
.is-switching-lang :is(main, .site-footer, .site-header__inner) { opacity: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-orange);
  color: #111;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* physical on purpose: safe areas are physical (landscape phones with a notch) */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Icons ---------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--flip { transform: rotate(180deg); }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }
[dir="rtl"] .icon--dir.icon--flip { transform: rotate(180deg) scaleX(-1); }

/* ---------- Chamfered shapes (echo the octagon facets in the logo) ---------- */
.card,
.icon-tile,
.about__visual,
.pricing,
.price-card,
.contact__panel,
.tile__frame,
.btn--ghost,
.icon-btn {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
[dir="rtl"] :is(.card, .icon-tile, .about__visual, .pricing, .price-card, .contact__panel, .tile__frame, .btn--ghost, .icon-btn) {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- Buttons ----------
   Primary: orange chamfer in ::before, a soft glow in ::after that fades in on hover.
   Ghost / icon buttons: the element is clipped and its own background is the 1px border;
   ::before is an orange border layer that fades in, ::after the inner fill. */
.btn {
  --cut: 9px;
  --btn-fg: var(--c-text);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: var(--h-md);
  padding: 0.7em 1.3em;
  border: 0;
  background: none;
  color: var(--btn-fg);
  font: 600 0.95rem/1.15 var(--f-display);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.2s var(--ease);
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.btn .icon { width: 1.2em; height: 1.2em; transition: translate 0.2s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.btn:hover .icon--dir { translate: 3px 0; }
[dir="rtl"] .btn:hover .icon--dir { translate: -3px 0; }

.btn--primary { --btn-fg: #141414; }
.btn--primary::before {
  inset: 0;
  background: var(--grad-orange);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
[dir="rtl"] .btn--primary::before {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn--primary::after {
  inset: -12px -10px;
  z-index: -2;
  background: radial-gradient(closest-side, rgba(255, 107, 26, 0.55), rgba(255, 107, 26, 0));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after { opacity: 1; }

.btn--ghost,
.icon-btn {
  --fill: rgba(13, 14, 16, 0.92);
  background: var(--c-line-2);
}
.btn--ghost::before,
.icon-btn::before {
  inset: 0;
  background: var(--grad-orange);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.btn--ghost::after,
.icon-btn::after { inset: 1px; background: var(--fill); }
.btn--ghost:hover,
.icon-btn:hover { color: var(--c-orange-2); }
.btn--ghost:hover::before,
.icon-btn:hover::before { opacity: 1; }
/* Clipped elements can't show an outline, so focus = a 2px orange chamfered ring. */
.btn--ghost:focus-visible,
.icon-btn:focus-visible { outline: none; color: var(--c-orange-2); }
.btn--ghost:focus-visible::before,
.icon-btn:focus-visible::before { opacity: 1; }
.btn--ghost:focus-visible::after,
.icon-btn:focus-visible::after { inset: 2px; }

.btn--sm { min-height: var(--h-sm); padding: 0.5em 0.95em; font-size: 0.875rem; --cut: 7px; }
.btn--lg { min-height: var(--h-lg); padding: 0.85em 1.5em; font-size: 1rem; }
.btn--xl { min-height: var(--h-xl); padding: 1em 2em; font-size: 1.08rem; --cut: 12px; }
.btn--block { width: 100%; }

.icon-btn {
  --cut: 8px;
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--h-md);
  height: var(--h-md);
  padding: 0;
  border: 0;
  color: var(--c-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.2s var(--ease);
}
.icon-btn::before,
.icon-btn::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.icon-btn:active { transform: scale(0.92); transition-duration: 0.08s; }

/* ---------- Segmented switches (language, screenshot interface) ---------- */
.seg {
  --n: 3;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border: 1px solid var(--c-line-2);
  background: rgba(255, 255, 255, 0.03);
}
.seg__thumb {
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: calc((100% - 6px) / var(--n));
  background: var(--grad-orange);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  transform: translateX(3px);
}
.seg.is-ready .seg__thumb { transition: transform 0.35s var(--ease-out); }
.seg__opt {
  position: relative;
  min-width: 38px;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  background: none;
  color: var(--c-text);
  font: 600 0.8rem/1 "Space Grotesk", var(--f-display);
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.62;
  touch-action: manipulation;
  transition: opacity 0.2s, transform 0.15s var(--ease);
}
.seg__opt[lang="ar"] { font-family: "Readex Pro", system-ui, sans-serif; letter-spacing: 0; font-size: 0.85rem; }
.seg__opt:hover { opacity: 1; }
.seg__opt:active { transform: scale(0.94); }
.seg__opt[aria-pressed="true"] { color: #141414; opacity: 1; }
.seg__opt:focus-visible { outline-offset: -1px; }
.seg__short { display: none; }
@media (max-width: 399.98px) {
  .seg__long { display: none; }
  .seg__short { display: inline; }
}
.seg--mini { --n: 2; padding: 2px; }
.seg--mini .seg__thumb { top: 2px; bottom: 2px; width: calc((100% - 4px) / var(--n)); }
.seg--mini .seg__opt { min-width: 32px; min-height: 26px; font-size: 0.72rem; }
.seg--mini .seg__opt[lang="ar"] { font-size: 0.8rem; }

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--c-orange);
  font: 500 0.8rem/1.3 var(--f-mono);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.pulse-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-orange);
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-orange);
  animation: pulse 2.2s ease-out infinite;
}

.text-accent {
  background: var(--grad-orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section { position: relative; padding-block: clamp(64px, 9vw, 112px); }

.section-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--c-orange);
  font: 500 0.8rem/1.3 var(--f-mono);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.section-index__n { display: inline-flex; align-items: center; gap: 12px; color: var(--c-dim); }
.section-index__n::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--grad-brand);
}

.section-title {
  max-width: 20ch;
  margin: 0;
  font: 700 clamp(2rem, 1.3rem + 3vw, 3.4rem)/1.08 var(--f-display);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
[lang="ar"] .section-title { line-height: 1.35; }

/* Cards — hover lifts (translate) and fades in an orange border + corner glow layer. */
.card {
  --cut: 14px;
  position: relative;
  background: linear-gradient(180deg, #1f2125, var(--c-surface));
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: translate 0.35s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 107, 26, 0.13), transparent 60%);
  box-shadow: inset 0 0 0 1px var(--c-orange-line);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
[dir="rtl"] .card::before { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 107, 26, 0.13), transparent 60%); }
.card::after {                       /* thin line along the cut corner */
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: calc(100% - var(--cut));
  width: calc(var(--cut) * 1.4142);
  height: 1.5px;
  background: var(--c-orange);
  opacity: 0.3;
  transform-origin: 0 0;
  transform: rotate(45deg);
  transition: opacity 0.35s;
}
[dir="rtl"] .card::after { transform-origin: 100% 0; transform: rotate(-45deg); }
.card:hover { translate: 0 -4px; }
.card:hover::before,
.card:hover::after { opacity: 1; }

.icon-tile {
  --cut: 8px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  color: var(--c-orange);
  background: var(--c-orange-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 26, 0.3);
}
.icon-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 107, 26, 0.26);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.icon-tile .icon { width: 22px; height: 22px; transition: transform 0.35s var(--ease-out); }
.card:hover .icon-tile::before { opacity: 1; }
.card:hover .icon-tile .icon { transform: scale(1.12); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
}
/* Scrolled background: a layer that fades in (no colour transition). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 14, 16, 0.97);
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
  transition: opacity 0.3s;
}
.site-header.is-scrolled::before,
.nav-open .site-header::before { opacity: 1; }
/* Backdrop blur only on larger screens — on phones it would re-blur the animated hero every frame. */
@media (min-width: 900px) {
  .site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: rgba(13, 14, 16, 0.45);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
  }
  .site-header::before { background: rgba(13, 14, 16, 0.72); }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  font: 700 1.15rem/1 "Space Grotesk", var(--f-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand__pic {
  width: 36px;
  aspect-ratio: 95 / 96;
  /* faint disc while the mark decodes */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 52%, transparent 55%);
}
.brand__mark { width: 100%; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.site-nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  position: relative;
  display: block;
  padding: 8px 12px;
  color: var(--c-text);
  font-size: 0.93rem;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--grad-orange);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current] { opacity: 1; }
.site-nav a:hover::after { transform: scaleX(0.5); }
.site-nav a[aria-current]::after { transform: scaleX(1); }

.site-header .lang-switch { --n: 3; }

.nav-toggle {
  display: none;
  place-items: center;
  width: var(--h-sm);
  height: var(--h-sm);
  border: 1px solid var(--c-line-2);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s var(--ease);
}
.nav-toggle:active { transform: scale(0.92); }
.nav-toggle__bars { position: relative; display: block; width: 18px; height: 12px; }
.nav-toggle__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.32s var(--ease-out), opacity 0.2s;
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 5.25px; }
.nav-toggle__bars i:nth-child(3) { top: 10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

.nav-scrim { display: none; }

@media (min-width: 900px) {
  .site-nav { margin-inline-start: auto; }
  .site-header__actions { margin-inline-start: 8px; }
}

/* The header CTA returns at 1100px, when there's room next to the nav; below that the hero
   CTA and the floating WhatsApp button cover it. */
@media (max-width: 1099.98px) {
  .site-header__cta { display: none; }
}

@media (max-width: 899.98px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: 6px max(var(--gutter), env(safe-area-inset-right)) 22px max(var(--gutter), env(safe-area-inset-left));
    background: rgba(13, 14, 16, 0.98);
    border-bottom: 1px solid var(--c-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.24s var(--ease), transform 0.32s var(--ease-out), visibility 0s linear 0.32s;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.24s var(--ease), transform 0.32s var(--ease-out), visibility 0s;
  }
  .site-nav__list { flex-direction: column; }
  .site-nav li {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.3s var(--ease-out);
  }
  .site-nav.is-open li { opacity: 1; transform: none; }
  .site-nav.is-open li:nth-child(2) { transition-delay: 40ms; }
  .site-nav.is-open li:nth-child(3) { transition-delay: 80ms; }
  .site-nav.is-open li:nth-child(4) { transition-delay: 120ms; }
  .site-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--c-line);
  }
  .site-nav a::after {
    position: static;
    inset: auto;
    width: 8px;
    height: 8px;
    background: var(--c-orange);
    transform: scale(0);
  }
  .site-nav a[aria-current]::after { transform: scale(1) rotate(45deg); }
  .site-nav a:hover::after { transform: scale(0.6) rotate(45deg); }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }
}

@media (max-width: 359.98px) {
  .brand__name { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(32px, 7vw, 88px) 32px;
  overflow: hidden;
  background:
    radial-gradient(55% 55% at 78% 35%, rgba(255, 107, 26, 0.13), transparent 70%),
    radial-gradient(45% 50% at 12% 85%, rgba(138, 144, 153, 0.08), transparent 70%);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), #000 60%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), #000 60%);
}
[dir="rtl"] .hero__canvas {
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.35), #000 60%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.35), #000 60%);
}
.hero__canvas.is-ready { opacity: 1; }

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, #000 15%, transparent 75%);
}

.hero__inner {
  display: grid;
  gap: 28px;
  align-items: center;
}

.hero__eyebrow { color: var(--c-text-2); }

.hero__title {
  margin: 0;
  font: 700 clamp(2.9rem, 1.6rem + 5.4vw, 5.75rem)/1 var(--f-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
[lang="ar"] .hero__title { line-height: 1.25; letter-spacing: 0; }

.hero__tagline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.hero__tagline p {
  margin: 0;
  color: var(--c-text-2);
  font: 600 clamp(0.78rem, 0.7rem + 0.35vw, 0.95rem)/1.45 var(--f-display);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
[lang="ar"] .hero__tagline p { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); }
.rule { flex: none; width: 56px; height: 2px; background: var(--grad-brand); }

.hero__lead {
  max-width: 34rem;
  margin: 20px 0 0;
  color: var(--c-muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__visual { order: -1; }

.mark-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(58vw, 240px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.mark-stage__glow {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 45%, rgba(255, 107, 26, 0.4), transparent 60%),
    radial-gradient(circle at 30% 55%, rgba(138, 144, 153, 0.25), transparent 60%);
  filter: blur(28px);
  animation: glow 6s ease-in-out infinite alternate;
}
/* Each ring is its own <svg> element rotated as a whole, so it runs on the compositor. */
.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spin 90s linear infinite;
}
.ring polygon { fill: none; stroke: url(#ring-grad); stroke-width: 1.2; }
.ring--outer polygon { stroke-dasharray: 3 7; opacity: 0.8; }
.ring--inner { animation-duration: 130s; animation-direction: reverse; }
.ring--inner polygon { opacity: 0.45; }
.ring__node { fill: #8a9099; }
.ring__node--hot { fill: var(--c-orange); filter: drop-shadow(0 0 5px var(--c-orange)); }

.mark-stage__logo {
  position: relative;
  width: 60%;
  animation: float 7s ease-in-out infinite;
}
.mark-stage__logo img {
  width: 100%;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 28px rgba(255, 107, 26, 0.16));
}

.shard {
  position: absolute;
  width: 26px;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--c-orange-2), #a93c07);
  clip-path: polygon(50% 0, 100% 78%, 8% 100%);
  animation: drift 9s ease-in-out infinite;
}
.shard--a { top: 8%; inset-inline-end: 12%; }
.shard--b {
  bottom: 12%;
  inset-inline-start: 8%;
  width: 20px;
  background: linear-gradient(135deg, #8a9099, #3a3d42);
  animation-delay: -3s;
}
.shard--c { bottom: 24%; inset-inline-end: 2%; width: 12px; animation-delay: -6s; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
}
.hero__facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text-2);
  font-size: 0.9rem;
  line-height: 1.35;
}
.hero__facts-k {
  flex: none;
  min-width: 3.4em;
  padding: 6px 7px;
  border: 1px solid rgba(255, 107, 26, 0.35);
  background: var(--c-orange-soft);
  color: var(--c-orange);
  font: 600 0.72rem/1 var(--f-code);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; }
  .hero__visual { order: 0; }
  .mark-stage { width: min(100%, 440px); }
  .hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
  .hero__ctas .btn { flex: 1 1 100%; }
}

/* ---------- About ---------- */
.about__grid { display: grid; gap: 44px; }
.about__text {
  max-width: 38rem;
  margin: 24px 0 0;
  color: var(--c-text-2);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
}

.about__visual {
  --cut: 26px;
  position: relative;
  margin: 0;
  /* circuit texture doubles as the placeholder while the banner loads */
  background: var(--circuit), linear-gradient(180deg, #17181c, #111215);
}
.about__visual img { width: 100%; aspect-ratio: 1400 / 920; object-fit: cover; }
.about__visual::before,
.about__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.about__visual::before { z-index: 1; background: linear-gradient(to top, rgba(13, 14, 16, 0.75), transparent 45%); }
.about__visual::after { z-index: 2; box-shadow: inset 0 0 0 1px var(--c-line-2); }
.about__visual-cap {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  inset-inline-start: 18px;
  padding: 4px 8px;
  background: rgba(13, 14, 16, 0.65);
  color: var(--c-text-2);
  font: 500 0.75rem/1.2 var(--f-code);
}

.pillars {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pillar { padding: 26px 24px 28px; }
.pillar__title { margin: 0 0 8px; font: 600 1.15rem/1.3 var(--f-display); }
.pillar p { margin: 0; color: var(--c-muted); font-size: 0.95rem; }

@media (min-width: 640px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy visual" "pillars pillars";
    align-items: center;
    column-gap: 64px;
    row-gap: 56px;
  }
  .about__copy { grid-area: copy; }
  .about__visual { grid-area: visual; }
  .pillars { grid-area: pillars; }
}

/* Image fade-in (logos, banner) — only when JS can reveal them again. */
.js img[data-fade] { opacity: 0; transition: opacity 0.6s var(--ease); }
.js img[data-fade].is-loaded { opacity: 1; }

/* ---------- Divider ---------- */
.divider {
  position: relative;
  max-width: calc(var(--container) - 2 * var(--gutter));
  height: 1px;
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--c-steel) 20%, var(--c-orange) 50%, var(--c-steel) 80%, transparent);
  opacity: 0.8;
}
.divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-orange);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- Product ---------- */
.product__head { max-width: 780px; margin-bottom: clamp(32px, 5vw, 52px); }
.product__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.product__title { max-width: none; font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem); letter-spacing: -0.035em; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--c-line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--c-text-2);
  font: 500 0.78rem/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[lang="ar"] .status-pill { letter-spacing: 0; font-size: 0.85rem; }
.product__tagline {
  margin: 18px 0 0;
  font: 500 clamp(1.15rem, 1rem + 0.6vw, 1.45rem)/1.4 var(--f-display);
}
.product__lead { max-width: 44rem; margin: 14px 0 0; color: var(--c-muted); font-size: 1.05rem; }

/* ---------- Gallery: bento board ----------
   One featured tile (slot 0) plus five smaller ones, placed by data-slot. main.js moves a
   tile into slot 0 and plays the move back with a transform (FLIP). */
.gallery {
  position: relative;
  isolation: isolate;
  margin-bottom: clamp(56px, 8vw, 96px);
}
.gallery::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 14% auto;
  height: 60%;
  background: radial-gradient(closest-side, rgba(255, 107, 26, 0.16), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.gallery__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-height: 44px;
  padding: 6px 12px 6px 14px;
  border: 1px solid var(--c-line);
  background: linear-gradient(#141518, #0f1012);
  color: var(--c-dim);
  font: 500 0.75rem/1 var(--f-code);
}
.gallery__dots { display: flex; gap: 6px; }
.gallery__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-steel); }
.gallery__dots i:last-child { background: var(--c-orange); }
.gallery__path { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gallery__path b { margin-inline: 2px; color: var(--c-orange); font-weight: 500; }
.gallery__count { color: var(--c-text-2); }

.iface { display: inline-flex; align-items: center; gap: 8px; }
.iface__label {
  color: var(--c-dim);
  font: 500 0.72rem/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[lang="ar"] .iface__label { font-size: 0.8rem; letter-spacing: 0; }

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
  margin-top: clamp(10px, 1.2vw, 14px);
}
.gallery__noscript { width: 100%; margin-top: 14px; }

.tile {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: pan-y;
  container-type: inline-size;
}
/* Slot map — phones & tablets: featured full width, then 2 + 3 */
.tile[data-slot="0"] { grid-column: 1 / -1; grid-row: 1; }
.tile[data-slot="1"] { grid-column: 1 / 4; grid-row: 2; }
.tile[data-slot="2"] { grid-column: 4 / 7; grid-row: 2; }
.tile[data-slot="3"] { grid-column: 1 / 3; grid-row: 3; }
.tile[data-slot="4"] { grid-column: 3 / 5; grid-row: 3; }
.tile[data-slot="5"] { grid-column: 5 / 7; grid-row: 3; }
/* Desktop: featured spans 2×2, two tiles stacked beside it, three underneath */
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile[data-slot="0"] { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
  .tile[data-slot="1"] { grid-column: 3; grid-row: 1; }
  .tile[data-slot="2"] { grid-column: 3; grid-row: 2; }
  .tile[data-slot="3"] { grid-column: 1; grid-row: 3; }
  .tile[data-slot="4"] { grid-column: 2; grid-row: 3; }
  .tile[data-slot="5"] { grid-column: 3; grid-row: 3; }
}

/* Featured glow — sits behind the tile, fades in. */
.tile::before {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 107, 26, 0.3), rgba(255, 107, 26, 0));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.tile.is-featured::before { opacity: 1; }

.tile__frame {
  --cut: 12px;
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--circuit), radial-gradient(ellipse at center, #16171b, #0a0b0d 80%);
  transition: transform 0.35s var(--ease-out);
}
.tile.is-featured .tile__frame { --cut: 18px; }
.tile__frame::before,
.tile__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.tile__frame::after { box-shadow: inset 0 0 0 1px var(--c-line-2); }
.tile__frame::before {
  box-shadow: inset 0 0 0 1px rgba(255, 107, 26, 0.75), inset 0 0 44px rgba(255, 107, 26, 0.08);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.tile.is-featured .tile__frame::before { opacity: 1; }
.tile:not(.is-featured):hover .tile__frame { transform: scale(1.02); }
.tile:not(.is-featured):hover .tile__frame::before { opacity: 0.55; }
.tile:active .tile__frame { transform: scale(0.985); transition-duration: 0.1s; }
.tile:focus-visible { outline-offset: 4px; }

.tile__media { position: absolute; inset: 0; display: block; overflow: hidden; }
/* Skeleton shimmer until the shown screenshot has decoded */
.tile__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.06) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.4s linear infinite;
  transition: opacity 0.3s;
}
.tile.is-ready .tile__media::before { opacity: 0; animation: none; }

.tile__img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms); /* interface switch ripples across the board */
}
.tile__img.is-shown.is-loaded { z-index: 3; opacity: 1; }
.tile__img.is-under { z-index: 2; opacity: 1; transition: none; }

.tile__ph {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 12px;
  background: var(--circuit), radial-gradient(ellipse at center, #16171b, #0b0c0e 75%);
  color: var(--c-dim);
  font: 500 0.8rem/1.4 var(--f-mono);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tile.is-placeholder .tile__ph { opacity: 1; }
/* The faint logo is only generated (and downloaded) for tiles that actually show a placeholder. */
.tile.is-placeholder .tile__ph::before {
  content: "";
  width: 44px;
  height: 44px;
  background: url("../logos/web/mark-96.webp") center / contain no-repeat;
  opacity: 0.35;
}

.tile__badge {
  position: absolute;
  z-index: 7;
  top: 8px;
  inset-inline-end: 20px;
  min-width: 24px;
  padding: 4px 6px;
  border: 1px solid var(--c-line-2);
  background: rgba(8, 9, 11, 0.82);
  color: var(--c-text-2);
  font: 700 0.66rem/1 var(--f-code);
  text-align: center;
  transition: opacity 0.2s;
}
.tile__badge:empty { display: none; }
.tile.is-fallback .tile__badge { border-color: var(--c-orange-line); color: var(--c-orange); }
.tile.is-featured .tile__badge { top: 12px; inset-inline-end: 26px; }

.tile__label {
  position: absolute;
  z-index: 7;
  bottom: 8px;
  inset-inline-start: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 16px);
  padding: 5px 9px;
  background: rgba(8, 9, 11, 0.85);
  color: var(--c-text);
  font: 500 0.8rem/1.2 var(--f-body);
  transition: opacity 0.25s;
}
.tile__n { color: var(--c-orange); font: 600 0.7rem/1 var(--f-code); }
.tile__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile.is-featured .tile__label { opacity: 0; }
.tile.is-moving :is(.tile__label, .tile__badge) { opacity: 0; transition: none; }

/* Small tiles on phones: keep the number, drop words that won't fit */
@container (max-width: 190px) {
  .tile__title,
  .tile__ph-text { display: none; }
  .tile__label { padding: 4px 6px; }
  .tile__badge { top: 5px; inset-inline-end: 14px; }
}

.gallery__bar { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.gallery__caption { flex: 1; min-width: 0; min-height: 3.4em; text-align: center; }
.gallery__caption-title { margin: 0; font: 600 1.05rem/1.3 var(--f-display); }
.gallery__caption-text { margin: 3px 0 0; color: var(--c-muted); font-size: 0.92rem; line-height: 1.45; }

@media (max-width: 479.98px) {
  .gallery__dots { display: none; }
  .gallery__toolbar { padding-inline: 10px; }
  .iface__label { display: none; }
}
/* Narrow phones: keep the screen name, drop the app prefix, rather than ellipsizing. */
@media (max-width: 419.98px) {
  .gallery__path-root { display: none; }
}

/* Features */
.features {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature { padding: 28px 24px 30px; }
.feature__n {
  position: absolute;
  top: 20px;
  inset-inline-end: 28px;
  color: var(--c-dim);
  font: 500 0.72rem/1 var(--f-code);
  letter-spacing: 0.08em;
}
.feature__title { margin: 0 0 10px; font: 600 1.2rem/1.3 var(--f-display); }
.feature p { margin: 0; color: var(--c-muted); font-size: 0.95rem; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
  padding: 20px 0;
  border-block: 1px dashed var(--c-line-2);
}
.extras__label {
  margin: 0;
  color: var(--c-dim);
  font: 500 0.78rem/1.3 var(--f-mono);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.extras__list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.extras__list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 0.88rem;
}
.extras__list .icon { width: 1em; height: 1em; color: var(--c-orange); stroke-width: 2.5; }

/* Pricing */
.pricing {
  --cut: 26px;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 32px;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(24px, 4vw, 52px);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255, 107, 26, 0.13), transparent 55%),
    linear-gradient(180deg, #17181c, #111215);
}
[dir="rtl"] .pricing {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 107, 26, 0.13), transparent 55%),
    linear-gradient(180deg, #17181c, #111215);
}
.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--circuit);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 50%, #000, transparent 75%);
}
.pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  pointer-events: none;
}
.pricing .eyebrow { margin-bottom: 14px; }
.pricing__title {
  margin: 0;
  font: 700 clamp(1.7rem, 1.2rem + 2vw, 2.5rem)/1.15 var(--f-display);
  letter-spacing: var(--track-tight);
}
.pricing__text { max-width: 32rem; margin: 14px 0 0; color: var(--c-muted); }
.pricing__list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.pricing__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--c-text-2); }
.pricing__list .icon { margin-top: 0.22em; color: var(--c-orange); stroke-width: 2.4; }

.price-card {
  --cut: 16px;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 28px 24px;
  background: linear-gradient(180deg, #121316, #0d0e10);
}
.price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 26, 0.4);
  pointer-events: none;
}
.price-card .btn--ghost { --fill: rgba(13, 14, 16, 0.94); }
.price-card__top { display: flex; align-items: center; gap: 12px; }
.price-card__was s {
  color: var(--c-dim);
  font: 500 1.15rem/1 var(--f-display);
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--c-orange);
  text-decoration-thickness: 2px;
}
/* Discount tag: notched price-tag shape, tabular figures, a periodic shine. */
.price-card__badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px 6px 16px;
  background: var(--grad-orange);
  color: #141414;
  font: 700 0.9rem/1 "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
  animation: tag-pop 4.8s var(--ease) infinite 1.4s;
}
[dir="rtl"] .price-card__badge {
  padding: 6px 16px 6px 10px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
[dir="rtl"] .price-card__badge::before { left: auto; right: 7px; }
.price-card__badge::before {        /* the tag's punched hole — physical sides: the badge is dir="ltr" */
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(13, 14, 16, 0.55);
}
.price-card__badge::after {         /* shine sweep */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: shine 4.8s var(--ease) infinite 1.4s;
}
.price-card__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.price-card__amount {
  color: var(--c-text);
  font: 700 clamp(3rem, 2.2rem + 3.4vw, 4.4rem)/1 var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
.price-card__currency { color: var(--c-orange); font: 600 1.35rem/1 var(--f-display); }
.price-card__note { margin: 0 0 10px; color: var(--c-muted); font-size: 0.92rem; }

@media (min-width: 640px) {
  .pricing__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Small phones: give the price card's CTAs the width they need to stay on one line */
@media (max-width: 479.98px) {
  .pricing { padding: 22px 16px; }
  .price-card { padding: 24px 18px; }
  .price-card .btn { padding-inline: 1em; }
}
@media (min-width: 900px) {
  .pricing { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 56px; }
  .price-card { padding: 34px 32px; }
}

/* ---------- What's next ---------- */
.next {
  position: relative;
  isolation: isolate;
  margin-block: clamp(8px, 2vw, 24px);
  padding-block: clamp(84px, 10vw, 128px);
  background: linear-gradient(180deg, #131417, #17191c);
  clip-path: polygon(0 32px, 100% 0, 100% calc(100% - 32px), 0 100%);
}
[dir="rtl"] .next { clip-path: polygon(0 0, 100% 32px, 100% 100%, 0 calc(100% - 32px)); }
.next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--circuit);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
}
.next .btn--ghost { --fill: rgba(21, 22, 26, 0.94); }
.next__inner { display: grid; gap: 36px; }
.next__title {
  max-width: 22ch;
  margin: 0;
  font: 700 clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem)/1.15 var(--f-display);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
[lang="ar"] .next__title { line-height: 1.4; }
.next__text { max-width: 36rem; margin: 16px 0 0; color: var(--c-muted); }
.next__progress {
  position: relative;
  max-width: 360px;
  height: 2px;
  margin-top: 28px;
  overflow: hidden;
  background: var(--c-line-2);
}
.next__progress span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 40%;
  background: var(--grad-brand);
  animation: scan 2.6s var(--ease) infinite;
}
[dir="rtl"] .next__progress span { animation-name: scan-rtl; }

.next__chips { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.next__chips li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-line-2);
  background: rgba(13, 14, 16, 0.6);
}
.next__chips .icon { color: var(--c-text-2); }
.next__chip-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
  color: var(--c-orange);
  font: 500 0.72rem/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
[lang="ar"] .next__chip-state { font-size: 0.82rem; letter-spacing: 0; }
.next__chip-state::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  animation: blink 1.6s steps(2, jump-none) infinite;
}
.next__chip--open { border-style: dashed !important; color: var(--c-muted); }
.next__side .btn { width: 100%; }

@media (min-width: 900px) {
  .next__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 64px; }
}

/* ---------- Contact ---------- */
.contact__panel {
  --cut: 30px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 8vw, 100px) clamp(20px, 5vw, 64px);
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 107, 26, 0.16), transparent 70%),
    linear-gradient(180deg, #17181c, #0f1012);
  text-align: center;
}
.contact__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  pointer-events: none;
}
.contact__rings {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(760px, 150%);
  height: auto;
  aspect-ratio: 1;
  opacity: 0.4;
  transform: translate(-50%, -50%);
}
.contact__rings polygon { fill: none; stroke: var(--c-steel); stroke-dasharray: 2 6; }
.contact__panel .section-index { justify-content: center; }
.contact__title {
  max-width: 18ch;
  margin: 0 auto;
  font: 700 clamp(2rem, 1.3rem + 3.4vw, 3.6rem)/1.08 var(--f-display);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
[lang="ar"] .contact__title { line-height: 1.35; }
.contact__text { max-width: 36rem; margin: 18px auto 0; color: var(--c-muted); font-size: 1.05rem; }
.contact__actions { display: grid; justify-items: center; gap: 14px; margin-top: 36px; }
.contact__phone {
  margin: 0;
  color: var(--c-text-2);
  font: 500 1rem/1 var(--f-code);
  letter-spacing: 0.05em;
}
.contact__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
  list-style: none;
}
.contact__meta li { display: inline-flex; align-items: center; gap: 8px; }
.contact__meta .icon { color: var(--c-orange); }
.contact__meta a { color: var(--c-text-2); }

@media (max-width: 479.98px) {
  .contact__actions .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 40px calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
}
.site-footer__inner { display: grid; gap: 24px; }
.site-footer__tagline {
  margin: 12px 0 0;
  color: var(--c-dim);
  font: 500 0.8rem/1.4 var(--f-display);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-footer__nav a,
.site-footer__socials a {
  display: inline-block;
  padding-block: 8px;
  color: var(--c-text);
  font-size: 0.92rem;
  text-decoration: none;
  opacity: 0.66;
  transition: opacity 0.2s;
}
.site-footer__nav a:hover,
.site-footer__socials a:hover { opacity: 1; }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  color: var(--c-dim);
  font-size: 0.85rem;
}
.site-footer__loc { margin-inline-start: auto; }

@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer__socials { grid-column: 2; justify-self: end; }
  .site-footer__legal { grid-column: 1 / -1; }
}

/* ---------- Floating WhatsApp button ---------- */
.wa-fab {
  position: fixed;
  z-index: 40;
  bottom: calc(18px + env(safe-area-inset-bottom));
  inset-inline-end: calc(18px + env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-orange);
  color: #141414;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 107, 26, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.wa-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0s;
}
.wa-fab:hover { transform: scale(1.07); }
.wa-fab:active { transform: scale(0.94); transition-duration: 0.08s; }
.wa-fab .icon { width: 27px; height: 27px; }

/* ---------- Hero entrance ----------
   Pure CSS, so it starts with the first paint instead of waiting for main.js — the hero
   copy is the page's Largest Contentful Paint. */
.js [data-intro] {
  animation: intro 0.8s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Keyframes (transform / opacity only) ---------- */
@keyframes intro {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes glow {
  from { opacity: 0.75; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.04); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -12px) rotate(14deg); }
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes scan {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}
@keyframes scan-rtl {
  from { transform: translateX(100%); }
  to { transform: translateX(-260%); }
}
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes shine {
  0%, 62% { transform: translateX(-120%) skewX(-18deg); }
  86%, 100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes tag-pop {
  0%, 62%, 100% { transform: scale(1); }
  72% { transform: scale(1.07); }
  82% { transform: scale(1); }
}

@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;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .price-card__badge::after { display: none; }
}