:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#ddd;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}





/* ========================================
   CSS VARIABLES & ROOT SETTINGS
   ======================================== */

:root {
	--accent: #1a1d23;
	--text: #f8f9fa;
	--light-gray: #ced4da;
	--bg: #0d1117;
	--bg-secondary: #161b22;
	--border: #30363d;
	--white-color: #ffffff;
	--regular-text: 0.875rem;
	--lineheight: 1.3;
	--userfont: Inter, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;

	--grey-text: #C2C2C2;
	--text-dark: #1C1C1C;
	--accent-primary: #FFFF00;
}

/* ========================================
   GLOBAL STYLES & RESET
   ======================================== */

html {
	scroll-behavior: smooth;
	/* Плавная прокрутка */
}

/* Псевдоэлементы и базовые стили */
::placeholder {
	color: #1b1843;
	font-weight: normal;
	font-size: 0.875rem;
	line-height: 1.5625rem;
}


/* Формы и инпуты */
input,
textarea {
	outline: none;
}

/* Валидация форм */
input:focus:required:invalid,
textarea:focus:required:invalid {
	border-color: red;
}

input:required:valid,
textarea:required:valid {
	border-color: green;
}

/* Основные стили body */
body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	background: var(--bg);
	font-weight: 400;
	min-width: 20rem;
	position: relative;
	overflow-x: hidden;
	scroll-behavior: smooth;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   UTILITY CLASSES & COMMON ELEMENTS
   ======================================== */

/* Изображения */
img {
	max-width: 100%;
}

/* Списки */
ul {
	margin-bottom: 0;
}

/* Кнопки */
button {
	text-decoration: none;
}


a {
	display: inline-block;
	transition: .25s;
	text-decoration: none;
  color: var(--accent-primary);
  text-decoration-thickness: 1px;
}


/* ========================================
   COMPONENTS & UI ELEMENTS
   ======================================== */

/* Заголовки */
.title-b {
	font-size: 2.375rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 1.25rem;
}

/* Базовые стили кнопок */
.btn {
	padding-left: 2rem;
	min-height: 45px;
	padding-right: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	border-radius: 8px;
	font-weight: 500;
}

/* Основная кнопка */
.btn-primary {
  background: var(--accent-primary);
  color: var(--text-dark);
}

.btn-primary:hover {
	background: var(--accent-primary);
	color: var(--text-dark);
	transform: translateY(-0.3125rem);
}

/* Вторичная кнопка */
.btn-secondary {
	border: 0.0625rem solid var(--text);
	background-color: transparent;
	color: var(--text);
	transition: 0.3s ease-in-out;
}

.btn-secondary:hover {
	background: var(--accent);
	color: var(--white-color);
	transform: translateY(-0.3125rem);
	border: 0.0625rem solid var(--accent);
}

/* Контейнер */
.container {
	width: 80rem;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Утилитарные классы */
.mb-80 {
	margin-bottom: 5rem;
}


main {
	display: flex;
	flex-direction: column;
	padding-top: 3rem;
}
#main-text {
	order: 12;
}
#contacts {
	order: 13;
}

/* Ссылка "Подробнее" */
.more {
	
	font-size: 0.875rem;
	font-weight: 300;
	text-decoration: none;
	border-bottom: 0.0625rem dotted var(--accent);
}

.more:hover {
	border-bottom: 0.0625rem dotted transparent;
	color: var(--text);
}


#promo {
	position: relative;
  overflow: hidden;
}


/* ========================================
   HEADER SECTION
   ======================================== */
	 header {
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		padding: 1rem .35rem;
		width: 100%;
		margin: 0 auto;
		background: transparent;
		transition: all 0.3s ease;
	 }

header.f-nav {
	padding: 0.35rem .35rem;
	background: var(--accent);
	border-bottom: 0.0625rem solid var(--border);
	transition: all 0.3s ease;
}


/* Контейнер хедера */
header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}

/* Логотип */
.header-logo a,
.header-logo {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text);
	border-bottom: none;
}

.header-logo a span,
.header-logo span {
	font-size: 1rem;
	font-weight: 300;
	color: var(--light-gray);
	display: block;
}

/* Навигационное меню */
header .header-menu ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style-type: none;
	padding-left: 0;
}

header .header-menu ul li {
	margin: 0 1.25rem;
}

header .header-menu ul li a {
	color: var(--text);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: none;
	display: inline-block;
	padding: 0.625rem;
}
header .header-menu ul li a:hover {
	color: var(--accent-primary);
}


/* Кнопка мобильного меню */
.mobile-menu-toggle,
.mobile-menu-close,
.mobile-menu-footer,
.mobile-menu-contact,
.mobile-menu-btn {
	display: none;
}

.mobile-menu-toggle {
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0.5rem;
	color: var(--text);
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	transition: all 0.3s ease;
}

.mobile-menu-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1.5rem;
	height: 1.5rem;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu-icon-hamburger {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(0deg);
}

