/* ─────────────────────────────────────────────────────────────
   Five Leaf Holdings — landing page
   Namespaced under .lp / .lp-* ; loaded only on landing.ejs
   ───────────────────────────────────────────────────────────── */

:root {
  --lp-bg:      #06090E;
  --lp-bg-1:    #0A1018;
  --lp-bg-2:    #101A26;
  --lp-bd:      rgba(148, 180, 210, .12);
  --lp-bd-2:    rgba(148, 180, 210, .22);
  --lp-tx:      #E8EFF6;
  --lp-tx-2:    #8DA2B8;
  --lp-green:   #34D399;
  --lp-green-2: #10B981;
  --lp-blue:    #38BDF8;
  --lp-silver:  #C9D6E2;
  --lp-serif:   'Fraunces', Georgia, serif;
  --lp-pad:     clamp(20px, 5vw, 64px);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lp {
  background: var(--lp-bg);
  color: var(--lp-tx);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}
body.lp ::selection { background: rgba(52, 211, 153, .3); }

/* ── Shared type ─────────────────────────────────────────────── */
.lp-h1, .lp-h2 { font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
.lp-h1 em, .lp-h2 em, .lp-brand-name em, .lp-auth-title em {
  font-family: var(--lp-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--lp-green) 10%, var(--lp-blue) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--lp-green);
  margin-bottom: 14px;
}
.lp-section-sub { color: var(--lp-tx-2); font-size: 15px; line-height: 1.7; max-width: 520px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .25s cubic-bezier(.2,.7,.3,1.2), box-shadow .25s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
}
.lp-btn svg { width: 15px; height: 15px; transition: transform .25s ease; }
.lp-btn:hover svg { transform: translateX(3px); }
.lp-btn--solid {
  background: linear-gradient(120deg, var(--lp-green-2), #0E9F8B);
  color: #04110C;
  box-shadow: 0 8px 30px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.lp-btn--solid:hover { box-shadow: 0 12px 40px rgba(16, 185, 129, .5), inset 0 1px 0 rgba(255,255,255,.25); }
.lp-btn--outline {
  border: 1px solid var(--lp-bd-2);
  color: var(--lp-tx);
  /* solid-ish bg instead of backdrop-filter: this button sits over the
     animated canvas, so a blur here re-composites every frame. */
  background: rgba(16, 26, 38, .72);
}
.lp-btn--outline:hover { border-color: var(--lp-green); background: rgba(16, 185, 129, .08); }
.lp-btn--ghost { padding: 9px 18px; border: 1px solid var(--lp-bd); color: var(--lp-tx); font-size: 13px; }
.lp-btn--ghost:hover { border-color: var(--lp-bd-2); background: rgba(148, 180, 210, .06); }

/* ── Nav ─────────────────────────────────────────────────────── */
.lp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--lp-pad);
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
  border-bottom: 1px solid transparent;
}
.lp-nav.is-scrolled {
  /* near-opaque solid instead of backdrop-filter blur — the page is uniformly
     dark so it reads the same, but avoids a full-width per-scroll-frame blur
     recomposite (a primary cause of the intermittent scroll stutter). */
  background: rgba(7, 10, 15, .94);
  border-bottom-color: var(--lp-bd);
  padding-top: 10px;
  padding-bottom: 10px;
}
.lp-brand { display: inline-flex; align-items: center; gap: 10px; }
.lp-leafmark { width: 34px; height: 34px; flex: 0 0 auto; }
.lp-brand-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.lp-nav-links { display: flex; gap: 28px; }
.lp-nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--lp-tx-2);
  transition: color .2s ease;
}
.lp-nav-links a:hover { color: var(--lp-tx); }

