/* Страница отдельного приложения в объёмном виде. Сцены здесь нет: вместо
     неё та же лесная панорама неподвижным снимком. Читать длинный текст на
     вращающейся сцене неудобно, да и незачем греть телефон ради фона.
     Грузится ПОСЛЕ style.css и правит только то, что мешает прокрутке. */

  html, body.app-page { height: auto; }
  body.app-page { overflow: visible; overflow-x: hidden; }

  /* Путь к снимку — от САМОГО ФАЙЛА СТИЛЕЙ (scene/page.css), а не от страницы.
     С '../tex/' картинка уезжала на уровень выше и фон оставался чёрным. */
  .bg {
    position: fixed; inset: 0; z-index: 0;
    background: url('tex/forest_pano.webp') center 42% / cover no-repeat;
    pointer-events: none;
  }
  .bg::after {                       /* затемнение, иначе текст не читается */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #0a110999 0%, #0a1109d9 45%, #0a1109f2 100%);
  }

  .page {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 72px 18px 64px;
  }

  .app-page .home {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink-dim);
    text-decoration: none;
    text-shadow: 0 2px 10px #000000cc;
  }
  .app-page .home b { color: var(--moss); }
  .app-page .home:hover, .app-page .home:focus-visible { color: var(--ink); outline: none; }

  /* стеклянная плашка — та же, что у карточек на главной, но без размытия:
     фон здесь неподвижный снимок, размывать его каждым кадром незачем */
  .card {
    margin-top: 14px;
    padding: 18px 22px;
    background: #0e1a0fe8;
    border: 1px solid #ffffff1a;
    border-radius: 16px;
  }
  .hero { margin-top: 16px; }

  .app-page h1 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
  .app-page .tagline {
    white-space: normal;
    max-width: 46ch;
    margin: 8px 0 0;
  }
  .app-page .ad { margin: 16px 0 0; }

  .acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
  .btn {
    font-family: var(--sans);
    font-size: 0.92rem;
    text-decoration: none;
    color: #06120a;
    background: var(--moss);
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 9px 16px;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), background .22s ease, color .22s ease;
  }
  .btn.ghost { color: var(--lichen); background: #0b170c99; border-color: #ffffff24; }
  .btn:hover, .btn:focus-visible { transform: translateY(-2px); outline: none; }
  .btn.ghost:hover, .btn.ghost:focus-visible { color: #06120a; background: var(--lichen); }

  .card h2 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--lichen);
    margin: 0 0 10px;
  }
  .card p { margin: 0 0 10px; }
  .card p:last-child { margin-bottom: 0; }
  .card ul { display: grid; gap: 9px; }
  .card li { position: relative; padding-left: 18px; }
  .card li::before { content: "·"; position: absolute; left: 5px; color: var(--moss); font-weight: 700; }

  .back {
    display: inline-block;
    margin-top: 26px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--moss);
    text-decoration: none;
    text-shadow: 0 2px 10px #000000cc;
  }
  .back:hover, .back:focus-visible { color: var(--lichen); outline: none; }

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: background .2s ease, color .2s ease; }
  }
  @media (max-width: 600px) {
    .page { padding: 64px 14px 48px; }
    .card { padding: 15px 16px; border-radius: 14px; }
  }