/* ============================================================
   BuildVerse — style.css
   Brand: deep blue #17418e / ink navy #0a1f4d / cream #f7f2e7
   Layout heavily inspired by freshcan3d.com
   ============================================================ */

:root {
  --blue: #17418e;
  --blue-bright: #2458c5;
  --blue-deep: #0d2a63;
  --ink: #0a1f4d;
  --cream: #f7f2e7;
  --white: #ffffff;
  --text: #262b36;
  --text-soft: #5a6272;
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 10px 30px rgba(10, 31, 77, 0.10);
  --shadow-card-hover: 0 18px 44px rgba(10, 31, 77, 0.18);
  --header-h: 74px;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* Anchor targets land below the fixed header */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { width: min(1200px, 92%); margin-inline: auto; }
.container.narrow { width: min(920px, 92%); }
.center { text-align: center; }

/* ============ Header ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--ink);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled {
  background: rgba(10, 31, 77, 0.97);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.header-inner {
  /* Same metrics as .container so the logo aligns with the page content */
  width: min(1200px, 92%);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark { height: 46px; width: 23px; }
.brand-name {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: .01em;
  /* Optical alignment: the mark's visual weight sits low (door at the base),
     so the wordmark is nudged down to match */
  transform: translateY(3px);
}
.main-nav { display: flex; gap: 12px; }
.nav-pill {
  display: inline-block;
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.nav-pill:hover { background: var(--white); transform: translateY(-2px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 3px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============ Hero ============ */
.hero {
  position: relative;
  height: 88vh;
  min-height: 560px;
  margin-top: var(--header-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-deep);
  /* The whole hero is a pause/play toggle for the video rotation */
  cursor: pointer;
}
.hero-media, .hero-media .slide {
  position: absolute;
  inset: 0;
}
.hero-media .slide {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-media .slide.active { opacity: 1; }
.hero-media video,
.hero-media img.slide-img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Animated placeholder slides (replaced by real videos later) */
.slide.placeholder {
  background:
    url('../assets/iso-pattern.svg') repeat,
    linear-gradient(135deg, var(--blue-deep), var(--blue) 55%, #3a6ad4);
  background-size: 420px, cover;
  animation: slidePan 40s linear infinite;
}
.slide.placeholder.p2 {
  background:
    url('../assets/iso-pattern.svg') repeat,
    linear-gradient(215deg, #081c46, #14367c 50%, var(--blue-bright));
  background-size: 420px, cover;
}
.slide.placeholder.p3 {
  background:
    url('../assets/iso-pattern.svg') repeat,
    linear-gradient(320deg, #0a2050, var(--blue) 60%, #5e86dd);
  background-size: 420px, cover;
}
@keyframes slidePan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 840px 420px, 0 0; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(4, 12, 32, 0.05) 0%, rgba(4, 12, 32, 0.55) 100%),
    linear-gradient(rgba(4, 12, 32, 0.35), rgba(4, 12, 32, 0.25));
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 6%;
}
.hero-title {
  color: var(--white);
  font-size: clamp(2rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
  animation: heroIn 1s ease both;
}
.hero-sub {
  color: var(--cream);
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  font-weight: 400;
  line-height: 1.5;
  margin-top: 14px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  animation: heroIn 1s .2s ease both;
}
.btn-hero { margin-top: 34px; animation: heroIn 1s .4s ease both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hero-dots {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
}
/* 24px hit target with a 10px visual dot inside */
.hero-dots button:not(.hero-pause) {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.hero-dots button:not(.hero-pause)::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background .3s ease, transform .3s ease;
}
.hero-dots button:not(.hero-pause).active::before {
  background: var(--white);
  transform: scale(1.25);
}
/* Compact "3 / 18" indicator when there are too many slides for dots */
.hero-counter {
  color: rgba(255, 255, 255, 0.9);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  background: rgba(8, 18, 44, 0.45);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

/* YouTube-style pause/play feedback when the hero is clicked */
.hero-flash {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(8, 18, 44, 0.6);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.hero-flash svg { width: 32px; height: 32px; fill: currentColor; }
.hero-flash.show { animation: heroFlash .7s ease forwards; }
@keyframes heroFlash {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* ---- Video lightbox (showcase tiles) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 10, 26, 0.87);
  backdrop-filter: blur(6px);
  padding: 4vmin;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lightbox.open { display: flex; }
/* Width also capped by viewport height so the 16:9 box + close button
   always fit (landscape phones) */
.lightbox-inner {
  position: relative;
  width: min(1100px, 100%, calc((100vh - 110px) * 16 / 9));
}
.lightbox-media {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-media iframe,
.lightbox-media video {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.lightbox-close {
  position: absolute;
  top: -46px; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.btn-pill {
  padding: 13px 36px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--ink);
  font-size: .85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btn-pill:hover { background: var(--white); transform: translateY(-3px); }
.btn-dark {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(10, 31, 77, 0.25);
}
.btn-dark:hover { background: var(--blue); color: var(--white); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-sm { padding: 9px 20px; font-size: .72rem; }
.btn-solid {
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--white);
}
.btn-solid:hover { background: var(--blue-bright); transform: translateY(-2px); }
.btn-ghost {
  border-radius: var(--radius-pill);
  border: 2px solid var(--blue);
  color: var(--blue);
  background: transparent;
}
.btn-ghost:hover { background: var(--blue); color: var(--white); transform: translateY(-2px); }
/* Compensate the 2px border so both card buttons share the same metrics */
.btn-ghost.btn-sm { padding: 7px 18px; }

a:focus-visible, button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* ============ Sections ============ */
.section { padding: 90px 0; }

.section-heading {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin-bottom: 54px;
}
.section-heading.light { color: var(--white); }

/* Welcome */
.section-welcome { padding-top: 100px; }
.welcome-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  margin-bottom: 28px;
}
.welcome-text {
  text-align: justify;
  color: var(--text-soft);
  font-size: 1.02rem;
  margin-bottom: 36px;
}

/* Packs */
.section-packs { background: #f4f6fb; }
.packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.pack-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.pack-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }

.pack-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thumb-watermark {
  height: 34%;
  opacity: .35;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.3));
}
.thumb-tag {
  position: absolute;
  bottom: 12px; right: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(5, 14, 36, 0.55);
  color: var(--cream);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* Placeholder thumbnail variants — replace with <img> when renders are ready */
.thumb-v1 { background: url('../assets/iso-pattern.svg') repeat, linear-gradient(135deg, #0d2a63, #2458c5); background-size: 300px, cover; }
.thumb-v2 { background: url('../assets/iso-pattern.svg') repeat, linear-gradient(135deg, #123c22, #2f9e5b); background-size: 300px, cover; }
.thumb-v3 { background: url('../assets/iso-pattern.svg') repeat, linear-gradient(135deg, #3b2a12, #b07f36); background-size: 300px, cover; }
.thumb-v4 { background: url('../assets/iso-pattern.svg') repeat, linear-gradient(135deg, #401824, #c05070); background-size: 300px, cover; }
.thumb-v5 { background: url('../assets/iso-pattern.svg') repeat, linear-gradient(135deg, #43310e, #d1a545); background-size: 300px, cover; }
.thumb-v6 { background: url('../assets/iso-pattern.svg') repeat, linear-gradient(135deg, #101c3a, #5e86dd); background-size: 300px, cover; }

.pack-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pack-name { font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.pack-desc { font-size: .88rem; color: var(--text-soft); margin: 8px 0 18px; flex: 1; }
.pack-footer { display: flex; }
.pack-actions { display: flex; gap: 10px; width: 100%; }
.pack-actions .btn { flex: 1; text-align: center; }

/* Demos */
.section-demos {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.demos-bg {
  position: absolute;
  inset: 0;
  background: url('../assets/iso-pattern.svg') repeat;
  /* Must stay a divisor of slidePan's 840x420 end position for a seamless loop */
  background-size: 420px;
  opacity: .5;
  animation: slidePan 60s linear infinite;
}
.section-demos .container { position: relative; z-index: 1; }
.demos-intro {
  color: #c8d2ea;
  text-align: center;
  max-width: 760px;
  margin: -24px auto 50px;
  font-size: 1rem;
}
.demos-intro strong { color: var(--white); }
.demos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.demo-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: 34px 28px;
  text-align: center;
  color: var(--white);
  backdrop-filter: blur(6px);
  transition: transform .3s ease, background .3s ease;
}
.demo-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.1); }
.demo-icon { color: var(--cream); margin-bottom: 16px; }
.demo-icon svg { width: 44px; height: 44px; }
.demo-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; }
.demo-card p { font-size: .88rem; color: #c8d2ea; margin: 10px 0 0; }
.demos-cta { text-align: center; margin-top: 46px; }
.demo-test-note {
  max-width: 660px;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  line-height: 1.65;
}

/* Showcases */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.showcase-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.showcase-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
/* Play control appears on hover only, with its "Play video" label */
.play-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .25s ease, transform .25s ease;
}
.showcase-tile:hover .play-wrap,
.showcase-tile:focus-visible .play-wrap { opacity: 1; transform: none; }

/* Playable tiles are real buttons */
button.showcase-tile {
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--white);
  cursor: pointer;
}

/* Photo posters (used as soon as a pack has images in packs-data.js) */
.thumb-photo, .tile-poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showcase-tile .play-wrap { position: relative; z-index: 1; }
.showcase-tile .showcase-caption { z-index: 1; }
/* Bottom scrim keeps caption/label readable over photo posters
   (::after paints above the poster img, below the z-index:1 texts) */
.showcase-tile::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(4, 10, 26, 0.72));
  pointer-events: none;
}
/* No hover on touch devices: show the play control as a permanent badge */
@media (hover: none) {
  .showcase-tile .play-wrap { opacity: 1; transform: none; }
  .play-btn { width: 52px; height: 52px; }
  .play-btn::after { border-width: 10px 0 10px 16px; }
}
.play-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.play-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--ink);
}
.play-label {
  color: var(--white);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
@media (prefers-reduced-motion: reduce) {
  .play-wrap { transition: none; }
}
.showcase-caption {
  position: absolute;
  left: 18px; right: 18px; bottom: 14px;
  color: var(--white);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* About */
.section-about { background: #f4f6fb; }
.about-text {
  text-align: justify;
  color: var(--text-soft);
  font-size: 1.02rem;
}
.section-about .section-heading { margin-bottom: 30px; }

/* Contact */
.section-contact {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue));
  position: relative;
  overflow: hidden;
}
.section-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/iso-pattern.svg') repeat;
  background-size: 380px;
  opacity: .35;
}
.section-contact .container { position: relative; z-index: 1; }
.section-contact .section-heading { margin-bottom: 18px; }
.contact-text { color: #c8d2ea; margin-bottom: 30px; }
.section-contact .btn { text-transform: none; letter-spacing: .02em; font-size: 1rem; }

/* ============ Footer ============ */
.site-footer { background: #071536; padding: 46px 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-brand .brand-mark { height: 38px; width: 19px; }
.footer-brand .brand-name { font-size: 1.15rem; }
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-nav a {
  color: #9fb0d6;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.footer-nav a:hover { color: var(--white); }
.footer-copy { color: #8b9cc4; font-size: .78rem; }

/* ============ Reveal animations ============ */
/* Gated on the .js marker class (set by main.js) so content is never
   hidden when scripts fail to load. main.js removes both classes once
   the entrance finishes, returning hover control to the components. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .slide.placeholder, .demos-bg { animation: none; }
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .packs-grid { grid-template-columns: repeat(2, 1fr); }
  .demos-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* ============================================================
   Asset detail page (pack.html) — dark theme
   ============================================================ */
body.page-asset { background: #081227; color: #cdd6ea; color-scheme: dark; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.asset-main { padding: calc(var(--header-h) + 40px) 0 90px; }

.breadcrumb {
  display: inline-block;
  color: #9fb0d6;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 26px;
  transition: color .2s ease;
}
.breadcrumb:hover { color: var(--white); }

.asset-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 42px;
  align-items: start;
}
/* Author display values defeat the hidden attribute (author styles beat UA) */
.asset-layout[hidden],
.gallery-arrow[hidden],
.gallery-thumbs[hidden] { display: none; }

/* ---- Gallery ---- */
.gallery-main {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #0c1a38;
}
.gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* visibility keeps inactive slides out of the accessibility tree */
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-slide.active { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-slide img.thumb-watermark {
  width: auto;
  height: 34%;
  object-fit: contain;
}
.gallery-placeholder.ph-2 { filter: brightness(.82); }
.gallery-placeholder.ph-3 { filter: brightness(1.14); }
.gallery-placeholder.ph-4 { filter: brightness(.68); }

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(8, 18, 44, 0.65);
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  transition: background .2s ease;
}
.gallery-arrow:hover { background: rgba(8, 18, 44, 0.92); }
.gallery-arrow.prev { left: 14px; }
.gallery-arrow.next { right: 14px; }

.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.gallery-thumb {
  flex: 0 0 108px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  /* currentColor feeds the global :focus-visible outline */
  color: var(--white);
  cursor: pointer;
  padding: 0;
  opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}
.gallery-thumb:focus-visible { opacity: 1; }
/* Placeholder thumbs keep their .thumb-v* gradient (declared earlier in the
   cascade), so the flat fallback lives on non-placeholder thumbs only */
.gallery-thumb:not(.gallery-placeholder) { background: #0c1a38; }
/* Pattern scaled down for the small thumbnail tiles */
.gallery-thumb.gallery-placeholder { background-size: 120px, cover !important; }
.gallery-thumb:hover { opacity: .9; }
.gallery-thumb.active { border-color: #4d7ee0; opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Info panel ---- */
.asset-info {
  background: #0c1a38;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card);
  padding: 30px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.asset-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.asset-badges, .tag-cloud { list-style: none; }
.chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(122, 158, 230, 0.45);
  color: #a8bdea;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.chip-solid { background: var(--blue); border-color: var(--blue); color: var(--white); }

.asset-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}
.asset-short { color: #b9c5df; font-size: .95rem; margin-bottom: 26px; }

.btn-download {
  display: block;
  text-align: center;
  background: var(--blue-bright);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 12px;
  transition: background .2s ease, transform .2s ease;
}
/* Hover darkens (not lightens) so the sub-label keeps AA contrast */
.btn-download:hover { background: #1c4bb2; transform: translateY(-2px); }
.btn-download-label { display: block; font-size: 1rem; }
.btn-download-sub { display: block; font-size: .78rem; font-weight: 500; color: #cddaf7; margin-top: 3px; }

.btn-fab {
  display: block;
  text-align: center;
  background: #121f3e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e6ebf6;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 18px;
  transition: background .2s ease, border-color .2s ease;
}
.btn-fab:hover { background: #1a2b55; border-color: rgba(255, 255, 255, 0.3); }

/* Inert placeholder CTAs (href='#'): visual state must match aria-disabled */
.btn-download.is-placeholder,
.btn-fab.is-placeholder { opacity: .55; cursor: not-allowed; }
.btn-download.is-placeholder:hover { background: var(--blue-bright); transform: none; }
.btn-fab.is-placeholder:hover { background: #121f3e; border-color: rgba(255, 255, 255, 0.14); }

.asset-badges { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Detail sections ---- */
.asset-sections { max-width: 820px; margin-top: 56px; }
.asset-section { margin-bottom: 46px; }
.asset-section h2 {
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.asset-long, .asset-includes, .asset-ideal { color: #c3cde3; font-size: 1.02rem; }

.included-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.included-grid li {
  position: relative;
  background: #0c1a38;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 16px 18px 16px 44px;
  font-size: .92rem;
  color: #c3cde3;
}
.included-grid li::before {
  content: '\2713';
  position: absolute;
  left: 18px;
  color: #5fd38f;
  font-weight: 700;
}

.tech-table {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.tech-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 20px;
  background: #0b1834;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tech-row:last-child { border-bottom: 0; }
.tech-label { color: #93a3c6; font-size: .92rem; }
.tech-value { color: var(--white); font-weight: 600; font-size: .92rem; text-align: right; }

.includes-label {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: #93a3c6;
  margin-bottom: 10px;
}

.notes-box {
  border: 1px solid rgba(255, 193, 79, 0.35);
  background: rgba(255, 193, 79, 0.06);
  border-radius: var(--radius-card);
  padding: 22px 26px;
}
.notes-box .notes-title {
  color: #ffc14f;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.notes-box p { color: #e3d9c2; font-size: .95rem; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0c1a38;
  color: #b9c5df;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: .8rem;
}

.asset-notfound { text-align: center; padding: 100px 0; }
.asset-notfound h1 { color: var(--white); margin-bottom: 12px; }
.asset-notfound p { color: #9fb0d6; margin-bottom: 28px; }

/* Clickable pack cards on the home page */
.pack-name a { color: inherit; text-decoration: none; transition: color .2s ease; }
.pack-name a:hover { color: var(--blue); }
a.pack-thumb { text-decoration: none; }

@media (max-width: 980px) {
  /* minmax(0,1fr): plain 1fr would let the thumb strip's min-content width
     (4 x 108px) force horizontal page overflow under ~500px */
  .asset-layout { grid-template-columns: minmax(0, 1fr); }
  .asset-info { position: static; }
  .included-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .brand-mark { height: 32px; width: 16px; }
  .brand-name { font-size: 1.2rem; }

  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    background: rgba(10, 31, 77, 0.98);
    padding: 22px;
    border-radius: 0 0 0 16px;
    transform: translateX(110%);
    /* visibility removes the closed menu from tab order and AT tree */
    visibility: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }
  /* Transitions armed only after the first toggle interaction (JS adds
     .menu-ready), so crossing the breakpoint never flashes the panel */
  .main-nav.menu-ready { transition: transform .3s ease, visibility 0s .3s; }
  .main-nav.open { transform: none; visibility: visible; }
  .main-nav.open.menu-ready { transition: transform .3s ease, visibility 0s; }

  .hero { height: 72vh; min-height: 460px; }
  .section { padding: 64px 0; }
  .packs-grid { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; }
}