/* =========================================================================
   LANDING.CSS — public marketing site (hero / commands / team), served at
   '/'. Deliberately separate from styles.css's app-shell rules (sidebar,
   .page grid, etc.) since this page has no sidebar — but it reuses
   styles.css's tokens (--accent, --panel, --panel-border, --font) and the
   .home-hero / .home-feature-grid / .home-marquee / .panel / .btn-outline
   classes already built for the dashboard's own Home tab, so both places
   stay visually identical without duplicating rules.
   ========================================================================= */

.landing-body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  /* Sticky-footer layout: body is a flex column, <main> is the one
     item allowed to grow, and (below) the active section INSIDE main
     is what actually absorbs that growth — not blank space after it.
     That matters because the active section is the box the hero's
     background video/image is painted into (position:absolute; inset:0
     on a position:relative ancestor — see .landing-hero-bg-video /
     .landing-hero-bg-image below). If only <main> grew, the extra
     height would land AFTER the hero box as a plain --bg gap with no
     media in it, which is the video-stops-short bug this replaces.
     Growing the section itself instead means the video/image simply
     covers more area (object-fit: cover / background-size: cover
     already handles scaling), so on short pages the marquee + footer
     sit flush at the bottom of the screen with the hero's art running
     all the way down to meet them — no gap, no seam. */
  display: flex;
  flex-direction: column;
}
.landing-body > main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Same ambient drifting glow the dashboard app already has behind its
   .app wrapper (see enhancements.css's ambientDrift keyframes, reused
   here rather than duplicated) — the landing page has no .app element
   of its own, so without this it renders on a completely flat
   background, which read as visually flat/template-y. */
.landing-body::before,
.landing-body::after {
  content: '';
  position: fixed;
  z-index: -1;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.16;
  background: radial-gradient(
    circle,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 55%, transparent) 22%,
    color-mix(in srgb, var(--accent) 18%, transparent) 45%,
    transparent 70%
  );
  animation: ambientDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.landing-body::before { top: -200px; left: -10%; animation-delay: 0s; }
.landing-body::after {
  bottom: -220px; right: -10%; animation-delay: -11s; opacity: 0.09;
  background: radial-gradient(
    circle,
    #ff7a7a 0%,
    color-mix(in srgb, #ff7a7a 55%, transparent) 22%,
    color-mix(in srgb, #ff7a7a 18%, transparent) 45%,
    transparent 70%
  );
}

.landing-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Top nav ---------- */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Was rgba(...,0.78) — nearly opaque, so it read as a solid black bar
     with the background video stopping dead at its bottom edge. Lower
     alpha + the existing blur turns it into a proper glass panel: the
     video shows through (softened by the blur so text stays legible)
     instead of being hidden behind it. */
  background: rgba(5, 3, 2, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--panel-border);
}
.landing-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.landing-brand { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.landing-brand-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background-color: var(--panel); background-size: cover; background-position: center;
  border: 1px solid var(--panel-border);
}
.landing-brand-avatar.small { width: 22px; height: 22px; }
.landing-brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.3px; }

.landing-nav-links { display: flex; align-items: center; gap: 4px; }
.landing-nav-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.landing-nav-link:hover { color: var(--text); background: var(--panel); }
.landing-nav-link.active { color: var(--accent); }
.landing-nav-link.active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.landing-nav-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.landing-nav-text-link { color: var(--text-dim); text-decoration: none; font-size: 13px; }
.landing-nav-text-link:hover { color: var(--text); }
.landing-btn-login {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #1a1200; font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.landing-btn-login:hover { background: #ffc040; }
.landing-btn-login svg.icon { color: #1a1200; margin-right: 0; width: 14px; height: 14px; }

.landing-nav-burger {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--panel-border); color: var(--text);
  width: 36px; height: 36px; border-radius: 6px; cursor: pointer;
}
.landing-nav-mobile {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--panel-border);
  padding: 8px 16px 14px;
}
.landing-nav-mobile a {
  color: var(--text-dim); text-decoration: none; font-size: 14px; padding: 10px 6px;
  border-bottom: 1px solid var(--panel-border);
}
.landing-nav-mobile a:last-child { border-bottom: none; }
.landing-nav-mobile a.active { color: var(--accent); }
.landing-nav-mobile.open { display: flex; }

