/* ============================================================
   PIXANTRA — Hero (minimal / premium)
   ============================================================ */
:root {
  --bg: #04081c;
  --ink: #eaf1ff;
  --ink-dim: rgba(234, 241, 255, 0.5);
  --ink-faint: rgba(234, 241, 255, 0.32);
  --line: rgba(234, 241, 255, 0.16);
  --accent: #009bff;
  --accent-2: #1226b5;
  --navy: #081a5e;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(24px, 3.4vw, 56px);
  --font-head: "Barlow Condensed", "Archivo", sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

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

/* ---------- Background ---------- */
#liquid-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
/* Liquid WebGL background is heavy on mobile GPUs — drop it there
   entirely and fall back to a static gradient underneath. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #liquid-canvas { display: none; }
  .page {
    background:
      radial-gradient(ellipse 120% 60% at 70% 0%, rgba(0,155,255,0.22) 0%, transparent 55%),
      radial-gradient(ellipse 100% 70% at 20% 100%, rgba(0,80,200,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 80% 50% at 50% 50%, rgba(11,27,122,0.25) 0%, transparent 70%),
      var(--bg);
  }
}
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Page shell ---------- */
.page {
  position: relative;
  z-index: 3;
  height: 100vh;
  height: 100dvh;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.page a, .page button { pointer-events: auto; }

/* ---------- Header ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 40px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: 16px;
  color: #fff;
  will-change: transform;
}
.logo__img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.header .logo__text .logo__x {
  color: var(--accent);
}
.logo__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-left: 2px; }

/* Nav */
.nav {
  display: flex;
  gap: clamp(24px, 3.4vw, 60px);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  padding-bottom: 6px;
}
.nav__label { position: relative; }
.nav__label::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover .nav__label::after,
.nav__link.is-active .nav__label::after { transform: scaleX(1); }
.nav__num { font-size: 10px; color: var(--ink-faint); font-weight: 600; transform: translateY(-1px); }

/* CEO card */
.ceo-card {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  min-width: 250px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(20, 16, 13, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  will-change: transform;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.ceo-card:hover { border-color: rgba(234,241,255,0.3); background: rgba(20,16,13,0.4); }
.ceo-card__avatar {
  width: 42px; height: 42px;
  border-radius: 9px;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #fff;
  background: black;
}
.ceo-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ceo-card__body { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.ceo-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ceo-card__title { font-weight: 500; font-size: 14px; color: #fff; }
.ceo-card__icon { font-size: 14px; color: var(--ink-dim); transition: transform 0.4s var(--ease); }
.ceo-card:hover .ceo-card__icon { transform: translate(3px, -3px); }
.ceo-card__name { font-size: 13px; color: var(--ink-dim); }
.ceo-card__role { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; }

/* ---------- Hero ---------- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Routed views live stacked in the same box */
.views { position: relative; flex: 1; display: flex; }
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.view[hidden] { display: none; }

/* Inner-page header (Portfolio / About / Contact) */
.page-head { max-width: 720px; }
.page-head__idx {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.page-head__title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(64px, 10vw, 170px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: #fff;
}
.page-head__sub {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--ink-dim);
  font-weight: 300;
  letter-spacing: 0.01em;
}
/* Lead sits in the upper-left, clear of the wordmark backdrop below. */
.hero__lead { max-width: 460px; position: relative; z-index: 2; }

.hero__copy {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #fff;
  text-wrap: balance;
}
.hero__copy em {
  font-style: normal;
  font-weight: 500;
}

/* Explore link */
.explore {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(32px, 4.5vh, 52px);
  width: min(230px, 60vw);
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  padding-top: 14px;
  will-change: transform;
}
.explore__bracket {
  position: absolute;
  top: -2px; left: -8px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--ink-dim);
  border-left: 1.5px solid var(--ink-dim);
}
.explore__line {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.explore__line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.explore:hover .explore__line::after { transform: scaleX(1); }

/* Services — compact inline row so it reads as one quiet line,
   not a stacked list competing with the lead copy above it. */
.services {
  list-style: none;
  margin-top: clamp(28px, 5vh, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.services__item {
  position: relative;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1;
  letter-spacing: 0.01em;
  transition: color 0.35s var(--ease);
}
/* thin divider between items */
.services__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -9px; top: 50%;
  width: 1px; height: 11px;
  transform: translateY(-50%);
  background: var(--line);
}
.services__item.is-active { color: #fff; }
.services__item:hover { color: #fff; }
.services__idx { color: var(--accent); margin-right: 5px; font-weight: 500; }

/* ---------- Wordmark ---------- */
.wordmark {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 1;              /* backdrop — sits behind the lead content */
}
.wordmark__text {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(110px, 17vw, 300px);
  letter-spacing: 0.01em;
  line-height: 0.82;
  background: linear-gradient(178deg, #ffffff 22%, #d9d2cb 62%, #b0a89f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 22px 60px rgba(0,0,0,.5));
  opacity: 0.9;            /* recede slightly so foreground copy leads */
  will-change: transform;
}

/* Laptop / medium screens: ease off the vw scaling so PIXANTRA
   doesn't overpower the layout (phones + large monitors stay as-is) */
@media (min-width: 1000px) and (max-width: 1600px) {
  .wordmark__text { font-size: clamp(140px, 11vw, 220px); }
}

@media (max-width: 800px) {
  .wordmark {
    
    transform: translateX(0);
    left: 0;
    transform: none;
  }
  .wordmark__text{
font-size: 80px;
  }
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 4;
}
.footer__left { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-dim); }
.footer__copy { font-weight: 500; color: var(--ink); }
.footer__ruler {
  width: clamp(64px, 11vw, 130px);
  height: 12px;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 11px);
}
.footer__val { font-weight: 500; }

.reel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(8,26,94,0.25);
  background: #eaf1ff;
  color: #081a5e;
  font-weight: 500;
  font-size: 14px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  will-change: transform;
}
.reel:hover { border-color: rgba(0,155,255,0.6); }
.reel__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,155,255,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,155,255,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(0,155,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,155,255,0); }
}

/* ---------- Markers ---------- */
.markers { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.plus { position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%); opacity: 0.5; }
.plus::before, .plus::after { content: ""; position: absolute; background: rgba(255,255,255,0.6); }
.plus::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.plus::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

/* ---------- Scroll-driven marquee band ---------- */
.marquee-band {
  position: relative;
  z-index: 3;
  background: #030614;
  padding: clamp(40px, 7vw, 90px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 14px);
  overflow: hidden;
  border-top: 1px solid var(--line);
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.marquee {
  overflow: hidden;
  width: 100%;
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(60px, 12vw, 180px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #eaf1ff;
}
.marquee__group span { padding: 0 clamp(18px, 2.4vw, 44px); }
.marquee__group em {
  font-style: normal;
  color: var(--accent);
  font-size: 0.5em;
  transform: translateY(-0.12em);
}
.marquee--alt .marquee__group {
  color: transparent;
  -webkit-text-stroke: 1px rgba(234, 241, 255, 0.55);
}
.marquee--alt .marquee__group em {
  color: var(--accent);
  -webkit-text-stroke: 0;
}

/* ---------- Page transition overlay (single sweep) ---------- */
.transition {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.transition__panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0091ff 0%, #011a3b 45%, #000529 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}
.transition__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 130px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  will-change: opacity, transform;
}

/* ---------- Custom cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 50; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor__ring {
  position: absolute; width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.7); border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease), height 0.35s var(--ease), opacity 0.35s var(--ease);
}
.cursor.is-hover .cursor__ring { width: 56px; height: 56px; opacity: 0.6; }
.cursor.is-hover .cursor__dot { opacity: 0; }

@media (hover: none) {
  body { cursor: auto; }
  .cursor { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .ceo-card { min-width: 0; }
  .hero__lead { max-width: 100%; }
}
@media (max-width: 560px) {
  .header { flex-wrap: wrap; }
  .ceo-card__body { display: none; }
  .ceo-card { padding: 8px; }
  .footer { flex-direction: column; align-items: flex-start; }
}

.js-ready [data-split] .word,
.js-ready [data-wordmark] { will-change: transform, opacity; }

/* ============================================================
   Ambient background objects (drifting orbs, grid, particles)
   ============================================================ */
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient--stack { z-index: 1; }        /* sits above section bg, below pinned cards */

/* Soft glowing orbs that slowly drift */
.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}
.ambient__orb--a {
  top: -8%; right: -4%;
  width: clamp(280px, 34vw, 520px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,155,255,0.55), transparent 68%);
  animation: orbDrift 26s ease-in-out infinite;
}
.ambient__orb--b {
  bottom: -12%; left: -6%;
  width: clamp(240px, 30vw, 460px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(18,38,181,0.4), transparent 68%);
  animation: orbDrift 32s ease-in-out infinite reverse;
}
.ambient__orb--c {
  top: 4%; right: 6%;
  width: clamp(260px, 30vw, 480px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,155,255,0.42), transparent 68%);
  animation: orbDrift 30s ease-in-out infinite;
}
.ambient__orb--d {
  bottom: -8%; left: -4%;
  width: clamp(240px, 28vw, 440px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(18,90,220,0.4), transparent 68%);
  animation: orbDrift 36s ease-in-out infinite reverse;
}
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(6%, 8%) scale(1.08); }
  66%  { transform: translate(-5%, 4%) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Faint drifting grid for depth */
.ambient__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(234,241,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(234,241,255,0.04) 1px, transparent 1px);
  background-size: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px);
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 20%, transparent 78%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(clamp(48px,6vw,88px), clamp(48px,6vw,88px)); }
}

/* Floating particle dots */
.ambient__dot {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(234,241,255,0.5);
  box-shadow: 0 0 8px 1px rgba(0,155,255,0.35);
  animation: dotFloat var(--d, 18s) ease-in-out infinite;
}
@keyframes dotFloat {
  0%   { transform: translateY(0); opacity: 0.25; }
  50%  { transform: translateY(-26px); opacity: 0.75; }
  100% { transform: translateY(0); opacity: 0.25; }
}

/* Keep real content above the ambient layer */
.statement__meta, .statement__body, .statement__foot { position: relative; z-index: 2; }
.svc-stack__pin { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .ambient__orb, .ambient__grid, .ambient__dot { animation: none; }
}

/* ============================================================
   Scroll-reveal statement section
   ============================================================ */
.statement {
  position: relative;
  z-index: 3;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(0,155,255,0.06) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(18,38,181,0.05) 0%, transparent 60%),
    #050a1e;
  border-top: 1px solid var(--line);
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(40px, 6vw, 90px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(48px, 9vh, 120px);
  overflow: hidden;
}

/* Top meta row */
.statement__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(20px, 4vh, 46px);
  border-bottom: 1px solid var(--line);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.statement__meta-mid { color: var(--ink); }
.statement__meta-idx { display: inline-flex; align-items: center; gap: 6px; }

/* Body: floated video + big paragraph that wraps around it */
.statement__body { position: relative; }

.statement__media {
  float: left;
  width: clamp(120px, 13vw, 205px);
  aspect-ratio: 1 / 1;
  margin: 0.35em clamp(20px, 2.2vw, 34px) 0.1em 0;
  overflow: hidden;
  border-radius: 2px;
  /* Fallback tone shown until/unless the video loads — echoes the
     warm reddish portrait in the reference design. */
  background:
    radial-gradient(120% 90% at 30% 25%, #009bff 0%, #0e1f8f 34%, #081a5e 72%, #04081c 100%);
  shape-outside: inset(0);
}
.statement__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The large statement paragraph.
   Each letter is wrapped in a .st-char span by JS. Characters start dull
   and fill to white letter-by-letter as the section scrolls through. */
.statement__text {
  font-family: "Archivo", var(--font-body);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 74px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink-dim);           /* fallback dull tone before JS splits */
}
.st-char {
  color: rgba(234, 241, 255, 0.16);  /* dull base */
  transition: color 0.05s linear;
  will-change: color;
}
.st-char.is-lit { color: #ffffff; }  /* revealed */

/* Footer row: Explore More + plus markers */
.statement__foot {
  display: flex;
  align-items: center;
  gap: clamp(24px, 6vw, 90px);
  position: relative;
}
.statement__explore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: min(260px, 60vw);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  padding-top: 12px;
}
.statement__explore-text { white-space: nowrap; }
.statement__explore-line {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.statement__explore-line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.statement__explore:hover .statement__explore-line::after { transform: scaleX(1); }
.statement__explore-corner {
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--ink-dim);
  border-right: 1.5px solid var(--ink-dim);
}
.statement__plus {
  position: relative;
  width: 13px; height: 13px;
  flex: 0 0 auto;
  opacity: 0.5;
  margin-left: auto;
}
.statement__plus--1 { margin-left: auto; }
.statement__plus--2, .statement__plus--3 { margin-left: 0; }
.statement__plus::before, .statement__plus::after {
  content: ""; position: absolute; background: rgba(255,255,255,0.6);
}
.statement__plus::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.statement__plus::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

@media (max-width: 700px) {
  .statement__media { width: clamp(96px, 30vw, 150px); }
  .statement__foot { flex-wrap: wrap; gap: 20px; }
  .statement__plus--2, .statement__plus--3 { display: none; }
}

/* ============================================================
   Stacked service cards — pinned, scrub-stacked scroll
   ============================================================ */
.svc-stack {
  position: relative;
  z-index: 3;
  background:
    radial-gradient(100% 60% at 100% 0%, rgba(0,155,255,0.05) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(18,90,220,0.05) 0%, transparent 60%),
    #040718;
  overflow: hidden;
}
/* The pinned viewport: cards are absolutely centered and overlap here. */
.svc-stack__pin {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--pad);
}
/* Themed pill heading pinned to the top of the cards viewport. */
.svc-stack__head {
  position: absolute;
  top: clamp(24px, 6vh, 64px);
  left: 0; right: 0;
  z-index: 4;
  text-align: center;
  padding-inline: var(--pad);
  
  pointer-events: none;
}
@media (max-width: 1081px) {
.svc-stack__head{
  visibility: hidden;
}
}
.svc-stack__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid rgba(0,155,255,0.35);
  border-radius: 999px;
  background: rgba(0,155,255,0.08);
  margin-bottom: 14px;
}

