/*
Theme Name: UCPro Starter
Theme URI: https://ucpro.local
Author: UCPro
Author URI: https://ucpro.local
Description: Ultra-modern dark glassmorphic WordPress theme with motion-driven animations, OLED-optimized dark mode, and premium design system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ucpro-starter
Tags: dark-mode, glassmorphism, modern, portfolio, one-column, custom-background, custom-colors, featured-images, threaded-comments
*/

/* ============================================================
   DESIGN SYSTEM — UCPro Starter
   Base: Dark OLED + Glassmorphism + Motion-Driven
   Typography: Archivo + Space Grotesk
   ============================================================ */

:root {
	/* —— Colors —— */
	--color-bg: #06060b;
	--color-bg-elevated: #0d0d14;
	--color-bg-card: rgba(255, 255, 255, 0.04);
	--color-bg-glass: rgba(255, 255, 255, 0.06);
	--color-surface: #111119;
	--color-border: rgba(255, 255, 255, 0.08);
	--color-border-glow: rgba(222, 146, 63, 0.3);

	--color-text: #e4e4e7;
	--color-text-muted: #71717a;
	--color-text-dim: #52525b;
	--color-heading: #fafafa;

	--color-primary: #de923f;
	--color-primary-dim: #b87832;
	--color-secondary: #f0a848;
	--color-accent: #ff6b6b;
	--color-accent-warm: #f59e0b;

	/* Gradient mesh */
	--gradient-hero:
		radial-gradient(ellipse 80% 50% at 50% -20%, rgba(222, 146, 63, 0.22) 0%, transparent 50%),
		radial-gradient(ellipse 60% 40% at 80% 50%, rgba(240, 168, 72, 0.15) 0%, transparent 50%),
		radial-gradient(ellipse 50% 60% at 10% 80%, rgba(255, 107, 107, 0.1) 0%, transparent 50%);
	--gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
	--gradient-text: linear-gradient(135deg, #ffb347, #de923f, #ff6b35);

	/* Glass */
	--glass-blur: 20px;
	--glass-opacity: 0.06;
	--glass-border: 1px solid rgba(255, 255, 255, 0.08);

	/* Typography */
	--font-heading: 'Archivo', system-ui, -apple-system, sans-serif;
	--font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

	/* Scale — fluid clamp */
	--text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
	--text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
	--text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
	--text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	--text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
	--text-2xl: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
	--text-3xl: clamp(2.2rem, 1.6rem + 3vw, 4rem);
	--text-4xl: clamp(2.8rem, 1.8rem + 5vw, 6rem);
	--text-hero: clamp(3rem, 2rem + 6vw, 8rem);

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 5rem;
	--space-4xl: 8rem;

	/* Motion */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duration-fast: 150ms;
	--duration-base: 300ms;
	--duration-slow: 600ms;
	--duration-glacial: 1200ms;

	/* Radius */
	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-full: 9999px;

	/* Z-index */
	--z-behind: -1;
	--z-base: 1;
	--z-overlay: 10;
	--z-nav: 100;
	--z-modal: 1000;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 16px;
	color-scheme: dark;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

::selection {
	background: rgba(222, 146, 63, 0.25);
	color: #fff;
}

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

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out-quart);
}
a:visited {
	color: inherit;
}
a:hover {
	color: var(--color-secondary);
}
a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

button,
.btn {
	cursor: pointer;
	font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
}
h1 {
	font-size: var(--text-4xl);
}
h2 {
	font-size: var(--text-3xl);
}
h3 {
	font-size: var(--text-2xl);
}
h4 {
	font-size: var(--text-xl);
}
h5 {
	font-size: var(--text-lg);
}

p {
	margin-bottom: var(--space-md);
	max-width: 65ch;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 3rem);
}

.section {
	padding: var(--space-4xl) 0;
	position: relative;
}

.grid {
	display: grid;
	gap: var(--space-xl);
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   NOISE OVERLAY (subtle texture)
   ============================================================ */

body::before {
	content: '';
	position: fixed;
	inset: 0;
	opacity: 0.025;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 200px;
	pointer-events: none;
	z-index: 9999;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-nav);
	padding: var(--space-lg) 0;
	background: rgba(6, 6, 11, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all var(--duration-slow) var(--ease-out-expo);
}

.site-nav.scrolled {
	background: rgba(6, 6, 11, 0.85);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border-bottom: var(--glass-border);
	padding: var(--space-md) 0;
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-logo {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--color-heading);
	letter-spacing: -0.03em;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
}

.nav-logo img.site-logo,
.nav-logo img,
.nav-logo a img {
	display: block;
	height: 48px !important;
	width: auto !important;
	max-height: none !important;
	max-width: 350px !important;
	object-fit: contain;
	filter: drop-shadow(0 0 10px rgba(222, 146, 63, 0.45));
	transition:
		filter 0.3s ease,
		transform 0.3s ease;
	transform: scale(1.8);
	transform-origin: left center;
}

.nav-logo a:hover img.site-logo,
.nav-logo a:hover img {
	filter: drop-shadow(0 0 20px rgba(222, 146, 63, 0.7));
}

.nav-logo .logo-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	box-shadow:
		0 0 16px var(--color-primary),
		0 0 40px rgba(222, 146, 63, 0.5);
	animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%,
	100% {
		box-shadow:
			0 0 16px var(--color-primary),
			0 0 40px rgba(222, 146, 63, 0.5);
	}
	50% {
		box-shadow:
			0 0 28px var(--color-primary),
			0 0 70px rgba(222, 146, 63, 0.7);
	}
}

