/* ============================================================
   Sui.io clone — full effects layer
   (cursor spotlight, noise, scroll-scrub, scramble, stagger,
    blink-expanders, rive/lottie, rebounce footer)
   ============================================================ */

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Animated film-grain noise ---------- */
.noise-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4; mix-blend-mode: overlay; opacity: 0.5;
}

/* ============================================================
   HERO — cursor spotlight + gradient blur
   ============================================================ */
.hero-stage { position: relative; z-index: 2; }

/* layered headings: a dim base overlay + an in-flow "sharp" spotlight copy */
.hero-h1.base {
  position: absolute; inset: 0; margin: 0; pointer-events: none;
  background: none;
  -webkit-text-fill-color: rgba(120,150,190,0.32);
  color: rgba(120,150,190,0.32);
}
.hero-h1.sharp {
  position: relative; margin: 0;
  /* soft white neon bloom around the crisp letters */
  text-shadow: 0 0 28px rgba(255,255,255,0.45), 0 0 70px rgba(150,190,255,0.35);
}
/* blurred white duplicate behind = strong glow halo */
.hero-h1.glow {
  position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 0;
  color: #e8f1ff; -webkit-text-fill-color: #e8f1ff;
  filter: blur(26px); opacity: 0.7;
}
/* lighten the dim base so the headline reads bright like the reference */
.hero-h1.base { -webkit-text-fill-color: rgba(150,185,230,0.22); color: rgba(150,185,230,0.22); z-index: 1; }

/* ============================================================
   "Sui is" — interactive expanding tabs
   ============================================================ */
.suiis-tab {
  position: relative; overflow: hidden; cursor: pointer;
  border-top: 1px dashed #cfd3d9;
}
.suiis-tab:first-child { border-top: none; }
.suiis-tab_bar {
  position: absolute; inset: 0; background: #298dff; z-index: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.51,0,0.08,1);
}
.suiis-tab:hover .suiis-tab_bar, .suiis-tab.open .suiis-tab_bar { transform: scaleX(1); }
.suiis-tab_main {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 28px;
  padding: 30px 0;
  transition: padding 0.4s var(--cubic, cubic-bezier(.51,0,.08,1)), color 0.4s ease;
}
.suiis-tab_num {
  font-family: var(--font-mono); font-size: 15px; color: #98a0ac; min-width: 2em;
  transition: color 0.4s ease;
}
.suiis-tab_title {
  font-family: var(--font-display); font-weight: 400; margin: 0; flex: 1;
  font-size: clamp(26px, 4.6vw, 56px); line-height: 1.04; color: #000;
  transition: color 0.4s ease, transform 0.45s cubic-bezier(.51,0,.08,1);
}
.suiis-tab:hover .suiis-tab_title, .suiis-tab.open .suiis-tab_title { color: #fff; transform: translateX(10px); }
.suiis-tab:hover .suiis-tab_num, .suiis-tab.open .suiis-tab_num { color: rgba(255,255,255,0.75); }
/* plus → x morph indicator */
.suiis-tab_plus { position: relative; width: 22px; height: 22px; flex: 0 0 22px; }
.suiis-tab_plus::before, .suiis-tab_plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #000;
  transition: transform 0.45s cubic-bezier(.51,0,.08,1), background 0.4s ease;
}
.suiis-tab_plus::before { width: 22px; height: 2px; transform: translate(-50%,-50%); }
.suiis-tab_plus::after  { width: 2px; height: 22px; transform: translate(-50%,-50%); }
.suiis-tab:hover .suiis-tab_plus::before, .suiis-tab.open .suiis-tab_plus::before { background: #fff; transform: translate(-50%,-50%) rotate(180deg); }
.suiis-tab:hover .suiis-tab_plus::after, .suiis-tab.open .suiis-tab_plus::after { background: #fff; transform: translate(-50%,-50%) rotate(180deg) scaleY(0); }
.suiis-tab_ico {
  width: 52px; height: 52px; border-radius: 10px; flex: 0 0 52px;
  display: grid; place-items: center; background: #eef1f5; color: #000;
  transition: background 0.4s ease, color 0.4s ease, transform 0.45s cubic-bezier(.51,0,.08,1);
}
.suiis-tab_ico svg { width: 56%; }
.suiis-tab:hover .suiis-tab_ico, .suiis-tab.open .suiis-tab_ico { background: #fff; color: #298dff; transform: rotate(-8deg) scale(1.06); }
.suiis-tab_reveal {
  position: relative; z-index: 1; overflow: hidden;
  max-height: 0; transition: max-height 0.5s cubic-bezier(.51,0,.08,1);
}
.suiis-tab:hover .suiis-tab_reveal, .suiis-tab.open .suiis-tab_reveal { max-height: 140px; }
.suiis-tab_desc {
  color: #fff; max-width: 60ch; font-size: clamp(15px,1.6vw,19px); line-height: 1.45;
  padding: 0 0 30px 0; opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease 0.08s, transform 0.5s cubic-bezier(.51,0,.08,1) 0.08s;
}
.suiis-tab:hover .suiis-tab_desc, .suiis-tab.open .suiis-tab_desc { opacity: 1; transform: none; }
@media (max-width: 767px){
  .suiis-tab_ico { display: none; }
  .suiis-tab_reveal, .suiis-tab.open .suiis-tab_reveal { max-height: 200px; }
}

/* ============================================================
   Ecosystem gallery — hover-lift vertical strip accordion
   ============================================================ */
.gallery { background: var(--black); padding: clamp(70px,11vh,140px) 0; overflow: hidden; }
.gallery-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 52px; }
.gallery-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px,6vw,72px); margin: 0; line-height: 1; }
.gallery-sub { color: var(--gray-300); font-size: 18px; max-width: 46ch; }

