*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #1A1A1A;
  --ink-2: #232326;
  --char: #3b3b40;
  --stone: #505057;
  --ash: #6b6b72;
  --fog: #D3D6DA;
  --mist: #E6E6E9;
  --paper: #F4F4F5;
  --paper-2: #ECECEE;
  --paper-3: #DCDCDF;
  --white: #FFFFFF;
  --accent: #3b3b40;        /* CURI dark slate — used for accents & hovers */
  --accent-2: #1A1A1A;
  --accent-3: #69686f;      /* CURI mid-gray for subtle highlights */
  --line: rgba(26,26,26,0.12);
  --line-soft: rgba(26,26,26,0.06);
  --line-strong: rgba(26,26,26,0.22);

  --fh: 'IBM Plex Sans', system-ui, sans-serif;
  --fb: 'Inter', system-ui, sans-serif;
  --fm: 'JetBrains Mono', monospace;

  --max: 1280px;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { background: var(--paper); color: var(--ink); font-family: var(--fb); font-size: 14.5px; line-height: 1.65; overflow-x: hidden; -ms-overflow-style: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4 { font-family: var(--fh); letter-spacing: -0.025em; line-height: 1.05; font-weight: 600; text-rendering: optimizeLegibility; overflow: visible; padding-bottom: 0.08em; }
h1 { font-size: clamp(2.4rem, 7vw, 5.5rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 4.5vw, 3rem); font-weight: 600; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 500; }
h4 { font-size: 1rem; font-weight: 500; }
p { color: var(--char); font-size: 14px; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media(min-width:768px){ .container { padding: 0 48px; } }

.mono { font-family: var(--fm); }
.serif-italic { font-family: var(--fh); font-weight: 500; }

.eyebrow {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--ink);
}
.eyebrow.light { color: rgba(255,255,255,0.82); }
.eyebrow.light::before { background: rgba(255,255,255,0.7); }

.section-head { margin-bottom: 56px; }
.section-head .num { font-family: var(--fm); font-size: 11px; color: var(--stone); letter-spacing: 0.16em; display: block; margin-bottom: 18px; }
.section-head .hindi { font-family: var(--fm); font-weight: 500; color: var(--accent); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-head .hindi .en { font-family: var(--fm); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }
.section-head h2 { max-width: 720px; }
.section-head .lead { color: var(--stone); max-width: 540px; margin-top: 16px; font-size: 14.5px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
}
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary .arrow { display: inline-block; transition: transform 0.4s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(6px); }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
  z-index: 0;
}
.btn-primary:hover::after { transform: translateY(0); }
.btn-primary span, .btn-primary .arrow { position: relative; z-index: 1; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ============ NAV ============ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px 24px;
  transition: padding 0.4s var(--ease);
}
nav.scrolled { padding: 12px 24px; }
.nav-pill {
  max-width: var(--max);
  margin: 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 8px 8px 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.4s var(--ease);
}
nav.scrolled .nav-pill {
  background: rgba(242,240,235,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.nav-logo {
  font-family: var(--fh);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; display: inline-block; }
.nav-links { display: none; gap: 4px; align-items: center; }
@media(min-width:900px){ .nav-links { display: flex; } }
.nav-links a {
  font-size: 13px;
  color: var(--char);
  padding: 8px 14px;
  border-radius: 100px;
  position: relative;
  transition: color 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper-3);
  border-radius: 100px;
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s var(--ease);
  z-index: -1;
}
.nav-links a:hover::before { transform: scale(1); opacity: 1; }
.nav-cta {
  background: var(--ink);
  color: var(--white);
  padding: 11px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s var(--ease);
}
.nav-cta:hover { background: var(--accent); }
.nav-cta .nav-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s var(--ease);
}
.nav-cta:hover .nav-dot { background: var(--white); transform: scale(1.3); }

#mainNav.open .nav-logo { color: #fff; transition: color 0.3s var(--ease); }

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.burger:hover {
  background: #2a2a2e;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  transform: scale(1.06);
}
@media(min-width:900px){ .burger { display: none; } }

/* Mobile nav: Quote(left) | curí(absolute center) | burger(right) */
@media(max-width: 899px) {
  .nav-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    position: relative;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    white-space: nowrap;
  }
  .nav-cta {
    padding: 9px 14px;
    font-size: 12px;
    gap: 7px;
    flex-shrink: 0;
  }
  .nav-cta .nav-dot { width: 6px; height: 6px; }
  .nav-links { display: none !important; }
}
.burger span { display: block; width: 16px; height: 1.5px; background: rgba(255,255,255,0.9); transition: all 0.35s var(--ease); border-radius: 2px; }
.burger.open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); background: #fff; }
.burger.open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); background: #fff; }
.drawer {
  position: fixed;
  inset: 0;
  background: #1c1c1e;
  z-index: 99;
  padding: 100px 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Circular reveal from top-right corner (burger position) */
  clip-path: circle(0% at 98% 3%);
  -webkit-clip-path: circle(0% at 98% 3%);
  transition: clip-path 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: -webkit-clip-path 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
  overflow-y: auto;
}
.drawer.open {
  clip-path: circle(150% at 98% 3%);
  -webkit-clip-path: circle(150% at 98% 3%);
  pointer-events: all;
}
.drawer a {
  font-family: var(--fh);
  font-size: 1.6rem;
  color: rgba(255,255,255,0.88);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color 0.25s var(--ease);
}
.drawer a:hover { color: #fff; }
.drawer.open a {
  opacity: 1;
  transform: translateY(0);
}
.drawer.open a:nth-child(1) { transition-delay: 0.28s; }
.drawer.open a:nth-child(2) { transition-delay: 0.34s; }
.drawer.open a:nth-child(3) { transition-delay: 0.40s; }
.drawer.open a:nth-child(4) { transition-delay: 0.46s; }
.drawer.open a:nth-child(5) { transition-delay: 0.52s; }
.drawer.open a:nth-child(6) { transition-delay: 0.58s; }
.drawer.open a:nth-child(7) { transition-delay: 0.64s; }
.drawer .drawer-cta {
  margin-top: 28px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  text-align: center;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  font-family: var(--fb);
  letter-spacing: 0.04em;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  transition: background 0.3s var(--ease);
}
.drawer .drawer-cta:hover { background: rgba(255,255,255,0.13); }

/* ============ HERO ============ */
#hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 80px;
  overflow: hidden;
  background: var(--paper);
}

.hero-fx-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-fx-bg .blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.6;
  border-radius: 50%;
  animation: float 20s infinite ease-in-out alternate;
}
.hero-fx-bg .blob-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59,59,64,0.06) 0%, transparent 70%);
  top: -100px;
  right: -100px;
}
.hero-fx-bg .blob-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(105,104,111,0.05) 0%, transparent 70%);
  bottom: -50px;
  left: 20%;
  animation-delay: -10s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

#heroParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.grain-overlay {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.hero-bg-word {
  position: absolute;
  right: -40px;
  top: 12%;
  font-family: var(--fh);
  font-size: clamp(10rem, 28vw, 22rem);
  color: var(--ink);
  opacity: 0.04;
  font-weight: 300;
  font-style: italic;
  line-height: 0.9;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
  z-index: 2;
}
@media(min-width:900px){ .hero-inner { grid-template-columns: 1.1fr 1fr; gap: 80px; } }
.hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hero-meta .seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px 6px 32px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 100px;
  cursor: default;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}
.hero-meta .seal:hover {
  padding: 6px 32px 6px 14px;
  background: var(--white);
  color: var(--accent);
}
.hero-meta .seal .seal-icon-wrapper {
  position: absolute;
  left: 6px;
  width: 18px; height: 18px;
  background: var(--white);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}
.hero-meta .seal:hover .seal-icon-wrapper {
  left: calc(100% - 24px);
  background: var(--accent);
  color: var(--white);
}
.hero-meta .seal .seal-icon-wrapper svg {
  width: 10px; height: 10px;
}
.hero-meta .meta-line { font-family: var(--fm); font-size: 10px; letter-spacing: 0.2em; color: var(--stone); text-transform: uppercase; }
.hero-title { margin-bottom: 28px; font-weight: 300; }
.hero-title .accent { color: var(--accent); font-weight: 700; }
.hero-title .hindi-mark { display: none; }
.hero-sub { font-size: 16px; color: var(--char); max-width: 480px; margin-bottom: 12px; line-height: 1.7; font-weight: 500; }
.hero-body { font-size: 15px; color: var(--stone); max-width: 480px; margin-bottom: 40px; line-height: 1.7; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-divider { height: 1px; background: var(--line); margin-bottom: 28px; }
.hero-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media(min-width:600px){ .hero-meta-grid { grid-template-columns: repeat(3, 1fr); } }
.hero-meta-item .label { font-family: var(--fm); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 6px; }
.hero-meta-item .val { font-family: var(--fh); font-size: 1.15rem; font-weight: 500; color: var(--ink); display: block; line-height: 1.2; }
.hero-meta-item .sub { font-size: 11px; color: var(--ash); margin-top: 2px; }

/* HERO VISUAL */
.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
}
svg#dna {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
svg#dna .dna-node {
  cursor: pointer;
  transition: filter 0.2s ease;
}
svg#dna .dna-node:hover {
  filter: drop-shadow(0 0 5px rgba(26,26,26,0.6));
}

