:root{
  --bg:#f6f8fc; --surface:#ffffff; --ink:#111b2e; --muted:#5a667d; --line:#dde3ee;
  --accent:#2563eb; --accent-ink:#ffffff; --warm:#f59e0b; --soft:#e8effd;
  --code-bg:#0f1a30; --code-ink:#d6e2ff; --shadow:0 10px 30px rgba(20,40,90,.08);
  --r:14px; --head:"Sora",system-ui,sans-serif; --body:"DM Sans",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#121c31; --ink:#e8eefc; --muted:#9aa8c4; --line:#22304d;
  --accent:#5b9bff; --accent-ink:#06101f; --warm:#fbbf24; --soft:#172544;
  --code-bg:#08101f; --code-ink:#d6e2ff; --shadow:0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220; --surface:#121c31; --ink:#e8eefc; --muted:#9aa8c4; --line:#22304d;
    --accent:#5b9bff; --accent-ink:#06101f; --warm:#fbbf24; --soft:#172544;
    --code-bg:#08101f; --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.65;font-size:1.0625rem;transition:background .3s,color .3s}
a{color:inherit}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,92%);margin-inline:auto}
.sec{padding:84px 0 0}
h1,h2,h3{font-family:var(--head);line-height:1.2}
h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:32px;display:flex;align-items:center;gap:16px}
h2::after{content:"";flex:1;height:2px;background:var(--line)}
h3{font-size:1.15rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(4%,calc((100% - 1120px)/2));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--head);font-weight:800;font-size:1.3rem;text-decoration:none}
.logo span{color:var(--warm)}
#menu{display:flex;gap:26px}
#menu a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.98rem;transition:color .2s}
#menu a:hover{color:var(--accent)}
.nav-actions{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;cursor:pointer}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.menu-btn{display:none}
.i-sun{display:none}
:root[data-theme="dark"] .i-sun{display:block}
:root[data-theme="dark"] .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .i-sun{display:block}
  :root:not([data-theme="light"]) .i-moon{display:none}
}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;min-height:calc(100vh - 70px);padding-block:48px}
.hello{color:var(--accent);font-weight:700;margin-bottom:6px}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:800;letter-spacing:-.02em}
.role{font-family:var(--head);font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--warm);font-weight:700;margin:6px 0 18px}
.lead{color:var(--muted);max-width:52ch;margin-bottom:28px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;text-decoration:none;font-size:.98rem;transition:transform .2s,border-color .2s,background .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 16px;font-size:.9rem;margin-top:auto;align-self:flex-start}