.nav-links {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	list-style: none;
}

.nav-links a {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	position: relative;
	padding: var(--space-xs) 0;
	transition: color var(--duration-base) var(--ease-out-quart);
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--gradient-text);
	transition: width var(--duration-base) var(--ease-out-expo);
	border-radius: var(--radius-full);
}

.nav-links a:hover,
.nav-links a.active {
	color: var(--color-heading);
}

.nav-links a:hover::after,
.nav-links a.active::after {
	width: 100%;
}

.nav-cta {
	padding: 0.65rem 2.2rem !important;
	background: var(--gradient-text);
	color: var(--color-bg) !important;
	font-weight: 600;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	transition:
		transform var(--duration-base) var(--ease-spring),
		box-shadow var(--duration-base) var(--ease-out-quart);
}
.nav-cta::after {
	display: none !important;
}
.nav-cta:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow:
		0 8px 30px rgba(222, 146, 63, 0.5),
		0 0 60px rgba(240, 168, 72, 0.35);
	color: var(--color-bg) !important;
}

/* Mobile menu toggle */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: var(--space-sm);
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	border-radius: var(--radius-full);
	transition: all var(--duration-base) var(--ease-out-expo);
}

.nav-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
	opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
	.nav-toggle {
		display: flex;
	}
	.nav-links {
		position: fixed;
		top: 0;
		right: -100%;
		width: 75vw;
		max-width: 350px;
		height: 100vh;
		background: rgba(6, 6, 11, 0.95);
		backdrop-filter: blur(30px);
		-webkit-backdrop-filter: blur(30px);
		flex-direction: column;
		justify-content: center;
		gap: var(--space-2xl);
		padding: var(--space-2xl);
		transition: right var(--duration-slow) var(--ease-out-expo);
		border-left: var(--glass-border);
	}
	.nav-links.open {
		right: 0;
	}
	.nav-links a {
		font-size: var(--text-lg);
	}
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding-top: 160px;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-behind);
}

/* Animated gradient orbs */
.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
	animation: float-orb 20s ease-in-out infinite;
}

.hero-orb--1 {
	width: 600px;
	height: 600px;
	background: rgba(222, 146, 63, 0.15);
	top: -15%;
	right: -10%;
	animation-delay: 0s;
}

.hero-orb--2 {
	width: 500px;
	height: 500px;
	background: rgba(240, 168, 72, 0.12);
	bottom: -20%;
	left: -10%;
	animation-delay: -7s;
}

.hero-orb--3 {
	width: 350px;
	height: 350px;
	background: rgba(255, 107, 107, 0.08);
	top: 40%;
	left: 50%;
	animation-delay: -13s;
}

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

/* Grid lines background */
.hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
}

.hero-content {
	position: relative;
	z-index: var(--z-base);
	max-width: 900px;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs) var(--space-lg);
	background: var(--color-bg-glass);
	border: var(--glass-border);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--space-xl);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hero-badge .badge-dot {
	width: 6px;
	height: 6px;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	animation: pulse-glow 2s ease-in-out infinite;
}

.hero-title {
	font-size: var(--text-hero);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.04em;
	margin-bottom: var(--space-xl);
}

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

.hero-title .text-outline {
	-webkit-text-stroke: 1.5px var(--color-text-dim);
	-webkit-text-fill-color: transparent;
	transition: all var(--duration-slow) var(--ease-out-expo);
}
.hero-title .text-outline:hover {
	-webkit-text-fill-color: var(--color-heading);
	-webkit-text-stroke: 0px;
}

.hero-description {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	max-width: 550px;
	margin-bottom: var(--space-2xl);
	line-height: 1.8;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

/* Buttons */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-2xl);
	background: var(--color-primary);
	color: var(--color-bg);
	font-weight: 600;
	font-size: var(--text-base);
	border: none;
	border-radius: var(--radius-full);
	letter-spacing: 0.01em;
	transition: all var(--duration-base) var(--ease-spring);
	position: relative;
	overflow: hidden;
}
.btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
	transform: translateX(-100%);
	transition: transform var(--duration-slow) var(--ease-out-expo);
}
.btn-primary:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 12px 40px rgba(222, 146, 63, 0.5),
		0 0 80px rgba(222, 146, 63, 0.3);
	color: var(--color-bg);
}
.btn-primary:hover::before {
	transform: translateX(100%);
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-2xl);
	background: transparent;
	color: var(--color-text);
	font-weight: 500;
	font-size: var(--text-base);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: all var(--duration-base) var(--ease-out-quart);
}
.btn-ghost:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: rgba(222, 146, 63, 0.05);
}

/* ============================================================
   FLOATING STATS BAR
   ============================================================ */

.stats-bar {
	display: flex;
	justify-content: center;
	gap: var(--space-xl);
	padding: var(--space-2xl) 0;
	margin-top: calc(-1 * var(--space-4xl));
	position: relative;
	z-index: var(--z-overlay);
}

.stat-card {
	background: var(--color-bg-glass);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: var(--glass-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-2xl);
	text-align: center;
	min-width: 180px;
	transition: all var(--duration-base) var(--ease-out-quart);
	position: relative;
	overflow: hidden;
}

