<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("style");
?>:root{
	--metal-text:#1b1b1b;
	--metal-muted:#6b7280;
	--metal-bg:#ffffff;
	--metal-surface:#f3f4f6;
	--metal-card:#f6f7f8;
	--metal-green:#85C875;
	--metal-green-2:#73BF61;
	--metal-radius:18px;
	--metal-shadow:0 12px 30px rgba(0,0,0,.10);
}

.metal{
	color:var(--metal-text);
	background:var(--metal-bg);
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.metal-container{
	width:min(1200px, calc(100% - 32px));
	margin-inline:auto;
}

.metal-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-height:44px;
	padding:10px 18px;
	border-radius:999px;
	text-decoration:none;
	font-weight:600;
	transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.metal-btn:focus{ outline:2px solid rgba(133,200,117,.55); outline-offset:3px; }
.metal-btn--primary{
	background: #85C875;
	color:#0b2b0a;
	box-shadow:0 10px 25px rgba(133,200,117,.35);
}
.metal-btn--primary:hover{ background: #85C875; transform:translateY(-1px); }

.metal-pill-title{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 30px;
	padding:12px 18px;
	border-radius:999px;
	background:linear-gradient(180deg, rgba(133,200,117,.95), rgba(133,200,117,.85));
	color:#0b2b0a;
	font-size:18px;
	font-weight:800;
	width:fit-content;
	box-shadow:0 8px 20px rgba(133,200,117,.25);
}

.metal-section{
	padding:28px 0;
}

/* Hero */
.metal-hero{
	position:relative;
	padding:28px 0 22px;
	overflow:hidden;
	isolation:isolate;
	color:var(--metal-text);
}
.metal-hero .metal-container{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	min-height:340px;
}
.metal-hero::before{
	content:"";
	position:absolute;
	inset:0;
	background: var(--metal-hero-bg, url("/upload/metal/hero.webp")) center/cover no-repeat;
	z-index:-2;
	transform:scale(1.02);
}
.metal-hero__title{
	margin:0 0 10px;
	font-size:42px;
	letter-spacing:-.02em;
}
.metal-hero__subtitle{
	margin:0 0 16px;
	color:var(--metal-muted);
	font-size:16px;
	line-height:1.5;
	max-width:54ch;
}
.metal-hero__card{
	width:min(720px, 100%);
	padding:20px 28px 18px;
	border-radius:24px;
	background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
	border:1px solid rgba(255,255,255,.62);
	box-shadow:
		0 16px 44px rgba(0,0,0,.14),
		inset 0 1px 0 rgba(255,255,255,.55);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	margin-left:clamp(0px, 2vw, 28px);
}
.metal-hero__cta{
	display:flex !important;
	justify-content:center !important;
	align-items:center;
	width:100%;
	margin-top:10px;
}
.metal-hero__cta > a{
	display:inline-flex !important;
	margin:0 auto !important;
	float:none !important;
	position:static !important;
	left:auto !important;
	right:auto !important;
	transform:none !important;
	min-width:190px;
}
.metal-hero__cta > a:hover{
	transform:translateY(-1px) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
	.metal-hero__card{
		background:rgba(255,255,255,.88);
	}
}

/* Types grid */
.metal-grid{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:14px;
}
.metal-card{
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:12px;
	border-radius:16px;
	background:linear-gradient(180deg, #ffffff 0%, var(--metal-card) 100%);
	box-shadow:0 8px 18px rgba(0,0,0,.08);
	text-decoration:none;
	color:inherit;
	min-height:180px;
	transition:transform .15s ease, box-shadow .15s ease;
}
.metal-card:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.10); }
.metal-card__img{
	width:100%;
	aspect-ratio: 4 / 3;
	border-radius:12px;
	object-fit:cover;
	display:block;
	background:#d1d5db;
}
.metal-card__title{
	font-weight:700;
	font-size:14px;
	line-height:1.25;
}

/* Steps */
.metal-steps{
	list-style:none;
	padding:0;
	margin:10px 0 0;
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:44px;
}
.metal-step{
	padding:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	position:relative;
}
.metal-step__num{
	display:flex;
	align-items:center;
	gap:14px;
	font-weight:900;
	color:#111827;
	font-size:16px;
	letter-spacing:-.02em;
	line-height:1;
	margin-bottom:22px;
	white-space:nowrap;
}
.metal-step__num::after{
	content:"";
	height:3px;
	background:#111827;
	border-radius:99px;
	flex:1;
	opacity:.9;
	min-width:90px;
}
.metal-step__title{
	margin-top:0;
	font-weight:900;
	font-size:18px;
	letter-spacing:-.02em;
}
.metal-step__text{
	margin:8px 0 0;
	color:#111827;
	font-size:16px;
	line-height:1.55;
}

/* Features */
.metal-features{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:40px;
	margin-top:40px;
	align-items:start;
}
.metal-feature{
	padding:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	text-align:center;
}
.metal-feature__img{
	width:72px;
	height:72px;
	display:block;
	margin:0 auto 18px;
	object-fit:contain;
}
.metal-feature__title{
	margin-top:0;
	font-weight:500;
	font-size:16px;
	line-height:1.15;
	letter-spacing:-.02em;
}

/* Clients */
.metal-clients{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:26px;
	margin-top:10px;
	align-items:center;
}
.metal-client{
	border-radius:0;
	background:transparent;
	box-shadow:none;
	border:0;
	aspect-ratio:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	height:200px;
	padding:16px;
	box-sizing:border-box;
}
.metal-client img{
	max-width:100%;
	max-height:100%;
	object-fit:contain;
	display:block;
	border-radius:0 !important;
	box-shadow:none !important;
	outline:0;
}

/* Modal + form */
.metal-modal{
	position:fixed;
	inset:0;
	display:none;
	z-index:9999;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
	padding:16px 0;
	box-sizing:border-box;
}
.metal-modal.is-open{ display:block; }
.metal-modal__overlay{
	position:fixed;
	inset:0;
	background:rgba(17,24,39,.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.metal-modal__dialog{
	position:relative;
	width:min(640px, calc(100% - 24px));
	margin: min(10vh, 80px) auto;
	border-radius:24px;
	background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
	border:1px solid rgba(255,255,255,.70);
	box-shadow:0 24px 70px rgba(0,0,0,.22);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	padding:18px 18px 16px;
}
.metal-modal__close{
	position:absolute;
	top:10px;
	right:12px;
	width:40px;
	height:40px;
	border-radius:999px;
	border:0;
	background:rgba(17,24,39,.06);
	font-size:24px;
	line-height:1;
	cursor:pointer;
}
.metal-modal__header{ padding-right:44px; }
.metal-modal__title{
	font-weight:900;
	font-size:28px;
	letter-spacing:-.02em;
}
.metal-modal__subtitle{
	margin-top:6px;
	color:var(--metal-muted);
}
.metal-form{
	margin-top:14px;
	display:grid;
	gap:12px;
}
.metal-field{
	display:grid;
	gap:6px;
}
.metal-field__label{
	font-size:14px;
	color:var(--metal-muted);
}
.metal-field__control{
	width:100%;
	min-height:44px;
	padding:10px 14px;
	border-radius:14px;
	border:1px solid rgba(17,24,39,.12);
	background:rgba(255,255,255,.85);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
	font:inherit;
}
.metal-field__control--textarea{
	min-height:110px;
	resize:vertical;
	padding-top:10px;
}
.metal-field__control:focus{
	outline:2px solid rgba(133,200,117,.55);
	outline-offset:2px;
}
.metal-form__actions{
	display:flex;
	justify-content:center;
	margin-top:2px;
}
.metal-form__note{
	min-height:20px;
	text-align:center;
	color:var(--metal-muted);
	font-size:14px;
}
.metal-honey{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	opacity:0;
}
.metal-modal-open{ overflow:hidden; }

/* Toast */
.metal-toast{
	position:fixed;
	left:50%;
	top:16px;
	z-index:9999;
	max-width:min(420px, calc(100% - 32px));
	padding:12px 14px;
	border-radius:14px;
	background:rgba(20, 20, 20, .92);
	color:#fff;
	font-size:14px;
	line-height:1.35;
	box-shadow:0 10px 30px rgba(0,0,0,.25);
	opacity:0;
	transform:translate(-50%, -10px);
	transition:opacity .25s ease, transform .25s ease;
	pointer-events:none;
}
.metal-toast.is-show{
	opacity:1;
	transform:translate(-50%, 0);
}

/* Responsive */
@media (max-width: 1024px){
	.metal-grid{ grid-template-columns: repeat(3, 1fr); }
	.metal-features{ grid-template-columns: repeat(2, 1fr); gap:34px; margin-top:28px; }
	.metal-steps{ grid-template-columns: repeat(2, 1fr); }
	.metal-clients{ grid-template-columns: repeat(3, 1fr); }
	.metal-hero__title{ font-size:36px; }
	.metal-step__title{ font-size:18px; }
	.metal-step__text{ font-size:18px; }
	.metal-feature__title{ font-size: 16px; }
}

@media (max-width: 768px){
	.metal-container{ width:calc(100% - 24px); }
	.metal-hero__title{ font-size:30px; }
	.metal-hero .metal-container{ min-height:260px; }
	.metal-hero__card{ padding:16px 18px 14px; border-radius:20px; }
	.metal-section{ padding:22px 0; }
	.metal-grid{ grid-template-columns: repeat(3, 1fr); }
	.metal-clients{ grid-template-columns: repeat(3, 1fr); }
	.metal-cta__inner{ flex-direction:column; align-items:flex-start; }
	.metal-client{ height:120px; padding:12px; }
}

@media (max-width: 520px){
	.metal-grid{ grid-template-columns: repeat(2, 1fr); }
	.metal-steps{ grid-template-columns: 1fr; }
	.metal-features{ grid-template-columns: 1fr; gap:26px; margin-top:22px; }
	.metal-clients{ grid-template-columns: repeat(2, 1fr); }
	.metal-step__num{ font-size:16px; margin-bottom:16px; }
	.metal-step__title{ font-size:18px; }
	.metal-step__text{ font-size:18px; }
	.metal-feature__img{ width:64px; height:64px; margin-bottom:14px; }
	.metal-feature__title{ font-size:16px; }
	.metal-client{ height:104px; padding:10px; }
}

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

@media (prefers-reduced-motion: reduce){
	.metal-btn, .metal-card{ transition:none; }
	.metal-btn--primary:hover, .metal-card:hover{ transform:none; }
}
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>