@import url('../fonts/fonts.css?v=6'); /* versioned: an older copy could still sit in a browser cache */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); color: var(--bone); color-scheme: dark; }
body {
  margin: 0; min-height: 100dvh; background: var(--ink); color: var(--bone);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, ul, figure, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }
[hidden] { display: none !important; } /* components set display (e.g. .btn inline-flex), which would beat the attribute */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ember); color: var(--ink); }

:lang(ar) body { font-family: var(--font-ar); }
:lang(ar) * { letter-spacing: 0 !important; }

.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; }
.skip { position: fixed; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: var(--r-chip); background: var(--ember); color: var(--ink); font-weight: 600; }
.skip:focus { top: 16px; }
.muted { color: var(--steel); }

/* ---------- grain (fixed, never on a scroller) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- type ---------- */
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
:lang(ar) .eyebrow { font-family: var(--font-ar); font-size: 15px; text-transform: none; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.005em; }
.h2--think { font-stretch: 78%; }
.h2__manage { font-stretch: 112%; color: var(--ember); }
.h3-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; font-stretch: 80%; }
:lang(ar) .h2, :lang(ar) .h3-display { font-family: var(--font-ar); font-weight: 900; line-height: 1.2; font-stretch: normal; }
:lang(ar) .h2 { font-size: clamp(2rem, 4vw, 3.75rem); }
.link-accent { display: inline-block; padding-block: 12px; color: var(--ember); font-size: 15px; white-space: nowrap; }
.link-accent:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- text roll (motion-primitives Text Roll, CSS-only) ----------
   The label's own text-shadow is a second copy 2.4em below; the button/link clips it; hover lifts both. */
.roll { --roll: 2.4em; display: inline-block; text-shadow: 0 var(--roll) currentColor; transition: transform 0.55s var(--ease-out); }
:lang(ar) .roll { --roll: 3.4em; } /* Arabic ascenders/dots reach further: at 2.4em the copy peeked into the button edge */
a:hover > .roll, button:hover > .roll, a:focus-visible > .roll { transform: translateY(calc(var(--roll) * -1)); }

/* ---------- buttons ----------
   Primary: ember fill + a light that keeps travelling around its edge (najah-tech star-border, rebuilt as a
   masked conic ring), a sheen sweep and a label roll on hover, magnetic pull on desktop (ui.js, --mx/--my). */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes edge-spin { to { --angle: 360deg; } }
.btn {
  --mx: 0px; --my: 0px; --lift: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px;
  border-radius: var(--r-btn); font-weight: 600; font-size: 15px; letter-spacing: 0.005em; white-space: nowrap;
  transform: translate3d(var(--mx), calc(var(--my) + var(--lift)), 0);
  transition: transform 0.45s var(--ease-ui), box-shadow 0.45s var(--ease-ui), background-color 0.45s var(--ease-ui), border-color 0.45s var(--ease-ui), color 0.45s var(--ease-ui);
}
.btn:hover { --lift: -2px; }
.btn:active { --lift: 1px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn--sm { height: 44px; padding: 0 18px; font-size: 14px; border-radius: var(--r-chip); }

/* travelling edge light (primary always, ghost on hover) */
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--angle), transparent 0 72%, var(--white-90) 86%, transparent 94%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edge-spin 4.5s linear infinite;
}
/* sheen sweep */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, var(--white-35) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.9s var(--ease-out);
}
.btn:hover::after { transform: translateX(130%); }

.btn--primary { background: var(--ember); color: var(--ink); box-shadow: var(--glow-cta); }
.btn--primary:hover { box-shadow: 0 0 0 1px var(--ember), 0 16px 50px var(--ember-50); }
.btn--pulse { animation: cta-pulse 2.4s ease-in-out infinite; } /* najah-tech final CTA pulse */
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--ember-70), 0 10px 30px var(--ember-35); } 50% { box-shadow: 0 0 0 1px var(--ember), 0 14px 50px var(--ember-50); } }

