/* ============================================================
   Marketing landing kit — sections built on BSquare tokens.
   ============================================================ */
.lp{background:var(--bg-app);color:var(--text-body);min-height:100%;}
.lp-wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

/* nav */
.lp-nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg-app) 78%, transparent);
  border-bottom:1px solid var(--border-subtle);}
.lp-nav-in{display:flex;align-items:center;gap:30px;height:64px;max-width:1120px;margin:0 auto;padding:0 32px;}
.lp-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--text-strong);letter-spacing:-.02em;}
.lp-brand .sup{color:var(--accent);font-size:.62em;vertical-align:.55em;margin-left:1px;}
.lp-mark{width:30px;height:30px;color:var(--accent);}
.lp-links{display:flex;gap:26px;margin-left:8px;}
.lp-links a{font-size:14px;color:var(--text-muted);font-weight:500;transition:color var(--dur-fast);}
.lp-links a:hover{color:var(--text-strong);text-decoration:none;}
.lp-nav-right{margin-left:auto;display:flex;align-items:center;gap:14px;}

/* hero */
.lp-hero{position:relative;text-align:center;padding:96px 0 70px;overflow:hidden;}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(620px 320px at 50% -8%, rgba(42,111,219,.22), transparent 70%),
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size:100% 100%, 46px 46px, 46px 46px;
  -webkit-mask-image:radial-gradient(680px 420px at 50% 12%, #000 40%, transparent 78%);
          mask-image:radial-gradient(680px 420px at 50% 12%, #000 40%, transparent 78%);}
.lp-hero > *{position:relative;z-index:1;}
.lp-pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 7px 0 12px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--border-default);background:var(--surface-2);font-size:12.5px;color:var(--text-muted);margin-bottom:26px;}
.lp-pill b{color:var(--text-body);font-weight:500;}
.lp-pill .tagv{font-family:var(--font-mono);font-size:11px;color:var(--text-link);background:var(--accent-soft);
  border:1px solid var(--accent-soft-border);padding:2px 7px;border-radius:999px;}
.lp-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6.4vw,72px);line-height:1.02;
  letter-spacing:-.03em;color:var(--text-strong);margin:0 auto;max-width:14ch;}
.lp-h1 .grad{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lp-sub{font-size:clamp(16px,2vw,19px);color:var(--text-muted);max-width:60ch;margin:22px auto 0;line-height:1.55;}
.lp-cta{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap;}
.lp-install{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:var(--radius-lg);white-space:nowrap;
  background:var(--surface-code);border:1px solid var(--border-default);font-family:var(--font-mono);font-size:14px;color:var(--text-body);cursor:pointer;}
.lp-install .pmt{color:var(--accent);} .lp-install .cp{margin-left:4px;color:var(--text-faint);display:flex;}

/* showcase: code + widget peek */
.lp-show{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:62px;align-items:stretch;text-align:left;}
.lp-code{background:var(--surface-code);border:1px solid var(--border-default);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;}
.lp-code .bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--border-subtle);}
.lp-code .bar .dot{width:11px;height:11px;border-radius:50%;}
.lp-code .bar .file{margin-left:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);}
.lp-code pre{margin:0;padding:18px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.75;color:var(--code-fg);overflow:auto;}
.lp-peek{position:relative;border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;
  background:linear-gradient(160deg, #16202c, #0c1219);display:flex;align-items:flex-end;justify-content:center;padding:22px;}
.lp-peek-grid{position:absolute;inset:0;background:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);background-size:28px 28px;opacity:.5;}
.lp-mini{position:relative;width:100%;max-width:280px;background:var(--surface-1);border:1px solid var(--border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-widget);overflow:hidden;}
.lp-mini .h{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid var(--border-subtle);}
.lp-mini .h .nm{font-weight:600;font-size:13px;color:var(--text-strong);}
.lp-mini .h .st{font-size:10.5px;color:var(--text-muted);display:flex;align-items:center;gap:4px;}
.lp-mini .h .st .d{width:5px;height:5px;border-radius:50%;background:var(--green-400);}
.lp-mini .b{padding:13px 12px;display:flex;flex-direction:column;gap:10px;}
.lp-mini .ag{font-size:12.5px;color:var(--text-body);line-height:1.5;}
.lp-mini .us{align-self:flex-end;background:var(--accent-soft);border:1px solid var(--accent-soft-border);
  color:var(--text-strong);font-size:12.5px;padding:7px 11px;border-radius:12px 12px 4px 12px;max-width:80%;}
.lp-mini .tool{border:1px solid var(--border-default);border-radius:8px;background:var(--surface-2);
  font-family:var(--font-mono);font-size:11px;padding:7px 9px;display:flex;align-items:center;gap:7px;color:var(--text-strong);}
.lp-mini .tool .ok{margin-left:auto;color:var(--green-400);display:flex;}
.lp-avatar{width:26px;height:26px;border-radius:8px;background:var(--brand-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:600;font-size:12px;flex:none;}

/* logos strip */
.lp-strip{padding:34px 0 8px;text-align:center;}
.lp-strip .cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);}
.lp-strip .row{display:flex;gap:38px;justify-content:center;flex-wrap:wrap;margin-top:18px;color:var(--text-muted);}
.lp-strip .row span{font-family:var(--font-display);font-weight:600;font-size:18px;opacity:.6;}

