/* =====================================================================
   unix — Beyond the Interface
   Rebuild of the first three sections (Hero · Behind the Studio · Pixel by Pixel)
   ===================================================================== */

:root {
  --bg: rgb(6, 5, 10);
  --bg-alt: rgb(9, 7, 14);
  --bg-deep: rgb(4, 3, 8);
  --accent: #8b5cf6;
  --accent-soft: #c7b3fa;
  --white: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.78);
  --text-faint: rgba(255, 255, 255, 0.6);
  --hairline: rgba(255, 255, 255, 0.14);

  --ff-jura: "Jura", sans-serif;
  --ff-sans: "General Sans", "Instrument Sans", sans-serif;
  --ff-iserif: "Instrument Serif", serif;
  --ff-isans: "Instrument Sans", sans-serif;

  --pad-x: 60px;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.ff-jura { font-family: var(--ff-jura); }
.ff-iserif { font-family: var(--ff-iserif); }
.ff-jura-bold { font-family: var(--ff-jura); font-weight: 600; }
em.serif { font-family: var(--ff-iserif); font-style: italic; font-weight: 400; }

/* ------------------------------ Reveal ------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
.btn:active { transform: scale(0.96); }

.btn--primary {
  background: linear-gradient(135deg, #c4b5fd 0%, #935af3 45%, #6d28d9 100%);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #bea8fa 0%, #965af0 45%, #702edc 100%);
  box-shadow: 0 8px 24px 0 rgba(147, 90, 243, 0.4);
}
.btn__icon { display: inline-flex; animation: sparkle 2s ease-in-out infinite alternate; }
@keyframes sparkle { from { transform: rotate(0deg); } to { transform: rotate(-10deg); } }

.btn--secondary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.btn--secondary:hover {
  background: rgba(202, 171, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ============================ NAVBAR ============================ */
.nav {
  position: absolute;
  top: 6px; left: 0; right: 0;
  z-index: 50;
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px var(--pad-x);
  max-width: 1400px;
  margin: 0 auto;
}
.nav__logo {
  grid-column: 1; justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav__logo img { height: 20px; width: auto; display: block; }
.nav__links { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 24px; }
.nav__link {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.25s ease;
}
.nav__link:hover { color: var(--white); }

.nav__cta { grid-column: 3; justify-self: end; }

.nav__burger {
  grid-column: 3; justify-self: end;
  display: none;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 8px;
}
.nav__burger svg line { transition: transform 0.35s ease, opacity 0.25s ease; transform-origin: center; }
.nav.open .burger-l1 { transform: translateY(4px) rotate(45deg); }
.nav.open .burger-l2 { transform: translateY(-4px) rotate(-45deg); }

/* Padding lives on the -inner element, not here: padding never compresses
   below its own size, so if it sat on this element directly, max-height: 0
   could never actually reach zero and the first link would always peek
   through underneath the navbar. */
.nav__mobile {
  display: none;
  border: 1px solid transparent;
  background: rgba(8, 6, 14, 0.9);
  backdrop-filter: blur(18px);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
}
.nav__mobile-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 32px 32px;
}
.nav__mobile .nav__link { padding: 14px 0; font-size: 20px; width: 100%; }
.nav__mobile-cta { margin-top: 12px; width: 100%; }
.nav.open .nav__mobile { max-height: 80vh; border-color: rgba(255, 255, 255, 0.08); }

/* ============================ 1. HERO ============================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x) 56px;
  overflow: clip;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4, 3, 8, 0.62) 0%,
    rgba(4, 3, 8, 0) 26%,
    rgba(4, 3, 8, 0) 62%,
    rgba(4, 3, 8, 0.72) 100%);
}
.hero__spacer { height: 112px; flex-shrink: 0; }

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.hero__text { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero__title {
  max-width: 520px;
  font-size: 78px;
  line-height: 1.25em;
  text-align: center;
  color: var(--white);
  text-wrap: balance;
  font-weight: 400;
}
.hero__title-a { font-family: var(--ff-jura); font-weight: 700; letter-spacing: -0.07em; }
.hero__title-b { font-family: var(--ff-iserif); font-style: italic; font-weight: 400; }
.hero__sub {
  max-width: 521px;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5em;
  text-align: center;
  color: var(--text-dim);
}
.hero__actions { display: flex; align-items: center; gap: 16px; padding: 8px; }

.hero__micro {
  position: relative;
  z-index: 1;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.4em;
  text-align: center;
  color: rgba(241, 241, 241, 0.6);
}

/* ==================== 2. BEHIND THE STUDIO ==================== */
.studio { position: relative; width: 100%; background: var(--bg); }
.studio__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.studio__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.studio__beat {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.studio__beat-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  text-align: center;
}
.studio__title {
  font-family: var(--ff-jura);
  font-weight: 500;
  font-size: 62px;
  letter-spacing: -0.03em;
  line-height: 1.1em;
  color: var(--white);
}
.studio__title--closing { font-size: 48px; }
.studio .glow .studio__title { text-shadow: 0 0 30px rgba(147, 90, 243, 0.85), 0 0 70px rgba(109, 40, 217, 0.55); }
.studio__body {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.5em;
  color: rgba(255, 255, 255, 0.8);
}
.studio__tagline {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

/* ==================== 3. PIXEL BY PIXEL ==================== */
.stage { position: relative; width: 100%; background: var(--bg); overflow: clip; }
.stage__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.stage__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/images/planet-portfolio.png");
  background-size: cover;
  background-position: center;
  filter: brightness(0.6) saturate(1.05);
}
.stage__bg-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 5, 10, 0.25) 0%,
    rgba(6, 5, 10, 0.55) 55%,
    rgba(6, 5, 10, 0.96) 100%);
}
/* Constrains title/cards composition so the gap between them stays
   proportional instead of stretching open on ultra-wide monitors */
.stage__content {
  position: absolute;
  inset: 0;
  max-width: 1480px;
  margin: 0 auto;
}

