/* ─────────────────────────────────────────────
   EarFit · Awwwards-grade dark site
   ───────────────────────────────────────────── */

:root {
  --font-main: "Outfit", sans-serif;
  --bg: #000000;
  --bg-soft: #0d0d0f;
  --bg-card: #111114;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #ededed;
  --text-dim: #8a8a8c;
  --text-faint: #5a5a5c;
  --titan: #e3bfff;
  --titan-2: #f3e6ff;
  --titan-glow: 227, 191, 255;
  --accent: #6effd0;
  --blueprint: #8aa7ff;
  --blueprint-rgb: 138, 167, 255;
  --text-gradient: linear-gradient(120deg, var(--titan-2), var(--titan), #b088ff);
  --radius: 8px;
  --easing: cubic-bezier(0.6, 0.1, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); }
html { scroll-behavior: auto; }
body {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
body::before {
  display: none;
}
@media (max-width: 900px) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
main { position: relative; isolation: isolate; }

.italic { font-family: var(--font-main); font-style: normal; font-weight: 500; letter-spacing: -0.02em; }
.mono { font-family: var(--font-main); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.muted { color: var(--text-dim); }

/* ░░░ Loader ░░░ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.055), transparent 20%),
    radial-gradient(circle at 50% 56%, rgba(209, 168, 255, 0.08), transparent 24%),
    #000;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.85s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader.is-done .loader__inner {
  transform: translateY(-10px) scale(0.985);
  opacity: 0;
}
.loader__inner {
  width: min(340px, 76vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0) scale(1);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
}
.loader__brand {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 34px;
  animation: loaderBrandIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.loader__logo {
  height: 42px; width: auto; display: block;
  opacity: 0.96;
  filter: drop-shadow(0 18px 42px rgba(209, 168, 255, 0.16));
}
.loader__bar {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.34);
}
.loader__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffffff, #d1a8ff 62%, #8aa7ff);
  box-shadow: 0 0 24px rgba(209, 168, 255, 0.28);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.loader__meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--font-main);
  font-size: 12px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.52);
}

@keyframes loaderBrandIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ░░░ Cursor ░░░ */
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9000; mix-blend-mode: difference; }
.cursor__dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%);
}
.cursor__ring {
  position: absolute; width: 36px; height: 36px; border: 1px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--easing), height 0.3s var(--easing), opacity 0.3s;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; }
.cursor.is-hide { opacity: 0; }
@media (max-width: 900px) { .cursor { display: none; } }

/* ░░░ Grain ░░░ */
.grain {
  display: none;
}
@keyframes grain {
  0%   { transform: translate(0,0) }
  10%  { transform: translate(-3%,-2%) }
  20%  { transform: translate(2%,3%) }
  30%  { transform: translate(-2%,1%) }
  40%  { transform: translate(3%,-3%) }
  50%  { transform: translate(-3%,2%) }
  60%  { transform: translate(2%,-2%) }
  70%  { transform: translate(-1%,3%) }
  80%  { transform: translate(2%,1%) }
  90%  { transform: translate(-2%,-1%) }
  100% { transform: translate(0,0) }
}

/* ░░░ Nav ░░░ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(56px, 7vw, 132px);
  transition: backdrop-filter 0.4s, background 0.4s, padding 0.4s;
}
.nav.is-scrolled {
  backdrop-filter: blur(16px);
  background: rgba(6, 6, 7, 0.55);
  border-bottom: 1px solid var(--line);
  padding: 14px clamp(56px, 7vw, 132px);
}
.nav__logo {
  display: inline-flex; align-items: center;
  height: 48px;
  color: var(--text);
}
.nav__logo-img {
  height: 36px; width: auto; display: block;
  transition: opacity 0.3s var(--easing), transform 0.6s var(--easing);
}
.nav__logo:hover .nav__logo-img {
  opacity: 0.78;
  transform: scale(0.97);
}
.nav.is-scrolled .nav__logo-img { height: 30px; }
.nav__links {
  display: flex; align-items: center; gap: 28px;
  font-size: 13px; color: var(--text-dim);
}
.nav__links a { transition: color 0.3s; position: relative; }
.nav__links a:hover { color: var(--text); }
.nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__dropdown-trigger svg {
  opacity: 0.72;
  transition: transform 0.28s var(--easing), opacity 0.28s var(--easing);
}
.nav__dropdown:hover .nav__dropdown-trigger,
.nav__dropdown:focus-within .nav__dropdown-trigger {
  color: var(--text);
}
.nav__dropdown:hover .nav__dropdown-trigger svg,
.nav__dropdown:focus-within .nav__dropdown-trigger svg {
  opacity: 1;
  transform: rotate(180deg);
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(8, 8, 10, 0.84);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 54px rgba(0,0,0,0.34);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 8px, 0);
  transition: opacity 0.24s var(--easing), transform 0.24s var(--easing);
}
.nav__dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
}
.nav__dropdown-menu a,
.nav__dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--text);
  white-space: nowrap;
}
.nav__dropdown-menu a:hover,
.nav__dropdown-menu a[aria-current="page"] {
  background: rgba(255,255,255,0.08);
}
.nav__dropdown-item--soon {
  color: var(--text-dim);
  cursor: default;
}
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 13px; transition: all 0.3s var(--easing); white-space: nowrap;
}
.nav__cta:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.nav__cta:hover svg { transform: translateX(3px); }
.nav__cta svg { transition: transform 0.3s; }

/* Right-side nav actions: language toggle · account · cart */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Language toggle (TR / EN) — quiet text, EN disabled until ready */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.nav__lang-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.3s var(--easing);
}
.nav__lang-btn:hover:not(:disabled) { color: var(--text); }
.nav__lang-btn.is-active { color: var(--text); font-weight: 600; }
.nav__lang-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nav__lang-sep { color: var(--line-strong); font-size: 12px; }
/* Account / cart icon buttons */
.nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color 0.3s var(--easing), border-color 0.3s var(--easing), background 0.3s var(--easing);
}
.nav__icon:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Hamburger button — hidden on desktop, shown ≤900px ── */
.nav__burger {
  display: none; /* flipped to inline-flex in the 900px query */
  position: relative;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  z-index: 1101; /* above the overlay so the X stays tappable */
}
.nav__burger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.32s var(--easing), opacity 0.2s var(--easing);
}
/* Animate into an X while the menu is open. */
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Full-screen mobile menu overlay ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 96px clamp(28px, 8vw, 56px) 56px;
  background: rgba(6, 6, 7, 0.86);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--easing), transform 0.4s var(--easing), visibility 0.4s;
}
body.menu-open .mobile-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mobile-menu__links {
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-menu__links a {
  font-family: var(--font-main);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 500; line-height: 1.18;
  color: var(--text);
  padding: 8px 0;
  letter-spacing: -0.01em;
  /* staggered entrance */
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--easing), transform 0.5s var(--easing), color 0.25s;
}
body.menu-open .mobile-menu__links a { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-menu__links a:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .mobile-menu__links a:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .mobile-menu__links a:nth-child(3) { transition-delay: 0.20s; }
body.menu-open .mobile-menu__links a:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .mobile-menu__links a:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu__links a[aria-current="page"] { color: var(--accent); }
.mobile-menu__foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 40px;
}
.mobile-menu__cta {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--line-strong, rgba(255,255,255,0.2));
  font-size: 15px; color: var(--text);
  transition: background 0.3s var(--easing), color 0.3s var(--easing);
}
.mobile-menu__cta:hover { background: var(--text); color: var(--bg); }
.mobile-menu__meta {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .nav { padding: 18px 20px; }
  .nav__logo { height: 42px; }
  .nav__logo-img { height: 32px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav.is-scrolled { padding: 12px 20px; }
  .nav.is-scrolled .nav__logo-img { height: 28px; }
  .nav__actions { gap: 8px; }
  .nav__icon { width: 34px; height: 34px; }
}

/* ░░░ Hero ░░░ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: flex-end;
  padding: 120px 40px 100px;
  overflow: hidden;
}
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.6, 0.1, 0.2, 1);
  will-change: transform, opacity;
  pointer-events: none;
  filter: contrast(1.05) saturate(1.05);
}
.hero__video.is-ready { opacity: 1; }
/* When video is active, hide the WebGL canvas entirely (frees GPU) */
.hero.has-video .hero__canvas { display: none; }
/* Pause the noise grain over the pinned hero — its mix-blend-mode is expensive */
.hero.has-video ~ .grain,
body:has(.hero.has-video) .grain { animation: none; opacity: 0.04; }
/* Force GPU layer for the video so seeks composite cheaply */
.hero__video { transform: translateZ(0); backface-visibility: hidden; }

.hero__blur-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), transparent 0%, rgba(0,0,0,0.15) 45%, black 85%);
  mask-image: radial-gradient(circle 250px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), transparent 0%, rgba(0,0,0,0.15) 45%, black 85%);
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.7) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.85) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: 1280px; width: 100%; margin: 0 auto; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  color: var(--text-dim);
}
.hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--titan);
  box-shadow: 0 0 18px rgba(var(--titan-glow), 0.7);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.hero__title {
  font-family: var(--font-main);
  font-size: clamp(48px, 9.5vw, 168px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; }
.hero__title .italic {
  font-size: 1.05em; line-height: 0.9;
  background: var(--text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
}
.hero__lede {
  max-width: 460px; color: var(--text-dim);
  font-size: 15px; line-height: 1.55;
}
.scroll-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s var(--easing), transform 0.3s var(--easing);
}
.scroll-hint .mono {
  letter-spacing: 0.28em;
  transition: color 0.3s var(--easing);
}
.scroll-hint:hover,
.scroll-hint:focus-visible {
  color: var(--text);
  transform: translateY(-3px);
  outline: none;
}
.scroll-hint:hover .mono,
.scroll-hint:focus-visible .mono {
  color: var(--titan);
}
.scroll-hint__line {
  width: 1px; height: 64px; background: linear-gradient(to bottom, transparent, var(--titan));
  position: relative; overflow: hidden;
}
.scroll-hint__line::after {
  content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 20px;
  background: var(--text);
  animation: scrolldown 2s var(--easing) infinite;
}
@keyframes scrolldown {
  0% { top: -20px; }
  100% { top: 100%; }
}
/* Hero CTA group — appears only at the end of the hero scrub video. A one-line
   hook above the button grounds it so the CTA doesn't float in the black.
   Anchored bottom-centre, hidden until JS fades the group in. */
/* End-of-hero reveal: the big hook headline + button appear CENTRED over the
   blurred/darkened last frame of the hero scrub video. */
.hero__cta-group {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 24px));
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  text-align: center;
  width: min(90vw, 880px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s var(--easing), transform 0.6s var(--easing);
}
.hero__cta-group.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%);
}
.hero__cta-hook {
  margin: 0;
  font-size: clamp(30px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  max-width: 16ch;
  /* Same soft-purple gradient text used across the site (hero title, accents) */
  background: linear-gradient(120deg, #ffffff 0%, var(--titan) 58%, #b088ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  transition: background 0.3s var(--easing), border-color 0.3s var(--easing),
              color 0.3s var(--easing);
}
.hero__cta:hover {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
.hero__cta svg { transition: transform 0.3s var(--easing); }
.hero__cta:hover svg { transform: translateX(3px); }
@media (max-width: 900px) {
  .hero__cta-group { gap: 24px; padding: 0 20px; }
  .hero__cta { padding: 12px 22px; font-size: 13px; }
}

.hero__corners {
  position: absolute; bottom: 24px; left: 40px; right: 40px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--text-faint);
  z-index: 2;
}

@media (max-width: 900px) {
  .hero { padding: 110px 20px 40px; }
  .hero__corners { display: none; }
}

/* ░░░ Manifesto ░░░ */
.manifesto {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No longer pinned — give the section breathing room top & bottom instead of
     relying on a transform to centre pinned content. */
  padding: clamp(120px, 18vh, 220px) 40px;
  background: transparent;
  z-index: 2;
}

.manifesto__text {
  font-family: var(--font-main);
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92); /* neutral body copy */
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* Each character is a span the typewriter fades in one-by-one. JS flips opacity
   to 1 as it types; this is the hidden starting state. A short fade per char
   softens the daktilo edge without looking like a per-char animation. */
.manifesto__char {
  opacity: 0;
  white-space: pre-wrap; /* keep spaces, still allow natural line wrapping */
  transition: opacity 0.12s linear;
}
/* Purple accent — used only on the highlighted words (net / doğal). */
.manifesto__accent {
  color: var(--titan);
}

/* Accessibility: no typing for reduced-motion users — show all text at once. */
@media (prefers-reduced-motion: reduce) {
  .manifesto__char { opacity: 1 !important; transition: none !important; }
}

/* ░░░ Third Section – Full‑screen banner ░░░ */
.third-section {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: -10vh; /* Pulls the section up to blend the black voids smoothly */
  background: #000 url('assets/banner3.png') no-repeat;
  background-position: center calc(100% + 12vh); /* Pushes the image downwards to crop the bottom and give more space at the top */
  background-size: cover;
  /* Aggressive inset shadows to perfectly blend all edges into the page's #000 background */
  box-shadow: 
    inset 0 25vh 20vh -10vh #000000,
    inset 0 -10vh 15vh -5vh #000000,
    inset 25vw 0 20vw -10vw #000000,
    inset -25vw 0 20vw -10vw #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Reverted: Push strictly to the top */
  padding-top: 18vh; /* Increased from 8vh to give the navbar breathing room */
  padding-bottom: 0;
  overflow: hidden;
}

.third-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 36vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.72) 52%,
    #000 100%
  );
}

