/* ============================================================
   GeniusAI — Landing Design System
   All styles live here. No frameworks, no external deps.
   ============================================================ */

/* ------------------------------------------------------------
   1. Fonts (local, variable)
   ------------------------------------------------------------ */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora — brand wordmark */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/sora-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/sora-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------ */
:root {
	--bg-0: #05060e;
	--bg-1: #0a0c1a;
	--bg-2: #10132a;
	--surface: rgba(255, 255, 255, .04);
	--surface-2: rgba(255, 255, 255, .07);
	--border: rgba(255, 255, 255, .09);
	--border-strong: rgba(255, 255, 255, .18);
	--text-1: #f2f3ff;
	--text-2: #a8aec8;
	--text-3: #6d7390;
	--violet: #7c5cff;
	--magenta: #ff4ecd;
	--cyan: #22d3ee;
	--amber: #ffb648;
	--grad: linear-gradient(100deg, #22d3ee, #7c5cff 45%, #ff4ecd);
	--grad-soft: linear-gradient(135deg, rgba(124, 92, 255, .35), rgba(255, 78, 205, .25));
	--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--radius: 18px;
	--radius-lg: 28px;
	--container: 1220px;
	--header-h: 78px;
	--shadow-card: 0 24px 60px -18px rgba(0, 0, 0, .65);
	--glow-violet: 0 0 44px rgba(124, 92, 255, .38);
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ------------------------------------------------------------
   3. Reset & base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 14px);
	-webkit-text-size-adjust: 100%;
}

html.js:not(.is-loaded) { overflow: hidden; }

body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-2);
	background: var(--bg-0);
	overflow-x: hidden;
	min-height: 100vh;
}

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

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--text-1);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.02em;
}

::selection { background: rgba(255, 78, 205, .35); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #3c3f63, #23253e);
	border-radius: 8px;
	border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7c5cff, #ff4ecd); }

:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 28px;
}

.container-narrow { max-width: 900px; }

/* Film-grain overlay */
/* Scroll progress bar — thin gradient line at the very top */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 95;
	pointer-events: none;
}
.scroll-progress span {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, #22d3ee, #7c5cff 50%, #ff4ecd);
	box-shadow: 0 0 12px rgba(124, 92, 255, .55);
	will-change: transform;
}

/* Site-wide ambient colour — soft fixed glows behind everything, so colour
   flows continuously between sections instead of getting cut at each edge */
.site-glow {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(46% 38% at 10% 6%, rgba(124, 92, 255, .13), transparent 72%),
		radial-gradient(42% 38% at 90% 20%, rgba(255, 78, 205, .09), transparent 72%),
		radial-gradient(52% 44% at 80% 94%, rgba(34, 211, 238, .07), transparent 72%),
		radial-gradient(48% 40% at 20% 82%, rgba(124, 92, 255, .08), transparent 72%);
}

/* Site-wide star sky — a constant deep-space layer behind all content */
.site-stars {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.noise {
	position: fixed;
	inset: -50%;
	width: 200%;
	height: 200%;
	pointer-events: none;
	z-index: 3;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: noiseShift 1.2s steps(4) infinite;
}
@keyframes noiseShift {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-1.5%, 1%); }
	50% { transform: translate(1%, -1.5%); }
	75% { transform: translate(-1%, -1%); }
	100% { transform: translate(1.5%, 1%); }
}

/* ------------------------------------------------------------
   4. Reveal-on-scroll system
   ------------------------------------------------------------ */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
html.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------
   5. Buttons & links
   ------------------------------------------------------------ */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	color: #fff;
	padding: 15px 26px;
	border-radius: 100px;
	overflow: hidden;
	white-space: nowrap;
	transition: transform .3s var(--ease-spring), box-shadow .35s ease, background-color .3s ease, border-color .3s ease;
	isolation: isolate;
}
.btn span { position: relative; z-index: 2; }

.btn-primary {
	background: linear-gradient(115deg, #22d3ee -20%, #7c5cff 40%, #ff4ecd 105%);
	box-shadow: 0 10px 30px -8px rgba(124, 92, 255, .55);
}
.btn-primary::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, #ff4ecd -5%, #7c5cff 60%, #22d3ee 120%);
	opacity: 0;
	transition: opacity .4s ease;
	z-index: 0;
}
.btn-primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	z-index: 1;
	animation: btnShine 4.2s ease-in-out infinite;
}
@keyframes btnShine {
	0%, 55% { left: -80%; }
	85%, 100% { left: 130%; }
}
.btn-primary:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 16px 42px -8px rgba(255, 78, 205, .55);
}
.btn-primary:hover::before { opacity: 1; }

.btn-ghost {
	border: 1px solid var(--border-strong);
	background: rgba(255, 255, 255, .03);
	backdrop-filter: blur(8px);
}
.btn-ghost:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .34);
}

.btn-light {
	background: #fff;
	color: #17092e;
	box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .45);
}
.btn-light:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 20px 44px -10px rgba(0, 0, 0, .55); }

.btn-sm { padding: 12px 20px; font-size: 14px; }
.btn-lg { padding: 18px 34px; font-size: 16px; }

.btn-spark { width: 15px; height: 15px; fill: #fff; position: relative; z-index: 2; transition: transform .5s var(--ease-spring); }
.btn:hover .btn-spark { transform: rotate(180deg) scale(1.15); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text-1);
	transition: color .3s ease;
}
.link-arrow span { transition: transform .3s var(--ease-spring); }
.link-arrow:hover { color: var(--magenta); }
.link-arrow:hover span { transform: translateX(5px); }

.grad-text {
	background: var(--grad);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-style: normal;
	animation: gradFlow 6s ease-in-out infinite alternate;
}
@keyframes gradFlow {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

/* ------------------------------------------------------------
   6. Preloader
   ------------------------------------------------------------ */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	/* same deep-space base as the site so the star canvas reads continuous */
	background: var(--bg-0);
	overflow: hidden;
	transition: opacity .7s ease .15s, visibility .7s ease .15s;
}
html.no-js .preloader { display: none; }
html.is-loaded .preloader { opacity: 0; visibility: hidden; pointer-events: none; }

/* own star sky — mirrors .site-stars so the curtain opens onto the same night */
.preloader-stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.preloader-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
}

/* brand core — motes gather here, then burst into the logo */
.preloader-core {
	position: relative;
	width: 120px;
	height: 120px;
	display: grid;
	place-items: center;
}
.preloader-aura {
	position: absolute;
	inset: -34%;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at 50% 50%,
		rgba(124, 92, 255, .38) 0%,
		rgba(34, 211, 238, .14) 38%,
		transparent 68%);
	transition: opacity .7s ease;
}
.preloader.is-manifest .preloader-aura { opacity: .55; }
.preloader.is-burst .preloader-aura {
	opacity: 1;
	animation: preAura 5.5s ease-in-out infinite;
}
@keyframes preAura {
	0%, 100% { transform: scale(1); opacity: .85; }
	50% { transform: scale(1.12); opacity: 1; }
}

.preloader-motes {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* spill across the whole curtain so gather origins can sit far out */
	overflow: visible;
}
.preloader-mote {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -3px;
	border-radius: 50%;
	background: var(--m-color, #7c5cff);
	box-shadow: 0 0 11px var(--m-color, #7c5cff), 0 0 4px var(--m-color, #7c5cff);
	opacity: 0;
	transform: translate(var(--mx, 0), var(--my, 0));
	will-change: transform, opacity;
}
.preloader.is-manifest .preloader-mote {
	animation: preMoteIn 1.35s cubic-bezier(.4, 0, .55, 1) both;
	animation-delay: var(--d, 0s);
}
.preloader.is-ambient .preloader-mote {
	width: 9px;
	height: 9px;
	margin: -4.5px;
	box-shadow: 0 0 16px var(--m-color, #7c5cff), 0 0 6px var(--m-color, #7c5cff);
	animation: preMoteIn var(--adur, 3.2s) linear infinite;
	animation-delay: var(--ad, 0s);
}
@keyframes preMoteIn {
	0% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(.6); }
	22% { opacity: 1; }
	100% { opacity: 0; transform: translate(0, 0) scale(1.35); }
}

.preloader-flash {
	position: absolute;
	inset: -50%;
	z-index: 3;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
	mix-blend-mode: screen;
	background: radial-gradient(circle at 50% 50%,
		rgba(255, 255, 255, .95) 0%,
		rgba(124, 92, 255, .55) 26%,
		rgba(34, 211, 238, .2) 46%,
		transparent 64%);
}
.preloader.is-burst .preloader-flash { animation: preBurstFlash .85s ease-out; }
@keyframes preBurstFlash {
	0% { opacity: 0; transform: scale(.2); }
	24% { opacity: 1; }
	100% { opacity: 0; transform: scale(1.9); }
}

.preloader-sparks {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}
.preloader-burst-spark {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -.5em 0 0 -.5em;
	font-family: var(--font-display);
	font-size: 15px;
	line-height: 1;
	font-style: normal;
	opacity: 0;
	transform: scale(0);
	text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}
.preloader.is-burst .preloader-burst-spark {
	animation: preBurstSpark .95s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: var(--sd, 0s);
}
@keyframes preBurstSpark {
	0% { opacity: 0; transform: translate(0, 0) scale(0) rotate(0deg); }
	28% { opacity: 1; transform: translate(calc(var(--bx) * .5), calc(var(--by) * .5)) scale(1.3) rotate(40deg); }
	100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.3) rotate(90deg); }
}

.preloader-mark {
	position: relative;
	z-index: 5;
	width: 92px;
	height: 92px;
	overflow: visible;
	opacity: 0;
	transform: scale(.28) rotate(-40deg);
	filter: drop-shadow(0 0 18px rgba(124, 92, 255, .55));
}
.preloader.is-burst .preloader-mark {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease .08s, transform .85s cubic-bezier(.34, 1.56, .64, 1) .08s;
}

.preloader-spark {
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
}
.preloader.is-burst .preloader-spark {
	animation: drawSpark 1.2s var(--ease-out) .12s forwards, sparkFill .9s ease .7s forwards;
}
@keyframes drawSpark { to { stroke-dashoffset: 0; } }
@keyframes sparkFill { to { fill: rgba(124, 92, 255, .35); } }

.preloader-orbit {
	stroke-dasharray: 124;
	opacity: 0;
}
.preloader.is-burst .preloader-orbit {
	opacity: .6;
	transition: opacity .6s ease .2s;
}

.preloader-mini {
	opacity: 0;
	transform-origin: 50px 48px;
}
.preloader.is-burst .preloader-mini {
	animation: miniPop .6s var(--ease-spring) .55s forwards, miniTwinkle 2s ease-in-out 1.3s infinite;
}
@keyframes miniPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes miniTwinkle { 50% { opacity: .4; } }

.preloader-word {
	display: flex;
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--text-1);
}
.preloader-word span {
	opacity: 0;
	transform: translateY(18px);
}
.preloader.is-burst .preloader-word span {
	animation: letterUp .55s var(--ease-spring) forwards;
}
.preloader.is-burst .preloader-word span:nth-child(1) { animation-delay: .18s; }
.preloader.is-burst .preloader-word span:nth-child(2) { animation-delay: .25s; }
.preloader.is-burst .preloader-word span:nth-child(3) { animation-delay: .32s; }
.preloader.is-burst .preloader-word span:nth-child(4) { animation-delay: .39s; }
.preloader.is-burst .preloader-word span:nth-child(5) { animation-delay: .46s; }
.preloader.is-burst .preloader-word span:nth-child(6) { animation-delay: .53s; }
.preloader.is-burst .preloader-word span:nth-child(7) { animation-delay: .65s; }
.preloader.is-burst .preloader-word span:nth-child(8) { animation-delay: .72s; }
.preloader-word .grad {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
@keyframes letterUp { to { opacity: 1; transform: none; } }

.preloader-bar {
	width: 180px;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
	opacity: 0;
	transition: opacity .5s ease;
}
.preloader.is-burst .preloader-bar { opacity: 1; transition-delay: .45s; }
.preloader-bar span {
	display: block;
	height: 100%;
	width: 40%;
	border-radius: 3px;
	background: var(--grad);
	animation: barSlide 1.1s ease-in-out infinite;
}
@keyframes barSlide {
	0% { transform: translateX(-110%); }
	100% { transform: translateX(460%); }
}

@media (prefers-reduced-motion: reduce) {
	.preloader-mote, .preloader-flash, .preloader-burst-spark, .preloader-aura { display: none !important; }
	.preloader-mark, .preloader-word span, .preloader-bar, .preloader-orbit { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
	.preloader-spark { stroke-dashoffset: 0; fill: rgba(124, 92, 255, .35); animation: none !important; }
	.preloader-mini { opacity: 1 !important; animation: none !important; }
}

/* ------------------------------------------------------------
   7. Header
   ------------------------------------------------------------ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	height: var(--header-h);
	display: flex;
	align-items: center;
	transition: transform .45s var(--ease-out), background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease, height .4s ease;
	border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
	height: 66px;
	background: rgba(5, 6, 14, .72);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom-color: var(--border);
}
.site-header.is-hidden { transform: translateY(-110%); }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
}
.logo-mark { width: 36px; height: 36px; overflow: visible; }
/* Two crossed orbit rings: the first draws in, then the mirrored one, then both un-draw together */
.logo-orbit ellipse { stroke-dasharray: 124; }
.orbit-a { animation: orbitA 4s ease-in-out infinite; }
.orbit-b { animation: orbitB 4s ease-in-out infinite; }
@keyframes orbitA {
	0%, 5%    { stroke-dashoffset: 124; }
	28%, 65%  { stroke-dashoffset: 0; }
	85%, 100% { stroke-dashoffset: -124; }
}
@keyframes orbitB {
	0%, 33%   { stroke-dashoffset: 124; }
	56%, 65%  { stroke-dashoffset: 0; }
	85%, 100% { stroke-dashoffset: -124; }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.logo-spark { transform-origin: 32px 30px; transition: transform .6s var(--ease-spring); }
.logo:hover .logo-spark { transform: rotate(72deg) scale(1.08); }
.logo-mini { animation: miniTwinkle 2.4s ease-in-out infinite; }

.logo-word {
	font-family: 'Sora', var(--font-display);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--text-1);
}
.logo-word em {
	font-style: normal;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nav { display: flex; align-items: center; gap: 4px; }

.nav-link {
	position: relative;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text-2);
	padding: 9px 13px;
	border-radius: 9px;
	transition: color .3s ease;
}
.nav-link::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease-out);
}
.nav-link:hover { color: var(--text-1); }
.nav-link:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-signin { padding: 9px 6px; }

/* Burger */
.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--surface);
}
.burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--text-1);
	transition: transform .35s var(--ease-out), opacity .25s ease, width .35s ease;
}
.burger span:nth-child(2) { width: 70%; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 110px 34px 48px;
	visibility: hidden;
	opacity: 0;
	transition: opacity .45s ease, visibility .45s ease;
}
.mobile-menu-bg {
	position: absolute;
	inset: 0;
	background: rgba(5, 6, 14, .9);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}
body.menu-open .mobile-menu { visibility: visible; opacity: 1; }

.mobile-nav { position: relative; display: flex; flex-direction: column; gap: 6px; }
.mobile-link {
	display: flex;
	align-items: baseline;
	gap: 16px;
	font-family: var(--font-display);
	font-size: clamp(26px, 6vw, 34px);
	font-weight: 700;
	color: var(--text-1);
	padding: 8px 0;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s ease;
}
.mobile-link i {
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-3);
	font-family: var(--font-body);
}
.mobile-link:hover { color: var(--magenta); }
body.menu-open .mobile-link { opacity: 1; transform: none; }
body.menu-open .mobile-link:nth-child(1) { transition-delay: .1s; }
body.menu-open .mobile-link:nth-child(2) { transition-delay: .16s; }
body.menu-open .mobile-link:nth-child(3) { transition-delay: .22s; }
body.menu-open .mobile-link:nth-child(4) { transition-delay: .28s; }
body.menu-open .mobile-link:nth-child(5) { transition-delay: .34s; }
body.menu-open .mobile-link:nth-child(6) { transition-delay: .4s; }

.mobile-menu-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .5s var(--ease-out) .45s, transform .5s var(--ease-out) .45s;
}
body.menu-open .mobile-menu-cta { opacity: 1; transform: none; }
.mobile-signin { color: var(--text-2); font-size: 14.5px; }
.mobile-signin b { color: var(--text-1); }

/* ------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------ */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: calc(var(--header-h) + 40px) 0 90px;
	overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
	mix-blend-mode: screen;
}
.aurora-1 {
	width: 640px;
	height: 640px;
	top: -220px;
	left: -140px;
	background: radial-gradient(circle, rgba(124, 92, 255, .55), transparent 65%);
	animation: auroraDrift1 16s ease-in-out infinite alternate;
}
.aurora-2 {
	width: 560px;
	height: 560px;
	top: -120px;
	right: -160px;
	background: radial-gradient(circle, rgba(255, 78, 205, .4), transparent 65%);
	animation: auroraDrift2 20s ease-in-out infinite alternate;
}
.aurora-3 {
	width: 500px;
	height: 500px;
	bottom: -240px;
	left: 32%;
	background: radial-gradient(circle, rgba(34, 211, 238, .32), transparent 65%);
	animation: auroraDrift3 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift1 { to { transform: translate(120px, 90px) scale(1.15); } }
@keyframes auroraDrift2 { to { transform: translate(-100px, 120px) scale(1.1); } }
@keyframes auroraDrift3 { to { transform: translate(-120px, -70px) scale(1.2); } }

#starfield { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-floor {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -46%;
	height: 70%;
	background-image:
		linear-gradient(rgba(124, 92, 255, .16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(124, 92, 255, .16) 1px, transparent 1px);
	background-size: 54px 54px;
	transform: perspective(600px) rotateX(62deg);
	mask-image: radial-gradient(65% 90% at 50% 0%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(65% 90% at 50% 0%, #000 20%, transparent 75%);
	animation: floorFlow 22s linear infinite;
}
@keyframes floorFlow { to { background-position: 0 54px, 0 0; } }

.hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	align-items: center;
	gap: 40px;
}

/* Eyebrow pill */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-2);
	padding: 9px 18px;
	border-radius: 100px;
	border: 1px solid var(--border);
	background: var(--surface);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.eyebrow svg {
	width: 13px;
	height: 13px;
	fill: var(--amber);
	animation: eyebrowSpark 2.6s ease-in-out infinite;
}
@keyframes eyebrowSpark {
	0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	50% { transform: scale(.75) rotate(45deg); opacity: .6; }
}

/* Hero eyebrow — "Aurora Shimmer Pill": rotating conic-gradient ring + swept text
   shimmer. Scoped to the hero pill only (the site's other .eyebrow section-labels
   keep their plain style). The existing amber svg (eyebrowSpark) is left untouched. */
@property --eb-ring-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.eyebrow { position: relative; isolation: isolate; border-color: transparent; }
.eyebrow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	padding: 1px;
	/* plain fallback value so the gradient stays valid where @property is unsupported
	   (Safari <16.4 / Firefox <128) — the ring renders static instead of vanishing */
	--eb-ring-angle: 0deg;
	background: conic-gradient(from var(--eb-ring-angle, 0deg),
		transparent 0%, rgba(124, 92, 255, 0) 8%,
		#7c5cff 22%, #22d3ee 40%, #ff4ecd 58%,
		rgba(255, 78, 205, 0) 74%, transparent 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: .85;
	animation: eyebrowRingSpin 7s linear infinite;
}
.eyebrow > span {
	background-image: linear-gradient(100deg, #b7b2d6 0%, #b7b2d6 40%, #eafaff 48%, #ffffff 50%, #eafaff 52%, #b7b2d6 60%, #b7b2d6 100%);
	background-size: 220% 100%;
	background-position: 200% 0;
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: eyebrowShimmer 4.8s cubic-bezier(.5, 0, .35, 1) infinite;
}
@keyframes eyebrowRingSpin { to { --eb-ring-angle: 360deg; } }
@keyframes eyebrowShimmer { 0%, 18% { background-position: 200% 0; } 70%, 100% { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
	.eyebrow::before { animation: none; --eb-ring-angle: 210deg; opacity: .7; }
	.eyebrow > span { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--text-2); }
}

.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }

.hero-title {
	font-size: clamp(42px, 3.4vw + 26px, 72px);
	line-height: 1.04;
	letter-spacing: -.03em;
}
.hero-line { display: block; }

.hero-sub {
	max-width: 480px;
	font-size: 17px;
	line-height: 1.65;
}

/* Prompt box */
.prompt-box {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 560px;
	padding: 10px 10px 10px 20px;
	border-radius: 100px;
	border: 1px solid var(--border-strong);
	background: rgba(10, 12, 26, .7);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
	position: relative;
}
.prompt-box::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(100deg, rgba(34, 211, 238, .6), rgba(124, 92, 255, .5) 45%, rgba(255, 78, 205, .6));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .5s ease;
}
.prompt-box:hover::before { opacity: 1; }

.prompt-spark {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	fill: var(--violet);
	fill: url(#hdrG) var(--violet);
	animation: eyebrowSpark 3s ease-in-out infinite;
}
.prompt-line {
	flex: 1 1 0%;
	width: 0; /* keeps the nowrap text from inflating the box's min-content */
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 24px; /* fixed height so the box never jumps while the caret is empty */
	font-size: 15px;
	color: var(--text-1);
	white-space: nowrap;
	overflow: hidden;
}
#prompt-type { min-width: 0; overflow: hidden; }
.prompt-caret {
	flex-shrink: 0;
	width: 2px;
	height: 19px;
	margin-left: 3px;
	border-radius: 2px;
	background: var(--magenta);
	animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.prompt-btn { flex-shrink: 0; }

/* Hero stats */
.hero-meta {
	display: flex;
	align-items: center;
	gap: 38px;
	margin-top: 6px;
}
.hero-stat { display: flex; flex-direction: column; gap: 3px; }
.hero-stat b {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--text-1);
	letter-spacing: -.02em;
}
.hero-stat-label { font-size: 13px; color: var(--text-3); }

/* Hero visual */
.hero-visual {
	position: relative;
	height: 560px;
}

.hero-orbits { position: absolute; inset: 0; }
.hero-orbits span {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px dashed rgba(255, 255, 255, .1);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: orbitRotate 40s linear infinite;
}
.hero-orbits span:nth-child(1) { width: 420px; height: 420px; }
.hero-orbits span:nth-child(2) { width: 560px; height: 560px; animation-duration: 60s; animation-direction: reverse; opacity: .7; }
.hero-orbits span:nth-child(3) { width: 700px; height: 700px; animation-duration: 90s; opacity: .4; }
@keyframes orbitRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hero-card {
	position: absolute;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: var(--shadow-card);
	background: var(--bg-2);
	will-change: transform;
}
.hero-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-card figcaption {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .92);
	background: rgba(5, 6, 14, .55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	padding: 7px 10px;
}

.hero-card-main {
	width: 300px;
	height: 375px;
	top: 50%;
	left: 50%;
	margin: -205px 0 0 -150px;
	z-index: 3;
	--rot: 0deg;
	transform: rotate(var(--rot));
}
.hero-card-left {
	width: 205px;
	height: 285px;
	top: 8%;
	left: -2%;
	z-index: 2;
	--rot: -9deg;
	transform: rotate(var(--rot));
}
.hero-card-right {
	width: 225px;
	height: 285px;
	right: -3%;
	bottom: 4%;
	z-index: 4;
	--rot: 8deg;
	transform: rotate(var(--rot));
}

.hero-sticker {
	position: absolute;
	width: 120px;
	top: -6px;
	right: 12%;
	z-index: 5;
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5));
	animation: stickerWobble 7s ease-in-out infinite;
}
@keyframes stickerWobble {
	0%, 100% { rotate: -6deg; }
	50% { rotate: 8deg; }
}

