/* ==========================================================================
   D3 Nova — front page only
   ========================================================================== */

/* ---------------------------------------------------------------- HERO --- */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--night);
	color: var(--night-fg);
	overflow: hidden;
	padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	/* One screen, minus the sticky header. svh rather than vh so mobile browser
	   chrome does not push the bottom of the hero out of view. */
	min-height: calc(100svh - var(--header-h, 117px));
}

.hero__bg {
	position: absolute;
	inset: -10% 0 -10%;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.hero__bg .aurora-blob { opacity: .6; will-change: transform; }

.hero__bg .aurora-grid { color: rgba(255, 255, 255, .085); }

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	will-change: transform, opacity;
}

.hero__title {
	font-size: var(--fs-hero);
	color: #fff;
	margin-bottom: var(--sp-3);
	letter-spacing: -.03em;
	line-height: 1.08;
}

/* Word-by-word entrance. Runs once on load; words are visible by default so
   the headline is never blank if the animation is unsupported or skipped. */
.hero__title .w {
	display: inline-block;
	white-space: nowrap;
}

.js .hero__title .w {
	opacity: 0;
	transform: translateY(.5em) rotate(2deg);
	animation: d3word .85s var(--e-out) forwards;
	animation-delay: var(--w-delay, 0ms);
}

.hero__title .w--accent {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@keyframes d3word {
	to { opacity: 1; transform: none; }
}

.hero__eyebrow { animation: d3fadein .7s var(--e-out) both; }

.js .hero__lead,
.js .hero__actions,
.js .hero__trust { animation: d3fadeup .8s var(--e-out) both; }

.js .hero__lead { animation-delay: .70s; }

.js .hero__actions { animation-delay: .82s; }

.js .hero__trust { animation-delay: .94s; }

@keyframes d3fadein { from { opacity: 0; } to { opacity: 1; } }

@keyframes d3fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__lead {
	font-size: var(--fs-lead);
	color: var(--night-muted);
	max-width: 50ch;
	margin-bottom: var(--sp-4);
}

.hero__actions { gap: var(--sp-3); }

.hero__trust {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: var(--sp-4);
	flex-wrap: wrap;
	font-size: var(--fs-sm);
	color: var(--night-muted);
}

.hero__trust p { margin: 0; }

.hero__trust strong { color: #fff; font-weight: 700; }

.hero__stars { display: inline-flex; gap: 2px; color: #FBBF24; }

.dotsep {
	display: inline-block;
	width: 4px; height: 4px;
	margin: 0 .35rem;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
	vertical-align: middle;
}

/* Orbit visual */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 0; }

.orbit { position: relative; width: min(100%, 460px); aspect-ratio: 1; display: grid; place-items: center; }

.orbit__rings { position: absolute; inset: 0; width: 100%; height: 100%; animation: d3spin 60s linear infinite; }

.orbit__core {
	position: relative;
	display: grid;
	place-items: center;
	gap: .2rem;
	width: 190px; height: 190px;
	border-radius: 50%;
	background: linear-gradient(160deg, rgba(37, 99, 235, .28), rgba(124, 58, 237, .18));
	border: 1px solid rgba(147, 197, 253, .35);
	backdrop-filter: blur(12px);
	color: #fff;
	text-align: center;
	box-shadow: 0 30px 80px -30px rgba(37, 99, 235, .9);
	animation: d3bob 7s var(--e-out) infinite;
}

.orbit__core strong { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.02em; }

.orbit__core small { font-size: .72rem; color: var(--blue-200); }

.orbit__core-glow {
	position: absolute; inset: -30%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 99, 235, .35), transparent 65%);
	filter: blur(24px);
	z-index: -1;
}

.orbit__dot {
	position: absolute;
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: 16px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid var(--night-border);
	backdrop-filter: blur(10px);
	color: #BFDBFE;
	box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9);
}

.orbit__dot--1 { top: 4%;  left: 46%; animation: d3bob 6s var(--e-out) infinite; }

.orbit__dot--2 { top: 44%; right: 1%; animation: d3bob 7.5s var(--e-out) .4s infinite; }

