/* INRISOFT — Clean Corporate Design System */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
  --inri-red: #E30613;
  --inri-red-hover: #C10510;
  --inri-red-deep: #B8050F;
  --inri-red-soft: #FEF0F1;
  --bg: #FFFFFF;
  --bg-alt: #F7F7F8;
  --bg-elevated: #FFFFFF;
  --surface: #F7F7F8;
  --border: #E8E8EC;
  --border-strong: #D4D4DA;
  --text: #111114;
  --text-muted: #5C5C66;
  --text-dim: #8A8A94;
  --nav-h: 76px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

[data-theme="dark"] {
  --bg: #0F0F11;
  --bg-alt: #161618;
  --bg-elevated: #1A1A1D;
  --surface: #1A1A1D;
  --border: #2A2A2E;
  --border-strong: #3A3A40;
  --text: #F4F4F5;
  --text-muted: #A0A0A8;
  --text-dim: #6E6E78;
  --inri-red-soft: rgba(227, 6, 19, 0.12);
  --shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.container {
  width: min(1140px, calc(100% - clamp(24px, 5vw, 48px)));
  margin-inline: auto;
}

.container-wide {
  width: min(1280px, calc(100% - clamp(20px, 4vw, 40px)));
  margin-inline: auto;
}

/* Hide legacy flashy layers if present */
.noise, .cursor, .cursor-follower, .spotlight,
.page-transition, .aurora, .particles, .hero__grid { display: none !important; }

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--inri-red);
  z-index: 10001;
}

/* Navbar — clean corporate */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 9000;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

[data-theme="dark"] .nav {
  background: rgba(15, 15, 17, 0.92);
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.nav__inner {
  width: min(1140px, calc(100% - 40px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.nav__logo img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.nav__logo span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.nav__logo span em {
  font-style: normal;
  color: var(--inri-red);
}

.nav__logo-tag,
.nav__status,
.sidebar__label {
  display: none !important;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  flex-wrap: nowrap;
}

.nav__links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 11px;
  color: var(--text-muted);
  transition: color 0.2s;
  white-space: nowrap;
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--inri-red);
  transform: scaleX(0);
  transition: transform 0.2s;
}

.nav__links a:hover {
  color: var(--text);
}

.nav__links a:hover::after,
.nav__links a.is-active::after {
  transform: scaleX(1);
}

.nav__links a.is-active {
  color: var(--text);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  background: transparent;
}

.theme-toggle:hover {
  border-color: var(--inri-red);
  color: var(--inri-red);
  background: var(--inri-red-soft);
}

.theme-toggle svg { width: 17px; height: 17px; }

.nav__actions .btn--primary {
  padding: 11px 20px;
  font-size: 0.875rem;
  border-radius: 8px;
  font-family: var(--font-display);
}

.nav__actions .btn--primary::before {
  content: none;
}

.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 10;
}

.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  transition: 0.25s var(--ease);
}

.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sidebar {
  position: fixed;
  inset: 0;
  z-index: 8990;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--nav-h, 72px) + 28px) 28px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar.is-open {
  opacity: 1;
  visibility: visible;
}

.sidebar__head {
  margin-bottom: 28px;
}

.sidebar__brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.sidebar__brand em {
  font-style: normal;
  color: var(--inri-red);
}

.sidebar__tag {
  margin: 6px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar__nav a,
.sidebar a {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  font-weight: 700;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  transition: color 0.2s, padding-left 0.2s;
}

.sidebar__nav a:hover,
.sidebar__nav a.is-active,
.sidebar a:hover,
.sidebar a.is-active {
  color: var(--inri-red);
  padding-left: 8px;
}

.sidebar__cta {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.925rem;
  border-radius: 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: linear-gradient(135deg, var(--inri-red-deep, #B8050F), var(--inri-red), #ff3b45);
  color: #fff;
  box-shadow: 0 8px 20px rgba(227, 6, 19, 0.28);
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--inri-red), #ff3b45);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(227, 6, 19, 0.35);
}

.btn--primary:hover::after {
  transform: translateX(120%);
}

.btn--ghost {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--inri-red);
  color: var(--inri-red);
  background: var(--inri-red-soft);
  transform: translateY(-2px);
}

.btn--gradient-border { /* legacy alias */ }

.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 8500;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--inri-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(227, 6, 19, 0.35);
  transition: opacity 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
  transform: translateY(12px);
}

.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.floating-cta:hover {
  background: var(--inri-red-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(227, 6, 19, 0.4);
}

/* Typography */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inri-red);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: 16px;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.7;
}

.section {
  position: relative;
  padding: 100px 0;
}

.section--tight { padding: 64px 0; }

/* Simple surfaces (was glass) */
.glass, .glow-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.glow-card::before { display: none !important; }

.reveal { opacity: 1; transform: none; }

/* ========== HOME ========== */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 72px) 0 80px;
  background:
    radial-gradient(ellipse 50% 60% at 85% 40%, rgba(227, 6, 19, 0.08), transparent 60%),
    var(--bg);
  overflow: hidden;
}

.hero--system {
  padding-bottom: 88px;
}

/* Product system 3D — network + dashboard slab */
.system-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-18deg);
  will-change: transform;
}

.system-3d.is-auto {
  animation: systemAutoTilt 9s ease-in-out infinite;
}

@keyframes systemAutoTilt {
  0%, 100% { transform: rotateX(12deg) rotateY(-18deg); }
  50% { transform: rotateX(8deg) rotateY(-10deg); }
}

.system-3d__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(10px);
}

.system-line {
  stroke: rgba(227, 6, 19, 0.4);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  animation: systemDash 16s linear infinite;
}

@keyframes systemDash {
  to { stroke-dashoffset: -140; }
}

.system-pulse {
  fill: var(--inri-red);
  opacity: 0.85;
}

.system-node {
  position: absolute;
  z-index: 4;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  color: var(--text);
}

.system-node--api { top: 10%; left: 8%; transform: translateZ(110px); animation: systemFloat 4.6s ease-in-out infinite; }
.system-node--cloud { top: 10%; right: 8%; transform: translateZ(130px); color: #3b82f6; animation: systemFloat 5s ease-in-out infinite 0.3s; }
.system-node--sec { top: 48%; left: 0; transform: translateZ(100px); color: #16a34a; animation: systemFloat 4.8s ease-in-out infinite 0.15s; }
.system-node--data { top: 48%; right: 0; transform: translateZ(120px); animation: systemFloat 5.2s ease-in-out infinite 0.45s; }
.system-node--ai { bottom: 10%; left: 16%; transform: translateZ(115px); color: var(--inri-red); animation: systemFloat 4.4s ease-in-out infinite 0.2s; }
.system-node--app { bottom: 10%; right: 16%; transform: translateZ(105px); animation: systemFloat 5.1s ease-in-out infinite 0.35s; }

@keyframes systemFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.system-slab {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(78%, 300px);
  transform: translate(-50%, -50%) translateZ(40px);
  transform-style: preserve-3d;
  animation: systemSlab 5.5s ease-in-out infinite;
}

@keyframes systemSlab {
  0%, 100% { transform: translate(-50%, -50%) translateZ(40px) translateY(0); }
  50% { transform: translate(-50%, -50%) translateZ(40px) translateY(-8px); }
}

.system-slab__depth {
  position: absolute;
  inset: 8px -6px -6px 8px;
  border-radius: 16px;
  background: var(--inri-red);
  opacity: 0.65;
  transform: translateZ(-12px);
}

.system-slab__face {
  position: relative;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: 0 22px 48px rgba(0,0,0,0.18);
  transform: translateZ(10px);
}

.system-slab__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
}

.system-slab__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
}

.system-slab__bar span:nth-child(2) { background: #febc2e; }
.system-slab__bar span:nth-child(3) { background: #28c840; }

.system-slab__bar em {
  margin-left: 8px;
  font-style: normal;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.system-slab__live {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: statusPulse 2s ease-in-out infinite;
}

.system-slab__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.system-mod {
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: systemModIn 0.5s ease both;
}

.system-mod:nth-child(1) { animation-delay: 0.15s; }
.system-mod:nth-child(2) { animation-delay: 0.28s; }
.system-mod:nth-child(3) { animation-delay: 0.4s; }

@keyframes systemModIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.system-mod strong {
  font-size: 0.78rem;
}

.system-mod span {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.system-slab__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
}

.system-slab__chart span {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--inri-red), #ff6b73);
  transform-origin: bottom;
  animation: systemBar 1s ease both;
}

.system-slab__chart span:nth-child(2) { background: linear-gradient(180deg, #3b82f6, #60a5fa); animation-delay: 0.08s; }
.system-slab__chart span:nth-child(3) { animation-delay: 0.16s; }
.system-slab__chart span:nth-child(4) { background: linear-gradient(180deg, #16a34a, #4ade80); animation-delay: 0.24s; }
.system-slab__chart span:nth-child(5) { background: linear-gradient(180deg, #f59e0b, #fbbf24); animation-delay: 0.32s; }
.system-slab__chart span:nth-child(6) { animation-delay: 0.4s; }

@keyframes systemBar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.system-base {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 240px;
  height: 56px;
  margin-left: -120px;
  background: radial-gradient(ellipse, rgba(227, 6, 19, 0.2), transparent 70%);
  border-radius: 50%;
  transform: translateZ(-20px) rotateX(75deg);
  filter: blur(2px);
}

@media (max-width: 900px) {
  .system-node--data,
  .system-node--app { display: none; }
  .system-slab { width: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  .system-3d.is-auto,
  .system-line,
  .system-node,
  .system-slab,
  .system-mod,
  .system-slab__chart span,
  .system-pulse {
    animation: none !important;
  }
  .system-slab__chart span { transform: none; }
  .system-mod { opacity: 1; }
}

.hero__content {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero__headline {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 800;
  margin-bottom: 20px;
  animation: heroFadeUp 0.8s ease both;
}

.hero__headline .accent {
  background: linear-gradient(135deg, var(--inri-red), #ff5a63);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 460px;
  margin-bottom: 32px;
  line-height: 1.7;
  animation: heroFadeUp 0.8s ease 0.1s both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: heroFadeUp 0.8s ease 0.2s both;
}

.hero__tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  animation: heroFadeUp 0.8s ease 0.15s both;
}

.hero__tech-tags span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s;
}

.hero__tech-tags span:hover {
  color: var(--inri-red);
  border-color: rgba(227, 6, 19, 0.35);
  background: var(--inri-red-soft);
  transform: translateY(-2px);
}

.hero .eyebrow {
  animation: heroFadeUp 0.7s ease both;
}

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

.hero__visual {
  position: relative;
  height: 520px;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  animation: heroSceneIn 1s ease 0.15s both;
}

@keyframes heroSceneIn {
  from { opacity: 0; transform: translateX(30px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.hero-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-20deg);
  will-change: transform;
}

/* Orbit */
.orbit3d {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border: 1px dashed rgba(227, 6, 19, 0.2);
  border-radius: 50%;
  transform: translateZ(-40px) rotateX(68deg);
  animation: orbitSpin 20s linear infinite;
}

.orbit3d__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--inri-red);
  box-shadow: 0 0 12px rgba(227, 6, 19, 0.5);
}

.orbit3d__dot--1 { top: -5px; left: 50%; margin-left: -5px; }
.orbit3d__dot--2 { bottom: 20%; right: -5px; width: 8px; height: 8px; background: #ff6b73; }
.orbit3d__dot--3 { bottom: -4px; left: 30%; width: 7px; height: 7px; background: #C10510; }

@keyframes orbitSpin {
  to { transform: translateZ(-40px) rotateX(68deg) rotateZ(360deg); }
}

/* Platform */
.platform3d {
  position: absolute;
  top: 62%;
  left: 50%;
  width: 280px;
  height: 80px;
  margin-left: -140px;
  background: radial-gradient(ellipse, rgba(227, 6, 19, 0.18), transparent 70%);
  border-radius: 50%;
  transform: translateZ(-30px) rotateX(75deg);
  animation: platformPulse 3.5s ease-in-out infinite;
  filter: blur(2px);
}

@keyframes platformPulse {
  0%, 100% { opacity: 0.55; transform: translateZ(-30px) rotateX(75deg) scale(1); }
  50% { opacity: 0.9; transform: translateZ(-30px) rotateX(75deg) scale(1.08); }
}

/* Panel */
.panel3d {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  max-width: 380px;
  transform: translate(-50%, -50%) translateZ(40px);
  transform-style: preserve-3d;
  animation: panelFloat 6s ease-in-out infinite;
}

@keyframes panelFloat {
  0%, 100% { transform: translate(-50%, -50%) translateZ(40px) translateY(0); }
  50% { transform: translate(-50%, -50%) translateZ(40px) translateY(-12px); }
}

.panel3d__glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.2), transparent 65%);
  transform: translateZ(-24px);
  animation: glowPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.panel3d__depth {
  position: absolute;
  inset: 8px -10px -10px 8px;
  background: #C10510;
  border-radius: var(--radius);
  transform: translateZ(-16px);
  opacity: 0.85;
}

.panel3d__depth--2 {
  inset: 14px -16px -16px 14px;
  background: #8B000E;
  transform: translateZ(-28px);
  opacity: 0.5;
}

.panel3d__screen {
  position: relative;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.14),
    0 4px 16px rgba(227, 6, 19, 0.15);
  padding: 18px;
  transform: translateZ(0);
  overflow: hidden;
}

/* Solution dashboard */
.solution-dash {
  padding: 16px !important;
  background: var(--bg) !important;
}

.solution-dash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.solution-dash__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.solution-dash__brand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.solution-dash__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
}

.solution-dash__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12); }
}

.solution-dash__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.solution-tile {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: rowSlide 0.5s ease both;
}

.solution-tile:nth-child(1) { animation-delay: 0.2s; }
.solution-tile:nth-child(2) { animation-delay: 0.35s; }
.solution-tile:nth-child(3) { animation-delay: 0.5s; }

.solution-tile strong {
  font-family: var(--font-display);
  font-size: 0.8rem;
}

.solution-tile span {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.solution-tile em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--inri-red);
  margin-top: 4px;
}

.solution-tile--ai { border-color: rgba(227, 6, 19, 0.25); }
.solution-tile--cloud { border-color: rgba(59, 130, 246, 0.25); }
.solution-tile--cloud em { color: #3b82f6; }
.solution-tile--app em { color: #16a34a; }

.solution-dash__chart {
  height: 72px;
  border-radius: 10px;
  background: var(--inri-red-soft);
  overflow: hidden;
  margin-bottom: 10px;
}

.solution-dash__chart svg { width: 100%; height: 100%; }

.solution-dash__foot {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
  font-family: var(--font-mono);
}

/* Solution badges */
.sol-badge {
  position: absolute;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
}

.sol-badge--1 {
  top: 4%;
  right: 2%;
  color: var(--inri-red);
  border-color: rgba(227, 6, 19, 0.35);
  transform: translateZ(150px);
  animation: floatCard1 4.2s ease-in-out infinite;
}

.sol-badge--2 {
  top: 20%;
  left: 0;
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateZ(100px);
  animation: floatCard3 5s ease-in-out infinite;
}

.sol-badge--3 {
  bottom: 30%;
  right: -4%;
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.35);
  transform: translateZ(130px);
  animation: floatCard2 4.6s ease-in-out infinite;
}

.sol-badge--4 {
  top: 42%;
  left: -8%;
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.3);
  transform: translateZ(90px);
  animation: floatCard1 5.4s ease-in-out infinite reverse;
}

.sol-badge--5 {
  bottom: 48%;
  right: 10%;
  color: var(--inri-red);
  transform: translateZ(160px);
  animation: floatCard3 3.8s ease-in-out infinite;
}

/* Solution side cards */
.sol-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  min-width: 150px;
}

.sol-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--inri-red-soft);
  color: var(--inri-red);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sol-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.2;
}

.sol-card span {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.sol-card--mobile {
  bottom: 8%;
  left: -2%;
  transform: translateZ(120px);
  animation: floatCard2 5s ease-in-out infinite;
}

.sol-card--web {
  top: 10%;
  right: 0;
  transform: translateZ(140px);
  animation: floatCard1 4.5s ease-in-out infinite;
}

.sol-card--auto {
  bottom: 22%;
  right: -2%;
  transform: translateZ(110px);
  animation: floatCard3 5.2s ease-in-out infinite;
}

/* Auto gentle sway for mobile (no mouse) */
.hero-3d.is-auto {
  animation: heroAutoTilt 8s ease-in-out infinite;
}

@keyframes heroAutoTilt {
  0%, 100% { transform: rotateX(10deg) rotateY(-18deg); }
  50% { transform: rotateX(6deg) rotateY(-10deg); }
}

/* ========== Hero Slider ========== */
.hero {
  padding-bottom: 120px;
}

.hero-slides {
  position: relative;
  width: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(40px) scale(0.98);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;
}

.hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  z-index: 2;
}

.hero-slide.is-active .hero__headline,
.hero-slide.is-active .hero__desc,
.hero-slide.is-active .hero__actions,
.hero-slide.is-active .hero__tech-tags,
.hero-slide.is-active .eyebrow,
.hero-slide.is-active .hero__visual {
  animation: heroFadeUp 0.7s ease both;
}

.hero-slide.is-active .hero__desc { animation-delay: 0.08s; }
.hero-slide.is-active .hero__tech-tags { animation-delay: 0.12s; }
.hero-slide.is-active .hero__actions { animation-delay: 0.16s; }
.hero-slide.is-active .hero__visual { animation: heroSceneIn 0.85s ease 0.1s both; }

.hero-slider__nav {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 5;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

.hero-slider__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.hero-slider__arrow:hover {
  background: var(--inri-red);
  border-color: var(--inri-red);
  color: #fff;
  transform: scale(1.05);
}

.hero-slider__dots {
  display: flex;
  gap: 8px;
}

.hero-slider__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: width 0.3s, background 0.3s, border-radius 0.3s;
}

.hero-slider__dots button.is-active {
  width: 28px;
  border-radius: 999px;
  background: var(--inri-red);
}

.hero-slider__progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: transparent;
  overflow: hidden;
  border-radius: 2px;
}

.hero-slider__progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--inri-red);
  border-radius: 2px;
}

/* Coding slide */
.code-float {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
  color: var(--inri-red);
}

.code-float--1 {
  top: 8%;
  left: 4%;
  transform: translateZ(130px);
  animation: floatCard1 4.8s ease-in-out infinite;
}

.code-float--2 {
  top: 18%;
  right: 6%;
  transform: translateZ(150px);
  animation: floatCard2 5.2s ease-in-out infinite;
}

.code-float--3 {
  bottom: 18%;
  left: 0;
  transform: translateZ(110px);
  animation: floatCard3 4.6s ease-in-out infinite;
}

.code-panel {
  width: min(100%, 420px);
  max-width: 420px;
}

.code-screen {
  background: #0f1218;
  color: #e6edf3;
  padding: 0;
  overflow: hidden;
}

.code-screen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #161b22;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.code-screen__bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.code-screen__bar .dot.r { background: #ff5f57; }
.code-screen__bar .dot.y { background: #febc2e; }
.code-screen__bar .dot.g { background: #28c840; }

.code-screen__bar em {
  margin-left: 10px;
  font-style: normal;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-mono);
}

.code-screen__body {
  padding: 14px 12px 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
}

.code-line {
  display: flex;
  gap: 12px;
  white-space: nowrap;
  opacity: 0;
  animation: codeLineIn 0.45s ease forwards;
}

.code-line:nth-child(1) { animation-delay: 0.2s; }
.code-line:nth-child(2) { animation-delay: 0.35s; }
.code-line:nth-child(3) { animation-delay: 0.5s; }
.code-line:nth-child(4) { animation-delay: 0.65s; }
.code-line:nth-child(5) { animation-delay: 0.8s; }
.code-line:nth-child(6) { animation-delay: 0.95s; }

@keyframes codeLineIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: none; }
}

.code-line i {
  width: 16px;
  color: rgba(255,255,255,0.25);
  font-style: normal;
  text-align: right;
  flex-shrink: 0;
}

