:root {
  --bg: #030305;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.075);
  --ink: #f6f3ed;
  --muted: rgba(246, 243, 237, 0.66);
  --soft: rgba(246, 243, 237, 0.42);
  --line: rgba(246, 243, 237, 0.14);
  --accent: #94ff38;
  --accent-2: #38ffd2;
  --danger: #ff3434;
  --shadow: 0 34px 120px rgba(0, 0, 0, 0.48);
  --radius: 8px;
  --header: 80px;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(148, 255, 56, 0.2), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(56, 255, 210, 0.14), transparent 30%),
    linear-gradient(180deg, #030305, #070807 52%, #030305);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

body.modal-open,
body.menu-open,
body.intro-lock {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
video {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px);
  background-size: 28px 28px, 36px 36px;
  mix-blend-mode: overlay;
}

.ambient {
  position: fixed;
  z-index: -2;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.28;
  pointer-events: none;
  animation: ambientMove 16s ease-in-out infinite;
}

.ambient-one {
  left: -18vw;
  top: 20vh;
  background: rgba(148, 255, 56, 0.25);
}

.ambient-two {
  right: -16vw;
  bottom: 0;
  background: rgba(56, 255, 210, 0.16);
  animation-delay: -7s;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
}

.cursor {
  --cursor-x: -120px;
  --cursor-y: -120px;
  --cursor-scale: 0.62;
  position: fixed;
  z-index: 120;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  color: #030305;
  background: var(--accent);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 950;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%) scale(var(--cursor-scale));
  transition: opacity 160ms ease;
  will-change: transform, opacity;
}

.cursor.is-active {
  opacity: 0.92;
  --cursor-scale: 1;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #030305;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148, 255, 56, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 255, 56, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle, black, transparent 70%);
}

.intro::before,
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro::before {
  background:
    radial-gradient(circle at 46% 50%, rgba(14, 209, 255, 0.18), transparent 24%),
    radial-gradient(circle at 57% 54%, rgba(255, 0, 170, 0.17), transparent 22%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: introColorFlash 980ms steps(2, end) 160ms forwards;
}

.intro::after {
  background:
    linear-gradient(transparent 0 46%, rgba(255, 255, 255, 0.9) 47%, transparent 49%),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 255, 255, 0.035) 11px 12px);
  opacity: 0;
  transform: translateY(-28%);
  animation: introSignalTear 960ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards;
}

.intro-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(520px, 72vw);
  aspect-ratio: 1;
  color: #030305;
  background: transparent;
  border-radius: 18px;
  box-shadow:
    0 0 90px rgba(0, 209, 255, 0.18),
    0 0 120px rgba(255, 0, 170, 0.12);
  overflow: visible;
  animation: introMark 1180ms steps(1, end) forwards;
}

.intro-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(10px 0 0 rgba(0, 209, 255, 0.48))
    drop-shadow(-9px 0 0 rgba(255, 0, 170, 0.42))
    drop-shadow(0 24px 60px rgba(0, 0, 0, 0.85));
  transform: scale(0.72) skewX(-7deg);
  animation: introLogoGlitch 1180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-mark i {
  position: absolute;
  inset: 16% 4%;
  background:
    linear-gradient(106deg, transparent 28%, rgba(255, 255, 255, 0.92), transparent 44%),
    linear-gradient(90deg, transparent 0 8%, rgba(0, 209, 255, 0.56) 9% 12%, transparent 14% 72%, rgba(255, 0, 170, 0.5) 74% 78%, transparent 80%);
  transform: translateX(-88%) skewX(-18deg);
  mix-blend-mode: screen;
  animation: sweep 780ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.intro-mark::before,
.intro-mark::after {
  content: "";
  position: absolute;
  inset: 16% 2%;
  background: url("assets/brand/heb-glitch-logo.png") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.intro-mark::before {
  filter: brightness(1.4) drop-shadow(0 0 16px rgba(0, 209, 255, 0.55));
  transform: translateX(-18px);
  animation: introGhostCyan 820ms steps(2, end) 160ms forwards;
}

.intro-mark::after {
  filter: brightness(1.4) drop-shadow(0 0 16px rgba(255, 0, 170, 0.5));
  transform: translateX(18px);
  animation: introGhostMagenta 820ms steps(2, end) 180ms forwards;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header);
  padding: 16px 56px;
  background: rgba(3, 3, 5, 0.78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px);
  transition: min-height 220ms ease, padding 220ms ease, background 220ms ease;
}

.site-header.is-compact {
  --header: 64px;
  padding-block: 10px;
  background: rgba(3, 3, 5, 0.9);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}

.brand span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #030305;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-weight: 950;
  overflow: hidden;
  box-shadow: 0 0 28px rgba(0, 209, 255, 0.08), 0 0 34px rgba(255, 0, 170, 0.06);
}

.brand span img {
  display: block;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.16) saturate(1.08);
}

.brand small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.nav-link {
  position: relative;
  min-height: 40px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.nav-link.is-active {
  color: #030305;
  background: var(--accent);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.icon-button,
.menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.sound-toggle[aria-pressed="false"] .sound-wave {
  opacity: 0.22;
}

.menu-toggle {
  display: none;
  gap: 5px;
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-light {
  color: #030305;
  background: var(--ink);
}

.button-accent {
  color: #030305;
  background: var(--accent);
}

.button-glass,
.button-dark {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.065);
  border-color: var(--line);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 92px 24px 32px;
  background: rgba(3, 3, 5, 0.96);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu button {
  min-height: 58px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 900;
}

.app-shell {
  min-height: calc(100vh - var(--header));
  padding: 34px 56px 58px;
}

.panel {
  display: none;
  min-height: calc(100vh - var(--header) - 92px);
  opacity: 0;
  filter: blur(12px);
  transform: translateY(18px);
}

.panel.is-active {
  display: block;
  animation: panelIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 36px;
  align-items: center;
}

.hero-grid {
  min-height: calc(100vh - var(--header) - 130px);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

h1 {
  max-width: 980px;
  margin-bottom: 22px;
  font-size: clamp(2.45rem, 5.45vw, 5.85rem);
  line-height: 1.02;
  font-weight: 720;
  letter-spacing: 0;
}

.panel-head h2,
.home-featured h2 {
  max-width: 1040px;
  margin-bottom: 22px;
  font-size: clamp(2.15rem, 4.2vw, 4.65rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0;
}

.hero-copy p,
.panel-head p,
.home-featured p {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.72;
}

.hero-roles,
.hero-actions,
.panel-cta,
.quick-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-roles {
  margin: 26px 0;
}

.hero-roles span,
.tool-list span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  color: rgba(246, 243, 237, 0.82);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
}

.hero-showcase {
  position: relative;
  min-height: 620px;
  perspective: 1200px;
}

.showcase-card {
  position: absolute;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.showcase-card:hover img {
  transform: scale(1.04);
}

.showcase-card-main {
  inset: 36px 8% 80px 5%;
}

.showcase-card-main div,
.showcase-card-side strong,
.showcase-card-mini strong {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: var(--ink);
  font-weight: 950;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.showcase-card-main span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.showcase-card-side {
  right: 0;
  top: 0;
  width: 42%;
  height: 230px;
}

.showcase-card-mini {
  left: 0;
  bottom: 0;
  width: 38%;
  height: 210px;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.logo-flow {
  margin-top: 22px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.logo-flow-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 14px;
}

.logo-flow-header p {
  max-width: 520px;
  margin: 0;
  color: var(--soft);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.55;
  text-align: right;
}

.logo-flow-grid {
  display: grid;
  gap: 10px;
}

.logo-lane {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(148, 255, 56, 0.08), transparent 28%, transparent 72%, rgba(94, 255, 216, 0.06)),
    rgba(255, 255, 255, 0.025);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logo-track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: logoDrift 36s linear infinite;
}

.logo-track.reverse {
  animation-direction: reverse;
  animation-duration: 42s;
}

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

.logo-item {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(104px, 10vw, 148px);
  height: 44px;
  padding: 8px 13px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 8px;
  opacity: 0.82;
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.logo-item:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(148, 255, 56, 0.36);
  background: rgba(148, 255, 56, 0.075);
}

.logo-item img {
  display: block;
  max-width: 100%;
  max-height: 25px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.26);
}

.ai-lane .logo-item,
.tool-stack .logo-item {
  width: clamp(82px, 7.4vw, 116px);
  height: 36px;
  padding: 7px 10px;
}

.ai-lane .logo-item img,
.tool-stack .logo-item img {
  max-height: 21px;
}

.home-stats article,
.youtube-proof article,
.milestone-list article {
  min-height: 122px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.home-stats strong,
.youtube-proof strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1;
}

.home-stats span,
.youtube-proof span,
.milestone-list span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.home-featured,
.featured-case,
.waitlist-form,
.contact-form,
.modal-panel {
  margin-top: 28px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.home-featured {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}

.home-featured h2 {
  margin-bottom: 0;
  font-size: clamp(1.85rem, 3.45vw, 3.45rem);
}

.home-pathways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.home-pathways article {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

.home-pathways article:hover {
  border-color: rgba(148, 255, 56, 0.46);
  transform: translateY(-5px);
}

.home-pathways img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: contain;
  padding: 8px;
  background: #08090a;
  border-bottom: 1px solid var(--line);
  transition: transform 420ms ease, filter 420ms ease;
}

.home-pathways article:hover img {
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.045);
}

.home-pathways div {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.home-pathways span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.home-pathways h3 {
  margin: 0;
  font-size: clamp(1.02rem, 1.28vw, 1.28rem);
  line-height: 1.25;
}

.home-pathways button {
  width: max-content;
  min-height: 38px;
  padding: 0 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.home-pathways button:hover {
  color: #030305;
  background: var(--accent);
  border-color: var(--accent);
}

.home-project-teaser {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 500px;
  margin-top: 18px;
  overflow: hidden;
  background: #090a0b;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.home-project-teaser > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
}

.home-project-teaser-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 3, 5, 0.94) 0%, rgba(3, 3, 5, 0.64) 42%, rgba(3, 3, 5, 0.12) 78%),
    linear-gradient(180deg, transparent 46%, rgba(3, 3, 5, 0.78));
}

.home-project-teaser-copy {
  position: relative;
  z-index: 1;
  width: min(740px, 100%);
  padding: clamp(28px, 5vw, 68px);
}

.home-project-teaser h2 {
  margin: 14px 0 18px;
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: 1.03;
}

.home-project-teaser p {
  max-width: 620px;
  color: rgba(246, 243, 237, 0.72);
  line-height: 1.7;
}

.projects-overview[hidden],
.entertainment-detail[hidden],
.prombt-detail[hidden],
.influencer-detail[hidden],
.aipocalypto-detail[hidden] {
  display: none !important;
}

.sector-feature {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background: #070809;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.sector-feature > video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sector-feature-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 3, 5, 0.96) 0%, rgba(3, 3, 5, 0.64) 42%, rgba(3, 3, 5, 0.12) 74%),
    linear-gradient(180deg, rgba(3, 3, 5, 0.08), rgba(3, 3, 5, 0.88));
}

.sector-feature-top {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(246, 243, 237, 0.76);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sector-feature-copy {
  width: min(820px, 74%);
  padding: clamp(28px, 5vw, 68px);
  padding-bottom: 126px;
}

.sector-feature-copy h3 {
  margin: 16px 0 20px;
  font-size: clamp(2.25rem, 4.6vw, 5.4rem);
  line-height: 0.98;
}

.sector-feature-copy p {
  max-width: 650px;
  color: rgba(246, 243, 237, 0.76);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.7;
}

.sector-logo-line {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: rgba(246, 243, 237, 0.14);
  border: 1px solid rgba(246, 243, 237, 0.12);
  border-radius: 8px;
  backdrop-filter: blur(16px);
}

.sector-logo-line img {
  width: 100%;
  height: 72px;
  padding: 17px 20px;
  object-fit: contain;
  background: rgba(3, 3, 5, 0.7);
  filter: grayscale(1) brightness(1.65);
}

.project-system {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.project-system article {
  min-height: 150px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.045);
}

.project-system strong {
  display: block;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1;
}

.project-system span {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.entertainment-detail {
  --venue-accent: var(--accent);
}

.detail-toolbar,
.venue-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.detail-toolbar {
  margin-bottom: 20px;
}

.detail-toolbar > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.venue-switcher {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.venue-brand-button {
  display: grid;
  place-items: center;
  height: 78px;
  padding: 14px 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.venue-brand-button img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.45);
  opacity: 0.72;
  transition: filter 180ms ease, opacity 180ms ease;
}

.venue-brand-button:hover,
.venue-brand-button.is-active {
  background: color-mix(in srgb, var(--venue-accent) 11%, rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, var(--venue-accent) 62%, transparent);
  transform: translateY(-2px);
}

.venue-brand-button:hover img,
.venue-brand-button.is-active img {
  filter: none;
  opacity: 1;
}

.venue-stage {
  display: grid;
  grid-template-columns: minmax(370px, 0.86fr) minmax(0, 1.14fr);
  min-height: 680px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--venue-accent) 10%, transparent), transparent 36%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.venue-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 58px);
  border-right: 1px solid var(--line);
}

.venue-story .kicker {
  color: var(--venue-accent);
}

.venue-story .kicker::before {
  background: var(--venue-accent);
}

.venue-story-logo {
  width: min(270px, 82%);
  height: 110px;
  margin: 40px 0;
  object-fit: contain;
  object-position: left center;
}

.venue-story h2 {
  margin-bottom: 20px;
  font-size: clamp(2.05rem, 2.8vw, 3.55rem);
  line-height: 1.04;
}

.venue-story p {
  color: var(--muted);
  line-height: 1.75;
}

.venue-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.venue-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  color: rgba(246, 243, 237, 0.76);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
}

.venue-counter {
  margin-top: auto;
  padding-top: 34px;
}

.venue-counter strong {
  display: block;
  color: var(--venue-accent);
  font-size: clamp(3rem, 5vw, 6rem);
  line-height: 0.82;
}

.venue-counter span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.venue-main-media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--venue-accent) 16%, transparent), transparent 42%),
    #050607;
}

.venue-main-media::before,
.venue-main-media::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--venue-accent) 45%, transparent), transparent);
  opacity: 0.7;
}

.venue-main-media::before {
  left: 14%;
}

.venue-main-media::after {
  right: 14%;
}

.venue-main-media video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 680px;
  object-fit: contain;
  background: transparent;
}

.venue-main-label {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(3, 3, 5, 0.76);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.venue-main-label span {
  color: var(--venue-accent);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.venue-main-label strong {
  font-size: 0.9rem;
}

.venue-filmstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.venue-film-card {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  color: var(--ink);
  background: #08090a;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  transition: transform 220ms ease, border-color 220ms ease;
}

.venue-film-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(3, 3, 5, 0.9));
  pointer-events: none;
}

.venue-film-card:hover,
.venue-film-card.is-active {
  border-color: color-mix(in srgb, var(--venue-accent) 70%, transparent);
  transform: translateY(-5px);
}

.venue-film-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.venue-film-card > span,
.venue-film-card > strong,
.venue-film-card > i {
  position: absolute;
  z-index: 1;
}

.venue-film-card > span {
  left: 16px;
  bottom: 46px;
  color: var(--venue-accent);
  font-size: 0.68rem;
  font-weight: 950;
}

.venue-film-card > strong {
  left: 16px;
  right: 58px;
  bottom: 16px;
  font-size: 0.88rem;
}

.venue-film-card > i {
  right: 16px;
  bottom: 16px;
  width: 34px;
  height: 34px;
  background: var(--venue-accent);
  border-radius: 50%;
}

.venue-film-card > i::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  border-left: 10px solid #030305;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.venue-navigation {
  margin-top: 18px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.venue-navigation p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.project-file-divider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin: 72px 0 20px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.project-file-divider i {
  height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(190, 255, 38, 0.7), var(--line));
}

.project-file-divider strong {
  color: #c9ff32;
  font-size: 0.9rem;
}

.prombt-feature {
  min-height: 760px;
  background: #080b07;
  border-color: rgba(201, 255, 50, 0.34);
}

.prombt-feature > video {
  object-position: center 22%;
  filter: saturate(0.92) contrast(1.08);
}

.prombt-feature-shade {
  background:
    linear-gradient(90deg, rgba(5, 8, 4, 0.98) 0%, rgba(5, 8, 4, 0.8) 45%, rgba(5, 8, 4, 0.12) 76%),
    linear-gradient(180deg, rgba(5, 8, 4, 0.08), rgba(5, 8, 4, 0.86));
}

.prombt-feature-copy {
  width: min(900px, 76%);
  padding-bottom: clamp(64px, 8vw, 110px);
}

.prombt-feature-copy h3 {
  max-width: 880px;
  font-size: clamp(2.3rem, 4.55vw, 5.25rem);
}

.prombt-wordmark {
  display: inline-flex;
  align-items: flex-start;
  color: #c9ff32;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 850;
  line-height: 0.9;
  text-transform: lowercase;
}

.prombt-wordmark sup {
  margin: 0.12em 0 0 0.18em;
  font-size: 0.28em;
  font-weight: 950;
  text-transform: uppercase;
}

.prombt-logo-lockup {
  display: block;
  width: clamp(136px, 14vw, 220px);
  height: auto;
  padding: 10px 14px;
  object-fit: contain;
  background:
    linear-gradient(135deg, rgba(248, 255, 225, 0.98), rgba(206, 255, 54, 0.9)),
    rgba(248, 255, 225, 0.96);
  border: 1px solid rgba(201, 255, 50, 0.54);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.prombt-logo-lockup-feature {
  width: clamp(170px, 18vw, 280px);
  margin-bottom: 28px;
}

.prombt-logo-lockup-large {
  width: clamp(220px, 28vw, 420px);
  margin-bottom: 20px;
}

.button-prombt {
  color: #11150b;
  background: #c9ff32;
  border: 1px solid #c9ff32;
}

.button-prombt:hover {
  color: #11150b;
  background: #e3ff83;
  border-color: #e3ff83;
  transform: translateY(-2px);
}

.prombt-orbit {
  position: absolute;
  right: clamp(24px, 5vw, 76px);
  bottom: clamp(30px, 6vw, 72px);
  z-index: 1;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(201, 255, 50, 0.28);
  border-radius: 50%;
  animation: prombtOrbit 18s linear infinite;
}

.prombt-orbit::before,
.prombt-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(201, 255, 50, 0.14);
  border-radius: 50%;
}

.prombt-orbit::before {
  inset: 38px;
}

.prombt-orbit::after {
  inset: 82px;
  background: rgba(201, 255, 50, 0.08);
}

.prombt-orbit span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  color: #c9ff32;
  background: rgba(6, 10, 5, 0.84);
  border: 1px solid rgba(201, 255, 50, 0.36);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
  animation: prombtOrbitReverse 18s linear infinite;
}

.prombt-orbit span:nth-child(1) {
  left: -22px;
  top: 62px;
}

.prombt-orbit span:nth-child(2) {
  right: -34px;
  top: 114px;
}

.prombt-orbit span:nth-child(3) {
  left: 84px;
  bottom: -16px;
}

.prombt-system article {
  background:
    linear-gradient(145deg, rgba(201, 255, 50, 0.09), transparent 55%),
    rgba(255, 255, 255, 0.035);
}

.prombt-system strong {
  color: #c9ff32;
}

.prombt-detail {
  --prombt: #c9ff32;
  --prombt-ink: #151a0c;
}

.prombt-toolbar > span {
  color: var(--prombt);
}

.prombt-hero {
  position: relative;
  min-height: 880px;
  overflow: hidden;
  isolation: isolate;
  background: #070a05;
  border: 1px solid rgba(201, 255, 50, 0.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.prombt-hero > video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.prombt-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 8, 4, 0.98) 0%, rgba(5, 8, 4, 0.72) 48%, rgba(5, 8, 4, 0.16) 78%),
    linear-gradient(180deg, transparent 38%, rgba(5, 8, 4, 0.92));
}

.prombt-hero-copy {
  width: min(940px, 76%);
  padding: clamp(34px, 6vw, 86px);
  padding-bottom: 190px;
}

.prombt-wordmark-large {
  font-size: clamp(3rem, 7vw, 8rem);
}

.prombt-hero-copy > p {
  max-width: 620px;
  margin: 28px 0 18px;
  color: rgba(246, 243, 237, 0.76);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.65;
}

.prombt-hero-copy h2 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(2.25rem, 4.15vw, 4.8rem);
  line-height: 0.98;
}

.prombt-hero-metrics {
  position: absolute;
  left: clamp(34px, 6vw, 86px);
  right: clamp(34px, 6vw, 86px);
  bottom: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: rgba(201, 255, 50, 0.18);
  border: 1px solid rgba(201, 255, 50, 0.28);
  border-radius: 8px;
  backdrop-filter: blur(18px);
}

.prombt-hero-metrics article {
  min-height: 88px;
  padding: 18px 22px;
  background: rgba(5, 8, 4, 0.78);
}

.prombt-hero-metrics article + article {
  border-left: 1px solid rgba(201, 255, 50, 0.22);
}

.prombt-hero-metrics strong,
.prombt-hero-metrics span {
  display: block;
}

.prombt-hero-metrics strong {
  color: var(--prombt);
  font-size: 1.7rem;
}

.prombt-hero-metrics span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.prombt-command,
.prombt-model-lab,
.prombt-pipeline,
.prombt-deck {
  margin-top: 78px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 26px;
}

.section-heading h2 {
  max-width: 920px;
  margin: 12px 0 0;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.02;
}

.section-heading > p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.prombt-section-heading .kicker {
  color: var(--prombt);
}

.prombt-section-heading .kicker::before {
  background: var(--prombt);
}

.prombt-player {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
  min-height: 720px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(201, 255, 50, 0.1), transparent 42%),
    #090b08;
  border: 1px solid rgba(201, 255, 50, 0.24);
  border-radius: var(--radius);
}

.prombt-player-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 4.5vw, 64px);
  border-right: 1px solid rgba(201, 255, 50, 0.18);
}

.prombt-player-copy > span {
  color: var(--prombt);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.prombt-player-copy h3 {
  margin: 24px 0 20px;
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  line-height: 0.98;
}

.prombt-player-copy p {
  color: var(--muted);
  line-height: 1.75;
}

.prombt-film-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.prombt-film-tags span {
  padding: 9px 11px;
  color: var(--prombt);
  background: rgba(201, 255, 50, 0.07);
  border: 1px solid rgba(201, 255, 50, 0.22);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 850;
}

.prombt-player-media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(201, 255, 50, 0.14), transparent 34%),
    #030403;
}

.prombt-player-media video {
  width: 100%;
  height: 720px;
  object-fit: contain;
}

.prombt-scan {
  position: absolute;
  inset: -35% 0 auto;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(201, 255, 50, 0.12), transparent);
  pointer-events: none;
  animation: prombtScan 6s ease-in-out infinite;
}

.prombt-player-status {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 9px 11px;
  color: var(--prombt);
  background: rgba(3, 4, 3, 0.8);
  border: 1px solid rgba(201, 255, 50, 0.26);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0;
  pointer-events: none;
}

.prombt-filmstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-color: rgba(201, 255, 50, 0.58) rgba(255, 255, 255, 0.05);
}

.prombt-film-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  color: var(--ink);
  background: #080a07;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  transition: transform 200ms ease, border-color 200ms ease;
}

.prombt-film-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(3, 4, 3, 0.96));
  pointer-events: none;
}

.prombt-film-card:hover,
.prombt-film-card.is-active {
  border-color: rgba(201, 255, 50, 0.75);
  transform: translateY(-4px);
}

.prombt-film-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease, filter 300ms ease;
}

.prombt-film-card:hover img,
.prombt-film-card.is-active img {
  filter: saturate(1.12) contrast(1.04);
  transform: scale(1.025);
}

.prombt-film-card span,
.prombt-film-card strong,
.prombt-film-card small {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
}

.prombt-film-card span {
  top: 14px;
  color: var(--prombt);
  font-size: 0.65rem;
  font-weight: 950;
}

.prombt-film-card strong {
  bottom: 36px;
  font-size: 0.86rem;
  line-height: 1.15;
}

.prombt-film-card small {
  bottom: 16px;
  color: rgba(246, 243, 237, 0.58);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.prombt-model-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  perspective: 1300px;
}

.prombt-model-card {
  --model-rotate-x: 0deg;
  --model-rotate-y: 0deg;
  --model-light-x: 50%;
  --model-light-y: 50%;
  position: relative;
  grid-column: span 5;
  min-height: 430px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--model-light-x) var(--model-light-y), rgba(201, 255, 50, 0.14), transparent 34%),
    #080a08;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transform: rotateX(var(--model-rotate-x)) rotateY(var(--model-rotate-y));
  transform-style: preserve-3d;
  transition: transform 160ms ease, border-color 180ms ease;
}

.prombt-model-card:hover {
  border-color: rgba(201, 255, 50, 0.48);
}

.prombt-model-wide {
  grid-column: span 7;
}

.prombt-model-card img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  padding: 24px;
  object-fit: contain;
  transform: translateZ(18px);
}

.prombt-model-card > div {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  background: rgba(3, 4, 3, 0.78);
  border: 1px solid rgba(201, 255, 50, 0.16);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  transform: translateZ(34px);
}

.prombt-model-card span {
  color: var(--prombt);
  font-size: 0.65rem;
  font-weight: 950;
  text-transform: uppercase;
}

.prombt-model-card strong {
  max-width: 56%;
  font-size: 0.9rem;
  text-align: right;
}

.prombt-pipeline {
  padding: clamp(28px, 4vw, 54px);
  background:
    linear-gradient(135deg, rgba(201, 255, 50, 0.08), transparent 45%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 255, 50, 0.22);
  border-radius: var(--radius);
}

.prombt-pipeline .kicker {
  color: var(--prombt);
}

.prombt-pipeline .kicker::before {
  background: var(--prombt);
}

.prombt-pipeline-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.prombt-pipeline-track article {
  position: relative;
  min-height: 180px;
  padding: 24px;
  background: rgba(3, 5, 3, 0.62);
}

.prombt-pipeline-track article + article {
  border-left: 1px solid var(--line);
}

.prombt-pipeline-track b,
.prombt-pipeline-track strong,
.prombt-pipeline-track span {
  display: block;
}

.prombt-pipeline-track b {
  color: var(--prombt);
  font-size: 0.7rem;
}

.prombt-pipeline-track strong {
  margin-top: 28px;
  font-size: 1.3rem;
}

.prombt-pipeline-track span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.prombt-deck {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 4vw, 52px);
  color: #f6f3ed;
  background:
    radial-gradient(circle at 22% 18%, rgba(201, 255, 50, 0.22), transparent 30%),
    radial-gradient(circle at 78% 76%, rgba(95, 255, 193, 0.16), transparent 34%),
    linear-gradient(135deg, #071006, #06100d 48%, #101709);
  border: 1px solid rgba(201, 255, 50, 0.32);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.prombt-deck::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.26;
  background:
    linear-gradient(rgba(201, 255, 50, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 255, 50, 0.12) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
}

.prombt-deck-heading {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(26px, 4vw, 54px);
}

.prombt-deck-heading p {
  max-width: 440px;
}

.prombt-deck-experience {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: clamp(18px, 3vw, 38px);
  align-items: center;
}

.prombt-deck-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(460px, 52vw, 740px);
  perspective: 1500px;
  transform-style: preserve-3d;
}

.prombt-deck-stage::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 8%;
  bottom: 8%;
  height: 23%;
  background: radial-gradient(ellipse at center, rgba(201, 255, 50, 0.3), transparent 68%);
  filter: blur(18px);
  transform: rotateX(68deg);
}

.prombt-deck-halo {
  position: absolute;
  inset: 10% 4%;
  border: 1px solid rgba(201, 255, 50, 0.12);
  transform: rotateX(62deg) rotateZ(-6deg);
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(201, 255, 50, 0.16) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, rgba(201, 255, 50, 0.12) 50%, transparent 50.5%);
  background-size: 82px 82px;
  opacity: 0.7;
}

.prombt-deck-stack {
  position: relative;
  width: min(100%, 980px);
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-9deg) rotateZ(-1.4deg);
  transition: transform 420ms ease, filter 420ms ease;
  filter: drop-shadow(0 36px 54px rgba(0, 0, 0, 0.48));
}

.prombt-deck-stage:hover .prombt-deck-stack {
  transform: rotateX(5deg) rotateY(-5deg) rotateZ(-0.7deg) translateY(-6px);
}

.prombt-deck-stack::before,
.prombt-deck-stack::after {
  content: "";
  position: absolute;
  inset: 12px -12px -18px 16px;
  border-radius: 10px;
  background: rgba(240, 247, 226, 0.42);
  transform: translateZ(-34px) translateY(18px) rotateZ(0.8deg);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.28);
}

.prombt-deck-stack::after {
  inset: 24px -24px -30px 30px;
  opacity: 0.42;
  transform: translateZ(-68px) translateY(34px) rotateZ(1.4deg);
}

.prombt-deck-page {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: #f4f0e2;
  backface-visibility: hidden;
  transform-origin: 50% 4%;
  will-change: transform, opacity, filter;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 28px 72px rgba(0, 0, 0, 0.42);
}

.prombt-deck-page.is-current {
  transform: translateZ(38px);
}

.prombt-deck-page.is-next {
  z-index: 1;
  opacity: 0.84;
  filter: brightness(0.78) saturate(0.86);
  transform: translateY(22px) translateZ(-28px) scale(0.975);
}

.prombt-deck-paper-edge {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -22px;
  z-index: 3;
  height: 22px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(188, 202, 151, 0.46));
  transform: translateZ(25px) rotateX(-62deg);
  transform-origin: top;
}

.prombt-deck-light {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, 0.28) 46%, transparent 62%);
  mix-blend-mode: screen;
  transform: translateZ(42px) translateX(-56%);
  animation: prombtDeckLight 5.8s ease-in-out infinite;
}

.prombt-deck-stack.is-flipping[data-direction="next"] .is-current {
  animation: prombtDeckLiftNext 780ms cubic-bezier(0.2, 0.76, 0.18, 1) forwards;
}

.prombt-deck-stack.is-flipping[data-direction="next"] .is-next {
  animation: prombtDeckRiseNext 780ms cubic-bezier(0.2, 0.76, 0.18, 1) forwards;
}

.prombt-deck-stack.is-flipping[data-direction="prev"] .is-current {
  animation: prombtDeckSinkPrev 760ms cubic-bezier(0.2, 0.76, 0.18, 1) forwards;
}

.prombt-deck-stack.is-flipping[data-direction="prev"] .is-next {
  animation: prombtDeckDropPrev 760ms cubic-bezier(0.2, 0.76, 0.18, 1) forwards;
}

.prombt-deck-info {
  position: absolute;
  left: clamp(14px, 3vw, 42px);
  bottom: clamp(12px, 2.6vw, 38px);
  z-index: 5;
  width: min(390px, calc(100% - 28px));
  padding: 13px 15px;
  background: rgba(5, 10, 7, 0.78);
  border: 1px solid rgba(201, 255, 50, 0.24);
  border-radius: 8px;
  backdrop-filter: blur(14px);
}

.prombt-deck-info span,
.prombt-deck-info strong,
.prombt-deck-info p {
  display: block;
}

.prombt-deck-info span {
  color: #c9ff32;
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.prombt-deck-info strong {
  margin-top: 4px;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1;
}

.prombt-deck-info p {
  margin: 7px 0 0;
  color: rgba(246, 243, 237, 0.68);
  font-size: 0.78rem;
  line-height: 1.45;
}

.prombt-deck-controls {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.prombt-deck-arrow,
.prombt-deck-pdf {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #c9ff32;
  background: rgba(201, 255, 50, 0.08);
  border: 1px solid rgba(201, 255, 50, 0.36);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.25);
}

.prombt-deck-arrow:hover,
.prombt-deck-pdf:hover {
  color: #11150b;
  background: #c9ff32;
  transform: translateY(-2px);
}

.prombt-deck-arrow svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.prombt-deck-counter {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(246, 243, 237, 0.72);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.prombt-deck-counter span,
.prombt-deck-counter strong {
  color: #f6f3ed;
}

.prombt-deck-counter i {
  display: block;
  width: 2px;
  height: 92px;
  overflow: hidden;
  background: rgba(201, 255, 50, 0.18);
}

.prombt-deck-counter i::before {
  content: "";
  display: block;
  width: 100%;
  height: 38%;
  background: #c9ff32;
  animation: prombtDeckMeter 2.7s ease-in-out infinite;
}

.prombt-deck-pdf {
  width: auto;
  min-width: 58px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  text-decoration: none;
}

@keyframes prombtDeckLight {
  0%, 54% {
    opacity: 0;
    transform: translateZ(42px) translateX(-62%);
  }
  70% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translateZ(42px) translateX(62%);
  }
}

@keyframes prombtDeckLiftNext {
  0% {
    opacity: 1;
    filter: brightness(1);
    transform: translateZ(38px) translateY(0) rotateX(0deg);
  }
  46% {
    opacity: 0.92;
    filter: brightness(1.08);
    transform: translateZ(128px) translateY(-17%) rotateX(-42deg);
  }
  100% {
    opacity: 0;
    filter: brightness(0.76);
    transform: translateZ(96px) translateY(-112%) rotateX(-76deg);
  }
}

@keyframes prombtDeckRiseNext {
  0% {
    opacity: 0.72;
    filter: brightness(0.72) saturate(0.82);
    transform: translateY(28px) translateZ(-40px) scale(0.965);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translateY(0) translateZ(38px) scale(1);
  }
}

@keyframes prombtDeckSinkPrev {
  0% {
    opacity: 1;
    filter: brightness(1);
    transform: translateZ(38px) translateY(0) rotateX(0deg);
  }
  100% {
    opacity: 0.18;
    filter: brightness(0.6);
    transform: translateY(38px) translateZ(-72px) scale(0.95) rotateX(12deg);
  }
}

@keyframes prombtDeckDropPrev {
  0% {
    opacity: 0;
    filter: brightness(1.15);
    transform: translateY(-95%) translateZ(130px) scale(0.98) rotateX(-70deg);
  }
  54% {
    opacity: 0.94;
    transform: translateY(-14%) translateZ(100px) scale(0.995) rotateX(-24deg);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: translateY(0) translateZ(38px) scale(1) rotateX(0deg);
  }
}

@keyframes prombtDeckMeter {
  0% {
    transform: translateY(-105%);
  }
  100% {
    transform: translateY(270%);
  }
}

@media (max-width: 1100px) {
  .prombt-deck-experience {
    grid-template-columns: 1fr;
  }

  .prombt-deck-controls {
    grid-template-columns: auto auto auto auto;
    justify-content: center;
  }

  .prombt-deck-counter {
    grid-template-columns: auto 86px auto;
    align-items: center;
  }

  .prombt-deck-counter i {
    width: 86px;
    height: 2px;
  }

  .prombt-deck-counter i::before {
    width: 38%;
    height: 100%;
    animation-name: prombtDeckMeterHorizontal;
  }
}

@media (max-width: 780px) {
  .prombt-deck {
    padding: 22px 14px 24px;
  }

  .prombt-deck-stage {
    min-height: 390px;
  }

  .prombt-deck-stack {
    width: min(108%, 760px);
    transform: rotateX(5deg) rotateY(-5deg) rotateZ(-0.8deg);
  }

  .prombt-deck-info {
    left: 12px;
    right: 12px;
    bottom: 10px;
    width: auto;
  }

  .prombt-deck-arrow {
    width: 52px;
    height: 52px;
  }
}

@keyframes prombtDeckMeterHorizontal {
  0% {
    transform: translateX(-105%);
  }
  100% {
    transform: translateX(270%);
  }
}

@keyframes prombtOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes prombtOrbitReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes prombtScan {
  0%,
  16% {
    transform: translateY(0);
  }
  84%,
  100% {
    transform: translateY(370%);
  }
}

.quick-tabs button,
.filter-bar button {
  min-height: 42px;
  padding: 0 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
}

.quick-tabs button:hover,
.filter-bar button.is-active,
.filter-bar button:hover {
  color: #030305;
  background: var(--accent);
  border-color: var(--accent);
}

.panel-head {
  max-width: 1080px;
  margin-bottom: 30px;
}

.panel-head h2 {
  font-size: clamp(1.95rem, 3.35vw, 3.9rem);
  line-height: 1.09;
}

.featured-case {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  align-items: center;
}

.featured-case img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: 8px;
  background: #08090a;
  border-radius: var(--radius);
}

.featured-case h3 {
  font-size: clamp(1.8rem, 3.4vw, 3.8rem);
  line-height: 1;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0;
}

.work-grid,
.education-grid,
.services-grid,
.youtube-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.work-card,
.education-card,
.service-card,
.youtube-cards article,
.about-cards article {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(148, 255, 56, 0.05), transparent 34%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: opacity 260ms ease, transform 260ms ease, border-color 260ms ease, background 260ms ease;
}

.work-card[hidden] {
  display: none;
}

.work-card.is-filtering {
  opacity: 0;
  transform: scale(0.96) translateY(12px);
}

.work-card:hover,
.education-card:hover,
.service-card:hover,
.youtube-cards article:hover,
.about-cards article:hover {
  border-color: rgba(148, 255, 56, 0.42);
  transform: translateY(-5px);
}

.work-card img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: contain;
  padding: 7px;
  background: #08090a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  margin-bottom: 18px;
}

.work-card h3,
.education-card h3,
.service-card h3,
.youtube-cards h3,
.about-cards h3 {
  margin-bottom: 12px;
  font-size: clamp(1.22rem, 1.72vw, 1.78rem);
  line-height: 1.14;
}

.work-card p,
.education-card p,
.service-card p,
.youtube-cards p,
.about-cards p {
  color: var(--muted);
  line-height: 1.72;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.card-meta span,
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.education-card {
  min-height: 570px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.education-card .badge {
  width: max-content;
  color: #030305;
  background: var(--accent);
  border-color: var(--accent);
}

.education-card.is-ebook {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 36%),
    linear-gradient(180deg, rgba(148, 255, 56, 0.085), rgba(255, 255, 255, 0.028)),
    var(--panel);
}

.education-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 30%, rgba(148, 255, 56, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.education-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.16), transparent 48%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.58));
  opacity: 0.42;
}

.education-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
  background: #08090a;
  transition: transform 420ms ease, filter 420ms ease;
}

.education-card:hover .education-media img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.045);
}

.education-media span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  min-height: 30px;
  padding: 0 10px;
  color: #030305;
  background: rgba(246, 243, 237, 0.92);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.education-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.education-card-top > span:not(.badge) {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 850;
}

.education-card h3 {
  margin-bottom: 0;
}

.education-card p {
  margin-bottom: 0;
}

.education-card .card-actions .button {
  flex: 1 1 150px;
  padding-inline: 14px;
}

.ebook-library {
  grid-column: 1 / -1;
  margin-top: 54px;
  padding-top: 52px;
  border-top: 1px solid var(--line);
}

.ebook-library > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.5fr);
  gap: 20px 54px;
  align-items: end;
  margin-bottom: 54px;
}

.ebook-library > header .kicker {
  grid-column: 1 / -1;
  color: var(--accent);
}

.ebook-library > header h3 {
  max-width: 830px;
  font-size: clamp(2rem, 4vw, 4.8rem);
  line-height: 0.98;
}

.ebook-library > header p {
  color: var(--muted);
  line-height: 1.75;
}

.ebook-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(46px, 7vw, 110px);
  perspective: 1600px;
}

.ebook-volume {
  display: grid;
  grid-template-columns: minmax(220px, 0.76fr) minmax(240px, 1fr);
  gap: 30px;
  align-items: center;
  min-width: 0;
  padding: 18px 0 36px;
}

.ebook-volume + .ebook-volume {
  border-left: 1px solid var(--line);
  padding-left: clamp(34px, 5vw, 78px);
}

.ebook-object {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 0.71;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: rotateY(-22deg) rotateX(3deg);
  transform-style: preserve-3d;
  transform-origin: center;
  cursor: pointer;
  animation: ebookFloat 5.8s ease-in-out infinite;
}

.ebook-volume:nth-child(2) .ebook-object {
  animation-delay: -2.4s;
  transform: rotateY(20deg) rotateX(3deg);
}

.ebook-object img {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.48);
  transform: translateZ(16px);
  backface-visibility: hidden;
}

.ebook-spine {
  position: absolute;
  z-index: 2;
  left: -16px;
  top: 2px;
  bottom: 2px;
  width: 32px;
  background: linear-gradient(90deg, #090b0c, #303432 48%, #111413);
  transform: rotateY(-90deg);
  transform-origin: right center;
}

.ebook-pages {
  position: absolute;
  z-index: 1;
  right: -17px;
  top: 7px;
  bottom: 7px;
  width: 34px;
  background: repeating-linear-gradient(90deg, #d8d6ca 0 2px, #f2f0e6 2px 4px);
  border-radius: 0 4px 4px 0;
  transform: rotateY(90deg);
  transform-origin: left center;
}

.ebook-shadow {
  position: absolute;
  z-index: 0;
  left: 3%;
  right: -18%;
  bottom: -12%;
  height: 17%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 68%);
  filter: blur(14px);
  transform: rotateX(82deg) translateZ(-30px);
}

.ebook-shine {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.26), transparent 51%);
  border-radius: 2px 5px 5px 2px;
  opacity: 0;
  transform: translateZ(18px) translateX(-45%);
  pointer-events: none;
}

.ebook-object:hover {
  animation-play-state: paused;
  transform: rotateY(-8deg) rotateX(1deg) translateY(-12px) scale(1.03);
}

.ebook-volume:nth-child(2) .ebook-object:hover {
  transform: rotateY(8deg) rotateX(1deg) translateY(-12px) scale(1.03);
}

.ebook-object:hover .ebook-shine {
  animation: ebookShine 900ms ease;
}

.ebook-volume-copy > span {
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ebook-volume-copy h3 {
  margin-top: 12px;
  font-size: clamp(1.55rem, 2.4vw, 2.75rem);
  line-height: 1.02;
}

.ebook-volume-copy p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.ebook-volume-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.ebook-volume-meta span {
  padding: 7px 9px;
  color: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 850;
}

.waitlist-form,
.contact-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.waitlist-form > div {
  grid-column: span 4;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

input,
select,
textarea {
  width: 100%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  padding: 14px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

.form-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 22px;
  color: var(--accent);
  font-weight: 850;
}

.youtube-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
}

.youtube-spotlight {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.16), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(148, 255, 56, 0.16), transparent 34%),
    #07090b;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.youtube-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(180deg, transparent 54%, rgba(3, 3, 5, 0.76));
  mix-blend-mode: screen;
  opacity: 0.54;
}

.youtube-spotlight::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
}

.youtube-main-shot {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: cover;
  border-radius: 10px;
  filter: saturate(1.12) contrast(1.08);
}

.floating-thumb {
  position: absolute;
  z-index: 3;
  width: min(240px, 38%);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0d1012;
  border: 1px solid rgba(246, 243, 237, 0.2);
  border-radius: 8px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
  animation: floatThumb 4.8s ease-in-out infinite;
}

.thumb-a {
  right: 7%;
  top: 9%;
  transform: rotate(4deg);
}

.thumb-b {
  left: 5%;
  bottom: 18%;
  animation-delay: -1.4s;
  transform: rotate(-5deg);
}

.thumb-c {
  right: 9%;
  bottom: 9%;
  animation-delay: -2.8s;
  transform: rotate(2deg);
}

.youtube-pulse,
.youtube-note {
  position: absolute;
  z-index: 4;
}

.youtube-pulse {
  left: 26px;
  top: 26px;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  color: #030305;
  background: var(--accent);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 1000;
  box-shadow: 0 0 0 0 rgba(148, 255, 56, 0.46);
  animation: softPulse 2.2s ease-in-out infinite;
}

.youtube-note {
  left: 26px;
  right: 26px;
  bottom: 24px;
  color: rgba(246, 243, 237, 0.88);
  font-size: clamp(1rem, 1.5vw, 1.34rem);
  font-weight: 950;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}

.thumbnail-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.thumbnail-wall img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 8px;
  filter: saturate(0.92) contrast(1.02);
  transition: transform 220ms ease, border-color 220ms ease, filter 220ms ease;
}

.thumbnail-wall img:hover {
  border-color: rgba(148, 255, 56, 0.48);
  filter: saturate(1.12) contrast(1.08);
  transform: translateY(-4px) scale(1.015);
}

.video-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.video-card {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.video-card video,
.video-card img,
.video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-fallback {
  display: grid;
  place-items: center;
  color: rgba(246, 243, 237, 0.82);
  background:
    radial-gradient(circle at 40% 20%, rgba(255, 52, 52, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(148, 255, 56, 0.08));
  font-size: 1.5rem;
  font-weight: 950;
  text-align: center;
}

.video-card span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  font-weight: 950;
}

.youtube-proof {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.timeline article {
  padding: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.timeline span {
  color: var(--accent);
  font-weight: 950;
}

.services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-card {
  min-height: 300px;
}

.deliverables {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  color: var(--muted);
}

.awards-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr);
  grid-template-areas:
    "copy stage"
    "milestones stage";
  gap: 34px;
  align-items: center;
  min-height: calc(100vh - var(--header) - 120px);
}

.award-copy {
  grid-area: copy;
}

.milestone-list {
  grid-area: milestones;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.award-stage {
  grid-area: stage;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 720px;
  perspective: 1400px;
  cursor: grab;
  isolation: isolate;
  touch-action: pan-y;
}

.award-stage.is-dragging {
  cursor: grabbing;
}

.plaque-celebration {
  position: absolute;
  inset: 4% -4% 9%;
  pointer-events: none;
}

.plaque-celebration::before,
.plaque-celebration::after {
  content: "";
  position: absolute;
  inset: 12% 0 9%;
  border: 1px solid rgba(148, 255, 56, 0.18);
  border-radius: 50%;
  animation: ringSpin 18s linear infinite;
}

.plaque-celebration::after {
  inset: 20% 12% 16%;
  border-color: rgba(255, 255, 255, 0.09);
  animation-direction: reverse;
}

.plaque-photo {
  --rx: -4deg;
  --ry: -8deg;
  --float-y: 0px;
  position: relative;
  z-index: 2;
  width: min(690px, 110%);
  aspect-ratio: 1;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--float-y));
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 34px 80px rgba(0, 0, 0, 0.6));
}

.plaque-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: contrast(1.02) saturate(0.98);
}

.plaque-photo::before {
  content: "";
  position: absolute;
  inset: 7% 8%;
  z-index: 3;
  background:
    radial-gradient(circle at var(--spot-x, 62%) var(--spot-y, 32%), rgba(255, 255, 255, 0.3), transparent 18%),
    linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, 0.18), transparent 62%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.plaque-shine {
  position: absolute;
  inset: 5%;
  z-index: 4;
  background: linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.46), transparent 64%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.award-stage:hover .plaque-shine {
  animation: sweep 1000ms ease;
}

.plaque-inscription,
.plaque-brand {
  position: absolute;
  left: 50%;
  z-index: 5;
  color: rgba(255, 255, 255, 0.98);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22), 0 9px 22px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
  pointer-events: none;
}

.plaque-inscription {
  top: 59.8%;
  display: grid;
  gap: 5px;
  width: 58%;
}

.plaque-inscription span {
  font-size: clamp(0.7rem, 1.08vw, 0.98rem);
  font-weight: 650;
}

.plaque-inscription strong {
  font-size: clamp(1.38rem, 2.7vw, 2.42rem);
  line-height: 0.98;
  font-weight: 900;
}

.plaque-inscription em {
  font-style: normal;
  font-size: clamp(0.76rem, 1.34vw, 1.16rem);
  font-weight: 650;
}

.plaque-brand {
  top: 73.8%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.28rem, 2.95vw, 2.5rem);
  font-weight: 950;
}

.plaque-brand svg {
  width: clamp(26px, 4.2vw, 48px);
  height: clamp(26px, 4.2vw, 48px);
  fill: currentColor;
}

.yt-orbit,
.celebration-chip,
.spark {
  position: absolute;
  display: grid;
  place-items: center;
}

.yt-orbit {
  z-index: 1;
  width: 56px;
  height: 56px;
  color: #fff;
  background: linear-gradient(135deg, #ff3737, #b40000);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(255, 40, 40, 0.22), 0 0 38px rgba(255, 40, 40, 0.18);
  animation: iconFloat 6s ease-in-out infinite;
}

.yt-orbit svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}

.yt-orbit-one {
  top: 16%;
  right: 6%;
}

.yt-orbit-two {
  left: 9%;
  top: 30%;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  animation-delay: -2.2s;
}

.celebration-chip {
  left: 3%;
  bottom: 26%;
  min-width: 94px;
  height: 38px;
  color: #030305;
  background: linear-gradient(135deg, #f7fff2, var(--accent));
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: 0 18px 44px rgba(148, 255, 56, 0.22);
  animation: chipPulse 4.8s ease-in-out infinite;
}

.spark {
  z-index: 1;
  width: 8px;
  height: 8px;
  color: var(--accent);
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 22px currentColor;
  animation: sparkPop 3.8s ease-in-out infinite;
}

.spark::before,
.spark::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 21px;
  background: currentColor;
  border-radius: 999px;
}

.spark::after {
  transform: rotate(90deg);
}

.spark-one {
  left: 12%;
  top: 58%;
  color: #ff3737;
}

.spark-two {
  right: 3%;
  top: 48%;
  color: var(--ink);
  animation-delay: -1.2s;
}

.spark-three {
  right: 22%;
  bottom: 13%;
  animation-delay: -2.1s;
}

.plaque-hint {
  position: absolute;
  bottom: 36px;
  z-index: 3;
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.about-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.58fr);
}

.about-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.about-visual::before {
  content: "";
  position: absolute;
  inset: -25% 30% auto -18%;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(148, 255, 56, 0.22), transparent 64%);
  filter: blur(6px);
}

.about-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.about-visual figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 14px 2px 2px;
}

.about-visual figcaption span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.about-visual figcaption strong {
  color: var(--ink);
  font-size: clamp(1rem, 1.28vw, 1.25rem);
  line-height: 1.32;
}

.about-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.about-cards article {
  min-height: 240px;
}

.tool-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.tool-stack .logo-item {
  width: 100%;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(460px, 1fr);
  gap: 28px;
  align-items: start;
}

.contact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.contact-form .wide {
  grid-column: 1 / -1;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.social-links a,
.footer-socials a {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 900;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 56px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: #030305;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
}

.project-modal,
.education-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.project-modal.is-open,
.education-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 24px;
  width: min(1180px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  transform: scale(0.96) translateY(20px);
  transition: transform 260ms ease;
}

.project-modal.is-open .modal-panel,
.education-modal.is-open .modal-panel {
  transform: scale(1) translateY(0);
}

.education-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1fr);
  align-items: stretch;
  width: min(1080px, 100%);
}

.education-panel .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 4px;
}

.education-panel .modal-content h2 {
  font-size: clamp(1.8rem, 3.35vw, 3.45rem);
}

.education-modal-art {
  min-height: 560px;
  max-height: 720px;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 20%, rgba(148, 255, 56, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 3;
  min-height: 40px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.modal-panel > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: contain;
  padding: 8px;
  background: #08090a;
  border-radius: var(--radius);
}

.modal-content {
  padding: 8px;
}

.modal-content h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.case-grid section {
  padding: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.case-grid h3 {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.case-grid p,
.case-grid li {
  color: var(--muted);
  line-height: 1.55;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.modal-actions [hidden] {
  display: none !important;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.reveal.is-visible,
.panel.is-active .reveal {
  opacity: 1;
  transform: translateY(0);
}

@keyframes panelIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes introMark {
  0% {
    opacity: 0;
    filter: blur(18px) brightness(2);
    transform: scale(0.82) translateY(12px);
  }

  14% {
    opacity: 1;
    filter: blur(2px) brightness(1.75);
    transform: scale(1.08) translateX(-9px) skewX(-5deg);
  }

  23% {
    opacity: 0.82;
    filter: blur(0) brightness(1.15);
    transform: scale(0.96) translateX(8px) skewX(4deg);
  }

  37% {
    opacity: 1;
    filter: blur(0) brightness(1.35);
    transform: scale(1.02) translateX(-3px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes introLogoGlitch {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(28px) skewX(-8deg);
    clip-path: inset(44% 0 44% 0);
  }

  10% {
    opacity: 1;
    transform: scale(1.08) translateX(-18px) skewX(-12deg);
    clip-path: inset(0 0 76% 0);
  }

  16% {
    transform: scale(1.02) translateX(16px) skewX(8deg);
    clip-path: inset(31% 0 34% 0);
  }

  24% {
    transform: scale(1.14) translateX(-9px) skewX(-5deg);
    clip-path: inset(68% 0 2% 0);
  }

  38% {
    transform: scale(1.03) translateX(4px);
    clip-path: inset(0 0 0 0);
  }

  68% {
    transform: scale(0.94);
    filter:
      drop-shadow(5px 0 0 rgba(0, 209, 255, 0.34))
      drop-shadow(-5px 0 0 rgba(255, 0, 170, 0.3))
      drop-shadow(0 22px 56px rgba(0, 0, 0, 0.9));
  }

  100% {
    opacity: 1;
    transform: scale(0.96);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateX(-70%) skewX(-16deg);
  }

  35% {
    opacity: 0.66;
  }

  100% {
    opacity: 0;
    transform: translateX(92%) skewX(-18deg);
  }
}

@keyframes introGhostCyan {
  0%, 12%, 26%, 42% { opacity: 0; clip-path: inset(0 0 0 0); }
  13%, 17% { opacity: 0.7; clip-path: inset(0 0 72% 0); }
  27%, 31% { opacity: 0.5; clip-path: inset(34% 0 34% 0); }
  43%, 48% { opacity: 0.38; clip-path: inset(72% 0 0 0); }
  100% { opacity: 0; }
}

@keyframes introGhostMagenta {
  0%, 10%, 24%, 40% { opacity: 0; clip-path: inset(0 0 0 0); }
  11%, 15% { opacity: 0.62; clip-path: inset(70% 0 4% 0); }
  25%, 30% { opacity: 0.52; clip-path: inset(18% 0 62% 0); }
  41%, 47% { opacity: 0.34; clip-path: inset(42% 0 30% 0); }
  100% { opacity: 0; }
}

@keyframes introColorFlash {
  0%, 100% { opacity: 0; }
  14% { opacity: 0.82; }
  20% { opacity: 0.18; }
  30% { opacity: 0.58; }
  44% { opacity: 0.12; }
}

@keyframes introSignalTear {
  0% { opacity: 0; transform: translateY(-28%); }
  18% { opacity: 0.56; transform: translateY(-6%); }
  28% { opacity: 0.12; transform: translateY(8%); }
  44% { opacity: 0.42; transform: translateY(28%); }
  100% { opacity: 0; transform: translateY(58%); }
}

@keyframes ambientMove {
  50% {
    transform: translate3d(7vw, -5vh, 0) scale(1.08);
  }
}

@keyframes ringSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes iconFloat {
  50% {
    transform: translateY(-16px) rotate(8deg);
  }
}

@keyframes chipPulse {
  50% {
    transform: translateY(-10px) scale(1.04);
  }
}

@keyframes sparkPop {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.7) rotate(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.12) rotate(45deg);
  }
}

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

@keyframes floatThumb {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -12px;
  }
}

@keyframes softPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(148, 255, 56, 0.42);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(148, 255, 56, 0);
  }
}

@media (max-width: 1480px) {
  .site-header {
    gap: 16px;
  }

  .nav-link {
    padding-inline: 11px;
    font-size: 0.78rem;
  }

  .header-actions .button {
    display: none;
  }
}

@media (max-width: 1180px) {
  .site-header {
    padding-inline: 24px;
  }

  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .app-shell {
    padding-inline: 24px;
  }

  .panel-grid,
  .youtube-layout,
  .awards-grid,
  .contact-layout,
  .featured-case {
    grid-template-columns: 1fr;
  }

  .home-pathways,
  .thumbnail-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sector-feature {
    min-height: 620px;
  }

  .sector-feature-copy {
    width: min(860px, 88%);
  }

  .project-system {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .venue-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .venue-stage {
    grid-template-columns: 1fr;
  }

  .venue-story {
    min-height: 520px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .youtube-spotlight {
    min-height: 500px;
  }

  .hero-showcase {
    min-height: 560px;
  }

  .home-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .awards-grid {
    grid-template-areas:
      "copy"
      "stage"
      "milestones";
    min-height: auto;
  }

  .award-stage {
    min-height: 660px;
  }

  .ebook-stage {
    grid-template-columns: 1fr;
  }

  .ebook-volume {
    grid-template-columns: minmax(230px, 0.55fr) minmax(280px, 1fr);
  }

  .ebook-volume + .ebook-volume {
    padding-top: 54px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 780px) {
  .cursor {
    display: none;
  }

  .site-header {
    padding: 12px 16px;
  }

  .brand small,
  .header-actions .button {
    display: none;
  }

  .app-shell {
    padding: 22px 16px 46px;
  }

  h1 {
    font-size: clamp(2.3rem, 10.2vw, 3.75rem);
    line-height: 1.02;
  }

  .panel-head h2,
  .home-featured h2 {
    font-size: clamp(1.9rem, 8.6vw, 3.05rem);
    line-height: 1.08;
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-showcase {
    min-height: 430px;
  }

  .showcase-card-main {
    inset: 34px 0 90px;
  }

  .showcase-card-side {
    width: 48%;
    height: 158px;
  }

  .showcase-card-mini {
    width: 52%;
    height: 150px;
  }

  .home-stats,
  .work-grid,
  .education-grid,
  .services-grid,
  .youtube-cards,
  .video-gallery,
  .timeline,
  .about-cards,
  .milestone-list,
  .logo-flow-header,
  .waitlist-form,
  .contact-form,
  .case-grid {
    grid-template-columns: 1fr;
  }

  .home-pathways {
    grid-template-columns: 1fr;
  }

  .home-project-teaser {
    min-height: 570px;
  }

  .home-project-teaser-shade {
    background:
      linear-gradient(180deg, rgba(3, 3, 5, 0.18) 10%, rgba(3, 3, 5, 0.95) 78%),
      linear-gradient(90deg, rgba(3, 3, 5, 0.72), transparent);
  }

  .home-project-teaser-copy {
    padding: 26px;
  }

  .sector-feature {
    min-height: 700px;
  }

  .sector-feature-shade {
    background: linear-gradient(180deg, rgba(3, 3, 5, 0.16) 14%, rgba(3, 3, 5, 0.96) 76%);
  }

  .sector-feature-copy {
    width: 100%;
    padding: 24px;
    padding-bottom: 218px;
  }

  .sector-feature-copy h3 {
    font-size: clamp(2rem, 9vw, 3.4rem);
  }

  .sector-feature-top {
    left: 18px;
    right: 18px;
    top: 16px;
  }

  .sector-logo-line {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sector-logo-line img {
    height: 58px;
    padding: 13px;
  }

  .project-system {
    grid-template-columns: 1fr;
  }

  .project-system article {
    min-height: 116px;
  }

  .detail-toolbar,
  .venue-navigation {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-toolbar > span {
    order: -1;
  }

  .venue-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .venue-brand-button {
    height: 68px;
  }

  .venue-story {
    min-height: 560px;
    padding: 26px;
  }

  .venue-story-logo {
    height: 86px;
    margin: 28px 0;
  }

  .venue-main-media video {
    height: 560px;
  }

  .venue-filmstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .venue-film-card {
    min-height: 310px;
  }

  .home-pathways article {
    min-height: auto;
  }

  .home-pathways img {
    height: 190px;
  }

  .thumbnail-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .youtube-spotlight {
    min-height: 365px;
  }

  .youtube-pulse {
    left: 18px;
    top: 18px;
    width: 62px;
    height: 62px;
    font-size: 0.94rem;
  }

  .youtube-note {
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 0.9rem;
  }

  .floating-thumb {
    width: 42%;
  }

  .thumb-b {
    display: none;
  }

  .education-media {
    aspect-ratio: 16 / 11;
  }

  .education-card {
    padding: 16px;
  }

  .education-card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .ebook-library {
    margin-top: 30px;
    padding-top: 38px;
  }

  .ebook-library > header {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 36px;
  }

  .ebook-library > header .kicker {
    grid-column: auto;
  }

  .ebook-volume {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 44px;
  }

  .ebook-object {
    width: min(70vw, 260px);
    margin-inline: auto;
  }

  .ebook-volume-copy {
    text-align: center;
  }

  .ebook-volume-meta,
  .ebook-volume-copy .card-actions {
    justify-content: center;
  }

  .logo-flow {
    margin-top: 18px;
    padding: 16px 0;
  }

  .logo-flow-header {
    display: grid;
    align-items: start;
    gap: 8px;
  }

  .logo-flow-header p {
    text-align: left;
  }

  .logo-item {
    width: 96px;
    height: 38px;
    padding: 7px 10px;
  }

  .logo-item img {
    max-height: 21px;
  }

  .ai-lane .logo-item,
  .tool-stack .logo-item {
    width: 78px;
    height: 32px;
  }

  .tool-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-featured {
    align-items: stretch;
    flex-direction: column;
  }

  .work-card,
  .education-card,
  .service-card,
  .youtube-cards article {
    min-height: auto;
  }

  .video-card {
    min-height: 260px;
  }

  .award-stage {
    min-height: 440px;
    align-items: start;
    padding-top: 22px;
  }

  .plaque-photo {
    width: min(360px, 94vw);
  }

  .plaque-celebration {
    inset: -2% -4% 6%;
  }

  .yt-orbit {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .yt-orbit svg {
    width: 24px;
    height: 24px;
  }

  .yt-orbit-one {
    right: 1%;
  }

  .yt-orbit-two {
    left: 1%;
  }

  .plaque-inscription {
    top: 61.2%;
    width: 68%;
    gap: 2px;
  }

  .plaque-inscription span {
    font-size: 0.62rem;
  }

  .plaque-inscription strong {
    font-size: 1.18rem;
  }

  .plaque-inscription em {
    font-size: 0.64rem;
  }

  .plaque-brand {
    top: 76.2%;
    gap: 7px;
    font-size: 1.32rem;
  }

  .plaque-brand svg {
    width: 25px;
    height: 25px;
  }

  .celebration-chip {
    min-width: 74px;
    height: 30px;
    font-size: 0.68rem;
  }

  .spark-three {
    display: none;
  }

  .modal-panel {
    display: block;
    max-height: 90vh;
    padding: 18px;
  }

  .modal-panel > img {
    min-height: 260px;
    height: auto;
    margin-top: 34px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 16px;
  }
}

@media (max-width: 1180px) {
  .prombt-feature-copy {
    width: min(880px, 88%);
  }

  .prombt-orbit {
    right: 28px;
    width: 230px;
    height: 230px;
  }

  .prombt-hero-copy {
    width: 88%;
  }

  .prombt-player {
    grid-template-columns: 1fr;
  }

  .prombt-player-copy {
    min-height: 420px;
    border-right: 0;
    border-bottom: 1px solid rgba(201, 255, 50, 0.18);
  }

  .prombt-model-card,
  .prombt-model-wide {
    grid-column: span 6;
  }

  .prombt-pipeline-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prombt-pipeline-track article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .prombt-pipeline-track article:nth-child(2),
  .prombt-pipeline-track article:nth-child(3) {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .prombt-deck-cover {
    grid-template-columns: 1fr;
  }

  .prombt-deck-cover > img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 780px) {
  .project-file-divider {
    grid-template-columns: 1fr auto;
    margin-top: 52px;
  }

  .project-file-divider i {
    display: none;
  }

  .prombt-feature {
    min-height: 730px;
  }

  .prombt-feature > video {
    object-position: 54% center;
  }

  .prombt-feature-shade {
    background: linear-gradient(180deg, rgba(5, 8, 4, 0.22) 10%, rgba(5, 8, 4, 0.97) 68%);
  }

  .prombt-feature-copy {
    width: 100%;
    padding: 24px;
    padding-bottom: 42px;
  }

  .prombt-feature-copy h3 {
    font-size: clamp(2rem, 9vw, 3.4rem);
  }

  .prombt-orbit {
    display: none;
  }

  .prombt-hero {
    min-height: 820px;
  }

  .prombt-hero > video {
    object-position: 58% center;
  }

  .prombt-hero-shade {
    background: linear-gradient(180deg, rgba(5, 8, 4, 0.2) 6%, rgba(5, 8, 4, 0.98) 64%);
  }

  .prombt-hero-copy {
    width: 100%;
    padding: 30px 24px;
    padding-bottom: 150px;
  }

  .prombt-wordmark-large {
    font-size: 3.7rem;
  }

  .prombt-hero-copy h2 {
    font-size: clamp(2rem, 9vw, 3.45rem);
  }

  .prombt-hero-metrics {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .prombt-hero-metrics article {
    min-height: 92px;
    padding: 14px 10px;
  }

  .prombt-hero-metrics strong {
    font-size: 1.3rem;
  }

  .prombt-hero-metrics span {
    font-size: 0.58rem;
  }

  .prombt-command,
  .prombt-model-lab,
  .prombt-pipeline,
  .prombt-deck {
    margin-top: 52px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .section-heading h2 {
    font-size: clamp(1.9rem, 8.5vw, 3.15rem);
  }

  .prombt-player-copy {
    min-height: 430px;
    padding: 26px;
  }

  .prombt-player-copy h3 {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }

  .prombt-player-media video {
    height: 580px;
  }

  .prombt-filmstrip {
    grid-auto-columns: 152px;
  }

  .prombt-film-card {
    min-height: 270px;
  }

  .prombt-model-card,
  .prombt-model-wide {
    grid-column: span 12;
    min-height: 330px;
  }

  .prombt-model-card img {
    min-height: 330px;
    padding: 12px;
  }

  .prombt-model-card > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .prombt-model-card strong {
    max-width: 100%;
    text-align: left;
  }

  .prombt-pipeline {
    padding: 24px;
  }

  .prombt-pipeline-track {
    grid-template-columns: 1fr;
  }

  .prombt-pipeline-track article,
  .prombt-pipeline-track article:nth-child(2),
  .prombt-pipeline-track article:nth-child(3) {
    min-height: 140px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .prombt-pipeline-track article:first-child {
    border-top: 0;
  }

  .prombt-pipeline-track strong {
    margin-top: 18px;
  }

  .prombt-deck-cover {
    min-height: auto;
  }

  .prombt-deck-copy {
    padding: 28px 24px 34px;
  }

  .prombt-deck-pages {
    grid-template-columns: 1fr;
  }
}

.projects-overview[hidden],
.influencer-detail[hidden],
.aipocalypto-detail[hidden] {
  display: none !important;
}

.influencer-feature {
  min-height: 780px;
  background: #07100e;
  border-color: rgba(108, 241, 157, 0.32);
}

.influencer-feature-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 42%;
  filter: saturate(0.88) contrast(1.04);
}

.influencer-feature-shade {
  background:
    linear-gradient(90deg, rgba(3, 10, 9, 0.98) 0%, rgba(3, 10, 9, 0.82) 48%, rgba(3, 10, 9, 0.12) 76%),
    linear-gradient(180deg, rgba(3, 10, 9, 0.05), rgba(3, 10, 9, 0.9));
}

.influencer-feature-copy {
  width: min(940px, 72%);
  padding-bottom: clamp(62px, 8vw, 104px);
}

.influencer-feature-copy h3 {
  max-width: 930px;
  font-size: clamp(2.3rem, 4.5vw, 5.15rem);
}

.influencer-platforms {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d9fff0;
}

.influencer-platforms > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #06100d;
  background: #78f29a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.influencer-platforms svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.influencer-platforms svg path {
  fill: currentColor;
  stroke: none;
}

.influencer-platforms strong {
  margin-left: 4px;
  color: #78f29a;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.button-influencer {
  color: #06100d;
  background: #78f29a;
  border-color: #78f29a;
}

.button-influencer:hover {
  color: #06100d;
  background: #c1ffd5;
  border-color: #c1ffd5;
  transform: translateY(-2px);
}

.influencer-feature-stack {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: clamp(28px, 5vw, 64px);
  display: flex;
  align-items: end;
  width: min(31vw, 440px);
  height: 330px;
  pointer-events: none;
}

.influencer-feature-stack img {
  position: absolute;
  bottom: 0;
  width: 42%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.influencer-feature-stack img:nth-child(1) {
  left: 0;
  transform: rotate(-7deg) translateY(14px);
}

.influencer-feature-stack img:nth-child(2) {
  left: 29%;
  z-index: 2;
  width: 45%;
  transform: translateY(-18px);
}

.influencer-feature-stack img:nth-child(3) {
  right: 0;
  transform: rotate(7deg) translateY(10px);
}

.influencer-system article {
  background:
    linear-gradient(145deg, rgba(87, 215, 255, 0.08), transparent 54%),
    rgba(120, 242, 154, 0.05);
}

.influencer-system strong {
  color: #78f29a;
}

.influencer-detail {
  --ilayda: #78f29a;
  --ilayda-cyan: #57d7ff;
  --ilayda-warm: #ff6d72;
}

.influencer-toolbar > span {
  color: var(--ilayda);
}

.ilayda-hero {
  position: relative;
  min-height: 940px;
  overflow: hidden;
  isolation: isolate;
  background: #07100e;
  border: 1px solid rgba(120, 242, 154, 0.3);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.ilayda-hero-image,
.ilayda-hero-shade {
  position: absolute;
  inset: 0;
}

.ilayda-hero-image {
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 42%;
  filter: saturate(0.82) contrast(1.08) brightness(0.86);
  transform: scale(1.035);
}

.ilayda-hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 9, 8, 0.99) 0%, rgba(2, 9, 8, 0.91) 47%, rgba(2, 9, 8, 0.3) 73%),
    linear-gradient(180deg, rgba(2, 9, 8, 0.08) 28%, rgba(2, 9, 8, 0.96)),
    linear-gradient(135deg, transparent 55%, rgba(120, 242, 154, 0.12));
}

.ilayda-hero.is-visible .ilayda-hero-image {
  animation: ilaydaHeroDrift 16s ease-in-out infinite alternate;
}

.ilayda-hero-copy {
  position: relative;
  z-index: 3;
  width: min(900px, 60%);
  padding: clamp(36px, 6vw, 88px);
  padding-bottom: 190px;
}

.ilayda-hero-copy .kicker {
  margin-top: 42px;
  color: var(--ilayda);
}

.ilayda-hero-copy .kicker::before,
.ilayda-section-heading .kicker::before {
  background: var(--ilayda);
}

.ilayda-hero-copy h2 {
  max-width: 880px;
  margin: 18px 0 24px;
  font-size: clamp(2.5rem, 4.8vw, 5.8rem);
  line-height: 0.96;
}

.ilayda-hero-copy p {
  max-width: 680px;
  color: rgba(246, 243, 237, 0.74);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.75;
}

.ilayda-hero-feed {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 4vw, 60px);
  top: 418px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  width: min(32vw, 470px);
  perspective: 1200px;
}

.ilayda-hero-proof {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 4vw, 60px);
  top: 46px;
  width: min(38vw, 560px);
  height: 350px;
  perspective: 1500px;
  pointer-events: none;
}

.ilayda-hero-proof::before {
  content: "";
  position: absolute;
  inset: 18% 3% 2%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 68%);
  filter: blur(20px);
}

.ilayda-hero-proof figure {
  position: absolute;
  top: 0;
  width: 47%;
  height: 322px;
  margin: 0;
  overflow: hidden;
  background: #080d0c;
  border: 5px solid #141b19;
  border-radius: 24px;
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.52);
  opacity: 0;
}

.ilayda-hero-proof figure:first-child {
  left: 2%;
  transform: translateY(28px) rotate(-8deg) rotateY(8deg);
}

.ilayda-hero-proof figure:nth-child(2) {
  right: 2%;
  transform: translateY(4px) rotate(7deg) rotateY(-8deg);
}

.ilayda-hero-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.82) contrast(1.04);
}

.ilayda-hero-proof figure:first-child img {
  object-fit: contain;
}

.ilayda-hero-proof figcaption {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  color: rgba(246, 243, 237, 0.78);
  background: rgba(2, 8, 7, 0.84);
  border: 1px solid rgba(120, 242, 154, 0.2);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  font-size: 0.48rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ilayda-hero-proof figcaption span {
  color: var(--ilayda);
}

.ilayda-hero-proof > strong {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  color: #05100c;
  background: var(--ilayda);
  border: 4px solid #07100e;
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  font-family: Consolas, monospace;
  font-size: 0.54rem;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 12px) rotate(-3deg);
}

.ilayda-hero-proof > strong i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--ilayda);
  background: #05100c;
  border-radius: 50%;
  font-style: normal;
}

.ilayda-hero.is-visible .ilayda-hero-proof figure:first-child {
  animation: heroProofLeft 850ms 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-hero.is-visible .ilayda-hero-proof figure:nth-child(2) {
  animation: heroProofRight 850ms 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-hero.is-visible .ilayda-hero-proof > strong {
  animation: heroProofStamp 600ms 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-hero-feed video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #050806;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

.ilayda-hero-feed video:first-child {
  transform: rotateY(9deg) translateY(32px);
}

.ilayda-hero-feed video:nth-child(2) {
  transform: translateY(-18px);
}

.ilayda-hero-feed video:last-child {
  transform: rotateY(-9deg) translateY(44px);
}

.ilayda-hero-metrics {
  position: absolute;
  left: clamp(34px, 6vw, 88px);
  right: clamp(34px, 6vw, 88px);
  bottom: 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: rgba(120, 242, 154, 0.14);
  border: 1px solid rgba(120, 242, 154, 0.28);
  border-radius: 8px;
  backdrop-filter: blur(18px);
}

.ilayda-hero-metrics article {
  min-width: 0;
  padding: 20px 22px;
  background: rgba(3, 10, 8, 0.78);
}

.ilayda-hero-metrics article + article {
  border-left: 1px solid rgba(120, 242, 154, 0.2);
}

.ilayda-hero-metrics strong,
.ilayda-hero-metrics small {
  display: block;
}

.ilayda-hero-metrics strong {
  color: var(--ilayda);
  font-size: clamp(1.35rem, 2.2vw, 2.35rem);
  line-height: 1;
}

.ilayda-hero-metrics small {
  margin-top: 8px;
  color: rgba(246, 243, 237, 0.62);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ilayda-origin,
.ilayda-social-wall,
.ilayda-proof,
.ilayda-stories,
.ilayda-sponsor,
.ilayda-automation,
.ilayda-extras {
  margin-top: 82px;
}

.ilayda-section-heading .kicker {
  color: var(--ilayda);
}

.ilayda-origin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: rgba(120, 242, 154, 0.18);
  border: 1px solid rgba(120, 242, 154, 0.2);
  border-radius: 8px;
}

.ilayda-origin-grid article {
  min-height: 270px;
  padding: 28px;
  background: #09110f;
}

.ilayda-origin-grid span {
  color: var(--ilayda);
  font-size: 0.72rem;
  font-weight: 950;
}

.ilayda-origin-grid h3 {
  margin: 54px 0 14px;
  font-size: 1.45rem;
}

.ilayda-origin-grid p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.65;
}

.ilayda-video-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  min-height: 600px;
  padding: clamp(20px, 3vw, 42px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(87, 215, 255, 0.08), transparent 46%),
    #07100e;
  border: 1px solid rgba(120, 242, 154, 0.22);
  border-radius: 8px;
}

.ilayda-video-wall video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #020403;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.ilayda-video-wall video:nth-child(2),
.ilayda-video-wall video:nth-child(5) {
  transform: translateY(-32px);
}

.ilayda-video-wall video:nth-child(3),
.ilayda-video-wall video:nth-child(6) {
  transform: translateY(28px);
}

.ilayda-proof-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1.08fr) minmax(230px, 0.72fr) minmax(230px, 0.72fr);
  gap: 14px;
  align-items: stretch;
}

.ilayda-stat-console {
  display: flex;
  flex-direction: column;
  min-height: 650px;
  padding: clamp(26px, 4vw, 54px);
  background:
    linear-gradient(150deg, rgba(120, 242, 154, 0.1), transparent 42%),
    #07100e;
  border: 1px solid rgba(120, 242, 154, 0.25);
  border-radius: 8px;
}

.ilayda-stat-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 54px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ilayda-stat-head span {
  color: var(--ilayda);
}

.ilayda-stat-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ilayda-stat-row span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.ilayda-stat-row strong {
  color: var(--ink);
  font-size: 1.1rem;
}

.ilayda-stat-row i {
  position: absolute;
  left: 0;
  bottom: 13px;
  width: var(--bar);
  height: 3px;
  background: linear-gradient(90deg, var(--ilayda), var(--ilayda-cyan));
  transform: scaleX(0);
  transform-origin: left;
  animation: ilaydaBar 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-stat-row:nth-child(3) i {
  animation-delay: 120ms;
}

.ilayda-stat-row:nth-child(4) i {
  animation-delay: 240ms;
}

.ilayda-stat-row:nth-child(5) i {
  animation-delay: 360ms;
}

.ilayda-signal {
  margin-top: auto;
  padding-top: 30px;
}

.ilayda-signal span,
.ilayda-signal strong {
  display: block;
}

.ilayda-signal span {
  color: var(--ilayda);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ilayda-signal strong {
  margin-top: 9px;
  font-size: clamp(1.35rem, 2.3vw, 2.5rem);
  line-height: 1.05;
}

.ilayda-proof-shot {
  position: relative;
  min-height: 650px;
  margin: 0;
  overflow: hidden;
  background: #070b0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.ilayda-proof-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.ilayda-proof-shot figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 12px;
  color: #eafff1;
  background: rgba(3, 10, 8, 0.82);
  border: 1px solid rgba(120, 242, 154, 0.2);
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.ilayda-story {
  overflow: hidden;
  background: #07100e;
  border: 1px solid rgba(120, 242, 154, 0.2);
  border-radius: 8px;
}

.ilayda-story + .ilayda-story {
  margin-top: 18px;
}

.ilayda-story header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ilayda-story header span {
  color: var(--ilayda);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ilayda-story header h3 {
  margin: 6px 0 0;
  font-size: 1.15rem;
}

.ilayda-story-controls {
  display: flex;
  gap: 8px;
}

.ilayda-story-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #06100d;
  background: var(--ilayda);
  border: 1px solid var(--ilayda);
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 950;
}

.ilayda-story-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 28vw);
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-color: rgba(120, 242, 154, 0.7) rgba(255, 255, 255, 0.05);
}

.ilayda-story-track img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  scroll-snap-align: start;
}

.ilayda-sponsor {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(320px, 1.18fr);
  min-height: 720px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 109, 114, 0.12), transparent 45%),
    #0c0909;
  border: 1px solid rgba(255, 109, 114, 0.28);
  border-radius: 8px;
}

.ilayda-sponsor-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(32px, 5vw, 70px);
}

.ilayda-sponsor-copy .kicker {
  color: #ff9a9e;
}

.ilayda-sponsor-copy .kicker::before {
  background: #ff9a9e;
}

.ilayda-sponsor-copy h2 {
  margin: 20px 0;
  font-size: clamp(2.2rem, 4vw, 4.7rem);
  line-height: 0.98;
}

.ilayda-sponsor-copy p {
  color: var(--muted);
  line-height: 1.75;
}

.ilayda-sponsor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.ilayda-sponsor-tags span {
  padding: 9px 11px;
  color: #ffc1c3;
  border: 1px solid rgba(255, 109, 114, 0.3);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
}

.ilayda-sponsor-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 34px;
  background:
    linear-gradient(180deg, rgba(255, 109, 114, 0.1), transparent 52%),
    #050404;
}

.ilayda-sponsor-media video {
  width: min(100%, 430px);
  max-height: 650px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.58);
}

.ilayda-sponsor-media > span {
  position: absolute;
  right: 18px;
  top: 18px;
  padding: 9px 11px;
  color: #ffc1c3;
  background: rgba(7, 4, 4, 0.82);
  border: 1px solid rgba(255, 109, 114, 0.3);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 950;
}

.ilayda-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  background: rgba(120, 242, 154, 0.18);
  border: 1px solid rgba(120, 242, 154, 0.22);
  border-radius: 8px;
}

.ilayda-pipeline article {
  min-height: 220px;
  padding: 25px;
  background: #07100e;
}

.ilayda-pipeline article + article {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.ilayda-pipeline b,
.ilayda-pipeline strong,
.ilayda-pipeline span {
  display: block;
}

.ilayda-pipeline b {
  color: var(--ilayda);
  font-size: 0.7rem;
}

.ilayda-pipeline strong {
  margin-top: 48px;
  font-size: 1.2rem;
}

.ilayda-pipeline span {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.ilayda-automation-note {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 14px;
  padding: 28px;
  color: #06100d;
  background: var(--ilayda);
  border-radius: 8px;
}

.ilayda-automation-note strong {
  font-size: clamp(1.3rem, 2.1vw, 2.2rem);
}

.ilayda-automation-note span {
  color: rgba(6, 16, 13, 0.7);
  line-height: 1.65;
}

.ilayda-extra-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 14px;
}

.ilayda-extra-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  min-height: 620px;
  padding: 24px;
  overflow: hidden;
  background: #080b0a;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ilayda-extra-videos video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 8px;
}

.ilayda-extra-videos video:nth-child(2) {
  transform: translateY(-28px);
}

.ilayda-book-notes {
  display: grid;
  gap: 14px;
}

.ilayda-book-notes article {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
  min-height: 300px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(87, 215, 255, 0.08), transparent 52%),
    #07100e;
  border: 1px solid rgba(120, 242, 154, 0.18);
  border-radius: 8px;
}

.ilayda-book-notes img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
}

.ilayda-book-notes span {
  color: var(--ilayda);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ilayda-book-notes h3 {
  margin: 12px 0;
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  line-height: 1.16;
}

.ilayda-book-notes p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.income-evolution {
  margin-top: 90px;
  padding-top: 76px;
  border-top: 1px solid var(--line);
}

.income-history,
.income-now {
  display: grid;
  grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.14fr);
  gap: 18px;
  align-items: stretch;
}

.income-history-copy,
.income-now-copy {
  padding: clamp(30px, 4.5vw, 62px);
  background:
    linear-gradient(150deg, rgba(255, 109, 114, 0.08), transparent 48%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.income-era {
  color: #ff9397;
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.income-history-copy h3,
.income-now-copy h3 {
  margin: 22px 0 18px;
  font-size: clamp(2rem, 3.2vw, 3.8rem);
  line-height: 1;
}

.income-history-copy > p,
.income-now-copy > p {
  color: var(--muted);
  line-height: 1.75;
}

.income-history-copy figure {
  position: relative;
  margin: 30px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.income-history-copy figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.income-history-copy figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 9px 11px;
  color: var(--ink);
  background: rgba(3, 3, 5, 0.78);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.income-loop-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  min-height: 680px;
  padding: 26px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 109, 114, 0.08), transparent 44%),
    #090707;
  border: 1px solid rgba(255, 109, 114, 0.2);
  border-radius: 8px;
}

.income-loop-wall video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #020202;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.income-loop-wall video:nth-child(2) {
  transform: translateY(-34px);
}

.income-loop-wall video:nth-child(3) {
  transform: translateY(24px);
}

.income-shift {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 38px 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.income-shift i {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 109, 114, 0.6), var(--accent), var(--ilayda-cyan, #57d7ff));
}

.income-shift strong {
  color: var(--accent);
}

.income-now {
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
}

.income-now-copy {
  background:
    linear-gradient(150deg, rgba(148, 255, 56, 0.11), transparent 48%),
    rgba(255, 255, 255, 0.035);
}

.income-now-copy .income-era {
  color: var(--accent);
}

.income-now-copy .button {
  margin-top: 18px;
}

.income-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.income-system-grid article {
  min-height: 270px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.04);
}

.income-system-grid span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 950;
}

.income-system-grid h3 {
  margin: 52px 0 12px;
  font-size: 1.45rem;
}

.income-system-grid p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

@keyframes ilaydaBar {
  to {
    transform: scaleX(1);
  }
}

.ilayda-growth-dashboard {
  overflow: hidden;
  background:
    linear-gradient(rgba(120, 242, 154, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 242, 154, 0.035) 1px, transparent 1px),
    #050d0b;
  background-size: 44px 44px;
  border: 1px solid rgba(120, 242, 154, 0.24);
  border-radius: 8px;
}

.growth-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  background: rgba(4, 12, 10, 0.86);
  border-bottom: 1px solid rgba(120, 242, 154, 0.18);
}

.growth-dashboard-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 16px;
}

.growth-dashboard-head span,
.growth-dashboard-head strong,
.growth-live {
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.growth-dashboard-head span {
  color: var(--ilayda);
}

.growth-dashboard-head strong {
  color: rgba(246, 243, 237, 0.58);
}

.growth-live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(246, 243, 237, 0.7);
}

.growth-live i {
  width: 8px;
  height: 8px;
  background: var(--ilayda);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(120, 242, 154, 0.45);
  animation: growthLive 1.8s ease-out infinite;
}

.growth-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(120, 242, 154, 0.16);
}

.growth-card {
  position: relative;
  min-width: 0;
  min-height: 560px;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(120, 242, 154, 0.07), transparent 42%),
    #07100e;
}

.ilayda-proof.is-visible .growth-card {
  animation: growthCardIn 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ilayda-proof.is-visible .growth-card:nth-child(2) {
  animation-delay: 100ms;
}

.ilayda-proof.is-visible .growth-card:nth-child(3) {
  animation-delay: 200ms;
}

.ilayda-proof.is-visible .growth-card:nth-child(4) {
  animation-delay: 300ms;
}

.ilayda-proof.is-visible .growth-card-top b {
  animation: growthBadgeIn 580ms 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ilayda-proof.is-visible .growth-value {
  animation: growthValueIn 700ms 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.growth-card::after {
  content: none;
}

.growth-card-reach {
  background:
    radial-gradient(circle at 50% 52%, rgba(87, 215, 255, 0.08), transparent 34%),
    #07100e;
}

.growth-card-peak {
  background:
    linear-gradient(155deg, rgba(255, 154, 116, 0.075), transparent 42%),
    #07100e;
}

.growth-card-speed {
  background:
    linear-gradient(155deg, rgba(213, 168, 255, 0.075), transparent 42%),
    #07100e;
}

.growth-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.growth-card-top span,
.growth-card-top small {
  display: block;
}

.growth-card-top span {
  color: var(--ilayda);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.growth-card-top small {
  margin-top: 6px;
  color: rgba(246, 243, 237, 0.56);
  font-size: 0.7rem;
  font-weight: 800;
}

.growth-card-top b {
  flex: 0 0 auto;
  color: #05100c;
  padding: 7px 9px;
  background: var(--ilayda);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 950;
}

.growth-card-reach .growth-card-top span {
  color: var(--ilayda-cyan);
}

.growth-card-reach .growth-card-top b {
  background: var(--ilayda-cyan);
}

.growth-card-peak .growth-card-top span {
  color: #ff9a74;
}

.growth-card-peak .growth-card-top b {
  background: #ff9a74;
}

.growth-card-speed .growth-card-top span {
  color: #d5a8ff;
}

.growth-card-speed .growth-card-top b {
  background: #d5a8ff;
}

.growth-value {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 46px;
  color: #f5fff8;
  font-size: clamp(2.2rem, 3.1vw, 4.3rem);
  line-height: 0.92;
}

.growth-value em {
  color: rgba(246, 243, 237, 0.52);
  font-size: 0.23em;
  font-style: normal;
  text-transform: uppercase;
}

.growth-chart {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin-top: 32px;
  overflow: visible;
}

.growth-chart-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.075);
  stroke-width: 1;
}

.growth-chart-area {
  fill: rgba(120, 242, 154, 0.08);
}

.growth-chart-line {
  fill: none;
  stroke: var(--ilayda);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(120, 242, 154, 0.48));
}

.growth-chart-flow {
  fill: none;
  stroke: #effff4;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(120, 242, 154, 0.9));
}

.growth-chart-runner {
  fill: #f5fff8;
  stroke: var(--ilayda);
  stroke-width: 3;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(120, 242, 154, 0.95));
}

.growth-chart-dot {
  fill: #f3fff7;
  stroke: var(--ilayda);
  stroke-width: 4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.growth-chart-cyan .growth-chart-line {
  stroke: var(--ilayda-cyan);
  filter: drop-shadow(0 0 7px rgba(87, 215, 255, 0.5));
}

.growth-chart-cyan .growth-chart-area {
  fill: rgba(87, 215, 255, 0.08);
}

.growth-chart-cyan .growth-chart-dot {
  stroke: var(--ilayda-cyan);
}

.growth-chart-warm .growth-chart-line {
  stroke: #ff9a74;
  filter: drop-shadow(0 0 7px rgba(255, 154, 116, 0.5));
}

.growth-chart-warm .growth-chart-area {
  fill: rgba(255, 154, 116, 0.08);
}

.growth-chart-warm .growth-chart-dot {
  stroke: #ff9a74;
}

.growth-chart-violet .growth-chart-line {
  stroke: #d5a8ff;
  filter: drop-shadow(0 0 7px rgba(213, 168, 255, 0.5));
}

.growth-chart-violet .growth-chart-area {
  fill: rgba(213, 168, 255, 0.08);
}

.growth-chart-violet .growth-chart-dot {
  stroke: #d5a8ff;
}

.ilayda-proof.is-visible .growth-chart-line {
  animation: growthLine 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-proof.is-visible .growth-card:nth-child(2) .growth-chart-line {
  animation-delay: 150ms;
}

.ilayda-proof.is-visible .growth-card:nth-child(3) .growth-chart-line {
  animation-delay: 300ms;
}

.ilayda-proof.is-visible .growth-card:nth-child(4) .growth-chart-line {
  animation-delay: 450ms;
}

.ilayda-proof.is-visible .growth-chart-dot {
  animation:
    growthDot 500ms 1.45s ease-out forwards,
    growthDotPulse 2.2s 2s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-chart-flow {
  animation:
    growthFlowIn 300ms 1.4s ease-out forwards,
    growthFlowTravel 3.2s 1.4s linear infinite;
}

.ilayda-proof.is-visible .growth-chart-runner {
  animation: growthRunnerIn 300ms 1.35s ease-out forwards;
}

.growth-card-caption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.growth-card-caption span,
.growth-card-caption strong {
  display: block;
}

.growth-card-caption span {
  color: var(--ilayda);
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
}

.growth-card-caption strong {
  max-width: 290px;
  margin-top: 7px;
  color: rgba(246, 243, 237, 0.72);
  font-size: 0.76rem;
  line-height: 1.55;
}

.growth-card-reach .growth-card-caption span {
  color: var(--ilayda-cyan);
}

.growth-card-peak .growth-card-caption span {
  color: #ff9a74;
}

.growth-card-speed .growth-card-caption span {
  color: #d5a8ff;
}

.growth-radar {
  position: relative;
  z-index: 1;
  width: min(82%, 250px);
  aspect-ratio: 1;
  margin: 18px auto 0;
}

.growth-radar::before,
.growth-radar::after {
  content: "";
  position: absolute;
  background: rgba(87, 215, 255, 0.12);
}

.growth-radar::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.growth-radar::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.growth-radar > i {
  position: absolute;
  border: 1px solid rgba(87, 215, 255, 0.28);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.38);
}

.growth-radar > i:nth-child(1) {
  inset: 0;
}

.growth-radar > i:nth-child(2) {
  inset: 12%;
}

.growth-radar > i:nth-child(3) {
  inset: 24%;
}

.growth-radar > i:nth-child(4) {
  inset: 36%;
}

.growth-radar > span {
  position: absolute;
  z-index: 2;
  inset: 35%;
  display: grid;
  align-content: center;
  justify-items: center;
  background: #07100e;
  border: 1px solid rgba(87, 215, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(87, 215, 255, 0.12);
  text-align: center;
}

.growth-radar > span b,
.growth-radar > span small {
  display: block;
}

.growth-radar > span b {
  color: #ecfbff;
  font-size: 0.86rem;
}

.growth-radar > span small {
  margin-top: 2px;
  color: rgba(246, 243, 237, 0.48);
  font-size: 0.45rem;
  font-weight: 850;
  text-transform: uppercase;
}

.growth-radar > em {
  position: absolute;
  z-index: 1;
  left: calc(50% - 1px);
  top: 9%;
  width: 2px;
  height: 41%;
  background: linear-gradient(180deg, var(--ilayda-cyan), transparent);
  box-shadow: 0 0 12px rgba(87, 215, 255, 0.7);
  opacity: 0;
  transform-origin: 50% 100%;
}

.ilayda-proof.is-visible .growth-radar > i {
  animation: growthRadarRing 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-proof.is-visible .growth-radar > i:nth-child(2) {
  animation-delay: 90ms;
}

.ilayda-proof.is-visible .growth-radar > i:nth-child(3) {
  animation-delay: 180ms;
}

.ilayda-proof.is-visible .growth-radar > i:nth-child(4) {
  animation-delay: 270ms;
}

.ilayda-proof.is-visible .growth-radar > em {
  animation:
    growthRadarIn 350ms 500ms ease-out forwards,
    growthRadarSweep 4.8s 850ms linear infinite;
}

.growth-reach-map {
  position: relative;
  z-index: 1;
  height: 230px;
  margin-top: 20px;
  overflow: hidden;
}

.growth-reach-map::before {
  content: "";
  position: absolute;
  left: 15px;
  right: 12px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(87, 215, 255, 0.34), rgba(87, 215, 255, 0.03));
}

.growth-reach-map svg {
  position: absolute;
  inset: 4px 0 34px;
  width: 100%;
  height: calc(100% - 38px);
  overflow: visible;
}

.growth-reach-route {
  fill: none;
  stroke: rgba(87, 215, 255, 0.42);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.growth-reach-particle {
  fill: #effcff;
  filter: drop-shadow(0 0 6px rgba(87, 215, 255, 0.95));
  opacity: 0;
}

.growth-reach-source {
  position: absolute;
  z-index: 2;
  left: 5px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: #061310;
  border: 1px solid rgba(87, 215, 255, 0.62);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgba(87, 215, 255, 0.04),
    0 0 30px rgba(87, 215, 255, 0.12);
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
}

.growth-reach-source b,
.growth-reach-source small {
  display: block;
}

.growth-reach-source b {
  color: #ecfbff;
  font-size: 1.05rem;
  line-height: 1;
}

.growth-reach-source small {
  color: var(--ilayda-cyan);
  font-size: 0.42rem;
  font-weight: 950;
  text-transform: uppercase;
}

.growth-reach-audience {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 4px;
  bottom: 38px;
  display: grid;
  align-content: space-between;
}

.growth-reach-audience i {
  display: grid;
  align-content: center;
  width: 74px;
  min-height: 34px;
  padding: 5px 8px;
  background: rgba(5, 18, 16, 0.94);
  border: 1px solid rgba(87, 215, 255, 0.22);
  border-right: 3px solid var(--ilayda-cyan);
  border-radius: 4px 0 0 4px;
  font-style: normal;
  opacity: 0;
  transform: translateX(24px);
}

.growth-reach-audience b,
.growth-reach-audience small {
  display: block;
}

.growth-reach-audience b {
  color: #effcff;
  font-size: 0.62rem;
}

.growth-reach-audience small {
  margin-top: 2px;
  color: rgba(246, 243, 237, 0.46);
  font-size: 0.42rem;
  font-weight: 850;
  text-transform: uppercase;
}

.growth-reach-total {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(246, 243, 237, 0.46);
  font-size: 0.5rem;
  font-weight: 850;
  text-transform: uppercase;
}

.growth-reach-total b {
  color: var(--ilayda-cyan);
}

.ilayda-proof.is-visible .growth-reach-route {
  animation: growthReachRoute 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-proof.is-visible .growth-reach-route:nth-child(2) {
  animation-delay: 100ms;
}

.ilayda-proof.is-visible .growth-reach-route:nth-child(3) {
  animation-delay: 200ms;
}

.ilayda-proof.is-visible .growth-reach-route:nth-child(4) {
  animation-delay: 300ms;
}

.ilayda-proof.is-visible .growth-reach-particle {
  animation: growthReachParticle 500ms 1.05s ease-out forwards;
}

.ilayda-proof.is-visible .growth-reach-source {
  animation:
    growthReachSourceIn 650ms 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
    growthReachSourcePulse 2.4s 1s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-reach-audience i {
  animation: growthReachNode 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-proof.is-visible .growth-reach-audience i:nth-child(1) {
  animation-delay: 520ms;
}

.ilayda-proof.is-visible .growth-reach-audience i:nth-child(2) {
  animation-delay: 640ms;
}

.ilayda-proof.is-visible .growth-reach-audience i:nth-child(3) {
  animation-delay: 760ms;
}

.ilayda-proof.is-visible .growth-reach-audience i:nth-child(4) {
  animation-delay: 880ms;
}

.growth-peak-bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 7px;
  height: 200px;
  margin-top: 38px;
  padding: 22px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.growth-peak-bars::before,
.growth-peak-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.055);
}

.growth-peak-bars::before {
  top: 34%;
}

.growth-peak-bars::after {
  top: 66%;
}

.growth-peak-bars > i {
  position: relative;
  z-index: 1;
  height: var(--peak);
  min-height: 12px;
  background: linear-gradient(180deg, rgba(255, 154, 116, 0.82), rgba(255, 154, 116, 0.16));
  border: 1px solid rgba(255, 154, 116, 0.2);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
}

.growth-peak-bars > i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 236, 228, 0.58), transparent 38%);
  opacity: 0;
}

.growth-peak-bars > i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 7px;
  height: 7px;
  background: #fff1eb;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 154, 116, 0.95);
  opacity: 0;
  transform: translateX(-50%) scale(0.35);
}

.growth-peak-bars > i.is-peak {
  background: linear-gradient(180deg, #ffb091, #ff7950 56%, rgba(255, 121, 80, 0.2));
  box-shadow: 0 0 22px rgba(255, 154, 116, 0.32);
}

.growth-peak-bars > i span {
  position: absolute;
  left: 50%;
  top: -27px;
  color: #ffc5ae;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 950;
  transform: translateX(-50%);
}

.ilayda-proof.is-visible .growth-peak-bars > i {
  animation: growthPeakBar 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-proof.is-visible .growth-peak-bars > i::before {
  animation: growthPeakWave 4s 1.2s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-peak-bars > i::after {
  animation: growthPeakSignal 4s 1.2s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-peak-bars > i.is-peak {
  animation:
    growthPeakBar 700ms 455ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
    growthPeakGlow 2.4s 1.4s ease-in-out infinite;
}

.growth-peak-bars > i:nth-child(2) { animation-delay: 65ms !important; }
.growth-peak-bars > i:nth-child(3) { animation-delay: 130ms !important; }
.growth-peak-bars > i:nth-child(4) { animation-delay: 195ms !important; }
.growth-peak-bars > i:nth-child(5) { animation-delay: 260ms !important; }
.growth-peak-bars > i:nth-child(6) { animation-delay: 325ms !important; }
.growth-peak-bars > i:nth-child(7) { animation-delay: 390ms !important; }
.growth-peak-bars > i:nth-child(8) { animation-delay: 455ms !important; }

.growth-peak-bars > i:nth-child(2)::before,
.growth-peak-bars > i:nth-child(2)::after { animation-delay: 1.4s !important; }
.growth-peak-bars > i:nth-child(3)::before,
.growth-peak-bars > i:nth-child(3)::after { animation-delay: 1.6s !important; }
.growth-peak-bars > i:nth-child(4)::before,
.growth-peak-bars > i:nth-child(4)::after { animation-delay: 1.8s !important; }
.growth-peak-bars > i:nth-child(5)::before,
.growth-peak-bars > i:nth-child(5)::after { animation-delay: 2s !important; }
.growth-peak-bars > i:nth-child(6)::before,
.growth-peak-bars > i:nth-child(6)::after { animation-delay: 2.2s !important; }
.growth-peak-bars > i:nth-child(7)::before,
.growth-peak-bars > i:nth-child(7)::after { animation-delay: 2.4s !important; }
.growth-peak-bars > i:nth-child(8)::before,
.growth-peak-bars > i:nth-child(8)::after { animation-delay: 2.6s !important; }

.growth-day-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 42px;
  overflow: hidden;
}

.growth-day-grid::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: -18%;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(213, 168, 255, 0.2), transparent);
  opacity: 0;
  pointer-events: none;
}

.growth-day-grid > i {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  color: rgba(246, 243, 237, 0.42);
  background: rgba(213, 168, 255, 0.04);
  border: 1px solid rgba(213, 168, 255, 0.14);
  border-radius: 4px;
  font-style: normal;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
}

.growth-day-grid > i::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: #d5a8ff;
  transform: scaleX(0);
  transform-origin: left;
}

.growth-day-grid > i::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 5px;
  height: 5px;
  background: #d5a8ff;
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(213, 168, 255, 0.75);
}

.growth-day-grid > i.is-double {
  color: #fff;
  background: rgba(213, 168, 255, 0.13);
  border-color: rgba(213, 168, 255, 0.5);
  box-shadow: inset 0 0 18px rgba(213, 168, 255, 0.09);
}

.growth-day-grid > i.is-double::after {
  width: 11px;
  border-radius: 5px;
}

.growth-day-grid > i span {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  font-weight: 900;
}

.ilayda-proof.is-visible .growth-day-grid > i {
  animation: growthDayIn 430ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-proof.is-visible .growth-day-grid > i::before {
  animation: growthDayFill 600ms 240ms ease-out forwards;
}

.ilayda-proof.is-visible .growth-day-grid::after {
  animation: growthDaySweep 4.8s 1.2s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-day-grid > i::after {
  animation: growthDayPulse 3.75s 1.3s ease-in-out infinite;
}

.growth-day-grid > i:nth-child(2) { animation-delay: 45ms !important; }
.growth-day-grid > i:nth-child(3) { animation-delay: 90ms !important; }
.growth-day-grid > i:nth-child(4) { animation-delay: 135ms !important; }
.growth-day-grid > i:nth-child(5) { animation-delay: 180ms !important; }
.growth-day-grid > i:nth-child(6) { animation-delay: 225ms !important; }
.growth-day-grid > i:nth-child(7) { animation-delay: 270ms !important; }
.growth-day-grid > i:nth-child(8) { animation-delay: 315ms !important; }
.growth-day-grid > i:nth-child(9) { animation-delay: 360ms !important; }
.growth-day-grid > i:nth-child(10) { animation-delay: 405ms !important; }
.growth-day-grid > i:nth-child(11) { animation-delay: 450ms !important; }
.growth-day-grid > i:nth-child(12) { animation-delay: 495ms !important; }
.growth-day-grid > i:nth-child(13) { animation-delay: 540ms !important; }
.growth-day-grid > i:nth-child(14) { animation-delay: 585ms !important; }
.growth-day-grid > i:nth-child(15) { animation-delay: 630ms !important; }

.growth-day-grid > i:nth-child(2)::after { animation-delay: 1.55s !important; }
.growth-day-grid > i:nth-child(3)::after { animation-delay: 1.8s !important; }
.growth-day-grid > i:nth-child(4)::after { animation-delay: 2.05s !important; }
.growth-day-grid > i:nth-child(5)::after { animation-delay: 2.3s !important; }
.growth-day-grid > i:nth-child(6)::after { animation-delay: 2.55s !important; }
.growth-day-grid > i:nth-child(7)::after { animation-delay: 2.8s !important; }
.growth-day-grid > i:nth-child(8)::after { animation-delay: 3.05s !important; }
.growth-day-grid > i:nth-child(9)::after { animation-delay: 3.3s !important; }
.growth-day-grid > i:nth-child(10)::after { animation-delay: 3.55s !important; }
.growth-day-grid > i:nth-child(11)::after { animation-delay: 3.8s !important; }
.growth-day-grid > i:nth-child(12)::after { animation-delay: 4.05s !important; }
.growth-day-grid > i:nth-child(13)::after { animation-delay: 4.3s !important; }
.growth-day-grid > i:nth-child(14)::after { animation-delay: 4.55s !important; }
.growth-day-grid > i:nth-child(15)::after { animation-delay: 4.8s !important; }

.growth-evidence {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(560px, 1.22fr);
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 42%, rgba(87, 215, 255, 0.08), transparent 28%),
    linear-gradient(120deg, rgba(120, 242, 154, 0.07), transparent 48%),
    #050d0b;
  border-top: 1px solid rgba(120, 242, 154, 0.18);
}

.growth-evidence-copy {
  align-self: center;
  padding: 54px 20px 54px 46px;
}

.growth-evidence-copy > span {
  color: var(--ilayda);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.growth-evidence-copy h3 {
  max-width: 540px;
  margin-top: 18px;
  font-size: clamp(2rem, 3.4vw, 4.3rem);
  line-height: 0.98;
}

.growth-evidence-copy > p {
  max-width: 520px;
  margin-top: 24px;
  color: rgba(246, 243, 237, 0.6);
  font-size: 0.9rem;
  line-height: 1.8;
}

.growth-evidence-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid rgba(120, 242, 154, 0.16);
  border-bottom: 1px solid rgba(120, 242, 154, 0.16);
}

.growth-evidence-ledger article {
  min-width: 0;
  padding: 18px 12px 18px 0;
}

.growth-evidence-ledger article + article {
  padding-left: 12px;
  border-left: 1px solid rgba(120, 242, 154, 0.14);
}

.growth-evidence-ledger span,
.growth-evidence-ledger strong,
.growth-evidence-ledger small {
  display: block;
}

.growth-evidence-ledger span,
.growth-evidence-ledger small {
  color: rgba(246, 243, 237, 0.46);
  font-size: 0.55rem;
  font-weight: 850;
  text-transform: uppercase;
}

.growth-evidence-ledger strong {
  margin: 5px 0 3px;
  color: #f2fff6;
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.growth-phone-stage {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
}

.growth-phone-stage::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 8%;
  height: 18%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.82), transparent 70%);
  filter: blur(18px);
}

.growth-phone {
  position: absolute;
  width: min(35vw, 350px);
  height: 650px;
  margin: 0;
  overflow: hidden;
  background: #070a0a;
  border: 6px solid #151a1a;
  border-radius: 34px;
  box-shadow:
    0 42px 80px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform-origin: 50% 80%;
}

.growth-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.growth-phone-back img {
  object-fit: contain;
  background: #080d0c;
}

.growth-phone-back {
  z-index: 1;
  left: 5%;
  top: 54px;
  transform: rotate(-7deg);
}

.growth-phone-front {
  z-index: 2;
  right: 5%;
  top: 28px;
  transform: rotate(6deg);
}

.growth-phone-speaker {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 8px;
  width: 56px;
  height: 5px;
  background: #171d1d;
  border-radius: 99px;
  transform: translateX(-50%);
}

.growth-phone figcaption {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  color: rgba(246, 243, 237, 0.76);
  background: rgba(1, 6, 5, 0.82);
  border: 1px solid rgba(120, 242, 154, 0.2);
  border-radius: 5px;
  backdrop-filter: blur(10px);
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

.growth-phone-scan {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: -12%;
  height: 54px;
  background: linear-gradient(180deg, transparent, rgba(120, 242, 154, 0.16), transparent);
  pointer-events: none;
}

.growth-verified-stamp {
  position: absolute;
  z-index: 5;
  left: 44%;
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  color: #05100c;
  background: var(--ilayda);
  border: 4px solid #07100e;
  border-radius: 6px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translate(-50%, 12px) rotate(-5deg) scale(0.82);
}

.growth-verified-stamp i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--ilayda);
  background: #05100c;
  border-radius: 50%;
  font-style: normal;
  font-weight: 950;
}

.growth-verified-stamp span {
  font-family: Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 950;
  line-height: 1.2;
}

.ilayda-proof.is-visible .growth-phone-back {
  animation: growthPhoneBack 900ms 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ilayda-proof.is-visible .growth-phone-front {
  animation: growthPhoneFront 900ms 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ilayda-proof.is-visible .growth-phone-scan {
  animation: growthPhoneScan 4.2s 1.1s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-verified-stamp {
  animation: growthStamp 650ms 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.growth-proof-slip {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 8px;
  background: rgba(2, 8, 7, 0.88);
  border: 1px solid rgba(120, 242, 154, 0.18);
  border-radius: 6px;
  backdrop-filter: blur(12px);
}

.growth-proof-slip img {
  width: 86px;
  height: 58px;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(0.78) contrast(1.08);
}

.growth-proof-portrait img {
  object-position: center 82%;
}

.growth-proof-slip span,
.growth-proof-slip b {
  display: block;
}

.growth-proof-slip span {
  color: rgba(246, 243, 237, 0.5);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.4;
}

.growth-proof-slip b {
  margin-bottom: 3px;
  color: var(--ilayda);
  font-size: 0.6rem;
  text-transform: uppercase;
}

.growth-velocity {
  padding: 30px 24px 24px;
  background:
    linear-gradient(90deg, rgba(120, 242, 154, 0.06), rgba(87, 215, 255, 0.03)),
    #06100d;
  border-top: 1px solid rgba(120, 242, 154, 0.18);
}

.growth-velocity-copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.growth-velocity-copy span,
.growth-velocity-copy strong {
  display: block;
}

.growth-velocity-copy span {
  color: var(--ilayda);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.growth-velocity-copy strong {
  max-width: 660px;
  font-size: clamp(1.35rem, 2.1vw, 2.35rem);
  text-align: right;
}

.growth-velocity-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 112px;
  margin-top: 28px;
  padding-right: 22px;
}

.growth-velocity-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.growth-velocity-track::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  top: -10px;
  bottom: -3px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #effff4 24%, var(--ilayda) 72%, transparent);
  box-shadow: 0 0 16px rgba(120, 242, 154, 0.8);
  opacity: 0;
  pointer-events: none;
}

.growth-velocity-track i {
  position: relative;
  height: calc(14px + (var(--day, 1) * 5px));
  background: linear-gradient(180deg, var(--ilayda), rgba(87, 215, 255, 0.22));
  border-radius: 2px 2px 0 0;
  opacity: 0.72;
  transform: scaleY(0);
  transform-origin: bottom;
}

.growth-velocity-track i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(242, 255, 247, 0.72), transparent 45%);
  opacity: 0;
}

.growth-velocity-track i:nth-child(1) { --day: 1; }
.growth-velocity-track i:nth-child(2) { --day: 2; }
.growth-velocity-track i:nth-child(3) { --day: 2.5; }
.growth-velocity-track i:nth-child(4) { --day: 3; }
.growth-velocity-track i:nth-child(5) { --day: 4.5; }
.growth-velocity-track i:nth-child(6) { --day: 5; }
.growth-velocity-track i:nth-child(7) { --day: 6.5; }
.growth-velocity-track i:nth-child(8) { --day: 8; }
.growth-velocity-track i:nth-child(9) { --day: 7.5; }
.growth-velocity-track i:nth-child(10) { --day: 10; }
.growth-velocity-track i:nth-child(11) { --day: 11; }
.growth-velocity-track i:nth-child(12) { --day: 13; }
.growth-velocity-track i:nth-child(13) { --day: 14; }
.growth-velocity-track i:nth-child(14) { --day: 16; }
.growth-velocity-track i:nth-child(15) { --day: 18; }

.ilayda-proof.is-visible .growth-velocity-track i {
  animation: growthColumn 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ilayda-proof.is-visible .growth-velocity-track::after {
  animation: velocityPlayhead 5.4s 1.1s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-velocity-track i::after {
  animation: velocitySignal 5.4s 1.1s ease-in-out infinite;
}

.growth-velocity-track i:nth-child(2) { animation-delay: 50ms !important; }
.growth-velocity-track i:nth-child(3) { animation-delay: 100ms !important; }
.growth-velocity-track i:nth-child(4) { animation-delay: 150ms !important; }
.growth-velocity-track i:nth-child(5) { animation-delay: 200ms !important; }
.growth-velocity-track i:nth-child(6) { animation-delay: 250ms !important; }
.growth-velocity-track i:nth-child(7) { animation-delay: 300ms !important; }
.growth-velocity-track i:nth-child(8) { animation-delay: 350ms !important; }
.growth-velocity-track i:nth-child(9) { animation-delay: 400ms !important; }
.growth-velocity-track i:nth-child(10) { animation-delay: 450ms !important; }
.growth-velocity-track i:nth-child(11) { animation-delay: 500ms !important; }
.growth-velocity-track i:nth-child(12) { animation-delay: 550ms !important; }
.growth-velocity-track i:nth-child(13) { animation-delay: 600ms !important; }
.growth-velocity-track i:nth-child(14) { animation-delay: 650ms !important; }
.growth-velocity-track i:nth-child(15) { animation-delay: 700ms !important; }

.growth-velocity-track i:nth-child(2)::after { animation-delay: 1.45s !important; }
.growth-velocity-track i:nth-child(3)::after { animation-delay: 1.8s !important; }
.growth-velocity-track i:nth-child(4)::after { animation-delay: 2.15s !important; }
.growth-velocity-track i:nth-child(5)::after { animation-delay: 2.5s !important; }
.growth-velocity-track i:nth-child(6)::after { animation-delay: 2.85s !important; }
.growth-velocity-track i:nth-child(7)::after { animation-delay: 3.2s !important; }
.growth-velocity-track i:nth-child(8)::after { animation-delay: 3.55s !important; }
.growth-velocity-track i:nth-child(9)::after { animation-delay: 3.9s !important; }
.growth-velocity-track i:nth-child(10)::after { animation-delay: 4.25s !important; }
.growth-velocity-track i:nth-child(11)::after { animation-delay: 4.6s !important; }
.growth-velocity-track i:nth-child(12)::after { animation-delay: 4.95s !important; }
.growth-velocity-track i:nth-child(13)::after { animation-delay: 5.3s !important; }
.growth-velocity-track i:nth-child(14)::after { animation-delay: 5.65s !important; }
.growth-velocity-track i:nth-child(15)::after { animation-delay: 6s !important; }

.growth-velocity-track b {
  position: absolute;
  right: -2px;
  top: -13px;
  color: var(--ilayda);
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(120, 242, 154, 0.5));
  animation: growthArrow 2.4s ease-in-out infinite;
}

.growth-velocity-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  color: rgba(246, 243, 237, 0.44);
  font-size: 0.6rem;
  font-weight: 850;
  text-transform: uppercase;
}

.growth-velocity-labels span:nth-child(2),
.growth-velocity-labels span:nth-child(3) {
  text-align: center;
}

.growth-velocity-labels span:last-child {
  text-align: right;
}

.ilayda-proof.is-visible .growth-velocity-labels span {
  animation: velocityLabelPulse 5.4s 1.1s ease-in-out infinite;
}

.ilayda-proof.is-visible .growth-velocity-labels span:nth-child(2) {
  animation-delay: 2.65s;
}

.ilayda-proof.is-visible .growth-velocity-labels span:nth-child(3) {
  animation-delay: 4.25s;
}

.ilayda-proof.is-visible .growth-velocity-labels span:nth-child(4) {
  animation-delay: 5.6s;
}

.ilayda-growth-dashboard > .ilayda-signal {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 0;
  padding: 30px 24px;
  background: var(--ilayda);
}

.ilayda-growth-dashboard > .ilayda-signal span {
  color: rgba(5, 16, 12, 0.66);
}

.ilayda-growth-dashboard > .ilayda-signal strong {
  margin: 0;
  color: #05100c;
  font-size: clamp(1.35rem, 2.2vw, 2.55rem);
}

.archive-case {
  position: relative;
  margin: 34px 0 0;
  overflow: hidden;
  background: #080b09;
  border: 1px solid rgba(181, 206, 177, 0.25);
  border-radius: 8px;
}

.archive-film-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  color: rgba(220, 232, 214, 0.55);
  background: #111611;
  border-bottom: 1px solid rgba(181, 206, 177, 0.18);
  font-family: Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.archive-film-head span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.archive-film-head i {
  width: 7px;
  height: 7px;
  background: #d65f55;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(214, 95, 85, 0.6);
}

.archive-photo-canvas {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background: #050705;
}

.income-history-copy .archive-photo-canvas > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.68) contrast(1.08) sepia(0.08);
  transform: none;
}

.archive-photo-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 34, 20, 0.18), transparent 32%, rgba(41, 20, 12, 0.12)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.archive-scan {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: -18%;
  height: 14%;
  background: linear-gradient(180deg, transparent, rgba(202, 255, 194, 0.1), transparent);
  animation: archiveScan 5s linear infinite;
}

.archive-file-code,
.archive-timecode {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  padding: 7px 8px;
  color: #dce8d8;
  background: rgba(3, 8, 4, 0.74);
  border: 1px solid rgba(220, 232, 214, 0.22);
  border-radius: 4px;
  font-family: Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 800;
}

.archive-file-code {
  left: 12px;
}

.archive-timecode {
  right: 12px;
}

.archive-proof-ticket {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(91, 150, 75, 0.1), transparent),
    #0d120d;
  border-top: 1px solid rgba(181, 206, 177, 0.18);
}

.income-history-copy .archive-proof-ticket img {
  width: 128px;
  height: 154px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid rgba(220, 232, 214, 0.18);
  border-radius: 4px;
  filter: saturate(0.72) contrast(1.08);
}

.archive-proof-ticket span,
.archive-proof-ticket strong {
  display: block;
}

.archive-proof-ticket span {
  color: #8dbb82;
  font-family: Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-proof-ticket strong {
  margin-top: 9px;
  color: #e9eee6;
  font-size: 1.2rem;
  line-height: 1.15;
}

.archive-proof-ticket p {
  margin: 9px 0 0;
  color: rgba(220, 232, 214, 0.56);
  font-size: 0.72rem;
  line-height: 1.55;
}

.archive-case > figcaption {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  color: rgba(220, 232, 214, 0.56);
  background: rgba(181, 206, 177, 0.16);
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  font-family: Consolas, monospace;
  font-size: 0.54rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.archive-case > figcaption span {
  padding: 10px 6px;
  background: #0b100b;
}

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

@keyframes growthDot {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  65% {
    opacity: 1;
    transform: scale(1.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes growthDotPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(120, 242, 154, 0.5));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(120, 242, 154, 1));
    transform: scale(1.35);
  }
}

@keyframes heroProofLeft {
  from {
    opacity: 0;
    transform: translate(-36px, 58px) rotate(-14deg) rotateY(12deg) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(28px) rotate(-8deg) rotateY(8deg) scale(1);
  }
}

@keyframes heroProofRight {
  from {
    opacity: 0;
    transform: translate(36px, 44px) rotate(13deg) rotateY(-12deg) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(4px) rotate(7deg) rotateY(-8deg) scale(1);
  }
}

@keyframes heroProofStamp {
  to {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-3deg);
  }
}

@keyframes ebookFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

@keyframes ebookShine {
  0% {
    opacity: 0;
    transform: translateZ(18px) translateX(-55%);
  }
  40% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateZ(18px) translateX(65%);
  }
}

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

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

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

@keyframes ilaydaHeroDrift {
  0% {
    transform: scale(1.035) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.08) translate3d(-1.4%, -0.8%, 0);
  }
}

@keyframes growthCardIn {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes growthBadgeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.82);
  }
  70% {
    transform: translateY(0) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes growthValueIn {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

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

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

@keyframes growthReachSourceIn {
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes growthReachSourcePulse {
  50% {
    box-shadow:
      0 0 0 15px rgba(87, 215, 255, 0),
      0 0 38px rgba(87, 215, 255, 0.24);
  }
}

@keyframes growthReachNode {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes growthRadarRing {
  0% {
    opacity: 0;
    transform: scale(0.38);
  }
  72% {
    opacity: 0.82;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes growthRadarSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes growthPeakBar {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes growthPeakWave {
  0%,
  16%,
  100% {
    opacity: 0;
  }
  5%,
  10% {
    opacity: 0.88;
  }
}

@keyframes growthPeakSignal {
  0%,
  16%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.35);
  }
  6%,
  10% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes growthPeakGlow {
  0%,
  100% {
    box-shadow: 0 0 18px rgba(255, 154, 116, 0.26);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 34px rgba(255, 154, 116, 0.68);
    filter: brightness(1.2);
  }
}

@keyframes growthDayIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes growthDayFill {
  to {
    transform: scaleX(1);
  }
}

@keyframes growthDaySweep {
  0%,
  8% {
    left: -18%;
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  72% {
    opacity: 0.8;
  }
  84%,
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes growthDayPulse {
  0%,
  12%,
  100% {
    opacity: 0.45;
    transform: scale(0.75);
  }
  5%,
  8% {
    opacity: 1;
    transform: scale(1.45);
  }
}

@keyframes growthPhoneBack {
  0% {
    opacity: 0;
    transform: translate(-42px, 46px) rotate(-13deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: rotate(-7deg) scale(1);
  }
}

@keyframes growthPhoneFront {
  0% {
    opacity: 0;
    transform: translate(42px, 46px) rotate(13deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: rotate(6deg) scale(1);
  }
}

@keyframes growthPhoneScan {
  0%,
  12% {
    top: -12%;
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  72% {
    opacity: 0.75;
  }
  88%,
  100% {
    top: 105%;
    opacity: 0;
  }
}

@keyframes growthStamp {
  to {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-5deg) scale(1);
  }
}

@keyframes growthColumn {
  to {
    transform: scaleY(1);
  }
}

@keyframes velocityPlayhead {
  0%,
  7% {
    left: 0;
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  82% {
    opacity: 0.9;
  }
  92%,
  100% {
    left: calc(100% - 24px);
    opacity: 0;
  }
}

@keyframes velocitySignal {
  0%,
  12%,
  100% {
    opacity: 0;
  }
  5%,
  8% {
    opacity: 1;
  }
}

@keyframes velocityLabelPulse {
  0%,
  16%,
  100% {
    color: rgba(246, 243, 237, 0.44);
    text-shadow: none;
  }
  5%,
  10% {
    color: var(--ilayda);
    text-shadow: 0 0 12px rgba(120, 242, 154, 0.6);
  }
}

@keyframes growthLive {
  70% {
    box-shadow: 0 0 0 9px rgba(120, 242, 154, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(120, 242, 154, 0);
  }
}

@keyframes growthArrow {
  50% {
    transform: translate(5px, -5px);
  }
}

@keyframes archiveScan {
  to {
    top: 110%;
  }
}

@media (max-width: 1180px) {
  .growth-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .growth-card {
    min-height: 560px;
  }

  .growth-evidence {
    grid-template-columns: 1fr;
  }

  .growth-evidence-copy {
    padding: 52px 42px 0;
  }

  .growth-phone-stage {
    min-height: 700px;
  }

  .growth-phone {
    width: 350px;
  }

  .growth-phone-back {
    left: calc(50% - 330px);
  }

  .growth-phone-front {
    right: calc(50% - 330px);
  }

  .influencer-feature-copy {
    width: 82%;
  }

  .influencer-feature-stack {
    width: 36vw;
    opacity: 0.72;
  }

  .ilayda-hero-copy {
    width: 70%;
  }

  .ilayda-hero-proof {
    width: 42vw;
  }

  .ilayda-hero-feed {
    width: 34vw;
  }

  .ilayda-origin-grid,
  .ilayda-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ilayda-origin-grid article:last-child,
  .ilayda-pipeline article:last-child {
    grid-column: 1 / -1;
  }

  .ilayda-video-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ilayda-proof-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ilayda-stat-console {
    grid-column: 1 / -1;
    min-height: 540px;
  }

  .ilayda-extra-grid,
  .income-history,
  .income-now {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .growth-dashboard-head,
  .growth-dashboard-head > div:first-child,
  .growth-velocity-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .growth-card-grid {
    grid-template-columns: 1fr;
  }

  .growth-card {
    min-height: 535px;
    padding: 20px;
  }

  .growth-card-caption {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .growth-radar {
    width: min(72vw, 235px);
  }

  .growth-reach-map {
    height: 225px;
  }

  .growth-peak-bars {
    height: 180px;
  }

  .growth-day-grid {
    gap: 6px;
  }

  .growth-evidence {
    min-height: 0;
  }

  .growth-evidence-copy {
    padding: 44px 20px 0;
  }

  .growth-evidence-copy h3 {
    font-size: clamp(2rem, 10vw, 3.25rem);
  }

  .growth-evidence-ledger {
    grid-template-columns: 1fr;
  }

  .growth-evidence-ledger article {
    padding: 13px 0;
  }

  .growth-evidence-ledger article + article {
    padding-left: 0;
    border-top: 1px solid rgba(120, 242, 154, 0.14);
    border-left: 0;
  }

  .growth-phone-stage {
    min-height: 570px;
  }

  .growth-phone {
    width: min(64vw, 260px);
    height: 490px;
    border-width: 4px;
    border-radius: 26px;
  }

  .growth-phone-back {
    left: -4%;
    top: 58px;
    transform: rotate(-6deg);
  }

  .growth-phone-front {
    right: -4%;
    top: 30px;
    transform: rotate(5deg);
  }

  .growth-verified-stamp {
    left: 50%;
    bottom: 24px;
  }

  .growth-proof-slip {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .growth-velocity-copy strong {
    text-align: left;
  }

  .growth-velocity-track {
    gap: 3px;
    height: 92px;
  }

  .growth-velocity-labels {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .growth-velocity-labels span:nth-child(n) {
    text-align: left;
  }

  .growth-velocity-labels span:nth-child(even) {
    text-align: right;
  }

  .ilayda-growth-dashboard > .ilayda-signal {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .influencer-feature {
    min-height: 760px;
  }

  .influencer-feature-cover {
    object-position: 58% center;
  }

  .influencer-feature-shade {
    background: linear-gradient(180deg, rgba(3, 10, 9, 0.22) 6%, rgba(3, 10, 9, 0.98) 62%);
  }

  .influencer-feature-copy {
    width: 100%;
    padding: 24px;
    padding-bottom: 34px;
  }

  .influencer-feature-copy h3 {
    font-size: clamp(2rem, 9vw, 3.45rem);
  }

  .influencer-feature-stack {
    display: none;
  }

  .ilayda-hero {
    min-height: 1460px;
  }

  .ilayda-hero-image {
    object-position: 64% 42%;
  }

  .ilayda-hero-shade {
    background: linear-gradient(180deg, rgba(2, 9, 8, 0.22) 4%, rgba(2, 9, 8, 0.98) 54%);
  }

  .ilayda-hero-copy {
    width: 100%;
    padding: 26px 22px;
    padding-top: 620px;
    padding-bottom: 260px;
  }

  .ilayda-hero-copy .kicker {
    margin-top: 24px;
  }

  .ilayda-hero-copy h2 {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }

  .ilayda-hero-feed {
    left: 14px;
    right: 14px;
    top: 330px;
    width: auto;
    gap: 6px;
  }

  .ilayda-hero-proof {
    left: 14px;
    right: 14px;
    top: 24px;
    width: auto;
    height: 286px;
  }

  .ilayda-hero-proof figure {
    width: 47%;
    height: 260px;
    border-width: 4px;
    border-radius: 20px;
  }

  .ilayda-hero-proof > strong {
    bottom: -2px;
    white-space: nowrap;
  }

  .ilayda-hero-feed video:first-child,
  .ilayda-hero-feed video:nth-child(2),
  .ilayda-hero-feed video:last-child {
    transform: none;
  }

  .ilayda-hero-metrics {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ilayda-hero-metrics article {
    padding: 15px 12px;
  }

  .ilayda-hero-metrics article + article {
    border-left: 0;
  }

  .ilayda-hero-metrics article:nth-child(even) {
    border-left: 1px solid rgba(120, 242, 154, 0.2);
  }

  .ilayda-hero-metrics article:nth-child(n + 3) {
    border-top: 1px solid rgba(120, 242, 154, 0.2);
  }

  .ilayda-origin,
  .ilayda-social-wall,
  .ilayda-proof,
  .ilayda-stories,
  .ilayda-sponsor,
  .ilayda-automation,
  .ilayda-extras {
    margin-top: 54px;
  }

  .ilayda-origin-grid,
  .ilayda-pipeline {
    grid-template-columns: 1fr;
  }

  .ilayda-origin-grid article:last-child,
  .ilayda-pipeline article:last-child {
    grid-column: auto;
  }

  .ilayda-origin-grid article,
  .ilayda-pipeline article {
    min-height: 180px;
  }

  .ilayda-origin-grid h3,
  .ilayda-pipeline strong {
    margin-top: 26px;
  }

  .ilayda-video-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-height: auto;
    padding: 12px;
  }

  .ilayda-video-wall video:nth-child(n) {
    transform: none;
  }

  .ilayda-proof-grid {
    grid-template-columns: 1fr;
  }

  .ilayda-stat-console,
  .ilayda-proof-shot {
    min-height: 520px;
  }

  .ilayda-story header {
    align-items: flex-start;
  }

  .ilayda-story-track {
    grid-auto-columns: 78vw;
  }

  .ilayda-sponsor {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ilayda-sponsor-copy {
    padding: 30px 22px;
  }

  .ilayda-sponsor-copy h2 {
    font-size: clamp(2rem, 9vw, 3.45rem);
  }

  .ilayda-sponsor-media {
    min-height: 620px;
    padding: 24px 16px;
  }

  .ilayda-automation-note {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ilayda-extra-videos {
    gap: 6px;
    min-height: auto;
    padding: 10px;
  }

  .ilayda-extra-videos video:nth-child(n) {
    transform: none;
  }

  .ilayda-book-notes article {
    grid-template-columns: 108px 1fr;
    gap: 16px;
    min-height: 240px;
    padding: 14px;
  }

  .income-evolution {
    margin-top: 58px;
    padding-top: 48px;
  }

  .income-history-copy,
  .income-now-copy {
    padding: 26px 22px;
  }

  .income-history-copy h3,
  .income-now-copy h3 {
    font-size: clamp(1.85rem, 7.8vw, 2.85rem);
  }

  .archive-proof-ticket {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 13px;
    padding: 12px;
  }

  .income-history-copy .archive-proof-ticket img {
    width: 96px;
    height: 132px;
  }

  .archive-case > figcaption {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .income-loop-wall {
    gap: 6px;
    min-height: auto;
    padding: 10px;
  }

  .income-loop-wall video:nth-child(n) {
    transform: none;
  }

  .income-shift {
    grid-template-columns: 1fr auto;
  }

  .income-shift i {
    display: none;
  }

  .income-system-grid {
    grid-template-columns: 1fr;
  }

  .income-system-grid article {
    min-height: 190px;
  }

  .income-system-grid h3 {
    margin-top: 30px;
  }
}

/* Compact project index and expanded nightlife case study */
.projects-overview > .sector-feature,
.projects-overview > .project-system,
.projects-overview > .project-file-divider {
  display: none;
}

.projects-overview > .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.46fr);
  gap: 14px 48px;
  align-items: end;
  margin-bottom: 24px;
  padding-top: 4px;
}

.projects-overview > .panel-head .kicker {
  grid-column: 1 / -1;
}

.projects-overview > .panel-head h2 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(2.15rem, 3.25vw, 3.75rem);
  line-height: 1;
}

.projects-overview > .panel-head p {
  max-width: 520px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.project-preview-index {
  display: grid;
  gap: clamp(26px, 3.4vw, 48px);
}

.project-preview {
  --preview-accent: #72f5b2;
  --preview-accent-rgb: 114, 245, 178;
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(430px, 1.18fr);
  height: 430px;
  min-height: 346px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--preview-accent-rgb), 0.16), transparent 34%),
    #080a0a;
  border: 1px solid rgba(var(--preview-accent-rgb), 0.26);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.16);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.project-preview::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: -34%;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--preview-accent-rgb), 0.95), transparent);
  filter: drop-shadow(0 0 10px rgba(var(--preview-accent-rgb), 0.65));
  animation: projectPreviewRail 4.8s ease-in-out infinite;
}

.project-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--preview-accent-rgb), 0.045), transparent 32%, rgba(var(--preview-accent-rgb), 0.035)),
    radial-gradient(circle at 82% 24%, rgba(var(--preview-accent-rgb), 0.14), transparent 28%);
  opacity: 0.72;
}

.project-preview:hover {
  border-color: rgba(var(--preview-accent-rgb), 0.58);
  transform: translateY(-3px);
  box-shadow: 0 28px 94px rgba(var(--preview-accent-rgb), 0.13), 0 22px 80px rgba(0, 0, 0, 0.22);
}

.project-preview-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(26px, 3vw, 42px);
  background:
    linear-gradient(135deg, rgba(var(--preview-accent-rgb), 0.1), transparent 42%),
    #080a0a;
}

.project-preview-copy h3 {
  max-width: 660px;
  margin: 19px 0 12px;
  font-size: clamp(1.55rem, 2.25vw, 2.75rem);
  line-height: 1.03;
}

.project-preview-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.project-preview-copy .button {
  margin-top: 0;
}

.project-preview-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin-top: 20px;
}

.project-mini-logo-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(var(--preview-accent-rgb), 0.2);
  border-radius: 7px;
}

.project-mini-logo-strip img,
.project-mini-logo-strip span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 30px;
  padding: 4px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  opacity: 0.8;
}

.project-mini-logo-strip img {
  object-fit: contain;
  filter: grayscale(1) brightness(1.5);
}

.project-mini-logo-strip img[src$="zuhtu.png"] {
  padding: 6px;
}

.project-mini-logo-strip span {
  width: auto;
  min-width: 42px;
  padding: 0 8px;
  font-size: 0.55rem;
  font-weight: 950;
  text-transform: uppercase;
}

.project-preview:hover .project-mini-logo-strip img,
.project-preview:hover .project-mini-logo-strip span {
  opacity: 1;
  filter: none;
}

.project-preview-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: center;
  width: 100%;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.project-preview-meta span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #071006;
  background: var(--preview-accent);
  border-radius: 50%;
}

.project-preview-meta strong {
  color: var(--ink);
}

.project-preview-meta small {
  color: var(--muted);
  font-size: inherit;
}

.project-preview-media {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 346px;
  overflow: hidden;
  z-index: 2;
  background: #050706;
}

.project-preview-reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 18px;
}

.project-preview-reels::after,
.project-preview-cinema::after,
.project-preview-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-left: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(8, 10, 10, 0.25), transparent 24%);
}

.project-preview-reels video {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border: 1px solid rgba(var(--preview-accent-rgb), 0.22);
  border-radius: 6px;
  transform: translateY(14px) rotate(-1.5deg);
  animation: previewReelFloat 5s ease-in-out infinite;
}

.project-preview-reels video:nth-child(2) {
  transform: translateY(-12px);
  animation-delay: -1.7s;
}

.project-preview-reels video:nth-child(3) {
  transform: translateY(10px) rotate(1.5deg);
  animation-delay: -3.2s;
}

.project-preview-reels video:nth-child(4) {
  transform: translateY(-4px) rotate(-0.8deg);
  animation-delay: -4.1s;
}

.project-preview-entertainment {
  --preview-accent: #72f5b2;
  --preview-accent-rgb: 114, 245, 178;
}

.project-preview-prombt {
  --preview-accent: #c9ff32;
  --preview-accent-rgb: 201, 255, 50;
  border-color: rgba(201, 255, 50, 0.26);
}

.project-preview-prombt .project-preview-meta span {
  background: var(--preview-accent);
}

.project-preview-cinema {
  display: grid;
  grid-template-columns: 1.12fr 0.72fr 0.72fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  padding: 18px;
}

.project-preview-cinema video {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border: 1px solid rgba(var(--preview-accent-rgb), 0.2);
  border-radius: 5px;
  filter: saturate(0.84) contrast(1.08);
}

.project-preview-cinema .prombt-shot-main {
  grid-column: 1;
  grid-row: 1 / 3;
}

.project-preview-cinema .prombt-shot:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
}

.project-preview-cinema .prombt-shot:nth-of-type(3) {
  grid-column: 3;
  grid-row: 1;
}

.project-preview-cinema .prombt-shot:nth-of-type(4) {
  grid-column: 2 / 4;
  grid-row: 2;
}

.project-preview-cinema .prombt-wordmark,
.project-preview-cinema > i {
  position: absolute;
  z-index: 2;
}

.project-preview-cinema .prombt-logo-lockup {
  position: absolute;
  z-index: 3;
  left: 30px;
  top: 28px;
  width: clamp(154px, 13vw, 220px);
  padding: 8px 10px;
  border-radius: 8px;
  animation: prombtLogoFloat 5.2s ease-in-out infinite;
}

.project-preview-cinema .prombt-wordmark {
  left: 30px;
  top: 28px;
  padding: 7px 9px;
  color: #c9ff32;
  background: rgba(4, 7, 4, 0.76);
  backdrop-filter: blur(8px);
  border-radius: 3px;
}

.prombt-preview-signal {
  position: absolute;
  z-index: 3;
  right: 30px;
  bottom: 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 9px;
  align-items: center;
  padding: 9px 11px;
  color: #11150b;
  background: #c9ff32;
  border-radius: 4px;
  text-transform: uppercase;
}

.prombt-preview-signal b {
  grid-row: 1 / 3;
  font-size: 1.35rem;
  line-height: 1;
}

.prombt-preview-signal span,
.prombt-preview-signal i {
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 950;
}

.project-preview-influencer {
  --preview-accent: #57d7ff;
  --preview-accent-rgb: 87, 215, 255;
  border-color: rgba(87, 215, 255, 0.24);
}

.project-preview-influencer .project-preview-meta span {
  background: var(--preview-accent);
}

.project-preview-identity {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  padding: 18px;
}

.project-preview-identity video {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(var(--preview-accent-rgb), 0.24);
  filter: saturate(0.92);
}

.project-preview-identity .identity-shot-main {
  grid-row: 1 / 3;
}

.identity-social-screens {
  position: absolute;
  z-index: 3;
  left: 54%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.identity-social-screens img {
  width: clamp(78px, 5.3vw, 104px);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(87, 215, 255, 0.1);
  transform: translate(12px, -18px) rotate(-7deg);
  animation: identityScreenFloat 5.4s ease-in-out infinite;
}

.identity-social-screens img:nth-child(2) {
  transform: translate(-10px, 20px) rotate(5deg);
  animation-delay: -2.1s;
}

.identity-growth-signal {
  position: absolute;
  z-index: 3;
  right: 30px;
  bottom: 28px;
  width: min(230px, calc(100% - 60px));
  padding: 11px 13px 13px;
  color: #07120b;
  background: rgba(var(--preview-accent-rgb), 0.94);
  border-radius: 4px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
}

.identity-growth-signal span,
.identity-growth-signal strong {
  display: block;
  font-weight: 950;
  text-transform: uppercase;
}

.identity-growth-signal span {
  font-size: 0.52rem;
}

.identity-growth-signal strong {
  margin-top: 2px;
  font-size: 1.05rem;
}

.identity-growth-signal i {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(7, 18, 11, 0.2);
}

.identity-growth-signal i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #07120b;
  transform-origin: left;
  animation: identityGrowth 3.4s ease-in-out infinite;
}

.night-loop-showcase,
.brand-film-library,
.venue-impact-model {
  margin-bottom: clamp(58px, 8vw, 108px);
}

.night-section-heading {
  margin-bottom: 28px;
}

.night-section-heading .kicker {
  color: #72f5b2;
}

.night-loop-showcase {
  padding-top: 18px;
}

.night-loop-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  gap: 8px;
  min-height: 540px;
  padding: 20px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(114, 245, 178, 0.08), transparent 46%),
    #060908;
  border: 1px solid rgba(114, 245, 178, 0.2);
  border-radius: 8px;
}

.night-loop-track article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transform: translateY(18px);
  animation: nightCardFloat 6s ease-in-out infinite;
}

.night-loop-track article:nth-child(2),
.night-loop-track article:nth-child(5) {
  transform: translateY(-10px);
  animation-delay: -2s;
}

.night-loop-track article:nth-child(3),
.night-loop-track article:nth-child(6) {
  animation-delay: -4s;
}

.night-loop-track video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.night-loop-track article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(2, 5, 4, 0.92));
  pointer-events: none;
}

.night-loop-track article > span {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 13px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.brand-film-filters {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.brand-film-filters button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 900;
}

.brand-film-filters button span {
  color: #72f5b2;
  font-size: 0.6rem;
}

.brand-film-filters button:hover,
.brand-film-filters button.is-active {
  color: #05100b;
  background: #72f5b2;
  border-color: #72f5b2;
}

.brand-film-filters button.is-active span,
.brand-film-filters button:hover span {
  color: inherit;
}

.brand-film-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 360px;
}

.brand-film-card {
  position: relative;
  height: 480px;
  min-height: 0;
  overflow: hidden;
  background: #050706;
  border: 1px solid var(--line);
  border-radius: 7px;
  animation: brandFilmIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.brand-film-card:nth-child(2) {
  animation-delay: 70ms;
}

.brand-film-card:nth-child(3) {
  animation-delay: 140ms;
}

.brand-film-card video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.brand-film-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(3, 5, 4, 0.94));
  pointer-events: none;
}

.brand-film-card-copy {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 56px;
  bottom: 18px;
  display: grid;
  gap: 6px;
}

.brand-film-card-copy span {
  color: var(--film-accent);
  font-size: 0.65rem;
  font-weight: 950;
  text-transform: uppercase;
}

.brand-film-card-copy strong {
  font-size: 1rem;
}

.brand-film-card > i {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--film-accent);
  border-radius: 50%;
}

.brand-film-card > i::before {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--film-accent);
  border-radius: 50%;
  animation: filmStatus 1.6s ease-in-out infinite;
}

.venue-impact-model {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(87, 215, 255, 0.055), transparent 35%),
    linear-gradient(315deg, rgba(114, 245, 178, 0.05), transparent 38%),
    #060908;
  border: 1px solid rgba(114, 245, 178, 0.18);
  border-radius: 8px;
}

.impact-model-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.5fr);
  gap: 24px 52px;
  align-items: end;
  padding: clamp(28px, 4vw, 54px);
  border-bottom: 1px solid rgba(114, 245, 178, 0.16);
}

.impact-model-head h2 {
  max-width: 980px;
  margin-top: 14px;
  font-size: clamp(2rem, 4vw, 4.7rem);
  line-height: 0.98;
}

.impact-model-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.impact-model-head p strong {
  color: #72f5b2;
}

.impact-model-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr 0.92fr;
}

.impact-model-grid > article {
  min-width: 0;
  min-height: 430px;
  padding: clamp(24px, 3vw, 42px);
}

.impact-model-grid > article + article {
  border-left: 1px solid rgba(114, 245, 178, 0.15);
}

.impact-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  color: #72f5b2;
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.impact-card-head strong {
  color: var(--ink);
  font-size: 0.72rem;
}

.impact-flow-map {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 230px;
}

.impact-flow-map div {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(58px, 5vw, 78px);
  aspect-ratio: 1;
  color: #06100c;
  background: #72f5b2;
  border-radius: 50%;
  transform: scale(0.6);
  opacity: 0;
}

.venue-impact-model.is-visible .impact-flow-map div {
  animation: impactNode 3.8s ease-in-out infinite;
}

.venue-impact-model.is-visible .impact-flow-map div:nth-of-type(2) {
  animation-delay: 0.35s;
}

.venue-impact-model.is-visible .impact-flow-map div:nth-of-type(3) {
  animation-delay: 0.7s;
}

.venue-impact-model.is-visible .impact-flow-map div:nth-of-type(4) {
  animation-delay: 1.05s;
}

.impact-flow-map b,
.impact-flow-map small {
  display: block;
  text-align: center;
}

.impact-flow-map b {
  font-size: 1rem;
}

.impact-flow-map small {
  max-width: 64px;
  font-size: 0.48rem;
  font-weight: 900;
  line-height: 1.1;
}

.impact-flow-map > i {
  position: relative;
  width: clamp(18px, 2vw, 42px);
  height: 1px;
  overflow: hidden;
  background: rgba(114, 245, 178, 0.18);
}

.impact-flow-map > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #57d7ff;
  transform: translateX(-100%);
}

.venue-impact-model.is-visible .impact-flow-map > i::after {
  animation: impactSignal 1.7s linear infinite;
}

.impact-flow p,
.impact-production p {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.impact-bar-list {
  display: grid;
  gap: 26px;
  margin-top: 52px;
}

.impact-bar-list > div {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
}

.impact-bar-list span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.impact-bar-list b {
  font-size: 0.8rem;
}

.impact-bar-list i {
  grid-column: 1 / -1;
  display: block;
  width: 0;
  height: 8px;
  background: linear-gradient(90deg, #57d7ff, #72f5b2);
  border-radius: 1px;
  box-shadow: 0 0 20px rgba(87, 215, 255, 0.18);
}

.venue-impact-model.is-visible .impact-bar-list i {
  animation: impactBar 4.8s var(--delay) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.impact-clock {
  display: grid;
  grid-template-columns: 1fr 112px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 250px;
  text-align: center;
}

.impact-clock > div {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255, 127, 80, 0.42);
  border-radius: 50%;
}

.impact-clock > div::before,
.impact-clock > div::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(114, 245, 178, 0.38);
  border-radius: 50%;
  animation: impactSpin 8s linear infinite;
}

.impact-clock > div::after {
  inset: 24px;
  border-style: solid;
  border-color: rgba(87, 215, 255, 0.4);
  animation-direction: reverse;
  animation-duration: 4.5s;
}

.impact-clock > div i {
  position: absolute;
  width: 2px;
  height: 42px;
  background: #72f5b2;
  transform-origin: 50% 100%;
  transform: translateY(-21px);
}

.venue-impact-model.is-visible .impact-clock > div i {
  animation: impactHand 2.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

.impact-clock > div em {
  z-index: 2;
  color: var(--ink);
  background: #060908;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.impact-clock > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.35;
}

.impact-clock > span b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1rem;
}

.impact-clock-after b {
  color: #72f5b2 !important;
}

.impact-pulse-line {
  display: grid;
  grid-template-columns: repeat(11, auto);
  align-items: center;
  gap: 10px;
  padding: 20px clamp(24px, 4vw, 54px);
  color: var(--muted);
  background: rgba(114, 245, 178, 0.035);
  border-top: 1px solid rgba(114, 245, 178, 0.14);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.impact-pulse-line i {
  position: relative;
  min-width: 24px;
  height: 1px;
  overflow: hidden;
  background: rgba(114, 245, 178, 0.15);
}

.impact-pulse-line i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #72f5b2;
  transform: translateX(-100%);
  animation: impactSignal 2s linear infinite;
}

.venue-switcher {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin-bottom: 18px;
}

.venue-brand-button {
  height: 92px;
  padding: 10px 14px;
}

.venue-brand-button img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.venue-brand-button img[src$="zuhtu.png"] {
  width: auto;
  max-width: 82%;
  height: auto;
  max-height: 58px;
  transform: none;
}

.venue-button-wordmark,
.venue-story-wordmark {
  color: var(--ink);
  font-weight: 950;
  text-transform: uppercase;
}

.venue-button-wordmark {
  font-size: 0.86rem;
  letter-spacing: 0;
}

.venue-brand-button:hover .venue-button-wordmark,
.venue-brand-button.is-active .venue-button-wordmark {
  color: var(--venue-accent);
}

.venue-story-wordmark {
  margin: 40px 0;
  color: var(--venue-accent);
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  line-height: 0.9;
}

@keyframes previewReelFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes projectPreviewRail {
  0%, 16% { transform: translateX(0); opacity: 0; }
  32%, 74% { opacity: 1; }
  100% { transform: translateX(392%); opacity: 0; }
}

@keyframes prombtLogoFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes identityScreenFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes nightCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -15px; }
}

@keyframes brandFilmIn {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes filmStatus {
  0%, 100% { opacity: 0.35; transform: scale(0.65); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes identityGrowth {
  0%, 12% { transform: scaleX(0.08); opacity: 0.45; }
  64%, 84% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.08); opacity: 0.45; }
}

@keyframes impactNode {
  0%, 12% { opacity: 0.25; transform: scale(0.64); }
  28%, 72% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0.25; transform: scale(0.64); }
}

@keyframes impactSignal {
  to { transform: translateX(100%); }
}

@keyframes impactBar {
  0%, 10% { width: 0; opacity: 0.35; }
  34%, 78% { width: var(--impact); opacity: 1; }
  100% { width: 0; opacity: 0.35; }
}

@keyframes impactSpin {
  to { transform: rotate(360deg); }
}

@keyframes impactHand {
  0%, 12% { transform: translateY(-21px) rotate(-110deg); }
  58%, 88% { transform: translateY(-21px) rotate(190deg); }
  100% { transform: translateY(-21px) rotate(250deg); }
}

@media (max-width: 1080px) {
  .projects-overview > .panel-head,
  .impact-model-head {
    grid-template-columns: 1fr;
  }

  .project-preview {
    grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
  }

  .brand-film-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .night-loop-track {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    min-height: 760px;
  }

  .impact-model-grid {
    grid-template-columns: 1fr 1fr;
  }

  .impact-production {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(114, 245, 178, 0.15);
    border-left: 0 !important;
  }
}

@media (max-width: 780px) {
  .projects-overview > .panel-head {
    margin-bottom: 24px;
  }

  .projects-overview > .panel-head h2 {
    font-size: clamp(2.15rem, 9.5vw, 3.5rem);
  }

  .project-preview {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }

  .project-preview-copy {
    min-height: 330px;
    padding: 28px 22px;
  }

  .project-preview-copy h3 {
    font-size: clamp(1.75rem, 7.7vw, 2.8rem);
  }

  .project-preview-action-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-mini-logo-strip {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .project-preview-media {
    min-height: 390px;
    border-top: 1px solid var(--line);
  }

  .project-preview-reels,
  .project-preview-identity {
    padding: 12px;
  }

  .project-preview-reels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-preview-cinema {
    padding: 12px;
  }

  .project-preview-cinema .prombt-logo-lockup {
    left: 20px;
    top: 20px;
    width: 142px;
  }

  .identity-social-screens {
    left: 50%;
    top: 48%;
  }

  .identity-social-screens img {
    width: clamp(72px, 19vw, 88px);
  }

  .night-loop-track {
    grid-template-columns: repeat(2, minmax(145px, 1fr));
    min-height: 920px;
    padding: 10px;
  }

  .night-loop-track article:nth-child(n) {
    transform: none;
  }

  .brand-film-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-film-card {
    height: 420px;
    min-height: 0;
  }

  .impact-model-head {
    padding: 28px 22px;
  }

  .impact-model-head h2 {
    font-size: clamp(2rem, 9vw, 3.45rem);
  }

  .impact-model-grid {
    grid-template-columns: 1fr;
  }

  .impact-model-grid > article + article,
  .impact-production {
    grid-column: auto;
    border-top: 1px solid rgba(114, 245, 178, 0.15);
    border-left: 0;
  }

  .impact-flow-map {
    grid-template-columns: repeat(7, auto);
    gap: 4px;
    overflow-x: auto;
  }

  .impact-flow-map div {
    width: 60px;
  }

  .impact-pulse-line {
    display: flex;
    overflow-x: auto;
  }

  .impact-pulse-line i {
    flex: 0 0 34px;
  }

  .venue-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* About event range and AIPOCALYPTO cyberpunk case */
.button-aipo {
  color: #070700;
  background: #ffe84a;
  border-color: rgba(255, 232, 74, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 232, 74, 0.35), 0 14px 42px rgba(255, 232, 74, 0.2);
}

.button-aipo:hover {
  background: #fff16a;
  border-color: #fff16a;
}

.about-events {
  margin-top: clamp(44px, 6vw, 82px);
  padding: clamp(24px, 3.8vw, 48px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(114, 245, 178, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(114, 245, 178, 0.18);
  border-radius: 8px;
}

.about-events .section-heading {
  margin-bottom: 32px;
}

.about-events-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 0.72fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.about-event-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr 0.74fr;
  grid-template-rows: repeat(2, minmax(170px, 1fr));
  gap: 10px;
  min-height: 560px;
}

.about-event-collage::before {
  content: "FIELD / EVENT / CREATIVE RANGE";
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 18px;
  padding: 8px 10px;
  color: #06120c;
  background: #72f5b2;
  border-radius: 3px;
  font-size: 0.56rem;
  font-weight: 950;
  text-transform: uppercase;
}

.about-event-collage figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  background: #060908;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  transform: translateY(8px) rotate(-0.7deg);
  animation: aboutEventFloat 6.4s ease-in-out infinite;
}

.about-event-collage figure:nth-child(3) {
  transform: translateY(-8px) rotate(1.1deg);
  animation-delay: -2s;
}

.about-event-collage figure:nth-child(4) {
  transform: translateY(14px) rotate(0.7deg);
  animation-delay: -3.7s;
}

.about-event-collage .event-card-large {
  grid-row: 1 / 3;
}

.about-event-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.04);
  transition: transform 520ms ease, filter 520ms ease;
}

.about-event-collage figure:hover img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.08);
}

.about-event-collage figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 9px;
  color: var(--ink);
  background: rgba(4, 7, 6, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.about-events-notes {
  display: grid;
  gap: 12px;
}

.about-events-notes article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 14px;
  padding: 20px;
  background: rgba(5, 9, 8, 0.62);
  border: 1px solid rgba(114, 245, 178, 0.16);
  border-radius: 7px;
}

.about-events-notes span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #06120c;
  background: #72f5b2;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 950;
}

.about-events-notes h3 {
  margin: 0 0 8px;
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  line-height: 1.15;
}

.about-events-notes p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.58;
}

.project-preview-aipocalypto {
  --preview-accent: #ffe84a;
  --preview-accent-rgb: 255, 232, 74;
  background:
    linear-gradient(135deg, rgba(255, 232, 74, 0.16), transparent 38%),
    #080807;
  border-color: rgba(255, 232, 74, 0.34);
}

.project-preview-aipocalypto .project-preview-meta span {
  background: #ffe84a;
}

.aipo-preview-hero,
.aipo-preview-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aipo-preview-media {
  position: relative;
  background: #090907;
}

.aipo-preview-hero {
  opacity: 0.62;
  filter: saturate(1.08) contrast(1.12);
}

.aipo-preview-media video {
  z-index: 1;
  width: 42%;
  height: 72%;
  inset: auto 8% 10% auto;
  border: 1px solid rgba(255, 232, 74, 0.42);
  border-radius: 7px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42), 0 0 34px rgba(255, 232, 74, 0.12);
  animation: aipoPreviewFloat 5.8s ease-in-out infinite;
}

.aipo-preview-logo {
  position: absolute;
  z-index: 2;
  left: 32px;
  top: 32px;
  width: min(290px, 48%);
  filter: drop-shadow(0 0 22px rgba(255, 232, 74, 0.35));
}

.aipo-preview-hud {
  position: absolute;
  z-index: 3;
  left: 32px;
  right: 32px;
  bottom: 28px;
  display: grid;
  gap: 8px;
  max-width: 420px;
  color: #ffe84a;
  text-transform: uppercase;
  font-weight: 950;
}

.aipo-preview-hud span {
  justify-self: start;
  padding: 6px 9px;
  color: #090907;
  background: #ffe84a;
  border-radius: 3px;
  font-size: 0.55rem;
}

.aipo-preview-hud strong {
  font-size: clamp(1.35rem, 2.2vw, 2.35rem);
  line-height: 0.95;
}

.aipo-feature {
  min-height: 720px;
  border-color: rgba(255, 232, 74, 0.34);
  background: #090907;
}

.aipo-feature-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.08);
}

.aipo-feature-shade {
  background:
    linear-gradient(90deg, rgba(2, 2, 1, 0.98) 0%, rgba(5, 5, 2, 0.76) 44%, rgba(5, 5, 2, 0.2) 78%),
    repeating-linear-gradient(0deg, rgba(255, 232, 74, 0.08) 0 1px, transparent 1px 9px);
}

.aipo-feature-copy img {
  width: min(360px, 62vw);
  filter: drop-shadow(0 0 20px rgba(255, 232, 74, 0.32));
}

.aipo-feature-copy h3 {
  color: #fff7b0;
  text-shadow: 0 0 22px rgba(255, 232, 74, 0.14);
}

.aipo-feature-posts {
  position: absolute;
  z-index: 2;
  right: clamp(22px, 4vw, 64px);
  bottom: clamp(24px, 5vw, 78px);
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 130px));
  gap: 8px;
  pointer-events: none;
}

.aipo-feature-posts img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(255, 232, 74, 0.36);
  border-radius: 5px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  transform: translateY(12px) rotate(-2deg);
  animation: aipoPreviewFloat 6.1s ease-in-out infinite;
}

.aipo-feature-posts img:nth-child(2) {
  transform: translateY(-16px) rotate(2deg);
  animation-delay: -2s;
}

.aipo-feature-posts img:nth-child(3) {
  transform: translateY(8px) rotate(1deg);
  animation-delay: -4s;
}

.aipo-system {
  border-color: rgba(255, 232, 74, 0.28);
}

.aipo-system article strong {
  color: #ffe84a;
}

.aipocalypto-detail {
  --aipo-yellow: #ffe84a;
  --aipo-amber: #ffb21a;
  --aipo-black: #070706;
  --aipo-panel: rgba(11, 11, 7, 0.84);
  --aipo-line: rgba(255, 232, 74, 0.28);
  position: relative;
  color: #fff6cf;
  background:
    repeating-linear-gradient(90deg, rgba(255, 232, 74, 0.035) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(255, 232, 74, 0.08), transparent 220px),
    #050504;
  border: 1px solid var(--aipo-line);
  border-radius: 8px;
  overflow: hidden;
}

.aipo-toolbar {
  color: var(--aipo-yellow);
  border-color: var(--aipo-line);
  background: rgba(7, 7, 5, 0.82);
}

.aipo-hero-detail {
  position: relative;
  min-height: min(820px, calc(100vh - 90px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.48fr);
  gap: clamp(18px, 4vw, 52px);
  align-items: end;
  padding: clamp(28px, 5vw, 70px);
  overflow: hidden;
  isolation: isolate;
}

.aipo-hero-detail::before,
.aipo-hero-detail::after,
.aipocalypto-detail::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.aipo-hero-detail::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 5, 4, 0.94) 0%, rgba(5, 5, 4, 0.74) 44%, rgba(5, 5, 4, 0.12) 86%),
    linear-gradient(180deg, rgba(5, 5, 4, 0.04), rgba(5, 5, 4, 0.94));
}

.aipo-hero-detail::after {
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(255, 232, 74, 0.055) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: aipoScan 7s linear infinite;
}

.aipo-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.12) contrast(1.1);
}

.aipo-hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(255, 232, 74, 0.13) 31.2% 31.8%, transparent 32% 100%),
    linear-gradient(0deg, transparent 0 61%, rgba(255, 232, 74, 0.09) 61.2% 61.7%, transparent 62% 100%);
  opacity: 0.55;
  animation: aipoGlitchFrame 5.5s steps(1) infinite;
}

.aipo-hero-content,
.aipo-hero-terminal {
  position: relative;
  z-index: 3;
}

.aipo-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--aipo-yellow);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-status-line span,
.aipo-status-line strong {
  padding: 8px 10px;
  background: rgba(7, 7, 5, 0.72);
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
}

.aipo-logo-lockup {
  width: min(420px, 78vw);
  margin-bottom: clamp(20px, 4vw, 42px);
  filter: drop-shadow(0 0 24px rgba(255, 232, 74, 0.46));
}

.aipo-hero-content h2 {
  max-width: 1010px;
  margin: 0;
  font-size: clamp(2.6rem, 6.5vw, 7.8rem);
  line-height: 0.88;
  color: #fff3a3;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255, 232, 74, 0.16);
}

.aipo-hero-content h2::before {
  content: attr(data-glitch);
  display: block;
  margin-bottom: 12px;
  color: var(--aipo-yellow);
  font-size: clamp(0.88rem, 1.1vw, 1.2rem);
  line-height: 1;
  animation: aipoTextGlitch 4.6s steps(1) infinite;
}

.aipo-hero-content p {
  max-width: 780px;
  margin: 22px 0 0;
  color: rgba(255, 246, 207, 0.78);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.68;
}

.aipo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.aipo-hero-terminal {
  display: grid;
  gap: 10px;
  align-self: center;
}

.aipo-hero-terminal article {
  position: relative;
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(255, 232, 74, 0.1), transparent),
    rgba(7, 7, 5, 0.76);
  border: 1px solid var(--aipo-line);
  border-radius: 5px;
}

.aipo-hero-terminal span {
  color: var(--aipo-yellow);
  font-size: 0.65rem;
  font-weight: 950;
}

.aipo-hero-terminal strong {
  display: block;
  margin-top: 22px;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.aipo-hero-terminal p {
  margin: 8px 0 0;
  color: rgba(255, 246, 207, 0.68);
  font-size: 0.86rem;
  line-height: 1.48;
}

.aipocalypto-detail > section:not(.aipo-hero-detail) {
  padding: clamp(42px, 6.4vw, 92px) clamp(22px, 5vw, 70px);
  border-top: 1px solid rgba(255, 232, 74, 0.17);
}

.aipo-section-heading .kicker {
  color: var(--aipo-yellow);
}

.aipo-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--aipo-line);
  border-radius: 7px;
  overflow: hidden;
}

.aipo-signal-card {
  min-height: 300px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(255, 232, 74, 0.08), transparent),
    rgba(7, 7, 5, 0.7);
}

.aipo-signal-card + .aipo-signal-card {
  border-left: 1px solid var(--aipo-line);
}

.aipo-signal-card span {
  color: var(--aipo-yellow);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-signal-card strong {
  display: block;
  margin-top: 28px;
  color: #fff8bf;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.aipo-signal-meter {
  position: relative;
  height: 8px;
  margin: 30px 0 20px;
  overflow: hidden;
  background: rgba(255, 232, 74, 0.12);
}

.aipo-signal-meter i {
  display: block;
  height: 100%;
  width: var(--level);
  background: linear-gradient(90deg, var(--aipo-yellow), var(--aipo-amber));
  box-shadow: 0 0 24px rgba(255, 232, 74, 0.42);
  transform-origin: left;
  animation: aipoMeter 3.7s ease-in-out infinite;
}

.aipo-signal-card p {
  margin: 0;
  color: rgba(255, 246, 207, 0.7);
  font-size: 0.9rem;
  line-height: 1.58;
}

.aipo-media-lab {
  display: grid;
  grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

.aipo-media-copy h2,
.aipo-deck-copy h2,
.aipo-card-copy h2 {
  margin: 14px 0 16px;
  font-size: clamp(2.1rem, 4.4vw, 5rem);
  line-height: 0.96;
}

.aipo-media-copy p,
.aipo-deck-copy p,
.aipo-card-copy p {
  color: rgba(255, 246, 207, 0.68);
  line-height: 1.66;
}

.aipo-loop-console {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.86fr 0.86fr;
  grid-template-rows: 1fr 0.78fr;
  gap: 8px;
  min-height: 560px;
}

.aipo-loop-console video,
.aipo-loop-console img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border: 1px solid var(--aipo-line);
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.aipo-loop-console video:first-child {
  grid-row: 1 / 3;
}

.aipo-loop-console video:nth-child(2) {
  grid-column: 2 / 4;
}

.aipo-loop-console::after,
.aipo-store-hero::after,
.aipo-ui-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 232, 74, 0.06) 0 1px, transparent 1px 9px);
  opacity: 0.3;
}

.aipo-storefront {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 14px;
}

.aipo-store-hero,
.aipo-store-assets article,
.aipo-ui-grid figure {
  position: relative;
  overflow: hidden;
  background: rgba(7, 7, 5, 0.72);
  border: 1px solid var(--aipo-line);
  border-radius: 7px;
}

.aipo-store-hero {
  min-height: 470px;
}

.aipo-store-hero > img:first-child,
.aipo-store-assets img,
.aipo-ui-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aipo-store-logo {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 4vw, 54px);
  top: clamp(24px, 4vw, 58px);
  width: min(360px, 52%);
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 24px rgba(255, 232, 74, 0.45));
}

.aipo-store-hero span,
.aipo-store-assets strong,
.aipo-deck-stack figcaption,
.aipo-ui-grid figcaption {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  color: #090907;
  background: var(--aipo-yellow);
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-store-assets {
  display: grid;
  gap: 14px;
}

.aipo-store-assets article {
  min-height: 146px;
}

.aipo-ui-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 14px;
}

.aipo-ui-grid figure {
  min-height: 500px;
  margin: 0;
}

.aipo-ui-grid figcaption {
  right: 14px;
  display: grid;
  gap: 4px;
  color: #090907;
}

.aipo-ui-grid figcaption strong,
.aipo-ui-grid figcaption span {
  font-size: inherit;
}

.aipo-deck-system {
  display: grid;
  grid-template-columns: minmax(280px, 0.44fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  perspective: 1600px;
}

.aipo-deck-stack {
  position: relative;
  min-height: 560px;
  transform-style: preserve-3d;
}

.aipo-deck-stack figure {
  position: absolute;
  inset: 8% 6% auto auto;
  width: min(520px, 68%);
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  background: #0a0906;
  border: 1px solid var(--aipo-line);
  border-radius: 7px;
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.5), 0 0 34px rgba(255, 232, 74, 0.08);
  transform: translate3d(0, 0, 0) rotateY(-14deg) rotateX(5deg);
  animation: aipoDeckFloat 6s ease-in-out infinite;
}

.aipo-deck-stack figure:nth-child(2) {
  inset: 24% auto auto 4%;
  transform: translate3d(0, 0, 90px) rotateY(11deg) rotateX(4deg);
  animation-delay: -1.5s;
}

.aipo-deck-stack figure:nth-child(3) {
  inset: auto 16% 7% auto;
  transform: translate3d(0, 0, 150px) rotateY(-8deg) rotateX(6deg);
  animation-delay: -3s;
}

.aipo-deck-stack figure:nth-child(4) {
  inset: 13% auto auto 30%;
  width: min(300px, 34%);
  aspect-ratio: 3 / 4;
  transform: translate3d(0, 0, 220px) rotateY(14deg) rotateX(7deg);
  animation-delay: -4.2s;
}

.aipo-deck-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aipo-social-grid {
  background:
    linear-gradient(90deg, rgba(255, 232, 74, 0.06), transparent 38%),
    rgba(7, 7, 5, 0.52);
}

.aipo-post-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 10px;
}

.aipo-post-wall img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--aipo-line);
  border-radius: 6px;
  transform: translateY(10px);
  animation: aipoPostRise 5s ease-in-out infinite;
}

.aipo-post-wall img:nth-child(even) {
  transform: translateY(-12px);
  animation-delay: -2.4s;
}

.aipo-card-identity {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.aipo-card-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.aipo-card-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--aipo-line);
  border-radius: 7px;
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.34);
  transform: translateY(12px) rotate(-1deg);
  animation: aipoCardFloat 6.8s ease-in-out infinite;
}

.aipo-card-strip img:nth-child(2),
.aipo-card-strip img:nth-child(4) {
  transform: translateY(-10px) rotate(1deg);
  animation-delay: -3s;
}

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

@keyframes aipoPreviewFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes aipoScan {
  to { transform: translateY(70px); }
}

@keyframes aipoGlitchFrame {
  0%, 91%, 100% { clip-path: inset(0); transform: translateX(0); }
  92% { clip-path: inset(8% 0 72% 0); transform: translateX(-8px); }
  93% { clip-path: inset(58% 0 18% 0); transform: translateX(9px); }
  94% { clip-path: inset(24% 0 42% 0); transform: translateX(-4px); }
}

@keyframes aipoTextGlitch {
  0%, 88%, 100% { text-shadow: 0 0 20px rgba(255, 232, 74, 0.38); transform: translateX(0); }
  89% { text-shadow: -3px 0 #00e5ff, 3px 0 #ff3f3f; transform: translateX(4px); }
  90% { text-shadow: 2px 0 #00e5ff, -2px 0 #ff3f3f; transform: translateX(-3px); }
}

@keyframes aipoMeter {
  0%, 12% { transform: scaleX(0.12); opacity: 0.46; }
  54%, 82% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.12); opacity: 0.46; }
}

@keyframes aipoDeckFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes aipoPostRise {
  0%, 100% { translate: 0 0; filter: brightness(0.9); }
  50% { translate: 0 -10px; filter: brightness(1.08); }
}

@keyframes aipoCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

@media (max-width: 1080px) {
  .about-events-layout,
  .aipo-hero-detail,
  .aipo-media-lab,
  .aipo-storefront,
  .aipo-deck-system,
  .aipo-card-identity {
    grid-template-columns: 1fr;
  }

  .aipo-signal-grid {
    grid-template-columns: 1fr;
  }

  .aipo-signal-card + .aipo-signal-card {
    border-top: 1px solid var(--aipo-line);
    border-left: 0;
  }

  .aipo-post-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .about-events {
    padding: 22px 16px;
  }

  .about-event-collage {
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
  }

  .about-events-notes article {
    grid-template-columns: 1fr;
  }

  .about-events-notes span {
    margin-bottom: 16px;
  }

  .project-preview-aipocalypto .project-preview-media {
    min-height: 420px;
  }

  .aipo-preview-media video {
    width: 54%;
    height: 62%;
    right: 5%;
  }

  .aipo-preview-logo {
    left: 20px;
    top: 24px;
    width: min(250px, 68%);
  }

  .aipo-feature-posts {
    display: none;
  }

  .aipo-hero-detail {
    min-height: auto;
    padding: 28px 18px 40px;
  }

  .aipo-hero-content h2 {
    font-size: clamp(2.25rem, 12vw, 4.8rem);
  }

  .aipo-loop-console {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: auto;
  }

  .aipo-loop-console video,
  .aipo-loop-console img {
    min-height: 280px;
  }

  .aipo-loop-console video:first-child,
  .aipo-loop-console video:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }

  .aipo-store-hero,
  .aipo-ui-grid figure {
    min-height: 330px;
  }

  .aipo-ui-grid,
  .aipo-card-strip,
  .aipo-post-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aipo-deck-stack {
    min-height: 500px;
  }

  .aipo-deck-stack figure {
    width: 78%;
  }
}

/* AIPOCALYPTO expanded cyberpunk case study */
.aipocalypto-detail {
  --aipo-yellow: #ffea33;
  --aipo-hot: #ffb000;
  --aipo-red: #ff3d26;
  --aipo-cyan: #38e8ff;
  --aipo-black: #030302;
  --aipo-charcoal: #0b0b08;
  --aipo-panel: rgba(12, 12, 8, 0.86);
  --aipo-panel-strong: rgba(18, 17, 9, 0.94);
  --aipo-line: rgba(255, 234, 51, 0.34);
  --aipo-soft: rgba(255, 234, 51, 0.12);
  position: relative;
  isolation: isolate;
  color: #fff7c7;
  background:
    repeating-linear-gradient(90deg, rgba(255, 234, 51, 0.045) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255, 234, 51, 0.035) 0 1px, transparent 1px 62px),
    radial-gradient(circle at 74% 0%, rgba(255, 234, 51, 0.16), transparent 34%),
    #030302;
  border: 1px solid var(--aipo-line);
  border-radius: 4px;
  overflow: hidden;
}

.aipocalypto-detail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 234, 51, 0.08) 18.2% 18.5%, transparent 18.8% 100%),
    repeating-linear-gradient(0deg, rgba(255, 234, 51, 0.05) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
  opacity: 0.45;
  animation: aipoGlobalScan 8s linear infinite;
}

.aipocalypto-detail > * {
  position: relative;
  z-index: 2;
}

.aipo-toolbar {
  position: sticky;
  top: 0;
  z-index: 12;
  color: var(--aipo-yellow);
  background:
    linear-gradient(90deg, rgba(255, 234, 51, 0.1), rgba(3, 3, 2, 0.94)),
    #050504;
  border-color: var(--aipo-line);
  border-radius: 0;
}

.aipo-toolbar .button {
  color: var(--aipo-yellow);
  border-color: var(--aipo-line);
}

.aipo-subnav {
  position: sticky;
  top: 62px;
  z-index: 11;
  display: flex;
  gap: 6px;
  padding: 10px clamp(16px, 3vw, 42px);
  overflow-x: auto;
  background: rgba(3, 3, 2, 0.9);
  border-bottom: 1px solid var(--aipo-line);
  backdrop-filter: blur(14px);
}

.aipo-subnav a {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: rgba(255, 247, 199, 0.78);
  background: rgba(255, 234, 51, 0.055);
  border: 1px solid rgba(255, 234, 51, 0.18);
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-subnav a:hover {
  color: #070702;
  background: var(--aipo-yellow);
}

.aipocalypto-detail .kicker {
  color: var(--aipo-yellow);
  letter-spacing: 0.08em;
}

.aipocalypto-detail h2 {
  max-width: 920px;
  margin: 10px 0 0;
  color: #fff2a8;
  font-size: clamp(1.45rem, 2.65vw, 2.95rem);
  line-height: 1.06;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgba(255, 234, 51, 0.12);
}

.aipocalypto-detail p {
  color: rgba(255, 247, 199, 0.72);
}

.aipocalypto-detail > section:not(.aipo-hero-detail) {
  padding: clamp(46px, 7vw, 104px) clamp(18px, 4vw, 62px);
  border-top: 1px solid rgba(255, 234, 51, 0.2);
}

.aipo-section-copy {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(300px, 0.42fr);
  gap: clamp(18px, 4vw, 58px);
  align-items: end;
  margin-bottom: clamp(26px, 4vw, 48px);
}

.aipo-section-copy p {
  max-width: 560px;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.7;
}

.aipo-hero-detail {
  min-height: min(840px, calc(100vh - 58px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(20px, 4vw, 54px);
  align-items: center;
  padding: clamp(30px, 5vw, 70px) clamp(18px, 5vw, 72px);
  background:
    linear-gradient(90deg, rgba(3, 3, 2, 0.98) 0%, rgba(3, 3, 2, 0.78) 42%, rgba(3, 3, 2, 0.28) 100%),
    #030302;
  overflow: hidden;
}

.aipo-hero-detail::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 2;
  pointer-events: none;
  background: none;
  border: 1px solid rgba(255, 234, 51, 0.22);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}

.aipo-hero-detail::after {
  content: "AIPOCALYPTO // OPS ONLINE";
  position: absolute;
  inset: auto clamp(18px, 4vw, 62px) auto auto;
  right: clamp(18px, 4vw, 62px);
  top: clamp(34px, 7vw, 92px);
  z-index: 3;
  width: auto;
  height: auto;
  color: #070702;
  background: var(--aipo-yellow);
  padding: 8px 11px;
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
  mix-blend-mode: normal;
  opacity: 1;
  animation: aipoTextJitter 4s steps(1) infinite;
}

.aipo-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.16) contrast(1.1) brightness(0.82);
}

.aipo-hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 24%, rgba(255, 234, 51, 0.13) 24.2% 24.6%, transparent 25% 68%, rgba(56, 232, 255, 0.08) 68.2% 68.5%, transparent 69%),
    repeating-linear-gradient(0deg, rgba(255, 234, 51, 0.04) 0 1px, transparent 1px 7px);
  animation: aipoNoiseCut 5.8s steps(1) infinite;
}

.aipo-hero-content,
.aipo-hero-terminal {
  position: relative;
  z-index: 4;
}

.aipo-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: clamp(16px, 3vw, 30px);
  color: var(--aipo-yellow);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-status-line span,
.aipo-status-line strong,
.aipo-status-line em {
  padding: 7px 9px;
  background: rgba(3, 3, 2, 0.78);
  border: 1px solid var(--aipo-line);
  border-radius: 2px;
  font-style: normal;
}

.aipo-status-line em {
  color: #070702;
  background: var(--aipo-yellow);
}

.aipo-logo-lockup {
  width: min(390px, 74vw);
  margin: 0 0 clamp(18px, 3vw, 34px);
  filter: drop-shadow(0 0 30px rgba(255, 234, 51, 0.44));
}

.aipo-hero-content h2 {
  max-width: 680px;
  margin: 0;
  color: #fff1a1;
  font-size: clamp(1.9rem, 3.05vw, 3.45rem);
  line-height: 1.01;
  text-transform: uppercase;
}

.aipo-hero-content h2::before {
  content: attr(data-glitch);
  display: block;
  margin-bottom: 12px;
  color: var(--aipo-yellow);
  font-size: clamp(0.76rem, 1vw, 1.05rem);
  line-height: 1;
  animation: aipoTextJitter 4.2s steps(1) infinite;
}

.aipo-hero-content p {
  max-width: 760px;
  margin: 20px 0 0;
  color: rgba(255, 247, 199, 0.74);
  font-size: 0.98rem;
  line-height: 1.72;
}

.aipo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.button-aipo {
  color: #050502;
  background: var(--aipo-yellow);
  border-color: var(--aipo-yellow);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 234, 51, 0.3), 0 16px 46px rgba(255, 234, 51, 0.2);
}

.aipo-hero-terminal {
  display: grid;
  gap: 8px;
  align-self: center;
}

.aipo-hero-terminal article {
  position: relative;
  padding: 16px 16px 17px;
  background:
    linear-gradient(90deg, rgba(255, 234, 51, 0.16), transparent),
    var(--aipo-panel);
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.aipo-hero-terminal article::after,
.aipo-war-grid article::after,
.aipo-intel-grid article::after,
.aipo-delivery-grid article::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aipo-yellow), transparent);
  animation: aipoPanelTrace 3.8s ease-in-out infinite;
}

.aipo-hero-terminal span,
.aipo-war-grid span,
.aipo-intel-grid span,
.aipo-role-table span,
.aipo-timeline-card span {
  color: var(--aipo-yellow);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-hero-terminal strong {
  display: block;
  margin-top: 16px;
  color: #fff5b8;
  font-size: 1rem;
  text-transform: uppercase;
}

.aipo-hero-terminal p {
  margin: 7px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.aipo-war-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(300px, 1.12fr) minmax(260px, 0.86fr);
  gap: 12px;
}

.aipo-war-grid article,
.aipo-intel-grid article,
.aipo-delivery-grid article {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background:
    linear-gradient(145deg, rgba(255, 234, 51, 0.09), transparent 44%),
    var(--aipo-panel);
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
}

.aipo-radar-card {
  min-height: 390px;
  padding: 24px;
  display: grid;
  align-content: space-between;
}

.aipo-radar {
  position: relative;
  width: min(240px, 100%);
  aspect-ratio: 1;
  margin: 22px auto;
  border: 1px solid rgba(255, 234, 51, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 234, 51, 0.22) 0 3px, transparent 4px),
    repeating-radial-gradient(circle, transparent 0 34px, rgba(255, 234, 51, 0.18) 35px 36px);
}

.aipo-radar i,
.aipo-radar b,
.aipo-radar em {
  position: absolute;
  display: block;
}

.aipo-radar i {
  inset: 50% 50% auto 50%;
  width: 48%;
  height: 2px;
  transform-origin: left;
  background: linear-gradient(90deg, var(--aipo-yellow), transparent);
  animation: aipoRadarSweep 3.4s linear infinite;
}

.aipo-radar b,
.aipo-radar em {
  width: 8px;
  height: 8px;
  background: var(--aipo-yellow);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 234, 51, 0.8);
  animation: aipoNodePulse 2.8s ease-in-out infinite;
}

.aipo-radar b { left: 66%; top: 28%; }
.aipo-radar em { left: 32%; top: 68%; animation-delay: -1.3s; }

.aipo-radar-card strong {
  color: var(--aipo-yellow);
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  line-height: 0.95;
}

.aipo-role-table {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.aipo-role-table div {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(140px, 1fr);
  gap: 8px 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 234, 51, 0.16);
}

.aipo-role-table b {
  color: #fff5b8;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.aipo-role-table i {
  display: block;
  height: 8px;
  overflow: hidden;
  background: rgba(255, 234, 51, 0.12);
}

.aipo-role-table i::after {
  content: "";
  display: block;
  width: var(--level);
  height: 100%;
  background: linear-gradient(90deg, var(--aipo-yellow), var(--aipo-hot));
  transform-origin: left;
  animation: aipoMeterWide 4.2s ease-in-out infinite;
}

.aipo-role-table small {
  grid-column: 2;
  color: rgba(255, 247, 199, 0.62);
  font-weight: 700;
}

.aipo-timeline-card {
  padding: 24px;
}

.aipo-timeline-card ol {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.aipo-timeline-card li {
  position: relative;
  padding: 0 0 0 26px;
}

.aipo-timeline-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--aipo-yellow);
  box-shadow: 0 0 18px rgba(255, 234, 51, 0.74);
}

.aipo-timeline-card b,
.aipo-timeline-card small {
  display: block;
}

.aipo-timeline-card b {
  color: #fff5b8;
  text-transform: uppercase;
}

.aipo-timeline-card small {
  margin-top: 4px;
  color: rgba(255, 247, 199, 0.62);
}

.aipo-intel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 0 !important;
}

.aipo-intel-grid article {
  min-height: 300px;
  padding: 22px;
}

.aipo-intel-grid strong {
  display: block;
  margin-top: 24px;
  color: #fff3aa;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 0.92;
}

.aipo-mini-chart,
.aipo-wave-chart,
.aipo-node-chart,
.aipo-stripe-chart {
  position: relative;
  height: 88px;
  margin: 22px 0 18px;
  border-bottom: 1px solid rgba(255, 234, 51, 0.2);
}

.aipo-mini-chart {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 7px;
}

.aipo-mini-chart i {
  display: block;
  height: var(--h);
  background: linear-gradient(180deg, var(--aipo-yellow), rgba(255, 176, 0, 0.32));
  animation: aipoBars 3.6s ease-in-out infinite;
}

.aipo-wave-chart i {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aipo-yellow), transparent);
  transform: skewY(-11deg);
  animation: aipoWave 3.3s ease-in-out infinite;
}

.aipo-wave-chart i:nth-child(2) { top: 46px; animation-delay: -1s; }
.aipo-wave-chart i:nth-child(3) { top: 64px; animation-delay: -2s; }

.aipo-node-chart i {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--aipo-yellow);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 234, 51, 0.72);
  animation: aipoNodePulse 2.5s ease-in-out infinite;
}

.aipo-node-chart i:nth-child(1) { left: 8%; top: 62%; }
.aipo-node-chart i:nth-child(2) { left: 34%; top: 32%; animation-delay: -0.6s; }
.aipo-node-chart i:nth-child(3) { left: 64%; top: 48%; animation-delay: -1.2s; }
.aipo-node-chart i:nth-child(4) { left: 86%; top: 18%; animation-delay: -1.8s; }

.aipo-stripe-chart {
  overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255, 234, 51, 0.08) 0 12px, transparent 12px 20px);
}

.aipo-stripe-chart i {
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 234, 51, 0.7), transparent);
  animation: aipoSweepX 2.8s linear infinite;
}

.aipo-media-lab,
.aipo-storefront,
.aipo-deck-system,
.aipo-ui-system,
.aipo-card-identity,
.aipo-delivery-board,
.aipo-post-system {
  background:
    linear-gradient(135deg, rgba(255, 234, 51, 0.08), transparent 42%),
    rgba(3, 3, 2, 0.55);
}

.aipo-loop-console {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.72fr) minmax(220px, 0.72fr);
  grid-auto-rows: minmax(230px, 28vw);
  gap: 10px;
  min-height: 0;
}

.aipo-loop-console article {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #050502;
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
}

.aipo-loop-console article.is-main {
  grid-row: span 2;
}

.aipo-loop-console video,
.aipo-loop-console img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aipo-loop-console span,
.aipo-store-hero span,
.aipo-store-assets strong,
.aipo-ui-grid figcaption,
.aipo-card-strip figcaption {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  padding: 7px 9px;
  color: #070702;
  background: var(--aipo-yellow);
  border-radius: 2px;
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-storefront {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.56fr);
  gap: 14px;
}

.aipo-store-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background: var(--aipo-panel);
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
}

.aipo-store-copy h2 {
  font-size: clamp(1.35rem, 2.2vw, 2.35rem);
}

.aipo-store-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
}

.aipo-store-hero > img:first-child,
.aipo-store-assets img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aipo-store-logo {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 4vw, 58px);
  top: clamp(24px, 4vw, 58px);
  width: min(370px, 56%);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(255, 234, 51, 0.5));
}

.aipo-store-assets {
  display: grid;
  gap: 10px;
}

.aipo-store-assets article {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid rgba(255, 234, 51, 0.24);
  border-radius: 3px;
}

.aipo-post-stage {
  display: grid;
  grid-template-columns: minmax(340px, 0.54fr) minmax(0, 1fr);
  gap: 16px;
}

.aipo-post-preview {
  position: sticky;
  top: 122px;
  align-self: start;
  display: grid;
  grid-template-rows: minmax(380px, 58vh) auto;
  margin: 0;
  overflow: hidden;
  background: var(--aipo-panel-strong);
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
}

.aipo-post-preview img {
  width: 100%;
  height: 100%;
  padding: 16px;
  object-fit: contain;
  background:
    repeating-linear-gradient(45deg, rgba(255, 234, 51, 0.06) 0 8px, transparent 8px 16px),
    #050502;
}

.aipo-post-preview figcaption {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-top: 1px solid var(--aipo-line);
}

.aipo-post-preview span,
.aipo-deck-page span {
  color: var(--aipo-yellow);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-post-preview strong,
.aipo-deck-page strong {
  color: #fff3aa;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
}

.aipo-post-preview p,
.aipo-deck-page p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.58;
}

.aipo-post-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.aipo-post-picker button {
  position: relative;
  min-width: 0;
  min-height: 220px;
  padding: 10px;
  overflow: hidden;
  background: rgba(255, 234, 51, 0.055);
  border: 1px solid rgba(255, 234, 51, 0.22);
  border-radius: 3px;
  cursor: pointer;
}

.aipo-post-picker button.is-active {
  border-color: var(--aipo-yellow);
  box-shadow: inset 0 0 0 1px var(--aipo-yellow), 0 0 30px rgba(255, 234, 51, 0.12);
}

.aipo-post-picker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050502;
}

.aipo-post-picker span {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #070702;
  background: var(--aipo-yellow);
  font-size: 0.68rem;
  font-weight: 950;
}

.aipo-deck-system {
  display: grid;
  grid-template-columns: minmax(290px, 0.38fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  perspective: 1800px;
}

.aipo-deck-copy h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.75rem);
}

.aipo-deck-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 24px;
}

.aipo-deck-controls button,
.aipo-deck-controls strong {
  min-height: 44px;
  padding: 0 13px;
  color: var(--aipo-yellow);
  background: rgba(255, 234, 51, 0.06);
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.aipo-deck-controls button:hover {
  color: #070702;
  background: var(--aipo-yellow);
}

.aipo-deck-stage {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
}

.aipo-deck-stage::before,
.aipo-deck-stage::after {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 234, 51, 0.14);
  transform: translate(26px, -26px) rotateY(-14deg) rotateX(6deg);
}

.aipo-deck-stage::after {
  width: 66%;
  transform: translate(-34px, 34px) rotateY(-14deg) rotateX(6deg);
}

.aipo-deck-page {
  position: relative;
  z-index: 2;
  width: min(860px, 92%);
  margin: 0;
  overflow: hidden;
  background: #050502;
  border: 1px solid var(--aipo-line);
  border-radius: 4px;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.54), 0 0 44px rgba(255, 234, 51, 0.12);
  transform: rotateY(-10deg) rotateX(5deg);
  transform-style: preserve-3d;
}

.aipo-deck-page.is-flipping {
  animation: aipoDeckFlip 520ms ease both;
}

.aipo-deck-page img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #050502;
}

.aipo-deck-page figcaption {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-top: 1px solid var(--aipo-line);
}

.aipo-ui-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 12px;
}

.aipo-ui-grid figure {
  position: relative;
  min-height: 540px;
  margin: 0;
  overflow: hidden;
  background: #050502;
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
}

.aipo-ui-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050502;
}

.aipo-ui-grid figcaption {
  right: 12px;
  display: grid;
  gap: 4px;
}

.aipo-card-identity {
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.aipo-card-copy h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.85rem);
}

.aipo-card-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.aipo-card-strip figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #050502;
  border: 1px solid var(--aipo-line);
  border-radius: 3px;
  transform: translateY(10px);
  animation: aipoCardFloat 6.8s ease-in-out infinite;
}

.aipo-card-strip figure:nth-child(even) {
  transform: translateY(-10px);
  animation-delay: -2.7s;
}

.aipo-card-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.aipo-delivery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.aipo-delivery-grid article {
  min-height: 250px;
  padding: 22px;
}

.aipo-delivery-grid span {
  color: #070702;
  background: var(--aipo-yellow);
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 0.72rem;
  font-weight: 950;
}

.aipo-delivery-grid h3 {
  margin: 46px 0 12px;
  color: #fff3aa;
  font-size: clamp(1.05rem, 1.45vw, 1.4rem);
  line-height: 1.12;
}

.aipo-delivery-grid p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
}

@keyframes aipoGlobalScan {
  to { transform: translateY(72px); }
}

@keyframes aipoNoiseCut {
  0%, 88%, 100% { clip-path: inset(0); transform: translateX(0); }
  89% { clip-path: inset(12% 0 64% 0); transform: translateX(-10px); }
  90% { clip-path: inset(48% 0 22% 0); transform: translateX(8px); }
  91% { clip-path: inset(28% 0 44% 0); transform: translateX(-4px); }
}

@keyframes aipoTextJitter {
  0%, 92%, 100% { transform: translateX(0); text-shadow: 0 0 20px rgba(255, 234, 51, 0.34); }
  93% { transform: translateX(3px); text-shadow: -2px 0 var(--aipo-cyan), 2px 0 var(--aipo-red); }
  94% { transform: translateX(-2px); text-shadow: 2px 0 var(--aipo-cyan), -2px 0 var(--aipo-red); }
}

@keyframes aipoPanelTrace {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  45%, 65% { opacity: 1; }
  90% { transform: translateX(100%); opacity: 0; }
}

@keyframes aipoRadarSweep {
  to { transform: rotate(360deg); }
}

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

@keyframes aipoMeterWide {
  0%, 14% { transform: scaleX(0.08); opacity: 0.42; }
  52%, 82% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.08); opacity: 0.42; }
}

@keyframes aipoBars {
  0%, 100% { transform: scaleY(0.42); opacity: 0.56; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes aipoWave {
  0%, 100% { transform: translateX(-16px) skewY(-11deg); opacity: 0.3; }
  50% { transform: translateX(16px) skewY(11deg); opacity: 1; }
}

@keyframes aipoSweepX {
  to { transform: translateX(240%); }
}

@keyframes aipoDeckFlip {
  0% { transform: rotateY(-10deg) rotateX(5deg) translateY(0); filter: brightness(1); }
  48% { transform: rotateY(-10deg) rotateX(28deg) translateY(-44px); filter: brightness(1.35); }
  100% { transform: rotateY(-10deg) rotateX(5deg) translateY(0); filter: brightness(1); }
}

@media (max-width: 1180px) {
  .aipo-section-copy,
  .aipo-hero-detail,
  .aipo-war-grid,
  .aipo-media-lab,
  .aipo-storefront,
  .aipo-deck-system,
  .aipo-card-identity,
  .aipo-post-stage {
    grid-template-columns: 1fr;
  }

  .aipo-intel-grid,
  .aipo-delivery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aipo-post-preview {
    position: relative;
    top: auto;
  }
}

@media (max-width: 780px) {
  .aipo-subnav {
    top: 54px;
  }

  .aipocalypto-detail h2 {
    font-size: clamp(1.5rem, 8.5vw, 2.55rem);
  }

  .aipo-hero-detail {
    min-height: auto;
    padding: 34px 18px 46px;
  }

  .aipo-hero-content h2 {
    font-size: clamp(2rem, 11vw, 3.55rem);
  }

  .aipo-intel-grid,
  .aipo-delivery-grid,
  .aipo-post-picker,
  .aipo-card-strip,
  .aipo-ui-grid {
    grid-template-columns: 1fr;
  }

  .aipo-loop-console {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
  }

  .aipo-loop-console article.is-main {
    grid-row: auto;
  }

  .aipo-store-hero,
  .aipo-ui-grid figure {
    min-height: 330px;
  }

  .aipo-post-preview {
    grid-template-rows: minmax(330px, 56vh) auto;
  }

  .aipo-post-picker button {
    min-height: 260px;
  }

  .aipo-deck-stage {
    min-height: 500px;
  }

  .aipo-deck-page {
    width: 96%;
    transform: none;
  }

  .aipo-deck-stage::before,
  .aipo-deck-stage::after {
    display: none;
  }
}

/* UX scale and AIPOCALYPTO repair pass */
h1 {
  font-size: clamp(2.15rem, 4.45vw, 4.75rem);
  line-height: 1.06;
}

.panel-head h2,
.home-featured h2 {
  font-size: clamp(1.9rem, 3.25vw, 3.45rem);
  line-height: 1.08;
}

.sector-feature-copy h3,
.projects-overview > .panel-head h2,
.home-project-teaser h2,
.prombt-hero-copy h2,
.ilayda-hero-copy h2 {
  font-size: clamp(1.85rem, 3.1vw, 3.35rem);
  line-height: 1.08;
}

.project-system strong {
  font-size: clamp(1.65rem, 2.8vw, 3.15rem);
}

.prombt-hero {
  min-height: clamp(590px, 72vh, 760px);
}

.prombt-wordmark-large {
  font-size: clamp(2.5rem, 5.2vw, 5.8rem);
}

.project-preview-copy h3 {
  font-size: clamp(1.45rem, 2.1vw, 2.25rem);
  line-height: 1.1;
}

.aipocalypto-detail {
  --aipo-yellow: #ffe538;
  --aipo-line: rgba(255, 229, 56, 0.38);
}

.aipocalypto-detail h2 {
  max-width: 680px;
  font-size: clamp(1.35rem, 2.05vw, 2.28rem);
  line-height: 1.12;
}

.aipocalypto-detail > section:not(.aipo-hero-detail) {
  padding: clamp(42px, 5.4vw, 74px) clamp(18px, 4vw, 54px);
}

.aipo-hero-detail {
  min-height: clamp(610px, 76vh, 720px);
  grid-template-columns: minmax(0, 0.96fr) minmax(280px, 390px);
  gap: clamp(18px, 3vw, 40px);
  align-items: end;
  padding: clamp(34px, 4.6vw, 58px) clamp(18px, 4.2vw, 58px);
}

.aipo-hero-bg {
  object-position: center center;
}

.aipo-hero-noise {
  opacity: 0.82;
}

.aipo-hero-content {
  max-width: 720px;
}

.aipo-logo-lockup {
  display: block;
  width: min(310px, 46vw);
  margin-bottom: clamp(14px, 2vw, 22px);
}

.aipo-hero-content h2 {
  max-width: 610px;
  font-size: clamp(1.95rem, 3.05vw, 3.05rem);
  line-height: 1.08;
}

.aipo-hero-content p {
  max-width: 650px;
  margin-top: 16px;
  font-size: 0.92rem;
  line-height: 1.62;
}

.aipo-hero-terminal {
  align-self: end;
  max-width: 390px;
  margin-left: auto;
}

.aipo-hero-terminal article {
  padding: 13px 14px 14px;
}

.aipo-hero-terminal strong {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.12;
}

.aipo-hero-terminal p {
  font-size: 0.78rem;
}

.aipo-section-copy {
  grid-template-columns: minmax(0, 0.52fr) minmax(280px, 0.48fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: end;
  margin-bottom: clamp(20px, 3vw, 34px);
}

.aipo-section-copy .kicker {
  grid-column: 1 / -1;
}

.aipo-section-copy h2 {
  grid-column: 1;
  max-width: 640px;
  margin: 0;
}

.aipo-section-copy p {
  grid-column: 2;
  max-width: 540px;
  align-self: end;
  font-size: 0.9rem;
  line-height: 1.62;
}

.aipo-war-grid {
  grid-template-columns: minmax(230px, 0.78fr) minmax(320px, 1.16fr) minmax(240px, 0.82fr);
  gap: 10px;
}

.aipo-radar-card {
  min-height: 315px;
  padding: 20px;
}

.aipo-radar {
  width: min(176px, 82%);
  margin: 18px auto;
}

.aipo-radar-card strong {
  font-size: clamp(1.35rem, 2.05vw, 2.15rem);
  line-height: 1;
}

.aipo-role-table,
.aipo-timeline-card {
  padding: 20px;
}

.aipo-role-table div {
  grid-template-columns: minmax(120px, 0.35fr) minmax(140px, 1fr);
  padding: 9px 0;
}

.aipo-intel-grid {
  gap: 10px;
}

.aipo-intel-grid article {
  min-height: 235px;
  padding: 18px;
}

.aipo-intel-grid strong {
  margin-top: 16px;
  font-size: clamp(1.75rem, 2.8vw, 3.1rem);
  line-height: 1;
}

.aipo-mini-chart,
.aipo-wave-chart,
.aipo-node-chart,
.aipo-stripe-chart {
  height: 68px;
  margin: 18px 0 14px;
}

.aipo-media-lab,
.aipo-deck-system,
.aipo-card-identity {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
}

.aipo-loop-console {
  grid-template-columns: minmax(320px, 1.05fr) repeat(2, minmax(220px, 0.72fr));
  grid-auto-rows: minmax(178px, 19vw);
  gap: 10px;
}

.aipo-loop-console article.is-main {
  grid-row: span 2;
}

.aipo-loop-console video {
  object-fit: contain;
  background: #050502;
}

.aipo-loop-console img {
  object-fit: contain;
  padding: 12px;
  background: #050502;
}

.aipo-loop-console span {
  top: 12px;
  bottom: auto;
}

.aipo-hero-detail::after {
  top: clamp(28px, 4vw, 54px);
  right: clamp(24px, 5vw, 78px);
}

.aipo-storefront {
  grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.52fr);
  align-items: stretch;
}

.aipo-store-hero {
  min-height: clamp(340px, 42vw, 520px);
  background: #050502;
}

.aipo-store-hero > img:first-child,
.aipo-store-assets img,
.aipo-ui-grid img {
  object-fit: contain;
  object-position: center;
}

.aipo-store-hero > img:first-child {
  padding: 14px;
}

.aipo-store-logo {
  left: 50%;
  top: clamp(20px, 3vw, 44px);
  width: min(420px, 68%);
  transform: translateX(-50%);
}

.aipo-store-copy h2,
.aipo-deck-copy h2,
.aipo-card-copy h2 {
  font-size: clamp(1.35rem, 2.05vw, 2.28rem);
  line-height: 1.12;
}

.aipo-store-assets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aipo-store-assets article {
  min-height: 116px;
}

.aipo-post-stage {
  grid-template-columns: minmax(330px, 0.46fr) minmax(0, 1fr);
  gap: 14px;
}

.aipo-post-preview {
  grid-template-rows: auto auto;
}

.aipo-post-preview img {
  aspect-ratio: 16 / 11;
  height: auto;
  max-height: 520px;
  object-position: center;
}

.aipo-post-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aipo-post-picker button {
  min-height: 0;
  aspect-ratio: 16 / 11;
  padding: 9px;
}

.aipo-post-picker img {
  object-position: center;
}

.aipo-deck-system {
  align-items: start;
}

.aipo-deck-copy {
  max-width: 760px;
}

.aipo-deck-stage {
  min-height: clamp(390px, 45vw, 560px);
  align-items: start;
}

.aipo-deck-page {
  width: min(820px, 90%);
  transform: rotateY(-7deg) rotateX(4deg);
}

.aipo-deck-page img {
  display: block;
  object-position: center;
}

.aipo-ui-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aipo-ui-grid figure {
  min-height: clamp(300px, 32vw, 430px);
}

.aipo-card-strip img {
  object-fit: contain;
  background: #050502;
}

.aipo-delivery-grid article {
  min-height: 210px;
}

@media (max-width: 1180px) {
  .aipo-hero-detail,
  .aipo-section-copy,
  .aipo-war-grid,
  .aipo-storefront,
  .aipo-post-stage,
  .aipo-ui-grid,
  .aipo-delivery-grid {
    grid-template-columns: 1fr;
  }

  .aipo-section-copy h2,
  .aipo-section-copy p {
    grid-column: 1;
  }

  .aipo-hero-terminal {
    max-width: none;
    margin-left: 0;
  }

  .aipo-post-preview {
    position: relative;
    top: auto;
  }
}

@media (max-width: 780px) {
  h1 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .panel-head h2,
  .home-featured h2,
  .sector-feature-copy h3,
  .projects-overview > .panel-head h2,
  .home-project-teaser h2,
  .prombt-hero-copy h2,
  .ilayda-hero-copy h2 {
    font-size: clamp(1.7rem, 8vw, 2.55rem);
    line-height: 1.08;
  }

  .aipo-hero-content h2,
  .aipocalypto-detail h2 {
    font-size: clamp(1.75rem, 8.2vw, 2.45rem);
  }

  .aipo-logo-lockup {
    width: min(280px, 76vw);
  }

  .aipo-loop-console,
  .aipo-post-picker,
  .aipo-store-assets,
  .aipo-card-strip {
    grid-template-columns: 1fr;
  }

  .aipo-loop-console {
    grid-auto-rows: minmax(230px, auto);
  }

  .aipo-post-preview img,
  .aipo-post-picker button {
    aspect-ratio: 4 / 3;
  }
}

/* Final UX repair: about spacing, real AIPOCALYPTO pitchdeck, visible post archive. */
#panel-about .panel-grid.about-grid {
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

#panel-about .panel-head {
  max-width: 860px;
}

#panel-about .panel-head h2 {
  max-width: 820px;
  font-size: clamp(2.05rem, 3.8vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: 0;
}

#panel-about .panel-head p {
  max-width: 760px;
  font-size: clamp(0.95rem, 1vw, 1.04rem);
  line-height: 1.7;
}

#panel-about .about-events {
  margin-top: clamp(32px, 5vw, 72px);
  padding: clamp(24px, 4vw, 48px);
}

#panel-about .about-events .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(300px, 0.36fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(22px, 3.2vw, 42px);
}

#panel-about .about-events .section-heading h2 {
  max-width: 880px;
  font-size: clamp(1.85rem, 3.1vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: 0;
}

#panel-about .about-events .section-heading p {
  max-width: 470px;
  margin: 0 0 4px auto;
  font-size: 0.96rem;
  line-height: 1.72;
}

#panel-about .about-events-layout {
  grid-template-columns: minmax(0, 0.92fr) minmax(310px, 0.5fr);
  gap: clamp(18px, 3.2vw, 44px);
  align-items: start;
}

#panel-about .about-event-collage {
  min-height: clamp(390px, 42vw, 560px);
}

#panel-about .about-event-collage figure {
  overflow: hidden;
}

#panel-about .about-event-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#panel-about .about-events-notes {
  gap: 12px;
}

#panel-about .about-events-notes article {
  min-height: 0;
  padding: clamp(16px, 2vw, 22px);
}

#panel-about .about-events-notes h3 {
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: 1.22;
}

#panel-about .about-events-notes p {
  font-size: 0.9rem;
  line-height: 1.62;
}

.aipocalypto-detail {
  --aipo-yellow: #ffe63a;
  --aipo-yellow-hot: #fff27a;
  --aipo-cyan: #16f7ff;
  --aipo-red: #ff4141;
  --aipo-deep: #050501;
  color: #fff7b4;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 230, 58, 0.13), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(22, 247, 255, 0.1), transparent 24%),
    linear-gradient(180deg, #070803 0%, #030401 100%);
}

.aipocalypto-detail h2,
.aipocalypto-detail .section-heading h2 {
  max-width: 820px;
  font-size: clamp(1.8rem, 3vw, 3.55rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.aipocalypto-detail > section:not(.aipo-hero-detail) {
  padding-top: clamp(52px, 6vw, 88px);
  padding-bottom: clamp(52px, 6vw, 88px);
}

.aipo-hero-detail {
  min-height: clamp(620px, 82vh, 820px);
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 420px);
  gap: clamp(22px, 4vw, 58px);
  border-color: rgba(255, 230, 58, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 58, 0.14), 0 0 80px rgba(255, 230, 58, 0.08);
  overflow: hidden;
}

.aipo-hero-detail::before {
  opacity: 0.46;
  background:
    repeating-linear-gradient(0deg, rgba(255, 230, 58, 0.05) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent, rgba(22, 247, 255, 0.12), transparent);
  mix-blend-mode: screen;
  animation: aipoScanlineDrift 7s linear infinite;
}

.aipo-hero-detail::after {
  width: min(320px, 34vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aipo-yellow), var(--aipo-cyan), transparent);
  filter: drop-shadow(0 0 18px rgba(255, 230, 58, 0.8));
  animation: aipoHorizontalSweep 4.8s ease-in-out infinite;
}

.aipo-hero-bg {
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.2) contrast(1.1) brightness(0.72);
}

.aipo-hero-content {
  max-width: 840px;
}

.aipo-logo-lockup {
  width: min(520px, 62vw);
  max-height: 132px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: clamp(14px, 2vw, 24px);
  filter: drop-shadow(0 0 26px rgba(255, 230, 58, 0.58)) drop-shadow(0 0 4px rgba(255, 65, 65, 0.7));
  transform-origin: left center;
  animation: aipoLogoVoltage 3.6s steps(2, end) infinite;
}

.aipo-hero-content h2 {
  position: relative;
  max-width: 800px;
  font-size: clamp(2.15rem, 3.65vw, 4.2rem);
  line-height: 1.02;
  color: #fff6a8;
  text-shadow: 0 0 20px rgba(255, 230, 58, 0.22);
}

.aipo-hero-content h2::before,
.aipo-hero-content h2::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.aipo-hero-content h2::before {
  color: var(--aipo-cyan);
  transform: translateX(2px);
  clip-path: inset(0 0 62% 0);
  animation: aipoTitleGlitch 5.8s infinite;
}

.aipo-hero-content h2::after {
  color: var(--aipo-red);
  transform: translateX(-2px);
  clip-path: inset(58% 0 0 0);
  animation: aipoTitleGlitch 6.6s infinite reverse;
}

.aipo-hero-content p {
  max-width: 720px;
  font-size: 0.98rem;
}

.aipo-hero-terminal {
  max-width: 430px;
}

.aipo-hero-terminal article {
  border-color: rgba(255, 230, 58, 0.4);
  background:
    linear-gradient(90deg, rgba(255, 230, 58, 0.12), rgba(0, 0, 0, 0.42)),
    rgba(16, 14, 3, 0.74);
  transform: translateZ(0);
  animation: aipoPanelFlicker 5.5s ease-in-out infinite;
}

.aipo-hero-terminal article:nth-child(2) { animation-delay: -1.1s; }
.aipo-hero-terminal article:nth-child(3) { animation-delay: -2.2s; }
.aipo-hero-terminal article:nth-child(4) { animation-delay: -3.3s; }

.aipo-section-copy {
  align-items: end;
}

.aipo-section-copy h2 {
  max-width: 780px;
  font-size: clamp(1.75rem, 2.8vw, 3.15rem);
  line-height: 1.06;
}

.aipo-section-copy p {
  max-width: 560px;
  font-size: 0.94rem;
}

.aipo-role-table i::after,
.aipo-mini-chart i,
.aipo-stripe-chart i,
.aipo-wave-chart i,
.aipo-node-chart i {
  animation-play-state: running;
}

.aipo-deck-system {
  position: relative;
  grid-template-columns: minmax(280px, 0.38fr) minmax(520px, 1fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 230, 58, 0.08), transparent 36%),
    repeating-linear-gradient(90deg, rgba(255, 230, 58, 0.07) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(255, 230, 58, 0.035) 0 1px, transparent 1px 7px),
    #060601;
}

.aipo-deck-system::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 230, 58, 0.12) 19%, transparent 20% 62%, rgba(22, 247, 255, 0.08) 63%, transparent 64%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px);
  opacity: 0.16;
  pointer-events: none;
  animation: aipoDeckNoise 8s steps(3, end) infinite;
}

.aipo-deck-copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.aipo-deck-copy h2 {
  max-width: 520px;
  font-size: clamp(1.75rem, 2.8vw, 3.2rem);
}

.aipo-deck-copy p {
  max-width: 500px;
  line-height: 1.66;
}

.aipo-deck-controls {
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-top: 22px;
}

.aipo-deck-controls button,
.aipo-deck-controls strong {
  min-height: 44px;
  border-color: rgba(255, 230, 58, 0.54);
  background: rgba(10, 10, 2, 0.78);
  color: var(--aipo-yellow-hot);
  box-shadow: inset 0 0 18px rgba(255, 230, 58, 0.06);
}

.aipo-deck-controls button:hover {
  color: #070701;
  background: var(--aipo-yellow);
  box-shadow: 0 0 28px rgba(255, 230, 58, 0.36);
}

.aipo-deck-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.aipo-deck-strip button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #050501;
  border: 1px solid rgba(255, 230, 58, 0.24);
  border-radius: 3px;
}

.aipo-deck-strip button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 230, 58, 0.16));
  opacity: 0;
  transition: opacity 180ms ease;
}

.aipo-deck-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.64;
  filter: saturate(0.85) contrast(1.1);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.aipo-deck-strip span {
  position: absolute;
  left: 5px;
  bottom: 4px;
  z-index: 2;
  color: #050501;
  background: var(--aipo-yellow);
  padding: 2px 5px;
  font-size: 0.58rem;
  font-weight: 950;
}

.aipo-deck-strip button:hover img,
.aipo-deck-strip button.is-active img {
  opacity: 1;
  filter: saturate(1.2) contrast(1.12);
  transform: scale(1.05);
}

.aipo-deck-strip button:hover::after,
.aipo-deck-strip button.is-active::after {
  opacity: 1;
}

.aipo-deck-strip button.is-active {
  border-color: var(--aipo-cyan);
  box-shadow: 0 0 0 1px rgba(22, 247, 255, 0.45), 0 0 18px rgba(22, 247, 255, 0.2);
}

.aipo-deck-stage {
  position: relative;
  z-index: 2;
  min-height: clamp(500px, 46vw, 700px);
  display: grid;
  place-items: center;
}

.aipo-deck-stage::before,
.aipo-deck-stage::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 230, 58, 0.22);
  pointer-events: none;
}

.aipo-deck-stage::before {
  inset: 6% 3% 5% 8%;
  transform: rotate(-1deg);
}

.aipo-deck-stage::after {
  inset: 12% 9% 10% 2%;
  transform: rotate(1.4deg);
}

.aipo-deck-page {
  position: relative;
  z-index: 2;
  width: min(1080px, 100%);
  margin: 0;
  overflow: hidden;
  background: #050501;
  border: 1px solid rgba(255, 230, 58, 0.62);
  border-radius: 5px;
  transform: perspective(1500px) rotateY(-4deg) rotateX(2deg);
  transform-origin: center;
  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.62),
    0 0 44px rgba(255, 230, 58, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: aipoDeckBreath 7s ease-in-out infinite;
}

.aipo-deck-page.is-flipping {
  animation: aipoRealPageFlip 720ms cubic-bezier(0.2, 0.72, 0.12, 1) both;
}

.aipo-deck-page img {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 901;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: #050501;
}

.aipo-deck-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0 47%, rgba(255, 230, 58, 0.34) 48%, transparent 49% 100%);
  mix-blend-mode: screen;
  opacity: 0.16;
  animation: aipoThinGlitch 4.2s steps(1, end) infinite;
  pointer-events: none;
}

.aipo-deck-page figcaption {
  position: absolute;
  left: 16px;
  right: auto;
  bottom: 16px;
  max-width: min(420px, 72%);
  padding: 12px 14px;
  color: #fff8b9;
  background: rgba(5, 5, 1, 0.84);
  border: 1px solid rgba(255, 230, 58, 0.42);
  border-radius: 3px;
  backdrop-filter: blur(10px);
}

.aipo-deck-page span {
  color: var(--aipo-yellow);
}

.aipo-deck-page strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(1rem, 1.25vw, 1.28rem);
  line-height: 1.12;
}

.aipo-deck-page p {
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
}

.aipo-post-system {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 230, 58, 0.08), transparent 30%),
    linear-gradient(90deg, rgba(255, 230, 58, 0.05), transparent 55%),
    #050501;
}

.aipo-post-system::before {
  content: "SOCIAL_ARCHIVE / ALL_POSTS_VISIBLE";
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  top: clamp(18px, 3vw, 42px);
  color: rgba(255, 230, 58, 0.34);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  animation: aipoPanelFlicker 4.7s steps(2, end) infinite;
}

.aipo-post-stage {
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 24px);
}

.aipo-post-preview {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.28fr);
  min-height: 0;
  overflow: hidden;
  border-color: rgba(255, 230, 58, 0.46);
  background:
    linear-gradient(135deg, rgba(255, 230, 58, 0.08), transparent 45%),
    rgba(7, 7, 2, 0.86);
}

.aipo-post-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(22, 247, 255, 0.2), transparent);
  transform: translateX(-115%);
  animation: aipoArchiveSweep 5.4s ease-in-out infinite;
  pointer-events: none;
}

.aipo-post-preview img {
  width: 100%;
  height: 100%;
  max-height: clamp(320px, 48vw, 620px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  padding: clamp(10px, 1.4vw, 20px);
  background:
    repeating-linear-gradient(0deg, rgba(255, 230, 58, 0.04) 0 1px, transparent 1px 6px),
    #030301;
}

.aipo-post-preview figcaption {
  display: grid;
  align-content: end;
  gap: 10px;
  padding: clamp(18px, 2.5vw, 32px);
  border-left: 1px solid rgba(255, 230, 58, 0.22);
}

.aipo-post-preview figcaption strong {
  font-size: clamp(1.25rem, 2vw, 2.05rem);
  line-height: 1.08;
  color: var(--aipo-yellow-hot);
}

.aipo-post-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.aipo-post-picker button {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 7px;
  overflow: hidden;
  border-color: rgba(255, 230, 58, 0.28);
  background: #030301;
  transform: translateY(0);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.aipo-post-picker button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0 42%, rgba(255, 230, 58, 0.18) 44%, transparent 48% 100%);
  opacity: 0;
  pointer-events: none;
}

.aipo-post-picker button:hover,
.aipo-post-picker button.is-active {
  transform: translateY(-4px);
  border-color: var(--aipo-yellow);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36), 0 0 22px rgba(255, 230, 58, 0.16);
}

.aipo-post-picker button:hover::before,
.aipo-post-picker button.is-active::before {
  opacity: 1;
  animation: aipoThumbGlitch 1.5s steps(2, end) infinite;
}

.aipo-post-picker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #020201;
  filter: saturate(1.05) contrast(1.08);
}

.aipo-post-picker span {
  left: 10px;
  bottom: 10px;
  color: #050501;
  background: var(--aipo-yellow);
}

.aipo-loop-console article,
.aipo-store-assets article,
.aipo-ui-grid figure,
.aipo-card-strip figure {
  box-shadow: inset 0 0 0 1px rgba(255, 230, 58, 0.18), 0 0 28px rgba(255, 230, 58, 0.06);
}

@keyframes aipoScanlineDrift {
  0% { transform: translateY(-10%); }
  100% { transform: translateY(10%); }
}

@keyframes aipoHorizontalSweep {
  0%, 100% { transform: translateX(-18%) scaleX(0.58); opacity: 0.2; }
  48% { transform: translateX(36%) scaleX(1.15); opacity: 0.84; }
  52% { transform: translateX(42%) scaleX(0.28); opacity: 0.38; }
}

@keyframes aipoLogoVoltage {
  0%, 91%, 100% { transform: translate(0, 0) scale(1); }
  92% { transform: translate(2px, -1px) scale(1.01); }
  94% { transform: translate(-2px, 1px) scale(0.995); }
  96% { transform: translate(1px, 0) scale(1.006); }
}

@keyframes aipoTitleGlitch {
  0%, 88%, 100% { opacity: 0; transform: translateX(0); }
  89% { opacity: 0.7; transform: translateX(3px); }
  90% { opacity: 0.25; transform: translateX(-4px); }
  91% { opacity: 0.65; transform: translateX(2px); }
  92% { opacity: 0; transform: translateX(0); }
}

@keyframes aipoPanelFlicker {
  0%, 74%, 100% { filter: brightness(1); }
  75% { filter: brightness(1.45) saturate(1.35); }
  76% { filter: brightness(0.82); }
  77% { filter: brightness(1.16); }
}

@keyframes aipoDeckNoise {
  0%, 100% { transform: translate(0, 0); opacity: 0.14; }
  24% { transform: translate(1px, -1px); opacity: 0.2; }
  25% { transform: translate(-3px, 1px); opacity: 0.11; }
  72% { transform: translate(0, 2px); opacity: 0.18; }
}

@keyframes aipoDeckBreath {
  0%, 100% { transform: perspective(1500px) rotateY(-4deg) rotateX(2deg) translateY(0); }
  50% { transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) translateY(-8px); }
}

@keyframes aipoRealPageFlip {
  0% { opacity: 0.45; transform: perspective(1500px) rotateX(18deg) rotateY(-20deg) translateY(42px) scale(0.94); filter: blur(2px) saturate(1.4); }
  44% { opacity: 0.92; transform: perspective(1500px) rotateX(-4deg) rotateY(6deg) translateY(-12px) scale(1.015); }
  100% { opacity: 1; transform: perspective(1500px) rotateY(-4deg) rotateX(2deg) translateY(0) scale(1); filter: blur(0) saturate(1); }
}

@keyframes aipoThinGlitch {
  0%, 86%, 100% { transform: translateX(-120%); opacity: 0; }
  87% { transform: translateX(-20%); opacity: 0.22; }
  88% { transform: translateX(18%); opacity: 0.1; }
  89% { transform: translateX(120%); opacity: 0; }
}

@keyframes aipoArchiveSweep {
  0%, 64%, 100% { transform: translateX(-115%); opacity: 0; }
  70% { opacity: 0.72; }
  82% { transform: translateX(115%); opacity: 0; }
}

@keyframes aipoThumbGlitch {
  0%, 100% { transform: translateY(-120%); }
  48% { transform: translateY(0); }
  52% { transform: translateY(120%); }
}

@media (max-width: 1180px) {
  #panel-about .about-events .section-heading,
  #panel-about .about-events-layout,
  .aipo-deck-system,
  .aipo-post-preview {
    grid-template-columns: 1fr;
  }

  #panel-about .about-events .section-heading p {
    max-width: 720px;
    margin-left: 0;
  }

  .aipo-deck-stage {
    min-height: auto;
  }

  .aipo-post-preview figcaption {
    border-left: 0;
    border-top: 1px solid rgba(255, 230, 58, 0.22);
  }

  .aipo-post-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  #panel-about .panel-head h2,
  #panel-about .about-events .section-heading h2,
  .aipo-hero-content h2,
  .aipocalypto-detail h2,
  .aipo-section-copy h2 {
    font-size: clamp(1.75rem, 8vw, 2.65rem);
    line-height: 1.08;
  }

  .aipo-logo-lockup {
    width: min(360px, 84vw);
  }

  .aipo-deck-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aipo-deck-page figcaption {
    position: static;
    max-width: none;
    border-width: 1px 0 0;
    border-radius: 0;
  }

  .aipo-post-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact about event wall + gold achievement showcase. */
#panel-about .about-events {
  padding: clamp(22px, 3vw, 38px);
}

#panel-about .about-events .section-heading {
  grid-template-columns: minmax(0, 0.66fr) minmax(280px, 0.34fr);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

#panel-about .about-events-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#panel-about .about-event-collage {
  grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr;
  grid-template-rows: minmax(310px, 34vw);
  min-height: 0;
  height: clamp(340px, 35vw, 500px);
  gap: 10px;
}

#panel-about .about-event-collage .event-card-large,
#panel-about .about-event-collage figure {
  grid-row: auto;
  transform: none;
  animation: aboutEventFloat 7s ease-in-out infinite;
}

#panel-about .about-event-collage figure:nth-child(2) {
  animation-delay: -1.3s;
}

#panel-about .about-event-collage figure:nth-child(3) {
  transform: none;
  animation-delay: -2.6s;
}

#panel-about .about-event-collage figure:nth-child(4) {
  transform: none;
  animation-delay: -3.8s;
}

#panel-about .about-events-notes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#panel-about .about-events-notes article {
  min-height: 170px;
  align-content: start;
}

#panel-about .about-events-notes span {
  width: 36px;
  height: 36px;
}

#panel-awards {
  --gold: #f7c95d;
  --gold-soft: #ffe9a3;
  --gold-deep: #8e6218;
  --gold-line: rgba(247, 201, 93, 0.34);
  position: relative;
  overflow: hidden;
  color: #fff3c7;
  background:
    radial-gradient(circle at 18% 16%, rgba(247, 201, 93, 0.18), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(255, 233, 163, 0.1), transparent 24%),
    linear-gradient(135deg, #130f05 0%, #050402 48%, #0d0b05 100%);
}

#panel-awards::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 38%, rgba(255, 233, 163, 0.18) 45%, transparent 54% 100%),
    repeating-linear-gradient(90deg, rgba(247, 201, 93, 0.055) 0 1px, transparent 1px 94px);
  opacity: 0.55;
  animation: awardGoldSweep 8s ease-in-out infinite;
}

#panel-awards::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 233, 163, 0.42) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(247, 201, 93, 0.28) 0 1px, transparent 2px);
  background-position: 4% 12%, 72% 44%;
  background-size: 180px 160px, 240px 220px;
  opacity: 0.24;
  animation: awardGoldDust 14s linear infinite;
}

#panel-awards .awards-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 0.96fr) minmax(430px, 0.92fr);
  gap: clamp(24px, 4vw, 58px);
  min-height: auto;
  align-items: center;
}

#panel-awards .panel-head {
  max-width: 760px;
}

#panel-awards .kicker {
  color: var(--gold-soft);
}

#panel-awards .kicker::before {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(247, 201, 93, 0.62);
}

#panel-awards .panel-head h2 {
  max-width: 760px;
  font-size: clamp(1.9rem, 3.25vw, 3.65rem);
  line-height: 1.03;
  color: #fff5c9;
  text-shadow: 0 0 30px rgba(247, 201, 93, 0.18);
}

#panel-awards .panel-head p {
  max-width: 650px;
  color: rgba(255, 243, 199, 0.72);
}

.award-gold-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.award-gold-tags span {
  position: relative;
  overflow: hidden;
  padding: 8px 10px;
  color: #171005;
  background: linear-gradient(135deg, #fff2b2, #f7c95d 46%, #b78225);
  border: 1px solid rgba(255, 242, 178, 0.7);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(247, 201, 93, 0.16);
}

.award-gold-tags span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.66), transparent);
  transform: translateX(-130%);
  animation: awardChipShine 3.8s ease-in-out infinite;
}

.award-gold-tags span:nth-child(2)::after { animation-delay: -0.8s; }
.award-gold-tags span:nth-child(3)::after { animation-delay: -1.6s; }
.award-gold-tags span:nth-child(4)::after { animation-delay: -2.4s; }

#panel-awards .milestone-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  margin-top: 6px;
  border: 0;
  background: transparent;
}

#panel-awards .milestone-list article {
  position: relative;
  min-height: 164px;
  overflow: hidden;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(247, 201, 93, 0.16), rgba(255, 255, 255, 0.025) 44%, rgba(142, 98, 24, 0.18)),
    rgba(8, 6, 2, 0.76);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 233, 163, 0.05), 0 18px 50px rgba(0, 0, 0, 0.32);
  animation: awardCardFloat 6.8s ease-in-out infinite;
  animation-delay: calc(var(--award-index) * -0.55s);
}

#panel-awards .milestone-list article::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(120deg, transparent 0 36%, rgba(255, 233, 163, 0.25), transparent 66% 100%);
  transform: translateX(-130%);
  animation: awardCardSweep 5.2s ease-in-out infinite;
  animation-delay: calc(var(--award-index) * -0.38s);
  pointer-events: none;
}

#panel-awards .milestone-list small {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  color: #120c03;
  background: radial-gradient(circle at 35% 30%, #fff7ca, #f7c95d 52%, #9b691b);
  border: 1px solid rgba(255, 242, 178, 0.72);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 950;
  box-shadow: 0 0 26px rgba(247, 201, 93, 0.26);
}

#panel-awards .milestone-list strong {
  display: block;
  color: #fff4bf;
  font-size: clamp(1rem, 1.24vw, 1.28rem);
  line-height: 1.12;
  text-transform: none;
}

#panel-awards .milestone-list span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 243, 199, 0.7);
  font-size: 0.86rem;
  line-height: 1.55;
}

#panel-awards .award-stage {
  min-height: clamp(500px, 54vw, 660px);
}

#panel-awards .award-stage::before {
  content: "";
  position: absolute;
  inset: 8% 2%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(247, 201, 93, 0.18), transparent 46%),
    conic-gradient(from 0deg, transparent, rgba(247, 201, 93, 0.32), transparent, rgba(255, 233, 163, 0.2), transparent);
  filter: blur(2px);
  animation: awardHaloSpin 18s linear infinite;
}

#panel-awards .plaque-celebration::before,
#panel-awards .plaque-celebration::after {
  border-color: rgba(247, 201, 93, 0.34);
  box-shadow: 0 0 34px rgba(247, 201, 93, 0.1);
}

#panel-awards .plaque-celebration::after {
  border-color: rgba(255, 233, 163, 0.18);
}

#panel-awards .plaque-photo {
  width: min(560px, 96%);
  filter: drop-shadow(0 36px 84px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 34px rgba(247, 201, 93, 0.18));
}

#panel-awards .plaque-shine {
  opacity: 0.18;
  animation: awardPlaqueSweep 4.4s ease-in-out infinite;
}

#panel-awards .celebration-chip {
  color: #161004;
  background: linear-gradient(135deg, #fff2b2, #f7c95d 50%, #9f6e1d);
  box-shadow: 0 16px 42px rgba(247, 201, 93, 0.2), 0 0 34px rgba(247, 201, 93, 0.22);
}

#panel-awards .spark {
  background: var(--gold-soft);
  box-shadow: 0 0 22px rgba(247, 201, 93, 0.72);
}

.nav-link.is-active[data-panel-target="awards"],
.mobile-dock button.is-active[data-panel-target="awards"] {
  color: #171005;
  background: linear-gradient(135deg, #fff2b2, #f7c95d 48%, #b78225);
  box-shadow: 0 0 28px rgba(247, 201, 93, 0.24);
}

@keyframes awardGoldSweep {
  0%, 100% { transform: translateX(-42%) skewX(-9deg); opacity: 0.2; }
  50% { transform: translateX(42%) skewX(-9deg); opacity: 0.58; }
}

@keyframes awardGoldDust {
  0% { background-position: 4% 12%, 72% 44%; }
  100% { background-position: 18% 28%, 62% 28%; }
}

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

@keyframes awardCardFloat {
  0%, 100% { transform: translateY(0); border-color: rgba(247, 201, 93, 0.26); }
  50% { transform: translateY(-6px); border-color: rgba(255, 233, 163, 0.52); }
}

@keyframes awardCardSweep {
  0%, 62%, 100% { transform: translateX(-130%); opacity: 0; }
  76% { opacity: 1; }
  90% { transform: translateX(130%); opacity: 0; }
}

@keyframes awardHaloSpin {
  to { transform: rotate(360deg); }
}

@keyframes awardPlaqueSweep {
  0%, 42%, 100% { transform: translateX(-55%) rotate(8deg); opacity: 0; }
  56% { opacity: 0.32; }
  72% { transform: translateX(55%) rotate(8deg); opacity: 0; }
}

@media (max-width: 1180px) {
  #panel-about .about-event-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(240px, 1fr));
    height: auto;
  }

  #panel-about .about-events-notes,
  #panel-awards .milestone-list {
    grid-template-columns: 1fr;
  }

  #panel-awards .awards-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "stage"
      "milestones";
  }
}

@media (max-width: 780px) {
  #panel-about .about-events .section-heading,
  #panel-about .about-event-collage {
    grid-template-columns: 1fr;
  }

  #panel-about .about-event-collage {
    grid-template-rows: none;
  }

  #panel-about .about-event-collage figure {
    min-height: 320px;
  }

  #panel-awards .panel-head h2 {
    font-size: clamp(1.85rem, 8vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .intro {
    display: none;
  }
}

/* Local V2 preview polish: clearer business positioning, calmer type scale, denser proof system. */
.site-nav {
  gap: 4px;
}

.nav-link {
  padding-inline: 11px;
}

.nav-brief-button {
  min-width: max-content;
}

.hero-grid {
  min-height: min(760px, calc(100vh - var(--header) - 68px));
  align-items: center;
}

h1 {
  max-width: 900px;
  font-size: clamp(2.25rem, 4.85vw, 5.05rem);
  line-height: 1.04;
  font-weight: 760;
}

.panel-head h2,
.home-featured h2 {
  max-width: 940px;
  font-size: clamp(1.85rem, 3.25vw, 3.65rem);
  line-height: 1.08;
}

.projects-overview > .panel-head h2,
.prombt-hero-copy h2,
.ilayda-hero-copy h2 {
  font-size: clamp(2.05rem, 4.1vw, 4.35rem);
  line-height: 1.05;
}

.hero-copy p,
.panel-head p,
.home-featured p {
  max-width: 690px;
  font-size: clamp(0.98rem, 1.06vw, 1.12rem);
}

.hero-roles {
  margin: 22px 0;
}

.hero-roles span {
  min-height: 32px;
  background: rgba(148, 255, 56, 0.06);
  border-color: rgba(148, 255, 56, 0.2);
}

.hero-showcase {
  min-height: min(560px, 58vh);
}

.showcase-card {
  isolation: isolate;
}

.showcase-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  pointer-events: none;
}

.showcase-card-main div,
.showcase-card-side strong,
.showcase-card-mini strong {
  z-index: 1;
}

.home-stats {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.home-stats article {
  min-height: 116px;
  padding: 18px 14px;
}

.home-stats strong {
  font-size: clamp(1.35rem, 2.25vw, 2.55rem);
  white-space: nowrap;
}

.home-stats span {
  font-size: 0.72rem;
  line-height: 1.35;
}

.proof-narrative {
  max-width: 1040px;
  margin: 18px auto 0;
  color: rgba(246, 243, 237, 0.72);
  font-size: clamp(1rem, 1.42vw, 1.26rem);
  font-weight: 760;
  line-height: 1.55;
  text-align: center;
}

.home-positioning-system {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 24px;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(148, 255, 56, 0.09), transparent 32%),
    linear-gradient(90deg, rgba(56, 255, 210, 0.05), transparent 62%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 255, 56, 0.2);
  border-radius: var(--radius);
  box-shadow: 0 26px 95px rgba(0, 0, 0, 0.28);
}

.positioning-copy h2 {
  max-width: 790px;
  margin-bottom: 14px;
  font-size: clamp(1.9rem, 3.2vw, 3.45rem);
  line-height: 1.05;
}

.positioning-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-weight: 720;
  line-height: 1.68;
}

.positioning-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.positioning-flow article {
  position: relative;
  min-height: 154px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(148, 255, 56, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(148, 255, 56, 0.18);
  border-radius: 8px;
}

.positioning-flow article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.12) 45%, transparent 58%);
  transform: translateX(-120%);
  animation: previewCardSweep 4.8s ease-in-out infinite;
}

.positioning-flow article:nth-child(2)::after { animation-delay: 0.55s; }
.positioning-flow article:nth-child(3)::after { animation-delay: 1.1s; }
.positioning-flow article:nth-child(4)::after { animation-delay: 1.65s; }

.positioning-flow span,
.case-priority span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.positioning-flow strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  line-height: 1;
}

.positioning-flow small {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-weight: 780;
}

.home-case-priorities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.case-priority {
  position: relative;
  min-height: 274px;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(148, 255, 56, 0.14), transparent 38%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 255, 56, 0.17);
  border-radius: var(--radius);
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

.case-priority:hover {
  transform: translateY(-6px);
  border-color: rgba(148, 255, 56, 0.45);
}

.case-priority img {
  display: block;
  width: 100%;
  height: 116px;
  object-fit: contain;
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

.case-priority h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.2;
}

.case-priority.is-yellow {
  border-color: rgba(255, 230, 45, 0.34);
  background: linear-gradient(145deg, rgba(255, 230, 45, 0.12), rgba(255, 255, 255, 0.035));
}

.case-priority.is-cyan {
  border-color: rgba(56, 221, 255, 0.3);
  background: linear-gradient(145deg, rgba(56, 221, 255, 0.1), rgba(255, 255, 255, 0.035));
}

.case-priority.is-green {
  border-color: rgba(86, 255, 150, 0.3);
  background: linear-gradient(145deg, rgba(86, 255, 150, 0.1), rgba(255, 255, 255, 0.035));
}

.case-priority.is-lime {
  border-color: rgba(179, 255, 58, 0.34);
  background: linear-gradient(145deg, rgba(179, 255, 58, 0.12), rgba(255, 255, 255, 0.035));
}

.services-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.service-card {
  min-height: 420px;
  padding: 20px;
}

.service-card h3 {
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
}

.deliverables {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
}

.deliverables span {
  display: block;
  padding: 11px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.45;
}

.deliverables strong {
  color: var(--ink);
}

#panel-about .panel-grid.about-grid {
  grid-template-columns: minmax(0, 0.98fr) minmax(380px, 0.82fr);
  align-items: start;
}

#panel-about .panel-head h2 {
  font-size: clamp(2rem, 3.4vw, 3.8rem);
}

#panel-about .panel-head p {
  max-width: 850px;
}

#panel-about .about-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#panel-about .about-cards article {
  min-height: 210px;
}

#panel-contact .panel-head h2 {
  font-size: clamp(2rem, 3.8vw, 4.05rem);
}

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

@media (max-width: 1280px) {
  .home-stats,
  .services-grid,
  .home-case-priorities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hero-grid,
  .home-positioning-system,
  #panel-about .panel-grid.about-grid {
    grid-template-columns: 1fr;
  }

  .hero-showcase {
    min-height: 460px;
  }

  #panel-about .about-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .home-stats,
  .home-case-priorities,
  .services-grid,
  .positioning-flow,
  #panel-about .about-cards {
    grid-template-columns: 1fr;
  }

  .home-positioning-system,
  .home-featured,
  .service-card {
    padding: 18px;
  }

  h1 {
    font-size: clamp(2rem, 11.2vw, 3.25rem);
  }

  .panel-head h2,
  .home-featured h2,
  #panel-about .panel-head h2 {
    font-size: clamp(1.7rem, 9vw, 2.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .positioning-flow article::after {
    animation: none !important;
  }
}

/* V2 stronger visual pass: first screen now reads as a creative operations dashboard. */
.v2-preview {
  background:
    linear-gradient(rgba(148, 255, 56, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 255, 56, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(56, 255, 210, 0.12), transparent 28%),
    radial-gradient(circle at 14% 15%, rgba(148, 255, 56, 0.16), transparent 30%),
    linear-gradient(180deg, #020403, #06100c 45%, #030305);
  background-size: 54px 54px, 54px 54px, auto, auto, auto;
}

.v2-preview .app-shell {
  padding-top: 24px;
}

.v2-preview .hero-grid {
  grid-template-columns: minmax(420px, 0.82fr) minmax(560px, 1.18fr);
  gap: 28px;
  min-height: 680px;
  padding: 24px;
  background:
    linear-gradient(115deg, rgba(148, 255, 56, 0.11), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(148, 255, 56, 0.18);
  border-radius: 8px;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.38);
}

.v2-preview h1 {
  max-width: 860px;
  font-size: 4.7rem;
  line-height: 0.98;
}

.v2-preview .hero-copy p {
  max-width: 760px;
  color: rgba(246, 243, 237, 0.76);
  font-weight: 720;
}

.v2-preview .hero-actions .button {
  min-height: 52px;
  padding-inline: 20px;
}

.hero-command-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 44px minmax(0, 1fr) 168px;
  gap: 12px;
  min-height: 620px;
  padding: 14px;
  overflow: hidden;
  background:
    linear-gradient(rgba(148, 255, 56, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 255, 210, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 72% 24%, rgba(56, 255, 210, 0.14), transparent 28%),
    rgba(0, 0, 0, 0.34);
  background-size: 42px 42px, 42px 42px, auto, auto;
  border: 1px solid rgba(148, 255, 56, 0.26);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 28px 90px rgba(0, 0, 0, 0.35);
  perspective: 1200px;
}

.hero-command-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 48%, rgba(148, 255, 56, 0.11) 49%, transparent 50%);
  background-size: 100% 8px;
  opacity: 0.35;
  mix-blend-mode: screen;
}

.hero-command-board::after {
  content: "";
  position: absolute;
  inset: -20% -45%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(148, 255, 56, 0.18), transparent 56%);
  transform: translateX(-45%);
  animation: commandScan 5.6s ease-in-out infinite;
}

.command-board-topline {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  color: var(--accent);
  background: rgba(148, 255, 56, 0.07);
  border: 1px solid rgba(148, 255, 56, 0.16);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.command-board-topline strong {
  color: var(--ink);
}

.command-card {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: rgba(3, 4, 4, 0.72);
  border: 1px solid rgba(148, 255, 56, 0.18);
  border-radius: 8px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
  transition: transform 240ms ease, border-color 240ms ease;
}

.command-card:hover {
  transform: translateY(-4px);
  border-color: rgba(148, 255, 56, 0.46);
}

.command-card img,
.command-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.command-card > div:not(.command-board-topline) {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: grid;
  gap: 5px;
}

.command-card span {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.command-card strong {
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.04;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.65);
}

.command-card small {
  color: rgba(246, 243, 237, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

.command-main {
  grid-column: 1 / 8;
  grid-row: 2 / 4;
}

.command-main::after,
.command-video::after,
.command-youtube::after,
.command-stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  pointer-events: none;
}

.command-logo {
  position: absolute;
  left: 22px;
  top: 28px;
  z-index: 4;
  width: min(260px, 48%);
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.76));
}

.command-main strong {
  font-size: 2rem;
}

.command-stat {
  grid-column: 8 / 13;
  grid-row: 2 / 3;
}

.command-stat img {
  object-position: top center;
}

.command-stat strong {
  color: #58ff9a;
  font-size: 3rem;
}

.command-video {
  grid-column: 8 / 11;
  grid-row: 3 / 4;
}

.command-youtube {
  grid-column: 11 / 13;
  grid-row: 3 / 4;
}

.command-youtube img {
  object-fit: cover;
  object-position: center;
}

.command-signal {
  position: absolute;
  right: 16px;
  top: 72px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 7px);
  gap: 5px;
  align-items: end;
  height: 34px;
}

.command-signal span {
  display: block;
  width: 7px;
  height: 9px;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(148, 255, 56, 0.5);
  animation: signalBars 1.45s ease-in-out infinite;
}

.command-signal span:nth-child(2) { animation-delay: 0.12s; }
.command-signal span:nth-child(3) { animation-delay: 0.24s; }
.command-signal span:nth-child(4) { animation-delay: 0.36s; }
.command-signal span:nth-child(5) { animation-delay: 0.48s; }
.command-signal span:nth-child(6) { animation-delay: 0.6s; }

.v2-impact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 255, 56, 0.22);
  border-radius: 8px;
  background: rgba(148, 255, 56, 0.18);
}

.v2-impact-strip article {
  position: relative;
  min-height: 190px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(148, 255, 56, 0.15), transparent 30%),
    rgba(2, 5, 4, 0.94);
  cursor: pointer;
}

.v2-impact-strip article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.11), transparent 58%);
  transform: translateX(-120%);
  transition: transform 520ms ease;
}

.v2-impact-strip article:hover::after {
  transform: translateX(120%);
}

.v2-impact-strip span {
  display: block;
  margin-bottom: 28px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.v2-impact-strip strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
}

.v2-impact-strip p {
  max-width: 420px;
  margin: 0;
  color: rgba(246, 243, 237, 0.68);
  font-size: 0.95rem;
  font-weight: 730;
  line-height: 1.55;
}

@keyframes commandScan {
  0%, 48% { transform: translateX(-55%); opacity: 0; }
  58% { opacity: 1; }
  84%, 100% { transform: translateX(55%); opacity: 0; }
}

@keyframes signalBars {
  0%, 100% { height: 8px; opacity: 0.45; }
  50% { height: 34px; opacity: 1; }
}

@media (max-width: 1180px) {
  .v2-preview .hero-grid {
    grid-template-columns: 1fr;
  }

  .v2-preview h1 {
    font-size: 3.7rem;
  }
}

@media (max-width: 780px) {
  .v2-preview .hero-grid {
    min-height: 0;
    padding: 16px;
  }

  .v2-preview h1 {
    font-size: 2.7rem;
    line-height: 1.02;
  }

  .hero-command-board {
    grid-template-columns: 1fr;
    grid-template-rows: 40px 330px 180px 180px 180px;
    min-height: 0;
  }

  .command-board-topline,
  .command-main,
  .command-stat,
  .command-video,
  .command-youtube {
    grid-column: 1;
  }

  .command-board-topline { grid-row: 1; }
  .command-main { grid-row: 2; }
  .command-stat { grid-row: 3; }
  .command-video { grid-row: 4; }
  .command-youtube { grid-row: 5; }

  .command-main strong,
  .command-stat strong {
    font-size: 1.75rem;
  }

  .v2-impact-strip {
    grid-template-columns: 1fr;
  }
}

/* Dubai AI city guide case study */
.dubai-detail[hidden] {
  display: none !important;
}

body.is-dubai-detail-open {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 90, 165, 0.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255, 138, 61, 0.14), transparent 34%),
    #12070c;
}

body.is-dubai-detail-open .app-shell {
  padding: 0;
}

body.is-dubai-detail-open .projects-panel {
  min-height: calc(100vh - var(--header));
  background: #12070c;
}

.button-dubai {
  color: #19070c;
  background: linear-gradient(135deg, #ff5aa5, #ff8a3d 54%, #ffd166);
  border-color: rgba(255, 141, 77, 0.65);
  box-shadow: 0 14px 34px rgba(255, 94, 146, 0.22);
}

.button-dubai:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(255, 121, 76, 0.28);
}

.project-preview-dubai {
  --preview-accent: #ff6b9f;
  --preview-accent-rgb: 255, 107, 159;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 130, 74, 0.18), transparent 36%),
    radial-gradient(circle at 88% 34%, rgba(255, 214, 102, 0.16), transparent 32%),
    #12070c;
  border-color: rgba(255, 120, 86, 0.36);
}

.project-preview-dubai .project-preview-meta span {
  background: linear-gradient(135deg, #ff5aa5, #ffb03d);
}

.dubai-preview-media {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 91, 158, 0.18), rgba(255, 145, 56, 0.08)),
    #0a0507;
}

.dubai-preview-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 27%, rgba(255, 116, 66, 0.12) 62%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
  mix-blend-mode: screen;
  opacity: 0.62;
  animation: dubaiScan 6.8s linear infinite;
}

.dubai-preview-main,
.dubai-preview-cover,
.dubai-preview-card {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 206, 145, 0.42);
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45), 0 0 34px rgba(255, 92, 146, 0.17);
}

.dubai-preview-main {
  left: 8%;
  top: 12%;
  width: 31%;
  height: 78%;
  transform: rotate(-4deg);
  animation: dubaiPhoneFloat 6s ease-in-out infinite;
}

.dubai-preview-cover {
  left: 34%;
  top: 8%;
  width: 26%;
  height: 70%;
  transform: rotate(2.5deg);
  animation: dubaiPhoneFloat 6.6s ease-in-out infinite reverse;
}

.dubai-preview-card {
  right: 11%;
  top: 13%;
  width: 25%;
  height: 52%;
  transform: rotate(5deg);
  animation: dubaiPhoneFloat 7.2s ease-in-out infinite;
}

.dubai-preview-card.is-alt {
  right: 28%;
  top: 48%;
  width: 23%;
  height: 42%;
  transform: rotate(-6deg);
  animation-delay: -2.2s;
}

.dubai-preview-badge {
  position: absolute;
  z-index: 4;
  right: 26px;
  bottom: 24px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  color: #19070c;
  background: rgba(255, 225, 155, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 18px 54px rgba(255, 116, 71, 0.24);
}

.dubai-preview-badge span {
  font-size: 0.58rem;
}

.dubai-preview-badge strong {
  font-size: 1rem;
  line-height: 0.95;
}

.dubai-preview-badge i {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff4fa2, #ff8d3f);
  border-radius: 999px;
  animation: dubaiMeter 2.6s ease-in-out infinite;
}

.dubai-detail {
  --dubai-pink: #ff5aa5;
  --dubai-orange: #ff8a3d;
  --dubai-gold: #ffd166;
  --dubai-ink: #fff8ee;
  --dubai-muted: rgba(255, 248, 238, 0.72);
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header));
  overflow: hidden;
  color: var(--dubai-ink);
  background:
    radial-gradient(circle at 18% 4%, rgba(255, 91, 165, 0.2), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(255, 138, 61, 0.22), transparent 34%),
    linear-gradient(180deg, #16070d 0%, #0b0508 52%, #12070b 100%);
  isolation: isolate;
}

.dubai-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.14));
}

.dubai-detail::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255, 89, 165, 0.08) 45%, transparent 52%),
    radial-gradient(circle at 50% 120%, rgba(255, 141, 61, 0.18), transparent 38%);
  animation: dubaiAura 12s ease-in-out infinite;
}

.dubai-detail > section,
.dubai-subnav,
.dubai-toolbar {
  width: min(100% - 32px, 1680px);
  margin-inline: auto;
}

.dubai-toolbar {
  border-color: rgba(255, 135, 76, 0.24);
  background: rgba(20, 7, 11, 0.72);
}

.dubai-subnav {
  position: sticky;
  top: 78px;
  z-index: 10;
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  background: rgba(18, 7, 12, 0.78);
  border: 1px solid rgba(255, 124, 91, 0.22);
  border-radius: 12px;
  backdrop-filter: blur(16px);
}

.dubai-subnav a {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: var(--dubai-ink);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
}

.dubai-subnav a:hover {
  color: #17070c;
  background: linear-gradient(135deg, var(--dubai-pink), var(--dubai-orange));
}

.dubai-hero-detail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: center;
  min-height: clamp(700px, 86vh, 920px);
  padding: clamp(44px, 7vw, 112px) 0;
}

.dubai-hero-glow {
  position: absolute;
  inset: 8% -4% auto auto;
  width: min(46vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 111, 153, 0.3), transparent 64%);
  filter: blur(8px);
  animation: dubaiPulse 6s ease-in-out infinite;
}

.dubai-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.dubai-detail .kicker {
  color: #ffd166;
  text-shadow: 0 0 18px rgba(255, 142, 66, 0.28);
}

.dubai-hero-copy h2,
.dubai-section-copy h2 {
  margin: 12px 0 18px;
  max-width: 820px;
  color: #fff6ec;
  font-size: clamp(2rem, 4vw, 4.45rem);
  line-height: 1;
  letter-spacing: 0;
}

.dubai-section-copy h2 {
  font-size: clamp(1.75rem, 2.75vw, 3.2rem);
  line-height: 1.04;
}

.dubai-hero-copy p,
.dubai-section-copy p {
  max-width: 760px;
  color: var(--dubai-muted);
  font-size: clamp(0.95rem, 1.12vw, 1.08rem);
  line-height: 1.72;
}

.dubai-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.dubai-hero-media {
  position: relative;
  min-height: 640px;
}

.dubai-phone {
  position: absolute;
  width: min(31%, 220px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 207, 150, 0.32);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48), 0 0 42px rgba(255, 92, 159, 0.18);
  animation: dubaiPhoneFloat 6.4s ease-in-out infinite;
}

.dubai-phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 10px 30% auto;
  height: 5px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.dubai-phone video,
.dubai-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dubai-phone span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 8px 9px;
  color: #17070c;
  background: rgba(255, 210, 125, 0.92);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.dubai-phone.is-main {
  left: 7%;
  top: 8%;
  width: min(40%, 292px);
  transform: rotate(-5deg);
}

.dubai-phone:not(.is-main):nth-of-type(2) {
  right: 12%;
  top: 0;
  transform: rotate(5deg);
  animation-delay: -2s;
}

.dubai-phone:not(.is-main):nth-of-type(3) {
  right: 33%;
  bottom: 4%;
  transform: rotate(-2deg);
  animation-delay: -4s;
}

.dubai-hero-stamp {
  position: absolute;
  right: 2%;
  bottom: 18%;
  z-index: 4;
  display: grid;
  gap: 4px;
  width: min(250px, 42%);
  padding: 18px;
  color: #17070c;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.95), rgba(255, 89, 158, 0.9));
  border-radius: 16px;
  transform: rotate(4deg);
  box-shadow: 0 22px 66px rgba(255, 112, 76, 0.28);
  animation: dubaiStamp 4.8s ease-in-out infinite;
}

.dubai-hero-stamp strong {
  font-size: 1.25rem;
  font-weight: 950;
}

.dubai-hero-stamp small {
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.3;
}

.dubai-command-grid,
.dubai-signal-board,
.dubai-loop-section,
.dubai-route-map,
.dubai-cover-lab,
.dubai-carousel-console,
.dubai-offer-stack,
.dubai-influencer-lab,
.dubai-persona-matrix,
.dubai-voice-lab,
.dubai-impact-board,
.dubai-economy-sim,
.dubai-calendar-wall,
.dubai-final-deck,
.dubai-delivery-wall {
  padding: clamp(48px, 7vw, 112px) 0;
  scroll-margin-top: 120px;
}

.dubai-command-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 5vw, 78px);
  align-items: start;
}

.dubai-ops-cards,
.dubai-impact-grid,
.dubai-delivery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dubai-ops-cards article,
.dubai-impact-grid article,
.dubai-delivery-grid article,
.dubai-audio-grid article {
  position: relative;
  overflow: hidden;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(255, 93, 165, 0.1), rgba(255, 137, 61, 0.055)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 155, 101, 0.2);
  border-radius: 16px;
}

.dubai-ops-cards article::before,
.dubai-impact-grid article::before,
.dubai-audio-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--dubai-pink), var(--dubai-orange), var(--dubai-gold));
  box-shadow: 0 0 18px rgba(255, 97, 160, 0.5);
}

.dubai-ops-cards span,
.dubai-impact-grid span,
.dubai-persona-card span,
.dubai-audio-grid span {
  color: #ffd166;
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-ops-cards strong,
.dubai-impact-grid strong {
  display: block;
  margin: 12px 0 8px;
  color: #fff8ee;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
}

.dubai-ops-cards p,
.dubai-impact-grid p,
.dubai-delivery-grid p,
.dubai-persona-card p {
  margin: 0;
  color: var(--dubai-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.dubai-ops-cards i {
  display: block;
  height: 6px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.dubai-ops-cards i::before {
  content: "";
  display: block;
  width: var(--level);
  height: 100%;
  background: linear-gradient(90deg, var(--dubai-pink), var(--dubai-orange));
  border-radius: inherit;
  animation: dubaiBarFill 2.8s ease-in-out infinite;
}

.dubai-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 28px;
  background: rgba(12, 5, 8, 0.72);
  border: 1px solid rgba(255, 143, 80, 0.22);
  border-radius: 22px;
}

.dubai-pipeline article {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 160px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.dubai-pipeline article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--dubai-pink), var(--dubai-gold));
  box-shadow: 0 0 16px rgba(255, 104, 159, 0.55);
}

.dubai-pipeline b {
  color: #ffd166;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.dubai-pipeline span {
  color: var(--dubai-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.dubai-reel-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.dubai-reel-grid article {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #080406;
  border: 1px solid rgba(255, 145, 85, 0.28);
  border-radius: 18px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.36);
  transform: translateY(10px);
  animation: dubaiReelLift 6.5s ease-in-out infinite;
}

.dubai-reel-grid article:nth-child(2n) {
  margin-top: 34px;
  animation-delay: -2.4s;
}

.dubai-reel-grid article:nth-child(3n) {
  margin-top: -14px;
  animation-delay: -4s;
}

.dubai-reel-grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dubai-reel-grid span,
.dubai-cover-wall::after {
  position: absolute;
}

.dubai-reel-grid span {
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 10px;
  color: #17070c;
  background: rgba(255, 209, 102, 0.9);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.dubai-cover-wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 142, 86, 0.22);
  border-radius: 22px;
}

.dubai-cover-wall img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  transform: rotate(-1deg);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.dubai-cover-wall img:nth-child(2n) {
  margin-top: 32px;
  transform: rotate(1.4deg);
}

.dubai-cover-wall img:hover {
  z-index: 2;
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 24px 72px rgba(255, 103, 159, 0.24);
}

.dubai-carousel-stage {
  margin-top: 28px;
  overflow: hidden;
  padding: 20px 0;
}

.dubai-carousel-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: dubaiCarousel 26s linear infinite;
}

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

.dubai-carousel-track img {
  width: min(24vw, 280px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(255, 155, 97, 0.28);
  border-radius: 14px;
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.28);
}

.dubai-persona-grid {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.dubai-persona-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.62fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  padding: clamp(20px, 4vw, 42px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.07), transparent 28%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 155, 95, 0.22);
  border-radius: 24px;
}

.dubai-persona-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 91, 165, 0.08), transparent 40%, rgba(255, 138, 61, 0.08));
}

.dubai-persona-card.is-blonde {
  border-color: rgba(255, 209, 102, 0.24);
}

.dubai-persona-card.is-black {
  border-color: rgba(255, 104, 190, 0.24);
}

.dubai-persona-media {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.88fr 0.88fr;
  gap: 10px;
  min-height: 420px;
}

.dubai-persona-media video,
.dubai-persona-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.dubai-persona-media > :nth-child(2) {
  margin-top: 36px;
}

.dubai-persona-media > :nth-child(3) {
  margin-top: -24px;
}

.dubai-persona-card h3 {
  margin: 12px 0 12px;
  color: #fff8ee;
  font-size: clamp(1.5rem, 2.6vw, 3rem);
  line-height: 1.03;
}

.dubai-persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.dubai-persona-tags b {
  padding: 8px 10px;
  color: #1b070d;
  background: linear-gradient(135deg, rgba(255, 90, 165, 0.95), rgba(255, 209, 102, 0.95));
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-talk-studio {
  position: relative;
  padding-top: clamp(42px, 7vw, 98px);
}

.dubai-talk-studio::before {
  content: "";
  position: absolute;
  inset: 4% -8% auto;
  height: 320px;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 40%, rgba(255, 90, 165, 0.18), transparent 34%),
    radial-gradient(circle at 74% 42%, rgba(255, 138, 61, 0.18), transparent 32%);
  filter: blur(8px);
}

.dubai-talk-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.dubai-talk-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.09), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028));
  border: 1px solid rgba(255, 164, 104, 0.24);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.dubai-talk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.16), transparent 57%),
    linear-gradient(180deg, transparent, rgba(255, 90, 165, 0.09));
  transform: translateX(-130%);
  animation: dubaiTalkScan 5.8s ease-in-out infinite;
}

.dubai-talk-card.is-blonde {
  border-color: rgba(255, 209, 102, 0.34);
}

.dubai-talk-card.is-black {
  border-color: rgba(255, 96, 190, 0.28);
}

.dubai-talk-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #050203;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
}

.dubai-talk-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dubai-talk-frame span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 10px;
  color: #1a070c;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.94), rgba(255, 125, 103, 0.94));
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.dubai-talk-copy {
  position: relative;
  z-index: 1;
  padding: 18px 4px 4px;
}

.dubai-talk-copy b {
  color: var(--dubai-gold);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-talk-copy h3 {
  margin: 8px 0 10px;
  color: #fff8ee;
  font-size: clamp(1.25rem, 1.8vw, 2rem);
  line-height: 1.05;
}

.dubai-talk-copy p {
  margin: 0;
  color: var(--dubai-muted);
  font-size: 0.94rem;
  line-height: 1.58;
}

.dubai-talk-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.dubai-talk-copy i {
  padding: 7px 9px;
  color: rgba(255, 248, 238, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-character-vault {
  padding-block: clamp(54px, 8vw, 112px);
}

.dubai-character-card {
  --character-accent: var(--dubai-pink);
  position: relative;
  margin-top: 24px;
  padding: clamp(16px, 2.8vw, 34px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--character-accent) 22%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.025));
  border: 1px solid color-mix(in srgb, var(--character-accent) 42%, transparent);
  border-radius: 28px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.dubai-character-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--character-accent) 16%, transparent), transparent 36%, rgba(255, 209, 102, 0.08)),
    linear-gradient(115deg, transparent 0 43%, rgba(255, 255, 255, 0.12), transparent 56%);
  transform: translateX(-115%);
  animation: dubaiTalkScan 7s ease-in-out infinite;
}

.dubai-character-card.is-red {
  --character-accent: #ff5d79;
}

.dubai-character-card.is-black {
  --character-accent: #ce74ff;
}

.dubai-character-card.is-blonde {
  --character-accent: #ffd166;
}

.dubai-character-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.dubai-character-head span {
  display: block;
  color: var(--character-accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-character-head h3 {
  max-width: 860px;
  margin: 8px 0 0;
  color: #fff8ee;
  font-size: clamp(1.55rem, 2.5vw, 3rem);
  line-height: 1.03;
}

.dubai-character-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.dubai-character-stats b {
  padding: 9px 11px;
  color: #17070c;
  background: linear-gradient(135deg, var(--character-accent), var(--dubai-gold));
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-character-reels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.dubai-character-reels article {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26);
}

.dubai-character-reels article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.64));
}

.dubai-character-reels video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.dubai-character-reels span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 8px 9px;
  color: #18070c;
  background: linear-gradient(135deg, var(--character-accent), var(--dubai-gold));
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.dubai-special-carousel {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  overflow: hidden;
  padding: 14px 0 2px;
  border-top: 1px solid color-mix(in srgb, var(--character-accent) 34%, transparent);
}

.dubai-special-carousel::before,
.dubai-special-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 120px;
  pointer-events: none;
}

.dubai-special-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(17, 4, 9, 0.98), transparent);
}

.dubai-special-carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(17, 4, 9, 0.98), transparent);
}

.dubai-special-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: dubaiCharacterCarousel 34s linear infinite;
}

.dubai-special-track.is-slower {
  animation-duration: 42s;
}

.dubai-special-track.is-fast {
  animation-duration: 28s;
}

.dubai-special-carousel:hover .dubai-special-track {
  animation-play-state: paused;
}

.dubai-special-track img {
  width: min(24vw, 260px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid color-mix(in srgb, var(--character-accent) 38%, transparent);
  border-radius: 16px;
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.26);
}

.dubai-audio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.dubai-wave {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 72px;
  margin: 18px 0;
}

.dubai-wave i {
  width: 100%;
  height: 36%;
  background: linear-gradient(180deg, var(--dubai-gold), var(--dubai-pink));
  border-radius: 999px;
  animation: dubaiWave 1.2s ease-in-out infinite;
}

.dubai-wave i:nth-child(2) { height: 78%; animation-delay: -0.2s; }
.dubai-wave i:nth-child(3) { height: 48%; animation-delay: -0.5s; }
.dubai-wave i:nth-child(4) { height: 92%; animation-delay: -0.35s; }
.dubai-wave i:nth-child(5) { height: 58%; animation-delay: -0.7s; }

.dubai-audio-grid audio {
  width: 100%;
  height: 34px;
  filter: sepia(0.25) saturate(1.2);
}

.dubai-impact-grid strong {
  font-size: clamp(2rem, 3.6vw, 4rem);
  line-height: 0.95;
}

.dubai-meter,
.dubai-bars,
.dubai-node-map,
.dubai-pulse-dot {
  height: 92px;
  margin: 16px 0;
}

.dubai-meter {
  display: grid;
  align-items: end;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dubai-meter i {
  display: block;
  width: var(--w);
  height: 9px;
  background: linear-gradient(90deg, var(--dubai-pink), var(--dubai-gold));
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(255, 91, 165, 0.42);
  animation: dubaiMeter 2.4s ease-in-out infinite;
}

.dubai-bars {
  display: flex;
  align-items: end;
  gap: 8px;
}

.dubai-bars i {
  flex: 1;
  height: 28%;
  background: linear-gradient(180deg, var(--dubai-gold), var(--dubai-orange));
  border-radius: 8px 8px 2px 2px;
  animation: dubaiBarWave 2.2s ease-in-out infinite;
}

.dubai-bars i:nth-child(2) { height: 52%; animation-delay: -0.3s; }
.dubai-bars i:nth-child(3) { height: 76%; animation-delay: -0.6s; }
.dubai-bars i:nth-child(4) { height: 92%; animation-delay: -0.9s; }

.dubai-node-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
}

.dubai-node-map::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--dubai-pink), var(--dubai-orange), var(--dubai-gold));
}

.dubai-node-map i {
  z-index: 1;
  width: 18px;
  height: 18px;
  background: #ffd166;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(255, 209, 102, 0.65);
  animation: dubaiPulse 2.4s ease-in-out infinite;
}

.dubai-node-map i:nth-child(2) { animation-delay: -0.4s; }
.dubai-node-map i:nth-child(3) { animation-delay: -0.8s; }
.dubai-node-map i:nth-child(4) { animation-delay: -1.2s; }

.dubai-pulse-dot {
  display: grid;
  place-items: center;
}

.dubai-pulse-dot i {
  width: 38px;
  height: 38px;
  background: radial-gradient(circle, #fff 0 20%, var(--dubai-pink) 22% 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 91, 165, 0.5);
  animation: dubaiPulseRing 1.8s ease-in-out infinite;
}

.dubai-delivery-grid article {
  padding: 12px;
}

.dubai-delivery-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
}

.dubai-delivery-grid h3 {
  margin: 16px 8px 8px;
  color: #fff8ee;
  font-size: 1.25rem;
}

.dubai-delivery-grid p {
  margin: 0 8px 10px;
}

.dubai-signal-board {
  position: relative;
}

.dubai-signal-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(18px, 4vw, 52px);
  align-items: stretch;
  margin-top: 28px;
}

.dubai-signal-radar {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(255, 209, 102, 0.13), transparent 52%),
    linear-gradient(145deg, rgba(255, 90, 165, 0.12), rgba(255, 138, 61, 0.055)),
    rgba(255, 255, 255, 0.032);
  border: 1px solid rgba(255, 164, 104, 0.24);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 34px 100px rgba(0, 0, 0, 0.28);
}

.dubai-signal-radar::before {
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 209, 102, 0.5), rgba(255, 90, 165, 0.12), transparent 42%);
  opacity: 0.72;
  animation: dubaiRadarSpin 7s linear infinite;
}

.dubai-signal-radar::after {
  content: "";
  position: absolute;
  inset: 18px;
  background:
    linear-gradient(transparent 49%, rgba(255, 209, 102, 0.13) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(255, 209, 102, 0.13) 50%, transparent 51%);
  opacity: 0.48;
}

.dubai-signal-radar .radar-ring {
  position: absolute;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 209, 102, 0.18);
  border-radius: 50%;
}

.dubai-signal-radar .radar-ring:nth-child(1) { width: 28%; }
.dubai-signal-radar .radar-ring:nth-child(2) { width: 48%; }
.dubai-signal-radar .radar-ring:nth-child(3) { width: 68%; }

.dubai-signal-radar i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  padding: 8px 10px;
  color: #19070c;
  background: linear-gradient(135deg, var(--dubai-gold), var(--dubai-pink));
  border-radius: 999px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.36);
  animation: dubaiBeacon 2.6s ease-in-out infinite;
  animation-delay: var(--d);
}

.dubai-signal-radar b {
  position: relative;
  z-index: 3;
  color: #fff8ee;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 950;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255, 90, 165, 0.32);
}

.dubai-signal-feed {
  display: grid;
  gap: 14px;
}

.dubai-signal-feed article,
.dubai-signal-metrics article,
.dubai-offer-card,
.dubai-matrix-grid article,
.dubai-economy-grid article,
.dubai-calendar-grid article {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(255, 91, 165, 0.1), rgba(255, 138, 61, 0.05)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 164, 104, 0.22);
  border-radius: 20px;
}

.dubai-signal-feed article {
  min-height: 130px;
  padding: 22px;
}

.dubai-signal-feed article::before,
.dubai-offer-card::before,
.dubai-matrix-grid article::before,
.dubai-economy-grid article::before,
.dubai-calendar-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.14), transparent 58%);
  transform: translateX(-125%);
  animation: dubaiTalkScan 7.4s ease-in-out infinite;
}

.dubai-signal-feed span,
.dubai-offer-card span,
.dubai-matrix-grid span,
.dubai-economy-grid span,
.dubai-calendar-grid b {
  display: block;
  margin-bottom: 12px;
}

.dubai-calendar-grid span {
  display: block;
}

.dubai-calendar-grid strong {
  margin-top: 0;
}

.dubai-calendar-grid b {
  color: var(--dubai-gold);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-signal-feed strong,
.dubai-offer-card strong,
.dubai-matrix-grid strong,
.dubai-economy-grid strong,
.dubai-calendar-grid strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 10px 0 8px;
  color: #fff8ee;
  font-size: clamp(1.05rem, 1.55vw, 1.55rem);
  line-height: 1.08;
}

.dubai-signal-feed p,
.dubai-offer-card p,
.dubai-matrix-grid p,
.dubai-economy-grid p,
.dubai-calendar-grid span,
.dubai-final-deck p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--dubai-muted);
  font-size: 0.92rem;
  line-height: 1.58;
}

.dubai-signal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dubai-signal-metrics article {
  padding: 18px;
}

.dubai-signal-metrics b {
  display: block;
  color: #fff8ee;
  font-size: clamp(1.6rem, 2.8vw, 3rem);
  line-height: 0.95;
}

.dubai-signal-metrics span {
  display: block;
  margin: 8px 0 16px;
  color: var(--dubai-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dubai-signal-metrics i {
  display: block;
  height: 7px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
}

.dubai-signal-metrics i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  background: linear-gradient(90deg, var(--dubai-pink), var(--dubai-gold));
  border-radius: inherit;
  animation: dubaiBarFill 2.6s ease-in-out infinite;
}

.dubai-route-map {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: center;
}

.dubai-route-copy h2 {
  margin: 12px 0 18px;
  color: #fff6ec;
  font-size: clamp(1.75rem, 2.75vw, 3.2rem);
  line-height: 1.04;
}

.dubai-route-copy p {
  color: var(--dubai-muted);
  font-size: clamp(0.95rem, 1.12vw, 1.08rem);
  line-height: 1.72;
}

.dubai-map-canvas {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  padding: 28px;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 209, 102, 0.13), transparent 28%),
    radial-gradient(circle at 18% 76%, rgba(255, 90, 165, 0.16), transparent 30%),
    rgba(255, 255, 255, 0.032);
  border: 1px solid rgba(255, 164, 104, 0.22);
  border-radius: 28px;
}

.dubai-map-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.56;
}

.dubai-map-line {
  position: absolute;
  left: 12%;
  right: 10%;
  top: 50%;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--dubai-gold) 0 18px, transparent 18px 32px);
  filter: drop-shadow(0 0 16px rgba(255, 209, 102, 0.42));
  transform: rotate(-8deg);
  animation: dubaiDash 2.4s linear infinite;
}

.map-tile {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  width: min(27%, 250px);
  aspect-ratio: 9 / 13;
  background: #090306;
  border: 1px solid rgba(255, 209, 102, 0.26);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  animation: dubaiPhoneFloat 7s ease-in-out infinite;
}

.map-tile-main {
  left: 5%;
  top: 13%;
  width: min(34%, 310px);
  transform: rotate(-4deg);
}

.map-tile:nth-of-type(2) {
  left: 37%;
  bottom: 9%;
  transform: rotate(3deg);
  animation-delay: -2s;
}

.map-tile:nth-of-type(3) {
  right: 7%;
  top: 7%;
  transform: rotate(5deg);
  animation-delay: -4s;
}

.map-tile:nth-of-type(4) {
  right: 24%;
  bottom: 4%;
  transform: rotate(-3deg);
  animation-delay: -5.5s;
}

.map-tile video,
.map-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-tile span,
.map-pin {
  position: absolute;
  z-index: 3;
  color: #19070c;
  background: linear-gradient(135deg, var(--dubai-gold), var(--dubai-pink));
  font-weight: 950;
  text-transform: uppercase;
}

.map-tile span {
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 9px;
  border-radius: 999px;
  font-size: 0.58rem;
  text-align: center;
}

.map-pin {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.42);
  animation: dubaiBeacon 2.8s ease-in-out infinite;
}

.map-pin b {
  font-size: 1rem;
}

.map-pin small {
  font-size: 0.54rem;
}

.pin-one { left: 25%; top: 50%; }
.pin-two { left: 56%; top: 34%; animation-delay: -0.8s; }
.pin-three { right: 10%; bottom: 26%; animation-delay: -1.5s; }

.dubai-offer-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.dubai-offer-card {
  min-height: 330px;
  padding: 26px;
}

.dubai-offer-card.is-featured {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 90, 165, 0.2), rgba(255, 138, 61, 0.1));
  border-color: rgba(255, 209, 102, 0.4);
  transform: translateY(-16px);
}

.dubai-offer-card div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.dubai-offer-card i {
  padding: 7px 9px;
  color: #19070c;
  background: linear-gradient(135deg, var(--dubai-gold), var(--dubai-orange));
  border-radius: 999px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.dubai-conversion-ladder {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  background: rgba(10, 3, 6, 0.76);
  border: 1px solid rgba(255, 209, 102, 0.24);
  border-radius: 20px;
}

.dubai-conversion-ladder b {
  position: relative;
  padding: 18px 12px;
  color: #fff8ee;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-size: 0.74rem;
  text-align: center;
  text-transform: uppercase;
}

.dubai-conversion-ladder b::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 3px;
  background: linear-gradient(90deg, var(--dubai-pink), var(--dubai-gold));
  border-radius: 999px;
  animation: dubaiMeter 2.4s ease-in-out infinite;
}

.dubai-persona-matrix {
  position: relative;
}

.dubai-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.dubai-matrix-grid article {
  min-height: 310px;
  padding: 24px;
}

.dubai-matrix-bars {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 100px;
  margin: 22px 0;
}

.dubai-matrix-bars i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--dubai-pink), var(--dubai-gold));
  border-radius: 999px 999px 4px 4px;
  animation: dubaiBarWave 2.5s ease-in-out infinite;
}

.dubai-matrix-bars.is-alt i {
  background: linear-gradient(180deg, #ce74ff, var(--dubai-orange));
}

.dubai-matrix-orbit,
.dubai-matrix-pulse {
  position: relative;
  height: 100px;
  margin: 22px 0;
}

.dubai-matrix-orbit {
  border: 1px solid rgba(255, 209, 102, 0.18);
  border-radius: 999px;
}

.dubai-matrix-orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--dubai-gold);
  border-radius: 50%;
  transform-origin: -48px center;
  animation: dubaiOrbit 4s linear infinite;
}

.dubai-matrix-orbit i:nth-child(2) { animation-delay: -1.3s; }
.dubai-matrix-orbit i:nth-child(3) { animation-delay: -2.6s; }

.dubai-matrix-pulse {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.dubai-matrix-pulse i {
  align-self: center;
  height: 58px;
  background: linear-gradient(180deg, var(--dubai-gold), var(--dubai-pink));
  border-radius: 16px;
  animation: dubaiPulse 2.1s ease-in-out infinite;
}

.dubai-matrix-pulse i:nth-child(2) { animation-delay: -0.3s; }
.dubai-matrix-pulse i:nth-child(3) { animation-delay: -0.6s; }
.dubai-matrix-pulse i:nth-child(4) { animation-delay: -0.9s; }

.dubai-economy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}

.dubai-economy-grid article {
  min-height: 300px;
  padding: 26px;
}

.dubai-economy-grid article.is-fast {
  border-color: rgba(255, 209, 102, 0.4);
  box-shadow: 0 28px 80px rgba(255, 91, 165, 0.12);
}

.economy-rail {
  display: flex;
  gap: 8px;
  margin-top: 30px;
}

.economy-rail i {
  flex: 1;
  height: 12px;
  background: linear-gradient(90deg, var(--dubai-pink), var(--dubai-orange));
  border-radius: 999px;
  animation: dubaiMeter 2s ease-in-out infinite;
}

.economy-rail i:nth-child(2) { animation-delay: -0.2s; }
.economy-rail i:nth-child(3) { animation-delay: -0.4s; }
.economy-rail i:nth-child(4) { animation-delay: -0.6s; }
.economy-rail i:nth-child(5) { animation-delay: -0.8s; }

.economy-spark {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-top: 26px;
}

.economy-spark i {
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0 15%, var(--dubai-gold) 18%, var(--dubai-pink));
  border-radius: 50%;
  animation: dubaiBeacon 2.5s ease-in-out infinite;
}

.economy-spark i:nth-child(2n) { animation-delay: -0.5s; }
.economy-spark i:nth-child(3n) { animation-delay: -1s; }

.dubai-calendar-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.dubai-calendar-grid article {
  min-height: 142px;
  padding: 18px;
  animation: dubaiCalendarGlow 4s ease-in-out infinite;
}

.dubai-calendar-grid article:nth-child(2n) { animation-delay: -0.7s; }
.dubai-calendar-grid article:nth-child(3n) { animation-delay: -1.4s; }

.dubai-calendar-grid .calendar-lead {
  grid-row: span 2;
  min-height: 294px;
  background:
    radial-gradient(circle at 68% 22%, rgba(255, 209, 102, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(255, 90, 165, 0.18), rgba(255, 138, 61, 0.08));
}

.dubai-calendar-grid .calendar-wide {
  grid-column: span 7;
}

.dubai-final-deck {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.7fr);
  gap: clamp(22px, 4vw, 58px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 96px);
  padding-inline: clamp(18px, 4vw, 44px);
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 209, 102, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(255, 90, 165, 0.16), rgba(255, 138, 61, 0.08)),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 164, 104, 0.24);
  border-radius: 30px;
}

.dubai-final-deck h2 {
  margin: 12px 0 18px;
  color: #fff8ee;
  font-size: clamp(1.9rem, 3.4vw, 4rem);
  line-height: 1.02;
}

.dubai-final-stack {
  display: grid;
  gap: 10px;
}

.dubai-final-stack span {
  padding: 18px;
  color: #19070c;
  background: linear-gradient(135deg, var(--dubai-gold), var(--dubai-pink));
  border-radius: 16px;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(calc(var(--i, 0) * 1px));
  animation: dubaiFinalSlide 4.8s ease-in-out infinite;
}

.dubai-final-stack span:nth-child(2) { animation-delay: -0.5s; }
.dubai-final-stack span:nth-child(3) { animation-delay: -1s; }
.dubai-final-stack span:nth-child(4) { animation-delay: -1.5s; }
.dubai-final-stack span:nth-child(5) { animation-delay: -2s; }
.dubai-final-stack span:nth-child(6) { animation-delay: -2.5s; }

@keyframes dubaiScan {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(10%); }
}

@keyframes dubaiPhoneFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

@keyframes dubaiMeter {
  0%, 100% { transform: scaleX(0.72); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
}

@keyframes dubaiAura {
  0%, 100% { opacity: 0.7; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(0, -2%, 0); }
}

@keyframes dubaiPulse {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes dubaiStamp {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-10px); }
}

@keyframes dubaiBarFill {
  0% { transform: scaleX(0.15); transform-origin: left; }
  55%, 100% { transform: scaleX(1); transform-origin: left; }
}

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

@keyframes dubaiCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 7px)); }
}

@keyframes dubaiWave {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

@keyframes dubaiBarWave {
  0%, 100% { filter: brightness(0.86); transform: scaleY(0.82); transform-origin: bottom; }
  50% { filter: brightness(1.15); transform: scaleY(1); transform-origin: bottom; }
}

@keyframes dubaiPulseRing {
  0% { box-shadow: 0 0 0 0 rgba(255, 91, 165, 0.5), 0 0 32px rgba(255, 138, 61, 0.28); }
  100% { box-shadow: 0 0 0 34px rgba(255, 91, 165, 0), 0 0 32px rgba(255, 138, 61, 0.28); }
}

@keyframes dubaiTalkScan {
  0%, 38% { transform: translateX(-130%); opacity: 0; }
  48% { opacity: 1; }
  72%, 100% { transform: translateX(130%); opacity: 0; }
}

@keyframes dubaiCharacterCarousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 6px)); }
}

@keyframes dubaiRadarSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dubaiBeacon {
  0%, 100% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.38); }
  50% { transform: scale(1); box-shadow: 0 0 0 18px rgba(255, 209, 102, 0); }
}

@keyframes dubaiDash {
  0% { background-position: 0 0; }
  100% { background-position: 64px 0; }
}

@keyframes dubaiOrbit {
  0% { transform: rotate(0deg) translateX(48px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(48px) rotate(-360deg); }
}

@keyframes dubaiCalendarGlow {
  0%, 100% { border-color: rgba(255, 164, 104, 0.2); filter: brightness(0.95); }
  50% { border-color: rgba(255, 209, 102, 0.38); filter: brightness(1.08); }
}

@keyframes dubaiFinalSlide {
  0%, 100% { transform: translateX(0); filter: brightness(0.95); }
  50% { transform: translateX(-16px); filter: brightness(1.1); }
}

@media (max-width: 1180px) {
  .dubai-hero-detail,
  .dubai-command-grid,
  .dubai-signal-layout,
  .dubai-route-map,
  .dubai-final-deck,
  .dubai-persona-card {
    grid-template-columns: 1fr;
  }

  .dubai-hero-media {
    min-height: 600px;
  }

  .dubai-ops-cards,
  .dubai-impact-grid,
  .dubai-delivery-grid,
  .dubai-audio-grid,
  .dubai-signal-metrics,
  .dubai-offer-layout,
  .dubai-matrix-grid,
  .dubai-economy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dubai-talk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dubai-character-head {
    grid-template-columns: 1fr;
  }

  .dubai-character-stats {
    justify-content: flex-start;
  }

  .dubai-reel-grid,
  .dubai-cover-wall,
  .dubai-calendar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dubai-calendar-grid .calendar-lead,
  .dubai-calendar-grid .calendar-wide {
    grid-column: span 3;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .project-preview-dubai .dubai-preview-media {
    min-height: 360px;
  }

  .dubai-hero-detail {
    min-height: auto;
    padding-top: 42px;
  }

  .dubai-hero-copy h2,
  .dubai-section-copy h2 {
    font-size: clamp(1.65rem, 9vw, 2.55rem);
    line-height: 1.05;
  }

  .dubai-hero-media {
    min-height: 520px;
  }

  .dubai-phone.is-main {
    width: 54%;
    left: 0;
  }

  .dubai-phone:not(.is-main):nth-of-type(2) {
    width: 40%;
    right: 0;
  }

  .dubai-phone:not(.is-main):nth-of-type(3) {
    width: 38%;
    right: 18%;
  }

  .dubai-pipeline,
  .dubai-ops-cards,
  .dubai-impact-grid,
  .dubai-delivery-grid,
  .dubai-audio-grid,
  .dubai-talk-grid,
  .dubai-signal-metrics,
  .dubai-offer-layout,
  .dubai-conversion-ladder,
  .dubai-matrix-grid,
  .dubai-economy-grid,
  .dubai-calendar-grid,
  .dubai-persona-media {
    grid-template-columns: 1fr;
  }

  .dubai-signal-radar,
  .dubai-map-canvas {
    min-height: 460px;
  }

  .map-tile {
    width: 40%;
  }

  .map-tile-main {
    width: 52%;
  }

  .pin-one { left: 12%; top: 52%; }
  .pin-two { left: 48%; top: 36%; }
  .pin-three { right: 4%; bottom: 22%; }

  .dubai-offer-card.is-featured {
    transform: none;
  }

  .dubai-calendar-grid .calendar-lead,
  .dubai-calendar-grid .calendar-wide {
    grid-column: auto;
    min-height: 160px;
  }

  .dubai-pipeline article:not(:last-child)::after {
    display: none;
  }

  .dubai-reel-grid,
  .dubai-cover-wall {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .dubai-reel-grid article,
  .dubai-cover-wall img {
    flex: 0 0 66%;
    scroll-snap-align: start;
  }

  .dubai-carousel-track img {
    width: 62vw;
  }

  .dubai-character-reels {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .dubai-character-reels article {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  .dubai-special-track img {
    width: 58vw;
  }
}

/* Final no-removal revision layer */
.nav-work-button {
  padding-inline: 14px;
  font-size: 0.72rem;
}

.brand small {
  max-width: 260px;
  white-space: normal;
  line-height: 1.15;
}

.mobile-menu > span {
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mobile-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.v2-preview h1,
.panel-head h2,
.section-heading h2,
.home-featured h2,
#panel-about .panel-head h2,
#panel-contact .panel-head h2,
.projects-overview > .panel-head h2 {
  max-width: 980px;
  font-size: clamp(2.1rem, 5.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.section-heading p,
.panel-head p,
.hero-copy p {
  max-width: 760px;
  font-size: clamp(0.98rem, 1.2vw, 1.16rem);
  line-height: 1.68;
}

.hero-actions .button:first-child {
  box-shadow: 0 0 0 1px rgba(148, 255, 56, 0.28), 0 20px 54px rgba(148, 255, 56, 0.2);
}

.hero-roles {
  align-items: flex-start;
}

.hero-roles span {
  white-space: normal;
}

.logo-flow-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.logo-flow-tabs button,
.footer-links button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
}

.logo-flow-tabs .is-active {
  color: #020403;
  background: var(--accent);
}

.logo-flow-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.logo-flow-notes article,
.positioning-microcopy,
.role-note,
.ethical-note,
.aipo-score-note,
.archive-context,
.process-note {
  border: 1px solid rgba(148, 255, 56, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.logo-flow-notes article {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.logo-flow-notes strong,
.role-note p,
.ethical-note strong {
  color: var(--ink);
}

.logo-flow-notes span,
.role-note small,
.ethical-note p,
.aipo-score-note,
.archive-context p {
  color: rgba(246, 243, 237, 0.68);
  line-height: 1.6;
}

.positioning-microcopy {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 16px 18px;
  color: rgba(246, 243, 237, 0.78);
  font-weight: 800;
}

.case-priority p {
  margin: 12px 0 16px;
  color: rgba(246, 243, 237, 0.66);
  line-height: 1.55;
}

.case-priority button {
  justify-self: start;
  color: #020403;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 950;
}

.audience-section,
.why-section,
.work-process,
.delivery-formats {
  margin-top: 26px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(148, 255, 56, 0.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 16% 10%, rgba(148, 255, 56, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.audience-grid,
.why-grid,
.process-steps,
.format-cloud,
.aipo-value-grid {
  display: grid;
  gap: 12px;
}

.audience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.why-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.process-steps {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.audience-grid article,
.why-grid article,
.process-steps article,
.aipo-value-grid article {
  position: relative;
  min-height: 170px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 255, 56, 0.16);
  border-radius: 8px;
  background: rgba(1, 7, 5, 0.66);
}

.audience-grid article::after,
.why-grid article::after,
.process-steps article::after,
.aipo-value-grid article::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #28ddff);
  transform: scaleX(0.38);
  transform-origin: left;
  transition: transform 280ms ease;
}

.audience-grid article:hover::after,
.why-grid article:hover::after,
.process-steps article:hover::after,
.aipo-value-grid article:hover::after {
  transform: scaleX(1);
}

.audience-grid span,
.process-steps span,
.aipo-value-grid span,
.why-grid strong {
  color: var(--accent);
  font-weight: 950;
}

.audience-grid h3,
.why-grid h3,
.process-steps h3 {
  margin: 14px 0 8px;
  color: var(--ink);
  font-size: 1.08rem;
}

.audience-grid p,
.why-grid p,
.process-steps p,
.aipo-value-grid p {
  margin: 0;
  color: rgba(246, 243, 237, 0.66);
  line-height: 1.55;
}

.format-cloud {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.format-cloud span {
  padding: 12px 14px;
  color: rgba(246, 243, 237, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 850;
  text-align: center;
}

.role-note,
.ethical-note,
.archive-context,
.aipo-score-note {
  margin: 18px 0;
  padding: 18px;
}

.role-note {
  display: grid;
  gap: 10px;
  border-color: rgba(141, 255, 70, 0.28);
}

.ethical-note {
  margin-top: 16px;
  border-color: rgba(54, 225, 255, 0.24);
}

.aipo-score-note {
  color: rgba(255, 242, 122, 0.8);
  border-color: rgba(255, 230, 58, 0.28);
  background: rgba(255, 230, 58, 0.055);
}

.aipo-studio-value {
  margin-top: 24px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(255, 230, 58, 0.32);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 230, 58, 0.035) 0 1px, transparent 1px 88px),
    linear-gradient(135deg, rgba(255, 230, 58, 0.08), rgba(0, 0, 0, 0.58));
}

.aipo-value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aipo-value-grid article {
  border-color: rgba(255, 230, 58, 0.22);
  background: rgba(5, 5, 1, 0.74);
}

.aipo-value-grid article::after {
  background: linear-gradient(90deg, var(--aipo-yellow, #ffe63a), var(--aipo-cyan, #16f7ff));
}

.home-pathways p {
  margin: 0 0 12px;
  color: rgba(246, 243, 237, 0.62);
  font-size: 0.88rem;
  line-height: 1.5;
}

.contact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form label small {
  color: rgba(246, 243, 237, 0.46);
  font-size: 0.72rem;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#panel-awards {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 208, 87, 0.14), transparent 28%),
    radial-gradient(circle at 86% 26%, rgba(255, 235, 159, 0.08), transparent 34%);
}

#panel-awards .award-stage,
#panel-awards .milestone-list article {
  border-color: rgba(255, 211, 93, 0.34);
  box-shadow: 0 24px 90px rgba(197, 143, 44, 0.12), inset 0 1px 0 rgba(255, 238, 160, 0.18);
}

#panel-awards .milestone-list article small,
#panel-awards .award-gold-tags span {
  color: #161104;
  background: linear-gradient(135deg, #ffeaa4, #c9952d);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
}

.footer-brand {
  display: grid;
  gap: 4px;
}

.footer-brand strong {
  color: var(--ink);
  font-size: 1.1rem;
}

.footer-brand span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.footer-brand p {
  margin: 0;
  color: rgba(246, 243, 237, 0.58);
  font-size: 0.88rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.footer-links a,
.footer-links button {
  color: rgba(246, 243, 237, 0.84);
  text-decoration: none;
  font-size: 0.78rem;
}

.mobile-sticky-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 68;
  display: none;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(148, 255, 56, 0.22);
  border-radius: 999px;
  background: rgba(1, 6, 4, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(120%);
  transition: transform 220ms ease;
}

@media (max-width: 1100px) {
  .audience-grid,
  .why-grid,
  .process-steps,
  .aipo-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 780px) {
  .nav-work-button {
    display: none;
  }

  .mobile-menu {
    align-content: start;
    overflow-y: auto;
  }

  .mobile-menu button {
    min-height: 48px;
  }

  .mobile-menu-actions {
    grid-template-columns: 1fr;
    margin-bottom: 24px;
  }

  .logo-flow-notes,
  .audience-grid,
  .why-grid,
  .process-steps,
  .aipo-value-grid,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .audience-section,
  .why-section,
  .work-process,
  .delivery-formats {
    padding: 18px;
  }

  .v2-preview h1,
  .panel-head h2,
  .section-heading h2,
  .home-featured h2,
  #panel-about .panel-head h2,
  #panel-contact .panel-head h2,
  .projects-overview > .panel-head h2 {
    font-size: clamp(2rem, 11vw, 3.1rem);
    line-height: 1.02;
  }

  .has-passed-hero .mobile-sticky-cta {
    display: grid;
    transform: translateY(0);
  }

  .modal-open .mobile-sticky-cta,
  .menu-open .mobile-sticky-cta {
    display: none;
  }
}

/* Typography correction: headings should feel premium, not oversized. */
.v2-preview h1 {
  max-width: 960px !important;
  font-size: clamp(2.25rem, 4vw, 4.25rem) !important;
  line-height: 1.04 !important;
}

.panel-head h2,
.section-heading h2,
.home-featured h2,
.projects-overview > .panel-head h2,
#panel-about .panel-head h2,
#panel-about .about-events .section-heading h2,
#panel-contact .panel-head h2,
#panel-awards .panel-head h2 {
  max-width: 860px !important;
  font-size: clamp(1.55rem, 2.45vw, 2.85rem) !important;
  line-height: 1.12 !important;
}

.project-preview h3,
.sector-feature-copy h3,
.featured-case h3,
.prombt-hero-copy h2,
.prombt-section-heading h2,
.ilayda-section-heading h2,
.aipo-section-copy h2,
.aipo-store-copy h2,
.aipo-deck-copy h2,
.aipo-card-copy h2,
.aipo-hero-content h2,
.aipocalypto-detail .section-heading h2 {
  max-width: 900px !important;
  font-size: clamp(1.4rem, 2.25vw, 2.55rem) !important;
  line-height: 1.13 !important;
}

.aipo-hero-content h2 {
  max-width: 820px !important;
  font-size: clamp(1.75rem, 3vw, 3.15rem) !important;
}

.panel-head,
.section-heading,
.projects-overview > .panel-head {
  gap: 18px !important;
  margin-bottom: clamp(20px, 3vw, 36px) !important;
}

.projects-overview > .panel-head,
#panel-about .panel-head,
#panel-contact .panel-head {
  min-height: auto !important;
  padding-block: clamp(18px, 3vw, 42px) !important;
}

.panel-head p,
.section-heading p,
.project-preview p,
.sector-feature-copy p,
.aipo-section-copy p,
.aipo-hero-content p {
  max-width: 720px !important;
  font-size: clamp(0.92rem, 1vw, 1.04rem) !important;
  line-height: 1.62 !important;
}

.app-shell {
  padding-top: 24px !important;
}

body.v2-preview.is-dubai-detail-open {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 90, 165, 0.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(255, 138, 61, 0.14), transparent 34%),
    #12070c !important;
  background-size: auto !important;
}

body.is-dubai-detail-open .app-shell {
  padding: 0 !important;
}

body.is-dubai-detail-open .site-footer {
  margin-top: 0;
}

body.is-dubai-detail-open .scroll-progress span {
  background: linear-gradient(90deg, #ff5aa5, #ff8a3d, #ffd166) !important;
}

@media (max-width: 780px) {
  .v2-preview h1 {
    font-size: clamp(2rem, 9.4vw, 2.55rem) !important;
    line-height: 1.06 !important;
  }

  .panel-head h2,
  .section-heading h2,
  .home-featured h2,
  .projects-overview > .panel-head h2,
  #panel-about .panel-head h2,
  #panel-about .about-events .section-heading h2,
  #panel-contact .panel-head h2,
  #panel-awards .panel-head h2,
  .project-preview h3,
  .sector-feature-copy h3,
  .prombt-hero-copy h2,
  .prombt-section-heading h2,
  .ilayda-section-heading h2,
  .aipo-section-copy h2,
  .aipo-store-copy h2,
  .aipo-deck-copy h2,
  .aipo-card-copy h2,
  .aipo-hero-content h2 {
    font-size: clamp(1.35rem, 6.5vw, 2.05rem) !important;
    line-height: 1.14 !important;
  }

  .panel-head,
  .section-heading,
  .projects-overview > .panel-head {
    margin-bottom: 18px !important;
  }
}

/* Final readability pass: keep headings controlled across the whole portfolio. */
.v2-preview h1 {
  max-width: 820px !important;
  font-size: clamp(1.95rem, 3.1vw, 3.35rem) !important;
  line-height: 1.08 !important;
}

.panel-head h2,
.section-heading h2,
.home-featured h2,
.home-project-teaser h2,
.home-visual-flow h2,
.projects-overview > .panel-head h2,
#panel-about .panel-head h2,
#panel-about .about-events .section-heading h2,
#panel-contact .panel-head h2,
#panel-awards .panel-head h2 {
  max-width: 760px !important;
  font-size: clamp(1.25rem, 1.85vw, 2.25rem) !important;
  line-height: 1.16 !important;
}

.project-preview h3,
.sector-feature-copy h3,
.featured-case h3,
.prombt-hero-copy h2,
.prombt-section-heading h2,
.ilayda-section-heading h2,
.aipo-section-copy h2,
.aipo-store-copy h2,
.aipo-deck-copy h2,
.aipo-card-copy h2,
.aipo-hero-content h2,
.aipocalypto-detail .section-heading h2,
.why-grid h3,
.home-pathways h3 {
  max-width: 720px !important;
  font-size: clamp(1.08rem, 1.5vw, 1.85rem) !important;
  line-height: 1.18 !important;
}

.aipo-hero-content h2 {
  max-width: 720px !important;
  font-size: clamp(1.45rem, 2.15vw, 2.45rem) !important;
}

.panel-head,
.section-heading,
.projects-overview > .panel-head {
  align-items: end !important;
  gap: clamp(14px, 2.3vw, 28px) !important;
  margin-bottom: clamp(18px, 2.6vw, 30px) !important;
}

.panel-head > div,
.section-heading > div {
  min-width: 0;
}

.panel-head p,
.section-heading p,
.project-preview p,
.sector-feature-copy p,
.aipo-section-copy p,
.aipo-hero-content p,
.home-visual-flow p {
  max-width: 620px !important;
  font-size: clamp(0.88rem, 0.96vw, 1rem) !important;
  line-height: 1.58 !important;
}

.command-main > img:first-child {
  position: relative;
  z-index: 2;
  object-fit: cover;
  object-position: center;
  padding: 0;
  filter: saturate(1.1) contrast(1.07) brightness(0.94);
  box-sizing: border-box;
}

.command-main .command-logo {
  display: none;
}

.command-main {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.68)),
    url("assets/aipocalypto/library_capsule.webp") center / cover no-repeat,
    rgba(0, 0, 0, 0.78);
}

.command-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(255, 238, 66, 0.22) 49%, transparent 51%),
    linear-gradient(180deg, transparent 0 48%, rgba(98, 255, 210, 0.14) 50%, transparent 52%);
  background-size: 100% 100%, 100% 9px;
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: commandGlitch 4.8s steps(2, end) infinite;
}

.home-visual-flow {
  position: relative;
  margin-top: clamp(28px, 5vw, 64px);
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(98, 255, 178, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 18%, rgba(98, 255, 178, 0.12), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(255, 238, 66, 0.12), transparent 26%),
    linear-gradient(135deg, rgba(3, 15, 11, 0.98), rgba(0, 9, 9, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 24px 80px rgba(0, 0, 0, 0.28);
}

.home-visual-flow::before,
.home-visual-flow::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-visual-flow::before {
  inset: 0;
  background:
    linear-gradient(rgba(98, 255, 178, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 255, 178, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.45;
}

.home-visual-flow::after {
  inset: -20% -45%;
  background: linear-gradient(105deg, transparent 41%, rgba(98, 255, 178, 0.17), transparent 58%);
  transform: translateX(-50%);
  animation: visualFlowScan 6.4s ease-in-out infinite;
}

.home-visual-flow .section-heading {
  position: relative;
  z-index: 2;
}

.visual-flow-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, 190px);
  grid-auto-rows: 190px;
  gap: 12px;
  min-height: 0;
  perspective: 1200px;
}

.visual-flow-card {
  --flow-accent: var(--accent);
  --flow-delay: 0s;
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--flow-accent) 48%, transparent);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  transform-style: preserve-3d;
  animation: visualCardFloat 7.5s ease-in-out infinite;
  animation-delay: var(--flow-delay);
}

.visual-flow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.68)),
    linear-gradient(90deg, color-mix(in srgb, var(--flow-accent) 30%, transparent), transparent 38%);
}

.visual-flow-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, var(--flow-accent), transparent);
  opacity: 0.78;
  transform-origin: left;
  animation: visualSignal 2.8s ease-in-out infinite;
  animation-delay: var(--flow-delay);
}

.visual-flow-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transition: transform 520ms ease, filter 520ms ease;
}

.visual-flow-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.16) contrast(1.07);
}

.visual-flow-card span,
.visual-flow-card strong {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 5;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.68);
}

.visual-flow-card span {
  bottom: 52px;
  color: var(--flow-accent);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.visual-flow-card strong {
  bottom: 18px;
  max-width: 320px;
  color: var(--ink);
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  line-height: 1.05;
}

.visual-flow-aipo {
  --flow-accent: #ffe942;
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.visual-flow-aipo img {
  object-fit: cover;
  object-position: center;
}

.visual-flow-prombt {
  --flow-accent: #8dff45;
  --flow-delay: -1.2s;
  grid-column: 4 / 7;
  grid-row: 1;
}

.visual-flow-dubai {
  --flow-accent: #ff8a3d;
  --flow-delay: -1.8s;
  grid-column: 4 / 7;
  grid-row: 2;
}

.visual-flow-dubai::before {
  background:
    linear-gradient(180deg, rgba(70, 6, 23, 0.06), rgba(51, 8, 11, 0.76)),
    radial-gradient(circle at 16% 12%, rgba(255, 90, 165, 0.28), transparent 34%),
    linear-gradient(90deg, rgba(255, 138, 61, 0.32), transparent 42%);
}

.visual-flow-ilayda {
  --flow-accent: #5fffb2;
  --flow-delay: -2.4s;
  grid-column: 7 / 10;
  grid-row: 1 / 3;
}

.visual-flow-ilayda img {
  object-position: center 18%;
}

.visual-flow-youtube {
  --flow-accent: #ff4545;
  --flow-delay: -3.2s;
  grid-column: 10 / 13;
  grid-row: 1;
}

.visual-flow-night {
  --flow-accent: #d8a2ff;
  --flow-delay: -4.1s;
  grid-column: 10 / 13;
  grid-row: 2;
}

.visual-flow-night img {
  object-position: center;
}

@keyframes commandGlitch {
  0%,
  84%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.18;
  }
  86% {
    transform: translate3d(-8px, 0, 0);
    opacity: 0.42;
  }
  88% {
    transform: translate3d(6px, 0, 0);
    opacity: 0.28;
  }
}

@keyframes visualFlowScan {
  0%,
  22% {
    transform: translateX(-52%);
  }
  72%,
  100% {
    transform: translateX(52%);
  }
}

@keyframes visualCardFloat {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg);
  }
  50% {
    transform: translateY(-7px) rotateX(1.4deg);
  }
}

@keyframes visualSignal {
  0%,
  100% {
    transform: scaleX(0.34);
    opacity: 0.45;
  }
  50% {
    transform: scaleX(1);
    opacity: 0.9;
  }
}

@media (max-width: 980px) {
  .visual-flow-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(220px, auto);
  }

  .visual-flow-aipo,
  .visual-flow-prombt,
  .visual-flow-dubai,
  .visual-flow-ilayda,
  .visual-flow-youtube,
  .visual-flow-night {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 780px) {
  .v2-preview h1 {
    max-width: 100% !important;
    font-size: clamp(1.85rem, 8.6vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }

  .panel-head h2,
  .section-heading h2,
  .home-featured h2,
  .home-project-teaser h2,
  .home-visual-flow h2,
  .projects-overview > .panel-head h2,
  #panel-about .panel-head h2,
  #panel-about .about-events .section-heading h2,
  #panel-contact .panel-head h2,
  #panel-awards .panel-head h2,
  .project-preview h3,
  .sector-feature-copy h3,
  .featured-case h3,
  .prombt-hero-copy h2,
  .prombt-section-heading h2,
  .ilayda-section-heading h2,
  .aipo-section-copy h2,
  .aipo-store-copy h2,
  .aipo-deck-copy h2,
  .aipo-card-copy h2,
  .aipo-hero-content h2,
  .aipocalypto-detail .section-heading h2,
  .why-grid h3,
  .home-pathways h3 {
    max-width: 100% !important;
    font-size: clamp(1.08rem, 5.6vw, 1.62rem) !important;
    line-height: 1.18 !important;
  }

  .panel-head,
  .section-heading,
  .projects-overview > .panel-head {
    align-items: start !important;
    gap: 12px !important;
  }

  .home-visual-flow {
    padding: 16px;
  }

  .visual-flow-stage {
    display: flex;
    min-height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .visual-flow-card {
    flex: 0 0 78%;
    min-height: 260px;
    scroll-snap-align: start;
  }
}

/* Instagram-inspired Ilayda atmosphere */
body.is-influencer-detail-open {
  background:
    radial-gradient(circle at 12% 10%, rgba(128, 0, 255, 0.28), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(255, 0, 160, 0.26), transparent 34%),
    radial-gradient(circle at 48% 102%, rgba(255, 181, 0, 0.24), transparent 42%),
    #150019;
}

body.is-influencer-detail-open .projects-panel {
  background:
    radial-gradient(circle at 4% 18%, rgba(128, 0, 255, 0.2), transparent 32%),
    radial-gradient(circle at 94% 6%, rgba(255, 0, 170, 0.2), transparent 34%),
    #150019;
}

.influencer-detail {
  --ilayda: #ff2fb3;
  --ilayda-cyan: #ffb000;
  --ilayda-warm: #ff4a2f;
  --ig-purple: #7b2cff;
  --ig-pink: #ff00a8;
  --ig-hot: #ff2f6d;
  --ig-orange: #ff7a00;
  --ig-yellow: #ffd23f;
  --ig-ink: #fff7f1;
  --ig-muted: rgba(255, 247, 241, 0.74);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(38px, 6vw, 86px);
  color: var(--ig-ink);
  background:
    radial-gradient(circle at 18% 6%, rgba(123, 44, 255, 0.34), transparent 32%),
    radial-gradient(circle at 84% 12%, rgba(255, 0, 168, 0.32), transparent 34%),
    radial-gradient(circle at 28% 92%, rgba(255, 122, 0, 0.24), transparent 36%),
    linear-gradient(145deg, #22002c 0%, #130018 45%, #2a070b 100%);
}

.influencer-detail::before,
.influencer-detail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.influencer-detail::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.16));
}

.influencer-detail::after {
  position: fixed;
  background:
    conic-gradient(from 120deg at 50% 18%, transparent 0 18%, rgba(255, 210, 63, 0.08) 21%, transparent 32%, rgba(255, 0, 168, 0.1) 48%, transparent 66%),
    radial-gradient(circle at 50% 120%, rgba(255, 122, 0, 0.22), transparent 42%);
  filter: blur(0.2px);
  animation: ilaydaInstagramAura 13s ease-in-out infinite;
}

.influencer-detail > .detail-toolbar,
.influencer-detail > section {
  position: relative;
  z-index: 1;
}

.influencer-toolbar {
  background: rgba(24, 0, 30, 0.78);
  border-color: rgba(255, 178, 62, 0.28);
  box-shadow: 0 18px 58px rgba(255, 0, 168, 0.12);
}

.influencer-toolbar > span,
.ilayda-section-heading .kicker,
.ilayda-hero-copy .kicker,
.ilayda-origin-grid span,
.ilayda-story header span,
.ilayda-book-notes span,
.ilayda-signal span,
.growth-card-top span,
.growth-card-caption span,
.growth-evidence-copy span,
.growth-velocity-copy span {
  color: var(--ig-yellow);
  text-shadow: 0 0 18px rgba(255, 178, 0, 0.28);
}

.ilayda-hero-copy .kicker::before,
.ilayda-section-heading .kicker::before,
.ilayda-sponsor-copy .kicker::before {
  background: linear-gradient(135deg, var(--ig-purple), var(--ig-pink), var(--ig-orange));
  box-shadow: 0 0 18px rgba(255, 0, 168, 0.42);
}

.button-influencer,
.ilayda-story-controls button,
.ilayda-automation-note {
  color: #180019;
  background: linear-gradient(135deg, var(--ig-purple), var(--ig-pink) 38%, var(--ig-orange) 72%, var(--ig-yellow));
  border-color: rgba(255, 210, 63, 0.45);
  box-shadow: 0 16px 42px rgba(255, 0, 168, 0.22);
}

.button-influencer:hover {
  box-shadow: 0 20px 56px rgba(255, 122, 0, 0.28);
}

.ilayda-hero {
  background:
    radial-gradient(circle at 18% 10%, rgba(123, 44, 255, 0.34), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(255, 0, 168, 0.25), transparent 32%),
    #19001f;
  border-color: rgba(255, 178, 62, 0.3);
  border-radius: 28px;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.ilayda-hero::before,
.ilayda-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ilayda-hero::before {
  background:
    radial-gradient(circle at 68% 20%, rgba(255, 210, 63, 0.18), transparent 26%),
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.13), transparent 52%);
  mix-blend-mode: screen;
  transform: translateX(-44%);
  animation: ilaydaInstagramSweep 7.6s ease-in-out infinite;
}

.ilayda-hero::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, transparent 62%, rgba(255, 122, 0, 0.12));
  opacity: 0.62;
}

.ilayda-hero-image {
  filter: saturate(1.12) contrast(1.1) brightness(0.82);
}

.ilayda-hero-shade {
  background:
    linear-gradient(90deg, rgba(17, 0, 24, 0.98) 0%, rgba(28, 0, 42, 0.88) 44%, rgba(255, 0, 168, 0.16) 76%),
    radial-gradient(circle at 75% 26%, rgba(255, 178, 0, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(16, 0, 22, 0.14) 28%, rgba(18, 0, 20, 0.98));
}

.ilayda-hero-copy h2,
.ilayda-section-heading h2,
.ilayda-sponsor-copy h2 {
  color: var(--ig-ink);
  text-shadow: 0 0 26px rgba(255, 0, 168, 0.18);
}

.ilayda-hero-copy p,
.ilayda-section-heading p,
.ilayda-origin-grid p,
.ilayda-pipeline span,
.ilayda-book-notes p,
.growth-card-caption strong,
.growth-evidence-copy p,
.growth-velocity-labels span {
  color: var(--ig-muted);
}

.ilayda-hero-proof figure,
.ilayda-hero-feed video,
.ilayda-video-wall video,
.ilayda-proof-shot,
.ilayda-story-track img,
.ilayda-sponsor-media video,
.ilayda-extra-videos video,
.ilayda-book-notes img {
  border-color: rgba(255, 210, 63, 0.24);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.42), 0 0 32px rgba(255, 0, 168, 0.14);
}

.ilayda-hero-proof figure,
.ilayda-origin-grid article,
.ilayda-video-wall,
.ilayda-stat-console,
.ilayda-proof-shot,
.ilayda-story,
.ilayda-pipeline article,
.ilayda-extra-videos,
.ilayda-book-notes article,
.growth-card,
.growth-evidence,
.growth-phone,
.growth-velocity,
.ethical-note {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 0, 168, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(123, 44, 255, 0.12), rgba(255, 122, 0, 0.055)),
    rgba(25, 0, 31, 0.76);
  border-color: rgba(255, 178, 62, 0.22);
}

.ilayda-hero-metrics,
.ilayda-origin-grid,
.ilayda-pipeline,
.ilayda-growth-dashboard {
  background:
    linear-gradient(135deg, rgba(123, 44, 255, 0.18), rgba(255, 0, 168, 0.14), rgba(255, 122, 0, 0.12)),
    rgba(20, 0, 28, 0.72);
  border-color: rgba(255, 178, 62, 0.25);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ilayda-hero-metrics article {
  background: rgba(21, 0, 28, 0.74);
}

.ilayda-hero-metrics article + article,
.ilayda-pipeline article + article {
  border-color: rgba(255, 210, 63, 0.16);
}

.ilayda-hero-metrics strong,
.growth-value,
.growth-live i,
.growth-card-top b,
.growth-reach-total b,
.growth-verified-stamp i {
  color: var(--ig-yellow);
}

.ilayda-stat-row i,
.growth-chart-line,
.growth-reach-route,
.growth-peak-bars > i::before,
.growth-velocity-track i::after,
.growth-velocity-track::after {
  background: linear-gradient(90deg, var(--ig-purple), var(--ig-pink), var(--ig-orange), var(--ig-yellow));
}

.growth-chart-line,
.growth-chart-flow,
.growth-reach-route {
  stroke: var(--ig-yellow);
}

.growth-chart-dot,
.growth-chart-runner,
.growth-reach-particle,
.growth-peak-bars > i::after,
.growth-day-grid > i::before,
.growth-reach-source,
.growth-phone-scan,
.growth-verified-stamp,
.ilayda-hero-proof > strong {
  background: linear-gradient(135deg, var(--ig-purple), var(--ig-pink), var(--ig-orange), var(--ig-yellow));
}

.ilayda-story,
.ilayda-sponsor,
.ilayda-automation,
.ilayda-extras,
.ilayda-origin,
.ilayda-social-wall,
.ilayda-proof {
  position: relative;
}

.ilayda-story::before,
.ilayda-sponsor::before,
.ilayda-automation::before,
.ilayda-extras::before,
.ilayda-origin::before,
.ilayda-social-wall::before,
.ilayda-proof::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.08), transparent 56%),
    radial-gradient(circle at 86% 0%, rgba(255, 210, 63, 0.12), transparent 28%);
  opacity: 0.68;
  transform: translateX(-20%);
  animation: ilaydaInstagramSweep 8.8s ease-in-out infinite;
}

.ilayda-video-wall {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 210, 63, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(123, 44, 255, 0.16), rgba(255, 0, 168, 0.12), rgba(255, 122, 0, 0.08)),
    rgba(16, 0, 24, 0.88);
}

.ilayda-video-wall video,
.ilayda-hero-feed video {
  border-radius: 20px;
  animation: ilaydaInstaFloat 6.8s ease-in-out infinite;
}

.ilayda-video-wall video:nth-child(2n),
.ilayda-hero-feed video:nth-child(2) {
  animation-delay: -2.2s;
}

.ilayda-video-wall video:nth-child(3n),
.ilayda-hero-feed video:last-child {
  animation-delay: -4s;
}

.ilayda-sponsor {
  background:
    radial-gradient(circle at 18% 18%, rgba(123, 44, 255, 0.18), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(255, 210, 63, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(255, 0, 168, 0.16), rgba(255, 122, 0, 0.08)),
    rgba(18, 0, 24, 0.82);
  border-color: rgba(255, 178, 62, 0.26);
  border-radius: 26px;
}

.ilayda-sponsor-media {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 210, 63, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 0, 168, 0.1), transparent 52%),
    rgba(12, 0, 18, 0.76);
}

.ilayda-sponsor-tags span,
.ilayda-talk-copy i,
.ilayda-story header span {
  border-color: rgba(255, 210, 63, 0.28);
}

.ilayda-story-track {
  scrollbar-color: rgba(255, 0, 168, 0.72) rgba(255, 255, 255, 0.08);
}

.ilayda-automation-note strong,
.ilayda-automation-note span {
  color: #180019;
}

.ilayda-book-notes article {
  border-radius: 22px;
}

@keyframes ilaydaInstagramAura {
  0%,
  100% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -1.5%, 0) rotate(1deg);
  }
}

@keyframes ilaydaInstagramSweep {
  0%,
  34% {
    transform: translateX(-48%);
    opacity: 0;
  }
  48% {
    opacity: 0.85;
  }
  76%,
  100% {
    transform: translateX(48%);
    opacity: 0;
  }
}

@keyframes ilaydaInstaFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    filter: saturate(1.04);
  }
  50% {
    transform: translateY(-10px) rotate(0.7deg);
    filter: saturate(1.18);
  }
}

/* Stronger Instagram-gradient Ilayda pass */
body.is-influencer-detail-open {
  background:
    linear-gradient(135deg, #4d14ff 0%, #b000ff 20%, #ff00a8 42%, #ff315f 58%, #ff7a00 78%, #ffd23f 100%) !important;
}

body.is-influencer-detail-open .app-shell,
body.is-influencer-detail-open .projects-panel {
  background:
    linear-gradient(rgba(17, 0, 23, 0.72) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(145deg, rgba(78, 20, 255, 0.52) 0%, rgba(188, 0, 255, 0.46) 22%, rgba(255, 0, 168, 0.5) 48%, rgba(255, 72, 54, 0.46) 68%, rgba(255, 176, 0, 0.38) 100%),
    #170018 !important;
  background-size: 46px 46px, 46px 46px, auto, auto !important;
}

body.is-influencer-detail-open .site-header {
  background:
    linear-gradient(135deg, rgba(32, 0, 42, 0.96), rgba(90, 0, 92, 0.84), rgba(255, 0, 123, 0.26)) !important;
  border-color: rgba(255, 210, 63, 0.2);
  box-shadow: 0 18px 60px rgba(255, 0, 168, 0.18);
}

body.is-influencer-detail-open .scroll-progress span {
  background: linear-gradient(90deg, #7b2cff, #ff00a8, #ff7a00, #ffd23f);
}

.influencer-detail {
  background:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(142deg, rgba(65, 22, 255, 0.54) 0%, rgba(178, 0, 255, 0.48) 24%, rgba(255, 0, 168, 0.5) 45%, rgba(255, 54, 88, 0.46) 60%, rgba(255, 122, 0, 0.42) 80%, rgba(255, 210, 63, 0.32) 100%),
    #170018 !important;
  background-size: 58px 58px, 58px 58px, auto, auto !important;
}

.influencer-detail::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.13), transparent 17%, transparent 68%, rgba(255, 210, 63, 0.1)),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 18px) !important;
  opacity: 0.72;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.34));
  animation: ilaydaInstagramSweep 9.5s ease-in-out infinite;
}

.influencer-detail::after {
  background:
    conic-gradient(from 150deg at 54% 22%, rgba(123, 44, 255, 0.26), rgba(255, 0, 168, 0.24), rgba(255, 122, 0, 0.18), rgba(255, 210, 63, 0.12), rgba(123, 44, 255, 0.26)) !important;
  mix-blend-mode: screen;
  opacity: 0.78;
}

.influencer-toolbar,
.influencer-detail .detail-toolbar {
  background:
    linear-gradient(135deg, rgba(47, 0, 56, 0.86), rgba(139, 0, 140, 0.56), rgba(255, 88, 0, 0.18)) !important;
  border-color: rgba(255, 210, 63, 0.34) !important;
}

.ilayda-hero {
  background:
    linear-gradient(135deg, rgba(67, 16, 255, 0.28), rgba(255, 0, 168, 0.25), rgba(255, 122, 0, 0.18)),
    #170018 !important;
  border-color: rgba(255, 210, 63, 0.42) !important;
  box-shadow:
    0 38px 110px rgba(52, 0, 66, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 54px rgba(255, 0, 168, 0.22) !important;
}

.ilayda-hero::before {
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(135deg, rgba(123, 44, 255, 0.18), rgba(255, 0, 168, 0.2), rgba(255, 122, 0, 0.14)) !important;
  animation-duration: 5.8s;
}

.ilayda-hero-shade {
  background:
    linear-gradient(90deg, rgba(23, 0, 29, 0.96) 0%, rgba(38, 0, 49, 0.88) 42%, rgba(255, 0, 168, 0.18) 73%, rgba(255, 122, 0, 0.1) 100%),
    linear-gradient(180deg, rgba(40, 0, 50, 0.08), rgba(24, 0, 25, 0.94)) !important;
}

.ilayda-hero-copy h2 {
  max-width: 760px;
  font-size: clamp(2.35rem, 4.8vw, 5.25rem);
  line-height: 0.98;
}

.ilayda-origin,
.ilayda-social-wall,
.ilayda-proof,
.ilayda-story,
.ilayda-sponsor,
.ilayda-automation,
.ilayda-extras {
  background:
    linear-gradient(135deg, rgba(123, 44, 255, 0.18), rgba(255, 0, 168, 0.14), rgba(255, 122, 0, 0.1)),
    rgba(20, 0, 28, 0.38);
  border: 1px solid rgba(255, 210, 63, 0.14);
  border-radius: 28px;
  box-shadow: 0 28px 90px rgba(31, 0, 40, 0.34);
}

.ilayda-section-heading h2,
.ilayda-sponsor-copy h2 {
  font-size: clamp(2rem, 4vw, 4.35rem);
  line-height: 1.02;
}

.ilayda-section-heading .kicker,
.ilayda-hero-copy .kicker,
.ilayda-sponsor-copy .kicker {
  color: #ffd23f !important;
}

.ilayda-hero-proof > strong,
.growth-verified-stamp,
.growth-reach-source,
.growth-chart-runner,
.growth-chart-dot,
.growth-peak-bars > i::after,
.growth-day-grid > i::before,
.button-influencer,
.ilayda-story-controls button,
.ilayda-automation-note {
  background: linear-gradient(135deg, #7b2cff 0%, #ff00a8 36%, #ff315f 58%, #ff7a00 78%, #ffd23f 100%) !important;
}

.ilayda-hero-proof figure,
.ilayda-hero-feed video,
.ilayda-video-wall video,
.ilayda-proof-shot,
.ilayda-story-track img,
.ilayda-sponsor-media video,
.ilayda-extra-videos video,
.ilayda-book-notes img {
  border-color: rgba(255, 210, 63, 0.38) !important;
  box-shadow:
    0 22px 74px rgba(18, 0, 25, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 42px rgba(255, 0, 168, 0.2) !important;
}

.ilayda-hero-proof figure,
.ilayda-origin-grid article,
.ilayda-video-wall,
.ilayda-stat-console,
.ilayda-proof-shot,
.ilayda-story,
.ilayda-pipeline article,
.ilayda-extra-videos,
.ilayda-book-notes article,
.growth-card,
.growth-evidence,
.growth-phone,
.growth-velocity,
.ethical-note {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(123, 44, 255, 0.16), rgba(255, 0, 168, 0.12), rgba(255, 122, 0, 0.08)),
    rgba(18, 0, 26, 0.74) !important;
  border-color: rgba(255, 210, 63, 0.26) !important;
}

/* About history section cleanup */
.income-evolution .section-heading {
  grid-template-columns: minmax(0, 0.94fr) minmax(320px, 0.7fr);
  gap: clamp(28px, 5vw, 82px);
  align-items: start;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.income-evolution .section-heading h2 {
  max-width: 840px;
  font-size: clamp(1.85rem, 2.7vw, 3.35rem);
  line-height: 1.08;
}

.income-evolution .section-heading p {
  max-width: 620px;
  line-height: 1.72;
}

.income-history {
  grid-template-columns: minmax(360px, 0.96fr) minmax(460px, 1.04fr);
  align-items: start;
  gap: clamp(14px, 1.8vw, 24px);
}

.income-history-copy {
  padding: clamp(28px, 3.8vw, 48px);
}

.income-history-copy h3 {
  max-width: 720px;
  margin: 18px 0 16px;
  font-size: clamp(1.95rem, 2.85vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}

.income-history-copy > p {
  max-width: 720px;
}

.archive-photo-canvas {
  min-height: clamp(360px, 34vw, 520px);
}

.income-history-copy .archive-photo-canvas > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  transform: rotate(-90deg) scale(1.34);
  transform-origin: center;
}

.income-loop-wall {
  position: relative;
  isolation: isolate;
  min-height: 0;
  height: clamp(520px, 48vw, 720px);
  padding: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
  align-content: stretch;
  gap: clamp(6px, 0.8vw, 10px);
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 109, 114, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 109, 114, 0.1), transparent 44%),
    #090707;
}

.income-loop-wall::before,
.income-loop-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.income-loop-wall::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.8;
}

.income-loop-wall::after {
  background: linear-gradient(115deg, transparent 0 36%, rgba(255, 255, 255, 0.11), transparent 52%);
  transform: translateX(-55%);
  animation: visualFlowScan 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

.income-loop-wall video {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}

.income-loop-wall video:nth-child(1) {
  transform: rotate(-1.1deg) scale(1.02);
}

.income-loop-wall video:nth-child(2) {
  transform: rotate(1.2deg) scale(1.04);
}

.income-loop-wall video:nth-child(3) {
  transform: rotate(-0.7deg) scale(1.02);
}

@media (max-width: 1080px) {
  .income-evolution .section-heading,
  .income-history {
    grid-template-columns: 1fr;
  }

  .income-loop-wall {
    height: auto;
    min-height: 0;
  }

  .income-loop-wall video {
    height: auto;
    aspect-ratio: 9 / 16;
  }
}

@media (max-width: 780px) {
  .income-evolution .section-heading h2 {
    font-size: clamp(1.55rem, 7vw, 2.25rem);
    line-height: 1.12;
  }

  .income-history-copy h3 {
    font-size: clamp(1.55rem, 7.2vw, 2.28rem);
    line-height: 1.1;
  }

  .archive-photo-canvas {
    min-height: 330px;
  }
}

/* --------------------------------------------------------------------------
   Motion-first portfolio shell / 2026 redesign
   -------------------------------------------------------------------------- */

.motion-portfolio-v3 {
  --motion-dark: #0c0c0c;
  --motion-deep: #080808;
  --motion-paper: #f2f2ef;
  --motion-silver: #d7e2ea;
  --motion-white: #f5f7f8;
  --motion-muted: rgba(215, 226, 234, 0.58);
  --motion-line: rgba(215, 226, 234, 0.18);
  --motion-black-line: rgba(12, 12, 12, 0.16);
  color: var(--motion-white);
  background: var(--motion-dark);
  font-family: "Kanit", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.motion-portfolio-v3 .app-shell {
  min-height: 100vh;
  padding: 0;
}

.motion-portfolio-v3 .panel:not(#panel-home) {
  min-height: 100vh;
  padding: 118px 48px 64px;
}

.motion-portfolio-v3 #panel-home {
  min-height: 100vh;
  filter: none;
  overflow: clip;
  transform: none;
}

.motion-portfolio-v3 #panel-home > :not(.motion-home) {
  display: none !important;
}

.motion-portfolio-v3 .ambient {
  display: none;
}

.motion-portfolio-v3 .grain {
  z-index: 61;
  opacity: 0.075;
  mix-blend-mode: soft-light;
}

.motion-portfolio-v3 .scroll-progress {
  z-index: 96;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
}

.motion-portfolio-v3 .scroll-progress span {
  background: linear-gradient(90deg, #7c838b, #d7e2ea, #f5f7f8);
}

.motion-portfolio-v3 .cursor {
  width: 58px;
  height: 58px;
  color: #0c0c0c;
  background: var(--motion-white);
  border: 1px solid rgba(12, 12, 12, 0.22);
  font-size: 0.64rem;
}

.motion-portfolio-v3 .intro {
  background: var(--motion-dark);
}

.motion-portfolio-v3 .intro-grid {
  background:
    linear-gradient(rgba(215, 226, 234, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 226, 234, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
}

.motion-portfolio-v3 .intro-mark {
  color: var(--motion-dark);
  background: var(--motion-silver);
  border-radius: 6px;
  box-shadow: 0 0 80px rgba(215, 226, 234, 0.16);
}

.motion-portfolio-v3 .site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 90;
  width: min(1540px, calc(100% - 48px));
  min-height: 62px;
  padding: 8px 10px 8px 14px;
  background: rgba(12, 12, 12, 0.22);
  border: 1px solid rgba(215, 226, 234, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  transition: width 300ms ease, top 300ms ease, background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}

.motion-portfolio-v3 .site-header.is-compact,
.motion-portfolio-v3:not([data-route="home"]) .site-header {
  top: 10px;
  width: min(1260px, calc(100% - 40px));
  min-height: 58px;
  padding-block: 6px;
  background: rgba(12, 12, 12, 0.82);
  border-color: rgba(215, 226, 234, 0.16);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.motion-portfolio-v3 .brand span {
  width: 42px;
  height: 42px;
  color: var(--motion-dark);
  background: var(--motion-white);
  border-radius: 5px;
}

.motion-portfolio-v3 .brand small {
  max-width: 180px;
  color: rgba(245, 247, 248, 0.7);
  font-size: 0.68rem;
  line-height: 1.1;
}

.motion-portfolio-v3 .site-nav {
  gap: 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(215, 226, 234, 0.12);
}

.motion-portfolio-v3 .site-nav .nav-link[data-panel-target="home"],
.motion-portfolio-v3 .site-nav .nav-link[data-panel-target="youtube"],
.motion-portfolio-v3 .site-nav .nav-link[data-panel-target="education"],
.motion-portfolio-v3 .site-nav .nav-link[data-panel-target="contact"] {
  display: none;
}

.motion-portfolio-v3 .nav-link {
  min-height: 38px;
  padding: 0 15px;
  color: rgba(245, 247, 248, 0.64);
  font-size: 0.76rem;
  font-weight: 600;
}

.motion-portfolio-v3 .nav-link:hover,
.motion-portfolio-v3 .nav-link.is-active {
  color: var(--motion-white);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.motion-portfolio-v3 .nav-work-button {
  display: none;
}

.motion-portfolio-v3 .nav-brief-button {
  min-height: 42px;
  padding: 0 18px;
  color: var(--motion-white);
  background: linear-gradient(123deg, #18011f 7%, #b600a8 37%, #7621b0 72%, #be4c00 100%);
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(181, 1, 167, 0.18), 4px 4px 12px rgba(119, 33, 177, 0.55) inset;
}

.motion-portfolio-v3 .sound-toggle {
  width: 42px;
  height: 42px;
  border-color: rgba(215, 226, 234, 0.16);
}

.motion-home {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: clip;
  color: var(--motion-white);
  background: var(--motion-dark);
}

.motion-home button,
.motion-home a {
  font-family: inherit;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.motion-hero {
  position: relative;
  display: grid;
  align-items: end;
  width: 100%;
  height: 94svh;
  min-height: 780px;
  max-height: 1080px;
  padding: 112px 48px 42px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%),
    linear-gradient(125deg, #0c0c0c 0%, #101113 58%, #080808 100%);
  overflow: hidden;
}

.motion-hero::before,
.motion-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.motion-hero::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(215, 226, 234, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 226, 234, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 92%);
}

.motion-hero::after {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 8, 0.92));
}

.motion-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 0 47%, rgba(215, 226, 234, 0.03) 47% 47.15%, transparent 47.15%);
}

.motion-hero-name {
  position: absolute;
  left: 50%;
  top: 49%;
  width: calc(100% - 64px);
  color: var(--motion-silver);
  font-size: 8.2rem;
  font-weight: 900;
  line-height: 0.8;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%) translateY(var(--hero-title-y, 0px)) scale(var(--hero-title-scale, 1));
  transform-origin: center;
  will-change: transform;
}

.motion-hero-name span {
  display: block;
  white-space: nowrap;
}

.motion-hero-name-back {
  z-index: 1;
  color: transparent;
  background: linear-gradient(180deg, #666c74 0%, #bbcbd5 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.motion-hero-name-front {
  z-index: 4;
  color: rgba(245, 247, 248, 0.94);
  pointer-events: none;
}

.motion-hero-name-front i {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(215, 226, 234, 0.2);
}

.motion-hero-portrait {
  position: absolute;
  left: 50%;
  bottom: -5%;
  z-index: 2;
  width: 34rem;
  height: 82%;
  transform: translateX(calc(-50% + var(--magnet-x, 0px))) translateY(calc(var(--hero-portrait-y, 0px) + var(--magnet-y, 0px))) scale(var(--hero-portrait-scale, 1));
  transform-origin: center bottom;
  will-change: transform;
}

.motion-hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 64%, #0a0a0a 98%);
  pointer-events: none;
}

.motion-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid rgba(215, 226, 234, 0.14);
  border-radius: 8px;
  filter: saturate(0.86) contrast(1.04);
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.58);
  mask-image: linear-gradient(180deg, black 0 84%, transparent 100%);
}

.motion-hero-eyebrow {
  position: absolute;
  top: 116px;
  left: 48px;
  right: 48px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  color: rgba(245, 247, 248, 0.62);
  font-size: 0.7rem;
  font-weight: 600;
}

.motion-hero-copy {
  position: relative;
  z-index: 7;
  width: min(430px, 36%);
  margin-bottom: 58px;
}

.motion-hero-copy > span,
.motion-section-intro > span,
.motion-manifesto-title > span,
.motion-featured-head > span,
.motion-light-heading > span,
.motion-youtube-copy > span,
.motion-dark-heading > span,
.motion-achievements-copy > span,
.motion-contact-content > span {
  display: block;
  margin-bottom: 16px;
  color: rgba(215, 226, 234, 0.62);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.motion-hero-copy p {
  max-width: 390px;
  margin-bottom: 22px;
  color: rgba(245, 247, 248, 0.88);
  font-size: 1.1rem;
  line-height: 1.55;
}

.motion-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.motion-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.motion-button:hover,
.motion-button:focus-visible {
  transform: translateY(-2px) scale(1.02);
}

.motion-button b {
  font-size: 1rem;
  transition: transform 220ms ease;
}

.motion-button:hover b {
  transform: translate(2px, -2px) rotate(25deg);
}

.motion-button-primary {
  color: var(--motion-dark);
  background: var(--motion-white);
}

.motion-button-brief {
  color: var(--motion-white);
  background: linear-gradient(123deg, #18011f 7%, #b600a8 37%, #7621b0 72%, #be4c00 100%);
  border: 2px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 18px rgba(181, 1, 167, 0.22), 4px 4px 12px rgba(119, 33, 177, 0.52) inset;
}

.motion-button-dark {
  color: var(--motion-white);
  background: var(--motion-dark);
}

.motion-hero-bottom {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 26px;
  z-index: 7;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  color: rgba(245, 247, 248, 0.46);
  font-size: 0.64rem;
  font-weight: 600;
}

.motion-hero-bottom > :last-child {
  text-align: right;
}

.motion-hero-bottom button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(245, 247, 248, 0.7);
  background: transparent;
  border: 0;
  font-size: 0.64rem;
  font-weight: 600;
}

.motion-hero-bottom i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(215, 226, 234, 0.2);
  border-radius: 50%;
  font-style: normal;
  animation: motionScrollNudge 1.8s ease-in-out infinite;
}

.motion-ticker {
  position: relative;
  z-index: 8;
  padding: 18px 0;
  background: #0a0a0a;
  border-top: 1px solid var(--motion-line);
  border-bottom: 1px solid var(--motion-line);
  overflow: hidden;
}

.motion-ticker-track {
  display: flex;
  width: max-content;
  animation: motionTicker 36s linear infinite;
  will-change: transform;
}

.motion-ticker-track > div {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 24px;
  padding-right: 24px;
}

.motion-ticker span {
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.motion-ticker i {
  width: 5px;
  height: 5px;
  background: var(--motion-silver);
  border-radius: 50%;
}

.motion-media-marquee {
  padding: 118px 0 138px;
  background: var(--motion-dark);
  overflow: hidden;
}

.motion-section-intro,
.motion-featured-head,
.motion-dark-heading {
  width: min(1480px, calc(100% - 96px));
  margin: 0 auto 56px;
}

.motion-section-intro h2,
.motion-featured-head h2,
.motion-dark-heading h2,
.motion-light-heading h2,
.motion-youtube-copy h2,
.motion-achievements-copy h2,
.motion-contact-content h2 {
  max-width: 900px;
  margin: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.motion-section-intro p,
.motion-featured-head p {
  max-width: 680px;
  margin: 24px 0 0 auto;
  color: var(--motion-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.motion-marquee-row {
  width: 100%;
  margin-top: 12px;
  overflow: visible;
}

.motion-marquee-row .motion-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding-left: 7vw;
  transform: translate3d(var(--marquee-x, 2vw), 0, 0);
  will-change: transform;
}

.motion-marquee-row-one {
  --marquee-x: 2vw;
}

.motion-marquee-row-two {
  --marquee-x: -18vw;
}

.motion-marquee-row-two .motion-marquee-track {
  padding-left: 0;
}

.motion-media-tile {
  position: relative;
  flex: 0 0 390px;
  width: 390px;
  aspect-ratio: 16 / 10;
  padding: 0;
  color: var(--motion-white);
  background: #111;
  border: 1px solid rgba(215, 226, 234, 0.12);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}

.motion-media-tile::after {
  content: "";
  position: absolute;
  inset: 48% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
  pointer-events: none;
}

.motion-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(0.25, 0.1, 0.25, 1), filter 650ms ease;
}

.motion-media-tile-portrait img {
  object-position: center 26%;
}

.motion-media-tile span {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.motion-media-tile:hover img,
.motion-media-tile:focus-visible img {
  filter: saturate(1.08);
  transform: scale(1.035);
}

.motion-media-tile:hover span,
.motion-media-tile:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.motion-manifesto {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 1080px;
  padding: 120px 48px;
  background: #090909;
  overflow: hidden;
}

.motion-manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(215, 226, 234, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 226, 234, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}

.motion-manifesto-title {
  position: absolute;
  top: 92px;
  left: 50%;
  z-index: 1;
  width: min(1480px, calc(100% - 96px));
  transform: translateX(-50%);
}

.motion-manifesto-title h2 {
  margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0;
}

.motion-manifesto-copy {
  position: relative;
  z-index: 3;
  max-width: 1040px;
  margin: 0;
  color: var(--motion-white);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.16;
  text-align: center;
  text-wrap: balance;
}

.motion-manifesto-copy .motion-char {
  opacity: 0.16;
  transition: opacity 120ms linear;
}

.motion-manifesto-media {
  position: absolute;
  z-index: 2;
  margin: 0;
  border: 1px solid rgba(215, 226, 234, 0.14);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
  will-change: transform;
}

.motion-manifesto-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.motion-manifesto-media-one {
  left: 3.5%;
  top: 23%;
  width: 230px;
  height: 320px;
  transform: translate3d(0, var(--motion-parallax, 0px), 0) rotate(-4deg);
}

.motion-manifesto-media-two {
  right: 4%;
  top: 17%;
  width: 220px;
  height: 300px;
  transform: translate3d(0, var(--motion-parallax, 0px), 0) rotate(3deg);
}

.motion-manifesto-media-three {
  right: 10%;
  bottom: 8%;
  width: 255px;
  height: 330px;
  transform: translate3d(0, var(--motion-parallax, 0px), 0) rotate(-2deg);
}

.motion-manifesto-footer {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 52px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.motion-manifesto-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.motion-manifesto-footer span,
.motion-achievements-copy > div span {
  padding: 8px 10px;
  color: rgba(215, 226, 234, 0.72);
  border: 1px solid rgba(215, 226, 234, 0.14);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
}

.motion-text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 0 8px;
  color: var(--motion-white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(215, 226, 234, 0.42);
  font-size: 0.78rem;
  font-weight: 600;
}

.motion-text-link b {
  transition: transform 220ms ease;
}

.motion-text-link:hover b {
  transform: translate(3px, -3px);
}

.motion-featured {
  position: relative;
  padding: 130px 48px 80px;
  background: var(--motion-deep);
}

.motion-featured-head {
  margin-bottom: 72px;
}

.motion-project-stack {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.motion-project-card {
  --project-accent: #d7e2ea;
  position: sticky;
  top: 92px;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  grid-template-rows: auto 1fr;
  gap: 28px 36px;
  min-height: 760px;
  margin-bottom: 96px;
  padding: 30px;
  color: var(--motion-white);
  background: #0c0c0c;
  border: 1px solid color-mix(in srgb, var(--project-accent) 48%, transparent);
  border-radius: 8px;
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.56);
  overflow: hidden;
  transform: scale(var(--motion-card-scale, 1));
  transform-origin: center top;
  will-change: transform;
}

.motion-project-card:nth-child(2) { top: 106px; }
.motion-project-card:nth-child(3) { top: 120px; }
.motion-project-card:nth-child(4) { top: 134px; }
.motion-project-card:nth-child(5) { top: 148px; }

.motion-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, black, transparent 72%);
}

.motion-project-aipo { --project-accent: #ffe537; background: #111008; }
.motion-project-prombt { --project-accent: #baff38; background: #09100c; }
.motion-project-ilayda { --project-accent: #ff3fa4; background: #160b17; }
.motion-project-night { --project-accent: #ff7438; background: #140d0a; }
.motion-project-dubai { --project-accent: #ff8a77; background: #180e12; }

.motion-project-top {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--project-accent) 24%, transparent);
}

.motion-project-top strong {
  color: var(--project-accent);
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 0.8;
}

.motion-project-top span {
  color: rgba(245, 247, 248, 0.64);
  font-size: 0.72rem;
  font-weight: 600;
}

.motion-project-top button {
  min-height: 42px;
  padding: 0 15px;
  color: var(--motion-white);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--project-accent) 48%, transparent);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.motion-project-top button:hover,
.motion-project-top button:focus-visible {
  color: #0c0c0c;
  background: var(--project-accent);
  transform: translateY(-2px);
}

.motion-project-copy {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: 0 6px 12px;
}

.motion-project-copy > span {
  display: block;
  margin-bottom: 14px;
  color: var(--project-accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.motion-project-copy h3 {
  margin-bottom: 18px;
  color: var(--motion-white);
  font-size: 3.8rem;
  font-weight: 800;
  line-height: 0.94;
}

.motion-project-copy p {
  max-width: 500px;
  margin: 0;
  color: rgba(245, 247, 248, 0.66);
  font-size: 0.96rem;
  line-height: 1.65;
}

.motion-project-media {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 570px;
}

.motion-project-media > * {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--project-accent) 20%, transparent);
  border-radius: 6px;
  transition: transform 650ms cubic-bezier(0.25, 0.1, 0.25, 1), filter 650ms ease;
}

.motion-project-media > :first-child {
  grid-row: 1 / -1;
}

.motion-project-media:hover > * {
  filter: saturate(1.06);
}

.motion-project-media:hover > :first-child { transform: scale(1.012); }
.motion-project-media:hover > :nth-child(2) { transform: translateY(-3px); }
.motion-project-media:hover > :nth-child(3) { transform: translateY(3px); }

.motion-project-media-aipo > :first-child,
.motion-project-media-prombt > :first-child {
  object-position: center;
}

.motion-project-media-ilayda > :first-child,
.motion-project-media-dubai > :nth-child(2),
.motion-project-media-dubai > :nth-child(3) {
  object-position: center 20%;
}

.motion-light-zone {
  position: relative;
  z-index: 4;
  padding: 110px 48px 132px;
  color: var(--motion-dark);
  background: var(--motion-paper);
  border-radius: 48px 48px 0 0;
}

.motion-proof,
.motion-services,
.motion-process,
.motion-archive {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.motion-proof {
  padding-bottom: 118px;
}

.motion-light-heading {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 54px;
}

.motion-light-heading > span {
  color: rgba(12, 12, 12, 0.48);
}

.motion-light-heading h2 {
  color: var(--motion-dark);
}

.motion-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--motion-black-line);
  border-bottom: 1px solid var(--motion-black-line);
}

.motion-proof-grid article {
  min-height: 230px;
  padding: 30px 24px;
  border-left: 1px solid var(--motion-black-line);
}

.motion-proof-grid article:last-child {
  border-right: 1px solid var(--motion-black-line);
}

.motion-proof-grid strong {
  display: block;
  color: var(--motion-dark);
  font-size: 4.6rem;
  font-weight: 900;
  line-height: 0.95;
  white-space: nowrap;
}

.motion-proof-grid p {
  max-width: 170px;
  margin: 72px 0 0;
  color: rgba(12, 12, 12, 0.62);
  font-size: 0.82rem;
  line-height: 1.4;
}

.motion-services {
  padding: 112px 0;
  border-top: 1px solid var(--motion-black-line);
}

.motion-service-list {
  border-bottom: 1px solid var(--motion-black-line);
}

.motion-service-list button {
  display: grid;
  grid-template-columns: 90px 0.8fr 1fr 44px;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 116px;
  padding: 24px 8px;
  color: var(--motion-dark);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--motion-black-line);
  text-align: left;
  transition: background 220ms ease;
}

.motion-service-list button:hover,
.motion-service-list button:focus-visible {
  background: rgba(12, 12, 12, 0.045);
}

.motion-service-list span {
  color: rgba(12, 12, 12, 0.4);
  font-size: 0.72rem;
  font-weight: 600;
  transition: transform 220ms ease;
}

.motion-service-list strong {
  font-size: 1.8rem;
  font-weight: 700;
  transition: transform 220ms ease;
}

.motion-service-list p {
  margin: 0;
  color: rgba(12, 12, 12, 0.58);
  font-size: 0.9rem;
  line-height: 1.5;
}

.motion-service-list i {
  font-size: 1.35rem;
  font-style: normal;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.motion-service-list button:hover span { transform: translateX(8px); }
.motion-service-list button:hover strong { transform: translateX(12px); }
.motion-service-list button:hover i { opacity: 1; transform: translate(3px, -3px); }

.motion-process {
  padding: 112px 0 0;
  border-top: 1px solid var(--motion-black-line);
}

.motion-process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding-top: 44px;
}

.motion-process-track::before,
.motion-process-track > i {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  height: 1px;
}

.motion-process-track::before {
  width: 100%;
  background: rgba(12, 12, 12, 0.18);
}

.motion-process-track > i {
  z-index: 1;
  width: 100%;
  background: #0c0c0c;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.motion-process-track article {
  position: relative;
  padding: 18px 24px 12px 0;
  opacity: 0.35;
  transition: opacity 320ms ease, transform 320ms ease;
}

.motion-process-track article::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: var(--motion-paper);
  border: 1px solid #0c0c0c;
  border-radius: 50%;
}

.motion-process-track article.is-active {
  opacity: 1;
  transform: translateY(-4px);
}

.motion-process-track article.is-active::before {
  background: #0c0c0c;
}

.motion-process-track span {
  display: block;
  margin-bottom: 26px;
  font-size: 0.68rem;
  font-weight: 600;
}

.motion-process-track strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.18rem;
}

.motion-process-track p {
  margin: 0;
  color: rgba(12, 12, 12, 0.58);
  font-size: 0.78rem;
  line-height: 1.55;
}

.motion-process-statement {
  max-width: 820px;
  margin: 84px 0 0 auto;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
}

.motion-youtube {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 70px;
  min-height: 920px;
  margin-top: -48px;
  padding: 132px 48px 112px;
  background: #0a0a0a;
  border-radius: 48px 48px 0 0;
}

.motion-youtube-copy {
  position: sticky;
  top: 132px;
  align-self: start;
  max-width: 560px;
}

.motion-youtube-copy h2 {
  max-width: 540px;
}

.motion-youtube-copy p {
  max-width: 500px;
  margin: 26px 0 28px;
  color: var(--motion-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.motion-youtube-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 32px;
  background: var(--motion-line);
  border: 1px solid var(--motion-line);
}

.motion-youtube-metrics span {
  min-height: 96px;
  padding: 18px 14px;
  color: var(--motion-muted);
  background: #0a0a0a;
  font-size: 0.68rem;
}

.motion-youtube-metrics strong {
  display: block;
  margin-bottom: 12px;
  color: var(--motion-white);
  font-size: 1.5rem;
}

.motion-youtube-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  transform: translate3d(0, var(--motion-parallax, 0px), 0);
  will-change: transform;
}

.motion-youtube-wall img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(215, 226, 234, 0.13);
  border-radius: 6px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.36);
  transition: transform 360ms ease, filter 360ms ease;
}

.motion-youtube-wall img:nth-child(odd) { transform: rotate(-2deg); }
.motion-youtube-wall img:nth-child(even) { transform: rotate(2deg); }
.motion-youtube-wall img:hover { transform: rotate(0) scale(1.025); filter: saturate(1.08); }

.motion-products {
  padding: 112px 48px 132px;
  background: var(--motion-dark);
  border-top: 1px solid var(--motion-line);
}

.motion-product-rail {
  display: flex;
  gap: 16px;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 10px 0 26px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(215, 226, 234, 0.34) transparent;
  scroll-snap-type: x proximity;
}

.motion-product-rail button {
  flex: 0 0 300px;
  padding: 0;
  color: var(--motion-white);
  background: transparent;
  border: 0;
  text-align: left;
  scroll-snap-align: start;
}

.motion-product-rail img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(215, 226, 234, 0.12);
  border-radius: 6px;
  transition: transform 420ms ease, filter 420ms ease;
}

.motion-product-rail button:hover img,
.motion-product-rail button:focus-visible img {
  filter: saturate(1.08);
  transform: translateY(-8px);
}

.motion-product-rail span {
  display: block;
  margin-top: 16px;
  color: var(--motion-muted);
  font-size: 0.66rem;
}

.motion-product-rail strong {
  display: block;
  margin-top: 5px;
  font-size: 1.18rem;
}

.motion-achievements {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: center;
  min-height: 800px;
  padding: 112px 48px;
  background: #080808;
  border-top: 1px solid var(--motion-line);
}

.motion-achievements-copy {
  max-width: 650px;
}

.motion-achievements-copy p {
  margin: 26px 0;
  color: var(--motion-muted);
  line-height: 1.7;
}

.motion-achievements-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}

.motion-plaque {
  position: relative;
  justify-self: center;
  width: min(620px, 100%);
  margin: 0;
  perspective: 1200px;
}

.motion-plaque::before {
  content: "100K";
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(215, 226, 234, 0.06);
  font-size: 11rem;
  font-weight: 900;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.motion-plaque img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 6px;
  filter: contrast(1.04) saturate(0.9);
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.5);
}

.motion-plaque figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 11px 14px;
  color: var(--motion-white);
  background: rgba(8, 8, 8, 0.78);
  border: 1px solid var(--motion-line);
  border-radius: 4px;
  backdrop-filter: blur(12px);
}

.motion-plaque figcaption strong { font-size: 0.72rem; }
.motion-plaque figcaption span { color: var(--motion-muted); font-size: 0.64rem; }

.motion-archive {
  width: 100%;
  max-width: none;
  padding: 120px 48px;
  color: var(--motion-dark);
  background: var(--motion-paper);
}

.motion-archive > .motion-light-heading,
.motion-archive > .motion-button,
.motion-archive-grid {
  width: min(1480px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.motion-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 44px;
  align-items: stretch;
}

.motion-archive-grid button {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  min-height: 0;
  padding: 0;
  color: var(--motion-white);
  background: #101010;
  border: 1px solid rgba(8, 8, 8, 0.1);
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 18px 50px rgba(8, 8, 8, 0.09);
}

.motion-archive-grid button:nth-child(1),
.motion-archive-grid button:nth-child(2),
.motion-archive-grid button:nth-child(3),
.motion-archive-grid button:nth-child(4),
.motion-archive-grid button:nth-child(5),
.motion-archive-grid button:nth-child(6) {
  grid-column: auto;
}

.motion-archive-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 520ms ease, filter 520ms ease;
}

.motion-archive-grid button::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
}

.motion-archive-grid span,
.motion-archive-grid strong {
  position: absolute;
  left: 18px;
  z-index: 2;
}

.motion-archive-grid span {
  bottom: 43px;
  color: rgba(245, 247, 248, 0.62);
  font-size: 0.64rem;
  max-width: calc(100% - 36px);
}

.motion-archive-grid strong {
  bottom: 18px;
  font-size: 1rem;
  max-width: calc(100% - 36px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.motion-archive-grid button:hover img,
.motion-archive-grid button:focus-visible img {
  filter: saturate(1.08);
  transform: scale(1.025);
}

.motion-contact {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 900px;
  padding: 112px 48px 72px;
  background: var(--motion-dark);
  border-top: 1px solid var(--motion-line);
  overflow: hidden;
}

.motion-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(215, 226, 234, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 226, 234, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, black, transparent 82%);
}

.motion-contact-lines {
  position: absolute;
  inset: 74px 32px auto;
  color: transparent;
  background: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 7.6rem;
  font-weight: 900;
  line-height: 0.8;
  text-align: center;
  opacity: 0.22;
}

.motion-contact-lines span {
  display: block;
  white-space: nowrap;
}

.motion-contact-content {
  position: relative;
  z-index: 2;
  width: min(740px, 100%);
  margin-left: auto;
  padding: 38px 0;
}

.motion-contact-content p {
  max-width: 600px;
  margin: 26px 0;
  color: var(--motion-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.motion-contact-content > a {
  display: inline-block;
  margin-left: 18px;
  color: rgba(215, 226, 234, 0.7);
  border-bottom: 1px solid rgba(215, 226, 234, 0.28);
  font-size: 0.8rem;
}

.motion-section-rail {
  position: fixed;
  top: 50%;
  right: 14px;
  z-index: 78;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.motion-section-rail::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 0;
  width: 1px;
  background: rgba(215, 226, 234, 0.2);
}

.motion-section-rail button {
  position: relative;
  display: grid;
  grid-template-columns: 24px 54px;
  justify-content: end;
  gap: 5px;
  padding: 3px 10px 3px 0;
  color: rgba(215, 226, 234, 0.34);
  background: transparent;
  border: 0;
  font-size: 0.55rem;
  font-weight: 600;
  text-align: left;
  transition: color 200ms ease, transform 200ms ease;
}

.motion-section-rail button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}

.motion-section-rail button.is-active {
  color: var(--motion-white);
  transform: translateX(-4px);
}

.motion-section-rail span {
  color: inherit;
}

.motion-portfolio-v3 .site-footer {
  position: relative;
  z-index: 8;
  color: var(--motion-white);
  background: var(--motion-dark);
  border-top-color: rgba(215, 226, 234, 0.12);
}

.motion-portfolio-v3 :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #f5f7f8;
  outline-offset: 4px;
}

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

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

@media (min-width: 1700px) {
  .motion-hero-name { font-size: 9.6rem; }
  .motion-manifesto-copy { font-size: 3.35rem; }
  .motion-media-tile { flex-basis: 440px; width: 440px; }
}

@media (max-width: 1320px) {
  .motion-hero-name { font-size: 7rem; }
  .motion-hero-portrait { width: 31rem; }
  .motion-section-rail { display: none; }
  .motion-project-card { min-height: 680px; }
  .motion-project-media { min-height: 500px; }
  .motion-manifesto-copy { max-width: 820px; font-size: 2.45rem; }
}

@media (max-width: 1120px) {
  .motion-portfolio-v3 .site-nav,
  .motion-portfolio-v3 .nav-brief-button,
  .motion-portfolio-v3 .sound-toggle {
    display: none;
  }

  .motion-portfolio-v3 .menu-toggle {
    display: inline-flex;
  }

  .motion-hero {
    min-height: 760px;
    padding-inline: 32px;
  }

  .motion-hero-name { font-size: 5.8rem; }
  .motion-hero-portrait { width: 29rem; height: 76%; }
  .motion-hero-eyebrow { left: 32px; right: 32px; }
  .motion-hero-bottom { left: 32px; right: 32px; }
  .motion-hero-copy { width: min(400px, 42%); }

  .motion-manifesto-media-one { left: 1%; width: 190px; height: 270px; }
  .motion-manifesto-media-two { right: 1%; width: 180px; height: 250px; }
  .motion-manifesto-media-three { right: 4%; width: 210px; height: 280px; }

  .motion-project-card {
    grid-template-columns: 0.62fr 1.38fr;
    gap: 22px;
  }

  .motion-project-copy h3 { font-size: 3rem; }
  .motion-project-media { min-height: 460px; }

  .motion-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .motion-proof-grid article:nth-child(3) { border-top: 1px solid var(--motion-black-line); }
  .motion-proof-grid article:nth-child(4) { border-top: 1px solid var(--motion-black-line); }
  .motion-proof-grid strong { font-size: 4rem; }

  .motion-service-list button { grid-template-columns: 64px 0.8fr 1fr 32px; }
  .motion-service-list strong { font-size: 1.5rem; }
  .motion-process-track { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
  .motion-process-track::before,
  .motion-process-track > i { display: none; }
  .motion-process-track article::before { display: none; }
  .motion-process-track article { opacity: 1; }

  .motion-youtube,
  .motion-achievements { grid-template-columns: 1fr; }
  .motion-youtube-copy { position: relative; top: auto; }
}

@media (max-width: 780px) {
  .motion-portfolio-v3 .site-header,
  .motion-portfolio-v3 .site-header.is-compact,
  .motion-portfolio-v3:not([data-route="home"]) .site-header {
    top: 10px;
    width: calc(100% - 24px);
    min-height: 56px;
    padding: 6px 8px 6px 10px;
  }

  .motion-portfolio-v3 .brand span { width: 38px; height: 38px; }
  .motion-portfolio-v3 .brand small { display: none; }
  .motion-portfolio-v3 .panel:not(#panel-home) { padding: 94px 18px 44px; }

  .motion-hero {
    height: 92svh;
    min-height: 700px;
    max-height: 880px;
    padding: 94px 18px 28px;
  }

  .motion-hero::before { background-size: 44px 44px; }
  .motion-hero-name {
    top: 40%;
    width: calc(100% - 20px);
    font-size: 3.55rem;
    line-height: 0.86;
  }

  .motion-hero-portrait {
    bottom: 5%;
    width: min(88vw, 26rem);
    height: 66%;
  }

  .motion-hero-portrait img { object-position: center 22%; }
  .motion-hero-eyebrow { top: 92px; left: 18px; right: 18px; font-size: 0.58rem; }
  .motion-hero-eyebrow span:last-child { display: none; }

  .motion-hero-copy {
    width: 100%;
    margin-bottom: 62px;
  }

  .motion-hero-copy > span { margin-bottom: 10px; font-size: 0.6rem; }
  .motion-hero-copy p { max-width: 310px; margin-bottom: 14px; font-size: 0.88rem; line-height: 1.45; }
  .motion-button { min-height: 44px; padding: 0 15px; gap: 12px; font-size: 0.66rem; }
  .motion-hero-bottom { left: 18px; right: 18px; bottom: 15px; grid-template-columns: 1fr auto; }
  .motion-hero-bottom > span:first-child { display: none; }
  .motion-hero-bottom > span:last-child { grid-column: 1; grid-row: 1; text-align: left; }
  .motion-hero-bottom button { grid-column: 2; grid-row: 1; }

  .motion-ticker { padding-block: 14px; }
  .motion-ticker-track > div { gap: 18px; padding-right: 18px; }
  .motion-ticker span { font-size: 0.68rem; }

  .motion-media-marquee { padding: 82px 0 92px; }
  .motion-section-intro,
  .motion-featured-head,
  .motion-dark-heading { width: calc(100% - 36px); margin-bottom: 38px; }

  .motion-section-intro h2,
  .motion-featured-head h2,
  .motion-dark-heading h2,
  .motion-light-heading h2,
  .motion-youtube-copy h2,
  .motion-achievements-copy h2,
  .motion-contact-content h2 { font-size: 2.15rem; line-height: 1.08; }

  .motion-section-intro p,
  .motion-featured-head p { margin: 18px 0 0; font-size: 0.88rem; }
  .motion-marquee-row .motion-marquee-track { gap: 8px; padding-left: 18px; }
  .motion-marquee-row-two .motion-marquee-track { padding-left: 0; }
  .motion-media-tile { flex-basis: 260px; width: 260px; }
  .motion-media-tile span { opacity: 1; transform: none; font-size: 0.6rem; }

  .motion-manifesto {
    display: block;
    min-height: auto;
    padding: 86px 18px 78px;
  }

  .motion-manifesto-title,
  .motion-manifesto-footer { position: relative; inset: auto; width: 100%; transform: none; }
  .motion-manifesto-title h2 { font-size: 4.2rem; }
  .motion-manifesto-copy { margin: 68px 0 48px; font-size: 1.72rem; text-align: left; }
  .motion-manifesto-media { position: relative; inset: auto; width: 100%; height: auto; margin: 10px 0; transform: none !important; }
  .motion-manifesto-media img { display: block; aspect-ratio: 4 / 5; }
  .motion-manifesto-media-two img { aspect-ratio: 1 / 1; }
  .motion-manifesto-footer { align-items: flex-start; flex-direction: column; margin-top: 34px; }

  .motion-featured { padding: 88px 18px 56px; }
  .motion-featured-head { width: 100%; margin-bottom: 48px; }
  .motion-project-card,
  .motion-project-card:nth-child(n) {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 24px;
    min-height: 0;
    margin-bottom: 34px;
    padding: 16px;
    transform: none !important;
  }

  .motion-project-top { grid-template-columns: 54px 1fr; gap: 12px; }
  .motion-project-top strong { font-size: 2.5rem; }
  .motion-project-top button { grid-column: 1 / -1; width: 100%; }
  .motion-project-copy { padding: 6px 0 0; }
  .motion-project-copy h3 { font-size: 2.45rem; }
  .motion-project-copy p { font-size: 0.88rem; }
  .motion-project-media { min-height: 420px; }

  .motion-light-zone { padding: 76px 18px 92px; border-radius: 28px 28px 0 0; }
  .motion-light-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .motion-proof { padding-bottom: 76px; }
  .motion-proof-grid article { min-height: 180px; padding: 24px 14px; }
  .motion-proof-grid strong { font-size: 2.7rem; }
  .motion-proof-grid p { margin-top: 48px; font-size: 0.7rem; }

  .motion-services { padding: 76px 0; }
  .motion-service-list button { grid-template-columns: 40px 1fr 24px; gap: 10px; min-height: 104px; }
  .motion-service-list strong { font-size: 1.18rem; }
  .motion-service-list p { grid-column: 2 / -1; font-size: 0.78rem; }
  .motion-service-list i { opacity: 0.5; }

  .motion-process { padding-top: 76px; }
  .motion-process-track { grid-template-columns: 1fr; padding: 0 0 0 24px; }
  .motion-process-track::before { display: block; top: 0; bottom: 0; left: 4px; width: 1px; height: auto; }
  .motion-process-track article { padding: 16px 0 24px; }
  .motion-process-track article::before { display: block; top: 22px; left: -24px; }
  .motion-process-track span { margin-bottom: 8px; }
  .motion-process-statement { margin-top: 42px; font-size: 1.5rem; text-align: left; }

  .motion-youtube { grid-template-columns: 1fr; gap: 48px; min-height: 0; margin-top: -28px; padding: 86px 18px 74px; border-radius: 28px 28px 0 0; }
  .motion-youtube-metrics { grid-template-columns: 1fr; }
  .motion-youtube-metrics span { min-height: 68px; }
  .motion-youtube-wall { gap: 8px; transform: none !important; }

  .motion-products { padding: 78px 18px 90px; }
  .motion-dark-heading { width: 100%; }
  .motion-product-rail { gap: 10px; }
  .motion-product-rail button { flex-basis: 230px; }

  .motion-achievements { grid-template-columns: 1fr; min-height: 0; padding: 80px 18px; }
  .motion-plaque::before { font-size: 6rem; }

  .motion-archive { padding: 82px 18px; }
  .motion-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .motion-archive-grid button,
  .motion-archive-grid button:nth-child(n) {
    grid-column: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .motion-contact { min-height: 760px; padding: 90px 18px 54px; }
  .motion-contact-lines { inset: 86px 8px auto; font-size: 4rem; }
  .motion-contact-content { padding-bottom: 12px; }
  .motion-contact-content > a { display: block; width: max-content; margin: 18px 0 0; }
}

@media (max-width: 420px) {
  .motion-hero-name { font-size: 3rem; }
  .motion-hero-actions { gap: 7px; }
  .motion-button { padding-inline: 13px; }
  .motion-project-media { min-height: 350px; }
  .motion-proof-grid strong { font-size: 2.25rem; }
  .motion-archive-grid { grid-template-columns: 1fr; }
  .motion-archive-grid button,
  .motion-archive-grid button:nth-child(n) {
    grid-column: 1;
    aspect-ratio: 4 / 3;
  }
}

/* Portfolio intro: editorial copy left, creator film right. */
.portfolio-v4 .portfolio-oddy-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(560px, 1.22fr);
  align-items: center;
  gap: clamp(28px, 3.5vw, 64px);
  width: min(1480px, calc(100% - 72px));
  min-height: min(760px, calc(100vh - 112px));
  margin: 0 auto;
  padding: 34px 0 0;
  text-align: left;
}

.portfolio-v4 .portfolio-oddy-hero-copy {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  justify-self: start;
}

.portfolio-v4 .portfolio-oddy-hero-media {
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 610px;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.portfolio-v4 .portfolio-oddy-hero-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  background: #fff;
}

.portfolio-v4 .portfolio-oddy-hero-media::before {
  position: absolute;
  inset: -1px;
  z-index: 2;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 2%, rgba(255, 255, 255, 0) 12%),
    linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0.9) 3%, rgba(255, 255, 255, 0) 14%),
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.92) 3%, rgba(255, 255, 255, 0) 14%);
}

.portfolio-v4 .portfolio-oddy-hero-media::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  height: clamp(100px, 18%, 150px);
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 92%);
}

@media (max-width: 1120px) {
  .portfolio-v4 .portfolio-oddy-hero {
    grid-template-columns: minmax(320px, 0.86fr) minmax(440px, 1.14fr);
    width: min(100% - 44px, 1120px);
    gap: 24px;
  }

  .portfolio-v4 .portfolio-oddy-hero-media {
    min-height: 580px;
  }
}

@media (max-width: 820px) {
  .portfolio-v4 .portfolio-oddy-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: min(100% - 32px, 680px);
    min-height: 0;
    padding-top: 42px;
  }

  .portfolio-v4 .portfolio-oddy-hero-copy {
    width: 100%;
  }

  .portfolio-v4 .portfolio-oddy-hero-media {
    width: calc(100% + 32px);
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-left: -16px;
  }

  .portfolio-v4 .portfolio-oddy-hero-media video {
    object-fit: contain;
    object-position: center;
  }

  .portfolio-v4 .portfolio-oddy-hero-media::before {
    top: -1px;
    right: 0;
    bottom: auto;
    width: auto;
    height: 18%;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  }
}

@media (max-width: 480px) {
  .portfolio-v4 .portfolio-oddy-hero {
    width: calc(100% - 28px);
    padding-top: 30px;
  }

  .portfolio-v4 .portfolio-oddy-hero h2 {
    font-size: clamp(1.9rem, 9.6vw, 2.45rem) !important;
  }

  .portfolio-v4 .portfolio-oddy-copy {
    gap: 14px;
    margin-top: 18px;
  }

  .portfolio-v4 .portfolio-oddy-copy p {
    font-size: 0.88rem;
    line-height: 1.58;
  }

  .portfolio-v4 .portfolio-oddy-hero-media {
    width: calc(100% + 28px);
    height: auto;
    margin-left: -14px;
  }

  .portfolio-v4 .portfolio-oddy-hero-media::after {
    height: 24%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ticker-track,
  .motion-hero-bottom i {
    animation: none !important;
  }

  .motion-marquee-row .motion-marquee-track,
  .motion-hero-name,
  .motion-hero-portrait,
  [data-parallax],
  .motion-project-card {
    transform: none !important;
  }

  .motion-manifesto-copy .motion-char {
    opacity: 1 !important;
  }
}

/* =========================================================
   Portfolio V4 / compact motion editorial system
   ========================================================= */
.portfolio-v4 {
  --v4-ink: #0c0c0c;
  --v4-deep: #070707;
  --v4-silver: #d7e2ea;
  --v4-paper: #f2f2ef;
  --v4-muted: rgba(215, 226, 234, 0.62);
  --v4-line: rgba(215, 226, 234, 0.18);
  color: var(--v4-silver);
  background: var(--v4-ink);
  overflow-x: clip;
}

.portfolio-v4 .motion-home {
  background: #000000;
}

.portfolio-v4 #panel-home .motion-home .reveal {
  opacity: 0;
  transform: translateY(22px);
}

.portfolio-v4 #panel-home .motion-home .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-v4 .site-header {
  top: 14px;
  width: calc(100% - 40px);
  max-width: 1560px;
  min-height: 58px;
  padding: 7px 9px 7px 12px;
  background: rgba(12, 12, 12, 0.12);
  border-color: transparent;
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
}

.portfolio-v4 .site-header.is-compact,
.portfolio-v4:not([data-route="home"]) .site-header {
  top: 10px;
  width: calc(100% - 28px);
  max-width: 1320px;
  min-height: 56px;
  background: rgba(12, 12, 12, 0.82);
  border-color: var(--v4-line);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.portfolio-v4 .brand small {
  width: 218px;
  color: rgba(215, 226, 234, 0.56);
  font-size: 0.58rem;
  line-height: 1.15;
}

.portfolio-v4 .intro {
  background: #000000;
}

.portfolio-v4 .intro-grid {
  background:
    linear-gradient(rgba(0, 209, 255, 0.046) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 170, 0.038) 1px, transparent 1px);
  background-size: 58px 58px;
}

.portfolio-v4 .intro-mark {
  width: min(540px, 74vw);
  color: transparent;
  background: transparent;
  border-radius: 18px;
  box-shadow:
    0 0 90px rgba(0, 209, 255, 0.18),
    0 0 120px rgba(255, 0, 170, 0.12);
}

.portfolio-v4 .brand span {
  width: 44px;
  height: 44px;
  color: transparent;
  background: #020202;
  border: 1px solid rgba(215, 226, 234, 0.12);
  border-radius: 8px;
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.045),
    0 0 24px rgba(0, 209, 255, 0.08),
    0 0 28px rgba(255, 0, 170, 0.07);
}

.portfolio-v4 .brand span img {
  width: 128%;
  height: 128%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
}

.portfolio-v4 .brand:hover span img,
.portfolio-v4 .brand:focus-visible span img {
  filter:
    contrast(1.22)
    saturate(1.2)
    drop-shadow(3px 0 0 rgba(0, 209, 255, 0.26))
    drop-shadow(-3px 0 0 rgba(255, 0, 170, 0.24));
}

.portfolio-v4 .site-nav {
  gap: 3px;
  padding: 3px;
  background: rgba(6, 6, 6, 0.28);
  border: 1px solid rgba(215, 226, 234, 0.1);
}

.portfolio-v4 .nav-link {
  min-height: 34px;
  padding: 0 13px;
  font-size: 0.64rem;
  letter-spacing: 0;
}

.portfolio-v4 .nav-work-button,
.portfolio-v4 .nav-brief-button {
  min-height: 40px;
  padding-inline: 17px;
  font-size: 0.62rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-hero {
  position: relative;
  display: block;
  height: 100svh;
  min-height: 720px;
  max-height: 1080px;
  padding: 88px 48px 34px;
  background: #000000;
  box-shadow:
    inset 0 0 160px rgba(0, 0, 0, 0.78),
    inset 0 -150px 180px rgba(0, 0, 0, 0.86);
  isolation: isolate;
}

.portfolio-v4 .motion-hero::before {
  opacity: 0.62;
  background-image:
    linear-gradient(rgba(215, 226, 234, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 226, 234, 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, transparent 2%, black 28%, black 72%, transparent 98%);
}

.portfolio-v4 .motion-hero::after {
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, #000000);
  opacity: 1;
}

.portfolio-v4 .motion-hero-grid {
  display: block;
  position: absolute;
  top: 20%;
  left: 50%;
  width: min(1180px, calc(100% - 96px));
  height: 1px;
  background: rgba(215, 226, 234, 0.14);
  transform: translateX(-50%);
  box-shadow: 0 0 28px rgba(215, 226, 234, 0.1);
  animation: v4HeroSignalLine 3.8s ease-in-out infinite;
}

.portfolio-v4 .motion-hero-grid::before,
.portfolio-v4 .motion-hero-grid::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  background: var(--v4-silver);
  border-radius: 50%;
  animation: v4HeroSignalDot 2.8s ease-in-out infinite;
}

.portfolio-v4 .motion-hero-grid::after {
  animation-delay: 1.4s;
}

.portfolio-v4 .motion-hero-grid::before { left: 0; }
.portfolio-v4 .motion-hero-grid::after { right: 0; }

.portfolio-v4 .motion-hero-logo-burst {
  position: absolute;
  top: 47%;
  left: 50%;
  z-index: 13;
  width: min(900px, 68vw);
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.12) contrast(1.12);
  animation: none;
}

.portfolio-v4 .motion-hero-logo-burst img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  filter:
    drop-shadow(11px 0 0 rgba(0, 209, 255, 0.26))
    drop-shadow(-10px 0 0 rgba(255, 0, 170, 0.22))
    drop-shadow(0 0 36px rgba(255, 255, 255, 0.08));
  transform: scale(0.78) rotate(-3deg);
  animation: none;
}

.portfolio-v4 .motion-hero-logo-burst::before,
.portfolio-v4 .motion-hero-logo-burst::after {
  content: "";
  position: absolute;
  inset: 13% 1%;
  background: url("assets/brand/heb-glitch-logo.png") center / contain no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
}

.portfolio-v4 .motion-hero-logo-burst::before {
  filter: drop-shadow(0 0 20px rgba(0, 209, 255, 0.72));
  transform: translateX(-24px);
  animation: none;
}

.portfolio-v4 .motion-hero-logo-burst::after {
  filter: drop-shadow(0 0 20px rgba(255, 0, 170, 0.66));
  transform: translateX(24px);
  animation: none;
}

.portfolio-v4 .motion-hero-logo-burst i {
  position: absolute;
  inset: 23% -8%;
  background:
    linear-gradient(100deg, transparent 24%, rgba(255, 255, 255, 0.8), transparent 38%),
    linear-gradient(90deg, transparent 0 15%, rgba(0, 209, 255, 0.36) 16% 19%, transparent 21% 72%, rgba(255, 0, 170, 0.32) 74% 78%, transparent 80%);
  transform: translateX(-88%) skewX(-22deg);
  mix-blend-mode: screen;
  animation: none;
}

body.intro-complete.portfolio-v4 .motion-hero-logo-burst {
  animation: v4HeroLogoBurst 1500ms steps(1, end) 40ms both;
}

body.intro-complete.portfolio-v4 .motion-hero-logo-burst img {
  animation: v4HeroLogoImageGlitch 1500ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

body.intro-complete.portfolio-v4 .motion-hero-logo-burst::before {
  animation: v4HeroLogoGhost 1250ms steps(2, end) 40ms both;
}

body.intro-complete.portfolio-v4 .motion-hero-logo-burst::after {
  animation: v4HeroLogoGhost 1250ms steps(2, end) 90ms both reverse;
}

body.intro-complete.portfolio-v4 .motion-hero-logo-burst i {
  animation: v4HeroLogoSweep 900ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

.portfolio-v4 .hacker-glitch-backdrop {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  contain: strict;
  filter: contrast(1.08) saturate(0.92);
  animation: v4HackerBackdropBoot 1400ms cubic-bezier(0.16, 1, 0.3, 1) 160ms forwards;
}

.portfolio-v4 .hacker-glitch-backdrop.is-static {
  opacity: 0.28;
  animation: none;
}

body.is-scroll-active .portfolio-v4 .hacker-glitch-backdrop {
  filter: none;
}

.portfolio-v4 .motion-hero:has(.hacker-glitch-backdrop)::after {
  z-index: 14;
  pointer-events: none;
}

.portfolio-v4 .motion-hero-name {
  top: 37%;
  left: 50%;
  z-index: 3;
  width: calc(100% - 56px);
  color: transparent;
  background: linear-gradient(180deg, #70757f 0%, #c8d6df 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 9.5rem;
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  transform: translate3d(-50%, var(--hero-title-y, 0px), 0) scale(var(--hero-title-scale, 1));
  transform-origin: center;
}

.portfolio-v4 .motion-hero-name-back {
  z-index: 11;
  opacity: 0.78;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.48));
}

.portfolio-v4 .motion-hero-name span {
  display: block;
}

.portfolio-v4 .motion-hero-name-front {
  z-index: 15;
  color: rgba(238, 244, 248, 0.12);
  background: none;
  opacity: 0.84;
  -webkit-text-stroke: 1.35px rgba(238, 244, 248, 0.72);
  -webkit-text-fill-color: rgba(238, 244, 248, 0.065);
  clip-path: none;
  mix-blend-mode: screen;
  text-shadow:
    0 0 18px rgba(215, 226, 234, 0.2),
    0 14px 34px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

@keyframes v4HackerBackdropBoot {
  0% {
    opacity: 0;
    filter: contrast(1.2) saturate(0.6) brightness(0.68);
  }
  28% {
    opacity: 0.44;
    filter: contrast(1.45) saturate(0.78) brightness(1.12);
  }
  43% {
    opacity: 0.18;
    filter: contrast(1.08) saturate(0.8) brightness(0.86);
  }
  100% {
    opacity: 0.34;
    filter: contrast(1.08) saturate(0.92) brightness(1);
  }
}

@keyframes v4HeroGridFlow {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 68px 68px, 68px 68px; }
}

@keyframes v4HeroSignalLine {
  0%, 100% {
    opacity: 0.72;
    transform: translateX(-50%) scaleX(0.96);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

@keyframes v4HeroSignalDot {
  0%, 100% {
    opacity: 0.56;
    transform: scale(0.82);
    box-shadow: 0 0 12px rgba(215, 226, 234, 0.45);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
    box-shadow: 0 0 24px rgba(215, 226, 234, 0.78);
  }
}

@keyframes v4HeroLogoBurst {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.72) skewX(-9deg); }
  10% { opacity: 0.86; transform: translate3d(calc(-50% - 18px), -50%, 0) scale(1.04) skewX(-12deg); }
  16% { opacity: 0.2; transform: translate3d(calc(-50% + 16px), -50%, 0) scale(0.98) skewX(8deg); }
  22% { opacity: 0.72; transform: translate3d(calc(-50% - 8px), -50%, 0) scale(1.08) skewX(-4deg); }
  36% { opacity: 0.38; transform: translate3d(-50%, -50%, 0) scale(0.92); }
  100% { opacity: 0.24; transform: translate3d(-50%, -50%, 0) scale(0.88); }
}

@keyframes v4HeroLogoImageGlitch {
  0% { opacity: 0; clip-path: inset(45% 0 44% 0); transform: scale(0.78) rotate(-4deg); }
  8% { opacity: 0.96; clip-path: inset(0 0 74% 0); transform: scale(1.02) translateX(-18px) rotate(-5deg); }
  14% { clip-path: inset(29% 0 42% 0); transform: scale(0.98) translateX(14px) rotate(-2deg); }
  23% { clip-path: inset(68% 0 0 0); transform: scale(1.08) translateX(-7px) rotate(-3deg); }
  34% { clip-path: inset(0 0 0 0); transform: scale(0.92) rotate(-3deg); }
  100% { opacity: 0.58; clip-path: inset(0 0 0 0); transform: scale(0.88) rotate(-3deg); }
}

@keyframes v4HeroLogoGhost {
  0%, 9%, 18%, 34%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
  10%, 13% { opacity: 0.58; clip-path: inset(0 0 70% 0); }
  19%, 24% { opacity: 0.42; clip-path: inset(36% 0 36% 0); }
  35%, 40% { opacity: 0.3; clip-path: inset(68% 0 2% 0); }
}

@keyframes v4HeroLogoSweep {
  0% { opacity: 0; transform: translateX(-88%) skewX(-22deg); }
  18% { opacity: 0.78; }
  100% { opacity: 0; transform: translateX(92%) skewX(-22deg); }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-v4 .hacker-glitch-backdrop {
    opacity: 0.24;
    animation: none;
  }

  .portfolio-v4 .motion-hero-logo-burst,
  .portfolio-v4 .motion-hero-logo-burst img,
  .portfolio-v4 .motion-hero-logo-burst::before,
  .portfolio-v4 .motion-hero-logo-burst::after,
  .portfolio-v4 .motion-hero-logo-burst i,
  .portfolio-v4 .intro-mark,
  .portfolio-v4 .intro-mark img,
  .portfolio-v4 .intro-mark::before,
  .portfolio-v4 .intro-mark::after,
  .portfolio-v4 .intro-mark i,
  .portfolio-v4 .intro::before,
  .portfolio-v4 .intro::after {
    animation: none;
  }

  .portfolio-v4 .motion-hero-logo-burst {
    opacity: 0.1;
  }
}

.portfolio-v4 .motion-hero-name-front i {
  color: transparent;
  font-style: normal;
}

.portfolio-v4 .motion-hero-object {
  position: absolute;
  bottom: 2%;
  left: 50%;
  z-index: 10;
  width: 400px;
  height: 540px;
  transform:
    translate3d(calc(-50% + var(--magnet-x, 0px)), calc(var(--hero-portrait-y, 0px) + var(--magnet-y, 0px)), 0)
    scale(var(--hero-portrait-scale, 1));
  transform-origin: center bottom;
  will-change: transform;
}

.portfolio-v4 .motion-hero-object.is-character-mode {
  --character-x: 0px;
  --character-y: 0px;
  --character-tilt-x: 0deg;
  --character-tilt-y: 0deg;
  z-index: 16;
  bottom: 6%;
  width: min(clamp(500px, 48vw, 820px), calc(100vw - 16px));
  height: min(clamp(600px, 84svh, 900px), calc(100svh - 58px));
  transform:
    translate3d(
      calc(-50% + var(--magnet-x, 0px) + var(--character-x)),
      calc(var(--hero-portrait-y, 0px) + var(--magnet-y, 0px) + var(--character-y)),
      0
    )
    rotateX(var(--character-tilt-x))
    rotateY(var(--character-tilt-y))
    scale(var(--hero-portrait-scale, 1));
  transform-style: preserve-3d;
  transition: filter 380ms ease;
}

.portfolio-v4 .motion-hero-object.is-character-ready {
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.54));
}

body.is-scroll-active .portfolio-v4 .motion-hero-object.is-character-ready {
  filter: none;
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-frame {
  inset: 0 0 54px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  overflow: visible;
  filter: none;
  isolation: auto;
  contain: paint;
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-frame::before {
  display: none;
}

.portfolio-v4 .motion-head-frame {
  position: absolute;
  inset: 22px 42px 28px;
  padding: 3px;
  background: linear-gradient(145deg, #f4f7f8 0%, #5f6871 24%, #d9e2e7 50%, #323940 76%, #edf3f5 100%);
  clip-path: polygon(50% 0, 69% 5%, 83% 17%, 92% 39%, 88% 72%, 72% 94%, 50% 100%, 28% 94%, 12% 72%, 8% 39%, 17% 17%, 31% 5%);
  filter: drop-shadow(0 34px 45px rgba(0, 0, 0, 0.68));
  overflow: hidden;
}

.portfolio-v4 .motion-head-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.1)),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.portfolio-v4 .motion-head-frame :is(video, img, canvas) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.06) brightness(1.1);
  opacity: 1;
  transition: filter 260ms ease;
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-frame :is(video, img, canvas) {
  background: transparent;
  object-fit: contain;
  object-position: center center;
  transform: translate3d(var(--character-video-x, 0px), var(--character-video-y, 0px), 0) scale(1.08);
  transform-origin: center;
  backface-visibility: hidden;
  image-rendering: auto;
  filter: saturate(1.06) contrast(1.05) brightness(1.04);
  mix-blend-mode: normal;
  mask-image: radial-gradient(ellipse 42% 50% at 50% 49%, #000 62%, rgba(0, 0, 0, 0.88) 76%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 42% 50% at 50% 49%, #000 62%, rgba(0, 0, 0, 0.88) 76%, transparent 100%);
  will-change: transform, opacity;
}

body.is-scroll-active .portfolio-v4 .motion-hero-object.is-character-mode .motion-head-frame :is(video, img, canvas) {
  filter: none;
  transition: none;
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-frame img.is-sequence-source {
  display: none;
}

.portfolio-v4 .motion-hero-object.is-character-mode .character-sequence-canvas {
  position: relative;
  z-index: 1;
}

.portfolio-v4 .motion-head-frame video.is-switching {
  opacity: 0.08;
  filter: saturate(0) contrast(1.25);
}

.portfolio-v4 .motion-head-frame strong {
  position: absolute;
  right: 34px;
  bottom: 42px;
  z-index: 2;
  color: transparent;
  font-size: 4.6rem;
  font-weight: 900;
  line-height: 0.8;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.54);
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-frame strong {
  display: none;
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-frame::after {
  display: none;
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-scan {
  display: none;
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-orbit {
  display: none;
}

.portfolio-v4 .motion-head-scan {
  position: absolute;
  inset: -30% 0 auto;
  z-index: 3;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: v4HeadScan 4.8s linear infinite;
  pointer-events: none;
}

.portfolio-v4 .motion-head-orbit {
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(215, 226, 234, 0.2);
  border-radius: 50%;
  animation: v4Orbit 16s linear infinite;
}

.portfolio-v4 .motion-head-orbit::before,
.portfolio-v4 .motion-head-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(215, 226, 234, 0.11);
  border-radius: 50%;
}

.portfolio-v4 .motion-head-orbit::before { inset: 36px -24px; }
.portfolio-v4 .motion-head-orbit::after { inset: -18px 56px; }

.portfolio-v4 .motion-head-orbit i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #f4f7f8;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(215, 226, 234, 0.8);
}

.portfolio-v4 .motion-head-orbit i:nth-child(1) { top: 14%; left: 10%; }
.portfolio-v4 .motion-head-orbit i:nth-child(2) { right: 3%; bottom: 31%; }
.portfolio-v4 .motion-head-orbit i:nth-child(3) { bottom: 5%; left: 32%; }

.portfolio-v4 .motion-head-caption {
  position: absolute;
  right: -22px;
  bottom: 88px;
  z-index: 16;
  display: grid;
  gap: 2px;
  min-width: 148px;
  padding: 10px 12px;
  color: #0c0c0c;
  background: #f2f2ef;
  border-radius: 4px;
  box-shadow: 12px 12px 0 rgba(215, 226, 234, 0.12);
}

.portfolio-v4 .motion-hero-object.is-character-mode .motion-head-caption {
  display: none;
}

.portfolio-v4 .motion-head-caption span {
  font-size: 0.66rem;
  font-weight: 800;
}

.portfolio-v4 .motion-head-caption small {
  font-size: 0.5rem;
  font-weight: 600;
  opacity: 0.55;
}

.portfolio-v4 .motion-hero-eyebrow {
  top: 92px;
  left: 48px;
  right: 48px;
  z-index: 20;
  color: rgba(215, 226, 234, 0.66);
  font-size: 0.62rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-hero-copy {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 70px;
  left: 48px;
  z-index: 21;
  width: 350px;
  margin: 0;
}

.portfolio-v4 .motion-hero-copy > span {
  margin-bottom: 12px;
  font-size: 0.61rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-hero-copy p {
  max-width: 340px;
  margin-bottom: 17px;
  color: rgba(215, 226, 234, 0.72);
  font-size: 0.88rem;
  line-height: 1.5;
}

.portfolio-v4 .motion-hero-actions {
  gap: 8px;
}

.portfolio-v4 .motion-button {
  min-height: 42px;
  padding: 0 16px;
  gap: 16px;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-hero-bottom {
  right: 48px;
  bottom: 20px;
  left: 48px;
  z-index: 22;
  font-size: 0.54rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-ticker {
  padding-block: 15px;
}

.portfolio-v4 .motion-ticker span {
  font-size: 0.72rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-media-marquee {
  padding: 96px 0 108px;
  background: #0c0c0c;
}

.portfolio-v4 .motion-section-intro,
.portfolio-v4 .motion-featured-head,
.portfolio-v4 .motion-dark-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.52fr);
  gap: 32px;
  align-items: end;
  width: min(1420px, calc(100% - 96px));
  margin: 0 auto 52px;
}

.portfolio-v4 .motion-section-intro > span,
.portfolio-v4 .motion-featured-head > span,
.portfolio-v4 .motion-dark-heading > span {
  grid-column: 1 / -1;
  color: rgba(215, 226, 234, 0.48);
  font-size: 0.58rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-section-intro h2,
.portfolio-v4 .motion-featured-head h2,
.portfolio-v4 .motion-dark-heading h2,
.portfolio-v4 .motion-light-heading h2,
.portfolio-v4 .motion-youtube-copy h2,
.portfolio-v4 .motion-achievements-copy h2,
.portfolio-v4 .motion-contact-content h2 {
  max-width: 18ch;
  margin: 0;
  font-size: 3rem;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.portfolio-v4 .motion-section-intro p,
.portfolio-v4 .motion-featured-head p {
  max-width: 52ch;
  margin: 0;
  color: var(--v4-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.portfolio-v4 .motion-marquee-row {
  margin-top: 12px;
}

.portfolio-v4 .motion-marquee-row .motion-marquee-track {
  gap: 10px;
  padding-left: 24px;
}

.portfolio-v4 .motion-media-tile,
.portfolio-v4 .motion-media-tile-portrait {
  flex-basis: 340px;
  width: 340px;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
}

.portfolio-v4 .motion-media-tile::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.84));
  pointer-events: none;
}

.portfolio-v4 .motion-media-tile img {
  border-radius: inherit;
}

.portfolio-v4 .motion-media-tile span {
  z-index: 2;
  opacity: 1;
  transform: none;
  font-size: 0.58rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-manifesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 960px;
  padding: 108px 48px 84px;
}

.portfolio-v4 .motion-manifesto-title {
  position: relative;
  inset: auto;
  z-index: 3;
  width: 100%;
  text-align: center;
  transform: none;
}

.portfolio-v4 .motion-manifesto-title h2 {
  font-size: 7rem;
  line-height: 0.9;
  letter-spacing: 0;
}

.portfolio-v4 .motion-manifesto-copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 74px auto 0;
  font-size: 2rem;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: center;
}

.portfolio-v4 .motion-manifesto-media {
  border-radius: 8px;
}

.portfolio-v4 .motion-manifesto-media-one { top: 25%; left: 3%; width: 180px; height: 240px; }
.portfolio-v4 .motion-manifesto-media-two { top: 22%; right: 3%; width: 170px; height: 220px; }
.portfolio-v4 .motion-manifesto-media-three { right: 7%; bottom: 8%; width: 190px; height: 245px; }

.portfolio-v4 .motion-manifesto-media-three {
  background: #090909 url("assets/drive/web/ben-kimim.webp") center / cover no-repeat;
}

.portfolio-v4 .motion-manifesto-footer {
  right: 48px;
  bottom: 34px;
  left: 48px;
  z-index: 4;
}

.portfolio-v4 .motion-featured {
  padding: 96px 48px 118px;
  background: #080808;
}

.portfolio-v4 .motion-featured-head {
  width: min(1420px, 100%);
  margin-bottom: 48px;
}

.portfolio-v4 .motion-project-stack {
  display: grid;
  gap: 14px;
  width: min(1420px, 100%);
  margin: 0 auto;
}

.portfolio-v4 .motion-project-card,
.portfolio-v4 .motion-project-card:nth-child(n) {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(520px, 1.28fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "top media"
    "copy media";
  gap: 8px 28px;
  min-height: 330px;
  margin: 0;
  padding: 18px 18px 18px 24px;
  border-width: 1px;
  border-radius: 10px;
  box-shadow: none;
  transform: none !important;
  transition: border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}

.portfolio-v4 .motion-project-card:hover,
.portfolio-v4 .motion-project-card:focus-within {
  border-color: color-mix(in srgb, var(--project-color) 74%, white 26%);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
}

.portfolio-v4 .motion-project-card.reveal {
  opacity: 0;
}

.portfolio-v4 .motion-project-card.reveal.is-visible {
  opacity: 1;
}

.portfolio-v4 .motion-project-card::before {
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  height: auto;
  opacity: 0.9;
  transform: none;
}

.portfolio-v4 .motion-project-top {
  grid-area: top;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  padding: 2px 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--project-color) 24%, transparent);
}

.portfolio-v4 .motion-project-top strong {
  font-size: 2.8rem;
  line-height: 0.8;
  letter-spacing: 0;
}

.portfolio-v4 .motion-project-top > span {
  font-size: 0.56rem;
  line-height: 1.35;
  letter-spacing: 0;
}

.portfolio-v4 .motion-project-top button {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 38px;
  margin-top: 6px;
  padding: 0 15px;
  border-width: 1px;
  font-size: 0.58rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-project-copy {
  grid-area: copy;
  align-self: end;
  max-width: 390px;
  padding: 16px 0 6px;
}

.portfolio-v4 .motion-project-copy > span {
  font-size: 0.56rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-project-copy h3 {
  margin: 10px 0 12px;
  font-size: 2.35rem;
  line-height: 0.94;
  letter-spacing: 0;
}

.portfolio-v4 .motion-project-copy p {
  max-width: 43ch;
  font-size: 0.78rem;
  line-height: 1.55;
}

.portfolio-v4 .motion-project-media {
  grid-area: media;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  grid-template-rows: 1fr;
  gap: 8px;
  min-height: 292px;
  height: 100%;
}

.portfolio-v4 .motion-project-media > :is(img, video),
.portfolio-v4 .motion-project-media > :is(img, video):nth-child(n) {
  grid-area: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 6px;
  object-fit: cover;
}

.portfolio-v4 .motion-light-zone {
  padding: 100px 48px 112px;
  border-radius: 44px 44px 0 0;
}

.portfolio-v4 .motion-light-heading {
  gap: 24px;
  margin-bottom: 40px;
}

.portfolio-v4 .motion-proof-grid article {
  min-height: 220px;
  padding: 28px 18px;
}

.portfolio-v4 .motion-proof-grid strong {
  font-size: 4.4rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-services,
.portfolio-v4 .motion-process {
  padding-top: 88px;
}

.portfolio-v4 .motion-service-list button {
  min-height: 116px;
}

.portfolio-v4 .motion-service-list strong {
  font-size: 1.7rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-process-statement {
  font-size: 2rem;
  letter-spacing: 0;
}

.portfolio-v4 .motion-youtube {
  gap: 64px;
  min-height: 820px;
  margin-top: -44px;
  padding: 104px 48px 92px;
  border-radius: 44px 44px 0 0;
}

.portfolio-v4 .motion-youtube-wall {
  gap: 12px;
}

.portfolio-v4 .motion-youtube-wall img {
  border-radius: 6px;
}

.portfolio-v4 .motion-products,
.portfolio-v4 .motion-achievements,
.portfolio-v4 .motion-archive {
  padding-top: 96px;
  padding-bottom: 104px;
}

.portfolio-v4 .motion-product-rail button {
  flex-basis: 260px;
}

.portfolio-v4 .motion-achievements {
  min-height: 720px;
}

.portfolio-v4 .motion-archive-grid button {
  min-height: 0;
  border-radius: 6px;
}

.portfolio-v4 .motion-contact {
  min-height: 780px;
  padding: 98px 48px 64px;
}

.portfolio-v4 .motion-contact-lines {
  font-size: 6.2rem;
  line-height: 0.82;
  letter-spacing: 0;
}

/* Keep every deep page readable even when its case-study theme changes. */
.portfolio-v4 .panel:not(#panel-home) {
  min-width: 0;
  overflow-x: clip;
}

.portfolio-v4 .panel:not(#panel-home) :is(section, article, div, figure) {
  min-width: 0;
}

.portfolio-v4 .panel:not(#panel-home) h2 {
  max-width: 21ch;
  font-size: 3.15rem !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.portfolio-v4 .panel:not(#panel-home) h3 {
  max-width: 26ch;
  line-height: 1.08;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.portfolio-v4 .panel:not(#panel-home) p {
  line-height: 1.62;
}

.portfolio-v4 .panel:not(#panel-home) :is(img, video) {
  max-width: 100%;
}

.portfolio-v4 .panel:not(#panel-home) :is(.panel-head, .section-heading, .compact-heading, .night-section-heading, .prombt-section-heading, .ilayda-section-heading, .aipo-section-copy, .dubai-section-copy) {
  gap: 24px !important;
  margin-bottom: 36px !important;
}

@keyframes v4HeadScan {
  0% { transform: translateY(-20%); opacity: 0; }
  14% { opacity: 0.8; }
  58% { opacity: 0.36; }
  100% { transform: translateY(620%); opacity: 0; }
}

@keyframes v4Orbit {
  to { transform: rotate(360deg); }
}

@media (min-width: 1700px) {
  .portfolio-v4 .motion-hero-name { font-size: 11.4rem; }
  .portfolio-v4 .motion-hero-object { width: 460px; height: 620px; }
  .portfolio-v4 .motion-media-tile,
  .portfolio-v4 .motion-media-tile-portrait { flex-basis: 390px; width: 390px; }
}

@media (max-width: 1320px) {
  .portfolio-v4 .motion-hero-name { font-size: 7.5rem; }
  .portfolio-v4 .motion-hero-object { width: 350px; height: 480px; }
  .portfolio-v4 .motion-head-caption { right: -42px; }
  .portfolio-v4 .motion-project-card,
  .portfolio-v4 .motion-project-card:nth-child(n) {
    grid-template-columns: minmax(230px, 0.74fr) minmax(430px, 1.26fr);
    min-height: 316px;
  }
  .portfolio-v4 .motion-project-media { min-height: 278px; }
}

@media (max-width: 1120px) {
  .portfolio-v4 .site-header,
  .portfolio-v4 .site-header.is-compact,
  .portfolio-v4:not([data-route="home"]) .site-header {
    width: calc(100% - 28px);
    border-color: var(--v4-line);
    border-radius: 999px;
    background: rgba(12, 12, 12, 0.78);
    backdrop-filter: blur(18px);
  }

  .portfolio-v4 .motion-hero {
    min-height: 720px;
    padding-inline: 32px;
  }

  .portfolio-v4 .motion-hero-name { font-size: 6.1rem; }
  .portfolio-v4 .motion-hero-object { width: 330px; height: 450px; }
  .portfolio-v4 .motion-hero-eyebrow { left: 32px; right: 32px; }
  .portfolio-v4 .motion-hero-copy { left: 32px; width: 310px; }
  .portfolio-v4 .motion-hero-bottom { left: 32px; right: 32px; }

  .portfolio-v4 .motion-section-intro,
  .portfolio-v4 .motion-featured-head,
  .portfolio-v4 .motion-dark-heading { width: calc(100% - 64px); }

  .portfolio-v4 .motion-featured-head { width: 100%; }

  .portfolio-v4 .motion-project-card,
  .portfolio-v4 .motion-project-card:nth-child(n) {
    grid-template-columns: 0.66fr 1.34fr;
    gap: 8px 18px;
    min-height: 300px;
  }

  .portfolio-v4 .motion-project-copy h3 { font-size: 2rem; }
  .portfolio-v4 .motion-project-media { min-height: 264px; }

  .portfolio-v4 .panel:not(#panel-home) h2 { font-size: 2.7rem !important; }
}

@media (max-width: 780px) {
  .portfolio-v4 .motion-hero {
    height: 92svh;
    min-height: 680px;
    max-height: 820px;
    padding: 82px 18px 24px;
  }

  .portfolio-v4 .intro-mark {
    width: min(390px, 86vw);
  }

  .portfolio-v4 .motion-hero-grid { top: 18%; width: calc(100% - 36px); }
  .portfolio-v4 .motion-hero-logo-burst {
    top: 43%;
    width: min(420px, 94vw);
  }
  .portfolio-v4 .motion-hero-name { top: 35%; width: calc(100% - 12px); font-size: 3.65rem; line-height: 0.82; }
  .portfolio-v4 .motion-hero-object { bottom: 4%; width: 270px; height: 370px; }
  .portfolio-v4 .motion-hero-object.is-character-mode {
    bottom: 4%;
    width: min(500px, calc(100vw - 12px));
    height: min(620px, calc(100svh - 58px));
  }
  .portfolio-v4 .motion-head-frame { inset: 18px 34px 24px; }
  .portfolio-v4 .motion-head-frame strong { right: 22px; bottom: 30px; font-size: 3.1rem; }
  .portfolio-v4 .motion-head-caption { right: -18px; bottom: 64px; min-width: 124px; padding: 8px 9px; }
  .portfolio-v4 .motion-hero-eyebrow { top: 82px; left: 18px; right: 18px; }
  .portfolio-v4 .motion-hero-copy { bottom: 60px; left: 18px; width: min(275px, calc(100% - 36px)); }
  .portfolio-v4 .motion-hero-copy p { max-width: 250px; font-size: 0.76rem; }
  .portfolio-v4 .motion-hero-actions { max-width: 250px; }
  .portfolio-v4 .motion-button { min-height: 39px; padding-inline: 13px; font-size: 0.56rem; }
  .portfolio-v4 .motion-hero-bottom { left: 18px; right: 18px; bottom: 12px; }

  .portfolio-v4 .motion-media-marquee { padding: 68px 0 58px; }
  .portfolio-v4 .motion-section-intro,
  .portfolio-v4 .motion-featured-head,
  .portfolio-v4 .motion-dark-heading {
    display: block;
    width: calc(100% - 36px);
    margin-bottom: 34px;
  }
  .portfolio-v4 .motion-section-intro > span,
  .portfolio-v4 .motion-featured-head > span,
  .portfolio-v4 .motion-dark-heading > span { display: block; margin-bottom: 14px; }
  .portfolio-v4 .motion-section-intro h2,
  .portfolio-v4 .motion-featured-head h2,
  .portfolio-v4 .motion-dark-heading h2,
  .portfolio-v4 .motion-light-heading h2,
  .portfolio-v4 .motion-youtube-copy h2,
  .portfolio-v4 .motion-achievements-copy h2,
  .portfolio-v4 .motion-contact-content h2 { font-size: 2rem; }
  .portfolio-v4 .motion-section-intro p,
  .portfolio-v4 .motion-featured-head p { margin-top: 16px; }
  .portfolio-v4 .motion-media-tile,
  .portfolio-v4 .motion-media-tile-portrait { flex-basis: 260px; width: 260px; }

  .portfolio-v4 .motion-manifesto { min-height: 0; padding: 78px 18px 72px; }
  .portfolio-v4 .motion-manifesto-title h2 { font-size: 3.9rem; }
  .portfolio-v4 .motion-manifesto-copy { margin: 58px 0 38px; font-size: 1.62rem; }
  .portfolio-v4 .motion-manifesto-media-one,
  .portfolio-v4 .motion-manifesto-media-two,
  .portfolio-v4 .motion-manifesto-media-three { width: 100%; height: auto; }

  .portfolio-v4 .motion-featured { padding: 76px 18px 86px; }
  .portfolio-v4 .motion-featured-head { width: 100%; }
  .portfolio-v4 .motion-project-card,
  .portfolio-v4 .motion-project-card:nth-child(n) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "top" "copy" "media";
    gap: 14px;
    min-height: 0;
    padding: 15px;
  }
  .portfolio-v4 .motion-project-top { grid-template-columns: 46px 1fr; padding-bottom: 12px; }
  .portfolio-v4 .motion-project-top strong { font-size: 2.35rem; }
  .portfolio-v4 .motion-project-top button { width: auto; }
  .portfolio-v4 .motion-project-copy { max-width: none; padding: 4px 0 2px; }
  .portfolio-v4 .motion-project-copy h3 { font-size: 2rem; }
  .portfolio-v4 .motion-project-media { grid-template-columns: 1.25fr 0.75fr; grid-template-rows: 156px 116px; min-height: 0; }
  .portfolio-v4 .motion-project-media > :is(img, video):first-child { grid-row: 1 / 3; }

  .portfolio-v4 .motion-light-zone { padding: 72px 18px 82px; border-radius: 28px 28px 0 0; }
  .portfolio-v4 .motion-proof-grid article { min-height: 166px; }
  .portfolio-v4 .motion-proof-grid strong { font-size: 2.55rem; }
  .portfolio-v4 .motion-services,
  .portfolio-v4 .motion-process { padding-top: 68px; }
  .portfolio-v4 .motion-youtube { min-height: 0; padding: 78px 18px 70px; border-radius: 28px 28px 0 0; }
  .portfolio-v4 .motion-products,
  .portfolio-v4 .motion-achievements,
  .portfolio-v4 .motion-archive { padding-top: 76px; padding-bottom: 82px; }
  .portfolio-v4 .motion-achievements { min-height: 0; }
  .portfolio-v4 .motion-contact { min-height: 700px; padding: 82px 18px 48px; }
  .portfolio-v4 .motion-contact-lines { font-size: 3.6rem; }

  .portfolio-v4 .panel:not(#panel-home) h2 {
    max-width: 100%;
    font-size: 2.05rem !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }
  .portfolio-v4 .panel:not(#panel-home) h3 { overflow-wrap: anywhere; }

  .portfolio-v4 .aipo-hero-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
    padding: 28px 18px 36px;
    align-items: start;
  }

  .portfolio-v4 .aipo-hero-detail::after {
    width: 58%;
    right: 18px;
  }

  .portfolio-v4 .aipo-hero-bg {
    object-position: 60% center;
  }

  .portfolio-v4 .aipo-hero-content,
  .portfolio-v4 .aipo-hero-terminal {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .portfolio-v4 .aipo-status-line {
    width: 100%;
    flex-wrap: wrap;
  }

  .portfolio-v4 .aipo-logo-lockup {
    width: min(300px, 88vw);
    max-height: 96px;
  }

  .portfolio-v4 .aipo-hero-content h2,
  .portfolio-v4 .aipocalypto-detail h2,
  .portfolio-v4 .aipo-section-copy h2 {
    width: 100%;
    max-width: 100%;
    font-size: 2.05rem !important;
    line-height: 1.08 !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .portfolio-v4 .aipo-hero-content p {
    max-width: 100%;
    font-size: 0.86rem;
    line-height: 1.58;
  }

  .portfolio-v4 .aipo-hero-actions {
    gap: 8px;
  }

  .portfolio-v4 .aipo-hero-terminal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .portfolio-v4 .aipo-hero-terminal article {
    min-width: 0;
    padding: 12px;
  }

  .portfolio-v4 .aipo-hero-terminal strong {
    margin-top: 10px;
    font-size: 0.8rem;
    line-height: 1.16;
  }

  .portfolio-v4 .aipo-hero-terminal p {
    font-size: 0.7rem;
    line-height: 1.42;
  }

  .portfolio-v4 .aipo-section-copy,
  .portfolio-v4 .aipo-war-grid,
  .portfolio-v4 .aipo-storefront,
  .portfolio-v4 .aipo-post-stage,
  .portfolio-v4 .aipo-ui-grid,
  .portfolio-v4 .aipo-delivery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-v4 .aipo-section-copy h2,
  .portfolio-v4 .aipo-section-copy p {
    grid-column: 1;
  }

  .portfolio-v4 .aipo-loop-console,
  .portfolio-v4 .aipo-store-assets,
  .portfolio-v4 .aipo-card-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-v4 .aipo-post-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .portfolio-v4 .motion-hero-name { font-size: 3.05rem; }
  .portfolio-v4 .motion-hero-object { width: 245px; height: 340px; }
  .portfolio-v4 .motion-hero-object.is-character-mode {
    width: min(430px, calc(100vw + 10px));
    height: min(570px, calc(100svh - 52px));
  }
  .portfolio-v4 .motion-head-caption { right: -8px; }
  .portfolio-v4 .motion-hero-copy p { max-width: 220px; }
  .portfolio-v4 .motion-hero-actions .motion-button:last-child { display: none; }
  .portfolio-v4 .motion-project-media { grid-template-rows: 138px 104px; }
  .portfolio-v4 .motion-contact-lines { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-v4 .motion-head-scan,
  .portfolio-v4 .motion-head-orbit {
    animation: none !important;
  }

  .portfolio-v4 .motion-head-frame :is(video, img, canvas) {
    opacity: 1 !important;
  }
}

/* Scroll-stacked Projects section */
.portfolio-v4 .projects-overview {
  overflow-x: clip;
}

.portfolio-v4 .projects-overview > .panel-head {
  display: block;
  max-width: 1440px;
  margin: 0 auto clamp(48px, 7vw, 96px);
  padding: clamp(12px, 2vw, 28px) clamp(16px, 4vw, 64px) 0;
  text-align: center;
}

.portfolio-v4 .projects-overview > .panel-head .kicker {
  margin-bottom: clamp(14px, 2vw, 22px);
}

.portfolio-v4 .projects-overview > .panel-head h2 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.5rem, 12vw, 10rem);
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.portfolio-v4 .projects-overview > .panel-head p {
  max-width: 760px;
  margin: clamp(20px, 3vw, 34px) auto 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  line-height: 1.7;
}

.portfolio-v4 .project-preview-index {
  display: none !important;
}

.portfolio-v4 .project-stack-section {
  position: relative;
  width: 100%;
  height: var(--project-stack-scroll-height, 486vh);
  min-height: 3600px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 64px);
  overflow-x: clip;
}

.portfolio-v4 .project-stack-list {
  position: sticky;
  top: clamp(72px, 9vh, 104px);
  width: 100%;
  height: clamp(540px, 72vh, 820px);
  max-width: 1440px;
  margin: 0 auto;
}

.portfolio-v4 .project-stack-item {
  position: absolute;
  inset: 0;
  z-index: var(--project-card-z);
  height: 100%;
  min-height: 0;
  pointer-events: var(--project-card-hit, none);
}

.portfolio-v4 .project-stack-item + .project-stack-item {
  margin-top: 0;
}

.portfolio-v4 .project-stack-card {
  --project-card-y: 16vh;
  --project-card-scale: 0.97;
  --project-card-opacity: 0;
  --project-depth-scale: 1;
  --project-depth-y: 0px;
  position: absolute;
  inset: 0;
  z-index: var(--project-card-z);
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(24px, 3vw, 44px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 48px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
  transform:
    translate3d(0, calc(var(--project-card-y) + var(--project-depth-y)), 0)
    scale(calc(var(--project-card-scale) * var(--project-depth-scale)));
  transform-origin: top center;
  opacity: var(--project-card-opacity);
  backface-visibility: hidden;
  will-change: transform, opacity;
  cursor: pointer;
  transition:
    background-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 350ms ease;
}

.portfolio-v4 .project-stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 22%, transparent 76%, rgba(0, 0, 0, 0.1)),
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.34), transparent 26%);
  opacity: 0.42;
}

.portfolio-v4 .project-stack-card-grey {
  color: #0b0b0d;
  background: #b9bcc3;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.portfolio-v4 .project-stack-card-white {
  color: #0b0b0d;
  background: #f4f4f1;
  border: 1px solid rgba(11, 11, 13, 0.14);
}

.portfolio-v4 .project-stack-card:hover {
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.34);
}

.portfolio-v4 .project-stack-card-header {
  display: grid;
  grid-template-columns: minmax(100px, 0.16fr) minmax(180px, 0.32fr) minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 32px);
  align-items: center;
  padding-bottom: clamp(18px, 2.5vw, 34px);
}

.portfolio-v4 .project-stack-number {
  display: block;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  font-weight: 950;
  line-height: 0.78;
  letter-spacing: -0.07em;
}

.portfolio-v4 .project-stack-category {
  color: rgba(11, 11, 13, 0.62);
  font-size: clamp(0.68rem, 0.9vw, 0.9rem);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portfolio-v4 .project-stack-card h3 {
  max-width: 620px;
  margin: 0;
  color: inherit;
  font-size: clamp(1.2rem, 2.2vw, 2.4rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.025em;
}

.portfolio-v4 .project-stack-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: max-content;
  height: 44px;
  padding: 0 22px;
  color: #0b0b0d;
  background: transparent;
  border: 1px solid rgba(11, 11, 13, 0.7);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 220ms ease, color 220ms ease, background 220ms ease;
}

.portfolio-v4 .project-stack-button:hover,
.portfolio-v4 .project-stack-button:focus-visible {
  color: #ffffff;
  background: #0b0b0d;
  transform: translateY(-2px) scale(1.02);
}

.portfolio-v4 .project-stack-button span {
  transition: transform 220ms ease;
}

.portfolio-v4 .project-stack-button:hover span,
.portfolio-v4 .project-stack-button:focus-visible span {
  transform: translate(4px, -2px);
}

.portfolio-v4 .project-stack-button:focus-visible {
  outline: 3px solid rgba(11, 11, 13, 0.3);
  outline-offset: 3px;
}

.portfolio-v4 .project-stack-body {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(18px, 2.4vw, 34px);
  min-height: 0;
  overflow: hidden;
}

.portfolio-v4 .project-stack-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(18px, 2.2vw, 30px);
  min-width: 0;
}

.portfolio-v4 .project-stack-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(11, 11, 13, 0.62);
  font-size: clamp(0.9rem, 1.25vw, 1.1rem);
  font-weight: 650;
  line-height: 1.5;
}

.portfolio-v4 .project-stack-card-white .project-stack-copy p,
.portfolio-v4 .project-stack-card-white .project-stack-category {
  color: rgba(11, 11, 13, 0.58);
}

.portfolio-v4 .project-stack-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(11, 11, 13, 0.18);
  border-left: 1px solid rgba(11, 11, 13, 0.18);
}

.portfolio-v4 .project-stack-meta-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 13px;
  border-right: 1px solid rgba(11, 11, 13, 0.18);
  border-bottom: 1px solid rgba(11, 11, 13, 0.18);
}

.portfolio-v4 .project-stack-meta-cell small {
  color: rgba(11, 11, 13, 0.46);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.portfolio-v4 .project-stack-meta-cell strong {
  min-width: 0;
  color: #0b0b0d;
  font-size: 0.82rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.portfolio-v4 .project-stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-v4 .project-stack-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: #0b0b0d;
  border: 1px solid rgba(11, 11, 13, 0.28);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
}

.portfolio-v4 .project-stack-media-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(10px, 1.2vw, 18px);
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.portfolio-v4 .project-stack-secondary {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 18px);
  min-height: 0;
}

.portfolio-v4 .project-stack-media-grid figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #969aa2;
  border-radius: 32px;
  transform: translateZ(0);
}

.portfolio-v4 .project-stack-card-white .project-stack-media-grid figure {
  background: #dddddd;
}

.portfolio-v4 .project-stack-media-grid :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease;
}

.portfolio-v4 .project-stack-card:hover .project-stack-media-grid :is(img, video) {
  transform: scale(1.035);
  filter: contrast(1.03) saturate(1.04);
}

.portfolio-v4 .project-stack-primary {
  min-height: 0;
}

.portfolio-v4 .project-stack-secondary figure {
  min-height: 0;
}

.portfolio-v4 .project-stack-media-grid figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  padding: 7px 9px;
  color: #f4f4f1;
  background: rgba(11, 11, 13, 0.74);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .portfolio-v4 .project-stack-card {
    border-radius: 38px;
  }

  .portfolio-v4 .project-stack-card-header {
    grid-template-columns: minmax(86px, 0.18fr) minmax(150px, 0.3fr) minmax(0, 1fr);
  }

  .portfolio-v4 .project-stack-button {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .portfolio-v4 .project-stack-body {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }
}

@media (max-width: 780px), (max-height: 650px) {
  .portfolio-v4 .project-stack-section {
    height: auto;
    min-height: 0;
    padding-inline: 12px;
    padding-bottom: 48px;
  }

  .portfolio-v4 .project-stack-list {
    position: relative;
    top: auto;
    height: auto;
  }

  .portfolio-v4 .project-stack-item,
  .portfolio-v4 .project-stack-item + .project-stack-item {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 24px;
    pointer-events: auto;
  }

  .portfolio-v4 .project-stack-card {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    width: calc(100vw - 24px);
    padding: 18px;
    border-radius: 26px;
    transform: none !important;
    opacity: 1 !important;
  }

  .portfolio-v4 .project-stack-card-header,
  .portfolio-v4 .project-stack-body,
  .portfolio-v4 .project-stack-media-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-v4 .project-stack-card-header {
    gap: 12px;
  }

  .portfolio-v4 .project-stack-number {
    font-size: clamp(3.2rem, 18vw, 5.8rem);
  }

  .portfolio-v4 .project-stack-button {
    grid-column: auto;
    justify-self: start;
  }

  .portfolio-v4 .project-stack-primary {
    order: -1;
    min-height: clamp(260px, 68vw, 420px);
  }

  .portfolio-v4 .project-stack-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .portfolio-v4 .project-stack-secondary figure {
    min-height: clamp(140px, 36vw, 220px);
    border-radius: 18px;
  }

  .portfolio-v4 .project-stack-media-grid figure {
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-v4 .project-stack-item,
  .portfolio-v4 .project-stack-item + .project-stack-item {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 24px;
    pointer-events: auto;
  }

  .portfolio-v4 .project-stack-section,
  .portfolio-v4 .project-stack-list {
    height: auto;
    min-height: 0;
  }

  .portfolio-v4 .project-stack-list {
    position: relative;
    top: auto;
  }

.portfolio-v4 .project-stack-card {
    position: relative;
    top: auto;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
  }
}

#panel-portfolio {
  padding: 0 !important;
  color: #051a24;
  background: #ffffff;
  overflow-x: hidden;
}

#panel-portfolio::before,
#panel-portfolio::after {
  display: none;
}

.portfolio-oddy {
  --oddy-dark: #051a24;
  --oddy-ink: #0d212c;
  --oddy-muted: #273c46;
  --oddy-soft: rgba(5, 26, 36, 0.08);
  --oddy-shadow: 0 1px 2px rgba(5, 26, 36, 0.1), 0 4px 4px rgba(5, 26, 36, 0.09), 0 9px 6px rgba(5, 26, 36, 0.05), 0 17px 7px rgba(5, 26, 36, 0.01), inset 0 2px 8px rgba(255, 255, 255, 0.5);
  min-height: 100vh;
  padding-top: 112px;
  color: var(--oddy-dark);
  background: #ffffff;
  font-family: "PP Neue Montreal Portfolio", "Inter", system-ui, sans-serif;
}

.portfolio-oddy :is(h2, h3, p) {
  max-width: none;
  color: inherit;
  letter-spacing: 0;
}

.portfolio-oddy em,
.portfolio-oddy-logo,
.portfolio-oddy-quote-mark,
.portfolio-oddy-project h3,
.portfolio-oddy-partner h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
}

.portfolio-oddy .reveal {
  opacity: 0;
  transform: translateY(30px);
}

.portfolio-oddy .reveal.is-visible {
  animation: oddyFadeInUp 0.8s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

.portfolio-oddy-hero {
  width: min(440px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 74px) 0 0;
  text-align: left;
}

.portfolio-oddy-logo {
  margin-bottom: 16px;
  color: var(--oddy-dark);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.portfolio-oddy-kicker {
  margin-bottom: 10px;
  color: var(--oddy-dark);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: clamp(0.72rem, 1.2vw, 0.88rem);
  line-height: 1.5;
}

.portfolio-oddy-hero h2 {
  margin: 0;
  color: var(--oddy-ink);
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.portfolio-oddy-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 24px;
}

.portfolio-oddy-copy p,
.portfolio-oddy-project p,
.portfolio-oddy-offer p,
.portfolio-oddy-feedback article p {
  margin: 0;
  color: var(--oddy-dark);
  font-size: clamp(0.92rem, 1.18vw, 1rem);
  line-height: 1.72;
}

.portfolio-oddy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.portfolio-oddy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
}

.portfolio-oddy-button:hover,
.portfolio-oddy-button:focus-visible {
  transform: translateY(-2px);
}

.portfolio-oddy-button-primary {
  color: #ffffff;
  background: var(--oddy-dark);
  box-shadow: var(--oddy-shadow);
}

.portfolio-oddy-button-secondary,
.portfolio-oddy-button-light {
  color: var(--oddy-dark);
  background: #ffffff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 4px 30px rgba(0, 0, 0, 0.08);
}

.portfolio-oddy-button-ghost {
  color: #f6fcff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(246, 252, 255, 0.18);
}

.portfolio-oddy-marquee {
  width: 100%;
  margin: clamp(64px, 9vw, 90px) 0 72px;
  overflow: hidden;
}

.portfolio-oddy-marquee-track {
  display: flex;
  width: max-content;
  animation: oddyMarquee 30s linear infinite;
}

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

.portfolio-oddy-marquee img {
  width: clamp(210px, 25vw, 390px);
  height: clamp(280px, 36vw, 500px);
  margin: 0 12px;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(5, 26, 36, 0.18);
}

.portfolio-oddy-quote {
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
  padding: 52px 0;
  text-align: left;
}

.portfolio-oddy-quote-mark {
  color: var(--oddy-ink);
  font-size: 2.4rem;
  line-height: 1;
}

.portfolio-oddy-quote h3,
.portfolio-oddy-section-head h3 {
  margin: 12px 0;
  color: var(--oddy-ink);
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 500;
  line-height: 1.1;
}

.portfolio-oddy-quote > p {
  margin: 18px 0 28px;
  color: var(--oddy-muted);
  font-size: 0.92rem;
  font-style: italic;
}

.portfolio-oddy-logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 34px;
}

.portfolio-oddy-logo-row span {
  color: var(--oddy-ink);
  font-size: 1.42rem;
  font-weight: 700;
}

.portfolio-oddy-quote img {
  display: block;
  width: min(320px, 100%);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(5, 26, 36, 0.16);
}

.portfolio-oddy-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: min(960px, calc(100% - 48px));
  margin: 16px auto 76px;
}

.portfolio-oddy-offer {
  min-height: 390px;
  padding: 32px clamp(28px, 5vw, 72px) 40px 40px;
  color: var(--oddy-ink);
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.portfolio-oddy-offer-dark {
  color: #f6fcff;
  background: var(--oddy-dark);
  box-shadow: inset 0 2px 18px rgba(255, 255, 255, 0.08), 0 28px 60px rgba(5, 26, 36, 0.22);
}

.portfolio-oddy-offer h3 {
  margin: 0 0 18px;
  color: inherit;
  font-size: 1.38rem !important;
  font-weight: 700;
}

.portfolio-oddy-offer p {
  max-width: 420px;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.portfolio-oddy-offer strong {
  display: block;
  margin-top: 72px;
  color: inherit;
  font-size: 1.55rem;
}

.portfolio-oddy-offer > span {
  display: block;
  margin: 6px 0 26px;
  color: color-mix(in srgb, currentColor 58%, transparent);
}

.portfolio-oddy-offer div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.portfolio-oddy-feedback {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 76px 0 64px;
  overflow: hidden;
}

.portfolio-oddy-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.portfolio-oddy-stars {
  color: #0d212c;
  font-size: 1.2rem;
  font-weight: 900;
  white-space: nowrap;
}

.portfolio-oddy-stars span {
  margin-left: 10px;
  color: var(--oddy-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.portfolio-oddy-feedback-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.portfolio-oddy-feedback-track::-webkit-scrollbar {
  display: none;
}

.portfolio-oddy-feedback article {
  flex: 0 0 min(427px, calc(100vw - 64px));
  scroll-snap-align: start;
  min-height: 255px;
  padding: 32px 36px;
  color: var(--oddy-ink);
  background: #ffffff;
  border-radius: 36px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.portfolio-oddy-feedback article b {
  display: block;
  margin-bottom: 18px;
  color: var(--oddy-dark);
  font-size: 1.75rem;
}

.portfolio-oddy-feedback article span {
  display: block;
  margin-top: 24px;
  color: var(--oddy-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.portfolio-oddy-carousel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.portfolio-oddy-carousel-actions button {
  width: 48px;
  height: 48px;
  color: var(--oddy-ink);
  background: #ffffff;
  border: 1px solid rgba(13, 33, 44, 0.2);
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
}

.portfolio-oddy-projects {
  display: grid;
  gap: clamp(64px, 8vw, 90px);
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 38px 0 72px;
}

.portfolio-oddy-project div {
  width: min(720px, 100%);
  margin-left: clamp(22px, 8vw, 112px);
  margin-bottom: 22px;
}

.portfolio-oddy-project h3 {
  margin: 0 0 10px;
  color: var(--oddy-dark);
  font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
  font-weight: 600;
}

.portfolio-oddy-project p {
  max-width: 620px;
  color: rgba(5, 26, 36, 0.7);
}

.portfolio-oddy-project img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(5, 26, 36, 0.16);
}

.portfolio-oddy-comments .portfolio-oddy-feedback-track article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 0 min(430px, calc(100vw - 54px));
  min-height: 318px;
  padding: 34px 36px 30px;
  background:
    radial-gradient(circle at 18% 18%, rgba(5, 26, 36, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 251, 0.98)),
    #ffffff;
  border: 1px solid rgba(5, 26, 36, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.portfolio-oddy-comments .portfolio-oddy-feedback-track article::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  right: 30px;
  z-index: -1;
  color: rgba(5, 26, 36, 0.08);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8.5rem;
  line-height: 1;
}

.portfolio-oddy-comments .portfolio-oddy-feedback-track article:hover {
  transform: translateY(-6px);
  border-color: rgba(5, 26, 36, 0.2);
  box-shadow: 0 22px 54px rgba(5, 26, 36, 0.16);
}

.portfolio-oddy-comment-source {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 34px;
  padding: 0 16px;
  color: #ffffff;
  background: #051a24;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}

.portfolio-oddy-comments .portfolio-oddy-feedback-track article p {
  flex: 1;
  margin: 24px 0 28px;
  color: #082432;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  font-weight: 500;
  line-height: 1.58;
}

.portfolio-oddy-comment-person {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: #061d27;
  text-decoration: none;
}

.portfolio-oddy-comment-person img {
  width: 54px;
  height: 54px;
  border: 2px solid rgba(5, 26, 36, 0.12);
  border-radius: 50%;
  object-fit: cover;
  background: #e9eef0;
}

.portfolio-oddy-comments .portfolio-oddy-comment-person span {
  display: block;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: 1rem;
  font-weight: 700;
}

.portfolio-oddy-comment-person strong {
  display: block;
  overflow: hidden;
  color: #061d27;
  font-size: 0.98rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-oddy-comment-person small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: rgba(5, 26, 36, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.portfolio-oddy-behance-showcase {
  display: block;
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 46px 0 96px;
}

.portfolio-oddy-behance-showcase .portfolio-oddy-section-head {
  width: min(1080px, 100%);
  margin-bottom: 34px;
}

.portfolio-oddy-behance-showcase .portfolio-oddy-section-head p {
  max-width: 560px;
  color: rgba(5, 26, 36, 0.66);
  font-size: 0.98rem;
  line-height: 1.7;
}

.portfolio-oddy-behance-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.portfolio-oddy-behance-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(24px, 4vw, 58px);
  min-height: clamp(310px, 36vw, 455px);
  padding: clamp(18px, 2.3vw, 30px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent, #ffffff) 22%, transparent), transparent 34%),
    linear-gradient(135deg, #06131a 0%, #091c25 52%, #031016 100%);
  border-radius: clamp(28px, 3.4vw, 46px);
  box-shadow: 0 22px 58px rgba(5, 26, 36, 0.16);
  text-decoration: none;
  transform: translateZ(0);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.portfolio-oddy-behance-card.is-featured {
  min-height: clamp(360px, 40vw, 520px);
}

.portfolio-oddy-behance-card:nth-child(even) {
  grid-template-columns: minmax(320px, 0.65fr) minmax(0, 1.35fr);
}

.portfolio-oddy-behance-card::before,
.portfolio-oddy-behance-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portfolio-oddy-behance-card::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 12px);
  opacity: 0.55;
}

.portfolio-oddy-behance-card::after {
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.portfolio-oddy-behance-card:hover,
.portfolio-oddy-behance-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 34px 82px rgba(5, 26, 36, 0.24);
}

.portfolio-oddy-behance-card img {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  width: 100%;
  height: clamp(280px, 34vw, 500px);
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: clamp(20px, 2.4vw, 34px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.01);
  transition: transform 500ms ease, filter 500ms ease;
}

.portfolio-oddy-behance-card:nth-child(even) img {
  grid-column: 2;
}

.portfolio-oddy-behance-card:hover img,
.portfolio-oddy-behance-card:focus-visible img {
  filter: saturate(1.16) contrast(1.08);
  transform: scale(1.065);
}

.portfolio-oddy-behance-type,
.portfolio-oddy-behance-card strong,
.portfolio-oddy-behance-card p,
.portfolio-oddy-behance-card small {
  position: relative;
  z-index: 3;
  grid-column: 2;
  align-self: start;
}

.portfolio-oddy-behance-card:nth-child(even) :is(.portfolio-oddy-behance-type, strong, p, small) {
  grid-column: 1;
}

.portfolio-oddy-behance-type {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  margin: 8px 0 26px;
  padding: 0 15px;
  color: #06131a;
  background: var(--accent, #ffffff);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portfolio-oddy-behance-card strong {
  display: block;
  max-width: 560px;
  margin: 0 0 18px;
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  line-height: 0.94;
  letter-spacing: 0;
}

.portfolio-oddy-behance-card p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
  line-height: 1.7;
}

.portfolio-oddy-behance-card small {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  margin-top: auto;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portfolio-oddy-partner {
  position: relative;
  display: grid;
  place-items: center;
  width: min(1280px, calc(100% - 48px));
  min-height: 520px;
  margin: 0 auto 64px;
  padding: 80px 24px;
  overflow: hidden;
  text-align: center;
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.portfolio-oddy-partner h3 {
  max-width: 900px;
  margin: 0 0 38px;
  color: var(--oddy-ink);
  font-family: "SFMono-Regular", "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: clamp(2rem, 5.5vw, 4.6rem) !important;
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  text-shadow:
    2px 0 0 rgba(5, 26, 36, 0.18),
    -2px 0 0 rgba(5, 26, 36, 0.08),
    0 2px 0 rgba(5, 26, 36, 0.1);
}

.portfolio-oddy-avatar-button {
  gap: 12px;
  min-height: 56px;
  padding: 6px 24px 6px 8px;
  box-shadow:
    0 14px 32px rgba(5, 26, 36, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.portfolio-oddy-button-avatar {
  position: relative;
  display: inline-flex;
  width: 58px;
  height: 38px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(5, 26, 36, 0.16), inset 0 0 16px rgba(255, 255, 255, 0.5);
}

.portfolio-oddy-button-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(1.08) contrast(1.04);
}

.portfolio-oddy-trail-thumb {
  position: absolute;
  z-index: 1;
  width: 132px;
  height: 174px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(5, 26, 36, 0.18);
  pointer-events: none;
  animation: oddyTrailOut 1s ease forwards;
}

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

@keyframes oddyMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes oddyTrailOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.86) rotate(var(--trail-rotate, 0deg));
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.62) rotate(var(--trail-rotate, 0deg));
  }
}

@media (max-width: 980px) {
  .portfolio-oddy-offers,
  .portfolio-oddy-section-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .portfolio-oddy-offers {
    display: grid;
    grid-template-columns: 1fr;
  }

  .portfolio-oddy-section-head {
    align-items: flex-start;
  }

  .portfolio-oddy-behance-card,
  .portfolio-oddy-behance-card.is-featured {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 30px;
  }

  .portfolio-oddy-behance-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .portfolio-oddy-behance-card img,
  .portfolio-oddy-behance-card:nth-child(even) img,
  .portfolio-oddy-behance-type,
  .portfolio-oddy-behance-card strong,
  .portfolio-oddy-behance-card p,
  .portfolio-oddy-behance-card small,
  .portfolio-oddy-behance-card:nth-child(even) :is(.portfolio-oddy-behance-type, strong, p, small) {
    grid-column: 1;
  }

  .portfolio-oddy-behance-card img {
    grid-row: auto;
    min-height: 0;
    height: clamp(260px, 52vw, 440px);
  }

  .portfolio-oddy-behance-card strong {
    font-size: clamp(1.8rem, 5vw, 3rem);
  }
}

@media (max-width: 700px) {
  .portfolio-oddy {
    padding-top: 92px;
  }

  .portfolio-oddy-hero h2 {
    white-space: normal;
  }

  .portfolio-oddy-marquee-track {
    animation-duration: 12s;
  }

  .portfolio-oddy-marquee img {
    width: 220px;
    height: 280px;
    border-radius: 18px;
  }

  .portfolio-oddy-offer {
    min-height: 0;
    padding: 28px;
    border-radius: 30px;
  }

  .portfolio-oddy-offer strong {
    margin-top: 38px;
  }

  .portfolio-oddy-project div {
    margin-left: 0;
  }

  .portfolio-oddy-behance-showcase {
    width: min(100% - 28px, 520px);
    padding-bottom: 60px;
  }

  .portfolio-oddy-behance-grid {
    gap: 14px;
  }

  .portfolio-oddy-behance-card,
  .portfolio-oddy-behance-card.is-featured {
    min-height: 380px;
    border-radius: 26px;
  }

  .portfolio-oddy-behance-card strong {
    font-size: 1.42rem;
  }

  .portfolio-oddy-behance-card p {
    font-size: 0.92rem;
  }

  .portfolio-oddy-partner {
    min-height: 380px;
    border-radius: 30px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .portfolio-oddy-marquee-track,
  .portfolio-oddy .reveal.is-visible,
  .portfolio-oddy-trail-thumb {
    animation: none;
  }

  .portfolio-oddy .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Premium Behance community signal / home feed */
.portfolio-v4 .home-comment-stream {
  --comment-lime: #a8ff3e;
  --comment-bg: #050706;
  --comment-surface: #0b0e0c;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 7vw, 116px) 0 clamp(76px, 7vw, 112px);
  color: #f5f7f2;
  background:
    linear-gradient(rgba(168, 255, 62, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 255, 62, 0.018) 1px, transparent 1px),
    linear-gradient(125deg, #080b09 0%, var(--comment-bg) 58%, #020303 100%);
  background-size: 76px 76px, 76px 76px, auto;
  border-block: 1px solid rgba(168, 255, 62, 0.13);
}

.portfolio-v4 .home-comment-stream::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 25%),
    linear-gradient(90deg, transparent 0 61%, rgba(168, 255, 62, 0.025) 100%);
}

.portfolio-v4 .home-comment-stream::after {
  content: "REAL COMMENTS / PUBLIC SOURCE / CREATIVE COMMUNITY";
  position: absolute;
  right: clamp(18px, 3vw, 48px);
  bottom: 18px;
  color: rgba(255, 255, 255, 0.1);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.portfolio-v4 .home-comment-stream-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.72fr);
  align-items: end;
  gap: clamp(48px, 7vw, 124px);
  width: min(1480px, calc(100% - 96px));
  margin: 0 auto clamp(44px, 5vw, 74px);
}

.portfolio-v4 .home-comment-heading {
  min-width: 0;
}

.portfolio-v4 .home-comment-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: rgba(231, 236, 228, 0.5);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.portfolio-v4 .home-comment-kicker i {
  width: 7px;
  height: 7px;
  background: var(--comment-lime);
  box-shadow: 0 0 14px rgba(168, 255, 62, 0.28);
  transform: rotate(45deg);
}

.portfolio-v4 .home-comment-stream-head h2 {
  display: grid;
  gap: 0.05em;
  max-width: 880px;
  margin: 0;
  color: #f7f8f4;
  font-size: clamp(2.85rem, 5vw, 5.25rem) !important;
  font-weight: 880;
  line-height: 0.94;
  letter-spacing: 0;
}

.portfolio-v4 .home-comment-title-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.portfolio-v4 .home-comment-title-mask > span {
  display: block;
}

.portfolio-v4 .home-comment-title-accent {
  color: var(--comment-lime);
}

.portfolio-v4 .home-comment-trust {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  min-width: 0;
  padding: 22px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 24px 70px rgba(0, 0, 0, 0.24);
}

.portfolio-v4 .home-comment-avatars {
  display: flex;
  align-items: center;
  align-self: start;
  padding-left: 8px;
}

.portfolio-v4 .home-comment-avatars img,
.portfolio-v4 .home-comment-avatars > span {
  width: 38px;
  height: 38px;
  margin-left: -8px;
  object-fit: cover;
  border: 2px solid #0a0d0b;
  border-radius: 50%;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
}

.portfolio-v4 .home-comment-avatars > span {
  display: grid;
  place-items: center;
  margin-bottom: 0;
  color: #071005;
  background: var(--comment-lime);
  font-size: 0.58rem;
  font-weight: 900;
}

.portfolio-v4 .home-comment-trust-copy {
  min-width: 0;
}

.portfolio-v4 .home-comment-trust-copy > span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: rgba(168, 255, 62, 0.72);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.portfolio-v4 .home-comment-trust-copy > span i {
  width: 5px;
  height: 5px;
  background: var(--comment-lime);
  border-radius: 50%;
  animation: homeCommentPulse 2.8s ease-in-out infinite;
}

.portfolio-v4 .home-comment-trust-copy strong {
  display: block;
  color: #f7f8f4;
  font-size: 1rem;
  font-weight: 820;
}

.portfolio-v4 .home-comment-trust-copy p {
  max-width: 330px;
  margin: 7px 0 0;
  color: rgba(231, 236, 228, 0.53);
  font-size: 0.7rem;
  font-weight: 560;
  line-height: 1.5;
}

.portfolio-v4 .home-comment-trust-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid rgba(255, 255, 255, 0.09);
}

.portfolio-v4 .home-comment-trust-metrics span {
  margin: 0;
  padding: 11px 0;
  color: rgba(231, 236, 228, 0.46);
  font-size: 0.58rem;
  font-weight: 700;
}

.portfolio-v4 .home-comment-trust-metrics span + span {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.portfolio-v4 .home-comment-trust-metrics strong {
  margin-right: 4px;
  color: rgba(247, 248, 244, 0.9);
  font-size: 0.7rem;
}

.portfolio-v4 .home-comment-stream-link {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  color: rgba(247, 248, 244, 0.82);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 4px;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.portfolio-v4 .home-comment-stream-link:hover,
.portfolio-v4 .home-comment-stream-link:focus-visible {
  color: #071005;
  background: var(--comment-lime);
  border-color: var(--comment-lime);
  outline: none;
}

.portfolio-v4 .home-comment-feed-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1480px, calc(100% - 96px));
  margin: 0 auto 16px;
  color: rgba(231, 236, 228, 0.34);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.portfolio-v4 .home-comment-feed-meta span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(168, 255, 62, 0.62);
}

.portfolio-v4 .home-comment-feed-meta i {
  width: 5px;
  height: 5px;
  background: var(--comment-lime);
  border-radius: 50%;
}

.portfolio-v4 .home-comment-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  padding-block: 10px 18px;
}

.portfolio-v4 .home-comment-marquee::before,
.portfolio-v4 .home-comment-marquee::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: min(10vw, 150px);
  pointer-events: none;
}

.portfolio-v4 .home-comment-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--comment-bg) 4%, transparent);
}

.portfolio-v4 .home-comment-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #020303 4%, transparent);
}

.portfolio-v4 .home-comment-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: homeCommentMarquee 78s linear infinite;
  animation-play-state: paused;
}

.portfolio-v4 .home-comment-stream.is-testimonial-active .home-comment-track {
  animation-play-state: running;
}

.portfolio-v4 .home-comment-stream.is-testimonial-active .home-comment-marquee:hover .home-comment-track,
.portfolio-v4 .home-comment-stream.is-testimonial-active .home-comment-marquee:focus-within .home-comment-track {
  animation-play-state: paused;
}

.portfolio-v4 .home-comment-group {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: 14px;
  padding-right: 14px;
}

.portfolio-v4 .home-comment-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  flex: none;
  width: 344px;
  height: 224px;
  padding: 22px 22px 18px;
  overflow: hidden;
  color: #f5f7f2;
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--comment-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 18px 42px rgba(0, 0, 0, 0.18);
  transition: border-color 220ms ease, background 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.portfolio-v4 .home-comment-card:nth-child(2) { width: 390px; }
.portfolio-v4 .home-comment-card:nth-child(3) { width: 328px; }
.portfolio-v4 .home-comment-card:nth-child(4) { width: 374px; }
.portfolio-v4 .home-comment-card:nth-child(5) { width: 304px; }
.portfolio-v4 .home-comment-card:nth-child(6) { width: 350px; }
.portfolio-v4 .home-comment-card:nth-child(7) { width: 324px; }
.portfolio-v4 .home-comment-card:nth-child(8) { width: 402px; }

.portfolio-v4 .home-comment-card::before {
  content: "“";
  position: absolute;
  top: 15px;
  left: 20px;
  color: rgba(168, 255, 62, 0.76);
  font-family: Georgia, serif;
  font-size: 2.2rem;
  line-height: 1;
}

.portfolio-v4 .home-comment-card::after {
  content: "VERIFIED / BEHANCE";
  position: absolute;
  top: 19px;
  right: 20px;
  color: rgba(231, 236, 228, 0.32);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.portfolio-v4 .home-comment-card:hover,
.portfolio-v4 .home-comment-card:focus-visible {
  z-index: 3;
  background:
    linear-gradient(145deg, rgba(168, 255, 62, 0.055), rgba(255, 255, 255, 0.026)),
    #0d110e;
  border-color: rgba(168, 255, 62, 0.4);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 24px 54px rgba(0, 0, 0, 0.3);
  outline: none;
  transform: translateY(-5px);
}

.portfolio-v4 .home-comment-card > p {
  display: -webkit-box;
  align-self: center;
  overflow: hidden;
  margin: 28px 0 18px;
  color: rgba(247, 248, 244, 0.84);
  font-size: clamp(0.84rem, 0.9vw, 0.98rem);
  font-weight: 620;
  line-height: 1.58;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  transition: color 180ms ease;
}

.portfolio-v4 .home-comment-card:hover > p,
.portfolio-v4 .home-comment-card:focus-visible > p {
  color: #ffffff;
}

.portfolio-v4 .home-comment-card > span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.portfolio-v4 .home-comment-card > span::after {
  content: "↗";
  margin-left: auto;
  color: rgba(168, 255, 62, 0.48);
  font-size: 0.72rem;
}

.portfolio-v4 .home-comment-card img {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid rgba(168, 255, 62, 0.24);
  border-radius: 50%;
  filter: saturate(0.78);
  transition: filter 180ms ease, transform 220ms ease;
}

.portfolio-v4 .home-comment-card:hover img {
  filter: saturate(1);
  transform: scale(1.04);
}

.portfolio-v4 .home-comment-card i {
  display: grid;
  min-width: 0;
  font-style: normal;
}

.portfolio-v4 .home-comment-card strong,
.portfolio-v4 .home-comment-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-v4 .home-comment-card strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  line-height: 1.2;
}

.portfolio-v4 .home-comment-card small {
  margin-top: 4px;
  color: rgba(231, 236, 228, 0.38);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.5rem;
  font-weight: 760;
  letter-spacing: 0.04em;
}

.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-kicker,
.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-trust,
.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-feed-meta,
.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-marquee {
  opacity: 0;
}

.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-kicker,
.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-feed-meta,
.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-marquee {
  transform: translateY(20px);
}

.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-title-mask > span {
  transform: translateY(112%);
}

.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-trust {
  transform: translateX(26px);
}

.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-avatars img,
.portfolio-v4 .home-comment-stream.is-testimonial-motion .home-comment-avatars > span {
  transform: scale(0.82);
}

.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-kicker {
  opacity: 1;
  transform: none;
  transition: opacity 520ms 80ms ease, transform 700ms 80ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-title-mask > span {
  transform: translateY(0);
  transition: transform 850ms 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-title-mask:nth-child(2) > span {
  transition-delay: 245ms;
}

.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-trust {
  opacity: 1;
  transform: none;
  transition: opacity 620ms 330ms ease, transform 820ms 330ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-avatars img,
.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-avatars > span {
  transform: scale(1);
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-avatars :nth-child(1) { transition-delay: 400ms; }
.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-avatars :nth-child(2) { transition-delay: 450ms; }
.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-avatars :nth-child(3) { transition-delay: 500ms; }
.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-avatars :nth-child(4) { transition-delay: 550ms; }
.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-avatars :nth-child(5) { transition-delay: 600ms; }

.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-feed-meta,
.portfolio-v4 .home-comment-stream.is-testimonial-ready .home-comment-marquee {
  opacity: 1;
  transform: none;
  transition: opacity 650ms 520ms ease, transform 820ms 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes homeCommentMarquee {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes homeCommentPulse {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 rgba(168, 255, 62, 0); }
  50% { opacity: 1; box-shadow: 0 0 0 5px rgba(168, 255, 62, 0.08); }
}

@media (max-width: 980px) {
  .portfolio-v4 .home-comment-stream-head {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr);
    gap: 34px;
    width: calc(100% - 56px);
  }

  .portfolio-v4 .home-comment-stream-head h2 {
    font-size: clamp(2.5rem, 5.8vw, 4rem) !important;
  }

  .portfolio-v4 .home-comment-feed-meta {
    width: calc(100% - 56px);
  }
}

@media (max-width: 740px) {
  .portfolio-v4 .home-comment-stream {
    padding: 58px 0 66px;
  }

  .portfolio-v4 .home-comment-stream-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 30px;
    width: calc(100% - 32px);
    margin-bottom: 34px;
  }

  .portfolio-v4 .home-comment-kicker {
    margin-bottom: 18px;
    font-size: 0.54rem;
  }

  .portfolio-v4 .home-comment-stream-head h2 {
    font-size: clamp(2.35rem, 11vw, 3.35rem) !important;
    line-height: 0.97;
  }

  .portfolio-v4 .home-comment-trust {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 17px;
  }

  .portfolio-v4 .home-comment-avatars img,
  .portfolio-v4 .home-comment-avatars > span {
    width: 34px;
    height: 34px;
  }

  .portfolio-v4 .home-comment-trust-copy p {
    font-size: 0.65rem;
  }

  .portfolio-v4 .home-comment-feed-meta {
    width: calc(100% - 32px);
    margin-bottom: 10px;
  }

  .portfolio-v4 .home-comment-feed-meta span:last-child {
    display: none;
  }

  .portfolio-v4 .home-comment-marquee::before,
  .portfolio-v4 .home-comment-marquee::after {
    width: 20px;
  }

  .portfolio-v4 .home-comment-group {
    gap: 9px;
    padding-right: 9px;
  }

  .portfolio-v4 .home-comment-card,
  .portfolio-v4 .home-comment-card:nth-child(n) {
    width: min(84vw, 330px);
    height: 206px;
    padding: 19px 18px 16px;
  }

  .portfolio-v4 .home-comment-card > p {
    font-size: 0.84rem;
  }

  .portfolio-v4 .home-comment-track {
    animation-duration: 64s;
  }

  .portfolio-v4 .home-comment-stream::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-v4 .home-comment-stream *,
  .portfolio-v4 .home-comment-stream *::before,
  .portfolio-v4 .home-comment-stream *::after {
    animation: none !important;
    transition: none !important;
  }

  .portfolio-v4 .home-comment-stream :is(.home-comment-kicker, .home-comment-trust, .home-comment-feed-meta, .home-comment-marquee),
  .portfolio-v4 .home-comment-stream .home-comment-title-mask > span,
  .portfolio-v4 .home-comment-stream .home-comment-avatars :is(img, span) {
    opacity: 1 !important;
    transform: none !important;
  }

  .portfolio-v4 .home-comment-marquee {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .portfolio-v4 .home-comment-track {
    animation: none;
    will-change: auto;
  }

  .portfolio-v4 .home-comment-group[aria-hidden="true"] {
    display: none;
  }
}

/* Mobile layout repair: compact stacks, predictable media and calmer page length. */
@media (max-width: 780px) {
  html {
    scroll-padding-top: 76px;
  }

  .portfolio-v4 .app-shell,
  .portfolio-v4 .panel,
  .portfolio-v4 .motion-home {
    max-width: 100%;
    overflow-x: clip;
  }

  .portfolio-v4 .panel:not(#panel-home) h2 {
    max-width: 100%;
    font-size: clamp(1.72rem, 7.8vw, 2.12rem) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }

  .portfolio-v4 .panel:not(#panel-home) h3 {
    max-width: 100%;
    font-size: clamp(1.08rem, 5.4vw, 1.55rem);
    line-height: 1.12;
    text-wrap: balance;
  }

  .portfolio-v4 .panel:not(#panel-home) :is(.panel-head, .section-heading, .compact-heading) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 26px !important;
  }

  /* Home about collage */
  .portfolio-v4 .motion-manifesto {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "title title"
      "copy copy"
      "media-one media-two"
      "media-three media-three"
      "footer footer";
    gap: 10px;
    min-height: 0;
    padding: 68px 18px 54px;
    align-items: stretch;
  }

  .portfolio-v4 .motion-manifesto-title {
    grid-area: title;
    text-align: left;
  }

  .portfolio-v4 .motion-manifesto-title h2 {
    font-size: clamp(2.8rem, 14vw, 3.55rem);
  }

  .portfolio-v4 .motion-manifesto-copy {
    grid-area: copy;
    max-width: none;
    margin: 26px 0 22px;
    font-size: clamp(1.1rem, 5.4vw, 1.38rem);
    line-height: 1.24;
    text-align: left;
  }

  .portfolio-v4 .motion-manifesto-media {
    position: relative;
    inset: auto;
    width: 100% !important;
    height: 210px !important;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    transform: none !important;
  }

  .portfolio-v4 .motion-manifesto-media-one { grid-area: media-one; }
  .portfolio-v4 .motion-manifesto-media-two { grid-area: media-two; }
  .portfolio-v4 .motion-manifesto-media-three {
    grid-area: media-three;
    height: 172px !important;
  }

  .portfolio-v4 .motion-manifesto-media img,
  .portfolio-v4 .motion-manifesto-media-two img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .portfolio-v4 .motion-manifesto-media-one img { object-position: center 24%; }
  .portfolio-v4 .motion-manifesto-media-two img { object-position: center 22%; }
  .portfolio-v4 .motion-manifesto-media-three img { object-position: center 30%; }

  .portfolio-v4 .motion-manifesto-footer {
    grid-area: footer;
    position: relative;
    inset: auto;
    align-items: flex-start;
    width: 100%;
    margin-top: 16px;
    transform: none;
  }

  .portfolio-v4 .motion-manifesto-footer > div {
    gap: 6px 12px;
  }

  /* Shared home/project cards */
  .portfolio-v4 .motion-featured {
    padding: 62px 12px 70px;
  }

  .portfolio-v4 .motion-featured-head {
    width: calc(100% - 12px);
    margin: 0 auto 28px;
  }

  .portfolio-v4 .project-stack-section,
  .portfolio-v4 .project-stack-section.project-stack-section-home {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .portfolio-v4 .project-stack-list {
    position: relative !important;
    top: auto !important;
    display: grid;
    gap: 14px;
    height: auto !important;
  }

  .portfolio-v4 .project-stack-item,
  .portfolio-v4 .project-stack-item + .project-stack-item {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  .portfolio-v4 .project-stack-card {
    position: relative !important;
    inset: auto !important;
    display: grid;
    grid-template-rows: auto auto;
    gap: 14px;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 15px;
    border-radius: 16px;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  .portfolio-v4 .project-stack-card-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
      "number category"
      "title title"
      "button button";
    gap: 9px 12px;
    padding-bottom: 0;
  }

  .portfolio-v4 .project-stack-number {
    grid-area: number;
    align-self: center;
    font-size: 3.2rem;
    line-height: 0.78;
    letter-spacing: -0.05em;
  }

  .portfolio-v4 .project-stack-category {
    grid-area: category;
    align-self: center;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .portfolio-v4 .project-stack-card h3 {
    grid-area: title;
    font-size: clamp(1.22rem, 6.4vw, 1.52rem);
    line-height: 1.08;
  }

  .portfolio-v4 .project-stack-button {
    grid-area: button;
    justify-self: start;
    height: 36px;
    padding: 0 14px;
    font-size: 0.58rem;
    letter-spacing: 0.05em;
  }

  .portfolio-v4 .project-stack-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: visible;
  }

  .portfolio-v4 .project-stack-copy {
    gap: 11px;
  }

  .portfolio-v4 .project-stack-copy > p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .portfolio-v4 .project-stack-meta-cell {
    gap: 4px;
    padding: 9px 10px;
  }

  .portfolio-v4 .project-stack-meta-cell small {
    font-size: 0.5rem;
  }

  .portfolio-v4 .project-stack-meta-cell strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portfolio-v4 .project-stack-tags {
    gap: 5px;
  }

  .portfolio-v4 .project-stack-tags span {
    min-height: 24px;
    padding-inline: 8px;
    font-size: 0.56rem;
  }

  .portfolio-v4 .project-stack-media-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 220px 112px;
    gap: 7px;
    width: 100%;
    height: 339px !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .portfolio-v4 .project-stack-primary {
    grid-row: 1;
    order: -1;
    height: 220px !important;
    min-height: 0 !important;
  }

  .portfolio-v4 .project-stack-secondary {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 112px;
    gap: 7px;
    height: 112px !important;
    min-height: 0 !important;
  }

  .portfolio-v4 .project-stack-media-grid figure,
  .portfolio-v4 .project-stack-secondary figure {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 10px;
  }

  .portfolio-v4 .project-stack-media-grid :is(img, video) {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover;
  }

  .portfolio-v4 .project-stack-media-grid figcaption {
    left: 8px;
    bottom: 7px;
    padding: 5px 7px;
    font-size: 0.48rem;
    letter-spacing: 0.04em;
  }

  /* Home services and process */
  .portfolio-v4 .motion-light-zone {
    padding: 60px 16px 70px;
    border-radius: 22px 22px 0 0;
  }

  .portfolio-v4 .motion-light-heading {
    gap: 11px;
    margin-bottom: 24px;
  }

  .portfolio-v4 .motion-proof {
    padding-bottom: 54px;
  }

  .portfolio-v4 .motion-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-v4 .motion-proof-grid article {
    min-height: 126px;
    padding: 16px 12px;
    border-bottom: 1px solid var(--motion-black-line);
  }

  .portfolio-v4 .motion-proof-grid strong {
    font-size: clamp(1.8rem, 10vw, 2.35rem);
  }

  .portfolio-v4 .motion-proof-grid p {
    margin-top: 24px;
    font-size: 0.64rem;
  }

  .portfolio-v4 .motion-services {
    padding: 54px 0;
  }

  .portfolio-v4 .motion-service-list button {
    grid-template-columns: 26px minmax(0, 1fr) 18px;
    gap: 5px 9px;
    min-height: 0;
    padding: 15px 2px;
  }

  .portfolio-v4 .motion-service-list strong {
    font-size: 1rem;
  }

  .portfolio-v4 .motion-service-list p {
    grid-column: 2 / -1;
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .portfolio-v4 .motion-process {
    padding-top: 54px;
  }

  .portfolio-v4 .motion-process-track {
    gap: 7px;
    padding-left: 20px;
  }

  .portfolio-v4 .motion-process-track article {
    padding: 10px 0 13px;
  }

  .portfolio-v4 .motion-process-track article::before {
    left: -20px;
  }

  .portfolio-v4 .motion-process-track strong {
    margin-bottom: 5px;
    font-size: 1rem;
  }

  .portfolio-v4 .motion-process-track p {
    font-size: 0.7rem;
  }

  .portfolio-v4 .motion-process-statement {
    margin-top: 28px;
    font-size: 1.18rem;
  }

  .portfolio-v4 .motion-youtube-copy {
    position: relative;
    top: auto;
  }

  .portfolio-v4 .motion-youtube-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-v4 .motion-youtube-metrics span {
    min-height: 74px;
    padding: 12px 9px;
    font-size: 0.56rem;
  }

  .portfolio-v4 .motion-youtube-metrics strong {
    margin-bottom: 7px;
    font-size: 1.15rem;
  }

  .portfolio-v4 .motion-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .portfolio-v4 .motion-archive-grid button {
    aspect-ratio: 4 / 5;
  }

  .portfolio-v4 .motion-archive-grid span,
  .portfolio-v4 .motion-archive-grid strong {
    left: 10px;
    max-width: calc(100% - 20px);
  }

  .portfolio-v4 .motion-archive-grid span {
    bottom: 34px;
    font-size: 0.5rem;
  }

  .portfolio-v4 .motion-archive-grid strong {
    bottom: 11px;
    font-size: 0.78rem;
  }

  /* About panel keeps all content but removes the tall photo wall. */
  .portfolio-v4 #panel-about .about-cards {
    display: flex;
    gap: 10px;
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .portfolio-v4 #panel-about .about-cards article {
    flex: 0 0 min(78vw, 286px);
    min-height: 190px;
    scroll-snap-align: start;
  }

  .portfolio-v4 #panel-about .about-event-collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 210px);
    gap: 8px;
    height: auto;
  }

  .portfolio-v4 #panel-about .about-event-collage .event-card-large,
  .portfolio-v4 #panel-about .about-event-collage figure {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    height: 210px;
    animation: none;
  }

  .portfolio-v4 #panel-about .about-event-collage img {
    object-position: center 24%;
  }

  .portfolio-v4 #panel-about .about-events-notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .portfolio-v4 #panel-about .about-events-notes article {
    min-height: 0;
    padding: 15px;
  }

  /* Less obstruction while keeping both quick actions available. */
  .portfolio-v4 .mobile-sticky-cta {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 5px;
    padding: 5px;
  }

  .portfolio-v4 .mobile-sticky-cta .button {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 0.6rem;
  }
}

@media (max-width: 420px) {
  .portfolio-v4 .motion-manifesto-media {
    height: 185px !important;
  }

  .portfolio-v4 .motion-manifesto-media-three {
    height: 154px !important;
  }

  .portfolio-v4 .project-stack-media-grid {
    grid-template-rows: 204px 104px;
    height: 315px !important;
  }

  .portfolio-v4 .project-stack-primary {
    height: 204px !important;
  }

  .portfolio-v4 .project-stack-secondary {
    grid-template-rows: 104px;
    height: 104px !important;
  }
}

/* Main-feed About / portrait left, story right */
.portfolio-v4 .motion-manifesto.home-about-editorial {
  --home-about-lime: #a8ff3e;
  --home-about-bg: #070908;
  --home-about-line: rgba(231, 236, 228, 0.13);
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas: "portrait content";
  align-items: center;
  justify-items: stretch;
  gap: clamp(52px, 6vw, 112px);
  min-height: clamp(760px, 88vh, 940px);
  padding: clamp(72px, 7vw, 122px) clamp(28px, 5vw, 84px);
  overflow: hidden;
  color: #f5f7f2;
  background:
    linear-gradient(rgba(168, 255, 62, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 255, 62, 0.018) 1px, transparent 1px),
    linear-gradient(124deg, #050706 0%, #090c09 46%, #030403 100%);
  background-size: 78px 78px, 78px 78px, auto;
  border-block: 1px solid rgba(168, 255, 62, 0.13);
}

.portfolio-v4 .motion-manifesto.home-about-editorial::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.84;
  background:
    linear-gradient(90deg, rgba(168, 255, 62, 0.028), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 24%, rgba(0, 0, 0, 0.22));
  mask-image: none;
}

.portfolio-v4 .motion-manifesto.home-about-editorial::after {
  content: "PERSONAL SYSTEM / FIELD NOTES / 2026";
  position: absolute;
  z-index: 0;
  right: 22px;
  bottom: 26px;
  color: rgba(255, 255, 255, 0.07);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  writing-mode: vertical-rl;
}

.portfolio-v4 .home-about-portrait {
  --home-about-rx: 0deg;
  --home-about-ry: 0deg;
  --home-about-light-x: 72%;
  --home-about-light-y: 24%;
  position: relative;
  z-index: 2;
  grid-area: portrait;
  width: min(100%, 620px);
  margin: 0;
  aspect-ratio: 0.73;
  justify-self: end;
  perspective: 1200px;
  transform: rotateX(var(--home-about-rx)) rotateY(var(--home-about-ry)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.portfolio-v4 .home-about-portrait::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -10px 10px 10px -10px;
  pointer-events: none;
  border-top: 1px solid rgba(168, 255, 62, 0.46);
  border-left: 1px solid rgba(168, 255, 62, 0.18);
}

.portfolio-v4 .home-about-portrait::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: -1px;
  bottom: -1px;
  width: 25%;
  height: 14%;
  pointer-events: none;
  border-right: 2px solid var(--home-about-lime);
  border-bottom: 2px solid var(--home-about-lime);
}

.portfolio-v4 .home-about-portrait-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #090b09;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 0 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
}

.portfolio-v4 .home-about-portrait-clip img {
  --home-about-parallax: 0px;
  display: block;
  width: 100%;
  height: calc(100% + 64px);
  max-width: none;
  margin-top: -32px;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(0.82) contrast(1.05) brightness(0.88);
  transform: translate3d(0, var(--home-about-parallax), 0) scale(1.025);
  will-change: transform;
}

.portfolio-v4 .home-about-image-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background:
    linear-gradient(rgba(168, 255, 62, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 255, 62, 0.09) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.portfolio-v4 .home-about-image-reflection {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle at var(--home-about-light-x) var(--home-about-light-y), rgba(168, 255, 62, 0.11), transparent 23%),
    linear-gradient(118deg, transparent 44%, rgba(255, 255, 255, 0.05) 50%, transparent 57%);
  mix-blend-mode: screen;
}

.portfolio-v4 .home-about-scan-line {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  pointer-events: none;
  opacity: 0;
  background: var(--home-about-lime);
  box-shadow: 0 0 14px rgba(168, 255, 62, 0.34);
}

.portfolio-v4 .home-about-label,
.portfolio-v4 .home-about-coordinate {
  position: absolute;
  z-index: 8;
  color: rgba(245, 247, 242, 0.78);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  pointer-events: none;
}

.portfolio-v4 .home-about-label-top {
  top: 17px;
  left: 17px;
  padding: 7px 9px;
  color: #071005;
  background: var(--home-about-lime);
}

.portfolio-v4 .home-about-label-bottom {
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: rgba(3, 5, 3, 0.74);
  backdrop-filter: blur(8px);
}

.portfolio-v4 .home-about-label-bottom i {
  width: 5px;
  height: 5px;
  background: var(--home-about-lime);
  border-radius: 50%;
  animation: homeAboutPulse 2.8s ease-in-out infinite;
}

.portfolio-v4 .home-about-coordinate {
  right: 18px;
  bottom: 19px;
  color: rgba(245, 247, 242, 0.34);
  font-size: 0.46rem;
  line-height: 1.45;
  text-align: right;
}

.portfolio-v4 .home-about-content {
  position: relative;
  z-index: 3;
  grid-area: content;
  display: flex;
  flex-direction: column;
  width: min(100%, 900px);
  min-width: 0;
}

.portfolio-v4 .home-about-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(100%, 520px);
  margin-bottom: clamp(24px, 3vh, 34px);
  color: rgba(231, 236, 228, 0.5);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.portfolio-v4 .home-about-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--home-about-lime);
  box-shadow: 0 0 14px rgba(168, 255, 62, 0.28);
  transform: rotate(45deg);
}

.portfolio-v4 .home-about-eyebrow b {
  width: 100%;
  height: 1px;
  background: var(--home-about-line);
  transform-origin: left center;
}

.portfolio-v4 .home-about-title {
  display: grid;
  gap: 0.08em;
  max-width: 900px;
  margin: 0;
  color: #f5f7f2;
  font-size: clamp(3rem, 4.65vw, 5.1rem) !important;
  font-weight: 880;
  line-height: 0.95;
  letter-spacing: 0;
  text-align: left;
  text-wrap: balance;
}

.portfolio-v4 .home-about-title-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.portfolio-v4 .home-about-title-mask > span {
  display: block;
}

.portfolio-v4 .home-about-title-accent {
  color: var(--home-about-lime);
}

.portfolio-v4 .home-about-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 36px);
  margin-top: clamp(34px, 4vw, 58px);
}

.portfolio-v4 .home-about-story p {
  margin: 0;
  padding-top: 14px;
  color: rgba(231, 236, 228, 0.61);
  border-top: 1px solid var(--home-about-line);
  font-size: clamp(0.76rem, 0.84vw, 0.9rem);
  font-weight: 500;
  line-height: 1.65;
}

.portfolio-v4 .home-about-story strong {
  color: rgba(255, 255, 255, 0.93);
  font-weight: 730;
}

.portfolio-v4 .home-about-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(26px, 3vw, 42px);
  border-block: 1px solid var(--home-about-line);
}

.portfolio-v4 .home-about-proof > span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  padding: 14px 16px 14px 0;
  color: rgba(231, 236, 228, 0.45);
  font-size: 0.56rem;
  font-weight: 700;
}

.portfolio-v4 .home-about-proof > span + span {
  padding-left: 16px;
  border-left: 1px solid var(--home-about-line);
}

.portfolio-v4 .home-about-proof small {
  grid-column: 1 / -1;
  color: rgba(168, 255, 62, 0.55);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.48rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.portfolio-v4 .home-about-proof strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  font-weight: 850;
}

.portfolio-v4 .home-about-finish {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) auto;
  align-items: end;
  gap: 32px;
  margin-top: 24px;
}

.portfolio-v4 .home-about-signature {
  display: grid;
  width: min(100%, 330px);
}

.portfolio-v4 .home-about-signature svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.portfolio-v4 .home-about-signature path {
  fill: none;
  stroke: rgba(245, 247, 242, 0.82);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.portfolio-v4 .home-about-signature-name {
  fill: rgba(245, 247, 242, 0.9);
  font-family: "Allura", "Segoe Script", "Brush Script MT", cursive;
  font-size: 84px;
  font-weight: 400;
  letter-spacing: 0;
  transform-origin: left center;
}

.portfolio-v4 .home-about-signature-underline {
  stroke-width: 1.8;
  opacity: 0.78;
}

.portfolio-v4 .home-about-signature-flourish {
  stroke: rgba(168, 255, 62, 0.78);
  stroke-width: 1.65;
}

.portfolio-v4 .home-about-signature > span {
  margin-top: -12px;
  color: rgba(231, 236, 228, 0.38);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.5rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-v4 .home-about-link {
  flex: none;
  margin-bottom: 4px;
  white-space: nowrap;
}

.portfolio-v4 .home-about-role-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 15px;
  color: rgba(231, 236, 228, 0.38);
  border-top: 1px solid var(--home-about-line);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.portfolio-v4 .home-about-role-rail i {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  background: rgba(168, 255, 62, 0.66);
  transform: rotate(45deg);
}

/* Main-feed About entrance sequence */
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-eyebrow,
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-story p,
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-proof,
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-signature > span,
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-link,
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-role-rail,
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-label,
.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-coordinate {
  opacity: 0;
  transform: translateY(18px);
}

.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-title-mask > span {
  transform: translateY(112%);
}

.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-eyebrow b {
  transform: scaleX(0);
}

.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-portrait-clip {
  opacity: 0.72;
  clip-path: polygon(0 0, 0 0, 0 94%, 0 100%, 0 100%);
}

.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-portrait-clip img {
  transform: translate3d(0, var(--home-about-parallax), 0) scale(1.065);
}

.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-signature path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-signature-name {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-14px) skewX(-4deg);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-eyebrow {
  opacity: 1;
  transform: none;
  transition: opacity 520ms 70ms ease, transform 680ms 70ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-eyebrow b {
  transform: scaleX(1);
  transition: transform 880ms 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-title-mask > span {
  transform: translateY(0);
  transition: transform 860ms 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-title-mask:nth-child(2) > span {
  transition-delay: 250ms;
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-portrait-clip {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 0 100%);
  transition: clip-path 1060ms 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 800ms 220ms ease;
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-portrait-clip img {
  transform: translate3d(0, var(--home-about-parallax), 0) scale(1.025);
  transition: transform 1120ms 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease;
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-scan-line {
  animation: homeAboutSweep 1100ms 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-story p {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease, transform 740ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-story p:nth-child(1) { transition-delay: 480ms; }
.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-story p:nth-child(2) { transition-delay: 580ms; }
.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-story p:nth-child(3) { transition-delay: 680ms; }

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-proof,
.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-role-rail {
  opacity: 1;
  transform: none;
  transition: opacity 560ms 760ms ease, transform 720ms 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-label,
.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-coordinate {
  opacity: 1;
  transform: none;
  transition: opacity 500ms 900ms ease, transform 680ms 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-signature path {
  animation: homeAboutSignature 1000ms 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-signature path:nth-child(2) { animation-delay: 1320ms; animation-duration: 520ms; }
.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-signature path:nth-child(3) { animation-delay: 1540ms; animation-duration: 380ms; }

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-signature-name {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 520ms 900ms ease, filter 760ms 900ms ease, transform 820ms 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-signature > span,
.portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-link {
  opacity: 1;
  transform: none;
  transition: opacity 500ms 1600ms ease, transform 650ms 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes homeAboutSweep {
  0% { left: 0; opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

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

@keyframes homeAboutPulse {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 rgba(168, 255, 62, 0); }
  50% { opacity: 1; box-shadow: 0 0 0 5px rgba(168, 255, 62, 0.08); }
}

@media (max-width: 1180px) {
  .portfolio-v4 .motion-manifesto.home-about-editorial {
    grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1.22fr);
    gap: 44px;
    padding-inline: 34px;
  }

  .portfolio-v4 .home-about-title {
    font-size: clamp(2.65rem, 4.5vw, 4rem) !important;
  }

  .portfolio-v4 .home-about-story {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }

  .portfolio-v4 .home-about-story p {
    font-size: 0.82rem;
  }
}

@media (max-width: 820px) {
  .portfolio-v4 .motion-manifesto.home-about-editorial {
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "content";
    gap: 42px;
    min-height: 0;
    padding: 68px 18px 58px;
  }

  .portfolio-v4 .home-about-portrait {
    width: min(100%, 620px);
    justify-self: center;
    transform: none;
  }

  .portfolio-v4 .home-about-content {
    width: min(100%, 680px);
    justify-self: center;
  }

  .portfolio-v4 .home-about-title {
    font-size: clamp(2.55rem, 8.4vw, 4.3rem) !important;
  }

  .portfolio-v4 .home-about-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-v4 .home-about-story p:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .portfolio-v4 .motion-manifesto.home-about-editorial {
    gap: 32px;
    padding-top: 54px;
  }

  .portfolio-v4 .home-about-portrait {
    aspect-ratio: 0.76;
  }

  .portfolio-v4 .home-about-portrait-clip img,
  .portfolio-v4 .home-about-editorial.is-home-about-motion .home-about-portrait-clip img,
  .portfolio-v4 .home-about-editorial.is-home-about-ready .home-about-portrait-clip img {
    height: 100%;
    margin-top: 0;
    object-position: center 46%;
    transform: scale(1.01);
  }

  .portfolio-v4 .home-about-coordinate {
    display: none;
  }

  .portfolio-v4 .home-about-eyebrow {
    margin-bottom: 20px;
    font-size: 0.54rem;
  }

  .portfolio-v4 .home-about-title {
    font-size: clamp(2.25rem, 11vw, 3.2rem) !important;
    line-height: 0.98;
  }

  .portfolio-v4 .home-about-story {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
  }

  .portfolio-v4 .home-about-story p:last-child {
    grid-column: auto;
  }

  .portfolio-v4 .home-about-proof {
    grid-template-columns: 1fr;
  }

  .portfolio-v4 .home-about-proof > span {
    padding: 11px 0;
  }

  .portfolio-v4 .home-about-proof > span + span {
    padding-left: 0;
    border-top: 1px solid var(--home-about-line);
    border-left: 0;
  }

  .portfolio-v4 .home-about-finish {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .portfolio-v4 .home-about-signature {
    width: min(100%, 300px);
  }

  .portfolio-v4 .home-about-link {
    justify-self: start;
  }

  .portfolio-v4 .home-about-role-rail {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 7px;
    scrollbar-width: none;
  }

  .portfolio-v4 .motion-manifesto.home-about-editorial::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-v4 .home-about-editorial *,
  .portfolio-v4 .home-about-editorial *::before,
  .portfolio-v4 .home-about-editorial *::after {
    animation: none !important;
    transition: none !important;
  }

  .portfolio-v4 .home-about-editorial :is(.home-about-eyebrow, .home-about-story p, .home-about-proof, .home-about-signature > span, .home-about-link, .home-about-role-rail, .home-about-label, .home-about-coordinate),
  .portfolio-v4 .home-about-editorial .home-about-title-mask > span,
  .portfolio-v4 .home-about-editorial .home-about-portrait-clip,
  .portfolio-v4 .home-about-editorial .home-about-portrait-clip img {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }

  .portfolio-v4 .home-about-editorial .home-about-signature path {
    stroke-dashoffset: 0 !important;
  }

  .portfolio-v4 .home-about-editorial .home-about-signature-name {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* Main-feed selected work carousel */
.home-latest-projects {
  --latest-gap: 14px;
  position: relative;
  isolation: isolate;
  min-height: 190svh;
  padding: 0;
  overflow: visible;
  color: #f4f5f2;
  background: #090a09;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-latest-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 100%;
  height: 100svh;
  min-height: 650px;
  padding: clamp(76px, 8vh, 96px) clamp(18px, 4.8vw, 78px) clamp(16px, 2.4vh, 28px);
  overflow: hidden;
}

.home-latest-projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  transform: translate3d(0, var(--latest-bg-shift, 0px), 0) scale(1.04);
  transform-origin: center;
}

.home-latest-head {
  display: block;
  margin-bottom: clamp(14px, 2vh, 22px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-latest-ready .home-latest-head {
  opacity: 1;
  transform: none;
}

.home-latest-heading {
  display: grid;
  grid-template-columns: minmax(300px, 0.76fr) minmax(360px, 1.24fr);
  align-items: end;
  gap: 8px clamp(32px, 6vw, 96px);
  max-width: none;
}

.home-latest-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: #b5b9b2;
  font-size: 0.66rem;
  font-weight: 900;
}

.home-latest-heading > span i {
  width: 7px;
  height: 7px;
  background: #7cff42;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(124, 255, 66, 0.66);
}

.home-latest-heading h2 {
  margin: 0;
  max-width: 560px;
  color: #f6f7f4;
  font-size: clamp(2.35rem, 4vw, 3.9rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.home-latest-heading h2 em {
  color: #7cff42;
  font: inherit;
}

.home-latest-heading p {
  max-width: 62ch;
  margin: 0 0 3px;
  color: #92978f;
  font-size: 0.86rem;
  line-height: 1.65;
}

.home-latest-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: clamp(10px, 1.5vh, 16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.992);
}

.is-latest-ready .home-latest-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.home-latest-nav > span {
  min-width: 92px;
  margin-right: 8px;
  color: #858a82;
  font: 800 0.62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
}

.home-latest-behance-link {
  padding: 9px 11px;
  color: #a7aca4;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  font-size: 0.56rem;
  font-weight: 900;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.home-latest-behance-link:hover {
  color: #0b0c0b;
  background: #7cff42;
  border-color: #7cff42;
}

.home-latest-nav button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #f4f5f2;
  background: #111311;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.home-latest-nav button:hover:not(:disabled) {
  color: #0b0c0b;
  background: #7cff42;
  border-color: #7cff42;
  transform: translateY(-2px);
}

.home-latest-nav button:disabled {
  color: #656963;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  cursor: default;
  opacity: 0.56;
}

.home-latest-nav button span {
  font-size: 1.2rem;
  line-height: 1;
}

.home-latest-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.home-latest-track {
  display: flex;
  gap: var(--latest-gap);
  align-items: flex-start;
  height: 100%;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.home-latest-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  flex: 0 0 100%;
  gap: var(--latest-gap);
  height: 100%;
  min-width: 0;
  place-items: center;
  align-content: stretch;
}

@property --latest-frame-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.home-latest-card {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: min(100%, 808px);
  max-height: 100%;
  aspect-ratio: 808 / 632;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  opacity: 1;
  overflow: hidden;
  border-radius: 6px;
  transform: none;
  text-decoration: none;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
}

.home-latest-card::before,
.home-latest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.home-latest-card::before {
  padding: 2px;
  background: conic-gradient(
    from var(--latest-frame-angle),
    transparent 0deg 34deg,
    rgba(124, 255, 66, 0.36) 52deg,
    #7cff42 70deg,
    #ffffff 82deg,
    #19e6ff 96deg,
    transparent 122deg 202deg,
    rgba(255, 43, 189, 0.4) 226deg,
    #ff2bbd 244deg,
    #ffffff 258deg,
    #7cff42 276deg,
    transparent 308deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px rgba(124, 255, 66, 0.62)) drop-shadow(0 0 12px rgba(25, 230, 255, 0.28));
  animation: latest-frame-orbit 1.75s linear infinite paused;
  transition: opacity 180ms ease;
}

.home-latest-card::after {
  z-index: 7;
  background:
    linear-gradient(90deg, #ffffff, #7cff42) left top / 52px 2px no-repeat,
    linear-gradient(180deg, #ffffff, #19e6ff) left top / 2px 52px no-repeat,
    linear-gradient(270deg, #ffffff, #ff2bbd) right bottom / 52px 2px no-repeat,
    linear-gradient(0deg, #ffffff, #7cff42) right bottom / 2px 52px no-repeat;
  box-shadow: inset 0 0 18px rgba(124, 255, 66, 0.14), 0 0 20px rgba(25, 230, 255, 0.12);
  transform: scale(0.985);
  transition: opacity 180ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-latest-card:hover,
.home-latest-card:focus-visible {
  transform: translateY(-5px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32));
}

.home-latest-card:hover::before,
.home-latest-card:focus-visible::before {
  opacity: 1;
  animation-play-state: running;
}

.home-latest-card:hover::after,
.home-latest-card:focus-visible::after {
  opacity: 1;
  transform: scale(1);
  animation: latest-frame-breathe 920ms ease-in-out infinite alternate;
}

@keyframes latest-frame-orbit {
  to { --latest-frame-angle: 360deg; }
}

@keyframes latest-frame-breathe {
  from { filter: brightness(0.82); }
  to { filter: brightness(1.35); }
}

.home-latest-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  background: #151715;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(40px) scale(0.985);
  transition: opacity 620ms ease, filter 760ms ease, transform 840ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease;
}

.home-latest-media::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(var(--latest-card-reveal, 0) * 100%);
  right: 0;
  left: 0;
  height: 1px;
  opacity: var(--latest-scan-opacity, 0);
  background: linear-gradient(90deg, transparent, rgba(124, 255, 66, 0.92) 18%, #fff 50%, rgba(124, 255, 66, 0.92) 82%, transparent);
  box-shadow: 0 0 18px rgba(124, 255, 66, 0.64);
  pointer-events: none;
}

.is-latest-ready .home-latest-media {
  opacity: 1;
  filter: none;
  transform: none;
}

.is-latest-ready .home-latest-card:nth-child(2) .home-latest-media { transition-delay: 70ms; }
.is-latest-ready .home-latest-card:nth-child(3) .home-latest-media { transition-delay: 140ms; }
.is-latest-ready .home-latest-card:nth-child(4) .home-latest-media { transition-delay: 210ms; }

.home-latest-card:hover .home-latest-media { border-color: rgba(124, 255, 66, 0.5); }

.home-latest-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.32) 44%, transparent 72%);
  pointer-events: none;
}

.home-latest-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.03);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), filter 380ms ease;
}

.home-latest-card:hover .home-latest-media img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.04);
}

.home-latest-media b {
  position: absolute;
  z-index: 2;
  bottom: 13px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}

.home-latest-media b {
  top: 13px;
  bottom: auto;
  right: 13px;
  padding: 8px 10px;
  color: #eef0eb;
  background: rgba(8, 9, 8, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.home-latest-card:hover .home-latest-media b,
.home-latest-card:focus-visible .home-latest-media b {
  opacity: 1;
  transform: none;
}

.home-latest-card-copy {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.7vw, 24px);
  pointer-events: none;
}

.home-latest-card-copy small,
.home-latest-card-copy strong,
.home-latest-card-copy em {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, color 220ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-latest-ready .home-latest-card-copy strong {
  opacity: 1;
  transform: none;
  transition-delay: 1020ms;
}

.is-latest-ready .home-latest-card-copy small {
  opacity: 1;
  transform: none;
  transition-delay: 1140ms;
}

.is-latest-ready .home-latest-card-copy em {
  opacity: 1;
  transform: none;
  transition-delay: 1260ms;
}

.is-latest-scroll-driven .home-latest-head,
.is-latest-scroll-driven .home-latest-nav,
.is-latest-scroll-driven .home-latest-media,
.is-latest-scroll-driven .home-latest-card-copy small,
.is-latest-scroll-driven .home-latest-card-copy strong,
.is-latest-scroll-driven .home-latest-card-copy em {
  will-change: opacity, transform;
  transition: none;
}

.is-latest-scroll-driven .home-latest-media {
  will-change: opacity, transform, filter;
}

.home-latest-card-copy small {
  order: 2;
  margin-top: 7px;
  color: #7cff42;
  font-size: 0.56rem;
  font-weight: 900;
}

.home-latest-card-copy strong {
  order: 1;
  margin-top: 0;
  color: #f5f6f3;
  font-size: clamp(1.05rem, 1.55vw, 1.48rem);
  line-height: 1.08;
}

.home-latest-card:hover .home-latest-card-copy strong { color: #7cff42; }

.home-latest-card-copy em {
  order: 3;
  margin-top: 7px;
  color: #b3b8b0;
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.4;
}

.home-latest-progress {
  height: 2px;
  margin-top: clamp(9px, 1.3vh, 14px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.home-latest-progress i {
  display: block;
  width: 50%;
  height: 100%;
  background: #7cff42;
  box-shadow: 0 0 14px rgba(124, 255, 66, 0.55);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1219px) {
  .home-latest-heading { grid-template-columns: minmax(280px, 0.86fr) minmax(320px, 1.14fr); }
}

@media (max-width: 899px) {
  .home-latest-stage { padding-inline: 22px; }
  .home-latest-heading { grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr); gap-inline: 26px; }
  .home-latest-heading h2 { font-size: clamp(2.2rem, 6vw, 3rem); }
  .home-latest-heading p { max-width: 48ch; }
  .home-latest-card {
    width: 100%;
    height: auto;
    max-height: 100%;
  }
}

@media (max-width: 619px) {
  .home-latest-projects {
    --latest-gap: 12px;
    min-height: 205svh;
    padding: 0;
  }

  .home-latest-stage {
    min-height: 0;
    padding: 70px 12px 92px;
  }

  .home-latest-head {
    margin-bottom: 12px;
  }

  .home-latest-heading { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .home-latest-heading > span { grid-column: auto; margin-bottom: 0; font-size: 0.52rem; }
  .home-latest-heading h2 { font-size: clamp(1.85rem, 9vw, 2.45rem); }
  .home-latest-heading p { max-width: 48ch; margin: 0; font-size: 0.66rem; line-height: 1.45; }
  .home-latest-nav { justify-content: flex-end; margin-top: 9px; }
  .home-latest-behance-link { display: none; }
  .home-latest-nav > span { margin-right: auto; text-align: left; }
  .home-latest-nav button { width: 44px; height: 44px; }
  .home-latest-page { gap: 10px; }
  .home-latest-card-copy { padding: 7px; }
  .home-latest-card-copy strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .home-latest-card-copy small { display: none; }
  .home-latest-card-copy em { margin-top: 6px; font-size: 0.58rem; }
  .home-latest-media b { display: none; }
  .home-latest-card-copy em { display: none; }
  .home-latest-progress { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-latest-head,
  .home-latest-card,
  .home-latest-media,
  .home-latest-card-copy small,
  .home-latest-card-copy strong,
  .home-latest-card-copy em {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-latest-card::before,
  .home-latest-card::after {
    animation: none;
  }

  .home-latest-track,
  .home-latest-progress i,
  .home-latest-media img {
    transition: none !important;
  }
}

/* Home / scroll-driven capabilities */
.portfolio-v4 .motion-services.home-capabilities {
  --cap-lime: #7dff4f;
  --cap-ink: #050706;
  --cap-surface: #111411;
  --cap-surface-raised: #171b17;
  --cap-line: rgba(255, 255, 255, 0.12);
  position: relative;
  width: calc(100% + 96px);
  max-width: none;
  min-height: 430vh;
  margin: 0 0 0 -48px;
  padding: 0;
  color: #fff;
  background: var(--cap-ink);
  border: 0;
}

.home-capabilities-stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(560px, 1.22fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
  width: 100%;
  height: 100svh;
  min-height: 680px;
  padding: 88px max(48px, calc((100vw - 1480px) / 2));
  overflow: hidden;
  isolation: isolate;
  background: var(--cap-ink);
}

.home-capabilities-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 255, 79, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 255, 79, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.52) 54%, transparent 92%);
}

.home-capabilities-stage::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cap-lime));
  opacity: 0.45;
}

.home-capabilities-intro {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 520px;
}

.home-capabilities-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--cap-lime);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
}

.home-capabilities-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--cap-lime);
  box-shadow: 0 0 16px rgba(125, 255, 79, 0.42);
}

.portfolio-v4 .home-capabilities-intro h2 {
  max-width: 10.5ch;
  margin: 0;
  color: #f7faf7;
  font-size: clamp(2.7rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
}

.home-capabilities-intro h2 em {
  color: var(--cap-lime);
  font-style: normal;
}

.home-capabilities-intro > p {
  max-width: 48ch;
  margin: 28px 0 0;
  color: rgba(238, 244, 238, 0.62);
  font-size: 0.92rem;
  line-height: 1.7;
}

.home-capabilities-toolbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--cap-line);
}

.home-capabilities-toolbox span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--cap-line);
  border-radius: 5px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.home-capabilities-toolbox span:hover {
  color: var(--cap-lime);
  background: rgba(125, 255, 79, 0.055);
  border-color: rgba(125, 255, 79, 0.32);
}

.home-capabilities-progress {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 330px;
  margin-top: 50px;
}

.home-capabilities-progress > div {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.home-capabilities-progress > div span {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-capabilities-progress > div b {
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.66rem;
}

.home-capabilities-progress > i {
  position: relative;
  display: block;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.home-capabilities-progress > i span {
  position: absolute;
  inset: 0;
  background: var(--cap-lime);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.home-capabilities-progress small {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0;
}

.home-capabilities-stack {
  position: relative;
  z-index: 2;
  width: 100%;
  height: min(650px, 74vh);
  min-height: 540px;
  perspective: 1300px;
  contain: layout paint;
}

.home-capability-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(220px, 0.78fr) minmax(290px, 1fr);
  overflow: hidden;
  color: #f7faf7;
  background: var(--cap-surface);
  border: 1px solid var(--cap-line);
  border-radius: 8px;
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.44);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 105%, 0) scale(0.97);
  transform-origin: center 12%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.home-capability-card:first-child {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.home-capability-card.is-active {
  border-color: rgba(125, 255, 79, 0.48);
  pointer-events: auto;
}

.home-capability-card.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--cap-lime);
  transform-origin: left;
  animation: capability-edge-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-capability-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #090b09;
  border-bottom: 1px solid var(--cap-line);
}

.home-capability-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(5, 7, 6, 0.78) 100%),
    linear-gradient(90deg, rgba(5, 7, 6, 0.16), transparent 52%);
  pointer-events: none;
}

.home-capability-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.76) contrast(1.04) brightness(0.82);
  transform: scale(1.02);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
}

.home-capability-card.is-active .home-capability-media img,
.home-capability-card:hover .home-capability-media img {
  filter: saturate(0.94) contrast(1.04) brightness(0.9);
  transform: scale(1.055);
}

.home-capability-media > span {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  padding: 7px 9px;
  color: var(--cap-lime);
  background: rgba(5, 7, 6, 0.8);
  border: 1px solid rgba(125, 255, 79, 0.26);
  border-radius: 4px;
  font-size: 0.54rem;
  font-weight: 800;
}

.home-capability-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 14px 24px;
  padding: clamp(24px, 3vw, 36px);
  background:
    linear-gradient(90deg, rgba(125, 255, 79, 0.025), transparent 38%),
    var(--cap-surface);
}

.home-capability-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cap-line);
}

.home-capability-meta span {
  color: var(--cap-lime);
  font-size: 0.64rem;
  font-weight: 900;
}

.home-capability-meta b {
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.54rem;
  font-weight: 800;
}

.portfolio-v4 .home-capability-copy h3 {
  grid-column: 1 / -1;
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  font-weight: 780;
  line-height: 1;
  letter-spacing: 0;
}

.home-capability-copy > p {
  max-width: 55ch;
  margin: 0;
  color: rgba(238, 244, 238, 0.62);
  font-size: 0.84rem;
  line-height: 1.6;
}

.home-capability-tags {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-capability-tags span {
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--cap-line);
  border-radius: 4px;
  font-size: 0.54rem;
  font-weight: 700;
}

.home-capability-copy > button {
  grid-column: 2;
  grid-row: 4 / 6;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 15px;
  color: var(--cap-ink);
  background: var(--cap-lime);
  border: 1px solid var(--cap-lime);
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 800;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.home-capability-copy > button:hover,
.home-capability-copy > button:focus-visible {
  color: var(--cap-lime);
  background: transparent;
  transform: translateY(-2px);
}

@keyframes capability-edge-in {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 1120px) {
  .home-capabilities-stage {
    grid-template-columns: minmax(270px, 0.7fr) minmax(450px, 1.3fr);
    gap: 34px;
    padding-inline: 32px;
  }

  .portfolio-v4 .home-capabilities-intro h2 {
    font-size: clamp(2.45rem, 4.5vw, 3.35rem);
  }

  .home-capabilities-intro > p {
    font-size: 0.84rem;
  }

  .home-capabilities-stack {
    height: min(610px, 72vh);
    min-height: 510px;
  }

  .home-capability-card {
    grid-template-rows: minmax(190px, 0.72fr) minmax(290px, 1fr);
  }
}

@media (max-width: 820px) {
  .portfolio-v4 .motion-services.home-capabilities {
    width: calc(100% + 36px);
    min-height: 400vh;
    margin-left: -18px;
  }

  .home-capabilities-stage {
    grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.28fr);
    gap: 24px;
    min-height: 620px;
    padding: 72px 22px 42px;
  }

  .portfolio-v4 .home-capabilities-intro h2 {
    font-size: clamp(2.1rem, 5vw, 2.8rem);
  }

  .home-capabilities-toolbox span:nth-child(n + 4) {
    display: none;
  }

  .home-capabilities-progress {
    margin-top: 34px;
  }

  .home-capabilities-stack {
    min-height: 490px;
  }

  .home-capability-copy {
    padding: 22px;
  }

  .home-capability-copy > p {
    font-size: 0.76rem;
  }
}

@media (max-width: 700px) {
  .portfolio-v4 .motion-services.home-capabilities {
    width: calc(100% + 32px);
    min-height: 0;
    margin-left: -16px;
    padding: 0;
  }

  .home-capabilities-stage {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    padding: 68px 16px 72px;
    overflow: hidden;
  }

  .home-capabilities-stage::before {
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 40%, transparent 82%);
  }

  .home-capabilities-intro {
    max-width: none;
  }

  .home-capabilities-kicker {
    margin-bottom: 18px;
    font-size: 0.58rem;
  }

  .portfolio-v4 .home-capabilities-intro h2 {
    max-width: 12ch;
    font-size: clamp(2.25rem, 11vw, 3rem) !important;
    line-height: 1;
  }

  .home-capabilities-intro > p {
    max-width: 42ch;
    margin-top: 20px;
    font-size: 0.78rem;
    line-height: 1.58;
  }

  .home-capabilities-toolbox {
    margin-top: 24px;
    padding-top: 17px;
  }

  .home-capabilities-toolbox span:nth-child(n) {
    display: inline-flex;
    min-height: 28px;
    padding-inline: 8px;
    font-size: 0.5rem;
  }

  .home-capabilities-progress {
    display: none;
  }

  .home-capabilities-stack {
    display: grid;
    gap: 12px;
    height: auto;
    min-height: 0;
    margin-top: 40px;
    perspective: none;
    contain: none;
  }

  .home-capability-card,
  .home-capability-card:first-child {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: 190px auto;
    min-height: 0;
    opacity: 1 !important;
    pointer-events: auto;
    transform: none !important;
    will-change: auto;
  }

  .home-capability-card.is-active::after {
    animation: none;
  }

  .home-capability-copy {
    display: block;
    padding: 20px 18px;
  }

  .home-capability-meta {
    margin-bottom: 18px;
  }

  .portfolio-v4 .home-capability-copy h3 {
    margin-bottom: 12px;
    font-size: 1.62rem;
  }

  .home-capability-tags {
    margin-top: 18px;
  }

  .home-capability-copy > button {
    margin-top: 20px;
  }

  .home-capability-media > span {
    right: 12px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-v4 .motion-services.home-capabilities {
    min-height: 0;
  }

  .home-capabilities-stage {
    position: relative;
    height: auto;
    min-height: 0;
  }

  .home-capabilities-stack {
    display: grid;
    gap: 12px;
    height: auto;
    min-height: 0;
    perspective: none;
    contain: none;
  }

  .home-capability-card,
  .home-capability-card:first-child {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    pointer-events: auto;
    transform: none !important;
  }

  .home-capability-card * {
    animation: none !important;
    transition: none !important;
  }
}

/* Home / client trust rail */
.portfolio-v4 .home-trust-strip {
  --trust-lime: #7dff4f;
  --trust-gap: clamp(36px, 4.4vw, 70px);
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(250px, 0.22fr) minmax(0, 0.78fr);
  min-height: 126px;
  color: #fff;
  background: #050605;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  overflow: hidden;
}

.portfolio-v4 .home-trust-strip::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 18%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(125, 255, 79, 0.72));
}

.home-trust-summary {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 22px clamp(22px, 3vw, 48px);
  background: #050605;
  border-right: 1px solid rgba(255, 255, 255, 0.11);
}

.home-trust-summary > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-trust-summary > span i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--trust-lime);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(125, 255, 79, 0.4);
  animation: home-trust-signal 2.8s ease-in-out infinite;
}

.home-trust-summary > div {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.home-trust-summary strong {
  color: #fff;
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
}

.home-trust-summary p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
}

.home-trust-marquee {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.home-trust-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  width: max-content;
  animation: home-trust-drift 42s linear infinite;
  will-change: transform;
}

.home-trust-logo-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--trust-gap);
  padding-right: var(--trust-gap);
}

.home-trust-logo-group > span {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(112px, 9.5vw, 160px);
  height: 64px;
  flex: 0 0 auto;
}

.home-trust-logo-group > span::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-50%);
}

.home-trust-logo-group img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 48px;
  opacity: 0.52;
  filter: grayscale(1) contrast(1.55) brightness(1.1);
  mix-blend-mode: screen;
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-trust-logo-group > span:hover img {
    opacity: 0.92;
    filter: grayscale(1) contrast(1.7) brightness(1.32);
    transform: translateY(-2px);
  }

  .home-trust-summary:hover > span i {
    box-shadow: 0 0 18px rgba(125, 255, 79, 0.68);
  }
}

@keyframes home-trust-drift {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes home-trust-signal {
  0%, 100% { opacity: 0.56; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 820px) {
  .portfolio-v4 .home-trust-strip {
    grid-template-columns: 186px minmax(0, 1fr);
    min-height: 106px;
  }

  .home-trust-summary {
    gap: 11px;
    padding: 17px 18px;
  }

  .home-trust-summary > span {
    font-size: 0.46rem;
  }

  .home-trust-summary strong {
    font-size: 1.72rem;
  }

  .home-trust-summary p {
    font-size: 0.54rem;
  }

  .home-trust-logo-group > span {
    width: 112px;
    height: 52px;
  }

  .home-trust-logo-group img {
    max-height: 39px;
  }
}

@media (max-width: 560px) {
  .portfolio-v4 .home-trust-strip {
    --trust-gap: 24px;
    grid-template-columns: 124px minmax(0, 1fr);
    min-height: 88px;
  }

  .home-trust-summary {
    gap: 8px;
    padding: 12px 10px 12px 14px;
  }

  .home-trust-summary > span {
    gap: 5px;
    font-size: 0.37rem;
  }

  .home-trust-summary > span i {
    width: 5px;
    height: 5px;
  }

  .home-trust-summary > div {
    gap: 7px;
  }

  .home-trust-summary strong {
    font-size: 1.38rem;
  }

  .home-trust-summary p {
    font-size: 0.44rem;
  }

  .home-trust-logo-group > span {
    width: 92px;
    height: 44px;
  }

  .home-trust-logo-group img {
    max-height: 31px;
  }

  .home-trust-marquee {
    mask-image: linear-gradient(90deg, transparent, #000 11%, #000 96%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-trust-track,
  .home-trust-summary > span i {
    animation: none !important;
  }
}

/* Home / YouTube creator legacy */
.portfolio-v4 .motion-youtube.home-youtube-legacy {
  --youtube-lime: #7dff4f;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(380px, 0.74fr) minmax(580px, 1.26fr);
  align-items: start;
  gap: clamp(54px, 6vw, 108px);
  min-height: 1260px;
  margin: 0;
  padding: 128px max(48px, calc((100vw - 1480px) / 2)) 150px;
  overflow: clip;
  color: #f7faf7;
  background: #080908;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.portfolio-v4 .motion-youtube.home-youtube-legacy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 255, 79, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 255, 79, 0.022) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.24) 58%, transparent 94%);
}

.portfolio-v4 .motion-youtube.home-youtube-legacy::after {
  content: "";
  position: absolute;
  right: max(48px, calc((100vw - 1480px) / 2));
  bottom: 0;
  width: min(420px, 34vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 255, 79, 0.62));
}

.portfolio-v4 .home-youtube-copy {
  position: sticky;
  top: 116px;
  align-self: start;
  max-width: 540px;
}

.home-youtube-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px !important;
  color: rgba(255, 255, 255, 0.46) !important;
  font-size: 0.58rem !important;
  font-weight: 800;
  letter-spacing: 0 !important;
}

.home-youtube-eyebrow i {
  width: 7px;
  height: 7px;
  background: var(--youtube-lime);
  box-shadow: 0 0 14px rgba(125, 255, 79, 0.42);
}

.portfolio-v4 .home-youtube-copy h2 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(3.1rem, 4.6vw, 4.2rem);
  font-weight: 860;
  line-height: 0.9;
  letter-spacing: 0;
}

.home-youtube-copy h2 > span {
  display: block;
  white-space: nowrap;
}

.home-youtube-copy h2 em {
  color: var(--youtube-lime);
  font-style: normal;
}

.portfolio-v4 .home-youtube-copy > p {
  max-width: 48ch;
  margin: 30px 0 34px;
  color: rgba(237, 243, 237, 0.61);
  font-size: 0.92rem;
  line-height: 1.7;
}

.portfolio-v4 .home-youtube-copy .motion-youtube-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.portfolio-v4 .home-youtube-copy .motion-youtube-metrics > span {
  min-height: 116px;
  padding: 22px 17px 18px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.015);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.portfolio-v4 .home-youtube-copy .motion-youtube-metrics > span:last-child {
  border-right: 0;
}

.portfolio-v4 .home-youtube-copy .motion-youtube-metrics strong {
  display: block;
  margin: 0 0 18px;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 820;
  line-height: 1;
}

.home-youtube-copy .motion-youtube-metrics strong i {
  font-style: normal;
}

.home-youtube-copy .motion-youtube-metrics small {
  display: block;
  max-width: 12ch;
  font-size: 0.57rem;
  font-weight: 650;
  line-height: 1.35;
}

.home-youtube-learning {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 30px;
}

.home-youtube-learning span {
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 4px;
  font-size: 0.5rem;
  font-weight: 750;
}

.portfolio-v4 .home-youtube-cta {
  color: #080908;
  background: #f7faf7;
  border-color: #f7faf7;
}

.portfolio-v4 .home-youtube-cta:hover,
.portfolio-v4 .home-youtube-cta:focus-visible {
  color: #080908;
  background: var(--youtube-lime);
  border-color: var(--youtube-lime);
}

.portfolio-v4 .home-youtube-archive {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 24px 16px;
  padding: 42px 0 120px;
  transform: none;
  will-change: auto;
}

.home-youtube-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #101210;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  text-align: left;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.home-youtube-thumb:nth-child(2) { margin-top: 48px; }
.home-youtube-thumb:nth-child(3) { margin-top: -14px; }
.home-youtube-thumb:nth-child(4) { margin-top: 34px; }
.home-youtube-thumb:nth-child(5) { margin-top: -18px; }
.home-youtube-thumb:nth-child(6) { margin-top: 46px; }

.portfolio-v4 .home-youtube-archive .home-youtube-thumb img,
.portfolio-v4 .home-youtube-archive .home-youtube-thumb img:nth-child(n) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(0.86) brightness(0.92);
  transform: none !important;
  transition: filter 360ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.home-youtube-thumb::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #080908;
  background: var(--youtube-lime);
  border-radius: 50%;
  font-size: 0.72rem;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.home-youtube-thumb > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 40px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 5, 0.9));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.home-youtube-thumb > span b {
  color: #fff;
  font-size: 0.51rem;
  font-weight: 800;
}

.home-youtube-thumb > span i {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.5rem;
  font-style: normal;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .home-youtube-archive:hover .home-youtube-thumb:not(:hover) {
    opacity: 0.78 !important;
  }

  .home-youtube-thumb:hover,
  .home-youtube-thumb:focus-visible {
    border-color: rgba(125, 255, 79, 0.38);
  }

  .home-youtube-thumb:hover img,
  .home-youtube-thumb:focus-visible img {
    filter: saturate(1) brightness(1) !important;
    transform: scale(1.02) !important;
  }

  .home-youtube-thumb:hover::after,
  .home-youtube-thumb:focus-visible::after,
  .home-youtube-thumb:hover > span,
  .home-youtube-thumb:focus-visible > span {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (max-width: 1120px) {
  .portfolio-v4 .motion-youtube.home-youtube-legacy {
    grid-template-columns: minmax(320px, 0.82fr) minmax(470px, 1.18fr);
    gap: 42px;
    min-height: 1100px;
    padding-inline: 32px;
  }

  .portfolio-v4 .home-youtube-copy h2 {
    font-size: clamp(2.75rem, 4.7vw, 3.55rem);
  }

  .portfolio-v4 .home-youtube-copy .motion-youtube-metrics > span {
    min-height: 102px;
    padding: 18px 12px 15px;
  }

  .portfolio-v4 .home-youtube-copy .motion-youtube-metrics strong {
    font-size: 1.4rem;
  }
}

@media (max-width: 820px) {
  .portfolio-v4 .motion-youtube.home-youtube-legacy {
    grid-template-columns: minmax(270px, 0.86fr) minmax(390px, 1.14fr);
    gap: 28px;
    min-height: 980px;
    padding: 94px 22px 108px;
  }

  .portfolio-v4 .home-youtube-copy {
    top: 88px;
  }

  .portfolio-v4 .home-youtube-copy h2 {
    font-size: clamp(2.35rem, 5vw, 2.9rem);
  }

  .portfolio-v4 .home-youtube-copy > p {
    margin-block: 23px 26px;
    font-size: 0.78rem;
  }

  .portfolio-v4 .home-youtube-copy .motion-youtube-metrics > span {
    min-height: 88px;
    padding: 14px 8px 12px;
  }

  .portfolio-v4 .home-youtube-copy .motion-youtube-metrics strong {
    margin-bottom: 11px;
    font-size: 1.18rem;
  }

  .home-youtube-copy .motion-youtube-metrics small {
    font-size: 0.48rem;
  }

  .portfolio-v4 .home-youtube-archive {
    gap: 15px 10px;
  }
}

@media (max-width: 700px) {
  .portfolio-v4 .motion-youtube.home-youtube-legacy {
    display: block;
    min-height: 0;
    padding: 78px 16px 86px;
  }

  .portfolio-v4 .home-youtube-copy {
    position: relative;
    top: auto;
    max-width: none;
  }

  .home-youtube-eyebrow {
    margin-bottom: 17px !important;
    font-size: 0.52rem !important;
  }

  .portfolio-v4 .home-youtube-copy h2 {
    font-size: clamp(2.55rem, 12vw, 3.45rem) !important;
    line-height: 0.92;
  }

  .home-youtube-copy h2 > span {
    white-space: normal;
  }

  .portfolio-v4 .home-youtube-copy > p {
    max-width: 44ch;
    margin: 24px 0 28px;
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .portfolio-v4 .home-youtube-copy .motion-youtube-metrics {
    margin-bottom: 18px;
  }

  .portfolio-v4 .home-youtube-copy .motion-youtube-metrics > span {
    min-height: 86px;
    padding: 14px 9px 11px;
  }

  .portfolio-v4 .home-youtube-copy .motion-youtube-metrics strong {
    font-size: 1.2rem;
  }

  .home-youtube-learning {
    margin-bottom: 24px;
  }

  .portfolio-v4 .home-youtube-archive {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 54px;
    padding: 0;
  }

  .home-youtube-thumb:nth-child(n) {
    margin-top: 0;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  .home-youtube-thumb > span {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-youtube-legacy [data-youtube-copy-item],
  .home-youtube-legacy [data-youtube-thumb] {
    opacity: 1 !important;
    transform: none !important;
  }

  .home-youtube-legacy * {
    transition: none !important;
  }
}
/* Pixentry Global Animation Awards project-stack identity */
.portfolio-v4 .project-stack-card-festival {
  color: #f4f2ed;
  background:
    radial-gradient(ellipse at 76% 20%, rgba(199, 154, 88, 0.18), transparent 34%),
    linear-gradient(135deg, #17130e, #050505 66%);
  border-color: rgba(213, 172, 106, 0.38);
}

.portfolio-v4 .project-stack-card-festival::before {
  opacity: 0.28;
  background:
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(231, 196, 132, 0.12) 76px 77px),
    linear-gradient(180deg, transparent, rgba(199, 154, 88, 0.08));
}

.portfolio-v4 .project-stack-card-festival :is(.project-stack-number, .project-stack-category, .project-stack-card-header h3, .project-stack-copy p, .project-stack-meta-cell small, .project-stack-meta-cell strong, .project-stack-tags span) {
  color: #f4f2ed;
}

.portfolio-v4 .project-stack-card-festival :is(.project-stack-category, .project-stack-meta-cell small) {
  color: rgba(231, 196, 132, 0.64);
}

.portfolio-v4 .project-stack-card-festival :is(.project-stack-card-header, .project-stack-meta, .project-stack-meta-cell, .project-stack-tags span, .project-stack-media-grid figure) {
  border-color: rgba(213, 172, 106, 0.22);
}

.portfolio-v4 .project-stack-card-festival .project-stack-button {
  color: #090806;
  background: #e7c484;
  border-color: #e7c484;
}

.portfolio-v4 .project-stack-card-festival .project-stack-primary img {
  object-position: center;
}

/* Motion remains intact; sections outside the viewport do not spend GPU time. */
@media (prefers-reduced-motion: no-preference) {
  .portfolio-v4 .motion-home [data-motion-section]:not(.is-motion-visible) *,
  .portfolio-v4 .motion-home [data-motion-section]:not(.is-motion-visible) *::before,
  .portfolio-v4 .motion-home [data-motion-section]:not(.is-motion-visible) *::after,
  .portfolio-v4 .motion-home [data-home-testimonials]:not(.is-motion-visible) *,
  .portfolio-v4 .motion-home [data-home-testimonials]:not(.is-motion-visible) *::before,
  .portfolio-v4 .motion-home [data-home-testimonials]:not(.is-motion-visible) *::after {
    animation-play-state: paused !important;
  }
}