/* ── Project Cards ── */
.proj-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 8px 0;
}
@media (max-width: 600px) { .proj-grid { grid-template-columns: 1fr; } }

.proj-card {
	background: #0a0c10;
	border: 1px solid #1e2535;
	border-radius: 14px;
	padding: 32px 28px;
	cursor: pointer;
	transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
	position: relative;
	overflow: hidden;
}
.proj-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, var(--card-glow, rgba(0,255,170,0.06)), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
.proj-card:hover { border-color: var(--card-accent, #00ffaa44); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.proj-card:hover::before { opacity: 1; }

.proj-card-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--card-accent, #00ffaa);
	margin-bottom: 14px;
	opacity: 0.8;
}
.proj-card-title {
	font-family: 'Syne', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 12px 0;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.proj-card-desc {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: #475569;
	line-height: 1.7;
	margin: 0 0 24px 0;
}
.proj-card-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.proj-card-tag {
	background: #0d111b;
	border: 1px solid #1e2535;
	border-radius: 6px;
	padding: 4px 10px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	color: #64748b;
	letter-spacing: 0.06em;
}
.proj-card-cta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--card-accent, #00ffaa);
	font-weight: 700;
	letter-spacing: 0.05em;
	transition: gap 0.2s;
}
.proj-card:hover .proj-card-cta { gap: 10px; }

/* ── Project Overlay ── */
.proj-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #08090e;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #1e2535 transparent;
}
.proj-overlay.active { display: block; animation: overlayIn 0.35s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes overlayIn { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }

.proj-overlay-close {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 32px;
	background: rgba(8,9,14,0.85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid #1e2535;
}
.proj-overlay-close button {
	background: #161b27;
	border: 1px solid #2e3a50;
	border-radius: 10px;
	width: 42px;
	height: 42px;
	cursor: pointer;
	color: #e2e8f0;
	font-size: 20px;
	line-height: 1;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.proj-overlay-close button:hover { background: #ff4757; border-color: #ff4757; color: #fff; }
.proj-overlay-close span { display: none; }

.proj-overlay-body {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 32px 80px;
}
@media (max-width: 600px) { .proj-overlay-body { padding: 32px 20px 60px; } }

/* ── Overlay typography ── */
.ov-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.ov-title {
	font-family: 'Syne', sans-serif;
	font-size: clamp(32px, 6vw, 52px);
	font-weight: 800;
	color: #fff;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
	line-height: 1.05;
}
.ov-sub {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: #475569;
	margin-bottom: 32px;
}
.ov-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, #1e2535, transparent);
	margin: 36px 0;
}
.ov-section-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #334155;
	margin-bottom: 16px;
}
.ov-prose {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: #94a3b8;
	line-height: 1.8;
	margin-bottom: 24px;
}
.ov-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}
.ov-tag {
	background: #0d111b;
	border: 1px solid #1e2535;
	border-radius: 8px;
	padding: 6px 14px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: #64748b;
}

/* ── Architecture diagram ── */
.ov-diagram {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ov-node {
	border-radius: 10px;
	padding: 16px 20px;
	transition: transform 0.2s, box-shadow 0.2s;
}
.ov-row {
	display: flex;
	gap: 10px;
}
.ov-row > .ov-node { flex: 1; }
.ov-node-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.05em; }
.ov-node-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #475569; line-height: 1.5; }
.ov-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.ov-arrow .vline { width: 1.5px; height: 22px; background: linear-gradient(180deg, #1e2535, #475569, #1e2535); }
.ov-arrow .vhead { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #475569; }
.ov-arrow-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #334155; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; margin: 2px 0; }

/* ── Pill row ── */
.ov-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ov-pill {
	background: transparent;
	border: 1px solid #1e2535;
	border-radius: 100px;
	padding: 7px 16px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: #475569;
	letter-spacing: 0.06em;
}

/* ── Diagram animations ── */
@keyframes ovFadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes ovPulse { 0%,100% { opacity:0.3; transform:scale(1); } 50% { opacity:0.7; transform:scale(1.015); } }
.proj-overlay.active .ov-diagram > * {
	animation: ovFadeUp 0.4s ease both;
}
.proj-overlay.active .ov-diagram > *:nth-child(1) { animation-delay: 0.15s; }
.proj-overlay.active .ov-diagram > *:nth-child(2) { animation-delay: 0.2s; }
.proj-overlay.active .ov-diagram > *:nth-child(3) { animation-delay: 0.25s; }
.proj-overlay.active .ov-diagram > *:nth-child(4) { animation-delay: 0.3s; }
.proj-overlay.active .ov-diagram > *:nth-child(5) { animation-delay: 0.35s; }
.proj-overlay.active .ov-diagram > *:nth-child(6) { animation-delay: 0.4s; }
.proj-overlay.active .ov-diagram > *:nth-child(7) { animation-delay: 0.45s; }
.proj-overlay.active .ov-diagram > *:nth-child(8) { animation-delay: 0.5s; }

.gallery__link { cursor: pointer; transition: transform 0.2s; }
.gallery__link:hover { transform: translateY(-2px); }

/* ==========================================================
   OVERLAY BACKGROUNDS (scoped grid / glow per project)
   ========================================================== */

#proj-kollective::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(249,115,22,0.04), transparent),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(167,139,250,0.05), transparent),
    linear-gradient(rgba(255,255,255,0.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.013) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  pointer-events: none;
  z-index: 0;
}

#proj-webserv::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,170,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,170,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

#proj-rag::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(234,179,8,0.06), transparent),
    linear-gradient(rgba(234,179,8,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,179,8,0.025) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  pointer-events: none;
  z-index: 0;
}

#proj-inception::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

.proj-overlay-body { position: relative; z-index: 1; }

/* ==========================================================
   SHARED OVERLAY TITLE BLOCK
   ========================================================== */
.ov-title-block { text-align: center; margin-bottom: 52px; }
.ov-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ov-h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ov-subtitle {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #3d4a6b;
  letter-spacing: 0.1em;
}

/* ==========================================================
   KOLLECTIVE styles  (#proj-kollective scope)
   ========================================================== */
#proj-kollective .user-row {
  display: flex; justify-content: center; gap: 16px;
  animation: rise 0.5s 0.1s ease both;
}
#proj-kollective .user-pill {
  background: #0c0e18;
  border: 1px solid #1e2438;
  border-radius: 100px; padding: 9px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #3d4a6b;
  letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 8px;
}
#proj-kollective .user-pill .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 8px #34d399;
  animation: ovBlink 2s infinite;
}
#proj-kollective .kol-conn { display: flex; justify-content: center; }
#proj-kollective .kol-conn-v { display: flex; flex-direction: column; align-items: center; }
#proj-kollective .kol-conn-line { width: 1.5px; height: 20px; }
#proj-kollective .kol-conn-head { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
#proj-kollective .kol-conn-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 0.2em;
  color: #3d4a6b; margin: 3px 0; opacity: 0.6; text-transform: uppercase;
}
#proj-kollective .gateway-row { display: flex; justify-content: center; animation: rise 0.5s 0.2s ease both; }
#proj-kollective .gateway {
  background: linear-gradient(135deg, #180f04, #1a1108);
  border: 2px solid #f97316; border-radius: 14px;
  padding: 18px 32px; display: flex; align-items: center; gap: 20px;
  width: 100%; max-width: 600px; position: relative;
  box-shadow: 0 0 40px rgba(249,115,22,0.1);
}
#proj-kollective .gateway::before {
  content: ''; position: absolute; inset: -5px; border-radius: 18px;
  border: 1px solid rgba(249,115,22,0.15);
  animation: ovPulse 3s ease infinite; pointer-events: none;
}
#proj-kollective .gw-icon { font-size: 28px; }
#proj-kollective .gw-title { font-size: 15px; font-weight: 700; color: #f97316; letter-spacing: 0.04em; margin-bottom: 4px; }
#proj-kollective .gw-desc { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #3d4a6b; line-height: 1.7; }
#proj-kollective .gw-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
#proj-kollective .gw-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 8px; padding: 2px 8px;
  border-radius: 4px; background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.25); color: #f97316; letter-spacing: 0.08em;
}
#proj-kollective .services-section {
  border: 1px solid #1e2438; border-radius: 16px; padding: 20px;
  background: rgba(13,15,24,0.7); position: relative;
  animation: rise 0.5s 0.3s ease both;
}
#proj-kollective .section-label {
  position: absolute; top: -10px; left: 20px;
  background: #08090e; padding: 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: 0.25em; text-transform: uppercase; color: #3d4a6b;
}
#proj-kollective .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
#proj-kollective .svc {
  border-radius: 11px; padding: 14px;
  background: #0d0f18; border: 1px solid #141828;
  transition: transform 0.2s; cursor: default;
}
#proj-kollective .svc:hover { transform: translateY(-2px); }
#proj-kollective .svc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#proj-kollective .svc-icon { font-size: 15px; }
#proj-kollective .svc-name { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
#proj-kollective .svc-desc { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #4d5c7a; line-height: 1.7; }
#proj-kollective .svc-db { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.5; display: flex; align-items: center; gap: 4px; }
#proj-kollective .s-auth     { border-color: rgba(251,113,133,0.25); } #proj-kollective .s-auth     .svc-name { color: #fb7185; }
#proj-kollective .s-social   { border-color: rgba(56,189,248,0.25); }  #proj-kollective .s-social   .svc-name { color: #38bdf8; }
#proj-kollective .s-guild    { border-color: rgba(167,139,250,0.25); } #proj-kollective .s-guild    .svc-name { color: #a78bfa; }
#proj-kollective .s-chat     { border-color: rgba(52,211,153,0.25); }  #proj-kollective .s-chat     .svc-name { color: #34d399; }
#proj-kollective .s-ai       { border-color: rgba(251,191,36,0.25); }  #proj-kollective .s-ai       .svc-name { color: #fbbf24; }
#proj-kollective .s-rag      { border-color: rgba(232,121,249,0.25); } #proj-kollective .s-rag      .svc-name { color: #e879f9; }
#proj-kollective .s-storage  { border-color: rgba(100,116,139,0.25); } #proj-kollective .s-storage  .svc-name { color: #64748b; }
#proj-kollective .s-frontend { border-color: rgba(255,255,255,0.15); } #proj-kollective .s-frontend .svc-name { color: #fff; }
#proj-kollective .infra-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; animation: rise 0.5s 0.4s ease both; }
#proj-kollective .infra-card { border-radius: 11px; padding: 14px 16px; background: #0d0f18; border: 1px solid #141828; }
#proj-kollective .infra-title { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
#proj-kollective .infra-items { display: flex; flex-direction: column; gap: 5px; }
#proj-kollective .infra-item { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #4d5c7a; display: flex; align-items: center; gap: 6px; line-height: 1.5; }
#proj-kollective .infra-item::before { content: '–'; opacity: 0.3; }
#proj-kollective .kol-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; animation: rise 0.5s 0.55s ease both; }
#proj-kollective .feat { background: #0d0f18; border: 1px solid #1e2438; border-radius: 100px; padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #3d4a6b; letter-spacing: 0.08em; transition: all 0.2s; }
#proj-kollective .feat:hover { color: #c8d0e8; }
#proj-kollective .kol-diagram { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 760px) {
  #proj-kollective .services-grid { grid-template-columns: repeat(2, 1fr); }
  #proj-kollective .infra-row { grid-template-columns: 1fr; }
  #proj-kollective .gw-tags { display: none; }
}

