/*
Theme Name: cccb_theme
Theme URI: https://sfedu.ru
Author: Артём Орехов
Description: Тема сайта Центра компетенций циркулярных биоматериалов (ЮФУ / Академия им. Д. И. Ивановского)
Version: 1.0
*/

/* ---------- reset (Eric Meyer, сокращённый) ---------- */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,ul,li,form,label,footer,header,nav,section,figure,figcaption{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
*,*::before,*::after{box-sizing:border-box}
ul{list-style:none}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;background:none;border:0;cursor:pointer}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:30px}
body{-webkit-font-smoothing:antialiased}

/* ---------- переменные (цвета логотипа центра) ---------- */
:root{
  --paper:#FFFFFF;
  --paper_dim:#f9f9f9;
  --ink:#14231B;
  --ink_soft:#4B5A52;
  --forest:#1C5739;
  --forest_soft:#2E7350;
  --mint:#A8F7CE;
  --line:rgba(20,35,27,.12);
  --line_light:rgba(255,255,255,.22);
  --radius:10px;
  --radius-50:50px;
  --wrapper:1600px;
  --font:'Manrope',sans-serif;
}

body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
}

.wrapper{
  width:100%;
  max-width:var(--wrapper);
  margin:0 auto;
  padding:0 40px;
}

.flex{display:flex;flex-wrap:wrap}
.w25{flex:0 0 25%;max-width:25%}
.w33{flex:0 0 33.333%;max-width:33.333%}
.w40{flex:0 0 40%;max-width:40%}
.w45{flex:0 0 45%;max-width:45%}
.w50{flex:0 0 50%;max-width:50%}
.w60{flex:0 0 60%;max-width:60%}
.w66{flex:0 0 66.666%;max-width:66.666%}
.w70{flex:0 0 70%;max-width:70%}
.w75{flex:0 0 75%;max-width:75%}

.grid{display:grid}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}

h1,h2,h3{font-family:var(--font);font-weight:700}

.eyebrow{
  font-family:var(--font);
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--forest_soft);
}

/* ---------- тонкий разделитель секций ---------- */
.rule{height:1px;background:var(--line)}
.rule_accent{height:3px;background:linear-gradient(90deg,var(--forest) 0%,var(--mint) 100%)}

/* ---------- header ---------- */
.header{
	padding:20px 0;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:999;
	background:transparent;
	transition:background .25s, backdrop-filter .25s;
}
.header.fixed{
	background:rgba(255,255,255,.7);
	backdrop-filter:blur(16px) saturate(160%);
	-webkit-backdrop-filter:blur(16px) saturate(160%);
	border-bottom:1px solid rgba(255,255,255,.18);
	box-shadow: 0 2px 6px rgba(20, 35, 27, .04), 0 12px 28px rgba(20, 35, 27, .07);
}
.header_row{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.logo_link{
	position:relative;
}
.header_logo_white,
.header_logo{
	height:44px;
	width:auto;
	transition:all 0.5s
}
.header_logo{
	opacity:0
}
.header_logo_white{
	position:absolute;
	top:0;
	left:0;
}
.header_nav{display:flex;gap:32px}
.header_nav a{
  font-family:var(--font);
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper);
  transition:all 0.5s
}
.header.fixed .header_nav a{
  color:var(--ink_soft);
}
.header.fixed .header_logo{
	opacity:1
}
.header.fixed .header_logo_white{
	opacity:0
}
.header_nav a:hover{opacity:0.8}
.header_burger{display:none;width:28px;height:20px;position:relative;z-index:1000}
.header_burger span,.header_burger::before,.header_burger::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--paper);
  transition:transform .3s ease, opacity .2s ease, top .3s ease, bottom .3s ease, background-color .25s ease;
}
.header.fixed .header_burger span,
.header.fixed .header_burger::before,
.header.fixed .header_burger::after{
  background:var(--ink);
}
.header_nav.is-open ~ .header_burger span,
.header_nav.is-open ~ .header_burger::before,
.header_nav.is-open ~ .header_burger::after{
  background:var(--ink);
}
.header_burger span{top:9px}
.header_burger::before{top:0}
.header_burger::after{bottom:0}
.header_burger.is-active span{opacity:0}
.header_burger.is-active::before{top:9px;transform:rotate(45deg)}
.header_burger.is-active::after{bottom:9px;transform:rotate(-45deg)}


.rey45d{
	display:flex;
	flex-wrap:wrap
}
.language a{
	display:flex;
	flex-wrap:wrap;
	margin-left:40px;
	gap:8px;
	font-family: var(--font);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--paper);
    transition: all 0.5s;
}
.header.fixed .language a{
	color: var(--ink_soft);
}

/* ---------- hero ---------- */
.hero{
	width:100%;
	max-width:1800px;
    border-radius: 0 0 50px 50px;
    margin:auto;
	aspect-ratio:9/4;
	position:relative;
	display:flex;
	align-items:flex-end;
	overflow:hidden;
	background:var(--ink);
}
.hero_video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:0;
}
.hero_overlay{
	position:absolute;
	inset:0;
	z-index:1;
	background:linear-gradient(180deg, rgba(20,35,27,.25) 0%, rgba(20,35,27,.35) 50%, rgba(20,35,27,.85) 100%);
}
.hero_content{
	margin:-50px auto 0;
    display: table;;
	text-align:center;
	position:relative;
	z-index:2;
	.background: var(--paper_dim);
    .border-radius: var(--radius);
	background: var(--paper);
    border-radius: 30px;
    padding:25px 150px;
    .border: 1px solid transparent;
    .box-shadow: 0 2px 6px rgba(20, 35, 27, .04), 0 12px 28px rgba(20, 35, 27, .07);
}
.hero_eyebrow{margin-bottom:22px;color:var(--mint)}
.hero_title{
	font-size:clamp(28px,4.2vw,40px);
	line-height:1.3;
	color: var(--ink);
}
.hero_lede{
  font-size:18px;
  line-height:1.6;
  max-width:80ch;
}

/* ---------- о проекте ---------- */
.about{background:var(--paper);padding:100px 0}
.about_body{
	display:flex;
	grid-template-columns:45%;
	justify-content:space-between;
}
.about_col .eyebrow{color:var(--forest_soft);margin-bottom:18px;display:block}
.about_col h2{
	font-size:clamp(28px,3vw,42px);
	line-height:1.2;
	margin-bottom:32px;
}

.about_visual {
  position: relative;
  padding: 14px;  
  border-radius: 32px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
  box-shadow:
    0 24px 48px -16px rgba(30, 40, 60, 0.16),
    0 4px 12px rgba(30, 40, 60, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(150, 160, 180, 0.35),
    inset 0 0 0 1px rgba(170, 180, 200, 0.3);
}
.about_visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: linear-gradient(115deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 22%);
  pointer-events: none;
  z-index: 2;
}
.about_image {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(images/about_img.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.about_image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.about_col p{font-size:16px;line-height:1.7;margin-bottom:18px}
.about_approaches{
	display: inline-block;
    margin-top: 60px;
}
.approach_grid{gap:20px;margin-top:8px}
.approach_item{
	text-align:center;
	display:flex;
	flex-direction:column;
	gap:14px;
  max-width:120px;
}
.approach_tile{
	width:100%;
	position:relative;
	aspect-ratio:1/1;
	border-radius:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 32px rgb(147 180 237 / 8%), -3px -4px 10px rgb(191 191 191 / 10%), 4px 4px 12px rgb(231 231 231 / 10%), 0 0 8px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.1);
}
.approach_tile::before {
	content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0.10) 65%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.approach_icon{width:48px;height:48px;color:var(--forest_soft)}
.approach_item span{font-size:14px;line-height:1.4}

/* ---------- ключевые подходы: слайдер (только .tyt-версия для мобилки/планшета) ---------- */
.approach_slider{
	position:relative;
	width:100%;
}
.approach_slider .swiper{
	overflow:hidden;
	margin:8px -28px 0;
	padding:2px 28px 10px;
}
.approach_slider .swiper-slide{
	width:110px;
}
.approach_slider .approach_item{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:14px;
	max-width:none;
}

/* ---------- Swiper: только используемые части (ядро + fade + служебное для навигации) ----------
   Взято из исходных модулей swiper@11 (swiper.css / modules/effect-fade.css / modules/navigation.css),
   без CDN — оформление кнопок и слайдов везде своё, ниже. */
.swiper{
	margin-left:auto;
	margin-right:auto;
	position:relative;
	overflow:hidden;
	list-style:none;
	padding:0;
	z-index:1;
	display:block;
}
.swiper-wrapper{
	position:relative;
	width:100%;
	height:100%;
	z-index:1;
	display:flex;
	transition-property:transform;
	box-sizing:content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper{
	transform:translate3d(0px,0,0);
}
.swiper-horizontal{touch-action:pan-y}
.swiper-slide{
	flex-shrink:0;
	width:100%;
	height:100%;
	position:relative;
	transition-property:transform;
	display:block;
}
.swiper-slide-invisible-blank{visibility:hidden}

/* effect: 'fade' */
.swiper-fade .swiper-slide{
	pointer-events:none;
	transition-property:opacity;
}
.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}
.swiper-fade .swiper-slide-active{pointer-events:auto}
.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}

