/* ═══════════════════════════════════════════════════════════════════════════
   Growix landing page
   Loaded after nocturne.css: every rule here is the page layer, and where it
   restates a design-system property it is because the design overrode it.
   Values are carried over verbatim from the `Growix Landing.dc.html` prototype
   (claude.ai/design project e1c7eb45) — the prototype held them as inline
   styles; they live here as classes so the page is themeable and responsive.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────── page shell ── */

html {
  /* The prototype set `scroll-behavior: smooth` unconditionally; gated on the
     motion query so it honours the same preference the reveals do. */
  scroll-padding-top: 72px; /* clears the sticky bar when an anchor lands */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;

  --font-heading: 'IBM Plex Sans Arabic', Inter, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', Inter, system-ui, sans-serif;

  /* The text tints the design mixes down from --color-text, named once. */
  --text-88: color-mix(in srgb, var(--color-text) 88%, transparent);
  --text-82: color-mix(in srgb, var(--color-text) 82%, transparent);
  --text-80: color-mix(in srgb, var(--color-text) 80%, transparent);
  --text-78: color-mix(in srgb, var(--color-text) 78%, transparent);
  --text-76: color-mix(in srgb, var(--color-text) 76%, transparent);
  --text-74: color-mix(in srgb, var(--color-text) 74%, transparent);
  --text-62: color-mix(in srgb, var(--color-text) 62%, transparent);
  --text-60: color-mix(in srgb, var(--color-text) 60%, transparent);
  --text-58: color-mix(in srgb, var(--color-text) 58%, transparent);
  --text-52: color-mix(in srgb, var(--color-text) 52%, transparent);

  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text);
  text-wrap: pretty;
  background:
    radial-gradient(1200px 720px at 18% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
    radial-gradient(1100px 800px at 110% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--color-bg);
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-400); }

/* The centred column every section sits in. */
.shell {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

/* Keyboard escape hatch past the sticky bar. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 40;
  transform: translate(-50%, -130%);
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ──────────────────────────────────────────────────────── motion & reveal ── */
/* Scoped to `.js` so the page renders fully when scripting is off or fails —
   without the guard, everything carrying [data-reveal] would sit at opacity 0
   forever. main.js adds the class before first paint. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  [data-lift] {
    transition:
      transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.28s ease,
      border-color 0.28s ease;
  }
  [data-lift]:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

  .gx-flow { animation: gx-flow 2s ease-in-out infinite; }
  .gx-dot { animation: gx-pulse 1.8s ease-in-out infinite; }

  .site-nav a:not(.btn) { position: relative; }
  .site-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -4px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .site-nav a:not(.btn):hover::after { transform: scaleX(1); }
}

@keyframes gx-flow {
  0%, 100% { transform: translateX(0); opacity: 0.35; }
  50% { transform: translateX(-9px); opacity: 1; }
}
@keyframes gx-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ──────────────────────────────────────────────────────────────── the bar ── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-inline: clamp(20px, 5vw, 72px);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(14px);
}

/* .nav-brand ships `margin-right: auto` — right for the LTR system it was
   authored in, but under `direction: rtl` that auto margin falls on the
   inline START side and shoves the whole bar to the far edge, leaving the
   brand adrift in the middle. The header-bar pattern wants the brand at the
   start and the actions at the end, so the margin moves to the inline end.
   Written as a physical reset plus a logical margin, so it holds either way. */
.site-nav .nav-brand {
  margin-right: 0;
  margin-inline-end: auto;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.site-nav a { white-space: nowrap; }
.site-nav .btn { font-family: inherit; }

/* display:contents keeps the links as direct flex children of the bar, so the
   desktop row is laid out exactly as the prototype's flat markup was; the
   wrapper only becomes a real box in the mobile panel below. */
.site-nav__links { display: contents; }
/* height:auto + stretch so the button fills the bar rather than setting its
   height — .btn-icon's 36px would otherwise make the bar 1px taller than the
   brand's line box does. */
.site-nav__toggle {
  display: none;
  height: auto;
  align-self: stretch;
  font-size: 22px;
}
.site-nav__toggle .ph-x { display: none; }
.site-nav__toggle[aria-expanded='true'] .ph-list { display: none; }
.site-nav__toggle[aria-expanded='true'] .ph-x { display: inline; }

/* The prototype has no small-screen bar: six nowrap items overflow the
   viewport below ~860px. The links fold into a panel; brand and the booking
   CTA stay in the bar. */
@media (max-width: 860px) {
  .site-nav__toggle { display: inline-flex; }
  .site-nav__links {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 2px;
    padding: 8px clamp(20px, 5vw, 72px) 18px;
    background: color-mix(in srgb, var(--color-bg) 97%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-sm);
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links a { padding-block: 9px; font-size: 16px; }
}

/* ───────────────────────────────────────────────────────── section eyebrow ── */

.eyebrow {
  --eyebrow-color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.eyebrow--on-band { --eyebrow-color: var(--color-accent-300); }
.eyebrow__dot {
  display: block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--eyebrow-color);
}
.eyebrow__rule {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--eyebrow-color);
}
.eyebrow--with-dot .eyebrow__rule { width: 36px; }
.eyebrow__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--eyebrow-color);
}