/* ==========================================================
   WEBSERV styles  (#proj-webserv scope)
   ========================================================== */
#proj-webserv .ws-diagram { display: flex; flex-direction: column; gap: 0; max-width: 960px; margin: 0 auto; }
#proj-webserv .ws-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
#proj-webserv .ws-row:nth-child(1) { animation: ovFadeUp 0.5s 0.1s ease both; }
#proj-webserv .ws-row:nth-child(3) { animation: ovFadeUp 0.5s 0.2s ease both; }
#proj-webserv .ws-row:nth-child(5) { animation: ovFadeUp 0.5s 0.3s ease both; }
#proj-webserv .ws-row:nth-child(7) { animation: ovFadeUp 0.5s 0.4s ease both; }
#proj-webserv .ws-node { border-radius: 12px; padding: 18px 22px; position: relative; transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
#proj-webserv .ws-node:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
#proj-webserv .ws-node-icon { font-size: 22px; margin-bottom: 8px; }
#proj-webserv .ws-node-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
#proj-webserv .ws-node-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.55; line-height: 1.5; }
#proj-webserv .ws-client { background: linear-gradient(135deg,#1a1f2e,#131720); border: 1px solid #2a3040; width: 160px; text-align: center; }
#proj-webserv .ws-client .ws-node-title { color: #7dd3fc; }
#proj-webserv .ws-core {
  background: linear-gradient(135deg,#001a10,#002a18);
  border: 2px solid #00ffaa;
  box-shadow: 0 0 30px rgba(0,255,170,0.12), inset 0 0 30px rgba(0,255,170,0.03);
  min-width: 280px; text-align: center; padding: 28px 32px;
}
#proj-webserv .ws-core .ws-node-title { font-size: 16px; color: #00ffaa; margin-bottom: 6px; }
#proj-webserv .ws-core .ws-node-sub { font-size: 11px; opacity: 0.6; }
#proj-webserv .ws-pulse-ring { position: absolute; inset: -8px; border-radius: 18px; border: 1px solid rgba(0,255,170,0.2); animation: ovPulse 2.5s ease infinite; pointer-events: none; }
#proj-webserv .ws-comp { background: #111420; border: 1px solid #1e2535; min-width: 130px; text-align: center; }
#proj-webserv .ws-orange { border-color: #ff6b35; } #proj-webserv .ws-orange .ws-node-title { color: #ff6b35; }
#proj-webserv .ws-purple { border-color: #a78bfa; } #proj-webserv .ws-purple .ws-node-title { color: #a78bfa; }
#proj-webserv .ws-blue   { border-color: #38bdf8; } #proj-webserv .ws-blue   .ws-node-title { color: #38bdf8; }
#proj-webserv .ws-yellow { border-color: #fbbf24; } #proj-webserv .ws-yellow .ws-node-title { color: #fbbf24; }
#proj-webserv .ws-pink   { border-color: #f472b6; } #proj-webserv .ws-pink   .ws-node-title { color: #f472b6; }
#proj-webserv .ws-v-conn { display: flex; justify-content: center; padding: 4px 0; }
#proj-webserv .ws-vline { width: 1.5px; height: 28px; background: linear-gradient(180deg,#00ffaa44,#00ffaa,#00ffaa44); }
#proj-webserv .ws-vhead { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #00ffaa; }
#proj-webserv .ws-sep { height: 1.5px; background: #1e2535; align-self: center; }
#proj-webserv .ws-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
#proj-webserv .ws-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 3px 8px; border-radius: 4px; border: 1px solid #1e2535; color: #475569; letter-spacing: 0.08em; }
#proj-webserv .ws-caption { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #475569; letter-spacing: 0.15em; margin-bottom: 4px; }
#proj-webserv .ws-features { display: flex; gap: 12px; justify-content: center; margin-top: 40px; flex-wrap: wrap; animation: ovFadeUp 0.6s 0.6s ease both; opacity: 0; animation-fill-mode: both; }
#proj-webserv .ws-feature-pill { background: #0d111b; border: 1px solid #1e2535; border-radius: 100px; padding: 8px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #64748b; letter-spacing: 0.08em; transition: border-color 0.2s, color 0.2s; }
#proj-webserv .ws-feature-pill:hover { border-color: #00ffaa44; color: #00ffaa; }
@media (max-width: 600px) {
  #proj-webserv .ws-core { min-width: 220px; }
  #proj-webserv .ws-comp { min-width: 100px; }
  #proj-webserv .ws-client { width: 120px; }
}

