/* ==========================================================================
   NexaSilicon — Site Stylesheet
   Design direction: see NexaSilicon_디자인_방향.md
   2026-08-20 redesign pass: taste-skill "redesign-existing-projects" audit
   applied (overhaul intensity). Dials — VARIANCE 8 / MOTION 6 / DENSITY 4.
   Stack unchanged: vanilla HTML/CSS/JS, no build step, no framework.
   ========================================================================== */

:root {
  --color-primary-deep: #0D55DB;
  --color-primary: #1266E2;
  --color-mid-blue: #4696FF;
  --color-cyan: #31BFFF;
  --color-tint: #7FB4F6;
  --color-ink: #0A0E1A;
  --color-body: #5B6472;
  --color-surface: #F5F7FA;
  --color-white: #FFFFFF;
  --color-border: #E3E8EF;

  --gradient-brand: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-cyan) 100%);

  --font-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;

  --max-width: 1280px;
  --section-pad-y: 7rem;
  --section-pad-y-mobile: 3.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* shadows tinted to the brand navy hue, never pure black */
  --shadow-card: 0 4px 24px rgba(13, 33, 79, 0.08);
  --shadow-card-hover: 0 14px 32px rgba(13, 33, 79, 0.16);
  --shadow-dark: 0 20px 48px rgba(6, 12, 32, 0.35);

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

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

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

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — a11y, hidden until keyboard-focused */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-ink);
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.2s var(--ease-standard);
}
.skip-link:focus {
  top: 12px;
}

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

section {
  padding: var(--section-pad-y) 0;
}

.section-alt {
  background: var(--color-surface);
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); line-height: 1.14; }
h3 { font-size: 1.3rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; color: var(--color-body); text-wrap: pretty; }

/* Eyebrow — used sparingly by design (max ~3 per page: hero, one mid-page, one CTA).
   Do not add this to every section; the headline alone should carry most sections. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: 2px;
}

.section-intro {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.section-intro.align-left {
  margin-left: 0;
  text-align: left;
}

.section-intro h2 { margin-bottom: 1rem; }

.section-lede {
  max-width: 640px;
  font-size: 1.05rem;
  color: var(--color-body);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--ease-standard), background 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-primary-deep);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(13, 85, 219, 0.28);
}
.btn-primary:hover {
  background: var(--gradient-brand);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(13, 85, 219, 0.36);
}
.btn-primary:active { transform: translateY(-1px) scale(0.97); }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary-deep);
}
.btn-outline:hover {
  background: rgba(18, 102, 226, 0.06);
  transform: translateY(-2px);
}

.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--color-white);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.8);
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

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

/* Continuous back-and-forth shuttle toward the first nav link and back.
   Only enabled once the header has real breathing room (see measured gaps
   at various widths) so it never overlaps "Company" on narrower desktops,
   and only when the user hasn't asked for reduced motion. */
@keyframes brand-shuttle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(100px); }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .brand {
    animation: brand-shuttle 3.6s ease-in-out infinite;
  }
}

.brand img { height: 32px; width: auto; }

.brand-divider {
  width: 1px;
  height: 26px;
  background: var(--color-border);
  flex-shrink: 0;
}

.brand-tagline {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  white-space: nowrap;
}

.brand-tagline .tagline-sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-body);
}

.brand-tagline .tagline-name {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary-deep);
}

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

.main-nav a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-body);
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
  transition: right 0.25s var(--ease-standard);
}

.main-nav a:hover { color: var(--color-ink); }
.main-nav a:hover::after,
.main-nav a.active::after { right: 0; }
.main-nav a.active { color: var(--color-ink); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Hero (asymmetric split, not centered — VARIANCE 8) ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  max-height: 900px;
  display: flex;
  align-items: center;
  color: var(--color-white);
  /* opaque fallback in case the photo fails to load — same brand gradient as before */
  background:
    radial-gradient(1100px 620px at 92% 8%, rgba(49,191,255,0.32), transparent 62%),
    radial-gradient(900px 520px at 6% 96%, rgba(13,85,219,0.5), transparent 62%),
    linear-gradient(120deg, #071233 0%, #0D2B66 45%, #0D55DB 80%, #1B7FE0 100%);
  overflow: hidden;
}

/* blurred hero photo — bottom-most layer. The blur() filter is scoped to this
   element's own subtree only, so it never touches the wash, grid, or text/logo
   painted in the layers above it. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-photo img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(16px) saturate(1.08) brightness(0.9);
  transform: translateZ(0); /* own compositing layer, smoother blur paint */
}

