/* Color + Typography constants (from screenshot sample) */
:root{
  --bg:#151d28;
  --ink:#e8e2d3;
  --muted:#c9bea5;
  --accent:#d9c9a2;
  --line:#2a3347;
  }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family: Georgia, Cambria, "Times New Roman", Times, serif; line-height:1.75;}
h1,h2{margin:0 0 .6rem 0;color:var(--accent)}
h3{margin:0 0 .6rem 0; font-style: italic; line-height:1.2; font-size: 1.0rem; color:var(--accent)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* Sidebar layout */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;padding:1rem;overflow:auto;
  background:transparent;border-right:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.02em;margin:.25rem 0 .5rem}
.toc a{display:block;padding:.45rem .5rem;border-radius:.5rem;color:var(--ink)}
.toc a:hover,.toc a.active{background:rgba(255,255,255,.06)}
.main{margin-left:280px;min-height:100vh}
.header{padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.container{max-width:1000px;margin:0 auto;padding:2rem 1.25rem}
.card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:.8rem;padding:1rem}
.content p{margin:1rem 0}
.navlinks{display:flex;gap:1rem;margin-top:1.25rem}
.footer{color:var(--muted);border-top:1px solid var(--line);padding:1.25rem;margin-top:2rem}
.hero{position:relative;min-height:48vh;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.05)}
.hero .overlay{position:relative;text-align:center;padding:2rem;max-width:980px}
.hero h1{font-size:clamp(2rem,6vw,4rem)}
.hero h2{font-size:clamp(1.1rem,3vw,1.6rem);color:var(--muted);font-weight:400}
@media (max-width: 860px){
  .sidebar{position:static;width:auto}
  .main{margin-left:0}
  .hero{min-height:36vh}
}
  /* === Omega Layer Energy Transformation Section === */
#energy-transformation.card {
  background: radial-gradient(circle at top left, var(--accent-light, #c7f0ff), #0b0f1a);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0 25px rgba(80, 180, 255, 0.15);
  margin: 2rem 0;
  transition: box-shadow 0.3s ease, background 0.5s ease;
}
#energy-transformation.card:hover {
  box-shadow: 0 0 40px rgba(120, 220, 255, 0.35);
  background: radial-gradient(circle at bottom right, #14213d, #0a0f1a);
}

#energy-transformation h2 {
  font-size: 1.6rem;
  background: linear-gradient(90deg, #ff6666, #ffaa33, #66ccff, #33ddaa);
  background-clip: text;              /* ← standard property */
  -webkit-background-clip: text;      /* ← WebKit-specific for Chrome/Safari */
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#energy-transformation summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--accent, #77ccff);
  margin-top: 1rem;
}
#energy-transformation summary:hover {
  color: #aaf;
}

.stack-map {
  list-style: none;
  counter-reset: layer;
  margin: 1.5rem 0;
  padding-left: 0;
}
.stack-map li {
  counter-increment: layer;
  margin: 0.6rem 0;
  padding: 0.6rem 1rem;
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.25rem;
  transition: background 0.3s ease;
}
.stack-map li::before {
  content: "L" counter(layer) " → ";
  color: var(--accent-light, #88ddff);
  font-weight: bold;
}
.stack-map li:hover {
  background: rgba(255, 255, 255, 0.07);
}

#energy-transformation blockquote {
  border-left: 4px solid #66ccff;
  padding-left: 1rem;
  color: #cce7ff;
  font-style: italic;
  margin-top: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.25rem;
}
/* Bulletproof gradient text */
.gradient-text {
  /* the gradient */
  background: linear-gradient(90deg, #ff6666, #ffaa33, #66ccff, #33ddaa);

  /* clip the background to the text */
  background-clip: text;           /* standard (Firefox, etc.) */
  -webkit-background-clip: text;   /* WebKit (Chrome/Safari) */

  /* make the glyphs transparent so the bg shows through */
  color: transparent;              /* Firefox & others */
  -webkit-text-fill-color: transparent; /* WebKit */

  /* make sure the element actually has a background box */
  display: inline-block;           /* important for reliable painting */
}
/* small layout helper for the Sense–Integrate–Steer triad */
.triad { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1rem 0 0.5rem; }
.triad-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 0.85rem 1rem; }
.triad-item h3 { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--accent, #77ccff); }
.inline-links a { margin-right: .75rem; }

/* responsive: 3-up cards on wider screens */
@media (min-width: 860px){
  .triad { grid-template-columns: repeat(3, 1fr); }
}