/* навигация — только служебные классы, оформление кнопок ниже своё */
.swiper-button-disabled{
	opacity:0.35;
	cursor:auto;
	pointer-events:none;
}
.swiper-button-lock{display:none}

.about_image .swiper,
.about_image .swiper-slide{
	width:100%;
	height:100%;
}
.about_image .swiper-slide{
	background-size:cover;
	background-position:center;
}

.about_image .swiper-button-prev,
.about_image .swiper-button-next{
	cursor:pointer;
	width:60px;
	height:60px;
	border-radius:50%;
	background:
		radial-gradient(circle at 30% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 45%),
		linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.01) 60%, rgba(255,255,255,0.1) 100%),
		rgba(255,255,255,0.04);
	backdrop-filter: url(#liquid_glass_distort) blur(1px) saturate(180%) brightness(1.04);
	-webkit-backdrop-filter: blur(9px) saturate(160%);
	box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    inset 0 -6px 10px -4px rgba(0,0,0,0.16),
    inset 0 1px 1px rgba(255,255,255,.3);
	position:absolute;
	bottom:30px;
	right:30px;
	isolation:isolate;
	z-index:9;
}
.about_image .swiper-button-prev::before,
.about_image .swiper-button-next::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	padding:1px;
	background:conic-gradient(from 215deg at 50% 50%,
		rgba(255,255,255,.65) 0deg,
		rgba(255,255,255,0) 40deg,
		rgba(255,255,255,0) 170deg,
		rgba(255,255,255,.3) 200deg,
		rgba(255,255,255,0) 235deg,
		rgba(255,255,255,0) 330deg,
		rgba(255,255,255,.65) 360deg);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events:none;
}
.petri{
	margin-bottom:20px;
	position:relative;
	width:100%;
	aspect-ratio: 1 / 1;
	border-radius:50%;
	isolation:isolate;
	filter:drop-shadow(0 17px 7px rgba(0, 0, 0, 0.10)) drop-shadow(0 11px 19px rgba(0, 0, 0, 0.25))
}
.petri::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:50%;
	background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95), rgba(255,255,255,.25) 20%, rgba(255,255,255,0) 40%),
    conic-gradient(from 210deg,
      rgba(255,255,255,.9) 0deg,
      rgba(255,255,255,.15) 45deg,
      rgba(255,255,255,.08) 140deg,
      rgba(255,255,255,.55) 190deg,
      rgba(255,255,255,.08) 240deg,
      rgba(255,255,255,.75) 320deg,
      rgba(255,255,255,.9) 360deg);
	box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 2px 3px rgba(255,255,255,.9),
    inset 0 -6px 10px -4px rgba(0,0,0,.18);
	pointer-events:none;
	z-index:2;
}
.petri_inner{
	position:absolute;
	inset:9px;
	border-radius:50%;
	overflow:hidden;
	background:#e9e9e4;
	box-shadow:
    inset 0 6px 12px rgba(0,0,0,.28),
    inset 0 -2px 5px rgba(0,0,0,.12);
	z-index:1;
	z-index:4;
}
.petri_content{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.about_image .swiper-button-prev{
	right:120px;
}
.about_image .swiper-button-prev::after,
.about_image .swiper-button-next::after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:16px;
	height:24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M16.292,26.775a1,1,0,0,1-.707-1.706l7.778-7.778L15.584,9.512A1,1,0,0,1,16.292,7.8.989.989,0,0,1,17,8.1l8.486,8.485a1,1,0,0,1,0,1.415L17,26.483A.993.993,0,0,1,16.292,26.775Z' transform='translate(-15.292 -7.805)' fill='%23fff'/%3E%3C/svg%3E%0A");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center right;
}
.about_image .swiper-button-prev::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M24.776,26.775a1,1,0,0,0,.707-1.706l-7.778-7.778,7.779-7.779A1,1,0,0,0,24.776,7.8a.99.99,0,0,0-.707.292l-8.486,8.485a1,1,0,0,0,0,1.415l8.485,8.485A.993.993,0,0,0,24.776,26.775Z' transform='translate(-15.292 -7.805)' fill='%23fff'/%3E%3C/svg%3E%0A");
	background-position:center left;
}


/* ---------- направления ---------- */
.directions{padding:100px 0;background:var(--paper_dim)}
.directions_head{margin-bottom:56px}
.directions_head h2{font-size:clamp(26px,2.6vw,38px);margin-top:18px;line-height:1.18}
.directions_grid{gap:24px}
.direction_card{
	background:var(--paper);
	border-radius:var(--radius-50);
	padding:45px;
	border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 32px rgb(147 180 237 / 8%), -3px -4px 10px rgb(191 191 191 / 10%), 4px 4px 12px rgb(231 231 231 / 10%), 0 0 8px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.1);
}
.direction_icon{
	width:38px;height:38px;
	color:var(--forest);
	margin-bottom:22px;
}
.direction_card h3{font-size:21px;font-weight:600;font-family:var(--font);margin-bottom:20px;line-height:1.3}
.direction_card p{font-size:16px;line-height:1.6;color:var(--ink_soft)}

/* ---------- видео ---------- */
.video{padding:64px 0 56px}
.video_title{font-size:clamp(22px,2vw,30px);line-height:1.25;max-width:20ch;margin-bottom:28px}
.video_frame{
  position:relative;
  aspect-ratio:16/7;
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--ink),var(--forest) 130%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.video_frame::before{
  content:"";
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg, transparent 0 38px, rgba(241,238,225,.05) 38px 39px);
}
.video_play{
  width:76px;height:76px;
  border-radius:50%;
  border:1px solid rgba(241,238,225,.5);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:background .2s, color .2s;
}
.video_play svg{width:30px;height:30px}
.video_play:hover{background:var(--forest_soft);border-color:var(--forest_soft);color:var(--ink)}

/* ---------- продуктовая линейка ---------- */
.products{padding:100px 0}
.products_head{max-width:640px;margin-bottom:40px}
.products_head h2{font-size:clamp(26px,2.6vw,38px);margin-top:18px;line-height:1.18}
.productline_group{margin-bottom:64px}
.productline_group:last-child{margin-bottom:0}
.productline_group_head{
  display:flex;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.productline_group_head h3{font-size:clamp(19px,1.6vw,24px);font-family:var(--font);margin-right:20px;max-width:50ch}
.productline_group_head p{font-size:14px;color:var(--ink_soft)}
.productline_grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
	justify-content: space-between;
	gap: 30px;
}
.productline_item{
	font-size: 21px;
    font-weight: 600;
    font-family: var(--font);
    line-height: 1.3;
	text-align:center;
}
.productline_item span{
	display:block;
	font-size:14px;
	font-weight:400;
	margin-top:5px;
	color:var(--ink_soft);
}

