:root { --base:#f2f4fb; --surface:#fff; --elevated:#f8f9fd; --hover:#eceef8; --border:#dde0ee; --border-subtle:#e8eaf5; --accent:#6366f1; --accent-deep:#4f46e5; --accent-soft:rgba(99,102,241,.1); --text:#1a1d2e; --secondary:#5b6080; --muted:#9498b8; --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--base); font-family:var(--ui); line-height:1.5; } a { color:inherit; text-decoration:none; }
.site-header { height:76px; max-width:1240px; padding:0 32px; margin:auto; display:flex; align-items:center; justify-content:space-between; } .brand { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:720; letter-spacing:-.02em; } .brand-mark { width:32px; height:32px; background:var(--accent); border-radius:8px; display:grid; place-items:center; box-shadow:0 3px 9px rgba(99,102,241,.27); overflow:hidden; } .brand-mark img { width:21px; height:21px; object-fit:contain; } nav { display:flex; gap:28px; margin-left:auto; margin-right:26px; } nav a, footer a:not(.brand) { color:var(--secondary); font-size:13px; font-weight:580; } nav a:hover, footer a:not(.brand):hover { color:var(--accent); }
.button { border:1px solid var(--accent); background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:11px; border-radius:8px; min-height:48px; padding:0 19px; font-size:14px; font-weight:700; box-shadow:0 5px 16px rgba(99,102,241,.22); transition:.18s ease; } .button:hover { background:var(--accent-deep); transform:translateY(-1px); box-shadow:0 8px 20px rgba(79,70,229,.27); } .button-small { min-height:38px; padding:0 13px; font-size:12px; }.button-icon,.text-link-icon { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.text-link-icon { width:14px; height:14px; vertical-align:-2px; margin-left:4px; }
.hero { max-width:1240px; min-height:650px; padding:78px 32px 98px; margin:auto; display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:75px; } .eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.11em; font:700 10px var(--mono); margin:0 0 17px; } .status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; background:#16a34a; border-radius:50%; box-shadow:0 0 0 4px rgba(22,163,74,.12); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(42px,4.3vw,60px); letter-spacing:-.065em; line-height:1.04; margin-bottom:23px; white-space:nowrap; } h1 em { color:var(--accent); font-style:normal; } .hero-text { color:var(--secondary); max-width:490px; font-size:17px; line-height:1.65; } .hero-actions { margin-top:31px; display:flex; align-items:center; gap:24px; } .text-link { color:var(--secondary); font-size:13px; font-weight:700; } .text-link:hover { color:var(--accent); } .meta { font-size:12px; color:var(--muted); margin-top:20px; }
.app-preview { width:100%; max-width:555px; min-height:500px; background:var(--surface); border:1px solid var(--border); box-shadow:0 24px 55px rgba(37,44,85,.13),0 3px 8px rgba(37,44,85,.05); border-radius:14px; position:relative; overflow:hidden; transform:rotate(1.4deg); } .preview-topbar { height:37px; background:var(--elevated); border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; padding:0 13px; gap:5px; } .preview-topbar span { width:7px; height:7px; border-radius:50%; background:#c3c7da; } .preview-topbar p { margin:0 auto; padding-right:23px; color:var(--secondary); font:600 10px var(--mono); } .preview-body { display:flex; height:463px; } .preview-sidebar { width:66px; border-right:1px solid var(--border); padding:10px 7px; display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; } .preview-brand { width:38px; height:38px; display:grid; place-items:center; border-radius:9px; overflow:hidden; background:var(--accent); margin-bottom:7px; box-shadow:0 3px 8px rgba(99,102,241,.22); }.preview-brand img { width:25px; height:25px; }.preview-icon { color:#8e94b5; width:39px; height:32px; display:grid; place-items:center; border-radius:7px; margin-top:2px; } .preview-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.preview-sidebar small { color:#858bac; font-size:7px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; line-height:1; margin-bottom:3px; }.preview-icon.active { background:var(--accent-soft); color:var(--accent); } .preview-icon.active + small { color:var(--accent); }.preview-panel { padding:17px 18px; flex:1; overflow:hidden; } .preview-heading { display:flex; justify-content:space-between; align-items:start; border-bottom:1px solid var(--border-subtle); padding-bottom:12px; } .preview-heading b { display:block; font-size:16px; letter-spacing:-.03em; } .preview-heading small { font-size:9px; color:var(--secondary); display:block; margin-top:1px; } kbd { border:1px solid var(--border); border-radius:4px; padding:2px 4px; color:var(--muted); font:600 7px var(--mono); background:var(--elevated); white-space:nowrap; } .preview-label { margin:13px 0 7px; color:#9096b6; text-transform:uppercase; letter-spacing:.09em; font:700 8px var(--mono); }.preview-label.lower { margin-top:14px;}.preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.tool-card,.wide-card { border:1px solid var(--border); box-shadow:0 2px 4px rgba(39,47,88,.08); background:#fff; border-radius:8px; min-height:45px; padding:7px; display:grid; grid-template-columns:21px 1fr auto; align-items:center; gap:5px; color:var(--text); font-size:9px; font-weight:650; line-height:1.25; }.tool-card i { width:21px; height:21px; display:grid; place-items:center; border:1px solid #e1e4f2; border-radius:6px; color:#6971a8; font-style:normal; text-align:center; }.tool-card i svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }.diagnostic-grid .tool-card { min-height:42px; }.preview-glow { position:absolute; width:220px; height:220px; right:-120px; bottom:-145px; background:rgba(99,102,241,.12); filter:blur(25px); border-radius:50%; }
.feature-section { background:var(--surface); padding:109px 32px 118px; }.section-intro { max-width:1176px; margin:0 auto 43px; }.section-intro h2,.workflow h2,.cta h2,.tool-catalogue h2 { font-size:clamp(30px,3.8vw,48px); line-height:1.1; letter-spacing:-.055em; margin:0; }.feature-grid { max-width:1176px; margin:auto; display:grid; grid-template-columns:repeat(6,1fr); gap:13px; }.feature-card { grid-column:span 2; background:var(--elevated); border:1px solid var(--border-subtle); padding:25px; border-radius:12px; min-height:268px; }.feature-card-large { grid-column:span 2; background:var(--text); color:#fff; }.feature-card-wide { grid-column:span 3; min-height:250px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }.card-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:var(--accent-soft); color:var(--accent); }.card-icon svg,.catalogue-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.feature-card-large .card-icon { background:rgba(255,255,255,.1); color:#c7c8ff; }.card-number { margin:32px 0 7px; color:var(--muted); font:700 10px var(--mono); }.feature-card h3 { margin:0 0 8px; font-size:18px; letter-spacing:-.035em; }.feature-card p:not(.card-number) { color:var(--secondary); font-size:13px; line-height:1.62; margin-bottom:0; }.feature-card-large p:not(.card-number) { color:#babcd0; }.command-line { border:1px solid rgba(255,255,255,.15); margin-top:24px; border-radius:7px; color:#c9cbed; padding:8px 9px; display:flex; gap:7px; align-items:center; font:10px var(--mono); }.command-line span:first-child { color:#9fa1ff; font-weight:bold; }.command-line kbd { margin-left:auto; background:#34364c; border-color:#45475d; }.ruler { border-top:1px solid #bfc3d9; height:36px; display:flex; justify-content:space-between; position:relative; margin:26px -25px -25px; padding:10px 16px 0; color:var(--muted); font:9px var(--mono); background:repeating-linear-gradient(90deg,transparent,transparent 25px,#dce0ee 26px); }.ruler:before { content:""; position:absolute; inset:-8px 0 auto; height:8px; background:repeating-linear-gradient(90deg,transparent,transparent 12px,#bfc3d9 13px); }.sidepanel-demo { margin-top:20px; display:grid; grid-template-columns:1fr 122px; height:66px; border:1px solid var(--border); border-radius:7px; overflow:hidden; background:linear-gradient(110deg,#fdfdff,#f0f1f8); }.sidepanel-demo span { border-right:1px solid var(--border); position:relative; }.sidepanel-demo span:after { content:""; display:block; width:45%; height:4px; background:#d6d8e8; border-radius:3px; margin:13px 10px; }.sidepanel-demo span:last-child { background:#eceeff; border:0; }.sidepanel-demo span:last-child:after { background:#989cf5; }
.tool-catalogue { max-width:1176px; margin:auto; padding:114px 32px 117px; display:grid; grid-template-columns:.83fr 1.17fr; gap:85px; }.catalogue-intro > p:not(.eyebrow) { color:var(--secondary); font-size:14px; line-height:1.65; max-width:370px; margin:22px 0 0; }.catalogue-list { border-top:1px solid var(--border); }.catalogue-group { padding:22px 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:39px 1fr; gap:16px; }.catalogue-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:var(--accent); background:var(--accent-soft); }.catalogue-group h3 { margin:0 0 4px; font-size:16px; letter-spacing:-.025em; }.catalogue-group p { font-size:12px; color:var(--secondary); line-height:1.58; margin:0 0 10px; }.catalogue-group ul { display:flex; padding:0; margin:0; gap:7px 12px; list-style:none; flex-wrap:wrap; }.catalogue-group li { color:#737994; font:600 9px var(--mono); }.catalogue-group li:before { content:"+ "; color:var(--accent); }
.workflow { background:var(--base); padding:114px 32px; display:grid; grid-template-columns:1fr 1fr; gap:80px; }.workflow > * { width:100%; max-width:548px; }.workflow > div { justify-self:end; }.workflow ol { list-style:none; margin:0; padding:0; }.workflow li { display:flex; gap:21px; padding:20px 0; border-top:1px solid var(--border); }.workflow li:last-child { border-bottom:1px solid var(--border); }.workflow li > span { color:var(--accent); font:700 11px var(--mono); padding-top:4px; }.workflow h3 { font-size:16px; margin:0 0 4px; letter-spacing:-.025em; }.workflow li p { color:var(--secondary); font-size:13px; margin:0; }.cta { background:var(--text); color:white; padding:110px 32px 116px; text-align:center; }.cta .eyebrow { color:#b6b8ff; }.cta h2 { margin-bottom:28px; }.cta .button { background:#fff; color:var(--accent-deep); border-color:#fff; box-shadow:none; }.cta .button:hover { background:#eceeff; }
footer { max-width:1240px; min-height:112px; margin:auto; padding:28px 32px; display:flex; align-items:center; gap:25px; } footer p { color:var(--muted); font-size:12px; margin:0 auto 0 0; } footer .brand-mark { width:27px; height:27px; border-radius:7px; } footer .brand-mark img { width:18px; height:18px; }
@media (max-width:800px) { .site-header { padding:0 20px; height:68px; } nav { display:none; }.site-header .button-small { margin-left:auto; }.hero { grid-template-columns:1fr; padding:67px 24px 70px; gap:60px; }.hero-copy { max-width:580px; }.app-preview { justify-self:center; transform:none; }.feature-section { padding:75px 20px; }.feature-grid { grid-template-columns:1fr 1fr; }.feature-card,.feature-card-large,.feature-card-wide { grid-column:span 1; }.feature-card-wide { grid-column:span 2; }.tool-catalogue { padding:75px 24px; grid-template-columns:1fr; gap:42px; }.workflow { padding:75px 24px; grid-template-columns:1fr; gap:43px; }.workflow > div { justify-self:start; }.cta { padding:80px 20px; } footer { padding:25px 20px; gap:15px; flex-wrap:wrap; } footer p { order:3; flex-basis:100%; } }
@media (max-width:480px) { .brand { font-size:12px; }.site-header .button-small { font-size:0; min-width:38px; padding:0; }.site-header .button-small .button-icon { width:15px; height:15px; }.hero { padding-left:20px; padding-right:20px; }.hero h1 { white-space:normal; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.app-preview { min-height:485px; }.preview-body { height:448px; }.preview-panel { padding:15px 10px; }.preview-sidebar { width:51px; padding-left:5px; padding-right:5px; }.preview-brand { width:34px; height:34px; }.preview-brand img { width:22px; height:22px; }.preview-icon { width:34px; }.preview-sidebar small { font-size:6px; }.tool-card { font-size:7px; padding:5px; grid-template-columns:18px 1fr auto; }.tool-card i { width:18px; height:18px; }.tool-card i svg { width:11px; height:11px; }.diagnostic-grid .tool-card { min-height:38px; }.feature-grid { grid-template-columns:1fr; }.feature-card,.feature-card-large,.feature-card-wide { grid-column:span 1; }.feature-card { min-height:230px; }.feature-card-wide { min-height:230px; }.sidepanel-demo { margin-top:10px; }.tool-catalogue,.workflow { padding-left:20px; padding-right:20px; }.catalogue-group ul { display:block; }.catalogue-group li { margin:0 0 4px; } }