/* ============================================================
   Eluma Bio · luminous scientific minimalism
   Palette: deep ink, luminous aqua, warm editorial paper
   Type: Spectral (display serif) + Hanken Grotesk (body)
   ============================================================ */

:root {
  --ink:        #080b12;
  --ink-2:      #0c1320;
  --ink-3:      #121b2b;
  --paper:      #f7f5ef;
  --paper-2:    #efece2;
  --text-dark:  #11151c;   /* on paper */
  --text-muted: #555f6e;   /* on paper */
  --text-light: #eef2f4;   /* on ink */
  --text-dim:   #93a1b3;   /* on ink */

  --aqua:       #5eead4;   /* luminous accent */
  --aqua-glow:  #34e0c4;
  --teal-deep:  #0a6b5a;   /* accent readable on paper (AA on small text) */

  --line-ink:   rgba(255,255,255,.10);
  --line-paper: rgba(17,21,28,.12);

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* anchor jumps clear the fixed header */
section[id] { scroll-margin-top: clamp(70px, 8vh, 92px); }

/* snappier touch + intentional tap highlight */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(94,234,212,.25); }

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--text-light);
  line-height: 1.6;
  font-size: clamp(1rem, .96rem + .25vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* keyboard focus: visible, on-brand, never on mouse click */
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; }
.band-paper :focus-visible { outline-color: var(--teal-deep); }

/* skip link for keyboard/screen-reader users */
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 10000;
  background: var(--aqua); color: #04261f; font-weight: 600;
  padding: .6rem 1rem; border-radius: 8px; font-size: .9rem;
  transform: translateY(-150%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* film grain over everything */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
  opacity: .035; mix-blend-mode: overlay;
}

/* ---------------- layout helpers ---------------- */
.band { padding: clamp(5rem, 11vw, 9.5rem) var(--pad); position: relative; }
.band-paper { background: var(--paper); color: var(--text-dark); }
.band-ink   { background: var(--ink-2); color: var(--text-light); }
.band-ink::before, .band-paper::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
}
.band-ink::before   { background: var(--line-ink); }
.band-paper::before { background: var(--line-paper); }

.section-head { max-width: 760px; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.section-head--center { text-align: center; }

.kicker {
  display: inline-block;
  font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 1.4rem;
}
.kicker-light { color: var(--aqua); }

.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.08; letter-spacing: -.015em;
  text-wrap: balance;
}
.hero-title, .closer-title, .statement-line { text-wrap: balance; }
.section-title--light { color: var(--text-light); }

.section-lede {
  margin-top: 1.5rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: var(--text-muted); max-width: 64ch;
}
.section-head--center .section-lede { margin-left: auto; margin-right: auto; }
.section-lede--light { color: var(--text-dim); }

