/* ═══════════════════════════════════════════
   AIO AGENCY - DESIGN SYSTEM v2
   Exaggerated Minimalism × Modern Dark Cinema
   ═══════════════════════════════════════════ */

:root {
  --bg-deep: #0A0A0B;
  --bg-base: #0A0A0B;
  --bg-elevated: #1C1C1E;
  --bg-card: #1C1C1E;
  --cream: #F5F5F0;
  --cream-muted: #D1D1D6;
  --cream-dim: #D1D1D6;
  --accent: #0047FF;
  --accent-light: #0047FF;
  --accent-glow: rgba(0, 71, 255, 0.2);
  --accent-soft: #0047FF;
  --accent-vivid: #0047FF;
  --divider: rgba(245, 245, 240, 0.1);
  --divider-strong: rgba(245, 245, 240, 0.18);

  --font-display: 'Zodiak', 'Frank Ruhl Libre', Georgia, serif;
  --font-display-he: 'Heebo', 'Rubik', -apple-system, sans-serif; /* 04.10: modern geometric sans for Hebrew headings (was Frank Ruhl Libre) */
  --font-body: 'Rubik', -apple-system, sans-serif;
  --font-body-he: 'Rubik', -apple-system, sans-serif;

  --section-pad: clamp(100px, 14vh, 180px);
  --container: min(1200px, 88vw);
  --easing: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* 20.10.2026: the system cursor is back (the custom cursor and its rule hiding the real one were removed) */

::selection {
  background: var(--accent);
  color: #fff;
}

html {
  scroll-behavior: smooth;
  background: var(--bg-deep);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body-he);
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(0, 71, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(41, 82, 204, 0.02) 0%, transparent 50%);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── PERFORMANCE: CONTENT-VISIBILITY ─── */
.hero { content-visibility: visible; } /* Always render above fold */

/* ─── NOISE TEXTURE OVERLAY ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* ─── AURORA / GRADIENT MESH ─── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.07;
  /* 20.10.2026: static soft light. A blur(120px) layer drifting forever made the browser
     repaint the whole screen on every frame; a radial gradient gives the same glow for free. */
  transform: scale(1.35);
}
.aurora-orb:nth-child(1) {
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, var(
), transparent);
  top: -10%; left: -5%;
  animation-duration: 22s;
}
.aurora-orb:nth-child(2) {
  width: 500px; height: 500px;
  background: radial-gradient(closest-side, var(
), transparent);
  bottom: -15%; right: -10%;
  animation-duration: 26s;
  animation-delay: -6s;
}
.aurora-orb:nth-child(3) {
  width: 400px; height: 400px;
  background: radial-gradient(closest-side, var(
), transparent);
  top: 40%; left: 50%;
  animation-duration: 20s;
  animation-delay: -10s;
  opacity: 0.04;
}
@keyframes auroraFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -40px) scale(1.1); }
  66%  { transform: translate(-30px, 50px) scale(0.95); }
  100% { transform: translate(40px, -20px) scale(1.05); }
}

/* ─── WCAG ACCESSIBILITY ─── */
.skip-nav {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
}

.skip-nav:focus {
  top: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[dir="rtl"] body {
  font-family: 'Heebo', 'Inter', -apple-system, sans-serif;
}

/* ─── AMBIENT BACKGROUND ─── */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.04;
  transform: scale(1.3);   /* static since 20.10.2026, see .aurora-orb */
}

.ambient-blob:nth-child(1) {
  width: 800px; height: 800px;
  background: radial-gradient(closest-side, var(
), transparent);
  top: -300px; left: -300px;
  animation-delay: 0s;
  opacity: 0.045;
}

.ambient-blob:nth-child(2) {
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, var(
), transparent);
  bottom: -200px; right: -200px;
  animation-delay: -10s;
  animation-duration: 28s;
  opacity: 0.035;
}

.ambient-blob:nth-child(3),
.ambient-blob:nth-child(4) {
  display: none;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* hero ::before reserved for video overlay */

/* ─── LAYOUT ─── */
.container { width: var(--container); margin: 0 auto; position: relative; z-index: 1; }

/* ─── NAVIGATION ─── */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  padding: 32px 0;
  transition: all 0.6s var(--easing);
}

nav.scrolled {
  padding: 18px 0;
  background: rgba(5, 5, 6, 0.8);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: 1px solid var(--divider);
}

.nav-inner {
  width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.nav-logo {
  position: absolute;
  right: 0;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--cream);
  text-decoration: none;
  transition: opacity 0.3s;
}
.nav-logo:hover { opacity: 0.8; }

.nav-links {
  display: flex;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: center;
  list-style: none;
  flex-wrap: nowrap;
}

/* Push lang + theme toggle to the left (RTL - opposite of logo) - DESKTOP ONLY.
   On mobile (<=1024px) these items are hidden from the drawer - see the
   mobile block further down. Without this media guard the absolute-positioning
   leaked into the mobile drawer and floated a pill on top of WORK. */
@media (min-width: 1025px) {
  .nav-links li:nth-last-child(-n+2) {
    position: absolute;
  }
  .nav-links li:nth-last-child(2) { left: 48px; }
  .nav-links li:nth-last-child(1) { left: 0; }
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.3s;
  cursor: pointer;
}
.nav-links a:hover { color: var(--cream); }

.nav-lang {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  padding: 7px 18px;
  border: 1px solid var(--divider-strong);
  transition: all 0.4s var(--easing) !important;
}
.nav-lang:hover {
  background: var(--cream) !important;
  color: var(--bg-base) !important;
  border-color: var(--cream) !important;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 101;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  transition: all 0.3s var(--easing);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── HERO VIDEO ─── */
.hero-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* Final opacity kept low (~0.45) so hero copy stays legible over the loop */
.hero-video-wrap video.loaded { opacity: 0.45; }

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.35) 40%, rgba(10,10,11,0.7) 80%, var(--bg-deep) 100%),
    radial-gradient(ellipse at center, transparent 25%, rgba(10,10,11,0.6) 100%);
  z-index: 1;
}

/* Placeholder shown when no video is loaded - uses the poster image so it paints instantly (Speed Index fix) */
.hero-video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.35) 0%, rgba(10,10,11,0.1) 50%, rgba(10,10,11,0.4) 100%),
    url('/assets/hero-loop-poster-2.webp') center center / cover no-repeat,
    var(--bg-deep);
  transition: opacity 1.5s ease;
}
@media (max-width: 768px) {
  .hero-video-placeholder {
    background:
      linear-gradient(180deg, rgba(10,10,11,0.35) 0%, rgba(10,10,11,0.1) 50%, rgba(10,10,11,0.4) 100%),
      url('/assets/hero-loop-mobile-poster-2.webp') center center / cover no-repeat,
      var(--bg-deep);
  }
}
/* Critical: hide placeholder once video finishes loading (fix added 2026-04-19 - HE was missing this) */
.hero-video-wrap video.loaded ~ .hero-video-placeholder { opacity: 0; pointer-events: none; }

.hero-particles { display: none; }

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 5vw;
  padding-top: 12vh;
  padding-bottom: 32px;
  position: relative;
  overflow: hidden;
}

/* #hero3d Three.js removed 2026-04-18 - awaiting video loop assets.
   .hero-video-wrap is preserved below and ready for <video> drop-in. */

.hero > *:not(.hero-video-wrap) {
  position: relative;
  z-index: 2;
}

.hero-overline {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 1s 0.2s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 130px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -1.5px;
  color: var(--cream);
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 1s 0.4s forwards;
}

.hero-title em {
  /* Hebrew has no italic tradition and FRL ships no italic face - a slant here
     is synthetic. Emphasis = weight (700 vs the title's 300) + brand blue. */
  font-style: normal;
  font-weight: 700;
  color: var(--accent-light);
}
/* Split-text override: let chars control their own opacity animation */
.hero-title.split-text {
  opacity: 1;
  animation: none;
}
/* Hebrew hero title: Heebo 800, tightened for the heavy weight */
.hero-title[dir="rtl"] {
  font-family: var(--font-display-he);
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--cream-muted);
  opacity: 0;
  animation: fadeUp 1s 0.6s forwards;
}

.hero-sub .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cream-dim);
  margin: 0 16px;
  vertical-align: middle;
}

.hero-body {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--cream-muted);
  max-width: 520px;
  margin-top: 56px;
  opacity: 0;
  animation: fadeUp 1s 0.8s forwards;
}

.hero-cta {
  margin-top: 48px;
  display: flex;
  gap: 20px;
  opacity: 0;
  animation: fadeUp 1s 1s forwards;
}

/* ─── DIRECT-CONTACT HERO CTA (2026-04-19) ─── */
.hero-cta-direct-wrap {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hero-cta-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: 0.85;
}
.hero-cta-direct {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.direct-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--divider-strong);
  border-radius: 100px;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: rgba(28, 28, 30, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.35s var(--easing);
  white-space: nowrap;
  cursor: pointer;
}
.direct-btn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: rgba(28, 28, 30, 0.75);
  box-shadow: 0 8px 24px rgba(0, 71, 255, 0.15);
}
.direct-btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.direct-btn-primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  box-shadow: 0 8px 32px rgba(0, 71, 255, 0.35);
}
.direct-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 18px 52px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s var(--easing);
  position: relative;
}

