/* Cnuic Technologies — shared styles */
:root {
  --ink: #120f1b;          /* page background */
  --ink-2: #1a1526;        /* alternate section */
  --surface: #221c31;      /* cards */
  --surface-2: #2c2440;    /* card hover / inputs */
  --line: rgba(225, 221, 242, 0.10);
  --line-strong: rgba(225, 221, 242, 0.22);
  --text: #eeebf7;
  --text-muted: #a9a2c0;
  --text-faint: #7c7494;
  --lavender: #b9aee3;
  --violet: #8a6cff;
  --glow: rgba(138, 108, 255, 0.35);
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1200px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--lavender); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .wrap { padding: 0 48px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lavender);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; opacity: 0.8; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(18, 15, 27, 0.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 38px; width: auto; }
.brand span { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; color: #fff; line-height: 1.1; }
.brand small { display: block; font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.nav { display: flex; gap: 28px; }
.nav a {
  text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--lavender); }
@media (max-width: 640px) {
  .brand span { display: none; }
  .brand img { height: 32px; }
  .nav { gap: 16px; }
  .nav a { font-size: 11px; letter-spacing: 0.12em; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 14px 26px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: #fff; background: transparent;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { border-color: var(--lavender); transform: translateY(-1px); }
.btn-primary { background: var(--lavender); color: var(--ink); border-color: var(--lavender); }
.btn-primary:hover { background: #d3cbf3; box-shadow: 0 0 28px var(--glow); }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--ink); }
.hero-art {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  background: url("../images/hero-sample.jpg") 42% 52% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
  filter: saturate(0.9) brightness(0.72) contrast(1.05);
}
.hero-tint {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(18,15,27,0.92) 32%, rgba(18,15,27,0.35) 62%, rgba(40,26,80,0.35) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 28%);
}
.hero .wrap { position: relative; min-height: 580px; display: flex; flex-direction: column; justify-content: center; padding-top: 88px; padding-bottom: 88px; }
.hero h1 { font-size: clamp(46px, 7.2vw, 100px); max-width: 11ch; color: #fff; line-height: 1.08; }
.hero h1 em { font-style: italic; color: var(--lavender); }
.hero .sub { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px); color: var(--text-muted); margin-top: 24px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 640px) { .hero .sub { white-space: normal; } }
@media (max-width: 900px) {
  /* Mobile: photo sits above the headline so the sample stays visible */
  .hero-art {
    position: relative; width: 100%; height: 320px;
    background-size: 170% auto; background-position: 43% 56%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    filter: saturate(0.95) brightness(0.85);
  }
  .hero-tint { display: none; }
  .hero .wrap { min-height: 0; margin-top: -24px; padding-top: 0; padding-bottom: 56px; }
}

/* Sections */
section.block { padding: 72px 0; border-bottom: 1px solid var(--line); }
section.block.alt { background: var(--ink-2); }
@media (max-width: 768px) { section.block { padding: 60px 0; } }
.section-head { max-width: 1104px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 46px); margin-top: 18px; color: #fff; max-width: 30ch; }
.section-head p { margin-top: 26px; font-size: 19px; color: var(--text-muted); max-width: 820px; }

/* Problem graphics */
.problems { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 -36px; }
.problem { padding: 0 36px; border-left: 1px solid var(--line); }
.problem:first-child { border-left: 0; }
.problem .viz { width: 100%; height: auto; display: block; margin-bottom: 22px; overflow: visible; }
.problem h3 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.problem p { color: var(--text-muted); font-size: 16px; }
.viz .vl { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; fill: var(--text-faint); text-transform: uppercase; }
.viz .flow { stroke-dasharray: 14 8; animation: flow 1.6s linear infinite; }
.viz .pulse { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flow { to { stroke-dashoffset: -44; } }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .viz .flow, .viz .pulse { animation: none; } }
.bridge { margin: 64px auto; max-width: 30ch; text-wrap: balance; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; color: #fff; }
@media (max-width: 900px) {
  .problems { grid-template-columns: 1fr; gap: 48px; margin: 0; }
  .problem { padding: 0; border-left: 0; }
}

/* Flat feature columns: no boxes, a thin rule on top */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; gap: 40px; } }
.feature { border-top: 1px solid var(--line-strong); padding-top: 28px; position: relative; }
.feature::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 1px; background: var(--lavender); }
.feature .k { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lavender); font-weight: 600; }
.feature h3 { font-size: 24px; margin: 14px 0 12px; color: #fff; }
.feature p { color: var(--text-muted); font-size: 16px; }


/* Mission: text left, photo on the right with a diagonal cut */
.mission { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.mission-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
  background: url("../images/lab-alignment.jpg") 34% 32% / cover no-repeat;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  filter: saturate(0.85) brightness(0.88);
}
.mission-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,26,80,0.35), rgba(40,26,80,0.1)); }
.mission .wrap { position: relative; padding-top: 112px; padding-bottom: 112px; }
.mission p { text-wrap: balance; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; color: #fff; max-width: 46%; }
.mission p + p { margin-top: 18px; color: var(--lavender); font-style: italic; }
.mission .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
@media (max-width: 900px) {
  .mission-photo { position: relative; width: 100%; height: 300px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%); }
  .mission .wrap { padding-top: 56px; padding-bottom: 88px; }
  .mission p { max-width: none; }
}

