/* ==========================================================================
   Meghna — homepage only
   Every animated layer here moves with transform/opacity so the work stays on
   the compositor. This file is never loaded on blog or archive templates.
   ========================================================================== */

/* --- Transparent header over the dark hero ------------------------------ */
.is-front .site-head {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
	transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.is-front .site-head .brand__link,
.is-front .site-head .nav__list a { color: #f2f4fd; }
.is-front .site-head .brand__role { color: rgba(226, 231, 250, .62); }
.is-front .nav-toggle { color: #f2f4fd; border-color: rgba(255, 255, 255, .22); }
.is-front .nav__cta { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); }
.is-front .nav__cta:hover { background: var(--brand); border-color: var(--brand); }

.is-front .site-head.is-scrolled {
	background: rgba(255, 255, 255, .9);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: var(--line);
}
.is-front .site-head.is-scrolled .brand__link,
.is-front .site-head.is-scrolled .nav__list a { color: var(--text); }
.is-front .site-head.is-scrolled .brand__role { color: var(--muted); }
.is-front .site-head.is-scrolled .nav-toggle { color: var(--text); border-color: var(--line); }
.is-front .site-head.is-scrolled .nav__cta { background: var(--ink); border-color: var(--ink); color: #fff; }

@media (max-width: 860px) {
	.is-front .nav { background: #12102a; border-bottom-color: rgba(255, 255, 255, .12); }
	.is-front .nav .nav__list li { border-bottom-color: rgba(255, 255, 255, .1); }
	.is-front .site-head.is-scrolled .nav { background: var(--paper); }
	.is-front .site-head.is-scrolled .nav .nav__list li { border-bottom-color: var(--line); }
}

/* --- Hero shell --------------------------------------------------------- */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: -68px;
	padding: calc(68px + clamp(2rem, 6vw, 4.5rem)) 0 clamp(3.5rem, 8vw, 6rem);
	background:
		radial-gradient(115% 85% at 74% 34%, #241a45 0%, #150f2c 44%, #0a0817 100%),
		var(--ink);
	color: #e9ecfa;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Starfield: three layered radial-gradient dot grids, no image request. */
.hero__stars {
	position: absolute;
	inset: -20%;
	opacity: .55;
	background-image:
		radial-gradient(1.4px 1.4px at 18% 22%, rgba(255, 255, 255, .9) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 62% 12%, rgba(255, 226, 190, .8) 50%, transparent 51%),
		radial-gradient(1px 1px at 85% 48%, rgba(255, 255, 255, .7) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 33% 71%, rgba(198, 214, 255, .75) 50%, transparent 51%),
		radial-gradient(1px 1px at 72% 82%, rgba(255, 255, 255, .6) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 8% 58%, rgba(255, 255, 255, .55) 50%, transparent 51%);
	background-size: 320px 320px, 260px 260px, 420px 420px, 360px 360px, 300px 300px, 480px 480px;
	animation: drift 90s linear infinite;
}

.hero__grid {
	position: absolute;
	inset: 0;
	opacity: .16;
	background-image:
		linear-gradient(rgba(150, 170, 255, .18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(150, 170, 255, .18) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(90% 70% at 50% 40%, #000 10%, transparent 75%);
	-webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000 10%, transparent 75%);
}

.hero__fade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 140px;
	background: linear-gradient(to bottom, transparent, var(--ink));
	pointer-events: none;
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

/* --- Hero copy ---------------------------------------------------------- */
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.4rem;
	padding: .45rem 1rem .45rem .7rem;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-full);
	font-size: .82rem;
	font-weight: 500;
	color: #dfe4fa;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.hero__at { color: rgba(223, 228, 250, .62); }
.dot {
	width: 8px; height: 8px;
	flex: none;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
	animation: blip 2.4s ease-in-out infinite;
}

.hero__title {
	margin: 0 0 1.1rem;
	font-size: clamp(2.6rem, 6.4vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -.035em;
	color: #fff;
}
.hero__title-sub {
	display: block;
	margin-top: .18em;
	font-size: .46em;
	font-weight: 600;
	letter-spacing: -.01em;
	background: linear-gradient(100deg, var(--gold), #ff8a3d 42%, var(--magenta));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lede {
	max-width: 34rem;
	margin: 0 0 2rem;
	font-size: clamp(1.02rem, 1.5vw, 1.16rem);
	line-height: 1.68;
	color: rgba(224, 229, 248, .82);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.25rem; }
.hero .btn--ghost { color: #eef0fa; border-color: rgba(255, 255, 255, .24); }
.hero .btn--ghost:hover { color: #fff; border-color: var(--gold); background: rgba(255, 194, 74, .12); }

.hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	list-style: none;
	margin: 0; padding: 0;
	font-size: .84rem;
	color: rgba(214, 220, 244, .66);
}
.hero__badges li { display: flex; align-items: center; gap: .5rem; }
.hero__badges li::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--gold);
	opacity: .8;
}

/* --- Sun stage ---------------------------------------------------------- */
.hero__stage { display: grid; place-items: center; }

.sunstage {
	--stage: clamp(280px, 40vw, 560px);
	width: var(--stage);
	height: var(--stage);
	display: grid;
	place-items: center;
}
.sunstage__inner {
	position: relative;
	width: var(--stage);
	height: var(--stage);
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	--star: calc(var(--stage) * .4);
}

/* Plasma corona -------------------------------------------------------- */
.plasma { position: absolute; inset: 0; z-index: 1; }

/* Corona layers are deliberately wider than the stage, so they cannot be
   centred by grid placement or auto margins — both give up once a box
   overflows its container. Half-size negative offsets are exact, and leave
   `transform` free for the spin animations. */
.plasma > * {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--size);
	height: var(--size);
	margin-top: calc(var(--size) / -2);
	margin-left: calc(var(--size) / -2);
	border-radius: 50%;
}

.plasma__bloom {
	--size: calc(var(--star) * 3.4);
	background: radial-gradient(circle,
		rgba(255, 168, 74, .40) 0%,
		rgba(255, 92, 120, .22) 30%,
		rgba(142, 78, 255, .13) 52%,
		transparent 72%);
	animation: breathe 9s ease-in-out infinite alternate;
}

.plasma__field {
	mix-blend-mode: screen;
	will-change: transform;
}
/* The masks fade out gradually rather than ending on a hard stop — a sharp
   outer edge is what makes a corona read as a solid donut. */
.plasma__field--a {
	--size: calc(var(--star) * 2.05);
	background: conic-gradient(from 0deg,
		#ff7a1a 0deg, #ffd15a 46deg, #ff3d81 108deg,
		#ff9a2a 168deg, #ffbe45 232deg, #ff2f6d 296deg, #ff7a1a 360deg);
	mask: radial-gradient(circle,
		transparent 43%, rgba(0, 0, 0, .85) 52%, rgba(0, 0, 0, .5) 68%,
		rgba(0, 0, 0, .18) 82%, transparent 96%);
	-webkit-mask: radial-gradient(circle,
		transparent 43%, rgba(0, 0, 0, .85) 52%, rgba(0, 0, 0, .5) 68%,
		rgba(0, 0, 0, .18) 82%, transparent 96%);
	filter: blur(22px);
	opacity: .72;
	animation: spin 17s linear infinite;
}
.plasma__field--b {
	--size: calc(var(--star) * 2.7);
	background: conic-gradient(from 140deg,
		#ff4d2e 0deg, transparent 52deg, #ffc247 96deg, transparent 150deg,
		#ff3d81 208deg, transparent 262deg, #ff8a3d 318deg, #ff4d2e 360deg);
	mask: radial-gradient(circle,
		transparent 33%, rgba(0, 0, 0, .6) 46%, rgba(0, 0, 0, .3) 64%, transparent 88%);
	-webkit-mask: radial-gradient(circle,
		transparent 33%, rgba(0, 0, 0, .6) 46%, rgba(0, 0, 0, .3) 64%, transparent 88%);
	filter: blur(30px);
	opacity: .5;
	animation: spin 27s linear infinite reverse;
}

/* Solar flare spikes. */
.plasma__rays {
	--size: calc(var(--star) * 3.05);
	background: repeating-conic-gradient(from 0deg,
		rgba(255, 205, 130, .55) 0deg 1.6deg,
		transparent 1.6deg 10deg);
	mask: radial-gradient(circle, transparent 49%, #000 57%, transparent 86%);
	-webkit-mask: radial-gradient(circle, transparent 49%, #000 57%, transparent 86%);
	filter: blur(3px);
	opacity: .3;
	mix-blend-mode: screen;
	animation: spin 70s linear infinite;
}

/* Hot inner edge, sitting just outside the portrait. */
.plasma__rim {
	--size: calc(var(--star) * 1.03);
	box-shadow:
		0 0 0 1px rgba(255, 210, 150, .45),
		0 0 22px 3px rgba(255, 140, 60, .45),
		0 0 60px 14px rgba(255, 80, 110, .22);
	animation: rimpulse 4.4s ease-in-out infinite alternate;
}

/* A single bright hotspot that wanders, so the corona never looks static. */
.plasma__flicker {
	--size: calc(var(--star) * 1.7);
	background: radial-gradient(circle at 74% 26%, rgba(255, 240, 200, .55), transparent 44%);
	mix-blend-mode: screen;
	filter: blur(10px);
	animation: spin 13s linear infinite, flicker 5.5s ease-in-out infinite alternate;
}

/* The star -------------------------------------------------------------- */
.star {
	position: relative;
	grid-area: 1 / 1;
	z-index: 3;
	width: var(--star);
	height: var(--star);
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	/* The star's own outward glow — this is the "glowing at the edges" part. */
	box-shadow:
		0 0 28px 4px rgba(255, 150, 60, .5),
		0 0 80px 20px rgba(255, 90, 110, .26);
	animation: breathe 9s ease-in-out infinite alternate;
}
.star__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.06) contrast(1.04);
}
/* Warms the photo's rim so it burns into the corona instead of ending on a line. */
.star__edge {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle,
		transparent 56%,
		rgba(255, 140, 50, .26) 80%,
		rgba(255, 200, 130, .62) 94%,
		rgba(255, 240, 210, .85) 100%);
	mix-blend-mode: screen;
}
.star__sheen {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 200deg, transparent 0deg, rgba(255, 232, 190, .34) 44deg, transparent 96deg);
	mix-blend-mode: overlay;
	animation: spin 12s linear infinite;
}

/* Orbits ---------------------------------------------------------------- */
.orbits { position: absolute; inset: 0; z-index: 4; }

.orbit {
	--d: calc(var(--stage) * var(--ratio));
	position: absolute;
	top: 50%; left: 50%;
	width: var(--d);
	height: var(--d);
	margin-left: calc(var(--d) / -2);
	margin-top: calc(var(--d) / -2);
}
.orbit__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(184, 198, 255, .24);
	mask: linear-gradient(115deg, #000 12%, rgba(0, 0, 0, .25) 48%, #000 88%);
	-webkit-mask: linear-gradient(115deg, #000 12%, rgba(0, 0, 0, .25) 48%, #000 88%);
}
.orbit__spin {
	position: absolute;
	inset: 0;
	animation: spin var(--dur) linear infinite;
	animation-direction: var(--dir);
	will-change: transform;
}

/* Zero-size anchor placed on the ring, then two counter-rotations keep the
   icon upright: one cancels the static start angle, one cancels the orbit. */
.sat {
	position: absolute;
	top: 50%; left: 50%;
	width: 0; height: 0;
	transform: rotate(var(--a)) translateY(calc(var(--d) / -2));
}
.sat__fix {
	position: absolute;
	top: 0; left: 0;
	transform: rotate(calc(-1 * var(--a)));
}
.sat__ico {
	--ico: clamp(34px, calc(var(--stage) * .095), 56px);
	position: absolute;
	top: 0; left: 0;
	width: var(--ico);
	height: var(--ico);
	margin: calc(var(--ico) / -2);
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--tint);
	background: rgba(16, 14, 38, .72);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow:
		0 6px 18px rgba(4, 2, 16, .5),
		inset 0 1px 0 rgba(255, 255, 255, .1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	/* Counter-spin: same duration as the ring, opposite direction. */
	animation: spin var(--dur) linear infinite;
	animation-direction: var(--rdir);
	will-change: transform;
}

.sat__ico .icon { width: 55%; height: 55%; }
.sat__ico::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	box-shadow: 0 0 16px 1px var(--tint);
	opacity: .35;
}

@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; text-align: center; }
	.hero__copy { order: 2; }
	.hero__stage { order: 1; }
	.hero__eyebrow, .hero__cta, .hero__badges { justify-content: center; }
	.hero__lede { margin-inline: auto; }
	/* Leave room for the outermost satellites, which sit half an icon beyond
	   the ring — otherwise they clip against the hero's overflow. */
	.sunstage { --stage: clamp(240px, 68vw, 520px); }
}

@media (max-width: 560px) {
	.hero__eyebrow {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
		font-size: .78rem;
		padding: .5rem 1rem;
		row-gap: .1rem;
	}
	.hero__badges { justify-content: center; gap: .4rem 1rem; font-size: .8rem; }
}

/* --- Stats band --------------------------------------------------------- */
.stats {
	background: var(--ink);
	color: #dfe4f6;
	padding: 0 0 clamp(3rem, 6vw, 4.5rem);
}
.stats__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--r-lg);
}
.stat { text-align: center; }
.stat__value {
	margin: 0 0 .2rem;
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 700;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(120deg, var(--gold), #ff8a3d 55%, var(--magenta));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.stat__label { margin: 0; font-size: .86rem; color: rgba(203, 211, 236, .7); line-height: 1.4; }

/* --- Sections ----------------------------------------------------------- */
.sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sec--tools { background: var(--paper-2); border-block: 1px solid var(--line); }

.sec__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec__title { font-size: clamp(1.8rem, 3.8vw, 2.6rem); margin-bottom: .4em; }
.sec__lede { margin: 0; color: var(--muted); font-size: 1.05rem; }
.sec__more { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* Service cards */
.cards {
	display: grid;
	gap: clamp(1rem, 2vw, 1.4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.card {
	position: relative;
	padding: 1.75rem 1.6rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(239, 90, 36, .09), transparent 62%);
	opacity: 0;
	transition: opacity .3s var(--ease);
	pointer-events: none;
}
.card:hover {
	transform: translateY(-4px);
	border-color: rgba(239, 90, 36, .32);
	box-shadow: var(--shadow-md);
}
.card:hover::before { opacity: 1; }
.card__icon {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	margin-bottom: 1.1rem;
	border-radius: 13px;
	color: var(--brand-deep);
	background: linear-gradient(140deg, rgba(255, 194, 74, .2), rgba(255, 61, 129, .14));
	border: 1px solid rgba(239, 90, 36, .18);
}
.card__title { font-size: 1.15rem; margin-bottom: .5rem; }
.card__body { margin: 0; color: var(--muted); font-size: .95rem; }

/* Toolkit list */
.tools {
	display: grid;
	gap: .8rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	list-style: none;
	margin: 0; padding: 0;
}
.tool {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: 1rem 1.15rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tool:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--tint) 55%, var(--line));
	box-shadow: var(--shadow-sm);
}
.tool__icon {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	flex: none;
	border-radius: 12px;
	color: color-mix(in srgb, var(--tint) 78%, #2a2f45);
	background: color-mix(in srgb, var(--tint) 13%, #fff);
	border: 1px solid color-mix(in srgb, var(--tint) 26%, #fff);
}
.tool__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tool__name { font-weight: 600; font-size: .98rem; }
.tool__note { font-size: .82rem; color: var(--muted); }

/* --- Closing CTA -------------------------------------------------------- */
.cta {
	position: relative;
	overflow: hidden;
	padding: clamp(3.5rem, 8vw, 6rem) 0;
	background:
		radial-gradient(90% 130% at 18% 10%, #2a1b4d 0%, transparent 60%),
		radial-gradient(70% 110% at 88% 92%, #4a1533 0%, transparent 58%),
		var(--ink);
	color: #e9ecfa;
}
.cta__inner { max-width: 44rem; text-align: center; margin-inline: auto; }
.cta__title { font-size: clamp(1.9rem, 4.2vw, 2.75rem); color: #fff; }
.cta__body { margin: 0 0 2rem; color: rgba(222, 228, 250, .78); font-size: 1.05rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta .btn--ghost { color: #eef0fa; border-color: rgba(255, 255, 255, .24); }
.cta .btn--ghost:hover { color: #fff; border-color: var(--gold); background: rgba(255, 194, 74, .12); }

.sec--journal + .cta { margin-top: 0; }
.site-foot { margin-top: 0; }

/* --- Keyframes ---------------------------------------------------------- */
@keyframes spin {
	to { transform: rotate(360deg); }
}
@keyframes breathe {
	from { transform: scale(1); }
	to   { transform: scale(1.035); }
}
@keyframes rimpulse {
	from { opacity: .8; }
	to   { opacity: 1; }
}
@keyframes flicker {
	from { opacity: .45; }
	to   { opacity: .95; }
}
@keyframes blip {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .45; transform: scale(.85); }
}
@keyframes drift {
	to { transform: translate3d(-160px, -110px, 0); }
}

/* --- Motion & data preferences ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.orbit__spin,
	.sat__ico,
	.plasma__field,
	.plasma__rays,
	.plasma__flicker,
	.plasma__bloom,
	.plasma__rim,
	.star,
	.star__sheen,
	.hero__stars,
	.dot {
		animation: none !important;
	}
	/* Freeze the satellites at their start angles rather than stacking them. */
	.sat__ico { transform: none; }
}