@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
          @import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap&subset=cyrillic');
  @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Barlow:wght@500;600&display=swap&subset=cyrillic');
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap&subset=cyrillic');
    * { margin:0; padding:0; box-sizing:border-box }
    html, body {
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      background: url('img/pc-bg.webp') no-repeat center center fixed;
      background-size: cover;
    }

    @keyframes popUp {
      0%   { transform: translate(-50%,-60%) scale(0.5); opacity:0 }
      100% { transform: translate(-50%,-50%) scale(1);    opacity:1 }
    }
    @keyframes scroll {
      0%   { transform: translateY(0) }
      100% { transform: translateY(-50%) }
    }
    @keyframes popIn {
      0%   { transform: scale(.5) translateY(-20px); opacity:0 }
      100% { transform: scale(1)   translateY(   0 ); opacity:1 }
    }
    @keyframes jelly {
      0%,100% { transform: scale(1,1) }
      25%     { transform: scale(1.1,0.9) }
      50%     { transform: scale(0.9,1.1) }
      75%     { transform: scale(1.05,0.95) }
    }
    @keyframes ripple {
      to { transform: scale(4); opacity:0 }
    }
    @keyframes shakeEffect {
      0%,100% { transform: translate(-50%,-50%) translate(0,0) }
      20%,60% { transform: translate(-50%,-50%) translate(2px,-2px) }
      40%,80% { transform: translate(-50%,-50%) translate(-2px,2px) }
    }

    .social-text {
      position: absolute;
      top: 30%; left: 50%;
      transform: translate(-50%,-50%);
      z-index: 20; 
      width: 80%; text-align:center;
      font-family: 'PT Sans', sans-serif;
      font-size: 1.7rem; color: #fff;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
                    -1px  1px 0 #000, 1px  1px 0 #000;
      animation: popUp .8s ease-out both;
    }
    .social-text.shake {
      animation: shakeEffect .5s ease-in-out both;
    }

    .container {
      width:100%; max-width:360px; perspective:800px;
    }
    .phone-frame {
      width:100%; aspect-ratio:9/16;
      background:#000; border:12px solid #222; border-radius:40px;
      position:relative; box-shadow:0 10px 30px rgba(0,0,0,.5);
      transform-style:preserve-3d;
    }
    .phone-frame::before {
      content:''; position:absolute;
      top:12px; left:calc(50% - 60px);
      width:120px; height:24px;
      background:#000; border-radius:12px;
      z-index:2;
    }

    .screen {
      position:absolute; top:12px; left:12px;
      width:calc(100% - 24px); height:calc(100% - 24px);
      background:#fff; border-radius:28px;
      overflow:hidden;
    }
    .feed {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-auto-rows:120px;
      gap:2px;
      animation:scroll 60s linear infinite;
    }
    .feed::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 35%);
  pointer-events: none;         
  z-index: 1;
}
    .feed img {
      width:100%; height:100%;
      object-fit:cover;
      transition:filter .3s;
      cursor:pointer;
    }
    .feed img:hover { filter: brightness(.6) }

    .buttons {
      position:absolute;
      top:55%; left:50%;
      transform:translate(-50%,-50%);
      display:flex; flex-direction:column;
      gap:12px; width:80%; z-index:10;
    }
    .btn {
      font-family: 'Barlow', sans-serif;
      font-weight: 500;
      position:relative; overflow:hidden;
      padding:14px; border-radius:30px;
      backdrop-filter:blur(10px);
      color:#fff; text-decoration:none;
      font-weight:600; display:flex;
      align-items:center; justify-content:center;
      background:rgba(255,255,255,.2);
      transform-origin:center;
      animation:popIn .6s ease-out both;
      transition:background .3s;
      box-shadow:0 0 0 2px rgba(255,255,255,.9),
                 0 2px 8px rgba(0,0,0,.2);
    }
    .buttons .btn:nth-child(1){ animation-delay:.2s }
    .buttons .btn:nth-child(2){ animation-delay:.4s }
    .buttons .btn:nth-child(3){ animation-delay:.6s }
    .btn i { margin-right:8px }
    .btn.instagram{ background:#ff4081cc }
    .btn.youtube   { background:rgba(255,0,0,.8) }
    .btn.telegram  { background:rgba(0,136,204,.8) }
    .btn:hover {
      animation:jelly .5s both;
      background:rgba(255,255,255,.3);
    }
    .ripple {
      position:absolute; border-radius:50%;
      transform:scale(0);
      animation:ripple .6s linear;
      background:rgba(255,255,255,.7);
    }

   /* ============ MOBI (600px) ============ */
@media (max-width: 600px) {
  html, body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: none;
    display: block;
  }
  .container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    perspective: none;
  }
  .phone-frame {
    width: 100%;
    height: 100%;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .phone-frame::before {
    display: none !important;
  }
  .screen {
    filter: none !important;
     position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: hidden;
  }
  .feed {
    filter: blur(0.5px) ;
  }
  .social-text {
    filter: none !important;
    font-size: 2rem;
    color: #fff;
    text-shadow:
      2px  2px 4px rgba(0,0,0,0.8),
     -2px  2px 4px rgba(0,0,0,0.8);
  }
  .buttons {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 70%;
    display: flex;
    font-size: 1.4rem;
    flex-direction: column;
    gap: 12px;
  }
}
    /* ============ DESKTOP (≥601px) ============ */
    @media (min-width:601px) {
      html, body {
        background: url('/img/pc-bg.webp') no-repeat center center fixed;
        background-size:cover;
      }
      body { padding-top:40px }
      .container {
        transform:rotate(-3deg) scale(1.05);
        transition:transform .3s ease;
      }
      .container:hover {
        transform:rotate(0deg) scale(1.07);
      }
      .phone-frame {
        box-shadow:
          0 20px 30px rgba(0,0,0,.4),
          inset 0 -10px 20px rgba(0,0,0,.2);
      }
    }