.btn--ghost, .btn--quiet { background: var(--bone-04); border: 1px solid var(--bone-18); color: var(--bone); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--quiet { border-color: var(--bone-10); color: var(--steel); }
.btn--ghost::before, .btn--quiet::before { background: conic-gradient(from var(--angle), transparent 0 70%, var(--ember) 85%, transparent 95%); opacity: 0; transition: opacity 0.4s var(--ease-ui); }
.btn--ghost:hover, .btn--quiet:hover { border-color: var(--ember-40); color: var(--bone); background: var(--graphite-2); }
.btn--ghost:hover::before, .btn--quiet:hover::before { opacity: 1; }

/* icon well: a round inset at the button's end (pill button + circle, same recipe on every button) */
.btn__arrow { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; margin-inline-end: -10px; border-radius: 50%; background: var(--ink); color: var(--ember); transition: transform 0.45s var(--ease-ui), background-color 0.45s var(--ease-ui), color 0.45s var(--ease-ui); }
.btn--icon { gap: 14px; padding-inline-end: 8px; }
.btn--icon .btn__arrow { margin: 0; width: 38px; height: 38px; }
.btn--lg.btn--icon { padding-inline-start: 26px; }
.btn--lg.btn--icon .btn__arrow { width: 40px; height: 40px; }
.btn:hover .btn__arrow { transform: translateX(3px) rotate(-45deg); }
[dir="rtl"] .btn__arrow svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: translateX(-3px) rotate(45deg); }
.btn__arrow--down { background: var(--bone-06); color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone-14); }
.btn:hover .btn__arrow--down, [dir="rtl"] .btn:hover .btn__arrow--down { transform: translateY(2px); background: var(--ember); color: var(--ink); box-shadow: none; }
:lang(ar) .btn { font-weight: 600; letter-spacing: 0; }

/* ---------- headline sheen: the ember word catches a light every few seconds ---------- */
.sheen, .h2__manage, .lockup__line--manage .lockup__big {
  background: linear-gradient(100deg, var(--ember) 42%, var(--ember-hi) 50%, var(--ember) 58%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 22px var(--ember-35));
  animation: sheen 6s var(--ease-ui) infinite;
}
@keyframes sheen { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }

/* ---------- cards + edge light ---------- */
.card { position: relative; border-radius: var(--r-card); background: var(--graphite); border: 1px solid var(--bone-08); }
.card--lit { background: linear-gradient(160deg, var(--graphite-2), var(--graphite)); border-color: var(--ember-40); box-shadow: var(--glow-rest); }

.card--edge { isolation: isolate; }
.card--edge::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--angle), transparent 0 70%, var(--ember) 82%, transparent 92%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s var(--ease-ui);
  animation: edge-spin 5s linear infinite; animation-play-state: paused;
}
.card--edge:hover::before, .card--edge:focus-within::before { opacity: 1; animation-play-state: running; animation-duration: 2.4s; }

/* ---------- nav ---------- */
/* Header: a floating glass capsule (athrpro pill track + najah-tech glowing hairline), his photo as the mark. */
.nav { position: fixed; inset-inline: 0; top: 14px; z-index: 50; padding-inline: var(--gutter); font-size: 14px; pointer-events: none; }
.nav__inner {
  pointer-events: auto; position: relative; max-width: 1240px; height: 62px; margin-inline: auto; padding-inline: 10px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--r-pill); border: 1px solid var(--bone-10);
  background: var(--ink-72); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 12px 40px var(--shadow-deep);
  transition: background-color 0.4s var(--ease-ui), border-color 0.4s var(--ease-ui);
}
.nav.is-scrolled .nav__inner { background: var(--ink-92); border-color: var(--bone-14); }
/* reading progress: a centre-weighted ember hairline along the capsule's lower edge */
.nav__inner::after {
  content: ""; position: absolute; inset-inline: 28px; bottom: -1px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 30%, var(--ember) 70%, transparent);
  box-shadow: 0 0 12px var(--ember-50); transform: scaleX(var(--p, 0)); transform-origin: left center;
}
[dir="rtl"] .nav__inner::after { transform-origin: right center; }

/* photo mark with a slowly turning ember ring */
.avatar { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from var(--angle), var(--ember), var(--ember-12) 40%, var(--ember-hi) 60%, var(--ember)); animation: edge-spin 6s linear infinite;
  box-shadow: 0 0 18px var(--ember-35); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); }
