/* ============================================================
   LionPil v6 — "Karanlık Laboratuvar"
   Dark-committed design system. Single look, no theme toggle.
   ============================================================ */

:root {
  /* Surfaces */
  --void: #04060a;
  --void-2: #070a10;
  --surface: #0c1119;
  --surface-2: #121926;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);

  /* Type */
  --text: #e9edf3;
  --muted: #98a3b3;
  --muted-2: #6c7889;

  /* Brand + material palette (matches the 3D scene) */
  --accent: #f6c21b;
  --accent-2: #ffd95e;
  --cathode: #ff7a3d;
  --anode: #5b6675;
  --separator: #dfe6ef;
  --rim: #6f7dff;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Metrics */
  --radius: 4px;
  --radius-lg: 10px;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1320px;

  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Film grain + vignette — gives the "lab photograph" texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

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

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

::selection {
  background: var(--accent);
  color: var(--void);
}

/* ============================================================
   THE SCENE CANVAS — one fixed WebGL layer behind all content
   ============================================================ */
#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

#scene.ready {
  opacity: 1;
}

/* Once the teardown has told its story the cell steps back, so the
   remaining sections read as content rather than competing with it. */
#scene.receded {
  opacity: .2;
}

/* On a phone there is no room to put the cell beside the copy — it sits
   directly behind it. Hold it back so body text stays legible. */
@media (max-width: 900px) {
  #scene.ready {
    opacity: .5;
  }

  #scene.receded {
    opacity: .12;
  }
}

/* Fallback glow when WebGL is unavailable / reduced motion */
.scene-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vh at 72% 34%, rgba(246, 194, 27, .16), transparent 60%),
    radial-gradient(50vw 50vh at 20% 70%, rgba(111, 125, 255, .12), transparent 60%);
}

/* All page content rides above the canvas.
   Deliberately NO z-index here: giving .shell its own stacking context
   would trap the lightbox and mobile nav underneath the grain overlay. */
.shell {
  position: relative;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sec {
  position: relative;
  padding: clamp(90px, 14vh, 170px) 0;
}

.sec--tight {
  padding: clamp(60px, 9vh, 110px) 0;
}

/* Hairline rules that read as lab instrument markings */
.sec + .sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Section eyebrow: mono, tracked, with an index number */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: .6;
}

.eyebrow__idx {
  color: var(--muted-2);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.4rem, 6.6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.042em;
}

.h-sec {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  margin-bottom: 18px;
}

.h-card {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  letter-spacing: -.02em;
}

.lede {
  font-size: clamp(1rem, 1.35vw, 1.175rem);
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.65;
}

.dim {
  color: var(--muted);
}

.accent {
  color: var(--accent);
}

/* Word-by-word reveal (JS wraps words in .rv > span) */
.rv {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.rv > span {
  display: inline-block;
  will-change: transform;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}

/* Liquid fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}

.btn:hover::before {
  transform: translateY(0);
}

.btn:hover {
  color: var(--void);
  border-color: var(--accent);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--void);
}

.btn--primary::before {
  background: var(--accent-2);
}

.btn--primary:hover {
  color: var(--void);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 11px 20px;
  font-size: 13px;
}

.btn__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 18px 0;
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease),
    border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom: 1px solid transparent;
}

.hdr.stuck {
  padding: 11px 0;
  background: rgba(4, 6, 10, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  position: relative;
  padding: 9px 15px;
  font-size: 14px;
  color: var(--muted);
  transition: color .3s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.nav a:hover,
.nav a.active {
  color: var(--text);
}

.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
}

.hdr__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Hamburger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--text);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}

.burger.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 1040px) {
  .nav {
    display: none;
  }

  .burger {
    display: flex;
  }

  .hdr__cta .btn {
    display: none;
  }
}

/* Mobile nav */
.mnav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  width: min(420px, 88vw);
  height: 100dvh;
  padding: 104px var(--gutter) 40px;
  background: var(--void-2);
  border-left: 1px solid var(--line);
  transform: translateX(102%);
  transition: transform .6s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.mnav.active {
  transform: translateX(0);
}

.mnav a {
  padding: 15px 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}

.mnav a:hover {
  color: var(--accent);
  padding-left: 10px;
}

.mnav .btn {
  margin-top: 24px;
  border-bottom: none;
  padding: 16px 30px;
  font-size: 14px;
  font-family: var(--font-body);
}

.mnav__x {
  position: absolute;
  top: 26px;
  right: var(--gutter);
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}

.mnav-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(2, 4, 8, .7);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}

