@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      user-select: none;
    }

    body {
      background-color: var(--mf-bg);
      color: var(--mf-text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      position: relative;
    }

    /* Ambient Animated Smoke Glow Background */
    .bg-smoke-glow {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .smoke-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.14;
      animation: floatSmoke 18s infinite alternate ease-in-out;
    }

    .blob-1 {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, var(--mf-accent), var(--mf-accent-deep));
      top: -100px;
      left: -100px;
      animation-duration: 22s;
    }

    .blob-2 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, var(--mf-accent-light), var(--mf-accent));
      bottom: -150px;
      right: -100px;
      animation-duration: 16s;
      animation-delay: -5s;
    }

    .blob-3 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, #800f2f, var(--mf-accent));
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-duration: 25s;
      animation-delay: -10s;
      opacity: 0.09;
    }

    @keyframes floatSmoke {
      0% { transform: translate(0, 0) scale(1) rotate(0deg); }
      50% { transform: translate(60px, 40px) scale(1.15) rotate(180deg); }
      100% { transform: translate(-40px, -60px) scale(0.9) rotate(360deg); }
    }

    /* Content wrapper */
    .app-container {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }


    /* --- СЕКЦИИ СТРАНИЦ --- */
    .page-view {
      display: none;
      animation: fadeInPage 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      flex: 1;
    }

    .page-view.active {
      display: flex;
      flex-direction: column;
    }

    @keyframes fadeInPage {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }


    footer {
      border-top: 1px solid rgba(255, 43, 91, 0.1);
      padding: 22px 40px;
      text-align: center;
      font-size: 13px;
      color: #6a6a7e;
      position: relative;
      z-index: 1;
    }