/* ===========================================================================
   Landing page — frontend/landing/index.html
   ---------------------------------------------------------------------------
   Structure/mechanic ported from the TradeMesh Login Package's falling-
   masonry background; COLORS follow the same dark-theme palette as
   `dashboard.html` / `assets/css/base.css` ([data-theme="dark"] tokens) —
   near-black bg, warm orange accent (#C17A4A), Inter-family text colors —
   per explicit user request ("the site must follow color partner of
   dashboard.html"). Typography stays Manrope+Sora (not requested to change).
   Scoped under body.landing so it can't collide with base.css, marketplace.css,
   or crm.css. Loads base.css first for reset/sr-only only.

   ONE continuous background: the falling-masonry wallpaper is a single
   `position:fixed` layer behind the ENTIRE page (not just the hero) — see
   `.lp-wallpaper-fixed`. Every section sits above it with a translucent
   (not opaque) panel color, so the flow stays visible everywhere, dimmed
   only as much as each section's text needs for contrast. The "From the
   Boards" section is the SAME fixed layer with its panel lifted almost
   entirely away and NO text overlay — a pure, unobstructed view — and its
   tiles become clickable there (pointer-events re-enabled globally on every
   tile; other sections' panels just naturally sit on top and intercept the
   click first). See frontend/map.md "Landing page" for the full writeup.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@700;800&display=swap');

body.landing {
  --lp-bg: #111118;
  --lp-bg-alt: #19191f;
  --lp-bg-surface: #1e1e26;
  --lp-panel-a: rgba(17, 17, 24, 0.92);     /* default section tint (= --bg) */
  --lp-panel-b: rgba(25, 25, 31, 0.94);     /* alt section tint (= --bg-alt) */
  --lp-card-bg: rgba(30, 30, 38, 0.97);     /* small cards needing strong internal contrast (= --bg-surface) */
  --lp-border: rgba(255, 255, 255, 0.13);
  --lp-border-soft: rgba(255, 255, 255, 0.07);
  --lp-text: #f0ece8;
  --lp-text-2: #9a8e82;
  --lp-text-3: #5a524a;
  --lp-accent: #C17A4A;
  --lp-accent-2: #d4895a;
  --lp-accent-ink: #fff;
  --lp-green: #3da86a;
  --lp-red: #d95050;
  --lp-mono: 'JetBrains Mono', 'Fira Code', monospace;

  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: 'Manrope', system-ui, sans-serif;
  overflow-x: hidden;
}

body.landing * { box-sizing: border-box; }
body.landing a { color: inherit; text-decoration: none; }
body.landing button { font: inherit; appearance: none; -webkit-appearance: none; border: none; background: transparent; }
body.landing img { max-width: 100%; display: block; }

.lp-serif { font-family: 'Sora', sans-serif; }
.lp-mono { font-family: var(--lp-mono); }

.lp-container {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
  width: 100%;
}

.lp-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.85rem 1.7rem; border-radius: 11px; font-weight: 800; font-size: 0.92rem;
  cursor: pointer; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.lp-btn-primary { background: var(--lp-accent); color: var(--lp-accent-ink); box-shadow: 0 14px 30px -12px rgba(193, 122, 74, 0.5); }
.lp-btn-primary:hover { background: var(--lp-accent-2); transform: translateY(-1px); }
.lp-btn-secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--lp-border); color: var(--lp-text); backdrop-filter: blur(8px); }
.lp-btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }
.lp-btn-ghost { color: var(--lp-text-2); border: 1px solid var(--lp-border); }
.lp-btn-ghost:hover { color: var(--lp-text); border-color: var(--lp-text-3); }

/* ---------------------------------------------------------------- nav */
.lp-nav {
  position: sticky; top: 0; z-index: 100; height: 68px;
  background: rgba(17, 17, 24, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lp-border-soft);
}
.lp-nav .lp-container { height: 100%; display: flex; align-items: center; gap: 2rem; }
.lp-nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lp-nav-brand-mark { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--lp-accent); position: relative; flex-shrink: 0; }
.lp-nav-brand-mark img { position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%); object-fit: contain; }
.lp-nav-brand-text { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 800; }
.lp-nav-links { display: flex; align-items: center; gap: 0.25rem; }
.lp-nav-links a { padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.86rem; font-weight: 600; color: var(--lp-text-2); transition: background 0.15s, color 0.15s; }
.lp-nav-links a:hover { color: var(--lp-text); background: rgba(255, 255, 255, 0.06); }
.lp-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.lp-nav-toggle { display: none; width: 38px; height: 38px; border-radius: 9px; align-items: center; justify-content: center; color: var(--lp-text); flex-shrink: 0; }

