@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:wght@300;400;700&family=Nunito:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');.spinner {
  display: inline-block;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.lang-switch:hover { background: var(--color-bg); border-color: var(--color-primary); color: var(--color-primary); }

.lang-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  display: block;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.lang-switch__code { letter-spacing: 0.02em; }

/* Compact variant for the dynamic-island nav */
.lang-switch--sm { height: 34px; padding: 0 9px; gap: 5px; font-size: 12px; }
.lang-switch--sm .lang-flag { width: 18px; height: 12px; }

/* Ghost variant for the marketing top nav (matches nav links) */
.lang-switch--nav {
  height: auto;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 999px;
  color: var(--color-text-secondary);
}
.lang-switch--nav:hover { background: var(--color-bg); color: var(--color-primary); }
.profile-menu {
  position: relative;
}

.profile-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
  transition: background-color 0.15s, border-color 0.15s;
  max-width: 220px;
}
.profile-menu__trigger:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.profile-menu__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu__chevron {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Hide the name on small screens — the avatar alone stays tappable. */
@media (max-width: 640px) {
  .profile-menu__name { display: none; }
}

.profile-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 60;
  animation: profile-menu-in 0.14s ease both;
}

@keyframes profile-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.profile-menu__header {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
}
.profile-menu__header-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-menu__header-email {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  transition: background-color 0.12s;
}
.profile-menu__item:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}
.profile-menu__item svg { flex-shrink: 0; color: var(--color-text-secondary); }
.profile-menu__item:hover svg { color: var(--color-primary); }
/* ============================================================
   Portal Shell Layout
   Desktop: fixed sidebar 240px + main
   Tablet (768–1199px): icon-only sidebar 64px + main
   Mobile (<768px): no sidebar + fixed bottom nav
   ============================================================ */

:root {
  --sidebar-w:   240px;
  --sidebar-col: 64px;
  --topbar-h:    60px;
  --bottom-nav-h: 64px;
}

/* ── Root container ──────────────────────────────────────────── */
.portal {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-bg);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.portal__sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width 0.2s;
  z-index: 20;
}

/* ── Brand / logo ────────────────────────────────────────────── */
.portal__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  overflow: hidden;
}

.portal__brand-icon {
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Logo + name wrapped in a link to the public site */
.portal__brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.portal__brand-link:hover { text-decoration: none; }
.portal__brand-link:hover .portal__brand-logo { opacity: 0.85; }

/* Brand emblem image (replaces the old "SB" square) */
.portal__brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.portal__brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}

/* ── Nav items ───────────────────────────────────────────────── */
.portal__nav {
  flex: 1;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

.portal__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.portal__nav-item:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
}

.portal__nav-item--active {
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.portal__nav-item--active:hover {
  background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary);
}

.portal__nav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.portal__nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar footer (user + logout) ──────────────────────────── */
.portal__sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

.portal__user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.portal__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portal__avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.portal__user-info {
  min-width: 0;
  overflow: hidden;
}

