/* ============================================================
   content.css — sections under the hero for rvoronov.ru
   Keeps the original "Aerial" look. Makes the page scrollable
   (template is fixed/hidden by default) and styles the new
   content blocks below the header in the same visual language.
   Loaded AFTER main.css so these rules win the cascade.
   ============================================================ */

/* --- make the page scrollable (original template is fixed/hidden) --- */
html { overflow-x: hidden; overflow-y: auto; }
body { overflow: visible !important; height: auto !important; min-height: 100%; }

#wrapper { position: relative !important; height: auto !important; min-height: 100vh; }

/* hero = first full screen, no longer a fixed full-page layer */
#main { position: relative !important; height: 100vh !important; }

/* #bg and #overlay stay position:fixed -> animated backdrop shows behind
   the content while scrolling (unchanged from main.css) */

/* footer returns to normal flow at the very end of the page */
#footer { position: relative !important; height: auto !important; line-height: 1.75em !important; padding: 2.5em 0; }

/* --- scroll hint at the bottom of the hero --- */
.scroll-hint {
	position: absolute;
	bottom: 1.5em;
	left: 50%;
	transform: translateX(-50%);
	border: 0 !important;
	opacity: 0.7;
	animation: scroll-bounce 2s ease-in-out infinite;
}
.scroll-hint:before { font-size: 1.5em; }
@keyframes scroll-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(0.5em); }
}

/* ============================================================
   Content
   ============================================================ */

#content {
	position: relative;
	z-index: 1;
	text-align: left;
	background: rgba(8, 14, 22, 0.66);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

#content .inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 2em;
}

#content section {
	padding: 4.5em 0;
	border-top: solid 1px rgba(255, 255, 255, 0.12);
}
#content section:first-of-type { border-top: 0; }

#content h2 {
	font-size: 2.1em;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1em;
	margin: 0 0 1em 0;
	text-align: center;
}
#content h2:after {
	content: '';
	display: block;
	width: 2.5em;
	height: 3px;
	margin: 0.6em auto 0;
	background: #6fd0ef;
}

#content h3 {
	font-weight: 900;
	font-size: 1.15em;
	letter-spacing: -0.02em;
	margin: 0 0 0.6em 0;
	color: #6fd0ef;
}

#content p { margin: 0 0 1em 0; opacity: 0.92; }
#content p:last-child { margin-bottom: 0; }

/* About */
.about { max-width: 820px; margin: 0 auto; text-align: center; }
.about .lead { font-size: 1.1em; }

/* Competence columns */
.cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5em;
}
.cols ul { list-style: none; padding: 0; margin: 0; }
.cols li {
	padding: 0.45em 0;
	border-bottom: solid 1px rgba(255, 255, 255, 0.08);
	opacity: 0.9;
	line-height: 1.4em;
}
.cols li:last-child { border-bottom: 0; }

/* Tech tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.65em; justify-content: center; }
.tags span {
	border: solid 1px rgba(255, 255, 255, 0.3);
	border-radius: 2em;
	padding: 0.4em 1.1em;
	font-size: 0.95em;
	line-height: 1.4em;
	white-space: nowrap;
}

/* What I build */
.build {
	columns: 2;
	column-gap: 3em;
	max-width: 780px;
	margin: 1.75em auto 0;
	list-style: none;
	padding: 0;
}
.build li {
	padding: 0.35em 0 0.35em 1.4em;
	position: relative;
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}
.build li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.95em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 100%;
	background: #6fd0ef;
}

/* Numbers */
.stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5em;
	text-align: center;
}
.stats .n {
	font-size: 2.6em;
	font-weight: 900;
	line-height: 1.05em;
	color: #6fd0ef;
}
.stats .l { font-size: 0.95em; opacity: 0.85; line-height: 1.35em; margin-top: 0.4em; }

/* Project cards */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5em;
}
.card {
	background: rgba(255, 255, 255, 0.05);
	border: solid 1px rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 1.6em;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.card:hover {
	transform: translateY(-4px);
	border-color: #6fd0ef;
	background: rgba(255, 255, 255, 0.08);
}
.card .tag {
	display: block;
	color: #6fd0ef;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 0.4em;
}
#content .card h3 { color: #fff; margin-bottom: 0.4em; }
#content .card h3 a { color: #6fd0ef; border-bottom: dotted 1px; }
#content .card h3 a:hover { border-color: transparent; }
.card p { font-size: 0.95em; opacity: 0.82; margin: 0; line-height: 1.55em; }

/* CTA */
.cta { text-align: center; }
.cta p { max-width: 640px; margin: 0 auto 1.75em; opacity: 0.92; }
.button {
	display: inline-block;
	border: solid 2px #6fd0ef !important;
	border-radius: 2em;
	padding: 0.8em 2.6em;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background 0.2s ease, color 0.2s ease;
}
.button:hover { background: #6fd0ef; color: #0a0f17; border-color: #6fd0ef !important; }

/* ============================================================
   Responsive
   ============================================================ */

@media screen and (max-width: 980px) {
	.cols, .cards { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(2, 1fr); }
	#content h2 { font-size: 1.8em; }
}

@media screen and (max-width: 600px) {
	.cols, .cards { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr 1fr; }
	.build { columns: 1; }
	#content .inner { padding: 0 1.35em; }
	#content section { padding: 3.5em 0; }
	.tags span { font-size: 0.9em; }
}