.mobile-menu-icon-close {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.mobile-menu-toggle.active .mobile-menu-icon-hamburger {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.mobile-menu-toggle.active .mobile-menu-icon-close {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(0deg);
}

/* Группа для правых элементов */
.header-right-group {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Селектор языка */
.lang-selector {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.lang-selector a {
	color: var(--text);
	font-size: 1rem;
	text-decoration: none;
	border-bottom: none;
	padding: .5rem;
	display: inline-block;
}

.lang-selector a:hover {
	
}

.lang-selector a::after {
	content: '•';
	margin-left: 0.7rem;
	color: var(--text);
	font-size: 0.875rem;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
}

.lang-selector a:last-child::after {
	display: none;
}

/* Переключатель темы */
.theme-toggle {
	display: flex;
	align-items: center;
	margin-left: 1rem;
}

.theme-toggle-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
}

.theme-toggle-btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

.theme-icon {
	width: 1.25rem;
	height: 1.25rem;
	transition: all 0.3s ease;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.theme-icon-light {
	color: var(--text);
	opacity: 1;
}

.theme-icon-dark {
	color: var(--text);
	opacity: 0;
}


/* Контактная информация в хедере */
.header-contact {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-direction: column;
	line-height: 1;
}

.header-contact p {
	margin-bottom: 0.625rem;
}

.header-contact a {
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}


/* ========================================
   PROMO SECTION (HERO)
   ======================================== */

/* Основной контент промо-секции */
.hero-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 40px auto;
	gap: 10px;
}

.hero-container .text-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	gap: 15px;
	background-color: var(--accent);
	border-radius: 10px;
	border: 1px solid var(--border);
	color: var(--white-color);
}

.hero-container .text-block .promo-link {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: start;
}

.hero-container .text-block h1 {
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 10px;
}

.hero-container .text-block p {
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	line-height: 1.5;
	color: var(--grey-text);
}


.site-section {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 20px;
	position: relative;
	overflow: hidden;
	transition: 0.6s ease-out;
}

.site-section:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background: linear-gradient(to top, var(--accent), transparent);
}


.header-simple {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-simple .logo-simple {
	background: #000;
	border-radius: 4px;
	padding: 4px 10px;
	color: var(--white-color);
}

.header-simple .logo-simple {
	font-size: 24px;
	font-weight: 600;
}

.header-simple .nav-simple ul{	
	display: flex;
	gap: 20px;
	list-style-type: none;
	margin-bottom: 0;
	padding-left: 0;
}

.header-simple .nav-simple ul li a {
	text-decoration: none;
	color: #000;
	font-size: 14px;
	font-weight: 600;
}

.icons-simple {
	display: flex;
	gap: 10px;
}

.header-simple .search-icon-simple {
	cursor: pointer;
	background: #000;
	border-radius: 4px;
	padding: 4px;
	color: var(--white-color);
}

.header-simple .menu-icon-simple {
	cursor: pointer;
	border-radius: 4px;
	background: #000;
	padding: 4px;
	color: var(--white-color);
}


.block-2 {
	margin-top: 30px;
}

.hero-image-simple{
	width: 100%;
	height: 200px;
	background: var(--accent);
	border-radius: 10px;
	border: 1px solid var(--border);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: var(--white-color);
}
.hero-image-simple button {
	background: var(--accent);
	color: var(--white-color);
	padding: 10px 20px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
}

.hero-image-simple .text-simple {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 15px;
}

.block-3 {
	margin-top: 30px;
}

 .heading-simple {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 15px;
}

.block-3 .category-list-simple {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.block-3 .category-list-simple .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.block-3 .category-list-simple .item .service-simple {
	background: var(--accent);
	color: var(--white-color);
	height: 80px;
	width: 100%;
	padding: 10px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 4px;
	border: 1px solid var(--border);
	display: flex;
	justify-content: center;
	align-items: center;
}

.block-3 .category-list-simple .item .more-simple {
	cursor: pointer;
	color: var(--white-color);
	font-size: 14px;
	opacity: 0.5;
	display: block;
	margin-top: 10px;
	transition: 0.25s;
}
.block-3 .category-list-simple .item .more-simple:hover {
	opacity: 1;
}

.block-3 .category-list-simple .item .more-simple:after {
	content: '→';
	display: inline-block;
	margin-left: 5px;
}

.block-4 {
	margin-top: 20px;
	background: var(--accent);
	border-radius: 10px;
	border: 1px solid var(--border);
	text-align: center;
	padding: 20px 10px;
	color: var(--white-color);
}

.block-4 .heading-simple {
	margin-bottom: 10px;
}
.block-4 .why-list-simple {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
}

.block-4 .why-list-simple .item {
	display: flex;
	padding: 20px 5px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	font-size: 12px;
	color: var(--white-color);
	transition: 0.25s;
}
.block-4 .why-list-simple .item:hover {
	opacity: 1;
}

.block-4 .why-list-simple .item .number {
	font-size: 32px;
	opacity: 1;
	font-weight: 600;
}

.block-4 .why-list-simple .item .text {
	font-size: 14px;
	opacity: 0.5;
	color: var(--white-color);
	transition: 0.25s;
}
.block-4 .why-list-simple .item:hover .text {
	opacity: 1;
	color: var(--white-color);
}

/* Animation styles for staggered appearance */
.site-section .block-1,
.site-section .block-2,
.site-section .block-3,
.site-section .block-4 {
	opacity: 0;
	transform: translateY(30px) scale(0.95);
	transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.site-section .block-1.animate-in,
.site-section .block-2.animate-in,
.site-section .block-3.animate-in,
.site-section .block-4.animate-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.site-section .why-list-simple .item,
.site-section .category-list-simple .item {
	opacity: 0;
	transform: translateY(20px) scale(0.9);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.site-section .why-list-simple .item.animate-in,
.site-section .category-list-simple .item.animate-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}




#promo {
	position: relative;
	overflow: hidden;
}

.promo-content {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	min-height: 31.25rem;
	padding: 6.25rem 0;
	z-index: 1;
	position: relative;
}

/* Заголовок промо */
.promo-content h1 {
	font-size: 3rem;
	font-weight: 600;
	color: var(--text);
	font-size: 4.5rem;
	width: 62.5rem;
	max-width: 100%;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 2.5rem;
}

/* Рейтинг */
 .rating {
	font-size: 1.125rem;
	font-weight: 400;
	text-align: left;
}

 .rating a {
	color: var(--accent-primary);
}


/* Описательный текст */
.promo-content .text {
	font-size: 1.5rem;
	font-weight: 400;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 2.5rem;
	width: 60rem;
	max-width: 100%;
}

/* Ссылки в промо */
.promo-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
}

.promo-link svg {
	width: 1.875rem;
	margin-right: 0.3125rem;
	transition: 0.3s ease-in-out;
}

.promo-link a {
	min-width: 13.25rem;
}



/* ========================================
   ADVANTAGES SECTION
   ======================================== */

#advantages {
	background: var(--accent);
	padding: 3.125rem 0;
	position: relative;
	overflow: hidden;
}

/* Сетка преимуществ */
.advantages-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin-top: 1.875rem;
}

