/* ═══════════════════════════════════════════
   VIBEDWARE — style.css
   ═══════════════════════════════════════════ */

/* ─── Fonts ─── */
:root {
  --mono: 'IBM Plex Mono', monospace;
  --display: 'Syne', sans-serif;
  --body: 'DM Sans', sans-serif;
}

/* ─── Dark theme (default) ─── */
[data-theme="dark"] {
  --bg: #0A0A0C;
  --bg2: #12141A;
  --bg3: #1A1D24;
  --bord: #252830;
  --text1: #F0F2F5;
  --text2: #8B95A5;
  --text3: #5A6375;
  --text4: #3D4555;
  --accent: #00E5FF;
  --accent2: #00e87b;
  --accent-dim: #00E5FF18;
  --accent-mid: #00E5FF44;
  --red: #ff4455;
  --red-dim: #ff445522;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --card-hover: 0 12px 40px rgba(0,0,0,0.4);
  --hero-top: #0A0A0Cee;
  --hero-mid: #0A0A0C22;
  --hero-bot: #0A0A0Cee;
  --node-bg: #12141A;
  --cta-bg: #00E5FF;
  --cta-text: #000;
}

/* ─── Light theme ─── */
[data-theme="light"] {
  --bg: #F4F5F7;
  --bg2: #FFFFFF;
  --bg3: #EDF0F4;
  --bord: #DCE0E8;
  --text1: #111418;
  --text2: #5A6375;
  --text3: #8B95A5;
  --text4: #B0B8C8;
  --accent: #E63946;
  --accent2: #E63946;
  --accent-dim: #E6394610;
  --accent-mid: #E6394633;
  --red: #dc2626;
  --red-dim: #dc262615;
  --card-shadow: 0 2px 12px rgba(0,0,0,0.04);
  --card-hover: 0 12px 40px rgba(0,0,0,0.08);
  --hero-top: #F4F5F7ee;
  --hero-mid: #F4F5F733;
  --hero-bot: #F4F5F7ee;
  --node-bg: #FFFFFF;
  --cta-bg: #E63946;
  --cta-text: #fff;
}

/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text1);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* ─── Animations ─── */
@keyframes fu {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fi {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.r { opacity: 0; transform: translateY(32px); }
.r.v { animation: fu 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.r.v.d1 { animation-delay: 0.06s; }
.r.v.d2 { animation-delay: 0.12s; }
.r.v.d3 { animation-delay: 0.18s; }
.r.v.d4 { animation-delay: 0.24s; }
.r.v.d5 { animation-delay: 0.30s; }

/* ─── Layout helpers ─── */
.sec { max-width: 1100px; margin: 0 auto; padding: 140px 36px; }
.lbl { font: 500 10px var(--mono); color: var(--text4); letter-spacing: 4px; margin-bottom: 16px; }
.h2  { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -0.03em; line-height: 1.15; color: var(--text1); }
.sub { font-size: 15px; line-height: 1.8; color: var(--text3); max-width: 480px; }
.center  { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── Cards ─── */
.mc {
  border: 1px solid var(--bord); border-radius: 12px; background: var(--bg2);
  transition: all 0.4s; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--card-shadow);
}
.mc:hover { border-color: var(--text4); transform: translateY(-2px); box-shadow: var(--card-hover); }
.mc.on    { border-color: var(--text4); }

/* ─── Buttons ─── */
.qb {
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--bord);
  background: var(--bg); color: var(--text3); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; font-family: var(--mono);
}
.qb:hover { border-color: var(--text2); color: var(--text1); background: var(--bg3); }

.pp {
  padding: 10px 22px; border: 1px solid var(--bord); border-radius: 100px;
  background: transparent; cursor: pointer; transition: all 0.3s;
  font: 500 12px var(--mono); color: var(--text3);
}
.pp:hover { border-color: var(--text2); color: var(--text1); }
.pp.on    { border-color: var(--accent-mid); color: var(--accent); background: var(--accent-dim); }

.c1 {
  padding: 18px 52px; background: var(--cta-bg); color: var(--cta-text);
  border: none; border-radius: 6px; font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: var(--body); transition: all 0.3s;
}
.c1:hover { transform: translateY(-2px); box-shadow: 0 12px 48px var(--accent-mid); }

.c2 {
  padding: 18px 40px; background: transparent; color: var(--text3);
  border: 1px solid var(--bord); border-radius: 6px; font-size: 14px;
  cursor: pointer; font-family: var(--body); transition: all 0.3s;
}
.c2:hover { border-color: var(--text2); color: var(--text1); }

.theme-btn {
  background: transparent; border: 1px solid var(--bord); color: var(--text2);
  padding: 7px 14px; border-radius: 6px; cursor: pointer;
  font: 500 12px var(--mono); transition: all 0.3s;
  display: flex; align-items: center; gap: 6px;
}
.theme-btn:hover { border-color: var(--text2); color: var(--text1); background: var(--bg3); }

/* ─── Grids ─── */
.grid-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3       { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--bord); border-radius: 14px; overflow: hidden; }
.grid-3-gap   { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-4       { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--bord); border-radius: 14px; overflow: hidden; }
.grid-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.grid-specs   { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--bord); border-radius: 14px; overflow: hidden; }