.mnav-veil.active {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 60px;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
  backdrop-filter: blur(8px);
}

.hero__tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: ping 2.4s var(--ease-in-out) infinite;
}

@keyframes ping {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);
  }
}

/* Keep the headline clear of the cell parked in the right third */
.hero__title {
  max-width: 13ch;
}

.hero__sub {
  max-width: 44ch;
}

@media (max-width: 900px) {

  .hero__title,
  .hero__sub {
    max-width: 100%;
  }
}

.hero__title .line2 {
  display: block;
  color: var(--accent);
}

.hero__sub {
  margin-top: 30px;
  max-width: 52ch;
}

.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}

.chip {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* iOS motion opt-in — only injected when the sensor needs permission */
.chip--tilt {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(246, 194, 27, .07);
  font-family: var(--font-body);
  cursor: pointer;
}

.chip--tilt::before {
  content: "◇";
  margin-right: 7px;
  opacity: .8;
}

/* ============================================================
   PAGE HERO — subpages. No WebGL scene here: a 670KB library on
   every page to render one idle cell is not a trade worth making.
   ============================================================ */
.page-hero {
  position: relative;
  padding: clamp(130px, 19vh, 190px) 0 clamp(50px, 8vh, 80px);
}

/* The hero already supplies the breathing room above the first
   section, so don't stack another block of padding on top of it. */
.page-hero + .sec {
  padding-top: 0;
}

.page-hero__title {
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.04em;
  max-width: 17ch;
}

.page-hero__title .accent {
  display: block;
}

.page-hero .lede {
  margin-top: 24px;
}

/* Breadcrumb */
.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}

.crumb a:hover {
  color: var(--accent);
}

.crumb span {
  opacity: .5;
}

/* Comparison / spec tables */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-top: 30px;
}

table.t {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

table.t th,
table.t td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

table.t th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 255, 255, .02);
  white-space: nowrap;
}

table.t td {
  color: var(--muted);
}

table.t td:first-child {
  color: var(--text);
  font-weight: 600;
}

table.t tr:last-child td {
  border-bottom: none;
}

/* Spec strip inside a card */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.spec div {
  background: var(--surface);
  padding: 14px 16px;
}

.spec dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 5px;
}

.spec dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* Bullet lists inside cards */
.bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 9px;
}

.bullets li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* Pro / con chips */
.tagrow span.pro {
  border-color: rgba(34, 197, 94, .32);
  color: #8ce4ad;
}

.tagrow span.con {
  border-color: rgba(239, 68, 68, .32);
  color: #f0a5a5;
}

/* Inline note inside a card */
.note {
  margin-top: 20px;
  padding: 15px 17px;
  border-left: 2px solid var(--accent);
  background: rgba(246, 194, 27, .04);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.note__t {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.note__d {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.card__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 5px;
}

/* Emphasised cell in a comparison table */
table.t td.hi {
  color: var(--text);
  font-weight: 600;
}

table.t td.hi::before {
  content: "→ ";
  color: var(--accent);
}

/* Callout band */
.callout {
  margin-top: 40px;
  padding: 32px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(246, 194, 27, .04);
}

.callout__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 9px;
}

.callout__desc {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 68ch;
}

/* Scroll cue */
.cue {
  position: absolute;
  left: var(--gutter);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cue__rail {
  position: relative;
  width: 54px;
  height: 1px;
  background: var(--line-strong);
  overflow: hidden;
}

.cue__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: rail 2.2s var(--ease-in-out) infinite;
}

@keyframes rail {
  0% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

/* ============================================================
   EXPLODED-CELL SCROLL SEQUENCE  (the showpiece)
   Tall section; the fixed canvas animates against its progress.
   ============================================================ */
.teardown {
  position: relative;
}

.teardown__rail {
  height: 420vh;
  /* scroll distance the disassembly is spread across */
}

.teardown__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* Layer cards all stack in the same spot and cross-fade on scroll,
   so the container needs its own positioning context and a floor height. */
.teardown__copy {
  position: relative;
  max-width: 38ch;
  min-height: 300px;
  pointer-events: auto;
}

/* Layer readout cards — each fades in at its own scroll beat */
.layer {
  position: absolute;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.layer__k {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}

.layer__k b {
  color: var(--accent);
  font-weight: 500;
}

.layer__t {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}

.layer__d {
  color: var(--muted);
  font-size: 15px;
  max-width: 34ch;
  line-height: 1.62;
}

.layer__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: middle;
}

/* Progress meter down the right edge of the teardown */
.meter {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}

.meter__step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color .45s var(--ease);
}

.meter__step i {
  width: 26px;
  height: 1px;
  background: var(--line-strong);
  transition: background .45s var(--ease), width .45s var(--ease);
}

.meter__step.on {
  color: var(--text);
}

.meter__step.on i {
  width: 46px;
  background: var(--accent);
}

@media (max-width: 900px) {
  .meter {
    display: none;
  }

  .teardown__rail {
    height: 300vh;
  }
}

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid {
  display: grid;
  gap: 18px;
}

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

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

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1040px) {

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Glass panel with a cursor-tracked spotlight */
.card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(12, 17, 25, .56);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
      rgba(246, 194, 27, .11), transparent 62%);
}