.gallery-row {
  display: flex; gap: 6px; height: 60vh; min-height: 420px;
  padding: 0 var(--pad); align-items: flex-end;   /* anchor bottom so strips rise UP */
}
.slat {
  position: relative; flex: 1 1 0%; height: 64%;
  overflow: hidden; cursor: pointer; border-radius: 3px; background: #0d1117;
  filter: grayscale(1) brightness(0.5) contrast(1.05);
  opacity: 0; transform: translateY(48px);
  transition:
    flex-grow 0.65s cubic-bezier(.51,0,.08,1),
    height 0.65s cubic-bezier(.51,0,.08,1),
    filter 0.6s ease,
    opacity 0.8s cubic-bezier(.51,0,.08,1) calc(var(--i,0) * 0.045s),
    transform 0.8s cubic-bezier(.51,0,.08,1) calc(var(--i,0) * 0.045s);
  will-change: flex-grow, height;
}
.gallery-row.in .slat { opacity: 1; transform: translateY(0); }
/* dim the whole row while one strip is focused, then light the active one */
.gallery-row:hover .slat { filter: grayscale(1) brightness(0.32); }
.slat:hover { flex-grow: 4.2; height: 100%; filter: grayscale(0) brightness(1) !important; }
.slat-img { position: absolute; inset: 0; }
.slat-img img {
  width: 100%; height: 120%; object-fit: cover; display: block;
  transform: translateY(0); transition: transform 0.9s cubic-bezier(.51,0,.08,1);
}
.slat:hover .slat-img img { transform: translateY(-15%) scale(1.05); }
.slat-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; white-space: nowrap;
  background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0));
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease 0.12s, transform 0.5s cubic-bezier(.51,0,.08,1) 0.12s;
}
.slat:hover .slat-label { opacity: 1; transform: none; }
.slat-label .cat { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue-soft); }
.slat-label .name { font-family: var(--font-display); font-size: 22px; color: #fff; }
@media (max-width: 767px){
  .gallery-row { flex-wrap: wrap; height: auto; min-height: 0; gap: 8px; }
  .slat { flex: 1 1 28%; height: 180px; opacity: 1 !important; transform: none !important;
    filter: grayscale(0) brightness(0.9); }
  .slat:hover { flex-grow: 1; height: 180px; }
  .slat-label { opacity: 1; transform: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 6vh var(--pad); background: rgba(5,8,13,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-inner {
  display: flex; gap: clamp(24px,4vw,56px); max-width: 1040px; width: 100%; align-items: center;
  transform: translateY(24px) scale(0.97); transition: transform 0.55s cubic-bezier(.51,0,.08,1);
}
.lightbox.open .lightbox-inner { transform: none; }
.lightbox-img { flex: 0 0 44%; aspect-ratio: 3/4; overflow: hidden; border-radius: 8px; background: #0d1117; }
.lightbox-img img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-meta { flex: 1; }
.lightbox-cat { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue-soft); }
.lightbox-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px,5vw,64px); color: #fff; margin: 12px 0 16px; line-height: 1; }
.lightbox-desc { color: var(--gray-300); font-size: clamp(16px,1.8vw,20px); line-height: 1.5; max-width: 38ch; margin-bottom: 32px; }
.lightbox-link {
  display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: #fff;
  padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 500;
  transition: background 0.3s ease;
}
.lightbox-link:hover { background: #fff; color: #000; }
.lightbox-link svg { width: 14px; }
.lightbox-close {
  position: absolute; top: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease;
}
.lightbox-close:hover { background: var(--blue); transform: rotate(90deg); }
.lightbox-close svg { width: 14px; }
@media (max-width: 767px){
  .lightbox-inner { flex-direction: column; gap: 24px; }
  .lightbox-img { flex: none; width: 70%; max-width: 280px; }
  .lightbox-meta { text-align: center; }
  .lightbox-desc { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .slat { opacity: 1 !important; transform: none !important; }
}

/* ---------- Scroll progress bar (bottom of viewport) ---------- */
.scroll-progress {
  position: fixed; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,0.08); z-index: 95; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #298dff, #8fcbff);
  box-shadow: 0 0 12px rgba(41,141,255,0.8);
  will-change: width;
}
.hero-h1.sharp {
  --text-x: 50%; --text-y: 50%;
  background-image: radial-gradient(
    circle at var(--text-x) var(--text-y),
    #ffffff 0%, #ffffff 42%, #298dff 86%, rgba(41,141,255,0.1) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 100% 100%; background-repeat: no-repeat;
  will-change: background-image;
}
.hero-headwrap { position: relative; display: inline-block; z-index: 2; }
.hero-sub, .hero-cta { position: relative; z-index: 11; }

/* progressive backdrop-blur rings that follow the cursor */
.gradient-blur {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  --mouse-x: 50%; --mouse-y: 45%;
}
.gradient-blur > div { position: absolute; inset: 0; }
.gradient-blur > div:nth-of-type(1) {
  backdrop-filter: blur(2.8px); -webkit-backdrop-filter: blur(2.8px);
  -webkit-mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 14%, black 20%);
  mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 14%, black 20%);
}
.gradient-blur > div:nth-of-type(2) {
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  -webkit-mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 16%, black 40%);
  mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 16%, black 40%);
}

/* ============================================================
   Text reveal primitives (split lines / words / chars)
   ============================================================ */
.line-mask { display: block; overflow: hidden; }
.line-inner { display: block; transform: translateY(110%); will-change: transform; }
.word { display: inline-block; }
.char { display: inline-block; }

/* button / link text-stagger hover (text-shadow slide trick) */
.tstagger { position: relative; display: inline-flex; overflow: hidden; vertical-align: top; }
.tstagger > span {
  display: inline-block; line-height: 1.25em; position: relative;
  text-shadow: 0 1.15em currentColor;
  transition: transform 0.42s cubic-bezier(0.51,0,0.08,1);
  will-change: transform;
}
.tstagger:hover > span,
a:hover > .tstagger > span,
.btn:hover .tstagger > span,
.nav-cta:hover .tstagger > span,
.start-link:hover .tstagger > span { transform: translateY(-1.15em); }

/* scramble cursor for nav toggles handled in JS (just needs the text node) */

/* ============================================================
   Integrity blink-expanders (icon grows in beside word)
   ============================================================ */
.hl-ico { width: 0; overflow: hidden; transition: width 0.6s cubic-bezier(0.51,0,0.08,1), margin 0.6s cubic-bezier(0.51,0,0.08,1); margin-right: 0; }
.hl-ico.open { width: 64px; margin-right: 12px; }
@media (max-width: 767px){ .hl-ico.open { width: 44px; } }
.hl-ico > * { flex: 0 0 auto; }
.hl-lottie { width: 64px; height: 64px; }

/* ============================================================
   Scroll-scrubbed big Sui logo mask reveal
   ============================================================ */
.logo-section.scrub { position: relative; }
.logo-section.scrub .logo-mask { position: relative; }
.seq-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq-layer img { width: 100%; height: 100%; object-fit: contain; }
.seq-cover {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
.seq-cover img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   Radial orbital — Planes (CORE + orbiting plan nodes)
   ============================================================ */
.orbital {
  position: relative; min-height: 100vh; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* floating looping paths — subtle background complement */
.orbital-paths {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.85;
  -webkit-mask: radial-gradient(ellipse 85% 85% at 50% 50%, #000 45%, transparent 92%);
  mask: radial-gradient(ellipse 85% 85% at 50% 50%, #000 45%, transparent 92%);
}
.orbital-paths svg { width: 100%; height: 100%; color: #5ca9ff; display: block; }
.orbital-paths path { fill: none; will-change: stroke-dashoffset, stroke-opacity; }
@keyframes orbPathFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--flow, -800px); } }
@keyframes orbPathPulse { 0%,100% { stroke-opacity: var(--op0, 0.08); } 50% { stroke-opacity: var(--op1, 0.26); } }
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .orbital-paths path { animation: none !important; stroke-opacity: 0.14 !important; }
}

.orbital-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 28%, transparent 72%);
  mask: radial-gradient(circle at 50% 50%, #000 28%, transparent 72%);
}
.orbital-sys {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.25em; color: rgba(255,255,255,0.22); pointer-events: none;
}
.orbital-coords {
  position: absolute; right: 26px; top: 26px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; color: rgba(255,255,255,0.28); pointer-events: none;
}
.orbital-head {
  position: absolute; top: 9%; left: 0; right: 0; z-index: 6; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.orbital-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px,6vw,68px); margin: 0; line-height: 1; }

.orbital-stage { position: relative; width: 600px; height: 600px; max-width: 92vw; }
.orbital-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px dashed rgba(255,255,255,0.12); }
.orbital-ring.r1 { width: 470px; height: 470px; }
.orbital-ring.r2 { width: 640px; height: 640px; opacity: 0.5; }

