/* ==========================================================================
   CETSA TECH (cetsatech.com) — Antrasit Gri & Kurumsal Lacivert Tasarım Sistemi
   Türk Savunma ve Elektrooptik Mühendisliği Kurumsal Kimliği
   ========================================================================== */

:root {
  --bg-0: #1b2028;        /* Ana Antrasit Gri Zemin */
  --bg-1: #101e36;        /* Kurumsal Koyu Lacivert Yüzey */
  --bg-2: #242b36;        /* Açık Antrasit Gri Kart/Bölüm Zemini */
  --bg-3: #172a4a;        /* Orta Lacivert Panel Zemini */
  --line: #2e3846;        /* Antrasit Çizgi */
  --line-bright: #3d4f6b; /* Çelik Lacivert Çerçeve */
  --text: #f3f6fa;        /* Net Okunabilir Beyaz */
  --text-dim: #cbd5e1;    /* Açık Antrasit-Gümüş Gövde Metni */
  --text-muted: #94a3b8;  /* İkincil Metin */
  --accent: #3b82f6;      /* Kurumsal Lacivert / Kobalt Vurgu */
  --accent-2: #1d4ed8;    /* Derin Lacivert Buton Vurgusu */
  --accent-cool: #60a5fa; /* Açık Mavi Vurgu */
  --ok: #34d399;
  --maxw: 1260px;
  --radius: 6px;
  --shadow: 0 14px 36px rgba(8, 15, 28, 0.55);
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
  --mono: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.55em;
  color: var(--text);
}

h1 { font-size: clamp(2.1rem, 4vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); }
h3 { font-size: 1.22rem; }
p  { margin: 0 0 1.05em; color: var(--text-dim); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--accent-cool);
  margin-bottom: 12px;
  display: inline-block;
}

/* ---------- Top Bar ---------- */
.topbar {
  background: #0b1528;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 500;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  flex-wrap: wrap;
  gap: 12px;
}

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

.topbar .sep {
  color: var(--line-bright);
  margin: 0 10px;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
  box-shadow: 0 0 8px var(--accent);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 29, 53, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-bright);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 20px;
}

/* Prominent Cetsa Tech Brand Mark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark-svg {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
}

.brand-name {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.48rem;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

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

.brand-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Nav Links & Dropdowns */
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links > li {
  position: relative;
}

.nav-links a,
.nav-links .nav-trigger {
  font-size: 0.92rem;
  color: var(--text-dim);
  font-weight: 500;
  position: relative;
  padding: 8px 0;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.nav-links a:hover,
.nav-links a.active,
.nav-links .nav-trigger:hover,
.nav-links .nav-trigger.active {
  color: #ffffff;
}

.nav-links > li > a.active::after,
.nav-links > li > .nav-trigger.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
}

.nav-links .caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform 0.2s ease;
}

.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 295px;
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 10px 10px;
  list-style: none;
  margin: 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.2s;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.has-dropdown:hover .caret,
.has-dropdown.open .caret {
  transform: rotate(-135deg) translate(-1px, -1px);
  border-color: var(--accent);
}

.dropdown li {
  margin: 0;
}

.dropdown a {
  display: block;
  padding: 9px 13px;
  font-size: 0.88rem;
  color: var(--text-dim);
  border-radius: 3px;
  border-left: 2px solid transparent;
}

.dropdown a:hover {
  background: var(--bg-2);
  color: #ffffff;
  border-left-color: var(--accent);
}

.dropdown .group-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 13px 4px;
  display: block;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--accent-2);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-bright);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.8rem;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
}

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

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-bright);
}

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

.btn-sm {
  padding: 9px 14px;
  font-size: 0.8rem;
}

.btn .arrow {
  transition: transform 0.15s ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* ---------- Hero Section ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(76, 201, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #0f1e38 0%, #1b2028 100%);
  border-bottom: 1px solid var(--line);
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 82%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.22fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 84px 0 96px;
}

.hero-copy h1 span {
  color: var(--accent);
}

.hero-copy p.lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 590px;
  line-height: 1.68;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Animated HUD Visual Box (Teslakom signature) */
.hero-visual,
.hakkimizda-visual,
.product-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(59, 130, 246, 0.38);
  background: radial-gradient(circle at 50% 50%, rgba(20, 30, 45, 0.55) 0%, rgba(7, 9, 12, 0.82) 72%);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(59, 130, 246, 0.06), 0 12px 40px rgba(0, 0, 0, 0.4);
}

