/* ═══════════════════════════════════════════════════════════
   CleanFootage — Public Site Stylesheet
   Dark cinematic aesthetic. Gold accent. Inter typeface.
═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:             #080808;
  --surface:        #0f0f0f;
  --surface-raised: #161616;
  --surface-hover:  #1c1c1c;
  --border:         rgba(255, 255, 255, 0.07);
  --text:           #eeeeee;
  --text-muted:     rgba(238, 238, 238, 0.5);
  --text-dim:       rgba(238, 238, 238, 0.22);
  --accent:         #c8a96e;
  --accent-hover:   #d4b87a;
  --nav-h:          68px;
  --radius:         4px;
  --radius-lg:      8px;
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
 
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
main { background-image:url('../img/backgrounds/splatter.jpg');}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }

.label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ── Layout ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.container--narrow { max-width: 900px; }

/* ════════════════════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.nav.is-scrolled {
  background: rgba(8, 8, 8, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nav__logo {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s;
}
.nav__logo span { color: var(--accent); }
.nav__logo:hover { color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}
.nav__links a {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav__links a:hover,
.nav__links a.active { color: var(--text); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: #080808;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background 0.2s, transform 0.15s;
}
.nav__cta:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* Hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(8, 8, 8, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 2rem 2rem;
  flex-direction: column;
  gap: 1.125rem;
  z-index: 99;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav__mobile a:hover { color: var(--text); }
.nav__mobile .nav__cta {
  margin-top: 0.5rem;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
}

/* ════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(150deg, rgba(200,169,110,0.02) 0%, transparent 65%), /* less gold tint, more transparent */
    radial-gradient(ellipse at 70% 40%, rgba(200,169,110,0.03) 0%, transparent 70%), /* less gold, more fade */
    linear-gradient(180deg, rgba(6,6,6,0.60) 0%, rgba(12,12,12,0.80) 100%), /* less dark overlay */
    url('../img/backgrounds/hero_software_box.png');

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Subtle grid texture */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, transparent 20%, black 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, black 100%);
}
.hero__content { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title   { margin-bottom: 1.5rem; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--text-muted);
  max-width: 50ch;
  margin-bottom: 2.5rem;
  font-weight: 300;
  line-height: 1.75;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__bg {
  animation: heroFloat 30s ease-in-out infinite alternate;
}

@keyframes heroFloat {
  from { background-position: center right; }
  to   { background-position: center 60%; }
}

/* ════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: none;
  transition: all 0.2s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #080808;
}
.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200, 169, 110, 0.22);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

/* ════════════════════════════════════════════════════════
   SECTIONS
════════════════════════════════════════════════════════ */
.section    { padding: 6rem 0; }
.section--sm { padding: 3.5rem 0; }

.section__header { margin-bottom: 3.5rem; }
.section__header--center { text-align: center; }
.section__title { margin-top: 0.75rem; }
.section__sub {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 1.0625rem;
  max-width: 52ch;
  font-weight: 300;
}
.section__header--center .section__sub { margin-left: auto; margin-right: auto; }

.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ════════════════════════════════════════════════════════
   SERVICE GRID (homepage 3-col preview)
════════════════════════════════════════════════════════ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-card {
  background: var(--surface);
  padding: 2.25rem;
  transition: background 0.2s;
}
.service-card:hover { background: var(--surface-raised); }
.service-card__num  {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  margin-bottom: 1.25rem;
}
.service-card__icon { font-size: 1.75rem; margin-bottom: 1rem; }
.service-card__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.625rem;
}
.service-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════
   WORK GRID (portfolio cards)
════════════════════════════════════════════════════════ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.work-card {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-raised);
  cursor: pointer;
}
.work-card--wide { grid-column: span 2; }
.work-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}
.work-card:hover .work-card__bg { transform: scale(1.05); }
.work-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.25) 50%,
    transparent 100%
  );
}
.work-card__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  transform: translateY(4px);
  transition: transform 0.3s var(--ease);
}
.work-card:hover .work-card__content { transform: translateY(0); }
.work-card__category {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.375rem;
}
.work-card__title { font-size: 1rem; font-weight: 500; }
.work-card__sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.work-card:hover .work-card__sub { opacity: 1; }

/* ════════════════════════════════════════════════════════
   STATS ROW
════════════════════════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--surface);
  padding: 2rem 1.75rem;
  text-align: center;
}
.stat__num {
  font-size: 2.25rem;
  font-weight: 200;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat__label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════
   APPROACH GRID
════════════════════════════════════════════════════════ */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.approach-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.approach-item__num {
  font-size: 2rem;
  font-weight: 200;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.875rem;
}
.approach-item__name {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}
.approach-item__desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════
   CTA BAND
════════════════════════════════════════════════════════ */
.cta-band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5.5rem 0;
  text-align: center;
}
.cta-band__title { margin-bottom: 1rem; }
.cta-band__sub {
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin-bottom: 2.25rem;
  font-weight: 300;
}

/* ════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
.footer {
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer__logo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer__logo span { color: var(--accent); }
.footer__copy {
  font-size: 0.6875rem;
  color: var(--text-dim);
}
.footer__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.footer__links a {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--text-muted); }

/* ════════════════════════════════════════════════════════
   PAGE HEADER (inner pages)
════════════════════════════════════════════════════════ */
.page-header {
  padding-top: calc(var(--nav-h) + 5rem);
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════
   SERVICES PAGE
════════════════════════════════════════════════════════ */
.services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-item {
  background: var(--surface);
  padding: 2.5rem;
  transition: background 0.2s;
}
.service-item:hover { background: var(--surface-raised); }
.service-item__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.service-item__emoji { font-size: 1.375rem; }
.service-item__name  { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.service-item__desc  { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
.service-item__tags  { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(200, 169, 110, 0.09);
  color: var(--accent);
  border-radius: 2px;
}

/* Pricing philosophy block */
.philosophy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.philosophy__rule {
  display: flex;
  gap: 1.25rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border);
}
.philosophy__rule:last-child { border-bottom: none; }
.philosophy__num {
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  padding-top: 0.25rem;
  flex-shrink: 0;
}
.philosophy__text { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; }
.philosophy__text strong { color: var(--text); }

/* ════════════════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════════════════ */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.about-intro__body p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 1.375rem;
}
.about-intro__body p:last-child { margin-bottom: 0; }
.about-intro__body strong { color: var(--text); font-weight: 500; }

.about-aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.625rem;
  margin-bottom: 1rem;
}
.about-card:last-child { margin-bottom: 0; }
.about-card__label {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.875rem;
}
.about-card__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.about-card__item:last-child { border-bottom: none; }
.about-card__item span:first-child { font-size: 0.875rem; }