/* ---------- руководитель ---------- */
.lead{padding:100px 0;background: var(--paper_dim);}
.lead_grid{
	display:flex;
	grid-template-columns:45%;
	justify-content:space-between;
}
.lead_photo img{
	width:100%;
	height:auto;
	border-radius:var(--radius-50);
}
.lead_photo_initials{
  font-family:var(--font);
  font-size:96px;
  color:rgba(241,238,225,.16);
}
.lead_photo_tag{
  position:absolute;
  left:20px;bottom:20px;
  font-family:var(--font);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper);
  opacity:.6;
}
.lead_name{font-size:clamp(24px,2.2vw,32px);margin-top:20px;line-height:1.2}
.lead_role{
  font-family:var(--font);
  font-size:14px;
  color:var(--forest_soft);
  letter-spacing:.04em;
  margin-top:10px;
  margin-bottom:26px;
}
.lead_col p{font-size:16px;line-height:1.7;color:var(--ink_soft);margin-bottom:16px}
.lead_links{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap}
.lead_link{
	display:inline-block;
  font-family:var(--font);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:12px 20px;
  border:1px solid var(--ink_soft);
  border-radius:6px;
  transition:background .2s,color .2s;
}
.lead_link:hover{background:var(--ink_soft);color:var(--paper)}

/* ---------- команда ---------- */
.team{padding:100px 0}
.team_head{max-width:640px;margin-bottom:48px}
.team_head h2{font-size:clamp(26px,2.6vw,38px);margin-top:18px;line-height:1.18}
.team_grid{gap:28px 24px}
.team_card{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom:8px
}
.team_card .lead_link{
  margin-top: auto; /* съедает всё пустое место сверху, прижимая ссылку к низу */
  align-self: flex-start;
}
.team_avatar{
	position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 32px rgb(147 180 237 / 8%), -3px -4px 10px rgb(191 191 191 / 10%), 4px 4px 12px rgb(231 231 231 / 10%), 0 0 8px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.1);
	margin-bottom:30px;
}
.team_avatar img{
    border-radius: 30px;
}
.team_avatar_placeholder{
	width:38%;
	height:38%;
	color:var(--ink_soft);
	opacity:.35;
}
.team_card h4{font-size:16px;font-weight:600;font-family:var(--font);margin-bottom:15px;line-height:1.3}
.team_card_role{font-size:14px;color: var(--ink_soft);margin-bottom:16px;line-height:1.4}
.team_card_org{font-size:14px;color:var(--ink_soft);line-height:1.5}
.mt-50{
	margin-top:80px
}
/* ---------- публикации ---------- */
.publications{padding:100px 0;background:var(--paper_dim)}
.publications_head{max-width:640px;margin-bottom:48px}
.publications_head h2{font-size:clamp(26px,2.6vw,38px);margin-top:18px;line-height:1.18}
.publications_list{gap:24px}
.publication_item{
	background: var(--paper);
    border-radius: var(--radius-50);
    padding: 45px;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 32px rgb(147 180 237 / 8%), -3px -4px 10px rgb(191 191 191 / 10%), 4px 4px 12px rgb(231 231 231 / 10%), 0 0 8px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.1);
    display:flex;
    flex-direction:column;
    height:100%;
}
.publication_year{
  font-family:var(--font);
  font-weight:700;
  font-size:14px;
  color:var(--forest_soft);
  margin-bottom:15px;
  display:block
}
.publication_body{display:flex;flex-direction:column;gap:10px;flex:1}
.publication_title{font-size:16px;line-height:1.5;font-weight:600}
.publication_meta{font-size:14px;line-height:1.6;color:var(--ink_soft)}
.publication_link{
	font-family:var(--font);
	font-weight:600;
	font-size:12px;
	color:var(--forest);
	text-decoration:none;
	margin-top:auto;
	align-self:flex-start;
}
.publication_link:hover{color:var(--forest_soft);text-decoration: underline;}

/* ---------- публикации: слайдер ---------- */
.publications_slider{
	position:relative;
}
.publications_slider .swiper{
	overflow:hidden;
	padding:24px 22px;
	margin:-24px -22px;
}
.publications_slider .swiper-slide{
	width:340px;
	height:auto;
}
@media (max-width:768px){
.publications_slider .swiper{
	padding:24px 28px;
	margin:-24px -28px;
}
.publications_slider .swiper-slide{
	width:340px;
}
}
.publications_slider .swiper-button-prev,
.publications_slider .swiper-button-next{
	cursor:pointer;
	width:60px;
	height:60px;
	border-radius:50%;
	background:
		radial-gradient(circle at 30% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 45%),
		linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.01) 60%, rgba(255,255,255,0.1) 100%),
		rgba(255,255,255,0.04);
	backdrop-filter: url(#liquid_glass_distort) blur(1px) saturate(180%) brightness(1.04);
	-webkit-backdrop-filter: blur(9px) saturate(160%);
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.12), inset 0 -6px 10px -4px rgba(0, 0, 0, 0.10), inset 0 1px 1px rgba(255, 255, 255, .2);
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:9;
	isolation:isolate;
	opacity:0;
	visibility:hidden;
	transition:opacity .25s ease, visibility .25s ease;
}
.publications_slider:hover .swiper-button-prev,
.publications_slider:hover .swiper-button-next{
	opacity:1;
	visibility:visible;
}
.publications_slider .swiper-button-prev{left:-28px}
.publications_slider .swiper-button-next{right:-28px}
.publications_slider .swiper-button-prev::before,
.publications_slider .swiper-button-next::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	padding:1px;
	background:conic-gradient(from 215deg at 50% 50%,
		rgba(255,255,255,.65) 0deg,
		rgba(255,255,255,0) 40deg,
		rgba(255,255,255,0) 170deg,
		rgba(255,255,255,.3) 200deg,
		rgba(255,255,255,0) 235deg,
		rgba(255,255,255,0) 330deg,
		rgba(255,255,255,.65) 360deg);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events:none;
}
.publications_slider .swiper-button-prev::after,
.publications_slider .swiper-button-next::after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:16px;
	height:24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M16.292,26.775a1,1,0,0,1-.707-1.706l7.778-7.778L15.584,9.512A1,1,0,0,1,16.292,7.8.989.989,0,0,1,17,8.1l8.486,8.485a1,1,0,0,1,0,1.415L17,26.483A.993.993,0,0,1,16.292,26.775Z' transform='translate(-15.292 -7.805)' fill='%23000000'/%3E%3C/svg%3E%0A");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center right;
}
.publications_slider .swiper-button-prev::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M24.776,26.775a1,1,0,0,0,.707-1.706l-7.778-7.778,7.779-7.779A1,1,0,0,0,24.776,7.8a.99.99,0,0,0-.707.292l-8.486,8.485a1,1,0,0,0,0,1.415l8.485,8.485A.993.993,0,0,0,24.776,26.775Z' transform='translate(-15.292 -7.805)' fill='%23000000'/%3E%3C/svg%3E%0A");
	background-position:center left;
}
.publications_slider .swiper-button-disabled{
	display:none;
}
@media (max-width:999px){
	.publications_slider .swiper-button-prev,
	.publications_slider .swiper-button-next{
		display:none;
	}
}

/* ---------- контакты ---------- */
.contacts{padding:100px 0}
.contacts_title{font-size:clamp(24px,2.2vw,32px);margin-top:18px;line-height:1.2;margin-bottom:40px}
.contacts_side{display:flex;flex-direction:column;gap:28px}
.contacts_col{display:flex;flex-direction:column;gap:24px}
.contacts_row{display:flex;flex-direction:column;gap:8px}
.contacts_label{
  font-family:var(--font);
  font-weight:700;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--forest_soft);
}
.contacts_grid{
	display: flex;
    grid-template-columns: 45%;
    align-items: center;
    justify-content: space-between;
}
.about_visual_inner{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.institute{
	border-radius:var(--radius-50)
}
.contacts_value{font-size:16px;line-height:1.6;color:var(--ink)}
.contacts_value_link{border-bottom:1px solid var(--line);width:fit-content}
.contacts_value_link:hover{border-color:var(--forest_soft);color:var(--forest_soft)}
.contacts_photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.contacts_photo img{width:100%;height:100%;object-fit:cover}
.contacts_map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);height:100%;min-height:420px}
.contacts_map iframe{width:100%;height:100%;min-height:420px;display:block}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding:64px 0 20px;position:relative}
.footer .wrapper{
  position: relative;
}
.footer_logo_white{
	height: 44px;
    width: auto;
	margin-bottom:20px
}
.footer_top{align-items:end;padding-bottom:40px;border-bottom:1px solid var(--line_light)}
.footer_mark{font-family:var(--font);margin-bottom:14px}
.footer_addr{font-size:14px;line-height:1.4;opacity:.8}
.footer_docs{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.footer_docs a{
	font-family:var(--font);
	font-size:14px;
	letter-spacing:.02em;
	color:var(--papper);
	opacity:0.8;
	transform:all 0.5s;
}
.footer_docs a:hover{opacity:1}
.footer_bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12px;color:var(--papper);font-family:var(--font);opacity:.6;letter-spacing:.02em;}
.footer_lang_switch{color:var(--mint)}
.tyt,
.lead_info{
	display:none
}