.hero-chip {
	position: absolute;
	z-index: 6;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-1);
	padding: 10px 16px;
	border-radius: 100px;
	border: 1px solid var(--border-strong);
	background: rgba(10, 12, 26, .75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
}
.hero-chip-1 { left: 2%; bottom: 16%; }
.hero-chip-2 { right: 0; top: 22%; }

/* ------------------------------------------------------------
   Hero cards — "Prism Spark-Burst" magic image swap.
   Animates ONLY inner layers (imgs + overlays). The figure's
   transform (rotate tilt) and translate (parallax rAF) are never
   touched. Mostly compositor-driven (opacity/transform); a short
   blur runs on the INCOMING image only, and a JS gate keeps at
   most one card swapping at a time to bound GPU cost.
   ------------------------------------------------------------ */
.hero-card { --hc-dur: 1.15s; --hc-glow: var(--violet); --hc-spark-scale: 1; }

.hero-card .hc-stage { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; }
.hero-card figcaption { z-index: 2; }

.hero-card .hc-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.hero-card .hc-img.is-front { opacity: 1; z-index: 2; }
.hero-card .hc-img.is-back  { opacity: 0; z-index: 1; }
.hero-card.is-swapping .hc-img { will-change: transform, opacity, filter; }
.hero-card.is-swapping .hc-img.is-back  { opacity: 1; z-index: 3; animation: hcImgIn  var(--hc-dur) cubic-bezier(.2, .7, .2, 1) both; }
.hero-card.is-swapping .hc-img.is-front { z-index: 2;             animation: hcImgOut var(--hc-dur) cubic-bezier(.4, 0, .6, 1) both; }

/* faint 'developing' scanline (opacity only) */
.hero-card .hc-scan {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px);
	mix-blend-mode: screen;
}
.hero-card.is-swapping .hc-scan { animation: hcScan var(--hc-dur) ease-in-out both; }

/* causal brand edge-glow — STATIC inset shadow, only opacity animates; hue set per swap */
.hero-card .hc-edge {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--hc-glow), inset 0 0 22px -4px var(--hc-glow), inset 0 0 60px -22px var(--hc-glow);
}
.hero-card.is-swapping .hc-edge { will-change: opacity; animation: hcEdge var(--hc-dur) ease-in-out both; }

/* white/purple center light-flash — bridges the beat + masks the finalize flip */
.hero-card .hc-flash {
	position: absolute;
	inset: -12%;
	z-index: 6;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .88) 0%, rgba(124, 92, 255, .45) 32%, rgba(34, 211, 238, .18) 54%, rgba(255, 78, 205, 0) 72%);
	mix-blend-mode: screen;
	opacity: 0;
}
.hero-card.is-swapping .hc-flash { will-change: transform, opacity; animation: hcFlash var(--hc-dur) ease-out both; }

/* chromatic prism edge — two hue-offset conic rings + screen blend = RGB split */
.hero-card .hc-prism {
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	mix-blend-mode: screen;
}
.hero-card .hc-prism::before,
.hero-card .hc-prism::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(from 0deg, #22d3ee, #7c5cff, #ff4ecd, #ffb648, #22d3ee);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
}
.hero-card .hc-prism::before { transform: translate(1.6px, -.6px); }
.hero-card .hc-prism::after  { transform: translate(-1.6px, .6px); filter: hue-rotate(150deg); }
.hero-card.is-swapping .hc-prism { will-change: opacity, filter; animation: hcPrism var(--hc-dur) ease-in-out both; }

/* 4-point brand-star constellation burst (clipped to the card by hc-sparks overflow) */
.hero-card .hc-sparks { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; overflow: hidden; }
.hero-card .hc-spark {
	position: absolute;
	margin: -.5em 0 0 -.5em;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1;
	font-style: normal;
	opacity: 0;
	transform: scale(0);
	text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}
.hero-card.is-swapping .hc-spark { will-change: transform, opacity; animation: hcSpark 1s cubic-bezier(.2, .8, .2, 1) both; }
.hero-card.is-swapping .hc-spark:nth-child(1) { animation-delay: 0s;   font-size: 22px; }
.hero-card.is-swapping .hc-spark:nth-child(2) { animation-delay: .05s; font-size: 17px; }
.hero-card.is-swapping .hc-spark:nth-child(3) { animation-delay: .11s; font-size: 24px; }
.hero-card.is-swapping .hc-spark:nth-child(4) { animation-delay: .07s; font-size: 16px; }
.hero-card.is-swapping .hc-spark:nth-child(5) { animation-delay: .03s; font-size: 19px; }
.hero-card.is-swapping .hc-spark:nth-child(6) { animation-delay: .13s; font-size: 21px; }

/* caption RGB-split + re-typeset (glitch, hard steps) instead of a plain fade */
.hero-card.is-swapping figcaption { animation: hcCap var(--hc-dur) steps(1, end) both; }

@keyframes hcImgIn {
	0%   { opacity: 0; filter: blur(10px) saturate(1.7) brightness(1.2); transform: scale(.92); }
	45%  { opacity: 1; filter: blur(3px) saturate(1.3) brightness(1.06); }
	100% { opacity: 1; filter: blur(0) saturate(1) brightness(1); transform: scale(1); }
}
/* outgoing is pure opacity+transform (no blur) — halves the simultaneous blur load */
@keyframes hcImgOut {
	0%   { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(.86); }
}
@keyframes hcScan  { 0% { opacity: 0; } 20% { opacity: .5; } 80% { opacity: .28; } 100% { opacity: 0; } }
@keyframes hcEdge  { 0%, 100% { opacity: 0; } 30% { opacity: .9; } 70% { opacity: .5; } }
@keyframes hcFlash { 0% { opacity: 0; transform: scale(.55); } 26% { opacity: .9; } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes hcPrism { 0% { opacity: 0; filter: hue-rotate(0deg); } 18% { opacity: 1; } 78% { opacity: .85; } 100% { opacity: 0; filter: hue-rotate(130deg); } }
@keyframes hcSpark {
	0%   { opacity: 0; transform: translate(0, 0) scale(0) rotate(0deg); }
	22%  { opacity: 1; transform: translate(calc(var(--sx) * var(--hc-spark-scale) * .5), calc(var(--sy) * var(--hc-spark-scale) * .5)) scale(1.25) rotate(35deg); }
	55%  { opacity: 1; transform: translate(calc(var(--sx) * var(--hc-spark-scale)), calc(var(--sy) * var(--hc-spark-scale))) scale(.95) rotate(72deg); }
	100% { opacity: 0; transform: translate(calc(var(--sx) * var(--hc-spark-scale) * 1.28), calc(var(--sy) * var(--hc-spark-scale) * 1.28)) scale(.3) rotate(120deg); }
}
@keyframes hcCap {
	0%   { opacity: 1;   text-shadow: none; }
	26%  { opacity: .5;  text-shadow: -2px 0 rgba(255, 78, 205, .9), 2px 0 rgba(34, 211, 238, .9); }
	46%  { opacity: .28; text-shadow: -2px 0 rgba(255, 78, 205, .9), 2px 0 rgba(34, 211, 238, .9); }
	60%  { opacity: .85; text-shadow: 2px 0 rgba(255, 78, 205, .7), -2px 0 rgba(34, 211, 238, .7); }
	100% { opacity: 1;   text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-card.is-swapping .hc-img,
	.hero-card.is-swapping .hc-scan,
	.hero-card.is-swapping .hc-edge,
	.hero-card.is-swapping .hc-flash,
	.hero-card.is-swapping .hc-prism,
	.hero-card.is-swapping .hc-spark,
	.hero-card.is-swapping figcaption { animation: none !important; }
	.hero-card .hc-scan,
	.hero-card .hc-edge,
	.hero-card .hc-flash,
	.hero-card .hc-prism,
	.hero-card .hc-spark { opacity: 0 !important; }
}
/* spark offsets are px-tuned for desktop cards; shrink the burst on smaller cards
   so it stays on-card instead of flying past the clipped edge */
@media (max-width: 640px) { .hero-card { --hc-spark-scale: .62; } }
@media (max-width: 400px) { .hero-card-left, .hero-card-right { --hc-spark-scale: .5; } }

/* Scroll cue */
.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 5;
	width: 26px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-radius: 16px;
	display: flex;
	justify-content: center;
	padding-top: 7px;
	transition: border-color .3s ease;
}
.scroll-cue span {
	width: 3px;
	height: 8px;
	border-radius: 3px;
	background: var(--text-1);
	animation: cueDrop 1.8s ease-in-out infinite;
}
.scroll-cue:hover { border-color: var(--magenta); }
@keyframes cueDrop {
	0% { transform: translateY(0); opacity: 1; }
	70% { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

/* ------------------------------------------------------------
   9. Marquee
   ------------------------------------------------------------ */
.marquee-zone {
	position: relative;
	z-index: 2;
	padding: 0 0 8px;
	overflow-x: clip;                        /* clip the wide/tilted ribbon so it never adds page scroll */
	background: linear-gradient(180deg, transparent, rgba(124, 92, 255, .05) 40%, transparent);
}
/* subtle diagonal band, centred ON the hero's bottom edge so it always covers the seam at any width.
   The band pulls itself up by ~half its own height; a small tilt + generous height keep the seam
   covered even on wide screens (the tilt drift stays under the band's half-height). */
.marquee-ribbon {
	position: relative;
	width: 106%;
	margin: -22px 0 30px -3%;
	padding: 22px 0;
	transform: rotate(-1.1deg);
	background: linear-gradient(90deg, rgba(124, 92, 255, .24), rgba(34, 211, 238, .17) 50%, rgba(255, 78, 205, .24));
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 14px 50px -14px rgba(124, 92, 255, .55), inset 0 0 40px -12px rgba(255, 255, 255, .16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	-webkit-mask-image: none;
	        mask-image: none;
}
/* on wide screens flatten the tilt so the tilt drift never lifts the band off the seam */
@media (min-width: 1500px) { .marquee-ribbon { transform: rotate(-0.7deg); } }
@media (min-width: 1900px) { .marquee-ribbon { transform: rotate(-0.5deg); } }
.marquee-ribbon .marquee-track { gap: 30px; --half-gap: 15px; }
.marquee-ribbon span { color: var(--text-1); }

.marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	/* generous vertical padding so the item lift (-8px) + hover shadow (0 20px 44px)
	   render inside the horizontal clip box instead of being cut off top/bottom */
	padding: 30px 0 46px;
}
.marquee-track {
	display: flex;
	align-items: center;
	gap: 22px;
	width: max-content;
	animation: marqueeMove var(--marquee-dur, 46s) linear infinite;
}
.marquee[data-reverse] .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeMove { to { transform: translateX(calc(-50% - var(--half-gap, 11px))); } }

.marquee-item {
	flex-shrink: 0;
	width: 190px;
	height: 235px;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--border);
	transition: transform .45s var(--ease-spring), border-color .4s ease, box-shadow .4s ease;
}
.marquee-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.09);
	transition: transform .6s var(--ease-out);
}
.marquee-item:hover {
	transform: translateY(-8px) rotate(-1.5deg);
	border-color: rgba(255, 78, 205, .5);
	box-shadow: 0 20px 44px -14px rgba(124, 92, 255, .45);
}
.marquee-item:hover img { transform: scale(1.16); }

.marquee-text { padding: 6px 0; }
.marquee-text .marquee-track { gap: 34px; --half-gap: 17px; }
.marquee-text span {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-3);
	white-space: nowrap;
}
.marquee-text i {
	font-style: normal;
	color: var(--amber);
	font-size: 13px;
	animation: eyebrowSpark 3s ease-in-out infinite;
}

/* ------------------------------------------------------------
   10. Sections shell
   ------------------------------------------------------------ */
.section { position: relative; padding: 110px 0; }

.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
	max-width: 640px;
	margin: 0 auto 64px;
}
.section-title {
	font-size: clamp(30px, 2vw + 20px, 46px);
	letter-spacing: -.025em;
}
.section-desc { font-size: 16.5px; color: var(--text-2); }
/* left-aligned variant for sections that put art beside the copy instead of under it */
.section-head-start { align-items: flex-start; text-align: left; max-width: 540px; margin-inline: 0; }

/* ------------------------------------------------------------
   11. Steps (How it works)
   ------------------------------------------------------------ */
.steps-section { position: relative; }

.steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.steps-path {
	position: absolute;
	top: -34px;
	left: 4%;
	width: 92%;
	height: 60px;
	overflow: visible;
}
.steps-path path {
	stroke: rgba(124, 92, 255, .5);
	stroke: url(#preG) rgba(124, 92, 255, .5);
	stroke-width: 2;
	stroke-dasharray: 7 9;
	stroke-linecap: round;
	animation: pathFlow 1.4s linear infinite;
}
@keyframes pathFlow { to { stroke-dashoffset: -16; } }

.step-card {
	position: relative;
	padding: 40px 30px 34px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 55%);
	overflow: hidden;
	transition: transform .45s var(--ease-out), border-color .4s ease, box-shadow .45s ease;
}
.step-card:hover {
	transform: translateY(-8px);
	border-color: rgba(124, 92, 255, .45);
	box-shadow: 0 26px 60px -20px rgba(124, 92, 255, .35);
}

.step-num {
	position: absolute;
	top: 20px;
	right: 24px;
	font-family: var(--font-display);
	font-size: 54px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .14);
	transition: -webkit-text-stroke-color .4s ease;
}
.step-card:hover .step-num { -webkit-text-stroke-color: rgba(255, 78, 205, .5); }

.step-icon {
	width: 96px;
	height: 96px;
	margin-bottom: 22px;
}
.step-card h3 { font-size: 21px; margin-bottom: 10px; }
.step-card p { font-size: 15px; line-height: 1.65; }

/* Step icon 1 — prompt window */
.si-window { stroke: var(--violet); stroke-width: 2.4; fill: rgba(124, 92, 255, .07); }
.si-line { stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 52; animation: lineType 3.4s ease-in-out infinite; }
.si-line-2 { stroke: var(--magenta); stroke-dasharray: 36; animation-delay: .5s; }
@keyframes lineType {
	0% { stroke-dashoffset: 52; }
	45%, 80% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}
.si-cursor { fill: var(--amber); animation: caretBlink .9s steps(2) infinite; }

/* Step icon 2 — neural core */
.si-edge { stroke: rgba(124, 92, 255, .55); stroke-width: 1.8; stroke-dasharray: 4 6; animation: pathFlow 1.2s linear infinite; }
.si-node { fill: var(--bg-2); stroke: var(--cyan); stroke-width: 2.2; animation: nodePulse 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.si-node:nth-of-type(2) { animation-delay: .3s; }
.si-node:nth-of-type(3) { animation-delay: .6s; }
.si-node:nth-of-type(4) { animation-delay: .9s; }
.si-node-c { stroke: var(--magenta); fill: rgba(255, 78, 205, .2); animation: corePulse 2.6s ease-in-out infinite; }
@keyframes nodePulse { 50% { transform: scale(1.25); } }
@keyframes corePulse {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 78, 205, .6)); }
	50% { transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(255, 78, 205, .9)); }
}

/* Step icon 3 — result frame */
.si-frame { stroke: var(--violet); stroke-width: 2.4; fill: rgba(124, 92, 255, .07); }
.si-sun { fill: var(--amber); animation: sunFloat 3.6s ease-in-out infinite; }
@keyframes sunFloat { 50% { transform: translateY(-5px); } }
.si-mountain { stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.si-tw { fill: var(--magenta); animation: eyebrowSpark 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.si-tw-2 { fill: var(--amber); animation-delay: .8s; }

/* ------------------------------------------------------------
   12. Features bento
   ------------------------------------------------------------ */
.bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.bento-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 30px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 60%);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: border-color .4s ease, box-shadow .45s ease;
}
.bento-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, .16), transparent 65%);
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}
.bento-card:hover { border-color: rgba(124, 92, 255, .4); box-shadow: 0 30px 70px -24px rgba(124, 92, 255, .35); }
.bento-card:hover::before { opacity: 1; }

.bento-card h3 { font-size: 20px; }
.bento-card p { font-size: 14.5px; line-height: 1.65; }
.bento-card p b { font-weight: 700; }

.bento-photo {
	grid-column: span 2;
	grid-row: span 2;
	padding: 0;
	justify-content: flex-end;
}
.bento-media {
	position: absolute;
	inset: 0;
}
.bento-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.2s var(--ease-out);
}
.bento-photo:hover .bento-media img { transform: scale(1.09); }
.bento-body {
	position: relative;
	z-index: 2;
	padding: 90px 34px 30px;
	background: linear-gradient(180deg, transparent, rgba(5, 6, 14, .88) 55%);
}
.bento-body h3 { font-size: 24px; margin-bottom: 8px; }
.bento-body p { max-width: 480px; color: #c9cde4; }

.bento-icon {
	width: 58px;
	height: 58px;
	margin-bottom: 6px;
}

/* Feature icons */
.fi-bolt {
	fill: rgba(255, 182, 72, .12);
	stroke: var(--amber);
	stroke-width: 2.4;
	stroke-linejoin: round;
	animation: boltFlash 2.8s ease-in-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}
@keyframes boltFlash {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 182, 72, 0)); }
	50% { filter: drop-shadow(0 0 12px rgba(255, 182, 72, .8)); transform: scale(1.06); }
}

.fi-layer { stroke-width: 2.2; fill: rgba(255, 255, 255, .02); transform-box: fill-box; transform-origin: center; }
.fi-layer-1 { stroke: var(--magenta); animation: layerShift1 4s ease-in-out infinite; }
.fi-layer-2 { stroke: var(--violet); animation: layerShift2 4s ease-in-out infinite; }
.fi-layer-3 { stroke: var(--cyan); fill: rgba(34, 211, 238, .08); }
@keyframes layerShift1 { 50% { transform: translate(4px, 3px) rotate(-3deg); } }
@keyframes layerShift2 { 50% { transform: translate(-3px, -2px) rotate(2deg); } }

.fi-globe { stroke: var(--cyan); stroke-width: 2; fill: none; }
.bento-icon svg:has(.fi-globe) { animation: none; }

.lang-orbit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
.lang-orbit span {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-2);
	border: 1px solid var(--border);
	border-radius: 100px;
	padding: 4px 11px;
	animation: chipFloat 3.4s ease-in-out infinite;
}
.lang-orbit span:nth-child(2n) { animation-delay: .7s; }
.lang-orbit span:nth-child(3n) { animation-delay: 1.3s; }
@keyframes chipFloat { 50% { transform: translateY(-4px); } }

.fi-shield { stroke: var(--violet); stroke-width: 2.4; fill: rgba(124, 92, 255, .08); stroke-linejoin: round; }
.fi-check {
	stroke: #34d399;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
}
.is-in .fi-check, .bento-card:hover .fi-check { animation: drawCheck 1s var(--ease-out) .3s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.fi-frame-sm { stroke: var(--cyan); stroke-width: 2.2; fill: rgba(34, 211, 238, .06); }
.fi-arrow { stroke: var(--magenta); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.fi-arrow-tl { animation: arrowTL 2.6s ease-in-out infinite; }
.fi-arrow-br { animation: arrowBR 2.6s ease-in-out infinite; }
@keyframes arrowTL { 50% { transform: translate(-6px, -6px); } }
@keyframes arrowBR { 50% { transform: translate(6px, 6px); } }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-1);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 100px;
	padding: 5px 12px;
	transition: transform .3s var(--ease-spring), background-color .3s ease, border-color .3s ease;
}
.chip:hover {
	transform: translateY(-3px) scale(1.06);
	background: rgba(124, 92, 255, .22);
	border-color: rgba(124, 92, 255, .55);
}

/* ------------------------------------------------------------
   12b. Styles showcase
   ------------------------------------------------------------ */
/* tightened to the section above — the styles grid reads as part of the same beat */
.styles-section { position: relative; padding-top: clamp(34px, 4vw, 58px); }
.styles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.style-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 30px 22px 26px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 60%);
	/* explicit zero shadow at rest so the featured shadow grows in smoothly (no pop) */
	box-shadow: 0 0 0 0 rgba(124, 92, 255, 0);
	transition: transform 1.05s var(--ease-out), border-color .7s ease, box-shadow 1.05s var(--ease-out);
}
/* The reveal system's `transition` (html.js [data-reveal], spec. 0,2,1) is a shorthand
   that drops box-shadow/border-color from the transition list, so the featured shadow
   used to pop in. Re-declare with higher specificity, box-shadow included, while keeping
   the reveal fade (opacity) and per-card stagger (--reveal-delay) intact. */
html.js .styles-grid .style-card {
	transition: opacity .8s var(--ease-out), transform 1.05s var(--ease-out), border-color .7s ease, box-shadow 1.05s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}
.style-card:hover {
	transform: translateY(-8px);
	border-color: rgba(124, 92, 255, .45);
	box-shadow: 0 26px 60px -22px rgba(124, 92, 255, .38);
}
/* Auto-highlight: JS features ~2 random cards at a time, at random intervals */
.style-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(120deg, #22d3ee, #7c5cff 45%, #ff4ecd 75%, #22d3ee);
	background-size: 220% 220%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}
.style-card.is-featured {
	/* !important beats the reveal system's `transform: none` on .is-in */
	transform: translateY(-4px) scale(1.05) !important;
	border-color: transparent;
	box-shadow: 0 32px 74px -18px rgba(124, 92, 255, .6);
	z-index: 2;
}
.style-card.is-featured::before { opacity: 1; transition: opacity .7s ease; animation: gradShift 4.5s ease-in-out infinite; }
.style-card.is-featured .style-glyph {
	background: radial-gradient(120% 120% at 30% 20%, rgba(124, 92, 255, .36), rgba(255, 78, 205, .15));
	transform: scale(1.08) rotate(-2deg);
}
.style-glyph {
	width: 66px;
	height: 66px;
	display: grid;
	place-items: center;
	margin-bottom: 12px;
	border-radius: 18px;
	background: radial-gradient(120% 120% at 30% 20%, rgba(124, 92, 255, .18), rgba(255, 78, 205, .06));
	border: 1px solid var(--border);
	transition: transform 1.05s var(--ease-out), background .9s ease;
}
.style-glyph svg { width: 40px; height: 40px; }
.style-card h3 { font-size: 16px; }
.style-card p { font-size: 12.5px; color: var(--text-3); }

