/* =============================================
   RESET & ROOT  — Dark Red + Deep Blue palette
   ============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  /* reds — darker, less saturated */
  --red:        #cc0000;
  --red-bright: #e60000;
  --red-dim:    #8b0000;
  --red-deep:   #3d0000;
  --red-glow:   rgba(180,0,0,0.18);
  --red-glow2:  rgba(140,0,0,0.07);

  /* blues — deep navy accent */
  --blue:       #0a3060;
  --blue-mid:   #0d4080;
  --blue-light: #1565c0;
  --blue-glow:  rgba(13,64,128,0.25);
  --blue-glow2: rgba(10,48,96,0.10);

  /* neutrals */
  --bg:         #050505;
  --bg2:        #080810;
  --bg3:        #0c0c18;
  --glass:      rgba(255,255,255,0.025);
  --glass2:     rgba(255,255,255,0.05);
  --border:     rgba(180,0,0,0.18);
  --border-b:   rgba(13,64,128,0.22);
  --border2:    rgba(255,255,255,0.055);
  --text:       #dde0e8;
  --text-dim:   #7a8090;
  --text-mute:  #383848;

  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-out:  cubic-bezier(0.16,1,0.3,1);
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.7;overflow-x:hidden;cursor:none}
a{text-decoration:none;color:inherit}
img{max-width:100%}
::selection{background:var(--red-dim);color:#fff}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--red-dim);border-radius:2px}

/* =============================================
   CURSOR
   ============================================= */
.cursor-dot{
  width:5px;height:5px;background:var(--red);border-radius:50%;
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:width .15s,height .15s;
}
.cursor-ring{
  width:32px;height:32px;border:1.5px solid rgba(180,0,0,0.45);border-radius:50%;
  position:fixed;top:0;left:0;pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,border-color .25s;
}
body:has(a:hover) .cursor-dot,body:has(button:hover) .cursor-dot{width:9px;height:9px}
body:has(a:hover) .cursor-ring,body:has(button:hover) .cursor-ring{width:48px;height:48px;border-color:var(--red)}

/* =============================================
   LOADER
   ============================================= */
.loader-screen{
  position:fixed;inset:0;background:#000;z-index:10000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.loader-inner{text-align:center}
.loader-logo{font-family:var(--font-head);font-size:3.2rem;font-weight:800;color:#fff;margin-bottom:1.8rem;letter-spacing:-.02em}
.loader-logo span{color:var(--red)}
.loader-ring{width:80px;height:80px;margin:0 auto 1.4rem;animation:spin 2s linear infinite}
.loader-circle{animation:dash 2s ease-in-out infinite;transform-origin:center;transform:rotate(-90deg)}
.loader-text{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);letter-spacing:.12em;margin-bottom:1.2rem}
.loader-dots{animation:dots 1.5s infinite}
.loader-bar{width:180px;height:2px;background:rgba(255,255,255,0.06);border-radius:1px;margin:0 auto;overflow:hidden}
.loader-bar-fill{height:100%;background:linear-gradient(90deg,var(--red-dim),var(--red));width:0;transition:width .1s linear;box-shadow:0 0 8px var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{0%{stroke-dashoffset:276}50%{stroke-dashoffset:70}100%{stroke-dashoffset:276}}
@keyframes dots{0%,100%{opacity:1}50%{opacity:0}}

/* =============================================
   NAV
   ============================================= */
.nav{
  position:fixed;top:0;left:0;right:0;padding:1.1rem 5%;
  display:flex;align-items:center;justify-content:space-between;
  z-index:1000;border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
}
.nav.scrolled{background:rgba(5,5,10,0.88);backdrop-filter:blur(20px);border-color:var(--border2)}
.nav-logo{font-family:var(--font-head);font-size:1.45rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.nav-logo span{color:var(--red)}
.nav-links{display:flex;gap:2.2rem}
.nav-link{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);transition:color .25s;position:relative;
}
.nav-link::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--red);transition:width .3s var(--ease-out)}
.nav-link:hover{color:#fff}
.nav-link:hover::after{width:100%}

.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--text);transition:transform .3s,opacity .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{
  display:none;position:fixed;inset:0;
  background:rgba(3,3,8,0.97);backdrop-filter:blur(20px);
  z-index:999;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5rem;opacity:0;pointer-events:none;transition:opacity .3s;
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-link{font-family:var(--font-head);font-size:2.4rem;font-weight:700;color:var(--text-dim);transition:color .25s}
.mobile-link:hover{color:var(--red)}

/* =============================================
   HERO
   ============================================= */
.hero{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;padding:0 5%;padding-top:80px;
  position:relative;overflow:hidden;
}
/* Subtle bg gradients — red left, blue right */
.hero::before{
  content:'';position:absolute;top:-10%;left:-5%;width:45%;height:70%;
  background:radial-gradient(ellipse,rgba(140,0,0,0.07) 0%,transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-10%;right:-5%;width:50%;height:60%;
  background:radial-gradient(ellipse,rgba(10,48,96,0.1) 0%,transparent 70%);
  pointer-events:none;
}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-bright);margin-bottom:1.1rem;
  border:1px solid var(--border);padding:.35rem .75rem;border-radius:20px;
  background:var(--red-glow2);width:fit-content;
}
.dot-pulse{width:6px;height:6px;background:var(--red-bright);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(204,0,0,.4)}50%{box-shadow:0 0 0 6px rgba(204,0,0,0)}}