/* ── Hero ────────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px var(--lp-pad) 80px;
  overflow: hidden;
}
.lp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(16, 185, 129, .16), transparent 70%),
    radial-gradient(ellipse 45% 35% at 82% -8%, rgba(56, 189, 248, .1), transparent 70%);
  pointer-events: none;
}
.lp-hero-inner { position: relative; max-width: 880px; }
.lp-hero-logo {
  width: clamp(230px, 28vw, 350px);
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 50px rgba(16, 185, 129, .12));
}
.lp-h1 { font-size: clamp(40px, 7.6vw, 86px); }
.lp-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lp-line > span { display: block; }
.lp-hero-sub {
  margin: 26px auto 0;
  max-width: 560px;
  font-size: clamp(15px, 1.8vw, 17.5px);
  line-height: 1.7;
  color: var(--lp-tx-2);
}
.lp-hero-ctas {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.lp-scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--lp-tx-2);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.lp-scroll-track {
  width: 1px; height: 44px;
  background: var(--lp-bd-2);
  overflow: hidden;
}
.lp-scroll-thumb {
  width: 100%; height: 14px;
  background: var(--lp-green);
  animation: lp-scrolldrop 1.8s cubic-bezier(.6,.1,.3,.9) infinite;
}
@keyframes lp-scrolldrop {
  0% { transform: translateY(-16px); }
  100% { transform: translateY(46px); }
}

/* ── Marquee ─────────────────────────────────────────────────── */
.lp-marquee {
  display: flex;
  border-top: 1px solid var(--lp-bd);
  border-bottom: 1px solid var(--lp-bd);
  background: var(--lp-bg-1);
  overflow: hidden;
  padding: 18px 0;
}
.lp-marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;   /* trailing gap so the wrap between groups is seamless */
  animation: lp-marquee 80s linear infinite;
  will-change: transform;
}
.lp-marquee-group span {
  font-family: var(--lp-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--lp-silver);
  white-space: nowrap;
}
.lp-marquee-group i { font-style: normal; font-size: 12px; color: var(--lp-green); }
@keyframes lp-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .lp-marquee-group, .lp-scroll-thumb { animation: none; }
}

/* ── Sections ────────────────────────────────────────────────── */
.lp-section { padding: clamp(80px, 12vw, 150px) var(--lp-pad); max-width: 1240px; margin: 0 auto; }
.lp-section-head { margin-bottom: clamp(40px, 6vw, 70px); }
.lp-h2 { font-size: clamp(30px, 4.6vw, 54px); margin-bottom: 18px; }

/* ── Values ──────────────────────────────────────────────────── */
.lp-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.lp-value-card {
  position: relative;
  border: 1px solid var(--lp-bd);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--lp-bg-2), var(--lp-bg-1));
  padding: 26px 22px 24px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.lp-value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(52, 211, 153, .4);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(52, 211, 153, .08);
}
.lp-value-num {
  font-family: var(--lp-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--lp-tx-2);
}
.lp-value-leaf {
  position: absolute;
  top: 18px; right: 18px;
  width: 22px; height: 30px;
  opacity: .85;
}
.lp-value-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 34px 0 10px; }
.lp-value-card p { font-size: 13.5px; line-height: 1.65; color: var(--lp-tx-2); }

/* ── Platform ────────────────────────────────────────────────── */
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.lp-feature {
  border: 1px solid var(--lp-bd);
  border-radius: 18px;
  background: var(--lp-bg-1);
  padding: 28px 26px;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, background .35s ease;
}
.lp-feature:hover {
  transform: translateY(-5px);
  border-color: var(--lp-bd-2);
  background: var(--lp-bg-2);
}
.lp-feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--lp-green);
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .2);
  margin-bottom: 20px;
}
.lp-feature-icon svg { width: 21px; height: 21px; }
.lp-feature h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 8px; }
.lp-feature p { font-size: 13.5px; line-height: 1.65; color: var(--lp-tx-2); }

