/* ============================================================
   WINT TECHNOLOGY — PREMIUM ENHANCEMENT LAYER (enhance.css)
   Additive only. Brand: navy + blue-steel, restrained gold accents.
   ============================================================ */
:root{
  --wt-gold:var(--c-gold);
  --wt-gold-soft:#ffd56b;
  --wt-blue:#2563EB;
  --wt-cyan:#06B6D4;
  --wt-navy:#0F172A;
  --wt-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 1. SCROLL PROGRESS BAR ---------- */
.wt-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--wt-blue),var(--wt-cyan) 55%,var(--wt-gold));
  z-index:9999; box-shadow:0 0 12px rgba(37,99,235,.6);
  transition:width .08s linear;
}

/* ---------- 2. HERO: ambient aura + entrance ---------- */
.hero{ overflow:hidden; }
.hero > *:not(.wt-hero-aura){ position:relative; z-index:2; }
.wt-hero-aura{
  position:absolute; inset:-30% -10% -30% -10%; z-index:1; pointer-events:none;
  background:
    radial-gradient(38% 50% at 18% 30%, rgba(37,99,235,.55), transparent 70%),
    radial-gradient(34% 46% at 78% 22%, rgba(6,182,212,.40), transparent 72%),
    radial-gradient(30% 40% at 62% 82%, rgba(240,180,41,.30), transparent 70%);
  filter:blur(8px); opacity:.0;
  animation:wt-aura-in 1.2s var(--wt-ease) .15s forwards;
}
@media (prefers-reduced-motion: no-preference){
  .wt-hero-aura{ animation:wt-aura-in 1.2s var(--wt-ease) .15s forwards, wt-aura-drift 18s ease-in-out 1.4s infinite; }
}
@keyframes wt-aura-in{ to{ opacity:.9; } }
@keyframes wt-aura-drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%{ transform:translate3d(2%,-2%,0) scale(1.06); }
  66%{ transform:translate3d(-2%,1.5%,0) scale(1.03); }
}
/* subtle engineered grid texture over the hero */
.wt-hero-aura::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 100% at 70% 30%,#000 0%,transparent 75%);
          mask-image:radial-gradient(120% 100% at 70% 30%,#000 0%,transparent 75%);
}

/* hero entrance — staggered fade up */
.hero h1, .hero > p, .hero .hero-sub, .hero .hero-stats-row, .hero .hero-btns{
  opacity:0; transform:translateY(22px);
  animation:wt-rise .8s var(--wt-ease) forwards;
}
.hero h1{ animation-delay:.10s; }
.hero > p{ animation-delay:.22s; }
.hero .hero-sub{ animation-delay:.32s; }
.hero .hero-stats-row{ animation-delay:.44s; }
.hero .hero-btns{ animation-delay:.56s; }
@keyframes wt-rise{ to{ opacity:1; transform:translateY(0); } }

/* gold shimmer sweep on the highlighted word "под ключ" */
.hero h1 span{
  background:linear-gradient(100deg,var(--wt-gold) 0%,var(--wt-gold-soft) 30%,#fff 48%,var(--wt-gold-soft) 66%,var(--wt-gold) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@media (prefers-reduced-motion: no-preference){
  .hero h1 span{ animation:wt-shimmer 4.5s linear 1s infinite; }
}
@keyframes wt-shimmer{ 0%{background-position:200% 0;} 100%{background-position:-50% 0;} }

/* hero stat numbers — gold gradient + tabular alignment while counting */
.hero .h-stat-inline strong{
  background:linear-gradient(180deg,#fff, #cfe0ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.hero .h-stat-inline.wt-num-gold strong{
  background:linear-gradient(180deg,var(--wt-gold-soft),var(--wt-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- 3. SCROLL REVEAL (sections, headings, cards) ---------- */
.wt-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--wt-ease), transform .7s var(--wt-ease); will-change:opacity,transform; }
.wt-reveal.wt-in{ opacity:1; transform:none; }
.wt-reveal-d1{ transition-delay:.08s; }
.wt-reveal-d2{ transition-delay:.16s; }
.wt-reveal-d3{ transition-delay:.24s; }

/* animated accent underline under section headings */
.wt-uline{ position:relative; }
.wt-uline::after{
  content:""; position:absolute; left:0; bottom:-10px; height:3px; width:0;
  background:linear-gradient(90deg,var(--wt-blue),var(--wt-gold));
  border-radius:3px; transition:width .9s var(--wt-ease) .15s;
}
.wt-uline.wt-in::after{ width:74px; }

/* ---------- 4. SHOP CARDS: entrance stagger + premium hover ---------- */
@keyframes wt-card-in{ from{opacity:0; transform:translateY(18px) scale(.985);} to{opacity:1; transform:none;} }
#shopGrid > *.wt-card-anim{ animation:wt-card-in .55s var(--wt-ease) both; }

#shopGrid > *{
  transition:transform .35s var(--wt-ease), box-shadow .35s var(--wt-ease), border-color .35s var(--wt-ease);
  will-change:transform;
}
#shopGrid > *:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -16px rgba(15,23,42,.35), 0 0 0 1px rgba(37,99,235,.25);
  border-color:rgba(37,99,235,.45) !important;
}
/* sheen sweep across card on hover */
#shopGrid > *{ position:relative; overflow:hidden; }
#shopGrid > *::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg); pointer-events:none; transition:left .65s var(--wt-ease); z-index:3;
}
#shopGrid > *:hover::after{ left:140%; }