/* ---------- адаптив ---------- */
@media (max-width:1800px){
.hero{
    border-radius:0
}
.hero_content{
    padding-left:50px;
    padding-right:50px
}
}
@media (max-width:1400px){
.w45 {
    flex: 0 0 48%;
    max-width: 48%;
}	
.about_approaches {
    margin-top: 40px;
}	
.about_col .about_approaches{
	display:none
}
.tyt{
  order:3;
	display:block;
	width:100%;
}
}
	
	
@media (max-width:1100px){
  .wrapper{padding:0 28px}
  .header_burger{display:block}
  .header_nav{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    height:100dvh;
    margin:0;
	justify-content: center;
    padding:40px 28px;
    gap:0;
    background:var(--paper);
    z-index:998;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    overflow-y:auto;
    transition:opacity .35s ease, visibility .35s ease;
  }
  
  .language a{
	  margin-right:40px;
	  margin-left:0
  }
  .header_nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .header_nav a{
    color:var(--ink)!important;
    padding:18px 0;
    width:100%;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .header_nav.is-open a{
    opacity:1;
    transform:translateY(0);
  }
  .header_nav.is-open a:nth-child(1){transition-delay:.08s}
  .header_nav.is-open a:nth-child(2){transition-delay:.14s}
  .header_nav.is-open a:nth-child(3){transition-delay:.2s}
  .header_nav.is-open a:nth-child(4){transition-delay:.26s}
  .header_nav.is-open a:nth-child(5){transition-delay:.32s}
  .header_nav.is-open a:nth-child(6){transition-delay:.38s}
  body.no-scroll{overflow:hidden}
  .directions_grid.g4{grid-template-columns:repeat(2,1fr)}
  .productline_grid.g4{grid-template-columns:repeat(2,1fr)}
  .team_grid.g5{grid-template-columns:repeat(3,1fr)}
  .publications_list.g4{grid-template-columns:repeat(2,1fr)}
  .lead_grid .w25{flex:0 0 35%;max-width:35%}
  .lead_grid .w70{flex:0 0 60%;max-width:60%}
  .contacts_grid .w40,.contacts_grid .w60{flex:0 0 100%;max-width:100%}
  .contacts_grid .w40{margin-bottom:32px}
  .contacts_map{min-height:320px}
  .contacts_map iframe{min-height:320px}
  
  .about,
  .directions,
  .products,
  .lead,
  .team,
  .publications,
  .contacts{
	  padding:70px 0
  }
  .mt-50 {
    margin-top: 60px;
}
}
@media (max-width:1000px){
.about_image .swiper-slide{
	aspect-ratio: 4/3
}
.about_col{
	order:1
}
.about_visual{
	order:2
}
.g3.publications_list,
.g3.directions_grid{
	grid-template-columns: repeat(2, 1fr);
}
.about_body .w33,.about_body .w60{
	flex:0 0 100%;
	max-width:100%
}
.w45 {
	flex: 0 0 100%;
	max-width: 100%;
}	
}
@media (max-width:760px){
  .hero_title{max-width:none}
  .productline_grid.g4{grid-template-columns:repeat(2,1fr)}
  .lead_grid .w33,.lead_grid .w66{flex:0 0 100%;max-width:100%}
  .lead_photo{max-width:260px;margin-bottom:28px}
  .team_grid.g5{grid-template-columns:repeat(2,1fr)}
  .approach_grid.g6{grid-template-columns:repeat(2,1fr)}
  .publications_list.g4{grid-template-columns:1fr}
  .footer_top .w50{flex:0 0 100%;max-width:100%}
  .footer_docs{align-items:flex-start}
  .footer_bottom{flex-direction:column;gap:12px;align-items:flex-start}
  .w66, .w25 {
    flex: 0 0 100%;
    max-width: 100%;
}
.contacts_side{
	margin-top:30px
}
.g3.publications_list, .g3.directions_grid {
	grid-template-columns: repeat(1, 1fr)
}
.approach_grid.g6 {
	display: flex;
	flex-wrap:wrap;
	justify-content: flex-start;
	gap: 20px
}

.footer_docs{
	margin-top:40px;
}
.hero {
	aspect-ratio: 9 / 6;
}

.lead_grid .w25{
  flex: 0 0 100%;
  max-width: 100%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
.lead_photo{
	width:40%;
	height:auto;
}
.lead_info{
	display:block;
	width:60%;
	max-width:calc(100% - 260px);
	padding-left:30px;
}
.lead_col .eyebrow,
.lead_col .lead_name,
.lead_col .lead_role{
	display:none
}
.lead_col{
	margin-top:30px;
}
.lead_grid .w70 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------- продукт 2 (3D-печать): мобильная версия ≤768px — два субблока в колонку ---------- */
@media (max-width:768px){
  .pc2_split{
    grid-template-columns:1fr;
    gap:28px;
  }
}

@media (max-width:600px){
.directions_head,
.team_head,
.publications_head {
    margin-bottom: 30px;
}
.language a{
	margin-right:20px;
}
.hero_content{
	padding:30px
}
.publication_item,
.direction_card{
	padding:30px;
	border-radius:40px
}	
.institute,
.lead_photo img{
	border-radius:40px
}
.productline_grid {
    grid-template-columns:repeat(3,1fr);
}
.productline_item {
    font-size: 16px
}
.lead_photo{
	width:100%;
}
.lead_info {
    width: 100%;
    max-width: 100%;
	padding-left: 0;
}
.contacts_title{
	margin-bottom:20px
}
.team_avatar{
	margin-bottom:20px
}
.about_visual{
	padding:8px
}
.about_image .swiper-button-prev, .about_image .swiper-button-next{
	width:48px;
	height:48px;
	bottom: 20px;
    right: 20px;
}
.about_image .swiper-button-prev {
    right: 80px;
}
.products_head{
	margin-bottom: 20px;
}
.header{
	padding:15px 0
}
.about_image .swiper-slide{
	aspect-ratio: 1/1
}
.hero_content {
    border-radius: 20px;
    margin: -30px auto 0;
}

/* карточка команды в одну колонку раньше, чем на ≤478px — некоторые телефоны
   (например часть MIUI-устройств) отдают CSS-viewport шире 478px, и без
   этого правила между ~479 и 600px побеждает repeat(2,1fr) из блока ≤760px.
   Раскладка карточки та же, что и в ≤478px ниже — фото слева, текст справа. */
.team_grid.g5{
  grid-template-columns:repeat(1,1fr);
}
.team_card{
  display:grid;
  grid-template-columns:80px 1fr;
  grid-template-rows:auto auto auto;
  column-gap:14px;
  row-gap:6px;
  align-items:start;
  height:auto;
}
.team_avatar{
  grid-column:1;
  grid-row:1 / 4;
  width:80px;
  height:80px;
  border-radius:20px;
  border:2px solid transparent;
  margin-bottom:0;
}
.team_avatar img{
  border-radius:20px;
}
.team_card h4{
  grid-column:2;
  grid-row:1;
  margin:0;
}
.team_card_role{
  grid-column:2;
  grid-row:2;
}
.team_card .lead_link{
  grid-column:2;
  grid-row:3;
  margin-top:0;
  align-self:start;
  justify-self:start;
}

}
@media (max-width:478px){
    .productline_grid {
        grid-template-columns: repeat(2, 1fr)
    }
	.lead_col {
        margin-top: 0
    }	
	.approach_grid.g6{
        grid-template-columns: repeat(3, 1fr)
    }

	.approach_grid{
		margin-top:15px;
	}
	.hero_lede{
		max-width:auto;
		font-size:16px
	}

  .team_grid.g5 {
        grid-template-columns: repeat(1, 1fr);
    }
  .team_card{
    display:grid;
    grid-template-columns:80px 1fr;
    grid-template-rows:auto auto auto;
    column-gap:14px;
    row-gap:6px;
    align-items:start;
    height:auto; /* сбрасываем то, что растягивало карточку под сетку одинаковой высоты на десктопе */
  }

  .team_avatar{
    grid-column:1;
    grid-row:1 / 4; /* занимает все три "текстовые" строки по высоте */
    width:80px;
    height:80px;
    border-radius:20px;
    border: 2px solid transparent;
  }
  .team_avatar img {
    border-radius: 20px;
}

  .team_card h4{
    grid-column:2;
    grid-row:1;
    margin:0;
  }
  .team_card_role{
    grid-column:2;
    grid-row:2;
  }
  .lead_link{
    grid-column:2;
    grid-row:3;
    margin-top:0; /* убираем margin-top:auto из десктопной flex-версии, тут он не нужен */
    align-self:start;
    justify-self:start;
  }
}

/* ---------- WordPress: стандартный контент страницы (page.php) ---------- */
.page_content{padding:160px 0 100px}
.page_content .wrapper{max-width:820px}
.page_content h1{
	font-size:clamp(30px,3.4vw,46px);
	line-height:1.15;
	margin-bottom:24px;
}
.page_content .page_updated{
	font-size:14px;
	color:var(--ink_soft);
	margin-bottom:40px;
}
.page_content .entry-content h2{
	font-size:clamp(20px,2vw,26px);
	margin:40px 0 16px;
}
.page_content .entry-content h3{
	font-size:18px;
	margin:28px 0 12px;
}
.page_content .entry-content p{
	font-size:16px;
	line-height:1.7;
	color:var(--ink_soft);
	margin-bottom:16px;
}
.page_content .entry-content ul,
.page_content .entry-content ol{
	margin:0 0 16px 20px;
}
.page_content .entry-content li{
	list-style:disc;
	font-size:16px;
	line-height:1.7;
	color:var(--ink_soft);
	margin-bottom:8px;
}
.page_content .entry-content a{
	color:var(--forest);
	text-decoration:underline;
}
.page_content .entry-content a:hover{color:var(--forest_soft)}

/* ---------- WordPress: 404 ---------- */
.error_404{
	min-height:70vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:160px 0 100px;
}
.error_404 .eyebrow{justify-content:center}
.error_404 h1{
	font-size:clamp(60px,10vw,140px);
	line-height:1;
	color:var(--forest);
	margin:16px 0;
}
.error_404 p{
	font-size:17px;
	color:var(--ink_soft);
	margin-bottom:28px;
}
.error_404 .lead_link{
	display:inline-flex;
}
.svg_404{
  height:auto;
  width:500px;
  max-width:90%;
  margin:30px auto
}
/* ---------- cookie-баннер ---------- */
.cccb-cookie-banner{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:9999;
  max-width:420px;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 32px rgb(147 180 237 / 8%), -3px -4px 10px rgb(191 191 191 / 10%), 4px 4px 12px rgb(231 231 231 / 10%), 0 0 8px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.1);
  padding:24px;
}
.cccb-cookie-banner[hidden]{display:none}
.cccb-cookie-banner_body p{font-size:14px;line-height:1.5;color:var(--ink_soft);margin-bottom:16px}
.cccb-cookie-banner_body a{color:var(--forest);text-decoration:underline}
.cccb-cookie-banner_body a:hover{color:var(--forest_soft)}
.cccb-cookie-banner_btn{
  display:inline-block;
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:12px 24px;
  background:var(--forest);
  color:var(--paper);
  border-radius:6px;
  transition:background .2s;
}
.cccb-cookie-banner_btn:hover{background:var(--forest_soft)}
@media (max-width:600px){
  .cccb-cookie-banner{left:12px;right:12px;bottom:12px;max-width:none;padding:18px}
}

/* ---------- плашка "Разработано" — выезжает из-за нижнего края футера ---------- */
.footer_credit{
	padding-top:10px;
	overflow:hidden;
	position:absolute;
	bottom:-20px;
	right:15px;
}
.footer_credit:hover .footer_credit_tab{
	bottom:-5px;
}
.footer_credit_tab{
	position:relative;
	bottom:-15px;
	right:0;
	display:table;
	background:var(--forest);
	color:var(--paper);
	padding:7px 12px 20px;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.1rem;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	transition:bottom .3s;
}
@media (max-width:600px){
  .footer{
    padding-bottom:40px
  }
	.footer_credit{right:auto;left:28px;bottom: -40px;}
	.footer_credit_tab{font-size:10px}
}

/* ==================== ПРОДУКТ С РАЗВЁРНУТЫМ СОСТАВОМ (добавлено) ==================== */
/* ---------- продукт с развёрнутым составом (компоненты + график) ----------
   Добавить в style.css. Использует существующие переменные и .petri/.eyebrow
   без изменений — только новые классы. */

.productline_card{
  background:var(--paper);
  border-radius:var(--radius-50);
  padding:48px;
  box-shadow:0 8px 32px rgba(20,35,27,.06);
  margin-bottom:60px;
}
.productline_card:last-of-type{margin:0}
.productline_card_final{text-align:center}
.productline_card_final .petri{width:100%;aspect-ratio:1/1;margin-bottom:20px}
.productline_card_final p{font-size:19px;font-weight:600;line-height:1.3;font-family:var(--font)}

.productline_card_right{display:flex;flex-direction:column;gap:28px}

/* маленькая чашка для исходных компонентов — тот же .petri, уменьшенный,
   но у .petri стенка (inset) и тень заданы в фиксированных px, поэтому на
   маленьком размере их надо отдельно уменьшить, иначе выглядят непропорционально толстыми */
.petri.small{
  width:96px;
  aspect-ratio:1/1;
  filter:drop-shadow(0 6px 3px rgba(0,0,0,.10)) drop-shadow(0 4px 7px rgba(0,0,0,.25));
}
.petri.small .petri_inner{inset:3px}

.productline_stage .eyebrow{margin-bottom:14px}
.productline_stage_box{
  display:flex;
  gap:28px;
  padding:22px 0;
  flex-wrap:wrap;
}
.stage_petri{width:96px;text-align:center}

/* подпись компонента — тот же стиль, что у span в «Ключевые подходы» (.approach_item span) */
.petri_caption{
  display:block;
  margin-top:10px;
  font-size:14px;
  line-height:1.4;
  font-family:var(--font);
}

/* мобильный слайдер исходных компонентов — по образцу .approach_slider */
.productline_stage_mobile{display:none}
.productline_stage_slider{position:relative;width:100%}
.productline_stage_slider .swiper{
  overflow:hidden;
  margin:8px -28px 0;
  padding:2px 28px 10px;
}
.productline_stage_slider .swiper-slide{width:96px}

/* график */
.productline_chart{padding-top:22px;border-top:1px solid var(--line)}
.productline_chart_head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.productline_chart_head h4{font-size:17px;font-weight:600;font-family:var(--font);line-height:1.3;margin-bottom:0}
.chart_legend{display:flex;gap:16px;flex-wrap:wrap}
.chart_legend_item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink_soft);font-family:var(--font)}
.chart_legend_swatch{width:12px;height:12px;border-radius:3px}
/* маркер легенды линейного графика — мини-копия линии+точки, как в исходнике (круг/квадрат/треугольник) */
.chart_legend_marker{width:28px;height:14px;flex-shrink:0}
.axis_label{font-size:12px;fill:var(--ink_soft);font-family:var(--font)}
.grid_line{stroke:var(--line);stroke-width:1}
.tick_label{font-size:12px;fill:var(--ink_soft);font-family:var(--font)}

