/* ============================================================
   DEBRIX — Design System & Stylesheet
   Version 2.0 · 2026-05-26
   ============================================================ */

/* --- 0. RESET --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* --- 1. DESIGN TOKENS --- */
:root {
  /* Background */
  --color-bg-deepest:   #060606;
  --color-bg-base:      #0a0a0a;
  --color-bg-surface:   #0f0e0c;
  --color-bg-elevated:  #16140f;

  /* Ink (Text) — boosted for readability on dark bg */
  --color-ink-primary:    #f5f1e8;
  --color-ink-secondary:  #c4bfb4;
  --color-ink-tertiary:   #9e998f;
  --color-ink-quaternary: #7a766e;

  /* Line */
  --color-line-faint:   rgba(241,237,228,.06);
  --color-line-soft:    rgba(241,237,228,.08);
  --color-line-base:    rgba(241,237,228,.16);
  --color-line-strong:  rgba(241,237,228,.24);

  /* Accent */
  --color-accent:        #e6c98a;
  --color-accent-soft:   rgba(230,201,138,.16);
  --color-accent-line:   rgba(230,201,138,.32);
  --color-accent-glow:   rgba(230,201,138,.28);

  /* Semantic */
  --color-success: #7fb287;
  --color-warning: #d4a155;
  --color-error:   #c87265;
  --color-info:    #7a98b8;

  /* Typography */
  --font-family-base: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-display: clamp(48px, 7vw, 128px);
  --text-h1:      clamp(40px, 5vw, 80px);
  --text-h2:      clamp(32px, 3.5vw, 56px);
  --text-h3:      clamp(24px, 2.4vw, 40px);
  --text-h4:      clamp(20px, 1.8vw, 28px);
  --text-lead:    17px;
  --text-body:    15px;
  --text-small:   13px;
  --text-caption: 12px;
  --text-micro:   10px;

  --w-thin:     200;
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  --lh-tight:   1;
  --lh-snug:    1.1;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tighter: -.045em;
  --ls-tight:   -.035em;
  --ls-snug:    -.02em;
  --ls-normal:  0;
  --ls-wide:    .05em;
  --ls-wider:   .18em;
  --ls-widest:  .22em;

  /* Spacing (4px base) */
  --space-1:  4px;   --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;   --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;   --space-10: 40px; --space-12: 48px;
  --space-16: 64px;  --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-base: 12px;
  --radius-lg:   14px;
  --radius-pill: 99px;
  --radius-full: 50%;

  /* Shadow & Glow */
  --shadow-glow-faint:  0 0 24px rgba(230,201,138,.08);
  --shadow-glow-accent: 0 0 40px rgba(230,201,138,.18);
  --shadow-elev:        0 8px 32px rgba(0,0,0,.4);

  /* Blur */
  --blur-floater: blur(28px) saturate(140%);
  --blur-card:    blur(20px);

  /* Motion */
  --motion-instant: 100ms;
  --motion-fast:    250ms;
  --motion-base:    400ms;
  --motion-slow:    700ms;
  --motion-slower:  1000ms;
  --motion-page:    1200ms;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Layout */
  --floater-left-w:  19vw;
  --floater-right-w: 17vw;
  --floater-gap:     28px;
  --container-narrow: 720px;
  --container-base:   960px;
  --container-wide:   1200px;
  --section-pad-y:    96px;
  --section-pad-x:    64px;
  --header-h:         0px;
}

/* --- 2. BASE --- */
body {
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--color-ink-primary);
  background: var(--color-bg-base);
  letter-spacing: var(--ls-normal);
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink-primary);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-deepest); }
::-webkit-scrollbar-thumb { background: var(--color-ink-quaternary); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-tertiary); }

/* --- 3. CUSTOM CURSOR --- */
.cursor {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-ink-primary);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width var(--motion-fast) var(--ease-out),
              height var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
  transform: translate(-50%, -50%);
}
.cursor.hover {
  width: 42px; height: 42px;
  background: var(--color-accent);
  mix-blend-mode: normal;
  opacity: .5;
}

