* { box-sizing: border-box; }

:root {
  --bg: #08101f;
  --card: rgba(17, 28, 48, 0.88);
  --text: #f7f9fc;
  --muted: #aeb9ca;
  --line: rgba(255,255,255,.10);
  --accent: #55b7ff;
}

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(65, 145, 255, .18), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(0, 208, 190, .12), transparent 30%),
    var(--bg);
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}

.card {
  width: min(760px, 100%);
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
}

.brand-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #07101d;
  background: linear-gradient(135deg, #7bd0ff, #55b7ff);
  box-shadow: 0 12px 35px rgba(85,183,255,.25);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
}

h1 {
  margin: 0;
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

h1 span { color: #b9c8dc; }

.intro {
  max-width: 590px;
  margin: 22px auto 30px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.contacts {
  display: grid;
  gap: 10px;
  text-align: left;
}

.contact {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 17px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.contact:hover {
  transform: translateY(-2px);
  border-color: rgba(85,183,255,.55);
  background: rgba(85,183,255,.08);
}

.icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent);
  background: rgba(85,183,255,.10);
  font-weight: 800;
}

.contact small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
}

.contact strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.location {
  margin-top: 28px;
  color: #c9d3e1;
  font-size: 14px;
  font-weight: 600;
}

footer {
  margin-top: 25px;
  color: #77859a;
  font-size: 12px;
}

@media (max-width: 560px) {
  .page { padding: 16px 12px; }
  .card { padding: 28px 18px; border-radius: 22px; }
  h1 { font-size: 39px; }
  .contact { padding: 13px; }
  .contact strong { font-size: 13px; }
}