:root { --bg:#10091b; --surface:#1a1029; --surface-2:#24133a; --line:rgba(239,230,255,.16); --text:#fff; --muted:#c6bdd6; --accent:#c084fc; --accent-strong:#7c3aed; --ink:#fff; --max:1200px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:Manrope,Arial,sans-serif; } body:has(dialog[open]) { overflow:hidden; }
.site-shell { overflow:hidden; background:radial-gradient(circle at 78% 10%,rgba(133,72,216,.3),transparent 25%),radial-gradient(circle at 15% 72%,rgba(65,28,130,.22),transparent 28%),var(--bg); } .container { width:min(var(--max),calc(100% - 64px)); margin-inline:auto; }
.header { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; } .brand { display:flex; align-items:center; } .brand img { display:block; width:150px; height:auto; }
.nav { display:flex; align-items:center; gap:28px; } .nav a,.text-link { color:#e8e1f2; background:none; border:0; padding:0; font:600 13px/1 Manrope,sans-serif; cursor:pointer; text-decoration:none; } .nav a:hover,.text-link:hover { color:var(--accent); } .text-link span { color:var(--accent); font-size:17px; margin-left:4px; } .menu-button { display:none; }
.hero { min-height:620px; display:grid; grid-template-columns:42% 58%; align-items:center; gap:30px; padding-block:68px 54px; } .eyebrow { color:#d8b4fe; font:500 11px/1.2 "DM Mono",monospace; letter-spacing:1.25px; margin:0 0 20px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(3.5rem,5.5vw,5.7rem); line-height:.98; letter-spacing:-.075em; margin-bottom:26px; } .intro { max-width:480px; color:#d8d0e3; font-size:16px; line-height:1.7; } .hero-actions { display:flex; gap:12px; margin-top:32px; } .button { border:1px solid transparent; padding:15px 20px; font:700 14px/1 Manrope,sans-serif; cursor:pointer; border-radius:4px; transition:.2s transform,.2s background; } .button:hover { transform:translateY(-2px); } .button-primary { color:#fff; background:linear-gradient(105deg,#7c3aed,#a855f7); box-shadow:0 10px 30px rgba(124,58,237,.23); } .button-secondary { color:#eadcff; background:rgba(124,58,237,.07); border-color:#9d6ef1; } .button span { margin-left:14px; font-size:18px; } .play-icon { display:inline-block; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid #fff; vertical-align:-2px; margin-right:10px; } .supporting-copy { color:#aa9abb; font:500 12px/1.5 "DM Mono",monospace; margin-top:22px; }
.hero-media { position:relative; min-height:430px; display:grid; place-items:center; } .product-frame { width:112%; position:relative; z-index:2; border:1px solid rgba(231,210,255,.31); padding:8px; background:#150d24; box-shadow:0 28px 50px rgba(0,0,0,.45); transform:perspective(1300px) rotateY(-6deg) rotateX(2deg); } .product-frame img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:right center; } .media-orbit { position:absolute; border:1px solid rgba(192,132,252,.35); border-radius:50%; z-index:1; } .orbit-one { height:490px; width:490px; right:-80px; top:-30px; } .orbit-two { height:340px; width:340px; left:40px; bottom:-56px; } .status-card { z-index:3; position:absolute; left:0; bottom:8px; background:#241536; border:1px solid rgba(239,225,255,.22); padding:14px 18px; display:flex; align-items:center; gap:10px; font-size:11px; box-shadow:0 12px 30px rgba(0,0,0,.34); } .status-card strong { display:block; font-size:12px; } .status-card small { color:#c0b5cd; margin-top:4px; display:block; } .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.proof-strip { border-block:1px solid var(--line); background:rgba(31,17,49,.72); } .proof-grid { min-height:104px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:24px; } .proof-grid p { margin:0; font-size:18px; font-weight:600; letter-spacing:-.035em; } .proof-grid p:nth-child(2) { color:#cfc4da; } .proof-arrow { font-size:36px; color:var(--accent); }
.workflow { padding-block:136px 130px; } .section-heading { max-width:730px; } h2 { font-size:clamp(2.8rem,5vw,4.8rem); line-height:1.02; letter-spacing:-.068em; margin-bottom:60px; } .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; } .steps:before { content:""; position:absolute; top:36px; left:7%; right:7%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.75; } .step { position:relative; padding-top:82px; } .step-number { color:var(--accent); font:500 13px "DM Mono",monospace; position:absolute; top:0; left:0; } .step-icon { height:58px; width:58px; position:absolute; top:13px; right:10px; border:1px solid rgba(192,132,252,.7); background:#211334; border-radius:3px; } .step-icon:before,.step-icon:after { content:""; position:absolute; } .controller:before { width:27px;height:15px;border:2px solid var(--accent);border-radius:7px;left:13px;top:20px; } .controller:after { width:13px;height:2px;background:var(--accent);left:20px;top:26px;box-shadow:5px 0 0 var(--accent); } .replay:before { width:28px;height:22px;border:2px solid var(--accent);border-radius:3px;left:13px;top:17px; } .replay:after { border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid var(--accent);left:24px;top:22px; } .bug:before { inset:16px 19px;border:2px solid var(--accent);border-radius:9px 9px 5px 5px; } .bug:after { width:22px;height:2px;background:var(--accent);left:17px;top:27px;box-shadow:0 -7px 0 -1px var(--accent),0 7px 0 -1px var(--accent); } .step h3 { font-size:21px; letter-spacing:-.05em; margin:18px 0 10px; } .step p { color:var(--muted); font-size:14px; line-height:1.7; max-width:290px; }
.signal-section { background:linear-gradient(115deg,#381568,#7c3aed 60%,#542096); color:#fff; padding-block:95px; } .signal-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; align-items:end; } .signal-section .eyebrow { color:#f2e8ff; } .signal-section h2 { margin:0; } .engine-list { font-family:"DM Mono",monospace; border-top:1px solid rgba(255,255,255,.28); } .engine-list div { padding:20px 0; border-bottom:1px solid rgba(255,255,255,.28); display:grid; grid-template-columns:45px 1fr auto; align-items:center; gap:16px; } .engine-list span,.engine-list em { font-size:11px; font-style:normal; opacity:.78; } .engine-list strong { font:500 22px Manrope,sans-serif; letter-spacing:-.05em; }
.pricing { padding-block:132px 0; } .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .price-card { min-height:490px; padding:30px; display:flex; flex-direction:column; background:rgba(32,18,50,.78); border:1px solid var(--line); } .price-card.featured-price { background:linear-gradient(145deg,rgba(104,47,186,.74),rgba(35,17,62,.96)); border-color:rgba(219,189,255,.75); box-shadow:0 20px 50px rgba(55,22,108,.28); } .plan-name { color:#fff; font-size:25px; font-weight:700; letter-spacing:-.05em; margin-bottom:8px; } .plan-for { color:#c9bdd9; min-height:42px; font-size:13px; line-height:1.55; margin-bottom:28px; } .price { margin-bottom:9px; color:#fff; white-space:nowrap; } .price strong { font-size:30px; letter-spacing:-.06em; } .price span { color:#c8bcd8; font-size:13px; } .price-note { min-height:38px; color:#b8a9cb; font-size:11px; line-height:1.5; } .price-card ul { list-style:none; padding:22px 0 18px; margin:18px 0 auto; border-top:1px solid var(--line); } .price-card li { color:#e8e0f0; font-size:13px; line-height:1.55; margin:0 0 12px; padding-left:18px; position:relative; } .price-card li:before { content:""; width:6px; height:6px; background:var(--accent); border-radius:50%; position:absolute; left:0; top:7px; } .price-card .button { align-self:flex-start; }
.projects { padding-block:132px; } .compact-heading h2 { margin-bottom:42px; } .project-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:12px; } .project-card { min-height:275px; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line); background:var(--surface); } .project-card span { font:500 10px "DM Mono",monospace; letter-spacing:.8px; color:#c1b3d0; margin-bottom:auto; } .project-card h3 { font-size:27px; letter-spacing:-.055em; margin:0 0 10px; } .project-card p { color:#cbbfda; font-size:13px; line-height:1.6; margin-bottom:19px; } .current-project { background:linear-gradient(145deg,#3d1b70,#1c1031 72%); border-color:rgba(192,132,252,.75); } .current-project span { color:#e5cfff; } .project-card a { color:#e0c4ff; text-decoration:none; font:700 13px Manrope,sans-serif; } .project-card a b { margin-left:10px; font-size:16px; } .placeholder-project { opacity:.82; }
.cta-section { min-height:420px; padding:74px 0; position:relative; border-top:1px solid var(--line); } .cta-section h2 { margin-bottom:28px; } .cta-mark { position:absolute; color:rgba(192,132,252,.64); font-size:clamp(12rem,25vw,21rem); right:5%; top:-20px; line-height:1; font-weight:300; opacity:.55; }.footer { min-height:125px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1.2fr auto; align-items:center; gap:30px; color:#b9adc8; font-size:12px; }.footer p { margin:0; }.footer .brand img { width:126px; }
.modal { width:min(560px,calc(100% - 36px)); background:#211331; color:var(--text); border:1px solid rgba(192,132,252,.7); padding:38px; box-shadow:0 25px 90px rgba(0,0,0,.75); }.modal::backdrop { background:rgba(10,4,20,.84); backdrop-filter:blur(4px); }.modal h2 { font-size:38px; margin-bottom:25px; }.close-modal { position:absolute; right:16px; top:13px; border:0; background:none; color:var(--text); font-size:28px; cursor:pointer; }.modal>p:last-child { color:var(--muted); line-height:1.6; font-size:14px; }.demo-panel { border:1px solid var(--line); background:#140b21; padding:21px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }.demo-panel p { margin:0; font-size:13px; line-height:1.6; }.demo-panel small { grid-column:1/-1; color:#c4b6cf; font:11px "DM Mono",monospace; }.demo-progress { grid-column:1/-1; height:4px; background:#39264b; }.demo-progress i { width:68%; display:block; height:100%; background:var(--accent); }.beta-form { display:grid; gap:16px; }.beta-form label { color:#ded3e8; font-size:12px; font-weight:600; }.beta-form input,.beta-form select { display:block; width:100%; margin-top:8px; background:#140b21; color:var(--text); border:1px solid var(--line); padding:13px; font:14px Manrope,sans-serif; }.beta-form .button { justify-self:start; margin-top:5px; }
@media (max-width:800px) { .container{width:min(100% - 38px,var(--max));}.header{height:70px;}.brand img{width:125px}.nav{display:none;position:absolute;top:69px;right:0;left:0;padding:22px;background:#201230;border:1px solid var(--line);align-items:flex-start;flex-direction:column;gap:20px;}.nav.open{display:flex;}.menu-button{display:grid;gap:6px;background:none;border:0;padding:8px;cursor:pointer;}.menu-button span{width:24px;height:2px;background:var(--text);}.hero{grid-template-columns:1fr;padding-block:62px 42px;gap:38px;min-height:auto;}.hero-media{min-height:auto}.product-frame{width:100%;transform:none}.status-card{left:-6px;bottom:-24px}.orbit-one{width:260px;height:260px;right:-80px;top:-30px}.orbit-two{display:none}.proof-grid{grid-template-columns:1fr auto;min-height:118px}.proof-grid p{font-size:15px}.proof-grid p:nth-child(2){grid-row:2}.proof-arrow{grid-row:1/3;grid-column:2}.workflow,.pricing,.projects{padding-block:90px}.steps{grid-template-columns:1fr;gap:18px}.steps:before{display:none}.step{padding:0 0 15px 80px;min-height:112px}.step-number{top:3px}.step-icon{top:0;left:29px;right:auto;width:38px;height:38px;transform:scale(.68);transform-origin:top left}.step h3{margin:0 0 8px}.step p{margin-bottom:0}.signal-layout{grid-template-columns:1fr;gap:30px}.signal-section{padding-block:70px}.engine-list div{grid-template-columns:32px 1fr}.engine-list em{grid-column:2}.pricing-grid,.project-grid{grid-template-columns:1fr}.price-card{min-height:auto}.project-card{min-height:220px}.cta-section{min-height:370px}.cta-mark{right:-5%;top:20px}.footer{grid-template-columns:1fr;gap:12px;padding-block:30px}.footer p{max-width:220px} }
@media (max-width:470px) { h1{font-size:3.3rem}.hero-actions{flex-direction:column;align-items:stretch}.button{width:100%}.hero-media{margin-top:10px}.status-card{transform:scale(.88);transform-origin:left bottom}.proof-grid{gap:12px}.proof-grid p{font-size:13px}.engine-list strong{font-size:18px}.modal{padding:30px 22px}.modal h2{font-size:32px} }