/* BlinkNBuild Design System Stylesheet */

:root {
  /* Brand primitives */
  --cyan-50:  #E0FAFE; --cyan-100: #BAF5FD; --cyan-200: #7EEEF9;
  --cyan-300: #3DDFF2; --cyan-400: #00D4F5; --cyan-500: #00ABD1;
  --cyan-600: #007EA8; --cyan-700: #00587C; --cyan-800: #003550; --cyan-900: #001A2A;

  --blue-50:  #EBF3FD; --blue-100: #C8DEFA; --blue-200: #98C0F6;
  --blue-300: #67A1EC; --blue-400: #2B6FD4; --blue-500: #1F58B0;
  --blue-600: #1A3FA8; --blue-700: #122E7A; --blue-800: #0A1E52; --blue-900: #050E2C;

  --violet-50: #F2EDFD; --violet-100: #DAD0F8; --violet-200: #BBA8F2;
  --violet-300: #9B7FE8; --violet-400: #6B35C8; --violet-500: #5628A8;
  --violet-600: #421B88; --violet-700: #301266; --violet-800: #1F0A44; --violet-900: #100522;

  --gold-50:  #FEF9EC; --gold-100: #FDEFBC; --gold-200: #FBDB76;
  --gold-300: #F8C43E; --gold-400: #F5A623; --gold-500: #D68A10;
  --gold-600: #A86A09; --gold-700: #7A4C05; --gold-800: #4C2F02; --gold-900: #241501;

  --red-50:   #FDECEB; --red-100: #FAC8C5; --red-200: #F5918B;
  --red-300:  #EC5E56; --red-400: #D94438; --red-500: #B5352A;
  --red-600:  #8F281E; --red-700: #681C15; --red-800: #42110D; --red-900: #200805;

  --neutral-0:   #080D1A; --neutral-50: #101828; --neutral-100: #141E30;
  --neutral-200: #1A2540; --neutral-300: #212F4A; --neutral-400: #2D3E5C;
  --neutral-500: #4A6180; --neutral-600: #6E8AAA; --neutral-700: #8FA3BF;
  --neutral-800: #B8CBDF; --neutral-900: #E8EEF8; --neutral-1000: #FFFFFF;

  /* Semantic tokens */
  --bg-base:     #0A0E1A; /* User-specified dark navy base */
  --bg-surface:  var(--neutral-100);
  --bg-surface2: var(--neutral-200);
  --bg-surface3: var(--neutral-300);
  --text-primary:   var(--neutral-1000);
  --text-secondary: var(--neutral-800);
  --text-tertiary:  var(--neutral-600);
  --text-faint:     var(--neutral-500);
  --brand-primary: var(--cyan-400);
  --brand-accent:  var(--gold-400);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-soft:   rgba(255, 255, 255, 0.12);
  --border-mid:    rgba(255, 255, 255, 0.22);

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  /* Motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:cubic-bezier(0.83, 0, 0.17, 1);
  --dur-fast:  120ms; --dur-base: 200ms; --dur-slow: 350ms; --dur-x: 500ms;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Exo 2', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Background Cyber Grid Pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(rgba(0, 212, 245, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 245, 0.015) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-500);
}

/* Helper Classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  position: relative;
  z-index: 2;
}

/* Section Headings */
section {
  padding: var(--sp-12) 0;
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

.sec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cyan-400);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  display: block;
}
/* No `content: '// '` here on purpose. sih.html is generated by the SIH
   publishing pipeline and emits its own literal "// " prefix; a pseudo-element
   here produced "// // INTERACTIVE REPOSITORY" and the fix had to be re-made
   after every pipeline run. The prefix now lives in the markup of the files
   that are hand-maintained, so the generated page is correct by default. */

.sec-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}

.sec-subtitle {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color: var(--text-secondary);
  max-width: 700px;
  margin-bottom: var(--sp-10);
  font-weight: 300;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 28px;
  border-radius: var(--r-md);
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

.btn-cyan {
  background-color: var(--cyan-400);
  color: var(--neutral-0);
  border: 1px solid var(--cyan-400);
}
.btn-cyan:hover {
  background-color: var(--cyan-500);
  border-color: var(--cyan-500);
  box-shadow: 0 0 20px rgba(0, 212, 245, 0.4);
  transform: translateY(-2px);
}

.btn-gold {
  background-color: var(--gold-400);
  color: var(--neutral-0);
  border: 1px solid var(--gold-400);
}
.btn-gold:hover {
  background-color: var(--gold-500);
  border-color: var(--gold-500);
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.4);
  transform: translateY(-2px);
}

.btn-outline-gold {
  background-color: transparent;
  color: var(--gold-400);
  border: 2px solid var(--gold-400);
}
.btn-outline-gold:hover {
  background-color: var(--gold-400);
  color: var(--neutral-0);
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
  transform: translateY(-2px);
}

.btn-outline-cyan {
  background-color: rgba(0, 212, 245, 0.05);
  color: var(--cyan-400);
  border: 1px solid var(--cyan-400);
}
.btn-outline-cyan:hover {
  background-color: var(--cyan-400);
  color: var(--neutral-900);
  box-shadow: 0 0 15px rgba(0, 212, 245, 0.35);
  transform: translateY(-2px);
}

/* Badge tags */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-cyan {
  background: rgba(0, 212, 245, 0.08);
  border: 1px solid rgba(0, 212, 245, 0.2);
  color: var(--cyan-400);
}

.badge-gold {
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.2);
  color: var(--gold-400);
}