.code-line .kw { color: #ff7b72; }
.code-line .fn { color: #d2a8ff; }
.code-line .str { color: #a5d6ff; }

.cursor-blink {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--inri-red);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.term-float {
  position: absolute;
  bottom: 6%;
  right: 0;
  width: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: #0f1218;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 36px rgba(0,0,0,0.25);
  transform: translateZ(160px);
  animation: floatCard2 5s ease-in-out infinite;
  z-index: 5;
}

.term-float__bar {
  padding: 6px 10px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.45);
  background: #161b22;
  font-family: var(--font-mono);
}

.term-float__body {
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #c9d1d9;
  line-height: 1.6;
}

.term-float__body .g { color: #3fb950; }
.term-float__body .typing { color: #e6edf3; margin-top: 4px; }

.git-float {
  position: absolute;
  top: 42%;
  left: -4%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
  transform: translateZ(145px);
  animation: floatCard1 4.4s ease-in-out infinite;
  z-index: 5;
}

.git-float strong {
  font-size: 0.78rem;
  color: var(--text);
}

.git-float span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #16a34a;
}

.orbit3d--code {
  animation-duration: 18s;
}

/* Cloud / AI slide */
.cloud-ring {
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(227, 6, 19, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(68deg);
  pointer-events: none;
}

.cloud-ring--1 {
  width: 280px;
  height: 280px;
  animation: cloudSpin 14s linear infinite;
}

.cloud-ring--2 {
  width: 380px;
  height: 380px;
  border-color: rgba(59, 130, 246, 0.18);
  animation: cloudSpin 20s linear infinite reverse;
}

.cloud-ring--3 {
  width: 460px;
  height: 460px;
  border-style: dashed;
  border-color: rgba(227, 6, 19, 0.12);
  animation: cloudSpin 28s linear infinite;
}

@keyframes cloudSpin {
  to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
}

.cloud-node {
  position: absolute;
  z-index: 4;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
  color: var(--inri-red);
}

.cloud-node--ai {
  top: 10%;
  left: 18%;
  transform: translateZ(140px);
  animation: floatCard1 4.5s ease-in-out infinite;
}

.cloud-node--api {
  top: 14%;
  right: 12%;
  transform: translateZ(160px);
  color: #3b82f6;
  animation: floatCard2 5s ease-in-out infinite;
}

.cloud-node--db {
  bottom: 16%;
  left: 8%;
  transform: translateZ(120px);
  color: #16a34a;
  animation: floatCard3 4.8s ease-in-out infinite;
}

.cloud-node--sec {
  bottom: 22%;
  right: 6%;
  transform: translateZ(130px);
  animation: floatCard1 5.4s ease-in-out infinite;
}

.cloud-panel {
  width: min(100%, 360px);
  max-width: 360px;
}

.cloud-screen {
  padding: 20px;
}

.cloud-screen__title {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.cloud-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 140px;
  margin-bottom: 16px;
}

.cloud-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.cloud-bar span {
  display: block;
  width: 100%;
  height: var(--h, 50%);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--inri-red), #ff5a63);
  transform-origin: bottom;
  animation: barGrow 1.2s ease both;
}

.cloud-bar:nth-child(2) span { background: linear-gradient(180deg, #3b82f6, #60a5fa); animation-delay: 0.1s; }
.cloud-bar:nth-child(3) span { animation-delay: 0.2s; }
.cloud-bar:nth-child(4) span { background: linear-gradient(180deg, #16a34a, #4ade80); animation-delay: 0.3s; }
.cloud-bar:nth-child(5) span { background: linear-gradient(180deg, #f59e0b, #fbbf24); animation-delay: 0.4s; }

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.cloud-bar em {
  font-style: normal;
  font-size: 0.65rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.cloud-screen__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cloud-screen__foot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: statusPulse 1.8s ease infinite;
}

.pulse-orb {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--inri-red);
  box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.45);
  transform: translateZ(80px);
  animation: orbPulse 2.2s ease-out infinite;
  z-index: 3;
}

@keyframes orbPulse {
  0% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.45); }
  70% { box-shadow: 0 0 0 28px rgba(227, 6, 19, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
}

.hero-slide:not(.is-active) .chart-line,
.hero-slide:not(.is-active) .chart-fill,
.hero-slide:not(.is-active) .code-line,
.hero-slide:not(.is-active) .cloud-bar span {
  animation: none;
}

.hero-slide.is-active .chart-line {
  animation: drawLine 1.6s ease 0.3s forwards;
}

.hero-slide.is-active .chart-fill {
  animation: fadeFill 1.2s ease 0.8s both;
}

.hero-slide.is-active .code-line {
  animation: codeLineIn 0.45s ease forwards;
}

.hero-slide.is-active .code-line:nth-child(1) { animation-delay: 0.2s; }
.hero-slide.is-active .code-line:nth-child(2) { animation-delay: 0.35s; }
.hero-slide.is-active .code-line:nth-child(3) { animation-delay: 0.5s; }
.hero-slide.is-active .code-line:nth-child(4) { animation-delay: 0.65s; }
.hero-slide.is-active .code-line:nth-child(5) { animation-delay: 0.8s; }
.hero-slide.is-active .code-line:nth-child(6) { animation-delay: 0.95s; }

.hero-slide.is-active .cloud-bar span {
  animation: barGrow 1.2s ease both;
}

.hero-slide.is-active .cloud-bar:nth-child(2) span { animation-delay: 0.1s; }
.hero-slide.is-active .cloud-bar:nth-child(3) span { animation-delay: 0.2s; }
.hero-slide.is-active .cloud-bar:nth-child(4) span { animation-delay: 0.3s; }
.hero-slide.is-active .cloud-bar:nth-child(5) span { animation-delay: 0.4s; }

.panel3d__screen::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: rotate(20deg);
  animation: screenShine 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes screenShine {
  0%, 100% { left: -60%; opacity: 0; }
  40% { opacity: 1; }
  70% { left: 120%; opacity: 0; }
}

[data-theme="dark"] .panel3d__screen {
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(227, 6, 19, 0.25);
}

.dashboard-mock__bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.dashboard-mock__bar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--inri-red);
  opacity: 0.85;
  animation: dotBlink 2.4s ease-in-out infinite;
}

.dashboard-mock__bar i:nth-child(2) { background: #F5A623; animation-delay: 0.3s; }
.dashboard-mock__bar i:nth-child(3) { background: #22C55E; animation-delay: 0.6s; }

@keyframes dotBlink {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.dashboard-mock__chart {
  height: 110px;
  border-radius: 8px;
  background: var(--inri-red-soft);
  margin-bottom: 14px;
  overflow: hidden;
}

.dashboard-mock__chart svg { width: 100%; height: 100%; }

.chart-line {
  animation: drawLine 2.2s ease forwards 0.6s;
}

.chart-fill {
  opacity: 0;
  animation: fadeFill 1.2s ease forwards 1.4s;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes fadeFill {
  to { opacity: 1; }
}

.dashboard-mock__rows { display: grid; gap: 8px; }

.dashboard-mock__row {
  height: 32px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  animation: rowSlide 0.6s ease both;
}

.dashboard-mock__row:nth-child(1) { animation-delay: 0.8s; }
.dashboard-mock__row:nth-child(2) { animation-delay: 1s; }
.dashboard-mock__row:nth-child(3) { animation-delay: 1.2s; }

@keyframes rowSlide {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

.dashboard-mock__row span {
  height: 7px;
  border-radius: 4px;
  background: #E5E5EA;
}

[data-theme="dark"] .dashboard-mock__row span { background: #333338; }

.dashboard-mock__row span:first-child { width: 30%; }
.dashboard-mock__row span:last-child { width: 50%; margin-left: auto; opacity: 0.6; }

/* Floating cards */
.float-card {
  position: absolute;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 4;
  transform-style: preserve-3d;
  animation: float3d 5s ease-in-out infinite;
  backdrop-filter: none;
}

.float-card--1 {
  top: 4%;
  right: 0;
  transform: translateZ(140px) rotateY(-8deg);
  animation: floatCard1 4.5s ease-in-out infinite;
}

.float-card--2 {
  bottom: 10%;
  left: -2%;
  transform: translateZ(110px) rotateY(6deg);
  animation: floatCard2 5.2s ease-in-out infinite;
}

.float-card--3 {
  top: 44%;
  right: -6%;
  transform: translateZ(170px) rotateY(-4deg);
  animation: floatCard3 4.8s ease-in-out infinite;
}

.float-card strong {
  display: block;
  color: var(--inri-red);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

@keyframes float3d {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes floatCard1 {
  0%, 100% { transform: translateZ(140px) rotateY(-8deg) translateY(0); }
  50% { transform: translateZ(140px) rotateY(-8deg) translateY(-14px); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translateZ(110px) rotateY(6deg) translateY(0) translateX(0); }
  50% { transform: translateZ(110px) rotateY(6deg) translateY(-10px) translateX(6px); }
}

@keyframes floatCard3 {
  0%, 100% { transform: translateZ(170px) rotateY(-4deg) translateY(0) scale(1); }
  50% { transform: translateZ(170px) rotateY(-4deg) translateY(-16px) scale(1.03); }
}

/* Shapes */
.shape3d {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
}

.shape3d--cube {
  top: 6%;
  left: 2%;
  width: 56px;
  height: 56px;
  transform: translateZ(80px);
  animation: spinCube 12s linear infinite;
}

.shape3d--cube-sm {
  top: auto;
  bottom: 22%;
  left: auto;
  right: 4%;
  width: 36px;
  height: 36px;
  animation: spinCubeRev 9s linear infinite;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
}

.cube--sm .cube__face {
  width: 36px;
  height: 36px;
}

.cube__face {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(227, 6, 19, 0.35);
  background: rgba(227, 6, 19, 0.12);
}

[data-theme="dark"] .cube__face {
  background: rgba(227, 6, 19, 0.22);
  border-color: rgba(255, 80, 90, 0.4);
}

.cube__face--front  { transform: translateZ(28px); background: rgba(227, 6, 19, 0.55); }
.cube__face--back   { transform: rotateY(180deg) translateZ(28px); }
.cube__face--right  { transform: rotateY(90deg) translateZ(28px); background: rgba(227, 6, 19, 0.35); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(28px); background: rgba(193, 5, 16, 0.4); }
.cube__face--top    { transform: rotateX(90deg) translateZ(28px); background: rgba(255, 70, 80, 0.35); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(28px); background: rgba(139, 0, 14, 0.45); }

.cube--sm .cube__face--front  { transform: translateZ(18px); }
.cube--sm .cube__face--back   { transform: rotateY(180deg) translateZ(18px); }
.cube--sm .cube__face--right  { transform: rotateY(90deg) translateZ(18px); }
.cube--sm .cube__face--left   { transform: rotateY(-90deg) translateZ(18px); }
.cube--sm .cube__face--top    { transform: rotateX(90deg) translateZ(18px); }
.cube--sm .cube__face--bottom { transform: rotateX(-90deg) translateZ(18px); }

@keyframes spinCube {
  to { transform: translateZ(80px) rotateX(360deg) rotateY(360deg); }
}

@keyframes spinCubeRev {
  to { transform: translateZ(100px) rotateX(-360deg) rotateY(360deg); }
}

.shape3d--ring {
  bottom: 16%;
  right: 6%;
  width: 72px;
  height: 72px;
  border: 6px solid var(--inri-red);
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: rgba(227, 6, 19, 0.25);
  transform: translateZ(100px) rotateX(70deg);
  animation: spinRing 7s linear infinite;
}

.shape3d--ring-2 {
  top: 18%;
  left: 18%;
  width: 48px;
  height: 48px;
  border-width: 4px;
  border-color: rgba(227, 6, 19, 0.45);
  border-bottom-color: transparent;
  border-right-color: transparent;
  animation: spinRing2 10s linear infinite reverse;
}

@keyframes spinRing {
  to { transform: translateZ(100px) rotateX(70deg) rotateZ(360deg); }
}

@keyframes spinRing2 {
  to { transform: translateZ(60px) rotateX(55deg) rotateZ(360deg); }
}

.shape3d--sphere {
  top: 20%;
  right: 10%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #ff6b73, var(--inri-red) 55%, #8B000E);
  transform: translateZ(130px);
  box-shadow: 4px 8px 16px rgba(227, 6, 19, 0.35);
  animation: sphereBounce 3.8s ease-in-out infinite;
}

.shape3d--sphere-2 {
  top: auto;
  bottom: 36%;
  right: auto;
  left: 6%;
  width: 22px;
  height: 22px;
  transform: translateZ(90px);
  animation: sphereBounce 4.6s ease-in-out infinite reverse;
  animation-delay: -1s;
}

@keyframes sphereBounce {
  0%, 100% { transform: translateZ(130px) translateY(0) scale(1); }
  50% { transform: translateZ(150px) translateY(-18px) scale(1.1); }
}

.shape3d--pyramid {
  bottom: 30%;
  left: 12%;
  width: 48px;
  height: 48px;
  transform: translateZ(60px);
  animation: spinPyramid 11s linear infinite;
}

.pyramid {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg);
}

.pyramid__face {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 42px solid rgba(227, 6, 19, 0.55);
  transform-origin: 50% 100%;
  margin-left: -24px;
}

.pyramid__face--1 { transform: rotateY(0deg) translateZ(14px) rotateX(20deg); }
.pyramid__face--2 { transform: rotateY(90deg) translateZ(14px) rotateX(20deg); border-bottom-color: rgba(193, 5, 16, 0.7); }
.pyramid__face--3 { transform: rotateY(180deg) translateZ(14px) rotateX(20deg); border-bottom-color: rgba(139, 0, 14, 0.65); }
.pyramid__face--4 { transform: rotateY(-90deg) translateZ(14px) rotateX(20deg); border-bottom-color: rgba(255, 60, 70, 0.45); }

@keyframes spinPyramid {
  to { transform: translateZ(60px) rotateY(360deg) rotateX(15deg); }
}

/* 3D bars */
.bar3d {
  position: absolute;
  width: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--inri-red), #8B000E);
  transform-style: preserve-3d;
  transform-origin: bottom center;
  bottom: 28%;
  left: 72%;
  animation: barGrow 2.4s ease-in-out infinite;
}

.bar3d--1 { height: 40px; animation-delay: 0s; }
.bar3d--2 { height: 58px; left: 76%; animation-delay: 0.25s; background: linear-gradient(180deg, #ff5a63, var(--inri-red)); }
.bar3d--3 { height: 32px; left: 80%; animation-delay: 0.5s; }

@keyframes barGrow {
  0%, 100% { transform: translateZ(70px) scaleY(1); opacity: 0.85; }
  50% { transform: translateZ(90px) scaleY(1.25); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shape3d--cube,
  .shape3d--ring,
  .shape3d--ring-2,
  .shape3d--pyramid,
  .shape3d--sphere,
  .shape3d--sphere-2,
  .float-card,
  .sol-badge,
  .sol-card,
  .panel3d,
  .orbit3d,
  .platform3d,
  .bar3d,
  .chart-line,
  .chart-fill,
  .hero__headline,
  .hero__desc,
  .hero__actions,
  .hero__tech-tags,
  .hero__visual,
  .hero-3d.is-auto,
  .solution-tile,
  .code-float,
  .term-float,
  .git-float,
  .cloud-ring,
  .cloud-node,
  .cloud-bar span,
  .pulse-orb,
  .code-line,
  .hero-slide,
  .hero-slider__progress i {
    animation: none !important;
  }
  .chart-line { stroke-dashoffset: 0; }
  .chart-fill { opacity: 1; }
  .hero-slide { transition: none; }
  .hero-slide:not(.is-active) { display: none; }
}

/* Logos marquee */
.logos {
  position: relative;
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  overflow: hidden;
}

.logos__label {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.logos__label--sub {
  margin-top: 36px;
  margin-bottom: 20px;
  opacity: 0.85;
}

.logos__track-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee {
  display: flex;
  width: max-content;
  animation: logo-marquee 32s linear infinite;
}

.marquee--reverse {
  animation-name: logo-marquee-reverse;
  animation-duration: 36s;
}

.marquee:hover {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
}

.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 64px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.marquee__item img {
  width: 100%;
  height: 36px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.3s;
}

/* Unique animation per logo */
.marquee__item:nth-child(1) {
  animation: logo-float 3.2s ease-in-out infinite;
}
.marquee__item:nth-child(2) {
  animation: logo-pulse 2.8s ease-in-out infinite;
  animation-delay: 0.2s;
}
.marquee__item:nth-child(3) {
  animation: logo-tilt 3.6s ease-in-out infinite;
  animation-delay: 0.4s;
}
.marquee__item:nth-child(4) {
  animation: logo-bounce 2.4s ease-in-out infinite;
  animation-delay: 0.15s;
}
.marquee__item:nth-child(5) {
  animation: logo-swing 3s ease-in-out infinite;
  animation-delay: 0.35s;
}
.marquee__item:nth-child(6) {
  animation: logo-zoom 2.6s ease-in-out infinite;
  animation-delay: 0.5s;
}
.marquee__item:nth-child(7) {
  animation: logo-float 3.4s ease-in-out infinite;
  animation-delay: 0.25s;
}
.marquee__item:nth-child(8) {
  animation: logo-pulse 3s ease-in-out infinite;
  animation-delay: 0.45s;
}
.marquee__item:nth-child(9) {
  animation: logo-tilt 3.2s ease-in-out infinite;
  animation-delay: 0.1s;
}
.marquee__item:nth-child(10) {
  animation: logo-bounce 2.8s ease-in-out infinite;
  animation-delay: 0.55s;
}

.marquee__item:hover {
  border-color: rgba(227, 6, 19, 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.05);
  z-index: 2;
}

.marquee__item:hover img {
  filter: grayscale(0) opacity(1);
}

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

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

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes logo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes logo-tilt {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes logo-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  50% { transform: translateY(-4px); }
  70% { transform: translateY(-8px); }
}

@keyframes logo-swing {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(6px) rotate(2deg); }
  75% { transform: translateX(-6px) rotate(-2deg); }
}

@keyframes logo-zoom {
  0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
  50% { transform: scale(1.08) translateY(-4px); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .marquee__item { animation: none !important; }
}

/* Services HS — animated */
.services-hs .eyebrow,
.services-hs .section-title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.services-hs.is-inview .eyebrow,
.services-hs.is-inview .section-title {
  opacity: 1;
  transform: none;
}

.services-hs.is-inview .section-title {
  transition-delay: 0.1s;
}

.services-hs__sticky {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  margin-top: 40px;
}

.services-hs__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-hs-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 22px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-28px);
  transition:
    color 0.35s,
    padding-left 0.35s,
    background 0.35s,
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  border-radius: 8px;
  position: relative;
}

.services-hs.is-inview .service-hs-item {
  opacity: 1;
  transform: none;
}

.services-hs.is-inview .service-hs-item:nth-child(1) { transition-delay: 0.15s; }
.services-hs.is-inview .service-hs-item:nth-child(2) { transition-delay: 0.28s; }
.services-hs.is-inview .service-hs-item:nth-child(3) { transition-delay: 0.4s; }
.services-hs.is-inview .service-hs-item:nth-child(4) { transition-delay: 0.52s; }
.services-hs.is-inview .service-hs-item:nth-child(5) { transition-delay: 0.64s; }
.services-hs.is-inview .service-hs-item:nth-child(6) { transition-delay: 0.76s; }

.service-hs-item__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dim);
  min-width: 28px;
  transition: color 0.3s;
}

.service-hs-item__label {
  flex: 1;
}

.service-hs-item__arrow {
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s, transform 0.35s;
  color: var(--inri-red);
}

.service-hs-item:hover,
.service-hs-item.is-active {
  color: var(--text);
  padding-left: 16px;
  background: var(--inri-red-soft);
}

.service-hs-item.is-active {
  color: var(--inri-red);
}

.service-hs-item.is-active .service-hs-item__num {
  color: var(--inri-red);
}

.service-hs-item.is-active .service-hs-item__arrow {
  opacity: 1;
  transform: translateX(0);
  animation: arrowNudge 1.2s ease-in-out infinite;
}

@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.services-hs__visual {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 540px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateX(28px) scale(0.97);
  transition: opacity 0.7s var(--ease) 0.25s, transform 0.7s var(--ease) 0.25s;
}

.services-hs.is-inview .services-hs__visual {
  opacity: 1;
  transform: none;
}

.services-hs__progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(227, 6, 19, 0.12);
  z-index: 5;
}

.services-hs__progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--inri-red);
  transition: width 0.1s linear;
}

.services-hs__progress.is-running i {
  animation: serviceProgress 4s linear;
}

@keyframes serviceProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.services-hs__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04) translateY(12px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  display: grid;
  grid-template-rows: minmax(250px, 1.35fr) auto;
  padding: 0;
  pointer-events: none;
  overflow: hidden;
}

.services-hs__panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 2;
}

.services-hs__stage {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 28px 24px 12px;
  overflow: hidden;
}

.services-hs__info {
  padding: 8px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 12, 0.55) 18%, rgba(10, 10, 12, 0.82));
}

[data-theme="light"] .services-hs__info {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.72) 20%, rgba(255, 255, 255, 0.94));
}

.services-hs__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--inri-red);
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.services-hs__panel.is-active .services-hs__icon {
  animation: iconPop 0.5s var(--ease) both;
}

@keyframes iconPop {
  from { opacity: 0; transform: scale(0.7) translateY(10px); }
  to { opacity: 1; transform: none; }
}

.services-hs__panel h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  margin-bottom: 8px;
  color: var(--text);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity 0.45s 0.08s, transform 0.45s 0.08s;
}

.services-hs__panel.is-active h3 {
  opacity: 1;
  transform: none;
}

.services-hs__panel p {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 0.45s 0.14s, transform 0.45s 0.14s;
  line-height: 1.6;
}

.services-hs__panel.is-active p {
  opacity: 1;
  transform: none;
}

.services-hs__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s 0.22s, transform 0.4s 0.22s;
}

.services-hs__panel.is-active .services-hs__tags {
  opacity: 1;
  transform: none;
}

.services-hs__tags li {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
}

.panel-web { background: linear-gradient(165deg, rgba(227, 6, 19, 0.14), var(--bg-alt) 55%); }
.panel-ai { background: linear-gradient(165deg, var(--bg-alt), rgba(227, 6, 19, 0.12) 70%); }
.panel-cloud { background: linear-gradient(145deg, var(--bg-alt) 35%, rgba(227, 6, 19, 0.12)); }
.panel-emerging { background: linear-gradient(155deg, rgba(227, 6, 19, 0.16) 10%, var(--bg-alt)); }
.panel-managed { background: linear-gradient(160deg, var(--bg-alt) 25%, rgba(227, 6, 19, 0.12)); }
.panel-it { background: linear-gradient(140deg, rgba(227, 6, 19, 0.12), var(--bg-alt) 60%); }

/* What we do — real image stages */
.hs-media {
  position: relative;
  width: min(100%, 420px);
  height: 240px;
  transform-style: preserve-3d;
  perspective: 900px;
}