/* ==========================================================
   RAG styles  (#proj-rag scope)
   ========================================================== */
#proj-rag .rag-flows { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
#proj-rag .flow-panel { border: 1px solid #1a1f2a; border-radius: 16px; padding: 24px 20px; background: #0a0d14; position: relative; animation: ovFadeUp 0.6s ease both; opacity: 0; animation-fill-mode: both; }
#proj-rag .flow-panel:nth-child(1) { animation-delay: 0.15s; border-color: #eab30830; }
#proj-rag .flow-panel:nth-child(2) { animation-delay: 0.25s; border-color: #34d39930; }
#proj-rag .flow-title { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
#proj-rag .flow-title::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.2; }
#proj-rag .flow-title.ingest { color: #eab308; }
#proj-rag .flow-title.query  { color: #34d399; }
#proj-rag .rag-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; margin-bottom: 8px; transition: transform 0.2s; cursor: default; }
#proj-rag .rag-step:hover { transform: translateX(3px); }
#proj-rag .step-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
#proj-rag .step-title { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; margin-bottom: 3px; }
#proj-rag .step-desc { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.45; line-height: 1.6; }
#proj-rag .ingest .rag-step { background: #0e1118; }
#proj-rag .ingest .step-num  { background: #eab30820; color: #eab308; border: 1px solid #eab30840; }
#proj-rag .ingest .step-title { color: #fde68a; }
#proj-rag .query  .rag-step { background: #0a1210; }
#proj-rag .query  .step-num  { background: #34d39920; color: #34d399; border: 1px solid #34d39940; }
#proj-rag .query  .step-title { color: #6ee7b7; }
#proj-rag .step-arrow { display: flex; justify-content: center; margin: 2px 0; opacity: 0.3; font-size: 10px; }
#proj-rag .db-section { animation: ovFadeUp 0.6s 0.35s ease both; opacity: 0; animation-fill-mode: both; margin-bottom: 24px; }
#proj-rag .db-card { border: 2px solid #eab30840; border-radius: 16px; padding: 24px 28px; background: linear-gradient(135deg,#0e1008,#12110a); box-shadow: 0 0 40px rgba(234,179,8,0.07); display: flex; align-items: center; gap: 28px; position: relative; }
#proj-rag .db-pulse { position: absolute; inset: -6px; border-radius: 20px; border: 1px solid rgba(234,179,8,0.15); animation: ovPulse 3s ease infinite; pointer-events: none; }
#proj-rag .db-icon { font-size: 36px; flex-shrink: 0; }
#proj-rag .db-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 800; color: #eab308; margin-bottom: 6px; }
#proj-rag .db-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #64748b; line-height: 1.7; }
#proj-rag .db-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#proj-rag .db-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 3px 8px; border-radius: 5px; background: #eab30815; border: 1px solid #eab30830; color: #eab308; letter-spacing: 0.08em; }
#proj-rag .schema { background: #080a0c; border: 1px solid #1a1f2a; border-radius: 10px; padding: 14px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #475569; line-height: 1.8; flex: 1; }
#proj-rag .schema .kw { color: #eab308; opacity: 0.8; }
#proj-rag .schema .type { color: #818cf8; }
#proj-rag .schema .comment { color: #334155; }
#proj-rag .stack-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; animation: ovFadeUp 0.6s 0.5s ease both; opacity: 0; animation-fill-mode: both; }
#proj-rag .stack-pill { background: #0d0f18; border: 1px solid #1e2535; border-radius: 100px; padding: 7px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #64748b; letter-spacing: 0.08em; transition: border-color 0.2s, color 0.2s; }
#proj-rag .stack-pill:hover { border-color: #eab30840; color: #eab308; }
@media (max-width: 680px) {
  #proj-rag .rag-flows { grid-template-columns: 1fr; }
  #proj-rag .db-card { flex-direction: column; }
}