/* Sticky Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background: rgba(8, 13, 26, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--dur-base) var(--ease-out);
}

.navbar.scrolled {
  background: rgba(8, 13, 26, 0.95);
  height: 70px;
  border-bottom-color: rgba(0, 212, 245, 0.15);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 40px);
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none !important;
  color: #ffffff !important;
}

.logo-link,
.logo-link:link,
.logo-link:visited,
.logo-link:hover,
.logo-link:focus,
.logo-link:active {
  text-decoration: none !important;
  color: #ffffff !important;
  outline: none;
}

.logo-link .logo-text {
  color: #ffffff !important;
  text-decoration: none !important;
}

.logo-link .logo-text span {
  color: var(--cyan-400) !important;
  text-decoration: none !important;
}

.nav-actions-mobile {
  display: none !important;
}

.logo-img {
  height: 45px;
  width: auto;
  transition: transform var(--dur-base);
}

.logo-img:hover {
  transform: scale(1.05);
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 24px);
  list-style: none;
  margin: 0 auto;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-800);
  text-decoration: none;
  padding: var(--sp-2) 0;
  transition: color var(--dur-base) var(--ease-out);
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--cyan-400);
  transition: width var(--dur-base) var(--ease-out);
}

.nav-link:hover {
  color: var(--cyan-400);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--cyan-400);
}

.nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--sp-3);
}


/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1010;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: all var(--dur-base) var(--ease-out);
}

/* Hero Section */
.hero-sec {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  overflow: hidden;
  position: relative;
}

#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-glow-l {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 212, 245, 0.08) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.hero-glow-r {
  position: absolute;
  bottom: 10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.06) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 850px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(0, 212, 245, 0.06);
  border: 1px solid rgba(0, 212, 245, 0.15);
  border-radius: var(--r-full);
  padding: 6px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--cyan-400);
  margin-bottom: var(--sp-6);
  text-transform: uppercase;
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(38px, 8vw, 80px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: var(--sp-4);
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.hero-title span {
  color: var(--cyan-400);
  position: relative;
}

.hero-subtitle {
  font-family: 'Exo 2', sans-serif;
  font-size: clamp(14px, 2.5vw, 22px);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-800);
  margin-bottom: var(--sp-8);
}

.hero-ctas {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}

.hero-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-8);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-8);
  max-width: 650px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-stat-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--cyan-400);
  line-height: 1;
}

.hero-stat-num.gold {
  color: var(--gold-400);
}

.hero-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--sp-2);
}

.hero-divider {
  width: 1px;
  height: 35px;
  background: var(--border-subtle);
}

/* About Section */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-10);
  align-items: center;
}

.about-info-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.about-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--neutral-800);
}

.about-badge-card {
  background: var(--bg-surface2);
  border: 1px solid rgba(245, 166, 35, 0.15);
  border-left: 4px solid var(--gold-400);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  transition: transform var(--dur-base);
}

.about-badge-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(245, 166, 35, 0.08);
}

.badge-icon {
  font-size: 32px;
}

.badge-text-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 2px;
}

.badge-text-subtitle {
  font-size: 12px;
  color: var(--neutral-800);
}

.creator-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.creator-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  position: relative;
  transition: all var(--dur-slow) var(--ease-out);
}

.creator-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0%;
  background: var(--cyan-400);
  transition: height var(--dur-base) var(--ease-out);
}

.creator-card.gold-accent::before {
  background: var(--gold-400);
}

.creator-card:hover::before {
  height: 100%;
}

.creator-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-soft);
}

.creator-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.creator-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 2px solid var(--border-mid);
  transition: border-color var(--dur-base);
}

.creator-card:hover .creator-avatar {
  border-color: var(--cyan-400);
}

.creator-card.gold-accent:hover .creator-avatar {
  border-color: var(--gold-400);
}

.creator-info {
  flex-grow: 1;
}

.creator-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-1);
}

.creator-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cyan-400);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  display: block;
}

.creator-card.gold-accent .creator-role {
  color: var(--gold-400);
}

.creator-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
}

.creator-skill-tag {
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--neutral-800);
}

.creator-links {
  display: flex;
  gap: 12px;
}

.creator-link {
  color: var(--neutral-600);
  font-size: 14px;
  transition: color var(--dur-base);
}

.creator-link:hover {
  color: var(--cyan-400);
}

.creator-card.gold-accent .creator-link:hover {
  color: var(--gold-400);
}

/* Projects Showcase Section */
.filter-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}

.filter-tab {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--neutral-800);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--r-full);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all var(--dur-base) var(--ease-out);
}

.filter-tab:hover {
  color: #fff;
  border-color: var(--border-soft);
  background: var(--bg-surface2);
}

.filter-tab.active {
  background: var(--cyan-400);
  color: var(--neutral-0);
  border-color: var(--cyan-400);
  box-shadow: 0 0 15px rgba(0, 212, 245, 0.25);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  max-width: 900px;
  margin: 0 auto;
}

.project-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all var(--dur-slow) var(--ease-out);
  height: 100%;
}

.project-image-wrap {
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}

.project-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--neutral-200) 0%, var(--neutral-0) 100%);
  position: relative;
}

/* Decorative visual for visual placeholders */
.project-gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 70% 30%, rgba(0, 212, 245, 0.15) 0%, transparent 60%);
}

.project-card.gold-accent .project-gradient::after {
  background: radial-gradient(circle at 70% 30%, rgba(245, 166, 35, 0.12) 0%, transparent 60%);
}

.project-pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: 
    radial-gradient(var(--cyan-400) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 15px 15px, 30px 30px;
}

.project-card.gold-accent .project-pattern-overlay {
  background-image: 
    radial-gradient(var(--gold-400) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}

.project-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--cyan-400);
}

.project-card.gold-accent .project-accent-bar {
  background: var(--gold-400);
}

.project-icon-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(8, 13, 26, 0.8);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-400);
}

.project-card.gold-accent .project-icon-badge {
  color: var(--gold-400);
}

.project-body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-2);
}

.project-desc {
  font-size: 13.5px;
  color: var(--neutral-800);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
  flex-grow: 1;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-5);
}

.project-links {
  display: flex;
  gap: var(--sp-3);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-4);
  align-items: center;
}

.project-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-surface2);
  color: var(--neutral-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--dur-base);
}

.project-btn-icon:hover {
  background: var(--cyan-400);
  color: var(--neutral-0);
  border-color: var(--cyan-400);
}

