:root{
  --bg1:#0c0f14;--bg2:#171c25;--text:#f2efe9;--muted:#a3a9b6;
  --accent:#ff5a36;--accent2:#ffb02e;--green:#4ade80;
  --glass:rgba(255,255,255,.07);--border:rgba(255,255,255,.15);--shadow:0 10px 36px rgba(0,0,0,.45);
  --inv:#f2efe9;--invt:#14161a;
  --head:'Plus Jakarta Sans','Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
[data-theme=light]{
  --bg1:#efebe4;--bg2:#fbf9f5;--text:#14161a;--muted:#5d6472;
  --accent:#e8431f;--accent2:#f59e0b;--green:#0f9158;
  --glass:rgba(255,255,255,.62);--border:rgba(20,22,26,.12);--shadow:0 10px 36px rgba(60,40,20,.14);
  --inv:#14161a;--invt:#fbf9f5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--sans);color:var(--text);line-height:1.65;min-height:100vh;background:linear-gradient(160deg,var(--bg2),var(--bg1));overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
.mono{font-family:var(--mono)}
#net{position:fixed;inset:0;z-index:0;pointer-events:none}
main,.nav,.foot{position:relative;z-index:2}
.blob{position:fixed;z-index:0;width:46vmax;height:46vmax;border-radius:50%;filter:blur(110px);opacity:.28;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
.b1{background:var(--accent);top:-15vmax;right:-10vmax}.b2{background:var(--accent2);bottom:-20vmax;left:-12vmax;animation-delay:-8s}.b3{background:#3b82f6;top:35%;left:35%;opacity:.12;animation-delay:-14s}
[data-theme=light] .blob{opacity:.22}
@keyframes drift{to{transform:translate(6vmax,5vmax) scale(1.15)}}
@keyframes rot{to{rotate:360deg}}
.glow{position:fixed;width:380px;height:380px;border-radius:50%;z-index:1;pointer-events:none;background:radial-gradient(circle,rgba(255,90,54,.16),transparent 65%);transform:translate(-50%,-50%);left:50%;top:50%;transition:left .25s,top .25s}

.glass{background:var(--glass);border:1px solid var(--border);border-radius:20px;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--shadow)}

/* logos */
.lg{--s:44px;width:var(--s);height:var(--s);display:inline-grid;place-items:center;flex:none;padding:calc(var(--s)*.18);background:#fff;border-radius:calc(var(--s)*.3);box-shadow:0 4px 14px rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.06)}
.lg img{width:100%;height:100%;object-fit:contain;display:block}
.lg b{display:none;font:800 calc(var(--s)*.3) var(--mono);color:#14161a}
.lg.fail{background:var(--fb,#fff)}.lg.fail b{display:block;color:var(--fc,#14161a)}
.lg.sm{--s:36px}.lg.md{--s:56px}.lg.lgx{--s:68px}
.floaters{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bgl{position:absolute;translate:calc(var(--mx,0)*var(--p)*26px) calc(var(--my,0)*var(--p)*26px);transition:translate .4s ease-out}
.bt{display:block;font:700 var(--fs,1rem) var(--mono);color:var(--accent);opacity:.3;white-space:nowrap;animation:float var(--d) ease-in-out infinite alternate}
.bt:nth-child(even){color:var(--accent2)}
@keyframes float{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-34px) rotate(8deg)}}

/* boot / progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1180px,95%);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.2rem;border-radius:999px}
.logo{font:800 1.1rem var(--head);color:var(--text)}.logo span{color:var(--accent)}
nav{display:flex;gap:.2rem}
nav a{color:var(--muted);padding:.4rem .8rem;border-radius:999px;font-size:.9rem;font-weight:500;transition:.25s}
nav a:hover,nav a.on{color:var(--text);background:rgba(255,90,54,.16)}
nav a.on{color:var(--accent)}
.theme,.burger{background:none;border:1px solid var(--border);color:var(--text);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1.1rem;transition:.3s}
.theme:hover{transform:rotate(180deg);border-color:var(--accent)}
.burger{display:none}

/* hero */
.hero{min-height:100vh;width:min(1180px,92%);margin:0 auto;padding:7.5rem 0 3rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.big{font:800 clamp(2.1rem,4.8vw,3.9rem)/1.1 var(--head);letter-spacing:-.035em}
.big .ln{display:block;overflow:hidden;padding-bottom:.08em}
.big i{display:block;font-style:normal;animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.big .ln:nth-child(2) i{animation-delay:.15s}.big .ln:nth-child(3) i{animation-delay:.3s}
@keyframes up{from{transform:translateY(110%)}}
.star{color:var(--accent);font-style:normal;display:inline-block;animation:rot 7s linear infinite}
.big u{text-decoration:underline wavy var(--accent);text-decoration-thickness:3px;text-underline-offset:.14em}
.tagline{font:600 clamp(.85rem,1.4vw,1rem) var(--head);letter-spacing:.14em;color:var(--muted);margin:1.4rem 0 .6rem;animation:fade .8s .6s both}
.typed-line{color:var(--accent);min-height:1.8rem;animation:fade .8s .7s both}
.lead{color:var(--muted);max-width:50ch;margin-top:.6rem;font-size:1.05rem;line-height:1.75;animation:fade .8s .8s both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
.caret{display:inline-block;width:9px;height:1.1em;background:var(--accent);vertical-align:-.2em;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.6rem 0 1.3rem;animation:fade .8s .9s both}
.card .cta{margin:1.1rem 0 0;animation:none}
.btn{font:600 .95rem var(--sans);color:var(--text);cursor:pointer;padding:.75rem 1.5rem;border-radius:8px;border:1px solid var(--border);background:var(--glass);transition:.3s;display:inline-block;white-space:nowrap}
.btn:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgba(255,90,54,.3)}
.btn.solid{background:var(--inv);color:var(--invt);border-color:var(--inv)}
.btn.line{background:transparent;border:1.5px solid var(--text)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;color:#fff}
.soc-row{display:flex;gap:.6rem;flex-wrap:wrap;animation:fade .8s 1s both}
.soc-row a{transition:.3s;display:inline-block}.soc-row a:hover{transform:translateY(-5px) rotate(-6deg)}
.stage{position:relative;justify-self:center;width:min(100%,430px);aspect-ratio:4/5.2}
.asterisk{position:absolute;width:118%;left:-9%;top:-2%;animation:rot 40s linear infinite;opacity:.9}
.photo-wrap {
    position: absolute;
    width: 90%;
    aspect-ratio: 1 / 1;
    height: auto;
    left: 5%;
    top: 10%;
}

.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    display: block;
    border-radius: 50%;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    animation: fade 1s .3s both;
}

.photo-wrap .ph {
    height: 100%;
    border-radius: 50%;
}
.orbit{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;animation:rot 34s linear infinite}
.o-it{position:absolute;translate:-50% -50%}
.o-it .lg{animation:rot 34s linear infinite reverse}

/* sections */
.sec{width:min(1180px,92%);margin:0 auto;padding:5rem 0 1rem}
#app>.sec:first-child{padding-top:8rem}
.title{font-size:clamp(1.3rem,3.2vw,1.9rem);margin-bottom:1.6rem;color:var(--accent)}
.title::before{content:'~/';color:var(--muted)}
.grid{display:grid;gap:1.4rem}
.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{padding:1.6rem;transition:transform .25s ease,border-color .3s,box-shadow .3s}
.card:hover{border-color:var(--accent);box-shadow:0 0 30px rgba(255,90,54,.18),var(--shadow)}
.card h4{font:700 1.1rem var(--head);letter-spacing:-.01em;margin-bottom:.7rem}
.card p{color:var(--muted)}
.code{padding:1.4rem;font:.85rem/1.8 var(--mono);overflow-x:auto;min-height:260px;white-space:pre-wrap;color:var(--text)}
.k{color:var(--accent)}.s{color:var(--green)}.f{color:var(--accent2)}
.stats{display:flex;gap:1.5rem;margin-top:1.4rem;flex-wrap:wrap}
.stats b{display:block;font:700 1.8rem var(--mono);color:var(--accent)}.stats small{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.chips span{font:.8rem var(--mono);padding:.3rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--glass);transition:.25s}
.chips span:hover{transform:translateY(-3px) scale(1.06)}
.chips.big span{font-size:.9rem;padding:.4rem .9rem}
.note{margin-top:.8rem;font:.85rem var(--mono);color:var(--green)}
.c-c{color:#5c9dff}.c-cpp{color:#c58cff}.c-py{color:#ffd43b}.c-html{color:#ff7a45}.c-css{color:#4aa8ff}.c-js{color:#e6c800}
.tools{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.6rem}
.tool{display:grid;justify-items:center;gap:.4rem;font:.75rem var(--mono);color:var(--muted);transition:.3s;width:76px;text-align:center}
.tool:hover{transform:translateY(-6px) scale(1.08);color:var(--text)}
.marquee{margin-top:1.6rem;overflow:hidden;padding:1rem 0}
.track{display:flex;gap:1.6rem;width:max-content;animation:scroll 34s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

.filters{display:flex;gap:.6rem;margin-bottom:1.4rem;flex-wrap:wrap}
.filters button{font:600 .85rem var(--mono);color:var(--muted);background:var(--glass);border:1px solid var(--border);padding:.45rem 1rem;border-radius:999px;cursor:pointer;transition:.25s}
.filters button.on,.filters button:hover{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.ico{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;margin-bottom:1rem;color:var(--accent);border:1px solid var(--border);background:rgba(255,90,54,.1);font-weight:700}
.timeline{display:grid;gap:1.2rem;border-left:2px dashed var(--accent);padding-left:1.6rem}
.when{color:var(--accent);font-size:.85rem}

/* games */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.3rem}
.game{padding:1.3rem 1rem;text-align:center;transition:transform .3s,border-color .3s,box-shadow .3s}
.game:hover{transform:translateY(-8px) rotate(-1.5deg);border-color:var(--accent);box-shadow:0 14px 40px rgba(255,90,54,.25)}
.gl{width:120px;height:120px;margin:0 auto .9rem;border-radius:28px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c2));font:800 1.7rem var(--head);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.gl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gl.ok span{display:none}
.game figcaption{font:700 .95rem var(--head)}

/* socials & contact */
.info{list-style:none;margin:1rem 0 1.4rem;display:grid;gap:.6rem}
.info li span{display:block;font:.75rem var(--mono);color:var(--muted)}
.socgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem;margin-top:1.4rem}
.socbtn{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;color:var(--text);transition:.3s}
.socbtn:hover{transform:translateY(-4px);border-color:var(--accent)}
.socbtn small{display:block;color:var(--muted);font:.72rem var(--mono)}
.form{display:grid;gap:.9rem;margin-top:1rem}
input,textarea{width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--border);background:var(--glass);color:var(--text);font:inherit;outline:0;transition:.25s}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 16px rgba(255,90,54,.3)}
.status{min-height:1.4rem;font:.85rem var(--mono);color:var(--green)}.status.err{color:#ff6b6b}
.foot{display:grid;justify-items:center;gap:1rem;text-align:center;color:var(--muted);font-size:.8rem;padding:4rem 1rem 2rem}

/* gallery + lightbox */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.shot{position:relative;overflow:hidden;aspect-ratio:4/5;cursor:zoom-in;transition:transform .35s,border-color .3s,box-shadow .3s}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;transition:transform .6s}
.shot:hover{border-color:var(--accent);box-shadow:0 0 30px rgba(255,90,54,.3)}.shot:hover img{transform:scale(1.07)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem .8rem;font-size:.8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.ph{display:grid;place-items:center;text-align:center;width:100%;height:100%;min-height:200px;padding:1rem;border:2px dashed var(--border);border-radius:16px;color:var(--muted);font-size:.78rem;word-break:break-all}
.lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(8,10,14,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lightbox[hidden]{display:none}
.lightbox figure{max-width:min(90vw,820px);text-align:center}
#lbImg img{max-width:100%;max-height:78vh;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow)}
#lbImg .ph{min-width:260px;min-height:260px}
.lightbox figcaption{margin-top:.8rem;color:#f2efe9}
.lb-x,.lb-n{position:absolute;background:var(--glass);border:1px solid var(--border);color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.6rem;cursor:pointer;transition:.25s}
.lb-x{top:20px;right:20px}.lb-n{top:50%;transform:translateY(-50%)}.prev{left:18px}.next{right:18px}
.lb-x:hover,.lb-n:hover{border-color:var(--accent)}

.top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;color:var(--text);cursor:pointer;z-index:50;opacity:0;pointer-events:none;transition:.3s;font-size:1.2rem}
.top.show{opacity:1;pointer-events:auto}.top:hover{transform:translateY(-4px)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120px);padding:.7rem 1.4rem;z-index:80;font:.85rem var(--mono);transition:transform .4s}
.toast.show{transform:translate(-50%,0)}

#app{min-height:80vh}
#app.enter{animation:pageIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(28px) scale(.98);filter:blur(10px)}}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:1100px){
  .burger{display:block}
  nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;padding:.8rem;border-radius:20px;background:var(--glass);border:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:none}
  nav.open{display:flex}.nav{border-radius:24px}
}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:6.5rem}
  .stage{width:min(80%,360px);margin-top:1.5rem}
  .orbit{width:128%}
  .lg.md{--s:46px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ===== v4: project thumbnails, detail page, home social logos ===== */
.proj{display:block;padding:0;overflow:hidden;color:var(--text)}
.thumb{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c2));font:800 2.4rem var(--head);color:#fff}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.thumb.ok span{display:none}
.proj:hover .thumb img{transform:scale(1.08)}
.pbody{padding:1.3rem 1.4rem 1.5rem}
.pbody p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{display:inline-block;margin-top:1rem;font-size:.82rem;color:var(--accent);transition:letter-spacing .3s}
.more::after{content:' \203A'}
.proj:hover .more{letter-spacing:.06em}
.back{display:inline-block;margin-bottom:1.2rem;font-size:.9rem;color:var(--muted)}.back:hover{color:var(--accent)}
.pd-title{font:800 clamp(1.8rem,4.5vw,3rem)/1.1 var(--head);letter-spacing:-.03em;margin-bottom:.8rem}
.pd-desc{max-width:70ch;color:var(--muted);font-size:1.05rem;line-height:1.8;margin:1.1rem 0}
.points{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;margin:1.4rem 0 .5rem}
.points li{padding:.9rem 1.1rem;border-radius:14px;font-weight:500}
.points li::before{content:'\2713';color:var(--green);margin-right:.6rem;font-weight:800}
.pd-title+.chips+.pd-desc+.points+.title{margin-top:3rem}
.pshots .shot{aspect-ratio:16/10}.pshots .shot.wide{grid-column:1/-1;aspect-ratio:16/8}
.pshots .shot img{object-position:center}
.socs{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin:3rem auto 1rem}
.socs a{display:inline-block;transition:.3s}.socs a:hover{transform:translateY(-6px) rotate(-6deg)}
.socs .lg{--s:52px}

/* about photo */
.about-top{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:1.8rem;align-items:center;margin-bottom:1.6rem}
.about-photo img,.about-photo .ph{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;display:block;border-radius:999px 999px 28px 28px;border:1px solid var(--border);box-shadow:0 20px 50px rgba(0,0,0,.4)}
@media(max-width:700px){.about-top{grid-template-columns:1fr}.about-photo{max-width:260px;margin:0 auto}}

/* games: clickable tiles + detail page */
a.game{display:block;color:var(--text)}
.gname{display:block;font:700 .95rem var(--head)}
.gd-head{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1.2rem}
.gd-head .gl{margin:0}.gd-head .pd-desc{margin:.4rem 0 0}
.gd-info{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;padding:1.4rem 1.6rem;margin:1.2rem 0}
.gd-info span{display:block;font:.75rem var(--mono);color:var(--muted)}
.gd-info b{font:700 1.1rem var(--head)}.gd-info em{color:var(--muted);font-size:.85rem}
.gshots .shot{aspect-ratio:16/10}.gshots .shot img{object-fit:contain;background:rgba(0,0,0,.28)}

/* resume */
.resume-bar{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.4rem}
.pdf-wrap{padding:.6rem;overflow:hidden}
.pdf-frame{width:100%;height:80vh;min-height:520px;border:0;border-radius:14px;display:block;background:#fff}
.pdf-fallback{display:grid;gap:1rem;justify-items:center;padding:3rem 1rem;color:var(--muted)}

/* languages + certificates */
.grid.four{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.lang .lvl{display:block;color:var(--accent);font-size:.85rem;margin-bottom:.9rem}
.bar{height:8px;border-radius:999px;background:var(--border);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 1.3s cubic-bezier(.2,.8,.2,1) .3s}
.lang.in .bar i{width:var(--w)}
.cert .thumb{aspect-ratio:4/3}
.lb-pdf{display:block;width:min(90vw,820px);height:78vh;border-radius:14px;background:#fff}

/* project detail sections */
.pd-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.3rem}
.dsec.wide{grid-column:1/-1}
.dsec p{line-height:1.8}
.dlist{list-style:none;display:grid;gap:.55rem}
.dlist li{color:var(--muted);padding-left:1.6rem;position:relative}
.dlist li::before{content:'\2713';position:absolute;left:0;color:var(--green);font-weight:800}
.dlist.ideas li::before{content:'\2192';color:var(--accent)}
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:2.2rem}
.step{position:relative;display:flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;border-radius:12px;border:1px solid var(--border);background:var(--glass);font-weight:600}
.step small{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:.72rem}
.step:not(:last-child)::after{content:'\2192';position:absolute;right:-1.6rem;top:50%;translate:0 -50%;color:var(--accent);font-weight:800}
.muted-note{color:var(--muted)}
@media(max-width:700px){.pd-more{grid-template-columns:1fr}.flow{flex-direction:column;gap:1.8rem}.step:not(:last-child)::after{content:'\2193';right:auto;left:50%;top:auto;bottom:-1.5rem;translate:-50% 0}}


.resume-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.resume-buttons .btn {
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
}

@media(max-width:700px){
  html{scroll-padding-top:76px}
  .nav{top:10px;width:calc(100% - 20px);padding:.55rem .8rem}
  .nav .burger{display:block;order:-1;flex:none}
  .nav .logo{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
  .nav nav{top:58px;max-height:calc(100vh - 82px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg2);border-color:var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav nav a{padding:.65rem .85rem}
  .hero{width:90%;min-height:0;padding:7rem 0 2.5rem;gap:1rem}
  .hero-text{min-width:0}
  .big{font-size:clamp(2rem,10vw,3rem)}
  .tagline{letter-spacing:.1em}
  .lead{font-size:.98rem}
  .stage{width:min(76%,320px);margin-top:1rem}
  .orbit{width:132%}
  .sec{width:90%;padding:3.5rem 0 .5rem}
  #app>.sec:first-child{padding-top:7rem}
  .grid.two,.grid.three,.grid.four,.pd-more{grid-template-columns:minmax(0,1fr)}
  .grid{gap:1rem}
  .card{padding:1.2rem}
  .tools{gap:.7rem}
  .tool{width:68px}
  .stats{gap:1rem}
  .games{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
  .game{padding:1rem .7rem}
  .gl{width:100px;height:100px;border-radius:24px}
  .shots{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
  .pshots .shot.wide{grid-column:auto;aspect-ratio:4/5}
  .gd-info{grid-template-columns:minmax(0,1fr);gap:.8rem;padding:1.1rem}
  .gd-head{gap:1rem}
  .pd-title{font-size:clamp(1.7rem,8vw,2.5rem);overflow-wrap:anywhere}
  .pd-desc{font-size:1rem}
  .filters{gap:.45rem}
  .filters button{padding:.45rem .8rem}
  .pdf-frame{height:65vh;min-height:380px}
  .resume-buttons .btn{padding:10px 16px}
  .lb-x{top:12px;right:12px}
  .lb-n{width:40px;height:40px}
  .prev{left:8px}.next{right:8px}
  .lightbox figure{max-width:calc(100vw - 72px)}
  .foot{padding:3rem 1rem 1.5rem}
}

@media(max-width:420px){
  .nav .logo{font-size:1rem}
  .theme,.burger{width:36px;height:36px}
  .hero{padding-top:6.5rem}
  .cta .btn{padding:.7rem 1rem}
  .stats{gap:.7rem}
  .stats b{font-size:1.5rem}
  .games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:minmax(0,1fr)}
  .shot figcaption{font-size:.72rem}
  .resume-bar .btn{flex:1;text-align:center}
  .lb-n{top:auto;bottom:16px;transform:none}
  .lb-x{width:40px;height:40px}
}