/* ============================================================
   nürltec — bridging the gap between data and reality
   Aesthetic: scientific instrument × editorial restraint.
   Dark "laboratory" ground, bone paper text, two biosignal
   accents: phosphor (data) + coral (reality/body).
   ============================================================ */

:root{
  --ink:        #0b0e0d;   /* near-black lab ground */
  --ink-2:      #111614;   /* raised panel */
  --ink-3:      #182019;   /* hairline-lit panel */
  --line:       rgba(244,239,228,.10);
  --line-2:     rgba(244,239,228,.16);

  --paper:      #f4efe4;   /* bone / primary text */
  --paper-dim:  #b8b6ac;   /* secondary text */
  --paper-mute: #7e8079;   /* tertiary / labels */

  --phosphor:   #7dffd6;   /* DATA — oscilloscope green-cyan */
  --phosphor-d: #3fd4ab;
  --coral:      #ff7a5c;   /* REALITY / body — warm pulse */
  --coral-d:    #f2603f;

  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 64px);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Spline Sans", system-ui, sans-serif;
  --mono:  "Spline Sans Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden }

body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--paper);
  line-height:1.6;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--phosphor); color:var(--ink) }
a{ color:inherit; text-decoration:none }
em{ font-style:italic; color:var(--paper) }

/* ── ambient signal field ─────────────────────────────────── */
.field{
  position:fixed; inset:-10% -10% 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(125,255,214,.07), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(255,122,92,.05), transparent 60%),
    linear-gradient(transparent 0 31px, var(--line) 31px 32px),
    linear-gradient(90deg, transparent 0 31px, var(--line) 31px 32px);
  background-size:auto, auto, 32px 32px, 32px 32px;
  mask:linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
  opacity:.6;
}

/* ── layout helpers ───────────────────────────────────────── */
main{ position:relative; z-index:1 }
section{ padding-inline:var(--pad) }
.section-head{ max-width:var(--maxw); margin:0 auto }

.tag{
  display:inline-block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--phosphor-d);
  padding-bottom:.9rem;
}
.tag.light{ color:var(--coral) }

h2{
  font-family:var(--serif); font-weight:380; line-height:1.04;
  font-size:clamp(2rem, 5.2vw, 4rem); letter-spacing:-.02em;
}
.section-sub{
  max-width:60ch; margin-top:1.4rem; color:var(--paper-dim);
  font-size:clamp(1rem,1.6vw,1.18rem);
}

.grad{
  background:linear-gradient(100deg,var(--phosphor),var(--phosphor-d));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.reality{ color:var(--coral); font-style:italic }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.86rem; letter-spacing:.02em;
  padding:.92rem 1.4rem; border-radius:2px; border:1px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn-primary{ background:var(--phosphor); color:var(--ink); font-weight:600 }
.btn-primary:hover{ background:var(--paper); transform:translateY(-2px) }
.btn-ghost{ color:var(--paper); border-color:var(--line-2) }
.btn-ghost:hover{ border-color:var(--phosphor); color:var(--phosphor); transform:translateY(-2px) }
.btn-lg{ padding:1.15rem 2rem; font-size:1.05rem }

/* ── wordmark + the signature umlaut ──────────────────────── */
.wordmark{
  font-family:var(--serif); font-weight:420; font-size:1.5rem;
  letter-spacing:-.01em; line-height:1; position:relative; display:inline-flex;
}
.wordmark .umlaut{
  position:relative; display:inline-block; width:.62em; height:1em;
}
.wordmark .umlaut i{
  position:absolute; top:.14em; width:.17em; height:.17em; border-radius:50%;
  transition:transform .4s var(--ease);
}
.wordmark .umlaut i:first-child{ left:.06em; background:var(--phosphor) }
.wordmark .umlaut i:last-child{ left:.34em; background:var(--coral) }
.wordmark:hover .umlaut i:first-child{ transform:translateY(-.12em) }
.wordmark:hover .umlaut i:last-child{ transform:translateY(.12em) }
.wordmark-sm{ font-size:1.35rem }

/* ── nav ──────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled{
  background:rgba(11,14,13,.78); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line); padding-block:.8rem;
}
.nav-links{ display:flex; align-items:center; gap:2rem }
.nav-links a{
  font-family:var(--mono); font-size:.82rem; color:var(--paper-dim);
  transition:color .25s; position:relative;
}
.nav-links a:not(.nav-cta):hover{ color:var(--paper) }
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--phosphor); transition:width .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{ width:100% }
.nav-cta{
  color:var(--ink)!important; background:var(--paper); padding:.5rem 1rem;
  border-radius:2px; font-weight:600; transition:background .3s,transform .3s;
}
.nav-cta:hover{ background:var(--phosphor); transform:translateY(-1px) }

/* ── HERO ─────────────────────────────────────────────────── */
.hero{ padding-top:clamp(3rem,7vw,6rem); padding-bottom:0 }
.hero-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-mute);
}
.hero h1{
  font-family:var(--serif); font-weight:340; font-size:clamp(2.7rem,6.6vw,5.2rem);
  line-height:1.0; letter-spacing:-.028em; margin:1.1rem 0 1.6rem;
}
.lede{
  max-width:46ch; color:var(--paper-dim); font-size:clamp(1.05rem,1.7vw,1.28rem);
  line-height:1.62;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem }

