/* Generic container class for layout consistency */
.container {
  width: min(var(--container), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  display: block;
}
/* =========================================================
   MKT Motion Lab — Clean Premium / Echo-inspired
   FULL UPDATED CSS (Working)
   - Container 1480px
   - Headings left-aligned + inside container
   - Logo inside container, separate from nav
   - Bigger pill nav (grid style)
   - Mobile menu works with .open class
   ========================================================= */

:root{
  --ui: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --tech: "Rajdhani", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Darkened "light" theme (user requested darker light theme) */
  --bg: #06030b; /* deeper near-black purple */
  --surface: #0a0811; /* slightly lighter for panels */
  /* Light theme background gradient (darker purple → darker blue) at 90deg */
  --bg-gradient-start: #140030; /* very dark purple */
  --bg-gradient-mid:   #0b1a38; /* deep indigo (richer mid) */
  --bg-gradient-end:   #001124; /* very dark blue */
  --bg-stop1: 0%;
  --bg-stop2: 60%;
  --text: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.68);
  --on-surface: rgba(255,255,255,0.96);

    /* CTA gradient colors (default / "light" theme which we've darkened) */
    --cta-start: #7b2eff; /* purple */
    --cta-end:   #00d4ff; /* cyan */
    --outline-cta-start: #ff8a80; /* warm */
    --outline-cta-end:   #ffc371; /* soft gold */

    /* Neon gradient used for headings, borders and buttons */
    --neon-start: #00fff0; /* bright cyan */
    --neon-mid:   #7c00ff; /* electric purple */
    --neon-end:   #ff00d0; /* hot pink */
    --neon-glow: rgba(124,0,255,0.12);

  /* Lines and accents adjusted for the darker "light" theme so borders remain visible */
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.05);

  --accent: rgba(255,255,255,.96);
  --accent-soft: rgba(255,255,255,.06);

  --radius: 14px;
  --shadow: 0 18px 60px rgba(0,0,0,.10);

  --container: 1280px;
  --container-wide: 1400px;
  /* Responsive system */
  --bp-sm: 640px;
  --bp-md: 992px;
  --bp-lg: 1366px;
  --gutter: 24px;      /* default desktop gutter */
  --gutter-sm: 12px;   /* mobile */
  --gutter-md: 18px;   /* tablet */
    --navH: 64px;
}

/* Dark mode */
[data-theme="dark"]{
  --bg: #121212;
  --surface: #121212;
  /* Dark theme background gradient (dark gray → darker gray) at 90deg */
  --bg-gradient-start: #1a1a1a; /* dark gray */
  --bg-gradient-mid:   #141414; /* richer mid */
  --bg-gradient-end:   #0f0f0f; /* deeper gray */
  --bg-stop1: 0%;
  --bg-stop2: 55%;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --on-surface: rgba(255,255,255,.92);

    /* CTA adjustments for dark theme */
    --cta-start: #8a3bff;
    --cta-end:   #00a8ff;
    --outline-cta-start: #ff6b8a;
    --outline-cta-end:   #ffb86b;

  --line: rgba(255,255,255,.12);
  --line2: rgba(255,255,255,.07);

  --accent: rgba(255,255,255,.92);
  --accent-soft: rgba(255,255,255,.08);

  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  /* Use a subtle vertical gradient based on theme variables with a solid-color fallback */
  background-color: var(--bg);
  background-image: linear-gradient(90deg,
    var(--bg-gradient-start) var(--bg-stop1),
    var(--bg-gradient-mid, var(--bg-gradient-start)) var(--bg-stop2),
    var(--bg-gradient-end) 100%
  );
  transition: background-color 300ms ease, background-image 300ms ease;
  color: var(--text);
  font-family: var(--ui);
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
}

img, video{ display:block; max-width:100%; }
a{ color:inherit; }
.no-underline{ text-decoration:none; }
.text-primary{ color: var(--text); }
.border-primary{ border-color: var(--line) !important; }

