/* BuildWithZam — v3. Grounded in the actual build environment: a phone, a terminal, three shipped apps. */
:root{
  --bg:#08090b; --surface:#111214; --surface-2:#18191c;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.16);
  --text:#f2f2f0; --text-dim:#9a9a9e; --text-faint:#5c5c61;
  --accent:#ff5a4d; --accent-soft:rgba(255,90,77,.14);
  --good:#5fc992;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box; min-width:0;}
html,body{margin:0; overflow-x:hidden; background:var(--bg);}
body{color:var(--text); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; letter-spacing:.01em; line-height:1.6; -webkit-font-smoothing:antialiased;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important;}}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
code{font-family:var(--mono); font-size:.92em; color:var(--text); background:var(--surface-2); padding:.1em .4em; border-radius:5px;}
h1,h2,h3,h4{margin:0; letter-spacing:-0.02em; font-weight:700;}
p{margin:0 0 14px; color:var(--text-dim);}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

/* reveal-on-scroll — one gentle fade+lift per section, once, respects reduced-motion above */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.lede{font-size:16px; max-width:56ch;}
.kicker{font-family:var(--mono); font-size:13px; color:var(--accent); margin-bottom:16px; display:block;}

/* nav */
.site-nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; backdrop-filter:blur(14px); background:rgba(8,9,11,.72); border-bottom:1px solid var(--border);}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; color:var(--text);}
.mark{width:26px; height:26px; border-radius:8px; object-fit:cover; border:1px solid var(--border-2); transition:transform .25s var(--ease);}
.brand:hover .mark{transform:scale(1.08);}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:16px; width:38px; height:38px; cursor:pointer;}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14px; color:var(--text-dim);}
.nav-links a{transition:color .18s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-links a.gh{color:var(--text); border:1px solid var(--border); padding:7px 14px; border-radius:999px; font-weight:600; font-size:13px; transition:border-color .18s ease;}
.nav-links a.gh:hover{border-color:var(--border-2);}
@media (max-width:760px){
  .nav-toggle{display:block;}
  .nav-links{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:2px; background:var(--bg); border-bottom:1px solid var(--border); padding:10px 24px 16px; opacity:0; transform:translateY(-8px); pointer-events:none; transition:.18s ease;}
  .nav-links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-links a{padding:9px 0; width:100%;}
  .nav-links a.gh{margin-top:8px; width:fit-content;}
}

/* section rhythm */
.section{padding:64px 0; border-bottom:1px solid var(--border);}
.section.no-border{border-bottom:none;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px;}
.section-head h2{font-size:1.5rem;}
.section-head .link{font-size:13.5px; color:var(--text-dim); font-weight:600; transition:color .18s ease;}
.section-head .link:hover{color:var(--text);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-size:14px; font-weight:600; border:1px solid var(--border); transition:.18s ease;}
.btn-primary{background:var(--text); color:var(--bg); border-color:var(--text);}
.btn-primary:hover{opacity:.88; transform:translateY(-1px);}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border-2);}
.btn-ghost:hover{background:var(--surface-2); transform:translateY(-1px);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}

/* hero */
.hero{padding:60px 0 20px;}
.hero .wrap{display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(2rem,4.4vw,2.85rem); line-height:1.14;}
.hero .lede{margin:18px 0 26px;}
@media (max-width:900px){ .hero{padding:32px 0 8px;} .hero .wrap{grid-template-columns:1fr; gap:32px;} .hero-visual{order:-1;} .phone{width:280px;} }