.orbit__dot--3 { bottom: 6%; left: 40%; animation: d3bob 6.8s var(--e-out) .8s infinite; }

.orbit__dot--4 { top: 42%; left: 0%;  animation: d3bob 8s var(--e-out) 1.2s infinite; }

.float-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .7rem .95rem;
	border-radius: 14px;
	background: rgba(9, 14, 28, .82);
	border: 1px solid var(--night-border);
	backdrop-filter: blur(14px);
	box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 1);
	font-size: var(--fs-xs);
	color: var(--night-muted);
	white-space: nowrap;
}

.float-card b { display: block; color: #fff; font-size: var(--fs-sm); font-weight: 600; }

.float-card i { font-style: normal; }

.float-card__ico {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 10px;
	background: rgba(37, 99, 235, .22);
	color: #93C5FD;
	flex: none;
}

.float-card--a { top: 8%; right: -4%; }

.float-card--b { bottom: 10%; left: -6%; }

/* Scroll cue */
.scroll-cue {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	width: max-content;
	margin: 0 auto clamp(.75rem, .5rem + 1vw, 1.25rem);
	color: var(--night-muted);
	font-family: var(--font-display);
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.scroll-cue:hover { color: #fff; }

.scroll-cue__mouse {
	display: block;
	width: 26px; height: 42px;
	border: 1.5px solid currentColor;
	border-radius: 14px;
	position: relative;
	opacity: .75;
}

.scroll-cue__wheel {
	position: absolute;
	top: 8px; left: 50%;
	width: 3px; height: 7px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: currentColor;
	animation: d3wheel 1.9s var(--e-out) infinite;
}

@keyframes d3wheel {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

/* Hero stat strip */
.hero__stats {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--night-border);
	background: rgba(255, 255, 255, .03);
	backdrop-filter: blur(10px);
}

/* -------------------------------------------------------- CLIENT STRIP --- */


/* ------------------------------------------------------------ SERVICES --- */


/* --------------------------------------------------------------- ABOUT --- */


/* ---------------------------------------------------------- INDUSTRIES --- */
.ind-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sp-3);
}

.ind-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	padding: var(--sp-5) var(--sp-3);
	text-align: center;
	min-height: 138px;
}

.ind-card__ico {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: var(--grad-brand-soft);
	border: 1px solid rgba(37, 99, 235, .16);
	color: var(--blue-700);
	transition: transform var(--t-mid) var(--e-spring), background var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out);
}

.ind-card:hover .ind-card__ico { transform: translateY(-4px) scale(1.06); background: var(--blue-600); color: #fff; }

.ind-card__label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; color: var(--fg-soft); line-height: 1.3; }

/* ------------------------------------------------------------------ AI --- */
.ai-head {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: center;
}

.ai-art {
	margin: 0;
	position: relative;
	display: grid;
	place-items: center;
	will-change: transform;
}

.ai-art::before {
	content: "";
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 99, 235, .35), transparent 62%);
	filter: blur(38px);
}

.ai-art img {
	position: relative;
	width: min(100%, 420px);
	height: auto;
	animation: d3bob 9s var(--e-out) infinite;
}

.ai-card { overflow: hidden; }

.ai-card__beam {
	position: absolute;
	top: 0; left: 0;
	width: 40%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(147, 197, 253, .16), transparent);
	transform: translateX(-120%) skewX(-18deg);
	pointer-events: none;
}

.ai-card:hover .ai-card__beam { animation: d3shine 1.1s var(--e-out) forwards; }

.ai-note {
	margin: var(--sp-7) 0 var(--sp-4);
	text-align: center;
	font-size: var(--fs-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--night-muted);
}

.ai-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}

.ai-logo {
	display: grid;
	place-items: center;
	min-width: 130px;
	height: 66px;
	padding: 0 1.4rem;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .055);
	border: 1px solid var(--night-border);
	transition: transform var(--t-mid) var(--e-spring), border-color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out);
}

.ai-logo:hover { transform: translateY(-4px); border-color: rgba(147, 197, 253, .45); background: rgba(255, 255, 255, .1); }