/* Neural Mesh Animation */
.mesh-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: mesh-draw 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
.mesh-path.p2 { animation-delay: -1.5s; animation-duration: 7s; }
.mesh-path.p3 { animation-delay: -3s; animation-duration: 5s; }
.mesh-path.p4 { animation-delay: -4.5s; animation-duration: 8s; }

@keyframes mesh-draw {
  0% { stroke-dashoffset: 600; opacity: 0.1; }
  50% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.1; }
}

/* DNA Helix Animation */
.dna-strand {
  animation: dna-shift 8s linear infinite;
  transform-origin: center;
}
.dna-strand.s2 { animation-direction: reverse; }
.dna-rung {
  animation: rung-fade 4s ease-in-out infinite alternate;
}
.dna-rung:nth-child(even) { animation-delay: -2s; }

@keyframes dna-shift {
  0% { transform: translateY(-10px) scaleX(1); opacity: 0.3; }
  50% { transform: translateY(10px) scaleX(0.8); opacity: 0.7; }
  100% { transform: translateY(-10px) scaleX(1); opacity: 0.3; }
}
@keyframes rung-fade {
  0% { opacity: 0.1; stroke-width: 0.5; }
  100% { opacity: 0.8; stroke-width: 1.5; }
}

/* Glassmorphism Orb & Pulse */
.glass-orb {
  animation: orb-float 6s ease-in-out infinite alternate;
  transform-origin: center;
}
.core-pulse {
  animation: core-beat 2.5s ease-out infinite;
  transform-origin: center;
}

@keyframes orb-float {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; }
}
@keyframes core-beat {
  0% { transform: scale(0.8); opacity: 1; stroke-width: 2; }
  100% { transform: scale(2.5); opacity: 0; stroke-width: 0.5; }
}

/* Scanning Sweep */
.scanner-sweep {
  transform-origin: 200px 200px;
  animation: scan-rotate 4s linear infinite;
}
.scan-line {
  animation: scan-pan 3s ease-in-out infinite alternate;
}

@keyframes scan-rotate {
  0% { transform: rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0; }
}
@keyframes scan-pan {
  0% { transform: translateY(-80px); opacity: 0; }
  50% { opacity: 0.5; }
  100% { transform: translateY(80px); opacity: 0; }
}

/* Node Pulsing */
.n-pulse {
  animation: node-flash 3s infinite alternate;
  transform-origin: center;
}
.n-pulse:nth-child(3n) { animation-delay: -1s; }
.n-pulse:nth-child(3n+1) { animation-delay: -2s; }
.n-pulse.fast { animation: node-flash 1.5s infinite alternate !important; }

@keyframes node-flash {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.5); }
}

/* Service Card Animated SVGs */
.svc-anim-svg {
  overflow: visible;
}

/* Waveform (Service 01) */
.wave-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-wave 4s ease-in-out infinite alternate;
}
.wave-line.w2 { animation-delay: -1s; animation-duration: 5s; }
.wave-line.w3 { animation-delay: -2s; animation-duration: 6s; }

@keyframes draw-wave {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: 0; }
}
.scan-bar {
  animation: scan-bar-pan 3s linear infinite alternate;
}
.scan-dot {
  animation: scan-dot-pan 3s linear infinite alternate;
}
@keyframes scan-bar-pan {
  0% { transform: translateX(0); }
  100% { transform: translateX(140px); }
}
@keyframes scan-dot-pan {
  0% { transform: translate(0, 0); }
  50% { transform: translate(70px, 40px); }
  100% { transform: translate(140px, 0); }
}

/* Pipeline Flow (Service 02) */
.flow-line {
  stroke-dasharray: 20;
  animation: pipeline-flow 2s linear infinite;
  opacity: 0.6;
}
.flow-line.f2 { animation-delay: -0.5s; animation-duration: 2.5s; stroke-dasharray: 10; }
.flow-line.f3 { animation-delay: -1s; animation-duration: 3s; stroke-dasharray: 30; }

@keyframes pipeline-flow {
  to { stroke-dashoffset: -100; }
}
.p-node {
  animation: pulse-node 4s ease-in-out infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
}
.p-node.n2 { animation-delay: -1.5s; }
.p-node.n3 { animation-delay: -3s; }
@keyframes pulse-node {
  0% { transform: scale(0.9); stroke-width: 0.5; }
  100% { transform: scale(1.1); stroke-width: 2; }
}

/* Microscope Particles (Service 03) */
.scope-ring {
  transform-origin: center;
  animation: rotate-scope 20s linear infinite;
}
@keyframes rotate-scope {
  to { transform: rotate(360deg); }
}
.particles-bg {
  animation: drift-bg 12s ease-in-out infinite alternate;
}
.particles-fg {
  animation: drift-fg 8s ease-in-out infinite alternate;
}
.pt-core {
  animation: core-beat 2s infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes drift-bg {
  0% { transform: translate(-10px, -10px); }
  100% { transform: translate(10px, 10px); }
}
@keyframes drift-fg {
  0% { transform: translate(15px, 15px); }
  100% { transform: translate(-15px, -15px); }
}

.hero-corner-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hero-corner-labels .label-pin {
  position: absolute;
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--stone);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-corner-labels .label-pin::before { content: ''; width: 24px; height: 1px; background: var(--ink); }
.hero-corner-labels .pin-1 { bottom: 14%; left: 0; }
.hero-corner-labels .pin-2 { top: 38%; right: 0; flex-direction: row-reverse; }
.hero-corner-labels .pin-2::before { background: var(--accent); }

/* Marquee */
.hero-marquee {
  margin-top: 60px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  background: var(--paper);
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 40s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track span {
  font-family: var(--fh);
  font-size: 14px;
  color: var(--char);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 60px;
  letter-spacing: 0.02em;
}
.marquee-track span .hi { font-family: var(--fm); color: var(--accent); margin-right: 8px; }
.marquee-track span::after { content: '◆'; color: var(--accent); font-size: 8px; }

/* ============ MISSION (ACCORDION STYLE) ============ */
#mission {
  background: var(--ink);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  color: var(--white);
}
#mission .bg-word {
  position: absolute;
  font-family: var(--fh);
  font-size: clamp(8rem, 22vw, 18rem);
  color: rgba(255,255,255,0.025);
  font-weight: 300;
  font-style: italic;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  letter-spacing: -0.05em;
}
.mission-top { display: grid; gap: 40px; margin-bottom: 64px; }
@media(min-width:900px){ .mission-top { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.mission-top h2 { color: var(--white); font-weight: 300; max-width: 600px; }
.mission-top h2 .accent { color: var(--fog); font-weight: 700; }
.mission-top p { color: rgba(255,255,255,0.82); font-size: 14px; }

.mission-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  position: relative;
  z-index: 2;
}
@media(min-width:900px){ .mission-layout { grid-template-columns: 0.85fr 1.4fr; gap: 24px; align-items: stretch; } }

/* Mission visual block (left) */
.mission-visual {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0;
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
.mission-visual .grid-floor {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.mission-visual svg { position: relative; z-index: 2; width: 100%; max-width: 320px; height: auto; }
.mission-visual .star-float {
  position: absolute;
  top: 22%;
  right: 18%;
  z-index: 3;
  color: var(--accent);
  animation: starFloat 4s ease-in-out infinite;
}
@keyframes starFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(8deg); }
}
.mission-visual .iso-cube { transition: transform 0.5s var(--ease); }
.mission-visual:hover .iso-cube-1 { transform: translate(-4px, -4px); }
.mission-visual:hover .iso-cube-2 { transform: translate(4px, -4px); }
.mission-visual:hover .iso-cube-3 { transform: translate(-4px, 4px); }
.mission-visual:hover .iso-cube-4 { transform: translate(4px, 4px); }

/* Mission accordion (right) */
.mission-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.m-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 20px 26px;
  cursor: pointer;
  position: relative;
  transition: all 0.55s var(--ease-expo);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.m-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.m-item.open {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
}
.m-item .m-num {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.14em;
  flex-shrink: 0;
  padding-top: 4px;
}
.m-item.open .m-num { color: var(--accent); }
.m-item-body { flex: 1; min-width: 0; }
.m-item h3 {
  font-family: var(--fh);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0;
  transition: margin-bottom 0.4s var(--ease);
  letter-spacing: -0.01em;
}
.m-item.open h3 { margin-bottom: 14px; }
.m-item .m-desc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-expo);
}
.m-item.open .m-desc { grid-template-rows: 1fr; }
.m-item .m-desc-inner { overflow: hidden; }
.m-item .m-desc p {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.7;
  max-width: 600px;
}
.m-item .m-desc p .hindi { color: var(--fog); font-family: var(--fm); font-size: 0.92em; letter-spacing: 0.04em; }
.m-item .m-tag {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  padding: 5px 14px;
  border-radius: 100px;
  opacity: 0;
  transform: translateX(8px);
  transition: all 0.4s var(--ease);
  flex-shrink: 0;
}
.m-item.open .m-tag { opacity: 1; transform: translateX(0); }