.stat-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-card);
	opacity: 0;
	transition: opacity var(--duration-base);
}

.stat-card:hover {
	transform: translateY(-5px);
	border-color: var(--color-border-glow);
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(222, 146, 63, 0.15);
}
.stat-card:hover::before {
	opacity: 1;
}

.stat-number {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: 800;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
}

.stat-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: var(--space-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

@media (max-width: 768px) {
	.stats-bar {
		flex-direction: column;
		align-items: center;
		margin-top: var(--space-2xl);
		gap: var(--space-md);
	}
	.stat-card {
		width: 100%;
		max-width: 300px;
	}
}

/* ============================================================
   GLASSMORPHIC CARDS / FEATURES
   ============================================================ */

.features {
	background: var(--color-bg);
	position: relative;
}

.section-header {
	text-align: center;
	margin-bottom: var(--space-4xl);
}

.section-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: var(--space-md);
}

.section-label svg {
	width: 16px;
	height: 16px;
}

.section-title {
	font-size: var(--text-3xl);
	margin-bottom: var(--space-md);
}

.section-subtitle {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	max-width: 600px;
	margin: 0 auto;
}

.feature-card {
	background: var(--color-bg-card);
	border: var(--glass-border);
	border-radius: var(--radius-xl);
	padding: var(--space-2xl);
	position: relative;
	overflow: hidden;
	transition: all var(--duration-slow) var(--ease-out-expo);
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(222, 146, 63, 0.5), rgba(240, 168, 72, 0.5), transparent);
	opacity: 0;
	transition: opacity var(--duration-base);
}

.feature-card:hover {
	transform: translateY(-8px);
	background: var(--color-bg-glass);
	border-color: var(--color-border-glow);
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.5),
		0 0 60px rgba(222, 146, 63, 0.2);
}
.feature-card:hover::before {
	opacity: 1;
}

.feature-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: rgba(222, 146, 63, 0.12);
	border: 1px solid rgba(222, 146, 63, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-lg);
	transition: all var(--duration-base) var(--ease-out-quart);
}

.feature-card:hover .feature-icon {
	background: rgba(222, 146, 63, 0.22);
	box-shadow: 0 0 30px rgba(222, 146, 63, 0.35);
	transform: scale(1.05);
}

.feature-icon svg {
	width: 24px;
	height: 24px;
	color: var(--color-primary);
}

.feature-card h3 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-md);
}

.feature-card p {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.8;
}

/* ============================================================
   BENTO GRID — SHOWCASE
   ============================================================ */

.bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	gap: var(--space-lg);
}

.bento-item {
	background: var(--color-bg-card);
	border: var(--glass-border);
	border-radius: var(--radius-xl);
	padding: var(--space-2xl);
	position: relative;
	overflow: hidden;
	transition: all var(--duration-slow) var(--ease-out-expo);
}

.bento-item:hover {
	border-color: var(--color-border-glow);
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.bento-item--wide {
	grid-column: span 2;
}
.bento-item--tall {
	grid-row: span 2;
}
.bento-item--large {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 1024px) {
	.bento-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bento-item--large {
		grid-column: span 2;
		grid-row: span 1;
	}
}
@media (max-width: 640px) {
	.bento-grid {
		grid-template-columns: 1fr;
	}
	.bento-item--wide,
	.bento-item--tall,
	.bento-item--large {
		grid-column: span 1;
		grid-row: span 1;
	}
}

	.bento-item--large {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* ============================================================
   ROADMAP SECTION
   ============================================================ */

.roadmap-section {
	overflow: hidden;
}

.roadmap {
	position: relative;
	max-width: 900px;
	margin: var(--space-4xl) auto 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* SVG dashed path */
.roadmap-path {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.roadmap-path-active {
	stroke-dashoffset: 3000;
	transition: none;
}

.roadmap-path-active.animated {
	animation: roadmapDraw 4s var(--ease-out-expo) forwards;
}

@keyframes roadmapDraw {
	to { stroke-dashoffset: 0; }
}

/* Each step row */
.roadmap-step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 0;
	padding: var(--space-xl) 0;
	z-index: 1;
}

/* Left-aligned steps: card | node | empty */
.roadmap-left .roadmap-card {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	justify-self: end;
	padding-right: var(--space-2xl);
}
.roadmap-left .roadmap-node {
	grid-column: 2;
	grid-row: 1;
}

/* Right-aligned steps: empty | node | card */
.roadmap-right .roadmap-node {
	grid-column: 2;
	grid-row: 1;
}
.roadmap-right .roadmap-card {
	grid-column: 3;
	grid-row: 1;
	text-align: left;
	justify-self: start;
	padding-left: var(--space-2xl);
}

/* Node (center dot on the line) */
.roadmap-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	z-index: 2;
}

.roadmap-node-ring {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-full);
	border: 2px solid rgba(222, 146, 63, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	position: relative;
	transition: all var(--duration-slow) var(--ease-out-expo);
}

.roadmap-node-ring::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: var(--radius-full);
	border: 1px dashed rgba(222, 146, 63, 0.12);
	animation: nodeOrbit 8s linear infinite;
}

@keyframes nodeOrbit {
	to { transform: rotate(360deg); }
}

.roadmap-node-dot {
	width: 14px;
	height: 14px;
	border-radius: var(--radius-full);
	background: var(--gradient-text);
	box-shadow: 0 0 20px rgba(222, 146, 63, 0.5), 0 0 40px rgba(222, 146, 63, 0.2);
	transition: all var(--duration-slow) var(--ease-out-expo);
}

.roadmap-step:hover .roadmap-node-dot {
	transform: scale(1.3);
	box-shadow: 0 0 30px rgba(222, 146, 63, 0.7), 0 0 60px rgba(222, 146, 63, 0.3);
}

.roadmap-step:hover .roadmap-node-ring {
	border-color: rgba(222, 146, 63, 0.5);
	box-shadow: 0 0 30px rgba(222, 146, 63, 0.15);
}

/* Final node — bigger glow */
.roadmap-node-final {
	width: 60px;
	height: 60px;
	border-color: rgba(222, 146, 63, 0.4);
	box-shadow: 0 0 40px rgba(222, 146, 63, 0.2);
}
.roadmap-node-final .roadmap-node-dot {
	width: 18px;
	height: 18px;
}

.roadmap-number {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Card */
.roadmap-card {
	max-width: 380px;
	padding: var(--space-xl) var(--space-2xl);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	position: relative;
	overflow: hidden;
	transition: all var(--duration-slow) var(--ease-out-expo);
}

.roadmap-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(222, 146, 63, 0.06), transparent 70%);
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out-expo);
}