/* ---------------------------------------------------------------- ONE continuous falling-masonry wallpaper — fixed behind the whole page */
.lp-wallpaper-fixed {
  position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.lp-wallpaper-cols {
  position: absolute; inset: 0; display: flex; gap: 16px; padding: 0 16px;
}
@keyframes lp-fall-down { from { transform: translateY(-50%); } to { transform: translateY(0%); } }
.lp-fall-col {
  flex: 1; display: flex; flex-direction: column; gap: 16px;
  animation-name: lp-fall-down; animation-timing-function: linear; animation-iteration-count: infinite;
}
.lp-fall-tile {
  position: relative; display: block; border-radius: 16px; background-size: cover; background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 18px 30px -18px rgba(0,0,0,0.55); flex-shrink: 0;
  pointer-events: auto; cursor: pointer;
}
/* always-visible category tag — makes clear this flow is furniture/materials, not generic interior photos */
.lp-fall-tile-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  background: rgba(17, 17, 24, 0.72); backdrop-filter: blur(4px); color: var(--lp-text);
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--lp-border-soft); pointer-events: none;
}
.lp-fall-tile-hint {
  position: absolute; inset: 0; border-radius: 16px; display: flex; align-items: flex-end; padding: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.72) 100%);
  opacity: 0; transition: opacity 0.15s; color: #fff; font-size: 12px; font-weight: 800; z-index: 2;
}
.lp-fall-tile:hover .lp-fall-tile-hint { opacity: 1; }

/* ---------------------------------------------------------------- hero — centered, expanded, strong contrast scrim */
.lp-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding: 6rem 0 4rem; z-index: 1; }
.lp-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 1700px 1100px at 50% 48%, rgba(17, 17, 24, 0.72) 0%, rgba(17, 17, 24, 0.93) 55%, rgba(11, 11, 15, 0.98) 100%);
}
.lp-hero-inner {
  position: relative; z-index: 2; max-width: 960px; margin: 0 auto; text-align: center;
  background: rgba(11, 11, 15, 0.56); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--lp-border-soft); border-radius: 28px; padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
}
.lp-live-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px);
  border-radius: 100px; padding: 0.35rem 0.9rem; font-size: 0.72rem; font-weight: 700; color: var(--lp-text-2); margin-bottom: 1.25rem;
}
.lp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); box-shadow: 0 0 0 3px rgba(61, 168, 106, 0.3); flex-shrink: 0; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-text-3); margin-bottom: 1.1rem; }
.lp-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--lp-accent); border-radius: 1px; }
.lp-hero h1 { font-family: 'Sora', sans-serif; font-size: clamp(2.3rem, 4.8vw, 3.7rem); font-weight: 800; line-height: 1.1; margin: 0 0 1.1rem; letter-spacing: -0.01em; }
.lp-hero h1 em { font-style: normal; color: var(--lp-accent); }
.lp-hero-sub { font-size: 1.05rem; color: var(--lp-text-2); line-height: 1.7; margin: 0 auto 1.9rem; max-width: 620px; }
.lp-floats { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1.9rem; justify-content: center; }
.lp-float { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); border: 1px solid var(--lp-border-soft); border-radius: 12px; padding: 0.65rem 1rem; min-width: 148px; text-align: left; }
.lp-float-mat { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lp-text-3); font-weight: 700; margin-bottom: 0.2rem; }
.lp-float-price { font-family: var(--lp-mono); font-size: 0.95rem; font-weight: 700; }
.lp-float-chg { font-size: 0.68rem; font-weight: 700; margin-top: 0.15rem; }
.lp-float-chg.up { color: var(--lp-green); }
.lp-float-chg.dn { color: var(--lp-red); }
.lp-float-chg.st { color: var(--lp-text-3); }
.lp-hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.6rem; justify-content: center; }
.lp-hero-stats { display: flex; gap: 2.2rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--lp-border-soft); justify-content: center; }
.lp-hs-val { font-size: 1.4rem; font-weight: 800; font-family: var(--lp-mono); line-height: 1; margin-bottom: 0.2rem; }
.lp-hs-lbl { font-size: 0.72rem; color: var(--lp-text-3); }

