/*
Theme Name: Akshay Portfolio
Theme URI: https://akshay-kadam.cryzent.in
Author: Akshay Ashok Kadam
Author URI: https://akshay-kadam.cryzent.in
Description: A dark, product-grade portfolio theme — glowing hero with a 3D stack of product screens, glass bento tiles with cursor spotlight, project showcases, a contact form that saves to the database, and an interactive terminal.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: akshay-portfolio
*/

/* ============ Tokens ============ */
:root {
	--bg: #08090a;
	--bg-2: #0e0f11;
	--line: rgba(255, 255, 255, .08);
	--line-2: rgba(255, 255, 255, .14);
	--ink: #f7f8f8;
	--ink-2: #c9ccd3;
	--muted: #8a8f98;
	--faint: #5c616b;
	--accent: #7c83ff;
	--accent-2: #a78bfa;
	--glow: 94, 106, 210;
	--s-bg: #0d0e10;
	--s-panel: #15161a;
	--s-line: rgba(255, 255, 255, .07);
	--s-ink: #ececf1;
	--s-muted: #7d828c;
	--f-sans: "Geist", "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--f-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", Consolas, monospace;
	--wrap: 1200px;
	--gutter: clamp(20px, 4vw, 48px);
	--ease: cubic-bezier(.22, 1, .36, 1);
	--glass: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
	--hl: inset 0 1px 0 rgba(255, 255, 255, .07);
	color-scheme: dark;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: 17px; line-height: 1.6; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
::selection { background: rgba(124, 131, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, transparent 75%); }

/* ============ Header ============ */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(8, 9, 10, .6); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.logo { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
.logo::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: conic-gradient(from 210deg, #7c83ff, #a78bfa, #f0abfc, #7c83ff); box-shadow: 0 0 18px rgba(124, 131, 255, .55); }
.nav { justify-self: center; }
.nav__list { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .02); }
.nav__list a { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .2s, background .2s; }
.nav__list a:hover { color: var(--ink); }
.nav__list a.is-active { color: var(--ink); background: rgba(255, 255, 255, .07); }
.header__right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; position: relative; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-toggle span:first-child { top: 16px; }
.menu-toggle span:last-child { top: 23px; }
.menu-open .menu-toggle span:first-child { top: 19.5px; transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { top: 19.5px; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 64px 0 0; z-index: 99; background: var(--bg); padding: 24px var(--gutter) 40px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a { display: block; font-size: 32px; font-weight: 600; letter-spacing: -.03em; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mobile-menu__foot { margin-top: auto; color: var(--muted); font-size: 15px; }

/* ============ Buttons & links ============ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: background .25s, border-color .25s, box-shadow .3s, transform .2s var(--ease); }
.btn:active { transform: scale(.98); }
.btn--primary { background: #fff; color: #08090a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 30px -6px rgba(var(--glow), .55); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 40px -4px rgba(var(--glow), .8); }
.btn--quiet { background: var(--glass); border-color: var(--line-2); color: var(--ink); box-shadow: var(--hl); }
.btn--quiet:hover { border-color: rgba(255, 255, 255, .28); }
.btn--small { height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn--block { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 500; font-size: 15px; }
.link svg { width: 16px; height: 16px; color: var(--accent); transition: transform .3s var(--ease); }
.link:hover svg { transform: translate(2px, -2px); }
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; line-height: 1.25; }
.roll__t { display: inline-block; transition: transform .5s var(--ease); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .5s var(--ease); }
a:hover > .roll .roll__t, a:hover > .roll::after, .btn:hover .roll .roll__t, .btn:hover .roll::after { transform: translateY(-100%); }

/* ============ Sections ============ */
.section { padding: clamp(80px, 9vw, 136px) 0; position: relative; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 4vw, 56px); }
.head__title { font-size: clamp(34px, 4.4vw, 60px); background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .5)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.head__note { color: var(--muted); max-width: 380px; font-size: 16px; }
.section + .section::before, .strip + .section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(900px, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); }

/* ============ Hero ============ */
.hero { position: relative; padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 7vw, 104px); isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -220px; width: 1200px; height: 720px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .42), rgba(var(--glow), .12) 55%, transparent); }
.hero::after { content: ""; position: absolute; z-index: -1; right: 4%; top: 30%; width: 520px; height: 420px; pointer-events: none; background: radial-gradient(closest-side, rgba(167, 139, 250, .22), transparent); }
.hero__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero__status { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); padding: 6px 14px 6px 12px; border-radius: 999px; }
.hero__status::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: linear-gradient(90deg, rgba(124, 131, 255, .8), rgba(255, 255, 255, .14), rgba(167, 139, 250, .7)); }
.hero__status::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: #0d0e13; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 10px #3ee08f; animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(62, 224, 143, .5); } 80%, 100% { box-shadow: 0 0 0 8px rgba(62, 224, 143, 0); } }
.hero__title { margin-top: 24px; font-size: clamp(42px, 5.3vw, 80px); line-height: 1.02; letter-spacing: -.05em; font-weight: 600; color: #fff; }
.hero__title .hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .hw > span { display: inline-block; background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { margin-top: 22px; max-width: 540px; font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); line-height: 1.6; }
.hero__ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ Hero product stack ============ */
.stack { position: relative; height: clamp(400px, 38vw, 560px); perspective: 1800px; }
.stack::before { content: ""; position: absolute; inset: 15% 5% 0; background: radial-gradient(closest-side, rgba(var(--glow), .45), transparent); z-index: 0; }
.stack__card { position: absolute; container-type: inline-size; border-radius: 14px; transform-style: preserve-3d; will-change: transform; }
.stack__card .screen { transform: none; height: 100%; border-radius: 14px; font-size: max(6px, 1.5cqi); }
.stack__card--0 .screen { font-size: max(6px, 1.25cqi); }
.stack__card--1 { top: 0; right: -2%; width: 64%; aspect-ratio: 4 / 3; z-index: 1; transform: rotateY(-14deg) rotateX(6deg) translateZ(-60px); }
.stack__card--0 { top: 21%; left: 0; width: 80%; aspect-ratio: 16 / 10; z-index: 2; transform: rotateY(-14deg) rotateX(6deg); }
.stack__card--2 { bottom: -4%; right: 2%; width: 38%; aspect-ratio: 3 / 4; z-index: 3; transform: rotateY(-14deg) rotateX(6deg) translateZ(60px); }
.stack__card--2 .screen { font-size: max(6px, 3.2cqi); }
.stack__card--2 .wish__list p:nth-child(n+4) { display: none; }
.stack__chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 21, 26, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--ink); box-shadow: var(--hl), 0 16px 40px -12px rgba(0, 0, 0, .8); white-space: nowrap; }
.stack__chip b { color: #3ee08f; font-family: var(--f-mono); }
.stack__chip--a { left: 4%; bottom: 6%; }
.stack__chip--b { left: 10%; top: 8%; font-family: var(--f-mono); font-size: 12px; }

/* ============ Product screens (dark UI) ============ */
.screen { position: relative; height: 100%; background: var(--s-bg); color: var(--s-ink); border-radius: 14px 14px 0 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px -20px rgba(0, 0, 0, .9); font-size: max(8px, 1.45cqi); line-height: 1.35; transform: translateY(3%); transition: transform .8s var(--ease); display: flex; flex-direction: column; }
.project--wide .screen { font-size: max(8px, 1.3cqi); }
.project__stage:hover .screen { transform: translateY(0); }
.screen__bar { display: flex; align-items: center; gap: .5em; padding: .9em 1.2em; border-bottom: 1px solid var(--s-line); background: #111215; flex: none; }
.screen__bar i { width: .8em; height: .8em; border-radius: 50%; background: #2a2c31; }
.screen__bar span { margin-left: 1em; padding: .25em 1em; background: #1a1b1f; border-radius: 6px; color: var(--s-muted); font-size: .9em; flex: 1; max-width: 26em; }
.screen b { font-weight: 600; }
.screen em { font-style: normal; }
.pos { flex: 1; display: grid; grid-template-columns: 9em 1fr 15em; min-height: 0; }
.pos__cats { padding: 1.2em; border-right: 1px solid var(--s-line); display: grid; align-content: start; gap: .4em; color: var(--s-muted); }
.pos__cats b { color: var(--s-ink); margin-bottom: .4em; }
.pos__cats span { padding: .45em .7em; border-radius: 8px; }
.pos__cats .is-on { background: rgba(124, 131, 255, .14); color: #b4b8ff; font-weight: 600; }
.pos__grid { padding: 1.2em; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: .8em; align-content: stretch; }
.pos__grid div { border: 1px solid var(--s-line); border-radius: 10px; padding: 1em; display: flex; flex-direction: column; justify-content: space-between; background: var(--s-panel); }
.pos__grid div::before { content: ""; display: block; flex: 1; min-height: 1.6em; border-radius: 6px; margin-bottom: .6em; opacity: .85; }
.pos__grid div.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px rgba(124, 131, 255, .7); }
.pos__grid em { color: var(--s-muted); }
.pos__grid div:nth-child(1)::before { background: linear-gradient(135deg, #f6a77a, #c2552c); }
.pos__grid div:nth-child(2)::before { background: linear-gradient(135deg, #f3d48a, #b98a2a); }
.pos__grid div:nth-child(3)::before { background: linear-gradient(135deg, #e9b979, #a1662a); }
.pos__grid div:nth-child(4)::before { background: linear-gradient(135deg, #e8d7b4, #a88d5d); }
.pos__grid div:nth-child(5)::before { background: linear-gradient(135deg, #c98a6c, #6e3721); }
.pos__grid div:nth-child(6)::before { background: linear-gradient(135deg, #d8bfa6, #8d6343); }
.pos__grid div:nth-child(7)::before { background: linear-gradient(135deg, #e49582, #8e3a25); }
.pos__grid div:nth-child(8)::before { background: linear-gradient(135deg, #c8eaa6, #5f9c37); }
.pos__grid div:nth-child(9)::before { background: linear-gradient(135deg, #f0c27e, #a8691d); }
.pos__bill { border-left: 1px solid var(--s-line); padding: 1.2em; display: flex; flex-direction: column; gap: .55em; background: #101114; }
.pos__bill b { margin-bottom: .4em; }
.pos__bill p { display: flex; justify-content: space-between; color: #b9bdc6; }
.pos__tax { color: var(--s-muted) !important; border-top: 1px dashed #2a2c31; padding-top: .55em; }
.pos__total { font-weight: 600; color: var(--s-ink) !important; font-size: 1.15em; }
.pos__bill button { margin-top: auto; border: 0; border-radius: 10px; padding: .9em; background: var(--accent); color: #fff; font-weight: 600; font-size: 1em; cursor: default; box-shadow: 0 6px 20px -6px rgba(124, 131, 255, .9); }
.shop { flex: 1; display: flex; flex-direction: column; padding: 0 1.6em; }
.shop__nav { display: flex; gap: 1.4em; align-items: center; padding: 1.1em 0; color: var(--s-muted); }
.shop__nav b { color: var(--s-ink); margin-right: auto; font-size: 1.1em; }
.shop__nav em { color: var(--s-ink); background: #1d1b18; border: 1px solid #3a3226; padding: .3em .8em; border-radius: 999px; }
.shop__hero { border-radius: 12px; padding: 1.6em; background: linear-gradient(120deg, #2a2118, #3d2f20); display: flex; justify-content: space-between; align-items: flex-end; border: 1px solid #4a3a26; }
.shop__hero p { font-size: 1.5em; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #f6e7cf; }
.shop__hero span { background: #f6e7cf; color: #1a140d; padding: .55em 1em; border-radius: 999px; font-size: .9em; font-weight: 600; }
.shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: 1.2em 0; }
.shop__grid div { display: grid; gap: .25em; }
.shop__grid i { display: block; aspect-ratio: 1; border-radius: 10px; margin-bottom: .4em; border: 1px solid var(--s-line); }
.shop__grid .g1 { background: radial-gradient(circle at 50% 42%, #e3be63 0 14%, #2a2418 15% 22%, #c99a3b 23% 26%, #1a1712 27%); }
.shop__grid .g2 { background: radial-gradient(circle at 44% 40%, #fff 0 6%, #e9e2d6 14%, #b9ad9b 27%, transparent 28%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .4) 0 29%, transparent 30%), #1c1a17; }
.shop__grid .g3 { background: radial-gradient(circle at 50% 50%, #1a1918 0 22%, #9a948f 23% 30%, #1a1918 31%); }
.shop__grid em { color: var(--s-muted); }
.wish { flex: 1; padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: 1em; }
.wish__head { display: flex; justify-content: space-between; align-items: baseline; }
.wish__head b { font-size: 1.35em; letter-spacing: -.02em; }
.wish__head span { color: var(--s-muted); }
.wish__list { display: grid; gap: .7em; }
.wish__list p { display: flex; align-items: center; gap: 1em; padding: .8em; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-panel); }
.wish__list i { width: 3.2em; height: 3.2em; border-radius: 9px; flex: none; }
.wish__list .w1 { background: linear-gradient(135deg, #a78bfa, #6d4fd8); }
.wish__list .w2 { background: linear-gradient(135deg, #7c9cff, #3f5bd8); }
.wish__list .w3 { background: linear-gradient(135deg, #f7b38e, #c4683b); }
.wish__list .w4 { background: linear-gradient(135deg, #7fe0b5, #2e9c6c); }
.wish__list .w5 { background: linear-gradient(135deg, #f5d27a, #c39429); }
.wish__list span { display: grid; flex: 1; color: var(--s-muted); }
.wish__list span b { color: var(--s-ink); }
.wish__list em { padding: .4em .9em; border-radius: 999px; background: #8b6cf6; color: #fff; font-weight: 500; }
.wish__list em.is-done { background: rgba(139, 108, 246, .16); color: #c4b5fd; }
.wish__cta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; background: #fff; color: #0d0e10; border-radius: 12px; padding: 1em 1.2em; }

/* ============ Tech strip ============ */
.strip { border-block: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.strip__track { display: flex; gap: 56px; width: max-content; padding: 24px 0; animation: strip 50s linear infinite; }
.strip__track span { font-size: 17px; font-weight: 500; color: var(--faint); letter-spacing: -.01em; white-space: nowrap; transition: color .3s; }
.strip__track span:hover { color: var(--ink); }
@keyframes strip { to { transform: translateX(-50%); } }

/* ============ Cursor spotlight (glass surfaces) ============ */
.spotlight { --mx: -999px; --my: -999px; }
.spotlight::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; padding: 1px; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(150, 156, 255, 1), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.spotlight::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(460px circle at var(--mx) var(--my), rgba(124, 131, 255, .13), transparent 60%); opacity: 0; transition: opacity .3s; }
.spotlight:hover::after, .spotlight:hover::before { opacity: 1; }

/* ============ Bento ============ */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 2.6vw, 34px); min-height: 360px; display: flex; flex-direction: column; gap: 28px; box-shadow: var(--hl); }
.tile > * { position: relative; z-index: 1; }
.tile h3 { font-size: clamp(21px, 1.9vw, 26px); }
.tile p { color: var(--muted); margin-top: 8px; max-width: 42ch; font-size: 15.5px; }
.tile--fe { grid-column: span 2; background: radial-gradient(80% 70% at 85% 100%, rgba(var(--glow), .2), transparent 70%), var(--glass); }
.tile--api { background: radial-gradient(90% 60% at 50% 0%, rgba(167, 139, 250, .14), transparent 70%), var(--glass); }
.kit { margin-top: auto; display: grid; gap: 14px; }
.kit__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kit__btn { background: var(--accent); color: #fff; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 500; box-shadow: 0 6px 24px -6px rgba(124, 131, 255, .8); }
.kit__btn--ghost { background: rgba(255, 255, 255, .05); color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.kit__toggle { width: 46px; height: 28px; border-radius: 999px; background: #3ee08f; position: relative; box-shadow: 0 0 16px rgba(62, 224, 143, .4); }
.kit__toggle i { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.kit__input { flex: 1; min-width: 180px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--faint); }
.kit__badge { background: rgba(62, 224, 143, .12); color: #5ef0a6; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.kit__tabs { display: inline-flex; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 10px; padding: 3px; font-size: 13px; }
.kit__tabs > * { padding: 6px 12px; border-radius: 8px; color: var(--muted); }
.kit__tabs b { background: rgba(255, 255, 255, .1); color: var(--ink); font-weight: 500; }
.kit__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #ffd6a5, #f4978e); border: 2px solid #121317; }
.kit__avatar--2 { margin-left: -22px; background: linear-gradient(135deg, #a5b4fc, #6366f1); }
.kit__card { display: flex; align-items: center; gap: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); border-radius: 16px; padding: 12px; max-width: 420px; }
.kit__card i { width: 52px; height: 52px; border-radius: 10px; background: radial-gradient(circle at 44% 40%, #fff 0 6%, #e9e2d6 14%, #b9ad9b 27%, transparent 28%), #1c1a17; flex: none; }
.kit__card div { display: grid; flex: 1; font-size: 14px; }
.kit__card span { color: var(--muted); font-size: 13px; }
.kit__card .kit__stars { color: #fbbf24; font-size: 13px; letter-spacing: 1px; }
.api { margin: auto 0 0; font: 12.5px/1.75 var(--f-mono); color: #c9ccd3; background: rgba(0, 0, 0, .45); border: 1px solid var(--line); border-radius: 16px; padding: 18px; overflow-x: auto; }
.api__m { color: #fff; background: var(--accent); border-radius: 6px; padding: 1px 6px; }
.api__c { color: var(--faint); }
.api__ok { color: #3ee08f; }
.api__k { color: #a5b4fc; } .api__n { color: #fcd34d; } .api__s { color: #f9a8d4; }
.cms { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.cms li { font-size: 14.5px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--ink-2); }
.cms li:first-child { background: rgba(62, 224, 143, .1); border-color: rgba(62, 224, 143, .3); color: #5ef0a6; }
.cms li:nth-child(2) { background: rgba(124, 131, 255, .12); border-color: rgba(124, 131, 255, .35); color: #b4b8ff; }
.chunks { margin-top: auto; display: grid; gap: 10px; }
.chunks p { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; margin: 0; max-width: none; font: 12.5px var(--f-mono); color: var(--muted); }
.chunks i { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); position: relative; overflow: hidden; }
.chunks i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(124, 131, 255, .8); transform-origin: 0 50%; animation: chunk 2.6s var(--ease) infinite alternate; }
.chunks i.is-lazy::after { background: repeating-linear-gradient(90deg, rgba(124, 131, 255, .6) 0 6px, rgba(124, 131, 255, .2) 6px 12px); box-shadow: none; }
.chunks em { font-style: normal; font-size: 11px; color: var(--accent); }
@keyframes chunk { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
.devices { margin-top: auto; display: flex; align-items: flex-end; gap: 12px; height: 120px; }
.devices span { border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 8px; display: grid; gap: 5px; align-content: start; background: rgba(0, 0, 0, .35); }
.devices i { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.devices i:first-child { background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 60%; }
.devices__desk { width: 52%; height: 100%; }
.devices__tab { width: 28%; height: 78%; }
.devices__phone { width: 14%; height: 58%; border-radius: 12px !important; }

/* ============ Work ============ */
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.project { display: flex; flex-direction: column; gap: 22px; }
.project--wide { grid-column: 1 / -1; }
.project__stage { position: relative; display: block; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); aspect-ratio: 16 / 11; container-type: inline-size; padding: 8% 8% 0; box-shadow: var(--hl); background: radial-gradient(70% 70% at 50% 110%, rgba(var(--glow), .55), transparent 70%), linear-gradient(180deg, #101116, #0b0c0f); }
.project--wide .project__stage { aspect-ratio: 16 / 8.2; padding: 5.5% 12% 0; }
.project--1 .project__stage { background: radial-gradient(70% 70% at 50% 110%, rgba(214, 160, 82, .5), transparent 70%), linear-gradient(180deg, #13110e, #0c0b09); }
.project--2 .project__stage { background: radial-gradient(70% 70% at 50% 110%, rgba(167, 139, 250, .5), transparent 70%), linear-gradient(180deg, #121018, #0b0a0f); }
.project__stage .screen { z-index: 1; }
.project__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px 14px 0 0; border: 1px solid rgba(255, 255, 255, .1); }
.project__body { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.project:not(.project--wide) .project__body { flex-direction: column; gap: 14px; }
.project__kind { font-size: 13.5px; color: var(--accent); }
.project--1 .project__kind { color: #e0b06a; }
.project--2 .project__kind { color: var(--accent-2); }
.project__title { font-size: clamp(24px, 2.4vw, 32px); margin-top: 4px; }
.project__excerpt { margin-top: 10px; color: var(--muted); max-width: 560px; }
.project__points { margin-top: 14px; display: grid; gap: 6px; color: var(--ink-2); font-size: 15px; }
.project__points li { padding-left: 18px; position: relative; }
.project__points li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.project__meta { display: grid; gap: 10px; justify-items: start; min-width: 240px; max-width: 300px; }
.project:not(.project--wide) .project__meta { max-width: none; }
.project__stack { font-size: 13.5px; color: var(--faint); line-height: 1.55; }
.also { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15.5px; max-width: 760px; }

/* ============ About ============ */
.about__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.about__lead { margin-top: 20px; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.32; letter-spacing: -.025em; font-weight: 500; max-width: 28ch; color: var(--ink); }
.about__body { margin-top: 20px; color: var(--muted); max-width: 560px; }
.stats { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num { order: -1; font-size: clamp(30px, 3vw, 42px); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: #fff; }
.stat__label { font-size: 13px; color: var(--muted); line-height: 1.35; }
.code-card { position: relative; background: #0c0d10; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: var(--hl), 0 40px 100px -30px rgba(var(--glow), .5); }
.code-card__bar, .terminal__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.code-card__bar i, .terminal__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.code-card__bar i:nth-child(2), .terminal__bar i:nth-child(2) { background: #febc2e; }
.code-card__bar i:nth-child(3), .terminal__bar i:nth-child(3) { background: #28c840; }
.code-card__bar span, .terminal__bar span { margin-left: 10px; font: 13px var(--f-mono); color: var(--faint); }
.code-card__body { margin: 0; padding: 24px; font: 14px/1.85 var(--f-mono); color: #c9ccd3; overflow-x: auto; }
.code-card .k { color: #f472b6; } .code-card .v { color: #a5b4fc; } .code-card .s { color: #fdba74; }
.code-card .n, .code-card .b { color: #fcd34d; } .code-card .f { color: #5eead4; }

/* ============ Experience ============ */
.timeline { display: grid; gap: 16px; }
.job { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 24px; background: var(--glass); box-shadow: var(--hl); overflow: hidden; }
.job > * { position: relative; z-index: 1; }
.job__period { color: var(--muted); font-size: 14px; padding-top: 6px; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.job__role { font-size: clamp(21px, 2vw, 27px); }
.job__company { color: var(--accent); font-weight: 500; margin-top: 4px; }
.job__points { margin-top: 18px; display: grid; gap: 8px; color: var(--ink-2); max-width: 760px; font-size: 16px; }
.job__points li { padding-left: 18px; position: relative; }
.job__points li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.job__tags { margin-top: 18px; font-size: 13.5px; color: var(--faint); font-family: var(--f-mono); }

/* ============ Skills ============ */
.skillgrid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 24px; background: var(--glass); box-shadow: var(--hl); overflow: hidden; }
.skillset { padding: 26px 24px; }
.skillset + .skillset { border-left: 1px solid var(--line); }
.skillset h3 { font-size: 16px; letter-spacing: -.015em; color: var(--ink); }
.skillset ul { margin-top: 14px; display: grid; gap: 7px; color: var(--muted); font-size: 14.5px; }
.extras { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.extras h3 { font-size: 21px; margin-bottom: 14px; }
.wins li, .certs li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.wins b, .certs b { font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.wins span, .certs span { color: var(--muted); font-size: 15px; }

/* ============ Contact ============ */
.contact { isolation: isolate; }
.contact::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(1000px, 100%); height: 520px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .25), transparent); }
.contact__title { font-size: clamp(36px, 5vw, 68px); letter-spacing: -.045em; max-width: 16ch; line-height: 1.04; background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .5)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.contact__quick { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.copy-email { display: inline-flex; align-items: center; gap: 14px; border: 0; background: none; padding: 0; font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-align: left; max-width: 100%; }
.copy-email__text { overflow-wrap: anywhere; border-bottom: 1.5px solid rgba(124, 131, 255, .45); transition: border-color .2s; }
.copy-email:hover .copy-email__text { border-color: var(--accent); }
.copy-email__hint { font-size: 12.5px; font-weight: 500; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; letter-spacing: 0; }
.copy-email.is-copied .copy-email__hint { color: #3ee08f; border-color: rgba(62, 224, 143, .4); }
.contact__socials { display: flex; gap: 10px; }
.social { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line-2); color: var(--ink); transition: border-color .2s, box-shadow .3s; }
.social:hover { border-color: var(--accent); box-shadow: 0 0 20px -4px rgba(124, 131, 255, .7); }
.social svg { width: 19px; height: 19px; }
.contact__grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 3vw, 34px); display: grid; gap: 16px; box-shadow: var(--hl); overflow: hidden; }
.form > * { position: relative; z-index: 1; }
.form__title { font-size: 21px; margin-bottom: 4px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 15.5px; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124, 131, 255, .18); }
.form__status { font-size: 14px; min-height: 1.4em; }
.form__status.ok { color: #3ee08f; }
.form__status.err { color: #ff7a7a; }
.form.is-sending button { opacity: .6; pointer-events: none; }
.terminal { background: #0a0b0d; border: 1px solid var(--line-2); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; min-height: 360px; cursor: text; box-shadow: var(--hl), 0 40px 100px -40px rgba(var(--glow), .5); }
.terminal__body { flex: 1; padding: 20px; font: 13.5px/1.75 var(--f-mono); color: #c9ccd3; overflow-y: auto; max-height: 520px; }
.terminal__out p { white-space: pre-wrap; word-break: break-word; }
.terminal__out .t-cmd b { color: #a5b4fc; font-weight: 400; }
.terminal__out .t-res { color: var(--muted); margin-bottom: 10px; }
.terminal__out .t-res a { color: #a5b4fc; text-decoration: underline; }
.terminal__out .t-hl { color: #fdba74; }
.terminal__line { display: flex; gap: 10px; align-items: center; }
.terminal__line label { white-space: nowrap; color: var(--faint); }
.t-user { color: #a5b4fc; }
.terminal__line input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: inherit; caret-color: var(--accent); }

/* ============ Footer ============ */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 36px; font-size: 14px; color: var(--faint); }
.site-footer__inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__links a:hover { color: var(--ink); }

/* ============ Generic pages ============ */
.page-wrap { max-width: 820px; margin: 0 auto; padding: 96px var(--gutter); min-height: 70vh; }
.page-head { margin-bottom: 32px; }
.section__title { font-size: clamp(34px, 4.2vw, 56px); }
.entry { border-top: 1px solid var(--line); }
.entry__card { display: block; padding: 28px 0; }
.entry__card:hover .entry__title { color: var(--accent); }
.entry__meta { font-size: 13px; color: var(--muted); }
.entry__title { font-size: clamp(26px, 3vw, 40px); margin: 8px 0; transition: color .2s; }
.entry--single { border: 0; }
.entry--single .entry__title { font-size: clamp(36px, 5vw, 60px); margin-bottom: 32px; }
.entry__content { font-size: 18px; color: var(--ink-2); }
.entry__content a { color: var(--accent); text-decoration: underline; }
.entry__content p { margin-bottom: 1.2em; }
.entry__content pre { background: var(--bg-2); border: 1px solid var(--line); padding: 16px; border-radius: 12px; overflow: auto; font-family: var(--f-mono); }
.notfound { display: grid; gap: 20px; justify-items: start; padding-top: 6vh; }
.notfound p { color: var(--muted); }
.mono { font-family: var(--f-mono); }
.c-accent { color: var(--accent); }

/* ============ Motion hooks ============ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
	.nav { display: none; }
	.menu-toggle { display: block; }
	.site-header__inner { grid-template-columns: 1fr auto; }
	.hero__inner, .about__grid, .contact__grid, .extras { grid-template-columns: 1fr; }
	.stack { height: clamp(320px, 62vw, 520px); max-width: 720px; }
	.bento { grid-template-columns: 1fr 1fr; }
	.tile--fe { grid-column: 1 / -1; }
	.skillgrid { grid-template-columns: repeat(2, 1fr); }
	.skillset, .skillset + .skillset { border-left: 0; border-bottom: 1px solid var(--line); }
	.skillset:nth-child(even) { border-left: 1px solid var(--line); }
	.project--wide .project__stage { padding: 6% 6% 0; aspect-ratio: 16 / 10; }
	.project--wide .project__body { flex-direction: column; gap: 14px; }
	.project__meta { max-width: none; }
}
@media (max-width: 720px) {
	body { font-size: 16px; }
	.header__right .btn { display: none; }
	.hero::before { width: 700px; height: 520px; top: -160px; }
	.hero::after { display: none; }
	.stack { height: 300px; }
	.stack__chip { font-size: 11px; padding: 6px 10px; }
	.stack__chip--b { display: none; }
	.bento, .projects { grid-template-columns: 1fr; }
	.tile { min-height: 0; }
	.chunks p { grid-template-columns: 96px 1fr auto; }
	.project__stage, .project--wide .project__stage { aspect-ratio: 4 / 3.6; padding: 7% 5% 0; border-radius: 20px; }
	.project--wide .screen, .screen { font-size: max(7px, 2.1cqi); }
	.pos { grid-template-columns: 1fr 13em; }
	.pos__cats { display: none; }
	.pos__grid { grid-template-columns: repeat(2, 1fr); }
	.pos__grid div:nth-child(n+9) { display: none; }
	.wish__list p:nth-child(n+5) { display: none; }
	.stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
	.job { grid-template-columns: 1fr; gap: 6px; }
	.skillgrid { grid-template-columns: 1fr; }
	.skillset, .skillset + .skillset, .skillset:nth-child(even) { border-left: 0; }
	.code-card__body { font-size: 11.5px; padding: 18px 16px; }
	.hero__ctas .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}