.roadmap-step:hover .roadmap-card {
	border-color: var(--color-border-glow);
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(222, 146, 63, 0.08), 0 0 1px rgba(222, 146, 63, 0.3);
}

.roadmap-step:hover .roadmap-card::before {
	opacity: 1;
}

/* Final card — accent border */
.roadmap-card-final {
	border-color: rgba(222, 146, 63, 0.12);
	background: linear-gradient(135deg, rgba(222, 146, 63, 0.03), rgba(255, 107, 53, 0.01));
}

/* Step activated by scroll path */
.roadmap-active .roadmap-card {
	border-color: var(--color-border-glow);
	box-shadow: 0 0 30px rgba(222, 146, 63, 0.12), 0 0 80px rgba(222, 146, 63, 0.05), inset 0 1px 0 rgba(222, 146, 63, 0.15);
}

.roadmap-active .roadmap-card.roadmap-card-final {
	border-color: rgba(222, 146, 63, 0.5);
	background: linear-gradient(135deg, rgba(222, 146, 63, 0.1), rgba(255, 107, 53, 0.05));
	box-shadow: 0 0 40px rgba(222, 146, 63, 0.18), 0 0 100px rgba(222, 146, 63, 0.08), inset 0 1px 0 rgba(222, 146, 63, 0.2);
}

.roadmap-active .roadmap-card::before {
	opacity: 1;
}

.roadmap-active .roadmap-node-ring {
	border-color: rgba(222, 146, 63, 0.6);
	box-shadow: 0 0 25px rgba(222, 146, 63, 0.3), 0 0 50px rgba(222, 146, 63, 0.1);
}

.roadmap-active .roadmap-node-dot {
	transform: scale(1.25);
	box-shadow: 0 0 25px rgba(222, 146, 63, 0.7), 0 0 50px rgba(222, 146, 63, 0.3);
}

.roadmap-active .roadmap-icon {
	color: var(--color-secondary);
	filter: drop-shadow(0 0 8px rgba(222, 146, 63, 0.4));
}

.roadmap-active .roadmap-card h3 {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.roadmap-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-md);
	color: var(--color-primary);
	position: relative;
	z-index: 1;
}

.roadmap-left .roadmap-icon {
	margin-left: auto;
}

.roadmap-icon svg {
	width: 28px;
	height: 28px;
}

.roadmap-card h3 {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-heading);
	margin-bottom: var(--space-sm);
	position: relative;
	z-index: 1;
}

.roadmap-card p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* ---- Mobile Roadmap ---- */
@media (max-width: 768px) {
	.roadmap-path {
		display: none;
	}

	.roadmap {
		gap: var(--space-md);
	}

	.roadmap-step {
		display: flex;
		gap: var(--space-lg);
		padding: var(--space-md) 0;
	}

	.roadmap-left .roadmap-card,
	.roadmap-right .roadmap-card {
		text-align: left;
		justify-self: auto;
		padding: var(--space-lg) var(--space-xl);
		max-width: none;
	}

	.roadmap-left .roadmap-icon {
		margin-left: 0;
	}

	.roadmap-node {
		flex-shrink: 0;
	}

	.roadmap-node-ring {
		width: 40px;
		height: 40px;
	}

	.roadmap-node-ring::before {
		inset: -4px;
	}

	.roadmap-node-dot {
		width: 10px;
		height: 10px;
	}

	.roadmap-node-final {
		width: 46px;
		height: 46px;
	}

	.roadmap-node-final .roadmap-node-dot {
		width: 14px;
		height: 14px;
	}

	/* Mobile: vertical dashed line */
	.roadmap-step:not(:last-child) .roadmap-node::after {
		content: '';
		position: absolute;
		top: 52px;
		left: 50%;
		transform: translateX(-50%);
		width: 2px;
		height: calc(100% + var(--space-md));
		background: repeating-linear-gradient(
			to bottom,
			rgba(222, 146, 63, 0.2) 0px,
			rgba(222, 146, 63, 0.2) 6px,
			transparent 6px,
			transparent 12px
		);
	}

	.roadmap-node {
		position: relative;
	}
}

