/* ═══ TONECASTER — STYLE v2 (DEEP) ══════════════════════════════════ */

:root {
  --acc:  #ff7a00;
  --acc2: rgba(255,122,0,0.10);
  --acc3: rgba(255,122,0,0.04);
  --bg:   #0a0400;
  --text: #cdc7c0;
  --dim:  rgba(205,199,192,0.48);
  --grn:  #00c896;
  --mono: 'JetBrains Mono', monospace;
  --serif:'Cormorant Garamond', Georgia, serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.75;
}

a { color: var(--acc); text-decoration: none; }
strong { color: #f0ebe4; font-weight: 600; }
code { font-family: var(--mono); font-size: 0.82em; color: var(--acc); }

/* ─── HERO ────────────────────────────────────────────────────────── */

.hero {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 2rem 5rem;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,122,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,0,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.hero-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: rgba(255,122,0,0.55);
  margin-bottom: 2.5rem;
}

.hero-timer-wrap { margin-bottom: 1.8rem; }

.hero-timer {
  font-family: var(--mono);
  font-size: clamp(3.8rem, 10vw, 5.8rem);
  color: var(--acc);
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color 0.5s;
}

.hero-timer.done { color: var(--grn); animation: done-flash 0.45s ease-in-out 4; }

@keyframes done-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

.hero-timer-note {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin-top: 0.5rem;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #f0ebe4;
  line-height: 1;
  margin-bottom: 1.2rem;
}

.hero-sub {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  margin-bottom: 2.5rem;
}

.hero-stats {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.hs-dot { color: rgba(255,122,0,0.35); }
.hs-acc { color: rgba(255,122,0,0.75); }

/* Waveform */
.hero-viz {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 52px;
}

.viz-bar {
  width: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--acc);
  opacity: 0.65;
  transform-origin: bottom;
  animation: bar-pulse 1s ease-in-out infinite alternate;
}

.vb1  { height:18%; animation-duration:0.71s; animation-delay:0.00s; }
.vb2  { height:42%; animation-duration:0.92s; animation-delay:0.04s; }
.vb3  { height:68%; animation-duration:0.78s; animation-delay:0.08s; }
.vb4  { height:52%; animation-duration:1.08s; animation-delay:0.12s; }
.vb5  { height:84%; animation-duration:0.73s; animation-delay:0.16s; }
.vb6  { height:100%;animation-duration:0.64s; animation-delay:0.20s; }
.vb7  { height:88%; animation-duration:0.84s; animation-delay:0.24s; }
.vb8  { height:74%; animation-duration:0.96s; animation-delay:0.28s; }
.vb9  { height:100%;animation-duration:0.69s; animation-delay:0.32s; }
.vb10 { height:79%; animation-duration:1.04s; animation-delay:0.36s; }
.vb11 { height:58%; animation-duration:0.81s; animation-delay:0.40s; }
.vb12 { height:38%; animation-duration:0.91s; animation-delay:0.44s; }
.vb13 { height:73%; animation-duration:0.74s; animation-delay:0.48s; }
.vb14 { height:53%; animation-duration:0.87s; animation-delay:0.52s; }
.vb15 { height:28%; animation-duration:1.01s; animation-delay:0.56s; }
.vb16 { height:14%; animation-duration:0.77s; animation-delay:0.60s; }

@keyframes bar-pulse {
  from { transform: scaleY(0.12); opacity: 0.35; }
  to   { transform: scaleY(1);    opacity: 0.70; }
}

/* ─── LAYOUT ──────────────────────────────────────────────────────── */

.s {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.s-2 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.s-divider {
  border: none;
  border-top: 1px solid rgba(255,122,0,0.09);
}

.sec-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(255,122,0,0.52);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.5vw, 2.7rem);
  font-weight: 300;
  color: #f0ebe4;
  margin-bottom: 1.6rem;
  line-height: 1.2;
}

p { margin-bottom: 1.1rem; }

