/* =============================================
   FREYJA / 4ES — Cosmic Design System
   Vanilla CSS, no frameworks
============================================= */

/* ---- CUSTOM PROPERTIES ---- */

:root {
  /* Planet Nine Brand Palette */
  --p9-green:  #00cc00;
  --p9-pink:   #ee22ee;
  --p9-purple: #9922cc;
  --p9-yellow: #ffdd00;

  /* Space */
  --space-bg: #04040f;
  --space-surface: rgba(12, 12, 30, 0.75);
  --space-border: rgba(100, 120, 200, 0.18);
  --text-primary: #ffffff;
  --text-muted: rgba(220, 225, 255, 0.88);
  --text-dim: rgba(200, 210, 255, 0.65);

  /* Planets */
  --jupiter-a: #f0c070;
  --jupiter-b: #d08030;
  --jupiter-c: #a04820;
  --jupiter-d: #f8e8c0;
  --jupiter-e: #702010;
  --jupiter-storm: #cc3333;
  --jupiter-glow: rgba(220, 140, 60, 0.35);

  --saturn-a: #f0e0a0;
  --saturn-b: #c8a840;
  --saturn-c: #e0c870;
  --saturn-ring-a: rgba(230, 200, 130, 0.6);
  --saturn-ring-b: rgba(210, 175, 105, 0.35);
  --saturn-ring-c: rgba(250, 230, 170, 0.2);
  --saturn-glow: rgba(200, 170, 70, 0.3);

  --uranus-a: #a0f0f0;
  --uranus-b: #60d0d0;
  --uranus-c: #d0f8f8;
  --uranus-ring: rgba(160, 240, 240, 0.4);
  --uranus-glow: rgba(100, 210, 210, 0.35);

  --earth-ocean: #1460aa;
  --earth-land: #286840;
  --earth-cloud: rgba(240, 248, 255, 0.65);
  --earth-ice: rgba(220, 240, 255, 0.7);
  --earth-glow: rgba(40, 120, 200, 0.4);

  /* Typography */
  --font-display: 'Orbitron', 'Courier New', monospace;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing & radius */
  --radius-pill: 9999px;
  --radius-card: 1.25rem;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
}

/* ---- RESET ---- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--space-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ---- STARFIELD CANVAS ---- */

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---- GOOGLE FONTS ---- */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* ---- PLANET FLOAT KEYFRAME ---- */

@keyframes planetFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.08); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinSlower {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes cloudDrift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes stormSpin {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%       { transform: scale(1.18) rotate(180deg); opacity: 1; }
}

@keyframes titleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes revealFade {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- TOP NAV ---- */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: linear-gradient(to bottom, rgba(4,4,15,0.9), transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-home {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  opacity: 0.8;
  transition: opacity 0.2s;
}
.nav-home:hover { opacity: 1; }

.nav-planets {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  perspective: 200px;
}

.nav-dot {
  position: relative;
  border-radius: 50%;
  display: block;
  overflow: visible;
  opacity: 0.6;
  transition: transform 0.25s var(--ease-out-expo), opacity 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-dot:hover { transform: scale(1.35); opacity: 1; }
.nav-dot.active { opacity: 1; transform: scale(1.2); }

/* ---- JUPITER (Economy) ---- */
.nav-dot[data-e="economy"] {
  width: 26px;
  height: 26px;
  background: repeating-linear-gradient(
    180deg,
    var(--jupiter-e)  0px,  var(--jupiter-e)  3px,
    var(--jupiter-c)  3px,  var(--jupiter-c)  6px,
    var(--jupiter-b)  6px,  var(--jupiter-b) 10px,
    var(--jupiter-a) 10px,  var(--jupiter-a) 14px,
    var(--jupiter-d) 14px,  var(--jupiter-d) 17px,
    var(--jupiter-b) 17px,  var(--jupiter-b) 20px,
    var(--jupiter-c) 20px,  var(--jupiter-c) 23px,
    var(--jupiter-e) 23px,  var(--jupiter-e) 26px
  );
  box-shadow:
    inset -5px -3px 10px rgba(0,0,0,0.65),
    inset 3px 3px 6px rgba(255,220,140,0.18),
    0 0 10px rgba(220,140,60,0.35);
}
/* Great Red Spot */
.nav-dot[data-e="economy"]::after {
  content: '';
  position: absolute;
  width: 8px; height: 5px;
  background: radial-gradient(ellipse, var(--jupiter-storm) 0%, rgba(180,30,30,0.4) 100%);
  border-radius: 50%;
  top: 9px; left: 14px;
  filter: blur(0.8px);
}

/* ---- SATURN (Education) ---- */
.nav-dot[data-e="education"] {
  width: 22px;
  height: 22px;
  background: repeating-linear-gradient(
    180deg,
    var(--saturn-b)  0px,  var(--saturn-b)  5px,
    var(--saturn-a)  5px,  var(--saturn-a) 11px,
    var(--saturn-c) 11px,  var(--saturn-c) 16px,
    var(--saturn-b) 16px,  var(--saturn-b) 22px
  );
  box-shadow:
    inset -4px -2px 8px rgba(0,0,0,0.55),
    inset 2px 2px 5px rgba(255,245,200,0.25),
    0 0 8px rgba(200,168,64,0.3);
}
/* Ring */
.nav-dot[data-e="education"]::before {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  border: 2.5px solid rgba(230,200,130,0.6);
  border-radius: 50%;
  transform: rotateX(72deg);
  top: 50%; left: 50%;
  translate: -50% -50%;
}

/* ---- URANUS (Entertainment) ---- */
.nav-dot[data-e="entertainment"] {
  width: 24px;
  height: 24px;
  background: radial-gradient(ellipse at 38% 38%,
    var(--uranus-c) 0%, var(--uranus-a) 45%, var(--uranus-b) 80%, #30a8a8 100%);
  box-shadow:
    inset -4px -3px 8px rgba(0,0,0,0.4),
    inset 3px 3px 6px rgba(180,255,255,0.28),
    0 0 8px rgba(100,210,210,0.3);
}
/* Vertical ring */
.nav-dot[data-e="entertainment"]::before {
  content: '';
  position: absolute;
  width: 38px; height: 38px;
  border: 2px solid rgba(160,240,240,0.5);
  border-radius: 50%;
  transform: rotateY(72deg);
  top: 50%; left: 50%;
  translate: -50% -50%;
}

/* ---- EARTH (Environment) ---- */
.nav-dot[data-e="environment"] {
  width: 26px;
  height: 26px;
  background:
    radial-gradient(ellipse 30% 24% at 38% 42%, var(--earth-land), transparent),
    radial-gradient(ellipse 24% 30% at 62% 28%, var(--earth-land), transparent),
    radial-gradient(ellipse 20% 24% at 55% 68%, var(--earth-land), transparent),
    radial-gradient(circle, #1870cc 0%, var(--earth-ocean) 55%, #0a3870 100%);
  box-shadow:
    inset -5px -3px 10px rgba(0,0,0,0.6),
    inset 3px 3px 6px rgba(80,160,255,0.28),
    0 0 10px rgba(40,120,200,0.35);
}
/* Atmosphere rim */
.nav-dot[data-e="environment"]::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, rgba(60,130,220,0.32) 80%, transparent 100%);
}

/* ---- LANDING PAGE ---- */

.landing {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7rem 2rem 5rem;
}

/* intro */
.intro {
  text-align: center;
  margin-bottom: 6rem;
  animation: fadeUp 1s var(--ease-out-expo) both;
}

.freyja-eyebrow {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--p9-pink);
  margin-bottom: 1.25rem;
  text-shadow: 0 0 18px rgba(238, 34, 238, 0.6);
}

.landing-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 10rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg,
    var(--p9-green)  0%,
    #80ffee          20%,
    var(--p9-purple) 40%,
    var(--p9-pink)   60%,
    var(--p9-yellow) 80%,
    var(--p9-green)  100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 8s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(0, 204, 0, 0.25));
}

.tagline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}

