/* Basic reset & variables */
:root{
  --bg: #0a0f1f;
  --surface: #071029;
  --card: #0f1724;
  --muted: #9aa6b2;
  --accent: #00e5ff;
  --accent2: #ff007a;
  --accent3: #7aff9e;
  --warm: #ffd27a;
  --gradient-angle: 110deg;
  --glass: rgba(255,255,255,0.03);
  --max-width: 1100px;
  --container-padding: 2.5rem;
  /* horizontal padding that scales with viewport but stays within sensible bounds */
  --container-padding-inline: clamp(1rem, 4vw, 2.25rem);
  /* contact sizing (easy tuning) */
  --contact-size: 56px; /* overall anchor/pill size on desktop */
  --contact-icon-size: 28px; /* inner icon artwork size */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#071024 0%, #0a0f1f 100%);color:#e6f0f6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.container{max-width:var(--max-width);margin:0 auto;padding-top:var(--container-padding);padding-bottom:var(--container-padding);padding-left:calc(var(--container-padding-inline) + env(safe-area-inset-left));padding-right:calc(var(--container-padding-inline) + env(safe-area-inset-right))}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(7,16,36,0.6), rgba(7,16,36,0.3));border-bottom:1px solid rgba(255,255,255,0.03)}
.site-header{transition:transform .28s ease, opacity .2s ease}

/* When the header is moved out to avoid overlapping the hero profile image */
.site-header.hidden-by-pic{transform:translateY(-100%);opacity:0;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem}
.brand{font-family:'JetBrains Mono', monospace;font-weight:700;color:var(--accent)}
.nav-links{list-style:none;display:flex;gap:1rem;align-items:center;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;font-size:0.95rem}
.nav-links a:hover{color:var(--accent)}

/* language switch active state */
.lang-switch button{background:transparent;border:0;color:var(--muted);font-weight:600;cursor:pointer}
.lang-switch button.active{color:var(--accent);text-decoration:underline}

/* Hero */
.hero{position:relative;overflow:hidden;padding:6.5rem 0 4.5rem}
.hero-content{position:relative;z-index:2}
.hero h1{font-family:'JetBrains Mono', monospace;font-size:2.4rem;margin:0 0 1rem;color:#ffffff}
.hero p{color:var(--muted);margin:0 0 1.2rem}
.hero{background: linear-gradient(var(--gradient-angle), rgba(0,0,0,0.05), rgba(255,255,255,0.01));}
.actions{margin-top:1rem}

/* Tighter spacing between hero action row and CV buttons */
.hero .actions{margin-bottom:0}
.hero .cv-links{margin-top:0.4rem}
@media (max-width:900px){
  .hero .cv-links{margin-top:0.4rem}
}
.btn{display:inline-block;padding:0.65rem 1rem;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));color:#041018;text-decoration:none;font-weight:600;margin-right:0.6rem}
.btn.ghost{background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));background-origin: padding-box, border-box;background-clip: padding-box, border-box;border:2px solid transparent;color:#041018}

/* Invert gradient only for the Projects button and the English CV download button */
a.btn[data-i18n="btn_view_projects"], a.btn[data-i18n="btn_cv_en"]{
  background: linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent));
  color: #041018;
}