/* Glyph parts pull from a tri-colour brand palette set per glyph */
.style-glyph svg { --gc1: #22d3ee; --gc2: #7c5cff; --gc3: #ff4ecd; }
.sg-stroke { stroke: var(--gc2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sg-fill { fill: var(--gc2); }

/* 1 Photoreal — aperture rings + pulsing iris */
.sg-lens1 { stroke: var(--gc1); }
.sg-lens2 { stroke: var(--gc3); opacity: .8; }
.sg-iris { fill: var(--gc2); transform-origin: center; transform-box: fill-box; animation: sgPulse 2.4s ease-in-out infinite; }
@keyframes sgPulse { 50% { transform: scale(1.5); opacity: .6; } }
.style-card:hover .sg-lens2 { animation: sgSpin 6s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sgSpin { to { transform: rotate(360deg); } }

/* 2 Anime — blinking eye */
.sg-brow { stroke: var(--gc3); }
.sg-eye { stroke: var(--gc1); }
.sg-pupil { fill: var(--gc2); }
.sg-eye, .sg-pupil { transform-origin: center; transform-box: fill-box; animation: sgBlink 3.4s ease-in-out infinite; }
@keyframes sgBlink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* 3 3D — floating cube */
.sg-cube { transform-origin: center; transform-box: fill-box; animation: sgFloat 3.6s ease-in-out infinite; }
.sg-cube .sg-stroke:first-child { stroke: var(--gc2); }
@keyframes sgFloat { 50% { transform: translateY(-3px) rotate(3deg); } }

/* 4 Cyberpunk — grid + scan line */
.sg-grid { stroke: var(--gc2); opacity: .55; }
.sg-scan { stroke: var(--gc1); animation: sgScan 2s ease-in-out infinite; }
@keyframes sgScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }

/* 5 Watercolor — morphing blob + drop */
.sg-blob { fill: var(--gc2); opacity: .5; transform-origin: center; transform-box: fill-box; animation: sgMorph 5s ease-in-out infinite; }
@keyframes sgMorph { 0%, 100% { transform: scale(1) rotate(0); border-radius: 50%; } 33% { transform: scale(1.08, .92) rotate(8deg); } 66% { transform: scale(.92, 1.08) rotate(-6deg); } }
.sg-drop { fill: var(--gc3); animation: sgPulse 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* 6 Pixel — sequential light-up */
.sg-px { fill: var(--gc2); opacity: .25; animation: sgPixel 2.4s ease-in-out infinite; }
@keyframes sgPixel { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
.sg-px1 { animation-delay: 0s; } .sg-px2 { animation-delay: .1s; } .sg-px3 { animation-delay: .2s; }
.sg-px4 { animation-delay: .35s; } .sg-px5 { animation-delay: .45s; } .sg-px6 { animation-delay: .55s; }
.sg-px7 { animation-delay: .7s; } .sg-px8 { animation-delay: .8s; } .sg-px9 { animation-delay: .9s; }
.sg-px5 { fill: var(--gc3); }

/* 7 Line art — drawing stroke */
.sg-line { stroke: var(--gc1); stroke-dasharray: 70; stroke-dashoffset: 70; animation: sgDraw 3.4s ease-in-out infinite; }
@keyframes sgDraw { 0% { stroke-dashoffset: 70; } 45%, 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -70; } }

/* 8 Fantasy — wand with orbiting sparkles */
.sg-wand { stroke: var(--gc2); }
.sg-wtip { fill: var(--gc3); transform-origin: center; transform-box: fill-box; animation: sgPulse 2.6s ease-in-out infinite; }
.sg-wspark { fill: var(--gc1); animation: sgTwinkle 2.2s ease-in-out infinite; }
.sg-ws2 { fill: var(--gc3); animation-delay: .9s; }
@keyframes sgTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.5); } }

.styles-note { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }

@media (max-width: 900px) { .styles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .styles-note { flex-direction: column; gap: 12px; } }

/* Cursor-follow glow on interactive cards */
.style-card, .plan, .blog-card, .contact-card { position: relative; }
.style-card::after, .plan::after, .blog-card::after, .contact-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, .13), transparent 60%);
	opacity: 0;
	transition: opacity .45s ease;
}
.style-card:hover::after, .plan:hover::after, .blog-card:hover::after, .contact-card:hover::after { opacity: 1; }

/* ------------------------------------------------------------
   13. Gallery
   ------------------------------------------------------------ */
.gallery-section { position: relative; }

.gallery {
	columns: 3;
	column-gap: 22px;
}

.shot {
	position: relative;
	margin-bottom: 22px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--border);
	break-inside: avoid;
	cursor: zoom-in;
	transition: border-color .4s ease, box-shadow .45s ease;
}
.shot img {
	width: 100%;
	transition: transform .9s var(--ease-out);
}
.shot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(5, 6, 14, .9));
	opacity: 0;
	transition: opacity .45s ease;
	z-index: 1;
}
.shot::after {
	content: "\201C" attr(data-prompt) "\201D";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	z-index: 2;
	font-size: 13px;
	line-height: 1.45;
	color: #fff;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s ease, transform .45s var(--ease-out);
}
.shot:hover { border-color: rgba(255, 78, 205, .45); box-shadow: 0 26px 60px -18px rgba(255, 78, 205, .3); }
.shot:hover img { transform: scale(1.06); }
/* Crop images that carry a baked-in frame */
.shot-crop img { transform: scale(1.1); }
.shot-crop:hover img { transform: scale(1.16); }
.shot:hover::before, .shot:hover::after { opacity: 1; }
.shot:hover::after { transform: none; }

.gallery-cta { text-align: center; margin-top: 44px; }

/* ------------------------------------------------------------
   14. Pricing
   ------------------------------------------------------------ */
.plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* The FAQ's drift tiles rise into this section and slip behind the cards, so the
   glass needs an opaque base (the page colour — a no-op on a bare background)
   or the artwork would read straight through the panels. */
.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 38px 32px 32px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 55%), rgb(5, 6, 14);
	transition: transform .45s var(--ease-out), border-color .4s ease, box-shadow .45s ease;
}
.plan:hover {
	transform: translateY(-8px);
	border-color: rgba(124, 92, 255, .4);
	box-shadow: 0 30px 70px -22px rgba(124, 92, 255, .35);
}

.plan.is-popular {
	background: linear-gradient(170deg, rgba(124, 92, 255, .14), rgba(255, 78, 205, .06) 60%, rgba(255, 255, 255, .02)), rgb(5, 6, 14);
	box-shadow: 0 34px 80px -26px rgba(124, 92, 255, .5);
	border-color: transparent;
}
.plan.is-popular::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(120deg, #22d3ee, #7c5cff 35%, #ff4ecd 65%, #22d3ee);
	background-size: 220% 220%;
	animation: gradShift 5s ease-in-out infinite;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (min-width: 981px) {
	.plan.is-popular { transform: translateY(-14px) scale(1.02); }
	.plan.is-popular:hover { transform: translateY(-20px) scale(1.02); }
}

/* pager dots — only ever visible once the grid turns into a swipeable track */
.plans-dots { display: none; }

/* ---- phones: the column of stacked cards becomes a snapping swipe track ----
   Full-width cards read as a list you have to scroll past; a track lets the
   plans sit side by side again and keeps the section short. */
@media (max-width: 620px) {
	.plans {
		display: flex;
		max-width: none;
		gap: 14px;
		/* bleed out to the screen edges so cards arrive from off-screen, with the
		   container's gutter handed back as the track's own padding */
		margin-inline: -20px;
		padding: 24px 20px 30px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.plans::-webkit-scrollbar { display: none; }
	/* snap-stop keeps a hard flick to a single card instead of letting it coast
	   across the whole track */
	.plan { flex: 0 0 min(86%, 330px); scroll-snap-align: center; scroll-snap-stop: always; }

	.plans-dots { display: flex; justify-content: center; align-items: center; gap: 9px; }
	.plans-dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .2);
		cursor: pointer;
		transition: width .35s var(--ease-out), background .35s ease;
	}
	.plans-dot.is-on { width: 26px; border-radius: 100px; background: var(--grad); }
	.pricing-more { margin-top: 26px; }
}
@media (max-width: 400px) {
	/* keep the bleed in step with the narrower container gutter */
	.plans { margin-inline: -16px; padding-inline: 16px; }
	.plan { flex-basis: 90%; }
}

.plan-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--grad);
	background-size: 200% 100%;
	padding: 7px 18px;
	border-radius: 100px;
	box-shadow: 0 10px 26px -8px rgba(255, 78, 205, .6);
	animation: gradFlow 4s ease-in-out infinite alternate;
	white-space: nowrap;
}

.plan-head { text-align: center; }
.plan-name { font-size: 19px; margin-bottom: 14px; color: var(--text-2); font-weight: 600; }

.plan-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	color: var(--text-1);
}
.plan-currency { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text-2); }
.plan-amount {
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}
.plan-period { font-size: 15px; color: var(--text-3); }
/* plain 'per month' next to the (gradient) credits count — must override the highlight's clipped fill */
.plan-permonth {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-3);
	background: none;
	-webkit-text-fill-color: var(--text-3);
}
.plan-note { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }

.plan-divider {
	height: 1px;
	margin: 26px 0 18px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
	position: relative;
	overflow: visible;
}
/* A beam that opens from the centre outward to both edges, then closes back */
.plan-divider::after {
	content: "";
	position: absolute;
	inset: -2px 0 auto 0;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, transparent, #22d3ee, #7c5cff 50%, #ff4ecd, transparent);
	filter: blur(.5px);
	transform: scaleX(0);
	transform-origin: center;
	animation: dividerSplit 3.8s ease-in-out infinite;
}
@keyframes dividerSplit {
	0% { transform: scaleX(0); opacity: 0; }
	18% { opacity: 1; }
	50% { transform: scaleX(1); opacity: 1; }
	82% { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(0); opacity: 0; }
}

.plan-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-bottom: 26px;
}
.plan-feature {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9.5px 2px;
	font-size: 14.5px;
	color: var(--text-2);
	border-bottom: 1px dashed rgba(255, 255, 255, .06);
}
.plan-feature:last-child { border-bottom: 0; }
.plan-feature b { color: var(--text-1); font-weight: 600; }
.plan-feature.is-highlight span {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.plan-feature.is-highlight svg { width: 16px; height: 16px; fill: var(--amber); animation: eyebrowSpark 2.6s ease-in-out infinite; }
.plan-feature.is-off { opacity: .38; }
.plan-check { width: 17px; height: 17px; stroke: #34d399; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Legacy markup that may arrive inside tariff advantage values from the DB */
.plan-feature .rbt-new-model { display: inline-flex; align-items: center; gap: 7px; color: var(--text-1); font-weight: 600; }
.plan-feature .rbt-new-model__badge {
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	color: #17092e;
	background: linear-gradient(100deg, #ffd28f, #ffb648);
	border-radius: 100px;
	padding: 4px 8px;
}
.plan-minus { width: 17px; height: 17px; stroke: var(--text-3); stroke-width: 2.4; stroke-linecap: round; flex-shrink: 0; }

.plan-btn { width: 100%; }

.pricing-more { text-align: center; margin-top: 40px; }

/* ---- Compare table ---- */
.compare-section { padding-top: 8px; }
.compare-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	backdrop-filter: blur(6px);
}
.compare-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 14px;
}
.compare-table th,
.compare-table td {
	padding: 15px 18px;
	text-align: center;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
/* first (feature) column */
.compare-table th[scope="row"],
.compare-feat {
	text-align: left;
	font-weight: 500;
	color: var(--text-2);
	position: sticky;
	left: 0;
	background: var(--bg-1);
	z-index: 2;
}
.compare-table thead th {
	position: sticky;
	top: 0;
	background: var(--bg-1);
	z-index: 3;
}
.compare-table thead th.compare-feat { z-index: 4; }
/* plan header cells */
.compare-col { min-width: 140px; }
.compare-plan { display: block; font-family: var(--font-display); font-weight: 600; color: var(--text-1); font-size: 15px; }
.compare-price { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-1); }
.compare-cur { font-size: 14px; color: var(--text-3); font-weight: 600; }
.compare-tag {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--grad);
}
/* value cells */
.compare-val { font-family: var(--font-display); font-weight: 600; color: var(--text-1); }
.compare-val--credits { color: var(--amber); }
/* glyphs are display:block (global svg reset) — center them in the cell like the text values */
.compare-yes, .compare-no { display: block; margin-inline: auto; transform-box: fill-box; transform-origin: center; }
.compare-yes { width: 21px; height: 21px; stroke: #34d399; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.compare-no  { width: 20px; height: 20px; stroke: var(--text-3); stroke-width: 2.4; stroke-linecap: round; fill: none; opacity: .5; }
/* always-on "living" shimmer — a soft glow breathes and the stroke brightens; the per-cell --d
   phase-offset makes it ripple across the table instead of pulsing all at once */
.compare-yes {
	animation: cmpLive 2.6s ease-in-out infinite;
	animation-delay: calc(var(--d, 0) * -0.18s);
}
@keyframes cmpLive {
	0%, 100% { transform: scale(1);    stroke: #2fbe8a; filter: drop-shadow(0 0 2px rgba(52, 211, 153, .22)); }
	50%      { transform: scale(1.1);  stroke: #57f2b3; filter: drop-shadow(0 0 8px rgba(52, 211, 153, .7)); }
}
@media (prefers-reduced-motion: reduce) {
	.compare-yes { animation: none; }
}
/* highlighted (most popular) column */
.compare-col.is-popular {
	background: linear-gradient(180deg, rgba(124, 92, 255, .16), rgba(255, 78, 205, .06));
	box-shadow: inset 0 2px 0 0 var(--violet);
	border-radius: 14px 14px 0 0;
}
.compare-table td.is-popular { background: rgba(124, 92, 255, .06); }
.compare-row.is-highlight td .compare-val { font-size: 15px; }
.compare-cta { width: 100%; }
.compare-table tfoot td { border-bottom: 0; padding-top: 20px; padding-bottom: 20px; }

/* ------------------------------------------------------------
   15. FAQ
   ------------------------------------------------------------ */
.faq-intro { text-align: center; margin-bottom: 46px; }
.faq-orb { width: 108px; height: 108px; margin: 0 auto 22px; }
.faq-orb svg { width: 100%; height: 100%; overflow: visible; }
.faq-ring { stroke: rgba(124, 92, 255, .35); stroke-width: 1.4; stroke-dasharray: 5 8; fill: none; transform-origin: 60px 60px; }
.faq-ring-1 { animation: orbitSpin 24s linear infinite; }
.faq-ring-2 { animation: orbitSpin 16s linear infinite reverse; stroke: rgba(34, 211, 238, .3); }
.faq-bubble { transform-origin: 60px 54px; animation: authFloat 5s ease-in-out infinite; }
.faq-dot { animation: sgPixel 1.4s ease-in-out infinite; }
.faq-d2 { animation-delay: .2s; }
.faq-d3 { animation-delay: .4s; }
.faq-intro-title { font-size: clamp(24px, 2vw + 14px, 32px); margin-bottom: 10px; }
.faq-intro-sub { font-size: 15.5px; color: var(--text-2); }

.faq { display: flex; flex-direction: column; gap: 14px; }

/* category heading inside the FAQ list */
.faq-cat {
	margin: 26px 0 2px;
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-3);
	display: flex;
	align-items: center;
	gap: 11px;
}
.faq-cat:first-child { margin-top: 4px; }
.faq-cat::before {
	content: "";
	flex-shrink: 0;
	width: 20px; height: 2px;
	border-radius: 2px;
	background: var(--grad);
}
/* links inside answers */
.faq-body a {
	color: var(--cyan);
	text-decoration: none;
	border-bottom: 1px solid rgba(34, 211, 238, .35);
	transition: color .25s ease, border-color .25s ease;
}
.faq-body a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

.faq-item {
	border: 1px solid var(--border);
	border-radius: 20px;
	/* opaque base (the page colour, so a no-op on a bare background) — the drift
	   tiles pass behind these cards and would otherwise read through the glass */
	background:
		linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
		rgb(5, 6, 14);
	overflow: hidden;
	transition: border-color .4s ease, box-shadow .4s ease;
}
.faq-item[open] {
	border-color: rgba(124, 92, 255, .45);
	box-shadow: 0 18px 44px -18px rgba(124, 92, 255, .3);
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	list-style: none;
	cursor: pointer;
	padding: 22px 26px;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--text-1);
	transition: color .3s ease;
	user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--magenta); }

.faq-toggle {
	position: relative;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	transition: transform .45s var(--ease-spring), background-color .35s ease, border-color .35s ease;
}
.faq-toggle::before, .faq-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--text-1);
	transform: translate(-50%, -50%);
	transition: transform .45s var(--ease-spring);
}
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle {
	transform: rotate(135deg);
	background: var(--grad);
	border-color: transparent;
}

.faq-body { padding: 0 26px; overflow: hidden; }
.faq-body p { padding-bottom: 24px; font-size: 15px; line-height: 1.7; }

/* ------------------------------------------------------------
   16. CTA
   ------------------------------------------------------------ */
.cta-section { position: relative; padding-bottom: 130px; overflow-x: clip; }
.cta-section > .container { position: relative; z-index: 1; }

.cta-panel {
	position: relative;
	text-align: center;
	padding: 90px 40px;
	border-radius: 36px;
	overflow: hidden;
	background:
		radial-gradient(90% 130% at 15% 0%, rgba(34, 211, 238, .25), transparent 55%),
		radial-gradient(110% 150% at 85% 10%, rgba(255, 78, 205, .3), transparent 55%),
		linear-gradient(160deg, #1b1440, #35155c 55%, #0f0b2e);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 40px 110px -30px rgba(124, 92, 255, .55);
}

.cta-orb {
	position: absolute;
	right: -60px;
	top: 50%;
	width: 340px;
	height: 340px;
	transform: translateY(-50%);
	opacity: .55;
	pointer-events: none;
}
.cta-ring { stroke: rgba(255, 255, 255, .25); stroke-width: 1; fill: none; stroke-dasharray: 5 9; transform-origin: 100px 100px; }
.cta-ring-1 { animation: orbitSpin 26s linear infinite; }
.cta-ring-2 { animation: orbitSpin 18s linear infinite reverse; }
.cta-ring-3 { animation: orbitSpin 12s linear infinite; }
.cta-spark { fill: rgba(255, 255, 255, .85); animation: eyebrowSpark 3.4s ease-in-out infinite; transform-origin: 100px 98px; }

.cta-stars { position: absolute; inset: 0; pointer-events: none; }
.cta-stars span {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	opacity: .5;
	animation: starTwinkle 3.4s ease-in-out infinite;
}
.cta-stars span:nth-child(1) { top: 22%; left: 12%; }
.cta-stars span:nth-child(2) { top: 66%; left: 7%; animation-delay: .8s; }
.cta-stars span:nth-child(3) { top: 18%; left: 44%; animation-delay: 1.6s; width: 3px; height: 3px; }
.cta-stars span:nth-child(4) { top: 74%; left: 58%; animation-delay: 2.2s; width: 3px; height: 3px; }
.cta-stars span:nth-child(5) { top: 34%; left: 88%; animation-delay: 1.2s; }
@keyframes starTwinkle {
	0%, 100% { opacity: .18; transform: scale(.8); }
	50% { opacity: .9; transform: scale(1.25); }
}

.cta-title {
	position: relative;
	z-index: 2;
	font-size: clamp(30px, 2.4vw + 20px, 50px);
	color: #fff;
	margin-bottom: 18px;
}
.cta-title em {
	font-style: normal;
	background: linear-gradient(100deg, #ffd28f, #ff4ecd 55%, #a78bfa);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cta-sub {
	position: relative;
	z-index: 2;
	max-width: 480px;
	margin: 0 auto 36px;
	color: rgba(255, 255, 255, .78);
	font-size: 16.5px;
}
.cta-actions {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
}
.cta-link { color: rgba(255, 255, 255, .85); }
.cta-link:hover { color: #fff; }

/* ------------------------------------------------------------
   17. Footer
   ------------------------------------------------------------ */
.site-footer {
	position: relative;
	background: linear-gradient(180deg, rgba(10, 12, 26, .4), var(--bg-1));
	overflow: hidden;
}

/* --- animated backdrop: a lit seam, two drifting auras, rising motes --- */
.foot-fx { position: absolute; inset: 0; pointer-events: none; }
.foot-fx i { position: absolute; display: block; }

.foot-seam {
	top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg,
		transparent, rgba(124, 92, 255, .5) 18%, rgba(34, 211, 238, .55) 50%, rgba(255, 78, 205, .5) 82%, transparent);
}
.foot-seam::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 20%;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
	filter: blur(1px);
	animation: footSeam 8s var(--ease-out) infinite;
}
@keyframes footSeam {
	0%        { transform: translateX(-110%); opacity: 0; }
	10%, 86%  { opacity: .95; }
	100%      { transform: translateX(610%); opacity: 0; }
}

.foot-aura { border-radius: 50%; filter: blur(70px); }
.foot-aura-a {
	left: -8vw; top: 10px;
	width: 48vw; height: 380px;
	background: radial-gradient(circle, rgba(124, 92, 255, .42), transparent 68%);
	animation: footAuraA 19s ease-in-out infinite alternate;
}
.foot-aura-b {
	right: -6vw; top: 70px;
	width: 42vw; height: 340px;
	background: radial-gradient(circle, rgba(34, 211, 238, .28), transparent 68%);
	animation: footAuraB 24s ease-in-out infinite alternate;
}
@keyframes footAuraA {
	0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
	100% { transform: translate3d(9vw, 60px, 0) scale(1.16); opacity: 1; }
}
@keyframes footAuraB {
	0%   { transform: translate3d(0, 0, 0) scale(1.1); opacity: .7; }
	100% { transform: translate3d(-7vw, 40px, 0) scale(.92); opacity: 1; }
}

.foot-motes { position: absolute; inset: 0; }
.foot-motes i {
	bottom: -10px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 0 8px rgba(124, 92, 255, .9);
	opacity: 0;
	animation: footMote 14s linear infinite;
}
.foot-motes i:nth-child(1) { left: 6%;  animation-delay: 0s;    animation-duration: 15s; }
.foot-motes i:nth-child(2) { left: 17%; animation-delay: -2.5s; animation-duration: 18s; }
.foot-motes i:nth-child(3) { left: 28%; animation-delay: -6s;   animation-duration: 13s; }
.foot-motes i:nth-child(4) { left: 39%; animation-delay: -9s;   animation-duration: 17s; }
.foot-motes i:nth-child(5) { left: 51%; animation-delay: -1.5s; animation-duration: 16s; }
.foot-motes i:nth-child(6) { left: 63%; animation-delay: -7.5s; animation-duration: 19s; }
.foot-motes i:nth-child(7) { left: 74%; animation-delay: -4s;   animation-duration: 14s; }
.foot-motes i:nth-child(8) { left: 85%; animation-delay: -11s;  animation-duration: 20s; }
.foot-motes i:nth-child(9) { left: 94%; animation-delay: -8s;   animation-duration: 15s; }
@keyframes footMote {
	0%        { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
	14%       { opacity: .85; }
	70%       { opacity: .5; }
	100%      { transform: translate3d(26px, -520px, 0) scale(1); opacity: 0; }
}

.footer-top {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: 60px;
	padding: 86px 0 68px;
}

.footer-brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-tagline { font-size: 14.5px; line-height: 1.65; max-width: 320px; }

/* the footer wears the mark larger than the header does */
.site-footer .logo { gap: 14px; }
.site-footer .logo-mark { width: 52px; height: 52px; }
.site-footer .logo-word { font-size: 29px; }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--surface);
	overflow: hidden;
	transition: transform .35s var(--ease-spring), border-color .3s ease, background-color .3s ease;
}
.footer-social a::before {
	content: "";
	position: absolute;
	inset: -45%;
	background: conic-gradient(from 0deg, transparent 0 60%, rgba(255, 78, 205, .6) 78%, transparent 94%);
	opacity: 0;
	transition: opacity .35s ease;
	animation: orbitSpin 3.6s linear infinite;
}
.footer-social a:hover::before { opacity: 1; }
.footer-social svg { position: relative; width: 17px; height: 17px; fill: var(--text-2); transition: fill .3s ease; }
.footer-social a:hover { transform: translateY(-4px); border-color: rgba(255, 78, 205, .5); background: rgba(255, 78, 205, .12); }
.footer-social a:hover svg { fill: #fff; }

.footer-cols {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
/* The columns are <details>; on the desktop grid the heading is just a heading —
   no marker, no pointer, and clicks can't fold it away. */
.footer-col > summary { display: block; list-style: none; cursor: default; pointer-events: none; }
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col-caret { display: none; }

.footer-col h4 {
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-1);
	margin-bottom: 18px;
	padding-bottom: 9px;
}
.footer-col h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .7s var(--ease-out) var(--reveal-delay, 0ms);
}
.footer-col.is-in h4::after { transform: scaleX(1); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
	position: relative;
	font-size: 14.5px;
	color: var(--text-2);
	transition: color .3s ease, padding-left .3s var(--ease-out);
}
.footer-col a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transform: translateY(-50%);
	transition: width .3s var(--ease-out);
}
.footer-col a:hover { color: var(--text-1); padding-left: 14px; }
.footer-col a:hover::before { width: 9px; }