.hs-media__glow {
  position: absolute;
  inset: 10% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.35), transparent 68%);
  filter: blur(18px);
  animation: hsGlowPulse 4.5s ease-in-out infinite;
  z-index: 0;
}

@keyframes hsGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.hs-media__main {
  position: absolute;
  inset: 8% 10% 12% 8%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(227, 6, 19, 0.12);
  transform: rotateY(-8deg) rotateX(6deg) translateZ(20px);
  z-index: 2;
  animation: hsMainFloat 5.5s ease-in-out infinite;
}

.hs-media__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  animation: hsKenBurns 12s ease-in-out infinite alternate;
}

.hs-media__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: hsShine 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hsKenBurns {
  from { transform: scale(1.08) translate(0, 0); }
  to { transform: scale(1.18) translate(-2%, -1%); }
}

@keyframes hsMainFloat {
  0%, 100% { transform: rotateY(-8deg) rotateX(6deg) translateZ(20px) translateY(0); }
  50% { transform: rotateY(-4deg) rotateX(3deg) translateZ(28px) translateY(-8px); }
}

@keyframes hsShine {
  0%, 55% { transform: translateX(-120%); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.hs-media__float {
  position: absolute;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.hs-media__float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hs-media__float--a {
  width: 112px;
  height: 78px;
  left: 0;
  bottom: 6%;
  transform: rotateY(16deg) rotateX(8deg) translateZ(48px);
  animation: hsFloatA 4.4s ease-in-out infinite;
}

.hs-media__float--b {
  width: 96px;
  height: 96px;
  right: 0;
  top: 4%;
  border-radius: 16px;
  transform: rotateY(-18deg) rotateX(10deg) translateZ(56px);
  animation: hsFloatB 5s ease-in-out infinite;
}

@keyframes hsFloatA {
  0%, 100% { transform: rotateY(16deg) rotateX(8deg) translateZ(48px) translateY(0); }
  50% { transform: rotateY(10deg) rotateX(4deg) translateZ(56px) translateY(-10px); }
}

@keyframes hsFloatB {
  0%, 100% { transform: rotateY(-18deg) rotateX(10deg) translateZ(56px) translateY(0); }
  50% { transform: rotateY(-10deg) rotateX(5deg) translateZ(64px) translateY(8px); }
}

.hs-media__ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 210px;
  height: 210px;
  margin: -105px 0 0 -105px;
  border: 1px dashed rgba(227, 6, 19, 0.35);
  border-radius: 50%;
  transform: rotateX(68deg);
  animation: hsRingSpin 16s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes hsRingSpin {
  to { transform: rotateX(68deg) rotateZ(360deg); }
}

.hs-chip {
  position: absolute;
  z-index: 4;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--inri-red);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  animation: hsChipFloat 3.8s ease-in-out infinite;
}

.hs-chip--1 { top: 8%; left: 2%; animation-delay: 0s; }
.hs-chip--2 { top: 18%; right: 2%; animation-delay: 0.4s; }
.hs-chip--3 { bottom: 14%; left: 18%; animation-delay: 0.8s; }
.hs-chip--4 { bottom: 22%; right: 10%; animation-delay: 1.1s; }

@keyframes hsChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.services-hs__panel.is-active .hs-media {
  animation: hsStageIn 0.55s var(--ease) both;
}

@keyframes hsStageIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hs-media {
    height: 210px;
  }

  .hs-media__float--a {
    width: 92px;
    height: 64px;
  }

  .hs-media__float--b {
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 640px) {
  .services-hs__stage {
    min-height: 200px;
    padding: 20px 16px 8px;
  }

  .hs-media {
    width: 100%;
    height: 180px;
  }

  .hs-media__main {
    inset: 6% 6% 10% 6%;
    transform: none;
    animation: none;
  }

  .hs-media__float--b {
    display: none;
  }

  .hs-media__ring {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-hs .eyebrow,
  .services-hs .section-title,
  .service-hs-item,
  .services-hs__visual,
  .services-hs__panel,
  .services-hs__panel h3,
  .services-hs__panel p,
  .services-hs__tags,
  .services-hs__icon,
  .hs-chip,
  .hs-media,
  .hs-media__main,
  .hs-media__main img,
  .hs-media__float,
  .hs-media__shine,
  .hs-media__glow,
  .hs-media__ring {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .service-hs-item__arrow { animation: none !important; }
  .services-hs__progress i { animation: none !important; }
}

/* Timeline (legacy) */
.timeline {
  max-width: 640px;
  margin: 48px auto 0;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  padding-bottom: 40px;
  position: relative;
}

.timeline__num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--inri-red);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--inri-red);
  z-index: 1;
}

.timeline__body h3 {
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.timeline__body p { color: var(--text-muted); }

/* About home — 3D company intro */
.about-home {
  position: relative;
  overflow: hidden;
}

.about-home__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
}

.about-home__visual {
  position: relative;
  height: 420px;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}

.about-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-16deg);
  will-change: transform;
}

.about-3d.is-auto {
  animation: aboutAutoTilt 8s ease-in-out infinite;
}

@keyframes aboutAutoTilt {
  0%, 100% { transform: rotateX(8deg) rotateY(-16deg); }
  50% { transform: rotateX(5deg) rotateY(-8deg); }
}

.about-3d__ring {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border: 1px dashed rgba(227, 6, 19, 0.28);
  border-radius: 50%;
  transform: translateZ(-40px) rotateX(68deg);
  animation: aboutRing 20s linear infinite;
}

.about-3d__ring--2 {
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-color: rgba(227, 6, 19, 0.14);
  animation-duration: 28s;
  animation-direction: reverse;
}

@keyframes aboutRing {
  to { transform: translateZ(-40px) rotateX(68deg) rotateZ(360deg); }
}

.about-3d__platform {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 240px;
  height: 70px;
  margin-left: -120px;
  background: radial-gradient(ellipse, rgba(227, 6, 19, 0.22), transparent 70%);
  border-radius: 50%;
  transform: translateZ(-20px) rotateX(75deg);
  filter: blur(2px);
  animation: aboutPlatform 3.5s ease-in-out infinite;
}

@keyframes aboutPlatform {
  0%, 100% { opacity: 0.5; transform: translateZ(-20px) rotateX(75deg) scale(1); }
  50% { opacity: 0.9; transform: translateZ(-20px) rotateX(75deg) scale(1.08); }
}

.about-3d__card {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(78%, 280px);
  transform: translate(-50%, -50%) translateZ(40px);
  transform-style: preserve-3d;
  animation: aboutCardFloat 5.5s ease-in-out infinite;
}

@keyframes aboutCardFloat {
  0%, 100% { transform: translate(-50%, -50%) translateZ(40px) translateY(0); }
  50% { transform: translate(-50%, -50%) translateZ(40px) translateY(-10px); }
}

.about-3d__card-depth {
  position: absolute;
  inset: 8px -6px -6px 8px;
  border-radius: 18px;
  background: var(--inri-red);
  transform: translateZ(-14px);
  opacity: 0.8;
}

.about-3d__card-face {
  position: relative;
  padding: 28px 24px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  transform: translateZ(12px);
}

.about-3d__card-face img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 12px;
}

.about-3d__card-face strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.about-3d__card-face span {
  font-size: 0.82rem;
  color: var(--inri-red);
  font-weight: 600;
}

.about-3d__badge {
  position: absolute;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
  color: var(--text);
  white-space: nowrap;
}

.about-3d__badge--1 {
  top: 12%;
  left: 4%;
  transform: translateZ(120px);
  animation: aboutBadge1 4.5s ease-in-out infinite;
}
.about-3d__badge--2 {
  top: 18%;
  right: 2%;
  transform: translateZ(140px);
  animation: aboutBadge2 5s ease-in-out infinite;
}
.about-3d__badge--3 {
  bottom: 22%;
  left: 0;
  transform: translateZ(110px);
  color: var(--inri-red);
  animation: aboutBadge3 4.8s ease-in-out infinite;
}
.about-3d__badge--4 {
  bottom: 14%;
  right: 6%;
  transform: translateZ(130px);
  animation: aboutBadge1 5.2s ease-in-out infinite 0.4s;
}
.about-3d__badge--5 {
  top: 42%;
  right: -2%;
  transform: translateZ(100px);
  animation: aboutBadge2 4.6s ease-in-out infinite 0.2s;
}

@keyframes aboutBadge1 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes aboutBadge2 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 8px; }
}
@keyframes aboutBadge3 {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px -6px; }
}

.about-home__title {
  margin-bottom: 16px;
}

.about-home__title .accent {
  background: linear-gradient(135deg, var(--inri-red), #ff5a63);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-home__lead {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: 54ch;
}

.about-home__lead strong {
  color: var(--text);
}

.about-home__tech {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 54ch;
}

.about-home__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.about-home__tags span {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}

.about-home__tags span:hover {
  color: var(--inri-red);
  border-color: rgba(227, 6, 19, 0.35);
  background: var(--inri-red-soft);
  transform: translateY(-2px);
}

.about-home__btn {
  display: inline-flex;
}

@media (max-width: 900px) {
  .about-home__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-home__visual {
    height: 340px;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
  .about-3d__badge--5,
  .about-3d__ring--2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-3d.is-auto,
  .about-3d__ring,
  .about-3d__platform,
  .about-3d__card,
  .about-3d__badge {
    animation: none !important;
  }
}

/* Why choose us — 3D parallax */
.why-parallax {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

.why-parallax__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.why-float {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

.why-float--cube {
  top: 12%;
  left: 6%;
  width: 64px;
  height: 64px;
  background: linear-gradient(145deg, rgba(227,6,19,0.35), rgba(227,6,19,0.08));
  border: 1px solid rgba(227,6,19,0.35);
  border-radius: 12px;
  transform: rotate(18deg);
  animation: whySpin 16s linear infinite;
}

.why-float--ring {
  top: 28%;
  right: 8%;
  width: 90px;
  height: 90px;
  border: 5px solid rgba(227,6,19,0.35);
  border-radius: 50%;
  border-top-color: transparent;
  animation: whySpin 10s linear infinite reverse;
}

.why-float--sphere {
  bottom: 18%;
  left: 12%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #ff6b73, var(--inri-red) 60%, #8B000E);
  box-shadow: 0 10px 24px rgba(227,6,19,0.25);
  animation: whyBob 5s ease-in-out infinite;
}

.why-float--bar {
  bottom: 22%;
  right: 14%;
  width: 14px;
  height: 70px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--inri-red), #8B000E);
  transform: rotate(12deg);
  animation: whyBob 4s ease-in-out infinite reverse;
}

@keyframes whySpin {
  to { transform: rotate(378deg); }
}

@keyframes whyBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.why-parallax__head {
  position: relative;
  z-index: 2;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.why-parallax.is-inview .why-parallax__head {
  opacity: 1;
  transform: none;
}

.why-track {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}

.why-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  perspective: 900px;
}

.why-parallax.is-inview .why-card {
  opacity: 1;
  transform: none;
}

.why-parallax.is-inview .why-card:nth-child(1) {
  transition-delay: 0.1s;
  animation: whyBob 3.6s ease-in-out 0.8s infinite;
}
.why-parallax.is-inview .why-card:nth-child(2) {
  transition-delay: 0.22s;
  animation: whyBobAlt 4s ease-in-out 1s infinite;
}
.why-parallax.is-inview .why-card:nth-child(3) {
  transition-delay: 0.34s;
  animation: whyBob 4.2s ease-in-out 1.15s infinite;
}
.why-parallax.is-inview .why-card:nth-child(4) {
  transition-delay: 0.46s;
  animation: whyBobAlt 3.8s ease-in-out 1.3s infinite;
}

@keyframes whyBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes whyBobAlt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

.why-parallax.is-inview .why-card:hover {
  animation-play-state: paused;
}

.why-card--offset {
  margin-top: 48px;
}

.why-card__3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease);
  will-change: transform;
}

.why-card__depth {
  position: absolute;
  inset: 10px -8px -8px 10px;
  background: var(--inri-red);
  border-radius: 18px;
  transform: translateZ(-18px);
  opacity: 0.75;
}

.why-card__face {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  transform: translateZ(0);
  overflow: hidden;
  min-height: 280px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.why-card:hover .why-card__face {
  border-color: rgba(227, 6, 19, 0.35);
  box-shadow: 0 24px 50px rgba(227, 6, 19, 0.12);
}

.why-card__face::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(227,6,19,0.12), transparent 70%);
  pointer-events: none;
}

.why-card__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--inri-red);
  margin-bottom: 16px;
  letter-spacing: 0.06em;
}

.why-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--inri-red-soft);
  color: var(--inri-red);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 18px;
  transform: translateZ(30px);
}

.why-card__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.why-card__face h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  transform: translateZ(20px);
}

.why-card__face p {
  color: var(--text-muted);
  font-size: 0.975rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.why-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.why-card__tags span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-alt);
}

@media (max-width: 900px) {
  .why-track { grid-template-columns: 1fr; }
  .why-card--offset { margin-top: 0; }
  .why-float--bar,
  .why-float--cube { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .why-float,
  .why-parallax__head,
  .why-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Stats — premium 3D counters */
.stats-section {
  position: relative;
  overflow: hidden;
}

.stats-section__head {
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.stats-section.is-inview .stats-section__head {
  opacity: 1;
  transform: none;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  perspective: 1000px;
}

.stat {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  perspective: 800px;
}

.stats-section.is-inview .stat {
  opacity: 1;
  transform: none;
}

.stats-section.is-inview .stat:nth-child(1) { transition-delay: 0.05s; }
.stats-section.is-inview .stat:nth-child(2) { transition-delay: 0.15s; }
.stats-section.is-inview .stat:nth-child(3) { transition-delay: 0.25s; }
.stats-section.is-inview .stat:nth-child(4) { transition-delay: 0.35s; }

.stat__3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease);
}

.stat__depth {
  position: absolute;
  inset: 8px -6px -6px 8px;
  background: var(--inri-red);
  border-radius: 16px;
  transform: translateZ(-14px);
  opacity: 0.7;
}

.stat__face {
  position: relative;
  text-align: center;
  padding: 40px 20px 36px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.05);
  overflow: hidden;
  transform: translateZ(0);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.stat:hover .stat__face {
  border-color: rgba(227, 6, 19, 0.3);
  box-shadow: 0 18px 40px rgba(227, 6, 19, 0.1);
}

.stat__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 2px solid rgba(227, 6, 19, 0.12);
  border-top-color: rgba(227, 6, 19, 0.55);
  border-radius: 50%;
  transform: translateZ(-1px);
  opacity: 0;
  transition: opacity 0.4s;
}

.stats-section.is-inview .stat__ring {
  opacity: 1;
  animation: statRingSpin 6s linear infinite;
}

.stats-section.is-inview .stat:nth-child(2) .stat__ring { animation-duration: 7s; animation-direction: reverse; }
.stats-section.is-inview .stat:nth-child(3) .stat__ring { animation-duration: 5.5s; }
.stats-section.is-inview .stat:nth-child(4) .stat__ring { animation-duration: 8s; animation-direction: reverse; }

@keyframes statRingSpin {
  to { transform: translateZ(-1px) rotate(360deg); }
}

.stat__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--inri-crimson, #8B000E), var(--inri-red), #ff5a63);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateZ(24px);
}

[data-theme="dark"] .stat__num {
  background: linear-gradient(135deg, #ff8a90, var(--inri-red-bright, #FF2A36), #fff);
  -webkit-background-clip: text;
  background-clip: text;
}

.stat__label {
  position: relative;
  z-index: 1;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transform: translateZ(16px);
}

.stat__num.is-counting {
  animation: statPulse 0.35s ease;
}

@keyframes statPulse {
  0% { transform: translateZ(24px) scale(1); }
  50% { transform: translateZ(24px) scale(1.04); }
  100% { transform: translateZ(24px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stat,
  .stats-section__head,
  .stat__ring {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Case cards (legacy / other pages) */
.cases-stack {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-card {
  position: relative;
  top: auto;
  margin-bottom: 0;
  min-height: auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bg);
}

.case-card:nth-child(2),
.case-card:nth-child(3) { top: auto; }

.case-card__media {
  background: var(--bg-alt);
  min-height: 260px;
  position: relative;
  border-right: 1px solid var(--border);
}

.case-card__media::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  opacity: 0.08;
}

.case-card__body {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-card__body h3 {
  font-size: 1.75rem;
  margin-bottom: 12px;
}

.case-card__body p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Featured work — interactive */
.featured-work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.featured-work.is-inview .featured-work__head {
  opacity: 1;
  transform: none;
}

.featured-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.featured-filters__btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

.featured-filters__btn:hover {
  color: var(--text);
  background: var(--bg);
}

.featured-filters__btn.is-active {
  background: var(--inri-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.28);
}

.featured-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.featured-card {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease),
    max-height 0.45s var(--ease),
    margin 0.45s,
    padding 0.45s;
  max-height: 900px;
  perspective: 1000px;
}

.featured-work.is-inview .featured-card.is-visible {
  opacity: 1;
  transform: none;
}

.featured-work.is-inview .featured-card.is-visible:nth-child(1) { transition-delay: 0.08s; }
.featured-work.is-inview .featured-card.is-visible:nth-child(2) { transition-delay: 0.16s; }
.featured-work.is-inview .featured-card.is-visible:nth-child(3) { transition-delay: 0.24s; }

.featured-card.is-hidden {
  opacity: 0 !important;
  transform: scale(0.96) translateY(12px) !important;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.featured-card__3d {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 12px 36px rgba(0,0,0,0.05);
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.3s;
}

.featured-card:hover .featured-card__3d {
  border-color: rgba(227, 6, 19, 0.3);
  box-shadow: 0 20px 48px rgba(227, 6, 19, 0.1);
}

.featured-card__media {
  position: relative;
  display: block;
  min-height: 280px;
  overflow: hidden;
  background: #0e1014;
}

.featured-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
  transition: transform 0.6s var(--ease), filter 0.45s;
  filter: saturate(1.05) contrast(1.02);
}

.featured-card:hover .featured-card__media img {
  transform: scale(1.08);
  filter: saturate(1.1);
}

.featured-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10,10,12,0.72));
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}

.featured-card:hover .featured-card__overlay {
  opacity: 1;
}

.featured-card__play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--inri-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  transform: translateY(10px);
  transition: transform 0.35s var(--ease);
}

.featured-card:hover .featured-card__play {
  transform: translateY(0);
}

.featured-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--inri-red);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

[data-theme="dark"] .featured-card__badge {
  background: rgba(20,20,24,0.9);
}

.featured-card__body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-card__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.featured-card__body h3 {
  font-size: 1.75rem;
  margin-bottom: 12px;
}

.featured-card__body p {
  color: var(--text-muted);
  margin-bottom: 22px;
  line-height: 1.65;
}

.featured-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.featured-card__metrics div {
  padding: 12px 10px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 0.3s, border-color 0.3s;
}

.featured-card:hover .featured-card__metrics div {
  border-color: rgba(227, 6, 19, 0.2);
}

.featured-card:hover .featured-card__metrics div:nth-child(1) { transform: translateY(-3px); transition-delay: 0.02s; }
.featured-card:hover .featured-card__metrics div:nth-child(2) { transform: translateY(-3px); transition-delay: 0.06s; }
.featured-card:hover .featured-card__metrics div:nth-child(3) { transform: translateY(-3px); transition-delay: 0.1s; }

.featured-card__metrics strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--inri-red);
  margin-bottom: 2px;
}

