/**
 * ASIKM-Synthesis v1.0.0
 * Contextual Integration Stylesheet
 * Bridges ScholarCSS design tokens with ASIKM content architecture
 * 
 * Dependencies: scholar.css (design tokens, typography, utilities)
 * Philosophy: Harmonize, don't duplicate. Native embedding over append.
 */

/* ==========================================================================
   ASIKM CUSTOM PROPERTIES EXTENSION
   Extends ScholarCSS variables with ASIKM-specific semantic tokens
   ========================================================================== */
:root {
  /* ── Warm Cosmic Palette (derived from hero thinking animation) ── */

  /* Override scholar.css base grays with warm-tinted neutrals */
  --scholar-white: #FAF8F5;
  --scholar-snow: #F4F0EB;
  --scholar-steam: #E6DFD5;
  --scholar-fog: #C9BFB1;
  --scholar-slate: #8A7E70;
  --scholar-graphite: #4A4037;
  --scholar-ink: #2C2420;
  --scholar-void: #0E0B09;

  /* Override scholar.css orange accents to match animation warm amber */
  --scholar-orange: #D47C2A;
  --scholar-coral: #E09448;
  --scholar-ember: #B86A1E;
  --scholar-tangerine: #B48C3C;
  --scholar-cream: #FAF3E8;

  /* Override semantic colors to complement the warm palette */
  --scholar-success: #64B48C;
  --scholar-success-light: #E4F3EC;
  --scholar-warning: #B48C3C;
  --scholar-warning-light: #F7F0E0;
  --scholar-error: #B04A3A;
  --scholar-error-light: #F5E4E1;
  --scholar-info: #3C9A96;
  --scholar-info-light: #E0F0EF;

  /* ASIKM Semantic Colors (animation-complementary) */
  --asikm-research-green: #3C9A96;
  --asikm-research-green-light: #E0F0EF;
  --asikm-accent-teal: #3C9A96;

  /* Content-specific spacing */
  --asikm-section-gap: var(--scholar-space-16);
  --asikm-component-gap: var(--scholar-space-8);
  --asikm-inner-gap: var(--scholar-space-6);

  /* Layout constraints */
  --asikm-container-max: 1200px;
  --asikm-text-max: 70ch;
}

/* ==========================================================================
   NAVIGATION SYSTEM
   ScholarCSS-informed, ASIKM-contextualized
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--scholar-z-sticky);
  background-color: var(--scholar-white);
  border-bottom: 1px solid var(--scholar-steam);
  padding: var(--scholar-space-4) 0;
}

.nav-inner {
  max-width: var(--asikm-container-max);
  margin: 0 auto;
  padding: 0 var(--scholar-space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--scholar-space-6);
}

.nav-title-stack {
  display: flex;
  flex-direction: column;
  gap: var(--scholar-space-0-5);
  text-decoration: none !important;
}

.nav-title {
  font-family: var(--scholar-font-primary);
  font-size: var(--scholar-text-2xl);
  font-weight: var(--scholar-font-bold);
  color: var(--scholar-ink);
  letter-spacing: var(--scholar-tracking-tighter);
  line-height: var(--scholar-leading-tight);
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Shimmer shine effect for ASIKM logo - overlay approach */
.nav-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  animation: logoShimmer 5s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes logoShimmer {
  0%, 60% {
    left: -100%;
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  85% {
    left: 150%;
    opacity: 1;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

.nav-subtitle {
  font-family: var(--scholar-font-primary);
  font-size: var(--scholar-text-xs);
  font-weight: var(--scholar-font-semibold);
  color: var(--scholar-orange);
  letter-spacing: var(--scholar-tracking-widest);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: var(--scholar-space-1);
}

.nav-link {
  font-size: var(--scholar-text-sm);
  font-weight: var(--scholar-font-medium);
  color: var(--scholar-graphite);
  padding: var(--scholar-space-2) var(--scholar-space-3);
  border-radius: var(--scholar-radius);
  transition: all var(--scholar-transition-fast);
  text-decoration: none !important;
}

.nav-link:hover {
  color: var(--scholar-orange);
  background-color: var(--scholar-snow);
}

.nav-link.active {
  color: var(--scholar-orange);
  background-color: var(--scholar-cream);
}

/* ==========================================================================
   HERO SYSTEM
   Research laboratory aesthetic with ScholarCSS harmony
   ========================================================================== */
.hero-section {
  padding: var(--scholar-space-16) var(--scholar-space-6);
  background: linear-gradient(180deg, var(--scholar-snow) 0%, var(--scholar-white) 100%);
  border-bottom: 1px solid var(--scholar-steam);
}

/* Expanded Hero with Visualization */
.hero-section.hero-expanded {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: var(--scholar-space-24) var(--scholar-space-6);
}

.hero-visualization {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-visualization svg {
  width: 100%;
  height: 100%;
}

/* Background Video */
.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.85) 100%
  );
}

.hero-section.hero-expanded .hero-inner {
  position: relative;
  z-index: 1;
}

/* Hero Animation - Virtually Imperceptible & Hyper-Complex */
@keyframes ka {
  0%, 100% { opacity: 0.085; transform: translate(0, 0) scale(1); }
  33% { opacity: 0.098; transform: translate(0.12px, -0.1px) scale(1.001); }
  66% { opacity: 0.078; transform: translate(-0.08px, 0.06px) scale(0.999); }
}

@keyframes kb {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.138; }
}

@keyframes kc {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.172; }
}

@keyframes kd {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.15px, -0.22px); }
  50% { transform: translate(-0.12px, -0.15px); }
  75% { transform: translate(0.08px, 0.13px); }
}

@keyframes ke {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-0.14px, 0.18px); }
  66% { transform: translate(0.1px, 0.12px); }
}

@keyframes kf {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.12px, -0.1px); }
}

@keyframes kg {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-0.06px, 0.06px); }
}

@keyframes kh {
  0%, 100% { opacity: 0.008; }
  25% { opacity: 0.012; }
  50% { opacity: 0.009; }
  75% { opacity: 0.014; }
}

@keyframes ki {
  0%, 100% { opacity: 0.0045; }
  50% { opacity: 0.007; }
}

@keyframes kj {
  0%, 100% { opacity: 0.0025; }
  50% { opacity: 0.0045; }
}

@keyframes kk {
  0%, 100% { opacity: 0.048; transform: scale(1); }
  50% { opacity: 0.062; transform: scale(1.02); }
}

@keyframes kl {
  0%, 100% { transform: translate(0, 0); opacity: 0.02; }
  33% { transform: translate(1.2px, -1px); opacity: 0.028; }
  66% { transform: translate(-0.9px, 0.65px); opacity: 0.016; }
}

@keyframes km {
  0% { transform: rotate(0deg); transform-origin: 600px 250px; }
  100% { transform: rotate(360deg); transform-origin: 600px 250px; }
}

@keyframes kn {
  0% { transform: rotate(0deg); transform-origin: 600px 250px; }
  100% { transform: rotate(-360deg); transform-origin: 600px 250px; }
}

.c { animation: ka 150s ease-in-out infinite; }
.a { animation: kb 125s ease-in-out infinite; }
.b { animation: kc 110s ease-in-out infinite; }

.d { animation: kd 140s ease-in-out infinite; }
.d:nth-of-type(1) { animation-delay: 0s; animation-duration: 132s; }
.d:nth-of-type(2) { animation-delay: -9s; animation-duration: 148s; }
.d:nth-of-type(3) { animation-delay: -18s; animation-duration: 136s; }
.d:nth-of-type(4) { animation-delay: -27s; animation-duration: 144s; }
.d:nth-of-type(5) { animation-delay: -36s; animation-duration: 128s; }
.d:nth-of-type(6) { animation-delay: -45s; animation-duration: 152s; }
.d:nth-of-type(7) { animation-delay: -54s; animation-duration: 140s; }
.d:nth-of-type(8) { animation-delay: -63s; animation-duration: 124s; }
.d:nth-of-type(9) { animation-delay: -72s; animation-duration: 156s; }
.d:nth-of-type(10) { animation-delay: -81s; animation-duration: 138s; }
.d:nth-of-type(11) { animation-delay: -90s; animation-duration: 146s; }
.d:nth-of-type(12) { animation-delay: -99s; animation-duration: 130s; }
.d:nth-of-type(13) { animation-delay: -108s; animation-duration: 154s; }
.d:nth-of-type(14) { animation-delay: -117s; animation-duration: 142s; }
.d:nth-of-type(15) { animation-delay: -126s; animation-duration: 158s; }
.d:nth-of-type(16) { animation-delay: -135s; animation-duration: 134s; }

.e { animation: ke 180s ease-in-out infinite; }
.e:nth-of-type(1) { animation-delay: -8s; }
.e:nth-of-type(2) { animation-delay: -26s; }
.e:nth-of-type(3) { animation-delay: -44s; }
.e:nth-of-type(4) { animation-delay: -62s; }
.e:nth-of-type(5) { animation-delay: -80s; }
.e:nth-of-type(6) { animation-delay: -98s; }
.e:nth-of-type(7) { animation-delay: -116s; }
.e:nth-of-type(8) { animation-delay: -134s; }
.e:nth-of-type(9) { animation-delay: -152s; }
.e:nth-of-type(10) { animation-delay: -170s; }
.e:nth-of-type(11) { animation-delay: -188s; }
.e:nth-of-type(12) { animation-delay: -206s; }

.f { animation: kf 220s ease-in-out infinite; }
.f:nth-of-type(1) { animation-delay: -16s; }
.f:nth-of-type(2) { animation-delay: -42s; }
.f:nth-of-type(3) { animation-delay: -68s; }
.f:nth-of-type(4) { animation-delay: -94s; }
.f:nth-of-type(5) { animation-delay: -120s; }
.f:nth-of-type(6) { animation-delay: -146s; }
.f:nth-of-type(7) { animation-delay: -172s; }
.f:nth-of-type(8) { animation-delay: -198s; }
.f:nth-of-type(9) { animation-delay: -224s; }
.f:nth-of-type(10) { animation-delay: -250s; }

