/* ==========================================================================
   Сайт-резюме Крюкова Романа. База: типографика, сетка, компоненты.
   Движение живёт отдельно в motion.css — этот файл про то, как страница
   выглядит СТОЯ. Снимаешь motion.* — база не ломается.

   Палитра снята пипеткой с видео-аватара (матричный дождь), а не подобрана
   на глаз: тёмная база #206040, блики #6CB484, горячая точка #DDFCE1.
   Акцент #4ADE80 — выбор владельца, яркий брат того же семейства.
   ========================================================================== */

:root{
  /* поверхности */
  --bg:        #0E1116;
  --bg-2:      #12161D;
  --card:      #151A22;
  --line:      #222A35;
  --line-soft: #1B2129;

  /* текст */
  --fg:        #E6EAF0;
  --fg-2:      #9BA6B4;
  --fg-3:      #6B7685;

  /* акцент и его семья из кадра */
  --ac:        #4ADE80;
  --ac-dim:    #6CB484;
  --ac-deep:   #206040;
  --ac-hot:    #DDFCE1;

  /* размеры */
  --wrap: 1120px;
  --pad:  24px;
  --r:    14px;
  --r-lg: 20px;

  /* один шаг отступов на весь сайт — «ничего не прыгает» */
  --s1: 8px;  --s2: 12px; --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 72px; --s8: 104px;

  --ease: cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 17px/1.6 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:'Unbounded', 'Onest', system-ui, sans-serif; font-weight:700; margin:0; line-height:1.12; letter-spacing:-.01em }
p{margin:0}
a{color:inherit}
img,video{display:block;max-width:100%}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

/* ---------------------------------------------------------------- секции */
.sec{ padding-block:var(--s8) }
.sec--tight{ padding-block:var(--s7) }

.sec__head{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s6) }
.sec__num{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:13px;
  color:var(--ac); letter-spacing:.08em;
}
.sec__title{ font-size:clamp(26px, 4.2vw, 40px) }
.sec__note{ color:var(--fg-2); font-size:15px; margin-left:auto }

/* ---------------------------------------------------------------- обложка */
.hero{ position:relative; padding-block:var(--s8) var(--s7); overflow:hidden }

/* сетка «пульта» — фон обложки, живёт под контентом */
.hero__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
  opacity:.7;
}
/* тёплое пятно от акцента сверху — глубина без картинок */
.hero__glow{
  position:absolute; inset:-20% -10% auto; height:70vh; z-index:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, color-mix(in oklab, var(--ac-deep) 55%, transparent), transparent 70%);
  filter:blur(20px);
}

.hero__in{ position:relative; z-index:1; display:grid; gap:var(--s6); grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){
  .hero__in{ grid-template-columns:180px minmax(0,1fr); align-items:center; gap:var(--s7) }
}

/* аватар — круг с кольцом */
.ava{
  position:relative; width:148px; aspect-ratio:1; border-radius:50%;
  margin:0; isolation:isolate;
}
@media (min-width:900px){ .ava{ width:180px } }
.ava__v{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  background:#000;
  box-shadow:0 0 0 1px var(--line), 0 18px 50px -18px color-mix(in oklab, var(--ac) 45%, transparent);
}
.ava__ring{
  position:absolute; inset:-7px; border-radius:50%; pointer-events:none;
  border:1px solid color-mix(in oklab, var(--ac) 34%, transparent);
}
.ava__dot{
  position:absolute; right:8px; bottom:8px; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background:rgba(14,17,22,.82); border:1px solid var(--line);
  font-size:12px; color:var(--fg-2); white-space:nowrap;
  backdrop-filter:blur(6px);
}
.ava__dot::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ac); box-shadow:0 0 0 3px color-mix(in oklab, var(--ac) 22%, transparent);
}

/* имя и оффер */
.hero__kicker{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ac-dim); margin-bottom:var(--s3);
}
.hero__name{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(34px, 8.2vw, 76px); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 var(--s4);
}
.hero__name span{ display:block }
.hero__name .n2{ color:var(--ac) }

.hero__offer{
  font-size:clamp(17px, 2.4vw, 22px); line-height:1.45;
  color:var(--fg); max-width:34ch; margin-bottom:var(--s3);
}
.hero__sub{ color:var(--fg-2); font-size:16px; max-width:46ch; margin-bottom:var(--s5) }

.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s2) }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  font:600 15px/1 'Onest',sans-serif; text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary{ background:var(--ac); color:#08210F }
.btn--ghost{ border-color:var(--line); color:var(--fg); background:transparent }
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{ background:var(--ac-hot); transform:translateY(-2px) }
  .btn--ghost:hover{ border-color:var(--ac); transform:translateY(-2px) }
}
.btn:focus-visible{ outline:2px solid var(--ac); outline-offset:3px }

/* три числа под обложкой */
.stats{
  position:relative; z-index:1;
  display:grid; gap:var(--s2); grid-template-columns:1fr;
  margin-top:var(--s7);
}
@media (min-width:640px){ .stats{ grid-template-columns:repeat(3,1fr); gap:var(--s3) } }