.featured-card__metrics span {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.featured-card__cta {
  align-self: flex-start;
  transition: transform 0.25s;
}

.featured-card:hover .featured-card__cta {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .featured-card__3d { grid-template-columns: 1fr; }
  .featured-card__media { min-height: 220px; position: relative; }
  .featured-card__media img { position: absolute; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-work__head,
  .featured-card,
  .featured-card__media img,
  .featured-card__metrics div {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* CTA */
.cta-band {
  position: relative;
  margin: 40px 24px 80px;
  border-radius: 20px;
  overflow: hidden;
  padding: 80px 40px;
  text-align: center;
  background: linear-gradient(135deg, #8B000E, var(--inri-red) 45%, #ff3b45);
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.18), transparent 45%);
  animation: ctaShimmer 8s ease-in-out infinite;
  display: block;
}

@keyframes ctaShimmer {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.cta-band__inner { position: relative; z-index: 1; }

.cta-band h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  margin-bottom: 12px;
}

.cta-band p {
  color: rgba(255,255,255,0.9);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.cta-band .btn--ghost {
  background: #fff;
  border-color: #fff;
  color: var(--inri-red);
}

.cta-band .btn--ghost:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* ========== ABOUT PAGE — interactive 3D ========== */
.page-about {
  overflow-x: hidden;
}

.page-about [data-about-section] {
  position: relative;
  overflow: hidden;
}

.about-section__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.about-shape {
  position: absolute;
  will-change: transform;
  opacity: 0.35;
}

.about-shape--cube {
  width: 48px;
  height: 48px;
  top: 18%;
  right: 8%;
  border: 2px solid rgba(227, 6, 19, 0.45);
  border-radius: 10px;
  transform: rotate(18deg);
  animation: aboutShapeSpin 14s linear infinite;
}

.about-shape--ring {
  width: 90px;
  height: 90px;
  bottom: 16%;
  left: 6%;
  border: 2px dashed rgba(227, 6, 19, 0.3);
  border-radius: 50%;
  animation: aboutShapePulse 6s ease-in-out infinite;
}

.about-shape--dot {
  width: 14px;
  height: 14px;
  top: 40%;
  left: 12%;
  border-radius: 50%;
  background: var(--inri-red);
  box-shadow: 0 0 0 8px rgba(227, 6, 19, 0.12);
  animation: aboutShapeBob 4.5s ease-in-out infinite;
}

.about-shape--dot-2 {
  top: auto;
  bottom: 22%;
  left: auto;
  right: 10%;
  animation-delay: 0.8s;
}

@keyframes aboutShapeSpin {
  to { transform: rotate(378deg); }
}

@keyframes aboutShapePulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.12); opacity: 0.55; }
}

@keyframes aboutShapeBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.page-about [data-about-section].is-inview .about-card-float {
  animation: aboutCardBob 4.2s ease-in-out infinite;
}

.page-about [data-about-section].is-inview .about-card-float--alt {
  animation: aboutCardBobAlt 4.8s ease-in-out infinite;
}

@keyframes aboutCardBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes aboutCardBobAlt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

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

.page-about [data-about-section].is-inview .about-timeline__item:nth-child(1) { animation-delay: 0s; }
.page-about [data-about-section].is-inview .about-timeline__item:nth-child(2) { animation-delay: 0.2s; }
.page-about [data-about-section].is-inview .about-timeline__item:nth-child(3) { animation-delay: 0.4s; }
.page-about [data-about-section].is-inview .about-timeline__item:nth-child(4) { animation-delay: 0.6s; }
.page-about [data-about-section].is-inview .about-timeline__item:nth-child(5) { animation-delay: 0.8s; }

.page-about .about-who__tabs button,
.page-about .about-values__nav button {
  transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.page-about [data-about-section] > .container,
.page-about [data-about-section] > .cta-band__inner {
  position: relative;
  z-index: 1;
}

.about-hero {
  position: relative;
  padding: calc(var(--nav-h) + 100px) 0 72px;
  overflow: hidden;
}

.about-hero__float-words {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.about-hero__float-words span {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--text);
  opacity: 0.04;
  letter-spacing: -0.04em;
  white-space: nowrap;
  will-change: transform;
}

.about-hero__float-words span:nth-child(1) { top: 18%; left: 4%; }
.about-hero__float-words span:nth-child(2) { top: 42%; right: 2%; }
.about-hero__float-words span:nth-child(3) { bottom: 22%; left: 18%; }
.about-hero__float-words span:nth-child(4) { top: 12%; right: 22%; font-size: clamp(3rem, 10vw, 6rem); }

.about-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 0.08em;
}

.about-hero__title .accent {
  background: linear-gradient(135deg, var(--inri-red), #ff5a63);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-hero__line {
  display: block;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-hero__line--l { transform: translateX(-48px); }
.about-hero__line--r { transform: translateX(48px); }

.about-hero__copy.is-revealed .about-hero__line {
  opacity: 1;
  transform: none;
}

.about-hero__copy.is-revealed .eyebrow { transition-delay: 0.05s; }
.about-hero__copy.is-revealed .about-hero__title .about-hero__line--l { transition-delay: 0.12s; }
.about-hero__copy.is-revealed .about-hero__title .about-hero__line--r { transition-delay: 0.22s; }
.about-hero__copy.is-revealed .about-hero__desc { transition-delay: 0.32s; }
.about-hero__copy.is-revealed .about-hero__actions { transition-delay: 0.42s; }

.about-hero__desc {
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 48ch;
  margin-bottom: 28px;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.about-hero__visual {
  height: 460px;
  perspective: 1400px;
}

.about-page-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-18deg);
  will-change: transform;
}

.about-page-3d.is-auto {
  animation: aboutPageTilt 8s ease-in-out infinite;
}

@keyframes aboutPageTilt {
  0%, 100% { transform: rotateX(10deg) rotateY(-18deg); }
  50% { transform: rotateX(6deg) rotateY(-8deg); }
}

.about-page-3d__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border: 1px dashed rgba(227, 6, 19, 0.3);
  border-radius: 50%;
  transform: translateZ(-30px) rotateX(68deg);
  animation: aboutPageRing 18s linear infinite;
}

.about-page-3d__ring--2 {
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  border-color: rgba(227, 6, 19, 0.14);
  animation-duration: 26s;
  animation-direction: reverse;
}

@keyframes aboutPageRing {
  to { transform: translateZ(-30px) rotateX(68deg) rotateZ(360deg); }
}

.about-page-3d__shot {
  position: absolute;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--bg);
  box-shadow: 0 22px 50px rgba(0,0,0,0.28);
}

.about-page-3d__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page-3d__shot--main {
  left: 50%;
  top: 48%;
  width: min(78%, 300px);
  height: 340px;
  transform: translate(-50%, -50%) translateZ(40px);
  animation: aboutShotMain 5.5s ease-in-out infinite;
}

@keyframes aboutShotMain {
  0%, 100% { transform: translate(-50%, -50%) translateZ(40px) translateY(0); }
  50% { transform: translate(-50%, -50%) translateZ(40px) translateY(-12px); }
}

.about-page-3d__shot--main figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  color: #fff;
}

.about-page-3d__shot--main figcaption img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}

.about-page-3d__shot--main figcaption strong {
  display: block;
  font-size: 0.9rem;
}

.about-page-3d__shot--main figcaption span {
  font-size: 0.7rem;
  opacity: 0.8;
}

.about-page-3d__shot--top {
  width: 150px;
  height: 110px;
  top: 6%;
  right: 0;
  transform: translateZ(130px) rotateY(-8deg);
  animation: aboutShotFloat 4.8s ease-in-out infinite;
}

.about-page-3d__shot--side {
  width: 140px;
  height: 160px;
  bottom: 4%;
  left: 0;
  transform: translateZ(110px) rotateY(10deg);
  animation: aboutShotFloat 5.2s ease-in-out infinite 0.4s;
}

@keyframes aboutShotFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.about-page-3d__shot span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

.about-page-3d__chip {
  position: absolute;
  z-index: 3;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.about-page-3d__chip--1 { top: 28%; left: -2%; transform: translateZ(150px); animation: aboutChip1 4.5s ease-in-out infinite; }
.about-page-3d__chip--2 { top: 8%; left: 18%; transform: translateZ(160px); animation: aboutChip2 5s ease-in-out infinite; }
.about-page-3d__chip--3 { bottom: 28%; right: -4%; transform: translateZ(145px); color: var(--inri-red); animation: aboutChip1 4.8s ease-in-out infinite 0.3s; }
.about-page-3d__chip--4 { bottom: 8%; right: 18%; transform: translateZ(120px); animation: aboutChip2 5.2s ease-in-out infinite 0.2s; }

@keyframes aboutChip1 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes aboutChip2 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 8px; }
}

.about-card-3d {
  perspective: 900px;
  transform-style: preserve-3d;
}

.about-card-3d__face {
  position: relative;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 28px;
  transform: translateZ(16px);
  transition: transform 0.2s ease-out, box-shadow 0.25s;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.about-card-3d__depth {
  position: absolute;
  inset: 10px -8px -8px 10px;
  border-radius: 18px;
  background: var(--inri-red);
  opacity: 0.7;
  transform: translateZ(-14px);
}

.about-who__head,
.about-vm__head,
.about-values__head,
.about-clients__head,
.about-journey__head,
.about-team__head {
  margin-bottom: 36px;
}

.about-who__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.about-who__tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-who__tabs button {
  appearance: none;
  text-align: left;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.about-who__tabs button:hover {
  transform: translateX(4px);
  border-color: rgba(227, 6, 19, 0.35);
}

.about-who__tabs button.is-active {
  background: var(--inri-red);
  border-color: var(--inri-red);
  color: #fff;
  box-shadow: 0 12px 28px rgba(227, 6, 19, 0.28);
}

.about-who__panel[hidden] { display: none; }

.about-who__panel h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.about-who__panel p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}

.about-who__panel p strong { color: var(--text); }

.about-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.about-check li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  font-size: 0.95rem;
}

.about-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--inri-red);
}

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

.about-who__stats div {
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  text-align: center;
}

.about-who__stats strong {
  display: block;
  font-size: 1.4rem;
  color: var(--inri-red);
  margin-bottom: 2px;
}

.about-who__stats span {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.about-vm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.about-vm__card {
  position: relative;
}

.about-vm__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inri-red);
  margin-bottom: 12px;
}

.about-vm__card h3 {
  font-size: 1.45rem;
  margin-bottom: 12px;
}

.about-vm__card p {
  color: var(--text-muted);
  line-height: 1.7;
}

.about-vm__glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.25), transparent 70%);
  top: -20px;
  right: -10px;
  pointer-events: none;
  animation: aboutVmGlow 5s ease-in-out infinite;
}

@keyframes aboutVmGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.about-values__ui {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  align-items: start;
}

.about-values__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-values__nav button {
  appearance: none;
  text-align: left;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.about-values__nav button.is-active {
  background: linear-gradient(135deg, var(--inri-red), #c10510);
  border-color: transparent;
  color: #fff;
  transform: translateX(6px);
  box-shadow: 0 14px 32px rgba(227, 6, 19, 0.3);
}

.about-value-panel[hidden] { display: none; }

.about-value-panel.is-active .about-card-3d__face {
  animation: aboutPanelIn 0.4s ease both;
}

@keyframes aboutPanelIn {
  from { opacity: 0; transform: translateZ(16px) translateY(14px); }
  to { opacity: 1; transform: translateZ(16px) translateY(0); }
}

.about-value-panel__icon {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--inri-red);
  margin-bottom: 10px;
}

.about-value-panel h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.about-value-panel p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 18px;
}

/* About — clients (3D orbit + logos) */
.about-clients {
  --clients-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.about-clients::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(227, 6, 19, 0.12), transparent 55%),
    linear-gradient(180deg, transparent, rgba(227, 6, 19, 0.04) 50%, transparent);
  pointer-events: none;
  z-index: 0;
}

.about-clients::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.about-clients > .container {
  position: relative;
  z-index: 1;
}

.about-clients__title .accent {
  background: linear-gradient(135deg, var(--inri-red), #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-clients__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.about-clients__stats span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: border-color 0.3s, transform 0.35s var(--clients-ease), box-shadow 0.35s;
}

.about-clients.is-inview .about-clients__stats span {
  animation: aboutClientsStatPop 0.7s var(--clients-ease) both;
}

.about-clients.is-inview .about-clients__stats span:nth-child(1) { animation-delay: 0.1s; }
.about-clients.is-inview .about-clients__stats span:nth-child(2) { animation-delay: 0.22s; }
.about-clients.is-inview .about-clients__stats span:nth-child(3) { animation-delay: 0.34s; }

.about-clients__stats span:hover {
  border-color: rgba(227, 6, 19, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(227, 6, 19, 0.12);
}

.about-clients__stats strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--inri-red);
}

@keyframes aboutClientsStatPop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.about-clients__stage {
  position: relative;
  margin-bottom: 52px;
  padding: 28px 20px 36px;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), transparent 45%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.about-clients__stage-border {
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  padding: 2px;
  background: conic-gradient(from var(--clients-border-angle, 0deg), transparent, var(--inri-red), transparent 35%, transparent 65%, rgba(227, 6, 19, 0.5), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.65;
  animation: aboutClientsBorderSpin 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes aboutClientsBorderSpin {
  to { --clients-border-angle: 360deg; }
}

@property --clients-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.about-clients__stage-floor {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 72%;
  height: 24%;
  transform: translateX(-50%) rotateX(72deg);
  background: radial-gradient(ellipse, rgba(227, 6, 19, 0.25), transparent 70%);
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
  animation: aboutClientsFloorPulse 4s ease-in-out infinite;
}

@keyframes aboutClientsFloorPulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) rotateX(72deg) scale(1); }
  50% { opacity: 0.75; transform: translateX(-50%) rotateX(72deg) scale(1.08); }
}

.about-clients__strip {
  margin: 48px 0 44px;
}

.about-clients__strip-head {
  margin-bottom: 28px;
}

.about-clients__strip-head .eyebrow {
  margin-bottom: 0;
}

.clients-strip {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.clients-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.clients-strip__track {
  display: flex;
  width: max-content;
  animation: clientsStripScroll 55s linear infinite;
  will-change: transform;
  position: relative;
  z-index: 1;
  padding: 20px 0;
}

.about-clients.is-inview .clients-strip__track {
  animation-duration: 48s;
}

.clients-strip.is-hover-boost .clients-strip__track {
  animation-duration: 38s;
}

.clients-strip:hover .clients-strip__track {
  animation-play-state: paused;
}

.clients-strip__group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
}

.clients-strip__logo {
  flex-shrink: 0;
  width: 132px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
  opacity: 0.88;
  animation: clientsStripLogoFloat 4.2s ease-in-out infinite;
  animation-play-state: paused;
  transition:
    opacity 0.55s var(--clients-ease),
    transform 0.4s var(--clients-ease),
    box-shadow 0.4s,
    border-color 0.4s;
}

.about-clients.is-inview .clients-strip__logo {
  animation-play-state: running;
  opacity: 1;
}

.about-clients.is-inview .about-clients__strip-head .eyebrow {
  animation: clientsStripHeadIn 0.85s var(--clients-ease) both;
}

@keyframes clientsStripHeadIn {
  from {
    opacity: 0;
    letter-spacing: 0.05em;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.12em;
    transform: none;
  }
}

.clients-strip__logo:nth-child(3n) {
  animation-delay: 0.15s;
}

.clients-strip__logo:nth-child(3n + 1) {
  animation-delay: 0.55s;
}

.clients-strip__logo:nth-child(3n + 2) {
  animation-delay: 0.95s;
}

.clients-strip__logo:nth-child(5n) {
  animation-duration: 4.8s;
}

.clients-strip__logo:nth-child(7n) {
  animation-duration: 3.9s;
}

.clients-strip__logo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(227, 6, 19, 0.08), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 0;
}

.clients-strip__logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.65) 48%,
    transparent 62%
  );
  transform: translateX(-130%);
  animation: clientsStripLogoShine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.clients-strip__logo:nth-child(4n)::after {
  animation-delay: 1.2s;
}

.clients-strip__logo:nth-child(4n + 2)::after {
  animation-delay: 2.4s;
}

@keyframes clientsStripLogoFloat {
  0%, 100% {
    translate: 0 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
  50% {
    translate: 0 -7px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  }
}

@keyframes clientsStripLogoShine {
  0%, 72% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

[data-theme="light"] .clients-strip__logo {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
}

.clients-strip__logo img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 0.45s var(--clients-ease), filter 0.35s;
}

.clients-strip__logo:hover {
  transform: translateY(-6px) scale(1.05);
  border-color: rgba(227, 6, 19, 0.35);
  box-shadow:
    0 16px 36px rgba(227, 6, 19, 0.18),
    0 0 0 1px rgba(227, 6, 19, 0.12);
  animation-play-state: paused;
}

.clients-strip__logo:hover::before {
  opacity: 1;
}

.clients-strip__logo:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 8px rgba(227, 6, 19, 0.12));
}

.clients-strip:hover .clients-strip__logo:not(:hover) {
  animation-play-state: paused;
}

@keyframes clientsStripScroll {
  to { transform: translateX(-50%); }
}

.about-clients__orbit-wrap {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  perspective: 1800px;
  opacity: 0;
  transform: translateY(48px) scale(0.88);
  transition: opacity 1s var(--clients-ease), transform 1s var(--clients-ease);
}

.about-clients.is-inview .about-clients__orbit-wrap,
.about-clients__orbit-wrap.is-revealed {
  opacity: 1;
  transform: none;
}

.about-clients__fx {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
}

.about-clients__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  animation: aboutClientsGlowDrift 8s ease-in-out infinite;
}

.about-clients__glow--1 {
  width: 180px;
  height: 180px;
  top: 12%;
  left: 8%;
  background: rgba(227, 6, 19, 0.45);
}

.about-clients__glow--2 {
  width: 160px;
  height: 160px;
  bottom: 10%;
  right: 6%;
  background: rgba(227, 6, 19, 0.28);
  animation-delay: -3s;
  animation-duration: 10s;
}

.about-clients__spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--inri-red);
  box-shadow: 0 0 12px rgba(227, 6, 19, 0.8);
  left: calc(18% + var(--s) * 12%);
  top: calc(20% + (var(--s) % 3) * 22%);
  animation: aboutClientsSpark 3.8s ease-in-out infinite;
  animation-delay: calc(var(--s) * 0.45s);
}

.about-clients__spotlight {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.22), transparent 68%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.35s;
  left: 50%;
  top: 50%;
  mix-blend-mode: screen;
}

.about-clients__orbit-wrap:hover .about-clients__spotlight {
  opacity: 1;
}

.about-clients-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 420px;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-8deg);
  z-index: 2;
}

.about-clients-3d.is-auto-tilt {
  animation: aboutClientsAutoTilt 7s ease-in-out infinite;
}

@keyframes aboutClientsAutoTilt {
  0%, 100% { transform: rotateX(10deg) rotateY(-14deg); }
  33% { transform: rotateX(16deg) rotateY(6deg); }
  66% { transform: rotateX(8deg) rotateY(12deg); }
}

.about-clients-3d__orbit:hover {
  animation-duration: 18s;
}

.about-clients-3d__ring {
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(227, 6, 19, 0.4);
  border-radius: 50%;
  transform: translateZ(-40px) rotateX(72deg);
  animation: aboutClientsRingPulse 4s ease-in-out infinite, aboutClientsRingSpin 22s linear infinite;
}

.about-clients-3d__ring--2 {
  inset: 22%;
  border-style: solid;
  border-color: rgba(227, 6, 19, 0.16);
  animation-delay: 0.4s, 0s;
  animation-duration: 4.5s, 30s;
  animation-direction: alternate, reverse;
}

.about-clients-3d__ring--3 {
  inset: 4%;
  border: 1px solid rgba(227, 6, 19, 0.12);
  transform: translateZ(-80px) rotateX(72deg);
  animation: aboutClientsRingPulse 5.5s ease-in-out infinite 0.8s, aboutClientsRingSpin 40s linear infinite reverse;
}

.about-clients-3d__beam {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(227, 6, 19, 0.35) 40deg, transparent 80deg);
  transform: translateZ(-60px) rotateX(70deg);
  animation: aboutClientsBeamSpin 6s linear infinite;
  opacity: 0.55;
  filter: blur(1px);
  mask-image: radial-gradient(circle, transparent 55%, #000 58%, #000 72%, transparent 75%);
}

.about-clients-3d__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 148px;
  margin: -74px 0 0 -74px;
  padding: 22px 14px;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(227, 6, 19, 0.12),
    0 0 60px rgba(227, 6, 19, 0.2);
  text-align: center;
  transform: translateZ(90px);
  z-index: 3;
  animation: aboutClientsHubFloat 5s ease-in-out infinite;
  overflow: hidden;
}

.about-clients-3d__hub-pulse {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.28), transparent 62%);
  animation: aboutClientsHubPulse 2.8s ease-out infinite;
  pointer-events: none;
}

.about-clients-3d__hub img {
  position: relative;
  width: 44px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
  animation: aboutClientsHubLogo 3.5s ease-in-out infinite;
}

.about-clients-3d__hub strong {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--inri-red);
}

.about-clients-3d__hub span {
  position: relative;
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.about-clients-3d__orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: aboutClientsOrbitSpin 32s linear infinite;
}

.about-clients-3d__slot {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg));
}

.about-clients-3d__logo {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 118px;
  margin-left: -59px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateZ(130px) rotateY(calc(var(--i) * -45deg));
  transition: border-color 0.3s, box-shadow 0.3s, scale 0.35s var(--clients-ease);
  overflow: hidden;
  opacity: 0;
  animation:
    aboutClientsLogoIn 0.85s var(--clients-ease) forwards,
    aboutClientsLogoFloat 3.2s ease-in-out infinite;
  animation-delay:
    calc(0.35s + var(--i) * 0.08s),
    calc(0.9s + var(--i) * 0.12s);
}

.about-clients-3d__orbit.is-boost {
  animation-duration: 22s;
}

.about-clients-3d__orbit.is-slow {
  animation-duration: 48s;
}

.about-clients.is-inview .about-clients-3d__logo {
  animation-play-state: running;
}

.about-clients-3d__logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: aboutClientsShine 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.35s);
}

.about-clients-3d__logo img {
  width: 100%;
  height: 40px;
  object-fit: contain;
  display: block;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.about-clients-3d__logo:hover {
  border-color: var(--inri-red);
  box-shadow: 0 18px 44px rgba(227, 6, 19, 0.28);
}

@keyframes aboutClientsOrbitSpin {
  to { transform: rotateY(360deg); }
}

@keyframes aboutClientsRingSpin {
  to { transform: translateZ(-40px) rotateX(72deg) rotate(360deg); }
}

@keyframes aboutClientsBeamSpin {
  to { transform: translateZ(-60px) rotateX(70deg) rotate(360deg); }
}

@keyframes aboutClientsRingPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes aboutClientsLogoFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes aboutClientsLogoIn {
  from {
    opacity: 0;
    transform: translateZ(40px) rotateY(calc(var(--i) * -45deg)) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translateZ(130px) rotateY(calc(var(--i) * -45deg)) scale(1);
  }
}

@keyframes aboutClientsShine {
  0%, 70% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes aboutClientsHubFloat {
  0%, 100% { transform: translateZ(90px) translateY(0); }
  50% { transform: translateZ(100px) translateY(-8px); }
}

@keyframes aboutClientsHubPulse {
  0% { opacity: 0.7; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes aboutClientsHubLogo {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(-3deg); }
}

@keyframes aboutClientsGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -14px) scale(1.15); }
}

@keyframes aboutClientsSpark {
  0%, 100% {
    opacity: 0.15;
    transform: translateY(0) scale(0.7);
  }
  40% {
    opacity: 1;
    transform: translateY(-28px) scale(1.2);
  }
  70% {
    opacity: 0.4;
    transform: translateY(-48px) scale(0.85);
  }
}

