/* =========================================================
   LYKEN LABS — Sound Thinking
   Sober, modern, deep-tech aesthetic
   ========================================================= */

:root {
  /* Surface */
  --bg-0: #050811;
  --bg-1: #080d1a;
  --bg-2: #0b1324;
  --bg-3: #101b30;
  --surface: rgba(255, 255, 255, 0.025);
  --surface-strong: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  /* Card border — boss round 3: rounded cards barely separated from the
     near-black background. Slightly brighter than --border-strong so the
     panel silhouettes read clearly without going full chrome. */
  --border-card: rgba(255, 255, 255, 0.22);

  /* Brand */
  --brand-deep: #0b1e4d;
  --brand: #1f4cc4;
  --brand-soft: #4d7dff;
  --accent: #19e3c9;        /* teal */
  --accent-2: #36c8ff;      /* cyan */
  --accent-3: #7ef2c1;      /* mint */
  --accent-glow: rgba(25, 227, 201, 0.4);

  /* Text */
  --text: #e9eef7;
  --text-soft: #aab4c8;
  --text-dim: #6b7790;
  --text-faint: rgba(255, 255, 255, 0.36);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Every section gets a scroll-margin-top equal to the fixed-nav height so
     anchor clicks land with the title cleanly below the bar, not behind it. */
  scroll-padding-top: 100px;
}
section[id] { scroll-margin-top: 100px; }

body {
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }

::selection { background: var(--accent); color: #001417; }

/* ========================================================= */
/* BACKGROUND FIELD                                          */
/* ========================================================= */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31, 76, 196, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(25, 227, 201, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  opacity: 0.5;
}
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.45;
  pointer-events: none;
  animation: glow-float 18s ease-in-out infinite alternate;
}
.bg-glow--1 {
  width: 600px;
  height: 600px;
  top: 5%;
  left: -10%;
  background: radial-gradient(circle, rgba(31, 76, 196, 0.6), transparent 60%);
}
.bg-glow--2 {
  width: 500px;
  height: 500px;
  bottom: 10%;
  right: -10%;
  background: radial-gradient(circle, rgba(25, 227, 201, 0.35), transparent 60%);
  animation-delay: -8s;
}
@keyframes glow-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.1); }
}

/* ========================================================= */
/* NAV                                                       */
/* ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  gap: 32px;
  backdrop-filter: blur(0px);
  transition: backdrop-filter .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  backdrop-filter: blur(20px) saturate(140%);
  background: rgba(5, 8, 17, 0.75);
  border-bottom-color: var(--border);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
/* Logo — pre-rendered PNG. The SVG content sits slightly above the geometric
   centre of its viewBox, so we nudge the IMG element down a few pixels for
   true optical alignment with the CTA pill on the same row. */
.nav__logo {
  width: 72px;
  height: 72px;
  display: block;
  transform: translateY(4px);
  filter: drop-shadow(0 0 12px rgba(54, 200, 255, 0.45));
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.nav__brand:hover .nav__logo {
  transform: translateY(4px) scale(1.05);
  filter:
    drop-shadow(0 0 18px rgba(25, 227, 201, 0.7))
    sepia(1) saturate(8) hue-rotate(118deg) brightness(1.05);
}

/* Boss round-3: the nav links must read as truly centred under/across the
   page width — not just centred between the side elements (whose unequal
   widths shift the visual centre). Position them absolutely on the nav's
   centre line and let the side elements flow naturally on either side. */
.nav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-soft);
}
.nav__links a { position: relative; white-space: nowrap; transition: color .25s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .35s var(--ease);
}
.nav__links a:hover::after { width: 100%; }

.nav__cta { font-size: 13px; }

