/* ============================================================================
   TibiaScanner — Landing page (redesign "tactical / intel-terminal")
   Design tokens + components. Values from design_handoff_landing/README.md.
   Scoped with .lp-* so it never clashes with the dashboard style.css.
   ============================================================================ */

:root {
  /* Backgrounds */
  --lp-bg:        #0a0c11;
  --lp-bg-deep:   #080a0e;
  --lp-bg-hover:  #0c0f15;
  /* Hairlines */
  --lp-line:      #161c28;
  --lp-line-row:  #121824;
  --lp-line-row2: #10141d;
  --lp-line-ghost:#1e2634;
  --lp-line-2:    #2a3446;
  /* Text */
  --lp-h:      #f2f5f9;
  --lp-h2:     #eef2f7;
  --lp-strong: #e6ebf2;
  --lp-body:   #c9cfda;
  --lp-muted:  #8b94a6;
  --lp-dim:    #7c8698;
  --lp-faint:  #6b7689;
  --lp-faint2: #525b6e;
  --lp-faint3: #3a4254;
  /* Accent + live */
  --lp-accent:       #3fdcd4;
  --lp-accent-hover: #7ff0ea;
  --lp-on-accent:    #051916;
  --lp-live:         #3ddc84;
  /* Vocation badges */
  --lp-voc-ek: #ff5c47;
  --lp-voc-rp: #f6b74b;
  --lp-voc-ms: #8b7bf0;
  --lp-voc-ed: #3ddc84;
  /* Layout */
  --lp-container: 1240px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.lp-body * { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
.lp-body {
  background:var(--lp-bg); color:var(--lp-body);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
}
.lp-body a { color:var(--lp-accent); text-decoration:none; }
.lp-body a:hover { color:var(--lp-accent-hover); }
/* Solid buttons rendered as <a> — force dark text over cyan (beats .lp-body a) */
.lp-body a.lp-btn, .lp-body a.lp-btn-lg, .lp-body a.lp-btn-xl,
.lp-body a.lp-btn:hover, .lp-body a.lp-btn-lg:hover, .lp-body a.lp-btn-xl:hover { color:var(--lp-on-accent); }
.lp-body .mono { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.lp-body ::selection { background:rgba(63,220,212,.22); }
.lp-body input, .lp-body button { font-family:inherit; }

@keyframes lp-tk { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes lp-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes lp-pulse {
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(61,220,132,.5); }
  50%    { opacity:.6; box-shadow:0 0 0 5px rgba(61,220,132,0); }
}

.lp-container { max-width:var(--lp-container); margin:0 auto; padding:0 28px; }
.lp-dot { width:6px; height:6px; border-radius:50%; background:var(--lp-live); flex-shrink:0; }
.lp-dot.pulse { animation:lp-pulse 2s infinite; }

/* ── Ticker ────────────────────────────────────────────────────────────── */
.lp-ticker { height:34px; border-bottom:1px solid var(--lp-line); background:var(--lp-bg-deep);
  display:flex; align-items:center; overflow:hidden; position:relative; }
.lp-ticker-live { flex-shrink:0; display:flex; align-items:center; gap:7px; padding:0 16px;
  height:100%; border-right:1px solid var(--lp-line); background:var(--lp-bg); z-index:2; }
.lp-ticker-live .mono { font-size:10px; letter-spacing:.18em; color:var(--lp-live); font-weight:600; }
.lp-ticker-track { flex:1; overflow:hidden; white-space:nowrap; }
.lp-ticker-run { display:inline-block; white-space:nowrap; animation:lp-tk 42s linear infinite;
  font-size:11px; color:var(--lp-faint); }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.lp-nav { position:sticky; top:0; z-index:40; height:60px; border-bottom:1px solid var(--lp-line);
  background:rgba(10,12,17,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lp-nav-inner { max-width:var(--lp-container); margin:0 auto; height:100%; padding:0 28px;
  display:flex; align-items:center; gap:14px; }
.lp-logo { font-weight:700; font-size:15px; letter-spacing:.06em; color:var(--lp-h2); }
.lp-logo b { color:var(--lp-accent); font-weight:700; }
.lp-ver { font-size:10px; color:var(--lp-faint3); letter-spacing:.1em; }
.lp-spacer { flex:1; }
.lp-nav-link { font-size:12px; color:var(--lp-dim); letter-spacing:.04em; }
.lp-nav-link:hover { color:var(--lp-accent); }
.lp-btn { background:var(--lp-accent); border:none; border-radius:6px; padding:9px 16px;
  color:var(--lp-on-accent); font-size:13px; font-weight:700; cursor:pointer; letter-spacing:.01em;
  display:inline-block; transition:background .13s; }
.lp-btn:hover { background:var(--lp-accent-hover); color:var(--lp-on-accent); }

/* ── Error (functional, not in mock) ───────────────────────────────────── */
.lp-error { max-width:var(--lp-container); margin:0 auto; padding:10px 28px;
  color:var(--lp-voc-ek); font-size:12.5px; font-family:'IBM Plex Mono',monospace; }

/* ── Splits (editorial columns on hairlines) ───────────────────────────── */
.lp-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  border-left:1px solid var(--lp-line); border-right:1px solid var(--lp-line); }
.lp-split-320 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

/* ── Hero left ─────────────────────────────────────────────────────────── */
.lp-hero-left { padding:64px 44px 56px; border-right:1px solid var(--lp-line); }
.lp-kicker { font-size:11px; letter-spacing:.24em; color:var(--lp-accent); margin-bottom:30px; }
.lp-h1 { font-size:clamp(44px,6.6vw,82px); line-height:.92; font-weight:700; letter-spacing:-.035em;
  color:var(--lp-h); margin-bottom:26px; }
.lp-lead { font-size:16.5px; line-height:1.6; color:var(--lp-muted); max-width:430px; margin-bottom:34px; }
.lp-cta-row { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.lp-btn-lg { background:var(--lp-accent); border:none; border-radius:7px; padding:14px 24px;
  color:var(--lp-on-accent); font-size:15px; font-weight:700; cursor:pointer; display:inline-block;
  transition:background .13s; }
.lp-btn-lg:hover { background:var(--lp-accent-hover); color:var(--lp-on-accent); }
.lp-textlink { font-size:13px; color:var(--lp-muted); letter-spacing:.04em;
  border-bottom:1px solid var(--lp-line-2); padding-bottom:2px; transition:color .13s; }
.lp-textlink:hover { color:var(--lp-accent); }
.lp-stats { display:flex; margin-top:52px; border-top:1px solid var(--lp-line); }
.lp-stat { flex:1; padding:18px 18px 0 0; border-right:1px solid var(--lp-line); margin-right:18px; }
.lp-stat:last-child { border-right:none; margin-right:0; padding-right:0; }
.lp-stat-v { font-size:22px; font-weight:600; color:var(--lp-h2); white-space:nowrap; }
.lp-stat-l { font-size:9.5px; letter-spacing:.12em; color:var(--lp-faint); text-transform:uppercase; margin-top:4px; }

/* ── Hero right panel (product proof) ──────────────────────────────────── */
.lp-panel { background:var(--lp-bg-deep); }
.lp-panel-head { display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--lp-line); }
.lp-panel-title { display:flex; align-items:center; gap:9px; }
.lp-panel-title .dot { width:8px; height:8px; border-radius:50%; background:var(--lp-live); animation:lp-pulse 2s infinite; }
.lp-panel-title .mono { font-size:11px; letter-spacing:.14em; color:var(--lp-strong); font-weight:600; }
.lp-panel-count { font-size:11px; color:var(--lp-live); }
.lp-tbl { padding:0 8px; }
.lp-tbl-head { display:flex; padding:9px 14px; border-bottom:1px solid var(--lp-line-row); }
.lp-th { font-size:9px; letter-spacing:.14em; color:var(--lp-faint2); }
.lp-trow { display:flex; align-items:center; padding:10px 14px; border-bottom:1px solid var(--lp-line-row2); }
.lp-name { flex:1; display:flex; align-items:center; gap:9px; min-width:0; }
.lp-name .dot { width:6px; height:6px; border-radius:50%; background:var(--lp-live); box-shadow:0 0 6px var(--lp-live); flex-shrink:0; }
.lp-nick { font-size:13px; font-weight:600; color:var(--lp-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w-char   { flex:1; }
.w-lvl    { width:44px; text-align:right; }
.w-voc    { width:52px; text-align:center; }
.w-online { width:66px; text-align:right; }
.lp-col-lvl { font-size:12px; color:var(--lp-body); }
.lp-col-voc { display:flex; justify-content:center; }
.lp-col-voc .mono { font-size:10px; font-weight:600; }
.lp-col-online { font-size:11.5px; color:var(--lp-live); }
.lp-panel-foot { display:flex; align-items:center; justify-content:space-between;
  padding:13px 22px; border-top:1px solid var(--lp-line); }
.lp-panel-foot .l { font-size:10.5px; color:var(--lp-faint2); }
.lp-panel-foot .r { font-size:10.5px; color:var(--lp-accent); }

/* ── Servers band ──────────────────────────────────────────────────────── */
.lp-band { border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); background:var(--lp-bg-deep); }
.lp-band-inner { max-width:var(--lp-container); margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.lp-band-label { font-size:10px; letter-spacing:.2em; color:var(--lp-faint2); flex-shrink:0; }
.lp-band-list { display:flex; flex-wrap:wrap; gap:8px 22px; }
.lp-server { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:#9aa3b4; }
.lp-server .n { color:var(--lp-faint2); }

/* ── Capabilities (spec-sheet) ─────────────────────────────────────────── */
.lp-cap-left { padding:64px 44px; border-right:1px solid var(--lp-line); max-width:460px; }
.lp-h2 { font-size:clamp(30px,4vw,42px); line-height:1.02; font-weight:700; letter-spacing:-.025em;
  color:var(--lp-h); margin-bottom:20px; }
.lp-cap-p { font-size:15px; line-height:1.65; color:var(--lp-muted); }
.lp-cap-notes { font-size:11px; color:var(--lp-faint2); margin-top:32px; line-height:2; }
.lp-cap-row { display:flex; gap:20px; padding:22px 44px; border-bottom:1px solid var(--lp-line);
  align-items:flex-start; transition:background .13s; }
.lp-cap-row:hover { background:var(--lp-bg-hover); }
.lp-cap-n { font-size:12px; color:var(--lp-accent); font-weight:600; width:22px; flex-shrink:0; padding-top:2px; }
.lp-cap-body { flex:1; min-width:0; }
.lp-cap-h3 { font-size:15.5px; font-weight:600; color:var(--lp-strong); margin-bottom:4px; }
.lp-cap-desc { font-size:13px; line-height:1.55; color:var(--lp-dim); }
.lp-cap-tag { font-size:10px; color:var(--lp-faint2); flex-shrink:0; text-align:right; padding-top:3px; width:110px; }

/* ── Setup steps ───────────────────────────────────────────────────────── */
.lp-setup { border-top:1px solid var(--lp-line); background:var(--lp-bg-deep); }
.lp-setup-inner { max-width:var(--lp-container); margin:0 auto; padding:56px 28px; }
.lp-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; }
.lp-step { padding:0 30px 0 0; border-right:1px solid var(--lp-line); margin-right:30px; }
.lp-step-numrow { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.lp-step-num { font-size:38px; font-weight:600; color:var(--lp-line-ghost); line-height:1; }
.lp-step-line { height:1px; flex:1; background:var(--lp-line); }
.lp-step-h3 { font-size:16px; font-weight:600; color:var(--lp-strong); margin-bottom:8px; }
.lp-step-desc { font-size:13.5px; line-height:1.6; color:var(--lp-dim); }

/* ── Closing ───────────────────────────────────────────────────────────── */
.lp-closing { border-left:1px solid var(--lp-line); border-right:1px solid var(--lp-line); padding:88px 44px; }
.lp-closing-h2 { font-size:clamp(36px,6vw,72px); line-height:.98; font-weight:700; letter-spacing:-.035em;
  color:var(--lp-h); max-width:820px; }
.lp-closing-h2 span { color:var(--lp-accent); }
.lp-closing-row { display:flex; align-items:center; gap:24px; margin-top:38px; flex-wrap:wrap; }
.lp-btn-xl { background:var(--lp-accent); border:none; border-radius:7px; padding:15px 26px;
  color:var(--lp-on-accent); font-size:15.5px; font-weight:700; cursor:pointer; display:inline-block; transition:background .13s; }
.lp-btn-xl:hover { background:var(--lp-accent-hover); color:var(--lp-on-accent); }
.lp-closing-note { font-size:12.5px; color:var(--lp-faint); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.lp-footer { border-top:1px solid var(--lp-line); background:var(--lp-bg-deep); }
.lp-footer-inner { max-width:var(--lp-container); margin:0 auto; padding:26px 28px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.lp-footer-l { display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--lp-faint); }
.lp-footer-l .dot { animation:lp-pulse 2.4s infinite; }
.lp-footer-r { display:flex; gap:24px; font-size:12px; }
.lp-footer-r a { color:var(--lp-dim); }
.lp-footer-r a:hover { color:var(--lp-accent); }

/* ── Responsive: drop "hanging" vertical hairlines when columns stack ──── */
@media (max-width:860px) { .lp-hero-left { border-right:none; } }
@media (max-width:700px) { .lp-cap-left  { border-right:none; } }
@media (max-width:620px) {
  .lp-step { border-right:none; margin-right:0; padding-right:0; }
  .lp-nav-link { display:none; }
  .lp-hero-left, .lp-cap-left, .lp-closing { padding-left:22px; padding-right:22px; }
  .lp-hero-left { padding-top:44px; padding-bottom:44px; }
  .lp-closing { padding-top:56px; padding-bottom:56px; }
  .lp-container, .lp-nav-inner, .lp-band-inner, .lp-setup-inner, .lp-footer-inner { padding-left:18px; padding-right:18px; }
}