.product-visual {
  max-width: 360px;
  width: 100%;
  margin-left: auto;
}

.hero-visual::before,
.hero-visual::after,
.hero-visual .corner-br::before,
.hero-visual .corner-br::after,
.hakkimizda-visual::before,
.hakkimizda-visual::after,
.hakkimizda-visual .corner-br::before,
.hakkimizda-visual .corner-br::after,
.product-visual::before,
.product-visual::after,
.product-visual .corner-br::before,
.product-visual .corner-br::after {
  content: "";
  position: absolute;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.hero-visual::before, .hakkimizda-visual::before, .product-visual::before { top: 0; left: 0; width: 48px; height: 2px; }
.hero-visual::after,  .hakkimizda-visual::after,  .product-visual::after  { top: 0; left: 0; width: 2px; height: 48px; }
.hero-visual .corner-br, .hakkimizda-visual .corner-br, .product-visual .corner-br { position: absolute; bottom: 0; right: 0; }
.hero-visual .corner-br::before, .hakkimizda-visual .corner-br::before, .product-visual .corner-br::before { bottom: 0; right: 0; width: 48px; height: 2px; }
.hero-visual .corner-br::after,  .hakkimizda-visual .corner-br::after,  .product-visual .corner-br::after  { bottom: 0; right: 0; width: 2px; height: 48px; }

.hero-visual .crosshair {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88%;
  height: 88%;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.35));
}

.hero-visual .telemetry {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  text-align: right;
  line-height: 1.7;
  z-index: 3;
}

.hero-visual .telemetry .row { color: var(--text-dim); }
.hero-visual .telemetry .row span { color: var(--accent); }
.hero-visual .telemetry .row span.live { animation: liveBlink 1.4s ease-in-out infinite; }