.pull {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--acc);
  line-height: 1.55;
  margin: 2rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid rgba(255,122,0,0.38);
}

/* ─── SPEC BOX ────────────────────────────────────────────────────── */

.spec-box {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.75;
  background: rgba(255,122,0,0.035);
  border: 1px solid rgba(255,122,0,0.14);
  border-radius: 3px;
  padding: 1.4rem 1.6rem;
}

.sb-head {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(255,122,0,0.65);
  margin-bottom: 1rem;
}

.sb-row {
  display: flex;
  gap: 0.8rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sb-key { color: rgba(255,122,0,0.68); min-width: 7rem; }
.sb-val { color: var(--text); }

/* ─── PIPELINE ────────────────────────────────────────────────────── */

.pipeline-wrap { margin-top: 2.5rem; }

.pipeline-track {
  display: flex;
  overflow-x: auto;
  border: 1px solid rgba(255,122,0,0.18);
  border-bottom: none;
}

.pipe-step {
  flex: 1;
  min-width: 95px;
  padding: 1rem 0.75rem;
  cursor: pointer;
  text-align: center;
  border-right: 1px solid rgba(255,122,0,0.12);
  background: rgba(255,122,0,0.015);
  transition: background 0.18s;
}

.pipe-step:last-child { border-right: none; }
.pipe-step:hover  { background: rgba(255,122,0,0.055); }
.pipe-step.active { background: var(--acc2); }

.ps-num  { font-family:var(--mono); font-size:0.55rem; color:var(--dim); margin-bottom:0.35rem; }
.ps-icon { font-size:1.25rem; color:var(--acc); margin-bottom:0.35rem; display:block; }
.ps-name { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; color:#ddd8d0; display:block; }
.ps-time { font-family:var(--mono); font-size:0.55rem; color:var(--dim); margin-top:0.28rem; display:block; }
.pipe-step.active .ps-icon { animation: icon-glow 1.2s ease-in-out infinite alternate; }

@keyframes icon-glow {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

.pipe-detail {
  border: 1px solid rgba(255,122,0,0.18);
  border-top: 2px solid var(--acc);
  padding: 1.6rem;
  background: rgba(255,122,0,0.025);
  min-height: 130px;
}

.pd-empty { font-family:var(--mono); font-size:0.68rem; color:var(--dim); }

.pd-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.pd-name  { font-family:var(--serif); font-size:1.35rem; color:#f0ebe4; }
.pd-tool  { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.12em; color:var(--acc); padding:0.2rem 0.6rem; border:1px solid rgba(255,122,0,0.3); border-radius:2px; }
.pd-time-badge { font-family:var(--mono); font-size:0.62rem; color:var(--grn); margin-left:auto; }
.pd-desc  { font-size:1rem; line-height:1.7; margin-bottom:0.7rem; }
.pd-detail { font-family:var(--mono); font-size:0.7rem; color:var(--dim); line-height:1.6; padding-top:0.7rem; border-top:1px solid rgba(255,255,255,0.05); }

/* ─── CONTENT GENERATION TABS ─────────────────────────────────────── */

.cg-tabs {
  display: flex;
  gap: 0;
  margin-top: 2rem;
  border-bottom: 1px solid rgba(255,122,0,0.2);
}

.cg-tab {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.2rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  margin-bottom: -1px;
}

.cg-tab:hover { color: rgba(255,122,0,0.7); }
.cg-tab.active { color: var(--acc); border-bottom-color: var(--acc); }

.cg-panel {
  display: none;
  padding: 1.5rem;
  background: rgba(255,122,0,0.025);
  border: 1px solid rgba(255,122,0,0.12);
  border-top: none;
  min-height: 220px;
}

.cg-panel.active { display: block; }

.cg-panel-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(255,122,0,0.55);
  margin-bottom: 1rem;
}

.cg-body { font-size: 0.9rem; line-height: 1.7; }
.cg-body h3 { font-family:var(--serif); font-size:1.1rem; color:#f0ebe4; margin:1rem 0 0.5rem; font-weight:400; }
.cg-body ul { padding-left:1.2rem; }
.cg-body li { margin-bottom:0.3rem; }
.cg-mono { font-family: var(--mono); font-size: 0.78rem; line-height: 1.7; color: var(--text); }

.cg-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.cg-type-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255,122,0,0.22);
  color: rgba(255,122,0,0.7);
  border-radius: 2px;
}

.cg-type-tag.active { border-color: var(--acc); color: var(--acc); background: var(--acc3); }

/* Quote Cards */
.quote-cards { display: flex; flex-direction: column; gap: 0.8rem; }

.quote-card {
  border: 1px solid rgba(255,122,0,0.15);
  padding: 1rem 1.2rem;
  background: rgba(255,122,0,0.02);
}

.qc-time { font-family:var(--mono); font-size:0.62rem; color:var(--grn); margin-bottom:0.4rem; }
.qc-text { font-family:var(--serif); font-size:1.05rem; font-style:italic; color:#f0ebe4; line-height:1.5; }

/* ─── IDENTITY MAP ────────────────────────────────────────────────── */

.machine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid rgba(255,122,0,0.1);
  background: rgba(255,122,0,0.1);
}

.machine-card {
  background: var(--bg);
  padding: 1.4rem 1.2rem;
  transition: background 0.18s;
}

.machine-card:hover { background: rgba(255,122,0,0.04); }

.mc-icon  { font-size:1.5rem; margin-bottom:0.6rem; display:block; }
.mc-name  { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.12em; color:var(--acc); margin-bottom:0.25rem; }
.mc-type  { font-size:0.78rem; color:var(--dim); font-style:italic; margin-bottom:0.7rem; }
.mc-desc  { font-size:0.88rem; line-height:1.6; }

.snapshot-box {
  margin-top: 2.5rem;
  padding: 1.4rem 1.6rem;
  background: rgba(255,122,0,0.035);
  border: 1px solid rgba(255,122,0,0.12);
  border-radius: 3px;
  max-width: 680px;
}

.snap-head { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.18em; color:rgba(255,122,0,0.58); margin-bottom:1rem; }
.snap-code { font-family:var(--mono); font-size:0.73rem; line-height:1.9; color:var(--text); }
.snap-acc { color:var(--acc); }
.snap-grn { color:var(--grn); }

.formula-box {
  margin-top: 1.5rem;
  padding: 1rem 1.4rem;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,122,0,0.12);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.8;
  max-width: 680px;
}

.fb-head { font-size:0.6rem; letter-spacing:0.15em; color:rgba(255,122,0,0.5); margin-bottom:0.7rem; }
.fb-acc  { color:var(--acc); }
.fb-grn  { color:var(--grn); }
.fb-dim  { color:var(--dim); }

/* ─── SEMANTIC SEARCH ─────────────────────────────────────────────── */

.semantic-demo {
  margin-top: 2rem;
  max-width: 700px;
}

.sd-query {
  border: 1px solid rgba(255,122,0,0.25);
  padding: 1rem 1.2rem;
  background: rgba(255,122,0,0.04);
  border-radius: 3px;
}

.sd-q-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.15em; color:rgba(255,122,0,0.5); display:block; margin-bottom:0.4rem; }
.sd-q-text  { font-family:var(--serif); font-size:1.1rem; color:#f0ebe4; font-style:italic; }

.sd-arrow { font-family:var(--mono); font-size:1.2rem; color:rgba(255,122,0,0.35); text-align:center; padding:0.6rem 0; }

.sd-results { display:flex; flex-direction:column; gap:0.6rem; }

.sd-result {
  border: 1px solid rgba(255,122,0,0.12);
  padding: 0.9rem 1.2rem;
  background: rgba(255,122,0,0.015);
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  grid-template-rows: auto auto;
  gap: 0.2rem 0.8rem;
}

.sd-time { font-family:var(--mono); font-size:0.72rem; color:var(--grn); grid-row:1; grid-column:1; }
.sd-snippet { font-family:var(--serif); font-size:0.92rem; font-style:italic; color:#ddd8d0; grid-row:1; grid-column:2; }
.sd-ep { font-family:var(--mono); font-size:0.6rem; color:var(--dim); grid-row:2; grid-column:2; }

.vector-note {
  margin-top: 1.5rem;
  padding: 1rem 1.4rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 2px solid rgba(255,122,0,0.3);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--dim);
}

.vn-acc { color: rgba(255,122,0,0.75); }

/* ─── COMPLIANCE ──────────────────────────────────────────────────── */

.compliance-display { margin-top: 2rem; max-width: 680px; }

.cs-bar {
  display: grid;
  grid-template-columns: 9rem 1fr 3.5rem;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cs-label { font-family:var(--mono); font-size:0.68rem; color:var(--text); }

.cs-track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.cs-fill {
  height: 100%;
  width: 0;
  background: var(--acc);
  border-radius: 3px;
  transition: width 1s ease-out;
}

.cs-fill.grn { background: var(--grn); }

.cs-score { font-family:var(--mono); font-size:0.68rem; color:var(--acc); text-align:right; }

.compliance-note {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--dim);
  padding: 1rem 1.4rem;
  border: 1px solid rgba(255,122,0,0.1);
  background: rgba(255,122,0,0.02);
}

.cn-acc { color: var(--acc); }

/* ─── PIPELINE BUILDER MOCK ───────────────────────────────────────── */

.pb-mock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid rgba(255,122,0,0.2);
  background: rgba(255,122,0,0.2);
}