/* Backers */
.backers { padding: 52px 0 64px; border-bottom: 1px solid var(--line); }
.backers .eyebrow { margin-bottom: 36px; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 36px 48px; }
.logo-row img { height: var(--h, 32px); width: auto; opacity: 0.7; transition: opacity .25s; }
.logo-row img:hover { opacity: 1; }
@media (max-width: 900px) { .logo-row { justify-content: center; gap: 36px 44px; } }

/* Page intro (careers / contact) */
.intro { position: relative; overflow: hidden; padding: 80px 0 64px; border-bottom: 1px solid var(--line); }
.intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 80% at 85% 0%, rgba(138,108,255,0.16), transparent 70%); pointer-events: none; }
.intro .wrap { position: relative; }
.intro h1 { font-size: clamp(38px, 5.4vw, 72px); margin: 22px 0 26px; max-width: 16ch; color: #fff; }
.intro h1 em { font-style: italic; color: var(--lavender); }
.intro p.lede { font-size: 20px; color: var(--text-muted); max-width: 660px; }

/* Values: flat list with numbers and rules */
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 72px; }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.value { display: grid; grid-template-columns: 56px 1fr; padding: 28px 0; border-top: 1px solid var(--line-strong); }
.value .num { font-family: var(--serif); color: var(--lavender); font-size: 15px; padding-top: 8px; }
.value h3 { font-size: 26px; margin-bottom: 10px; color: #fff; }
.value p { color: var(--text-muted); }

.traits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.traits span { border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--text); }

.roles-more { margin-top: 28px; font-size: 15px; color: var(--text-muted); }
.roles-more a { color: var(--lavender); text-underline-offset: 4px; }