.landing-tagline {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0;
  letter-spacing: 0.04em;
  max-width: 40ch;
  flex-shrink: 0;
}

.tagline-flank {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

.tagline-flank:hover {
  color: var(--p9-yellow);
  border-color: rgba(255, 221, 0, 0.45);
  box-shadow: 0 0 14px rgba(255, 221, 0, 0.18);
}

@media (max-width: 720px) {
  .tagline-flank { display: none; }
  .landing-tagline { margin-top: 0; }
}

/* planet grid */
.planets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem 7rem;
  max-width: 860px;
  width: 100%;
  animation: fadeUp 1s var(--ease-out-expo) 0.2s both;
}

@media (max-width: 640px) {
  .planets-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
}

.planet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out-expo);
}
.planet-card:hover { transform: translateY(-10px); }

.planet-card:hover .planet-glow {
  opacity: 1;
  transform: scale(1.15);
}

/* ---- PLANET SHARED ---- */

.planet-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.planet-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  filter: blur(28px);
  z-index: 0;
  animation: glowPulse 5s ease-in-out infinite;
  pointer-events: none;
}

.planet-sphere {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  flex-shrink: 0;
}

/* ---- JUPITER ---- */

.planet-wrap.jupiter { width: 160px; height: 160px; }

.planet-wrap.jupiter .planet-glow {
  background: radial-gradient(circle, var(--jupiter-glow) 0%, transparent 70%);
}

.planet-wrap.jupiter .planet-sphere {
  width: 160px;
  height: 160px;
  /* animation: spinSlow — rotation off */
  background:
    repeating-linear-gradient(
      180deg,
      var(--jupiter-e)  0px,   var(--jupiter-e)  9px,
      var(--jupiter-c) 9px,   var(--jupiter-c) 20px,
      var(--jupiter-b) 20px,  var(--jupiter-b) 31px,
      var(--jupiter-a) 31px,  var(--jupiter-a) 42px,
      var(--jupiter-d) 42px,  var(--jupiter-d) 51px,
      var(--jupiter-b) 51px,  var(--jupiter-b) 62px,
      var(--jupiter-c) 62px,  var(--jupiter-c) 73px,
      var(--jupiter-a) 73px,  var(--jupiter-a) 84px,
      var(--jupiter-e) 84px,  var(--jupiter-e) 93px,
      var(--jupiter-d) 93px,  var(--jupiter-d) 104px,
      var(--jupiter-b) 104px, var(--jupiter-b) 115px,
      var(--jupiter-c) 115px, var(--jupiter-c) 126px,
      var(--jupiter-a) 126px, var(--jupiter-a) 137px,
      var(--jupiter-e) 137px, var(--jupiter-e) 160px
    );
  box-shadow:
    inset -25px -12px 50px rgba(0,0,0,0.7),
    inset 12px 12px 30px rgba(255,220,140,0.18);
}