.about-clients__wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  transform: translate3d(calc(var(--wall-mx, 0) * 8px), calc(var(--wall-my, 0) * 6px), 0);
  transition: transform 0.2s ease-out;
}

.about-clients__tile {
  perspective: 1000px;
  opacity: 0;
  transform: translateY(32px) scale(0.9) rotateX(8deg);
  transition:
    opacity 0.75s var(--clients-ease),
    transform 0.75s var(--clients-ease);
  transition-delay: calc(var(--c, 0) * 0.035s);
}

.about-clients.is-inview .about-clients__tile {
  opacity: 1;
  transform: none;
  animation: aboutClientsTileWave 6s ease-in-out infinite;
  animation-delay: calc(0.4s + var(--c, 0) * 0.12s);
}

@keyframes aboutClientsTileWave {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(-6px - (var(--c, 0) % 3) * 2px); }
}

.about-clients__tile .about-card-3d__face {
  position: relative;
  min-height: 118px;
  padding: 20px 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.4s, border-color 0.4s, background 0.4s;
}

.about-clients__tile .about-card-3d__face::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent, rgba(227, 6, 19, 0.6), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.about-clients__tile:hover .about-card-3d__face::before {
  opacity: 1;
  animation: aboutClientsBorderSpin 3s linear infinite;
}

.about-clients__tile img {
  max-width: 88%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--clients-ease);
}

.about-clients__tile:hover .about-card-3d__face {
  border-color: rgba(227, 6, 19, 0.35);
  box-shadow:
    0 24px 48px rgba(227, 6, 19, 0.2),
    0 0 40px rgba(227, 6, 19, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(227, 6, 19, 0.08), rgba(255, 255, 255, 0.02));
}

.about-clients__tile.is-ripple .about-card-3d__face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(227, 6, 19, 0.35), transparent 55%);
  animation: aboutClientsRipple 0.65s ease-out forwards;
  pointer-events: none;
}

@keyframes aboutClientsRipple {
  from { opacity: 0.8; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.4); }
}

.about-clients__tile:hover img {
  transform: scale(1.12);
  filter: drop-shadow(0 8px 16px rgba(227, 6, 19, 0.15));
}

.about-clients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.about-clients__card {
  perspective: 1000px;
  opacity: 0;
  transform: translateY(36px) rotateX(12deg);
  transition:
    opacity 0.7s var(--clients-ease),
    transform 0.7s var(--clients-ease);
  transition-delay: calc(var(--c, 0) * 0.08s);
}

.about-clients.is-inview .about-clients__card {
  opacity: 1;
  transform: none;
  animation: aboutClientsCardFloat 5s ease-in-out infinite;
  animation-delay: calc(0.7s + var(--c, 0) * 0.15s);
}

@keyframes aboutClientsCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.about-clients__card .about-card-3d__face {
  position: relative;
  min-height: 168px;
  padding: 22px 20px;
  text-align: center;
  overflow: hidden;
  transition: box-shadow 0.35s, border-color 0.35s, background 0.35s;
}

.about-clients__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.14) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 2;
}

.about-clients__tile:hover .about-clients__shine,
.about-clients__card:hover .about-clients__shine {
  animation: aboutClientsShine 0.85s ease forwards;
}

.about-clients__card .about-card-3d__face:hover {
  border-color: rgba(227, 6, 19, 0.55);
  box-shadow:
    0 22px 48px rgba(227, 6, 19, 0.18),
    0 0 0 1px rgba(227, 6, 19, 0.2);
  background: linear-gradient(160deg, var(--bg-alt), rgba(227, 6, 19, 0.06));
}

.about-clients__logo {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform 0.4s var(--clients-ease);
}

.about-clients__card:hover .about-clients__logo {
  transform: translateZ(24px) scale(1.1);
}

.about-clients__logo img {
  max-height: 36px;
  max-width: 100%;
  object-fit: contain;
}

.about-clients__card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
  transition: color 0.3s, transform 0.35s var(--clients-ease);
}

.about-clients__card:hover h3 {
  color: var(--inri-red);
  transform: translateY(-2px);
}

.about-clients__meta {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
  transition: opacity 0.3s;
}

.about-clients__card:hover .about-clients__meta {
  opacity: 1;
  color: var(--text-muted);
}

.about-clients__foot {
  margin-top: 8px;
}

.about-clients__foot .btn {
  transition: transform 0.35s var(--clients-ease), box-shadow 0.35s;
}

.about-clients__foot .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(227, 6, 19, 0.2);
}

.about-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}

.about-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--inri-red), transparent);
  opacity: 0.35;
  z-index: 0;
}

.about-timeline__item {
  position: relative;
  z-index: 1;
}

.about-timeline__item .about-card-3d__face {
  min-height: 200px;
  padding: 22px 18px;
}

.about-timeline__year {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--inri-red-soft);
  color: var(--inri-red);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-timeline__item h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.about-timeline__item p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-team__card .about-card-3d__face {
  text-align: center;
  padding: 28px 20px;
}

.about-team__avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--inri-red), #ff5a63);
  color: #fff;
  box-shadow: 0 12px 28px rgba(227, 6, 19, 0.35);
  transition: transform 0.3s;
}

.about-team__card:hover .about-team__avatar {
  transform: scale(1.08) rotate(-4deg);
}

.about-team__card h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.about-team__card p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

@media (max-width: 1000px) {
  .about-hero__grid,
  .about-who__layout,
  .about-vm__grid,
  .about-values__ui {
    grid-template-columns: 1fr;
  }
  .about-timeline {
    grid-template-columns: 1fr 1fr;
  }
  .about-timeline::before { display: none; }
  .about-team__grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-who__tabs,
  .about-values__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .about-hero__visual { height: 380px; }
  .about-clients__stage { padding: 16px 8px 24px; }
  .about-clients__stage-border { opacity: 0.4; }
  .about-clients__wall { grid-template-columns: repeat(3, 1fr); }
  .clients-strip__logo { width: 112px; height: 68px; }
  .clients-strip__track { animation-duration: 90s; }
  .about-clients-3d { max-height: 340px; }
  .about-clients-3d__logo { width: 96px; margin-left: -48px; padding: 10px 12px; }
  .about-page-3d__shot--side { width: 110px; height: 130px; }
  .about-hero__float-words { display: none; }
  .about-section__shapes { display: none; }
}

@media (max-width: 600px) {
  .about-timeline,
  .about-team__grid,
  .about-who__stats,
  .about-clients__grid,
  .about-clients__wall {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page-3d.is-auto,
  .about-page-3d__ring,
  .about-page-3d__shot--main,
  .about-page-3d__shot--top,
  .about-page-3d__shot--side,
  .about-page-3d__chip,
  .about-vm__glow,
  .about-value-panel.is-active .about-card-3d__face,
  .about-hero__line,
  .about-shape,
  .about-card-float,
  .about-card-float--alt,
  .about-clients-3d__orbit,
  .about-clients-3d__ring,
  .about-clients-3d__logo,
  .about-clients__card,
  .about-clients__tile,
  .about-clients__spark,
  .about-clients__glow,
  .about-clients-3d__beam,
  .about-clients-3d__hub,
  .about-clients-3d__hub-pulse,
  .about-clients-3d__hub img,
  .clients-strip__track {
    animation: none !important;
    opacity: 1 !important;
  }

  .clients-strip__logo,
  .clients-strip__logo::after {
    animation: none !important;
  }

  .clients-strip__track {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 12px;
  }

  .clients-strip__group:last-child {
    display: none;
  }

  .about-clients__orbit-wrap,
  .about-clients__card,
  .about-clients__tile {
    opacity: 1 !important;
    transform: none !important;
  }

  .about-clients-3d {
    transform: rotateX(8deg) rotateY(0deg);
  }

  .about-clients-3d__slot {
    transform: rotateY(calc(var(--i) * 45deg));
  }

  .about-clients-3d__logo {
    transform: translateZ(80px) rotateY(calc(var(--i) * -45deg));
  }
}

/* ========== ABOUT ========== */
.page-hero {
  padding: calc(var(--nav-h) + 72px) 0 64px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.page-hero__title {
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.page-hero__title .outline {
  color: var(--text-muted);
  -webkit-text-stroke: 0;
}

.journey {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 32px 0 48px;
  scroll-snap-type: x mandatory;
}

.journey::-webkit-scrollbar { height: 3px; }
.journey::-webkit-scrollbar-thumb { background: var(--inri-red); border-radius: 3px; }

.journey__item {
  flex: 0 0 260px;
  scroll-snap-align: start;
  padding: 28px 24px;
  border-left: 1px solid var(--border);
  position: relative;
}

.journey__item::before {
  content: '';
  position: absolute;
  left: -5px; top: 36px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--inri-red);
}

.journey__year {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--inri-red);
  margin-bottom: 10px;
}

.journey__item p { color: var(--text-muted); font-size: 0.95rem; }

.mission-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.mission-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.25;
}

.mission-quote span { color: var(--inri-red); }

.mission-visual {
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  position: relative;
}

.mission-visual::after {
  content: 'INRI';
  position: absolute;
  bottom: 28px; left: 28px;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--inri-red);
  opacity: 0.2;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.value-card {
  padding: 28px 24px;
  min-height: 200px;
  transition: border-color 0.2s;
}

.value-card:hover {
  border-color: var(--inri-red);
  transform: none;
}

.value-card h3 {
  font-size: 1.2rem;
  margin: 14px 0 8px;
}

.value-card p { color: var(--text-muted); font-size: 0.925rem; }

.value-card__icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--inri-red-soft);
  color: var(--inri-red);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

.value-card__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.team-card { text-align: center; }
.team-card:hover { transform: none; }

.team-card__avatar {
  width: 140px; height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--inri-red);
  transition: border-color 0.2s;
}

.team-card:hover .team-card__avatar {
  width: 140px; height: 140px;
  border-color: var(--inri-red);
  box-shadow: none;
}

.team-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.team-card p { color: var(--text-muted); font-size: 0.9rem; }

.masonry {
  columns: 3;
  column-gap: 12px;
  margin-top: 40px;
}

.masonry__item {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  min-height: 140px;
  position: relative;
}

.masonry__item:nth-child(3n+1) { min-height: 240px; }
.masonry__item:nth-child(3n+2) { min-height: 180px; }
.masonry__item:nth-child(5) { min-height: 280px; }

.masonry__item span {
  position: absolute;
  bottom: 12px; left: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ========== SERVICES ========== */
.sticky-showcase {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

.sticky-showcase__nav {
  position: sticky;
  top: 100px;
}

.sticky-showcase__nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dim);
  border-left: 2px solid var(--border);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.sticky-showcase__nav button.is-active {
  color: var(--inri-red);
  border-left-color: var(--inri-red);
  background: var(--inri-red-soft);
}

.sticky-showcase__stage {
  position: sticky;
  top: 100px;
  height: 56vh;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.showcase-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: none;
  transition: opacity 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  background: var(--bg-alt);
}

.showcase-panel.is-active {
  opacity: 1;
  transform: none;
}

.showcase-panel h3 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.showcase-panel p { color: var(--text-muted); max-width: 400px; }

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.service-detail:nth-child(even) .service-detail__media { order: 2; }

.service-detail__media {
  aspect-ratio: 16/11;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.service-detail__content h3 {
  font-size: 1.85rem;
  margin-bottom: 12px;
}

.service-detail__content p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.chip--accent {
  border-color: transparent;
  color: var(--inri-red);
  background: var(--inri-red-soft);
}

/* Orbit — static clean layout */
.orbit-wrap {
  position: relative;
  width: min(420px, 90vw);
  height: min(420px, 90vw);
  margin: 48px auto;
}

.orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--inri-red);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  z-index: 2;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  animation: none;
}

.orbit-ring--2 {
  inset: 48px;
  animation: none;
}

.orbit-item {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  animation: none !important;
}

.orbit-item:nth-child(1) { top: -30px; left: calc(50% - 30px); }
.orbit-item:nth-child(2) { top: calc(50% - 30px); right: -30px; }
.orbit-item:nth-child(3) { bottom: -30px; left: calc(50% - 30px); }
.orbit-item:nth-child(4) { top: calc(50% - 30px); left: -30px; }
.orbit-item:nth-child(5) { top: 15%; right: 8%; }

.orbit-ring--2 .orbit-item:nth-child(1) { top: -24px; left: calc(50% - 28px); width: 56px; height: 56px; }
.orbit-ring--2 .orbit-item:nth-child(2) { bottom: 10%; right: 5%; width: 56px; height: 56px; }
.orbit-ring--2 .orbit-item:nth-child(3) { top: 40%; left: -28px; width: 56px; height: 56px; }

/* ========== CASE STUDIES ========== */
.magazine {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.magazine-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.magazine-row--flip { grid-template-columns: 1fr 1.2fr; }
.magazine-row--flip .magazine-row__media { order: 2; }

.magazine-row__media {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  position: relative;
}

.magazine-row__media::after { display: none; }

.magazine-row__body h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  margin-bottom: 12px;
}

.magazine-row__body p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.project-hero {
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 40px) 0 64px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.project-hero__bg { display: none; }

.before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 40px 0;
}

.ba-box {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.ba-box--before { background: var(--bg-alt); color: var(--text-dim); }
.ba-box--after { background: var(--inri-red-soft); color: var(--inri-red); }

.ba-arrow {
  color: var(--inri-red);
  display: grid;
  place-items: center;
}

.ba-arrow svg {
  width: 28px;
  height: 28px;
  display: block;
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.metric {
  padding: 28px;
  text-align: center;
}

.metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--inri-red);
  margin-bottom: 6px;
}

.testimonial-block {
  padding: 40px;
  margin-top: 40px;
}

.testimonial-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 20px;
}

.testimonial-block cite {
  color: var(--text-muted);
  font-style: normal;
}

/* ========== PROCESS ========== */
.v-timeline {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}

.v-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
  transform: translateX(-50%);
}

.v-step {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 48px;
}

.v-step:nth-child(even) .v-step__content { order: 3; text-align: left; }
.v-step:nth-child(odd) .v-step__content { text-align: right; }
.v-step:nth-child(even) .v-step__spacer { order: 1; }

.v-step__dot {
  width: 48px; height: 48px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--inri-red);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--inri-red);
  z-index: 1;
  box-shadow: none;
}

.v-step__content {
  padding: 24px;
  border-radius: var(--radius);
}

.v-step__content h3 { font-size: 1.3rem; margin-bottom: 6px; }
.v-step__content p { color: var(--text-muted); font-size: 0.95rem; }

/* ========== INDUSTRIES ========== */
.hex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 860px;
  margin: 48px auto 0;
}

.hex {
  width: 160px;
  height: 180px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  transition: transform 0.2s;
  cursor: pointer;
  filter: none;
}

.hex::before {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--bg-alt);
  z-index: 0;
  transition: background 0.2s;
}

.hex > * { position: relative; z-index: 1; }

.hex:hover { transform: scale(1.04); filter: none; }
.hex:hover::before { background: var(--inri-red-soft); }

.hex__icon {
  color: var(--inri-red);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}

.hex__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.hex__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 10px;
}

/* ========== TECHNOLOGIES ========== */
.sphere-stage {
  position: relative;
  width: min(480px, 90vw);
  height: auto;
  min-height: 280px;
  margin: 32px auto;
  perspective: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sphere {
  position: static;
  inset: auto;
  border-radius: 0;
  border: none;
  transform: none;
  animation: none;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 480px;
}

.sphere__icon {
  position: static;
  top: auto; left: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  transform: none !important;
}

.tech-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

/* ========== CLIENTS ========== */
.client-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.client-tile {
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
  padding: 16px;
}

.client-tile > img {
  max-width: 72%;
  max-height: 70%;
  object-fit: contain;
  transition: transform 0.3s, opacity 0.3s;
}

.client-tile:hover > img {
  opacity: 0;
  transform: scale(1.05);
}

.client-tile__reveal {
  position: absolute;
  inset: 0;
  background: var(--inri-red);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s;
  color: #fff;
}

.client-tile:hover .client-tile__reveal { opacity: 1; transform: none; }
.client-tile:hover { border-color: var(--inri-red); color: transparent; }

.client-tile__reveal small {
  opacity: 0.85;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 6px;
}

/* Our Clients — stylish partnership directory */
.page-clients {
  overflow-x: hidden;
}

.clients-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  padding: 140px 0 72px;
  perspective: 1400px;
  background:
    radial-gradient(ellipse 70% 55% at 85% 20%, rgba(227, 6, 19, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(227, 6, 19, 0.08), transparent 50%),
    var(--bg);
}

.clients-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.clients-hero__wash {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, var(--bg));
}

.clients-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform, translate;
}

.clients-hero__orb--1 {
  width: 340px;
  height: 340px;
  top: 0;
  right: 4%;
  background: rgba(227, 6, 19, 0.36);
  opacity: 0.65;
  animation: clientsOrbDrift 10s ease-in-out infinite;
}

.clients-hero__orb--2 {
  width: 240px;
  height: 240px;
  bottom: 8%;
  left: 2%;
  background: rgba(227, 6, 19, 0.18);
  opacity: 0.55;
  animation: clientsOrbDrift 12s ease-in-out infinite reverse;
}

.clients-hero__orb--3 {
  width: 150px;
  height: 150px;
  top: 38%;
  left: 36%;
  background: rgba(227, 6, 19, 0.14);
  opacity: 0.45;
  animation: clientsOrbDrift 8s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes clientsOrbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(16px, -20px, 0) scale(1.08); }
}

.clients-hero__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(227, 6, 19, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 6, 19, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 30% 45%, #000 12%, transparent 70%);
  opacity: 0.5;
  transform: perspective(1000px) rotateX(14deg) scale(1.1);
  transform-origin: 50% 0%;
  will-change: transform, translate;
}

.clients-hero__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.clients-hero__ring {
  position: absolute;
  width: min(460px, 58vw);
  height: min(460px, 58vw);
  top: 42%;
  right: 2%;
  margin-top: calc(min(460px, 58vw) / -2);
  border: 1px dashed rgba(227, 6, 19, 0.38);
  border-radius: 50%;
  transform: rotateX(58deg) translateZ(-40px);
  animation: clientsRingSpin 24s linear infinite;
}

.clients-hero__ring--2 {
  width: min(300px, 40vw);
  height: min(300px, 40vw);
  margin-top: calc(min(300px, 40vw) / -2);
  right: 10%;
  border-style: solid;
  border-color: rgba(227, 6, 19, 0.2);
  animation-duration: 34s;
  animation-direction: reverse;
}

@keyframes clientsRingSpin {
  to { transform: rotateX(58deg) translateZ(-40px) rotate(360deg); }
}

.clients-hero__panel {
  position: absolute;
  width: min(220px, 28vw);
  height: min(280px, 36vw);
  top: 18%;
  right: 16%;
  border-radius: 22px;
  border: 1px solid rgba(227, 6, 19, 0.28);
  background:
    linear-gradient(160deg, rgba(227, 6, 19, 0.28), transparent 55%),
    color-mix(in srgb, var(--bg) 55%, #1a1a1a);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: rotateX(12deg) rotateY(-24deg) translateZ(40px);
  animation: clientsPanelFloat 7s ease-in-out infinite;
}

.clients-hero__panel::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(227, 6, 19, 0.08) 18px,
      rgba(227, 6, 19, 0.08) 19px
    );
}

@keyframes clientsPanelFloat {
  0%, 100% { transform: rotateX(12deg) rotateY(-24deg) translateZ(40px) translateY(0); }
  50% { transform: rotateX(8deg) rotateY(-14deg) translateZ(56px) translateY(-12px); }
}

.clients-hero__chip {
  position: absolute;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(227, 6, 19, 0.3);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  transform: translateZ(calc(24px + var(--c, 0) * 10px));
  animation: clientsChipFloat 5.8s ease-in-out infinite;
  animation-delay: calc(var(--c, 0) * -0.75s);
  will-change: transform, translate;
  top: calc(20% + var(--c, 0) * 13%);
  right: calc(4% + (3 - var(--c, 0)) * 6%);
}

@keyframes clientsChipFloat {
  0%, 100% { transform: translateZ(calc(24px + var(--c, 0) * 10px)) translateY(0); }
  50% { transform: translateZ(calc(24px + var(--c, 0) * 10px)) translateY(-10px); }
}

.clients-hero__scene.is-auto-tilt {
  animation: clientsHeroAutoTilt 8s ease-in-out infinite;
}

@keyframes clientsHeroAutoTilt {
  0%, 100% { transform: rotateY(-6deg) rotateX(4deg); }
  50% { transform: rotateY(6deg) rotateX(-3deg); }
}

[data-theme="light"] .clients-hero {
  background:
    radial-gradient(ellipse 70% 55% at 85% 20%, rgba(227, 6, 19, 0.12), transparent 55%),
    linear-gradient(180deg, #f3f3f4 0%, var(--bg) 85%);
}

[data-theme="light"] .clients-hero__grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
}

[data-theme="light"] .clients-hero__chip,
[data-theme="light"] .clients-hero__panel {
  background: rgba(255, 255, 255, 0.88);
}

.clients-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.clients-hero__brand {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--inri-red);
}

.clients-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  display: flex;
  flex-direction: column;
  gap: 0.02em;
}

.clients-hero__title-line {
  color: var(--text);
  font-weight: 600;
}

.clients-hero__title-accent {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 72%, transparent);
  font-weight: 700;
  text-shadow:
    10px 12px 0 color-mix(in srgb, var(--inri-red) 22%, transparent),
    20px 24px 0 color-mix(in srgb, var(--inri-red) 8%, transparent);
}

