/* ============================================================
   InCode AI — the agency page (the Site Builder sales page's layout, content changed 2026-10-20)
   Rebuilt from zero on the Sunshine Mobile layout (PLAN-v2-sunshine.md, constitution 1.5.0):
   one font (Rubik), black header and hero, white reading sections, one yellow/black split,
   a grey order band, black footer. Buttons are yellow pills with a white arrow circle.
   ============================================================ */

:root {
  --ink: #0B0B0C;
  --ink-2: #1A1A1B;
  --ink-3: #242426;
  --yellow: #FFC400;
  --yellow-press: #EBB400;
  --white: #FFFFFF;
  --bone: #F2EFE9;
  --charcoal: #2B2B2C;
  --muted: #5C5C5F;
  --line: #E2DFD8;
  --on-dark: #FFFFFF;
  --on-dark-muted: #B9B9BD;

  --font: "Rubik", system-ui, "Segoe UI", Tahoma, sans-serif;
  --gutter: 16px;
  --container: 1300px;
  --radius-card: 14px;

  /* Motion (animate skill, Emil Kowalski): entering/exiting = ease-out, moving on screen = ease-in-out */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font: 400 17px/1.7 var(--font);
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
bdi { unicode-bidi: isolate; }
/* order.js hides the result boxes with the hidden attribute; no display rule may undo that */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.hero :focus-visible, .site-header :focus-visible { outline-color: var(--white); }

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

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container-mid { max-width: calc(980px + 2 * var(--gutter)); }
.container-narrow { max-width: calc(820px + 2 * var(--gutter)); }

section[id], #pay { scroll-margin-top: 12px; }

/* ---------- type ---------- */

.title {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--charcoal);
  letter-spacing: 0;
}
.title-center { text-align: center; }
.lead { font-size: 18px; color: var(--muted); line-height: 1.75; white-space: pre-line; }
.lead-center { text-align: center; margin-top: 10px; }

/* The accent phrase in a two-tone heading. Yellow text on dark backgrounds; on light ones
   yellow cannot be a text colour (constitution: 1.4:1), so it becomes a marker block. */
.accent {
  background: var(--yellow);
  color: var(--ink);
  padding: 0 .18em;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero .accent, .site-footer .accent, .closing .accent { background: none; color: var(--yellow); padding: 0; }
.title-on-yellow .accent { background: var(--ink); color: var(--white); }

/* The yellow label box from the reference's hero ("UNLIMITED data") */
.tag {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.35;
  padding: 4px 14px;
}
.tag-sm { font-size: 15px; font-weight: 500; padding: 2px 10px; }

/* ---------- the pill button ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 250px;
  min-height: 54px;
  padding-block: 6px;
  padding-inline: 24px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.pill:hover { background: var(--yellow-press); }
/* Press: the whole pill gives a little under the finger — feedback that the tap landed */
.pill:active { transform: scale(0.97); }
.pill-dot {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  transition: transform 200ms ease;
}
.pill-dot svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .pill:hover .pill-dot { transform: translateX(-4px); } }
.pill-white { background: var(--white); }
.pill-white:hover { background: #F4F4F4; }
.pill-white .pill-dot { background: var(--yellow); }
.pill-sm { min-width: 0; min-height: 44px; gap: 16px; padding-inline: 18px 5px; font-size: 16px; }
.pill-sm .pill-dot { width: 34px; height: 34px; }
.pill-sm .pill-dot svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .pill:hover .pill-dot { transform: none; } }

/* ---------- header ---------- */

