/* AI Orbit — site styles. Deep navy, cyan signal, a particle world behind everything. */
:root {
  --bg: #040a1a;
  --bg-2: #07122e;
  --panel: rgba(12, 26, 60, 0.5);
  --panel-2: rgba(16, 34, 76, 0.66);
  --line: rgba(160, 200, 255, 0.1);
  --line-2: rgba(160, 200, 255, 0.2);
  --text: #f4f7ff;
  --text-2: #b9c5df;
  --text-3: #7d8bad;
  --cyan: #19e3ff;
  --cyan-2: #8cf2ff;
  --cyan-soft: rgba(25, 227, 255, 0.12);
  --rose: #ff8aa1;
  --on-cyan: #021226;
  --radius: 20px;
  --radius-sm: 12px;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Geist", "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.45vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.8vw, 4rem);
  --step-4: clamp(2.8rem, 1.6rem + 5.6vw, 6.6rem);
  --step-5: clamp(3.4rem, 1.4rem + 8.4vw, 9.6rem);
}
:root[lang="he"] { --font: "Heebo", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.6; background: radial-gradient(120% 80% at 50% -10%, #0a1c46 0%, var(--bg) 55%) fixed, var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
/* keep the intrinsic ratio when the width attribute is capped (classes that fill a box set height: 100%) */
img, video { height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
:root[lang="he"] h1, :root[lang="he"] h2, :root[lang="he"] h3 { letter-spacing: -0.015em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: var(--on-cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--cyan); color: var(--on-cyan); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.grad { font-style: normal; background: linear-gradient(100deg, var(--cyan) 10%, #9df4ff 50%, var(--rose) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[lang="en"] .grad { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; padding-inline-end: 0.06em; }

/* ---------- Layers ---------- */
.stage__canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.has-stage .stage__canvas { opacity: 1; }
.stage__glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.stage__glow i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; }
.stage__glow i:nth-child(1) { width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(25, 120, 255, 0.35), transparent 65%); top: -18vw; inset-inline-end: -12vw; }
.stage__glow i:nth-child(2) { width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(25, 227, 255, 0.16), transparent 65%); bottom: -14vw; inset-inline-start: -10vw; }
.stage__glow i:nth-child(3) { width: 30vw; height: 30vw; background: radial-gradient(circle, rgba(255, 138, 161, 0.08), transparent 65%); top: 40vh; inset-inline-start: 30vw; }
.no-webgl .stage__glow i:nth-child(1) { opacity: 0.9; }
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
main, .footer { position: relative; z-index: 1; }

/* orbit labels that follow the satellites in the hero */
.orbit-labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.orbit-label { position: absolute; top: 0; left: 0; opacity: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(6, 16, 40, 0.62); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.82rem; font-weight: 500; white-space: nowrap; will-change: transform, opacity; }
.orbit-label b { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; color: var(--cyan); }
.orbit-label--core { padding: 8px 16px; background: rgba(4, 10, 26, 0.75); border-color: rgba(25, 227, 255, 0.5); box-shadow: 0 0 30px rgba(25, 227, 255, 0.25); font-weight: 600; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 150; display: none; place-items: center; align-content: center; gap: 18px; background: var(--bg); transition: opacity 0.8s var(--ease), visibility 0.8s; }
.js .loader { display: grid; }
.loader__mark { width: 74px; height: 74px; color: var(--text); }
.loader__ring { fill: none; stroke: currentColor; stroke-width: 5.4; stroke-dasharray: 80; stroke-dashoffset: 80; transform-origin: center; transform: rotate(-60deg); animation: draw 1.4s var(--ease) forwards; }
.loader__dot { fill: var(--cyan); transform-origin: 29px 11px; transform: scale(0); animation: pop 0.6s 0.9s var(--ease) forwards; }
.loader__count { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--text-3); text-align: center; }
@keyframes draw { to { stroke-dashoffset: 9; } }
@keyframes pop { to { transform: scale(1); } }
.is-ready .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Header ---------- */
.header { position: fixed; inset-inline: 0; top: 0; z-index: 60; transition: transform 0.5s var(--ease), background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
.header.is-scrolled { background: rgba(4, 10, 26, 0.62); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-color: var(--line); }
.header.is-hidden { transform: translateY(-100%); }
.header__inner { height: var(--header-h); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; font-family: "Geist", var(--font); }
.brand__mark { width: 30px; height: 30px; color: var(--text); }
.brand__dot { fill: var(--cyan); }
.header__nav { display: flex; gap: 26px; margin-inline-start: auto; }
.header__nav a { text-decoration: none; font-size: 0.92rem; color: var(--text-2); transition: color 0.2s; position: relative; }
.header__nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 1px; background: var(--cyan); transform: scaleX(0); transition: transform 0.4s var(--ease); }
.header__nav a:hover { color: var(--text); }
.header__nav a:hover::after, .header__nav a.is-current::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 12px; }
.lang { text-decoration: none; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); }
.lang:hover { color: var(--text); border-color: var(--cyan); }
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; position: relative; cursor: pointer; }
.burger i { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--text); transition: transform 0.4s var(--ease); }
.burger i:first-child { top: 16px; }
.burger i:last-child { bottom: 16px; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(4.4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-4.4px) rotate(-45deg); }
.header__progress { position: absolute; inset-inline: 0; bottom: -1px; height: 1px; }
.header__progress i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), var(--rose)); transform-origin: left; transform: scaleX(var(--p, 0)); }
[dir="rtl"] .header__progress i { transform-origin: right; }