[data-theme="light"] .clients-hero__title-accent {
  -webkit-text-stroke-color: color-mix(in srgb, var(--text) 55%, transparent);
}

.clients-hero__desc {
  max-width: 440px;
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.clients-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.clients-marquee {
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, var(--inri-red));
  overflow: hidden;
  padding: 14px 0;
}

.clients-marquee__track {
  display: flex;
  width: max-content;
  animation: clientsMarquee 48s linear infinite;
}

.clients-marquee__track span {
  padding-inline: 24px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

@keyframes clientsMarquee {
  to { transform: translateX(-50%); }
}

.clients-directory {
  padding-top: 56px;
  padding-bottom: 24px;
  position: relative;
}

/* Keep partner list always visible (no scroll-up hide from reveal-stagger) */
.clients-directory > *,
.clients-directory .clients-row {
  opacity: 1 !important;
  visibility: visible !important;
  will-change: auto;
}

.clients-directory__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.clients-directory__title {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.clients-directory__title em {
  font-style: normal;
  color: var(--inri-red);
}

.clients-directory__lead {
  margin: 0;
  max-width: 42ch;
  color: var(--text-muted);
  line-height: 1.6;
}

.clients-directory__count {
  flex-shrink: 0;
  text-align: right;
  min-width: 88px;
}

.clients-directory__count strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}

.clients-directory__count span {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.clients-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.clients-filter__btn {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.25s;
}

.clients-filter__btn:hover {
  border-color: rgba(227, 6, 19, 0.45);
  color: var(--text);
}

.clients-filter__btn.is-active {
  background: var(--inri-red);
  border-color: var(--inri-red);
  color: #fff;
}

.clients-directory__list {
  position: relative;
}

.clients-row {
  --clients-mx: 50%;
  --clients-my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 56px 180px minmax(0, 1fr);
  gap: 20px 28px;
  align-items: center;
  padding: 28px 12px 28px 16px;
  border-bottom: 1px solid var(--border);
  opacity: 1;
  transform: none;
  transition:
    background 0.3s,
    border-color 0.3s;
  overflow: visible;
}

.clients-directory.is-revealed .clients-row,
.clients-row.is-revealed {
  opacity: 1;
  transform: none;
}

.clients-row.is-hidden {
  display: none;
}

.clients-row:first-child {
  border-top: 1px solid var(--border);
}

.clients-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    480px circle at var(--clients-mx) var(--clients-my),
    rgba(227, 6, 19, 0.08),
    transparent 48%
  );
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 0;
}

.clients-row:hover::before {
  opacity: 1;
}

.clients-row:hover {
  border-bottom-color: rgba(227, 6, 19, 0.35);
  background: color-mix(in srgb, var(--bg) 94%, var(--inri-red));
}

.clients-row__rail {
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background: var(--inri-red);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease, ease);
  z-index: 1;
}

.clients-row:hover .clients-row__rail {
  transform: scaleY(1);
}

.clients-row__index {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  transition: color 0.3s;
}

.clients-row:hover .clients-row__index {
  color: var(--inri-red);
}

.clients-row__logo {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.clients-row__stack {
  position: relative;
  width: 100%;
  max-width: 180px;
  transition: transform 0.3s ease;
}

.clients-row__depth {
  display: none;
}

.clients-row__plate {
  position: relative;
  width: 100%;
  min-height: 96px;
  height: 96px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s ease;
}

.clients-row__shine {
  position: absolute;
  inset: -45%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.5) 48%,
    transparent 62%
  );
  transform: translateX(-45%) rotate(12deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.55s ease;
}

[data-theme="dark"] .clients-row__plate {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .clients-row__plate {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .clients-directory {
  background: linear-gradient(180deg, #f7f7f8 0%, #fff 160px);
}

.clients-row:hover .clients-row__stack {
  transform: translateY(-3px);
}

.clients-row:hover .clients-row__plate {
  border-color: rgba(227, 6, 19, 0.4);
  box-shadow: 0 14px 34px rgba(227, 6, 19, 0.12);
}

.clients-row:hover .clients-row__shine {
  opacity: 1;
  transform: translateX(48%) rotate(12deg);
}

.clients-row__plate img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.clients-row__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.clients-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.clients-row__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  margin: 0;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.clients-row__sector {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inri-red);
  border: 1px solid rgba(227, 6, 19, 0.28);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(227, 6, 19, 0.08);
}

.clients-row__copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 58ch;
}

.clients-directory__empty {
  margin: 40px 0 12px;
  text-align: center;
  color: var(--text-muted);
}

.clients-cta .clients-cta__eyebrow {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 900px) {
  .clients-hero {
    min-height: auto;
    padding: 120px 0 56px;
    align-items: center;
  }

  .clients-hero__scene {
    opacity: 1;
    transform: scale(0.72);
    transform-origin: 85% 45%;
  }

  .clients-hero__panel,
  .clients-hero__chip,
  .clients-hero__ring {
    display: block;
    opacity: 1;
  }

  .clients-directory__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .clients-directory__count {
    text-align: left;
  }

  .clients-row {
    grid-template-columns: 40px 140px minmax(0, 1fr);
    gap: 10px 14px;
    padding: 22px 4px 22px 10px;
    overflow: visible;
  }

  .clients-row__logo {
    grid-column: 2;
  }

  .clients-row__copy {
    grid-column: 3;
  }

  .clients-row__stack {
    max-width: 140px;
  }

  .clients-row__plate {
    height: 88px;
    min-height: 88px;
  }

  .clients-row__plate img {
    max-height: 56px;
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  .clients-row {
    grid-template-columns: 1fr;
  }

  .clients-row__index,
  .clients-row__logo,
  .clients-row__copy {
    grid-column: 1;
  }

  .clients-row__stack {
    max-width: 100%;
    width: 100%;
  }

  .clients-row__plate {
    height: 100px;
    min-height: 100px;
    width: 100%;
    max-width: 100%;
  }

  .clients-row__plate img {
    max-height: 64px;
  }

  .clients-hero__chip {
    display: inline-flex;
    opacity: 0.95;
  }

  .clients-hero__actions {
    width: 100%;
  }

  .clients-hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .clients-filter__btn {
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-row,
  .clients-row__index,
  .clients-row__logo,
  .clients-row__copy,
  .clients-row__stack,
  .clients-hero__orb,
  .clients-hero__ring,
  .clients-hero__chip,
  .clients-hero__panel,
  .clients-hero__grid,
  .clients-marquee__track {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }
}

.testimonial-slider {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
}

.testimonial-track {
  display: flex;
  transition: transform 0.35s var(--ease);
}

.testimonial-slide {
  flex: 0 0 100%;
  padding: 48px 32px;
  text-align: center;
}

.stars {
  color: var(--inri-red);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.testimonial-slide h3 {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  max-width: 640px;
  margin: 0 auto 20px;
  line-height: 1.35;
}

.testimonial-slide .author { color: var(--text-muted); }

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.slider-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.2s;
}

.slider-dots button.is-active {
  background: var(--inri-red);
  transform: none;
}

/* ========== CAREERS ========== */
.accordion {
  max-width: 760px;
  margin: 32px auto 0;
}

.accordion__item { border-bottom: 1px solid var(--border); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: left;
}

.accordion__trigger span {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 500;
  margin-left: auto;
  margin-right: 12px;
}

.accordion__icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.2s, border-color 0.2s, color 0.2s;
}

.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
  border-color: var(--inri-red);
  color: var(--inri-red);
}

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}

.accordion__panel-inner {
  padding: 0 4px 24px;
  color: var(--text-muted);
}

.benefits-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.benefit {
  padding: 24px;
  text-align: center;
}

.benefit h4 { margin: 12px 0 6px; font-size: 1.05rem; }
.benefit p { color: var(--text-muted); font-size: 0.9rem; }

.culture-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 180px 180px;
  gap: 12px;
  margin-top: 40px;
}

.culture-gallery__item {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.culture-gallery__item:first-child {
  grid-row: span 2;
  background: var(--inri-red-soft);
}

/* ========== CONTACT ========== */
.page-contact {
  overflow-x: hidden;
}

.contact-hero {
  position: relative;
  padding: calc(var(--nav-h) + 72px) 0 56px;
  overflow: hidden;
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.contact-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  will-change: transform;
}

.contact-hero__orb--1 {
  width: 280px;
  height: 280px;
  top: 10%;
  right: 8%;
  background: rgba(227, 6, 19, 0.28);
  animation: contactOrbDrift 9s ease-in-out infinite;
}

.contact-hero__orb--2 {
  width: 200px;
  height: 200px;
  bottom: 5%;
  left: 6%;
  background: rgba(227, 6, 19, 0.16);
  animation: contactOrbDrift 11s ease-in-out infinite reverse;
}

@keyframes contactOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -22px) scale(1.1); }
}

.contact-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(227, 6, 19, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 6, 19, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 40% 30%, #000 20%, transparent 70%);
  opacity: 0.5;
}

[data-theme="light"] .contact-hero {
  background: linear-gradient(180deg, #f5f5f6 0%, var(--bg) 80%);
}

[data-theme="light"] .contact-hero__grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

.contact-hero__inner {
  position: relative;
  z-index: 2;
}

.contact-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 10vw, 7rem);
  line-height: 0.92;
  font-weight: 800;
  margin: 12px 0 20px;
  letter-spacing: -0.04em;
}

.contact-hero__line {
  display: block;
}

.contact-hero__line--stack {
  position: relative;
  display: grid;
}

.contact-hero__line--stack em {
  font-style: normal;
  grid-area: 1 / 1;
}

.contact-hero__line--stack em:first-child {
  color: var(--text);
  position: relative;
  z-index: 2;
}

.contact-hero__line--stack em:last-child {
  color: transparent;
  -webkit-text-stroke: 1px rgba(227, 6, 19, 0.35);
  transform: translate(10px, 12px);
  z-index: 1;
  animation: contactTitleGhost 5s ease-in-out infinite;
}

@keyframes contactTitleGhost {
  0%, 100% { transform: translate(10px, 12px); opacity: 0.7; }
  50% { transform: translate(16px, 18px); opacity: 1; }
}

.contact-hero__desc {
  max-width: 480px;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.contact-offices {
  padding-top: 20px;
  position: relative;
}

[data-theme="light"] .contact-offices {
  background: #f3f3f4;
}

.contact-offices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1400px;
}

.contact-card {
  opacity: 0;
  transform: translateY(28px) rotateX(8deg);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: calc(var(--i, 0) * 0.1s);
}

.contact-card.is-revealed {
  opacity: 1;
  transform: none;
}

.contact-card__face {
  padding: 0;
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 0.3s, box-shadow 0.35s, transform 0.2s ease-out;
}

[data-theme="light"] .contact-card__face {
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

.contact-card:hover .contact-card__face {
  border-color: rgba(227, 6, 19, 0.4);
  box-shadow: 0 24px 52px rgba(227, 6, 19, 0.12);
}

.contact-card__stage {
  position: relative;
  height: 200px;
  overflow: hidden;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 70% 30%, rgba(227, 6, 19, 0.18), transparent 55%),
    var(--bg-alt);
}

.contact-card__watermark {
  position: absolute;
  left: 8%;
  top: 28%;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(227, 6, 19, 0.12);
  z-index: 0;
  user-select: none;
  animation: contactWatermark 6s ease-in-out infinite;
}

@keyframes contactWatermark {
  0%, 100% { transform: translateZ(-20px) translateY(0); }
  50% { transform: translateZ(-20px) translateY(-8px); }
}

.contact-card__shot {
  position: absolute;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.contact-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-card__shot--1 {
  width: 58%;
  height: 120px;
  left: 10%;
  top: 18%;
  transform: translateZ(30px) rotateY(8deg);
  animation: contactShotA 5s ease-in-out infinite;
}

.contact-card__shot--2 {
  width: 42%;
  height: 96px;
  right: 8%;
  bottom: 14%;
  transform: translateZ(50px) rotateY(-10deg);
  animation: contactShotB 5.6s ease-in-out infinite;
}

@keyframes contactShotA {
  0%, 100% { transform: translateZ(30px) rotateY(8deg) translateY(0); }
  50% { transform: translateZ(40px) rotateY(4deg) translateY(-8px); }
}

@keyframes contactShotB {
  0%, 100% { transform: translateZ(50px) rotateY(-10deg) translateY(0); }
  50% { transform: translateZ(60px) rotateY(-4deg) translateY(8px); }
}

.contact-card__glow {
  position: absolute;
  inset: 20%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.25), transparent 70%);
  filter: blur(20px);
  z-index: 1;
  animation: contactGlow 4s ease-in-out infinite;
}

@keyframes contactGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.contact-card__body {
  padding: 24px 22px 26px;
  position: relative;
  z-index: 2;
}

.contact-card__body h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 0 0 10px;
}

.contact-card__addr {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 16px;
}

.contact-card__addr strong {
  color: var(--text);
}

.contact-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-card__meta a {
  color: var(--inri-red);
  font-size: 0.88rem;
  font-weight: 600;
}

.contact-card__meta a:hover {
  text-decoration: underline;
}

.contact-form-sec__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}

.contact-form {
  perspective: 1000px;
}

.contact-form__face {
  padding: 32px;
}

[data-theme="light"] .contact-form__face {
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.contact-map {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  position: relative;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}

.contact-map__pin {
  position: absolute;
  top: 40%; left: 50%;
  width: 16px; height: 16px;
  background: var(--inri-red);
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  animation: none;
  box-shadow: none;
}

.contact-map__info h3 { margin-bottom: 8px; }
.contact-map__info p { color: var(--text-muted); font-size: 0.95rem; }

@media (max-width: 1000px) {
  .contact-offices__grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-offices__grid .contact-card:last-child {
    grid-column: 1 / -1;
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero__orb,
  .contact-hero__line--stack em:last-child,
  .contact-card__watermark,
  .contact-card__shot--1,
  .contact-card__shot--2,
  .contact-card__glow,
  .contact-card {
    animation: none !important;
  }

  .contact-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

.form-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.form-progress__bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.form-progress__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--inri-red);
  transition: width 0.25s;
}

.form-progress__bar.is-done i { width: 100%; }
.form-progress__bar.is-current i { width: 50%; }

.form-step { display: none; }
.form-step.is-active { display: block; }

.form-step h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.form-step p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
  cursor: text;
}

.field select { cursor: pointer; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--inri-red);
  box-shadow: none;
}

.field textarea { min-height: 110px; resize: vertical; }

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.form-success {
  display: none;
  text-align: center;
  padding: 48px 16px;
}

.form-success.is-visible { display: block; }

.form-success__icon {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--inri-red-soft);
  color: var(--inri-red);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

/* Footer — three-column theme layout */
.footer {
  border-top: 1px solid var(--border);
  padding: 72px 0 28px;
  background: #050505;
  color: #f4f4f5;
  position: relative;
}

[data-theme="light"] .footer {
  background: #0f0f11;
  color: #f4f4f5;
  border-top-color: #1c1c1f;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 40px;
}

.footer__col {
  padding: 8px 36px;
  min-width: 0;
}

.footer__col--map {
  padding-left: 0;
}

.footer__col--contact {
  padding-right: 0;
}

.footer__col--brand {
  border-inline: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 4px 8px;
}

.footer__heading {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.15;
}

.footer__heading--follow {
  margin-top: 28px;
  margin-bottom: 16px;
}

.footer__map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  max-width: 280px;
}

.footer__map a {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  padding: 5px 0;
  transition: color 0.2s;
}

.footer__map a:hover {
  color: var(--inri-red);
}

.footer__tagline {
  margin: 36px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  max-width: 14ch;
}

.footer__stat {
  margin: 0 auto 18px;
  max-width: 28ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.55;
  background: none;
  background-color: transparent;
}

.footer__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  background: none;
  background-color: transparent;
  margin-bottom: 4px;
}

.footer__logo {
  width: 96px;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  display: block;
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.footer__certs {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  margin-top: 24px;
  width: 100%;
  max-width: 340px;
}

.footer__cert {
  margin: 0;
  flex: 1;
  min-width: 0;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer__cert:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.footer__cert img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 367 / 505;
  object-fit: cover;
  object-position: center top;
  background: #0a0a0a;
}

.footer__contact {
  display: grid;
  gap: 10px;
}

.footer__contact a,
.footer__contact p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.55;
}

.footer__contact a {
  display: inline-block;
  width: fit-content;
  transition: color 0.2s;
}

.footer__contact a:hover {
  color: var(--inri-red);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__social-link {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
  color: #fff;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.25s;
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
}

.footer__social-link:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
  transform: translateY(-2px);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}

.scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    visibility 0.25s,
    transform 0.25s,
    background 0.2s;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--inri-red);
  color: #fff;
}

.scroll-top svg {
  width: 18px;
  height: 18px;
}

body:has(.floating-cta.is-visible) .scroll-top {
  bottom: 84px;
}

@media (max-width: 980px) {
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer__col {
    padding: 0;
  }

  .footer__col--brand {
    border-inline: 0;
    border-block: 1px solid rgba(255, 255, 255, 0.14);
    padding-block: 32px;
  }

  .footer__map {
    max-width: none;
  }

  .footer__tagline {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .footer {
    padding: 56px 0 24px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer__certs {
    width: 100%;
    max-width: none;
  }

  .footer__cert {
    max-width: 150px;
  }

  .scroll-top {
    right: 16px;
    bottom: 16px;
  }
}

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-48 { margin-top: 40px; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { width: calc(100% - 28px); gap: 12px; }
  .nav__logo span { font-size: 1rem; }
  .nav__logo img { width: 36px; height: 36px; }
}

@media (max-width: 1024px) {
  .hero__content { grid-template-columns: 1fr; gap: 28px; }
  .hero__visual {
    height: 400px;
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
  }
  .hero {
    padding-bottom: 100px;
  }
  .hero-slider__nav {
    bottom: 20px;
    scale: 0.92;
  }
  .code-float--3,
  .git-float,
  .cloud-node--sec,
  .cloud-ring--3 { display: none; }
  .term-float { width: 160px; right: 2%; }
  .orbit3d { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .bar3d { display: none; }
  .sol-badge--4,
  .sol-badge--5 { display: none; }
  .sol-card--auto { display: none; }
  .sol-card { min-width: 130px; padding: 8px 10px; }
  .sol-card strong { font-size: 0.72rem; }
  .solution-dash__grid { gap: 6px; }
  .solution-tile { padding: 10px 8px; }
  .solution-tile em { font-size: 1rem; }
  .panel3d { width: 86%; }
  .services-hs__sticky { grid-template-columns: 1fr; }
  .services-hs__visual { min-height: 460px; }
  .services-hs__stage { min-height: 210px; padding-top: 22px; }
  .hs-mock { height: 150px; }
  .hs-mock__browser { width: 170px; }
  .hs-mock__browser--lg { width: 220px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .case-card { grid-template-columns: 1fr; }
  .case-card__media { border-right: none; border-bottom: 1px solid var(--border); }
  .featured-card__3d { grid-template-columns: 1fr; }
  .mission-split,
  .sticky-showcase,
  .service-detail,
  .magazine-row,
  .magazine-row--flip,
  .contact-split { grid-template-columns: 1fr; }
  .contact-offices__grid { grid-template-columns: 1fr; }
  .contact-form-sec__grid { grid-template-columns: 1fr; }
  .contact-hero__title { font-size: clamp(2.6rem, 14vw, 4.5rem); }
  .contact-card__stage { height: 180px; }
  .contact-card__shot--2 { display: none; }
  .magazine-row--flip .magazine-row__media { order: 0; }
  .service-detail:nth-child(even) .service-detail__media { order: 0; }
  .values-grid,
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .sticky-showcase__nav {
    position: relative;
    top: 0;
    display: flex;
    overflow-x: auto;
  }
  .sticky-showcase__nav button {
    border-left: none;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
  }
  .sticky-showcase__stage { position: relative; top: 0; height: 40vh; }
  .v-timeline::before { left: 24px; }
  .v-step { grid-template-columns: 48px 1fr; }
  .v-step__spacer { display: none; }
  .v-step:nth-child(odd) .v-step__content,
  .v-step:nth-child(even) .v-step__content { text-align: left; order: 0; }
  .client-wall { grid-template-columns: repeat(2, 1fr); }
  .benefits-timeline { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .before-after { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }
  .hero {
    padding: calc(var(--nav-h) + 40px) 0 48px;
  }
  .hero__headline {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
  .hero__visual {
    height: 360px;
  }
  .hero-3d {
    transform: rotateX(6deg) rotateY(-12deg);
  }
  .sol-card--web {
    top: 6%;
    right: 0;
    transform: translateZ(100px) scale(0.92);
  }
  .sol-card--mobile {
    bottom: 4%;
    left: 0;
    transform: translateZ(90px) scale(0.92);
  }
  .sol-badge--1 { top: 2%; right: 4%; }
  .sol-badge--2 { top: 18%; left: 2%; }
  .sol-badge--3 { bottom: 28%; right: 0; }
  .solution-dash__foot { font-size: 0.62rem; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 24px 12px; }
  .values-grid,
  .team-grid,
  .client-wall,
  .metrics-row { grid-template-columns: 1fr; }
  .culture-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .culture-gallery__item:first-child {
    grid-row: span 1;
    min-height: 180px;
  }
  .masonry { columns: 1; }
  .cta-band { margin: 24px 12px 48px; padding: 48px 24px; }
  .floating-cta { bottom: 16px; right: 16px; }
  .hex { width: 130px; height: 148px; }
  .featured-filters { width: 100%; }
  .featured-filters__btn { flex: 1; text-align: center; padding: 10px 8px; font-size: 0.78rem; }
}

/* ========== UI POLISH ========== */
::selection {
  background: rgba(227, 6, 19, 0.18);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--inri-red);
  outline-offset: 3px;
}

.scroll-progress {
  height: 3px;
  background: linear-gradient(90deg, #8B000E, var(--inri-red), #ff6b73);
  box-shadow: 0 0 12px rgba(227, 6, 19, 0.45);
}

.section {
  position: relative;
}

[data-scroll-section] {
  overflow: hidden;
}

.scroll-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.scroll-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  will-change: transform;
}

.scroll-bg__orb--1 {
  width: 320px;
  height: 320px;
  top: 10%;
  left: -80px;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.28), transparent 70%);
}

.scroll-bg__orb--2 {
  width: 260px;
  height: 260px;
  bottom: 8%;
  right: -60px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.22), transparent 70%);
}

.scroll-bg__orb--3 {
  width: 380px;
  height: 380px;
  top: 30%;
  right: 8%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.18), transparent 70%);
}

