body {
  margin: 0;
  background:
    radial-gradient(circle at 70% 0%, rgba(37,99,235,.18), transparent 32%),
    linear-gradient(180deg, #020617 0%, #07111f 100%);
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page {
  max-width: 1500px;
  margin: 22px auto;
  padding: 0 22px;
}

* {
  box-sizing: border-box;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;

  min-height: 220px;
  padding: 18px 38px;
  border: 1px solid #2563eb;
  border-radius: 14px;

  background:
    linear-gradient(90deg, rgba(0,0,0,.95), rgba(2,6,23,.80)),
    radial-gradient(circle at 85% 50%, rgba(59,130,246,.20), transparent 30%);

  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(37,99,235,.35));
}

.titleblock {
  min-width: 0;
}

.titleblock h1 {
  margin: 0;
  font-size: clamp(2.4rem, 4.3vw, 4.4rem);
  line-height: .95;
  letter-spacing: .035em;
  color: #f8fafc;
  font-weight: 900;
  white-space: nowrap;
}

.titleblock h1 span {
  color: #3b82f6;
}

.nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 18px 22px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: rgba(2,6,23,.75);
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
}

.nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  color: #e5e7eb;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
}

.titleblock h1 span {
  color: #3b82f6;
}

.subtitle {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 14px;
  color: #f8fafc;
  font-size: 1.45rem;
  letter-spacing: .55em;
  font-weight: 700;
}

.subtitle span {
  display: block;
  height: 2px;
  width: 95px;
  background: #d1d5db;
}

.titleblock p {
  margin: 0;
  color: #9ca3af;
  font-size: 1.45rem;
  line-height: 1.35;
}

.nav a:hover {
  color: #60a5fa;
}

.panel {
  margin-top: 20px;
  padding: 20px;
  background: rgba(15,23,42,.88);
  border: 1px solid #334155;
  border-radius: 14px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
}

th, td {
  padding: 14px 22px;
  border: 1px solid rgba(51,65,85,.85);
}

th {
  text-align: left;
  background: rgba(30,41,59,.95);
  color: #93c5fd;
  font-size: 1.1rem;
}

td {
  color: #e5e7eb;
  font-size: 1.05rem;
}

tr:hover td {
  background: rgba(51,65,85,.55);
}

a {
  color: #60a5fa;
  text-decoration: none;
}

a:hover {
  color: #bfdbfe;
  text-decoration: underline;
}

img {
  vertical-align: middle;
  margin-right: 10px;
}

hr, address {
  display: none;
}

.footer {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 22px 0;
  color: #64748b;
  text-align: center;
  font-size: 1rem;
}

.footer p {
  margin: 0;
  white-space: nowrap;
}

.footer-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #2563eb, transparent);
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .nav {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .brand {
    display: block;
  }

  .logo {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
  }

  .titleblock h1 {
    white-space: normal;
    font-size: 2.3rem;
  }

  .subtitle {
    letter-spacing: .25em;
  }

  .nav {
    flex-wrap: wrap;
  }
}