/* ════════════════════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-info { position: sticky; top: calc(var(--nav-h) + 2rem); }
.contact-info__item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.contact-info__item:first-child { padding-top: 0; }
.contact-info__label {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.375rem;
}
.contact-info__value { color: var(--text-muted); }
.contact-info__value a { color: var(--accent); }

.payment-methods { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.payment-badge {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* Form card */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group:last-of-type { margin-bottom: 0; }
.form-label {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-dim); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(200, 169, 110, 0.45);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.07);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(238,238,238,0.28)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-select option { background: #111; }
.form-textarea { resize: vertical; min-height: 130px; }

/* Alerts */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.alert--success {
  background: rgba(100, 200, 100, 0.07);
  border: 1px solid rgba(100, 200, 100, 0.18);
  color: #9cdb9c;
}
.alert--error {
  background: rgba(220, 80, 80, 0.07);
  border: 1px solid rgba(220, 80, 80, 0.18);
  color: #e8a0a0;
}

/* ════════════════════════════════════════════════════════
   404
════════════════════════════════════════════════════════ */
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.not-found__code {
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 100;
  line-height: 1;
  color: var(--text-dim);
  letter-spacing: -0.05em;
  margin-bottom: 1rem;
}
.not-found__title  { margin-bottom: 0.875rem; }
.not-found__sub    { color: var(--text-muted); margin-bottom: 2.5rem; }

/* ════════════════════════════════════════════════════════
   VIDEO HERO (home page)
════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────── */
.vhero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;

  /* Mobile / fallback gradient shown when video is hidden */
  background:
    linear-gradient(160deg, rgba(200,169,110,0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 65% 35%, rgba(200,169,110,0.09) 0%, transparent 55%),
    linear-gradient(180deg, #040404 0%, #0a0a0a 100%);
}

/* ── Background video ──────────────────────────────────── */
.vhero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vhero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ── Overlay ───────────────────────────────────────────── */
.vhero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.52) 45%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

/* ── Content ───────────────────────────────────────────── */
.vhero__body {
  position: relative;
  z-index: 2;
  width: 100%;
}
.vhero__content {
  max-width: 760px;
}

.vhero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

/* Live indicator dot */
.vhero__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(200, 169, 110, 0.6);
  animation: dotPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

/* Title */
.vhero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1.75rem;
}
.vhero__title-line { display: block; }
.vhero__title-line--accent { color: var(--accent); }

/* Subtitle */
.vhero__sub {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: rgba(238, 238, 238, 0.65);
  font-weight: 300;
  line-height: 1.75;
  max-width: 48ch;
  margin-bottom: 2.75rem;
}

/* CTAs */
.vhero__actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}

/* ── Entrance animations ───────────────────────────────── */
.vhero__eyebrow,
.vhero__title,
.vhero__sub,
.vhero__actions {
  animation: vheroFadeUp 0.9s var(--ease) both;
}
.vhero__eyebrow  { animation-delay: 0.1s; }
.vhero__title    { animation-delay: 0.25s; }
.vhero__sub      { animation-delay: 0.4s; }
.vhero__actions  { animation-delay: 0.55s; }

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

/* ── Scroll indicator ──────────────────────────────────── */
.vhero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(238, 238, 238, 0.35);
  animation: vheroFadeUp 1s 1s var(--ease) both;
}
.vhero__scroll-label {
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.vhero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: scrollDrop 2s ease-in-out 1.5s infinite;
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0);   transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  80%  { transform: scaleY(1);   transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0);   transform-origin: bottom; opacity: 0; }
}

/* ── Mobile: hide video, keep gradient background ──────── */
@media (max-width: 768px) {
  .vhero__media { display: none; }
  .vhero__title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .vhero__sub   { font-size: 1rem; }
  .vhero__scroll { display: none; }
}


/* ════════════════════════════════════════════════════════
   HOME SERVICES (3-card strip below hero)
════════════════════════════════════════════════════════ */
.home-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.home-service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  transition: background 0.2s, border-color 0.2s;
}
.home-service-card:hover {
  background: var(--surface-raised);
  border-color: rgba(200, 169, 110, 0.15);
}
.home-service-card__icon {
  font-size: 2rem;
  margin-bottom: 1.125rem;
  display: block;
}
.home-service-card__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.home-service-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.375rem;
}
.home-service-card__link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.2s, letter-spacing 0.2s;
}
.home-service-card__link:hover {
  color: var(--accent-hover);
  letter-spacing: 0.12em;
}

/* ════════════════════════════════════════════════════════
   CREDENTIALS STRIP (home page)
════════════════════════════════════════════════════════ */
.cred-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.cred-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 2.5rem;
  text-align: center;
}
.cred-item__num {
  font-size: 1.875rem;
  font-weight: 200;
  color: var(--accent);
  line-height: 1;
}
.cred-item__icon {
  font-size: 1.5rem;
  line-height: 1;
}
.cred-item__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cred-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .home-services  { grid-template-columns: 1fr; }
  .cred-strip     { flex-direction: column; }
  .cred-divider   { width: 40px; height: 1px; }
}
@media (max-width: 1024px) {
  .home-services { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════
   PAGE HEADER (inner pages — extended)
════════════════════════════════════════════════════════ */
.page-header { padding-top: calc(var(--nav-h) + 4rem); padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.page-header__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 200; letter-spacing: -0.03em; margin-top: 0.75rem; margin-bottom: 0;
}
.page-header__title--post { font-size: clamp(1.6rem, 3.5vw, 2.5rem); margin-top: 1rem; }
.page-header__sub { margin-top: 1rem; font-size: 1rem; color: var(--text-muted); font-weight: 300; }


/* ════════════════════════════════════════════════════════
   HERO (CleanLUTs home — typographic)
════════════════════════════════════════════════════════ */
.hero__eyebrow { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.hero__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(200,169,110,.5);
  animation: dotPulse 2.5s ease-in-out infinite; flex-shrink: 0;
}
@keyframes dotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.75); }
}
.hero__title {
  display: flex; flex-direction: column;
  font-size: clamp(3rem, 7vw, 5.75rem);
  font-weight: 200; letter-spacing: -0.04em;
  line-height: 1.0; margin-bottom: 1.75rem;
}
.hero__line         { display: block; }
.hero__line--accent { color: var(--accent); }
.hero__scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; color: rgba(238,238,238,.35);
}
.hero__scroll-label { font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; }
.hero__scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: scrollDrop 2s ease-in-out 1.5s infinite;
}
@keyframes scrollDrop {
  0%   { transform:scaleY(0); transform-origin:top; opacity:0; }
  40%  { transform:scaleY(1); transform-origin:top; opacity:1; }
  80%  { transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100% { transform:scaleY(0); transform-origin:bottom; opacity:0; }
}


/* ════════════════════════════════════════════════════════
   CAMERA STRIP (homepage)
════════════════════════════════════════════════════════ */
.cam-strip { padding: 2.5rem 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cam-strip__label { margin-bottom: 1.5rem; text-align: center; }
.cam-strip__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }
.cam-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.875rem 1.25rem; min-width: 90px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised); transition: border-color .2s, background .2s;
}
.cam-item:hover { border-color: rgba(200,169,110,.18); background: var(--surface-hover); }
.cam-item__icon { font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; color: var(--accent); line-height: 1; }
.cam-item__name { font-size: .75rem; font-weight: 600; color: var(--text); }
.cam-item__sub  { font-size: .5625rem; letter-spacing: .06em; color: var(--text-dim); }