/* ============================================================
   CTA SECTION
   ============================================================ */

.cta-section {
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-glow {
	position: absolute;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(222, 146, 63, 0.25) 0%, transparent 60%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.cta-content {
	position: relative;
	z-index: var(--z-base);
}

.cta-title {
	font-size: var(--text-3xl);
	margin-bottom: var(--space-lg);
}

.cta-description {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	max-width: 500px;
	margin: 0 auto var(--space-2xl);
}

/* ============================================================
   MARQUEE / SCROLLING TEXT
   ============================================================ */

.marquee-wrap {
	overflow: hidden;
	padding: var(--space-3xl) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.marquee {
	display: flex;
	gap: var(--space-3xl);
	animation: scroll-marquee 30s linear infinite;
	width: max-content;
}

.marquee-item {
	font-family: var(--font-heading);
	font-size: var(--text-4xl);
	font-weight: 800;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.05);
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	transition: color var(--duration-base);
}
.marquee-item:hover {
	color: rgba(222, 146, 63, 0.15);
	-webkit-text-stroke-color: var(--color-primary);
}

@keyframes scroll-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
	position: relative;
	overflow: hidden;
	padding: var(--space-4xl) 0 var(--space-xl);
	background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
	border-top: 1px solid rgba(222, 146, 63, 0.12);
}

.footer-glow {
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 240px;
	background: radial-gradient(ellipse, rgba(222, 146, 63, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

/* ---- Brand ---- */
.site-footer .footer-brand {
	text-align: center;
	padding-bottom: var(--space-3xl);
}
.footer-logo-link {
	display: inline-block;
}
.footer-logo {
	height: 40px;
	width: auto;
	margin-bottom: var(--space-md);
}
.site-footer .footer-brand p {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.65;
	margin: var(--space-md) auto 0;
	max-width: 480px;
}

/* ---- Contact row ---- */
.footer-contact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	padding-bottom: var(--space-3xl);
	border-bottom: 1px solid var(--color-border);
}

.footer-contact-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	text-decoration: none;
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.015);
	transition: all var(--duration-base) var(--ease-out-quart);
}
.footer-contact-item:hover {
	background: rgba(222, 146, 63, 0.06);
	border-color: rgba(222, 146, 63, 0.25);
}
.footer-contact-item:hover .footer-contact-icon {
	border-color: var(--color-primary);
	color: var(--color-primary);
	box-shadow: 0 0 14px rgba(222, 146, 63, 0.25);
}
.footer-contact-item:hover .footer-contact-value {
	color: var(--color-heading);
}

.footer-contact-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.02);
	color: var(--color-text-muted);
	transition: all var(--duration-base) var(--ease-out-quart);
}
.footer-contact-icon svg {
	width: 20px;
	height: 20px;
}

.footer-contact-label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-dim);
	margin-bottom: 2px;
}
.footer-contact-value {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	transition: color var(--duration-fast);
}

/* ---- Mid : Nav columns ---- */
.footer-mid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3xl);
	padding: var(--space-3xl) 0;
	text-align: center;
}

.footer-nav-col h4 {
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: var(--space-lg);
	color: var(--color-heading);
}

.footer-nav-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.footer-nav-col a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	transition: color var(--duration-fast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
}
.footer-nav-col a:hover {
	color: var(--color-primary);
}

.footer-social-link svg {
	flex-shrink: 0;
}

.footer-company {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-xs);
	color: var(--color-text-dim);
}
.footer-company-name {
	font-weight: 700;
	color: var(--color-text-muted);
	margin-bottom: 2px;
}

/* ---- Bottom bar ---- */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-xs);
	color: var(--color-text-dim);
}
.footer-credit {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.footer-contact {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.site-footer .footer-brand p {
		max-width: 100%;
	}
	.footer-mid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2xl);
	}
	.footer-bottom {
		flex-direction: column;
		gap: var(--space-md);
		text-align: center;
	}
}

/* ============================================================
   DIGITALIZACJA PAGE
   ============================================================ */
.digi-hero {
	position: relative;
	min-height: 55vh;
	display: flex;
	align-items: center;
	padding-top: 140px;
	padding-bottom: var(--space-3xl);
	overflow: hidden;
}

/* -- Intro grid -- */
.digi-intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4xl);
	align-items: center;
}
.digi-intro-text .section-heading {
	margin-bottom: var(--space-lg);
}
.digi-intro-text p {
	color: var(--color-text-muted);
	margin-bottom: var(--space-xl);
}
.digi-benefits {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.digi-benefits li {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	color: var(--color-text);
	font-size: var(--text-sm);
}
.digi-benefits svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-primary);
}

/* Visual card */
.digi-intro-visual {
	display: flex;
	justify-content: center;
}
.digi-visual-card {
	position: relative;
	width: 100%;
	max-width: 440px;
	aspect-ratio: 4/3;
	border-radius: var(--radius-xl);
	border: var(--glass-border);
	background: var(--glass-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.digi-visual-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 60% 40%, rgba(222,146,63,0.1) 0%, transparent 60%);
}
.digi-visual-svg {
	width: 80%;
	height: auto;
	position: relative;
	z-index: 1;
}

