/* Темы: по умолчанию 'light' (класс .light на :root), 'dark' — без класса. */
:root{
  --bg:#0b0c0f;
  --card:#12141a;
  --text:#e7eaf0;
  --muted:#9aa4b2;
  --primary:#5b8cff;
  --primary-ink:#0d224f;
  --border:#1f2430;
  --accent:#2a3242;
  --chip:#1a1f2b;
}
:root.light{
  --bg:#f7f8fa;
  --card:#ffffff;
  --text:#11131a;
  --muted:#667085;
  --primary:#3b6cff;
  --primary-ink:#e6edff;
  --border:#e7eaf0;
  --accent:#eef2f8;
  --chip:#eef1f6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.6;
}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.site-header{
  position:sticky; top:0; backdrop-filter: blur(8px);
  background:color-mix(in srgb, var(--bg) 75%, transparent);
  border-bottom:1px solid var(--border); z-index:10;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:.2px;text-decoration:none;color:var(--text);font-size:20px}
.logo .dot{color:var(--primary)}
.nav{display:flex;gap:16px}
.nav a{color:var(--text);opacity:.8;text-decoration:none;padding:6px 10px;border-radius:10px}
.nav a:hover,.nav a.active{background:var(--accent);opacity:1}

/* ==== Тумблер темы ==== */
.theme-toggle{
  position:relative;
  width:52px; height:30px;
  border-radius:999px;
  background:var(--accent);
  border:1px solid var(--border);
  cursor:pointer;
  outline: none;
  transition: .2s;
}
/* «Шарик» */
.theme-toggle::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:24px; height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s;
}
/* Положение шарика зависит от темы: в светлой — справа */
html.light .theme-toggle::after{
  transform: translateX(22px);
}

.hero{padding:48px 0;border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:1.4fr .8fr;align-items:center;gap:24px}
.lead{font-size:18px;opacity:.95}
.cta{display:flex;gap:12px;margin-top:16px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;border:1px solid var(--border);color:var(--text);background:var(--card);transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);border-color:transparent;color:#fff}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px;font-size:14px;border-radius:10px}
.meta{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:6px}
.avatar{width:100%;border-radius:16px;border:1px solid var(--border);background:var(--card)}
.section{padding:48px 0;border-bottom:1px solid var(--border)}
h1,h2{line-height:1.2;margin:0 0 12px}
h1{font-size:32px} h2{font-size:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip);border:1px solid var(--border);padding:8px 12px;border-radius:999px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}


/* ===== АНИМАЦИИ / ТЕНИ ДЛЯ КАРТОЧЕК ===== */

/* Универсальный класс для анимации появления при скролле */
.scroll-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Состояние, когда элемент видим */
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform 0.25s ease-out;
}

/* Псевдо-элемент для создания тени */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* Эффект при наведении */
.card:hover { transform: translateY(-4px); }
.card:hover::after { opacity: 1; }


.card h3{margin:0 0 6px;font-size:18px}
.card .tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;padding:6px 8px;background:var(--chip);border:1px solid var(--border);border-radius:999px}
.card .links{display:flex;gap:8px;margin-top:auto}
.section-cta{margin-top:16px}
.filters{display:flex;gap:12px;margin:12px 0 24px}
.filters input, .filters select{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.contact-card{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:16px;text-decoration:none;color:var(--text)}
.contact-card:hover{border-color:var(--primary)}
.site-footer{padding:20px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px;margin-top:12px}
.muted{color:var(--muted)}
.resume{max-width:820px}
.exp-item{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:16px;margin:12px 0}
.exp-head{display:flex;justify-content:space-between;gap:12px}
.exp-links{display:flex;gap:8px;margin-top:8px}

@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
}

/* Кастомные стили для ползунков прокрутки (скроллбаров) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 20px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
:root.light ::-webkit-scrollbar-thumb { background-color: #d1d5db; border-color: var(--bg); }
:root.light ::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

/* === Footer links (rect pills) === */
.foot-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.foot-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;                 /* небольшое скругление: как у .btn.small */
  background:var(--card);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  /* УБРАНО: тень по умолчанию (по запросу) */
  box-shadow: none;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    border-color .2s ease,
    background .2s ease; /* фон не меняем, но плавность пригодится */
}
/* :root.light .foot-links a — без тени в светлой теме тоже */
:root.light .foot-links a{ box-shadow:none; }

/* Ховер: меньшая тень + более тёмная и «толстая» рамка.
   Визуально утолщаем рамку через inset-обводку, чтобы не скакала вёрстка. */
.foot-links a:hover{
  transform: translateY(-2px);
  /* Небольшая внешняя тень при ховере */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, #000 40%),
    0 6px 14px rgba(0,0,0,.18);
  /* Слегка темнее основной рамки */
  border-color: color-mix(in srgb, var(--border) 70%, #000 30%);
  /* Фон НЕ меняем (убрано «серение») */
}