.no-transitions, .no-transitions * { transition: none !important; }
/* ===== Dynamic Theme Variables ===== */
:root {
  --bg: #0d1117;
  --text: #e6edf3;
  --nav-bg: #010409;
  --link: #58a6ff;
  --link-muted: #9fbcd8;
  --heading: #58a6ff;
  --subheading: #79c0ff;
  --secondary-text: #9fbcd8;
  --muted: #a5b8d6;
  --footer-text: #6e7681;
  --hero1: #091929;
  --hero2: #142b46;
}

/* Scoped transitions */
html, body, nav, section, .hero, footer, a, .links a, .product-links a, .gallery img, hr {
  transition: color 160ms linear, background-color 160ms linear, border-color 160ms linear, box-shadow 160ms linear;
}

/* Base styling */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background-color: var(--bg); }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* Navigation bar */
nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background-color: var(--nav-bg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 1000;
}
nav .nav-container {
  max-width: 1200px; margin: auto;
  display: flex; justify-content: center; align-items: center;
  gap: 24px; padding: 12px 16px;
}
nav a { color: var(--link-muted); text-decoration: none; font-size: 1rem; padding: 6px 10px; border-radius: 4px; }
nav a:hover { color: var(--link); text-decoration: underline; }

/* Hero section */
.hero {
  padding: 120px 20px 80px; text-align: center;
  background: linear-gradient(135deg, var(--hero1) 0%, var(--hero2) 100%);
}
.hero h1 { font-size: 3rem; margin-bottom: 8px; color: var(--heading); }
.hero p  { font-size: 1.3rem; color: var(--secondary-text); }

/* Sections */
section { padding: 80px 20px 40px; max-width: 1200px; margin: auto; }
section h2 { font-size: 3rem; margin-bottom: 20px; color: var(--heading); }
.subsection { margin-bottom: 48px; }
.subsection h1 { font-size: 1.6rem; margin-bottom: 12px; color: var(--subheading); }
.subsection p  { margin-bottom: 16px; color: var(--muted); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 12px; }
.gallery img {
  width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery img:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.6); }

/* Large image */
.large-img {
  width: 100%; max-width: 800px; max-height: 500px;
  margin: 20px auto; display: block; border-radius: 8px; object-fit: cover;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Links list */
.links { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.links a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
.links a:hover { border-bottom-color: var(--link); }

/* Product store links */
.product-links { margin: 8px 0; font-size: 1.25rem; text-decoration: underline; }
.product-links a { color: var(--link); text-decoration: none; margin-right: 8px; }
.product-links a:hover { text-decoration: underline; }

/* Divider */
hr {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--link-muted), transparent);
  opacity: .4; max-width: 1200px; margin: 24px auto;
}

/* Footer */
footer { text-align: center; padding: 24px 20px; background-color: var(--nav-bg); color: var(--footer-text); font-size: .9rem; }

/* Resume link */
.resume-link { color: var(--link); text-decoration: none; font-weight: 500; }
.resume-link:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .hero h1 { font-size: 3.5rem; }
  .hero p  { font-size: 1.5rem; }
  nav a    { font-size: 1.1rem; }
}