.portal__user-email {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal__user-role {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.portal__logout-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}

.portal__logout-btn:hover {
  background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

/* ============================================================
   MAIN AREA
   ============================================================ */
.portal__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.portal__topbar {
  height: var(--topbar-h);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.portal__page-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.portal__topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal__topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portal__topbar-email {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Home link in topbar ─────────────────────────────────────── */
.topbar-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.topbar-home-btn:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ── Content ─────────────────────────────────────────────────── */
.portal__content {
  flex: 1;
  padding: 28px 28px;
  overflow-y: auto;
  background-color: var(--color-bg);
}

/* ============================================================
   TABLET — icon-only sidebar (768px–1199px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  .portal__sidebar        { width: var(--sidebar-col); }
  .portal__brand-name     { display: none; }
  .portal__nav-label      { display: none; }
  .portal__user-info      { display: none; }
  .portal__logout-btn     { margin: 0 auto; }
  .portal__nav-item       { justify-content: center; padding: 10px; gap: 0; }
  .portal__brand          { justify-content: center; padding: 20px 0; }
  .portal__sidebar-footer { justify-content: center; flex-direction: column; }
  .portal__user           { justify-content: center; }
  .portal__topbar-email   { display: none; }
}

/* ============================================================
   MOBILE — off-canvas drawer + bottom nav (<768px)
   ============================================================ */
.portal__backdrop { display: none; }
.portal__menu-btn,
.portal__drawer-close { display: none; }

/* Topbar left cluster (hamburger + title) */
.portal__topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal__topbar-left .portal__page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Home icon button (sidebar footer) */
.portal__home-btn {
  flex-shrink: 0; width: 32px; height: 32px; border: none; background: none;
  color: var(--color-text-secondary); cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.portal__home-btn:hover { background-color: var(--color-bg); color: var(--color-primary); }

@media (max-width: 767px) {
  /* Sidebar → off-canvas drawer */
  .portal__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 284px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
    z-index: 60;
  }
  .portal.is-drawer-open .portal__sidebar { transform: translateX(0); }

  .portal__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .portal.is-drawer-open .portal__backdrop { opacity: 1; pointer-events: auto; }

  .portal__menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 9px; border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
  }
  .portal__drawer-close {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 34px; height: 34px; flex: none;
    border: none; background: none; color: var(--color-text-secondary);
    cursor: pointer; border-radius: 6px; font-size: 22px; line-height: 1;
  }
  .portal__drawer-close:hover { background: var(--color-bg); color: var(--color-text); }

  .portal__content { padding: 16px 16px calc(var(--bottom-nav-h) + 16px); }
  .portal__topbar { padding: 0 12px; gap: 8px; }
  .portal__topbar-user { display: none; }
  .portal__page-title { font-size: 0.95rem; }
}

/* ── Bottom nav ──────────────────────────────────────────────── */
.portal__bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  .portal__bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 50;
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
  }
}

.portal__bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
  min-width: 0;
}

button.portal__bottom-item {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.portal__bottom-item--active {
  color: var(--color-primary);
}

.portal__bottom-item:hover {
  color: var(--color-text);
  text-decoration: none;
}
/* ── Admin sidebar accent ──────────────────────────────────────── */
.admin__sidebar {
  background-color: var(--color-surface);
}

.admin__brand-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.admin__brand-sub {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
}

/* ── Role badge (topbar) ────────────────────────────────────────── */
.admin-role-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
}

.admin-role-badge--primary {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.admin-role-badge--purple {
  background: color-mix(in srgb, var(--color-purple) 15%, transparent);
  color: var(--color-purple);
  border: 1px solid color-mix(in srgb, var(--color-purple) 28%, transparent);
}

.admin-role-badge--info {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  color: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--color-info) 28%, transparent);
}

/* Tablet: hide brand sub-label */
@media (min-width: 768px) and (max-width: 1199px) {
  .admin__brand-stack { display: none; }
  .admin-role-badge   { display: none; }
}

@media (max-width: 767px) {
  .admin-role-badge { display: none; }
}

/* ── Extra sidebar section labels (agent / portal) ─────────────── */
.admin-nav-divider {
  height: 1px;
  background: var(--color-border);
  margin: 8px 12px;
  opacity: 0.6;
}

.admin-nav-section-label {
  padding: 10px 16px 2px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  opacity: 0.65;
}

/* Slightly smaller sub-section nav items */
.portal__nav-item--sub {
  font-size: 13px;
  padding: 8px 12px;
}

