@import url("https://cdn.jsdelivr.net/gh/willow-god/Sharding-fonts/Yozai-Medium/result.min.css");

:root {
	--md-sys-color-primary: #0061A4;
	--md-sys-color-on-primary: #FFFFFF;
	--md-sys-color-primary-container: #D1E4FF;
	--md-sys-color-on-primary-container: #001D36;
	--md-sys-color-inverse-primary: #9ECAFF;
	--md-sys-color-secondary: #535F70;
	--md-sys-color-on-secondary: #FFFFFF;
	--md-sys-color-secondary-container: #D7E3F7;
	--md-sys-color-on-secondary-container: #101C2B;
	--md-sys-color-tertiary: #6B5778;
	--md-sys-color-on-tertiary: #FFFFFF;
	--md-sys-color-tertiary-container: #F2DAFF;
	--md-sys-color-on-tertiary-container: #251431;
	--md-sys-color-error: #BA1A1A;
	--md-sys-color-on-error: #FFFFFF;
	--md-sys-color-error-container: #FFDAD6;
	--md-sys-color-on-error-container: #410002;
	--md-sys-color-success: #386A20;
	--md-sys-color-on-success: #FFFFFF;
	--md-sys-color-success-container: #B7F397;
	--md-sys-color-on-success-container: #0C2200;
	--md-sys-color-background: #FAFCFE;
	--md-sys-color-on-background: #1A1C1E;
	--md-sys-color-surface: #FAFCFE;
	--md-sys-color-on-surface: #1A1C1E;
	--md-sys-color-surface-variant: #DEE3EA;
	--md-sys-color-on-surface-variant: #41474E;
	--md-sys-color-outline: #71787F;
	--md-sys-color-outline-variant: #C1C7CE;
	--md-sys-color-scrim: #000000;
	--md-sys-color-shadow: #000000;
	--md-sys-color-surface-container-lowest: #FFFFFF;
	--md-sys-color-surface-container-low: #F3F5F8;
	--md-sys-color-surface-container: #EDEFF3;
	--md-sys-color-surface-container-high: #E7EAEE;
	--md-sys-color-surface-container-highest: #E2E6EA;
	--md-sys-shape-corner-none: 0px;
	--md-sys-shape-corner-extra-small: 4px;
	--md-sys-shape-corner-small: 8px;
	--md-sys-shape-corner-medium: 12px;
	--md-sys-shape-corner-large: 16px;
	--md-sys-shape-corner-extra-large: 28px;
	--md-sys-shape-corner-full: 9999px;
	--md-sys-elevation-0: none;
	--md-sys-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
	--md-sys-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30);
	--md-state-hover: 0.08;
	--md-state-focus: 0.12;
	--md-state-press: 0.12
}

[data-theme="dark"] {
	--md-sys-color-primary: #9ECAFF;
	--md-sys-color-on-primary: #003258;
	--md-sys-color-primary-container: #00497F;
	--md-sys-color-on-primary-container: #D1E4FF;
	--md-sys-color-inverse-primary: #0061A4;
	--md-sys-color-secondary: #BBC7DB;
	--md-sys-color-on-secondary: #253341;
	--md-sys-color-secondary-container: #3B4858;
	--md-sys-color-on-secondary-container: #D7E3F7;
	--md-sys-color-tertiary: #D6BCE4;
	--md-sys-color-on-tertiary: #3B2948;
	--md-sys-color-tertiary-container: #523F5F;
	--md-sys-color-on-tertiary-container: #F2DAFF;
	--md-sys-color-error: #FFB4AB;
	--md-sys-color-on-error: #690005;
	--md-sys-color-error-container: #93000A;
	--md-sys-color-on-error-container: #FFDAD6;
	--md-sys-color-success: #9CD67E;
	--md-sys-color-on-success: #073900;
	--md-sys-color-success-container: #1F5300;
	--md-sys-color-on-success-container: #B7F397;
	--md-sys-color-background: #111316;
	--md-sys-color-on-background: #E2E2E6;
	--md-sys-color-surface: #111316;
	--md-sys-color-on-surface: #E2E2E6;
	--md-sys-color-surface-variant: #41474E;
	--md-sys-color-on-surface-variant: #C1C7CE;
	--md-sys-color-outline: #8B9199;
	--md-sys-color-outline-variant: #41474E;
	--md-sys-color-surface-container-lowest: #0C0F12;
	--md-sys-color-surface-container-low: #1A1D20;
	--md-sys-color-surface-container: #1E2124;
	--md-sys-color-surface-container-high: #282B2F;
	--md-sys-color-surface-container-highest: #33373B
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent
}

