:root {
	--ink-950: #0A0B0C;
	--ink-900: #101315;
	--ink-800: #181B1F;
	--ink-700: #21262B;
	--ink-600: #2E343B;
	--ink-500: #3C434B;

	--hivis-bright: #FF9D45;
	--hivis: #F08C34;
	--hivis-deep: #D9741B;
	--hivis-dim: #B5610F;

	--concrete-50:  #F4F5F6;
	--concrete-100: #E8EBED;
	--concrete-200: #D3D8DC;
	--concrete-300: #AEB6BD;
	--concrete-400: #828B93;
	--concrete-500: #565E66;
	--concrete-600: #3C434B;
	--concrete-700: #2A3035;
	--concrete-800: #1B1F23;
	--concrete-900: #121519;
	--concrete-950: #0A0C0E;

	--slate-50:  #F4F5F6;
	--slate-100: #E8EBED;
	--slate-200: #D3D8DC;
	--slate-300: #AEB6BD;
	--slate-400: #828B93;
	--slate-500: #565E66;
	--slate-600: #3C434B;
	--slate-700: #2A3035;
	--slate-800: #1B1F23;
	--slate-900: #121519;
	--slate-950: #0A0C0E;

	--success: #5FB83C;
	--warning: #E0A100;
	--danger:  #E5484D;
	--info:    #4AA3C7;

	--font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Space Mono", ui-monospace, "Cascadia Code", monospace;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	--r-xs: 8px;
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 30px;
	--r-pill: 999px;

	--container: 1200px;
	--container-narrow: 820px;
	--header-h: 76px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--t-fast: 150ms;
	--t-med: 260ms;
	--t-slow: 480ms;

	--blur: 18px;
	--blur-sm: 10px;
	--glass-dark: rgba(10, 11, 12, 0.52);
	--glass-dark-border: rgba(255, 255, 255, 0.14);

	--grad-hero: linear-gradient(135deg, #0A0B0C 0%, #131619 55%, #1B1F23 100%);
	--grad-band: linear-gradient(135deg, #0A0B0C 0%, #181B1F 100%);
	--grad-accent: linear-gradient(120deg, #F08C34 0%, #D9741B 100%);
	--grad-cobalt: linear-gradient(120deg, #D9741B 0%, #F08C34 100%);
	--glow-primary: radial-gradient(circle at 84% 6%, rgba(240, 140, 52, 0.14), transparent 50%);
	--glow-soft: radial-gradient(circle at 10% 98%, rgba(240, 140, 52, 0.07), transparent 58%);
}

:root,
:root[data-theme="light"] {
	--bg: #ECE7E0;
	--bg-2: #E3DDD4;
	--surface: #FFFFFF;
	--surface-2: #F4F0EA;
	--surface-3: #E9E3DB;
	--elevated: #FFFFFF;

	--text: #2A2722;
	--heading: #16120C;
	--muted: #60584E;
	--faint: #8C847A;

	--border: #DBD4C9;
	--border-strong: #C3BAAD;

	--primary: #14171A;
	--primary-strong: #0A0B0C;
	--primary-soft: #E9E3DB;
	--on-primary: #FFFFFF;

	--accent: #F08C34;
	--accent-hover: #D9741B;
	--accent-soft: #FBE6D2;
	--on-accent: #0A0B0C;
	--hivis: #B5610F;

	--band-tint: #E7E1D8;
	--band-2: #F1EBE3;

	--aura:
		radial-gradient(48% 46% at 85% 0%, rgba(240, 140, 52, 0.22), transparent 70%),
		radial-gradient(44% 42% at 0% 22%, rgba(58, 108, 150, 0.13), transparent 72%),
		radial-gradient(56% 52% at 52% 108%, rgba(240, 140, 52, 0.14), transparent 70%);
	--glow-accent: rgba(240, 140, 52, 0.16);
	--grain-opacity: 0.045;

	--glass-bg: rgba(255, 255, 255, 0.62);
	--glass-bg-strong: rgba(255, 255, 255, 0.86);
	--glass-border: rgba(255, 255, 255, 0.7);

	--ring: rgba(240, 140, 52, 0.4);
	--overlay: rgba(10, 11, 12, 0.58);

	--shadow-sm: 0 1px 2px rgba(10, 12, 14, 0.05), 0 10px 24px -12px rgba(10, 12, 14, 0.16);
	--shadow-md: 0 16px 34px -12px rgba(10, 12, 14, 0.2);
	--shadow-lg: 0 34px 64px -20px rgba(10, 12, 14, 0.28);
	--shadow-glow: 0 14px 34px -12px rgba(240, 140, 52, 0.42);

	--success-soft: #E6F4DD;
	--warning-soft: #F7EECB;
	--danger-soft: #FBE4E5;
	--info-soft: #E1EFF4;

	--logo-filter: none;
	color-scheme: light;
}

:root[data-theme="dark"] {
	--bg: #0A0B0C;
	--bg-2: #0F1214;
	--surface: #141719;
	--surface-2: #1A1E22;
	--surface-3: #22272C;
	--elevated: #161A1D;

	--text: #C8CDD2;
	--heading: #FFFFFF;
	--muted: #8A929A;
	--faint: #626A72;

	--border: #262C32;
	--border-strong: #363D45;

	--primary: #F08C34;
	--primary-strong: #FF9D45;
	--primary-soft: #2A1B0E;
	--on-primary: #0A0B0C;

	--accent: #F08C34;
	--accent-hover: #FF9D45;
	--accent-soft: #2A1B0E;
	--on-accent: #0A0B0C;
	--hivis: #F08C34;

	--band-tint: #0F1214;
	--band-2: #0F1214;

	--aura:
		radial-gradient(44% 42% at 85% 4%, rgba(240, 140, 52, 0.16), transparent 72%),
		radial-gradient(40% 38% at 2% 28%, rgba(240, 140, 52, 0.07), transparent 72%),
		radial-gradient(52% 48% at 50% 108%, rgba(240, 140, 52, 0.11), transparent 72%);
	--glow-accent: rgba(240, 140, 52, 0.18);
	--grain-opacity: 0.05;

	--glass-bg: rgba(20, 23, 25, 0.55);
	--glass-bg-strong: rgba(20, 23, 25, 0.74);
	--glass-border: rgba(255, 255, 255, 0.1);

	--ring: rgba(240, 140, 52, 0.45);
	--overlay: rgba(4, 5, 6, 0.66);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
	--shadow-lg: 0 28px 58px -18px rgba(0, 0, 0, 0.62);
	--shadow-glow: 0 16px 38px -14px rgba(240, 140, 52, 0.32);

	--success-soft: #16240E;
	--warning-soft: #2A2410;
	--danger-soft: #2C1717;
	--info-soft: #11232A;

	--logo-filter: brightness(0) invert(1);
	color-scheme: dark;
}

.theme-logo--dark { display: none; filter: none !important; }
[data-theme="dark"] .theme-logo--light { display: none; }
[data-theme="dark"] .theme-logo--dark { display: inline-block; }

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	font-size: 15px;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

a { color: var(--primary); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent); color: var(--on-accent); }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--heading);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: 0.92rem; }

p { color: var(--text); }
strong { font-weight: 700; color: var(--heading); }
small { font-size: 0.82rem; }

.lead { font-size: 1.12rem; line-height: 1.6; color: var(--muted); }
.text-gradient { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(2.6rem, 2rem + 4vw, 5.5rem); position: relative; }
.section-sm { padding-block: clamp(1.8rem, 1.4rem + 2.5vw, 3rem); }
.section-tint { background: var(--band-tint); }
.section-surface { background: var(--surface-2); }

.band-dark {
	position: relative;
	background: var(--grad-band);
	color: #fff;
	overflow: hidden;
}
.band-dark::before { content: ""; position: absolute; inset: 0; background: var(--glow-primary), var(--glow-soft); pointer-events: none; }
.band-dark > .container { position: relative; z-index: 1; }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4, .band-dark h5, .band-dark h6 { color: #fff; }
.band-dark p { color: rgba(255, 255, 255, 0.82); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); grid-auto-flow: dense; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.row-2 { grid-row: span 2; }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.stack > * + * { margin-top: var(--space-4); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }

.section-head { max-width: 660px; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--space-3); }
.section-head p { margin-top: var(--space-3); color: var(--muted); font-size: 1.05rem; }

.text-center { text-align: center; }
.text-muted { color: var(--muted) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.w-100 { width: 100%; }
.hidden { display: none !important; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }

@media (max-width: 992px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.bento { grid-template-columns: repeat(4, 1fr); }
	.col-3 { grid-column: span 2; }
	.col-4 { grid-column: span 4; }
	.split { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 640px) {
	.container { padding-inline: var(--space-4); }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.bento { grid-template-columns: 1fr; gap: var(--space-3); }
	.col-2, .col-3, .col-4, .col-6 { grid-column: span 1; }
	.row-2 { grid-row: span 1; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.reveal { opacity: 1; transform: none; }
}
