/* ==========================================================================
   DYNAMICO SYSTEMS — 2026 redesign
   A single-file design system. Brand anchors kept (deep navy, Dynamico teal,
   Nova Square display face); everything else modernised.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
	/* colour */
	--bg-0: #0a0921;          /* page base — deep space */
	--bg-1: #100f2e;          /* section surface */
	--bg-2: #16153a;          /* raised surface */
	--ink: #eef0ff;           /* primary text */
	--ink-2: #a9abd4;         /* secondary text */
	--ink-3: #6b6d9e;         /* muted */
	--teal: #28d3b4;          /* brand primary */
	--teal-soft: rgba(40, 211, 180, .14);
	--blue: #4a63e7;          /* brand secondary */
	--blue-soft: rgba(74, 99, 231, .16);
	--warm: #ffb454;          /* utilisation-ramp accent, use sparingly */
	--pink: #e5559b;          /* "no/black box" contrast */
	--line: rgba(169, 171, 212, .16);
	--line-strong: rgba(169, 171, 212, .3);
	--glass: rgba(255, 255, 255, .04);
	--glass-2: rgba(255, 255, 255, .07);

	/* gradients */
	--grad-brand: linear-gradient(92deg, var(--teal), #3ec6ff 55%, var(--blue));
	--grad-panel: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

	/* type */
	--font-display: 'Nova Square', 'Manrope', sans-serif;
	--font-body: 'Manrope', system-ui, sans-serif;
	--text-xs: .8rem;
	--text-sm: .92rem;
	--text-md: 1.06rem;
	--text-lg: 1.28rem;

	/* space + shape */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px; --sp-4: 22px;
	--sp-5: 34px; --sp-6: 52px; --sp-7: 80px; --sp-8: 120px;
	--r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
	--shadow-glow-teal: 0 0 44px rgba(40, 211, 180, .16);
	--shadow-card: 0 18px 50px rgba(4, 3, 20, .5);

	--container: 1240px;
	--nav-h: 76px;
}

/* ---------- reset/base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}
body {
	background: var(--bg-0);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--teal); color: #06251e; }

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: .01em;
	text-wrap: balance;
}
.h-xl { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
.h-lg { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.h-md { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.h-sm { font-size: 1.18rem; }
p { color: var(--ink-2); }
strong { color: var(--ink); font-weight: 700; }

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

/* ---------- layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--sp-8) 0; position: relative; }
.section--tight { padding: var(--sp-7) 0; }
.section--flush { padding: 0; }
.section-head { max-width: 780px; margin: 0 auto var(--sp-6); text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: var(--text-xs);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: var(--sp-3);
}
.kicker::before, .kicker::after {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--teal);
	opacity: .7;
}
.section-head.left .kicker::before { display: none; }
.section-head p { margin-top: var(--sp-3); font-size: var(--text-lg); }

/* faint structural grid behind sections */
.grid-bg { position: relative; }
.grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(169, 171, 212, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(169, 171, 212, .05) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
	pointer-events: none;
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	letter-spacing: .06em;
	padding: 15px 30px;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
	background: var(--teal);
	color: #06251e;
	box-shadow: var(--shadow-glow-teal);
}
.btn--primary:hover { box-shadow: 0 0 60px rgba(40, 211, 180, .35); }
.btn--ghost {
	border-color: var(--line-strong);
	color: var(--ink);
	background: var(--glass);
}
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn--link {
	padding: 0;
	color: var(--teal);
	border-radius: 0;
}
.btn--link::after { content: "→"; transition: transform .2s ease; }
.btn--link:hover::after { transform: translateX(5px); }
.btn--lg { padding: 18px 38px; font-size: var(--text-md); }