.g { animation: kg 280s ease-in-out infinite; }
.g:nth-of-type(1) { animation-delay: -24s; }
.g:nth-of-type(2) { animation-delay: -64s; }
.g:nth-of-type(3) { animation-delay: -104s; }
.g:nth-of-type(4) { animation-delay: -144s; }
.g:nth-of-type(5) { animation-delay: -184s; }
.g:nth-of-type(6) { animation-delay: -224s; }

.h { animation: kg 350s ease-in-out infinite; }
.h:nth-of-type(1) { animation-delay: -40s; }
.h:nth-of-type(2) { animation-delay: -120s; }
.h:nth-of-type(3) { animation-delay: -200s; }
.h:nth-of-type(4) { animation-delay: -280s; }

.i { animation: kh 120s ease-in-out infinite; }
.i:nth-of-type(1) { animation-delay: 0s; }
.i:nth-of-type(2) { animation-delay: -8s; }
.i:nth-of-type(3) { animation-delay: -16s; }
.i:nth-of-type(4) { animation-delay: -24s; }
.i:nth-of-type(5) { animation-delay: -32s; }
.i:nth-of-type(6) { animation-delay: -40s; }
.i:nth-of-type(7) { animation-delay: -48s; }
.i:nth-of-type(8) { animation-delay: -56s; }
.i:nth-of-type(9) { animation-delay: -64s; }
.i:nth-of-type(10) { animation-delay: -72s; }
.i:nth-of-type(11) { animation-delay: -80s; }
.i:nth-of-type(12) { animation-delay: -88s; }
.i:nth-of-type(13) { animation-delay: -96s; }
.i:nth-of-type(14) { animation-delay: -104s; }
.i:nth-of-type(15) { animation-delay: -112s; }
.i:nth-of-type(16) { animation-delay: -120s; }

.j { animation: ki 100s ease-in-out infinite; }
.j:nth-of-type(1) { animation-delay: -4s; }
.j:nth-of-type(2) { animation-delay: -14s; }
.j:nth-of-type(3) { animation-delay: -24s; }
.j:nth-of-type(4) { animation-delay: -34s; }
.j:nth-of-type(5) { animation-delay: -44s; }
.j:nth-of-type(6) { animation-delay: -54s; }
.j:nth-of-type(7) { animation-delay: -64s; }
.j:nth-of-type(8) { animation-delay: -74s; }
.j:nth-of-type(9) { animation-delay: -84s; }
.j:nth-of-type(10) { animation-delay: -94s; }
.j:nth-of-type(11) { animation-delay: -104s; }
.j:nth-of-type(12) { animation-delay: -114s; }

.k { animation: kj 140s ease-in-out infinite; }
.l { animation: kj 180s ease-in-out infinite; }
.m { animation: kj 240s ease-in-out infinite; }
.n { animation: kj 300s ease-in-out infinite; }

.o { animation: kk 90s ease-in-out infinite; }
.o:nth-of-type(1) { animation-delay: 0s; }
.o:nth-of-type(2) { animation-delay: -6s; }
.o:nth-of-type(3) { animation-delay: -12s; }
.o:nth-of-type(4) { animation-delay: -18s; }
.o:nth-of-type(5) { animation-delay: -24s; }
.o:nth-of-type(6) { animation-delay: -30s; }
.o:nth-of-type(7) { animation-delay: -36s; }
.o:nth-of-type(8) { animation-delay: -42s; }

.p { animation: kl 480s ease-in-out infinite; }
.p:nth-of-type(1) { animation-delay: -40s; }
.p:nth-of-type(2) { animation-delay: -80s; }
.p:nth-of-type(3) { animation-delay: -120s; }
.p:nth-of-type(4) { animation-delay: -160s; }
.p:nth-of-type(5) { animation-delay: -200s; }
.p:nth-of-type(6) { animation-delay: -240s; }

.v { animation: km 1500s linear infinite; }
.v:nth-of-type(2) { animation-duration: 1200s; animation-direction: reverse; }
.v:nth-of-type(3) { animation-duration: 1800s; animation-delay: -600s; }
.v:nth-of-type(4) { animation-duration: 1350s; animation-delay: -300s; }
.v:nth-of-type(5) { animation-duration: 1650s; animation-delay: -900s; }

.w { animation: kn 1000s linear infinite; }
.w:nth-of-type(2) { animation-duration: 1300s; animation-direction: reverse; }
.w:nth-of-type(3) { animation-duration: 1100s; animation-delay: -500s; }
.w:nth-of-type(4) { animation-duration: 1200s; animation-delay: -250s; }

.x { animation: km 800s linear infinite; }
.x:nth-of-type(2) { animation-duration: 900s; animation-direction: reverse; }
.x:nth-of-type(3) { animation-duration: 1000s; animation-delay: -400s; }

.y { animation: kn 650s linear infinite; }
.y:nth-of-type(2) { animation-duration: 750s; animation-direction: reverse; }

.o:nth-of-type(10) { animation-delay: -40.5s; }
.o:nth-of-type(11) { animation-delay: -45s; }
.o:nth-of-type(12) { animation-delay: -49.5s; }
.o:nth-of-type(13) { animation-delay: -54s; }
.o:nth-of-type(14) { animation-delay: -58.5s; }
.o:nth-of-type(15) { animation-delay: -63s; }
.o:nth-of-type(16) { animation-delay: -67.5s; }

.p { animation: kl 360s ease-in-out infinite; }
.p:nth-of-type(1) { animation-delay: -30s; }
.p:nth-of-type(2) { animation-delay: -60s; }
.p:nth-of-type(3) { animation-delay: -90s; }
.p:nth-of-type(4) { animation-delay: -120s; }
.p:nth-of-type(5) { animation-delay: -150s; }
.p:nth-of-type(6) { animation-delay: -180s; }
.p:nth-of-type(7) { animation-delay: -210s; }
.p:nth-of-type(8) { animation-delay: -240s; }
.p:nth-of-type(9) { animation-delay: -270s; }
.p:nth-of-type(10) { animation-delay: -300s; }
.p:nth-of-type(11) { animation-delay: -330s; }
.p:nth-of-type(12) { animation-delay: -360s; }

.v { animation: km 1200s linear infinite; }
.v:nth-of-type(2) { animation-duration: 960s; animation-direction: reverse; }
.v:nth-of-type(3) { animation-duration: 1440s; animation-delay: -500s; }
.v:nth-of-type(4) { animation-duration: 1080s; animation-delay: -250s; }
.v:nth-of-type(5) { animation-duration: 1320s; animation-delay: -750s; }

.w { animation: kn 800s linear infinite; }
.w:nth-of-type(2) { animation-duration: 1040s; animation-direction: reverse; }
.w:nth-of-type(3) { animation-duration: 880s; animation-delay: -400s; }
.w:nth-of-type(4) { animation-duration: 960s; animation-delay: -200s; }

.x { animation: km 640s linear infinite; }
.x:nth-of-type(2) { animation-duration: 720s; animation-direction: reverse; }
.x:nth-of-type(3) { animation-duration: 800s; animation-delay: -300s; }

.y { animation: kn 520s linear infinite; }
.y:nth-of-type(2) { animation-duration: 600s; animation-direction: reverse; }

.hero-section.slim {
  padding: var(--scholar-space-10) var(--scholar-space-6);
}

.hero-inner {
  max-width: var(--asikm-container-max);
  margin: 0 auto;
  text-align: center;
}

.hero-inner .hero-badge,
.hero-inner .hero-tagline,
.hero-inner .hero-description,
.hero-inner .hero-ctas {
  margin-left: auto;
  margin-right: auto;
}

.hero-inner .hero-description {
  max-width: 700px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--scholar-space-2);
  font-size: var(--scholar-text-xs);
  font-weight: var(--scholar-font-medium);
  color: var(--scholar-orange);
  text-transform: uppercase;
  letter-spacing: var(--scholar-tracking-wider);
  margin-bottom: var(--scholar-space-4);
  padding: var(--scholar-space-1-5) var(--scholar-space-3);
  background-color: var(--scholar-cream);
  border: 1px solid var(--scholar-coral);
  border-radius: var(--scholar-radius);
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--scholar-orange);
  border-radius: var(--scholar-radius-full);
}

.hero-tagline {
  font-family: var(--scholar-font-academic);
  font-size: var(--scholar-text-5xl);
  font-weight: var(--scholar-font-bold);
  color: var(--scholar-ink);
  letter-spacing: var(--scholar-tracking-tighter);
  line-height: var(--scholar-leading-tight);
  margin-bottom: var(--scholar-space-4);
}

.hero-description {
  font-size: var(--scholar-text-xl);
  color: var(--scholar-slate);
  max-width: var(--asikm-text-max);
  line-height: var(--scholar-leading-relaxed);
  margin-bottom: var(--scholar-space-6);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--scholar-space-3);
  font-size: var(--scholar-text-sm);
  color: var(--scholar-slate);
}

.meta-sep {
  color: var(--scholar-fog);
}

/* ==========================================================================
   METRICS BAR
   Data visualization with academic restraint
   ========================================================================== */
.metrics-bar {
  padding: var(--scholar-space-6) var(--scholar-space-6);
  background-color: var(--scholar-ink);
  border-bottom: 1px solid var(--scholar-graphite);
}

.metrics-inner {
  max-width: var(--asikm-container-max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--scholar-space-12);
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scholar-space-1);
  text-align: center;
}

.metric-number {
  font-family: var(--scholar-font-mono);
  font-size: var(--scholar-text-3xl);
  font-weight: var(--scholar-font-bold);
  color: var(--scholar-white);
  letter-spacing: var(--scholar-tracking-tight);
}

.metric-label {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-slate);
  text-transform: uppercase;
  letter-spacing: var(--scholar-tracking-wide);
}

/* ==========================================================================
   CONTENT SECTIONS
   Modular knowledge containers
   ========================================================================== */
