/* =========================================================================
   WriteLitely AI — landing page
   Design tokens carried over from the original Tailwind theme.
   ========================================================================= */

/* ---------- fonts (self-hosted variable woff2, latin subset) ---------- */

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/dm-sans-v17-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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: 600 700;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-v22-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--background: 0 0% 100%;
	--foreground: 220 20% 14%;
	--primary: 280 18% 51%;
	--primary-foreground: 0 0% 100%;
	--primary-glow: 280 30% 65%;
	--secondary: 275 15% 95%;
	--secondary-foreground: 280 18% 35%;
	--muted: 270 12% 96%;
	--muted-foreground: 220 10% 42%;
	--accent: 280 30% 92%;
	--border: 270 12% 90%;

	--radius: 0.75rem;

	--gradient-primary: linear-gradient(135deg, hsl(280, 18%, 51%), hsl(280, 30%, 65%));
	--shadow-soft: 0 4px 20px -4px hsl(280 18% 51% / 0.12);
	--shadow-glow: 0 0 40px -8px hsl(280 18% 51% / 0.3);
	--shadow-elevated: 0 8px 32px -8px hsl(280 18% 51% / 0.18), 0 2px 8px -2px hsl(220 20% 14% / 0.06);

	--section-warm: 275 20% 97%;
	--section-cool: 265 18% 96%;
	--section-deep: 270 22% 94%;

	--header-height: 4rem;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 18px;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: hsl(var(--foreground));
	background-color: hsl(var(--background));
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3 {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	margin: 0;
	line-height: 1.2;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

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

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- layout helpers ---------- */

.container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media (min-width: 640px) {
	.container { max-width: 640px; }
}

@media (min-width: 768px) {
	.container { max-width: 768px; }
}

@media (min-width: 1024px) {
	.container { max-width: 1024px; }
}

@media (min-width: 1280px) {
	.container { max-width: 1280px; }
}

@media (min-width: 1400px) {
	.container { max-width: 1400px; }
}

.section {
	position: relative;
	overflow: hidden;
	padding-block: 6rem;
	/* skip layout/paint (and orb animation) for off-screen sections */
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

.section__inner {
	position: relative;
}

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

.eyebrow {
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: 0.375rem 1rem;
	border: 1px solid hsl(var(--primary) / 0.2);
	border-radius: 999px;
	background-color: hsl(var(--accent));
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--primary));
}

.section-head {
	margin-inline: auto;
	margin-bottom: 3.5rem;
	text-align: center;
}

.section-head h2 {
	margin-bottom: 1rem;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.2;
}

.section-head p {
	color: hsl(var(--muted-foreground));
	line-height: 1.625;
}

@media (min-width: 640px) {
	.section-head h2 { font-size: 2.25rem; }
}

.icon {
	display: block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- decorative background layers ---------- */

.blobs,
.orbs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.blobs span {
	position: absolute;
	border-radius: 50%;
}

.orbs i {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, hsl(280 30% 60% / 0.13) 0%, hsl(280 20% 55% / 0.1) 40%, transparent 70%);
	filter: blur(30px);
}

.orbs i:nth-child(1) { left: 12%; top: 16%; width: 230px; height: 230px; animation: orb-float-0 14s 0s ease-in-out infinite; }
.orbs i:nth-child(2) { left: 68%; top: 12%; width: 310px; height: 310px; animation: orb-float-1 18s 2.4s ease-in-out infinite; }
.orbs i:nth-child(3) { left: 82%; top: 62%; width: 260px; height: 260px; animation: orb-float-2 16s 3.6s ease-in-out infinite; }
.orbs i:nth-child(4) { left: 20%; top: 78%; width: 340px; height: 340px; animation: orb-float-1 20s 0.8s ease-in-out infinite; }

/* ---------- animation ---------- */

@keyframes scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

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

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

@keyframes zoom-in {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: none; }
}

@keyframes ping {
	75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes pulse {
	50% { opacity: 0.5; }
}

@keyframes orb-float-0 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25% { transform: translate(40px, -30px) scale(1.1); }
	50% { transform: translate(-20px, -50px) scale(0.95); }
	75% { transform: translate(30px, 20px) scale(1.05); }
}

