.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:var(--gap); align-items:center; padding: clamp(30px, 6vw, 80px) 0}
.hero__cta{display:flex; gap:12px; margin:24px 0 10px}
.hero__right{display:flex; justify-content:center}
.portrait{position:relative; width:clamp(260px, 42vw, 420px); aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow:hidden; background:linear-gradient(180deg,#f2f2f2,#ffffff)}
.portrait img{width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.05) brightness(.92)}
.badge{position:absolute; right:14px; top:14px; background: rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); padding:.4em .6em; border-radius:999px; font:600 12px/1 Poppins}
.chip{position:absolute; left:14px; background: rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); padding:.45em .7em; border-radius:999px; font:600 12px/1 Poppins}
.chip--top{top:18%} .chip--bottom{bottom:14%}

.scroll-hint{display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--muted)}
.scroll-icon{width:18px; height:28px; border:2px solid var(--muted); border-radius:10px; position:relative; display:inline-block}
.scroll-icon::after{content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; margin-left:-1.5px; background:var(--accent); border-radius:2px; animation: scroll 1.6s ease-in-out infinite}

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap:var(--gap)}
.facts{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.facts li{background:var(--card); border:1px solid rgba(0,0,0,.06); padding:18px; border-radius: var(--radius)}
.facts li span{font:800 20px/1 Poppins; color:var(--accent); margin-right:6px}

.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}

.dots{display:flex; gap:8px; align-items:center}
.dot{
  appearance:none;
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#9a9a9a;
  font:600 12px/34px Poppins, system-ui, sans-serif;
  text-align:center;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .08s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.dot:hover{
  background:#f4f4f4;
  border-color:rgba(0,0,0,.25);
  color:#222;
}
.dot:active{transform: scale(.97)}
.dot.is-active{
  background:#0a0a0a;
  border-color:#0a0a0a;
  color:#fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.12) inset, 0 4px 14px rgba(0,0,0,.10);
  cursor:default;
}

.work{padding:60px 0 10px; display:grid; gap:16px}
.card{display:none; background:var(--card); border:1px solid rgba(0,0,0,.06); padding:22px; border-radius: var(--radius); transition: transform .25s ease, opacity .25s ease}
.card.is-active{display:block}
.card h3{margin:0 0 8px; font:700 20px/1.2 Poppins}

/* writing удалён */
.contact{padding:60px 0 100px}
.contact-form{display:grid; gap:12px}
label{display:grid; gap:6px; color:#2b2b2b}
input, textarea{
  padding:12px 14px;
  background:#f9f9f9;
  color:var(--text);
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  outline:none
}
input:focus, textarea:focus{border-color:var(--accent)}

@media (max-width:980px){
  .hero{grid-template-columns: 1fr; padding-top: clamp(20px,4vw,40px)}
  .grid-2{grid-template-columns:1fr}
}
.site-header{display:grid; grid-template-columns:auto 1fr auto; align-items:center;}
.nav{justify-self:center;}
.header-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{width:40px; height:40px; display:inline-grid; place-items:center; border-radius:999px; border:1px solid rgba(0,0,0,.10); background:#fff; color:#0a0a0a; box-shadow: var(--shadow); cursor:pointer; transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;}
.icon-btn svg{width:18px; height:18px; fill: currentColor;}
.icon-btn:hover{background:#f2f2f2;}
.icon-btn:active{transform:scale(.98);}
.music-btn.is-playing{background:#0a0a0a;color:#fff;border-color:#0a0a0a;}
.btn:hover{color:inherit;}
.btn--primary:hover{color:#fff;}