:root {
	--ink: #07111f;
	--ink-soft: #0d1b2d;
	--panel: #f7fafc;
	--panel-soft: #edf4f7;
	--text: #203044;
	--muted: #5a6b7d;
	--line: #d7e2e8;
	--cyan: #27c3d9;
	--cyan-dark: #087f91;
	--copper: #df8b4a;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background:
		radial-gradient(circle at 15% 5%, rgba(39, 195, 217, 0.16), transparent 30rem),
		radial-gradient(circle at 90% 20%, rgba(223, 139, 74, 0.11), transparent 24rem),
		var(--ink);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: rgba(255, 255, 255, 0.78);
	overflow-wrap: break-word;
}

body, input, select, textarea, button { font-family: inherit; }

a { color: var(--cyan-dark); }
a:hover { color: #056371; }

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 20000;
	transform: translateY(-200%);
	background: #fff;
	color: var(--ink);
	padding: 0.65rem 0.9rem;
	border-radius: 0.4rem;
}
.skip-link:focus { transform: translateY(0); }

#wrapper { max-width: 76em; }

#header { padding: 5.5em 4em 4.5em; }
#header.inner { padding: 4.5em 3em 3.25em; }

.brand-logo {
	display: block;
	width: clamp(6.5rem, 12vw, 8.5rem);
	height: auto;
	margin: 0 auto 1.5rem;
	filter: drop-shadow(0 1rem 1.8rem rgba(0,0,0,0.24));
}

.eyebrow {
	margin: 0 0 0.85rem;
	color: #8fe7f2;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

#header h1 { font-weight: 650; letter-spacing: -0.045em; }
#header.alt h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); }
#header p { max-width: 44rem; margin-left: auto; margin-right: auto; font-size: 1.15rem; }

.hero-actions { justify-content: center; margin-top: 2rem; }
.hero-proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin: 1.5rem 0 0;
	padding-left: 0;
	list-style: none;
}
.hero-proof li {
	list-style: none;
	padding: 0.45rem 0.75rem;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	background: rgba(255,255,255,0.045);
	color: rgba(255,255,255,0.8);
	font-size: 0.83rem;
}
.hero-proof li::marker { content: ""; }
.hero-proof .icon { margin-right: 0.35rem; color: #8fe7f2; }

#nav {
	background: rgba(247,250,252,0.95);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(12px);
}
#nav a { color: #4b5c6d; font-weight: 550; }
#nav a:hover, #nav a.active { color: var(--ink); }
#nav a.active { background: rgba(39,195,217,0.12); }

#main {
	background: var(--panel);
	color: var(--text);
	box-shadow: 0 2.5rem 6rem rgba(0,0,0,0.25);
}
#main > .main { border-color: var(--line); }
#main h1, #main h2, #main h3, #main h4, #main strong { color: var(--ink); }
#main p, #main li { color: var(--muted); }

header.major h2:after {
	background: linear-gradient(90deg, var(--cyan), var(--copper));
	height: 3px;
}

.intro-grid, .split-grid, .contact-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 3rem;
	align-items: start;
}

.signal-card {
	position: relative;
	overflow: hidden;
	padding: 2rem;
	border: 1px solid #c8d9e1;
	border-radius: 1rem;
	background: var(--ink-soft);
	box-shadow: 0 1.25rem 2.7rem rgba(7,17,31,0.16);
}
.signal-card:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0 12%, rgba(39,195,217,0.08) 12% 12.4%, transparent 12.4% 55%, rgba(223,139,74,0.07) 55% 55.4%, transparent 55.4%);
	pointer-events: none;
}
.signal-card > * { position: relative; }
.signal-card .icon { color: var(--cyan); font-size: 1.7rem; }
.signal-card h3 { color: #fff !important; margin-top: 1rem; }
.signal-card p { color: rgba(255,255,255,0.68) !important; }
.signal-card dl { margin: 1.5rem 0 0; }
.signal-card dt { color: #8fe7f2; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.signal-card dd { margin: 0.25rem 0 1rem; color: #fff; }

.features.service-list { align-items: stretch; }
.features.service-list li {
	padding: 1.65rem;
	border: 1px solid var(--line);
	border-radius: 0.9rem;
	background: #fff;
	box-shadow: 0 0.75rem 1.8rem rgba(19,50,68,0.055);
}
#main .features.service-list .icon.major {
	display: inline-grid;
	place-items: center;
	width: 5.2rem;
	height: 5.2rem;
	padding: 0;
	margin: 0 0 1.5rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	line-height: 1;
}
#main .features.service-list .icon.major:before {
	display: block;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--cyan-dark);
}
#main .features.service-list .icon.major:after { display: none; }

.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 2rem 0;
	counter-reset: step;
}
.process-step {
	counter-increment: step;
	padding: 1.4rem;
	border-top: 3px solid var(--cyan);
	border-radius: 0 0 0.7rem 0.7rem;
	background: var(--panel-soft);
}
.process-step:before {
	content: "0" counter(step);
	display: block;
	margin-bottom: 0.75rem;
	color: var(--cyan-dark);
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.12em;
}
.process-step h3 { font-size: 1.05rem; }