.menu { position: fixed; inset: 0; z-index: 55; background: rgba(4, 10, 26, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: grid; align-content: center; gap: 40px; padding: calc(var(--header-h) + 20px) var(--gutter) 40px; }
.menu[hidden] { display: none; }
.menu__nav { display: grid; gap: 6px; }
.menu__nav a { text-decoration: none; font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 16px; padding-block: 4px; }
.menu__nav small { font-family: var(--mono); font-size: 0.8rem; color: var(--cyan); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.lang--lg { padding: 12px 16px; }

/* ---------- Buttons ---------- */
.btn { --lift: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; overflow: hidden; transition: transform 0.4s var(--ease), background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s; transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift)), 0); }
.btn--primary { background: var(--cyan); color: var(--on-cyan); box-shadow: 0 10px 40px -12px rgba(25, 227, 255, 0.7); }
.btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%); transform: translateX(-130%); transition: transform 0.8s var(--ease); }
.btn--primary:hover { --lift: -2px; box-shadow: 0 16px 50px -12px rgba(25, 227, 255, 0.9); }
.btn--primary:hover::after { transform: translateX(130%); }
.btn--ghost { background: rgba(10, 22, 52, 0.45); border-color: var(--line-2); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--ghost:hover { --lift: -2px; border-color: var(--cyan); }
.btn--sm { padding: 9px 16px; font-size: 0.88rem; }
.btn--lg { padding: 16px 26px; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- Common ---------- */
.section { padding-block: clamp(90px, 14vw, 170px); }
.section-head { display: grid; gap: 18px; max-width: 760px; margin-block-end: clamp(44px, 6vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.section-head--center .kicker::before { display: none; }
.tag { font-size: 0.68rem; padding: 3px 8px; border-radius: 999px; background: var(--cyan-soft); border: 1px solid rgba(25, 227, 255, 0.3); letter-spacing: 0.08em; }
.section-title { font-size: var(--step-3); }
.section-title--xl { font-size: var(--step-4); }
.section-lede { color: var(--text-2); font-size: var(--step-1); line-height: 1.55; max-width: 620px; }
.section-lede a { color: var(--cyan); }
.fineprint { color: var(--text-3); font-size: 0.82rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); }
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.04em 0.14em; margin-block: -0.04em -0.14em; }
.w { display: inline-block; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 40px) 90px; }
.hero__inner { display: grid; gap: 26px; }
.hero__inner > * { max-width: 640px; }
.eyebrow { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(25, 227, 255, 0.3); background: rgba(25, 227, 255, 0.07); font-size: 0.86rem; color: var(--cyan-2); }
.eyebrow--link { text-decoration: none; transition: border-color 0.3s, background 0.3s; }
.eyebrow--link:hover { border-color: var(--cyan); background: rgba(25, 227, 255, 0.14); }
.eyebrow--link .ico { width: 1em; height: 1em; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(25, 227, 255, 0.6); animation: ping 2.2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(25, 227, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 227, 255, 0); } }
.hero__title { font-size: clamp(3rem, 1.4rem + 5.6vw, 7.2rem); font-weight: 700; line-height: 0.96; letter-spacing: -0.045em; max-width: 11ch !important; }
:root[lang="he"] .hero__title { letter-spacing: -0.025em; line-height: 1.02; }
.hero__title .line { display: block; }
.hero__lede { font-size: var(--step-1); color: var(--text-2); max-width: 540px !important; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text-3); font-size: 0.88rem; }
.hero__chips li { display: inline-flex; align-items: center; gap: 8px; }
.hero__chips li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--cyan) 30%, transparent 32%), rgba(25, 227, 255, 0.15); }
.scroll-cue { position: absolute; bottom: 28px; inset-inline-start: 50%; translate: -50% 0; width: 26px; height: 42px; border: 1.5px solid var(--line-2); border-radius: 20px; }
[dir="rtl"] .scroll-cue { translate: 50% 0; }
.scroll-cue span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--cyan); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.js .hero [data-intro], .js .hero .hero__title .line { opacity: 0; }
.is-ready .hero [data-intro], .is-ready .hero .hero__title .line { opacity: 1; }

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; padding-block: clamp(26px, 4vw, 44px); border-block: 1px solid var(--line); background: linear-gradient(90deg, var(--bg), rgba(7, 18, 46, 0.6), var(--bg)); }
.marquee__track { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); width: max-content; animation: marquee 38s linear infinite; will-change: transform; }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
.marquee span { font-size: clamp(2.2rem, 5.4vw, 5.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(200, 230, 255, 0.45); transition: color 0.4s, -webkit-text-stroke-color 0.4s; }
.marquee span:nth-of-type(3n + 1) { color: var(--text); -webkit-text-stroke-color: transparent; }
.marquee i { font-style: normal; color: var(--cyan); font-size: clamp(1rem, 2vw, 1.6rem); }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* ---------- Problems ---------- */
.problems__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.problem { padding: 28px 24px 30px; display: grid; gap: 10px; align-content: start; transition: border-color 0.3s, transform 0.5s var(--ease); }
.problem:hover { border-color: rgba(255, 138, 161, 0.4); transform: translateY(-4px); }
.problem__x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 138, 161, 0.12); color: var(--rose); font-size: 1.1rem; margin-block-end: 8px; }
.problem h3 { font-size: var(--step-1); }
.problem p { color: var(--text-2); font-size: 0.95rem; }