/* --- 4. LAYOUT: FLOATERS --- */
.floater {
  position: fixed;
  top: var(--space-8);
  bottom: var(--space-8);
  z-index: 50;
  background: rgba(14,13,11,.55);
  backdrop-filter: var(--blur-floater);
  -webkit-backdrop-filter: var(--blur-floater);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  transition: opacity var(--motion-base) var(--ease-out);
}

.floater-left {
  left: var(--space-8);
  width: var(--floater-left-w);
  min-width: 240px;
  max-width: 320px;
  justify-content: space-between;
}

.floater-right {
  right: var(--space-8);
  width: var(--floater-right-w);
  min-width: 220px;
  max-width: 300px;
  justify-content: space-between;
}

/* Floater Logo */
.floater-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.floater-logo .logo-tagline {
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  color: var(--color-accent);
  text-transform: uppercase;
}

/* Floater Nav */
.floater-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.floater-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-wider);
  color: var(--color-ink-tertiary);
  text-transform: uppercase;
  transition: color var(--motion-base) var(--ease-out);
  position: relative;
}
.floater-nav a::before {
  content: '';
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--motion-base) var(--ease-out);
  flex-shrink: 0;
}
.floater-nav a.active {
  color: var(--color-accent);
}
.floater-nav a.active::before {
  width: 24px;
}
.floater-nav a:hover {
  color: var(--color-ink-primary);
}
.floater-nav .nav-number {
  font-weight: var(--w-semibold);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-wider);
  min-width: 18px;
}