.card:hover::before {
  opacity: 1;
}

.card:hover {
  border-color: var(--line-strong);
}

.card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}

.card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent);
  margin-bottom: 20px;
  background: rgba(246, 194, 27, .05);
}

.card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.66;
  margin: 12px 0 0;
}

.tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.tagrow span {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--muted-2);
}

/* ============================================================
   CATEGORIES
   ============================================================ */
.cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1040px) {
  .cats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .cats {
    grid-template-columns: 1fr;
  }
}

.cat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.2;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.42) contrast(1.15);
  transform: scale(1.04);
  transition: filter .7s var(--ease), transform .9s var(--ease);
}

.cat:hover img {
  filter: grayscale(0) brightness(.62) contrast(1.05);
  transform: scale(1.11);
}

.cat__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(4, 6, 10, .88) 100%);
}

.cat__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
}

.cat__t {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat__t svg {
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  color: var(--accent);
}

.cat:hover .cat__t svg {
  opacity: 1;
  transform: translateX(0);
}

.cat__s {
  font-size: 12.5px;
  color: var(--muted-2);
  margin-top: 5px;
}

.cat--ask {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background:
    linear-gradient(rgba(12, 17, 25, .6), rgba(12, 17, 25, .6)),
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(246, 194, 27, .05) 9px 18px);
}

/* ============================================================
   PROCESS — numbered lab protocol
   ============================================================ */
.steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 26px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease);
}

.step:hover {
  background: rgba(246, 194, 27, .022);
}

.step__n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent);
  padding-top: 5px;
}

.step__t {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.025em;
  margin-bottom: 9px;
}

.step__d {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 68ch;
  line-height: 1.66;
}

@media (max-width: 680px) {
  .step {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ============================================================
   MARQUEE (cell brands)
   ============================================================ */
.marq {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marq__track {
  display: flex;
  width: max-content;
  gap: 60px;
  animation: marq 34s linear infinite;
}

.marq:hover .marq__track {
  animation-play-state: paused;
}

.marq__track span {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .26);
  white-space: nowrap;
  transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}

.marq__track span:hover {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

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

/* ============================================================
   GALLERY (DOM contract from js/main.js must be preserved)
   ============================================================ */
.count-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.gal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 22px;
}

.gal-filter {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all .35s var(--ease);
}

.gal-filter:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.gal-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--void);
  font-weight: 600;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.gal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(12, 17, 25, .5);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}

.gal-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.gal-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.gal-pair--tek {
  grid-template-columns: 1fr;
}

.gal-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--void-2);
  overflow: hidden;
  cursor: pointer;
}

.gal-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.gal-shot:hover img {
  transform: scale(1.06);
}

.gal-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(4, 6, 10, .8);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.gal-tag--sonra {
  background: var(--accent);
  color: var(--void);
  font-weight: 600;
}

.gal-more {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(4, 6, 10, .8);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
}

.gal-meta {
  padding: 18px 20px 20px;
}

.gal-meta__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.gal-meta__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.gal-meta__desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

.gal-empty {
  padding: 30px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  margin-top: 20px;
}