.btn-fill {
  background: var(--accent);
  color: #fff;
}
.btn-fill:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--cream-muted);
  border: 1px solid var(--divider-strong);
}
.btn-ghost:hover {
  color: var(--cream);
  border-color: var(--cream);
}

.hero-scroll {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: 0;
  animation: fadeUp 1s 1.2s forwards;
}

.scroll-line {
  width: 1px;
  height: 32px;
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--cream-dim), transparent);
  transform: translateY(-100%);
  animation: scrollDrop 2.5s 4; /* 21.10.2026: four drops, then rest (idle CPU on phones) */
}

/* 20.10.2026: transform instead of top - the old keyframes re-laid-out the hero on every frame */
@keyframes scrollDrop {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ─── DIVIDER ─── */
.divider {
  width: var(--container);
  margin: 0 auto;
  height: 1px;
  background: var(--divider);
  position: relative;
  overflow: hidden;
}
.divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-50%);
  transition: width 1.2s var(--easing);
  opacity: 0.4;
}
.divider.visible::after {
  width: 100%;
}

/* ─── SECTION SHARED ─── */
section { padding: var(--section-pad) 0; position: relative; z-index: 1; }

.label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

.heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: 20px;
  text-align: center;
}

.body-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--cream-muted);
  max-width: 560px;
  text-align: center;
  margin: 0 auto;
}

/* ─── MANIFESTO ─── */
.manifesto {
  text-align: center;
  padding: calc(var(--section-pad) * 1.2) 0;
}

.manifesto .label { justify-content: center; }
.manifesto .label::before { display: none; }

.manifesto-quote {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 400;
  /* Hebrew has no italic tradition and Frank Ruhl Libre ships no italic axis,
     so italic here would force a synthetic oblique. Upright is correct. */
  font-style: normal;
  line-height: 1.45;
  color: var(--cream);
  max-width: 860px;
  margin: 0 auto 48px;
}

.manifesto-quote span { color: var(--accent); }

.manifesto-body {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--cream-muted);
  max-width: 620px;
  margin: 0 auto;
}

/* ─── PILLARS ─── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--divider);
  margin-top: 64px;
}

.pillar {
  background: var(--bg-base);
  padding: 56px 40px;
  transition: all 0.5s var(--easing);
  position: relative;
  overflow: hidden;
}

.pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--easing);
}

.pillar:hover::before { transform: scaleX(1); }
.pillar:hover {
  background: var(--bg-elevated);
}

.pillar-num {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 400;
  color: rgba(232, 228, 217, 0.12);
  position: absolute;
  top: 16px;
  right: 28px;
  line-height: 1;
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 16px;
}

.pillar p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--cream-muted);
}

/* ─── COLLAPSIBLE SECTIONS ─── */
.section-toggle {
  cursor: pointer;
  position: relative;
  padding-right: 40px;
}
[dir="rtl"] .section-toggle { padding-right: 0; padding-left: 40px; }
.section-toggle::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  transition: transform 0.3s var(--easing);
}
[dir="rtl"] .section-toggle::after { right: auto; left: 0; }
.section-toggle.open::after {
  content: '−';
}
.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--easing), opacity 0.4s;
  opacity: 0;
}
.collapsible-content.open {
  opacity: 1;
}

/* ─── SERVICES ─── */
.services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 80px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0;
}

.service-cube {
  position: relative;
  perspective: 1000px;
  min-height: 260px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 16px;
}
.service-cube:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cube-front, .cube-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  transition: transform 0.6s var(--easing);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid var(--divider);
  overflow: hidden;
}

.cube-front {
  background: linear-gradient(145deg, rgba(30,30,30,0.9), rgba(14,14,14,0.95));
  gap: 20px;
}

.cube-back {
  background: linear-gradient(145deg, rgba(0,71,255,0.12), rgba(14,14,14,0.98));
  border-color: rgba(0,71,255,0.25);
  transform: rotateY(180deg);
}

.service-cube.flipped .cube-front { transform: rotateY(180deg); }
.service-cube.flipped .cube-back { transform: rotateY(0); }

.cube-icon {
  width: 72px;
  height: 72px;
  color: var(--accent);
  transition: transform 0.4s var(--easing);
}

.service-cube:hover .cube-front {
  box-shadow: 0 0 25px rgba(0,71,255,0.25), 0 0 60px rgba(0,71,255,0.1);
  border-color: rgba(0,71,255,0.35);
}
.service-cube:hover .cube-icon { transform: scale(1.1); }

.cube-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.3;
}

.cube-detail {
  font-size: 15px;
  font-weight: 400;
  color: var(--cream-muted);
  line-height: 1.7;
}