/* section heads */
.lp-section{padding:84px 0;}
.lp-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.lp-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;color:var(--text-strong);margin:12px 0 0;max-width:18ch;}
.lp-lead{color:var(--text-muted);font-size:17px;max-width:54ch;margin:14px 0 0;line-height:1.55;}

/* how it works — flow */
.lp-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px;}
.lp-step{background:var(--surface-1);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:20px 18px;position:relative;}
.lp-step .n{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);
  color:var(--text-link);font-family:var(--font-mono);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;}
.lp-step h4{font-family:var(--font-display);font-size:16px;color:var(--text-strong);margin:14px 0 0;font-weight:600;}
.lp-step p{font-size:13.5px;color:var(--text-muted);margin:7px 0 0;line-height:1.5;}
.lp-step .arrow{position:absolute;right:-11px;top:30px;color:var(--border-strong);z-index:2;}
.lp-flow .lp-step:last-child .arrow{display:none;}

/* features grid */
.lp-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px;}
.lp-fcard{background:var(--surface-1);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:24px;
  transition:border-color var(--dur-base),transform var(--dur-base);}
.lp-fcard:hover{border-color:var(--border-strong);transform:translateY(-3px);}
.lp-fic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);
  color:var(--accent);display:flex;align-items:center;justify-content:center;}
.lp-fcard h3{font-family:var(--font-display);font-size:18px;color:var(--text-strong);margin:16px 0 0;font-weight:600;}
.lp-fcard p{font-size:14px;color:var(--text-muted);margin:8px 0 0;line-height:1.55;}

/* packages */
.lp-pkgs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px;}
.lp-pkg{background:var(--surface-1);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;}
.lp-pkg .top{padding:22px 24px;display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--border-subtle);}
.lp-pkg .top .lang{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:13px;}
.lp-pkg .top .nm{font-family:var(--font-mono);font-size:15px;color:var(--text-strong);}
.lp-pkg .top .sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.lp-pkg .cmd{padding:16px 24px;font-family:var(--font-mono);font-size:13.5px;color:var(--text-body);display:flex;align-items:center;gap:9px;}
.lp-pkg .cmd .pmt{color:var(--accent);}

/* CTA band */
.lp-band{margin:20px 0 0;padding:64px 40px;border-radius:var(--radius-2xl);text-align:center;position:relative;overflow:hidden;
  border:1px solid var(--accent-soft-border);background:radial-gradient(700px 300px at 50% 0%, rgba(42,111,219,.25), var(--surface-1));}
.lp-band h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;color:var(--text-strong);}
.lp-band p{color:var(--text-muted);font-size:17px;margin:14px auto 0;max-width:48ch;}

/* footer */
.lp-foot{border-top:1px solid var(--border-subtle);padding:44px 0 56px;margin-top:80px;}
.lp-foot-in{display:flex;gap:40px;flex-wrap:wrap;}
.lp-foot .brandcol{max-width:280px;}
.lp-foot .brandcol p{font-size:13.5px;color:var(--text-muted);margin:12px 0 0;line-height:1.55;}
.lp-foot .col{display:flex;flex-direction:column;gap:11px;}
.lp-foot .col .ti{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:3px;}
.lp-foot .col a{font-size:14px;color:var(--text-muted);}
.lp-foot .col a:hover{color:var(--text-strong);text-decoration:none;}
.lp-foot .bottom{display:flex;align-items:center;justify-content:space-between;margin-top:40px;padding-top:22px;border-top:1px solid var(--border-subtle);color:var(--text-faint);font-size:13px;}