/* ---------- Design tokens ---------- */
    :root{
      --bg-hero:url('/img/header-bg-mobile.webp'); /* мобильный баннер */
      --bg-hero-desktop: url('/img/header-bg-desktop.webp');
      --img-office:url('/img/hero-courier.webp'); /* герой: курьер */
      --img-plant:url('/img/card-1.webp'); /* превью */
      --bg-plant:url('/img/local__item_1.webp');   /* фон нижнего блока */
      --c-bg:#0e0f10;
      --c-card:#17191c;
      --c-soft:#1d2024;
      --c-text:#e8f0ea;
      --c-sub:#b7c3bc;
      --c-accent:#a8ff9c;
      --c-accent-2:#9ee6b0;
      --radius:18px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --green:#1fc370;
      --red:#f52d6b;
    }

    
    .float-card .cta i{ margin-right: 8px; }

    /* ---------- Base ---------- */
    *{box-sizing:border-box}
    html,body{height:100%}
    body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

    
    @font-face {
      font-family: 'Caveat'; src: url('/css/fonts/Caveat-VariableFont_wght.ttf') format('truetype'); font-weight: 400 700;  font-display: swap; }

    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    .container{max-width:1200px; margin:0 auto; padding:0 20px}
    .muted{color:var(--c-sub)}
    .btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:16px; border:1px solid #2a2e33; background:#1e2126; color:#e7f6ea; font-weight:700; box-shadow:var(--shadow);}
    .btn:hover{transform:translateY(-1px);}
    .btn-ghost{background:transparent; border-color:#2c3331; color:#e7f6ea}
    .badge{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:16px; color:#b8c7be; font-size:.8rem;
            backdrop-filter: saturate(140%) blur(8px);background: rgba(14, 15, 16, .55);border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    /* ---------- Navbar ---------- */
    .nav{position:fixed; inset-inline:0; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(14,15,16,.55); border-bottom:1px solid rgba(255,255,255,.07)}
    .nav .inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0}
    .brand{display:flex; align-items:center; gap:.7rem; font-weight:800}
    .brand-mark{width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#3cff7c,#00a86b)}
    .menu{display:flex; gap:22px}
    .menu a{color:var(--c-sub); font-weight:600}
    .menu a:hover{color:#e4f6ea}
    .nav-cta{display:flex; align-items:center; gap:20px}
    
    /* кнопка лк */
    .floating-lk{position:fixed;top:2%;right:0;display:flex;align-items:center;gap:8px;padding:14px 10px;border-radius:16px 0 0 16px;background:#f52d6b73;color:#fff;font:600 14px/1 Manrope,sans-serif;box-shadow:0 10px 25px rgba(0,0,0,.35);transition:all .3s ease;z-index:100;backdrop-filter:saturate(140%) blur(12px);border:1px solid rgba(255,255,255,.1);writing-mode:vertical-rl;text-orientation:mixed;overflow:hidden;white-space:nowrap}
    .floating-lk i{font-size:16px;transition:transform .3s ease}
    .floating-lk span{transition:opacity .3s ease,margin .3s ease}
    .floating-lk.shrunk{width:40px;height:40px;border-radius:16px 0 0 16px;padding:0;justify-content:center;writing-mode:horizontal-tb}
    .floating-lk.shrunk span{opacity:0;margin:0;width:0;overflow:hidden}

    @media(max-width:560px){.lk-btn{display:none;}.floating-lk{display:flex;}} 
    @media(min-width:561px){.floating-lk{display:none;}}

    /* ---------- Hero ---------- */
    .hero{
      position:relative; padding-top:120px; padding-bottom:64px; overflow:hidden;
      background: radial-gradient(1200px 500px at 10% 15%, rgba(167,255,165,.08), transparent 60%),#0e0f10;}

    .hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,15,16,.1) 60%, rgba(14,15,16,1) 90%) }
    .hero .grid{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
    h1{font-size:clamp(36px, 6vw, 64px); line-height:1.05; margin:8px 0 14px; letter-spacing:-.02em}
    .lead{font-size:clamp(16px, 2vw, 20px); color:var(--c-sub); max-width:52ch}

    .hero {position: relative;overflow: hidden;}
    .hero-bg {position: absolute;inset: -15%;background: var(--bg-hero) center / cover no-repeat;opacity: .45;filter: contrast(110%) saturate(80%);will-change: background-position;z-index: 0;}
    .hero .grid {position: relative;z-index: 1;}

    .hero-bg {background-position: center calc(50% + var(--scroll, 0px));}

    @media (min-width: 768px) {
        .hero-bg {background-image: var(--bg-hero-desktop);} }

    /* слоган */
    .slogan { text-align: center; padding: 60px 20px 40px;  background: transparent; }
    .slogan-title { font-family: 'Caveat', cursive; font-size: clamp(3rem, 5vw, 60px); font-weight: 600; color: var(--red); margin: 0 0 20px; line-height: 1.2; }
    .slogan-subtitle { font-family: 'Manrope', sans-serif; font-size: clamp(16px, 2vw, 22px); color: var(--c-sub); max-width: 800px;  margin: 0 auto; line-height: 1.5; }

    @media(max-width:560px){ .slogan {padding: 0px 20px 40px;} }

    /* floating catalog card */
    .float-card{justify-self:end; width: min(420px, 100%); border-radius:24px; padding:22px; 
       backdrop-filter: saturate(140%) blur(8px);background: rgba(14, 15, 16, .41);border: 1px solid rgba(255, 255, 255, .07); 
    }
    .float-card .thumb{width:120px; height:120px; border-radius:20px; background:var(--img-plant) center/cover no-repeat; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
    .float-card .cta{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding:14px 16px; border-radius:16px; background:#f2f5f1; color:#0d1110; font-weight:800}
    .float-card .cta span{opacity:.9}

    /* stats side stack */
    .stats{position:absolute; right:24px; bottom:24px; display:flex; flex-direction:column; gap:14px; z-index:2; margin-top:36px;}
    .stat{min-width:220px; padding:14px 16px; border-radius:16px; background:rgba(23,25,28,.7); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(6px)}
    .stat b{font-size:22px}
    .stat small{display:block; color:var(--c-sub); font-size: clamp(16px, 2vw, 16px);}

    /* ---------- Section: intro with video and copy ---------- */
    .intro{position:relative; padding:0px 30px}
    .intro .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start}
    .video{
      position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.07);
      background:var(--img-office) center/cover no-repeat; aspect-ratio:16/9;
    }
    .play{position:absolute; inset:0; display:grid; place-items:center;}
    .play button{width:72px; height:72px; border-radius:50%; border:none; background:rgba(255,255,255,.9); cursor:pointer; box-shadow:0 6px 30px rgba(0,0,0,.35)}

    /* ---------- Section: reasons ---------- */
    .reasons{padding:50px 30px}
    .reasons h2{text-align:center; margin: 30px 8px;}
    .reasons { position: relative; overflow: hidden; }
    .reasons-bg {position: absolute;inset: -20%;background: url('/img/bg-reasons.png') center / cover no-repeat;opacity: .25;filter: contrast(110%) saturate(80%);will-change: transform;z-index: 0;}
    .reasons .cards, .reasons h2 { position: relative; z-index: 1; }

    @media (max-width: 768px) {
    .reasons-bg {background-image:url('/img/bg-reasons-mobile.png');}}

    .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    .card{border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:20px; box-shadow:var(--shadow)
            backdrop-filter: saturate(140%) blur(8px); background: rgba(23,25,28,.7);}
    .card .num{width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; font-weight:800; font-size: 2.25rem; margin-bottom:10px}
    .card p{color:var(--c-sub)}
    
    /*---------- операторы ----------*/
    
    .operators { padding: 10px 0; text-align: center; }
    .logo-carousel{overflow:hidden;position:relative;padding:30px 0;}
    /* .logo-track{display:flex;align-items:center;gap:60px;width:max-content;animation:scroll 40s linear infinite;} */
    .logo-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: scroll 40s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

    .logo-track img{height:50px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s,transform .3s;cursor:pointer;}
    .logo-track img:hover{filter:grayscale(0);opacity:1;transform:scale(1.1);}
    @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
    @media(max-width:600px){.logo-track{gap:30px;animation:scroll 30s linear infinite;}}

    /* сетка партнёров в лайтбоксе */
    .partners-mode {text-align:center;color:var(--c-text);padding:20px;background-color:rgba(23,25,28,.7);border-radius:16px;} 
    .partners-mode h2 {margin-bottom:20px;} 
    .partners-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:24px;justify-items:center;align-items:center;max-width:900px;margin:0 auto;} 
    .partners-grid img {max-height:60px;width:auto;object-fit:contain;cursor:pointer;filter:grayscale(1);opacity:.85;transition:.3s;} 
    .partners-grid img:hover {filter:grayscale(0);opacity:1;transform:scale(1.08);} 
    @media (max-width:768px){.partners-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:16px;}.partners-grid img{max-height:50px;}} 
    @media (max-width:480px){.partners-grid{grid-template-columns:repeat(3,1fr);gap:22px;}.partners-grid img{max-height:40px;}}

    /*---------- Услуги ----------*/
    
    .services-carousel {position: relative; overflow: hidden; padding: 0 40px; }
    .services-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
    /* скрываем скроллбар */
    .services-track::-webkit-scrollbar { display: none; }
    .services-track { -ms-overflow-style: none; scrollbar-width: none; }
    .service-card { flex: 0 0 280px; min-height: 180px; border-radius: 16px; padding: 20px; color: #fff; background-size: cover; background-position: center; scroll-snap-align: start; box-shadow: var(--shadow); position: relative; }

    .service-card::after { content:""; position:absolute; inset:0; border-radius:16px; background:rgba(0,0,0,0.45); }
    .service-card::after { pointer-events: none; }
    .service-card h3,
    .service-card p { position: relative; z-index: 1; margin: 0 0 6px; }

    /* стрелки */
    .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 2rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
    .arrow.left { left: 4px; }
    .arrow.right { right: 4px; }

    @media (max-width: 600px){
      .services-carousel { padding: 0; }
      .arrow { display:none; } /* на телефоне только свайп */
      .service-card { flex: 0 0 80%; }
    }
    
    /* ---------- Section: tracking ---------- */
.tracking {padding:30px 20px 30px; text-align:center; background:var(--red); border-radius:var(--radius); color:#fff; box-shadow:var(--shadow); margin:50px auto;}
.tracking h2 {margin-bottom:24px;margin-top:0px; font-size:clamp(1.8rem,3vw,2.2rem); font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.25);}
.tracking-box {display:flex; justify-content:center; gap:12px; flex-wrap:wrap; max-width:540px; margin:0 auto;}
.tracking-box input {flex:1; padding:14px 16px; border-radius:14px; border:none; background:#fff; color:#222; font:inherit; max-width:340px; box-shadow:0 4px 14px rgba(0,0,0,.15);}
.tracking-box input::placeholder {color:#777;}
.tracking-box button {background:#222; align-items: center; justify-content: center;color:#fff; font-weight:700; cursor:pointer; border:none; border-radius:14px; padding:14px 20px; box-shadow:0 4px 14px rgba(0,0,0,.2); transition:all .3s ease;}
.tracking-box button:hover {background:#fff; color:var(--red);}
@media (max-width:560px){.tracking-box{flex-direction:column; gap:14px; max-width:100%;} .tracking-box input,.tracking-box button{width:100%; max-width:none;}}



    /* ---------- Section: gallery ---------- */
    /* .gallery{padding:60px 30px} */
    .gallery h2{text-align:center; margin: 30px 8px;}
    .gallery .lead{text-align:center; margin:0 auto 24px; max-width:60ch; color:var(--c-sub)}
    .g-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    .g-item{position:relative; border-radius:16px; overflow:hidden; background:#121416; border:1px solid rgba(255,255,255,.06); aspect-ratio:1/1; cursor:zoom-in; box-shadow:var(--shadow)}
    .g-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
    .g-item:hover img{transform:scale(1.05)}

    /* Lightbox */
    .lightbox{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.82); z-index:1000; padding:24px}
    .lightbox.open{display:grid}
    .lightbox__inner{position:relative; max-width:min(92vw,1200px); max-height:90vh}
    .lightbox__inner img{display:block; max-width:100%; max-height:90vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
    .lb-close{position:absolute; top:-12px; right:-12px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:#ffffff; color:#0d1110; font-size:26px; font-weight:800; line-height:1; cursor:pointer; box-shadow:var(--shadow)}

    @media (max-width: 1024px){
      .g-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width: 720px){
      .g-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 480px){
      .g-grid{grid-template-columns:repeat(2, 1fr)}
    }

    /* ---------- Section: testimonials ---------- */
    .testimonials{padding:60px 0 30px}
    .testimonials h2{text-align:center; margin: 30px 8px;}
    .testimonials .lead{text-align:center; margin:0 auto 24px; max-width:60ch; color:var(--c-sub)}
    .t-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .t-card{background:var(--c-card); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:22px; box-shadow:var(--shadow)}
    .t-card p{color:var(--c-sub)}
    .t-head{display:flex; align-items:center; gap:12px; margin-top:14px}
    .avatar{width:48px; height:48px; border-radius:50%; background:#222 center/cover no-repeat}
    .role{color:var(--c-sub); font-size:.9rem}
    .stars{color:#f4d87a; letter-spacing:1px}

    @media (max-width: 1024px){
      .t-cards{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 560px){
      .t-cards{grid-template-columns:1fr}
    }
    
    /* --- фото офиса --- */
    .office-card {position:relative;overflow:hidden;border-radius:16px;cursor:zoom-in;padding: 0px; aspect-ratio: 1 / 1;}
    .office-card img {display:block;width:100%;height:100%;object-fit:cover;border-radius:16px;transition:transform .35s ease;}
    .office-card:hover img {transform:scale(1.05);}
    .office-caption {position:absolute;bottom:20%;left:10px;margin:0;padding:6px 12px;color:#fff;font-size:0.95rem;font-weight:600;z-index:2;}



      /* ---------- Section: FAQ ---------- */
    .faq{position:relative;overflow:hidden;padding:0 5px}
    .faq h2{text-align:center;margin:30px 8px}
    .faq .lead{text-align:center;max-width:60ch;margin:0 auto 18px;color:var(--c-sub)}
    .faq .accordion{max-width:900px;margin:0 auto;display:grid;gap:10px}
    
    .faq .item{background:var(--c-card);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
    .faq .q{position:relative;width:100%;padding:14px 16px;padding-right:32px;text-align:left;font-size:1.17em;font-weight:bold;background:transparent;color:var(--c-text);border:none}
    .faq .a{display:none;padding:0 16px 14px;color:var(--c-sub)}
    .faq .item.open .a{display:block}
    
    .faq .q::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3em;transition:transform .2s}
    .faq .item.open .q::after{content:"−"}
    
    .faq-bg{position:absolute;inset:-20%;background:url('/img/bg-faq.png') center/cover no-repeat;opacity:.15;filter:contrast(110%) saturate(80%);will-change:transform;z-index:0}
    .faq .accordion,.faq h2,.faq .lead{position:relative;z-index:1}
    
    @media(max-width:768px){.faq-bg{background-image:url('/img/bg-faq-mobile.png')}}

    /* ---------- Section: routes ---------- */
    .routes{padding:30px 0 10px}
    .routes__inner{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
    .route-bubble{display:inline-block;padding:.7rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#121416;color:#e8f0ea}

    /* ---------- Section: contact ---------- */
    .contact{position:relative; padding:70px 0 90px; overflow:hidden}
    .contact::before{content:""; position:absolute; left:-120px; bottom:-120px; width:55vw; max-width:620px; aspect-ratio:2/3; 
    background: 
    linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0)), /* чёрный сверху → прозрачный вниз */
    var(--bg-plant) center/cover no-repeat;
    opacity:.35; filter:saturate(60%);z-index: 0;}
    .contact .grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; position: relative; z-index: 1;}
    form{display:grid; gap:12px}
    input, textarea{width:100%; padding:14px 16px; border-radius:14px; border:1px solid #2a2e33; background:#131517; color:#e8f1ec; font:inherit}
    textarea{min-height:110px; resize:vertical}
    .submit{padding:14px 18px; border-radius:14px; background:var(--green); color:#ffffff; cursor:pointer}
    .policy{opacity:.6; font-size:.85rem}

    /* ---------- Footer ---------- */
    footer{border-top:1px solid rgba(255,255,255,.07); padding:20px 0 40px; color:var(--c-sub)}
    .foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
    .foot-nav{display:flex; gap:22px}
    
    /* ---------- стрелки ---------- */
    
        .lb-prev, .lb-next {
      position:absolute; top:50%; transform:translateY(-50%);
      background:rgba(0,0,0,0.6); color:#fff;
      border:none; font-size:2rem; width:44px; height:44px;
      border-radius:50%; cursor:pointer; z-index:3;
    }
    .lb-prev { left:-60px; }
    .lb-next { right:-60px; }
    @media (max-width: 768px){
      .lb-prev, .lb-next { display: none; }
    }



    /* ---------- Responsive ---------- */
    @media (max-width: 1024px){
      .hero .grid{grid-template-columns:1fr;}
      .float-card{justify-self:start}
      .stats{position:static; flex-direction:row; flex-wrap:wrap; margin-top:36px}
      .intro .grid{grid-template-columns:1fr}
      .cards{grid-template-columns:repeat(2,1fr)}
      .contact .grid{grid-template-columns:1fr}
    }
    @media (max-width: 560px){
      .menu{display:none}
      .cards{grid-template-columns:1fr}
    }

    /* FIX: .stats как обычный блок на десктопе */
    @media (min-width: 1025px){
      .stats{position: static;align-self: center;justify-self: center;display: flex;gap: 14px;flex-direction:row; flex-wrap: wrap;margin-top: 5px;}
    }
    
        /* --- Mobile fixes --- */
    @media (max-width: 560px){
      .nav .inner { padding: 16px 12px; }
      .float-card .cta {flex: 1 1 100%;text-align: center;justify-content: center;}
      .stats {flex-direction: column; width: 100%;}
      .stat { width: 100%;text-align: center;}
      .testimonials {padding: 60px 12px 30px;}
      .contact::before{left: 0px; bottom: 0px; width: 100%;}
      .nav-cta .muted{display:none}              /* убираем "Москва" */
      .nav-cta{gap:18px;padding-right:50px;}     /* добавляем отступ справа под 1 иконку */
    }
    
    /* --- Эффекты --- */
      /* параллакс текста */ 
    .reveal {opacity: 0;transform: translateY(50px);transition: opacity 0.8s ease, transform 0.8s ease;}
    .reveal.visible {opacity: 1;transform: translateY(0);}