.third-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2; /* Keeps text above the vignette */
}

.third-title {
  font-family: var(--font-main);
  font-size: clamp(36px, 5vw, 80px); /* Slightly smaller to fit cleanly above */
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.third-title span {
  display: inline-block; /* Crucial for GSAP transform animations to work on spans */
  will-change: transform, opacity;
}

.third-title .highlight {
  font-weight: 500;
  color: #d1a8ff; /* Solid premium lilac, no gradient, matches reference exactly */
}

.third-title .muted {
  font-weight: 400;
  color: #ffffff; /* Pure crisp white, matches reference perfectly */
}

/* Vertical indicator line from reference */
.third-line-indicator {
  width: 1px;
  height: 60px; /* Shorter line to ensure it doesn't touch earphones */
  background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(209, 168, 255, 0.8) 100%);
  margin-top: 25px; /* Tighter margin */
  position: relative;
}

.third-line-indicator::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1a8ff;
  box-shadow: 0 0 10px #d1a8ff;
}

/* ░░░ Ürün Vitrini ░░░ */
.products {
  position: relative;
  width: 100%;
  background: var(--bg);
  padding: clamp(120px, 16vh, 200px) 40px;
  z-index: 2;
}
.products__inner {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
}
.products__head {
  margin: 0 0 clamp(48px, 6vw, 80px);
}
.products__eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.products__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 30px);
}

/* Card — almost-invisible dark surface; content does the separating.
   overflow is NOT hidden here so the hover glow can spill out behind the card;
   the media area clips its own corners instead. */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
/* Soft purple aura that glows evenly around the WHOLE card on hover. It mirrors
   the card's shape (same rounded rect, sat behind it) and spreads out on every
   side via a blurred box-shadow — not just under the image. Fades in gently. */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 40px 6px rgba(199, 150, 255, 0.38);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 150, 255, 0.32);
}
.product-card:hover::after { opacity: 1; }

/* Hero / flagship product — quietly lifted above the other two using only
   white tints (no colour, no glow). Slightly stronger surface + edge, and a
   touch raised so the eye lands here first. Grid stays 3 equal columns. */
.product-card--featured {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.product-card--featured:hover {
  transform: translateY(-14px);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Media area — sized so the product fills it and dominates (not small/centred
   with margins). A real <img> with object-fit:cover fills the whole box. */
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(130% 100% at 50% 16%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(160deg, #121214 0%, #0a0a0c 60%, #060606 100%);
  overflow: hidden;
  /* Card no longer clips; round the media's own top corners to match. */
  border-radius: 21px 21px 0 0;
}
/* The flagship gets a marginally taller render area so its product reads bigger. */
.product-card--featured .product-card__media { aspect-ratio: 4 / 3.2; }
/* BURAYA ÜRÜN GÖRSELİ — gerçek görsel eklenince placeholder otomatik gizlenir.
   object-fit:cover ile kutuyu tamamen doldurur; ürün büyük ve hâkim görünür. */
.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing);
}
.product-card__img + .product-card__placeholder { display: none; }
.product-card:hover .product-card__img { transform: scale(1.02); }
.product-card__placeholder {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.28);
}
.product-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 28px 30px;
}
.product-card__name {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}
.product-card__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.58);
}
/* CTA — ghost/outline pill in the site's button language. */
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.22s ease, color 0.22s ease;
}
.product-card__cta:hover {
  border-color: rgba(255, 255, 255, 0.55);
}
.product-card__cta svg { transition: transform 0.22s ease; }
.product-card__cta:hover svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* With 3 cards in a 2-col grid the last one is orphaned, leaving a big empty
     cell. Let a lone final card span the full row so there's no dead space. */
  .products__grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .products { padding: clamp(90px, 12vh, 130px) 20px; }
  .products__grid { grid-template-columns: 1fr; }
  .product-card__body { padding: 24px 24px 26px; }
}

/* Accessibility: reduced-motion users get no entrance reveal and minimal hover.
   The flagship's static lift is kept (it's not motion), but hover translate/
   scale are disabled. */
@media (prefers-reduced-motion: reduce) {
  .product-card { opacity: 1 !important; }
  .product-card,
  .product-card:hover { transition: none; }
  .product-card:not(.product-card--featured),
  .product-card:not(.product-card--featured):hover { transform: none; }
  .product-card--featured,
  .product-card--featured:hover { transform: translateY(-10px); }
  .product-card:hover .product-card__img,
  .product-card__cta:hover svg { transform: none; }
}
/* ░░░ Showcase · pinned scroll-scrub, black-bg blends with page ░░░ */
.showcase {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 90px;
  max-width: none;
  background:
    radial-gradient(circle at 50% 52%, rgba(222, 170, 255, 0.06), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(255, 164, 208, 0.03), transparent 38%),
    #000;
  overflow: hidden;
}
.showcase::before,
.showcase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 22vh;
  pointer-events: none;
}
.showcase::before {
  top: 0;
  background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
}
.showcase::after {
  bottom: 0;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
/* Stage holds the product video AND the callout overlay; dots/lines are
   positioned relative to THIS box. The source video is SQUARE (1600×1600), so
   the stage is forced square too — the video then FILLS the stage with no
   letterbox, which means % coords on the stage map 1:1 onto the product. */
.showcase__stage {
  position: absolute;
  left: 50%;
  top: calc(50% + 76px);
  height: min(820px, 82vh);
  aspect-ratio: 1 / 1;       /* square box == square video, no padding gaps */
  max-width: 96vw;
  transform: translate(-50%, -50%) translateZ(0);
  z-index: 2;
}
.showcase__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* square video fills the square stage exactly */
  opacity: 0;
  transition: opacity 1s var(--easing);
  will-change: transform, opacity;
  pointer-events: none;
  filter: none;
}
.showcase__video.is-ready { opacity: 1; }

.showcase__glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(920px, 78vw);
  height: min(640px, 60vh);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  filter: blur(34px);
  background:
    radial-gradient(circle at 50% 50%, rgba(234, 170, 255, 0.26) 0%, rgba(234, 170, 255, 0.14) 18%, rgba(255, 143, 197, 0.08) 36%, transparent 68%);
  opacity: 0.9;
}

.showcase__intro {
  position: absolute;
  top: clamp(72px, 9vh, 112px);
  left: 50%;
  z-index: 5;
  width: min(620px, 78vw);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.92;
}