/* ── Portals ─────────────────────────────────────────────────── */
.lp-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  max-width: 900px;
}
.lp-portal {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lp-bd);
  border-radius: 22px;
  padding: 36px 32px;
  background: linear-gradient(165deg, var(--lp-bg-2), var(--lp-bg-1) 70%);
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease;
  transform-style: preserve-3d;
}
.lp-portal::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.lp-portal--partner::after,
.lp-portal--tenant::after  { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(16, 185, 129, .14), transparent 70%); }
.lp-portal:hover::after { opacity: 1; }
.lp-portal:hover { border-color: var(--lp-bd-2); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.lp-portal-icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.lp-portal-icon svg { width: 26px; height: 26px; }
.lp-portal--partner .lp-portal-icon,
.lp-portal--tenant  .lp-portal-icon { color: var(--lp-green); background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .25); }
.lp-portal h3 { font-size: 23px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.lp-portal p { font-size: 14px; line-height: 1.65; color: var(--lp-tx-2); flex: 1; margin-bottom: 28px; }
.lp-portal-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.lp-portal-cta svg { width: 15px; height: 15px; transition: transform .25s ease; }
.lp-portal:hover .lp-portal-cta svg { transform: translateX(4px); }
.lp-portal--partner .lp-portal-cta,
.lp-portal--tenant  .lp-portal-cta { color: var(--lp-green); }

/* ── Footer ──────────────────────────────────────────────────── */
.lp-footer { border-top: 1px solid var(--lp-bd); background: var(--lp-bg-1); }
.lp-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 46px var(--lp-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.lp-footer-values {
  font-family: var(--lp-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--lp-tx-2);
}
.lp-footer-copy { font-size: 12.5px; color: var(--lp-tx-2); }

/* ── Auth pages (tenant portal doorway) ──────────────────────── */
body.lp-auth { background: var(--lp-bg); }
.lp-auth-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 90px var(--lp-pad) 40px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 110%, rgba(16, 185, 129, .13), transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% -10%, rgba(56, 189, 248, .09), transparent 70%);
}
.lp-auth-back {
  position: fixed;
  top: 18px; left: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--lp-bd);
  border-radius: 999px;
  background: rgba(16, 26, 38, .5);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-tx-2);
  transition: color .2s ease, border-color .2s ease;
}
.lp-auth-back:hover { color: var(--lp-tx); border-color: var(--lp-bd-2); }
.lp-auth-card {
  width: 100%;
  max-width: 430px;
  background: linear-gradient(170deg, #101A26, #0A1018 75%);
  border: 1px solid var(--lp-bd);
  border-radius: 24px;
  padding: 38px 36px 34px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(52, 211, 153, .04);
  animation: lp-auth-in .7s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lp-auth-in {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
}
@media (prefers-reduced-motion: reduce) { .lp-auth-card { animation: none; } }
.lp-auth-logo { width: 210px; height: auto; margin: 0 auto 6px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); }
.lp-auth-kicker {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--lp-green);
  margin-bottom: 26px;
}
.lp-auth-title {
  text-align: center;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.lp-auth-sub { text-align: center; font-size: 13.5px; color: var(--lp-tx-2); line-height: 1.6; margin-bottom: 22px; }
.lp-auth-card .field { display: block; margin-bottom: 16px; }
.lp-auth-card .field label {
  display: block;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--lp-tx-2);
  margin-bottom: 6px;
}
.lp-auth-card .input {
  width: 100%;
  background: rgba(148, 180, 210, .06);
  border: 1px solid var(--lp-bd-2);
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--lp-tx);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
}
.lp-auth-card .input:focus {
  outline: none;
  border-color: var(--lp-green);
  box-shadow: 0 0 0 3.5px rgba(16, 185, 129, .16);
}
.lp-auth-card .input::placeholder { color: var(--lp-tx-3, #5C7D8E); }
.lp-auth-card .field-hint { display: block; font-size: 11.5px; color: var(--lp-tx-2); margin-top: 5px; }
/* show/hide password toggle on the dark auth card */
.lp-auth-card .pw-wrap { position: relative; }
.lp-auth-card .pw-wrap .input { padding-right: 44px; }
.lp-auth-card .pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--lp-tx-2);
  opacity: .8;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.lp-auth-card .pw-toggle:hover { opacity: 1; color: var(--lp-green); background: rgba(16,185,129,.1); }
.lp-auth-card .pw-toggle:focus-visible { outline: 2px solid var(--lp-green); outline-offset: 1px; }
.lp-auth-card .pw-toggle svg { width: 18px; height: 18px; display: block; }
.lp-auth-card .pw-toggle .pw-eye-off { display: none; }
.lp-auth-card .pw-toggle.is-on .pw-eye { display: none; }
.lp-auth-card .pw-toggle.is-on .pw-eye-off { display: block; }
.lp-auth-card .btn-primary, .lp-auth-card .tenant-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  margin-top: 6px;
  background: linear-gradient(120deg, var(--lp-green-2), #0E9F8B);
  color: #04110C;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(16, 185, 129, .3), inset 0 1px 0 rgba(255,255,255,.25);
  transition: box-shadow .25s ease, transform .25s ease;
}
.lp-auth-card .btn-primary:hover, .lp-auth-card .tenant-btn-primary:hover {
  box-shadow: 0 12px 40px rgba(16, 185, 129, .45), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.lp-auth-card .flash {
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  border: 1px solid var(--lp-bd-2);
  background: rgba(148, 180, 210, .07);
  color: var(--lp-tx);
}
.lp-auth-card .flash-error { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.09); color: #FCA5A5; }
.lp-auth-card .flash-ok, .lp-auth-card .flash-success { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.09); color: #6EE7B7; }
.lp-auth-card .flash-warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.09); color: #FDE68A; }
.lp-auth-card .muted { color: var(--lp-tx-2); }
.lp-auth-card .tenant-link { color: var(--lp-green); font-weight: 500; }
.lp-auth-card .tenant-link:hover { color: #6EE7B7; }
.lp-auth-card hr { border: none; border-top: 1px solid var(--lp-bd); margin: 22px 0; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .lp-nav-links { display: none; }
  .lp-hero { padding-top: 96px; }
  .lp-hero-ctas .lp-btn { width: 100%; max-width: 340px; justify-content: center; }
  .lp-scroll-cue { display: none; }
  .lp-footer-inner { flex-direction: column; text-align: center; }
}