.avatar--lg { width: 84px; height: 84px; padding: 3px; }
.avatar--lg img { border-width: 3px; }

.nav__brand { display: flex; align-items: center; gap: 12px; padding-inline-end: 8px; }
.nav__id { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.nav__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; font-stretch: 92%; }
.nav__role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
:lang(ar) .nav__name, :lang(ar) .nav__role { font-family: var(--font-ar); text-transform: none; letter-spacing: 0; }
:lang(ar) .nav__role { font-size: 12px; }

.nav__links { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--bone-04); border: 1px solid var(--bone-08); color: var(--bone-72); }
.nav__links a { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: var(--r-pill); overflow: hidden; transition: color 0.3s, background-color 0.3s; }
.nav__links a:hover { color: var(--bone); background: var(--bone-06); }
.nav__links a[aria-current="true"] { color: var(--bone); background: var(--ember-12); box-shadow: inset 0 0 0 1px var(--ember-40); }
.nav__links a[aria-current="true"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__cta { border-radius: var(--r-pill); }
/* Preferences capsule: a sun/moon switch and an EN | ع segmented control. In each, an ember knob sits
   under the CURRENT choice and slides to the other on click (logical insets, so RTL mirrors itself). */
.prefs { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--bone-04); border: 1px solid var(--bone-10); }
.prefs__sep { width: 1px; height: 20px; background: var(--bone-14); }
.theme-toggle, .lang { position: relative; isolation: isolate; flex: none; height: 44px; border-radius: var(--r-pill); display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; color: var(--steel); transition: color 0.3s; }
.theme-toggle { width: 76px; }
.lang { width: 84px; }
.prefs__knob {
  position: absolute; z-index: -1; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--bone-18), var(--bone-08)); box-shadow: inset 0 0 0 1px var(--bone-14), 0 2px 10px var(--shadow-deep);
  transition: inset-inline-start 0.5s var(--ease-out), box-shadow 0.3s;
}
.theme-toggle:hover .prefs__knob, .lang:hover .prefs__knob { box-shadow: inset 0 0 0 1px var(--ember-50), 0 0 16px var(--ember-22); }
/* dark (default) = moon side, light = sun side */
.theme-toggle .prefs__knob { inset-inline-start: 50%; }
[data-theme="light"] .theme-toggle .prefs__knob { inset-inline-start: 4px; }
.theme-toggle svg { transition: color 0.3s, transform 0.6s var(--ease-out); }
.theme-toggle__moon { color: var(--ember); }
[data-theme="light"] .theme-toggle__moon { color: var(--steel); }
[data-theme="light"] .theme-toggle__sun { color: var(--ember); transform: rotate(90deg); }
.theme-toggle:hover svg { transform: rotate(-20deg); }
/* EN | ع : the knob sits under the page's current language */
:root[lang="ar"] .lang .prefs__knob { inset-inline-start: 50%; }
.lang__opt { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; transition: color 0.3s; }
.lang__opt--ar { font-family: var(--font-ar); font-size: 15px; font-weight: 700; line-height: 1; }
:root:not([lang="ar"]) .lang__opt--en, :root[lang="ar"] .lang__opt--ar { color: var(--bone); }
.theme-toggle:hover, .lang:hover { color: var(--bone); }
/* a short cross-fade while the theme flips (class set for ~500ms by ui.js) */
html.theme-fading, html.theme-fading * { transition: background-color 0.45s var(--ease-ui), color 0.45s var(--ease-ui), border-color 0.45s var(--ease-ui) !important; }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bone-14); place-items: center; }

@media (max-width: 1100px) { .nav__links a { padding: 0 11px; } .nav__role { display: none; } }
@media (max-width: 1023px) {
  .nav { top: 10px; }
  .nav__inner { height: 58px; padding-inline: 8px; }
  .nav__links {
    position: absolute; inset-inline: 0; top: calc(100% + 10px); flex-direction: column; gap: 4px; padding: 10px;
    border-radius: var(--r-card); background: var(--ink-92); border-color: var(--bone-14);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 50px var(--shadow-deep);
    font-family: var(--font-display); font-size: 24px; font-weight: 800; font-stretch: 82%; color: var(--bone);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-ui), transform 0.35s var(--ease-ui), visibility 0.35s;
  }
  :lang(ar) .nav__links { font-family: var(--font-ar); font-size: 22px; }
  .nav__links a { height: 52px; padding: 0 16px; border-radius: 14px; }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; }
  .nav__menu { display: grid; }
  .nav__cta { display: none; }
}
@media (max-width: 420px) { .nav__id { display: none; } }