.pb-panel { background: var(--bg); padding: 1.2rem; }

.pb-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: rgba(255,122,0,0.55);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,122,0,0.12);
}

.pb-step {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.45rem 0.6rem;
  margin-bottom: 2px;
  background: rgba(255,255,255,0.02);
  color: var(--dim);
  border-radius: 2px;
  cursor: default;
}

.pb-step.active { background: var(--acc2); color: var(--acc); }
.pb-step.lock   { color: rgba(205,199,192,0.25); }

.pb-add {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: rgba(255,122,0,0.35);
  padding: 0.4rem 0.6rem;
  border: 1px dashed rgba(255,122,0,0.2);
  border-radius: 2px;
  margin-top: 0.5rem;
  cursor: default;
}

.pb-field {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.pbf-k { color: rgba(255,122,0,0.65); min-width: 8rem; }
.pbf-v { color: var(--text); }
.pbf-v.grn { color: var(--grn); }
.pbf-v.acc { color: var(--acc); }

/* ─── KOSTEN ──────────────────────────────────────────────────────── */

.cost-hero { text-align: center; padding: 2rem 0 2.5rem; }

.cost-number {
  font-family: var(--mono);
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--acc);
  line-height: 1;
}

.cost-note {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  margin-top: 0.5rem;
}

