/* ============================================================
   Дамир Галиуллин — devcard · "terminal noir"
   ============================================================ */
:root{
  --bg:        #05080a;
  --bg-1:      #080d10;
  --bg-2:      #0b1318;
  --panel:     #0a1115;
  --line:      #16241d;
  --line-2:    #1f3a2c;
  --ink:       #d3e0d6;
  --ink-soft:  #9fb1a6;
  --muted:     #5d7068;
  --green:     #46d68a;
  --green-br:  #7dffb0;
  --green-dim: #2a8a5b;
  --amber:     #f0b454;
  --amber-dim: #8a6326;
  --red:       #ff6a6a;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --disp: "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body::selection,*::selection{ background:var(--green); color:#04140c; }

a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:700; line-height:1.05; margin:0; letter-spacing:-0.02em; }

/* canvas matrix rain & vignette ----------------------------------- */
#matrix{ position:fixed; inset:0; z-index:0; opacity:0.10; pointer-events:none; }
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(70,214,138,0.07), transparent 55%);
}
.scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.18) 2px 3px);
  mix-blend-mode:multiply;
}

.wrap{ position:relative; z-index:3; }
.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* ---- nav ---- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter);
  font-size:13px;
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
}
nav.scrolled{
  background:rgba(5,8,10,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:9px; color:var(--green); font-weight:500; }
.brand .dot{ width:8px;height:8px;border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.nav-links{ display:flex; gap:26px; }
.nav-links a{ color:var(--ink-soft); transition:color .2s; position:relative; }
.nav-links a::before{ content:"// "; color:var(--muted); }
.nav-links a:hover,.nav-links a.active{ color:var(--green-br); }
.nav-cta{ color:var(--green); border:1px solid var(--line-2); padding:6px 14px; border-radius:2px; transition:.2s; white-space:nowrap; }
.nav-cta:hover{ background:var(--green); color:#04140c; }
@media(max-width:880px){ .nav-links{display:none;} }

/* ---- section scaffolding ---- */
section{ position:relative; padding-block:clamp(72px,11vw,140px); }
.eyebrow{
  font-size:13px; color:var(--green); letter-spacing:.04em; margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow .hash{ color:var(--muted); }
.eyebrow::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
.sec-title{ font-size:clamp(1.9rem,4.4vw,3.1rem); margin-bottom:18px; }
.sec-lead{ color:var(--ink-soft); max-width:60ch; font-size:1.02rem; }

/* ============================================================ HERO */
#hero{ min-height:100svh; display:flex; align-items:center; padding-top:96px; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(28px,5vw,72px);
  align-items:center; width:100%;
}
.term{
  background:rgba(8,15,18,0.78);
  border:1px solid var(--line-2);
  border-radius:6px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8), inset 0 0 60px rgba(70,214,138,0.03);
  overflow:hidden;
  backdrop-filter:blur(4px);
}
.term-bar{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid var(--line); font-size:12px; color:var(--muted);
}
.term-bar .b{ width:11px;height:11px;border-radius:50%; background:#1d2a24; border:1px solid #25382e; }
.term-bar .b.g{ background:var(--green-dim); }
.term-bar .t{ margin-left:8px; }
.term-body{ padding:20px 22px; font-size:14px; min-height:230px; }
.term-body .ln{ white-space:pre-wrap; margin:2px 0; }
.term-body .p{ color:var(--green); }
.term-body .ok{ color:var(--green-br); }
.term-body .dim{ color:var(--muted); }
.term-body .am{ color:var(--amber); }
.cursor{ display:inline-block; width:9px; height:1.05em; background:var(--green-br);
  transform:translateY(2px); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }

.hero-name{ font-size:clamp(2.6rem,6vw,4.6rem); margin:30px 0 6px; }
.hero-name .accent{ color:var(--green); }
.hero-roles{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 20px; }
.tag{ font-size:12.5px; color:var(--ink-soft); border:1px solid var(--line-2);
  padding:5px 11px; border-radius:2px; background:rgba(70,214,138,0.04); }
.hero-tagline{ color:var(--ink-soft); max-width:46ch; font-size:1.04rem; margin-bottom:30px; }
.hero-tagline b{ color:var(--green-br); font-weight:500; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:14px; padding:13px 22px; border-radius:3px;
  border:1px solid var(--line-2); color:var(--ink); transition:.2s; cursor:pointer;
}
.btn .arr{ transition:transform .2s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--green); color:#04140c; border-color:var(--green); font-weight:600; }
.btn-primary:hover{ background:var(--green-br); box-shadow:0 0 24px -4px var(--green); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-br); }

/* hero portrait */
.portrait{ position:relative; justify-self:center; width:100%; max-width:380px; }
.portrait .frame{ position:relative; border:1px solid var(--line-2); padding:10px;
  background:linear-gradient(180deg, rgba(70,214,138,0.05), rgba(5,8,10,0.4)); border-radius:4px; }
.portrait img{ display:block; width:100%; border-radius:2px;
  filter:contrast(1.05) saturate(1.05); }
.portrait .glow{ position:absolute; inset:-20% -10% -10% -10%; z-index:-1;
  background:radial-gradient(50% 45% at 50% 40%, rgba(70,214,138,0.22), transparent 70%); filter:blur(20px); }
.portrait .ovl{ position:absolute; inset:10px; pointer-events:none; border-radius:2px;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 3px, rgba(5,12,8,0.32) 3px 4px); }
.corner{ position:absolute; width:16px; height:16px; border:2px solid var(--green); z-index:2; }
.corner.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.corner.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.corner.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.corner.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.portrait .cap{ position:absolute; bottom:18px; left:18px; right:18px; font-size:11px;
  color:var(--green-br); display:flex; justify-content:space-between;
  text-shadow:0 1px 6px #000; letter-spacing:.02em; }

@media(max-width:880px){
  .hero-grid{ grid-template-columns:1fr; }
  .portrait{ grid-row:1; max-width:280px; }
}

/* ============================================================ ABOUT */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.about-copy p{ color:var(--ink-soft); font-size:1.06rem; margin:0 0 18px; }
.about-copy p b{ color:var(--ink); font-weight:500; }
.about-copy .sig{ color:var(--green); font-size:.95rem; margin-top:24px; }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.stat{ background:var(--bg-1); padding:22px 20px; transition:.25s; }
.stat:hover{ background:var(--bg-2); }
.stat .n{ font-family:var(--disp); font-size:2.1rem; font-weight:700; color:var(--green-br); line-height:1; }
.stat .n small{ font-size:1.1rem; color:var(--green); }
.stat .l{ font-size:12.5px; color:var(--ink-soft); margin-top:9px; }
@media(max-width:880px){ .about-grid{ grid-template-columns:1fr; } }

/* ============================================================ STORY (git log) */
.log{ border-left:1px solid var(--line-2); margin-left:6px; }
.commit{ position:relative; padding:0 0 8px 30px; }
.commit::before{ content:""; position:absolute; left:-5px; top:7px; width:9px; height:9px;
  border-radius:50%; background:var(--bg); border:2px solid var(--green-dim); transition:.25s; }
.commit.open::before, .commit:hover::before{ background:var(--green); border-color:var(--green); box-shadow:0 0 10px var(--green); }
.commit-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; cursor:pointer; padding:14px 0; }
.commit .hash{ color:var(--amber); font-size:13px; }
.commit .branch{ font-size:11.5px; color:var(--green); border:1px solid var(--green-dim);
  padding:2px 9px; border-radius:20px; white-space:nowrap; }
.commit .msg{ font-family:var(--disp); font-weight:500; font-size:1.18rem; color:var(--ink); }
.commit .chev{ margin-left:auto; color:var(--muted); transition:.25s; font-size:13px; }
.commit.open .chev{ transform:rotate(90deg); color:var(--green); }
.commit-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.commit-body > div{ overflow:hidden; }
.commit.open .commit-body{ grid-template-rows:1fr; }
.commit-body p{ color:var(--ink-soft); margin:0 0 14px; max-width:62ch; font-size:1rem; padding-left:2px; }
.commit-body .diff{ font-size:13px; color:var(--muted); margin-bottom:18px; }
.commit-body .diff .add{ color:var(--green); }
.commit-body .diff .del{ color:var(--red); }

/* ============================================================ WORK */
.work-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:start; }
.role-card{ border:1px solid var(--line-2); border-radius:5px; background:var(--bg-1); padding:26px; }
.role-card .co{ font-family:var(--disp); font-size:1.5rem; font-weight:700; }
.role-card .meta{ color:var(--muted); font-size:13px; margin:6px 0 20px; }
.ladder{ list-style:none; padding:0; margin:0; }
.ladder li{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:13.5px; color:var(--ink-soft); }
.ladder li .yr{ color:var(--green); width:62px; flex:none; font-size:12px; }
.ladder li.now{ color:var(--ink); }
.ladder li.now .rl{ color:var(--green-br); }
.ach{ display:grid; gap:12px; }
.ach .row{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  border:1px solid var(--line); border-radius:4px; padding:16px 18px; background:var(--bg-1); transition:.25s; }
.ach .row:hover{ border-color:var(--line-2); background:var(--bg-2); }
.ach .big{ font-family:var(--disp); font-weight:700; font-size:1.9rem; color:var(--green-br); line-height:1; min-width:74px; }
.ach .big small{ font-size:.95rem; color:var(--green); }
.ach .row p{ margin:0; font-size:14px; color:var(--ink-soft); }
.ach .row p b{ color:var(--ink); font-weight:500; }
.gov{ margin-top:26px; }
.gov .lbl{ font-size:12px; color:var(--muted); margin-bottom:12px; letter-spacing:.04em; }
.gov .chips{ display:flex; flex-wrap:wrap; gap:9px; }
.gov .chips span{ font-size:12.5px; color:var(--ink-soft); border:1px solid var(--line-2);
  padding:6px 12px; border-radius:2px; }
