:root { --bg: #111214; --panel: #191b1e; --panel-2: #222529; --line: #32363b; --text: #f4f4f2; --muted: #92979d; --accent: #f28c28; --accent-2: #ffaa4c; } * { box-sizing: border-box; } html { color-scheme: dark; } body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color: inherit; text-decoration: none; } button { font: inherit; } .seo-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 32px; border-bottom: 1px solid var(--line); background: rgba(17, 18, 20, 0.97); } .seo-brand { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 800; } .seo-logo { display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; } .seo-logo i { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } .seo-logo i:nth-child(2), .seo-logo i:nth-child(3) { background: var(--accent-2); } .seo-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: 13px; } .seo-nav a:hover { color: var(--text); } .seo-nav .seo-nav-cta { padding: 9px 14px; color: #111214; border-radius: 8px; background: var(--accent); font-weight: 800; } .seo-main { overflow: hidden; } .seo-hero { width: min( 1180px, calc(100% - 40px) ); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr); align-items: center; gap: 64px; padding: 90px 0 82px; } .seo-eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 0.15em; } .seo-hero h1 { max-width: 760px; margin: 0; font-size: clamp( 46px, 7vw, 78px ); line-height: 0.98; letter-spacing: -0.055em; } .seo-lead { max-width: 660px; margin: 24px 0 0; color: var(--muted); font-size: clamp( 17px, 2vw, 20px ); line-height: 1.6; } .seo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .seo-primary, .seo-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 9px; font-size: 14px; font-weight: 800; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; } .seo-primary { color: #111214; background: var(--accent); } .seo-secondary { color: var(--text); border: 1px solid var(--line); background: var(--panel); } .seo-primary:hover, .seo-secondary:hover { transform: translateY(-1px); } .seo-secondary:hover { border-color: #50555c; } .seo-demo { position: relative; min-height: 410px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient( 145deg, var(--panel), #151719 ); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28); } .seo-demo-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .seo-demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #3b3f44; } .seo-demo-address { min-width: 0; flex: 1; margin-left: 6px; padding: 8px 11px; overflow: hidden; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: var(--bg); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; } .seo-demo-grid { height: 330px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; } .seo-demo-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient( 135deg, #24272b, #17191c ); } .seo-demo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.34), transparent 55% ); } .seo-demo-play { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #111214; background: var(--accent); font-size: 16px; } .seo-demo-label { position: absolute; z-index: 2; left: 11px; bottom: 10px; color: #d7d9db; font-size: 10px; letter-spacing: 0.04em; } .seo-demo-card.accent { background: radial-gradient( circle at 60% 40%, rgba(242, 140, 40, 0.20), transparent 50% ), linear-gradient( 135deg, #282a2d, #17191c ); } .seo-sources { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); } .seo-sources-inner { width: min( 1180px, calc(100% - 40px) ); min-height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } .seo-chip { padding: 8px 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 12px; } .seo-section { width: min( 1040px, calc(100% - 40px) ); margin: 0 auto; padding: 86px 0; } .seo-section-heading { max-width: 720px; margin-bottom: 40px; } .seo-section-heading h2 { margin: 0; font-size: clamp( 32px, 5vw, 48px ); letter-spacing: -0.045em; } .seo-section-heading p { margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; } .seo-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .seo-feature-card { min-height: 210px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); } .seo-feature-number { display: inline-flex; margin-bottom: 34px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; } .seo-feature-card h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.025em; } .seo-feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .seo-usecases { background: var(--panel); } .seo-usecases .seo-section { padding: 78px 0; } .seo-usecase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .seo-usecase { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .seo-usecase strong { display: block; margin-bottom: 8px; } .seo-usecase span { color: var(--muted); font-size: 14px; line-height: 1.55; } .seo-faq { display: grid; gap: 10px; } .seo-faq details { padding: 20px 22px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); } .seo-faq summary { cursor: pointer; font-weight: 750; } .seo-faq p { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; } .seo-final { width: min( 1040px, calc(100% - 40px) ); margin: 0 auto 90px; padding: 48px; border: 1px solid rgba( 242, 140, 40, 0.32 ); border-radius: 18px; background: radial-gradient( circle at 80% 10%, rgba(242, 140, 40, 0.14), transparent 40% ), var(--panel); } .seo-final h2 { max-width: 650px; margin: 0; font-size: clamp( 30px, 5vw, 48px ); letter-spacing: -0.045em; } .seo-final p { max-width: 650px; margin: 16px 0 26px; color: var(--muted); line-height: 1.65; } .seo-footer { border-top: 1px solid var(--line); color: var(--muted); } .seo-footer-inner { width: min( 1180px, calc(100% - 40px) ); min-height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; } .seo-footer nav { display: flex; flex-wrap: wrap; gap: 18px; } .seo-footer a:hover { color: var(--text); } @media ( max-width: 900px ) { .seo-hero { grid-template-columns: 1fr; gap: 42px; padding-top: 64px; } .seo-demo { min-height: 380px; } .seo-feature-grid { grid-template-columns: 1fr; } } @media ( max-width: 650px ) { .seo-header { align-items: flex-start; flex-direction: column; padding: 18px 20px; } .seo-nav { width: 100%; } .seo-hero { width: calc(100% - 28px); padding: 50px 0 58px; } .seo-hero h1 { font-size: clamp( 42px, 14vw, 64px ); } .seo-demo { min-height: 310px; padding: 12px; } .seo-demo-grid { height: 260px; } .seo-section { width: calc(100% - 28px); padding: 64px 0; } .seo-usecase-grid { grid-template-columns: 1fr; } .seo-final { width: calc(100% - 28px); margin-bottom: 64px; padding: 30px 24px; } .seo-footer-inner { width: calc(100% - 28px); align-items: flex-start; flex-direction: column; padding: 26px 0; } }