.site-header { background: var(--ink-2); color: var(--on-dark); position: relative; z-index: 40; }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark); }
.header-logo { width: 42px; height: auto; }
.brand-name { font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.brand-accent { color: var(--yellow); margin-inline-start: 4px; }
.header-nav { margin-inline-start: auto; }
.header-nav-list { display: flex; gap: 40px; }
.header-nav-link {
  position: relative;
  display: block;
  padding-block: 12px;
  font-size: 19px;
  font-weight: 500;
  text-decoration: none;
  color: var(--on-dark);
}
.header-nav-link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transition: transform 200ms var(--ease-out);
}
.header-nav-link:hover { color: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .header-nav-link:hover::before { transform: scaleX(1); } }
.header-buy { margin-inline-start: 12px; }

.header-menu { display: none; }

@media (max-width: 1023px) {
  .header-inner { gap: 12px; min-height: 64px; }
  .header-menu {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 0; border-radius: 8px;
    background: transparent;
    cursor: pointer;
  }
  .header-menu-bars { display: grid; gap: 5px; width: 24px; }
  .header-menu-bars i { display: block; height: 2px; background: var(--on-dark); border-radius: 2px; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
  .header-menu[aria-expanded="true"] .header-menu-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header-menu[aria-expanded="true"] .header-menu-bars i:nth-child(2) { opacity: 0; }
  .header-menu[aria-expanded="true"] .header-menu-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .brand-name { font-size: 22px; }
  .header-logo { width: 34px; }
  .header-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--ink-2);
    border-top: 1px solid #2C2C2F;
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), display 200ms allow-discrete;
  }
  .header-nav[data-open="1"] { display: block; opacity: 1; transform: none; }
  @starting-style { .header-nav[data-open="1"] { opacity: 0; transform: translateY(-8px); } }
  .header-nav-list { flex-direction: column; gap: 0; padding: 6px var(--gutter) 14px; }
  .header-nav-link { padding-block: 13px; border-bottom: 1px solid #2C2C2F; }
  .header-nav-link::before { display: none; }
  .header-buy { margin-inline-start: auto; }
}
@media (max-width: 559px) {
  .brand-name { font-size: 20px; }
  .header-buy .pill-dot { display: none; }
  .header-buy { padding-inline: 16px; }
}

/* ---------- 1. hero ---------- */

.hero { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 48px;
  min-height: 600px;
  padding-top: 56px;
}
.hero-copy { padding-bottom: 72px; }
.hero-title {
  margin-top: 18px;
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}
.hero-question { margin-top: 18px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; color: var(--yellow); line-height: 1.5; }
.hero-text { margin-top: 12px; font-size: 18px; color: #DADADC; white-space: pre-line; max-width: 36em; }
.hero-note { margin-top: 12px; font-size: 13px; color: var(--on-dark-muted); }
.hero-cta { margin-top: 26px; }

/* A real gallery site on a laptop built in CSS, standing on the hero's bottom edge */
.hero-device { position: relative; align-self: end; }
.laptop { width: 100%; max-width: 640px; margin-inline: auto; }
.laptop-screen {
  position: relative;
  aspect-ratio: 16 / 10.4;
  border: 12px solid #1E1E20;
  border-bottom-width: 18px;
  border-radius: 16px 16px 0 0;
  background: #1E1E20;
  overflow: hidden;
  box-shadow: 0 0 0 1px #37373B;
}
.laptop-base {
  height: 18px;
  margin-inline: -5%;
  background: #2E2E31;
  border-radius: 0 0 14px 14px;
  position: relative;
}
.laptop-base::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 18%; height: 6px;
  transform: translateX(-50%);
  background: #1B1B1D;
  border-radius: 0 0 8px 8px;
}
.hero-badge {
  position: absolute;
  top: 24px;
  inset-inline-start: -14px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 14px;
}

/* The laptop holds one still picture of our work (Mark, 2026-10-20) */
.laptop-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 3px; }

@media (max-width: 899px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; min-height: 0; text-align: center; }
  .hero-copy { padding-bottom: 0; }
  .hero-text { margin-inline: auto; font-size: 17px; }
  .hero-device { max-width: 520px; width: 100%; margin-inline: auto; }
  .hero-badge { inset-inline-start: 8px; top: 12px; font-size: 13px; }
  .laptop { width: 92%; }
}