.nav__burger {
  display: none;
  position: relative;
  z-index: 3;
  width: 32px; height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav__burger span {
  height: 1px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
/* Open state: morph the burger into an X. It sits above the drawer (z-index
   above), so tapping it closes the menu without having to pick a section. */
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Right-hand nav cluster: language switch + CTA + burger. Grouping them keeps
   the absolutely-centred .nav__links truly centred regardless of this width. */
.nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Compact EN / FR / DE segmented control */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.02);
}
.lang-switch__btn {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 100px;
  color: var(--text-dim);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.lang-switch__btn:hover { color: var(--text); }
.lang-switch__btn.is-active {
  color: var(--accent);
  background: rgba(25, 227, 201, 0.12);
}

/* The nav links are absolutely centred, so on a narrow viewport (small screens
   around 900-1040px, or 150% browser zoom) they collide with the CTA pill. Drop
   the CTA below 1080px; the contact section and the hero CTA still cover it.
   Above 1080px the links and the CTA clear each other comfortably. */
@media (max-width: 1080px) {
  .nav .nav__cta { display: none; }
}

@media (max-width: 880px) {
  .nav { padding: 14px 20px; }
  /* Mobile: the logo mark sits high inside its transparent PNG box, so once the
     box is centre-aligned with the burger the mark reads ~14px too high. Push it
     down so the mark's optical centre lines up with the burger. (Desktop keeps
     its own +4px nudge tuned for the CTA pill.) */
  .nav__logo { transform: translateY(14px); }
  .nav__brand:hover .nav__logo { transform: translateY(14px) scale(1.05); }
  .nav__links {
    position: fixed;
    top: 0; right: 0;
    left: auto;
    transform: translateX(100%);
    width: min(85%, 360px);
    height: 100vh;
    flex-direction: column;
    background: rgba(8, 13, 26, 0.95);
    backdrop-filter: blur(20px);
    padding: 100px 32px 32px;
    align-items: flex-start;
    gap: 24px;
    transition: transform .45s var(--ease);
    border-left: 1px solid var(--border);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav .nav__cta { display: none; }
  .nav .nav__burger { display: flex; }
  /* tighten the EN/FR/DE control so it sits comfortably next to the burger */
  .nav__right { gap: 10px; }
  .lang-switch { padding: 2px; }
  .lang-switch__btn { padding: 5px 7px; font-size: 10.5px; letter-spacing: 0.04em; }
}

/* ========================================================= */
/* BUTTONS                                                   */
/* ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 100px;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .35s var(--ease);
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
}
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #001417;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px var(--accent-glow);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(25, 227, 201, 0.4);
  color: var(--accent);
}

/* ========================================================= */
/* HERO                                                      */
/* ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 40px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, transparent 0%, rgba(5, 8, 17, 0.4) 60%, var(--bg-0) 100%),
    linear-gradient(180deg, rgba(5, 8, 17, 0.5) 0%, transparent 30%, transparent 70%, var(--bg-0) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 100px;
  margin-bottom: 36px;
  backdrop-filter: blur(8px);
  animation: fade-up 1s var(--ease) .1s both;
}
.hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* LYKEN Labs brandline above Sound Thinking — visible enough to read as the
   company mark, still clearly subordinate to the headline below. */
.hero__brandline {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
  animation: fade-up 1s var(--ease) .1s both;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(54px, 9vw, 132px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
}
.title-line {
  display: block;
  animation: fade-up 1.1s var(--ease) .25s both;
  background: linear-gradient(180deg, #ffffff 0%, #b8c5e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-line--accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--brand-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-delay: .4s;
  font-style: italic;
  font-weight: 400;
  /* Extend the element box past the italic descender so background-clip: text doesn't clip the "g" */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.hero__lead {
  max-width: 680px;
  margin: 0 auto 44px;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
  animation: fade-up 1.1s var(--ease) .55s both;
}

.hero__cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
  animation: fade-up 1.1s var(--ease) .7s both;
}

/* Tagline under the CTAs — boss feedback: keep the pulsing dot here, not in the nav */
.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  animation: fade-up 1.1s var(--ease) .85s both;
  white-space: nowrap;
}
.hero__tagline .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  flex-shrink: 0;
}
/* Forced break inside the tagline: hidden on desktop (one line), shown <=600px
   so it splits cleanly as "European deep-tech · Audio" / "Signal processing · AI". */
.hero__tagline-br { display: none; }

@media (max-width: 600px) {
  .hero__tagline {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    padding: 8px 14px;
    /* Was nowrap → the full string is wider than a phone, so "· AI" got clipped
       by body's overflow-x:hidden. Let it wrap and cap its width to the viewport. */
    white-space: normal;
    text-align: center;
    line-height: 1.5;
    max-width: calc(100vw - 40px);
  }
  /* hide the middle "·" (the break replaces it) and enable the forced break */
  .hero__tagline-mid { display: none; }
  .hero__tagline-br { display: inline; }
}


.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
  /* Fade out as soon as the user scrolls so it doesn't visually stack under the hero chips. */
  opacity: var(--hero-scroll-opacity, 1);
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.hero__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, var(--text-faint), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -50%; left: 0;
  width: 100%; height: 50%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
  0%   { top: -50%; }
  100% { top: 100%; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================================= */
/* REVEAL                                                    */
/* ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================= */
/* SHARED — eyebrow, section heads                           */
/* ========================================================= */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-block;
  position: relative;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  margin-right: 12px;
  vertical-align: middle;
  margin-bottom: 3px;
}

.section-head {
  max-width: 1280px;
  margin: 0 auto 64px;
  /* No side padding: the heading must line up with this section's content (and
     with the other sections' headings) at the shared 1280 content edge. */
  padding: 0;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 20ch;
}
.section-head__lead {
  margin-top: 22px;
  max-width: 680px;
  font-size: 16.5px;
  color: var(--text-soft);
  line-height: 1.7;
}

/* Split layout — h2 + lead on the left, metrics on the right (smaller) */
.section-head--split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: start;
}
.section-head--split h2 { max-width: 16ch; }
.section-head__metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px 22px 22px 24px;
  border-left: 1px solid var(--border);
}
.section-head__metrics > div { display: flex; flex-direction: column; gap: 4px; }
.section-head__metrics strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
}
.section-head__metrics span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
@media (max-width: 980px) {
  /* Match the section's own 24px gutter. The base 40px side padding made the
     Solutions / About heads sit inset from the cards/grid below them on mobile,
     unlike the other sections (which already align at 24px). */
  .section-head { padding-left: 0; padding-right: 0; }
  .section-head--split { grid-template-columns: 1fr; gap: 32px; }
  .section-head__metrics {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 24px 0 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .section-head__metrics { grid-template-columns: 1fr; }
}

h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; }