/* Карточка преимущества */
.advantages-item {
	border: 0.0625rem solid var(--border);
	padding: 1.25rem;
	border-radius: 0.625rem;
	display: flex;
	background: var(--accent);
	flex-direction: column;
	transition: 0.3s ease-in-out;
}

.advantages-item:hover {
	border: 0.0625rem solid var(--accent-primary);
}

/* Заголовок преимущества */
.advantages-item-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 0.625rem;
}

/* Текст преимущества */
.advantages-item p {
	font-size: 1rem;
	font-weight: 300;
	color: var(--grey-text);
}

.advantages-item p a {
	color: var(--accent-primary);
}

.advantages-item p a:hover {
	border-bottom: 0.0625rem solid var(--accent-primary);
}

/* Иконка преимущества */
.advantages-item .icon {
	margin-bottom: 0.9375rem;
}

.advantages-item .icon svg {
	fill: var(--accent-primary);
}

/* ========================================
   WHAT INCLUDED SECTION
   ======================================== */

#what-included {
	background: var(--bg);
	padding: 5rem 0;
}

#what-included .title-b {
	width: 60rem;
	margin: 0 auto;
	margin-bottom: 3.125rem;
	text-align: center;
	max-width: 100%;
}
#what-included .subtitle{
	text-align: center;
	font-weight: 300;
	font-size: 1.25rem;
	margin-bottom: 3.25rem;
}
/* Сетка что входит */
.what-included-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 1.875rem;
}

/* Карточка что входит */
.what-included-item {
	border: 0.0625rem solid var(--border);
	border-radius: 0.75rem;
	transition: 0.3s;
	background: var(--bg-secondary);
}

.what-included-item:hover {
	border-color: var(--accent-primary);
}

/* Заголовок */
.what-included-header {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 0.3125rem;
	text-align: center;
	background: var(--accent);
	color: var(--white-color);
	padding: 1rem 0.625rem;
	border-radius: 0.625rem;
	margin-bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.what-included-header svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	fill: var(--accent-primary);
}

.what-included-header div {
	line-height: 1;
}

/* Список */
.what-included-item ul {
	list-style: none;
	padding: 0;
	margin: 0.625rem 1.25rem;
	font-size: 0.875rem;
	color: var(--light-gray);
	line-height: 1.5;
}

.what-included-item ul li {
	margin-bottom: 0.375rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.625rem;
	color: var(--light-gray);
	font-weight: 300;
	border-bottom: 0.0625rem dotted var(--border);
	padding-bottom: 0.3125rem;
	position: relative;
	padding-left: 1.5rem;
}

.what-included-item ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	
	font-weight: 600;
	font-size: 1.125rem;
	top: 0;
}

.what-included-button {
	text-align: center;
	margin-top: 3.75rem;
}

.what-included-button .btn {
	width: fit-content;
	margin: 0 auto;
}

/* ========================================
   SITE VIZITKA BENEFITS SECTION
   ======================================== */

#site-vizitka-benefits {
	background: var(--bg);
	padding: 4rem 0;
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

.benefit-card {
	background: var(--bg-secondary);
	border-radius: 0.75rem;
	padding: 2rem;
	border: 0.0625rem solid var(--border);
	transition: 0.3s;
}

.benefit-card:hover {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
	transform: translateY(-0.25rem);
}

.benefit-icon {
	margin-bottom: 1rem;
}

.benefit-icon svg {
	width: 48px;
	height: 48px;
	fill: var(--accent-primary);
}

.benefit-card h6 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 1rem;
}

.benefit-card p {
	font-size: 1rem;
	color: var(--light-gray);
	line-height: 1.6;
}

.target-audience {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 0.0625rem solid var(--border);
	width: 100%;
}

.target-audience h5 {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 1rem;
	text-align: center;
}

.target-audience-intro {
	font-size: 1.125rem;
	color: var(--light-gray);
	text-align: center;
	margin: 2rem auto;
	max-width: 60rem;
	font-weight: 300;
	
}

.audience-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.audience-item {
	padding: 1rem;
	background: var(--bg-secondary);
	border-radius: 0.5rem;
	border: 0.0625rem solid var(--border);
	font-size: 0.9375rem;
	color: var(--text);
	transition: 0.3s;
}

.audience-item:hover {
	background: var(--accent);
}

#about .target-audience {
	margin-top: 2rem;
	padding-top: 2rem;
}