/* ---------- nav ---------- */
.nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	height: var(--nav-h);
	display: flex;
	align-items: center;
	transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
	border-bottom: 1px solid transparent;
}
.nav.scrolled {
	background: rgba(10, 9, 33, .82);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--line);
}
.nav-inner {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}
.nav-logo img { height: 44px; width: auto; }
.nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
	display: block;
	padding: 10px 14px;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	color: var(--ink-2);
	border-radius: var(--r-sm);
	transition: color .2s ease, background .2s ease;
}
.nav-links > li > a:hover,
.nav-links > li > a[aria-current="page"] { color: var(--ink); background: var(--glass); }
.nav-links li.has-drop > a::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	width: 7px; height: 7px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}
.nav-drop {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 250px;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .22s ease;
	box-shadow: var(--shadow-card);
}
.nav-links li.has-drop:hover .nav-drop,
.nav-links li.has-drop:focus-within .nav-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-drop a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--r-sm);
	font-size: var(--text-sm);
	color: var(--ink-2);
}
.nav-drop a:hover { background: var(--teal-soft); color: var(--teal); }
.nav-drop a small { display: block; color: var(--ink-3); font-size: .78rem; letter-spacing: 0; }
.nav-cta { margin-left: var(--sp-2); }

/* burger + mobile drawer */
.nav-burger {
	display: none;
	margin-left: auto;
	width: 44px; height: 44px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
	position: relative;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
	content: "";
	position: absolute;
	left: 11px;
	width: 20px; height: 2px;
	background: var(--ink);
	transition: all .25s ease;
}
.nav-burger span { top: 21px; }
.nav-burger span::before { left: 0; top: -6px; }
.nav-burger span::after { left: 0; top: 6px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { transform: rotate(45deg); top: 0; }
.nav-burger.open span::after { transform: rotate(-45deg); top: 0; }

.mobile-drawer {
	position: fixed;
	inset: var(--nav-h) 0 0 0;
	z-index: 999;
	background: rgba(10, 9, 33, .97);
	backdrop-filter: blur(10px);
	padding: var(--sp-5) 24px;
	display: none;
	overflow-y: auto;
}
.mobile-drawer.open { display: block; }
.mobile-drawer a {
	display: block;
	padding: 14px 4px;
	font-family: var(--font-display);
	font-size: 1.15rem;
	border-bottom: 1px solid var(--line);
}
.mobile-drawer .sub a {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink-2);
	padding-left: 18px;
}
.mobile-drawer .btn { margin-top: var(--sp-4); width: 100%; }

@media (max-width: 991px) {
	.nav-links, .nav-cta { display: none; }
	.nav-burger { display: block; }
}

/* ---------- hero ---------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: var(--nav-h);
}
.hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.hero::before { /* ambient glows */
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(52% 42% at 82% 20%, var(--blue-soft), transparent 70%),
		radial-gradient(44% 38% at 12% 82%, rgba(40, 211, 180, .1), transparent 70%);
	pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--glass);
	font-size: var(--text-sm);
	color: var(--ink-2);
	margin-bottom: var(--sp-4);
}
.hero-eyebrow .dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--teal);
	box-shadow: 0 0 12px var(--teal);
	animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.hero h1 { max-width: 13ch; margin-bottom: var(--sp-4); }
.hero .sub {
	max-width: 52ch;
	font-size: var(--text-lg);
	margin-bottom: var(--sp-5);
}
.hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.hero-stats {
	display: flex;
	gap: var(--sp-6);
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding-top: var(--sp-4);
	max-width: 640px;
}
.hero-stats .stat b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.7rem;
	color: var(--ink);
}
.hero-stats .stat > span { font-size: var(--text-sm); color: var(--ink-3); }
.hero-stats .stat b span { font: inherit; color: inherit; }
.hero-scrollcue {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: var(--ink-3);
	font-size: var(--text-xs);
	letter-spacing: .3em;
	text-transform: uppercase;
	text-align: center;
}
.hero-scrollcue i {
	display: block;
	margin: 8px auto 0;
	width: 1px; height: 34px;
	background: linear-gradient(var(--teal), transparent);
	animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 50% { transform: translateY(8px); opacity: .5; } }
.hero-play {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--ink-2);
	transition: color .2s ease;
}
.hero-play:hover { color: var(--teal); }
.hero-play .ring {
	width: 58px; height: 58px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	display: grid;
	place-items: center;
	background: var(--glass);
	transition: all .25s ease;
	position: relative;
}
.hero-play:hover .ring { border-color: var(--teal); box-shadow: var(--shadow-glow-teal); }
.hero-play .ring::before {
	content: "";
	border-left: 14px solid currentColor;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	margin-left: 4px;
}

