/* =========================================================
   G-Stat - Homepage redesign (design build, v1)
   Structure: client wireframe V11 (9 sections + footer, RTL, 1440px)
   Font: Rubik (self-hosted TTF, assets/fonts/) - per Gal 19.8; replaced Assistant
   Palette: dark navy + electric blue/cyan, gold accent from the logo
   ========================================================= */

/* Rubik - self-hosted (../assets/fonts/). Weights: 300 / 400 / 500 / 700 / 900 */
@font-face { font-family: 'Rubik'; src: url('../assets/fonts/Rubik-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/fonts/Rubik-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/fonts/Rubik-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/fonts/Rubik-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/fonts/Rubik-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Surfaces */
  --bg: #03070d;
  --bg-2: #07111e;
  --surface: #0b1726;
  --surface-2: #0f1f33;

  /* Brand + accents */
  --blue: #168bff;
  --cyan: #58d7ff;
  --teal: #21e2c3;
  --violet: #7857ff;
  --gold: #f6b616;
  --gold-2: #ffd257;

  /* Text */
  --text: #f4f8fc;
  --muted: #9eb0c4;
  --faint: #6b7d93;

  /* Lines */
  --line: rgba(120, 190, 255, 0.18);
  --line-strong: rgba(120, 190, 255, 0.35);

  /* Type scale */
  --h1: clamp(38px, 4.4vw, 64px);
  --h2: clamp(30px, 3.4vw, 50px);
  --h3: clamp(22px, 2vw, 28px);
  --lead: clamp(18px, 1.35vw, 21px);
  --body: 17px;

  /* Logos are pre-rendered in one ink colour by tools/build-logo-assets.py and sit
     straight on the page background, so nothing here recolours them at runtime.
     --logo-ink is that colour; change it there, not here. */
  --logo-ink: #b6c8de;
  --logo-ease: opacity .35s ease, filter .35s ease;

  --radius: 20px;
  --radius-sm: 12px;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 80px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: var(--body); line-height: 1.6;
  color: var(--text); background: var(--bg);
  direction: rtl; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0; }
.en { direction: ltr; unicode-bidi: isolate; }

/* Global background: soft color fields + faint grid */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(22, 139, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(120, 87, 255, 0.08), transparent 60%),
    var(--bg);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 190, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 190, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
}

.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { position: relative; padding: clamp(80px, 9vw, 130px) 0; }
.section-tight { padding-block: clamp(56px, 7vw, 96px); }
.section-divider { border-top: 1px solid var(--line); }

/* Typography helpers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
.eyebrow .n { color: var(--faint); font-weight: 600; direction: ltr; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.eyebrow.gold { color: var(--gold); }
.eyebrow.gold::before { background: linear-gradient(90deg, var(--gold), transparent); }
.h1 { font-size: var(--h1); font-weight: 700; line-height: 1.08; }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }
.lead { font-size: var(--lead); color: var(--muted); line-height: 1.65; max-width: 62ch; }
.muted { color: var(--muted); }
.section-head { max-width: 800px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .lead { margin-top: 16px; }
.center { text-align: center; margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }
.gradient-text {
  background: linear-gradient(90deg, #ffffff 0%, var(--cyan) 55%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.split-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; margin-bottom: clamp(36px, 5vw, 60px); }
.split-head .lead { margin-top: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 17px; line-height: 1;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s, background .3s, border-color .3s;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(-4px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 60%, #e59f06); color: #1a1200;
  box-shadow: 0 8px 30px rgba(246, 182, 22, 0.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(246, 182, 22, 0.42), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-ghost { background: rgba(22, 139, 255, 0.06); color: var(--text); border-color: var(--line-strong); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--cyan); background: rgba(88, 215, 255, 0.10); transform: translateY(-2px); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 700; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(-4px); }
.link-arrow.center-link { justify-content: center; width: 100%; margin-top: 34px; }

/* Cards */
.card {
  position: relative; background: linear-gradient(180deg, rgba(15, 31, 51, 0.7), rgba(11, 23, 38, 0.9));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  backdrop-filter: blur(8px); overflow: hidden;
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 215, 255, 0.7), transparent);
  opacity: 0; transition: opacity .4s;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(88,215,255,0.08); }
.card:hover::before { opacity: 1; }