/* ========================================
   TYPES SECTION (PRICING)
   ======================================== */

#types {
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
}

#types .title-b {
	margin-bottom: 2.5rem;
	background: transparent;
	padding: 0;
	margin-bottom: 2.25rem;
}

/* Сетка типов сайтов */
#types .items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

/* Карточка типа сайта */
#types .item {
	border: 0.0625rem solid var(--border);
	border-radius: 0.75rem;
	transition: 0.3s;
	background: var(--bg-secondary);
	position: relative;
	z-index: 1;
}

#types .item:hover {
	border-color: var(--accent-primary);
}

/* Заголовок типа */
#types .item .title-s {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 0.3125rem;
	text-align: center;
	background: var(--accent);
	color: var(--white-color);
	padding: 1.25rem 0.625rem;
	border-radius: 0.625rem;
	margin-bottom: 1.25rem;
}

/* Цена */
#types .price {
	font-size: 1.125rem;
	text-align: center;
	font-weight: 600;
	margin-bottom: 0.9375rem;
}

/* Список характеристик */
#types ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.875rem;
	color: var(--light-gray);
	line-height: 1.5;
	margin: 0.625rem 1.25rem;
}

#types ul li {
	margin-bottom: 0.375rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.625rem;
	color: var(--light-gray);
	font-weight: 300;
	border-bottom: 0.0625rem dotted var(--border);
	padding-bottom: 0.3125rem;
}

#types ul li strong {
	font-weight: 500;
	color: var(--text);
}

/* Центрирование и кнопки */
#types .center {
	text-align: center;
	margin-top: 3.75rem;
}

#types .more {
	margin-bottom: 1.25rem;
	margin-left: 1.25rem;
}

#types .btn-primary {
	width: fit-content;
	margin: 0 auto;
}

.annotation {
	font-size: 0.875rem;
	font-weight: 300;
	color: var(--light-gray);
	text-align: center;
	margin-top: 1.25rem;
	width: 42.5rem;
	max-width: 100%;
	margin: 3.125rem auto 0 auto;
}

/* ========================================
   CALCULATOR SECTION
   ======================================== */

#calculator {
	background: #26272C;
	padding: 5rem 0;
	color: #f5f5f5;
}


#calculator p.sub-title{
	font-size: 1.375rem;
	color: #ddd;
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 3rem;
	text-align: center;
}


#calculator .title-calculator {
	font-size: 1.375rem;
	color: #f5f5f5;
	font-weight: 600;
	margin-bottom: 1rem;
}
/* Основной контейнер калькулятора */
.calculator-wrapper {
	display: grid;
	grid-template-columns: 1fr 25rem;
	gap: 2rem;
	align-items: start;
}

/* Форма калькулятора */
.calculator-form {
	padding: 2.5rem;
	border-radius: 1rem;
	background: #222;
	border: 0.0625rem solid #404040;
}

/* Секции формы */
.form-section {
	margin-bottom: 2rem;
}
#calculator h2.title-b {
	font-size: 2.375rem;
	color: #f5f5f5;
	width: 750px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 1rem;
} 

.form-section .title-b, .timeline-section .title-b {
	font-size: 1.25rem;
	margin-bottom: 1rem;
	color: #f5f5f5;
}