/* ---------- logo marquee ---------- */
.marquee {
	border-block: 1px solid var(--line);
	padding: var(--sp-4) 0;
	overflow: hidden;
	position: relative;
	background: var(--bg-1);
}
.marquee::before, .marquee::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-1), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-1), transparent); }
.marquee-track {
	display: flex;
	gap: var(--sp-7);
	width: max-content;
	animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-track span {
	font-family: var(--font-display);
	font-size: 1.12rem;
	color: var(--ink-3);
	white-space: nowrap;
	transition: color .2s ease;
}
.marquee-track span:hover { color: var(--ink); }
.marquee-label {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--teal);
	margin-bottom: var(--sp-3);
}

/* ---------- cards ---------- */
.card {
	background: var(--grad-panel);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	position: relative;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover {
	transform: translateY(-4px);
	border-color: rgba(40, 211, 180, .45);
	box-shadow: var(--shadow-card);
}
.card .icon {
	width: 54px; height: 54px;
	border-radius: var(--r-md);
	background: var(--teal-soft);
	display: grid;
	place-items: center;
	margin-bottom: var(--sp-4);
}
.card .icon img { width: 30px; height: 30px; object-fit: contain; }
.card h3 { margin-bottom: var(--sp-2); }
.card p { font-size: var(--text-sm); }

/* bento grid */
.bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--sp-4);
}
.bento > * { grid-column: span 4; }
.bento .w6 { grid-column: span 6; }
.bento .w8 { grid-column: span 8; }
.bento .w12 { grid-column: span 12; }
@media (max-width: 991px) {
	.bento > *, .bento .w6, .bento .w8 { grid-column: span 12; }
}
.bento .media {
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--line);
	margin-top: var(--sp-4);
	background: var(--bg-0);
}

/* product suite cards */
.suite-card { display: flex; flex-direction: column; min-height: 100%; }
.suite-card .tag {
	align-self: flex-start;
	font-size: var(--text-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--teal);
	background: var(--teal-soft);
	padding: 5px 12px;
	border-radius: var(--r-pill);
	margin-bottom: var(--sp-3);
}
.suite-card .tag.dev { color: var(--warm); background: rgba(255, 180, 84, .12); }
.suite-card .meta { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--sp-3); }
.suite-card .thumb {
	margin: var(--sp-3) 0;
	display: flex;
	justify-content: center;
}
.suite-card .thumb img { height: 120px; object-fit: contain; }
.suite-card .btn, .suite-card .btn--link { margin-top: auto; align-self: flex-start; }

/* ---------- box story (scroll-driven centrepiece) ---------- */
.box-story { position: relative; }
.box-story-track { height: 380vh; }
.box-story-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.box-story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.box-story-copy {
	position: absolute;
	z-index: 3;
	max-width: 430px;
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .5s ease, transform .5s ease;
	pointer-events: none;
}
.box-story-copy.active { opacity: 1; transform: translateY(0); }
.box-story-copy h3 { margin-bottom: var(--sp-2); }
.box-story-copy .kicker::after { display: none; }
.bs-copy-1 { left: max(24px, calc((100vw - var(--container)) / 2 + 24px)); top: 22%; }
.bs-copy-2 { right: max(24px, calc((100vw - var(--container)) / 2 + 24px)); top: 24%; text-align: right; }
.bs-copy-2 .kicker { flex-direction: row-reverse; }
.bs-copy-2 .kicker::before { display: none; }
.bs-copy-2 .kicker::after { display: inline-block; content: ""; width: 26px; height: 1px; background: var(--teal); }
.bs-copy-3 { left: 50%; transform: translate(-50%, 26px); bottom: 7%; text-align: center; }
.bs-copy-3.active { transform: translate(-50%, 0); }