/* ==========================================================
   INCEPTION styles  (#proj-inception scope)
   ========================================================== */
#proj-inception .inet-row { display: flex; justify-content: center; margin-bottom: 0; animation: ovFadeUp 0.5s 0.1s ease both; opacity: 0; animation-fill-mode: both; }
#proj-inception .inet-node { background: #0d0f1a; border: 1px solid #1e2235; border-radius: 50px; padding: 10px 28px; display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #64748b; letter-spacing: 0.1em; }
#proj-inception .inet-dot { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; animation: ovBlink 2s ease infinite; }
#proj-inception .inc-v { display: flex; justify-content: center; padding: 2px 0; }
#proj-inception .inc-vline { width: 1.5px; height: 24px; background: linear-gradient(180deg,#818cf844,#818cf8,#818cf844); }
#proj-inception .inc-vhead { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #818cf8; margin: 0 auto; }
#proj-inception .inc-caption { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #334155; letter-spacing: 0.12em; margin-bottom: 6px; }
#proj-inception .docker-host { border: 1.5px dashed #1e2540; border-radius: 20px; padding: 28px; position: relative; animation: ovFadeUp 0.6s 0.2s ease both; opacity: 0; animation-fill-mode: both; }
#proj-inception .docker-label { position: absolute; top: -11px; left: 24px; background: #08090e; padding: 0 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #334155; letter-spacing: 0.15em; text-transform: uppercase; }
#proj-inception .network-zone { border: 1px solid #1a1f35; border-radius: 14px; padding: 20px; position: relative; background: #0a0c18; }
#proj-inception .network-label { position: absolute; top: -10px; left: 18px; background: #0a0c18; padding: 0 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #818cf8; letter-spacing: 0.2em; text-transform: uppercase; }
#proj-inception .inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
#proj-inception .inc-svc { border-radius: 10px; padding: 14px 16px; background: #0e1420; position: relative; transition: transform 0.2s, box-shadow 0.2s; cursor: default; overflow: hidden; }
#proj-inception .inc-svc::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--svc-glow, rgba(129,140,248,0.08)), transparent); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
#proj-inception .inc-svc:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px var(--svc-border, rgba(129,140,248,0.2)); }
#proj-inception .inc-svc:hover::before { opacity: 1; }
#proj-inception .svc-nginx     { --svc-glow: rgba(34,211,238,0.1);   --svc-border: rgba(34,211,238,0.25); }
#proj-inception .svc-wordpress { --svc-glow: rgba(129,140,248,0.1);  --svc-border: rgba(129,140,248,0.25); }
#proj-inception .svc-mariadb   { --svc-glow: rgba(245,158,11,0.1);   --svc-border: rgba(245,158,11,0.25); }
#proj-inception .svc-redis     { --svc-glow: rgba(244,115,80,0.1);   --svc-border: rgba(244,115,80,0.25); }
#proj-inception .svc-adminer   { --svc-glow: rgba(52,211,153,0.1);   --svc-border: rgba(52,211,153,0.25); }
#proj-inception .svc-ftp       { --svc-glow: rgba(251,113,133,0.1);  --svc-border: rgba(251,113,133,0.25); }
#proj-inception .svc-website   { --svc-glow: rgba(167,139,250,0.1);  --svc-border: rgba(167,139,250,0.25); }
#proj-inception .svc-cadvisor  { --svc-glow: rgba(110,231,183,0.1);  --svc-border: rgba(110,231,183,0.25); }
#proj-inception .s-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#proj-inception .s-icon { font-size: 16px; }
#proj-inception .s-name { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
#proj-inception .s-desc { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.5; line-height: 1.6; }
#proj-inception .s-port { margin-top: 8px; display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.08em; }
#proj-inception .s-volume { margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.4; display: flex; align-items: center; gap: 4px; }
#proj-inception .inc-bonus { position: absolute; top: -8px; right: 10px; background: linear-gradient(135deg,#7c3aed,#4f46e5); font-family: 'JetBrains Mono', monospace; font-size: 8px; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.1em; color: #e0e7ff; }
#proj-inception .svc-nginx     { border: 1px solid #22d3ee44; } #proj-inception .svc-nginx     .s-name { color: #22d3ee; } #proj-inception .svc-nginx     .s-port { background: #22d3ee15; color: #22d3ee; border: 1px solid #22d3ee33; }
#proj-inception .svc-wordpress { border: 1px solid #818cf844; } #proj-inception .svc-wordpress .s-name { color: #818cf8; } #proj-inception .svc-wordpress .s-port { background: #818cf815; color: #818cf8; border: 1px solid #818cf833; }
#proj-inception .svc-mariadb   { border: 1px solid #f59e0b44; } #proj-inception .svc-mariadb   .s-name { color: #f59e0b; } #proj-inception .svc-mariadb   .s-port { background: #f59e0b15; color: #f59e0b; border: 1px solid #f59e0b33; }
#proj-inception .svc-redis     { border: 1px solid #f4735044; } #proj-inception .svc-redis     .s-name { color: #f47350; } #proj-inception .svc-redis     .s-port { background: #f4735015; color: #f47350; border: 1px solid #f4735033; }
#proj-inception .svc-adminer   { border: 1px solid #34d39944; } #proj-inception .svc-adminer   .s-name { color: #34d399; } #proj-inception .svc-adminer   .s-port { background: #34d39915; color: #34d399; border: 1px solid #34d39933; }
#proj-inception .svc-ftp       { border-color: #fb718544; }    #proj-inception .svc-ftp       .s-name { color: #fb7185; } #proj-inception .svc-ftp       .s-port { background: #fb718515; color: #fb7185; border: 1px solid #fb718533; }
#proj-inception .svc-website   { border: 1px solid #a78bfa44; } #proj-inception .svc-website   .s-name { color: #a78bfa; } #proj-inception .svc-website   .s-port { background: #a78bfa15; color: #a78bfa; border: 1px solid #a78bfa33; }
#proj-inception .svc-cadvisor  { border: 1px solid #6ee7b744; } #proj-inception .svc-cadvisor  .s-name { color: #6ee7b7; } #proj-inception .svc-cadvisor  .s-port { background: #6ee7b715; color: #6ee7b7; border: 1px solid #6ee7b733; }
#proj-inception .volumes-row { display: flex; justify-content: center; gap: 20px; margin-top: 24px; animation: ovFadeUp 0.6s 0.6s ease both; opacity: 0; animation-fill-mode: both; }
#proj-inception .volume { background: #0a0d18; border: 1px dashed #1e2535; border-radius: 10px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #475569; transition: border-color 0.2s; }
#proj-inception .volume:hover { border-color: #334155; color: #94a3b8; }
#proj-inception .vol-icon { font-size: 16px; }
#proj-inception .vol-name { color: #94a3b8; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; }
#proj-inception .vol-path { font-family: 'JetBrains Mono', monospace; font-size: 9px; opacity: 0.5; margin-top: 2px; }
#proj-inception .deps-row { display: flex; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; animation: ovFadeUp 0.6s 0.7s ease both; opacity: 0; animation-fill-mode: both; }
#proj-inception .dep-arrow { font-family: 'JetBrains Mono', monospace; font-size: 9px; background: #0d0f1a; border: 1px solid #1a1f2e; border-radius: 6px; padding: 5px 10px; color: #475569; letter-spacing: 0.05em; display: flex; align-items: center; gap: 5px; }
#proj-inception .dep-arr { color: #334155; }
@media (max-width: 700px) {
  #proj-inception .inc-grid { grid-template-columns: repeat(2, 1fr); }
  #proj-inception .volumes-row { flex-direction: column; align-items: center; }
}