/* ---------- 2. question strip ---------- */

.askbar { background: var(--white); border-bottom: 1px solid var(--line); }
.askbar p { padding-block: 14px; text-align: center; font-size: 19px; color: var(--charcoal); }
.askbar-number { color: var(--charcoal); font-weight: 500; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; white-space: nowrap; }
.askbar-number:hover { background: var(--yellow); }

/* ---------- 3. four ring icons ---------- */

.benefits { border-bottom: 1px solid var(--line); }
.benefits-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: calc(1040px + 2 * var(--gutter)); padding-block: 26px 22px; }
.benefit { display: grid; justify-items: center; gap: 12px; text-align: center; font-size: 16px; line-height: 1.45; color: var(--charcoal); }
.benefit-ring {
  width: 104px; height: 104px;
  border: 5px solid var(--yellow);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.benefit-ring svg { width: 46px; height: 46px; fill: none; stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .benefits-list { grid-template-columns: repeat(2, 1fr); max-width: 560px; row-gap: 26px; }
}
@media (max-width: 559px) {
  .benefits-list { grid-template-columns: repeat(2, 1fr); }
  .benefit-ring { width: 84px; height: 84px; border-width: 4px; }
  .benefit-ring svg { width: 38px; height: 38px; }
  .benefit { font-size: 15px; }
}

/* ---------- sections ---------- */

.section { padding-block: 96px; }
@media (max-width: 767px) { .section { padding-block: 64px; } }

/* ---------- carousels (gallery + reviews) ---------- */

.carousel { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-width: 0; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  min-width: 0;
  padding-block: 6px;
  align-items: start;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.carousel-arrow:active:not(:disabled) { transform: scale(0.94); }
.carousel-arrow:hover { background: var(--yellow); border-color: var(--yellow); }
.carousel-arrow:disabled { opacity: .3; cursor: default; background: var(--white); border-color: var(--ink); }
.carousel-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 4. gallery ---------- */

.gallery-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "carousel copy";
  align-items: center;
  gap: 64px;
}
.gallery-copy { grid-area: copy; }
.gallery .carousel { grid-area: carousel; }
.gallery-intro { margin-top: 18px; font-size: 16px; }
.gallery-cta { margin-top: 30px; }
.gallery .carousel-track { grid-auto-columns: calc((100% - 24px) / 2); }

.site-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
}
.device {
  width: 100%;
  aspect-ratio: 1280 / 900;
  padding: 8px;
  border-radius: 16px;
  background: #1E1E20;
  box-shadow: 0 0 0 1px #3A3A3D inset;
  margin-bottom: 12px;
  transition: transform 250ms var(--ease-out);
}
.device-screen { display: block; height: 100%; overflow: hidden; border-radius: 9px; background: #F4F4F4; }
.device-screen img { width: 100%; height: auto; }
.device-screen img + img { margin-top: calc(-4 * 100% / 1280); }
@media (hover: hover) and (pointer: fine) { .site-card:hover .device { transform: translateY(-4px); } }
.site-type { font-size: 19px; font-weight: 500; color: var(--charcoal); line-height: 1.35; }
.site-story { max-width: 26em; font-size: 15px; line-height: 1.6; color: var(--muted); }
.site-open { margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--charcoal); }
.site-card:hover .site-open { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
@media (prefers-reduced-motion: reduce) { .site-card:hover .device { transform: none; } }

@media (max-width: 1023px) {
  .gallery-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 28px; }
  .gallery-copy { display: contents; }
  .gallery-inner .title { order: 1; text-align: center; }
  .gallery-intro { order: 2; margin-top: 0; text-align: center; }
  .gallery .carousel { order: 3; grid-area: auto; }
  .gallery-cta { order: 4; margin: 0 auto; }
}
@media (max-width: 559px) {
  .gallery .carousel-track { grid-auto-columns: 100%; }
  .gallery .device { max-width: 340px; }
}