/* ============ USE-CASES (PATHWAYS) ============ */
#usecases { background: var(--paper); padding: 120px 0; position: relative; }
.uc-top { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; align-items: end; }
@media(min-width:900px){ .uc-top { grid-template-columns: 1.4fr 1fr; gap: 80px; } }

.uc-nav { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.uc-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: var(--fb);
  color: var(--char);
  font-size: 14px;
  transition: all 0.4s var(--ease);
  position: relative;
}
.uc-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--ink);
  transition: width 0.4s var(--ease);
}
.uc-nav-item.active { color: var(--ink); }
.uc-nav-item.active::before { width: 100%; }
.uc-nav-item:hover { color: var(--ink); transform: translateX(8px); }
.uc-nav-item.active:hover { transform: none; }
.uc-nav-item .uc-num { font-family: var(--fm); font-size: 11px; color: var(--ash); letter-spacing: 0.1em; }
.uc-nav-item .uc-name { font-family: var(--fh); font-size: 15px; flex: 1; margin-left: 24px; font-weight: 400; }
.uc-nav-item .uc-arrow { font-family: var(--fh); color: var(--accent); font-size: 16px; transition: transform 0.4s var(--ease); opacity: 0; }
.uc-nav-item.active .uc-arrow { opacity: 1; transform: translateX(4px); }

.uc-panels { position: relative; min-height: 380px; }
.uc-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
  background: transparent;
  border: none;
  animation: panelFade 0.6s var(--ease);
}
@media(min-width:700px){ .uc-panel { grid-template-columns: 1fr 1fr; } }
.uc-panel.active { display: grid; }
@keyframes panelFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.uc-card {
  background: var(--white);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: background 0.4s var(--ease);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.uc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: 3;
}
/* lift content above bg */
.uc-card > * { position: relative; z-index: 2; }

.uc-card:hover { background: var(--white); background: var(--paper-2); }
.uc-card:hover::before { transform: scaleX(1); }
.uc-card .uc-step { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 14px; }
.uc-card h4 { font-size: 1.05rem; margin-bottom: 10px; font-family: var(--fh); }
.uc-card p { font-size: 14px; color: var(--char); line-height: 1.7; }

/* ============ SERVICES ============ */
#services { background: var(--paper-2); padding: 120px 0 160px; position: relative; }
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media(min-width:768px){ .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
  background: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.5s var(--ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.svc-card .svc-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 3;
  transition: all 0.4s var(--ease);
}
.svc-card .svc-visual {
  height: 280px;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s var(--ease);
}
.svc-card .svc-visual .visual-placeholder {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.svc-card .svc-visual .visual-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.svc-card:hover .svc-visual .visual-image { opacity: 0; transform: scale(1.05); }
.svc-card:hover .svc-visual .visual-placeholder { opacity: 1; }
.svc-card:hover .svc-visual { background: var(--paper); }
.svc-card:hover .svc-tag { background: var(--ink); color: var(--white); border-color: var(--ink); }

.svc-body { padding: 28px 26px 32px; display: flex; flex-direction: column; gap: 0; flex: 1; border-top: 1px solid var(--line-soft); }
.svc-body h3 { font-size: 1.25rem; margin-bottom: 8px; font-family: var(--fh); }
.svc-body > p { color: var(--char); font-size: 15px; line-height: 1.7; margin-bottom: 20px; flex: 1; }
.svc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.svc-stat .s-val { font-family: var(--fh); font-size: 1.3rem; color: var(--ink); display: block; line-height: 1; margin-bottom: 4px; font-weight: 500; }
.svc-stat .s-lbl { font-family: var(--fm); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--char); font-weight: 500; }

.svc-card .svc-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.4s var(--ease);
  z-index: 3;
}
.svc-card:hover .svc-arrow { background: var(--accent); color: var(--white); border-color: var(--accent); transform: rotate(45deg); }

.svc-detail { background: var(--paper); border: 1px solid var(--line); border-top: none; display: none; padding: 32px 28px; }
.svc-detail.open { display: grid; grid-template-columns: 1fr; gap: 32px; animation: panelFade 0.5s var(--ease); }
@media(min-width:700px){ .svc-detail.open { grid-template-columns: 1fr 1fr; } }
.svc-detail .col-head { font-family: var(--fm); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block; }
.svc-detail ul { list-style: none; }
.svc-detail li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 12px; font-size: 14.5px; color: var(--char); line-height: 1.65; }
.svc-detail li::before { content: ''; width: 6px; height: 6px; margin-top: 8px; background: var(--accent); flex-shrink: 0; }
/* Detail panels are visible by default — give each a clear, labelled, separated block */
.svc-detail.open { border-top: 1px solid var(--line); margin-top: 14px; }
.svc-detail-name {
  grid-column: 1 / -1;
  font-family: var(--fh);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.svc-detail-name::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ============ SPECIALIZED / STANDALONE SERVICES (card grid) ============ */
.svc-extra { margin-top: 84px; }
.svc-extra-head { max-width: 660px; margin-bottom: 30px; }
.svc-extra-eyebrow { font-family: var(--fm); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 16px; }
.svc-extra-head h3 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-family: var(--fh); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.svc-extra-head p { color: var(--char); font-size: 15px; line-height: 1.7; }

.svc-extra-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media(min-width:600px){ .svc-extra-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:980px){ .svc-extra-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-x { background: var(--paper); padding: 32px 28px 30px; display: flex; flex-direction: column; gap: 14px; position: relative; transition: background 0.45s var(--ease); }
.svc-x:hover { background: var(--white); }
.svc-x-icon { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s var(--ease); }
.svc-x-icon svg { width: 22px; height: 22px; stroke: var(--ink); transition: stroke 0.4s var(--ease); }
.svc-x:hover .svc-x-icon { border-color: var(--accent); background: var(--accent); }
.svc-x:hover .svc-x-icon svg { stroke: var(--white); }
.svc-x-tag { font-family: var(--fm); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.svc-x h4 { font-size: 1.2rem; font-family: var(--fh); font-weight: 500; line-height: 1.15; }
.svc-x > p { color: var(--char); font-size: 14px; line-height: 1.7; flex: 1; }
.svc-x-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 2px; }
.svc-x-list li { font-family: var(--fm); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--char); font-weight: 500; padding: 6px 0; display: flex; gap: 10px; align-items: center; }
.svc-x-list li::before { content: ''; width: 5px; height: 5px; background: var(--accent); flex-shrink: 0; }

/* ============ CAPABILITIES (DYNAMIC SPARTAN-STYLE) ============ */
#capabilities {
  background: var(--ink);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  color: var(--white);
}
#capabilities .bg-word {
  position: absolute;
  font-family: var(--fh);
  font-style: italic;
  font-size: clamp(10rem, 25vw, 20rem);
  color: rgba(255,255,255,0.025);
  font-weight: 300;
  bottom: -8%;
  left: -5%;
  pointer-events: none;
  user-select: none;
}
.cap-top { display: grid; gap: 60px; margin-bottom: 80px; grid-template-columns: 1fr; }
@media(min-width:900px){ .cap-top { grid-template-columns: 1fr 1fr; align-items: end; } }
.cap-top h2 { color: var(--white); font-weight: 300; }
.cap-top h2 .accent { color: var(--fog); font-style: italic; }
.cap-top p { color: rgba(255,255,255,0.82); }

/* Dynamic layout */
.cap-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 80px;
}
@media(min-width:900px){
  .cap-layout {
    flex-direction: row;
    height: 520px;
  }
}