.showcase__intro span {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.showcase__intro h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Callout overlay lives on the (square) stage, but the LABELS are pushed OUT
   past the stage edges into the wide empty space beside the product, so they
   never overlap each other or the product. Each leader runs from the dot on the
   part to the stage edge; the label sits just outside that edge, same height. */
.showcase__callouts {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Leader lines — share the stage's 0..100 coordinate space, so an endpoint and
   its dot land on the exact same product pixel at any size. Each line goes from
   the component dot OUT to the stage edge (x=0 left / x=100 right). */
.showcase__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.showcase__leader {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.showcase.has-callouts .showcase__leader {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: opacity 0.3s ease, stroke-dashoffset 0.5s ease 0.1s;
}

/* Component anchor dots — pinned ON the part via % coords. */
.showcase__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  z-index: 5;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.showcase.has-callouts .showcase__dot {
  opacity: 1;
  transform: scale(1);
}

/* Labels — positioned relative to the stage but pushed OUTSIDE its left/right
   edge into the surrounding space. */
.showcase__callout {
  position: absolute;
  width: clamp(150px, 15vw, 220px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--easing), transform 0.6s var(--easing);
}
.showcase.has-callouts .showcase__callout {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.showcase__callout strong {
  display: block;
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.showcase__callout p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

/* Left labels sit just left of the stage (right-aligned, hugging the edge).
   Right labels sit just right of the stage (left-aligned). The y values line up
   with each leader's outer endpoint (set in the SVG to the same %). */
.showcase__callout--tl { right: calc(100% + 26px); top: 18%;  text-align: right; }
.showcase__callout--bl { right: calc(100% + 26px); top: 66%;  text-align: right; }
.showcase__callout--tr { left:  calc(100% + 26px); top: 22%;  text-align: left; }
.showcase__callout--br { left:  calc(100% + 26px); top: 68%;  text-align: left; }

/* On narrower (but still desktop) screens the stage nearly fills the width, so
   there's little room beside it — tuck labels just inside the stage corners and
   shrink them slightly so they still clear the centred product. */
@media (max-width: 1280px) {
  .showcase__callout { width: clamp(130px, 13vw, 180px); }
  .showcase__callout--tl, .showcase__callout--bl { right: auto; left: 8px; }
  .showcase__callout--tr, .showcase__callout--br { left: auto; right: 8px; }
  .showcase__callout--tl, .showcase__callout--tr { top: 6%; }
  .showcase__callout--bl, .showcase__callout--br { top: 78%; }
}

/* ≤900px: drop leaders/dots; stack labels under the product as a clean list. */
@media (max-width: 900px) {
  .showcase__leaders,
  .showcase__dot { display: none; }

  .showcase__stage {
    height: auto;
    aspect-ratio: auto;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 92vw;
    max-width: none;
  }
  .showcase__video {
    position: relative;
    width: 100%;
    height: 56vh;
    object-fit: contain;
  }
  .showcase__callouts {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
    width: 100%;
  }
  .showcase__callout {
    position: relative;
    left: auto; right: auto; top: auto;
    width: auto;
    text-align: left;
    opacity: 1;
    transform: none;
  }
  .showcase__callout p { display: block; }
}
@media (max-width: 540px) {
  .showcase__callouts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__leader { opacity: 1; stroke-dashoffset: 0; transition: none; }
  .showcase__dot { opacity: 1; transform: scale(1); transition: none; }
  .showcase__callout { opacity: 1; transform: none; transition: none; }
}
/* ░░░ Marquee ░░░ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
  background: var(--bg);
}
.marquee__track {
  display: inline-flex; gap: 32px; align-items: center; white-space: nowrap;
  font-family: var(--font-main);
  font-size: clamp(28px, 4vw, 48px);
  padding-left: 32px;
  will-change: transform;
}
.marquee__track .dotsep { color: var(--titan); font-size: 0.5em; }

/* ░░░ Assembly bridge ░░░ */
.assembly {
  position: relative;
  max-width: none;
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.35fr);
  gap: clamp(36px, 8vw, 120px);
  align-items: center;
  padding: 120px clamp(28px, 7vw, 132px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(120deg, rgba(var(--blueprint-rgb), 0.1), transparent 42%, rgba(var(--titan-glow), 0.08));
  background-size: 96px 96px, 96px 96px, 100% 100%;
}
.assembly::before,
.assembly::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.assembly::before {
  top: 16%;
  bottom: 16%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(var(--blueprint-rgb), 0.35), transparent);
}
.assembly::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(var(--titan-glow), 0.14) 17% 17.08%, transparent 17.08% 100%),
    linear-gradient(90deg, transparent 0 72%, rgba(var(--blueprint-rgb), 0.14) 72% 72.08%, transparent 72.08% 100%);
}
.assembly__copy { position: relative; z-index: 1; max-width: 560px; }
.assembly__copy h2 {
  font-size: clamp(40px, 6.2vw, 104px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.assembly__copy p {
  color: var(--text-dim);
  max-width: 460px;
  font-size: 16px;
  line-height: 1.7;
}
.assembly__stage {
  position: relative;
  z-index: 1;
  min-height: min(58vw, 600px);
  border-left: 1px solid rgba(var(--blueprint-rgb), 0.22);
  border-right: 1px solid rgba(var(--titan-glow), 0.2);
}
.assembly__axis {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
.assembly__axis::before,
.assembly__axis::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--titan);
  border-radius: 50%;
}
.assembly__axis::before { left: 0; }
.assembly__axis::after { right: 0; }
.assembly__part {
  position: absolute;
  display: block;
  transform-origin: center;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.45));
}
.assembly__part::before,
.assembly__part::after {
  content: "";
  position: absolute;
  inset: 0;
}
.assembly__part--shell {
  width: 32%;
  aspect-ratio: 1.2;
  left: 7%;
  top: 29%;
  border: 1px solid rgba(var(--titan-glow), 0.6);
  border-radius: 46% 54% 58% 42%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 35%),
    linear-gradient(145deg, #332311, #0b0b0d 70%);
}
.assembly__part--shell::after {
  inset: 22%;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: inherit;
}
.assembly__part--core {
  width: 13%;
  aspect-ratio: 1;
  left: 39%;
  top: 38%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 16%, #0c1716 48%, #050606 100%);
}
.assembly__part--driver {
  width: 14%;
  aspect-ratio: 0.75;
  left: 57%;
  top: 34%;
  border: 1px solid rgba(var(--blueprint-rgb), 0.52);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(var(--blueprint-rgb), 0.22) 0 2px, transparent 2px 10px), #06080c;
}
.assembly__part--filter {
  width: 9%;
  aspect-ratio: 1;
  left: 73%;
  top: 43%;
  border: 1px solid rgba(var(--titan-glow), 0.65);
  background: repeating-linear-gradient(45deg, rgba(var(--titan-glow), 0.28) 0 1px, transparent 1px 6px), #080705;
  transform: rotate(45deg);
}
.assembly__part--tip {
  width: 15%;
  aspect-ratio: 1.7;
  left: 84%;
  top: 41%;
  border-radius: 999px 45% 45% 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
}
.assembly__label {
  position: absolute;
  color: var(--text-dim);
  padding-left: 48px;
}
.assembly__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 36px;
  height: 1px;
  background: var(--line-strong);
}
.assembly__label--one { left: 10%; top: 18%; }
.assembly__label--two { left: 52%; top: 18%; }
.assembly__label--three { left: 62%; bottom: 16%; }

/* ░░░ Section common ░░░ */
section {
  position: relative;
  padding: 120px 40px;
  max-width: 1480px;
  margin: 0 auto;
}
section:not(.hero):not(.marquee):not(.pillars):not(.assembly):not(.manifesto):not(.third-section):not(.showcase):not(.final-image-section):not(.stacked-panels):not(.pdp-video-section)::before {
  content: "";
  position: absolute;
  inset: 40px;
  z-index: -1;
  pointer-events: none;
  border-left: 1px solid rgba(var(--blueprint-rgb), 0.08);
  border-right: 1px solid rgba(var(--titan-glow), 0.08);
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(255,255,255,0.035) 19% 19.08%, transparent 19.08% 100%),
    linear-gradient(90deg, transparent 0 81%, rgba(255,255,255,0.03) 81% 81.08%, transparent 81.08% 100%);
}
.section__head { margin-bottom: 80px; }
.section__index { display: inline-block; color: var(--text-dim); margin-bottom: 28px; }
.section__title {
  font-size: clamp(34px, 5.5vw, 78px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 1100px;
}
@media (max-width: 900px) { section { padding: 80px 20px; } .section__head { margin-bottom: 50px; } }

/* ░░░ Manifesto ░░░ */
.manifesto__text {
  font-size: clamp(26px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 1280px;
  margin-bottom: 100px;
}
.manifesto__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03), transparent 30%),
    var(--bg);
  padding: 36px 28px;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 200px;
  position: relative; overflow: hidden;
  border-right: 1px solid var(--line);
  transition: background 0.6s var(--easing), transform 0.6s var(--easing);
}
.kpi:last-child { border-right: 0; }
.kpi:hover { background: var(--bg-soft); transform: translateY(-8px); }
.kpi:hover::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(var(--titan-glow), 0.1) 28% 28.3%, transparent 28.3% 100%),
    linear-gradient(80deg, transparent 0 72%, rgba(var(--blueprint-rgb), 0.08) 72% 72.3%, transparent 72.3% 100%);
  pointer-events: none;
}
.kpi__num {
  font-family: var(--font-main); font-size: clamp(56px, 7vw, 96px);
  font-style: normal; line-height: 1; color: var(--titan);
}
.kpi__label { color: var(--text-dim); }
@media (max-width: 900px) { .manifesto__grid { grid-template-columns: repeat(2, 1fr); } }

/* ░░░ Pillars (3 brand pillars under hero) ░░░ */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background:
    linear-gradient(90deg, rgba(var(--blueprint-rgb), 0.08), transparent 40%, rgba(var(--titan-glow), 0.08));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0; margin: 0; max-width: none;
}
.pillar {
  background: rgba(6, 6, 7, 0.82); padding: 80px 50px; min-height: 320px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden; transition: background 0.5s, clip-path 0.6s var(--easing);
  border-right: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.pillar:last-child { border-right: 0; }
.pillar::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255,255,255,0.055);
  opacity: 0;
  transition: opacity 0.5s var(--easing), transform 0.5s var(--easing);
}
.pillar:hover { background: var(--bg-soft); clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.pillar:hover::before { opacity: 1; transform: translate(8px, -8px); }
.pillar__id { color: var(--titan); }
.pillar h3 {
  font-family: var(--font-main); font-style: normal;
  font-size: clamp(34px, 3.8vw, 54px); font-weight: 400; line-height: 1.05;
  letter-spacing: -0.02em; margin-top: 12px;
}
.pillar p { color: var(--text-dim); font-size: 15px; line-height: 1.6; max-width: 380px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } .pillar { padding: 50px 24px; min-height: auto; } }

/* ░░░ Section sub-heading (within sections) ░░░ */
.section__sub {
  display: flex; align-items: baseline; gap: 24px;
  margin: 100px 0 40px;
  flex-wrap: wrap;
}
.section__sub .mono { color: var(--titan); }
.section__subtitle {
  font-family: var(--font-main); font-style: normal;
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 400;
  letter-spacing: -0.02em;
}