/* ---------- 4b. services: moving pills + three cards (Fairground, Flow Design) ---------- */

.services { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.services .title { color: var(--white); }
.services .accent { background: none; color: var(--yellow); padding: 0; }
.services .lead { color: var(--on-dark-muted); }

.pills-marquee { margin-top: 44px; display: grid; gap: 14px; direction: ltr; }
.pills-row { display: flex; width: max-content; animation: pills-run 48s linear infinite; }
.pills-row-back { animation-direction: reverse; animation-duration: 56s; }
.pills-group { display: flex; gap: 14px; padding-inline-end: 14px; direction: rtl; }
@keyframes pills-run { to { transform: translateX(-50%); } }
.service-pill {
  flex: none;
  padding: 10px 26px;
  border: 2px solid #3A3A3D;
  border-radius: 999px;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.pills-row-back .service-pill { border-color: var(--yellow); color: var(--yellow); }
@media (hover: hover) and (pointer: fine) {
  .pills-marquee:hover .pills-row { animation-play-state: paused; }
  .service-pill:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .pills-row { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
  .pills-row .pills-group { flex-wrap: wrap; justify-content: center; }
  .pills-row .pills-group + .pills-group, .pills-row-back { display: none; }
}

.service-cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 30px 26px;
  border-radius: var(--radius-card);
  background: var(--ink-2);
  box-shadow: 0 0 0 1px #2C2C2F inset;
  transition: translate 250ms var(--ease-out), box-shadow 250ms ease;
}
.service-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; margin-bottom: 6px; }
.service-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-title { font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--white); }
.service-text { font-size: 16px; line-height: 1.7; color: var(--on-dark-muted); }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { translate: 0 -4px; box-shadow: 0 0 0 2px var(--yellow) inset; }
}
.services-price {
  margin-top: 36px;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  color: var(--white);
}
@media (max-width: 899px) {
  .service-cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; margin-top: 40px; gap: 16px; }
  .pills-marquee { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .service-card:hover { translate: none; } }

