:root{ --bg: #0b1220; --panel: rgba(255,255,255,.06); --panel2: rgba(255,255,255,.08); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.14); --shadow: 0 14px 40px rgba(0,0,0,.35); --radius: 18px; --accent1: #6ee7ff; --accent2: #a78bfa; --accent3: #34d399; --accent4: #fbbf24; } /* Section wrapper */ .lsm-home{ padding: clamp(28px, 4vw, 60px) 0; background: radial-gradient(1200px 600px at 10% 0%, rgba(110,231,255,.18), transparent 60%), radial-gradient(1000px 520px at 85% 12%, rgba(167,139,250,.20), transparent 62%), radial-gradient(900px 520px at 40% 90%, rgba(52,211,153,.12), transparent 60%), var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } .lsm-wrap{ width: min(1100px, 92vw); margin: 0 auto; } /* Hero */ .lsm-hero{ padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), rgba(255,255,255,.03)); box-shadow: var(--shadow); position: relative; overflow: hidden; } .lsm-hero::before{ content:""; position:absolute; inset:-2px; background: linear-gradient(135deg, rgba(110,231,255,.30), rgba(167,139,250,.22), rgba(52,211,153,.18)); filter: blur(26px); opacity:.35; pointer-events:none; } .lsm-hero > *{ position: relative; } .lsm-eyebrow{ display:inline-flex; gap:10px; align-items:center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); font-size: 14px; letter-spacing:.2px; margin-bottom: 14px; } .lsm-eyebrow .dot{ width:10px;height:10px;border-radius:999px; background: linear-gradient(135deg, var(--accent1), var(--accent2)); box-shadow: 0 0 0 4px rgba(110,231,255,.12); } .lsm-h1{ font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; margin: 6px 0 12px; letter-spacing: -0.6px; } .lsm-lead{ font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.65; color: var(--muted); max-width: 72ch; margin: 0 0 20px; } /* CTAs */ .lsm-cta-row{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 8px; } .lsm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); text-decoration:none; font-weight: 650; letter-spacing:.2px; transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; user-select:none; } .lsm-btn-primary{ color: #08101d; background: linear-gradient(135deg, var(--accent1), var(--accent2)); border-color: transparent; box-shadow: 0 12px 28px rgba(110,231,255,.15); } .lsm-btn-secondary{ color: var(--text); background: rgba(255,255,255,.06); } .lsm-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(0,0,0,.30); border-color: rgba(255,255,255,.22); } /* Grid below hero */ .lsm-grid{ margin-top: 22px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; } @media (max-width: 900px){ .lsm-grid{ grid-template-columns: 1fr; } } .lsm-card{ border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), rgba(255,255,255,.03)); box-shadow: 0 10px 26px rgba(0,0,0,.26); overflow:hidden; } .lsm-card-head{ padding: 16px 18px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap: 12px; background: rgba(255,255,255,.04); } .lsm-card-title{ font-size: 16px; font-weight: 750; letter-spacing:.2px; margin:0; } .lsm-card-body{ padding: 18px; color: var(--muted); line-height: 1.7; font-size: 15.5px; } /* Timeline */ .lsm-timeline{ display:grid; gap: 14px; margin:0; padding: 0; list-style:none; } .lsm-timeline li{ display:grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.03); } @media (max-width: 520px){ .lsm-timeline li{ grid-template-columns: 1fr; } } .lsm-time{ font-weight: 800; color: rgba(255,255,255,.86); } .lsm-desc{ margin:0; color: var(--muted); } /* Badges / highlights */ .lsm-badges{ display:grid; gap: 10px; margin: 0; padding: 0; list-style:none; } .lsm-badges li{ padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(400px 120px at 0% 0%, rgba(255,255,255,.08), transparent 65%), rgba(255,255,255,.03); color: rgba(255,255,255,.82); font-weight: 650; letter-spacing:.15px; } /* Quote */ .lsm-quote{ margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(251,191,36,.10), rgba(110,231,255,.08), rgba(167,139,250,.08)); color: rgba(255,255,255,.90); } .lsm-quote p{ margin:0; font-size: 16px; line-height: 1.6; }