/* ============================================================
   GLOBALS
   ============================================================ */
:root {
  --primary:        #2C3E50;
  --secondary:      #0093C9;
  --secondary-rgb:  0,147,201;
  --hero-text:      #ffffff;
  --hero-text-rgb:  255,255,255;
  --bg-light:       #f4f6f8;
  --bg-white:       #ffffff;
  --text-muted-c:   #6b7a8d;
  --border-c:       #dce3ec;
  --card-bg:        #ffffff;
  --font-heading:   'Montserrat', sans-serif;
  --font-body:      'Lato', sans-serif;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body, 1rem);
  color: var(--primary);
  background: var(--bg-white);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }

.text-secondary-color { color: var(--secondary) !important; }
.text-primary-color   { color: var(--primary)   !important; }
.text-muted-custom    { color: var(--text-muted-c); font-size: .95rem; line-height: 1.75; }

.py-section { padding-top: 7rem; padding-bottom: 7rem; }
.section-light { background: var(--bg-light); }
.section-white { background: var(--bg-white); }

/* ============================================================
   SECTION LABELS
   ============================================================ */
.section-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-section-eyebrow, .7rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: .75rem;
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, var(--fs-section-title, 3.2rem));
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
}
.section-sub-heading {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
}

/* ============================================================
   NAVBAR
   ============================================================ */
#mainNav {
  transition: background .3s, padding .3s, box-shadow .3s;
  z-index: 1000;
}
.nav-transparent { background: transparent; }
.nav-scrolled {
  background: rgba(255,255,255,.93) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 20px rgba(44,62,80,.08);
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: -.03em;
}
.logo-text:hover { color: var(--primary); }
.nav-transparent .logo-text { color: #fff; }
.nav-transparent .nav-link   { color: rgba(255,255,255,.85); }

.nav-scrolled .logo-text { color: var(--primary); }
.nav-scrolled .nav-link  { color: var(--primary); }

.nav-link {
  font-family: var(--font-heading);
  font-size: var(--fs-nav-link, .72rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem 0 !important;
  transition: color .2s;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--secondary);
  transition: width .2s;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link:hover,
.nav-link.active { color: var(--secondary) !important; }

.navbar-toggler:focus { box-shadow: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a2a3a 0%, #2C3E50 60%, #0d3a4f 100%);
}

/* Dot grid */
.hero-dot-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(var(--secondary-rgb),.2) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Diagonal stripes */
.hero-stripe {
  position: absolute; pointer-events: none;
  height: 1px;
  background: var(--secondary);
}
.hero-stripe-1 {
  width: 120%; top: 38%; left: -10%;
  transform: rotate(-12deg);
  box-shadow: 0 0 60px 20px rgba(var(--secondary-rgb),.5);
  opacity: .06;
}
.hero-stripe-2 {
  width: 80%; top: 62%; left: 20%;
  transform: rotate(-12deg);
  box-shadow: 0 0 40px 12px rgba(var(--secondary-rgb),.5);
  opacity: .06;
}

/* Floating rings */
.hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(var(--secondary-rgb),.3);
  pointer-events: none;
  animation: floatRing 7s ease-in-out infinite;
}
.hero-ring-1 { width:320px; height:320px; top:5%; left:-6%;  opacity:.08; animation-duration:7s;   animation-delay:0s;   }
.hero-ring-2 { width:180px; height:180px; top:70%; left:75%; opacity:.10; animation-duration:5.5s; animation-delay:1.2s; }
.hero-ring-3 { width: 80px; height: 80px; top:20%; left:80%; opacity:.15; animation-duration:4.5s; animation-delay:0.6s; }
.hero-ring-4 { width: 50px; height: 50px; top:55%; left:8%;  opacity:.12; animation-duration:6s;   animation-delay:2s;   }
@keyframes floatRing {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-20px) scale(1.05); }
}

