:root{
  --bg:#0b0f14; --card:#0f1620; --muted:#8aa1b4; --text:#e6eef5;
  --accent:#a3e635; --accent2:#22d3ee; --border:#1a2230;
  --shadow:0 10px 30px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', Arial;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(163,230,53,.12), transparent 60%), var(--bg);
  color:var(--text); line-height:1.6
}
.container{max-width:1080px;margin-inline:auto;padding:24px}

.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:16px;top:16px;z-index:999;background:#111;color:#fff;padding:8px 10px;border-radius:8px}

.site-header{display:flex;align-items:center;gap:24px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);text-decoration:none}
.logo svg .bg{fill:var(--card)}
.logo svg .mark{stroke:var(--accent);stroke-width:10;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--text)}
.theme-toggle{background:transparent;border:1px solid var(--border);color:var(--muted);padding:8px 10px;border-radius:10px;cursor:pointer}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;margin-top:12px}
.hero__copy h1{font-size:42px;line-height:1.15;margin:0 0 8px}
.lead{font-size:18px;color:#c6d6e5}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px;padding:0;list-style:none}
.badge{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.02);font-weight:700}
.badge.accent{background:linear-gradient(90deg, rgba(163,230,53,.22), rgba(34,211,238,.18));border-color:#294233}
.cta{display:flex;gap:12px;margin:16px 0 10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--text);font-weight:700;transition:transform .08s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(180deg, rgba(163,230,53,.22), rgba(163,230,53,.14));border-color:#2a3820}
.btn.ghost{background:transparent}

.hero__visual{display:grid;gap:16px}
.portrait-wrap{display:grid;justify-items:center;gap:8px}
.portrait{
  width:220px;height:220px;object-fit:cover;border-radius:50%;
  border:2px solid #213040; box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 0 6px rgba(163,230,53,.10);
  background:#101822;
}
.portrait-wrap figcaption{color:var(--muted);font-size:14px}

.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.glass{backdrop-filter: blur(6px)}
.quick-stats .stat{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:12px;border-bottom:1px dashed #203042;padding:12px 8px}
.quick-stats .stat:last-child{border-bottom:none}
.stat__num{font-weight:800;font-size:20px}
.stat__label{color:var(--muted)}

.section{margin-top:40px}
.section h2{font-size:28px;margin:0 0 12px}
.ul{margin:8px 0 0 0;padding-left:18px}
.ul li{margin:6px 0}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card h3{margin:6px 0 6px}
.card .muted{color:var(--muted);font-size:14px;margin-top:-2px}
.svc .svc-meta{margin-top:10px;color:var(--muted);font-size:13px}

.pill{
  margin-top:10px; display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(163,230,53,.22), rgba(34,211,238,.18)); border:1px solid #294233;
  font-weight:800; letter-spacing:.01em;
}

.chips-head{margin-top:8px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chip{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.02);font-weight:700;letter-spacing:.02em}
.chip.kw{background:linear-gradient(90deg, rgba(163,230,53,.22), rgba(34,211,238,.18));border-color:#294233;box-shadow:0 2px 10px rgba(163,230,53,.18), 0 1px 6px rgba(34,211,238,.15)}

.contact{display:flex;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}
.tiny{font-size:12px}

.site-footer{border-top:1px solid var(--border);margin-top:40px;padding-top:16px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}
/* === Typography scaling & container tweaks === */
h1{font-size:clamp(28px, 5vw, 44px)}
h2{font-size:clamp(22px, 3.5vw, 28px)}
.lead{font-size:clamp(16px, 2.5vw, 18px)}
.container{padding:clamp(16px, 3vw, 24px)}

/* === Header & mobile nav === */
.menu-toggle{
  display:none;
  background:transparent;border:1px solid var(--border);
  color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer
}
@media (max-width: 860px){
  .menu-toggle{display:inline-flex}
  .nav{
    position:fixed;inset:64px 12px auto 12px; /* под шапкой */
    display:none;flex-direction:column;gap:10px;
    background:rgba(17,25,34,.98);border:1px solid var(--border);
    border-radius:14px; padding:14px; z-index:9999; box-shadow:var(--shadow)
  }
  .nav a{padding:10px 8px;border-radius:10px;background:transparent}
  .nav.nav--open{display:flex}
}

/* === Hero mobile improvements === */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr;gap:18px}
  .hero__copy{order:1}
  .hero__visual{order:2;justify-items:center}
  .portrait{width:180px;height:180px}
  .cta .btn{width:100%;justify-content:center}
  .badges{gap:6px}
}