.stats-row {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.stat-box { text-align: center; }
.stat-n   { font-family:var(--mono); font-size:2rem; color:var(--acc); line-height:1; }
.stat-lbl { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.14em; color:var(--dim); margin-top:0.3rem; }

.split-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem; }

.s-card { border:1px solid rgba(255,255,255,0.07); padding:1.4rem 1.6rem; border-radius:3px; }
.s-card.dim { background:rgba(255,255,255,0.015); }
.s-card.acc { border-color:rgba(255,122,0,0.28); background:var(--acc3); }

.sc-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.16em; color:var(--dim); margin-bottom:1rem; }
.sc-label.orange { color:rgba(255,122,0,0.75); }
.sc-item  { font-size:0.92rem; padding:0.28rem 0; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--dim); }
.sc-item.bad  { color:rgba(255,85,85,0.75); }
.sc-item.good { color:rgba(0,200,150,0.9); }
.sc-item.bold { color:#f0ebe4; }

/* ─── AGENTRUN MONITOR ────────────────────────────────────────────── */

.amm {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.8;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,122,0,0.14);
  border-radius: 3px;
  padding: 1.2rem;
  margin-top: 1.5rem;
}

.amm-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.amm-status { color:var(--grn); }
.amm-status.running { animation: amm-blink 1.2s step-end infinite; }