/* ---------- Sections ---------- */
.landing-section { display: none; }
/* flex (not block): lets this section grow to fill whatever leftover
   height <main> has (see .landing-body's comment above) rather than
   leaving that space empty below the section. flex-direction: column
   + the default align-items: stretch keeps every section's own inner
   content exactly as wide/top-aligned as it was under display: block —
   this only changes how leftover vertical space is distributed. */
.landing-section.active { display: flex; flex-direction: column; flex: 1 0 auto; }

.landing-hero {
  padding-top: 64px;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden;
  /* The section flex-grows to fill leftover viewport height (see
     .landing-section.active above); justify-content decides where the
     content sits inside that grown box. center — not flex-end — since
     the preview card that used to balance the right side is gone, a
     vertically centered single column reads better than one pinned to
     the very bottom. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Single centered column now that the preview card (removed) isn't
   there to fill the second grid column — overrides styles.css's shared
   .home-hero grid (kept as-is for the dashboard's own Home tab) without
   touching that rule directly. */
.landing-hero .home-hero {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 720px;
}
.landing-hero .home-hero-subtitle { margin-left: auto; margin-right: auto; }
.landing-hero .home-hero-actions,
.landing-hero .home-hero-stats { justify-content: center; }
.landing-hero .home-hero { max-width: 1180px; margin: 0 auto; padding: 56px 28px 24px; position: relative; z-index: 1; }

/* Optional hero background media (image or video), set from the
   dashboard's Customize Backgrounds panel under the "Home" section —
   see loadHeroBackground() in landing.js. Sits behind .home-hero via
   z-index, with a dark scrim so hero text stays readable over any art. */
.landing-hero.has-bg-media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Lighter + tighter than before: the old stops (0.55/0.72/0.85) went
     nearly opaque black by the edges, so the top and bottom of the
     background art read as solid black bars instead of image — it
     looked "cut off" even though the media itself filled the section.
     Keeping the darkening close to center (where the hero text sits)
     and easing off much sooner means the art stays visible all the
     way to the top/bottom edges instead of being crushed out. */
  background: radial-gradient(ellipse at center, rgba(5, 3, 2, 0.38) 0%, rgba(5, 3, 2, 0.22) 45%, rgba(5, 3, 2, 0.12) 100%);
  z-index: 0;
}
.landing-hero-bg-video,
.landing-hero-bg-image {
  /* Superseded by .landing-page-bg-video/.landing-page-bg-image below —
     the media element now attaches to <body> so it can run the full
     height of the page (behind the nav and marquee/footer too) instead
     of being boxed inside the hero section. Rules kept as harmless
     no-ops in case anything external still references these classes. */
}

/* Full-page fixed background (video or image), set from the dashboard's
   Customize Backgrounds panel under the "Home" section — see
   loadHeroBackground() in landing.js, which now attaches this as the
   first child of <body> rather than of the hero section. position:
   fixed + inset: 0 means it covers the whole viewport and stays put
   while the page scrolls, running underneath the nav bar and the
   marquee/footer — those are semi-transparent glass panels (see
   .landing-nav / .landing-marquee / .landing-footer below) specifically
   so this shows through them instead of being hidden behind solid bars.
   z-index: -3 keeps it behind both the ambient glow blobs (-1) and the
   hero's own readability scrim (0), which is unaffected by this change
   since that scrim is still scoped to the hero section only. */
.landing-page-bg-video,
.landing-page-bg-image {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
}
.landing-page-bg-image {
  background-size: cover;
  background-position: center;
}


/* Staggered entrance — each hero element fades/slides in slightly after
   the previous one instead of the whole block popping in at once.
   prefers-reduced-motion already neutralizes all animation durations
   globally via enhancements.css, so this stays accessible for free. */