.cap-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: flex 0.8s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s var(--ease), border-color 0.5s var(--ease);
}
@media(min-width:900px){
  .cap-panel {
    flex: 0 0 64px;
  }
  .cap-panel.active {
    flex: 10 1 0%;
  }
}
.cap-panel:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }

/* Full (active) view */
.cap-panel .cap-full {
  display: flex;
  position: absolute;
  inset: 0;
  padding: 32px;
  min-height: 480px;
  min-width: 100%;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  pointer-events: none;
}
@media(min-width:900px){
  .cap-panel .cap-full { min-width: 400px; }
}
.cap-panel.active .cap-full {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.6s var(--ease) 0.3s, transform 0.6s var(--ease) 0.3s, visibility 0.6s 0.3s;
  pointer-events: auto;
}

/* Rail (collapsed) view */
.cap-panel .cap-rail-view {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 24px 14px;
  min-height: 200px;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease) 0.2s, visibility 0.4s 0.2s;
}
@media(min-width:900px){
  .cap-panel .cap-rail-view { flex-direction: column; min-height: auto; height: 100%; }
}
.cap-panel.active .cap-rail-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.cap-rail-view .r-num {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 6px 12px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.cap-rail-view .r-name {
  font-family: var(--fh);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  transition: color 0.4s var(--ease);
  font-weight: 500;
}
@media(min-width:900px){
  .cap-rail-view .r-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 24px 0;
    flex: 1;
    display: flex;
    align-items: center;
  }
}
.cap-panel:hover .r-name { color: var(--white); }

/* Active panel inner */
.cap-full-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.cap-full-header h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--white);
  font-weight: 400;
  max-width: 70%;
  line-height: 1.2;
  font-family: var(--fh);
}
.cap-full-num {
  font-family: var(--fm);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 6px 14px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.cap-full-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: 32px;
}
.cap-full-visual {
  flex: 1;
  min-height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  background: radial-gradient(ellipse at center, rgba(59,59,64,0.06) 0%, transparent 70%);
}
.cap-full-visual svg { width: 100%; max-width: 380px; height: auto; position: relative; z-index: 2; }
.cap-full-visual .grid-floor {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) perspective(400px) rotateX(60deg);
  width: 600px;
  height: 200px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to top, black, transparent);
  -webkit-mask-image: linear-gradient(to top, black, transparent);
}

/* ============ COMPARISON ============ */
#comparison { background: var(--paper); padding: 120px 0; }
.vs-table { border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.vs-scroll { overflow-x: auto; }
.vs-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-bottom: 1px solid var(--line); min-width: 640px; transition: background 0.3s var(--ease); }
.vs-row:last-child { border-bottom: none; }
.vs-row:hover:not(.vs-head) { background: var(--white); }
.vs-cell { padding: 20px 24px; border-right: 1px solid var(--line); font-size: 13.5px; }
.vs-cell:last-child { border-right: none; }
.vs-head .vs-cell { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); background: var(--paper-2); }
.vs-head .vs-cell.curi { background: var(--ink); color: var(--white); display: flex; align-items: center; gap: 10px; }
.vs-head .vs-cell.curi .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.vs-cell.label { font-family: var(--fh); color: var(--ink); font-weight: 500; }
.vs-cell.yes { color: var(--ink); display: flex; align-items: start; gap: 10px; }
.vs-cell.no { color: var(--ash); display: flex; align-items: start; gap: 10px; }
.vs-cell.yes::before { content: '◆'; color: var(--accent); flex-shrink: 0; font-size: 12px; line-height: 1.65; }
.vs-cell.no::before { content: '◇'; color: var(--ash); flex-shrink: 0; font-size: 12px; line-height: 1.65; }

/* ============ LAB ============ */
#lab { background: var(--paper); padding: 120px 0; border-top: 1px solid var(--line); }
.lab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media(min-width:600px){ .lab-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1000px){ .lab-grid { grid-template-columns: repeat(3, 1fr); } }
.lab-cell {
  background: var(--paper);
  padding: 32px 26px;
  position: relative;
  transition: all 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
  overflow: hidden;
  cursor: default;
}
.lab-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.6s var(--ease);
}
.lab-cell:hover { background: var(--white); }
.lab-cell:hover::before { width: 100%; }
.lab-cell .lab-icon {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: all 0.4s var(--ease);
}
.lab-cell:hover .lab-icon { border-color: var(--accent); background: var(--accent); }
.lab-cell:hover .lab-icon svg { stroke: var(--white); }
.lab-cell .lab-icon svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.5; fill: none; transition: stroke 0.4s var(--ease); }
.lab-cell .lab-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; transition: opacity 0.4s var(--ease); }
.lab-cell:hover .lab-icon img { opacity: 0; }
/* Lab visual: photo default → SVG on hover */
.lab-visual { margin: -32px -26px 0; height: 210px; position: relative; overflow: hidden; }
.lab-visual .lv-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.lab-visual .lv-svg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.6s var(--ease); background: var(--paper-2); padding: 16px 24px; }
.lab-visual .lv-svg svg { width: 100%; height: 100%; }
.lab-cell:hover .lab-visual .lv-img { opacity: 0; transform: scale(1.05); }
.lab-cell:hover .lab-visual .lv-svg { opacity: 1; }
/* Lab visual animated SVG keyframes */
.lv-path { stroke-dasharray: 700; stroke-dashoffset: 700; animation: lv-draw 3.5s ease-in-out infinite alternate; }
.lv-path.lv-path-p2 { animation-delay: -1.2s; animation-duration: 4.5s; }
@keyframes lv-draw { 0% { stroke-dashoffset: 700; } 100% { stroke-dashoffset: 0; } }
.lv-scan-x { animation: lv-scan-slide 3.5s linear infinite alternate; }
@keyframes lv-scan-slide { 0% { transform: translateX(0); } 100% { transform: translateX(165px); } }
.lv-bar { animation: lv-bar-pulse 3s ease-in-out infinite alternate; transform-origin: bottom; transform-box: fill-box; }
.lv-bar.b2 { animation-delay: -0.5s; } .lv-bar.b3 { animation-delay: -1s; } .lv-bar.b4 { animation-delay: -1.5s; }
.lv-bar.b5 { animation-delay: -2s; } .lv-bar.b6 { animation-delay: -2.5s; } .lv-bar.b7 { animation-delay: -1.2s; }
@keyframes lv-bar-pulse { 0% { transform: scaleY(0.5); opacity: 0.35; } 100% { transform: scaleY(1); opacity: 1; } }
.lv-bubble { animation: lv-rise 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lv-bubble.bb2 { animation-delay: -1.3s; animation-duration: 3.2s; }
.lv-bubble.bb3 { animation-delay: -2.7s; animation-duration: 5s; }
.lv-bubble.bb4 { animation-delay: -0.9s; animation-duration: 3.7s; }
@keyframes lv-rise { 0% { transform: translateY(0) scale(1); opacity: 0.6; } 70% { opacity: 0.75; } 100% { transform: translateY(-22px) scale(0.3); opacity: 0; } }
.lv-fragment { animation: lv-frag 2.5s ease-in-out infinite alternate; }
.lv-fragment.fr2 { animation-delay: -0.625s; } .lv-fragment.fr3 { animation-delay: -1.25s; } .lv-fragment.fr4 { animation-delay: -1.875s; }
@keyframes lv-frag { 0% { opacity: 0.85; } 100% { opacity: 0.25; } }
.lv-beam { animation: lv-beam-rock 4s ease-in-out infinite alternate; transform-origin: 100px 54px; }
.lv-beam-dot { animation: lv-pivot-pulse 2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes lv-beam-rock { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }
@keyframes lv-pivot-pulse { 0% { transform: scale(0.7); } 100% { transform: scale(1.3); } }
.lab-cell .lab-meta { font-family: var(--fm); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--char); font-weight: 500; }
.lab-cell h4 { font-size: 1.1rem; font-family: var(--fh); }
.lab-cell p { font-size: 14px; color: var(--char); line-height: 1.7; }
.lab-cell .lab-num { position: absolute; top: 24px; right: 24px; font-family: var(--fm); font-size: 11px; color: var(--ash); letter-spacing: 0.1em; }

.micro-strip {
  margin-top: 48px;
  background: var(--ink);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  border-radius: 8px;
}
@media(min-width:800px){ .micro-strip { grid-template-columns: 0.8fr 2fr; } }
.micro-strip .ms-title { font-family: var(--fh); font-size: 1.4rem; color: var(--white); font-weight: 400; }
.micro-strip .ms-title .hi { color: var(--fog); font-size: 10px; display: block; margin-bottom: 8px; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--fm); font-weight: 500; }
.micro-strip .ms-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
@media(min-width:600px){ .micro-strip .ms-list { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } }
.ms-cell { background: var(--ink); padding: 16px; transition: background 0.3s var(--ease); }
.ms-cell:hover { background: rgba(255,255,255,0.05); }
.ms-cell h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 4px; font-family: var(--fh); }
.ms-cell .ms-sub { font-family: var(--fm); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.68); display: block; margin-bottom: 8px; }
.ms-cell p { font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.5; }