.project-card.gold-accent .project-btn-icon:hover {
  background: var(--gold-400);
  color: var(--neutral-0);
  border-color: var(--gold-400);
}

.project-btn-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-900);
  text-decoration: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  transition: color var(--dur-base);
}

.project-btn-text:hover {
  color: var(--cyan-400);
}

.project-card.gold-accent .project-btn-text:hover {
  color: var(--gold-400);
}

/* Hover effects for project cards */
.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-400);
  box-shadow: 0 10px 30px rgba(0, 212, 245, 0.15);
}

.project-card.gold-accent:hover {
  border-color: var(--gold-400);
  box-shadow: 0 10px 30px rgba(245, 166, 35, 0.12);
}

/* Hackathon Tracker Section */
/* Hackathon Section Controls */
.hackathons-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  max-width: 900px;
  margin: 0 auto var(--sp-8);
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
}

.search-box .search-icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--neutral-600);
  font-size: 14px;
  pointer-events: none;
  transition: color var(--dur-base) var(--ease-out);
}

.search-box input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-10);
  background: rgba(8, 13, 26, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  font-size: 14px;
  transition: all var(--dur-base) var(--ease-out);
  backdrop-filter: blur(10px);
}

.search-box input::placeholder {
  color: var(--neutral-600);
}

.search-box input:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 15px rgba(0, 212, 245, 0.25);
  background: rgba(8, 13, 26, 0.8);
}

.search-box input:focus ~ .search-icon {
  color: var(--cyan-400);
}

.filter-sort-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.filter-btn {
  background: rgba(8, 13, 26, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--neutral-800);
  padding: var(--sp-2) var(--sp-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.filter-btn:hover {
  border-color: var(--border-soft);
  color: #fff;
}

.filter-btn.active {
  background: rgba(0, 212, 245, 0.1);
  border-color: var(--cyan-400);
  color: var(--cyan-400);
  box-shadow: 0 0 15px rgba(0, 212, 245, 0.2);
  font-weight: 600;
}

.sort-group {
  position: relative;
}

.sort-select {
  background: rgba(8, 13, 26, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--neutral-800);
  padding: var(--sp-2) var(--sp-4);
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  backdrop-filter: blur(10px);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.sort-select:hover {
  border-color: var(--border-soft);
  color: #fff;
}

.sort-select:focus {
  border-color: var(--cyan-400);
  box-shadow: 0 0 15px rgba(0, 212, 245, 0.2);
  color: #fff;
}

.sort-select option {
  background: var(--bg-surface);
  color: #fff;
}

/* Fade in animation for dynamic rendering */
.card-fade-in {
  animation: cardFadeIn 0.4s var(--ease-out) forwards;
  opacity: 0;
  transform: translateY(10px);
}

@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hackathons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  max-width: 900px;
  margin: 0 auto;
}

.hackathon-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  transition: all var(--dur-slow) var(--ease-out);
  position: relative;
  height: 100%;
}

.hackathon-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-3);
  gap: 8px;
  flex-wrap: wrap;
}

.hackathon-org {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  word-break: break-word;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.status-badge.open {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-badge.closing {
  background: rgba(245, 166, 35, 0.1);
  color: var(--gold-400);
  border: 1px solid rgba(245, 166, 35, 0.2);
}

.status-badge.closed {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.hackathon-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-4);
  line-height: 1.3;
  word-break: break-word;
}

.hackathon-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
  font-size: 13px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--sp-3);
  flex-wrap: wrap;
  gap: 6px;
}

.hackathon-date {
  color: var(--neutral-800);
}

.countdown-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--gold-400);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}

.countdown-wrap.closed {
  color: var(--neutral-600);
}

.countdown-wrap.open-tbd {
  color: var(--cyan-400);
}

/* Embedded YouTube Short */
.short-embed-wrap {
  position: relative;
  width: 100%;
  /* 16:9 ratio */
  padding-bottom: 56.25%; 
  background: var(--neutral-200);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border-subtle);
}

.short-embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hackathon-footer {
  margin-top: auto;
  padding-top: var(--sp-2);
}

.hackathon-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-soft);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hackathons-note-bottom {
  text-align: center;
  margin-top: var(--sp-8);
  font-family: 'Exo 2', sans-serif;
  color: var(--neutral-800);
  font-size: 14px;
}

.hackathons-note-bottom a {
  color: var(--gold-400);
  text-decoration: none;
  font-weight: 600;
}

.hackathons-note-bottom a:hover {
  text-decoration: underline;
}

/* Shop Section */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.product-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  transition: all var(--dur-slow) var(--ease-out);
  position: relative;
  height: 100%;
}

.product-badge-wrap {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--sp-4);
}

.product-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}

.product-desc {
  font-size: 13.5px;
  color: var(--neutral-800);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
  flex-grow: 1;
}

.product-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.price-lbl {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--neutral-600);
  font-family: 'JetBrains Mono', monospace;
}

.price-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-400);
  box-shadow: 0 10px 30px rgba(0, 212, 245, 0.12);
}

.product-card.gold-accent:hover {
  border-color: var(--gold-400);
  box-shadow: 0 10px 30px rgba(245, 166, 35, 0.12);
}

.shop-notice {
  text-align: center;
  margin-top: var(--sp-8);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Toast System */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.toast {
  background: var(--bg-surface2);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--cyan-400);
  border-radius: var(--r-sm);
  padding: 12px 20px;
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: slideIn 0.3s var(--ease-out);
  max-width: 320px;
}

