/* SOLID — prototype launcher */

.launcher { position: relative; z-index: 2; min-height: 100vh; background: var(--coal); color: var(--bone); }
.launcher__inner { max-width: 1180px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-9); }

.lheader { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.lheader .logo__txt b { color: var(--bone); }
.lheader__tag { font-size: var(--fs-xs); font-weight: 800; color: #8C8277; border: 2px solid #2E2823; padding: 5px 12px; border-radius: var(--r-full); }

.lhero { position: relative; margin-top: var(--s-7); padding-bottom: var(--s-6); border-bottom: 2px solid #2A241F; }
.lhero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(3rem, 12vw, 8rem); line-height: .84; letter-spacing: .01em;
}
.lhero h1 em { font-style: normal; color: var(--red-hot); display: block; }
.lhero__sub { margin-top: var(--s-4); max-width: 52ch; color: #B5ABA0; font-size: var(--fs-lg); }
.lhero__strip { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.lhero__strip span { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: .08em; background: var(--bone); color: var(--ink); padding: 3px 12px; }
.lhero__art { position: absolute; inset-inline-end: 0; top: -10px; width: min(320px, 38vw); opacity: .9; border-radius: var(--r-lg); overflow: hidden; border: 2px solid #2E2823; }

.lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.lcard {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: #1B1714; border: 2px solid #2E2823; border-radius: var(--r-lg);
  padding: var(--s-5); transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.lcard:hover { transform: translateY(-3px); border-color: var(--red); background: #211C18; }
.lcard__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--red); color: #fff; }
.lcard__icon svg { width: 22px; height: 22px; }
.lcard h2 { font-size: var(--fs-lg); }
.lcard .en { font-size: var(--fs-2xs); color: #8C8277; letter-spacing: .1em; }
.lcard p { font-size: var(--fs-sm); color: #B5ABA0; }
.lcard__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--bone); }
.lcard__go svg { width: 16px; height: 16px; }

.lflows { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.lflow { border: 2px dashed #2E2823; border-radius: var(--r-md); padding: var(--s-4); }
.lflow h3 { font-size: var(--fs-md); color: var(--mustard); margin-bottom: var(--s-2); }
.lflow ol { display: grid; gap: 6px; font-size: var(--fs-sm); color: #B5ABA0; counter-reset: s; }
.lflow li { counter-increment: s; padding-inline-start: 24px; position: relative; }
.lflow li::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: #2E2823; color: var(--bone);
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
}

.lfoot { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 2px solid #2A241F; color: #6C6258; font-size: var(--fs-xs); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

@media (max-width: 720px) {
  .lhero__art { display: none; }
  .launcher__inner { padding: var(--s-5) var(--s-4) var(--s-8); }
}