/* ---------------- header ---------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
  background: rgba(8,11,18,0);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8,11,18,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-ink);
  padding-top: .85rem; padding-bottom: .85rem;
}

.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--text-light); }
.wordmark .mark { color: var(--aqua); display: inline-flex; filter: drop-shadow(0 0 9px rgba(94,234,212,.45)); }
.wordmark-text { font-family: var(--serif); font-size: 1.32rem; font-weight: 500; letter-spacing: -.01em; }
.wordmark-bio { color: var(--aqua); font-style: italic; margin-left: .12em; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.site-nav a { font-size: .92rem; color: var(--text-dim); transition: color .25s var(--ease); }
.site-nav a:hover { color: var(--text-light); }
.site-nav .nav-cta {
  color: var(--text-light); border: 1px solid var(--line-ink);
  padding: .5rem 1.05rem; border-radius: 999px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.site-nav .nav-cta:hover { border-color: var(--aqua); color: var(--aqua); }
@media (max-width: 760px) {
  .site-nav a:not(.nav-cta) { display: none; }
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .96rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn-primary {
  background: var(--aqua); color: #04261f;
  box-shadow: 0 0 0 rgba(94,234,212,0), 0 10px 34px -10px rgba(94,234,212,.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px rgba(94,234,212,.7); }
.btn-ghost { color: var(--text-light); border-color: var(--line-ink); }
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); transform: translateY(-2px); }
.btn-lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.band-paper .btn-ghost { color: var(--text-dark); border-color: var(--line-paper); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: 8rem var(--pad) 5rem;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--ink-3) 0%, var(--ink-2) 38%, var(--ink) 78%);
  overflow: hidden;
}
.hero-aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: 0;
  background:
    radial-gradient(40% 38% at 30% 22%, rgba(94,234,212,.20), transparent 65%),
    radial-gradient(46% 44% at 78% 30%, rgba(52,224,196,.13), transparent 62%),
    radial-gradient(50% 50% at 55% 80%, rgba(36,99,120,.22), transparent 70%);
  filter: blur(8px);
  animation: drift 22s var(--ease) infinite alternate;
}
.hero-net { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
@keyframes drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .9; }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
}

.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }

.eyebrow {
  font-size: .8rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--aqua); font-weight: 600; margin-bottom: 1.8rem;
}

.hero-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5.4rem);
  line-height: 1.04; letter-spacing: -.022em;
  max-width: 16ch;
}
.accent-line {
  font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, var(--aqua), #b8fff0 55%, var(--aqua-glow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-sub {
  margin-top: 2rem; max-width: 56ch;
  font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem);
  color: var(--text-dim); line-height: 1.55;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

.hero-foot {
  margin-top: 2.6rem; font-size: .9rem; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: .6rem; letter-spacing: .01em;
}
.hero-foot .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--aqua);
  box-shadow: 0 0 10px 1px rgba(94,234,212,.8);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   STATEMENT band
   ============================================================ */
.statement {
  background: var(--ink); padding: clamp(4.5rem, 10vw, 8rem) var(--pad);
  border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink);
}
.statement-line {
  max-width: var(--maxw); margin: 0 auto; text-align: center;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1.12; letter-spacing: -.02em; color: var(--text-light);
}
.statement-line em {
  display: block;
  background: linear-gradient(100deg, var(--aqua), #cffff5 60%, var(--aqua-glow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   STATS
   ============================================================ */
.stat-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
}
.stat { padding-top: 1.8rem; border-top: 1px solid var(--line-paper); }
.stat-figure {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1; letter-spacing: -.02em; color: var(--teal-deep);
}
.stat-label { margin-top: 1rem; color: var(--text-muted); font-size: 1.02rem; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PILLARS (approach)
   ============================================================ */
.pillars {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem);
}
.pillar {
  position: relative; overflow: hidden;
  padding: 2.2rem 1.9rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line-ink);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.pillar:hover { transform: translateY(-5px); border-color: rgba(94,234,212,.42); background: linear-gradient(180deg, rgba(94,234,212,.07), rgba(255,255,255,.015)); }
.pillar-no {
  font-family: var(--serif); font-size: .95rem; color: var(--aqua);
  letter-spacing: .1em; opacity: .85;
}
.pillar h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 1rem 0 .7rem; letter-spacing: -.01em; }
.pillar p { color: var(--text-dim); font-size: 1.01rem; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles-list {
  max-width: var(--maxw); margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-paper); border: 1px solid var(--line-paper); border-radius: 18px; overflow: hidden;
}
.principle { background: var(--paper); padding: clamp(1.8rem, 3vw, 2.6rem); transition: background .35s var(--ease); }
.principle:hover { background: var(--paper-2); }
.principle h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  letter-spacing: -.01em; display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .7rem;
}
.p-glyph {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--teal-deep); position: relative; margin-top: .42em;
}
.p-glyph::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--teal-deep); }
.principle p { color: var(--text-muted); font-size: 1.01rem; }
@media (max-width: 760px) { .principles-list { grid-template-columns: 1fr; } }

.principles-note {
  max-width: 760px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  color: var(--text-muted); line-height: 1.5;
}