.fact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
.fact {
	padding: 1.35rem;
	border-left: 3px solid var(--copper);
	background: #fff;
}
.fact strong { display: block; margin-bottom: 0.3rem; }

.button.primary, input[type="submit"].primary {
	background: var(--cyan-dark);
	box-shadow: none;
	color: #fff !important;
}
.button.primary:hover, input[type="submit"].primary:hover { background: #056b7a; }
.button:hover { color: var(--cyan-dark) !important; box-shadow: inset 0 0 0 1px var(--cyan-dark); }

.notice {
	padding: 1.25rem 1.4rem;
	border: 1px solid #c7dce4;
	border-radius: 0.65rem;
	background: #eaf7f9;
}
.notice .icon { color: var(--cyan-dark); margin-right: 0.4rem; }

.service-group {
	padding: 2rem 0;
	border-top: 1px solid var(--line);
}
.service-group:first-of-type { border-top: 0; padding-top: 0; }
.service-group ul { list-style: disc; margin-left: 1.25rem; }

.request-form {
	padding: 2rem;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: #fff;
}
.request-form label { color: var(--ink); font-weight: 600; }
.request-form input, .request-form select, .request-form textarea { color: var(--text); }
.request-form input:focus, .request-form select:focus, .request-form textarea:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 1px var(--cyan-dark); }
.request-form .hint { margin-top: -1.4rem; font-size: 0.82rem; }
.form-status { min-height: 1.5rem; margin-top: 0.75rem; font-size: 0.9rem; }

#footer { color: rgba(255,255,255,0.68); }
#footer h2, #footer strong { color: #fff; }
#footer a { color: #9ce9f2; }
#footer .copyright { color: rgba(255,255,255,0.42); }

@media screen and (max-width: 980px) {
	.intro-grid, .split-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
	.process-grid { grid-template-columns: repeat(2, 1fr); }
	.fact-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 736px) {
	#wrapper { max-width: calc(100% - 1.25rem); }
	#header, #header.inner { padding: 3rem 1rem 2.25rem; }
	.brand-logo { width: 6.25rem; margin-bottom: 1.1rem; }
	.eyebrow { font-size: 0.72rem; line-height: 1.55; letter-spacing: 0.13em; }
	#header h1, #header.alt h1 {
		font-size: clamp(2.15rem, 11vw, 3rem);
		line-height: 1.08;
	}
	#header p { font-size: 1rem; line-height: 1.65; }
	.hero-actions { flex-direction: column; }
	.hero-actions li { width: 100%; }
	.hero-actions .button { width: 100%; min-height: 3rem; }
	.hero-proof { gap: 0.5rem; }
	.hero-proof li { font-size: 0.78rem; }

	#nav,
	#nav.alt {
		display: block;
		position: sticky;
		top: 0;
		z-index: 10000;
		width: 100%;
		max-width: none;
		padding: 0.45rem max(0.45rem, env(safe-area-inset-right)) 0.45rem max(0.45rem, env(safe-area-inset-left));
		border-radius: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	#nav::-webkit-scrollbar { display: none; }
	#nav ul { display: flex; width: max-content; min-width: 100%; justify-content: center; }
	#nav ul li { margin: 0 0.1rem; }
	#nav ul li a {
		display: inline-flex;
		align-items: center;
		height: 2.75rem;
		padding: 0 0.8rem;
		font-size: 0.88rem;
		white-space: nowrap;
	}
	#nav + #main { padding-top: 0; }

	#main > .main { padding: 2.75rem 1.25rem 1.25rem; }
	header.major { margin-bottom: 2rem; }
	header.major h2 { font-size: clamp(1.65rem, 8vw, 2rem); line-height: 1.2; }
	.intro-grid, .split-grid, .contact-grid { gap: 1.5rem; }
	.signal-card { padding: 1.4rem; }
	.features.service-list li { padding: 1.35rem 1.15rem; margin-top: 1rem; }
	.features.service-list li:nth-child(2),
	.features.service-list li:nth-child(3) { margin-top: 1rem; }
	#main .features.service-list .icon.major { width: 4rem; height: 4rem; margin-bottom: 1rem; }
	.process-grid { gap: 0.8rem; }
	.process-step, .fact { padding: 1.15rem; }
	.notice { padding: 1rem; text-align: left; }
	.service-group { padding: 1.5rem 0; }
	.service-group ul { margin-left: 0; padding-left: 1.25rem; }
	ul.actions.special { display: grid; gap: 0.75rem; }
	ul.actions.special li { width: 100%; padding: 0; }
	ul.actions.special .button { width: 100%; min-height: 3rem; }
	.process-grid { grid-template-columns: 1fr; }
	.request-form { padding: 1.25rem; }
	#footer { padding-top: 3rem; }
}

@media screen and (max-width: 420px) {
	#wrapper { max-width: 100%; }
	#main { border-radius: 0; }
	#nav ul { justify-content: flex-start; }
	#nav ul li a { padding-inline: 0.7rem; font-size: 0.82rem; }
	.hero-proof { display: grid; }
	.hero-proof li { width: 100%; }
}

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