body {
	font-family: 'Yozai Medium';
	background: var(--md-sys-color-background);
	color: var(--md-sys-color-on-background);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background 0.4s ease, color 0.4s ease;
	overflow-x: hidden
}

a {
	color: inherit;
	text-decoration: none
}

img {
	max-width: 100%;
	display: block
}

.click-ripple {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid #9ECAFF;
    border-radius: 50%;
    animation: ripple 0.8s cubic-bezier(0, 0.2, 0.8, 1);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    z-index: 9999;
}

@keyframes ripple {
    to {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

[data-theme="dark"] .click-ripple {
    border-color: #9ECAFF;
}


.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	user-select: none
}

.md-display-large {
	font-size: clamp(2.4rem, 6vw, 3.5rem);
	line-height: 1.12;
	font-weight: 400;
	letter-spacing: -0.25px
}

.md-headline-large {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	line-height: 1.18;
	font-weight: 400
}

.md-title-large {
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 400
}

.md-body-large {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 400
}

.md-label-large {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.1px
}

#progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 4px;
	width: 0%;
	background: var(--md-sys-color-primary);
	border-radius: 0 0 9999px 9999px;
	z-index: 1100;
	transition: width 0.1s linear
}

.top-app-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: 64px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 16px;
	background: color-mix(in srgb, var(--md-sys-color-surface-container) 85%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, box-shadow 0.3s, background 0.3s
}

.top-app-bar.scrolled {
	border-bottom-color: var(--md-sys-color-outline-variant);
	box-shadow: var(--md-sys-elevation-1)
}

.app-bar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0
}

.brand-logo {
	width: 40px;
	height: 40px;
	border-radius: var(--md-sys-shape-corner-large);
	background: var(--md-sys-color-primary-container);
	color: var(--md-sys-color-on-primary-container);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px
}

.app-bar-title {
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.15px;
	color: var(--md-sys-color-on-surface)
}

.app-bar-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0;
	flex-shrink: 1;
	min-width: 0
}

.app-bar-nav::-webkit-scrollbar {
	display: none
}

.nav-indicator {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-primary-container);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	z-index: 0;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	will-change: transform, width
}

.nav-indicator.dragging {
	transition: width 0.1s ease-out
}

.nav-item {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: var(--md-sys-shape-corner-full);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--md-sys-color-on-surface-variant);
	cursor: pointer;
	transition: color 0.2s;
	white-space: nowrap;
	z-index: 1;
	flex-shrink: 0;
	user-select: none;
	-webkit-user-select: none
}

.nav-item::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--md-sys-color-on-surface);
	opacity: 0;
	transition: opacity 0.2s
}

.nav-item:hover::before {
	opacity: var(--md-state-hover)
}

.nav-item:focus-visible::before {
	opacity: var(--md-state-focus)
}

.nav-item .label {
	position: relative
}

.nav-item.active {
	color: var(--md-sys-color-on-primary-container)
}

.nav-item.active::before {
	opacity: 0
}

.nav-item.no-transition {
	transition: none !important
}

.app-bar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px
}

.icon-button {
	position: relative;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	border-radius: var(--md-sys-shape-corner-full);
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: background 0.2s
}

.icon-button::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--md-sys-color-on-surface-variant);
	opacity: 0;
	transition: opacity 0.2s
}

.icon-button:hover::before {
	opacity: var(--md-state-hover)
}

.icon-button:active::before {
	opacity: var(--md-state-press)
}

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 120px 24px 96px;
	overflow: hidden;
	background: var(--md-sys-color-surface-container-low)
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(60% 50% at 20% 20%, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent), transparent 60%), radial-gradient(50% 50% at 85% 75%, color-mix(in srgb, var(--md-sys-color-tertiary) 14%, transparent), transparent 60%);
	pointer-events: none
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 800px
}

.hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-highest);
	color: var(--md-sys-color-on-surface-variant);
	border: 1px solid var(--md-sys-color-outline-variant);
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 28px;
	box-shadow: var(--md-sys-elevation-1)
}

.hero-chip .status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--md-sys-color-success);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-success) 25%, transparent);
	animation: pulse 2s ease-in-out infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: 0.4
	}
}

.hero h1 {
	margin-bottom: 20px;
	color: var(--md-sys-color-on-surface)
}

.hero h1 .grad {
	background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent
}