/* ░░░ Products ░░░ */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cards--lg {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 28px;
  align-items: start;
}
.cards--lg .card:nth-child(2) { margin-top: 84px; }
@media (max-width: 900px) { .cards--lg { grid-template-columns: 1fr; } }
.card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.035), transparent 42%),
    var(--bg-card);
  display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: transform 0.6s var(--easing), border-color 0.4s, background 0.4s, clip-path 0.6s var(--easing);
}
.card::before,
.card::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--titan);
  opacity: 0.58;
}
.card::before { top: 18px; right: 18px; width: 42px; height: 1px; }
.card::after { top: 18px; right: 18px; width: 1px; height: 42px; }
.card:hover {
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(var(--blueprint-rgb), 0.06), transparent 42%),
    #131318;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.card__media {
  height: 320px; position: relative;
  isolation: isolate;
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #1a1a1d, #050505 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  overflow: hidden;
}
.card__media--titan {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #3a2a14, #0a0808 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--polymer {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #102b33, #050a10 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--gaming {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #2a1235, #0a050f 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--sport {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #1a3525, #050f08 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__media--ppe {
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(135deg, #352010, #0f0805 70%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
}
.card__glow {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(110deg, transparent 0 20%, rgba(var(--titan-glow), 0.18) 20% 20.5%, transparent 20.5% 100%),
    linear-gradient(80deg, transparent 0 66%, rgba(var(--blueprint-rgb), 0.18) 66% 66.4%, transparent 66.4% 100%);
  opacity: 0.75;
  transition: opacity 0.6s, transform 0.8s var(--easing);
}
.card:hover .card__glow { opacity: 1; transform: translateX(12px); }
.card__media::before {
  content: ""; position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(255,255,255,0.14) 49.9% 50.1%, transparent 50.1%),
    linear-gradient(0deg, transparent 0 49.9%, rgba(255,255,255,0.1) 49.9% 50.1%, transparent 50.1%);
  mix-blend-mode: screen;
  opacity: 0.45;
  transition: transform 1s var(--easing);
}
.card:hover .card__media::before { transform: scale(1.06) translateY(-5px); }
.card__media::after {
  content: ""; position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(to top, var(--bg-card) 0%, transparent 50%);
}
.card__device {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.card__device::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 53%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
}
.device__part {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,0.2);
  transform-origin: center;
  transition: transform 0.8s var(--easing), border-color 0.5s var(--easing);
}
.device__part--shell {
  width: 33%;
  aspect-ratio: 1.16;
  left: 16%;
  top: 33%;
  border-radius: 46% 54% 58% 42%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 34%),
    linear-gradient(145deg, rgba(var(--titan-glow), 0.42), rgba(0,0,0,0.2) 72%);
}
.device__part--shell::after {
  content: "";
  position: absolute;
  inset: 23%;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: inherit;
}
.device__part--driver {
  width: 12%;
  aspect-ratio: 0.8;
  left: 51%;
  top: 39%;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.24) 0 1px, transparent 1px 6px), rgba(0,0,0,0.45);
}
.device__part--core {
  width: 10%;
  aspect-ratio: 1;
  left: 65%;
  top: 44%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent), #061716 55%, #020303);
}
.device__part--nozzle {
  width: 12%;
  height: 11%;
  left: 75%;
  top: 47%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(var(--blueprint-rgb), 0.2));
}
.device__part--tip {
  width: 15%;
  height: 16%;
  left: 86%;
  top: 44.5%;
  border-radius: 999px 46% 46% 999px;
  background: rgba(255,255,255,0.1);
}
.device__wave {
  position: absolute;
  left: 49%;
  top: 33%;
  width: 34%;
  height: 36%;
  border: 1px solid rgba(var(--blueprint-rgb), 0.35);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}
.device__wave::before,
.device__wave::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(var(--blueprint-rgb), 0.25);
  border-left: 0;
  border-radius: inherit;
}
.device__wave::after { inset: 36%; }
.card:hover .device__part { border-color: rgba(255,255,255,0.34); }
.card:hover .device__part--shell { transform: translateX(-18px) rotate(-5deg); }
.card:hover .device__part--driver { transform: translateX(8px) translateY(-14px); }
.card:hover .device__part--core { transform: translateX(16px) translateY(12px); }
.card:hover .device__part--nozzle { transform: translateX(24px); }
.card:hover .device__part--tip { transform: translateX(34px) scaleX(1.08); }
.card__device--polymer .device__part--shell {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(145deg, rgba(var(--blueprint-rgb), 0.34), rgba(0,0,0,0.2) 72%);
}
.card__device--compact .device__part--shell {
  width: 26%;
  left: 22%;
}
.card__device--compact .device__part--driver {
  left: 49%;
}
.card__device--compact .device__part--nozzle {
  left: 61%;
  width: 17%;
}
.card__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  color: var(--text);
}
.card__price {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 6px 12px;
  border: 1px solid rgba(var(--titan-glow), 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  color: var(--titan-2);
  font-size: 12px;
}

/* ░░░ Specs table inside product cards ░░░ */
.specs {
  display: grid; gap: 0;
  padding-top: 18px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
.specs > div {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.specs > div:last-child { border-bottom: 0; }
.specs > div > span:first-child { color: var(--text-faint); letter-spacing: 0.14em; }
.specs > div > span:last-child { color: var(--text); letter-spacing: 0.04em; }

/* ░░░ Process highlight email ░░░ */
.hl { color: var(--titan-2); border-bottom: 1px dashed rgba(var(--titan-glow), 0.5); padding-bottom: 1px; }
.card__body {
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  flex: 1;
}
.card__body h3 {
  font-family: var(--font-main);
  font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
}
.card__body p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; flex: 1; }
.card__meta {
  display: flex; gap: 16px; color: var(--text-faint); flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line);
}

.card--cta {
  background: linear-gradient(150deg, #1c1408 0%, #0a0a0c 70%);
  border-color: rgba(var(--titan-glow), 0.25);
}
.card--cta .card__body { justify-content: center; min-height: 360px; }
.card--cta h3 {
  font-family: var(--font-main); font-style: normal; font-size: 36px; font-weight: 400;
  line-height: 1.05; color: var(--titan-2);
}

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

/* ░░░ Buttons ░░░ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--titan);
  border-radius: 999px;
  background: var(--titan);
  color: var(--bg);
  font-size: 14px; font-weight: 500;
  transition: all 0.4s var(--easing);
  width: fit-content;
}
.btn:hover { background: var(--titan-2); border-color: var(--titan-2); }
.btn:hover svg { transform: translateX(4px); }
.btn svg { transition: transform 0.4s var(--easing); }
.btn--lg { padding: 18px 28px; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ░░░ Tech ░░░ */
.tech__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  background: var(--line);
}
.tech__item {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 45%),
    var(--bg);
  padding: 44px 36px; min-height: 280px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: background 0.5s;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tech__item:hover { background: var(--bg-soft); }
.tech__item::before {
  content: ""; position: absolute; top: 0; left: -1px; width: 1px; height: 0;
  background: var(--titan);
  transition: height 0.6s var(--easing);
}
.tech__item:hover::before { height: 100%; }
.tech__item::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-right: 1px solid rgba(var(--blueprint-rgb), 0.26);
  border-bottom: 1px solid rgba(var(--blueprint-rgb), 0.26);
  opacity: 0.5;
}
.tech__id { color: var(--titan); }
.tech__item h3 {
  font-family: var(--font-main);
  font-size: 28px; font-weight: 400; letter-spacing: -0.02em;
  margin-top: 8px;
}
.tech__item p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1100px) { .tech__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .tech__grid { grid-template-columns: 1fr; } }

/* ░░░ Process ░░░ */
.steps {
  list-style: none;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60px;
  width: 1px;
  background: linear-gradient(var(--titan), rgba(var(--blueprint-rgb), 0.42), transparent);
}
.steps::after {
  content: "";
  position: absolute;
  left: 53px;
  top: var(--process-progress, 0%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 28px rgba(110, 255, 208, 0.55);
  transform: translateY(-50%);
}
.step {
  display: grid;
  grid-template-columns: 120px 320px 1fr;
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: padding 0.5s var(--easing);
  position: relative;
}
.step:hover { padding-left: 20px; padding-right: 20px; }
.step__num { color: var(--titan); }
.step h4 {
  font-family: var(--font-main);
  font-size: clamp(28px, 3.4vw, 44px);
  font-style: normal;
  font-weight: 400;
}
.step p { color: var(--text-dim); font-size: 16px; line-height: 1.6; max-width: 540px; }
@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
}