/* -- Services grid -- */
.digi-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}
.digi-service-card {
	padding: var(--space-2xl);
	border-radius: var(--radius-xl);
	border: var(--glass-border);
	background: var(--glass-bg);
	transition: all var(--duration-base) var(--ease-out-quart);
}
.digi-service-card:hover {
	border-color: rgba(222, 146, 63, 0.2);
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.digi-service-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	background: rgba(222,146,63,0.08);
	color: var(--color-primary);
	margin-bottom: var(--space-lg);
}
.digi-service-icon svg {
	width: 24px;
	height: 24px;
}
.digi-service-card h3 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-sm);
}
.digi-service-card p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* -- Process steps -- */
.digi-process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-xl);
}
.digi-step {
	text-align: center;
	padding: var(--space-2xl) var(--space-lg);
	border-radius: var(--radius-xl);
	border: var(--glass-border);
	background: var(--glass-bg);
	position: relative;
}
.digi-step-num {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: 800;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	margin-bottom: var(--space-lg);
}
.digi-step h3 {
	font-size: var(--text-base);
	margin-bottom: var(--space-sm);
}
.digi-step p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.65;
}

/* -- CTA -- */
.digi-cta .cta-card {
	text-align: center;
	padding: var(--space-4xl);
	border-radius: var(--radius-2xl);
	border: var(--glass-border);
	background: var(--glass-bg);
	position: relative;
}

/* -- Responsive -- */
@media (max-width: 1024px) {
	.digi-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.digi-process-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.digi-intro-grid {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}
	.digi-intro-visual {
		order: -1;
	}
	.digi-services-grid {
		grid-template-columns: 1fr;
	}
	.digi-process-steps {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   BLOG PAGE
   ============================================================ */
.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
	margin-bottom: var(--space-3xl);
}
.blog-filter-btn {
	display: inline-flex;
	align-items: center;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	background: transparent;
	transition: all var(--duration-fast) var(--ease-out-quart);
	text-decoration: none;
}
.blog-filter-btn:hover {
	border-color: rgba(222,146,63,0.3);
	color: var(--color-heading);
}
.blog-filter-btn.active {
	background: rgba(222,146,63,0.1);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Blog card grid */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

.blog-card {
	border-radius: var(--radius-xl);
	border: var(--glass-border);
	background: var(--glass-bg);
	overflow: hidden;
	transition: all var(--duration-base) var(--ease-out-quart);
	display: flex;
	flex-direction: column;
}
.blog-card:hover {
	border-color: rgba(222,146,63,0.2);
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.blog-card-thumb {
	display: block;
	width: 100%;
	height: 200px;
	overflow: hidden;
}
.blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out-quart);
}
.blog-card:hover .blog-card-thumb img {
	transform: scale(1.05);
}
.blog-card-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(222,146,63,0.04);
}
.blog-card-thumb--empty svg {
	width: 40px;
	height: 40px;
	color: var(--color-text-dim);
}

.blog-card-body {
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-card-meta {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
	font-size: var(--text-xs);
}
.blog-card-cat {
	display: inline-block;
	padding: 2px var(--space-sm);
	border-radius: var(--radius-full);
	background: rgba(222,146,63,0.1);
	color: var(--color-primary);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.blog-card-date {
	color: var(--color-text-dim);
}

.blog-card-title {
	font-size: var(--text-lg);
	line-height: 1.35;
	margin-bottom: var(--space-sm);
}
.blog-card-title a {
	color: var(--color-heading);
	text-decoration: none;
	transition: color var(--duration-fast);
}
.blog-card-title a:hover {
	color: var(--color-primary);
}

.blog-card-excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.65;
	margin-bottom: var(--space-lg);
}

.blog-card-link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-primary);
	transition: gap var(--duration-fast);
}
.blog-card-link:hover {
	gap: var(--space-sm);
}

/* Pagination */
.blog-pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-4xl);
}
.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: all var(--duration-fast) var(--ease-out-quart);
}
.blog-pagination .page-numbers:hover {
	border-color: rgba(222,146,63,0.3);
	color: var(--color-heading);
}
.blog-pagination .page-numbers.current {
	background: rgba(222,146,63,0.1);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

@media (max-width: 1024px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
	.blog-filters {
		gap: var(--space-xs);
	}
	.blog-filter-btn {
		font-size: var(--text-xs);
		padding: var(--space-xs) var(--space-md);
	}
}

/* ============================================================
   COMMENTS
   ============================================================ */

/* -- Comment list -- */
.comments-area {
	margin-top: var(--space-3xl);
}

.comments-area .comments-title,
#reply-title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--color-heading);
	margin-bottom: var(--space-xl);
}
#reply-title small {
	display: block;
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	font-weight: 400;
}
#reply-title small a {
	color: var(--color-primary);
}

.comment-list,
.comment-list ol {
	list-style: none !important;
	list-style-type: none !important;
	padding: 0;
	padding-left: 0 !important;
	margin: 0 0 var(--space-3xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}
.comment-list > li,
.comment-list li.comment {
	list-style: none !important;
	margin-left: 0;
	padding-left: 0;
}
.comment-list .children {
	list-style: none;
	padding-left: var(--space-2xl);
	margin-top: var(--space-xl);
	border-left: 2px solid rgba(222, 146, 63, 0.15);
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.comment-body {
	padding: var(--space-xl);
	border-radius: var(--radius-xl);
	border: var(--glass-border);
	background: var(--glass-bg);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}
.comment-meta .avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
}
.comment-author .fn {
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-heading);
}
.comment-author .fn a {
	color: var(--color-heading);
}
.comment-metadata {
	margin-left: auto;
}
.comment-metadata a {
	font-size: var(--text-xs);
	color: var(--color-text-dim);
}