@media (max-width:900px){
  .productline_card{padding:32px}
  /* на планшете/мобильном чашка готового продукта не должна раздуваться на всю ширину */
  .productline_card_final .petri{width:100%;max-width:260px;margin-left:auto;margin-right:auto}
}

@media (max-width:600px){
  /* большой блок карточки — без подложки на мобильном */
  .productline_card{background:transparent;box-shadow:none;padding:0;border-radius:0}
  /* исходные компоненты — слайдером вместо ряда с переносом */
  .productline_stage_default{display:none}
  .productline_stage_mobile{display:block}
}

/* ==================== ПРОДУКТЫ 1-3 (добавлено) ==================== */

/* общая шапка карточки продукта */
.productcard_head{margin-bottom:36px}
.productcard_head .eyebrow{margin-bottom:12px;display:block}
.productcard_head h3{font-size:clamp(20px,2vw,28px);line-height:1.25;font-family:var(--font)}

/* плейсхолдер фото/материала — пунктирная рамка с иконкой камеры и подписью */
.photo_placeholder{
  border:2px dashed var(--line);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--ink_soft);
  font-size:12px;
  line-height:1.4;
  text-align:center;
  padding:12px;
  aspect-ratio:4/3;
  background:var(--paper_dim);
}
.photo_placeholder svg{width:26px;height:26px;opacity:.45}
.photo_placeholder span{max-width:22ch}
.photo_placeholder.ph_square{aspect-ratio:1/1}
.photo_placeholder.ph_wide{aspect-ratio:16/9}