.landing-hero .home-badge-pill,
.landing-hero .home-hero-title,
.landing-hero .home-hero-subtitle,
.landing-hero .home-hero-actions,
.landing-hero .home-hero-stats,
.landing-hero .home-preview {
  animation: landing-hero-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing-hero .home-badge-pill { animation-delay: 0.02s; }
.landing-hero .home-hero-title { animation-delay: 0.08s; }
.landing-hero .home-hero-subtitle { animation-delay: 0.15s; }
.landing-hero .home-hero-actions { animation-delay: 0.22s; }
.landing-hero .home-hero-stats { animation-delay: 0.28s; }
.landing-hero .home-preview { animation-delay: 0.18s; }
@keyframes landing-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Lift the preview card slightly off the page with a soft accent glow so
   it reads as the hero's focal "product shot" instead of just another
   flat panel — same trick most SaaS landing pages use to draw the eye. */
.landing-hero .home-preview {
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.6), 0 0 50px -20px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform 0.25s ease;
}
.landing-hero .home-preview:hover { transform: translateY(-3px); }

.landing-section-inner { max-width: 1180px; margin: 0 auto; padding: 64px 28px 40px; }
.landing-section-header { text-align: center; margin-bottom: 40px; }
.landing-section-header::before {
  content: '';
  display: block;
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--accent);
  margin: 0 auto 18px;
}
.landing-section-title { font-size: 34px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.3px; }
.landing-section-sub { color: var(--text-dim); font-size: 14.5px; }

/* Commands section reuses .home-feature-grid/.home-feature-card exactly
   as-is from styles.css, just centered within a wider container here. */
.landing-feature-grid { max-width: 1180px; margin: 0 auto; }
.landing-feature-card { cursor: default; }
.landing-feature-card:hover { transform: none; }

/* Same staggered reveal as the hero — replays each time a tab is opened
   since the section goes from display:none to block, which restarts
   the animation on its children. */
.landing-section.active .landing-section-header,
.landing-section.active .landing-feature-card,
.landing-section.active .landing-team-card {
  animation: landing-hero-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing-section.active .landing-section-header { animation-delay: 0s; }
.landing-feature-grid .landing-feature-card:nth-child(1) { animation-delay: 0.04s; }
.landing-feature-grid .landing-feature-card:nth-child(2) { animation-delay: 0.08s; }
.landing-feature-grid .landing-feature-card:nth-child(3) { animation-delay: 0.12s; }
.landing-feature-grid .landing-feature-card:nth-child(4) { animation-delay: 0.16s; }
.landing-feature-grid .landing-feature-card:nth-child(5) { animation-delay: 0.2s; }
.landing-feature-grid .landing-feature-card:nth-child(6) { animation-delay: 0.24s; }
.landing-feature-grid .landing-feature-card:nth-child(7) { animation-delay: 0.28s; }
.landing-feature-grid .landing-feature-card:nth-child(8) { animation-delay: 0.32s; }
.landing-feature-grid .landing-feature-card:nth-child(9) { animation-delay: 0.36s; }
.landing-feature-grid .landing-feature-card:nth-child(10) { animation-delay: 0.4s; }
.landing-feature-grid .landing-feature-card:nth-child(11) { animation-delay: 0.44s; }
.landing-feature-grid .landing-feature-card:nth-child(12) { animation-delay: 0.48s; }
.landing-team-grid .landing-team-card:nth-child(1) { animation-delay: 0.06s; }
.landing-team-grid .landing-team-card:nth-child(2) { animation-delay: 0.14s; }
.landing-team-grid .landing-team-card:nth-child(3) { animation-delay: 0.22s; }

/* ---------- Team ---------- */
.landing-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: 20px;
}
.landing-team-card {
  background: rgba(20, 16, 10, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
}
.landing-team-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px;
  background-color: var(--panel); background-size: 46%; background-position: center; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89a80' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6' stroke-linecap='round'/%3E%3C/svg%3E");
  border: 2px solid var(--accent-dim);
}
.landing-team-name { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.landing-team-role { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; }
.landing-team-handle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 7px 12px; font-size: 12.5px; color: var(--text);
  cursor: pointer; font-family: var(--font-mono);
}
.landing-team-handle:hover { border-color: var(--accent-dim); color: var(--accent); }
.landing-team-handle svg.icon { width: 12px; height: 12px; margin-right: 0; }
.landing-team-handle.copied { color: var(--good); border-color: var(--good); }