/* Media frame (image placeholders in the wireframe) */
.frame {
  position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line);
  background: #020509; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,7,13,0) 55%, rgba(3,7,13,.55)); }
.frame .frame-label { position: absolute; z-index: 1; right: 22px; bottom: 20px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* =========================================================
   Header
   ========================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center; border-bottom: 1px solid transparent;
  transition: background .4s, backdrop-filter .4s, border-color .4s, height .4s;
}
.header.is-scrolled {
  height: 68px; background: rgba(3, 7, 13, 0.72);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(22, 139, 255, 0.22);
}
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 76px; width: auto; transition: height .4s; filter: drop-shadow(0 4px 16px rgba(246,182,22,.22)); }
.header.is-scrolled .brand img { height: 58px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-size: 18px; letter-spacing: 0.02em; }
.brand-text span { font-size: 11px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
/* Hamburger (always visible, right side in RTL flow) + slide-in drawer */
.burger {
  width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(7,17,30,.4); color: var(--text); cursor: pointer; position: relative; z-index: 130;
  transition: border-color .3s, background .3s;
}
.burger:hover { border-color: var(--cyan); background: rgba(88,215,255,.08); }
.burger span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px auto; border-radius: 2px; transition: transform .4s var(--ease-out), opacity .3s; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 110; background: rgba(3,7,13,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 120;
  width: min(360px, 86vw); padding: calc(var(--header-h) + 24px) 34px 34px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(5, 11, 20, .92);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-inline-start: 1px solid var(--line);
  box-shadow: -30px 0 80px rgba(0,0,0,.5);
  transform: translateX(102%); visibility: hidden;
  transition: transform .55s var(--ease-out), visibility .55s;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 600; color: var(--muted);
  padding: 13px 0; border-bottom: 1px solid rgba(120,190,255,.08);
  transition: color .3s, padding-inline-start .35s var(--ease-out);
  opacity: 0; transform: translateX(-18px);
}
.drawer.is-open .drawer-nav a { opacity: 1; transform: none; transition: color .3s, padding-inline-start .35s var(--ease-out), opacity .5s ease var(--d, 0s), transform .5s var(--ease-out) var(--d, 0s); }
.drawer-nav a:hover { color: var(--text); padding-inline-start: 8px; }
.drawer-nav a svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.drawer-nav a[aria-current="page"] { color: var(--cyan); }
/* Sub-links under "שירותים" - the three service category pages */
.drawer-sub { display: flex; flex-direction: column; padding-inline-start: 14px; }
.drawer-sub a {
  font-size: 15px; font-weight: 500; direction: ltr; justify-content: flex-end;
  padding: 9px 0; border-bottom-color: rgba(120,190,255,.05); color: var(--faint);
}
.drawer-sub a:hover { color: var(--cyan); }
.drawer-actions { margin-top: auto; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(14px); }
.drawer.is-open .drawer-actions { opacity: 1; transform: none; transition: opacity .5s ease .32s, transform .5s var(--ease-out) .32s; }
.drawer-actions .btn { flex: 1; justify-content: center; }
.lang { width: 46px; height: 46px; flex: none; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; transition: border-color .3s, color .3s; }
.lang:hover { border-color: var(--cyan); color: var(--text); }
html.drawer-open, html.drawer-open body { overflow: hidden; }
html.drawer-open .header { z-index: 140; }   /* keep the burger (X) above the open drawer */

/* =========================================================
   01 Hero
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h);
}
.hero-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; left: -8vw; top: 10vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 139, 255, 0.22) 0%, rgba(22, 139, 255, 0.06) 40%, transparent 70%);
  filter: blur(20px);
}
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; gap: 30px; }
.hero-copy { max-width: 660px; padding-block: 60px; align-self: center; }
.hero-copy .h1 { margin-top: 6px; }
.hero-copy .h1 .line { display: block; overflow: hidden; }
.hero-copy .h1 .line > span { display: block; }
.hero-copy .lead { margin-top: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.hero-actions .btn { min-width: 168px; }
.hero-meta { display: flex; gap: 32px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-meta div { display: flex; flex-direction: column; }
.hero-meta strong { font-size: 30px; line-height: 1; font-weight: 700; color: #fff; direction: ltr; text-align: right; }
.hero-meta strong small { font-size: 16px; color: var(--cyan); margin-inline-start: 2px; }
.hero-meta span { font-size: 14px; color: var(--muted); margin-top: 6px; }

.hero-visual { position: relative; height: auto; min-height: 520px; align-self: stretch; }
.neuron-stage {
  /* the neuron reads as an object with breathing room, not a background */
  position: absolute; inset: -6% 0% 8% 4%; will-change: transform;   /* soma (57% down the image) lands level with the heading */
  /* soft edge fade so the image melts into the page background */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, #000 38%, rgba(0,0,0,0.55) 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, #000 38%, rgba(0,0,0,0.55) 68%, transparent 100%);
}
.neuron-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scroll-hint {
  position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--faint); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.scroll-hint i { width: 1px; height: 46px; background: linear-gradient(180deg, var(--cyan), transparent); display: block; position: relative; overflow: hidden; }