.content-section {
  padding: var(--asikm-section-gap) var(--scholar-space-6);
  max-width: var(--asikm-container-max);
  margin: 0 auto;
}

.content-section + .content-section {
  padding-top: 0;
}

.section-header {
  margin-bottom: var(--scholar-space-8);
}

.section-eyebrow {
  display: block;
  font-size: var(--scholar-text-xs);
  font-weight: var(--scholar-font-semibold);
  color: var(--scholar-orange);
  text-transform: uppercase;
  letter-spacing: var(--scholar-tracking-widest);
  margin-bottom: var(--scholar-space-2);
}

.section-header h2 {
  margin-bottom: 0;
  position: relative;
}

.section-header h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--scholar-orange);
  margin-top: var(--scholar-space-3);
}

/* ==========================================================================
   PRODUCT GRID
   Research instruments presentation
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--scholar-space-6);
}

a.product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  padding: var(--scholar-space-6);
  background-color: var(--scholar-snow);
  border: 1px solid var(--scholar-steam);
  border-radius: var(--scholar-radius);
  transition: all var(--scholar-transition-base);
  height: 100%;
}

a.product-card:hover {
  background-color: var(--scholar-white);
  border-color: var(--scholar-fog);
  box-shadow: var(--scholar-shadow-md);
  transform: translateY(-2px);
}

a.product-card:hover .product-name {
  color: var(--scholar-orange);
}

.product-header {
  margin-bottom: var(--scholar-space-4);
}

.product-tag {
  display: inline-block;
  font-size: var(--scholar-text-xs);
  font-weight: var(--scholar-font-medium);
  color: var(--scholar-accent-teal);
  padding: var(--scholar-space-1) var(--scholar-space-2);
  background-color: rgba(60, 154, 150, 0.1);
  border-radius: var(--scholar-radius-sm);
  margin-bottom: var(--scholar-space-2);
  margin-right: var(--scholar-space-2);
}

.product-name {
  font-size: var(--scholar-text-xl);
  font-weight: var(--scholar-font-semibold);
  color: var(--scholar-ink);
  margin-bottom: var(--scholar-space-2);
  margin-top: 0;
}

.product-description {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-graphite);
  line-height: var(--scholar-leading-relaxed);
  margin-bottom: 0;
  margin-top: 0;
}

/* ==========================================================================
   IP STRATEGY GRID
   Four-phase methodology display
   ========================================================================== */
.ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--scholar-space-6);
}

.ip-phase {
  padding: var(--scholar-space-6);
  background-color: var(--scholar-white);
  border: 1px solid var(--scholar-steam);
  border-top: 3px solid var(--scholar-orange);
  border-radius: var(--scholar-radius);
  transition: all var(--scholar-transition-base);
}

.ip-phase:hover {
  box-shadow: var(--scholar-shadow-lg);
  border-color: var(--scholar-fog);
}

.phase-number {
  font-family: var(--scholar-font-mono);
  font-size: var(--scholar-text-3xl);
  font-weight: var(--scholar-font-bold);
  color: var(--scholar-orange);
  opacity: 0.3;
  margin-bottom: var(--scholar-space-3);
  line-height: 1;
}

.ip-phase h3 {
  font-size: var(--scholar-text-lg);
  margin-bottom: var(--scholar-space-3);
}

.ip-phase p {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-graphite);
  margin-bottom: var(--scholar-space-4);
}

.phase-outcome {
  display: block;
  font-size: var(--scholar-text-xs);
  font-weight: var(--scholar-font-medium);
  color: var(--scholar-slate);
  padding-top: var(--scholar-space-3);
  border-top: 1px solid var(--scholar-steam);
  text-transform: uppercase;
  letter-spacing: var(--scholar-tracking-wide);
}

/* ==========================================================================
   APPROACH CARDS
   Core methodology presentation
   ========================================================================== */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--scholar-space-6);
}

.approach-card {
  padding: var(--scholar-space-6);
  background-color: var(--scholar-white);
  border: 1px solid var(--scholar-steam);
  border-radius: var(--scholar-radius);
}

.approach-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--scholar-cream);
  color: var(--scholar-orange);
  border-radius: var(--scholar-radius);
  margin-bottom: var(--scholar-space-4);
}

.approach-card h3 {
  font-size: var(--scholar-text-lg);
  margin-bottom: var(--scholar-space-2);
}

.approach-card p {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-graphite);
  margin-bottom: 0;
}

/* ==========================================================================
   ARCHITECTURE BLOCK
   Technical layer visualization
   ========================================================================== */
.architecture-block {
  display: flex;
  flex-direction: column;
  gap: var(--scholar-space-3);
  padding: var(--scholar-space-6);
  background-color: var(--scholar-snow);
  border-radius: var(--scholar-radius);
}

.arch-layer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--scholar-space-4) var(--scholar-space-6);
  background-color: var(--scholar-white);
  border: 1px solid var(--scholar-steam);
  border-radius: var(--scholar-radius);
  transition: all var(--scholar-transition-fast);
}

.arch-layer:hover {
  border-color: var(--scholar-orange);
  background-color: var(--scholar-cream);
}

.layer-label {
  font-family: var(--scholar-font-mono);
  font-size: var(--scholar-text-sm);
  font-weight: var(--scholar-font-semibold);
  color: var(--scholar-ink);
}

.layer-desc {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-slate);
  text-align: right;
}

/* ==========================================================================
   RESEARCH MODULE COMPONENTS
   Complex Attention content blocks
   ========================================================================== */
.module-section {
  max-width: 900px;
}

.concept-block {
  margin-bottom: var(--scholar-space-8);
  padding-bottom: var(--scholar-space-8);
  border-bottom: 1px solid var(--scholar-steam);
}

.concept-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.concept-block.abstract {
  background-color: var(--scholar-snow);
  padding: var(--scholar-space-6);
  border-radius: var(--scholar-radius);
  border: 1px solid var(--scholar-steam);
  border-left: 4px solid var(--asikm-research-green);
}

.concept-block.abstract p {
  font-size: var(--scholar-text-lg);
  color: var(--scholar-graphite);
  line-height: var(--scholar-leading-relaxed);
  margin-bottom: 0;
}

.concept-block h3 {
  font-family: var(--scholar-font-academic);
  font-size: var(--scholar-text-xl);
  color: var(--scholar-ink);
  margin-bottom: var(--scholar-space-4);
}

.concept-block h4 {
  font-size: var(--scholar-text-lg);
  color: var(--scholar-graphite);
  margin-top: var(--scholar-space-6);
  margin-bottom: var(--scholar-space-3);
}

.concept-block ul {
  margin-bottom: var(--scholar-space-4);
}

.concept-block li {
  margin-bottom: var(--scholar-space-2);
  color: var(--scholar-graphite);
}

.concept-block li strong {
  color: var(--scholar-ink);
}

/* Framework diagram container */
.framework-diagram {
  margin: var(--scholar-space-6) 0;
  padding: var(--scholar-space-6);
  background-color: var(--scholar-white);
  border: 1px solid var(--scholar-steam);
  border-radius: var(--scholar-radius);
  overflow-x: auto;
}

.trajectory-svg {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Framework cards grid */
.framework-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--scholar-space-4);
  margin-top: var(--scholar-space-4);
}

.framework-card {
  padding: var(--scholar-space-5);
  background-color: var(--scholar-white);
  border: 1px solid var(--scholar-steam);
  border-top: 3px solid var(--asikm-accent-teal);
  border-radius: var(--scholar-radius);
}

.framework-card h4 {
  font-size: var(--scholar-text-base);
  margin-top: 0;
  margin-bottom: var(--scholar-space-2);
}

.framework-card p {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-graphite);
  margin-bottom: var(--scholar-space-3);
}

.framework-tag {
  display: inline-block;
  font-family: var(--scholar-font-mono);
  font-size: var(--scholar-text-xs);
  color: var(--asikm-accent-teal);
  padding: var(--scholar-space-1) var(--scholar-space-2);
  background-color: rgba(60, 154, 150, 0.08);
  border-radius: var(--scholar-radius-sm);
}

/* Bibliography styling */
.concept-block.bibliography ol {
  padding-left: var(--scholar-space-6);
}

.concept-block.bibliography li {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-graphite);
  margin-bottom: var(--scholar-space-3);
  padding-left: var(--scholar-space-2);
}

.concept-block.bibliography li em {
  color: var(--scholar-slate);
}

/* ==========================================================================
   ARTICLES SYSTEM
   Research publications and blog content
   ========================================================================== */
.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--scholar-space-6);
}

.article-card {
  padding: var(--scholar-space-8);
  background-color: var(--scholar-white);
  border: 1px solid var(--scholar-steam);
  border-radius: var(--scholar-radius);
  transition: all var(--scholar-transition-base);
}

.article-card:hover {
  box-shadow: var(--scholar-shadow-lg);
  border-color: var(--scholar-fog);
}

.article-card.featured {
  background: linear-gradient(135deg, var(--scholar-white) 0%, var(--scholar-snow) 100%);
  border-left: 4px solid var(--scholar-orange);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--scholar-space-3);
  margin-bottom: var(--scholar-space-4);
}

.article-category {
  font-size: var(--scholar-text-xs);
  font-weight: var(--scholar-font-semibold);
  color: var(--scholar-white);
  background-color: var(--scholar-orange);
  padding: var(--scholar-space-1) var(--scholar-space-3);
  border-radius: var(--scholar-radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--scholar-tracking-wide);
}

.article-date {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-slate);
}

.article-title {
  font-family: var(--scholar-font-academic);
  font-size: var(--scholar-text-2xl);
  font-weight: var(--scholar-font-bold);
  line-height: var(--scholar-leading-tight);
  margin-bottom: var(--scholar-space-4);
}

.article-title a {
  color: var(--scholar-ink);
  text-decoration: none !important;
  transition: color var(--scholar-transition-fast);
}

.article-title a:hover {
  color: var(--scholar-orange);
}

.article-excerpt {
  font-size: var(--scholar-text-base);
  color: var(--scholar-graphite);
  line-height: var(--scholar-leading-relaxed);
  margin-bottom: var(--scholar-space-6);
}

