@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--lp-brand); text-decoration: none; }
a:hover { color: var(--lp-tx); }
button { font: inherit; }

#lp {
  --bg: #090D14; --bg2: #0C1119; --surf: #141A24; --surf2: #10161F; --sunk: #070A10;
  --bd: #222937; --bd2: #191F2B;
  --tx: #F2F5FA; --tb: #C2CBD9; --tm: #8B97AB; --ts: #667287;
  --lp-brand: #4C7CFF; --brandq: #1F5BFF; --on: #FFFFFF; --tint: rgba(76,124,255,0.10);
  --mint: #2ED3A7; --apricot: #FFB067; --violet: #A78BFA;
  min-height: 100vh;
  background: var(--bg);
  color: var(--tb);
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: -0.011em;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
#lp[data-t="light"] {
  --bg: #FFFFFF; --bg2: #F4F7FF; --surf: #FFFFFF; --surf2: #F7F9FD; --sunk: #EEF3FC;
  --bd: #E2E9F5; --bd2: #EDF1F8;
  --tx: #0A1020; --tb: #3E4A5C; --tm: #667488; --ts: #8592A6;
  --lp-brand: #1F5BFF; --brandq: #1F5BFF; --on: #FFFFFF; --tint: rgba(31,91,255,0.07);
  --mint: #12A67F; --apricot: #E0803A; --violet: #7C5CE0;
}
#lp[data-t="steel"] {
  --bg: #14161A; --bg2: #191C21; --surf: #1E2228; --surf2: #1A1D23; --sunk: #101216;
  --bd: #31363E; --bd2: #262A31;
  --tx: #F1F2F4; --tb: #C6CAD1; --tm: #8E949E; --ts: #6E747E;
  --lp-brand: #5B8CFF; --brandq: #2F63F0; --on: #FFFFFF; --tint: rgba(91,140,255,0.10);
  --mint: #4FC7A5; --apricot: #E9A15E; --violet: #9E8BE8;
}

#lp *::-webkit-scrollbar { width: 8px; height: 8px; }
#lp *::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 8px; }

/* ---- feature card hover ---- */
.feature-card { transition: transform 160ms var(--ease-out); }
.feature-card:hover { transform: translateY(-3px); }

/* ---- theme switch ---- */
.theme-btn {
  width: 26px; height: 22px; display: grid; place-items: center; border: 0;
  border-radius: 999px; background: transparent; color: var(--ts);
  font-size: 10px; font-weight: 700; font-family: var(--mono); cursor: pointer;
  transition: all 140ms var(--ease-out);
}
.theme-btn.active { background: var(--brandq); color: #fff; }

/* ---- code tabs ---- */
.code-tab {
  padding: 7px 11px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ts); cursor: pointer;
}
.code-tab.active { color: var(--tx); border-bottom-color: var(--brandq); }

/* ---- faq ---- */
.faq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.faq-q-text { flex: 1; font-size: 16.5px; font-weight: 600; color: var(--tx); letter-spacing: -0.02em; }
.faq-chevron { flex: none; color: var(--tm); transition: transform 160ms var(--ease-out); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 20px 20px; font-size: 15px; line-height: 1.7; color: var(--tm); max-width: 66ch; }
.faq-item.open .faq-a { display: block; }

@keyframes lp-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

@media (max-width: 1080px) {
  #lp [data-r~="shot"] { grid-template-columns: 1fr !important; min-height: 0 !important; }
  #lp [data-r~="rail"] { display: none !important; }
  #lp [data-r~="panel"] { border-left: 0 !important; border-top: 1px solid var(--bd2) !important; }
  #lp [data-r~="two"] { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 900px) {
  #lp [data-r~="nav"] { display: none !important; }
  #lp [data-r~="foot"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 640px) {
  #lp [data-r~="pad"] { padding-left: 18px !important; padding-right: 18px !important; }
  #lp [data-r~="sect"] { padding-top: 64px !important; padding-bottom: 56px !important; }
  #lp [data-r~="foot"] { grid-template-columns: 1fr !important; }
  #lp [data-r~="cmp"] { grid-template-columns: 1fr auto !important; row-gap: 4px !important; padding-left: 18px !important; padding-right: 18px !important; }
  #lp [data-r~="cmp"] > :nth-child(1) { grid-column: 1 / -1; }
  #lp [data-r~="cmp"] > :nth-child(2), #lp [data-r~="cmp"] > :nth-child(3) { text-align: left !important; }
  #lp [data-r~="cta"] { width: 100% !important; justify-content: center !important; }
  #lp [data-r~="hidesm"] { display: none !important; }
}