/* brand-color wash over the photo — keeps the same look/contrast as the old
   flat gradient hero, just semi-transparent now so the photo shows through */
.hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 92% 8%, rgba(49,191,255,0.32), transparent 62%),
    radial-gradient(900px 520px at 6% 96%, rgba(13,85,219,0.5), transparent 62%),
    linear-gradient(120deg, rgba(7,18,51,0.82) 0%, rgba(13,43,102,0.8) 45%, rgba(13,85,219,0.72) 80%, rgba(27,127,224,0.7) 100%);
}

/* subtle grain to break the flat AI-gradient look */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  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: 42px 42px;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 3;
  padding-top: 5.5rem;
  padding-bottom: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: 48px;
  align-items: center;
}

.hero-copy { max-width: 620px; }

.hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 1.2rem;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: 1.2rem;
  white-space: pre-line;
}

.hero-sub {
  color: rgba(255,255,255,0.82);
  max-width: 480px;
  font-size: 1.08rem;
  margin-bottom: 2.1rem;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.stats-band {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 1.8rem;
}

.stat .stat-number {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--color-white);
  display: block;
  letter-spacing: -0.02em;
}
.stat .stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.68);
}

/* hero visual — abstract chip/die motif, not a text+gradient-blob placeholder */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual svg {
  width: 100%;
  height: auto;
  max-width: 420px;
  filter: drop-shadow(0 24px 48px rgba(3, 10, 30, 0.45));
}

.chip-glow-1, .chip-glow-2, .chip-trace {
  animation: chip-pulse 3.6s ease-in-out infinite;
}
.chip-glow-2 { animation-delay: 0.9s; }
.chip-trace { animation: trace-flow 5s linear infinite; }

.chip-logo {
  transform-box: fill-box;
  transform-origin: center;
  animation: chip-logo-pulse 3.6s ease-in-out infinite;
}

@keyframes chip-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes trace-flow {
  0% { stroke-dashoffset: 240; }
  100% { stroke-dashoffset: 0; }
}
@keyframes chip-logo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .chip-glow-1, .chip-glow-2, .chip-trace, .chip-logo, .company-logo-pulse { animation: none; }
}

/* ---------- Video (intro) ---------- */

.video-frame {
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--color-ink);
}

.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
}

/* ---------- Split content (image / text) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split.reverse .split-media { order: 2; }
.split.reverse .split-body { order: 1; }

.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  background: var(--gradient-brand); /* opaque fallback if a photo layer's image fails to load */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Optional photo layer for a .split-media panel — same technique as the hero:
   the blur() filter is scoped to this element's own subtree only, so it never
   touches the .glyph text painted above it. */
.split-media .media-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.split-media .media-photo img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(6px) saturate(1.05) brightness(0.85);
}

/* brand-color wash over the photo — keeps the same blue gradient look/contrast
   the plain .glyph card had before, just semi-transparent over the photo */
.split-media .media-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(13,85,219,0.72) 0%, rgba(49,191,255,0.6) 100%);
}

.split-media .glyph {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,0.9);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 2rem;
}

.split-media--photo { padding: 0; }
.split-media--photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.split-media--photo img.company-logo-pulse {
  position: absolute;
  top: 25%;
  left: 82.96%;
  width: 9.42%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  filter: drop-shadow(0 0 10px rgba(120, 190, 255, 0.65)) drop-shadow(0 0 22px rgba(90, 165, 255, 0.45));
  animation: company-logo-pulse 18s ease-in-out infinite;
  pointer-events: none;
}

@keyframes company-logo-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.5); }
  50%      { transform: translate(-50%, -50%) scale(1.5); }
}

.split-body h3 { margin-bottom: 0.8rem; }

.split-body ul {
  padding-left: 1.2rem;
  margin: 1.2rem 0;
}
.split-body li { margin-bottom: 0.55rem; color: var(--color-body); }

.mt-lg { margin-top: 4rem; }

/* ---------- Cards / Grids ---------- */

/* Technology steps: horizontal connected timeline instead of 6 equal boxes.
   Each row of 3 is its own positioning context (.timeline-row) so the
   connecting line is anchored to that row's own top edge — this keeps the
   line aligned with the step-number circles regardless of how tall row 1's
   content renders relative to row 2's (which varies by language/wrapping),
   rather than guessing one fixed pixel offset for the whole 2-row grid. */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.timeline-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(1.6rem + 19px);
  height: 2px;
  background: linear-gradient(90deg, var(--color-border) 0%, var(--color-mid-blue) 50%, var(--color-border) 100%);
  opacity: 0.55;
  z-index: 0;
}

