/* =====================================================
   HERNOA by Neurélux — Supplementary Styles
   Extends css/style.css (shared Neurélux design system)
   ===================================================== */

/* ─── Hero carousel: force uniform frame for all slides ───
   Source images vary in native size/ratio; images are pre-cropped
   to a consistent 4:5 ratio (1040x1300), and object-fit:cover here
   guarantees identical on-screen framing regardless of source. */
.hero-visual { height: 650px; }
.hero-carousel-img {
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 1024px) {
  .hero-visual { display: none; }
}

/* ─── Ecosystem utility bar ─── */
.eco-bar {
  background: #060e22;
  border-bottom: 1px solid rgba(79,195,247,0.12);
  padding: 8px 0;
  position: relative;
  z-index: 1001;
}
.eco-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.eco-bar-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.eco-bar-links {
  display: flex;
  gap: 18px;
}
.eco-bar-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s ease;
}
.eco-bar-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.eco-bar-link:hover { color: var(--sky); }

/* Push navbar fixed-position down below the utility bar */
.navbar { top: 34px; }
.navbar.scrolled { top: 0; }
.hero { padding-top: 154px; }
@media (max-width: 768px) {
  .eco-bar-inner { justify-content: center; text-align: center; }
  .eco-bar-label { display: none; }
  .navbar { top: 30px; }
  .hero { padding-top: 130px; }
}

/* ─── Logo images ───
   Uses the shared .logo-img base (display/object-fit/no-drag, from
   style.css) for common behavior, but defines HERNOA-specific size caps
   below instead of reusing Neurelux's exact px values — the HERNOA logo
   files have a much wider aspect ratio than Neurelux's own logo (combined
   lockup 11:1 / standalone 6.8:1 vs Neurelux's ~3-4:1), so copying
   Neurelux's height numbers verbatim would render 1.5-2x wider than the
   text it replaces. Sizes below are calibrated so the rendered width stays
   in the same footprint the previous text wordmark occupied, and the hero
   logo is capped well inside .hero-content's 620px column. */
/* Nav brand area is split into two independent links so each half can
   point somewhere different: the HERNOA mark stays on hernoa.com (scrolls
   to top), "by Neurélux" opens neurelux.com in a new tab. */
.nav-logo-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo { display: flex; align-items: center; }

.hernoa-logo-nav {
  height: 20px;
  width: auto;
  max-width: 220px;
  transition: opacity var(--transition);
}
.nav-logo:hover .hernoa-logo-nav { opacity: 0.85; }

.nav-logo-by {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.18);
  transition: color var(--transition);
}
.nav-logo-by-brand { font-weight: 700; color: rgba(255,255,255,0.75); transition: color var(--transition); }
.nav-logo-by:hover { color: var(--sky); }
.nav-logo-by:hover .nav-logo-by-brand { color: var(--sky); }
@media (max-width: 480px) {
  .nav-logo-by { display: none; }
}

.hernoa-logo-hero {
  /* Small brand mark above the hero eyebrow/headline — the headline text
     (not the logo) now carries the hero's primary visual weight. */
  height: 22px;
  width: auto;
  max-width: 100%;
  animation: heroLogoFadeIn 0.9s ease both;
}
.hero-logo-mark { margin-bottom: 22px; }

/* ─── Hero headline (real text, replaces the old logo-as-H1 pattern) ─── */
.hero-title-text {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.2vw, 3.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.hero-support-line {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 520px;
  margin: -8px 0 20px;
}

/* ─── Technical basis badge row (moved out of the hero; shown where the
   underlying technology is actually explained) ─── */
.tech-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -8px 0 40px;
}
.tech-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 50px;
}

.hernoa-logo-footer {
  height: 20px;
  width: auto;
  max-width: 150px;
  margin-bottom: 6px;
}

/* ─── Problem section ─── */
.problem { padding: 96px 0; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.problem-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.problem-icon { font-size: 2rem; margin-bottom: 14px; }
.problem-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.problem-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }
.problem-resolve {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.6;
  padding: 20px 24px;
  background: rgba(79,195,247,0.06);
  border: 1px solid rgba(79,195,247,0.18);
  border-radius: var(--radius-md);
}

/* ─── Dual-purpose section ─── */
.dual-purpose { padding: 96px 0; }
.dual-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.dual-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
}
.dual-card-accent {
  background: rgba(79,195,247,0.08);
  border-color: rgba(79,195,247,0.3);
}
.dual-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
  background: rgba(79,195,247,0.12);
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.dual-card h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.dual-card p { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.7; }
.dual-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sky);
}