/* ─── OFFERS GRID ─── */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.offer-card {
  background: rgba(14,14,14,0.95);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 36px 28px;
  transition: all 0.4s var(--easing);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.offer-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  border-radius: 4px 0 0 4px;
}
.offer-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.4s;
}
.offer-card:hover::after { opacity: 0.12; }
/* Unique accent per card - brand blue family */
.offer-card:nth-child(1)::before { background: #0047FF; }
.offer-card:nth-child(1)::after { background: linear-gradient(135deg, #0047FF 0%, transparent 60%); }
.offer-card:nth-child(1) { border-color: rgba(0,71,255,0.2); }
.offer-card:nth-child(2)::before { background: #0047FF; }
.offer-card:nth-child(2)::after { background: linear-gradient(135deg, #0047FF 0%, transparent 60%); }
.offer-card:nth-child(2) { border-color: rgba(0,71,255,0.2); }
.offer-card:nth-child(3)::before { background: #0047FF; }
.offer-card:nth-child(3)::after { background: linear-gradient(135deg, #0047FF 0%, transparent 60%); }
.offer-card:nth-child(3) { border-color: rgba(0,71,255,0.2); }
.offer-card:nth-child(4)::before { background: #0047FF; }
.offer-card:nth-child(4)::after { background: linear-gradient(135deg, #0047FF 0%, transparent 60%); }
.offer-card:nth-child(4) { border-color: rgba(0,71,255,0.2); }
.offer-card:nth-child(5)::before { background: #0047FF; }
.offer-card:nth-child(5)::after { background: linear-gradient(135deg, #0047FF 0%, transparent 60%); }
.offer-card:nth-child(5) { border-color: rgba(0,71,255,0.2); }
.offer-card:nth-child(6)::before { background: #0047FF; }
.offer-card:nth-child(6)::after { background: linear-gradient(135deg, #0047FF 0%, transparent 60%); }
.offer-card:nth-child(6) { border-color: rgba(0,71,255,0.2); }
.offer-card:nth-child(1):hover { border-color: rgba(0,71,255,0.5); box-shadow: 0 0 40px rgba(0,71,255,0.15); }
.offer-card:nth-child(2):hover { border-color: rgba(0,71,255,0.5); box-shadow: 0 0 40px rgba(0,71,255,0.15); }
.offer-card:nth-child(3):hover { border-color: rgba(0,71,255,0.5); box-shadow: 0 0 40px rgba(0,71,255,0.15); }
.offer-card:nth-child(4):hover { border-color: rgba(0,71,255,0.5); box-shadow: 0 0 40px rgba(0,71,255,0.15); }
.offer-card:nth-child(5):hover { border-color: rgba(0,71,255,0.5); box-shadow: 0 0 40px rgba(0,71,255,0.15); }
.offer-card:nth-child(6):hover { border-color: rgba(0,71,255,0.5); box-shadow: 0 0 40px rgba(0,71,255,0.15); }
.offer-card:nth-child(1) .offer-cta { color: #0047FF; }
.offer-card:nth-child(2) .offer-cta { color: #0047FF; }
.offer-card:nth-child(3) .offer-cta { color: #0047FF; }
.offer-card:nth-child(4) .offer-cta { color: #0047FF; }
.offer-card:nth-child(5) .offer-cta { color: #0047FF; }
.offer-card:nth-child(6) .offer-cta { color: #0047FF; }
.offer-card.offer-wide { grid-column: 1 / -1; }
.offer-card:nth-child(7)::before { background: #0047FF; }
.offer-card:nth-child(7)::after { background: linear-gradient(135deg, #0047FF 0%, transparent 60%); }
.offer-card:nth-child(7) { border-color: rgba(209,209,214,0.2); }
.offer-card:nth-child(7):hover { border-color: rgba(209,209,214,0.5); box-shadow: 0 0 40px rgba(209,209,214,0.15); }
.offer-card:nth-child(7) .offer-cta { color: #0047FF; }
.offer-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--cream);
}
.offer-desc {
  font-size: 14px;
  color: var(--cream-muted);
  line-height: 1.7;
}
.offer-price {
  display: none;
  border-top: 1px solid var(--divider);
}
.offer-cta {
  display: inline-block;
  margin-top: auto;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}
.offer-cta:hover { color: var(--accent-light); }
@media (max-width: 768px) {
  .offers-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .offers-grid { grid-template-columns: 1fr; }
}

/* ─── PORTFOLIO (Vertical / Portrait Cards) ─── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
}

.portfolio-card {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
}

.portfolio-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: all 0.6s var(--easing);
}

.portfolio-card:hover .portfolio-bg {
  transform: scale(1.04);
}

.portfolio-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--easing);
}

.portfolio-card:hover .portfolio-bg-video {
  transform: scale(1.04);
}

.portfolio-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px;
  background: linear-gradient(180deg, transparent 40%, rgba(5,5,6,0.88) 100%);
  transition: all 0.4s;
}

.portfolio-card:hover .portfolio-content {
  background: linear-gradient(180deg, transparent 20%, rgba(5,5,6,0.95) 100%);
}

.portfolio-client {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 4px;
  line-height: 1.2;
}

.portfolio-type {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-muted);
}

.portfolio-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream);
  padding: 12px 24px;
  border: 1px solid rgba(245, 241, 230, 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(8, 8, 8, 0.3);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.4s var(--easing);
}

.portfolio-card:hover .portfolio-view {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ─── VIDEO LIGHTBOX ─── */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--easing), visibility 0.35s;
}
.video-lightbox[hidden] { display: none; }
.video-lightbox.active {
  opacity: 1;
  visibility: visible;
  display: flex;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.lightbox-container {
  position: relative;
  width: min(90vw, 900px);
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  z-index: 1;
  overflow: auto;
  padding-bottom: 16px;
}
.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 16px;
}
.lightbox-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--cream);
  font-weight: 500;
}
.lightbox-close {
  background: none;
  border: none;
  color: var(--cream-muted);
  font-size: 32px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.2s;
}
.lightbox-close:hover { color: var(--cream); }
.lightbox-video-wrap {
  position: relative;
  border-radius: 8px;
  overflow: visible;
  background: #000;
}
.lightbox-video-wrap video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  background: #000;
  border-radius: 8px;
}
/* Custom controls styling for dark theme */
.lightbox-video-wrap video::-webkit-media-controls-panel {
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
/* Disable download in controls */
.lightbox-video-wrap video::-webkit-media-controls-enclosure { overflow: hidden; }
.lightbox-video-wrap video::-internal-media-controls-download-button { display: none; }

/* ─── LIGHTBOX CUSTOM CONTROLS ─── */
.lightbox-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 10;
}
.fullscreen-btn,
.quality-btn {
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  transition: background 0.2s, border-color 0.2s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.fullscreen-btn:hover,
.quality-btn:hover {
  background: rgba(0,71,255,0.5);
  border-color: rgba(0,71,255,0.6);
}
.quality-label { font-weight: 600; letter-spacing: 0.5px; }
.quality-selector { position: relative; }
.quality-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: rgba(14,14,14,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
  min-width: 90px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.quality-menu[hidden] { display: none; }
.quality-option {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: right;
  transition: background 0.15s, color 0.15s;
}
.quality-option:hover { background: rgba(255,255,255,0.08); color: #fff; }
.quality-option.active { color: var(--accent); font-weight: 600; }

/* ─── INDUSTRIES MARQUEE ─── */
.industries-marquee {
  overflow: hidden;
  padding: 40px 0;
  position: relative;
  z-index: 1;
}

.industries-marquee::before,
.industries-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.industries-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-base), transparent);
}

.industries-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-base), transparent);
}

.ind-track {
  display: flex;
  gap: 0;
  animation: indScroll 45s linear infinite;
  width: max-content;
}

.ind-track:hover { animation-play-state: paused; }

.ind-item {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 400;
  font-style: italic;
  color: var(--cream-dim);
  white-space: nowrap;
  padding: 0 24px;
  transition: color 0.4s;
  cursor: default;
}

.ind-item:hover { color: var(--cream); }

.ind-dot {
  color: var(--accent);
  opacity: 0.3;
  font-size: clamp(18px, 2vw, 28px);
  padding: 0 24px;
  align-self: center;
  font-style: normal;
}

@keyframes indScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── PROCESS ─── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--divider);
  margin-top: 64px;
  counter-reset: step;
}

.step {
  background: var(--bg-base);
  padding: 48px 32px;
  counter-increment: step;
  position: relative;
  transition: all 0.4s var(--easing);
}

.step:hover { background: var(--bg-elevated); }

/* blue "loading line" on hover - matches the .pillar cards for uniformity (::before is the number here) */
.step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--easing);
  z-index: 4;
}
.step:hover::after { transform: scaleX(1); }

.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  color: rgba(232,228,217,0.12);
  display: block;
  margin-bottom: 24px;
  line-height: 1;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 12px;
}

.step p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--cream-muted);
}

/* ─── TESTIMONIAL CAROUSEL ─── */
.testimonial {
  text-align: center;
  padding: calc(var(--section-pad) * 1.2) 0;
}
.testimonial .label { justify-content: center; }
.testimonial .label::before { display: none; }

.testi-carousel {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  overflow: hidden;
}
.testi-track {
  display: flex;
  transition: transform 0.7s var(--easing);
}
.testi-slide {
  min-width: 100%;
  padding: 0 20px;
}
.testi-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--cream);
  margin: 0 auto 32px;
}
.testi-author {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 4px;
}
.testi-role {
  font-size: 13px;
  color: var(--cream-dim);
}
.testi-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.testi-arrow {
  background: none;
  border: 1px solid var(--divider-strong);
  color: var(--cream-muted);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--easing);
}
.testi-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}
.testi-dots {
  display: flex;
  gap: 0;
}
.testi-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  transition: all 0.3s var(--easing);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testi-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--divider-strong);
  transition: all 0.3s var(--easing);
}
.testi-dot.active::after {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

/* ─── CONTACT CTA ─── */
.cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 700px;
}
@media (max-width: 480px) {
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .cta-actions .btn {
    width: 100%;
    text-align: center;
  }
}

.cta {
  padding: calc(var(--section-pad) * 1.5) 0;
  text-align: center;
  position: relative;
}

.cta::before { display: none; }

.cta .label { justify-content: center; }
.cta .label::before { display: none; }

.cta-heading {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--cream);
  margin-bottom: 24px;
  position: relative;
}

.cta-heading em {
  /* Same emphasis language as the hero: upright, weight + brand blue. */
  font-style: normal;
  font-weight: 700;
  color: var(--accent-light);
}

.cta-body {
  font-size: 17px;
  font-weight: 400;
  color: var(--cream-muted);
  max-width: 480px;
  margin: 0 auto 56px;
  line-height: 1.8;
  position: relative;
}

/* ─── FLOATING SOCIAL BUTTONS ─── */
.floating-socials {
  position: fixed;
  bottom: 96px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9997;
  /* Hidden by default - revealed via JS once hero scrolls out of view */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s var(--easing), transform 0.4s var(--easing), bottom 0.4s var(--easing);
}
.floating-socials.revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
[dir="rtl"] .floating-socials { right: auto; left: 32px; }
.floating-socials a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #1C1C1E);
  border: 1px solid var(--divider, rgba(209,209,214,0.1));
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  text-decoration: none;
}
.floating-socials a:hover {
  transform: scale(1.1);
  background: var(--accent, #0047FF);
  border-color: var(--accent, #0047FF);
  box-shadow: 0 6px 24px rgba(0,71,255,0.3);
}
.floating-socials svg {
  width: 22px;
  height: 22px;
  fill: var(--cream, #F5F5F0);
}
@media (max-width: 480px) {
  .floating-socials { bottom: 100px; right: 16px; gap: 10px; }
  [dir="rtl"] .floating-socials { right: auto; left: 16px; }
  .floating-socials a { width: 42px; height: 42px; }
  .floating-socials svg { width: 18px; height: 18px; }
}

/* ─── INLINE SOCIAL ICONS ─── */
.btn .social-icon { width: 18px; height: 18px; fill: currentColor; vertical-align: -3px; margin-right: 6px; }
[dir="rtl"] .btn .social-icon { margin-right: 0; margin-left: 6px; }
.footer-links .social-icon { width: 14px; height: 14px; fill: currentColor; vertical-align: -2px; margin-right: 4px; }

/* ─── FOOTER ─── */
footer {
  padding: 64px 0 48px;
  border-top: 1px solid var(--divider);
  position: relative;
  z-index: 1;
}

.footer-inner {
  width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 6px;
  color: var(--cream);
  margin-bottom: 12px;
}

.footer-tagline {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--cream-muted);
  margin-bottom: 24px;
}

.footer-links {
  display: flex;
  gap: 28px;
}

.footer-links a {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--cream-muted);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--cream); }

.footer-right { text-align: right; }

.footer-email {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s;
  display: block;
  margin-bottom: 8px;
}
.footer-email:hover { color: var(--accent); }

.footer-copy {
  font-size: 11px;
  color: var(--cream-dim);
}

/* ─── MARQUEE ─── */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 20px 0;
  position: relative;
  z-index: 1;
}

.marquee-track {
  display: flex;
  gap: 80px;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  letter-spacing: 2px;
  color: var(--cream-dim);
  white-space: nowrap;
}

.marquee-item::before {
  content: '\2022';
  margin-right: 80px;
  color: var(--accent);
  opacity: 0.4;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Base reveal - fade up */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--easing), transform 1s var(--easing);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s var(--easing), transform 0.9s var(--easing);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s var(--easing), transform 0.9s var(--easing);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up from small */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s var(--easing), transform 1s var(--easing);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Blur-in reveal */
.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition: opacity 1.1s var(--easing), filter 1.1s var(--easing), transform 1.1s var(--easing);
}
.reveal-blur.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Parallax heading - moves slower on scroll (handled by JS) */
.parallax-heading {
  will-change: transform;
  transition: none;
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.36s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.48s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.6s; }
.reveal-stagger.visible > *:nth-child(n+7) { transition-delay: 0.72s; }

/* Counter stagger - alternate left/right */
.reveal-alt > *:nth-child(odd) {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
.reveal-alt > *:nth-child(even) {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
.reveal-alt.visible > *:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0s; }
.reveal-alt.visible > *:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.08s; }
.reveal-alt.visible > *:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.16s; }
.reveal-alt.visible > *:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.24s; }
.reveal-alt.visible > *:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.32s; }
.reveal-alt.visible > *:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }
.reveal-alt.visible > * { opacity: 1; transform: translateX(0); }
.reveal-alt.visible > *:nth-child(n+7) { transition-delay: 0.48s; }