.orbital-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 26px; z-index: 3;
  transition: opacity 0.5s ease, transform 0.5s var(--cubic, cubic-bezier(.51,0,.08,1)); cursor: pointer;
}
.core-disc {
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #1b2533, #080c12);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px #298dff, 0 0 55px rgba(41,141,255,0.7), inset 0 0 34px rgba(41,141,255,0.35);
  animation: corePulse 3.4s ease-in-out infinite;
}
@keyframes corePulse {
  0%,100% { box-shadow: 0 0 0 6px #298dff, 0 0 45px rgba(41,141,255,0.55), inset 0 0 30px rgba(41,141,255,0.3); }
  50%     { box-shadow: 0 0 0 6px #4ea0ff, 0 0 70px rgba(41,141,255,0.85), inset 0 0 40px rgba(41,141,255,0.45); }
}
.core-disc span { font-family: var(--font-display); font-size: 34px; color: #fff; letter-spacing: 0.04em; }
.core-status { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.core-status .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); }
.core-status .val { font-family: var(--font-mono); font-size: 15px; color: #5ca9ff; }
.orbital-stage.expanded .orbital-core { opacity: 0; transform: translate(-50%,-50%) scale(0.85); pointer-events: none; }

.orb-node {
  position: absolute; left: 50%; top: 50%; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: opacity 0.45s ease;
}
.orb-ico {
  width: 80px; height: 80px; border-radius: 50%; color: #fff;
  background: rgba(13,22,38,0.55); border: 1px solid rgba(140,185,255,0.35);
  box-shadow: 0 0 26px rgba(41,141,255,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  transition: transform 0.4s var(--cubic, cubic-bezier(.51,0,.08,1)), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.orb-ico svg { width: 30px; height: 30px; }
.orb-ico svg { width: 24px; height: 24px; }
.orb-node:hover .orb-ico, .orb-node.active .orb-ico {
  background: #298dff; border-color: #298dff; color: #fff;
  box-shadow: 0 0 34px rgba(41,141,255,0.6);
  transform: translateY(-7px) scale(1.09);   /* lifts up on hover */
}
.orb-label {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; color: rgba(255,255,255,0.92);
  background: rgba(13,22,38,0.6); border: 1px solid rgba(140,185,255,0.22); padding: 7px 14px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.orb-node:hover .orb-label, .orb-node.active .orb-label {
  color: #fff; background: rgba(41,141,255,0.18); border-color: rgba(41,141,255,0.4);
}

/* expanded detail card */
.orb-card {
  position: absolute; left: 50%; top: 50%; z-index: 60; width: min(360px, 86vw);
  background: rgba(9,13,20,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(41,141,255,0.32); border-radius: 12px; padding: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 40px rgba(41,141,255,0.16);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, calc(-50% + 18px)) scale(0.95);
  transition: opacity 0.45s ease, transform 0.5s var(--cubic, cubic-bezier(.51,0,.08,1));
}
.orb-card.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.orb-card_close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease;
}
.orb-card_close:hover { background: #298dff; transform: rotate(90deg); }
.orb-card_close svg { width: 11px; }
.orb-card_head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.orb-card_badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #298dff; color: #fff; }
.orb-card_tier { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); }
.orb-card_title { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: #fff; margin: 0 0 8px; line-height: 1; }
.orb-card_tag { color: var(--gray-300); font-size: 14px; line-height: 1.45; }
.orb-card_features { display: flex; flex-direction: column; gap: 9px; margin: 18px 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.orb-card_features li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,0.82); font-size: 14px; }
.orb-card_features li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: #298dff; margin-top: 6px; }
.orb-card_energy { margin-bottom: 20px; }
.orb-card_energy-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.6); margin-bottom: 6px; letter-spacing: 0.08em; }
.orb-card_energy-track { height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
.orb-card_energy-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #298dff, #8fcbff); transition: width 0.8s var(--cubic, cubic-bezier(.51,0,.08,1)); }
.orb-card_cta {
  display: inline-flex; align-items: center; gap: 9px; background: #298dff; color: #fff;
  padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background 0.3s ease, color 0.3s ease;
}
.orb-card_cta:hover { background: #fff; color: #000; }
.orb-card_cta svg { width: 13px; }

@media (max-width: 767px){
  .orbital-stage { width: 340px; height: 460px; }
  .orbital-ring.r1 { width: 320px; height: 320px; }
  .orbital-ring.r2 { display: none; }
  .core-disc { width: 110px; height: 110px; }
  .core-disc span { font-size: 26px; }
  .orb-ico { width: 52px; height: 52px; }
  .orbital-sys { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .core-disc { animation: none; }
}

/* ============================================================
   Rive timeline icons
   ============================================================ */
.tl-anim { position: relative; }
.tl-anim canvas.rive { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.tl-anim.has-rive .fallback { opacity: 0; }

/* ============================================================
   Rebounce footer effect
   ============================================================ */
.rebounce { position: relative; background: var(--black); overflow: hidden; height: 40vh; min-height: 320px; }
.rebounce svg { position: absolute; bottom: -2px; left: 0; width: 100%; height: auto; display: block; color: var(--blue); }
.rebounce .rb-block { transform-origin: bottom center; }

/* lottie generic holder */
.lottie-ico { display: inline-block; }

/* ============================================================
   Integrity — scroll-linked highlight / underline reveal
   ============================================================ */
.integrity-lines { color: #3c424c; }
.integrity-lines .tok {
  display: inline;
  color: rgba(255,255,255, calc(0.28 + var(--hl, 0) * 0.72));
  background-image: linear-gradient(#298dff, #298dff);
  background-repeat: no-repeat;
  background-position: 0 0.92em;
  background-size: calc(var(--hl, 0) * 100%) 0.10em;
  transition: color 0.12s linear, background-size 0.12s linear;
}
.integrity-lines .hl-text {
  border-radius: 5px; padding: 0 0.02em;
  transition: background-color 0.35s var(--cubic, cubic-bezier(.51,0,.08,1)), color 0.35s ease, padding 0.35s ease;
}
.integrity-lines .hl.lit .hl-text { background: #298dff; color: #fff; padding: 0.02em 0.16em; }
.integrity-lines .hl.lit .hl-ico { width: 64px; margin-right: 12px; }
@media (max-width: 767px){ .integrity-lines .hl.lit .hl-ico { width: 44px; } }

/* ============================================================
   Timeline v2 — pinned sequential reveal with travelling marker
   ============================================================ */
.tl2 { position: relative; height: 560vh; }
.tl2-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.tl2-rail {
  position: absolute; top: 12%; bottom: 12%; left: 50%; width: 2px; transform: translateX(-50%);
  background-image: linear-gradient(#4b515b 0 2px, transparent 2px 12px);
  background-size: 2px 12px; background-repeat: repeat-y;
}
.tl2-rail_fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, #ffffff, #298dff);
  box-shadow: 0 0 14px rgba(41,141,255,0.5);
}
.tl2-marker {
  position: absolute; left: 50%; top: 0%; width: 14px; height: 14px; background: #fff; z-index: 4;
  transform: translate(-50%, -50%); box-shadow: 0 0 22px rgba(255,255,255,0.7);
}
.tl2-node {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: #298dff; z-index: 3;
  transform: translate(-50%, -50%); box-shadow: 0 0 16px rgba(41,141,255,0.8);
}
.tl2-stage { position: relative; width: min(1080px, 92vw); height: 100%; }
.tl2-card {
  position: absolute; top: 50%; width: min(440px, 40vw);
  border: 1.5px solid #343940; background: #0b0f15; padding: 22px; border-radius: 4px;
  opacity: 0; pointer-events: none;
  transform: translateY(-50%) translateX(var(--enter, 40px)) scale(0.96);
  transition: opacity 0.55s cubic-bezier(.51,0,.08,1), transform 0.55s cubic-bezier(.51,0,.08,1);
}
.tl2-card[data-side="right"] { left: calc(50% + 72px); --enter: 50px; }
.tl2-card[data-side="left"]  { right: calc(50% + 72px); --enter: -50px; }
.tl2-card.active { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); pointer-events: auto; }
/* dashed connector bracket from rail to card */
.tl2-card::before {
  content: ""; position: absolute; top: 50%; width: 72px; height: 2px; transform: translateY(-50%);
  background-image: linear-gradient(90deg, #4b515b 0 2px, transparent 2px 8px); background-size: 8px 2px;
  opacity: 0; transition: opacity 0.5s ease 0.1s;
}
.tl2-card.active::before { opacity: 1; }
.tl2-card[data-side="right"]::before { left: -72px; }
.tl2-card[data-side="left"]::before { right: -72px; }
.tl2-card_head { display: flex; align-items: center; gap: 12px; }
.tl2-card_num { font-family: var(--font-mono); font-size: 13px; color: #fff; border: 1px solid #343940; padding: 2px 8px; }
.tl2-card_cat { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: #fff; letter-spacing: 0.04em; }
.tl2-anim { height: 150px; margin: 18px 0; border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, rgba(41,141,255,0.22), transparent 70%);
  display: grid; place-items: center; position: relative; }
.tl2-anim canvas.rive { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.tl2-anim .fallback { width: 55%; max-height: 80%; }
.tl2-card_brand { display: flex; align-items: center; gap: 10px; color: #a1a7b2; }
.tl2-card_brand .name { font-size: 18px; }
.tl2-counter {
  position: absolute; right: 9%; bottom: 13%; font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 76px); color: #fff; display: flex; align-items: baseline; line-height: 1;
}
.tl2-counter_total { color: #4b515b; font-size: 0.5em; }

/* static list fallback — mobile AND reduced-motion (cards must not overlap) */
@media (max-width: 767px){
  .tl2 { height: auto; }
  .tl2-sticky { position: static; height: auto; display: block; padding: 0 var(--pad); }
  .tl2-rail, .tl2-marker, .tl2-node, .tl2-counter { display: none; }
  .tl2-stage { width: 100%; height: auto; }
  .tl2-card { position: relative; top: auto; left: auto !important; right: auto !important;
    width: 100%; opacity: 1; transform: none !important; margin: 0 0 18px; pointer-events: auto; }
  .tl2-card::before { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .tl2 { height: auto; }
  .tl2-sticky { position: static; height: auto; display: block; padding: 40px var(--pad); }
  .tl2-rail, .tl2-marker, .tl2-node, .tl2-counter { display: none; }
  .tl2-stage { width: 100%; max-width: 900px; margin: 0 auto; height: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .tl2-card { position: relative; top: auto; left: auto !important; right: auto !important;
    width: 100%; opacity: 1; transform: none !important; margin: 0; pointer-events: auto; }
  .tl2-card::before { display: none; }
}

/* class-based reveal (IntersectionObserver driven) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.51,0,0.08,1), transform 0.7s cubic-bezier(0.51,0,0.08,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .line-inner { transform: none !important; }
  .seq-cover { clip-path: inset(0 0 0 0) !important; }
  .gradient-blur { display: none; }
  .reveal { transition: none; }
}

/* ============================================================
   Hero — white glow from bottom corners + fade to black
   ============================================================ */
.hero { background: #05080d; }
.hero-bg {
  background:
    radial-gradient(58% 46% at 8% 88%, rgba(255,255,255,0.92) 0%, rgba(195,218,255,0.5) 23%, rgba(41,141,255,0.16) 46%, transparent 60%),
    radial-gradient(58% 46% at 92% 88%, rgba(255,255,255,0.92) 0%, rgba(195,218,255,0.5) 23%, rgba(41,141,255,0.16) 46%, transparent 60%),
    radial-gradient(115% 72% at 50% 96%, rgba(41,141,255,0.82) 0%, rgba(41,141,255,0.28) 38%, transparent 66%),
    linear-gradient(180deg, #03070e 0%, #07173a 40%, #0e3f95 78%, #0a2a66 100%);
}
.hero .ball { display: none; }   /* gradient replaces the animated balls */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
  background: linear-gradient(180deg, transparent 0%, #05080d 94%);
  z-index: 1; pointer-events: none;
}

/* ============================================================
   Orbital — hypnotic moving background
   ============================================================ */
.orbital-aurora {
  position: absolute; left: 50%; top: 54%; width: min(115vw, 1100px); height: min(115vw, 1100px);
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(41,141,255,0) 0deg,
    rgba(41,141,255,0.28) 70deg,
    rgba(120,180,255,0.05) 150deg,
    rgba(41,141,255,0.30) 250deg,
    rgba(92,169,255,0.08) 320deg,
    rgba(41,141,255,0) 360deg);
  filter: blur(90px); opacity: 0.7;
  animation: auroraSpin 26s linear infinite;
}
@keyframes auroraSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* second softer counter-rotating glow for depth */
.orbital-aurora::after {
  content: ""; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(41,141,255,0.18), transparent 62%);
  animation: auroraBreathe 9s ease-in-out infinite;
}
@keyframes auroraBreathe { 0%,100% { transform: scale(0.92); opacity: 0.6; } 50% { transform: scale(1.12); opacity: 1; } }

/* slowly rotating dashed orbit rings (radar / hypnotic) */
.orbital-ring.r1 { animation: ringSpin 55s linear infinite; }
.orbital-ring.r2 { animation: ringSpin 80s linear infinite reverse; }
@keyframes ringSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .orbital-aurora, .orbital-ring.r1, .orbital-ring.r2, .orbital-aurora::after { animation: none; }
}

/* PLANES core wording + invite-to-click node pulse */
.core-disc span { font-size: 27px !important; letter-spacing: 0.02em; }
.orb-ico { position: relative; }
.orb-ico::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid rgba(41,141,255,0.55); pointer-events: none;
  animation: nodePing 2.8s cubic-bezier(0,0,0.2,1) infinite;
}
.orb-node.active .orb-ico::after, .orb-node:hover .orb-ico::after { display: none; }
@keyframes nodePing { 0% { transform: scale(1); opacity: 0.6; } 80%,100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){ .orb-ico::after { animation: none; opacity: 0; } }

/* ============================================================
   Contact section (replaces "Stay in the loop")
   ============================================================ */
.contact { position: relative; background: var(--black); padding: clamp(90px,14vh,180px) 0; overflow: hidden; }
.contact-glow {
  position: absolute; left: 50%; top: 30%; width: min(80vw, 760px); height: min(80vw, 760px);
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(41,141,255,0.16), transparent 64%); filter: blur(40px);
  animation: auroraBreathe 10s ease-in-out infinite;
}
.contact .container { position: relative; z-index: 1; }
.contact-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gray-300); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-eyebrow .blue-cube { width: 12px; height: 12px; }
.contact h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px,9vw,108px); line-height: 0.98; margin: 22px 0 0; }
.contact h2 .accent { color: var(--blue); }
.contact-sub { color: var(--gray-300); font-size: clamp(16px,2vw,20px); max-width: 46ch; margin-top: 24px; line-height: 1.5; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; margin-top: 64px; align-items: start; }
.contact-mail {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-size: clamp(26px,4.4vw,56px); color: #fff; line-height: 1;
}
.contact-mail svg { width: 0.62em; flex: 0 0 auto; color: var(--blue); transition: transform 0.4s var(--cubic, cubic-bezier(.51,0,.08,1)); }
.contact-mail:hover { color: var(--blue-soft); }
.contact-mail:hover svg { transform: translate(6px,-6px); }
.contact-rows { display: flex; flex-direction: column; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px dashed var(--gray-600); }
.contact-row:first-child { border-top: none; }
.contact-row .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); }
.contact-row .v { font-size: 18px; color: #fff; transition: color 0.3s ease; }
a.contact-row:hover .v { color: var(--blue); }
.contact-socials { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.contact-social {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 14px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.contact-social:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.contact-social svg { width: 16px; height: 16px; }
.contact-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; background: var(--blue); color: #fff;
  padding: 15px 28px; border-radius: 999px; font-size: 16px; font-weight: 500; transition: background 0.3s ease, color 0.3s ease;
}
.contact-cta:hover { background: #fff; color: #000; }
.contact-cta svg { width: 14px; }
@media (max-width: 767px){
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-mail { font-size: 28px; }
}

/* ============================================================
   GAJU STUDIO — brand layer
   ============================================================ */
::selection { background: #298dff; color: #fff; }

/* banner */
.pencil { gap: 10px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.pencil-star { color: var(--blue-soft); }

/* nav wordmark + links */
.nav-logo.wordmark {
  font-family: var(--font-display); font-size: 21px; color: #fff; letter-spacing: 0.01em; line-height: 1;
}
.nav-logo.wordmark .reg { font-size: 0.55em; vertical-align: super; color: var(--blue); margin-left: 2px; }
.nav-menu .nav-toggle { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }

/* hero badge + scroll hint */
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 30px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.hero-scrollhint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; color: rgba(255,255,255,0.65);
}
.hero-scrollhint .line { width: 1px; height: 44px; background: linear-gradient(#fff, transparent); animation: scrollLine 2.2s cubic-bezier(.51,0,.08,1) infinite; }
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* typographic ticker */
.marquee-section.ticker { padding: clamp(40px,7vh,80px) 0; border-top: 1px dashed var(--gray-600); border-bottom: 1px dashed var(--gray-600); }
.ticker .marquee-track { align-items: center; gap: 56px; }
.marquee-item.txt {
  height: auto; font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 76px); line-height: 1; color: #fff; white-space: nowrap;
}
.marquee-item.star { height: auto; width: clamp(20px,2.4vw,34px); color: var(--blue); flex: 0 0 auto; }
.marquee-item.star svg { width: 100%; animation: starSpin 9s linear infinite; }
@keyframes starSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){ .marquee-item.star svg, .pulse-dot, .hero-scrollhint .line { animation: none; } }

/* stats */
.stats { background: var(--black); border-top: 1px dashed var(--gray-600); border-bottom: 1px dashed var(--gray-600); padding: clamp(56px,9vh,100px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 10px 16px; border-left: 1px dashed var(--gray-600); }
.stat:first-child { border-left: none; }
.stat-num { font-family: var(--font-display); font-size: clamp(40px,6vw,80px); line-height: 1; color: #fff; }
.stat-num span { color: inherit; }
.stat-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); }
@media (max-width: 767px){
  .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .stat:nth-child(3) { border-left: none; }
}

/* wordmark scrub */
.wordmark-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.wordmark-stage {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-size: clamp(80px, 18vw, 280px);
  line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap;
}
.wordmark-base { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.22); }
.seq-cover.wm { position: absolute; inset: 0; }
.seq-cover.wm span { display: block; }
.wm-final {
  background: linear-gradient(180deg, #ffffff 20%, #8fcbff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.wordmark-caption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--gray-400); }

/* footer brand */
.footer-wordmark {
  font-family: var(--font-display); font-size: clamp(54px, 11vw, 170px);
  line-height: 0.95; letter-spacing: -0.02em; margin-bottom: clamp(40px,7vh,80px);
  background: linear-gradient(180deg, #ffffff 10%, #298dff 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-wordmark .reg { font-size: 0.35em; vertical-align: super; }
.footer-grid { grid-template-columns: repeat(4, 1fr); }
.footer-muted { font-size: 14px; color: var(--gray-400); }

/* custom cursor ring */
.cursor-ring {
  position: fixed; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(41,141,255,0.8); pointer-events: none; z-index: 9999;
  margin: -17px 0 0 -17px;
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.cursor-ring.on { opacity: 1; }
.cursor-ring.big { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: rgba(255,255,255,0.9); }
.cursor-dot {
  position: fixed; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); pointer-events: none; z-index: 9999; margin: -3px 0 0 -3px;
  opacity: 0; transition: opacity 0.3s ease;
}
.cursor-dot.on { opacity: 1; }
@media (hover: none), (max-width: 767px) { .cursor-ring, .cursor-dot { display: none; } }

/* ============================================================
   V2 — hero title fix + interactive letters
   ============================================================ */
.hero-stage { z-index: 8; }            /* title above blur layers = always crisp */
.hero-h1.base { display: none; }       /* kill the ghost layer that caused the fade */
.hero-h1.sharp {
  /* Solid, always-visible fill so the title never disappears at rest. */
  background: none;
  color: #eaf2ff; -webkit-text-fill-color: #eaf2ff;
  cursor: default;
  animation: titleGlow 5.5s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 26px rgba(120,170,255,0.12); }
  50%      { text-shadow: 0 0 42px rgba(120,170,255,0.30); }
}
.hero-h1.sharp .ch {
  display: inline-block; will-change: transform;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              -webkit-text-fill-color 0.25s ease, text-shadow 0.25s ease;
}
.hero-h1.sharp .ch.hit {
  -webkit-text-fill-color: #298dff;
  transform: translateY(-0.14em) scale(1.12) rotate(-5deg);
  text-shadow: 0 0 34px rgba(41,141,255,0.8);
}
.hero-h1.sharp .ch.hit2 {
  -webkit-text-fill-color: #7db8ff;
  transform: translateY(-0.07em) scale(1.05);
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .hero-h1.sharp { animation: none; background: none; color: #fff; -webkit-text-fill-color: #fff; }
}

/* ============================================================
   V2 — Proceso: horizontal pinned journey
   ============================================================ */
.proc { position: relative; height: 520vh; }
.proc-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.proc-beam {
  position: absolute; top: 50%; left: 0; width: 60vw; height: 60vh;
  transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(41,141,255,0.14), transparent 70%);
  filter: blur(30px);
  animation: beamDrift 14s ease-in-out infinite alternate;
}
@keyframes beamDrift { from { transform: translate(-10%, -50%); } to { transform: translate(80vw, -50%) translateX(-100%); } }
.proc-track {
  display: flex; gap: clamp(20px, 3vw, 44px); align-items: stretch;
  padding-left: max(calc(50vw - 250px), 6vw);
  padding-right: max(calc(50vw - 250px), 6vw);
  will-change: transform;
}
.proc-card {
  position: relative; flex: 0 0 min(500px, 80vw);
  border: 1px solid #2b313a; border-radius: 18px;
  background: linear-gradient(180deg, #0c1118, #090d12);
  padding: clamp(24px, 3vw, 38px); overflow: hidden;
  opacity: 0.4; transform: scale(0.93);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.51,0,.08,1),
              border-color 0.5s ease, box-shadow 0.5s ease;
}
.proc-card.active {
  opacity: 1; transform: scale(1); border-color: rgba(41,141,255,0.65);
  box-shadow: 0 30px 90px rgba(41,141,255,0.16), inset 0 0 70px rgba(41,141,255,0.05);
}
.proc-card_idx {
  position: absolute; top: -18px; right: 6px; line-height: 1;
  font-family: var(--font-display); font-size: clamp(110px, 12vw, 170px);
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.10);
  pointer-events: none; transition: -webkit-text-stroke-color 0.5s ease;
}
.proc-card.active .proc-card_idx { -webkit-text-stroke-color: rgba(41,141,255,0.45); }
.proc-card_cat {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft);
  border: 1px solid rgba(41,141,255,0.3); padding: 5px 10px; margin-bottom: 16px;
}
.proc-card_title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); color: #fff; margin: 0 0 18px; line-height: 1; }
.proc-card_anim {
  position: relative; height: clamp(130px, 16vh, 180px); border-radius: 10px; margin-bottom: 18px;
  background: radial-gradient(circle at 50% 40%, rgba(41,141,255,0.20), transparent 70%);
  display: grid; place-items: center;
}
.proc-card_anim canvas.rive { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.proc-card_anim .fallback { width: 52px; }
.proc-card_desc { color: var(--gray-300); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; margin-bottom: 18px; max-width: 44ch; }
.proc-card_next { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); }
.proc-card.active .proc-card_next { color: var(--blue-soft); }
.proc-progress {
  position: absolute; bottom: 7.5%; left: 50%; transform: translateX(-50%);
  width: min(420px, 56vw); height: 2px; background: #2b313a; border-radius: 999px;
}
.proc-progress_fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #298dff, #8fcbff); border-radius: 999px;
  box-shadow: 0 0 12px rgba(41,141,255,0.8);
}
.proc-counter {
  position: absolute; right: 7%; bottom: 6%; line-height: 1;
  font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 60px); color: #fff;
}
.proc-counter_total { color: #4b515b; font-size: 0.55em; }
.proc-hint {
  position: absolute; left: 7%; bottom: 7%;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; color: var(--gray-400);
}
/* static fallback: mobile & reduced motion */
.proc.static { height: auto; }
.proc.static .proc-sticky { position: static; height: auto; display: block; padding: 20px 0 40px; overflow: visible; }
.proc.static .proc-track { flex-wrap: wrap; justify-content: center; transform: none !important; padding: 0 var(--pad); }
.proc.static .proc-card { opacity: 1; transform: none; }
.proc.static .proc-progress, .proc.static .proc-counter, .proc.static .proc-hint, .proc.static .proc-beam { display: none; }
@media (max-width: 767px){
  .proc { height: auto; }
  .proc-sticky { position: static; height: auto; display: block; padding: 10px 0 30px; }
  .proc-track { flex-direction: column; padding: 0 var(--pad); transform: none !important; }
  .proc-card { flex: none; width: 100%; opacity: 1; transform: none; }
  .proc-progress, .proc-counter, .proc-hint, .proc-beam { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){ .proc-beam { animation: none; } }

/* ============================================================
   V2 — orbital: elliptical 3D orbit + ripples + parallax
   ============================================================ */
.orbital-ring.r1 { animation: none; width: 480px; height: 220px; opacity: 0.55; }
@media (max-width: 767px){ .orbital-ring.r1 { width: 292px; height: 146px; } }
.orbital-ripples { position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none; }
.orbital-ripples span {
  position: absolute; left: 0; top: 0; width: 340px; height: 158px;
  margin: -79px 0 0 -170px; border-radius: 50%;
  border: 1px solid rgba(92,169,255,0.45);
  animation: rippleOut 5.4s linear infinite;
}
.orbital-ripples span:nth-child(2) { animation-delay: 1.8s; }
.orbital-ripples span:nth-child(3) { animation-delay: 3.6s; }
@keyframes rippleOut {
  0% { transform: scale(0.35); opacity: 0; }
  12% { opacity: 0.65; }
  100% { transform: scale(3.05); opacity: 0; }
}
.orbital-grid, .orbital-paths {
  transform: translate3d(var(--ppx, 0px), var(--ppy, 0px), 0);
  transition: transform 1s cubic-bezier(0.2, 0.6, 0.25, 1);
}
@media (max-width: 767px){
  .orbital-ripples span { width: 220px; height: 104px; margin: -52px 0 0 -110px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .orbital-ripples { display: none; }
}

/* ============================================================
   V3 — hero glow rebuilt (no letter-shaped smudge under "j")
   ============================================================ */
.hero-headwrap::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 115%; height: 180%; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(215,232,255,0.30) 0%, rgba(140,185,255,0.10) 55%, transparent 78%);
  filter: blur(12px); pointer-events: none; border-radius: 50%;
}

/* ============================================================
   V3 — Planes: drifting lights + rising particles backdrop
   ============================================================ */
.orbital-drift { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orbital-drift i { position: absolute; border-radius: 50%; filter: blur(70px); display: block; }
.orbital-drift i:nth-child(1) {
  width: 46vw; height: 46vw; left: -18%; top: -14%;
  background: radial-gradient(circle, rgba(41,141,255,0.20), transparent 65%);
  animation: driftA 24s ease-in-out infinite alternate;
}
.orbital-drift i:nth-child(2) {
  width: 38vw; height: 38vw; right: -16%; bottom: -16%;
  background: radial-gradient(circle, rgba(143,203,255,0.14), transparent 65%);
  animation: driftB 30s ease-in-out infinite alternate;
}
.orbital-drift i:nth-child(3) {
  width: 24vw; height: 24vw; left: 30%; bottom: -20%;
  background: radial-gradient(circle, rgba(41,141,255,0.12), transparent 65%);
  animation: driftC 18s ease-in-out infinite alternate;
}
@keyframes driftA { to { transform: translate(64vw, 34vh); } }
@keyframes driftB { to { transform: translate(-58vw, -30vh); } }
@keyframes driftC { to { transform: translate(20vw, -52vh); } }

.orbital-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orbital-particles span {
  position: absolute; bottom: -2%; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #8fcbff; opacity: 0;
  box-shadow: 0 0 8px rgba(143,203,255,0.9);
  animation: particleRise var(--d) linear infinite;
  animation-delay: var(--dl);
}
@keyframes particleRise {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 0.75; }
  85% { opacity: 0.25; }
  100% { transform: translateY(-108vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .orbital-drift, .orbital-particles { display: none; }
}

/* ============================================================
   V4 — Planes por servicio (tabs + pricing cards)
   ============================================================ */
.plans { background: var(--black); padding: clamp(80px,12vh,150px) 0; }
.plans-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; }
.plans-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px,6vw,72px); margin: 0; line-height: 1; }
.plans-sub { color: var(--gray-300); font-size: 18px; }
.plans-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.plans-tab {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gray-300); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.plans-tab:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.plans-tab.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan-card {
  position: relative; border: 1px solid #2b313a; border-radius: 16px; background: #0b0f15;
  padding: clamp(24px,2.4vw,34px); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.51,0,.08,1) calc(var(--d,0)*0.08s),
              transform 0.6s cubic-bezier(.51,0,.08,1) calc(var(--d,0)*0.08s),
              border-color 0.4s ease, box-shadow 0.4s ease;
}
.plans-grid.in .plan-card { opacity: 1; transform: translateY(0); }
.plan-card.featured { border-color: rgba(41,141,255,0.6); box-shadow: 0 24px 70px rgba(41,141,255,0.14); }
.plan-card:hover { border-color: rgba(41,141,255,0.55); box-shadow: 0 18px 50px rgba(41,141,255,0.12); }
.plan-tag {
  position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--blue);
  padding: 4px 9px; border-radius: 999px;
}
.plan-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,2.6vw,30px); color: #fff; margin: 0 0 6px; line-height: 1; }
.plan-line { color: var(--gray-300); font-size: 14px; line-height: 1.45; margin-bottom: 22px; min-height: 2.9em; }
.plan-price { font-family: var(--font-display); font-size: clamp(26px,3vw,38px); color: #fff; line-height: 1; margin-bottom: 4px; }
.plan-price small { font-family: var(--font-mono); font-size: 12px; color: var(--gray-400); letter-spacing: 0.05em; }
.plan-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 22px 0; }
.plan-feats { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.35; }
.plan-feats li svg { flex: 0 0 16px; width: 16px; margin-top: 1px; color: var(--blue); }
.plan-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: #fff;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.plan-cta svg { width: 13px; }
.plan-cta:hover { background: #fff; color: #000; border-color: #fff; }
.plan-card.featured .plan-cta { background: var(--blue); border-color: var(--blue); }
.plan-card.featured .plan-cta:hover { background: #fff; color: #000; border-color: #fff; }
@media (max-width: 991px){ .plans-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){ .plan-card { opacity: 1; transform: none; } }

/* ============================================================
   V4 — gallery hover video
   ============================================================ */
.slat-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease; z-index: 1;
}
.slat-vid:hover .slat-video { opacity: 1; }
.slat-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  color: #fff; font-size: 9px; padding-left: 2px;
  border: 1px solid rgba(255,255,255,0.25);
}
.slat:hover .slat-badge { background: var(--blue); border-color: var(--blue); }

/* ============================================================
   V5 — orbital card shows the 3 packages of each service
   ============================================================ */
.orb-card { width: min(420px, 92vw); max-height: 86vh; overflow-y: auto; }
.orb-card::-webkit-scrollbar { width: 0; }
.orb-card_tag { margin-bottom: 16px; }
.orb-card_plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ocp {
  position: relative; border: 1px solid #2b313a; border-radius: 12px;
  background: rgba(255,255,255,0.02); padding: 14px 16px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.ocp:hover { border-color: rgba(41,141,255,0.5); background: rgba(41,141,255,0.06); }
.ocp--featured { border-color: rgba(41,141,255,0.55); background: rgba(41,141,255,0.07); }
.ocp_tag {
  position: absolute; top: -8px; right: 12px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--blue);
  padding: 3px 8px; border-radius: 999px;
}
.ocp_top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ocp_name { font-family: var(--font-display); font-size: 19px; color: #fff; line-height: 1; }
.ocp_price { font-family: var(--font-mono); font-size: 11px; color: var(--blue-soft); white-space: nowrap; letter-spacing: 0.03em; }
.ocp_line { color: var(--gray-300); font-size: 12.5px; line-height: 1.4; margin-bottom: 10px; }
.ocp_feats { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ocp_feats li { position: relative; padding-left: 16px; color: rgba(255,255,255,0.8); font-size: 12.5px; line-height: 1.3; }
.ocp_feats li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--blue); }
.ocp_cta {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 8px 14px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ocp_cta:hover { background: #fff; color: #000; border-color: #fff; }
.ocp--featured .ocp_cta { background: var(--blue); border-color: var(--blue); }
.ocp--featured .ocp_cta:hover { background: #fff; color: #000; border-color: #fff; }
.orb-card_all {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-300);
  transition: color 0.3s ease;
}
.orb-card_all:hover { color: var(--blue); }
.orb-card_all svg { width: 12px; }

/* ============================================================
   V6 — Portfolio "Selected Works": header + filter pills
   ============================================================ */
.gallery-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-soft); }
.eb-line { width: 48px; height: 1px; background: var(--blue-soft); opacity: 0.55; }
.gallery-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.gallery-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px,5.6vw,76px); line-height: 1; margin: 0; letter-spacing: -0.01em; }
.gallery-title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--gray-300); letter-spacing: 0; }
.gallery-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--gray-400); white-space: nowrap; padding-bottom: 0.5em; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gfilter {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gray-300); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12);
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.gfilter:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.gfilter.active {
  color: #fff; border-color: rgba(41,141,255,0.7);
  background: linear-gradient(180deg, rgba(41,141,255,0.22), rgba(41,141,255,0.05));
  box-shadow: 0 0 22px rgba(41,141,255,0.35), inset 0 0 14px rgba(41,141,255,0.15);
}