.svc-stack__title {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.svc-stack__title em { font-style: italic; font-weight: 600; color: var(--accent); }
@media (max-width: 720px) {
  .svc-stack__head { top: clamp(18px, 4vh, 40px); }
  .svc-stack__title { font-size: clamp(22px, 6vw, 34px); }
}

.svc-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1180px, 92vw);
  transform: translate(-50%, -50%);
  will-change: transform;
}
/* Card visual shell */
.svc-card__inner {
  display: grid;
  grid-template-columns: auto minmax(220px, 320px) 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(22px, 2.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #0a1030;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.04) inset, 0 40px 80px -40px rgba(0,0,0,0.9);
}

/* Number badge */
.svc-card__badge {
  align-self: start;
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1638;
  font-family: "Archivo", var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
}

/* Media: little colorful "design mockup" screen */
.svc-card__media {
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #12245e, #0c1638);
  padding: clamp(10px, 1vw, 16px);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,0.8);
  position: relative;
}
/* Placeholder image sits on top of the CSS mock; if it fails to load the
   mock underneath shows through as the fallback. */
.svc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  z-index: 2;
}
.svc-mock {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #ece7df;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 8px;
}
.svc-mock__txt {
  grid-column: 1; grid-row: 1 / span 2;
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, #171717 0 2px, transparent 2px 9px) 0 4px / 70% 100% no-repeat,
    #ece7df;
}
.svc-mock__tile { border-radius: 3px; }
.svc-mock__tile--1 { grid-column: 2 / span 2; grid-row: 1; background: var(--m1, #009bff); }
.svc-mock__tile--2 { grid-column: 2; grid-row: 2; background: var(--m2, #33b0ff); }
.svc-mock__tile--3 { grid-column: 3; grid-row: 2; background: var(--m3, #14b878); position: relative; }
.svc-mock__tile--3::after {
  content: "\2733";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 14px;
}

/* Title + description */
.svc-card__title {
  font-family: "Archivo", var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 32px);
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 10px;
}
.svc-card__desc {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 34ch;
}

/* Categories column */
.svc-card__cats-label {
  display: block;
  font-family: "Archivo", var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.svc-card__pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.svc-card__pills li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0c1638;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-dim);
  white-space: nowrap;
}
.svc-card__pills li.is-active {
  background: #eaf1ff;
  color: #081a5e;
  border-color: #eaf1ff;
  font-weight: 500;
}

/* ---- Responsive card layout ---- */
@media (max-width: 1080px) {
  .svc-card__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "badge media"
      "text  text"
      "cats  cats";
    gap: clamp(16px, 3vw, 28px);
  }
  .svc-card__badge { grid-area: badge; }
  .svc-card__media { grid-area: media; max-width: 340px; }
  .svc-card__text  { grid-area: text; }
  .svc-card__cats  { grid-area: cats; }
  .svc-card__desc  { max-width: none; }
}
@media (max-width: 620px) {
  .svc-card__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "badge"
      "media"
      "text"
      "cats";
    border-radius: 16px;
  }
  .svc-card__media { max-width: none; }
  .svc-card__pills li { padding: 7px 12px; font-size: 12px; }
}

/* ============================================================
   Preloader
   ============================================================ */
html.pix-loading, html.pix-loading body {
  overflow: hidden;
  height: 100%;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #04081c;
  padding: var(--pad);
  cursor: none;
}

.preloader__panels {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}
.preloader__panels span {
  flex: 1 0 0;
  background: #04081c;
  border-left: 1px solid rgba(234, 241, 255, 0.04);
}
.preloader__panels span:first-child { border-left: none; }

.preloader__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 2;
}
.preloader__corner--tl { top: var(--pad); left: var(--pad); border-top: 1.5px solid var(--ink-dim); border-left: 1.5px solid var(--ink-dim); }
.preloader__corner--tr { top: var(--pad); right: var(--pad); border-top: 1.5px solid var(--ink-dim); border-right: 1.5px solid var(--ink-dim); }
.preloader__corner--bl { bottom: var(--pad); left: var(--pad); border-bottom: 1.5px solid var(--ink-dim); border-left: 1.5px solid var(--ink-dim); }
.preloader__corner--br { bottom: var(--pad); right: var(--pad); border-bottom: 1.5px solid var(--ink-dim); border-right: 1.5px solid var(--ink-dim); }

.preloader__plus {
  position: absolute;
  width: 13px;
  height: 13px;
  z-index: 2;
  opacity: 0.7;
}
.preloader__plus--1 { top: calc(var(--pad) + 40%); left: 12%; }
.preloader__plus--2 { bottom: calc(var(--pad) + 34%); right: 14%; }
.preloader__plus::before, .preloader__plus::after { content: ""; position: absolute; background: rgba(255,255,255,0.6); }
.preloader__plus::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.preloader__plus::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

.preloader__top, .preloader__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.preloader__tag {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.preloader__tag--r { color: var(--ink-faint); }

.preloader__center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader__word {
  display: flex;
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 140px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.pre-mask { display: inline-block; overflow: hidden; }
.pre-l {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.5s var(--ease), color 0.3s ease;
  will-change: transform;
}
.pre-l.is-in { transform: translateY(0); }
.pre-l--x { color: var(--accent); }

.preloader__bottom { flex-direction: column; align-items: stretch; gap: 12px; }
.preloader__count {
  align-self: flex-end;
  font-family: "Archivo", var(--font-body);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--ink);
  line-height: 1;
}
.preloader__count-pct { color: var(--ink-faint); font-size: 0.55em; margin-left: 2px; }

.preloader__bar {
  position: relative;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.preloader__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.preloader__status {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .preloader__corner { width: 12px; height: 12px; }
  .preloader__plus--1, .preloader__plus--2 { display: none; }
}

/* ============================================================
   Built-for-success — chat mockup + parallax portrait + stats
   ============================================================ */
.success {
  position: relative;
  z-index: 3;
  background:
    radial-gradient(100% 70% at 90% 10%, rgba(0,155,255,0.06) 0%, transparent 55%),
    radial-gradient(90% 70% at 5% 100%, rgba(18,38,181,0.06) 0%, transparent 60%),
    #050a1e;
  border-top: 1px solid var(--line);
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(48px, 7vw, 100px);
  overflow: hidden;
}

.success__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}

.success__lead { max-width: 420px; }
.success__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid rgba(0,155,255,0.35);
  border-radius: 999px;
  background: rgba(0,155,255,0.08);
  margin-bottom: 18px;
}
.success__title {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.success__sub {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--ink-dim);
  max-width: 34ch;
}

.success__panels {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(220px, 280px);
  gap: clamp(16px, 2vw, 28px);
  justify-content: end;
  align-items: end;
}

/* Chat mockup */
.chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0a1030;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8);
}
.chat__day {
  align-self: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 6px 0 2px;
}
.chat__bubble {
  max-width: 84%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
}
.chat__bubble--in {
  align-self: flex-start;
  background: rgba(234,241,255,0.07);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat__bubble--out {
  align-self: flex-end;
  background: var(--accent);
  color: #081a5e;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.chat__heart { margin-left: 2px; }

/* Parallax portrait card */
.success__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 30% 20%, #009bff 0%, #0e1f8f 34%, #0c1638 68%, #050a1e 100%);
}
.success__portrait-inner {
  position: absolute;
  inset: -14%;
  will-change: transform;
}
.success__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stats row */
.stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 24px);
  padding-top: clamp(28px, 4vw, 44px);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: clamp(12px, 1.4vw, 20px);
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 40px);
  color: var(--ink);
  line-height: 1;
}
.stat__label {
  font-size: 12px;
  color: var(--ink-dim);
}