/* Floater Contact Info */
.floater-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-ink-tertiary);
  line-height: var(--lh-normal);
}
.floater-contact .label {
  font-size: var(--text-micro);
  letter-spacing: var(--ls-wider);
  color: var(--color-ink-tertiary);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* Floater Right - Solutions */
.floater-right-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.floater-right-header .label {
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  color: var(--color-accent);
  text-transform: uppercase;
}
.floater-right-header .title {
  font-size: var(--text-small);
  color: var(--color-ink-secondary);
  font-weight: var(--w-regular);
}

.floater-solutions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.floater-solutions a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-small);
  color: var(--color-ink-tertiary);
  border-bottom: 1px solid var(--color-line-faint);
  transition: color var(--motion-fast) var(--ease-out),
              padding-left var(--motion-base) var(--ease-out);
}
.floater-solutions a:hover {
  color: var(--color-accent);
  padding-left: var(--space-3);
}
.sol-link-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.sol-link-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.sol-link-desc {
  font-size: var(--text-micro);
  color: var(--color-ink-quaternary);
  line-height: 1.4;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--motion-base) var(--ease-out),
              opacity var(--motion-base) var(--ease-out);
}
.floater-solutions a:hover .sol-link-desc {
  max-height: 60px;
  opacity: 1;
}
.floater-solutions a .arrow {
  font-size: var(--text-caption);
  opacity: 0;
  margin-top: 2px;
  flex-shrink: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.floater-solutions a:hover .arrow { opacity: 1; }

.floater-solutions .badge {
  font-size: var(--text-micro);
  letter-spacing: var(--ls-wider);
  font-weight: var(--w-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.badge-live   { color: var(--color-success); background: rgba(127,178,135,.12); }
.badge-beta   { color: var(--color-warning); background: rgba(212,161,85,.12); }
.badge-mvp    { color: var(--color-info);    background: rgba(122,152,184,.12); }
.badge-rnd    { color: var(--color-accent);  background: var(--color-accent-soft); }

/* Floater Right Footer */
.floater-right-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.floater-right-footer .cta-small {
  font-size: var(--text-small);
  color: var(--color-ink-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--motion-fast) var(--ease-out);
}
.floater-right-footer .cta-small:hover {
  color: var(--color-accent);
}

/* --- 5. MAIN CONTENT --- */
.main-content {
  margin-left: calc(var(--floater-left-w) + var(--space-8) + var(--floater-gap));
  margin-right: calc(var(--floater-right-w) + var(--space-8) + var(--floater-gap));
  min-height: 100vh;
}

/* --- 6. SECTIONS --- */
.section {
  min-height: 100vh;
  padding: var(--section-pad-y) var(--section-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-10);
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Section Headlines */
.section-headline {
  font-size: var(--text-h2);
  font-weight: var(--w-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink-primary);
  margin-bottom: var(--space-12);
}
.section-headline .accent {
  color: var(--color-accent);
}

/* --- 7. HERO SECTION --- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(60,48,32,.5), transparent 50%),
    radial-gradient(circle at 78% 72%, rgba(28,40,58,.4), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(20,18,14,.6), transparent 70%),
    var(--color-bg-deepest);
  z-index: -2;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,7,7,.55) 0%, rgba(7,7,7,.40) 40%, rgba(7,7,7,.80) 100%);
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 1;
}
.hero-visual-headline {
  margin-bottom: var(--space-8);
}
.hero-headline-svg {
  width: 100%;
  max-width: 820px;
  height: auto;
}
.hero-lead {
  font-size: var(--text-lead);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-secondary);
  max-width: 580px;
  margin-bottom: var(--space-16);
}

.hero-stats {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  color: var(--color-ink-quaternary);
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-cue .line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--color-ink-quaternary), transparent);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --- 8. IDENTITY SECTION --- */
.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-top: var(--space-8);
}
.identity-text {
  font-size: var(--text-lead);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-secondary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-base);
  padding: var(--space-8);
  transition: border-color var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out);
}
.identity-text:hover {
  border-color: var(--color-accent-line);
  transform: translateY(-2px);
}

/* --- 9. SERVICES CARDS --- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.service-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-base);
  padding: var(--space-8);
  transition: transform var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent-line);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-glow-faint);
}
.service-card .card-number {
  font-size: var(--text-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider);
  color: var(--color-ink-tertiary);
  transition: color var(--motion-fast) var(--ease-out);
}
.service-card:hover .card-number { color: var(--color-accent); }

.service-card .card-title {
  font-size: var(--text-h4);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-snug);
  color: var(--color-ink-primary);
}
.service-card .card-title .sub {
  font-size: var(--text-small);
  color: var(--color-ink-secondary);
  font-weight: var(--w-regular);
  margin-left: var(--space-2);
}
.service-card .card-desc {
  font-size: var(--text-body);
  color: var(--color-ink-secondary);
  line-height: var(--lh-relaxed);
}
.service-card .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}
.service-card .tag {
  font-size: var(--text-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-secondary);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line-base);
  border-radius: var(--radius-sm);
  background: rgba(241,237,228,.03);
}

/* --- 10. SOLUTIONS ROWS --- */
.solutions-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line-soft);
  margin-top: var(--space-8);
}
.sol-row {
  display: grid;
  grid-template-columns: 60px 48px 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-line-soft);
  transition: padding-left var(--motion-base) var(--ease-out);
  text-decoration: none;
}
.sol-row:hover {
  padding-left: var(--space-4);
}
.sol-row .sol-num {
  font-size: var(--text-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider);
  color: var(--color-ink-tertiary);
  transition: color var(--motion-fast) var(--ease-out);
}
.sol-row:hover .sol-num { color: var(--color-accent); }

.sol-row .sol-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sol-row .sol-name {
  font-size: var(--text-h4);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-snug);
  color: var(--color-ink-primary);
  transition: color var(--motion-fast) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sol-row:hover .sol-name { color: var(--color-accent); }
.sol-row .sol-name-ko {
  font-size: var(--text-small);
  color: var(--color-ink-secondary);
  font-weight: var(--w-regular);
}
.sol-row .sol-desc {
  font-size: var(--text-body);
  color: var(--color-ink-secondary);
  line-height: var(--lh-relaxed);
  max-width: 480px;
}
.sol-row .sol-cta {
  font-size: var(--text-small);
  color: var(--color-ink-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--motion-fast) var(--ease-out),
              gap var(--motion-base) var(--ease-out);
  white-space: nowrap;
}
.sol-row:hover .sol-cta {
  color: var(--color-accent);
  gap: var(--space-4);
}