/* Hero-specific single-color buttons (override gradients) */
.hero .btn[data-i18n="btn_view_projects"]{
  background: linear-gradient(90deg, var(--accent3) 0%, #9effc6 85%);
  color:#041018;
  transition:background .22s ease, transform .16s ease, box-shadow .16s ease;
}
.hero .btn[data-i18n="btn_contact"]{
  background: linear-gradient(90deg, var(--accent) 0%, #4ef0ff 85%);
  color:#041018;
  transition:background .22s ease, transform .16s ease, box-shadow .16s ease;
}
.hero .btn[data-i18n="btn_cv_en"]{
  background: linear-gradient(90deg, var(--warm) 0%, #fff1a8 85%);
  color:#041018;
  transition:background .22s ease, transform .16s ease, box-shadow .16s ease;
}
.hero .btn[data-i18n="btn_cv_pt"]{
  background: linear-gradient(90deg, var(--accent2) 0%, #ff68a6 85%);
  color:#041018;
  transition:background .22s ease, transform .16s ease, box-shadow .16s ease;
}

/* Hover: reverse gradient stops for subtle motion (accentuated) */
.hero .btn[data-i18n="btn_view_projects"]:hover{ background: linear-gradient(90deg, #9effc6 0%, var(--accent3) 85%); }
.hero .btn[data-i18n="btn_contact"]:hover{ background: linear-gradient(90deg, #4ef0ff 0%, var(--accent) 85%); }
.hero .btn[data-i18n="btn_cv_en"]:hover{ background: linear-gradient(90deg, #fff1a8 0%, var(--warm) 85%); }
.hero .btn[data-i18n="btn_cv_pt"]:hover{ background: linear-gradient(90deg, #ff68a6 0%, var(--accent2) 85%); }

/* CV download links in hero */
.cv-links{margin-top:0.9rem;display:flex;gap:0.6rem;flex-wrap:wrap}
.cv-links .btn{padding:0.55rem 0.9rem;font-weight:700}
.cv-links .btn.ghost{background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));background-origin: padding-box, border-box;background-clip: padding-box, border-box;border:2px solid transparent;color:#041018}

/* Center and color CV buttons on narrow screens */
@media (max-width:900px){
  .cv-links{justify-content:center}
  .cv-links .btn{flex:0 0 auto}
  /* ensure both buttons use the accent gradient on mobile */
  .cv-links .btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#041018;border-color:transparent}
}

/* Animated accent underline for nav links */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));bottom:-6px;transform-origin:left;transform:scaleX(0);transition:transform .22s ease}
.nav-links a:hover::after,.nav-links a:focus::after{transform:scaleX(1)}

/* Card hover lift and subtle color shift */
.card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,0.6);border-color:rgba(255,255,255,0.06)}

/* Hero background animated gradient */
@keyframes heroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero { background-image: linear-gradient(120deg, rgba(0,229,255,0.06), rgba(122,255,158,0.06), rgba(255,0,122,0.04)); background-size:300% 300%; animation: heroShift 18s ease-in-out infinite; }

/* Contact icon subtle entrance animation */
.contact .contact-icon{opacity:0;transform:translateY(6px);animation:iconIn .6s ease forwards}
@keyframes iconIn{to{opacity:1;transform:none}}

/* Hero image */
.hero-image{position:absolute;right:3rem;bottom:1rem;width:220px;height:auto;opacity:0.95;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.5);z-index:3;border:2px solid transparent;padding:4px;background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));background-origin: padding-box, border-box;background-clip: padding-box, border-box}

/* Profile image in the hero (actual markup uses .hero-pic) */
.hero-left .hero-pic, .hero-pic{
  display:block;
  width:220px;
  height:auto;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  border:2px solid transparent;
  padding:4px; /* space so the gradient border is visible */
  background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  object-fit:contain;
}

/* Circuit background */
.circuit-bg{position:absolute;inset:0;z-index:1;opacity:0.12;background-image:radial-gradient(circle at 10% 10%, rgba(0,229,255,0.06), transparent 10%), linear-gradient(180deg, rgba(255,0,122,0.02), transparent 40%);}
.circuit-bg::before{content:"";position:absolute;inset:-10%;background-image:
  linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
  linear-gradient(180deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: calc(100% / 20) calc(100% / 20);
  mask-image: radial-gradient(circle at 10% 20%, rgba(0,0,0,1), rgba(0,0,0,0.2) 40%, transparent 60%);
  animation: drift 25s linear infinite;
  transform-origin:center;
}

/* subtle drift */
@keyframes drift{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(2deg)}
  100%{transform:translateY(0) rotate(0deg)}
}

/* Sections */
/* Sections: use a flat surface; highlight items inside instead of a full section border */
.section{
  padding:3.5rem 0;
  border-radius:12px;
  background: linear-gradient(var(--surface), var(--surface));
  transition: box-shadow .18s ease, transform .18s ease;
  margin-bottom: 1.25rem;
  position:relative; /* needed for the top-border pseudo element */
}

/* spacing between adjacent sections */
.section + .section{margin-top:1.25rem}
/* top border inside each section (aligned with container padding) */
.section::before{content:'';position:absolute;left:calc(var(--container-padding-inline) + env(safe-area-inset-left));right:calc(var(--container-padding-inline) + env(safe-area-inset-right));top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));}
/* remove the top border for sections inside the projects area (they use their own category separators) */
#projects .section::before, .projects-category::before{display:none}
/* ensure sections have horizontal breathing room even if content inside isn't wrapped in .container */
.section{
  padding-left: calc(var(--container-padding-inline) + env(safe-area-inset-left));
  padding-right: calc(var(--container-padding-inline) + env(safe-area-inset-right));
}
h2{font-family:'JetBrains Mono', monospace;font-size:1.3rem;color:#dffaff;margin-bottom:1rem;position:relative;display:inline-block;padding-bottom:0.35rem}

/* gradient underline for section titles */
h2::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));transform-origin:left;transform:scaleX(1)}
.skills{display:flex;gap:1rem;list-style:none;padding:0;margin-top:1rem;color:var(--muted)}