/* code card: the one memorable element */
.code-card{background:var(--code-bg);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);animation:rise .9s ease both}
.code-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.05)}
.code-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.code-bar i:nth-child(2){background:#febc2e}
.code-bar i:nth-child(3){background:#28c840}
.code-bar span{margin-left:auto;font:.8rem var(--mono);color:#8fa3cc}
.code-card pre{padding:22px;font:.92rem/1.8 var(--mono);color:var(--code-ink);min-height:250px;white-space:pre-wrap}
.k{color:#ff9d6e}.s{color:#9be28c}.t{color:#7cc4ff}.c{color:#6f82ab}
.caret{display:inline-block;width:8px;height:1em;background:var(--warm);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* about */
.about{display:grid;gap:16px;max-width:75ch}
.about p{color:var(--muted)}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.facts li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 22px;min-width:130px}
.facts b{display:block;font:800 1.7rem var(--head);color:var(--accent)}
.facts span{color:var(--muted);font-size:.9rem}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{background:var(--soft);color:var(--accent);padding:4px 12px;border-radius:99px;font-size:.85rem;font-weight:500}

/* skills */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.skill{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.skill h3{margin-bottom:14px}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 18px;border-radius:99px;font:500 .95rem var(--body);cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.card[hidden]{display:none}
.card p:not(.tags):not(.note){color:var(--muted);font-size:.97rem}
.badge{display:inline-block;align-self:flex-start;font-size:.78rem;font-weight:700;color:var(--warm);border:1px solid currentColor;padding:2px 10px;border-radius:6px;margin-right:6px}
.badge.live{color:#16a34a}
.note{font-size:.9rem;color:var(--muted);font-style:italic;margin-top:auto}
.learn-box{margin-top:30px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:var(--soft);border:1px dashed var(--accent);border-radius:var(--r);padding:24px}
.learn-box p{color:var(--muted)}

/* education */
.timeline{border-left:3px solid var(--accent);padding-left:26px;display:grid;gap:28px}
.t-item{position:relative}
.t-item::before{content:"";position:absolute;left:-36px;top:7px;width:15px;height:15px;border-radius:50%;background:var(--warm);border:3px solid var(--bg)}
.t-item p{color:var(--muted)}
.meta{font-weight:700;color:var(--accent)!important;margin-top:4px}

/* activity */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.panel h3{margin-bottom:12px}
.panel ul{padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.panel b{color:var(--ink)}

/* contact */
.contact{display:grid;gap:22px;max-width:640px}
.contact>p{color:var(--muted)}
.links{list-style:none;display:grid;gap:10px}
.links li{display:flex;flex-wrap:wrap;gap:6px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 18px}
.links span{min-width:80px;color:var(--muted)}
.links a{font-weight:700;text-decoration:none;color:var(--accent);word-break:break-all}
.links a:hover{text-decoration:underline}
.contact .btn{justify-self:start}
footer{margin-top:90px;padding:28px 4%;text-align:center;color:var(--muted);border-top:1px solid var(--line);font-size:.93rem}

/* reveal on scroll */
.js .sec{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.js .sec.in{opacity:1;transform:none}

/* mobile */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-block:40px}
  .menu-btn{display:grid}
  #menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);display:none;padding:8px 4%}
  #menu.open{display:flex}
  #menu a{padding:14px 0;border-bottom:1px solid var(--line)}
  #menu a:last-child{border:0}
  .sec{padding-top:64px}
}
@media (max-width:420px){
  .cards,.skill-grid,.two{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
  .btn.small{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .sec{opacity:1;transform:none}
}

/* ===== Interactive layer ===== */
a,button,.chip,.btn,.icon-btn,.card,.skill{cursor:pointer}
.card,.skill{cursor:default}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--accent),var(--warm))}

/* custom cursor (mouse devices only) */
.cursor-dot,.cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
  .js.has-cursor,.js.has-cursor a,.js.has-cursor button,.js.has-cursor .card,.js.has-cursor .skill{cursor:none}
  .has-cursor .cursor-dot,.has-cursor .cursor-ring{display:block;position:fixed;top:0;left:0;z-index:200;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
  .has-cursor.moved .cursor-dot,.has-cursor.moved .cursor-ring{opacity:1}
  .cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--warm)}
  .cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:2px solid var(--accent);transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
  .cursor-ring.hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--accent) 16%,transparent)}
  .cursor-ring.down{width:26px;height:26px;margin:-13px 0 0 -13px}
}

/* spotlight that follows the mouse inside cards */
.card,.skill,.panel{position:relative;overflow:hidden}
.card::before,.skill::before,.panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
.card:hover::before,.skill:hover::before,.panel:hover::before{opacity:1}

/* 3D tilt on the hero code window */
.hero-tilt{perspective:900px}
.code-card{transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform}
.code-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.12),transparent 60%)}
.code-card{position:relative}

/* click burst */
.burst{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:150;background:var(--warm)}

/* animated glow on the name */
.hero h1{background:linear-gradient(100deg,var(--ink) 30%,var(--accent) 50%,var(--ink) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5s linear infinite}
@keyframes shine{from{background-position:100% 0}to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){#bg,.cursor-dot,.cursor-ring{display:none!important}.hero h1{-webkit-text-fill-color:var(--ink);animation:none}}

/* effect switcher */
.fx-btn{position:fixed;right:16px;bottom:16px;z-index:90;padding:9px 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:500 .88rem var(--body);box-shadow:var(--shadow);cursor:pointer;transition:border-color .2s,transform .2s}
.fx-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
@media (hover:none){.fx-btn{display:none}}