/* .hero-name{
  font-family:var(--font-head);font-size:clamp(3rem,7.5vw,6.5rem);font-weight:800;
  line-height:.95;letter-spacing:-.03em;color:#fff;margin-bottom:1.1rem;overflow:hidden;
} */

.hero-name{
  font-family:var(--font-head);font-size:clamp(2.2rem,5.2vw,4.4rem);font-weight:800;
  line-height:.95;letter-spacing:-.03em;color:#fff;margin-bottom:1.1rem;overflow:hidden;
}
.hero-name-line{display:block;transform:translateY(110%);animation:slideUp .9s var(--ease-out) .5s forwards}
.hero-name-last{animation-delay:.65s;color:var(--text-dim)}
@keyframes slideUp{to{transform:translateY(0)}}

.hero-role{
  font-family:var(--font-mono);font-size:clamp(.9rem,2vw,1.15rem);
  color:var(--text-dim);margin-bottom:1.4rem;min-height:2rem;
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
}
.role-prefix{color:var(--red-dim)}
.typed-text{color:var(--blue-light)}
.cursor-blink{color:var(--blue-light);animation:blink .8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero-bio{font-size:.97rem;color:var(--text-dim);max-width:460px;margin-bottom:1.8rem;line-height:1.8}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:1.8rem}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.6rem;
  border-radius:5px;font-family:var(--font-head);font-size:.85rem;font-weight:600;
  letter-spacing:.02em;transition:all .3s var(--ease-out);cursor:none;border:none;position:relative;overflow:hidden;
}
.btn-primary{background:var(--red-dim);color:#fff;box-shadow:0 0 20px rgba(140,0,0,.3)}
.btn-primary:hover{background:var(--red);box-shadow:0 0 35px rgba(204,0,0,.45);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-ghost:hover{border-color:var(--blue-light);color:var(--blue-light);box-shadow:0 0 18px var(--blue-glow);transform:translateY(-2px)}
.btn.full-width{width:100%;justify-content:center}
.mt-2{margin-top:1.4rem;display:inline-flex}

.hero-socials{display:flex;gap:.8rem}
.social-icon{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);border-radius:50%;color:var(--text-dim);
  font-size:.9rem;transition:all .3s;
}
.social-icon:hover{border-color:var(--red-dim);color:var(--red-bright);box-shadow:0 0 14px var(--red-glow);transform:translateY(-3px)}

/* CANVAS */
/* .hero-right{position:relative;display:flex;align-items:center;justify-content:center;height:100vh} */
/* .hero-right{position:relative;display:flex;align-items:center;justify-content:center;height:calc(100vh - 80px);min-height:480px} */
/* .hero-right{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;padding-bottom:4rem;min-height:480px} */
.hero-right{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-height:520px}
/* .canvas-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center} */
/* .canvas-wrapper{position:relative;width:100%;height:100%;min-height:480px;display:flex;align-items:center;justify-content:center} */
.canvas-wrapper{position:relative;width:100%;height:520px;display:flex;align-items:center;justify-content:center;overflow:visible}
#threeCanvas{width:100%!important;height:100%!important;display:block}
.canvas-label{
  position:absolute;bottom:10%;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  color:rgba(180,0,0,.35);text-transform:uppercase;
}

.hero-scroll-hint{
  position:absolute;bottom:2.5rem;left:5%;
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--text-mute);text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.scroll-line{width:1px;height:45px;background:linear-gradient(to bottom,transparent,var(--red-dim));animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{height:45px;opacity:1}50%{height:18px;opacity:.4}}

/* =============================================
   SECTIONS — shared
   ============================================= */
.section{padding:8rem 5%;position:relative}
.section-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:.9rem}
.section-title{font-family:var(--font-head);font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff;margin-bottom:2.8rem}
.section-title span{color:var(--red-bright)}