.hidden{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.hidden.reveal{ opacity:1; transform:none; }

/* ----------------------------
   Container helpers
----------------------------- */
.page-wrap{
  width: min(var(--container), calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
}

.section,
.hero,
.main-footer{
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1200px){
  .section,
  .hero,
  .main-footer{
    padding-left: 34px;
    padding-right: 34px;
  }
}

/* Ensure core blocks are centered with container */
.section > *,
.footer-content,
.footer-bottom{
  max-width: var(--container);
  margin-left:auto;
  margin-right:auto;
}

/* Page header (used on gallery page) should align to the same container */
.page-header{
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: 28px;
}
.page-header > *{
  width: min(var(--container), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Force gallery header text to center even though site headings are left-aligned by default */
.page-header h1,
.page-header p{
  text-align: center !important;
}

/* Simple footer used on gallery page should also align to container width */
footer:not(.main-footer){
  width: min(var(--container), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  padding: 24px 0;
  text-align: center;
}

/* ==================================================
   LOGO — INSIDE CONTAINER, SEPARATE FROM NAV
   ================================================== */
.logo-left{
  position: relative;
  z-index: 1800;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  background: transparent;
  border: none;
  pointer-events: auto;
}
.brand-logo{
  width: auto;
  height: 52px;
  object-fit: contain;
  transform-origin: left center;
  transform: scale(3);
  position: relative;
  z-index: 1700;
}
/* Adjust logo size across breakpoints */
@media (max-width: 992px){
  .brand-logo{ height: 44px; transform: scale(2); }
}
@media (max-width: 640px){
  .brand-logo{ height: 38px; transform: scale(1.6); }
}

/* ==================================================
   NAV — BIG PILL GRID (LOGO NOT IN NAV)
   ================================================== */
nav{
  height: var(--navH);
  /* keep nav transparent so background/video shows through */

  /* Gallery tiles: keep aspect and avoid aggressive crop on tablets */
  .gallery-item img,
  .gallery-item video{ height: auto; aspect-ratio: 4/3; }
  background: transparent;
  border-bottom: none;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 18px;

  position: sticky;
  top: 12px;
  z-index: 1200;
}
/* Hide the nav pill when the mobile menu is open */
/* removed legacy .menu-open state (no mobile overlay menu used) */

/* the pill */
.nav-shell{
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
  padding: 10px 14px;

  /* keep only the pill with a solid surface so it reads over the video/background */
  background: var(--surface);
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);

  display:flex;
  align-items:center;
  justify-content:space-between;
}
/* On tablet/mobile, hide nav pill background (keep logo visible) */
@media (max-width: 992px){
  .nav-shell{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
    width: calc(100% - 36px); /* 18px gutters on tablet */
  }
}
@media (max-width: 640px){
  .nav-shell{ width: calc(100% - 24px); }
}

/* Center logo and add more top spacing on tablet/mobile */
@media (max-width: 992px){
  /* Push sticky nav below the fixed top logo with tighter spacing */
  nav{ margin-top: 0; top: 44px; }
  .nav-shell{ justify-content: center; }
  /* Fix the logo at the very top and center it */
  .logo-left{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  /* Add top padding so content doesn't sit under the fixed logo */
  body{ padding-top: 80px; }
  .brand-logo{ transform-origin: center center; }
}
@media (max-width: 640px){
  /* Push sticky nav below logo on mobile with tighter space */
  nav{ margin-top: 0; top: 72px; }
  .logo-left{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  body{ padding-top: 92px; }
  .brand-logo{ transform-origin: center center; }
}

/* Right side controls grouping in nav (theme toggle, back icon, home link) */
.nav-controls{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-direction: row-reverse; /* show controls from the right: theme, back, home */
}

.home-btn{
  text-decoration:none;
  font-family: var(--tech);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--muted);
}
.home-btn:hover{ background: var(--accent-soft); color: var(--text); border-color: var(--line); }

/* Back icon used on gallery page */
.back-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  text-decoration:none;
  font-family: var(--tech);
  font-weight: 900;
}
.back-icon:hover{ background: var(--accent-soft); color: var(--text); border-color: var(--line); }

/* Desktop links */
.nav-links-desktop{
  display:grid;
  grid-auto-flow: column;
  align-items:center;
  gap: 18px;
}

.nav-links-desktop a{
  text-decoration:none;
  font-family: var(--tech);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.2px;

  padding: 14px 18px;
  border-radius: 999px;

  color: var(--muted);
  border: 1px solid transparent;

  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-links-desktop a:hover{
  background: var(--accent-soft);
  color: var(--text);
}
.nav-links-desktop a.active{
  background: var(--text);
  color: var(--bg);
}

/* Theme toggle in nav */
.theme-toggle{
  margin-left: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 12px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.toggle-icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: var(--accent);
  color: var(--bg);
}
.toggle-label{ color: var(--muted); }

/* Hamburger hidden on desktop */
/* removed legacy hamburger styles */

/* ==================================================
   MOBILE MENU (works with .open)
   ================================================== */
/* removed legacy mobile menu overlay */

/* Modern mobile bottom navigation (replaces hamburger menu) */
.mobile-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 1600;
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(6px);
}
.mbn-grid{ display:flex; justify-content:space-around; align-items:center; padding: 8px 10px; }
.mbn-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  color: var(--muted);
  text-decoration:none;
  padding: 8px 6px;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
}
.mbn-item i{ font-size: 18px; }
.mbn-item:hover{ color: var(--text); }
.mbn-item.active{ color: var(--text); }
/* Show bottom nav on tablets and mobiles */
@media (max-width: 992px){ .mobile-bottom-nav{ display:block; } body{ padding-bottom: 64px; } }
@media (max-width: 640px){ .mobile-bottom-nav{ display:block; } body{ padding-bottom: 64px; } }
/* Hide mobile/tablet bottom nav on gallery page specifically */
@media (max-width: 992px){ body.gallery-page .mobile-bottom-nav{ display:none !important; } body.gallery-page{ padding-bottom: 0 !important; } }
@media (max-width: 640px){ body.gallery-page .mobile-bottom-nav{ display:none !important; } body.gallery-page{ padding-bottom: 0 !important; } }

/* Hide legacy hamburger on tablet since bottom nav is active */
/* removed legacy hamburger override */

/* ==================================================
   HEADINGS LEFT ALIGN (ONLY HEADINGS)
   ================================================== */
h1,h2,h3,h4,h5,h6,
.hero-title,
.hero-subtitle,
.section-title,
.card h3,
.timeline-content h4,
.timeline-content h5,
.about-title,
.contact-text h4,
.footer-links h4,
.footer-socials h4{
  text-align:left !important;
}
.section-title::after{
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ==================================================
   HERO — force text inside container
   ================================================== */
.hero{
  position: relative;
  min-height: calc(100svh - var(--navH));
  display:flex;
  align-items:center; /* center vertically */
  padding-top: clamp(20px, 4vw, 40px);
  padding-bottom: clamp(40px, 8vw, 80px);
  border-bottom: 1px solid var(--line2);
}

/* video background */
.has-video .video-bg{
  /* confine video to the hero section (not full-viewport) */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02) brightness(.82);
  z-index: 0; /* behind the overlay (1) and content (2) */
  pointer-events: none;
}
[data-theme="light"] .has-video .video-overlay,
.has-video .video-overlay{
  position: absolute; /* overlay inside hero only */
  inset: 0;
  z-index: 1; /* above the video but below content (hero-content z-index:2) */
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.40) 40%,
    rgba(0,0,0,.55) 100%);
}
[data-theme="dark"] .has-video .video-overlay{
  background: linear-gradient(135deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.58) 40%,
    rgba(0,0,0,.68) 100%);
}

