@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ===== Theme vars ===== */
:root{
  --primary-fade: hsla(41, 88%, 56%, 0.08);
  --primary-light: hsl(41, 88%, 61%);
  --primary: hsl(41, 88%, 56%);
  --primary-dark: hsl(41, 88%, 41%);

  --secondary-light: hsl(210, 35%, 98%);
  --secondary: hsl(210, 35%, 93%);
  --secondary-muted: hsl(210, 35%, 89%);

  --background: #fff;
  --inverse: hsl(207, 51%, 19%);
  --text-lighter: hsl(0, 0%, 28%);
  --text: hsl(0, 0%, 7%);
  --text-inverse: #fff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  --nav-h: 60px; /* фиксированная шапка */
}

/* ===== Reset / base ===== */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-snap-type:y mandatory; scroll-behavior:smooth; }
body{
  font-family:'Inter',sans-serif;
  background-color:var(--background);
  color:var(--text);
  overflow-x:hidden;
  padding-top: var(--nav-h); /* чтобы контент не прятался под шапкой */
}

/* ===== Fixed top navigation (добавлено) ===== */
.menu{
  position: fixed; inset: 0 auto auto 0; right: 0; top: 0;
  height: var(--nav-h);
  background: var(--background);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--secondary);
  box-shadow: var(--shadow);
  z-index: 1000;
}
.menu .logo{ font-weight:800; font-size:18px; color: var(--text); letter-spacing:-.01em; }
.menu-toggle{
  display:none; background:none; border:0; font-size:22px; color:var(--text); cursor:pointer;
}
.menu-list{
  list-style:none; display:flex; gap:18px; align-items:center;
}
.menu-list a{
  text-decoration:none; color:var(--text); font-weight:600; font-size:14px;
  padding:8px 10px; border-radius:10px; transition:color .2s, background .2s, transform .1s;
}
.menu-list a:hover{ color:var(--primary-dark); background: var(--secondary-light); }
.menu-list a:active{ transform: translateY(1px); }

@media (max-width: 900px){
  .menu-toggle{ display:block; }

  .menu-list{
    position: fixed;
    top: var(--nav-h);
    right: 0;
    height: 100vh;
    width: 240px;
    background: var(--background);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-left: 1px solid var(--secondary);
    box-shadow: var(--shadow);

    /* по умолчанию скрыто */
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .menu-list.open{
    transform: translateX(0);
  }

  .menu-list a{
    width: 100%;
    text-align: left;
  }
}


/* ===== Print button (добавлено) ===== */
.print-btn{
  position: fixed; right:20px; bottom:20px;
  background: var(--primary); color:#fff;
  border:0; border-radius:999px;
  padding:10px 16px; font-weight:700; font-size:14px;
  box-shadow: var(--shadow);
  cursor:pointer; z-index:1000;
}
.print-btn i{ margin-right:8px; }
.print-btn:hover{ background: var(--primary-dark); }
@media (max-width:680px){
  .print-btn{ right:12px; bottom:12px; padding:10px 14px; font-size:13px; }
}
@media print{
  .menu, .print-btn{ display:none !important; }
  body{ padding-top:0; }
}

/* ===== Base Slide Grid (из вашего файла) ===== */
.slide{
  width:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: clamp(16px,5vw,60px);
  scroll-snap-align:start;
  border-bottom:1px solid var(--secondary);
  background:var(--background);
  position:relative; isolation:isolate;
}
.slide::before{
  content:"";
  position:absolute;
  background: radial-gradient(1200px 400px at 20% 0%, var(--primary-fade), transparent 60%);
  z-index:-1;
}
.slide .content-box{ width:100%; max-width:1200px; animation: fadeIn .8s ease-out; }

h1{ font-size:clamp(32px,8vmin,72px); font-weight:800; color:var(--text); margin-bottom:.6em; letter-spacing:-.02em; }
h2{ font-size:clamp(24px,5vmin,48px); font-weight:700; color:var(--text); margin-bottom:.9em; line-height:1.15; text-align:center; letter-spacing:-.01em; }
h3{ font-size:clamp(18px,3vmin,28px); font-weight:600; color:var(--text); margin-bottom:.6em; }
p{ font-size:clamp(14px,2.2vmin,18px); color:var(--text-lighter); line-height:1.7; }

.accent{ color:hsl(36.19deg 80.83% 47.06%); }

@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideUp{ from{transform:translateY(40px); opacity:0;} to{transform:translateY(0); opacity:1;} }

/* ===== Title Slide ===== */
.slide-title{ text-align:center; }
/* fix: width вместо with */
.slide-title .logo{ width: 150px; margin-bottom: 2vh; animation: fadeIn 1s .2s ease-out backwards; }
.slide-title p{
  font-size:clamp(16px,3vmin,24px); font-weight:400; color:var(--text-lighter);
  animation: slideUp .8s .7s ease-out both; max-width:800px; margin:0 auto;
}
.slide-title h1{ animation: slideUp .8s .5s ease-out both; }

/* ===== Content Slides (Text + Image) ===== */
.slide-content{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(16px,5vmin,40px); }
.slide-content .text-content{ display:grid; align-content:center; gap:16px; }
.slide-content .text-content ul{ list-style:none; display:grid; gap:12px; padding-left:0; }
.slide-content .text-content li{
  display:grid; grid-template-columns:28px 1fr; align-items:start; gap:12px;
  font-size:clamp(13px,2vmin,18px); color:var(--text-lighter);
}
.slide-content .text-content li i{
  color:var(--primary-dark); font-size:18px; line-height:1.5; margin-top:3px; text-align:center;
}
.slide-content .image-content{ display:flex; justify-content:center; }
.slide-content .image-content img{
  width:100%; max-height:64vh; object-fit:cover; border-radius:18px; box-shadow:var(--shadow);
}

/* ===== Assortment & Process Slide ===== */
.device-slide .content-box{ display:grid; grid-template-rows:auto 1fr; gap:20px; }
.device-header{ text-align:center; }

.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.process .step{
  background:var(--secondary-light); border:1px solid var(--secondary);
  border-radius:14px; padding:14px; display:grid; gap:12px; align-items:start; text-align:left;
}
.process .num{
  background:var(--primary); color:#fff; width:32px; height:32px; border-radius:999px;
  display:inline-grid; place-items:center; font-weight:700; margin-bottom:8px;
}
.process h3{ font-size:18px; margin-bottom:4px; }

.images-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.images-grid .imgwrap{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--secondary);
  background:#fff; box-shadow:var(--shadow);
}
.images-grid img{ width:100%; height:28vh; object-fit:cover; display:block; transition:transform .4s ease; }
.images-grid .imgwrap:hover img{ transform:scale(1.03); }
.images-grid .imgwrap .caption{
  position:absolute; bottom:0; left:0; right:0;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  color:#fff; padding:20px 12px 12px; font-weight:600; font-size:14px;
}