/* ============================================================
   WHO WE SERVE
   ============================================================ */
.who-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem);
}
.who-card {
  padding: 2.4rem 2rem; border-radius: 18px;
  border: 1px solid var(--line-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.who-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px;
  background: linear-gradient(var(--aqua), transparent); opacity: .6;
}
.who-card:hover { transform: translateY(-5px); border-color: rgba(94,234,212,.4); }
.who-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; margin-bottom: .7rem; letter-spacing: -.01em; }
.who-card p { color: var(--text-dim); font-size: 1.01rem; }
@media (max-width: 820px) { .who-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CLOSER / CONTACT
   ============================================================ */
.closer { text-align: center; overflow: hidden; }
.closer-aurora {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(94,234,212,.16), transparent 62%);
  pointer-events: none;
}
.closer-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.closer-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 1.3rem;
}
.closer-sub { color: var(--text-muted); font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); max-width: 56ch; margin: 0 auto 2.4rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: var(--text-dim); padding: clamp(3.5rem, 6vw, 5rem) var(--pad) 2.5rem; border-top: 1px solid var(--line-ink); }
.footer-top {
  max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2.5rem;
  justify-content: space-between; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-ink);
}
.footer-wordmark { color: var(--text-light); font-size: 1.5rem; display: inline-block; }
.footer-tagline { margin-top: .8rem; max-width: 34ch; font-size: .98rem; }
.footer-meta { text-align: right; font-size: .95rem; line-height: 1.9; }
.footer-meta a:hover { color: var(--aqua); }
.footer-bottom {
  max-width: var(--maxw); margin: 1.8rem auto 0; display: flex; flex-wrap: wrap; gap: .8rem;
  justify-content: space-between; font-size: .85rem; color: #5d6a7c;
}
@media (max-width: 640px) { .footer-meta { text-align: left; } .footer-top { flex-direction: column; } }

/* gradient-text fallback for browsers without background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent-line, .statement-line em { color: var(--aqua); background: none; }
}

/* ============================================================
   reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   MOTION & MICRO-INTERACTIONS (iteration 2)
   ============================================================ */

/* scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 200;
  background: linear-gradient(90deg, var(--aqua), var(--aqua-glow));
  box-shadow: 0 0 12px rgba(94,234,212,.55);
  will-change: transform;
}

/* hero scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.9rem; transform: translateX(-50%); z-index: 3;
  width: 23px; height: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  display: flex; justify-content: center; padding-top: 7px;
  transition: border-color .3s var(--ease);
}
.scroll-cue:hover { border-color: var(--aqua); }
.scroll-cue-dot { width: 3px; height: 7px; border-radius: 2px; background: var(--aqua); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(11px); opacity: 0; } 100% { transform: translateY(11px); opacity: 0; } }
@media (max-width: 760px) { .scroll-cue { display: none; } }

/* nav: animated underline + scroll-spy active state */
.site-nav a:not(.nav-cta) { position: relative; }
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--aqua); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease);
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a.active::after { transform: scaleX(1); }
.site-nav a.active { color: var(--text-light); }

/* animated arrow on ghost button */
.btn .arrow { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* cursor-tracking glow on cards */
.pillar, .who-card { --mx: 50%; --my: 50%; }
.pillar::after, .who-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(94,234,212,.13), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.pillar:hover::after, .who-card:hover::after { opacity: 1; }

/* numerals align while counting */
.stat-figure { font-variant-numeric: tabular-nums; }

/* slow luminous sheen across the gradient display text */
.accent-line, .statement-line em { background-size: 220% auto; }
@media (prefers-reduced-motion: no-preference) {
  .accent-line { animation: sheen 9s linear infinite; }
  .statement-line em { animation: sheen 12s linear infinite; }
}
@keyframes sheen { to { background-position: 220% center; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-aurora, .hero-foot .dot, .scroll-cue-dot { animation: none; }
  .accent-line, .statement-line em { animation: none; }
}