.article-stats {
  display: flex;
  gap: var(--scholar-space-6);
}

.article-stats .stat {
  font-family: var(--scholar-font-mono);
  font-size: var(--scholar-text-xs);
  color: var(--scholar-slate);
  letter-spacing: var(--scholar-tracking-wide);
}

/* Article reading page styles */
.article-header {
  padding: var(--scholar-space-10) var(--scholar-space-6);
  background: linear-gradient(180deg, var(--scholar-snow) 0%, var(--scholar-white) 100%);
  border-bottom: 1px solid var(--scholar-steam);
}

.article-content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--scholar-space-8) var(--scholar-space-6);
}

.article-content h2 {
  font-family: var(--scholar-font-academic);
  font-size: var(--scholar-text-2xl);
  margin-top: var(--scholar-space-8);
  margin-bottom: var(--scholar-space-4);
}

.article-content h3 {
  font-size: var(--scholar-text-xl);
  margin-top: var(--scholar-space-6);
  margin-bottom: var(--scholar-space-3);
}

.article-content p {
  font-size: var(--scholar-text-lg);
  line-height: var(--scholar-leading-relaxed);
  color: var(--scholar-graphite);
  margin-bottom: var(--scholar-space-5);
}

.article-content blockquote {
  margin: var(--scholar-space-8) 0;
  padding: var(--scholar-space-6) var(--scholar-space-8);
  background-color: var(--scholar-snow);
  border-left: 4px solid var(--scholar-orange);
  font-style: italic;
}

.article-content blockquote p {
  font-size: var(--scholar-text-xl);
  color: var(--scholar-ink);
  margin-bottom: 0;
}

.article-content ul, .article-content ol {
  font-size: var(--scholar-text-lg);
  color: var(--scholar-graphite);
  margin-bottom: var(--scholar-space-5);
  padding-left: var(--scholar-space-8);
}

.article-content li {
  margin-bottom: var(--scholar-space-2);
}

.article-content strong {
  color: var(--scholar-ink);
}

/* Data visualization table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--scholar-space-6) 0;
  font-size: var(--scholar-text-sm);
}

.data-table th {
  background-color: var(--scholar-snow);
  padding: var(--scholar-space-3) var(--scholar-space-4);
  text-align: left;
  font-weight: var(--scholar-font-semibold);
  color: var(--scholar-ink);
  border-bottom: 2px solid var(--scholar-steam);
}

.data-table td {
  padding: var(--scholar-space-3) var(--scholar-space-4);
  border-bottom: 1px solid var(--scholar-steam);
  color: var(--scholar-graphite);
}

.data-table tr:hover td {
  background-color: var(--scholar-snow);
}

/* ==========================================================================
   FOOTER SYSTEM
   Site closure with ScholarCSS harmony
   ========================================================================== */
.site-footer {
  padding: var(--scholar-space-8) var(--scholar-space-6);
  background-color: var(--scholar-ink);
  border-top: 1px solid var(--scholar-graphite);
  margin-top: var(--scholar-space-16);
}

.footer-inner {
  max-width: var(--asikm-container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--scholar-space-6);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--scholar-space-3);
}

.footer-title {
  font-family: var(--scholar-font-primary);
  font-size: var(--scholar-text-base);
  font-weight: var(--scholar-font-semibold);
  color: var(--scholar-white);
}

.footer-badge {
  font-size: var(--scholar-text-xs);
  color: var(--scholar-slate);
  text-transform: uppercase;
  letter-spacing: var(--scholar-tracking-wide);
}

.footer-links {
  display: flex;
  gap: var(--scholar-space-6);
}

.footer-link {
  font-size: var(--scholar-text-sm);
  color: var(--scholar-slate);
  transition: color var(--scholar-transition-fast);
  text-decoration: none !important;
}

.footer-link:hover {
  color: var(--scholar-white);
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS
   Maintains hierarchy across breakpoints
   ========================================================================== */
@media (max-width: 991.98px) {
  .hero-tagline {
    font-size: var(--scholar-text-4xl);
  }
  
  .metrics-inner {
    gap: var(--scholar-space-8);
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 767.98px) {
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--scholar-space-3);
  }
  
  .nav-links {
    width: 100%;
    justify-content: flex-start;
  }
  
  .hero-section {
    padding: var(--scholar-space-10) var(--scholar-space-4);
  }
  
  .hero-tagline {
    font-size: var(--scholar-text-3xl);
  }
  
  .hero-description {
    font-size: var(--scholar-text-lg);
  }
  
  .metrics-inner {
    flex-direction: column;
    gap: var(--scholar-space-4);
  }
  
  .metric-item {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }
  
  .content-section {
    padding: var(--scholar-space-10) var(--scholar-space-4);
  }
  
  .product-grid,
  .ip-grid,
  .approach-grid {
    grid-template-columns: 1fr;
  }
  
  .architecture-block {
    padding: var(--scholar-space-4);
  }
  
  .arch-layer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--scholar-space-1);
  }
  
  .layer-desc {
    text-align: left;
  }
  
  .framework-cards {
    grid-template-columns: 1fr;
  }
  
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--scholar-space-4);
  }
  
  .footer-links {
    flex-direction: column;
    gap: var(--scholar-space-2);
  }
}

@media (max-width: 575.98px) {
  .hero-tagline {
    font-size: var(--scholar-text-2xl);
  }
  
  .section-header h2 {
    font-size: var(--scholar-text-2xl);
  }
  
  .concept-block.abstract p {
    font-size: var(--scholar-text-base);
  }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .ip-phase:hover,
  .arch-layer:hover {
    transform: none;
    transition: none;
  }

  .hero-video-bg video {
    animation: none;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .product-card,
  .ip-phase,
  .approach-card,
  .framework-card,
  .arch-layer,
  .concept-block.abstract {
    border-width: 2px;
  }
}

/* Focus visible enhancements */
.nav-link:focus-visible,
.footer-link:focus-visible {
  outline: 2px solid var(--scholar-orange);
  outline-offset: 2px;
}

/* ==========================================================================
   PRINT STYLES
   Optimized for academic document output
   ========================================================================== */
@media print {
  .navbar,
  .site-footer {
    display: none;
  }
  
  .hero-section {
    background: none;
    border: none;
    padding: var(--scholar-space-6) 0;
  }
  
  .hero-section.hero-expanded {
    min-height: auto;
    padding: var(--scholar-space-16) var(--scholar-space-4);
  }
  
  .hero-visualization {
    opacity: 0.4;
  }

  .hero-video-bg {
    display: none;
  }
  
  .hero-badge {
    border: 1px solid var(--scholar-graphite);
  }
  
  .product-card,
  .ip-phase,
  .approach-card,
  .framework-card {
    break-inside: avoid;
    border: 1px solid var(--scholar-graphite);
    box-shadow: none;
  }
  
  .content-section {
    padding: var(--scholar-space-6) 0;
  }
  
  .metrics-bar {
    background: none;
    border: 1px solid var(--scholar-graphite);
  }
  
  .metric-number {
    color: var(--scholar-ink);
  }
}

/* Mermaid Chart Styling */
.mermaid {
    background: var(--scholar-ink);
    border: 1px solid var(--scholar-cloud);
    border-radius: var(--scholar-radius);
    padding: var(--scholar-space-10);
    margin: var(--scholar-space-10) 0;
    overflow-x: auto;
    min-height: 550px;
}

.mermaid svg {
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 500px;
    display: block;
    margin: 0 auto;
}

/* Enhanced Table Styling */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--scholar-space-6) 0;
    font-size: var(--scholar-text-sm);
    background: var(--scholar-white);
    border: 1px solid var(--scholar-cloud);
    border-radius: var(--scholar-radius);
    overflow: hidden;
}

.data-table thead {
    background: var(--scholar-snow);
    border-bottom: 2px solid var(--scholar-cloud);
}