.site-types {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.site-type-card {
	background: #222;
	border: 0.0625rem solid #404040;
	border-radius: 0.75rem;
	padding: 1.25rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.site-type-card:hover {
	border-color: #fff;
	transform: translateY(-0.3125rem);
}

.site-type-card.active {
	border-color: var(--accent-primary);
}

.site-type-card h5 {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	color: var(--white-color);
}

.site-type-card .price {
	color: var(--grey-text);
	font-weight: 600;
	font-size: 1.2rem;
}

.site-type-card .term {
	color: var(--grey-text);
	font-size: 0.9rem;
	font-weight: 300;
	margin-top: 0.3rem;
}

.options-grid {
	display: grid;
	gap: 0.75rem;
}


.show-more-section {
	margin-top: 1.5rem;
	text-align: center;
}

.show-more-section .more {
	background: transparent;
	
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	border: none;
	display: inline-block;
	cursor: pointer;
}
.show-more-section .more:hover {
	opacity: .75;
}

.option-item {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 1rem;
	background: #222;
	border: 0.0625rem solid #404040;
	border-radius: 0.5rem;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.2s ease;
}

.option-item.show-more-hidden {
	display: none !important;
}

.option-item.show-more-visible {
	display: flex;
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.option-item:hover {
	background: #26272C;
}

.option-item.selected {
	background: #26272C;
}

.option-item input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid #444;
	/* темна рамка */
	border-radius: 4px;
	background-color: #222;
	/* темний фон */
	cursor: pointer;
	position: relative;
	transition: all 0.25s ease;
}

/* При наведенні — легке висвітлення */
.option-item input[type="checkbox"]:hover {
	background-color: #333;
	border-color: #666;
}

/* Активний (вибраний) стан */
.option-item input[type="checkbox"]:checked {
	background-color: #000;
	border-color: #000;
}

/* Галочка */
.option-item input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 6px;
	width: 4px;
	height: 8px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
}

/* Для кращої видимості у фокусі з клавіатури */
.option-item input[type="checkbox"]:focus {
	outline: none;
	box-shadow: 0 0 0 2px #555;
}


.option-info {
	flex: 1;
}

.option-name {
	font-weight: 600;
	display: block;
	margin-bottom: 0.25rem;
}

.option-desc {
	font-size: 0.85rem;
	color: var(--grey-text);
	font-weight: 300;
}

.option-price {
	
	font-weight: 600;
	font-size: 1.1rem;
	margin-top: .5rem;
	display: block;
}

.option-item .flex {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.timeline-section {
	background: #222;
	border-radius: 0.75rem;
	margin-top: 1.5rem;
}

.timeline-section h5 {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	color: var(--text);
}

.urgency-buttons {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0;
	flex-wrap: wrap;
}

.urgency-btn {
	flex: 1;
	padding: 0.75rem 1rem;
	background: #2a2a2a;
	border: 0.125rem solid #404040;
	border-radius: 0.5rem;
	color: #ddd;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	min-width: 7.5rem;
}

.urgency-btn:hover {
	background: #333;
	border: 0.125rem solid #fff;
}

.urgency-btn.active {
	background: var(--accent);
	font-weight: 600;
	border: 0.125rem solid var(--accent-primary);
}


.timeline-value {
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	
	margin-top: 1rem;
}

.price-summary {
	position: sticky;
	top: 1.25rem;
	background: var(--bg-secondary);
	background: #222;
	border: 0.0625rem solid #404040;
	padding: 2.5rem;
	border-radius: 1rem;
}

.price-summary h5 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	color: white;
}

.price-breakdown {
	margin-bottom: 2rem;
}

.price-item {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-bottom: 0.0625rem solid #404040;
}

.price-item:last-child {
	border-bottom: none;
}

.price-item-name {
	color: #ddd;
}

.price-item-value {
	
	font-weight: 600;
}

.total-price {
	background: #26272C;
	padding: 1.5rem;
	border-radius: 0.75rem;
	text-align: center;
	margin-bottom: 1.5rem;
}

.total-price-label {
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
	opacity: 0.8;
}

.total-price-value {
	font-size: 3rem;
	color: var(--accent-primary);
	font-weight: 600;
}

.timeline-info {
	text-align: center;
	padding: 1rem;
	background: #2a2a2a;
	border-radius: 0.5rem;
	margin-bottom: 1.5rem;
}

.timeline-info-label {
	color: #ddd;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

.timeline-info-value {
	
	font-size: 1.3rem;
	font-weight: 600;
}

.cta-button {
	width: 100%;
	padding: 1rem 2rem;
	background: var(--accent-primary);
	color: var(--text-dark);
	border: none;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}


.contact-form {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 0.0625rem solid var(--text);
	display: none !important;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.contact-form.active,
.contact-form.show {
	display: block !important;
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

.form-group {
	margin-bottom: 1rem;
}

.form-group label {
	display: block;
	color: #ddd;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 0.75rem;
	background: #2a2a2a;
	border: 0.0625rem solid #404040;
	border-radius: 0.5rem;
	color: white;
	font-size: 1rem;
	transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	
	background: var(--bg-secondary);
}

.form-group textarea {
	resize: vertical;
	min-height: 5rem;
}

.submit-button {
	width: 100%;
	padding: 0.875rem 2rem;
	background: var(--accent);
	color: var(--text);
	border: none;
	border-radius: 3.125rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 0.5rem;
}

.submit-button:hover {
	background: #e5a610;
}

.submit-button:disabled {
	background: #666;
	cursor: not-allowed;
}

.back-button {
	width: 100%;
	padding: 0.75rem;
	background: transparent;
	color: #ddd;
	border: 0.0625rem solid #404040;
	border-radius: 3.125rem;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 0.5rem;
}


.success-message {
	background: #28a745;
	color: white;
	padding: 1rem;
	border-radius: 0.5rem;
	text-align: center;
	margin-top: 1rem;
	display: none;
}

.success-message.show {
	display: block;
}

.features-included {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 0.0625rem solid var(--text);
}

.features-included h5 {
	font-size: 0.9rem;
	color: #ddd;
	margin-bottom: 1rem;
}

.feature-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.feature-list li {
	padding: 0.5rem 0;
	padding-left: 1.5rem;
	position: relative;
	color: #ddd;
	font-size: 0.9rem;
}

.feature-list li:before {
	content: "✓";
	position: absolute;
	left: 0;
	
	font-weight: 600;
}

/* Contact Form Styles */
.contact-form {
	background: #26272C;
	border-radius: 0.75rem;
	padding: 2rem;
	margin-top: 1.5rem;
	border: 0.125rem solid #404040;
	transform: translateY(1.25rem);
	opacity: 0;
	transition: all 0.3s ease;
}

.contact-form.show {
	transform: translateY(0);
	opacity: 1;
}

.contact-form h5 {
	color: white;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.contact-form .form-group {
	margin-bottom: 1rem;
}

.contact-form .form-group label {
	display: block;
	color: #ddd;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.contact-form .form-group input {
	width: 100%;
	padding: 0.875rem;
	background: #2a2a2a;
	border: 0.125rem solid #404040;
	border-radius: 0.5rem;
	color: white;
	font-size: 1rem;
	transition: all 0.2s ease;
}

.contact-form .form-group input::placeholder {
	color: #ddd;
	font-weight: 300;
	opacity: 0.5;
}

.contact-form .form-group input:focus {
	outline: none;
	background: #333;
}

.form-actions {
	display: flex;
	flex-direction: column;
	margin-top: 1rem;
}

.form-actions .back-button {
	flex: 1;
	padding: 0.275rem;
	background: transparent;
	color: #ddd;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
}


.form-actions .submit-button {
	flex: 1;
	padding: 0.875rem;
	background: var(--accent);
	color: var(--text);
	border: none;
	border-radius: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.form-actions .submit-button:hover {
	background: #e5a610;
}

/* About Section Styles */


/* ========================================
   ABOUT SECTION
   ======================================== */
#about {
	position: relative;
	overflow: hidden;
	padding-top: 50px
}

#about .title-b {
	text-align: center;
	margin-bottom: 2.5rem;
}

.about-content {
	max-width: 62.5rem;
	margin: 0 auto;
}

.about-intro {
	font-size: 1.375rem;
	color: var(--text);
	text-align: center;
	margin-bottom: 3rem;
	line-height: 1.6;
	font-weight: 300;
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: 2rem;
	margin-bottom: 4rem;
}

.stat-item {
	text-align: center;
	padding: 2rem 1rem;
	background: var(--bg-secondary);
	border-radius: 0.75rem;
	border: 0.0625rem solid var(--accent-primary);
	transition: transform 0.3s ease;
}

.stat-item:hover {
	transform: translateY(-0.3125rem);
}

.stat-number {
	font-size: 3rem;
	font-weight: 600;
	
	margin-bottom: 0.5rem;
}

.stat-label {
	font-size: 1rem;
	color: var(--grey-text);
	font-weight: 300;
}

.about-guarantee {
	background: var(--bg-secondary);
	padding: .5rem;
	border-radius: 0.75rem;
}

.about-guarantee .title-b {
	color: var(--text);
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
	font-weight: 600;
	text-align: center;
}

.guarantee-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.guarantee-list li {
	padding: 0.75rem 0;
	font-size: 1.3rem;
	color: var(--text);
	border-bottom: 0.0625rem solid var(--border);
}

.guarantee-list li:last-child {
	border-bottom: none;
}

.guarantee-list li:before {
	content: "✓";
	
	font-weight: 600;
	margin-right: 0.75rem;
}

/* Request Section Styles */
/* ========================================
   REQUEST SECTION
   ======================================== */

#request {
	background: var(--bg-secondary);
	color: white;
	padding: 5rem 0;
}

#request .title-b {
	color: white;
	text-align: center;
	margin-bottom: 2rem;
}

.request-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: start;
}

.request-intro {
	font-size: 1.375rem;
	color: #ddd;
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 3rem;
	text-align: center;
}

.request-benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.benefit-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0.75rem;
	border: 0.0625rem solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.benefit-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-0.3125rem);
}

