/* ============================================================
   SIGLUM — landing-a (pixel-faithful reproduction of mockup)
   Scoped overrides only on body.lp — the rest of the app is untouched.
   Palette: muted forest/emerald green, warm off-white page bg.
   ============================================================ */

body.lp{
  --accent:#2F7D6B;          /* muted forest/emerald */
  --accent-ink:#1A5648;      /* darker forest for hovers/idents */
  --lp-cta:#012720;          /* near-black forest CTA fill */
  --lp-page:#FCFAF9;         /* warm off-white */
  --lp-card:#FFFFFF;
  --lp-band:#F9F9F6;
  --lp-hair:#E7E4E0;
  background:var(--lp-page);
  color:var(--text);
}
[data-mode="dark"] body.lp{
  --accent:#3F9A85;
  --accent-ink:#7FD9C2;
  --lp-cta:#0A1A16;
  --lp-page:#0B0F0E;
  --lp-card:#121917;
  --lp-band:#101614;
  --lp-hair:#23302C;
}

body.lp{ margin:0; overflow-x:hidden; }
.lp-wrap{ max-width:min(94vw, 1840px); margin:0 auto; padding:0 48px; }

/* ============ TOP NAV ============ */
.lp-top{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--lp-page) 88%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--lp-hair);
}
.lp-top-in{ display:flex; align-items:center; height:70px; }
.lp-brand{ display:inline-flex; align-items:center; gap:11px; color:var(--accent-ink); text-decoration:none; }
.lp-logomark{ display:inline-flex; color:var(--accent-ink); }
.lp-wordmark{
  font-family:"Newsreader", Georgia, serif; font-weight:600; font-size:21px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}
.lp-nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.lp-nav a{
  font:500 14.5px/1 "Inter", sans-serif; color:var(--text-muted); text-decoration:none;
  transition:color .15s;
}
.lp-nav a:hover{ color:var(--text); text-decoration:none; }
.lp-nav-quiet{ color:var(--text-muted); }

.lp-lang{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--lp-hair); border-radius:999px; padding:5px 12px;
  font:500 12.5px/1 "Inter", sans-serif;
}
.lp-lang .on{ color:var(--text); font-weight:600; }
.lp-lang .off{ color:var(--accent-ink); }
.lp-lang .bar{ color:var(--lp-hair); }

.lp-theme{
  width:34px; height:34px; border-radius:999px; border:1px solid var(--lp-hair);
  background:transparent; color:var(--text-muted); cursor:pointer; font-size:15px; line-height:1;
}
.lp-theme:hover{ border-color:var(--accent); color:var(--text); }

.lp-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--lp-cta); color:#F4F1E9 !important; text-decoration:none;
  font:600 14px/1 "Inter", sans-serif; padding:11px 18px; border-radius:9px;
  border:1px solid var(--lp-cta); transition:filter .15s, transform .15s;
}
.lp-cta:hover{ filter:brightness(1.25); text-decoration:none; }
.lp-cta-ic{ display:inline-flex; }
.lp-cta-ic svg{ width:15px; height:15px; }

/* ============ FULL-BLEED SOFT GROUND (behind first screen) ============
   Adapts Clarus's .land::before: a 100vw layer centered on the viewport,
   sitting behind the centered content so wide screens never read as blank
   white. Layered subtle radial-gradients in the forest/emerald accent tints
   + a faint top wash, fading to transparent before the feature strip. */
