/*!
Theme Name: Import
*/

/* ==============================
   0) Переменные и базовая типографика
   ============================== */
:root{
  --ti-text:#0b0d10;
  --ti-muted:#6b7279;
  --ti-white:#fff;
  --ti-border:#e7eaee;
  --ti-accent:#0b0d10;
  --ti-dot:#0b0d10;
  --ti-bg:#ffffff;
  --ti-yellow:#ffcc00;
  --ti-yellow-2:#f3a800;
  --ti-dark:#02060a;
  --ti-cta-pattern:url('https://www.import.linguacats.com/wp-content/uploads/2025/09/Block-5.png');
  --hero-bg:url('https://www.import.linguacats.com/wp-content/uploads/2025/09/image-bg.png');
  --hero-bg-mobile:url('https://www.import.linguacats.com/wp-content/uploads/2025/10/image-bg.png');

  /* модалка */
  --call-bg:#ffffff;
  --call-text:#0b0d10;
  --call-muted:#6b7279;
  --call-border:#dfe3e8;
  --call-yellow:#ffcc00;
}

/* базовая типографика */
html{
  font-family: 'hagrid',sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;

  /* фикс смещения при появлении/исчезновении скроллбара */
  scrollbar-gutter:stable both-edges;
}
body{background:#000;}
body,button,input,select,textarea{font:inherit;}
h1,h2,h3,h4,h5,h6{font-weight:500;}
.pd-60{padding-top:60px;}
.pd-50{padding-top:50px;}

/* кнопки (общие) */
.btn{border-radius:0!important;}
.pll-switcher-select{
  background: none!important;
  color: #fff!important;
  border: 1px solid #fff!important;
}
/* ==============================
   1) Topbar / бренд / язык
   ============================== */
.ti-topbar{position:relative; z-index:3; padding:20px 15px;}
.ti-brand{display:block; text-decoration:none; color:#fff; text-align:center;}
.ti-brand__logo{width:44px; height:28px; background:var(--ti-yellow); clip-path:polygon(0 0,70% 0,100% 100%,30% 100%);}
.ti-brand__text{letter-spacing:.06em; font-weight:500;}
.ti_brand_yellow{color:#ffcc00;}

.ti-lang,.ti-menu{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(2,6,10,.55);
  color:#fff;
  padding:8px;
  border-radius:0;
  backdrop-filter:blur(4px);
  line-height:1;
  font-size: 18px;
}
.ti-menu{background:var(--ti-yellow); color:#0a0a0a; border-color:transparent; font-weight:500;}
.ti-menu:hover{color:#fff!important;border: 1px solid #fff;}
.ti-lang:hover{color:#fff!important;}
font

/* Polylang <select> */
.pll-switcher-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent!important; background-image:none!important;
  color:#fff!important; border-radius:0!important; 
  padding:.45rem .8rem; line-height:1.2;
}
.pll-switcher-select:focus{outline:none; border-color:#fff;}
.pll-switcher-select option{color:#ffffff; background: none !important;;}

/* ==============================
   2) Hero
   ============================== */
.ti-hero{
  position:relative; min-height:100vh; color:#eef3f7; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 30% 5%, rgba(17,50,70,.25) 0%, rgba(2,6,10,0) 60%),
    linear-gradient(180deg, rgba(2,6,10,1) 0%, rgba(2,6,10,.95) 45%, rgba(2,6,10,.85) 100%);
    padding: 0 15px;
}
.ti-hero__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,6,10,0) 0%, rgba(2,6,10,.15) 55%, rgba(2,6,10,.55) 70%, rgba(2,6,10,.9) 100%),
    var(--hero-bg) right bottom/cover no-repeat;
}
.ti-hero__content{position:relative; z-index:2; padding:clamp(100px,4vw,48px) 0 48px;}
.ti-title{font-weight:500; line-height:1.06; letter-spacing:-.01em; margin:0; font-size:clamp(28px,4.1vw,61px);}
.ti-title__row{display:block;}
.ti-title__row + .ti-title__row{margin-top:.12em;}
.ti-accent{letter-spacing:.005em; transform:translateY(.5px); display:inline-block;}
.ti-mark{display:inline-flex; width:1.05em; height:.62em; margin-left:.25em; translate:0 .06em;}
.ti-mark > i{flex:1; background:var(--ti-yellow); clip-path:polygon(0 0,65% 0,100% 100%,35% 100%);}
.ti-lead{max-width:720px; color:#b9c3cc; margin-top:1.2rem; font-size:clamp(14px,1.25vw,18px); line-height:1.55;}
.ti-cta{margin-top:1.5rem; gap:14px;}
.btn-tiyellow{
  background-color: var(--ti-yellow-2);
  color: #000;
  padding:.88rem 1.25rem;
  border: 1px solid #f3a800;
  font-size: 18px;
  line-height: 23px;
  font-family: "Golos Text", sans-serif;
  text-decoration: none;
}
.btn-tiyellow:hover{
  background-color: #fff;
  color:var(--ti-yellow-2);
  transition: 0.2s;
  border: 1px solid #fff;
}
.btn-tiyellow2:hover{
background-color: #fff;
color: #000;
border: 1px solid #000;
}
/* .btn-tiyellow>.fa-arrow-right{

} */
.btn-light{
  background-color: #fff;
  color: #000;
  border: 1px solid black;
  padding:.9rem 1.25rem; 
  line-height: 23px;
  font-size: 18px;
  text-decoration: none;
  font-family: "Golos Text", sans-serif;
}

.btn-light:hover{
  background-color: #000;
  color: #fff;
  transition: 0.2s;
  border: 1px solid #fff;
}

.lang-toggle__btn{
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 0px 10px;
}

.lang-toggle__btn:hover{
  background-color: var(--call-yellow);
  color: #000;
  transition: 0.3s;
}

.ti_img{position:absolute; left:0; top:8%;}
.row_1{padding-left:13%;}
.row_2{padding-left:22%;}

/* ==============================
   3) About
   ============================== */
.ti-about{position:relative; padding:80px 0; background:#fff;}
.ti-about__bg{position:absolute; inset:0; background:url('https://www.import.linguacats.com/wp-content/uploads/2025/09/pattern.png'); pointer-events:none;}
.about-media__img{width:100%; height:auto; box-shadow:0 6px 20px rgba(0,0,0,.08); margin-bottom:24px;}
.about-facts{margin-bottom:20px;}
.about-fact__label{font-size:16px; color:#555; margin-bottom:2px;}
.about-fact__value{font-size:16px; font-weight:500; color:#000;font-family: 'Golos Text';
  font-style: normal;}
.about-social__link{text-decoration:underline; color:#000; font-size:15px; display:inline-flex; align-items:center; gap:6px;margin-top: 25px;}
.about-social__dot{width:6px; height:6px; border-radius:50%; background:#000;}
.about-breadcrumb{display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:14px;}
.about-breadcrumb__dot{width:10px; height:10px; background:#111; border-radius:2px;}
.about-title{font-size:34px; font-weight:500; line-height:1.2; margin-bottom:20px;font-family: 'hagrid',sans-serif;}
.about-strong{font-weight:700;}
.about-text{border-top:1px solid #e7eaee; padding-top:18px; font-size:18px; line-height:1.6; color:#555;font-family: 'Golos Text';
  font-style: normal;}
.content_block{
font-family: 'Golos Text';
  font-style: normal;
}
.ti-cta__card{
  background:#fff;
  color:var(--ti-dark);
  padding: clamp(16px, 2vw, 28px);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
  
}
.ti-cta__card::after{
  /* круглый светлый элемент в углу как в макете */
  content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,204,0,.35), rgba(255,204,0,0) 60%);
  pointer-events:none;
}
.ti-cta__card-text{
font-family: 'Golos Text';
  font-style: normal;
}
.about-breadcrumb__text>.fa-square-full{
  font-size: 10px!important;
padding-right: 5px;
}

/* ==============================
   4) Brands (Swiper)
   ============================== */
.ti-brands{background:#f7f8f9; padding:clamp(36px,6vw,84px) 0;}
.ti-brands__title{margin:0;font-family: "hagrid", sans-serif;font-weight: 300; font-size:clamp(20px,3vw,32px); line-height:1.15; color:#0b0d10;}
.ti-brands__stat{color:#5e6670; font-size:14px; line-height:1.35;    font-family: 'Golos Text';
    font-style: normal;}
.ti-brands__slider-wrap{position:relative; margin-top:clamp(18px,3.5vw,36px);}
.ti-brands__swiper{--slide-h:56px; padding:18px 0;}
.ti-brands__swiper .swiper-slide{width:auto; display:flex; align-items:center; justify-content:center; padding:15px;}
.ti-brands__swiper .swiper-slide img{
  height:var(--slide-h); object-fit:contain; filter:grayscale(0) opacity(.9);
  transition:transform .2s ease, filter .2s ease; will-change:transform;
}
.ti-brands__swiper .swiper-slide img:hover{transform:translateY(-2px); filter:none;}
.ti-brands__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:pointer; z-index:3;
}
.ti-brands__nav.prev{left:-6px;} .ti-brands__nav.next{right:-6px;}
.ti-brands__nav::before{
  content:""; display:block; margin:auto; width:10px; height:10px;
  border:2px solid #111; border-left:none; border-top:none; transform:rotate(132deg); translate:1px 0;
}
.ti-brands__nav.next::before{transform:rotate(314deg); translate:-1px 0;}
.ti-brands__fade{position:absolute; top:0; bottom:0; width:min(12vw,140px); z-index:2; pointer-events:none;}
.ti-brands__fade.left{left:0; background:linear-gradient(90deg,#f7f8f9 0%,rgba(247,248,249,0) 100%);}
.ti-brands__fade.right{right:0; background:linear-gradient(270deg,#f7f8f9 0%,rgba(247,248,249,0) 100%);}

/* ===== Бренды: маркиза вправо ===== */
.brands-marquee{
  --marquee-speed: 28s;      /* скорость круга */
  --marquee-gap: 28px;       /* расстояние между логотипами */
  --marquee-distance: 1200px;/* JS перезапишет реальным значением */
  overflow: hidden;
  position: relative;
  padding: 18px 0;
}
@media (max-width: 992px){ .brands-marquee{ --marquee-gap: 22px; } }
@media (max-width: 576px){ .brands-marquee{ --marquee-gap: 18px; } }

.brands-track{
  display: flex;
  gap: var(--marquee-gap);
  will-change: transform;
}
.brands-marquee.is-running .brands-track{
  animation: ti-marquee-right var(--marquee-speed) linear infinite;
}
.brands-marquee.is-paused .brands-track{ animation-play-state: paused; }

.brand-item{ flex: 0 0 auto; display:flex; align-items:center; justify-content:center; padding: 0 4px; }
.brand-item img{
  height: var(--slide-h, 56px);
  width: auto; object-fit: contain;
  filter: grayscale(0) opacity(.9);
  transition: transform .2s ease, filter .2s ease;
}
.brand-item img:hover{ transform: translateY(-2px); filter:none; }

@keyframes ti-marquee-right{
  0%   { transform: translateX(calc(var(--marquee-distance) * -1)); }
  100% { transform: translateX(0); }
}


/* ==============================
   5) Categories
   ============================== */
.ti-cats{
  position:relative;
  padding: clamp(32px, 6vw, 80px) 0;
  background: #fff url('https://www.import.linguacats.com/wp-content/uploads/2025/09/pattern-1.png') center/cover no-repeat;
  color:#fff;
}
.ti-cats__bg{ position:absolute; inset:0; pointer-events:none; }
.ti-cats__head{ margin-bottom: clamp(18px, 3vw, 28px); }
.ti-cats__title{
  margin:0; color:var(--ti-text);
  font-weight:500; font-size: clamp(22px, 3.2vw, 36px); letter-spacing:-.01em;
  font-family: "hagrid", sans-serif;
}
.ti-cats__cta{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ti-yellow); color:#111; text-decoration:none;
  transition: transform .15s ease;
}
.ti-cats__cta:hover{ transform: translateY(-2px); }
.ti_category{ color:#fff; rotate:-45deg; }

/* ---- Карточка ---- */
.catcard{
  position:relative; display:block; width:100%; overflow:hidden;
  /* базовый фон на всякий случай; основной фон лежит в .catcard__layer */
  background:#000 var(--img) center/cover no-repeat;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  aspect-ratio: 16/9;
  color:#fff; text-decoration:none;

  /* 3D-контекст для лёгкого наклона */
  transform-style: preserve-3d;
  will-change: transform;

  /* параметры эффекта (можно переопределять инлайном у конкретной карточки) */
  --parallax-move: 12px;     /* смещение фонового слоя при ховере/движении */
  --parallax-rot: 6deg;      /* угол наклона карточки */
  --parallax-scale: 1.06;    /* масштаб фонового слоя */
}

.catcard--wide{ aspect-ratio: 16/9; }

/* затемняющий слой */
.catcard::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  transition: opacity .25s ease;
  z-index:1;
}

/* слой-фон для параллакса */
.catcard__layer{
  position:absolute; inset:0;
  background: var(--img) center/cover no-repeat;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
  transition: transform .25s ease;
  z-index:0;
}

/* контент */
.catcard__overlay{
  position:absolute; left:18px; right:18px; bottom:16px;
  z-index:2;
}
.catcard__title{ font-weight:600; font-size: clamp(16px, 1.6vw, 20px); line-height:1.1;font-family: 'Golos Text';
    font-style: normal; }
.catcard__desc{ margin-top:6px; font-size:13px; color:var(--ti-white); line-height:1.35; }

/* hover эффекты */
.catcard:hover::before{ opacity:.9; }
.catcard:hover{ filter: saturate(1.06); }
.catcard:hover .catcard__layer{
  transform: scale(var(--parallax-scale));
}

/* выключаем «наклон»/параллакс на тач-устройствах */
@media (hover:none){
  .catcard{ transform: none !important; }
  .catcard__layer{ transform: none !important; }
}

/* ==============================
   6) CTA block
   ============================== */
.ti-cta_2{position:relative; padding:clamp(36px,7vw,110px) 0; color:#fff; overflow:hidden;}
.ti-cta__bg{position:absolute; inset:0; background:url('https://www.import.linguacats.com/wp-content/uploads/2025/09/Block-5.png');}
.ti-cta__bg::before{
  content:""; position:absolute; top:-10%; right:-6%; width:min(62vw,950px); height:140%;
  background:var(--ti-cta-pattern) center/contain no-repeat; opacity:.35; mix-blend-mode:soft-light; pointer-events:none;
}
.ti-cta__bracket{
  position:absolute; left:0; top:6px; width:72px; height:56px; display:block;
  border:3px solid #fff; border-right:none; border-radius:8px 0 0 8px;
}
.ti-cta__title{margin:0 0 14px 0; font-weight:600; line-height:1.06; letter-spacing:-.01em; color:#fff; font-size:clamp(26px,4vw,48px);}
.ti-cta__lead{max-width:520px; color:var(--ti-text-light); font-size:clamp(14px,1.2vw,16px); line-height:1.6; margin:10px 0 0;    font-family: 'Golos Text';
    font-style: normal; }
.ti_cta_img{position:absolute; left:0; top:20%;}
.row_cta_1{padding-left:10%;}
.row_cta_2{padding-left:25%;}
.ti-cta__actions{display:flex; gap:12px; flex-wrap:wrap;}
.ti-btn-dark{
  --bs-btn-bg:#161819; --bs-btn-color:#fff; --bs-btn-hover-bg:#1f2326; --bs-btn-border-color:transparent;
    padding:.8rem 1.1rem; font-weight:500; border-radius:0!important; border: 1px solid #000;
    font-size: 18px;
    line-height: 23px;
    font-family: "Golos Text", sans-serif;
}
.ti-btn-dark2:hover{
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  transition: 0.2s;  
}

/* ==============================
   7) Retail banner
   ============================== */
.ti-retail{position:relative; min-height:clamp(380px,55vw,560px); display:flex; align-items:center; color:var(--ti-white); overflow:hidden;}
.ti-retail__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,13,16,.85) 0%, rgba(11,13,16,.72) 22%, rgba(11,13,16,.32) 46%, rgba(11,13,16,0) 70%),
    url('https://www.import.linguacats.com/wp-content/uploads/2025/09/image-bg-1.png') center/cover no-repeat;
}
.ti-retail__content{position:relative; z-index:1; max-width:520px; padding:clamp(28px,5vw,56px) 0;}
.ti-retail__crumb{display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:12px; opacity:.95;}
.ti-retail__dot{width:10px; height:10px; background:#fff; border-radius:2px; display:inline-block;}
.ti-retail__title{margin:0 0 12px 0; line-height:1.08; letter-spacing:-.01em; font-weight:600; font-size:clamp(26px,4vw,46px);}
.ti-retail__lead{margin:0 0 18px 0; color:var(--ti-white); font-size:clamp(14px,1.2vw,16px); line-height:1.55;}
.ti-retail__btn{
  --bs-btn-bg:#ffffff; --bs-btn-color:#0b0d10; --bs-btn-hover-bg:#f4f6f8; --bs-btn-border-color:transparent;
  display:inline-flex; align-items:center; gap:10px; padding:.85rem 1.1rem; font-weight:600; text-decoration:none;
}
.ti-retail__btn .ti-arrow{width:14px; height:14px; display:inline-block; border:2px solid currentColor; border-left:none; border-top:none; transform:rotate(-45deg);}
.ti-retail__btn:hover{
  background-color: var(--ti-yellow);
  color: #000;
}

/* ==============================
   8) Social / Stories
   ============================== */
.ti-social{position:relative; padding:clamp(28px,6vw,72px) 0; background:#fff;}
.ti-social__bg{position:absolute; inset:0; background-image:url('https://www.import.linguacats.com/wp-content/uploads/2025/09/pattern-1.png'); background-size:cover; pointer-events:none;}
.ti-social__head{text-align:center; max-width:760px; margin:0 auto clamp(18px,4vw,28px);}
.ti-social__title{margin:0 0 8px 0; font-weight:500;font-family: "hagrid", sans-serif; color:var(--ti-text); letter-spacing:-.01em; line-height:1.15; font-size:clamp(22px,3.2vw,34px);}
.ti-social__lead{margin:0 auto; color:var(--ti-muted); font-size:clamp(14px,1.1vw,16px); line-height:1.6;    font-family: 'Golos Text';
    font-style: normal; }
.ti-social__links{margin-top:14px; display:flex; gap:10px; justify-content:center;}
.ti-social__btn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  background:var(--ti-yellow-2); color:#fff; font-weight:700; font-size:18px; text-decoration:none;
  box-shadow:0 6px 18px rgba(255,204,0,.35); transition:transform .15s ease;
}
.ti-social__btn:hover{transform:translateY(-2px);}

.stories-grid{
  --step:32px;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,2vw,22px); align-items:start; padding-block:28px; overflow:visible;
}
.story-card{
  position:relative; display:block; text-decoration:none; overflow:hidden; background:#000;
  height:var(--h,520px); transform:translateY(var(--shift,0)); transition:transform .35s ease;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.story-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), filter .35s ease; transform:scale(1); will-change:transform;
}
.story-card:hover img{transform:scale(1.045); filter:saturate(1.05) contrast(1.03);}
.story-card:focus-visible{outline:2px solid var(--ti-yellow); outline-offset:3px; border-radius:12px;}

/* ступеньки для 5 колонок */
.stories-grid > .story-card:nth-child(5n + 1){--shift:calc(var(--step) * -1);}
.stories-grid > .story-card:nth-child(5n + 2){--shift:calc(var(--step) * -.5);}
.stories-grid > .story-card:nth-child(5n + 3){--shift:calc(var(--step) * .25);}
.stories-grid > .story-card:nth-child(5n + 4){--shift:calc(var(--step) * -.5);}
.stories-grid > .story-card:nth-child(5n + 5){--shift:calc(var(--step) * -1);}

/* ==============================
   9) Footer
   ============================== */
.ti-footer{
  --mark-size:clamp(120px,19vw,230px);
  --pad-y:clamp(36px,7vw,96px);
  position:relative; z-index:0; color:#f2f2f2; background:#1E1E1E;
  padding-top:var(--pad-y);
  padding-bottom:calc(var(--pad-y) + max(40px, 0.42 * var(--mark-size)));
  overflow:hidden; isolation:isolate;
}
.ti-footer .container{position:relative; z-index:1;}
.ti-footer__bg{
  position:absolute; inset:0; pointer-events:none; z-index:-2;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}
/* .ti-footer::after{
  content:"TOTAL IMPORT";
  position:absolute; left:clamp(16px,3vw,40px); bottom:0;
  font-size:var(--mark-size); line-height:1; letter-spacing:.03em;
  color:#fff; opacity:.04; font-weight:700; white-space:nowrap; pointer-events:none; z-index:-1;
} */
.ti-footer__title{margin:0 0 10px 0; color:var(--ti-yellow); font-weight:500; letter-spacing:.01em; font-size:clamp(20px,3.2vw,32px);font-family: "hagrid", sans-serif;}
.ti-footer__lead{color:var(--ti-muted); margin:0 0 14px 0; font-size:14px; max-width:520px;font-family: 'Golos Text';
    font-style: normal; }
.ti-input-group{display:flex; align-items:stretch; max-width:520px;}
.ti-input-group input{
  flex:1 1 auto; background:transparent; border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:.8rem .9rem; outline:none;
}
.ti-input-group input::placeholder{color:rgba(255,255,255,.55);}
.btn-tiyellow{cursor:pointer;}
.ti-form-hint{margin-top:8px; font-size:13px; color:#d8dfe6;}
.ti-footer__contacts{max-width:600px; margin-left:auto;}
.ti-contact{margin-bottom:18px;}
.ti-contact__label{font-weight:500; margin-bottom:4px; color:#f7f7f7;}
.ti-contact__text{color:#d2d6db; font-size:14px; font-family: 'Golos Text';
    font-style: normal;}
.ti-footer__links{gap:18px; margin-top:12px;}
.ti-footer__link{color:#aeb4ba; text-decoration:none; font-size:13px;}
.ti-footer__link:hover{color:#fff;}
.ti-go-top{
  position:absolute; right:14px; top:92%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none; background:var(--ti-yellow);
  box-shadow:0 8px 26px rgba(255,204,0,.35); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:2;
}
.ti-go-top.is-visible{opacity:1; pointer-events:auto;}
.ti-go-top:hover{transform:translateY(-52%);}
.ti-go-top__ico{
  display:block; width:14px; height:14px; margin:0 auto;
  border:2px solid #111; border-bottom:none; border-left:none; transform:rotate(-45deg); position:relative; top:2px;
}
/* ====== MARQUEE: бесконечная надпись TOTAL IMPORT в футере ====== */

/* убираем статичный водяной знак, если включена маркиза */
.ti-footer.ti-footer--marquee::after{ content: none; }

/* контейнер бегущей строки */
.ti-footer__marquee{
  --marquee-speed: 28s;          /* скорость круга (меньше — быстрее) */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--mark-size) * 1.15);
  overflow: hidden;
  z-index: -1;                   /* ниже контента, выше фонового градиента */
  opacity: .06;                  /* как у водяного знака */
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* две «ленты», идущие друг за другом — так добиваемся бесшовного цикла */
.ti-footer__marquee::before,
.ti-footer__marquee::after{
  position: absolute; bottom: 0; left: 0;
  font-size: var(--mark-size);
  line-height: 1;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .03em;
  /* длинная повторяющаяся строка — подбери количество, чтобы было явно шире 2×viewport */
  content:
    "TOTAL IMPORT   TOTAL IMPORT   TOTAL IMPORT   TOTAL IMPORT   "
    "TOTAL IMPORT   TOTAL IMPORT   TOTAL IMPORT   TOTAL IMPORT   ";
  animation: ti-marquee-left var(--marquee-speed) linear infinite;
}

/* вторая лента стартует «сзади» для бесшовности */
.ti-footer__marquee::after{
  animation-delay: calc(var(--marquee-speed) / -2);
}

/* движение вправо→лево */
@keyframes ti-marquee-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* ширины достаточно, чтобы цикл был бесшовным */
}

/* уважение prefers-reduced-motion — останавливаем анимацию */
@media (prefers-reduced-motion: reduce){
  .ti-footer__marquee::before,
  .ti-footer__marquee::after{
    animation: none;
    transform: none;
  }
}

/* ==============================
   10) Sidebar (offcanvas)
   ============================== */
body.is-locked{overflow:hidden;}
.ti-sidebar{
  position:fixed; inset:0; z-index:1300; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.ti-sidebar.is-open{opacity:1; visibility:visible;}
.ti-sidebar__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s ease;}
.ti-sidebar.is-open .ti-sidebar__backdrop{opacity:1;}
.ti-sidebar__panel{
  position:absolute; top:0; right:0; height:100%; width:min(360px,86vw);
  background:#4E4E4E; color:#fff; box-shadow:-10px 0 40px rgba(0,0,0,.25);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1);
  display:flex; flex-direction:column; padding:22px 20px;
}
.ti-sidebar.is-open .ti-sidebar__panel{transform:translateX(0);}
.ti-sidebar__close{
  position:absolute; top:10px; right:10px; width:40px; height:40px; border:0; background:transparent;
  font-size:34px; line-height:1; color:#fff; cursor:pointer;
}
.ti-sidebar__nav{margin-top:30px; display:flex; flex-direction:column; gap:12px;}
.ti-sidebar__link{
  color:#dfe3e8; text-decoration:none; font-size:20px; padding:8px 4px;
  transition:color .15s ease, border-color .15s ease;
}
.ti-sidebar__link:hover{color:#fff;}
.ti-sidebar__link.is-active{color:var(--ti-yellow); text-decoration: underline; text-underline-offset: 10px;}
.ti-sidebar__social{margin-top:35px; display:flex; gap:10px;}
.ti-soc{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff; color:#000000; text-decoration:none; transition:transform .15s ease;
}
.ti-soc:hover{transform:translateY(-2px);}

/* ==============================
   11) Modal (единственная версия, без дублей)
   ============================== */
html.is-modal-open{scroll-behavior:auto !important;}
html.is-modal-open, body.is-modal-open{overflow:hidden;}

.call-modal{
  position:fixed; inset:0; z-index:9999; display:none; /* показ классом */
}
.call-modal.is-open{display:block;}
.call-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55);}
.call-modal__window{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:520px; width:calc(100% - 32px);
  background:var(--call-bg); color:var(--call-text);
  padding:20px; box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.call-modal__close{
  position:absolute; right:16px; top:14px; width:36px; height:36px; border:0; background:transparent;
  font-size:36px; line-height:1; color:#000; cursor:pointer;
}
.call-modal__title{margin:0 36px 14px 0; font-size:28px;font-family: 'hagrid',sans-serif; font-weight:500; line-height:1.15;}
.call-field + .call-field{margin-top:14px;}
.call-field input{
  width:100%; height:64px; padding:0 18px; font-size:18px;
  border:2px solid var(--call-border); background:#fff; color:#000; outline:none;
}
.call-field input:focus{border-color:#121212;}
.call-consent{
  display:grid; grid-template-columns:28px 1fr; column-gap:10px;
  align-items:start; margin:14px 0 8px; color:var(--call-text);
}
.call-consent input{position:absolute; opacity:0; pointer-events:none;}
.call-consent .box{
  width:28px; height:28px; border:2px solid #c9ced4; background:#fff; position:relative; display:inline-block;margin-top: 10px;
}
.call-consent input:checked + .box{
  border-color:var(--call-yellow);
  background:linear-gradient(180deg,#ffd64e,#ffcc00);
}
.call-consent input:checked + .box::after{
  content:""; position:absolute; left:7px; top:5px; width:10px; height:16px;
  border:3px solid #111; border-top:none; border-left:none; transform:rotate(45deg);
}
.call-consent .text{font-size:16px; line-height:1.4; color:#333;text-align: left;}
.call-submit{
  width:100%; height:64px; border:0; cursor:pointer; background:var(--call-yellow); color:#000;
  font-weight:500; font-size:18px;font-family: "hagrid",sans-serif; display:flex; align-items:center; justify-content:center; gap:10px;
}
.call-submit:hover{filter:brightness(1.05);}
.call-form__hint{margin-top:10px; color:var(--call-muted); font-size:14px;}


/* контейнер */
.lang-switch{ position:relative; }

/* кнопка */
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding: 0.6rem .8rem;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28);
  border-radius:0; line-height:1; cursor:pointer;
  text-transform: uppercase;
}

/* список */
.lang-list{
  position:absolute; top:100%; left:0;
  min-width:100%;
  background:#111;            /* НЕТ синей подсветки, мы полностью свой блок рисуем */
  border:1px solid rgba(255,255,255,.25);
  display:none; z-index:10;
}

/* пункт */
.lang-link{
  display:block; padding:.45rem .6rem;
  color:#fff; text-decoration:none;
  text-transform: uppercase;
}
.lang-link:hover{ background:#222; }
.lang-link.is-active{ color:#ffcc00; }

/* открытое состояние (тогглим классом из JS) */
.lang-switch.is-open .lang-list{ display:block; }


/* ==============================
   12) MEDIA QUERIES (собраны внизу)
   ============================== */

/* --- ≤1200 --- */
@media (max-width: 1200px){
  .ti-brands__swiper{ --slide-h:52px; }
  .ti-footer{ --mark-size:clamp(100px,25vw,260px); }
  .ti-footer{ padding-bottom:calc(var(--pad-y) + max(32px, 0.46 * var(--mark-size))); }
}

/* --- ≤992 --- */
@media (max-width: 991.98px){
  /* categories */
  .catcard--wide{aspect-ratio:16/9;}
  /* CTA */
  .ti-cta__bracket{display:none;}
  /* stories — 3 колонки */
  .stories-grid{grid-template-columns:repeat(3,1fr); --step:24px;}
  .stories-grid > .story-card:nth-child(3n + 1){--shift:calc(var(--step) * -1);}
  .stories-grid > .story-card:nth-child(3n + 2){--shift:calc(var(--step) *  .3);}
  .stories-grid > .story-card:nth-child(3n + 3){--shift:calc(var(--step) * -1);}
}

/* --- ≤768 --- */
@media (max-width: 767.98px){
  /* stories — 2 колонки */
  .stories-grid{grid-template-columns:repeat(2,1fr); --step:18px;}
  .stories-grid > .story-card:nth-child(2n + 1){--shift:calc(var(--step) * -1);}
  .stories-grid > .story-card:nth-child(2n + 2){--shift:calc(var(--step) *  .4);}
}

/* --- ≤576 --- */
@media (max-width: 575.98px){
  /* Brands */
  .ti-brands__swiper{ --slide-h:38px; }

  /* Retail */
  .ti-retail__title{font-size:28px;}
  .ti-retail__content{max-width:100%;}

  /* Stories — на мобилке лента со snap */
  .ti-social .stories-grid{
    display:flex; gap:14px; padding:10px 16px; margin:0 -16px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .ti-social .stories-grid::-webkit-scrollbar{display:none;}
  .ti-social .story-card{
    flex:0 0 78%; height:120vw; scroll-snap-align:start; transform:none;
  }

  .ti-footer{
    --mark-size:clamp(80px,32vw,200px);
    padding-top:var(--pad-y);
    padding-bottom:calc(var(--pad-y) + max(28px, 0.5 * var(--mark-size)));
  }

  /* форма подписки в одну строку (как на скрине) */
  .ti-input-group{flex-direction:row!important; gap:0; max-width:100%;}
  .ti-input-group input{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    border-right:none; height:48px; font-size:14px;width:100%;
  }
  .btn-tiyellow{
    min-width:140px;
    font-size:14px; letter-spacing:.01em; white-space:nowrap;
  }
 
  /* Modal компакт */
  .call-modal__window{width:calc(100vw - 20px); padding:20px;}
  .call-modal__title{font-size:24px;}
  .call-field input,.call-submit{height:60px;}

  /* Sidebar компакт */
  .ti-sidebar__panel{width:100%; padding:20px 18px;}
  .ti-sidebar__link{font-size:20px;}  

  .ti-social .stories-grid{
    display: flex !important;            /* переопределяем grid */
    gap: 14px;
    padding: 10px 16px;
    margin: 0 -16px;                      /* растягиваем до краёв контейнера */
    overflow-x: auto;                     /* ВАЖНО: горизонтальный скролл */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .ti-social .stories-grid::-webkit-scrollbar{ display:none; }

  .ti-social .story-card{
    flex: 0 0 78%;                        /* ширина карточки */
    height: 120vw;
    scroll-snap-align: start;
    transform: none;                      /* отключаем «ступеньки» */
  }
  .ti-social .story-card img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Прогресс-ползунок */
  .ti-social .stories-progress.is-slider{
    position: relative;
    width: min(340px, 64%);
    height: 14px;
    margin: 12px auto 0;
    touch-action: none;
  }
  .ti-social .stories-progress.is-slider .rail{
    position:absolute; left:0; right:0; top:50%;
    height:4px; transform:translateY(-50%);
    background: rgba(0,0,0,.15);
    border-radius: 999px;
  }
  .ti-social .stories-progress.is-slider .thumb{
    position:absolute; top:50%;
    width:64px; height:6px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:#111;
  }
  .ti-social .stories-progress.is-slider .thumb.is-drag{ opacity:.95; }
}
@media (max-width: 480px){
  /* safety для stories (если отключишь snap) */
  .stories-grid{grid-template-columns:1fr;}
  .story-card{height:72vw;}

  .ti_img{width:20%; top:7%;left:2%;}
  .btn-light{width:40%;font-size: 14px;text-align: center;}
  .ti_cta_img{width:25%; top:7%; left:4%;}
  .row_cta_1{padding-left:15%;}
  .row_cta_2{padding-left:30%;}
  .ti-btn-dark,.btn-tiyellow{width:80%;}
  .ti-retail__btn{width:100%; display:block;}
  .btn-tiyellow{font-size: 14px;}
.row_2>img{width: 22%;}
.ti-hero__bg{background: var(--hero-bg-mobile);background-size: cover;background-position: bottom;}
.ti-hero{min-height: 63vh;}
.ti-title{font-weight: 500; font-size: clamp(26px, 4.1vw, 64px);}
.ti-btn-dark{
  font-size: 14px;
}
.img_mob_ti{
  width: 21%;
}
.img_arrow_mob{
  width: 60%;
  top:7%;
}
.eng{
  top: 6%;
}
.row_mob1,
.row_mob2,
.row_mob3,
.row_mob4{
font-family: 'hagrid',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 52px;
line-height: 52px;
/* identical to box height, or 100% */
letter-spacing: -0.02em;
}
.row_mob1{
  padding-left:36% ;
}
.row_mob2{
   padding-left:65% ;
}
.eng_title1{
  padding-left: 63%;
}
.eng_title2{
  padding-left: 28%;
}

.btn-tiyellow_END{
   padding:0px ;
}
}
/* ===== sticky-левая колонка "Про компанію" ===== */
.ti-about, .ti-about .container, .ti-about .row, .ti-about .col-lg-5{
  overflow: visible !important;  /* sticky/полифилл не работают если overflow не visible */
}

.about-sticky{
  position: sticky;
  top: calc(var(--header-h, 70px) + 16px);
  align-self: flex-start;
  will-change: transform;
}

/* на мобильных не липнем */
@media (max-width: 991.98px){
  .about-sticky{ position: static; transform: none !important; }
}
.swiper-wrapper{
  width: auto!important;
}