:root{
	--bg: #f7f9fc;
	--surface: #ffffff;
	--text: #0d1b2a;
	--muted: #5b6b7b;
	--primary: #2b7fff; /* blue */
	--primary-2: #5fb7ff; /* sky */
	--accent: #0ea5e9; /* cyan */
	--success: #16a34a;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
	font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background:
		radial-gradient(1000px 500px at 10% -10%, rgba(43,127,255,.10), transparent 60%),
		radial-gradient(1000px 500px at 90% 0%, rgba(14,165,233,.10), transparent 60%),
		var(--bg);
	color: var(--text);
}

.fw-extrabold{ font-weight: 900 }
.text-muted-70{ color: #475569 } /* slate-600 */
.text-muted-80{ color: #334155 } /* slate-700 */

.bg-blur{
	background: rgba(255,255,255,.7);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid rgba(13,27,42,.06);
}

.btn-gradient{
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
	color: #ffffff;
	border: 0;
	box-shadow: 0 6px 18px rgba(43,127,255,.25);
}
.btn-gradient:hover{ filter: brightness(1.05) }

.gradient-text{
	background: linear-gradient(90deg, #0d1b2a, var(--primary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero{ padding-top: 96px }
.py-7{ padding-top: 5rem; padding-bottom: 5rem }

.glass{
	background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
	border: 1px solid rgba(13,27,42,.06);
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(13,27,42,.08);
}

.hero-card .hero-stats{ display:grid; grid-template-columns: repeat(3, 1fr) }
.hero-card .stat{ padding: 12px 16px; flex:1; }
.hero-card .value{ font-weight: 700; font-size: 1.25rem }
.hero-card .label{ color: var(--muted); font-size:.85rem }

.badge.subtle{ background: rgba(43,127,255,.08); color: var(--primary); border: 1px solid rgba(43,127,255,.18) }

.bg-shapes::before, .bg-shapes::after{
	content:""; position:absolute; inset:auto auto -20% -10%; width: 60vw; height:60vw;
	background: radial-gradient(circle at 30% 30%, rgba(43,127,255,.12), transparent 50%),
							radial-gradient(circle at 60% 60%, rgba(14,165,233,.12), transparent 60%);
	filter: blur(70px); z-index:-1; transform: rotate(15deg);
}
.bg-shapes::after{ inset:auto -10% -30% auto; transform: rotate(-10deg) }

.mini-card{ padding: 16px; }
.mini-card .label{ font-size:.8rem; color: var(--muted) }

.icon-wrap{ font-size: 1.75rem; color: var(--primary) }

.service-card:hover, .project-card:hover{ transform: translateY(-4px) }
.service-card, .project-card{ transition: transform .25s ease; }

.reveal{ opacity: 0; transform: translateY(10px); transition: .6s ease }
.reveal.in{ opacity: 1; transform: none }

.about-frame{ position:relative }
.about-badge{ position:absolute; bottom: 12px; right: 12px; padding: 6px 10px; font-size:.85rem }

.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--muted) }
.dot-1{ background: var(--primary) }
.dot-2{ background: var(--accent) }
.dot-3{ background: var(--success) }

footer{ background: linear-gradient(180deg, rgba(255,255,255,0), rgba(13,27,42,.04)) }

/* Forms */
.form-control, .form-select{
	background-color: #ffffff;
	color: var(--text);
	border-color: rgba(13,27,42,.16);
}
.form-control::placeholder{ color: #6b7f93 }
.form-control:focus, .form-select:focus{
	background-color: #ffffff;
	color: var(--text);
	border-color: var(--primary);
	box-shadow: 0 0 0 .25rem rgba(43,127,255,.2);
}

/* Utilities */
.lift-in{ animation: liftIn .8s cubic-bezier(.2,.8,.2,1) both }
@keyframes liftIn{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform:none } }

@media (max-width: 991.98px){
	.hero{ padding-top: 80px }
}

/* Cookie banner */
.cookie-banner{
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	max-width: 920px;
	margin: 0 auto;
	z-index: 1080;
}
.cookie-actions .btn{ min-width: 110px }