/* ---------------------------------------------------------------- ticker */
.lp-ticker { background: var(--lp-panel-b); overflow: hidden; padding: 0.6rem 0; border-top: 1px solid var(--lp-border-soft); border-bottom: 1px solid var(--lp-border-soft); position: sticky; top: 68px; z-index: 99; }
@keyframes lp-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-ticker-inner { display: flex; gap: 2.5rem; width: max-content; animation: lp-ticker-scroll 42s linear infinite; }
.lp-ticker-item { display: flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; font-weight: 600; font-family: var(--lp-mono); white-space: nowrap; }
.lp-ticker-item .mat { color: var(--lp-text-2); }
.lp-ticker-item .t-up { color: var(--lp-green); }
.lp-ticker-item .t-dn { color: var(--lp-red); }
.lp-ticker-item .t-st { color: var(--lp-text-3); }

/* ---------------------------------------------------------------- sections (general) — translucent, never fully opaque */
.lp-section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; position: relative; z-index: 2; background: var(--lp-panel-a); }
.lp-section-alt { background: var(--lp-panel-b); }
.lp-section-header { max-width: 640px; margin-bottom: 2.75rem; }
.lp-section-header h2 { font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0.5rem 0 0.7rem; letter-spacing: -0.01em; }
.lp-section-header p { font-size: 0.98rem; color: var(--lp-text-2); line-height: 1.65; margin: 0; }

/* ---------------------------------------------------------------- stats strip */
.lp-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--lp-border-soft); border: 1px solid var(--lp-border-soft); border-radius: 14px; overflow: hidden; }
.lp-stat-item { background: var(--lp-card-bg); padding: 1.9rem 1.75rem; }
.lp-stat-num { font-size: 2.1rem; font-weight: 800; font-family: var(--lp-mono); line-height: 1; margin-bottom: 0.35rem; letter-spacing: -0.03em; }
.lp-stat-num span { color: var(--lp-accent); }
.lp-stat-lbl { font-size: 0.8rem; color: var(--lp-text-3); }

/* ---------------------------------------------------------------- features */
.lp-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.lp-feat { padding: 1.75rem; border-radius: 14px; border: 1px solid var(--lp-border-soft); background: var(--lp-card-bg); transition: all 0.2s; }
.lp-feat:hover { border-color: var(--lp-border); transform: translateY(-2px); }
.lp-feat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; background: rgba(193, 122, 74, 0.16); border: 1px solid rgba(193, 122, 74, 0.3); color: var(--lp-accent); }
.lp-feat h3 { font-family: 'Sora', sans-serif; font-size: 0.98rem; font-weight: 700; margin: 0 0 0.5rem; }
.lp-feat p { font-size: 0.85rem; line-height: 1.65; color: var(--lp-text-2); margin: 0; }