/* ════════════════════════════════════════════════════════
   SOFTWARE COMPAT ROW (homepage)
════════════════════════════════════════════════════════ */
.compat-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem;
}
.compat-item {
  background: var(--surface); padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .375rem; transition: background .2s;
}
.compat-item:hover    { background: var(--surface-raised); }
.compat-item__name    { font-size: .9375rem; font-weight: 600; }
.compat-item__tag     { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.compat-note          { font-size: .8125rem; color: var(--text-muted); text-align: center; }
.compat-note a        { color: var(--accent); }


/* ════════════════════════════════════════════════════════
   STEPS GRID (how it works)
════════════════════════════════════════════════════════ */
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.step-item  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.step-item__num  { font-size: 2rem; font-weight: 100; color: var(--text-dim); margin-bottom: 1rem; letter-spacing: -.02em; }
.step-item__name { font-size: .9375rem; font-weight: 600; margin-bottom: .5rem; }
.step-item__desc { font-size: .8125rem; color: var(--text-muted); line-height: 1.65; margin: 0; }


/* ════════════════════════════════════════════════════════
   NAV CTA — Free pill variant
════════════════════════════════════════════════════════ */
.nav__cta--free {
  background: transparent; border: 1px solid rgba(200,169,110,.35); color: var(--accent);
}
.nav__cta--free:hover { background: rgba(200,169,110,.08); border-color: var(--accent); }


/* ════════════════════════════════════════════════════════
   FILTER BAR
════════════════════════════════════════════════════════ */
.filter-bar {
  border-bottom: 1px solid var(--border); background: rgba(8,8,8,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: .875rem 0;
}
.sticky-filter { position: sticky; top: var(--nav-h); z-index: 50; }
.filter-bar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.filter-group      { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.filter-group__label { font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; white-space: nowrap; }
.filter-pills      { display: flex; flex-wrap: wrap; gap: .375rem; }
.filter-pill {
  display: inline-flex; align-items: center; padding: .3rem .875rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--border); border-radius: 99px;
  color: var(--text-muted); cursor: pointer; transition: all .15s var(--ease); font: inherit;
}
.filter-pill:hover  { border-color: rgba(200,169,110,.3); color: var(--text); }
.filter-pill.active { background: var(--accent); border-color: var(--accent); color: #080808; }
.filter-divider     { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
.filter-count       { margin-left: auto; font-size: .6875rem; color: var(--text-dim); white-space: nowrap; }
.filter-empty       { text-align: center; padding: 5rem 0; }
.filter-empty__msg  { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.5rem; }


/* ════════════════════════════════════════════════════════
   LUT GRID + CARDS
════════════════════════════════════════════════════════ */
.lut-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.lut-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.lut-card:hover { border-color: rgba(200,169,110,.18); box-shadow: 0 8px 32px rgba(0,0,0,.35); transform: translateY(-2px); }

/* Per-pack gradient image previews */
.lut-card__img {
  position: relative; aspect-ratio: 16/9;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 1rem;
}
.lut-card__img--cinema-pack     { background: linear-gradient(135deg,#1a0a00 0%,#3d2200 40%,#0a0814 100%); }
.lut-card__img--travel-pack     { background: linear-gradient(135deg,#001a2e 0%,#00324a 40%,#1a3a00 100%); }
.lut-card__img--moody-pack      { background: linear-gradient(135deg,#0d0d0d 0%,#1a1a1a 50%,#0a0a10 100%); }
.lut-card__img--teal-orange     { background: linear-gradient(135deg,#002020 0%,#003d3d 35%,#3d1800 70%,#1a0a00 100%); }
.lut-card__img--film-emulation  { background: linear-gradient(135deg,#1a1200 0%,#2e1f00 45%,#0e0800 100%); }
.lut-card__img--bright-airy     { background: linear-gradient(135deg,#1a2030 0%,#203040 40%,#152820 100%); }
/* Blog header gradient variants */
.blog-card__img--sony    { background: linear-gradient(135deg,#080018 0%,#1a003d 100%); }
.blog-card__img--tutorial{ background: linear-gradient(135deg,#001018 0%,#003040 100%); }
.blog-card__img--guides  { background: linear-gradient(135deg,#100800 0%,#2e1800 100%); }
.blog-card__img--iphone  { background: linear-gradient(135deg,#000a18 0%,#001530 100%); }
.blog-card__img--premiere{ background: linear-gradient(135deg,#0a0018 0%,#1a0030 100%); }
.blog-card__img--capcut  { background: linear-gradient(135deg,#100018 0%,#1a0028 100%); }

.lut-card__badge {
  position: absolute; top: .875rem; right: .875rem;
  font-size: .5rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: .25rem .625rem; border-radius: 2px; background: var(--accent); color: #080808;
}
.lut-card__preview-text { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.25); font-weight: 600; }
.lut-card__body    { padding: 1.25rem; }
.lut-card__meta    { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.lut-card__name    { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .375rem; }
.lut-card__name a  { color: var(--text); transition: color .2s; }
.lut-card__name a:hover { color: var(--accent); }
.lut-card__tagline { font-size: .8125rem; color: var(--text-muted); margin-bottom: .875rem; line-height: 1.5; }
.lut-card__specs   { display: flex; gap: 1rem; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .875rem; }
.lut-card__footer  { display: flex; align-items: center; justify-content: space-between; padding-top: .875rem; border-top: 1px solid var(--border); }
.lut-card__price   { font-size: 1.125rem; font-weight: 600; color: var(--text); }
.lut-card__soon    { font-size: .5625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.lut-card__link    { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); transition: letter-spacing .2s; }
.lut-card__link:hover { letter-spacing: .14em; }
/* Pill tags */
.lut-pill      { display: inline-block; padding: .2rem .5rem; font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(200,169,110,.08); color: var(--accent); border-radius: 2px; font-weight: 600; }
.lut-pill--dim { background: rgba(255,255,255,.04); color: var(--text-dim); }
/* Button variants */
.btn--sm   { padding: .5rem 1rem; font-size: .625rem; }
.btn--full { width: 100%; justify-content: center; }


/* ════════════════════════════════════════════════════════
   BREADCRUMB
════════════════════════════════════════════════════════ */
.breadcrumb { padding: calc(var(--nav-h) + 1rem) 0 0; }
.breadcrumb nav, .breadcrumb__nav { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: .5rem; }
.breadcrumb nav a, .breadcrumb__nav a { color: var(--accent); transition: color .2s; }
.breadcrumb nav a:hover, .breadcrumb__nav a:hover { color: var(--accent-hover); }
.breadcrumb__sep { color: var(--text-dim); }


/* ════════════════════════════════════════════════════════
   PRODUCT PAGE
════════════════════════════════════════════════════════ */
.product-section { padding: 3rem 0 5rem; }
.product-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.product-gallery { position: sticky; top: calc(var(--nav-h) + 2rem); }

/* Before/After slider */
.ba-wrap { margin-bottom: 1rem; }
.ba-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; cursor: col-resize; user-select: none; }
.ba-before, .ba-after { position: absolute; inset: 0; }
.ba-after--clip { clip-path: inset(0 50% 0 0); }
.ba-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.ba-placeholder span  { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 600; }
.ba-placeholder small { font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.2); }
.ba-placeholder--before { background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 2; }
.ba-handle__line   { flex: 1; width: 2px; background: rgba(255,255,255,.6); }
.ba-handle__circle { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #080808; display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.ba-range { width: 100%; margin-top: .75rem; appearance: none; -webkit-appearance: none; height: 3px; background: var(--border); border-radius: 3px; outline: none; cursor: pointer; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid #080808; }
.ba-overlay-stack { position: absolute; bottom: .75rem; right: .875rem; display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; pointer-events: none; z-index: 1; }
.ba-lut-overlay { padding: .25rem .625rem; background: rgba(8,8,8,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; font-family: 'SF Mono','Fira Code','Consolas',monospace; font-size: .625rem; letter-spacing: .06em; color: rgba(255,255,255,.7); white-space: nowrap; opacity: 0; transition: opacity .2s ease; }
.ba-lut-overlay.is-visible { opacity: 1; }
.ba-settings { display: none; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.ba-setting-pill { font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: .2rem .55rem; border-radius: 2rem; color: var(--setting-color, #888); background: color-mix(in srgb, var(--setting-color, #888) 14%, rgba(8,8,8,.65)); border: 1px solid color-mix(in srgb, var(--setting-color, #888) 35%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap; }

/* Product thumbs */
.product-thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.product-thumb  { aspect-ratio: 16/9; border-radius: var(--radius); cursor: pointer; position: relative; display: flex; align-items: flex-end; padding: .5rem; border: 1px solid var(--border); transition: opacity .2s, border-color .2s; background: none; }
.product-thumb:hover { opacity: .8; }
.product-thumb__label { font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); }
/* Real-image thumb */
.product-thumb--img { overflow: hidden; padding: 0; }
.product-thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb--img.is-active { border-color: var(--accent); }

/* Compare / restore button — first slot in the thumb strip */
.product-thumb--compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .2s, background .2s;
}
.product-thumb--compare:hover { background: var(--surface-raised); }
.product-thumb--compare.is-active { border-color: var(--accent); background: rgba(200,169,110,.06); }
.product-thumb--compare__icon  { font-size: 1.125rem; color: var(--text-dim); line-height: 1; }
.product-thumb--compare__label { font-size: .45rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.product-thumb--compare.is-active .product-thumb--compare__icon,
.product-thumb--compare.is-active .product-thumb--compare__label { color: var(--accent); }

/* Gallery context — slides in below thumb strip when a still is selected */
.gallery-context {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s cubic-bezier(0.4,0,0.2,1), opacity .25s ease, margin-top .25s ease;
  margin-top: 0;
}
.gallery-context.is-visible {
  max-height: 160px;
  opacity: 1;
  margin-top: .875rem;
}
.gallery-context__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: .375rem;
}
.gallery-context__location {
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.gallery-context__gear {
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.gallery-context__note {
  font-size: .8125rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.gallery-context__settings { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.gallery-context__setting {
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 2rem;
  color: var(--setting-color, #888);
  background: color-mix(in srgb, var(--setting-color, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--setting-color, #888) 30%, transparent);
}

/* Full gallery figure captions */
.lut-gallery__figure { position: relative; width: 100%; height: 100%; }
.lut-gallery__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lut-gallery__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .5rem .75rem;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.lut-gallery__loc  { font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.lut-gallery__gear { font-size: .45rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* Before/after real images */
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lut card — real thumb image cover */
.lut-card__img { position: relative; }
.lut-card__img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }

/* ── Full gallery grid (product page, >4 images) ─── */
.lut-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.lut-gallery__item { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); }
.lut-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.lut-gallery__item:hover img { transform: scale(1.03); }

/* Product info */
.product-badge  { display: inline-block; padding: .25rem .75rem; margin-bottom: .875rem; font-size: .5rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: var(--accent); color: #080808; border-radius: 2px; }
.product-name   { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 200; letter-spacing: -.03em; margin-bottom: .375rem; }
.product-tagline    { font-size: .9375rem; color: var(--text-muted); margin-bottom: .875rem; }
.product-description { font-size: .9375rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 1.75rem; }
.product-price  { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border); }
.product-price__amount { font-size: 2.25rem; font-weight: 300; color: var(--text); line-height: 1; }
.product-price__note   { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.product-cta       { margin-bottom: 1.75rem; }
.product-cta__note { margin-top: .625rem; font-size: .6875rem; color: var(--text-dim); text-align: center; }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* Software compat */
.software-compat        { margin-bottom: 1.75rem; }
.software-compat__label { font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .625rem; }
.software-badges        { display: flex; flex-wrap: wrap; gap: .375rem; }
.software-badge { display: inline-block; padding: .3rem .875rem; font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(200,169,110,.2); border-radius: var(--radius); color: var(--accent); background: rgba(200,169,110,.06); }
/* Spec table */
.spec-list   { border-top: 1px solid var(--border); }
.spec-row    { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.spec-row__key { font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; }
.spec-row__val { font-size: .8125rem; color: var(--text-muted); text-align: right; }


/* ════════════════════════════════════════════════════════
   INCLUDES LIST + FAQ
════════════════════════════════════════════════════════ */
.includes-list    { list-style: none; margin-bottom: 2rem; }
.includes-item    { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); font-size: .9375rem; color: var(--text-muted); }
.includes-item__check { color: var(--accent); flex-shrink: 0; font-weight: 600; }
.install-notice   { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }
.install-notice a { color: var(--accent); }
.gallery-tip { display: block; margin: 1.5rem auto 0; max-width: 520px; text-align: center; padding: .75rem 1.25rem; background: rgba(200,169,110,.07); border: 1px solid rgba(200,169,110,.2); border-radius: 2rem; font-size: .8125rem; color: var(--text-muted); line-height: 1.6; }
.gallery-tip strong { color: var(--accent); font-weight: 600; }
.faq-list    { margin-bottom: 1.75rem; }
.faq-item    { border-bottom: 1px solid var(--border); }
.faq-item__q { display: flex; justify-content: space-between; align-items: center; padding: 1.125rem 0; font-size: .9375rem; font-weight: 500; cursor: pointer; list-style: none; color: var(--text); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after { content: '+'; font-size: 1.125rem; color: var(--accent); flex-shrink: 0; transition: transform .2s; }
details[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a { font-size: .875rem; color: var(--text-muted); line-height: 1.7; padding-bottom: 1.125rem; margin: 0; }
.faq-refund  { font-size: .8125rem; color: var(--text-dim); margin-top: 1.5rem; line-height: 1.65; }
.faq-refund a { color: var(--accent); }


/* ════════════════════════════════════════════════════════
   BLOG GRID
════════════════════════════════════════════════════════ */
.blog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.blog-card:hover { border-color: rgba(200,169,110,.18); box-shadow: 0 8px 32px rgba(0,0,0,.3); transform: translateY(-2px); }
.blog-card__img  { height: 140px; position: relative; display: flex; align-items: flex-start; padding: 1rem; }
.blog-card__tag  { display: inline-block; padding: .25rem .75rem; font-size: .5rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; background: rgba(200,169,110,.9); color: #080808; border-radius: 2px; }
.blog-card__body   { padding: 1.375rem; }
.blog-card__meta   { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.blog-card__date, .blog-card__read { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.blog-card__title  { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: .75rem; }
.blog-card__title a { color: var(--text); transition: color .2s; }
.blog-card__title a:hover { color: var(--accent); }
.blog-card__excerpt { font-size: .8125rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1rem; }
.blog-card__link   { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); transition: letter-spacing .2s; }
.blog-card__link:hover { letter-spacing: .14em; }
.blog-post-meta    { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: .6875rem; color: var(--text-dim); }
.post-coming-soon  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3.5rem; text-align: center; }
.post-coming-soon__icon { font-size: 2.5rem; margin-bottom: 1rem; }
.post-coming-soon h2 { margin-bottom: .75rem; }
.post-coming-soon p  { color: var(--text-muted); margin-bottom: 0; }

/* ── Post content (rendered markdown) ──────────────────── */
.post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 3.5rem;
}
.post-content > * + * { margin-top: 1.5rem; }

.post-content h2,
.post-content h3,
.post-content h4 { font-weight: 700; line-height: 1.25; color: var(--text); margin-top: 2.5rem; }
.post-content h2 { font-size: 1.5rem; }
.post-content h3 { font-size: 1.1875rem; }
.post-content h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

.post-content p  { color: var(--text-muted); }
.post-content strong { color: var(--text); font-weight: 600; }
.post-content em { font-style: italic; }
.post-content del { opacity: .55; }

.post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--text); }

.post-content ul,
.post-content ol  { padding-left: 1.5rem; color: var(--text-muted); }
.post-content ul  { list-style: disc; }
.post-content ol  { list-style: decimal; }
.post-content li  { margin-bottom: .4rem; }
.post-content li + li { margin-top: .25rem; }

.post-content blockquote {
  border-left: 3px solid var(--accent);
  margin-left: 0;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-dim);
  font-style: italic;
}
.post-content blockquote p { color: inherit; margin: 0; }

.post-content pre {
  background: #0b0b0b;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.6;
  margin-top: 1.5rem;
}
.post-content code { font-family: 'Fira Code', 'Consolas', monospace; }
.post-content p code,
.post-content li code {
  background: rgba(200,169,110,.1);
  color: var(--accent);
  padding: .1em .4em;
  border-radius: 3px;
  font-size: .875em;
}

.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.post-content img { max-width: 100%; border-radius: var(--radius-lg); display: block; }


/* ════════════════════════════════════════════════════════
   FREE LUT LEAD MAGNET
════════════════════════════════════════════════════════ */
.lead-hero {
  padding: calc(var(--nav-h) + 4rem) 0 5rem; min-height: 80vh;
  display: flex; align-items: center;
  background:
    linear-gradient(150deg, rgba(200,169,110,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(200,169,110,.06) 0%, transparent 55%),
    var(--bg);
}
.lead-hero__inner   { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.lead-hero__eyebrow { margin-bottom: 1rem; }
.lead-hero__title   { font-size: clamp(2rem,4.5vw,3.5rem); font-weight: 200; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 1.25rem; }
.lead-hero__title .accent { color: var(--accent); }
.lead-hero__sub     { font-size: .9375rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 2rem; font-weight: 300; }
.lead-includes      { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.lead-includes li   { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--text-muted); }
.lead-includes__check { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.lead-form-wrap  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; }
.lead-form__header { margin-bottom: 1.75rem; }
.lead-form__title  { font-size: 1.375rem; font-weight: 600; margin-bottom: .375rem; }
.lead-form__sub    { font-size: .875rem; color: var(--text-muted); }
.lead-form__btn    { margin-top: .75rem; padding: 1rem 1.75rem; }
.lead-form__note   { font-size: .6875rem; color: var(--text-dim); text-align: center; margin-top: .875rem; }
.form-required     { color: var(--accent); }
.lead-success      { text-align: center; padding: 1rem 0; }
.lead-success__icon  { width: 56px; height: 56px; border-radius: 50%; background: rgba(200,169,110,.1); border: 1px solid rgba(200,169,110,.3); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--accent); margin: 0 auto 1.5rem; }
.lead-success__title { margin-bottom: .625rem; font-weight: 600; }
.lead-success__msg   { font-size: .875rem; color: var(--text-muted); line-height: 1.65; }


/* ════════════════════════════════════════════════════════
   FOOTER — Extended multi-col layout
════════════════════════════════════════════════════════ */
.footer__top      { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; padding: 3.5rem 0; border-bottom: 1px solid var(--border); }
.footer__tagline  { font-size: .8125rem; color: var(--text-dim); line-height: 1.65; margin-top: .75rem; }
.footer__cols     { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.footer__col-head { font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; font-weight: 600; }
.footer__col ul   { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer__col a    { font-size: .8125rem; color: var(--text-muted); transition: color .2s; }
.footer__col a:hover { color: var(--text); }
.footer__bottom   { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; flex-wrap: wrap; gap: .5rem; }
.footer__copy     { font-size: .6875rem; color: var(--text-dim); }
.footer__copy a   { color: var(--accent); }
.footer__socials  { display: flex; gap: .875rem; margin-top: 1.25rem; }
.footer__social-link { color: var(--text-dim); transition: color .2s; line-height: 0; }
.footer__social-link:hover { color: var(--accent); }
.footer__social-link svg { width: 1.125rem; height: 1.125rem; fill: currentColor; display: block; }


/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .service-grid    { grid-template-columns: repeat(2, 1fr); }
  .stats-row       { grid-template-columns: repeat(2, 1fr); }
  .about-intro     { grid-template-columns: 1fr; gap: 3rem; }
  .about-aside     { position: static; }
  .philosophy      { grid-template-columns: 1fr; gap: 2rem; }
  .contact-layout  { grid-template-columns: 1fr; gap: 3rem; }
  .contact-info    { position: static; }
  /* CleanLUTs */
  .lut-grid        { grid-template-columns: repeat(2,1fr); }
  .compat-row      { grid-template-columns: repeat(2,1fr); }
  .product-layout  { grid-template-columns: 1fr; gap: 3rem; }
  .product-gallery { position: static; }
  .footer__top     { grid-template-columns: 1fr; gap: 2.5rem; }
  .lead-hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .steps-grid      { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 768px) {
  .nav__links  { display: none; }
  .nav__cta    { display: none; }
  .nav__toggle { display: flex; }
  /* Always show nav background on mobile — hamburger must be visible before scroll */
  .nav { background: rgba(8, 8, 8, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }

  .work-grid        { grid-template-columns: repeat(2, 1fr); }
  .work-card--wide  { grid-column: span 2; }
  .services-list    { grid-template-columns: 1fr; }
  .approach-grid    { grid-template-columns: 1fr; }
  .form-row         { grid-template-columns: 1fr; }

  /* CleanLUTs */
  .lut-grid        { grid-template-columns: 1fr; }
  .blog-grid       { grid-template-columns: 1fr; }
  .footer__cols    { grid-template-columns: repeat(2,1fr); }
  .filter-bar__inner { gap: .5rem; }
  .cam-strip__inner  { gap: .375rem; }
  .cam-item          { min-width: 75px; padding: .625rem .875rem; }
}

@media (max-width: 480px) {
  .container  { padding: 0 1.25rem; }
  .hero       { min-height: 100svh; }
  .work-grid  { grid-template-columns: 1fr; }
  .work-card--wide { grid-column: span 1; }
  .service-grid    { grid-template-columns: 1fr; }
  .stats-row       { grid-template-columns: repeat(2, 1fr); }
  .form-card  { padding: 1.5rem; }
  .section    { padding: 4rem 0; }
  /* CleanLUTs */
  .compat-row      { grid-template-columns: 1fr; }
  .footer__cols    { grid-template-columns: 1fr; }
  .footer__bottom  { flex-direction: column; text-align: center; }
  .lead-form-wrap  { padding: 1.5rem; }
  .install-grid    { grid-template-columns: 1fr; }
  .lut-gallery     { grid-template-columns: repeat(2,1fr); }
}


/* ════════════════════════════════════════════════════════
   INSTALLATION PAGE
════════════════════════════════════════════════════════ */
.install-explainer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  line-height: 1.7;
  font-size: .9375rem;
  color: var(--text-muted);
}
.install-explainer strong { color: var(--text); }

.install-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.install-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color .2s;
}
.install-card:hover { border-color: rgba(200,169,110,.25); }
.install-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.install-card__name { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.install-card__tag  { font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: .25rem .625rem; border: 1px solid var(--border); border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.install-card__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 0;
  counter-reset: steps;
}
.install-card__steps li {
  counter-increment: steps;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.install-card__steps li::before {
  content: counter(steps);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(200,169,110,.1);
  border: 1px solid rgba(200,169,110,.2);
  color: var(--accent);
  font-size: .5625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}
.install-card__link {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
  transition: letter-spacing .2s;
}
.install-card__link:hover { letter-spacing: .16em; }

/* Log profile table */
.log-explainer { font-size: .9375rem; color: var(--text-muted); line-height: 1.7; }
.log-table { margin: 1.25rem 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.log-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); }
.log-row:last-child { border-bottom: none; }
.log-row__cam     { font-size: .8125rem; color: var(--text); }
.log-row__profile { font-size: .75rem; letter-spacing: .06em; color: var(--accent); font-weight: 500; }


/* ════════════════════════════════════════════════════════
   SUPPORT PAGE
════════════════════════════════════════════════════════ */
/* Policy links */
.policy-links { display: flex; flex-direction: column; gap: .5rem; }
.policy-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .2s, background .2s;
}
.policy-link:hover { border-color: rgba(200,169,110,.2); background: var(--surface-raised); }
.policy-link__name { font-size: .875rem; font-weight: 600; color: var(--text); flex: 0 0 auto; min-width: 180px; }
.policy-link__desc { font-size: .8125rem; color: var(--text-muted); flex: 1; }
.policy-link__arrow { color: var(--accent); font-size: .875rem; flex-shrink: 0; }

/* Form success state */
.form-success { background: var(--surface); border: 1px solid rgba(200,169,110,.2); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; }
.form-success__title { font-size: 1.25rem; font-weight: 300; margin-bottom: .5rem; }
.form-success__sub   { font-size: .875rem; color: var(--text-muted); }

/* Form error */
.form-error { background: rgba(220,60,60,.08); border: 1px solid rgba(220,60,60,.2); border-radius: var(--radius); padding: .875rem 1.25rem; font-size: .875rem; color: #e07070; margin-bottom: 1.5rem; }

@media (max-width: 768px) {
  .install-grid    { grid-template-columns: 1fr; }
  .policy-link     { flex-wrap: wrap; }
  .policy-link__name { min-width: unset; }
}


/* ════════════════════════════════════════════════════════
   LEGAL PAGES
════════════════════════════════════════════════════════ */
.legal-body h2 { font-size: 1.0625rem; font-weight: 600; margin: 2rem 0 .625rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p  { font-size: .9375rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 1rem; }
.legal-body ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-body li { font-size: .9375rem; color: var(--text-muted); line-height: 1.75; margin-bottom: .375rem; }
.legal-body a  { color: var(--accent); }


/* ════════════════════════════════════════════════════════
   ORDER / CHECKOUT PAGES
════════════════════════════════════════════════════════ */

/* Centered confirmation card used on success, expired, limit pages */
.order-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
}
.order-card--error {
    border-color: rgba(220,60,60,.25);
}
.order-card__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(200,169,110,.12);
    border: 1px solid rgba(200,169,110,.35);
    color: var(--accent);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}
.order-card__pack {
    font-size: .6875rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .5rem;
}
.order-card__title {
    font-size: 1.375rem;
    font-weight: 300;
    margin-bottom: .75rem;
}
.order-card__sub {
    font-size: .9375rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
}
.order-card__sub a { color: var(--accent); }
.order-card__btn   { margin-bottom: 1.25rem; }
.order-card__meta  {
    font-size: .75rem;
    color: var(--text-muted);
    letter-spacing: .03em;
}

/* Pending spinner (webhook delay) */
.order-card--pending .order-card__title { color: var(--text-muted); }
.order-card__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ════════════════════════════════════════════════════════
   DOCUMENTATION SYSTEM
════════════════════════════════════════════════════════ */

/* ── Index page ──────────────────────────────────────── */

.docs-category {
    margin-bottom: 1.25rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--border);
}
.docs-category + .docs-grid { margin-bottom: 3.5rem; }

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}

.doc-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, background .2s;
}
.doc-card:hover {
    border-color: rgba(200,169,110,.4);
    background: var(--surface-raised);
}

.doc-card__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1rem;
    min-height: 1.5rem;
}
.doc-card__badge {
    font-size: .5625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 3px;
    background: rgba(200,169,110,.12);
    border: 1px solid rgba(200,169,110,.3);
    color: var(--accent);
}
.doc-card__read {
    font-size: .75rem;
    color: var(--text-dim);
    margin-left: auto;
}
.doc-card__title {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: .625rem;
    color: var(--text);
}
.doc-card__desc {
    font-size: .875rem;
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1.25rem;
}
.doc-card__arrow {
    font-size: .75rem;
    color: var(--accent);
    letter-spacing: .04em;
}
.docs-empty {
    color: var(--text-muted);
    padding: 3rem 0;
    text-align: center;
}

/* ── Show page layout ────────────────────────────────── */

.docs-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 4rem;
    align-items: start;
    padding: 3rem 0 2rem;
} 

/* ── Sidebar ─────────────────────────────────────────── */

.docs-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
}
.docs-sidebar__label {
    font-size: .625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: .875rem;
}
.docs-nav {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}
.docs-nav__item {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    font-size: .8125rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: .4rem .625rem;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
    line-height: 1.4;
}
.docs-nav__item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.docs-nav__item.is-active {
    color: var(--accent);
    background: rgba(200,169,110,.07);
    font-weight: 500;
}
.docs-nav__num {
    font-size: .625rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.docs-nav__item.is-active .docs-nav__num { color: var(--accent); opacity: .7; }

/* ── Doc meta (badge + read time below heading) ──────── */

.doc-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .875rem;
}
.doc-meta__badge {
    font-size: .5625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: 3px;
    background: rgba(200,169,110,.12);
    border: 1px solid rgba(200,169,110,.3);
    color: var(--accent);
}
.doc-meta__read {
    font-size: .8125rem;
    color: var(--text-dim);
}

/* ── Content ─────────────────────────────────────────── */

/* docs-content extends post-content with a few additions */
.docs-content {
    min-width: 0; /* prevent grid blowout */
}
.docs-content__lead {
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

/* Callout blockquotes — bold key insight callouts */
.docs-content blockquote,
.post-content blockquote {
    background: rgba(200,169,110,.06);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.25rem;
    margin: 2rem 0;
}
.docs-content blockquote p,
.post-content blockquote p {
    color: var(--text-muted);
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
}

/* Code blocks in documentation */
.docs-content pre,
.post-content pre {
    background: #0a0a0a;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.65;
    margin: 1.75rem 0;
}
.docs-content code,
.post-content code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

/* ── Prev / Next navigation ──────────────────────────── */

.docs-pagination {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}
.docs-pagination__prev,
.docs-pagination__next {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    text-decoration: none;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color .2s, background .2s;
    max-width: 48%;
}
.docs-pagination__prev { align-items: flex-start; }
.docs-pagination__next { align-items: flex-end; margin-left: auto; }
.docs-pagination__prev:hover,
.docs-pagination__next:hover {
    border-color: rgba(200,169,110,.4);
    background: var(--surface-raised);
}
.docs-pagination__dir {
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}
.docs-pagination__title {
    font-size: .875rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 860px) {
    .docs-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 2rem;
    }
    .docs-sidebar {
        position: static;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
    }
    .docs-pagination__prev,
    .docs-pagination__next { max-width: 49%; }
}

@media (max-width: 540px) {
    .docs-pagination { flex-direction: column; }
    .docs-pagination__prev,
    .docs-pagination__next { max-width: 100%; }
    .docs-pagination__next { align-items: flex-start; }
    .docs-grid { grid-template-columns: 1fr; }
}


.lut-card{
padding:20px;
border:1px solid #333;
margin:20px 0;
}

.lut-wheels{
display:flex;
gap:30px;
}
.wheel h4 {
  margin-top:0;
  text-align:center;
}
.wheel canvas{
width:120px;
height:120px;
}

.lut-curve canvas{
width:200px;
height:200px;
}

.sat-bar{
height:10px;
background:#eee;
}

.sat-fill{
height:100%;
background:#ff6600;
width:50%;
}

.wheel-table{
margin-top:10px;
font-size:12px;
color:#bbb;
font-family:monospace;
}

.wheel-row{
display:grid;
grid-template-columns:60px 1fr;
align-items:center;
margin-bottom:4px;
}

.rgb-row{
grid-template-columns:60px repeat(3,1fr);
}

.wheel-label{
opacity:.6;
}

.wheel-value{
text-align:left;
}

.rgb-value{
text-align:center;
}

.rgb-value.r{ color:#ff6b6b; }
.rgb-value.g{ color:#6bff95; }
.rgb-value.b{ color:#6bb7ff; }


.lut-top {
  display:flex;
  flex-direction:row;
}
.wheel{
  display:flex;
  flex-direction:column;
  gap:8px;
}
 
.wheel-panel{
    margin:0 5px;
    padding:14px 16px;

    background:linear-gradient(
        180deg,
        #121212 0%,
        #0e0e0e 100%
    );

    border:1px solid rgba(12, 12, 12, 0.06);
    border-radius:10px;

    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 6px 18px rgba(0,0,0,0.55);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    transition:all .18s ease;
}
.wheel-panel:hover{
    border-color:rgba(255,255,255,0.12);

    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 10px 26px rgba(0,0,0,0.7);

    transform:translateY(-2px);
}

.wheel-panel h4{
    font-size:13px;
    letter-spacing:.04em;
    text-transform:uppercase;

    color:#9a9a9a;

    margin:2px 0 6px 0;
}
.wheel canvas{
width:120px;
height:120px;
}

.wheel-table{
font-size:12px;
font-family:monospace;
color:#ccc;
display:flex;
flex-direction:column;
gap:4px;
}

.wheel-row{
display:grid;
grid-template-columns:60px 1fr;
align-items:center;

padding:3px 6px;

border-radius:4px;

background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.04);
}

.rgb-row.r .wheel-label{
color:#ff6a6a;
}

.rgb-row.g .wheel-label{
color:#6bff95;
}

.rgb-row.b .wheel-label{
color:#6bb7ff;
}

.wheel-label{
opacity:.6;
}

.wheel-value{
text-align:right;
}

.rgb-row.r{
background:rgba(255,80,80,0.06);
border-color:rgba(255,80,80,0.12);
}

.rgb-row.g{
background:rgba(80,255,120,0.05);
border-color:rgba(80,255,120,0.12);
}

.rgb-row.b{
background:rgba(80,140,255,0.05);
border-color:rgba(80,140,255,0.12);
}

.curve canvas{
width:200px;
height:200px;

border-radius:8px;

background:#0c0c0c;

border:1px solid rgba(255,255,255,0.08);
}

.curve{

background:linear-gradient(180deg,#0f0f0f,#0a0a0a);

border:1px solid rgba(255,255,255,0.08);

border-radius:12px;

padding:18px;

display:flex;
flex-direction:column;

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

gap:12px;

box-shadow:
0 0 0 1px rgba(0,0,0,0.6) inset,
0 6px 20px rgba(0,0,0,0.4);
}

.curve canvas{

width:200px;
height:200px;

border-radius:8px;

background:#070707;

border:1px solid rgba(255,255,255,0.06);

box-shadow:
0 0 10px rgba(0,0,0,0.6) inset;
}

.hue-panel canvas{
height:180px;
width:360px;
}

.hue-panel canvas{
height:180px;
width:360px;
}

.lut-bottom {
  display:flex;
  gap:20px;
}
.lut-hue h4 {
  margin-top:30px;
} 

.lut-footer{

display:flex;
gap:18px;

padding:14px 18px;

border-top:1px solid rgba(255,255,255,0.06);

background:linear-gradient(
180deg,
#0c0c0c,
#090909
);

}

.lut-param{

display:flex;
flex-direction:column;

gap:4px;

padding:8px 12px;

border-radius:8px;

background:rgba(255,255,255,0.03);

border:1px solid rgba(255,255,255,0.06);

min-width:90px;

}

.lut-param label{

font-size:11px;

letter-spacing:1px;

text-transform:uppercase;

color:rgba(255,255,255,0.55);

}

.param-value{

font-family:monospace;

font-size:14px;

color:#fff;

}

.lut-param.modified{

border-color:rgba(255,170,80,0.5);

background:rgba(255,170,80,0.05);
}

.lut-table{

width:100%;
border-collapse:collapse;

background:#0b0b0b;

border:1px solid rgba(255,255,255,0.06);

border-radius:10px;
overflow:hidden;

font-size:14px;

}

.lut-table thead{

background:linear-gradient(
180deg,
#121212,
#0c0c0c
);

}

.lut-table th{

text-align:left;

padding:12px 14px;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

color:rgba(255,255,255,0.65);

border-bottom:1px solid rgba(255,255,255,0.06);

}

.lut-table thead{

background:linear-gradient(
180deg,
#121212,
#0c0c0c
);

}

.lut-table th{

text-align:left;

padding:12px 14px;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

color:rgba(255,255,255,0.65);

border-bottom:1px solid rgba(255,255,255,0.06);

}

.lut-table thead{

background:linear-gradient(
180deg,
#121212,
#0c0c0c
);

}

.lut-table th{

text-align:left;

padding:12px 14px;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

color:rgba(255,255,255,0.65);

border-bottom:1px solid rgba(255,255,255,0.06);

}

.lut-table thead{

background:linear-gradient(
180deg,
#121212,
#0c0c0c
);

}

.lut-table th{

text-align:left  !important;

padding:12px 14px  !important;

font-size:12px  !important;

letter-spacing:1px  !important;

text-transform:uppercase  !important;

color:rgba(255,255,255,0.65) !important;

border-bottom:1px solid rgba(255,255,255,0.06)  !important;

}

.lut-table td:nth-child(2),
.lut-table td:nth-child(3),
.lut-table td:nth-child(4),
.lut-table td:nth-child(5){

font-family:monospace  !important;

color:#f4f4f4 !;

}

.lut-table td:first-child{

font-weight:600  !important;

color:#ffffff  !important;

}

.lut-table td:last-child{

color:rgba(255,255,255,0.65);

font-style:italic;

}

.lut-table td:contains("+0.06"){

color:#ffb347;

}