@media (max-width: 900px) {
  .success__top { grid-template-columns: 1fr; }
  .success__panels { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
}
@media (max-width: 560px) {
  .success__panels { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PRICING — glass card deck (adapted to Pixantra tokens)
   ============================================================ */
.pricing {
  --pr-glass-bg: rgba(10, 18, 52, 0.55);
  --pr-glass-border: rgba(0, 155, 255, 0.18);
  --pr-glass-shine: rgba(255, 255, 255, 0.06);
  --pr-stub: var(--accent);
  --pr-stub-dark: #0b1b7a;
  --pr-stub-ink: #eaf1ff;

  position: relative;
  z-index: 3;
  min-height: 0;
  padding-block: clamp(60px, 10vh, 140px);
  background: var(--bg);
  overflow: visible;
}
.pricing__pin {
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(24px, 4vh, 40px);
  padding: clamp(32px, 6vh, 72px) var(--pad) clamp(24px, 4vh, 48px);
}

.pricing__head { text-align: center; max-width: 640px; margin-bottom: clamp(28px, 4vh, 44px); position: relative; z-index: 2; }
.pricing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid rgba(0,155,255,0.35);
  border-radius: 999px;
  background: rgba(0,155,255,0.08);
  margin-bottom: 16px;
}
.pricing__title {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pricing__title em { font-style: italic; font-weight: 600; color: var(--accent); }
.pricing__sub {
  margin: 18px auto 0;
  max-width: 460px;
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--ink-dim);
}
.pricing__foot {
  margin-top: clamp(28px, 4vh, 44px);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Deck — simple responsive glass cards */
.deck {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform: none;
  transform-style: flat;
  will-change: opacity, transform;
}

.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 1px solid var(--pr-glass-border);
  background: var(--pr-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 32px 64px -24px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.12) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* top shine streak */
.card__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.09) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.card__paper {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 28px 24px 20px;
  color: var(--ink);
  border-bottom: 1px solid rgba(0,155,255,.15);
}
.card__code {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.card__name {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -0.01em;
  color: #fff;
}
.card__note {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.card__list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.card__list li {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(234,241,255,.75);
}
.card__list li::before { content: "–"; position: absolute; left: 0; color: var(--accent); }

.card__stub {
  position: relative;
  z-index: 1;
  padding: 20px 24px 22px;
  background: linear-gradient(160deg, rgba(0,155,255,.18), rgba(11,27,122,.35));
  color: var(--pr-stub-ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__stub--featured {
  background: linear-gradient(160deg, rgba(77,186,255,.22), rgba(11,27,122,.4));
}
.card__stubtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.card__tag {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234,241,255,.7);
}
.card__barcode {
  width: 56px; height: 18px;
  opacity: .5;
  background: repeating-linear-gradient(90deg,
    rgba(234,241,255,.9) 0 2px, transparent 2px 3px,
    rgba(234,241,255,.9) 3px 4px, transparent 4px 6px,
    rgba(234,241,255,.9) 6px 7px, transparent 7px 10px);
}
.card__price { display: flex; align-items: baseline; gap: 4px; }
.card__currency { font-family: var(--font-body); font-size: 16px; color: rgba(234,241,255,.7); }
.card__amount {
  font-family: "Archivo", var(--font-body);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.card__period { font-family: var(--font-body); font-size: 11px; color: rgba(234,241,255,.6); margin-left: 2px; }

.card__cta {
  align-self: flex-start;
  margin-top: 2px;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card__cta span { transition: transform .25s var(--ease); }
.card__cta:hover { background: rgba(0,155,255,.35); border-color: rgba(0,155,255,.6); }
.card__cta:hover span { transform: translateX(3px); }
.card__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card__vin { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.1em; color: rgba(234,241,255,.35); }

/* Center card featured glow */
.card--center .card__inner {
  border-color: rgba(0,155,255,.35);
  box-shadow:
    0 24px 60px -24px rgba(0,155,255,.28),
    0 0 0 1px rgba(0,155,255,.2) inset,
    0 1px 0 rgba(255,255,255,.15) inset;
}

/* Mobile: vertical stack */
@media (max-width: 720px) {
  .pricing { min-height: 0; }
  .pricing__pin {
    height: auto;
    min-height: 0;
    padding: clamp(48px, 9vh, 80px) var(--pad) clamp(48px, 9vh, 80px);
  }
  .deck {
    width: 100%;
    max-width: 420px;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: clamp(24px, 5vh, 40px);
  }
  .card {
    width: 100%;
    height: auto;
    transform: none !important;
    transform-style: flat;
  }
  .card__inner { height: auto; }
  .card__paper { padding: 24px 20px 18px; }
  .card__stub { padding: 18px 20px 20px; }
}
@media (max-width: 480px) {
  .card__list li { font-size: 11px; }
}

/* Short / laptop viewports (desktop deck still active >720px): the pinned
   pane is 100vh, so when height is limited the head + fanned deck can
   overflow. Compress the header spacing and shrink the deck to fit. */
@media (min-width: 721px) and (max-height: 820px) {
  .pricing__head { margin-bottom: clamp(16px, 2.5vh, 28px); }
  .pricing__title { font-size: clamp(32px, 4vw, 54px); }
  .pricing__sub { margin-top: 12px; }
  .pricing__foot { margin-top: clamp(16px, 2.5vh, 28px); }
}
@media (min-width: 721px) and (max-height: 680px) {
  .pricing__sub { display: none; }
  .pricing__head { margin-bottom: clamp(12px, 2vh, 20px); }
  .card__paper { padding: 20px 18px 14px; }
  .card__stub { padding: 14px 18px 16px; }
  .card__list { margin-top: 10px; gap: 5px; }
  .card__note { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none !important; }
}

/* ============================================================
   TESTIMONIALS — 3D cylindrical infinite rotation
   5 glass cards orbit a cylinder; hover pauses + shows tooltip.
   ============================================================ */
.tmony {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(0,155,255,0.06) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(18,90,220,0.05) 0%, transparent 60%),
    #04081c;
  border-top: 1px solid var(--line);
  padding: clamp(48px, 8vh, 96px) var(--pad) clamp(56px, 9vh, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 56px);
  overflow: hidden;
}

.tmony__head { text-align: center; max-width: 640px; position: relative; z-index: 2; }
.tmony__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid rgba(0,155,255,0.35);
  border-radius: 999px;
  background: rgba(0,155,255,0.08);
  margin-bottom: 16px;
}

.tmony__title {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tmony__title em { font-style: italic; font-weight: 600; color: var(--accent); }
.tmony__sub {
  margin: 16px auto 0;
  max-width: 440px;
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--ink-dim);
}

/* The 3D stage */
.tmony__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  height: clamp(320px, 46vh, 440px);
  min-height: 320px;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
/* Rotating ring — GSAP spins rotateY on this. Cards are placed on the wall. */
.tmony__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--ring-size, clamp(240px, 26vw, 340px));
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.tmony-card {
  --card-w: clamp(240px, 26vw, 340px);
  --card-h: clamp(280px, 40vh, 380px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin-top: calc(var(--card-h) / -2);
  margin-left: calc(var(--card-w) / -2);
  transform: rotateY(var(--angle)) translateZ(var(--radius));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
}
/* Glow behind each card */
.tmony-card::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  border-radius: 30px;
  background: radial-gradient(60% 55% at 50% 42%, rgba(0,155,255,0.42), transparent 72%);
  filter: blur(26px);
  opacity: 0.85;
  pointer-events: none;
}
.tmony-card:nth-child(2)::before { background: radial-gradient(60% 55% at 50% 42%, rgba(18,90,220,0.42), transparent 72%); }
.tmony-card:nth-child(3)::before { background: radial-gradient(60% 55% at 50% 42%, rgba(18,38,181,0.40), transparent 72%); }
.tmony-card:nth-child(4)::before { background: radial-gradient(60% 55% at 50% 42%, rgba(0,194,255,0.38), transparent 72%); }
.tmony-card:nth-child(5)::before { background: radial-gradient(60% 55% at 50% 42%, rgba(255,122,184,0.40), transparent 72%); }

/* Transparent blurred glass surface */
.tmony-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid rgba(234,241,255,0.16);
  border-radius: 22px;
  background: rgba(24,20,17,0.28);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.08) inset,
    0 30px 60px -30px rgba(0,0,0,0.9);
  overflow: hidden;
}
.tmony-card__inner::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
.tmony-card__quote {
  font-size: clamp(38px, 4vw, 56px);
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  line-height: 0.7;
  color: var(--accent);
  height: 0.4em;
}
.tmony-card__text {
  flex: 1;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 300;
}
.tmony-card__foot { display: flex; align-items: center; gap: 12px; }
.tmony-card__avatar {
  width: 42px; height: 42px;
  border-radius: 11px;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(150deg, #33b0ff, #0b1b7a);
}
.tmony-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tmony-card__meta { display: flex; flex-direction: column; line-height: 1.3; }
.tmony-card__name { font-size: 14px; font-weight: 500; color: #fff; }
.tmony-card__role { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.tmony-card__stars { display: flex; gap: 3px; margin-top: 2px; color: var(--accent); font-size: 11px; }

/* Floating tooltip that follows the cursor while hovered */
.tmony__tip {
  position: fixed;
  z-index: 45;
  top: 0; left: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20,16,13,0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 16px)) scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tmony__tip.is-visible { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }
.tmony__tip::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(20,16,13,0.72);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tmony__tip strong { color: var(--accent); font-weight: 500; }

@media (max-width: 900px) {
  .tmony__stage {
    height: clamp(300px, 56vw, 400px);
    min-height: 300px;
  }
  .tmony-card {
    --card-w: clamp(220px, 34vw, 300px);
    --card-h: clamp(260px, 44vw, 340px);
  }
}

@media (max-width: 720px) {
  .tmony__stage {
    height: clamp(300px, 78vw, 380px);
    min-height: 300px;
    perspective: 1100px;
  }
  .tmony__ring { --ring-size: min(78vw, 300px); }
  .tmony-card {
    --card-w: min(78vw, 300px);
    --card-h: clamp(240px, 63vw, 320px);
  }
  .tmony-card::before { filter: blur(20px); }
}

@media (max-width: 480px) {
  .tmony {
    padding-inline: 18px;
    gap: 24px;
  }
  .tmony__stage {
    height: clamp(280px, 92vw, 340px);
    min-height: 280px;
  }
  .tmony__ring { --ring-size: min(84vw, 260px); }
  .tmony-card {
    --card-w: min(84vw, 260px);
    --card-h: clamp(220px, 74vw, 300px);
  }
  .tmony-card__text { font-size: clamp(13px, 3.4vw, 15px); }
  .tmony-card__foot { gap: 10px; }
}

/* ============================================================
   PROJECTS — awwwards-style glass reveal + detail popup
   ============================================================ */
.projects {
  position: relative;
  z-index: 3;
  background:
    radial-gradient(100% 60% at 80% 0%, rgba(0,155,255,0.05) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0,194,255,0.05) 0%, transparent 60%),
    #030614;
  border-top: 1px solid var(--line);
  padding: clamp(56px, 9vh, 120px) var(--pad) clamp(56px, 9vh, 120px);
  overflow: hidden;
}
.projects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto clamp(32px, 5vh, 64px);
  position: relative;
  z-index: 2;
}
.projects__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid rgba(0,155,255,0.35);
  border-radius: 999px;
  background: rgba(0,155,255,0.08);
  margin-bottom: 16px;
}
.projects__title {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(36px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.projects__title em { font-style: italic; font-weight: 600; color: var(--accent); }
.projects__intro {
  max-width: 360px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Grid of project cards */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2vw, 32px);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.proj-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(234,241,255,0.14);
  border-radius: 22px;
  background: rgba(20,17,14,0.34);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  overflow: hidden;
  cursor: none;
  padding: 0;
  color: inherit;
  will-change: transform;
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.proj-card:hover {
  border-color: rgba(0,155,255,0.5);
  box-shadow: 0 40px 90px -50px rgba(0,155,255,0.5), 0 -1px 0 rgba(255,255,255,0.08) inset;
}
.proj-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(150deg, var(--pc1, #009bff), var(--pc2, #0e1f8f));
}
.proj-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,0.28), transparent 46%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 22px);
  mix-blend-mode: overlay;
}
.proj-card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.05);
  transition: transform 0.9s var(--ease);
}
.proj-card:hover .proj-card__img { transform: scale(1.12); }
.proj-card__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11,10,8,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.proj-card__open {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(11,10,8,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 16px;
  transform: scale(0.8) rotate(-12deg);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), background 0.4s var(--ease);
}
.proj-card:hover .proj-card__open { opacity: 1; transform: scale(1) rotate(0); }
.proj-card__open:hover { background: var(--accent); }
.proj-card__body {
  padding: clamp(20px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proj-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proj-card__name {
  font-family: "Archivo", var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 28px);
  letter-spacing: -0.01em;
  color: #fff;
}
.proj-card__year { font-size: 12px; color: var(--ink-faint); font-weight: 500; }
.proj-card__desc { font-size: clamp(13px, 1vw, 15px); line-height: 1.55; color: var(--ink-dim); max-width: 42ch; }
.proj-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.proj-card__tags span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(234,241,255,0.03);
}