/* ============ DOSAGE FORM TESTING (tablet vs capsule, hover detail) ============ */
.dosage { margin-top: 44px; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.dosage-head { padding: 22px 26px; border-bottom: 1px solid var(--line); font-family: var(--fh); font-size: 1.15rem; font-weight: 400; color: var(--ink); }
.dosage-head .hi { display: block; font-family: var(--fm); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 500; }
.dosage-forms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
@media(min-width:620px){ .dosage-forms { grid-template-columns: repeat(4, 1fr); } }
.dform { background: var(--paper); border: none; cursor: pointer; padding: 26px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; font-family: var(--fb); transition: background 0.35s var(--ease); }
.dform::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width 0.35s var(--ease); }
.dform:hover, .dform.active { background: var(--white); }
.dform.active::after { width: 100%; }
.dform-gfx { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.dform-gfx svg { width: 46px; height: 46px; stroke: var(--ash); stroke-width: 1.5; transition: stroke 0.35s var(--ease); }
.dform:hover .dform-gfx svg, .dform.active .dform-gfx svg { stroke: var(--ink); }
.dform:hover .dform-gfx svg [fill="currentColor"], .dform.active .dform-gfx svg [fill="currentColor"] { fill: var(--ink); }
.dform-name { font-family: var(--fm); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); transition: color 0.35s var(--ease); }
.dform:hover .dform-name, .dform.active .dform-name { color: var(--ink); }
.dosage-panels { padding: 26px; position: relative; }
.dpanel { display: none; }
.dpanel.active { display: block; animation: panelFade 0.4s var(--ease); }
.dpanel-tag { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 16px; }
.dpanel ul { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; }
@media(min-width:620px){ .dpanel ul { grid-template-columns: 1fr 1fr; gap: 0 32px; } }
.dpanel li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 12px; font-size: 14px; color: var(--char); line-height: 1.6; }
.dpanel li::before { content: ''; width: 6px; height: 6px; margin-top: 7px; background: var(--accent); flex-shrink: 0; }

/* ============ QUALITY ============ */
#quality { background: var(--paper-2); padding: 120px 0; }
.q-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media(min-width:600px){ .q-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1000px){ .q-grid { grid-template-columns: repeat(5, 1fr); } }
.q-cell {
  background: var(--paper);
  padding: 36px 24px;
  position: relative;
  transition: all 0.5s var(--ease);
  cursor: default;
  overflow: hidden;
  min-height: 240px;
}
.q-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
  z-index: 0;
}
.q-cell:hover::after { transform: translateY(0); }
.q-cell > * { position: relative; z-index: 1; transition: color 0.4s var(--ease); }
.q-cell:hover h4, .q-cell:hover .q-mark { color: var(--white); }
.q-cell:hover p, .q-cell:hover .q-st { color: rgba(255,255,255,0.82); }
.q-cell:hover .q-seal { background: var(--accent); color: var(--white); border-color: var(--accent); }
.q-cell .q-seal {
  width: 56px;
  height: 56px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 22px;
  margin-bottom: 24px;
  font-weight: 500;
  transition: all 0.4s var(--ease);
  font-style: italic;
  overflow: hidden;
  padding: 0;
}
.q-cell .q-seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; transition: opacity 0.4s var(--ease); }
.q-cell:hover .q-seal img { opacity: 0; }
.q-cell .q-mark { font-family: var(--fh); font-size: 1.3rem; font-weight: 500; color: var(--ink); display: block; margin-bottom: 4px; }
.q-cell .q-st { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--char); display: block; margin-bottom: 16px; }
.q-cell h4 { font-size: 1rem; margin-bottom: 8px; font-family: var(--fh); }
.q-cell p { font-size: 13.5px; color: var(--char); line-height: 1.65; }

/* ============ INDUSTRIES ============ */
#industries { background: var(--ink); padding: 120px 0 0; color: var(--white); position: relative; overflow: hidden; }
#industries .bg-word {
  position: absolute;
  font-family: var(--fh);
  font-style: italic;
  font-size: clamp(8rem, 22vw, 18rem);
  color: rgba(255,255,255,0.025);
  font-weight: 300;
  top: 10%;
  right: -5%;
  pointer-events: none;
  user-select: none;
}
#industries .container > h2 { color: var(--white); }
.ind-top { display: grid; gap: 40px; margin-bottom: 60px; }
@media(min-width:900px){ .ind-top { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.ind-top p { color: rgba(255,255,255,0.82); }
.ind-list { border-top: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 2; }
.ind-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: center;
  cursor: pointer;
  transition: all 0.5s var(--ease);
  position: relative;
}
@media(min-width:700px){ .ind-row { grid-template-columns: 50px 1fr auto auto; } }
.ind-row::before { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--accent); transition: width 0.5s var(--ease); }
.ind-row:hover { transform: translateX(12px); }
.ind-row:hover::before { width: 100%; }
.ind-row .ind-n { font-family: var(--fm); font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; }
.ind-row .ind-name { font-family: var(--fh); font-size: 1.15rem; color: var(--white); font-weight: 500; transition: color 0.4s var(--ease); }
.ind-row:hover .ind-name { color: var(--accent); }
.ind-row .ind-desc { display: none; font-size: 12px; color: rgba(255,255,255,0.75); }
@media(min-width:700px){ .ind-row .ind-desc { display: block; max-width: 360px; text-align: right; } }
.ind-row .ind-arrow { font-family: var(--fh); font-size: 16px; color: rgba(255,255,255,0.6); transition: all 0.4s var(--ease); opacity: 0; }
.ind-row:hover .ind-arrow { opacity: 1; color: var(--accent); transform: translateX(4px); }

.pri-bar { margin-top: 60px; padding: 40px 0; background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.08); }
.pri-inner { display: flex; flex-direction: column; gap: 20px; }
@media(min-width:800px){ .pri-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 32px; } }
.pri-inner h4 { color: var(--white); font-size: 0.95rem; font-weight: 400; font-family: var(--fh); white-space: nowrap; }
.pri-inner h4 .hi { color: var(--fog); display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 6px; font-family: var(--fm); font-weight: 500; }
.pri-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pri-tag {
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.pri-tag:hover { background: var(--accent); border-color: var(--accent); color: var(--white); transform: translateY(-2px); }

/* ============ PROCESS ============ */
#process { background: var(--paper); padding: 120px 0; }
.proc-track { position: relative; margin-top: 40px; }
.proc-line { position: absolute; top: 24px; left: 0; right: 0; height: 1px; background: var(--line); }
.proc-line .progress { height: 1px; background: var(--accent); width: 0; }
.proc-steps { display: grid; grid-template-columns: 1fr; gap: 32px; position: relative; }
@media(min-width:600px){ .proc-steps { grid-template-columns: 1fr 1fr; } }
@media(min-width:1000px){ .proc-steps { grid-template-columns: repeat(5, 1fr); } }
.proc-step { position: relative; padding-top: 56px; will-change: transform, opacity; backface-visibility: hidden; }
.proc-step .p-dot {
  position: absolute;
  top: 18px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  transition: all 0.4s var(--ease);
}
.proc-step:hover .p-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
.proc-step .p-day { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px; }
.proc-step .p-day .hi { font-family: var(--fb); letter-spacing: 0.04em; text-transform: none; font-weight: 500; color: var(--ink); }
.proc-step h4 { font-size: 1.05rem; margin-bottom: 16px; font-family: var(--fh); }
.proc-step ul { list-style: none; }
.proc-step li { font-size: 13px; color: var(--stone); padding: 6px 0; display: flex; gap: 10px; line-height: 1.5; }
.proc-step li::before { content: '·'; color: var(--accent); flex-shrink: 0; }

.proc-note { margin-top: 56px; background: var(--paper-2); padding: 20px 24px; font-family: var(--fm); font-size: 11px; letter-spacing: 0.04em; color: var(--stone); line-height: 1.7; border-left: 2px solid var(--accent); }

/* ============ CASES ============ */
#cases { background: var(--paper-2); padding: 120px 0; }
.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media(min-width:900px){ .cases-grid { grid-template-columns: 1fr 1fr; } }
.case-card { background: var(--paper); padding: 32px 28px; cursor: pointer; transition: all 0.5s var(--ease); position: relative; overflow: hidden; }
.case-card::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform: translateY(100%); transition: transform 0.5s var(--ease); z-index: 0; }
.case-card.open::before { transform: translateY(0); }
.case-card > * { position: relative; z-index: 1; transition: color 0.4s var(--ease); }
.case-card.open h3, .case-card.open .case-num { color: var(--white); }
.case-card.open .case-tag { color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.2); background: transparent; }

