:root {

	--c-title: #000000;
	--c-text: #555555;
	--c-bg: #ffffff;
	--c-bg-lighter: #FFEED8;
	--c-bg-light: #FFE6C5;
	--c-border-colored: #D77A0255;
	--c-border: #9F978B54;

	--c-link: #FF9000;
	--c-link-hover: #D77A02;

	--c-gradient-1: #F8991C;
	--c-gradient-2: #FFA93A;
	--c-gradient-3: #FF9000;

	--c-gradient-1: #FFA93A;
	--c-gradient-2: #FF9000;
	--c-gradient-3: #FFA126;

	--c-btn-color: #fff;
	--c-btn-bg: var(--c-link);
	--c-btn-bg-hover: var(--c-link-hover);

	--site-width: 1200px;
	--site-padding: 40px;
	--nav-height: 70px;
	--radius: 10px;

	--gradient: linear-gradient(135deg, var(--c-gradient-3) 0, var(--c-gradient-2) 50%, var(--c-gradient-1) 100%);
	--text-gradient: linear-gradient(135deg, var(--c-gradient-3) 0, var(--c-link-hover) 100%);

}

* {box-sizing: border-box; outline-color: var(--c-gradient-2);}

html {scroll-behavior: smooth;}

body {background: var(--c-bg); color: var(--c-text); font-family: Cantarell, sans-serif; font-size: 18px; line-height: 1.5; margin: 0;}

@media screen and (max-width: 800px) {
	:root {
		--site-padding: 20px;
	}
}

:is(header, section, footer, nav) > .inner {margin: auto; max-width: var(--site-width); padding: 0 var(--site-padding);}

:is(header, section, footer) {
	& {overflow: hidden;}
	& > .inner {margin: 60px auto; width: 100%;}
}

.page {margin-top: 0px; background: var(--c-bg); position: relative;}

.wrapper {display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; align-content: stretch;}