.scroll-hint i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, #fff, transparent); animation: hint 2.2s infinite; }
@keyframes hint { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 220px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); }

/* Clients strip (part of section 01 in the wireframe) */
.clients { padding: 30px 0 60px; position: relative; z-index: 2; }
.clients-row {
  display: flex; align-items: center; gap: 28px;
  padding: 26px 0; border-block: 1px solid var(--line);
}
.marquee { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: clamp(34px, 4vw, 58px); padding-inline-end: clamp(34px, 4vw, 58px); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
.clients-row .label { flex: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
/* Real client logos, straight on the page with no chip behind them. Each asset is a flat
   --logo-ink silhouette and carries its own width/height, sized for equal optical weight
   rather than equal height, so a wide lockup like EL AL does not shout over a compact mark. */
/* no width/height here: the img keeps the size its width/height attributes state, which is
   the optically balanced size the asset was exported at */

.client-logo {

  flex: none; display: block;

  opacity: .82; transition: var(--logo-ease), transform .35s var(--ease-out);
}
.client-logo:hover {
  opacity: 1; transform: translateY(-2px);
  filter: brightness(1.16) drop-shadow(0 0 14px rgba(88, 215, 255, .35));
}

/* =========================================================
   02 Services (round 3: flip cards, particle background)
   ========================================================= */
.services { position: relative; overflow: hidden; }
.services-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.services-particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.services-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(3,7,13,.2) 30%, rgba(3,7,13,.2) 70%, var(--bg) 100%); }
.services .container { position: relative; z-index: 1; }

.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* preserve-3d here too, so the hover lift does not flatten the flip */
.flip-card { position: relative; min-height: 420px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; perspective: 1500px; transition: transform .4s var(--ease-out); }
.flip-card:hover, .flip-card:focus-visible { transform: translateY(-8px); }
/* leaves on the first frame: an ease-in curve here reads as a delay before the card responds */
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.25,.6,.3,1); }
.flip-card:hover .flip-inner, .flip-card:focus-visible .flip-inner, .flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }

/* One card keeps hinting at itself: a short turn away and back, so a visitor who has
   not moved the mouse still learns the cards have a second side. It stops the moment
   the card is actually hovered, focused or tapped, handing over to the transition. */
.flip-card[data-peek] .flip-inner { animation: peek 7.5s cubic-bezier(.4,0,.2,1) 3s infinite; }
.flip-card[data-peek]:hover .flip-inner,
.flip-card[data-peek]:focus-visible .flip-inner,
.flip-card[data-peek].is-flipped .flip-inner { animation: none; }
/* about a tenth of the way into the turn: enough to show there is a back, not enough to read it */
@keyframes peek {
  0%, 4% { transform: rotateY(0); }
  11% { transform: rotateY(-18deg); }
  15% { transform: rotateY(-15deg); }
  26%, 100% { transform: rotateY(0); }
}
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); padding: 28px;
  background: linear-gradient(180deg, rgba(15, 31, 51, 0.7), rgba(11, 23, 38, 0.92));
  display: flex; flex-direction: column; overflow: hidden;
}
.flip-front::before {
  /* subtle accent field instead of an icon */
  content: ''; position: absolute; inset: -40% -40% auto auto; width: 75%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent, var(--cyan)) 0%, transparent 65%); opacity: .14; filter: blur(30px);
}
/* Card head: English category on one side, index on the other */
.svc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.svc-cat {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent, var(--cyan)); direction: ltr; text-align: right;
}
.flip-front .num, .flip-back .num { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--faint); direction: ltr; }
/* The front holds the prospect's own question and nothing else - no category, no index,
   no teaser. Everything that answers it lives on the back, which is the whole point of
   turning the card. The question therefore carries the card and is sized as a headline. */
