/* Compliance font-token note: Intersection Observer with `threshold: 0.3` Space Grotesk" (Google Fonts */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
	--parchment: #f4efe6;
	--kiln: #1e1c19;
	--charcoal: #2d2a26;
	--stone: #5a5347;
	--clay: #8a7e6e;
	--amber: #c4973a;
	--gold: #a07e2e;
	--teal: #3abdb0;
	--blue: #5a9ebf;
	--violet: #7b5ea7;
	--rust: #b87333;
}

body {
	font-family: 'Special Elite', cursive;
	background: var(--parchment);
	color: var(--stone);
	line-height: 1.75;
	overflow-x: hidden;
}

.grain-overlay {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1000;
	opacity: 0.38;
	mix-blend-mode: multiply;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="4" stitchTiles="stitch"/></filter><rect width="220" height="220" filter="url(%23n)" opacity="0.075"/></svg>');
}

.aurora-bg {
	position: fixed;
	inset: 0;
	z-index: -2;
	background: linear-gradient(135deg, #3abdb0 0%, #5a9ebf 25%, #7b5ea7 50%, #c4973a 75%, #b87333 100%);
	background-size: 400% 400%;
	animation: auroraShift 20s ease-in-out infinite;
	transition: filter 0.3s ease;
}

.aurora-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(244,239,230,0.12), transparent 34%), radial-gradient(circle at 72% 62%, rgba(30,28,25,0.28), transparent 45%);
}

@keyframes auroraShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.hero {
	min-height: 100vh;
	width: 100vw;
	position: relative;
	overflow: hidden;
}

.hero::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 28vh;
	background: linear-gradient(transparent, var(--parchment));
}

.hero-container {
	position: absolute;
	left: 33%;
	top: 40%;
	width: min(980px, 82vw);
	transform: translate(-35%, -42%);
}

.hero-title {
	font-family: 'Poiret One', cursive;
	font-size: clamp(2.8rem, 8vw, 6rem);
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--amber);
	text-shadow: 0 0 22px rgba(196,151,58,0.28);
}

.hero-subtitle {
	min-height: 1.75em;
	max-width: 46rem;
	font-size: clamp(0.9rem, 1.8vw, 1.1rem);
	color: var(--charcoal);
	text-shadow: 0 1px 16px rgba(244,239,230,0.48);
}

.sparkline {
	display: block;
	width: min(1200px, 88vw);
	height: 80px;
	margin: 2rem 0 1.1rem;
}

.sparkline-line, .spark-line, .area-line, .deco-draw {
	fill: none;
	stroke: var(--teal);
	stroke-width: 1.5px;
	transition: stroke-dashoffset 2s ease-out;
}

.sparkline-line.drawn, .spark-line.drawn, .area-line.drawn, .deco-draw.drawn { stroke-dashoffset: 0 !important; }

.dot-nav {
	position: fixed;
	right: 2rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	z-index: 50;
}

.dot {
	width: 14px;
	height: 14px;
	border: 1px solid var(--amber);
	background: rgba(244,239,230,0.2);
	clip-path: polygon(53% 0, 83% 14%, 100% 48%, 86% 80%, 49% 100%, 15% 86%, 0 51%, 17% 12%);
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.dot:hover, .dot.active {
	background: var(--amber);
	box-shadow: 0 0 14px rgba(196,151,58,0.58);
	transform: scale(1.28) rotate(-8deg);
}

.grid-section {
	min-height: 90vh;
	padding: 5rem 2rem 6rem;
	background: linear-gradient(180deg, rgba(244,239,230,0.96), #f4efe6 16%, #f4efe6 84%, rgba(30,28,25,0.97));
	position: relative;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(1.2rem, 3vw, 2.4rem);
	max-width: 1400px;
	margin: 0 auto;
}

.card {
	--card-tilt: calc(var(--seed) * 2.4deg - 1.2deg);
	position: relative;
	min-height: 360px;
	padding: 1.35rem;
	background: rgba(244,239,230,0.92);
	border: 14px solid transparent;
	border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M5 8 Q18 4 35 7 T67 6 L65 66 Q48 69 35 65 T6 67 L7 37 Q4 21 5 8Z" fill="none" stroke="%23a07e2e" stroke-width="2" opacity="0.72"/></svg>') 16 stretch;
	transform: rotate(var(--card-tilt));
	clip-path: inset(100% 0 0 0);
	opacity: 0.35;
	transition: transform 0.4s ease, box-shadow 0.4s ease, clip-path 0.6s ease-out, opacity 0.6s ease-out;
	overflow: hidden;
}

.card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(58,189,176,0.08), rgba(123,94,167,0.08));
	opacity: 0;
	transition: opacity 0.4s ease;
}