/* ─── SPLIT TEXT ANIMATION ─── */
.split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(-40deg);
  transition: opacity 0.5s var(--easing), transform 0.5s var(--easing);
}
.split-text .ltr-group {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
}
.split-text.visible .char {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
/* Line-by-line reveal */
.split-lines .line-wrap {
  overflow: hidden;
  display: block;
}
.split-lines .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.8s var(--easing);
}
.split-lines.visible .line-inner {
  transform: translateY(0);
}

/* ─── MAGNETIC BUTTON ─── */
.btn-magnetic {
  transition: transform 0.3s var(--easing);
}

/* Horizontal line draw */
.line-draw {
  width: 0;
  height: 1px;
  background: var(--divider-strong);
  transition: width 1.2s var(--easing);
}
.line-draw.visible {
  width: 100%;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .services-header { grid-template-columns: 1fr; gap: 24px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service-cube { min-height: 220px; }
  .cube-icon { width: 48px; height: 48px; }
  .cube-title { font-size: 17px; }
  .cube-front { padding: 24px 16px; gap: 14px; }
  .cube-back { padding: 20px 16px; overflow: hidden; }
  .cube-detail { font-size: 13px; line-height: 1.5; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-client { font-size: 18px; }
  .lightbox-container { width: 95vw; }
  .lightbox-title { font-size: 15px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .hero-cta { flex-direction: column; align-items: center; }
  .ind-item { font-size: 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer-right { text-align: left; }
  .proof-strip { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
  .proof-card { padding: 32px 16px; }
  .trusted-logos { gap: 32px; }
  .cookie-banner { flex-direction: column; text-align: center; padding: 16px 20px; }
}

@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr; }
  .proof-strip { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
  .proof-card { padding: 24px 14px; }
  .proof-number { font-size: clamp(28px, 4vw, 40px); }
  .proof-sub { font-size: 11px; }
  .cube-icon { width: 40px; height: 40px; }
  .cube-title { font-size: 15px; }
  .service-cube { min-height: 180px; }
  .cube-front { padding: 20px 12px; gap: 10px; }
  .cube-back { padding: 16px 12px; }
  .cube-detail { font-size: 12px; line-height: 1.4; }
}

/* ─── PRICING CHATBOT ─── */
.pricing-section { text-align: center; }
.pricing-section .label { justify-content: center; }
.pricing-section .label::before { display: none; }

.chatbot-container {
  max-width: 680px;
  margin: 48px auto 0;
  background: var(--bg-elevated);
  border: 1px solid var(--divider-strong);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  position: relative;
}

.chatbot-header {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--divider);
}

.chatbot-restart {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--divider-strong);
  color: var(--cream-dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.3s;
}
.chatbot-restart:hover {
  color: var(--cream);
  border-color: var(--cream);
}

.chatbot-avatar {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.chatbot-header-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
}

.chatbot-header-sub {
  font-size: 11px;
  color: var(--cream-dim);
  font-weight: 300;
}

.chatbot-messages {
  padding: 24px 28px;
  min-height: 280px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.chat-msg {
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  animation: msgIn 0.4s var(--easing) forwards;
  opacity: 0;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-msg.msg-bot {
  background: var(--bg-card);
  border: 1px solid var(--divider-strong);
  color: var(--cream);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-msg.msg-user {
  background: rgba(0, 71, 255, 0.08);
  border: 1px solid rgba(0, 71, 255, 0.2);
  color: var(--cream-muted);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chat-opt-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--divider-strong);
  color: var(--cream-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s var(--easing);
}

.chat-opt-btn:hover {
  background: rgba(0, 71, 255, 0.1);
  border-color: var(--accent);
  color: var(--cream);
}

.chat-opt-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.chat-back-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--divider);
  color: var(--cream-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s var(--easing);
  opacity: 0.7;
}
.chat-back-btn:hover {
  opacity: 1;
  border-color: var(--cream-dim);
  color: var(--cream-muted);
}


.typing-indicator {
  display: flex;
  gap: 5px;
  padding: 12px 18px;
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--divider-strong);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  max-width: fit-content;
}

.typing-indicator span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: typingDot 1.2s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingDot {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}


.chat-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.chat-cta-row .btn {
  font-size: 11px;
  padding: 12px 28px;
}

/* ─── SCROLL PROGRESS BAR ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #6699ff);
  z-index: 10001;
  /* 20.10.2026: grows by scaleX from the script (composited), not by width */
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(0,71,255,0.4);
}

/* ─── VIDEO PREVIEW ON HOVER ─── */
.portfolio-card .preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--easing);
  z-index: 1;
  pointer-events: none;
}
.portfolio-card .preview-video.playing {
  opacity: 1;
}
.portfolio-card .portfolio-content,
.portfolio-card .portfolio-view {
  z-index: 2;
}

/* ─── BACK TO TOP ─── */
.back-to-top {
  position: fixed;
  bottom: 32px;
  left: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 71, 255, 0.15);
  border: 1px solid rgba(0, 71, 255, 0.3);
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden; /* keep the invisible button out of the tab order */
  transform: translateY(20px);
  transition: all 0.4s var(--easing);
  pointer-events: none;
  z-index: 9998;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: rgba(0, 71, 255, 0.3);
  border-color: var(--accent);
  transform: translateY(-3px);
}
[dir="rtl"] .back-to-top { left: auto; right: 32px; }
@media (max-width: 768px) {
  .back-to-top { left: 16px; bottom: 16px; width: 38px; height: 38px; font-size: 16px; }
  [dir="rtl"] .back-to-top { left: auto; right: 16px; }
}

/* ─── CHATBOT ENGAGEMENT BUBBLE ─── */
.chat-engage-bubble {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9985;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid rgba(245,245,240,0.12);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,71,255,0.25), 0 0 60px rgba(0,71,255,0.08);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  animation: robotFloat 3s ease-in-out 6 paused; /* 21.10.2026: six floats, then still */
}
/* Push bubble up when cookie banner is visible */
body:has(.cookie-banner.show) .chat-engage-bubble { bottom: 90px; }
body.cookie-open .chat-engage-bubble { bottom: 90px; }
.chat-engage-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  animation-play-state: running;
}
.chat-engage-bubble:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 36px rgba(0,71,255,0.45), 0 0 80px rgba(0,71,255,0.15);
  border-color: rgba(0,71,255,0.4);
}
@keyframes robotFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1); }
}
.robot-icon { width: 36px; height: 36px; }
.robot-icon svg { width: 100%; height: 100%; }
.robot-eye {
  animation: robotBlink 4s ease-in-out infinite;
}
.antenna-dot {
  animation: antennaGlow 2s ease-in-out infinite;
}
@keyframes robotBlink {
  0%, 42%, 46%, 100% { opacity: 1; r: 3.5; }
  44% { opacity: 0.8; r: 1; }
}
@keyframes antennaGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0,71,255,0.3)); opacity: 0.7; }
  50% { filter: drop-shadow(0 0 8px rgba(0,71,255,0.8)); opacity: 1; }
}
[dir="rtl"] .chat-engage-bubble { right: auto; left: 32px; }
@media (max-width: 480px) {
  .chat-engage-bubble { bottom: 20px; right: 16px; left: auto; width: 48px; height: 48px; }
  [dir="rtl"] .chat-engage-bubble { right: auto; left: 16px; }
  .robot-icon { width: 30px; height: 30px; }
}

