/* ==========================================================================
       1) CSS Variables (Theme)
       ========================================================================== */
       :root{
        /* палитра */
        --bg: #fafaf9;           /* общий фон */
        --paper: #ffffff;        /* поверхности */
        --ink: #0f172a;          /* основной текст */
        --muted: #616e7c;        /* вторичный текст */
        --line: rgba(2,6,23,.08);/* тонкая линия */
        --brand: #C7A46E;        /* мягкое золото */
        --brand-ink: #755E36;
        --accent: #2C395B;       /* глубокий индиго */
        --success: #16a34a;
      
        /* размеры/тени */
        --radius: 18px;
        --container: 1100px;
        --shadow-sm: 0 4px 16px rgba(2,6,23,.06);
        --shadow:    0 10px 30px rgba(2,6,23,.08);
      
        /* мобильный «гаттер» */
        --gutter: clamp(18px, 6vw, 28px);
      }
      
      /* ==========================================================================
         2) Base / Reset
         ========================================================================== */
      *{ box-sizing:border-box }
      html,body{ height:100% }
      html{
        scroll-behavior:smooth;
        -webkit-text-size-adjust:100%; /* iOS Safari: не увеличивать шрифт */
      }
      body{
        margin:0;
        font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
        color:var(--ink);
        background:linear-gradient(180deg,#fcfcfb, #f7f7f5 45%, #fafaf9 100%);
        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
      }
      img{ max-width:100%; display:block }
      a{ color:inherit; text-decoration:none }
      .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px }
      
      /* хедер/футер — учитываем вырезы экрана и гаттеры */
      .header .container,
      .footer .container{
        padding-left:  calc(var(--gutter) + env(safe-area-inset-left));
        padding-right: calc(var(--gutter) + env(safe-area-inset-right));
      }
      .footer__in{ padding:22px var(--gutter) }
      
      /* ==========================================================================
         3) Header
         ========================================================================== */
      .header{
        position:sticky; top:0; z-index:50;
        backdrop-filter:saturate(1.1) blur(10px);
        background:rgba(255,255,255,.75);
        border-bottom:1px solid var(--line);
      }
      .header__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0 }
      .brand{ display:flex; align-items:center; gap:12px }
      .brand__mark{ width:16px; height:16px; border-radius:4px; background:linear-gradient(135deg,#f5e6c9,var(--brand)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06) }
      .brand__name{ font-weight:800; letter-spacing:.2px }
      .nav{ display:flex; gap:22px; align-items:center }
      .nav a{ color:#3b4150; font-weight:600 }
      .nav a:hover{ color:var(--accent) }
      
     /* Buttons */
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 18px; border-radius:999px; font-weight:700;
      border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm);
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(2,6,23,.10) }
    .btn:focus-visible{ outline:2px solid rgba(44,57,91,.35); outline-offset:2px }

    /* Accent (gold) */
    .btn--brand {
      background: linear-gradient(180deg, #f8e6b5, #dcb868); /* светлое, чистое золото */
      color: #2b261b;
      border: 0;
      box-shadow: 0 6px 16px rgba(220, 184, 104, 0.35);
      transition: all 0.2s ease;
    }
    
    .btn--brand:hover {
      background: linear-gradient(180deg, #ffe7a6, #d5aa4d);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(220, 184, 104, 0.45);
    }
    
    .btn--brand:active {
      transform: translateY(0);
      box-shadow: 0 4px 10px rgba(220, 184, 104, 0.3);
    }

    /* Ghost */
    .btn--ghost{
      background:#fff;
      color:var(--accent);
      border:1px solid rgba(44,57,91,.20);
    }
    .btn--ghost:hover{
      background:#f7f8fb;
      box-shadow:0 6px 18px rgba(44,57,91,.12);
    }
      
      /* ==========================================================================
         4) Hero
         ========================================================================== */
      .hero{
        padding:56px 0 24px; border-bottom:1px solid var(--line);
        background:
          radial-gradient(800px 400px at 100% -10%, rgba(199,164,110,.18), transparent 55%),
          radial-gradient(600px 340px at 0% -10%, rgba(44,57,91,.10), transparent 50%);
      }
      .hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center }
      .hero__copy{ display:flex; flex-direction:column; gap:16px }
      .eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#6b7280; font-weight:700 }
      .title-xl{ font-size:clamp(30px,4.8vw,52px); line-height:1.04; letter-spacing:-.3px; margin:0 }
      .lead{ color:var(--muted); font-size:clamp(16px,2.3vw,18px) }
      .hero__bullets{ display:grid; grid-template-columns:1fr; gap:8px }
      .micro{ display:flex; align-items:center; gap:10px; font-weight:600; color:#374151 }
      .micro i{ width:8px; height:8px; border-radius:50%; background:var(--brand) }
      .hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px }
      
      .hero__visual{ position:relative }
      .device{ border-radius:16px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden }
      .device__bar{ height:42px; background:#f6f6f4; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 12px }
      .dot{ width:10px; height:10px; border-radius:50%; background:#d6d3cd }
      .device__screen{ aspect-ratio:16/11; background:linear-gradient(180deg,#ffffff,#fbfbfa); display:flex; align-items:center; justify-content:center; padding:22px }
      .sheet{ width:100%; max-width:520px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 6px 24px rgba(12,18,38,.06); padding:14px }
      .sheet__head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eee; padding-bottom:8px; margin-bottom:10px }
      .pill{ font-size:13px; padding:4px 8px; border-radius:999px; background:#f7f4ee; color:#7a6746; border:1px solid rgba(199,164,110,.35) }
      .table{ width:100%; border-collapse:collapse; font-size:13.8px }
      .table th, .table td{ padding:10px 8px; border-bottom:1px solid #f1f1ef; text-align:left }
      .kpi{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap }
      .kpi__item{ flex:1 1 160px; min-width:160px; background:#f9f7f3; border:1px solid rgba(199,164,110,.35); border-radius:12px; padding:10px }
      .kpi__title{ font-size:12px; color:#7a6746 }
      .kpi__value{ font-weight:800; font-size:20px; color:#2C2A25 }
      
      /* ==========================================================================
         5) Sections / Typography helpers
         ========================================================================== */
      .section{ padding:56px 0 }
      .section--paper{ background:var(--paper) }
      .section__head{ display:flex; flex-direction:column; gap:8px; max-width:820px; margin:0 auto 18px auto; text-align:center }
      .eyeline{ font-weight:800; color:var(--accent); letter-spacing:.3px }
      .h2{ font-size:28px; font-weight:800; line-height:1.15; margin:0 }
      .sub{ color:var(--muted) }
      
      /* ==========================================================================
         6) Pillars / Transform rows
         ========================================================================== */
      .pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:1000px; margin:0 auto }
      .pillar{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow-sm) }
      .pillar h3{ margin:6px 0 6px; font-size:18px }
      .pillar p{ color:var(--muted); font-size:15px }
      
      .transform{ max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:10px }
      .trow{ display:grid; grid-template-columns:1fr 24px 1fr; gap:10px; align-items:center; border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px }
      .trow b{ display:block }
      .trow small{ color:var(--muted) }
      
      /* ==========================================================================
         7) Catalog / Cards
         ========================================================================== */
      .catalog{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; max-width:1000px; margin:0 auto }
      .card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-sm) }
      .card__media{ aspect-ratio:16/10; border-radius:12px; background:linear-gradient(135deg,#f6f0e3,#f9f7f3); border:1px solid var(--line); position:relative; overflow:hidden }
      .card__media img{
        position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; border-radius:12px; display:block; /* Safari fill */
      }
      .meta{ display:flex; align-items:center; justify-content:space-between }
      .price{ font-weight:800; color:var(--accent) }
      .strike{ color:#98a2b3; text-decoration:line-through; font-weight:600; margin-right:8px }
      
      /* Safari Grid fix: не даём карточкам вылезать за колонку */
      .catalog > .card{ min-width:0 }
      
      /* link «Читать подробнее» */
      .card__more{
        display:inline-block;
        margin:-25px 0 -8px;
        font-weight:500; font-size:14px; color:var(--accent);
        text-decoration:underline; text-decoration-thickness:from-font; text-underline-offset:3px; cursor:pointer;
      }
      .card__more:hover{ opacity:.85 }
      .card__more:focus{ outline:2px solid rgba(44,57,91,.25); outline-offset:2px; border-radius:4px }
      
      /* ==========================================================================
         8) Steps / Trust / Pricing / FAQ / CTA / Footer
         ========================================================================== */
      .steps{ max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:12px }
      .step{ display:grid; grid-template-columns:48px 1fr; gap:12px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px }
      .step__n{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-weight:800; background:linear-gradient(180deg,#f5e6c9,var(--brand)); color:var(--brand-ink); border:1px solid rgba(199,164,110,.45) }
      
      .trust{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
      .quote{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px }
      .who{ display:flex; align-items:center; gap:12px; margin-top:10px }
      .avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#ffffff,var(--brand)) }
      
      .pricing{ max-width:820px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:16px }
      .pricebox{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:var(--shadow) }
      .ul{ display:grid; gap:8px; margin:10px 0 }
      .ul li{ list-style:none; display:flex; align-items:flex-start; gap:10px }
      .ul i{ margin-top:6px; width:8px; height:8px; border-radius:50%; background:var(--accent) }
      
      .faq{ max-width:900px; margin:0 auto; display:grid; gap:12px }
      details{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px }
      summary{ cursor:pointer; font-weight:800 }
      details[open]{ outline:1px solid rgba(199,164,110,.45) }
      details > p{ color:var(--muted) }
      
      .cta{
        max-width:980px; margin:0 auto;
        background:linear-gradient(135deg,#f5e6c9,#ffffff);
        border:1px solid rgba(199,164,110,.45); border-radius:22px; padding:20px;
        display:grid; grid-template-columns:1fr; gap:10px; text-align:center;
        box-shadow:var(--shadow);
      }
      
      .footer{ border-top:1px solid var(--line); background:#fff; color:#475467 }
      .footer__in{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:22px 0 }
      
      /* ==========================================================================
         9) Browser mock
         ========================================================================== */
      .browser{ border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden }
      .browser__top{ background:#f5f6f7; border-bottom:1px solid var(--line); padding:10px 12px }
      .browser__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
      .browser__controls{ display:flex; gap:8px; margin-right:6px }
      .ctrl{ width:10px; height:10px; border-radius:50% }
      .ctrl--r{ background:#ff5f56 } .ctrl--y{ background:#ffbd2e } .ctrl--g{ background:#27c93f }
      
      .browser__tabs{ display:flex; gap:6px; align-items:center }
      .tab{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm) }
      .tab__favicon{ width:14px; height:14px; border-radius:3px; background:#22c55e }
      .tab__title{ font-weight:700; font-size:12.5px; color:#111827 }
      
      .browser__addr{ flex:1; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); min-width:260px }
      .addr__lock{ width:10px; height:10px; border-radius:2px; background:#16a34a }
      .addr__text{ font-size:12.5px; color:#475467; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
      
      .browser__actions{ display:flex; align-items:center; gap:8px }
      .action{ height:30px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:700; color:#111827; display:inline-flex; align-items:center }
      .avatar{ width:24px; height:24px; border-radius:50%; background:#ffffff; border:1px solid var(--line) }
      
      .toolbar{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:#ffffff; border-bottom:1px solid var(--line) }
      .tool{ height:28px; padding:0 10px; border-radius:6px; border:1px solid var(--line); background:#fff; font-size:12px; color:#111827 }
      
      .sheet-frame{ background:linear-gradient(180deg,#ffffff,#fbfbfa); padding:18px }
      .sheet-screen{ position:relative; aspect-ratio:16/10; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 6px 24px rgba(12,18,38,.06); overflow:hidden }
      .sheet-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
      
      /* ==========================================================================
         10) Modal (product)
         ========================================================================== */
      .modal{
        position:fixed; inset:0; display:none;
        align-items:center; justify-content:center;
        padding:20px; background:rgba(15,23,42,.55); z-index:1000;
      }
      .modal--open{ display:flex; animation:fadeIn .16s ease }
      @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
      
      .modal__panel{
        width:min(100%,1100px);
        height:calc(100vh - 40px);
        background:var(--paper);
        border:1px solid var(--line);
        border-radius:20px;
        box-shadow:var(--shadow);
        overflow:hidden;
        display:grid;
        grid-template-rows:auto 1fr; /* header + scrollable body */
      }
      
      .modal__top{
        display:flex; justify-content:flex-end; align-items:center;
        padding:12px 14px; border-bottom:1px solid var(--line);
      }
      
      .modal__body{
        overflow:auto; -webkit-overflow-scrolling:touch;
        padding:22px; min-height:0;
      }
      
      .modal__grid{
        display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; min-height:0;
      }
      
      .modal__media{ background:#fff; padding:0 }
      .modal__media .shot{
        border-radius:12px; border:1px solid var(--line); overflow:hidden;
        aspect-ratio:16/10; position:sticky; top:0; /* прилипает пока скроллим */
      }
      .modal__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
      
      /* SUMMARY справа */
      .summary{ position:relative; padding:6px 0 8px }
      .summary__title{ margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:.2px }
      .summary__priceRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 10px }
      .summary__price{ display:flex; align-items:center; gap:10px; font-weight:800 }
      .summary__price .now{ font-size:26px; color:var(--accent) }
      .summary__price .was{ color:#98a2b3; text-decoration:line-through; font-weight:700 }
      .summary__price .sale,
      .summary .sale{ padding:4px 8px; border-radius:999px; background:#fee2e2; color:#b91c1c; font-weight:800; font-size:12px; border:1px solid #fecaca }
      .summary__cta{ width:100%; margin:2px 0 8px }
      .summary__note{ margin:0 }
      .divider{ height:1px; background:var(--line); margin:14px 0 }
      
      /* Низ: детали */
      .modal__details{
        margin-top:18px; max-width:880px; margin-left:auto; margin-right:auto;
      }
      .modal__details .modal__section{ max-width:none }
      .modal__section{ max-width:640px }
      .modal__section + .modal__section{ margin-top:16px }
      
      /* ==========================================================================
         11) Structured lists (checks)
         ========================================================================== */
      .checks{ display:grid; gap:10px; margin:6px 0 }
      .checks li{
        list-style:none; display:grid;
        grid-template-columns:10px var(--label, 220px) 1fr;
        column-gap:12px; align-items:start;
      }
      .checks i{ grid-column:1; margin-top:6px; width:8px; height:8px; border-radius:50%; background:var(--accent) }
      .checks li b{ grid-column:2 }
      .checks li .desc{ grid-column:3; color:var(--muted) }
      .checks li .desc::before{ content:"— "; color:inherit }
      .checks--narrow{ --label:180px }
      
      /* ==========================================================================
         12) Bundle (pricing card)
         ========================================================================== */
      .bundle{
        max-width:1100px; margin:0 auto;
        background:#fff; border:1px solid var(--line);
        border-radius:22px; box-shadow:var(--shadow); padding:20px;
      }
      .bundle__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start }
      
      .bundle__visual{ margin:0 }
      .bundle__visual .ph{
        aspect-ratio:16/10; border-radius:16px; border:1px dashed rgba(2,6,23,.22);
        background:
          linear-gradient(0deg,rgba(255,255,255,.6),rgba(255,255,255,.6)),
          repeating-linear-gradient(135deg,#efeae2 0 14px,#f6f2ec 14px 28px);
        display:grid; place-items:center; color:#475467; font-weight:800;
        box-shadow:0 8px 26px rgba(2,6,23,.06);
      }
      .included{ margin-top:10px; color:#475467 }
      .included ul{ margin:6px 0 0; padding:0; display:flex; gap:10px; flex-wrap:wrap }
      .included li{ list-style:none; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff }
      
      .tagrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px }
      .tag{
        display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
        background:linear-gradient(180deg,#f5e6c9, var(--brand)); color:var(--brand-ink);
        border:1px solid rgba(199,164,110,.35); font-weight:800; font-size:13px;
      }
      
      .bundle__priceRow{ display:flex; align-items:end; justify-content:flex-start; margin:8px 0 6px }
      .priceWrap{ display:flex; align-items:baseline; gap:12px }
      .was{ color:#98a2b3; text-decoration:line-through; font-weight:700; font-size:22px }
      .now{ font-weight:900; font-size:44px; color:var(--accent); letter-spacing:.2px }
      .save{ padding:4px 8px; border:1px solid #c6f6d5; background:#ecfdf5; color:#065f46; border-radius:999px; font-weight:800; font-size:12.5px }
      
      .bullets{ margin:12px 0 14px; display:grid; gap:8px }
      .bullets li{ list-style:none; display:grid; grid-template-columns:10px 1fr; column-gap:12px }
      .bullets i{ width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:7px }
      .bullets b{ font-weight:800 }
      
      .bundle__cta{ width:100%; font-size:18px; padding:14px 18px; margin-top:2px }
      .bundle__note{ margin:10px 0 0 }
      
      .bundle__why{ margin-top:16px }
      .bundle__why h4{ margin:0 0 8px; font-size:16px }
      .whygrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
      .why{ background:#f9f7f3; border:1px solid rgba(199,164,110,.35); border-radius:14px; padding:12px }
      
      /* ==========================================================================
         13) System stack (3 images, no crop)
         ========================================================================== */
      .system__stack{
        position:relative; width:min(100%, 760px); aspect-ratio:16 / 10;
        margin:0 auto; overflow:visible;
      }
      .system__stack img{
        position:absolute; left:50%; top:50%;
        width:var(--w, 100%); height:auto; border-radius:16px; pointer-events:none;
        transform: translate(var(--x, -50%), var(--y, -50%)) rotate(var(--r, 0deg)) scale(var(--s, 1));
        transform-origin:center;
      }
      .system__img--back { --w:80%; --x:-58%; --y:-52%; --r:-6deg; --s:1; z-index:1 }
      .system__img--mid  { --w:85%; --x:-50%; --y:-52%; --r:0deg;  --s:1; z-index:2 }
      .system__img--front{ --w:80%; --x:-42%; --y:-54%; --r:6deg;  --s:1; z-index:3 }


      /* Header actions: CTA + language switch */
      .header__actions{display:flex; align-items:center; gap:12px}

      /* Language switcher */
      .lang-switch{display:flex; align-items:center; gap:8px}
      .lang{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
        border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:var(--shadow-sm)}
      .lang:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(2,6,23,.10); transition:transform .15s ease, box-shadow .15s ease}

      /* Flags (CSS-only, без картинок) — аккуратные, скругленные */
      .flag{display:inline-block; width:18px; height:12px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

      /* visually-hidden text */
      .vh{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

      /* Mobile: ужмём зазор, чтобы всё влезло */
      @media (max-width:640px){
        .header__actions{gap:8px}
        .lang{width:26px; height:26px}
        .flag{width:16px; height:11px}
      }


      
      /* ==========================================================================
         14) Media queries (layout)
         ========================================================================== */
      @media (max-width:1020px){
        .hero__grid{ grid-template-columns:1fr; gap:18px }
        .hero__visual{ order:-1 } /* визуал сверху на мобиле */
        .pillars{ grid-template-columns:1fr 1fr }
        .catalog{ grid-template-columns:1fr 1fr }
        .trust{ grid-template-columns:1fr 1fr }
      
        .bundle__grid{ grid-template-columns:1fr }
        .now{ font-size:36px }
        .whygrid{ grid-template-columns:1fr }
      }
      
      @media (max-width:750px){
        .nav{ display:none }
      }
      
      @media (max-width:640px){
        .nav{ display:none }
        .title-xl{ font-size:clamp(26px, 7vw, 34px) }
        .lead{ font-size:15.5px }
        .pillars, .catalog, .trust{ grid-template-columns:1fr }
        .header__in{ padding:10px 0 }
        .btn{ padding:11px 16px }
        .kpi__item{ min-width:0 }
        .trow{ grid-template-columns:1fr; gap:6px }
        #clar_footer{ display:none }
      
        /* browser mock tweaks */
        .tab__title{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
        .browser__actions .action{ display:none }
      
        /* system stack on mobile */
        .system__stack{ width:min(100%, 520px); aspect-ratio:16 / 10 }
        .system__img--back  { --w:95%; --x:-56%; --y:-52%; --r:-4deg }
        .system__img--mid   { --w:100%; --x:-50%; --y:-52%; --r:0deg  }
        .system__img--front { --w:95%; --x:-44%; --y:-54%; --r:4deg   }
      }
      
      @media (max-width:720px){
        .checks li{ grid-template-columns:10px 1fr }
        .checks li b{ grid-column:2 }
        .checks li .desc{ grid-column:2; margin-top:2px }
      }
      
      @media (max-width:400px){
        .header__in{ gap:10px }
        .header .btn{ padding:6px 10px }
        .brand__name{ font-size:15px }
      }
      
      @media (max-width: 450px) {
        header .btn--brand {
          display: none;
        }
      }

      @media (max-width: 425px){
        .hero__cta{
          flex-direction: column;      /* в столбик */
          align-items: center;         /* центрируем */
          gap: 10px;
        }
        .hero__cta .btn{
          width: clamp(260px, 85vw, 520px);  /* ~85% ширины экрана, с безопасными пределами */
          justify-content: center;     /* на всякий случай */
        }
      }

      /* Modal specific MQ */
      @media (max-width:900px){
        .modal__grid{ grid-template-columns:1fr }
        .modal__media{ padding:12px }
        .modal__media .shot{ top:0; position:relative }
        .modal__scroll{ padding:16px }
        .modal__title{ font-size:20px }
        .modal__price .now{ font-size:24px }
      
        .modal__body{ padding:16px }
        .summary__title{ font-size:20px }
        .summary__price .now{ font-size:24px }
        .modal__details{ max-width:640px }
      }