@keyframes amm-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.amm-session { color:rgba(255,122,0,0.6); }
.amm-kind { color:var(--dim); }
.amm-cost { color:var(--acc); margin-left:auto; }

.amm-tools { display:flex; flex-wrap:wrap; gap:0.4rem; }

.amm-tool {
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--dim);
  border-radius: 2px;
  font-size: 0.62rem;
}

.amm-tool.done   { border-color:rgba(0,200,150,0.3); color:var(--grn); }
.amm-tool.active { border-color:var(--acc); color:var(--acc); background:var(--acc3); }

.amm-report {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.amm-r-head { color:var(--acc); margin-bottom:0.3rem; }
.amm-r-line { color:var(--dim); }
.amm-r-line.grn { color:var(--grn); }

/* ─── WEB PLAYER MOCK ─────────────────────────────────────────────── */

.player-mock {
  margin-top: 2rem;
  border: 1px solid rgba(255,122,0,0.2);
  border-radius: 3px;
  overflow: hidden;
  max-width: 680px;
  font-family: var(--mono);
}

.pm-bar {
  background: rgba(0,0,0,0.5);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,122,0,0.15);
}

.pm-title { color: #f0ebe4; font-size:0.78rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-controls { color:var(--acc); font-size:0.9rem; letter-spacing:0.4em; flex-shrink:0; }
.pm-time { color:var(--dim); font-size:0.65rem; flex-shrink:0; }

.pm-tabs {
  display: flex;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,122,0,0.1);
}

.pm-tab {
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: default;
}

.pm-tab.active { color:var(--acc); border-bottom-color:var(--acc); }

.pm-content { padding: 1rem 1.2rem; background: rgba(255,122,0,0.015); }

.pm-chapter {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.75rem;
  color: var(--dim);
}

.pm-chapter.active { color: var(--acc); }
.pm-chapter.active::before { content: "▸ "; }

.pm-transcript-line {
  padding: 0.25rem 0;
  font-size: 0.78rem;
  line-height: 1.5;
}

.pm-speaker { font-size:0.6rem; color:rgba(255,122,0,0.6); letter-spacing:0.1em; margin-right:0.4rem; }
.pm-speaker.guest { color:rgba(0,200,150,0.6); }
.pm-ts { font-size:0.58rem; color:var(--dim); margin-right:0.5rem; }

/* ─── ARCHITEKTUR ─────────────────────────────────────────────────── */

.arch-flow {
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 2.0;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,122,0,0.14);
  border-radius: 3px;
  padding: 1.4rem;
  color: var(--text);
}

.af-acc { color: var(--acc); }
.af-dim { color: rgba(205,199,192,0.38); }
.af-grn { color: var(--grn); }

.tech-grid { display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1.5rem; }

.tech-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(255,122,0,0.22);
  color: rgba(255,122,0,0.78);
  border-radius: 2px;
}

/* ─── MCP TOOLS TABLE ─────────────────────────────────────────────── */

.tool-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

.tool-table th {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: var(--dim);
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(255,122,0,0.18);
}

.tool-table td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}