/* ─── Mode grid ─── */
.modes { padding: 96px 0; }
.mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mode-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  text-align: center;
  transition: all var(--transition);
}
.mode-card:hover { border-color: var(--sky); box-shadow: 0 12px 32px rgba(79,195,247,0.12); transform: translateY(-4px); }
.mode-icon { font-size: 2.2rem; margin-bottom: 14px; }
.mode-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.mode-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }

/* ─── Design section ─── */
.design { padding: 96px 0; }
.design-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.design-visual { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.design-img { width: 100%; height: auto; display: block; }
.design-copy .section-tag { margin-bottom: 14px; }
.design-copy .section-title { text-align: left; font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 16px; }
.design-copy > p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; }
.design-list { display: flex; flex-direction: column; gap: 14px; }
.design-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.6;
}
.design-list li svg { width: 18px; height: 18px; flex-shrink: 0; stroke: #16a34a; margin-top: 2px; }

/* ─── Specs grid ─── */
.specs { padding: 96px 0; }
.specs-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.specs-visual {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.specs-img { width: 100%; height: auto; display: block; }
.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
}
.spec-item {
  background: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  gap: 12px;
}
.spec-item-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.spec-item-val { font-size: 0.9rem; color: var(--text-primary); font-weight: 700; text-align: right; }

/* ─── Ecosystem section ─── */
.ecosystem { padding: 96px 0; }
.eco-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.eco-card {
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.eco-card-logo { height: 34px; width: auto; }
.eco-card-kl-logo { height: 34px; width: auto; }
.eco-card p { font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.7; }
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3);
  transition: all var(--transition);
}
.btn-outline-dark:hover { background: rgba(255,255,255,0.1); border-color: var(--sky); transform: translateY(-2px); }
.btn-outline-dark svg { width: 16px; height: 16px; }

/* ─── Proof section (before/after comparison imagery) ─── */
.proof { padding: 88px 0; }
.proof-block { max-width: 980px; margin: 0 auto 40px; }
.proof-block:last-child { margin-bottom: 0; }
.proof-img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
}
.proof-img { width: 100%; height: auto; display: block; }
.proof-caption {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
}

/* ─── Audience section ─── */
.audience { padding: 88px 0; }
.audience-inner {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.audience-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.audience-card-primary { border-color: rgba(79,195,247,0.35); background: rgba(79,195,247,0.05); }
.audience-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 10px;
}
.audience-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.audience-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; }

/* ─── Preliminary research section ─── */
.research { padding: 88px 0; }
.research-intro { max-width: 760px; margin: 0 auto 44px; text-align: center; font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.75; }
.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.research-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
}
.research-card-subject {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--sky);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.research-card-protocol { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-bottom: 20px; }
.research-stat-list { display: flex; flex-direction: column; gap: 14px; }
.research-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.research-stat:last-child { border-bottom: none; padding-bottom: 0; }
.research-stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.5; }
.research-stat-val { font-size: 1.15rem; font-weight: 800; color: var(--white); white-space: nowrap; }
.research-note {
  max-width: 860px;
  margin: 32px auto 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  text-align: center;
}

/* ─── Early Purchase Reservation ─── */
.reserve { padding: 88px 0; }
.reserve-lead {
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.reserve-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--white);
  border: 1.5px solid rgba(79,195,247,0.35);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 40px 40px 36px;
  text-align: center;
}
.reserve-card-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  background: rgba(79,195,247,0.1);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.reserve-price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 10px;
}
.reserve-regular-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.9rem;
}
.reserve-regular-label { color: var(--text-muted); }
.reserve-regular-price { color: var(--text-muted); text-decoration: line-through; }
.reserve-save-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #16a34a;
  background: rgba(22,163,74,0.1);
  padding: 3px 10px;
  border-radius: 50px;
}
.reserve-card .btn-cta {
  width: 100%;
  justify-content: center;
  margin-bottom: 22px;
}
.reserve-fine {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.7;
  text-align: left;
  margin-bottom: 12px;
}
.reserve-fine:last-child { margin-bottom: 0; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .design-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .problem-grid { grid-template-columns: 1fr; }
  .dual-grid { grid-template-columns: 1fr; }
  .dual-plus { transform: rotate(90deg); }
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .specs-layout { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: 1fr; }
  .audience-inner { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
  .reserve-card { padding: 32px 24px 28px; }
}