@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800&family=Inter:wght@400;500;600&display=swap');

:root{--bg:#0e0c0a;--bg2:#171310;--ink:#f5efe6;--muted:#a89e92;--acid:#ff6b2c;--line:rgba(255,240,220,.1);--radius:24px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,.wordmark{font-family:'Unbounded',sans-serif}

header{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);background:rgba(8,9,12,.7);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);z-index:10;
}
.wordmark{font-weight:800;font-size:18px;letter-spacing:.06em;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--acid)}
.cta{
  display:inline-block;padding:12px 24px;border-radius:100px;background:var(--acid);
  color:#0a0c00;font-weight:600;font-size:14px;text-decoration:none;transition:transform .2s;
}
.cta:hover{transform:translateY(-2px)}

.page-head{padding:110px clamp(20px,5vw,64px) 40px}
.kicker{color:var(--acid);font-size:13px;letter-spacing:.25em;text-transform:uppercase;font-weight:600}
.page-head h1{font-size:clamp(30px,5vw,56px);font-weight:600;margin:16px 0 16px}
.page-head p{color:var(--muted);max-width:56ch}
.back{color:var(--muted);text-decoration:none;font-size:14px;display:inline-block;margin-bottom:28px}
.back:hover{color:var(--acid)}

.works{
  padding:20px clamp(20px,5vw,64px) 100px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px;
}
.work{
  display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--bg2);
  transition:transform .25s,border-color .25s;
}
.work:hover{transform:translateY(-6px);border-color:rgba(200,255,46,.5)}

/* CSS-макет сайта внутри карточки */
.shot{height:210px;padding:22px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.shot .bar{display:flex;gap:6px;margin-bottom:6px}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.shot .hero-line{height:16px;border-radius:6px;background:rgba(255,255,255,.25);width:70%}
.shot .hero-line.short{width:45%}
.shot .pill{width:110px;height:26px;border-radius:100px}
.shot .row{display:flex;gap:10px;margin-top:auto}
.shot .row i{flex:1;height:56px;border-radius:10px;background:rgba(255,255,255,.08)}
.shot.t-coffee{background:linear-gradient(140deg,#2a1c12,#4a2f1b)}
.shot.t-coffee .pill{background:#f0b35c}
.shot.t-fit{background:linear-gradient(140deg,#101c26,#16303f)}
.shot.t-fit .pill{background:#39d0ff}
.shot.t-law{background:linear-gradient(140deg,#15151d,#242433)}
.shot.t-law .pill{background:#b8a86a}
.shot.t-logistics{background:linear-gradient(140deg,#0c1a14,#1a3427)}
.shot.t-logistics .pill{background:#ffb648}
.shot.t-media{background:linear-gradient(140deg,#170f26,#2b1a4d)}
.shot.t-media .pill{background:#ec4899}
.shot.t-finlab{background:linear-gradient(140deg,#e9f2ea,#d3e4d6)}
.shot.t-finlab .pill{background:#1d8a4e}
.shot.t-finlab .hero-line{background:rgba(21,33,26,.22)}
.shot.t-finlab .row i{background:rgba(29,138,78,.16)}

.work-body{padding:24px 26px 28px}
.work-body h3{font-size:19px;font-weight:600}
.work-body p{color:var(--muted);font-size:14px;margin:8px 0 14px}
.tag{display:inline-block;border:1px solid var(--line);border-radius:100px;padding:4px 12px;font-size:12px;color:var(--muted);margin-right:6px}
.go{color:var(--acid);font-size:13px;font-weight:600;letter-spacing:.06em;display:block;margin-top:16px}

footer{
  padding:32px clamp(20px,5vw,64px);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;
}
footer a{color:var(--muted)}