/* --- the logotype as wallpaper behind the columns, lit by a pointer spotlight.
       Only as tall as the glyphs and parked on the footer's dividing line, so it
       reads as a plinth the columns stand on. --- */
.foot-mark {
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	justify-items: center;
	overflow: hidden;
	line-height: .78;
	user-select: none;
	pointer-events: none;
}
.foot-mark span {
	grid-area: 1 / 1;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(66px, 17vw, 252px);
	letter-spacing: -.05em;
	white-space: nowrap;
	background: var(--grad);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradFlow 9s ease-in-out infinite alternate;
}
.foot-mark-base { opacity: .11; }
.foot-mark-lit {
	opacity: .42;
	-webkit-mask-image: radial-gradient(340px 300px at var(--fx, 50%) var(--fy, 50%), #000 0%, rgba(0, 0, 0, .4) 44%, transparent 70%);
	mask-image: radial-gradient(340px 300px at var(--fx, 50%) var(--fy, 50%), #000 0%, rgba(0, 0, 0, .4) 44%, transparent 70%);
}

.footer-bottom {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 0 30px;
	text-align: center;
}
.foot-hair {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border) 12%, rgba(124, 92, 255, .45) 50%, var(--border) 88%, transparent);
	background-size: 200% 100%;
	animation: gradFlow 12s ease-in-out infinite alternate;
}
.footer-company { font-size: 12.5px; color: var(--text-3); }
.footer-company a { color: var(--text-2); }
.footer-company a:hover { color: var(--text-1); }
.footer-copy { font-size: 13px; color: var(--text-3); }
.footer-copy a {
	font-weight: 600;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------
   18. Back-to-top, cookie, lightbox
   ------------------------------------------------------------ */
.to-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 70;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(10, 12, 26, .8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .4s ease, visibility .4s ease, transform .4s var(--ease-out);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: rgba(124, 92, 255, .5); }
.to-top svg { position: absolute; inset: 4px; width: auto; height: auto; transform: rotate(-90deg); }
.to-top-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3; }
.to-top-ring {
	fill: none;
	stroke: var(--violet);
	stroke: url(#toTopGrad) var(--violet);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 132;
	stroke-dashoffset: 132;
}
.to-top-arrow {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: var(--text-1);
	transition: transform .3s var(--ease-spring);
}
.to-top:hover .to-top-arrow { transform: translateY(-3px); }

.cookie-bar {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 460px;
	padding: 16px 16px 16px 14px;
	border-radius: 20px;
	border: 1px solid rgba(124, 92, 255, .28);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 238, .12), transparent 48%),
		radial-gradient(100% 120% at 100% 100%, rgba(255, 78, 205, .1), transparent 50%),
		rgba(8, 10, 22, .92);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow:
		0 24px 60px -20px rgba(0, 0, 0, .72),
		0 0 0 1px rgba(255, 255, 255, .04) inset,
		0 0 40px -18px rgba(124, 92, 255, .45);
	animation: cookieIn .65s var(--ease-spring);
}
.cookie-bar[hidden] { display: none !important; }
@keyframes cookieIn {
	from { opacity: 0; transform: translateY(28px) scale(.96); }
	to { opacity: 1; transform: none; }
}
.cookie-bar-ico {
	flex: 0 0 42px;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 14px;
	background: rgba(124, 92, 255, .12);
	border: 1px solid rgba(124, 92, 255, .28);
}
.cookie-bar-ico svg { width: 28px; height: 28px; }
.cookie-bar-copy { flex: 1 1 auto; min-width: 0; }
.cookie-bar-copy strong {
	display: block;
	font-family: var(--font-display);
	font-size: 14.5px;
	letter-spacing: -.01em;
	margin-bottom: 4px;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cookie-bar-copy p {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-2);
	margin: 0;
}
.cookie-bar a { color: var(--cyan); }
.cookie-bar a:hover { text-decoration: underline; }
.cookie-bar-actions { flex: 0 0 auto; }
.cookie-bar-actions .btn { white-space: nowrap; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(4, 5, 12, .9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-body {
	max-width: min(1000px, 92vw);
	transform: scale(.92);
	transition: transform .45s var(--ease-spring);
}
.lightbox.is-open .lightbox-body { transform: none; }
.lightbox-body img {
	max-height: 78vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9);
}
.lightbox-body figcaption {
	margin-top: 16px;
	text-align: center;
	font-size: 14px;
	color: var(--text-2);
}
.lightbox-close {
	position: absolute;
	top: 22px;
	right: 28px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	transition: transform .35s var(--ease-spring), background-color .3s ease;
}
.lightbox-close:hover { transform: rotate(90deg) scale(1.08); background: rgba(255, 78, 205, .25); }

/* ------------------------------------------------------------
   19. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
	.hero-visual { height: 500px; }
	.hero-card-main { width: 260px; height: 325px; margin: -180px 0 0 -130px; }
	.hero-card-left { width: 180px; height: 250px; }
	.hero-card-right { width: 195px; height: 250px; }
	.hero-orbits span:nth-child(3) { display: none; }
}

@media (max-width: 980px) {
	.nav { display: none; }
	.header-signin { display: none; }
	.burger { display: flex; }

	.hero { min-height: 0; padding-bottom: 40px; }
	.hero-inner { grid-template-columns: 1fr; gap: 60px; }
	.hero-copy { align-items: center; text-align: center; }
	.hero-sub { max-width: 560px; }
	.hero-meta { justify-content: center; }
	.hero-visual { height: 480px; max-width: 620px; width: 100%; margin-inline: auto; }
	.scroll-cue { display: none; }

	.steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.steps-path { display: none; }

	.bento { grid-template-columns: 1fr 1fr; }
	.bento-photo { grid-column: span 2; grid-row: span 1; min-height: 360px; }

	.gallery { columns: 2; }

	.plans { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }

	.footer-top { grid-template-columns: 1fr; gap: 44px; }
	.cta-orb { opacity: .3; }
}

@media (max-width: 620px) {
	.container { padding-inline: 20px; }
	.section { padding: 80px 0; }

	.hero-title { font-size: clamp(36px, 11vw, 46px); }
	.hero-sub { font-size: 15.5px; }

	.prompt-box { max-width: 100%; padding-left: 16px; }
	.prompt-btn { padding: 13px 18px; font-size: 14px; }

	.hero-meta { gap: 24px; }
	.hero-stat b { font-size: 21px; }

	.hero-visual { height: 420px; }
	.hero-card-main { width: 210px; height: 265px; margin: -150px 0 0 -105px; }
	.hero-card-left { width: 140px; height: 195px; left: 0; }
	.hero-card-right { width: 150px; height: 195px; right: 0; }
	.hero-sticker { width: 88px; right: 6%; }
	.hero-chip-1 { left: 0; bottom: 10%; }
	.hero-orbits span:nth-child(2) { display: none; }

	.marquee-item { width: 150px; height: 186px; }

	.bento { grid-template-columns: 1fr; }
	.bento-photo { grid-column: span 1; }

	.gallery { columns: 1; }

	.cta-panel { padding: 70px 24px; }
	.cta-orb { display: none; }

	/* --- stacked footer nav folds into an accordion (see footerCollapse in main.js) --- */
	.footer-cols { grid-template-columns: 1fr; gap: 0; }
	.footer-col { border-top: 1px solid var(--border); }
	.footer-col:last-child { border-bottom: 1px solid var(--border); }
	.footer-col > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 15px 2px;
		cursor: pointer;
		pointer-events: auto;
		-webkit-tap-highlight-color: transparent;
	}
	/* the row border is the divider now, so the heading drops its own underline */
	.footer-col > summary h4 { margin: 0; padding: 0; }
	.footer-col > summary h4::after { display: none; }
	.footer-col-caret {
		display: block;
		flex: 0 0 auto;
		width: 17px;
		height: 17px;
		color: var(--text-3);
		transition: transform .35s var(--ease-out), color .3s ease;
	}
	.footer-col[open] > summary .footer-col-caret { transform: rotate(180deg); color: var(--violet); }
	.footer-col > ul { overflow: hidden; padding-bottom: 16px; }

	.cookie-bar {
		left: 14px; right: 14px; bottom: 14px;
		max-width: none;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px;
	}
	.cookie-bar-actions { width: 100%; }
	.cookie-bar-actions .btn { width: 100%; }
	.to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
	.lightbox { padding: 18px; }
	.lightbox-close { top: 14px; right: 14px; }
}

/* Narrow phones (down to 320px) */
@media (max-width: 400px) {
	.container { padding-inline: 16px; }

	/* The header CTA no longer fits beside logo + burger; the burger menu
	   and the hero prompt both carry the same call to action. */
	.header-actions .btn-primary { display: none; }
	.header-actions { gap: 8px; }

	.eyebrow { font-size: 11.5px; padding: 8px 14px; letter-spacing: .1em; }
	.hero-title { font-size: clamp(32px, 10vw, 40px); }

	.prompt-box { gap: 10px; padding: 8px 8px 8px 14px; }
	.prompt-btn { padding: 12px 15px; }

	.hero-meta { gap: 16px; flex-wrap: wrap; }
	.hero-stat b { font-size: 19px; }
	.hero-stat-label { font-size: 12px; }

	.hero-visual { height: 380px; }
	.hero-card-main { width: 180px; height: 226px; margin: -130px 0 0 -90px; }
	.hero-card-left { width: 120px; height: 168px; }
	.hero-card-right { width: 128px; height: 168px; }
	.hero-sticker { width: 74px; }
	.hero-chip { font-size: 12px; padding: 8px 12px; }
	.hero-chip-2 { right: 0; top: 16%; }

	.marquee-item { width: 132px; height: 164px; }

	.step-card { padding: 34px 22px 28px; }
	.step-num { font-size: 44px; top: 16px; right: 18px; }

	.bento-card { padding: 26px 22px; }
	.bento-body { padding: 80px 22px 26px; }

	.plan { padding: 32px 22px 28px; }
	.plan-amount { font-size: 48px; }

	.faq-item summary { padding: 18px 18px; font-size: 15.5px; gap: 14px; }
	.faq-body { padding: 0 18px; }

	.cta-panel { padding: 60px 20px; }
	.cta-actions { flex-direction: column; gap: 18px; }
	.cta-actions .btn { width: 100%; }
}

/* Dev: frozen-animation mode for visual testing (?noanim=1) */
html.no-anim { scroll-behavior: auto; }
html.no-anim .preloader { display: none; }
html.no-anim .hero { min-height: 0; }
html.no-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------
   20. Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	html.js [data-reveal] { opacity: 1; transform: none; }
	.marquee-track { animation: none; }
	.foot-motes, .foot-seam::after { display: none; }
	.foot-aura, .foot-mark span, .foot-hair { animation: none; }
	/* Keep stroke-drawn art fully visible (not stuck at an erased frame) */
	.logo-orbit ellipse, .preloader-orbit, .sg-line { stroke-dashoffset: 0 !important; animation: none !important; }
}
html.no-anim .sg-line { stroke-dashoffset: 0 !important; }

/* ============================================================
   21. INNER PAGES (auth, contact, pricing, blog, solutions, legal)
   ============================================================ */

/* Inner shell: header always solid, main padded below fixed header */
body.is-inner .site-header {
	background: rgba(5, 6, 14, .72);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom-color: var(--border);
}
.inner-main { padding-top: var(--header-h); }

/* Page hero band */
.page-hero {
	position: relative;
	padding: 66px 0 50px;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	background: radial-gradient(70% 120% at 50% -10%, rgba(124, 92, 255, .14), transparent 70%);
}
/* Decorative rotating orbit rings — subtle life on every inner hero */
.page-hero::before, .page-hero::after {
	content: "";
	position: absolute;
	border: 1px dashed rgba(255, 255, 255, .1);
	border-radius: 50%;
	pointer-events: none;
}
.page-hero::after {
	width: 300px; height: 300px;
	top: -140px; right: 5%;
	animation: orbitSpin 70s linear infinite;
}
.page-hero::before {
	width: 170px; height: 170px;
	top: -30px; right: 11%;
	border-color: rgba(124, 92, 255, .16);
	animation: orbitSpin 45s linear infinite reverse;
}
.page-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .8; }
.page-hero .aurora-1 { width: 480px; height: 480px; top: -220px; left: 4%; }
.page-hero .aurora-2 { width: 440px; height: 440px; top: -200px; right: 2%; }
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text-3);
	margin-bottom: 16px;
}
.crumbs a { color: var(--text-2); transition: color .3s ease; }
.crumbs a:hover { color: var(--magenta); }
.crumbs-sep { color: var(--text-3); opacity: .6; }
.crumbs-current { color: var(--text-1); }
.page-hero-title {
	font-size: clamp(30px, 3vw + 18px, 50px);
	letter-spacing: -.025em;
	background: linear-gradient(100deg, #fff 30%, #b9a9ff 70%, #ff9ee6);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Generic inner section + prose */
.inner-section { padding: 74px 0; position: relative; }
.inner-narrow { max-width: 900px; margin-inline: auto; }
.prose { color: var(--text-2); font-size: 16px; line-height: 1.75; }
.prose p { margin-bottom: 18px; }
.prose h2 { font-size: 26px; margin: 34px 0 14px; color: var(--text-1); }
.prose h3 { font-size: 20px; margin: 26px 0 12px; color: var(--text-1); }
.prose a { color: var(--cyan); }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 18px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text-1); font-weight: 600; }

/* Legacy spacing utilities used by the legal views */
.mb--0 { margin-bottom: 0 !important; }
.mb--10 { margin-bottom: 10px !important; }
.mb--20 { margin-bottom: 20px !important; }
.mb--30 { margin-bottom: 30px !important; }
.mt--5 { margin-top: 5px !important; }
.mt--10 { margin-top: 10px !important; }
.mt--20 { margin-top: 20px !important; }
.mt--30 { margin-top: 30px !important; }
.pl--0 { padding-left: 0 !important; }
.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }

/* ---- Legal pages (kept markup, restyled) ---- */
.rbt-utilize-area { padding: 60px 0 90px; }
.rbt-utilize-area .row.g-5 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	align-items: start;
}
.rbt-utilize-area .col-lg-4, .rbt-utilize-area .col-lg-8,
.rbt-utilize-area .col-xl-3, .rbt-utilize-area .col-xl-9 { min-width: 0; }
@media (min-width: 992px) {
	.rbt-utilize-area .row.g-5 { grid-template-columns: minmax(0, 1fr) 300px; }
	.rbt-utilize-area .order-lg-1 { order: 1; }
	/* Stretch the nav column to the full row height so its sticky child has room to stick */
	.rbt-utilize-area .order-lg-2 { order: 2; align-self: stretch; }
}

.rbt-shadow-box {
	background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 60%);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 28px;
}
.rbt-legal-nav.sticky-top { position: sticky; top: calc(var(--header-h) + 16px); }
.rbt-legal-nav__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 14px;
}
.rbt-legal-nav__list { list-style: none; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.rbt-legal-nav__list a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 14px;
	color: var(--text-2);
	transition: background-color .3s ease, color .3s ease;
}
.rbt-legal-nav__list a:hover { background: var(--surface-2); color: var(--text-1); }
.rbt-legal-nav__num {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
	border-radius: 7px;
	color: #fff;
	background: linear-gradient(135deg, rgba(124, 92, 255, .5), rgba(255, 78, 205, .4));
}

.rbt-utilize-area .section-title { margin-bottom: 24px; }
.rbt-utilize-area .section-title h3 {
	font-size: clamp(24px, 2vw + 14px, 32px);
	margin-bottom: 10px;
}
.rbt-legal-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.rbt-legal-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--text-2);
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 100px;
	padding: 6px 14px;
}

.rbt-elements-area { margin-bottom: 18px; scroll-margin-top: calc(var(--header-h) + 16px); }
.rbt-elements-area .wrapper { }
.title-sm {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	margin-bottom: 14px;
	color: var(--text-1);
}
.rbt-legal-num {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	font-size: 15px;
	font-weight: 700;
	border-radius: 10px;
	color: #fff;
	background: var(--grad);
}
.rbt-legal-subtitle {
	font-size: 15px;
	font-weight: 600;
	color: var(--cyan);
	margin: 20px 0 10px;
}
.rbt-utilize-area .desc { color: var(--text-2); font-size: 15px; line-height: 1.75; }
.rbt-utilize-area .desc .b1 { margin-bottom: 14px; }
.rbt-utilize-area .desc a { color: var(--cyan); }
.rbt-utilize-area .desc a:hover { text-decoration: underline; }
.rbt-utilize-area .desc strong { color: var(--text-1); font-weight: 600; }
.content-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.content-list li { position: relative; padding-left: 22px; font-size: 15px; }
.content-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--grad);
}
.rbt-legal-list--ordered { counter-reset: li; }
.rbt-legal-list--ordered li { padding-left: 30px; }
.rbt-legal-list--ordered li::before {
	counter-increment: li;
	content: counter(li);
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text-1);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
}
.rbt-legal-contact {
	border-left: 2px solid rgba(124, 92, 255, .5);
	background: var(--surface);
	border-radius: 0 12px 12px 0;
	padding: 16px 20px;
	margin: 14px 0;
}
.rbt-legal-table { overflow-x: auto; margin: 8px 0 16px; border-radius: 12px; border: 1px solid var(--border); }
.rbt-legal-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
.rbt-legal-table th, .rbt-legal-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rbt-legal-table thead th { background: var(--surface-2); color: var(--text-1); font-weight: 600; }
.rbt-legal-table tbody tr:last-child td { border-bottom: 0; }

/* Feather icon tags have no font on the new chrome — hide the empty ones */
body.is-inner i[class^="feather-"], body.is-inner i[class*=" feather-"] { display: none; }
.rbt-legal-badge i[class^="feather-"] { display: inline-block; }
.rbt-legal-badge i[class^="feather-"]::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: var(--grad);
	opacity: .8;
}

/* Legal contents nav — scroll-spy active state (desktop + mobile drawer) */
.rbt-legal-nav__list a.is-active {
	background: rgba(124, 92, 255, .16);
	color: var(--text-1);
}
.rbt-legal-nav__list a.is-active .rbt-legal-nav__num { background: var(--grad); color: #fff; }

/* Mobile floating contents button + left drawer (built by main.js) */
.legal-toc-fab { display: none; }
.legal-toc-panel, .legal-toc-backdrop { display: none; }

@media (max-width: 991px) {
	/* Hide the inline sticky column; access moves to the floating button */
	.rbt-utilize-area .rbt-legal-nav { display: none; }

	.legal-toc-fab {
		position: fixed;
		left: 16px;
		bottom: 16px;
		z-index: 72;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: rgba(10, 12, 26, .85);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid var(--border-strong);
		color: var(--text-1);
		box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
		transition: border-color .3s ease, transform .3s var(--ease-spring);
	}
	.legal-toc-fab:hover { border-color: rgba(124, 92, 255, .5); }
	.legal-toc-fab:active { transform: scale(.94); }
	.legal-toc-fab svg { width: 22px; height: 22px; }

	.legal-toc-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 95;
		background: rgba(4, 5, 12, .6);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility .35s ease;
	}
	.legal-toc-panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 96;
		width: min(330px, 86vw);
		padding: 22px 16px calc(18px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(180deg, #0d1022, #070a16);
		border-right: 1px solid var(--border-strong);
		box-shadow: 30px 0 90px -24px rgba(0, 0, 0, .85);
		transform: translateX(-105%);
		transition: transform .42s var(--ease-out);
		overflow-y: auto;
	}
	body.toc-open .legal-toc-panel { transform: none; }
	body.toc-open .legal-toc-backdrop { opacity: 1; visibility: visible; }

	.legal-toc-panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--border);
	}
	.legal-toc-panel-head h6 {
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--text-3);
	}
	.legal-toc-close {
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		border-radius: 9px;
		border: 1px solid var(--border);
		background: var(--surface);
		color: var(--text-1);
		font-size: 20px;
		line-height: 1;
		display: grid;
		place-items: center;
		transition: transform .3s var(--ease-spring), background-color .3s ease;
	}
	.legal-toc-close:hover { transform: rotate(90deg); background: rgba(255, 78, 205, .2); }
	.legal-toc-panel .rbt-legal-nav__list { max-height: none; gap: 3px; }
}

/* ---- Auth pages (sign-in / up / forgot / recover) ---- */
.auth-section {
	position: relative;
	min-height: calc(100vh - var(--header-h));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0 90px;
	overflow: hidden;
}
.auth-bg { position: absolute; inset: 0; pointer-events: none; }
.auth-bg .aurora-1 { width: 560px; height: 560px; top: -180px; left: -80px; }
.auth-bg .aurora-2 { width: 500px; height: 500px; bottom: -220px; right: -80px; }
.auth-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 460px;
	padding: 40px 38px 34px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-strong);
	background: linear-gradient(170deg, rgba(20, 22, 44, .9), rgba(10, 12, 26, .92));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
}
.auth-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(150deg, rgba(34, 211, 238, .5), rgba(124, 92, 255, .35) 45%, rgba(255, 78, 205, .5));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: .7;
}
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-logo { display: inline-flex; margin-bottom: 18px; }
.auth-logo .logo-mark { width: 52px; height: 52px; overflow: visible; }
.auth-logo:hover .logo-spark { transform: rotate(72deg) scale(1.08); }
.auth-title { font-size: 26px; margin-bottom: 8px; }
.auth-sub { font-size: 14.5px; color: var(--text-2); }
.auth-sub a { color: var(--cyan); }
.auth-sub a:hover { text-decoration: underline; }

.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 8px; }
.field-input, .field-textarea, .field-select {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--text-1);
	background: rgba(5, 6, 14, .6);
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	padding: 13px 16px;
	transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.field-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-3); }
