:root {
	--bg-1: #071c37; /* deep */
	--bg-2: #071931;
	--accent: #00BCD4;
	--primary: #114986;
	--glass-bg: rgba(255,255,255,0.04);
	--glass-border: rgba(255,255,255,0.06);
	--text-light: #eaf6ff;
	--card-radius: 14px;
}

html, body {
	height: 100%;
	font-family: Roboto,system-ui,-apple-system,'Segoe UI',sans-serif;
	background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
	color: var(--text-light);
}
/* Glassmorphism container */
.glass {
	backdrop-filter: blur(6px);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--card-radius);
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	height: 86vh;
	min-height: 520px;
	display: flex;
	align-items: center
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transition: opacity 1s ease;
	opacity: 0
}

	.hero-slide.active {
		opacity: 1
	}

.hero-overlay {
	position: relative;
	z-index: 3;
	padding: 3rem
}

.typewriter {
	font-weight: 700;
	font-size: 1.5rem
}

.parallax-bg {
	transform: scale(1.1);
}
/* subtle */

/* Cards grid */
.card-glass {
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 1.25rem
}

/* Floating elements */
.floating-ws {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 1200
}

.scroll-top {
	position: fixed;
	right: 22px;
	bottom: 92px;
	z-index: 1100
}

/* Dark/Light toggle */
.theme-toggle {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 1200
}

/* Testimonials */
.testimonial {
	opacity: 0.98;
	padding: 1rem
}

/* Portfolio images */
.portfolio-img {
	height: 180px;
	object-fit: cover;
	border-radius: 10px
}

.glass .img-thumbnail { border: none; }
/* Responsive adjustments */
@media (max-width:767px) {
	.hero {
		height: 100vh;
		min-height: 420px
	}

	.typewriter {
		font-size: 1.1rem
	}
}

/* Light mode */
.light {
	--bg-1: #f6fbff;
	--bg-2: #eef7ff;
	--text-light: #071931;
	--glass-bg: rgba(255,255,255,1);
	--glass-border: rgba(10,10,10,0.04)
}

a, button {
	transition: transform .12s ease
}

a:hover, button:hover {
		transform: translateY(-2px)
	}
.glass {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
	padding: 26px;
	box-shadow: 0 8px 30px rgba(2,6,23,0.45);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	backdrop-filter: blur(8px) saturate(120%);
}

	.glass:hover {
		transform: translateY(-10px) rotateX(0.5deg);
		box-shadow: 0 22px 60px rgba(2,6,23,0.6);
	}
.service-icon {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
	border: 1px solid rgba(255,255,255,0.03);
}