/* ──────────────────────────────────────────────────────────────── buttons ── */
/* The design system's .btn sizes for interface rows (14px); the page's
   in-content calls to action step up. */

.btn-lg {
  font-family: inherit;
  padding: 12px 22px;
  font-size: 16px;
}
.btn-wa { gap: 8px; }
.btn-wa .ph { font-size: 18px; }

/* ─────────────────────────────────────────────────────────────── headings ── */

.section-title {
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.3;
  margin: 0;
}
.section-title--md {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.35;
}
.section-title--sm {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.35;
}

/* ─────────────────────────────────────────────────────────────────── hero ── */

.hero { padding-block: clamp(48px, 8vw, 104px) 64px; }
.hero__title {
  font-weight: 500;
  font-size: clamp(34px, 4.9vw, 68px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 20ch;
}
.hero__lead {
  font-size: 18px;
  line-height: 1.8;
  max-width: 62ch;
  margin: 26px 0 0;
  color: var(--text-82);
}
.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero__note {
  font-size: 14px;
  margin: 18px 0 0;
  color: var(--text-58);
}

/* The three promises under the hero copy. */
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
  margin-top: 56px;
}
.promise {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-top: 18px;
  border-top: 1px solid var(--color-neutral-700);
}
.promise .ph {
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-accent);
}
.promise p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-80);
}

/* The channel list the system listens on. */
.channels {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 44px);
  flex-wrap: wrap;
  margin-top: 44px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-52);
}
.channels span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.channels .ph { font-size: 18px; }

/* ──────────────────────────────────────────────────────────── the problem ── */

.problem { padding-block: 64px; }
.problem .section-title { max-width: 24ch; }
.problem__lead {
  font-size: 17px;
  line-height: 1.8;
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--text-78);
}
.problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
  margin-top: 40px;
}
.problem .card { padding: 26px; }
.problem .card-kicker { font-family: inherit; }
.problem .card-title {
  font-family: inherit;
  font-size: 20px;
  line-height: 1.4;
  margin-top: 8px;
}
.problem .card-body {
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.75;
}
.problem__cost {
  font-size: 17px;
  line-height: 1.8;
  max-width: 66ch;
  margin: 32px 0 0;
  color: var(--color-accent-300);
}

/* ─────────────────────────────────────────────────────────────── the loop ── */
/* The one full-bleed band on the page: the design system's saturated
   section ground, used here as presence at page scale. */

.solution {
  padding-block: clamp(56px, 7vw, 92px);
  background:
    radial-gradient(900px 420px at 15% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
    var(--color-section);
}
.solution .section-title { max-width: 26ch; }
.solution__lead {
  font-size: 17px;
  line-height: 1.8;
  max-width: 58ch;
  margin: 20px 0 0;
  color: var(--text-80);
}
.loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  align-items: stretch;
  margin-top: 48px;
}
.loop__step { position: relative; }
.loop__rail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.loop__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--color-accent-300);
  color: var(--color-accent-200);
  font-size: 14px;
}
.loop__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, color-mix(in srgb, var(--color-accent-300) 60%, transparent), transparent);
}
.loop__line--end { background: color-mix(in srgb, var(--color-accent-300) 18%, transparent); }
.loop__arrow {
  font-size: 16px;
  color: color-mix(in srgb, var(--color-accent-300) 70%, transparent);
}
.loop__body { padding-left: 26px; }
.loop__body h3 {
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
  margin: 0;
}
.loop__body p {
  font-size: 15.5px;
  line-height: 1.8;
  margin: 12px 0 0;
  max-width: 34ch;
  color: var(--text-78);
}
.loop__cases {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  max-width: 34ch;
}
.loop__cases li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-74);
}
.loop__cases .ph {
  flex: none;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-accent-300);
}
.solution__note {
  font-size: 16px;
  line-height: 1.85;
  max-width: 70ch;
  margin: 48px 0 0;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--color-accent-300);
  color: var(--text-88);
}