.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:none}

/* =============================================
   ABOUT
   ============================================= */
.about{background:var(--bg2)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.about-text p{color:var(--text-dim);margin-bottom:1.1rem}
.about-text strong{color:var(--text)}

.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.stat-card{
  background:var(--glass);border:1px solid var(--border2);border-radius:10px;
  padding:1.8rem 1.4rem;position:relative;overflow:hidden;transition:border-color .3s,transform .3s;
}
.stat-card:hover{border-color:var(--border);transform:translateY(-4px)}
.stat-card:hover .stat-glow{opacity:1}
.stat-num{font-family:var(--font-head);font-size:2.8rem;font-weight:800;color:var(--red-bright);line-height:1;display:inline}
.stat-plus{font-family:var(--font-head);font-size:1.8rem;font-weight:800;color:var(--red-bright);display:inline;vertical-align:top;margin-top:.2rem}
.stat-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-top:.4rem}
.stat-glow{position:absolute;inset:0;background:radial-gradient(ellipse at bottom left,rgba(140,0,0,.1) 0%,transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}

/* =============================================
   SKILLS
   ============================================= */
.skills{background:var(--bg3)}
/* .skills-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.5rem} */
/* .skills-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.5rem;align-items:start}*/
.skills-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.5rem;align-items:start;overflow:visible}
.skill-category{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:1.3rem}
.skill-item{margin-bottom:1.3rem}
.skill-info{display:flex;justify-content:space-between;margin-bottom:.45rem;font-size:.88rem}
.skill-pct{font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim)}
.skill-bar{height:2px;background:rgba(255,255,255,0.055);border-radius:1px;overflow:hidden}
.skill-fill{height:100%;background:linear-gradient(90deg,var(--red-deep),var(--red-bright));width:0;border-radius:1px;transition:width 1.2s var(--ease-out);box-shadow:0 0 6px rgba(204,0,0,.4)}

/* .tags-wrap{display:flex;flex-wrap:wrap;gap:.5rem} */
/* .tags-wrap{display:flex;flex-wrap:wrap;gap:.5rem;min-height:2rem} */
.tags-wrap{display:flex;flex-wrap:wrap;gap:.5rem}
/* .tech-tags{display:flex;flex-direction:column} */
.tech-tags{display:flex;flex-direction:column}
.tag{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.07em;
  padding:.35rem .7rem;border:1px solid var(--border2);border-radius:4px;
  color:var(--text-dim);background:var(--glass);transition:all .25s;
}
.tag:hover{border-color:var(--blue-light);color:var(--blue-light);background:var(--blue-glow2)}

/* =============================================
   PROJECTS
   ============================================= */
.projects{background:var(--bg)}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.project-card{
  background:var(--bg2);border:1px solid var(--border2);border-radius:12px;
  overflow:hidden;position:relative;transition:border-color .3s,box-shadow .3s;
  transform-style:preserve-3d;
}
.project-card:hover{border-color:rgba(140,0,0,.25);box-shadow:0 0 35px rgba(140,0,0,.1)}
.project-img{height:145px;display:flex;align-items:center;justify-content:center}
.project-icon{font-size:2rem;color:rgba(180,0,0,.45)}
.project-body{padding:1.3rem}
.project-tags{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.7rem}
.project-tags span{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.07em;
  padding:.2rem .55rem;background:rgba(140,0,0,.12);color:var(--red-bright);
  border-radius:3px;border:1px solid rgba(180,0,0,.2);
}
.project-body h3{font-family:var(--font-head);font-size:1.08rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.project-body p{font-size:.85rem;color:var(--text-dim);line-height:1.7}
.project-links{display:flex;gap:.7rem;margin-top:1.1rem}
.project-links a{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);border-radius:5px;color:var(--text-dim);font-size:.82rem;transition:all .25s;
}
.project-links a:hover{border-color:var(--red-dim);color:var(--red-bright)}
.project-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(140,0,0,.08) 0%,transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.project-card:hover .project-glow{opacity:1}

/* =============================================
   EXPERIENCE
   ============================================= */
.experience{background:var(--bg2)}
.timeline{position:relative;max-width:820px}
.timeline::before{
  content:'';position:absolute;left:0;top:8px;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--red-dim),transparent);
}
.timeline-item{display:grid;grid-template-columns:14px 1fr;gap:2rem;margin-bottom:3.2rem;padding-left:.4rem}
.timeline-dot{
  width:11px;height:11px;background:var(--red-deep);border-radius:50%;margin-top:6px;
  position:relative;border:1px solid var(--red-dim);flex-shrink:0;
}
.timeline-dot--active{
  background:var(--red-bright);
  box-shadow:0 0 14px rgba(204,0,0,.5);
  animation:dotPulse 2.5s infinite;
}
.timeline-dot--active::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(204,0,0,.25)}
@keyframes dotPulse{0%,100%{box-shadow:0 0 14px rgba(204,0,0,.5)}50%{box-shadow:0 0 24px rgba(204,0,0,.8)}}