.hero-stats{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line);
  max-width:46ch;
}
.hero-stats b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.9rem; color:var(--phosphor); line-height:1;
}
.hero-stats span{ font-size:.82rem; color:var(--paper-mute); margin-top:.5rem; display:block }

/* ── oscilloscope panel ───────────────────────────────────── */
.scope{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-2); border-radius:6px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(244,239,228,.05);
}
.scope-head{
  display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  color:var(--paper-dim); border-bottom:1px solid var(--line);
  text-transform:uppercase;
}
.scope-id{ margin-left:auto; color:var(--paper-mute); text-transform:none; letter-spacing:0 }
.rec{ width:8px; height:8px; border-radius:50%; background:var(--coral); animation:pulse 1.6s var(--ease) infinite }
@keyframes pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(255,122,92,.5)} 50%{opacity:.5; box-shadow:0 0 0 6px rgba(255,122,92,0)} }

.scope-svg{ display:block; width:100%; height:280px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(125,255,214,.05), transparent 70%);
}
.grid-lines line{ stroke:rgba(244,239,228,.06); stroke-width:1 }
.wave{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px currentColor);
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.4s var(--ease) forwards, drift 9s linear infinite 2.4s;
}
.wave-eeg{ stroke:var(--phosphor); color:var(--phosphor); animation-delay:.2s, 2.6s }
.wave-eye{ stroke:#e9c46a; color:#e9c46a; animation-delay:.5s, 2.9s }
.wave-gsr{ stroke:var(--coral); color:var(--coral); animation-delay:.8s, 3.2s }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes drift{ 0%{transform:translateX(0)} 100%{transform:translateX(-6px)} }

.scope-legend{
  display:flex; flex-wrap:wrap; gap:1.2rem; padding:.9rem 1rem;
  border-top:1px solid var(--line); font-family:var(--mono); font-size:.7rem;
  color:var(--paper-dim);
}
.scope-legend span{ display:flex; align-items:center; gap:.45rem }
.scope-legend i{ width:14px; height:2px; border-radius:2px }
.k-eeg{ background:var(--phosphor) } .k-eye{ background:#e9c46a } .k-gsr{ background:var(--coral) }

/* ── marquee ──────────────────────────────────────────────── */
.marquee{
  margin-top:clamp(3rem,7vw,6rem); border-block:1px solid var(--line);
  overflow:hidden; padding-block:1.1rem; position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
}
.marquee-track{
  display:flex; gap:2.5rem; white-space:nowrap; width:max-content;
  animation:scroll 32s linear infinite;
}
.marquee span{ font-family:var(--mono); font-size:.92rem; letter-spacing:.06em; color:var(--paper-mute) }
.marquee span:nth-child(even){ color:var(--phosphor-d) }
@keyframes scroll{ to{ transform:translateX(-50%) } }

/* ── PREMISE ──────────────────────────────────────────────── */
.premise{ padding-block:clamp(5rem,11vw,9rem) }
.premise h2 br{ display:inline }
.premise-grid{ max-width:var(--maxw); margin:2.6rem auto 0 }
.premise-lead{
  max-width:62ch; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.5;
  font-family:var(--serif); font-weight:330; color:var(--paper);
  margin-bottom:3.5rem;
}
.contrast{
  display:grid; grid-template-columns:1fr auto 1fr; gap:1.6rem; align-items:stretch;
}
.card{
  border:1px solid var(--line-2); border-radius:6px; padding:2rem;
  background:linear-gradient(180deg,var(--ink-2),var(--ink)); position:relative;
}
.card-k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-mute); display:block; margin-bottom:1rem }
.card p{ font-family:var(--serif); font-size:1.25rem; line-height:1.4; margin-bottom:1.3rem }
.card ul{ list-style:none; display:grid; gap:.55rem }
.card li{ font-size:.92rem; color:var(--paper-dim); padding-left:1.2rem; position:relative }
.card li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50% }
.card-say li::before{ background:var(--paper-mute) }
.card-do li::before{ background:var(--phosphor) }
.card-say{ opacity:.8 }
.card-say p{ color:var(--paper-dim) }
.card-do{ border-color:rgba(125,255,214,.32);
  box-shadow:0 0 0 1px rgba(125,255,214,.06), 0 30px 60px -40px rgba(125,255,214,.25) }