/* Keep skills lists left-aligned (avoid global justification) */
#about .skills, #about .skills li{ text-align:left; }
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.25rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(2,6,23,0.6)}

/* projects: project cards get a colored gradient border to stand out */
.project-card{border-radius:10px;border:2px solid transparent;background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg,var(--accent),var(--accent2));background-origin: padding-box, border-box;background-clip: padding-box, border-box}
/* force any image inside project cards to the same size */
.project-card img{object-fit:cover;border-radius:8px;margin-bottom:0.6rem}

/* project skills chips */
.project-skills{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.6rem;list-style:none;padding:0}
.project-skills li{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--muted);padding:0.22rem 0.6rem;border-radius:999px;font-size:0.82rem;border:1px solid rgba(255,255,255,0.03)}

/* Accordion layout for projects */
.project-accordion{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.8rem}
.accordion-item{overflow:hidden}
.accordion-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.9rem 1rem;cursor:pointer}
.accordion-header:focus{outline:2px solid rgba(0,229,255,0.12);outline-offset:3px}
.accordion-title h3{margin:0;font-size:1.05rem}
.accordion-title .summary-short{margin:0;margin-top:0.2rem;color:var(--muted);font-size:0.93rem}
.accordion-toggle{background:transparent;border:0;color:var(--muted);font-size:1.25rem;padding:0.35rem 0.6rem;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;min-width:44px}
.accordion-toggle .chev{display:inline-block;font-size:1.25rem;line-height:1;transform-origin:center;transition:transform .18s ease,color .18s ease}
.accordion-toggle:hover{color:var(--accent)}
.accordion-item.open .accordion-toggle .chev{transform:rotate(180deg);color:var(--accent2)}
.accordion-item.open{box-shadow:0 18px 44px rgba(0,0,0,0.55);}
.accordion-body{display:flex;gap:1rem;padding:0.8rem 1rem;border-top:1px solid rgba(255,255,255,0.02);align-items:flex-start}
.acc-left{flex:0 0 320px;max-width:320px}
.acc-main{width:100%;height:200px;object-fit:cover;border-radius:8px}
.acc-thumbs{display:flex;gap:0.4rem;margin-top:0.5rem;flex-wrap:wrap}
.acc-thumb{width:64px;height:48px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.04)}
.acc-right{flex:1}
.acc-details{color:#dfeff3;line-height:1.5;margin-top:0.35rem}

/* Desktop-only small open indicator button inside project headers */
.accordion-open-btn{
  display:none;
  margin-left:0.75rem;
  width:48px;
  height:48px;
  padding:0;
  border-radius:8px;
  font-size:0.85rem;
  font-weight:700;
  cursor:pointer;
  background: transparent; /* no background: only the chevron is visible */
  color:inherit;
  border:0;
  align-items:center;justify-content:center;display:inline-flex
}
@media (min-width:900px){
  .accordion-open-btn{display:inline-flex}
}
.accordion-open-btn svg{width:28px;height:28px;display:block;transition:transform .18s ease;transform-origin:center}
.accordion-item.open .accordion-open-btn svg{transform:rotate(180deg)}

/* When a project uses inline details (gallery/video) hide the left preview and expand the right column */
.accordion-item.no-preview .acc-left{display:none}
.accordion-item.no-preview .acc-right{flex:1 1 100%}

/* header-specific skills display (compact) */
.header-skills{margin-top:0.45rem;display:flex;flex-wrap:wrap;gap:0.35rem}
.header-skills li{background:transparent;color:var(--muted);padding:0.16rem 0.5rem;border-radius:999px;font-size:0.8rem;border:1px solid rgba(255,255,255,0.02)}

@media (max-width:900px){
  .accordion-body{flex-direction:column}
  .acc-left{flex:0 0 100%;max-width:100%}
  .acc-main{height:220px}
}


/* Footer */
.site-footer{padding:2rem;text-align:center;color:var(--muted);font-size:0.9rem;border-top:1px solid rgba(255,255,255,0.03)}

/* Project modal styles */
/* Project modal (styled like site cards) */
.project-modal{display:none}
.project-modal.open{display:block}
.project-modal .pm-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.7);z-index:80}