.timeline-step {
  position: relative;
  z-index: 1;
  padding: 1.6rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard), border-color 0.25s ease;
}

.card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 16px rgba(13, 85, 219, 0.32);
}

.timeline-step h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.timeline-step p { font-size: 0.92rem; margin-bottom: 0; }

.timeline-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* IP portfolio category blocks */

.ip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ip-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.8rem;
  transition: border-color 0.25s ease, transform 0.25s var(--ease-standard);
}
.ip-card:hover {
  border-color: var(--color-mid-blue);
  transform: translateY(-3px);
}

.ip-card h3 {
  font-size: 1.05rem;
  color: var(--color-primary-deep);
  margin-bottom: 0.7rem;
}

.ip-card ul { margin: 0; padding-left: 1.1rem; }
.ip-card li { color: var(--color-body); font-size: 0.93rem; margin-bottom: 0.4rem; }

.ip-card--wide { grid-column: span 2; }

.note-box {
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 1rem 1.3rem;
  font-size: 0.88rem;
  color: var(--color-body);
  margin-top: 2rem;
}

/* Track record table */

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); }

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: var(--color-white);
  font-variant-numeric: tabular-nums;
}

thead th {
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-primary-deep);
  padding: 14px 18px;
  position: sticky;
  top: 0;
}

tbody td {
  padding: 14px 18px;
  font-size: 0.92rem;
  color: var(--color-body);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}

tbody tr:nth-child(even) { background: var(--color-surface); }
tbody tr:hover td { background: rgba(70, 150, 255, 0.08); }

tbody td.proj-name { font-weight: 700; color: var(--color-ink); }

/* Foundry partner cards — asymmetric: primary partner spans 2 columns */

.foundry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.foundry-card {
  border-radius: var(--radius-md);
  padding: 1.8rem 1.5rem;
  background: linear-gradient(160deg, var(--color-ink) 0%, #0D2B66 60%, var(--color-primary-deep) 100%);
  color: white;
  transition: transform 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard);
}
.foundry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-dark);
}

.foundry-card--lead {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.foundry-card--lead h3 { font-size: 1.4rem; }
.foundry-card--lead p { font-size: 0.95rem; max-width: 34ch; }

.foundry-card--wide {
  grid-column: span 4;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.foundry-card--wide .node { margin-bottom: 0; white-space: nowrap; }
.foundry-card--wide h3 { margin-bottom: 0; white-space: nowrap; }
.foundry-card--wide p { margin-bottom: 0; }

.foundry-card h3 { color: white; margin-bottom: 0.3rem; }
.foundry-card .node { font-size: 0.82rem; color: var(--color-cyan); font-weight: 700; margin-bottom: 0.8rem; }
.foundry-card p { color: rgba(255,255,255,0.78); font-size: 0.88rem; margin-bottom: 0; }

/* Applications — bento with size variance, not 6 equal tiles */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
}

.bento-cell {
  border-radius: var(--radius-md);
  padding: 1.8rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard);
}
.bento-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.bento-cell--a { grid-column: span 2; }
.bento-cell--b { grid-column: span 2; }
.bento-cell--c { grid-column: span 1; }

.bento-cell h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.bento-cell .examples { font-size: 0.8rem; color: var(--color-primary-deep); font-weight: 600; margin-top: 0.8rem; }

/* Partnership models — image panel + divided list, not a bare full-width list */

.partnership-split {
  grid-template-columns: 0.82fr 1.18fr;
  gap: 48px;
  margin-bottom: 4.5rem;
  align-items: stretch;
}

.partnership-split .split-media { min-height: 100%; }

.model-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.model-row {
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  grid-template-areas: "index title arrow" "index desc arrow";
  gap: 4px 24px;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s ease, padding-left 0.25s var(--ease-standard);
}
.model-row:hover { background: rgba(70, 150, 255, 0.05); padding-left: 0.6rem; }

.model-row .row-index {
  grid-area: index;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-mid-blue);
  font-variant-numeric: tabular-nums;
}

.model-row h3 { grid-area: title; font-size: 1.05rem; margin: 0; }
.model-row p { grid-area: desc; font-size: 0.92rem; margin: 0; }