/* rounder cards + more breathing room (match reference) */
.gallery-row { gap: 14px; }
.slat { border-radius: 18px; }
.slat.hidden { display: none; }

/* placeholder cards (CGI / Web — fill while you add real work) */
.slat-ph {
  filter: none !important; background: linear-gradient(160deg, #10151d, #080b10);
  border: 1px dashed rgba(255,255,255,0.16); display: grid; place-items: center; text-align: center;
}
.slat-ph:hover { filter: none !important; border-color: rgba(41,141,255,0.6); border-style: solid; }
.slat-ph_inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px; }
.slat-ph_plus { font-size: 42px; line-height: 1; font-weight: 200; color: var(--blue); }
.slat-ph_t { font-family: var(--font-display); font-size: 22px; color: #fff; }
.slat-ph_s { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); max-width: 20ch; line-height: 1.4; }
.slat-ph_mark { font-family: var(--font-display); font-size: clamp(22px,2.4vw,30px); line-height: 1; background: linear-gradient(180deg, #ffffff, #298dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slat-ph_mark sup { font-size: 0.5em; color: var(--blue); -webkit-text-fill-color: var(--blue); }
@media (max-width: 767px){
  .gallery-titlerow { align-items: flex-start; }
  .gallery-hint { white-space: normal; }
}

/* cursor click feedback (no transform — JS owns translate) */
.cursor-ring.down { background: rgba(41,141,255,0.18); border-color: #fff; }

/* ============================================================
   V7 — "Visual Excellence" display font + restructure tweaks
   ============================================================ */
.gallery-title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--gray-300); }
.gallery-title .ve {
  font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 800;
  color: #dbe4f5; letter-spacing: 0; padding-right: 0.04em;
}

/* ============================================================
   V7 — Contact: floating glass cards, energetic
   ============================================================ */
.contact { position: relative; min-height: 100vh; overflow: hidden; background: #05080d; display: flex; align-items: center; padding: clamp(80px,12vh,140px) 0; }
.contact-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask: radial-gradient(ellipse 90% 80% at 62% 50%, #000 25%, transparent 85%);
  mask: radial-gradient(ellipse 90% 80% at 62% 50%, #000 25%, transparent 85%);
}
.contact-ghost { position: absolute; right: -2%; bottom: -8%; font-family: var(--font-display); font-size: 40vw; line-height: 0.8; letter-spacing: -0.03em; color: rgba(255,255,255,0.02); pointer-events: none; }
.contact-orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.contact-orb.cool { width: 46vw; height: 46vw; left: -12%; top: -18%; background: radial-gradient(circle, rgba(41,141,255,0.22), transparent 65%); animation: ccDrift1 26s ease-in-out infinite alternate; }
.contact-orb.warm { width: 42vw; height: 42vw; right: -10%; bottom: -16%; background: radial-gradient(circle, rgba(255,138,60,0.20), rgba(255,90,40,0.05) 50%, transparent 72%); animation: ccDrift2 30s ease-in-out infinite alternate; }
@keyframes ccDrift1 { to { transform: translate(20vw, 14vh); } }
@keyframes ccDrift2 { to { transform: translate(-16vw, -10vh); } }

.contact-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.contact-main { max-width: 600px; }
.contact-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-300); margin-bottom: 24px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: pulseDot 2s ease-in-out infinite; }
.contact-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px,7vw,96px); line-height: 0.98; margin: 0; }
.contact-title .accent { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; background: linear-gradient(120deg, #7db8ff, #298dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-sub { color: var(--gray-300); font-size: clamp(15px,1.7vw,19px); line-height: 1.5; max-width: 42ch; margin-top: 24px; }
.contact-sub strong { color: #fff; font-weight: 500; }
.contact-mail { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; font-family: var(--font-display); font-size: clamp(22px,3vw,38px); color: #fff; line-height: 1; }
.contact-mail svg { width: 0.6em; color: var(--blue); transition: transform 0.4s var(--cubic, cubic-bezier(.51,0,.08,1)); }
.contact-mail:hover { color: var(--blue-soft); }
.contact-mail:hover svg { transform: translate(6px,-6px); }
.contact-chips { display: flex; gap: 12px; margin-top: 30px; }
.contact-chip { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.contact-chip svg { width: 18px; height: 18px; }
.contact-chip:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-3px); }

.contact-cards { position: relative; min-height: 440px; }
.cc {
  position: absolute; width: min(300px, 80%); padding: 22px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(32,43,60,0.55), rgba(12,17,24,0.5));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: #fff;
  transition: transform 0.45s var(--cubic, cubic-bezier(.51,0,.08,1)), border-color 0.4s ease, box-shadow 0.4s ease;
  animation: ccFloat 7s ease-in-out infinite;
}
.cc-1 { left: 2%;  top: 2%;     rotate: -5deg; animation-delay: 0s; }
.cc-2 { right: 0;  top: 27%;    rotate: 4deg;  z-index: 2; animation-delay: 1.2s; }
.cc-3 { left: 8%;  bottom: 2%;  rotate: -2deg; animation-delay: 2.4s; }
@keyframes ccFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.cc:hover { border-color: rgba(41,141,255,0.6); box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 32px rgba(41,141,255,0.28); transform: scale(1.03); }
.cc-dot { position: absolute; top: 16px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-soft); box-shadow: 0 0 8px var(--blue-soft); }
.cc-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); margin-bottom: 10px; }
.cc-ico svg { width: 20px; height: 20px; }
.cc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--gray-400); }
.cc-v { font-family: var(--font-display); font-size: 22px; color: #fff; line-height: 1; }
.cc-s { font-size: 13px; color: var(--gray-300); }

.contact-send {
  position: absolute; right: clamp(20px,5vw,64px); bottom: clamp(28px,7vh,70px); z-index: 3;
  display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px;
  background: #298dff; color: #fff; font-size: 16px; font-weight: 500;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: sendGlow 3s ease-in-out infinite;
}
.contact-send svg { width: 18px; height: 18px; }
.contact-send:hover { background: #fff; color: #000; transform: translateY(-3px); box-shadow: 0 0 60px rgba(41,141,255,0.8); }
@keyframes sendGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0 35px rgba(41,141,255,0.45); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 0 55px rgba(41,141,255,0.7); } }