/* feature chips that appear at the end of the story */
.bs-features {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.bs-chip {
	position: absolute;
	min-width: 210px;
	max-width: 250px;
	background: rgba(16, 15, 46, .88);
	backdrop-filter: blur(8px);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	padding: 16px 18px;
	opacity: 0;
	transform: scale(.8);
	transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.4), border-color .3s;
}
.bs-chip h4 { color: var(--teal); font-size: 1.05rem; margin-bottom: 4px; }
.bs-chip p { font-size: .85rem; line-height: 1.45; }
.box-story.revealed .bs-chip { opacity: 1; transform: scale(1); }
.bs-chip:nth-child(1) { transition-delay: .05s; }
.bs-chip:nth-child(2) { transition-delay: .15s; }
.bs-chip:nth-child(3) { transition-delay: .25s; }
.bs-chip:nth-child(4) { transition-delay: .35s; }
.bs-chip:nth-child(5) { transition-delay: .45s; }
.chip-1 { top: 14%; left: 12%; }
.chip-2 { top: 12%; right: 12%; }
.chip-3 { top: 46%; left: 6%; }
.chip-4 { top: 48%; right: 6%; }
.chip-5 { bottom: 22%; left: 50%; transform: translateX(-50%) scale(.8); }
.box-story.revealed .chip-5 { transform: translateX(-50%) scale(1); }
@media (max-width: 991px) {
	.bs-chip { min-width: 160px; max-width: 190px; padding: 12px; }
	.bs-chip p { display: none; }
	.chip-1 { left: 4%; } .chip-2 { right: 4%; }
	.chip-3 { left: 2%; } .chip-4 { right: 2%; }
	.box-story-copy { max-width: 300px; }
}

.box-story-progress {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink-3);
	font-size: var(--text-xs);
	letter-spacing: .28em;
	text-transform: uppercase;
}
.box-story-progress .bar {
	width: 130px;
	height: 2px;
	background: var(--line);
	border-radius: 2px;
	overflow: hidden;
}
.box-story-progress .bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--grad-brand);
	transition: width .15s linear;
}

/* ---------- workflow steps ---------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-4); }
.step {
	display: grid;
	grid-template-columns: 90px 1fr 300px;
	gap: var(--sp-5);
	align-items: center;
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-panel);
	transition: border-color .25s ease, transform .25s ease;
}
.step:hover { border-color: rgba(40, 211, 180, .4); transform: translateX(6px); }
.step .num {
	counter-increment: step;
	font-family: var(--font-display);
	font-size: 2.6rem;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--teal);
}
.step .num::before { content: "0" counter(step); }
.step h3 { margin-bottom: var(--sp-2); }
.step img {
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	height: 150px;
	width: 100%;
	object-fit: cover;
	object-position: top;
	background: var(--bg-0);
}
.step .btn--link { margin-top: var(--sp-2); }
@media (max-width: 991px) {
	.step { grid-template-columns: 1fr; gap: var(--sp-3); }
	.step img { order: -1; height: 170px; }
}

/* ---------- metrics band ---------- */
.metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
	text-align: center;
}
@media (max-width: 991px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric {
	padding: var(--sp-5) var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-panel);
}
.metric b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.6vw, 3rem);
	background: var(--grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 6px;
}
.metric > span { color: var(--ink-3); font-size: var(--text-sm); }
.metric b span { font: inherit; color: inherit; }