/* HUD Animations */
@keyframes liveBlink {
  0%, 60%, 100% { opacity: 1; }
  70%, 80%      { opacity: 0.35; }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spinReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes pulseRing {
  0%   { transform: scale(0.7); opacity: 0; }
  35%  { opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes drawCircle {
  0%   { stroke-dashoffset: 600; opacity: 0; }
  10%  { opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -600; opacity: 0; }
}
@keyframes targetPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
@keyframes scanLineSweep {
  0%   { transform: translateY(-50%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(50%); opacity: 0; }
}
@keyframes dashTravel {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -120; }
}
@keyframes tiltOscillate {
  0%, 100% { transform: rotate(-22deg); }
  50%      { transform: rotate(22deg); }
}
@keyframes spectrumSweep {
  0%, 100% { transform: translateX(0); opacity: 0.95; }
  50%      { transform: translateX(192px); opacity: 0.95; }
}
@keyframes bandFlash {
  0%, 90%, 100% { opacity: 0.45; }
  10%, 25%      { opacity: 1; }
}
@keyframes beamFire {
  0%   { transform: translateX(0); opacity: 1; }
  45%  { transform: translateX(180px); opacity: 1; }
  55%  { transform: translateX(180px); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 0; }
}

.crosshair .ring-outer  { transform-origin: 100px 100px; animation: spinSlow 24s linear infinite; }
.crosshair .ring-mid    { transform-origin: 100px 100px; animation: spinReverse 36s linear infinite; }
.crosshair .ring-pulse  { transform-origin: 100px 100px; animation: pulseRing 3.4s ease-out infinite; }
.crosshair .ring-pulse.delay-1 { animation-delay: 1.1s; }
.crosshair .ring-pulse.delay-2 { animation-delay: 2.2s; }
.crosshair .draw-arc    { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawCircle 6s linear infinite; }
.crosshair .sweep-arm   { transform-origin: 100px 100px; animation: spinSlow 4.5s linear infinite; }
.crosshair .target-dot  { transform-origin: 100px 100px; transform-box: fill-box; animation: targetPulse 1.6s ease-in-out infinite; }
.crosshair .scan-line   { transform-origin: center; animation: scanLineSweep 3.2s ease-in-out infinite; }

.network-svg, .product-svg, .capability-svg { width: 100%; height: 100%; }
.network-svg .bridge-outer { transform-origin: 200px 200px; animation: spinSlow 32s linear infinite; }
.network-svg .bridge-hub   { transform-origin: 200px 200px; animation: targetPulse 2.2s ease-in-out infinite; }
.network-svg .bridge-pulse { transform-origin: 200px 200px; animation: pulseRing 3.2s ease-out infinite; }
.network-svg .bridge-pulse.b2 { animation-delay: 1s; }
.network-svg .bridge-pulse.b3 { animation-delay: 2s; }
.network-svg .conn-line    { stroke-dasharray: 4 8; animation: dashTravel 3.4s linear infinite; }

.product-svg .pan-ring    { transform-origin: 150px 150px; animation: spinSlow 14s linear infinite; }
.product-svg .tilt-arc    { transform-origin: 150px 150px; animation: tiltOscillate 4s ease-in-out infinite; }
.product-svg .sensor-head { transform-origin: 150px 150px; animation: spinSlow 14s linear infinite; }
.product-svg .spectrum-scan { animation: spectrumSweep 3.6s ease-in-out infinite; }
.product-svg .band-flash  { animation: bandFlash 3.6s linear infinite; }
.product-svg .band-flash.bf2 { animation-delay: 0.9s; }
.product-svg .band-flash.bf3 { animation-delay: 1.8s; }
.product-svg .band-flash.bf4 { animation-delay: 2.7s; }
.product-svg .beam-pulse  { animation: beamFire 2.1s linear infinite; }
.product-svg .beam-line   { stroke-dasharray: 3 6; animation: dashTravel 2.4s linear infinite; }
.product-svg .radar-sweep { transform-origin: 150px 150px; animation: spinSlow 4s linear infinite; }
.product-svg .comp .conn  { stroke-dasharray: 3 5; animation: dashTravel 2.4s linear infinite; }

/* ---------- 4 Core Sector Tiles (Immediately Below Hero) ---------- */
.sectors-4-bar {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}

.sectors-4-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.sector-tile {
  position: relative;
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sector-tile:last-child {
  border-right: none;
}

.sector-tile:hover {
  background: linear-gradient(145deg, #131c28 0%, #0a0e14 100%);
}

.sector-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background 0.2s ease;
}

.sector-tile:hover::before {
  background: var(--accent);
}

.sector-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.sector-tile-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.05);
}

.sector-tile-code {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid rgba(59, 130, 246, 0.45);
  padding: 3px 8px;
  border-radius: 2px;
}

.sector-tile h3 {
  font-size: 1.24rem;
  margin-bottom: 10px;
}

.sector-tile p {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.sector-tile .arrow-link {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Sections & Headers ---------- */
.section {
  padding: 88px 0;
  border-bottom: 1px solid var(--line);
}

.section.alt-bg {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

/* White High-Contrast Section for Corporate Compliance / EUS */
.section-white {
  background: #ffffff;
  color: #0b0f17;
  border-bottom: 1px solid #dce2ec;
}

.section-white h2,
.section-white h3,
.section-white h4 {
  color: #0b0f17;
}

.section-white p {
  color: #334155;
}

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

.section-head .text {
  max-width: 740px;
}

.section-head .link {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}

/* ---------- Grids & Real Photo Cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card-media {
  aspect-ratio: 16 / 10;
  background: #0a0e14;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.card-media.contain-img img {
  object-fit: contain;
  padding: 16px;
  background: radial-gradient(circle at 50% 50%, #16202e 0%, #090d13 100%);
}

.card:hover .card-media img {
  transform: scale(1.04);
  filter: saturate(1.02) contrast(1.08);
}

.card-media .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: rgba(7, 9, 12, 0.84);
  border: 1px solid var(--line-bright);
  padding: 4px 8px;
  border-radius: 2px;
  z-index: 2;
}

.card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card h3 {
  margin-bottom: 8px;
  font-size: 1.15rem;
}

.card p {
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.card .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
}

/* ---------- Feature Rows & Figures ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-row + .feature-row { margin-top: 76px; }

.figure {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-1);
  margin: 0;
}

.figure img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.figure figcaption {
  padding: 13px 18px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.feature-list li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 0.94rem;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.feature-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.feature-list li::before {
  content: "■";
  color: var(--accent);
  font-size: 0.6rem;
  margin-top: 6px;
  flex-shrink: 0;
}

.content-two-col {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start;
}

.content-two-col + .content-two-col {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

/* ---------- EUS & Supply Chain Compliance Pillars ---------- */
.compliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.compliance-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 34px;
}

.compliance-card.dark-box {
  background: var(--bg-0);
  border-color: var(--line-bright);
  border-left: 4px solid var(--accent);
  color: var(--text);
}

.compliance-card.dark-box h3 {
  color: #ffffff;
}

.compliance-card.dark-box p {
  color: var(--text-dim);
}

/* ---------- Stats Strip ---------- */
.stats {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-bottom: 1px solid var(--line);
}

.stats .grid-4 {
  gap: 0;
}

.stat {
  padding: 34px 26px;
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: none;
}

.stat .num {
  font-family: var(--mono);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent);
}

.stat .lbl {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-top: 6px;
}

/* ---------- Spec Table ---------- */
.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 16px;
}

.specs th,
.specs td {
  text-align: left;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.specs th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-1);
}

.specs td {
  color: var(--text);
}

/* ---------- Catalog Filter Bar & Product Spec Actions ---------- */
.catalog-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  background: var(--bg-0);
  border: 1px solid var(--line-bright);
  color: var(--text-dim);
  padding: 7px 14px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  font-weight: 700;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.btn-datasheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--line-bright);
  color: var(--text);
  background: var(--bg-0);
  border-radius: 2px;
}

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

