/* =========================================================
   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; 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;
  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);
}

@media (max-width: 880px) {
  .nav { padding: 14px 20px; }
  .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; }
}

/* ========================================================= */
/* 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);
  animation: pulse 2s ease-in-out infinite;
}
@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);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .hero__tagline {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    padding: 8px 12px;
  }
}


.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;
  padding: 0 40px;
}
.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) {
  .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; }
}

/* ---- 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); }
}

/* clients */
.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: 15px;
  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; }
  .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: 980px;
  margin: 0 auto;
}
.research__inner--solo {
  max-width: 920px;
}

.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;
}
.research__list { display: flex; flex-direction: column; gap: 32px; }
.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;
}

@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%;
  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 input:valid:not([value=""]) + 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; }
  .field--wide { grid-column: span 1; }
  .btn--submit { 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; }
}

/* ========================================================= */
/* HERO mobile                                               */
/* ========================================================= */
@media (max-width: 720px) {
  .hero { padding: 120px 20px 80px; }
  .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; }
}