nav {user-select: none; position: relative; top: 0; left: 0; z-index: 10; width: 100%; height: var(--nav-height); box-shadow: 0 0 10px 0 #0003;}
#menu-toggle:checked + nav {background: var(--c-bg);}

#menu-toggle {display: none;}

nav .inner {position: relative; display: grid; grid-template-columns: 1fr max-content 1fr; grid-template-areas: "logo items ritems"; gap: 15px; align-items: center; padding: 0 var(--site-padding) !important; height: 100%;}

nav .logo {grid-area: logo; display: flex;}
nav .logo img {height: 40px;}

nav .items {grid-area: items; display: flex; gap: 10px; font-weight: 700;}
nav .items > * {padding: 5px 10px; border-radius: var(--radius); line-height: 1.4;}

nav .items.items-main a {color: var(--c-text); text-decoration: none; transition: all .1s;}
nav .items.items-main > :is(.active, a:hover) {background-color: var(--c-bg-lighter); color: var(--c-title);}

nav .menu {cursor: pointer; display: none; grid-area: menu; align-items: center;}
nav .menu svg {height: 24px; width: 24px;}

nav .items.items-right {grid-area: ritems; flex-direction: row-reverse;}

@media screen and (max-width: 950px) {
	nav .inner {grid-template-columns: 1fr max-content max-content; grid-template-rows: var(--nav-height) min-content; grid-template-areas: "logo ritems menu" "items items items";}
	nav .menu {display: flex;}

	nav {overflow: hidden;}
	#menu-toggle:checked + nav {height: 100%;}
	#menu-toggle:checked + nav .inner {overflow-y: auto;}

	nav .items-main {flex-direction: column; gap: 5px; height: auto; line-height: 35px; padding-bottom: 20px;}
}

h1 {font-size: 220%; margin: 2.4rem 0 2rem;}
h2 {font-size: 180%; margin: 2.2rem 0 1.8rem;}
h3 {font-size: 150%; margin: 1.9rem 0 1.5rem;}
h4 {font-size: 110%; margin: 1.8rem 0 1.4rem;}

h1, h2, h3, h4, h5, h6 {color: var(--c-title); line-height: 1.2;}

@media screen and (max-width: 900px) {
	.home-grid {text-align: center; display: flex; flex-direction: column-reverse;}
	.home-grid img {max-width: 120px; margin: auto;}
	.head {min-height: 450px;}
}

.text-gradient {background: var(--text-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.text-center {text-align: center;}

.max800 {max-width: 800px; margin-left: auto; margin-right: auto;}
.max700 {max-width: 700px; margin-left: auto; margin-right: auto;}

.mt-3 {margin-top: 15px;}
.mt-5 {margin-top: 25px;}

.top-border {border-top: 1px solid var(--c-border);}
.bottom-border {border-bottom: 1px solid var(--c-border);}

.dual-section > .inner, .dual-grid {display: grid; gap: 60px 100px; grid-template-columns: 1fr 1fr;}
@media screen and (max-width: 700px) {
	.dual-section > .inner, .dual-grid {grid-template-columns: 1fr;}
}

.dual-3x2-section .inner {grid-template-columns: 3fr 2fr;}
.dual-4x3-section .inner {grid-template-columns: 4fr 3fr;}
@media screen and (max-width: 900px) {
	:is(.dual-3x2-section, .dual-4x3-section) .inner {grid-template-columns: 1fr;}
}

a {color: var(--c-link); text-decoration: none; font-weight: 700;}
a:hover {color: var(--c-link-hover); text-decoration: underline;}

header {
	& {background-image: url(/assets/img/sit.png), var(--gradient); background-size: cover; background-position: center; overflow: hidden; text-wrap: balance;}
	& > .inner {margin: 80px auto;}
	& * {color: #fff; margin: 0;}
	.inner > * {filter: drop-shadow(0 2px 3px #0006);}
	.btn {--c-btn-bg: #fff; --c-btn-bg-hover: #eee; --c-btn-color: var(--c-title);}
}

section.sub-header {

	& {background: var(--c-bg-lighter);}
	.inner {margin: 10px auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 20px;}
	button {margin: 0 -15px; background: transparent; border-radius: var(--radius); border: 0; font-weight: 900; display: flex; justify-content: center; align-items: center; gap: 10px; cursor: default;}
	button:hover {background-color: #fff; margin: 0;}
	svg {height: 30px; width: 30px;}

}

@media screen and (max-width: 950px) {
	section.sub-header .inner {display: grid; grid-template-columns: 1fr 1fr;}
}

@media screen and (max-width: 550px) {
	section.sub-header .inner {grid-template-columns: 1fr;}
}

header h1 {font-weight: 800;}
header p {font-size: 120%; font-weight: 700; margin: 16px 0;}

button, input, select, textarea, .btn {background: #fff; color: var(--c-title); font-family: inherit; font-size: inherit; border: 0; border-radius: var(--radius); padding: 10px 16px; line-height: inherit}
button, .btn {transition: all .1s; cursor: pointer; font-weight: 700;}

.btn-row {
	display: flex; flex-wrap: wrap; gap: 10px;
	&.center {justify-content: center;}
}

.btn {line-height: 1.2; display: inline-block; color: var(--c-btn-color); background: var(--c-btn-bg); user-select: none;}
.btn:hover {text-decoration: none; color: var(--c-btn-color); background: var(--c-btn-bg-hover);}
.btn:active {transform: scale(.95);}

.btn.btn-fancy {transition: transform .2s; --c-btn-bg: var(--gradient); box-shadow: 0 2px 5px 0 #0003; text-shadow: 0 0 6px #0003;}
.btn.btn-ic svg {margin: 0 4px -2.5px -1px;}

header .btn {margin-top: 5px;}

footer {

	& {border-top: 1px solid var(--c-border); background-color: color-mix(in srgb, var(--c-bg-lighter) 30%, #fff); position: relative; z-index: 9;}
	& > .inner {margin: 30px auto 35px; display: grid; gap: 0 15px; grid-template-columns: 1fr 1fr 1fr auto;}

	img {max-height: 34px; margin-top: 10px; margin-bottom: -5px;}
	h4 {margin-top: 17px;}

	ul {list-style: none; padding-left: 0;}
	ul li {margin-bottom: 5px;}
	ul .flex {display: flex; gap: 7px; align-items: center;}
	ul svg {height: 100%; margin-top: 1px;}

	.inner .bottom {
		grid-column: span 2; margin-top: 10px;
		svg {margin: 0 5px -2.5px 0;}
	}

	@media not (max-width: 900px) {
		.inner > :nth-last-child(1) {text-align: right;}
	}

	@media (max-width: 900px) {
		.inner .bottom {grid-column: span 1;}
		@media not (max-width: 520px) {
			& > .inner {grid-template-columns: 1fr 1fr; text-align: center;}
			ul .flex {justify-content: center;}
		}
	}

	@media screen and (max-width: 520px) {
		& > .inner {grid-template-columns: 1fr;}
	}

	a {color: var(--c-text);}
	a:hover {color: var(--c-title);}

}

.availability-check {

	& {text-align: center;}
	h2 {margin: 0;}
	.inner > p {max-width: 700px; margin-left: auto; margin-right: auto;}

	.result {
		& {display: none; margin: 40px 0;}
		&.visible {display: block;}
	}

}

.address-input-box {

	--background: color-mix(#fff9 70%, var(--c-gradient-2));

	max-width: 700px; margin: auto;
	.inner {padding: 7px; position: relative; z-index: 100; position: relative; backdrop-filter: blur(20px); border-radius: 15px;}

	.indicator {position: absolute; right: 7px; top: 7px; padding: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; pointer-events: none;}

	input {height: 48px; width: 100%; outline: none; font-weight: 700; color: var(--c-text); box-shadow: 0 0 0 2px var(--c-border); padding-right: 45px;}
	input:focus {color: var(--c-title);}

	.loading-indicator {display: none;}
	.search-indicator {display: flex;}
	&.loading .loading-indicator {display: flex;}
	&.loading .search-indicator {display: none;}

	.address-list {display: none; flex-direction: column; gap: 2px; padding-top: 5px;}
	.address-list > * {padding: 6px 15px; text-align: left;}

	.address-list > button {background-color: #fff8;}
	.address-list > button:hover {cursor: pointer; background-color: #fff; border-radius: var(--radius); box-shadow: 0 0 5px #0001;}

	&.show-list {
		.inner {box-shadow: 0 5px 5px #0001; background-color: var(--background);}
		.address-list {display: flex;}
		input {border: none; box-shadow: 0 2px 10px #0002;}
	}

}

.plan-section .address-input-box {
	height: 62px;
	input {box-shadow: 0 2px 10px #0002;}
	.inner {border-radius: var(--radius); background-color: var(--background); box-shadow: 0 2px 10px #0002;}
}

.header-merge {
	background-image: linear-gradient(to bottom, transparent 60%, var(--c-bg)), url(/assets/img/sit.png), var(--gradient);
	.inner {margin-bottom: 300px;}
	& + section {overflow: initial; padding-bottom: 10px;}
	& + section.plan-section .inner {margin-top: -255px;}
	& + section.business-cards .inner {margin-top: -225px;}
}

.plan-section {
	text-align: center;
	.inner {max-width: 100%;}
}

.plan-selector {

	& {display: inline-flex; flex-wrap: wrap; gap: 7px; margin: auto; padding: 7px; border-radius: 10px; background-color: #fff7;}
	.btn {--c-btn-color: var(--c-text); --c-btn-bg: transparent; --c-btn-bg-hover: #fff9; font-size: 17.5px; font-weight: 700; width: 100%;}

	input {opacity: 0; position: absolute;}
	input:checked + .btn {box-shadow: 0 0 10px 0 #0002; --c-btn-color: var(--c-title); background: #fff;}
	input:focus-visible + .btn {outline: 2px solid;}
	svg {margin: -9px 6px 0 -2px; vertical-align: middle;}

	label:has(input:disabled) * {cursor: not-allowed;}

}

@media (max-width: 500px) {
	.plan-selector {display: inline-grid;}
}

.plans {display: flex; flex-wrap: wrap; gap: 15px; text-align: left; justify-content: center; margin: 40px 0;}

.plans .plan {

	& > svg {position: absolute; right: 25px; top: 35px; font-size: 24px;}

	& {width: 100%; max-width: 340px; padding: 25px; box-shadow: 0 1px 5px 0 #0002; border-radius: var(--radius); display: flex; align-items: start; gap: 15px; flex-direction: column; background-color: var(--c-bg); position: relative; transition: all .3s;}
	* {margin: 0;}

	h4 {font-size: 140%; font-weight: 400; margin-bottom: 5px; border-bottom: 2px solid var(--c-border-colored); padding-bottom: 5px; display: inline-block;}
	h4 span {font-size: 140%; font-weight: 900; background: linear-gradient(-50deg, var(--c-gradient-1) 0, var(--c-gradient-2) 50%, var(--c-gradient-3) 100%); background-clip: text; -webkit-text-fill-color: transparent;}

	.price {color: var(--c-title); margin-top: auto;}
	.price span {font-size: 130%; font-weight: 700;}

	a {display: inline-block; font-weight: 700; border-bottom: 2px solid var(--c-border-colored); margin-top: -3px; text-decoration: none;}

}

.hidden {display: none !important;}

.plans-border {border: 1px solid var(--c-border); box-shadow: 0 2px 5px 0 #0001;}

.fancy-dual-section {
	h2 {margin-top: -5px;}
	.heroic svg {font-size: 50px; float: left; margin-top: -10px; margin-right: 15px; color: var(--c-gradient-2);}
}

.net-tv-dual-section {

	.icon svg {font-size: 90px; position: absolute; top: -10px; right: -10px; opacity: .5; transform: rotate(20deg);}

	h3 {margin: 15px 0; padding-right: 60px;}
	h4 {font-size: 1em;}

	& > .inner {align-items: start;}
	& > .inner > * {position: relative;}

	.feature {
		svg {background: var(--gradient); padding: 10px; width: 50px; height: 50px; border-radius: 50%; color: #fff; margin-bottom: 3px;}
		h4, p {margin: 2px 0;}
		display: grid; grid-template-columns: max-content 1fr; gap: 15px; align-items: center; margin: 25px 0;
	}

	.card {
		.inner {margin: 25px; position: relative;}
		h3, h4, p, .feature svg, .btn {color: #fff; filter: drop-shadow(0 1px 2px #0003);}
		.feature svg {background: #fff3; color: #fff;}
		background: var(--gradient); color: #fff; padding: 0; margin: -15px -10px;
		.btn {--c-btn-bg: transparent; --c-btn-bg-hover: #fff2; box-shadow: inset 0 0 0 1px #fff5;}
	}

}

.additional-box {

	& {display: grid; grid-template-columns: 85px 1fr 110px; padding: 15px 25px; max-width: 900px; margin: 40px auto; box-shadow: 0 4px 11px #0001; border-radius: var(--radius); border: 1px solid var(--c-border); text-align: left; gap: 15px 40px;}
	img {max-width: 100%;}
	h4, p {margin: 10px 0;}
	h4 {font-size: 120%;}
	.price {font-weight: 700; font-size: 120%; margin: 7px 0; text-align: right;}

	@media screen and (max-width: 900px) {
		& {display: block; gap: 0; padding: 25px;}
		& > :nth-child(3n):not(:nth-last-child(1)) {margin-bottom: 40px;}
		img {max-width: 70px;}
		.price {text-align: left;}
	}

}

.inp {

	display: block; margin: 7px 0; width: 100%; border: 1px solid #0002; padding: 7px 11px; line-height: 1; box-shadow: 0 1px 2px 0 #0001;
	&:focus {border-color: transparent; outline: 2px auto var(--c-gradient-2);}

	&[disabled] {background-color: var(--c-bg-lighter); cursor: not-allowed;}

}

textarea.inp {line-height: 1.5; resize: vertical;}

.contact-item {
	& {display: grid; grid-template-columns: max-content 1fr; grid-template-rows: max-content max-content; grid-template-areas: "icon ." "icon ."; gap: 2px 15px; margin: 20px 0; text-decoration: none !important;}
	svg {grid-area: icon; padding: 10px; width: 60px; height: 60px; border-radius: 50%; background: var(--gradient); color: #fff;}
	h4, p {margin: 0;}
	h4 {font-size: 105%; margin-top: 3px; color: var(--c-link-hover);}
	p {font-size: 115%; color: var(--c-text);}
}

.card {padding: 25px; box-shadow: 0 1px 5px 0 #0002; border-radius: var(--radius); background-color: var(--c-bg);}

.business-cards .inner {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 15px;
	.card {display: flex; flex-direction: column; gap: 10px; text-align: center; padding: 35px 25px;}
	.card > * {margin: 0;}
	.card > svg {background: var(--gradient); width: 60px; height: 60px; padding: 10px; border-radius: var(--radius); color: #fff; margin: auto; margin-bottom: 7px;}
	h4 {font-weight: 900; font-size: 1.2em;}
}

.select-plan {

	margin: 60px auto;

	input {position: absolute; pointer-events: none; opacity: 0;}
	input + * {transition: all .2s;}
	input:checked + * {
		box-shadow: 0 0 10px var(--c-gradient-1), 0 0 0 7px color-mix(var(--c-gradient-2), #fff), 0 0 10px 5px #0004; margin: 0 14px; transform: scale(1.04); z-index: 1;
	}

	.btn > * {display: none;}
	input:not(:checked) + * .btn {
		--c-btn-bg: var(--c-gradient-1);
		:nth-child(1) {display: block;}
	}
	input:checked + * .btn {
		background: var(--gradient);
		svg {filter: drop-shadow(0 0 5px #0003);}
		:nth-child(2) {display: flex; align-items: center; gap: 6px;}
	}

}

.select-plan:not(:has(.plan:not(.hidden))) + div {display: none;}

.order {
	.order-form {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px;
		input {margin: 0; width: auto; max-width: 300px; width: 100%;}
	}
}

.minibenefits {
	display: flex; flex-wrap: wrap; justify-content: center; margin: 35px 0; gap: 15px 25px;
	& > * {display: flex; align-items: center; gap: 10px; font-weight: 700;}
	svg {color: #fff; background: var(--gradient); border-radius: 12px; padding: 5px; font-size: 34px;}
}

.reviews {
	.inner:nth-child(2) {max-width: 100%; padding: 0; margin-top: -30px;}
	.card {
		margin: 10px 0;
		p {margin: 10px 0; margin-bottom: 0;}
		.stars {float: right; display: inline; color: var(--c-gradient-2);}
		.date {font-size: .9em;}
		h3 {font-size: 1.1em; display: inline;}
	}
}