@keyframes orb-float-1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(-50px, 20px) scale(1.08); }
	66% { transform: translate(30px, -40px) scale(0.92); }
}

@keyframes orb-float-2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	20% { transform: translate(25px, 35px) scale(1.12); }
	50% { transform: translate(-35px, -15px) scale(0.9); }
	80% { transform: translate(15px, -30px) scale(1.06); }
}

.float {
	animation: float 5s ease-in-out infinite;
}

/* Scroll-triggered reveal — see main.js */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	transition-delay: var(--reveal-delay, 0s);
}

.reveal--left { transform: translateX(-24px); }
.reveal--right { transform: translateX(24px); }
.reveal--zoom { transform: scale(0.92); }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.reveal,
	.reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.float,
	.orbs i,
	.banner__track,
	.video-frame__ping,
	.video-frame__pulse,
	.hero__copy,
	.hero__visual {
		animation: none !important;
	}
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	border-radius: calc(var(--radius) - 2px);
	padding-inline: 1rem;
	height: 2.5rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s, transform 0.2s, background-color 0.2s, color 0.2s;
}

.btn .icon {
	width: 1rem;
	height: 1rem;
}

.btn--hero {
	background: var(--gradient-primary);
	color: hsl(var(--primary-foreground));
	box-shadow: var(--shadow-soft);
}

.btn--hero:hover {
	box-shadow: var(--shadow-glow);
	transform: scale(1.02);
}

.btn--outline {
	background: transparent;
	border: 2px solid hsl(var(--primary));
	color: hsl(var(--primary));
}

.btn--outline:hover {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.btn--sm {
	height: 2.25rem;
	padding-inline: 0.75rem;
}

.btn--lg {
	height: 3rem;
	padding-inline: 2rem;
	border-radius: var(--radius);
	font-size: 1rem;
}

.btn--xl {
	height: 3.5rem;
	gap: 0.75rem;
	padding-inline: 2.5rem;
	border-radius: var(--radius);
	font-size: 1.125rem;
}

.btn--xl .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.cta-note {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

/* =========================================================================
   Header
   ========================================================================= */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	border-bottom: 1px solid hsl(var(--border));
	background-color: hsl(var(--background) / 0.8);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
}

.header__logo {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	text-decoration: none;
}

.header__logo small {
	font-size: 1rem;
	font-weight: 500;
	color: hsl(var(--muted-foreground));
}

.header__nav {
	display: none;
	align-items: center;
	gap: 0.75rem;
}

.header__toggle {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: hsl(var(--foreground));
	cursor: pointer;
}

.header__toggle .icon {
	width: 1.333rem;
	height: 1.333rem;
}

.header__toggle .icon--close,
.header[data-open='true'] .header__toggle .icon--open {
	display: none;
}

.header[data-open='true'] .header__toggle .icon--close {
	display: block;
}

.header__mobile {
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	border-top: 1px solid hsl(var(--border));
	background-color: hsl(var(--background));
}

.header[data-open='true'] .header__mobile {
	display: flex;
}

@media (min-width: 768px) {
	.header__nav { display: flex; }
	.header__toggle,
	.header[data-open='true'] .header__mobile { display: none; }
}

.page {
	padding-top: var(--header-height);
}

/* =========================================================================
   Scrolling banner
   ========================================================================= */

.banner {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid hsl(var(--border));
	background-color: hsl(var(--secondary));
	padding-block: 0.75rem;
}

.banner__track {
	display: flex;
	width: max-content;
	gap: 2rem;
	animation: scroll-left 30s linear infinite;
}

.banner__track span {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--secondary-foreground));
	white-space: nowrap;
}

.banner__track span::before {
	content: '';
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: hsl(var(--primary));
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
	padding-block: 6rem;
}

.hero__mesh {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 900px;
	height: 600px;
	border-radius: 50%;
	background-color: hsl(var(--primary) / 0.06);
	filter: blur(70px);
}

.hero__grid {
	display: grid;
	gap: 3.5rem;
}

.hero__copy {
	animation: rise 0.7s ease-out both;
}