[data-theme="dark"] .scroll-bg__orb--1 {
  background: radial-gradient(circle, rgba(227, 6, 19, 0.35), transparent 70%);
}

[data-theme="dark"] .scroll-bg__orb--2 {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.28), transparent 70%);
}

[data-scroll-section] > .container,
[data-scroll-section] > .cta-band__inner,
[data-scroll-section] > .why-parallax__scene {
  position: relative;
  z-index: 1;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.19s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.26s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.33s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.4s; }

[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

[data-speed] {
  will-change: transform;
}

[data-img-parallax] {
  overflow: hidden;
}

[data-img-parallax] img {
  will-change: transform;
  transform: scale(1.12);
  transition: none;
}

.hero[data-product-hero] .hero__content {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 28px), 0);
  opacity: calc(1 - var(--hero-scroll, 0) * 0.25);
}

.service-hs-item__arrow {
  font-size: 0;
}

.service-hs-item__arrow::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.nav__logo img {
  transition: transform 0.35s var(--ease);
}

.nav__logo:hover img {
  transform: scale(1.06) rotate(-3deg);
}

.logos {
  transition: background 0.3s;
}

.marquee__item {
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.page-hero__title {
  animation: heroFadeUp 0.8s var(--ease) both;
}

/* ========== Home motion boost — 3D + parallax ========== */
[data-home-motion] {
  --section-p: 0;
  transform-style: preserve-3d;
}

[data-home-motion] > .container,
[data-home-motion] > .cta-band__inner {
  position: relative;
  z-index: 1;
  transform: translate3d(0, calc(var(--section-p) * -18px), 0);
  transition: transform 0.1s linear;
}

[data-parallax-y] {
  will-change: transform;
}

[data-reveal][data-reveal-dir="left"] {
  transform: translateX(-56px) translateY(16px);
}

[data-reveal][data-reveal-dir="right"] {
  transform: translateX(56px) translateY(16px);
}

.page-about [data-reveal][data-reveal-dir="left"] {
  transform: translateX(-64px) translateY(20px);
}

.page-about [data-reveal][data-reveal-dir="right"] {
  transform: translateX(64px) translateY(20px);
}

[data-reveal][data-reveal-dir="left"].is-revealed,
[data-reveal][data-reveal-dir="right"].is-revealed {
  transform: none;
}

.logos[data-home-motion] {
  perspective: 1000px;
}

.logos[data-home-motion] .marquee__item {
  transform-style: preserve-3d;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.logos[data-home-motion] .marquee__item:hover {
  transform: translateY(-8px) rotateX(8deg) rotateY(-6deg) scale(1.06);
  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
}

.services-hs__sticky[data-services-3d] {
  perspective: 1100px;
  transform-style: preserve-3d;
}

.services-hs__visual {
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.services-hs__panel {
  transform-style: preserve-3d;
}

.services-hs__panel.is-active {
  transform: translateZ(20px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.1);
}

.services-hs__list {
  transform: translateZ(10px);
}

.stats-section[data-home-motion] .stat {
  animation: none;
}

.stats-section.is-inview .stat:nth-child(1) .stat__3d { animation: statBob 3.8s ease-in-out 0.2s infinite; }
.stats-section.is-inview .stat:nth-child(2) .stat__3d { animation: statBobAlt 4.2s ease-in-out 0.4s infinite; }
.stats-section.is-inview .stat:nth-child(3) .stat__3d { animation: statBob 4s ease-in-out 0.55s infinite; }
.stats-section.is-inview .stat:nth-child(4) .stat__3d { animation: statBobAlt 3.6s ease-in-out 0.7s infinite; }

@keyframes statBob {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-10px) rotateX(3deg); }
}

@keyframes statBobAlt {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(8px) rotateX(-2deg); }
}

.stats-section.is-inview .stat:hover .stat__3d {
  animation-play-state: paused;
}

.featured-work[data-home-motion] .featured-card {
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease), opacity 0.35s, box-shadow 0.35s;
}

.featured-work[data-home-motion] .featured-card.is-visible {
  transform: translateZ(0);
}

.featured-work[data-home-motion].is-inview .featured-card.is-visible:nth-child(1) {
  animation: featureRise 0.7s ease both;
}
.featured-work[data-home-motion].is-inview .featured-card.is-visible:nth-child(2) {
  animation: featureRise 0.7s ease 0.12s both;
}
.featured-work[data-home-motion].is-inview .featured-card.is-visible:nth-child(3) {
  animation: featureRise 0.7s ease 0.24s both;
}

@keyframes featureRise {
  from { opacity: 0; transform: translateY(36px) rotateX(8deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

.featured-work[data-home-motion] .featured-card__3d {
  transition: transform 0.25s ease-out, box-shadow 0.25s;
}

.featured-work[data-home-motion] .featured-card:hover .featured-card__3d {
  box-shadow: 0 28px 60px rgba(0,0,0,0.18);
}

.about-home[data-home-motion] .about-home__tags span {
  transform: translateZ(0);
}

.about-home[data-home-motion].is-inview .about-home__tags span {
  animation: tagPop 0.45s ease both;
}

.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(1) { animation-delay: 0.05s; }
.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(2) { animation-delay: 0.1s; }
.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(3) { animation-delay: 0.15s; }
.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(4) { animation-delay: 0.2s; }
.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(5) { animation-delay: 0.25s; }
.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(6) { animation-delay: 0.3s; }
.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(7) { animation-delay: 0.35s; }
.about-home[data-home-motion].is-inview .about-home__tags span:nth-child(8) { animation-delay: 0.4s; }

@keyframes tagPop {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.scroll-bg__orb {
  transform: translateZ(-40px);
}

.why-parallax[data-home-motion] .why-track {
  perspective: 1000px;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > *,
  .btn,
  .floating-cta,
  .cta-band::before,
  .scroll-bg__orb,
  [data-speed],
  [data-parallax-y],
  [data-img-parallax] img,
  .hero[data-product-hero] .hero__content,
  .stat__3d,
  .featured-card,
  .about-home__tags span,
  [data-home-motion] > .container {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ========== SERVICES PAGE — 3D + parallax ========== */
.page-services {
  overflow-x: hidden;
}

.page-services .section {
  padding-left: 0;
  padding-right: 0;
}

.page-services [data-svc-section] {
  position: relative;
  overflow: hidden;
}

.svc-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.svc-shape {
  position: absolute;
  opacity: 0.35;
  will-change: transform;
}

.svc-shape--cube {
  width: 44px;
  height: 44px;
  top: 18%;
  right: 10%;
  border: 2px solid rgba(227, 6, 19, 0.4);
  border-radius: 10px;
  transform: rotate(16deg);
  animation: aboutShapeSpin 16s linear infinite;
}

.svc-shape--ring {
  width: 88px;
  height: 88px;
  bottom: 18%;
  left: 6%;
  border: 2px dashed rgba(227, 6, 19, 0.28);
  border-radius: 50%;
  animation: aboutShapePulse 6s ease-in-out infinite;
}

.svc-shape--dot {
  width: 12px;
  height: 12px;
  top: 42%;
  left: 18%;
  border-radius: 50%;
  background: var(--inri-red);
  animation: aboutShapeBob 5s ease-in-out infinite;
}

.svc-section-head {
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.svc-section-head .section-desc {
  max-width: 540px;
}

.svc-section-head.text-center .section-desc,
.svc-orbit-sec .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.svc-hero {
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
}

.svc-hero__float {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.svc-hero__float span {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: rgba(227, 6, 19, 0.12);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.svc-hero__float span:nth-child(1) { top: 18%; left: 8%; }
.svc-hero__float span:nth-child(2) { top: 28%; right: 12%; }
.svc-hero__float span:nth-child(3) { bottom: 24%; left: 14%; }
.svc-hero__float span:nth-child(4) { bottom: 18%; right: 18%; }

.svc-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.svc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.05;
  margin: 12px 0 20px;
}

.svc-hero__title .accent {
  background: linear-gradient(135deg, var(--inri-red), #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-hero__desc {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 28px;
}

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.svc-hero__visual {
  perspective: 1600px;
  min-height: 460px;
  width: 100%;
}

.svc-hero-3d {
  position: relative;
  width: 100%;
  height: 460px;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-16deg);
}

.svc-hero-3d.is-auto {
  animation: svcHeroAutoTilt 7s ease-in-out infinite;
}

@keyframes svcHeroAutoTilt {
  0%, 100% { transform: rotateX(12deg) rotateY(-16deg); }
  33% { transform: rotateX(8deg) rotateY(6deg); }
  66% { transform: rotateX(16deg) rotateY(-8deg); }
}

.svc-hero-3d__platform {
  position: absolute;
  left: 50%;
  top: 72%;
  width: 280px;
  height: 70px;
  margin-left: -140px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(227, 6, 19, 0.32), transparent 70%);
  transform: translateZ(-60px) rotateX(78deg);
  filter: blur(2px);
  animation: svcHeroPlatform 3.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes svcHeroPlatform {
  0%, 100% { opacity: 0.55; transform: translateZ(-60px) rotateX(78deg) scale(1); }
  50% { opacity: 0.95; transform: translateZ(-60px) rotateX(78deg) scale(1.12); }
}

.svc-hero-3d__ring {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(227, 6, 19, 0.4);
  border-radius: 50%;
  transform: translateZ(-40px) rotateX(62deg);
  animation: svcHeroRingPulse 4.5s ease-in-out infinite, svcHeroRingSpin 18s linear infinite;
}

.svc-hero-3d__ring--2 {
  inset: 18%;
  border-style: solid;
  border-color: rgba(227, 6, 19, 0.18);
  animation-delay: 0.5s, 0s;
  animation-duration: 5.2s, 28s;
  animation-direction: normal, reverse;
}

.svc-hero-3d__ring--3 {
  inset: 28%;
  border-style: dotted;
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateZ(-20px) rotateX(62deg);
  animation-duration: 6s, 12s;
}

@keyframes svcHeroRingPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes svcHeroRingSpin {
  to { transform: translateZ(-40px) rotateX(62deg) rotateZ(360deg); }
}

.svc-hero-3d__beam {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(227, 6, 19, 0.38) 36deg, transparent 78deg);
  transform: translateZ(-55px) rotateX(68deg);
  animation: aboutClientsBeamSpin 5.5s linear infinite;
  opacity: 0.65;
  mask-image: radial-gradient(circle, transparent 48%, #000 54%, #000 76%, transparent 82%);
}

.svc-hero-3d__orbit {
  position: absolute;
  inset: 12%;
  transform-style: preserve-3d;
  transform: translateZ(-10px) rotateX(64deg);
  animation: svcHeroOrbitSpin 14s linear infinite;
  pointer-events: none;
}

.svc-hero-3d__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--inri-red);
  box-shadow: 0 0 14px rgba(227, 6, 19, 0.7);
  transform:
    rotate(calc(var(--o) * 90deg))
    translateX(150px)
    rotate(calc(var(--o) * -90deg));
}

.svc-hero-3d__orb:nth-child(2) {
  width: 7px;
  height: 7px;
  background: #ff6b73;
  transform:
    rotate(calc(var(--o) * 90deg))
    translateX(118px)
    rotate(calc(var(--o) * -90deg));
}

.svc-hero-3d__orb:nth-child(3) {
  width: 8px;
  height: 8px;
  opacity: 0.7;
  transform:
    rotate(calc(var(--o) * 90deg))
    translateX(175px)
    rotate(calc(var(--o) * -90deg));
}

@keyframes svcHeroOrbitSpin {
  to { transform: translateZ(-10px) rotateX(64deg) rotateZ(360deg); }
}

.svc-hero-3d__photo {
  position: absolute;
  top: 6%;
  left: 22%;
  width: 150px;
  height: 100px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  transform: translateZ(170px) rotateY(12deg) rotateX(6deg);
  animation: svcHeroPhotoFloat 5.2s ease-in-out infinite;
  z-index: 3;
}

.svc-hero-3d__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: svcHeroPhotoZoom 10s ease-in-out infinite alternate;
}

.svc-hero-3d__photo-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.25), transparent 65%);
  transform: translateX(-120%);
  animation: svcHeroShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes svcHeroPhotoFloat {
  0%, 100% { transform: translateZ(170px) rotateY(12deg) rotateX(6deg) translateY(0); }
  50% { transform: translateZ(185px) rotateY(6deg) rotateX(3deg) translateY(-10px); }
}

@keyframes svcHeroPhotoZoom {
  from { transform: scale(1.05); }
  to { transform: scale(1.15) translate(-2%, -1%); }
}

.svc-hero-3d__card {
  position: absolute;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 18px 20px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.svc-hero-3d__depth {
  position: absolute;
  inset: 8px -8px -8px 8px;
  border-radius: 16px;
  background: var(--inri-red);
  opacity: 0.45;
  transform: translateZ(-14px);
  pointer-events: none;
  z-index: -1;
}

.svc-hero-3d__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.18), transparent 62%);
  transform: translateX(-130%);
  animation: svcHeroShine 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes svcHeroShine {
  0%, 55% { transform: translateX(-130%); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

.svc-hero-3d__card--main {
  top: 30%;
  left: 16%;
  width: 270px;
  transform: translateZ(90px);
  animation: svcHeroCardFloat 5s ease-in-out infinite;
  z-index: 4;
}

.svc-hero-3d__card--a {
  top: 12%;
  right: 8%;
  transform: translateZ(150px) rotateY(-8deg);
  animation: svcHeroCardFloatA 4.4s ease-in-out infinite 0.3s;
}

.svc-hero-3d__card--b {
  bottom: 12%;
  right: 14%;
  transform: translateZ(130px) rotateY(6deg);
  animation: svcHeroCardFloatB 4.8s ease-in-out infinite 0.5s;
}

.svc-hero-3d__card--c {
  bottom: 20%;
  left: 6%;
  transform: translateZ(110px) rotateY(10deg);
  animation: svcHeroCardFloatC 5.2s ease-in-out infinite 0.2s;
}

@keyframes svcHeroCardFloat {
  0%, 100% { transform: translateZ(90px) translateY(0) rotateX(0deg); }
  50% { transform: translateZ(105px) translateY(-12px) rotateX(3deg); }
}

@keyframes svcHeroCardFloatA {
  0%, 100% { transform: translateZ(150px) rotateY(-8deg) translateY(0); }
  50% { transform: translateZ(165px) rotateY(-4deg) translateY(-12px); }
}

@keyframes svcHeroCardFloatB {
  0%, 100% { transform: translateZ(130px) rotateY(6deg) translateY(0); }
  50% { transform: translateZ(145px) rotateY(2deg) translateY(-10px); }
}

@keyframes svcHeroCardFloatC {
  0%, 100% { transform: translateZ(110px) rotateY(10deg) translateY(0); }
  50% { transform: translateZ(125px) rotateY(5deg) translateY(-11px); }
}

.svc-hero-3d__num {
  display: block;
  color: var(--inri-red);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}

.svc-hero-3d__card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 4px;
  position: relative;
}

.svc-hero-3d__card small {
  color: var(--text-dim);
  font-size: 0.78rem;
  position: relative;
}

.svc-hero-3d__card span {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
}

.svc-hero-3d__meter {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 28px;
  margin-top: 14px;
  position: relative;
}

.svc-hero-3d__meter i {
  flex: 1;
  display: block;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--inri-red), rgba(227, 6, 19, 0.35));
  animation: svcHeroBar 2.4s ease-in-out infinite;
}

.svc-hero-3d__meter i:nth-child(1) { height: 45%; animation-delay: 0s; }
.svc-hero-3d__meter i:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.svc-hero-3d__meter i:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.svc-hero-3d__meter i:nth-child(4) { height: 88%; animation-delay: 0.45s; }

@keyframes svcHeroBar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.7); }
}

.svc-hero-3d__chip {
  position: absolute;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  animation: svcHeroChipBob 3.6s ease-in-out infinite;
}

.svc-hero-3d__chip--1 { top: 8%; left: 4%; transform: translateZ(175px); animation-delay: 0s; }
.svc-hero-3d__chip--2 { top: 40%; right: 2%; transform: translateZ(165px); color: var(--inri-red); animation-delay: 0.3s; }
.svc-hero-3d__chip--3 { bottom: 6%; left: 34%; transform: translateZ(145px); animation-delay: 0.55s; }
.svc-hero-3d__chip--4 { top: 56%; left: 2%; transform: translateZ(155px); color: var(--inri-red); animation-delay: 0.2s; }
.svc-hero-3d__chip--5 { top: 22%; right: 28%; transform: translateZ(180px); animation-delay: 0.7s; }
.svc-hero-3d__chip--6 { bottom: 28%; right: 4%; transform: translateZ(140px); color: var(--inri-red); animation-delay: 0.4s; }

@keyframes svcHeroChipBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.page-services .svc-hero.is-inview .svc-hero-3d__card--main,
.page-services .svc-hero.is-inview .svc-hero-3d__card--a,
.page-services .svc-hero.is-inview .svc-hero-3d__card--b,
.page-services .svc-hero.is-inview .svc-hero-3d__card--c,
.page-services .svc-hero.is-inview .svc-hero-3d__photo,
.page-services .svc-hero.is-inview .svc-hero-3d__chip {
  animation-play-state: running;
}

@media (max-width: 1000px) {
  .svc-hero-3d__photo {
    width: 120px;
    height: 80px;
  }

  .svc-hero-3d__chip--5,
  .svc-hero-3d__chip--6 {
    display: none;
  }
}

@media (max-width: 700px) {
  .svc-hero-3d__photo,
  .svc-hero-3d__orbit,
  .svc-hero-3d__ring--3 {
    display: none;
  }
}

/* Responsive accordion service cards */
.svc-list {
  overflow: hidden;
}

.svc-list__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 16px);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.svc-block {
  perspective: 1000px;
  width: 100%;
  min-width: 0;
}

.svc-block .about-card-3d__face {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}

[data-theme="light"] .svc-block .about-card-3d__face {
  background: linear-gradient(165deg, #fff, #f6f6f7);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.svc-block.is-open .about-card-3d__face,
.svc-block:hover .about-card-3d__face {
  border-color: rgba(227, 6, 19, 0.35);
  box-shadow: 0 20px 48px rgba(227, 6, 19, 0.12);
}

.svc-block__head {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 2.2vw, 16px);
  align-items: center;
  text-align: left;
  padding: clamp(14px, 2.8vw, 22px);
}

.svc-block__num {
  width: clamp(40px, 8vw, 48px);
  height: clamp(40px, 8vw, 48px);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(227, 6, 19, 0.14);
  color: var(--inri-red);
  font-weight: 800;
  font-size: clamp(0.75rem, 2vw, 0.85rem);
  flex-shrink: 0;
}

.svc-block__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.svc-block__titles strong {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 2.6vw, 1.35rem);
  line-height: 1.25;
  word-break: break-word;
}

.svc-block.is-open .svc-block__titles strong {
  color: var(--inri-red);
}

.svc-block__titles small {
  color: var(--text-muted);
  font-size: clamp(0.78rem, 2vw, 0.88rem);
  line-height: 1.45;
}

.svc-block__chev {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.35s ease, border-color 0.3s, background 0.3s;
}

.svc-block__chev::before,
.svc-block__chev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--text);
}

.svc-block__chev::before {
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.svc-block__chev::after {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.svc-block.is-open .svc-block__chev {
  border-color: rgba(227, 6, 19, 0.45);
  background: rgba(227, 6, 19, 0.12);
  transform: rotate(90deg);
}

.svc-block.is-open .svc-block__chev::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.svc-block__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 clamp(14px, 2.8vw, 22px);
  transition: max-height 0.45s ease, opacity 0.3s ease, padding 0.35s ease;
}

.svc-block.is-open .svc-block__body {
  max-height: 720px;
  opacity: 1;
  padding: 0 clamp(14px, 2.8vw, 22px) clamp(16px, 3vw, 22px);
}

.svc-block__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 14px;
}

.svc-block__tags li {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: clamp(0.72rem, 1.8vw, 0.8rem);
  color: var(--text-dim);
  line-height: 1.3;
  max-width: 100%;
}