.ai-logo img {
	max-height: 32px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .82;
	transition: opacity var(--t-mid) var(--e-out);
}

.ai-logo:hover img { opacity: 1; }

/* ---------------------------------------------------------------- TECH --- */










/* --------------------------------------------------------- TESTIMONIALS --- */
.review-card { display: flex; flex-direction: column; gap: .8rem; }

.review-card__quote { color: rgba(147, 197, 253, .5); }

.review-card__stars { display: inline-flex; gap: 2px; color: #FBBF24; }

.review-card blockquote { margin: 0; }

.review-card blockquote p { font-size: var(--fs-sm); line-height: 1.7; }

.review-card figcaption {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--night-border);
	font-size: var(--fs-sm);
}

.review-card figcaption b { display: block; color: #fff; font-weight: 600; }

.review-card figcaption i { font-style: normal; font-size: var(--fs-xs); color: var(--night-muted); }

.review-card__avatar {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--grad-brand);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	flex: none;
}

/* ----------------------------------------------------------------- FAQ --- */


/* ---------------------------------------------------------- RESPONSIVE --- */
@media (max-width: 1080px) {
	.ind-grid { grid-template-columns: repeat(4, 1fr); }
	.svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
.hero__inner { grid-template-columns: 1fr; text-align: center; }
.hero__copy { max-width: 42rem; margin-inline: auto; }
.hero__lead { margin-inline: auto; }
.hero__actions, .hero__trust { justify-content: center; }
.hero__visual { order: -1; min-height: 0; }
.orbit { width: min(100%, 360px); }
.ai-head { grid-template-columns: 1fr; }
.ai-art { order: -1; }
.ai-art img { width: min(72%, 340px); }
.scroll-cue { display: none; }
}

@media (max-width: 767px) {
.ind-grid { grid-template-columns: repeat(2, 1fr); }
.float-card--a { top: 2%; right: -2%; }
.float-card--b { bottom: 2%; left: -2%; }
.orbit__core { width: 150px; height: 150px; }
.hero__title { letter-spacing: -.03em; }
}

@media (max-width: 420px) {
.float-card { display: none; }
}

/* --------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
	.js .hero__title .w,
	.js .hero__lead,
	.js .hero__actions,
	.js .hero__trust { animation: none !important; opacity: 1 !important; transform: none !important; }
	.scroll-cue__wheel, .ai-art img, .orbit__rings, .orbit__core, .orbit__dot { animation: none !important; }
}

/* Short laptop screens (1366x768 and similar) need more than a width-based
   clamp: the headline and the scroll cue are what push the hero past one
   screen there, so both shrink on viewport HEIGHT rather than width. */