.benefit-icon {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	background: var(--accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
}

.benefit-text .title-s {
	color: white;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.benefit-text p {
	color: #ddd;
	line-height: 1.5;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
}

.request-form {
	top: 1.25rem;
	width: 34.375rem;
	max-width: 100%;
	margin: 0 auto;
}	

.request-form .title-b {
	text-align: center;
	color: var(--white-color);
	font-size: 22px;
}
.form-container {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 2.5rem;
	border: 0.0625rem solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(0.625rem);
}

.form-container h5 {
	color: white;
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
	text-align: center;
}

.form-subtitle {
	color: #ddd;
	text-align: center;
	margin-bottom: 2rem;
	font-size: 0.95rem;
}

#requestForm .form-group {
	margin-bottom: 1.5rem;
}

#requestForm input,
#requestForm textarea {
	width: 100%;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.1);
	border: 0.125rem solid rgba(255, 255, 255, 0.2);
	border-radius: 0.5rem;
	color: white;
	font-size: 1rem;
	transition: all 0.2s ease;
}

#requestForm input::placeholder,
#requestForm textarea::placeholder {
	color: #ddd;
	font-weight: 300;
}

#requestForm input:focus,
#requestForm textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.15);
}

#requestForm textarea {
	resize: vertical;
	min-height: 5rem;
}

.submit-btn {
	width: 100%;
	padding: 1rem 2rem;
	background: var(--accent-primary);
	color: var(--text-dark);
	border: none;
	border-radius: 0.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-bottom: 1rem;
}

.submit-btn:hover {
	transform: translateY(-0.3125rem);
}

.form-privacy {
	color: #ddd;
	font-size: 0.85rem;
	text-align: center;
	margin: 0;
	line-height: 1.4;
}

