/* ============================================================
   MERA ENGINEER — design system
   ============================================================ */

:root {
	--navy-950: #050c22;
	--navy-900: #0a1430;
	--navy-800: #0e1c46;
	--navy-700: #142a5c;

	--cyan: #22d3ee;
	--cyan-deep: #06b6d4;
	--blue: #3b82f6;
	--indigo: #4f46e5;
	--violet: #8b5cf6;
	--fuchsia: #d946ef;
	--pink: #ec4899;
	--orange: #f97316;
	--amber: #f59e0b;
	--red: #ef4444;
	--green: #22c55e;
	--lime: #84cc16;
	--teal: #14b8a6;

	--ink: #14203c;
	--ink-soft: #5b6784;
	--line: rgba(255, 255, 255, 0.12);

	--font-body: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman',
		serif;
	--font-display: 'Playfair Display', 'EB Garamond', Georgia, serif;
	--font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	--shell: 1400px;
	--radius: 18px;
	--radius-lg: 26px;

	--shadow-soft: 0 18px 45px rgba(6, 14, 38, 0.14);
	--shadow-hard: 0 26px 70px rgba(4, 10, 30, 0.45);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	color: #e8edff;
	background: var(--navy-950);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
video {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

.shell {
	width: min(100% - 48px, var(--shell));
	margin-inline: auto;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------ typography */

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.08;
	margin: 0;
	letter-spacing: -0.01em;
}

.section-title {
	font-size: clamp(38px, 4.6vw, 64px);
	text-align: center;
}

.section-title span {
	display: block;
}

.section-lede {
	max-width: 780px;
	margin: 22px auto 0;
	text-align: center;
	font-style: italic;
	font-size: 19px;
	opacity: 0.72;
}

.grad-text {
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.grad-cyan-violet {
	background-image: linear-gradient(100deg, #2ad4ee, #4f8ff7 45%, #a855f7);
}
.grad-orange-red {
	background-image: linear-gradient(100deg, #fb923c, #f97316 40%, #ef4444);
}
.grad-blue-violet {
	background-image: linear-gradient(100deg, #4f7cf7, #7c5cf5 60%, #a855f7);
}
.grad-green {
	background-image: linear-gradient(100deg, #16a34a, #0f766e 60%, #15803d);
}
.grad-cyan-soft {
	background-image: linear-gradient(100deg, #a5b4fc, #c4b5fd 60%, #ddd6fe);
}
.grad-amber {
	background-image: linear-gradient(100deg, #f59e0b, #f97316 60%, #ea580c);
}

/* ---------------------------------------------------------------- badges */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 20px;
	border-radius: 999px;
	font-style: italic;
	font-size: 15px;
	letter-spacing: 0.01em;
}

.eyebrow svg {
	width: 16px;
	height: 16px;
}

.eyebrow--cyan {
	background: linear-gradient(100deg, #06b6d4, #3b82f6);
	color: #fff;
	box-shadow: 0 10px 28px rgba(6, 182, 212, 0.35);
}
.eyebrow--light {
	background: rgba(255, 255, 255, 0.72);
	color: #4c5b7d;
	border: 1px solid rgba(120, 140, 190, 0.22);
}
.eyebrow--glass {
	background: rgba(255, 255, 255, 0.1);
	color: #dbe4ff;
	border: 1px solid rgba(255, 255, 255, 0.16);
}
.eyebrow--amber {
	background: #fdf0d0;
	color: #92620d;
	border: 1px solid rgba(180, 130, 20, 0.2);
}
.eyebrow--mint {
	background: #d9f5e6;
	color: #14714a;
	border: 1px solid rgba(20, 140, 90, 0.18);
}

/* --------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 15px 30px;
	border-radius: 12px;
	border: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
	white-space: nowrap;
}

.btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

.btn:active {
	transform: translateY(0);
}

.btn--cyan {
	background: linear-gradient(100deg, #06b6d4, #3b82f6);
	color: #fff;
	box-shadow: 0 16px 34px rgba(14, 130, 200, 0.4);
}
.btn--ghost {
	background: transparent;
	color: #dfe8ff;
	border: 1.5px solid rgba(120, 180, 255, 0.5);
}
.btn--ghost:hover {
	background: rgba(120, 180, 255, 0.12);
}
.btn--white {
	background: #fff;
	color: #5b2fd4;
	box-shadow: 0 16px 34px rgba(10, 10, 40, 0.24);
}
.btn--outline-white {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.btn--outline-white:hover {
	background: rgba(255, 255, 255, 0.14);
}
.btn--amber {
	background: linear-gradient(100deg, #f59e0b, #f97316);
	color: #fff;
	box-shadow: 0 16px 34px rgba(240, 150, 20, 0.4);
}
.btn--rose {
	background: linear-gradient(100deg, #f43f5e, #ec4899);
	color: #fff;
	box-shadow: 0 16px 34px rgba(240, 60, 110, 0.36);
}
.btn--green {
	background: linear-gradient(100deg, #16a34a, #22c55e);
	color: #fff;
	box-shadow: 0 16px 34px rgba(20, 160, 80, 0.36);
}
.btn--full {
	width: 100%;
}

.btn[disabled] {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------- header */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 90;
	height: 124px;
	backdrop-filter: blur(18px);
	background: linear-gradient(
		180deg,
		rgba(6, 14, 40, 0.86),
		rgba(6, 14, 40, 0.52)
	);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: height 0.3s ease, background 0.3s ease;
}

.site-header.is-stuck {
	height: 96px;
	background: rgba(5, 11, 32, 0.94);
}

.header-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Video logo -------------------------------------------------------- */

/* The white logo panel starts at the top edge of the header and overhangs
   below it, exactly like the reference design. */
.brand {
	position: relative;
	display: block;
	align-self: flex-start;
	width: 240px;
	height: 190px;
	margin-top: 8px;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}

.site-header.is-stuck .brand {
	width: 190px;
	height: 150px;
}

.brand:hover {
	transform: translateY(-2px) scale(1.02);
}

.brand__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #04121c;
}

/* Wordmark sits over the looping video so the brand stays readable. */
.brand__mark {
	position: absolute;
	inset: auto 0 14px 0;
	text-align: center;
	font-family: var(--font-ui);
	pointer-events: none;
}

.brand__name {
	display: block;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0.22em;
	color: #22d3ee;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.brand__tag {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #7dd3fc;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.brand__sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(4, 18, 28, 0.05) 40%,
		rgba(4, 18, 28, 0.72)
	);
	pointer-events: none;
}

/* Nav ---------------------------------------------------------------- */

.nav {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-body);
}

.nav__link {
	padding: 10px 14px;
	font-style: italic;
	font-size: 18px;
	color: #b7c4e6;
	border-radius: 10px;
	transition: color 0.2s ease;
}

.nav__link:hover,
.nav__link.is-active {
	color: #fff;
}

.nav__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 11px;
	font-style: italic;
	font-size: 17px;
	transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.nav__btn svg {
	width: 17px;
	height: 17px;
}

.nav__btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}

.nav__btn--login {
	color: #67e8f9;
	border: 1.5px solid #22d3ee;
	background: rgba(34, 211, 238, 0.06);
	box-shadow: 0 0 22px rgba(34, 211, 238, 0.18);
}
.nav__btn--service {
	color: #fff;
	background: linear-gradient(100deg, #f97316, #ea580c);
	box-shadow: 0 12px 26px rgba(230, 100, 20, 0.4);
}
.nav__btn--parts {
	color: #0d2b12;
	background: linear-gradient(100deg, #a3e635, #22c55e);
	box-shadow: 0 12px 26px rgba(80, 200, 80, 0.35);
}

.nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	align-items: center;
	justify-content: center;
}

/* Pill sub-nav (the second row of rounded buttons) --------------------- */

.pillnav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	padding: 14px 26px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	width: fit-content;
	margin-inline: auto;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 42px;
	border-radius: 999px;
	font-style: italic;
	font-size: 17px;
	color: #fff;
	transition: transform 0.22s ease, filter 0.22s ease;
}

.pill svg {
	width: 16px;
	height: 16px;
}

.pill:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

.pill--home {
	background: linear-gradient(100deg, #06b6d4, #3b82f6);
}
.pill--login {
	background: linear-gradient(100deg, #a855f7, #d946ef);
}
.pill--service {
	background: linear-gradient(100deg, #f97316, #dc2626);
}
.pill--parts {
	background: linear-gradient(100deg, #a3e635, #22c55e);
	color: #0d2b12;
}

/* ------------------------------------------------------------------ hero */

.hero {
	position: relative;
	padding: 200px 0 120px;
	background:
		radial-gradient(
			1000px 620px at 78% 22%,
			rgba(59, 130, 246, 0.22),
			transparent 62%
		),
		radial-gradient(
			760px 520px at 12% 78%,
			rgba(139, 92, 246, 0.18),
			transparent 60%
		),
		linear-gradient(165deg, #071026 0%, #0b1a45 52%, #0a1533 100%);
	overflow: hidden;
}

.hero::after {
	content: '';
	position: absolute;
	inset: auto 0 -1px 0;
	height: 90px;
	background: linear-gradient(180deg, transparent, rgba(220, 226, 240, 0.9));
	pointer-events: none;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.hero__title {
	margin: 28px 0 0;
	font-size: clamp(64px, 9.2vw, 132px);
	line-height: 0.95;
	letter-spacing: 0.01em;
}

.hero__title span {
	display: block;
}

.hero__copy {
	margin: 30px 0 0;
	max-width: 620px;
	font-style: italic;
	font-size: 21px;
	line-height: 1.75;
	color: #c6d2f0;
}

.hero__copy em {
	font-style: italic;
	color: #67e8f9;
}

.hero__copy .accent-orange {
	color: #fb923c;
}
.hero__copy .accent-red {
	color: #f87171;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 40px;
}

.hero__proof {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 54px;
	font-style: italic;
	color: #9fb0d8;
}

.avatars {
	display: flex;
}

.avatars span {
	width: 40px;
	height: 40px;
	margin-right: -10px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	border: 2px solid rgba(10, 20, 48, 0.9);
	background: linear-gradient(140deg, #6366f1, #a855f7);
}

.avatars span:nth-child(2) {
	background: linear-gradient(140deg, #7c3aed, #c026d3);
}
.avatars span:nth-child(3) {
	background: linear-gradient(140deg, #4f46e5, #8b5cf6);
}
.avatars span:nth-child(4) {
	background: linear-gradient(140deg, #6d28d9, #a21caf);
}

.stars {
	display: inline-flex;
	gap: 3px;
	color: #fbbf24;
}

.stars svg {
	width: 19px;
	height: 19px;
}

/* Hero visual --------------------------------------------------------- */

.hero__visual {
	position: relative;
	padding: 30px 20px 40px;
}

.photo-card {
	position: relative;
	border-radius: 30px;
	padding: 14px;
	background: linear-gradient(150deg, #f4f4fb, #e9e6f8);
	box-shadow: var(--shadow-hard);
}

.photo-card img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
	background: linear-gradient(140deg, #1f2937, #0f172a);
}

/* Tall portrait source: bias the crop to keep the technician's hands and
   the open appliance panel in frame instead of centering it.
   (Scoped with .photo-card to outrank the base `.photo-card img` rule.) */
.photo-card img.photo-card__img--fridge {
	object-position: center 100%;
}

.float-card {
	position: absolute;
	padding: 20px 26px;
	border-radius: 18px;
	background: rgba(246, 247, 252, 0.96);
	box-shadow: 0 20px 46px rgba(5, 12, 34, 0.3);
	text-align: center;
	font-family: var(--font-body);
	color: #4a5570;
	z-index: 3;
}

.float-card b {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font-ui);
	font-size: 30px;
	line-height: 1.1;
}

.float-card small {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-style: italic;
}

.float-card svg {
	width: 24px;
	height: 24px;
}

.float-card--tl {
	top: 0;
	left: -22px;
}

.float-card--tl b {
	color: #4f46e5;
}

.float-card--br {
	right: -26px;
	bottom: 68px;
}

.float-card--br b {
	color: #16a34a;
}

.float-icon {
	position: absolute;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	box-shadow: 0 14px 30px rgba(5, 12, 34, 0.35);
	z-index: 3;
	animation: bob 4.5s ease-in-out infinite;
}

.float-icon svg {
	width: 24px;
	height: 24px;
}

.float-icon--award {
	left: -8px;
	top: 46%;
	background: linear-gradient(140deg, #a855f7, #ec4899);
}

.float-icon--bolt {
	right: 6px;
	top: 30%;
	background: linear-gradient(140deg, #f97316, #ef4444);
	animation-delay: -1.4s;
}

.float-icon--check {
	left: 6%;
	bottom: 8px;
	background: linear-gradient(140deg, #4f46e5, #7c3aed);
	animation-delay: -2.6s;
}

@keyframes bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

/* -------------------------------------------------------------- sections */

.section {
	padding: 120px 0;
	position: relative;
}

.section--light {
	background: linear-gradient(
		160deg,
		#e7e9f1 0%,
		#cfd3e6 30%,
		#8e93b6 70%,
		#6f7098 100%
	);
	color: var(--ink);
}

.section--white {
	background: #fdfdff;
	color: var(--ink);
}

.section--dark {
	background: linear-gradient(
		150deg,
		#0a1636 0%,
		#152163 45%,
		#4c2a86 80%,
		#6d3a9e 100%
	);
}

.section--pale {
	background: linear-gradient(160deg, #dfe2ee 0%, #c6c8de 45%, #d9cfe4 100%);
	color: var(--ink);
}

.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-bottom: 64px;
}

/* Services grid -------------------------------------------------------- */

.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.svc-card {
	padding: 30px;
	border-radius: var(--radius-lg);
	background: linear-gradient(150deg, #f1f2f7, #dcdde8);
	box-shadow: var(--shadow-soft);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.svc-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 28px 62px rgba(6, 14, 38, 0.24);
}

.svc-card:hover .svc-card__title {
	color: #3b3fd6;
}

.icon-tile {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(140deg, #6366f1, #8b5cf6);
	box-shadow: 0 10px 24px rgba(90, 80, 220, 0.34);
}

.icon-tile svg {
	width: 24px;
	height: 24px;
}

.svc-card__title {
	margin: 26px 0 12px;
	font-size: 23px;
	color: #1a2440;
	transition: color 0.24s ease;
}

.svc-card__text {
	margin: 0;
	font-style: italic;
	font-size: 16px;
	color: #5a6486;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.tag {
	padding: 5px 13px;
	border-radius: 8px;
	background: rgba(99, 102, 241, 0.12);
	color: #4338ca;
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 600;
}

/* Industries ----------------------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 70px;
	align-items: center;
}

.split__title {
	font-size: clamp(38px, 4.2vw, 58px);
	margin: 20px 0 0;
}

.split__lede {
	margin: 24px 0 40px;
	font-style: italic;
	font-size: 18px;
	color: #5a6486;
	max-width: 560px;
}

.ind-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.ind-card {
	padding: 20px 24px;
	border-radius: 16px;
	background: linear-gradient(150deg, #f3f4f9, #e4e6ef);
	box-shadow: 0 10px 26px rgba(6, 14, 38, 0.08);
	transition: transform 0.24s ease;
}

.ind-card:hover {
	transform: translateY(-5px);
}

.ind-card h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 19px;
	color: #1a2440;
}

.ind-card h4::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #0d9488;
	flex: none;
}

.ind-card p {
	margin: 8px 0 0 19px;
	font-style: italic;
	font-size: 15px;
	color: #5a6486;
}

.collage {
	position: relative;
	border-radius: 28px;
	padding: 14px;
	background: linear-gradient(150deg, #eef7f1, #e6ecfa);
	box-shadow: var(--shadow-soft);
}

.collage__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 170px;
	gap: 4px;
	border-radius: 18px;
	overflow: hidden;
}

.collage__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #24303f;
}

.collage__inner img:first-child {
	grid-column: span 2;
}

/* Feature (why choose us) ---------------------------------------------- */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.feature-card {
	padding: 34px 28px;
	border-radius: var(--radius-lg);
	text-align: center;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(10px);
	transition: transform 0.28s ease, background 0.28s ease;
}

.feature-card:hover {
	transform: translateY(-8px);
	background: rgba(255, 255, 255, 0.12);
}

.feature-card .icon-tile {
	margin: 0 auto;
}

.feature-card h3 {
	margin: 24px 0 12px;
	font-size: 21px;
	color: #fff;
}

.feature-card p {
	margin: 0;
	font-style: italic;
	font-size: 15.5px;
	color: #c3cdec;
}

.icon-tile--sky {
	background: linear-gradient(140deg, #0ea5e9, #3b82f6);
}
.icon-tile--pink {
	background: linear-gradient(140deg, #d946ef, #ec4899);
}
.icon-tile--green {
	background: linear-gradient(140deg, #22c55e, #16a34a);
}
.icon-tile--orange {
	background: linear-gradient(140deg, #f97316, #ef4444);
}

/* Testimonials --------------------------------------------------------- */

.review-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.review-card {
	padding: 34px 30px;
	border-radius: var(--radius-lg);
	background: linear-gradient(150deg, #f7f7fa, #eceaf2);
	box-shadow: var(--shadow-soft);
	text-align: center;
	transition: transform 0.28s ease;
}

.review-card:hover {
	transform: translateY(-7px);
}

.review-card:hover .review-card__name {
	color: #ea580c;
}

.review-card__stars {
	display: flex;
	justify-content: center;
	gap: 5px;
	color: #fbbf24;
}

.review-card__stars svg {
	width: 22px;
	height: 22px;
}

.review-card__stars .is-off {
	color: #d6d3d1;
}

.review-card__text {
	margin: 24px 0 28px;
	font-style: italic;
	font-size: 16.5px;
	color: #4d566f;
}

.review-card__avatar {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-ui);
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(140deg, #fbbf24, #f97316);
}

.review-card__name {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	color: #1a2440;
	transition: color 0.24s ease;
}

.review-card__role {
	font-style: italic;
	font-size: 15px;
	color: #6b7490;
}

.review-card--new {
	outline: 2px solid rgba(249, 115, 22, 0.5);
	animation: pop 0.5s ease;
}

@keyframes pop {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* CTA ------------------------------------------------------------------ */

.cta {
	position: relative;
	padding: 120px 0;
	overflow: hidden;
	background: linear-gradient(
		110deg,
		#4f46e5 0%,
		#7c3aed 32%,
		#c026d3 66%,
		#ec4899 100%
	);
	text-align: center;
}

.cta__blob {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.cta__blob--a {
	width: 190px;
	height: 190px;
	right: 5%;
	top: 8%;
}
.cta__blob--b {
	width: 120px;
	height: 120px;
	left: 3%;
	bottom: 18%;
}

.cta h2 {
	font-size: clamp(42px, 5.4vw, 74px);
	position: relative;
}

.cta__lede {
	max-width: 760px;
	margin: 26px auto 0;
	font-style: italic;
	font-size: 19px;
	color: rgba(255, 255, 255, 0.9);
}

.cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 44px;
	position: relative;
}

.cta__points {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 46px;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	font-style: italic;
	color: rgba(255, 255, 255, 0.94);
}

.cta__points span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.cta__points svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------- footer */

.footer {
	background: #0a1020;
	padding: 90px 0 0;
	color: #b9c4e0;
}

.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 50px;
}

.footer__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-size: 25px;
	color: #fff;
}

.footer__logo {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(140deg, #6366f1, #8b5cf6);
	color: #fff;
}

.footer__logo svg {
	width: 22px;
	height: 22px;
}

.footer p {
	font-style: italic;
	font-size: 16px;
	line-height: 1.7;
}

.footer h4 {
	font-size: 19px;
	color: #fff;
	margin-bottom: 22px;
}

.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
	font-style: italic;
	font-size: 16px;
}

.footer li a:hover {
	color: #67e8f9;
}

.footer__contact li,
.footer__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.footer__contact svg,
.footer__list svg {
	width: 17px;
	height: 17px;
	margin-top: 5px;
	flex: none;
	color: #22d3ee;
}

.footer__list svg {
	color: #22c55e;
}

.footer__meter {
	margin-top: 30px;
}

.footer__meter-label {
	display: flex;
	align-items: center;
	gap: 9px;
	font-style: italic;
	font-size: 15px;
	margin-bottom: 10px;
}

.footer__meter-label svg {
	width: 16px;
	height: 16px;
}

.footer__bar {
	height: 5px;
	border-radius: 99px;
	background: linear-gradient(90deg, #22c55e, #3b82f6 62%, #a855f7);
}

.footer__meter small {
	display: block;
	margin-top: 8px;
	font-style: italic;
	opacity: 0.65;
}

.footer__bottom {
	margin-top: 70px;
	padding: 26px 0 34px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-style: italic;
	font-size: 15px;
	opacity: 0.75;
}

.footer__rating {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* ------------------------------------------------------- chat / floating */

.chat-fab {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 0;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(140deg, #22c55e, #16a34a);
	box-shadow: 0 16px 36px rgba(20, 160, 80, 0.42);
	z-index: 80;
	transition: transform 0.24s ease;
}

.chat-fab svg {
	width: 26px;
	height: 26px;
}

.chat-fab:hover {
	transform: scale(1.08);
}

.chat-panel {
	position: fixed;
	right: 28px;
	bottom: 104px;
	width: 330px;
	border-radius: 20px;
	background: #0e1a3c;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
	padding: 24px;
	z-index: 80;
	display: none;
}

.chat-panel.is-open {
	display: block;
	animation: pop 0.24s ease;
}

.chat-panel h4 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 8px;
}

.chat-panel p {
	font-style: italic;
	font-size: 15px;
	color: #b3c1e6;
	margin: 0 0 18px;
}

.chat-panel .btn {
	margin-bottom: 10px;
	padding: 12px 20px;
	font-size: 15px;
}

/* ------------------------------------------------------------- form page */

.form-page {
	padding: 190px 0 110px;
	min-height: 100vh;
	background:
		radial-gradient(
			900px 520px at 82% 30%,
			rgba(59, 130, 246, 0.16),
			transparent 60%
		),
		linear-gradient(165deg, #071026, #0b1a45 55%, #0a1533);
}

.form-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: start;
	margin-top: 56px;
}

.form-panel h1 {
	font-size: clamp(34px, 3.8vw, 46px);
}

.form-panel > p {
	margin: 18px 0 40px;
	font-style: italic;
	font-size: 17px;
	color: #a9b8de;
	max-width: 520px;
}

.field {
	margin-bottom: 22px;
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.field label {
	display: block;
	margin-bottom: 9px;
	font-style: italic;
	font-size: 16px;
	color: #cfdaf5;
}

.field label .req {
	color: #f87171;
}

.field input,
.field textarea,
.field select {
	width: 100%;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1.5px solid rgba(120, 160, 240, 0.35);
	background: rgba(9, 20, 50, 0.6);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b8de' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 44px;
}

.field textarea {
	min-height: 108px;
	resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
	outline: 0;
	border-color: #22d3ee;
	box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
	border-color: #f87171;
	box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.14);
}

.field .hint {
	display: block;
	margin-top: 8px;
	font-style: italic;
	font-size: 13.5px;
	color: #8b9bc4;
}

.field .error-text {
	display: none;
	margin-top: 7px;
	font-family: var(--font-ui);
	font-size: 13px;
	color: #fca5a5;
}

.field.has-error .error-text {
	display: block;
}

.upload {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-radius: 10px;
	border: 1.5px dashed rgba(120, 160, 240, 0.5);
	background: rgba(9, 20, 50, 0.4);
	color: #bcd0f7;
	font-family: var(--font-ui);
	font-size: 15px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.upload:hover {
	border-color: #22d3ee;
	color: #fff;
}

.upload svg {
	width: 17px;
	height: 17px;
}

.upload input {
	display: none;
}

.upload-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.file-name {
	font-family: var(--font-ui);
	font-size: 14px;
	color: #7dd3fc;
}

.form-note {
	margin-top: 16px;
	font-style: italic;
	font-size: 14px;
	color: #8b9bc4;
}

.form-alert {
	display: none;
	margin-bottom: 24px;
	padding: 18px 22px;
	border-radius: 14px;
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.55;
}

.form-alert.is-visible {
	display: block;
	animation: pop 0.3s ease;
}

.form-alert--ok {
	background: rgba(34, 197, 94, 0.14);
	border: 1px solid rgba(34, 197, 94, 0.42);
	color: #bbf7d0;
}

.form-alert--err {
	background: rgba(239, 68, 68, 0.13);
	border: 1px solid rgba(239, 68, 68, 0.4);
	color: #fecaca;
}

.form-alert b {
	font-weight: 700;
}

/* ------------------------------------------------------------ auth pages */

.auth-card {
	max-width: 470px;
	margin: 0 auto;
	padding: 44px 40px;
	border-radius: var(--radius-lg);
	background: rgba(12, 24, 58, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--shadow-hard);
	backdrop-filter: blur(12px);
}

.auth-card h1 {
	font-size: 36px;
	text-align: center;
}

.auth-card > p {
	margin: 14px 0 32px;
	text-align: center;
	font-style: italic;
	color: #a9b8de;
}

.auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 30px;
	padding: 6px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}

.auth-tab {
	padding: 11px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #a9b8de;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

.auth-tab.is-active {
	background: linear-gradient(100deg, #06b6d4, #3b82f6);
	color: #fff;
}

.auth-switch {
	margin-top: 22px;
	text-align: center;
	font-style: italic;
	font-size: 15px;
	color: #a9b8de;
}

.auth-switch button {
	border: 0;
	background: none;
	color: #67e8f9;
	font-family: inherit;
	font-size: inherit;
	font-style: italic;
	text-decoration: underline;
}

/* --------------------------------------------------------- dashboard */

.dash-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 44px;
}

.dash-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-bottom: 48px;
}

.stat {
	padding: 26px 28px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.stat b {
	display: block;
	font-family: var(--font-ui);
	font-size: 34px;
	color: #67e8f9;
}

.stat span {
	font-style: italic;
	color: #a9b8de;
}

.req-card {
	padding: 26px 28px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.11);
	margin-bottom: 18px;
}

.req-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.req-card__id {
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
}

.chip {
	padding: 5px 14px;
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 600;
	background: rgba(34, 197, 94, 0.18);
	color: #86efac;
	border: 1px solid rgba(34, 197, 94, 0.35);
}

.chip--parts {
	background: rgba(168, 85, 247, 0.18);
	color: #d8b4fe;
	border-color: rgba(168, 85, 247, 0.35);
}

.req-card dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px 26px;
	margin: 0;
}

.req-card dt {
	font-family: var(--font-ui);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8b9bc4;
}

.req-card dd {
	margin: 4px 0 0;
	font-style: italic;
	color: #dbe4ff;
}

.empty-state {
	padding: 60px 30px;
	text-align: center;
	border-radius: var(--radius-lg);
	border: 1px dashed rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.04);
}

.empty-state p {
	font-style: italic;
	color: #a9b8de;
	margin: 0 0 24px;
}

/* ------------------------------------------------------------- modal */

.modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(4, 10, 28, 0.78);
	backdrop-filter: blur(6px);
}

.modal.is-open {
	display: flex;
}

.modal__box {
	width: min(100%, 520px);
	max-height: 90vh;
	overflow-y: auto;
	padding: 38px 36px;
	border-radius: var(--radius-lg);
	background: #0e1a3c;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: var(--shadow-hard);
	animation: pop 0.26s ease;
}

.modal__box h3 {
	font-size: 28px;
	color: #fff;
	margin-bottom: 8px;
}

.modal__box > p {
	font-style: italic;
	color: #a9b8de;
	margin: 0 0 26px;
}

.modal__close {
	float: right;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
	color: #cfdaf5;
	font-size: 18px;
	line-height: 1;
}

.rating-input {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.rating-input button {
	border: 0;
	background: none;
	padding: 0;
	color: #4b5563;
	transition: transform 0.15s ease, color 0.15s ease;
}

.rating-input button svg {
	width: 30px;
	height: 30px;
}

.rating-input button.is-on {
	color: #fbbf24;
}

.rating-input button:hover {
	transform: scale(1.14);
}

/* ------------------------------------------------------------ reveal */

.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------- responsive */

@media (max-width: 1180px) {
	.card-grid,
	.review-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.nav {
		position: fixed;
		inset: 124px 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 22px 24px 30px;
		background: rgba(6, 14, 40, 0.98);
		border-bottom: 1px solid var(--line);
		transform: translateY(-140%);
		transition: transform 0.32s ease;
	}
	.nav.is-open {
		transform: none;
	}
	.nav__btn,
	.nav__link {
		justify-content: center;
		text-align: center;
	}
	.nav-toggle {
		display: flex;
	}
	.hero__grid,
	.split,
	.form-layout {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.hero {
		padding-top: 176px;
	}
	.brand {
		width: 152px;
		height: 120px;
		margin-top: 6px;
	}
	.site-header,
	.site-header.is-stuck {
		height: 108px;
	}
	.brand__name {
		font-size: 13px;
		letter-spacing: 0.18em;
	}
	.brand__tag {
		font-size: 8px;
	}
	/* Open below the overhanging logo panel so the two never collide. */
	.nav {
		inset-block-start: 132px;
	}
}

@media (max-width: 720px) {
	.shell {
		width: min(100% - 32px, var(--shell));
	}
	body {
		font-size: 17px;
	}
	.section {
		padding: 84px 0;
	}
	.card-grid,
	.review-grid,
	.feature-grid,
	.ind-grid,
	.footer__grid,
	.dash-stats,
	.field-row {
		grid-template-columns: 1fr;
	}
	.hero {
		padding: 150px 0 90px;
	}
	.hero__title {
		font-size: 58px;
	}
	.float-card--tl {
		left: -6px;
		padding: 14px 18px;
	}
	.float-card--br {
		right: -6px;
		bottom: 20px;
		padding: 14px 18px;
	}
	.float-card b {
		font-size: 23px;
	}
	.photo-card img {
		height: 320px;
	}
	.collage__inner {
		grid-auto-rows: 120px;
	}
	.cta__points {
		gap: 20px;
		flex-direction: column;
		align-items: center;
	}
	.pill {
		padding: 10px 24px;
		font-size: 15px;
	}
	.chat-panel {
		right: 16px;
		left: 16px;
		width: auto;
	}
	.form-page {
		padding-top: 160px;
	}
	.auth-card {
		padding: 32px 24px;
	}
}