.field-input:focus, .field-textarea:focus, .field-select:focus {
	outline: none;
	border-color: rgba(124, 92, 255, .7);
	box-shadow: 0 0 0 3px rgba(124, 92, 255, .18);
	background: rgba(5, 6, 14, .85);
}
.field-input:disabled { opacity: .55; cursor: not-allowed; }
.field-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a8aec8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.field-check input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--violet); flex-shrink: 0; }
.field-check a { color: var(--cyan); }
.field-check a:hover { text-decoration: underline; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.field-link { font-size: 13.5px; color: var(--text-2); }
.field-link:hover { color: var(--magenta); }

/* Image captcha (contact) — the code image sits to the LEFT of the input at the same height */
.captcha-row { display: flex; align-items: center; gap: 10px; }
.captcha-img {
	flex: 0 0 auto;
	height: 50px;
	line-height: 0;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(5, 6, 14, .6);
	cursor: pointer;
	transition: border-color .3s ease;
}
.captcha-img:hover { border-color: var(--violet); }
.captcha-img img { display: block; height: 100%; width: auto; -webkit-user-select: none; user-select: none; transition: opacity .25s ease; }
.captcha-img.is-loading { cursor: progress; }
.captcha-img.is-loading img { opacity: .4; }
.captcha-row .field-input { height: 50px; flex: 1 1 auto; min-width: 0; letter-spacing: .28em; font-weight: 600; }
.captcha-reload {
	flex: 0 0 auto;
	width: 50px; height: 50px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: rgba(5, 6, 14, .6);
	color: var(--text-2);
	cursor: pointer;
	transition: color .3s ease, border-color .3s ease;
}
.captcha-reload svg { width: 20px; height: 20px; transition: transform .4s var(--ease-spring); }
.captcha-reload:hover { color: var(--text-1); border-color: var(--violet); }
.captcha-reload:hover svg { transform: rotate(-180deg); }
.captcha-reload.is-spinning { color: var(--violet); border-color: var(--violet); cursor: progress; }
.captcha-reload.is-spinning svg { animation: capSpin .55s linear infinite; transition: none; }
@keyframes capSpin { to { transform: rotate(360deg); } }
@media (max-width: 420px) {
	.captcha-row .field-input { letter-spacing: .16em; }
}

.btn-block { width: 100%; margin-top: 6px; }
.auth-foot { text-align: center; margin-top: 22px; font-size: 14px; color: var(--text-2); }
.auth-foot a { color: var(--cyan); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }

/* ---- Auth two-column shell + brand showcase ---- */
.auth-shell {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1040px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}
.auth-shell .auth-card { margin-inline: auto; }
.auth-showcase { display: none; }

@media (min-width: 980px) {
	.auth-shell { grid-template-columns: 1.08fr .92fr; gap: 56px; max-width: 1080px; }
	.auth-shell .auth-card { margin-inline: 0; max-width: 440px; }
	.auth-showcase {
		display: block;
		position: relative;
		min-height: 500px;
	}
}

.auth-showcase-copy { position: relative; z-index: 3; max-width: 330px; }
.auth-showcase-title {
	font-size: clamp(34px, 2.6vw + 18px, 48px);
	line-height: 1.06;
	letter-spacing: -.03em;
	margin: 20px 0 26px;
}
.auth-prompt { max-width: 312px; margin-bottom: 30px; }
/* Auth social proof — overlapping avatars + rating */
.auth-proof { display: flex; align-items: center; gap: 14px; }
.auth-avatars { display: flex; flex-shrink: 0; }
.auth-avatars img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--bg-0);
	margin-left: -12px;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .6);
}
.auth-avatars img:first-child { margin-left: 0; }
.auth-stars { display: flex; gap: 2px; margin-bottom: 5px; }
.auth-stars svg { width: 14px; height: 14px; fill: #ffb648; }
.auth-proof-copy p { font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.auth-proof-copy b { color: var(--text-1); font-weight: 600; }

/* Floating generated-image cards */
.auth-float {
	position: absolute;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: var(--shadow-card);
	z-index: 2;
	will-change: transform;
}
.auth-float img { width: 100%; height: 100%; object-fit: cover; }
.auth-float-1 { width: 148px; height: 188px; right: -3%; top: 0; rotate: 6deg; animation: authFloat 8s ease-in-out infinite; }
.auth-float-2 { width: 116px; height: 148px; right: 24%; top: 42%; rotate: -7deg; z-index: 3; animation: authFloat 7s ease-in-out infinite .6s reverse; }
.auth-float-3 { width: 130px; height: 166px; right: 2%; bottom: 0; rotate: -4deg; animation: authFloat 9s ease-in-out infinite 1.2s; }
@keyframes authFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

.auth-chip {
	position: absolute;
	z-index: 4;
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-1);
	padding: 8px 13px;
	border-radius: 100px;
	border: 1px solid var(--border-strong);
	background: rgba(10, 12, 26, .78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
	animation: authFloat 6s ease-in-out infinite;
}
.auth-chip-1 { right: 30%; top: 26%; animation-delay: .3s; }
.auth-chip-2 { right: -4%; bottom: 30%; animation-delay: 1s; }

.auth-orbits { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.auth-orbits span {
	position: absolute;
	top: 30%;
	right: 12%;
	border: 1px dashed rgba(255, 255, 255, .1);
	border-radius: 50%;
	animation: orbitRotate 50s linear infinite;
}
.auth-orbits span:nth-child(1) { width: 320px; height: 320px; margin: -160px -160px 0 0; }
.auth-orbits span:nth-child(2) { width: 460px; height: 460px; margin: -230px -230px 0 0; animation-duration: 80s; animation-direction: reverse; opacity: .6; }

.alert {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.5;
	border-radius: 12px;
	padding: 13px 16px;
	margin-bottom: 20px;
}
.alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.alert-danger { color: #ffb4c8; background: rgba(255, 78, 120, .1); border: 1px solid rgba(255, 78, 120, .3); }
.alert-danger svg { stroke: #ff6a8a; }
.alert-success { color: #a7f3d0; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); }
.alert-success svg { stroke: #34d399; }

/* ---- Contact page ---- */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 40px;
	align-items: start;
}
.contact-cards { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
	display: flex;
	gap: 16px;
	padding: 22px 24px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
	transition: border-color .4s ease, transform .4s var(--ease-out);
}
.contact-card:hover { border-color: rgba(124, 92, 255, .4); transform: translateY(-3px); }
.contact-card-icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--grad-soft);
	border: 1px solid var(--border);
}
.contact-card-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
.contact-card h4 { font-size: 16px; margin-bottom: 4px; }
.contact-card p, .contact-card a { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.contact-card a:hover { color: var(--magenta); }
.contact-visual { margin-top: 26px; }
.contact-visual svg { width: 100%; max-width: 360px; overflow: visible; }
.ct-trail { animation: ctFlow 2.2s linear infinite; }
@keyframes ctFlow { to { stroke-dashoffset: -30; } }
.ct-plane { animation: ctBob 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ctBob { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-5px, -7px) rotate(-5deg); } }
.ct-dot { animation: ctPulse 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ct-d2 { animation-delay: .6s; }
.ct-d3 { animation-delay: 1.2s; }
@keyframes ctPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.5); } }

.contact-form-panel {
	padding: 32px 32px 30px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014) 60%);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Solutions pages ---- */
.sol-hero { position: relative; padding: 40px 0 70px; overflow: hidden; }
.sol-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.sol-hero-title { font-size: clamp(30px, 2.4vw + 18px, 46px); letter-spacing: -.025em; margin-bottom: 20px; }
.sol-hero-copy p { font-size: 17px; color: var(--text-2); line-height: 1.65; margin-bottom: 26px; max-width: 520px; }
.sol-note { font-size: 14px; color: var(--text-3); margin-top: 14px; }
.sol-hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-card); }
.sol-hero-media img { width: 100%; display: block; }
.sol-hero-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(124, 92, 255, .2); pointer-events: none; }

.sol-stats { border-block: 1px solid var(--border); padding: 54px 0; background: radial-gradient(60% 100% at 50% 0%, rgba(124, 92, 255, .06), transparent 70%); }
.sol-stats-intro { text-align: center; font-size: 18px; color: var(--text-1); max-width: 680px; margin: 0 auto 40px; }
.sol-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sol-stat { text-align: center; padding: 26px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.sol-stat b { display: block; font-family: var(--font-display); font-size: clamp(30px, 3vw + 10px, 44px); font-weight: 700; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.sol-stat span { font-size: 14.5px; color: var(--text-2); }

.sol-benefits-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.sol-benefits-head h2 { font-size: clamp(26px, 2vw + 16px, 38px); margin-bottom: 16px; }
.sol-benefits-head p { font-size: 16px; color: var(--text-2); line-height: 1.7; }
.sol-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sol-benefit {
	padding: 30px 30px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 60%);
	transition: border-color .4s ease, transform .4s var(--ease-out), box-shadow .45s ease;
}
.sol-benefit:hover { border-color: rgba(124, 92, 255, .4); transform: translateY(-6px); box-shadow: 0 26px 60px -22px rgba(124, 92, 255, .3); }
.sol-benefit-icon { width: 52px; height: 52px; margin-bottom: 18px; }
.sol-benefit-icon svg { width: 100%; height: 100%; }
.sol-i { stroke: url(#solG); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.sol-i-f { fill: url(#solG); }
.sol-i-a { stroke: #34d399; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sol-benefit:hover .sol-i-f { animation: eyebrowSpark 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.sol-benefit h3 { font-size: 19px; margin-bottom: 10px; }
.sol-benefit p { font-size: 14.5px; color: var(--text-2); line-height: 1.65; }
/* Solution benefit icons animate gently on their own, not only on hover */
.sol-benefit .sol-i-f { animation: eyebrowSpark 3.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

/* Solution results gallery (masonry) */
.sol-gallery { columns: 3; column-gap: 18px; }
.sol-shot {
	position: relative;
	margin-bottom: 18px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--border);
	break-inside: avoid;
	transition: border-color .4s ease, box-shadow .45s ease, transform .5s var(--ease-out);
}
.sol-shot img { width: 100%; display: block; transition: transform .9s var(--ease-out); }
.sol-shot-glow {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(160deg, rgba(124, 92, 255, .25), transparent 45%);
	opacity: 0; transition: opacity .4s ease;
	mix-blend-mode: screen;
}
.sol-shot:hover { transform: translateY(-6px); border-color: rgba(255, 78, 205, .4); box-shadow: 0 24px 54px -20px rgba(124, 92, 255, .4); }
.sol-shot:hover img { transform: scale(1.07); }
.sol-shot:hover .sol-shot-glow { opacity: 1; }
@media (max-width: 900px) { .sol-gallery { columns: 2; } }
@media (max-width: 560px) { .sol-gallery { columns: 1; } }

/* ---- Blog ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
	transition: border-color .4s ease, transform .45s var(--ease-out), box-shadow .45s ease;
}
.blog-card:hover { border-color: rgba(255, 78, 205, .4); transform: translateY(-8px); box-shadow: 0 30px 64px -24px rgba(124, 92, 255, .35); }
.blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.blog-card:hover .blog-card-media img { transform: scale(1.06); }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; }
.blog-tag { color: var(--cyan); font-weight: 600; }
.blog-card h3 { font-size: 18px; line-height: 1.35; margin-bottom: 10px; }
.blog-card h3 a { transition: color .3s ease; }
.blog-card:hover h3 a { color: var(--magenta); }
.blog-card p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.blog-readmore { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-1); }
.blog-readmore svg { width: 15px; height: 15px; transition: transform .3s var(--ease-spring); }
.blog-card:hover .blog-readmore { color: var(--cyan); }
.blog-card:hover .blog-readmore svg { transform: translateX(4px); }

/* ---- Full pricing page ---- */
.pricing-hero-toggle { display: flex; justify-content: center; margin: -10px 0 44px; }

/* ---- 404 ---- */
.err-section { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 0; overflow: hidden; }
.err-code { font-family: var(--font-display); font-size: clamp(90px, 22vw, 200px); font-weight: 700; line-height: 1; letter-spacing: -.04em; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradFlow 6s ease-in-out infinite alternate; }
.err-section h1 { font-size: clamp(24px, 2vw + 14px, 34px); margin: 10px 0 14px; }
.err-section p { font-size: 16px; color: var(--text-2); margin-bottom: 30px; }
.err-planet {
	position: absolute;
	top: 12%;
	right: 12%;
	width: clamp(140px, 18vw, 240px);
	z-index: 1;
	opacity: .9;
	animation: authFloat 7s ease-in-out infinite;
}
.err-planet-body { transform-origin: 100px 100px; animation: orbitSpin 60s linear infinite; }
.err-moon { transform-origin: 100px 100px; animation: orbitSpin 12s linear infinite; }
.err-ring { transform-origin: 100px 100px; }
@media (max-width: 760px) { .err-planet { top: 4%; right: 50%; transform: translateX(50%); opacity: .5; } }

/* ---- Inner responsive ---- */
@media (max-width: 900px) {
	.contact-grid { grid-template-columns: 1fr; gap: 30px; }
	.sol-hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.sol-benefits-grid { grid-template-columns: 1fr; }
	.sol-stats-grid { grid-template-columns: 1fr; gap: 16px; }
	.blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
	.page-hero { padding: 48px 0 38px; }
	.inner-section { padding: 56px 0; }
	.rbt-shadow-box { padding: 22px 20px; }
	.auth-card { padding: 32px 22px 28px; }
	.contact-form-panel { padding: 26px 20px; }
	.form-grid-2 { grid-template-columns: 1fr; }
	.blog-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Magic "How it works" — luminous pipeline with flowing light
   ------------------------------------------------------------ */
.flow-section { position: relative; overflow: hidden; }
.flow-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 60% at 50% 58%, rgba(124, 92, 255, .12), transparent 72%); }

.flow { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: clamp(44px, 5vw, 72px); }
.flow-node { flex: 0 0 auto; width: clamp(150px, 15vw, 200px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow-node h3 { margin: 22px 0 6px; font-family: var(--font-display); font-size: 19px; color: var(--text-1); }
.flow-node p { font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 190px; }

.flow-orb {
	position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid rgba(255, 255, 255, .12);
	background: radial-gradient(130% 130% at 30% 22%, rgba(124, 92, 255, .32), rgba(10, 12, 26, .55));
	box-shadow: 0 0 0 6px rgba(124, 92, 255, .05), 0 22px 55px -18px rgba(124, 92, 255, .5), inset 0 0 34px -12px rgba(124, 92, 255, .6);
}
.flow-orb-core {
	background: radial-gradient(130% 130% at 30% 22%, rgba(34, 211, 238, .3), rgba(124, 92, 255, .3) 52%, rgba(10, 12, 26, .55));
	box-shadow: 0 0 0 8px rgba(124, 92, 255, .07), 0 26px 66px -16px rgba(124, 92, 255, .7), inset 0 0 40px -10px rgba(124, 92, 255, .7);
	animation: flowCorePulse 3s ease-in-out infinite;
}
@keyframes flowCorePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.flow-ring {
	position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
	background: conic-gradient(from var(--eb-ring-angle, 0deg), var(--cyan), var(--violet), var(--magenta), var(--amber), var(--cyan));
	-webkit-mask: radial-gradient(closest-side, transparent 70%, #000 74%, #000 92%, transparent 96%);
	        mask: radial-gradient(closest-side, transparent 70%, #000 74%, #000 92%, transparent 96%);
	animation: eyebrowRingSpin 6s linear infinite;
}
.flow-ico { width: 46px; height: 46px; }
.flow-step {
	position: absolute; top: -6px; right: -6px; min-width: 34px; height: 26px; padding: 0 8px;
	display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px;
	color: var(--text-1); background: rgba(10, 12, 26, .85); border: 1px solid var(--border-strong); border-radius: 100px;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* conduit between nodes — a glowing line with light-dots flowing along it */
.flow-link { align-self: flex-start; margin-top: 60px; flex: 1 1 50px; min-width: 40px; height: 0; position: relative; }
.flow-link::before {
	content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, rgba(124, 92, 255, .12), rgba(34, 211, 238, .55) 50%, rgba(255, 78, 205, .12));
	background-size: 220% 100%; animation: flowPulse 2.6s linear infinite;
}
.flow-dot {
	position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 12px var(--cyan), 0 0 5px #fff; opacity: 0;
	animation: flowMove 2.6s linear infinite;
}
.flow-dot:nth-child(2) { animation-delay: .87s; }
.flow-dot:nth-child(3) { animation-delay: 1.73s; }
@keyframes flowPulse { to { background-position: -220% 0; } }
@keyframes flowMove { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

@media (max-width: 800px) {
	.flow { flex-direction: column; align-items: center; gap: 0; }
	.flow-node { width: 100%; max-width: 320px; }
	.flow-node p { max-width: none; }
	/* min-width from the row layout would keep the box 40px wide and throw the
	   centred line off by half of that, so it has to be cleared here */
	.flow-link { align-self: center; width: 0; min-width: 0; height: 44px; margin: 8px 0; flex: 0 0 auto; }
	.flow-link::before {
		top: 0; bottom: 0; left: -1px; right: auto; width: 2px; height: auto;
		background: linear-gradient(180deg, rgba(124, 92, 255, .12), rgba(34, 211, 238, .55) 50%, rgba(255, 78, 205, .12));
		background-size: 100% 220%; animation: flowPulseV 2.6s linear infinite;
	}
	.flow-dot { animation: flowMoveV 2.6s linear infinite; }
}
@keyframes flowPulseV { to { background-position: 0 -220%; } }
@keyframes flowMoveV { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* flowing dashed path — relocated from the old "How it works", now a divider
   under the new flow block. Reuses the pathFlow keyframe. */
.flow-path {
	position: relative;
	width: min(78%, 860px);
	height: 46px;
	margin: clamp(6px, 1.4vw, 18px) auto 0;   /* lifted up close to the node captions */
	overflow: visible;
	opacity: .9;
}
.flow-path svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flow-path path {
	fill: none;
	stroke: rgba(124, 92, 255, .5);
	stroke: url(#flowPathG) rgba(124, 92, 255, .5);
	stroke-width: 2;
	stroke-dasharray: 7 9;
	stroke-linecap: round;
	animation: pathFlow 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.flow-orb-core, .flow-ring, .flow-link::before, .flow-dot { animation: none !important; }
	.flow-dot { opacity: 0 !important; }
	.flow-path path { animation: none !important; }
}

/* ============ WHY GENIUSAI — RADIAL PORTAL ============ */
.why-section{position:relative;overflow:hidden}
.why-section .container{position:relative;z-index:1}
.why-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 44% at 50% 32%,rgba(124,92,255,.20),transparent 70%),
    radial-gradient(40% 40% at 20% 70%,rgba(34,211,238,.10),transparent 72%),
    radial-gradient(40% 40% at 82% 70%,rgba(255,78,205,.10),transparent 72%)}

/* ---- fixed-aspect stage: one coordinate space shared by portal, rays and cards ---- */
.why-prisma{margin-top:clamp(26px,4vw,52px)}
.why-stage{position:relative;width:100%;max-width:1120px;margin-inline:auto;aspect-ratio:1120/760}

/* ---- prompt-beam descending into the portal ---- */
.why-beam{position:absolute;left:50%;top:0;width:4px;height:20%;z-index:2;
  transform:translateX(-50%);transform-origin:top center;border-radius:4px;
  background:linear-gradient(180deg,transparent,rgba(242,243,255,.2) 30%,rgba(242,243,255,.95));
  box-shadow:0 0 14px rgba(242,243,255,.5);
  transition:transform .6s var(--ease-out)}
.why-beam::after{content:"";position:absolute;left:50%;top:0;width:220%;height:34%;
  transform:translate(-50%,-40%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent);
  animation:whyBeamGlint 3s var(--ease-out) infinite}
@keyframes whyBeamGlint{0%{transform:translate(-50%,-140%);opacity:0}
  20%{opacity:1}75%{opacity:.6}100%{transform:translate(-50%,360%);opacity:0}}

/* ---- central GeniusAI portal (logo inside) ---- */
.why-portal{position:absolute;left:50%;top:20%;z-index:4;
  width:clamp(128px,15vw,172px);aspect-ratio:1/1;transform:translate(-50%,-50%)}
.why-portal-halo{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,92,255,.4),rgba(34,211,238,.14) 55%,transparent 74%);
  filter:blur(4px);animation:flowCorePulse 4.4s ease-in-out infinite}
.why-portal-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from var(--eb-ring-angle,0deg),var(--cyan),var(--violet),var(--magenta),var(--amber),var(--cyan));
  -webkit-mask:radial-gradient(closest-side,transparent 66%,#000 70%,#000 93%,transparent 97%);
          mask:radial-gradient(closest-side,transparent 66%,#000 70%,#000 93%,transparent 97%);
  animation:eyebrowRingSpin 7s linear infinite}
.why-portal-core{position:absolute;inset:9%;border-radius:50%;
  background:radial-gradient(130% 130% at 32% 24%,rgba(34,211,238,.28),rgba(124,92,255,.34) 52%,rgba(8,10,22,.7));
  box-shadow:inset 0 0 34px -8px rgba(124,92,255,.8),0 0 40px -6px rgba(124,92,255,.55)}
.why-preview{position:absolute;inset:9%;border-radius:50%;overflow:hidden}
.why-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.12);filter:saturate(1.2) brightness(1.05);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-spring)}
.why-logo{position:absolute;left:24%;top:24%;width:52%;height:52%;z-index:2;overflow:visible;
  filter:drop-shadow(0 2px 10px rgba(124,92,255,.6));transition:opacity .4s ease}
.why-logo-spark{transform-origin:32px 30px;animation:whyLogoPulse 4s ease-in-out infinite}
@keyframes whyLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* the two orbits don't spin — they draw in then fade back out, like the header logo (reuses orbitA/orbitB) */
.why-orbit-a,.why-orbit-b{stroke-dasharray:124}
.why-orbit-a{animation:orbitA 4s ease-in-out infinite}
.why-orbit-b{animation:orbitB 4s ease-in-out infinite}

/* ---- six rays radiating from the portal hub ---- */
.why-ray{position:absolute;left:50%;top:20%;z-index:1;height:3px;width:var(--len);
  margin-top:-1.5px;transform-origin:left center;transform:rotate(var(--angle));opacity:.8;
  border-radius:3px;background:linear-gradient(90deg,rgba(242,243,255,.55),var(--hue));
  filter:drop-shadow(0 0 6px var(--hue));
  transition:transform .7s var(--ease-spring),opacity .45s var(--ease-out),filter .3s ease}

/* ---- advantage cards placed on a circle around the portal; readable at rest ---- */
.why-spectrum{list-style:none;margin:0;padding:0}
.why-card{position:absolute;left:var(--cx);top:var(--cy);z-index:3;
  width:clamp(184px,21%,250px);transform:translate(-50%,-50%);
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;
  padding:12px 16px 12px 20px;border-radius:16px;
  background:linear-gradient(150deg,rgba(18,20,42,.86),rgba(10,12,26,.78));
  border:1px solid var(--border);box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
  transition:transform .4s var(--ease-out),opacity .5s ease,background .3s ease,border-color .3s ease}
.why-card-edge{position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:var(--hue);box-shadow:0 0 12px var(--hue);transition:box-shadow .3s ease}
.why-wl{position:absolute;top:8px;right:12px;font:600 .62rem/1 var(--font-display, sans-serif);
  letter-spacing:.16em;color:var(--text-3);font-variant-numeric:tabular-nums}
.why-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--hue);
  background:radial-gradient(closest-side,color-mix(in oklab,var(--hue),transparent 78%),transparent);
  border:1px solid var(--border)}
.why-ico svg{width:21px;height:21px}
.why-card-body{min-width:0;padding-right:14px}
.why-card-title{margin:0 0 2px;font:600 clamp(.95rem,1.2vw,1.06rem)/1.2 var(--font-display, sans-serif);color:var(--text-1)}
.why-card-desc{margin:0;font-size:clamp(.76rem,.95vw,.84rem);line-height:1.4;color:var(--text-2)}

/* ---- periodic signal pulse: a light-dot rides each ray out to its card, then the card
   "receives" it and pings. Fired in symmetric pairs (0&5, 1&4, 2&3) so 1-2 react at a time. ---- */
.why-ray::after{content:"";position:absolute;top:50%;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:#fff;box-shadow:0 0 12px 2px var(--hue),0 0 5px #fff;opacity:0;
  animation:whyRaySignal 4.2s linear infinite}
/* signal pairs (L=left top->bottom 0,1,2 / R=right top->bottom 5,4,3): 1-3, 2-1, 3-2.
   group A (0,3)@0s ; group B (1,5)@1.4s ; group C (2,4)@2.8s — 0 & 3 keep the default 0s. */
.why-ray[data-i="1"]::after,.why-ray[data-i="5"]::after{animation-delay:1.4s}
.why-ray[data-i="2"]::after,.why-ray[data-i="4"]::after{animation-delay:2.8s}
@keyframes whyRaySignal{0%{left:0;opacity:0}3%{opacity:1}16%{left:100%;opacity:1}20%{left:100%;opacity:0}100%{left:100%;opacity:0}}

.why-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px var(--hue),0 0 22px -2px var(--hue);opacity:0;
  animation:whyCardPing 4.2s ease-out infinite}