/* ─── MOST POPULAR BADGE ─── */
.chat-opt-btn.most-popular {
  position: relative;
  border-color: var(--accent);
  background: rgba(0,71,255,0.08);
}
.chat-opt-btn.most-popular::after {
  content: '⭐ Most Popular';
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
[dir="rtl"] .chat-opt-btn.most-popular::after {
  content: '⭐ הכי פופולרי';
  right: auto;
  left: 12px;
}

/* ─── CHATBOT RTL ─── */
[dir="rtl"] .chatbot-container { text-align: right; }
[dir="rtl"] .chatbot-header { direction: rtl; }
[dir="rtl"] .chatbot-restart { margin-left: unset; margin-right: auto; }
[dir="rtl"] .chatbot-messages { direction: rtl; }
[dir="rtl"] .chat-msg { direction: rtl; }
[dir="rtl"] .chat-msg.msg-bot {
  align-self: flex-start;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
[dir="rtl"] .chat-msg.msg-user {
  align-self: flex-end;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 4px;
}
[dir="rtl"] .typing-indicator {
  align-self: flex-start;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
[dir="rtl"] .chat-options { direction: rtl; }
[dir="rtl"] .chat-cta-row { direction: rtl; }
[dir="rtl"] .chat-back-btn { direction: rtl; }

/* ─── RTL SUPPORT ─── */
[dir="rtl"] .nav-links { direction: rtl; }
[dir="rtl"] .hero-overline, [dir="rtl"] .hero-sub { direction: rtl; }
/* An auto margin absorbs all free space and silently beats justify-content,
   which pinned every RTL overline to the left edge while its heading sat right.
   Flex order already mirrors the dash in RTL, so no manual margins are needed. */
[dir="rtl"] .label::before { margin-right: 0; margin-left: 0; }
[dir="rtl"] .service-cube { direction: rtl; }
[dir="rtl"] .services-header { text-align: right; }
[dir="rtl"] .footer-right { text-align: left; }
[dir="rtl"] .faq-question { text-align: right; }
[dir="rtl"] .faq-icon { margin-left: 0; margin-right: 20px; }

/* ─── FAQ SECTION ─── */
section#faq { scroll-margin-top: 100px; }
.faq-list { max-width: 800px; margin: 48px auto 0; }
.faq-item { border-bottom: 1px solid var(--divider); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--cream);
  text-align: left;
  transition: color 0.3s;
}
[dir="rtl"] .faq-question { text-align: right; }
.faq-question:hover { color: var(--accent-light); }
.faq-icon {
  font-size: 24px;
  color: var(--accent);
  transition: transform 0.3s var(--easing);
  flex-shrink: 0;
  margin-left: 20px;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--easing), padding 0.4s var(--easing);
  padding: 0 0;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 0 24px;
}
.faq-answer p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--cream-muted);
}

/* ─── NICHES GRID (post-Work · specialized verticals · 2026-04-24) ─── */
.niches-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 48px auto 0;
}
.niche-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--divider-strong);
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.45s var(--easing), border-color 0.45s ease;
  --spot-x: 50%;
  --spot-y: 50%;
}
.niche-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 71, 255, 0.55);
}
.niche-card picture { display: contents; }
.niche-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--easing), filter 0.45s ease;
  z-index: 0;
}
.niche-card:hover img {
  transform: scale(1.04);
  filter: brightness(0.82) contrast(1.05);
}
.niche-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.20) 0%, rgba(10,10,11,0.72) 100%);
  z-index: 1;
  transition: background 0.45s ease;
  pointer-events: none;
}
.niche-card:hover::before {
  background: linear-gradient(180deg, rgba(10,10,11,0.28) 0%, rgba(10,10,11,0.80) 100%);
}
.niche-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    320px circle at var(--spot-x) var(--spot-y),
    rgba(0, 71, 255, 0.28) 0%,
    rgba(0, 71, 255, 0.10) 35%,
    transparent 70%
  );
}
.niche-card:hover::after {
  opacity: 1;
}
.niche-label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.niche-label-he {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.2;
  letter-spacing: 0;
  direction: rtl;
}
.niche-label-en {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-muted);
  opacity: 0.78;
}
.niche-card.niche-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-elevated);
  border: 1px dashed var(--divider-strong);
  text-align: center;
}
.niche-card.niche-cta::before,
.niche-card.niche-cta::after {
  display: none;
}
.niche-card.niche-cta:hover {
  border-color: var(--accent);
  border-style: solid;
}
.niche-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.niche-cta-he {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
  direction: rtl;
}
.niche-cta-en {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-muted);
  opacity: 0.78;
}
.niche-cta-arrow {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent);
  transition: transform 0.35s var(--easing);
}
.niche-card.niche-cta:hover .niche-cta-arrow {
  transform: translateX(4px);
}
@media (max-width: 1024px) {
  .niches-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .niches-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 36px; }
  .niche-label-he { font-size: 16px; }
  .niche-label-en { font-size: 10px; letter-spacing: 1.5px; }
}
@media (max-width: 420px) {
  .niches-grid { grid-template-columns: 1fr; }
}

/* Scroll margin for anchor links */
section#about, section#services, section#work, section#niches, section#pricing, section#contact, section#faq, #chatbot {
  scroll-margin-top: 100px;
}

