:root { --ink:#10152d; --night:#101a45; --cream:#f8f6ec; --lime:#9cdf34; --green:#3f9c4b; --blue:#42b9ef; --violet:#8155e7; --pink:#fd5b9e; --orange:#ff9d3b; --line:rgba(16,21,45,.15); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font:400 16px/1.6 Inter,Arial,sans-serif; } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.5rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 clamp(1.25rem,5vw,5rem); position:absolute; inset:0 0 auto; z-index:5; color:#fff; }.brand { font:800 1.05rem 'Press Start 2P',monospace; letter-spacing:-.1em; }.brand span { color:var(--lime); }.site-nav { display:flex; gap:2rem; font-weight:700; font-size:.85rem; }.site-nav a:hover { color:var(--lime); }.menu-toggle { display:none; }
.section { padding:clamp(5rem,10vw,9rem) clamp(1.25rem,7vw,8rem); }.hero { min-height:760px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:2rem; position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg,#111b46 0%,#273d91 55%,#7b55e0 100%); }.hero::before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px); background-size:42px 42px; }.hero-copy,.hero-art { position:relative; z-index:1; }.eyebrow,.card-tag { margin:0 0 1rem; font:700 .72rem 'Press Start 2P',monospace; letter-spacing:.02em; }.eyebrow { color:var(--lime); }.hero h1,.section-heading h2,.contact h2 { margin:0; font:800 clamp(2.8rem,6vw,6.4rem)/.98 Inter,sans-serif; letter-spacing:-.07em; }.hero h1 em,.contact h2 em { color:var(--lime); font-style:normal; }.hero-text { max-width:31rem; margin:1.75rem 0 2rem; font-size:1.08rem; color:#e8eafd; }.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:.85rem 1.2rem; border:2px solid transparent; font-weight:800; transition:transform .2s,background .2s; }.button:hover { transform:translate(-3px,-3px); }.button-primary { color:var(--ink); background:var(--lime); box-shadow:5px 5px 0 #080c21; }.button-ghost { border-color:rgba(255,255,255,.75); }.button-ghost:hover { background:#fff; color:var(--ink); }
.hero-art { height:430px; }.sun { position:absolute; width:108px; height:108px; right:12%; top:5%; background:#ffc455; box-shadow:12px 12px 0 rgba(255,196,85,.25); }.cloud { position:absolute; width:100px; height:25px; background:#cbe6ff; box-shadow:25px -25px #cbe6ff,50px 0 #cbe6ff; opacity:.85; }.cloud-one { top:30%; left:4%; }.cloud-two { top:14%; right:24%; transform:scale(.55); }.floating-island { position:absolute; width:280px; height:160px; bottom:15px; left:50%; transform:translateX(-50%); filter:drop-shadow(12px 16px 0 rgba(4,8,29,.25)); }.grass { height:44px; background:repeating-linear-gradient(90deg,#78bc36 0 28px,#94d748 28px 56px); }.dirt { height:115px; background:linear-gradient(135deg,#a75c35 25%,#844529 25% 50%,#a75c35 50% 75%,#6c3827 75%); background-size:36px 36px; clip-path:polygon(0 0,100% 0,87% 64%,70% 80%,45% 100%,20% 77%,7% 48%); }.tree { position:absolute; left:58px; bottom:112px; width:24px; height:80px; background:#6d452b; }.tree i,.tree b,.tree span { position:absolute; display:block; width:75px; height:55px; background:#398849; }.tree i { left:-27px; top:-50px; }.tree b { left:20px; top:-33px; }.tree span { left:-9px; top:-85px; }.glider { position:absolute; right:1%; top:38%; width:126px; height:16px; background:var(--pink); transform:rotate(-15deg); box-shadow:0 6px #b43677; }.glider::before,.glider::after { content:""; position:absolute; width:56px; height:16px; background:#ff82b6; top:0; }.glider::before { left:-50px; }.glider::after { right:-50px; }.glider i { position:absolute; width:6px; height:48px; left:60px; top:13px; background:#fff; }.glider span { position:absolute; width:16px; height:19px; left:55px; top:59px; background:var(--lime); }.pixel-ground { position:absolute; height:40px; left:0; right:0; bottom:0; background:repeating-linear-gradient(90deg,#539f37 0 32px,#72bd45 32px 64px); z-index:2; }
.section-heading { max-width:850px; margin-bottom:3rem; }.section-heading h2,.contact h2 { font-size:clamp(2.4rem,5vw,5.2rem); }.about { background:#fff; }.about-grid { display:grid; grid-template-columns:270px minmax(0,650px); gap:clamp(2rem,7vw,6rem); align-items:center; }.avatar-art { width:230px; height:230px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--violet)); box-shadow:14px 14px 0 var(--ink); }.avatar-head { width:105px; height:115px; position:relative; background:#e8a77a; box-shadow:inset 0 -17px #c98262; }.avatar-head::before { content:""; position:absolute; width:100%; height:38px; top:-15px; background:#25233b; box-shadow:20px -14px #25233b; }.avatar-head i,.avatar-head b { position:absolute; width:15px; height:15px; top:49px; background:var(--ink); }.avatar-head i { left:24px; }.avatar-head b { right:24px; }.lead { font-size:clamp(1.2rem,2.3vw,1.8rem); line-height:1.45; font-weight:600; }.stat-row { display:flex; gap:clamp(1.4rem,5vw,4rem); margin-top:2.5rem; }.stat-row div { display:grid; }.stat-row strong { color:var(--violet); font:1.6rem 'Press Start 2P',monospace; }.stat-row span { margin-top:.35rem; color:#56576a; font-size:.78rem; }
.projects { color:#fff; background:var(--night); }.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }.project-card { min-height:340px; display:flex; flex-direction:column; padding:2rem; background:#1e2a5a; border:1px solid rgba(255,255,255,.12); transition:transform .25s; }.project-card:hover { transform:translateY(-8px); }.project-build { background:linear-gradient(150deg,#367f46,#1b3e44); }.project-play { background:linear-gradient(150deg,#553abe,#bd4dd0); }.project-lab { background:linear-gradient(150deg,#ef6f56,#ec9c3b); }.card-icon { width:55px; height:55px; display:grid; place-items:center; margin-bottom:2.8rem; color:var(--ink); background:var(--lime); font-size:1.8rem; }.project-play .card-icon { background:#b9e8ff; }.project-lab .card-icon { background:#fff0c9; }.card-tag { color:rgba(255,255,255,.75); font-size:.6rem; }.project-card h3 { margin:0; font-size:1.65rem; line-height:1.1; }.project-card p:not(.card-tag) { flex:1; color:rgba(255,255,255,.85); }.project-card a { align-self:flex-start; font-weight:800; border-bottom:2px solid currentColor; }.project-card a span { color:var(--lime); }
.gallery { background:#f1eefb; }.section-note { color:#65617a; }.gallery-grid { display:grid; grid-template-columns:1.3fr .7fr 1fr; grid-template-rows:220px 220px; gap:1rem; }.gallery-card { position:relative; overflow:hidden; min-height:160px; margin:0; color:#fff; background:#263d88; }.gallery-card:nth-child(1) { grid-row:span 2; }.gallery-card:nth-child(4) { grid-column:span 2; }.gallery-shape { position:absolute; inset:0; background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.18) 48% 54%,transparent 54%),repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 20px,transparent 20px 40px); }.placeholder-one { background:linear-gradient(145deg,#37a262,#0f5350); }.placeholder-one .gallery-shape { inset:18% 20%; background:linear-gradient(90deg,#67ba42 0 36%,#3c8647 36% 64%,#91db4f 64%); box-shadow:25px 25px 0 #6d3b29; }.placeholder-two { background:linear-gradient(145deg,#ff7e6a,#e93781); }.placeholder-three { background:linear-gradient(145deg,#4cc5ee,#6154de); }.placeholder-four { background:linear-gradient(145deg,#282a58,#7653d4); }.gallery-card figcaption { position:absolute; left:1.15rem; bottom:1rem; font-weight:800; }.gallery-card figcaption span { display:block; font-size:.74rem; font-weight:400; opacity:.78; }.contact { text-align:center; color:#fff; background:linear-gradient(135deg,#1d2f69,#673cc9); }.contact .hero-actions { justify-content:center; margin-top:2rem; }.contact p:not(.eyebrow) { max-width:540px; margin:1.25rem auto 0; color:#e6e7fa; }.contact-note { font-size:.8rem; }.contact code { color:var(--lime); } footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem clamp(1.25rem,7vw,8rem); color:#77758a; background:#0c1027; font-size:.8rem; }
.update-badge { display:inline-block; margin:0 0 1.1rem; padding:.45rem .65rem; color:var(--lime); border:1px solid rgba(156,223,52,.55); background:rgba(5,10,36,.28); font:700 .6rem 'Press Start 2P',monospace; letter-spacing:.02em; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:none; }
@media (max-width:760px) { .site-header { min-height:64px; }.menu-toggle { display:block; z-index:3; padding:.45rem .6rem; color:#fff; background:transparent; border:1px solid currentColor; font:700 .65rem 'Press Start 2P',monospace; }.site-nav { display:none; position:absolute; top:64px; right:1.25rem; padding:1rem; gap:1rem; flex-direction:column; background:#151d46; box-shadow:5px 5px 0 rgba(0,0,0,.2); }.site-nav.open { display:flex; }.hero { min-height:780px; grid-template-columns:1fr; padding-top:8rem; }.hero-art { height:270px; }.sun { transform:scale(.7); }.glider { transform:scale(.7) rotate(-15deg); }.about-grid,.project-grid { grid-template-columns:1fr; }.avatar-art { width:190px; height:190px; }.gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:190px 190px 190px; }.gallery-card:nth-child(1) { grid-row:span 2; }.gallery-card:nth-child(4) { grid-column:span 1; } footer { flex-direction:column; } }
@media (max-width:430px) { .section { padding-left:1.25rem; padding-right:1.25rem; }.hero { min-height:720px; }.hero-art { transform:scale(.84); transform-origin:center bottom; }.stat-row { gap:1rem; }.stat-row strong { font-size:1.2rem; }.gallery-grid { grid-template-columns:1fr; grid-template-rows:170px; }.gallery-card:nth-child(1),.gallery-card:nth-child(4) { grid-row:auto; grid-column:auto; } }