@layer reset, tokens, base, components, responsive;

@layer reset{*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4{overflow-wrap:break-word}ul{list-style:none}a{color:inherit;text-decoration:none}button{cursor:pointer;background:none;border:none}:focus-visible{outline:4px dashed var(--clr-pink);outline-offset:4px}::selection{background:var(--clr-border);color:var(--clr-accent)}}
@layer tokens{:root{--clr-bg:#FFFAF0;--clr-surface:#ffffff;--clr-elevated:#ffffff;--clr-border:#111111;--clr-border-dim:#111111;--clr-shadow:#111111;--clr-text:#111111;--clr-muted:#333333;--clr-faint:#555555;--clr-grid:#e0dcd3;--clr-accent:#FFE800;--clr-yellow:#FFE800;--clr-accent-hover:#FFD700;--clr-accent-dim:#111111;--clr-accent-pale:#FFF480;--clr-cyan:#00E5FF;--clr-cyan-pale:#80F2FF;--clr-pink:#FF4081;--clr-green:#00FF66;--clr-orange:#FF6D00;--clr-green-text:#008530;--clr-pink-text:#c41959;--clr-cyan-text:#0083a3;--font-display:'Inter','SF Pro Display',-apple-system,sans-serif;--font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;--text-xs:0.8rem;--text-sm:0.95rem;--text-base:clamp(0.95rem,1.5vw,1.1rem);--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:clamp(1.5rem,3vw,2rem);--text-3xl:clamp(2rem,4vw,2.8rem);--text-4xl:clamp(2.5rem,8vw,3.8rem);--text-hero:clamp(2.5rem,12vw,8rem);--space-xs:clamp(0.375rem,1vw,0.5rem);--space-sm:clamp(0.75rem,2vw,1rem);--space-md:clamp(0.75rem,3vw,2rem);--space-lg:clamp(2rem,5vw,4rem);--space-xl:clamp(3.5rem,8vw,7rem);--border-thick:3px solid var(--clr-border);--border-thin:2px solid var(--clr-border);--radius-sm:0px;--radius-md:4px;--radius-lg:8px;--radius-pill:999px;--shadow-hard:4px 4px 0px var(--clr-shadow);--shadow-hard-sm:3px 3px 0px var(--clr-shadow);--shadow-hard-hover:2px 2px 0px var(--clr-shadow);--shadow-hard-lg:8px 8px 0px var(--clr-shadow);--container:1200px;--container-wide:1600px;--nav-h:clamp(56px,8vw,80px);--scroll-progress-h:10px;--ease-out:cubic-bezier(0.16,1,0.3,1);--dur-fast:150ms;--dur-base:200ms;--dur-slow:300ms;--clr-python:#3776ab;--clr-cpp:#00599c;--clr-heroku:#430098;--clr-render:#00d2b4;--clr-koyeb:#ffde1a;--clr-vercel:#000000;--clr-netlify:#00c7b7;--clr-github:#181717;--clr-mongodb:#47a248;--clr-redis:#ff4438;--clr-docker:#2496ed;--clr-openai:#10a37f;--clr-anthropic:#d97757;--clr-google:#4285f4;--clr-deepseek:#3d78ff;--clr-windows:#0078d4;--clr-kali:#557c94;--clr-supabase:#3ecf8e;--clr-firebase:#ffca28;--clr-mysql:#4479a1;--clr-sqlite:#003b57;--clr-postgresql:#4169e1}}
@layer base{body{background-color:var(--clr-bg);color:var(--clr-text);font-family:var(--font-mono);font-size:var(--text-base);font-weight:500;letter-spacing:-0.01em}.skip-link{position:absolute;top:-100px;left:0;background:var(--clr-pink);color:var(--clr-text);padding:1rem;z-index:9999;font-weight:800;border:var(--border-thick);transition:top 0.2s}.skip-link:focus{top:0}.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-md)}.section{padding-block:var(--space-xl);border-top:var(--border-thick);position:relative;background-color:var(--clr-bg);display:flex;flex-direction:column;justify-content:center}.section__header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.section__num{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--clr-text);font-weight:800;background:var(--clr-accent);padding:0.3em 0.8em;border:var(--border-thick);box-shadow:var(--shadow-hard);border-radius:var(--radius-pill)}.section__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:900;color:var(--clr-text);letter-spacing:-0.04em;text-transform:uppercase}.btn{display:inline-flex;align-items:center;gap:0.5em;padding:0.8em 1.8em;font-family:var(--font-mono);font-size:var(--text-base);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border:var(--border-thick);color:var(--clr-text);background:var(--clr-green);box-shadow:var(--shadow-hard);border-radius:var(--radius-md);transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}.btn:hover{background:var(--clr-accent);transform:translate(2px,2px);box-shadow:var(--shadow-hard-hover)}.btn:active{transform:translate(4px,4px);box-shadow:none}.btn--ghost{background:var(--clr-cyan)}.btn--ghost:hover{background:var(--clr-pink)}.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-base) ease-out,transform var(--dur-base) ease-out}.reveal.visible{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}.reveal{opacity:1;transform:none;transition:none}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--clr-bg);border-left:var(--border-thin)}::-webkit-scrollbar-thumb{background:var(--clr-accent);border:2px solid var(--clr-border);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--clr-pink)}html{scrollbar-width:thin;scrollbar-color:var(--clr-accent) var(--clr-bg)}.back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:90;display:flex;align-items:center;justify-content:center;width:48px;height:48px;font-size:1.4rem;font-weight:900;color:var(--clr-text);background:var(--clr-accent);border:var(--border-thick);box-shadow:var(--shadow-hard);border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity var(--dur-base),transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}.back-to-top.visible{opacity:1;pointer-events:auto}.back-to-top:hover{background:var(--clr-pink);transform:translate(2px,2px);box-shadow:var(--shadow-hard-hover)}.back-to-top:active{transform:translate(4px,4px);box-shadow:none}#about{background-image:url('../img/pattern-dots.svg');background-size:24px 24px}#education{background-image:url('../img/pattern-plus.svg');background-size:40px 40px}#experience{background-image:url('../img/pattern-dots.svg');background-size:24px 24px}#skills{background-image:url('../img/pattern-plus.svg');background-size:40px 40px}#projects{background-image:url('../img/pattern-dots.svg');background-size:24px 24px}#career-goals{background-image:url('../img/pattern-plus.svg');background-size:40px 40px}#contact{background-image:url('../img/pattern-dots.svg');background-size:24px 24px}}
@layer components{.scroll-progress-container{position:fixed;top:0;left:0;width:100%;height:var(--scroll-progress-h);background:var(--clr-bg);z-index:1001;border-bottom:var(--border-thick)}.scroll-progress-bar{height:100%;width:0%;background:var(--clr-pink);transition:width 0.1s ease-out}.nav{position:fixed;top:var(--scroll-progress-h);left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--space-md);background:var(--clr-bg);border-bottom:var(--border-thick);transition:padding var(--dur-base) ease,background var(--dur-base) ease,transform var(--dur-base) ease}.nav.scrolled{background:var(--clr-accent-pale);padding-block:0.5rem}.nav.nav-hidden{transform:translateY(-120%)}.nav__brand{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;color:var(--clr-text);letter-spacing:-0.05em;background:var(--clr-accent);padding:0.1em 0.4em;border:var(--border-thick);box-shadow:3px 3px 0px var(--clr-shadow);border-radius:var(--radius-sm);transition:transform var(--dur-fast),box-shadow var(--dur-fast)}.nav__brand:hover{transform:translate(2px,2px);box-shadow:1px 1px 0px var(--clr-shadow);background:var(--clr-pink)}.nav__links{display:flex;align-items:center;gap:var(--space-sm)}.nav__links a{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--clr-text);padding:0.4em 0.8em;border:var(--border-thick);background:var(--clr-surface);box-shadow:2px 2px 0px var(--clr-shadow);border-radius:var(--radius-sm);transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}.nav__links a:hover{background:var(--clr-cyan);transform:translate(1px,1px);box-shadow:1px 1px 0px var(--clr-shadow)}.nav__links a.active{background:var(--clr-accent);transform:translate(2px,2px);box-shadow:0px 0px 0px var(--clr-shadow)}.nav__toggle{display:none;flex-direction:column;gap:5px;padding:8px;border:var(--border-thick);background:var(--clr-surface);box-shadow:2px 2px 0px var(--clr-shadow);border-radius:var(--radius-md);transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}.nav__toggle:hover{background:var(--clr-yellow);transform:translate(1px,1px);box-shadow:1px 1px 0px var(--clr-shadow)}.nav__toggle span{display:block;width:24px;height:3px;background:var(--clr-text);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base)}.nav__toggle.open{box-shadow:0px 0px 0px var(--clr-shadow);transform:translate(2px,2px);background:var(--clr-pink)}.nav__toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav__toggle.open span:nth-child(2){opacity:0}.nav__toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}}
@layer components{.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding-top:var(--nav-h);position:relative;overflow:hidden;background-image:url('../img/pattern-plus.svg');background-size:40px 40px;background-repeat:repeat;background-color:var(--clr-bg);flex-direction:column}.hero::before{display:none}.hero__inner{position:relative;z-index:1;text-align:center;max-width:800px;padding:var(--space-md) var(--space-lg);background:var(--clr-surface);border:4px solid var(--clr-border);box-shadow:12px 12px 0px var(--clr-shadow);border-radius:var(--radius-sm);transform:rotate(-1deg);animation:pop-in 0.6s cubic-bezier(0.34,1.56,0.64,1) both}@keyframes pop-in{0%{transform:scale(0.9) rotate(-4deg);opacity:0}100%{transform:scale(1) rotate(-1deg);opacity:1}}.hero__name{font-family:var(--font-display);font-size:clamp(3rem,10vw,7rem);font-weight:900;line-height:0.9;color:var(--clr-text);letter-spacing:-0.05em;margin-bottom:0.2em;text-shadow:4px 4px 0px var(--clr-accent),8px 8px 0px var(--clr-pink)}.hero__name::after{display:none}.hero__title{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:800;color:var(--clr-text);min-height:2em;margin-bottom:var(--space-md);margin-top:var(--space-sm)}.hero__scroll{position:absolute;bottom:0;left:50%;translate:-50% 50%;display:flex;align-items:center;justify-content:center;text-decoration:none;background:var(--clr-pink);border:var(--border-thick);color:var(--clr-text);padding:0.6em 1.8em;border-radius:var(--radius-pill);box-shadow:6px 6px 0px var(--clr-shadow);transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);z-index:10;transform:rotate(1deg)}.hero__scroll:hover{background:var(--clr-accent);transform:rotate(0deg) scale(1.1);box-shadow:2px 2px 0px var(--clr-shadow);translate:-50% calc(50% + 4px)}.hero__scroll span{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--clr-text)}.hero__line{display:none}.hero__scroll.hidden{opacity:0;pointer-events:none;transition:opacity var(--dur-base) ease-out}}
@layer components{.about__bio p{color:var(--clr-text);line-height:1.6;font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-md);padding:var(--space-md);background:var(--clr-surface);border:var(--border-thick);box-shadow:8px 8px 0px var(--clr-shadow);border-radius:var(--radius-sm);transition:transform var(--dur-fast),filter var(--dur-fast)}.about__bio p:nth-child(even){background:var(--clr-bg);transform:rotate(-0.5deg)}.about__bio p:nth-child(odd){transform:rotate(0.5deg)}.about__bio p:hover{transform:rotate(0deg) scale(1.02);filter:brightness(1.05)}.about__bio b{color:var(--clr-green-text)}.about__bio em{color:var(--clr-pink-text);font-style:normal;font-weight:800}.about__bio strong{color:var(--clr-accent)}}
@layer components{.edu__meta{background:var(--clr-surface);border:var(--border-thick);box-shadow:8px 8px 0px var(--clr-shadow);border-radius:var(--radius-md);overflow:hidden;max-width:800px;margin:0 auto}.edu__table{width:100%;border-collapse:collapse}.edu__table td{padding:var(--space-md);border-bottom:var(--border-thick);font-family:var(--font-mono);font-size:var(--text-sm)}.edu__table tr:last-child td{border-bottom:none}.edu__table tr:nth-child(even){background:var(--clr-bg)}.edu__table b{color:var(--clr-pink);text-transform:uppercase;font-size:var(--text-xs);display:block;margin-bottom:0.2rem}.edu__table a{color:var(--clr-cyan-text);text-decoration:none;font-weight:800;font-size:var(--text-base)}.edu__table a:hover{text-decoration:underline}}
@layer components{.exp__list{display:flex;flex-direction:column;gap:var(--space-md)}.exp__card{background:var(--clr-surface);border:var(--border-thick);box-shadow:8px 8px 0px var(--clr-shadow);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs);transition:transform var(--dur-fast),box-shadow var(--dur-fast)}.exp__card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0px var(--clr-grid)}.exp__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;color:var(--clr-text);letter-spacing:-0.03em;text-transform:uppercase}.exp__date{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--clr-muted);font-weight:700;margin-bottom:var(--space-xs)}.exp__desc{line-height:1.6}}
@layer components{.projects__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.projects__list{display:flex;flex-direction:column;gap:var(--space-md)}.project-item{background:var(--clr-surface);border:var(--border-thick);padding:var(--space-md);box-shadow:8px 8px 0px var(--clr-shadow);transition:transform var(--dur-fast),box-shadow var(--dur-fast)}.project-item:hover{transform:translate(2px,2px);box-shadow:6px 6px 0px var(--clr-shadow)}.project-item__title a{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;color:var(--clr-text);text-decoration:none;text-transform:uppercase}.project-item__title a:hover{color:var(--clr-pink)}.project-item__tagline{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--clr-muted);margin-bottom:var(--space-sm);font-weight:700}.project-details{margin-top:1rem}.project-details summary{cursor:pointer;list-style:none;width:auto;display:inline-flex}.project-details summary::-webkit-details-marker{display:none}.project-details[open] summary{background:var(--clr-pink);transform:translate(2px,2px);box-shadow:none}.project-details__content{margin-top:1rem;padding:1rem;background:var(--clr-bg);border:var(--border-thin)}.project-badges{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.project-badges img{height:20px}.project-stack{margin-top:1rem;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--clr-muted)}.project-stack code{background:var(--clr-surface);padding:0.2rem 0.4rem;border:1px solid var(--clr-border)}.projects__placeholder p{font-family:var(--font-mono);font-size:var(--text-base);color:var(--clr-muted);line-height:1.6;max-width:600px}.projects__placeholder a{color:var(--clr-text);text-decoration:underline;font-weight:800}}
@layer components{.skills__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.skills__group{padding:var(--space-md);background:var(--clr-surface);border:var(--border-thick);border-radius:var(--radius-sm);box-shadow:6px 6px 0px var(--clr-shadow);transition:transform var(--dur-fast),box-shadow var(--dur-fast)}.skills__group:hover{transform:translate(2px,2px);box-shadow:4px 4px 0px var(--clr-shadow)}.skills__group-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;letter-spacing:-0.02em;text-transform:uppercase;color:var(--clr-bg);background:var(--clr-text);display:inline-block;padding:0.2em 0.6em;margin-bottom:var(--space-sm);border-radius:var(--radius-sm);transform:rotate(-2deg)}.skills__list{display:flex;flex-wrap:wrap;align-items:center;gap:0.8em;margin-top:1rem}.skills__list li{font-family:var(--font-mono);font-size:var(--text-base);font-weight:700;color:var(--clr-text);padding:0.4em 1em;border:var(--border-thick);border-radius:var(--radius-sm);background:var(--clr-cyan);box-shadow:3px 3px 0px var(--clr-shadow);transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);cursor:default;display:flex;align-items:center;gap:0.5rem}.skill-icon{width:18px;height:18px;object-fit:contain}li.skill--python{background:var(--clr-python);color:#fff}li.skill--cpp{background:var(--clr-cpp);color:#fff}li.skill--heroku{background:var(--clr-heroku);color:#fff}li.skill--render{background:var(--clr-render);color:#111}li.skill--koyeb{background:var(--clr-koyeb);color:#111}li.skill--vercel{background:#eeeeee;color:#111}li.skill--netlify{background:var(--clr-netlify);color:#111}li.skill--github{background:#eeeeee;color:#111}li.skill--mongodb{background:var(--clr-mongodb);color:#fff}li.skill--redis{background:var(--clr-redis);color:#fff}li.skill--docker{background:var(--clr-docker);color:#fff}li.skill--chatgpt{background:var(--clr-openai);color:#fff}li.skill--anthropic{background:var(--clr-anthropic);color:#fff}li.skill--google{background:var(--clr-google);color:#fff}li.skill--deepseek{background:var(--clr-deepseek);color:#fff}li.skill--windows{background:var(--clr-windows);color:#fff}li.skill--kali{background:var(--clr-kali);color:#fff}li.skill--supabase{background:var(--clr-supabase);color:#fff}li.skill--firebase{background:var(--clr-firebase);color:#111}li.skill--mysql{background:var(--clr-mysql);color:#fff}li.skill--sqlite{background:var(--clr-sqlite);color:#fff}li.skill--postgresql{background:var(--clr-postgresql);color:#fff}.skills__list li:hover{transform:translate(2px,2px);box-shadow:1px 1px 0px var(--clr-shadow);filter:brightness(1.1)}.skills__workflow p{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--clr-muted);margin-block:0.5rem;font-weight:800;text-transform:uppercase}}
@layer components{.cyber__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.cyber__card{background:var(--clr-surface);border:var(--border-thick);padding:var(--space-md);box-shadow:8px 8px 0px var(--clr-shadow)}.cyber__card-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;text-transform:uppercase;background:var(--clr-pink);color:var(--clr-text);display:inline-block;padding:0.2rem 0.6rem;border:var(--border-thin);margin-bottom:var(--space-md);transform:rotate(1deg)}.cyber__table{width:100%;border-collapse:collapse}.cyber__table td{padding:0.8rem 0;border-bottom:1px dashed var(--clr-border);font-family:var(--font-mono);font-size:var(--text-sm)}.cyber__table tr:last-child td{border-bottom:none}.badge{padding:0.2rem 0.6rem;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800;text-transform:uppercase}.badge--learning{background:var(--clr-green);color:#000}.badge--exploring{background:var(--clr-cyan);color:#000}.cyber__footer{text-align:center;margin-top:var(--space-lg);font-size:var(--text-base);color:var(--clr-muted)}}
@layer components{.contact{min-height:100svh}.contact__inner{display:flex;flex-direction:column;align-items:center;text-align:center;margin-inline:auto;gap:var(--space-md);max-width:680px;background:var(--clr-accent-pale);padding:var(--space-lg);border:var(--border-thick);box-shadow:10px 10px 0px var(--clr-shadow);transform:rotate(1deg)}.contact__line{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;color:var(--clr-text);line-height:1.3;letter-spacing:-0.03em;text-transform:uppercase}.contact__links{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.contact__links a{font-family:var(--font-mono);font-size:var(--text-base);font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--clr-bg);padding:0.8em 1.4em;border:var(--border-thick);border-radius:var(--radius-sm);background:var(--clr-text);box-shadow:4px 4px 0px var(--clr-pink);transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}.contact__links a:hover{background:var(--clr-cyan);color:var(--clr-text);box-shadow:2px 2px 0px var(--clr-shadow);transform:translate(2px,2px)}}
@layer components{.footer{border-top:var(--border-thick);padding-block:var(--space-md);background:var(--clr-text);color:var(--clr-bg)}.footer .container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--space-sm)}.footer p{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--clr-bg)}.footer__note{margin-top:1.5rem;font-size:var(--text-sm);color:var(--clr-bg);font-family:var(--font-mono)}}
@layer responsive {
  @media (min-width: 1440px) {
    main {
      max-width: var(--container-wide);
      margin-inline: auto;
      position: relative;
    }

    .nav {
      max-width: var(--container-wide);
      margin-inline: auto;
      border-left: var(--border-thick);
      border-right: var(--border-thick);
    }

    .scroll-progress-container {
      max-width: var(--container-wide);
      margin-inline: auto;
    }
  }

  @media (max-width: 1024px) {
    .skills__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .nav__toggle {
      display: flex;
      position: relative;
      z-index: 101;
    }

    .nav__brand {
      position: relative;
      z-index: 101;
    }

    .nav__links {
      position: fixed;
      inset: 0;
      top: 0;
      padding-top: calc(var(--nav-h) + var(--scroll-progress-h));
      background: var(--clr-accent);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--space-lg);
      transform: translateX(100%);
      visibility: hidden;
      pointer-events: none;
      transition: transform var(--dur-base) cubic-bezier(0.34, 1.56, 0.64, 1),
                  visibility var(--dur-base);
      border-left: var(--border-thick);
      z-index: 90;
      overflow-y: auto;
    }

    .nav__links.open {
      transform: translateX(0);
      visibility: visible;
      pointer-events: auto;
    }

    .nav__links a {
      font-size: var(--text-xl);
      letter-spacing: 0.1em;
      padding: 0.8em 1.6em;
      box-shadow: 4px 4px 0px var(--clr-shadow);
    }

    .hero__inner {
      padding: var(--space-md);
      transform: rotate(0deg);
      animation: pop-in-mobile 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .section {
      min-height: auto;
    }

    #about, #education, #experience, #skills, #projects, #career-goals, #contact, .hero {
      background-size: 150px 150px;
    }

    .projects__grid {
      grid-template-columns: 1fr;
    }

    .cyber__grid {
      grid-template-columns: 1fr;
    }

    .contact__inner {
      transform: rotate(0deg);
    }
  }

  @keyframes pop-in-mobile {
    0%   { transform: scale(0.9) rotate(0deg); opacity: 0; }
    100% { transform: scale(1)   rotate(0deg); opacity: 1; }
  }

  @media (max-width: 640px) {
    .skills__grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 600px) {
    .edu__table,
    .edu__table tbody,
    .edu__table tr,
    .edu__table td {
      display: block;
      width: 100%;
    }

    .edu__table tr {
      border-bottom: var(--border-thick);
      padding-block: var(--space-sm);
    }

    .edu__table tr:last-child {
      border-bottom: none;
    }

    .edu__table td {
      border-bottom: none;
      padding: 0.4rem var(--space-md);
    }

    .edu__table b {
      margin-bottom: 0;
    }

    .contact__inner {
      padding: var(--space-md);
      transform: rotate(0deg);
      box-shadow: 6px 6px 0px var(--clr-shadow);
    }

    .contact__line {
      font-size: var(--text-xl);
    }

    .contact__links {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .contact__links a {
      text-align: center;
    }

    .exp__card {
      padding: var(--space-md);
    }
    .exp__title {
      font-size: var(--text-xl);
    }
  }

  @media (max-width: 480px) {
    .container {
      padding-inline: var(--space-sm);
    }

    .section {
      padding-block: var(--space-lg);
    }

    .section__title {
      font-size: clamp(1.4rem, 6vw, 2rem);
      word-break: break-word;
    }

    .hero__name {
      font-size: clamp(2.2rem, 8vw, 3rem);
      text-shadow: 2px 2px 0px var(--clr-accent), 4px 4px 0px var(--clr-pink);
    }

    .hero__scroll {
      position: relative;
      bottom: auto;
      left: auto;
      translate: none;
      display: inline-flex;
      margin-top: var(--space-lg);
      transform: rotate(0deg);
    }
    .hero__scroll:hover {
      translate: 0 4px;
      transform: scale(1.05);
    }

    .hero__links {
      flex-direction: column;
      align-items: stretch;
    }

    .hero__links .btn {
      justify-content: center;
    }

    .skills__list li {
      padding: 0.3em 0.8em;
      font-size: var(--text-sm);
    }

    .skills__group {
      padding: var(--space-sm);
    }

    #about, #education, #experience, #skills, #projects, #career-goals, #contact, .hero {
      background-size: 120px 120px;
    }

    .back-to-top {
      right: 1rem;
      bottom: 1rem;
      width: 40px;
      height: 40px;
    }

    .footer .container {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 400px) {
    .container {
      padding-inline: 0.75rem;
    }
    .about__bio p {
      padding: 1rem;
    }
  }

  @media (max-width: 375px) {
    .nav__brand {
      transform: rotate(0deg);
      font-size: clamp(1.2rem, 5vw, var(--text-2xl));
    }
    .cyber__card-title, .hero__kicker {
      transform: rotate(0deg);
    }
    .about__bio p:nth-child(even), .about__bio p:nth-child(odd) {
      transform: rotate(0deg);
    }

    .hero__inner {
      padding: var(--space-sm);
    }
    .hero__title {
      font-size: clamp(1rem, 5vw, var(--text-lg));
      min-height: 3em;
    }
  }

  @media (hover: none) {
    .project-card:hover,
    .skills__group:hover,
    .btn:hover,
    .nav__brand:hover,
    .contact__links a:hover,
    .hero__scroll:hover,
    .nav__links a:hover {
      transform: none;
      box-shadow: inherit;
    }
    
    .project-card:active,
    .skills__group:active,
    .btn:active,
    .contact__links a:active {
      transform: translate(2px, 2px);
    }
  }
}