/* Arrow cue that slides in on hover — the "arrival" movement effect */
.model-row .row-arrow {
  grid-area: arrow;
  color: var(--color-mid-blue);
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s var(--ease-standard), transform 0.25s var(--ease-standard);
}
.model-row:hover .row-arrow { opacity: 1; transform: translateX(0); }

.advantage-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.advantage-item {
  display: flex;
  gap: 16px;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.7rem;
  transition: transform 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard), border-color 0.25s ease;
}
.advantage-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-mid-blue);
}
.advantage-item .card-number { flex-shrink: 0; }
.advantage-item h3 { margin-bottom: 0.4rem; font-size: 1.02rem; }
.advantage-item p { font-size: 0.92rem; margin-bottom: 0; }

/* Hover-reveal photo cards — shared by the "Six reasons" grid above, the
   "IP modules" grid (.ip-card, defined earlier in this file), the
   "Six core application domains" bento grid (.bento-cell, defined above),
   and the Technology "design flow" timeline (.timeline-step, defined
   above — converted 2026-08-25 from a hover-only white background to the
   same permanent-white-card look as the other three grids):
   plain white by default, a photo rises up behind the content only once
   the mouse arrives.
   (Superseded 2026-08-25: these used to be permanently-on for 2 of 6 cards
   via a now-unused .advantage-item--photo/.advantage-photo/.advantage-wash
   set of classes — left harmless/unreferenced below the .hover-photo block,
   same "leave dead code" convention used elsewhere in this file, in case a
   permanent-photo treatment is ever wanted again. The .bento-cell--a tile
   also used to carry a permanent dark gradient background + white text —
   removed 2026-08-25 so all 6 bento cells behave identically via
   .hover-photo, same unification the "Six reasons" grid got.) */
.hover-photo {
  position: relative;
  overflow: hidden;
}

.hover-photo .hover-photo-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hover-photo .hover-photo-img img {
  position: absolute;
  inset: -8%;
  width: 116%;
  max-width: none;
  height: 116%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(1.1) brightness(0.82);
  transition: opacity 0.45s var(--ease-standard), transform 0.6s var(--ease-standard);
}
.hover-photo .hover-photo-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, rgba(7,18,51,0.8) 0%, rgba(13,85,219,0.55) 100%);
  transition: opacity 0.4s var(--ease-standard);
}
.hover-photo:hover .hover-photo-img img { opacity: 1; transform: scale(1); }
.hover-photo:hover .hover-photo-wash { opacity: 1; }
.hover-photo:hover {
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(7, 18, 51, 0.32);
}

.hover-photo .card-number,
.hover-photo > div:not(.hover-photo-img):not(.hover-photo-wash),
.hover-photo > h3,
.hover-photo > p,
.hover-photo > ul {
  position: relative;
  z-index: 2;
}

.hover-photo h3,
.hover-photo p,
.hover-photo li,
.hover-photo .examples {
  transition: color 0.3s ease;
}
.hover-photo:hover h3 { color: #fff; }
.hover-photo:hover p,
.hover-photo:hover li { color: rgba(255,255,255,0.88); }
.hover-photo:hover .examples { color: #fff; }
.hover-photo:hover .card-number {
  background: rgba(255,255,255,0.2);
  box-shadow: none;
}

/* Unused as of 2026-08-25 (see note above) — kept as dead code, not deleted */
.advantage-item--photo {
  overflow: hidden;
  border-color: transparent;
  color: white;
  box-shadow: 0 10px 26px rgba(7, 18, 51, 0.28);
}
.advantage-item--photo:hover { box-shadow: 0 18px 36px rgba(7, 18, 51, 0.38); }

.advantage-item--photo .advantage-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.advantage-item--photo .advantage-photo img {
  position: absolute;
  inset: -8%;
  width: 116%;
  max-width: none;
  height: 116%;
  object-fit: cover;
  filter: saturate(1.1) brightness(0.95);
  transition: transform 0.6s var(--ease-standard);
}
.advantage-item--photo:hover .advantage-photo img { transform: scale(1.08); }

.advantage-item--photo .advantage-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(7,18,51,0.62) 0%, rgba(13,85,219,0.42) 100%);
}