/* Glowing dots */
.hero-dot {
  position: absolute; width:6px; height:6px;
  border-radius: 50%; background: var(--secondary);
  pointer-events: none;
  animation: glowDot 3s ease-in-out infinite;
}
.gd-1 { top:15%; left:22%; animation-delay:0s;   }
.gd-2 { top:72%; left:65%; animation-delay:1.5s; }
.gd-3 { top:40%; left:88%; animation-delay:0.8s; }
.gd-4 { top:85%; left:30%; animation-delay:2.2s; }
.gd-5 { top:28%; left:58%; animation-delay:1.1s; }
@keyframes glowDot {
  0%,100% { opacity:.2; transform:scale(.8); }
  50%      { opacity:1;  transform:scale(1.2); }
}

/* Orb */
.hero-orb {
  position: absolute; width:600px; height:600px;
  border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(var(--secondary-rgb),.12) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation: orbPulse 5s ease-in-out infinite;
}
@keyframes orbPulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  50%      { transform:translate(-50%,-50%) scale(1.08); }
}

/* ---- Hero background variants ---- */
.hero-section.hero-bg-image {
  background: #1a2a3a;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero-section.hero-bg-video { background: #1a2a3a; }

/* Overlay — sits above video/image, below decorative elements */
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,42,58,.82) 0%, rgba(44,62,80,.75) 60%, rgba(13,58,79,.82) 100%);
  pointer-events: none;
}

/* Video background wrapper */
.hero-bg-video-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg-video-wrap video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
}

/* Hero role */
.hero-line { display:block; width:32px; height:1px; background:var(--secondary); }
.hero-role-text {
  font-family: var(--font-heading);
  font-size: var(--fs-hero-role, .85rem);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--secondary);
  transition: opacity .2s;
}

/* Hero name */
.hero-name-group {
  display: flex;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(3.5rem, 10vw, var(--fs-hero-name, 7rem));
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-name-group span {
  display: inline-block;
  opacity: 0;
  animation: revealChar .5s ease forwards;
}
.name-white span { color: var(--hero-text); }
.name-blue  span { color: var(--secondary); }
@keyframes revealChar {
  from { opacity:0; transform:translateY(40px) rotateX(-90deg); }
  to   { opacity:1; transform:translateY(0)    rotateX(0deg); }
}
@keyframes fadeChar {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes slideChar {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes dropChar {
  from { opacity:0; transform:translateY(-50px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes bounceChar {
  0%   { opacity:0; transform:translateY(-70px) scale(.85); }
  65%  { opacity:1; transform:translateY(6px)   scale(1.03); }
  82%  { opacity:1; transform:translateY(-3px)  scale(1); }
  100% { opacity:1; transform:translateY(0)     scale(1); }
}

/* Accent line */
.hero-accent-line {
  height: 1px; width: 96px;
  animation: scaleIn .8s ease 1s forwards;
  transform: scaleX(0); opacity: 0;
}
.hero-accent-line.left  { background: linear-gradient(to right,  transparent, rgba(var(--secondary-rgb),.6)); transform-origin: right; }
.hero-accent-line.right { background: linear-gradient(to left, transparent, rgba(var(--secondary-rgb),.6));  transform-origin: left; }
.hero-accent-dot { width:8px; height:8px; border-radius:50%; background:var(--secondary); opacity:0; animation: scaleIn .4s ease 1.4s forwards; }
@keyframes scaleIn { to { opacity:1; transform:scaleX(1); } }

/* Tagline */
.hero-tagline {
  font-family: var(--font-body);
  color: rgba(var(--hero-text-rgb),.7);
  font-size: clamp(.9rem, 2vw, var(--fs-hero-tagline, 1.05rem));
  line-height: 1.7;
  max-width: 540px;
  margin-left: auto; margin-right: auto;
}

/* CTA Buttons */
.btn-hero-primary {
  display: inline-block;
  padding: 1rem 2.25rem;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: transform .2s, box-shadow .2s, background .2s;
  position: relative;
  overflow: hidden;
}
.btn-hero-primary:hover {
  background: #007fb3;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0,147,201,.4);
}
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.25rem;
  border: 1px solid rgba(var(--hero-text-rgb),.25);
  color: var(--hero-text);
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: border-color .2s, color .2s, transform .2s;
}
.btn-hero-outline:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  transform: scale(1.05);
}

/* Stats */
.hero-stats { gap: 0; }
.hero-stat { padding: 0 2rem; text-align: center; }
.hero-stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-hero-stat, 1.9rem);
  font-weight: 900;
  color: var(--secondary);
  line-height: 1;
  margin: 0;
}
.hero-stat-label {
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--hero-text-rgb),.5);
  margin: .3rem 0 0;
}
.hero-stat-divider { width:1px; height:32px; background:rgba(var(--hero-text-rgb),.18); }

