:root {
	--bg: hsl(0 0% 100%);
	--fg: hsl(222 47% 11%);
	--primary: hsl(221 83% 53%);
	--muted: hsl(215 16% 44%);
	--accent: hsl(214 95% 93%);
	--accent-fg: hsl(221 83% 40%);
	--border: hsl(214 28% 90%);
	--secondary: hsl(214 32% 96%);
	--radius: 0.75rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	background: var(--bg);
	color: var(--fg);
	overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.wrap { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
.font-display, h1, h2, h3 { font-family: Sora, Inter, sans-serif; }
::selection { background: hsl(221 83% 53% / 0.18); }

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	border-bottom: 1px solid hsl(214 28% 90% / 0.6);
	background: hsl(0 0% 100% / 0.8);
	backdrop-filter: blur(12px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.brand { display: flex; align-items: center; gap: 0.65rem; font-family: Sora, sans-serif; font-weight: 600; }
.logo {
	width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
	display: grid; place-items: center;
	background: var(--primary); color: #fff; font-size: 0.85rem; font-weight: 700;
}
.nav-desktop, .header-social { display: none; align-items: center; gap: 0.25rem; }
.nav-desktop a {
	padding: 0.5rem 0.9rem; border-radius: 0.4rem;
	font-size: 0.875rem; font-weight: 500; color: var(--muted);
}
.nav-desktop a.is-active, .mobile-nav a.is-active { background: var(--accent); color: var(--accent-fg); }
.header-social a, .menu-btn {
	width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 0.4rem;
	display: grid; place-items: center; background: #fff; color: var(--muted); cursor: pointer;
}
.menu-icon, .close-icon {
	display: block; width: 1.1rem; height: 1.1rem;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.menu-icon[hidden], .close-icon[hidden] { display: none; }
.close-icon {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.mobile-nav { border-top: 1px solid var(--border); background: #fff; padding: 0.5rem 1rem 1rem; }
.mobile-nav a { display: block; padding: 0.75rem 0.75rem; border-radius: 0.4rem; color: var(--muted); font-weight: 500; }
.mobile-social { display: flex; gap: 0.5rem; padding: 0.5rem 0.75rem 0; }
.mobile-social a { flex: 1; border: 1px solid var(--border); text-align: center; color: var(--fg); }

main { padding-top: 4rem; }
.bg-grid {
	background-image:
		linear-gradient(to right, hsl(221 83% 53% / 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, hsl(221 83% 53% / 0.06) 1px, transparent 1px);
	background-size: 44px 44px;
}
.eyebrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.muted { color: var(--muted); line-height: 1.65; }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	height: 3rem; padding: 0 1.5rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
	border: 1px solid transparent; transition: 0.15s ease;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 24px hsl(221 83% 53% / 0.25); }
.btn-ghost { background: #fff; border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.pill {
	display: inline-flex; align-items: center; gap: 0.5rem;
	border: 1px solid hsl(221 83% 53% / 0.25); background: var(--accent);
	color: var(--accent-fg); border-radius: 999px; padding: 0.4rem 0.9rem;
	font-size: 0.75rem; font-weight: 600;
}
.pill-dot { width: 0.375rem; height: 0.375rem; border-radius: 99px; background: var(--primary); }
.chip { display: inline-flex; border-radius: 999px; background: var(--accent); color: var(--accent-fg); padding: 0.25rem 0.65rem; font-size: 0.7rem; font-weight: 500; }
.chip-outline { background: #fff; border: 1px solid var(--border); color: var(--fg); padding: 0.35rem 0.75rem; }

.hero { position: relative; overflow: hidden; padding: 4rem 0; }
.hero-glow {
	position: absolute; top: -8rem; right: 0; width: 24rem; height: 24rem;
	background: hsl(221 83% 53% / 0.1); filter: blur(64px); pointer-events: none;
}
.hero-grid { display: grid; gap: 3rem; align-items: center; min-height: calc(100dvh - 8rem); }
.hero h1 { margin: 1.5rem 0 0; font-size: clamp(2.1rem, 6vw, 3.75rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.name { position: relative; display: inline-block; color: var(--primary); }
.name svg { position: absolute; left: 0; bottom: -0.4rem; width: 100%; }
.hero-copy { margin: 1.5rem 0 0; max-width: 36rem; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.stat-num { font-family: Sora, sans-serif; font-size: 1.5rem; font-weight: 700; margin: 0; }
.stat-label { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--muted); }
.portrait { position: relative; max-width: 24rem; margin-inline: auto; }
.portrait-ring { position: absolute; inset: -0.75rem; border-radius: 1.5rem; background: linear-gradient(135deg, hsl(221 83% 53% / 0.2), transparent, hsl(221 83% 53% / 0.05)); }
.portrait-card { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); box-shadow: 0 25px 50px hsl(221 83% 53% / 0.12); }
.portrait-card img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.portrait-bar {
	position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.75rem 1rem; border-radius: 0.75rem;
	border: 1px solid hsl(0 0% 100% / 0.4); background: hsl(0 0% 100% / 0.85); backdrop-filter: blur(10px);
}
.portrait-bar p { margin: 0; }
.portrait-bar .sub { font-size: 0.75rem; color: var(--muted); }
.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.75rem; }

.marquee { overflow: hidden; border-block: 1px solid var(--border); background: hsl(214 32% 96% / 0.6); padding: 1rem 0; }
.marquee-track { display: flex; width: max-content; gap: 2rem; animation: marquee 28s linear infinite; }
.marquee-item { display: flex; align-items: center; gap: 2rem; white-space: nowrap; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.dot { width: 0.25rem; height: 0.25rem; border-radius: 99px; background: hsl(221 83% 53% / 0.5); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: 5rem 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
.section-head h2, .page-hero h1 { margin: 0.75rem 0 0; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -0.03em; }
.link-more { display: none; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.page-hero { padding: 4rem 0 3.5rem; }
.page-hero p { max-width: 40rem; }

.timeline { margin-top: 3rem; }
.tl-item { position: relative; display: grid; gap: 0.5rem; border-left: 2px solid var(--border); padding: 1.5rem 0 1.5rem 2rem; }
.tl-item::before {
	content: ""; position: absolute; left: -7px; top: 2rem;
	width: 0.75rem; height: 0.75rem; border-radius: 99px; border: 2px solid var(--primary); background: #fff;
}
.tl-period { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.tl-item h3 { margin: 0; font-size: 1.1rem; }
.tl-item .place { margin: 0.2rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.tl-item .desc { margin: 0.5rem 0 0; max-width: 40rem; font-size: 0.875rem; color: var(--muted); }

.band { background: hsl(214 32% 96% / 0.6); }
.cards { display: grid; gap: 1.5rem; margin-top: 3rem; }
.card {
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--border); border-radius: 1rem; background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card[hidden] { display: none; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px hsl(221 83% 53% / 0.1); }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin: 0; font-size: 1.1rem; }
.card:hover h3 { color: var(--primary); }
.card-body .tagline { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.post-meta { display: flex; justify-content: space-between; margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted); }
.post-more { font-weight: 600; color: var(--primary); }
.badge-li, .badge-ig {
	display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content;
	border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.7rem; font-weight: 600;
}
.badge-li { background: #0A66C21A; color: #0A66C2; }
.badge-ig { background: linear-gradient(90deg, #d946ef1a, #f59e0b1a); color: #c026d3; }

.cta {
	position: relative; overflow: hidden; border-radius: 1.5rem;
	background: var(--primary); color: #fff; text-align: center; padding: 3.5rem 1.5rem;
}
.cta h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.cta p { margin: 1rem auto 0; max-width: 36rem; color: #dbeafe; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.btn-white { background: #fff; color: var(--primary); }
.btn-outline { border-color: hsl(0 0% 100% / 0.4); color: #fff; }

.project-split { display: grid; gap: 2.5rem; align-items: start; }
.project-split h2 { margin: 1.25rem 0 0; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.project-split .tagline { margin: 0.5rem 0 0; color: var(--primary); font-weight: 500; }
.feature-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.65rem; }
.feature-list li { display: flex; gap: 0.65rem; font-size: 0.9rem; }
.feature-ico { width: 1.5rem; height: 1.5rem; border-radius: 0.4rem; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex: 0 0 auto; font-size: 0.7rem; }
.dev-pill { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.done-pill { position: absolute; left: 0.75rem; top: 0.75rem; background: hsl(0 0% 100% / 0.9); color: #059669; }

.showcase { overflow: hidden; border-radius: 1rem; border: 1px solid #1e293b; background: #0b1326; box-shadow: 0 28px 70px -28px rgb(15 23 42 / 0.85); }
.winbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid #1e293b; background: #0e1830; }
.win-dot { width: 0.75rem; height: 0.75rem; border-radius: 99px; }
.win-url { margin-left: 0.75rem; border: 1px solid #334155; background: #0f172a; color: #cbd5e1; border-radius: 0.4rem; padding: 0.2rem 0.7rem; font-size: 0.75rem; }
.live { margin-left: auto; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.7rem; font-weight: 600; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 1rem; }
.kpi { border: 1px solid #1e293b; background: #0f172a80; border-radius: 0.75rem; padding: 0.65rem 0.75rem; }
.kpi span { display: block; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.kpi strong { font-size: 0.9rem; }
.bars { display: flex; align-items: end; gap: 0.4rem; height: 6.5rem; padding: 0 1rem 1rem; }
.bar { flex: 1; border-radius: 2px; animation: pulsebar 1.6s ease-in-out infinite alternate; }
@keyframes pulsebar { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }

.showcase-light { border-color: var(--border); background: #fff; box-shadow: 0 24px 60px -24px hsl(221 83% 53% / 0.25); }
.showcase-light .winbar { background: var(--secondary); border-color: var(--border); }
.showcase-light .win-url { background: #fff; color: var(--muted); border-color: var(--border); }
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 1rem; }
.kanban-col { background: var(--secondary); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.65rem; }
.kanban-col p { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.kanban-card { background: #fff; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem 0.65rem; font-size: 0.7rem; font-weight: 500; margin-bottom: 0.5rem; }

.social-row { display: grid; gap: 1rem; margin-top: 2rem; }
.social-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; }
.ico-box { width: 3rem; height: 3rem; border-radius: 0.75rem; display: grid; place-items: center; color: #fff; }
.ico-li { background: #0A66C2; }
.ico-ig { background: linear-gradient(135deg, #f59e0b, #c026d3, #7c3aed); }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter-btn {
	height: 2.5rem; padding: 0 1.25rem; border-radius: 999px; border: 1px solid var(--border);
	background: #fff; color: var(--muted); font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.filter-btn.is-active { background: var(--primary); color: #fff; border-color: transparent; }

.site-footer { border-top: 1px solid var(--border); background: hsl(214 32% 96% / 0.6); padding: 3rem 0 2rem; }
.footer-inner { display: flex; flex-direction: column; gap: 2rem; }
.footer-brand p { margin: 0.75rem 0 0; max-width: 22rem; font-size: 0.875rem; color: var(--muted); }
.footer-cols { display: flex; gap: 3.5rem; }
.footer-label { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.footer-cols ul { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.footer-cols a { font-size: 0.875rem; color: hsl(222 47% 11% / 0.8); }
.footer-cols a:hover { color: var(--primary); }
.footer-bottom { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); }

@media (min-width: 768px) {
	.nav-desktop, .header-social, .link-more { display: flex; }
	.menu-btn, .mobile-nav { display: none !important; }
	.cards { grid-template-columns: repeat(3, 1fr); }
	.tl-item { grid-template-columns: 11rem 1fr; }
	.footer-inner, .footer-bottom { flex-direction: row; justify-content: space-between; }
	.social-row { grid-template-columns: 1fr 1fr; }
	.kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
	.hero-grid, .project-split { grid-template-columns: 1.15fr 0.85fr; }
	.portrait { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.marquee-track, .bar { animation: none; }
}