.svc-block__meta {
  margin: 0;
  font-size: clamp(0.8rem, 2vw, 0.86rem);
  color: var(--text-dim);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.svc-block__meta strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svc-block__process {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.svc-block__process li {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  font-size: clamp(0.72rem, 1.8vw, 0.8rem);
  font-weight: 600;
}

.svc-block__process li:not(:last-child)::after {
  content: ' →';
  color: var(--inri-red);
}

.svc-panel__sub {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.svc-showcase__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.svc-showcase__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.svc-showcase__nav button {
  appearance: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.35s ease;
}

.svc-showcase__nav button:hover {
  border-color: rgba(227, 6, 19, 0.35);
  color: var(--text);
  transform: translateX(4px);
}

.svc-showcase__nav button.is-active {
  background: linear-gradient(135deg, rgba(227, 6, 19, 0.16), rgba(255, 255, 255, 0.03));
  border-color: rgba(227, 6, 19, 0.45);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(227, 6, 19, 0.12);
}

.svc-showcase__num {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--inri-red);
  font-weight: 700;
}

.svc-showcase__label {
  font-weight: 600;
  font-size: 0.95rem;
}

.svc-showcase__stage {
  position: relative;
  min-height: 440px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(12px);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
  padding: 36px 32px;
}

.svc-showcase__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.svc-showcase__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--inri-red), #ff6b6b);
}

.svc-showcase__progress.is-running i {
  animation: svcShowcaseProgress 5s linear forwards;
}

@keyframes svcShowcaseProgress {
  from { width: 0; }
  to { width: 100%; }
}

.svc-panel {
  position: absolute;
  inset: 36px 32px;
  opacity: 0;
  transform: translateY(24px) rotateX(8deg);
  transition: opacity 0.45s, transform 0.55s ease;
  pointer-events: none;
}

.svc-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
  inset: auto;
}

.svc-panel__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(227, 6, 19, 0.15);
  color: var(--inri-red);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 20px;
  box-shadow: 0 12px 28px rgba(227, 6, 19, 0.15);
  animation: svcPanelIconPulse 3.5s ease-in-out infinite;
}

@keyframes svcPanelIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.svc-panel h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 12px;
}

.svc-panel p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 480px;
}

.svc-panel__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.svc-panel__tags li {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.svc-panel__sub {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inri-red);
  margin: 0 0 12px;
}

.svc-panel__tech {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.svc-panel__tech strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.svc-panel__process {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.svc-panel__process li {
  position: relative;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.svc-panel__process li:not(:last-child)::after {
  content: '↓';
  margin-left: 8px;
  color: var(--inri-red);
}

.svc-details__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}

.svc-detail-card {
  perspective: 1000px;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: calc(var(--i, 0) * 0.07s);
}

.page-services [data-svc-section].is-inview .svc-detail-card {
  opacity: 1;
  transform: none;
  animation: aboutClientsCardFloat 5.5s ease-in-out infinite;
  animation-delay: calc(0.6s + var(--i, 0) * 0.12s);
}

.svc-detail-card .about-card-3d__face {
  padding: 0;
  overflow: hidden;
  min-height: 100%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.svc-detail-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.14) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 3;
}

.svc-detail-card:hover .svc-detail-card__shine {
  animation: aboutClientsShine 0.85s ease forwards;
}

.svc-detail-card__media {
  height: 120px;
}

.svc-detail-card__media--1 { background: linear-gradient(135deg, rgba(227, 6, 19, 0.55), #1a1020); }
.svc-detail-card__media--2 { background: linear-gradient(135deg, #102030, rgba(227, 6, 19, 0.4)); }
.svc-detail-card__media--3 { background: linear-gradient(135deg, #201018, rgba(227, 6, 19, 0.35)); }
.svc-detail-card__media--4 { background: linear-gradient(135deg, rgba(227, 6, 19, 0.35), #0e2018); }
.svc-detail-card__media--5 { background: linear-gradient(135deg, #182030, rgba(227, 6, 19, 0.45)); }
.svc-detail-card__media--6 { background: linear-gradient(135deg, #1a0c14, #102028); }

.svc-detail-card__body {
  padding: 22px 20px 24px;
  position: relative;
  z-index: 1;
}

.svc-detail-card__num {
  display: inline-block;
  color: var(--inri-red);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.svc-detail-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.svc-detail-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

.svc-detail-card__meta {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 14px 0 0;
}

.svc-detail-card:hover .about-card-3d__face {
  border-color: rgba(227, 6, 19, 0.4);
  box-shadow: 0 22px 48px rgba(227, 6, 19, 0.14);
}

.svc-orbit {
  position: relative;
  width: min(520px, 90vw);
  aspect-ratio: 1;
  margin: 20px auto 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.svc-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 40px rgba(227, 6, 19, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 3;
  transform: translateZ(40px);
  animation: aboutClientsHubFloat 5s ease-in-out infinite;
}

.svc-orbit__core img {
  width: 36px;
  height: auto;
}

.svc-orbit__core strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.svc-orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(227, 6, 19, 0.25);
  transform-style: preserve-3d;
  animation: svcOrbitSpin 36s linear infinite;
}

.svc-orbit__ring--2 {
  inset: 14%;
  animation-duration: 48s;
  animation-direction: reverse;
  border-color: rgba(227, 6, 19, 0.16);
}

.svc-orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transform:
    rotate(calc(var(--a) * 60deg))
    translateX(210px)
    rotate(calc(var(--a) * -60deg));
  white-space: nowrap;
}

.svc-orbit__ring--2 .svc-orbit__item {
  transform:
    rotate(calc(var(--a) * 72deg))
    translateX(160px)
    rotate(calc(var(--a) * -72deg));
}

@keyframes svcOrbitSpin {
  to { transform: rotate(360deg); }
}

/* Why choose */
.svc-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
  z-index: 2;
}

.svc-why__card {
  perspective: 900px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: calc(var(--i, 0) * 0.05s);
}

.page-services [data-svc-section].is-inview .svc-why__card {
  opacity: 1;
  transform: none;
  animation: aboutClientsCardFloat 5.2s ease-in-out infinite;
  animation-delay: calc(0.4s + var(--i, 0) * 0.1s);
}

.svc-why__card .about-card-3d__face {
  min-height: 140px;
  padding: 24px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.svc-why__card strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--inri-red);
}

.svc-why__card span {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.svc-why__card:hover .about-card-3d__face {
  border-color: rgba(227, 6, 19, 0.4);
  box-shadow: 0 18px 40px rgba(227, 6, 19, 0.12);
}

/* Industries */
.svc-industries__wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.svc-industries__chip {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s, box-shadow 0.3s;
  transition-delay: calc(var(--i, 0) * 0.05s);
}

.page-services [data-svc-section].is-inview .svc-industries__chip {
  opacity: 1;
  transform: none;
  animation: aboutClientsCardFloat 4.8s ease-in-out infinite;
  animation-delay: calc(0.5s + var(--i, 0) * 0.08s);
}

.svc-industries__chip:hover {
  border-color: rgba(227, 6, 19, 0.45);
  box-shadow: 0 14px 32px rgba(227, 6, 19, 0.15);
  color: var(--inri-red);
}

.page-services [data-svc-section] > .container,
.page-services [data-svc-section] > .cta-band__inner {
  will-change: transform;
}

@media (max-width: 1100px) {
  .svc-why__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .svc-hero {
    min-height: auto;
    padding: 110px 0 56px;
  }

  .svc-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .svc-hero__copy {
    max-width: 640px;
    margin: 0 auto;
  }

  .svc-hero__desc {
    margin-left: auto;
    margin-right: auto;
  }

  .svc-hero__actions {
    justify-content: center;
  }

  .svc-hero__title br {
    display: none;
  }

  .svc-hero__visual {
    min-height: 300px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  .svc-hero-3d {
    height: 300px;
    margin: 0 auto;
  }

  .svc-hero__float,
  .svc-shapes {
    display: none;
  }

  .svc-showcase__layout {
    grid-template-columns: 1fr;
  }

  .svc-details__grid {
    grid-template-columns: 1fr 1fr;
  }

  .svc-showcase__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: none;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .svc-showcase__nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .svc-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .svc-section-head {
    margin-bottom: 28px;
  }

  .page-services [data-svc-section] > .container,
  .page-services [data-svc-section] > .cta-band__inner {
    transform: none !important;
  }
}

@media (max-width: 700px) {
  .page-services .section {
    padding: 64px 0;
  }

  .svc-hero {
    padding: 100px 0 40px;
  }

  .svc-hero__title {
    font-size: clamp(1.7rem, 7.5vw, 2.35rem);
  }

  .svc-hero__desc {
    font-size: 0.95rem;
  }

  .svc-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .svc-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .svc-hero__visual {
    min-height: 250px;
  }

  .svc-hero-3d {
    height: 250px;
    transform: rotateX(8deg) rotateY(-8deg) scale(0.92);
  }

  .svc-hero-3d__card--a,
  .svc-hero-3d__card--b,
  .svc-hero-3d__card--c {
    font-size: 0.72rem;
  }

  .svc-hero-3d__chip {
    font-size: 0.68rem;
    padding: 5px 8px;
  }

  .svc-details__grid,
  .svc-why__grid {
    grid-template-columns: 1fr;
  }

  .svc-why__card .about-card-3d__face {
    min-height: 110px;
    padding: 20px 16px;
  }

  .svc-industries__wall {
    gap: 8px;
    justify-content: center;
  }

  .svc-industries__chip {
    font-size: 0.78rem;
    padding: 10px 12px;
  }

  .svc-block .about-card-3d__face,
  .svc-block.is-open .about-card-3d__face,
  .svc-block:hover .about-card-3d__face {
    transform: none !important;
  }

  .svc-orbit__item {
    transform:
      rotate(calc(var(--a) * 60deg))
      translateX(140px)
      rotate(calc(var(--a) * -60deg));
    font-size: 0.7rem;
    padding: 8px 10px;
  }

  .svc-orbit__ring--2 .svc-orbit__item {
    transform:
      rotate(calc(var(--a) * 72deg))
      translateX(110px)
      rotate(calc(var(--a) * -72deg));
  }

  .page-services .cta-band__inner h2 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .page-services .floating-cta {
    right: 12px;
    bottom: 12px;
    font-size: 0.78rem;
    padding: 10px 14px;
  }
}

@media (max-width: 480px) {
  .svc-hero {
    padding: 92px 0 32px;
  }

  .svc-hero__visual {
    min-height: 210px;
  }

  .svc-hero-3d {
    height: 210px;
    transform: rotateX(6deg) rotateY(-6deg) scale(0.82);
  }

  .svc-hero-3d__chip--1,
  .svc-hero-3d__chip--4 {
    display: none;
  }

  .svc-block__titles small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .svc-block.is-open .svc-block__titles small {
    display: block;
    -webkit-line-clamp: unset;
  }

  .svc-block__process li:not(:last-child)::after {
    content: '';
  }

  .svc-block__process {
    flex-direction: column;
  }

  .svc-block__process li {
    width: 100%;
  }

  .svc-industries__chip {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }
}

@media (max-width: 360px) {
  .svc-block__head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .svc-block__num {
    display: none;
  }

  .svc-hero-3d__card--a,
  .svc-hero-3d__card--b {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .svc-block:hover .about-card-3d__face,
  .svc-why__card:hover .about-card-3d__face {
    transform: none;
  }

  .svc-block .about-card-3d__face {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero-3d,
  .svc-hero-3d__ring,
  .svc-hero-3d__beam,
  .svc-hero-3d__card,
  .svc-hero-3d__orbit,
  .svc-hero-3d__photo,
  .svc-hero-3d__photo img,
  .svc-hero-3d__shine,
  .svc-hero-3d__photo-shine,
  .svc-hero-3d__platform,
  .svc-hero-3d__chip,
  .svc-hero-3d__meter i,
  .svc-orbit__ring,
  .svc-orbit__core,
  .svc-panel__icon,
  .svc-detail-card,
  .svc-shape,
  .svc-why__card,
  .svc-industries__chip {
    animation: none !important;
  }

  .svc-hero-3d {
    transform: rotateX(8deg) rotateY(-8deg);
  }

  .svc-detail-card,
  .svc-why__card,
  .svc-industries__chip,
  .svc-block {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========== SITE-WIDE RESPONSIVE — content + 3D + images visible ========== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Keep logo/cert images sharp inside fixed frames */
.clients-row__plate img,
.footer__cert img,
.footer__logo,
.contact-card__shot img,
.about-clients-3d__logo img,
.about-clients__tile img,
.nav__logo img,
.hs-media img,
.case-card__media img,
[data-img-parallax] img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.section {
  padding-block: clamp(48px, 8vw, 96px);
}

.page-hero {
  padding: calc(var(--nav-h) + clamp(36px, 6vw, 72px)) 0 clamp(40px, 6vw, 72px);
}

.page-hero__title {
  font-size: clamp(2.1rem, 6.5vw, 4.2rem);
  overflow-wrap: anywhere;
}

.btn {
  max-width: 100%;
}

/* Mobile / tablet: never hide content behind reveal */
@media (max-width: 900px) {
  [data-reveal],
  [data-reveal-stagger] > *,
  [data-reveal-stagger] .clients-row,
  .about-clients__card,
  .about-clients__tile,
  .contact-card,
  .svc-block,
  .svc-detail-card,
  .svc-why__card,
  .why-card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  [data-scroll-section] {
    overflow: visible;
  }

  .container,
  .container-wide {
    width: calc(100% - 32px);
  }

  .nav__inner {
    width: calc(100% - 24px);
  }

  .section {
    padding-block: clamp(40px, 7vw, 72px);
  }

  .page-hero {
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 40px;
  }

  .page-hero__title,
  .clients-hero__title,
  .contact-hero__title,
  .about-hero__title,
  .svc-hero__title {
    font-size: clamp(1.85rem, 8vw, 3rem);
    line-height: 1.08;
  }

  /* —— Keep 3D visible, just scale to fit —— */
  .clients-hero {
    min-height: auto;
    padding: calc(var(--nav-h) + 28px) 0 48px;
    overflow: visible;
  }

  .clients-hero__scene {
    opacity: 1;
    pointer-events: none;
    transform: scale(0.72);
    transform-origin: 85% 45%;
  }

  .clients-hero__chip,
  .clients-hero__ring,
  .clients-hero__panel {
    opacity: 1;
    display: block;
  }

  .clients-hero__actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .clients-hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .clients-filter {
    gap: 8px;
  }

  .clients-filter__btn {
    font-size: 0.72rem;
    padding: 8px 12px;
  }

  .clients-directory__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .clients-directory__count {
    text-align: left;
  }

  .clients-row {
    grid-template-columns: 40px 140px minmax(0, 1fr);
    gap: 12px 16px;
    padding: 22px 4px 22px 8px;
    overflow: visible;
  }

  .clients-row__stack {
    max-width: 140px;
  }

  .clients-row__plate {
    height: 88px;
    min-height: 88px;
    transform: none;
  }

  .clients-row__plate img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
  }

  .clients-row__copy h2 {
    font-size: 1.1rem;
  }

  .clients-row__copy p {
    font-size: 0.9rem;
  }

  /* Home hero 3D */
  .hero__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__visual,
  .svc-hero__visual,
  .about-hero__visual {
    display: block !important;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    min-height: 260px;
    height: auto;
    overflow: visible;
  }

  .hero-3d,
  .svc-hero-3d,
  .about-page-3d,
  .about-clients-3d {
    display: block !important;
    width: 100%;
    max-width: 100%;
    height: 280px;
    margin-inline: auto;
    transform: rotateX(8deg) rotateY(-10deg) scale(0.88);
    transform-style: preserve-3d;
    animation: none;
  }

  .svc-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .svc-hero__actions {
    justify-content: center;
  }

  .svc-hero__float {
    display: block;
    opacity: 0.35;
  }

  .svc-shapes,
  .scroll-bg,
  .about-section__shapes {
    display: block !important;
    opacity: 0.45;
  }

  .about-hero__float-words {
    display: block !important;
    opacity: 0.35;
  }

  /* About / contact layouts */
  .about-hero__grid,
  .about-who__layout,
  .about-vm__grid,
  .about-values__ui {
    grid-template-columns: 1fr !important;
  }

  .about-timeline,
  .about-team__grid,
  .about-clients__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .about-clients__tile img,
  .about-clients-3d__logo img {
    display: block !important;
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    margin-inline: auto;
  }

  .contact-offices__grid,
  .contact-form-sec__grid,
  .contact-split {
    grid-template-columns: 1fr !important;
  }

  .contact-card__face {
    transform: translateZ(0) !important;
  }

  .contact-card__shot img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .contact-card__stage {
    height: 170px;
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .footer__col {
    padding: 0 !important;
  }

  .footer__col--brand {
    border-inline: 0 !important;
    border-block: 1px solid rgba(255, 255, 255, 0.14);
    padding-block: 28px !important;
  }

  .footer__certs {
    max-width: 300px;
  }

  .footer__cert img {
    display: block !important;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .stats,
  .metrics-row,
  .benefits-timeline,
  .about-who__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .services-grid,
  .industries-grid,
  .tech-grid,
  .process-grid,
  .careers-grid,
  .jobs-grid,
  .case-grid,
  .values-grid,
  .team-grid,
  .client-wall {
    grid-template-columns: 1fr !important;
  }

  .cta-band {
    margin: 20px 12px 40px;
    padding: 40px 20px;
  }

  .field input,
  .field textarea,
  .field select {
    width: 100%;
    font-size: 16px;
  }

  .floating-cta {
    right: 12px;
    bottom: 12px;
    font-size: 0.78rem;
    padding: 10px 14px;
  }

  .scroll-top {
    right: 12px;
    bottom: 12px;
    width: 44px;
    height: 44px;
  }

  body:has(.floating-cta.is-visible) .scroll-top {
    bottom: 72px;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-h: 64px;
  }

  .container,
  .container-wide,
  .nav__inner {
    width: calc(100% - 24px);
  }

  .section {
    padding-block: 48px;
  }

  .hero__headline,
  .page-hero__title,
  .clients-hero__title,
  .about-hero__title {
    font-size: clamp(1.7rem, 9vw, 2.4rem);
  }

  .clients-hero__actions,
  .hero__actions,
  .svc-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .clients-hero__actions .btn,
  .hero__actions .btn,
  .svc-hero__actions .btn,
  .cta-band .btn {
    width: 100%;
    justify-content: center;
  }

  .clients-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clients-filter__btn {
    width: 100%;
    text-align: center;
  }

  .clients-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .clients-row__index,
  .clients-row__logo,
  .clients-row__copy {
    grid-column: 1;
  }

  .clients-row__stack,
  .clients-row__plate {
    max-width: 100%;
    width: 100%;
  }

  .clients-row__plate {
    height: 100px;
    min-height: 100px;
  }

  .clients-row__plate img {
    max-height: 64px;
  }

  /* 3D scenes stay on screen, slightly smaller */
  .hero-3d,
  .svc-hero-3d,
  .about-page-3d,
  .about-clients-3d {
    height: 240px;
    transform: rotateX(6deg) rotateY(-8deg) scale(0.82);
  }

  .clients-hero__scene {
    transform: scale(0.58);
    transform-origin: 90% 40%;
  }

  .svc-hero-3d__chip,
  .clients-hero__chip {
    display: inline-flex !important;
    opacity: 0.95;
  }

  .about-timeline,
  .about-team__grid,
  .about-clients__wall,
  .stats,
  .metrics-row,
  .benefits-timeline,
  .about-who__stats,
  .values-grid,
  .team-grid,
  .client-wall,
  .culture-gallery {
    grid-template-columns: 1fr !important;
  }

  .contact-card__stage {
    height: 150px;
  }

  .footer__certs {
    width: 100%;
    max-width: none;
  }

  .footer__cert {
    flex: 1;
    min-width: 0;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Soften 3D tilt on touch — keep a static 3D pose, don't wipe images */
  .contact-card__face,
  .about-card-3d__face,
  .svc-block .about-card-3d__face,
  .svc-why__card .about-card-3d__face {
    transform: translateZ(8px) rotateY(-4deg) !important;
  }

  .clients-row__plate {
    transform: translateZ(0);
  }
}

@media (max-width: 480px) {
  .container,
  .container-wide,
  .nav__inner {
    width: calc(100% - 20px);
  }

  .page-hero,
  .clients-hero,
  .svc-hero,
  .contact-hero,
  .about-hero,
  .hero {
    padding-top: calc(var(--nav-h) + 20px);
    padding-bottom: 28px;
  }

  .hero-3d,
  .svc-hero-3d,
  .about-page-3d {
    height: 210px;
    transform: rotateX(5deg) rotateY(-6deg) scale(0.78);
  }

  .svc-hero-3d__card--a,
  .svc-hero-3d__chip--1 {
    opacity: 0.85;
  }

  .cta-band {
    margin: 16px 8px 32px;
    padding: 32px 16px;
  }

  .floating-cta {
    font-size: 0.72rem;
    padding: 8px 12px;
  }
}

@media (max-width: 360px) {
  .clients-filter {
    grid-template-columns: 1fr;
  }

  .footer__map {
    grid-template-columns: 1fr;
  }

  .hero-3d,
  .svc-hero-3d,
  .about-page-3d {
    height: 190px;
  }
}

/* Touch: keep CSS 3D idle animations, skip hover-only boosts */
@media (hover: none), (pointer: coarse) {
  .clients-row:hover .clients-row__stack {
    transform: none;
  }

  .svc-hero-3d:not(.is-auto),
  .about-page-3d:not(.is-auto),
  .about-clients-3d:not(.is-auto-tilt),
  .clients-hero__scene:not(.is-auto-tilt) {
    animation: clientsHeroAutoTilt 8s ease-in-out infinite;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .page-hero,
  .clients-hero,
  .svc-hero,
  .about-hero,
  .contact-hero,
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 12px);
    padding-bottom: 20px;
  }

  .hero-3d,
  .svc-hero-3d,
  .about-page-3d,
  .clients-hero__scene {
    height: 180px;
    transform: scale(0.7);
  }
}