/* Scroll cue */
.hero-scroll-cue {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  color: rgba(var(--hero-text-rgb),.35); text-decoration: none;
  animation: scrollBounce 2.2s ease-in-out infinite;
  transition: color .2s;
}
.hero-scroll-cue:hover { color: var(--secondary); }
.hero-scroll-label {
  font-family: var(--font-heading);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
@keyframes scrollBounce { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(8px); } }
/* Mobile: give stats room so scroll cue doesn't overlap on small phones */
@media (max-width: 575px) {
  .hero-stats     { margin-bottom: 4rem; }
  .hero-stat      { padding: 0 1rem; }
  .hero-stat-value{ font-size: var(--fs-hero-stat, 1.5rem); }
}
@media (max-width: 380px) {
  .hero-stat      { padding: 0 .6rem; }
  .hero-stat-value{ font-size: var(--fs-hero-stat, 1.2rem); }
  .hero-scroll-label { display: none; } /* arrow only on very small screens */
}

/* Fade-in-up for hero elements */
.fade-in-up { opacity: 0; animation: fadeInUp .7s ease forwards; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ============================================================
   LOGO TEXT ANIMATIONS
   ============================================================ */
.logo-text.logo-anim-pulse {
  animation: logoAnimPulse 2.2s ease-in-out infinite;
}
@keyframes logoAnimPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.logo-text.logo-anim-glow {
  animation: logoAnimGlow 2.5s ease-in-out infinite;
}
@keyframes logoAnimGlow {
  0%,100% { text-shadow: none; }
  50%      { text-shadow: 0 0 14px rgba(var(--secondary-rgb),.7), 0 0 6px rgba(var(--secondary-rgb),.3); }
}

/* ============================================================
   ANIMATIONS OFF — body.anim-off kills all hero animations
   ============================================================ */
body.anim-off .fade-in-up,
body.anim-off .hero-name-group span,
body.anim-off .hero-accent-line,
body.anim-off .hero-accent-dot {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
body.anim-off .hero-accent-line.left  { transform-origin: right; }
body.anim-off .hero-accent-line.right { transform-origin: left; }
body.anim-off .hero-ring,
body.anim-off .hero-dot,
body.anim-off .hero-orb     { animation: none !important; }

/* ============================================================
   HERO LOGO IMAGE — image mode replaces the animated text name
   ============================================================ */
.hero-logo-img { display: block; height: auto; }

@keyframes heroLogoFade    { from { opacity:0; }                              to { opacity:1; } }
@keyframes heroLogoSlideUp { from { opacity:0; transform:translateY(40px); }  to { opacity:1; transform:translateY(0); } }
@keyframes heroLogoZoom    { from { opacity:0; transform:scale(.75); }        to { opacity:1; transform:scale(1); } }
@keyframes heroLogoFloat   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

.hero-logo-anim-fade     { opacity:0; animation: heroLogoFade    .9s ease .3s forwards; }
.hero-logo-anim-slide-up { opacity:0; animation: heroLogoSlideUp .9s ease .3s forwards; }
.hero-logo-anim-zoom     { opacity:0; animation: heroLogoZoom    .9s cubic-bezier(.34,1.56,.64,1) .3s forwards; }
.hero-logo-anim-float    {            animation: heroLogoFloat      3s ease-in-out infinite; }

body.anim-off .hero-logo-img { animation: none !important; opacity: 1 !important; }
body.anim-off .hero-scroll-cue { animation: none !important; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-subtitle {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.3;
}
.about-stat-card {
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: 8px;
  padding: 1rem .75rem;
}
.about-stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-about-stat, 1.4rem);
  font-weight: 900;
  color: var(--secondary);
  margin: 0;
}
.about-stat-label {
  font-family: var(--font-heading);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted-c);
  margin: .2rem 0 0;
}