/* IMPORTANT: lock hero content width to container */
.hero-content{
  position:relative;
  z-index:2;
  width: min(var(--container-wide), calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center; /* vertical centering */
  text-align:center;
}

.hero-title{
  margin: 0;
  font-family: var(--tech);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: clamp(64px, 8.5vw, 120px);
  line-height: .9;
  color: white;
  background: linear-gradient(135deg, #ffffff 0%, #e6f0ff 45%, #b8d4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTextReveal .9s ease both;
}

/* Animated gradient text for headings */
.animated-gradient-text{
  background-image: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s linear infinite;
}

/* Apply to all major headings */
h1.animated-gradient-text, h2.animated-gradient-text, h3.animated-gradient-text,
h4.animated-gradient-text, h5.animated-gradient-text, h6.animated-gradient-text,
.section-title.animated-gradient-text, .hero-title.animated-gradient-text{
  display:inline-block; /* ensures correct clipping per heading */
}

@keyframes gradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Respect users who prefer reduced motion and cut costly background-position animations */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Animated gradient border using layered backgrounds so the gradient appears in the border area */
.animated-border{
  border: 2px solid transparent;
  background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: 200% 200%, 200% 200%;
  animation: gradientShift 6s linear infinite;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 0 28px var(--neon-glow);
}

/* Make small rule under section titles use animated gradient */
.section-title::after{
  content:"";
  display:block;
  width: 110px;
  height: 4px;
  margin-top: 14px;
  border-radius: 6px;
  background-image: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  background-size: 200% 200%;
  animation: gradientShift 6s linear infinite;
  box-shadow: 0 6px 22px rgba(0,0,0,0.16), 0 0 18px var(--neon-glow);
}

/* Make the two parts of the hero title use distinct gradients */
.hero-title .mk,
.hero-title .thakur{
  display:inline-block; /* needed for background-clip to work per-span */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title .mk{
  background-image: linear-gradient(135deg, var(--cta-start), var(--cta-end));
}
.hero-title .thakur{
  background-image: linear-gradient(135deg, var(--outline-cta-start), var(--outline-cta-end));
}

/* Make hero title appear bolder without changing font metrics
   — subtle shadow and light stroke to increase perceived weight */
.hero-title{
  text-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.03);
  -webkit-text-stroke: 0.45px rgba(0,0,0,0.06);
}

.hero-title::after{
  content: "";
  display: block;
  width: 220px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(160,196,255,0.95));
  opacity: 0;
  transform: translateY(6px);
  animation: underlineReveal .9s ease .6s forwards;
}
.hero-subtitle{
  margin: 12px 0 8px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  color: rgba(255,255,255,.95);
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp .7s ease .18s both;
}
.hero-summary{
  margin: 0 0 28px;
  max-width: 72ch;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  font-size: clamp(15px, 1.6vw, 18px);
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp .7s ease .32s both;
}
.hero-btns{ display:flex; gap: 8px; flex-wrap: wrap; }

/* CTA enhancements */
.hero-btns{ justify-content:center; }
.hero-btns .btn{ padding: 16px 22px; font-size: 15px; }
.hero-btns .btn-primary{
  background-image: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  color: #fff;
  box-shadow: 0 12px 38px rgba(11,7,20,0.45), 0 0 0 0 rgba(255,255,255,0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-background-clip: border-box;
}
.hero-btns .btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0,0,0,.30), 0 0 48px var(--neon-glow); }