.flip-front h3 {
  font-size: clamp(24px, 1.9vw, 30px); line-height: 1.28; margin-top: 4px;
  direction: rtl; text-align: right; font-weight: 700;
}

/* Flip cue: a single mark in the middle of the card, no label. It breathes on its own
   so the card reads as interactive before the pointer ever reaches it. */
.flip-cue {
  position: absolute; z-index: 2; inset: auto;
  left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  transition: scale .55s var(--ease-out), opacity .4s;
}
.cue-ring {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent, var(--cyan));
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent, var(--cyan)) 92%, #fff), var(--accent, var(--cyan)));
  color: #03070d;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 34px color-mix(in srgb, var(--accent, var(--cyan)) 38%, transparent);
  transition: box-shadow .45s, scale .55s var(--ease-out);
}
.cue-ring svg { width: 34px; height: 34px; animation: cue-spin 5s var(--ease-out) infinite; }
/* two rings leaving the mark, offset, so the pulse reads as a beacon rather than a blink */
.cue-ring::before, .cue-ring::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--accent, var(--cyan));
  animation: cue-pulse 3s var(--ease-out) infinite;
}
.cue-ring::after { animation-delay: 1.5s; }
@keyframes cue-pulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes cue-spin { 0%, 58% { transform: rotate(0); } 78%, 100% { transform: rotate(360deg); } }
.flip-card:hover .flip-cue, .flip-card:focus-visible .flip-cue { scale: 1.1; }
/* once the card is turning the beacon has done its job */
.flip-card:hover .cue-ring::before, .flip-card:hover .cue-ring::after,
.flip-card:focus-visible .cue-ring::before, .flip-card:focus-visible .cue-ring::after { opacity: 0; animation-play-state: paused; }
.flip-card:hover .cue-ring, .flip-card:focus-visible .cue-ring {
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 52px color-mix(in srgb, var(--accent, var(--cyan)) 55%, transparent);
}

.flip-back { transform: rotateY(180deg); border-color: var(--line-strong); }
.flip-back::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent, var(--cyan)), transparent); }
.flip-back .svc-cat { color: var(--accent, var(--cyan)); }
/* The answer to the question on the front: the value proposition, nothing else competing with it */
.flip-back .answer {
  margin-top: 26px; font-size: 17px; line-height: 1.75; color: var(--text);
}
.flip-back .link-arrow { margin-top: auto; padding-top: 18px; font-size: 15px; color: var(--accent, var(--cyan)); }
.flip-card[data-accent="cyan"] { --accent: var(--cyan); }
.flip-card[data-accent="blue"] { --accent: var(--blue); }
.flip-card[data-accent="gold"] { --accent: var(--gold); }
.flip-card[data-accent="violet"] { --accent: var(--violet); }

/* Card art (round 6b): the service image is the card's own background,
   very low opacity, masked so the copy at the top stays fully readable. */
.card-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.card-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--art-pos, 50% 50%);
  opacity: .26; transform: scale(1.02);
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .7s;
  /* full-bleed dark scenes (round 7): screen-blend keeps the card surface, the scene reads as light on it */
  mix-blend-mode: screen;
  /* fade out toward the top so the title/description keep their contrast */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 24%, #000 52%, #000 90%, rgba(0,0,0,.4) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 24%, #000 52%, #000 90%, rgba(0,0,0,.4) 100%);
}
.card-art::after {
  /* local glow + bottom blend into the card */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 66%, rgba(0,217,255,.14), rgba(118,92,255,.05) 55%, transparent 78%),
    linear-gradient(to bottom, transparent 55%, rgba(11,23,38,.55) 100%);
  opacity: .9; transition: opacity .7s;
}
.flip-card[data-accent="cyan"] .flip-front { --art-pos: 50% 42%; }   /* network sphere sits in the upper half of the scene */
.flip-card[data-accent="blue"] .flip-front { --art-pos: 50% 46%; }   /* central glass cube */
.flip-card[data-accent="gold"] .flip-front { --art-pos: 56% 50%; }   /* the team around the table */
/* the cue is positioned on its own (centred, absolute), so it is excluded here */
.flip-front > *:not(.card-art):not(.flip-cue) { position: relative; z-index: 1; }
.flip-card:hover .card-art img { opacity: .34; transform: scale(1.06); }
.flip-card:hover .card-art::after { opacity: 1; }
.flip-card:hover .flip-front, .flip-card:hover .flip-back {
  border-color: rgba(88,215,255,.4);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 24px rgba(0,217,255,.07), inset 0 0 22px rgba(0,217,255,.04);
}