.form-privacy a {
	color: var(--grey-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Portfolio Section Styles */
/* ========================================
   PORTFOLIO SECTION
   ======================================== */

#portfolio {
	padding: 5rem 0;
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

.portfolio-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
	gap: 2rem;
	margin-top: 3rem;
	position: relative;
	overflow: hidden;
}

.portfolio-item {
	border-radius: 0.85rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 0.0625rem solid var(--border);
	transition: border-color 0.3s ease;
}



.portfolio-item img {
	width: 100%;
	transition: transform 0.3s ease;
	height: 15.625rem;
	object-fit: cover;
	object-position: top center;
	flex-shrink: 0;
}

.portfolio-item:hover img {
	transform: scale(1.05);
}


/* Описание секции портфолио */
.portfolio-description-text {
	margin: 2rem 0;
}

.portfolio-description-text p {
	font-size: 1.375rem;
	line-height: 1.6;
	font-weight: 300;
	color: var(--light-gray);
	margin: 0;
}

.portfolio-description-text p strong {
	
	font-weight: 500;
}

/* Описание работы в портфолио */
.portfolio-description {
	padding: 1.25rem;
	background: var(--bg);
	border-top: 0.0625rem solid var(--border);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.portfolio-description .title-s {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* Обмежує до 2 строчок */
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Скрывает переполнение */
	text-overflow: ellipsis;
	/* Добавляет многоточие */
}

.portfolio-description ul {
	list-style: none;
	padding: 0;
	margin: 0;

}

.portfolio-description ul li {
	padding: 0.3125rem 0;
	font-size: 0.875rem;
	font-weight: 300;
	color: var(--light-gray);
	border-bottom: 0.0625rem dotted var(--border);
	white-space: nowrap;
	/* Запрещает перенос строк */
	overflow: hidden;
	/* Скрывает переполнение */
	text-overflow: ellipsis;
	/* Добавляет многоточие */
	transition: border-color 0.3s ease;
}

.portfolio-description ul li:last-child {
	border-bottom: none;
}

.portfolio-description ul li strong {
	color: var(--text);
	font-weight: 500;
}

/* Контейнер кнопок в портфолио */
.portfolio-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Базовые стили для кнопок портфолио */
.portfolio-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	text-align: center;
}

/* Основная кнопка - Перейти на сайт */
.portfolio-link-primary {
	background: var(--accent-primary);
	font-weight: 600;
	font-size: 18px;
}


/* Вторичная кнопка - Хочу такой же сайт */
.portfolio-link-secondary {
	background: var(--bg-secondary);
	color: var(--text-dark);
	border: 0.0625rem solid var(--text);
}

.portfolio-item:hover .portfolio-link-primary {
	transform: scale(1.05);
}

.portfolio-link-secondary:hover {
	color: var(--text-dark);
	background: transparent;
	border-color: var(--accent-primary);
}

/* Третичная кнопка - Подробнее про работу */
.portfolio-link-tertiary {
	background: transparent;
	color: var(--light-gray);
	border: 0.0625rem solid var(--light-gray);
}

.portfolio-link-tertiary:hover {
	background: var(--light-gray);
	color: white;
	border-color: var(--light-gray);
}

.portfolio-link svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* Кнопка "Показать еще" в портфолио */
.portfolio-show-more {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.portfolio-show-more-btn {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 0.75rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.portfolio-show-more-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
	transition: transform 0.3s ease;
}

.portfolio-show-more-btn:hover {
	transform: translateY(-0.125rem);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.portfolio-show-more-btn:hover svg {
	transform: rotate(180deg);
}

/* Анимация загрузки */
.portfolio-show-more-btn.loading {
	pointer-events: none;
	opacity: 0.7;
}

.portfolio-show-more-btn.loading svg {
	animation: spin 1s linear infinite;
}

.portfolio-show-more-btn:disabled {
	pointer-events: none;
	opacity: 0.7;
	cursor: not-allowed;
}

.portfolio-show-more-btn .btn-loader {
	font-size: 0.875rem;
	color: currentColor;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}



/* Contacts Section Styles */
/* ========================================
   CONTACTS SECTION
   ======================================== */

#contacts {
	background: var(--bg-secondary);
	color: white;
	padding: 5rem 0;
}

#contacts .title-b {
	color: white;
	text-align: center;
	margin-bottom: 3rem;
}

.contacts-intro {
	font-size: 1.375rem;
	color: #ddd;
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 3rem;
}

#contacts a {
	text-decoration: none;
	border-bottom: none;
	color: var(--grey-text);
}

.contacts-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

.contacts-info {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0.75rem;
	border: 0.0625rem solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.contact-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-0.3125rem);
}

.contact-icon {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	background: var(--accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
}

.contact-icon svg {
	fill: var(--accent-primary);
}

.contact-details .title-s {
	color: white;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.contact-details p {
	color: #ddd;
	line-height: 1.6;
	margin: 0;
}

.contact-details a {
	
	text-decoration: none;
	transition: color 0.2s ease;
}

.contact-details a:hover {
	color: #e5a610;
}

.contacts-map {
	border-radius: 0.75rem;
	overflow: hidden;
	height: 100%;
	filter: grayscale(100%);
}

.contacts-map iframe {
	width: 100%;
	height: 100%;
	filter: invert(100%) hue-rotate(180deg);
	border: none;
}


/* Main Text Styles */
/* ========================================
   MAIN TEXT SECTION
   ======================================== */

#main-text {
	background: var(--bg);
	color: var(--text);
}

article {
  color: var(--text);
	font-weight: 300;
  line-height: 1.75;
  font-size: 1.05rem;
}

article h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 60px;
  margin-bottom: 25px;
  color: var(--text);
  line-height: 1.3;
}

article h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--text);
}

article p {
  margin-bottom: 20px;
	color: var(--grey-text);
	font-weight: 300;
}

article ul,
article ol {
  margin: 20px 0 20px 25px;
  padding-left: 15px;
}

article li {
  margin-bottom: 10px;
}

article strong {
  color: var(--text);
  font-weight: 600;
}

article a {
  text-decoration: none;
	color: var(--accent-primary);
  transition: color 0.2s ease, border-color 0.2s ease;
	border-bottom: 0.0625rem solid transparent;
}
article a:hover {
	color: var(--accent-primary);
	border-bottom: 0.0625rem solid var(--accent-primary);
}

article blockquote {
  background: var(--bg-secondary);
  padding: 15px 20px;
  margin: 30px 0;
  font-style: italic;
  color: var(--light-gray);
}

@media (max-width: 768px) {
  article {
    margin: 60px auto;
    font-size: 1rem;
  }

  article h2 {
    font-size: 1.6rem;
  }

  article h3 {
    font-size: 1.2rem;
  }
}