/* ---------- 5. yellow / black split ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; }
.split-yellow { background: var(--yellow); color: var(--ink); }
.split-copy {
  max-width: calc(var(--container) / 2);
  margin-inline-start: auto;
  padding-block: 72px;
  padding-inline-start: var(--gutter);
  padding-inline-end: clamp(24px, 5vw, 72px);
}
.title-on-yellow { color: var(--ink); font-size: clamp(30px, 3.6vw, 46px); }
.pains-lead { margin-top: 14px; font-size: 18px; line-height: 1.7; color: #2A2410; }
.pains-list { margin-top: 22px; display: grid; gap: 0; }
.pains-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  padding-block: 16px;
  border-top: 1px solid rgba(11, 11, 12, .2);
}
.pain-mark { grid-row: span 2; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.pain-mark svg { width: 16px; height: 16px; fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; }
.pains-list li:last-child { border-bottom: 1px solid rgba(11, 11, 12, .2); }
.pain-title { font-size: 19px; font-weight: 700; line-height: 1.45; }
.pain-text { margin-top: 4px; font-size: 16px; line-height: 1.65; color: #2A2410; }
.split-bridge { margin-top: 22px; font-size: 17px; font-weight: 500; line-height: 1.7; }
.bridge-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.split .pill { margin-top: 28px; }

.split-media { background: var(--ink); display: grid; place-items: center; padding: 56px clamp(20px, 4vw, 64px); overflow: hidden; }

/* The stacked, self-scrolling site frames Mark picked from the v1 hero */
.stage { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / .92; }
.frame {
  position: absolute;
  background: #1E1E20;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #3A3A3D, 0 24px 48px rgba(0, 0, 0, .45);
}
.frame-bar { display: flex; gap: 6px; align-items: center; height: 26px; padding-inline: 12px; background: #1E1E20; direction: ltr; }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #4A4A4E; }
.frame-bar i:first-child { background: var(--yellow); }
.frame-view { position: relative; overflow: hidden; aspect-ratio: 1280 / 820; background: #F4F4F4; }
.frame-strip { position: absolute; inset-inline: 0; inset-block-start: 0; }
.frame-strip img { width: 100%; height: auto; }
.frame-strip img + img { margin-top: calc(-4 * 100% / 1280); }
.frame-strip.is-moving { animation: frame-scroll 24s ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes frame-scroll {
  0%, 10% { transform: translateY(0); }
  48%, 60% { transform: translateY(var(--travel, 0px)); }
  100% { transform: translateY(0); }
}
.frame-b { top: 4%; inset-inline-start: 0; width: 70%; opacity: .85; }
.frame-a { bottom: 4%; inset-inline-end: 0; width: 74%; z-index: 2; }

@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; }
  .split-copy { max-width: none; margin: 0; padding: 56px var(--gutter); }
  .split-media { padding: 40px var(--gutter); }
  .stage { aspect-ratio: auto; max-width: 480px; }
  .frame-b { display: none; }
  .frame-a { position: relative; inset: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .frame-strip.is-moving { animation: none; } }

/* ---------- 5b. «عندك موقع قديم؟» strip (Flow Design) ---------- */

.renew { background: var(--bone); border-bottom: 1px solid var(--line); }
.renew-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; padding-block: 22px; }
.renew-text { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; color: var(--charcoal); text-align: center; }

/* ---------- 6. how we work: 01 · 02 · 03 (Fairground) ---------- */

.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { display: grid; justify-items: center; align-content: start; text-align: center; gap: 10px; }
.step-num {
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 0;
}
.step-num::after { content: ""; display: block; width: 56px; height: 6px; margin: 14px auto 6px; background: var(--yellow); }
.step-title { font-size: 22px; font-weight: 700; color: var(--charcoal); line-height: 1.45; }
.step-text { font-size: 16px; color: var(--muted); max-width: 26em; line-height: 1.7; }
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 44px; margin-top: 40px; }
}

/* ---------- 7. order band ---------- */

.order { background: var(--bone); padding-block: 88px; }
.order-inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.order-copy { position: sticky; top: 24px; }
.order-title { font-size: clamp(32px, 4.2vw, 56px); outline: none; }
.price { margin-top: 26px; display: grid; gap: 6px; }
.price-from { font-size: 20px; font-weight: 500; color: var(--muted); }
.price-now { font-size: clamp(56px, 6vw, 80px); font-weight: 700; line-height: 1; color: var(--ink); }
.price-now small { font-size: 26px; font-weight: 500; }
.price-note { margin-top: 16px; font-size: 18px; color: var(--charcoal); max-width: 30em; }
.order-sub { margin-top: 30px; font-size: 20px; font-weight: 700; color: var(--charcoal); }
.checklist { margin-top: 12px; display: grid; gap: 10px; }
.checklist li { position: relative; padding-inline-start: 36px; font-size: 17px; line-height: 1.65; }
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  width: 24px; height: 24px;
  border: 3px solid var(--yellow);
  border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.order-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px;
}

@media (max-width: 1023px) {
  .order-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .order-copy { position: static; }
}
@media (max-width: 559px) {
  .order { padding-block: 56px; }
  .order-card { padding: 22px 16px; margin-inline: calc(-1 * var(--gutter) + 8px); }
}

/* ---------- 9. FAQ ---------- */

.faq-list { margin-top: 40px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: start;
  font-size: 19px;
  font-weight: 500;
  color: var(--charcoal);
}
.faq-q::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 200ms var(--ease-out);
}
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a { overflow: hidden; opacity: 0; transition: height 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.faq-item.is-open .faq-a { opacity: 1; }
.faq-a p { padding-bottom: 22px; font-size: 17px; color: var(--muted); max-width: 44em; }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } .faq-q::after { transition: none; } }