.why-card[data-i="1"]::after,.why-card[data-i="5"]::after{animation-delay:1.4s}
.why-card[data-i="2"]::after,.why-card[data-i="4"]::after{animation-delay:2.8s}
@keyframes whyCardPing{0%,13%{opacity:0}17%{opacity:.5}32%{opacity:0}100%{opacity:0}}

/* vertical rainbow spine — only on the small-screen stack (drawn as the list's ::before) */
.why-spine{display:none}

/* ---- hover delight: dim the rest, ignite the matching ray, refract artwork into the portal ---- */
.why-spectrum:has(.why-card:hover) .why-card{opacity:.45}
.why-spectrum:has(.why-card:hover) .why-card:hover{
  opacity:1;transform:translate(-50%,-50%) scale(1.04);transition-delay:0s;
  border-color:color-mix(in oklab,var(--hue),transparent 50%);
  background:linear-gradient(150deg,color-mix(in oklab,var(--hue),rgba(14,16,32,.92) 82%),rgba(10,12,26,.82))}
.why-card:hover .why-card-edge{box-shadow:0 0 20px var(--hue),0 0 6px var(--hue)}
.why-stage:has(.why-card:hover) .why-ray{opacity:.22}
.why-stage:has(.why-card[data-i="0"]:hover) .why-ray[data-i="0"],
.why-stage:has(.why-card[data-i="1"]:hover) .why-ray[data-i="1"],
.why-stage:has(.why-card[data-i="2"]:hover) .why-ray[data-i="2"],
.why-stage:has(.why-card[data-i="3"]:hover) .why-ray[data-i="3"],
.why-stage:has(.why-card[data-i="4"]:hover) .why-ray[data-i="4"],
.why-stage:has(.why-card[data-i="5"]:hover) .why-ray[data-i="5"]{
  opacity:1;transform:rotate(var(--angle)) scaleY(2.1);filter:drop-shadow(0 0 12px var(--hue)) brightness(1.25);
  transition:transform .28s var(--ease-out),opacity .22s ease,filter .22s ease;transition-delay:0s}
.why-stage:has(.why-card[data-i="0"]:hover) .why-thumb[data-i="0"],
.why-stage:has(.why-card[data-i="1"]:hover) .why-thumb[data-i="1"],
.why-stage:has(.why-card[data-i="2"]:hover) .why-thumb[data-i="2"],
.why-stage:has(.why-card[data-i="3"]:hover) .why-thumb[data-i="3"],
.why-stage:has(.why-card[data-i="4"]:hover) .why-thumb[data-i="4"],
.why-stage:has(.why-card[data-i="5"]:hover) .why-thumb[data-i="5"]{opacity:.92;transform:scale(1)}
.why-stage:has(.why-card:hover) .why-logo{opacity:.22}

/* ---- scroll-in dispersion cascade (JS arms, IntersectionObserver fires once) ---- */
.why-prisma.is-armed .why-portal{opacity:0;transform:translate(-50%,-50%) scale(.7)}
.why-prisma.is-armed .why-beam{transform:translateX(-50%) scaleY(0)}
.why-prisma.is-armed .why-ray{transform:rotate(var(--angle)) scaleX(0);opacity:0}
.why-prisma.is-armed .why-card{opacity:0;transform:translate(-50%,-50%) scale(.82);filter:blur(5px)}
.why-prisma.is-armed.is-fired .why-portal{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-spring)}
.why-prisma.is-armed.is-fired .why-beam{transform:translateX(-50%) scaleY(1);transition-delay:.15s}
.why-prisma.is-armed.is-fired .why-ray{transform:rotate(var(--angle)) scaleX(1);opacity:.8}
.why-prisma.is-armed.is-fired .why-ray[data-i="0"]{transition-delay:.40s}
.why-prisma.is-armed.is-fired .why-ray[data-i="1"]{transition-delay:.46s}
.why-prisma.is-armed.is-fired .why-ray[data-i="2"]{transition-delay:.52s}
.why-prisma.is-armed.is-fired .why-ray[data-i="3"]{transition-delay:.52s}
.why-prisma.is-armed.is-fired .why-ray[data-i="4"]{transition-delay:.46s}
.why-prisma.is-armed.is-fired .why-ray[data-i="5"]{transition-delay:.40s}
.why-prisma.is-armed.is-fired .why-card{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none;
  transition:opacity .55s ease,transform .6s var(--ease-spring),filter .55s ease}
.why-prisma.is-armed.is-fired .why-spectrum li:nth-child(1){transition-delay:.50s}
.why-prisma.is-armed.is-fired .why-spectrum li:nth-child(2){transition-delay:.57s}
.why-prisma.is-armed.is-fired .why-spectrum li:nth-child(3){transition-delay:.64s}
.why-prisma.is-armed.is-fired .why-spectrum li:nth-child(4){transition-delay:.64s}
.why-prisma.is-armed.is-fired .why-spectrum li:nth-child(5){transition-delay:.57s}
.why-prisma.is-armed.is-fired .why-spectrum li:nth-child(6){transition-delay:.50s}
/* once the entrance has played out, drop every stagger delay so hover reacts instantly */
.why-prisma.is-settled .why-ray,
.why-prisma.is-settled .why-card{transition-delay:0s !important}
.why-prisma.is-offscreen .why-portal-halo,
.why-prisma.is-offscreen .why-portal-ring,
.why-prisma.is-offscreen .why-orbit-a,
.why-prisma.is-offscreen .why-orbit-b,
.why-prisma.is-offscreen .why-logo-spark,
.why-prisma.is-offscreen .why-ray::after,
.why-prisma.is-offscreen .why-card::after,
.why-prisma.is-offscreen .why-beam::after{animation-play-state:paused}

/* =================== WHY — RESPONSIVE =================== */
/* smaller screens: portal on top, vertical spectrum with a rainbow spine.
   Switches below 1040px — the radial fan needs room, so it only shows when wide enough. */
@media (max-width:1040px){
  .why-stage{aspect-ratio:auto;max-width:540px;display:flex;flex-direction:column;align-items:center}
  .why-beam,.why-ray{display:none}
  .why-portal{position:relative;left:auto;top:auto;transform:none;
    width:clamp(120px,32vw,150px);margin:0 auto clamp(22px,5vw,34px)}
  .why-prisma.is-armed .why-portal{opacity:0;transform:scale(.7)}
  .why-prisma.is-armed.is-fired .why-portal{opacity:1;transform:scale(1)}
  /* no rainbow spine down the side here — the cards carry their own hue edge and
     the narrow column is better spent on the copy */
  .why-spectrum{position:relative;width:100%;display:flex;flex-direction:column;gap:14px}
  .why-card{position:relative;left:auto;top:auto;width:auto;transform:none}
  .why-prisma.is-armed .why-card{opacity:0;transform:translateY(20px);filter:blur(5px)}
  .why-prisma.is-armed.is-fired .why-card{opacity:1;transform:translateY(0);filter:none}
  .why-spectrum:has(.why-card:hover) .why-card:hover{transform:none}
}
@media (max-width:600px){
  .why-card{grid-template-columns:auto 1fr;gap:12px;padding:12px 14px 12px 18px;border-radius:14px}
  .why-card-body{padding-right:8px}
  .why-ico{width:38px;height:38px;border-radius:11px}
}
@media (max-width:360px){
  .why-card{padding:11px 12px 11px 16px}
  .why-ico{width:36px;height:36px}
  .why-card-desc{font-size:.78rem}
}

/* =================== WHY — REDUCED MOTION =================== */
/* JS skips arming under reduced motion, so the finished radial state is the default paint;
   we only need to stop the looping animations. */
@media (prefers-reduced-motion:reduce){
  .why-portal-halo,.why-portal-ring,.why-orbit-a,.why-orbit-b,.why-logo-spark,
  .why-ray::after,.why-card::after,.why-beam::after{animation:none !important}
  .why-beam,.why-ray,.why-card,.why-thumb,.why-portal{transition:none !important}
  .why-ray::after,.why-card::after{opacity:0 !important}
}

/* ============================================================
   GALLERY — "Latent Stream": two tilted, full-bleed running strips
   whose tiles periodically re-generate from their own prompt.
   Fresh .gal- prefix; .section/.container/.section-head/.eyebrow/
   .grad-text/.btn are global.
   ============================================================ */
.gal-section { position: relative; overflow-x: clip; }

/* full-bleed, tilted field holding the two strips (edge to edge, like the hero) */
/* ------------------------------------------------------------
   Edge art — creations surfacing in a section's margins, tied to scroll.
   JS puts a 0..1 bell (--ea-p, peaks mid-section) and a -1..1 sweep (--ea-t)
   on the layer; --o is how hard each tile rides them, so nothing moves in
   lockstep. Off-screen the layer is simply invisible.
   ------------------------------------------------------------ */
.edge-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.edge-art i {
  position: absolute;
  top: var(--top, 50%);
  width: calc(var(--size, 120px) * var(--ea-scale, 1));
  height: calc(var(--size, 120px) * var(--ea-scale, 1));
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .9);
  opacity: calc(var(--ea-p, 0) * .5);
  /* --ea-t sweeps -1 (section still below the fold) to 1 (already above it). The
     positive signs are what make scrolling down read as arriving: the tiles come
     in from the margins and trail the page instead of rushing out ahead of it. */
  transform:
    translate3d(calc(var(--ea-t, 1) * var(--o, 1) * 46px * var(--dir)), calc(var(--ea-t, 1) * var(--o, 1) * 80px), 0)
    rotate(calc(var(--tilt, 0deg) * var(--ea-p, 0)))
    scale(calc(.84 + var(--ea-p, 0) * .16));
  will-change: opacity, transform;   /* eased in JS — a transition here would fight the scroll */
}
.edge-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.edge-art i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 14, .1), rgba(5, 6, 14, .62));
}
/* they rest just inside the section edge rather than half off it, so the tiles ride
   into the gutter beside the copy instead of only peeking from the bleed */
.edge-l { --dir: 1; left: clamp(-8px, 1vw, 22px); }
.edge-r { --dir: -1; right: clamp(-8px, 1vw, 22px); }

/* the layer is positioned, so the sections that carry it have to lift their copy
   above it — static in-flow content otherwise paints underneath */
.flow-section > .container,
.why-section > .container,
.styles-section > .container { position: relative; z-index: 1; }

/* keep them out of the copy: below the widest container they shrink and tuck out */
@media (max-width: 1439px) {
  .edge-art { --ea-scale: .72; }
  .edge-l { left: -18px; }
  .edge-r { right: -18px; }
}
@media (max-width: 1023px) { .edge-art { display: none; } }

.gal-section { overflow-x: clip; }   /* the field and the crossing band both run wider than the viewport */

.gal-field {
  position: relative;
  left: 50%;
  width: 108vw;
  margin-block: clamp(40px, 5vw, 76px);
  transform: translateX(-50%) rotate(-3deg);
  transform-origin: center;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 26px);
}

/* one running strip (a horizontal marquee), edges softened */
.gal-strip {
  position: relative;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gal-run {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  animation: galRun var(--gal-dur, 60s) linear infinite;
}
/* Woven with the crossing band (z-index 2): the lower strip runs under it, the
   upper one over it, so the two read as interlaced rather than stacked. */
.gal-strip[data-dir="right"] { z-index: 1; }
.gal-strip[data-dir="left"] { z-index: 3; }
.gal-strip[data-dir="right"] .gal-run { animation-direction: reverse; }
@keyframes galRun { to { transform: translateX(calc(-50% - 7px)); } }

/* --- a tile ------------------------------------------------- */
.gal-cell {
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 216px);
  margin: 0;
}
.gal-frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
  /* The hover filter on .gal-img puts it on its own compositing layer, and a
     rounded `overflow: hidden` does not survive that in Chromium — the layer gets
     the square clip instead and the blurred edge fills the corners. An explicit
     rounded clip-path is honoured by the composited subtree, so it holds. */
  clip-path: inset(0 round var(--radius));
}
.gal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* active-tile conic border glow (registered @property --eb-ring-angle) */
.gal-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--eb-ring-angle, 0deg), var(--cyan), var(--violet), var(--magenta), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none;
}

/* brand-tinted latent noise (inline feTurbulence data-URI) */
.gal-noise {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(115deg, rgba(34,211,238,.55), rgba(124,92,255,.55) 45%, rgba(255,78,205,.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 150px 150px;
  background-blend-mode: overlay; mix-blend-mode: screen;
  opacity: 0; pointer-events: none;
}
/* denoise light-bar */
.gal-scan {
  position: absolute; left: -12%; right: -12%; top: 0; height: 42%; z-index: 3;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.16) 40%, var(--cyan) 50%, rgba(255,255,255,.16) 60%, transparent);
  box-shadow: 0 0 26px 6px rgba(34,211,238,.40);
  opacity: 0; transform: translateY(-140%); pointer-events: none;
}

/* prompt bar (single-line monospace typewriter) */
.gal-prompt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: baseline; gap: .35em; padding: .55em .6em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(9px, 1.05vw, 11.5px); line-height: 1.3; color: var(--text-1);
  background: linear-gradient(to top, rgba(5,6,14,.94), rgba(5,6,14,.5) 68%, transparent);
  white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateY(34%);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.gal-cue { flex: 0 0 auto; color: var(--cyan); }
.gal-type {
  display: inline-block; overflow: hidden; white-space: nowrap;
  width: calc(var(--plen) * 1ch); max-width: 100%;
  border-right: 2px solid transparent; vertical-align: bottom;
}

/* --- active state: hover the strip's tile, or a JS regeneration (.is-gen) --- */
.gal-cell:is(:hover, .is-gen) .gal-frame::after { opacity: 1; animation: eyebrowRingSpin 4s linear infinite; }
.gal-cell:is(:hover, .is-gen) .gal-img { animation: galResolve .95s var(--ease-out) var(--type-dur) both; will-change: filter, transform; }
.gal-cell:is(:hover, .is-gen) .gal-noise { animation: galNoise calc(var(--type-dur) + .95s) linear both; }
.gal-cell:is(:hover, .is-gen) .gal-scan { animation: galScan .95s var(--ease-out) var(--type-dur) both; }
.gal-cell:is(:hover, .is-gen) .gal-prompt { opacity: 1; transform: translateY(0); }
.gal-cell:is(:hover, .is-gen) .gal-type { animation: galType var(--type-dur) steps(var(--plen)) both, galCaret .7s ease infinite; }

@keyframes galResolve { 0% { filter: blur(16px) saturate(.15) brightness(1.5); transform: scale(1.06); } 100% { filter: blur(0) saturate(1) brightness(1); transform: scale(1); } }
@keyframes galNoise { 0% { opacity: .85; } 62% { opacity: .80; } 100% { opacity: 0; } }
@keyframes galScan { 0% { opacity: 0; transform: translateY(-140%); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(240%); } }
@keyframes galType { from { width: 0; } to { width: calc(var(--plen) * 1ch); } }
@keyframes galCaret { 0%, 100% { border-right-color: var(--violet); } 50% { border-right-color: transparent; } }

/* --- band cutting across the strips ------------------------- */
/* The field is already tilted -3deg, so a counter-tilt here reads as a crossing
   band rather than a parallel one. Sits above both strips. */
/* Runs well past the field on both sides. `.marquee` fades its outer 10% away, and
   at this lean the band's own ends pull inwards as it rotates — at 120% width the
   right-hand fade landed inside the viewport and read as the ribbon running out of
   text. The extra width parks both fades off-screen, so it is full at every phase. */
.gal-cross {
  position: absolute;
  z-index: 2;
  left: -22%;
  right: -22%;
  top: 50%;
  padding: 13px 0;
  transform: translateY(-50%) rotate(14deg);
  background:
    linear-gradient(90deg, rgba(5, 6, 14, .9), rgba(10, 12, 26, .8) 50%, rgba(5, 6, 14, .9));
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 60px -18px rgba(0, 0, 0, .85), inset 0 0 34px -14px rgba(34, 211, 238, .5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.gal-cross .marquee-track { gap: 26px; --half-gap: 13px; }
.gal-cross span {
  font-size: 13.5px;
  letter-spacing: .22em;
  background: var(--grad);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradFlow 7s ease-in-out infinite alternate;
}
.gal-cross i { font-size: 9px; color: var(--cyan); }
.gal-cross, .gal-cross * { pointer-events: none; }

.gal-cta { text-align: center; margin-top: clamp(30px, 4vw, 54px); }

/* ============================================================ RESPONSIVE */
@media (max-width: 767px) {
  .gal-field { width: 118vw; transform: translateX(-50%) rotate(-2.2deg); gap: 12px; }
  .gal-cell { width: clamp(122px, 34vw, 152px); }
  .gal-cross { padding: 10px 0; transform: translateY(-50%) rotate(10deg); }
  .gal-cross span { font-size: 11.5px; letter-spacing: .18em; }
}
@media (max-width: 600px) {
  .gal-prompt { font-size: 9px; white-space: normal; align-items: flex-start; }
  .gal-type { white-space: normal; width: auto; max-width: 100%; }
  .gal-cell:is(:hover, .is-gen) .gal-type { animation: galCaret .7s ease infinite; width: auto; }
}

/* ============================================================ REDUCED MOTION
   Freeze the run + swaps; artworks shown static & crisp, prompt still on hover. */
@media (prefers-reduced-motion: reduce) {
  .gal-run { animation: none; }
  .gal-cell:is(:hover, .is-gen) .gal-img,
  .gal-cell:is(:hover, .is-gen) .gal-noise,
  .gal-cell:is(:hover, .is-gen) .gal-scan,
  .gal-cell:is(:hover, .is-gen) .gal-type,
  .gal-cell:is(:hover, .is-gen) .gal-frame::after { animation: none; }
  .gal-img { filter: none; transform: none; }
  .gal-noise, .gal-scan { display: none; }
  .gal-prompt { white-space: normal; align-items: flex-start; }
  .gal-type { width: auto; max-width: 100%; white-space: normal; border-right: 0; }
}

/* ============================================================
   HOW IT WORKS — the rail on the left drives one persistent mock
   studio window on the right. The chrome never moves and every
   column has a fixed height, so stepping cannot reflow the page.
   Per-step animations hang off [data-step="N"] selectors: when the
   attribute changes the old rule stops matching and the new one
   starts, which is what re-triggers them.
   Gradient strokes stay off zero-area paths — a horizontal line has
   no bbox height, so an objectBoundingBox gradient would drop it.
   ============================================================ */
/* only the x axis is clipped — `overflow: hidden` here would turn the section
   into a scrollport and kill the sticky stage below */
.hiw-section { position: relative; overflow-x: clip; }
.hiw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.hiw-aura {
  position: absolute; left: 50%; top: 12%; z-index: 0;
  width: min(1080px, 122vw); aspect-ratio: 1 / .52;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(124, 92, 255, .20), rgba(34, 211, 238, .07) 46%, transparent 72%);
  pointer-events: none;
}

.hiw {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 3.2vw, 54px);
  align-items: start;
}

/* ------------------------------------------------------------
   Left rail — every step keeps its copy visible, so the column
   height is constant and advancing a step shifts nothing.
   ------------------------------------------------------------ */
.hiw-side { position: relative; padding-left: clamp(20px, 2.2vw, 30px); }

/* No clipping: the comet head at the tip of the fill is far wider than the
   2px track, so the glint keyframes stay inside the track on their own. */
.hiw-beam {
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .08);
}
.hiw-beam > span {
  position: relative;
  display: block; width: 100%; height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #22d3ee, #7c5cff 52%, #ff4ecd);
  box-shadow: 0 0 16px rgba(124, 92, 255, .7);
  transition: height .85s var(--ease-out);
}
/* the head rides the tip of the fill, so changing step sends it gliding
   down (or back up) to the newly selected orb */
.hiw-beam > span::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 8px; height: 8px; margin: 0 0 -4px -4px;
  border-radius: 50%; background: #fff;
  animation: hiwBeamHead 2.4s var(--ease-out) infinite;
}
@keyframes hiwBeamHead {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(124, 92, 255, .9), 0 0 20px 5px rgba(34, 211, 238, .3); }
  50%      { box-shadow: 0 0 16px 4px rgba(124, 92, 255, 1), 0 0 30px 9px rgba(34, 211, 238, .48); }
}
.hiw-beam::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 26%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: hiwBeamGlint 3.6s var(--ease-out) infinite;
}
@keyframes hiwBeamGlint {
  0% { top: 0; opacity: 0; }
  14%, 86% { opacity: .9; }
  100% { top: 74%; opacity: 0; }
}

.hiw-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4px, .7vw, 12px); }
.hiw-step { position: relative; }

.hiw-btn {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: clamp(12px, 1.3vw, 17px);
  width: 100%; text-align: left;
  padding: clamp(12px, 1.3vw, 17px) clamp(14px, 1.6vw, 20px);
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background .55s var(--ease-out), border-color .55s ease, box-shadow .55s var(--ease-out);
}
.hiw-btn:hover { background: rgba(255, 255, 255, .035); }
.hiw-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.hiw-step.is-active .hiw-btn {
  background: linear-gradient(120deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .014) 68%);
  box-shadow: 0 24px 54px -32px rgba(124, 92, 255, .7);
}

/* live conic frame — same language as the stage edge and the eyebrow pill */
.hiw-btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--eb-ring-angle, 0deg), rgba(34, 211, 238, .85), rgba(124, 92, 255, .9), rgba(255, 78, 205, .85), rgba(34, 211, 238, .85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.hiw-step.is-active .hiw-btn::before { opacity: .95; animation: eyebrowRingSpin 6s linear infinite; }

/* one-shot shimmer that reads the new card left to right as it lights up */
.hiw-btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .10) 45%, rgba(124, 92, 255, .30) 50%, rgba(255, 255, 255, .10) 55%, transparent 66%);
  background-size: 240% 100%;
}
.hiw-step.is-active .hiw-btn::after { animation: hiwCardSweep 1s var(--ease-out) both; }
@keyframes hiwCardSweep {
  0%   { opacity: 0; background-position: 120% 0; }
  24%  { opacity: 1; }
  100% { opacity: 0; background-position: -120% 0; }
}

.hiw-orb {
  position: relative; width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--border);
  transition: background .55s ease, border-color .55s ease;
}
.hiw-step.is-active .hiw-orb { background: rgba(124, 92, 255, .14); border-color: transparent; }

/* soft rotating halo around the active orb — masked to a ring so the orb
   interior stays clean, and faded out well before the box edge so the blur
   never shows a seam */