.hero__badge {
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: 0.375rem 1rem;
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	background-color: hsl(var(--secondary));
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--secondary-foreground));
}

.hero h1 {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.hero__lede {
	margin-top: 1.5rem;
	max-width: 28rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.hero__callout {
	margin-top: 1.5rem;
	max-width: 32rem;
	padding: 1.25rem;
	border: 1px solid hsl(var(--primary) / 0.2);
	border-radius: var(--radius);
	background: linear-gradient(to right, hsl(var(--primary) / 0.05), hsl(var(--primary) / 0.1));
	font-weight: 500;
	line-height: 1.625;
}

.hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

.hero__tags li {
	padding: 0.375rem 0.75rem;
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	background-color: hsl(var(--background));
	box-shadow: var(--shadow-soft);
	font-size: 0.75rem;
	font-weight: 500;
}

.hero__actions {
	margin-top: 2rem;
}

.hero__actions .cta-note {
	margin-top: 0.75rem;
	font-size: 0.75rem;
}

.hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
	animation: zoom-in 0.8s ease-out 0.2s both;
}

.hero__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	background-color: hsl(var(--primary) / 0.12);
	filter: blur(35px);
}

.hero__visual img {
	position: relative;
	width: 100%;
	max-width: 28rem;
	filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
}

@media (min-width: 640px) {
	.hero h1 { font-size: 3rem; }
}

@media (min-width: 1024px) {
	.hero { padding-block: 8rem; }
	.hero h1 { font-size: 3.75rem; }

	.hero__grid {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* =========================================================================
   Demo video
   ========================================================================= */

.demo {
	background: linear-gradient(to bottom, hsl(var(--section-cool)), hsl(var(--background)), hsl(var(--section-cool)));
}

.demo__ring {
	position: absolute;
	bottom: -5rem;
	right: 25%;
	width: 10rem;
	height: 10rem;
	border: 2px solid hsl(var(--primary) / 0.08);
	border-radius: 50%;
	pointer-events: none;
}

.demo .section-head {
	max-width: 42rem;
	margin-bottom: 3rem;
}

.demo .section-head p {
	max-width: 28rem;
	margin-inline: auto;
}

.demo__grid {
	display: grid;
	gap: 3rem;
	align-items: start;
}

.step-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.75rem;
	border-bottom: 1px solid hsl(var(--border));
}

.step-list li:last-child {
	border-bottom: 0;
}

.step-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: calc(var(--radius) - 2px);
	background: var(--gradient-primary);
	color: hsl(var(--primary-foreground));
}

.step-list__icon .icon {
	width: 0.833rem;
	height: 0.833rem;
}

.step-list__label {
	font-size: 0.875rem;
	font-weight: 500;
}

.step-list__num {
	margin-left: auto;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: hsl(var(--muted-foreground) / 0.5);
}

.demo__video {
	position: relative;
}

.demo__video-glow {
	position: absolute;
	inset: -2rem;
	border-radius: 50%;
	background-color: hsl(var(--primary) / 0.08);
	filter: blur(40px);
	pointer-events: none;
}

.video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid hsl(var(--border));
	border-radius: 1rem;
	box-shadow: var(--shadow-elevated);
	background: linear-gradient(to bottom right, hsl(var(--secondary)), hsl(var(--muted)), hsl(var(--secondary) / 0.6));
}

.video-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-frame__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background-color: hsl(var(--secondary));
	background-image: linear-gradient(to bottom right, hsl(var(--secondary)), hsl(var(--muted)), hsl(var(--secondary) / 0.6));
	font-family: inherit;
	color: inherit;
	cursor: pointer;
}

.video-frame__overlay[hidden] {
	display: none;
}

.video-frame__corner {
	position: absolute;
	width: 1rem;
	height: 1rem;
	border: 0 solid hsl(var(--primary) / 0.4);
}

.video-frame__corner--tl { top: 0.75rem; left: 0.75rem; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 0.25rem; }
.video-frame__corner--tr { top: 0.75rem; right: 0.75rem; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 0.25rem; }
.video-frame__corner--bl { bottom: 0.75rem; left: 0.75rem; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 0.25rem; }
.video-frame__corner--br { bottom: 0.75rem; right: 0.75rem; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 0.25rem; }

