"<!DOCTYPE html>\n<html lang=\"ru\">\n<head><script>(function(){\nif(window.__rubikErr)return;window.__rubikErr=1;\nvar seen={},n=0;\nfunction rep(k,m,d){m=String(m||'').trim();if(!m||n>=20)return;var key=k+'|'+m;if(seen[key])return;seen[key]=1;n++;\ntry{fetch('/-/preview-error',{method:'POST',headers:{'Content-Type':'application/json'},keepalive:true,\nbody:JSON.stringify({_kind:k,_message:m.slice(0,2000),_url:(location.pathname+location.search).slice(0,1000),_detail:d?String(d).slice(0,4000):null})}).catch(function(){})}catch(x){}}\nwindow.addEventListener('error',function(e){var t=e.target;\nif(t&&t!==window&&(t.src||t.href))rep('resource','failed to load <'+t.tagName.toLowerCase()+'> '+(t.src||t.href));\nelse rep('js',e.message,(e.filename?'at '+e.filename+':'+e.lineno+':'+e.colno+' ':'')+(e.error&&e.error.stack?e.error.stack:''))},true);\nwindow.addEventListener('unhandledrejection',function(e){var r=e.reason;rep('promise',r&&r.message?r.message:String(r),r&&r.stack)});\nvar ce=console.error;console.error=function(){try{var a=[].slice.call(arguments);\nif(!(typeof a[0]=='string'&&/^(htmx:|Response Status Error Code)/.test(a[0])))rep('console',a.map(function(v){return v&&v.stack?v.stack:typeof v=='object'?JSON.stringify(v):String(v)}).join(' '))}catch(x){}\nreturn ce.apply(console,arguments)};\nfunction req(d){var c=(d&&d.requestConfig)||{};return (c.verb||'request').toUpperCase()+' '+(c.path||'?')}\ndocument.addEventListener('htmx:responseError',function(e){var x=e.detail&&e.detail.xhr;rep('htmx',req(e.detail)+' -> HTTP '+(x?x.status:'?'),x&&x.responseText?x.responseText.slice(0,1000):null)});\ndocument.addEventListener('htmx:sendError',function(e){rep('htmx',req(e.detail)+' -> network error')});\n})();</script>\n  <meta name=\"robots\" content=\"noindex, nofollow\">\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>Рубик — конструктор приложений</title>\n  <link rel=\"icon\" href=\"/favicon.svg\" type=\"image/svg+xml\">\n  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css\">\n  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css\">\n  <link rel=\"stylesheet\" href=\"/ui/bulma.css\">\n  <link rel=\"stylesheet\" href=\"/ui/theme.css\">\n  <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap\">\n  <style>\n    main {\n      position: relative;\n      min-height: calc(100vh - 15rem);\n      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 5rem 1rem 1rem;\n    }\n    main::before {\n      content: \"\"; position: absolute; inset: 0; pointer-events: none; opacity: .8;\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='192'%3E%3Cg fill='%23ffd202'%3E%3Crect x='0' y='0' width='64' height='40' fill-opacity='.12'/%3E%3Crect x='64' y='0' width='64' height='40' fill-opacity='.30'/%3E%3Crect x='192' y='0' width='64' height='40' fill-opacity='.18'/%3E%3Crect x='128' y='40' width='64' height='40' fill-opacity='.36'/%3E%3Crect x='256' y='40' width='64' height='40' fill-opacity='.14'/%3E%3Crect x='0' y='80' width='64' height='40' fill-opacity='.24'/%3E%3Crect x='192' y='80' width='64' height='40' fill-opacity='.32'/%3E%3Crect x='64' y='120' width='64' height='40' fill-opacity='.16'/%3E%3Crect x='256' y='120' width='64' height='40' fill-opacity='.28'/%3E%3Crect x='128' y='160' width='64' height='40' fill-opacity='.20'/%3E%3C/g%3E%3C/svg%3E\");\n      -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 55%, #000 92%);\n              mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 55%, #000 92%);\n    }\n    main > * { position: relative; }\n\n    .hero-text { margin-bottom: 4rem; text-align: center; color: #0f0f0f; }\n    h1.hero-text { font-family: \"Source Serif 4\", Georgia, serif; font-size: clamp(2.1rem, 5.6vw, 4rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; position: relative; z-index: 0; }\n    h1.hero-text span { position: relative; white-space: nowrap; }\n    h1.hero-text span::after { content: \"\"; position: absolute; left: -.04em; right: -.04em; bottom: .08em; height: .32em; border-radius: .1em; background: #ffd202; opacity: .55; z-index: -1; }\n    h1.hero-text .rot-line { display: block; white-space: nowrap; }\n    h1.hero-text .rot-line::after { content: none; }\n    h2.hero-text { white-space: nowrap; font-size: clamp(1rem, 2.8vw, 1.3rem); font-weight: 400; color: #6f6f68; margin: 1.1rem 0 2.25rem; }\n    .rot { display: inline-block; text-align: left; font-style: italic; padding-right: .1em;\n      background: linear-gradient(90deg, #ff4d8d, #ff9a3c, #7c4dff, #00b4d8, #ff4d8d); background-size: 300% 100%;\n      -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;\n      animation: flow 6s linear infinite, in .5s ease-out; }\n    .rot.out { animation: flow 6s linear infinite, out .35s ease-in forwards; }\n    @keyframes flow { to { background-position: 300% 0; } }\n    @keyframes in { from { opacity: 0; transform: translateY(.4em); filter: blur(6px); } }\n    @keyframes out { to { opacity: 0; transform: translateY(-.4em); filter: blur(6px); } }\n    .chat-composer { width: min(40rem, 100%); background: #fff; border-color: #e8e6dd; box-shadow: 0 12px 32px rgba(20,20,15,.08); }\n    .chat-composer:focus-within { border-color: #d9d5c6; }\n    .chat-composer .chat-text { background: transparent; }\n    .chat-selected { display: none; align-items: center; gap: .5rem; padding: 0 .75rem .6rem; }\n    .chat-selected.is-on { display: flex; }\n    .tpl-modal .modal-card { width: min(60rem, 95vw); }\n    .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }\n    .tpl-grid .tpl { cursor: pointer; }\n\n    /* ---- landing sections ---- */\n    /* pains: grey, scattered \"unassembled\" cubes — contrast to yellow assembled ones below */\n    .sec.is-pains { padding: 4rem 1rem; }\n    .pains { --d: .6rem; max-width: 56rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr);\n      gap: 1.5rem calc(1.5rem + var(--d)); padding-top: var(--d); align-items: start; }\n    .pain { position: relative; background: #fff; border: 1px solid #b9b6ab; padding: 1.1rem 1.1rem 1.2rem; color: #2a2a26; }\n    .pain::before, .pain::after { content: \"\"; position: absolute; }\n    .pain::before { left: -1px; right: -1px; bottom: 100%; height: var(--d); background: #e4e1d6; border: 1px solid #b9b6ab; border-bottom: 0;\n      transform: skewX(-45deg); transform-origin: bottom left; }\n    .pain::after { left: 100%; top: -1px; bottom: -1px; width: var(--d); background: #9c998e; transform: skewY(-45deg); transform-origin: top left; }\n    .pain:nth-child(1) { transform: rotate(-2deg); }\n    .pain:nth-child(2) { transform: rotate(1.5deg) translateY(.9rem); }\n    .pain:nth-child(3) { transform: rotate(-1deg) translateY(.3rem); }\n    .pain-ic { width: 1.8rem; height: 1.8rem; border-radius: .5rem; background: #f1efe7; color: #6b685e;\n      display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; margin-bottom: .6rem; }\n    .pain b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .25rem; }\n    .pain p { margin: 0; color: var(--mute); font-size: .88rem; }\n    .pain .cost { display: inline-block; margin-top: .75rem; font-size: .75rem; padding: .1rem .5rem; border-radius: .3rem; background: #fde8e4; color: #b4361c; }\n\n    /* hero subtitle */\n    .hero-text.hero-sub { white-space: normal; max-width: 36rem; margin-left: auto; margin-right: auto; }\n\n    /* social proof placeholders */\n    .proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }\n    .proof { border: 1.5px dashed #e5d9a3; border-radius: .9rem; padding: 1.25rem; color: #999; font-size: .9rem; background: #fffdf0; }\n\n    /* offer recap */\n    .recap { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }\n    .recap p { margin: 0; display: flex; gap: .6rem; align-items: baseline; color: #2a2a26; font-size: 1.05rem; }\n    .recap p i { color: var(--p-ink); font-size: .9rem; }\n\n    /* why */\n    .why-cards { --d: .7rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem calc(1rem + var(--d));\n      max-width: 48rem; margin: 0 auto; padding: var(--d) var(--d) 0 0; }\n    /* card = logo cube: white front, yellow top, black side */\n    .why-card { position: relative; background: #fff; border: 1px solid #0f0f0f; padding: 1rem 1rem 0; }\n    .why-card::before, .why-card::after { content: \"\"; position: absolute; background: #0f0f0f; }\n    .why-card::before { left: -1px; right: -1px; bottom: 100%; height: var(--d); background: #ffd202; border: 1px solid #0f0f0f; border-bottom: 0;\n      transform: skewX(-45deg); transform-origin: bottom left; }\n    .why-card::after { left: 100%; top: -1px; bottom: -1px; width: var(--d); transform: skewY(-45deg); transform-origin: top left; }\n    .why-ic { width: 1.8rem; height: 1.8rem; border-radius: .5rem; background: var(--p-soft); color: var(--ink);\n      display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; margin-bottom: .6rem; }\n    .why-card b { display: block; color: var(--ink); font-weight: 600; }\n    .why-card small { color: var(--mute); font-size: .8rem; }\n    .why-mock { margin: .9rem -.2rem 0; height: 4.5rem; border: 1px solid var(--line); border-bottom: 0; border-radius: .5rem .5rem 0 0;\n      background: #fafaf5; padding: .5rem; display: flex; flex-direction: column; gap: .35rem; }\n    .why-mock i { display: block; height: .35rem; border-radius: 1rem; background: #e8e6dd; }\n    .why-mock i:nth-child(1) { width: 60%; } .why-mock i:nth-child(2) { width: 85%; } .why-mock i:nth-child(3) { width: 40%; background: #ffe674; }\n    .why-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 52rem; margin: 2rem auto 0; }\n    .why-points p { margin: 0; display: flex; gap: .6rem; align-items: baseline; color: #2a2a26; font-size: .9rem; }\n    .why-points p i { color: var(--p-ink); }\n    .why-points b { display: block; color: var(--ink); font-weight: 600; }\n    .why-links { display: block; width: 100%; max-width: 48rem; height: 3rem; margin: 0 auto; }\n    .db { max-width: 52rem; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 1rem;\n      box-shadow: 0 0 0 6px #f4f1e4; overflow: hidden; }\n    .db-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }\n    .db-head b { color: var(--ink); }\n    .db-head span:last-child { margin-left: auto; color: var(--mute); font-size: .8rem; }\n    .db-bar { display: flex; gap: .4rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }\n    .db-bar span { font-size: .8rem; border: 1px solid var(--line); border-radius: .4rem; padding: .15rem .55rem; color: #2a2a26; }\n    .db table { width: 100%; font-size: .85rem; border-collapse: collapse; }\n    .db th { text-align: left; color: #444; font-weight: 500; }\n    .db th, .db td { padding: .45rem .9rem; border-bottom: 1px solid #f1efe7; border-right: 1px solid #f1efe7; white-space: nowrap; }\n    .db td:first-child, .db th:first-child { color: #aaa; width: 2.5rem; text-align: center; }\n    .chip { font-size: .75rem; padding: .1rem .45rem; border-radius: .3rem; background: #fff3c4; color: #7a5c00; }\n\n    /* compact sections: how / integrations / templates */\n    .is-tight .sec-head { margin-bottom: 1.25rem; }\n    .is-tight h2 { margin: .6rem 0 .4rem; font-size: clamp(1.5rem, 3.6vw, 2rem); }\n    .is-tight h2 br { display: none; }\n    .is-tight .lead { font-size: .95rem; }\n    .is-tight .how-app { min-height: 14rem; }\n    .is-tight .how-chat .mini-comp { height: 2.5rem; }\n    .is-tight .how-feats { margin-top: 1rem; gap: 1rem; }\n    .is-tight .how-feats > div { padding-top: .7rem; }\n    .is-tight .how-feats .is-hl { padding: 1.5rem 1.25rem; }\n    .is-tight .how-feats .is-hl b { font-size: 1.4rem; }\n    .is-tight .marquee { gap: .6rem; }\n    .is-tight .marquee .mq-row:nth-child(3) { display: none; }\n    .is-tight .chips { display: none; }\n    .is-tight .tg { gap: 1rem; }\n    .is-tight .tthumb { aspect-ratio: 21/9; }\n    .is-tight .center { margin-top: 1.25rem; }\n\n    /* how */\n    .how-frame { border-radius: 1.25rem; padding: 0 1.75rem 1.75rem; background-color: #fdf6d8; }\n    .how-app { background: #fff; border-radius: 0 0 .9rem .9rem; box-shadow: 0 10px 30px rgba(80,70,20,.14); display: grid;\n      grid-template-columns: 19rem 1fr; min-height: 23rem; overflow: hidden; }\n    .how-chat .agent { display: flex; align-items: center; gap: .6rem; padding-bottom: .75rem; margin-bottom: auto; border-bottom: 1px solid var(--line); }\n    .how-chat .agent b { display: block; color: var(--ink); font-size: .95rem; line-height: 1.1; }\n    .how-chat .agent small { color: #1a9d4b; font-size: .75rem; }\n    .how-chat .agent small::before { content: \"\"; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; margin-right: .3rem; }\n    .rubik { flex: none; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; }\n    .rubik svg { width: 1.4rem; height: 1.4rem; }\n    .how-chat .bot { display: flex; gap: .5rem; align-items: flex-start; }\n    .how-chat .bot .rubik { width: 1.6rem; height: 1.6rem; border-radius: .45rem; }\n    .how-chat .bot .rubik svg { width: 1rem; height: 1rem; }\n    .how-chat .bot > div { background: #fff7cc; border-radius: .7rem; padding: .5rem .75rem; color: #2a2a26; }\n    .how-chat .bot ul { margin: .35rem 0 0; padding: 0; }\n    .how-chat { border-right: 1px solid var(--line); padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .8rem; font-size: .85rem; }\n    .how-chat .msg { align-self: flex-end; background: #f4f2ea; border-radius: .7rem; padding: .5rem .75rem; max-width: 90%; color: #2a2a26; }\n    .how-chat ul { margin-left: 1.2rem; color: #2a2a26; }\n    .how-chat li { display: flex; gap: .45rem; align-items: center; margin: .25rem 0; }\n    .how-chat li i { color: #9a9a9a; }\n    .how-chat .done { display: flex; gap: .45rem; align-items: center; color: #555; }\n    .mini-comp { border: 1px solid var(--line); border-radius: .7rem; height: 4.5rem; display: flex; align-items: flex-end; justify-content: space-between; padding: .4rem; color: #888; }\n    .mini-comp .go { width: 1.6rem; height: 1.6rem; border-radius: .45rem; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }\n    .how-dash { background: #fafaf5; padding: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr; gap: .75rem; }\n    .kpi, .panel { background: #fff; border: 1px solid var(--line); border-radius: .6rem; padding: .7rem .8rem; }\n    .kpi small, .panel small { color: var(--mute); font-size: .75rem; }\n    .kpi b { display: block; font-size: 1.05rem; color: var(--ink); }\n    .panel.chart { grid-column: span 3; display: flex; flex-direction: column; }\n    .panel.chart svg { flex: 1; width: 100%; }\n    .panel.donut { display: flex; flex-direction: column; }\n    .panel.donut div { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; }\n    .panel.donut span { position: absolute; text-align: center; font-weight: 600; color: var(--ink); line-height: 1.1; }\n    .panel.donut span small { display: block; font-weight: 400; }\n    .how-site { background: #ece9dc; padding: 1rem; display: flex; flex-direction: column; min-width: 0; }\n    .how-site .bw-bar { display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem; background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: .7rem .7rem 0 0; }\n    .how-site .bw-dots { display: flex; gap: .3rem; }\n    .how-site .bw-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: #ddd9c8; }\n    .how-site .bw-dots i:first-child { background: #ff6159; }\n    .how-site .bw-dots i:nth-child(2) { background: #ffbd2e; }\n    .how-site .bw-dots i:nth-child(3) { background: #27c93f; }\n    .how-site .bw-url { flex: 1; background: #f4f2ea; border-radius: .5rem; padding: .25rem .7rem; font-size: .75rem; color: var(--mute); }\n    .how-site .bw-url i { margin-right: .4rem; color: #1a9d4b; }\n    .how-site .bw-page { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 0 0 .7rem .7rem; overflow: hidden; display: flex; flex-direction: column; font-size: .85rem; color: #1b1b18; box-shadow: 0 8px 24px rgba(80,70,20,.12); }\n    .how-site .bw-top { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 1rem; background: var(--ink); color: #fff; }\n    .how-site .bw-top b { letter-spacing: .14em; color: #ffd202; margin-right: auto; }\n    .how-site .bw-top span { opacity: .75; font-size: .8rem; }\n    .how-site .bw-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.2rem; background: #fdf6d8; background-image: radial-gradient(circle at 100% 0, rgba(255,210,2,.35), transparent 60%); }\n    .how-site .bw-hero h4 { font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin: 0 0 .4rem; color: var(--ink); }\n    .how-site .bw-hero p { margin: 0 0 .9rem; color: #555; }\n    .how-site .bw-btn { display: inline-block; background: #ffd202; color: var(--ink); font-weight: 600; border-radius: .6rem; padding: .5rem 1.1rem; box-shadow: 0 3px 0 rgba(15,15,15,.85); }\n    .how-site .bw-art { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 1.2rem; background: var(--ink); color: #ffd202; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; transform: rotate(8deg); }\n    .how-site .bw-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 1rem 1.2rem 1.2rem; }\n    .how-site .bw-body small { display: block; color: #888; margin-bottom: .5rem; text-transform: uppercase; font-size: .65rem; letter-spacing: .06em; }\n    .how-site .bw-svc { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #f1efe7; }\n    .how-site .bw-svc i { width: 1.2rem; color: var(--p-ink); }\n    .how-site .bw-slots { display: flex; flex-wrap: wrap; gap: .4rem; }\n    .how-site .bw-slots i { font-style: normal; border: 1px solid #e3e0d2; border-radius: .5rem; padding: .3rem .65rem; }\n    .how-site .bw-slots i.on { background: var(--ink); color: #ffd202; border-color: var(--ink); }\n    .how-site .bw-slots i.off { color: #bbb; text-decoration: line-through; }\n    @media (max-width: 768px) { .how-site .bw-body { grid-template-columns: 1fr; } .how-site .bw-art { display: none; } }\n    .how-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }\n    .how-feats > div { border-top: 1px solid #e3e3e3; padding-top: 1.2rem; }\n    .how-feats b { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 600; margin-bottom: .4rem; }\n    .how-feats b i { color: var(--p-ink); }\n    .how-feats p { color: var(--mute); font-size: .9rem; }\n    .how-feats .is-hl { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; margin-top: .5rem;\n      border: 0; border-radius: 16px; padding: 1.5rem 2rem; background: var(--p); color: var(--ink);\n      background-image: radial-gradient(circle at 100% 0, rgba(255,255,255,.45), transparent 55%); }\n    .how-feats .is-hl b { flex: none; margin: 0; color: var(--ink); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; gap: .75rem; }\n    .how-feats .is-hl b i { color: var(--ink); }\n    .how-feats .is-hl p { margin: 0; padding-left: 1.5rem; border-left: 1px solid rgba(15,15,15,.25); color: rgba(15,15,15,.85); font-size: 1.05rem; }\n\n    /* integrations */\n    .marquee { --d: .45rem; overflow: hidden; display: flex; flex-direction: column; gap: calc(.9rem + var(--d)); padding-top: var(--d);\n      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);\n              mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }\n    .mq-row { display: flex; gap: calc(.9rem + var(--d)); width: max-content; animation: mq 50s linear infinite; }\n    .mq-row:nth-child(2) { animation-direction: reverse; animation-duration: 60s; }\n    .mq-row:nth-child(3) { animation-duration: 45s; }\n    .marquee:hover .mq-row { animation-play-state: paused; }\n    @keyframes mq { to { transform: translateX(-50%); } }\n    /* tile = logo cube (same as .why-card): white front, yellow top, black side */\n    .ig { --top: #ffd202; --side: #0f0f0f; --edge: #0f0f0f; position: relative; width: 4rem; height: 4rem; flex: none;\n      background: #fff; border: 1px solid var(--edge); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; }\n    .ig::before, .ig::after { content: \"\"; position: absolute; }\n    .ig::before { left: -1px; right: -1px; bottom: 100%; height: var(--d); background: var(--top); border: 1px solid var(--edge); border-bottom: 0;\n      transform: skewX(-45deg); transform-origin: bottom left; }\n    .ig::after { left: 100%; top: -1px; bottom: -1px; width: var(--d); background: var(--side); transform: skewY(-45deg); transform-origin: top left; }\n    .ig.is-empty { --top: #fff3c4; --side: #e9e4cf; --edge: #e9e4cf; background: #faf8ef; }\n    .ig .lt { width: 2.3rem; height: 2.3rem; border-radius: .55rem; display: flex; align-items: center; justify-content: center;\n      font-size: .8rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }\n\n    /* templates */\n    .tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }\n    .tcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: .9rem; padding: .5rem; color: var(--ink);\n      box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .15s, box-shadow .15s; }\n    .tcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }\n    .tthumb { position: relative; aspect-ratio: 16/9; border-radius: .6rem; overflow: hidden; }\n    .tthumb::after { content: \"\"; position: absolute; inset: 8% 6% 0; border: 2px solid rgba(255,255,255,.7); border-bottom: 0; border-radius: .5rem .5rem 0 0; background: rgba(255,255,255,.25); }\n    .tthumb .dev { position: absolute; right: .5rem; bottom: .5rem; z-index: 1; background: #fff; border-radius: .35rem; padding: .1rem .35rem; font-size: .65rem; color: #333; display: flex; gap: .3rem; }\n    .t-red { background-color: #fdeae4; }\n    .t-teal { background-color: #e2f0ea; }\n    .t-pink { background-color: #f9e8f3; }\n    .t-blue { background-color: #e7eefb; }\n    .t-lav { background-color: #f0ebf9; }\n    .t-mag { background-color: #fdf3d8; }\n    .tmeta { display: flex; gap: .55rem; padding: .7rem .3rem .3rem; }\n    .tmeta .lg { width: 1.5rem; height: 1.5rem; border-radius: .35rem; background: var(--ink); color: #ffd202; flex: none;\n      display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; }\n    .tmeta b { display: block; font-weight: 600; line-height: 1.2; }\n    .tmeta small { color: var(--mute); font-size: .78rem; }\n\n    /* build (dark) */\n    .build { background: #242421; color: #eceae2; padding: 6rem 1rem 0; overflow: hidden; }\n    .build h2 { font-family: \"Source Serif 4\", Georgia, serif; color: #fff; text-align: center; margin: 0 0 2.5rem; font-size: clamp(1.9rem, 4.8vw, 2.75rem); font-weight: 500; letter-spacing: -.01em; }\n    .build-stage { position: relative; max-width: 64rem; margin: 0 auto; padding-top: 5.5rem; }\n    .build-app { border: 1px solid #3b3930; border-bottom: 0; border-radius: .9rem .9rem 0 0; background: #2b2a25; height: 12rem; }\n    .build-app .bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid #3b3930; font-size: .85rem; color: #b5b2a6; }\n    .build-app .bar .sp { flex: 1; }\n    .build-app .bar span.b { padding: .15rem .6rem; border-radius: .4rem; background: #38362e; font-size: .8rem; }\n    .build-app .bar span.b.pub { background: #ffd202; color: #0f0f0f; }\n    .build-app .side { width: 16rem; height: calc(100% - 2.3rem); border-right: 1px solid #3b3930; }\n    .build .chat-composer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(32rem, calc(100% - 2rem));\n      margin: 0; background: #2d2c26; border-color: #45433a; box-shadow: 0 0 0 6px rgba(255,210,2,.12), 0 20px 50px rgba(0,0,0,.5); }\n    .build .chat-text { color: #eceae2; }\n    .build .chat-text::placeholder { color: #9b988c; }\n    .build .chat-pill { color: #d8d5c9; border-color: #45433a; }\n    .build .chat-pill:hover { background: #38362e; }\n    .build .chat-selected .tag { background: #38362e; color: #d8d5c9; }\n\n    @media (max-width: 768px) {\n      .why-cards { grid-template-columns: repeat(2, 1fr); }\n      .why-points { grid-template-columns: 1fr; }\n      .pains { grid-template-columns: 1fr; max-width: 24rem; }\n      .how-feats { grid-template-columns: 1fr; }\n      .how-feats .is-hl { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.25rem 1.5rem; }\n      .how-feats .is-hl b { font-size: 1.6rem; }\n      .how-feats .is-hl p { padding: 0; border: 0; }\n      .why-links { display: none; } .db { margin-top: 1.5rem; }\n      .db table { font-size: .75rem; } .db .hide-m { display: none; }\n      .how-frame { padding: 0 .75rem .75rem; }\n      .how-app { grid-template-columns: 1fr; } .how-chat { border-right: 0; border-bottom: 1px solid var(--line); }\n      .how-dash { grid-template-columns: repeat(2, 1fr); } .panel.chart { grid-column: span 2; } .panel.donut { display: none; }\n      .tg { grid-template-columns: 1fr; }\n      .proofs { grid-template-columns: 1fr; }\n      .build-app .side { display: none; }\n    }\n  </style>\n  <script src=\"https://cdn.jsdelivr.net/npm/htmx.org@2.0.11/dist/htmx.min.js\"></script>\n  <script src=\"https://unpkg.com/hyperscript.org@0.9.93\"></script>\n<script src=\"/assets/js/metrika.js\" async></script></head>\n<body>\n<script src=\"/assets/js/split.js\" defer></script>  <nav class=\"top\">\n    <a class=\"logo\" href=\"/\" aria-label=\"Рубик\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 4 17 8 9 12 1 8Z\" fill=\"#ffd202\"/><path d=\"M1 8 9 12 9 20 1 16Z\" fill=\"#0f0f0f\"/><path d=\"M9 12 17 8 17 16 9 20Z\" fill=\"#faf5e0\"/><path d=\"M18 10 23 12.5 18 15 13 12.5Z\" fill=\"#ffd202\"/><path d=\"M13 12.5 18 15 18 20 13 17.5Z\" fill=\"#0f0f0f\"/><path d=\"M18 15 23 12.5 23 17.5 18 20Z\" fill=\"#faf5e0\"/><path d=\"M9 4 13 6 9 8 5 6Z\" fill=\"#ffd202\"/><path d=\"M5 6 9 8 9 12 5 10Z\" fill=\"#0f0f0f\"/><path d=\"M9 8 13 6 13 10 9 12Z\" fill=\"#faf5e0\"/></svg><span>Рубик</span></a>\n    <a href=\"/templates\">шаблоны</a>\n    <a href=\"/pricing\">тарифы</a>\n    <a class=\"button is-primary\" href=\"https://app.roobiq.dev/\">начать бесплатно</a>\n  </nav>\n\n  <main>\n    <h1 class=\"hero-text\">Создайте <span class=\"rot-line\"><em class=\"rot\"\n      _='init\n        set words to [\"сайт\", \"чат-бот\", \"интернет-магазин\", \"сервис записи\", \"обработку заказов\", \"лендинг\"]\n        set i to 0\n        repeat forever\n          wait 2.2s\n          add .out to me\n          wait 350ms\n          increment i\n          put words[i mod words.length] into me\n          remove .out from me\n        end'>сайт</em>,</span><span>за 15 минут</span></h1>\n    <h2 class=\"hero-text hero-sub\">Для малого бизнеса: опишите задачу своими словами — Рубик соберёт сайт, бота или CRM за 15 минут</h2>\n    <form id=\"composer\" class=\"chat-composer\" action=\"https://app.roobiq.dev/\" method=\"get\">\n      <textarea name=\"prompt\" class=\"textarea chat-text\" rows=\"3\" required\n        placeholder=\"Сделай сайт кофейни с меню и онлайн-заказом\"\n        _='init\n          set prompts to [\"Сайт кофейни с меню по QR и бронью столов\", \"Бот для оповещений о заказах\", \"Дэшборд, в котором клиенты смогут следить за прогрессом проекта\", \"Портфолио фотографа с галереей и формой связи\", \"Админка, в которой можно работать с заявками\", \"База данных из этой эксель таблицы, логином и разными ролями\"]\n          set i to 0\n          repeat forever\n            repeat until (my value is empty and document.activeElement is not me) wait 500ms end\n            set t to prompts[i mod prompts.length]\n            set i to i + 1\n            set n to 0\n            repeat while n < t.length and my value is empty and document.activeElement is not me\n              set n to n + 1\n              set @placeholder to (t.slice(0, n) + \"▍\")\n              wait 45ms\n            end\n            wait 1800ms\n            repeat while n > 0 and my value is empty and document.activeElement is not me\n              set n to n - 1\n              set @placeholder to (t.slice(0, n) + \"▍\")\n              wait 18ms\n            end\n          end'\n        \n        onkeydown=\"if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();this.form.requestSubmit()}\"></textarea>\n      <div class=\"chat-selected\">\n        <span class=\"tag is-medium is-light\">шаблон: <span class=\"selected-name\"></span>\n          <button type=\"button\" class=\"delete is-small\" aria-label=\"Убрать\"\n            _=\"on click set f to closest <form/> then remove .is-on from closest .chat-selected then set f.template.value to ''\"></button></span>\n      </div>\n      <input type=\"hidden\" name=\"template\">\n      <div class=\"chat-foot-bar\">\n        <button type=\"button\" class=\"button chat-pill\" aria-label=\"Шаблоны\" title=\"Шаблоны\"\n          _=\"on click set @data-for of #tpl-modal to (closest <form/>).id then add .is-active to #tpl-modal then send open to #tpl-grid\"><span class=\"icon is-small\"><i class=\"fa-solid fa-table-cells-large\"></i></span><span>шаблоны</span></button>\n        \n        <span class=\"chat-spacer\"></span>\n        <button class=\"button is-primary chat-round\" type=\"submit\" aria-label=\"Отправить\">\n          <span class=\"icon\"><i class=\"fa-solid fa-arrow-up\"></i></span>\n        </button>\n      </div>\n    </form>\n  </main>\n\n  <!-- Боли -->\n  <section class=\"sec is-pains\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <span class=\"pill\"><i class=\"fa-solid fa-circle-exclamation\"></i>Знакомо?</span>\n        <h2>Свой сайт — это сложно</h2>\n      </div>\n      <div class=\"pains\">\n        <div class=\"pain\"><span class=\"pain-ic\"><i class=\"fa-solid fa-hourglass-half\"></i></span><b>Разработка на заказ</b>\n          <p>Работает, но сроки — месяцы, а счёт — шестизначный. Каждая правка снова через программиста.</p><span class=\"cost\">долго и дорого</span></div>\n        <div class=\"pain\"><span class=\"pain-ic\"><i class=\"fa-solid fa-wand-magic-sparkles\"></i></span><b>Конструкторы и ИИ-генераторы</b>\n          <p>Быстро, но до первой нагрузки: заявки теряются, оплата не доходит, логика ломается.</p><span class=\"cost\">быстро, но нестабильно</span></div>\n        <div class=\"pain\"><span class=\"pain-ic\"><i class=\"fa-solid fa-shuffle\"></i></span><b>Всё вручную и вразнобой</b>\n          <p>Заявки тонут в чатах, клиенты разбросаны по таблицам, сервисы не связаны между собой.</p><span class=\"cost\">хаос и потери</span></div>\n      </div>\n    </div>\n  </section>\n\n  \n\n   <!-- Как это работает -->\n  <section class=\"sec is-tight\">\n    <div class=\"wrap\">\n      <div class=\"sec-head is-left\">\n        <span class=\"pill\"><i class=\"fa-solid fa-list-check\"></i>Как это работает</span>\n        <h2>Создайте и запустите<br> без программистов</h2>\n        <p class=\"lead\">Опишите задачу Рубику — нашему ИИ-агенту. Он соберёт готовый проект за 15 минут</p>\n      </div>\n      <div class=\"how-frame pattern\">\n        <div class=\"how-app\">\n          <div class=\"how-chat\">\n            <div class=\"agent\"><span class=\"rubik\" aria-hidden=\"true\"><svg viewBox=\"0 0 12 12\"><g fill=\"#ffd202\"><rect x=\"0\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"4.3\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"8.6\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"0\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"4.3\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"8.6\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"0\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"4.3\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"8.6\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\"/></g></svg></span><span><b>Рубик</b><small>ИИ-агент · онлайн</small></span></div>\n            <div class=\"msg\">Сделай сайт для записи в барбершоп</div>\n            <div class=\"bot\"><span class=\"rubik\" aria-hidden=\"true\"><svg viewBox=\"0 0 12 12\"><g fill=\"#ffd202\"><rect x=\"0\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"4.3\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"8.6\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"0\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"4.3\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"8.6\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"0\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"4.3\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"8.6\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\"/></g></svg></span><div>Понял! Собираю:\n              <ul>\n                <li><i class=\"fa-solid fa-circle-check\"></i>Базу клиентов и мастеров</li>\n                <li><i class=\"fa-solid fa-circle-check\"></i>Страницы и онлайн-запись</li>\n                <li><i class=\"fa-solid fa-circle-check\"></i>Напоминания в Telegram</li>\n              </ul></div></div>\n            <div class=\"bot\"><span class=\"rubik\" aria-hidden=\"true\"><svg viewBox=\"0 0 12 12\"><g fill=\"#ffd202\"><rect x=\"0\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"4.3\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"8.6\" y=\"0\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"0\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"4.3\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"8.6\" y=\"4.3\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"0\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\"/><rect x=\"4.3\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\" fill=\"#faf5e0\"/><rect x=\"8.6\" y=\"8.6\" width=\"3.4\" height=\"3.4\" rx=\".6\"/></g></svg></span><div>Готово — сайт работает ›<br><small style=\"color:#6f6f68\">Добавить оплату онлайн?</small></div></div>\n            <div class=\"mini-comp\"><i class=\"fa-solid fa-plus\"></i><span class=\"go\"><i class=\"fa-solid fa-arrow-up\"></i></span></div>\n          </div>\n          <div class=\"how-site\">\n            <div class=\"bw-bar\"><span class=\"bw-dots\"><i></i><i></i><i></i></span><span class=\"bw-url\"><i class=\"fa-solid fa-lock\"></i>barber-no1.roobiq.dev</span></div>\n            <div class=\"bw-page\">\n              <div class=\"bw-top\"><b>BARBER №1</b><span>Услуги</span><span>Мастера</span><span>Контакты</span></div>\n              <div class=\"bw-hero\">\n                <div>\n                  <h4>Онлайн-запись к мастеру</h4>\n                  <p>Выберите услугу и удобное время — без звонков</p>\n                  <span class=\"bw-btn\">Записаться</span>\n                </div>\n                <div class=\"bw-art\" aria-hidden=\"true\"><i class=\"fa-solid fa-scissors\"></i></div>\n              </div>\n              <div class=\"bw-body\">\n                <div>\n                  <small>Услуги</small>\n                  <div class=\"bw-svc\"><span><i class=\"fa-solid fa-scissors\"></i>Мужская стрижка</span><b>1 200 ₽</b></div>\n                  <div class=\"bw-svc\"><span><i class=\"fa-solid fa-user\"></i>Борода</span><b>800 ₽</b></div>\n                  <div class=\"bw-svc\"><span><i class=\"fa-solid fa-star\"></i>Стрижка + борода</span><b>1 800 ₽</b></div>\n                </div>\n                <div>\n                  <small>Свободное время · сегодня</small>\n                  <div class=\"bw-slots\"><i class=\"off\">10:00</i><i>11:30</i><i class=\"on\">13:00</i><i>14:30</i><i class=\"off\">16:00</i><i>17:30</i></div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"how-feats\">\n        <div><b><i class=\"fa-solid fa-comments\"></i>Понимает с полуслова</b><p>Пишите Рубику как коллеге — без техзаданий. Если чего-то не хватает, он сам уточнит.</p></div>\n        <div><b><i class=\"fa-solid fa-cubes\"></i>Собирает из проверенного</b><p>Рубик не пишет код с нуля, а собирает сервис из готовых кубиков — поэтому оно не ломается.</p></div>\n        <div><b><i class=\"fa-solid fa-pen-to-square\"></i>Дорабатывает по просьбе</b><p>Нужно поле, страница или интеграция? Скажите Рубику — он внесёт правку за минуту.</p></div>\n        <div class=\"is-hl\"><b><i class=\"fa-solid fa-shield-halved\"></i>Без VPN</b><p>Работает из России. Оплата российской картой — зарубежная не нужна.</p></div>\n      </div>\n    </div>\n  </section>\n<!-- Почему мы -->\n  <section class=\"sec is-white\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <span class=\"pill\"><i class=\"fa-solid fa-cubes\"></i>Почему мы</span>\n        <h2>Работающий сервис — из готовых блоков</h2>\n        <p class=\"lead\">Соберите сервис или сайт из готовых блоков, как из кубиков. Быстро — и оно стабильно работает</p>\n      </div>\n      <div class=\"why-cards\">\n        <div class=\"why-card\"><span class=\"why-ic\"><i class=\"fa-solid fa-robot\"></i></span><b>Рубик-агент</b><small>Задачи и отчёты по расписанию</small><div class=\"why-mock\"><i></i><i></i><i></i></div></div>\n        <div class=\"why-card\"><span class=\"why-ic\"><i class=\"fa-solid fa-bag-shopping\"></i></span><b>Каталог и оплата</b><small>Товары, корзина, чек</small><div class=\"why-mock\"><i></i><i></i><i></i></div></div>\n        <div class=\"why-card\"><span class=\"why-ic\"><i class=\"fa-solid fa-address-book\"></i></span><b>CRM</b><small>Клиенты и сделки</small><div class=\"why-mock\"><i></i><i></i><i></i></div></div>\n        <div class=\"why-card\"><span class=\"why-ic\"><i class=\"fa-brands fa-telegram\"></i></span><b>Telegram-бот</b><small>Заявки и уведомления</small><div class=\"why-mock\"><i></i><i></i><i></i></div></div>\n      </div>\n      <svg class=\"why-links\" viewBox=\"0 0 800 48\" preserveAspectRatio=\"none\" fill=\"none\" stroke=\"#e9d488\" stroke-width=\"1.5\" aria-hidden=\"true\">\n        <path d=\"M100 0 C100 30 400 18 400 48\"/><path d=\"M300 0 C300 30 400 18 400 48\"/><path d=\"M500 0 C500 30 400 18 400 48\"/><path d=\"M700 0 C700 30 400 18 400 48\"/>\n      </svg>\n      <div class=\"db\">\n        <div class=\"db-head\"><span class=\"why-ic\" style=\"margin:0\"><i class=\"fa-solid fa-table-cells-large\"></i></span><b>База данных</b><span>1 248 записей</span></div>\n        <div class=\"db-bar\"><span>Все записи ▾</span><span><i class=\"fa-solid fa-sort\"></i> Сортировка</span><span><i class=\"fa-solid fa-filter\"></i> Фильтр</span></div>\n        <table>\n          <tr><th></th><th>Клиент</th><th>Блок</th><th class=\"hide-m\">Ответственный</th><th>Статус</th></tr>\n          <tr><td>1</td><td>Анна Смирнова</td><td><span class=\"chip\">Онлайн-запись</span></td><td class=\"hide-m\">Иван Петров</td><td><span class=\"st ok\">Оплачено</span></td></tr>\n          <tr><td>2</td><td>Дмитрий Козлов</td><td><span class=\"chip\">Telegram-бот</span></td><td class=\"hide-m\">Мария Орлова</td><td><span class=\"st ok\">Оплачено</span></td></tr>\n          <tr><td>3</td><td>Елена Волкова</td><td><span class=\"chip\">Каталог</span></td><td class=\"hide-m\">Иван Петров</td><td><span class=\"st new\">Новый</span></td></tr>\n          <tr><td>4</td><td>Сергей Новиков</td><td><span class=\"chip\">CRM</span></td><td class=\"hide-m\">Ольга Белова</td><td><span class=\"st wait\">Ждёт оплаты</span></td></tr>\n          <tr><td>5</td><td>Ольга Морозова</td><td><span class=\"chip\">Telegram-бот</span></td><td class=\"hide-m\">Мария Орлова</td><td><span class=\"st ok\">Оплачено</span></td></tr>\n        </table>\n      </div>\n      <div class=\"why-points\">\n        <p><i class=\"fa-solid fa-bolt\"></i><span><b>Быстро</b>Минуты вместо месяцев — блоки уже готовы, их нужно только собрать</span></p>\n        <p><i class=\"fa-solid fa-shield-halved\"></i><span><b>Стабильно</b>Каждый блок проверен и уже работает в других приложениях</span></p>\n        <p><i class=\"fa-solid fa-link\"></i><span><b>Всё связано</b>Блоки сразу работают на общей базе данных — ничего не нужно стыковать</span></p>\n      </div>\n    </div>\n  </section>\n  <!-- Интеграции -->\n  <section class=\"sec is-white is-tight\">\n    <div class=\"sec-head\" style=\"padding:0 1rem\">\n      <span class=\"pill\"><i class=\"fa-solid fa-puzzle-piece\"></i>Готовые интеграции</span>\n      <h2>Знакомьтесь — <em>кубики</em></h2>\n      <p class=\"lead\" style=\"max-width:640px;margin:0 auto\">Платежи, мессенджеры, CRM и соцсети подключаются без программистов и настройки с нуля</p>\n    </div>\n    <div class=\"marquee\" id=\"mq\"></div>\n  </section>\n\n  <!-- Шаблоны -->\n  <section class=\"sec is-tight\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <span class=\"pill\"><i class=\"fa-solid fa-table-cells-large\"></i>Шаблоны</span>\n        <h2>Сэкономьте недели с готовыми шаблонами</h2>\n        <p class=\"lead\">Каждый шаблон — готовое, протестированное приложение. Начинайте с него и настройте под себя.</p>\n        <div class=\"chips\"><span>Магазины</span><span>Услуги</span><span>Образование</span><span>Автоматизация</span><span>CRM</span><span class=\"is-mute\">и другие</span></div>\n      </div>\n      <div class=\"tg\">\n        <a class=\"tcard\" href=\"/templates\"><div class=\"tthumb pattern t-red\"><span class=\"dev\"><i class=\"fa-solid fa-display\"></i><i class=\"fa-solid fa-mobile-screen\"></i></span></div>\n          <div class=\"tmeta\"><span class=\"lg\"><i class=\"fa-solid fa-bag-shopping\"></i></span><div><b>Интернет-магазин</b><small>4 страницы · Магазины</small></div></div></a>\n        <a class=\"tcard\" href=\"/templates\"><div class=\"tthumb pattern t-teal\"><span class=\"dev\"><i class=\"fa-solid fa-display\"></i><i class=\"fa-solid fa-mobile-screen\"></i></span></div>\n          <div class=\"tmeta\"><span class=\"lg\"><i class=\"fa-solid fa-graduation-cap\"></i></span><div><b>Онлайн-школа</b><small>5 страниц · Образование</small></div></div></a>\n        <a class=\"tcard\" href=\"/templates\"><div class=\"tthumb pattern t-pink\"><span class=\"dev\"><i class=\"fa-solid fa-display\"></i><i class=\"fa-solid fa-mobile-screen\"></i></span></div>\n          <div class=\"tmeta\"><span class=\"lg\"><i class=\"fa-solid fa-scissors\"></i></span><div><b>Запись к мастеру</b><small>3 страницы · Услуги</small></div></div></a>\n        <a class=\"tcard\" href=\"/templates\"><div class=\"tthumb pattern t-blue\"><span class=\"dev\"><i class=\"fa-solid fa-display\"></i><i class=\"fa-solid fa-mobile-screen\"></i></span></div>\n          <div class=\"tmeta\"><span class=\"lg\"><i class=\"fa-solid fa-address-book\"></i></span><div><b>CRM для малого бизнеса</b><small>3 страницы · CRM</small></div></div></a>\n        <a class=\"tcard\" href=\"/templates\"><div class=\"tthumb pattern t-lav\"><span class=\"dev\"><i class=\"fa-solid fa-display\"></i><i class=\"fa-solid fa-robot\"></i></span></div>\n          <div class=\"tmeta\"><span class=\"lg\"><i class=\"fa-solid fa-robot\"></i></span><div><b>Лендинг с заявками и обработкой агентом</b><small>Сайт + агент · Автоматизация</small></div></div></a>\n        <a class=\"tcard\" href=\"/templates\"><div class=\"tthumb pattern t-mag\"><span class=\"dev\"><i class=\"fa-solid fa-display\"></i><i class=\"fa-solid fa-mobile-screen\"></i></span></div>\n          <div class=\"tmeta\"><span class=\"lg\"><i class=\"fa-brands fa-telegram\"></i></span><div><b>Приём заказов в Telegram</b><small>2 страницы · Магазины</small></div></div></a>\n      </div>\n      <div class=\"center\"><a class=\"btn-ghost\" href=\"/templates\">Все шаблоны <i class=\"fa-solid fa-arrow-right\"></i></a></div>\n    </div>\n  </section>\n\n  <!-- Социальные доказательства -->\n  <section class=\"sec is-white\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <span class=\"pill\"><i class=\"fa-solid fa-comments\"></i>Отзывы</span>\n      </div>\n      <div class=\"proofs\">\n        <div class=\"proof\">TODO: отзыв пользователя — 2–3 предложения: кто он, что собрал и какой результат получил. Подставить реальный, не выдумывать.</div>\n        <div class=\"proof\">TODO: отзыв пользователя — 2–3 предложения: кто он, что собрал и какой результат получил. Подставить реальный, не выдумывать.</div>\n        <div class=\"proof\">TODO: отзыв пользователя — 2–3 предложения: кто он, что собрал и какой результат получил. Подставить реальный, не выдумывать.</div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Тарифы -->\n  <section class=\"sec\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <span class=\"pill\"><i class=\"fa-solid fa-tag\"></i>Тарифы</span>\n        <h2>Простые цены, без сюрпризов</h2>\n        <p class=\"lead\">Начните бесплатно. Платите, когда сервис начнёт приносить пользу.</p>\n      </div>\n      <div class=\"plans\">\n        <div class=\"plan\">\n          <h3>Бесплатно</h3>\n          <p class=\"for\">Попробовать и собрать первый сервис</p>\n          <div class=\"price\">0 ₽ <small>/ мес</small></div>\n          <ul>\n            <li><i class=\"fa-solid fa-check\"></i>1 проект</li>\n            <li><i class=\"fa-solid fa-check\"></i>10 запросов к Рубику</li>\n            <li><i class=\"fa-solid fa-check\"></i>Все шаблоны</li>\n          </ul>\n          <a class=\"button\" href=\"https://app.roobiq.dev/\">Начать бесплатно</a>\n        </div>\n        <div class=\"plan is-hl\">\n          <span class=\"badge\">Популярный</span>\n          <h3>Старт</h3>\n          <p class=\"for\">Для малого бизнеса с одним-двумя сервисами</p>\n          <div class=\"price\">990 ₽ <small>/ мес</small></div>\n          <ul>\n            <li><i class=\"fa-solid fa-check\"></i>До 3-х проектов</li>\n            <li><i class=\"fa-solid fa-check\"></i>20 запросов к Рубику</li>\n            <li><i class=\"fa-solid fa-check\"></i>Свой домен</li>\n            <li><i class=\"fa-solid fa-check\"></i>Все кубики: оплата, Telegram, CRM</li>\n            <li><i class=\"fa-solid fa-check\"></i>Аккаунты посетителей и роли</li>\n          </ul>\n          <a class=\"button is-primary\" href=\"https://app.roobiq.dev/\">Выбрать Старт</a>\n        </div>\n        <div class=\"plan\">\n          <h3>Бизнес</h3>\n          <p class=\"for\">Для команды и нескольких сервисов</p>\n          <div class=\"price\">2990 ₽ <small>/ мес</small></div>\n          <ul>\n            <li><i class=\"fa-solid fa-check\"></i>Всё из тарифа «Старт»</li>\n            <li><i class=\"fa-solid fa-check\"></i>До 5-ти проектов</li>\n            <li><i class=\"fa-solid fa-check\"></i>40 запросов к Рубику</li>\n            <li><i class=\"fa-solid fa-check\"></i>Приоритетная поддержка</li>\n          </ul>\n          <a class=\"button\" href=\"https://app.roobiq.dev/\">Выбрать Бизнес</a>\n        </div>\n      </div>\n      <div class=\"center\"><a class=\"btn-ghost\" href=\"/pricing\">Подробнее о тарифах <i class=\"fa-solid fa-arrow-right\"></i></a></div>\n    </div>\n  </section>\n\n  <!-- Что вы создадите? -->\n  <section class=\"build\">\n    <h2>Начните бесплатно — запусти первый проект за 15 минут</h2>\n    <div class=\"build-stage\">\n      <form id=\"composer2\" class=\"chat-composer\" action=\"https://app.roobiq.dev/\" method=\"get\">\n        <textarea name=\"prompt\" class=\"textarea chat-text\" rows=\"3\" required\n          placeholder=\"Каждое утро присылай мне выручку за вчера\"\n          onkeydown=\"if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();this.form.requestSubmit()}\"></textarea>\n        <div class=\"chat-selected\">\n          <span class=\"tag is-medium\">шаблон: <span class=\"selected-name\"></span>\n            <button type=\"button\" class=\"delete is-small\" aria-label=\"Убрать\"\n              _=\"on click set f to closest <form/> then remove .is-on from closest .chat-selected then set f.template.value to ''\"></button></span>\n        </div>\n        <input type=\"hidden\" name=\"template\">\n        <div class=\"chat-foot-bar\">\n          <button type=\"button\" class=\"button chat-pill\" aria-label=\"Шаблоны\" title=\"Шаблоны\"\n            _=\"on click set @data-for of #tpl-modal to (closest <form/>).id then add .is-active to #tpl-modal then send open to #tpl-grid\"><span class=\"icon is-small\"><i class=\"fa-solid fa-table-cells-large\"></i></span><span>шаблоны</span></button>\n          <span class=\"chat-spacer\"></span>\n          <button class=\"button is-primary chat-round\" type=\"submit\" aria-label=\"Отправить\">\n            <span class=\"icon\"><i class=\"fa-solid fa-arrow-up\"></i></span>\n          </button>\n        </div>\n      </form>\n      <div class=\"build-app\" aria-hidden=\"true\">\n        <div class=\"bar\"><i class=\"fa-solid fa-house\"></i>Мой проект<span class=\"sp\"></span><span class=\"b\">Поделиться</span><span class=\"b pub\">Опубликовать</span></div>\n        <div class=\"side\"></div>\n      </div>\n    </div>\n  </section>\n\n  <div id=\"tpl-modal\" class=\"modal tpl-modal\">\n    <div class=\"modal-background\" _=\"on click remove .is-active from #tpl-modal\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\"><p class=\"modal-card-title\">Шаблоны</p>\n        <button class=\"delete\" aria-label=\"Закрыть\" _=\"on click remove .is-active from #tpl-modal\"></button></header>\n      <section class=\"modal-card-body\">\n        <div id=\"tpl-grid\" class=\"tpl-grid\" hx-post=\"/api/rpc/templates_cards\" hx-headers='{\"Accept\": \"text/html\"}' hx-trigger=\"open once\" hx-swap=\"innerHTML\"\n          _=\"on click(target)\n               set card to target.closest('.tpl')\n               if card\n                 halt the event\n                 set name to card.querySelector('.tpl-name').textContent\n                 set f to document.getElementById(#tpl-modal's @data-for)\n                 set f.querySelector('.selected-name').textContent to name\n                 set f.template.value to card.dataset.template\n                 add .is-on to f.querySelector('.chat-selected')\n                 remove .is-active from #tpl-modal\n               end\n             on htmx:afterSwap\n               for f in <.tpl-frame/> in me\n                 set f.firstElementChild.style.transform to 'scale(' + (f.clientWidth / 1280) + ')'\n               end\"></div>\n      </section>\n    </div>\n  </div>\n  <script>\n    // Integrations marquee: [title, fa-brands icon | letters, color, text color]; null = empty tile\n    const fa = (t, ic, c) => `<div class=\"ig\" title=\"${t}\"><i class=\"fa-brands fa-${ic}\" style=\"color:${c}\"></i></div>`;\n    const lt = (t, s, bg, c = \"#fff\") => `<div class=\"ig\" title=\"${t}\"><span class=\"lt\" style=\"background:${bg};color:${c}\">${s}</span></div>`;\n    const E = '<div class=\"ig is-empty\"></div>';\n    const rows = [\n      [fa(\"Telegram\", \"telegram\", \"#26A5E4\"), lt(\"ЮKassa\", \"Ю\", \"#0070F0\"), fa(\"ВКонтакте\", \"vk\", \"#0077FF\"), E, lt(\"amoCRM\", \"amo\", \"#339BF0\"),\n       lt(\"Битрикс24\", \"Б24\", \"#2FC6F6\"), E, fa(\"Яндекс\", \"yandex\", \"#FC3F1D\"), lt(\"Т-Банк\", \"Т\", \"#FFDD2D\", \"#111\"), E, fa(\"WhatsApp\", \"whatsapp\", \"#25D366\")],\n      [lt(\"1С\", \"1С\", \"#FFD500\", \"#E30613\"), lt(\"Ozon\", \"O\", \"#005BFF\"), E, lt(\"Wildberries\", \"WB\", \"#CB11AB\"), fa(\"Google Таблицы\", \"google-drive\", \"#0F9D58\"),\n       lt(\"СБП\", \"СБП\", \"linear-gradient(135deg,#5B57A2,#1D9AD6,#F6A51C)\"), E, lt(\"Яндекс Метрика\", \"М\", \"#FF3333\"), lt(\"Авито\", \"А\", \"#00AAFF\"), E, fa(\"Google\", \"google\", \"#4285F4\")],\n      [lt(\"МойСклад\", \"МС\", \"#1F7CE0\"), E, lt(\"Почта России\", \"ПР\", \"#0055A6\"), lt(\"СДЭК\", \"СДЭК\", \"#1AB248\"), `<div class=\"ig\" title=\"Email\"><i class=\"fa-solid fa-envelope\" style=\"color:#c98f00\"></i></div>`, E,\n       lt(\"Сбербанк\", \"С\", \"#21A038\"), lt(\"Яндекс Карты\", \"К\", \"#FC3F1D\"), E, lt(\"Max\", \"M\", \"#0f0f0f\", \"#ffd202\"), fa(\"Dropbox\", \"dropbox\", \"#0061FF\")],\n    ];\n    const tiles = r => { const s = r.join(\"\"); return s + s + s; }; // repeat so the row overfills wide screens\n    document.getElementById(\"mq\").innerHTML = rows.map(r => `<div class=\"mq-row\">${tiles(r)}${tiles(r)}</div>`).join(\"\");\n  </script>\n</body>\n</html>\n<script>(function(){\nif(window.__rubikPick)return;window.__rubikPick=1;\nvar on=false,hl=document.createElement('div');\nhl.style.cssText='position:fixed;pointer-events:none;z-index:2147483647;border:2px solid #ffd202;background:rgba(255,210,2,.25);display:none;box-sizing:border-box';\ndocument.documentElement.appendChild(hl);\nfunction sel(e){var p=[];while(e&&e.nodeType==1&&e!==document.body&&e!==document.documentElement){var s=e.tagName.toLowerCase();\nif(e.id){p.unshift(s+'#'+e.id);break}\nvar c=(e.getAttribute('class')||'').trim().split(/\\s+/).filter(Boolean).slice(0,2);if(c.length)s+='.'+c.join('.');\nvar par=e.parentElement;if(par){var sib=[].filter.call(par.children,function(x){return x.tagName==e.tagName});if(sib.length>1)s+=':nth-of-type('+(sib.indexOf(e)+1)+')'}\np.unshift(s);e=e.parentElement}return 'body > '+p.join(' > ')}\nfunction set(v){on=v;hl.style.display='none';document.documentElement.style.cursor=v?'crosshair':''}\nfunction over(ev){if(!on)return;var r=ev.target.getBoundingClientRect();\nhl.style.display='block';hl.style.left=r.left+'px';hl.style.top=r.top+'px';hl.style.width=r.width+'px';hl.style.height=r.height+'px'}\nfunction click(ev){if(!on)return;ev.preventDefault();ev.stopPropagation();\nvar e=ev.target,h=e.outerHTML;if(h.length>3000)h=h.slice(0,3000)+'… [обрезано]';\nvar s=sel(e),t='[[element '+s+' @ '+location.pathname+']]\\n'+h+'\\n[[/element]]\\n';\nset(false);parent.postMessage({type:'rubik-picked',text:t,label:s.split(' > ').pop()},'*')}\ndocument.addEventListener('mouseover',over,true);\ndocument.addEventListener('click',click,true);\ndocument.addEventListener('keydown',function(ev){if(on&&ev.key=='Escape'){set(false);parent.postMessage({type:'rubik-off'},'*')}});\nwindow.addEventListener('message',function(ev){if(ev.source===parent&&ev.data&&ev.data.type=='rubik-pick')set(!on)});\nif(!window.__rubikQuiet)parent.postMessage({type:'rubik-ready'},'*');\n})();</script>"