.hiw-orb::before {
  content: ""; position: absolute; inset: -9px; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--eb-ring-angle, 0deg), transparent, rgba(34, 211, 238, .5) 22%, rgba(124, 92, 255, .8) 44%, transparent 68%);
  -webkit-mask: radial-gradient(closest-side, transparent 54%, #000 70%, rgba(0, 0, 0, .35) 90%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 54%, #000 70%, rgba(0, 0, 0, .35) 90%, transparent 100%);
  filter: blur(4px);
  opacity: 0; transition: opacity .55s ease;
}
.hiw-step.is-active .hiw-orb::before { opacity: 1; animation: eyebrowRingSpin 3.4s linear infinite; }

/* shockwave that bursts out the moment the step takes over */
.hiw-orb::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(124, 92, 255, .85); opacity: 0;
}
.hiw-step.is-active .hiw-orb::after { animation: hiwOrbWave 1s var(--ease-out) both; }
@keyframes hiwOrbWave {
  0%   { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* sparks thrown off the orb on activation */
.hiw-fizz { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hiw-fizz i {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px rgba(124, 92, 255, 1), 0 0 18px rgba(34, 211, 238, .5);
  opacity: 0;
}
/* they have to clear the orb's halo (23px orb + 9px glow) to read as sparks */
.hiw-fizz i:nth-child(1) { --ax: -42px; --ay: -28px; --sd: 0s; }
.hiw-fizz i:nth-child(2) { --ax:  40px; --ay: -38px; --sd: .05s; }
.hiw-fizz i:nth-child(3) { --ax:  48px; --ay:  18px; --sd: .1s; }
.hiw-fizz i:nth-child(4) { --ax: -44px; --ay:  24px; --sd: .16s; }
.hiw-fizz i:nth-child(5) { --ax:   4px; --ay: -50px; --sd: .22s; }
.hiw-step.is-active .hiw-fizz i { animation: hiwFizz 1.05s var(--ease-out) var(--sd, 0s) both; }
@keyframes hiwFizz {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  18%  { opacity: 1; transform: translate(calc(var(--ax) * .22), calc(var(--ay) * .22)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ax), var(--ay)) scale(.2); }
}

.hiw-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); overflow: visible; }
.hiw-ring circle {
  fill: none; stroke: url(#hiwRing); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 132; stroke-dashoffset: 132; opacity: 0;
}
.hiw-step.is-active .hiw-ring circle { opacity: 1; animation: hiwRingFill var(--hiw-dwell, 6s) linear both; }
@keyframes hiwRingFill { from { stroke-dashoffset: 132; } to { stroke-dashoffset: 0; } }

.hiw-glyph {
  position: relative; width: 22px; height: 22px;
  fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .55s ease, transform .6s var(--ease-spring);
}
.hiw-step.is-active .hiw-glyph { stroke: var(--cyan); transform: scale(1.08); }

/* transform-only nudge — the column height never changes, so nothing reflows */
.hiw-txt {
  position: relative;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  transition: transform .6s var(--ease-spring);
}
.hiw-step.is-active .hiw-txt { transform: translateX(4px); }
.hiw-kicker {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); transition: color .5s ease, text-shadow .6s ease;
}
.hiw-step.is-active .hiw-kicker { color: var(--cyan); text-shadow: 0 0 18px rgba(34, 211, 238, .55); }
.hiw-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 1.1vw + 9px, 20px); letter-spacing: -.01em;
  color: var(--text-2); transition: color .5s ease, text-shadow .6s ease;
}
.hiw-step.is-active .hiw-title { color: var(--text-1); text-shadow: 0 0 26px rgba(124, 92, 255, .6); }
.hiw-desc {
  margin-top: 4px;
  font-size: 14.5px; line-height: 1.55; color: var(--text-3);
  opacity: .5; transition: opacity .5s ease, color .5s ease;
}
.hiw-step.is-active .hiw-desc { opacity: 1; color: var(--text-2); }

/* ------------------------------------------------------------
   Stage
   ------------------------------------------------------------ */
/* The studio pins itself under the header while the rail scrolls past, so the
   window you are reading about stays on screen for the whole walkthrough. */
.hiw-stage {
  position: sticky; top: calc(var(--header-h) + 26px);
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 92% at 50% 0%, rgba(124, 92, 255, .18), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 64%),
    var(--bg-1);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* slow conic edge (registered @property --eb-ring-angle) */
.hiw-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--eb-ring-angle, 0deg), rgba(34, 211, 238, .7), rgba(124, 92, 255, .7), rgba(255, 78, 205, .7), rgba(34, 211, 238, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .45; animation: eyebrowRingSpin 9s linear infinite; pointer-events: none;
}

/* embers rising through the stage — keeps it breathing between steps */
.hiw-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hiw-dust i {
  position: absolute; bottom: -6px;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 9px rgba(124, 92, 255, .95);
  opacity: 0;
  animation: hiwDust 7.5s linear infinite;
}
.hiw-dust i:nth-child(1) { left: 6%; animation-delay: 0s; animation-duration: 8s; }
.hiw-dust i:nth-child(2) { left: 22%; animation-delay: 1.3s; animation-duration: 6.6s; }
.hiw-dust i:nth-child(3) { left: 41%; animation-delay: 2.6s; animation-duration: 9s; }
.hiw-dust i:nth-child(4) { left: 63%; animation-delay: 3.7s; animation-duration: 7.2s; }
.hiw-dust i:nth-child(5) { left: 81%; animation-delay: 5s; animation-duration: 8.4s; }
.hiw-dust i:nth-child(6) { left: 95%; animation-delay: 6.2s; animation-duration: 6.8s; }
@keyframes hiwDust {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  14% { opacity: .9; }
  72% { opacity: .45; }
  100% { opacity: 0; transform: translateY(-400px) scale(1); }
}

.hiw-cap {
  position: absolute; left: 50%; bottom: clamp(10px, 1.4vw, 16px); z-index: 8;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5em;
  max-width: calc(100% - 28px);
  padding: .44em .9em;
  border-radius: 999px; border: 1px solid var(--border);
  background: rgba(5, 6, 14, .8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(9.5px, 1vw, 11.5px); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hiw-cap i { font-style: normal; color: var(--cyan); }
.hiw-cap-text::after {
  content: ""; display: inline-block; vertical-align: -.14em;
  width: 6px; height: 1em; margin-left: .34em;
  background: var(--violet);
  animation: hiwCaret .9s steps(1) infinite;
}
@keyframes hiwCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.hiw-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(34px, 4vw, 58px); text-align: center; }
.hiw-note { font-size: 13.5px; color: var(--text-3); }

/* ------------------------------------------------------------
   The studio window — persistent chrome
   ------------------------------------------------------------ */
.hiw-app {
  position: absolute; z-index: 2;
  left: clamp(9px, 1.2vw, 16px); right: clamp(9px, 1.2vw, 16px);
  top: clamp(9px, 1.2vw, 16px); bottom: clamp(44px, 5.4vw, 54px);
  display: flex; flex-direction: column;
  border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(168deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 60%), rgba(6, 7, 16, .74);
  overflow: hidden;
}

.hiw-bar {
  flex: 0 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  height: clamp(30px, 3.6vw, 40px); padding: 0 clamp(9px, 1.1vw, 14px);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .022);
}
.hiw-dots { display: inline-flex; gap: 5px; }
.hiw-dots i { width: 7px; height: 7px; border-radius: 50%; }
.hiw-dots i:nth-child(1) { background: rgba(255, 78, 205, .6); }
.hiw-dots i:nth-child(2) { background: rgba(255, 182, 72, .6); }
.hiw-dots i:nth-child(3) { background: rgba(34, 211, 238, .6); }
.hiw-bar-title {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: clamp(9.5px, 1vw, 12px); letter-spacing: .04em;
  color: var(--text-2); white-space: nowrap;
}
.hiw-bar-title svg { width: 13px; height: 13px; flex: 0 0 auto; fill: var(--violet); }
.hiw-credits {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .26em .6em; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(124, 92, 255, .13);
  font-size: clamp(9px, .95vw, 11px); color: var(--text-1);
}
.hiw-credits svg { width: 11px; height: 11px; flex: 0 0 auto; fill: var(--amber); }
/* the balance ticks down once the generation is paid for */
.hiw-cr { position: relative; display: inline-block; font-weight: 600; }
.hiw-cr-a, .hiw-cr-b { display: block; font-style: normal; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.hiw-cr-b { position: absolute; inset: 0; opacity: 0; transform: translateY(7px); color: var(--magenta); }
.hiw-app[data-step="3"] .hiw-cr-a, .hiw-app[data-step="4"] .hiw-cr-a { opacity: 0; transform: translateY(-7px); }
.hiw-app[data-step="3"] .hiw-cr-b, .hiw-app[data-step="4"] .hiw-cr-b { opacity: 1; transform: none; }

.hiw-body {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  gap: clamp(8px, 1vw, 13px);
  padding: clamp(8px, 1vw, 13px);
}

/* ------------------------------------------------------------
   Control column — one pane per step, absolutely stacked so the
   panel height never depends on which pane is showing.
   ------------------------------------------------------------ */
.hiw-panel { position: relative; min-width: 0; }
.hiw-pane {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(3px, .55vw, 7px);
  opacity: 0; visibility: hidden; transform: translateX(-12px);
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out), visibility .45s;
}
.hiw-app[data-step="1"] .hiw-pane1,
.hiw-app[data-step="2"] .hiw-pane2,
.hiw-app[data-step="3"] .hiw-pane3,
.hiw-app[data-step="4"] .hiw-pane4 { opacity: 1; visibility: visible; transform: none; }

.hiw-lab {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(7.5px, .8vw, 9.5px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}

@keyframes hiwPop { 0% { opacity: 0; transform: translateY(7px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes hiwRise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes hiwCtaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .55); } 50% { box-shadow: 0 0 0 8px rgba(124, 92, 255, 0); } }
@keyframes hiwWipe { to { stroke-dashoffset: 0; } }
@keyframes hiwSpin { to { transform: rotate(360deg); } }
@keyframes hiwTwinkle {
  0%, 100% { opacity: 0; transform: scale(.5) rotate(-25deg); }
  45% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes hiwStarPulse {
  0%, 100% { opacity: .55; transform: scale(.86) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(35deg); }
}

/* --- pane 01 — the prompt ----------------------------------- */
.hiw-field {
  --hp: clamp(6px, .8vw, 10px);
  position: relative; padding: var(--hp);
  border-radius: 10px; border: 1px solid rgba(124, 92, 255, .42);
  background: rgba(124, 92, 255, .08);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .07);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(8px, .9vw, 10.5px); line-height: 1.65; color: var(--text-1);
}
.hiw-pline { display: block; width: 0; overflow: hidden; white-space: nowrap; }
.hiw-app[data-step="1"] .hiw-pl1 { animation: hiwType .95s steps(23) .3s both; }
.hiw-app[data-step="1"] .hiw-pl2 { animation: hiwType .9s steps(22) 1.35s both; }
@keyframes hiwType { from { width: 0; } to { width: calc(var(--plen) * 1ch); } }
.hiw-pcaret {
  position: absolute; left: calc(var(--hp) + 22ch); bottom: var(--hp);
  width: 5px; height: 1.1em; background: var(--violet); opacity: 0;
}
.hiw-app[data-step="1"] .hiw-pcaret { animation: hiwCaret .85s steps(1) 2.2s infinite; }

.hiw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hiw-chip {
  padding: .24em .6em; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .045);
  font-size: clamp(7.5px, .82vw, 9.5px); color: var(--text-2); white-space: nowrap;
  opacity: 0;
}
.hiw-app[data-step="1"] .hiw-chip { animation: hiwPop .5s var(--ease-spring) var(--d, 0s) both; }

.hiw-go, .hiw-dl {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: .52em .8em; border-radius: 10px;
  background: var(--grad); color: #0b0616; font-weight: 600;
  font-size: clamp(8px, .88vw, 10.5px);
  opacity: 0;
}
.hiw-go svg, .hiw-dl svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hiw-app[data-step="1"] .hiw-go { animation: hiwRise .6s var(--ease-spring) 3.15s both, hiwCtaPulse 1.7s var(--ease-out) 3.8s infinite; }
.hiw-app[data-step="4"] .hiw-dl { animation: hiwRise .6s var(--ease-spring) 1s both, hiwCtaPulse 1.7s var(--ease-out) 1.7s infinite; }