em { font-style: italic; color: var(--accent-3); font-weight: 400; }
strong { color: var(--text); font-weight: 500; }


/* ========================================================= */
/* SOLUTIONS — cards                                         */
/* ========================================================= */
.solutions {
  padding: 80px 40px 140px;
  position: relative;
}
.cards {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .5s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: rgba(25, 227, 201, 0.2); }
.card:hover::before {
  background: linear-gradient(135deg, rgba(25, 227, 201, 0.4), transparent 50%, rgba(54, 200, 255, 0.3));
}

.card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse at center, rgba(31, 76, 196, 0.22), transparent 70%),
    radial-gradient(ellipse at 80% 20%, rgba(25, 227, 201, 0.1), transparent 60%),
    var(--bg-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.card__body {
  padding: 28px 26px 30px;
}
.card__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.card__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(25, 227, 201, 0.35));
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.card:hover .card__icon {
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 0 14px rgba(25, 227, 201, 0.6));
}
.card__head h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  padding-top: 4px;
}
.card__body ul li {
  font-size: 14px;
  color: var(--text-soft);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.card__body ul li:last-child { border-bottom: 0; }
.card__body ul li::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent);
}

@media (max-width: 980px) {
  .cards { grid-template-columns: 1fr; max-width: 540px; }
  .solutions { padding: 60px 24px 100px; }
}

/* ========================================================= */
/* TECH                                                      */
/* ========================================================= */
.tech {
  padding: 100px 40px 140px;
  position: relative;
}
.tech__head {
  max-width: 1280px;
  margin: 0 auto 60px;
}
.tech__head h2 {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.2vw, 84px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.12em;
}
.tech__lead {
  max-width: 760px;
  font-size: 17px;
  color: var(--text-soft);
  line-height: 1.7;
}

/* ========================================================= */
/* AIL — Audio Intelligence Layer architecture diagram        */
/* ========================================================= */
.ail {
  position: relative;
  max-width: 1280px;
  margin: 0 auto 100px;
  padding: 48px 36px 36px;
  border: 1px solid var(--border-card);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(31, 76, 196, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 100%);
  overflow: hidden;
}

/* --- Flow connectors between bands (foundations → core → products) --- */
.ail__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 6px 0;
  padding: 4px 0;
  position: relative;
  z-index: 1;
}
.ail__flow-line {
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 125, 255, 0.45), transparent);
}
.ail__flow-chevron {
  font-size: 12px;
  line-height: 1;
  color: var(--brand-soft);
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(77, 125, 255, 0.55);
  transform: translateY(-1px);
}