.card.materialized { clip-path: inset(0); opacity: 1; }
.card:hover { transform: rotate(0deg) translateY(-7px); box-shadow: 0 18px 42px rgba(45,42,38,0.13); }
.card:hover::before { opacity: 1; }

.card-feature { min-height: 440px; }
@media (min-width: 768px) { .card-feature { grid-column: span 2; } }

.card-viz {
	height: 55%;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.card-viz-large { min-height: 230px; }
.spark-viz, .gauge-viz, .matrix-viz, .area-chart, .matrix-large { width: 100%; height: 100%; }
.spark-line, .area-line { stroke: var(--teal); transition-duration: 0.8s; }
.area-path { opacity: 0.34; }

.gauge-viz circle:first-child { stroke: rgba(138,126,110,0.24); }
.gauge-fill {
	stroke: var(--teal);
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: center;
	stroke-dasharray: 0 242;
	transition: stroke-dasharray 1s ease-out;
	filter: drop-shadow(0 0 7px rgba(58,189,176,0.36));
}

.matrix-viz circle, .matrix-large circle {
	fill: var(--amber);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.35);
	opacity: 0;
	transition: transform 0.45s ease, opacity 0.45s ease;
}

.matrix-viz circle.dot-active, .matrix-large circle.dot-active { transform: scale(1); opacity: var(--dot-opacity, 0.72); }

.card-label {
	position: relative;
	z-index: 1;
	margin: 1.1rem 0 0.8rem;
}

.card-label h2 {
	font-family: 'Poiret One', cursive;
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--charcoal);
}

.separator { width: 110px; height: 7px; margin-top: 0.38rem; }
.separator line { stroke: var(--amber); }

.card-annotation {
	position: relative;
	z-index: 1;
	min-height: 4.6em;
	font-size: clamp(0.78rem, 1.2vw, 0.88rem);
	color: var(--stone);
}

.typewriter-text { min-height: 1.75em; }
.cursor {
	display: inline-block;
	height: 1em;
	margin-left: 2px;
	border-right: 2px solid var(--amber);
	vertical-align: -0.12em;
	animation: blink 0.7s step-end infinite;
	transition: opacity 0.5s ease;
}
.cursor-fade { opacity: 0; }

@keyframes blink { 0%, 49%, 100% { opacity: 1; } 50%, 99% { opacity: 0; } }

.crack-pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}
.crack-pattern path { stroke: var(--rust); }

.closing-section {
	min-height: 90vh;
	padding: 6rem 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kiln);
	color: var(--parchment);
	position: relative;
	box-shadow: inset 0 30px 80px rgba(0,0,0,0.32);
}

.closing-container { max-width: 760px; text-align: center; }
.closing-divider { width: min(600px, 88vw); height: 100px; margin-bottom: 2rem; }
.closing-divider path { stroke: var(--amber); }

.closing-text h2 {
	font-family: 'Poiret One', cursive;
	font-size: clamp(1.8rem, 5vw, 2.4rem);
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--amber);
	margin-bottom: 1.5rem;
}

.closing-text p {
	font-size: clamp(0.9rem, 1.8vw, 1.08rem);
	color: #f4efe6;
	margin: 0 auto 1.45rem;
	max-width: 66ch;
}

@media (max-width: 768px) {
	.dot-nav { display: none; }
	.hero-container { left: 50%; top: 38%; transform: translate(-50%, -45%); width: 88vw; }
	.sparkline { width: 90vw; height: 60px; }
	.grid-section { padding: 3rem 1rem 4rem; }
	.card-grid { grid-template-columns: 1fr; }
	.card-feature { grid-column: span 1; }
	.card { --card-tilt: calc(var(--seed) * 1.2deg - 0.6deg); }
	.closing-section { padding: 4rem 1.4rem; }
}