@media(max-width:880px){ .work-grid{ grid-template-columns:1fr; } }

/* ============================================================ REPOS */
.repo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.repo{ display:flex; flex-direction:column; border:1px solid var(--line-2); border-radius:5px;
  background:var(--bg-1); padding:22px; transition:.25s; min-height:184px; }
.repo:hover{ background:var(--bg-2); border-color:var(--green-dim); transform:translateY(-3px); }
.repo .top{ display:flex; align-items:center; gap:9px; color:var(--green); font-size:15px; }
.repo .top .ico{ font-size:14px; color:var(--muted); }
.repo .top .name{ font-weight:500; }
.repo .desc{ color:var(--ink-soft); font-size:13.5px; margin:14px 0; flex:1; }
.repo .foot{ display:flex; align-items:center; gap:18px; font-size:12.5px; color:var(--muted); }
.repo .lang{ display:flex; align-items:center; gap:7px; }
.repo .lang .d{ width:10px; height:10px; border-radius:50%; }
.repo .stars{ display:flex; align-items:center; gap:5px; }
.repo .go{ margin-left:auto; color:var(--green); opacity:0; transition:.25s; }
.repo:hover .go{ opacity:1; }
@media(max-width:880px){ .repo-grid{ grid-template-columns:1fr; } }