/* CTA row */
.projects__cta-row {
  display: flex;
  justify-content: center;
  margin: clamp(40px, 6vh, 72px) auto 0;
  position: relative;
  z-index: 2;
}
.projects__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(234,241,255,0.04);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow: hidden;
  will-change: transform;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.projects__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--accent), #0b1b7a);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.projects__cta:hover { border-color: transparent; color: #fff; }
.projects__cta:hover::before { transform: translateY(0); }
.projects__cta-arrow { transition: transform 0.4s var(--ease); }
.projects__cta:hover .projects__cta-arrow { transform: translateX(4px); }

@media (max-width: 820px) {
  .projects__grid { grid-template-columns: 1fr; }
  .projects__head { flex-direction: column; align-items: flex-start; }
}

/* ---- Project detail popup / modal ---- */
.proj-modal {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  pointer-events: none;
  visibility: hidden;
}
.proj-modal.is-open { pointer-events: auto; visibility: visible; }
.proj-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,4,3,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  will-change: opacity;
}
.proj-modal__dialog {
  position: relative;
  width: min(1040px, 100%);
  max-height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(260px, 1fr);
  border: 1px solid rgba(234,241,255,0.16);
  border-radius: 26px;
  background: rgba(16,14,12,0.72);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.9), 0 -1px 0 rgba(255,255,255,0.08) inset;
  will-change: transform, opacity;
}
.proj-modal__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  padding: 22px;
  background: linear-gradient(150deg, var(--pc1, #009bff), var(--pc2, #0e1f8f));
}
.proj-modal__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,0.26), transparent 46%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 24px);
  mix-blend-mode: overlay;
}
.proj-modal__img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}
.proj-modal__badge {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(11,10,8,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.proj-modal__panel {
  padding: clamp(28px, 3vw, 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.proj-modal__code {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.proj-modal__title {
  font-family: "Archivo", var(--font-body);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
}
.proj-modal__lead { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; color: var(--ink); font-weight: 300; }
.proj-modal__desc { font-size: 14px; line-height: 1.65; color: var(--ink-dim); }
.proj-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proj-modal__meta-k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.proj-modal__meta-v { font-size: 14px; color: #fff; margin-top: 3px; }
.proj-modal__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.proj-modal__tags span {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(234,241,255,0.03);
}
.proj-modal__actions { margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.proj-modal__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #eaf1ff;
  color: #081a5e;
  font-weight: 500;
  font-size: 14px;
  transition: transform 0.3s var(--ease);
}
.proj-modal__link:hover { transform: translateY(-2px); }
.proj-modal__link--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.proj-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(11,10,8,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 18px;
  cursor: none;
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.proj-modal__close:hover { background: var(--accent); transform: rotate(90deg); }

@media (max-width: 780px) {
  .proj-modal__dialog { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .proj-modal__media { min-height: 240px; max-height: 50vh; padding: 16px; }
  .proj-modal__panel { padding: 20px; }
}


/* ============================================================
   MEGA FOOTER — giant sliced company name (GSAP)
   ============================================================ */
.mega-footer {
  position: relative;
  z-index: 3;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,155,255,0.12) 0%, transparent 55%),
    #040718;
  border-top: 1px solid var(--line);
  padding: clamp(56px, 9vh, 120px) var(--pad) clamp(28px, 4vh, 48px);
  overflow: hidden;
}
.mega-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1280px;
  margin: 0 auto clamp(48px, 8vh, 100px);
  position: relative;
  z-index: 2;
}
.mega-footer__pitch {
  font-family: "Archivo", var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22ch;
}
.mega-footer__pitch em { font-style: italic; color: var(--accent); font-weight: 600; }
.mega-footer__col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.mega-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.mega-footer__col a {
  position: relative;
  display: inline-flex;
  font-size: 15px;
  color: var(--ink-dim);
  transition: color 0.35s var(--ease);
}
.mega-footer__col a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.mega-footer__col a:hover { color: #fff; }
.mega-footer__col a:hover::after { transform: scaleX(1); }

/* The giant sliced wordmark */
.mega-footer__wordmark {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  user-select: none;
  line-height: 0.82;
}
/* The giant sliced wordmark */
.mega-footer__wordmark {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  user-select: none;
  line-height: 0.82;
  overflow: hidden;                 /* clip any sub-pixel slice overflow */
}
.mega-word {
  display: block;
  width: 100%;
  font-family: "Archivo", var(--font-head);
  font-weight: 900;
  /* sized so the 8-letter word always fits the row without clipping */
  font-size: clamp(38px, 15.5vw, 210px);
  letter-spacing: -0.04em;
  line-height: 0.82;
  text-align: center;
  white-space: nowrap;
}
/* Each letter carries a transparent base (for width) + two clipped
   slice layers (top / bottom half) that GSAP drives apart & back. */
.mega-letter {
  position: relative;
  display: inline-block;
  will-change: transform;
}
.mega-letter__base { color: transparent; }
.mega-slice {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 16%, #d9d2cb 56%, #7c756c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: transform, opacity;
}
.mega-slice--top { clip-path: inset(-2% 0 50% 0); }
.mega-slice--bot { clip-path: inset(50% 0 -2% 0); }

.mega-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: clamp(32px, 5vh, 60px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
  font-size: 13px;
  color: var(--ink-dim);
}
.mega-footer__socials { display: flex; gap: 22px; }
.mega-footer__socials a { color: var(--ink-dim); transition: color 0.3s var(--ease); }
.mega-footer__socials a:hover { color: var(--accent); }
.mega-footer__totop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 500;
}
.mega-footer__totop-ico {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.mega-footer__totop:hover .mega-footer__totop-ico { background: var(--accent); color: #081a5e; transform: translateY(-3px); }

@media (max-width: 820px) {
  .mega-footer__top { grid-template-columns: 1fr 1fr; }
  .mega-footer__pitch { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .mega-footer__top { grid-template-columns: 1fr; }
}

/* ---- Portfolio SPA view (scrollable grid, reuses proj-card + modal) ---- */
.view--scroll { justify-content: flex-start; overflow-y: auto; overflow-x: hidden; pointer-events: auto; }
.view--scroll::-webkit-scrollbar { width: 0; height: 0; }
.portfolio { width: 100%; padding: clamp(8px, 3vh, 40px) 0 clamp(40px, 8vh, 80px); }
.portfolio .page-head { margin-bottom: clamp(28px, 5vh, 56px); }
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 26px);
}
@media (max-width: 1080px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .portfolio__grid { grid-template-columns: 1fr; } }