/* --- 11. WORKS TIMELINE --- */
.works-timeline {
  margin-top: var(--space-8);
  position: relative;
  padding-left: 2px;
}
.works-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-accent-line) 10%, var(--color-accent-line) 90%, transparent);
}
.work-item {
  display: grid;
  grid-template-columns: 80px 48px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6) 0;
  position: relative;
  transition: background var(--motion-base) var(--ease-out);
}
.work-item + .work-item {
  border-top: 1px solid var(--color-line-faint);
}
.work-item::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-bg-base);
  border: 2px solid var(--color-accent-line);
  transition: background var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
  z-index: 1;
}
.work-item:hover::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent-glow);
}
.work-date {
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  color: var(--color-ink-tertiary);
  letter-spacing: var(--ls-wider);
  padding-top: 2px;
  text-align: right;
  padding-right: var(--space-4);
}
.work-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(241,237,228,.06);
  border: 1px solid var(--color-line-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.work-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.6);
  opacity: .7;
  transition: filter var(--motion-base) var(--ease-out),
              opacity var(--motion-base) var(--ease-out);
}
.work-item:hover .work-logo img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}
.work-logo-text {
  font-size: 9px;
  font-weight: var(--w-bold);
  color: var(--color-ink-tertiary);
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.2;
}
.work-item:hover .work-logo-text {
  color: var(--color-accent);
}
.work-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.work-body-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.work-tag {
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-wider);
  color: var(--color-accent);
  padding: 1px 7px;
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-sm);
}
.work-title {
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  color: var(--color-ink-primary);
  line-height: var(--lh-snug);
}
.work-meta {
  font-size: var(--text-caption);
  color: var(--color-ink-secondary);
  line-height: var(--lh-normal);
}
.works-more-btn {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}
.works-more-btn button {
  font-size: var(--text-small);
  font-weight: var(--w-medium);
  color: var(--color-ink-tertiary);
  letter-spacing: var(--ls-wider);
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-base);
  background: var(--color-bg-surface);
  transition: color var(--motion-base), border-color var(--motion-base);
}
.works-more-btn button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent-line);
}
.work-item.hidden-work {
  display: none;
}
.work-item.hidden-work.show {
  display: grid;
}

/* --- 12. LAB (Patents) --- */
.lab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-top: var(--space-8);
}
.lab-group h3 {
  font-size: var(--text-small);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-wider);
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lab-group h3::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--color-accent);
}
.patent-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line-faint);
}
.patent-item .patent-id {
  font-size: var(--text-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider);
  color: var(--color-ink-tertiary);
  margin-bottom: var(--space-1);
  font-family: var(--font-family-mono);
}
.patent-item .patent-name {
  font-size: var(--text-body);
  color: var(--color-ink-primary);
  line-height: var(--lh-relaxed);
}

/* --- 13. CONTACT SECTION --- */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-8);
}
.contact-cta-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-large {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: var(--w-light);
  color: var(--color-ink-primary);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line-base);
  transition: gap var(--motion-base) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  cursor: pointer;
}
.cta-large:hover {
  gap: var(--space-6);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.contact-block .contact-label {
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  color: var(--color-ink-tertiary);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.contact-block .contact-value {
  font-size: var(--text-body);
  color: var(--color-ink-primary);
  line-height: var(--lh-relaxed);
}
.contact-block .contact-value a {
  color: var(--color-ink-primary);
  transition: color var(--motion-fast) var(--ease-out);
}
.contact-block .contact-value a:hover {
  color: var(--color-accent);
}

/* --- 13-B. CERTS ROW --- */
.certs-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.cert-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-ink-secondary);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line-faint);
  border-radius: var(--radius-pill);
  transition: border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.cert-item:hover {
  border-color: var(--color-accent-line);
  color: var(--color-accent);
}
.cert-icon {
  font-size: var(--text-caption);
  color: var(--color-success);
}