@media (max-width: 991px){
  .contact-inner { grid-template-columns: 1fr; gap: 0; }
  .contact-cards { min-height: 0; display: flex; flex-direction: column; gap: 14px; margin-top: 38px; }
  .cc { position: relative; width: 100%; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; rotate: 0deg !important; animation: none; }
  .contact-send { position: static; margin: 34px auto 0; width: 100%; max-width: 360px; justify-content: center; }
  .contact-ghost { font-size: 62vw; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .contact-orb, .cc, .contact-send, .dot-live { animation: none; }
}

/* ============================================================
   V8 — Hero ink reveal (reactive glow trail)
   ============================================================ */
.hero-ink { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ============================================================
   V9 — Orbital WebGL shader nebula (deepest background layer)
   ============================================================ */
.orbital-shader {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
  opacity: 0.32;
  -webkit-mask: radial-gradient(ellipse 95% 90% at 50% 50%, #000 35%, transparent 90%);
  mask: radial-gradient(ellipse 95% 90% at 50% 50%, #000 35%, transparent 90%);
}

/* V10 — manifesto stacked 3-line layout */
.integrity-lines.im-stack { line-height: 1.32; }
.integrity-lines.im-stack br { line-height: 1.6; }

/* ============================================================
   V11 — Manifesto redesign (editorial hierarchy, no icon pills)
   ============================================================ */
.manifesto { margin-top: 34px; max-width: 940px; }
.mf-lead {
  margin: 0; max-width: 26ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 2.5vw, 32px); line-height: 1.4;
  color: var(--gray-400);
}
.mf-mark { position: relative; color: #fff; white-space: nowrap; }
.mf-mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s cubic-bezier(.51,0,.08,1) .45s;
}
.mf-lead.in .mf-mark::after { transform: scaleX(1); }

.mf-roles {
  margin: 18px 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(27px, 4.2vw, 54px); line-height: 1.12; letter-spacing: -0.01em;
  color: #fff;
  transition-delay: .1s;
}
.mf-roles span {
  color: #fff; padding-bottom: 3px; white-space: nowrap;
  background: linear-gradient(var(--blue-light), var(--blue-light)) no-repeat 0 100%;
  background-size: 0 2px;
  transition: background-size .7s cubic-bezier(.51,0,.08,1);
}
.mf-roles.in span { background-size: 100% 2px; }
.mf-roles.in span:nth-of-type(1) { transition-delay: .30s; }
.mf-roles.in span:nth-of-type(2) { transition-delay: .45s; }
.mf-roles.in span:nth-of-type(3) { transition-delay: .60s; }

.mf-punch {
  margin: 26px 0 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 7vw, 84px); line-height: 1.0; letter-spacing: -0.02em;
  color: #fff;
  transition-delay: .2s;
}
.mf-punch .mf-accent {
  font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600;
  background: linear-gradient(100deg, #ffffff 0%, var(--blue-light) 55%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 600px){ .mf-roles span { white-space: normal; } }

/* ============================================================
   V12 — Manifesto scroll-scrubbed reveal (words light + underline)
   Driven by --r (0→1) set per word via ScrollTrigger scrub.
   Fallback (no .scrub class): everything fully visible.
   ============================================================ */
.manifesto.scrub .mf-w { opacity: calc(0.16 + var(--r, 0) * 0.84); }
.manifesto.scrub .mf-lead .mf-mark { opacity: calc(0.16 + var(--r, 0) * 0.84); }
.manifesto.scrub .mf-lead .mf-mark::after {
  transition: none; transform: scaleX(var(--r, 0));
}
.manifesto.scrub .mf-roles span {
  opacity: calc(0.30 + var(--r, 0) * 0.70);
  transition: none; background-size: calc(var(--r, 0) * 100%) 2px;
}
.manifesto.scrub .mf-punch .mf-accent { opacity: calc(0.16 + var(--r, 0) * 0.84); }

/* ============================================================
   V13 — Contact: shader-lines backdrop + liquid-neon button
   ============================================================ */
.contact-shader {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.6;
  -webkit-mask: radial-gradient(ellipse 115% 100% at 55% 50%, #000 32%, transparent 90%);
  mask: radial-gradient(ellipse 115% 100% at 55% 50%, #000 32%, transparent 90%);
}

/* liquid-glass + neon button (mix of both refs) */
.contact-send.liquid-neon {
  background: linear-gradient(to top, rgba(41,141,255,0.52), rgba(41,141,255,0.30));
  -webkit-backdrop-filter: blur(5px) url(#container-glass);
  backdrop-filter: blur(5px) url(#container-glass);
  border: 1px solid rgba(255,255,255,0.20);
  overflow: visible; isolation: isolate;
}
.contact-send.liquid-neon > * { position: relative; z-index: 2; }
.contact-send.liquid-neon::before {
  content: ""; position: absolute; z-index: 1; left: 12%; right: 12%; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
  opacity: 0; filter: blur(0.4px); transition: opacity 0.5s ease;
}
.contact-send.liquid-neon::after {
  content: ""; position: absolute; z-index: 1; left: 12%; right: 12%; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
  opacity: 0.4; transition: opacity 0.5s ease;
}
.contact-send.liquid-neon:hover::before { opacity: 1; }
.contact-send.liquid-neon:hover::after { opacity: 0.9; }
.contact-send.liquid-neon:hover {
  background: linear-gradient(to top, rgba(70,155,255,0.62), rgba(70,155,255,0.42));
  color: #fff; transform: translateY(-3px) scale(1.05);
  box-shadow: inset 1px 1px 1px -0.5px rgba(255,255,255,0.72), inset -1px -1px 1px -0.5px rgba(255,255,255,0.5), 0 0 64px rgba(41,141,255,0.85);
}
/* glass bezel + pulsing blue glow (overrides the old plain glow) */
@keyframes sendGlow {
  0%, 100% { box-shadow: inset 1px 1px 1px -0.5px rgba(255,255,255,0.60), inset -1px -1px 1px -0.5px rgba(255,255,255,0.45), inset 0 0 8px 3px rgba(255,255,255,0.06), 0 0 30px rgba(41,141,255,0.40); }
  50%      { box-shadow: inset 1px 1px 1px -0.5px rgba(255,255,255,0.72), inset -1px -1px 1px -0.5px rgba(255,255,255,0.50), inset 0 0 8px 3px rgba(255,255,255,0.09), 0 0 52px rgba(41,141,255,0.66); }
}

/* V14 — plan card maintenance note */
.plan-note { font-size: 12px; line-height: 1.35; color: var(--gray-400); margin: 8px 0 0; }
.plan-card.featured .plan-note { color: rgba(255,255,255,0.6); }

/* V15 — plans clarifier footnote (domain/hosting/maintenance) */
.plans-foot { max-width: 780px; margin: 36px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--gray-400); }
.plans-foot strong { color: rgba(255,255,255,0.82); font-weight: 600; }

/* ============================================================
   V16 — Vídeo de Producto: "at capacity / waitlist" panel
   ============================================================ */
.plans-grid.single { grid-template-columns: 1fr; max-width: 660px; margin-left: auto; margin-right: auto; }
.vid-panel {
  position: relative; text-align: center; padding: 44px clamp(24px,4vw,42px);
  border-radius: 22px; border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(160deg, rgba(24,30,44,0.72), rgba(10,14,20,0.6));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.vp-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #f3b14e; background: rgba(243,177,78,0.08); border: 1px solid rgba(243,177,78,0.28);
  padding: 6px 13px; border-radius: 999px;
}
.vp-dot { width: 7px; height: 7px; border-radius: 50%; background: #f3b14e; box-shadow: 0 0 9px #f3b14e; animation: vpPulse 2s ease-in-out infinite; }
@keyframes vpPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.vp-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px,3.4vw,36px); margin: 18px 0 0; color: #fff; letter-spacing: -0.01em; }
.vp-lead { font-size: clamp(15px,1.8vw,18px); color: var(--gray-300); margin: 10px 0 0; }
.vp-lead strong { color: #fff; }
.vp-text { font-size: 14px; line-height: 1.6; color: var(--gray-400); margin: 16px auto 0; max-width: 48ch; }
.vp-feats { list-style: none; padding: 0; margin: 24px 0 0; display: inline-flex; flex-direction: column; gap: 11px; text-align: left; }
.vp-feats li { position: relative; padding-left: 24px; color: rgba(255,255,255,0.86); font-size: 15px; }
.vp-feats li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 9px rgba(41,141,255,0.6); }
.vid-panel .vp-cta { display: inline-flex; margin: 28px auto 0; }
.vp-note { font-size: 12.5px; line-height: 1.5; color: var(--gray-500); margin: 16px auto 0; max-width: 42ch; }

/* V17 — portfolio video slats (reproducen al pasar el ratón) */
.slat .slat-img { position: relative; }
.slat-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; }
.slat-vid:hover .slat-video { opacity: 1; }
.slat-vid .slat-img::after {
  content: "\25B6"; position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 10px; color: #fff; background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.4); border-radius: 50%;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 0.3s ease; pointer-events: none;
}
.slat-vid:hover .slat-img::after { opacity: 0; }

/* ============================================================
   V18 — Audiovisual collections (accordion + dark-fade reveal)
   ============================================================ */
.collections { padding: clamp(48px,8vh,100px) 0; background: var(--black); }
.col-acc { margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.10); }
.col-item { border-bottom: 1px solid rgba(255,255,255,0.10); }
.col-head {
  width: 100%; display: flex; align-items: center; gap: clamp(16px,3vw,40px);
  padding: clamp(22px,3vw,36px) 4px; background: none; border: 0; cursor: pointer; text-align: left; color: #fff;
}
.col-num { font-family: var(--font-mono); font-size: 13px; color: var(--gray-400); flex: 0 0 auto; width: 26px; }
.col-titles { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
.col-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,4.6vw,52px); line-height: 1; letter-spacing: -0.01em; transition: color 0.3s ease; }
.col-desc { font-size: clamp(13px,1.5vw,16px); color: var(--gray-400); max-width: 54ch; line-height: 1.45; }
.col-count { font-family: var(--font-mono); font-size: 12px; color: var(--gray-500); flex: 0 0 auto; }
.col-head:hover .col-name { color: var(--blue-light); }
.col-toggle { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
.col-toggle i { position: absolute; background: #fff; transition: transform 0.45s var(--cubic, cubic-bezier(.51,0,.08,1)), opacity 0.45s ease; }
.col-toggle i:nth-child(1) { left: 0; top: 10px; width: 22px; height: 2px; }
.col-toggle i:nth-child(2) { left: 10px; top: 0; width: 2px; height: 22px; }
.col-item.open .col-toggle i:nth-child(2) { transform: scaleY(0); opacity: 0; }
.col-item.open .col-name { color: var(--blue-light); }

.col-body { max-height: 0; overflow: hidden; transition: max-height 0.65s var(--cubic, cubic-bezier(.51,0,.08,1)); }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; padding: 6px 0 38px; }
.col-shot { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 11px; cursor: pointer; }
.col-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.5) contrast(1.02) saturate(0.95);
  transform: scale(1.01);
  transition: transform 0.7s var(--cubic, cubic-bezier(.51,0,.08,1)), filter 0.6s ease;
}
.col-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 120% at 50% 38%, transparent 28%, rgba(0,0,0,0.55) 100%),
              linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.12));
  transition: opacity 0.55s ease;
}
.col-shot:hover img { filter: brightness(1) contrast(1.04) saturate(1.05); transform: scale(1.06); }
.col-shot:hover::after { opacity: 0; }
@media (max-width: 600px){ .col-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   V19 — Audiovisual collections as cover-banner accordion
   ============================================================ */
.av-collections { display: block; padding-top: 8px; }
.av-collections .col-acc { margin-top: 8px; border: 0; }
.av-collections .col-item { border: 0; margin-bottom: 14px; border-radius: 16px; overflow: hidden; background: #0a0e14; }
.av-collections .col-head {
  position: relative; min-height: clamp(98px,13vw,156px); overflow: hidden;
  padding: clamp(20px,3vw,34px) clamp(20px,3.5vw,44px);
}
.col-cover { position: absolute; inset: 0; z-index: 0; }
.col-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.34) saturate(0.9); transform: scale(1.03);
  transition: filter 0.6s ease, transform 0.9s var(--cubic, cubic-bezier(.51,0,.08,1));
}
.av-collections .col-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(5,8,13,0.9) 0%, rgba(5,8,13,0.5) 60%, rgba(5,8,13,0.78) 100%);
}
.av-collections .col-head > *:not(.col-cover) { position: relative; z-index: 2; }
.av-collections .col-head:hover .col-cover img { filter: brightness(0.52) saturate(1.05); transform: scale(1.07); }
.av-collections .col-item.open .col-cover img { filter: brightness(0.42); }
.av-collections .col-body { background: #0a0e14; }
.av-collections .col-grid { padding: 16px clamp(14px,2.5vw,28px) 30px; }

/* ============================================================
   V20 — Mobile polish (≤767px). La versión de escritorio NO se toca.
   ============================================================ */
@media (max-width: 767px) {
  /* ---- HERO ---- */
  .hero-h1.sharp { font-size: clamp(40px, 13.5vw, 64px); letter-spacing: -0.02em; white-space: nowrap; }
  .hero-sub { font-size: 16px; max-width: 26ch; }

  /* ---- ORBITAL: quitar texto que se solapa + encoger ---- */
  .orbital-sys, .orbital-coords, .core-status { display: none; }
  .orbital-head { top: 6%; }
  .orbital-head h2 { font-size: clamp(30px, 9vw, 44px); }
  .orb-ico { width: 48px; height: 48px; }
  .orb-ico svg { width: 19px; height: 19px; }
  .orb-label { font-size: 10px; padding: 4px 9px; letter-spacing: 0.08em; }
  .core-disc span { font-size: 26px; }

  /* ---- PLANES: tarjetas compactas (sin perder info) ---- */
  .plans-head h2 { font-size: clamp(26px, 8vw, 38px); line-height: 1.06; }
  .plans-sub { font-size: 14px; }
  .plans-tabs { gap: 8px; }
  .plans-tab { font-size: 11px; padding: 9px 15px; letter-spacing: 0.1em; }
  .plan-card { padding: 20px 18px; }
  .plan-name { font-size: 22px; }
  .plan-line { font-size: 13px; margin-top: 4px; }
  .plan-price { font-size: 31px; }
  .plan-price small { font-size: 13px; }
  .plan-note { font-size: 11px; line-height: 1.4; margin-top: 6px; }
  .plan-divider { margin: 13px 0; }
  .plan-feats { gap: 8px; }
  .plan-feats li { font-size: 12.5px; gap: 8px; }
  .plan-feats li svg { width: 15px; height: 15px; }
  .plan-cta { margin-top: 16px; }

  /* ---- PORTFOLIO: cabeceras de colección más pequeñas ---- */
  .gallery-title { font-size: clamp(30px, 8.5vw, 44px); }
  .gallery-hint { font-size: 11px; }
  .av-collections .col-head { min-height: 92px; padding: 16px 16px; }
  .av-collections .col-name { font-size: clamp(21px, 6.4vw, 28px); }
  .av-collections .col-desc { font-size: 12px; max-width: 30ch; }
  .av-collections .col-num, .av-collections .col-count { display: none; }
  .col-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ---- CONTACTO: rehecho para móvil (apilado y limpio) ---- */
  .contact { display: block !important; min-height: 0 !important; padding: 64px 0; }
  .contact-title { font-size: clamp(38px, 11vw, 54px); line-height: 1.04; }
  .contact-sub { font-size: 15px; }
  .contact-mail { font-size: clamp(19px, 6vw, 26px); }
  .contact-inner { grid-template-columns: 1fr !important; gap: 0 !important; }
  .contact-cards { position: static !important; min-height: 0 !important; display: flex !important;
    flex-direction: column !important; gap: 12px !important; margin-top: 26px !important; perspective: none !important; }
  .cc { position: static !important; width: 100% !important; left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important; rotate: 0deg !important; transform: none !important; animation: none !important; }
  .contact-send { position: static !important; margin: 26px 0 0 !important; width: 100% !important;
    max-width: none !important; justify-content: center !important; animation: none !important;
    background: #298dff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: 0 0 28px rgba(41,141,255,0.45) !important; }
  .contact-send::before, .contact-send::after { display: none !important; }
  .contact-shader { opacity: 0.20; }
  .contact-ghost { display: none; }
}