:root{
      --bg:#fafafa; --card:#ffffff; --ink:#111; --muted:#6b7280; --line:#e7e7e7;
      --accent:#ffd633; --accent-ink:#111;
      --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.06);
      --focus:0 0 0 3px rgba(255,214,51,.45);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
      font:16px/1.5 'Roboto',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .wrap{max-width:1100px;margin:0 auto;padding:24px}
    @media (max-width:960px){ .wrap{padding:16px} }

    header{position:sticky;top:0;background:rgba(255,255,255,.9);
      backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);z-index:5}
    header .bar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0}
    .logo{display:flex;gap:10px;align-items:center;font-weight:800}
    .logo-badge{width:28px;height:28px;border-radius:8px;background:var(--accent);
      display:grid;place-items:center;color:var(--accent-ink);font-weight:900}
    .cta{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;
      padding:12px 20px;font-weight:900;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.06);
      transition:.25s}
    .cta:hover{filter:brightness(1.03);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
    .cta:focus-visible{outline:none;box-shadow:var(--focus)}

    .hero{display:grid;gap:10px;padding:28px 0 8px;text-align:center}
    .hero h1{font-size:clamp(22px,5vw,40px);line-height:1.1;margin:0;font-weight:900}
    .hero .muted{color:var(--ink);opacity:.75}

    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      padding:18px;box-shadow:var(--shadow);transition:.25s}
    .card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.1)}
    .card h2{margin:0 0 12px;font-size:20px;font-weight:800}

    .row{display:grid;gap:10px;margin:12px 0}
    label{font-weight:700}

    .select-wrap{position:relative}
    .select-wrap svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.7}
    select{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;
      padding:12px 44px;font-weight:700;appearance:none}
    .select-wrap::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
      width:18px;height:18px;background:#9aa3af;mask:url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>') no-repeat center/contain}
    select:focus-visible{outline:none;box-shadow:var(--focus)}

    .chips{display:flex;flex-wrap:wrap;gap:8px}
    .chip input{display:none}
    .chip label{display:inline-flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);
      border-radius:999px;cursor:pointer;background:#fff;font-weight:800}
    .chip input:checked+label{border-color:#ffd63380;box-shadow:0 0 0 3px rgba(255,214,51,.35)}

    .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
    .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
    .kpi .val{font-size:22px;font-weight:900}
    @media (max-width:960px){ .nums{grid-template-columns:repeat(3,minmax(0,1fr))} .kpi .val{font-size:18px} }

    input[type="range"]{width:100%;-webkit-appearance:none;height:22px;
      background:linear-gradient(to right,var(--accent) 0 var(--fill,50%),#e7e7e7 var(--fill,50%) 100%);
      border-radius:999px;border:1px solid var(--line);margin:8px 0}
    input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
      background:#fff;border:3px solid var(--accent);
      box-shadow:0 2px 6px rgba(0,0,0,.12);cursor:pointer;margin-top:-4px;
    }
    input[type="range"]::-moz-range-thumb{
      width:24px;height:24px;border-radius:50%;
      background:#fff;border:3px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.12);cursor:pointer;
    }

    .fade-in{opacity:0;transform:translateY(20px);transition:all .6s ease}
    .fade-in.visible{opacity:1;transform:translateY(0)}

    .calc-section{max-width:900px;margin:0 auto}
    .benefits-section{margin-top:32px;display:flex;justify-content:center}
    .disclaimer {font-size:12px;color:var(--muted);margin-top:8px;text-align:center}

    .benefits-card{ display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center }
    @media (max-width:960px){ .benefits-card{grid-template-columns:1fr} }

    .slider-wrap {
      position: relative; overflow: hidden; border-radius: 12px;
      background: #fff; border: 1px solid var(--line); max-width: 100%;
    }
    .slider { width: 100%; aspect-ratio: 16 / 9; height: auto; overflow: hidden; touch-action: pan-y; }
    .slides { display: flex; transition: transform 0.5s ease; height: 100%; }
    .slide { min-width: 100%; flex-shrink: 0; display: flex; justify-content: center; align-items: center; background:#fff; }
    .slide img { width: 100%; height: 100%; object-fit: cover; }
    /* смещаем кадр, чтобы было видно голову */
    .slide--1 img { object-position: 50% 22%; }
    .slide--2 img { object-position: 50% 26%; }
    .slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
    .slider-dots button{ width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.3); border:0; padding:0; cursor:pointer; transition: background .3s; }
    .slider-dots button.active{ background: var(--accent); }
    .slider-dots button:focus-visible{ outline: none; box-shadow: var(--focus); }

    .card-wide {display:grid;grid-template-columns:1fr 420px;gap:16px;align-items:center}
    .wide-img{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
    .wide-img img{width:100%;height:auto;object-fit:cover;display:block}
    @media (max-width:960px){.card-wide{grid-template-columns:1fr}.wide-img{order:2}}

    .btn-wrap {display:flex;justify-content:center;margin-top:12px}

    footer{margin:40px 0 10px;color:var(--muted);font-size:13px;text-align:center}