main{ position:relative; }
main::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:0; left:50%; width:100vw; transform:translateX(-50%);
  height:min(118vh, 1040px);
  background:
    radial-gradient(68rem 40rem at 72% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%),
    radial-gradient(56rem 34rem at 16% 6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 64%),
    radial-gradient(50rem 30rem at 50% 86%, color-mix(in srgb, var(--accent-ink) 8%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 34%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
[data-mode="dark"] main::before{
  background:
    radial-gradient(68rem 40rem at 72% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 66%),
    radial-gradient(56rem 34rem at 16% 6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%),
    radial-gradient(50rem 30rem at 50% 86%, color-mix(in srgb, var(--accent-ink) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%);
}

/* ============ HERO ============ */
.lp-hero{ padding:20px 0 0; }
.lp-hero-in{ text-align:center; }
.lp-h1{
  font-family:"Newsreader", Georgia, serif; font-weight:500;
  font-size:clamp(42px, 6.2vw, 74px); line-height:1.04; letter-spacing:-0.02em;
  color:var(--text); margin:0 auto;
}
.lp-lead{
  max-width:66ch; margin:20px auto 0;
  font:400 17px/1.65 "Inter", sans-serif; color:var(--text-muted);
}
.lp-lead b{ color:var(--text); font-weight:600; }

/* ============ HERO STAGE (center graphic) ============ */
.lp-stage{
  position:relative; margin:26px auto 0; max-width:100%;
  display:grid; grid-template-columns:25% 42% 21% 12%; align-items:center;
  gap:0; min-height:360px;
}

/* faint green haze behind the stage region */
.lp-stage::before{
  content:""; position:absolute; inset:6% 18% 6% 18%; z-index:0;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%);
  pointer-events:none;
}

/* ---- flow cards (TR / EN) ---- */
.lp-flow-card{
  position:relative; z-index:2;
  background:var(--lp-card); border:1px solid var(--lp-hair); border-radius:16px;
  padding:18px 18px 16px; text-align:left;
  box-shadow:0 18px 40px -28px rgba(20,40,30,.4), 0 2px 8px -4px rgba(20,40,30,.12);
}
.lp-flow-src{ margin-right:-14px; }
.lp-flow-out{
  margin-left:-14px;
  border-color:color-mix(in srgb, var(--accent) 38%, var(--lp-hair));
  box-shadow:0 18px 44px -26px color-mix(in srgb, var(--accent) 50%, transparent), 0 2px 8px -4px rgba(20,40,30,.12);
}
/* stacked-deck edge behind TR card */
.lp-deck-edge{
  position:absolute; inset:8px -8px -8px 8px; z-index:-1;
  background:var(--lp-card); border:1px solid var(--lp-hair); border-radius:16px;
  opacity:.6;
}

.lp-flow-tag{
  display:inline-flex; align-items:center; gap:7px;
  font:500 11.5px/1 "Inter", sans-serif; letter-spacing:.02em; color:var(--text-muted);
}
.lp-tag-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font:600 10.5px/1 "Inter", sans-serif; letter-spacing:.04em;
  padding:3px 6px; border-radius:5px;
}
.lp-tag-tr{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-ink); }
.lp-tag-en{ background:transparent; border:1px solid var(--lp-hair); color:var(--text-muted); }

.lp-flow-title{
  font-family:"Newsreader", Georgia, serif; font-weight:500; font-size:15.5px; line-height:1.32;
  color:var(--text); margin:12px 0 9px;
}
.lp-flow-body{
  font:400 12.5px/1.5 "Inter", sans-serif; color:var(--text-muted); margin:0 0 14px;
}
.lp-flow-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lp-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; color:var(--text-muted);
  border:1px solid var(--lp-hair); border-radius:6px; padding:3px 7px;
  background:color-mix(in srgb, var(--accent) 4%, var(--lp-card));
}
.lp-chip .ci{ width:12px; height:12px; color:var(--accent); }
.lp-lock{ margin-left:auto; display:inline-flex; color:var(--accent); }
.lp-lock svg{ width:15px; height:15px; }