/* Shared keyframes */
@keyframes ovBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================
   GITHUB CTA
   ========================================================== */
.github-cta {
  text-align: center;
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #334155;
  letter-spacing: 0.05em;
}
.github-cta a {
  color: #64748b;
  text-decoration: none;
  border-bottom: 1px solid #334155;
  transition: color 0.2s, border-color 0.2s;
}
.github-cta a:hover { color: #94a3b8; border-color: #64748b; }

/* ==========================================================
   SITE-WIDE THEME OVERRIDE — navy-black card palette
   ========================================================== */
[color-scheme=dark] {
  /* backgrounds */
  --base:               #07080c;
  --base-tint:          #0d0f18;
  --base-shade:         #04050a;
  --base--dark:         #07080c;
  --base-tint--dark:    #0d0f18;
  --base-shade--dark:   #04050a;

  /* borders & strokes */
  --stroke-elements:              #141828;
  --stroke-controls:              #1e2438;
  --stroke-controls-neutral:      rgba(255,255,255,0.06);
  --stroke-elements--dark:        #141828;
  --stroke-controls--dark:        #1e2438;
  --stroke-controls-neutral--dark: rgba(255,255,255,0.06);

  /* text */
  --t-bright:           #c8d0e8;
  --t-medium:           #7a8aac;
  --t-muted:            #3d4a6b;
  --t-bright--dark:     #c8d0e8;
  --t-medium--dark:     #7a8aac;
  --t-muted--dark:      #3d4a6b;
  --t-disabled--dark:   #2d3a55;
  --t-placeholder--dark:#1e2a40;

  /* accents — indigo / orange to echo the cards */
  --accent:             #818cf8;
  --secondary:          #f97316;
  --secondary-rgba:     rgba(249,115,22,0.12);
  --accent--dark:       #818cf8;
  --secondary--dark:    #f97316;
  --secondary-rgba--dark: rgba(249,115,22,0.12);
  --t-accent:           #a78bfa;
  --t-secondary:        #fb923c;
  --t-accent--dark:     #a78bfa;
  --t-secondary--dark:  #fb923c;

  /* gradient token */
  --gradient-one:       #818cf8;
  --gradient-two:       #f97316;
  --gradient-three:     #a78bfa;
  --gradient-one--dark: #818cf8;
  --gradient-two--dark: #f97316;
  --gradient-three--dark: #a78bfa;

  /* opposite surface (used on inverted elements) */
  --base-opp:           #c8d0e8;
  --t-opp-bright:       #07080c;
  --t-opp-medium:       #1a2035;
  --t-opp-muted:        #1e2a40;
  --base-opp--dark:     #c8d0e8;
  --t-opp-bright--dark: #07080c;
  --t-opp-medium--dark: #1a2035;
  --t-opp-muted--dark:  #1e2a40;
}

/* Subtle global grid overlay so the main page matches the overlay aesthetic */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}