/* === Education cards (stack) === */
.edu-stack{display:flex;flex-direction:column;gap:12px}
.edu-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid #1a2230;border-radius:16px;padding:16px 18px;
  box-shadow:0 10px 25px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03)
}
.edu-card + .edu-card{margin-top:-2px}        /* лёгкий «стек» */
.edu-title{font-weight:800;margin:0 0 6px}
.edu-meta{color:var(--muted);font-size:14px}

/* === Experience card === */
.exp-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid #1a2230;border-radius:16px;padding:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03)
}
.exp-card header h3{margin:4px 0}
.exp-card header .muted{margin:0 0 6px;display:block}

/* === Better touch targets === */
.btn{padding:12px 16px}
.badge{padding:8px 12px}

/* === Grid tighten on mobile === */
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }
/* === Game modal === */
.game-modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(8,12,18,.76); backdrop-filter: blur(6px);
  z-index:10000;
}
.game-modal.open{display:grid}
.game-wrap{
  width:min(100vw - 32px, 980px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:10px;
}
.hud{display:flex; align-items:center; justify-content:space-between}
.hud span{font-weight:800}
#cvGame{width:100%; height:auto; display:block; background:#0b1219; border-radius:12px; border:1px solid #182231}
.game-help{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px}

/* Кнопка в хедере на мобилках не ломает сетку */
@media (max-width: 860px){
  #playGame{width:100%}
}
/* === Fancy "do not press" button === */
.btn-tempt{
  position:relative; overflow:hidden; font-weight:800; letter-spacing:.02em;
  border-color:#2a3820; background:linear-gradient(90deg, rgba(163,230,53,.22), rgba(34,211,238,.18));
  box-shadow:0 8px 24px rgba(163,230,53,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-tempt::before, .btn-tempt::after{
  content:""; position:absolute; inset:-2px; border-radius:14px; pointer-events:none;
}
.btn-tempt::before{
  background:conic-gradient(from 0deg, rgba(163,230,53,.45), rgba(34,211,238,.35), rgba(163,230,53,.45));
  filter:blur(12px); opacity:.28; animation:pulse-glow 3.5s linear infinite;
}
.btn-tempt::after{
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.35), transparent 60%);
  transform:translateX(-120%); animation:sheen 5s ease-in-out infinite;
}
@keyframes pulse-glow{ 50%{opacity:.6; filter:blur(16px)} }
@keyframes sheen{ 0%{transform:translateX(-120%)} 60%{transform:translateX(140%)} 100%{transform:translateX(140%)} }

/* === Game modal polish === */
.game-modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(8,12,18,.76); backdrop-filter:blur(6px); z-index:10000;
}
.game-modal.open{display:grid}
.game-wrap{
  width:min(100vw - 24px, 1100px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:12px; display:grid; gap:10px;
}
.hud{display:flex; align-items:center; justify-content:space-between}
.hud span{
  font-weight:900; padding:6px 10px; border-radius:10px;
  background:rgba(0,0,0,.25); border:1px solid #1a2230;
}

/* close button — стеклянный кружок */
.game-close{
  width:36px;height:36px; display:inline-grid; place-items:center;
  border-radius:999px; border:1px solid #1a2230; background:rgba(255,255,255,.06);
  font-weight:900; box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.game-close:hover{ transform:translateY(-1px); }

/* Canvas + подсказка */
#cvGame{width:100%; height:auto; display:block; background:#0b1219; border-radius:12px; border:1px solid #182231}
.game-help{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px}

/* Мобила */
@media (max-width: 860px){
  #playGame{width:100%}
  .hud span{font-size:14px}
}