/* ---------- comparison table ---------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.compare {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
	font-size: var(--text-sm);
}
.compare th, .compare td { padding: 16px 20px; text-align: left; }
.compare thead th {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-md);
	border-bottom: 1px solid var(--line-strong);
	position: sticky;
	top: 0;
	background: var(--bg-2);
}
.compare thead th:nth-child(2) { color: var(--teal); }
.compare thead th:nth-child(3) { color: var(--ink-3); }
.compare tbody tr { border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child { border-bottom: 0; }
.compare tbody tr:hover { background: var(--glass); }
.compare td:first-child { color: var(--ink); font-weight: 600; }
.compare .yes { color: var(--teal); }
.compare .no { color: var(--pink); }
.compare td small { display: block; color: var(--ink-3); font-weight: 400; }

/* edition table */
.editions thead th { text-align: center; }
.editions td { text-align: center; }
.editions td:first-child { text-align: left; }
.editions .group td {
	background: var(--bg-1);
	color: var(--teal);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ---------- pricing ---------- */
.price-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
	align-items: stretch;
}
@media (max-width: 991px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { display: flex; flex-direction: column; }
.price-card.featured {
	border-color: var(--teal);
	box-shadow: var(--shadow-glow-teal);
}
.price-card .edition {
	font-family: var(--font-display);
	color: var(--ink);
	font-size: 1.3rem;
}
.price-card .amount {
	font-family: var(--font-display);
	font-size: 2.4rem;
	margin: var(--sp-3) 0 2px;
	color: var(--ink);
}
.price-card .amount small { font-size: 1rem; color: var(--ink-3); font-family: var(--font-body); }
.price-card .for { color: var(--ink-3); font-size: var(--text-sm); margin-bottom: var(--sp-4); }
.price-card ul { margin-bottom: var(--sp-5); display: grid; gap: 10px; }
.price-card ul li {
	font-size: var(--text-sm);
	color: var(--ink-2);
	padding-left: 26px;
	position: relative;
}
.price-card ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 4px;
	width: 15px; height: 15px;
	border-radius: 50%;
	background: var(--teal-soft);
	box-shadow: inset 0 0 0 1px var(--teal);
}
.price-card ul li::after {
	content: "";
	position: absolute;
	left: 4px; top: 8px;
	width: 7px; height: 4px;
	border-left: 1.6px solid var(--teal);
	border-bottom: 1.6px solid var(--teal);
	transform: rotate(-45deg);
}
.price-card ul li.na { opacity: .38; }
.price-card ul li.na::after { display: none; }
.price-card ul li.na::before { box-shadow: inset 0 0 0 1px var(--ink-3); background: transparent; }
.price-card .btn { margin-top: auto; }
.price-note { text-align: center; color: var(--ink-3); font-size: var(--text-sm); max-width: 760px; margin: var(--sp-5) auto 0; }

/* ---------- FAQ ---------- */
.faq-search { max-width: 620px; margin: 0 auto var(--sp-6); position: relative; }
.faq-search input {
	width: 100%;
	background: var(--glass);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	color: var(--ink);
	font: inherit;
	padding: 16px 26px 16px 54px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-search input:focus { border-color: var(--teal); box-shadow: var(--shadow-glow-teal); }
.faq-search .mag {
	position: absolute;
	left: 22px; top: 50%;
	width: 15px; height: 15px;
	border: 2px solid var(--ink-3);
	border-radius: 50%;
	transform: translateY(-62%);
}
.faq-search .mag::after {
	content: "";
	position: absolute;
	width: 8px; height: 2px;
	background: var(--ink-3);
	transform: rotate(45deg);
	bottom: -3px; right: -6px;
}
.faq-results {
	position: absolute;
	top: calc(100% + 10px);
	left: 0; right: 0;
	background: var(--bg-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	z-index: 30;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.faq-results a {
	display: block;
	padding: 14px 20px;
	font-size: var(--text-sm);
	color: var(--ink-2);
	border-bottom: 1px solid var(--line);
}
.faq-results a:last-child { border-bottom: 0; }
.faq-results a:hover { background: var(--teal-soft); color: var(--teal); }

.faq-tabs {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--sp-6);
}
.faq-tab {
	padding: 11px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	color: var(--ink-2);
	transition: all .2s ease;
}
.faq-tab:hover { border-color: var(--teal); color: var(--teal); }
.faq-tab.active { background: var(--teal); border-color: var(--teal); color: #06251e; }
.faq-panel { display: none; max-width: 860px; margin: 0 auto; }
.faq-panel.active { display: block; }

.acc-item { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--sp-3); background: var(--grad-panel); overflow: hidden; }
.acc-item.open { border-color: rgba(40, 211, 180, .4); }
.acc-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	text-align: left;
	padding: 20px 24px;
	font-family: var(--font-display);
	font-size: var(--text-md);
	color: var(--ink);
}
.acc-q .chev {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	position: relative;
	transition: all .25s ease;
}
.acc-q .chev::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 8px; height: 8px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translate(-50%, -68%) rotate(45deg);
	transition: transform .25s ease;
}
.acc-item.open .acc-q .chev { background: var(--teal); border-color: var(--teal); color: #06251e; }
.acc-item.open .acc-q .chev::before { transform: translate(-50%, -35%) rotate(-135deg); }
.acc-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}
.acc-a > div { overflow: hidden; }
.acc-item.open .acc-a { grid-template-rows: 1fr; }
.acc-a p, .acc-a ul, .acc-a ol { padding: 0 24px; font-size: var(--text-sm); }
.acc-a > div > :first-child { padding-top: 4px; }
.acc-a > div > :last-child { padding-bottom: 22px; }
.acc-a ul li, .acc-a ol li { color: var(--ink-2); padding: 3px 0 3px 18px; position: relative; }
.acc-a ul li::before, .acc-a ol li::before {
	content: "";
	position: absolute;
	left: 0; top: 12px;
	width: 6px; height: 6px;
	border-radius: 2px;
	background: var(--teal);
}
.acc-a a { color: var(--teal); }