/* ---------------------------------------------------------------- live market data / price preview */
.lp-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lp-check-list { display: flex; flex-direction: column; gap: 0.65rem; margin: 1.4rem 0 1.85rem; }
.lp-check-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--lp-text-2); }
.lp-check-row .tick { color: var(--lp-green); font-weight: 800; flex-shrink: 0; }
.lp-price-preview { border: 1px solid var(--lp-border-soft); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px -22px rgba(0,0,0,0.5); background: var(--lp-card-bg); }
.lp-pp-bar { background: rgba(25, 25, 31, 0.9); border-bottom: 1px solid var(--lp-border-soft); padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.6rem; }
.lp-pp-dots { display: flex; gap: 5px; }
.lp-pp-dots span { width: 10px; height: 10px; border-radius: 50%; }
.lp-pp-dots span:nth-child(1) { background: #FF5F57; } .lp-pp-dots span:nth-child(2) { background: #FEBC2E; } .lp-pp-dots span:nth-child(3) { background: #28C840; }
.lp-pp-url { flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-border-soft); border-radius: 4px; padding: 0.2rem 0.75rem; font-size: 0.72rem; font-family: var(--lp-mono); color: var(--lp-text-3); }
.lp-pp-live { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700; color: var(--lp-green); margin-left: auto; flex-shrink: 0; }
.lp-pt { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.lp-pt thead th { text-align: left; padding: 0.7rem 1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lp-text-3); border-bottom: 1px solid var(--lp-border-soft); }
.lp-pt thead th:not(:first-child) { text-align: right; }
.lp-pt tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--lp-border-soft); }
.lp-pt tbody tr:last-child td { border-bottom: none; }
.lp-pt tbody td:not(:first-child) { text-align: right; }
.lp-pt-mat { display: flex; align-items: center; gap: 0.6rem; }
.lp-pt-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lp-pt-name { font-weight: 600; font-size: 0.83rem; }
.lp-pt-loc { color: var(--lp-text-2); font-size: 0.78rem; }
.lp-pt-price { font-family: var(--lp-mono); font-weight: 700; }
.lp-chg { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.68rem; font-weight: 700; font-family: var(--lp-mono); }
.lp-chg-up { background: rgba(61, 168, 106, 0.16); color: var(--lp-green); }
.lp-chg-dn { background: rgba(217, 80, 80, 0.16); color: var(--lp-red); }
.lp-chg-st { background: rgba(255, 255, 255, 0.05); color: var(--lp-text-3); }

/* ---------------------------------------------------------------- FROM THE BOARDS — same fixed wallpaper, fully lit, NO text overlay, tiles clickable */
.lp-boards-section {
  position: relative; z-index: 2; min-height: 60vh;
  background: linear-gradient(180deg, var(--lp-panel-a) 0%, rgba(17, 17, 24, 0.1) 16%, rgba(17, 17, 24, 0.1) 84%, var(--lp-panel-a) 100%);
  pointer-events: none; /* the whole section is just a window — clicks fall through to the wallpaper tiles below */
}

/* ---------------------------------------------------------------- how it works */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.lp-step { display: flex; flex-direction: column; gap: 0.9rem; }
.lp-step-num { font-family: var(--lp-mono); font-size: 1.6rem; font-weight: 800; color: var(--lp-accent-2); }
.lp-step-title { font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700; }
.lp-step-text { font-size: 0.86rem; color: var(--lp-text-2); line-height: 1.65; margin: 0; }

/* ---------------------------------------------------------------- closing CTA */
.lp-cta-band { background: linear-gradient(160deg, rgba(193, 122, 74, 0.22), var(--lp-panel-b)); padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center; position: relative; z-index: 2; }
.lp-cta-band h2 { font-family: 'Sora', sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; margin: 0 0 0.75rem; }
.lp-cta-band p { color: var(--lp-text-2); margin: 0 auto 2rem; max-width: 480px; }
.lp-cta-band-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- footer */
.lp-footer { background: var(--lp-panel-b); border-top: 1px solid var(--lp-border-soft); padding: 3.5rem 0 1.75rem; position: relative; z-index: 2; }
.lp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; }
.lp-footer-desc { font-size: 0.86rem; color: var(--lp-text-3); margin-top: 0.9rem; max-width: 280px; line-height: 1.65; }
.lp-footer-col h4 { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-text-2); margin: 0 0 0.9rem; }
.lp-footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.lp-footer-links a { font-size: 0.86rem; color: var(--lp-text-3); transition: color 0.15s; }
.lp-footer-links a:hover { color: var(--lp-text); }
.lp-footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--lp-border-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.76rem; color: var(--lp-text-3); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .lp-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .lp-nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--lp-bg); border-bottom: 1px solid var(--lp-border-soft); padding: 0.5rem; }
  .lp-nav-links.open { display: flex; }
  .lp-nav-links a { padding: 0.75rem 1rem; }
  .lp-nav-toggle { display: flex; }
  .lp-nav-actions .lp-btn-secondary { display: none; }
  .lp-hero { min-height: auto; padding: 3.5rem 0 3rem; }
  .lp-hero-inner { max-width: 100%; }
  .lp-hero-stats { gap: 1.5rem; }
  .lp-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .lp-data-grid { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .lp-features { grid-template-columns: 1fr; }
  .lp-hero-cta .lp-btn, .lp-cta-band-actions .lp-btn { width: 100%; justify-content: center; }
  .lp-footer-grid { grid-template-columns: 1fr; }
}