/* v2/landing.css — quiz-funnel landing page in the NEW site design system.
   Builds on v2/assets/site.css (tokens, nav-glass, buttons, chips, story cards,
   faq, closer-section, footer). Only page-specific sections live here. */

/* ===== Hero (dark statement w/ glass nav) ===== */
.qhero {
  position: relative;
  background:
    radial-gradient(72% 60% at 50% 6%, #2E2D2B 0%, rgba(26, 26, 25, 0.55) 38%, rgba(14, 14, 14, 0) 72%),
    #0C0C0C;
  overflow: hidden;
}
.qhero-body {
  display: flex; align-items: center; gap: 48px;
  max-width: 1360px; margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--pad, 40px) clamp(48px, 7vh, 80px);
}
.qhero-copy { flex: 1 1 55%; min-width: 0; }
.qhero .chip-label b { color: #E8E8E8; }
.qhero h1 {
  margin-top: 26px;
  font-size: clamp(44px, 5.4vw, 76px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.06; color: #fff;
}
.qhero-sub { margin-top: 20px; max-width: 520px; color: #9A9A9A; font-size: 17.5px; line-height: 1.5; }
.qhero .ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.qhero-wedge {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 34px; padding: 13px 20px; border-radius: 999px;
  background: #161616; border: 1px solid #2A2A2A;
  box-shadow: 0 0 0 1px rgba(225, 255, 160, 0.16), 0 0 34px rgba(225, 255, 160, 0.08);
}
.qw-ic { color: #E1FFA0; display: inline-flex; }
.qw-ic svg { width: 17px; height: 17px; }
.qw-line { color: #E1FFA0; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.qhero-art { flex: 0 0 42%; min-width: 0; }
.qhero-art img {
  width: 100%; height: auto; display: block; border-radius: 24px;
  border: 1px solid #2A2A2A;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* ===== Why (dark statement) + How (dark) shared grid ===== */
.qwhy, .qhow {
  background:
    radial-gradient(72% 60% at 50% 6%, #2E2D2B 0%, rgba(26, 26, 25, 0.55) 38%, rgba(14, 14, 14, 0) 72%),
    #0C0C0C;
  padding: clamp(72px, 10vh, 120px) var(--pad, 40px);
}
.qwhy-head { text-align: center; margin-bottom: 52px; }
.qwhy-head .chip-label b { color: #E8E8E8; }
.qwhy-head h2 {
  margin-top: 26px;
  font-size: clamp(38px, 4.6vw, 60px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.06; color: #fff;
}
.qwhy-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1360px; margin: 0 auto;
}
.qwhy-card {
  background: #161616; border: 1px solid #2A2A2A; border-radius: 22px;
  overflow: hidden; display: flex; flex-direction: column;
}
.qwhy-card .img { width: 100%; height: auto; display: block; }
.qwhy-card .txt { padding: 26px 26px 30px; }
.qwhy-card h4 { color: #fff; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
.qwhy-card p { color: #9A9A9A; font-size: 15.5px; line-height: 1.55; }
.qhow-imgwrap { position: relative; }
.qhow-n {
  position: absolute; top: 16px; left: 16px;
  width: 42px; height: 42px; border-radius: 999px;
  background: #E1FFA0; color: #1A3C2E;
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px rgba(225, 255, 160, 0.14);
}
.qhow-cta { text-align: center; margin-top: 44px; }

/* ===== Quiz preview (light) ===== */
.qask { background: #F5F5F3; padding: clamp(72px, 10vh, 120px) var(--pad, 40px); }
.qask-grid {
  display: flex; gap: 64px; align-items: center;
  max-width: 1360px; margin: 0 auto;
}
.qask-left { flex: 1 1 45%; }
.qask-left h2, .qask-head h2, .qfaq-left h2 {
  margin-top: 26px;
  font-size: clamp(38px, 4.6vw, 58px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.06; color: #141414;
}
.qask-sub { margin: 18px 0 30px; max-width: 430px; color: #6E6E6E; font-size: 16.5px; line-height: 1.55; }
.qask-fine { margin-top: 14px; color: #9A9A9A; font-size: 13.5px; }
.qask-list { flex: 1 1 55%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qask-list li {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #E2E2DF; border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 6px 20px rgba(20, 20, 20, 0.04);
}
.qask-ic {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #0E423A; color: #E1FFA0;
}
.qask-ic svg { width: 19px; height: 19px; }
.qask-q { color: #141414; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.qask-a { color: #9A9A9A; font-size: 13px; margin-top: 2px; }

/* ===== Trader stories (light) ===== */
.qstories { background: #EFEFED; padding: clamp(72px, 10vh, 120px) var(--pad, 40px); }
.qask-head { text-align: center; margin-bottom: 52px; }
.qstories-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1360px; margin: 0 auto 20px;
  align-items: stretch;
}
.qstories-grid .story-card { width: auto; min-width: 0; }
.qstories-fine { text-align: center; color: #9A9A9A; font-size: 12.5px; }

/* ===== FAQ (light) ===== */
.qfaq { background: #F5F5F3; padding: clamp(72px, 10vh, 120px) var(--pad, 40px); }
.qfaq-grid { display: flex; gap: 64px; max-width: 1360px; margin: 0 auto; align-items: flex-start; }
.qfaq-left { flex: 0 0 36%; }
.qfaq-list { flex: 1; }

/* ===== Quiz modal ===== */
.quiz-modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(12, 12, 12, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.quiz-modal.open { display: block; }
.quiz-modal-frame { position: absolute; inset: 0; }
.quiz-modal iframe { width: 100%; height: 100%; border: 0; display: block; }
body.modal-open { overflow: hidden; }

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .qhero-body { flex-direction: column; align-items: flex-start; }
  .qhero-art { width: 100%; }
  .qwhy-grid, .qstories-grid { grid-template-columns: 1fr; max-width: 560px; }
  .qask-grid, .qfaq-grid { flex-direction: column; gap: 40px; }
}
@media (max-width: 560px) {
  .qhero .ctas .btn { width: 100%; justify-content: center; }
  .qhero-wedge { width: 100%; }
  .qw-line { font-size: 13px; }
}