/* ─── Workflow steps ─── */
.wf-step      { display: flex; align-items: flex-start; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--bg); }
.wf-step.hl   { border-bottom-color: var(--accent-dim); }
.wf-time      { font: 600 11px var(--mono); min-width: 48px; padding-top: 2px; }
.wf-label     { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.wf-note      { font-size: 11px; color: var(--text3); line-height: 1.5; }

/* ─── Transport diagram ─── */
.transport      { display: flex; align-items: stretch; background: var(--bg2); border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; box-shadow: var(--card-shadow); }
.transport-side { flex: 1; padding: 36px 32px; }
.transport-mid  { flex: 0 0 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--accent-dim); position: relative; }
.dot            { width: 4px; height: 4px; border-radius: 2px; background: var(--accent-mid); flex-shrink: 0; }
.dot-line       { font: 400 12px var(--mono); color: var(--text3); display: flex; align-items: center; gap: 10px; padding: 3px 0; }

/* ─── YAML block ─── */
.yaml-wrap    { background: var(--bg2); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); }
.yaml-header  { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--bord); }
.yaml-code    { font: 400 11.5px/1.75 var(--mono); color: var(--text3); white-space: pre; overflow-x: auto; padding: 24px 28px; }
.yaml-key     { color: var(--accent); }
.yaml-val     { color: var(--text2); }
.yaml-comment { color: var(--text4); }
.yaml-line    { color: var(--text3); }
.yaml-copy-btn { font: 500 10px var(--mono); color: var(--text4); background: transparent; border: 1px solid var(--bord); border-radius: 4px; padding: 4px 12px; cursor: pointer; transition: all 0.3s; }

/* ─── Bus visualizer ─── */
.bus-vis         { margin-top: 48px; background: var(--bg2); border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; display: none; box-shadow: var(--card-shadow); }
.bus-vis.active  { display: block; }
.bus-header      { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--bord); flex-wrap: wrap; gap: 12px; }
.bus-nodes       { position: relative; padding: 48px 28px 24px; }
.bus-line        { position: absolute; top: 50%; left: 28px; right: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-mid) 4%, var(--accent-mid) 96%, transparent); transform: translateY(-50%); }
.bus-node-list   { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; position: relative; z-index: 1; }
.bus-node        { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bus-node-box    { width: 48px; height: 48px; background: var(--bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--card-shadow); }

/* ─── Hero ─── */
.hero         { height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.hero-canvas  { position: absolute; inset: 0; }
.hero-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 5vh; pointer-events: none; }
.hero-content { text-align: center; max-width: 660px; padding: 0 36px; pointer-events: auto; }
.hero nav     { display: flex; justify-content: space-between; align-items: center; padding: 28px 36px; position: relative; z-index: 10; opacity: 0; animation: fi 1.2s ease 0.4s forwards; }
.hero nav a   { font: 500 10px var(--mono); color: var(--text4); letter-spacing: 2px; cursor: pointer; padding: 8px 14px; border-radius: 6px; text-decoration: none; transition: all 0.3s; }
.hero nav a:hover { color: var(--text2); }

/* ─── Code block ─── */
.code-block {
  background: var(--bg); border-radius: 10px; border: 1px solid var(--bord);
  padding: 24px 28px; font: 400 11.5px/1.7 var(--mono); color: var(--text3);
  flex: 0 0 300px;
}

/* ─── Specs arrow toggle ─── */
.specs-toggle {
  background: none; border: none; cursor: pointer;
  font: 500 9px var(--mono); color: var(--text4); letter-spacing: 2px;
  display: flex; align-items: center; gap: 8px; padding: 0;
}
.specs-toggle .arrow {
  display: inline-block; transition: transform 0.3s; font-size: 12px;
}
.specs-toggle.open .arrow { transform: rotate(90deg); }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .transport { flex-direction: column; }
  .transport-mid { flex: 0 0 auto; padding: 24px; }
  .transport-side { border-right: none !important; }
  .stack-driver { flex-direction: column; }
  .code-block { flex: 1 1 auto; }
  .dev-wrap { flex-direction: column; }
  .nav-links { display: none !important; }
}