/* Targeted portfolio improvements applied after the generated bundle. */
.btn--dark{background:var(--clr-text);color:var(--clr-bg)}
.btn--dark:hover{background:var(--clr-pink);color:var(--clr-text)}
.hero__summary{max-width:680px;margin-inline:auto;font-family:var(--font-display);font-size:clamp(1.15rem,3vw,1.65rem);font-weight:800;line-height:1.25;color:var(--clr-text)}
.hero__title{font-size:var(--text-base);color:var(--clr-muted);margin-bottom:var(--space-sm)}
.hero__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin-top:var(--space-md);margin-bottom:var(--space-sm)}
.projects__grid{grid-template-columns:repeat(3,1fr)}
.project-item{display:flex;flex-direction:column;gap:var(--space-sm)}
.project-item__title a{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.05}
.project-item__tagline{margin-bottom:0}
.project-item__status{align-self:flex-start;background:var(--clr-accent);border:var(--border-thin);box-shadow:var(--shadow-hard-sm);color:var(--clr-text);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:900;letter-spacing:.04em;padding:.25em .65em;text-transform:uppercase}
.project-item__list{display:grid;gap:.55rem;list-style:square;padding-left:1.2rem}
.project-item__list li{font-size:var(--text-sm);color:var(--clr-text);line-height:1.5}
.project-stack{margin-top:auto}
@media (max-width:1024px){.projects__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.projects__grid{grid-template-columns:1fr}.hero__links{align-items:stretch}.hero__links .btn{justify-content:center}}

/* Custom Skill Colors */
li.skill--golang{background:#00add8;color:#fff}
li.skill--vmware{background:#607078;color:#fff}
li.skill--wireshark{background:#1679a7;color:#fff}
li.skill--cisco{background:#1ba0d7;color:#fff}
li.skill--flask{background:#000000;color:#fff}
li.skill--telegram{background:#26a5e4;color:#fff}