.jupiter-storm {
  position: absolute;
  width: 36px;
  height: 22px;
  background: radial-gradient(ellipse, var(--jupiter-storm) 0%, rgba(180,30,30,0.7) 55%, transparent 100%);
  border-radius: 50%;
  z-index: 2;
  top: 62px;
  left: 92px;
  filter: blur(2.5px);
  animation: stormSpin 9s ease-in-out infinite;
}

/* ---- SATURN ---- */

.planet-wrap.saturn { width: 220px; height: 200px; }

.planet-wrap.saturn .planet-glow {
  background: radial-gradient(circle, var(--saturn-glow) 0%, transparent 70%);
}

.planet-wrap.saturn .planet-sphere {
  width: 150px;
  height: 150px;
  background:
    repeating-linear-gradient(
      180deg,
      var(--saturn-b)  0px,  var(--saturn-b)  12px,
      var(--saturn-a)  12px, var(--saturn-a)  26px,
      var(--saturn-c)  26px, var(--saturn-c)  38px,
      var(--saturn-a)  38px, var(--saturn-a)  52px,
      var(--saturn-b)  52px, var(--saturn-b)  64px,
      var(--saturn-a)  64px, var(--saturn-a)  78px,
      var(--saturn-c)  78px, var(--saturn-c)  90px,
      var(--saturn-b)  90px, var(--saturn-b)  102px,
      var(--saturn-a)  102px,var(--saturn-a)  116px,
      var(--saturn-c)  116px,var(--saturn-c)  128px,
      var(--saturn-b)  128px,var(--saturn-b)  150px
    );
  /* animation: spinSlow — rotation off */
  box-shadow:
    inset -22px -10px 45px rgba(0,0,0,0.55),
    inset 10px 10px 25px rgba(255,245,200,0.25);
}

.saturn-ring-wrap {
  position: absolute;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.saturn-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  transform: rotateX(72deg);
}
.saturn-ring-1 {
  width: 200px; height: 200px;
  border-width: 10px;
  border-color: var(--saturn-ring-a);
}
.saturn-ring-2 {
  width: 225px; height: 225px;
  border-width: 7px;
  border-color: var(--saturn-ring-b);
}
.saturn-ring-3 {
  width: 248px; height: 248px;
  border-width: 5px;
  border-color: var(--saturn-ring-c);
}

/* ---- URANUS ---- */

.planet-wrap.uranus { width: 200px; height: 200px; }

.planet-wrap.uranus .planet-glow {
  background: radial-gradient(circle, var(--uranus-glow) 0%, transparent 70%);
}

.planet-wrap.uranus .planet-sphere {
  width: 140px;
  height: 140px;
  background:
    radial-gradient(ellipse at 38% 38%, var(--uranus-c) 0%, var(--uranus-a) 45%, var(--uranus-b) 80%, #30a8a8 100%);
  box-shadow:
    inset -18px -10px 35px rgba(0,0,0,0.45),
    inset 8px 8px 20px rgba(180, 255, 255, 0.35);
}

.uranus-ring-wrap {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

/* Uranus rings are nearly vertical — rotateY instead of rotateX */
.uranus-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  transform: rotateY(72deg);
}
.uranus-ring-1 {
  width: 185px; height: 185px;
  border-width: 5px;
  border-color: rgba(160, 240, 240, 0.45);
}
.uranus-ring-2 {
  width: 205px; height: 205px;
  border-width: 3px;
  border-color: rgba(160, 240, 240, 0.22);
}
.uranus-ring-3 {
  width: 222px; height: 222px;
  border-width: 2px;
  border-color: rgba(160, 240, 240, 0.12);
}

/* ---- EARTH ---- */

.planet-wrap.earth { width: 160px; height: 160px; }

.planet-wrap.earth .planet-glow {
  background: radial-gradient(circle, var(--earth-glow) 0%, transparent 70%);
}

.planet-wrap.earth .planet-sphere {
  width: 160px;
  height: 160px;
  background:
    radial-gradient(ellipse 28% 22% at 38% 42%, var(--earth-land), transparent),
    radial-gradient(ellipse 22% 28% at 62% 28%, var(--earth-land), transparent),
    radial-gradient(ellipse 18% 22% at 55% 68%, var(--earth-land), transparent),
    radial-gradient(ellipse 20% 14% at 22% 62%, var(--earth-land), transparent),
    radial-gradient(ellipse 14% 10% at 72% 58%, var(--earth-land), transparent),
    radial-gradient(circle, #1870cc 0%, var(--earth-ocean) 55%, #0a3870 100%);
  /* animation: spinSlower — rotation off */
  box-shadow:
    inset -22px -10px 45px rgba(0,0,0,0.6),
    inset 8px 8px 20px rgba(80, 160, 255, 0.3);
}

.earth-clouds {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 45% 10% at 50% 22%, var(--earth-cloud), transparent),
    radial-gradient(ellipse 32% 8%  at 28% 55%, var(--earth-cloud), transparent),
    radial-gradient(ellipse 50% 8%  at 68% 42%, var(--earth-cloud), transparent),
    radial-gradient(ellipse 28% 8%  at 45% 78%, var(--earth-cloud), transparent);
  /* animation: cloudDrift — rotation off */
  z-index: 2;
}

.earth-atmosphere {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 60%, rgba(60, 130, 220, 0.35) 80%, rgba(60, 130, 220, 0.08) 100%);
  z-index: 3;
}

