:root { --bg:#0B0B0C; --surface:#121110; --card:#151412; --line:#211F1C; --line2:#2A2722; --text:#F3F1EC; --muted:#9A958D; --muted2:#716C63; --accent:#D9663D; --accent2:#E8835E; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--text); }
h1, h2, h3, .display { font-family: 'Space Grotesk', system-ui, sans-serif; margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }
img { max-width: 100%; display: block; height: auto; }
.shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
::selection { background: var(--accent); color: var(--bg); }
.mono { font-family: 'IBM Plex Mono', monospace; }
.wrap { max-width: 1180px; margin: 0 auto; width: 100%; padding-left: 48px; padding-right: 48px; }
.btn-primary { background: var(--accent); color: var(--bg); font-weight: 600; border-radius: 10px; padding: 15px 30px; font-size: 16px; display: inline-block; }
.btn-primary:hover { background: var(--accent2); color: var(--bg); }
.btn-secondary { border: 1px solid #3A362F; color: var(--text); font-weight: 600; border-radius: 10px; padding: 15px 30px; font-size: 16px; display: inline-block; }
nav { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 48px; background: rgba(11,11,12,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.navlinks { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.navlinks a { color: #C9C4BB; font-size: 14.5px; font-weight: 500; }
.gh-link { display: flex; align-items: center; gap: 7px; border: 1px solid #332F2A; padding: 7px 14px; border-radius: 8px; }
.brand { display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:var(--text); }
.brand .mark { width:30px;height:30px;border-radius:8px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;color:var(--bg);font-weight:700;font-size:15px; }
.hero { padding: 96px 48px 72px; display: flex; flex-direction: column; align-items: center; text-align: center; background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(217,102,61,0.14), transparent); }
.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #332F2A; background: #151412; padding: 7px 16px; border-radius: 100px; font-size: 13px; color: #B8B2A8; margin-bottom: 28px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.hero h1 { font-size: 62px; line-height: 1.08; font-weight: 700; max-width: 900px; margin: 0 0 24px; letter-spacing: -0.5px; }
.hero p.lead { font-size: 19px; line-height: 1.6; color: #B8B2A8; max-width: 640px; margin: 0 0 40px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.browser-frame { max-width: 1180px; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #171512; border-bottom: 1px solid var(--line2); }
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: #45413A; }
.stats { padding: 0 48px 96px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stat { text-align: center; }
.stat .num { font-size: 36px; font-weight: 700; color: var(--accent); }
.stat .label { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.section-head { text-align: center; margin-bottom: 48px; }
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent); margin-bottom: 12px; letter-spacing: 1px; }
.section-head h2 { font-size: 38px; font-weight: 700; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.feature-card { background: var(--surface); padding: 32px; }
.feature-card h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
.feature-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.showcase { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; margin-bottom: 96px; }
.showcase.rev { flex-wrap: wrap-reverse; }
.showcase img { border-radius: 12px; border: 1px solid var(--line2); }
.showcase .media { flex: 1 1 420px; min-width: 0; }
.showcase .copy { flex: 1 1 360px; min-width: 0; }
.showcase .copy h3 { font-size: 25px; font-weight: 700; margin: 0 0 12px; }
.showcase .copy p { font-size: 15.5px; color: var(--muted); line-height: 1.7; margin: 0; }
.notice { border: 1px solid #332F2A; background: var(--card); border-radius: 14px; padding: 28px 32px; display: flex; gap: 18px; }
.notice p { margin: 0; font-size: 14.5px; color: #B8B2A8; line-height: 1.7; }
.faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-item { background: var(--surface); padding: 24px 28px; }
.faq-item h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.faq-item p { font-size: 14.5px; color: var(--muted); line-height: 1.7; margin: 0; }
footer { padding: 48px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
footer .foot-links { display: flex; gap: 28px; flex-wrap: wrap; row-gap: 10px; }
footer .foot-links a { font-size: 13.5px; color: #B8B2A8; }

/* Legal / content pages */
.legal { max-width: 820px; margin: 0 auto; padding: 72px 48px 96px; }
.legal .eyebrow { text-align: left; }
.legal h1 { font-size: 40px; font-weight: 700; margin: 10px 0 8px; }
.legal .updated { font-size: 13.5px; color: var(--muted2); margin-bottom: 48px; }
.legal h2 { font-size: 22px; font-weight: 700; margin: 44px 0 14px; }
.legal p { font-size: 15.5px; line-height: 1.75; color: #C9C4BB; margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { font-size: 15.5px; line-height: 1.75; color: #C9C4BB; margin-bottom: 8px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal .back { display: inline-block; margin-bottom: 32px; font-size: 14px; color: var(--muted); }

@media (max-width: 860px) {
  .wrap, nav, .hero, .stats, .section-head, footer, .legal { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 40px; }
  .feature-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .legal h1 { font-size: 30px; }
}