/* ░░░ CTA ░░░ */
.cta {
  text-align: center;
  padding: 160px 40px;
  position: relative;
  max-width: none;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(var(--titan-glow), 0.12) 22% 22.12%, transparent 22.12% 100%),
    linear-gradient(90deg, transparent 0 78%, rgba(var(--blueprint-rgb), 0.12) 78% 78.12%, transparent 78.12% 100%),
    linear-gradient(180deg, transparent, rgba(var(--titan-glow), 0.08), transparent);
  pointer-events: none;
}
.cta__inner { position: relative; max-width: 900px; margin: 0 auto; }
.cta__eyebrow { color: var(--titan); margin-bottom: 32px; display: block; }
.cta__title {
  font-size: clamp(48px, 9vw, 132px);
  font-weight: 400; line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.cta__inner p { color: var(--text-dim); font-size: 17px; max-width: 560px; margin: 0 auto 40px; }
.cta__row { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ░░░ Footer ░░░ */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 88px 40px 42px;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.footer__top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 76px;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.footer__intro {
  max-width: 1100px;
  width: 100%;
}
.footer__eyebrow {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--titan);
}
.footer__headline {
  font-family: var(--font-main);
  font-size: clamp(48px, 8.5vw, 112px);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 28px;
}
.footer__headline-accent {
  font-weight: 600;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.footer__lead {
  margin-top: 18px;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.45);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  margin-bottom: 42px;
}
.footer__cta-wrapper {
  display: flex;
  margin-top: 12px;
}
.footer__main-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.02);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow: hidden;
  transition: all 0.45s var(--easing);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 40px rgba(0, 0, 0, 0.2);
}
.footer__main-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-gradient);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.45s var(--easing);
}
.footer__main-cta span,
.footer__main-cta svg {
  position: relative;
  z-index: 1;
  transition: transform 0.45s var(--easing), color 0.45s var(--easing);
}
.footer__main-cta:hover {
  border-color: transparent;
  box-shadow: 
    0 0 32px rgba(227, 191, 255, 0.25),
    0 12px 36px rgba(0, 0, 0, 0.45);
  transform: scale(1.025) translateY(-3px);
}
.footer__main-cta:hover::before {
  opacity: 1;
}
.footer__main-cta:hover span {
  color: #000000;
}
.footer__main-cta:hover svg {
  color: #000000;
  transform: translateX(6px) scale(1.1);
}
.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 88px;
  padding: 76px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.footer__brand-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer__brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__small-logo {
  height: 28px;
  width: auto;
  opacity: 0.95;
}
.footer__brand-tagline {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 32ch;
}
.footer__links-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.footer__column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer__label {
  display: block;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.footer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: statusPulse 2.4s infinite ease-in-out;
}
.footer__status-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
  font-weight: 500;
}
@keyframes statusPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.footer__links a {
  position: relative;
  font-size: 15px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.35s var(--easing);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.footer__links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--titan);
  transition: width 0.35s var(--easing);
}
.footer__links a:hover {
  color: #ffffff;
}
.footer__links a:hover::after {
  width: 100%;
}
.footer__link-highlight {
  color: var(--titan) !important;
  font-weight: 500;
}
.footer__link-highlight svg {
  transition: transform 0.35s var(--easing);
}
.footer__link-highlight:hover svg {
  transform: translate(2px, -2px);
}
.footer__bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0 0;
  color: var(--text-faint);
  font-size: 13px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.footer__bottom-left {
  display: flex;
  align-items: center;
}
.footer__bottom-right {
  display: flex;
  align-items: center;
}
@media (max-width: 980px) {
  .footer {
    padding: 72px 20px 32px;
  }
  .footer__top {
    gap: 32px;
    padding-bottom: 56px;
  }
  .footer__headline {
    max-width: 100%;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 56px 0;
  }
  .footer__links-section {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .footer__headline {
    font-size: clamp(34px, 10vw, 56px);
    letter-spacing: -0.03em;
  }
  .footer__lead {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 32px;
  }
  .footer__main-cta {
    padding: 15px 32px;
    font-size: 15px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0;
  }
  .footer__links-section {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
  }
}

@media (max-width: 1100px) {
  .assembly {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .assembly__stage {
    min-height: 460px;
  }
  .cards--lg .card:nth-child(2) { margin-top: 0; }
}

@media (max-width: 700px) {
  .assembly {
    padding: 88px 20px;
  }
  .assembly__stage {
    min-height: 340px;
  }
  .assembly__label {
    display: none;
  }
  .steps::before {
    left: 8px;
  }
  .steps::after {
    left: 1px;
  }
}

/* ░░░ Reveal animations ░░░ */
.reveal-text .word-wrap { overflow: hidden; display: inline-block; vertical-align: bottom; }
.reveal-text .word-inner { display: inline-block; transform: translateY(110%); }
.is-revealed .word-inner { transform: translateY(0); }

/* ░░░ Final Image ░░░ */
.final-image-section {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  max-width: none;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  z-index: 5;
}

.final-image__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('assets/yeni-resim.jpg') center center / cover no-repeat;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px) saturate(1) brightness(0.96);
  will-change: transform, filter;
}

.final-image-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.98) 7%, rgba(0, 0, 0, 0.74) 16%, rgba(0, 0, 0, 0.3) 28%, transparent 40%, transparent 72%, rgba(0, 0, 0, 0.68) 100%),
    radial-gradient(circle at 50% 52%, rgba(227, 191, 255, 0.035), transparent 42%);
}

.final-image__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}

.final-image__title {
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(38px, 4.7vw, 84px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: min(900px, 90vw);
}

.final-image__title span {
  display: block;
}

.final-image__accent {
  background: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Safari/Chrome'da altı kesilen 'ğ', 'y' gibi harfler için düzeltme */
  padding-bottom: 0.15em;
  display: inline-block;
  margin-bottom: -0.15em;
}

@media (max-width: 900px) {
  .final-image__copy {
    padding: 20px;
  }

  .final-image__title {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.2;
  }
}

/* ░░░ Stacked Panels ░░░ */
.stacked-panels {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #000;
  z-index: 10;
}

.stacked-panels__intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(110px, 14vw, 220px) clamp(24px, 7vw, 120px) clamp(80px, 10vw, 150px);
}

.stacked-panels__intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/arka-plan.png") center center / cover no-repeat;
  filter: brightness(1.45) saturate(1.14);
  opacity: 0.78;
  transform: scale(1.015);
}

.stacked-panels__intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.54) 38%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.14) 24%, rgba(0, 0, 0, 0.1) 64%, #000 100%);
}

.stacked-panels__title {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(34px, 5vw, 76px); /* Boyutu biraz daha dengeli hale getirelim */
  font-weight: 300; /* Daha ince ve zarif bir temel ağırlık */
  line-height: 1.15; /* Daha havadar bir satır arası */
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.stacked-panels__accent {
  display: inline-block;
  font-weight: 600; /* Vurgulu kelimeler daha dolgun */
  background: linear-gradient(135deg, #fff 0%, var(--titan) 50%, #b088ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  line-height: normal;
  filter: drop-shadow(0 0 15px rgba(227, 191, 255, 0.15)); /* Hafif bir ışıltı */
}

.stacked-panels__text {
  max-width: 640px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.stacked-panel {
  position: sticky;
  top: clamp(54px, 8vh, 92px);
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-origin: center top;
  will-change: transform, filter;
  padding: 0;
  border-top: 0;
}

.stacked-panel__inner {
  position: relative;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0; /* Tam sayfa genişliği için iç boşluğu sıfırlıyoruz */
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  transform-origin: center top;
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}

.stacked-panel__inner::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.13), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.24) 100%);
  opacity: 0.8;
}

.stacked-panel__inner::after {
  content: "";
  position: absolute;
  width: 42vw;
  height: 42vw;
  left: -18vw;
  bottom: -25vw;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--titan-glow), 0.16), transparent 66%);
  filter: blur(18px);
}

.stacked-panel__visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(300px, 60vh, 600px);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.36);
  font-family: var(--font-main);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: clamp(24px, 2.2vw, 40px);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 48%, rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -44px 80px rgba(0, 0, 0, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.38);
}

.stacked-panel__visual::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(236, 216, 255, 0.32), rgba(176, 136, 255, 0.12) 42%, transparent 68%);
  filter: blur(24px);
  opacity: 0.72;
}

.stacked-panel__visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: calc(clamp(24px, 2.2vw, 40px) - 10px);
  border: 1px solid rgba(255, 255, 255, 0.055);
  pointer-events: none;
}

.stacked-panel__visual--photo {
  height: 100vh;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: #050506;
  box-shadow: none;
}

.stacked-panel__visual--photo::before {
  inset: 0;
  z-index: 1;
  border-radius: 0;
  background:
    radial-gradient(circle at 52% 44%, rgba(215, 190, 255, 0.16), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.46) 100%);
  filter: none;
  opacity: 1;
}

.stacked-panel__visual--photo::after {
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 34%, rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 72%, rgba(0, 0, 0, 0.58) 100%);
}

.stacked-panel__visual--photo-right::before {
  background:
    radial-gradient(circle at 48% 44%, rgba(215, 190, 255, 0.16), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.stacked-panel__visual--photo-right::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 34%, rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 28%, transparent 100%);
}

.stacked-panel__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.9) contrast(1.05) saturate(1.05);
  transform: scale(1.01);
}

.stacked-panel__orb {
  position: absolute;
  width: min(34vw, 440px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), rgba(214, 191, 255, 0.42) 18%, rgba(70, 62, 77, 0.36) 48%, rgba(0, 0, 0, 0.2) 72%),
    #1a171d;
  box-shadow:
    inset -34px -46px 80px rgba(0, 0, 0, 0.6),
    inset 18px 18px 42px rgba(255, 255, 255, 0.12),
    0 42px 100px rgba(0, 0, 0, 0.56);
  transform: rotate(-16deg);
}

.stacked-panel__device {
  position: relative;
  width: min(26vw, 340px);
  aspect-ratio: 1.34;
  border-radius: 46% 54% 48% 52% / 50% 46% 54% 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(92, 82, 98, 0.62) 18%, rgba(26, 24, 29, 0.96) 52%, rgba(178, 154, 198, 0.55)),
    #201d23;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 0 0 10px rgba(0, 0, 0, 0.2),
    inset -24px -28px 60px rgba(0, 0, 0, 0.56),
    0 32px 70px rgba(0, 0, 0, 0.56);
  transform: rotate(-12deg) translateY(8px);
}

.stacked-panel__device::before,
.stacked-panel__device::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.34);
}

.stacked-panel__device::before {
  width: 18%;
  aspect-ratio: 1;
  right: 17%;
  top: 18%;
}

.stacked-panel__device::after {
  width: 13%;
  aspect-ratio: 1;
  right: 34%;
  bottom: 20%;
}

.stacked-panel__visual-label {
  position: absolute;
  left: clamp(22px, 3vw, 42px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 3;
  color: rgba(255, 255, 255, 0.46);
}

.stacked-panel__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 0 clamp(40px, 8vw, 120px); /* İçerik için güvenli boşluk */
}

.stacked-panel__title {
  font-family: var(--font-main);
  font-size: clamp(42px, 5.6vw, 92px);
  font-weight: 500;
  color: #fff;
  margin-bottom: 28px;
  line-height: 0.94;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

.stacked-panel__text {
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 42px;
  max-width: 560px;
}

.stacked-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  background: #fff;
  color: #000;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  box-shadow: 0 18px 45px rgba(255, 255, 255, 0.12);
  transition: transform 0.35s var(--easing), box-shadow 0.35s, background 0.35s;
}

.stacked-panel__btn:hover {
  transform: translateY(-4px);
  background: rgba(236, 216, 255, 0.96);
  box-shadow: 0 22px 60px rgba(var(--titan-glow), 0.22);
}

/* Card Background Colors (Dark Theme variations) */
.stacked-panel--one { background: #050506; }
.stacked-panel--two { background: #020203; }
.stacked-panel--three { background: #050506; }
.stacked-panel--four { background: #070909; }

.stacked-panel--two {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022) 42%, rgba(255, 255, 255, 0.05)),
    radial-gradient(circle at 22% 24%, rgba(148, 190, 255, 0.13), transparent 36%),
    radial-gradient(circle at 86% 72%, rgba(var(--titan-glow), 0.12), transparent 38%),
    #08090c;
}

.stacked-panel--three {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024) 42%, rgba(255, 255, 255, 0.05)),
    radial-gradient(circle at 24% 22%, rgba(255, 202, 158, 0.12), transparent 36%),
    radial-gradient(circle at 84% 70%, rgba(207, 170, 255, 0.13), transparent 38%),
    #090807;
}

