@font-face {
  font-family: "AcademyC";
  src: url("fonts/AcademyC.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Franklin Gothic Book";
  src: url("fonts/FranklinGothicBookC.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Franklin Gothic Book";
  src: url("fonts/FranklinGothicBookC-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #093b6e;
  --navy-deep: #062a50;
  --navy-mid: #144677;
  --navy-soft: #1a5a8f;
  --sky: #4383b1;
  --ice: #ebf0f6;
  --ice-muted: #c5d3e3;
  --white: #ffffff;
  --footer: #1e2a38;
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.32);
  --shadow: 0 18px 48px rgba(2, 18, 40, 0.35);
  --radius: 10px;
  --font-display: "AcademyC", "Times New Roman", serif;
  --font-body: "Franklin Gothic Book", "Franklin Gothic", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--white);
  background: var(--navy-deep);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--navy-deep);
}

.aurora {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse 50% 40% at 18% 20%, rgba(67, 131, 177, 0.35), transparent 58%),
    radial-gradient(ellipse 45% 38% at 82% 72%, rgba(20, 70, 119, 0.55), transparent 60%),
    radial-gradient(ellipse 40% 30% at 55% 10%, rgba(90, 150, 200, 0.18), transparent 55%),
    linear-gradient(165deg, #0c4a82 0%, #093b6e 42%, #062a50 100%);
  background-size: 140% 140%;
  animation: aurora-shift 26s ease-in-out infinite alternate;
}

.veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, transparent 0%, rgba(6, 42, 80, 0.25) 55%, rgba(4, 28, 55, 0.7) 100%);
  animation: veil-breathe 14s ease-in-out infinite alternate;
}

.dust {
  position: absolute;
  inset: 0;
}

.dust span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(235, 240, 246, 0.9);
  box-shadow: 0 0 6px 1px rgba(67, 131, 177, 0.55);
  animation: dust-drift linear infinite;
  opacity: 0;
}

.dust span:nth-child(1)  { left: 8%;  top: 70%; animation-duration: 16s; animation-delay: 0s; }
.dust span:nth-child(2)  { left: 18%; top: 85%; animation-duration: 20s; animation-delay: 2s; width: 3px; height: 3px; }
.dust span:nth-child(3)  { left: 28%; top: 60%; animation-duration: 14s; animation-delay: 4s; }
.dust span:nth-child(4)  { left: 40%; top: 90%; animation-duration: 22s; animation-delay: 1s; }
.dust span:nth-child(5)  { left: 52%; top: 75%; animation-duration: 18s; animation-delay: 6s; width: 3px; height: 3px; }
.dust span:nth-child(6)  { left: 63%; top: 88%; animation-duration: 17s; animation-delay: 3s; }
.dust span:nth-child(7)  { left: 74%; top: 65%; animation-duration: 21s; animation-delay: 5s; }
.dust span:nth-child(8)  { left: 85%; top: 80%; animation-duration: 15s; animation-delay: 7s; width: 3px; height: 3px; }
.dust span:nth-child(9)  { left: 12%; top: 40%; animation-duration: 23s; animation-delay: 8s; }
.dust span:nth-child(10) { left: 35%; top: 30%; animation-duration: 19s; animation-delay: 1.5s; }
.dust span:nth-child(11) { left: 68%; top: 25%; animation-duration: 24s; animation-delay: 4.5s; width: 3px; height: 3px; }
.dust span:nth-child(12) { left: 90%; top: 45%; animation-duration: 17s; animation-delay: 9s; }
.dust span:nth-child(13) { left: 22%; top: 55%; animation-duration: 15s; animation-delay: 0.8s; }
.dust span:nth-child(14) { left: 47%; top: 48%; animation-duration: 21s; animation-delay: 3.2s; width: 3px; height: 3px; }
.dust span:nth-child(15) { left: 58%; top: 82%; animation-duration: 18s; animation-delay: 5.5s; }
.dust span:nth-child(16) { left: 78%; top: 38%; animation-duration: 20s; animation-delay: 2.4s; }
.dust span:nth-child(17) { left: 5%;  top: 58%; animation-duration: 19s; animation-delay: 7.2s; width: 3px; height: 3px; }
.dust span:nth-child(18) { left: 33%; top: 78%; animation-duration: 16s; animation-delay: 1.1s; }
.dust span:nth-child(19) { left: 71%; top: 92%; animation-duration: 22s; animation-delay: 4.8s; }
.dust span:nth-child(20) { left: 94%; top: 62%; animation-duration: 14s; animation-delay: 6.3s; width: 3px; height: 3px; }

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
  animation: grain-shift 8s steps(6) infinite;
}

.page {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.75rem, 5vh, 2.75rem) 0 calc(1.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  text-align: center;
}

.brand {
  margin-bottom: 1.5rem;
}