/* Skill bars */
.skill-bar { margin-bottom: 1.25rem; }
.skill-name {
  font-family: var(--font-heading);
  font-size: var(--fs-skill-name, .8rem);
  font-weight: 700;
  color: var(--primary);
}
.skill-pct {
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
}
.skill-track {
  height: 6px;
  background: var(--border-c);
  border-radius: 999px;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  background: var(--secondary);
  border-radius: 999px;
  transition: width 1s ease;
}

/* Tools */
.tool-card {
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: 8px;
  padding: .75rem .5rem;
  cursor: default;
  transition: border-color .2s;
}
.tool-card:hover { border-color: rgba(0,147,201,.4); }
.tool-icon {
  font-size: 1.4rem;
  color: var(--text-muted-c);
  display: block;
  margin-bottom: .35rem;
  transition: color .2s;
}
.tool-card:hover .tool-icon { color: var(--secondary); }
.tool-name {
  font-family: var(--font-heading);
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-muted-c);
  line-height: 1.3;
  margin: 0;
  transition: color .2s;
}
.tool-card:hover .tool-name { color: var(--primary); }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.filter-btn {
  padding: .45rem 1.2rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--border-c);
  background: transparent;
  color: var(--text-muted-c);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}

.portfolio-card {
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.portfolio-card:hover {
  border-color: rgba(0,147,201,.4);
  box-shadow: 0 16px 40px rgba(44,62,80,.12);
}
.portfolio-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.portfolio-img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s;
}
.portfolio-card:hover .portfolio-img { transform: scale(1.05); }
.portfolio-overlay {
  position: absolute; inset: 0;
  background: rgba(44,62,80,.65);
  opacity: 0;
  display: flex; align-items:center; justify-content:center;
  transition: opacity .3s;
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay span {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.portfolio-badge {
  position: absolute; top: 10px; left: 10px;
  padding: .25rem .7rem;
  font-family: var(--font-heading);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 4px;
}
.badge-branding { background: rgba(0,147,201,.12); color: var(--secondary); }
.badge-ui       { background: rgba(44,62,80,.1);   color: var(--primary);   }
.badge-web      { background: var(--bg-light);      color: var(--text-muted-c); }

.portfolio-card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-portfolio-title, 1rem);
  font-weight: 900;
  color: var(--primary);
  margin-bottom: .5rem;
  transition: color .2s;
}
.portfolio-card:hover .portfolio-card-title { color: var(--secondary); }
.portfolio-card-desc {
  font-size: var(--fs-portfolio-desc, .85rem);
  color: var(--text-muted-c);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.tag-pill {
  padding: .25rem .6rem;
  background: var(--bg-light);
  color: var(--text-muted-c);
  font-family: var(--font-heading);
  font-size: .62rem;
  font-weight: 700;
  border-radius: 4px;
}

/* ============================================================
   RESUME
   ============================================================ */
.btn-secondary-cta {
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.75rem;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s, box-shadow .2s;
}
.btn-secondary-cta:hover {
  background: #007fb3;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,147,201,.3);
}

.resume-icon-wrap {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(0,147,201,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: '';
  position: absolute; top: 0; left: 7px;
  width: 2px; height: 100%;
  background: var(--border-c);
}
.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}
.timeline-item.last { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -1.65rem; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--secondary);
  border: 2px solid var(--bg-light);
  z-index: 1;
}
.timeline-title {
  font-family: var(--font-heading);
  font-size: var(--fs-timeline-title, .9rem);
  font-weight: 900;
  color: var(--primary);
  line-height: 1.35;
  margin: 0;
}
.timeline-period {
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 2px;
}
.timeline-company {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted-c);
  margin: .2rem 0 .1rem;
}
.timeline-location {
  font-size: .75rem;
  color: rgba(107,122,141,.7);
  margin-bottom: .5rem;
}
.timeline-desc {
  font-size: var(--fs-timeline-body, .82rem);
  color: var(--text-muted-c);
  line-height: 1.65;
  margin: 0;
}