/* keyboard focus ring for interactive work cards */
.portfolio-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Decorative elements hidden from accessibility */
.ambient[aria-hidden="true"],
.hero-particles[aria-hidden="true"],
.scroll-line[aria-hidden="true"],
.pillar-num[aria-hidden="true"] {
  /* These will be marked with aria-hidden in HTML */
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── LIGHT MODE ─── */
[data-theme="light"] {
  --bg-deep: #F5F5F0;
  --bg-base: #F5F5F0;
  --bg-elevated: rgba(209, 209, 214, 0.28);
  --bg-card: rgba(209, 209, 214, 0.4);
  --cream: #0A0A0B;
  --cream-muted: rgba(28, 28, 30, 0.78);
  --cream-dim: #7A7A7A;
  --divider: rgba(20, 20, 20, 0.08);
  --divider-strong: rgba(20, 20, 20, 0.15);
}
[data-theme="light"] body::before { opacity: 0.02; }
[data-theme="light"] .aurora-orb { opacity: 0.04; }
[data-theme="light"] .nav { background: rgba(250, 250, 248, 0.85); }
[data-theme="light"] .loader { background: #050506; } /* the brand film is always dark */
[data-theme="light"] .hero-video-placeholder { background: linear-gradient(135deg, rgba(209, 209, 214, 0.4) 0%, rgba(209, 209, 214, 0.6) 100%); }
[data-theme="light"] .hero-video-overlay { background: linear-gradient(180deg, rgba(250,250,248,0.3) 0%, rgba(250,250,248,0.95) 100%); }
[data-theme="light"] .btn-fill { background: var(--accent); color: #fff; }
[data-theme="light"] .chatbot-container { border-color: var(--divider-strong); }
[data-theme="light"] .cookie-banner { background: rgba(250,250,248,0.95); }
[data-theme="light"] .portfolio-content { background: linear-gradient(transparent 0%, rgba(245,243,239,0.9) 100%); }
[data-theme="light"] .cube-front { background: linear-gradient(145deg, rgba(209, 209, 214, 0.4), rgba(209, 209, 214, 0.6)); }
[data-theme="light"] .cube-back { background: linear-gradient(145deg, rgba(0,71,255,0.08), rgba(209, 209, 214, 0.4)); }
[data-theme="light"] .cube-title { color: #0A0A0B; }
[data-theme="light"] .cube-back p, [data-theme="light"] .cube-back li { color: rgba(28, 28, 30, 0.82); }
[data-theme="light"] .proof-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .proof-card:hover { background: rgba(0,71,255,0.04); border-color: rgba(0,71,255,0.25); }
[data-theme="light"] .proof-sub { color: rgba(28, 28, 30, 0.7); }
[data-theme="light"] .pillar { background: var(--bg-base); }
[data-theme="light"] .pillar:hover { background: rgba(209, 209, 214, 0.4); }
[data-theme="light"] .pillar-num { color: rgba(0,0,0,0.06); }
[data-theme="light"] .section-toggle::after { color: var(--cream); }
[data-theme="light"] .step { background: var(--bg-base); }
[data-theme="light"] .step:hover { background: rgba(209, 209, 214, 0.4); }
[data-theme="light"] .step::before { color: rgba(0,0,0,0.06); }
[data-theme="light"] .step h3 { color: #0A0A0B; }
[data-theme="light"] .step p { color: rgba(28, 28, 30, 0.78); }

/* Light theme - Offer cards */
[data-theme="light"] .offer-card {
  background: #F5F5F0;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
[data-theme="light"] .offer-card:hover {
  border-color: rgba(0,71,255,0.35);
  box-shadow: 0 4px 20px rgba(0,71,255,0.1);
}
[data-theme="light"] .offer-card.featured {
  background: #F5F5F0;
  border-color: rgba(0,71,255,0.3);
  box-shadow: 0 2px 16px rgba(0,71,255,0.08);
}
[data-theme="light"] .offer-name { color: #0A0A0B; }
[data-theme="light"] .offer-desc { color: rgba(28, 28, 30, 0.82); }
[data-theme="light"] .offer-price { color: var(--accent); border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .offer-cta { color: var(--accent); }

/* Light theme - Theme toggle button */
[data-theme="light"] .theme-toggle {
  border-color: rgba(0,0,0,0.2);
  color: rgba(28, 28, 30, 0.82);
}
[data-theme="light"] .theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Light theme - Scrolled header */
[data-theme="light"] nav.scrolled {
  background: rgba(250, 250, 248, 0.92);
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] nav.scrolled .nav-logo { color: #0A0A0B; }
[data-theme="light"] nav.scrolled .nav-links a { color: rgba(28, 28, 30, 0.78); }
[data-theme="light"] nav.scrolled .nav-links a:hover { color: #0A0A0B; }
[data-theme="light"] nav.scrolled .theme-toggle {
  border-color: rgba(0,0,0,0.2);
  color: rgba(28, 28, 30, 0.82);
}
[data-theme="light"] nav.scrolled .nav-lang {
  border-color: rgba(0,0,0,0.15);
  color: rgba(28, 28, 30, 0.78);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--divider-strong);
  color: var(--cream-muted);
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--easing);
  cursor: pointer;
  margin-inline-start: 8px;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Mobile quick-access buttons - CENTERED between logo and hamburger.
   No margins so they sit in the nav-inner's justify-content:center flex slot. */
.nav-mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
}
.nav-mobile-actions .mobile-theme {
  width: 32px; height: 32px;
  font-size: 14px;
  margin-left: 0;
}
.nav-mobile-actions .mobile-lang {
  font-size: 12px;
  letter-spacing: 1px;
  border: 1px solid var(--divider-strong);
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--cream-muted);
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .nav-mobile-actions { display: flex; }
}
.nav-links.open ~ .nav-mobile-actions { display: none !important; }

/* ─── LOADER ─── */
/* 2026-10-04 v4: the loading screen is the brand film - a Kling render of the
   real AIO wordmark (chrome, blue rim light, wet floor), 1:1, played muted
   from the poster frame. "AI Agency" settles under the mark; the blue hairline
   stretches to the full width and the curtain lifts to uncover the hero.
   Always dark, in both themes: it is a film, not a page. Reduced motion:
   poster only, plain fade. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.3s, opacity 0.01s linear 1.1s, visibility 0s linear 1.15s;
}
.loader.hidden {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-film {
  position: relative;
  width: min(100vw, 100vh, 1100px);
  aspect-ratio: 1 / 1;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1) 0.2s;
}
/* the wide and tall cuts fill the whole screen (cover-cropped a little on
   21:9 and on in-between ratios); the square cut keeps its frame */
.loader.is-wide .loader-film, .loader.is-tall .loader-film {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
}
.loader.is-wide .loader-film::before, .loader.is-wide .loader-film::after,
.loader.is-tall .loader-film::before, .loader.is-tall .loader-film::after { display: none; }
.loader.hidden .loader-film { transform: translateY(-18px) scale(1.03); }
.loader-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  /* the poster/first frame fades up from black so there is never a hard pop */
  opacity: 0;
  animation: loaderFilmIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
/* the clip's own black edges blend into the loader */
.loader-film::before, .loader-film::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  pointer-events: none;
}
.loader-film::before { left: 0; background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0)); }
.loader-film::after { right: 0; background: linear-gradient(270deg, #000, rgba(0, 0, 0, 0)); }
/* grounding: the bottom of the frame settles into black under the tag */
.loader::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.loader-tag {
  position: absolute;
  left: 0; right: 0;
  bottom: 8.5%;
  z-index: 2;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  direction: ltr;
  color: rgba(245, 245, 240, 0.9);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(10px);
  animation: loaderTag 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
.loader-line {
  position: absolute;
  left: 50%;
  bottom: 14%;
  z-index: 2;
  height: 1px;
  width: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px rgba(0, 71, 255, 0.55);
  /* progress: grows while the page loads, snaps to the full width when ready */
  animation: loaderProgress 3.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.loader.hidden .loader-line { width: 100vw; animation: none; transition: width 0.3s cubic-bezier(0.76, 0, 0.24, 1); }
@keyframes loaderProgress { from { width: 0; } to { width: 64vw; } }
@keyframes loaderFilmIn { to { opacity: 1; } }
@keyframes loaderTag { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) {
  .loader-film { width: 100vw; }
  .loader-tag { bottom: 9%; font-size: 14px; letter-spacing: 0.4em; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-video, .loader-tag, .loader-line { animation: none; }
  .loader-line { width: 64vw; }
  .loader-video { opacity: 1; }
  .loader-tag { opacity: 1; transform: none; }
  .loader-film { transition: none; }
  .loader { clip-path: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
  .loader.hidden { clip-path: none; }
}

/* ─── PROOF CARDS ─── */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.proof-card {
  background: rgba(245, 241, 230, 0.02);
  border: 1px solid var(--divider-strong);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  transition: all 0.4s var(--easing);
  position: relative;
  overflow: hidden;
}
.proof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.proof-card:hover {
  border-color: rgba(0, 71, 255, 0.3);
  background: rgba(0, 71, 255, 0.03);
  transform: translateY(-4px);
}
.proof-card:hover::before { opacity: 1; }
.proof-number {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 6px;
}
.proof-number .accent { color: var(--accent); }
.proof-headline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.proof-sub {
  font-size: 13px;
  color: var(--cream-dim);
  line-height: 1.5;
}
.proof-number.proof-text {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  letter-spacing: 1px;
}

/* ─── TRUSTED BY ─── */
.trusted-bar {
  text-align: center;
  padding: 56px 0;
}
.trusted-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 32px;
}
.trusted-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.trusted-logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--cream-muted);
  opacity: 0.5;
  transition: opacity 0.3s;
  letter-spacing: 1px;
}
.trusted-logo:hover { opacity: 1; }

/* ─── CASE STUDIES ─── */
.case-studies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}
.case-study-card {
  background: var(--bg-elevated);
  border: 1px solid var(--divider-strong);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s var(--easing), border-color 0.4s;
}
.case-study-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.case-study-visual {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.case-study-body {
  padding: 28px;
}
.case-study-tag {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.case-study-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream);
  margin: 10px 0 12px;
  font-weight: 500;
}
.case-study-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream-muted);
  margin-bottom: 20px;
}
.case-study-metrics {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}
.case-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-metric-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
}
.case-metric-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream-dim);
}

@media (max-width: 768px) {
  .case-studies-grid { grid-template-columns: 1fr; gap: 24px; }
  .case-study-visual { height: 150px; }
  .case-study-body { padding: 20px; }
  .case-study-title { font-size: 19px; }
}

/* ─── COOKIE CONSENT ─── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: rgba(14, 14, 14, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--divider);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transform: translateY(100%);
  transition: transform 0.5s var(--easing);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner.dismissed { transform: translateY(100%); }
.cookie-text {
  font-size: 13px;
  color: var(--cream-muted);
  line-height: 1.5;
  flex: 1;
}
.cookie-text a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-actions { align-items: center; }
.cookie-policy-link { color: var(--cream-dim, inherit); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-policy-link:hover { color: var(--accent); }
.cookie-btn {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.cookie-accept { background: var(--accent); color: #fff; }
.cookie-decline { background: transparent; color: var(--cream-muted); border: 1px solid var(--divider); }

/* ─── MOBILE RESPONSIVE ─── */
@media (max-width: 768px) {
  /* Header layout on mobile (RTL):
     RIGHT = logo (.nav-logo, already absolute right:0)
     CENTER = theme + language buttons (.nav-mobile-actions, flex-centered)
     LEFT = hamburger (.nav-hamburger, absolute left:0) */
  .nav-hamburger {
    display: flex;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: rgba(14, 14, 14, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    transition: right 0.4s var(--easing);
    z-index: 100;
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  }

  .nav-links li {
    display: block;
    width: 100%;
    text-align: center;
    position: static !important;
    left: auto !important;
  }

  .nav-links.open { right: 0; }

  .nav-links a {
    font-size: 18px !important;
    letter-spacing: 3px;
    display: inline-block;
    padding: 8px 0;
  }

  /* Theme + language toggles live in .nav-mobile-actions on mobile, NOT
     inside the slide-out drawer. Hide them from the drawer so only the five
     primary links (About/Services/Work/Pricing/Contact) show there. */
  .nav-links .nav-lang,
  .nav-links .theme-toggle {
    display: none !important;
  }

  /* Hero */
  .hero { padding-top: 20vh; padding-bottom: 24px; min-height: 100svh; }
  .hero-title { font-size: clamp(46px, 13vw, 68px) !important; letter-spacing: -1.5px; }
  .hero-overline { font-size: 11px; letter-spacing: 5px; margin-bottom: 24px; }
  .hero-sub { font-size: 12px; letter-spacing: 4px; }
  .hero-cta { flex-direction: column; gap: 12px; width: 100%; max-width: 280px; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .hero-cta-direct-wrap { max-width: 320px; }
  .hero-cta-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .direct-btn { width: 100%; justify-content: center; padding: 12px 14px; font-size: 13px; }
  .direct-btn span { letter-spacing: 0.02em; }
  .hero-cta-label { font-size: 10px; letter-spacing: 0.3em; }
  .hero-scroll { margin-top: 32px; }

  /* Sections */
  .container { width: 90vw; }
  section { padding: clamp(60px, 10vh, 100px) 0; }
  .heading { font-size: clamp(28px, 7vw, 42px) !important; }
  .label { font-size: 11px; }

  /* Pillars */
  .pillars-grid { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .pillar { padding: 32px 24px; }

  /* Services */
  .services-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .service-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .service-num { display: none; }
  .service-arrow { display: none; }
  .service-desc { display: block; font-size: 14px; line-height: 1.6; color: var(--cream-muted); }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .portfolio-card { aspect-ratio: 3/4; }
  .portfolio-client { font-size: 16px; }
  .portfolio-content { padding: 20px 16px; }

  /* Industries marquee */
  .industries-marquee { padding: 28px 0; }
  .ind-item { font-size: clamp(28px, 7vw, 40px) !important; }

  /* Process */
  .process-grid { grid-template-columns: 1fr 1fr; gap: 0; }

  /* Testimonial */
  .testi-quote { font-size: clamp(20px, 5vw, 30px) !important; }
  .manifesto-quote { font-size: clamp(20px, 5vw, 32px) !important; }

  /* Chatbot */
  .chatbot-container { margin-left: 0; margin-right: 0; border-radius: 12px; max-width: 100%; }
  .chatbot-messages { max-height: 55vh; padding: 20px; }
  .chat-opt-btn { font-size: 13px; padding: 12px 16px; min-height: 44px; }
  .chat-msg { max-width: 92%; font-size: 14px; }
  .chatbot-header { flex-wrap: wrap; gap: 8px; }
  .chatbot-restart { font-size: 10px; padding: 5px 10px; }

  /* FAQ */
  .faq-question { font-size: 16px; padding: 20px 0; }
  .faq-answer p { font-size: 15px; }

  /* CTA */
  .cta-heading { font-size: clamp(32px, 8vw, 52px) !important; }
  .cta-body { font-size: 15px; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 32px; }
  .footer-right { text-align: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; gap: 16px 20px; padding: 0 60px; }
  footer { padding-bottom: 32px; }

  /* Lead form in CTA */
  .cta-lead-form { width: 100% !important; }
}

@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(40px, 11vw, 56px) !important; }
  .btn { font-size: 13px; padding: 14px 24px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card { aspect-ratio: 16/10; }
  .trusted-logos { flex-direction: column; gap: 16px; }
  .proof-strip { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
  .proof-card { padding: 24px 12px; }
  .chatbot-messages { max-height: 50vh; padding: 16px; min-height: 220px; }
  .chat-opt-btn { font-size: 12px; padding: 11px 14px; width: 100%; text-align: center; }
  .chat-options { flex-direction: column; }
  .chat-msg { max-width: 95%; padding: 12px 14px; font-size: 13px; }
  .chatbot-header { padding: 14px 16px; }
  .chatbot-avatar { width: 30px; height: 30px; font-size: 12px; }
  .lightbox-controls { bottom: 8px; right: 8px; }
  .quality-btn, .fullscreen-btn { padding: 5px 8px; font-size: 11px; }
}

/* ─── TABLET (769px-1024px) ─── */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { width: 88vw; }
  .hero-title { font-size: clamp(48px, 7vw, 64px) !important; }
  .pillars-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .service-row { grid-template-columns: 40px 1fr 2fr 32px; }
  .lightbox-container { width: 90vw; }
  .chatbot-container { max-width: 90%; }
  .footer-inner { gap: 40px; }
}

/* ─── LARGE SCREENS (1440px+) ─── */
@media (min-width: 1440px) {
  .container { max-width: 1200px; }
  .hero-title { font-size: clamp(72px, 6vw, 96px) !important; }
  .hero-overline { font-size: 15px; letter-spacing: 10px; }
  .hero-sub { font-size: 16px; letter-spacing: 6px; }
  .heading { font-size: clamp(48px, 4vw, 64px) !important; }
  .label { font-size: 13px; letter-spacing: 5px; }
  .pillars-grid { gap: 2px; }
  .pillar { padding: 56px 48px; }
  .pillar h3 { font-size: 28px; }
  .pillar p { font-size: 17px; }
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
  .portfolio-card { aspect-ratio: 3/4; }
  .portfolio-client { font-size: 22px; }
  .service-row { padding: 32px 0; }
  .service-name { font-size: 22px; }
  .service-desc { font-size: 16px; }
  .testi-quote { font-size: 36px !important; }
  .chatbot-container { max-width: 740px; }
  .footer { padding: 80px 0 32px; }
  .lightbox-container { width: min(80vw, 1100px); }
  .proof-number { font-size: 56px; }
  .ind-item { font-size: 48px !important; }
}

/* ─── MOBILE: dedicated 9:16 portrait video served via <source media="..."> in the video tag ─── */
/* File: hero-loop-mobile.webm/.mp4 · 720×1280 · 1.3MB each · cinematic portrait crop */
/* No CSS override needed - the HTML <source media> does the switching. */

/* ─── ULTRAWIDE / TV (1920px+) ─── */
@media (min-width: 1920px) {
  .container { max-width: 1400px; }
  .hero-title { font-size: clamp(88px, 5.5vw, 120px) !important; }
  .hero-overline { font-size: 16px; letter-spacing: 12px; }
  .hero-sub { font-size: 18px; }
  .heading { font-size: clamp(56px, 3.5vw, 80px) !important; }
  .pillar { padding: 64px 56px; }
  .pillar h3 { font-size: 32px; }
  .pillar p { font-size: 18px; line-height: 1.8; }
  .service-name { font-size: 24px; }
  .service-desc { font-size: 17px; }
  .portfolio-client { font-size: 24px; }
  .testi-quote { font-size: 40px !important; }
  .manifesto-quote { font-size: 44px !important; }
  .cta-heading { font-size: 72px !important; }
  .cta-body { font-size: 20px; }
  .faq-question { font-size: 20px; }
  .faq-answer p { font-size: 17px; }
  .proof-number { font-size: 64px; }
  .ind-item { font-size: 56px !important; }
  .lightbox-container { width: min(70vw, 1400px); }
  .chatbot-container { max-width: 800px; }
}

/* ─── 4K / VERY LARGE (2560px+) ─── */
@media (min-width: 2560px) {
  .container { max-width: 1600px; }
  .hero-title { font-size: 140px !important; }
  .heading { font-size: 88px !important; }
  .hero-overline { font-size: 18px; letter-spacing: 14px; }
  body { font-size: 18px; }
  .nav-links a { font-size: 16px; }
  .pillar { padding: 72px 64px; }
  .pillar h3 { font-size: 36px; }
  .pillar p { font-size: 20px; }
}

/* ─── RTL SUPPORT ─── */
[dir="rtl"] .cta-lead-form input,
[dir="rtl"] .cta-lead-form textarea {
  text-align: right;
}

/* RTL mobile sidebar slides from left instead of right */
@media (max-width: 768px) {
  [dir="rtl"] .nav-links {
    right: auto;
    left: -100%;
    transition: left 0.4s var(--easing);
  }
  [dir="rtl"] .nav-links.open {
    left: 0;
    right: auto;
  }
}

/* Mobile sidebar backdrop overlay */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.4s var(--easing);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.nav-backdrop.show {
  display: block;
  opacity: 1;
}

/* ─── SAFE AREA INSETS (notched phones) ─── */
nav {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.hero {
  padding-left: max(5vw, env(safe-area-inset-left, 0));
  padding-right: max(5vw, env(safe-area-inset-right, 0));
}
.cookie-banner {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
  padding-left: max(32px, env(safe-area-inset-left, 0));
  padding-right: max(32px, env(safe-area-inset-right, 0));
}
footer {
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0));
}

/* ─── VERY SMALL SCREENS (320px) ─── */
@media (max-width: 360px) {
  .container { width: 94vw; }
  .hero-title { font-size: 36px !important; letter-spacing: -1px; }
  .hero-overline { font-size: 9px; letter-spacing: 3px; }
  .hero-sub { font-size: 10px; letter-spacing: 2px; }
  .hero-cta .btn { font-size: 12px; padding: 12px 16px; letter-spacing: 1.5px; }
  .heading { font-size: 24px !important; }
  .label { font-size: 10px; letter-spacing: 3px; }
  .nav-logo { font-size: 28px; letter-spacing: 5px; }
  .nav-mobile-actions { gap: 4px; margin-right: 6px; }
  .nav-mobile-actions .mobile-theme { width: 28px; height: 28px; font-size: 12px; }
  .nav-mobile-actions .mobile-lang { font-size: 10px; padding: 3px 8px; }
  .manifesto-quote { font-size: 18px !important; }
  .pillar { padding: 24px 16px; }
  .pillar h3 { font-size: 18px; }
  .pillar p { font-size: 13px; }
  .service-row { padding: 18px 0; }
  .service-title { font-size: 14px; }
  .portfolio-card { aspect-ratio: 16/12; }
  .portfolio-client { font-size: 14px; }
  .ind-item { font-size: 20px !important; }
  .proof-number { font-size: 28px !important; }
  .proof-headline { font-size: 11px; letter-spacing: 1px; }
  .proof-sub { font-size: 10px; }
  .testi-quote { font-size: 16px !important; }
  .testi-arrow { width: 36px; height: 36px; font-size: 14px; }
  .chatbot-container { border-radius: 8px; }
  .chatbot-header { padding: 14px 16px; }
  .chatbot-messages { padding: 16px; }
  .faq-question { font-size: 13px; padding: 16px 0; }
  .faq-answer p { font-size: 13px; }
  .cta-heading { font-size: 26px !important; }
  .cta-body { font-size: 13px; }
  .footer-logo { font-size: 28px; }
  .footer-tagline { font-size: 11px; }
  .cookie-text { font-size: 11px; }
  .cookie-btn { font-size: 11px; padding: 8px 14px; }
  .lightbox-container { width: 98vw; }
  .lightbox-header { padding: 12px 14px; }
  .lightbox-title { font-size: 13px; }
}

/* ─── LANDSCAPE MOBILE ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 12vh; padding-bottom: 16px; }
  .hero-title { font-size: clamp(28px, 6vw, 44px) !important; }
  .hero-scroll { display: none; }
  .hero-cta { flex-direction: row; }
  .hero-cta .btn { width: auto; }
  section { padding: clamp(40px, 6vh, 60px) 0; }
}

/* brand 2026 signature (exact text, all three full stops, original casing; direction from its own first letter) */
.hero-overline { unicode-bidi: plaintext; }
.footer-tagline { unicode-bidi: plaintext; }
.footer-category { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-muted); margin: -14px 0 6px; }
.footer-services { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--cream-dim); margin-bottom: 24px; max-width: 420px; }