/* ---- Top + Bottom bands ----
   3-column grid: label | chips | empty mirror. The empty third column
   has the same width as the label so the chips column is geometrically
   centred under the LYKEN core band (and aligned with the flow arrows). */
.ail__band {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  gap: 32px;
  padding: 12px 0;
}
.ail__band-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ail__band-arrow {
  font-size: 22px;
  line-height: 1;
  color: var(--text-soft);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.ail__band-sub {
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--text-soft);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.ail__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ail__chip {
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  background: transparent;
  transition: border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.ail__chip:hover {
  border-color: rgba(77, 125, 255, 0.55);
  color: var(--text);
  background: rgba(77, 125, 255, 0.06);
  transform: translateY(-2px);
}
.ail__chip--tech {
  border-radius: 6px;
  border-color: var(--border);
  border-left: 2px solid var(--accent);
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.10em;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
}
.ail__chip--tech:hover {
  border-color: rgba(25, 227, 201, 0.4);
  border-left-color: var(--accent);
  background: rgba(25, 227, 201, 0.05);
}

/* ---- Core band — the LYKEN layer, the sandwich filling.
   Kept visually distinct (brand-blue glow) but compact so the
   foundations/products bands read as equal partners flanking it. ---- */
.ail__core-band {
  position: relative;
  z-index: 2;
  margin: 4px 0;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(31, 76, 196, 0.20), rgba(77, 125, 255, 0.05)),
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(77, 125, 255, 0.22), transparent 70%);
  border: 1px solid rgba(77, 125, 255, 0.4);
  box-shadow: 0 20px 60px -32px rgba(31, 76, 196, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ail__core-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}
.ail__core-eyebrow {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
}
.ail__core-stripe {
  flex: 1;
  max-width: 220px;
  height: 1px;
}
.ail__core-stripe--left {
  background: linear-gradient(90deg, transparent, rgba(77, 125, 255, 0.5));
}
.ail__core-stripe--right {
  background: linear-gradient(90deg, rgba(77, 125, 255, 0.5), transparent);
}
/* Fallback for the legacy single-stripe markup (kept harmless if present). */
.ail__core-stripe:only-of-type {
  background: linear-gradient(90deg, rgba(77, 125, 255, 0.5), transparent);
}
.ail__cores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ail__core-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border: 1px solid rgba(77, 125, 255, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(8, 16, 36, 0.5);
  color: var(--text);
  font-family: var(--font-display);
  cursor: pointer;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.ail__core-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(77, 125, 255, 0.22), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.ail__core-card:hover {
  transform: translateY(-2px);
  border-color: rgba(77, 125, 255, 0.7);
  box-shadow: 0 14px 32px -18px rgba(77, 125, 255, 0.55);
}
.ail__core-card:hover::before { opacity: 1; }
.ail__core-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 0 10px rgba(77, 125, 255, 0.4));
}
.ail__core-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.25;
  flex: 1;
  color: var(--text);
}
.ail__core-arrow {
  align-self: center;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--brand-soft);
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.ail__core-card:hover .ail__core-arrow {
  transform: translateX(4px);
  color: var(--accent);
}

@media (max-width: 980px) {
  .ail { padding: 36px 22px 28px; }
  .ail__band { grid-template-columns: 1fr; gap: 14px; }
  .ail__core-band { padding: 18px 16px 18px; }
  .ail__cores { grid-template-columns: 1fr; }
  .ail__core-card { padding: 12px 14px; }
  .ail__flow { margin: 2px 0; }
  .ail__flow-line { max-width: 120px; }
  /* "LYKEN Labs Audio Intelligence Layer" is nowrap; on a phone it overran the
     band and got clipped by .ail's overflow:hidden. Drop the side stripes, let
     the label wrap and centre it. */
  .ail__core-label { flex-direction: column; gap: 10px; }
  .ail__core-stripe { display: none; }
  .ail__core-eyebrow {
    white-space: normal;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.16em;
    line-height: 1.4;
  }
}

/* ---- Pillar highlight pulse — fires when user clicks an AIL core card ---- */
.card.is-highlighted {
  animation: pillar-pulse 1.8s var(--ease-out);
}
@keyframes pillar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(77, 125, 255, 0.7), 0 0 0 0 rgba(77, 125, 255, 0); }
  35%  { box-shadow: 0 0 0 6px rgba(77, 125, 255, 0.45), 0 0 60px 12px rgba(77, 125, 255, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(77, 125, 255, 0), 0 0 60px 0 rgba(77, 125, 255, 0); }
}