.stacked-panel--four {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.024) 42%, rgba(255, 255, 255, 0.052)),
    radial-gradient(circle at 20% 22%, rgba(176, 255, 224, 0.1), transparent 35%),
    radial-gradient(circle at 84% 72%, rgba(var(--titan-glow), 0.13), transparent 38%),
    #070909;
}

@media (max-width: 900px) {
  .stacked-panels__intro {
    min-height: 76vh;
    padding: 96px 22px 64px;
  }

  .stacked-panels__title {
    font-size: clamp(32px, 11vw, 52px);
    letter-spacing: -0.025em;
  }

  .stacked-panels__text {
    margin-top: 24px;
    font-size: 16px;
  }

  .stacked-panel {
    padding: 0;
  }

  .stacked-panel__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: 100vh;
    min-height: 100vh;
    gap: 28px;
    padding: 22px;
    align-content: center;
    border-radius: 0;
  }
  
  .stacked-panel__visual {
    min-height: 280px;
    height: 36vh;
  }

  .stacked-panel__orb {
    width: min(70vw, 320px);
  }

  .stacked-panel__device {
    width: min(54vw, 260px);
  }
  
  .stacked-panel__content {
    padding-right: 0;
  }

  .stacked-panel__title {
    font-size: clamp(38px, 12vw, 58px);
    letter-spacing: -0.025em;
  }

  .stacked-panel__text {
    font-size: 16px;
  }
}

/* ░░░ About Page ░░░ */
.about-page section::before {
  display: none !important;
}

.about-page,
.about-page * {
  letter-spacing: 0;
}

.nav__links a[aria-current="page"] {
  color: var(--text);
}

.about-main {
  background:
    linear-gradient(180deg, #000 0%, #070707 42%, #000 100%);
}

.about-hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: 56px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 156px 40px 76px;
}

.about-hero__content {
  max-width: 840px;
}

.about-kicker {
  display: inline-flex;
  margin-bottom: 20px;
  color: rgba(227, 191, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.about-hero h1 {
  max-width: 760px;
  font-size: 92px;
  line-height: 0.96;
  font-weight: 400;
}

.about-hero p {
  max-width: 640px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 20px;
  line-height: 1.62;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.about-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.35s var(--easing), background 0.35s var(--easing), border-color 0.35s var(--easing), color 0.35s var(--easing);
}

.about-button:hover {
  transform: translateY(-2px);
}

.about-button--primary {
  background: #f4f1eb;
  color: #060606;
}

.about-button--ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.about-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

.about-visual::after {
  display: none;
}

.about-visual span {
  position: relative;
  z-index: 1;
  max-width: 220px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.5;
}

.about-visual--image {
  background: #070708;
}

.about-visual--image::after {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.42));
}

.about-visual--image img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) contrast(1.04);
}

.about-visual--hero {
  min-height: 560px;
}

.about-statement {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
}

.about-statement__eyebrow {
  color: var(--titan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  padding-left: 14px;
  height: fit-content;
}

.about-statement__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--titan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--titan);
}

.about-statement p {
  max-width: 980px;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.45;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

.about-statement .highlight-text {
  background: linear-gradient(120deg, #ffffff 0%, var(--titan) 50%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
}

.about-metrics {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.about-metric {
  position: relative;
  min-height: 190px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.4s var(--easing);
  overflow: hidden;
}

.about-metric::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(209, 168, 255, 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--easing);
  pointer-events: none;
}

.about-metric:hover {
  transform: translateY(-6px);
  border-color: rgba(209, 168, 255, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.008) 100%);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(209, 168, 255, 0.03);
}

.about-metric:hover::before {
  opacity: 1;
}

.about-metric strong {
  font-size: clamp(38px, 4vw, 48px);
  line-height: 1;
  font-weight: 500;
  background: linear-gradient(135deg, #ffffff 30%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s var(--easing);
}

.about-metric:hover strong {
  background: linear-gradient(135deg, #ffffff 20%, var(--titan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.03);
}

.about-metric span {
  position: relative;
  z-index: 1;
  max-width: 220px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.4s var(--easing);
}

.about-metric:hover span {
  color: rgba(255, 255, 255, 0.7);
}

.about-split {
  max-width: 1480px;
  margin: 0 auto;
  padding: 116px 40px;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.72fr);
  gap: 64px;
  align-items: center;
}

.about-split--single {
  grid-template-columns: minmax(0, 1fr);
}

.about-split__copy h2,
.about-section-head h2,
.about-collab__copy h2 {
  max-width: 720px;
  font-size: 58px;
  line-height: 1.02;
  font-weight: 400;
}

.about-split__copy p,
.about-collab__copy p {
  max-width: 620px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 18px;
  line-height: 1.68;
}

.about-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
}

.about-check-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  font-weight: 400;
  transition: all 0.3s var(--easing);
}

.about-check-item:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.about-check-item:hover {
  transform: translateX(6px);
  color: #ffffff;
}

.check-icon {
  color: var(--titan);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(209, 168, 255, 0.3));
  transition: transform 0.3s var(--easing);
}

.about-check-item:hover .check-icon {
  transform: scale(1.15) rotate(2deg);
}

.about-visual--tall {
  min-height: 620px;
}

.about-audience {
  max-width: 1480px;
  margin: 0 auto;
  padding: 110px 40px 118px;
}

.about-section-head {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: flex-end;
  margin-bottom: 48px;
}

.about-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}

.about-card {
  min-height: 300px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.about-card span {
  color: rgba(227, 191, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
}

.about-card h3 {
  margin-top: auto;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 500;
}

.about-card p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  line-height: 1.6;
}

.about-collab {
  max-width: 1480px;
  margin: 0 auto;
  padding: 112px 40px 130px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.7fr);
  gap: 64px;
  align-items: center;
}

.about-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-logo-grid div {
  min-height: 108px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px 16px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
@media (hover: hover) {
  .about-logo-grid div:hover {
    color: rgba(255, 255, 255, 0.86);
    border-color: rgba(209, 168, 255, 0.32);
    background: rgba(209, 168, 255, 0.04);
    transform: translateY(-2px);
  }
}

@media (max-width: 1100px) {
  .about-hero,
  .about-split,
  .about-collab {
    grid-template-columns: 1fr;
  }

  .about-visual--hero,
  .about-visual--tall {
    min-height: 420px;
  }

  .about-statement {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

  .about-section-head {
    display: block;
  }

  .about-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .about-hero {
    min-height: auto;
    padding: 124px 20px 70px;
    gap: 36px;
  }

  .about-hero h1 {
    font-size: 48px;
    line-height: 1.02;
  }

  .about-hero p {
    font-size: 16px;
    line-height: 1.62;
  }

  .about-hero__actions {
    width: 100%;
  }

  .about-button {
    flex: 1 1 180px;
  }

  .about-visual,
  .about-visual--hero,
  .about-visual--tall {
    min-height: 300px;
  }

  .about-statement,
  .about-split,
  .about-audience,
  .about-collab {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-statement {
    padding-top: 76px;
    padding-bottom: 72px;
  }

  .about-statement p {
    font-size: 30px;
    line-height: 1.18;
  }

  .about-metrics {
    grid-template-columns: 1fr;
    padding: 0 20px 76px;
  }

  .about-metric {
    min-height: 150px;
  }

  .about-split,
  .about-audience,
  .about-collab {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .about-split__copy h2,
  .about-section-head h2,
  .about-collab__copy h2 {
    font-size: 36px;
    line-height: 1.08;
  }

  .about-split__copy p,
  .about-collab__copy p {
    font-size: 16px;
    line-height: 1.62;
  }

  .about-card {
    min-height: 250px;
    padding: 24px;
  }

  .about-logo-grid {
    grid-template-columns: 1fr;
  }
}

/* ░░░ Product detail page (PDP) ░░░ */
.pdp-main {
  background: linear-gradient(180deg, #000 0%, #070707 38%, #000 100%);
}

/* Hero */
.pdp-hero {
  max-width: 1480px;
  margin: 0 auto;
  padding: 132px 40px 64px;
}

.pdp-hero--image {
  position: relative;
  max-width: none;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #050407;
}

.pdp-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.42) 0%,
      transparent 24%,
      rgba(35, 5, 42, 0.1) 66%,
      rgba(18, 0, 24, 0.58) 86%,
      #000 100%
    ),
    radial-gradient(90% 66% at 50% 78%, transparent 0 48%, rgba(0,0,0,0.34) 100%);
}

.pdp-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scroll-scrubbed entrance video (mirrors the home hero treatment) */
.pdp-intro {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100svh;
  overflow: hidden;
  background: #050407;
  isolation: isolate;
}
.pdp-intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.6, 0.1, 0.2, 1);
  pointer-events: none;
  /* No constant filter while playing — a permanent contrast/saturate filter
     forces every 1080p frame through a filter pass and stutters. JS applies a
     blur only during the tail. transform:translateZ(0) keeps it on its own
     compositor layer for smooth decode. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.pdp-intro__video.is-ready { opacity: 1; }
.pdp-intro__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.42) 0%,
      transparent 24%,
      rgba(35, 5, 42, 0.1) 66%,
      rgba(18, 0, 24, 0.58) 86%,
      #000 100%
    ),
    radial-gradient(90% 66% at 50% 78%, transparent 0 48%, rgba(0,0,0,0.34) 100%);
}
/* Intro overlay — a single balanced vertical block (kicker → title → lede →
   CTAs), vertically centred so it lines up with the product's optical centre.
   Each child reveals on its own (staggered) over the blurred tail. */
.pdp-intro__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 clamp(24px, 7vw, 150px);
  pointer-events: none;
}
/* Each revealable child starts hidden; JS adds .is-in to play the stagger. */
.pdp-intro__rev {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--easing), transform 0.55s var(--easing);
}
.pdp-intro__rev.is-in {
  opacity: 1;
  transform: translateY(0);
}
.pdp-intro__kicker {
  color: rgba(227, 191, 255, 0.95);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px; /* kicker → title: tight */
}
.pdp-intro__title {
  margin: 0 auto;
  max-width: 16ch;
  font-size: clamp(46px, 6.2vw, 96px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.pdp-intro__title span { display: block; }
.pdp-intro__accent {
  padding-bottom: 0.16em;
  background: linear-gradient(115deg, #ffffff 8%, #e5c2ff 48%, #ff6fab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pdp-intro__lede {
  margin: 26px auto 0; /* title → lede: medium */
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.55;
}
.pdp-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 38px; /* lede → CTAs: a touch wider */
  pointer-events: auto; /* buttons clickable even though overlay isn't */
}
.pdp-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.pdp-intro__cta svg { transition: transform 0.22s ease; }
/* Primary — dominant solid pill (the page's main conversion action). */
.pdp-intro__cta--primary {
  background: #fff;
  color: #0a0a0c;
  border: 1px solid #fff;
}
.pdp-intro__cta--primary:hover { background: rgba(255, 255, 255, 0.88); }
.pdp-intro__cta--primary:hover svg { transform: translateX(4px); }
/* Secondary — quiet ghost/outline. */
.pdp-intro__cta--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.26);
}
.pdp-intro__cta--ghost:hover { border-color: rgba(255, 255, 255, 0.55); }
.pdp-intro__cta--ghost:hover svg { transform: translateY(3px); }

