/* ==========================================================================
   Components (geometry from Figma; sizes from the type scale in tokens.css)
   Horizontal geometry is flow-relative (inline-start = right in Arabic, left in English), so the
   English page mirrors the Arabic layout. Artwork that must not flip keeps physical offsets.
   ========================================================================== */

/* ---------- Badge (pill + lime dot): one size everywhere, the pill fits its label ---------- */
.badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  padding-block: 9px;
  padding-inline: 24px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-white-10);
  transition: background-color var(--dur-button) var(--ease-out-cubic), transform var(--dur-button) var(--ease-out-cubic),
    box-shadow var(--dur-button) var(--ease-out-cubic);
}
.badge__text {
  font: 700 var(--fs-badge) / 1.5 var(--font-kufi);
  white-space: nowrap;
}
.badge__dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-lime);
  transition: box-shadow var(--dur-button) var(--ease-out-cubic), transform var(--dur-button) var(--ease-out-cubic);
}
/* State: mouse hover (.is-hover — scripts/interactions.js) or press: the pill lifts and the dot glows */
.badge:is(.is-hover, :active) {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 28px -8px rgba(217, 255, 76, 0.35);
  transform: translateY(-5px);
}
.badge:is(.is-hover, :active) .badge__dot {
  box-shadow: 0 0 0 6px rgba(217, 255, 76, 0.25), 0 0 20px 4px rgba(217, 255, 76, 0.65);
  transform: scale(1.2);
}
.badge:active { transform: translateY(-1px) scale(0.96); transition-duration: 0.15s; }

/* ---------- CTA button (Component 248: "Frame 1" → hover "Frame 2", SMART_ANIMATE 0.5s OUT_CUBIC) ----------
   Drawn at the Figma size (63.65px tall) and scaled by --cta-zoom. The label comes first and the knob with
   its arrow sits at the end of the reading direction (right in English, left in Arabic). The width follows
   the label: the space after it (before the knob) matches the space before it. */
.cta {
  --label-x: 28px;   /* button edge → label */
  --label-gap: 32px; /* label → knob */
  position: relative;
  display: flex;
  align-items: center; /* label vertically centred */
  flex: none;
  width: max-content;
  height: 63.65px;
  padding-inline: var(--label-x) calc(var(--label-gap) + 55.18px + 9.84px); /* knob + its 9.84px inset */
  zoom: var(--cta-zoom);
  border-radius: 160px;
  background: var(--color-lime);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
.cta__fill,
.cta__knob {
  position: absolute;
  inset-inline-end: 9.84px;
  top: 3.77px;
  width: 55.18px;
  height: 55.18px;
  border-radius: 50%;
}
.cta__fill {
  background: var(--color-purple);
  transition: transform var(--dur-button) var(--ease-out-cubic);
}
.cta__knob {
  background: var(--color-knob);
  scale: calc(-1 * var(--dir)) 1; /* the arrow inside points forward: ↗ in English, ↖ in Arabic */
  transition: background-color var(--dur-button) var(--ease-out-cubic);
}
.cta__label {
  position: relative; /* above the expanding hover fill so the text never hides */
  z-index: 1;
  font: 700 21.13px / 1.9 var(--font-kufi);
  color: var(--color-ink);
  white-space: nowrap;
  unicode-bidi: plaintext; /* Arabic or English label, same position */
  transition: color var(--dur-button) var(--ease-out-cubic);
}
.cta__arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 26.868px;
  height: 27.088px;
  fill: currentColor;
  color: var(--color-lime);
  transform-origin: 0 0;
  /* Group 9: rotated frame at (28.6, 11.89) inside the knob; the SVG carries 2px of stroke overflow padding */
  transform: matrix(0.674079, 0.738659, -0.738659, 0.674079, 28.6, 11.89) translate(-2px, -2px);
  transition: color var(--dur-button) var(--ease-out-cubic);
}
/* State: mouse hover (.is-hover), keyboard focus, press on touch (:active) — scripts/interactions.js */
.cta:is(.is-hover, :focus-visible, :active) .cta__fill {
  /* the knob's circle moves toward the label and grows until it covers the button (labels up to ~320px) */
  transform: translateX(calc(84.96px * var(--dir))) scale(7.2);
}
.cta:is(.is-hover, :focus-visible, :active) .cta__label { color: var(--color-white); }
.cta:is(.is-hover, :focus-visible, :active) .cta__knob { background-color: var(--color-lime); }
.cta:is(.is-hover, :focus-visible, :active) .cta__arrow { color: var(--color-purple); }
.cta { -webkit-tap-highlight-color: transparent; }