.case-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 20px; }
.case-tag { display: inline-block; font-family: var(--fm); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 5px 12px; border-radius: 100px; color: var(--char); margin-bottom: 16px; transition: all 0.4s var(--ease); }
.case-card .case-num { font-family: var(--fm); font-size: 11px; color: var(--stone); margin-bottom: 12px; display: block; letter-spacing: 0.14em; }
.case-card h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.3; margin-bottom: 20px; max-width: 90%; font-family: var(--fh); }
.case-meta { display: flex; gap: 24px; font-family: var(--fm); font-size: 11px; color: var(--stone); letter-spacing: 0.1em; text-transform: uppercase; flex-wrap: wrap; margin-top: 12px; }
.case-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.4s var(--ease);
  flex-shrink: 0;
}
.case-body { display: none; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.case-card.open .case-body { display: block; animation: panelFade 0.5s var(--ease); border-top-color: rgba(255,255,255,0.12); }
.cs-section { margin-bottom: 20px; }
.cs-lbl { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 8px; }
.cs-section p { font-size: 13.5px; color: var(--char); line-height: 1.7; }

/* ============ CONTACT ============ */
#contact { background: var(--ink); padding: 120px 0; color: var(--white); position: relative; overflow: hidden; }
#contact .bg-word {
  position: absolute;
  font-family: var(--fh);
  font-style: italic;
  font-size: clamp(10rem, 25vw, 20rem);
  color: rgba(255,255,255,0.025);
  font-weight: 300;
  bottom: -8%;
  right: -5%;
  pointer-events: none;
  user-select: none;
}
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; position: relative; z-index: 2; }
@media(min-width:900px){ .contact-grid { grid-template-columns: 1fr 460px; gap: 80px; } }
.contact-left h2 { color: var(--white); margin-top: 16px; margin-bottom: 16px; }
.contact-left h2 .accent { color: var(--fog); font-style: italic; }
.contact-left > p { color: rgba(255,255,255,0.82); margin-bottom: 40px; max-width: 460px; }
.ch-list { border-top: 1px solid rgba(255,255,255,0.08); }
.ch-row { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.06); align-items: center; cursor: pointer; transition: all 0.4s var(--ease); }
.ch-row:hover { transform: translateX(12px); }
.ch-icon { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.16); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s var(--ease); }
.ch-row:hover .ch-icon { background: var(--accent); border-color: var(--accent); }
.ch-icon svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.88); fill: none; stroke-width: 1.5; transition: stroke 0.4s var(--ease); }
.ch-row:hover .ch-icon svg { stroke: var(--white); }
.ch-lbl { font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); display: block; margin-bottom: 4px; }
.ch-val { font-family: var(--fh); font-size: 15px; color: var(--white); }
.loc-strip { margin-top: 32px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-radius: 4px; }
.loc-lbl { font-family: var(--fm); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); display: block; margin-bottom: 8px; }
.loc-lbl .hi { font-family: var(--fm); color: var(--accent); letter-spacing: 0.02em; text-transform: none; margin-right: 6px; }
.loc-strip p { font-size: 13px; color: rgba(255,255,255,0.88); line-height: 1.5; }

.cform { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); padding: 36px 32px; position: relative; border-radius: 4px; }
.cform::before { content: ''; position: absolute; top: -1px; left: -1px; width: 40px; height: 40px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.cform::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 40px; height: 40px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.cform { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); padding: 36px 32px; position: relative; border-radius: 4px; }
.form-ttl { font-family: var(--fm); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
.form-ttl::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; display: inline-block; }
.fr { margin-bottom: 16px; }
.fr label { display: block; font-family: var(--fm); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 6px; }
.fr input, .fr select, .fr textarea {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
}
.fr input:focus, .fr select:focus, .fr textarea:focus { border-bottom-color: var(--accent); }
.fr select option { background: var(--ink); }
.fr textarea { resize: vertical; min-height: 60px; }
.form-sub {
  width: 100%;
  margin-top: 16px;
  background: var(--white);
  color: var(--ink);
  border: none;
  padding: 16px;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease);
}
.form-sub::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateY(100%); transition: transform 0.4s var(--ease); z-index: 0; }
.form-sub:hover { color: var(--white); }
.form-sub:hover::after { transform: translateY(0); }
.form-sub span { position: relative; z-index: 1; }

/* ============ FOOTER ============ */
footer { background: #060607; padding: 60px 0 24px; color: var(--white); }
.foot-top { display: grid; grid-template-columns: 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
@media(min-width:800px){ .foot-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-brand { font-family: var(--fh); font-size: 2.4rem; font-weight: 400; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.foot-brand .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.foot-tagline { color: rgba(255,255,255,0.78); font-size: 14px; max-width: 360px; line-height: 1.6; margin-bottom: 24px; }
.foot-hi { font-family: var(--fm); color: rgba(255,255,255,0.78); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; display: inline-block; margin-top: 4px; }
.foot-col-title { font-family: var(--fm); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 20px; display: block; }
.foot-links-col { display: flex; flex-direction: column; gap: 12px; }
.foot-links-col a { color: rgba(255,255,255,0.88); font-size: 14px; transition: color 0.3s var(--ease); }
.foot-links-col a:hover { color: var(--accent); }
.foot-bottom { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-top: 24px; }
@media(min-width:600px){ .foot-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.foot-tag { font-family: var(--fm); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); }

/* ============ REVEAL ANIMATIONS (GSAP-controlled) ============ */
.reveal { opacity: 0; }

/* Text masking for hero headline */
.line-wrap {
  overflow: hidden;
  display: block;
  line-height: inherit;
}
.line-inner {
  display: block;
}

/* Clip-path reveal helper (initial state set by GSAP) */
[data-clip] { clip-path: inset(0 0 100% 0); }

/* Cursor dot */
.cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transition: transform 0.15s var(--ease-out), width 0.3s var(--ease), height 0.3s var(--ease);
  display: none;
  margin-left: -4px;
  margin-top: -4px;
}
@media(min-width:1024px) and (hover:hover){ .cursor-dot { display: block; } }
/* Hero entrance is controlled entirely by GSAP — no CSS fadeUp conflict */

/* ============ GLOBAL DEPTH LAYERS ============ */

/* Grain texture overlay — entire site */
.global-grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.05;
  pointer-events: none;
  z-index: 9000;
}

/* Moving blurred ambient gradients for dark sections */
.amb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  will-change: transform;
}

@keyframes ambDrift1 {
  0%   { transform: translate(0px, 0px) scale(1); }
  38%  { transform: translate(55px, -70px) scale(1.14); }
  72%  { transform: translate(-35px, 42px) scale(0.88); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes ambDrift2 {
  0%   { transform: translate(0px, 0px) scale(1.05); }
  33%  { transform: translate(-62px, 48px) scale(0.9); }
  68%  { transform: translate(40px, -32px) scale(1.1); }
  100% { transform: translate(0px, 0px) scale(1.05); }
}
@keyframes ambDrift3 {
  0%   { transform: translate(0px, 0px) scale(0.95); }
  50%  { transform: translate(28px, 60px) scale(1.1); }
  100% { transform: translate(0px, 0px) scale(0.95); }
}

/* ==========================================================
   CURSOR RING
   ========================================================== */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1px solid rgba(59,59,64,0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  display: none;
  margin-left: -19px;
  margin-top: -19px;
  transition: width 0.4s var(--ease), height 0.4s var(--ease),
              border-color 0.3s var(--ease), opacity 0.3s;
  opacity: 0.75;
}
@media(min-width:1024px) and (hover:hover){ .cursor-ring { display: block; } }
.cursor-ring.hovering {
  width: 56px; height: 56px;
  border-color: var(--accent);
  opacity: 0.4;
}
.cursor-ring.clicking {
  width: 22px; height: 22px;
  opacity: 1;
}

/* ==========================================================
   MARQUEE: PAUSE ON HOVER
   ========================================================== */
.hero-marquee:hover .marquee-track { animation-play-state: paused; }

/* ==========================================================
   DRAWER LINKS — underline grows from left
   ========================================================== */
.drawer a {
  position: relative;
  overflow: hidden;
}
.drawer a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: rgba(255,255,255,0.4);
  transition: width 0.4s var(--ease);
}
.drawer a:hover::after { width: 100%; }
/* reset stale closed-state opacity when drawer is not open */
.drawer:not(.open) a { opacity: 0; transform: translateY(18px); }

/* ==========================================================
/* ==========================================================
   MAGNETIC BUTTONS
   ========================================================== */
.btn { will-change: transform; }

/* ==========================================================
   LAB SECTION — HUD OVERLAY
   ========================================================== */
#lab { position: relative; overflow: hidden; }

.lab-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.lab-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(26,26,26,0.013) 3px,
    rgba(26,26,26,0.013) 4px
  );
  pointer-events: none;
  z-index: 1;
}
.lab-hud-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 48px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--stone);
  text-transform: uppercase;
  background: transparent;
  z-index: 4;
}
.hud-stat { display: inline-flex; align-items: center; gap: 6px; }
.hud-right { margin-left: auto; }
.hud-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: hudBlink 2.4s ease-in-out infinite;
}
.hud-dot.ok  { background: #4ade80; }
.hud-dot.warn{ background: #facc15; animation-delay: 0.7s; }
@keyframes hudBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.12; }
}
.lab-float-num {
  position: absolute;
  font-family: var(--fm);
  font-size: 9px;
  color: var(--accent);
  opacity: 0;
  letter-spacing: 0.12em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 2;
}
.lab-blink {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: hudBlink 1.9s ease-in-out infinite;
}