.stage__cue {
  position: absolute;
  left: 50%; bottom: 48px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 25;
  pointer-events: none;
}
.stage__cue span {
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
}
.stage__cue-line {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Deck / arc cards. The mask fade is deliberately wide (not just a thin edge
   trim) so a card is already invisible well before it reaches the pin's hard
   overflow clip — otherwise you see it get sliced by a straight frame edge
   instead of gently receding.
   The box is padded well past the content area on purpose: mask-image clips
   to its element's own border-box by default (mask-clip: border-box) EVEN
   WITH overflow: visible — a card whose arc position renders past a
   content-sized box gets hard-clipped right there, no matter what the mask's
   gradient value would have been. Padding the box out removes that boundary
   from anywhere a card can actually reach, so the pin's own overflow:hidden
   (sized to the real viewport) is the only clip left, matching the JS safety
   math further down. (Reset to 0 on mobile below — its flat conveyor uses a
   plain CSS mask and expects the box to match the viewport.) */
.stage__deck {
  position: absolute;
  left: -650px; right: -650px; top: -550px; bottom: -550px;
  opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}
.card-outer {
  position: absolute;
  left: 0; top: 50%;
  width: 620px;
  height: 400px;
  opacity: 0;
  transform: translateX(-50px);
  /* This box never moves — only its .card-arc child does, via the loop
     animation — so every card's outer box sits stacked on the same static
     spot. Left clickable, the topmost one would swallow hover/clicks meant
     for whichever card is actually rendered (elsewhere) at that moment. */
  pointer-events: none;
}
.card-arc {
  position: relative;
  width: 100%; height: 100%;
  animation-name: arc;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: auto;
}
/* Hovering any one card pauses the whole deck together, so their spacing
   never drifts out of sync (toggled via JS on .stage__deck) */
.stage__deck.is-hovering .card-arc { animation-play-state: paused; }

.card-link {
  position: absolute; inset: 0;
  display: block;
  border-radius: 28px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--hairline);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.card-link:hover {
  transform: scale(1.08);
  box-shadow: 0 40px 90px 0 rgba(0, 0, 0, 0.6);
}
.card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 22px 24px 26px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-link:hover .card-overlay { opacity: 1; }
.card-title {
  font-family: var(--ff-jura);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 2px;
}
.card-sub {
  font-family: var(--ff-jura);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.6);
}
.card-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 11px 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
  color: var(--white);
  font-family: var(--ff-isans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, gap 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.card-link:hover .card-cta { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); gap: 7px; }
/* The button's own hover, distinct from (and on top of) the whole-card
   hover above — landing on the pill itself gets a firmer, immediate reply:
   solid accent fill and a slight lift, instead of just the card's own
   generic lightening. */
.card-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}
.card-cta-arrow {
  display: inline-flex;
  align-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-link:hover .card-cta-arrow { opacity: 1; transform: translateX(0); width: 13px; }

/* Not-yet-live project (Neura) — same card, but the pill reads as
   disabled and the whole thing stops acting like a link. */
.card-link.is-soon { cursor: default; }
.card-link.is-soon .card-cta { background: transparent; border-style: dashed; color: var(--text-faint); }
.card-link.is-soon:hover .card-cta, .card-link.is-soon:focus-visible .card-cta { background: transparent; border-color: var(--hairline); gap: 0; }
.card-link.is-soon .card-cta:hover { background: transparent; border-color: var(--hairline); transform: none; }
.card-link.is-soon:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -3px; }

/* Kicker */
.stage__kicker {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  opacity: 0;
  z-index: 30;
  pointer-events: none;
}

/* Title */
.stage__titlebox {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: min(880px, 82%);
  text-align: center;
  z-index: 30;
  pointer-events: none;
}
.stage__title-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage__title-wrap:hover { transform: translateY(-4px) scale(1.015); }
.stage__title {
  margin: 0;
  color: var(--white);
  font-family: var(--ff-iserif);
  font-weight: 400;
  font-size: 42px;
  letter-spacing: -0.02em;
  line-height: 1.08em;
}
.stage__title .w, .stage__title span { display: inline-block; white-space: pre; }
.stage__title .ff-jura-bold { font-family: var(--ff-jura); font-weight: 600; font-style: normal; }
.stage__shine {
  position: absolute; inset: 0;
  background-image: linear-gradient(100deg,
    transparent 0%, transparent 38%,
    var(--accent) 48%, #f2e9ff 54%,
    transparent 64%, transparent 100%);
  background-size: 260% 100%;
  background-position: 140% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.stage__title-wrap:hover .stage__shine { opacity: 1; animation: sweep 2.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.stage__explain {
  margin: 24px 0 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.55em;
  color: var(--text-faint);
}

/* word entrance */
.stage__title .w { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.stage.in .stage__title .w {
  animation: wordEnter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wordEnter {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ==================== 4. AI LABS (horizontal fan carousel) ====================
   A user-scrolled (not autoplaying) horizontal strip, tripled for a seamless
   infinite loop. Each card's rotate/lift/scale/opacity is driven continuously
   by its own distance from the viewport's center (JS), producing the fanned,
   receding-at-the-edges look — the deck itself never moves via CSS animation,
   only via native scrollLeft (wheel, drag, or touch), which is what makes the
   fan react in step with the user's own scrolling instead of on a timer. */
.ailab { position: relative; width: 100%; background: var(--bg); padding: 160px 0 140px; overflow: hidden; }
.ailab__head { max-width: 980px; margin: 0 auto; padding: 0 var(--pad-x) 70px; text-align: center; }
.ailab__kicker {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 18px;
}
.ailab__title {
  font-family: var(--ff-jura); font-weight: 500; font-size: clamp(34px, 5vw, 58px);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--white); margin-bottom: 20px;
}
.ailab__title em.serif { font-size: 1.05em; }
.ailab__sub { font-family: var(--ff-sans); font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--text-dim); }

.ailab__stage {
  position: relative;
  /* Fades the deck to transparent at the left/right edges of the section,
     same technique as the case study pages' marquee, so cards visually
     dissolve into the background rather than getting a hard-clipped edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
  /* Establishes the 3D space every card's translateZ/rotateY (set by JS)
     is judged against — without this, those transforms would render flat,
     with no actual sense of depth. */
  perspective: 1600px;
  perspective-origin: center 30%;
}
.ailab__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.ailab__viewport::-webkit-scrollbar { display: none; }
.ailab__viewport.is-dragging { cursor: grabbing; }
.ailab__track {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  width: max-content;
  /* Generous room on every side: cards now swing through real 3D depth
     (translateZ + rotateY, see JS) and without this padding that motion
     would hit .ailab__stage's mask/edges. */
  padding: 100px var(--pad-x);
}
.ailab__card { flex: 0 0 780px; width: 780px; }
.ailab__frame {
  display: block;
  width: 100%;
  /* No forced aspect-ratio and no background-image/letterbox: the frame is
     just a rounded, bordered wrapper around a real <img>, sized to whatever
     that image's own natural proportions are — so there's never a gap to
     fill with a letterbox color in the first place. */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  /* transform is included here (not just box-shadow/filter) so the hover
     pop (JS, layered on top of the card's own fan position) eases in and
     out smoothly instead of snapping. */
  transition: box-shadow 0.4s ease, filter 0.4s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ailab__frame img { width: 100%; height: auto; display: block; }
.ailab__frame:hover {
  /* Tinted per project via --card-glow (set inline on .ailab__card, e.g.
     Neural Studio's red) — deliberately subtle, not the same strength as
     the hero image's own hover glow elsewhere on the site. */
  box-shadow: 0 20px 44px -22px var(--card-glow, rgba(139, 92, 246, 0.3)), 0 0 0 1px rgba(255, 255, 255, 0.14);
  filter: brightness(1.03);
}

.ailab__caption { max-width: 480px; margin: 0 auto; padding: 0 var(--pad-x); text-align: center; transition: opacity 0.25s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.ailab__caption.is-swapping { opacity: 0; }
.ailab__caption-title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 24px; color: var(--white); margin-bottom: 10px; }
.ailab__caption-desc { font-family: var(--ff-isans); font-size: 15px; line-height: 1.6; color: var(--text-dim); margin-bottom: 24px; }
.ailab__caption-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.32);
  font-family: var(--ff-isans); font-size: 14px; font-weight: 500; color: var(--white);
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ailab__caption-btn:hover { background: rgba(202, 171, 255, 0.05); border-color: rgba(255, 255, 255, 0.5); gap: 12px; }
.ailab__caption-btn svg { flex-shrink: 0; }
.ailab__caption-btn.is-soon { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.28); color: var(--text-faint); cursor: default; }
.ailab__caption-btn.is-soon:hover { background: transparent; gap: 8px; border-color: rgba(255, 255, 255, 0.28); }
.ailab__caption-btn.is-soon svg { display: none; }

/* =========================================================
   BUILT WITH THE BEST — flip-card logo marquee
   ========================================================= */
.programs {
  position: relative; min-height: 1080px; overflow: hidden;
  padding: 120px var(--pad-x) 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.programs__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Fades top and bottom edges (and their corners) instead of cutting hard */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
}
.programs__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; will-change: transform; }
.programs__head, .programs__marquee { position: relative; z-index: 1; }
.programs__head { max-width: 720px; margin: 0 auto 90px; text-align: center; }
.programs__title { font-family: var(--ff-jura); font-weight: 500; font-size: clamp(32px, 4.5vw, 54px); margin-bottom: 16px; color: var(--white); }
.programs__title em.serif { font-size: 1.05em; color: var(--white); }
.programs__sub { font-family: var(--ff-isans); font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 560px; margin: 0 auto; }

.programs__marquee {
  max-width: 780px; margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.programs__track {
  display: flex; align-items: center;
  gap: 26px; width: max-content;
  padding: 46px var(--pad-x); /* generous vertical room so the hover glow never clips against the marquee's overflow:hidden */
  animation: programsScroll 26s linear infinite;
  animation-play-state: paused; /* JS starts it once distance is measured */
  will-change: transform;
}
.programs__track.is-ready { animation-play-state: running; }
.programs__track:hover { animation-play-state: paused; }

.programs__card {
  flex: 0 0 80px; width: 80px; height: 80px; perspective: 1200px; border-radius: 12px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.programs__card:hover { transform: translateY(-6px); }
.programs__card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.programs__card:hover .programs__card-inner { transform: rotateY(180deg); }
.programs__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px; border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.programs__face--front { background: #f4f2ec; }
.programs__face--front img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.programs__face--back { background: #ffffff; transform: rotateY(180deg); }
.programs__face--back span {
  font-family: var(--ff-sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.01em; color: #0a0a0a; text-align: center; padding: 0 8px;
}

@keyframes programsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--programs-distance, 50%))); }
}

/* =========================================================
   SERVICES — even card row, hover-only pockets pop up
   Card size + how many show at once live as custom properties
   on .services (one set per breakpoint) so both the viewport's
   calc()'d width and the JS paging math read the same numbers
   instead of duplicating them.
   ========================================================= */
.services {
  position: relative; width: 100%; background: var(--bg);
  padding: 150px var(--pad-x) 140px;
  --svc-card-w: 270px; --svc-card-h: 350px;
  --svc-gap: 32px; --svc-visible: 4;
}
.services__head { max-width: 720px; margin: 0 auto 70px; text-align: center; }
.services__kicker {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 18px;
}
.services__title {
  font-family: var(--ff-jura); font-weight: 500; font-size: clamp(32px, 4.5vw, 54px);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--white); margin-bottom: 16px;
}
.services__title em.serif { font-size: 1.05em; }
.services__sub { font-family: var(--ff-isans); font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 520px; margin: 0 auto; }