/* Animated subtle pulse for primary CTA */
.btn-primary.animated{
  animation: pulseGlow 3.2s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%{ box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 0 rgba(184,212,255,0); transform: translateY(0); }
  50%{ box-shadow: 0 22px 44px rgba(0,0,0,.22), 0 0 34px rgba(184,212,255,0.12); transform: translateY(-3px); }
  100%{ box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 0 rgba(184,212,255,0); transform: translateY(0); }
}

@keyframes underlineReveal{
  from{ opacity:0; transform: translateY(6px) scaleX(.98); }
  to{ opacity:1; transform: translateY(0) scaleX(1); }
}

@keyframes heroTextReveal{
  from{ opacity:0; transform: translateY(18px) scale(.995); filter: blur(4px); }
  to{ opacity:1; transform:none; filter: blur(0); }
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 0 28px var(--neon-glow);
}
.btn-outline{
  background: transparent;
  color: var(--on-surface);
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end)) 1;
  box-shadow: 0 6px 22px rgba(0,0,0,0.12), 0 0 18px rgba(0,255,240,0.06);
}
.btn-outline:hover{
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03));
  border-image: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end)) 1;
  box-shadow: 0 10px 36px var(--neon-glow);
}
.btn-wide{ padding-left: 22px; padding-right: 22px; }

/* ==================================================
   SECTIONS
   ================================================== */
.section{
  padding-top: clamp(60px, 6vw, 90px);
  padding-bottom: clamp(60px, 6vw, 90px);
}

.section-title{
  margin: 0 0 22px;
  font-family: var(--tech);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(22px, 2.1vw, 34px);
}
/* keep the earlier animated gradient rule; removed duplicate plain underline */

/* Lock key section blocks to container width (fix headings alignment) */
.section > h2,
.section > .skills-grid,
.section > .gallery-container,
.section > .video-filter-container,
.section > #videosGrid,
.section > .experience-grid,
.section > .contact-grid,
.section > .view-more-container{
  width: min(var(--container), calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
}

/* Use a slightly wider container for highly visual sections */
.section > .gallery-container,
.section > #videosGrid{
  width: min(var(--container-wide), calc(100% - 48px));
}

