/* support.magiyai.com – общий стиль заглушки. Токены дизайн-системы «МАГИЯ AI» (тёмная тема). */
:root {
  --background: hsl(240 33% 7%);
  --foreground: hsl(0 0% 100%);
  --muted: hsl(240 20% 15%);
  --muted-foreground: hsl(0 0% 100% / 0.6);
  --border: hsl(0 0% 100% / 0.08);
  --primary: hsl(295 100% 50%);
  --glow-from: #6a0dad;
  --glow-to: #e600ff;
  --shadow-glow: 0 0 20px rgba(230, 0, 255, 0.2);
  --radius-lg: 12px;
  color-scheme: dark;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/manrope-latin.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;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--background); color: var(--foreground);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative; overflow-x: hidden;
}
.bg-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(55% 60% at 74% 45%, rgba(106, 13, 173, 0.55), rgba(106, 13, 173, 0) 70%),
    radial-gradient(45% 50% at 6% 100%, rgba(45, 10, 78, 0.7), rgba(45, 10, 78, 0) 70%);
}
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; }
header.wrap { display: flex; align-items: center; gap: 12px; }
.home { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: var(--radius-lg); }
.home:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(295 100% 50% / 0.7); }
.logo { width: 36px; height: 36px; mix-blend-mode: lighten; filter: drop-shadow(0 0 16px rgba(230, 0, 255, 0.35)); }
.brand { font-size: 16px; line-height: 24px; font-weight: 800; letter-spacing: -0.01em; }
main.wrap {
  flex-grow: 1; padding-bottom: 64px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 48px;
}
.text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; animation: fade-slide-up 0.4s ease-out both; }
h1 { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.h1a { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
.h1b { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.sub { margin: 0; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--muted-foreground); }
.h1a, .h1b, .sub { text-wrap: balance; }
.actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; min-height: 48px; border: 1px solid transparent; border-radius: var(--radius-lg);
  color: var(--foreground); font: 500 16px/24px Manrope, system-ui, sans-serif; text-decoration: none;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px hsl(295 100% 50% / 0.7); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-glow { background: linear-gradient(135deg, var(--glow-from), var(--glow-to)); }
.btn-glow:hover { box-shadow: var(--shadow-glow); }
.btn-secondary { background: hsl(240 20% 15% / 0.5); border-color: var(--border); }
.btn-secondary:hover { background: hsl(240 20% 15% / 0.7); }
.art { position: relative; display: flex; justify-content: center; align-items: center; }
.art::before {
  content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 9999px; filter: blur(28px);
  background: radial-gradient(circle, rgba(230, 0, 255, 0.42), rgba(106, 13, 173, 0.28) 45%, rgba(106, 13, 173, 0) 70%);
  animation: glow-pulse 8s ease-in-out infinite;
}
.diana { position: relative; width: 100%; max-width: 520px; height: auto; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes fade-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  main.wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 0; }
  .art { order: -1; }
  .diana { max-width: 300px; }
  .text { align-items: center; text-align: center; }
  .actions { justify-content: center; }
  .sub { font-size: 16px; line-height: 24px; }
}
@media (max-width: 420px) {
  .wrap { padding: 16px; }
  .diana { max-width: 240px; }
  .actions { width: 100%; flex-direction: column; }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .diana, .art::before, .text { animation: none; }
  .btn { transition: none; }
}