.video-frame__overlay > span {
	display: block;
	text-align: center;
}

.video-frame__play {
	display: block;
	position: relative;
	width: 5rem;
	height: 5rem;
	margin: 0 auto 1.25rem;
}

.video-frame__ping,
.video-frame__pulse {
	position: absolute;
	border-radius: 50%;
}

.video-frame__ping {
	inset: 0;
	background-color: hsl(var(--primary) / 0.2);
	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.video-frame__pulse {
	inset: 0.5rem;
	background-color: hsl(var(--primary) / 0.15);
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.video-frame__disc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: var(--gradient-primary);
	box-shadow: var(--shadow-glow);
	color: hsl(var(--primary-foreground));
}

.video-frame__disc .icon {
	width: 1.556rem;
	height: 1.556rem;
	margin-left: 0.25rem;
	fill: currentColor;
	stroke: none;
}

.video-frame__title {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
}

.video-frame__meta {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
}

@media (min-width: 1024px) {
	.demo__grid {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

/* =========================================================================
   Data flow
   ========================================================================= */

.flow {
	background: linear-gradient(to bottom right, hsl(var(--section-warm)), hsl(var(--background)), hsl(var(--section-deep)));
}

.flow .blobs span:nth-child(1) { top: -5rem; left: 2.5rem; width: 18rem; height: 18rem; background-color: #38bdf8; opacity: 0.15; filter: blur(55px); }
.flow .blobs span:nth-child(2) { top: 10rem; right: 2.5rem; width: 20rem; height: 20rem; background-color: #e879f9; opacity: 0.15; filter: blur(60px); }
.flow .blobs span:nth-child(3) { bottom: 0; left: 33%; width: 18rem; height: 18rem; background-color: #34d399; opacity: 0.15; filter: blur(55px); }

.flow .section-head {
	max-width: 48rem;
}

.flow__eyebrow {
	border-color: hsl(var(--primary) / 0.3);
	background: linear-gradient(to right, hsl(var(--primary) / 0.15), hsl(291 91% 61% / 0.15), hsl(199 89% 48% / 0.15));
	box-shadow: var(--shadow-soft);
}

.flow__wrap {
	max-width: 72rem;
	margin-inline: auto;
}

.flow__steps {
	display: grid;
	gap: 1rem;
}

.flow-card {
	position: relative;
}

.flow-card__glow {
	position: absolute;
	inset: -0.25rem;
	border-radius: 1.5rem;
	background-color: hsl(var(--primary) / 0.2);
	filter: blur(20px);
	opacity: 0.6;
	transition: opacity 0.3s;
	pointer-events: none;
}

.flow-card:hover .flow-card__glow {
	opacity: 1;
}

.flow-card__body {
	position: relative;
	height: 100%;
	padding: 1.5rem;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 1rem;
	background-color: rgb(255 255 255 / 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: var(--shadow-elevated), 0 0 0 1px hsl(var(--primary) / 0.3);
	transition: transform 0.3s;
}

.flow-card:hover .flow-card__body {
	transform: translateY(-0.25rem);
}

.flow-card__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.flow-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: linear-gradient(to bottom right, hsl(var(--primary)), hsl(var(--primary-glow)));
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
	color: #fff;
}

.flow-card__icon .icon {
	width: 1.111rem;
	height: 1.111rem;
}

.flow-card__step {
	padding: 0.25rem 0.5rem;
	border-radius: calc(var(--radius) - 4px);
	background-color: hsl(var(--primary) / 0.1);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.611rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: hsl(var(--primary));
}

.flow-card h3 {
	margin-bottom: 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.375;
}

.flow-card p {
	font-size: 0.875rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.flow-card__arrow {
	display: none;
	position: absolute;
	top: 50%;
	right: -0.75rem;
	z-index: 10;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--gradient-primary);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
	color: hsl(var(--primary-foreground));
}

.flow-card__arrow .icon {
	width: 0.722rem;
	height: 0.722rem;
}

.promises {
	margin-top: 3rem;
	padding: 1.5rem;
	border: 1px solid hsl(var(--primary) / 0.2);
	border-radius: 1rem;
	background: linear-gradient(to right, hsl(var(--primary) / 0.1), hsl(291 91% 61% / 0.1), hsl(199 89% 48% / 0.1));
	box-shadow: var(--shadow-soft);
}

.promises__title {
	margin-bottom: 1rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 600;
}

.promises ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.promises li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	background-color: hsl(var(--background) / 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	font-size: 0.875rem;
	font-weight: 500;
}

.promises li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--gradient-primary);
	color: hsl(var(--primary-foreground));
}

.promises li .icon {
	width: 0.667rem;
	height: 0.667rem;
}

@media (min-width: 768px) {
	.flow__steps {
		grid-template-columns: repeat(5, 1fr);
		gap: 0.75rem;
	}

	.flow-card__arrow { display: flex; }
	.flow-card:last-child .flow-card__arrow { display: none; }
}

/* =========================================================================
   Data security
   ========================================================================= */

.security {
	background-color: hsl(var(--section-warm));
}

.security__panel {
	position: relative;
	overflow: hidden;
	border: 1px solid hsl(var(--border));
	border-radius: 1.5rem;
	background-color: hsl(var(--secondary) / 0.4);
}

.security__panel > .blobs span:nth-child(1) { top: -5rem; right: -5rem; width: 16rem; height: 16rem; background-color: hsl(var(--primary) / 0.1); filter: blur(40px); }
.security__panel > .blobs span:nth-child(2) { bottom: -5rem; left: -5rem; width: 12rem; height: 12rem; background-color: hsl(var(--primary) / 0.06); filter: blur(30px); }

.security__grid {
	position: relative;
	display: grid;
}

.security__col {
	padding: 2.5rem;
}

.security h2 {
	margin-bottom: 0.75rem;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.2;
}

.security__lede {
	margin-bottom: 2.5rem;
	max-width: 20rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.security-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid hsl(var(--border));
}

.security-list li:last-child {
	border-bottom: 0;
}

.security-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: calc(var(--radius) - 2px);
	background: var(--gradient-primary);
	color: hsl(var(--primary-foreground));
}

.security-list__icon .icon {
	width: 0.944rem;
	height: 0.944rem;
}

.security-list__title {
	flex: 1;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
}

.security-list__detail {
	padding: 0.25rem 0.5rem;
	border-radius: calc(var(--radius) - 4px);
	background-color: hsl(var(--muted));
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
}

.security__aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 1px solid hsl(var(--border));
}

.security__aside img {
	width: 10rem;
	margin: 0 auto 2rem;
	filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1));
}