/* MARKETS — its own section: eyebrow + big heading + the market-segment grid */
.markets {
  padding: 0 40px 140px;
  position: relative;
}

/* clients (the market-segment grid, lives inside the Markets section) */
.clients {
  max-width: 1280px;
  margin: 0 auto;
}
.clients .eyebrow { margin-bottom: 36px; }
.clients__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.client {
  padding: 32px 26px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.client:hover {
  transform: translateY(-4px);
  border-color: rgba(25, 227, 201, 0.25);
  background: rgba(25, 227, 201, 0.04);
}
.client img {
  width: 52px; height: 52px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 12px rgba(54, 200, 255, 0.3));
}
.client h4 {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.3;
}
.client p {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .clients__grid { grid-template-columns: 1fr; }
  .tech { padding: 60px 24px 100px; }
  .markets { padding: 0 24px 90px; }
  .layer-row { padding: 20px 22px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ========================================================= */
/* RESEARCH                                                  */
/* ========================================================= */
.research {
  padding: 100px 40px 140px;
  position: relative;
}
.research__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.research__inner--solo {
  max-width: 1280px;
}

.research__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}
.research__copy .lead {
  font-size: 18px;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 56px;
  max-width: 760px;
}
.research__list { display: flex; flex-direction: column; gap: 32px; max-width: 820px; }
/* Direct children only: the divider + spacing separates the three blocks.
   Inner .bullets <li> must NOT inherit it (no line between two bullets). */
.research__list > li {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.research__list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.research__list h4 {
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.research__list p {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.65;
}

/* Accent-dot bullet lists — used by the Research blocks and the About cards
   (same green dot as the Solutions cards, but laid out to wrap cleanly). */
.bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

@media (max-width: 980px) {
  .research { padding: 60px 24px 100px; }
}

/* ========================================================= */
/* ABOUT                                                     */
/* ========================================================= */
.about {
  padding: 100px 40px 140px;
  position: relative;
}
.about__grid {
  max-width: 1280px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.about__card {
  padding: 36px 30px 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .4s, transform .4s var(--ease);
}
.about__card:hover { transform: translateY(-4px); border-color: rgba(25, 227, 201, 0.2); }
.about__card::after {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(25, 227, 201, 0.06), transparent 35%);
  pointer-events: none;
}
.about__card h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 16px;
  margin-top: 6px;
  color: var(--text);
}
.about__card p {
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.65;
}

.origin {
  max-width: 1280px;
  margin: 0 auto 100px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.origin__rule {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.origin p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* team */
.team {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.team__member {
  text-align: center;
  padding: 48px 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  transition: border-color .4s, transform .4s var(--ease);
}
.team__member:hover {
  border-color: rgba(25, 227, 201, 0.25);
  transform: translateY(-4px);
}
.team__portrait {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: radial-gradient(circle, rgba(31, 76, 196, 0.2), var(--bg-2));
  overflow: hidden;
  box-shadow: 0 14px 40px -18px rgba(31, 76, 196, 0.45);
}
.team__portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 2;
  transition: transform .6s var(--ease);
}
/* Boss round-3 — Thomas's source photo is framed wider than John's, so his
   face reads smaller inside the circular crop. Bumping the scale evens the
   two faces out without rebuilding/recropping the source assets. */
.team__portrait-photo--zoom {
  transform: scale(1.18);
  transform-origin: center 28%;
}
.team__member:hover .team__portrait-photo { transform: scale(1.04); }
.team__member:hover .team__portrait-photo--zoom { transform: scale(1.22); }
.team__portrait-wave {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.team__portrait-wave canvas {
  width: 100%; height: 100%;
  opacity: 0.35;
  mix-blend-mode: screen;
}
.team__member h3 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
}
.team__role {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.team__bio {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 14px;
}
.team__edu {
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; max-width: 540px; }
  .team { grid-template-columns: 1fr; }
  .about { padding: 60px 24px 100px; }
}

/* ========================================================= */
/* CONTACT                                                   */
/* ========================================================= */
.contact {
  padding: 100px 40px 140px;
  position: relative;
}
.contact__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.contact__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.contact__copy .lead {
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 32px;
}
.contact__bullets { display: flex; flex-direction: column; gap: 12px; }
.contact__bullets li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--text-soft);
}
.contact__bullets li span {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}

.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  padding: 44px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.005) 100%);
  border: 1px solid var(--border-card);
  border-radius: 22px;
}
.field { position: relative; }
.field--wide { grid-column: span 2; }
.field input,
.field textarea {
  width: 100%;
  /* block, not the default inline-block: an inline-block textarea leaves a few
     px of baseline/descender space below it, which pushed the focus line
     (.field__line, pinned to the field bottom) below the grey border. */
  display: block;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  padding: 24px 0 12px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  resize: none;
  transition: border-color .3s;
}
.field input:focus,
.field textarea:focus { outline: none; }
.field label {
  position: absolute;
  left: 0; top: 24px;
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: transform .35s var(--ease), color .3s, font-size .35s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-22px);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.field__line {
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .45s var(--ease);
}
.field input:focus ~ .field__line,
.field textarea:focus ~ .field__line { width: 100%; }