/* hero terminal visual — the actual build environment, not stock art */
.hero-visual{display:flex; justify-content:center;}
.phone{width:250px; padding:14px 11px 20px; border-radius:32px; background:linear-gradient(180deg,#1c1d20,#101113); border:1px solid var(--border-2); box-shadow:0 40px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);}
.phone-notch{width:64px; height:6px; border-radius:4px; background:#000; margin:0 auto 12px;}
.term{background:#000; border-radius:13px; overflow:hidden; border:1px solid rgba(255,255,255,.08);}
.term-bar{display:flex; align-items:center; gap:6px; padding:9px 10px; background:#0f0f10;}
.term-bar span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16);}
.term-title{margin-left:6px; font-family:var(--mono); font-size:10px; color:var(--text-faint);}
.term-body{padding:14px 12px; font-family:var(--mono); font-size:10.5px; line-height:1.9; min-height:150px;}
.term-body .prompt{color:var(--accent);}
.term-body .dim{color:var(--text-faint);}
.cursor{display:inline-block; background:var(--text); width:6px; height:11px; animation:blink 1s step-end infinite; vertical-align:middle;}
@keyframes blink{50%{opacity:0;}}

/* project rows — an index, not identical cards */
.proj-list{display:flex; flex-direction:column;}
.proj-row{display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:center; padding:22px 16px; margin:0 -16px; border-radius:14px; border-bottom:1px solid var(--border); transition:background .18s ease;}
a.proj-row:hover{background:rgba(255,255,255,.025);}
.proj-list a.proj-row:last-child{border-bottom:none;}
.proj-shot{aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid var(--border-2); background:#000;}
.proj-shot img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .45s var(--ease);}
a.proj-row:hover .proj-shot img{transform:scale(1.06);}
.proj-head{display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
.proj-num{font-family:var(--mono); font-size:12px; color:var(--text-faint); letter-spacing:.02em;}
.proj-info h3{font-size:18px; margin:0; transition:color .2s ease;}
a.proj-row:hover .proj-info h3{color:var(--accent);}
.proj-status{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--good); margin-left:auto;}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--good); flex-shrink:0; animation:statusPulse 2.4s ease-in-out infinite;}
.proj-info p{font-size:14.5px; margin-bottom:10px;}
.proj-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.proj-tags{display:flex; gap:7px; flex-wrap:wrap;}
.proj-tags span{font-family:var(--mono); font-size:11px; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); padding:4px 10px; border-radius:7px;}
.proj-version{font-family:var(--mono); font-size:11px; color:var(--text-faint);}
@media (max-width:640px){ .proj-row{grid-template-columns:1fr;} .proj-status{margin-left:0;} }

/* project peek-carousel — swipeable screenshots, prev/next peeking at the edges */
.pswipe{padding:8px 0 4px; text-align:center;}
.pswipe-crumb{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:26px;}
.pswipe-c-item{font-family:var(--mono); font-size:12px; color:var(--text-faint); cursor:pointer; padding-bottom:6px; border-bottom:2px solid transparent; transition:.2s ease;}
.pswipe-c-item:hover{color:var(--text-dim);}
.pswipe-c-item.is-current{font-size:13px; font-weight:600; color:var(--text); border-bottom-color:var(--accent);}
.pswipe-c-sep{color:var(--text-faint); font-size:11px;}
.pswipe-stagewrap{position:relative; width:min(46vw,190px); margin:0 auto; aspect-ratio:720/1535; perspective:900px;}
.pswipe-glow{position:absolute; inset:-50px; background:radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 65%); filter:blur(22px); z-index:0;}
.pswipe-scene{position:relative; z-index:1; width:100%; height:100%; touch-action:pan-y; cursor:grab; transform-style:preserve-3d;}
.pswipe-scene.dragging{cursor:grabbing;}
.pswipe-face{position:absolute; inset:0; display:block; border-radius:18px; overflow:hidden; border:1px solid var(--border-2); background:#000; transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;}
.pswipe-face.instant{transition:none;}
.pswipe-face::after{content:"";position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);}
.pswipe-face img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none;}
.pswipe-floor{width:56%; height:20px; margin:8px auto 0; background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent 75%);}
.pswipe-info{margin-top:24px; min-height:78px; transition:opacity .15s ease;}
.pswipe-info.is-swapping{opacity:0;}
.pswipe-info h3{font-size:18px; margin:0 0 6px;}
.pswipe-info p{font-size:14px; color:var(--text-dim); max-width:44ch; margin:0 auto 10px; line-height:1.55;}
.pswipe-tags{display:flex; gap:7px; justify-content:center; flex-wrap:wrap;}
.pswipe-tags span{font-family:var(--mono); font-size:11px; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); padding:4px 10px; border-radius:7px;}
@media (min-width:640px){ .pswipe-stagewrap{width:min(24vw,175px);} }

/* about teaser + generic split */
.split{display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start;}
.split h2{font-size:1.5rem; margin-bottom:12px;}
.split p{font-size:15px; max-width:56ch;}
@media (max-width:700px){ .split{grid-template-columns:1fr;} }
.stack-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.stack-row span{font-family:var(--mono); font-size:12px; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); padding:6px 12px; border-radius:8px;}

/* contact strip on homepage */
.cta{padding:52px 0;}
.cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta h2{font-size:1.5rem; margin-bottom:6px;}
.status-dot{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim);}
.status-dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--good); animation:statusPulse 2.4s ease-in-out infinite;}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(95,201,146,.45);} 50%{box-shadow:0 0 0 4px rgba(95,201,146,0);}}

footer{padding:36px 0 max(28px, env(safe-area-inset-bottom,0px));}
footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.copy{font-size:12.5px; color:var(--text-faint);}
.f-links{display:flex; gap:18px; font-size:13px; color:var(--text-dim);}
.f-links a{transition:color .18s ease;}
.f-links a:hover{color:var(--text);}

/* about page */
.page-head{padding:56px 0 8px;}
.about-body p{font-size:16px; max-width:64ch;}
.about-body p:last-child{color:var(--text); font-weight:600;}