.hero p.tagline {
	font-size: 1.125rem;
	color: var(--md-sys-color-on-surface-variant);
	margin-bottom: 40px;
	line-height: 1.7;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto
}

.hero-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap
}

.md-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 24px;
	border: none;
	cursor: pointer;
	border-radius: var(--md-sys-shape-corner-full);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1px;
	transition: box-shadow 0.2s, background 0.2s, color 0.2s
}

.md-btn .material-symbols-outlined {
	font-size: 18px
}

.md-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.2s
}

.md-btn:hover::before {
	opacity: var(--md-state-hover)
}

.md-btn:active::before {
	opacity: var(--md-state-press)
}

.md-btn-filled {
	background: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	box-shadow: var(--md-sys-elevation-1)
}

.md-btn-filled::before {
	background: var(--md-sys-color-on-primary)
}

.md-btn-filled:hover {
	box-shadow: var(--md-sys-elevation-2)
}

.md-btn-tonal {
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container)
}

.md-btn-tonal::before {
	background: var(--md-sys-color-on-secondary-container)
}

.md-btn-outlined {
	background: transparent;
	color: var(--md-sys-color-primary);
	border: 1px solid var(--md-sys-color-outline)
}

.md-btn-outlined::before {
	background: var(--md-sys-color-primary)
}

.md-btn-lg {
	height: 48px;
	padding: 0 28px;
	font-size: 0.9375rem
}

section.block {
	padding: 96px 24px
}

.container {
	max-width: 1120px;
	margin: 0 auto
}

.section-header {
	text-align: center;
	margin-bottom: 56px
}

.section-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--md-sys-color-primary);
	margin-bottom: 12px
}

.section-header h2 {
	color: var(--md-sys-color-on-surface);
	margin-bottom: 12px
}

.section-header p {
	color: var(--md-sys-color-on-surface-variant);
	font-size: 1.05rem;
	max-width: 560px;
	margin: 0 auto
}

.bg-surface-low {
	background: var(--md-sys-color-surface-container-low)
}

.bg-surface {
	background: var(--md-sys-color-surface)
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px
}

.stat-card {
	background: var(--md-sys-color-surface-container-highest);
	border-radius: var(--md-sys-shape-corner-large);
	padding: 32px 20px;
	text-align: center;
	box-shadow: var(--md-sys-elevation-1);
	transition: transform 0.3s, box-shadow 0.3s
}

.stat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--md-sys-elevation-3)
}

.stat-num {
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 6px;
	color: var(--md-sys-color-primary);
	font-variant-numeric: tabular-nums
}

.stat-label {
	font-size: 0.875rem;
	color: var(--md-sys-color-on-surface-variant);
	font-weight: 500
}

.about-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 56px;
	align-items: center
}

.about-text p {
	font-size: 1.05rem;
	line-height: 1.9;
	margin-bottom: 18px;
	color: var(--md-sys-color-on-surface)
}

.about-text .hl {
	color: var(--md-sys-color-primary);
	font-weight: 700
}

.about-card {
	position: relative;
	padding: 36px;
	border-radius: var(--md-sys-shape-corner-extra-large);
	background: linear-gradient(140deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
	color: var(--md-sys-color-on-primary);
	overflow: hidden;
	box-shadow: var(--md-sys-elevation-2)
}

.about-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.22), transparent 55%)
}

.about-card .big-icon {
	font-size: 3.5rem;
	margin-bottom: 18px;
	position: relative
}

.about-card h3 {
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 10px;
	position: relative
}

.about-card p.lead {
	font-size: 1rem;
	opacity: 0.92;
	line-height: 1.7;
	margin-bottom: 20px;
	position: relative
}

.info-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: var(--md-sys-shape-corner-medium);
	font-size: 0.95rem;
	font-weight: 500
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px
}

.feature-card {
	background: var(--md-sys-color-surface-container-low);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-sys-shape-corner-large);
	padding: 32px 24px;
	text-align: center;
	transition: box-shadow 0.3s, transform 0.3s
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--md-sys-elevation-2)
}

.feature-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--md-sys-shape-corner-medium);
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: var(--md-sys-color-on-primary-container);
	background: var(--md-sys-color-primary-container)
}

.feature-card h3 {
	font-size: 1.1rem;
	font-weight: 500;
	margin-bottom: 10px;
	color: var(--md-sys-color-on-surface)
}

.feature-card p {
	font-size: 0.9rem;
	color: var(--md-sys-color-on-surface-variant);
	line-height: 1.6
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px
}

