:root { color-scheme: dark; --bg:#0b0b0c; --surface:#0f1012; --surface-2:#14161a; --border:#292c31; --text:#f0f1f2; --muted:#a6aab0; --orange:#ff4500; --focus:#ff8a5b; --success:#43d17a; --danger:#ff6b6b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.shell { width:min(1280px,calc(100% - 48px)); margin:0 auto; }
.site-header { position:sticky; z-index:20; top:0; display:flex; height:64px; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); padding:0 max(24px,calc((100vw - 1280px)/2)); background:rgba(11,11,12,.86); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:750; letter-spacing:-.2px; }
.brand img { width:26px; height:26px; border-radius:50%; }
nav { display:flex; align-items:center; gap:26px; color:var(--muted); font-size:13px; }
nav a:hover { color:var(--text); }
.nav-cta { border:1px solid var(--border); border-radius:9px; padding:7px 12px; background:var(--surface-2); color:var(--text); }
.hero { display:grid; min-height:690px; grid-template-columns:minmax(0,1fr) minmax(440px,.88fr); align-items:center; gap:72px; padding-top:64px; padding-bottom:72px; }
.eyebrow { margin:0 0 16px; color:#ff7540; font-size:11px; font-weight:800; letter-spacing:.16em; }
.hero h1 { max-width:720px; margin:0; font-size:clamp(48px,5.6vw,80px); line-height:.98; letter-spacing:-.055em; }
.lede { max-width:620px; margin:28px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }
.hero-actions { display:flex; gap:12px; margin-top:34px; }
.button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; border:1px solid transparent; border-radius:10px; padding:0 17px; cursor:pointer; font-weight:720; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.button:hover { transform:translateY(-1px); }
.button.primary { background:var(--orange); color:white; }
.button.primary:hover { background:#ff5d20; }
.button.secondary { border-color:var(--border); background:var(--surface-2); }
.trust-row { display:flex; flex-wrap:wrap; gap:10px 20px; margin:42px 0 0; padding:0; color:#777d85; font-size:12px; list-style:none; }
.trust-row li::before { content:""; display:inline-block; width:5px; height:5px; margin:0 8px 2px 0; border-radius:50%; background:#4f555d; }
.preview-stage { position:relative; padding:42px 0; }
.preview-stage::before { content:""; position:absolute; inset:6% -10%; background:radial-gradient(circle at 50% 50%,rgba(255,69,0,.18),transparent 62%); filter:blur(16px); }
.preview-card { position:relative; overflow:hidden; border:1px solid #34373c; border-radius:22px; background:#f8f8f8; color:#191b1e; box-shadow:0 38px 110px rgba(0,0,0,.55); transform:rotate(1.3deg); }
.preview-accent { height:7px; background:var(--orange); }
.preview-inner { padding:28px 32px 26px; }
.preview-source { display:flex; align-items:center; gap:9px; color:#656b72; font-size:12px; font-weight:700; }
.preview-source img { width:24px; height:24px; border-radius:50%; }
.preview-source b { margin-left:auto; border-radius:999px; padding:6px 9px; background:#eceef0; font-size:10px; }
.preview-card h2 { margin:22px 0 16px; font-size:29px; line-height:1.13; letter-spacing:-.035em; }
.preview-card p { margin:0; color:#43484e; font-size:16px; line-height:1.55; }
.preview-image { margin-top:22px; border:1px solid #d7dadd; border-radius:12px; padding:12px; background:#16181c; }
.window-dots { display:flex; gap:5px; }
.window-dots i { width:6px; height:6px; border-radius:50%; background:#545a62; }
.preview-lines { display:grid; gap:9px; margin:24px 9px 14px; }
.preview-lines span { height:8px; border-radius:4px; background:#353942; }
.preview-lines span:nth-child(2) { width:72%; }
.preview-lines span:nth-child(3) { width:86%; }
.preview-card footer { display:flex; gap:22px; margin-top:22px; border-top:1px solid #dedfe1; padding-top:18px; color:#666c73; font-size:11px; font-weight:700; }
.preview-card footer span:last-child { margin-left:auto; }
.tool-section { padding:88px 0; border-top:1px solid var(--border); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:28px; }
.section-heading h2,.integration h2 { margin:0; font-size:34px; line-height:1.14; letter-spacing:-.035em; }
.section-heading > p { max-width:440px; margin:0; color:var(--muted); font-size:13px; text-align:right; }
.tool-layout { display:grid; grid-template-columns:390px minmax(0,1fr); overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.tool-panel { padding:28px; border-right:1px solid var(--border); }
.tool-panel label { display:block; margin:0 0 8px; color:#c2c5ca; font-size:12px; font-weight:700; }
.tool-panel input,.tool-panel select { width:100%; height:44px; border:1px solid var(--border); border-radius:10px; outline:0; padding:0 13px; background:var(--surface-2); color:var(--text); }
.tool-panel input:focus,.tool-panel select:focus { border-color:var(--focus); box-shadow:0 0 0 3px rgba(255,138,91,.14); }
.field-row { display:grid; grid-template-columns:1fr 1.25fr; align-items:end; gap:14px; margin:18px 0; }
.check-row { display:flex!important; height:44px; align-items:center; gap:9px; margin:0!important; border:1px solid var(--border); border-radius:10px; padding:0 12px; background:var(--surface-2); }
.check-row input { width:16px; height:16px; accent-color:var(--orange); }
.submit { width:100%; margin-top:18px; }
.form-note { margin:12px 0 0; color:#797f87; font-size:11px; }
.status { min-height:20px; margin-top:14px; color:var(--muted); font-size:12px; }
.status.error { color:var(--danger); }
.status.success { color:var(--success); }
.result-panel { min-height:520px; padding:28px; background:#0d0e10; }
.empty-result { display:flex; height:100%; min-height:462px; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #2e3238; border-radius:10px; text-align:center; }
.empty-result > span { border:1px solid var(--border); border-radius:8px; padding:5px 9px; color:#737981; font:11px ui-monospace,monospace; }
.empty-result h3 { margin:18px 0 6px; font-size:16px; }
.empty-result p { max-width:390px; margin:0; color:var(--muted); font-size:12px; }
.result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.result-item { overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.result-item img { display:block; width:100%; height:260px; object-fit:contain; background:#e9ecee; }
.result-item div { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; }
.result-item span { color:var(--muted); font-size:11px; text-transform:capitalize; }
.result-item a { font-size:11px; font-weight:700; }
.capabilities { padding:88px 0; border-top:1px solid var(--border); }
.section-heading.compact { margin-bottom:34px; }
.capability-list { border-top:1px solid var(--border); }
.capability-list article { display:grid; grid-template-columns:70px 1fr; gap:24px; border-bottom:1px solid var(--border); padding:28px 0; }
.capability-list article > span { color:#666c74; font:12px ui-monospace,monospace; }
.capability-list h3 { margin:0 0 6px; font-size:17px; }
.capability-list p { margin:0; color:var(--muted); }
.integration { display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; padding:96px 0; border-top:1px solid var(--border); }
.integration-copy > p:not(.eyebrow) { max-width:530px; margin:20px 0 28px; color:var(--muted); font-size:16px; }
.code-panel { overflow:hidden; border:1px solid var(--border); border-radius:12px; background:#08090a; }
.code-tabs { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); padding:11px 14px; color:var(--muted); font-size:11px; }
.code-tabs button { border:0; background:transparent; color:#d5d7da; cursor:pointer; }
pre { overflow:auto; margin:0; padding:24px; color:#d7d9dd; font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }
.site-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding-top:34px; padding-bottom:42px; }
.site-footer > div { display:flex; gap:18px; }
.site-footer span,.site-footer a { color:var(--muted); font-size:12px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:28px; padding-top:90px; } .preview-stage { width:min(600px,100%); margin:0 auto; } .tool-layout { grid-template-columns:1fr; } .tool-panel { border-right:0; border-bottom:1px solid var(--border); } .integration { grid-template-columns:1fr; gap:36px; } }
@media (max-width:620px) { .shell { width:min(100% - 32px,1280px); } .site-header { padding:0 16px; } nav a:not(.nav-cta) { display:none; } .hero { min-height:0; padding-top:64px; padding-bottom:56px; } .hero h1 { font-size:45px; } .lede { font-size:16px; } .preview-stage { padding:12px 0; } .preview-inner { padding:24px 22px; } .preview-card h2 { font-size:23px; } .section-heading { display:block; } .section-heading > p { margin-top:12px; text-align:left; } .tool-section,.capabilities,.integration { padding:64px 0; } .field-row { grid-template-columns:1fr; } .result-grid { grid-template-columns:1fr; } .site-footer { display:block; } .site-footer > div:last-child { flex-wrap:wrap; margin-top:16px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }