/* Монохромний дизайн персонального сайту (завдання 2.4) */
:root{
  --ink:#0a0a0a; --paper:#ffffff; --mut:#7a7a7a; --line:#e6e6e6; --soft:#f5f5f5; --sub:#3a3a3a;
  --mono:"Cascadia Code",ui-monospace,Consolas,monospace;
  --sans:Inter,"Segoe UI",Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --ink:#f2f2f2; --paper:#0c0c0c; --mut:#9a9a9a; --line:#262626; --soft:#161616; --sub:#c4c4c4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
.up{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--mut)}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;padding:16px 28px}
.top .brand{font-weight:800;letter-spacing:-.02em}
.top nav{display:flex;gap:4px;align-items:center}
.top nav a{padding:8px 14px;border:1px solid transparent;text-transform:uppercase;
  letter-spacing:.12em;font-size:.72rem;font-weight:600;transition:.15s}
.top nav a:hover,.top nav a.active{background:var(--ink);color:var(--paper)}
.tbtn{margin-left:6px;cursor:pointer;background:transparent;color:inherit;border:1px solid var(--ink);
  padding:8px 12px;font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;transition:.15s;display:inline-flex;gap:7px;align-items:center}
.tbtn:hover{background:var(--ink);color:var(--paper)}
.tbtn .ic{font-size:.95rem;line-height:1}

/* hero */
.hero{padding:90px 0 60px;border-bottom:1px solid var(--line)}
.hero .up{margin-bottom:18px}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.03em;font-weight:800}
.hero h1 span{display:block;color:var(--mut)}
.hero p{margin-top:22px;max-width:560px;color:var(--sub);font-size:1.05rem}

/* grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:56px 0}
.cell{background:var(--paper);padding:28px}
.cell.s3{grid-column:span 3}.cell.s4{grid-column:span 4}.cell.s6{grid-column:span 6}
.cell.s8{grid-column:span 8}.cell.s12{grid-column:span 12}
.cell h3{font-size:1.05rem;margin-bottom:10px;letter-spacing:-.01em}
.cell .big{font-size:2.4rem;font-weight:800;letter-spacing:-.02em}
.cell p{color:var(--sub);font-size:.95rem}
.cell.dark{background:var(--ink);color:var(--paper)}
.cell.dark h3{color:var(--paper)}
.cell.dark .up{color:var(--paper);opacity:.6}
.cell.dark p{color:var(--paper);opacity:.78}
@media(max-width:760px){.cell{grid-column:span 12!important}}

/* link list */
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.links a{border:1px solid var(--ink);padding:9px 16px;font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;transition:.15s}
.links a:hover{background:var(--ink);color:var(--paper)}

/* tables / report */
.sec{padding:56px 0;border-bottom:1px solid var(--line)}
.sec h2{font-size:1.8rem;letter-spacing:-.02em;margin-bottom:6px}
table{border-collapse:collapse;width:100%;margin-top:18px;font-size:.92rem}
th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);border-bottom:1px solid var(--ink)}
tr:hover td{background:var(--soft)}

/* footer + counter */
footer{padding:46px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.counter{border:1px solid var(--ink);padding:14px 20px;display:flex;gap:14px;align-items:baseline}
.counter b{font-size:1.8rem;font-weight:800}
footer .up{color:var(--mut)}