.timeline-year{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--red);margin-bottom:.35rem}
.badge-active{
  display:inline-block;background:rgba(204,0,0,.15);color:var(--red-bright);
  border:1px solid rgba(204,0,0,.25);border-radius:3px;
  padding:.1rem .4rem;font-size:.6rem;letter-spacing:.08em;vertical-align:middle;
}
.timeline-content h3{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.25rem}
.timeline-company{font-size:.82rem;color:var(--blue-light);margin-bottom:.7rem;font-style:italic}
.timeline-content p{font-size:.88rem;color:var(--text-dim);margin-bottom:.9rem}
.timeline-tags{display:flex;gap:.45rem;flex-wrap:wrap}
.timeline-tags span{
  font-family:var(--font-mono);font-size:.6rem;padding:.18rem .5rem;
  background:var(--glass);border:1px solid var(--border2);border-radius:3px;color:var(--text-dim);
}

/* =============================================
   CONTACT
   ============================================= */
.contact{background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
.contact-lead{font-size:1rem;color:var(--text-dim);margin-bottom:2.2rem;line-height:1.8}
.contact-items{display:flex;flex-direction:column;gap:1.3rem}
.contact-item{display:flex;align-items:center;gap:.9rem}
.contact-item-icon{
  width:42px;height:42px;background:var(--glass);border:1px solid var(--border2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--red);font-size:.95rem;
  flex-shrink:0;transition:border-color .3s,box-shadow .3s;
}
.contact-item:hover .contact-item-icon{border-color:var(--red-dim);box-shadow:0 0 14px var(--red-glow)}
.contact-item-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:.18rem}
.contact-item-val{font-size:.9rem;color:var(--text)}

.contact-form{display:flex;flex-direction:column;gap:1.6rem}
.form-group{position:relative}
.form-input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--border2);
  padding:.55rem 0;color:var(--text);font-family:var(--font-body);font-size:.92rem;outline:none;resize:none;transition:border-color .3s;
}
.form-input::placeholder{color:var(--text-mute)}
.form-input:focus{border-color:transparent}
.form-line{position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--red-bright),var(--blue-light));transition:width .4s var(--ease-out);box-shadow:0 0 7px rgba(204,0,0,.35)}
.form-input:focus~.form-line{width:100%}
.form-textarea{min-height:95px}

/* =============================================
   FOOTER
   ============================================= */
.footer{background:var(--bg2);border-top:1px solid var(--border2);padding:2.8rem 5%;position:relative}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.4rem}
.footer-logo{font-family:var(--font-head);font-size:1.35rem;font-weight:800;color:#fff}
.footer-logo span{color:var(--red)}
.footer-socials{display:flex;gap:.9rem}
.footer-socials a{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);border-radius:50%;color:var(--text-dim);font-size:.82rem;transition:all .3s;
}
.footer-socials a:hover{border-color:var(--red-dim);color:var(--red-bright);box-shadow:0 0 12px var(--red-glow)}
.footer-copy{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;color:var(--text-mute);width:100%;text-align:center;padding-top:1.4rem;border-top:1px solid var(--border2);margin-top:.4rem}

.back-to-top{
  position:fixed;bottom:2rem;right:2rem;width:42px;height:42px;
  background:var(--red-dim);border:none;border-radius:50%;color:#fff;font-size:.85rem;
  cursor:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(140,0,0,.4);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s,transform .3s,box-shadow .3s;z-index:500;
}
.back-to-top.visible{opacity:1;pointer-events:all;transform:translateY(0)}
.back-to-top:hover{box-shadow:0 0 30px rgba(204,0,0,.6)}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1100px){
  .skills-grid{grid-template-columns:1fr 1fr}
  .tech-tags{grid-column:span 2}
  .projects-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:100px;min-height:auto;padding-bottom:2rem}
  .hero-left{order:2}
  .hero-right{order:1;height:55vw;min-height:260px;max-height:380px;width:100%}
  .hero-bio,.hero-eyebrow{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-socials{justify-content:center}
  .hero-scroll-hint{display:none}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .tech-tags{grid-column:span 1}
  .projects-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .mobile-menu{display:flex}
}
@media(max-width:600px){
  .section{padding:5rem 5%}
  .projects-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .hero-right{height:65vw}
}