/* Feeling of Life — стилі головної сторінки */

:root {
        --bg: #070a10;
        --bg2: #0b1320;
        --azurite: #1b2b41;
        --card: rgba(255, 255, 255, 0.04);
        --stroke: rgba(255, 255, 255, 0.1);
        --text: #eef3ff;
        --muted: rgba(238, 243, 255, 0.72);
        --muted2: rgba(168, 198, 255, 0.62);
        --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
        --r: 18px;
      }

      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
        background:
          radial-gradient(
            1200px 700px at 20% 0%,
            rgba(27, 43, 65, 0.55) 0%,
            rgba(7, 10, 15, 0) 55%
          ),
          radial-gradient(
            900px 600px at 85% 10%,
            rgba(24, 67, 96, 0.35) 0%,
            rgba(7, 10, 15, 0) 60%
          ),
          linear-gradient(180deg, var(--bg2) 0%, var(--bg) 60%);
        color: var(--text);
      }

      header {
        padding: 22px 26px 10px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
      }

      .brand {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .brand .title {
        font-size: 18px;
        letter-spacing: 0.06em;
        font-weight: 650;
        opacity: 0.92;
      }
      .brand .sub {
        font-size: 12px;
        color: var(--muted);
      }

      .shell {
        width: min(1240px, calc(100vw - 24px));
        margin: 0 auto;
        padding-bottom: 40px;
      }

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
        gap: 18px;
        padding: 22px 22px 12px;
      }

      .heroCard,
      .aboutCard {
        border: 1px solid var(--stroke);
        border-radius: 28px;
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.03)
          ),
          rgba(9, 15, 27, 0.7);
        box-shadow: var(--shadow);
      }

      .heroCard {
        position: relative;
        overflow: hidden;
        padding: 30px;
      }

      .heroCard::before {
        content: "";
        position: absolute;
        inset: -80px auto auto -60px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(103, 164, 255, 0.32) 0%,
          rgba(103, 164, 255, 0) 72%
        );
        pointer-events: none;
      }

      .heroCard::after {
        content: "";
        position: absolute;
        right: -30px;
        bottom: -36px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(66, 106, 173, 0.26) 0%,
          rgba(66, 106, 173, 0) 72%
        );
        pointer-events: none;
      }

      .heroInner {
        position: relative;
        z-index: 1;
      }

      .heroKicker {
        display: inline-flex;
        margin-bottom: 14px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(168, 198, 255, 0.22);
        background: rgba(168, 198, 255, 0.08);
        color: var(--muted2);
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .heroTitle {
        max-width: 11ch;
        margin: 0 0 14px;
        font-size: clamp(38px, 6vw, 66px);
        line-height: 0.95;
      }

      .heroLead {
        max-width: 62ch;
        margin: 0 0 20px;
        color: var(--text);
        font-size: 16px;
        line-height: 1.7;
      }

      .heroActions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 18px;
      }

      .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 12px 18px;
        border-radius: 999px;
        border: 1px solid rgba(168, 198, 255, 0.3);
        background: linear-gradient(
          180deg,
          rgba(140, 183, 255, 0.25),
          rgba(72, 118, 196, 0.2)
        );
        color: var(--text);
        font-weight: 600;
        text-decoration: none;
        transition:
          transform 0.16s ease,
          border-color 0.16s ease,
          filter 0.16s ease;
      }

      .cta:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
      }

      .ctaSecondary {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
      }

      .heroNote {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
      }

      .sidePanel {
        display: grid;
        gap: 16px;
      }

      .sideCard {
        padding: 22px;
        border: 1px solid var(--stroke);
        border-radius: 24px;
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.03)
          ),
          rgba(9, 15, 27, 0.68);
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
      }

      .sideCard h2,
      .aboutCard h2,
      .catalogHeader h2 {
        margin: 0 0 10px;
        font-size: 24px;
      }

      .sideCard p,
      .aboutCard p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
      }

      .statGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
      }

      .statCard {
        padding: 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .statValue {
        display: block;
        margin-bottom: 6px;
        font-size: 26px;
        font-weight: 700;
      }

      .statLabel {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
      }

      .socialRow {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 14px;
      }

      .socialLink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease;
      }

      .socialLink svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
      }

      .socialLink:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
        background: rgba(255, 255, 255, 0.1);
      }

      .socialLink.instagram {
        border-color: rgba(225, 48, 108, 0.45);
        color: #e1306c;
      }

      .socialLink.facebook {
        border-color: rgba(24, 119, 242, 0.45);
        color: #1877f2;
      }

      .socialLink.telegram {
        border-color: rgba(34, 158, 217, 0.45);
        color: #229ed9;
      }

      .aboutSection {
        padding: 6px 22px 10px;
      }

      .aboutCard {
        padding: 24px;
      }

      .aboutGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .aboutBlock h3 {
        margin: 0 0 8px;
        color: var(--muted2);
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .catalogSection {
        padding-top: 8px;
      }

      .catalogHeader {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
        padding: 0 22px 4px;
      }

      .catalogHeader p {
        margin: 0;
        color: var(--muted);
      }

      .resultsMeta {
        color: var(--muted2);
        font-size: 13px;
        text-align: right;
      }

      .emptyState {
        padding: 18px 22px 4px;
        color: var(--muted);
      }

      .grid {
        padding: 16px 22px 30px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 14px;
      }

      .tile {
        position: relative;
        display: block;
        text-decoration: none;
        color: inherit;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.04),
          rgba(255, 255, 255, 0.02)
        );
        border: 1px solid var(--stroke);
        border-radius: var(--r);
        overflow: hidden;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
        transform: translate3d(0, 0, 0);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          border-color 0.18s ease,
          filter 0.18s ease;
        will-change: transform;
      }

      .tile:hover {
        box-shadow: var(--shadow);
        border-color: rgba(255, 255, 255, 0.16);
        filter: brightness(1.06);
      }

      .cover {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
      }

      /* нижній блок під картинкою */
      .info {
        padding: 12px 14px 14px;
        background: linear-gradient(
          180deg,
          rgba(27, 43, 65, 0),
          rgba(27, 43, 65, 0.28)
        );
      }

      .badge {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.7);
        padding: 3px 8px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        flex: 0 0 auto;
      }

      .subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .meta {
        opacity: 0.85;
      }

      /* “магніт” легкий — щоб плитка тягнулась як у твоїй ідеї */
      @media (hover: hover) {
        .tile {
          transform: translate3d(0, 0, 0);
        }
      }
      .topbar {
        position: sticky;
        top: 0;
        z-index: 10;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 18px 24px;
        background: linear-gradient(180deg, #0b0f1a, rgba(11, 15, 26, 0.85));
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
      }

      .site-title {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }

      .search {
        width: 220px;
        padding: 6px 10px;

        font-size: 13px;
        color: #fff;

        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        outline: none;
      }

      .search::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }


      /* =========================
   MOBILE (телефон)
   ========================= */
      @media (max-width: 720px) {
        /* щоб не було горизонтального скролу */
        body {
          overflow-x: hidden;
        }

        .shell {
          width: calc(100vw - 12px);
        }

        /* верхній бар: стає в колонку */
        .topbar {
          padding: 14px 14px;
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
        }

        .site-title {
          font-size: 16px;
          letter-spacing: 0.06em;
        }

        /* пошук на всю ширину */
        .search {
          width: 100%;
          padding: 10px 12px;
          font-size: 14px;
          border-radius: 10px;
        }

        .hero {
          grid-template-columns: 1fr;
          padding: 14px 12px 10px;
        }

        .heroCard,
        .sideCard,
        .aboutCard {
          border-radius: 22px;
        }

        .heroCard,
        .sideCard,
        .aboutCard {
          padding: 18px;
        }

        .heroTitle {
          max-width: none;
          font-size: 38px;
        }

        .heroLead,
        .heroNote,
        .sideCard p,
        .aboutCard p {
          font-size: 15px;
        }

        .statGrid,
        .aboutGrid {
          grid-template-columns: 1fr;
        }

        .catalogHeader {
          padding: 0 12px 4px;
          flex-direction: column;
          align-items: flex-start;
        }

        .resultsMeta {
          text-align: left;
        }

        /* сітка: 2 плитки в ряд (зазвичай найкраще) */
        .grid {
          padding: 12px 12px 22px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
        }

        /* трохи менше радіус/тінь (легше для телефону) */
        .tile {
          border-radius: 18px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        }

        .info {
          padding: 14px 16px 18px;
        }

        /* текст на плитці компактніше */
        .titleText {
          font-size: 16px;
        }

        .row2 {
          font-size: 13px;
        }

        /* бейдж рік/серія — менший */
        .badge {
          font-size: 9px;
          padding: 2px 7px;
        }
      }

      /* дуже вузькі телефони: 1 плитка в ряд */
      @media (max-width: 600px) {
        .grid {
          grid-template-columns: 1fr;
          padding: 12px;
          gap: 16px;
        }

        .heroActions {
          flex-direction: column;
        }

        .cta,
        .socialLink {
          width: 100%;
        }
      }