/* ---------- 9b. the closing question (Fairground) ---------- */

.closing { background: var(--ink); color: var(--on-dark); }
.closing-inner { display: grid; justify-items: center; gap: 18px; padding-block: 96px; text-align: center; }
.closing-title {
  max-width: 16em;
  font-size: clamp(34px, 5.4vw, 72px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  text-wrap: balance;
}
.closing-text { font-size: 19px; color: var(--on-dark-muted); }
.closing-cta { margin-top: 10px; }
.closing-number { font-size: 22px; font-weight: 500; color: var(--white); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.closing-number:hover { color: var(--yellow); }
.closing :focus-visible { outline-color: var(--white); }
@media (max-width: 767px) { .closing-inner { padding-block: 72px; } }

/* ---------- 10. footer ---------- */

.site-footer { background: var(--ink-2); color: var(--on-dark-muted); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: 56px 48px; }
.footer-brand .brand { color: var(--on-dark); }
.footer-tagline { margin-top: 14px; font-size: 15px; max-width: 22em; }
.footer-title { font-size: 24px; font-weight: 500; color: var(--yellow); margin-bottom: 12px; line-height: 1.3; }
.footer-link { display: block; width: fit-content; padding-block: 4px; font-size: 15px; text-decoration: none; color: var(--on-dark-muted); }
.footer-link::before { content: "‹ "; }
.footer-link:hover { color: var(--white); }
.footer-bottom { background: var(--ink); }
.footer-bottom p { padding-block: 18px; text-align: center; font-size: 14px; color: #8E8E93; }
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; padding-block: 44px 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- WhatsApp ---------- */

.whatsapp {
  position: fixed;
  z-index: 45;
  inset-inline-end: 16px;
  bottom: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform 160ms var(--ease-out);
}
.whatsapp:active { transform: scale(0.94); }
.whatsapp svg { fill: currentColor; }

/* ---------- overlay (gallery viewer) ---------- */

.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 12px; }
.overlay[hidden] { display: none; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); transition: opacity 250ms var(--ease-out); }

.viewer-panel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: auto; /* one picture now (Mark, 2026-10-20), so the panel hugs it */
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
@starting-style {
  .overlay-backdrop { opacity: 0; }
  .viewer-panel { opacity: 0; transform: scale(0.96); }
}
.viewer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--ink-2); color: var(--on-dark); }
.viewer-title { font-size: 18px; font-weight: 500; }
.icon-btn {
  flex: none;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.icon-btn:active { transform: scale(0.94); }
.viewer-scroll { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #F4F4F4; }
/* الموقع بيتقسم حتت: كل حتة بتحجز مكانها قبل ما الصورة توصل (005) */
.viewer-parts { display: flex; flex-direction: column; }
.viewer-part { position: relative; width: 100%; background: #E9E9EB; overflow: hidden; }
/* الحتة بتعيد آخر 4 بكسل من اللي فوقها: بنشيلهم بهامش سالب بالنسبة لعرض الحاوية */
.viewer-part + .viewer-part { margin-top: calc(-4 * 100% / 1280); }
.viewer-part img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 250ms var(--ease-out); }
.viewer-part[data-state="loaded"] img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .viewer-part img { transition: none; } }


/* Reduced motion: fewer and gentler, not zero. Fades stay (they explain a change);
   anything that moves, grows or presses is dropped. */
@media (prefers-reduced-motion: reduce) {
  .pill:active, .carousel-arrow:active:not(:disabled), .whatsapp:active, .icon-btn:active { transform: none; }
  .header-nav, .header-nav[data-open="1"] { transform: none; }
  .header-menu-bars i { transition: none; }
  .viewer-panel { transition: opacity 250ms var(--ease-out); }
  @starting-style { .viewer-panel { transform: none; } }
}

/* ---------- 11. motion on scroll (constitution 1.7.0, animate skill) ----------
   app.js tags elements with data-reveal="<kind>" and adds .is-in once, when they scroll into
   view; things arriving together cascade 70ms apart (--d). The keyframes hold only the start
   state and fill backwards, so after an entrance the element's own transform and opacity
   (button press, card hover, the frames' dimming) are back in charge. html.motion is only set
   when motion is allowed, so with reduced motion nothing is ever hidden. */

.motion [data-reveal]:not(.is-in) { opacity: 0; }
.motion [data-reveal="rise"]:not(.is-in) { transform: translateY(24px); }
.motion [data-reveal="rise-sm"]:not(.is-in) { transform: translateY(12px); }
.motion [data-reveal="slide"]:not(.is-in) { transform: translateX(-40px); }
.motion [data-reveal="pop"]:not(.is-in) { transform: scale(0.9); }
.motion [data-reveal="wipe"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); }