/* Make the sheet look like a highlighted card with a gradient border */
.project-modal .pm-sheet{
  position:fixed;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:90%;max-width:1000px;z-index:90;
  /* double background trick (same technique used for project cards) */
  background-image: linear-gradient(var(--card), var(--card)), linear-gradient(90deg,var(--accent),var(--accent2));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border:2px solid transparent;
  border-radius:12px;
  padding:1rem;
  box-shadow:0 28px 80px rgba(2,6,23,0.7);
  color: var(--muted);
  max-height: calc(100vh - 4rem);
  overflow:auto;
}

.pm-close{position:absolute;right:14px;top:14px;background:transparent;border:0;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:6px;border-radius:6px}
.pm-close:hover{color:var(--accent);background:rgba(255,255,255,0.02)}

.pm-body{display:flex;gap:1rem;align-items:flex-start}
.pm-left{flex:1;min-width:220px}
.pm-right{flex:1}
.pm-left img{width:100%;height:360px;object-fit:cover;border-radius:8px;background:#071029;border:1px solid rgba(255,255,255,0.03)}
.pm-thumbs{display:flex;gap:0.5rem;margin-top:0.6rem;flex-wrap:wrap}
.pm-thumb{width:64px;height:48px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.04);opacity:0.9}
.pm-thumb[aria-current="true"], .pm-thumb.active{box-shadow:0 6px 18px rgba(0,0,0,0.5);border:2px solid transparent;background-image:linear-gradient(var(--card),var(--card)),linear-gradient(90deg,var(--accent2),var(--accent));background-origin: padding-box, border-box;background-clip: padding-box, border-box}
.pm-thumb:focus{outline:2px solid var(--accent);outline-offset:2px}
.pm-thumb, #pm-main-image{display:block}
#pm-main-image{width:100%;height:auto;max-height:56vh;object-fit:cover}
 
/* Responsive video embed wrapper for project details */
.video-wrap{position:relative;width:100%;padding-top:56.25%;margin:1rem 0;border-radius:8px;overflow:hidden;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.detail-html img{max-width:100%;height:auto;display:block;border-radius:6px;margin:0.6rem 0}

/* file link inside details */
.detail-file{margin:1rem 0}
.detail-file .file-btn{display:inline-flex;align-items:center;gap:0.6rem;padding:0.5rem 0.8rem;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#041018;text-decoration:none;font-weight:700}
.detail-file .file-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,0.55)}

/* Gallery / slideshow styles */
.slideshow-wrap{position:relative;display:block;border-radius:8px;overflow:hidden;background:#071029;border:1px solid rgba(255,255,255,0.03)}
.lideshow-stage, .slideshow-stage{position:relative}
.slideshow-stage{position:relative;padding-top:56.25%;/* 16:9 aspect */background:#071029}
.slideshow-main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:100%;width:auto;max-width:100%;display:block}
.slideshow-prev,.slideshow-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);border:0;color:#fff;padding:0.5rem 0.8rem;border-radius:6px;cursor:pointer;font-size:1.4rem;line-height:1}
.slideshow-prev{left:12px}
.slideshow-next{right:12px}
.slideshow-prev:hover,.slideshow-next:hover{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.slideshow-dots{display:flex;gap:0.4rem;justify-content:center;padding:0.5rem;background:transparent}
.slideshow-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.06);border:0;cursor:pointer}
.slideshow-dot.active{background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 6px 16px rgba(0,0,0,0.45)}