.field input::placeholder,
.field textarea::placeholder { color: transparent; }

.btn--submit { grid-column: span 2; justify-self: start; margin-top: 8px; }

/* Status message under the submit button */
.contact__status {
  grid-column: span 2;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}
.contact__status[data-kind="success"] { color: var(--accent); }
.contact__status[data-kind="error"]   { color: #ff8c8c; }

/* Cloudflare Turnstile sits invisibly — its container has no impact on layout */
.cf-turnstile { grid-column: span 2; height: 0; }

@media (max-width: 980px) {
  .contact__inner { grid-template-columns: 1fr; gap: 48px; }
  .contact__form { padding: 28px; grid-template-columns: 1fr; }
  /* All span-2 items must collapse to one column. The status + turnstile were
     left at span 2, which forced an implicit 2nd column — silently reverting
     the whole form to a cramped two-column grid (62px / 198px tracks). */
  .field--wide,
  .btn--submit,
  .contact__status,
  .cf-turnstile { grid-column: span 1; }
  .contact { padding: 60px 24px 100px; }
}

/* ========================================================= */
/* FOOTER — minimalist: just the logo + copyright            */
/* ========================================================= */
.footer {
  border-top: 1px solid var(--border);
  padding: 56px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(31, 76, 196, 0.04) 100%);
}
.footer__brand {
  color: var(--text);
  display: inline-block;
  transition: transform .35s var(--ease), filter .35s var(--ease);
  filter: drop-shadow(0 0 14px rgba(54, 200, 255, 0.35));
}
.footer__brand:hover {
  transform: scale(1.06);
  color: var(--accent);
  filter: drop-shadow(0 0 18px rgba(25, 227, 201, 0.5));
}
.footer__brand svg {
  width: 48px;
  height: 48px;
  display: block;
}
.footer__copyright {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  text-align: center;
  max-width: 720px;
}
.footer__copyright a {
  color: var(--text-soft);
  transition: color .25s var(--ease);
}
.footer__copyright a:hover { color: var(--accent); }
.footer__sep {
  color: var(--text-faint);
}
@media (max-width: 880px) {
  .footer { padding: 40px 24px 28px; }
}

/* All sections share the same horizontal gutter at <=980 so their headings line
   up on tablet / zoomed-in views (tech, markets and about used to reduce their
   gutter later than the rest, which broke the alignment at ~900-980px). */
@media (max-width: 980px) {
  .tech, .markets, .about { padding-left: 24px; padding-right: 24px; }
}

/* ========================================================= */
/* HERO mobile                                               */
/* ========================================================= */
@media (max-width: 720px) {
  .hero { padding: 120px 20px 80px; }
  .hero__scroll { display: none; }
  /* Boss round: remove the hero animation entirely on phones. */
  .hero__canvas { display: none; }
}

/* Short / zoomed viewports (e.g. a smaller screen at 150% browser zoom): the
   hero content reaches the bottom where the SCROLL cue sits, so it lands on the
   "European deep-tech …" tagline chip. Drop the cue when the viewport is too
   short to give it clear room of its own. */
@media (max-height: 820px) {
  .hero__scroll { display: none; }
}

/* ========================================================= */
/* REDUCE MOTION                                             */
/* ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}