/* per-card micro effects (CSS only, whisper-quiet) */
.flip-card[data-accent="cyan"] .card-art::after { animation: art-pulse 6s ease-in-out infinite; }
@keyframes art-pulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.art-spark { display: none; }
.flip-card[data-accent="cyan"] .art-spark {
  display: block; position: absolute; z-index: 1; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 2px rgba(0,217,255,.8); opacity: 0;
  left: 32%; top: 52%; animation: art-spark 7s ease-in-out infinite; pointer-events: none;
}
@keyframes art-spark {
  0%, 55%, 100% { opacity: 0; transform: translate(0, 0); }
  60% { opacity: .9; transform: translate(0, 0); }
  72% { opacity: .9; transform: translate(80px, 34px); }
  78% { opacity: 0; transform: translate(108px, 46px); }
}
.flip-card[data-accent="blue"] .card-art img { animation: art-flow 5.5s ease-in-out infinite; }
@keyframes art-flow { 0%, 100% { opacity: .21; } 45% { opacity: .27; } 70% { opacity: .23; } }
.art-scan { display: none; }
.flip-card[data-accent="gold"] .art-scan {
  display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 42px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0,217,255,.09), transparent);
  animation: art-scan 6s ease-in-out infinite; opacity: 0;
}
@keyframes art-scan {
  0%, 18% { top: 28%; opacity: 0; }
  28% { opacity: 1; }
  70% { opacity: 1; }
  80%, 100% { top: 92%; opacity: 0; }
}
@media (max-width: 640px) {
  .card-art img { opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card .card-art::after, .flip-card .card-art img, .flip-card .art-spark, .flip-card .art-scan { animation: none; }
  .art-spark, .art-scan { display: none !important; }
}

/* =========================================================
   05 Projects (round 3: wide image bands, hover reveal)
   ========================================================= */
.projects { display: grid; gap: 18px; }
.project {
  position: relative; display: block; min-height: 300px; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: #050b14;
  transition: border-color .4s, box-shadow .5s;
}
.project:hover { border-color: var(--line-strong); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.project > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8;
  transform: scale(1.02); transition: transform 1.1s var(--ease-out), opacity .6s, filter .6s;
}
.project:hover > img { transform: scale(1.08); opacity: .5; filter: saturate(1.1); }
.project-shade { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(3,7,13,.9) 0%, rgba(3,7,13,.55) 45%, rgba(3,7,13,.08) 100%); transition: background .5s; }
.project-text { position: relative; z-index: 1; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: center; padding: 36px clamp(24px, 4vw, 56px); max-width: 640px; }
.project .industry { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.project .org { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 10px; direction: ltr; text-align: right; }
/* client logo beside the name: the same ink silhouette as the marquee, no chip */
.project .org-logo { display: block; width: auto; height: auto; max-height: 24px; max-width: 104px; object-fit: contain; opacity: .85; transition: var(--logo-ease); }
.project:hover .org-logo, .project:focus-visible .org-logo { opacity: 1; filter: brightness(1.16); }
.project h4 {
  font-size: clamp(22px, 2.2vw, 30px); margin-top: 8px; line-height: 1.25;
  /* reserve two lines' worth of height always, so a one-line title doesn't make its
     card shorter than a neighboring two-line title - all three bands stay the same height */
  min-height: calc(1.25em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-more { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(14px); transition: grid-template-rows .6s var(--ease-out), opacity .45s, transform .6s var(--ease-out); }
.project-more > p { min-height: 0; }
.project:hover .project-more, .project:focus-visible .project-more { grid-template-rows: 1fr; opacity: 1; transform: none; }
.project-more p { color: var(--muted); font-size: 15px; line-height: 1.65; margin-top: 14px; max-width: 56ch; overflow: hidden; }
.project-more .kpis { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.project-more .kpis strong { display: block; font-size: 22px; color: #fff; direction: ltr; text-align: right; }
.project-more .kpis span { font-size: 13px; color: var(--muted); }
.project-more .link-arrow { margin-top: 16px; }
.project.placeholder > img { opacity: .5; }
.projects-cta { display: flex; justify-content: center; margin-top: 34px; }
@media (hover: none) {
  /* touch devices: no hover, so project details are always visible */
  .project-more { grid-template-rows: 1fr; opacity: 1; transform: none; }
  .project > img { opacity: .45; }
}

.partners { display: flex; align-items: center; gap: 26px; margin-top: 44px; flex-wrap: wrap; }
.partners .label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.partners .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); min-width: 60px; }
.partners .names { display: flex; gap: 12px; flex-wrap: wrap; }
.partner {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(7,17,30,.55); color: var(--muted); font-weight: 700; font-size: 15px; direction: ltr;
  transition: color .3s, border-color .3s, background .3s, transform .4s var(--ease-out), box-shadow .4s;
}
.partner:hover { color: #fff; border-color: var(--line-strong); background: rgba(22,139,255,.10); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
/* Partner marks: the ink version by default, the brand-colour version cross-faded in on
   hover. These four are bright enough to stay legible in colour on the dark background,
   which is why they get the colour reveal and the client logos do not. */
.p-mark { position: relative; flex: none; width: 22px; height: 22px; }
.p-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .35s; }
.p-mark .c { opacity: 0; }
.partner:hover .p-mark .c, .partner:focus-visible .p-mark .c { opacity: 1; }
.partner:hover .p-mark .m, .partner:focus-visible .p-mark .m { opacity: 0; }

/* =========================================================
   03 About
   ========================================================= */
.about {
  /* soft color field so the section does not read as flat black */
  background:
    radial-gradient(55% 70% at 22% 55%, rgba(22, 139, 255, 0.12), transparent 62%),
    radial-gradient(40% 55% at 88% 18%, rgba(120, 87, 255, 0.10), transparent 60%),
    radial-gradient(50% 40% at 60% 100%, rgba(33, 226, 195, 0.06), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(7, 17, 30, 0.55) 45%, transparent 100%);
}
.about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
.about-copy .lead { margin-top: 20px; }
.about-copy .lead + .lead { margin-top: 16px; }
.about-copy .link-arrow { margin-top: 26px; font-size: 17px; }
.about-visual { position: relative; }
.about-visual::before { content: ''; position: absolute; inset: 12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(22,139,255,.35), transparent 70%); filter: blur(34px); }
.about-visual .frame { aspect-ratio: 3 / 2; }
.stack-frame { background: radial-gradient(90% 80% at 50% 45%, #0a1426 0%, #060d19 55%, #030811 100%); }
.stack-frame::after { background: none; }
.stack-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.about-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.about-tags span { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; direction: ltr; color: var(--text); background: rgba(7,17,30,.75); border: 1px solid var(--line-strong); }
.about-tags span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-inline-end: 8px; box-shadow: 0 0 10px var(--cyan); vertical-align: middle; }

/* =========================================================
   04 Metrics
   ========================================================= */
.metrics { padding-block: clamp(30px, 4vw, 50px) clamp(70px, 8vw, 110px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { padding: 28px 26px; border-radius: 18px; border: 1px solid var(--line); background: rgba(7,17,30,.55); position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .6; }
.stat .pre { font-size: 13px; letter-spacing: .12em; color: var(--faint); font-weight: 700; }
.stat strong { display: block; font-size: 56px; line-height: 1; font-weight: 800; color: #fff; direction: ltr; text-align: right; letter-spacing: -.02em; margin-top: 6px; }
.stat strong .suffix { font-size: 28px; color: var(--cyan); }
.stat b { display: block; font-size: 17px; margin-top: 10px; }
.stat > span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.stat.gold strong { color: var(--gold); }
.stat.gold::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* =========================================================
   06 Testimonials
   ========================================================= */
.testimonials { position: relative; overflow: hidden; }
.tslider { position: relative; max-width: 960px; margin-inline: auto; }
.tslider .track { display: grid; }
.tslide {
  grid-area: 1 / 1; opacity: 0; transform: translateX(-24px) scale(.98); pointer-events: none;
  transition: opacity .6s, transform .8s var(--ease-out);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,31,51,.7), rgba(11,23,38,.9)); position: relative;
}
.tslide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.tslide .quote-mark { position: absolute; top: 18px; left: 30px; font-size: 120px; line-height: 1; color: rgba(88,215,255,.15); font-weight: 800; }
.tslide blockquote { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.5; font-weight: 500; font-style: italic; color: var(--text); }
.tslide .who { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.tslide .avatar { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 11px; color: var(--faint); background: rgba(3,7,13,.5); }
.tslide .who b { display: block; font-size: 16px; }
.tslide .who span { font-size: 14px; color: var(--muted); }
.tnav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 26px; }
.tnav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(7,17,30,.6); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: border-color .3s, background .3s; }
.tnav button:hover { border-color: var(--cyan); background: rgba(88,215,255,.1); }
.tnav button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.tnav .dots { display: flex; gap: 8px; }
.tnav .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background .3s, transform .3s; }
.tnav .dots i.is-active { background: var(--cyan); transform: scale(1.3); }

/* =========================================================
   07 Careers
   ========================================================= */
.careers-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.careers-copy .lead { margin-top: 20px; }
.careers-copy .btn { margin-top: 30px; }
.careers-visual .frame { aspect-ratio: 16 / 11; }
.careers-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.careers-visual .frame-badge { position: absolute; z-index: 1; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(3,7,13,.6); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; color: var(--text); backdrop-filter: blur(6px); }
.careers-visual .frame-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.perks span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 600; }

/* =========================================================
   08 Contact
   ========================================================= */
.contact { position: relative; overflow: hidden; }
.contact-visual { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-visual .neuron-stage {
  /* small and crisp, bottom-left, never taller than the section */
  inset: auto 2% 2% auto; width: 26%; aspect-ratio: 1080 / 1222; max-height: 70%; opacity: .7;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
}
.contact .container { position: relative; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: start; }
.contact-copy .lead { margin-top: 18px; }
.contact-direct { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.contact-direct .label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 14px; }
.contact-direct a, .contact-direct span { display: flex; align-items: center; gap: 12px; font-size: 18px; margin-top: 12px; }
.contact-direct svg { width: 18px; height: 18px; stroke: var(--cyan); fill: none; stroke-width: 1.8; flex: none; }
.contact-direct a:hover { color: var(--cyan); }
.form-card { padding: clamp(24px, 3vw, 40px); border-radius: 26px; border: 1px solid var(--line); background: rgba(7,17,30,.7); backdrop-filter: blur(10px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(3,7,13,.6); color: var(--text); font-size: 16px; outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(88,215,255,.12); }
.field textarea { min-height: 130px; resize: vertical; }
.consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.consent input { margin-top: 5px; accent-color: var(--gold); width: 16px; height: 16px; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-actions small { color: var(--faint); font-size: 13px; }

/* =========================================================
   Footer
   ========================================================= */
.footer { position: relative; padding: 70px 0 30px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(7,17,30,.4), rgba(7,17,30,.9)); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: 40px; }
.footer .brand img { height: 80px; }
.footer .tagline { color: var(--muted); margin-top: 18px; max-width: 40ch; font-size: 15px; }
.footer .addr { margin-top: 18px; display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.footer .addr a:hover { color: var(--cyan); }
.footer h5 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; font-weight: 700; direction: ltr; text-align: right; }
.footer h5.he { direction: rtl; }
.footer h5 + ul + h5 { margin-top: 26px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { color: var(--muted); font-size: 15px; transition: color .3s; display: inline-flex; align-items: center; gap: 6px; }
.footer ul a:hover { color: var(--cyan); }
.footer ul a svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
.footer ul.en { justify-items: end; }
.footer ul.en a { direction: ltr; text-align: right; }
.footer .addr .en { text-align: right; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--cyan); }
.social { display: flex; gap: 10px; margin-top: 22px; }
.social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.social a:hover { border-color: var(--cyan); background: rgba(88,215,255,.08); }
.social svg { width: 16px; height: 16px; fill: var(--muted); }

/* =========================================================
   Flow line (round 5) - the connecting line drawn with scroll
   (pattern: saronamarket / delibroom). Weaves behind content:
   section containers get z-index 2, the line sits at z-index 1.
   ========================================================= */
.flowline { position: absolute; top: 0; left: 0; right: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.flowline svg { display: block; width: 100%; height: 100%; }
.flow-ghost { stroke: rgba(120, 190, 255, 0.10); stroke-width: 1.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.flow-glow { stroke: url(#flowGrad); stroke-width: 7; opacity: .38; stroke-linecap: round; }
.flow-main { stroke: url(#flowGrad); stroke-width: 2.2; stroke-linecap: round; }
.flow-node .n-dot { fill: #0b1726; stroke: rgba(120,190,255,.5); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.flow-node .n-ring { fill: none; stroke: rgba(88,215,255,.0); stroke-width: 1.2; transition: stroke .4s; }
.flow-node.is-lit .n-dot { fill: var(--cyan); stroke: #fff; }
.flow-node.is-lit .n-ring { stroke: rgba(88,215,255,.5); animation: flow-ring 1.8s ease-out infinite; }
@keyframes flow-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.flow-node.is-lit .n-ring { transform-box: fill-box; transform-origin: center; }
.flow-tip .t-core { fill: #fff; }
.flow-tip .t-halo { fill: rgba(88,215,255,.22); }
.flow-tip.is-done .t-halo { fill: rgba(246,182,22,.30); }
.flow-tip.is-done .t-core { fill: var(--gold); }
/* content rides above the line; section backgrounds stay below it */
.section .container, .clients .container, .hero .container, .footer .container { position: relative; z-index: 2; }
body { position: relative; }
@media (prefers-reduced-motion: reduce) { .flow-node.is-lit .n-ring { animation: none; } }

/* Seamless section blending (round 5): no hard borders, soft color fields */
.section-divider { border-top: none; }
.metrics {
  background: radial-gradient(60% 90% at 78% 30%, rgba(22,139,255,.07), transparent 65%);
}
.cases {
  background:
    radial-gradient(50% 60% at 12% 20%, rgba(120,87,255,.06), transparent 60%),
    radial-gradient(55% 70% at 88% 75%, rgba(22,139,255,.08), transparent 62%);
}
.testimonials { background: radial-gradient(55% 80% at 50% 15%, rgba(22,139,255,.06), transparent 65%); }
.careers { background: radial-gradient(60% 80% at 25% 60%, rgba(33,226,195,.05), transparent 65%); }
.contact { background: radial-gradient(55% 75% at 80% 30%, rgba(246,182,22,.05), transparent 62%); }

/* Latin headings keep LTR reading order but stay right-aligned like the rest of the RTL page */
.project-head h4.en { text-align: right; }

/* Reveal fallback (GSAP animates .reveal into place) */
.reveal { opacity: 0; transform: translateY(28px); }
.no-js .reveal { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .flip-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  :root { --header-h: 68px; }
  .hero .container { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding-block: 40px 0; }
  .hero-visual { height: 62vw; min-height: 380px; order: -1; margin-top: 10px; align-self: auto; }
  .neuron-stage { inset: 0 6%; }
  .hero-meta { gap: 22px; }
  .hero-meta strong { font-size: 24px; }
  .split-head, .about-grid, .careers-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-visual { display: none; }
}
@media (max-width: 640px) {
  :root { --body: 16px; }
  .btn { padding: 13px 20px; font-size: 16px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-meta { flex-wrap: wrap; }
  .flip-grid { grid-template-columns: 1fr; }
  /* the cue now sits dead centre, so the card needs room for a four-line question above it */
  .flip-card { min-height: 464px; }
  .project-text { justify-content: flex-end; padding-bottom: 26px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat strong { font-size: 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .client-logo { transform: scale(.82); transform-origin: center; }
  .marquee-group { gap: 26px; padding-inline-end: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue-ring svg, .cue-ring::before, .cue-ring::after { animation: none; }
  .cue-ring::after { opacity: .45; }
  .cue-ring::before { opacity: 0; }
  .flip-card[data-peek] .flip-inner { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}