/* === landing page (Luraph-layout inspired, own design) === */
body.lp {
  overflow: auto; height: auto;
  background: #14121c; color: #e6e2f0;
  font-family: var(--font-family);
}
.lp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: linear-gradient(180deg, #3b2a63 0%, rgba(59,42,99,0) 100%);
  position: relative; z-index: 2;
}
.lp-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: 2px; color: #fff; }
.lp-logo { width: 30px; height: 30px; color: #cdb9ff; }
.lp-nav-links { display: flex; align-items: center; gap: 28px; }
.lp-nav-links a { color: #cfc7e6; text-decoration: none; font-size: 14px; font-weight: 600; }
.lp-nav-links a:hover { color: #fff; }
.lp-cta {
  display: inline-block; padding: 10px 26px; border: 2px solid #fff; border-radius: 4px;
  color: #fff !important; font-weight: 700; font-size: 13px; letter-spacing: 1px;
  text-decoration: none; transition: background 150ms, color 150ms;
}
.lp-cta:hover { background: #fff; color: #3b2a63 !important; }
.lp-cta-big { padding: 14px 38px; font-size: 14px; }

.lp-hero {
  background: linear-gradient(160deg, #4a3380 0%, #6d4fa8 45%, #8f63c9 100%);
  padding: 60px 48px 120px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  position: relative; overflow: hidden;
}
.lp-hero::after {
  content: ''; position: absolute; left: -5%; right: -5%; bottom: -80px; height: 160px;
  background: #14121c; border-radius: 50% 50% 0 0;
}
.lp-hero-inner { max-width: 640px; position: relative; z-index: 1; }
.lp-hero h1 { font-size: 44px; line-height: 1.12; margin: 0 0 20px; color: #fff; }
.lp-hero p { font-size: 16px; line-height: 1.65; color: #e0d8f5; margin: 0 0 30px; }
.lp-hero-art { position: relative; z-index: 1; opacity: 0.9; }
.lp-hero-art svg { width: 260px; height: 260px; filter: drop-shadow(0 0 60px rgba(200,160,255,0.5)); }

.lp-section { padding: 70px 48px; max-width: 1150px; margin: 0 auto; }
.lp-section.lp-alt { max-width: none; background: #1b1826; }
.lp-section.lp-alt > * { max-width: 1150px; margin-left: auto; margin-right: auto; }
.lp-section h2 { font-size: 32px; color: #fff; margin: 0 0 18px; }
.lp-lead { font-size: 15px; line-height: 1.75; color: #b8b0d4; max-width: 720px; margin: 0 0 26px; }

.lp-codecard {
  background: #100e18; border: 1px solid #332a52; border-radius: 8px;
  padding: 18px 22px; max-width: 620px; box-shadow: var(--shadow-md);
}
.lp-codecard pre { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: #a8e0b0; }
.lp-codecard pre::first-line { color: #e6e2f0; }

.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.lp-card {
  background: #14121c; border: 1px solid #2c2545; border-radius: 8px; padding: 26px;
  transition: border-color 150ms, transform 150ms;
}
.lp-card:hover { border-color: #6d4fa8; transform: translateY(-3px); }
.lp-card h3 { margin: 0 0 12px; font-size: 17px; color: #cdb9ff; }
.lp-card p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #a79ec6; }

.lp-footer {
  background: #241a3d; padding: 34px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.lp-foot-links { display: flex; gap: 26px; }
.lp-foot-links a { color: #cfc7e6; text-decoration: none; font-size: 13px; font-weight: 600; }
.lp-foot-links a:hover { color: #fff; }
.lp-copy { color: #8d81b3; font-size: 12px; }

@media (max-width: 900px) {
  .lp-hero { flex-direction: column; text-align: center; padding-bottom: 140px; }
  .lp-hero-art svg { width: 160px; height: 160px; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-nav { padding: 16px 20px; }
  .lp-nav-links { gap: 16px; }
  .lp-section { padding: 50px 22px; }
}