.data-table th {
    padding: var(--scholar-space-3) var(--scholar-space-4);
    text-align: left;
    font-weight: 600;
    color: var(--scholar-ink);
    font-size: var(--scholar-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td {
    padding: var(--scholar-space-3) var(--scholar-space-4);
    border-bottom: 1px solid var(--scholar-cloud);
    color: var(--scholar-slate);
    vertical-align: top;
}

.data-table tbody tr:hover {
    background: var(--scholar-snow);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Article Header Improvements */
.article-header {
    background: linear-gradient(135deg, var(--scholar-snow) 0%, var(--scholar-white) 100%);
    border-bottom: 1px solid var(--scholar-cloud);
}

.article-meta {
    display: flex;
    align-items: center;
    gap: var(--scholar-space-4);
    margin-bottom: var(--scholar-space-4);
}

.article-category {
    background: var(--scholar-accent);
    color: white;
    padding: var(--scholar-space-1) var(--scholar-space-3);
    border-radius: var(--scholar-radius);
    font-size: var(--scholar-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-date {
    color: var(--scholar-slate);
    font-size: var(--scholar-text-sm);
}

.article-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scholar-space-6);
}

.article-stats .stat {
    display: flex;
    flex-direction: column;
    gap: var(--scholar-space-1);
}

.article-stats .stat::before {
    content: attr(data-label);
    font-size: var(--scholar-text-xs);
    color: var(--scholar-slate);
    letter-spacing: 0.05em;
}

/* Blockquote Styling */
blockquote {
    border-left: 4px solid var(--scholar-accent);
    padding-left: var(--scholar-space-6);
    margin: var(--scholar-space-8) 0;
    color: var(--scholar-slate);
    font-style: italic;
}

blockquote p {
    font-size: var(--scholar-text-lg);
    line-height: 1.6;
}

/* Article Title and Subtitle */
.article-title {
    font-size: var(--scholar-text-4xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--scholar-ink);
    margin-bottom: var(--scholar-space-4);
}

.article-subtitle {
    font-size: var(--scholar-text-xl);
    color: var(--scholar-slate);
    line-height: 1.5;
    margin-bottom: var(--scholar-space-6);
    max-width: 800px;
}

/* Article Lead Paragraph */
article .lead {
    font-size: var(--scholar-text-lg);
    line-height: 1.7;
    color: var(--scholar-slate);
    margin-bottom: var(--scholar-space-8);
    max-width: 75ch;
}

article .lead a {
    color: var(--scholar-orange);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

article .lead a:hover {
    border-bottom-color: var(--scholar-orange);
}

/* Section Headings */
article h2 {
    font-size: var(--scholar-text-2xl);
    font-weight: 600;
    color: var(--scholar-ink);
    margin-top: var(--scholar-space-12);
    margin-bottom: var(--scholar-space-4);
    padding-bottom: var(--scholar-space-2);
    border-bottom: 2px solid var(--scholar-cloud);
}

article h3 {
    font-size: var(--scholar-text-xl);
    font-weight: 600;
    color: var(--scholar-ink);
    margin-top: var(--scholar-space-8);
    margin-bottom: var(--scholar-space-3);
}

/* Article Lists */
article ul, article ol {
    margin: var(--scholar-space-4) 0;
    padding-left: var(--scholar-space-6);
}

article li {
    margin-bottom: var(--scholar-space-2);
    line-height: 1.7;
}

article li strong {
    color: var(--scholar-ink);
    font-weight: 600;
}

/* Mermaid Chart Container */
.mermaid-container {
    background: #120E0A;
    border-radius: var(--scholar-radius);
    padding: var(--scholar-space-10);
    margin: var(--scholar-space-10) 0;
    overflow-x: auto;
    min-height: 600px;
}

.mermaid-container .mermaid {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    min-height: 550px;
}

/* Fix mermaid text contrast */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    stroke-width: 2px;
}

.mermaid .edgeLabel {
    background-color: #120E0A !important;
}

.mermaid .label {
    font-family: var(--scholar-font-body) !important;
}

/* Article Content Container */
article {
    max-width: var(--scholar-max-content);
    margin: 0 auto;
    padding: var(--scholar-space-8) var(--scholar-space-6);
}

/* Paragraph Spacing */
article p {
    margin-bottom: var(--scholar-space-4);
    line-height: 1.8;
    color: var(--scholar-slate);
}

/* Emphasis and Strong */
article strong {
    color: var(--scholar-ink);
    font-weight: 600;
}

article em {
    font-style: italic;
}

/* Horizontal Rule */
article hr {
    border: none;
    height: 1px;
    background: var(--scholar-cloud);
    margin: var(--scholar-space-10) 0;
}

/* Methodology Box */
article > div[style*="background-color"] {
    border-left: 4px solid var(--scholar-accent);
}

article > div[style*="background-color"] h3 {
    margin-top: 0;
    border-bottom: none;
}

/* Article Stats */
.article-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scholar-space-8);
    margin-top: var(--scholar-space-6);
}

.article-stats .stat {
    font-size: var(--scholar-text-sm);
    font-weight: 600;
    color: var(--scholar-ink);
    letter-spacing: 0.05em;
}

/* Enhanced Article Header with Better Contrast */
.article-header {
    background: linear-gradient(135deg, #120E0A 0%, #1A150F 50%, #2A1E14 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.article-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.article-header .article-title {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.article-header .article-subtitle {
    color: rgba(255,255,255,0.85);
}

.article-header .article-category {
    background: rgba(255,107,53,0.9);
    color: #ffffff;
}

.article-header .article-date {
    color: rgba(255,255,255,0.7);
}

.article-header .article-stats .stat {
    color: rgba(255,255,255,0.9);
    border-left: 2px solid rgba(255,107,53,0.6);
    padding-left: var(--scholar-space-3);
}

/* Abstract Hero Image Container */
.article-hero-image {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #120E0A 0%, #1A150F 100%);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--scholar-space-8);
    border-radius: var(--scholar-radius);
}

.article-hero-image svg {
    width: 100%;
    height: 100%;
}

/* Side-by-Side Article Header Layout */
.article-header-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scholar-space-8);
    max-width: var(--scholar-max-content);
    margin: 0 auto;
    padding: var(--scholar-space-12) var(--scholar-space-6);
}

.article-header-content {
    flex: 1;
    max-width: 600px;
}

.article-header-visual {
    flex: 0 0 1000px;
    height: 650px;
}

.article-header-visual svg {
    width: 100%;
    height: 100%;
}

/* Responsive: stack on tablet */
@media (max-width: 1400px) {
    .article-header-visual {
        flex: 0 0 850px;
        height: 550px;
    }
}

@media (max-width: 1024px) {
    .article-header-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--scholar-space-8);
    }
    
    .article-header-content {
        max-width: 100%;
    }
    
    .article-header-visual {
        flex: 0 0 auto;
        width: 100%;
        max-width: 900px;
        height: 550px;
        margin: 0 auto;
    }
}

/* Mobile screens */
@media (max-width: 640px) {
    .article-header-visual {
        width: 100%;
        max-width: 100%;
        height: 380px;
    }
}

/* ==========================================================================
   CLEANER LANDING PAGE STYLES
   More spacious layout with better visual hierarchy
   ========================================================================== */

/* Featured Article Section */
.featured-section {
    padding-top: var(--scholar-space-16);
    padding-bottom: var(--scholar-space-16);
}

.featured-article-link {
    text-decoration: none;
    display: block;
}

.featured-article {
    background: var(--scholar-white);
    border: 1px solid var(--scholar-steam);
    border-radius: var(--scholar-radius-lg);
    padding: var(--scholar-space-10);
    transition: all var(--scholar-transition-fast);
}

.featured-article:hover {
    border-color: var(--scholar-orange);
    box-shadow: var(--scholar-shadow-md);
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: var(--scholar-space-3);
    margin-bottom: var(--scholar-space-4);
}

.featured-category {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-orange);
    text-transform: uppercase;
    letter-spacing: var(--scholar-tracking-widest);
}

.featured-date {
    font-size: var(--scholar-text-xs);
    color: var(--scholar-graphite);
}

.featured-title {
    font-size: var(--scholar-text-3xl);
    font-weight: var(--scholar-font-bold);
    color: var(--scholar-ink);
    line-height: var(--scholar-leading-tight);
    margin-bottom: var(--scholar-space-4);
    max-width: 800px;
}

.featured-excerpt {
    font-size: var(--scholar-text-lg);
    color: var(--scholar-graphite);
    line-height: var(--scholar-leading-relaxed);
    margin-bottom: var(--scholar-space-6);
    max-width: 700px;
}

.featured-stats {
    display: flex;
    gap: var(--scholar-space-6);
    margin-bottom: var(--scholar-space-6);
}

.featured-stats .stat {
    font-size: var(--scholar-text-sm);
    font-weight: var(--scholar-font-medium);
    color: var(--scholar-graphite);
    letter-spacing: var(--scholar-tracking-wide);
}

.featured-cta {
    font-size: var(--scholar-text-base);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-orange);
}

/* Series Section */
.series-section {
    background: var(--scholar-snow);
    padding-top: var(--scholar-space-20);
    padding-bottom: var(--scholar-space-20);
}

.series-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--scholar-space-6);
}

.series-card {
    display: flex;
    background: var(--scholar-white);
    border-radius: var(--scholar-radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: all var(--scholar-transition-fast);
    border: 1px solid var(--scholar-steam);
    height: 100%;
}

.series-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--scholar-shadow-lg);
    border-color: var(--scholar-silver);
}

.series-accent {
    width: 4px;
    flex-shrink: 0;
}

.series-content {
    display: flex;
    flex-direction: column;
    padding: var(--scholar-space-6);
    flex: 1;
}

.series-meta {
    display: flex;
    align-items: center;
    gap: var(--scholar-space-3);
    margin-bottom: var(--scholar-space-3);
}

.series-category {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-graphite);
    letter-spacing: var(--scholar-tracking-wide);
}

.series-badge {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-medium);
    color: var(--scholar-slate);
    background: var(--scholar-snow);
    padding: var(--scholar-space-0-5) var(--scholar-space-2);
    border-radius: var(--scholar-radius-sm);
}

.series-title {
    font-size: var(--scholar-text-xl);
    font-weight: var(--scholar-font-bold);
    color: var(--scholar-ink);
    margin-bottom: var(--scholar-space-3);
    letter-spacing: var(--scholar-tracking-tight);
}

.series-description {
    font-size: var(--scholar-text-sm);
    color: var(--scholar-graphite);
    line-height: var(--scholar-leading-relaxed);
    margin-bottom: 0;
}

/* Product Grid Enhancements */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--scholar-space-6);
}

/* Note: .product-card, .product-tag, .product-name, .product-description styles 
   are defined earlier in the file (around line 608) */

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .series-grid {
        grid-template-columns: 1fr;
    }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .featured-title {
        font-size: var(--scholar-text-2xl);
    }
}

@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .featured-article {
        padding: var(--scholar-space-6);
    }
    
    .featured-title {
        font-size: var(--scholar-text-xl);
    }
    
    .series-card {
        flex-direction: column;
    }
    
    .series-accent {
        width: 100%;
        height: 4px;
    }
}

/* ==========================================================================
   RESEARCH PAGE STYLES
   Clean, categorized layout for research publications
   ========================================================================== */

.research-category {
    margin-bottom: var(--scholar-space-20);
}

.research-category:last-child {
    margin-bottom: 0;
}

.category-header {
    margin-bottom: var(--scholar-space-8);
}

.category-eyebrow {
    display: block;
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-orange);
    text-transform: uppercase;
    letter-spacing: var(--scholar-tracking-widest);
    margin-bottom: var(--scholar-space-2);
}

.category-header h2 {
    font-size: var(--scholar-text-3xl);
    font-weight: var(--scholar-font-bold);
    color: var(--scholar-ink);
}

/* Research Cards */
.research-card {
    display: block;
    text-decoration: none;
    background: var(--scholar-white);
    border: 1px solid var(--scholar-steam);
    border-radius: var(--scholar-radius-lg);
    overflow: hidden;
    transition: all var(--scholar-transition-fast);
}

