:root{
          /* ▶️ Цвета приведены к палитре слайдов */
          --ink:#132b32; --muted:#5e6b73; --line:#e6ecee; --bg:#ffffff;
          --cyan:#0d8b87;          /* основной бирюзовый */
          --cyan-2:#0a6e6b;        /* тёмный бирюзовый */
          --emerald:#1e9c80;       /* доп. зелёный (редко) */
          --accent:#e3813a;        /* оранжевый акцент из блока «Симптомы» */
          --radius:20px; --shadow:0 10px 24px -12px rgba(8,48,54,.25);
        }
        {box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;font-family:system-ui,-apple-system,Inter,Roboto,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        .wrap{max-width:1180px;margin:0 auto;padding:0 20px}

        /* Header */
        header{position:sticky;top:0;z-index:40;background:#ffffffd6;border-bottom:1px solid var(--line);backdrop-filter:saturate(120%) blur(8px)}
        .nav{height:64px;display:flex;align-items:center;justify-content:space-between}
        .brand{font-weight:800;letter-spacing:.3px;font-size:28px;}
        .links{display:flex;gap:22px;font-size:16px}
        .burger{display:none}

        /* Sections */
        section{padding:72px 0}
        .title{font-size:42px;line-height:1.15;margin:0 0 14px;font-weight:900;color:#1f3a40}
        .subtitle{font-size:18px;color:var(--muted);max-width:820px}

        /* Buttons & chips */
        .btn{display:inline-block;background:var(--cyan);color:#fff;padding:14px 18px;border-radius:14px;font-weight:700;box-shadow:var(--shadow)}
        .btn:hover{filter:brightness(0.95)}
        .btn.outline{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
        .pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px;box-shadow:0 6px 18px -10px rgba(7,49,54,.25)}

        /* Hero */
        .hero{padding:0}
        .hero-wrap{position:relative;min-height:90vh;display:grid;place-items:center;overflow:hidden}
        .hero-media{position:absolute;inset:0;opacity:.8}
        .hero-media>img{width:100%;height:100%;object-fit:cover}
        .hero-content{position:absolute;left:50%;top:var(--hero-top,65%);transform:translate(-50%,-20%);text-align:center;padding:40px 16px;width:min(1100px,92vw)}  .hero h1{font-size:50px;margin:0 0 8px;font-weight:900}
        .hero .lead{font-size:20px;font-weight:900;}
        .meta{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
        .cta{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 10vh;
          z-index: 2;
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          justify-content: center;
        }

        @media (max-width:560px){
          .cta{
            position:absolute; left:50%; transform:translateX(-50%);
            bottom:2vh;
            display:flex; gap:10px;
            width:min(92vw, 220px);      /* узкий контейнер по центру */
            justify-content:space-between;
          }
          .cta .btn{
            flex:1 1 0;                  /* обе тянутся на одинаковую ширину */
            min-width:0;
            font-size:13px;
            padding:8px 10px;
            border-radius:10px;
            text-align:center;
          }
          .cta .btn.outline{ padding:7px 10px; }
        }

        @media (max-width: 560px){
          .hero-wrap{position:relative;min-height:20vh}

        }
        /* Cards */
        .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
        .icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:#fff}

        /* Grids */
        .grid{display:grid;gap:18px}
        .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
        .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
        .cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}


        /* Section specifics */
        .problem .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
        .stat{border:1px solid var(--line);border-radius:16px;background:#fff;padding:18px;text-align:center;overflow: hidden; }
        .stat .v{font-size:40px;font-weight:900}
        .symptoms{background:#f6fafb}
        .benefit-card{display:flex;gap:12px;align-items:flex-start}
        @media (max-width:560px){ .stat .v{font-size:20px; white-space: nowrap;} .stat p{font-size:14px;} }
        /* Program timeline */
        .timeline{
          display:grid;
          gap:16px;
          /* wrap nicely on smaller screens */
          grid-template-columns:repeat(5,minmax(0,1fr));
        }
        @media (max-width:1200px){ .timeline{ grid-template-columns:repeat(3,1fr); } }
        @media (max-width:800px){  .timeline{ grid-template-columns:repeat(2,1fr); } }
        @media (max-width:560px){  .timeline{ grid-template-columns:1fr; } }

        .day{
          border:1px solid var(--line);
          background:#fff;
          border-radius:16px;
          padding:16px;
          /* make consistent internal rows: num / title / image */
          display:grid;
          grid-template-rows:auto auto 1fr;
        }

        .day .num{font-size:13px;opacity:.6}

        /* Reserve equal height for titles so images align */
        .day .b{
          font-weight:600;
          line-height:1.3;
          min-height:2.6em;   /* ≈ two lines; adjust if you want three lines -> 3.9em */
        }

        /* Image slot: fixed ratio, image covers */
        .slot{
          margin-top:10px;
          aspect-ratio:16 / 9;      /* keeps same shape on all cards */
          border-radius:12px;
          overflow:hidden;
          background:#f2f7f8;
          display:block;
        }

        /* Make the picture fill the slot without “floating” */
        .slot img{
          width:100%;
          height:100%;
          object-fit:cover;   /* crop if needed, but keeps same position */
          display:block;
        }

        /* Gallery */
        .gallery{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
        .gallery .tile{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
        /* ==== Lightbox ==== */
        .lb{
          position: fixed; inset: 0; z-index: 1000;
          display: none; align-items: center; justify-content: center;
          background: rgba(10,20,25,.6); backdrop-filter: blur(2px);
          animation: lb-fade .22s ease both;
        }
        .lb.is-open{ display: flex; }

        .lb__img{
          max-width: min(96vw, 1400px); max-height: 92vh;
          border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45);
          transform: scale(.94); opacity: 0; animation: lb-zoom .25s ease forwards;
        }

        .lb__close, .lb__prev, .lb__next{
          position: absolute; top: 14px;
          width: 40px; height: 40px; border-radius: 999px;
          border: 1px solid rgba(255,255,255,.4);
          background: rgba(0,0,0,.35); color:#fff; font-size: 24px; line-height: 1;
          display: grid; place-items: center; cursor: pointer;
          backdrop-filter: blur(2px);
        }
        .lb__close{ right: 14px; }
        .lb__prev, .lb__next{ top: 50%; transform: translateY(-50%); }
        .lb__prev{ left: 12px; }
        .lb__next{ right: 12px; }
        .lb__close:hover, .lb__prev:hover, .lb__next:hover{ background: rgba(0,0,0,.5); }

        @keyframes lb-fade{ from{ opacity:0 } to{ opacity:1 } }
        @keyframes lb-zoom{ to{ transform: scale(1); opacity:1 } }

        /* когда открыт лайтбокс — запрет прокрутки фона */
        body.lb-open{ overflow: hidden; }

        /* курсор на картинках в галерее */
        .gallery .tile img{ cursor: zoom-in; }

        /* Contact */
        .contact-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
        .contact form .field{display:grid;gap:6px}
        input,textarea{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit}
        textarea{min-height:120px}

        /* Footer */
        footer{border-top:1px solid var(--line);padding:32px 0;color:#51646c}

        /* Accents using slide orange */
        .accent{color:var(--accent)}

        /* Mobile */
        @media (max-width: 920px){
          .links{display:none}
          .burger{display:block}
          .title{font-size:34px}
          .hero h1{font-size:40px}
          .cols-2{grid-template-columns:1fr}
          .cols-3{grid-template-columns:1fr}
          .cols-4{grid-template-columns:2fr 2fr}
          .timeline{grid-template-columns:1fr 1fr}
          .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
          .contact-grid{grid-template-columns:1fr}
        }
         @media (max-width: 560px){
                  .cols-4{grid-template-columns:1fr}
         }
        /* === Animations === */
        @keyframes floatUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
        @keyframes zoomSoft{from{transform:scale(1.03);opacity:.0}to{transform:scale(1);opacity:1}}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        .reveal{opacity:0;transform:translateY(16px)}
        .reveal.is-visible{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
        .delay-1{transition-delay:.06s} .delay-2{transition-delay:.12s} .delay-3{transition-delay:.18s} .delay-4{transition-delay:.24s}

        /* subtle hover */
        .card:hover{transform:translateY(-2px);transition:transform .25s ease}
        .btn{transition:transform .15s ease, filter .15s ease}
        .btn:active{transform:translateY(1px)}

        /* hero media zoom-in */
        .hero-media>img{animation:zoomSoft 1.4s ease both}
        .hero-content .pill{animation:floatUp .7s ease both}
        .hero-content h1{animation:floatUp .7s ease .06s both}
        .hero-content .lead{animation:floatUp .7s ease .12s both}
        .hero-content .cta{animation:floatUp .7s ease .18s both}
        .hero-content .meta{animation:floatUp .7s ease .24s both}
        /* === Extra animations & micro‑interactions === */
        .stagger > {opacity:0;transform:translateY(12px) scale(.98)}
        .stagger.revealed > {opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}

        .gallery .tile{transition:transform .35s ease, box-shadow .35s ease}
        .gallery .tile:hover{transform:translateY(-6px);box-shadow:0 16px 32px -18px rgba(7,49,54,.4)}
        .gallery .tile img{transition:transform .4s ease}
        .gallery .tile:hover img{transform:scale(1.03)}

        .timeline .day{transition:transform .3s ease, box-shadow .3s ease}
        .timeline .day:hover{transform:translateY(-4px);box-shadow:0 14px 26px -18px rgba(7,49,54,.35)}

        .btn{position:relative;overflow:hidden}
        .btn .ripple{position:absolute;border-radius:999px;transform:scale(0);opacity:.6;background:#fff;pointer-events:none;width:24px;height:24px;animation:ripple .6s ease-out forwards}
        .btn.outline .ripple{background:rgba(13,139,135,.16)}
        @keyframes ripple{to{transform:scale(10);opacity:0}}

        .hero-media{will-change:transform}
        :root{ --hero-shift: 28px; }
        @media (max-width: 920px){ :root{ --hero-shift: 16px; } }
        /* Hero vertical position (move text lower/higher) */
        :root{ --hero-top: 66%; }
        @media (max-width: 1400px){ :root{ --hero-top: 74%; } }
        @media (max-width: 920px){ :root{ --hero-top: 56%; } }
        @media (max-width: 560px){ :root{ --hero-top: 52%; } }