/* Shared styles — denciaopin portfolio */
:root {
  --bg:       #1A2332;
  --card:     #1E2A3A;
  --dark:     #141D2B;
  --accent:   #00E5CC;
  --accent2:  #00B8A3;
  --text:     #ffffff;
  --muted:    #8B9CB0;
  --dim:      #5A6B7D;
  --border:   #2A3749;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.6;
}

.font-mono { font-family: 'JetBrains Mono', monospace !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 64px;
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 32px; padding: 0 24px;
}
.navbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 17px; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.navbar-logo span { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--muted);
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-socials { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.nav-socials a {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s;
}
.nav-socials a:hover { color: var(--accent); }

/* Sidebar */
.sidebar {
  position: fixed; left: 16px; top: 88px; z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.sidebar a {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none;
  transition: all 0.2s;
}
.sidebar a:hover { color: var(--accent); background: var(--card); }
.sidebar a.active { background: var(--accent); color: var(--dark); }

/* Main layout */
main { padding-top: 64px; padding-left: 76px; }

/* Section spacing */
.section { padding: 96px 48px; }
.section-sm { padding: 64px 48px; }
.container { max-width: 1200px; margin: 0 auto; }

/* Full-width backgrounds: фон секций уходит за sidebar до края viewport.
   margin-left: -76px компенсирует main padding-left, width расширяет блок
   на 76px чтобы покрыть весь viewport, padding-left/right: 98px держит
   контент в стороне от sidebar (sidebar заканчивается ~60px, 98 даёт ~38px зазора).
   !important — чтобы перебивать template-specific shorthand padding в page styles. */
.section, .page-hero, .article-hero, .hero, footer.footer {
  margin-left: -76px !important;
  width: calc(100% + 76px) !important;
  padding-left: 98px !important;
  padding-right: 98px !important;
}

/* Section header */
.section-header {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 48px;
}
.section-connector {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; margin-bottom: 16px;
}
.section-connector .dot {
  width: 8px; height: 8px;
  border: 1.5px solid var(--accent); border-radius: 50%;
}
.section-connector .line {
  width: 1px; height: 32px; background: var(--border);
}
.section-title {
  color: var(--accent); font-size: 32px; font-weight: 600; text-align: center;
}
.section-sub {
  color: var(--muted); font-size: 14px; font-style: italic;
  margin-top: 4px; text-align: center;
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Code tag decoration */
.code-tag { color: var(--dim); font-family: 'JetBrains Mono', monospace; font-size: 13px; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--dark);
  font-weight: 600; font-size: 14px;
  padding: 12px 28px; border-radius: 12px; border: none;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--accent2); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); color: var(--text);
  font-size: 14px; padding: 12px 28px; border-radius: 12px;
  cursor: pointer; text-decoration: none; background: transparent;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Tech badge */
.badge {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px;
}

/* Tag pill */
.tag-pill {
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--dark);
  font-size: 12px; font-weight: 500;
  border-radius: 9999px; padding: 4px 10px;
}

/* Footer */
.footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 48px;
}
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto 32px; }
.footer-logo { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.footer-logo span { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.footer-col h4 { color: var(--text); font-weight: 600; margin-bottom: 16px; font-size: 14px; }
.footer-col a { display: block; color: var(--muted); font-size: 13px; text-decoration: none; margin-bottom: 8px; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 24px;
  max-width: 1200px; margin: 0 auto;
}
.footer-bottom p { color: var(--dim); font-size: 12px; font-family: 'JetBrains Mono', monospace; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: var(--dim); font-size: 12px; text-decoration: none; transition: color 0.2s; }
.footer-bottom-links a:hover { color: var(--accent); }

/* Backgrounds */
.bg-dark { background: var(--dark); }
.bg-topo {
  background-image:
    linear-gradient(rgba(26,35,50,0.82), rgba(26,35,50,0.82)),
    url('img/bg-topo.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.code-watermark { position: relative; overflow: hidden; }
.code-watermark::before {
  content: 'def deploy(): docker.compose() nginx.ssl()\nasync def train(): model = SaigaNemo(gpus=3)\nconst api = FastAPI() api.mount("/ws", handler)\nCUDA_VISIBLE_DEVICES=0,1,2 python server.py\nDEFINE LLM_SERVICE quantize(model, "q4_k_m")';
  position: absolute; inset: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: rgba(0,229,204,0.035);
  white-space: pre; padding: 24px; pointer-events: none;
  overflow: hidden; line-height: 2.4;
}

/* SVG icons helpers */
.icon { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* Stat box */
.stat-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 20px;
}
.stat-num { color: var(--accent); font-size: 44px; font-weight: 700; line-height: 1; }
.stat-label { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }

/* Divider */
.divider { border-top: 1px solid var(--border); }

/* ── Custom Cursor ── */
html, body, a, button, select, input, textarea, label, [role=button], .card, .contact-link-card, .article-row { cursor: none !important; }
.cursor-dot {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  transition: width 0.18s, height 0.18s, background 0.18s;
  will-change: left, top;
}
.cursor-ring {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(0,229,204,0.45);
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, border-color 0.25s;
  will-change: left, top;
}
.cursor-dot.cursor-hover  { width: 14px; height: 14px; background: #fff; }
.cursor-ring.cursor-hover { width: 44px; height: 44px; border-color: var(--accent); }
.cursor-ring.cursor-click { width: 20px; height: 20px; border-color: #fff; }

/* ── Page Loader ── */
#page-loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease;
}
#loader-brand {
  position: relative; z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.05em;
  animation: loaderPulse 1.1s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}