/* ===== Statistics ===== */
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:center; }
.stat-item{
  background:rgba(255,255,255,.8); border:1px solid var(--secondary);
  padding:28px; border-radius:18px; box-shadow:var(--shadow);
}
.stat-item i{ font-size:clamp(28px,5vmin,48px); color:var(--primary); margin-bottom:12px; }
.stat-item .stat-number{ font-size:clamp(24px,4.5vmin,40px); font-weight:800; color:var(--primary-dark); margin-bottom:8px; letter-spacing:-.02em; }
.stat-item .stat-text{ font-size:clamp(13px,2vmin,18px); color:var(--text-lighter); line-height:1.5; }

/* ===== Gallery Slide ===== */
.gallery-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.gallery-grid .imgwrap{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--secondary);
  background:#fff; box-shadow:var(--shadow); aspect-ratio:1/1;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.gallery-grid .imgwrap:hover img{ transform:scale(1.05); }

/* ===== Requisites ===== */
.slide-requisites .content-box{
  display:grid; grid-template-columns:1fr 1.5fr; align-items:center; gap:clamp(18px,5vmin,40px);
}
.requisites-grid{
  display:grid; grid-template-columns:auto 1fr; gap:12px 18px;
  font-size:clamp(12px,1.8vmin,16px);
  background:rgba(255,255,255,.8); border:1px solid var(--secondary);
  padding:24px; border-radius:12px; box-shadow:var(--shadow);
}
.requisites-grid .label{ font-weight:600; color:var(--text-lighter); text-align:right; }
.requisites-grid .value{ font-weight:500; color:var(--text); }
.requisites-grid a{ color:var(--primary-dark); text-decoration:none; }

/* ===== Offer Slide (из вашего файла) ===== */
.slide-offer .offer-block{
  display:grid; grid-template-columns:36px 1fr; align-items:start; gap:14px;
  background:var(--secondary-light); border:1px solid var(--secondary);
  padding:16px 20px; border-radius:14px; box-shadow:var(--shadow); margin-bottom:16px;
}
.slide-offer .offer-block i{ color:var(--primary-dark); font-size:20px; margin-top:4px; }

/* ===== Responsive (из вашего файла + мелкие правки) ===== */
@media (max-width: 1024px){
  .slide-content,
  .slide-requisites .content-box{ grid-template-columns:1fr; text-align:center; }

  .slide-content .text-content li{ grid-template-columns:1fr; text-align:center; }
  .slide-content .text-content li i{ margin:0 auto 10px; }

  .process{ grid-template-columns:1fr 1fr; }
  .images-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 680px){
  .stats-grid{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
/* Language dropdown */
.lang-dropdown {
  position: relative;
}

.lang-toggle {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--text);
}

.lang-toggle i {
  font-size: 14px;
}

.lang-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--background);
  border: 1px solid var(--secondary);
  border-radius: 10px;
  box-shadow: var(--shadow);
  list-style: none;
  padding: 8px 0;
  margin: 4px 0 0;
  display: none;
  min-width: 140px;
  z-index: 2000;
}

.lang-menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}

.lang-menu li a:hover {
  background: var(--secondary-light);
  color: var(--primary-dark);
}

.lang-dropdown.open .lang-menu {
  display: block;
}