/* ---------- forms ---------- */
.field { position: relative; margin-bottom: var(--sp-4); }
.field input, .field textarea, .field select {
	width: 100%;
	background: var(--glass);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	color: var(--ink);
	font: inherit;
	padding: 16px 18px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
	border-color: var(--teal);
	box-shadow: var(--shadow-glow-teal);
}
.field label {
	position: absolute;
	left: 14px; top: 16px;
	padding: 0 6px;
	color: var(--ink-3);
	font-size: var(--text-sm);
	pointer-events: none;
	transition: all .18s ease;
	background: transparent;
}
.field input:focus + label, .field input.filled + label,
.field textarea:focus + label, .field textarea.filled + label {
	top: -9px;
	font-size: .74rem;
	color: var(--teal);
	background: var(--bg-1);
	border-radius: 4px;
}
.field select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2328D3B4' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	cursor: pointer;
}
.field select option { background: var(--bg-2); color: var(--ink); }
.form-status { display: none; margin-top: var(--sp-3); font-size: var(--text-sm); }
.form-status.ok { display: block; color: var(--teal); }
.form-status.err { display: block; color: var(--pink); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* range sliders (ROI) */
input[type="range"].range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--teal) var(--fill, 50%), var(--bg-2) var(--fill, 50%));
	border: 1px solid var(--line);
	outline: none;
}
input[type="range"].range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--teal);
	border: 3px solid #0b2b24;
	box-shadow: 0 0 0 1.5px var(--teal), 0 0 16px rgba(40, 211, 180, .5);
	cursor: grab;
}
input[type="range"].range::-moz-range-thumb {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--teal);
	border: 3px solid #0b2b24;
	box-shadow: 0 0 0 1.5px var(--teal), 0 0 16px rgba(40, 211, 180, .5);
	cursor: grab;
}

/* ---------- CTA banner ---------- */
.cta-banner {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--sp-7) var(--sp-5);
	text-align: center;
	overflow: hidden;
	background:
		radial-gradient(60% 120% at 50% 130%, var(--blue-soft), transparent 70%),
		radial-gradient(50% 110% at 50% -30%, var(--teal-soft), transparent 70%),
		var(--bg-1);
}
.cta-banner h2 { margin-bottom: var(--sp-3); }
.cta-banner p { max-width: 56ch; margin: 0 auto var(--sp-5); }
.cta-banner .row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer {
	border-top: 1px solid var(--line);
	background: var(--bg-1);
	padding: var(--sp-7) 0 var(--sp-5);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: var(--sp-5);
	margin-bottom: var(--sp-6);
}
@media (max-width: 991px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 54px; margin-bottom: var(--sp-3); }
.footer-brand p { font-size: var(--text-sm); max-width: 30ch; }
.footer h5 {
	font-size: var(--text-sm);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: var(--sp-3);
}
.footer ul { display: grid; gap: 9px; }
.footer ul a { font-size: var(--text-sm); color: var(--ink-3); transition: color .2s ease; }
.footer ul a:hover { color: var(--teal); }
.footer-legal {
	border-top: 1px solid var(--line);
	padding-top: var(--sp-4);
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	font-size: var(--text-xs);
	color: var(--ink-3);
}