/* ---------- продукт 1: процесс (3 круга + стрелки + бейджи) ---------- */
.pc1_process{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  padding:10px 0 44px;
}
.pc1_stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:190px;
  text-align:center;
  position:relative;
}
.pc1_stage .petri{width:100%;margin-bottom:16px}
.pc1_stage_tag{
  font-family:var(--font);
  font-weight:600;
  font-size:14px;
  padding:8px 16px;
  border-radius:var(--radius-50);
  background:var(--paper_dim);
  white-space:nowrap;
  /* когда перенос разрешён (white-space:normal, см. ниже), длинное слово всё
     равно не должно вылезать за пределы узкой резиновой чашки — переносим и
     внутри слова, если по-другому не помещается */
  overflow-wrap:break-word;
  /* align-items:center у .pc1_stage не сжимает подпись до ширины чашки сам по
     себе — без max-width пилюля может стать шире родителя и вылезти за карточку */
  max-width:100%;
}
.pc1_stage.is-final .pc1_stage_tag{background:var(--forest);color:var(--paper)}

/* средний элемент процесса (например «Сопиролиз / термоконверсия») — просто фото,
   без чашки Петри, как на референсе, без круглой рамки/тени. На десктопе высота
   равна высоте соседних чашек Петри, а ширина — по пропорциям фото (уже), поэтому
   слот получается уже, чем колонка стадии */
.pc1_stage_photo{
  width:100%;
  aspect-ratio:1/1;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pc1_stage_photo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* высота должна совпадать с диаметром соседних чашек Петри, а чашки теперь
   резиновые (см. .pc1_process_desktop .pc1_stage ниже, calc() как у гидрогеля).
   Раз .pc1_stage_photo лежит в стадии той же ширины, что и у чашек (slot),
   width:75% + aspect-ratio:3/4 дают height ровно = slot: 0.75·slot × (4/3) = slot */
.pc1_process_desktop .pc1_stage_photo{
  width:75%;
  height:auto;
  aspect-ratio:3/4;
}

/* ---------- мобильная версия процесса продукта 1 (≤768px) — строки вместо ряда ---------- */
.pc1_process_mobile{display:none}
.pc1_stage--row{
  flex-direction:row;
  align-items:center;
  width:100%;
  text-align:left;
  gap:16px;
}
.pc1_stage--row .petri,
.pc1_stage--row .pc1_stage_photo{
  width:72px;
  flex:0 0 auto;
  margin-bottom:0;
}
.pc1_stage--row .pc1_stage_tag{white-space:normal;flex:1 1 auto}
.pc1_mob_down{width:18px;height:18px;color:var(--forest_soft);margin:8px 0 8px 34px}


/* ---------- продукт 4: гидрогель HG-H250 (процесс по образцу продукта 1) ---------- */
.pc4_arrow{
  flex:0 0 auto;
  align-self:center;
  margin-bottom:44px;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--paper_dim);
  color:var(--forest);
  display:flex;align-items:center;justify-content:center;
}
.pc4_arrow svg{width:22px;height:22px}

/* карточка гидрогеля — процесс слева (левое выравнивание), график справа.
   align-items:stretch (по умолчанию у grid) — колонка графика растягивается
   по высоте вслед за более высокой колонкой процесса, а не обрезается по контенту */
.pc4_top{
  display:grid;
  grid-template-columns:65% 1fr;
  gap:56px;
}
.pc4_process_col .pc1_process{
  justify-content:flex-start;
  padding:0;
  gap:16px;
}
.pc4_chart_col{display:flex}
.pc4_chart_col .productline_chart{
  padding-top:0;
  border-top:none;
  display:flex;
  flex-direction:column;
  width:100%;
}
.pc4_chart_col .productline_chart_svg{flex:1 1 auto;min-height:220px}

/* ширина чашки = 1/3 колонки минус 2 стрелки и 4 промежутка (gap) между всеми 5 элементами ряда */
.productcard_hydrogel .pc1_stage{width:calc((100% - 2 * 44px - 4 * 16px) / 3)}
.productcard_hydrogel .pc1_stage_tag{white-space:normal}

/* ширина чашек петри у продукта 1 (биоуголь) — как у блока выше (гидрогель):
   та же формула, резиновая под колонку, а не фиксированные 190px. Скоуп через
   .pc1_process_desktop, чтобы не задеть мобильную строчную вёрстку (.pc1_stage--row).
   min-width:0 — без этого flex-элемент не сжимается меньше min-content подписи
   и на узких экранах вылезает за пределы карточки, даже если подпись переносится */
.pc1_process_desktop .pc1_stage{width:max(96px, calc((100% - 2 * 44px - 4 * 16px) / 3)); min-width:0}
.pc1_process_desktop .pc1_stage_tag{white-space:normal}

/* ---------- мобильная версия процесса (≤768px): чашки внахлёст с номерами
   + подписи отдельным нумерованным списком. На узких экранах 3 чашки в ряд
   со стрелками и пилюлями-подписями не помещаются — текст подписей ломает
   вёрстку, поэтому подписи переносятся под чашки отдельным списком */
.pc4_process_mobile{display:none}
.pc4_ov_row{display:flex;padding:6px 0 20px}
/* ширина = 1/3 ряда + компенсация нахлёста, чтобы 3 чашки с учётом двух
   отрицательных отступов (нахлёстов) по -24px в сумме занимали всю ширину ряда:
   3 * (33.3333% + 16px) - 2*24px = 100% */
.pc4_ov_circle{position:relative;width:calc(33.3333% + 16px);flex:0 0 auto}
.pc4_ov_circle:not(:first-child){margin-left:-24px}
/* третья (готовый продукт) — сверху, вторая — под ней, первая — в самом низу */
.pc4_ov_circle:nth-child(1){z-index:1}
.pc4_ov_circle:nth-child(2){z-index:2}
.pc4_ov_circle:nth-child(3){z-index:3}
.pc4_ov_circle .petri{width:100%;margin-bottom:0}
/* у .petri прозрачные/полупрозрачные слои (блики, тени) — без непрозрачной подложки
   через чашку в зоне нахлёста просвечивала бы соседняя чашка снизу */
.pc4_ov_circle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--paper);
}
.pc4_ov_num{
  position:absolute;top:2px;left:2px;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--forest);
  color:var(--paper);
  font-family:var(--font);
  font-weight:700;
  font-size:13px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(20,35,27,.3);
  z-index:6;
}
.pc4_ov_legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc4_ov_legend li{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-family:var(--font);
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
}
.pc4_ov_legend b{
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--paper_dim);
  color:var(--forest);
  font-size:12px;
  display:flex;align-items:center;justify-content:center;
}

@media (max-width:768px){
  .pc4_process_desktop{display:none}
  .pc4_process_mobile{display:block}
}

/* ---------- мобильная версия биоугля на очень узких экранах (≤600px):
   плотно упакованные 3 элемента с номерами + легенда ниже (как гидрогель,
   но БЕЗ нахлёста, т.е. без отрицательных margin) ---------- */