/* 11.10.2026 QA: between 769 and 1024px the Hebrew footer stayed a row and pushed the email past the left edge;
   stack it like the English page does at <=1024px */
@media (max-width: 1024px) {
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 32px; }
  .footer-right { text-align: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; gap: 16px 20px; padding: 0 60px; }
}
@media (max-width: 1024px) { .footer-services { margin-inline: auto; } }
/* 11.10.2026 (Oshri): the signature is the hero H1; the overline carries the official service line (brand book pairing).
   Small caps line, each service kept whole; on phones one service per line, no separators */
.hero-overline { font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; }
[dir="rtl"] .hero-overline { font-family: var(--font-body-he, var(--font-body)); font-size: 13px; letter-spacing: 0.06em; }
.hero-overline .ov-item { white-space: nowrap; }
@media (max-width: 760px) {
  .hero-overline { display: flex; flex-direction: column; align-items: center; row-gap: 2px; line-height: 1.7; }
  .hero-overline .ov-sep { display: none; }
}
/* the hero sub line breaks only between its three phrases, never inside one */
.hero-sub > span:not(.dot) { white-space: nowrap; }
/* short phones (SE class): the floating buttons must never sit on the hero CTAs */
@media (max-width: 480px) and (max-height: 700px) {
  .hero-overline { margin-top: 12px; }
  .hero-cta { margin-top: 28px; }
  .hero-scroll { display: none; }
  .hero { padding-top: 96px; padding-bottom: 72px; }
}
/* narrow phones: the three phrases wrap as whole phrases, no dot left hanging at a line end */
@media (max-width: 420px) {
  .hero-sub { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.1em; row-gap: 6px; }
  .hero-sub .dot { display: none; }
}
/* the split letters lose kerning: pull the full stop of the accented Hebrew word back to its letter */
.hero-title[dir="rtl"] em .char:last-child { margin-left: -0.07em; }
/* 11.10.2026 (Oshri): the service line sits under the signature H1 */
.hero-overline { margin-top: 26px; }
@media (max-width: 480px) and (max-height: 700px) { .hero-overline { margin-top: 14px; } }
/* Hebrew small labels: wide tracking pulls Hebrew words apart; keep it light */
[dir="rtl"] .hero-cta-label { letter-spacing: 0.08em; font-size: 13px; }