/* ---- PLANET CARD LABELS ---- */

.planet-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.e-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.e-tag {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.planet-card[data-e="economy"]       .e-name { color: var(--p9-green);  text-shadow: 0 0 12px rgba(0,204,0,0.5); }
.planet-card[data-e="education"]     .e-name { color: var(--p9-purple); text-shadow: 0 0 12px rgba(153,34,204,0.5); }
.planet-card[data-e="entertainment"] .e-name { color: var(--p9-pink);   text-shadow: 0 0 12px rgba(238,34,238,0.5); }
.planet-card[data-e="environment"]   .e-name { color: var(--p9-yellow); text-shadow: 0 0 12px rgba(255,221,0,0.5); }

/* ---- DETAIL PAGES ---- */

.detail-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* hero */
.detail-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.planet-hero {
  position: absolute;
  right: -5vw;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 800px) {
  .planet-hero {
    right: 50%;
    top: auto;
    bottom: -5vh;
    transform: translateX(50%);
    opacity: 0.4;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 8rem 2rem 4rem;
}

.detail-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  /* color set per-page via .page-* tint rules above */
}

.detail-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

.detail-intro {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 55ch;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.35;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: var(--font-display);
  animation: fadeUp 1s 1.5s both;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--text-muted), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.3; }
}

/* content sections */
.detail-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 2rem 8rem;
}

.section-block {
  margin-bottom: 4rem;
}

.section-block + .section-block {
  padding-top: 4rem;
  border-top: 1px solid var(--space-border);
}

.section-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  /* color set per-page via .page-* tint rules */
  margin-bottom: 1.25rem;
  display: block;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.section-body {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 65ch;
}

.section-body p + p {
  margin-top: 1.1em;
}

/* principle cards */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.principle-card {
  background: var(--space-surface);
  border: 1px solid var(--space-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s, transform 0.25s;
}

.principle-card:hover {
  transform: translateY(-3px);
}

.principle-num {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  display: block;
}

.principle-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

.principle-body {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-muted);
}

/* quote / highlight block */
.pull-quote {
  border-left: 2px solid;
  margin: 2.5rem 0;
  padding: 1.25rem 0 1.25rem 2rem;
}

.pull-quote p {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-primary);
}

.pull-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- PROJECT LINK CARDS ---- */

.project-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.project-card {
  display: block;
  background: var(--space-surface);
  border: 1px solid var(--space-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s var(--ease-out-expo), box-shadow 0.25s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.project-card:hover {
  transform: translateY(-3px);
}

/* per-page hover tint — border-color and box-shadow set by .page-* rules below */

.project-preview {
  display: flex;
  align-items: stretch;
  min-height: 90px;
}

.project-preview-text {
  flex: 1;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.project-domain {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: block;
}

.project-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
}

.project-desc {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-thumb {
  flex-shrink: 0;
  width: 160px;
  overflow: hidden;
  border-left: 1px solid var(--space-border);
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 560px) {
  .project-thumb { display: none; }
}

.project-blurb {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-muted);
  padding: 0.9rem 1.5rem 1.1rem;
  border-top: 1px solid var(--space-border);
  margin: 0;
}

/* per-page project card hover tints */
.page-economy       .project-card:hover { border-color: var(--p9-green);  box-shadow: 0 4px 24px rgba(0,204,0,0.12); }
.page-education     .project-card:hover { border-color: var(--p9-purple); box-shadow: 0 4px 24px rgba(153,34,204,0.12); }
.page-entertainment .project-card:hover { border-color: var(--p9-pink);   box-shadow: 0 4px 24px rgba(238,34,238,0.12); }
.page-environment   .project-card:hover { border-color: var(--p9-yellow); box-shadow: 0 4px 24px rgba(255,221,0,0.12); }

/* ---- REVEAL ANIMATION ---- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- ECONOMY PAGE TINTS — P9 Green ---- */
.page-economy .detail-title    { color: var(--p9-green); text-shadow: 0 0 40px rgba(0,204,0,0.4); }
.page-economy .section-heading { color: var(--p9-green); }
.page-economy .pull-quote      { border-color: var(--p9-green); }
.page-economy .principle-card:hover { border-color: var(--p9-green); box-shadow: 0 0 20px rgba(0,204,0,0.15); }
.page-economy .section-label   { color: var(--p9-green); }
.page-economy .detail-eyebrow  { color: var(--p9-green); }

/* ---- EDUCATION PAGE TINTS — P9 Purple ---- */
.page-education .detail-title    { color: var(--p9-purple); text-shadow: 0 0 40px rgba(153,34,204,0.5); }
.page-education .section-heading { color: var(--p9-purple); }
.page-education .pull-quote      { border-color: var(--p9-purple); }
.page-education .principle-card:hover { border-color: var(--p9-purple); box-shadow: 0 0 20px rgba(153,34,204,0.15); }
.page-education .section-label   { color: var(--p9-purple); }
.page-education .detail-eyebrow  { color: var(--p9-purple); }

/* ---- ENTERTAINMENT PAGE TINTS — P9 Pink ---- */
.page-entertainment .detail-title    { color: var(--p9-pink); text-shadow: 0 0 40px rgba(238,34,238,0.5); }
.page-entertainment .section-heading { color: var(--p9-pink); }
.page-entertainment .pull-quote      { border-color: var(--p9-pink); }
.page-entertainment .principle-card:hover { border-color: var(--p9-pink); box-shadow: 0 0 20px rgba(238,34,238,0.15); }
.page-entertainment .section-label   { color: var(--p9-pink); }
.page-entertainment .detail-eyebrow  { color: var(--p9-pink); }

/* ---- ENVIRONMENT PAGE TINTS — P9 Yellow ---- */
.page-environment .detail-title    { color: var(--p9-yellow); text-shadow: 0 0 40px rgba(255,221,0,0.4); }
.page-environment .section-heading { color: var(--p9-yellow); }
.page-environment .pull-quote      { border-color: var(--p9-yellow); }
.page-environment .principle-card:hover { border-color: var(--p9-yellow); box-shadow: 0 0 20px rgba(255,221,0,0.15); }
.page-environment .section-label   { color: var(--p9-yellow); }
.page-environment .detail-eyebrow  { color: var(--p9-yellow); }

/* ---- ROAM PORTAL VISUAL ---- */

.roam-portal-wrap {
  position: relative;
  width: 340px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roam-portal-glow {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0,204,0,0.3),
    rgba(153,34,204,0.3),
    rgba(238,34,238,0.3),
    rgba(255,221,0,0.3),
    rgba(0,204,0,0.3)
  );
  filter: blur(35px);
  animation: spinSlow 10s linear infinite;
}

.roam-portal {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--p9-green),
    var(--p9-purple),
    var(--p9-pink),
    var(--p9-yellow),
    var(--p9-green)
  );
  animation: spinSlow 8s linear infinite;
  position: relative;
  flex-shrink: 0;
}

