@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
	--bg-primary: #070b14;
	--bg-secondary: #0c1220;
	--bg-tertiary: #131c2e;
	--text-main: #eaf0ff;
	--text-muted: #9fb2d9;
	--accent: #4cc9f0;
	--accent-2: #7b6dff;
	--accent-3: #2ff3b1;
	--danger: #ff6ca8;
	--border-glass: rgba(138, 160, 255, 0.2);
	--shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.45);
	--shadow-glow: 0 0 0 1px rgba(76, 201, 240, 0.25), 0 10px 32px rgba(41, 171, 226, 0.2);
}

html,
body {
	background: radial-gradient(circle at 20% 15%, rgba(76, 201, 240, 0.18), transparent 30%),
				radial-gradient(circle at 85% 75%, rgba(123, 109, 255, 0.16), transparent 35%),
				linear-gradient(160deg, var(--bg-primary) 0%, #090f1c 48%, #070b14 100%);
	color: var(--text-main);
	font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
	min-height: 100%;
	overflow-x: hidden;
}

body::before,
body::after {
	content: '';
	position: fixed;
	pointer-events: none;
	z-index: 0;
}

body::before {
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
					  linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(circle at center, #000 20%, transparent 80%);
	opacity: 0.22;
}

body::after {
	width: 28vw;
	height: 28vw;
	min-width: 240px;
	min-height: 240px;
	border-radius: 999px;
	right: -6vw;
	top: -8vw;
	background: radial-gradient(circle, rgba(47, 243, 177, 0.28) 0%, rgba(47, 243, 177, 0) 68%);
	filter: blur(12px);
	animation: float-ambient 12s ease-in-out infinite alternate;
}

main,
.container,
.container-fluid,
section,
header,
footer,
nav {
	position: relative;
	z-index: 1;
}

a {
	color: var(--accent);
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover,
a:focus {
	color: #7ee5ff;
	text-shadow: 0 0 16px rgba(76, 201, 240, 0.45);
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
	color: #f4f7ff;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

h1,
h2,
h3,
.display,
[class*='title'] {
	font-weight: 800;
}

p,
small,
li,
label,
span {
	color: var(--text-muted);
}

code,
pre,
kbd,
samp,
.mono,
[class*='code'] {
	font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

.navbar,
nav.navbar {
	background: linear-gradient(120deg, rgba(11, 17, 32, 0.92), rgba(12, 26, 50, 0.9));
	border: 1px solid rgba(144, 170, 255, 0.18);
	border-radius: 14px;
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(8px);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.navbar:hover,
nav.navbar:hover {
	border-color: rgba(76, 201, 240, 0.35);
	box-shadow: var(--shadow-glow);
}

.navbar-brand {
	font-weight: 700;
	position: relative;
}

.navbar-brand::after {
	content: ' // SMM services provider';
	margin-left: 8px;
	color: var(--accent-3);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72em;
	opacity: 0.9;
}

.navbar-nav > li > a {
	color: var(--text-main) !important;
	border-radius: 10px;
	margin: 4px 2px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
	background: rgba(76, 201, 240, 0.14) !important;
	transform: translateY(-1px);
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
	background: linear-gradient(130deg, rgba(76, 201, 240, 0.25), rgba(123, 109, 255, 0.22)) !important;
	color: #ffffff !important;
	text-shadow: 0 0 10px rgba(76, 201, 240, 0.4);
	border: 1px solid rgba(76, 201, 240, 0.35);
}

.nav-tabs {
	border-bottom-color: rgba(138, 160, 255, 0.28);
}

.nav-tabs > li > a {
	color: var(--text-main);
	background: rgba(12, 18, 32, 0.75);
	border: 1px solid rgba(138, 160, 255, 0.22);
	border-bottom-color: transparent;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
	background: rgba(76, 201, 240, 0.14);
	color: #ffffff;
	border-color: rgba(76, 201, 240, 0.4);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background: linear-gradient(130deg, rgba(76, 201, 240, 0.28), rgba(123, 109, 255, 0.25)) !important;
	color: #ffffff !important;
	border: 1px solid rgba(76, 201, 240, 0.45) !important;
	border-bottom-color: rgba(76, 201, 240, 0.45) !important;
}

.btn,
button,
input[type='button'],
input[type='submit'],
.dev-btn {
	border: 1px solid rgba(125, 165, 255, 0.28);
	border-radius: 12px;
	color: #ecf3ff;
	background: linear-gradient(160deg, rgba(25, 38, 65, 0.95), rgba(19, 27, 46, 0.95));
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
	position: relative;
	overflow: hidden;
}

.btn::before,
button::before,
input[type='button']::before,
input[type='submit']::before,
.dev-btn::before {
	content: '';
	position: absolute;
	inset: -40% auto auto -20%;
	width: 52%;
	height: 180%;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.2), transparent 70%);
	transform: rotate(12deg) translateX(-180%);
	transition: transform 0.7s ease;
}

.btn:hover,
button:hover,
input[type='button']:hover,
input[type='submit']:hover,
.btn:focus,
button:focus,
input[type='button']:focus,
input[type='submit']:focus,
.dev-btn:hover,
.dev-btn:focus {
	transform: translateY(-2px);
	border-color: rgba(76, 201, 240, 0.45);
	box-shadow: var(--shadow-glow);
	filter: saturate(1.12);
}

.btn:hover::before,
button:hover::before,
input[type='button']:hover::before,
input[type='submit']:hover::before,
.dev-btn:hover::before {
	transform: rotate(12deg) translateX(250%);
}

.panel,
.card,
.well,
.jumbotron,
.thumbnail,
.modal-content,
.alert,
table,
pre,
blockquote,
form,
.list-group-item {
	background: linear-gradient(165deg, rgba(16, 24, 43, 0.88), rgba(12, 18, 32, 0.88));
	border: 1px solid var(--border-glass) !important;
	border-radius: 14px !important;
	box-shadow: var(--shadow-soft);
	color: var(--text-main);
}

.form-control,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
textarea,
select {
	background: rgba(7, 13, 25, 0.78);
	border: 1px solid rgba(152, 175, 255, 0.28);
	color: var(--text-main);
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: rgba(76, 201, 240, 0.7);
	box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.16);
	outline: none;
}

::placeholder {
	color: #7f97c8;
}

::selection {
	color: #031120;
	background: #67ddff;
}

.dev-badge {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	padding: 9px 12px;
	border-radius: 999px;
	border: 1px solid rgba(76, 201, 240, 0.38);
	background: rgba(8, 16, 30, 0.9);
	color: #cbeeff;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.02em;
	box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.12), 0 12px 26px rgba(0, 0, 0, 0.4);
	animation: pulse-badge 2.8s ease-in-out infinite;
}

.dev-badge::before {
	content: '●';
	color: var(--accent-3);
	margin-right: 8px;
	text-shadow: 0 0 12px rgba(47, 243, 177, 0.8);
}

.smm-emoji-layer {
	position: fixed;
	inset: 0;
	z-index: 20;
	overflow: hidden;
	pointer-events: none;
}

.smm-emoji-item {
	position: absolute;
	left: var(--start-x, 50vw);
	bottom: -10vh;
	opacity: 0;
	filter: drop-shadow(0 0 12px rgba(76, 201, 240, 0.4));
	animation: emoji-screen-float var(--float-duration, 11s) linear infinite;
	animation-delay: var(--float-delay, 0s);
	will-change: transform, opacity;
}

.cursor-glow {
	position: fixed;
	width: 160px;
	height: 160px;
	margin-left: -80px;
	margin-top: -80px;
	pointer-events: none;
	z-index: 9998;
	border-radius: 50%;
	opacity: 0.32;
	background: radial-gradient(circle, rgba(76, 201, 240, 0.42), rgba(76, 201, 240, 0));
	mix-blend-mode: screen;
	transition: transform 0.06s linear;
}

.dev-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: transform 0.55s ease, opacity 0.55s ease;
}

.dev-reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

@keyframes pulse-badge {
	0%,
	100% {
		transform: translateY(0);
		box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.12), 0 12px 26px rgba(0, 0, 0, 0.4);
	}
	50% {
		transform: translateY(-3px);
		box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.28), 0 18px 34px rgba(0, 0, 0, 0.45);
	}
}

@keyframes float-ambient {
	0% {
		transform: translateY(0) scale(1);
	}
	100% {
		transform: translateY(22px) scale(1.08);
	}
}

@keyframes emoji-screen-float {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(0.92);
		opacity: 0;
	}
	12% {
		opacity: var(--peak-opacity, 0.85);
	}
	85% {
		opacity: var(--peak-opacity, 0.85);
	}
	100% {
		transform: translate3d(var(--drift-x, 0px), -125vh, 0) rotate(var(--spin, 8deg)) scale(1.12);
		opacity: 0;
	}
}

@media (max-width: 992px) {
	body::after {
		right: -18vw;
		top: -14vw;
		opacity: 0.7;
	}

	.navbar,
	nav.navbar {
		border-radius: 0;
	}

	.smm-emoji-item {
		filter: drop-shadow(0 0 8px rgba(76, 201, 240, 0.22));
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}