.btn-quote-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--accent);
  color: #ffffff;
  background: var(--accent);
  border-radius: 2px;
  cursor: pointer;
}

.btn-quote-sm:hover {
  background: var(--accent-2);
}

/* ---------- Interior Page Hero ---------- */
.page-hero {
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(59, 130, 246, 0.14), transparent 60%),
    linear-gradient(180deg, #0f1e38 0%, var(--bg-0) 100%);
  padding: 72px 0 60px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.page-hero .crumbs {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.page-hero .crumbs a:hover {
  color: var(--accent);
}

.product-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
}

/* ---------- Forms & Contact ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

label.field {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.15s ease;
}

.form-grid textarea {
  min-height: 120px;
  resize: vertical;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-block {
  margin-top: 14px;
}

.contact-block .row {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.contact-block .row:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-block .lbl {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- CTA Banner & Footer ---------- */
.cta-banner {
  background:
    radial-gradient(700px 300px at 100% 50%, rgba(59, 130, 246, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}

.cta-banner .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.cta-banner h2 {
  margin: 0;
  max-width: 680px;
}

.site-footer {
  background: #0d1627;
  padding: 64px 0 32px;
  border-top: 2px solid var(--accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}

.footer-grid h5 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 10px;
}

.footer-grid a {
  color: var(--text-dim);
  font-size: 0.88rem;
}

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

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Tactical Military Camouflage Supply Chain Section ---------- */
.section-camo {
  position: relative;
  padding: 96px 0;
  color: #f1f5f0;
  background-color: #1a2318;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(10, 15, 10, 0.25) 0%, rgba(8, 12, 8, 0.72) 100%),
    linear-gradient(rgba(163, 190, 120, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163, 190, 120, 0.05) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Crect width='480' height='480' fill='%231e281b'/%3E%3Cg fill='%232d3d26'%3E%3Cpath d='M0 40 C60 20 110 60 170 40 C220 20 260 80 320 70 C380 60 420 10 480 30 L480 150 C410 170 360 120 290 140 C230 160 190 110 120 130 C60 150 30 110 0 130 Z'/%3E%3Cpath d='M80 260 C150 230 210 280 280 250 C340 220 410 270 480 240 L480 370 C410 390 350 340 270 360 C190 380 140 330 60 350 C20 360 10 320 0 330 L0 270 C30 275 50 270 80 260 Z'/%3E%3C/g%3E%3Cg fill='%233d4f32'%3E%3Cpath d='M40 120 C95 100 150 145 210 120 C260 95 310 150 370 130 C410 115 445 140 480 125 L480 215 C425 235 375 185 315 205 C255 225 200 175 135 195 C75 215 35 175 0 190 L0 130 C15 128 25 125 40 120 Z'/%3E%3Cpath d='M0 370 C70 350 130 395 205 370 C275 345 335 400 410 375 C440 365 460 380 480 370 L480 465 C415 480 355 435 280 455 C205 475 145 430 70 450 C35 460 15 445 0 455 Z'/%3E%3C/g%3E%3Cg fill='%234a3c2a'%3E%3Cpath d='M130 15 C185 5 235 50 290 25 C340 5 390 45 440 20 L460 85 C405 110 350 65 295 90 C240 115 185 70 125 95 C85 110 60 75 35 85 L55 25 C80 30 105 20 130 15 Z'/%3E%3Cpath d='M25 210 C85 190 145 235 205 210 C265 185 320 230 385 205 L410 275 C345 300 285 255 220 280 C155 305 95 260 30 285 Z'/%3E%3Cpath d='M170 330 C235 310 295 355 360 330 C405 312 445 340 475 325 L460 395 C395 415 335 370 270 395 C205 420 150 375 95 395 L110 335 C135 340 150 335 170 330 Z'/%3E%3C/g%3E%3Cg fill='%2311170f'%3E%3Cpath d='M0 75 C55 60 105 100 165 80 C215 62 265 105 325 85 L340 145 C275 165 220 120 155 140 C95 160 45 120 0 135 Z'/%3E%3Cpath d='M210 175 C270 155 330 200 395 175 C430 162 455 180 480 170 L480 235 C425 250 370 210 310 230 C250 250 195 210 140 230 L155 180 C175 185 190 182 210 175 Z'/%3E%3Cpath d='M45 305 C110 285 170 330 235 305 C295 282 355 325 420 305 L435 360 C365 380 305 335 235 360 C165 385 105 340 35 365 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 36px 36px, 36px 36px, 420px 420px;
  border-top: 3px solid var(--accent);
  border-bottom: 3px solid #4d6338;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.65);
}

.section-camo .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 18, 11, 0.88);
  border: 1px solid rgba(163, 190, 120, 0.45);
  border-left: 3px solid var(--accent);
  padding: 6px 12px;
  color: #d9f99d;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.section-camo h2 {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

.section-camo .section-head p {
  color: #d8e2d1;
}

.camo-card {
  position: relative;
  background: rgba(11, 16, 11, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(154, 184, 114, 0.38);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}

.camo-card::after {
  content: "MIL-STD // SUPPLY-OPS";
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: rgba(185, 212, 148, 0.55);
}

.camo-card h3 {
  color: #ffffff;
  font-size: 1.32rem;
  margin-bottom: 14px;
}

.camo-card p {
  color: #d3ded0;
  line-height: 1.72;
  margin-bottom: 14px;
}

.camo-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(154, 184, 114, 0.3);
}

.camo-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 4px 10px;
  background: rgba(45, 61, 38, 0.75);
  border: 1px solid rgba(163, 190, 120, 0.4);
  color: #ecfccb;
  border-radius: 3px;
}

/* ---------- Yarı Mamul & Hammadde Interactive Tabs (Germanyum 5N & Titanyum Gr2/Gr5) ---------- */
.raw-tabs-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 36px;
}

.raw-tabs-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #0e1a2f;
  border-bottom: 2px solid var(--line-bright);
}

