/* /assets/lumen/lumen.css — Lumen Light v4.0.0 */
:root{
  --lx-ink:#0f172a; --lx-muted:#475569; --lx-bg:#ffffff; --lx-soft:#f8fafc; --lx-ring:#e2e8f0;
  --lx-brand:#2563eb; --lx-brand2:#22d3ee; --lx-grad: linear-gradient(135deg, var(--lx-brand), var(--lx-brand2));
}
.lx-main{ color:var(--lx-ink); background:var(--lx-bg); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial; }
.lx-wrap{ max-width:1200px; margin:0 auto; padding:0 16px }
a{ color:var(--lx-brand); text-decoration:none } a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto; display:block }

/* Hero */
.lx-hero{ position:relative; background: radial-gradient(1000px 500px at -10% -20%, rgba(37,99,235,.08), transparent 40%), #fff; }
.lx-hero-in{ display:grid; grid-template-columns:1fr; gap:18px; padding:24px 0 12px }
@media (min-width: 900px){ .lx-hero-in{ grid-template-columns: 1.1fr .9fr; align-items:center } }
.lx-h1{ font-size: clamp(28px, 6.2vw, 52px); line-height:1.06; letter-spacing:-.02em; margin:0 0 8px }
.lx-sub{ color:var(--lx-muted); margin:0 0 14px }
.lx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:12px 18px; border:none; border-radius:14px; background:var(--lx-grad); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.25) }
.lx-hero-visual{ background:var(--lx-soft); border:1px solid var(--lx-ring); border-radius:16px; overflow:hidden }
.lx-hero-visual img{ aspect-ratio: 16 / 9; object-fit: cover }

/* Decorative */
.lx-sun{ position:absolute; top:-100px; right:-100px; width:300px; height:300px; background:radial-gradient(circle at 30% 30%, rgba(34,211,238,.6), rgba(99,102,241,.4)); filter:blur(40px); opacity:.35; border-radius:50% }
.lx-dots{ position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, rgba(37,99,235,.5), rgba(34,211,238,.5)); opacity:.4 }

/* Stats */
.lx-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 0 }
@media (max-width: 700px){ .lx-stats{ grid-template-columns:1fr 1fr } }
.lx-stat{ background:#fff; border:1px solid var(--lx-ring); border-radius:14px; padding:12px; text-align:center }
.lx-k{ font-size:24px; font-weight:700 } .lx-kc{ color:var(--lx-muted); font-size:13px }

/* Sections */
.lx-sec{ padding:16px 0 }
.lx-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px }
.lx-h2{ font-size:26px; margin:0 }
.lx-grid{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width: 700px){ .lx-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width: 1100px){ .lx-grid{ grid-template-columns:repeat(3,1fr) } }

/* Cards */
.lx-card{ background:#fff; border:1px solid var(--lx-ring); border-radius:16px; overflow:hidden }
.lx-body{ padding:14px } .lx-body h3{ margin:0 0 6px; font-size:18px } .lx-body p{ margin:0 0 8px; color:var(--lx-muted) }
.lx-thumb{ position:relative; aspect-ratio: 3 / 2; background:#f8fafc; border-bottom:1px solid var(--lx-ring); overflow:hidden }
.lx-thumb > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition: transform .35s ease }
.lx-card:hover .lx-thumb > img{ transform:scale(1.03) }
.lx-actions{ margin-top:8px }
.lx-ghost{ background:transparent; color:var(--lx-ink); border:1px solid var(--lx-ring); box-shadow:none }

.lx-progress{ height:10px; border:1px solid var(--lx-ring); border-radius:999px; overflow:hidden }
.lx-progress > i{ display:block; height:100%; background:linear-gradient(90deg,#22d3ee,#2563eb) }
.lx-small{ font-size:12px; color:var(--lx-muted) }

/* CTA */
.lx-cta{ padding:20px 0 28px }
.lx-cta-in{ text-align:center; background:linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,1)); border:1px solid var(--lx-ring); border-radius:18px; padding:22px }
.lx-cta-in h2{ margin:0 0 8px; font-size:26px }
.lx-cta-in p{ margin:0 0 12px; color:var(--lx-muted) }

/* Subtle elevation */
@media (hover:hover){ .lx-raise{ transition: box-shadow .2s ease, transform .2s ease } .lx-raise:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,6,23,.08) } }

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  [data-lx-reveal]{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
  .lx-in{ opacity:1; transform: translateY(0) }
}