.toast.gold {
  border-left-color: var(--gold-400);
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.toast-message {
  flex-grow: 1;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Footer styling */
.footer {
  background: var(--neutral-50);
  border-top: 1px solid var(--border-subtle);
  padding: var(--sp-12) 0 var(--sp-6);
  position: relative;
  z-index: 2;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 0.9fr);
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-logo-img {
  height: 50px;
  width: auto;
  align-self: flex-start;
}

.footer-tagline {
  font-size: 14px;
  color: var(--neutral-800);
  font-weight: 300;
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: var(--sp-2);
}

.social-icon-link {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.02);
  color: var(--neutral-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  transition: all var(--dur-base);
}

.social-icon-link:hover {
  background: var(--cyan-400);
  color: var(--neutral-0);
  border-color: var(--cyan-400);
}

.footer-col-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  position: relative;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 25px;
  height: 2px;
  background: var(--cyan-400);
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link-item a {
  color: var(--neutral-800);
  font-size: 13.5px;
  text-decoration: none;
  transition: color var(--dur-base);
}

.footer-link-item a:hover {
  color: var(--cyan-400);
}

.contact-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  color: var(--neutral-800);
}

.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-icon {
  color: var(--cyan-400);
  width: 14px;
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.copyright-text {
  font-size: 12px;
  color: var(--neutral-600);
}

.credit-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neutral-600);
}

/* Animations */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Menu Slide */
@media (max-width: 768px) {
  /* Layout adjustments */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  
  .projects-grid, .hackathons-grid, .shop-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .hackathons-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .search-box {
    width: 100%;
    min-width: 0;
  }

  .filter-sort-wrap {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .filter-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 10px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  .sort-group, .sort-select {
    width: 100%;
  }

  .hackathon-card {
    padding: var(--sp-4);
  }

  .hackathon-name {
    font-size: 16px;
  }

  .hackathon-details-row {
    font-size: 12px;
    gap: 6px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* Navbar responsive controls (<= 1024px: tablet & mobile drawer, > 1024px: desktop) */
@media (max-width: 1024px) {
  .hamburger {
    display: flex;
  }
  
  .nav-menu {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: #080D1A;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    transition: left var(--dur-slow) var(--ease-out);
    z-index: 999;
    border-top: 1px solid var(--border-subtle);
    margin: 0;
  }
  
  .nav-menu.open {
    left: 0;
  }
  
  .nav-menu .nav-link {
    font-size: 16px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-6);
  }
  
  .nav-actions {
    display: none; /* YouTube subscribe button integrated in hamburger drawer */
  }

  .nav-menu .nav-actions-mobile {
    display: block !important;
    margin-top: var(--sp-4);
  }

  /* Hamburger transform when menu is open */
  .hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}

@media (min-width: 1025px) {
  .nav-menu .nav-actions-mobile,
  .nav-actions-mobile {
    display: none !important;
  }
}


/* Logo Text Styles */
.logo-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin-left: var(--sp-3);
  transition: color var(--dur-base) var(--ease-out);
  text-transform: none;
}

.logo-text span {
  color: var(--cyan-400);
  transition: color var(--dur-base) var(--ease-out);
}

.logo-link:hover .logo-text {
  color: var(--cyan-400);
}

.logo-link:hover .logo-text span {
  color: #ffffff;
}

/* Project Video Embed Styling */
.project-video-iframe {
  width: 160%;
  height: 160%;
  border: 0;
  background: var(--neutral-200);
  transform: scale(0.625);
  transform-origin: top left;
  overflow: hidden;
}

/* Video Preview Thumbnail Component */
.video-preview-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

.video-thumbnail-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base);
}

.play-btn-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(8, 13, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 10;
}

.play-icon {
  font-size: 20px;
  color: #ffffff;
  transition: color var(--dur-base) var(--ease-out);
}

/* Hover effects */
.video-preview-link:hover .video-thumbnail-img {
  transform: scale(1.05);
  opacity: 0.9;
}

.video-preview-link:hover .play-btn-overlay {
  background: var(--cyan-400);
  border-color: var(--cyan-400);
  box-shadow: 0 0 20px rgba(0, 212, 245, 0.5);
}

.video-preview-link:hover .play-icon {
  color: var(--neutral-0);
}

/* For gold accent cards, show gold play button hover */
.project-card.gold-accent .video-preview-link:hover .play-btn-overlay {
  background: var(--gold-400);
  border-color: var(--gold-400);
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.5);
}

.hackathon-card:hover .video-preview-link .play-btn-overlay {
  background: var(--gold-400);
  border-color: var(--gold-400);
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.5);
}

.hackathon-card:hover .video-preview-link .play-icon {
  color: var(--neutral-0);
}

/* Fix collapsing responsive YouTube Short preview link */
.short-embed-wrap .video-preview-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Blinking LED Footer Credit Animation */
.blink-led {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--cyan-400);
  text-shadow: 0 0 8px var(--cyan-400);
  animation: led-text-blink 1s infinite steps(2);
  margin-left: 2px;
}

.led-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background-color: var(--cyan-400);
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--cyan-400);
  animation: led-dot-blink 1s infinite steps(2);
}

@keyframes led-text-blink {
  0%, 49% {
    color: var(--cyan-400);
    text-shadow: 0 0 8px var(--cyan-400);
  }
  50%, 100% {
    color: var(--neutral-600);
    text-shadow: none;
  }
}

@keyframes led-dot-blink {
  0%, 49% {
    opacity: 1;
    background-color: var(--cyan-400);
    box-shadow: 0 0 8px var(--cyan-400);
  }
  50%, 100% {
    opacity: 0.2;
    background-color: var(--neutral-600);
    box-shadow: none;
  }
}

/* Force project image wrap children to maintain 16:9 absolute bounds */
.project-image-wrap .video-preview-link,
.project-image-wrap .project-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-image-wrap .project-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 160%;
  height: 160%;
  border: 0;
  background: var(--neutral-200);
  transform: scale(0.625);
  transform-origin: top left;
  overflow: hidden;
}


/* ============================================================================
   VISUAL AUDIT LAYER : overflow guards, CLS elimination, AdSense containers,
   and Google "tap target" / WCAG 2.5.8 compliance.
   Appended last so these rules win ties against the base cascade above.
   ========================================================================= */