/* Team photo band with CTA */
.team { position: relative; overflow: hidden; min-height: 500px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.team-photo { position: absolute; inset: 0; background: url("../images/team-cleanroom.jpg") center 30% / cover no-repeat; filter: grayscale(0.25) brightness(0.8); }
.team-tint { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(18,15,27,0.25) 30%, rgba(18,15,27,0.35) 55%, rgba(18,15,27,0.94) 88%, var(--ink) 100%), linear-gradient(90deg, rgba(40,26,80,0.35), rgba(40,26,80,0.1)); }
.team .wrap { position: relative; padding-top: 160px; padding-bottom: 64px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.team h2 { font-size: clamp(30px, 3.6vw, 48px); color: #fff; }
.team p { color: var(--text); margin-top: 12px; max-width: 520px; font-size: 18px; }

/* Forms */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; }
@media (max-width: 640px) { .form-card { padding: 28px 22px; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field label { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lavender); }
.field input, .field textarea, .field select {
  width: 100%; background: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 14px 16px; color: #fff; font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(185,174,227,0.15); }
input:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--ink) inset !important; -webkit-text-fill-color: #fff !important; }
.hidden { display: none !important; }

.contact-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 40px; } }
.contact-aside h3 { font-size: 15px; font-family: var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--lavender); margin-bottom: 10px; }
.contact-aside p { color: var(--text-muted); margin-bottom: 30px; }
.contact-aside a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* Virtual masks animation */
.vm-section { position: relative; overflow: hidden; padding: 40px 0 48px; border-bottom: 1px solid var(--line); text-align: center; }
.vm-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 50% at 50% 55%, rgba(138,108,255,0.16), transparent 70%); pointer-events: none; }
.vm-section .wrap { position: relative; }
.vm-lead { margin: 0 auto 48px; max-width: 30ch; text-wrap: balance; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; color: #fff; }
.vm { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; overflow: visible; }
.vm .vm-label line { stroke: rgba(225,221,242,0.4); }
.vm .vm-label text { font-family: var(--sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-muted); }
.vm .vm-src { animation: vm-src 7s ease-in-out infinite; animation-delay: var(--d); }
.vm .vm-cone { animation: vm-cone 7s ease-in-out infinite; animation-delay: var(--d); }
.vm .vm-ray { stroke-dasharray: 1; animation: vm-ray 7s ease-in-out infinite; animation-delay: var(--d); }
.vm .vm-photon { stroke-dasharray: .05 .95; animation: vm-photon 1.1s linear infinite, vm-hold 7s ease-in-out infinite; animation-delay: var(--d); }
.vm .vm-vol { animation: vm-vol 7s ease-in-out infinite; }
.vm .vm-icon { transform-box: fill-box; transform-origin: 50% 100%; animation: vm-icon 7s ease-in-out infinite; }
@keyframes vm-src { 0% { opacity: .25; } 8%, 86% { opacity: 1; } 97%, 100% { opacity: .25; } }
@keyframes vm-cone { 0%, 10% { opacity: 0; } 32%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes vm-ray { 0%, 8% { stroke-dashoffset: 1; opacity: 1; } 30%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vm-photon { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vm-hold { 0%, 30% { opacity: 0; } 34%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes vm-vol { 0%, 30% { opacity: 0; } 42%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes vm-icon { 0%, 36% { opacity: 0; transform: scaleY(.2); } 56%, 86% { opacity: 1; transform: scaleY(1); } 96%, 100% { opacity: 0; transform: scaleY(1); } }
/* Scroll-in reveal (only when the script has marked the section ready) */
.vm-ready::before, .vm-ready .vm-lead, .vm-ready .vm { opacity: 0; transition: opacity 1.1s ease, transform 1.1s ease; }
.vm-ready .vm-lead, .vm-ready .vm { transform: translateY(28px); }
.vm-ready .vm-arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .5s; }
.vm-ready:not(.is-playing) .vm * { animation-play-state: paused; }
.vm-ready.is-visible::before, .vm-ready.is-visible .vm-lead, .vm-ready.is-visible .vm { opacity: 1; transform: none; }
.vm-ready.is-visible::before { transition-delay: .5s; }
.vm-ready.is-visible .vm { transition-delay: .4s; }
.vm-ready.is-visible .vm-arc { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .vm .vm-src, .vm .vm-cone, .vm .vm-ray, .vm .vm-vol, .vm .vm-icon { animation: none; }
  .vm .vm-photon { display: none; }
}
@media (max-width: 768px) { .vm-section { padding: 32px 0 40px; } .vm-lead { margin-bottom: 32px; } .vm .vm-label text { font-size: 16px; } }

/* Footer */
.site-footer { margin-top: auto; padding: 40px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-faint); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.site-footer .tag { font-family: var(--serif); font-style: italic; color: var(--text-muted); }
.intro-photo .intro-art {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  background: url("../images/careers-bench.jpg") 60% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 30%, #000 60%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 30%, #000 60%);
  filter: saturate(0.9) brightness(0.7);
}
.intro-photo .intro-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,15,27,0.5), rgba(40,26,80,0.25)); }
.intro-photo h1 { max-width: 680px; }
.intro-photo p.lede { max-width: 560px; }
.intro-photo .traits { max-width: 600px; }
@media (max-width: 900px) {
  .intro-photo { padding-top: 0; }
  .intro-photo .intro-art {
    position: relative; width: 100%; height: 280px; background-position: 65% 45%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    filter: saturate(0.95) brightness(0.85);
  }
  .intro-photo .wrap { margin-top: -16px; }
}