.pc1_process_mobile_narrow{display:none}
.pc1_narrow_row{
  display:flex;
  gap:6px;
  padding:6px 0 20px;
}
.pc1_narrow_item{
  position:relative;
  flex:1 1 0;
  min-width:0;
}
/* чашки (1-й и 3-й элемент) вдвое шире центрального фото → пропорция 2:1:2 ≈ 40:20:40% */
.pc1_narrow_item:nth-child(1),
.pc1_narrow_item:nth-child(3){ flex:2 2 0; }
/* чашка квадратная */
.pc1_narrow_item .petri{
  width:100%;
  aspect-ratio:1/1;
  margin-bottom:0;
}
/* фото (элемент 2): ширина вдвое меньше чашки, высота = высоте чашки → aspect-ratio 1/2 */
.pc1_narrow_photo{
  width:100%;
  aspect-ratio:1/2;
}
.pc1_narrow_photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* номер над элементом: 1, 2, 3 */
.pc1_narrow_num{
  position:absolute;
  top:2px;
  left:2px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--forest);
  color:var(--paper);
  font-family:var(--font);
  font-weight:700;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(20,35,27,.3);
  z-index:6;
}
/* легенда: нумерованный список ниже — те же стили, что у .pc4_ov_legend */
.pc1_narrow_legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc1_narrow_legend li{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-family:var(--font);
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
}
.pc1_narrow_legend b{
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--paper_dim);
  color:var(--forest);
  font-size:12px;
  display:flex;align-items:center;justify-content:center;
}

@media (max-width:768px){
  .pc1_process_desktop{display:none}
  .pc1_process_mobile{display:none}
  .pc1_process_mobile_narrow{display:block}
}

.pc4_formulas{
  padding:28px 0 44px;
  border-top:1px solid var(--line);
  text-align:center;
}
.pc4_formulas .eyebrow{margin-bottom:20px;display:block}
.pc4_formula_row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.pc4_formula_item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:120px;
}
.pc4_formula_svg{width:100px;height:100px;color:var(--forest)}
.pc4_formula_photo{
  width:90px;height:90px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper_dim);
}
.pc4_formula_photo img{width:100%;height:100%;object-fit:cover;display:block}
.pc4_formula_label{font-size:13px;line-height:1.35;color:var(--ink_soft);font-family:var(--font)}
.pc4_formula_op{flex:0 0 auto;width:20px;height:20px;color:var(--forest_soft)}
.pc4_formula_arrow{color:var(--forest)}

/* ---------- продукт 1: 2 блока в пропорциях карточки гидрогеля (65%/1fr) ----------
   слева — процесс (чашки), справа — статистика сорбции (4 графика, 2×2, т.к.
   колонка узкая). Мини-схему получения (2 доп. чашки) убрали — эти стадии уже
   показаны в верхнем ряду процесса */
.pc1_top{
  display:grid;
  grid-template-columns:65% 1fr;
  gap:56px;
}
.pc1_process_col .pc1_process{
  justify-content:flex-start;
  padding:0;
  gap:16px;
}
/* правая колонка — 3 серых стат-чипа в столбик (переиспользуют стили .pc2_chip.pc2_stat_chip) */
.pc1_chart_col{display:flex;flex-direction:column;gap:16px}

/* галерея полевых испытаний — на всю ширину карточки, под pc1_top */
.pc1_field_gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.pc1_field_item{display:flex;flex-direction:column;gap:16px}
.pc1_field_item img{
  border-radius:20px
}

.pc1_field_item .photo_placeholder{width:100%}
/* подпись тут — просто текст, без стилей пилюли .pc1_stage_tag (тег общий с
   процессом выше в этой же карточке, поэтому сбрасываем локально, здесь) */
.pc1_field_item .pc1_stage_tag{
  font-family:inherit;
  font-weight:400;
  font-size:14px;
  padding:0;
  border-radius:0;
  background:none;
  white-space:normal;
  color:var(--ink);
}

/* ---------- продукт 2: два субблока ---------- */
.pc2_split{display:grid;grid-template-columns:1fr 1fr;gap:40px}
/* min-width:0 обязателен: без него grid-колонка наследует min-width:auto,
   а свайпер внутри (aspect-ratio + Swiper'овский width:100% на wrapper/slide)
   создаёт циклическую зависимость ширины, которую браузер "ломает",
   подставляя огромное служебное значение (~33 млн px) — из-за этого весь
   блок раздувается на всю страницу */
.pc2_sub{display:flex;flex-direction:column;gap:18px;min-width:0}
.pc2_sub_head{display:flex;align-items:center;gap:14px}
.pc2_sub_icon{
  width:52px;height:52px;flex:0 0 auto;
  border-radius:var(--radius);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--forest);
}
.pc2_sub_icon svg{width:26px;height:26px}
.pc2_sub_head h4{font-size:19px;font-weight:600;font-family:var(--font);line-height:1.3}
.pc2_sub_subtitle{font-size:14px;color:var(--forest_soft);font-weight:600;margin-top:-6px}

.pc2_gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}
.pc2_gallery .photo_placeholder:first-child{grid-column:1 / -1;aspect-ratio:16/9}

.pc2_chips{display:flex;gap:12px;flex-wrap:wrap}
.pc2_chip{
  flex:1 1 0;
  min-width:110px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:10px;
  padding:20px 16px;
  border-radius:var(--radius);
  background:var(--paper_dim);
}
/* :not(.pc2_stat_chip) — не задевает правые стат-чипы (−60% и т.п.), у них своя типографика */
.pc2_chip:not(.pc2_stat_chip) svg{width:38px;height:38px;color:var(--forest)}
/* текст чипа — обычный, без стилей */

/* ---------- продукт 2: слайдеры ---------- */
/* заголовки субблоков — та же типографика, что у .productcard_head h3,
   отступ не трогаем (margin:0 от общего сброса уже стоит по умолчанию) */
.productline_card.productcard2 h3{font-size:clamp(20px,2vw,28px);line-height:1.25;font-family:var(--font)}

.pc2_slider_wrap{position:relative}
/* левый: 1 landscape-слайд */
.pc2_swiper_left{border-radius:var(--radius);overflow:hidden}
/* правый: 3 квадратных слайда в ряд, статично (не карусель) — независимо от того,
   как проинициализирован Swiper в JS (slidesPerView и т.п.), т.к. правило со
   !important всегда перебивает инлайновые width/transform, которые может
   выставлять сам Swiper на .swiper-slide/.swiper-wrapper */
/* overflow:visible (не hidden, как у базового .swiper на 367 строке) — специально
   для этого слайдера: он статичный (3 слайда враз, transform:none!important выше),
   ничего не едет за пределы контейнера, поэтому клипать нечего — а вот бейдж
   с чашкой Петри, наоборот, должен вылезать за нижний край слайда */
.pc2_swiper_right{overflow:visible}
.pc2_swiper_right .swiper-wrapper{
  flex-wrap:nowrap!important;
  transform:none!important;
  gap:12px;
}
.pc2_swiper_right .swiper-slide{
  width:calc((100% - 24px) / 3)!important;
  flex-shrink:0!important;
  aspect-ratio:1/1;
}
.pc2_swiper_right img{border-radius:var(--radius);}
/* картинок всегда ровно 3 и все видны сразу — переключать нечего, кнопки не нужны */
.pc2_swiper_right ~ .pc2_slider_footer .pc2_slider_nav{display:none}
.pc2_slider_wrap .swiper-slide{height:100%}
.pc2_slider_wrap .photo_placeholder.ph_slide{
  width:100%;height:100%;
  aspect-ratio:unset;border-radius:0;border:none;
}

/* ---- бейдж с чашкой Петри на КАЖДОМ слайде правого слайдера ----
   переиспользует готовый .petri/.petri_inner/.petri_content (та же "стеклянная"
   чашка, что и в карточке гидрогеля выше) + модификатор .small (у него уже
   меньший inset и более лёгкая тень — то, что нужно для маленького бейджа).
   .pc2_petri_badge только позиционирует: правый нижний угол СЛАЙДА (у .swiper-slide
   position:relative по умолчанию от самого Swiper), квадрат 33% от ширины слайда,
   10% отступ справа, translateY(50%) при bottom:0 сдвигает ровно на половину
   СВОЕЙ высоты вниз за край — независимо от итогового размера в px. */
.pc2_swiper_right .swiper-slide{position:relative}
.pc2_petri_badge.petri{
  position:absolute;
  right:10%;
  bottom:0;
  width:33%;
  margin-bottom:0;
  transform:translateY(20%);
  z-index:9;
}

/* ---- левый слайдер: кнопки точно как .about_image ---- */
/* важно: сама .about_image .swiper-button-prev/next в style.css переопределяется
   позже (48px, bottom:20/right:20/80) — это её реальный рендер на сайте, а не
   исходные 60px/30px. Здесь взяты уже итоговые значения, чтобы кнопки выглядели
   так же, как у .about_image .swiper фактически на странице */