/* ---------- back to top + whatsapp float ---------- */
.to-top {
  position: fixed; inset-inline-end: var(--gutter); bottom: 28px; z-index: 40; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: var(--bone);
  background: radial-gradient(closest-side, var(--graphite) 88%, transparent 89%), conic-gradient(var(--ember) calc(var(--p, 0) * 1turn), var(--bone-10) 0);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.4s var(--ease-ui), transform 0.4s var(--ease-ui);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 0 0 30px var(--ember-35); }
.wa-float {
  display: none; position: fixed; inset-inline-end: var(--gutter); bottom: 96px; z-index: 40; width: 56px; height: 56px; border-radius: 50%;
  place-items: center; background: var(--ember); color: var(--ink); box-shadow: var(--glow-cta);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.4s var(--ease-ui), transform 0.4s var(--ease-ui);
}
.wa-float.is-shown { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 767px) { .wa-float { display: grid; } }

/* ---------- social funnel ---------- */
/* His social links as an AIDA funnel: each platform is one stage, narrowing to WhatsApp (the conversion).
   Closed it is a round button whose four bars draw the funnel, with a lead dripping through it. */
.funnel {
  position: fixed; inset-inline-start: var(--gutter); bottom: 28px; z-index: 40;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity 0.4s var(--ease-ui), transform 0.4s var(--ease-ui);
}
.funnel.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.funnel__btn {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--graphite); border: 1px solid var(--bone-14); color: var(--bone); cursor: pointer;
  transition: border-color 0.4s var(--ease-ui), box-shadow 0.4s var(--ease-ui);
}
.funnel__btn:hover, .funnel[data-open] .funnel__btn { border-color: var(--ember-40); box-shadow: 0 0 30px var(--ember-22); }
.funnel__glyph { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.funnel__glyph i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: width 0.4s var(--ease-ui); }
.funnel__glyph i:nth-child(1) { width: 22px; }
.funnel__glyph i:nth-child(2) { width: 16px; }
.funnel__glyph i:nth-child(3) { width: 10px; }
.funnel__glyph i:nth-child(4) { width: 4px; background: var(--ember); box-shadow: 0 0 6px var(--ember); }
.funnel__drip { position: absolute; top: -7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 6px var(--ember); opacity: 0; animation: funnel-drip 3.2s var(--ease-ui) infinite; }
@keyframes funnel-drip {
  0%, 20% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  75% { transform: translateY(26px); opacity: 1; }
  90%, 100% { transform: translateY(30px); opacity: 0; }
}
.funnel[data-open] .funnel__drip { animation-play-state: paused; opacity: 0; }