/* --- 1. GLOBAL OVERFLOW GUARD -------------------------------------------
   body already sets overflow-x:hidden, but decorative absolutely-positioned
   glow blobs still widen the layout box (404.html measured 1584px inside a
   1440px viewport, and 474px inside a 375px viewport, which triggers mobile
   shrink-to-fit zoom-out). `clip` contains them without creating a scroll
   container, so position:sticky keeps working. */
html {
  overflow-x: clip;
  max-width: 100%;
}

/* Any section that hosts the decorative hero glows must clip them. */
.hero-sec,
.sih-hero,
.error-container {
  overflow: hidden;
}


/* --- 2. CLS ELIMINATION --------------------------------------------------
   Measured baseline CLS (before any ads): 0.228 mobile / 0.138 desktop on
   index.html. Layout-shift sources were nav-actions, nav-menu, hero-badge and
   hero-content : i.e. late-arriving icon + display webfonts reflowing text. */

/* 2a. Reserve a fixed advance width for every Font Awesome glyph so buttons,
       nav items and badges do not resize when the icon font swaps in. */
.btn i,
.nav-link i,
.hero-badge i,
.hero-sih-banner i,
.social-icon-link i,
.creator-link i,
.project-btn-icon i,
.project-btn-text i,
.contact-icon,
.countdown-wrap i,
.hackathon-prize i,
.search-icon,
.ps-meta-item i,
.ps-details-toggle i {
  display: inline-block;
  width: 1.15em;
  text-align: center;
  font-style: normal;
  flex-shrink: 0;
}

/* 2b. Metric-matched fallback faces. Until Orbitron / Exo 2 arrive from the
       CDN the browser paints Arial; without these overrides the two fonts have
       different ascent/descent/advance ratios, so every heading re-wraps and
       pushes the page down. These synthetic faces make the fallback occupy
       very nearly the same box as the real font. */
@font-face {
  font-family: "Orbitron Fallback";
  src: local("Arial");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Exo 2 Fallback";
  src: local("Arial");
  size-adjust: 94%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New");
  size-adjust: 108%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

body { font-family: "Exo 2", "Exo 2 Fallback", sans-serif; }

.hero-title, .sec-title, .btn, .logo-text, .filter-tab, .project-title,
.creator-name, .hackathon-name, .footer-col-title, .error-code, .error-title,
.badge-text-title, .hero-stat-num, .sih-title {
  font-family: "Orbitron", "Orbitron Fallback", sans-serif;
}

.hero-badge, .sec-label, .hero-stat-lbl, .creator-skill-tag, .badge,
.status-badge, .hackathon-org, .countdown-wrap, .copyright-text,
.hackathon-date, .filter-btn, .sort-select {
  font-family: "JetBrains Mono", "JetBrains Mono Fallback", monospace;
}

.hero-subtitle, .sec-subtitle, .project-desc, .about-desc,
.ps-title, .error-desc {
  font-family: "DM Sans", "DM Sans Fallback", "Exo 2", sans-serif;
}

/* 2c. Reserve the exact boxes the real webfont occupies.
       Traced LayoutShift attribution on desktop showed a single 0.145 shift at
       t=2308ms with these rects:
         .logo-text    88px  -> 114px wide   (Orbitron is ~30% wider than Arial)
         .nav-actions  159px -> 175px wide
         .hero-content 609px -> 702px tall   (title re-wrapped)
       size-adjust cannot close a 30% width gap without wrecking the vertical
       metrics, so the fixed-content elements simply reserve their measured
       final size and the fallback renders inside a box that never grows. */
.logo-text {
  display: inline-block;
  min-width: 114px;   /* measured: 113.4px in Orbitron 18px, all viewports */
}

.nav-actions {
  min-width: 175px;   /* measured: 174.8px at >=1440 */
  justify-content: flex-end;
}

/* The wrapper alone is not enough: the button inside still grew 159 -> 175px
   when Orbitron replaced Arial, dragging the nav row with it. */
.nav-actions .btn,
#subscribe-btn {
  min-width: 175px;
}

/* .hero-sec is `display:flex; justify-content:center`, so .hero-content was a
   shrink-to-fit flex item: its width tracked the title text and jumped
   864px -> 850px on font swap, resizing the whole hero box. Filling the line
   makes the width font-independent, leaving only the (now reserved) heights. */
.hero-content {
  width: 100%;
  flex: 0 0 auto;
}
@media (max-width: 1024px) {
  .nav-actions { min-width: 0; }
}

/* Hero title: reserve the line-box height Orbitron actually produces, so the
   narrower fallback cannot render fewer lines and then grow. Measured heights
   were 119.7px @375 (3 lines), 79.8px @412 (2), 129px @768, 168px @1440+. */
.hero-title { min-height: 120px; }
@media (min-width: 400px)  { .hero-title { min-height: 80px; } }
@media (min-width: 769px)  { .hero-title { min-height: 130px; } }
@media (min-width: 1024px) { .hero-title { min-height: 168px; } }

.hero-badge { min-height: 34px; }
.hero-subtitle { min-height: 45px; }
@media (min-width: 769px) { .hero-subtitle { min-height: 36px; } }

/* 2d. THE dominant desktop shift. Frame-by-frame polling caught
   .hero-stats-row jumping 650x95 -> 650x188 at t=2069ms: its three stats plus
   two dividers measure ~610px in Arial but overflow the `max-width: 650px`
   box once Orbitron (~30% wider) loads, so the flex row wraps to two lines and
   the vertically-centred hero grows 94px. Wrapping also strands a divider with
   nothing to divide, so a single row is the intended design either way. */