/* contact page */
.contact-hero{padding:72px 0 56px; text-align:center;}
.contact-hero .kicker{display:inline-block;}
.contact-links{display:flex; flex-direction:column; gap:10px; max-width:380px; margin:26px auto;}
.contact-links a{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-radius:14px; background:var(--surface); border:1px solid var(--border); font-weight:600; font-size:14.5px; transition:border-color .18s ease, transform .18s ease, background .18s ease;}
.contact-links a:hover{border-color:var(--border-2); background:var(--surface-2); transform:translateX(4px);}
.contact-links .handle{font-family:var(--mono); font-weight:400; color:var(--text-dim); font-size:12.5px;}
.contact-hero .status-dot{justify-content:center;}

/* project detail page */
.detail-head{padding:52px 0 0;}
.detail-head h1{margin:10px 0 12px;}
.detail-head .tagline{font-size:16px; max-width:52ch;}
.detail-shot{border-radius:18px; overflow:hidden; border:1px solid var(--border-2); margin-top:28px; box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.detail-shot img{transition:transform .5s var(--ease);}
.detail-shot:hover img{transform:scale(1.035);}
.detail-grid{display:grid; grid-template-columns:1fr 250px; gap:56px; padding:48px 0;}
.dblock{margin-bottom:32px;}
.dblock h2{font-size:1.05rem; margin-bottom:10px;}
.dblock p, .dblock li{font-size:15px;}
.dblock ul{margin:0; padding-left:20px;}
.dblock li{margin-bottom:6px;}
.side-box{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:14px;}
.side-box h4{font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:10px;}
.side-box .val{display:inline-flex; align-items:center; gap:7px; color:var(--text); font-weight:600; font-size:14px;}
.side-box .proj-version{display:block; margin-top:8px;}
.side-tags{display:flex; gap:6px; flex-wrap:wrap;}
.side-tags span{font-family:var(--mono); font-size:11px; color:var(--text-dim); background:var(--surface-2); padding:4px 9px; border-radius:6px;}
.note{font-size:13px; margin-bottom:8px;}
.repo-link{font-size:13.5px; font-weight:600; color:var(--text);}
.prevnext{display:flex; justify-content:space-between; padding:0 0 44px; font-size:14px; font-weight:600; color:var(--text-dim);}
.prevnext a{transition:color .18s ease;}
.prevnext a:hover{color:var(--text);}
@media (max-width:760px){ .detail-grid{grid-template-columns:1fr;} }

/* detail page — badges under the tagline */
.badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.badge-row span{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); padding:6px 12px; border-radius:999px;}
.badge-row span:first-child{color:var(--accent); background:var(--accent-soft); border-color:rgba(255,90,77,.3);}

/* detail page — numbered engineering highlights */
.highlight-list{display:flex; flex-direction:column;}
.highlight-item{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border);}
.highlight-item:last-child{border-bottom:none; padding-bottom:0;}
.highlight-item .h-num{font-family:var(--mono); font-size:12px; color:var(--accent); flex-shrink:0; width:20px; padding-top:2px;}
.highlight-item p{margin:0; font-size:14.5px; color:var(--text-dim);}

/* detail page — grouped tech-stack pills */
.stack-groups{display:grid; grid-template-columns:1fr 1fr; gap:22px 28px;}
.stack-group h5{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px;}
.stack-group .tags{display:flex; gap:7px; flex-wrap:wrap;}
.stack-group .tags span{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); background:var(--surface); border:1px solid var(--border); padding:5px 10px; border-radius:7px;}
@media (max-width:600px){ .stack-groups{grid-template-columns:1fr;} }

/* detail page — architecture code window (echoes the hero terminal) */
.code-win{background:#000; border-radius:13px; overflow:hidden; border:1px solid var(--border-2);}
.code-win .win-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:#0f0f10;}
.code-win .win-bar span:not(.win-title){width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); flex-shrink:0;}
.code-win .win-title{margin-left:6px; font-family:var(--mono); font-size:11px; color:var(--text-faint);}
.code-win pre{margin:0; padding:16px 18px; font-family:var(--mono); font-size:11.5px; line-height:1.8; color:var(--text-dim); overflow-x:auto;}
.code-win .c-file{color:var(--text);}
.code-win .c-dim{color:var(--text-faint);}
.arch-caption{font-size:13px; color:var(--text-faint); margin-top:12px;}

/* detail page — sidebar quick stats */
.side-stats{display:flex; flex-direction:column; gap:9px;}
.side-stats .row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px;}
.side-stats .row .k{color:var(--text-faint);}
.side-stats .row .v{font-family:var(--mono); color:var(--text); font-weight:600; text-align:right;}

/* 404 */
.notfound{padding:110px 0; text-align:center;}
.notfound h1{margin:10px 0 10px;}
.notfound .btn{margin-top:20px;}