/* ═══════════════════════════════════════════════
     DESIGN TOKENS
  ═══════════════════════════════════════════════ */
  :root {
    --bg:#FFFFFF; --bg-soft:#F4F5F6; --bg-mute:#ECEDEF; --surface:#FFFFFF;
    --ink:#0E0F11; --ink-2:#3A3D42; --ink-soft:#6C7077; --ink-faint:#9CA0A7;
    --line:#E3E5E8; --line-2:#D3D6DA;
    --graphite:#16181C; --graphite-2:#222529; --graphite-3:#2E3237;
    --on-dark:#FFFFFF; --on-dark-soft:#9DA2A9; --on-dark-faint:#63676D;
    --accent:#16181C;
    --grad-cool: linear-gradient(135deg,#3A3D42 0%,#16181C 100%);
    --grad-light: linear-gradient(180deg,#FFFFFF 0%,#EEF0F2 100%);
    --grad-light-rev: linear-gradient(180deg,#EEF0F2 0%,#FFFFFF 100%);
    --grad-dark: linear-gradient(180deg,#1B1E22 0%,#0E0F11 100%);
    --grad-text: linear-gradient(120deg,#0E0F11,#6C7077 50%,#0E0F11);
    --radius:20px; --radius-sm:12px; --maxw:1200px;
    --ease-out: cubic-bezier(.16,1,.3,1);
    --shadow-sm: 0 2px 8px rgba(14,15,17,.08);
    --shadow-md: 0 8px 28px rgba(14,15,17,.12);
    --shadow-lg: 0 20px 50px rgba(14,15,17,.18);
    --shadow-dark: 0 20px 50px rgba(14,15,17,.5);
    --transition: .3s var(--ease-out);
  }

  /* ═══════════════════════════════════════════════
     RESET + BASE
  ═══════════════════════════════════════════════ */
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html {
    scroll-behavior:smooth;
    /* Кастомный стильный скроллбар */
    scrollbar-width:thin;
    scrollbar-color:#D3D6DA transparent;
  }
  ::-webkit-scrollbar { width:6px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:999px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--ink-faint); }

  body {
    background:var(--bg); color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    /* Fade-in при загрузке страницы */
    animation: pageIn .5s ease both;
  }
  @keyframes pageIn { from { opacity:0; } to { opacity:1; } }

  body.locked { overflow:hidden; }
  img { display:block; max-width:100%; }
  a { color:inherit; text-decoration:none; }
  button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
  h1,h2,h3 { font-family:'Space Grotesk',sans-serif; font-weight:500; line-height:1.05; letter-spacing:-.025em; }

  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

  .grad-text {
    background:var(--grad-text); background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shimmer 6s ease-in-out infinite;
  }
  @keyframes shimmer { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

  /* ═══════════════════════════════════════════════
     PROGRESS BAR
  ═══════════════════════════════════════════════ */
  #progress {
    position:fixed; top:0; left:0; height:2px; width:0; z-index:70;
    background:linear-gradient(90deg,#6C7077,#16181C);
    transition:width .1s linear;
  }

  /* ═══════════════════════════════════════════════
     SCROLL REVEAL ANIMATIONS
  ═══════════════════════════════════════════════ */
  html.js [data-anim] { opacity:0; will-change:transform,opacity; }
  html.js [data-anim="up"] { transform:translateY(40px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
  html.js [data-anim="left"] { transform:translateX(-48px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
  html.js [data-anim="blur"] { filter:blur(12px); transform:scale(1.03); transition:opacity 1s ease, filter 1s ease, transform 1s var(--ease-out); }
  html.js [data-anim].in { opacity:1; transform:none; filter:none; }

  /* ═══════════════════════════════════════════════
     BUTTONS — "дорогие" переходы
  ═══════════════════════════════════════════════ */
  .btn {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    gap:9px; padding:15px 28px; border-radius:999px;
    font-size:15px; font-weight:500; white-space:nowrap;
    transition: transform var(--transition), box-shadow var(--transition),
                background var(--transition), color var(--transition), border-color var(--transition);
    overflow:hidden;
  }
  /* ripple-эффект */
  .btn::after {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:rgba(255,255,255,.15); opacity:0;
    transition:opacity .3s ease;
  }
  .btn:hover::after { opacity:1; }
  .btn:active { transform:scale(.97) !important; }

  .btn--dark  { background:var(--graphite); color:#fff; }
  .btn--dark:hover  { transform:translateY(-2px); box-shadow:var(--shadow-dark); }
  .btn--on-dark { background:#fff; color:var(--graphite); }
  .btn--on-dark:hover { transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(0,0,0,.6); }
  .btn--ghost { border:1.5px solid var(--line-2); color:var(--ink); }
  .btn--ghost:hover { border-color:var(--ink); background:var(--bg-soft); transform:translateY(-1px); }
  .btn--sm  { padding:11px 20px; font-size:14px; }
  .btn--block { width:100%; }

  /* ═══════════════════════════════════════════════
     HEADER
  ═══════════════════════════════════════════════ */
  .header {
    position:sticky; top:0; z-index:50;
    background:rgba(14,15,17,.32);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid transparent;
    transition:background var(--transition), border-color var(--transition);
  }
  .header.stuck { background:rgba(255,255,255,.88); border-color:var(--line); box-shadow:var(--shadow-sm); }
  .header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 28px; max-width:var(--maxw); margin:0 auto; }

  .logo {
    display:flex; align-items:center; gap:9px;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; letter-spacing:-.02em;
    color:#fff; flex:none; transition:color var(--transition);
  }
  .header.stuck .logo { color:var(--ink); }
  .logo .mark { width:30px; height:30px; border-radius:9px; background:var(--grad-cool); display:flex; align-items:center; justify-content:center; flex:none; transition:transform var(--transition); overflow:hidden; }
  .logo:hover .mark { transform:rotate(-8deg) scale(1.08); }
  .logo .mark svg { width:16px; height:16px; color:#fff; }
  .logo .mark img { width:100%; height:100%; object-fit:cover; }

  nav.nav { display:flex; align-items:center; gap:28px; font-size:14px; }
  nav.nav a {
    position:relative; color:rgba(255,255,255,.8);
    transition:color .2s ease; padding:4px 0;
  }
  .header.stuck nav.nav a { color:var(--ink-soft); }
  nav.nav a::after {
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease-out);
  }
  nav.nav a:hover { color:#fff; }
  .header.stuck nav.nav a:hover { color:var(--ink); }
  nav.nav a:hover::after { transform:scaleX(1); }

  .nav-toggle-input { display:none; }
  .nav-toggle { display:none; flex-direction:column; gap:5px; padding:6px; cursor:pointer; }
  .nav-toggle span { width:22px; height:1.5px; background:#fff; display:block; transition:background var(--transition), transform .3s ease; }
  .header.stuck .nav-toggle span { background:var(--ink); }
  .header-cta { flex:none; }
  .header .btn--cta { background:#fff; color:var(--graphite); }
  .header.stuck .btn--cta { background:var(--graphite); color:#fff; }

  /* ═══════════════════════════════════════════════
     HERO
  ═══════════════════════════════════════════════ */
  .hero {
    position:relative; min-height:92vh; display:flex; align-items:center;
    margin-top:-74px; padding:120px 0 60px; overflow:hidden;
  }
  .hero-bg { position:absolute; inset:0; z-index:0; }
  .hero-bg img { width:100%; height:100%; object-fit:cover; animation:heroZoom 14s ease-out forwards; }
  @keyframes heroZoom { from{transform:scale(1.1);} to{transform:scale(1);} }
  .hero-scrim {
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,rgba(10,11,12,.92) 0%,rgba(10,11,12,.7) 42%,rgba(10,11,12,.25) 75%,rgba(10,11,12,.45) 100%);
  }
  .hero-scrim::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(10,11,12,.5),transparent 30%,transparent 60%,rgba(10,11,12,.6));
  }
  .hero-content { position:relative; z-index:2; width:100%; }

  .hero-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    color:rgba(255,255,255,.85); margin-bottom:22px;
    font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    opacity:0; animation:fadeUp .8s .2s forwards;
  }
  .hero-eyebrow::before { content:''; width:28px; height:1px; background:rgba(255,255,255,.5); }

  .hero h1 { font-size:clamp(36px,5.8vw,70px); color:#fff; margin-bottom:22px; font-weight:500; max-width:16ch; }
  .hero h1 .line { display:block; overflow:hidden; }
  .hero h1 .line span { display:block; transform:translateY(110%); animation:lineUp .9s var(--ease-out) forwards; }
  .hero h1 .line:nth-child(2) span { animation-delay:.12s; }

  @keyframes lineUp { to{transform:translateY(0);} }
  @keyframes fadeUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

  .hero .lede { color:rgba(255,255,255,.82); font-size:18px; max-width:50ch; margin-bottom:34px; opacity:0; animation:fadeUp .8s .5s forwards; }
  .hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; opacity:0; animation:fadeUp .8s .58s forwards; }

  .search {
    background:rgba(255,255,255,.1); backdrop-filter:blur(20px) saturate(140%);
    border:1px solid rgba(255,255,255,.2); border-radius:var(--radius); padding:18px;
    max-width:920px; opacity:0; animation:fadeUp .9s .66s forwards;
    transition:background .3s ease, box-shadow .3s ease;
  }
  .search:hover { background:rgba(255,255,255,.14); }
  .search-row { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:12px; align-items:end; }
  .field { display:flex; flex-direction:column; gap:7px; }
  .field label { font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }
  .field .sel { position:relative; }
  .field select {
    appearance:none; -webkit-appearance:none; width:100%;
    background:rgba(255,255,255,.95); border:1.5px solid transparent; border-radius:10px;
    padding:12px 36px 12px 14px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field select:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(22,24,28,.12); }
  .field .sel::after { content:''; position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
  .search-btn {
    height:46px; padding:0 24px; border-radius:10px;
    background:var(--graphite); color:#fff; font-size:15px; font-weight:500;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform var(--transition), box-shadow var(--transition);
  }
  .search-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-dark); }
  .search-btn svg { width:16px; height:16px; }

  .hero-stats { display:flex; gap:40px; flex-wrap:wrap; margin-top:30px; opacity:0; animation:fadeUp .8s .8s forwards; }
  .hero-stats b { display:block; font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:600; color:#fff; letter-spacing:-.02em; }
  .hero-stats small { font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.6); }

  /* ═══════════════════════════════════════════════
     MARQUEE
  ═══════════════════════════════════════════════ */
  .marquee { background:var(--ink); overflow:hidden; border-block:1px solid var(--graphite-3); }
  .marquee-track { display:flex; width:max-content; animation:marquee 28s linear infinite; }
  .marquee-track div { display:flex; }
  .marquee-track span {
    font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--on-dark-soft); padding:15px 0; display:inline-flex; align-items:center;
    transition:color .2s ease;
  }
  .marquee-track span:hover { color:#fff; }
  .marquee-track span::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--on-dark-faint); margin:0 40px; }
  @keyframes marquee { to{transform:translateX(-50%);} }

  /* ═══════════════════════════════════════════════
     SECTIONS
  ═══════════════════════════════════════════════ */
  section { padding:80px 0; }
  .section-head { margin-bottom:36px; }
  .section-head.center { text-align:center; display:flex; flex-direction:column; align-items:center; }
  .section-head h2 { font-size:clamp(28px,3.6vw,42px); }
  .eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    color:var(--ink-soft); margin-bottom:18px;
    font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  }
  .eyebrow::before { content:''; width:28px; height:1px; background:var(--line-2); }
  .eyebrow.on-d { color:var(--on-dark-soft); }
  .eyebrow.on-d::before { background:var(--on-dark-faint); }

  /* ═══════════════════════════════════════════════
     CATEGORIES
  ═══════════════════════════════════════════════ */
  .categories { background:var(--grad-light); }
  .cat-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:14px; }
  .cat-tile {
    position:relative; border-radius:var(--radius); overflow:hidden;
    display:flex; align-items:flex-end; background:var(--bg-mute);
    transition:transform .4s var(--ease-out), box-shadow .35s ease;
  }
  .cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .7s var(--ease-out); }
  .cat-tile::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(14,15,17,.05) 30%,rgba(14,15,17,.82)); transition:opacity .3s ease; }
  .cat-tile:hover { transform:translateY(-6px); box-shadow:0 28px 50px -24px rgba(14,15,17,.4); }
  .cat-tile:hover img { transform:scale(1.08); }
  .cat-tile .ov { position:relative; z-index:2; padding:20px; width:100%; }
  .cat-tile .ic { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; margin-bottom:10px; transition:background .25s ease; }
  .cat-tile:hover .ic { background:rgba(255,255,255,.26); }
  .cat-tile .ic svg { width:18px; height:18px; color:#fff; }
  .cat-tile .nm { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:500; color:#fff; }
  .cat-tile .sb { font-size:12px; color:rgba(255,255,255,.72); }
  .cat-tile.big { grid-column:span 2; grid-row:span 2; }
  .cat-tile.big .nm { font-size:26px; }

  /* ═══════════════════════════════════════════════
     TOP SLIDER
  ═══════════════════════════════════════════════ */
  .top { background:var(--grad-light-rev); padding-bottom:60px; }
  .slider-outer { position:relative; }
  .slider-wrap { overflow:hidden; }
  .slider-track { display:flex; gap:18px; transition:transform .45s var(--ease-out); will-change:transform; }

  /* Стрелки: тёмные, полностью видимые, внутри контейнера */
  .slider-btn {
    position:absolute; top:40%; transform:translateY(-50%); z-index:10;
    width:48px; height:48px; border-radius:50%;
    background:var(--graphite); color:#fff;
    border:2px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(14,15,17,.4);
    transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .slider-btn:hover { background:#000; box-shadow:0 10px 28px rgba(14,15,17,.55); transform:translateY(-50%) scale(1.08); }
  .slider-btn:active { transform:translateY(-50%) scale(.96); }
  .slider-btn svg { width:20px; height:20px; flex:none; stroke-width:2.5; }
  .slider-prev { left:10px; }
  .slider-next { right:10px; }

  .slider-dots { display:flex; justify-content:center; gap:8px; margin-top:22px; }
  .slider-dot { width:8px; height:8px; border-radius:50%; background:var(--line-2); cursor:pointer; border:none; transition:background .25s ease, transform .25s ease; }
  .slider-dot.on { background:var(--graphite); transform:scale(1.3); }
  .slider-dot:hover { background:var(--ink-faint); }

  /* Карточка проекта */
  .proj {
    flex:none; width:calc((100% - 3*18px)/4); min-width:200px;
    border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    background:var(--surface);
    transition:transform .4s var(--ease-out), box-shadow .35s ease, border-color .25s ease;
  }
  .proj:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--line-2); }
  .proj-photo { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-mute); }
  .proj-photo img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
  .proj:hover .proj-photo img { transform:scale(1.08); }
  .proj-cat { position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.04em; color:var(--ink); padding:6px 11px 6px 9px; border-radius:999px; }
  .proj-cat svg { width:14px; height:14px; color:var(--ink-2); }
  .proj-body { padding:14px 15px 16px; }
  .proj-spec { font-family:'Space Grotesk',sans-serif; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
  .proj-title { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:500; margin-bottom:4px; line-height:1.3; }
  .proj-price { font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--ink-2); margin-bottom:11px; }
  .proj .buy { width:100%; padding:10px; border-radius:9px; background:var(--graphite); color:#fff; font-size:13px; font-weight:500; transition:background .25s ease, transform .2s ease; }
  .proj .buy:hover { background:#000; transform:translateY(-1px); }
  .proj .buy:active { transform:scale(.98); }

  /* ═══════════════════════════════════════════════
     CATALOG
  ═══════════════════════════════════════════════ */
  .catalog { background:var(--bg); }
  .catalog-head { margin-bottom:22px; }
  .catalog-head h2 { font-size:clamp(28px,3.6vw,42px); }

  .filterbar {
    position:sticky; top:72px; z-index:30;
    background:rgba(255,255,255,.92); backdrop-filter:blur(16px);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 20px; margin-bottom:32px;
    box-shadow:var(--shadow-sm);
    transition:box-shadow .3s ease;
    /* Без этого браузер сам подкручивает scrollY при изменении высоты
       блока (scroll anchoring), из-за чего сворачивание/разворачивание
       зацикливалось само на себя в некоторых положениях скролла. */
    overflow-anchor:none;
  }
  .filterbar:focus-within { box-shadow:var(--shadow-md); }

  /* Автосворачивание панели фильтров при скролле вниз по каталогу */
  .filterbar.is-collapsed .filter-body { display:none !important; }
  .filterbar.is-collapsed .filter-mobile-head { display:flex !important; }
  .filterbar.is-collapsed {
    padding:12px 20px; background:var(--surface); backdrop-filter:none;
    box-shadow:var(--shadow-md); border-color:var(--line-2);
  }
  .filter-mobile-head { transition:none; }
  /* Кнопка показать-скрыть фильтры видна и заметна при любой ширине экрана */
  .filter-toggle-btn {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--graphite); color:#fff;
    border:none; border-radius:999px; padding:10px 18px;
    font-size:14px; font-weight:500; cursor:pointer;
    transition:background .2s ease;
  }
  .filter-toggle-btn:hover { background:#000; }

  .filter-row { display:flex; gap:26px; flex-wrap:wrap; }
  .filter-group { display:flex; flex-direction:column; gap:8px; }
  .filter-group .lbl { font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
  .chips { display:flex; gap:8px; flex-wrap:wrap; }
  .chip {
    border:1.5px solid var(--line-2); border-radius:999px; padding:8px 16px;
    font-size:13px; color:var(--ink-soft);
    transition:all .2s ease;
  }
  .chip:hover { border-color:var(--ink); color:var(--ink); background:var(--bg-soft); transform:translateY(-1px); }
  .chip.on { background:var(--graphite); border-color:var(--graphite); color:#fff; box-shadow:0 4px 12px rgba(22,24,28,.25); }

  .filter-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap; }
  .result-count { font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--ink-2); }
  .result-count b { color:var(--ink); }
  .reset-btn { font-size:13px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; padding:6px 0; }
  .reset-btn:hover { color:var(--ink); }
  .reset-btn svg { width:14px; height:14px; }

  .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .card {
    position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    background:var(--surface);
    transition:transform .4s var(--ease-out), box-shadow .35s ease, border-color .25s ease;
  }
  .card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--line-2); }
  .card-photo { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-mute); }
  .card-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
  .card:hover .card-photo img { transform:scale(1.07); }
  .card-tag { position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.04em; color:var(--ink); padding:6px 11px 6px 9px; border-radius:999px; }
  .card-tag svg { width:14px; height:14px; color:var(--ink-2); }
  .card-badge-top { position:absolute; top:12px; right:12px; background:var(--graphite); color:#fff; font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:500; letter-spacing:.04em; padding:6px 11px; border-radius:999px; z-index:1; }
  .card-body { padding:14px 15px 16px; }
  .card-spec { font-family:'Space Grotesk',sans-serif; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
  .card-title { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:500; margin-bottom:4px; line-height:1.3; }
  .card-price { font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--ink-2); margin-bottom:11px; }
  .card .buy { width:100%; padding:10px; border-radius:9px; background:var(--graphite); color:#fff; font-size:13px; font-weight:500; transition:background .25s ease, transform .2s ease; }
  .card .buy:hover { background:#000; transform:translateY(-1px); }
  .empty-note { grid-column:1/-1; text-align:center; color:var(--ink-soft); font-size:15px; padding:48px 0; }
  .load-more-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:36px; }
  .load-more-info { font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--ink-faint); }

  /* ═══════════════════════════════════════════════
     REVIEWS
  ═══════════════════════════════════════════════ */
  .reviews { background:var(--grad-light); }
  .reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

  .built-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .built-grid img {
    width:100%; height:220px; object-fit:cover; border-radius:var(--radius);
    border:1px solid var(--line); display:block;
    transition:transform .35s var(--ease-out), box-shadow .3s ease;
  }
  .built-grid img:hover { transform:translateY(-4px) scale(1.02); box-shadow:var(--shadow-md); }
  .rv {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:24px; display:flex; flex-direction:column; gap:14px;
    transition:transform .35s var(--ease-out), box-shadow .3s ease, border-color .25s ease;
  }
  .rv:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-2); }
  .rv-stars { display:flex; gap:3px; color:#F59E0B; }
  .rv-stars svg { width:16px; height:16px; fill:currentColor; }
  .rv-text { font-size:14px; color:var(--ink-soft); line-height:1.7; flex:1; }
  .rv-foot { display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:14px; }
  .rv-av { width:40px; height:40px; border-radius:50%; background:var(--graphite); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; color:#fff; flex:none; }
  .rv-name { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; }
  .rv-proj { font-size:12px; color:var(--ink-faint); }

  /* ═══════════════════════════════════════════════
     PROMO
  ═══════════════════════════════════════════════ */
  .promo { background:var(--grad-dark); color:#fff; padding:88px 0; }
  .promo .section-head h2 { color:#fff; }
  .promo-sub { color:var(--on-dark-soft); font-size:16px; margin-top:10px; margin-bottom:28px; max-width:52ch; }
  .promo-body { display:grid; grid-template-columns:1fr 40px 1fr; gap:16px; align-items:start; }
  .promo-col h3 { font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:12px; }
  .promo-plus { display:flex; align-items:center; justify-content:center; padding-top:36px; font-family:'Space Grotesk',sans-serif; font-size:22px; color:var(--on-dark-faint); }
  .pp-search { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:10px 14px; font-family:'Inter',sans-serif; font-size:14px; color:#fff; margin-bottom:10px; transition:border-color .2s ease, background .2s ease; }
  .pp-search::placeholder { color:var(--on-dark-faint); }
  .pp-search:focus { outline:none; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); }
  .pp-list { max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
  .pp-card {
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    border-radius:12px; padding:10px 12px; cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
    display:flex; align-items:center; gap:10px;
  }
  .pp-card:hover { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.1); transform:translateX(2px); }
  .pp-card.sel { border-color:#fff; background:rgba(255,255,255,.15); }
  .pp-card img { width:60px; height:44px; object-fit:cover; border-radius:7px; flex:none; }
  .pp-card-info { flex:1; min-width:0; }
  .pp-card-title { font-family:'Space Grotesk',sans-serif; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pp-card-sub { font-size:11px; color:var(--on-dark-soft); margin-top:2px; }
  .pp-card-chk { width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); flex:none; transition:background .2s ease, border-color .2s ease; display:flex; align-items:center; justify-content:center; }
  .pp-card.sel .pp-card-chk { background:#fff; border-color:#fff; }
  .pp-card.sel .pp-card-chk::after { content:'✓'; font-size:11px; color:var(--graphite); }
  .promo-total { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); padding:18px 22px; margin-top:24px; display:none; }
  .promo-total.show { display:block; animation:fadeUp .3s ease; }
  .pt-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:7px; color:var(--on-dark-soft); }
  .pt-divider { border:none; border-top:1px solid rgba(255,255,255,.15); margin:10px 0; }
  .pt-sum { display:flex; justify-content:space-between; align-items:baseline; }
  .pt-sum span:first-child { font-size:14px; color:var(--on-dark-soft); }
  .pt-sum strong { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; }
  .promo-cta-row { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px; }
  .promo-note { font-size:13px; color:var(--on-dark-soft); }
  .btn--on-dark { background:#fff; color:var(--graphite); }
  .btn--on-dark:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.5); }

  /* ═══════════════════════════════════════════════
     QUIZ (OPROS)
  ═══════════════════════════════════════════════ */
  @keyframes popIn { from{opacity:0;transform:scale(.97);} to{opacity:1;transform:none;} }
  .qr { border:1px solid rgba(255,255,255,.15); border-radius:12px; overflow:hidden; transition:border-color .2s ease, transform .2s ease; }
  .qr:hover { border-color:rgba(255,255,255,.4); transform:translateY(-3px); }
  .qr img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
  .qr .b { padding:11px 13px; }
  .qr .t { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; color:#fff; }
  .qr .s { font-size:11px; color:var(--on-dark-faint); text-transform:uppercase; letter-spacing:.05em; }

  /* ═══════════════════════════════════════════════
     COMPOSE (состав проекта)
  ═══════════════════════════════════════════════ */
  .compose { background:var(--bg-soft); }
  .compose-inner { display:grid; grid-template-columns:auto 1fr; gap:60px; align-items:start; }
  .compose-lead h2 { max-width:12ch; }
  .compose-steps { flex:2 1 540px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .comp { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px; transition:transform .3s ease, box-shadow .3s ease; }
  .comp:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
  .comp .n { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:600; color:var(--line-2); margin-bottom:12px; }
  .comp h3 { font-size:16px; margin-bottom:7px; }
  .comp p { font-size:14px; color:var(--ink-soft); }

  /* ═══════════════════════════════════════════════
     FAQ / QA
  ═══════════════════════════════════════════════ */
  .qa { background:var(--bg); }
  .qa-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
  .qa-sub { color:var(--ink-soft); margin:10px 0 22px; font-size:15px; }
  .acc { border-bottom:1px solid var(--line); }
  .acc summary {
    list-style:none; padding:17px 0; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:500;
    cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;
    transition:color .2s ease;
  }
  .acc summary::-webkit-details-marker { display:none; }
  .acc summary:hover { color:var(--ink-2); }
  .acc summary::after { content:'+'; font-size:20px; font-weight:300; color:var(--ink-faint); transition:transform .3s ease, color .2s ease; flex:none; }
  .acc[open] summary::after { transform:rotate(45deg); color:var(--ink); }
  .acc > p { padding:0 0 16px; color:var(--ink-soft); font-size:15px; line-height:1.7; animation:fadeUp .25s ease; }
  .acc a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; transition:opacity .2s ease; }
  .acc a:hover { opacity:.7; }

  /* ═══════════════════════════════════════════════
     TRUST BAR
  ═══════════════════════════════════════════════ */
  .trust { background:var(--ink); padding:18px 0; }
  .trust .wrap { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
  .trust span { font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.05em; color:var(--on-dark-soft); display:flex; align-items:center; gap:8px; }
  .trust span::before { content:'✓'; color:rgba(255,255,255,.5); }

  /* ═══════════════════════════════════════════════
     FOOTER
  ═══════════════════════════════════════════════ */
  footer { background:var(--graphite); color:#fff; padding:56px 0 32px; }
  .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
  .footer-col h4 { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; margin-bottom:16px; color:#fff; }
  .footer-col a { display:block; font-size:14px; color:var(--on-dark-soft); margin-bottom:9px; transition:color .2s ease; }
  .footer-col a:hover { color:#fff; }
  .footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:var(--on-dark-faint); }

  /* ═══════════════════════════════════════════════
     MODALS
  ═══════════════════════════════════════════════ */
  .modal { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:16px; overflow-y:auto; }
  .modal.open { display:flex; }
  .modal-scrim { position:fixed; inset:0; background:rgba(14,15,17,.7); backdrop-filter:blur(4px); animation:fadeIn .25s ease; cursor:pointer; }
  @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
  .modal-card {
    position:relative; z-index:1; width:100%; max-width:520px; max-height:90vh;
    overflow-y:auto; background:var(--surface); border-radius:var(--radius); padding:30px;
    animation:modalIn .35s var(--ease-out);
    box-shadow:0 30px 80px rgba(14,15,17,.4);
  }
  @keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(20px);} to{opacity:1;transform:none;} }
  .modal-close {
    position:absolute; top:18px; right:18px; width:34px; height:34px;
    border-radius:8px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center;
    color:var(--ink-soft); transition:background .2s ease, color .2s ease; cursor:pointer; border:none;
  }
  .modal-close:hover { background:var(--bg-mute); color:var(--ink); }
  .modal-close svg { width:16px; height:16px; }
  .modal-card h3 { font-family:'Space Grotesk',sans-serif; font-size:20px; margin-bottom:8px; }
  .modal-card .sub { font-size:14px; color:var(--ink-soft); margin-bottom:22px; }
  .inp {
    display:block; width:100%; border:1.5px solid var(--line); border-radius:10px;
    padding:13px 15px; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
    background:var(--bg); margin-bottom:12px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .inp:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(22,24,28,.08); }
  .pay-guarantee { font-size:13px; color:var(--ink-soft); background:var(--bg-mute); border-radius:10px; padding:10px 12px; margin-top:14px; text-align:center; line-height:1.5; }
  .pay-guarantee a { text-decoration:underline; color:inherit; }
  .pay-note { font-size:12px; color:var(--ink-faint); margin-top:6px; text-align:center; line-height:1.5; }
  .pay-brands { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

  /* Detail modal */
  .modal-card.wide { max-width:960px; padding:0; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; height:min(88vh,780px); }
  .pd-left { display:flex; flex-direction:column; background:var(--bg-mute); overflow:hidden; }
  .pd-hero { position:relative; flex:1; min-height:0; overflow:hidden; }
  .pd-hero img { width:100%; height:100%; object-fit:contain; display:block; background:var(--bg-mute); }
  .pd-cat { position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.04em; color:var(--ink); padding:7px 13px 7px 10px; border-radius:999px; z-index:1; }
  .pd-cat svg { width:14px; height:14px; color:var(--ink-2); }
  .pd-thumbs { flex:none; display:flex; gap:8px; padding:12px 14px; overflow-x:auto; background:var(--bg-soft); border-top:1px solid var(--line); }
  .pd-thumb { flex:none; width:60px; height:44px; border-radius:7px; overflow:hidden; border:2px solid transparent; cursor:pointer; opacity:.65; transition:opacity .2s ease, border-color .2s ease; }
  .pd-thumb.on { opacity:1; border-color:var(--ink); }
  .pd-thumb img { width:100%; height:100%; object-fit:cover; }
  .pd-right { display:flex; flex-direction:column; overflow:hidden; position:relative; }
  .pd-close-right { position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:8px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:background .2s ease; cursor:pointer; border:none; z-index:2; }
  .pd-close-right:hover { background:var(--bg-mute); color:var(--ink); }
  .pd-close-right svg { width:15px; height:15px; }
  .pd-scroll { flex:1; overflow-y:auto; padding:28px 28px 0; }
  .pd-spec { font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
  .pd-title { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:500; line-height:1.3; margin-bottom:16px; padding-right:36px; }
  .pd-facts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .pd-facts span { background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; font-family:'Space Grotesk',sans-serif; }
  .pd-desc-head { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:500; color:var(--ink); margin-bottom:8px; }
  .pd-desc { color:var(--ink-soft); font-size:14px; line-height:1.75; margin-bottom:24px; }
  .skel-line { height:13px; border-radius:6px; background:linear-gradient(90deg,var(--bg-mute) 25%,var(--line) 50%,var(--bg-mute) 75%); background-size:200% 100%; animation:skelShimmer 1.4s ease-in-out infinite; margin-bottom:10px; }
  @keyframes skelShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
  .pd-foot { flex:none; padding:18px 28px 24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--bg); }
  .pd-price { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; }
  .pd-price-note { font-size:12px; color:var(--ink-faint); margin-top:2px; }

  /* ═══════════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════════ */
  /* ═══ MOBILE FILTER TOGGLE (скрыт на десктопе) ═══ */
  .filter-mobile-head { display:none; }
  .filter-body { display:block; }
  .result-count--desktop { display:block; }

  @media (max-width:920px) {
    /* ── Header ── */
    nav.nav { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(20,21,24,.97); backdrop-filter:blur(18px); flex-direction:column; align-items:flex-start; gap:0; padding:8px 28px 18px; }
    nav.nav a { padding:13px 0; width:100%; border-bottom:1px solid rgba(255,255,255,.1); color:#fff; }
    .header.stuck nav.nav { background:rgba(255,255,255,.97); }
    .header.stuck nav.nav a { color:var(--ink); border-color:var(--line); }
    .nav-toggle-input:checked ~ nav.nav { display:flex; }
    .nav-toggle { display:flex; }
    .header-cta { display:none; }

    /* ── Hero ── */
    .hero { min-height:auto; padding:116px 0 56px; }
    .search-row { grid-template-columns:1fr 1fr; }
    .search-btn { grid-column:1/-1; justify-content:center; }
    .hero-stats { gap:24px; }

    /* ── Categories ── */
    .cat-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .cat-tile.big { grid-column:span 2; grid-row:span 1; }

    /* ── TOP Slider: 2 в ряд, стрелки на месте ── */
    .top .proj { width:calc((100% - 18px)/2); }
    .slider-prev { left:6px; }
    .slider-next { right:6px; }
    .slider-btn { width:40px; height:40px; }

    /* ── Catalog: 2 колонки ── */
    .cards { grid-template-columns:repeat(2,1fr); gap:14px; }

    /* ── Filters: кнопка-тоггл ── */
    .filterbar { padding:14px 16px; top:64px; }
    .filter-mobile-head { display:flex; align-items:center; justify-content:space-between; }
    .filter-body { display:none; margin-top:14px; }
    .filter-body.open { display:block; }
    .result-count--desktop { display:none; }
    /* Кнопка «Показать результаты» внутри фильтра */
    .filter-apply-btn {
      width:100%; margin-top:14px; padding:13px;
      background:var(--graphite); color:#fff;
      border:none; border-radius:12px; font-size:15px; font-weight:500;
      cursor:pointer; transition:background .2s ease;
    }
    .filter-apply-btn:hover { background:#000; }

    /* ── Detail Modal: одна колонка, фото полностью ── */
    .modal-card.wide {
      grid-template-columns:1fr;
      height:min(96vh,740px);
      display:flex; flex-direction:column;
      border-radius:20px 20px 0 0;
      position:fixed; bottom:0; left:0; right:0;
      max-width:100%;
    }
    .pd-left { flex:none; height:auto; max-height:46vh; aspect-ratio:4/3; }
    .pd-hero { aspect-ratio:unset; height:100%; }
    .pd-hero img { width:100%; height:100%; object-fit:contain; background:var(--bg-mute); }
    .pd-right { flex:1; min-height:0; display:flex; flex-direction:column; }
    .pd-thumbs { padding:8px 12px; }
    .pd-thumb { width:52px; height:38px; }
    .pd-scroll { flex:1; overflow-y:auto; padding:14px 16px 0; }
    .pd-spec { font-size:10px; }
    .pd-title { font-size:16px; padding-right:32px; margin-bottom:12px; }
    .pd-facts span { padding:6px 12px; font-size:12px; }
    .pd-desc { font-size:13px; }
    .pd-foot { padding:12px 16px 16px; }
    .pd-price { font-size:20px; }
    .pd-close-right { width:30px; height:30px; top:10px; right:10px; }

    /* ── Reviews: 2 в ряд ── */
    .reviews-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .rv { padding:16px; }
    .built-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
    .built-grid img { height:150px; }

    /* ── Promo ── */
    .promo-body { grid-template-columns:1fr; gap:20px; }
    .promo-plus { display:none; }
    .pp-list { max-height:220px; }

    /* ── Other ── */
    .gallery { grid-template-columns:repeat(2,1fr); }
    .compose-inner { grid-template-columns:1fr; }
    .compose-steps { grid-template-columns:1fr; }
      .qa-grid { grid-template-columns:1fr; gap:40px; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    section { padding:64px 0; }
      .modal-card { padding:24px; }
  }

  @media (max-width:520px) {
    .wrap { padding:0 16px; }

    /* ── Hero ── */
    .hero { padding:100px 0 44px; }
    .hero h1 { font-size:28px; }
    .hero .lede { font-size:15px; }
    .hero-stats { gap:14px; }
    .hero-stats b { font-size:22px; }
    .search-row { grid-template-columns:1fr; gap:10px; }
    .search-btn { grid-column:1/-1; }

    /* ── Categories ── */
    .cat-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; }
    .cat-tile.big { grid-column:span 2; grid-row:span 1; }
    .cat-tile .nm { font-size:14px; }
    .cat-tile.big .nm { font-size:18px; }

    /* ── TOP Slider: 2 в ряд, стрелки компактнее ── */
    .top .proj { width:calc((100% - 12px)/2); }
    .slider-btn { width:34px; height:34px; border-width:2px; }
    .slider-btn svg { width:16px; height:16px; }
    .slider-prev { left:2px; }
    .slider-next { right:2px; }

    /* ── Catalog: 2 колонки, компактные карточки ── */
    .cards { grid-template-columns:repeat(2,1fr); gap:10px; }
    .card-photo { aspect-ratio:3/2; }
    .card-body { padding:10px 10px 12px; }
    .card-spec { font-size:9px; }
    .card-title { font-size:13px; margin-bottom:2px; }
    .card-price { font-size:12px; margin-bottom:8px; }
    .card .buy { padding:10px; font-size:12px; min-height:40px; border-radius:8px; }

    /* ── Filters ── */
    .filter-row { gap:12px; }
    .chips { gap:6px; }
    .chip { padding:8px 12px; font-size:12px; }

    /* ── Reviews: 2 в ряд ── */
    .reviews-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .rv { padding:14px; gap:10px; }
    .built-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .built-grid img { height:120px; }
    .rv-text { font-size:13px; }
    .rv-name { font-size:13px; }
    .rv-proj { font-size:11px; }
    .rv-av { width:34px; height:34px; font-size:13px; }

    /* ── Promo ── */
    .promo { padding:52px 0; }
    .pp-list { max-height:180px; }
    .pp-card img { width:50px; height:36px; }
    .pp-card-title { font-size:12px; }

    /* ── Modals: карточка проекта и оплата по центру ── */
    .modal { padding:12px; }
    .modal-card { padding:20px; border-radius:16px; max-height:90vh; overflow-y:auto; }
    /* Детали проекта — sheet снизу */
    #detail-modal { padding:0; align-items:flex-end; }
    #detail-modal .modal-card.wide { border-radius:20px 20px 0 0; }
    .modal-card.wide { height:min(96vh,740px); }

    /* ── Footer ── */
    .footer-grid { grid-template-columns:1fr; gap:24px; }
    .footer-col a { font-size:15px; margin-bottom:11px; }

    /* ── FAQ ── */
    .acc summary { font-size:14px; }

    /* ── Sections ── */
    section { padding:48px 0; }
    .section-head { margin-bottom:20px; }
    .section-head h2 { font-size:24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    html.js [data-anim] { opacity:1 !important; transform:none !important; filter:none !important; }
  }

/* Карточки каталога/слайдера теперь настоящие ссылки (для SEO и открытия в новой вкладке) —
   сбрасываем стандартные стили <a>, чтобы визуально совпадали с прежними <div> */
a.card-photo, a.card-title, a.proj-photo, a.proj-title {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
}