.comment-content {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
}
.comment-content p {
	margin-bottom: var(--space-sm);
}
.comment-content p:last-child {
	margin-bottom: 0;
}

.reply a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* -- Comment form -- */
#comments,
#respond {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
#respond {
	margin-top: var(--space-3xl);
	padding-top: var(--space-3xl);
	border-top: 1px solid var(--color-border);
}

.comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
}

.comment-form p {
	margin: 0;
}
.comment-form .comment-notes {
	grid-column: 1 / -1;
	font-size: var(--text-sm);
	color: var(--color-text-dim);
	margin-bottom: var(--space-sm);
}
.comment-form .comment-form-comment {
	grid-column: 1 / -1;
}
.comment-form .form-submit {
	grid-column: 1 / -1;
}

.comment-form label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-heading);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	outline: none;
	transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
	-webkit-appearance: none;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(222, 146, 63, 0.1);
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
	color: var(--color-text-dim);
}
.comment-form textarea {
	min-height: 160px;
	resize: vertical;
}

.comment-form .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md) var(--space-2xl);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-bg);
	background: var(--gradient-text);
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.comment-form .form-submit input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(222, 146, 63, 0.3);
}

/* Cookies consent checkbox */
.comment-form-cookies-consent {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}
.comment-form-cookies-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
}
.comment-form-cookies-consent label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	margin-bottom: 0;
}

/* Logged-in user note */
.logged-in-as {
	grid-column: 1 / -1;
	font-size: var(--text-sm);
	color: var(--color-text-dim);
}
.logged-in-as a {
	color: var(--color-primary);
}

/* Navigation between comments */
.comment-navigation {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space-xl);
	font-size: var(--text-sm);
}
.comment-navigation a {
	color: var(--color-primary);
}

@media (max-width: 768px) {
	.comment-form {
		grid-template-columns: 1fr;
	}
	.comment-list .children {
		padding-left: var(--space-lg);
	}
}

/* ============================================================
   CONTACT MODAL
   ============================================================ */

.contact-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-slow) var(--ease-out-expo),
		visibility 0s var(--duration-slow);
}

.contact-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--duration-slow) var(--ease-out-expo),
		visibility 0s 0s;
}

.contact-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 6, 11, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.contact-modal-container {
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 620px;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(30px) scale(0.97);
	transition: transform var(--duration-slow) var(--ease-out-expo);
}

.contact-modal.is-open .contact-modal-container {
	transform: translateY(0) scale(1);
}

.contact-modal-panel {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-3xl);
	position: relative;
	overflow: hidden;
}

.contact-modal-panel::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-text);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.contact-modal-panel::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: 300px;
	background: radial-gradient(ellipse, rgba(222, 146, 63, 0.06) 0%, transparent 70%);
	pointer-events: none;
}

.contact-modal-close {
	position: absolute;
	top: var(--space-lg);
	right: var(--space-lg);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: all var(--duration-base) var(--ease-out-expo);
	z-index: 2;
}

.contact-modal-close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-heading);
	border-color: var(--color-border-glow);
}

.contact-modal-header {
	margin-bottom: var(--space-2xl);
	position: relative;
	z-index: 1;
}

.contact-modal-title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 800;
	color: var(--color-heading);
	line-height: 1.15;
	margin-top: var(--space-md);
}

/* Form */
.contact-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	position: relative;
	z-index: 1;
}

.contact-field-full {
	margin-bottom: var(--space-xl);
}

.contact-field label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.contact-field input,
.contact-field textarea {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-heading);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	outline: none;
	transition: all var(--duration-base) var(--ease-out-expo);
	width: 100%;
	box-sizing: border-box;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: var(--color-text-dim);
}

.contact-field input:focus,
.contact-field textarea:focus {
	border-color: var(--color-primary);
	background: rgba(222, 146, 63, 0.04);
	box-shadow: 0 0 0 3px rgba(222, 146, 63, 0.1), 0 0 20px rgba(222, 146, 63, 0.05);
}

.contact-field textarea {
	resize: vertical;
	min-height: 100px;
}

.contact-submit {
	width: 100%;
	justify-content: center;
	font-size: var(--text-base) !important;
	padding: var(--space-lg) var(--space-2xl) !important;
	position: relative;
	z-index: 1;
}

/* Divider */
.contact-divider {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin: var(--space-2xl) 0;
	position: relative;
	z-index: 1;
}

.contact-divider::before,
.contact-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.contact-divider span {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-dim);
	white-space: nowrap;
}

/* Contact info cards */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	position: relative;
	z-index: 1;
}

.contact-info-item {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--text-sm);
	transition: all var(--duration-base) var(--ease-out-expo);
}

a.contact-info-item:hover {
	border-color: var(--color-border-glow);
	background: rgba(222, 146, 63, 0.04);
	color: var(--color-heading);
}