/* Make content feel wider at smaller viewports by reducing side gutters */
@media (max-width: 992px){
  .section > h2,
  .section > .skills-grid,
  .section > .gallery-container,
  .section > .video-filter-container,
  .section > #videosGrid,
  .section > .experience-grid,
  .section > .contact-grid,
  .section > .view-more-container{
    width: calc(100% - 36px); /* 18px gutters */
  }
  .hero-content{ width: calc(100% - 36px); }
  .page-header > *{ width: calc(100% - 36px); }
}
@media (max-width: 640px){
  .section,
  .hero,
  .main-footer{
    padding-left: 12px;
    padding-right: 12px;
  }
  .section > h2,
  .section > .skills-grid,
  .section > .gallery-container,
  .section > .video-filter-container,
  .section > #videosGrid,
  .section > .experience-grid,
  .section > .contact-grid,
  .section > .view-more-container{
    width: calc(100% - 24px); /* 12px gutters */
  }
  .hero-content{ width: calc(100% - 24px); }
  .page-header > *{ width: calc(100% - 24px); }
}

/* Cards grid */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items: stretch; /* ensure cards equalize heights per row */
}
.skills-grid.two-col .card{ grid-column: span 6; }
.card{
  grid-column: span 6;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface);
  display: flex; /* allow vertical layout and equal height */
  flex-direction: column;
  height: 100%;
}
.card i{
  font-size: 18px;
  opacity: .9;
}
.card h3{
  margin: 10px 0 10px;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.card ul{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.85;
}

/* Skill bars */
.skill-row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.skill-name{ font-weight: 700; color: var(--text); font-size: 14px; }
.skill-value{
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--muted);
}
.skill-bar{
  height: 6px; /* thinner line design */
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  overflow:hidden;
}
.skill-progress{
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  filter: brightness(0.75) saturate(0.9);
  box-shadow: none;
  width: 0%;
  transition: width 1s ease;
}

/* Gallery */
.gallery-container{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}
.gallery-item{
  grid-column: span 4;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line2);
  background: var(--surface);
  cursor:pointer;
  position:relative;
}
.gallery-item .play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.gallery-item .play-overlay i{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size: 22px;
  border: 1px solid rgba(255,255,255,.12);
  transform: scale(1);
  transition: transform .2s ease;
}
.gallery-item:hover .play-overlay i{ transform: scale(1.08); }
.gallery-item img{
  width:100%;
  height: 260px;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .25s ease;
}
.gallery-item video{
  width:100%;
  height: 260px;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .25s ease;
  display:block;
}
/* Video modal custom controls */
.video-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  border: 1px solid var(--line2);
  background: var(--surface);
  padding: 8px 10px;
  border-radius: 10px;
}
.vc-btn{
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  cursor:pointer;
}
.vc-seek{ flex:1; }
.vc-volume{ width: 120px; }
.vc-time{ color: var(--muted); font-family: var(--tech); font-weight: 900; letter-spacing: 1px; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item:hover video{ transform: scale(1.06); }
.gallery-overlay{
  position:absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.95);
}

/* Gallery page specific overlays (used by gallery.html) */
.item-category{
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,.55);
  color: var(--on-surface);
  padding: 6px 10px;
  border-radius: 8px;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.06);
}

.item-overlay{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, rgba(0,0,0,.85), transparent);
  color: rgba(255,255,255,.95);
  font-weight: 700;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.gallery-item:hover .item-overlay{ transform: translateY(0); }