.raw-tab-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 22px 28px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-dim);
  transition: all 0.2s ease;
  border-right: 1px solid var(--line);
}

.raw-tab-btn:last-child {
  border-right: none;
}

.raw-tab-btn:hover {
  background: rgba(59, 130, 246, 0.05);
  color: #ffffff;
}

.raw-tab-btn.active {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.14) 0%, rgba(15, 22, 34, 0.95) 100%);
  border-bottom-color: var(--accent);
  color: #ffffff;
}

.raw-tab-btn .tab-code {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}

.raw-tab-btn .tab-title {
  display: block;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.raw-tab-btn .tab-pill {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid var(--line-bright);
  background: #0d131d;
  color: var(--text-dim);
  white-space: nowrap;
}

.raw-tab-btn.active .tab-pill {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  font-weight: 700;
}

.raw-tab-panel {
  display: none;
  padding: 36px 32px;
}

.raw-tab-panel.active {
  display: block;
}

.raw-showcase-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: 32px;
  align-items: start;
}

.raw-visual-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.raw-main-figure {
  margin: 0;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;
}

.raw-main-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.raw-main-figure figcaption {
  background: #0f1d35;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.74rem;
  padding: 10px 14px;
  border-top: 2px solid var(--accent);
}

.raw-sub-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.raw-mini-card {
  background: #16243d;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 14px;
}