.roam-portal-void {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--space-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.roam-portal-label {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  background: conic-gradient(
    from 0deg,
    var(--p9-green),
    var(--p9-purple),
    var(--p9-pink),
    var(--p9-yellow),
    var(--p9-green)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: spinSlow 8s linear infinite reverse;
}

.roam-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: roamRingExpand 3.5s ease-out infinite;
  pointer-events: none;
}
.roam-ring:nth-child(1) { width: 300px; height: 300px; border-color: rgba(0,204,0,0.4);      animation-delay: 0s; }
.roam-ring:nth-child(2) { width: 325px; height: 325px; border-color: rgba(238,34,238,0.3);    animation-delay: 1.1s; }
.roam-ring:nth-child(3) { width: 350px; height: 350px; border-color: rgba(255,221,0,0.2);     animation-delay: 2.2s; }

@keyframes roamRingExpand {
  0%   { transform: scale(0.88); opacity: 1; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* ---- ROAM PAGE TINTS ---- */
.page-roam .detail-eyebrow  {
  background: linear-gradient(90deg, var(--p9-green), var(--p9-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-roam .detail-title {
  background: conic-gradient(
    from 0deg,
    var(--p9-green) 0%,
    var(--p9-purple) 33%,
    var(--p9-pink) 66%,
    var(--p9-yellow) 90%,
    var(--p9-green) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}
.page-roam .section-heading { color: var(--text-primary); }
.page-roam .section-label   { color: var(--p9-pink); }
.page-roam .pull-quote      { border-color: var(--p9-purple); }
.page-roam .project-card:hover { border-color: var(--p9-green); box-shadow: 0 4px 24px rgba(0,204,0,0.12); }

/* ---- AGORA CONSTELLATION ---- */

.agora-constellation-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agora-constellation {
  width: 300px;
  height: 300px;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(0, 204, 0, 0.45));
  animation: agoraFloat 6s ease-in-out infinite;
}

@keyframes agoraFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

.agora-lines line {
  stroke: rgba(0, 204, 0, 0.28);
  stroke-width: 1.2;
  animation: agoraPulse 4s ease-in-out infinite;
}

@keyframes agoraPulse {
  0%, 100% { stroke-opacity: 0.28; }
  50%       { stroke-opacity: 0.55; }
}

.agora-nodes-outer circle {
  fill: rgba(0, 204, 0, 0.55);
  stroke: rgba(0, 204, 0, 0.9);
  stroke-width: 1.5;
  animation: agoraNodeBlink 5s ease-in-out infinite;
}

.agora-nodes-outer circle:nth-child(2) { animation-delay: 0.8s; }
.agora-nodes-outer circle:nth-child(3) { animation-delay: 1.6s; }
.agora-nodes-outer circle:nth-child(4) { animation-delay: 2.4s; }
.agora-nodes-outer circle:nth-child(5) { animation-delay: 3.2s; }

@keyframes agoraNodeBlink {
  0%, 100% { fill-opacity: 0.55; }
  50%       { fill-opacity: 1; }
}

.agora-nodes-ring circle {
  fill: rgba(0, 204, 0, 0.75);
  stroke: var(--p9-green);
  stroke-width: 1.5;
}

.agora-hub-glow {
  fill: rgba(0, 204, 0, 0.12);
  animation: agoraHubPulse 3s ease-in-out infinite;
}

@keyframes agoraHubPulse {
  0%, 100% { r: 34; fill-opacity: 0.12; }
  50%       { r: 40; fill-opacity: 0.22; }
}

.agora-hub {
  fill: #04200a;
  stroke: var(--p9-green);
  stroke-width: 2;
}

.agora-hub-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  fill: var(--p9-green);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.05em;
}

/* ---- AGORA PAGE TINTS ---- */

.page-agora .detail-eyebrow {
  color: var(--p9-green);
}

.page-agora .detail-title {
  color: var(--p9-green);
  text-shadow: 0 0 40px rgba(0, 204, 0, 0.45);
}

.page-agora .section-heading { color: var(--p9-green); }
.page-agora .section-label   { color: var(--p9-green); }
.page-agora .pull-quote      { border-color: var(--p9-green); }
.page-agora .project-card:hover { border-color: var(--p9-green); box-shadow: 0 4px 24px rgba(0,204,0,0.15); }

/* ---- VANIR FEATURE (landing) ---- */

.vanir-feature {
  width: 100%;
  max-width: 860px;
  margin-bottom: 4rem;
  animation: fadeUp 1s var(--ease-out-expo) 0.1s both;
}

.vanir-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(0, 204, 0, 0.18);
  border-radius: var(--radius-card);
  background: rgba(0, 204, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.vanir-card:hover {
  border-color: rgba(0, 204, 0, 0.45);
  background: rgba(0, 204, 0, 0.08);
  box-shadow: 0 0 30px rgba(0, 204, 0, 0.12);
}

.vanir-mini-tree {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(0, 204, 0, 0.35));
}

.vmt-trunk   { fill: none; stroke: var(--p9-green); stroke-width: 2.8; stroke-linecap: round; }
.vmt-branch  { fill: none; stroke: var(--p9-green); stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
.vmt-root    { fill: none; stroke: var(--p9-green); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.vmt-node    { fill: var(--p9-green); opacity: 0.9; }

.vanir-card-body {
  flex: 1;
  min-width: 0;
}

.vanir-card-eyebrow {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--p9-green);
  margin-bottom: 0.4rem;
}

.vanir-card-heading {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.vanir-card-desc {
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.vanir-card-arrow {
  font-size: 1.4rem;
  color: var(--p9-green);
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.2s;
}

.vanir-card:hover .vanir-card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .vanir-card { flex-direction: column; text-align: center; gap: 1.25rem; }
  .vanir-card-arrow { display: none; }
}

/* ---- YGGDRASIL (vanir detail page) ---- */

.vanir-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yggdrasil {
  width: 300px;
  height: 300px;
  overflow: visible;
  filter: drop-shadow(0 0 20px rgba(0, 204, 0, 0.35));
  animation: agoraFloat 8s ease-in-out infinite;
}

.ygg-trunk {
  fill: none;
  stroke: var(--p9-green);
  stroke-width: 5;
  stroke-linecap: round;
}

.ygg-branch, .ygg-root {
  fill: none;
  stroke: var(--p9-green);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
}

.ygg-bough, .ygg-rootlet {
  fill: none;
  stroke: var(--p9-green);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.5;
}

.ygg-nodes circle {
  fill: var(--p9-green);
  stroke: none;
}

.ygg-root-nodes circle {
  animation: yggNodePulse 4s ease-in-out infinite;
}

.ygg-branch-nodes circle {
  fill: var(--p9-yellow);
  animation: yggNodePulse 4s ease-in-out infinite 0.5s;
}

@keyframes yggNodePulse {
  0%, 100% { opacity: 0.75; r: 8; }
  50%       { opacity: 1;    r: 10; }
}

.ygg-flow-dot {
  fill: var(--p9-yellow);
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(255, 221, 0, 0.8));
}

/* ---- VANIR PAGE TINTS ---- */

/* ---- FREYJA LINK (eyebrow) ---- */

.freyja-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.freyja-link:hover {
  opacity: 1;
}

/* ---- FREYJA PAGE ---- */

.freyja-wrap {
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.freyja-orrery {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.freyja-orbit {
  stroke: rgba(255,255,255,0.07);
  stroke-width: 1;
}

.freyja-star {
  fill: var(--p9-yellow);
  animation: freyjaStar 3s ease-in-out infinite;
  transform-origin: 150px 150px;
}

@keyframes freyjaStar {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.25); }
}

.freyja-planet  { }
.freyja-jupiter { fill: #ffaa44; }
.freyja-saturn  { fill: #ffdd88; }
.freyja-uranus  { fill: #44cccc; }
.freyja-earth   { fill: #44aaff; }

.freyja-ring-hint {
  fill: none;
  stroke: rgba(255,221,136,0.35);
  stroke-width: 1.5;
}

.page-freyja .detail-eyebrow {
  color: var(--p9-yellow);
}

.page-freyja .detail-title {
  background: linear-gradient(135deg, var(--p9-green) 0%, var(--p9-purple) 40%, var(--p9-pink) 70%, var(--p9-yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}

.page-freyja .section-heading { color: var(--p9-yellow); }
.page-freyja .section-label   { color: var(--p9-yellow); }
.page-freyja .pull-quote      { border-color: var(--p9-yellow); }
.page-freyja .project-card:hover { border-color: var(--p9-yellow); box-shadow: 0 4px 24px rgba(255,221,0,0.12); }

/* ---- VANIR PAGE ---- */

.page-vanir .detail-eyebrow {
  color: var(--p9-green);
}

.page-vanir .detail-title {
  background: linear-gradient(135deg, var(--p9-green) 0%, var(--p9-yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}

.page-vanir .section-heading { color: var(--p9-green); }
.page-vanir .section-label   { color: var(--p9-green); }
.page-vanir .pull-quote      { border-color: var(--p9-green); }
.page-vanir .project-card:hover { border-color: var(--p9-green); box-shadow: 0 4px 24px rgba(0,204,0,0.15); }

/* ---- STACK DIAGRAM ---- */

.stack-wrap {
  position: relative;
  width: 300px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stack-diagram {
  width: 300px;
  height: 240px;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(255, 221, 0, 0.3));
  animation: agoraFloat 7s ease-in-out infinite;
}

.sk-bar {
  fill-opacity: 0.08;
  stroke-width: 1.5;
}

.sk-bar-top {
  fill: var(--p9-pink);
  stroke: var(--p9-pink);
  animation: skBarPulse 4s ease-in-out infinite;
}

.sk-bar-mid {
  fill: var(--p9-purple);
  stroke: var(--p9-purple);
  animation: skBarPulse 4s ease-in-out infinite 0.6s;
}

.sk-bar-bot {
  fill: var(--p9-green);
  stroke: var(--p9-green);
  animation: skBarPulse 4s ease-in-out infinite 1.2s;
}

@keyframes skBarPulse {
  0%, 100% { fill-opacity: 0.08; }
  50%       { fill-opacity: 0.18; }
}

.sk-layer-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: rgba(255, 255, 255, 0.9);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sk-layer-sub {
  font-family: var(--font-body);
  font-size: 9px;
  fill: rgba(255, 255, 255, 0.45);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sk-connector {
  stroke: rgba(255, 221, 0, 0.25);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  animation: skConnPulse 3s ease-in-out infinite;
}

@keyframes skConnPulse {
  0%, 100% { stroke-opacity: 0.25; }
  50%       { stroke-opacity: 0.6; }
}

/* ---- COMMERCIAL DIAGRAM ---- */

.commercial-wrap {
  position: relative;
  width: 300px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commercial-diagram {
  width: 300px;
  height: 260px;
  overflow: visible;
  animation: agoraFloat 8s ease-in-out infinite;
}

.cm-card-bg {
  fill-opacity: 0.12;
  stroke-width: 1.5;
}

.cm-bg-green  { fill: var(--p9-green);  stroke: var(--p9-green);  }
.cm-bg-yellow { fill: var(--p9-yellow); stroke: var(--p9-yellow); fill-opacity: 0.2; }
.cm-bg-pink   { fill: var(--p9-pink);   stroke: var(--p9-pink);   }

.cm-card-left  { animation: cmCardFloat 7s ease-in-out infinite;       filter: drop-shadow(-4px 4px 12px rgba(0,204,0,0.2));   }
.cm-card-right { animation: cmCardFloat 7s ease-in-out infinite 1s;    filter: drop-shadow( 4px 4px 12px rgba(238,34,238,0.2)); }
.cm-card-center { animation: cmCardFloat 7s ease-in-out infinite 0.5s; filter: drop-shadow(0 6px 16px rgba(255,221,0,0.25));   }

@keyframes cmCardFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

.cm-card-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  fill: rgba(255, 255, 255, 0.85);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cm-label-dark {
  fill: rgba(4, 4, 15, 0.75);
}

.cm-card-bar {
  fill: rgba(255, 255, 255, 0.2);
}

.cm-bar-dark {
  fill: rgba(4, 4, 15, 0.2);
}

/* ---- STACK PAGE TINTS ---- */

.page-stack .detail-eyebrow {
  color: var(--p9-yellow);
}

.page-stack .detail-title {
  color: var(--p9-yellow);
  text-shadow: 0 0 40px rgba(255, 221, 0, 0.4);
}

.page-stack .section-heading { color: var(--p9-yellow); }
.page-stack .section-label   { color: var(--p9-yellow); }
.page-stack .pull-quote      { border-color: var(--p9-yellow); }
.page-stack .project-card:hover { border-color: var(--p9-yellow); box-shadow: 0 4px 24px rgba(255,221,0,0.12); }

/* ---- COMMERCIAL PAGE TINTS ---- */

.page-commercial .detail-eyebrow {
  background: linear-gradient(90deg, var(--p9-green), var(--p9-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-commercial .detail-title {
  color: rgba(240, 248, 255, 0.95);
  text-shadow: 0 0 30px rgba(200, 220, 255, 0.3);
}

.page-commercial .section-heading { color: rgba(220, 235, 255, 0.9); }
.page-commercial .section-label   {
  background: linear-gradient(90deg, var(--p9-green), var(--p9-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-commercial .pull-quote      { border-color: rgba(200, 220, 255, 0.4); }
.page-commercial .project-card:hover { border-color: rgba(220, 235, 255, 0.4); box-shadow: 0 4px 24px rgba(200,220,255,0.1); }

/* ---- LUCILLE DIAGRAM ---- */

.lucille-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lucille-diagram {
  width: 300px;
  height: 300px;
  overflow: visible;
  filter: drop-shadow(0 0 20px rgba(238, 34, 238, 0.45));
  animation: agoraFloat 7s ease-in-out infinite;
}

.lc-orbit {
  fill: none;
  stroke: rgba(238, 34, 238, 0.2);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

.lc-lines line {
  stroke: rgba(238, 34, 238, 0.22);
  stroke-width: 1;
}

.lc-peer-lines line {
  stroke: rgba(153, 34, 204, 0.18);
  stroke-width: 0.8;
  stroke-dasharray: 3 5;
  animation: lcPeerLinePulse 5s ease-in-out infinite;
}

@keyframes lcPeerLinePulse {
  0%, 100% { stroke-opacity: 0.18; }
  50%       { stroke-opacity: 0.45; }
}

.lc-peer {
  fill: #1a0020;
  stroke: var(--p9-pink);
  stroke-width: 1.8;
  animation: lcPeerBlink 4s ease-in-out infinite;
  animation-delay: var(--lc-delay, 0s);
}

@keyframes lcPeerBlink {
  0%, 100% { stroke-opacity: 0.6; fill-opacity: 0.7; }
  50%       { stroke-opacity: 1;   fill-opacity: 1;   stroke: var(--p9-purple); }
}

.lc-hub-glow {
  fill: rgba(238, 34, 238, 0.1);
  animation: lcHubPulse 3s ease-in-out infinite;
}

@keyframes lcHubPulse {
  0%, 100% { r: 44; fill-opacity: 0.1; }
  50%       { r: 52; fill-opacity: 0.22; }
}

.lc-hub {
  fill: #18001a;
  stroke: var(--p9-pink);
  stroke-width: 2;
}

.lc-play {
  fill: var(--p9-pink);
  opacity: 0.9;
  animation: lcPlayPulse 3s ease-in-out infinite;
}

@keyframes lcPlayPulse {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 1; fill: var(--p9-purple); }
}

/* ---- LUCILLE PAGE TINTS ---- */

.page-lucille .detail-eyebrow {
  color: var(--p9-pink);
}

.page-lucille .detail-title {
  color: var(--p9-pink);
  text-shadow: 0 0 40px rgba(238, 34, 238, 0.45);
}

.page-lucille .section-heading { color: var(--p9-pink); }
.page-lucille .section-label   { color: var(--p9-pink); }
.page-lucille .pull-quote      { border-color: var(--p9-pink); }
.page-lucille .project-card:hover { border-color: var(--p9-pink); box-shadow: 0 4px 24px rgba(238,34,238,0.15); }

/* ---- ALLYABASE DIAGRAM ---- */

.allyabase-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.allyabase-diagram {
  width: 300px;
  height: 300px;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(153, 34, 204, 0.45));
  animation: agoraFloat 7s ease-in-out infinite;
}

.ab-orbit {
  fill: none;
  stroke-dasharray: 4 6;
}

.ab-orbit-inner { stroke: rgba(153, 34, 204, 0.3); stroke-width: 1; }
.ab-orbit-outer { stroke: rgba(153, 34, 204, 0.18); stroke-width: 1; }

.ab-dot {
  fill: #12062a;
  stroke: var(--p9-purple);
  stroke-width: 1.8;
  animation: abNodePulse 4s ease-in-out infinite;
  animation-delay: var(--ab-delay, 0s);
}

@keyframes abNodePulse {
  0%, 100% { stroke-opacity: 0.7; fill-opacity: 0.8; }
  50%       { stroke-opacity: 1;   fill-opacity: 1;   stroke: var(--p9-pink); }
}

.ab-label {
  font-family: var(--font-display);
  font-size: 6px;
  fill: rgba(220, 180, 255, 0.85);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.ab-hub-glow {
  fill: rgba(153, 34, 204, 0.12);
  animation: abHubPulse 3.5s ease-in-out infinite;
}

@keyframes abHubPulse {
  0%, 100% { r: 40; fill-opacity: 0.12; }
  50%       { r: 48; fill-opacity: 0.24; }
}

.ab-hub {
  fill: #0a0318;
  stroke: var(--p9-purple);
  stroke-width: 2;
}

.ab-hub-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  fill: var(--p9-purple);
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: 0.12em;
}

.ab-hub-label-2 {
  fill: var(--p9-pink);
}

/* ---- ALLYABASE PAGE TINTS ---- */

.page-allyabase .detail-eyebrow {
  color: var(--p9-purple);
}

.page-allyabase .detail-title {
  background: linear-gradient(135deg, var(--p9-purple) 0%, var(--p9-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}

.page-allyabase .section-heading { color: var(--p9-purple); }
.page-allyabase .section-label   { color: var(--p9-purple); }
.page-allyabase .pull-quote      { border-color: var(--p9-purple); }
.page-allyabase .project-card:hover { border-color: var(--p9-purple); box-shadow: 0 4px 24px rgba(153,34,204,0.15); }

/* ---- FOOTER ---- */

.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 2rem;
  border-top: 1px solid var(--space-border);
}

.footer-freyja {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-counter {
  margin-top: 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.counter-humans {
  color: var(--green);
  font-weight: 600;
}

.counter-bots {
  color: #664466;
}