/* ============================================================ STACK */
.stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.stack-col{ border:1px solid var(--line); border-radius:5px; background:var(--bg-1); padding:22px; }
.stack-col h4{ font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--green);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.stack-col h4::before{ content:"› "; color:var(--muted); }
.stack-col .items{ display:flex; flex-wrap:wrap; gap:8px; }
.stack-col .items span{ font-size:13px; color:var(--ink-soft); border:1px solid var(--line-2);
  padding:6px 11px; border-radius:2px; transition:.2s; }
.stack-col .items span:hover{ color:var(--green-br); border-color:var(--green-dim); }
@media(max-width:680px){ .stack{ grid-template-columns:1fr; } }

/* ============================================================ CHECKERS */
.game-grid{ display:grid; grid-template-columns:1fr 0.85fr; gap:clamp(28px,5vw,56px); align-items:center; }
.board-wrap{ justify-self:center; }
.board{ display:grid; grid-template-columns:repeat(8,1fr); width:min(440px,86vw); aspect-ratio:1;
  border:1px solid var(--line-2); border-radius:4px; overflow:hidden; box-shadow:0 30px 70px -30px #000; }
.sq{ position:relative; display:flex; align-items:center; justify-content:center; }
.sq.dark{ background:#0a130e; }
.sq.light{ background:#0d171b; }
.sq.playable{ cursor:default; }
.sq.move{ cursor:pointer; }
.sq.move::after{ content:""; width:26%; height:26%; border-radius:50%;
  background:var(--green); opacity:.35; box-shadow:0 0 10px var(--green); }
.sq.sel{ box-shadow:inset 0 0 0 2px var(--green); }
.sq.cap::after{ background:var(--amber); opacity:.5; box-shadow:0 0 10px var(--amber); }
.piece{ width:70%; height:70%; border-radius:50%; cursor:pointer; transition:transform .12s;
  display:flex; align-items:center; justify-content:center; }
.piece.p{ background:radial-gradient(circle at 35% 30%, #9dffc8, #2a9c63 70%); border:1px solid #0c3a23;
  box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 0 6px rgba(255,255,255,.25); }
.piece.b{ background:radial-gradient(circle at 35% 30%, #ffd591, #b9802b 70%); border:1px solid #4a3210;
  box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 0 6px rgba(255,255,255,.2); }
.piece.king::after{ content:"♛"; font-size:1.1em; color:rgba(4,20,12,.7); }
.piece:hover{ transform:scale(1.07); }
.game-panel .hud{ display:flex; gap:22px; margin:18px 0 22px; }
.game-panel .hud .h{ font-size:13px; color:var(--ink-soft); }
.game-panel .hud .h b{ font-family:var(--disp); font-size:1.5rem; display:block; color:var(--green-br); }
.game-panel .hud .h.amb b{ color:var(--amber); }
.status{ border:1px solid var(--line-2); border-radius:4px; background:var(--bg-1); padding:14px 16px;
  font-size:13.5px; color:var(--green); min-height:50px; display:flex; align-items:center; gap:10px; }
.status .pr{ color:var(--muted); }
@media(max-width:880px){ .game-grid{ grid-template-columns:1fr; } .board-wrap{ order:-1; } }

/* ============================================================ CONTACT */
#contact{ border-top:1px solid var(--line); }
.contact-head{ font-size:clamp(2rem,6vw,4rem); margin-bottom:14px; }
.contact-head .accent{ color:var(--green); }
.contact-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:40px; }
.ccard{ display:flex; flex-direction:column; gap:8px; border:1px solid var(--line-2);
  border-radius:5px; padding:20px; background:var(--bg-1); transition:.25s; }
.ccard:hover{ background:var(--bg-2); border-color:var(--green-dim); transform:translateY(-3px); }
.ccard .k{ font-size:11.5px; color:var(--muted); letter-spacing:.05em; }
.ccard .v{ font-size:14px; color:var(--green-br); word-break:break-word; }
@media(max-width:980px){ .contact-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:880px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .contact-grid{ grid-template-columns:1fr; } }

footer{ border-top:1px solid var(--line); padding:28px var(--gutter); display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--muted); }
footer .green{ color:var(--green-dim); }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}