/* brand 2026: the original wordmark (AIO_transparent paths), never retyped; >= 90 CSS px wide */
.nav-logo { display: inline-flex; align-items: center; letter-spacing: 0; line-height: 0; }
.nav-logo .aio-wm { display: block; width: 96px; height: auto; }
.footer-logo { line-height: 0; letter-spacing: 0; }
.footer-logo .aio-wm { display: block; width: 96px; height: auto; color: var(--cream); }
/* brand 2026 (Rubik is a touch wider): footer links wrap as whole links, never inside one; room before the email */
.footer-links { flex-wrap: wrap; gap: 12px 24px; }
.footer-links a { white-space: nowrap; }
.footer-inner { gap: 48px; }
/* the footer stacks and centres at <=1024px: centre the wordmark block with it */
@media (max-width: 1024px) { .footer-logo .aio-wm { margin-inline: auto; } }
/* 11.10.2026 (Grok QA): on phones the open cookie banner pushed the a11y button onto the hero CTAs. While the banner
   is open the button waits at the top, under the menu, and goes back to its corner once the visitor chooses */
@media (max-width: 600px) { html body.cookie-open .a11y-trigger { top: 92px !important; bottom: auto !important; } }

/* ─── SERVICES 21.10.2026: three pillar columns + events strip ───
   Desktop: columns = /ART /CODE /INTELLIGENCE (two cubes each), events span the full row as an extra.
   Phones (2 columns): cubes regroup so each row is one pillar (--m-order set inline). */
.cube-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(209, 209, 214, 0.78);
  position: absolute;
  top: 16px;
  inset-inline-start: 18px;
  z-index: 3;
  text-shadow: 0 1px 8px rgba(10, 10, 11, 0.9);
}
.service-cube.cube-also { grid-column: 1 / -1; min-height: 0 !important; height: 240px; } /* the page sets .service-cube min-height with !important */
.cube-also .cube-front { flex-direction: row; gap: 22px; background: linear-gradient(145deg, rgba(28,28,30,0.75), rgba(14,14,14,0.9)); border-style: dashed; }
.cube-also .cube-icon { width: 52px; height: 52px; }
.cube-also .cube-tag { color: #F5F5F0; letter-spacing: 0.08em; text-shadow: 0 0 10px rgba(0, 71, 255, 0.9); }
[data-theme="light"] .cube-tag { color: rgba(28, 28, 30, 0.6); }
@media (max-width: 768px) {
  .services-grid .service-cube { order: var(--m-order); }
  .service-cube.cube-also { height: 210px; }
  .cube-also .cube-front { flex-direction: column; gap: 10px; }
  .cube-tag { font-size: 10.5px; letter-spacing: 0.12em; top: 12px; inset-inline-start: 14px; }
}

/* ─── 21.10.2026 stage A+B (IS 5568 audit + quick wins) ─── */
/* content-visibility stays (scroll performance). Verified 21.10.2026 with --force-renderer-accessibility: skipped sections are still exposed to screen readers (FAQ, form, headings present). */
section { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.hero { content-visibility: visible; }
.skip-nav { left: auto; inset-inline-start: 0; }
/* hidden cookie banner leaves the tab order */
.cookie-banner { visibility: hidden; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.5s; }
.cookie-banner.show { visibility: visible; transition-delay: 0s; }
/* section toggles: real focus ring */
.section-toggle:focus-visible, .service-cube:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.section-toggle::after { content: "+" / ""; }
/* contact form */
.cta-label { display: block; font-size: 13px; font-weight: 500; color: var(--cream-muted); margin-bottom: -8px; }
.cta-hint { font-size: 12.5px; color: var(--cream-muted); margin: -6px 0 0; }
.cta-lead-form ::placeholder { color: #9C9CA1; opacity: 1; }
.cta-lead-form input:not([type="checkbox"]), .cta-lead-form textarea { border-color: rgba(245,245,240,0.38) !important; }
.cta-lead-form input:focus-visible, .cta-lead-form textarea:focus-visible { outline: 2px solid #6B93FF; outline-offset: 2px; }
.cta-lead-form input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: #0047FF; }
.consent-link { color: #6B93FF; text-decoration: none; border-bottom: 1px solid #6B93FF; }
.form-msg.is-error { color: #FF8A80; }
.form-msg.is-ok { color: #7EE2A8; }
[data-theme="light"] .cta-lead-form ::placeholder { color: #5E5E5E; }
[data-theme="light"] .cta-lead-form input:not([type="checkbox"]), [data-theme="light"] .cta-lead-form textarea { border-color: rgba(10,10,11,0.42) !important; }
[data-theme="light"] .consent-link { color: #0038CC; border-color: #0038CC; }
[data-theme="light"] .form-msg.is-error { color: #B42318; }
[data-theme="light"] .form-msg.is-ok { color: #1E7B34; }
/* light theme contrast */
[data-theme="light"] { --cream-dim: #5E5E5E; }
[data-theme="light"] .mf-sign, [data-theme="light"] .fx-hall-label { color: #3A3A3C !important; }
[data-theme="light"] .hero-cta-label, [data-theme="light"] .cookie-policy-link { color: #3A3A3C; }
[data-theme="light"] .cube-tag { color: rgba(28,28,30,0.8); }
/* touch targets >= 44px without changing the drawn size */
.nav-mobile-actions .mobile-theme, .nav-mobile-actions .mobile-lang { position: relative; }   /* not the hamburger: it is absolute on mobile, which already anchors its ::after */
.nav-mobile-actions .mobile-theme::after, .nav-mobile-actions .mobile-lang::after, .nav-hamburger::after { content: ""; position: absolute; inset: -8px; }
@media (max-width: 768px) { .floating-socials a { width: 44px; height: 44px; } .footer-links a { padding-block: 7px; } }
/* Hebrew is not tracked out */
html[lang="he"] :is(.label, .nav-links a, .mf-kicker, .portfolio-view, .footer-links a, .footer-status, .hero-cta-label, .cube-tag, .btn, .hero-scroll, .hero-scroll *, .offer-cta) { letter-spacing: normal !important; }
/* reduced motion: no parallax drift, no smooth scrolling */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } [data-parallax] { transform: none !important; } }
/* quick wins: no side stripe on offer cards, no gradient text on the facts */
.offer-card::before { content: none; display: none; }
.proof-number, [data-theme="light"] .proof-number { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: var(--cream) !important; }
.proof-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) { .proof-strip { grid-template-columns: 1fr; } }
.footer-phone { display: block; margin-bottom: 6px; }
.direct-btn-call .direct-icon { width: 18px; height: 18px; fill: none !important; stroke: currentColor; }