/* ---------- Service card (Components 251–256: "Frame 7" → hover "Frame 8", SMART_ANIMATE 0.8s) ---------- */
.service-card {
  --text-t: 144.3px;
  position: relative;
  height: 238px;
  border-radius: var(--radius-service);
  background: var(--color-purple-10);
  overflow: hidden;
}
.service-card__burst,
.service-card__icon {
  position: absolute;
  inset-inline-end: 423.94px;
  top: 23.7px;
  width: 60.9px;
  height: 60.9px;
  border-radius: 50%;
}
.service-card__burst {
  background: var(--color-lime);
  opacity: 0;
  transition: transform var(--dur-card) var(--ease-out-cubic), opacity var(--dur-card) var(--ease-out-cubic);
}
.service-card__icon {
  background: rgba(62, 38, 220, 0.25);
  transition: background-color var(--dur-card) var(--ease-out-cubic);
}
.service-card__icon img {
  position: absolute;
  left: 4.45px;
  top: 4.45px;
  width: 53.47px;
  height: 53.47px;
  object-fit: cover;
}
.service-card__title {
  position: absolute;
  inset-inline-start: 31px;
  top: 104.9px;
  font: 700 var(--fs-card-title) / 31.63px var(--font-kufi);
  white-space: nowrap;
  transition: color var(--dur-card) var(--ease-out-cubic);
}
.service-card__ghost {
  color: #080725;
  transition: color var(--dur-card) var(--ease-out-cubic);
}
.service-card__text {
  position: absolute;
  inset-inline-start: 31.16px;
  top: var(--text-t);
  width: var(--text-w);
  font: 500 var(--fs-body) / 1.6 var(--font-plex);
  color: var(--color-white);
  opacity: 0.8;
  transition: color var(--dur-card) var(--ease-out-cubic);
}
/* State: mouse hover (.is-hover) or, on touch screens, card at mid-screen (.is-inview) */
.service-card:is(.is-hover, .is-inview) .service-card__burst {
  opacity: 1;
  transform: translate(calc(var(--burst-x) * var(--dir)), var(--burst-y, 0px)) scale(var(--burst-k));
}
.service-card:is(.is-hover, .is-inview) .service-card__icon { background-color: rgba(255, 255, 255, 0.6); }
.service-card:is(.is-hover, .is-inview) .service-card__title,
.service-card:is(.is-hover, .is-inview) .service-card__text { color: var(--ink); }
.service-card:is(.is-hover, .is-inview) .service-card__ghost { color: var(--color-lime); }