@media (min-width: 992px) and (max-height: 880px) {
	.hero__title { font-size: clamp(1.7rem, 1rem + 2.1vw, 2.6rem); }
	.hero__lead { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
	.hero__eyebrow { margin-bottom: .5rem; }
	.hero__trust { margin-top: var(--sp-3); }
	.hero-video { max-width: 470px; }
	.scroll-cue { display: none; }
}

@media (min-width: 992px) and (max-height: 720px) {
	.hero__trust { display: none; }
	.hero-video { max-width: 400px; }
}

/* ------------------------------------------------------ HERO VIDEO ------- */
/* Replaces the orbit SVG. Muted + playsinline are what make autoplay work on
   iOS and Android; without them the browser blocks it. */
.hero-video { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }

.hero-video__frame {
	position: relative;
	z-index: 1;
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 50px 90px -40px rgba(2, 6, 23, .75);
	background: rgba(255, 255, 255, .04);
}

.hero-video__el {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Brand glow behind the frame. */
.hero-video__glow {
	position: absolute;
	inset: -14% -10% -18% -10%;
	border-radius: 50%;
	background: var(--grad-brand);
	opacity: .35;
	filter: blur(60px);
	z-index: 0;
	animation: heroGlow 9s var(--e-out) infinite alternate;
}

@keyframes heroGlow {
	from { opacity: .26; transform: scale(.96); }
	to   { opacity: .42; transform: scale(1.04); }
}

.hero-video .float-card--a { top: 8%; left: -6%; }
.hero-video .float-card--b { bottom: 8%; right: -5%; }

@media (max-width: 991px) {
	.hero-video { max-width: 520px; }
	.hero-video .float-card--a { left: 0; }
	.hero-video .float-card--b { right: 0; }
}

@media (max-width: 600px) {
	.hero-video .float-card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-video__glow { animation: none; }
}

/* --------------------------------------------- AI LOGOS ON MOBILE -------- */
/* Four per row instead of a ragged wrap - the flex row was leaving one or two
   logos stranded on the last line. */
@media (max-width: 767px) {
	.ai-logos {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: .5rem;
	}
	.ai-logo { min-width: 0; height: 52px; padding: 0 .4rem; }
	.ai-logo img { max-width: 100%; height: auto; max-height: 24px; object-fit: contain; }
}

/* ------------------------------------------ WHAT WE DO SLIDER (mobile) --- */
/* One card per view with the next peeking, so it is obvious there is more to
   swipe. The arrows are only rendered here - on desktop the grid stays a grid
   and the controls are hidden. */
.svc-grid + .rail-nav { display: none; }

@media (max-width: 767px) {
	.svc-grid {
		display: grid;
		grid-auto-flow: column;
		/* 82% of the track, not of the viewport - the track is inset by the
		   gutter on both sides, which is what leaves the next card ~25% visible. */
		grid-auto-columns: minmax(82%, 1fr);
		grid-template-columns: none !important;
		gap: var(--sp-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: calc(var(--gutter, 1.25rem) * -1);
		padding-inline: var(--gutter, 1.25rem);
		padding-bottom: .25rem;
	}

	.svc-grid::-webkit-scrollbar { display: none; }
	.svc-grid > .svc-card { scroll-snap-align: start; min-width: 0; }
	.svc-grid:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 4px; border-radius: var(--r-md); }

	/* Tilt would fight the horizontal scroll on a touch drag. */
	.svc-grid .svc-card { transform: none !important; }

	.svc-grid + .rail-nav { display: flex; }
}

/* ------------------------------------------------------- INTRO BLOCK ----- */
/* Two-column editorial read. A single narrow column of four paragraphs looked
   like a wall of text beside the card grids on the rest of the page. */
.intro-block__head { max-width: 46rem; margin-bottom: var(--sp-5); }

.intro-block__grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

.intro-block__first {
	font-size: var(--fs-lead);
	line-height: 1.65;
	color: var(--fg);
	margin-bottom: var(--sp-5);
}

.intro-block__body p {
	color: var(--muted-fg);
	line-height: 1.75;
	margin-bottom: var(--sp-4);
}
.intro-block__body p:last-of-type { margin-bottom: 0; }

.intro-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.intro-facts li {
	padding: .85rem 1rem;
	border-radius: var(--r-md);
	background: var(--surface);
	border: 1px solid var(--border);
}
.intro-facts b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.intro-facts i { font-style: normal; font-size: var(--fs-xs); color: var(--muted-fg); }

/* Links inside the SEO prose need to look like links - but :not(.btn) matters:
   without it this rule repainted the CTA buttons blue-on-blue and underlined
   them, because they are anchors sitting in the same container. */
.intro-block__body a:not(.btn),
.intro-block__first a:not(.btn),
.about-copy a:not(.btn) {
	color: var(--blue-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(37, 99, 235, .35);
	transition: text-decoration-color var(--t-fast) var(--e-out);
}
.intro-block__body a:not(.btn):hover,
.intro-block__first a:not(.btn):hover,
.about-copy a:not(.btn):hover { text-decoration-color: var(--blue-600); }

/* About copy: only the first paragraph is lead-sized, the rest is body text
   with real spacing between paragraphs. */
.about-copy p { color: var(--muted-fg); line-height: 1.75; margin-bottom: var(--sp-4); }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy .sec-lead { color: var(--fg); margin-bottom: var(--sp-4); }

@media (max-width: 860px) {
	.intro-block__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.intro-facts { grid-template-columns: 1fr 1fr; }
	.intro-facts b { font-size: 1.25rem; }
}