.research-card:hover {
    border-color: var(--scholar-silver);
    box-shadow: var(--scholar-shadow-lg);
    transform: translateY(-2px);
}

.research-card.featured {
    padding: var(--scholar-space-10);
}

.research-card.series {
    display: flex;
}

.research-card.series article {
    display: flex;
    width: 100%;
}

.research-accent {
    width: 4px;
    flex-shrink: 0;
}

.research-content {
    padding: var(--scholar-space-6);
    flex: 1;
}

/* Research Meta */
.research-meta {
    display: flex;
    align-items: center;
    gap: var(--scholar-space-3);
    margin-bottom: var(--scholar-space-3);
}

.research-category {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-graphite);
    letter-spacing: var(--scholar-tracking-wide);
}

.research-date {
    font-size: var(--scholar-text-xs);
    color: var(--scholar-slate);
}

.research-badge {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-medium);
    color: var(--scholar-slate);
    background: var(--scholar-snow);
    padding: var(--scholar-space-0-5) var(--scholar-space-2);
    border-radius: var(--scholar-radius-sm);
}

/* Research Title */
.research-title {
    font-size: var(--scholar-text-2xl);
    font-weight: var(--scholar-font-bold);
    color: var(--scholar-ink);
    line-height: var(--scholar-leading-tight);
    margin-bottom: var(--scholar-space-3);
}

.research-card.featured .research-title {
    font-size: var(--scholar-text-3xl);
    margin-bottom: var(--scholar-space-4);
}

.research-card.series .research-title {
    font-size: var(--scholar-text-xl);
    letter-spacing: var(--scholar-tracking-tight);
}

/* Research Excerpt */
.research-excerpt {
    font-size: var(--scholar-text-base);
    color: var(--scholar-graphite);
    line-height: var(--scholar-leading-relaxed);
    margin-bottom: var(--scholar-space-4);
}

.research-card.featured .research-excerpt {
    font-size: var(--scholar-text-lg);
    max-width: 700px;
}

.research-card.series .research-excerpt {
    font-size: var(--scholar-text-sm);
}

/* Research Stats */
.research-stats {
    display: flex;
    gap: var(--scholar-space-6);
}

.research-stats.compact {
    gap: var(--scholar-space-4);
}

.research-stats .stat {
    font-size: var(--scholar-text-sm);
    font-weight: var(--scholar-font-medium);
    color: var(--scholar-slate);
    letter-spacing: var(--scholar-tracking-wide);
}

.research-stats.compact .stat {
    font-size: var(--scholar-text-xs);
}

/* Research Grid */
.research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--scholar-space-6);
}

/* Responsive */
@media (max-width: 1024px) {
    .research-grid {
        grid-template-columns: 1fr;
    }
    
    .research-card.featured {
        padding: var(--scholar-space-6);
    }
    
    .research-card.featured .research-title {
        font-size: var(--scholar-text-2xl);
    }
}

@media (max-width: 640px) {
    .research-card.series article {
        flex-direction: column;
    }
    
    .research-accent {
        width: 100%;
        height: 4px;
    }
    
    .category-header h2 {
        font-size: var(--scholar-text-2xl);
    }
}

/* ==========================================================================
   LANDING PAGE ENHANCEMENTS
   Styles for rearchitected index.html
   ========================================================================== */

/* Hero CTAs */
.hero-ctas {
    display: flex;
    gap: var(--scholar-space-4);
    margin-top: var(--scholar-space-8);
    justify-content: center;
}

.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    padding: var(--scholar-space-4) var(--scholar-space-6);
    background: var(--scholar-orange);
    color: var(--scholar-white);
    font-size: var(--scholar-text-base);
    font-weight: var(--scholar-font-semibold);
    border-radius: var(--scholar-radius);
    text-decoration: none;
    transition: all var(--scholar-transition-fast);
}

.hero-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--scholar-shadow-lg);
    background: var(--scholar-ember);
    color: var(--scholar-white) !important;
    text-decoration: none !important;
}

.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: var(--scholar-space-4) var(--scholar-space-6);
    background: transparent;
    color: var(--scholar-ink);
    font-size: var(--scholar-text-base);
    font-weight: var(--scholar-font-semibold);
    border: 1.5px solid var(--scholar-steam);
    border-radius: var(--scholar-radius);
    text-decoration: none;
    transition: all var(--scholar-transition-fast);
}

.hero-cta-secondary:hover {
    border-color: var(--scholar-orange);
    color: var(--scholar-orange);
}

/* Value Proposition Grid */
.value-prop-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--scholar-space-6);
    max-width: var(--asikm-container-max);
    margin: var(--scholar-space-12) auto 0;
    padding: 0 var(--scholar-space-6);
}

.value-prop-item {
    padding: var(--scholar-space-6);
    background: var(--scholar-white);
    border: 1px solid var(--scholar-steam);
    border-radius: var(--scholar-radius);
    border-top: 3px solid var(--scholar-orange);
}

.value-prop-item h3 {
    font-size: var(--scholar-text-lg);
    font-weight: var(--scholar-font-bold);
    color: var(--scholar-ink);
    margin-bottom: var(--scholar-space-2);
}

.value-prop-item p {
    font-size: var(--scholar-text-sm);
    color: var(--scholar-graphite);
    line-height: var(--scholar-leading-relaxed);
    margin-bottom: var(--scholar-space-3);
}

.value-prop-tag {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-medium);
    color: var(--scholar-slate);
    font-style: italic;
}

/* Featured Article Methodology */
.featured-methodology {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scholar-space-3);
    margin-bottom: var(--scholar-space-6);
}

.methodology-item {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-medium);
    color: var(--scholar-slate);
    background: var(--scholar-snow);
    padding: var(--scholar-space-1) var(--scholar-space-3);
    border-radius: var(--scholar-radius-sm);
    border: 1px solid var(--scholar-steam);
}

/* Product Category Labels */
.product-category {
    display: inline-block;
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-slate);
    text-transform: uppercase;
    letter-spacing: var(--scholar-tracking-wider);
    margin-bottom: var(--scholar-space-2);
    margin-right: var(--scholar-space-2);
}

/* Series Specifications */
.series-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scholar-space-3);
    margin-top: var(--scholar-space-4);
    padding-top: var(--scholar-space-4);
    border-top: 1px solid var(--scholar-steam);
}

.series-specs .spec {
    font-size: var(--scholar-text-xs);
    font-weight: var(--scholar-font-medium);
    color: var(--scholar-slate);
    font-family: var(--scholar-font-mono);
}

/* Philosophy Section */
.philosophy-section {
    background: var(--scholar-snow);
    padding-top: var(--scholar-space-16);
    padding-bottom: var(--scholar-space-16);
}

.philosophy-content {
    max-width: 900px;
}

.philosophy-lead {
    font-size: var(--scholar-text-lg);
    color: var(--scholar-graphite);
    line-height: var(--scholar-leading-relaxed);
    margin-bottom: var(--scholar-space-8);
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--scholar-space-8);
    margin-bottom: var(--scholar-space-8);
}

.comparison-column h3 {
    font-size: var(--scholar-text-lg);
    font-weight: var(--scholar-font-bold);
    color: var(--scholar-ink);
    margin-bottom: var(--scholar-space-4);
}

.comparison-column ul {
    list-style: none;
    padding: 0;
}

.comparison-column li {
    font-size: var(--scholar-text-base);
    color: var(--scholar-graphite);
    padding: var(--scholar-space-2) 0;
    padding-left: var(--scholar-space-6);
    position: relative;
}

.comparison-column li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--scholar-orange);
}

.philosophy-cta {
    display: inline-flex;
    font-size: var(--scholar-text-base);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-orange);
    text-decoration: none;
}

.philosophy-cta:hover {
    text-decoration: underline;
}

/* Careers Section */
.careers-section {
    background: var(--scholar-white);
    padding-top: var(--scholar-space-16);
    padding-bottom: var(--scholar-space-16);
    border-top: 1px solid var(--scholar-steam);
}

.careers-empty-state {
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    padding: var(--scholar-space-10);
    background: var(--scholar-snow);
    border-radius: var(--scholar-radius-lg);
    border: 2px dashed var(--scholar-steam);
}

.careers-message {
    font-size: var(--scholar-text-lg);
    font-weight: var(--scholar-font-semibold);
    color: var(--scholar-ink);
    margin-bottom: var(--scholar-space-4);
}

.careers-submessage {
    font-size: var(--scholar-text-base);
    color: var(--scholar-graphite);
    margin-bottom: var(--scholar-space-6);
}

.careers-domains {
    list-style: none;
    padding: 0;
    margin-bottom: var(--scholar-space-6);
}

.careers-domains li {
    font-size: var(--scholar-text-sm);
    color: var(--scholar-slate);
    padding: var(--scholar-space-1) 0;
}

.careers-actions {
    margin-bottom: var(--scholar-space-4);
}

.careers-cta {
    display: inline-flex;
    padding: var(--scholar-space-3) var(--scholar-space-6);
    background: var(--scholar-ink);
    color: var(--scholar-white);
    font-size: var(--scholar-text-sm);
    font-weight: var(--scholar-font-semibold);
    border-radius: var(--scholar-radius);
    text-decoration: none;
    transition: all var(--scholar-transition-fast);
}

.careers-cta:hover {
    background: var(--scholar-graphite);
}

.careers-contact {
    font-size: var(--scholar-text-sm);
    color: var(--scholar-slate);
    font-family: var(--scholar-font-mono);
}

/* Section Subtitle */
.section-subtitle {
    font-size: var(--scholar-text-lg);
    color: var(--scholar-graphite);
    margin-top: var(--scholar-space-2);
    max-width: 600px;
}

/* Responsive for new sections */
@media (max-width: 1024px) {
    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    .value-prop-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: var(--scholar-space-6);
    }
}