.raw-mini-card .mini-lbl {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 6px;
}

.raw-mini-card strong {
  display: block;
  color: #ffffff;
  font-size: 0.94rem;
  margin-bottom: 4px;
}

.raw-mini-card span {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.45;
  display: block;
}

@media (max-width: 960px) {
  .raw-tabs-nav,
  .raw-showcase-grid,
  .raw-sub-visuals {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-inner,
  .product-hero-grid,
  .feature-row,
  .feature-row.reverse,
  .content-two-col,
  .compliance-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sectors-4-grid,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sector-tile {
    border-bottom: 1px solid var(--line);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .topbar { display: none; }
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--bg-1);
    border-bottom: 2px solid var(--accent);
    padding: 20px 24px;
    gap: 12px;
  }
  .nav-links.open .has-dropdown .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 6px 0 6px 14px;
    background: transparent;
  }
  .nav-cta { display: none; }
  .sectors-4-grid,
  .grid-3,
  .grid-4,
  .grid-2,
  .form-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}


/* ==========================================================================
   APPLE-STYLE SCROLLYTELLING & HARDWARE ANIMATION ENGINE
   ========================================================================== */

/* Top Scroll Progress Bar */
.scroll-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(16, 30, 54, 0.65);
  z-index: 9999;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 55%, #34d399 100%);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.8);
  transition: width 0.06s linear;
}

/* Scroll-Reveal Animations (Apple Keynote Style) */
.scrolly-reveal {
  opacity: 0;
  transform: translateY(38px) scale(0.97);
  filter: blur(6px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.scrolly-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Apple-Style Hero Showcase */
.apple-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background:
    radial-gradient(ellipse 85% 60% at 50% 0%, rgba(37, 99, 235, 0.28) 0%, rgba(16, 30, 54, 0.65) 52%, var(--bg-0) 100%);
  border-bottom: 1px solid var(--line-bright);
}

.apple-hero-top {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 44px;
  position: relative;
  z-index: 2;
}

.apple-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(16, 30, 54, 0.85);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #93c5fd;
  font-family: var(--heading);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(10, 18, 34, 0.5);
}

.apple-pill-badge .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 10px #60a5fa;
  animation: scrollyPulse 2s infinite ease-in-out;
}

