:root{--black:#0d1218;--dark:#151c24;--yellow:#ffd22e;--text:#111827;--muted:#6b7280;--bg:#f5f6f8;--white:#fff}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:var(--black);color:#fff;position:sticky;top:0;z-index:10}.logo{font-weight:900;display:flex;gap:9px;align-items:center}.logo small{display:block;font-size:10px;color:#aab2bd;font-weight:600}.logo-mark{color:var(--yellow);font-size:30px}.nav{display:flex;gap:32px;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:8px;font-weight:800;border:1px solid transparent}.btn-yellow{background:var(--yellow);color:#111}.btn-dark{background:#141b24;color:#fff;border-color:#3a4654;}



/* === BLOCK: HERO SECTION === */

/* === BLOCK: HERO SECTION === */

.hero {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  color: #fff;
  padding: 100px 6vw;
  background-color: #0d1218;
  background-image: url("assets/hero-bg.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}


.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,210,46,.28),transparent 25%),linear-gradient(transparent,rgba(0,0,0,.45));}.hero-content{position:relative;max-width:610px;z-index:2}.eyebrow{font-size:13px;font-weight:900;color:var(--yellow);letter-spacing:.04em}.center{text-align:center}.hero h1{font-size:46px;line-height:1.02;margin:18px 0}.hero h1 span{color:var(--yellow)}.lead{font-size:20px;line-height:1.55;color:#e6e9ed;max-width:540px}.hero-actions{display:flex;gap:16px;margin:34px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}.stats b{display:block;font-size:18px}.stats small{font-size:11px;text-transform:uppercase;color:#cad0d6}.hero-product{position:absolute;right:4vw;top:105px;width:48vw;max-width:760px;z-index:1;filter:drop-shadow(0 40px 55px rgba(0,0,0,.5))}.trust{display:flex;gap:45px;align-items:center;justify-content:center;padding:24px 6vw;background:#fff;color:#8a8f98;flex-wrap:wrap}.trust span{font-size:12px;font-weight:800;color:#111;max-width:180px;text-transform:uppercase}.trust b{font-size:22px;color:#a4a8af}main{background:#fff}.section{padding:64px 6vw}.section h2{font-size:38px;text-align:center;margin:8px 0 32px}.cards{display:grid;gap:28px}.four{grid-template-columns:repeat(4,1fr)}


.card{background:#FFFFFF;border-radius:14px; padding: 2px 2px 2px 2px;box-shadow:0 10px 25px rgba(0,0,0,.04)}














/* === FIX: limit old card images === */
.product-card > img {
  width: 100%;
  height: 320px;
  object-fit: contain;
}

.card2 img {
  width: 100%;
  height: 320px;
  object-fit: contain;
}

.card img {
  transition: transform 0.6s ease;
}

.card:hover img {
  transform: scale(1.25) translateY(-5px);
}


.icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.icons div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icons svg {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  stroke-width: 1.7;
}

.icons span {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #333;
  font-weight: 500;
}







.premium-flow {
  padding: 90px 5vw;
  background: #fff;
  text-align: center;
}

.premium-flow .eyebrow {
  color: #6f7f52;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.premium-flow h2 {
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
  margin: 0 0 18px;
  color: #101827;
}

.flow-lead {
  max-width: 620px;
  margin: 0 auto 70px;
  color: #5b6472;
  font-size: 18px;
  line-height: 1.6;
}

.flow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
  max-width: 1180px;
  margin: 0 auto 70px;
}

.flow-steps::before {
  content: "";
  position: absolute;
  top: 58px;
  left: 13%;
  right: 13%;
  height: 2px;
  background: #d8d8d8;
  z-index: 0;
}

.flow-steps article {
  position: relative;
  z-index: 1;
}

.flow-icon {
  width: 116px;
  height: 116px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 55%, #f6f1e6 100%);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  border: 1px solid #efe7d4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.flow-icon::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px dashed #78935b;
  opacity: .65;
}

.flow-icon svg {
  width: 52px;
  height: 52px;
  stroke: #6f7f52;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-num {
  position: absolute;
  top: 48px;
  right: -26px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f8c51c;
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 8px 18px rgba(248,197,28,.35);
}

.flow-steps article:last-child .flow-num {
  display: none;
}

.flow-steps h3 {
  font-size: 22px;
  margin: 0 0 12px;
  color: #101827;
}

.flow-steps p {
  color: #5b6472;
  font-size: 15px;
  line-height: 1.55;
  max-width: 250px;
  margin: 0 auto;
}

.flow-trust {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px;
  border: 1px solid #ececec;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fffdf7);
  box-shadow: 0 20px 50px rgba(0,0,0,0.05);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.flow-trust div {
  padding: 10px 18px;
  border-right: 1px solid #e7e7e7;
}

.flow-trust div:last-child {
  border-right: none;
}

.flow-trust svg {
  width: 38px;
  height: 38px;
  stroke: #6f7f52;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 12px;
}

.flow-trust b {
  display: block;
  color: #101827;
  font-size: 16px;
  margin-bottom: 6px;
}

.flow-trust span {
  display: block;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.45;
}




@media (max-width: 1000px) {
  .flow-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 55px 30px;
  }

  .flow-steps::before,
  .flow-num {
    display: none;
  }

  .flow-trust {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow-trust div {
    border-right: none;
  }
}





@media (max-width: 600px) {
  .premium-flow {
    padding: 65px 20px;
  }

  .flow-steps {
    grid-template-columns: 1fr;
  }

  .flow-trust {
    grid-template-columns: 1fr;
  }
}








.dark-cta {
  padding: 80px 5vw;
  background: #fff;
}

.dark-cta-content {
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 360px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% 50%, rgba(250, 204, 21, .22), transparent 28%),
    linear-gradient(135deg, #101820 0%, #17222d 55%, #0b1118 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr .9fr .7fr;
  gap: 34px;
  align-items: center;
  padding: 56px 64px;
  box-shadow: 0 30px 70px rgba(0,0,0,.18);
}

.dark-copy .eyebrow {
  color: #facc15;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.dark-copy h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  margin: 0 0 18px;
}

.dark-copy p {
  color: #cbd5e1;
  font-size: 17px;
  line-height: 1.55;
  max-width: 520px;
}

.dark-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 38px;
}

.dark-benefits div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dark-benefits span {
  font-size: 28px;
  color: #facc15;
}

.dark-benefits b {
  font-size: 14px;
}

.dark-benefits small {
  color: #94a3b8;
  font-size: 12px;
}

.dark-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dark-form input,
.dark-form textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  color: #fff;
  padding: 15px 16px;
  font-size: 14px;
  outline: none;
}