@media (max-width: 640px) {
    .hero-ctas {
        width: 100%;
    }
    
    .hero-cta-primary,
    .hero-cta-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .featured-methodology {
        flex-direction: column;
        gap: var(--scholar-space-2);
    }
    
    .methodology-item {
        width: fit-content;
    }
}

/* ==========================================================================
   DEEP THOUGHT VISUALIZATION — Hero Background
   Ported from ASIKIM Deeper Insight thinking screen
   ========================================================================== */

/* Container — always visible as hero background */
.hero-thinking-bg {
  position: absolute;
  inset: 0;
  background: #050404;
  z-index: 0;
  overflow: hidden;
  perspective: 1800px;
}

/* Layered aurora nebula — 8 gradient layers */
.hero-thinking-bg::before {
  content: "";
  position: absolute;
  inset: -60%;
  background:
    radial-gradient(ellipse 80% 55% at 20% 15%, rgba(212,124,42,0.07), transparent),
    radial-gradient(ellipse 65% 70% at 80% 55%, rgba(60,154,150,0.05), transparent),
    radial-gradient(ellipse 55% 45% at 50% 25%, rgba(176,74,58,0.04), transparent),
    radial-gradient(ellipse 95% 75% at 45% 50%, rgba(239,231,211,0.015), transparent),
    radial-gradient(ellipse 45% 85% at 35% 75%, rgba(90,60,140,0.03), transparent),
    radial-gradient(ellipse 60% 40% at 72% 18%, rgba(42,100,160,0.025), transparent),
    radial-gradient(ellipse 70% 50% at 60% 70%, rgba(180,140,60,0.018), transparent),
    radial-gradient(ellipse 40% 65% at 25% 55%, rgba(100,180,140,0.015), transparent);
  animation: dt-aurora 80s ease-in-out infinite alternate;
  filter: blur(70px);
  pointer-events: none;
}

/* Grain texture overlay */
.hero-thinking-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Scene container — flex centers all absolute children.
   translateY(-12%) shifts the visual focal point upward. */
.hero-thinking-bg .ld-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-28%);
  animation: dt-fade-in 1.5s ease-out both;
}

/* Inner nebula */
.hero-thinking-bg .ld-nebula {
  position: absolute;
  width: 160%;
  height: 160%;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(212,124,42,0.04), transparent 55%),
    radial-gradient(ellipse 70% 38% at 32% 58%, rgba(60,154,150,0.025), transparent 50%),
    radial-gradient(ellipse 38% 60% at 68% 38%, rgba(176,74,58,0.018), transparent 50%),
    radial-gradient(ellipse 28% 28% at 50% 50%, rgba(239,231,211,0.03), transparent 35%),
    radial-gradient(ellipse 55% 35% at 58% 62%, rgba(90,60,140,0.015), transparent 45%),
    radial-gradient(ellipse 42% 48% at 40% 35%, rgba(180,140,60,0.012), transparent 40%);
  animation: dt-nebula-drift 100s ease-in-out infinite alternate;
  filter: blur(50px);
  pointer-events: none;
  opacity: 0.85;
}

/* Secondary nebula — counter-rotating */
.hero-thinking-bg .ld-nebula2 {
  position: absolute;
  width: 140%;
  height: 140%;
  background:
    radial-gradient(ellipse 60% 35% at 65% 40%, rgba(42,100,160,0.02), transparent 50%),
    radial-gradient(ellipse 35% 55% at 35% 65%, rgba(212,124,42,0.015), transparent 45%),
    radial-gradient(ellipse 45% 45% at 55% 30%, rgba(100,180,140,0.012), transparent 40%);
  animation: dt-nebula-drift 120s ease-in-out infinite alternate-reverse;
  filter: blur(55px);
  pointer-events: none;
  opacity: 0.6;
}

/* Canvas for particle field */
.hero-thinking-bg .ld-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Expanding pulse rings */
.hero-thinking-bg .ld-pulse {
  position: absolute;
  width: min(88vw, 780px);
  height: min(88vw, 780px);
  border-radius: 50%;
  border: 1px solid rgba(212,124,42,0.045);
  animation: dt-pulse 22s ease-out infinite;
  pointer-events: none;
}
.hero-thinking-bg .ld-pulse.p2 { animation-delay: -4.4s; border-color: rgba(60,154,150,0.03); }
.hero-thinking-bg .ld-pulse.p3 { animation-delay: -8.8s; border-color: rgba(239,231,211,0.022); }
.hero-thinking-bg .ld-pulse.p4 { animation-delay: -13.2s; border-color: rgba(90,60,140,0.018); }
.hero-thinking-bg .ld-pulse.p5 { animation-delay: -17.6s; border-color: rgba(176,74,58,0.015); }

/* Bloom glow */
.hero-thinking-bg .ld-bloom {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,124,42,0.06) 0%, rgba(212,124,42,0.02) 30%, rgba(60,154,150,0.008) 50%, transparent 70%);
  animation: dt-bloom 14s ease-in-out infinite;
  pointer-events: none;
  filter: blur(8px);
}

/* Lens flare */
.hero-thinking-bg .ld-flare {
  position: absolute;
  width: 420px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,124,42,0.008) 12%, rgba(239,231,211,0.06) 38%, rgba(239,231,211,0.12) 50%, rgba(239,231,211,0.06) 62%, rgba(212,124,42,0.008) 88%, transparent 100%);
  animation: dt-flare 18s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Corona */
.hero-thinking-bg .ld-corona {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 75% 35% at 50% 50%, rgba(212,124,42,0.04), transparent),
    radial-gradient(ellipse 35% 75% at 50% 50%, rgba(60,154,150,0.02), transparent),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(239,231,211,0.008), transparent);
  animation: dt-corona 60s linear infinite;
  pointer-events: none;
}

/* Core glow sphere */
.hero-thinking-bg .ld-core {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,231,211,0.95) 0%, rgba(212,124,42,0.85) 20%, rgba(212,124,42,0.35) 45%, transparent 70%);
  box-shadow:
    0 0 8px rgba(239,231,211,0.6),
    0 0 25px rgba(212,124,42,0.45),
    0 0 70px rgba(212,124,42,0.2),
    0 0 140px rgba(212,124,42,0.08),
    0 0 250px rgba(212,124,42,0.03),
    0 0 400px rgba(212,124,42,0.012);
  animation: dt-core-breathe 12s ease-in-out infinite;
}

/* 8 concentric orbit rings */
.hero-thinking-bg .ld-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  transform-style: preserve-3d;
}
.hero-thinking-bg .ld-orbit.o1 {
  width: min(12vw, 80px); height: min(12vw, 80px);
  border-color: rgba(212,124,42,0.12);
  animation: dt-orbit-1 45s linear infinite;
  transform: rotateX(68deg) rotateZ(0deg);
}
.hero-thinking-bg .ld-orbit.o2 {
  width: min(22vw, 150px); height: min(22vw, 150px);
  border-color: rgba(60,154,150,0.08);
  animation: dt-orbit-2 68s linear infinite reverse;
  transform: rotateX(73deg) rotateZ(30deg);
}
.hero-thinking-bg .ld-orbit.o3 {
  width: min(32vw, 230px); height: min(32vw, 230px);
  border-color: rgba(239,231,211,0.055);
  animation: dt-orbit-3 95s linear infinite;
  transform: rotateX(55deg) rotateZ(-18deg);
}
.hero-thinking-bg .ld-orbit.o4 {
  width: min(44vw, 320px); height: min(44vw, 320px);
  border-color: rgba(176,74,58,0.04);
  animation: dt-orbit-4 128s linear infinite reverse;
  transform: rotateX(80deg) rotateZ(50deg);
}
.hero-thinking-bg .ld-orbit.o5 {
  width: min(56vw, 420px); height: min(56vw, 420px);
  border-color: rgba(90,60,140,0.03);
  border-style: dashed;
  animation: dt-orbit-5 160s linear infinite;
  transform: rotateX(62deg) rotateZ(-38deg);
}
.hero-thinking-bg .ld-orbit.o6 {
  width: min(68vw, 520px); height: min(68vw, 520px);
  border-color: rgba(42,100,160,0.022);
  border-style: dotted;
  animation: dt-orbit-6 195s linear infinite reverse;
  transform: rotateX(86deg) rotateZ(65deg);
}
.hero-thinking-bg .ld-orbit.o7 {
  width: min(80vw, 640px); height: min(80vw, 640px);
  border-color: rgba(180,140,60,0.016);
  animation: dt-orbit-7 240s linear infinite;
  transform: rotateX(58deg) rotateZ(-55deg);
}
.hero-thinking-bg .ld-orbit.o8 {
  width: min(92vw, 780px); height: min(92vw, 780px);
  border-color: rgba(100,180,140,0.01);
  border-style: dashed;
  animation: dt-orbit-8 300s linear infinite reverse;
  transform: rotateX(82deg) rotateZ(78deg);
}

/* Motes with comet tails */
.hero-thinking-bg .ld-mote {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(212,124,42,0.8);
  box-shadow: 0 0 8px rgba(212,124,42,0.45), 0 0 18px rgba(212,124,42,0.15);
}
.hero-thinking-bg .ld-mote::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 28px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to left, currentColor, transparent);
  opacity: 0.4;
}
.hero-thinking-bg .ld-orbit.o1 .ld-mote { top: -1px; left: 50%; color: rgba(212,124,42,0.55); }
.hero-thinking-bg .ld-orbit.o2 .ld-mote { top: -1px; left: 50%; background: rgba(60,154,150,0.7); box-shadow: 0 0 8px rgba(60,154,150,0.4); color: rgba(60,154,150,0.45); }
.hero-thinking-bg .ld-orbit.o3 .ld-mote { top: -1px; left: 50%; background: rgba(239,231,211,0.5); box-shadow: 0 0 8px rgba(239,231,211,0.25); color: rgba(239,231,211,0.35); }
.hero-thinking-bg .ld-orbit.o4 .ld-mote { top: -1px; left: 50%; background: rgba(176,74,58,0.5); box-shadow: 0 0 7px rgba(176,74,58,0.28); color: rgba(176,74,58,0.35); }
.hero-thinking-bg .ld-orbit.o5 .ld-mote { bottom: -1px; left: 50%; background: rgba(90,60,140,0.45); box-shadow: 0 0 7px rgba(90,60,140,0.22); color: rgba(90,60,140,0.3); }
.hero-thinking-bg .ld-orbit.o7 .ld-mote { top: -1px; left: 30%; background: rgba(180,140,60,0.35); box-shadow: 0 0 6px rgba(180,140,60,0.18); color: rgba(180,140,60,0.22); }