/* ---------- Team editor (owner-only) ---------- */
.landing-team-owner-bar { display: flex; justify-content: center; margin-top: 24px; }

.landing-team-editor {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.landing-team-editor-list {
  background: rgba(20, 16, 10, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 14px;
}
.landing-team-editor-list-inner { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.landing-team-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 8px;
  border: 1px solid var(--panel-border);
  cursor: pointer;
  background: var(--panel);
  transition: border-color 0.15s;
}
.landing-team-row:hover { border-color: var(--accent-dim); }
.landing-team-row.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.landing-team-row-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background-color: var(--panel-border); background-size: cover; background-position: center;
}
.landing-team-row-info { min-width: 0; flex: 1; }
.landing-team-row-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-team-row-role { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.landing-team-add-btn { width: 100%; justify-content: center; }

.landing-team-editor-preview { position: sticky; top: 82px; }
.landing-team-preview-label {
  color: var(--accent); font-size: 11px; letter-spacing: 1.2px; font-weight: 700;
  margin-bottom: 10px; text-align: center;
}
.landing-team-preview-card { margin-bottom: 18px; }

.landing-team-form { display: flex; flex-direction: column; gap: 4px; }
.landing-team-form-label { font-size: 11.5px; color: var(--text-dim); margin-top: 10px; }
.landing-team-form-label:first-child { margin-top: 0; }
.landing-team-form-input {
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 6px; padding: 9px 10px; font-size: 13px; font-family: var(--font);
  width: 100%;
}
.landing-team-form-input:focus { outline: none; border-color: var(--accent-dim); }
.landing-team-form-input[type="file"] { padding: 7px 8px; font-size: 12px; color: var(--text-dim); }
.landing-team-form-error { color: var(--danger); font-size: 12px; margin-top: 8px; }
.landing-team-form-actions { display: flex; gap: 8px; margin-top: 16px; }
.landing-team-form-actions .btn-solid-accent,
.landing-team-form-actions .btn-outline { flex: 1; justify-content: center; }
.landing-team-form-delete { color: var(--danger); border-color: var(--danger); flex: none !important; }
.landing-team-form-delete:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

@media (max-width: 900px) {
  .landing-team-editor { grid-template-columns: 1fr; }
  .landing-team-editor-preview { position: static; }
}

/* ---------- Marquee wrapper (reuses .home-marquee/.home-marquee-track) --- */
/* .home-marquee itself (styles.css) has no background of its own — it's
   shared with the dashboard's Home tab, which doesn't have a page-wide
   video. Adding the glass treatment here instead, scoped to this
   landing-only class, so the dashboard tab is untouched but this bar
   stops blocking the background video the same way the nav used to. */
.landing-marquee {
  margin-top: 10px;
  position: relative;
  background: rgba(5, 3, 2, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- Footer ---------- */
.landing-footer {
  padding: 34px 0 40px;
  position: relative;
  background: rgba(5, 3, 2, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--panel-border);
}
.landing-footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.landing-footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.landing-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.landing-footer-links a { color: var(--text-dim); text-decoration: none; font-size: 12.5px; }
.landing-footer-links a:hover { color: var(--accent); }
.landing-footer-copy { color: var(--text-dim); font-size: 11.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .landing-nav-links, .landing-nav-text-link { display: none; }
  .landing-nav-burger { display: flex; align-items: center; justify-content: center; }
  .landing-team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .landing-section-title { font-size: 26px; }
  .landing-footer-inner { flex-direction: column; align-items: flex-start; }
}