/* Filter buttons for gallery page (matches video-filter-btn look) */
.filter-container{ display:flex; justify-content:center; gap:10px; margin-top:18px; }
.filter-btn{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.filter-btn:hover{ color: var(--text); }
.filter-btn.active{
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.view-more-container{
  margin-top: 22px;
  display:flex;
  justify-content:center;
}

/* Video filter */
.video-filter-container{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  justify-content: center;
  align-items: center;
}
.video-filter-btn{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.video-filter-btn:hover{ color: var(--text); }
.video-filter-btn.active{
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

/* Experience + About */
/* Professional Log Section Layout */
.experience-grid {
  display: grid;
  grid-template-columns: 3fr 2fr; /* widen about column */
  gap: 48px;
  align-items: stretch; /* stretch both columns to equal height */
  margin-top: 32px;
}

/* Ensure the left column (timeline wrapper) stretches */
.experience-left {
  height: 100%;
}
.timeline {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
  height: 100%; /* fill the grid row height */
}
.timeline::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--neon-start), var(--neon-end));
  transform: translateX(-50%);
  z-index: 0;
}
.timeline-item {
  position: relative;
  width: 50%;
  margin-bottom: 60px;
  border: 2.5px solid #bbb;
  border-radius: 16px;
  background: #181828;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  z-index: 1;
  padding: 28px 32px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.timeline-item.left {
  margin-right: auto;
}
.timeline-item.right {
  margin-left: auto;
}
.timeline-blue { border-color: #1cb5e0; }
.timeline-purple { border-color: #a259c6; }
.timeline-orange { border-color: #ff7f50; }

.timeline-dot{
  position: absolute;
  top: 32px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #bbb;
  box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  color: #fff;
  z-index: 2;
}
.timeline-blue .timeline-dot { border-color: #1cb5e0; background: #1cb5e0; }
.timeline-purple .timeline-dot { border-color: #a259c6; background: #a259c6; }
.timeline-orange .timeline-dot { border-color: #ff7f50; background: #ff7f50; }
.timeline-item.left .timeline-dot {
  right: 0;
  left: auto;
  transform: translateX(50%);
}
.timeline-item.right .timeline-dot {
  left: 0;
  transform: translateX(-50%);
}

.timeline-date{
  font-family: var(--tech);
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 13px;
}
.timeline-content h4{
  margin: 10px 0 4px;
  font-family: var(--tech);
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.5em;
}
.timeline-content h5{
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 700;
}
.timeline-content p{
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 1.1em;
}

/* about-card older block removed to avoid conflicts (modern block below remains) */

.about-photo{
  width:100%;
  height: 360px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--line2);
  margin-bottom: 12px;
}
.about-title{
  margin: 10px 0 8px;
  font-family: var(--tech);
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.about-card {
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 32px 40px;
  min-width: 320px;
  width: 100%;
  max-width: none; /* allow full column width */
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  box-sizing: border-box;
  height: 100%; /* match timeline column height */
  display: flex;
  flex-direction: column;
}
/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.contact-form-container,
.contact-info-container{
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
}
.mb-1-5{ margin-bottom: 1.5rem; }
.w-100{ width:100%; }
.border-none{ border:none !important; }

.form-group{ position:relative; margin-bottom: 14px; }
.form-input{
  width:100%;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--text);
  outline:none;
  font-family: var(--ui);
}
.form-input:focus{
  border-color: var(--line);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-label{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 0 6px;
  font-size: 13px;
  color: var(--muted);
  pointer-events:none;
  transition: transform .18s ease, top .18s ease, background .18s ease;
}
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label{
  top:-10px;
  transform: scale(.92);
  background: var(--bg);
}
.no-resize{ resize:none; }

.contact-card{
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line2);
  background: var(--surface);
  margin-bottom: 12px;
}
.contact-icon{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  display:grid;
  place-items:center;
}
.contact-text h4{
  margin:0;
  font-family: var(--tech);
  font-weight: 1000;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.contact-text p{ margin: 4px 0 0; color: var(--muted); }

.map-frame{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line2);
}
.map-thumb{
  width: 100%;
  height: 270px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.map-thumb i{ font-size: 64px; color: var(--muted); opacity: .7; }

/* Footer */
.main-footer{
  position: relative;
  border-top: 1px solid var(--line2);
  padding-top: 46px;
  padding-bottom: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
}
.main-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background-image: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  background-size: 200% 200%;
  animation: gradientShift 6s linear infinite;
}
.footer-content{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
.footer-brand .logo{
  font-family: var(--tech);
  font-weight: 1000;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.footer-brand p{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.85;
}
.footer-brand,
.footer-links,
.footer-socials{
  border: 1px solid var(--line2);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(4px);
}
.footer-links h4, .footer-socials h4{
  margin: 2px 0 12px;
  font-family: var(--tech);
  font-weight: 1000;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.footer-links h4::after, .footer-socials h4::after{
  content:"";
  display:block;
  width: 90px;
  height: 3px;
  margin-top: 10px;
  border-radius: 6px;
  background-image: linear-gradient(135deg, var(--neon-start), var(--neon-mid), var(--neon-end));
  background-size: 200% 200%;
  animation: gradientShift 6s linear infinite;
}
.footer-links ul{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 2;
}
.footer-links a{ text-decoration:none; color: var(--muted); }
.footer-links a:hover{ color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

.social-grid{ display:flex; flex-wrap: wrap; gap: 10px; }
.social-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display:grid;
  place-items:center;
  background: var(--surface);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.social-btn:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06));
  box-shadow: 0 10px 36px var(--neon-glow);
}

.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 640px){
  .footer-bottom{ flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

/* Modals */
.modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.modal.open{ display:flex; }
.close{
  position:absolute;
  right: 16px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--on-surface);
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.modal-content{
  max-width: min(1100px, 100%);
  max-height: 82vh;
  border-radius: var(--radius);
  object-fit: contain;
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  background: rgba(0,0,0,.15);
}
.video-modal-content{
  width: min(1100px, 100%);
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  background: rgba(0,0,0,.15);
}
.video-frame{ width:100%; height:100%; }

/* Responsive */
@media (max-width: 1100px) {
  .experience-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-card {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
  }
  .timeline-item {
    width: 100%;
  }
  .timeline::before {
    left: 28px;
    transform: none;
  }
  .timeline-item.left,
  .timeline-item.right {
    margin-left: 0;
    margin-right: 0;
  }
  .timeline-dot {
    left: 28px;
    right: auto;
    transform: translateX(-50%);
  }
}
/* Laptop adjustments (>=1366px): show 3-up skills grid */
/* Keep two-column layout for designated grids even on large screens */
@media (min-width: 1366px){
  .skills-grid .card{ grid-column: span 4; }
  .skills-grid.two-col .card{ grid-column: span 6; }
}

/* Tablet layout (<=992px): 2-up grids */
@media (max-width: 992px){
  /* Hide desktop nav links on small screens to avoid duplication with bottom nav */
  .nav-links-desktop{ display:none; }

  /* Center hero block on tablet */
  .hero-content{ align-items: center; text-align: center; }
  .hero-btns{ justify-content: center; }
  .hero-title::after{ margin: 18px auto 0; }
  /* Ensure title, subtitle and summary are centered and sized nicely (override global left-align) */
  .hero .hero-title,
  .hero .hero-subtitle,
  .hero .hero-summary{ text-align: center !important; margin-left: auto; margin-right: auto; }
  .hero-summary{ max-width: 64ch; }

  /* Skills: 2 columns */
  .skills-grid .card{ grid-column: span 6; }
  .skills-grid{ gap: 12px; }
  .card{ padding: 16px; }
  .card h3{ margin: 8px 0 8px; }
  .card ul{ padding-left: 16px; line-height: 1.8; }

  /* Gallery: 2 columns */
  .gallery-container .gallery-item{ grid-column: span 6; }

  /* Contact: single column */
  .contact-grid{ grid-template-columns: 1fr; }

  /* Footer: stack columns */
  .footer-content{ grid-template-columns: 1fr; }
}

/* Phones and small phablets: force single-column grids up to 768px */
@media (max-width: 768px){
  .skills-grid.two-col .card,
  .skills-grid .card{ grid-column: span 12 !important; }
  .gallery-container .gallery-item{ grid-column: span 12; }
}

/* Mobile layout (<=640px): single column grids */
@media (max-width: 640px){
  .hero-content{ align-items: center; text-align: center; }
  .hero .hero-title,
  .hero .hero-subtitle,
  .hero .hero-summary{ text-align: center !important; margin-left: auto; margin-right: auto; }
  .hero-summary{ max-width: 60ch; }
  .skills-grid .card{ grid-column: span 12; }
  .skills-grid{ gap: 12px; }
  .card{ padding: 14px; }
  .card i{ font-size: 17px; }
  .card h3{ font-size: 1rem; }
  .skill-name{ font-size: 13px; }
  .skill-value{ font-size: 12px; }
  .gallery-container .gallery-item{ grid-column: span 12; }
  /* Gallery: maintain image/video aspect ratio, reduce visual jump */
  .gallery-item img,
  .gallery-item video{ height: auto; aspect-ratio: 4/3; }
  .hero-btns{ justify-content: center; }
  .filter-container{ gap: 8px; }
  .video-filter-container{ gap: 8px; }
  .contact-card{ gap: 20px; }

  /* Mobile typography tuning */
  .hero-title{ font-size: clamp(40px, 9vw, 60px); letter-spacing: 2px; }
  .hero-subtitle{ font-size: clamp(16px, 4.6vw, 20px); margin-top: 8px; }
  .hero-summary{ font-size: 14px; line-height: 1.75; margin-bottom: 22px; }
  .section-title{ font-size: clamp(18px, 4.8vw, 22px); }
  /* Make primary CTAs easier to tap */
  .hero-btns .btn{ width: 100%; }

  /* Timeline/card spacing */
  .timeline-item{ padding: 22px 20px; margin-bottom: 38px; }
  .timeline-content p{ font-size: 1rem; }
}
@media (max-width: 560px){
  .gallery-item{ grid-column: span 12; }
  .gallery-item img{ height: 230px; }
  .gallery-item video{ height: 230px; }
  .vc-volume{ width: 80px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .gallery-item img, .btn, .nav-links-desktop a{ transition:none; }
  .gallery-item video{ transition:none; }
}

/* ==================================================
   RESPONSIVE RESET — Mobile-first via variables
   Centralize gutters and container widths
   ==================================================*/
/* Default desktop gutters */
.section,
.hero,
.main-footer{ padding-left: var(--gutter); padding-right: var(--gutter); }

/* Container widths recalculated with gutters */
.section > h2,
.section > .skills-grid,
.section > .gallery-container,
.section > .video-filter-container,
.section > #videosGrid,
.section > .experience-grid,
.section > .contact-grid,
.section > .view-more-container{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-left:auto; margin-right:auto;
}
/* Visual-heavy sections can be a bit wider */
.section > .gallery-container,
.section > #videosGrid{ width: min(var(--container-wide), calc(100% - (var(--gutter) * 2))); }

/* Hero content aligns with wide container */
.hero-content{ width: min(var(--container-wide), calc(100% - (var(--gutter) * 2))); }

/* Nav pill width follows content container */
.nav-shell{ width: min(var(--container), calc(100% - (var(--gutter) * 2))); }

/* Tablet gutters + hero width cap uses content container */
@media (max-width: 992px){
  :root{ --gutter: var(--gutter-md); }
  .hero-content{ width: min(var(--container), calc(100% - (var(--gutter) * 2))); }
}
/* Mobile gutters + hero goes full fluid (no max cap) */
@media (max-width: 640px){
  :root{ --gutter: var(--gutter-sm); }
  .hero-content{ width: calc(100% - (var(--gutter) * 2)); }
}

/* ==================================================
   GLOBAL HOVER EFFECTS — subtle lift + glow
   Applies consistently to buttons, cards, gallery tiles,
   social icons and filter chips for a cohesive feel.
   ================================================== */
/* Base transition setup for interactive blocks */
.btn,
.home-btn,
.back-icon,
.nav-links-desktop a,
.filter-btn,
.video-filter-btn,
.vc-btn,
.social-btn,
.contact-card,
.card,
.gallery-item{
  transition: transform .16s ease, box-shadow .18s ease,
              background .16s ease, border-color .16s ease, filter .16s ease;
}

/* Unified hover lift + glow */
.contact-card:hover,
.card:hover{
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 0 24px var(--neon-glow);
}
.gallery-item:hover{
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}
.social-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--neon-glow);
  filter: brightness(1.06) saturate(1.02);
}
.filter-btn:hover,
.video-filter-btn:hover,
.vc-btn:hover{
  transform: translateY(-2px);
  border-color: var(--line);
  filter: brightness(1.05) saturate(1.02);
}
.nav-links-desktop a:hover{
  transform: translateY(-1px);
}
.home-btn:hover,
.back-icon:hover{
  transform: translateY(-2px);
}

/* Text links: cleaner underline + color on hover (not for buttons) */
a[href]:not(.btn):not(.home-btn):not(.back-icon):hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Touch optimizations: reduce hover effects on touch devices, add active feedback, and improve tap response */
@media (hover: none){
  .btn:hover,
  .home-btn:hover,
  .back-icon:hover,
  .nav-links-desktop a:hover,
  .filter-btn:hover,
  .video-filter-btn:hover,
  .vc-btn:hover,
  .social-btn:hover,
  .contact-card:hover,
  .card:hover,
  .gallery-item:hover{
    transform: none;
    box-shadow: none;
    filter: none;
  }
  .btn:active,
  .home-btn:active,
  .back-icon:active,
  .filter-btn:active,
  .video-filter-btn:active,
  .vc-btn:active,
  .social-btn:active,
  .contact-card:active,
  .card:active,
  .gallery-item:active{
    transform: translateY(1px);
    filter: brightness(0.98);
  }
}

/* Faster taps: hint browsers that interactions are simple */
.btn,
.home-btn,
.back-icon,
.nav-links-desktop a,
.filter-btn,
.video-filter-btn,
.vc-btn,
.social-btn,
.contact-card,
.gallery-item{ touch-action: manipulation; }