/* Radial scan sweep */
.hero-thinking-bg .ld-scan {
  position: absolute;
  width: min(82vw, 700px);
  height: min(82vw, 700px);
  border-radius: 50%;
  overflow: hidden;
  animation: dt-scan-rotate 45s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.35;
}
.hero-thinking-bg .ld-scan::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 50%;
  transform-origin: bottom left;
  background: conic-gradient(from 0deg, transparent, rgba(212,124,42,0.04) 10deg, transparent 25deg);
}
.hero-thinking-bg .ld-scan::after {
  content: "";
  position: absolute;
  bottom: 0; right: 50%;
  width: 50%; height: 50%;
  transform-origin: top right;
  background: conic-gradient(from 180deg, transparent, rgba(60,154,150,0.022) 7deg, transparent 18deg);
}

/* Corner attribution */
.thinking-attribution {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(212,124,42,0.4);
  z-index: 2;
  pointer-events: none;
  font-family: var(--scholar-font-mono, monospace);
}

/* ── Deep Thought Keyframes ── */
@keyframes dt-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  15%  { transform: translate3d(35px, -22px, 0) rotate(2.5deg) scale(1.05); }
  35%  { transform: translate3d(-22px, 28px, 0) rotate(-3.5deg) scale(0.96); }
  55%  { transform: translate3d(28px, 15px, 0) rotate(4.5deg) scale(1.04); }
  75%  { transform: translate3d(-30px, -18px, 0) rotate(-2.5deg) scale(1.06); }
  100% { transform: translate3d(15px, -10px, 0) rotate(1.5deg) scale(0.97); }
}
@keyframes dt-nebula-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.75; }
  20%  { transform: translate3d(-15px, 10px, 0) rotate(-2deg); opacity: 0.9; }
  45%  { transform: translate3d(10px, -8px, 0) rotate(2.5deg); opacity: 0.78; }
  70%  { transform: translate3d(-8px, 15px, 0) rotate(-0.8deg); opacity: 0.92; }
  100% { transform: translate3d(5px, -4px, 0) rotate(1.2deg); opacity: 0.82; }
}
@keyframes dt-core-breathe {
  0%   { transform: scale(1);   opacity: 0.8;  box-shadow: 0 0 8px rgba(239,231,211,0.6), 0 0 25px rgba(212,124,42,0.45), 0 0 70px rgba(212,124,42,0.2),  0 0 140px rgba(212,124,42,0.08), 0 0 250px rgba(212,124,42,0.03), 0 0 400px rgba(212,124,42,0.012); }
  30%  { transform: scale(1.8); opacity: 1;    box-shadow: 0 0 12px rgba(239,231,211,0.75), 0 0 35px rgba(212,124,42,0.55), 0 0 90px rgba(212,124,42,0.25), 0 0 180px rgba(212,124,42,0.1),  0 0 300px rgba(212,124,42,0.04), 0 0 500px rgba(212,124,42,0.015); }
  60%  { transform: scale(0.6); opacity: 0.55; box-shadow: 0 0 6px rgba(239,231,211,0.4),  0 0 18px rgba(212,124,42,0.32), 0 0 50px rgba(212,124,42,0.14), 0 0 100px rgba(212,124,42,0.05), 0 0 180px rgba(212,124,42,0.018), 0 0 300px rgba(212,124,42,0.008); }
  100% { transform: scale(1);   opacity: 0.8;  box-shadow: 0 0 8px rgba(239,231,211,0.6), 0 0 25px rgba(212,124,42,0.45), 0 0 70px rgba(212,124,42,0.2),  0 0 140px rgba(212,124,42,0.08), 0 0 250px rgba(212,124,42,0.03), 0 0 400px rgba(212,124,42,0.012); }
}
@keyframes dt-bloom {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  40%      { transform: scale(1.25); opacity: 0.9; }
  70%      { transform: scale(0.85); opacity: 0.5; }
}
@keyframes dt-flare {
  0%, 100% { transform: scaleX(1) scaleY(1);    opacity: 0.3; }
  25%      { transform: scaleX(1.4) scaleY(0.6); opacity: 0.6; }
  50%      { transform: scaleX(0.7) scaleY(1.2); opacity: 0.2; }
  75%      { transform: scaleX(1.2) scaleY(0.8); opacity: 0.5; }
}
@keyframes dt-corona {
  0%   { transform: rotate(0deg) scale(1);     opacity: 0.5; }
  25%  { transform: rotate(90deg) scale(1.18);  opacity: 0.72; }
  50%  { transform: rotate(180deg) scale(0.92); opacity: 0.52; }
  75%  { transform: rotate(270deg) scale(1.22);  opacity: 0.78; }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.5; }
}
@keyframes dt-pulse {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes dt-orbit-1 { 0% { transform: rotateX(68deg) rotateZ(0deg); }   100% { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes dt-orbit-2 { 0% { transform: rotateX(73deg) rotateZ(30deg); }  100% { transform: rotateX(73deg) rotateZ(390deg); } }
@keyframes dt-orbit-3 { 0% { transform: rotateX(55deg) rotateZ(-18deg); } 100% { transform: rotateX(55deg) rotateZ(342deg); } }
@keyframes dt-orbit-4 { 0% { transform: rotateX(80deg) rotateZ(50deg); }  100% { transform: rotateX(80deg) rotateZ(410deg); } }
@keyframes dt-orbit-5 { 0% { transform: rotateX(62deg) rotateZ(-38deg); } 100% { transform: rotateX(62deg) rotateZ(322deg); } }
@keyframes dt-orbit-6 { 0% { transform: rotateX(86deg) rotateZ(65deg); }  100% { transform: rotateX(86deg) rotateZ(425deg); } }
@keyframes dt-orbit-7 { 0% { transform: rotateX(58deg) rotateZ(-55deg); } 100% { transform: rotateX(58deg) rotateZ(305deg); } }
@keyframes dt-orbit-8 { 0% { transform: rotateX(82deg) rotateZ(78deg); }  100% { transform: rotateX(82deg) rotateZ(438deg); } }
@keyframes dt-scan-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes dt-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ==========================================================================
   HERO DARK THEME OVERRIDES
   When using the thinking animation background
   ========================================================================== */
.hero-section.hero-expanded {
  background: #050404;
}

.hero-section.hero-expanded .hero-badge {
  background-color: rgba(212,124,42,0.12);
  border-color: rgba(212,124,42,0.3);
  color: rgba(212,124,42,0.9);
}

.hero-section.hero-expanded .hero-badge::before {
  background-color: rgba(212,124,42,0.9);
}

.hero-section.hero-expanded .hero-tagline {
  color: rgba(239,231,211,0.95);
}

.hero-section.hero-expanded .hero-description {
  color: rgba(184,164,138,0.75);
}

.hero-section.hero-expanded .hero-cta-primary {
  background: rgba(212,124,42,0.85);
  color: #fff;
}

.hero-section.hero-expanded .hero-cta-primary:hover {
  background: rgba(212,124,42,1);
}

.hero-section.hero-expanded .hero-cta-secondary {
  color: rgba(239,231,211,0.8);
  border-color: rgba(239,231,211,0.15);
}

.hero-section.hero-expanded .hero-cta-secondary:hover {
  border-color: rgba(212,124,42,0.6);
  color: rgba(212,124,42,0.9);
}

.hero-section.hero-expanded .value-prop-item {
  background: rgba(239,231,211,0.04);
  border-color: rgba(239,231,211,0.08);
  border-top-color: rgba(212,124,42,0.4);
}

.hero-section.hero-expanded .value-prop-item h3 {
  color: rgba(239,231,211,0.9);
}

.hero-section.hero-expanded .value-prop-item p {
  color: rgba(184,164,138,0.6);
}

.hero-section.hero-expanded .value-prop-tag {
  color: rgba(184,164,138,0.45);
}

/* Override scholar.css reduced-motion kill-switch for the hero animation.
   scholar.css uses `* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }`
   which freezes everything. The thinking screen IS the hero — we restore
   animations with slowed-down durations as a gentler alternative. */
@media (prefers-reduced-motion: reduce) {
  .hero-thinking-bg::before {
    animation-duration: 160s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-scene {
    animation-duration: 1.5s !important;
    animation-iteration-count: 1 !important;
  }
  .hero-thinking-bg .ld-nebula {
    animation-duration: 200s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-nebula2 {
    animation-duration: 240s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-pulse {
    animation-duration: 44s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-bloom {
    animation-duration: 28s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-flare {
    animation-duration: 36s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-corona {
    animation-duration: 120s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-core {
    animation-duration: 24s !important;
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-orbit {
    animation-iteration-count: infinite !important;
  }
  .hero-thinking-bg .ld-orbit.o1 { animation-duration: 90s !important; }
  .hero-thinking-bg .ld-orbit.o2 { animation-duration: 136s !important; }
  .hero-thinking-bg .ld-orbit.o3 { animation-duration: 190s !important; }
  .hero-thinking-bg .ld-orbit.o4 { animation-duration: 256s !important; }
  .hero-thinking-bg .ld-orbit.o5 { animation-duration: 320s !important; }
  .hero-thinking-bg .ld-orbit.o6 { animation-duration: 390s !important; }
  .hero-thinking-bg .ld-orbit.o7 { animation-duration: 480s !important; }
  .hero-thinking-bg .ld-orbit.o8 { animation-duration: 600s !important; }
  .hero-thinking-bg .ld-scan {
    animation-duration: 90s !important;
    animation-iteration-count: infinite !important;
  }
}