/* Базовые стили для страницы-заглушки */
:root{
  --accent: #06b6d4; /* accent colour, can be changed */
  --muted: rgba(255,255,255,0.75);
  --overlay: rgba(6,22,34,0.45);
}

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
/* Ensure the page never shows a white background behind the image on mobile */
html, body {background-color: #071226}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* Background: try local image `m.jpg` first, fallback to Unsplash coastal highway.
    To use your own image, place it in this folder and name it `m.jpg` (or change the URL below). */
  background-image: linear-gradient(var(--overlay), rgba(7,18,36,0.25)), url('m.jpg'), url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
  background-size: cover, cover, cover;
  background-position: center center, center center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* Avoid background-attachment: fixed on mobile (performance/issues). */
  background-attachment: scroll;
}

/* Main hero: title stays centered on any screen. Use dynamic viewport height to avoid
   mobile 100vh issues and prevent page scrolling. */
.hero{
  min-height:100dvh; /* use min-height to avoid layout gaps on some mobile browsers */
  display:grid;
  place-items:center; /* centers horizontally and vertically */
  padding:32px 18px;
  text-align:center;
  overflow:hidden; /* ensure content doesn't create a page scroll */
}

.center{max-width:78ch}

.title{
  font-size:clamp(36px,8vw,96px);
  margin:0;
  line-height:0.95;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:none;
  text-shadow:0 6px 18px rgba(2,6,23,0.6);
}

.tagline{margin:10px 0 0;color:var(--muted);font-size:18px}

.info{display:flex;gap:20px;margin-top:18px;color:var(--muted);flex-wrap:wrap;justify-content:center}
.info a{color:var(--accent);text-decoration:none}
.small{color:var(--muted);font-size:13px;margin-top:12px}

/* Footer: render the whole footer text in a dark color as requested.
  Note: dark text on a dark background may be hard to read; if you want good contrast
  consider a light/semtransparent color instead. */
.footer{position:fixed;left:0;right:0;bottom:12px;text-align:center;font-size:12px;color:#0b0b0b}

@media(min-width:900px){
  .hero{padding:80px}
}

/* Reduce padding on small screens to avoid accidental overflow */
@media(max-width:420px){
  .hero{padding:14px 12px}
  /* Slightly bigger title on small phones */
  .title{font-size:clamp(28px,9vw,64px)}
  /* Make the tagline more readable on phones */
  .tagline{font-size:16px;line-height:1.4;max-width:54ch;margin:8px 0}
  /* Larger footer text and respect safe area */
  .footer{bottom:calc(8px + env(safe-area-inset-bottom, 0));font-size:13px;padding-bottom:calc(env(safe-area-inset-bottom,0));}
}

/* Slightly larger text for small tablets/large phones */
@media(max-width:768px){
  .tagline{font-size:18px}
  .footer{font-size:13px}
}

/* Account for iOS/Android safe-area (home indicator) so there's no white gap */
.footer{
  padding-bottom: calc(env(safe-area-inset-bottom, 0) );
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
}

/* Accessibility: ensure sufficient contrast for title when image is bright */
.title, .tagline, .info, .small{mix-blend-mode:normal}

/* Footer mail link: always render in the accent color and avoid default visited/hover color changes */
.footer a.footer-mail{
  color:inherit; /* ссылка наследует цвет футера (тёмный) */
  text-decoration:none;
  font-weight:600;
}
.footer a.footer-mail:visited{color:inherit}
.footer a.footer-mail:hover,.footer a.footer-mail:active{color:inherit;opacity:0.95}