/* Footer Styles */
/* ========================================
   FOOTER SECTION
   ======================================== */

footer {
	background: #1a1a1a;
	color: #ddd;
	padding: 3rem 0 1rem;
}

footer a {
	text-decoration: none;
	border-bottom: none;
	font-weight: 300;
}

footer a:hover {
	border-bottom: none;
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-section .title-b {
	color: white;
	font-size: 1.1rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

.footer-section p {
	margin-bottom: 0.5rem;
	line-height: 1.6;
	color: var(--grey-text);
	font-weight: 300;
}

.footer-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-section ul li {
	margin-bottom: 0.5rem;
}

.footer-section ul li a {
	color: var(--grey-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-section ul li a:hover {
	
}

.footer-section a {
	color: var(--grey-text);
	text-decoration: none;
	transition: color 0.2s ease;
}


.footer-bottom {
	border-top: 0.0625rem solid #404040;
	padding-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-copyright p {
	margin: 0;
	color: #ddd;
	font-size: 0.9rem;
}

.footer-links {
	display: flex;
	gap: 2rem;
}

.footer-links a {
	color: #ddd;
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s ease;
}

.footer-links a:hover {
	
}












/* Success Modal */
.success-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	justify-content: center;
	align-items: center;
	padding: 20px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: fadeIn 0.3s ease-out;
}

.success-modal.show {
	display: flex;
}

.success-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}

.success-modal-content {
	position: relative;
	background: var(--bg-secondary);
	border-radius: 20px;
	padding: 40px;
	max-width: 500px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: slideUp 0.4s ease-out;
	z-index: 1;
}

.success-modal-content svg {
	width: 80px;
	height: 80px;
	color: #4CAF50;
	margin-bottom: 20px;
	animation: scaleIn 0.5s ease-out;
}

.success-modal-content h3 {
	font-size: 24px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 15px;
}

.success-modal-content p {
	font-size: 16px;
	color: var(--light-gray);
	line-height: 1.6;
	margin-bottom: 30px;
}

.success-modal-close {
	background: var(--accent);
	color: var(--white-color);
	border: none;
	padding: 12px 30px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.success-modal-close:hover {
	background: var(--bg-secondary);
	color: var(--white-color);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

@keyframes scaleIn {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}



.other-cities-section {
	margin-top: 40px;
	margin-bottom: 40px;
}

.other-cities-section .contacts-intro {
	margin-bottom: 10px;
}

.cities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.city-item {
	background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.city-link {
	text-decoration: none;
	color: #ced4da;
	padding: 10px;
	text-align: center;
	display: block;
	text-align: center;
}
.city-link:hover {
	color: var(--white-color);
}
.city-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-0.3125rem);
}

/* ========================================
   404 ERROR PAGE STYLES
   ======================================== */

.error-404.not-found {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5rem 0;
	background: var(--bg);
}

.error-404 .page-content {
	max-width: 50rem;
	width: 100%;
	margin: 0 auto;
	padding: 0 1.25rem;
	text-align: center;
}

.error-404 .page-header {
	margin-bottom: 2.5rem;
}

.error-404 .page-title {
	font-size: 8rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 1rem;
	line-height: 1;
	opacity: 0.9;
}

.error-404 .page-subtitle {
	font-size: 2rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 1.5rem;
}

.error-404 .error-content {
	margin-bottom: 3rem;
}

.error-404 .error-content p {
	font-size: 1.125rem;
	color: var(--light-gray);
	line-height: 1.6;
	margin-bottom: 2rem;
	font-weight: 300;
}

.error-404 .error-actions {
	margin-bottom: 3rem;
}

.error-404 .error-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2.5rem;
	background: var(--accent);
	color: var(--white-color);
	border: 0.125rem solid var(--accent);
	border-radius: 8px;
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border-bottom: none;
}

.error-404 .error-actions .button:hover {
	background: var(--bg-secondary);
	color: var(--white-color);
	border-color: var(--text);
	transform: translateY(-0.3125rem);
}

.error-404 .search-form-wrapper {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 0.0625rem solid var(--border);
}

.error-404 .search-form-wrapper h3 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 1.5rem;
}

.error-404 .search-form-wrapper form {
	display: flex;
	gap: 0.75rem;
	max-width: 30rem;
	margin: 0 auto;
}

.error-404 .search-form-wrapper input[type="search"] {
	flex: 1;
	padding: 0.875rem 1.25rem;
	background: var(--bg-secondary);
	border: 0.0625rem solid var(--border);
	border-radius: 8px;
	font-size: 1rem;
	color: var(--text);
	transition: all 0.3s ease;
}

.error-404 .search-form-wrapper input[type="search"]:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--bg);
}

.error-404 .search-form-wrapper input[type="submit"] {
	padding: 0.875rem 2rem;
	background: var(--accent);
	color: var(--white-color);
	border: 0.125rem solid var(--accent);
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.error-404 .search-form-wrapper input[type="submit"]:hover {
	background: var(--bg-secondary);
	border-color: var(--text);
	transform: translateY(-0.125rem);
}


/* Responsive styles for 404 page */
@media (max-width: 768px) {
	.error-404 .page-title {
		font-size: 5rem;
	}

	.error-404 .page-subtitle {
		font-size: 1.5rem;
	}

	.error-404 .error-content p {
		font-size: 1rem;
	}

	.error-404 .search-form-wrapper form {
		flex-direction: column;
	}

	.error-404 .search-form-wrapper input[type="submit"] {
		width: 100%;
	}
}