@charset "utf-8";
  :root{
      --main:#333333;      /* фирменный текст/кнопки */
      --main-900:#111111;  /* активные */
      --muted:#666666;
      --border:#E6E6E6;    /* рамки */
      --bg:#ffffff;        /* фон страницы */
      --bg-light:#f3f3f3;  /* светлые блоки */
      --pro:#0b57d0;
      --radius: 18px;
      --shadow: 0 6px 18px rgba(0,0,0,.06);
    }
    html,body{height:100%}
    body{
      font-family: Arial, Helvetica, sans-serif;
      color:var(--main);
      background:var(--bg);
    }

    /* оболочка — чтобы футер был прижат */
    .page{min-height:100vh; display:flex; flex-direction:column}
    main{flex:1 0 auto}
    footer{flex:0 0 auto}

    /* header */
    .site-header{
      border:1px solid var(--border);
      border-radius:24px;
      background:#fff;
      box-shadow:var(--shadow);
      padding:18px 22px;
    }
    .logo{
      font-weight:700; font-size:24px; cursor:pointer;
      transition: transform .14s;
    }
    .logo:hover{ transform: scale(1.02) }

    /* карточки */
    .card.feature{
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      transition: transform .18s, box-shadow .18s;
    }
    .card.feature:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(0,0,0,.08);
    }
    .feature .ico{
      width:56px; height:56px; border-radius:12px;
      display:grid; place-items:center;
      background:var(--bg-light); border:1px solid var(--border);
      margin:0 auto 12px;
    }
    .muted{color:var(--muted)}
    .badge-pro{
      background:#eaf2ff; color:var(--pro); font-weight:700; font-size:.72rem;
      padding:.15rem .5rem; border-radius:999px;
      position:absolute; top:.75rem; right:.75rem;
    }
    .btn-dark{
      background:var(--main); border-color:var(--main); font-weight:700;
    }
    .btn-dark:hover{ background:var(--main); filter:brightness(0.95) }
    .btn-outline-light{
      border-color:var(--border); color:#000; background:#fff; font-weight:700;
    }
    .btn-outline-light:hover{ background:#f8f9fa; }

    /* модалки (единый стиль) */
    .modal-content{
      border-radius:18px; border:1px solid var(--border);
      box-shadow: 0 14px 40px rgba(0,0,0,.18);
    }
    .modal-header{ border-bottom:1px solid var(--border) }
    .modal-footer{ border-top:1px solid var(--border) }

    /* медиа-бокс внутри превью */
    .media-box{
      border:1px solid var(--border); border-radius:12px; overflow:hidden;
      background:var(--bg-light);
    }
    .media-box img, .media-box video, .media-box audio{ width:100%; display:block }

    /* футер */
    footer{
      border-top:1px solid var(--border);
      color:#888; font-size:13px;
    }

    /* Центрирование заголовка модалки */
    .modal-header-center {
    justify-content: center !important;
    position: relative;
    }

    .modal-header-center .close {
    position: absolute;
    right: 15px;
    top: 15px;
    }
    

   /* Премиум-стекло, но строго в фирменном чёрном */
    .btn-outline-dark {
    color: var(--main) !important;             /* тот же цвет, что и btn-dark */
    border-color: var(--main) !important;      /* обводка фирменного цвета */
    background: rgba(255, 255, 255, 0.75);     /* лёгкое стекло */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-weight: 700;
    }

    .btn-outline-dark:hover,
    .btn-outline-dark:focus,
    .btn-outline-dark:active {
    background-color: var(--main) !important;  /* как btn-dark */
    border-color: var(--main) !important;
    color: #fff !important;
    }


    /* === ПРЕМИУМ 2.0: анимация кнопок === */
    .btn-hover-grow {
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, box-shadow;
    }

    .btn-hover-grow:hover {
    transform: translateY(-2px) scale(1.045);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    }

    .btn-hover-grow:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    

   





/* CSS Document (? Если не используется можно удалить:) 
*{box-sizing:border-box;font-family:Arial, sans-serif}
body{background:#f6f7fb;color:#111;padding:20px}
.container{max-width:780px;margin:0 auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
h1{font-size:20px;margin-bottom:12px}
label{display:block;margin-top:12px;font-weight:600}
input[type=file], textarea, button{width:100%;padding:8px;margin-top:6px}
button{cursor:pointer;border:0;padding:10px 14px;border-radius:6px;background:#2d79f5;color:#fff;font-weight:700}
#progressBar{width:100%;height:12px;background:#eee;border-radius:6px;overflow:hidden}
#progressFill{width:0;height:100%;background:#2d79f5}
#progressPct{margin-top:6px;font-size:14px}
pre{background:#f1f1f1;padding:10px;border-radius:6px;overflow:auto}*/