/* Hide section labels on narrow sidebar (tablet icon-only mode) */
@media (min-width: 768px) and (max-width: 1199px) {
  .admin-nav-section-label { display: none; }
  .admin-nav-divider { margin: 6px 8px; }
}
.tnav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Transparent over the hero; the glass panel fades in only once scrolled. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s cubic-bezier(.4, 0, .2, 1),
              border-color .4s cubic-bezier(.4, 0, .2, 1),
              backdrop-filter .4s cubic-bezier(.4, 0, .2, 1);
}
.tnav--scrolled {
  /* Deliberately low opacity so the frosted blur behind actually shows. */
  background: color-mix(in srgb, var(--mkt-bg-0) 55%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom-color: var(--mkt-border);
}
/* When the mobile drawer is open, force the solid panel even at the top so the
   drawer never floats over bare hero art. */
.tnav--open { background: color-mix(in srgb, var(--mkt-bg-0) 82%, transparent); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }

.tnav__bar {
  /* Full-bleed on large screens: logo hugs the left edge, the links + icon
     strip cluster at the right edge (reference layout), while the page content
     below stays in its narrower centred column. */
  max-width: none;
  margin: 0;
  height: 74px;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 28px;
}

.tnav__brand { flex-shrink: 0; display: flex; align-items: center; }
.tnav__logo { height: 32px; width: auto; display: block; }
.tnav__logo--dark { display: none; }
html.dark .tnav__logo--light { display: none; }
html.dark .tnav__logo--dark { display: block; }

.tnav__links {
  display: flex;
  align-items: center;
  gap: 34px;
  /* Push the link group to the right so it sits beside the icon strip. */
  margin-left: auto;
  font-family: var(--mkt-display);
}

.tnav__link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--mkt-muted);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color .35s cubic-bezier(.4, 0, .2, 1);
}
.tnav__link:hover { color: var(--mkt-ink); text-decoration: none; }
.tnav__link--active { color: var(--mkt-ink); }
.tnav__link--active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--mkt-gold);
  border-radius: 2px;
  transform-origin: center;
  animation: tnav-underline .32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* The underline grows in when the active item changes on navigation. */
@keyframes tnav-underline { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tnav__link--active::after { animation: none; } }

.tnav__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.tnav__divider {
  width: 1px; height: 22px;
  background: var(--mkt-border);
  margin: 0 6px;
}

.tnav__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  color: var(--mkt-muted);
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1), color .35s cubic-bezier(.4, 0, .2, 1);
}
.tnav__icon-btn:hover { background: color-mix(in srgb, var(--mkt-gold) 14%, transparent); color: var(--mkt-gold); }

/* Language + theme controls: match the ghost icon strip (same 36px height, no chrome) */
.tnav__actions .lang-switch {
  height: 36px;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--mkt-muted);
}
.tnav__actions .lang-switch:hover { background: color-mix(in srgb, var(--mkt-gold) 14%, transparent); color: var(--mkt-gold); }
.tnav__actions .theme-toggle {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  border-radius: 999px;
  color: var(--mkt-muted);
}
.tnav__actions .theme-toggle:hover { background: color-mix(in srgb, var(--mkt-gold) 14%, transparent); color: var(--mkt-gold); }

.tnav__burger {
  display: none;
  width: 36px; height: 36px; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--mkt-ink); background: none; border: none; cursor: pointer;
}

.tnav__drawer { display: none; }
.tnav__scrim {
  position: fixed; inset: 0; top: 72px; z-index: 39;
  background: rgba(0, 0, 0, .35); border: none; padding: 0; cursor: pointer;
}

@media (max-width: 900px) {
  .tnav__links { display: none; }
  .tnav__divider { display: none; }
  .tnav__icon-btn:not(.tnav__icon-btn--always) { display: none; }
  .tnav__burger { display: inline-flex; }

  .tnav__drawer {
    position: absolute;
    top: 100%; left: 0; right: 0; z-index: 40;
    background: color-mix(in srgb, var(--mkt-bg-1) 96%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--mkt-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  .tnav__drawer.is-open { max-height: 420px; display: block; }

  .tnav__drawer-links { display: flex; flex-direction: column; padding: 12px 24px; }
  .tnav__drawer-links .tnav__link { padding: 12px 0; border-bottom: 1px solid var(--mkt-border); font-size: 15px; }
  .tnav__drawer-links .tnav__link:last-child { border-bottom: none; }
  .tnav__drawer-links .tnav__link--active::after { display: none; }

  .tnav__drawer-actions { display: flex; flex-direction: column; gap: 10px; padding: 4px 24px 20px; }
  .tnav__drawer-link {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--mkt-muted); text-decoration: none;
  }
  .tnav__drawer-link:hover { color: var(--mkt-gold); text-decoration: none; }
}

@media (min-width: 901px) {
  .tnav__scrim { display: none; }
}

@media (max-width: 900px) {
  /* Links are hidden on mobile, so push the logo + action strip to opposite
     edges — actions then sit the same distance from the right as the logo from
     the left. */
  .tnav__bar { gap: 12px; height: 64px; padding: 0 18px; justify-content: space-between; }
  .tnav__logo { height: 26px; }
}
.ftrack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1400;
}