/* Lightbox styles for project images */
.image-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999}
.image-lightbox.open{display:flex}
.image-lightbox .lb-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.8)}
.image-lightbox .lb-inner{position:relative;z-index:2;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.6rem;box-sizing:border-box}
.image-lightbox .lb-img{max-width:100%;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.7);display:block;margin:0 auto}
.image-lightbox .lb-caption{color:var(--muted);text-align:center;margin-top:0.6rem;font-size:0.95rem}
.image-lightbox .lb-close,.image-lightbox .lb-prev,.image-lightbox .lb-next{position:absolute;background:rgba(0,0,0,0.45);color:#fff;border:0;padding:0.4rem 0.6rem;border-radius:6px;cursor:pointer}
.image-lightbox .lb-close{right:-6px;top:-6px;font-size:1.2rem}
.image-lightbox .lb-prev{left:6px;top:50%;transform:translateY(-50%);font-size:1.6rem}
.image-lightbox .lb-next{right:6px;top:50%;transform:translateY(-50%);font-size:1.6rem}
.image-lightbox .lb-prev:hover,.image-lightbox .lb-next:hover,.image-lightbox .lb-close:hover{background:linear-gradient(90deg,var(--accent),var(--accent2))}

@media (max-width:600px){
  .image-lightbox .lb-prev,.image-lightbox .lb-next{display:none}
  .image-lightbox .lb-close{right:8px;top:8px}
}

/* Ensure project/detail images never overflow their container */
.project-img, .detail-html img, .slideshow-main, .project-card img, .acc-main{max-width:100%;height:auto;display:block}
.acc-details figure{max-width:100%;overflow:hidden}

@media (max-width:900px){
  .slideshow-stage{padding-top:56.25%;}
  .slideshow-prev,.slideshow-next{padding:0.45rem 0.6rem;font-size:1.1rem}
}

.pm-right h3{font-family:'JetBrains Mono', monospace;font-size:1.25rem;color:#e9fbff;margin:0 0 0.4rem}
.pm-right .muted,#pm-summary{color:var(--muted);margin:0 0 0.6rem}
.pm-right #pm-details{color:#dfeff3;line-height:1.5}

/* Hide modal left preview when details include inline gallery/video (modal gets `no-preview` class) */
#project-modal.no-preview .pm-left{display:none}
#project-modal.no-preview .pm-right{flex:1 1 100%}
#project-modal.no-preview .pm-thumbs{display:none}

.pm-footer{display:flex;justify-content:space-between;margin-top:0.9rem;gap:0.6rem}
.pm-footer button{appearance:none;border:0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#041018;padding:0.45rem 0.7rem;border-radius:8px;font-weight:700;cursor:pointer}
.pm-footer button.ghost{background:transparent;border:1px solid rgba(255,255,255,0.05);color:var(--muted)}

/* Hero layout: profile image left of title/description */
.hero-content{display:flex;align-items:center;gap:1.25rem}
.hero-left{flex:0 0 auto}
.hero-right{flex:1}
.hero-pic{width:160px;height:160px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(2,6,23,0.35)}

@media (max-width:900px){
  .hero-content{flex-direction:column;align-items:center;text-align:center}
  .hero-left{margin-bottom:0.75rem}
  .hero-pic{width:120px;height:120px}
  .hero-right h1, .hero-right p{ text-align:center }
}

/* Hero actions and CV links: use flex+gap to keep consistent spacing on small screens */
@media (max-width:900px){
  .hero .actions{display:flex;gap:0.6rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:1rem}
  .hero .actions .btn{margin-right:0}
  .hero .cv-links{display:flex;gap:0.6rem;justify-content:center}
  .hero .cv-links .btn{margin-right:0}
}

/* Make hero buttons uniform on desktop but allow them to stretch to the hero-right width */
@media (min-width:900px){
  .hero .actions{display:flex;gap:0.6rem;align-items:center}
  .hero .cv-links{display:flex;gap:0.6rem;align-items:center}
  .hero .actions .btn,
  .hero .cv-links .btn{
    flex:1 1 0; /* allow buttons to grow and share available width */
    min-width:140px; /* keep a sensible minimum */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:inline-flex;align-items:center;justify-content:center;
  }
}

/* On very small screens allow buttons to stretch full width for easier tapping */
@media (max-width:480px){
  .hero .actions{flex-direction:column}
  .hero .cv-links{flex-direction:column}
  .hero .actions .btn,
  .hero .cv-links .btn{width:100%;min-width:0}
}

/* Global text justification */
/* Apply justified text broadly but keep interactive elements and monospaced headings readable */
body{word-break:break-word;text-align:justify;text-justify:inter-word}
/* Ensure headings are also justified if desired */
h1,h2,h3,h4,h5,h6{text-align:justify}
/* Keep buttons, tabs and code blocks left/center aligned for readability */
button, .btn, input, select, textarea, .tab{ text-align:center }
pre, code, kbd, samp{ text-align:left; white-space:pre-wrap }

@media (max-width:900px){
  .pm-body{flex-direction:column}
  .pm-left img{height:220px}
  #pm-main-image{max-height:40vh}
}

@media (max-width:900px){
  .pm-body{flex-direction:column}
}

/* Projects category header */
.projects-category h3{font-size:1.1rem;margin:0 0 0.6rem;color:#cfeff6;font-family:'JetBrains Mono', monospace;position:relative;display:inline-block;padding-bottom:0.5rem}
.projects-category h3::after{content:'';position:absolute;left:0;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--accent));width:100%}
.projects-category .grid{margin-top:0.6rem}

/* Tabbed projects */
.project-tabs{padding:1rem}
.tab-list{display:inline-flex;gap:1.2rem;margin:0 auto 1.2rem;position:relative;padding-bottom:0.6rem;align-items:center}
/* Gradient underline sized to the tabs' combined width */
.tab-list::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent2),var(--accent));opacity:0.95}
.tab{background:transparent;border:0;padding:0.15rem 0.25rem;cursor:pointer;color:var(--muted);font-family:'JetBrains Mono', monospace;font-size:1rem}
.tab.active{color:var(--accent);font-weight:700}
.tab:focus{outline:2px solid rgba(0,229,255,0.12);outline-offset:3px}