@keyframes scrollyPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.apple-hero-title {
  font-size: clamp(2.35rem, 4.6vw, 4.1rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 55%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.apple-hero-title .highlight-blue {
  background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 50%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.apple-hero-sub {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
  color: var(--text-dim);
  max-width: 780px;
  margin: 0 auto 28px;
  line-height: 1.68;
}

.apple-hero-sub strong {
  color: #ffffff;
}

.apple-hero-stage {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(16, 30, 54, 0.92) 0%, rgba(27, 32, 40, 0.96) 100%);
  border: 1px solid rgba(96, 165, 250, 0.35);
  box-shadow:
    0 30px 80px rgba(6, 11, 22, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 28px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

.apple-stage-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: center;
}

.apple-hardware-deck {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.apple-hw-card {
  background: rgba(15, 23, 38, 0.88);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 10px;
  padding: 12px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.apple-hw-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: #60a5fa;
}

.apple-hw-card img {
  width: 100%;
  height: 138px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
  margin-bottom: 10px;
}

.apple-hw-card .hw-kicker {
  font-family: var(--heading);
  font-size: 0.68rem;
  font-weight: 700;
  color: #60a5fa;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
}

.apple-hw-card strong {
  font-family: var(--heading);
  font-size: 0.92rem;
  color: #ffffff;
  display: block;
  margin-top: 2px;
}

.apple-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  color: #93c5fd;
  font-family: var(--heading);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.scroll-mouse-icon {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(96, 165, 250, 0.6);
  border-radius: 14px;
  position: relative;
}

.scroll-mouse-icon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: #60a5fa;
  border-radius: 2px;
  animation: scrollWheelAnim 1.8s infinite ease-in-out;
}

@keyframes scrollWheelAnim {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ==========================================================================
   PINNED 5-STAGE END-TO-END SUPPLY & DELIVERY SCROLLYTELLING SECTION
   ========================================================================== */
.scrolly-supply-section {
  position: relative;
  height: 460vh;
  background: linear-gradient(180deg, #131922 0%, #101e36 50%, #1b2028 100%);
  border-bottom: 1px solid var(--line-bright);
}

.scrolly-sticky-viewport {
  position: sticky;
  top: 78px;
  height: calc(100vh - 78px);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 20px 0;
}

.scrolly-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.scrolly-stage-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.scrolly-step-pill {
  appearance: none;
  background: rgba(16, 30, 54, 0.75);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: var(--text-dim);
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--heading);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.25s ease;
}

.scrolly-step-pill .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  font-size: 0.68rem;
  font-weight: 700;
}

.scrolly-step-pill.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.scrolly-step-pill.active .step-num {
  background: #ffffff;
  color: #101e36;
}

.scrolly-step-pill.completed {
  border-color: rgba(52, 211, 153, 0.5);
  color: #d1fae5;
}

.scrolly-step-pill.completed .step-num {
  background: #10b981;
  color: #06281e;
}

.scrolly-theater-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 28px;
  align-items: stretch;
  min-height: 470px;
}

/* Left Narrative Stack */
.scrolly-narrative-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(16, 26, 44, 0.82);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 20px 50px rgba(6, 11, 22, 0.55);
}

.scrolly-card-stack {
  position: relative;
  flex: 1;
  min-height: 310px;
}

.scrolly-step-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scrolly-step-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scrolly-step-card .stage-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.scrolly-step-card h3 {
  font-size: clamp(1.38rem, 2.1vw, 1.85rem);
  line-height: 1.2;
  margin-bottom: 14px;
  color: #ffffff;
}

.scrolly-step-card p {
  font-size: 0.96rem;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 16px;
}

.scrolly-step-card p strong {
  color: #ffffff;
}

.scrolly-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.scrolly-chip {
  font-family: var(--heading);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #dbeafe;
}

.scrolly-progress-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(96, 165, 250, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.scrolly-meter-wrap {
  flex: 1;
  height: 6px;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.scrolly-meter-fill {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 60%, #34d399 100%);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.scrolly-pct-label {
  font-family: var(--heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: #93c5fd;
  min-width: 115px;
  text-align: right;
}

/* Right Interactive Canvas & Hardware Stage */
.scrolly-canvas-stage {
  position: relative;
  background: radial-gradient(circle at 50% 45%, #172a4a 0%, #0f1726 70%, #0b111d 100%);
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow:
    0 24px 60px rgba(5, 10, 20, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#supplyScrollyCanvas {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
}

.scrolly-floating-product {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 175px;
  background: rgba(16, 30, 54, 0.92);
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.scrolly-floating-product img {
  width: 100%;
  height: 92px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
  display: block;
}

.scrolly-floating-product .fp-caption {
  font-family: var(--heading);
  font-size: 0.68rem;
  font-weight: 700;
  color: #dbeafe;
  text-align: center;
  margin-top: 6px;
  line-height: 1.25;
}

/* Apple-Style Bento Grid for Mission & Capabilities */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.bento-card {
  background: linear-gradient(160deg, rgba(16, 30, 54, 0.78) 0%, rgba(28, 35, 45, 0.92) 100%);
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: #60a5fa;
}

.bento-span-7 { grid-column: span 7; }
.bento-span-5 { grid-column: span 5; }
.bento-span-4 { grid-column: span 4; }
.bento-span-8 { grid-column: span 8; }

.bento-metric {
  font-family: var(--heading);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 700;
  background: linear-gradient(90deg, #ffffff 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 10px;
}

@media (max-width: 1024px) {
  .apple-stage-grid,
  .scrolly-theater-grid {
    grid-template-columns: 1fr;
  }
  .scrolly-supply-section {
    height: auto;
    padding: 60px 0;
  }
  .scrolly-sticky-viewport {
    position: relative;
    top: 0;
    height: auto;
  }
  .scrolly-card-stack {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .scrolly-step-card {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: rgba(15, 23, 38, 0.85);
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.25);
  }
  .bento-span-7,
  .bento-span-5,
  .bento-span-4,
  .bento-span-8 {
    grid-column: span 12;
  }
}


/* ==========================================================================
   SECOND SCROLLYTELLING: GERMANIUM POWDER -> LENS -> OBJECTIVE + LRF -> FINAL CAMERA
   ========================================================================== */
.scrolly-genesis-section {
  position: relative;
  height: 580vh;
  background: linear-gradient(180deg, #1b2028 0%, #0e192d 45%, #152238 80%, #1b2028 100%);
  border-bottom: 2px solid var(--accent);
}

.scrolly-genesis-section .scrolly-sticky-viewport {
  position: sticky;
  top: 78px;
  height: calc(100vh - 78px);
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 18px 0;
}

.genesis-step-pill {
  appearance: none;
  background: rgba(16, 30, 54, 0.78);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: var(--text-dim);
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--heading);
  font-size: 0.71rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
}

.genesis-step-pill .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  font-size: 0.65rem;
  font-weight: 700;
}

.genesis-step-pill.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

.genesis-step-pill.active .step-num {
  background: #ffffff;
  color: #101e36;
}

.genesis-step-pill.completed {
  border-color: rgba(52, 211, 153, 0.5);
  color: #d1fae5;
}

.genesis-step-pill.completed .step-num {
  background: #10b981;
  color: #06281e;
}

.genesis-theater-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 26px;
  align-items: stretch;
  min-height: 485px;
}

#genesisScrollyCanvas {
  width: 100%;
  height: 100%;
  min-height: 435px;
  display: block;
}

.genesis-3d-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.genesis-3d-mount canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.genesis-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  background: rgba(11, 17, 29, 0.82);
  border: 1px solid rgba(96, 165, 250, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.04em;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.genesis-hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  display: inline-block;
  animation: genesisHudPulse 2s ease-in-out infinite;
}

@keyframes genesisHudPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.genesis-hud-hint {
  position: absolute;
  bottom: 12px;
  right: 14px;
  z-index: 5;
  font-family: var(--heading);
  font-size: 0.64rem;
  font-weight: 700;
  color: #60a5fa;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(11, 17, 29, 0.82);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 6px;
  padding: 4px 10px;
  pointer-events: none;
}

.sales-pitch-box {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(16, 30, 54, 0.92) 100%);
  border-left: 3px solid #60a5fa;
  border-top: 1px solid rgba(96, 165, 250, 0.28);
  border-right: 1px solid rgba(96, 165, 250, 0.28);
  border-bottom: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.sales-pitch-box .pitch-lbl {
  display: block;
  font-family: var(--heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 4px;
}

.sales-pitch-box p {
  font-size: 0.88rem !important;
  color: #f1f5f9 !important;
  margin: 0 !important;
  line-height: 1.52 !important;
}

/* 6-Link Commercial Value Chain Summary Bar */
.value-chain-bar {
  background: linear-gradient(180deg, #101e36 0%, #162030 100%);
  border-bottom: 1px solid var(--line-bright);
  padding: 56px 0;
}

.chain-6-grid,
.chain-7-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.chain-node-card {
  background: rgba(24, 33, 48, 0.95);
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 12px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 195px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.chain-node-card:hover {
  transform: translateY(-5px);
  border-color: #60a5fa;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.chain-node-card .c-num {
  font-family: var(--heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.06em;
}

.chain-node-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.28;
}

.chain-node-card p {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.48;
  margin-bottom: 12px;
}

.chain-node-card .c-badge {
  font-family: var(--heading);
  font-size: 0.65rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 5px 8px;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.04em;
  margin-top: auto;
}

@media (max-width: 1150px) {
  .chain-6-grid,
  .chain-7-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (max-width: 1024px) {
  .genesis-theater-grid {
    grid-template-columns: 1fr;
  }
  .scrolly-genesis-section {
    height: auto;
    padding: 60px 0;
  }
  .scrolly-genesis-section .scrolly-sticky-viewport {
    position: relative;
    top: 0;
    height: auto;
  }
}

@media (max-width: 680px) {
  .chain-6-grid,
  .chain-7-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .chain-6-grid,
  .chain-7-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}