/* Lightbox */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 4, 8, .93);
  backdrop-filter: blur(10px);
}

.lb-overlay.active {
  display: flex;
}

.lb-box {
  width: min(1100px, 100%);
}

.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-stage .gal-shot {
  flex: 1;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  cursor: default;
}

.lb-stage .gal-shot img {
  object-fit: contain;
  background: var(--void-2);
}

.lb-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(4, 6, 10, .7);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  transition: all .3s var(--ease);
}

.lb-close:hover {
  background: var(--accent);
  color: var(--void);
  border-color: var(--accent);
}

.lb-nav {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(12, 17, 25, .8);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all .3s var(--ease);
}

.lb-nav:hover {
  background: var(--accent);
  color: var(--void);
  border-color: var(--accent);
}

.lb-meta {
  margin-top: 18px;
  text-align: center;
}

.lb-sayac {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted-2);
  margin-top: 10px;
}

/* ============================================================
   WIZARD (DOM contract from js/main.js must be preserved)
   ============================================================ */
.wiz {
  max-width: 760px;
  margin: 40px auto 0;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(12, 17, 25, .6);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.wiz__progress {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 30px;
}

.wiz__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s var(--ease);
}

.wiz__step-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}

.wiz__q {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.025em;
  margin-bottom: 24px;
}

.wiz__opts {
  display: grid;
  gap: 9px;
  margin-bottom: 26px;
}

.wiz-opt {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  transition: all .3s var(--ease);
}

.wiz-opt:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .025);
}

.wiz-opt__dot {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: all .3s var(--ease);
}

.wiz-opt.selected {
  border-color: var(--accent);
  background: rgba(246, 194, 27, .07);
}

.wiz-opt.selected .wiz-opt__dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--void);
}

.wiz__nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wiz-result {
  padding: 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: 22px;
  border-left-width: 3px;
}

.wiz-result--ok {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, .05);
}

.wiz-result--warn {
  border-left-color: var(--accent);
  background: rgba(246, 194, 27, .05);
}

.wiz-result--danger {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, .05);
}

.wiz-result__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 11px;
}

.wiz-result__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.025em;
  margin-bottom: 9px;
}

.wiz-result__desc {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.66;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  border-top: 1px solid var(--line);
  max-width: 900px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 0;
  cursor: pointer;
}

.faq-question h4 {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--muted);
  transition: color .35s var(--ease);
}

.faq-item:hover .faq-question h4,
.faq-item.active .faq-question h4 {
  color: var(--text);
}

.faq-icon {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0;
  transition: all .4s var(--ease);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.active .faq-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--void);
}

.faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease);
}

.faq-item.active .faq-answer {
  max-height: 460px;
}

.faq-answer-inner {
  padding: 0 0 26px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 74ch;
}

/* ============================================================
   CONTACT
   ============================================================ */
.kv {
  border-top: 1px solid var(--line);
}

.kv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.kv__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.kv__v {
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

.kv__v a:hover {
  color: var(--accent);
}

.textarea {
  width: 100%;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(4, 6, 10, .6);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.72;
  resize: vertical;
}

.textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.acts {
  display: grid;
  gap: 10px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
}

.ftr__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.ftr__nav a {
  font-size: 14px;
  color: var(--muted);
  transition: color .3s var(--ease);
}

.ftr__nav a:hover {
  color: var(--accent);
}

.ftr__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 13.5px;
  color: var(--muted-2);
}

.ftr a:hover {
  color: var(--accent);
}

.ftr__social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ftr__social img {
  width: 17px;
  height: 17px;
}

/* ============================================================
   FLOATING CONTROLS
   ============================================================ */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #1faf54;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 14px 40px rgba(31, 175, 84, .3);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(31, 175, 84, .42);
}

.wa-float img {
  width: 19px;
  height: 19px;
}

.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 79;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(12, 17, 25, .85);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .45s var(--ease);
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--accent);
  color: var(--void);
  border-color: var(--accent);
}

@media (max-width: 560px) {
  .wa-float span {
    display: none;
  }

  .wa-float {
    padding: 15px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .teardown__rail {
    height: auto;
  }

  .teardown__stage {
    position: relative;
    height: auto;
    padding: 60px 0;
  }

  .layer {
    position: relative;
    opacity: 1;
    transform: none;
    margin-bottom: 40px;
  }
}