.pc2_swiper_left .swiper-button-prev,
.pc2_swiper_left .swiper-button-next{
  cursor:pointer;
  width:48px;height:48px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.01) 60%, rgba(255,255,255,0.1) 100%),
    rgba(255,255,255,0.04);
  backdrop-filter:url(#liquid_glass_distort) blur(1px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter:blur(9px) saturate(160%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    inset 0 -6px 10px -4px rgba(0,0,0,0.16),
    inset 0 1px 1px rgba(255,255,255,.3);
  position:absolute;
  bottom:20px;right:20px;
  isolation:isolate;
  z-index:9;
}
.pc2_swiper_left .swiper-button-prev::before,
.pc2_swiper_left .swiper-button-next::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from 215deg at 50% 50%,
    rgba(255,255,255,.65) 0deg, rgba(255,255,255,0) 40deg,
    rgba(255,255,255,0) 170deg, rgba(255,255,255,.3) 200deg,
    rgba(255,255,255,0) 235deg, rgba(255,255,255,0) 330deg,
    rgba(255,255,255,.65) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.pc2_swiper_left .swiper-button-prev{right:80px}
.pc2_swiper_left .swiper-button-prev::after,
.pc2_swiper_left .swiper-button-next::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:16px;height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M16.292,26.775a1,1,0,0,1-.707-1.706l7.778-7.778L15.584,9.512A1,1,0,0,1,16.292,7.8.989.989,0,0,1,17,8.1l8.486,8.485a1,1,0,0,1,0,1.415L17,26.483A.993.993,0,0,1,16.292,26.775Z' transform='translate(-15.292 -7.805)' fill='%23fff'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center right;
}
.pc2_swiper_left .swiper-button-prev::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M24.776,26.775a1,1,0,0,0,.707-1.706l-7.778-7.778,7.779-7.779A1,1,0,0,0,24.776,7.8a.99.99,0,0,0-.707.292l-8.486,8.485a1,1,0,0,0,0,1.415l8.485,8.485A.993.993,0,0,0,24.776,26.775Z' transform='translate(-15.292 -7.805)' fill='%23fff'/%3E%3C/svg%3E");
  background-position:center left;
}

/* ---- правый слайдер: футер с подписью слева и кнопками справа ---- */
.pc2_slider_footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;margin-bottom:20px;
}
.pc2_slider_label{font-size:13px;color:var(--ink_soft);font-weight:500;flex:1}
.pc2_slider_nav{display:flex;gap:8px}
.pc2_slider_nav .swiper-button-prev,
.pc2_slider_nav .swiper-button-next{
  cursor:pointer;position:relative;
  width:44px;height:44px;flex:0 0 auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.01) 60%, rgba(255,255,255,0.1) 100%),
    rgba(255,255,255,0.04);
  backdrop-filter:url(#liquid_glass_distort) blur(1px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter:blur(9px) saturate(160%);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.18),
    inset 0 -4px 8px -3px rgba(0,0,0,0.14),
    inset 0 1px 1px rgba(255,255,255,.3);
  border:none;outline:none;isolation:isolate;
}
.pc2_slider_nav .swiper-button-prev::before,
.pc2_slider_nav .swiper-button-next::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from 215deg at 50% 50%,
    rgba(255,255,255,.65) 0deg, rgba(255,255,255,0) 40deg,
    rgba(255,255,255,0) 170deg, rgba(255,255,255,.3) 200deg,
    rgba(255,255,255,0) 235deg, rgba(255,255,255,0) 330deg,
    rgba(255,255,255,.65) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.pc2_slider_nav .swiper-button-prev::after,
.pc2_slider_nav .swiper-button-next::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:12px;height:18px;
  background-size:contain;background-repeat:no-repeat;
}
.pc2_slider_nav .swiper-button-next::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M16.292,26.775a1,1,0,0,1-.707-1.706l7.778-7.778L15.584,9.512A1,1,0,0,1,16.292,7.8.989.989,0,0,1,17,8.1l8.486,8.485a1,1,0,0,1,0,1.415L17,26.483A.993.993,0,0,1,16.292,26.775Z' transform='translate(-15.292 -7.805)' fill='%23000'/%3E%3C/svg%3E");
  background-position:center right;
}
.pc2_slider_nav .swiper-button-prev::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.485' height='18.97' viewBox='0 0 10.485 18.97'%3E%3Cpath d='M24.776,26.775a1,1,0,0,0,.707-1.706l-7.778-7.778,7.779-7.779A1,1,0,0,0,24.776,7.8a.99.99,0,0,0-.707.292l-8.486,8.485a1,1,0,0,0,0,1.415l8.485,8.485A.993.993,0,0,0,24.776,26.775Z' transform='translate(-15.292 -7.805)' fill='%23000'/%3E%3C/svg%3E");
  background-position:center left;
}

/* числа в стат-чипах: высота = высоте иконки (26px), крупно зелёным */
.pc2_stat_num{
  display:flex;align-items:center;
  font-family:var(--font);font-weight:700;font-size:16px;color:var(--forest);
}

/* ---------- продукт 3: LCA / ML / TEA ----------
   содержимое — иконка/h3/p, типографика как у .direction_card, но без самого
   класса .direction_card (чтобы не тянуть его фон/паддинг/тень) — только
   свои стили серого блока (pc3_panel), которые тут и остаются нетронутыми */
.pc3_panels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pc3_panel{
  background:var(--paper_dim);
  border-radius:var(--radius-50);
  padding:34px 28px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
/* .direction_icon уже задаёт размер/цвет — margin-bottom:22px гасим,
   расстояние между иконкой/заголовком/текстом держит gap:20px у .pc3_panel */
.pc3_panel .direction_icon{margin-bottom:0}
.pc3_panel h3{font-size:21px;font-weight:600;font-family:var(--font);line-height:1.3}
.pc3_panel p{font-size:16px;line-height:1.6;color:var(--ink_soft)}

.pc3_tagline{
  font-family:var(--font);
  font-weight:600;
  font-size:16px;
  color:var(--forest);
  margin-top:32px;
}

/* ---------- адаптив: продукты 1-3 ---------- */
@media (max-width:1100px){
  .pc3_panels{grid-template-columns:1fr}
}
/* 3 чашки гидрогеля не помещаются в 65%-колонку раньше, чем остальные карточки
   переходят на мобильную вёрстку — переносим на одну колонку чуть раньше (1180px);
   ширина чашек при этом пересчитывается сама через calc() в .productcard_hydrogel .pc1_stage */
@media (max-width:1180px){
  .pc4_top{grid-template-columns:1fr;gap:36px}
  .pc4_process_col .pc1_process{justify-content:center}
}
/* то же самое для продукта 1 (биоуголь): чашки там фиксированной ширины (190px,
   не пересчитываются через calc), поэтому 65%-колонка перестаёт вмещать 3 стадии
   заметно раньше — переносим на одну колонку пораньше (1280px) */
@media (max-width:1280px){
  .pc1_top{grid-template-columns:1fr;gap:36px}
  .pc1_process_col .pc1_process{justify-content:center}
}
@media (max-width:900px){
  .pc2_split{grid-template-columns:1fr;gap:32px}
  .pc1_field_gallery{grid-template-columns:1fr;gap:20px}
}
@media (max-width:600px){
  .pc1_process{gap:14px}
  .pc1_stage{width:120px}
  .pc4_arrow{width:32px;height:32px;margin-bottom:26px}
  .pc4_arrow svg{width:16px;height:16px}
  .pc4_formula_row{gap:10px}
  .pc4_formula_item{width:88px}
  .pc4_formula_svg{width:76px;height:76px}
  .pc4_formula_photo{width:68px;height:68px}
  .pc2_gallery{grid-template-columns:1fr 1fr}
  .pc2_mold_grid{grid-template-columns:1fr}
  .pc2_bottom{grid-template-columns:1fr}
  .pc2_chips .pc2_chip {
    flex: auto;
  }
}
@media (max-width:480px){
  .pc2_chips{flex-direction:column}
}

/* продукт 1: графики статистики остаются 2×2 на всех ширинах, включая мобильную —
   4 в ряд не нужно */