/* WEB PANEL PROXY public CSS */
* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }

  body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 50% 20%, #1b2735 0%, #090a0f 100%);
    color: #e8ecf1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    text-align: center;
    overflow-x: hidden;
  }

  /* лёгкое звёздное небо на фоне */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.7) 50%, transparent 51%),
      radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.6) 50%, transparent 51%),
      radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,.4) 50%, transparent 51%),
      radial-gradient(1px 1px at 25% 55%, rgba(255,255,255,.45) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 90% 60%, rgba(255,255,255,.5) 50%, transparent 51%);
    pointer-events: none;
    z-index: 0;
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    position: relative;
    z-index: 1;
  }

  /* ===== Логотип ===== */
  .logo-wrap {
    position: relative;
    width: clamp(160px, 30vw, 240px);
    height: clamp(160px, 30vw, 240px);
    margin-bottom: 22px;
    animation: float 5s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  /* Самолёт — повёрнут вправо на 90° */
  .plane-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(90deg);
    filter: drop-shadow(0 0 18px rgba(255,255,255,.25));
  }

  /* ===== Эффект движения: штрихи позади (слева) ===== */
  .speed-lines {
    position: absolute;
    left: -70%;
    top: 0;
    height: 100%;
    width: 70%;
    pointer-events: none;
    overflow: hidden;
  }

  .speed-lines span {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.85));
    animation: dash 2s linear infinite;
  }

  .speed-lines span:nth-child(1) { top: 32%; width: 60%; animation-delay: 0s;   }
  .speed-lines span:nth-child(2) { top: 44%; width: 80%; animation-delay: .5s;  opacity:.7; }
  .speed-lines span:nth-child(3) { top: 56%; width: 50%; animation-delay: 1s;   }
  .speed-lines span:nth-child(4) { top: 38%; width: 70%; animation-delay: 1.4s; opacity:.55; }
  .speed-lines span:nth-child(5) { top: 62%; width: 40%; animation-delay: .8s;  opacity:.5; }

  @keyframes dash {
    0%   { transform: translateX(30%); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateX(-130%); opacity: 0; }
  }

  /* ===== Заголовок ===== */
  .brand {
    font-size: clamp(2.6rem, 9vw, 6rem);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.05;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
    animation: glow 3.5s ease-in-out infinite alternate;
  }
  .brand .fox  { color: #ff8c00; }
  .brand .aero { color: #4fc3f7; }
  .brand .top  { color: #ff6b6b; }

  @keyframes glow {
    from { filter: brightness(1); }
    to   { filter: brightness(1.18); }
  }

  .join {
    margin-top: 34px;
    font-size: clamp(1rem, 2.6vw, 1.6rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #cfd8e3;
    animation: fadeUp 1s ease both;
  }
  .join .accent { color: #4fc3f7; }

  .platforms {
    margin-top: 18px;
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    letter-spacing: 2px;
    color: #8fa3b8;
    animation: fadeUp 1.3s ease both;
  }
  .platforms .tag {
    display: inline-block;
    margin: 6px 6px 0;
    padding: 6px 16px;
    border: 1px solid rgba(79, 195, 247, .45);
    border-radius: 999px;
    color: #9fd8f7;
    background: rgba(79, 195, 247, .07);
    font-weight: 600;
  }

  .wip {
    margin-top: 55px;
    font-size: clamp(1.1rem, 3vw, 1.7rem);
    font-weight: 700;
    color: #ffcc66;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 14px 34px;
    border: 2px dashed rgba(255, 204, 102, .55);
    border-radius: 14px;
    background: rgba(255, 204, 102, .05);
    animation: fadeUp 1.6s ease both, pulseBorder 2.5s ease-in-out infinite;
  }
  @keyframes pulseBorder {
    0%, 100% { border-color: rgba(255, 204, 102, .35); }
    50%      { border-color: rgba(255, 204, 102, .85); }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ===== Футер ===== */
  footer {
    position: relative;
    z-index: 1;
    padding: 22px 20px;
    font-size: 0.82rem;
    color: #6f8299;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .25);
    line-height: 1.7;
  }
  footer a { color: #8fb8d8; text-decoration: none; transition: color .2s; }
  footer a:hover { color: #4fc3f7; }
  footer .sep { margin: 0 8px; opacity: .4; }

  @media (max-width: 520px) {
    .join { letter-spacing: 2px; }
    .wip  { padding: 12px 20px; letter-spacing: 2px; }
    footer { font-size: 0.75rem; }
    footer .sep { display: block; height: 0; overflow: hidden; }
  }

[data-wpp-style="wpp-0"]{margin-top:6px; opacity:.7;}