@media (min-width: 1024px) {
  .hero-stats-row {
    max-width: 100%;
    flex-wrap: nowrap;
    min-height: 95px;
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  /* Not enough room to guarantee one row here, so reserve the wrapped height
     instead and let it stay wrapped from first paint. */
  .hero-stats-row { min-height: 188px; }
}


/* --- 3. GOOGLE ADSENSE : ZERO-CLS AD CONTAINERS --------------------------
   Every slot reserves its height up front, so the page never reflows when the
   creative arrives (or when it stays unfilled). Heights match the responsive
   unit sizes AdSense actually serves at each breakpoint. */
.ad-zone {
  /* >= 24px clearance on every side keeps ads away from clickable UI, which is
     the AdSense accidental-click / ad-placement policy requirement. */
  margin: var(--sp-8) auto;
  padding: 0;
  width: 100%;
  max-width: 1200px;
  clear: both;
  position: relative;
  z-index: 1;            /* below the fixed navbar (1000) and drawer (999) */
  isolation: isolate;
  text-align: center;
}

.ad-zone--in-feed {
  grid-column: 1 / -1;   /* span the full hackathon grid row */
  margin: var(--sp-4) 0;
}

.ad-label {
  display: block;
  font-family: "JetBrains Mono", "JetBrains Mono Fallback", monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neutral-600);
  text-align: center;
  line-height: 1;
  margin-bottom: 6px;
  user-select: none;
  pointer-events: none;
}

.ad-slot {
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  contain: layout paint style;
}

/* Deterministic fixed unit sizes driven by media queries. A responsive unit
   (data-ad-format="horizontal" + full-width-responsive) let Google pick the
   height: the leaderboard measured 377px inside a reserved 100px box on a
   375px viewport. Fixed sizes are the only way to reserve the exact pixel
   height the creative will occupy, which is what makes the slot truly
   zero-CLS. Trade-off: slightly narrower demand pool than a fully responsive
   unit, in exchange for a guaranteed-stable layout. */

/* Leaderboard: 320x100 -> 468x60 -> 728x90 -> 970x90 */
.ad-slot--leaderboard { min-height: 100px; }
.ad-slot--leaderboard .adsbygoogle { width: 320px; height: 100px; }
@media (min-width: 500px) {
  .ad-slot--leaderboard { min-height: 60px; }
  .ad-slot--leaderboard .adsbygoogle { width: 468px; height: 60px; }
}
@media (min-width: 800px) {
  .ad-slot--leaderboard { min-height: 90px; }
  .ad-slot--leaderboard .adsbygoogle { width: 728px; height: 90px; }
}
@media (min-width: 1200px) {
  .ad-slot--leaderboard { min-height: 90px; }
  .ad-slot--leaderboard .adsbygoogle { width: 970px; height: 90px; }
}

/* In-feed grid card: 300x250 -> 336x280 */
.ad-slot--in-feed { min-height: 250px; }
.ad-slot--in-feed .adsbygoogle { width: 300px; height: 250px; }
@media (min-width: 500px) {
  .ad-slot--in-feed { min-height: 280px; }
  .ad-slot--in-feed .adsbygoogle { width: 336px; height: 280px; }
}

/* In-article: 300x250 -> 336x280 */
.ad-slot--in-article { min-height: 250px; }
.ad-slot--in-article .adsbygoogle { width: 300px; height: 250px; }
@media (min-width: 500px) {
  .ad-slot--in-article { min-height: 280px; }
  .ad-slot--in-article .adsbygoogle { width: 336px; height: 280px; }
}

/* Fixed-size units are inline-block and centred inside the reserved box.
   Width/height live here rather than in the <ins> style attribute, because an
   inline style outranks a stylesheet rule and would pin every breakpoint to
   the mobile size. */
.ad-slot .adsbygoogle {
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
}

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide the label when Google reports the slot as unfilled, so an empty
   reserved box does not read as a broken element. */
.ad-zone:has(ins[data-ad-status="unfilled"]) .ad-label { visibility: hidden; }


/* --- 4. TAP TARGET COMPLIANCE (>= 48x48 CSS px on touch viewports) -------
   Measured offenders: .hamburger 24x18, .creator-link 14x22,
   .project-btn-text 18h, .ps-details-toggle 27h, .nav-link 36h,
   .filter-tab 30h, .filter-btn 31h, .sort-select 35h, inputs 42h. */
@media (max-width: 1024px) {
  .hamburger {
    width: 48px;
    height: 48px;
    padding: 15px 12px;
    justify-content: space-between;
    align-items: stretch;
    margin-right: -8px;      /* keep the icon optically flush with the edge */
    border-radius: var(--r-md);
  }

  .logo-link { min-height: 48px; }

  .btn {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .project-btn-icon,
  .social-icon-link,
  .creator-link {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .creator-link {
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface2);
  }

  .creator-links { gap: var(--sp-2); }

  .project-btn-text {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding-left: var(--sp-2);
  }

  .filter-tab,
  .filter-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sort-select,
  .search-box input,
  .ps-search-input,
  .ps-select {
    min-height: 48px;
  }

  .ps-details-toggle {
    min-height: 48px;
    display: flex;
    align-items: center;
    text-align: left;
  }

  /* sih.html's footer uses .footer-links > li > a, index.html uses
     .footer-link-item > a - cover both. */
  .footer-link-item a,
  .footer-links a,
  .hackathons-note-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }

  /* Announcement pill in the hero; its inline style only sets padding, so a
     stylesheet min-height still wins. */
  .hero-sih-banner {
    min-height: 48px;
    box-sizing: border-box;
  }
}

@media (max-width: 1024px) {
  /* Drawer links get a full-width 48px row so the whole strip is tappable. */
  .nav-menu .nav-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-6);
  }
  .nav-menu { gap: var(--sp-4); }

  /* 0.98 alpha + backdrop-filter let the hero bleed through the open drawer
     on GPU-composited paths; make it fully opaque. */
  .nav-menu.open { background: #080D1A; }
}


/* --- 5. FILTER PILL LAYOUT ----------------------------------------------
   `flex: 1 1 auto` made the final wrapped row stretch a lone pill to the full
   container width ("Biotech" alone on row 2), giving ragged, uneven rows.
   An explicit grid keeps every pill the same width at every breakpoint. */