.stat{
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--card), var(--bg-2));
}
.stat__v{
  font-family:'Unbounded',sans-serif; font-weight:700;
  font-size:clamp(24px,3.4vw,32px); color:var(--ac); line-height:1;
  display:flex; align-items:baseline; gap:4px;
}
.stat__u{ font-size:.5em; color:var(--ac-dim) }
.stat__t{ margin-top:10px; color:var(--fg-2); font-size:14px; line-height:1.45 }

/* ---------------------------------------------------------------- «что делаю» */
.duo{ display:grid; gap:var(--s3); grid-template-columns:1fr }
@media (min-width:820px){ .duo{ grid-template-columns:1fr 1fr; gap:var(--s4) } }

.lane{
  padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); position:relative; overflow:hidden;
}
.lane::after{
  content:''; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg, var(--ac), transparent 70%);
  opacity:.5;
}
.lane h3{ font-size:20px; margin-bottom:var(--s2) }
.lane p{ color:var(--fg-2); font-size:15.5px }
.lane ul{ margin:var(--s3) 0 0; padding:0; list-style:none; display:grid; gap:9px }
.lane li{ position:relative; padding-left:20px; color:var(--fg-2); font-size:15px }
.lane li::before{
  content:''; position:absolute; left:2px; top:.62em; width:7px; height:1px;
  background:var(--ac);
}

/* ---------------------------------------------------------------- работы */
.works{ display:grid; gap:var(--s3); grid-template-columns:1fr }
@media (min-width:720px){ .works{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .works{ grid-template-columns:repeat(3,1fr) } }

.work{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); overflow:hidden;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .work:hover{ border-color:color-mix(in oklab, var(--ac) 45%, var(--line)); transform:translateY(-3px) }
}
.work--wide{ grid-column:1/-1 }
@media (min-width:720px){ .work--wide{ grid-column:span 2 } }

.work__shot{
  aspect-ratio:16/10; background:var(--bg-2); position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.work__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.work__shot--empty{
  display:grid; place-items:center; color:var(--fg-3); font-size:13px;
  background:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg-2);
}
.work__body{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1 }
.work__tag{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ac-dim);
}
.work__title{ font-size:19px }
.work__task{ color:var(--fg-2); font-size:15px }
.work__res{ margin:auto 0 0; padding:var(--s3) 0 0; border-top:1px solid var(--line-soft);
  display:grid; gap:7px; list-style:none }
.work__res li{ position:relative; padding-left:18px; font-size:14.5px; color:var(--fg) }
.work__res li::before{ content:'▸'; position:absolute; left:0; color:var(--ac); font-size:12px }

/* ---------------------------------------------------------------- подвал-заглушка */
.foot{ padding-block:var(--s6); border-top:1px solid var(--line); color:var(--fg-3); font-size:14px }

/* ---------------------------------------------------------------- служебное */
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ac); color:#08210F; padding:10px 16px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0 }

/* ---------------------------------------------------------------- «что умею строить» */
.grp{
  font-family:'Onest',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
  margin:var(--s6) 0 var(--s3);
  display:flex; align-items:center; gap:var(--s3);
}
.grp::after{ content:''; flex:1; height:1px; background:var(--line) }
.grp:first-of-type{ margin-top:0 }

.tiles{ display:grid; gap:var(--s2); grid-template-columns:1fr }
@media (min-width:640px){ .tiles{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .tiles{ grid-template-columns:repeat(3,1fr) } }

.tile{
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); display:flex; flex-direction:column; gap:10px;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .tile:hover{ border-color:color-mix(in oklab, var(--ac) 40%, var(--line)); transform:translateY(-2px) }
}
.tile h4{
  font-family:'Onest',sans-serif; font-weight:600; font-size:16px; line-height:1.3;
  margin:0; color:var(--fg);
}
.tile p{ color:var(--fg-2); font-size:14.5px; line-height:1.5; margin:0 }
.tile__n{
  margin-top:auto; padding-top:10px; border-top:1px solid var(--line-soft);
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:12.5px;
  color:var(--ac); letter-spacing:.01em; line-height:1.4;
}

/* ---------------------------------------------------------------- карточка работы: паспорт */
.work__v{ width:100%; height:100%; object-fit:cover; background:var(--bg-2) }

.work__stack,
.work__skill{
  margin:0; font-size:13.5px; line-height:1.5;
}
.work__stack{
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line-soft);
  color:var(--fg); font-weight:500;
}
.work__skill{ color:var(--ac-dim) }

/* «было → стало»: ноль здесь и есть результат, поэтому он крупный и горячий,
   а прежнее число приглушено — читается направление, а не два равных числа. */
.stat__v--to{ gap:10px; align-items:center }
.stat__v--to .was{ color:var(--fg-2); font-size:.72em }
.stat__v--to .arr{ color:var(--fg-3); font-size:.6em; font-weight:400 }
.stat__v--to .now{ color:var(--ac-hot) }

/* Надстрочная метка плитки: говорит, ЧЬЯ это была задача и чем кончилась,
   до того как читатель дошёл до числа. */
.stat__k{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ac-dim); margin-bottom:10px;
}