/* ---------- 5. BUTTONS: sheen + gold CTA glow ---------- */
.btn-primary, .btn-find, .btn-outline{ position:relative; overflow:hidden; transition:transform .25s var(--wt-ease), box-shadow .25s var(--wt-ease), filter .25s; }
.btn-primary:hover, .btn-find:hover, .btn-outline:hover{ transform:translateY(-2px); }
.btn-primary::after, .btn-find::after{
  content:""; position:absolute; inset:0; left:-130%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); transition:left .6s var(--wt-ease);
}
.btn-primary:hover::after, .btn-find:hover::after{ left:130%; }
.btn-primary{ box-shadow:0 8px 22px -10px rgba(37,99,235,.7); }
.btn-primary:hover{ box-shadow:0 14px 30px -10px rgba(37,99,235,.85), 0 0 0 1px rgba(240,180,41,.5); }

/* magnetic helper (JS adds translation via custom props) */
.wt-magnetic{ transition:transform .2s var(--wt-ease); }

/* ---------- 6. BRANDS MARQUEE: edge fade mask ---------- */
#brandsMarquee{ position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
                mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }

/* ---------- 7. BACK TO TOP ---------- */
.wt-top{
  position:fixed; right:20px; bottom:88px; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:linear-gradient(145deg,var(--wt-navy),#1e3a8a); color:#fff; font-size:20px; line-height:1;
  border:1px solid rgba(240,180,41,.55); box-shadow:0 10px 26px -10px rgba(15,23,42,.6);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .3s var(--wt-ease), transform .3s var(--wt-ease), box-shadow .3s; z-index:9000;
}
.wt-top.wt-show{ opacity:1; transform:none; pointer-events:auto; }
.wt-top:hover{ box-shadow:0 14px 30px -10px rgba(37,99,235,.7), 0 0 0 2px rgba(240,180,41,.4); }

/* ---------- 8. fine grain overlay for depth ---------- */
.wt-grain{
  position:fixed; inset:0; z-index:8000; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero h1, .hero > p, .hero .hero-sub, .hero .hero-stats-row, .hero .hero-btns{ opacity:1; transform:none; animation:none; }
  .wt-reveal{ opacity:1; transform:none; transition:none; }
  .hero h1 span{ animation:none; }
  #shopGrid > *.wt-card-anim{ animation:none; }
  .wt-hero-aura{ animation:wt-aura-in .01s forwards; }
}

/* ---------- 9. LOGISTICS REGIONAL ICONS (China/Europe/СНГ) ---------- */
.log-icon{ position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
           transition:transform .35s var(--wt-ease), box-shadow .35s var(--wt-ease); }
.log-icon.china { background:linear-gradient(150deg,#ffffff,#ffeceb 78%); box-shadow:inset 0 0 0 1px rgba(224,49,49,.16); }
.log-icon.europe{ background:linear-gradient(150deg,#ffffff,#e8efff 78%); box-shadow:inset 0 0 0 1px rgba(37,99,235,.16); }
.log-icon.sng   { background:linear-gradient(150deg,#ffffff,#e6fbff 78%); box-shadow:inset 0 0 0 1px rgba(6,182,212,.18); }
.wt-log-svg{ display:block; }

.log-card:hover .log-icon{ transform:translateY(-2px); }
.log-card:hover .log-icon.china { box-shadow:inset 0 0 0 1px rgba(224,49,49,.34), 0 9px 20px -11px rgba(224,49,49,.5); }
.log-card:hover .log-icon.europe{ box-shadow:inset 0 0 0 1px rgba(37,99,235,.38), 0 9px 20px -11px rgba(37,99,235,.55); }
.log-card:hover .log-icon.sng   { box-shadow:inset 0 0 0 1px rgba(6,182,212,.38), 0 9px 20px -11px rgba(6,182,212,.55); }

@media (prefers-reduced-motion: no-preference){
  .log-icon.china .wt-log-svg { animation:wt-bob 3.4s ease-in-out infinite; }
  .log-icon.europe .wt-log-svg{ animation:wt-bob 3.8s ease-in-out infinite; }
  .log-icon.sng .wt-log-svg   { animation:wt-bob 4s ease-in-out infinite; }
  .wt-wave  { animation:wt-wpulse 2.8s ease-in-out infinite; }
  .wt-wave2 { animation:wt-wpulse 2.8s ease-in-out .5s infinite; }
  .wt-rail  { animation:wt-rail-move 1.1s linear infinite; }
}
@keyframes wt-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.4px); } }
@keyframes wt-wpulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes wt-rail-move{ to{ stroke-dashoffset:-12; } }

/* ---------- 10. LOGISTICS CARD COVER PHOTOS ---------- */
.log-photo{
  position:relative; height:168px; margin-bottom:1.15rem; border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg,#0f172a,#1e3a8a);
  box-shadow:0 8px 20px -12px rgba(15,23,42,.45);
}
.log-photo-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .65s var(--wt-ease);
}
.log-card:hover .log-photo-img{ transform:scale(1.09); }
.log-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(15,23,42,.34), transparent 46%);
}
@media (max-width:768px){ .log-photo{ height:150px; } }
@media (prefers-reduced-motion: reduce){ .log-photo-img{ transform:none; transition:none; } .log-card:hover .log-photo-img{ transform:none; } }

/* ---- v4: Tabler icons inside CTA buttons (replaces emoji) ---- */
.btn-primary i[class^="ti"],
.btn-find i[class^="ti"],
.btn-outline i[class^="ti"]{
  font-size: 1.05em;
  vertical-align: -2px;
  margin-right: 5px;
  line-height: 0;
}

/* ---- v4: WebP hero via image-set (JPEG stays as guaranteed fallback) ---- */
@supports (background-image: image-set(url('hero-bg.webp') type('image/webp'))) {
  .hero{
    background-image:
      linear-gradient(to right, rgba(15,23,42,.88) 0%, rgba(15,23,42,.80) 50%, rgba(15,23,42,.56) 80%, rgba(15,23,42,.52) 100%),
      linear-gradient(to bottom, rgba(15,23,42,.42) 0%, rgba(15,23,42,.10) 34%, rgba(15,23,42,0) 58%),
      image-set(url('hero-bg.webp') type('image/webp'), url('hero-bg.jpg') type('image/jpeg'));
  }
  @media(max-width:1023px){
    .hero{
      background-image:
        linear-gradient(to bottom, rgba(27,58,107,0.54) 0%, rgba(27,58,107,0.36) 100%),
        image-set(url('hero-bg.webp') type('image/webp'), url('hero-bg.jpg') type('image/jpeg'));
    }
  }
  @media(max-width:640px){
    .hero{
      background-image:
        linear-gradient(to bottom, rgba(27,58,107,0.70) 0%, rgba(27,58,107,0.48) 100%),
        image-set(url('hero-bg.webp') type('image/webp'), url('hero-bg.jpg') type('image/jpeg'));
    }
  }
}

/* ---- v4: homepage category SEO strip (links to /catalog/ landing pages) ---- */
.home-cat-strip{background:var(--c-navy);color:#94A3B8;padding:16px 2rem;display:flex;flex-wrap:wrap;
  justify-content:flex-start;position:static;gap:6px 16px;align-items:baseline;border-top:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.7}
.home-cat-strip-t{color:#fff;font-weight:700;margin-right:6px}
.home-cat-strip a{color:#cbd5e1;font-weight:500}
.home-cat-strip a:hover{color:var(--c-gold)}
@media(max-width:640px){ .home-cat-strip{padding:14px 1rem;font-size:12.5px} }

/* a11y: visible keyboard focus ring (site otherwise removes outlines) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible{
  outline:3px solid var(--c-blue,#2563EB);
  outline-offset:2px;
  border-radius:4px;
}

/* footer-bottom: запас по высоте строки, чтобы не обрезались нижние выносные элементы букв */
.footer-bottom{ line-height:1.6 !important; }