.security__aside h3 {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.security__aside p {
	font-size: 0.875rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.security__trust {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 0.625rem 1.5rem;
	border-radius: 999px;
	background: var(--gradient-primary);
	box-shadow: var(--shadow-soft);
	font-size: 0.875rem;
	font-weight: 600;
	color: hsl(var(--primary-foreground));
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.security__trust:hover {
	box-shadow: var(--shadow-glow);
	transform: scale(1.02);
}

.security__trust .icon {
	width: 0.833rem;
	height: 0.833rem;
}

.security__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.security__badges li {
	padding: 0.25rem 0.75rem;
	border: 1px solid hsl(var(--primary) / 0.2);
	border-radius: 999px;
	background-color: hsl(var(--accent) / 0.6);
	font-size: 0.75rem;
	font-weight: 500;
	color: hsl(var(--primary) / 0.8);
}

.security__contact {
	margin-top: 1.5rem;
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
}

.security__contact a,
.footer a {
	/* darker than --primary: small link text needs 4.5:1 on white and --section-warm */
	color: hsl(280 18% 46%);
	text-decoration: none;
}

.security__contact a:hover,
.footer a:hover {
	text-decoration: underline;
}

/* Narrow phones: the mono detail chip squeezes the title into a column, so stack them. */
@media (max-width: 480px) {
	.security-list li {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		row-gap: 0.25rem;
		align-items: center;
	}

	.security-list__icon { grid-row: span 2; }
	.security-list__detail { justify-self: start; }
}

@media (min-width: 640px) {
	.security h2 { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
	.security__grid { grid-template-columns: 1fr 1fr; }
	.security__col { padding: 3.5rem; }

	.security__aside {
		border-top: 0;
		border-left: 1px solid hsl(var(--border));
	}
}

/* =========================================================================
   Beta
   ========================================================================= */

.beta {
	background-color: hsl(var(--section-warm));
}

.beta .blobs span:nth-child(1) { top: -6rem; left: -6rem; width: 18rem; height: 18rem; background-color: hsl(var(--primary) / 0.08); filter: blur(55px); }
.beta .blobs span:nth-child(2) { bottom: -6rem; right: -6rem; width: 18rem; height: 18rem; background-color: hsl(var(--primary) / 0.08); filter: blur(55px); }

.beta .section-head {
	max-width: 42rem;
}

.beta .section-head p {
	font-size: 1.125rem;
}

.beta__grid {
	display: grid;
	gap: 1.5rem;
	max-width: 64rem;
	margin-inline: auto;
}

.beta-card {
	padding: 2rem;
	border: 1px solid hsl(var(--border));
	border-radius: 1.5rem;
	background-color: hsl(var(--background));
}

.beta-card--accent {
	padding: 1px;
	border: 0;
	background: var(--gradient-primary);
	box-shadow: var(--shadow-glow);
}

.beta-card--accent > div {
	height: 100%;
	padding: 2rem;
	border-radius: calc(1.5rem - 1px);
	background-color: hsl(var(--background));
}

.beta-card h3 {
	margin-bottom: 1.5rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.beta-card ul {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.beta-card li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.beta-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: calc(var(--radius) - 2px);
	background: var(--gradient-primary);
	color: hsl(var(--primary-foreground));
}

.beta-card__icon .icon {
	width: 1rem;
	height: 1rem;
}

.beta-card li strong {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.beta-card li p {
	font-size: 0.875rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.beta__cta {
	margin-top: 3rem;
	text-align: center;
}

@media (min-width: 768px) {
	.beta__grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Bottom CTA
   ========================================================================= */

.cta {
	border-top: 1px solid hsl(var(--border));
	background: linear-gradient(to bottom right, hsl(var(--section-deep)), hsl(var(--section-cool)), hsl(var(--section-deep)));
}

.cta__glow {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 400px;
	border-radius: 50%;
	background-color: hsl(var(--primary) / 0.08);
	filter: blur(60px);
	pointer-events: none;
}

.cta__grid {
	display: grid;
	gap: 3rem;
	align-items: center;
	max-width: 56rem;
	margin-inline: auto;
}

.cta h2 {
	margin-bottom: 1rem;
	font-size: 1.875rem;
	font-weight: 700;
}

.cta__lede {
	max-width: 32rem;
	margin-bottom: 2rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
}

.cta__visual {
	display: none;
	justify-content: center;
}

.cta__visual img {
	width: 14rem;
	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.12));
}

@media (min-width: 640px) {
	.cta h2 { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
	.cta__grid { grid-template-columns: 1fr auto; }
	.cta__visual { display: flex; }
}

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
	border-top: 1px solid hsl(var(--border));
	background-color: hsl(var(--background));
	padding-block: 3rem;
}

.footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.footer__cols {
	display: grid;
	gap: 2rem;
	text-align: center;
}

.footer__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.footer__col h3 {
	font-size: 1rem;
	font-weight: 600;
}

.footer__col nav {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer__col a {
	font-size: 0.875rem;
}

.footer__social {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.footer__social a {
	color: hsl(var(--muted-foreground));
	transition: color 0.2s;
}

.footer__social a:hover {
	color: hsl(var(--primary));
}

.footer__social .icon {
	width: 1.222rem;
	height: 1.222rem;
}

.footer__rule {
	width: 100%;
	max-width: 28rem;
	height: 1px;
	background-color: hsl(var(--border));
}

.footer__legal {
	text-align: center;
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

@media (min-width: 640px) {
	.footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.footer__cols { grid-template-columns: repeat(4, 1fr); }
}