.advantage-item--photo .card-number,
.advantage-item--photo h3,
.advantage-item--photo p {
  position: relative;
  z-index: 2;
}
.advantage-item--photo .card-number {
  background: rgba(255,255,255,0.18);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.advantage-item--photo h3 { color: #fff; }
.advantage-item--photo p { color: rgba(255,255,255,0.85); }

/* CTA band — split layout: text left, looping ambient video right */

.cta-band {
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(49,191,255,0.35), transparent 60%),
    linear-gradient(120deg, #071233 0%, #0D2B66 50%, var(--color-primary-deep) 100%);
  color: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
}

.cta-content {
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.cta-band h2 { color: white; margin-bottom: 1rem; text-align: left; }
.cta-band p { color: rgba(255,255,255,0.8); max-width: 460px; margin-left: 0; margin-right: 0; text-align: left; }
.cta-band .contact-email { color: white; }
.cta-band .contact-footer { color: rgba(255,255,255,0.75); margin-top: 1.5rem; }

/* right-side ambient video panel — decorative only, never carries content.
   Fallback background matches the video's own palette, so a missing/hidden
   video (autoplay blocked, prefers-reduced-motion, slow network) still reads
   as an intentional panel rather than an empty gap. */
.cta-video {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 75% 15%, rgba(49,191,255,0.30), transparent 65%),
    linear-gradient(160deg, #071233 0%, #0D2B66 60%, var(--color-primary-deep) 100%);
}
.cta-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* soft blend into the band's own gradient so the video reads as part of the
   same surface rather than a pasted-in rectangle */
.cta-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #071233 0%, rgba(7,18,51,0.55) 18%, transparent 45%);
  pointer-events: none;
}

/* Contact */

.contact-email {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary-deep);
  margin: 1.2rem 0;
  transition: color 0.2s ease;
}
.contact-email:hover { color: var(--color-cyan); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.65);
  padding: 3.5rem 0 2rem;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-brand img { height: 28px; margin-bottom: 0.8rem; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.85rem; max-width: 320px; margin: 0; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.footer-links a { font-size: 0.88rem; color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer-links a:hover { color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}
.footer-bottom a { color: rgba(255,255,255,0.55); transition: color 0.2s ease; }
.footer-bottom a:hover { color: white; }

/* ---------- Privacy page ---------- */

.legal h2 { margin-top: 2.2rem; margin-bottom: 0.7rem; font-size: 1.25rem; }
.legal p, .legal li { color: var(--color-body); }
.legal .updated { color: var(--color-body); font-size: 0.9rem; margin-bottom: 2.5rem; }

/* ---------- Scroll-reveal motion (vanilla JS + CSS, no library) ----------
   Progressive enhancement: content is fully visible by default. Only when
   an early inline script confirms JS is running (html.js) does content
   start hidden and animate in on scroll — so a failed/blocked script never
   leaves real content permanently invisible. */

.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}
html.js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  :root { --section-pad-y: var(--section-pad-y-mobile); }

  .main-nav { position: fixed; top: 72px; left: 0; right: 0; background: white; flex-direction: column; align-items: flex-start; padding: 20px 24px; gap: 16px; border-bottom: 1px solid var(--color-border); transform: translateY(-150%); transition: transform 0.25s ease; }
  .main-nav.open { transform: translateY(0); }
  .nav-toggle { display: block; }

  .brand-tagline .tagline-sub { display: none; }
  .brand-tagline .tagline-name { font-size: 0.88rem; }

  .hero { min-height: auto; max-height: none; }
  .hero .container { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .hero-visual { order: -1; max-width: 240px; margin: 0 auto 1rem; }
  .hero-copy { max-width: 100%; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse .split-media, .split.reverse .split-body { order: initial; }

  .timeline-row { grid-template-columns: 1fr; }
  .timeline-row::before { display: none; }

  .ip-grid, .foundry-grid, .advantage-list { grid-template-columns: 1fr; }
  .ip-card--wide, .foundry-card--lead { grid-column: span 1; }

  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-cell--a, .bento-cell--b { grid-column: span 2; grid-row: span 1; }

  .model-row {
    grid-template-columns: 32px 1fr;
    grid-template-areas: "index title" "index desc";
  }
  .model-row .row-arrow { display: none; }

  .partnership-split .split-media { min-height: 220px; }

  .stats-band { gap: 20px 28px; }

  .cta-band { grid-template-columns: 1fr; }
  .cta-content { padding: 2.5rem 1.75rem; text-align: center; align-items: center; }
  .cta-band h2, .cta-band p { text-align: center; }
  .cta-band p { margin-left: auto; margin-right: auto; }
  .cta-video { order: -1; min-height: 180px; }
  .cta-video::before { background: linear-gradient(180deg, transparent 55%, #071233 100%); }

  .footer-top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-video video { display: none; }
}