/* References */
.reference-card {
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.ref-name {
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 900;
  color: var(--primary);
  margin: 0 0 .1rem;
}
.ref-role {
  font-size: .78rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 .3rem;
}
.ref-contact {
  font-size: .75rem;
  color: var(--text-muted-c);
  margin: 0;
}

/* Skill category cards */
.skill-category-card {
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: 10px;
  padding: 1.25rem;
  height: 100%;
}
.skill-cat-label {
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted-c);
  margin-bottom: .75rem;
}
.skill-tag {
  display: inline-block;
  padding: .25rem .75rem;
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
}
.tag-design { background: rgba(0,147,201,.08); color: var(--secondary); border-color: rgba(0,147,201,.2); }
.tag-dev    { background: rgba(44,62,80,.08);  color: var(--primary);   border-color: rgba(44,62,80,.2); }
.tag-muted  { background: var(--bg-light); color: var(--text-muted-c); border-color: var(--border-c); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-icon-wrap {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0,147,201,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.contact-label {
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted-c);
  margin: 0 0 .15rem;
}
.contact-value {
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  margin: 0;
  display: block;
  transition: color .2s;
}
a.contact-value:hover { color: var(--secondary); }

.social-btn {
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-c);
  background: var(--bg-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted-c);
  font-size: 1rem;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.social-btn:hover { border-color: var(--secondary); color: var(--secondary); }

/* Contact form card */
.contact-form-card {
  background: var(--bg-light);
  border: 1px solid var(--border-c);
  border-radius: 16px;
  padding: 2rem;
}
.form-label-custom {
  display: block;
  font-family: var(--font-heading);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted-c);
  margin-bottom: .4rem;
}
.form-input {
  width: 100%;
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--primary);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  resize: vertical;
}
.form-input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(0,147,201,.12);
}
.form-input.is-invalid { border-color: #dc3545; }
.field-error {
  font-size: .75rem;
  color: #dc3545;
  margin-top: .25rem;
  min-height: 1rem;
}
.btn-submit {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .9rem 1.5rem;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, opacity .2s;
}
.btn-submit:hover { background: #007fb3; box-shadow: 0 8px 24px rgba(0,147,201,.3); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--primary); }
.footer-text {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
}
.site-footer .logo-text { color: #fff; font-size: 1.5rem; text-decoration: none; }

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.reveal-left  { transform: translateX(-28px); }
.reveal.reveal-right { transform: translateX(28px);  }
.reveal.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  .hero-stat { padding: 0 1.2rem; }
  .hero-stats { flex-wrap: wrap; gap: 1rem; }
  .hero-stat-divider { display: none; }
  .contact-form-card { padding: 1.5rem; }
  #navMenu { background: #fff; border-top: 1px solid var(--border-c); }
  #navMenu .nav-link { color: var(--primary) !important; padding: 1rem 0 !important; border-bottom: 1px solid var(--border-c); }
  #navMenu .nav-link:last-child { border-bottom: none; }
  #navMenu .nav-link::after { display: none; }
}

/* ============================================================
   DARK MODE  (class applied to <html> by inline JS)
   ============================================================ */
html.dark-mode {
  --bg-white:     #0f172a;
  --bg-light:     #1e293b;
  --card-bg:      #1e293b;
  --text-muted-c: #94a3b8;
  --border-c:     #334155;
}

html.dark-mode body {
  background: #0f172a;
  color: #e2e8f0;
}

/* Headings & strong text that reference --primary */
html.dark-mode .section-title,
html.dark-mode .section-sub-heading,
html.dark-mode .about-subtitle,
html.dark-mode .skill-name,
html.dark-mode .skill-pct,
html.dark-mode .timeline-title,
html.dark-mode .portfolio-card-title,
html.dark-mode .ref-name,
html.dark-mode .contact-value { color: #e2e8f0; }

/* Logo */
html.dark-mode .nav-scrolled .logo-text { color: #e2e8f0; }
html.dark-mode .nav-scrolled .logo-text:hover { color: #e2e8f0; }

/* Scrolled navbar */
html.dark-mode .nav-scrolled {
  background: rgba(15,23,42,.96) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,.45);
}
html.dark-mode .nav-scrolled .nav-link { color: #e2e8f0; }

/* Mobile nav */
@media (max-width: 768px) {
  html.dark-mode #navMenu { background: #1e293b; border-top-color: #334155; }
  html.dark-mode #navMenu .nav-link { color: #e2e8f0 !important; border-bottom-color: #334155; }
}

/* White-background cards */
html.dark-mode .about-stat-card,
html.dark-mode .tool-card,
html.dark-mode .portfolio-card,
html.dark-mode .reference-card,
html.dark-mode .skill-category-card { background: #1e293b; border-color: #334155; }
html.dark-mode .tool-card:hover { border-color: rgba(0,147,201,.45); }
html.dark-mode .portfolio-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.5); }

/* Portfolio badges */
html.dark-mode .badge-ui  { background: rgba(226,232,240,.07); color: #cbd5e1; }
html.dark-mode .badge-web { background: #1e293b; color: #94a3b8; }

/* Tag pills (portfolio card tags) */
html.dark-mode .tag-pill { background: #0f172a; color: #94a3b8; }

/* Filter buttons */
html.dark-mode .filter-btn { border-color: #334155; color: #94a3b8; background: transparent; }

/* Timeline line */
html.dark-mode .timeline::before { background: #334155; }
html.dark-mode .timeline-dot     { border-color: #1e293b; }
html.dark-mode .timeline-location { color: #64748b; }

/* Skill tags */
html.dark-mode .tag-dev   { background: rgba(147,197,253,.08); color: #93c5fd; border-color: rgba(147,197,253,.2); }
html.dark-mode .tag-muted { background: #0f172a; color: #94a3b8; border-color: #334155; }

/* Contact form */
html.dark-mode .contact-form-card { background: #1e293b; border-color: #334155; }
html.dark-mode .form-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
html.dark-mode .form-input::placeholder { color: #475569; }

/* Social buttons */
html.dark-mode .social-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
html.dark-mode .social-btn:hover { border-color: var(--secondary); color: var(--secondary); }

/* Skill bar track */
html.dark-mode .skill-track { background: #334155; }

/* ── Availability Badge ─────────────────────────────────────────── */
.hero-avail-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: .35rem 1.1rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.avail-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: avail-pulse 1.8s ease-in-out infinite;
}
.avail-green  { background: #22c55e; }
.avail-orange { background: #f59e0b; animation-name: avail-pulse-orange; }
.avail-red    { background: #ef4444; animation-name: avail-pulse-red; }
@keyframes avail-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(1.4); }
}
@keyframes avail-pulse-orange {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(1.4); }
}
@keyframes avail-pulse-red {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(1.4); }
}

/* ── Portfolio Modal ──────────────────────────────────────────────── */
.pm-content { border:none; border-radius:16px; overflow:hidden; background:var(--bg-white); }
.pm-header  { background:var(--primary); border-bottom:none; padding:1.25rem 1.5rem; align-items:flex-start; }
.pm-title   { font-family:var(--font-heading); font-size:1.4rem; font-weight:800; color:#fff; margin:0; }

/* Hero image (single image projects) */
.pm-hero-wrap {
  width:100%; background:#080d18;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:zoom-in;
}
.pm-hero-img  {
  display:block; width:100%;
  max-height:min(62vh, 560px);
  object-fit:contain;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
.pm-hero-wrap:hover .pm-hero-img { transform:scale(1.08); }

/* Carousel (multi-image gallery) */
.pm-gallery-wrap { background:#080d18; }
.pm-carousel-img {
  display:block; width:100%;
  max-height:min(62vh, 560px);
  object-fit:contain;
  background:#080d18;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
  cursor:zoom-in;
}
#pmCarouselInner .carousel-item { overflow:hidden; }
#pmCarouselInner .carousel-item:hover .pm-carousel-img { transform:scale(1.08); }

/* Image counter  e.g. "2 / 5" */
.pm-counter {
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem 1.1rem;
  background:#0a0f1a;
  border-top:1px solid #1e293b;
}
.pm-counter-num {
  font-family:var(--font-heading); font-size:.72rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#64748b;
}
.pm-counter-hint {
  font-size:.68rem; color:#334155;
  display:flex; align-items:center; gap:.35rem;
}

/* Thumbnail strip */
.pm-thumbs {
  display:flex; gap:.5rem; padding:.6rem 1rem;
  overflow-x:auto; background:#080d18;
  scrollbar-width:thin; scrollbar-color:#334155 transparent;
}
.pm-thumbs::-webkit-scrollbar        { height:4px; }
.pm-thumbs::-webkit-scrollbar-track  { background:transparent; }
.pm-thumbs::-webkit-scrollbar-thumb  { background:#334155; border-radius:2px; }
.pm-thumb {
  border:2px solid transparent; border-radius:8px; padding:0;
  overflow:hidden; cursor:pointer; flex-shrink:0;
  background:none; opacity:.45; transition:opacity .2s, border-color .2s, transform .15s;
}
.pm-thumb img { width:88px; height:60px; object-fit:cover; display:block; }
.pm-thumb.active { opacity:1; border-color:var(--secondary); transform:scale(1.06); }
.pm-thumb:hover:not(.active) { opacity:.8; border-color:#475569; }

/* Modal body content */
.pm-section-label {
  font-family:var(--font-heading); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--primary);
  margin-bottom:1rem; padding-bottom:.4rem;
  border-bottom:2px solid var(--secondary); display:inline-block;
}
.pm-richtext { font-size:.95rem; line-height:1.8; color:#4a5568; }
.pm-richtext p { margin-bottom:.75rem; }
.pm-richtext ul,.pm-richtext ol { padding-left:1.25rem; margin-bottom:.75rem; }
.pm-meta-box { background:var(--bg-light); border-radius:12px; padding:1.5rem; position:sticky; top:1rem; }
.pm-meta-label {
  font-family:var(--font-heading); font-size:.73rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted-c); margin-bottom:.75rem;
}

/* Mobile adjustments */
@media (max-width:767px) {
  .pm-hero-img, .pm-carousel-img { max-height:48vh; }
  .pm-thumb img { width:68px; height:46px; }
  .pm-counter { padding:.4rem .9rem; }
  .pm-counter-hint { display:none; }
  .pm-body { padding-left:1.25rem !important; padding-right:1.25rem !important; padding-top:2rem !important; }
}

/* PDF button */
.pm-pdf-btn {
  display:block; text-align:center; padding:.6rem 1.25rem;
  background:rgba(220,38,38,.1); color:#dc2626;
  border:1.5px solid rgba(220,38,38,.35);
  border-radius:8px; font-family:var(--font-heading);
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none;
  transition:background .2s, border-color .2s, color .2s;
}
.pm-pdf-btn:hover { background:rgba(220,38,38,.18); border-color:#dc2626; color:#b91c1c; }

html.dark-mode .pm-content  { background:#1a2535; }
html.dark-mode .pm-header   { background:#0f1a2e; }
html.dark-mode .pm-meta-box { background:#0f1a2e; }
html.dark-mode .pm-section-label { color:#e2e8f0; }
html.dark-mode .pm-richtext { color:#94a3b8; }
html.dark-mode .pm-pdf-btn  { background:rgba(220,38,38,.15); color:#f87171; border-color:rgba(248,113,113,.35); }
html.dark-mode .pm-pdf-btn:hover { background:rgba(220,38,38,.28); border-color:#f87171; color:#fca5a5; }

/* ── Focus Ring (WCAG 2.1 §2.4.7 — visible focus indicator) ─────────── */
:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Remove outline from mouse clicks — keyboard only */
:focus:not(:focus-visible) { outline: none; }

/* Ensure filter buttons, social buttons, and custom elements show focus */
.filter-btn:focus-visible,
.social-btn:focus-visible,
.portfolio-open:focus-visible,
.nav-link:focus-visible,
.btn-hero-primary:focus-visible,
.btn-secondary-cta:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
  border-radius: 6px;
}