/* ── Collapsed FAB: label above a circular button ── */
.ftrack__fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.ftrack__fab-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.ftrack__fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s, background-color 0.15s;
}
.ftrack__fab:hover .ftrack__fab-icon {
  transform: translateY(-2px);
  background: var(--color-primary-hover);
}

/* ── Expanded panel ── */
.ftrack__panel {
  width: min(320px, calc(100vw - 40px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  padding: 14px;
  animation: ftrack-in 0.18s ease;
}
@keyframes ftrack-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.ftrack__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ftrack__panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.ftrack__close {
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.ftrack__close:hover { color: var(--color-text); }
.ftrack__row {
  display: flex;
  gap: 8px;
}
.ftrack__input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
}
.ftrack__input:focus { border-color: var(--color-primary); }
.ftrack__go {
  flex: none;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.ftrack__go:hover:not(:disabled) { background: var(--color-primary-hover); }
.ftrack__go:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 600px) {
  .ftrack { right: 14px; bottom: 14px; }
  .ftrack__fab-icon { width: 50px; height: 50px; }
}
.backtop {
  position: fixed;
  left: 20px;
  bottom: 20px; /* bottom-left, clear of the FloatingTrack widget on the right */
  z-index: 1400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
  animation: backtop-in 0.2s ease both;
}
.backtop:hover {
  transform: translateY(-2px);
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

@keyframes backtop-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .backtop { animation: none; }
  .backtop:hover { transform: none; }
}

@media (max-width: 600px) {
  .backtop { left: 14px; bottom: 14px; width: 42px; height: 42px; }
}
/* Bottom-centred, wide, centred cookie banner + preferences modal.
   Uses the marketing glass tokens so it matches the cinema shell. */
.cc-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 3vw, 28px);
  transform: translateX(-50%);
  z-index: 60;
  width: min(720px, calc(100vw - 28px));
  animation: cc-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cc-rise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

.cc-banner__inner,
.cc-modal {
  text-align: center;
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 34px);
  border-radius: 20px;
  background: color-mix(in srgb, var(--mkt-bg-0, #202633) 78%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--mkt-border, rgba(255, 255, 255, .14));
  box-shadow: 0 26px 70px -24px rgba(0, 0, 0, .7);
  color: var(--mkt-ink, #fff);
}

.cc-banner__title {
  font-family: var(--mkt-display); font-weight: 400; letter-spacing: .015em;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 0 0 8px; color: var(--mkt-ink, #fff);
}
.cc-banner__text {
  margin: 0 auto 18px; max-width: 560px;
  color: var(--mkt-muted, rgba(255, 255, 255, .82));
  font-size: 13.5px; line-height: 1.65;
}

.cc-banner__actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
}

.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: 999px;
  font-family: var(--mkt-display); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .35s cubic-bezier(.4, 0, .2, 1), border-color .35s cubic-bezier(.4, 0, .2, 1), color .35s cubic-bezier(.4, 0, .2, 1);
}
.cc-btn--primary { background: var(--mkt-gold, #bd906f); color: #1a1205; }
html.light .cc-btn--primary { color: #fff; }
.cc-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(189, 144, 111, .7); }
.cc-btn--ghost {
  background: transparent; color: var(--mkt-muted, rgba(255, 255, 255, .82));
  border-color: var(--mkt-border, rgba(255, 255, 255, .2));
}
.cc-btn--ghost:hover { color: var(--mkt-ink, #fff); border-color: color-mix(in srgb, var(--mkt-gold, #bd906f) 55%, transparent); }

/* ── Preferences modal ─────────────────────────────────────── */
.cc-modal-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .5);
  animation: cc-fade .25s ease both;
}
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
.cc-modal { width: min(520px, 100%); text-align: center; }

.cc-rows { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 20px; text-align: left; }
.cc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--mkt-card-bg, rgba(255, 255, 255, .04));
  border: 1px solid var(--mkt-card-border, rgba(255, 255, 255, .1));
}
.cc-row strong { display: block; font-family: var(--mkt-display); font-weight: 600; font-size: 14px; color: var(--mkt-ink, #fff); }
.cc-row em { display: block; font-style: normal; margin-top: 3px; font-size: 12px; color: var(--mkt-muted, rgba(255, 255, 255, .7)); }
.cc-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--mkt-gold, #bd906f); cursor: pointer; flex-shrink: 0; }
.cc-row--fixed input { cursor: not-allowed; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-modal-overlay { animation: none; }
}


/* ============================================================
   Marketing "cinema" theme — brownish-black dark / warm-ivory
   light shell shared by Home, About, Services, Contact.
   Scoped to .mkt--cinema so /track (still on the old look) and
   dashboards are completely untouched.
   ============================================================ */
/* Lenis smooth-scroll (active only while a marketing page is mounted). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.mkt--cinema {
  --mkt-gold: #bd906f;
  --mkt-gold-2: #d4ac86;   /* lighter tint of the accent, kept in the same family */
  /* Elegant humanist display (thin → bold does the emotional work) + a soft,
     highly-legible body face. The rule of thumb below: the bigger/thinner the
     heading, the wider its letter-spacing. */
  --mkt-display: 'Inria Sans', system-ui, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mkt-body: 'Nunito', system-ui, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mkt-wrap: 1180px;
  position: relative;
  background: transparent;
  font-family: var(--mkt-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ---------- Dark palette (default cinema look) ---------- */
html.dark .mkt--cinema {
  --mkt-gold: #bd906f;
  --mkt-heading: #bd906f;
  --mkt-bg-0: #202633;
  --mkt-bg-1: #0e1117;
  --mkt-bg-2: #1a2130;
  --mkt-bg-grad: linear-gradient(180deg, #202633 0%, #0e1117 100%);
  --mkt-ink: #ffffff;
  --mkt-muted: color-mix(in srgb, #ffffff 82%, transparent);
  --mkt-border: rgba(232, 199, 140, .16);
  --mkt-glass-bg: rgba(255, 255, 255, .045);
  --mkt-glass-hi: rgba(255, 255, 255, .14);
  --mkt-glass-edge-1: rgba(255, 255, 255, .4);
  --mkt-glass-edge-2: rgba(189, 144, 111, .65);
  --mkt-glass-edge-3: rgba(255, 255, 255, .04);
  --mkt-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65);
  --mkt-glow-1: rgba(189, 144, 111, .22);
  --mkt-glow-2: rgba(189, 144, 111, .14);
  /* Clean card surface: near-transparent, light hairline border, gold glow on hover only. */
  --mkt-card-bg: rgba(255, 255, 255, .028);
  --mkt-card-border: rgba(255, 255, 255, .10);
  --mkt-card-border-hover: rgba(232, 199, 140, .5);
  --mkt-card-glow: 0 18px 55px -20px rgba(189, 144, 111, .42);
}
/* ---------- Light palette ---------- */
html.light .mkt--cinema {
  --mkt-gold: #bd906f;
  --mkt-heading: #bd906f;
  --mkt-bg-0: #f3f1e5;
  --mkt-bg-1: #ffffff;
  --mkt-bg-2: #efe7d6;
  --mkt-bg-grad: linear-gradient(180deg, #f3f1e5 0%, #ffffff 100%);
  --mkt-ink: #151922;
  --mkt-muted: color-mix(in srgb, #151922 78%, transparent);
  --mkt-border: rgba(120, 90, 40, .18);
  --mkt-glass-bg: rgba(255, 255, 255, .62);
  --mkt-glass-hi: rgba(255, 255, 255, .95);
  --mkt-glass-edge-1: rgba(255, 255, 255, .95);
  --mkt-glass-edge-2: rgba(189, 144, 111, .55);
  --mkt-glass-edge-3: rgba(120, 90, 40, .06);
  --mkt-shadow: 0 20px 45px -18px rgba(80, 60, 20, .2);
  --mkt-glow-1: rgba(189, 144, 111, .16);
  --mkt-glow-2: rgba(189, 144, 111, .1);
  --mkt-card-bg: rgba(255, 255, 255, .5);
  --mkt-card-border: rgba(120, 90, 40, .16);
  --mkt-card-border-hover: rgba(189, 144, 111, .6);
  --mkt-card-glow: 0 18px 45px -20px rgba(189, 144, 111, .32);
}
.mkt--cinema .mkt3-wrap { max-width: var(--mkt-wrap); margin: 0 auto; padding: 0 24px; }
.mkt--cinema .mkt3-section { padding: clamp(56px, 9vw, 120px) 0; position: relative; }
/* ---------- Fixed static backdrop ----------
   A position:fixed sibling layer (NOT background-attachment:fixed,
   which is unreliable on iOS Safari) that content scrolls over. One
   fixed gradient behind every section — no per-section colour shift,
   and no expensive blur() glows (which tanked scroll performance). */
.mkt-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--mkt-bg-grad);
  transition: background .25s ease;
}
.mkt--cinema, .mkt--cinema .mkt__content { position: relative; z-index: 1; }
.mkt--cinema .mkt__content { background: transparent; }
/* Gradient strip that blends the last section into the footer —
   present even though it reads as "empty" space above the footer. */
.mkt-fade-into-bg {
  height: clamp(48px, 8vw, 110px);
  position: relative;
  z-index: 1;
  pointer-events: none;
}
/* Footer, transparent so the fixed backdrop shows through */
.mkt--cinema .mkt-footer {
  background: transparent;
  border-top: 1px solid var(--mkt-border);
  color: var(--mkt-muted);
}
.mkt--cinema .mkt-footer__tagline,
.mkt--cinema .mkt-footer__link,
.mkt--cinema .mkt-footer__copy { color: var(--mkt-muted); }
.mkt--cinema .mkt-footer__link:hover { color: var(--mkt-gold); }
.mkt--cinema .mkt-footer__copy { border-top-color: var(--mkt-border); }
/* ---------- Typography ---------- */
.mkt--cinema .mkt3-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mkt-display); font-weight: 400; font-size: 12.5px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--mkt-gold);
}
/* Big hero headline: bold, but with airy positive tracking (not the crammed
   negative tracking a heavy sans usually wants). */
.mkt--cinema .mkt3-h1 {
  font-family: var(--mkt-display); font-weight: 700; margin: 0; color: var(--mkt-heading);
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.08; letter-spacing: .02em;
}
/* Section headings read light + refined rather than heavy/corporate. */
.mkt--cinema .mkt3-h2 {
  font-family: var(--mkt-display); font-weight: 400; margin: 0; color: var(--mkt-ink);
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.14; letter-spacing: .015em;
}
.mkt--cinema .mkt3-lead { color: var(--mkt-muted); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.7; margin: 16px 0 0; }
.mkt--cinema .mkt3-grad {
  background: linear-gradient(100deg, var(--mkt-gold-2), var(--mkt-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---------- Glass card w/ shiny gradient edge ---------- */
.mkt--cinema .mkt3-glass {
  position: relative;
  background:
    linear-gradient(var(--mkt-glass-bg), var(--mkt-glass-bg)) padding-box,
    linear-gradient(135deg, var(--mkt-glass-edge-1), var(--mkt-glass-edge-2) 45%, var(--mkt-glass-edge-3) 80%) border-box;
  border: 1px solid transparent;
  border-radius: 22px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--mkt-shadow), inset 0 1px 0 var(--mkt-glass-hi);
}
/* Glass button (secondary CTA) */
.mkt--cinema .mkt3-btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px; border-radius: 999px;
  font-family: var(--mkt-display); font-weight: 600; font-size: 15px;
  color: var(--mkt-ink); text-decoration: none; cursor: pointer;
  background:
    linear-gradient(var(--mkt-glass-bg), var(--mkt-glass-bg)) padding-box,
    linear-gradient(135deg, var(--mkt-glass-edge-1), var(--mkt-glass-edge-2) 45%, var(--mkt-glass-edge-3) 80%) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--mkt-glass-hi);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mkt--cinema .mkt3-btn-glass:hover { transform: translateY(-2px); }
/* ---------- Placeholder art (replaces old /hero/frame_*.webp) ---------- */
.mkt--cinema .mkt3-placeholder {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 20% 0%, var(--mkt-glow-1), transparent 55%),
    radial-gradient(120% 140% at 90% 100%, var(--mkt-glow-2), transparent 55%),
    var(--mkt-bg-2);
  border: 1px solid var(--mkt-border);
}
.mkt--cinema .mkt3-placeholder__mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: .16;
}
.mkt--cinema .mkt3-placeholder__mark img { width: 46%; height: auto; filter: grayscale(1) brightness(0) invert(1); }
html.light .mkt--cinema .mkt3-placeholder__mark img { filter: none; opacity: .5; }
/* ---------- Per-section ambient light ----------
   A large, soft, low-opacity glow behind each section that shifts hue and side
   as you move down the page — "coloured light spilling across the scene", the
   thing that makes the reference site feel alive rather than flat. The softness
   comes from the radial gradient itself, so there is NO blur() (cheap; keeps
   scroll smooth). `isolation` scopes the -1 layer behind the section content
   but above the fixed page backdrop. */
.mkt--cinema .hx-section,
.mkt--cinema .mkt3-section,
.mkt--cinema .mkt2-section { position: relative; isolation: isolate; }
.mkt--cinema .hx-section::before,
.mkt--cinema .mkt3-section::before,
.mkt--cinema .mkt2-section::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: min(1150px, 96vw); height: min(1150px, 96vw); border-radius: 50%;
  top: 4%; left: -22%;
  background: radial-gradient(circle at center, var(--sec-glow, rgba(189, 144, 111, .12)) 0%, transparent 60%);
}
/* Alternate the side the light comes from. */
.mkt--cinema .hx-section:nth-of-type(even)::before,
.mkt--cinema .mkt3-section:nth-of-type(even)::before,
.mkt--cinema .mkt2-section:nth-of-type(even)::before { left: auto; right: -22%; }
/* Cycle the hue: warm gold → teal → plum → steel-blue (all restrained). */
.mkt--cinema .hx-section:nth-of-type(4n+2)::before,
.mkt--cinema .mkt3-section:nth-of-type(4n+2)::before,
.mkt--cinema .mkt2-section:nth-of-type(4n+2)::before { --sec-glow: rgba(78, 128, 142, .11); }
.mkt--cinema .hx-section:nth-of-type(4n+3)::before,
.mkt--cinema .mkt3-section:nth-of-type(4n+3)::before,
.mkt--cinema .mkt2-section:nth-of-type(4n+3)::before { --sec-glow: rgba(124, 86, 122, .11); }
.mkt--cinema .hx-section:nth-of-type(4n)::before,
.mkt--cinema .mkt3-section:nth-of-type(4n)::before,
.mkt--cinema .mkt2-section:nth-of-type(4n)::before { --sec-glow: rgba(86, 114, 168, .10); }
html.light .mkt--cinema .hx-section::before,
html.light .mkt--cinema .mkt3-section::before,
html.light .mkt--cinema .mkt2-section::before { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .mkt--cinema * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ============================================================
   Marketing Layout — nav + footer shell
   ============================================================ */

.mkt {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.mkt__content {
  flex: 1;
}

/* Brand logo image — light/dark variant swap (footer; nav uses IslandNav) */
.mkt-logo {
  height: 36px;
  width: auto;
  display: block;
}
.mkt-logo--dark { display: none; }
html.dark .mkt-logo--light { display: none; }
html.dark .mkt-logo--dark { display: block; }

@media (max-width: 480px) {
  .mkt-logo { height: 30px; }
}

/* ── Footer ──────────────────────────────────────────────────── */
.mkt-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 40px 24px 24px;
}

.mkt-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.mkt-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}

.mkt-footer__logo {
  height: 42px;
  margin-bottom: 12px;
}

.mkt-footer__tagline {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.mkt-footer__contact {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.mkt-footer__link {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.mkt-footer__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.mkt-footer__copy {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}



/* ============================================================
   SBL Design System — CSS Custom Properties
   ============================================================ */
/* ---------- Light mode (default) ---------- */
/* Palette unified with the marketing site: warm-ivory background, #bd906f
   primary, near-black secondary text. */
html.light {
  --color-primary: #bd906f;
  --color-primary-hover: #a87d5d;
  --color-bg: #f3f1e5;
  --color-surface: #ffffff;
  --color-text: #151922;
  --color-text-secondary: #655f52;
  --color-border: #e6ddcd;
  --color-success: #3B6D11;
  --color-warning: #BA7517;
  --color-danger: #A32D2D;
  --color-info: #2563EB;
  --color-neutral: #6B7280;
  --color-purple: #6D28D9;
  --color-teal:   #0D9488;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* ---------- Dark mode ---------- */
/* Palette unified with the marketing site: #202633 blue-charcoal background
   (matches the homepage dark gradient), #bd906f primary, white text. */
html.dark {
  --color-primary: #bd906f;
  --color-primary-hover: #cba585;
  --color-bg: #202633;
  --color-surface: #2a3242;
  --color-text: #ffffff;
  --color-text-secondary: #9aa3b2;
  --color-border: #38414f;
  --color-success: #4a8a18;
  --color-warning: #d48a1a;
  --color-danger: #c43a3a;
  --color-info: #4B8BFF;
  --color-neutral: #9CA3AF;
  --color-purple: #A78BFA;
  --color-teal:   #2DD4BF;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img {
  max-width: 100%;
  display: block;
}
/* Visible keyboard-focus ring on every interactive element (mouse clicks stay
   ring-free via :focus-visible). Accessibility baseline. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* ---------- Page transition ----------
   Applied to the routed content wrapper in every layout, keyed on the path so
   it re-triggers on each navigation (a soft fade + rise). */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter {
  /* `backwards` (not `both`): the element must NOT retain the final keyframe's
     transform, because a lingering transform makes it a containing block for
     position:fixed descendants — which threw every modal opened inside a page
     to the top of the content instead of centring it in the viewport. */
  animation: page-enter 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* Opacity-only variant — used where a lingering transform would break a
   sticky/fixed descendant (e.g. the marketing 3D hero). */
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
.page-fade { animation: page-fade 0.3s ease both; }
/* Nav links animate their active/hover colour smoothly as the page changes. */
@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; }
}
/* Hide the browser's native password reveal/clear controls (Edge/IE) so only
   our themed eye toggle shows on password fields. */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
/* ---------- Utility ---------- */
.label {
  font-weight: 500;
  font-size: 13px;
}
.text-secondary {
  color: var(--color-text-secondary);
}
/* ---------- Responsive breakpoints ---------- */
/* Mobile-first: base styles target <768px */
/* Tablet: @media (min-width: 768px) */
/* Desktop: @media (min-width: 1200px) */
/* ---------- Layout container ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .container {
    padding: 0 24px;
  }
}
@media (min-width: 1200px) {
  .container {
    padding: 0 32px;
  }
}
/* ============================================================
   Themed native controls — make browser defaults match the
   brand palette across the whole app (scrollbars, file inputs,
   checkboxes, date pickers).
   ============================================================ */
/* Tint native checkboxes, radios, range sliders, progress with the brand gold */
html {
  accent-color: var(--color-primary);
}
/* ---------- Scrollbars ---------- */
* {
  scrollbar-width: thin;                                   /* Firefox */
  scrollbar-color: var(--color-border) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
  border: 2px solid var(--color-bg);                       /* inset look */
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); }
*::-webkit-scrollbar-corner { background: transparent; }
/* ---------- File inputs (the generic "Choose File" button) ---------- */
input[type="file"] {
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-secondary);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  margin-right: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
input[type="file"]::file-selector-button:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
/* ---------- Native <select> chevron ----------
   Hide the OS arrow and draw our own with breathing room from the right edge.
   !important is needed to win over the inline `background` shorthand many
   selects set (which would otherwise wipe out background-image). */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 15px !important;
  padding-right: 36px !important;
}
/* ---------- Date / time picker indicator (dark mode legibility) ---------- */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.65;
  cursor: pointer;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="time"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* Themed text selection */
::selection {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.home {
  padding-top: 40px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.home__header h1 {
  color: var(--color-primary);
}