/* ---- center stream ---- */
.lp-stream{
  position:relative; z-index:1; height:320px; align-self:center;
  display:flex; align-items:center; justify-content:center;
}
.lp-stream-glow{
  position:absolute; inset:-12% -8%; pointer-events:none;
  background:
    radial-gradient(ellipse 42% 48% at 50% 50%, color-mix(in srgb, #EAFFF8 50%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 62% 64% at 50% 50%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 68%);
}
[data-mode="dark"] .lp-stream-glow{
  background:
    radial-gradient(ellipse 42% 48% at 50% 50%, color-mix(in srgb, #9DEFD6 42%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 64% 66% at 50% 50%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%);
}
.lp-stream-svg{ position:absolute; inset:0; width:100%; height:100%; }

.la-core{ stroke-dasharray:18 26; animation:la-flow 1.8s linear infinite; }
.la-core2{ opacity:.9; }
.la-core3{ opacity:.8; stroke-dasharray:10 30; animation:la-flow2 1.4s linear infinite; }
@keyframes la-flow{ to{ stroke-dashoffset:-44; } }
@keyframes la-flow2{ to{ stroke-dashoffset:-40; } }
.la-flare{ animation:la-twinkle 3.4s ease-in-out infinite; transform-origin:center; }
@keyframes la-twinkle{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.la-stars{ animation:la-twinkle 4s ease-in-out infinite; }
.la-dots{ animation:la-twinkle 5s ease-in-out infinite; }
.la-p{ mix-blend-mode:screen; }

/* ---- the SEAL coin ---- */
.lp-seal{
  position:relative; z-index:5; width:108px; height:108px;
  display:flex; align-items:center; justify-content:center;
}
.lp-seal-glow{
  position:absolute; inset:-34px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 36%, transparent) 0%, transparent 68%);
}
.lp-seal-ring{ position:absolute; border-radius:50%; border:1px solid color-mix(in srgb, #BFEFE0 70%, transparent); }
.lp-seal-ring-1{ inset:-10px; opacity:.6; }
.lp-seal-ring-2{ inset:-19px; opacity:.32; animation:la-pulse 3s ease-out infinite; }
@keyframes la-pulse{ 0%{ transform:scale(1); opacity:.4; } 70%{ transform:scale(1.18); opacity:0; } 100%{ opacity:0; } }
.lp-seal-disc{
  position:relative; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #1F5E4E 0%, #103E32 55%, #08251D 100%);
  border:2px solid #7FD9C2;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 28px -10px rgba(8,37,29,.7);
  display:flex; align-items:center; justify-content:center; overflow:visible;
}
.lp-seal-disc svg{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); opacity:.92; }
.lp-seal-s{
  position:relative; z-index:2;
  font-family:"Newsreader", Georgia, serif; font-weight:500; font-size:54px; line-height:1;
  color:#F3EBDC; margin-bottom:6px; letter-spacing:0;
}

/* ---- floating pills ---- */
.lp-pill{
  position:absolute; z-index:6;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--lp-card); border:1px solid var(--lp-hair); border-radius:999px;
  padding:6px 10px 6px 8px;
  font:500 11.5px/1 "Inter", sans-serif; color:var(--text);
  box-shadow:0 10px 24px -16px rgba(20,40,30,.5), 0 1px 3px -1px rgba(20,40,30,.18);
}
.lp-pill-ic{ display:inline-flex; color:var(--accent); }
.lp-pill-ic svg{ width:15px; height:15px; }
.lp-pill-ck{
  display:inline-flex; width:14px; height:14px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  position:relative; flex:none;
}
.lp-pill-ck::after{
  content:""; position:absolute; left:4px; top:3.5px; width:4px; height:7px;
  border:solid var(--accent); border-width:0 1.8px 1.8px 0; transform:rotate(42deg);
}
/* positions — relative to the 40%-wide stream column */
.lp-pill-t1{ top:6%;  left:-6%; }
.lp-pill-t2{ top:-3%; left:38%; }
.lp-pill-t3{ top:6%;  right:-8%; }
.lp-pill-m1{ bottom:8%; left:-4%; }
.lp-pill-m2{ bottom:-1%; left:39%; }
.lp-pill-m3{ bottom:8%; right:-6%; }
.lp-pill-b1{ bottom:-16%; left:14%; }
.lp-pill-b2{ bottom:-16%; right:12%; }

/* ---- SSCI panel (quiet sidebar) ---- */
.lp-ssci{
  position:relative; z-index:2; align-self:center; text-align:left;
  padding-left:18px; border-left:1px solid var(--lp-hair); margin-left:6px;
}
.lp-ssci-tag{
  font-size:10.5px; letter-spacing:.12em; color:var(--text-muted); display:block; margin-bottom:14px;
}
.lp-ssci-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.lp-ssci-list li{
  display:flex; align-items:center; gap:9px;
  font:400 12.5px/1.3 "Inter", sans-serif; color:var(--text);
}
.lp-ssci-ic{ display:inline-flex; color:var(--accent); flex:none; }
.lp-ssci-ic svg{ width:17px; height:17px; }

/* ============ FEATURE ROW (5 divided strip) ============ */
.lp-feat-sec{ padding:46px 0 0; }
.lp-features{
  display:grid; grid-template-columns:repeat(5, 1fr);
  border-top:1px solid var(--lp-hair);
}
.lpf{
  padding:26px 22px 0; position:relative;
  display:flex; flex-direction:column;
}
.lpf + .lpf::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:var(--lp-hair);
}
.lpf-head{ display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.lpf-ic{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 9%, var(--lp-card));
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--lp-hair));
  color:var(--accent);
}
.lpf-ic svg{ width:19px; height:19px; }
.lpf-head h3{
  font-family:"Newsreader", Georgia, serif; font-weight:500; font-size:18px; line-height:1.1;
  color:var(--text); margin:0;
}
.lpf p{
  font:400 13px/1.5 "Inter", sans-serif; color:var(--text-muted); margin:0 0 18px;
  flex:1;
}
.lpf-rule{ display:block; height:1px; background:var(--lp-hair); margin-right:22px; }
.lpf-chk{
  display:flex; align-items:center; gap:8px; padding:14px 0 24px;
  font:500 12px/1.35 "Inter", sans-serif; color:var(--accent-ink);
}
.lpf-tick{ display:inline-flex; width:15px; height:15px; position:relative; flex:none; }
.lpf-tick::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(42deg);
}