.motion [data-reveal].is-in {
  animation-duration: 700ms;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: backwards;
  animation-delay: var(--d, 0ms);
}
.motion [data-reveal="rise"].is-in { animation-name: in-rise; }
.motion [data-reveal="rise-sm"].is-in { animation-name: in-rise-sm; animation-duration: 500ms; }
.motion [data-reveal="slide"].is-in { animation-name: in-slide; }
.motion [data-reveal="pop"].is-in { animation-name: in-pop; animation-duration: 500ms; }
/* the skill's scroll-reveal recipe: a clip wipe on the strong ease-in-out */
.motion [data-reveal="wipe"].is-in { animation-name: in-wipe; animation-duration: 600ms; animation-timing-function: var(--ease-in-out); }
.motion [data-reveal="fade"].is-in { animation-name: in-fade; animation-duration: 900ms; }

@keyframes in-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes in-rise-sm { from { opacity: 0; transform: translateY(12px); } }
@keyframes in-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes in-pop { from { opacity: 0; transform: scale(0.9); } }
@keyframes in-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes in-fade { from { opacity: 0; } }

/* The signature: once a heading has risen, its yellow marker is drawn behind the key words,
   right to left — the way the line is read, the way a highlighter is pulled. */
.motion [data-reveal] .accent { position: relative; z-index: 0; background: none; }
.motion [data-reveal] .accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 700ms var(--ease-in-out) calc(var(--d, 0ms) + 350ms);
}
.motion [data-reveal].is-in .accent::before { transform: scaleX(1); }
/* On the black sections the key words are simply yellow, as in the hero: a yellow marker
   under yellow text would hide them. */
.motion .services [data-reveal] .accent::before,
.motion .closing [data-reveal] .accent::before { content: none; }
/* On the yellow half the marker is black and the words turn white as it passes */
.motion .title-on-yellow[data-reveal] .accent { color: var(--ink); transition: color 250ms ease calc(var(--d, 0ms) + 700ms); }
.motion .title-on-yellow[data-reveal] .accent::before { background: var(--ink); }
.motion .title-on-yellow[data-reveal].is-in .accent { color: var(--white); }

/* Hero: a load sequence, the first thing anyone sees. The label opens right to left, the lines
   follow 70ms apart, and the laptop rises last. */
