*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:       #0c0c0e;
      --bg-card:  #111115;
      --bg-hover: #16161c;
      --border:   rgba(255,255,255,0.07);
      --border-hover: rgba(255,255,255,0.14);
      --accent:   #e8ff6b;
      --accent2:  #a0f0d0;
      --text:     #d8d8e0;
      --text-dim: #606070;
      --text-sub: #909098;
      --font:     'DM Sans', sans-serif;
      --mono:     'DM Mono', monospace;
      --r:        2px;
    }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--font); overflow-x: hidden;
      cursor: none; -webkit-font-smoothing: antialiased;
    }

    /* CURSOR */
    #cur { position:fixed;width:8px;height:8px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .15s,height .15s,background .15s; }
    #cur-r { position:fixed;width:32px;height:32px;border:1px solid rgba(232,255,107,.3);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%); }
    body:has(a:hover) #cur, body:has(button:hover) #cur { width:14px;height:14px;background:#fff; }
    body:has(a:hover) #cur-r, body:has(button:hover) #cur-r { width:44px;height:44px;border-color:rgba(255,255,255,.2); }

    /* PAGE WRAPPER */
    .page-wrap { max-width:1400px; margin:0 auto; }

    /* NAV */
    nav {
      position:fixed;top:0;left:0;right:0;z-index:200;
      transition:background .3s,border-color .3s,backdrop-filter .3s;
      border-bottom:1px solid transparent;
    }
    nav.scrolled { background:rgba(12,12,14,.88);backdrop-filter:blur(16px);border-color:var(--border); }
    .nav-inner {
      max-width:1400px; margin:0 auto;
      display:flex;align-items:center;justify-content:space-between;
      padding:1.4rem 4rem;
    }
    .nav-logo { font-size:.85rem;font-weight:600;color:var(--text);text-decoration:none; }
    .nav-logo em { font-style:normal;color:var(--accent); }
    .nav-links { display:flex;gap:2.5rem;list-style:none; }
    .nav-links a { font-size:.82rem;color:var(--text-sub);text-decoration:none;transition:color .2s; }
    .nav-links a:hover { color:var(--text); }
    .nav-cta { display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.2rem;background:var(--accent);color:#0c0c0e;font-size:.8rem;font-weight:600;text-decoration:none;border-radius:var(--r);transition:opacity .2s; }
    .nav-cta:hover { opacity:.85; }

    /* HERO */
    #hero {
      min-height:100vh;
      display:flex; flex-direction:column; justify-content:center;
      padding:10rem 4rem 6rem;
      max-width:1400px; margin:0 auto;
      position:relative;overflow:hidden;
    }
    .hero-inner { position:relative;z-index:1;max-width:700px; }

    /* SKILLS PANEL — floating center-right */
    .hero-skills {
      position:absolute;
      right:0; top:50%;
      transform:translateY(-50%);
      width:300px;
      z-index:2;
      border:1px solid var(--border);
      background:rgba(14,14,18,.82);
      backdrop-filter:blur(16px);
      opacity:0;animation:fadeIn .8s .6s forwards, floatY 5s 1.4s ease-in-out infinite;
    }
    @keyframes floatY {
      0%,100% { transform:translateY(-50%); }
      50%      { transform:translateY(calc(-50% - 10px)); }
    }

    /* dot grid pattern on hero section via wrapper */
    #hero-section {
      position:relative; overflow:hidden;
    }
    #hero-section::before {
      content:'';position:absolute;inset:0;
      background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
      pointer-events:none; z-index:0;
    }
    #hero-section::after {
      content:'';position:absolute;inset:0;
      background:
        radial-gradient(ellipse 55% 60% at 75% 45%, rgba(232,255,107,.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 15% 70%, rgba(160,240,208,.035) 0%, transparent 60%);
      pointer-events:none; z-index:0;
    }
    .skills-header {
      padding:1.2rem 1.5rem;
      border-bottom:1px solid var(--border);
      display:flex;align-items:center;gap:.6rem;
    }
    .skills-header-dot { width:6px;height:6px;border-radius:50%; }
    .skills-header-dot:nth-child(1){background:#ff5f57;}
    .skills-header-dot:nth-child(2){background:#febc2e;}
    .skills-header-dot:nth-child(3){background:#28c840;}
    .skills-header-label {
      font-family:var(--mono);font-size:.65rem;
      color:var(--text-dim);letter-spacing:.12em;margin-left:.4rem;
    }
    .skill-row {
      padding:1rem 1.5rem;
      border-bottom:1px solid var(--border);
    }
    .skill-row:last-child { border-bottom:none; }
    .skill-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem; }
    .skill-name { font-size:.8rem;font-weight:500;color:var(--text); }
    .skill-pct { font-family:var(--mono);font-size:.68rem;color:var(--text-dim); }
    .skill-track {
      height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;
    }
    .skill-fill {
      height:100%;border-radius:2px;width:0;
      background:linear-gradient(90deg,var(--accent2),var(--accent));
      transition:width 1.2s cubic-bezier(.25,.46,.45,.94);
    }
    .skill-fill.alt {
      background:linear-gradient(90deg, rgba(232,255,107,.5), var(--accent));
    }

    /* bottom border fade */
    .hero-fade {
      position:absolute;bottom:0;left:0;right:0;height:120px;
      background:linear-gradient(to top, var(--bg), transparent);
      z-index:1;pointer-events:none;
    }

    .hero-badge { display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;background:rgba(232,255,107,.06);border:1px solid rgba(232,255,107,.15);border-radius:100px;font-size:.72rem;font-family:var(--mono);color:var(--accent);letter-spacing:.06em;margin-bottom:2rem;opacity:0;animation:up .7s .1s forwards; }
    .bdot { width:6px;height:6px;background:var(--accent);border-radius:50%;animation:blink 2s infinite; }

    .hero-title { font-size:clamp(3rem,6.5vw,6rem);font-weight:300;line-height:1.05;letter-spacing:-.04em;color:#fff;margin-bottom:1.6rem;opacity:0;animation:up .7s .25s forwards; }
    .hero-title strong { font-weight:600; }
    .hero-title .hl { color:var(--accent);font-weight:600; }

    .hero-sub { font-size:1.05rem;color:var(--text-sub);line-height:1.75;max-width:500px;margin-bottom:2.5rem;opacity:0;animation:up .7s .4s forwards; }

    .hero-actions { display:flex;gap:.8rem;flex-wrap:wrap;opacity:0;animation:up .7s .55s forwards; }
    .btn { display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.6rem;font-size:.85rem;font-weight:500;border-radius:var(--r);text-decoration:none;transition:all .2s;letter-spacing:.01em; }
    .btn-solid { background:var(--accent);color:#0c0c0e; }
    .btn-solid:hover { background:#f0ff88; }
    .btn-ghost { background:transparent;color:var(--text-sub);border:1px solid var(--border); }
    .btn-ghost:hover { border-color:var(--border-hover);color:var(--text); }

    /* scroll hint */
    .hero-scroll {
      position:absolute;bottom:2.5rem;left:3.5rem;z-index:2;
      display:flex;align-items:center;gap:.8rem;
      font-family:var(--mono);font-size:.65rem;color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;
      opacity:0;animation:fadeIn 1s 1.2s forwards;
    }
    .scroll-bar { width:32px;height:1px;background:var(--border);position:relative;overflow:hidden; }
    .scroll-bar::after { content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--accent);animation:slideBar 2s 1.5s infinite; }

    /* STATS */
    .stats { display:grid;grid-template-columns:repeat(4,1fr);max-width:1400px;margin:0 auto;border:1px solid var(--border); }
    .stat { padding:1.8rem 2rem;border-right:1px solid var(--border);transition:background .25s; }
    .stat:last-child { border-right:none; }
    .stat:hover { background:var(--bg-hover); }
    .stat-n { font-size:2rem;font-weight:600;letter-spacing:-.03em;color:#fff;margin-bottom:.2rem; }
    .stat-n em { font-style:normal;color:var(--accent); }
    .stat-l { font-size:.75rem;color:var(--text-dim);font-family:var(--mono); }

    .sec { padding:7rem 4rem;max-width:1400px;margin:0 auto; }
    .sec-label { font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.2em;text-transform:uppercase;margin-bottom:.7rem;display:block; }
    .sec-title { font-size:clamp(1.8rem,3vw,2.5rem);font-weight:500;letter-spacing:-.025em;color:#fff;line-height:1.1; }
    .sec-head { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3.5rem; }

    /* SERVICES */
    .svc-grid { display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border); }
    .svc { padding:2.2rem 2.5rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .25s;position:relative;overflow:hidden; }
    .svc:nth-child(2n) { border-right:none; }
    .svc:nth-last-child(-n+2) { border-bottom:none; }
    .svc:hover { background:var(--bg-hover); }
    .svc::before { content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .35s; }
    .svc:hover::before { transform:scaleY(1); }
    .svc-head-r { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem; }
    .svc-num { font-family:var(--mono);font-size:.65rem;color:var(--text-dim); }
    .svc-arr { color:var(--text-dim);transition:transform .2s,color .2s; }
    .svc:hover .svc-arr { transform:translate(3px,-3px);color:var(--accent); }
    .svc-t { font-size:1.1rem;font-weight:500;color:#fff;margin-bottom:.6rem; }
    .svc-d { font-size:.82rem;color:var(--text-sub);line-height:1.7; }
    .chips { display:flex;gap:.35rem;flex-wrap:wrap;margin-top:1.2rem; }
    .chip { font-family:var(--mono);font-size:.62rem;color:var(--text-dim);background:rgba(255,255,255,.04);border:1px solid var(--border);padding:.2rem .55rem;border-radius:2px; }

    /* ABOUT */
    #about { display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;padding:7rem 4rem;border-top:1px solid var(--border);max-width:1400px;margin:0 auto; }
    .about-img-wrap { position:relative; }
    .about-img { width:100%;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--border);position:relative; }
    .about-img img { width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.88) contrast(1.05) saturate(.75); }
    .about-img::after { content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,var(--bg) 100%); }
    .about-img::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,255,107,.04),transparent 55%);z-index:1; }
    .about-cap { position:absolute;bottom:1.2rem;left:1.2rem;font-family:var(--mono);font-size:.65rem;color:var(--text-dim);letter-spacing:.1em;z-index:2; }
    .about-cap strong { color:var(--accent2); }
    .al { position:absolute;top:2rem;right:-1.5rem;width:3rem;height:1px;background:linear-gradient(to right,var(--accent),transparent); }
    .about-content .sec-title { margin-bottom:1.5rem; }
    .about-content p { font-size:.88rem;color:var(--text-sub);line-height:1.85;margin-bottom:1.1rem; }
    .stack { display:grid;grid-template-columns:1fr 1fr;gap:.45rem .8rem;margin-top:1.8rem; }
    .si { display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--text-sub);font-family:var(--mono); }
    .si::before { content:'—';color:var(--accent);font-size:.7rem; }

    /* PROCESS */
    #process { background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
    .proc-inner { max-width:1400px;margin:0 auto;padding:7rem 4rem; }
    .proc-row { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);margin-top:3.5rem; }
    .step { padding:2rem;border-right:1px solid var(--border);transition:background .25s; }
    .step:last-child { border-right:none; }
    .step:hover { background:rgba(232,255,107,.015); }
    .step-n { font-family:var(--mono);font-size:.65rem;color:var(--accent);letter-spacing:.15em;margin-bottom:1.2rem;display:block; }
    .step-t { font-size:1rem;font-weight:500;color:#fff;margin-bottom:.6rem; }
    .step-d { font-size:.78rem;color:var(--text-sub);line-height:1.75;font-family:var(--mono); }
    .step-a { display:flex;justify-content:flex-end;color:var(--border);margin-top:1.5rem; }
    .step:last-child .step-a { visibility:hidden; }

    /* PROJECTS */
    .proj-grid {
      display:grid; grid-template-columns:1fr 1fr;
      gap:1px; background:var(--border);
      border:1px solid var(--border);
      margin-top:3.5rem;
    }
    .proj-card {
      background:var(--bg-card);
      display:flex; flex-direction:column;
      text-decoration:none; color:inherit;
      position:relative; overflow:hidden;
      transition:background .25s;
    }
    .proj-card:hover { background:var(--bg-hover); }

    /* scrolling screenshot preview */
    .proj-preview {
      position:relative;
      height:220px;
      overflow:hidden;
      border-bottom:1px solid var(--border);
      background:var(--bg);
    }
    .proj-preview img {
      width:100%;
      display:block;
      transition:none;
    }
    .proj-preview .proj-overlay {
      position:absolute; inset:0;
      background:linear-gradient(to bottom, transparent 40%, var(--bg-card) 100%);
      z-index:1; pointer-events:none;
      transition:opacity .3s;
    }
    .proj-card:hover .proj-overlay { opacity:.5; }
    .proj-preview-placeholder {
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg, rgba(232,255,107,.04), rgba(160,240,208,.03));
      position:relative;
    }
    .proj-preview-placeholder::before {
      content:''; position:absolute; inset:0;
      background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:20px 20px;
    }
    .proj-preview-label {
      font-family:var(--mono); font-size:.65rem;
      color:var(--text-dim); letter-spacing:.15em;
      text-transform:uppercase; position:relative; z-index:1;
    }

    /* visit link badge */
    .proj-visit {
      position:absolute; top:.9rem; right:.9rem; z-index:2;
      display:inline-flex; align-items:center; gap:.35rem;
      padding:.3rem .7rem;
      background:rgba(12,12,14,.85); backdrop-filter:blur(8px);
      border:1px solid var(--border);
      font-family:var(--mono); font-size:.62rem; color:var(--text-dim);
      text-decoration:none; letter-spacing:.08em;
      opacity:0; transform:translateY(-4px);
      transition:opacity .2s, transform .2s, border-color .2s, color .2s;
    }
    .proj-card:hover .proj-visit { opacity:1; transform:translateY(0); }
    .proj-visit:hover { border-color:var(--accent); color:var(--accent); }

    .proj-body { padding:1.8rem 2rem; flex:1; display:flex; flex-direction:column; }
    .proj-type { font-family:var(--mono);font-size:.65rem;color:var(--accent2);letter-spacing:.1em;margin-bottom:.4rem; }
    .proj-title { font-size:1.05rem;font-weight:500;color:#fff;margin-bottom:.5rem;letter-spacing:-.01em; }
    .proj-desc { font-size:.8rem;color:var(--text-sub);line-height:1.7;flex:1; }
    .proj-foot {
      display:flex; align-items:center; justify-content:space-between;
      margin-top:1.2rem; padding-top:1rem;
      border-top:1px solid var(--border);
    }
    .proj-yr { font-family:var(--mono);font-size:.65rem;color:var(--text-dim); }
    .proj-tags { display:flex;gap:.3rem;flex-wrap:wrap; }

    /* CONTACT */
    #contact { padding:7rem 4rem;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;max-width:1400px;margin:0 auto; }
    .contact-l .sec-title { margin-bottom:1rem; }
    .contact-l p { font-size:.88rem;color:var(--text-sub);line-height:1.8;margin-bottom:2rem; }
    .clinks { display:flex;flex-direction:column;gap:.9rem; }
    .clink { display:flex;align-items:center;gap:1rem;font-size:.85rem;color:var(--text-sub);text-decoration:none;font-family:var(--mono);transition:color .2s; }
    .clink:hover { color:var(--accent); }
    .clink-i { color:var(--accent);width:20px;text-align:center; }
    .form { display:flex;flex-direction:column;gap:1rem; }
    .form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
    .field { display:flex;flex-direction:column;gap:.4rem; }
    .field label { font-size:.7rem;font-family:var(--mono);color:var(--text-dim);letter-spacing:.08em; }
    .field input, .field textarea {
      background:var(--bg-card);border:1px solid var(--border);
      color:var(--text);font-family:var(--font);font-size:.85rem;
      padding:.7rem 1rem;border-radius:var(--r);outline:none;
      transition:border-color .2s;resize:none;
    }
    .field input:focus, .field textarea:focus { border-color:rgba(232,255,107,.3); }
    .field textarea { min-height:100px; }
    .form-btn { padding:.8rem 1.6rem;background:var(--accent);color:#0c0c0e;font-family:var(--font);font-size:.85rem;font-weight:600;border:none;border-radius:var(--r);cursor:pointer;transition:opacity .2s; }
    .form-btn:hover { opacity:.85; }

    /* SOCIAL ICONS */
    .socials {
      display:flex; gap:.6rem; margin-top:1.8rem;
    }
    .soc {
      display:flex; align-items:center; justify-content:center;
      width:40px; height:40px;
      border:1px solid var(--border);
      color:var(--text-dim);
      text-decoration:none;
      transition:border-color .2s, color .2s, background .2s;
      border-radius:var(--r);
    }
    .soc:hover { border-color:var(--accent); color:var(--accent); background:rgba(232,255,107,.05); }
    .soc svg { width:18px; height:18px; fill:currentColor; }

    /* floating social sidebar */
    .social-sidebar {
      position:fixed; left:2rem; bottom:3rem;
      display:flex; flex-direction:column; align-items:center; gap:.8rem;
      z-index:50;
      opacity:0; animation:fadeIn .8s 1.5s forwards;
    }
    .social-sidebar::after {
      content:''; width:1px; height:60px;
      background:linear-gradient(to bottom, var(--border), transparent);
      margin-top:.4rem;
    }
    .soc-side {
      display:flex; align-items:center; justify-content:center;
      width:34px; height:34px;
      border:1px solid var(--border);
      color:var(--text-dim); text-decoration:none;
      transition:border-color .2s, color .2s;
      border-radius:var(--r);
    }
    .soc-side:hover { border-color:var(--accent); color:var(--accent); }
    .soc-side svg { width:15px; height:15px; fill:currentColor; }

    /* MOBILE SOCIAL BAR (only on mobile) */
    .mobile-socials {
      display:none;
    }
    @media(max-width:640px){
      .social-sidebar { display:none; }
      .mobile-socials {
        display:flex; gap:.8rem; margin-top:2rem;
        opacity:0; animation:up .7s .7s forwards;
      }
      .mob-soc {
        display:flex; align-items:center; justify-content:center;
        width:44px; height:44px;
        border:1px solid var(--border);
        background:rgba(255,255,255,.03);
        color:var(--text-sub); text-decoration:none;
        border-radius:var(--r);
        transition:border-color .2s, color .2s, background .2s;
      }
      .mob-soc:hover { border-color:var(--accent); color:var(--accent); background:rgba(232,255,107,.06); }
      .mob-soc svg { width:18px; height:18px; fill:currentColor; }
    }
    .footer-inner { max-width:1400px;margin:0 auto;padding:1.8rem 4rem;display:flex;justify-content:space-between;align-items:center; }
    .fl { font-size:.72rem;color:var(--text-dim);font-family:var(--mono); }
    .fr { display:flex;align-items:center;gap:1.2rem; }
    .fr-status { display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--text-dim);font-family:var(--mono); }
    .adot { width:6px;height:6px;background:#4dff9e;border-radius:50%;animation:blink 2s infinite; }
    .footer-socials { display:flex; gap:.5rem; }
    .footer-soc {
      display:flex;align-items:center;justify-content:center;
      width:30px;height:30px;
      border:1px solid var(--border);color:var(--text-dim);
      text-decoration:none;border-radius:var(--r);
      transition:border-color .2s,color .2s;
    }
    .footer-soc:hover { border-color:var(--accent);color:var(--accent); }
    .footer-soc svg { width:13px;height:13px;fill:currentColor; }

    /* ANIMATIONS */
    @keyframes up { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
    @keyframes fadeIn { from{opacity:0}to{opacity:1} }
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }
    @keyframes slideBar { from{left:-100%}to{left:100%} }
    .reveal { opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease; }
    .reveal.in { opacity:1;transform:translateY(0); }

    /* RESPONSIVE */
    @media(max-width:1024px){
      #hero{grid-template-columns:1fr;padding-top:7rem;}
      .hero-skills{display:none;}
      #about{grid-template-columns:1fr;}
      .about-img-wrap{display:none;}
      .proc-row{grid-template-columns:1fr 1fr;}
      .svc-grid{grid-template-columns:1fr;}
      .svc{border-right:none;}
      .svc:nth-last-child(-n+2){border-bottom:1px solid var(--border);}
      .svc:last-child{border-bottom:none;}
      #contact{grid-template-columns:1fr;}
      .stats{grid-template-columns:1fr 1fr;margin:0;}
    }
    @media(max-width:640px){
      nav{padding:1.2rem 1.5rem;}
      .nav-inner{padding:1.2rem 1.5rem;}
      .nav-links,.nav-cta{display:none;}
      #hero{padding:6rem 1.5rem 3rem;gap:2.5rem;}
      .hero-skills{display:none;}
      .hero-scroll{display:none;}
      .sec,#about,#contact{padding:5rem 1.5rem;}
      .proc-inner{padding:5rem 1.5rem;}
      .footer-inner{padding:1.5rem;flex-direction:column;gap:.8rem;text-align:center;}
      .footer-socials{justify-content:center;}
      .stats{grid-template-columns:1fr 1fr;}
      .proc-row{grid-template-columns:1fr;}
      .proj-grid{grid-template-columns:1fr;}
      .form-row{grid-template-columns:1fr;}
    }