/* ============ BOTTOM TRUST BAND ============ */
.lp-trust-sec{ padding:0 0 0; margin-top:8px; }
.lp-trust{
  display:grid; grid-template-columns:repeat(4, 1fr);
  background:var(--lp-band);
  border-top:1px solid var(--lp-hair); border-bottom:1px solid var(--lp-hair);
}
.lp-tb{ padding:30px 26px; position:relative; }
.lp-tb + .lp-tb::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:1px; background:var(--lp-hair);
}
.lp-tb-text{ display:flex; gap:14px; align-items:flex-start; }
.lp-tb-ic{ display:inline-flex; color:var(--accent); flex:none; margin-top:1px; }
.lp-tb-ic svg{ width:26px; height:26px; }
.lp-tb-text b{ font:600 14.5px/1.2 "Inter", sans-serif; color:var(--text); display:block; }
.lp-tb-text small{ font:400 12.5px/1.5 "Inter", sans-serif; color:var(--text-muted); display:block; margin-top:5px; }

/* centered stat blocks */
.lp-tb-stat{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.lp-tb-stat .lp-laurel{ position:absolute; top:50%; transform:translateY(-60%); color:var(--accent); opacity:.85; }
.lp-tb-stat .lp-laurel svg{ width:38px; height:46px; }
.lp-laurel-l{ left:14%; }
.lp-laurel-r{ right:14%; }
.lp-stat-val{
  font-family:"Newsreader", Georgia, serif; font-weight:500; font-size:40px; line-height:1;
  color:var(--text);
}
.lp-stat-val-sm{ font-size:28px; letter-spacing:.01em; }
.lp-stat-cap{ font:400 12px/1.4 "Inter", sans-serif; color:var(--text-muted); margin-top:8px; max-width:18ch; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  /* freeze every flow animation into a beautiful composed still */
  .la-core, .la-core3{ animation:none; stroke-dasharray:none; }
  .la-flare, .la-stars, .la-dots{ animation:none; opacity:1; }
  .lp-seal-ring-2{ animation:none; opacity:.3; }
  /* freeze drifting particles at staggered composed positions along the core */
  .lp-stream-svg .la-particles animateMotion{ display:none; }
  .lp-stream-svg .la-p{ visibility:visible; }
  .lp-stream-svg .la-p:nth-child(1){ transform:translate(168px,160px); }
  .lp-stream-svg .la-p:nth-child(2){ transform:translate(206px,160px); }
  .lp-stream-svg .la-p:nth-child(3){ transform:translate(238px,160px); }
  .lp-stream-svg .la-p:nth-child(4){ transform:translate(272px,160px); }
  .lp-stream-svg .la-p:nth-child(5){ transform:translate(304px,160px); }
  .lp-stream-svg .la-p:nth-child(6){ transform:translate(140px,160px); }
  .lp-stream-svg .la-p:nth-child(7){ transform:translate(336px,160px); }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .lp-stage{ grid-template-columns:26% 38% 36%; }
  .lp-ssci{ display:none; }
  .lp-pill-t3{ right:-2%; } .lp-pill-m3{ right:-2%; }
}
@media (max-width:960px){
  .lp-nav{ gap:16px; }
  .lp-nav a{ font-size:13.5px; }
  .lp-stage{ display:block; min-height:0; }
  .lp-stage::before{ display:none; }
  .lp-flow-card{ margin:0 0 18px !important; max-width:520px; }
  .lp-flow-src, .lp-flow-out{ margin-left:auto !important; margin-right:auto !important; }
  .lp-stream{ height:200px; margin:0 auto 18px; max-width:420px; }
  .lp-pill{ display:none; }
  .lp-features{ grid-template-columns:repeat(2,1fr); }
  .lpf:nth-child(odd)::before{ display:none; }
  .lp-trust{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .lp-nav a:not(.lp-nav-quiet){ display:none; }
  .lp-features{ grid-template-columns:1fr; }
  .lpf::before{ display:none !important; }
  .lp-trust{ grid-template-columns:1fr; }
  .lp-tb + .lp-tb::before{ display:none; }
}