/* ---------- page hero (subpages) ---------- */
.page-hero {
	padding: calc(var(--nav-h) + var(--sp-7)) 0 var(--sp-6);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(46% 60% at 50% -10%, var(--blue-soft), transparent 70%);
	pointer-events: none;
}
.page-hero .kicker { justify-content: center; }
.page-hero p { max-width: 62ch; margin: var(--sp-3) auto 0; font-size: var(--text-lg); }

/* ---------- legal layout ---------- */
.legal-grid {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--sp-6);
	align-items: start;
}
@media (max-width: 860px) { .legal-grid { grid-template-columns: 1fr; } }
.legal-nav {
	position: sticky;
	top: calc(var(--nav-h) + 20px);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.legal-nav a {
	display: block;
	padding: 14px 18px;
	font-size: var(--text-sm);
	color: var(--ink-2);
	border-bottom: 1px solid var(--line);
}
.legal-nav a:last-child { border-bottom: 0; }
.legal-nav a:hover { color: var(--teal); }
.legal-nav a.active {
	color: var(--teal);
	background: var(--teal-soft);
	border-left: 3px solid var(--teal);
}
.legal-body h4 { color: var(--teal); margin: var(--sp-5) 0 var(--sp-2); font-size: 1.15rem; }
.legal-body h4:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: var(--text-sm); margin-bottom: 12px; }
.legal-body ul, .legal-body ol { padding-left: 22px; margin-bottom: 12px; }
.legal-body ul li { list-style: disc; color: var(--ink-2); }
.legal-body ol li { list-style: decimal; color: var(--ink-2); }
.legal-body a { color: var(--teal); }
.legal-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--sp-3) 0; }
.legal-body table td, .legal-body table th { border: 1px solid var(--line); padding: 10px 12px; color: var(--ink-2); }

/* ---------- modals ---------- */
.modal {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: none;
	align-items: flex-start;
	justify-content: center;
	background: rgba(5, 4, 18, .84);
	backdrop-filter: blur(6px);
	overflow-y: auto;
	padding: 6vh 20px 40px;
}
.modal.open { display: flex; }
.modal-inner {
	position: relative;
	background: var(--bg-1);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	max-width: 1020px;
	width: 100%;
	padding: var(--sp-6);
	box-shadow: var(--shadow-card);
}
.modal-close {
	position: absolute;
	top: 16px; right: 18px;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	font-size: 20px;
	line-height: 1;
	color: var(--ink-2);
	transition: all .2s ease;
}
.modal-close:hover { color: var(--teal); border-color: var(--teal); transform: rotate(90deg); }

.video-frame { aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-md); overflow: hidden; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.modal--video .modal-inner { max-width: 1100px; padding: var(--sp-4); }

/* ---------- cookie bar ---------- */
.cookie-bar {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4000;
	display: none;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
	max-width: min(720px, calc(100vw - 32px));
	background: var(--bg-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	padding: 16px 22px;
	font-size: var(--text-sm);
	color: var(--ink-2);
	box-shadow: var(--shadow-card);
}
.cookie-bar.visible { display: flex; }
.cookie-bar a { color: var(--teal); text-decoration: underline; }
.cookie-bar .row { display: flex; gap: 10px; margin-left: auto; }
.cookie-bar button {
	padding: 9px 20px;
	border-radius: var(--r-sm);
	font-size: var(--text-sm);
}
.cookie-bar button.ok { background: var(--teal); color: #06251e; font-weight: 700; }
.cookie-bar button.no { border: 1px solid var(--line-strong); color: var(--ink-2); }

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	.rv { opacity: 1; transform: none; }
}

/* ---------- helpers ---------- */
.tc { text-align: center; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-6);
	align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .media {
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	overflow: hidden;
	background: var(--bg-2);
}
.badge-dev {
	display: inline-block;
	color: var(--warm);
	background: rgba(255, 180, 84, .12);
	border: 1px solid rgba(255, 180, 84, .35);
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--r-pill);
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--teal);
	color: #06251e;
	padding: 12px 20px;
	border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

/* under-dev diagonal ribbon for suite cards */
.ribbon-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ribbon {
	position: absolute;
	top: 22px; right: -44px;
	transform: rotate(38deg);
	background: rgba(255, 180, 84, .16);
	border-block: 1px solid rgba(255, 180, 84, .4);
	color: var(--warm);
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 6px 48px;
}