.verdict{ display:inline-block; margin-top:1.5rem; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.1em; padding:.35rem .7rem; border-radius:2px; text-transform:uppercase }
.verdict-soft{ background:rgba(244,239,228,.06); color:var(--paper-mute) }
.verdict-hard{ background:var(--phosphor); color:var(--ink); font-weight:600 }
.card-vs{ display:flex; align-items:center; justify-content:center }
.card-vs span{ font-family:var(--serif); font-style:italic; color:var(--paper-mute); font-size:1.4rem }

/* ── WHAT WE MEASURE ──────────────────────────────────────── */
.measure{ padding-block:clamp(4rem,9vw,7rem) }
.measure-grid{
  max-width:var(--maxw); margin:3.4rem auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.m-card{
  border:1px solid var(--line); border-radius:6px; padding:2rem 1.9rem 1.9rem;
  background:var(--ink-2); transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  position:relative; overflow:hidden;
}
.m-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 200px at 80% -20%, rgba(125,255,214,.10), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.m-card:hover{ border-color:var(--line-2); transform:translateY(-4px); background:var(--ink-3) }
.m-card:hover::before{ opacity:1 }
.m-icon{ width:72px; height:46px; margin-bottom:1.4rem }
.m-icon svg{ width:100%; height:100%; stroke:var(--phosphor); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(125,255,214,.4)) }
.m-icon svg .fill{ fill:var(--phosphor); stroke:none }
.m-icon svg circle{ stroke:var(--phosphor) }
.m-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--paper-mute) }
.m-card h3{ font-family:var(--serif); font-weight:420; font-size:1.6rem; margin:.35rem 0 .9rem; letter-spacing:-.01em }
.m-card p{ color:var(--paper-dim); font-size:.98rem; line-height:1.6 }
.m-out{ display:block; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.78rem; color:var(--phosphor-d) }

/* ── RESEARCH / PROCESS ───────────────────────────────────── */
.research{ padding-block:clamp(4rem,9vw,7rem) }
.steps{
  max-width:var(--maxw); margin:3.4rem auto 0; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.step{ padding:2rem 1.6rem; border-right:1px solid var(--line); position:relative;
  transition:background .35s var(--ease) }
.step:last-child{ border-right:none }
.step:hover{ background:var(--ink-2) }
.step-n{ font-family:var(--mono); font-size:.8rem; color:var(--coral); letter-spacing:.1em }
.step h3{ font-family:var(--serif); font-weight:420; font-size:1.3rem; margin:.7rem 0 .6rem }
.step p{ font-size:.9rem; color:var(--paper-dim); line-height:1.55 }

.apply{ max-width:var(--maxw); margin:3.4rem auto 0 }
.apply-label{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-mute); display:block; margin-bottom:1.2rem }
.apply-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem }
.apply-card{ padding:1.7rem; border:1px solid var(--line); border-radius:6px;
  border-left:2px solid var(--coral); background:var(--ink-2) }
.apply-card h4{ font-family:var(--sans); font-weight:600; font-size:1.05rem; margin-bottom:.5rem }
.apply-card p{ font-size:.92rem; color:var(--paper-dim) }

/* ── LAB / TEAM ───────────────────────────────────────────── */
.lab{ padding-block:clamp(5rem,11vw,9rem);
  background:linear-gradient(180deg, transparent, rgba(125,255,214,.025) 40%, transparent) }
.lab-inner{ max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start }
.lab-copy h2{ margin:.2rem 0 1.5rem }
.lab-copy p{ color:var(--paper-dim); max-width:48ch; margin-bottom:1.2rem; font-size:1.05rem }
.lab-copy strong{ color:var(--paper); font-weight:600 }
.lab-badges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem }
.badge{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono);
  font-size:.78rem; color:var(--paper-dim); border:1px solid var(--line-2);
  padding:.5rem .9rem; border-radius:2px }