@media (max-width: 600px) {
  .pdp-intro__actions { gap: 12px; }
  .pdp-intro__cta { padding: 12px 22px; font-size: 13px; }
}

/* Reduced motion: show the whole block immediately, no stagger. */
@media (prefers-reduced-motion: reduce) {
  .pdp-intro__rev { opacity: 1; transform: none; transition: none; }
}

.pdp-video-section {
  position: relative;
  isolation: isolate;
  z-index: 1;
  max-width: none;
  margin-top: -14vh;
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, rgba(18, 0, 24, 0) 0%, #000 18%, #000 100%);
  height: 100svh;
  display: grid;
  place-items: center;
}

.pdp-video-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  z-index: 3;
  height: min(30vh, 300px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(92, 22, 101, 0.42) 0%,
    rgba(38, 4, 50, 0.26) 32%,
    rgba(0, 0, 0, 0.72) 76%,
    rgba(0, 0, 0, 0) 100%
  );
}

.pdp-video-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  height: min(30vh, 280px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(26, 2, 38, 0.42) 42%,
    rgba(0, 0, 0, 0.96) 100%
  );
}

.pdp-video-container {
  position: relative;
  width: 78vw;
  height: 72svh;
  border-radius: 34px;
  overflow: hidden;
  transform: scale(0.9);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8);
  will-change: width, height, border-radius, transform;
}

.pdp-video-section__media {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pdp-video-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.4) 15%, transparent 35%, transparent 65%, rgba(0, 0, 0, 0.4) 85%, #000000 100%);
}

.pdp-video-color-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(147, 51, 234, 0.7) 0%, rgba(236, 72, 153, 0.6) 100%);
  mix-blend-mode: screen;
  opacity: 1;
}

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
}
.pdp-breadcrumb a { transition: color 0.3s var(--easing); }
.pdp-breadcrumb a:hover { color: rgba(255, 255, 255, 0.82); }
.pdp-breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, 0.22); }
.pdp-breadcrumb__current { color: rgba(227, 191, 255, 0.92); }

.pdp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.85fr);
  gap: 64px;
  align-items: start;
}

.pdp-gallery {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp-stage {
  min-height: 540px;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(227, 191, 255, 0.08), transparent 60%),
    #08080a;
}
.pdp-stage__badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
}

.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pdp-thumb {
  min-height: 96px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.3s var(--easing), background 0.3s var(--easing), transform 0.3s var(--easing);
}
.pdp-thumb:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); }
.pdp-thumb.is-active { border-color: rgba(227, 191, 255, 0.4); background: rgba(227, 191, 255, 0.05); }

.pdp-info { padding-top: 6px; }
.pdp-title {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1;
  font-weight: 500;
  margin-bottom: 24px;
}
.pdp-lede {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 17px;
  line-height: 1.7;
}

.pdp-specs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.pdp-chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}

.pdp-buy {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
}
.pdp-price__amount {
  font-size: clamp(36px, 4.5vw, 50px);
  font-weight: 500;
  background: linear-gradient(135deg, #ffffff 30%, var(--titan) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pdp-price__currency {
  font-size: 26px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.pdp-buy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pdp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background: #f4f1eb;
  color: #060606;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.35s var(--easing), box-shadow 0.35s var(--easing), background 0.35s var(--easing);
}
.pdp-add-btn:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(227, 191, 255, 0.16);
}
.pdp-add-btn svg { flex-shrink: 0; }
.pdp-spec-link { min-height: 52px; }
.pdp-buy__note {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

/* Material narrative */
.pdp-material {
  width: 100%;
  max-width: none !important;
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 12%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.9) 88%, #000 100%),
    linear-gradient(to right, #000000 36%, rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0) 100%);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  padding: 150px 0 120px;
  overflow: hidden;
}
.pdp-material__visual-layer {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(70vw, 1220px);
  background:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.66) 20%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 100%),
    url('assets/malzeme-bg.png') right center / cover no-repeat;
  transform-origin: 72% 50%;
  will-change: transform, opacity, filter;
}
.pdp-material__container {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.75fr);
  gap: 64px;
  align-items: center;
}
.pdp-material__copy h2 {
  max-width: none;
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.pdp-material__copy h2 span {
  display: block;
}
.pdp-material__accent {
  padding-bottom: 0.18em;
  background: linear-gradient(115deg, #ffffff 8%, #e5c2ff 48%, #ff6fab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pdp-material__copy p {
  max-width: 600px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.72;
}

/* Reverse variant: image left, copy right */
.pdp-material--reverse {
  background-image:
    linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 12%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.9) 88%, #000 100%),
    linear-gradient(to left, #000000 36%, rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0) 100%);
  background-position: left center;
}
.pdp-material--reverse .pdp-material__visual-layer {
  inset: 0 auto 0 0;
  width: min(58vw, 1040px);
  background:
    linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.66) 28%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 100%),
    url('assets/polymer-bg.png') left center / cover no-repeat;
  transform-origin: 28% 50%;
}
.pdp-material--reverse .pdp-material__container {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.95fr);
  gap: clamp(64px, 9vw, 150px);
}
.pdp-material--reverse .pdp-material__copy {
  grid-column: 2;
  justify-self: end;
  padding-left: clamp(24px, 5vw, 90px);
}
/* Silver cable variant: image right (default layout), uses kablo.png */
.pdp-material--cable .pdp-material__visual-layer {
  width: min(52vw, 940px);
  background:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.66) 30%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 100%),
    url('assets/kablo.png') right center / cover no-repeat;
}