/* Profile picture in header */
.brand{display:flex;align-items:center;gap:0.75rem}
.brand .profile-pic{width:56px;height:56px;object-fit:cover;border-radius:999px;display:block;border:2px solid rgba(255,255,255,0.04)}
.brand .brand-name{font-weight:700}
.tab-panels{display:block}
.tab-panel{display:block}
/* Ensure panels with the `hidden` attribute are not shown (override default display rules) */
.tab-panel[hidden]{display:none !important}

/* Education section */
.education-list{display:flex;flex-direction:column;gap:1rem}
.edu-item{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.edu-meta{color:var(--muted);font-size:0.9rem;margin:0.4rem 0}
.edu-item{display:flex;gap:1rem;align-items:flex-start}
.edu-logo{width:100%;height:auto;display:block}
.edu-logo-wrap, .pos-logo-wrap{flex:0 0 120px;width:120px;border-radius:8px;overflow:hidden}
.edu-right{flex:1}
.edu-meta .sep{margin:0 0.5rem;color:rgba(255,255,255,0.06)}
/* left gradient stripe for education and positions details */
.edu-right, .pos-right{position:relative;padding-left:1rem}
.edu-right::before, .pos-right::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--accent),var(--accent3))}
/* force logos to the same size */
.edu-logo, .pos-logo{width:120px;height:80px;object-fit:contain}
/* ensure logos have rounded corners consistently */
.edu-logo, .pos-logo{border-radius:8px;display:block}

/* Education skills chips */
.edu-skills{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem;list-style:none;padding:0}
.edu-skills li{background:rgba(255,255,255,0.02);color:var(--muted);padding:0.28rem 0.6rem;border-radius:999px;font-size:0.85rem;border:1px solid rgba(255,255,255,0.02)}

