/* ===== FONTS (LOCAL) ===== */
@font-face{
  font-family:"Syncopate";
  src:url("../fonts/Syncopate-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Syncopate";
  src:url("../fonts/Syncopate-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Rajdhani";
  src:url("../fonts/Rajdhani-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ===== TOKENS ===== */
:root{
  --bg:#080a17;
  --text:#F2F2F2;
  --cyan:#14abd7;
  --violet:#6939cb;
}

/* ===== BASE ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Syncopate",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:400;
  font-synthesis:none;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ===== LAYOUT ===== */
.page{
  min-height:100vh;
  display:flex; flex-direction:column;
}
.hero{
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1.6rem;
  padding:6vh 16px 4vh;
}

/* ===== HOLOGRAM TOP LINE ===== */
.holo-line{
  position:fixed; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    rgba(20,171,215,0) 0%,
    rgba(20,171,215,.85) 10%,
    rgba(105,57,203,.95) 50%,
    rgba(20,171,215,.85) 90%,
    rgba(20,171,215,0) 100%);
  background-size:200% 100%;
  animation:holoShift 4.5s linear infinite;
  pointer-events:none; z-index:1000;
}
@keyframes holoShift{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}

/* ===== LOGO (главная) ===== */
.logo{
  width:clamp(220px,38vw,480px);
  height:auto; display:block; margin:0;
  filter:none !important; /* glow только внутри самого SVG */
}

/* ===== TYPOGRAPHY ===== */
.slogan{
  margin-top:-0.6rem; margin-bottom:0;
  color:var(--violet);
  font-family:"Rajdhani", Arial, sans-serif;
  font-weight:500;
  font-size:clamp(18px,2.2vw,24px);
  letter-spacing:.18em; text-align:center;
}
.wide{ transform:scaleX(1.45); transform-origin:center; letter-spacing:.12em; }

/* ===== FOOTER ===== */
.footer{
  position:relative;
  padding:32px 16px 26px;
  text-align:center; font-size:.72rem; overflow:hidden;
}
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    rgba(20,171,215,0) 0%,
    rgba(20,171,215,.85) 10%,
    rgba(105,57,203,.95) 50%,
    rgba(20,171,215,.85) 90%,
    rgba(20,171,215,0) 100%);
  background-size:200% 100%;
  animation:holoShift 4.5s linear infinite;
  pointer-events:none;
}
.foot-nav{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; margin-bottom:8px;
}
.foot-nav a{
  color:var(--cyan); text-decoration:none; transition:color .25s ease;
  font-family:"Syncopate",sans-serif; font-weight:700; /* жирный в меню */
}
.foot-nav a:hover{ color:var(--violet); }
.sep{ opacity:.45; color:var(--text); }
.copy{ margin:0; color:#8aa; letter-spacing:.06em; font-weight:400; }

/* ===== TEXT PAGES (privacy/terms/about copy) ===== */
.page-container,
.content.about-block{
  max-width:860px; width:100%;
  padding:10px 20px 0; margin:0 auto; text-align:left;
}
.content.about-block h2{
  margin:26px 0 10px;
  color:var(--cyan);
  font-family:"Rajdhani",sans-serif; font-weight:500;
  font-size:20px; letter-spacing:.12em;
}
.content.about-block p{
  margin:0 0 16px;
  font-family:"Syncopate",sans-serif; font-weight:400;
  font-size:14px; line-height:1.7; color:var(--text); letter-spacing:.06em;
}
.content.about-block ul{ margin:0 0 16px 18px; padding:0; }
.content.about-block ul.tight li{
  margin:6px 0; font-family:"Syncopate",sans-serif; font-size:14px; line-height:1.6;
}

/* ===== ABOUT: ORB (слева) ===== */
.about-hero{ gap:1.4rem; padding-top:4vh; }
.about-title{ margin-top:0; }
.about-visual{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(24px, 6vw, 80px);
  margin: 28px auto 8px;
  max-width:1200px; width:clamp(320px, 92vw, 1200px);
  flex-wrap:wrap;
}

/* единый размер для двух шаров */
.holo-orb,
.sphere,
.holo-sphere{
  width:clamp(260px, 30vw, 380px);
  height:auto; display:block;
}

/* сам орб (левый) */
.holo-orb{
  --c:var(--cyan); --v:var(--violet);
  aspect-ratio:1/1; border-radius:50%; position:relative; overflow:hidden;
  outline:1px solid rgba(20,171,215,.35);
  background:
    radial-gradient(65% 65% at 50% 45%, rgba(20,171,215,.08), rgba(20,171,215,0) 70%),
    radial-gradient(80% 80% at 50% 50%, rgba(105,57,203,.05), rgba(105,57,203,0) 75%);
  box-shadow:0 0 12px rgba(20,171,215,.25), inset 0 0 22px rgba(20,171,215,.12);
}
.holo-orb::before{
  content:""; position:absolute; inset:-3%; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(20,171,215,0) 0 42%,
    rgba(105,57,203,.85) 50%,
    rgba(20,171,215,0) 58% 100%);
  filter:blur(6px); animation:holoSpin 8s linear infinite;
  -webkit-mask:radial-gradient(closest-side, transparent 70%, #000 74%);
          mask:radial-gradient(closest-side, transparent 70%, #000 74%);
}
.holo-orb::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-linear-gradient(
    to bottom,
    rgba(20,171,215,.14) 0 1px,
    rgba(20,171,215,0)  2px 6px);
  opacity:.65; animation:holoScan 3.6s linear infinite;
  -webkit-mask:radial-gradient(closest-side, #000 96%, transparent 100%);
          mask:radial-gradient(closest-side, #000 96%, transparent 100%);
}
@keyframes holoSpin{ to{ transform:rotate(360deg); } }
@keyframes holoScan{ 0%{ transform:translateY(-8%);} 100%{ transform:translateY(8%);} }

/* ===== ABOUT: IMPULSE SPHERE (inline-SVG справа) ===== */
.sphere,
.holo-sphere{ /* поддержка обоих классов */
  filter: drop-shadow(0 0 12px rgba(20,171,215,.35))
          drop-shadow(0 0 26px rgba(105,57,203,.25));
}

/* линии внутри SVG */
.wire{
  fill:none; stroke-linecap:round; stroke-width:1.6;
  stroke:url(#pulseCyan);
  opacity:.9; mix-blend-mode:screen;
  stroke-dasharray:2 26; stroke-dashoffset:0;
  animation:wirePulse var(--spd,6s) linear infinite;
  animation-delay:var(--delay,0s);
}
.wire.alt{
  stroke:url(#pulseViolet);
  animation-direction:reverse;
  opacity:.85;
}
.wire{ animation: none !important; 
}
@keyframes wirePulse{ to{ stroke-dashoffset:-1200; } }

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .about-visual{ gap: clamp(16px,4vw,36px); }
}
@media (max-width:520px){
  .hero{ gap:1.2rem; }
  .slogan{ font-size:18px; }
}
@media (prefers-reduced-motion:reduce){
  .holo-line, .footer::before,
  .holo-orb::before, .holo-orb::after,
  .wire{ animation:none !important; }
}
/* ===== CONTACT: wire planet ===== */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr minmax(240px, 34vw); /* текст | планета */
  gap: clamp(18px,3vw,40px);
  align-items: start;
  width: min(1100px, 92vw);
  margin-inline: auto;
}

.planet-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.planet{
  width: clamp(240px, 32vw, 420px);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 0 12px rgba(20,171,215,.28))
    drop-shadow(0 0 26px rgba(105,57,203,.22));
}

/* линии-проволока: «бусины» + разная динамика */
.pwire,
.pwireAlt{
  fill:none;
  stroke-linecap:round;
  stroke-width:1.6;
  opacity:.9;
  /* базовый паттерн «бус» */
  stroke-dasharray: 2 26;
}

/* хаотичные импульсы через SMIL в самом SVG; в CSS только разные направления */
.pwireAlt{ opacity:.85; }

/* мобильная адаптация */
@media (max-width: 820px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .planet{
    width: clamp(240px, 70vw, 520px);
    margin: 6px auto 0;
  }
}
/* CONTACT layout */
.text-page .page-heading{ margin-bottom:.6rem; }
.contact-grid{
  display:grid;
  grid-template-columns: 1fr minmax(260px,35vw);
  gap:clamp(18px,3vw,42px);
  align-items:start;
  width:min(1100px,92vw);
}
.contact-info .contact-row{
  font-family:"Syncopate",sans-serif;
  font-size:14px;
  line-height:1.7;
  letter-spacing:.06em;
  margin:10px 0;
}
.contact-info .contact-row span{
  color:var(--cyan);
  font-weight:700;
  letter-spacing:.08em;
}
.contact-info a{ color:var(--cyan); text-decoration:none; }
.contact-info a:hover{ color:var(--violet); }

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

/* Planet sizing */
.planet{
  width:clamp(260px,32vw,460px);
  height:auto;
  display:block;
  filter:drop-shadow(0 0 12px rgba(20,171,215,.28))
         drop-shadow(0 0 26px rgba(105,57,203,.22));
}

/* Wire styles */
.wire-base{
  fill:none;
  stroke:url(#gradWire);
  stroke-width:1.1;
  stroke-linecap:round;
  opacity:.28;                 /* постоянная слабая сетка */
}

.wire-pulse{
  fill:none;
  stroke:url(#gradWire);
  stroke-width:1.7;
  stroke-linecap:round;
  opacity:.95;
  /* длинная светящаяся «лента», движется вдоль пути */
  stroke-dasharray:180 820;    /* длина импульса / пауза */
  stroke-dashoffset:var(--off,0);
  animation:wireFlow var(--spd,10s) linear infinite;
  mix-blend-mode:screen;
}
.wire-pulse.rev{ animation-direction:reverse; }

@keyframes wireFlow{
  to{ stroke-dashoffset: calc(var(--off,0) - 1000); }
}
/* ===== TEXT PAGES (privacy/terms) ===== */
.text-page{
  padding: 40px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-heading{
  margin: 0 0 18px;
  color: var(--violet);
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  letter-spacing: .16em;
  font-size: clamp(20px, 2.1vw, 26px);
}

/* Контейнер контента */
.content.privacy-block{
  max-width: 860px;
  width: 100%;
  padding: 6px 20px 0;
  margin: 0 auto;
  text-align: left;
}

/* Заголовки разделов */
.content.privacy-block h2{
  margin: 26px 0 10px;
  color: var(--cyan);
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;           /* акцент */
  font-size: 1.15rem;         /* ~18–19px */
  letter-spacing: .10em;
}

/* Основной текст и списки — аккуратно и не крупно */
.content.privacy-block p,
.content.privacy-block li{
  font-family: "Syncopate", sans-serif;
  font-weight: 400;           /* regular */
  font-size: 0.95rem;         /* ~15px */
  line-height: 1.6;
  letter-spacing: .05em;
  color: #e0e6f0;
}
.content.privacy-block ul{
  margin: 0 0 16px 18px;
  padding: 0;
}

/* Ссылки в тексте */
.content.privacy-block a{ color: var(--cyan); text-decoration: none; }
.content.privacy-block a:hover{ color: var(--violet); }

/* Мобильные правки */
@media (max-width:520px){
  .content.privacy-block{ padding: 6px 12px 0; }
  .content.privacy-block h2{ font-size: 1.05rem; }
  .content.privacy-block p,
  .content.privacy-block li{ font-size: 0.92rem; }
}
/* FOOTER FIX */
.copy, .legal{
  margin:0;
  color:#8aa;                 /* одинаковый цвет */
  letter-spacing:.06em;
  font-weight:400;
  line-height:1.6;            /* больше воздуха */
}
.footer .legal{
  margin-top:6px;             /* отступ от копирайта */
  font-size:.72rem;
}

/* 404 BUTTON */
.back-link{
  display:inline-block;
  margin-top:18px;
  padding:10px 20px;
  background:var(--cyan);
  color:#080a17;              /* контрастный текст */
  font-family:"Syncopate",sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.12em;
  text-decoration:none;
  border-radius:6px;
  transition:all .25s ease;
  text-transform:uppercase;
}
.back-link:hover{
  background:var(--violet);
  color:#fff;
}
.error-code{
  font-size: 3rem;
  margin: 20px 0 10px;   /* немного воздуха сверху и снизу */
}

.error-text{
  margin: 0 0 18px;      /* ближе к 404, но с небольшим зазором */
  font-size: 1rem;
  letter-spacing: .08em;
  color: #e0e6f0;
}

.back-link{
  display: inline-block;
  margin-top: 8px;       /* ближе к тексту */
  margin-bottom: 60px;   /* добавить воздуха перед футером */
  padding: 12px 26px;
  background: var(--cyan);
  color: #080a17;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-decoration: none;
  border-radius: 6px;
  transition: all .25s ease;
  text-transform: uppercase;
}
.back-link:hover{
  background: var(--violet);
  color: #fff;
}
/* Общий контейнер для страницы */
.page {
  min-height: 100vh;           /* вся высота экрана */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Футер */
.footer {
  text-align: center;
  margin-top: 60px;       /* воздух сверху */
  padding: 30px 20px 40px; /* сверху/сбоку/снизу */
  border-top: 1px solid rgba(20,171,215,.25);
}

/* Навигация */
.foot-nav {
  margin-bottom: 14px;
  transform: scaleX(1.45);    /* расширение букв как в слогане */
  transform-origin: center;
}

.foot-nav a {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin: 0 8px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  text-decoration: none;
}

.foot-nav a:hover {
  color: var(--violet);
}

.footer .sep {
  color: rgba(255,255,255,.35);
  margin: 0 6px;
}

/* Копирайт */
.copy {
  font-family: "Rajdhani", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #a9b3c7;
  line-height: 1.7;       /* больше воздуха */
  margin: 6px 0;
}

/* Вторая строка */
.copy-rights {
  font-family: "Rajdhani", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #a9b3c7;
  line-height: 1.7;
  margin-top: -4px;       /* чуть ближе к копирайту */
}
/* Центрирование 404 */
.center-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 70vh; /* раньше, наверное, стояло около 80–85vh */
  text-align: center;
  gap: 16px; /* расстояние между элементами */
  margin-top: 40px; /* чуть вниз */
}

.center-screen .logo {
  width: 160px;
  margin-bottom: 15px;
}

.error-code {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}

.error-text {
  font-size: 1.2rem;
  margin: 0 0 15px;
  color: #a9b3c7;
}

.back-link {
  display: inline-block;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: #14abd7;
  color: #080a17;
  border-radius: 6px;
  text-transform: uppercase;
  transition: background 0.3s;
  margin-top: 5px;  /* ближе к тексту */
}

.back-link:hover {
  background: #0f82a6;
  color: #fff;
}
/* ==== MOBILE FIXES: footer + home ==== */
@media (max-width: 768px){

  /* HOME */
  .hero{
    padding: 10vh 14px 10vh;   /* больше воздуха сверху/снизу, чтобы не упираться в футер */
    gap: 1.2rem;
  }
  .logo{ width: clamp(180px, 60vw, 340px); }

  .slogan{ font-size:16px; letter-spacing:.16em; margin-top:.2rem; }
  .wide{ transform:scaleX(1.12); }   /* было 1.45 — именно из-за этого слоган «вылазил» */

  /* FOOTER */
  .footer{ padding: 22px 12px 28px; }

  .foot-nav{
    flex-wrap: wrap;            /* перенос ссылок */
    gap: 8px 16px;              /* вертикальный и горизонтальный интервалы */
    margin-bottom: 16px;        /* чуть больше воздуха перед копирайтом */
    transform: none;            /* убираем растяжение букв в мобильном футере */
  }
  .foot-nav a{
    font-family:"Syncopate",sans-serif;
    font-weight:700;            /* оставить жирный */
    font-size:14px;
  }
  .sep{ display:none; }         /* вертикальные разделители убираем — мешают на узких экранах */

  .copy,
  .legal,
  .copy-rights{
    font-size:12px;
    line-height:1.5;
  }
}