.tool-table td:first-child { font-family:var(--mono); font-size:0.72rem; color:rgba(255,122,0,0.7); }
.tool-table td:nth-child(2) { font-family:var(--mono); font-size:0.7rem; color:#ddd8d0; }
.tool-table td:nth-child(3) { font-family:var(--mono); font-size:0.65rem; color:var(--dim); }
.tool-table td:last-child { font-size:0.85rem; color:var(--text); }

.tool-cat-row td {
  background: rgba(255,122,0,0.035);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(255,122,0,0.6);
  padding: 0.5rem 0.8rem;
  border-top: 1px solid rgba(255,122,0,0.12);
  border-bottom: none;
}

.tool-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.tb-active { background:rgba(0,200,150,0.12); color:var(--grn); }
.tb-beta   { background:rgba(255,122,0,0.12); color:var(--acc); }
.tb-plan   { background:rgba(255,255,255,0.06); color:var(--dim); }

/* ─── P2.0 TABLE ──────────────────────────────────────────────────── */

.p2-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.p2-table th {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--dim);
  text-align: left;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(255,122,0,0.18);
}

.p2-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.92rem;
}

.p2-table td:nth-child(2) { font-family:var(--mono); font-size:0.65rem; color:var(--dim); }
.p2-table td.check { font-family:var(--mono); color:var(--grn); }
.p2-table td.soon  { font-family:var(--mono); color:rgba(255,122,0,0.6); }

/* ─── VISION CARDS ────────────────────────────────────────────────── */

.vision-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 2rem;
  border: 1px solid rgba(255,122,0,0.15);
  background: rgba(255,122,0,0.15);
}

.vision-card {
  background: var(--bg);
  padding: 1.6rem 1.4rem;
}

.vc-year {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(255,122,0,0.5);
  margin-bottom: 0.5rem;
}

.vc-phase {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--acc);
  margin-bottom: 0.3rem;
  letter-spacing: 0.08em;
}

.vc-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: #f0ebe4;
  margin-bottom: 1rem;
  font-weight: 300;
}

.vc-items { list-style: none; padding: 0; }

.vc-items li {
  font-size: 0.88rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}

.vc-items li::before { content: "→ "; color: rgba(255,122,0,0.4); }

/* ─── FEED DISCOVERY ──────────────────────────────────────────────── */

.feed-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.ff-step {
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255,122,0,0.2);
  color: var(--text);
  border-radius: 2px;
  background: rgba(255,122,0,0.02);
}

.ff-step.done  { border-color:rgba(0,200,150,0.3); color:var(--grn); }
.ff-step.fail  { border-color:rgba(255,85,85,0.2); color:rgba(255,85,85,0.6); }
.ff-arr { color:rgba(255,122,0,0.3); }

.stress-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.sg-box { text-align:center; }
.sg-n   { font-family:var(--mono); font-size:1.8rem; color:var(--acc); line-height:1; }
.sg-lbl { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.12em; color:var(--dim); margin-top:0.3rem; }

/* ─── CLOSE ───────────────────────────────────────────────────────── */

.s-close { background:rgba(255,122,0,0.03); border-top:1px solid rgba(255,122,0,0.1); }

.close-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 7rem 2rem;
  text-align: center;
}

.close-inner h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 300;
  color: #f0ebe4;
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 0;
}

/* ─── FOOTER ──────────────────────────────────────────────────────── */

.site-footer {
  text-align: center;
  padding: 1.8rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--dim);
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .vision-cards { grid-template-columns: 1fr; }
  .pb-mock { grid-template-columns: 1fr; }
  .stress-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .s-2 { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.2rem; }
  .s   { padding: 3rem 1.2rem; }
  .split-cards { grid-template-columns: 1fr; }
  .hero-timer { font-size: 3.2rem; }
  .pipe-step  { min-width: 72px; padding: 0.7rem 0.4rem; }
  .ps-name    { font-size: 0.52rem; }
  .ps-icon    { font-size: 1rem; }
  .close-inner { padding: 4rem 1.2rem; }
  .stats-row  { gap: 1.2rem; }
  .cg-tab     { padding: 0.5rem 0.7rem; font-size: 0.6rem; }
  .cs-bar     { grid-template-columns: 6rem 1fr 2.5rem; }
  .sd-result  { grid-template-columns: 3rem 1fr; }
}