/* Position skills chips (similar to education but slightly more subtle) */
.pos-skills{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.6rem;list-style:none;padding:0}
.pos-skills li{background:rgba(255,255,255,0.01);color:var(--muted);padding:0.22rem 0.55rem;border-radius:999px;font-size:0.83rem;border:1px solid rgba(255,255,255,0.02)}


/* Previous positions */
.positions-list{display:flex;flex-direction:column;gap:1rem}
.pos-item{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.pos-meta{color:var(--muted);font-size:0.9rem;margin:0.4rem 0}
.pos-item{display:flex;gap:1rem;align-items:flex-start}
.pos-logo{width:100%;height:auto;display:block}
.pos-right{flex:1}

/* Contacts (icon-only) */
.contact{display:flex;gap:0.8rem;align-items:center;flex-wrap:wrap;overflow:hidden}
.contact .contact-item{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.contact .contact-item a{flex:0 0 auto}
/* ensure items can wrap to next row instead of causing horizontal scroll */
.contact .contact-item{max-width:100%;box-sizing:border-box}
  .contact .contact-icon{display:inline-flex;width:var(--contact-size);height:var(--contact-size);align-items:center;justify-content:center;border-radius:10px;padding:10px;text-decoration:none;flex:0 0 var(--contact-size);
  /* use a single light-blue background (no gradient) for contact buttons */
  background: var(--accent);
  color: #041018; /* dark foreground for icons that use currentColor */
  border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.contact .contact-icon img{width:var(--contact-icon-size);height:var(--contact-icon-size);object-fit:contain;display:block}
.contact .contact-icon svg{width:var(--contact-icon-size);height:var(--contact-icon-size);fill:currentColor;display:block}
.contact .contact-graphic{width:var(--contact-icon-size);height:var(--contact-icon-size);display:block;background-repeat:no-repeat;background-position:center;background-size:contain}
.contact .contact-icon:hover,
.contact .contact-icon:focus{
  background: var(--accent);
  color: #041018;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

/* press feedback */
.contact .contact-icon.contact-press{transform:scale(.96);box-shadow:0 6px 16px rgba(0,0,0,0.5)}
.contact .contact-label{display:none;margin-left:0.5rem;color:var(--muted);font-size:0.95rem;word-break:break-word;max-width:calc(100% - var(--contact-size) - 0.75rem)}

/* Mobile: show label and increase touch targets */
@media (max-width:600px){
  .contact{flex-wrap:wrap;gap:0.6rem}
  .contact .contact-item{gap:0.6rem}
  /* slightly smaller contact pills/icons on small screens */
  :root{--contact-size:48px;--contact-icon-size:22px}
  .contact .contact-icon{width:var(--contact-size);height:var(--contact-size);padding:12px;border-radius:12px}
  .contact .contact-icon img{width:var(--contact-icon-size);height:var(--contact-icon-size)}
  .contact .contact-graphic{width:var(--contact-icon-size);height:var(--contact-icon-size);background-size:contain}
  .contact .contact-label{display:inline-block}
}

/* Header/nav responsive adjustments */
@media (max-width:800px){
  .nav{flex-direction:column;align-items:stretch;gap:0.6rem;padding:0.75rem}
  .brand{margin-bottom:0}
  .nav-links{flex-direction:column;align-items:flex-start;gap:0.6rem}
  .nav-links a{font-size:1.05rem}
  .lang-switch{margin-top:0.2rem}
  /* Make header opaque and visually separated on narrow screens to avoid overlay issues */
  .site-header{background:linear-gradient(180deg, rgba(7,16,36,0.98), rgba(7,16,36,0.98));backdrop-filter:none;box-shadow:0 8px 24px rgba(2,6,23,0.6);border-bottom:1px solid rgba(255,255,255,0.04);z-index:999}
}

/* General mobile adjustments */
@media (max-width:600px){
  /* increase horizontal padding on small phones and respect safe-area insets (notches) */
  .container{padding-top:1.25rem;padding-bottom:1.25rem;padding-left:calc(1.75rem + env(safe-area-inset-left));padding-right:calc(1.75rem + env(safe-area-inset-right))}
  /* also force sections and hero to keep inset on very small screens */
  .section, .hero{padding-left:calc(1.75rem + env(safe-area-inset-left));padding-right:calc(1.75rem + env(safe-area-inset-right))}
  h2{font-size:1.05rem}
  .hero{padding:4rem 0 2rem}
  .btn{padding:0.6rem 0.9rem}
  .card{padding:0.8rem}
  .grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .edu-logo, .pos-logo{flex:0 0 72px;width:72px}

  /* Mobile: prefer left-aligned text for readability on narrow viewports (global) */
  body, h1, h2, h3, h4, h5, h6, .section, .card, .project-accordion, .project-card, .pm-right, .pm-body, .acc-details {
    text-align: left;
    text-justify: auto;
  }

  /* Hero: keep the hero visually centered on small screens (override global left-align) */
  .hero-content{align-items:center;text-align:center}
  .hero-right h1, .hero-right p{ text-align:center }
}

/* Further compact the projects accordion for narrow phones */
@media (max-width:600px){
  .accordion-header{padding:0.55rem 0.75rem;gap:0.5rem}
  .accordion-title h3{font-size:0.98rem}
  .accordion-title .summary-short{font-size:0.82rem;color:var(--muted);margin-top:0.18rem}
  .accordion-toggle{min-width:36px;font-size:1rem;padding:0.22rem 0.35rem}
  .accordion-body{padding:0.6rem 0.75rem;gap:0.6rem}
  .acc-main{height:140px}
  .acc-left{max-height:160px}
  .acc-thumbs{display:none}
  .acc-details{font-size:0.95rem}
  /* make skill chips smaller and wrap tighter */
  .project-skills li, .header-skills li{font-size:0.72rem;padding:0.18rem 0.45rem}
  /* clamp the summary line in headers to avoid very tall headers */
  .accordion-title .summary-short{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* reduce card padding so stacked content doesn't look square */
  .project-card{padding:0.85rem}
}

/* focus-visible for keyboard users on contact icons */
.contact .contact-icon:focus{outline:2px solid var(--accent);outline-offset:3px}

/* Animations */
.fade-up{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.fade-up.in-view{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width:900px){
  .hero-image{display:none}
  .nav-links{gap:0.6rem}
  .hero h1{font-size:1.6rem}
}

/* Make projects take more horizontal space on narrow screens (near full-bleed) */
@media (max-width:900px){
  #projects .project-tabs{box-sizing:border-box;width:calc(100% + (var(--container-padding-inline) * 2));margin-left:calc(-1 * var(--container-padding-inline));padding-left:calc(var(--container-padding-inline) + env(safe-area-inset-left));padding-right:calc(var(--container-padding-inline) + env(safe-area-inset-right));}
  /* reduce gaps inside accordion and let cards use available width */
  #projects .project-accordion{gap:0.5rem;margin-top:0.6rem}
  #projects .project-card{width:100%;margin:0;border-radius:8px;padding:0.75rem}
  /* make tabs more compact so labels fit on a single line */
  .tab-list{gap:0.6rem;white-space:nowrap}
  .tab{font-size:0.88rem;padding:0.08rem 0.18rem}
}

/* Responsive: make education and positions logos stack on top of text on narrow screens */
@media (max-width:900px){
  .edu-item, .pos-item{flex-direction:column;align-items:flex-start}
  .edu-logo-wrap, .pos-logo-wrap{flex:0 0 auto;width:100%;max-width:100%}
  /* slightly smaller education/position images on mobile, centered with a reasonable max width */
  .edu-logo, .pos-logo{width:72%;max-width:220px;height:auto;object-fit:contain;border-radius:8px;margin:0 auto 0.6rem;display:block}
  .edu-right, .pos-right{padding-left:0}
  .edu-right::before, .pos-right::before{display:none}
}

/* Desktop: slightly larger project tab labels for readability */
@media (min-width:900px){
  .project-tabs .tab-list .tab,
  .tab-list .tab{
    font-size:1.05rem; /* slightly larger on desktop */
    padding:0.6rem 0.9rem;
  }
}