a.contact-info-item:hover .contact-info-icon {
	color: var(--color-primary);
	box-shadow: 0 0 15px rgba(222, 146, 63, 0.2);
}

.contact-info-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: rgba(222, 146, 63, 0.06);
	color: var(--color-text-muted);
	transition: all var(--duration-base) var(--ease-out-expo);
}

.contact-info-icon svg {
	width: 18px;
	height: 18px;
}

/* Modal mobile */
@media (max-width: 640px) {
	.contact-modal-panel {
		padding: var(--space-xl);
	}

	.contact-form-grid {
		grid-template-columns: 1fr;
	}

	.contact-modal-container {
		width: 95%;
		max-height: 95vh;
	}
}

/* Body blur when modal open */
body.modal-open {
	overflow: hidden;
}

/* Field error state */
.contact-field-error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.contact-error-msg {
	font-size: var(--text-xs);
	color: #ef4444;
	margin-top: 2px;
}

/* Success state */
.contact-success {
	text-align: center;
	padding: var(--space-2xl) 0;
}

.contact-success svg {
	margin: 0 auto var(--space-lg);
	display: block;
}

.contact-success h3 {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-heading);
	margin-bottom: var(--space-sm);
}

.contact-success p {
	color: var(--color-text-muted);
	font-size: var(--text-base);
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity var(--duration-glacial) var(--ease-out-expo),
		transform var(--duration-glacial) var(--ease-out-expo);
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(-40px);
	transition:
		opacity var(--duration-glacial) var(--ease-out-expo),
		transform var(--duration-glacial) var(--ease-out-expo);
}
.reveal-left.visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(40px);
	transition:
		opacity var(--duration-glacial) var(--ease-out-expo),
		transform var(--duration-glacial) var(--ease-out-expo);
}
.reveal-right.visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-scale {
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity var(--duration-glacial) var(--ease-out-expo),
		transform var(--duration-glacial) var(--ease-out-expo);
}
.reveal-scale.visible {
	opacity: 1;
	transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity var(--duration-slow) var(--ease-out-expo),
		transform var(--duration-slow) var(--ease-out-expo);
}
.stagger-children.visible > *:nth-child(1) {
	transition-delay: 0ms;
}
.stagger-children.visible > *:nth-child(2) {
	transition-delay: 100ms;
}
.stagger-children.visible > *:nth-child(3) {
	transition-delay: 200ms;
}
.stagger-children.visible > *:nth-child(4) {
	transition-delay: 300ms;
}
.stagger-children.visible > *:nth-child(5) {
	transition-delay: 400ms;
}
.stagger-children.visible > *:nth-child(6) {
	transition-delay: 500ms;
}
.stagger-children.visible > *:nth-child(7) {
	transition-delay: 600ms;
}
.stagger-children.visible > *:nth-child(8) {
	transition-delay: 700ms;
}

.stagger-children.visible > * {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */

.cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--color-primary);
	border-radius: var(--radius-full);
	pointer-events: none;
	z-index: 99999;
	transition: transform var(--duration-fast);
	mix-blend-mode: difference;
}

.cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border: 1.5px solid rgba(222, 146, 63, 0.4);
	border-radius: var(--radius-full);
	pointer-events: none;
	z-index: 99998;
	transition: all 0.15s var(--ease-out-quart);
	mix-blend-mode: difference;
}

.cursor-ring.hovering {
	width: 60px;
	height: 60px;
	border-color: var(--color-primary);
	background: rgba(222, 146, 63, 0.05);
}

@media (pointer: coarse) {
	.cursor-dot,
	.cursor-ring {
		display: none;
	}
}

/* ============================================================
   MAGNETIC BUTTON EFFECT
   ============================================================ */

.magnetic {
	transition: transform var(--duration-base) var(--ease-out-quart);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--color-bg-glass);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   WORDPRESS SPECIFIC
   ============================================================ */

.wp-block-post-content {
	max-width: 750px;
	margin: 0 auto;
}

.wp-block-post-content h2 {
	margin-top: var(--space-3xl);
	margin-bottom: var(--space-lg);
}

.wp-block-post-content p {
	margin-bottom: var(--space-lg);
}

/* WordPress admin bar fix */
body.admin-bar .site-nav {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .site-nav {
		top: 46px;
	}
}

/* Gallery / Image blocks */
.wp-block-image img {
	border-radius: var(--radius-lg);
	border: var(--glass-border);
}

.wp-block-gallery {
	gap: var(--space-md) !important;
}

/* Code blocks */
pre,
code {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

pre {
	background: var(--color-bg-elevated);
	border: var(--glass-border);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	overflow-x: auto;
}

code {
	background: var(--color-bg-glass);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
}

pre code {
	background: none;
	padding: 0;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.reveal,
	.reveal-left,
	.reveal-right,
	.reveal-scale {
		opacity: 1;
		transform: none;
	}
	.stagger-children > * {
		opacity: 1;
		transform: none;
	}
	.cursor-dot,
	.cursor-ring {
		display: none;
	}
	html {
		scroll-behavior: auto;
	}
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
	body {
		background: #fff;
		color: #000;
	}
	.site-nav,
	.cursor-dot,
	.cursor-ring,
	.hero-bg,
	.marquee-wrap,
	.footer-socials {
		display: none;
	}
	.hero {
		min-height: auto;
	}
}