/* burst: the icon circle grows into the card; x points toward the card centre (mirrored by --dir) */
.service-card--website  { --text-w: 449px; --ink: #02030f; --burst-x: -202.89px; --burst-k: 10.98522; }
.service-card--app      { --text-w: 357px; --ink: #010310; --text-t: 144px; --burst-x: -195.39px; --burst-k: 11.00164; }
.service-card--store    { --text-w: 449px; --ink: #01020e; --burst-x: -205.39px; --burst-y: -0.05px; --burst-k: 10.96880; }
.service-card--platform { --text-w: 449px; --ink: #00020e; --burst-x: -148.39px; --burst-k: 12.57800; }
.service-card--system   { --text-w: 338px; --ink: #010411; --text-t: 144px; --burst-x: -197.39px; --burst-y: -0.05px; --burst-k: 10.80460; }
.service-card--ai       { --text-w: 449px; --ink: #010411; --burst-x: -197.39px; --burst-y: -0.05px; --burst-k: 11.06732; }

/* ---------- Why card (Component 257: "Frame 5" → hover "Frame 6", SMART_ANIMATE 0.8s) ---------- */
.why-card {
  position: relative;
  height: 198px;
  border-radius: var(--radius-card);
  background: var(--color-purple-10);
  overflow: hidden;
}
.why-card__decor {
  position: absolute;
  inset: 0;
  scale: var(--dir) 1; /* corner art sits in the inline-end corner */
}
.why-card__decor > span {
  position: absolute;
  width: 40px;
  height: 40px;
  transform-origin: 0 0;
  transition: transform var(--dur-card) var(--ease-out-cubic);
}
.why-card__decor > span:first-child { left: 11px; top: 13px; }
.why-card__decor > span:last-child { left: 45px; top: 50px; }
.why-card__decor > span::before,
.why-card__decor > span::after {
  content: "";
  position: absolute;
  background: var(--color-decor);
  transition: background-color var(--dur-card) var(--ease-out-cubic);
}
.why-card__decor > span::before { right: 0; top: 0; width: 48.75%; height: 100%; }
.why-card__decor > span::after { left: 0; bottom: 0; width: 100%; height: 48.75%; }
.why-card:is(.is-hover, .is-inview) .why-card__decor > span:first-child { transform: scale(1.4675); }
.why-card:is(.is-hover, .is-inview) .why-card__decor > span:last-child { transform: translate(15.9px, 17.3px) scale(1.4675); }
.why-card:is(.is-hover, .is-inview) .why-card__decor > span::before,
.why-card:is(.is-hover, .is-inview) .why-card__decor > span::after { background-color: var(--color-lime); }

.why-card__icon {
  position: absolute;
  inset-inline-start: 34px;
  top: 34px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-lime);
}
.why-card__icon img { position: absolute; }
.why-card__icon--question img { left: 8px; top: 8px; }
.why-card__icon--custom img { left: 9px; top: 9px; }
.why-card__icon--picture img { left: 11px; top: 11px; }
.why-card__icon--future img { left: 5px; top: 5px; }
.why-card__title {
  position: absolute;
  inset-inline-start: 34px;
  top: 94px;
  font: 700 var(--fs-card-title) / 30.02px var(--font-kufi);
  white-space: nowrap;
}
.why-card__text {
  position: absolute;
  inset-inline-start: 34px;
  top: 133px;
  font: 500 var(--fs-body) / 30.02px var(--font-plex);
  color: var(--color-white-80);
  white-space: nowrap;
}

/* ---------- Project (image card: Components 274–276, hover shine SMART_ANIMATE 1.5s; info: Frames 7/9/11) ----------
   The screenshot is shown whole, at its own proportions; the info card matches its height. */
.project__media {
  position: relative;
  flex: none;
  width: 1049px;
  aspect-ratio: 2752 / 1536;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.project__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project__shine {
  position: absolute;
  inset: 0;
  scale: var(--dir) 1;
  pointer-events: none;
}
.project__shine > span {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 4px 4px rgba(217, 255, 76, 0.6));
  transition: transform var(--dur-project) var(--ease-out-cubic);
  pointer-events: none;
}
.project__shine > span:first-child { left: -912px; width: 622px; clip-path: polygon(450px 0, 622px 0, 172px 100%, 0 100%); }
.project__shine > span:last-child { left: -712px; width: 672px; clip-path: polygon(450px 0, 672px 0, 232px 100%, 0 100%); }
.project__media:is(.is-hover, .is-inview) .project__shine > span { transform: translateX(2070px); }

.project__info {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center; /* content vertically centred beside the screenshot */
  align-items: flex-start;
  width: 513px;
  padding: 26px 39px 34px;
  border-radius: var(--radius-card);
  background: rgb(var(--color-card-rgb) / var(--card-alpha, 1));
  box-shadow: 0 0 4px 1px rgba(62, 38, 220, 0.5);
  overflow: hidden;
  text-align: start;
}
.project__logo {
  position: relative;
  flex: none;
  width: 79px;
  height: 77px;
  border-radius: 50%;
  background: var(--color-white);
  overflow: hidden;
}
.project__name {
  margin-top: 16px;
  font: 700 var(--fs-card-title) / 1.5 var(--font-kufi);
}
.project__tags {
  margin-top: 2px;
  font: 700 var(--fs-small) / 1.7 var(--font-kufi);
  color: var(--color-lime);
}
.project__summary {
  margin-top: 10px;
  font: 700 var(--fs-body) / 1.7 var(--font-plex);
}
.project__role-title {
  margin-top: 20px;
  font: 700 var(--fs-small) / 1.7 var(--font-kufi);
  color: var(--color-lime);
}
.project__role {
  margin-top: 4px;
  font: 700 var(--fs-body) / 1.7 var(--font-plex);
}
.project__link {
  margin-top: 24px;
  padding: 0 9px 5px;
  border-bottom: 1.1px solid var(--color-lime);
  font: 500 var(--fs-small) / 1.9 var(--font-plex);
  color: var(--color-lime);
  white-space: nowrap;
}

/* ---------- Pillar row ("Behind the product") + hover line (Component 262: 1s SMART_ANIMATE) ---------- */
.pillar {
  position: relative;
  height: 145.86px;
}
.pillar:last-child { height: 144.39px; }
.pillar__check {
  position: absolute;
  inset-inline-start: 14.33px;
  top: 37.43px;
  font: 900 23.54px / 23.54px var(--font-icons);
  color: var(--color-lime);
}
.pillar__title {
  position: absolute;
  inset-inline-start: 57.65px;
  top: 35.31px;
  width: var(--title-w); /* Figma auto-width box; the Latin word starts at its left edge */
  text-align: left;
  font: 700 var(--fs-step) / 28.25px var(--font-cairo);
  letter-spacing: -0.565px;
  white-space: nowrap;
}
.pillar__text {
  position: absolute;
  inset-inline-start: 57.65px;
  top: 81.97px;
  font: 600 var(--fs-body) / 32.96px var(--font-cairo);
  white-space: nowrap;
}
.pillar::after {
  content: "";
  position: absolute;
  inset-inline-end: -11.16px;
  top: var(--line-t);
  width: 728px;
  height: 132px;
  border-bottom: 1.41px solid rgba(255, 255, 255, 0.2);
  transition: border-color var(--dur-row) var(--ease-out-cubic);
}
.pillar:is(.is-hover, .is-inview)::after { border-bottom-color: var(--color-lime); }
.pillar:nth-child(1) { --line-t: 21.11px; --title-w: 186px; }
.pillar:nth-child(2) { --line-t: 15.24px; --title-w: 118px; }
.pillar:nth-child(3) { --line-t: 9.38px; --title-w: 176px; }
.pillar:nth-child(4) { --line-t: 7.52px; --title-w: 175px; }

/* ---------- FAQ item (Component 277 states; ON_CLICK SWAP_STATE SMART_ANIMATE 0.8s) ---------- */
.faq-item {
  position: relative;
  height: var(--h);
  margin-bottom: 30px;
  overflow: hidden;
  transition: height var(--dur-card) var(--ease-out-cubic), margin-bottom var(--dur-card) var(--ease-out-cubic);
}
.faq-item.is-open {
  height: var(--h-open, 188px);
  margin-bottom: var(--mb-open, 10px);
}
.faq-item__question {
  position: absolute;
  inset-inline-end: 24px;
  top: 25px;
  width: 1553px;
  height: 71px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  text-align: start;
  transition: border-color var(--dur-card) var(--ease-out-cubic);
}
.faq-item__q-text {
  position: absolute;
  inset-inline-start: 60px;
  top: 0;
  font: 700 var(--fs-card-title) / 42.5px var(--font-kufi);
  white-space: nowrap;
  transition: color var(--dur-card) var(--ease-out-cubic);
}
.faq-item__chevron {
  position: absolute;
  inset-inline-start: -0.46px;
  top: 12.86px;
  width: 46.458px;
  height: 23.229px;
  color: var(--color-white);
  transition: transform var(--dur-card) var(--ease-out-cubic), color var(--dur-card) var(--ease-out-cubic);
}
.faq-item__chevron svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: currentColor;
  transform-origin: 0 0;
  transform: matrix(0, 1, 1, 0, 0, 0);
}
.faq-item__answer {
  position: absolute;
  inset-inline-start: 12px;
  top: 120px;
  font: 400 var(--fs-body) / 42.5px var(--font-plex);
  white-space: nowrap;
}
.faq-item.is-open .faq-item__question { border-bottom-color: var(--color-lime); }
.faq-item.is-open .faq-item__q-text { color: var(--color-lime); }
.faq-item.is-open .faq-item__chevron { color: var(--color-lime); transform: scaleY(-1); }
.faq-item.is-open .faq-item__answer { font-weight: 600; }

/* ---------- Form field ---------- */
.field input {
  display: block;
  width: 100%;
  height: 58.26px;
  padding-block: 0;
  padding-inline: var(--pad-r) 24px;
  border: 1.02px solid rgba(255, 255, 255, 0.05);
  border-radius: 147.26px;
  background: var(--color-white-10);
  font: 400 var(--fs-body) / 35.4px var(--font-plex);
  color: var(--color-white);
  text-align: start;
  outline: none;
  transition: border-color 0.3s var(--ease-out-cubic);
}
.field input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.field input:focus { border-color: var(--color-lime); }
.field--name input { border-color: var(--color-lime); }

/* ---------- Social link ---------- */
.social__link {
  position: relative;
  display: block;
  width: 46.59px;
  height: 46.59px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.035px var(--color-social-ring);
}
.social__link img { position: absolute; left: 11.39px; top: 11.39px; }
.social__link--x img { left: 11.44px; top: 11.99px; }
.social__link--linkedin img { left: 12px; top: 11px; }