/* ░░░ Stats · 4 columns with thin dividers (big value over small label) ░░░ */
.pdp-stats {
  position: relative;
  width: 100%;
  /* transparent so it shares the .pdp-main gradient with the FR section below —
     a fixed colour created a visible tone seam between the two */
  background: transparent;
  padding: clamp(60px, 9vh, 110px) 40px;
}
.pdp-stats__grid {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.pdp-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 8px clamp(20px, 2.6vw, 44px);
  /* thin divider between columns — equal across all four cells */
  border-left: 0.5px solid rgba(255, 255, 255, 0.10);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp-stats__item:first-child { border-left: none; padding-left: 0; }
/* subtle accent underline that grows in on hover */
.pdp-stats__item::after {
  content: "";
  position: absolute;
  left: clamp(20px, 2.6vw, 44px);
  right: clamp(20px, 2.6vw, 44px);
  bottom: -10px;
  height: 1px;
  background: #d1a8ff;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.pdp-stats__item:first-child::after { left: 0; }
.pdp-stats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 18px;
  color: #6A6E73;
  margin-bottom: 18px;
  transition: color 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp-stats__icon svg { width: 18px; height: 18px; }
.pdp-stats__label,
.pdp-stats__value { transition: color 0.35s ease; }

/* ── Hover · understated accent lift (pointer devices only) ── */
@media (hover: hover) {
  .pdp-stats__item:hover { transform: translateY(-4px); }
  .pdp-stats__item:hover .pdp-stats__icon {
    color: #d1a8ff;
    transform: translateY(-1px);
  }
  .pdp-stats__item:hover .pdp-stats__label { color: rgba(255, 255, 255, 0.82); }
  .pdp-stats__item:hover::after { transform: scaleX(1); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-stats__item,
  .pdp-stats__item::after,
  .pdp-stats__icon { transition: none; }
  .pdp-stats__item:hover { transform: none; }
}
/* Fixed-height title row: every value (number or text) sits on the SAME
   baseline because the box height is constant and content is bottom-aligned. */
.pdp-stats__value {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 46px;
  color: #fff;
  font-family: var(--font-main);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Two-line text title whose TOTAL height equals the single-line number height:
   2 lines × 24px × 0.95 line-height ≈ 46px, matching the digits' cap box. */
.pdp-stats__value--text {
  display: block;
  font-size: 24px;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.pdp-stats__unit {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  /* lift the unit so it reads alongside the digits, not on the baseline */
  padding-bottom: 0.18em;
}
.pdp-stats__label {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.5;
  max-width: 24ch;
}

@media (max-width: 760px) {
  .pdp-stats { padding: clamp(48px, 8vh, 80px) 20px; }
  .pdp-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  /* with 2 columns, only the right column of each row needs a divider */
  .pdp-stats__item:nth-child(odd) { border-left: none; }
}
@media (max-width: 420px) {
  .pdp-stats__grid { grid-template-columns: 1fr; gap: 32px 0; }
  .pdp-stats__item { border-left: none; }
}

/* ░░░ Ses imzası · frekans tepkisi grafiği ░░░ */
.pdp-fr {
  position: relative;
  width: 100%;
  /* transparent so the page's .pdp-main gradient flows through seamlessly
     (a fixed colour here created a visible tone seam against the gradient) */
  background: transparent;
  padding: clamp(70px, 11vh, 130px) 40px;
}
.pdp-fr__inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.pdp-fr__head { max-width: 640px; margin-bottom: clamp(34px, 5vh, 56px); }
.pdp-fr__title {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--font-main);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.pdp-fr__lede {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.6;
}

/* chart — no frame, blends into the page background */
.pdp-fr__chart {
  position: relative;
  margin: 0;
  padding: 18px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pdp-fr__badge {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  padding: 4px 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pdp-fr__badge[hidden] { display: none; }

/* legend */
.pdp-fr__legend {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.pdp-fr__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 400;
}
.pdp-fr__legend-item[hidden] { display: none; }
.pdp-fr__swatch {
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: #5B6BFF;
}
.pdp-fr__legend-item--target .pdp-fr__swatch {
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.45);
  background: none;
}

/* svg plot — viewBox 1000×420, stretched to container width */
.pdp-fr__svg {
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 420px);
}
.pdp-fr__grid line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.pdp-fr__grid line.is-zero { stroke: rgba(255, 255, 255, 0.14); }
.pdp-fr__axis text {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--font-main);
  font-size: 12px;
}
.pdp-fr__line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* draw order: target is painted first (in markup), measured last → measured on top */
.pdp-fr__line--measured {
  stroke: #5B6BFF;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(91, 107, 255, 0.35));
}
.pdp-fr__line--target {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}
.pdp-fr__line--target[hidden] { display: none; }
/* the draw-in reveal is handled in JS via getTotalLength() (see playDrawIn),
   which is robust under preserveAspectRatio="none" stretch */

/* hover cursor */
.pdp-fr__cursor-line { stroke: rgba(91, 107, 255, 0.5); stroke-width: 1; }
.pdp-fr__cursor-dot { fill: #fff; stroke: #5B6BFF; stroke-width: 2; }
.pdp-fr__cursor[hidden] { display: none; }

/* x labels row (real text, below svg) */
.pdp-fr__xlabels {
  position: relative;
  height: 22px;
  margin: 2px 0 6px;
}
.pdp-fr__xlabels span {
  position: absolute;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  white-space: nowrap;
}
.pdp-fr__xlabels span.is-sparse { display: none; }

/* tooltip */
.pdp-fr__tooltip {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -120%);
  padding: 7px 11px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.pdp-fr__tooltip[hidden] { display: none; }
.pdp-fr__tooltip-freq { color: #fff; font-size: 13px; font-weight: 500; }
.pdp-fr__tooltip-db { color: #8E97FF; font-size: 12px; }

@media (max-width: 760px) {
  .pdp-fr { padding: clamp(56px, 9vh, 90px) 20px; }
  .pdp-fr__chart { padding: 14px 0 0; }
  .pdp-fr__legend { gap: 5px; }
  .pdp-fr__xlabels span:not(.is-sparse-keep) { display: none; }
  .pdp-fr__xlabels span.is-sparse-keep { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  /* reduced-motion is also handled in JS (playDrawIn skips the reveal);
     this just guarantees no leftover transition runs */
  .pdp-fr__line { transition: none !important; animation: none !important; }
}

/* Pull the copy a little to the left on the non-mirrored cards
   (Malzeme + Kablo together, so they stay aligned) */
.pdp-material:not(.pdp-material--reverse) .pdp-material__copy {
  margin-left: clamp(-64px, -2.8vw, -24px);
}

/* Features */
.pdp-features {
  max-width: none;
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(68px, 8vh, 86px) 40px clamp(70px, 8vh, 90px);
  background:
    radial-gradient(76% 68% at 72% 8%, rgba(196, 91, 255, 0.12), transparent 64%),
    linear-gradient(180deg, #000 0%, #07070a 48%, #000 100%);
}
.pdp-features__inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}
.pdp-features__head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.62fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 34px;
}
.pdp-features__head h2 {
  max-width: 700px;
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.pdp-features__head p {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
}
.pdp-features__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
  gap: 28px;
  align-items: start;
}
.pdp-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pdp-feature {
  position: relative;
  min-height: 154px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 46%, rgba(255, 255, 255, 0.006)),
    rgba(255, 255, 255, 0.018);
  transition:
    transform 0.45s var(--easing),
    border-color 0.45s var(--easing),
    background 0.45s var(--easing);
}
.pdp-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(220px 180px at 18% 0%, rgba(232, 184, 255, 0.14), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.26) 100%);
  opacity: 0;
  transition: opacity 0.45s var(--easing);
}
.pdp-feature:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 184, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.024) 46%, rgba(255, 255, 255, 0.01)),
    rgba(255, 255, 255, 0.024);
}
.pdp-feature:hover::before { opacity: 1; }
.pdp-feature__index {
  display: inline-flex;
  margin-bottom: 22px;
  color: rgba(233, 190, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pdp-feature strong {
  display: block;
  max-width: 330px;
  font-size: clamp(17px, 1.34vw, 22px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.pdp-feature p {
  max-width: 420px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  line-height: 1.5;
}

.pdp-tech {
  position: sticky;
  top: 96px;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(130% 90% at 86% 0%, rgba(255, 78, 166, 0.18), transparent 50%),
    radial-gradient(110% 80% at 0% 100%, rgba(131, 78, 255, 0.16), transparent 56%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}
.pdp-tech::before {
  content: "";
  position: absolute;
  inset: auto -20% -20% -20%;
  height: 52%;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  opacity: 0.42;
}
.pdp-tech__eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  color: rgba(232, 184, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pdp-tech h3 {
  max-width: 320px;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.pdp-tech__metrics {
  display: grid;
  gap: 1px;
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}
.pdp-tech__metrics div {
  padding: 15px 16px;
  background: rgba(0, 0, 0, 0.24);
}
.pdp-tech__metrics strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
}
.pdp-tech__metrics span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
}
.pdp-tech__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.pdp-tech__list li {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}
.pdp-tech__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e5c2ff, #ff6fab);
}
.pdp-tech__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
}

@media (max-width: 1180px) {
  .pdp-features {
    min-height: auto;
    align-items: stretch;
    padding-top: 90px;
    padding-bottom: 92px;
  }
  .pdp-features__head,
  .pdp-features__grid {
    grid-template-columns: 1fr;
  }
  .pdp-tech {
    position: relative;
    top: auto;
    min-height: auto;
  }
  .pdp-tech__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pdp-features {
    padding: 78px 20px 84px;
  }
  .pdp-features__head {
    gap: 22px;
    margin-bottom: 30px;
  }
  .pdp-feature-list,
  .pdp-tech__metrics {
    grid-template-columns: 1fr;
  }
  .pdp-feature {
    min-height: auto;
    padding: 20px;
  }
  .pdp-feature__index {
    margin-bottom: 20px;
  }
  .pdp-tech {
    padding: 24px;
    border-radius: 18px;
  }
}

/* Spec table */
.pdp-spectable {
  max-width: 1480px;
  margin: 0 auto;
  padding: 40px 40px 100px;
}
.pdp-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pdp-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pdp-spec-row dt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.pdp-spec-row dd {
  text-align: right;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
}

/* Box & cable */
.pdp-box {
  max-width: 1480px;
  margin: 0 auto;
  padding: 100px 40px;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(0, 0.92fr);
  gap: 64px;
  align-items: center;
}
.pdp-box__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pdp-box__media .about-visual { min-height: 360px; }
.pdp-box__cable { transform: translateY(-22px); }
.pdp-box__case { transform: translateY(22px); }
.pdp-box__copy h2 {
  max-width: 480px;
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.04;
  font-weight: 400;
}
.pdp-box__copy p {
  max-width: 520px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 17px;
  line-height: 1.7;
}

/* Closing CTA */
.pdp-cta {
  max-width: 1480px;
  margin: 0 auto;
  padding: 40px 40px 130px;
}
.pdp-cta__inner {
  position: relative;
  overflow: hidden;
  padding: 72px 48px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 140% at 80% 0%, rgba(227, 191, 255, 0.1), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  text-align: center;
}
.pdp-cta__inner h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  font-weight: 400;
}
.pdp-cta__inner p {
  max-width: 560px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  line-height: 1.65;
}
.pdp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

@media (max-width: 1100px) {
  .pdp-hero__grid,
  .pdp-material__container,
  .pdp-features__grid,
  .pdp-box {
    grid-template-columns: 1fr;
  }
  .pdp-material {
    background-image:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.48) 56%, rgba(0, 0, 0, 0.92) 100%);
    background-position: center center;
    padding: 110px 0 80px;
  }
  .pdp-material__visual-layer {
    width: 100%;
    opacity: 0.6;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.94) 100%),
      url('assets/malzeme-bg.png') center center / cover no-repeat;
  }
  .pdp-material:not(.pdp-material--reverse) .pdp-material__copy {
    margin-left: 0;
  }
  .pdp-material--reverse .pdp-material__container {
    grid-template-columns: 1fr;
  }
  .pdp-material--reverse .pdp-material__copy {
    grid-column: auto;
  }
  .pdp-material--reverse {
    background-image:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.48) 56%, rgba(0, 0, 0, 0.92) 100%);
    background-position: center center;
  }
  .pdp-material--reverse .pdp-material__visual-layer {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.94) 100%),
      url('assets/polymer-bg.png') center center / cover no-repeat;
  }
  .pdp-material--cable .pdp-material__visual-layer {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.94) 100%),
      url('assets/kablo.png') center center / cover no-repeat;
  }
  .pdp-material--cable .pdp-material__container {
    grid-template-columns: 1fr;
  }
  .pdp-gallery,
  .pdp-tech { position: static; }
  .pdp-stage { min-height: 420px; }
  .pdp-spec-grid { grid-template-columns: 1fr; gap: 0; }
  .pdp-box__cable,
  .pdp-box__case { transform: none; }
}

@media (max-width: 720px) {
  .pdp-hero { padding: 116px 20px 48px; }
  .pdp-hero--image {
    height: 100svh;
    padding: 0;
  }
  .pdp-hero__image {
    height: 100%;
    object-position: center;
  }
  .pdp-video-section {
    height: auto;
    overflow: hidden;
  }
  .pdp-video-container {
    width: 100vw;
    height: 70svh;
    border-radius: 0px;
    transform: none;
    box-shadow: none;
  }
  .pdp-material__container,
  .pdp-features,
  .pdp-spectable,
  .pdp-box,
  .pdp-cta { padding-left: 20px; padding-right: 20px; }
  .pdp-material,
  .pdp-box { padding-top: 72px; padding-bottom: 72px; }
  .pdp-box__media { grid-template-columns: 1fr; }
  .pdp-box__media .about-visual { min-height: 260px; }
  .pdp-buy__actions { width: 100%; }
  .pdp-add-btn { flex: 1 1 100%; justify-content: center; }
  .pdp-spec-link { flex: 1 1 100%; }
  .pdp-cta__inner { padding: 48px 24px; }
  .pdp-spec-row { flex-direction: column; gap: 4px; }
  .pdp-spec-row dd { text-align: left; }
}

/* ░░░ Selection ░░░ */
::selection { background: var(--titan); color: var(--bg); }