/* ==========================================================
   SECTION SCROLL PIN — ensure sections fill viewport when pinned
   ========================================================== */
#process {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   All fixes for: mission steps, services animations,
   comparison table, workflow timeline, general layout
   ============================================================ */

/* --- Process: disable min-height lock on mobile --- */
@media (max-width: 767px) {
  #process {
    min-height: 0;
    display: block;
    padding: 80px 0;
  }
}

/* --- Mission layout on mobile --- */
@media (max-width: 767px) {
  .mission-visual {
    min-height: 200px;
    padding: 20px;
  }
  .m-item {
    padding: 16px 18px;
    gap: 14px;
  }
  .m-item .m-tag {
    display: none;
  }
  .mission-top {
    margin-bottom: 40px;
  }
  .mission-accordion {
    gap: 10px;
  }
}

/* --- Services: show SVG animations by default on touch/mobile --- */
@media (hover: none) {
  .svc-card .svc-visual .visual-image { opacity: 0; }
  .svc-card .svc-visual .visual-placeholder { opacity: 1; }
  .svc-card .svc-visual { background: var(--paper-2); }
}
@media (max-width: 767px) {
  .svc-card { min-height: 380px; }
  .svc-card .svc-visual { height: 200px; }
}

/* --- Comparison table (005 · Why Curí) — mobile card layout --- */
@media (max-width: 640px) {
  .vs-scroll { overflow-x: visible; }

  .vs-row {
    display: block;
    min-width: 0;
    border-bottom: 1px solid var(--line);
  }
  .vs-row:last-child { border-bottom: none; }

  /* Hide desktop header row — column labels shown inline */
  .vs-row.vs-head { display: none; }

  /* All cells: reset desktop grid layout */
  .vs-cell {
    display: flex;
    border-right: none;
    padding: 12px 16px;
    font-size: 13px;
  }

  /* Feature label — full width bar */
  .vs-cell.label {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 500;
    padding: 13px 16px;
    color: var(--ink);
    border-right: none;
  }

  /* Curí value — with inline column tag */
  .vs-cell.yes {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
    padding-right: 52px;
  }
  .vs-cell.yes::after {
    content: 'curí';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--fm);
    font-size: 9px;
    color: var(--accent);
    letter-spacing: 0.1em;
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 2px 8px;
    border-radius: 100px;
  }

  /* Commodity value — with inline column tag */
  .vs-cell.no {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    position: relative;
    padding-right: 70px;
  }
  .vs-cell.no::after {
    content: 'others';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--fm);
    font-size: 9px;
    color: var(--ash);
    letter-spacing: 0.1em;
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 2px 8px;
    border-radius: 100px;
  }
}

/* --- Process timeline — hide horizontal line on non-desktop --- */
@media (max-width: 999px) {
  .proc-line { display: none; }
  .proc-step { padding-top: 20px; }
}

/* --- Process timeline — vertical style on mobile --- */
@media (max-width: 599px) {
  .proc-steps {
    padding-left: 24px;
    border-left: 1px solid var(--line);
    gap: 0;
  }
  .proc-step {
    padding-top: 0;
    padding-left: 12px;
    padding-bottom: 32px;
  }
  .proc-step:last-child {
    padding-bottom: 0;
  }
  .proc-step .p-dot {
    top: 4px;
    left: -31px;
    z-index: 1;
    background: var(--paper);
  }
}

/* --- Capabilities panels on mobile (vertical stack, no horizontal resize) --- */
@media (max-width: 899px) {
  .cap-layout {
    gap: 8px;
  }
  .cap-panel {
    flex: none !important;
  }
  .cap-panel .cap-full {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    pointer-events: auto;
    min-width: 0;
    padding: 24px;
    min-height: 0;
  }
  .cap-panel .cap-rail-view {
    display: none;
  }
  .cap-panel.active .cap-rail-view {
    display: none;
  }
  .cap-full-visual { min-height: 160px; margin-top: 16px; }
  .cap-full-header h3 { font-size: 1.3rem; }
}

/* --- General section padding on mobile --- */
@media (max-width: 767px) {
  #mission,
  #usecases,
  #services,
  #capabilities,
  #comparison,
  #lab,
  #quality,
  #industries,
  #cases,
  #contact { padding: 80px 0; }

  #hero { padding: 120px 0 60px; }

  .section-head { margin-bottom: 40px; }

  /* Hero visual smaller on mobile */
  .hero-visual { aspect-ratio: 1 / 0.9; }

  /* Pathways nav + panels on mobile */
  .uc-top { grid-template-columns: 1fr; gap: 32px; }
  .uc-nav-item { padding: 14px 0; }
  .uc-nav-item .uc-name { font-size: 13px; }

  /* Lab HUD bar simplified */
  .lab-hud-bar { padding: 0 16px; gap: 12px; font-size: 8px; }
  .hud-stat:nth-child(3) { display: none; }

  /* Micro strip */
  .micro-strip { padding: 28px 20px; }
  .ms-list { grid-template-columns: 1fr 1fr; }

  /* Case cards */
  .case-card { padding: 24px 20px; }

  /* Contact form */
  .cform { padding: 28px 20px; }
  .loc-strip { grid-template-columns: 1fr; gap: 16px; }

  /* Footer */
  .foot-brand { font-size: 1.8rem; }
}

/* ==========================================================
   FOCUS VISIBLE — keyboard accessibility
   ========================================================== */
a:focus-visible,
button:focus-visible,
.svc-card:focus-visible,
.case-card:focus-visible,
.ind-row:focus-visible,
.m-item:focus-visible,
.uc-nav-item:focus-visible,
.cap-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Form fields already use border-bottom change on :focus;
   add a fallback ring for keyboard-only navigation */
.fr input:focus-visible,
.fr select:focus-visible,
.fr textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================
   PREFERS-REDUCED-MOTION — accessibility + battery
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Kill all CSS animations and shorten transitions */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Make GSAP-initially-hidden elements visible */
  .reveal,
  .hero-title .line-inner,
  .hero-meta,
  .hero-sub,
  .hero-marquee,
  .mission-visual {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}

/* ==========================================================
   SITE LOADER — full-screen airlock panel entry
   ========================================================== */
body.is-loading { overflow: hidden; }

#siteLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: all;
}

/* Two panels that split apart on exit */
.sl-top,
.sl-bot {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: #0d0d0e;
  will-change: transform;
}
.sl-top { top: 0; }
.sl-bot { bottom: 0; }

/* Stage sits in front of both panels */
.sl-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
}

/* Corner targeting marks — 4 L-shaped reticle marks */
.sl-c {
  position: absolute;
  width: 20px;
  height: 20px;
}
.sl-c::before,
.sl-c::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.18);
}
.sl-c::before { width: 1px; height: 100%; }
.sl-c::after  { height: 1px; width: 100%; }

.sl-c1 { top: 36px; left: 44px; }
.sl-c1::before { top: 0;    left: 0;  }
.sl-c1::after  { top: 0;    left: 0;  }

.sl-c2 { top: 36px; right: 44px; }
.sl-c2::before { top: 0;    right: 0; }
.sl-c2::after  { top: 0;    right: 0; }

.sl-c3 { bottom: 36px; left: 44px; }
.sl-c3::before { bottom: 0; left: 0;  }
.sl-c3::after  { bottom: 0; left: 0;  }