/* --- pane 02 — look & filters ------------------------------- */
.hiw-styles { display: flex; gap: 4px; }
.hiw-st {
  flex: 1 1 0; min-width: 0; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--border); background: rgba(255, 255, 255, .04);
  color: var(--text-3); opacity: 0;
}
.hiw-st svg { width: 60%; height: 60%; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hiw-st.is-on { border-color: transparent; background: rgba(124, 92, 255, .22); color: #eaecff; box-shadow: 0 0 0 1px rgba(124, 92, 255, .8), 0 12px 24px -12px rgba(124, 92, 255, .85); }
/* the picker walks the presets, then settles on the selected one */
.hiw-app[data-step="2"] .hiw-st { animation: hiwPop .45s var(--ease-spring) var(--d, 0s) both, hiwStFlash .5s var(--ease-out) calc(var(--d, 0s) + .45s) both; }
@keyframes hiwStFlash {
  0%, 100% { border-color: var(--border); background: rgba(255, 255, 255, .04); }
  45% { border-color: rgba(34, 211, 238, .85); background: rgba(34, 211, 238, .14); }
}
.hiw-app[data-step="2"] .hiw-st.is-on { animation: hiwPop .45s var(--ease-spring) var(--d, 0s) both, hiwStPick .55s var(--ease-out) 1.05s both; }
@keyframes hiwStPick {
  0% { border-color: var(--border); background: rgba(255, 255, 255, .04); color: var(--text-3); box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
  100% { border-color: transparent; background: rgba(124, 92, 255, .22); color: #eaecff; box-shadow: 0 0 0 1px rgba(124, 92, 255, .8), 0 12px 24px -12px rgba(124, 92, 255, .85); }
}

.hiw-aspects { display: flex; gap: 4px; }
.hiw-as {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: .38em .2em; border-radius: 9px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .04);
  font-size: clamp(7.5px, .8vw, 9.5px); color: var(--text-3); opacity: 0;
}
.hiw-as i { width: var(--w); height: var(--h); flex: 0 0 auto; border-radius: 3px; border: 1.4px solid currentColor; opacity: .8; }
.hiw-as.is-on { border-color: rgba(34, 211, 238, .7); background: rgba(34, 211, 238, .13); color: #d7fbff; }
.hiw-app[data-step="2"] .hiw-as { animation: hiwPop .45s var(--ease-spring) var(--d, 0s) both; }

.hiw-slider { opacity: 0; }
.hiw-app[data-step="2"] .hiw-slider { animation: hiwPop .5s var(--ease-spring) var(--d, 0s) both; }
.hiw-slab { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: clamp(7.5px, .8vw, 9.5px); color: var(--text-3); }
.hiw-slab b { color: var(--text-1); font-weight: 600; }
.hiw-track { position: relative; display: block; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.hiw-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #22d3ee, #7c5cff); }
.hiw-knob {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .35);
  transform: translate(-50%, -50%);
}
.hiw-app[data-step="2"] .hiw-fill { animation: hiwFillTo 1s var(--ease-out) calc(var(--d, 0s) + .2s) both; }
.hiw-app[data-step="2"] .hiw-knob { animation: hiwKnobTo 1s var(--ease-out) calc(var(--d, 0s) + .2s) both; }
@keyframes hiwFillTo { from { width: 0; } to { width: var(--fill, 60%); } }
@keyframes hiwKnobTo { from { left: 0; } to { left: var(--fill, 60%); } }

/* --- pane 03 — the engine working -------------------------- */
.hiw-pane3 { justify-content: center; gap: clamp(6px, .8vw, 11px); }
.hiw-spin { display: grid; place-items: center; padding: clamp(1px, .3vw, 5px) 0; }
.hiw-spin svg { width: clamp(34px, 4.6vw, 52px); height: auto; }
.hiw-sp-track { stroke: rgba(255, 255, 255, .1); stroke-width: 2.6; }
.hiw-sp-arc { stroke: url(#hiwCool); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 40 80; transform-box: fill-box; transform-origin: center; }
.hiw-sp-arc2 { stroke: rgba(255, 78, 205, .85); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 20 62; transform-box: fill-box; transform-origin: center; }
.hiw-sp-star { fill: url(#hiwSun); transform-box: fill-box; transform-origin: center; }
.hiw-app[data-step="3"] .hiw-sp-arc { animation: hiwSpin 1.15s linear infinite; }
.hiw-app[data-step="3"] .hiw-sp-arc2 { animation: hiwSpin 1.7s linear infinite reverse; }
.hiw-app[data-step="3"] .hiw-sp-star { animation: hiwStarPulse 1.6s var(--ease-out) infinite; }

.hiw-bar-prog { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.hiw-bar-prog > span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #22d3ee, #7c5cff 55%, #ff4ecd); box-shadow: 0 0 14px rgba(124, 92, 255, .7); }
.hiw-app[data-step="3"] .hiw-bar-prog > span { animation: hiwProg 4.6s var(--ease-out) .15s both; }
@keyframes hiwProg { 0% { width: 4%; } 55% { width: 74%; } 100% { width: 100%; } }

.hiw-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.hiw-checks li { display: flex; align-items: center; gap: 6px; font-size: clamp(8px, .86vw, 10px); color: var(--text-3); opacity: .35; }
.hiw-checks svg {
  width: 13px; height: 13px; flex: 0 0 auto;
  fill: none; stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
}
.hiw-app[data-step="3"] .hiw-checks li { animation: hiwCheckOn .5s var(--ease-out) var(--d, 0s) both; }
.hiw-app[data-step="3"] .hiw-checks svg { animation: hiwWipe .45s var(--ease-out) var(--d, 0s) both; }
@keyframes hiwCheckOn { to { opacity: 1; color: var(--text-2); } }

/* --- pane 04 — variations & tools --------------------------- */
.hiw-vars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hiw-var { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); opacity: 0; }
.hiw-var img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hiw-var.is-on { border-color: transparent; box-shadow: 0 0 0 1.6px var(--violet), 0 10px 20px -10px rgba(124, 92, 255, .9); }
.hiw-app[data-step="4"] .hiw-var { animation: hiwPop .45s var(--ease-spring) var(--d, 0s) both; }

.hiw-tools { display: flex; gap: 4px; }
.hiw-tool {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: .45em .2em; border-radius: 9px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .04);
  font-size: clamp(7px, .76vw, 9px); color: var(--text-2); text-align: center; line-height: 1.2;
  opacity: 0;
}
.hiw-tool svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--cyan); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hiw-app[data-step="4"] .hiw-tool { animation: hiwPop .45s var(--ease-spring) var(--d, 0s) both; }

/* ------------------------------------------------------------
   Canvas — the same artwork carried through all four steps
   ------------------------------------------------------------ */
.hiw-canvas {
  position: relative; min-width: 0; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border);
  background: radial-gradient(70% 70% at 50% 40%, rgba(124, 92, 255, .15), transparent 70%), #06070f;
}
.hiw-art {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease-out);
}
/* the reveal: latent blur resolving into the finished frame */
.hiw-app[data-step="3"] .hiw-art:not(.hiw-art-sharp) { opacity: 1; animation: hiwResolve 2.7s var(--ease-out) .4s both; }
@keyframes hiwResolve {
  0% { filter: blur(20px) saturate(.18) brightness(1.5); transform: scale(1.09); }
  100% { filter: blur(0) saturate(1) brightness(1); transform: none; }
}
/* step 4 keeps a soft base under a sharp copy, so the wipe reads as an upscale */
.hiw-app[data-step="4"] .hiw-art:not(.hiw-art-sharp) { opacity: 1; filter: blur(1.8px) saturate(.8) brightness(.93); }
.hiw-art-sharp { z-index: 2; clip-path: inset(0 100% 0 0); }
.hiw-app[data-step="4"] .hiw-art-sharp { opacity: 1; animation: hiwSharpen 2.3s var(--ease-out) .5s both; }
@keyframes hiwSharpen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.hiw-wipe {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 3;
  width: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, #fff 12%, var(--cyan) 50%, #fff 88%, transparent);
  box-shadow: 0 0 20px 5px rgba(34, 211, 238, .6);
}
.hiw-app[data-step="4"] .hiw-wipe { animation: hiwWipeBar 2.3s var(--ease-out) .5s both; }
@keyframes hiwWipeBar {
  0% { left: 0; opacity: 0; }
  10%, 88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* step 1 — an empty canvas waiting for words */
.hiw-empty {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.hiw-app[data-step="1"] .hiw-empty { opacity: 1; visibility: visible; }
.hiw-empty svg { width: clamp(50px, 6.6vw, 82px); height: auto; }
.hiw-empty b {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(7.5px, .82vw, 9.5px); letter-spacing: .08em; font-weight: 400; color: var(--text-3);
}
.hiw-em-frame { fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 2; stroke-dasharray: 7 7; }
.hiw-em-star { fill: url(#hiwCool); transform-box: fill-box; transform-origin: center; }
.hiw-em-dot { fill: var(--violet); opacity: .25; }
.hiw-app[data-step="1"] .hiw-em-frame { animation: hiwDash 14s linear infinite; }
@keyframes hiwDash { to { stroke-dashoffset: -56; } }
.hiw-app[data-step="1"] .hiw-em-star { animation: hiwStarPulse 2.6s var(--ease-out) infinite; }
.hiw-app[data-step="1"] .hiw-em-dot { animation: hiwDot 1.5s var(--ease-out) infinite; }
.hiw-app[data-step="1"] .hiw-em-d2 { animation-delay: .18s; }
.hiw-app[data-step="1"] .hiw-em-d3 { animation-delay: .36s; }
@keyframes hiwDot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* step 2 — one prompt previewed through four looks */
.hiw-looks {
  position: absolute; inset: clamp(6px, .8vw, 10px); z-index: 4;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(5px, .7vw, 8px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.hiw-app[data-step="2"] .hiw-looks { opacity: 1; visibility: visible; }
.hiw-look { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); opacity: 0; }
.hiw-look img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hiw-look1 img { filter: saturate(1.05) contrast(1.06); }
.hiw-look2 img { filter: saturate(1.75) contrast(1.16) hue-rotate(-20deg); }
.hiw-look3 img { filter: saturate(.3) contrast(1.32) brightness(1.06); }
.hiw-look4 img { filter: saturate(1.5) hue-rotate(30deg) contrast(1.12); }
.hiw-look.is-on { border-color: transparent; box-shadow: 0 0 0 1.8px var(--violet), 0 14px 30px -14px rgba(124, 92, 255, .95); }
.hiw-app[data-step="2"] .hiw-look { animation: hiwPop .55s var(--ease-spring) var(--d, 0s) both; }
.hiw-app[data-step="2"] .hiw-look.is-on { animation: hiwPop .55s var(--ease-spring) var(--d, 0s) both, hiwLookPick .6s var(--ease-out) 1.05s both; }
@keyframes hiwLookPick {
  from { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
  to { box-shadow: 0 0 0 1.8px var(--violet), 0 14px 30px -14px rgba(124, 92, 255, .95); }
}

/* step 3 — brand-tinted latent noise burning off under a denoise sweep */
.hiw-noise {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(34, 211, 238, .55), rgba(124, 92, 255, .55) 45%, rgba(255, 78, 205, .55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 150px 150px;
  background-blend-mode: overlay; mix-blend-mode: screen;
}
.hiw-app[data-step="3"] .hiw-noise { animation: hiwNoiseOff 3.1s linear .15s both; }
@keyframes hiwNoiseOff { 0% { opacity: .92; } 55% { opacity: .55; } 100% { opacity: 0; } }

.hiw-scan {
  position: absolute; left: -10%; right: -10%; top: 0; z-index: 5;
  height: 36%; opacity: 0; transform: translateY(-140%); pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .18) 40%, var(--cyan) 50%, rgba(255, 255, 255, .18) 60%, transparent);
  box-shadow: 0 0 30px 8px rgba(34, 211, 238, .4);
}
.hiw-app[data-step="3"] .hiw-scan { animation: hiwScan 1.55s var(--ease-out) .45s 2 both; }
@keyframes hiwScan {
  0% { opacity: 0; transform: translateY(-140%); }
  18%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translateY(250%); }
}

.hiw-fx {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease-out), visibility .4s;
}
.hiw-app[data-step="3"] .hiw-fx { opacity: 1; visibility: visible; }
.hiw-fx-ring { fill: none; stroke: url(#hiwRing); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hiw-fx-core { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hiw-fx-p { fill: #fff; opacity: 0; }
.hiw-app[data-step="3"] .hiw-fx-ring { animation: hiwFxRing 2.4s var(--ease-out) .3s 2 both; }
.hiw-app[data-step="3"] .hiw-fx-r2 { animation-delay: .55s; }
.hiw-app[data-step="3"] .hiw-fx-r3 { animation-delay: .8s; }
@keyframes hiwFxRing {
  0% { opacity: 0; transform: scale(.5); }
  16% { opacity: .85; }
  60%, 100% { opacity: 0; transform: scale(3.2); }
}
.hiw-app[data-step="3"] .hiw-fx-core { animation: hiwFxCore 2.4s var(--ease-out) .3s 2 both; }
@keyframes hiwFxCore {
  0% { opacity: 0; transform: scale(.4); }
  20% { opacity: .8; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(1.55); }
}
.hiw-app[data-step="3"] .hiw-fx-p { animation: hiwFxPart 2.6s var(--ease-out) var(--d, 0s) infinite; }
@keyframes hiwFxPart {
  0% { opacity: 0; transform: none; }
  12% { opacity: .95; }
  52%, 100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); }
}

/* step 4 — brackets snap out, the 4K stamp lands, sparks fire */
.hiw-marks { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.hiw-mk { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.hiw-app[data-step="4"] .hiw-mk { animation: hiwWipe .5s var(--ease-out) calc(var(--d, 0s) + 2.15s) both; }

.hiw-4k {
  position: absolute; z-index: 7; right: clamp(7px, .9vw, 11px); top: clamp(7px, .9vw, 11px);
  padding: .28em .55em; border-radius: 8px;
  border: 1px solid rgba(34, 211, 238, .55); background: rgba(5, 6, 14, .74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-display); font-weight: 600; letter-spacing: .06em;
  font-size: clamp(8.5px, .95vw, 11.5px); color: #d9fbff;
  opacity: 0;
}
.hiw-app[data-step="4"] .hiw-4k { animation: hiwPop .55s var(--ease-spring) 2.45s both; }

.hiw-sparks { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }
.hiw-sk { fill: var(--amber); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hiw-app[data-step="4"] .hiw-sk { animation: hiwTwinkle 2.4s var(--ease-out) calc(var(--d, 0s) + 2.3s) infinite; }

/* a light bar crosses the canvas on every step change — the four
   keyframe names are what make it restart when data-step flips */
.hiw-sweep {
  position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none;
  background: linear-gradient(102deg, transparent 38%, rgba(255, 255, 255, .13) 47%, rgba(124, 92, 255, .32) 50%, rgba(255, 255, 255, .13) 53%, transparent 62%);
  background-size: 260% 100%;
}
.hiw-app[data-step="1"] .hiw-sweep { animation: hiwSweep1 .9s var(--ease-out) both; }
.hiw-app[data-step="2"] .hiw-sweep { animation: hiwSweep2 .9s var(--ease-out) both; }
.hiw-app[data-step="3"] .hiw-sweep { animation: hiwSweep3 .9s var(--ease-out) both; }
.hiw-app[data-step="4"] .hiw-sweep { animation: hiwSweep4 .9s var(--ease-out) both; }
@keyframes hiwSweep1 { 0% { opacity: 0; background-position: 130% 0; } 28% { opacity: 1; } 100% { opacity: 0; background-position: -130% 0; } }
@keyframes hiwSweep2 { 0% { opacity: 0; background-position: -130% 0; } 28% { opacity: 1; } 100% { opacity: 0; background-position: 130% 0; } }
@keyframes hiwSweep3 { 0% { opacity: 0; background-position: 130% 0; } 28% { opacity: 1; } 100% { opacity: 0; background-position: -130% 0; } }
@keyframes hiwSweep4 { 0% { opacity: 0; background-position: -130% 0; } 28% { opacity: 1; } 100% { opacity: 0; background-position: 130% 0; } }

/* ============================================================ RESPONSIVE */
@media (max-width: 1023px) {
  /* single column — a sticky item only travels inside its own grid row, so
     there is nothing to pin here */
  .hiw { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 38px); }
  .hiw-stage { position: relative; top: auto; order: -1; }
}
@media (max-width: 767px) {
  /* too narrow for a two-column app — keep the canvas, drop the controls */
  .hiw-stage { aspect-ratio: 5 / 4; }
  .hiw-body { grid-template-columns: 1fr; }
  .hiw-panel { display: none; }
}
@media (max-width: 600px) {
  .hiw-side { padding-left: 16px; }
  .hiw-btn { gap: 12px; padding: 12px 13px; }
  .hiw-orb { width: 40px; height: 40px; }
  .hiw-glyph { width: 19px; height: 19px; }
  .hiw-desc { font-size: 13.5px; }
  .hiw-dust { display: none; }
}

/* ============================================================ REDUCED MOTION
   Hold the studio on its finished frame; the rail stays clickable. */
@media (prefers-reduced-motion: reduce) {
  .hiw-aura, .hiw-dust, .hiw-sweep, .hiw-scan, .hiw-noise, .hiw-fx, .hiw-wipe { display: none; }
  .hiw-stage::after { animation: none; --eb-ring-angle: 210deg; opacity: .3; }
  .hiw-beam::after, .hiw-fizz, .hiw-orb::after, .hiw-btn::after { display: none; }
  .hiw-beam > span::after { animation: none; }
  .hiw-btn::before, .hiw-orb::before { animation: none; --eb-ring-angle: 210deg; }
  .hiw-txt { transition: none; }
  .hiw-app *, .hiw-app *::before, .hiw-app *::after { animation: none !important; transition: none !important; }
  .hiw-step.is-active .hiw-ring circle { opacity: 0; }
  .hiw-cap-text::after { display: none; }
  .hiw-pline { width: calc(var(--plen) * 1ch); }
  .hiw-chip, .hiw-go, .hiw-dl, .hiw-st, .hiw-as, .hiw-slider, .hiw-var, .hiw-tool, .hiw-look { opacity: 1; }
  .hiw-fill { width: var(--fill, 60%); }
  .hiw-knob { left: var(--fill, 60%); }
  .hiw-bar-prog > span { width: 100%; }
  .hiw-checks li { opacity: 1; color: var(--text-2); }
  .hiw-checks svg, .hiw-mk { stroke-dashoffset: 0; }
  .hiw-4k { opacity: 1; }
  .hiw-app[data-step="3"] .hiw-art:not(.hiw-art-sharp),
  .hiw-app[data-step="4"] .hiw-art:not(.hiw-art-sharp) { opacity: 1; filter: none; }
  .hiw-app[data-step="4"] .hiw-art-sharp { opacity: 1; clip-path: none; }
}


/* ============================================================
   FAQ — copy on the left, oracle art on the right
   New classes only (.faq-art / .faq-oracle / .faq-sat / …); the legacy
   .faq-orb + .faq-ring set above belongs to the standalone FAQ page.
   ============================================================ */
.faq-section { position: relative; overflow-x: clip; }
/* The drift layer reaches up into the pricing block; lifting that section gives
   the tiles something to slip behind instead of painting over the cards. */
.pricing-section { z-index: 1; }
/* the copy has to sit above the drift layer, which is absolutely positioned
   and would otherwise paint over static in-flow content */
.faq-section > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Drift layer — creations surfacing at the foot of the FAQ, floating up and
   evaporating at the top of the pricing block above. Takes no space: it is
   absolutely positioned, reaching --faq-lift (the pricing section) above this
   section's top and running --faq-span tall, both measured in JS.
   Anchoring by top + explicit height rather than to the section's bottom edge
   is deliberate: opening an answer makes the section taller, and a bottom-anchored
   layer would slide the tiles mid-flight.
   ------------------------------------------------------------ */
.faq-drift {
  position: absolute; z-index: 0;
  left: 0; right: 0;
  top: calc(-1 * var(--faq-lift, 900px));
  height: var(--faq-span, 2000px);
  pointer-events: none;
}
.faq-drift i {
  position: absolute;
  left: var(--lane, 50%); bottom: 0;
  width: var(--size, 84px); height: var(--size, 84px);
  margin-left: calc(var(--size, 84px) / -2);
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 22px 54px -24px rgba(0, 0, 0, .85);
  opacity: 0;
  animation: faqDrift var(--dur, 28s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.faq-drift img { width: 100%; height: 100%; object-fit: cover; }
.faq-drift.is-idle i { animation-play-state: paused; }
@keyframes faqDrift {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)) scale(.86); }
  9%   { opacity: .34; }
  66%  { opacity: .28; filter: blur(0); }
  88%  { opacity: 0; }
  100% {
    opacity: 0; filter: blur(9px);
    transform: translate3d(var(--sway, 0px), calc(-1 * var(--faq-rise, 1200px)), 0) rotate(0deg) scale(1.06);
  }
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}
.faq-main { min-width: 0; }
.faq-section .section-head { margin-bottom: clamp(28px, 3vw, 44px); }

/* ------------------------------------------------------------
   Oracle — six questions feeding light into a crystal.
   Pinned so it stays beside whichever answer is open.
   ------------------------------------------------------------ */
.faq-art {
  position: sticky; top: calc(var(--header-h) + 46px);
  width: 100%; max-width: 430px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}
/* turning colour wheel + steady violet pool behind the crystal */
.faq-art::before,
.faq-art::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
.faq-art::before {
  inset: 4%;
  background: conic-gradient(from var(--eb-ring-angle, 0deg), rgba(34, 211, 238, .34), rgba(124, 92, 255, .48) 30%, rgba(255, 78, 205, .34) 58%, rgba(124, 92, 255, .18) 80%, rgba(34, 211, 238, .34));
  filter: blur(48px); opacity: .72;
  animation: eyebrowRingSpin 22s linear infinite;
}
.faq-art::after {
  inset: 24%;
  background: radial-gradient(circle, rgba(124, 92, 255, .34), transparent 70%);
  filter: blur(22px);
  animation: faqPool 7s ease-in-out infinite;
}
@keyframes faqPool {
  0%, 100% { opacity: .5; transform: scale(.94); }
  50%      { opacity: .95; transform: scale(1.08); }
}

.faq-oracle { width: 100%; height: 100%; overflow: visible; }

/* orbits */
.faq-orbit circle { fill: none; transform-origin: 170px 170px; }
.faq-orbit-a { stroke: rgba(255, 255, 255, .10); stroke-width: 1; stroke-dasharray: 3 13; animation: orbitSpin 60s linear infinite; }
.faq-orbit-b { stroke: rgba(124, 92, 255, .26); stroke-width: 1.1; stroke-dasharray: 8 12; animation: orbitSpin 38s linear infinite reverse; }

/* spokes: a faint rail plus a dash that runs question → crystal.
   Every spoke is 38 units long, so one 8/34 pattern (42 total) clears it. */
/* Gradient strokes here must be the user-space ramp: the top and bottom spokes are
   vertical, and a zero-width bounding box makes an objectBoundingBox paint vanish. */
.faq-rails path { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.faq-pulses path {
  stroke: url(#faqEdgeU); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 8 34; stroke-dashoffset: 8; opacity: 0;
  animation: faqFeed 1.8s linear infinite;
  animation-delay: var(--pd, 0s);
}

/* Answer N open → question N on the wheel lights up and its channel runs hot */
.faq-rails path.is-lit {
  stroke: url(#faqEdgeU); stroke-width: 2; opacity: 1;
  filter: drop-shadow(0 0 6px rgba(124, 92, 255, .85));
}
.faq-pulses path.is-lit { animation-delay: 0s; animation-duration: .95s; stroke-width: 3.2; }
@keyframes faqFeed {
  0%        { stroke-dashoffset: 8; opacity: 0; }
  18%, 74%  { opacity: 1; }
  100%      { stroke-dashoffset: -42; opacity: 0; }
}

/* crystal */
.faq-crystal { transform-origin: 170px 170px; animation: faqBreathe 6.4s ease-in-out infinite; }
.faq-crystal-face { fill: url(#faqGlass); }
.faq-crystal-facet { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.faq-crystal-edge { stroke: url(#faqEdge); stroke-width: 1.6; stroke-linejoin: round; opacity: .9; }
/* the outline is 360 units, so one dash laps the cube exactly once */
.faq-crystal-trace {
  stroke: #fff; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 34 326; opacity: .85;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
  animation: faqTrace 4.6s linear infinite;
}
@keyframes faqTrace { to { stroke-dashoffset: -360; } }
@keyframes faqBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.faq-core { animation: faqCore 3.2s ease-in-out infinite; transform-origin: 170px 170px; }
@keyframes faqCore {
  0%, 100% { opacity: .55; transform: scale(.88); }
  50%      { opacity: 1; transform: scale(1.12); }
}
/* fill-box keeps the pulse centred on the mark itself — the positioning
   translate/scale lives on the parent <g> so this animation can't clobber it */
.faq-logo {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: eyebrowSpark 3.2s ease-in-out infinite;
}
.faq-logo-spark { fill: rgba(255, 255, 255, .94); }
.faq-logo-mini { fill: #ffb648; }

/* motes lifting off the crystal */
.faq-motes circle { fill: #fff; opacity: 0; animation: faqMote 5.4s linear infinite; }
.faq-motes circle:nth-child(2) { animation-delay: 1.1s; animation-duration: 6.2s; }
.faq-motes circle:nth-child(3) { animation-delay: 2.2s; animation-duration: 4.8s; }
.faq-motes circle:nth-child(4) { animation-delay: 3.1s; animation-duration: 6.6s; }
.faq-motes circle:nth-child(5) { animation-delay: 4.2s; animation-duration: 5.8s; }
@keyframes faqMote {
  0%       { opacity: 0; transform: translateY(6px) scale(.6); }
  16%      { opacity: .95; }
  100%     { opacity: 0; transform: translateY(-64px) scale(.3); }
}

/* question satellites — outer <g> holds the position, inner one the motion.
   The negative delay (shuffled per render) starts each one mid-bob. */
.faq-sat {
  animation: faqSatFloat 5.6s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
  transition: filter .45s ease;
}
.faq-sat-bg {
  fill: rgba(9, 11, 24, .78); stroke: rgba(255, 255, 255, .16); stroke-width: 1;
  transition: fill .45s ease, stroke .45s ease;
}
.faq-sat-q {
  fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .45s ease;
}
.faq-sat-dot { fill: rgba(255, 255, 255, .8); transition: fill .45s ease; }

/* lit state, driven from the accordion */
.faq-sat-halo {
  fill: none; stroke: url(#faqEdge); stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 50%;
}
.faq-sat.is-lit { filter: drop-shadow(0 0 11px rgba(124, 92, 255, .95)); }
.faq-sat.is-lit .faq-sat-bg { fill: rgba(124, 92, 255, .3); stroke: rgba(255, 255, 255, .55); }
.faq-sat.is-lit .faq-sat-q { stroke: #fff; }
.faq-sat.is-lit .faq-sat-dot { fill: #fff; }
.faq-sat.is-lit .faq-sat-halo { animation: faqSatWave 2.4s var(--ease-out) infinite; }
@keyframes faqSatWave {
  0%        { opacity: .85; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes faqSatFloat {
  0%, 100% { transform: translateY(-3.5px); }
  50%      { transform: translateY(3.5px); }
}

/* fired from JS whenever an answer is opened */
.faq-burst {
  stroke: url(#faqEdge); stroke-width: 2; fill: none;
  transform-origin: 170px 158px; opacity: 0;
}
.faq-art.is-pulse .faq-burst { animation: faqBurst .9s var(--ease-out) both; }
.faq-art.is-pulse .faq-core { animation: faqCoreFlash .9s var(--ease-out) both; }
@keyframes faqBurst {
  0%   { opacity: .9; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes faqCoreFlash {
  0%   { opacity: 1; transform: scale(1.45); }
  100% { opacity: .7; transform: scale(1); }
}

/* ============================================================
   CTA — living backdrop behind the panel + frames on the right
   ============================================================ */
/* Deliberately much wider and taller than the card — the panel itself is opaque,
   so anything hidden underneath it is wasted; the glow has to live in the margin
   around it. Horizontal spill is safe: the section clips the x axis. */
.cta-aura {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(1580px, 126vw); height: min(940px, 156%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta-aura-spin {
  position: absolute; inset: 2%;
  border-radius: 50%;
  background: conic-gradient(from var(--eb-ring-angle, 0deg), rgba(34, 211, 238, .34), rgba(124, 92, 255, .5) 28%, rgba(255, 78, 205, .40) 55%, rgba(124, 92, 255, .20) 78%, rgba(34, 211, 238, .34));
  filter: blur(72px); opacity: .68;
  animation: eyebrowRingSpin 26s linear infinite;
}
.cta-aura-blob { position: absolute; border-radius: 50%; filter: blur(56px); }
.cta-aura-b1 {
  width: 46%; height: 70%; left: -6%; top: 0;
  background: radial-gradient(circle, rgba(34, 211, 238, .40), transparent 68%);
  animation: ctaDriftA 17s ease-in-out infinite alternate;
}
.cta-aura-b2 {
  width: 50%; height: 74%; right: -8%; bottom: -4%;
  background: radial-gradient(circle, rgba(255, 78, 205, .36), transparent 68%);
  animation: ctaDriftB 21s ease-in-out infinite alternate;
}
@keyframes ctaDriftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8%, -10%, 0) scale(1.14); }
}
@keyframes ctaDriftB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-9%, 7%, 0) scale(.94); }
}

/* embers rising out of the band under the card */
.cta-embers {
  position: absolute; inset: auto 0 0; z-index: 0;
  height: 200px; overflow: hidden; pointer-events: none;
}
.cta-embers i {
  position: absolute; bottom: -8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 2px rgba(124, 92, 255, .95), 0 0 24px rgba(34, 211, 238, .45);
  opacity: 0;
  animation: ctaEmber 11s linear infinite;
}
.cta-embers i:nth-child(1) { left: 7%;  animation-delay: 0s;   animation-duration: 8s; }
.cta-embers i:nth-child(2) { left: 19%; animation-delay: 1.9s; animation-duration: 6.5s; }
.cta-embers i:nth-child(3) { left: 31%; animation-delay: 4.1s; animation-duration: 9s; }
.cta-embers i:nth-child(4) { left: 48%; animation-delay: 1.1s; animation-duration: 7.4s; }
.cta-embers i:nth-child(5) { left: 63%; animation-delay: 5.3s; animation-duration: 6.8s; }
.cta-embers i:nth-child(6) { left: 79%; animation-delay: 3.1s; animation-duration: 8.6s; }
.cta-embers i:nth-child(7) { left: 92%; animation-delay: 6.4s; animation-duration: 7s; }
@keyframes ctaEmber {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); }
  16%  { opacity: .95; }
  62%  { opacity: .7; }
  100% { opacity: 0; transform: translate3d(20px, -200px, 0) scale(.3); }
}

/* slow sheen crossing the card so the surface never sits still */
.cta-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .14) 47%, rgba(255, 255, 255, .05) 52%, transparent 60%);
  background-size: 260% 100%;
  animation: ctaSheen 9s var(--ease-out) infinite;
}
@keyframes ctaSheen {
  0%         { opacity: 0; background-position: 130% 0; }
  10%        { opacity: 1; }
  44%, 100%  { opacity: 0; background-position: -130% 0; }
}

/* light riding the outer orbit */
.cta-comet { transform-origin: 100px 100px; animation: orbitSpin 9s linear infinite; }
.cta-comet-head { fill: #fff; }
.cta-comet-tail { fill: rgba(255, 255, 255, .35); filter: blur(4px); }

/* frames drifting up out of the orbit */
.cta-art {
  position: absolute; z-index: 0;
  left: -6px; top: 50%;
  width: clamp(150px, 16vw, 208px);
  height: clamp(190px, 20vw, 262px);
  transform: translateY(-50%);
  pointer-events: none;
}
.cta-frame {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(152deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .65), 0 0 30px -6px rgba(124, 92, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.cta-frame svg { width: 42%; height: 42%; fill: rgba(255, 255, 255, .92); }
.cta-frame-1 { width: 86px; height: 86px; right: 2%; bottom: 6%; animation: ctaFrameA 8.5s ease-in-out infinite; }
.cta-frame-2 { width: 66px; height: 66px; left: 2%;  top: 30%;   animation: ctaFrameB 10s ease-in-out infinite; }
.cta-frame-3 { width: 50px; height: 50px; right: 24%; top: 1%;   animation: ctaFrameC 9.2s ease-in-out infinite; }
@keyframes ctaFrameA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(5deg); }
  50%      { transform: translate3d(-4px, -16px, 0) rotate(1deg); }
}
@keyframes ctaFrameB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); }
  50%      { transform: translate3d(6px, -13px, 0) rotate(-2deg); }
}
@keyframes ctaFrameC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(9deg); }
  50%      { transform: translate3d(-5px, 11px, 0) rotate(3deg); }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1023px) {
  /* one column — a sticky item only travels inside its own grid row */
  .faq-layout { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
  .faq-art { position: relative; top: auto; order: -1; max-width: 320px; }
  .faq-section .section-head-start { align-items: center; text-align: center; max-width: 640px; margin-inline: auto; }
  .cta-art { width: 150px; height: 190px; left: -14px; opacity: .8; }
}
@media (max-width: 620px) {
  .faq-art { max-width: 260px; }
  .cta-art { display: none; }
  .cta-aura-spin { filter: blur(46px); }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .faq-drift { display: none; }
  /* no scroll driver runs, so park the edge artwork visible and still */
  .edge-art i { opacity: .3; transform: none; }
  .faq-art::before, .faq-art::after,
  .faq-orbit circle, .faq-crystal, .faq-core, .faq-logo,
  .faq-motes circle, .faq-sat, .faq-pulses path, .faq-crystal-trace { animation: none; }
  .faq-sat.is-lit .faq-sat-halo { animation: none; opacity: .7; }
  .faq-art::before { --eb-ring-angle: 210deg; }
  .faq-pulses path { opacity: .8; stroke-dashoffset: -22; }
  .faq-motes circle { opacity: .5; }
  .faq-burst { display: none; }
  .cta-aura-spin, .cta-aura-blob, .cta-panel::after,
  .cta-comet, .cta-frame { animation: none; }
  .cta-aura-spin { --eb-ring-angle: 210deg; }
  .cta-embers, .cta-panel::after { display: none; }
}