.badge i{ width:7px; height:7px; border-radius:50%; background:var(--phosphor);
  box-shadow:0 0 8px rgba(125,255,214,.6) }

.team{ display:grid; gap:1.2rem }
.t-card{ border:1px solid var(--line); border-radius:6px; padding:1.8rem;
  background:var(--ink-2); transition:border-color .35s var(--ease), transform .35s var(--ease);
  position:relative; overflow:hidden }
.t-card::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--phosphor),var(--coral)); transform:scaleY(0);
  transform-origin:top; transition:transform .4s var(--ease) }
.t-card:hover{ border-color:var(--line-2); transform:translateX(4px) }
.t-card:hover::after{ transform:scaleY(1) }
.t-mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--phosphor-d) }
.t-card h3{ font-family:var(--serif); font-weight:440; font-size:1.5rem; margin:.45rem 0 .7rem; letter-spacing:-.01em }
.t-card p{ font-size:.94rem; color:var(--paper-dim); line-height:1.55 }

/* ── CONTACT ──────────────────────────────────────────────── */
.contact{ padding-block:clamp(6rem,13vw,11rem); text-align:center; position:relative }
.contact::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 360px at 50% 0%, rgba(255,122,92,.10), transparent 70%) }
.contact-inner{ max-width:760px; margin:0 auto; position:relative }
.contact h2{ font-size:clamp(2.3rem,6vw,4.6rem); margin:.4rem 0 1.4rem }
.contact-inner > p{ color:var(--paper-dim); font-size:clamp(1.05rem,1.8vw,1.3rem);
  max-width:52ch; margin:0 auto 2.6rem }
.contact-fine{ margin-top:1.6rem!important; font-family:var(--mono); font-size:.78rem;
  color:var(--paper-mute); letter-spacing:.04em }

/* ── FOOTER ───────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) var(--pad) 2rem }
.foot-inner{ max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.4rem }
.foot-tag{ font-family:var(--serif); font-style:italic; color:var(--paper-mute); font-size:1.05rem }
.foot-mail{ font-family:var(--mono); font-size:.9rem; color:var(--phosphor-d) }
.foot-mail:hover{ color:var(--phosphor) }
.foot-base{ max-width:var(--maxw); margin:2.4rem auto 0; padding-top:1.6rem;
  border-top:1px solid var(--line); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; font-family:var(--mono); font-size:.74rem; color:var(--paper-mute) }

/* ── REVEAL ANIMATIONS ────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); animation:rise .9s var(--ease) forwards;
  animation-delay:calc(var(--d,0) * .12s + .15s) }
@keyframes rise{ to{ opacity:1; transform:none } }

.reveal-up{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal-up.in{ opacity:1; transform:none }
.contrast .reveal-up:nth-child(3){ transition-delay:.12s }
.measure-grid .reveal-up:nth-child(2){ transition-delay:.08s }
.measure-grid .reveal-up:nth-child(3){ transition-delay:.16s }
.steps .reveal-up:nth-child(2){ transition-delay:.07s }
.steps .reveal-up:nth-child(3){ transition-delay:.14s }
.steps .reveal-up:nth-child(4){ transition-delay:.21s }
.team .reveal-up:nth-child(2){ transition-delay:.1s }
.team .reveal-up:nth-child(3){ transition-delay:.2s }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:3rem }
  .scope{ max-width:520px }
  .lab-inner{ grid-template-columns:1fr; gap:3rem }
  .steps{ grid-template-columns:1fr 1fr }
  .step:nth-child(2){ border-right:none }
  .step:nth-child(1),.step:nth-child(2){ border-bottom:1px solid var(--line) }
}
@media (max-width:820px){
  .nav-links a:not(.nav-cta){ display:none }
  .measure-grid{ grid-template-columns:1fr }
  .apply-row{ grid-template-columns:1fr }
  .contrast{ grid-template-columns:1fr }
  .card-vs{ padding:.5rem 0 }
  .hero-stats{ gap:1rem }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr }
  .step{ border-right:none!important; border-bottom:1px solid var(--line) }
  .step:last-child{ border-bottom:none }
  .hero-stats{ grid-template-columns:1fr; max-width:none }
  .hero-stats li{ display:flex; align-items:baseline; gap:1rem }
  .hero-stats b{ font-size:1.5rem }
  .foot-base{ flex-direction:column }
}

/* ── MOTION SAFETY ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important }
  .reveal,.reveal-up{ opacity:1!important; transform:none!important }
  .wave{ stroke-dashoffset:0!important }
}