.project-card {
	position: relative;
	overflow: hidden;
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-large);
	padding: 24px;
	box-shadow: var(--md-sys-elevation-1);
	transition: transform 0.3s, box-shadow 0.3s
}

.project-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--md-sys-elevation-3)
}

.project-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px
}

.project-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--md-sys-shape-corner-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: #fff
}

.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-success-container);
	color: var(--md-sys-color-on-success-container);
	font-size: 0.75rem;
	font-weight: 500
}

.status-chip .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--md-sys-color-success)
}

.project-card h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 8px
}

.project-card h3 a {
	color: var(--md-sys-color-on-surface);
	transition: color 0.2s
}

.project-card h3 a:hover {
	color: var(--md-sys-color-primary)
}

.project-card .desc {
	font-size: 0.9rem;
	color: var(--md-sys-color-on-surface-variant);
	line-height: 1.6;
	margin-bottom: 16px
}

.project-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 18px
}

.md-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface-variant);
	border: 1px solid var(--md-sys-color-outline-variant);
	font-size: 0.75rem;
	font-weight: 500
}

.project-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--md-sys-color-primary);
	transition: gap 0.2s
}

.project-link:hover {
	gap: 10px
}

.project-pending {
	border: 2px dashed var(--md-sys-color-outline-variant);
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--md-sys-color-on-surface-variant);
	min-height: 220px
}

.project-pending .material-symbols-outlined {
	font-size: 2rem;
	margin-bottom: 12px;
	opacity: 0.5
}

.project-pending p {
	font-size: 0.95rem;
	font-weight: 500
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px
}

.contact-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--md-sys-color-surface-container-low);
	border-radius: var(--md-sys-shape-corner-large);
	padding: 22px 24px;
	box-shadow: var(--md-sys-elevation-1);
	transition: transform 0.3s, box-shadow 0.3s
}

.contact-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--md-sys-elevation-2)
}

.contact-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--md-sys-shape-corner-medium);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #fff
}

.contact-info {
	flex: 1;
	min-width: 0
}

.contact-info .label {
	font-size: 0.75rem;
	color: var(--md-sys-color-on-surface-variant);
	margin-bottom: 4px;
	letter-spacing: 0.5px
}

.contact-info .value {
	font-size: 1rem;
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	word-break: break-all
}

.contact-info .value a {
	transition: color 0.2s
}

.contact-info .value a:hover {
	color: var(--md-sys-color-primary)
}

footer {
	background: var(--md-sys-color-surface-container);
	border-top: 1px solid var(--md-sys-color-outline-variant);
	padding: 56px 24px 32px;
	text-align: center
}

.footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 14px
}

.footer-brand .brand-logo {
	width: 34px;
	height: 34px;
	font-size: 20px
}

.footer-desc {
	color: var(--md-sys-color-on-surface-variant);
	font-size: 0.9rem;
	max-width: 440px;
	margin: 0 auto 22px
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 26px;
	flex-wrap: wrap
}

.footer-links a {
	position: relative;
	overflow: hidden;
	padding: 8px 16px;
	border-radius: var(--md-sys-shape-corner-full);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--md-sys-color-on-surface-variant);
	transition: color 0.2s
}

.footer-links a::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--md-sys-color-on-surface);
	opacity: 0;
	transition: opacity 0.2s
}

.footer-links a:hover {
	color: var(--md-sys-color-on-surface)
}

.footer-links a:hover::before {
	opacity: var(--md-state-hover)
}

.footer-copy {
	color: var(--md-sys-color-on-surface-variant);
	font-size: 0.85rem;
	padding-top: 22px;
	border-top: 1px solid var(--md-sys-color-outline-variant)
}

.footer-copy .heart {
	color: var(--md-sys-color-error)
}

#back-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 900;
	width: 56px;
	height: 56px;
	border: none;
	cursor: pointer;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	font-size: 24px;
	box-shadow: var(--md-sys-elevation-3);
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	pointer-events: none;
	transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
	display: flex;
	align-items: center;
	justify-content: center
}

#back-top.show {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto
}

#back-top:hover {
	box-shadow: var(--md-sys-elevation-4);
	transform: translateY(-2px) scale(1.04)
}

#back-top::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--md-sys-color-on-primary);
	opacity: 0;
	transition: opacity 0.2s
}

#back-top:active::before {
	opacity: var(--md-state-press)
}

.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.7s ease
}

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

.reveal-delay-1 {
	transition-delay: 0.08s
}

.reveal-delay-2 {
	transition-delay: 0.16s
}

.reveal-delay-3 {
	transition-delay: 0.24s
}