.brand__logo {
  display: block;
  width: min(280px, 72vw);
  height: auto;
  margin: 0 auto 0.85rem;
  filter: drop-shadow(0 6px 18px rgba(0, 20, 50, 0.35));
}

.brand__slogan {
  margin: 0 0 0.35rem;
  font-size: clamp(0.78rem, 2.4vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ice-muted);
}

.brand__since {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(197, 211, 227, 0.7);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(1.35rem, 3vw, 1.85rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(165deg, rgba(26, 90, 143, 0.35), rgba(9, 59, 110, 0.28));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(6, 42, 80, 0.45);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice);
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ec8f0;
  box-shadow: 0 0 0 0 rgba(126, 200, 240, 0.55);
  animation: pulse 2.2s ease-out infinite;
}

.hero__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5vw, 1.9rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--white);
}

.hero__copy {
  max-width: 34rem;
  margin-bottom: 1.4rem;
}

.hero__copy p {
  margin: 0 0 0.85rem;
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  color: var(--ice-muted);
  text-wrap: balance;
}

.hero__copy p:last-child {
  margin-bottom: 0;
}

.hero__highlight {
  font-weight: 600 !important;
  color: var(--white) !important;
}

.contacts {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
}

.contacts__label {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ice-muted);
}

.contact {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.96);
  color: var(--navy);
  text-align: left;
  box-shadow: 0 8px 22px rgba(2, 24, 50, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact:hover,
.contact:focus-visible {
  transform: translateY(-2px);
  border-color: var(--sky);
  box-shadow: 0 12px 28px rgba(2, 24, 50, 0.28);
  outline: none;
}

.contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(9, 59, 110, 0.08);
  color: var(--navy-mid);
}

.contact__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.contact__caption {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
}

.contact__value {
  font-size: clamp(1rem, 3.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--navy);
  word-break: break-word;
}

.closing {
  margin: 0;
  max-width: 28rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
}

.footer {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.footer p {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ice-muted);
}

.footer__hits {
  margin-top: 0.4rem !important;
  opacity: 0.7;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.34s; }
.delay-5 { animation-delay: 0.44s; }
.delay-6 { animation-delay: 0.54s; }

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(126, 200, 240, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(126, 200, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(126, 200, 240, 0); }
}

@keyframes aurora-shift {
  0% {
    background-position: 0% 20%, 100% 80%, 50% 0%, 0% 0%;
    transform: scale(1);
  }
  50% {
    background-position: 30% 40%, 70% 50%, 40% 30%, 0% 0%;
    transform: scale(1.03);
  }
  100% {
    background-position: 60% 10%, 40% 90%, 70% 20%, 0% 0%;
    transform: scale(1.015);
  }
}

@keyframes veil-breathe {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

@keyframes dust-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0;
  }
  10% { opacity: 0.9; }
  50% {
    transform: translate3d(12px, -45vh, 0) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(-8px, -95vh, 0) scale(0.55);
    opacity: 0;
  }
}

@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-1%, 1%); }
  40% { transform: translate(1%, -1%); }
  60% { transform: translate(-1%, -1%); }
  80% { transform: translate(1%, 1%); }
}

@media (max-width: 560px) {
  .page {
    width: min(100% - 1rem, 640px);
    justify-content: flex-start;
    padding: calc(0.75rem + env(safe-area-inset-top)) 0 calc(1rem + env(safe-area-inset-bottom));
  }

  .brand {
    margin-bottom: 0.75rem;
  }

  .brand__logo {
    width: min(168px, 52vw);
    margin-bottom: 0.5rem;
  }

  .brand__slogan {
    margin-bottom: 0.2rem;
    font-size: 0.74rem;
  }

  .brand__since {
    font-size: 0.64rem;
  }

  .hero {
    padding: 0.95rem 0.85rem 1.1rem;
  }

  .status {
    margin-bottom: 0.7rem;
    padding: 0.32rem 0.7rem;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
  }

  .hero__title {
    margin-bottom: 0.7rem;
    font-size: clamp(1.2rem, 5.2vw, 1.45rem);
  }

  .hero__copy {
    margin-bottom: 0.95rem;
  }

  .hero__copy p {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .contacts {
    max-width: none;
    gap: 0.5rem;
    margin-bottom: 0.95rem;
  }

  .contacts__label {
    margin-bottom: 0;
    font-size: 0.7rem;
  }

  .contact {
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
  }

  .contact__icon {
    width: 2.1rem;
    height: 2.1rem;
  }

  .contact__value {
    font-size: 0.98rem;
  }

  .closing {
    font-size: 0.98rem;
  }

  .footer {
    margin-top: 0.95rem;
    padding-top: 0.75rem;
  }

  .dust span:nth-child(n+13) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .aurora,
  .veil,
  .dust span,
  .grain,
  .status__dot {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .contact {
    transition: none;
  }

  .hero {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}