/* МАП сервер — ЧБ минимал (тёмная тема: чёрный фон, белое) */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/inter-cyrillic-300-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/inter-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/inter-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#f2f2f2;
  --muted:#a0a0a0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:#000;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:#f2f2f2;color:#0a0a0a}

/* фоновый паттерн Wave Field — живой (canvas) */
#bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.24;
}

main{
  position:relative;z-index:1;
  max-width:920px;margin:0 auto;
  padding:74px 28px 40px;
  display:flex;flex-direction:column;
  min-height:100vh;
}

.logo{display:flex;justify-content:center}
.logo svg{height:54px;width:auto;display:block}
.logo canvas{height:76px;width:auto;display:block}

header{margin-bottom:70px;text-align:center}
h1{
  font-size:clamp(30px,6vw,46px);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:30px 0 10px;
}
.sub{
  color:var(--muted);
  font-size:15px;font-weight:400;
  letter-spacing:.02em;
  margin:0;
}

.links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.card{
  display:flex;flex-direction:column;
  gap:0;
  border:1px solid var(--ink);
  padding:26px 26px 22px;
  color:inherit;
  text-decoration:none;
  background:rgba(0,0,0,.88);
  transition:background .18s ease,color .18s ease;
}
.card:hover,.card:focus-visible{background:var(--ink);color:#0a0a0a;outline:none}
.card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.card .num{
  font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  transition:color .18s ease;
}
.card:hover .num{color:#6f6f6f}

.card h2{
  font-size:23px;font-weight:500;
  letter-spacing:.005em;
  margin:12px 0 10px;
}

.card p{
  margin:0;
  font-size:14px;font-weight:400;
  line-height:1.6;
  color:var(--muted);
  transition:color .18s ease;
}
.card:hover p{color:#4f4f4f}

.go{
  margin-top:26px;
  padding-top:0;
  font-size:13.5px;font-weight:400;
  letter-spacing:.05em;
  display:flex;align-items:center;gap:9px;
}
.go .arr{transition:transform .18s ease;font-size:15px}
.card:hover .arr{transform:translateX(7px)}

footer{
  margin-top:auto;
  padding-top:70px;
  font-size:11.5px;
  letter-spacing:.08em;
  color:#858585;
  display:flex;gap:9px;flex-wrap:wrap;
  justify-content:center;
}

@media (max-width:640px){
  main{padding:46px 20px 30px}
  header{margin-bottom:44px}
  .logo svg{height:42px}
  .logo canvas{height:52px}
  .links{grid-template-columns:1fr;gap:14px}
  .card{padding:22px 20px 18px}
  footer{padding-top:48px}
}