@media (max-width: 768px) {
  .filter-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .filter-btn {
    flex: none;
    width: 100%;
    padding: 8px 6px;
    font-size: 11.5px;
    white-space: normal;
    line-height: 1.2;
  }

  .filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    justify-content: stretch;
  }

  /* 5 project tabs: let the odd one out span the full row instead of
     floating alone and off-centre. */
  .filter-tabs .filter-tab:nth-child(5) { grid-column: 1 / -1; }

  .filter-tab {
    width: 100%;
    padding: 8px 6px;
    white-space: normal;
    line-height: 1.2;
  }
}


/* --- 6. MOBILE TYPOGRAPHY & DENSITY -------------------------------------
   `.hero-stat-num` is sized for short numerals ("23+"); the two word-valued
   stats ("Open Source", "eYRC Winners") rendered at display size and swamped
   the hero above the fold. */
@media (max-width: 768px) {
  .hero-stats-row {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .hero-divider {
    width: 60px;
    height: 1px;
    margin: 0 auto;
  }

  .hero-stat-num {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.15;
  }

  section { padding: var(--sp-10) 0; }

  .sec-subtitle { margin-bottom: var(--sp-7); }
}


/* --- 7. REDUCED MOTION --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}


/* --- 8. HERO REVEAL : LCP AND CLS -----------------------------------------
   Measured: a consistent 0.145 layout shift on desktop attributed to
   `container hero-content reveal-fade-up active`, reproducible with the
   AdSense network fully blocked, so it is the reveal animation and not ads.
   The hero is above the fold, so fading it up from translateY(30px) both
   registers as a shift and delays the LCP element by up to 0.8s. Below-the-
   fold sections keep the reveal; the hero simply paints immediately. */
.hero-content.reveal-fade-up,
.sih-hero .reveal-fade-up {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Promote the remaining reveals to their own compositor layer so the
   transform genuinely never touches layout. */
.reveal-fade-up { will-change: opacity, transform; }
.reveal-fade-up.active { will-change: auto; }


/* --- 9. SHARED PARTICLE BACKGROUND ---------------------------------------
   The hero canvas now runs on every page (hero-canvas.js). Two contexts need
   help beyond the base #hero-canvas rule. */

/* privacy-policy.html has no hero section, so the canvas becomes a fixed
   full-viewport layer. Needs #id.class specificity to beat #hero-canvas. */
#hero-canvas.canvas-fixed-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

/* Its glow blobs are body-level there, so pin them to the viewport too rather
   than to 20% of a 2,900px document. */
.canvas-fixed-bg ~ .hero-glow-l,
.canvas-fixed-bg ~ .hero-glow-r {
  position: fixed;
}

/* 404.html's .error-container sets z-index:2, making it a stacking context.
   Inside it the positioned canvas/glow layers would paint over the static
   text, so lift the actual content above them. */
.error-container > :not(canvas):not(.hero-glow-l):not(.hero-glow-r) {
  position: relative;
  z-index: 2;
}


/* --- 10. SECOND-PASS VISUAL FIXES ---------------------------------------
   Found by a crowding/contrast/aspect sweep after the first audit. The first
   pass only looked for overlapping boxes, and two elements touching at a 0px
   gap is not an overlap - which is how these got through. */

/* 10a. sih.html's footer markup uses .footer-links-group / .footer-heading /
        .footer-links, none of which existed in any stylesheet. Its links were
        rendering as unstyled browser-default blue (#0000EE) on dark navy at a
        measured 1.89:1 contrast ratio. Mirrors the index.html footer. */
.footer-links-group {
  display: flex;
  flex-direction: column;
}

.footer-heading {
  font-family: 'Orbitron', 'Orbitron Fallback', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  position: relative;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 25px;
  height: 2px;
  background: var(--cyan-400);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: var(--neutral-800);
  font-size: 13.5px;
  text-decoration: none;
  transition: color var(--dur-base);
}

.footer-links a:hover {
  color: var(--cyan-400);
}

/* 10b. Contrast. --neutral-500 (#4A6180) on the page background measured
        3.04:1 against a 4.5:1 requirement for text this size. */
.hero-stat-lbl {
  color: var(--neutral-600);
}

/* Closed-state badge measured 4.44:1, just under the 4.5:1 floor. */
.status-badge.closed {
  color: #F98B8B;
}

/* 10c. The "Watch 40 Hackathons Video" CTA carries an inline
        `white-space: nowrap`, so on a 375px viewport it ran 19px past its
        banner's padding box. Let it wrap on narrow screens. */
.masterclass-cta {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 621px) {
  /* Wide enough to keep the label on one line. */
  .masterclass-cta { white-space: nowrap; }
}

/* 10d. .ps-count-bar is `justify-content: space-between` with no gap, so on
        mobile the result count and the "Instant Live Filter" tag sat flush
        against each other. */
.ps-count-bar {
  gap: var(--sp-3);
  flex-wrap: wrap;
}


/* --- 11. PIPELINE-PROOF sih.html OVERRIDES -------------------------------
   sih.html is a generated file: the SIH publishing pipeline rewrites it (and
   fans it out to every deploy folder), which wipes any edit made to its inline
   <style> block. style.css is NOT a pipeline output, so rules that must
   survive belong here. sih.html's inline <style> is parsed after this file, so
   these need one extra level of specificity to win. */

/* The two hero download buttons sat 16px apart, and the gold one throws a 25px
   glow that ate most of that gap. 32px side by side, 20px when stacked. */
.sih-hero .sih-cta-group {
  gap: var(--sp-5) var(--sp-7);
}

/* Result count and the "Instant Live Filter" tag sat flush on mobile. */
#explorer .ps-count-bar {
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* sih.html emits a `.btn-primary` CTA that no stylesheet defined, so it fell
   back to the browser's default link blue (#0000EE) on dark navy - a measured
   1.78:1 contrast ratio. Defined here rather than in the generated file so it
   survives the next pipeline run. Matches .btn-outline-cyan. */
.btn-primary {
  background: rgba(0, 212, 245, 0.1);
  color: var(--cyan-400);
  border: 1px solid var(--cyan-400);
  border-radius: var(--r-md);
  font-family: 'Orbitron', 'Orbitron Fallback', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}

.btn-primary:hover {
  background: var(--cyan-400);
  color: var(--neutral-0);
  box-shadow: 0 0 20px rgba(0, 212, 245, 0.35);
}

@media (max-width: 1024px) {
  .btn-primary { min-height: 48px; }
}

/* ==========================================================================
   HARDWARE ACADEMY SECTION (homepage)
   ========================================================================== */

/* 3-Block Courses Grid for Homepage */
.academy-blocks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.academy-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-6);
  background: linear-gradient(145deg, rgba(14, 23, 38, 0.95) 0%, rgba(9, 15, 26, 0.98) 100%);
  border: 1px solid rgba(0, 212, 245, 0.22);
  border-radius: var(--r-xl);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.academy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, var(--cyan-400));
}