.services__hint {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 0 auto 36px; text-align: center;
  font-family: var(--ff-isans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--text-faint);
}
.services__hint-arrow { color: var(--accent-soft); animation: servicesHintBounce 1.6s ease-in-out infinite; }
@keyframes servicesHintBounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

.services__stage { max-width: 100%; margin: 0 auto; }
.services__viewport {
  overflow: hidden; position: relative;
  max-width: calc(var(--svc-visible) * var(--svc-card-w) + (var(--svc-visible) - 1) * var(--svc-gap));
  margin: 0 auto;
}
.services__track {
  display: flex; align-items: flex-end;
  gap: var(--svc-gap);
  padding: 10px 0 4px;
  width: max-content;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.services__card {
  position: relative; flex: 0 0 auto;
  width: var(--svc-card-w); height: var(--svc-card-h);
  border-radius: 20px; overflow: hidden;
  background: #0a0810; border: 1px solid var(--hairline);
  padding: 0; text-align: left; cursor: default; font: inherit; color: inherit;
  transition: border-color 0.5s ease;
}

.services__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.5) saturate(0.85); transform: scale(1.02);
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.services__card:hover .services__image, .services__card:focus-visible .services__image { filter: brightness(0.85) saturate(1.05); transform: scale(1.08); }

.services__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
}

