@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
:root { --bg:#12110f; --surface:#1b1916; --elevated:#27231f; --interactive:#302b26; --accent:#b8f34a; --accent-ink:#111509; --text:#faf8f3; --muted:#b8b0a5; --line:#403b35; --danger:#ff6b67; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:var(--bg); color:var(--text); font:14px/1.5 'IBM Plex Sans',system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { width:min(1240px,calc(100% - 40px)); height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; margin:auto; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.025em; }
.brand-mark { position:relative; width:31px; height:31px; border:1px solid #5b554d; border-radius:8px; }
.brand-mark::before,.brand-mark::after { content:''; position:absolute; width:7px; height:7px; border-color:var(--accent); }
.brand-mark::before { left:5px; top:5px; border-left:2px solid var(--accent); border-top:2px solid var(--accent); }
.brand-mark::after { right:5px; bottom:5px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); }
.brand-mark i { position:absolute; left:13px; top:13px; width:4px; height:4px; border-radius:50%; background:var(--accent); }
.site-header nav,.nav-actions { display:flex; align-items:center; gap:28px; }.site-header nav a,.text-link { color:var(--muted); font-size:12px; }.site-header nav a:hover,.text-link:hover { color:var(--text); }
.button,.secondary-button { min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; border-radius:9px; font-size:12px; font-weight:700; }
.button { border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 30px rgba(184,243,74,.1); }.button:hover { transform:translateY(-1px); box-shadow:0 13px 35px rgba(184,243,74,.17); }.button.small { min-height:36px; padding:0 14px; font-size:11px; }.button.large { min-height:50px; padding:0 22px; }
.secondary-button { border:1px solid var(--line); background:var(--elevated); color:var(--text); }.secondary-button:hover { border-color:#5b554d; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0; color:var(--accent); font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.13em; text-transform:uppercase; }.eyebrow span { width:18px; height:1px; background:var(--accent); }
.hero { width:min(1240px,calc(100% - 40px)); min-height:720px; display:grid; grid-template-columns:.85fr 1.25fr; align-items:center; gap:68px; margin:auto; padding:82px 0 92px; }
.hero-copy h1 { margin:23px 0; font-size:clamp(48px,5.3vw,78px); line-height:.98; letter-spacing:-.064em; }.hero-copy h1 em { display:block; color:var(--accent); font-style:normal; }.hero-copy>p { max-width:520px; color:var(--muted); font-size:17px; line-height:1.7; }.hero-actions { display:flex; gap:10px; margin-top:31px; }.requirements { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; color:#79736a; font-size:9px; }.requirements i { width:3px; height:3px; border-radius:50%; background:var(--line); }
.product-stage { position:relative; min-width:0; }.stage-glow { position:absolute; inset:8% -8%; background:radial-gradient(circle,rgba(184,243,74,.13),transparent 64%); filter:blur(25px); }.mock-window { position:relative; overflow:hidden; border:1px solid #4a443d; border-radius:15px; background:#161411; box-shadow:0 45px 100px rgba(0,0,0,.6); transform:perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.window-bar { height:47px; display:flex; align-items:center; gap:10px; padding:0 13px; border-bottom:1px solid #38332e; background:#211e1a; }.window-bar>span { color:#928b81; font-size:9px; }.window-bar>button { margin-left:auto; padding:6px 11px; border:0; border-radius:6px; background:var(--accent); color:var(--accent-ink); font-size:8px; font-weight:800; }.lights { display:flex; gap:5px; }.lights i { width:8px; height:8px; border:1px solid #5d564d; border-radius:50%; }
.editor { display:grid; grid-template-columns:42px minmax(0,1fr) 142px; min-height:410px; }.tools { display:flex; flex-direction:column; align-items:center; gap:6px; padding:11px 5px; border-right:1px solid #342f2a; }.tools b { width:29px; height:29px; display:grid; place-items:center; border-radius:6px; color:#968f85; font-size:11px; }.tools b:first-child { background:rgba(184,243,74,.1); color:var(--accent); }.tools i { width:23px; height:1px; background:#37322d; }
.canvas { position:relative; display:grid; place-items:center; padding:35px 24px 54px; background-color:#0f0e0d; background-image:radial-gradient(#38332e 1px,transparent 1px); background-size:16px 16px; }.shot { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:7px; background:#f4f1ea; color:#20252c; box-shadow:0 18px 40px rgba(0,0,0,.4); }.shot-nav { height:14%; display:flex; align-items:center; justify-content:space-between; padding:0 7%; background:#fff; border-bottom:1px solid #dedbd3; font-size:7px; }.shot-nav strong { font-size:10px; }.shot-nav span { color:#747a82; }.shot-body { display:grid; grid-template-columns:1.1fr .9fr; height:86%; }.shot-body>div { padding:10% 8% 8% 11%; }.shot-body small { color:#747b84; font-size:5px; letter-spacing:.13em; }.shot-body h2 { max-width:10ch; margin:5% 0; font-size:clamp(18px,2.5vw,34px); line-height:1; letter-spacing:-.055em; }.shot-body p { color:#707780; font-size:7px; }.shot-body button { margin-top:6%; padding:6px 10px; border:0; border-radius:99px; background:#232a32; color:white; font-size:6px; }.shot-body aside { position:relative; background:#d9ded9; }.shot-body aside span { position:absolute; left:18%; top:18%; width:64%; height:64%; border-radius:13%; background:#2b343d; transform:rotate(-7deg); }.shot-body aside span::after { content:''; position:absolute; left:18%; top:17%; width:64%; height:12%; border-radius:99px; background:var(--accent); }
.annotation { position:absolute; left:5%; top:21%; width:45%; height:43%; border:2px solid #ff4f6d; border-radius:3px; }.annotation i { position:absolute; left:-11px; top:-11px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#ff4f6d; color:white; font-size:8px; font-style:normal; font-weight:700; }.note { position:absolute; left:7%; bottom:17%; padding:6px 8px; border-radius:4px; background:#ff4f6d; color:white; font-size:6px; font-weight:700; }.arrow { position:absolute; left:45%; top:42%; width:20%; height:2px; background:#ff4f6d; transform:rotate(-16deg); }.zoom { position:absolute; bottom:14px; padding:5px 9px; border:1px solid #3c3731; border-radius:7px; background:#221f1b; color:#9a9288; font:500 7px 'IBM Plex Mono'; }
.inspector { padding:15px 12px; border-left:1px solid #342f2a; background:#191714; }.inspector p { color:#777067; font:500 7px 'IBM Plex Mono'; letter-spacing:.1em; }.inspector>div { min-height:31px; display:flex; align-items:center; justify-content:space-between; color:#a29a90; font-size:7px; }.inspector code { color:#e5e0d8; font:500 7px 'IBM Plex Mono'; }.inspector hr { border:0; border-top:1px solid #37322d; }.color { width:15px; height:15px; border-radius:50%; background:#ff4f6d; }.line { width:38px; height:2px; background:#ff4f6d; }
.workflow { width:min(1160px,calc(100% - 40px)); display:grid; grid-template-columns:repeat(4,1fr); margin:0 auto 120px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.workflow article { position:relative; min-height:230px; padding:32px 25px; border-right:1px solid var(--line); }.workflow article:last-child { border:0; }.workflow article>span { position:absolute; right:19px; color:#5e5850; font:500 9px 'IBM Plex Mono'; }.workflow-icon { width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; color:var(--accent); background:var(--surface); }.workflow h3 { margin:25px 0 8px; font-size:14px; }.workflow p { color:var(--muted); font-size:11px; line-height:1.65; }
.feature-section,.pricing { width:min(1160px,calc(100% - 40px)); margin:0 auto 120px; }.section-copy { display:grid; grid-template-columns:.7fr 1fr; column-gap:60px; align-items:start; }.section-copy .eyebrow { grid-column:1/-1; margin-bottom:18px; }.section-copy h2,.pricing h2,.cta h2 { margin:0; font-size:clamp(36px,4.2vw,58px); line-height:1.02; letter-spacing:-.052em; }.section-copy>p:last-child { margin:4px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:54px; }.feature-grid article { min-height:220px; padding:26px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }.feature-grid small { color:var(--accent); font:500 9px 'IBM Plex Mono'; }.feature-grid h3 { margin:50px 0 10px; font-size:16px; }.feature-grid p { color:var(--muted); font-size:11px; line-height:1.7; }
.pricing { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }.pricing .eyebrow { margin-bottom:18px; }.price-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.price-cards article { min-height:275px; display:flex; flex-direction:column; padding:25px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }.price-cards article.featured { border-color:rgba(184,243,74,.43); background:linear-gradient(145deg,rgba(184,243,74,.07),var(--surface)); }.price-cards article>span { color:var(--accent); font:500 9px 'IBM Plex Mono'; text-transform:uppercase; }.price-cards strong { margin:35px 0 10px; font-size:18px; }.price-cards p { flex:1; color:var(--muted); font-size:11px; line-height:1.65; }.price-cards a { align-self:stretch; }
.cta { width:min(1160px,calc(100% - 40px)); margin:0 auto 90px; padding:80px clamp(25px,6vw,80px); border:1px solid var(--line); border-radius:18px; background:radial-gradient(circle at 85% 10%,rgba(184,243,74,.11),transparent 35%),var(--surface); text-align:center; }.cta .eyebrow { justify-content:center; }.cta h2 { max-width:800px; margin:20px auto; }.cta>p { max-width:580px; margin:0 auto 30px; color:var(--muted); font-size:15px; }.cta>div { display:flex; align-items:center; justify-content:center; gap:22px; }
footer { width:min(1240px,calc(100% - 40px)); min-height:120px; display:flex; align-items:center; gap:28px; margin:auto; border-top:1px solid var(--line); }footer>p { color:#777168; font-size:10px; }footer nav { display:flex; gap:22px; margin-left:auto; }footer nav a { color:var(--muted); font-size:10px; }
@media(max-width:950px){.hero{grid-template-columns:1fr;padding-top:65px}.hero-copy{max-width:700px}.workflow{grid-template-columns:1fr 1fr}.workflow article:nth-child(2){border-right:0}.workflow article:nth-child(-n+2){border-bottom:1px solid var(--line)}.section-copy,.pricing{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.feature-grid article{min-height:170px}.feature-grid h3{margin-top:35px}.price-cards{max-width:700px}.site-header nav{display:none}}
@media(max-width:620px){.site-header{width:calc(100% - 28px)}.nav-actions .text-link{display:none}.hero{width:calc(100% - 28px);padding:55px 0 75px}.hero-actions{align-items:stretch;flex-direction:column}.editor{grid-template-columns:34px 1fr}.inspector{display:none}.tools b{width:24px;height:24px}.workflow{width:calc(100% - 28px);grid-template-columns:1fr}.workflow article{border-right:0;border-bottom:1px solid var(--line)!important}.feature-section,.pricing,.cta{width:calc(100% - 28px)}.price-cards{grid-template-columns:1fr}.cta{padding:55px 20px}.cta>div{align-items:stretch;flex-direction:column}.cta .text-link{padding:10px}footer{width:calc(100% - 28px);align-items:flex-start;flex-direction:column;padding:35px 0}footer nav{margin-left:0}}