/* ---------- Services (pinned) ---------- */
.services { position: relative; }
.services__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; z-index: 1; }
.services__markers { margin-top: -100vh; margin-top: -100svh; }
.svc-marker { height: 100vh; height: 100svh; }
.services__inner { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr; gap: 26px; padding-block: calc(var(--header-h) + 24px) 48px; }
.services__head { display: grid; gap: 12px; }
.services__head .section-title { font-size: var(--step-2); }
.services__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 18, 44, 0.5); color: var(--text-3); font-size: 0.86rem; cursor: pointer; transition: all 0.3s var(--ease); }
.tab b { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; }
.tab:hover { color: var(--text); border-color: var(--line-2); }
.tab.is-active { color: var(--text); border-color: rgba(25, 227, 255, 0.55); background: rgba(25, 227, 255, 0.1); }
.tab.is-active b { color: var(--cyan); }
.services__stack { position: relative; align-self: center; width: min(520px, 46%); min-height: 420px; }
.svc { position: absolute; inset: 0; display: grid; align-content: center; gap: 16px; opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); pointer-events: none; }
.svc.is-active { opacity: 1; transform: none; pointer-events: auto; }
.svc__index { font-family: var(--mono); font-size: 0.82rem; color: var(--text-3); }
.svc__index b { color: var(--cyan); font-weight: 500; }
.svc__title { font-size: var(--step-3); font-weight: 650; }
.svc__sub { font-size: var(--step-1); color: var(--cyan-2); }
.svc__list { display: grid; gap: 10px; margin-block: 6px 6px; }
.svc__list li { position: relative; padding-inline-start: 28px; color: var(--text-2); }
.svc__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 14px; height: 8px; border-inline-start: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); }
[dir="rtl"] .svc__list li::before { transform: rotate(45deg) scaleX(-1); }
.svc__cta { justify-self: start; display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(25, 227, 255, 0.35); padding-block-end: 3px; }
.svc__cta:hover { border-color: var(--cyan); }
[dir="ltr"] .svc__cta .ico { transform: scaleX(-1); }
.services__meter { position: absolute; inset-inline-start: var(--gutter); bottom: 36px; width: min(520px, 46%); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.services__meter i { position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(var(--p, 0)); }
[dir="rtl"] .services__meter i { transform-origin: right; }

/* ---------- Work: live screen recordings in device frames ---------- */
.work .wrap { max-width: 1440px; }
.work__head { margin-block-end: clamp(12px, 2vw, 24px); }
.case { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr); gap: clamp(32px, 5.5vw, 90px); align-items: center; padding-block: clamp(56px, 7vw, 110px); }
.case + .case { border-top: 1px solid var(--line); }
.case--flip { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); }
.case--flip .case__body { order: 2; }
.case__body { display: grid; gap: 16px; justify-items: start; }
.case__index { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--text-2); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.case__index b { color: var(--cyan); font-weight: 500; }
.case__index span { color: var(--text-3); text-transform: uppercase; }
.case__title { font-family: "Geist", var(--font); font-size: clamp(2.6rem, 1.1rem + 4.2vw, 5.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; text-transform: uppercase; }
.case__desc { color: var(--text-2); font-size: var(--step-1); line-height: 1.55; }
.case__tags { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-3); }
.case__body .btn { margin-block-start: 8px; }
.case__facts { display: grid; gap: 0; margin-block-start: 6px; width: 100%; }
.case__facts li { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 0.95rem; }
.case__facts b { color: var(--text); font-weight: 600; }
.case__stage { position: relative; min-width: 0; }
#case-annie .case__stage { padding-block-end: 9%; padding-inline-end: 7%; }
#case-desktop .case__stage { padding-block-start: 12%; padding-inline-end: 6%; }
.win { position: relative; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #0a1532; box-shadow: 0 50px 140px -50px rgba(25, 227, 255, 0.42), 0 0 0 8px rgba(160, 200, 255, 0.04); }
.win__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding-inline: 14px; background: #0c1938; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; color: var(--text-3); direction: ltr; }
.win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3b63; flex: none; }
.win__bar i:first-child { background: var(--rose); }
.win__bar span { margin-inline: auto; padding: 3px 16px; border-radius: 6px; background: rgba(4, 10, 26, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.win__screen { position: relative; aspect-ratio: var(--ar); background: #050c1f; }
.win__screen video, .win__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win--phone { position: absolute; inset-inline-end: 0; bottom: 0; width: 23%; border-radius: clamp(18px, 2.4vw, 30px); border: clamp(4px, 0.5vw, 7px) solid #0e1a3a; background: #0e1a3a; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line-2); }
.win--phone .win__screen { border-radius: clamp(13px, 1.9vw, 23px); overflow: hidden; }
.win--mini { position: absolute; inset-inline-end: 0; top: 0; width: 36%; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line-2); }
.win--mini .win__bar { height: 24px; padding-inline: 9px; gap: 5px; font-size: 0.6rem; }
.win--mini .win__bar i { width: 7px; height: 7px; }
.win--mini .win__bar span { padding: 1px 10px; }

/* ---------- AI Studio ---------- */
.studio { position: relative; padding-block-end: clamp(90px, 14vw, 170px); }
/* showreel intro: static without JS or with reduced motion; .is-live turns it into the scroll-driven version */
.reel { padding-block-start: clamp(90px, 14vw, 170px); }
.reel__stage { position: relative; display: grid; gap: clamp(18px, 2.4vw, 28px); width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.reel__head { order: -1; display: grid; gap: 12px; justify-items: start; }
.reel__title { font-family: "Geist", var(--font); font-size: clamp(3.6rem, 0.6rem + 12vw, 12.5rem); font-weight: 800; letter-spacing: -0.06em !important; line-height: 0.82; text-transform: uppercase; white-space: nowrap; }
.reel__title span { display: inline-block; }
.reel__title span:last-child { background: linear-gradient(100deg, #fff 20%, var(--cyan-2) 60%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: 0.04em; }
/* three 9:16 clips side by side make a 27:16 frame */
.reel__frame { position: relative; aspect-ratio: 27 / 16; border-radius: var(--radius); overflow: hidden; background: #050c1f; border: 1px solid var(--line); }
.reel__clips { position: absolute; inset: 0; display: flex; direction: ltr; }
.reel__clip { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
.reel__shade, .reel__floats { display: none; }
.reel__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 32px; }
.reel__lede { flex: 1 1 380px; max-width: 54ch; color: var(--text-2); font-size: var(--step-1); line-height: 1.5; }
.reel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.reel__meta { flex-basis: 100%; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-3); }
.reel.is-live { height: 300vh; padding: 0; }
.reel.is-live .reel__stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; max-width: none; padding: 0; overflow: hidden; }
.reel.is-live .reel__frame { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; will-change: transform; }
.reel.is-live .reel__shade { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 10, 26, 0.35) 0%, rgba(4, 10, 26, 0) 30%, rgba(4, 10, 26, 0.3) 52%, rgba(4, 10, 26, 0.94) 100%); opacity: 0; }
.reel.is-live .reel__floats { display: block; position: absolute; inset: 0; pointer-events: none; }
/* centred on (--x vw, --y vh) from the middle; margins instead of translate, which GSAP would clear */
.reel__float { --fs: 1; position: absolute; left: calc(50% + var(--x) * 1vw); top: calc(50% + var(--y) * 1vh); width: calc(var(--w) * var(--fs) * 1vw); margin: calc(var(--w) * var(--fs) * var(--r) * -0.5vw) 0 0 calc(var(--w) * var(--fs) * -0.5vw); border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.8); background: #050c1f; }
.reel__float img { width: 100%; height: auto; }
.reel.is-live .reel__head { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; pointer-events: none; }
.reel.is-live .reel__kicker::before { display: none; }
.reel.is-live .reel__title { text-shadow: 0 10px 60px rgba(4, 10, 26, 0.55); }
.reel.is-live .reel__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter) clamp(24px, 5vh, 56px); }
.reel.is-live .reel__lede { color: var(--text); text-shadow: 0 2px 20px rgba(4, 10, 26, 0.7); }
.reel.is-live .reel__meta { color: var(--text-2); }
/* portrait screens: the middle clip alone, like a story */
@media (max-aspect-ratio: 1/1) {
  .reel__clip--side { display: none; }
  .reel:not(.is-live) .reel__frame { aspect-ratio: 9 / 16; width: min(100%, 340px); justify-self: center; }
  .reel__float { --fs: 1.8; }
}

.studio__wrap { max-width: 1440px; }
.studio__group { margin-block-start: clamp(80px, 10vw, 150px); }
.studio__head { display: grid; gap: 14px; max-width: 760px; margin-block-end: clamp(28px, 3.6vw, 44px); }
.studio__h { font-size: var(--step-3); }
.studio__p { color: var(--text-2); font-size: var(--step-1); line-height: 1.55; max-width: 62ch; }
.studio__credit { color: var(--rose); font-size: 0.88rem; max-width: 70ch; }

/* how it works: three steps */
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.how__step { position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 30px); }
.how__num { position: absolute; top: clamp(18px, 2.2vw, 28px); inset-inline-end: clamp(18px, 2.2vw, 28px); font-family: var(--mono); font-size: 0.78rem; color: var(--text-3); }
.how__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--cyan-soft); border: 1px solid rgba(25, 227, 255, 0.3); color: var(--cyan); margin-block-end: 6px; }
.how__ico .ico { width: 22px; height: 22px; }
.how__step h4 { margin: 0; font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.how__step p { color: var(--text-2); line-height: 1.55; }

/* Higgsfield library: filter tabs + masonry wall */
.lib__tabs { position: sticky; top: calc(var(--header-h) + 10px); z-index: 6; width: max-content; max-width: 100%; margin-block-end: 14px; padding: 5px; border-radius: 999px; background: rgba(8, 18, 44, 0.78); border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8); }
.lib__track { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
.lib__track::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: 0.92rem; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background 0.3s, color 0.3s; }
.chip-btn span { font-family: var(--mono); font-size: 0.68rem; color: var(--text-3); transition: color 0.3s; }
.chip-btn:hover { color: var(--text); background: rgba(160, 200, 255, 0.08); }
.chip-btn[aria-pressed="true"] { background: var(--cyan); color: var(--on-cyan); font-weight: 600; }
.chip-btn[aria-pressed="true"] span { color: rgba(2, 18, 38, 0.62); }
.chip-btn:focus-visible { outline-offset: -2px; border-radius: 999px; }
.lib__desc { min-height: 3.2em; margin-block-end: clamp(20px, 2.6vw, 30px); color: var(--text-2); max-width: 72ch; }
.wall { --g: 14px; columns: 5; column-gap: var(--g); }
.wall.is-masonry { columns: auto; display: flex; gap: var(--g); align-items: flex-start; }
.wall__col { flex: 1 1 0; min-width: 0; display: grid; gap: var(--g); }
.wtile { position: relative; margin: 0 0 var(--g); break-inside: avoid; }
.wall.is-masonry .wtile { margin: 0; }
.wtile[hidden] { display: none; }
.wtile__media { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #050c1f; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color 0.3s, box-shadow 0.4s; }
.wtile__media video, .wtile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wtile__media:hover, .wtile__media:focus-visible { border-color: rgba(25, 227, 255, 0.6); box-shadow: 0 24px 60px -30px rgba(25, 227, 255, 0.55); }
.wtile__media:hover video, .wtile__media:hover img, .wtile__media:focus-visible video, .wtile__media:focus-visible img { transform: scale(1.05); }
.wtile__cap { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; display: grid; gap: 1px; padding: 44px 14px 12px; background: linear-gradient(180deg, rgba(4, 10, 26, 0) 0%, rgba(4, 10, 26, 0.88) 100%); opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.5s var(--ease); pointer-events: none; }
.wtile__cap b { justify-self: start; font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.wtile__cap span { font-size: 0.74rem; color: var(--text-2); }
.wtile__media:hover .wtile__cap, .wtile__media:focus-visible .wtile__cap { opacity: 1; transform: none; }
@media (hover: none) { .wtile__cap { opacity: 1; transform: none; padding: 34px 10px 9px; } }

.studio__cta { margin-block-start: clamp(56px, 7vw, 100px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: clamp(24px, 3.4vw, 40px); }
.studio__cta h3 { font-size: var(--step-2); line-height: 1.15; }
.studio__cta p { color: var(--text-2); max-width: 54ch; }
.studio__visual { margin-block-start: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px clamp(20px, 3vw, 32px); text-decoration: none; border-color: rgba(255, 198, 119, 0.3); transition: border-color 0.3s; }
.studio__visual:hover { border-color: rgba(255, 198, 119, 0.6); }
.studio__visual-k { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: #2a1606; background: #ffc677; }
.studio__visual-t { flex: 1 1 22rem; color: var(--text); }
.studio__visual-go { display: inline-flex; align-items: center; gap: 8px; color: #ffd9a0; font-weight: 600; }
.svc__list a { color: var(--cyan-2); }

/* lightbox player */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(2, 6, 16, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lightbox[open]::backdrop { animation: lb-in 0.45s ease; }
.lightbox.is-closing::backdrop { opacity: 0; transition: opacity 0.5s ease; }
.lightbox.is-closing .lightbox__close { opacity: 0; transition: opacity 0.3s; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__inner { display: grid; gap: 14px; justify-items: center; padding: 70px 16px 24px; }
.lightbox__media { --arn: 1.7778; position: relative; width: min(92vw, 1400px, calc((100vh - 170px) * var(--arn))); width: min(92vw, 1400px, calc((100dvh - 170px) * var(--arn))); aspect-ratio: var(--arn); border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 120px -40px rgba(25, 227, 255, 0.4); transform-origin: 0 0; }
.lightbox__media video, .lightbox__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lightbox__cap { display: grid; gap: 4px; max-width: 64ch; text-align: center; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.lightbox__cap b { color: var(--text); font-size: 1rem; font-weight: 600; }
.lightbox__close { position: fixed; top: 16px; inset-inline-end: 16px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(8, 18, 44, 0.8); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lightbox__close:hover, .lightbox__close:focus-visible { background: var(--cyan); color: var(--on-cyan); }

html.is-locked { overflow: hidden; }
html.is-locked .cursor { opacity: 0 !important; }

/* ---------- Workflow ---------- */
.flow__steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.flow__steps::before { content: ""; position: absolute; top: 27px; inset-inline: 10%; height: 2px; background: var(--line-2); }
.flow__steps::after { content: ""; position: absolute; top: 27px; inset-inline-start: 10%; width: 80%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--rose)); transform-origin: left; transform: scaleX(var(--flow, 0)); }
[dir="rtl"] .flow__steps::after { transform-origin: right; background: linear-gradient(270deg, var(--cyan), var(--rose)); }
.flow__step { position: relative; display: grid; gap: 8px; justify-items: start; }
.flow__node { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: #0a1736; border: 1px solid var(--line-2); color: var(--text-3); transition: all 0.5s var(--ease); margin-block-end: 8px; }
.flow__node .ico { width: 24px; height: 24px; }
.flow__step.is-on .flow__node { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 40px rgba(25, 227, 255, 0.45); }
.flow__step > b { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--cyan); }
.flow__step h3 { font-size: var(--step-1); }
.flow__step p { color: var(--text-2); font-size: 0.92rem; }
.flow__chip { font-family: var(--mono); font-size: 0.7rem; padding: 5px 9px; border-radius: 8px; background: rgba(25, 227, 255, 0.07); border: 1px solid rgba(25, 227, 255, 0.2); color: var(--cyan-2); opacity: 0.45; transition: opacity 0.4s; }
.flow__step.is-on .flow__chip { opacity: 1; }
.flow .fineprint { margin-block: 20px 40px; }
.sim { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 30px; padding: clamp(24px, 4vw, 44px); align-items: center; }
.sim__copy { display: grid; gap: 16px; }
.sim__title { font-size: var(--step-2); }
.sim__form { display: flex; gap: 10px; flex-wrap: wrap; }
.sim__form input { flex: 1 1 260px; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(4, 10, 26, 0.7); color: var(--text); font: inherit; }
.sim__form input:focus { outline: none; border-color: var(--cyan); }
.phone { position: relative; justify-self: center; width: 240px; height: 300px; border-radius: 34px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0c1a3d, #060f26); padding: 44px 14px 14px; overflow: hidden; }
.phone__notch { position: absolute; top: 12px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #02060f; }
.phone__idle { text-align: center; color: var(--text-3); font-size: 0.82rem; margin-top: 80px; }
.phone__toast { display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: rgba(244, 247, 255, 0.95); color: #0a1430; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6); animation: toast 0.7s var(--ease); }
.phone__toast[hidden] { display: none; }
.phone__app { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: #4a5778; }
.phone__app .brand__mark { width: 16px; height: 16px; color: #0a1430; }
.phone__app span { margin-inline-start: auto; }
.phone__title { font-weight: 700; font-size: 0.92rem; }
.phone__body { font-size: 0.82rem; color: #2c3a5e; line-height: 1.4; }
.phone__action { justify-self: start; margin-top: 4px; font-size: 0.74rem; font-weight: 600; color: #0b8f6a; }
@keyframes toast { from { transform: translateY(-30px) scale(0.96); opacity: 0; } }

/* ---------- Process ---------- */
.process__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.process__list li { padding: 30px 26px; display: grid; gap: 12px; align-content: start; }
.process__list b { font-family: var(--mono); font-weight: 500; font-size: 2.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--cyan); }
.process__list h3 { font-size: var(--step-1); }
.process__list p { color: var(--text-2); font-size: 0.95rem; }

/* ---------- Why ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); margin-block-end: 40px; }
.facts li { display: grid; gap: 8px; padding: 26px 22px 26px 0; border-inline-end: 1px solid var(--line); }
[dir="rtl"] .facts li { padding: 26px 0 26px 22px; }
.facts li:last-child { border-inline-end: 0; }
.facts b { font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-family: "Geist", var(--font); }
.facts span { color: var(--text-2); font-size: 0.95rem; max-width: 22ch; }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.principles .card { padding: 26px 24px; display: grid; gap: 8px; }
.principles h3 { font-size: var(--step-1); }
.principles p { color: var(--text-2); font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq__grid .section-head { position: sticky; top: calc(var(--header-h) + 30px); margin: 0; }
.faq__list { display: grid; gap: 10px; }
.faq__list details { border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 18, 44, 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s; }
.faq__list details[open] { border-color: rgba(25, 227, 255, 0.35); }
.faq__list summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 600; font-size: 1.04rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--cyan); transition: transform 0.4s var(--ease); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { padding: 0 22px 22px; color: var(--text-2); }
.faq__list a { color: var(--cyan); }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(30px, 6vw, 80px); align-items: start; }
.contact__copy { display: grid; gap: 24px; }
.contact__title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__meta { display: grid; gap: 12px; color: var(--text-2); }
.contact__meta li { display: flex; align-items: center; gap: 10px; }
.contact__meta .ico { color: var(--cyan); }
.contact__meta a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.contact__meta a:hover { color: var(--text); border-color: var(--cyan); }
.form { padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; }
.form__title { font-size: var(--step-2); }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.86rem; color: var(--text-2); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(4, 10, 26, 0.7); color: var(--text); font: inherit; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .field select { background-position: 20px 55%, 25px 55%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(25, 227, 255, 0.15); }
.form__status { min-height: 1.2em; font-size: 0.9rem; color: var(--cyan-2); }
.form__status.is-error { color: var(--rose); }
.form .fineprint a { color: var(--text-2); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 60px 0; overflow: hidden; background: linear-gradient(180deg, rgba(4, 10, 26, 0.2), var(--bg) 40%); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.footer__brand { display: grid; gap: 12px; align-content: start; color: var(--text-2); }
.footer__col { display: grid; gap: 10px; align-content: start; font-size: 0.94rem; }
.footer__col b { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; }
.footer__col a { text-decoration: none; color: var(--text-2); justify-self: start; }
.footer__col a:hover { color: var(--cyan); }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 40px 0; color: var(--text-3); font-size: 0.82rem; }
.footer__word { font-family: "Geist", var(--font); font-weight: 800; font-size: 21.5vw; line-height: 0.78; letter-spacing: -0.06em; text-align: center; white-space: nowrap; margin-block-start: 30px; background: linear-gradient(180deg, rgba(160, 200, 255, 0.2), rgba(160, 200, 255, 0.02) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* ---------- Floating WhatsApp + cursor ---------- */
.wa-float { position: fixed; z-index: 50; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline-end: 18px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: var(--on-cyan); box-shadow: 0 14px 40px -10px rgba(25, 227, 255, 0.7); transition: transform 0.4s var(--ease); }
.wa-float .ico { width: 26px; height: 26px; }
.wa-float:hover { transform: scale(1.08); }
.cursor { position: fixed; top: 0; left: 0; z-index: 120; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(25, 227, 255, 0.7); pointer-events: none; display: none; place-items: center; transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background 0.3s, border-color 0.3s; }
.has-cursor .cursor { display: grid; opacity: 0; }
.has-cursor .cursor.is-on { opacity: 1; }
.cursor.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(25, 227, 255, 0.12); }
.cursor.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--cyan); border-color: var(--cyan); }
.cursor__label { font-size: 0.78rem; font-weight: 700; color: var(--on-cyan); opacity: 0; transition: opacity 0.2s; }
.cursor.is-label .cursor__label { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) { .wall { columns: 4; } }
@media (max-width: 1080px) {
  .wall { columns: 3; }
  .case, .case--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .case--flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .problems__grid, .process__list, .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(2) { border-inline-end: 0; }
  .flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .flow__steps::before, .flow__steps::after { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .header__nav, .header__actions .btn { display: none; }
  .header__actions { margin-inline-start: auto; }
  .burger { display: block; }
  .hero { align-items: flex-end; padding-top: 46vh; padding-bottom: 80px; }
  .hero__title { max-width: none !important; }
  .scroll-cue { display: none; }
  .services { padding-block: 90px 40px; }
  .services__sticky { position: static; height: auto; display: block; }
  .services__markers, .services__tabs, .services__meter { display: none; }
  .services__inner { display: grid; gap: 18px; padding: 0 var(--gutter); height: auto; }
  .services__stack { width: auto; min-height: 0; display: grid; gap: 14px; }
  .svc { position: relative; opacity: 1; transform: none; pointer-events: auto; padding: 26px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(8, 18, 44, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); min-height: 72vh; align-content: end; }
  .svc__title { font-size: var(--step-2); }
  .case, .case--flip { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .case--flip .case__body { order: 0; }
  .wall { columns: 2; --g: 10px; }
  .how__steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .how__step { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
  .how__ico { grid-row: span 2; margin: 0; width: 42px; height: 42px; }
  .how__num { top: 16px; inset-inline-end: 16px; }
  .reel.is-live { height: 240vh; }
  /* keep the last lines clear of the floating WhatsApp button */
  .reel.is-live .reel__foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .sim { grid-template-columns: 1fr; }
  .faq__grid, .contact__grid { grid-template-columns: 1fr; }
  .faq__grid .section-head { position: static; }
}
@media (max-width: 560px) {
  .problems__grid, .process__list, .principles { grid-template-columns: 1fr; }
  .chip-btn { padding: 8px 13px; font-size: 0.86rem; }
  .lib__tabs { width: auto; }
  .flow__steps { grid-template-columns: 1fr 1fr; }
  .lightbox__inner { padding: 64px 12px 16px; gap: 10px; }
  .lightbox__media { width: min(94vw, calc((100vh - 270px) * var(--arn))); width: min(94vw, calc((100dvh - 270px) * var(--arn))); }
  .lightbox__cap { font-size: 0.84rem; }
  .facts li { padding-inline: 0 14px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (pointer: coarse) { .cursor { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .marquee__track { animation: none; }
  .grain { display: none; }
}

/* ---------- v7: visuals for phones ---------- */
/* problems flip from the pain to the fix as they reach the middle of the screen */
.problem__x { position: relative; }
.problem__x i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; transition: opacity 0.5s, transform 0.7s var(--ease); }
.problem__ok { opacity: 0; transform: rotate(-90deg) scale(0.4); color: var(--cyan); font-size: 0.95rem; }
.problem__fix { display: block; margin-block-end: 4px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.problem { transition: border-color 0.6s, transform 0.5s var(--ease), box-shadow 0.8s; }
.problem.is-solved { border-color: rgba(25, 227, 255, 0.32); box-shadow: 0 24px 70px -36px rgba(25, 227, 255, 0.6); }
.problem.is-solved .problem__x { background: var(--cyan-soft); }
.problem.is-solved .problem__no { opacity: 0; transform: rotate(90deg) scale(0.4); }
.problem.is-solved .problem__ok { opacity: 1; transform: none; }
.js-solve .problem p { opacity: 0.3; filter: blur(4px); transition: opacity 0.8s 0.2s, filter 0.8s 0.2s; }
.js-solve .problem.is-solved p { opacity: 1; filter: none; }

/* process: steps light up, and on phones a rail fills as you scroll */
.process__list b { transition: color 0.6s, text-shadow 0.6s; }
.process__list li { position: relative; transition: border-color 0.6s; }
.process__list li.is-on { border-color: rgba(25, 227, 255, 0.28); }
.process__list li.is-on b { color: var(--cyan); text-shadow: 0 0 26px rgba(25, 227, 255, 0.55); }

/* service visuals: a live picture of each service (beside the text on desktop, above it on phones) */
.svc__visual { display: none; }
.sv * { animation-play-state: paused !important; }
.sv.is-on * { animation-play-state: running !important; }
.sv__tag { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 5; padding: 4px 10px; border-radius: 999px; background: rgba(4, 10, 26, 0.72); border: 1px solid var(--line-2); color: var(--text-2); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sv__tag--ours { color: var(--cyan-2); border-color: rgba(25, 227, 255, 0.35); }
.sv__tag--hf { color: #ffc2cf; border-color: rgba(255, 138, 161, 0.35); }
.sv video, .sv img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes sv-float { 50% { transform: translateY(-6px); } }

/* 01 automation: a lead moves through the flow */
.sv-flow { position: absolute; inset: 44px 14px 14px; display: grid; align-content: center; gap: 9px; }
.sv-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; background: rgba(13, 28, 64, 0.92); border: 1px solid var(--line-2); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8); }
.sv-row:nth-child(1) { animation: sv-r0 8s infinite both; }
.sv-row:nth-child(2) { animation: sv-r1 8s infinite both; }
.sv-row:nth-child(3) { animation: sv-r2 8s infinite both; }
.sv-row:nth-child(4) { animation: sv-r3 8s infinite both; border-color: rgba(25, 227, 255, 0.4); }
.sv-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan-soft); color: var(--cyan); font-weight: 700; }
.sv-ico .ico { width: 16px; height: 16px; }
.sv-ico--ok { background: var(--cyan); color: var(--on-cyan); }
.sv-row__txt { display: grid; min-width: 0; }
.sv-row__txt b { font-size: 0.84rem; font-weight: 600; line-height: 1.3; }
.sv-row__txt small { font-size: 0.72rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes sv-r0 { 0% { opacity: 0; transform: translateY(14px) scale(0.96); } 5%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sv-r1 { 0%, 14% { opacity: 0; transform: translateY(14px) scale(0.96); } 19%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sv-r2 { 0%, 28% { opacity: 0; transform: translateY(14px) scale(0.96); } 33%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes sv-r3 { 0%, 42% { opacity: 0; transform: translateY(14px) scale(0.96); } 47%, 84% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(25, 227, 255, 0); } 55% { box-shadow: 0 0 0 6px rgba(25, 227, 255, 0.16); } 92%, 100% { opacity: 0; transform: translateY(-8px); } }

/* 02 websites: the Annie Selby site in a browser and on a phone */
.sv-site__win { position: absolute; top: 50px; inset-inline-start: 6cqw; width: min(74cqw, calc((100cqh - 74px) * 1.6)); padding-top: 16px; border-radius: 10px; overflow: hidden; background: #0c1938; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.sv-site__win i { position: absolute; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #2a3b63; inset-inline-start: 8px; }
.sv-site__win i:nth-child(2) { inset-inline-start: 17px; }
.sv-site__win i:nth-child(3) { inset-inline-start: 26px; }
.sv-site__win img { height: auto; aspect-ratio: 1280 / 800; }
/* content-box so the 390:844 ratio applies inside the 4px bezel, not around it */
.sv-site__phone { position: absolute; top: 36px; inset-inline-end: 6cqw; box-sizing: content-box; height: calc(100cqh - 54px); aspect-ratio: 390 / 844; border-radius: 18px; overflow: hidden; border: 4px solid #0e1a3a; background: #0e1a3a; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line-2); animation: sv-float 6s ease-in-out infinite; }

/* 03 software: the AI Orbit Desktop demo */
.sv-app__win { position: absolute; top: 46px; left: 50%; width: min(86cqw, calc((100cqh - 64px) * 1.6)); translate: -50% 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: #0c1938; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.sv-app__bar { position: relative; height: 16px; }
.sv-app__bar i { position: absolute; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #2a3b63; left: 8px; }
.sv-app__bar i:nth-child(2) { left: 17px; }
.sv-app__bar i:nth-child(3) { left: 26px; }
.sv-app__win video { height: auto; aspect-ratio: 1200 / 750; }
.sv-app__mini { position: absolute; bottom: 10px; inset-inline-end: 4cqw; width: 34cqw; aspect-ratio: 1600 / 1000; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.9); animation: sv-float 7s ease-in-out infinite; }

/* 04 AI video: a fan of Higgsfield examples */
.sv-fan__card { position: absolute; top: 50%; left: 50%; height: calc(100cqh - 64px); aspect-ratio: 9 / 16; margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9); background: #0a1532; }
.sv-fan__card--c { z-index: 2; translate: -50% -50%; animation: sv-float 6s ease-in-out infinite; }
.sv-fan__card--l { aspect-ratio: 480 / 860; translate: -112% -48%; rotate: -9deg; opacity: 0.8; animation: sv-sway-l 7s ease-in-out infinite; }
.sv-fan__card--r { aspect-ratio: 480 / 720; translate: 12% -48%; rotate: 9deg; opacity: 0.8; animation: sv-sway-r 7s ease-in-out infinite; }
@keyframes sv-sway-l { 50% { rotate: -6deg; } }
@keyframes sv-sway-r { 50% { rotate: 6deg; } }

/* 05 YouTube: a player with a running progress bar */
.sv-yt__player { position: absolute; top: 42px; left: 50%; width: min(88cqw, calc((100cqh - 112px) * 16 / 9)); translate: -50% 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #0a1532; }
.sv-yt__bar { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.25); direction: ltr; }
.sv-yt__bar i { display: block; height: 100%; width: 100%; background: #ff3040; transform-origin: left; animation: sv-progress 8s linear infinite; }
.sv-yt__play { position: absolute; top: 50%; left: 50%; width: 46px; height: 32px; translate: -50% -50%; border-radius: 9px; background: #ff3040; animation: sv-play 8s infinite both; }
.sv-yt__play::after { content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.sv-yt__meta { position: absolute; inset-inline: 0; bottom: 14px; margin-inline: auto; width: min(88cqw, calc((100cqh - 112px) * 16 / 9)); display: flex; align-items: center; gap: 10px; }
.sv-yt__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 200deg, var(--cyan), var(--rose), var(--cyan)); }
.sv-yt__lines { flex: 1; display: grid; gap: 5px; min-width: 0; }
.sv-yt__lines b { font-size: 0.8rem; font-weight: 600; }
.sv-yt__lines i { display: block; height: 6px; border-radius: 4px; background: var(--line-2); }
.sv-yt__lines i + i { width: 60%; }
.sv-yt__sub { position: relative; flex: none; display: grid; }
.sv-yt__sub b { grid-area: 1 / 1; padding: 7px 13px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; text-align: center; }
.sv-yt__sub b:first-child { background: #fff; color: #0a0f1e; animation: sv-sub-a 8s infinite both; }
.sv-yt__sub b:last-child { background: rgba(255, 255, 255, 0.14); color: var(--text); animation: sv-sub-b 8s infinite both; }
@keyframes sv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sv-play { 0%, 8% { opacity: 1; scale: 1; } 16%, 100% { opacity: 0; scale: 1.4; } }
@keyframes sv-sub-a { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sv-sub-b { 0%, 44% { opacity: 0; scale: 0.9; } 50%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }

/* 06 marketing: a sponsored post that turns into a lead */
.sv-ig__post { position: absolute; top: 42px; inset-inline-start: 7cqw; border-radius: 14px; overflow: hidden; background: #0d1a3a; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9); animation: sv-float 7s ease-in-out infinite; }
.sv-ig__head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.sv-ig__avatar { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(from 90deg, #ffb35c, #ff5a8a, #8a5cff, #ffb35c); }
.sv-ig__head b { display: block; font-size: 0.74rem; font-weight: 600; line-height: 1.2; }
.sv-ig__head small { font-size: 0.62rem; color: var(--text-2); }
.sv-ig__img { position: relative; height: calc(100cqh - 136px); aspect-ratio: 480 / 641; }
.sv-ig__heart { position: absolute; top: 50%; left: 50%; translate: -50% -50%; color: #fff; font-size: 64px; line-height: 1; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); animation: sv-heart 6s infinite both; }
.sv-ig__cta { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #2f7cff; color: #fff; font-size: 0.74rem; font-weight: 600; }
.sv-ig__arrow { font-size: 1rem; line-height: 1; }
[dir="rtl"] .sv-ig__arrow { transform: scaleX(-1); }
.sv-ig__funnel { position: absolute; inset-inline-end: 6cqw; top: 50%; translate: 0 -40%; display: grid; gap: 10px; }
.sv-ig__funnel span { padding: 8px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-align: center; background: rgba(13, 28, 64, 0.9); border: 1px solid var(--line-2); color: var(--text-3); }
.sv-ig__funnel span:nth-child(1) { animation: sv-step0 6s infinite both; }
.sv-ig__funnel span:nth-child(2) { animation: sv-step1 6s infinite both; }
.sv-ig__funnel span:nth-child(3) { animation: sv-step2 6s infinite both; }
@keyframes sv-heart { 0%, 30% { opacity: 0; scale: 0.3; } 36% { opacity: 1; scale: 1.15; } 42%, 52% { opacity: 1; scale: 1; } 60%, 100% { opacity: 0; scale: 1; } }
@keyframes sv-step0 { 0%, 8% { color: var(--text-3); } 12%, 88% { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); } 96%, 100% { color: var(--text-3); } }
@keyframes sv-step1 { 0%, 38% { color: var(--text-3); } 42%, 88% { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); } 96%, 100% { color: var(--text-3); } }
@keyframes sv-step2 { 0%, 66% { color: var(--text-3); } 70%, 88% { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 24px rgba(25, 227, 255, 0.55); } 96%, 100% { color: var(--text-3); } }

/* 07 support: a chat with an AI assistant */
.sv-chat { position: absolute; inset: 46px 14px 14px; display: grid; align-content: center; gap: 9px; }
.sv-chat p { margin: 0; max-width: 82%; padding: 9px 12px; border-radius: 16px; font-size: 0.8rem; line-height: 1.45; }
.sv-chat__msg--me { justify-self: end; background: var(--cyan); color: var(--on-cyan); border-end-end-radius: 4px; animation: sv-c0 9s infinite both; }
.sv-chat__typing { grid-area: 2 / 1; align-self: start; justify-self: start; display: flex; gap: 4px; background: rgba(13, 28, 64, 0.92); border: 1px solid var(--line-2); animation: sv-c1 9s infinite both; }
.sv-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: sv-dot 1s infinite; }
.sv-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.sv-chat__typing i:nth-child(3) { animation-delay: 0.3s; }
.sv-chat__msg--bot { grid-area: 2 / 1; align-self: start; justify-self: start; background: rgba(13, 28, 64, 0.92); border: 1px solid var(--line-2); border-end-start-radius: 4px; animation: sv-c2 9s infinite both; }
.sv-chat__msg--bot b { display: block; margin-bottom: 2px; font-size: 0.66rem; font-family: var(--mono); letter-spacing: 0.06em; color: var(--cyan); font-weight: 500; }
.sv-chat__done { grid-area: 3 / 1; justify-self: center; background: transparent !important; color: var(--cyan-2); font-family: var(--mono); font-size: 0.7rem !important; animation: sv-c3 9s infinite both; }
@keyframes sv-c0 { 0% { opacity: 0; transform: translateY(12px); } 5%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes sv-c1 { 0%, 10% { opacity: 0; } 13%, 26% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes sv-c2 { 0%, 28% { opacity: 0; transform: translateY(12px); } 33%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes sv-c3 { 0%, 50% { opacity: 0; transform: scale(0.9); } 55%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes sv-dot { 50% { opacity: 0.3; transform: translateY(-3px); } }

@media (max-width: 820px) {
  .svc { min-height: 0; align-content: start; gap: 14px; padding: 12px 12px 24px; }
  .svc > :not(.svc__visual) { margin-inline: 10px; }
  .svc__visual { display: block; position: relative; height: clamp(260px, 76vw, 360px); container-type: size; border-radius: 16px; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, rgba(25, 227, 255, 0.14), rgba(8, 18, 44, 0) 62%), linear-gradient(180deg, #0b1838, #060e24); }
  .svc__visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(160, 200, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 200, 255, 0.05) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); }
}
@media (max-width: 560px) {
  .process__list { position: relative; padding-inline-start: 26px; }
  .process__list::before, .process__list::after { content: ""; position: absolute; inset-inline-start: 6px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; }
  .process__list::before { background: var(--line-2); }
  .process__list::after { background: linear-gradient(180deg, var(--cyan), var(--rose)); transform-origin: top; transform: scaleY(var(--p, 0)); }
  .process__list li::before { content: ""; position: absolute; top: 36px; inset-inline-start: -26px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: background 0.5s, border-color 0.5s, box-shadow 0.5s; z-index: 1; }
  .process__list li.is-on::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(25, 227, 255, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .sv * { animation: none !important; }
  .sv-chat__typing, .sv-ig__heart, .sv-yt__sub b:last-child { display: none; }
  .js-solve .problem p { opacity: 1; filter: none; }
}

/* phones: frosted glass over the moving particle scene is re-blurred every frame, which costs smoothness;
   solid panels look the same at this size */
@media (max-width: 820px) {
  .card, .svc, .how__step, .sv__tag, .btn, .orbit-label, .lib__tabs, .studio__cta, .sim, .form, .menu, .faq details { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .faq details { background: rgba(10, 22, 52, 0.86); }
  .card, .how__step, .studio__cta, .sim, .form { background: rgba(10, 22, 52, 0.86); }
  .svc { background: rgba(8, 18, 44, 0.9); }
  .lib__tabs { background: rgba(8, 18, 44, 0.95); }
  .btn--ghost { background: rgba(8, 18, 44, 0.6); }
  .sv__tag { background: rgba(4, 10, 26, 0.88); }
}

/* ---------- v8: hero satellites carry live clips (stage.js moves, scales and plays them) ---------- */
.pod { position: absolute; top: 0; left: 0; opacity: 0; display: grid; justify-items: center; gap: 8px; will-change: transform, opacity; }
/* content-box so the clip's own ratio applies inside the 1px border */
.pod__media { position: relative; display: block; box-sizing: content-box; width: 94px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0a1532; border: 1px solid rgba(160, 200, 255, 0.28); box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.9), 0 0 44px -10px rgba(25, 227, 255, 0.4); }
.pod__media--wide { width: 176px; aspect-ratio: 16 / 10; }
.pod__media video { width: 100%; height: 100%; object-fit: cover; }
.pod__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; background: rgba(6, 16, 40, 0.86); border: 1px solid var(--line-2); font-size: 0.76rem; font-weight: 500; white-space: nowrap; }
.pod__tag b { font-family: var(--mono); font-size: 0.64rem; font-weight: 500; color: var(--cyan); }
/* 01 automation: an enquiry lights up each step */
.pod__media--flow { display: grid; align-content: center; gap: 8px; padding: 10px 9px; background: radial-gradient(120% 70% at 50% 0%, rgba(25, 227, 255, 0.2), transparent 60%), linear-gradient(180deg, #0c1a3c, #071028); }
.pod__media--flow i { position: relative; display: block; padding: 7px 6px; border-radius: 9px; font-style: normal; font-size: 0.64rem; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; background: rgba(13, 28, 64, 0.95); border: 1px solid var(--line-2); color: var(--text-3); animation: pod-step 4.8s infinite both; animation-delay: calc(var(--i) * 0.7s); }
.pod__media--flow i + i::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 8px; background: rgba(25, 227, 255, 0.45); }
@keyframes pod-step { 0%, 6% { color: var(--text-3); background: rgba(13, 28, 64, 0.95); border-color: var(--line-2); } 12%, 66% { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); } 80%, 100% { color: var(--text-3); background: rgba(13, 28, 64, 0.95); border-color: var(--line-2); } }
/* 04 content: a short with a running progress bar · 05 marketing: a sponsored post */
.pod__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.25); direction: ltr; }
.pod__bar i { display: block; height: 100%; background: #ff3040; transform-origin: left; animation: sv-progress 6s linear infinite; }
.pod__ad { position: absolute; top: 7px; inset-inline-start: 7px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.58rem; font-weight: 600; }
@media (max-width: 820px) {
  .pod { gap: 5px; }
  .pod__media { width: clamp(60px, 10vw, 90px); border-radius: 12px; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.9), 0 0 26px -8px rgba(25, 227, 255, 0.45); }
  .pod__media--wide { width: clamp(108px, 17vw, 168px); }
  .pod__media--flow { gap: 5px; padding: 6px 5px; }
  .pod__media--flow i { padding: 4px 3px; border-radius: 6px; font-size: 0.5rem; }
  .pod__media--flow i + i::before { height: 5px; }
  .pod__tag { padding: 2px 8px 2px 7px; gap: 4px; font-size: 0.62rem; }
  .pod__tag b { font-size: 0.54rem; }
  .pod__ad { top: 4px; inset-inline-start: 4px; padding: 1px 4px; font-size: 0.46rem; }
}

/* ---------- v8: a wall of playing clips (Higgsfield examples) under the hero ---------- */
.vwall { position: relative; min-height: 112vh; min-height: 112svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: var(--bg); padding-block: clamp(110px, 14vh, 160px); }
.vwall__wall { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; pointer-events: none; }
.vwall__grid { --g: clamp(10px, 1.3vw, 20px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g); width: max(114vw, 1000px); direction: ltr; rotate: -8deg; }
.vwall__col { display: grid; gap: var(--g); align-content: start; will-change: transform; }
.vwall__col:nth-child(even) { margin-top: 18%; }
.vwall__card { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: clamp(14px, 1.5vw, 22px); overflow: hidden; background: linear-gradient(160deg, #0f1f48, #081230); border: 1px solid rgba(160, 200, 255, 0.12); }
.vwall__card video { width: 100%; height: 100%; object-fit: cover; }
.vwall__tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(4, 10, 26, 0.82); border: 1px solid var(--line-2); color: var(--cyan-2); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; white-space: nowrap; }
.vwall__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 52% at 50% 50%, rgba(4, 10, 26, 0.9), rgba(4, 10, 26, 0.62) 58%, rgba(4, 10, 26, 0.18)), linear-gradient(180deg, var(--bg) 0%, rgba(4, 10, 26, 0) 18%, rgba(4, 10, 26, 0) 82%, var(--bg) 100%); }
.vwall__copy { display: grid; justify-items: center; gap: 22px; max-width: 900px; text-align: center; }
.vwall__title { font-size: clamp(2.7rem, 1.2rem + 5.4vw, 6.4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; }
:root[lang="he"] .vwall__title { letter-spacing: -0.02em; line-height: 1.04; }
.vwall__lede { max-width: 600px; font-size: var(--step-1); color: var(--text-2); }
.vwall__cta { display: flex; justify-content: center; }
.vwall__note { color: var(--text-3); font-size: 0.8rem; }
@media (max-width: 820px) {
  .vwall { min-height: 108svh; padding-block: 96px; }
  .vwall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 152vw; rotate: -10deg; --g: 10px; }
  .vwall__col:first-child, .vwall__col:last-child { display: none; }
  .vwall__col:nth-child(even) { margin-top: 0; }
  .vwall__col:nth-child(3) { margin-top: 26%; }
  .vwall__tag { left: 7px; bottom: 7px; padding: 3px 8px; font-size: 0.56rem; }
  .vwall__shade { background: radial-gradient(90% 46% at 50% 50%, rgba(4, 10, 26, 0.9), rgba(4, 10, 26, 0.6) 62%, rgba(4, 10, 26, 0.2)), linear-gradient(180deg, var(--bg) 0%, rgba(4, 10, 26, 0) 14%, rgba(4, 10, 26, 0) 86%, var(--bg) 100%); }
  .vwall__copy { gap: 18px; }
}

/* ---------- v8: on desktop each service shows its live visual beside the text ---------- */
@media (min-width: 821px) {
  .svc__visual { display: block; position: absolute; top: 50%; inset-inline-start: calc(100% + clamp(40px, 5vw, 96px)); width: min(560px, 38vw, calc((100vh - 330px) * 1.25)); aspect-ratio: 5 / 4; translate: 0 -50%; container-type: size; border-radius: 22px; overflow: hidden; isolation: isolate; border: 1px solid var(--line-2); background: radial-gradient(120% 90% at 50% 0%, rgba(25, 227, 255, 0.16), rgba(8, 18, 44, 0) 62%), linear-gradient(180deg, #0b1838, #060e24); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 90px -40px rgba(25, 227, 255, 0.5); transform: perspective(1100px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.7s var(--ease), scale 0.9s var(--ease); }
  .svc__visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(160, 200, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 200, 255, 0.05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); }
  .svc:not(.is-active) .svc__visual { scale: 0.93; }
  .sv__tag { top: 14px; inset-inline-start: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc__visual { transform: none !important; }
}

/* ---------- v8: a strip of playing clips before the contact section (Higgsfield examples) ---------- */
.cmarq { position: relative; z-index: 1; padding-block: clamp(30px, 5vw, 60px) clamp(40px, 6vw, 80px); }
.cmarq__rail { overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cmarq__track { display: flex; width: max-content; padding-block: 18px; animation: cmarq 90s linear infinite; will-change: transform; }
.cmarq:hover .cmarq__track { animation-play-state: paused; }
/* margins rather than gap so the two copies line up exactly at -50% */
.cmarq__card { flex: none; height: clamp(170px, 17vw, 300px); aspect-ratio: 9 / 16; margin-inline-end: clamp(10px, 1.2vw, 16px); border-radius: clamp(12px, 1.2vw, 18px); overflow: hidden; background: linear-gradient(160deg, #0f1f48, #081230); border: 1px solid rgba(160, 200, 255, 0.14); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
.cmarq__card:nth-child(odd) { transform: translateY(14px); }
.cmarq__card video { width: 100%; height: 100%; object-fit: cover; }
.cmarq__note { margin-block-start: 18px; padding-inline: var(--gutter); text-align: center; color: var(--text-3); font-size: 0.82rem; }
.cmarq__note a { color: var(--cyan); white-space: nowrap; }
@keyframes cmarq { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .cmarq__track { animation: none; } }

/* ---------- Legal pages ---------- */
.legal-page main { padding-block: calc(var(--header-h) + 50px) 100px; }
.legal { max-width: 52rem; display: grid; gap: 18px; padding: clamp(24px, 4vw, 48px); }
.legal h1 { font-size: var(--step-3); }
.legal h2 { font-size: var(--step-2); margin-block-start: 16px; }
.legal p, .legal li { color: var(--text-2); }
.legal ul { list-style: disc; padding-inline-start: 1.3rem; display: grid; gap: 6px; }
.legal a { color: var(--cyan); }
.legal .note { background: rgba(255, 138, 161, 0.08); border-inline-start: 2px solid var(--rose); padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; color: var(--text); }