:root{
      --bg:#ffffff;
      --text:#0f172a;
      --muted:#475569;
      --line:#e5e7eb;
      --card:#f8fafc;

      --accent:#f97316;   /* помаранчевий CTA */
      --accent2:#0ea5e9;  /* синій для бейджів/посилань */
      --ok:#16a34a;

      --r:14px;
      --shadow: 0 10px 24px rgba(2,6,23,.06);
      --w:1160px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    }

    *{box-sizing:border-box}
    body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg)}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{max-width:var(--w);margin:0 auto;padding:0 16px}

    /* Header (чисто, як у конверсійних DTC-лендингів) */
    .header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
    .header__in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
    .logo{width:34px;height:34px;border-radius:10px;background:#111827}
    .nav{display:flex;gap:14px;align-items:center}
    .nav a{font-weight:700;color:var(--muted)}
    .nav a:hover{color:var(--text)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:12px 16px;border-radius:10px;border:1px solid transparent;
      font-weight:900;cursor:pointer;transition:.15s;white-space:nowrap;
    }
    .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(249,115,22,.20)}
    .btn-primary:hover{transform:translateY(-1px)}
    .btn-outline{background:#fff;border-color:var(--line);color:var(--text)}
    .btn-outline:hover{background:#f9fafb}

    /* Layout */
    .section{padding:34px 0}
    .grid{display:grid;gap:18px}

    /* Hero: “problem → solution → offer”, без градієнтів */
    .hero{padding:22px 0 10px}
    .hero__in{grid-template-columns:1.1fr .9fr;align-items:start}
    .kicker{display:flex;gap:8px;flex-wrap:wrap}
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 10px;border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      font-weight:800;
      font-size:13px;
    }
    h1{margin:14px 0 0;font-size:clamp(28px,4.2vw,46px);line-height:1.05}
    .lead{margin:12px 0 0;color:var(--muted);line-height:1.6;font-size:16px}

    /* Trust row: ключ к конверсии */
    .trust{
      margin-top:14px;
      display:flex;gap:10px;flex-wrap:wrap;
      color:var(--muted);font-weight:700;font-size:13px;
    }
    .trust b{color:var(--text)}
    .trustItem{
      display:inline-flex;align-items:center;gap:8px;
      border:1px solid var(--line);
      padding:8px 10px;border-radius:999px;background:#fff;
    }
    .dotOk{width:10px;height:10px;border-radius:999px;background:var(--ok)}

    /* Product Card: як checkout-вітрина (конверсійна) */
    .offer{
      border:1px solid var(--line);
      border-radius:var(--r);
      box-shadow:var(--shadow);
      background:#fff;
      overflow:hidden;
    }
    .offerTop{padding:14px 14px 0}
    .offerMedia{
      border:1px dashed var(--line);
      border-radius:12px;
      background:var(--card);
      padding:18px;
      display:grid;place-items:center;
      min-height:240px;
      color:var(--muted);
      text-align:center;
    }
    .offerBody{padding:14px}
    .priceRow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px}
    .price{font-size:28px;font-weight:1000}
    .old{color:#94a3b8;text-decoration:line-through;font-weight:800}
    .save{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 10px;border-radius:999px;
      background:#fff7ed;border:1px solid #fed7aa;
      color:#9a3412;font-weight:900;font-size:13px;
    }
    .miniList{display:grid;gap:10px;margin-top:12px}
    .miniItem{
      display:flex;gap:10px;align-items:flex-start;
      padding:10px;border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      font-size:13px;line-height:1.45;
    }
    .miniIcon{
      width:18px;height:18px;border-radius:6px;background:#111827;
      flex:0 0 auto;margin-top:2px;
    }

    /* Form */
    .form{margin-top:12px;display:grid;gap:10px}
    .input{
      width:100%;
      padding:12px 12px;
      border-radius:10px;
      border:1px solid var(--line);
      background:#fff;
      outline:none;
      font-weight:700;
    }
    .hint{color:var(--muted);font-size:12px;line-height:1.45}

    /* Section blocks */
    .cards3{grid-template-columns:repeat(3,1fr)}
    .card{
      border:1px solid var(--line);
      border-radius:var(--r);
      background:#fff;
      box-shadow:var(--shadow);
      padding:14px;
    }
    .card h3{margin:0;font-size:16px}
    .card p{margin:8px 0 0;color:var(--muted);line-height:1.55}

    /* Comparison: reduces doubt */
    .table{
      border:1px solid var(--line);
      border-radius:var(--r);
      overflow:hidden;
      background:#fff;
      box-shadow:var(--shadow);
    }
    table{width:100%;border-collapse:collapse}
    th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
    th{background:#f9fafb;font-size:13px;color:var(--muted)}
    tr:last-child td{border-bottom:none}
    .yes{font-weight:900}
    .no{color:#94a3b8}

    /* Reviews (без карусели — часто конвертит лучше на мобиле) */
    .reviews{grid-template-columns:repeat(3,1fr)}
    .reviewTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .stars{letter-spacing:1px}
    .name{font-weight:900}

    /* Footer */
    .footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:14px}

    @media (max-width: 980px){
      .hero__in{grid-template-columns:1fr}
      .cards3{grid-template-columns:1fr}
      .reviews{grid-template-columns:1fr}
      .nav{display:none}
    }
    :root{
    --bg:#ffffff; --text:#0f172a; --muted:#475569; --line:#e5e7eb; --card:#f8fafc;
    --accent:#f97316; --accentDark:#ea580c; --ok:#16a34a;
    --r:16px; --shadow:0 10px 24px rgba(2,6,23,.08);
    --w:1120px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg)}
  a{text-decoration:none;color:inherit}
  .container{max-width:var(--w);margin:0 auto;padding:0 5px}

  .hero{padding:18px 0 24px}
  .hero__wrap{display:grid;gap:16px}

  /* PRODUCT CARD */
  .productCard{
    border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--shadow);
    overflow:hidden;
  }
  .productMedia{position:relative;background:var(--card);border-bottom:1px solid var(--line)}
  .productImg{display:block;width:100%;height:auto;object-fit:contain;}
  .badge{
    position:absolute; top:12px; left:12px;
    padding:8px 10px; border-radius:999px; font-weight:900; font-size:13px;
    border:1px solid var(--line); background:#fff;
  }
  .badge--hot{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
  .badge--ship{left:auto; right:12px; background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}

  .productFoot{padding:14px}
  .pillRow{display:flex;gap:8px;flex-wrap:wrap}
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 10px;border-radius:999px;border:1px solid var(--line);
    background:#fff;color:var(--muted);font-weight:800;font-size:13px;
  }
  .pill--ok{color:#065f46;border-color:#bbf7d0;background:#f0fdf4}

  .priceRow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
  .priceBlock .price{font-size:30px;font-weight:1000;line-height:1}
  .priceBlock .old{margin-top:6px;color:#94a3b8;text-decoration:line-through;font-weight:800}
  .save{padding:7px 10px;border-radius:999px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-weight:900;font-size:13px}

  /* PACKS */
  .packs{display:grid;gap:10px;margin-top:12px}
  .pack{display:block}
  .pack input{display:none}
  .packBox{
    display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;
    padding:12px;border-radius:14px;border:1px solid var(--line);background:#fff;
  }
  .packBox b{font-size:14px}
  .packBox small{grid-column:1/2;color:var(--muted);font-weight:700}
  .packBox i{grid-column:2/3;grid-row:1/3;font-style:normal;font-weight:1000}
  .pack input:checked + .packBox{border-color:rgba(249,115,22,.55);box-shadow:0 10px 18px rgba(249,115,22,.12)}

  /* URGENCY */
  .urgency{
    margin-top:12px;
    display:flex;gap:10px;align-items:center;
    padding:10px 12px;border-radius:14px;
    background:#f8fafc;border:1px solid var(--line);
    color:var(--muted);font-weight:800;font-size:13px;
  }
  .urgency .dot{width:10px;height:10px;border-radius:999px;background:var(--ok)}

  /* CTA */
  .ctaRow{display:grid;gap:10px;margin-top:12px}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:13px 16px;border-radius:14px;border:1px solid transparent;
    font-weight:1000;cursor:pointer;transition:.15s;
  }
  .btnPrimary{background:var(--accent);color:#fff;box-shadow:0 10px 18px rgba(249,115,22,.18)}
  .btnPrimary:hover{background:var(--accentDark)}
  .btnOutline{background:#fff;border-color:var(--line);color:var(--text)}
  .btnOutline:hover{background:#f9fafb}

  .bullets{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
  .bullets li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-weight:700;line-height:1.45}
  .ic{width:18px;height:18px;border-radius:6px;background:#111827;color:#fff;display:inline-grid;place-items:center;font-size:12px;flex:0 0 auto;margin-top:2px}

  /* TEXT BLOCK */
  .heroText{
    border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--shadow);
    padding:14px;
  }
  .chips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{
    padding:7px 10px;border-radius:999px;border:1px solid var(--line);
    background:#fff;color:var(--muted);font-weight:900;font-size:13px;
  }
  h1{margin:12px 0 0;font-size:clamp(26px,4.2vw,40px);line-height:1.1}
  .lead{margin:10px 0 0;color:var(--muted);line-height:1.65}
  .trustRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
  .trust{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:800;font-size:13px}
  .trust b{color:var(--text)}
  .star{letter-spacing:1px;color:#f59e0b}
  .bonus{
    margin-top:12px;
    padding:12px;border-radius:14px;border:1px solid #bfdbfe;background:#eff6ff;
    color:#1d4ed8;font-weight:800;line-height:1.5;
  }

  @media (min-width: 980px){
    .hero__wrap{grid-template-columns:1fr 1fr;align-items:start}
    .ctaRow{grid-template-columns:1fr 1fr}
  }
  .orderForm{
    margin-top:12px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#ffffff;
    padding:12px;
  }
  .formGrid{display:grid;gap:10px}
  .field{display:grid;gap:6px}
  .label{font-size:12px;font-weight:800;color:#475569}
  .input{
    width:100%;
    padding:14px 12px;
    border-radius:14px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    color:#0f172a;
    font-weight:800;
    outline:none;
  }
  .input:focus{
    border-color: rgba(249,115,22,.55);
    box-shadow: 0 0 0 4px rgba(249,115,22,.12);
  }
  .btnSubmit{
    width:100%;
    padding:16px 14px;
    border-radius:16px;
    border:0;
    background:#f97316;
    color:#ffffff;
    font-weight:1000;
    font-size:16px;
    cursor:pointer;
  }
  .btnSubmit:hover{background:#ea580c}
  .formHint{
    font-size:12px;
    line-height:1.45;
    color:#64748b;
  }
   /* ===== HOT DEAL (анимация “горячей” скидки без градиента) ===== */
  .hotDeal{
    margin-top:12px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 12px;
    border-radius:16px;
    border:1px solid #fed7aa;
    background:#fff7ed;
    position:relative;
    overflow:hidden;
  }
  .hotDeal:before{
    content:"";
    position:absolute; inset:-60px;
    background:repeating-linear-gradient(
      45deg,
      rgba(249,115,22,.18) 0px,
      rgba(249,115,22,.18) 12px,
      rgba(255,255,255,0) 12px,
      rgba(255,255,255,0) 26px
    );
    animation: stripeMove 2.4s linear infinite;
    opacity:.55;
  }
  @keyframes stripeMove{to{transform:translateX(80px)}}

  .hotDeal__left{position:relative;display:grid;gap:6px}
  .hotDeal__badge{
    width:max-content;
    padding:7px 10px;border-radius:999px;
    background:#f97316;border:1px solid rgba(249,115,22,.25);
    color:#fff;font-weight:1000;font-size:13px;
    animation: pulse 1.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.04)}
  }
  .hotDeal__text{position:relative;color:#9a3412;font-weight:900;line-height:1.35}
  .timer{
    position:relative;
    display:flex;align-items:center;gap:6px;
    padding:10px 12px;border-radius:14px;
    background:#fff;border:1px solid #fed7aa;
    box-shadow:0 10px 20px rgba(249,115,22,.10);
    font-weight:1000;
    color:#111827;
    white-space:nowrap;
  }
  .t{min-width:22px;text-align:center}
  .sep{opacity:.55}

  /* Потряхивание при уменьшении остатка */
  .shake{animation: shake .35s ease-in-out}
  @keyframes shake{
    0%{transform:translateX(0)}
    25%{transform:translateX(-3px)}
    50%{transform:translateX(3px)}
    75%{transform:translateX(-2px)}
    100%{transform:translateX(0)}
  }

  /* ===== LIMIT BAR (бронь цены + прогресс) ===== */
  .limitBar{
    margin-top:12px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#ffffff;
    padding:12px;
  }
  .limitBar__top{
    display:flex;gap:10px;align-items:flex-start;
    color:#475569;font-weight:900;line-height:1.35;
  }
  .dot{width:10px;height:10px;border-radius:999px;background:#16a34a;margin-top:4px;flex:0 0 auto}
  .progress{
    margin-top:10px;
    height:12px;border-radius:999px;
    background:#f1f5f9;border:1px solid #e5e7eb;
    overflow:hidden;
  }
  .progress__fill{
    height:100%;
    width:0%;
    background:#f97316;
    transition:width .8s ease;
  }
  .limitBar__meta{
    margin-top:10px;
    display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
    color:#64748b;font-weight:800;font-size:13px;
  }
  /* ОБЁРТКА ДЛЯ STICKY */
.limitStickyWrap{
  position: sticky;
  top: 72px; /* высота хедера */
  z-index: 50;
}

/* чуть компактнее на мобиле */
@media (max-width: 768px){
  .limitStickyWrap{
    top: 64px;
  }
  .limitBar{
    border-radius: 14px;
  }
}
 /* Контейнер 9:13 як на скріні */
  .glueBlock{padding:16px 0}
  .glueCard{
    width:100%;
    max-width:420px;            /* як мобільний блок */
    aspect-ratio: 9 / 13;       /* ключ */
    margin:0 auto;
    border-radius:22px;
    overflow:hidden;
    background:#eef2f6;
    border:1px solid #e5e7eb;
    box-shadow:0 16px 40px rgba(2,6,23,.10);
    display:flex;
    flex-direction:column;
  }

  /* HERO */
  .glueHero{
    position:relative;
    flex: 0 0 62%;
    padding:18px 16px 14px;
    background:#e9edf3;
  }
  .glueHero__bg{
    position:absolute; inset:0;
    background:
      radial-gradient(120px 80px at 15% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
      radial-gradient(180px 120px at 70% 25%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%),
      linear-gradient(180deg, #eef2f6 0%, #e6eaf0 100%);
    opacity:1;
  }
  .glueHero__content{position:relative; z-index:2}
  .glueHero__title .t1{
    font-weight:1000;
    letter-spacing:.8px;
    font-size:18px;
    color:#0f172a;
    opacity:.9;
    text-transform:uppercase;
  }
  .glueHero__title .t2{
    font-weight:1100;
    letter-spacing:.6px;
    font-size:34px;
    line-height:1;
    color:#0f172a;
    text-transform:uppercase;
  }
  .glueHero__title .tag{
    margin-top:6px;
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(15,23,42,.08);
    border:1px solid rgba(15,23,42,.12);
    color:#334155;
    font-weight:900;
    font-size:13px;
  }

  .glueHero__media{
    margin-top:12px;
    display:grid;
    grid-template-columns: 110px 1fr;
    gap:12px;
    align-items:end;
  }

  .demoBox{
    border-radius:14px;
    background:#0b3b83;
    border:1px solid rgba(255,255,255,.25);
    padding:8px;
    position:relative;
    overflow:hidden;
    height:120px;
    box-shadow:0 10px 20px rgba(2,6,23,.12);
  }
  .demoInner{
    height:100%;
    border-radius:10px;
    background:rgba(255,255,255,.10);
    display:grid;
    place-items:center;
    color:#eaf2ff;
    font-weight:900;
    text-align:center;
    line-height:1.1;
    font-size:13px;
  }

  .productBox{
    position:relative;
    height:240px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .productImg{
    width:auto;
    object-fit:contain;
    filter: drop-shadow(0 16px 22px rgba(2,6,23,.18));
  }
  .productPh{
    height:240px;width:100%;
    border-radius:16px;
    border:1px dashed rgba(15,23,42,.25);
    background:rgba(255,255,255,.65);
    display:grid;place-items:center;
    color:#475569;font-weight:900;
  }

  /* FEATURES */
  .glueFeatures{
    position:relative;
    z-index:2;
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }
  .feat{
    background:#0b3b83;
    border-radius:14px;
    padding:10px 10px;
    color:#eaf2ff;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 10px 20px rgba(2,6,23,.10);
    display:grid;
    gap:8px;
    align-content:start;
  }
  .ico{
    width:34px;height:34px;border-radius:12px;
    background:rgba(255,255,255,.12);
    display:grid;place-items:center;
    color:#ffffff;
  }
  .featTxt b{display:block;font-size:11px;font-weight:1000;line-height:1.15}
  .featTxt span{display:block;font-size:11px;opacity:.92;font-weight:800;margin-top:2px}

  /* BOTTOM */
  .glueBottom{
    flex: 1 1 auto;
    padding:14px 16px 16px;
    background:#f1f5f9;
    border-top:1px solid #e5e7eb;
  }
  .bottomTitle .q1{
    text-align:center;
    font-weight:1000;
    color:#0b3b83;
    font-size:22px;
    line-height:1.05;
  }
  .bottomTitle .q2{
    text-align:center;
    font-weight:900;
    color:#334155;
    margin-top:6px;
  }

  .troubles{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }
  .trouble{
    background:#e2e8f0;
    border-radius:16px;
    padding:10px;
    border:1px solid #dbe2ea;
    display:grid;
    gap:8px;
    align-content:start;
    position:relative;
  }
  .trImg{
    height:78px;
    border-radius:12px;
    background:#cbd5e1;
    border:1px solid rgba(15,23,42,.12);
    position:relative;
    overflow:hidden;
  }
  /* Заглушки-градієнти тільки для фото-прев’ю (можеш замінити на background-image:url("https://termo.fixos.store/landing-template-assets/springclothes/css/...")) */
  .trImg--1{background:linear-gradient(135deg,#cbd5e1,#94a3b8)}
  .trImg--2{background:linear-gradient(135deg,#cbd5e1,#64748b)}
  .trImg--3{background:linear-gradient(135deg,#cbd5e1,#475569)}

  .trLbl{
    text-align:center;
    font-weight:1000;
    color:#0f172a;
  }
  .trX{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-10px;
    width:22px;height:22px;border-radius:999px;
    background:#ef4444;
    color:#fff;
    display:grid;place-items:center;
    font-weight:1000;
    border:2px solid #f1f5f9;
    box-shadow:0 10px 20px rgba(2,6,23,.12);
  }

  @media (max-width: 420px){
    .glueCard{max-width:360px;border-radius:18px}
    .glueHero__title .t2{font-size:30px}
    .productBox{height:220px}
    .glueFeatures{gap:8px}
    .feat{padding:9px}
  }
   /* === ПОД ТВОЙ БЕЛО-ОРАНЖЕВЫЙ ДИЗАЙН (как мы делали) === */
  .cwRef{padding:16px 0}
  .cwRef__wrap{
    border:1px solid #e5e7eb;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 16px 40px rgba(2,6,23,.08);
  }

  /* TOP */
  .cwRef__top{
    padding:16px;
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
  }
  .cwRef__t1{
    font-weight:1000;
    letter-spacing:.6px;
    color:#0f172a;
    font-size:18px;
    text-transform:uppercase;
  }
  .cwRef__t2{
    margin-top:6px;
    font-weight:900;
    color:#475569;
    font-size:14px;
  }
  .cwRef__tag{
    margin-top:10px;
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:#fff7ed;
    color:#9a3412;
    font-weight:1000;
    font-size:13px;
  }

  .cwRef__media{
    margin-top:14px;
    display:grid;
    grid-template-columns: 120px 1fr;
    gap:12px;
    align-items:end;
  }

  .cwRef__demo{
    height:120px;
    border-radius:16px;
    border:1px solid #e5e7eb;
    background:#f8fafc;
    overflow:hidden;
  }
  .cwRef__demo img{width:100%;height:100%;object-fit:cover;display:block}

  .cwRef__product{
    height:240px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    border-radius:16px;
    border:1px dashed #e5e7eb;
    background:#f8fafc;
    padding:10px;
  }
  .cwRef__product img{
    max-height:220px;
    width:auto;
    object-fit:contain;
    filter: drop-shadow(0 16px 22px rgba(2,6,23,.18));
  }

  /* 4 tiles (синий как в рефе, но без градиента) */
  .cwRef__tiles{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }
  .cwTile{
    background:#0b3b83;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    padding:10px;
    color:#eaf2ff;
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .cwTile__ico{
    width:34px;height:34px;border-radius:12px;
    background:rgba(255,255,255,.14);
    display:grid;place-items:center;
    font-weight:1000;
    flex:0 0 auto;
  }
  .cwTile__txt b{display:block;font-size:12px;font-weight:1000;line-height:1.1}
  .cwTile__txt span{display:block;font-size:11px;opacity:.92;font-weight:800;margin-top:2px}

  /* BOTTOM */
  .cwRef__bottom{
    padding:14px 16px 16px;
    background:#f1f5f9;
  }
  .cwRef__q1{
    text-align:center;
    font-weight:1100;
    color:#0f172a;
    font-size:22px;
    line-height:1.1;
  }
  .cwRef__q2{
    text-align:center;
    font-weight:900;
    color:#475569;
    margin-top:6px;
  }

  .cwRef__problems{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }
  .cwProb{
    background:#e2e8f0;
    border-radius:16px;
    padding:10px;
    border:1px solid #dbe2ea;
    display:grid;
    gap:8px;
    position:relative;
  }
  .cwProb__img{
    height:82px;
    border-radius:12px;
    background:#cbd5e1 center/cover no-repeat;
    border:1px solid rgba(15,23,42,.10);
  }
  .cwProb__lbl{
    text-align:center;
    font-weight:1000;
    color:#0f172a;
  }
  .cwProb__x{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-10px;
    width:22px;height:22px;border-radius:999px;
    background:#ef4444;
    color:#fff;
    display:grid;place-items:center;
    font-weight:1100;
    border:2px solid #f1f5f9;
    box-shadow:0 10px 20px rgba(2,6,23,.12);
  }

  @media (max-width: 720px){
    .cwRef__tiles{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width: 420px){
    .cwRef__media{grid-template-columns:110px 1fr}
    .cwRef__product{height:220px}
  }
  .product-media{
  width:100%;
  height:100%;
  min-height:260px;          /* как было у картинки */
  border-radius:16px;
  overflow:hidden;
  background:#f8fafc;
}

.product-media__gif{
  width:100%;
  height:100%;
  object-fit:cover;          /* ВАЖНО */
  object-position:center;
  display:block;
}
  /* Під твій біло-оранжевий стиль + сині підписи як на рефі */
  .repairGrid{
    padding:18px 0 8px;
    background:#f8fafc; /* світлий фон секції */
  }
  .rg__inner{
    max-width:520px;
    margin:0 auto;
    padding:0 16px;
  }

  .rg__title{
    margin:0 0 14px;
    text-align:center;
    font-weight:1100;
    line-height:1.05;
    color:#0f172a;
    font-size:34px;
    letter-spacing:-.3px;
  }
  .rg__title span{
    display:inline-block;
    margin-top:6px;
    font-size:24px;
    color:#1e3a8a; /* синій як у заголовку на скріні */
    font-weight:1000;
  }

  .rg__grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  .rg__card{
    border-radius:18px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
  }

  .rg__img{
    height:150px;
    background:#e2e8f0 center/cover no-repeat;
  }

  .rg__cap{
    padding:12px 12px;
    text-align:center;
    font-weight:1000;
    color:#ffffff;
    background:#1e3a8a; /* темно-синяя плашка как на рефе */
    font-size:16px;
  }

  /* мобилка */
  @media (max-width:420px){
    .rg__title{font-size:30px}
    .rg__title span{font-size:22px}
    .rg__img{height:140px}
  }
   /* Під твій стиль: світлий фон + сині плашки справа */
  .coreAttrs{
    padding:18px 0 10px;
    background:#f8fafc;
  }
  .ca__inner{
    max-width:520px;
    margin:0 auto;
    padding:0 16px;
  }

  .ca__title{
    margin:0 0 14px;
    text-align:center;
    font-weight:1100;
    line-height:1.05;
    color:#0f172a;
    font-size:38px;
    letter-spacing:-.3px;
  }
  .ca__title span{
    display:inline-block;
    margin-top:6px;
    font-size:34px;
    color:#1e3a8a; /* синій як у рефі */
    font-weight:1100;
  }

  .ca__list{display:grid;gap:14px}

  .ca__item{
    display:grid;
    grid-template-columns: 1fr 150px; /* фото + синя плашка */
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
    background:#ffffff;
    min-height:120px;
  }

  .ca__img{
    background:#e2e8f0 center/cover no-repeat;
    min-height:120px;
  }

  .ca__label{
    background:#1e3a8a;
    color:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:14px 14px;
    gap:4px;
  }
  .ca__label b{
    font-weight:1100;
    font-size:18px;
    line-height:1.05;
  }
  .ca__label span{
    font-weight:1000;
    font-size:18px;
    line-height:1.05;
    opacity:.98;
  }

  /* адаптація */
  @media (max-width:420px){
    .ca__title{font-size:34px}
    .ca__title span{font-size:30px}
    .ca__item{grid-template-columns: 1fr 140px}
    .ca__label b, .ca__label span{font-size:16px}
  }
    /* стиль як у твоїх блоках: світлий фон, сині підписи */
  .wideApp{
    padding:18px 0 10px;
    background:#f8fafc;
  }
  .wa__inner{
    max-width:520px;
    margin:0 auto;
    padding:0 16px;
  }

  .wa__title{
    margin:0 0 14px;
    text-align:center;
    font-weight:1100;
    line-height:1.05;
    color:#0f172a;
    font-size:36px;
    letter-spacing:-.3px;
  }
  .wa__title span{
    display:block;
    margin-top:8px;
    font-size:22px;
    font-weight:1000;
    color:#1e3a8a;
  }

  .wa__grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }

  .wa__card{
    border-radius:18px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
  }

  .wa__img{
    height:120px;
    background:#e2e8f0 center/cover no-repeat;
  }

  .wa__cap{
    background:#1e3a8a;
    color:#ffffff;
    text-align:center;
    font-weight:1000;
    font-size:16px;
    padding:10px 10px;
    line-height:1.05;
  }
  .wa__cap--small{font-size:14px}

  @media (max-width:420px){
    .wa__title{font-size:32px}
    .wa__title span{font-size:20px}
    .wa__grid{gap:12px}
    .wa__img{height:110px}
    .wa__cap{font-size:15px}
    .wa__cap--small{font-size:13px}
  }
  .testsCompact{
  padding:18px 0 10px;
  background:#f8fafc;
}
.tc__inner{
  max-width:520px;
  margin:0 auto;
  padding:0 16px;
}

.tc__title{
  text-align:center;
  font-weight:1100;
  font-size:34px;
  line-height:1.05;
  color:#0f172a;
  margin:0 0 14px;
}
.tc__title span{
  display:block;
  margin-top:6px;
  font-size:24px;
  color:#1e3a8a;
  font-weight:1000;
}

.tc__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.tc__card{
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}

.tc__img{
  height:110px; /* КОРОТКО */
  background:#e2e8f0 center/cover no-repeat;
}

.tc__label{
  padding:10px 10px 12px;
  text-align:center;
}
.tc__label b{
  display:block;
  font-weight:1000;
  font-size:14px;
  color:#0f172a;
}
.tc__label span{
  display:block;
  margin-top:4px;
  font-weight:800;
  font-size:12px;
  color:#475569;
}

@media (max-width:420px){
  .tc__title{font-size:30px}
  .tc__title span{font-size:22px}
  .tc__img{height:100px}
}
 /* Під твій стиль: світлий фон, синій заголовок, картки з округленням */
  .steps4{
    padding:18px 0 10px;
    background:#f8fafc;
  }
  .s4__inner{
    max-width:520px;
    margin:0 auto;
    padding:0 16px;
  }

  .s4__head{
    text-align:center;
    margin-bottom:14px;
  }
  .s4__kicker{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    background:#eef2ff;
    color:#1e3a8a;
    font-weight:1000;
    font-size:14px;
  }
  .s4__title{
    margin:10px 0 0;
    font-size:28px;
    line-height:1.1;
    font-weight:1100;
    color:#1e3a8a;
  }

  .s4__grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .s4__card{
    border-radius:18px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
  }

  .s4__img{
    height:120px;
    background:#e2e8f0 center/cover no-repeat;
  }

  .s4__lbl{
    padding:10px 10px 12px;
    text-align:center;
    font-weight:1000;
    color:#1e3a8a;
    background:#ffffff;
    line-height:1.05;
    font-size:16px;
  }
  .s4__lbl span{
    display:inline-block;
    margin-top:6px;
    font-size:12px;
    font-weight:900;
    color:#475569;
  }

  /* Акцент на "Нанеси" как на скрине */
  .s4__card--accent .s4__lbl{
    background:#1e3a8a;
    color:#ffffff;
  }
  .s4__card--accent .s4__lbl span{color:#eaf2ff; opacity:.95}

  @media (max-width:420px){
    .s4__title{font-size:26px}
    .s4__img{height:110px}
  }
  /* під твій стиль: світлий фон, синій заголовок, сірі рядки */
  .specBlock{
    padding:18px 0 10px;
    background:#f8fafc;
  }
  .spec__inner{
    max-width:520px;
    margin:0 auto;
    padding:0 16px;
  }

  .spec__title{
    margin:0 0 12px;
    text-align:center;
    font-weight:1100;
    color:#1e3a8a;
    font-size:30px;
    letter-spacing:-.2px;
  }

  .spec__panel{
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
  }

  .spec__row{
    display:grid;
    grid-template-columns: 160px 1fr;
    gap:12px;
    padding:10px 12px;
    background:#f1f5f9;
    border-bottom:1px solid #e5e7eb;
  }
  .spec__row:last-child{border-bottom:none}

  .spec__key{
    font-weight:1000;
    color:#0f172a;
    font-size:13px;
  }
  .spec__val{
    font-weight:900;
    color:#334155;
    font-size:13px;
    line-height:1.35;
  }

  /* ряд с картинками */
  .spec__row--media{
    grid-template-columns: 160px 1fr;
    align-items:start;
    background:#eaeef5;
  }
  .spec__media{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .spec__figure{
    margin:0;
    border-radius:16px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    overflow:hidden;
  }
  .spec__imgWrap{
    position:relative;
    padding:10px;
    display:grid;
    place-items:center;
    background:#ffffff;
    min-height:150px;
  }
  .spec__img{
    width:auto;
    max-width:100%;
    max-height:140px;
    object-fit:contain;
    filter: drop-shadow(0 12px 18px rgba(2,6,23,.12));
  }
  .spec__cap{
    padding:8px 10px;
    text-align:center;
    font-weight:1000;
    color:#1e3a8a;
    background:#f8fafc;
    border-top:1px solid #e5e7eb;
  }

  /* подписи размеров (упрощённо как в рефе) */
  .dim{
    position:absolute;
    padding:4px 8px;
    border-radius:999px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#1d4ed8;
    font-weight:1000;
    font-size:11px;
  }
  .dim--h{right:10px; top:10px}
  .dim--w{left:10px; bottom:10px}

  @media (max-width:420px){
    .spec__row{grid-template-columns: 140px 1fr}
    .spec__row--media{grid-template-columns: 1fr}
    .spec__media{grid-template-columns:1fr}
  }