.reveal-delay-4 {
	transition-delay: 0.32s
}

.bottom-nav {
	display: none !important
}

.hamburger {
	display: none
}

.drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background 0.3s ease
}

.drawer-overlay.open {
	background: rgba(0, 0, 0, 0.4);
	pointer-events: auto
}

.mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1150;
	width: 300px;
	max-width: 85vw;
	background: var(--md-sys-color-surface-container);
	box-shadow: var(--md-sys-elevation-3);
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto
}

.mobile-drawer.open {
	transform: translateX(0)
}

.drawer-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--md-sys-color-outline-variant)
}

.drawer-header .brand-logo {
	width: 36px;
	height: 36px;
	font-size: 20px;
	border-radius: var(--md-sys-shape-corner-medium);
	background: var(--md-sys-color-primary-container);
	color: var(--md-sys-color-on-primary-container);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.drawer-title {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	flex: 1
}

.drawer-close {
	width: 36px;
	height: 36px
}

.drawer-nav {
	padding: 8px 12px;
	flex: 1;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch
}

.drawer-indicator {
	position: absolute;
	left: 12px;
	right: 12px;
	top: 8px;
	height: 48px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-primary-container);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	z-index: 0;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	will-change: transform
}

.drawer-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: var(--md-sys-shape-corner-full);
	color: var(--md-sys-color-on-surface-variant);
	font-size: 0.9rem;
	font-weight: 500;
	transition: color 0.2s;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	z-index: 1;
	flex-shrink: 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y
}

.drawer-item::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--md-sys-color-on-surface);
	opacity: 0;
	transition: opacity 0.2s
}

.drawer-item:hover::before {
	opacity: var(--md-state-hover)
}

.drawer-item .material-symbols-outlined {
	font-size: 22px;
	position: relative
}

.drawer-item .label {
	position: relative
}

.drawer-item.active {
	color: var(--md-sys-color-on-primary-container)
}

.drawer-item.active::before {
	opacity: 0
}

.drawer-divider {
	height: 1px;
	margin: 4px 16px;
	background: var(--md-sys-color-outline-variant)
}

.drawer-actions {
	padding: 8px 12px 16px
}

.drawer-theme-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 16px;
	border: none;
	border-radius: var(--md-sys-shape-corner-full);
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s;
	position: relative;
	overflow: hidden
}

.drawer-theme-toggle::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--md-sys-color-on-surface);
	opacity: 0;
	transition: opacity 0.2s
}

.drawer-theme-toggle:hover::before {
	opacity: var(--md-state-hover)
}

.drawer-theme-toggle:active::before {
	opacity: var(--md-state-press)
}

.drawer-theme-toggle .material-symbols-outlined {
	font-size: 22px;
	position: relative
}

.drawer-theme-toggle .label {
	position: relative
}

.drawer-theme-toggle .material-symbols-outlined {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

.drawer-theme-toggle.spin .material-symbols-outlined {
	transform: rotate(360deg) scale(0.6)
}

@media (max-width:960px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.features-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.projects-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.about-grid {
		grid-template-columns: 1fr
	}
}

@media (max-width:720px) {
	.app-bar-nav {
		display: none
	}

	.desktop-theme-toggle {
		display: none
	}

	.hamburger {
		display: flex
	}

	section.block {
		padding: 72px 20px
	}

	.hero {
		padding: 110px 20px 88px
	}

	#back-top {
		bottom: 24px
	}
}

@media (max-width:560px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px
	}

	.features-grid {
		grid-template-columns: 1fr
	}

	.projects-grid {
		grid-template-columns: 1fr
	}

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

	.hero-actions {
		flex-direction: column;
		align-items: stretch
	}

	.md-btn {
		justify-content: center
	}
}

#theme-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	clip-path: circle(0% at 50% 50%)
}

#theme-overlay.dark-active {
	background: var(--md-sys-color-background);
	clip-path: circle(0% at 50% 50%);
	animation: theme-spread-dark 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

#theme-overlay.light-active {
	background: var(--md-sys-color-background);
	clip-path: circle(0% at 50% 50%);
	animation: theme-spread-light 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes theme-spread-dark {
	0% {
		clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%))
	}

	100% {
		clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%))
	}
}

@keyframes theme-spread-light {
	0% {
		clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%))
	}

	100% {
		clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%))
	}
}

.icon-button .material-symbols-outlined {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

.icon-button.spin .material-symbols-outlined {
	transform: rotate(360deg) scale(0.6)
}