.funnel__list {
  position: absolute; bottom: calc(100% + 12px); inset-inline-start: 0; width: 276px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; margin: 0; list-style: none;
  visibility: hidden; opacity: 0; transform: translateY(8px); transform-origin: bottom;
  transition: opacity 0.35s var(--ease-ui), transform 0.35s var(--ease-ui), visibility 0s linear 0.35s;
}
.funnel[data-open] .funnel__list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* A soft dim behind the stages so page text doesn't read through the gaps, without boxing the funnel in. */
.funnel__list { isolation: isolate; }
.funnel__list::before { content: ''; position: absolute; inset: -28px -20px; z-index: -1; background: radial-gradient(closest-side, var(--ink-92), var(--ink-00)); pointer-events: none; }
.funnel__row { width: var(--w); opacity: 0; transform: translateY(-10px) scaleX(0.92); transition: opacity 0.4s var(--ease-ui), transform 0.5s var(--ease-ui); }
.funnel__row:nth-child(1) { --w: 100%; --i: 0; }
.funnel__row:nth-child(2) { --w: 91%; --i: 1; }
.funnel__row:nth-child(3) { --w: 82%; --i: 2; }
.funnel__row:nth-child(4) { --w: 73%; --i: 3; }
/* Opening pours top to bottom, like leads moving down the funnel. */
.funnel[data-open] .funnel__row { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms + 40ms); }
.funnel__row a {
  display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--bone-14); background: var(--graphite); color: var(--bone); font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 30px var(--ink-72);
  transition: border-color 0.3s var(--ease-ui), background-color 0.3s var(--ease-ui);
}
.funnel__row a:hover, .funnel__row a:focus-visible { border-color: var(--ember-40); background: var(--graphite-2); }
.funnel__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bone-06); color: var(--steel); transition: color 0.3s; }
.funnel__row a:hover .funnel__icon { color: var(--ember); }
.funnel__stage { margin-inline-start: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
:lang(ar) .funnel__stage { font-family: var(--font-ar); font-size: 12px; letter-spacing: 0; text-transform: none; }
.funnel__row--convert a { background: var(--ember); border-color: var(--ember); color: var(--ink); font-weight: 600; box-shadow: var(--glow-cta); }
.funnel__row--convert a:hover, .funnel__row--convert a:focus-visible { background: var(--ember); border-color: var(--ember); }
.funnel__row--convert .funnel__icon, .funnel__row--convert a:hover .funnel__icon { background: var(--ink); color: var(--ember); }
.funnel__row--convert .funnel__stage { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .funnel__drip { animation: none; }
  .funnel__row, .funnel__list { transition: none; }
}
/* Desktop: both corner buttons shrink to 48px and move into the middle of the empty side margin. */
@media (min-width: 1024px) {
  .to-top { inset-inline-end: var(--float-edge); width: 48px; height: 48px; }
  .funnel { inset-inline-start: var(--float-edge); }
  .funnel__btn { width: 48px; height: 48px; }
}

/* ---------- loader ---------- */
/* Loader: his photo, his name, then "I think business" rolling into "I manage marketing" at 50%,
   and a short meter with the real progress. Everything centred, nothing in the corners. */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ink-deep); --p: 0; overflow: hidden; }
html:not(.js) .loader { display: none; }
/* Bail-out that needs no script: the loader is removed by JS, so if the scripts arrive very late or fail
   to run at all, CSS alone lifts it (visibility is animatable, so it also stops catching clicks).
   On a normal load JS removes it long before this fires. */
.loader { animation: loader-bail 0.5s ease 4.6s forwards; }
@keyframes loader-bail { to { opacity: 0; visibility: hidden; } }
.loader::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--ember-22), transparent 70%);
  opacity: calc(0.25 + var(--p) / 100 * 0.75); transform: scale(calc(0.8 + var(--p) / 100 * 0.4));
}
.loader__center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.loader__name { margin-block-start: 20px; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; font-stretch: 96%; color: var(--bone); }
:lang(ar) .loader__name { font-family: var(--font-ar); font-size: 22px; line-height: 1.4; }
.loader__line { height: 1.6em; margin-block-start: 6px; overflow: hidden; font-size: 14px; line-height: 1.6; color: var(--steel); }
.loader__roll { display: flex; flex-direction: column; transition: transform 0.7s var(--ease-out); }
.loader.is-manage .loader__roll { transform: translateY(-50%); }
.loader__line b { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); }
.loader__meter { display: flex; align-items: center; gap: 12px; width: 200px; margin-block-start: 22px; }
.loader__bar { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--bone-10); overflow: hidden; }
.loader__bar span { position: absolute; inset: 0; background: var(--ember); box-shadow: 0 0 10px var(--ember); transform: scaleX(calc(var(--p) / 100)); transform-origin: left center; }
[dir="rtl"] .loader__bar span { transform-origin: right center; }
.loader__count { font-family: var(--font-mono); font-size: 11px; color: var(--bone); min-width: 4ch; text-align: end; }
.loader__count::after { content: "%"; color: var(--steel); margin-inline-start: 1px; }

/* ---------- reduced motion: everything still ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .loader { display: none; }
}