/* ─────────────────────────────────────────────────────────── what you get ── */

.features { padding-block: clamp(56px, 7vw, 88px) 64px; }
.features .section-title { max-width: 24ch; }
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 34px 44px;
  margin-top: 44px;
}
.feature .ph {
  font-size: 24px;
  color: var(--color-accent);
}
.feature h3 {
  font-weight: 500;
  font-size: 19px;
  line-height: 1.45;
  margin: 12px 0 0;
}
.feature p {
  font-size: 15.5px;
  line-height: 1.75;
  margin: 8px 0 0;
  color: var(--text-76);
}

/* The design system's rule, run flush against its neighbours. */
.hr-flush { margin: 0; }

/* ────────────────────────────────────────────────────────── how we start ── */

.process { padding-block: clamp(56px, 7vw, 88px); }
.process__lead {
  font-size: 17px;
  line-height: 1.8;
  max-width: 58ch;
  margin: 20px 0 0;
  color: var(--text-78);
}
.process__steps {
  display: grid;
  margin-top: 40px;
}
.process__step {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(0, 1fr);
  gap: 12px clamp(20px, 4vw, 64px);
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--color-neutral-700);
}
.process__step:last-child { border-bottom: 1px solid var(--color-neutral-700); }
.process__index {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.process__step h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
}
/* The step body only — the index in the first column is a <p> too. */
.process__step > div > p {
  font-size: 15.5px;
  line-height: 1.8;
  margin: 10px 0 0;
  max-width: 56ch;
  color: var(--text-76);
}
.process__cta { margin-top: 32px; }

/* ───────────────────────────────────────────────────────────── who it fits ── */

.industries { padding-block: 40px 64px; }
.industries .section-title { max-width: 30ch; }
.industries__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.industries .tag {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  padding: 9px 16px;
}
.industries .tag .ph {
  font-size: 17px;
  color: var(--color-accent);
}

/* ────────────────────────────────────────────────────────── the comparison ── */

.compare { padding-block: 40px 72px; }
.compare .section-title { max-width: 34ch; }
.compare__scroll {
  margin-top: 30px;
  overflow-x: auto;
}
.compare .table {
  font-family: inherit;
  min-width: 620px;
  text-align: start;
}
.compare .table th {
  text-align: start;
  font-family: inherit;
  font-size: 14px;
}
.compare .table th:last-child { color: var(--color-accent); }
.compare .table td { font-size: 15.5px; }
.compare .table td:nth-child(2) { color: var(--text-62); }

/* ──────────────────────────────────────────────────────────────────── faq ── */

.faq { padding-block: 40px 72px; }
.faq .section-title { margin-bottom: 30px; }
.faq__list {
  display: grid;
  max-width: 860px;
}
.faq details { border-top: 1px solid var(--color-neutral-700); }
.faq details:last-child { border-bottom: 1px solid var(--color-neutral-700); }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  font-size: 17.5px;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
/* The prototype carried this as a `style-hover` hint the design runtime does
   not apply; it is the design system's required hover state, so it is real here. */
.faq summary:hover { color: var(--color-accent-200); }
.faq summary > span { flex: 1; }
.faq-plus {
  flex: none;
  font-size: 17px;
  margin-top: 5px;
  color: var(--color-accent);
  transition: transform 0.18s ease;
}
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq details p {
  font-size: 15.5px;
  line-height: 1.85;
  margin: 0 0 22px;
  max-width: 66ch;
  color: var(--text-76);
}

/* ─────────────────────────────────────────────────────────────────── book ── */