/* --- 13-C. CONTACT FORM --- */
.contact-form-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-wider);
  color: var(--color-ink-tertiary);
  text-transform: uppercase;
}
.form-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-line-base);
  color: var(--color-ink-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  padding: var(--space-3) 0;
  transition: border-color var(--motion-fast) var(--ease-out);
  outline: none;
  width: 100%;
}
.form-input::placeholder {
  color: var(--color-ink-quaternary);
}
.form-input:focus {
  border-color: var(--color-accent);
}
.form-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a766e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: var(--space-6);
}
.form-select option {
  background: var(--color-bg-surface);
  color: var(--color-ink-primary);
}
.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-normal);
  border: 1px solid var(--color-line-base);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-1);
}
.form-textarea:focus {
  border-color: var(--color-accent);
}
.form-check {
  flex-direction: row;
  align-items: center;
}
.form-check-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-ink-secondary);
  cursor: pointer;
}
.form-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.form-submit {
  align-self: flex-start;
  margin-top: var(--space-4);
}
.form-note {
  font-size: var(--text-caption);
  color: var(--color-ink-quaternary);
  margin-top: var(--space-1);
}
.form-success {
  padding: var(--space-5);
  background: rgba(127,178,135,.08);
  border: 1px solid rgba(127,178,135,.24);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--text-body);
  text-align: center;
  display: none;
}
.form-success.visible { display: block; }

.contact-info-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* --- 13-D. SPOTLIGHT --- */
.spotlight {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 300px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at center,
    rgba(230,201,138,.28),
    rgba(230,201,138,.12) 28%,
    rgba(230,201,138,.05) 48%,
    transparent 68%);
  opacity: .4;
  transition: transform 0.01ms linear;
}

/* --- 14. FOOTER --- */
.footer {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-line-faint);
  margin-top: var(--space-16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-caption);
  color: var(--color-ink-quaternary);
}
.footer-links {
  display: flex;
  gap: var(--space-6);
}
.footer-links a {
  transition: color var(--motion-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--color-ink-secondary); }

/* --- 14-D. SECTION BACKGROUND SVGs --- */
.section-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  /* individual SVG elements control their own opacity */
}
/* All section content sits above BG */
.section > *:not(.section-bg-svg):not(.hero-bg):not(.hero-veil):not(.hero-grid-svg):not(.hero-watermark) {
  position: relative;
  z-index: 1;
}

/* --- 14-E. HERO SVG & CONSTELLATION --- */
.hero-grid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

/* Hero watermark */
.hero-watermark {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
  font-size: clamp(120px, 18vw, 280px);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tighter);
  color: rgba(230,201,138,.03);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

/* --- 14-F. STAT RINGS --- */
.stat-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stat-ring-number {
  position: relative;
  z-index: 1;
  font-size: var(--text-h4);
  font-weight: var(--w-light);
  color: var(--color-ink-primary);
  letter-spacing: var(--ls-tight);
}
.hero-stat .label {
  font-size: var(--text-micro);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider);
  color: var(--color-ink-tertiary);
  text-transform: uppercase;
}

/* --- 14-G. IDENTITY VISUAL --- */
.identity-visual {
  margin-bottom: var(--space-10);
  overflow-x: auto;
}
.identity-diagram {
  width: 100%;
  max-width: 680px;
  height: auto;
}
.identity-icon-wrap {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.identity-icon-wrap svg {
  width: 100%;
  height: 100%;
}

/* --- 14-H. SERVICE CARD ICONS --- */
.card-icon-area {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(230,201,138,.03);
  border: 1px solid var(--color-line-faint);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  transition: background var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.service-card:hover .card-icon-area {
  background: rgba(230,201,138,.06);
  border-color: var(--color-accent-line);
  box-shadow: 0 0 20px rgba(230,201,138,.08);
}
.card-icon {
  width: 56px;
  height: 56px;
}

/* --- 14-I. SOLUTION ROW ICONS --- */
.sol-icon-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(230,201,138,.03);
  border: 1px solid var(--color-line-faint);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
}
.sol-row:hover .sol-icon-wrap {
  border-color: var(--color-accent-line);
  background: rgba(230,201,138,.06);
}
.sol-icon {
  width: 40px;
  height: 40px;
}

/* --- 14-J. (removed: old work card icons) --- */

/* --- 14-K. LAB VISUAL & CERT ICONS --- */
.lab-visual {
  margin-bottom: var(--space-8);
  overflow-x: auto;
}
.lab-tech-svg {
  width: 100%;
  max-width: 600px;
  height: auto;
}
.cert-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.patent-group-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: var(--space-1);
}