.dark-form textarea {
  min-height: 110px;
  resize: vertical;
}

.dark-form input::placeholder,
.dark-form textarea::placeholder {
  color: #9ca3af;
}

.dark-form button {
  border: none;
  border-radius: 10px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #111;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: .3s;
}

.dark-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(250,204,21,.25);
}

.dark-product {
  width: 100%;
  max-width: 260px;
  justify-self: end;
  filter: drop-shadow(0 35px 45px rgba(0,0,0,.55));
}

@media (max-width: 1050px) {
  .dark-cta-content {
    grid-template-columns: 1fr;
    padding: 45px 35px;
  }

  .dark-product {
    justify-self: center;
    max-width: 240px;
  }

  .dark-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .dark-cta {
    padding: 50px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .dark-benefits {
    grid-template-columns: 1fr 1fr;
  }
}


.dark-cta-content {
  position: relative;
  overflow: hidden;

 background:
  url("assets/dark-cta-insoles.png") no-repeat right center,
  radial-gradient(circle at 80% 50%, rgba(250,204,21,0.15), transparent 35%),
  linear-gradient(135deg, #101820 0%, #17222d 55%, #0b1118 100%);
  background-size: 280px, auto, auto;
}








.small-cards article:nth-child(1) svg { stroke:#22c55e; }
.small-cards article:nth-child(2) svg { stroke:#3b82f6; }
.small-cards article:nth-child(3) svg { stroke:#f97316; }
.small-cards article:nth-child(4) svg { stroke:#facc15; }


.small-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.small-cards article {
  padding: 25px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.small-cards b {
  display: block;
  margin: 10px 0;
  font-size: 18px;
}

.small-cards h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.small-cards p {
  font-size: 13px;
  color: #666;
}

.icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: #111;
  fill: none;
  stroke-width: 1.6;
}


.card:nth-child(1) svg { stroke: #3b82f6; } /* orthopedic */
.card:nth-child(2) svg { stroke: #f97316; } /* sport */
.card:nth-child(3) svg { stroke: #2563eb; } /* gel */
.card:nth-child(4) svg { stroke: #9ca3af; } /* memory */


.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card h3,
.card p {
  text-align: center;
}

.card p {
  min-height: 42px;
}


.card span{display:inline-block;background:var(--yellow);padding:9px 12px;border-radius:6px;font-weight:800;font-size:12px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}

.compact{padding-top:30px}.visual img{width:100%;border-radius:16px}
.copy h2{text-align:left;margin-top:8px}.checklist{list-style:none;padding:0;margin:0 0 28px}.checklist li{margin:12px 0;color:#2c3642}.checklist li:before{content:'✓';color:#c49700;font-weight:900;margin-right:10px}.small-cards article{background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:24px;box-shadow:0 10px 20px rgba(0,0,0,.04)}.small-cards b{color:var(--yellow);font-size:22px}.small-cards p{color:var(--muted)}.dark-band{background:var(--black);color:#fff;padding:52px 6vw}.dark-band h2{font-size:36px;margin:0 0 34px}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}.metrics b{display:block;font-size:26px;color:var(--yellow)}.metrics span{color:#c8ced6}

.factory-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.factory-grid img{width:100%;height:100%;object-fit:cover;border-radius:14px;background:#f1f3f6}


.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;background:linear-gradient(110deg,#0d1218,#202a36);color:#fff;padding:70px 6vw}
.contact h2{font-size:40px;margin:0 0 12px}.contact p{color:#cbd3dc}.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:15px 14px;border-radius:8px;border:1px solid #445060;background:#111923;color:#fff}.lead-form textarea{grid-column:1/-1;min-height:105px}.lead-form button{grid-column:1/-1;border:0;font-size:16px}@media(max-width:900px){
.nav{display:none}.hero{padding:70px 24px}.hero h1{font-size:42px}.hero-product{position:relative;width:100%;right:auto;top:auto;margin-top:30px}
.stats,.four,.split,.metrics,.contact,.lead-form{grid-template-columns:1fr}.trust{justify-content:flex-start}.topbar{padding:0 20px}.section{padding:48px 22px}.hero-actions{flex-direction:column}

.factory-grid{grid-template-columns:1fr}.factory-grid img:first-child{height:280px;}}







.factory-premium {
  padding: 90px 5vw;
  background: #fff;
}

.factory-wrap {
  max-width: 1280px;
  margin: 0 auto;
}

.factory-title {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 45px;
}

.factory-title span {
  display: block;
  color: #d6a900;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 6px;
  margin-bottom: 14px;
}

.factory-title h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  color: #111827;
  margin: 0 0 22px;
}

.factory-title p {
  color: #5b6472;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.factory-hero {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.12);
}

.factory-hero img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.factory-hero:hover img {
  transform: scale(1.03);
}

.factory-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 52px;
}

.factory-feature {
  text-align: center;
  padding: 0 34px;
  border-right: 1px solid #e5e7eb;
}

.factory-feature:last-child {
  border-right: none;
}

.factory-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eef0f3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 35px rgba(0,0,0,0.06);
}

.factory-icon svg {
  width: 32px;
  height: 32px;
  stroke: #d6a900;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.factory-feature h3 {
  font-size: 18px;
  color: #111827;
  margin: 0 0 10px;
}

.factory-feature p {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

/* MOBILE */
@media (max-width: 900px) {
  .factory-premium {
    padding: 65px 20px;
  }

  .factory-title {
    margin-bottom: 32px;
  }

  .factory-title span {
    font-size: 12px;
    letter-spacing: 4px;
  }

  .factory-title h2 {
    font-size: 34px;
  }

  .factory-title p {
    font-size: 16px;
  }

  .factory-hero img {
    height: 260px;
  }

  .factory-features {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 38px;
  }

  .factory-feature {
    border-right: none;
    padding: 0 10px;
  }
}














.premium-cta {
  padding: 80px 5vw;
  background: #fff;
}

.premium-cta-box {
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  min-height: 420px;
  margin: 0 auto;
  padding: 64px;
  border-radius: 30px;
  color: #fff;

  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;

  background-image:
    linear-gradient(90deg, rgba(10,15,22,.96) 0%, rgba(15,23,32,.90) 48%, rgba(15,23,32,.25) 72%),
    url("assets/dark-cta-insoles.png"),
    radial-gradient(circle at 78% 50%, rgba(250,204,21,.35), transparent 32%),
    linear-gradient(135deg, #101820 0%, #17222d 55%, #0b1118 100%);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  box-shadow: 0 35px 80px rgba(0,0,0,.22);
}

/* декоративная сетка */
.premium-cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 55%, rgba(250,204,21,.22), transparent 26%),
    repeating-radial-gradient(circle at 85% 50%, rgba(255,255,255,.08) 0 1px, transparent 1px 12px);
  opacity: .35;
  pointer-events: none;
}

/* эффект парения картинки */
.premium-cta-box::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 15%;
  width: 310px;
  height: 310px;
  background: url("assets/dark-cta-insoles.png") no-repeat center / contain;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55));
  animation: floatInsoles 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes floatInsoles {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-16px) rotate(1.5deg);
  }
}

.premium-cta-copy,
.premium-cta-form {
  position: relative;
  z-index: 3;
}

.cta-eyebrow {
  color: #facc15;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.premium-cta h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: .98;
  margin: 0 0 22px;
  max-width: 560px;
}

.premium-cta-copy p {
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1.55;
  max-width: 520px;
}

.cta-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.cta-benefits div {
  color: #e5e7eb;
  font-size: 16px;
  padding-top: 38px;
  position: relative;
}

.cta-benefits div::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #facc15;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.premium-cta-form {
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.premium-cta-form input,
.premium-cta-form textarea {
  width: 100%;
  padding: 15px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(8,13,20,.65);
  color: #fff;
  outline: none;
  font-size: 14px;
}

.premium-cta-form textarea {
  min-height: 110px;
  resize: vertical;
}

.premium-cta-form input::placeholder,
.premium-cta-form textarea::placeholder {
  color: #94a3b8;
}

.premium-cta-form button {
  border: none;
  border-radius: 10px;
  padding: 17px 22px;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #111;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  transition: .3s;
}

.premium-cta-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(250,204,21,.28);
}

@media (max-width: 1050px) {
  .premium-cta-box {
    grid-template-columns: 1fr;
    padding: 46px 34px;
    background:
      linear-gradient(180deg, rgba(10,15,22,.96), rgba(15,23,32,.88)),
      radial-gradient(circle at 80% 20%, rgba(250,204,21,.25), transparent 35%),
      #101820;
  }

  .premium-cta-box::after {
    opacity: .22;
    right: 2%;
    top: 6%;
  }

  .cta-benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .premium-cta {
    padding: 50px 20px;
  }

  .premium-cta-box {
    padding: 34px 22px;
  }
  
  
  .form-row {
    grid-template-columns: 1fr;
  }

  .premium-cta-form {
    padding: 18px;
  }
}









/* new*/







.cta-clean {
  padding: 80px 5vw;
  background: #fff;
}

.cta-box {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 50px;
  color: #fff;

  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 60px;
  align-items: center;

  background: url("assets/dark-cta-bg.png") no-repeat center / cover;
}

/* ТЕКСТ */

.cta-eyebrow {
  color: #facc15;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}


.cta-left h2 {
  font-size: clamp(34px, 5vw, 30px);
  line-height: 1;
  margin-bottom: 18px;
}

.cta-left p {
  color: #cbd5e1;
  font-size: 17px;
  max-width: 520px;
}

/* ПРЕИМУЩЕСТВА */

.cta-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 48px;
  margin-top: 34px;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: #e5e7eb;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.6s ease forwards;
}

/* задержка появления (ВАЖНО) */
.benefit:nth-child(1) { animation-delay: 0.1s; }
.benefit:nth-child(2) { animation-delay: 0.2s; }
.benefit:nth-child(3) { animation-delay: 0.3s; }
.benefit:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ИКОНКИ */
.benefit svg {
  width: 26px;
  height: 26px;
  stroke: #facc15;
  fill: none;
  stroke-width: 1.4;
  flex-shrink: 0;

  
  /* 🔥 ключ — мягкое свечение */
  filter: drop-shadow(0 0 6px rgba(250,204,21,0.25));
  transition: all 0.3s ease;
}

/* 🔥 hover эффект (дорогой) */
.benefit:hover svg {
  stroke: #ffd84d;
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(250,204,21,0.5));
}

/* текст тоже чуть реагирует */
.benefit:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

/* 🔥 subtle hover (дорого выглядит) */
.benefit:hover svg {
  transform: scale(1.05);
  stroke: #ffd84d;
  transition: 0.25s ease;
}


/* ФОРМА */

.cta-form {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.15);

  display: grid;
  gap: 12px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cta-form input,
.cta-form textarea {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.4);
  color: #fff;
}

.cta-form textarea {
  min-height: 100px;
}

.cta-form button {
  background: #facc15;
  color: #111;
  border: none;
  padding: 16px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

/* МОБИЛКА */

@media (max-width: 900px) {
  .cta-box {
    grid-template-columns: 1fr;
  }

  .row {
    grid-template-columns: 1fr;
  }
}



.cta-box {
  position: relative;
  animation: ctaFloat 6s ease-in-out infinite;
}

@keyframes ctaFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}









.metrics-pro {
  padding: 60px 5vw;
  background: linear-gradient(135deg, #0b1118, #17222d);
}

.metrics-container {
  max-width: 1280px;
  margin: 0 auto;
}

.metrics-pro h2 {
  color: #fff;
  margin-bottom: 40px;
  font-size: 28px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

.metric {
  text-align: center;
  color: #cbd5e1;
  transition: 0.3s;
}

.metric svg {
  width: 32px;
  height: 32px;
  stroke: #facc15;
  fill: none;
  stroke-width: 1.4;
  margin-bottom: 10px;

  filter: drop-shadow(0 0 6px rgba(250,204,21,0.3));
  transition: 0.3s;
}

.metric b {
  display: block;
  font-size: 22px;
  color: #facc15;
}

.metric span {
  font-size: 13px;
  opacity: 0.8;
}

/* 🔥 hover эффект */
.metric:hover {
  transform: translateY(-4px);
}

.metric:hover svg {
  filter: drop-shadow(0 0 12px rgba(250,204,21,0.6));
}




.metric {
  position: relative;
  text-align: center;
 
  
  padding: 26px 18px;
  border-radius: 16px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);

  transition: 0.3s;

}

/* 🔥 glow снизу */
.metric::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 60px;
  height: 20px;
  background: radial-gradient(circle, rgba(250,204,21,0.4), transparent 70%);
  filter: blur(8px);
}



.metric:hover {
  transform: translateY(-6px);
  border-color: rgba(250,204,21,0.4);
}

.metric:hover::after {
  opacity: 1;
}



.metric svg {
  filter: drop-shadow(0 0 6px rgba(250,204,21,0.25));
}

.metric b {
  color: #facc15;
  text-shadow: 0 0 8px rgba(250,204,21,0.35);
}

.metrics b {
  text-shadow: 0 0 10px rgba(250,204,21,0.3);
}


.metrics > div:hover {
  transform: translateY(-4px);
  transition: 0.3s;
}

.metrics {
  gap: 60px;
}

.metrics-pro {
  background:
    radial-gradient(circle at 20% 50%, rgba(250,204,21,0.05), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(250,204,21,0.05), transparent 40%),
    linear-gradient(135deg, #0b1118, #17222d);
}












.metrics-premium {
  padding: 70px 5vw;
  background: linear-gradient(135deg, #0b1118, #17222d);
}

.metrics-wrap {
  max-width: 1280px;
  margin: 0 auto;
}

.metrics-premium h2 {
  color: #fff;
  margin-bottom: 40px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* 🔥 карточка */
.metric-card {
  text-align: center;
  padding: 26px 18px;
  border-radius: 16px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);

  transition: 0.3s;
  position: relative;
}

/* glow внутри */
.metric-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;

  background: radial-gradient(circle at 50% 0%, rgba(250,204,21,0.15), transparent 60%);
  opacity: 0;
  transition: 0.3s;
}

/* иконка */
.metric-card .icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;

  border-radius: 50%;
  background: radial-gradient(circle, #facc15, transparent 70%);
  opacity: 0.9;
}

/* цифры */
.metric-card b {
  display: block;
  color: #facc15;
  font-size: 22px;
  margin-bottom: 4px;

  text-shadow: 0 0 10px rgba(250,204,21,0.4);
}

/* текст */
.metric-card span {
  font-size: 13px;
  color: #cbd5e1;
}

/* 🔥 hover = премиум */
.metric-card:hover {
  transform: translateY(-6px);
  border-color: rgba(250,204,21,0.4);
}

.metric-card:hover::after {
  opacity: 1;
}



@media (max-width: 768px) {
  .metrics-premium {
    padding: 45px 20px;
  }

  .metrics-premium h2 {
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: 28px;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .metric-card {
    padding: 20px 12px;
    border-radius: 14px;
  }

  .metric-card b {
    font-size: 22px;
    line-height: 1.1;
  }

  .metric-card span {
    font-size: 12px;
    line-height: 1.25;
  }

  .metric-card .icon,
  .metric-card .icon svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 420px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}
























.products-premium {
  padding: 90px 2vw;
  background: #fff;
}

.products-wrap {
  max-width: 1480px;
  margin: 0 auto;
}

.products-head {
  text-align: center;
  margin-bottom: 48px;
}

.products-head span {
  color: #eab308;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.6px;
}

.products-head h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin: 12px 0 14px;
  color: #0f172a;
}

.products-head p {
  font-size: 18px;
  color: #64748b;
  margin: 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.product-card {
  position: relative;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 24px;
  padding: 12px 12px 12px;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
  transition: 0.35s ease;
  overflow: hidden;
}


.product-card img {

  padding: 0px;

}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14);
}

.product-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(234,179,8,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: #fffdf3;
}

.product-icon svg,
.product-tags svg,
.custom-icon svg {
  stroke: #eab308;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-icon svg {
  width: 30px;
  height: 30px;
}

.product-card h3 {
  font-size: 22px;
  color: #0f172a;
  margin: 0 0 8px;
}

.product-card h3::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  background: #eab308;
  margin-top: 14px;
  border-radius: 10px;
}

.product-card p {
  color: #475569;
  font-size: 15px;
  line-height: 1.45;
  min-height: 44px;
  margin: 22px 0 20px;
}

.product-card img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  display: block;

  transition: 0.35s ease;
}

.product-card:hover img {
  transform: scale(1.04);
}

.product-tags {
  border-top: 1px solid #e5e7eb;
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.product-tags div {
  text-align: center;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.product-tags svg {
  width: 26px;
  height: 26px;
  display: block;
  margin: 0 auto 7px;
}



















.custom-strip {
  margin: 58px auto 0;
  max-width: 960px;
  padding: 26px 34px;
  border-radius: 22px;
  border: 1px solid rgba(234,179,8,0.3);
  background: linear-gradient(135deg, #fff, #fffdf0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 18px 50px rgba(15,23,42,0.06);
}

.custom-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.custom-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(234,179,8,0.35);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-icon svg {
  width: 34px;
  height: 34px;
}

.custom-strip h3 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #0f172a;
}

.custom-strip p {
  margin: 0;
  color: #64748b;
  font-size: 15px;
}

.custom-btn {
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #111827;
  text-decoration: none;
  font-weight: 900;
  padding: 17px 30px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(250,204,21,0.28);
  transition: 0.3s ease;
}

.custom-btn:hover {
  transform: translateY(-3px);
}




















@media (max-width: 1000px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .products-premium {
    padding: 65px 20px;
  }

  .products-head {
    margin-bottom: 34px;
  }

  .products-head h2 {
    font-size: 34px;
  }

  .products-head p {
    font-size: 15px;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-card {
    padding: 24px 22px;
  }

  .product-card img {
    height: 230px;
  }

  .custom-strip {
    flex-direction: column;
    text-align: center;
    padding: 26px 22px;
  }
}
  
  
  
  
  
  
  /* === BLOCK: IPF PRODUCTS v3 FINAL === */

.ipf-products,
.ipf-products * {
  box-sizing: border-box;
}

.ipf-products {
  width: 100%;
  padding: 80px 24px;
  background: #fbfbfb;
  color: #151c24;
}

.ipf-container {
  max-width: 1280px;
  margin: 0 auto;
}

.ipf-head {
  text-align: center;
  margin-bottom: 52px;
}

.ipf-head span {
  display: block;
  color: #d98a18;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  margin-bottom: 12px;
}

.ipf-head h2 {
  margin: 0;
  font-size: 48px;
  line-height: 1.08;
  font-weight: 800;
}

.ipf-head p {
  margin: 14px 0 0;
  color: #6b7280;
  font-size: 16px;
}

.ipf-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.ipf-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 24px;
  padding: 28px 22px 22px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.05);
}

.ipf-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.ipf-card p {
  margin: 0;
  color: #5f6772;
  font-size: 14px;
  line-height: 1.55;
}

/* === BLOCK: IPF SLIDER v3 FINAL === */

.ipf-slider {
  position: relative !important;
  width: 100% !important;
  height: 300px !important;
  margin: 26px 0 18px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.ipf-viewport {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.ipf-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform .35s ease !important;
  will-change: transform;
}

.ipf-track img {
  display: block !important;
  flex: 0 0 100% !important;
  min-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
}

/* убирает старый hover zoom сайта */
.ipf-card:hover .ipf-track img,
.ipf-products .ipf-card:hover img {
  transform: none !important;
}

.ipf-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
  color: #111827 !important;
  cursor: pointer !important;
  font-size: 26px !important;
  line-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ipf-prev {
  left: 12px !important;
}

.ipf-next {
  right: 12px !important;
}

@media (max-width: 1100px) {
  .ipf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ipf-products {
    padding: 56px 16px;
  }

  .ipf-head h2 {
    font-size: 34px;
  }

  .ipf-grid {
    grid-template-columns: 1fr;
  }

  .ipf-slider {
    height: 260px !important;
  }
}
  
  
  
  
  
  
  
.cta-form input::placeholder,
.cta-form textarea::placeholder {
    color: rgba(255,255,255,0.65);
    font-size: 16px;
}
  
  
  
  
  



/* === FIX: limit old card images === */
.product-card > img {
  width: 100%;
  height: 320px;
  object-fit: contain;
}