.contact { padding-block: 40px 80px; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.contact__title {
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.3;
  margin: 0;
  max-width: 22ch;
}
.contact__lead {
  font-size: 17px;
  line-height: 1.85;
  margin: 20px 0 0;
  max-width: 48ch;
  color: var(--text-78);
}
.contact__wa { margin-top: 26px; }

.lead-form {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.lead-form .field { font-family: inherit; }
.lead-form .field > span { font-size: 14px; }
.lead-form .input {
  font-family: inherit;
  text-align: start;
}
/* Phone numbers always read left-to-right, but the field should still align
   with the rest of the form — so its alignment follows the page, not its own
   direction (`start` would resolve to left here and break the RTL pages). */
.lead-form .input[type='tel'] {
  direction: ltr;
  text-align: right;
}
.lead-form .seg { font-family: inherit; }
.lead-form .seg-opt { font-family: inherit; }
.lead-form button[type='submit'] {
  font-family: inherit;
  padding: 12px 20px;
  font-size: 16px;
  margin-top: 4px;
}
/* The spam trap: off-canvas rather than display:none, since some bots skip
   fields they can tell are hidden. Never focusable, never announced. */
.lead-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lead-form__status {
  margin: 0;
  font-size: 14.5px;
  color: var(--color-accent-300);
}
/* Not in the prototype — a submit that reaches an endpoint can fail, and the
   visitor has to be told rather than shown a false confirmation. */
.lead-form__status--error { color: var(--color-accent-200); }
.lead-form [hidden] { display: none; }

/* ───────────────────────────────────────────────────────────────── footer ── */

.site-footer {
  padding-block: 48px 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 32px;
  font-size: 14.5px;
  color: var(--text-60);
}
.site-footer__brand {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text);
}
.site-footer__tagline {
  margin: 10px 0 0;
  line-height: 1.7;
  max-width: 34ch;
}
.site-footer__place { margin: 14px 0 0; }
.site-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.site-footer__wa .ph { font-size: 17px; }
.site-footer__links {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* ─────────────────────────────────────────────── the language switcher ── */
/* Two languages in the bar (العربية ⟷ English). The Arabic pages come in two
   variants — Egyptian at / and neutral at /ar/ — but those are routed by
   hreflang, not offered as a user-facing choice: nobody wants to pick a dialect
   from a menu. The footer carries a quiet link between them. */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: 14px;
  color: var(--color-text);
}
.lang-switch:hover { color: var(--color-accent); }
.lang-switch .ph { font-size: 17px; color: var(--color-accent); }
.lang-switch__short { display: none; }

/* Below 560px the bar holds brand + switcher + CTA + menu button, which does
   not fit at 320px with a spelled-out language name. The switcher drops to its
   code and the bar's gap tightens. */
@media (max-width: 560px) {
  .site-nav { gap: var(--space-3); }
  .lang-switch__long { display: none; }
  .lang-switch__short { display: inline; }
}

.site-footer__variant {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
}

/* ─────────────────────────────────────────────── left-to-right pages ── */
/* Everything above is written with logical properties, so the English page
   mirrors for free. These are the few things CSS cannot express logically:
   gradients, keyframe translations, transform origins and the flow glyph. */

[dir='ltr'] .site-nav a:not(.btn)::after { transform-origin: left; }

[dir='ltr'] .loop__line {
  background: linear-gradient(to right, color-mix(in srgb, var(--color-accent-300) 60%, transparent), transparent);
}

/* The rail arrow points the way the eye travels, so it flows the other way. */
@media (prefers-reduced-motion: no-preference) {
  [dir='ltr'] .gx-flow { animation-name: gx-flow-ltr; }
}
@keyframes gx-flow-ltr {
  0%, 100% { transform: translateX(0); opacity: 0.35; }
  50% { transform: translateX(9px); opacity: 1; }
}

/* The tel field keeps its own ltr direction; align it with the page. */
[dir='ltr'] .lead-form .input[type='tel'] { text-align: left; }

/* ──────────────────────────────────────── design-system RTL corrections ── */
/* Nocturne was authored left-to-right; these two rules are the places where a
   physical property in the system lands on the wrong side under `dir="rtl"`.
   Both are written so they still resolve to the upstream side in an LTR
   context, and belong upstream in styles.css eventually. */

/* The in-control separator has to sit BETWEEN the two options, not on the
   control's outer edge where `border-left` puts it in RTL. */
.seg-opt + .seg-opt {
  border-left: 0;
  border-inline-start: 1px solid var(--color-divider);
}