.academy-card:hover {
  border-color: var(--card-accent, rgba(0, 212, 245, 0.5));
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.academy-card--cyan {
  --card-accent: var(--cyan-400);
  border-color: rgba(0, 212, 245, 0.25);
}

.academy-card--gold {
  --card-accent: var(--gold-400);
  border-color: rgba(245, 166, 35, 0.25);
}

.academy-card--purple {
  --card-accent: #a855f7;
  border-color: rgba(168, 85, 247, 0.25);
}

.academy-card .badge {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.academy-card .badge-cyan {
  background: rgba(0, 212, 245, 0.12);
  color: var(--cyan-300);
  border: 1px solid rgba(0, 212, 245, 0.3);
}

.academy-card .badge-gold {
  background: rgba(245, 166, 35, 0.12);
  color: var(--gold-300);
  border: 1px solid rgba(245, 166, 35, 0.3);
}

.academy-card .badge-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.academy-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.academy-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.academy-card--cyan .academy-card-icon {
  background: rgba(0, 212, 245, 0.1);
  border: 1px solid rgba(0, 212, 245, 0.3);
  color: var(--cyan-400);
}

.academy-card--gold .academy-card-icon {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: var(--gold-400);
}

.academy-card--purple .academy-card-icon {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.academy-card-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: var(--sp-3);
}

.academy-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--neutral-700);
  margin-bottom: var(--sp-5);
  flex-grow: 1;
}

.academy-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: var(--sp-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: var(--sp-4);
}

.academy-card-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neutral-600);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: var(--r-sm);
}

.academy-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Exo 2', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--card-accent, var(--cyan-400));
  transition: gap var(--dur-base) var(--ease-out);
}

.academy-card:hover .academy-card-cta {
  gap: 12px;
}

@media (max-width: 1024px) {
  .academy-blocks-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 640px) {
  .academy-blocks-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Upcoming course cards --- */

.academy-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.academy-next {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}

.academy-next:hover {
  border-color: rgba(0, 212, 245, 0.35);
  background: var(--bg-surface2);
  transform: translateY(-3px);
}

.academy-next-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border-radius: var(--r-md);
  background: rgba(0, 212, 245, 0.08);
  border: 1px solid rgba(0, 212, 245, 0.28);
  color: var(--cyan-400);
}

.academy-next h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.35;
}

.academy-next p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--neutral-700);
  margin: 0;
}

@media (max-width: 640px) {
  .academy-feature { padding: var(--sp-5); }
  .academy-feature-stats { gap: var(--sp-6); }
  .academy-feature-stats .afs-num { font-size: 20px; }
  .academy-next-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLINKNBUILD DIGITAL STORE : SHORT NOTES & CHEATSHEETS
   ========================================================================== */

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

.store-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.store-card:hover {
  transform: translateY(-5px);
  border-color: var(--cyan-400);
  box-shadow: 0 16px 36px rgba(0, 212, 245, 0.12);
}

.store-card.featured {
  border-color: rgba(245, 166, 35, 0.4);
}

.store-card.featured:hover {
  border-color: var(--gold-400);
  box-shadow: 0 16px 36px rgba(245, 166, 35, 0.15);
}

.store-card-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.store-category-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.store-tag-cyan {
  background: rgba(0, 212, 245, 0.1);
  color: var(--cyan-400);
  border: 1px solid rgba(0, 212, 245, 0.25);
}

.store-tag-gold {
  background: rgba(245, 166, 35, 0.1);
  color: var(--gold-400);
  border: 1px solid rgba(245, 166, 35, 0.25);
}

.store-tag-purple {
  background: rgba(155, 127, 232, 0.1);
  color: var(--violet-300);
  border: 1px solid rgba(155, 127, 232, 0.25);
}

.store-tag-emerald {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.store-tag-red {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.store-page-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neutral-600);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.store-card-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: var(--sp-2);
}

.store-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--neutral-700);
  margin-bottom: var(--sp-4);
  flex-grow: 1;
}

.store-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
  padding: 0;
  list-style: none;
}

.store-topic-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--neutral-600);
  background: var(--neutral-100);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.store-price-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-subtle);
  margin-bottom: var(--sp-4);
}

.store-price-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.store-mrp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--neutral-500);
  text-decoration: line-through;
}

.store-deal-price {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #10B981;
}

.store-discount-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.store-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--cyan-400) 0%, var(--blue-400) 100%);
  color: #080D1A;
  font-family: 'Exo 2', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}

.store-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 212, 245, 0.3);
  color: #080D1A;
}

.store-download-btn.gold-btn {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
  color: #080D1A;
}

.store-download-btn.gold-btn:hover {
  box-shadow: 0 8px 20px rgba(245, 166, 35, 0.3);
}

.store-bundle-banner {
  background: linear-gradient(135deg, rgba(0, 212, 245, 0.08) 0%, rgba(245, 166, 35, 0.08) 100%);
  border: 1px solid rgba(0, 212, 245, 0.25);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.store-bundle-info h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.store-bundle-info p {
  font-size: 13.5px;
  color: var(--neutral-700);
  line-height: 1.55;
  margin: 0;
}