:root {
  --background: 222 38% 7% !important;
  --foreground: 174 33% 94% !important;
  --card: 220 30% 10% !important;
  --card-foreground: 174 33% 94% !important;
  --primary: 79 100% 56% !important;
  --primary-foreground: 220 40% 6% !important;
  --secondary: 176 90% 42% !important;
  --secondary-foreground: 220 40% 6% !important;
  --muted: 220 24% 14% !important;
  --muted-foreground: 177 12% 65% !important;
  --accent: 42 86% 57% !important;
  --accent-foreground: 220 40% 6% !important;
  --border: 177 37% 21% !important;
  --ink: 222 45% 5% !important;
  --ink-foreground: 174 33% 94% !important;
  --oro: 42 86% 57% !important;
  --turq: 176 90% 42% !important;
  --jade: 79 100% 56% !important;
  --crema: 220 33% 8% !important;
  --mist: 219 27% 12% !important;
}

* { scrollbar-width: thin; scrollbar-color: #b7ff36 #071012; }
html { scroll-behavior: smooth; background: #05090d; }
body {
  margin: 0;
  color: #ecfffa;
  background:
    linear-gradient(180deg, rgba(3,8,12,.3), rgba(3,8,12,.88)),
    url("modernluminara-hero.jpg") center top / cover no-repeat,
    #05090d;
  font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif !important;
  overflow-x: hidden;
}
body::before {
  display: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(41,230,201,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(41,230,201,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

.font-display, h1, h2, h3, strong { font-family: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif !important; }
.site-container, main > * > div { max-width: 90rem !important; }

body > div > header {
  background: rgba(5, 10, 14, .78) !important;
  border-color: rgba(66, 255, 220, .14) !important;
  backdrop-filter: blur(20px) saturate(150%);
}
body > div > header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, #b7ff36, #21dfc5, #e9b949, transparent);
  opacity: .65;
}
body > div > header .bg-ink { background: linear-gradient(90deg, #081312, #102418, #081312) !important; }
body > div > header a[aria-label$="home"] > span:first-child {
  border-radius: 12px !important;
  background: linear-gradient(145deg, #b7ff36, #21dfc5) !important;
  color: #071012 !important;
  box-shadow: 0 0 28px rgba(183,255,54,.28);
  transform: rotate(-4deg);
}
nav a { transition: color .25s ease, background .25s ease, transform .25s ease !important; }
nav a:hover { color: #b7ff36 !important; background: rgba(183,255,54,.08) !important; transform: translateY(-1px); }

main > header:first-child {
  min-height: 86vh;
  display: grid;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(4,9,13,.97) 0%, rgba(4,9,13,.82) 44%, rgba(4,9,13,.18) 100%),
    url("modernluminara-hero.jpg") center / cover no-repeat !important;
  background-attachment: fixed !important;
  isolation: isolate;
}
main > header:first-child::before {
  content: "CANADA  /  CAREER LAB  /  2026";
  position: absolute;
  right: 2rem;
  bottom: 1.25rem;
  color: rgba(235,255,248,.48);
  font: 700 .64rem/1 "Segoe UI Variable Text", "Segoe UI", sans-serif;
  letter-spacing: .24em;
}
main > header:first-child img { opacity: .84; filter: saturate(.78) contrast(1.08); transform: scale(1.03) translateY(var(--hero-shift, 0px)); }
main > header:first-child .relative.overflow-hidden { box-shadow: 0 32px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(45,238,204,.28) !important; }

h1 { letter-spacing: -.055em !important; text-wrap: balance; }
h2 { letter-spacing: -.04em !important; text-wrap: balance; }
.text-gradient-aurora {
  color: #b7ff36 !important;
  background: linear-gradient(100deg, #b7ff36, #21dfc5 54%, #e9b949) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

.tag-mono, .tag-jade {
  border: 1px solid rgba(33,223,197,.32) !important;
  background: rgba(33,223,197,.075) !important;
  color: #74f6dd !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 18px rgba(33,223,197,.05);
}
.tag-mono::before { content: "✦"; margin-right: .45rem; color: #b7ff36; }

main section { position: relative; background: rgba(5,10,14,.90) !important; border-color: rgba(43,229,199,.12) !important; }
main section:nth-of-type(even) { background: rgba(8,18,20,.93) !important; }
main section:nth-of-type(3n) { background: linear-gradient(135deg, rgba(13,25,23,.95), rgba(5,10,14,.96)) !important; }
main section::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  right: -120px; top: 15%;
  border: 1px solid rgba(183,255,54,.12);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(33,223,197,.07);
  pointer-events: none;
}

.panel, .bg-card, .bg-mist, article, [class*="rounded-lg"][class*="border"] {
  border-color: rgba(73,233,207,.17) !important;
  background: linear-gradient(145deg, rgba(18,31,34,.88), rgba(7,14,19,.92)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 50px rgba(0,0,0,.16);
}
.panel, article, main section a[class*="group"][class*="border"] { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important; }
.panel:hover, article:hover, main section a[class*="group"][class*="border"]:hover {
  transform: translateY(-6px);
  border-color: rgba(183,255,54,.5) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.3), 0 0 38px rgba(33,223,197,.08);
}

a[class*="bg-coffee"], a[class*="bg-oro"], a[class*="bg-primary"], button[class*="bg-primary"] {
  border-radius: 999px !important;
  background: linear-gradient(100deg, #b7ff36, #58ef8d) !important;
  color: #06100c !important;
  border: 0 !important;
  box-shadow: 0 12px 36px rgba(183,255,54,.18), inset 0 1px rgba(255,255,255,.45) !important;
}
a[class*="bg-coffee"]:hover, a[class*="bg-oro"]:hover, a[class*="bg-primary"]:hover, button[class*="bg-primary"]:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 44px rgba(183,255,54,.28) !important; }

img { border-radius: 16px !important; }
main img { filter: saturate(.82) contrast(1.06); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
main img:hover { transform: scale(1.035); filter: saturate(1) contrast(1.08); }

table { color: #dcf8f2; }
th { color: #b7ff36 !important; text-transform: uppercase; letter-spacing: .1em; font-size: .67rem !important; }
tr { border-color: rgba(57,212,188,.13) !important; }
tr:hover { background: rgba(33,223,197,.055) !important; }

[data-orientation="vertical"] button { color: #effffb; }
[data-orientation="vertical"] button:hover { color: #b7ff36; text-decoration: none !important; }

footer { position: relative; background: rgba(3,7,10,.97) !important; border-top: 1px solid rgba(183,255,54,.18); }
footer > div:first-child > div { background: linear-gradient(120deg, rgba(183,255,54,.1), rgba(33,223,197,.08), rgba(233,185,73,.08)) !important; overflow: hidden; }
footer h3 { color: #b7ff36; }
footer a:hover { color: #21dfc5; }

.reveal, .reveal.is-visible { opacity: 1; transform: none; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 100; height: 2px; width: var(--scroll-progress, 0%); background: linear-gradient(90deg,#b7ff36,#21dfc5,#e9b949); box-shadow: 0 0 14px #21dfc5; }

@media (max-width: 1023px) {
  main > header:first-child { background-position: 64% center !important; background-attachment: scroll !important; }
  main > header:first-child::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(3,8,12,.26); }
}
@media (max-width: 640px) {
  body { background-attachment: scroll !important; }
  body > div > header .site-container { width: 100% !important; max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }
  body > div > header .bg-ink .site-container { display: block !important; overflow: hidden; }
  body > div > header .bg-ink .site-container span { display: block; max-width: calc(100vw - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .56rem !important; }
  body > div > header .bg-ink .site-container a { display: none; }
  body > div > header .site-container { gap: .65rem !important; }
  body > div > header > .site-container { position: relative; padding-right: 5rem !important; }
  body > div > header a[aria-label$="home"] { min-width: 0; gap: .65rem !important; }
  body > div > header a[aria-label$="home"] > span:first-child { width: 2.5rem !important; height: 2.5rem !important; flex: 0 0 2.5rem; }
  body > div > header a[aria-label$="home"] strong { font-size: 1.02rem !important; }
  body > div > header a[aria-label$="home"] small { font-size: .52rem !important; letter-spacing: .08em !important; white-space: nowrap; }
  body > div > header [data-menu-button] { display: inline-flex !important; position: fixed !important; right: 1rem; top: 3.65rem; z-index: 90; transform: none; flex: 0 0 auto; padding: .5rem .7rem !important; font-size: .64rem; color: #ecfffa; background: rgba(5,12,15,.82); backdrop-filter: blur(12px); }
  main > header:first-child { min-height: 78vh; background-position: 69% center !important; }
  main > header:first-child > div.relative { width: 100% !important; max-width: 100% !important; overflow: hidden; padding: 7rem 1rem 4rem !important; }
  main > header:first-child h1 { max-width: calc(100vw - 2rem); font-size: clamp(2.35rem, 11.25vw, 3rem) !important; }
  main > header:first-child p, main > header:first-child dl { max-width: calc(100vw - 2.5rem) !important; }
  main > header:first-child .tag-jade { max-width: calc(100vw - 2rem); font-size: .58rem !important; letter-spacing: .13em !important; }
  main section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  body::before { background-position: 68% center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  body::before, main > header:first-child { background-attachment: scroll !important; transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}