/* --- 14-L. CONTACT ICONS --- */
.contact-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.contact-block {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

/* --- 15. SCROLL ANIMATIONS --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--motion-slower) var(--ease-out),
              transform var(--motion-slower) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: .12s; }
.reveal.delay-2 { transition-delay: .24s; }
.reveal.delay-3 { transition-delay: .36s; }
.reveal.delay-4 { transition-delay: .48s; }
.reveal.delay-5 { transition-delay: .60s; }
.reveal.delay-6 { transition-delay: .72s; }
.reveal.delay-7 { transition-delay: .84s; }

/* --- 16. MOBILE HAMBURGER --- */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) var(--space-5);
  background: rgba(10,10,10,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  justify-content: space-between;
  align-items: center;
}
.mobile-logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.hamburger {
  width: 28px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--color-ink-primary);
  border-radius: 1px;
  transition: transform var(--motion-fast) var(--ease-out),
              opacity var(--motion-fast) var(--ease-out);
}
.hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(6,6,6,.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-8);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: var(--text-h3);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink-secondary);
  transition: color var(--motion-fast) var(--ease-out);
}
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--color-accent); }

/* --- 17. RESPONSIVE --- */

/* Laptop: 1024-1279 */
@media (max-width: 1279px) {
  .floater-left  { min-width: 220px; }
  .floater-right { min-width: 200px; }
  .section { padding: var(--space-16) var(--space-10); }
}

/* Tablet: 768-1023 */
@media (max-width: 1023px) {
  .floater { display: none; }
  .mobile-header { display: flex; }
  .main-content {
    margin-left: 0;
    margin-right: 0;
  }
  .section {
    padding: var(--space-24) var(--space-6);
    min-height: auto;
  }
  .hero { min-height: 100vh; padding: var(--space-24) var(--space-6); }
  .services-grid { grid-template-columns: 1fr; }
  .work-item { grid-template-columns: 64px 40px 1fr; }
  .identity-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .contact-content { grid-template-columns: 1fr; gap: var(--space-10); }
  .lab-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .sol-row { grid-template-columns: 40px 40px 1fr; }
  .sol-row .sol-cta { grid-column: 3; margin-top: var(--space-2); }
  .identity-diagram { max-width: 100%; }
  .lab-tech-svg { max-width: 100%; }
}

/* Mobile: <768 */
@media (max-width: 767px) {
  .section { padding: var(--space-16) var(--space-4); }
  .hero { padding: var(--space-20) var(--space-4); }
  .hero-headline-svg { max-width: 100%; }
  .hero-stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); justify-content: center; }
  .hero-watermark { display: none; }
  .work-item { grid-template-columns: 1fr; gap: var(--space-2); padding-left: var(--space-6); }
  .work-date { text-align: left; padding-right: 0; }
  .work-logo { display: none; }
  .works-timeline::before { left: 0; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .footer { flex-direction: column; gap: var(--space-4); text-align: center; }
  .sol-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .sol-row .sol-num { display: none; }
  .sol-icon-wrap { display: none; }
  .identity-visual { display: none; }
  .lab-visual { display: none; }
}

/* --- 18. REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor { display: none; }
  .scroll-cue { animation: none; }
  .section-bg-svg { display: none; }
  .hero-grid-svg { display: none; }
}