.sl-c4 { bottom: 36px; right: 44px; }
.sl-c4::before { bottom: 0; right: 0; }
.sl-c4::after  { bottom: 0; right: 0; }

/* Center content block */
.sl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.sl-wordmark {
  font-family: var(--fh);
  font-size: clamp(3.5rem, 10vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1;
}

.sl-tagline {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
}

.sl-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(260px, 65vw);
  margin-top: 8px;
}

.sl-track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.sl-fill {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.6);
  will-change: width;
}

.sl-pct-row {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  gap: 1px;
}

.sl-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
}

.sl-blink {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: slBlink 1.3s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes slBlink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.1; }
}

/* Horizontal scan line that sweeps downward on repeat */
.sl-scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    transparent 100%
  );
  top: 0;
  will-change: transform;
  pointer-events: none;
}

/* ==========================================================
   SKELETON SHIMMER — cases section placeholder
   ========================================================== */
.sk-wrap {
  position: relative;
}

.sk-grid {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  pointer-events: none;
}

.sk-cases { grid-template-columns: 1fr; }
@media (min-width: 900px) { .sk-cases { grid-template-columns: 1fr 1fr; } }

.sk-card {
  background: var(--paper);
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

.sk-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skShimmer 1.9s ease-in-out infinite;
}

@keyframes skShimmer {
  0%   { background-position: 200% 0;  }
  100% { background-position: -200% 0; }
}

/* ================================================================
   REFLECTIONS INTRO
   ================================================================ */
.reflections-intro {
  background: var(--white);
  padding: 120px 0 24px;
}
.reflections-intro .container {
  max-width: 1200px;
  padding: 0 10vw 0 5vw; /* Shifted slightly more to the right */
  margin: 0 auto 0 0;
}
.reflections-intro .ri-text {
  font-family: var(--fh);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  max-width: none;
  margin: 0;
}
.reflections-intro .ri-black {
  display: block;
  width: 100%;
  text-align: left;
  color: #000;
  /* vw-based so the single line scales to fit; capped so it never overflows wide screens */
  font-size: clamp(1.9rem, 4.6vw, 4rem);
  line-height: 1;
  white-space: nowrap;
}
.reflections-intro .ri-gray {
  display: block;
  text-align: left;
  color: #787875;
  font-size: clamp(1.15rem, 2.7vw, 2.2rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-top: 0.5em;
  /* flow naturally into longer lines, reaching roughly under "and" in the line above */
  max-width: 62%;
}
@media (max-width: 768px) {
  .reflections-intro { padding: 80px 0 24px; }
  .reflections-intro .container { padding: 0 6vw; }
  .reflections-intro .ri-black { text-align: left; margin-bottom: 0.2em; white-space: normal; }
  .reflections-intro .ri-gray { white-space: normal !important; max-width: 100%; }
  .reflections-intro .ri-gray br { display: none; }
}

/* ================================================================
   PIN SECTION — "Science shaped by intention"
   Positioned between 005 · Why Curí and 006 · Instrumentation
   ================================================================ */
.pin-section {
  --pin-paper: #ffffff;
  --pin-ink: #111110;
  --pin-muted: #8a8780;
  --pin-rule: #e7e3d9;
  --pin-accent: #3b3b40;

  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--pin-paper);
  color: var(--pin-ink);
  position: relative;
  display: grid;
  place-items: center;
}

/* wrapper for the headline — sits above all cards */
.pin-section .pin-headline-wrap {
  position: relative;
  z-index: 6;
  will-change: transform;
  pointer-events: none;
}

.pin-section .pin-headline {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  letter-spacing: -0.012em;
  padding: 0.65rem 1.1rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  text-shadow:
    0 0 12px rgba(255,255,255,1),
    0 0 28px rgba(255,255,255,0.95),
    0 0 56px rgba(255,255,255,0.85);
}
.pin-section .pin-headline .pin-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--pin-accent);
  border-radius: 50%;
  margin-left: 0.4rem;
  transform: translateY(-2px);
}

.pin-section .pin-meta {
  position: absolute;
  top: 5rem;
  left: 2rem;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--stone);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.pin-section .pin-meta .pin-label {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--stone);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
}
.pin-section .pin-progress {
  width: 90px;
  height: 1px;
  background: var(--pin-rule);
  position: relative;
  overflow: hidden;
}
.pin-section .pin-progress .pin-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--pin-ink);
}

.pin-section .pin-meta-right {
  position: absolute;
  top: 5rem;
  right: 2rem;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--pin-muted);
  z-index: 6;
}

.pin-section .pin-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.pin-section .pin-card {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  background: transparent;
  margin: 0;
  pointer-events: auto;
}

/* Inner wrapper holds the visual + handles the shake.
   The outer .pin-card keeps its GSAP transform untouched. */
.pin-section .pin-card-inner {
  position: absolute;
  inset: 0;
  background: #f4f1ea;
  overflow: hidden;
  box-shadow: 0 22px 60px -28px rgba(20, 16, 10, 0.35),
              0 1px 0 rgba(20, 16, 10, 0.04);
  will-change: transform;
  transition: transform 0.4s ease-out;
}

.pin-section .pin-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* GPU-composite the image so fast scrubbing never re-rasterizes it
     mid-flight (fixes flicker / doubling artifacts) */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* whole-frame sway: when any card is hovered, all inner wrappers drift */
@keyframes pin-frame-sway {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(0); }
  75%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.pin-section.is-shaking .pin-card-inner {
  animation: pin-frame-sway 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pin-section.is-shaking .pin-card-inner { animation: none; }
}

.pin-section .pin-cap {
  position: absolute;
  left: 4px;
  bottom: -1.2rem;
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pin-muted);
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}

/* Larger, more present positions — spread across both halves */
.pin-section .pin-c1  { left: 3%;   top: 8%;     width: 19vw; height: 24vw; }
.pin-section .pin-c2  { left: 22%;  top: -3%;    width: 22vw; height: 15vw; }
.pin-section .pin-c3  { left: 44%;  top: 6%;     width: 15vw; height: 20vw; }
.pin-section .pin-c4  { right: 18%; top: -5%;    width: 23vw; height: auto; }
.pin-section .pin-c5  { right: 2%;  top: 18%;    width: 18vw; height: 22vw; }
.pin-section .pin-c6  { left: 8%;   bottom: 4%;  width: 22vw; height: auto; }
/* 004 & 006 — natural rectangle, no cropping */
.pin-section .pin-c4 .pin-card-inner,
.pin-section .pin-c6 .pin-card-inner { position: relative; inset: unset; }
.pin-section .pin-c4 img,
.pin-section .pin-c6 img { height: auto; object-fit: initial; }
.pin-section .pin-c7  { right: 4%;  bottom: 2%;  width: 19vw; height: 24vw; }
.pin-section .pin-c8  { left: 48%;  bottom: 10%; width: 16vw; height: 20vw; }
.pin-section .pin-c9  { left: 28%;  bottom: 6%;  width: 18vw; height: 14vw; }
.pin-section .pin-c10 { right: 26%; bottom: 8%;  width: 17vw; height: 21vw; }
.pin-section .pin-c11 { left: 14%;  top: 22%;    width: 16vw; height: 12vw; }
.pin-section .pin-c12 { right: 12%; top: 30%;    width: 20vw; height: 13vw; }
.pin-section .pin-c13 { left: 38%;  top: 28%;    width: 14vw; height: 19vw; }

@media (max-width: 768px) {
  .pin-section .pin-c1  { left: 2%;  top: 4%;     width: 42vw; height: 50vw; }
  .pin-section .pin-c2  { left: 50%; top: -2%;    width: 44vw; height: 30vw; }
  .pin-section .pin-c3  { display: none; }
  .pin-section .pin-c4  { right: 3%; top: 4%;     width: 44vw; height: auto; }
  .pin-section .pin-c5  { right: 4%; top: 38%;    width: 40vw; height: 48vw; }
  .pin-section .pin-c6  { left: 4%;  bottom: 6%;  width: 46vw; height: auto; }
  .pin-section .pin-c7  { right: 4%; bottom: 2%;  width: 42vw; height: 50vw; }
  .pin-section .pin-c8  { display: none; }
  .pin-section .pin-c9  { left: 6%;  bottom: 4%;  width: 44vw; height: 30vw; }
  .pin-section .pin-c10 { display: none; }
  .pin-section .pin-c11 { display: none; }
  .pin-section .pin-c12 { display: none; }
  .pin-section .pin-c13 { display: none; }
  .pin-section .pin-meta-right { display: none; }
}