.services__pocket {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1;
  border-radius: 14px; padding: 12px 14px;
  background: rgba(6, 5, 10, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.services__pocket-eyebrow {
  display: block; font-family: var(--ff-isans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--accent-soft);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}
.services__pocket-title {
  font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 15px; color: var(--white);
  transition: color 0.4s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.services__pocket-desc {
  font-family: var(--ff-isans); font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.7);
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, margin-top 0.4s ease, color 0.4s ease;
}

.services__card:hover .services__pocket, .services__card:focus-visible .services__pocket {
  background: #ffffff; transform: translateY(-6px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
}
.services__card:hover .services__pocket-eyebrow, .services__card:focus-visible .services__pocket-eyebrow { max-height: 20px; opacity: 1; margin-bottom: 6px; color: var(--accent); }
.services__card:hover .services__pocket-title, .services__card:focus-visible .services__pocket-title { color: #0a0a0a; white-space: normal; }
.services__card:hover .services__pocket-desc, .services__card:focus-visible .services__pocket-desc { max-height: 160px; opacity: 1; margin-top: 8px; color: rgba(10, 10, 10, 0.68); }
.services__card:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

.services__nav { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.services__arrow {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.32); color: var(--white);
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.services__arrow:hover { background: linear-gradient(135deg, #c4b5fd 0%, #935af3 45%, #6d28d9 100%); border-color: transparent; }
.services__arrow:active { transform: scale(0.92); }
.services__arrow.is-disabled { opacity: 0.3; pointer-events: none; }
.services__arrow svg { display: block; }

/* =========================================================
   FREELANCE — fanned card deck, hover straightens + lifts
   ========================================================= */
.freelance {
  position: relative; width: 100%; background: var(--bg);
  padding: 150px var(--pad-x) 110px; overflow: hidden;
}
.freelance__head { position: relative; max-width: 720px; margin: 0 auto; padding-bottom: 190px; text-align: center; }
.freelance__kicker {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 18px;
}
.freelance__title {
  font-family: var(--ff-jura); font-weight: 500; font-size: clamp(32px, 4.5vw, 54px);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--white); margin-bottom: 16px;
}
.freelance__title em.serif { font-size: 1.05em; }
.freelance__sub { font-family: var(--ff-isans); font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 480px; margin: 0 auto; }

/* Floating "live cursor" chips drifting near the headline */
.freelance__tag {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 10px; border-radius: 100px;
  background: rgba(10, 8, 16, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--ff-isans); font-size: 13px; font-weight: 500; color: var(--white);
  white-space: nowrap; pointer-events: none;
  animation: freelanceTagFloat 7s ease-in-out infinite;
}
.freelance__tag svg { color: rgb(var(--tag-color)); flex-shrink: 0; }
.freelance__tag--1 { top: 0%; left: -170px; animation-delay: 0s; }
.freelance__tag--2 { top: 22%; right: -200px; animation-delay: 1.4s; }
.freelance__tag--3 { bottom: 2%; left: -130px; animation-delay: 2.8s; }
@keyframes freelanceTagFloat {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50% { transform: translate(6px, -12px) rotate(2deg); }
}

.freelance__deck {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  max-width: 1000px; margin: 0 auto; padding: 0 var(--pad-x);
}

.freelance__card {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 280px; height: 400px; margin: 0 -26px;
  border-radius: 24px; overflow: hidden;
  background: #0a0810; border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transform: rotate(0deg) translateY(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, z-index 0s;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.freelance__card--contra { transform: rotate(-7deg) translateY(30px); }
.freelance__card--upwork { transform: rotate(7deg) translateY(30px); }

.freelance__card:hover, .freelance__card:focus-visible {
  transform: rotate(0deg) translateY(-44px) scale(1.04);
  z-index: 5;
  box-shadow: 0 30px 60px -18px var(--card-glow, rgba(139, 92, 246, 0.4)), 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.freelance__logo { flex: 0 0 48%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.freelance__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Upwork's logo file is the only one where cover actually crops into the
   wordmark itself — contain fixes just that one, with the box background
   matched to the logo's own light gray so the letterboxed edges disappear. */
.freelance__card--upwork .freelance__logo { background: #f1f1f1; }
.freelance__card--upwork .freelance__logo img { object-fit: contain; }

.freelance__info { flex: 1; padding: 22px 22px 24px; display: flex; flex-direction: column; }
.freelance__name { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 20px; color: var(--white); margin-bottom: 8px; }
.freelance__desc { font-family: var(--ff-isans); font-size: 13px; line-height: 1.55; color: var(--text-dim); flex: 1; }
.freelance__cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 14px; padding: 10px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--ff-isans); font-size: 13px; font-weight: 500; color: var(--white);
  transition: background 0.3s ease, gap 0.3s ease;
}
.freelance__card:hover .freelance__cta, .freelance__card:focus-visible .freelance__cta { background: rgba(202, 171, 255, 0.08); gap: 11px; }

.freelance__card--upwork { cursor: default; }
.freelance__cta--soon { background: transparent; border-style: dashed; color: var(--text-faint); }
.freelance__card--upwork:hover .freelance__cta--soon { background: transparent; gap: 8px; }

/* =========================================================
   CONTACT — split card: form left, flip mosaic right
   ========================================================= */
.contact { position: relative; width: 100%; background: var(--bg); padding: 150px var(--pad-x); }
.contact__card {
  max-width: 1440px; margin: 0 auto; display: flex;
  border-radius: 28px; overflow: hidden; border: 1px solid var(--hairline);
  background: #0a0810; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.7);
}

.contact__form-panel { flex: 0 0 32%; padding: 56px 48px; display: flex; flex-direction: column; position: relative; }
.contact__brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 44px; }
.contact__brand-mark { display: inline-flex; color: var(--accent-soft); }
.contact__brand-name { font-family: var(--ff-jura); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: var(--white); }

.contact__title { font-family: var(--ff-jura); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; color: var(--white); margin-bottom: 12px; }
.contact__sub { font-family: var(--ff-isans); font-size: 14.5px; line-height: 1.6; color: var(--text-dim); margin-bottom: 32px; max-width: 380px; }

.contact__form { display: flex; flex-direction: column; gap: 18px; }
.contact__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__field { display: flex; flex-direction: column; gap: 8px; }
.contact__field label { font-family: var(--ff-isans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.contact__field input, .contact__field textarea {
  font-family: var(--ff-isans); font-size: 14.5px; color: var(--white);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 13px 16px; resize: none; transition: border-color 0.3s ease, background 0.3s ease;
}
.contact__field input::placeholder, .contact__field textarea::placeholder { color: var(--text-faint); }
.contact__field input:focus, .contact__field textarea:focus { outline: none; border-color: var(--accent-soft); background: rgba(255, 255, 255, 0.05); }
.contact__submit { margin-top: 6px; align-self: flex-start; }

.contact__success {
  display: none; flex-direction: column; align-items: flex-start; gap: 12px;
  margin-top: auto; padding-top: 12px; color: var(--accent-soft);
}
.contact__success h3 { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 20px; color: var(--white); }
.contact__success p { font-family: var(--ff-isans); font-size: 14px; line-height: 1.6; color: var(--text-dim); max-width: 320px; }
.contact.is-sent .contact__form { display: none; }
.contact.is-sent .contact__success { display: flex; }

.contact__grid-panel { flex: 1; position: relative; min-height: 560px; }
.contact__grid {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px;
}
.contact__tile {
  position: relative; overflow: hidden;
  background-image: url("../assets/images/big planet new.png");
  background-size: 400% 400%; background-repeat: no-repeat;
}
.contact__tile--flip { perspective: 1000px; cursor: pointer; background: none; }
.contact__tile-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d;
}
.contact__tile--flip:hover .contact__tile-inner, .contact__tile--flip:focus-visible .contact__tile-inner { transform: rotateY(180deg); }
.contact__tile--flip:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
/* One-time hint spin (JS-triggered on scroll into view) so people learn
   these tiles are flippable before they'd ever think to hover one. */
.contact__tile-inner.is-hint { animation: contactTileHint 1s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes contactTileHint {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
.contact__tile-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.contact__tile-face--front {
  background-image: url("../assets/images/big planet new.png");
  background-size: 400% 400%; background-repeat: no-repeat;
}
.contact__tile-face--back { transform: rotateY(180deg); padding: 10px; gap: 6px; }
.contact__tile-face--logo {
  background-color: var(--accent);
  background-image: url("../assets/images/square logo.png");
  background-size: 62%; background-repeat: no-repeat; background-position: center;
}
.contact__tile-face--message { background: linear-gradient(135deg, #c4b5fd 0%, #935af3 45%, #6d28d9 100%); }
.contact__tile-face--message p { font-family: var(--ff-sans); font-weight: 400; font-size: 12.5px; line-height: 1.35; color: var(--white); }
.contact__tile-face--status { background: #0a0810; border: 1px solid rgba(255, 255, 255, 0.14); }
.contact__tile-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
.contact__tile-face--status p { font-family: var(--ff-isans); font-size: 11.5px; font-weight: 600; color: var(--white); }
.contact__tile-note { font-family: var(--ff-isans); font-size: 9.5px; color: var(--text-faint); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative; width: 100%; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(139, 92, 246, 0.28), transparent 70%), var(--bg);
  padding: 120px var(--pad-x) 40px;
}
.footer__top {
  max-width: 1240px; margin: 0 auto 70px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.footer__intro { display: flex; flex-direction: column; gap: 14px; }
.footer__kicker { font-family: var(--ff-isans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); }
.footer__email { font-family: var(--ff-jura); font-weight: 500; font-size: clamp(15px, 1.4vw, 18px); color: var(--white); text-decoration: none; letter-spacing: -0.01em; transition: color 0.3s ease; }
.footer__email:hover { color: var(--accent-soft); }
.footer__cta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 320px; }
.footer__cta h3 { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 18px; color: var(--white); }
.footer__cta p { font-family: var(--ff-isans); font-size: 13.5px; color: var(--text-dim); margin-bottom: 6px; }

.footer__links { max-width: 1240px; margin: 0 auto 50px; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.footer__link { font-family: var(--ff-isans); font-size: 14px; color: var(--text-dim); text-decoration: none; transition: color 0.25s ease; }
.footer__link:hover { color: var(--white); }

.footer__socials {
  max-width: 1240px; margin: 0 auto; padding-bottom: 40px; margin-bottom: 40px;
  border-bottom: 1px solid var(--hairline);
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
}
.footer__social { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); text-decoration: none; font-family: var(--ff-isans); font-size: 14px; transition: color 0.25s ease; }
.footer__social:hover { color: var(--white); }
.footer__social svg { flex-shrink: 0; }
.footer__social-icon { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; display: block; }

.footer__wordmark { display: flex; justify-content: center; margin-bottom: 56px; }
.footer__wordmark img { width: min(90%, 660px); height: auto; display: block; }

.footer__bottom {
  max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-family: var(--ff-isans); font-size: 12.5px; color: var(--text-faint);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { color: var(--text-faint); text-decoration: none; transition: color 0.25s ease; }
.footer__legal a:hover { color: var(--white); }

/* =========================================================
   RESPONSIVE — Tablet (<=1399) and Phone (<=809)
   ========================================================= */
@media (max-width: 1399px) {
  :root { --pad-x: 40px; }
  .nav__inner { padding: 24px var(--pad-x); }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__mobile { display: flex; }

  .hero__title { font-size: 64px; }
  .studio__title { font-size: 52px; }
  .studio__title--closing { font-size: 42px; }
  .studio__body { font-size: 22px; }

  .stage__title { font-size: 30px; }
  .stage__explain { font-size: 14px; }

  .ailab { padding: 120px 0 110px; }
  .ailab__card { flex: 0 0 560px; width: 560px; }
  .ailab__track { gap: 48px; }

  .programs { padding: 90px var(--pad-x) 100px; min-height: 900px; }
  .programs__head { margin-bottom: 48px; }
  .programs__marquee { max-width: 720px; }

  .services { padding: 120px var(--pad-x) 110px; --svc-card-w: 225px; --svc-card-h: 300px; --svc-gap: 24px; --svc-visible: 3; }
  .services__head { margin-bottom: 56px; }

  .freelance { padding: 120px var(--pad-x) 90px; }
  .freelance__head { padding-bottom: 150px; }
  .freelance__tag--1 { left: -50px; }
  .freelance__tag--2 { right: -60px; }
  .freelance__tag--3 { left: -30px; }
  .freelance__card { width: 235px; height: 340px; margin: 0 -18px; }
  .freelance__card--contra, .freelance__card--upwork { transform: rotate(6deg) translateY(24px); }
  .freelance__card--contra { transform: rotate(-6deg) translateY(24px); }

  .contact { padding: 120px var(--pad-x); }
  .contact__form-panel { padding: 44px 32px; flex-basis: 34%; }
  .contact__grid-panel { min-height: 460px; }

  .footer { padding: 100px var(--pad-x) 36px; }
  .footer__top { flex-direction: column; gap: 32px; }
  .footer__cta { text-align: left; align-items: flex-start; }
}

@media (max-width: 809px) {
  :root { --pad-x: 20px; }
  /* Undo the desktop/tablet arc's oversized box — the mobile conveyor's
     cards are centered via left:50% relative to this box, so it needs to
     match the viewport, not be padded 650px past it on each side. */
  .stage__deck { left: 0; right: 0; top: 0; bottom: 0; }
  .nav { top: 0; }
  .nav__inner { padding: 18px var(--pad-x); }
  .nav__logo { font-size: 22px; }

  .hero { padding-bottom: 40px; }
  .hero__spacer { height: 84px; }
  .hero__title { font-size: 44px; max-width: 340px; }
  .hero__sub { font-size: 16px; max-width: 340px; }
  .hero__sub br { display: none; }
  .hero__actions { flex-direction: column; width: 100%; gap: 12px; }
  .hero__actions .btn { width: 100%; }

  .studio__title { font-size: 34px; }
  .studio__title--closing { font-size: 30px; }
  .studio__body { font-size: 18px; }

  .stage__title { font-size: 46px; }
  .stage__explain { font-size: 17px; }
  .stage__cue { bottom: 28px; }

  /* Cards move left-right below the title, so the deck needs room
     lower in the viewport rather than sharing the vertical center.
     This is a flat conveyor (not an arc), so each card already sits fully
     within the viewport when in position — only a light edge trim is needed,
     not the wide vignette the vertical desktop/tablet arc requires. */
  .stage__deck { mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%); }

  .ailab { padding: 90px 0 90px; }
  .ailab__head { padding: 0 var(--pad-x) 50px; }
  .ailab__card { flex: 0 0 400px; width: 400px; }
  .ailab__track { gap: 32px; padding: 70px var(--pad-x); }
  .ailab__stage { mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%); }

  .programs { padding: 70px var(--pad-x) 80px; min-height: 700px; }
  .programs__head { margin-bottom: 40px; }
  .programs__card { flex: 0 0 65px; width: 65px; height: 65px; }
  .programs__track { gap: 16px; padding: 32px var(--pad-x); }
  .programs__marquee { max-width: 470px; }
  .programs__face--back span { font-size: 10px; }

  .services { padding: 90px var(--pad-x) 90px; --svc-card-w: 210px; --svc-card-h: 280px; --svc-gap: 16px; --svc-visible: 1.15; }
  .services__head { margin-bottom: 40px; }
  .services__hint { margin-bottom: 28px; }
  .services__pocket { padding: 10px 11px; }
  .services__pocket-title { font-size: 13px; }
  .services__pocket-desc { font-size: 11.5px; }
  .services__arrow { width: 42px; height: 42px; }

  /* Same fanned deck as desktop, just scaled down so all 3 cards
     (with their overlap) fit inside a narrow viewport without wrapping.
     The section's own overflow:hidden clips any small excess safely,
     so the deck can be sized for the common 360-430px range rather
     than the rare 320px edge case. */
  .freelance { padding: 90px var(--pad-x) 80px; }
  .freelance__head { padding-bottom: 100px; }
  .freelance__tag { font-size: 11px; padding: 6px 12px 6px 8px; }
  .freelance__tag svg { width: 9px; height: 9px; }
  .freelance__tag--1 { top: -2%; left: -4px; }
  .freelance__tag--2 { top: 15%; right: -4px; }
  .freelance__tag--3 { bottom: 0; left: 14%; }
  .freelance__card { width: 158px; height: 288px; margin: 0 -20px; border-radius: 18px; }
  .freelance__card--contra, .freelance__card--upwork { transform: rotate(6deg) translateY(16px); }
  .freelance__card--contra { transform: rotate(-6deg) translateY(16px); }
  .freelance__card:hover, .freelance__card:focus-visible { transform: rotate(0deg) translateY(-28px) scale(1.06); }
  .freelance__info { padding: 13px 13px 14px; }
  .freelance__name { font-size: 12px; margin-bottom: 4px; }
  .freelance__desc {
    font-size: 9px; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .freelance__cta { padding: 6px 10px; font-size: 9px; gap: 4px; margin-top: 8px; }
  .freelance__cta svg { width: 9px; height: 9px; }

  .contact { padding: 90px var(--pad-x); }
  .contact__card { flex-direction: column; border-radius: 22px; }
  .contact__form-panel { padding: 36px 24px; flex-basis: auto; }
  .contact__brand { margin-bottom: 32px; }
  .contact__grid-panel { min-height: 340px; margin-top: 28px; }
  .contact__tile-face--message p { font-size: 11px; }
  /* Phone only: the wide crop used on tablet/desktop loses too much of
     the arc when squeezed into a narrow, taller mosaic — the original
     uncropped image reads better at this shape. */
  .contact__tile, .contact__tile-face--front {
    background-image: url("../assets/images/big planet.png");
  }

  .footer { padding: 90px var(--pad-x) 32px; }
  .footer__top { flex-direction: column; gap: 28px; }
  .footer__cta { text-align: left; align-items: flex-start; }
  .footer__links { gap: 20px 24px; margin-bottom: 40px; }
  .footer__socials { gap: 24px; padding-bottom: 32px; margin-bottom: 32px; }
  .footer__wordmark { margin-bottom: 40px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .card-arc { animation: none; }
  .ailab__frame { transform: none !important; }
  .aics__scroll-hint svg { animation: none; }
  .programs__track { animation: none; }
  .programs__card-inner { transition: none; }
  .services__hint-arrow { animation: none; }
  .freelance__tag { animation: none; }
  .contact__tile-inner.is-hint { animation: none; }
}

/* =========================================================
   CASE STUDY PAGES (SkyMate / SnaPay / AURA)
   Ported from the Framer originals — same dark/purple palette
   and Montserrat, the project's own font there, for headings.
   ========================================================= */
.cs-page { background: var(--bg); min-height: 100vh; }

.cs-back {
  position: fixed; top: 110px; left: var(--pad-x); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-isans); font-size: 14px; color: var(--text-dim);
  text-decoration: none; transition: color 0.3s ease;
}
.cs-back:hover { color: var(--white); }
.cs-back svg { width: 16px; height: 16px; }

.cs-hero { max-width: 1480px; margin: 0 auto; padding: 190px var(--pad-x) 80px; }
.cs-hero__kicker {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 18px;
}
.cs-hero__title {
  font-family: "Montserrat", var(--ff-sans); font-weight: 600;
  font-size: clamp(48px, 8vw, 96px); line-height: 1;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.cs-hero__tagline {
  font-family: "Montserrat", var(--ff-sans); font-size: 20px; font-weight: 400;
  color: var(--text-dim); max-width: 640px; margin-bottom: 56px;
}
.cs-hero__image { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid var(--hairline); }
.cs-hero__image img, .cs-hero__image video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.cs-section { max-width: 1480px; margin: 0 auto; padding: 90px var(--pad-x); }
.cs-section__label {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 50px;
}

.cs-process { display: flex; flex-direction: column; gap: 100px; }
.cs-process__item { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cs-process__item:nth-child(even) .cs-process__media { order: 2; }
.cs-process__title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 28px; margin-bottom: 14px; }
.cs-process__desc { font-family: var(--ff-isans); font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 440px; }
.cs-process__media { border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.02); }
.cs-process__media img { width: 100%; height: auto; display: block; }

.cs-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.cs-gallery__item { border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 4 / 3; }
.cs-gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cs-gallery__caption { padding: 20px 4px 0; }
.cs-gallery__caption-title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.cs-gallery__caption-desc { font-family: var(--ff-isans); font-size: 14px; color: var(--text-dim); line-height: 1.5; }

.cs-challenges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cs-challenge { border: 1px solid var(--hairline); border-radius: 20px; padding: 32px 28px; background: rgba(255, 255, 255, 0.02); }
.cs-challenge__kicker {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 12px;
}
.cs-challenge__title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 22px; margin-bottom: 16px; line-height: 1.25; }
.cs-challenge__desc { font-family: var(--ff-isans); font-size: 14.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 22px; }
.cs-challenge__solution-label {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--white); margin-bottom: 8px;
}
.cs-challenge__solution-text { font-family: var(--ff-isans); font-size: 14.5px; line-height: 1.65; color: var(--text-dim); }

.cs-footer { max-width: 1480px; margin: 0 auto; padding: 90px var(--pad-x) 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cs-footer__card { border: 1px solid var(--hairline); border-radius: 24px; padding: 48px 40px; background: rgba(255, 255, 255, 0.02); }
.cs-footer__title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 30px; margin-bottom: 12px; }
.cs-footer__desc { font-family: var(--ff-isans); font-size: 15px; color: var(--text-dim); margin-bottom: 28px; }

/* ---- Per-project accent (hero hover glow + a much softer version for scroll cards) ---- */
.cs-page--skymate { --project-glow: rgba(139, 92, 246, 0.4); --project-glow-soft: rgba(139, 92, 246, 0.12); }
.cs-page--snapay  { --project-glow: rgba(52, 211, 153, 0.38); --project-glow-soft: rgba(52, 211, 153, 0.12); }
.cs-page--aura    { --project-glow: rgba(255, 255, 255, 0.4); --project-glow-soft: rgba(255, 255, 255, 0.12); }

/* ---- Hero image: hover lift + project-tinted glow ---- */
.cs-hero__image { transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-hero__image img, .cs-hero__image video { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-hero__image:hover {
  box-shadow: 0 30px 80px -24px var(--project-glow, rgba(139, 92, 246, 0.4)),
              0 0 50px -6px var(--project-glow, rgba(139, 92, 246, 0.35));
}
.cs-hero__image:hover img, .cs-hero__image:hover video { transform: scale(1.045); }

/* ---- Intro: short blurb under the hero ---- */
.cs-intro { max-width: 1480px; margin: 0 auto; padding: 0 var(--pad-x) 50px; }
.cs-intro__title {
  font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-style: normal;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.01em; color: var(--white);
  text-align: left; max-width: 620px; margin-bottom: 16px;
}
.cs-intro__text {
  font-family: var(--ff-isans); font-weight: 300; font-size: 18px; line-height: 1.75;
  text-align: left; max-width: 560px; color: var(--text-dim);
}

/* ---- Product Journey: blurred until hovered, frame tilts toward the copy ---- */
.cs-process__media {
  cursor: default;
  transform: rotate(0deg) scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-process__media img {
  filter: blur(5px);
  transition: filter 0.6s ease;
}
.cs-process__media:hover img { filter: blur(0); }
/* Odd items: media sits on the left, copy on the right -> tilt right, toward the text */
.cs-process__media:hover { transform: rotate(1.8deg) scale(1.015); }
/* Even items: media sits on the right, copy on the left -> tilt left, toward the text */
.cs-process__item:nth-child(even) .cs-process__media:hover { transform: rotate(-1.8deg) scale(1.015); }

/* ---- In the Wild: auto-scrolling marquee, pauses on hover ---- */
.cs-wild {
  overflow: hidden;
  margin: 0 calc(var(--pad-x) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.cs-wild__track {
  display: flex;
  gap: 40px;
  width: max-content;
  /* Vertical padding is deliberate, not decorative: .cs-wild's overflow:hidden
     clips anything past the track's own box, and the hover pop below scales
     the whole item (image + caption) past its resting bounds. Without this
     room, the scaled card and its caption text get clipped top/bottom. */
  padding: 40px var(--pad-x);
  animation: wildScroll 32s linear infinite;
  animation-play-state: paused; /* JS starts it once distance is measured, so it never jumps on load */
}
.cs-wild__track.is-ready { animation-play-state: running; }
.cs-wild__track:hover { animation-play-state: paused; }
.cs-wild__item {
  /* Set by JS to exactly half the visible track width (minus the gap between
     the pair), so two cards always fill one line at any screen size. */
  flex: 0 0 var(--wild-item-width, 560px); width: var(--wild-item-width, 560px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-wild__item:hover {
  transform: scale(1.06);
  z-index: 2;
}
.cs-wild__item:hover .cs-gallery__item {
  box-shadow: 0 10px 24px -12px var(--project-glow-soft, rgba(139, 92, 246, 0.12));
}
.cs-wild__item[aria-hidden="true"] { pointer-events: none; }
@keyframes wildScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-wild__track { animation: none; }
}

/* ---- Challenges & Solutions: 3D flip cards (SkyMate / SnaPay) ---- */
.cs-flip { perspective: 1600px; background: transparent; border: none; padding: 0; min-height: 360px; }
.cs-flip__inner {
  position: relative; width: 100%; height: 100%; min-height: 360px;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}
.cs-flip:hover .cs-flip__inner { transform: rotateY(180deg); }
.cs-flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--hairline); border-radius: 20px; padding: 32px 28px;
  background: rgba(255, 255, 255, 0.02);
  display: flex; flex-direction: column; justify-content: center;
}
.cs-flip__face--back { transform: rotateY(180deg); }
.cs-flip__face--back .cs-challenge__title { font-size: 18px; margin-bottom: 14px; color: var(--text-dim); }

@media (max-width: 1399px) {
  .cs-hero { padding: 160px var(--pad-x) 60px; }
  .cs-process__item { grid-template-columns: 1fr; gap: 28px; }
  .cs-process__item:nth-child(even) .cs-process__media { order: 0; }
  .cs-challenges { grid-template-columns: 1fr; }
  .cs-footer { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .cs-back { top: 90px; }
  .cs-hero { padding: 130px var(--pad-x) 50px; }
  .cs-hero__tagline { font-size: 17px; margin-bottom: 40px; }
  .cs-intro__title { font-size: 24px; }
  .cs-intro__text { font-size: 17px; }
  .cs-process { gap: 60px; }
  .cs-process__title { font-size: 22px; }
  .cs-section { padding: 60px var(--pad-x); }
  .cs-section__label { margin-bottom: 32px; }
  .cs-wild__track { gap: 20px; }
  .cs-flip, .cs-flip__inner { min-height: 300px; }
}

/* =========================================================
   AI LABS CASE STUDIES (Neural Studio / UNIT / Solar / VUALA)
   Ported 1:1 from the Framer case-study documentation pages.
   Shared "aics" system, re-skinned per project via CSS vars
   set on .cs-page--neural / --unit / --solar / --vuala.
   ========================================================= */
.aics__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 28px;
}
.aics__tag {
  font-family: var(--ff-isans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}
.aics__case-no {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-isans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--aics-accent);
  margin-bottom: 22px;
}
.aics__case-no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aics-accent); box-shadow: 0 0 12px var(--aics-accent); }

.aics__title {
  font-family: var(--aics-display-font, var(--ff-jura));
  font-style: var(--aics-display-style, normal);
  font-weight: var(--aics-display-weight, 700);
  font-size: clamp(46px, 8vw, 104px);
  line-height: 0.98; letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.aics__desc {
  font-family: var(--ff-isans); font-size: 18px; line-height: 1.7; color: var(--text-dim);
  max-width: 640px; margin-bottom: 44px;
}

.aics__meta { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 28px; border-top: 1px solid var(--hairline); margin-bottom: 56px; }
.aics__meta-item { min-width: 160px; }
.aics__meta-label { font-family: var(--ff-isans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aics-accent); margin-bottom: 8px; }
.aics__meta-value { font-family: var(--ff-isans); font-size: 14.5px; color: var(--text-dim); line-height: 1.5; }

.aics__media { width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid var(--hairline); background: rgba(255,255,255,0.02); transition: box-shadow 0.6s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease; }
.aics__media img { width: 100%; height: auto; display: block; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.aics__media:hover { box-shadow: 0 30px 90px -24px var(--aics-accent-glow, rgba(255,255,255,0.18)), 0 0 60px -10px var(--aics-accent-glow, rgba(255,255,255,0.15)); border-color: rgba(255,255,255,0.22); }
.aics__media:hover img { transform: scale(1.02); }

.aics__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.aics__card {
  border: 1px solid var(--hairline); border-radius: 18px; padding: 28px 26px;
  background: rgba(255,255,255,0.03);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, background 0.4s ease;
}
.aics__card:hover { transform: translateY(-4px); border-color: var(--aics-accent); background: rgba(255,255,255,0.05); }
.aics__card-icon {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--aics-accent); color: var(--aics-on-accent, #0a0a0a);
}
.aics__card-icon svg { width: 15px; height: 15px; }
.aics__card-title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.aics__card-desc { font-family: var(--ff-isans); font-size: 14px; line-height: 1.6; color: var(--text-dim); }

.aics__panel {
  border: 1px solid var(--hairline); border-radius: 18px; padding: 40px 36px;
  background: rgba(255,255,255,0.035); margin-bottom: 20px;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between;
}
.aics__panel-title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: 26px; flex: 0 0 220px; }
.aics__panel-desc { font-family: var(--ff-isans); font-size: 14.5px; line-height: 1.7; color: var(--text-dim); flex: 1 1 320px; max-width: 620px; }
.aics__panel-body { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }

.aics__palette { display: flex; gap: 26px; flex-wrap: wrap; }
.aics__swatch { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aics__swatch-dot { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.aics__swatch:hover .aics__swatch-dot { transform: scale(1.14); }
.aics__swatch-label { font-family: var(--ff-isans); font-size: 11px; color: var(--text-faint); letter-spacing: 0.03em; }

.aics__twin { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 90px; }
.aics__sample { border: 1px solid var(--hairline); border-radius: 18px; padding: 32px 30px; background: rgba(255,255,255,0.03); }
.aics__sample-head { display: flex; align-items: center; gap: 10px; font-family: var(--ff-isans); font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 20px; }
.aics__sample-head svg { width: 15px; height: 15px; color: var(--aics-accent); }
.aics__sample-display {
  font-family: var(--aics-display-font, var(--ff-jura));
  font-style: var(--aics-display-style, normal);
  font-weight: var(--aics-display-weight, 700);
  font-size: clamp(28px, 4vw, 40px); line-height: 1.05; margin-bottom: 18px;
}
.aics__sample-desc { font-family: var(--ff-isans); font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.aics__demo-btns { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.aics__demo-btn {
  display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px;
  font-family: var(--ff-isans); font-size: 13px; font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.aics__demo-btn:hover { transform: translateY(-2px); }
.aics__demo-btn--primary { background: var(--aics-accent); color: var(--aics-on-accent, #0a0a0a); }
.aics__demo-btn--secondary { background: transparent; border: 1px solid var(--hairline); color: var(--text-dim); }

.aics__section-title { font-family: "Montserrat", var(--ff-sans); font-weight: 600; font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }

.aics__scroll-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-isans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 32px;
}
.aics__scroll-hint svg { width: 12px; height: 12px; color: var(--aics-accent); animation: aicsScrollHint 1.8s ease-in-out infinite; }
@keyframes aicsScrollHint {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(4px); opacity: 1; }
}

.aics__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 72px 24px; align-items: start; }
.aics__grid-item.is-wide { grid-column: 1 / -1; }
.aics__grid-item { transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.aics__grid-item:hover { transform: translateY(-7px); }
.aics__grid-media {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.02); margin-bottom: 16px;
  transition: border-color 0.4s ease, box-shadow 0.45s cubic-bezier(0.22,1,0.36,1);
}
.aics__grid-media img { width: 100%; height: auto; display: block; }
.aics__grid-item:hover .aics__grid-media { border-color: var(--aics-accent); box-shadow: 0 20px 44px -22px var(--aics-accent-glow, rgba(255,255,255,0.2)); }
.aics__grid-caption { font-family: var(--ff-isans); font-size: 13.5px; line-height: 1.6; color: var(--text-dim); max-width: 560px; }

.aics__videos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.aics__video-placeholder {
  border-radius: 18px; border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: box-shadow 0.6s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
}
.aics__video-placeholder:hover { box-shadow: 0 30px 90px -24px var(--aics-accent-glow, rgba(255,255,255,0.18)); border-color: rgba(255,255,255,0.22); }
.aics__video-placeholder video { width: 100%; height: auto; display: block; }
/* Solar only: match this card's frame to its 4:3 neighbor, video fills (crops) instead of fitting */
.aics__video-placeholder.is-fill { aspect-ratio: 4 / 3; }
.aics__video-placeholder.is-fill video { height: 100%; object-fit: cover; }
.aics__video-caption { font-family: var(--ff-isans); font-size: 13.5px; color: var(--text-faint); margin-top: 16px; max-width: 640px; }

.aics__fullpage-frame { border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); }
.aics__fullpage-frame img { width: 100%; display: block; }

.aics__footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 44px var(--pad-x) 0; margin-top: 40px; border-top: 1px solid var(--hairline);
  font-family: var(--ff-isans); font-size: 13px; color: var(--text-faint);
}
.aics__footer-logo { font-family: var(--ff-jura); font-weight: 700; letter-spacing: 0.02em; color: var(--text-dim); }
.aics__footer-back { color: var(--text-dim); text-decoration: none; transition: color 0.3s ease; }
.aics__footer-back:hover { color: var(--aics-accent); }

/* ---- Per-project identity ---- */
.cs-page--neural {
  --aics-accent: rgb(255,77,68); --aics-accent-glow: rgba(255,77,68,0.35);
  --aics-on-accent: #0a0a0a;
  --aics-display-font: "Orbitron", var(--ff-jura); --aics-display-weight: 800;
  --project-glow: rgba(255,77,68,0.4); --project-glow-soft: rgba(255,77,68,0.12);
}
.cs-page--unit {
  --aics-accent: rgb(139,82,238); --aics-accent-glow: rgba(139,82,238,0.35);
  --aics-on-accent: #0a0a0a;
  --aics-display-font: var(--ff-iserif); --aics-display-style: italic; --aics-display-weight: 400;
  --project-glow: rgba(139,82,238,0.4); --project-glow-soft: rgba(139,82,238,0.12);
}
.cs-page--solar {
  --aics-accent: rgb(140,225,95); --aics-accent-glow: rgba(140,225,95,0.32);
  --aics-on-accent: #0a1408;
  --aics-display-font: var(--ff-jura); --aics-display-weight: 700;
  --project-glow: rgba(140,225,95,0.38); --project-glow-soft: rgba(140,225,95,0.12);
}
.cs-page--vuala {
  --aics-accent: rgb(246,205,132); --aics-accent-glow: rgba(246,205,132,0.32);
  --aics-on-accent: #0a0a0a;
  --aics-display-font: var(--ff-jura); --aics-display-weight: 700;
  --project-glow: rgba(246,205,132,0.4); --project-glow-soft: rgba(246,205,132,0.12);
}

@media (max-width: 1399px) {
  .aics__cards { grid-template-columns: 1fr; }
  .aics__panel { padding: 32px 28px; }
  .aics__twin { grid-template-columns: 1fr; }
  .aics__grid { grid-template-columns: 1fr; }
  .aics__grid-item.is-wide { grid-column: auto; }
  .aics__videos { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 809px) {
  .aics__title { font-size: 42px; }
  .aics__desc { font-size: 16px; }
  .aics__meta { gap: 24px; margin-bottom: 40px; }
  .aics__grid { gap: 48px; }
  .aics__panel { flex-direction: column; }
  .aics__panel-title { flex: none; }
  .aics__footer { padding: 36px var(--pad-x) 0; }
}