.motion .hero-copy > * { animation: in-rise 700ms var(--ease-out) backwards; }
.motion .hero-copy > .tag { animation: in-open 600ms var(--ease-in-out) backwards; }
.motion .hero-copy > :nth-child(2) { animation-delay: 70ms; }
.motion .hero-copy > :nth-child(3) { animation-delay: 140ms; }
.motion .hero-copy > :nth-child(4) { animation-delay: 210ms; }
.motion .hero-copy > :nth-child(5) { animation-delay: 280ms; }
.motion .hero-copy > :nth-child(6) { animation-delay: 350ms; }
.motion .hero-device { animation: in-rise-lg 900ms var(--ease-out) 250ms backwards; }
@keyframes in-open { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes in-rise-lg { from { opacity: 0; transform: translateY(40px) scale(0.97); } }

/* Depth while scrolling, where the browser can tie motion to the scroll itself (off the main
   thread, no JS). The three site frames drift at different speeds — the far one most — and the
   hero laptop lags a little as the hero leaves. `translate` is its own property, so it never
   fights the entrances above. Browsers without scroll timelines just skip it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frame {
      animation-name: drift;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover;
    }
    .frame-b { --drift: 36px; }
    .frame-a { --drift: 14px; }
    .laptop {
      animation-name: lag;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: exit;
    }
  }
}
@keyframes drift { from { translate: 0 var(--drift, 0px); } to { translate: 0 calc(var(--drift, 0px) * -1); } }
@keyframes lag { to { translate: 0 72px; } }

/* ---------- 12. hover (Mark 2026-09-24: "something happens when the mouse comes over a thing") ----------
   Real mouse only — on touch a tap would leave the hover stuck. Hovered tens of times a visit, so
   each is small and quick (ease, 200ms). They use the separate `scale` / `translate` properties
   so they never fight the entrances' `transform` or the frames' scroll drift. */
.benefit-ring { transition: background-color 200ms ease, scale 200ms ease; }
.benefit-ring svg { transition: stroke 200ms ease; }
.pains-list li { transition: translate 200ms ease; }
.faq-q { transition: color 200ms ease; }
.faq-q::after { transition: transform 200ms var(--ease-out), scale 200ms ease, background-color 200ms ease; }
.frame { transition: opacity 250ms ease, scale 250ms var(--ease-out); }
.footer-link { transition: color 200ms ease, translate 200ms ease; }
.whatsapp { transition: transform 160ms var(--ease-out), scale 200ms ease; }

@media (hover: hover) and (pointer: fine) {
  /* the ring fills in and the icon turns black on it */
  .benefit:hover .benefit-ring { background: var(--yellow); scale: 1.05; }
  .benefit:hover .benefit-ring svg { stroke: var(--ink); }
  /* a problem leans forward, the way the line reads */
  .pains-list li:hover { translate: -6px 0; }
  /* a question darkens and its + button swells */
  .faq-q:hover { color: var(--ink); }
  .faq-q:hover::after { scale: 1.1; background-color: var(--yellow-press); }
  /* the frame under the mouse comes to the front of the stack */
  .stage .frame:hover { opacity: 1; scale: 1.03; z-index: 3; }
  .footer-link:hover { translate: -4px 0; }
  .whatsapp:hover { scale: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
  /* colours stay, movement goes */
  .benefit:hover .benefit-ring, .pains-list li:hover,
  .faq-q:hover::after, .stage .frame:hover, .footer-link:hover, .whatsapp:hover { scale: none; translate: none; }
  .faq-q::after { transition: background-color 200ms ease; } /* the + turns at once, as before */
}

@media print {
  .motion [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .motion [data-reveal] .accent::before { transform: none !important; }
}

/* ---------- the two small pages: /privacy and 404 (page.js) ---------- */

.simple-page { padding-block: 72px 96px; min-height: 60vh; }
.simple-title { font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.3; color: var(--charcoal); }
.privacy-updated { margin-top: 8px; font-size: 15px; color: var(--muted); }
.privacy-block { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.privacy-heading { font-size: 22px; font-weight: 700; color: var(--charcoal); line-height: 1.4; }
.privacy-text { margin-top: 10px; font-size: 17px; color: var(--charcoal); }
.privacy-list { margin-top: 10px; display: grid; gap: 8px; }
.privacy-list li { position: relative; padding-inline-start: 22px; font-size: 17px; color: var(--charcoal); }
.privacy-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 9px; height: 9px; background: var(--yellow); }
.not-found { text-align: center; }
.not-found-glyph { width: 140px; height: auto; margin: 0 auto 28px; }
.not-found .pill { margin-top: 32px; }