:root { --ink:#171918; --panel:#242928; --line:#3c4541; --muted:#aeb2aa; --paper:#f0f0e8; --acid:#eadb91; --moss:#53645b; --deep-moss:#222d2a; --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--sans); overflow-x:hidden; }
.grain { position:fixed; inset:0; opacity:.075; pointer-events:none; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.site-header { height:84px; padding:0 clamp(24px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--paper); text-decoration:none; display:flex; gap:10px; align-items:center; font-size:19px; font-weight:800; letter-spacing:-1px; }.brand-accent{color:var(--acid)}
.brand-mark,.eyebrow-mark { display:flex; gap:3px; transform:skewX(-24deg); }.brand-mark i{width:5px;height:16px;background:var(--acid);display:block}.brand-mark i:nth-child(2){opacity:.7}.brand-mark i:nth-child(3){opacity:.35}
.header-link,.text-link { color:var(--paper); text-decoration:none; font:500 11px var(--mono); letter-spacing:.04em; }.header-link span,.text-link span { color:var(--acid); margin-left:7px; }
.hero { min-height:590px; position:relative; padding:clamp(60px,9vw,130px) clamp(24px,9vw,142px) 64px; display:grid; grid-template-columns:minmax(0,1fr) 190px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 78% 15%,rgba(234,219,145,.12),transparent 20%),radial-gradient(circle at 3% 100%,rgba(73,95,84,.34),transparent 32%),linear-gradient(115deg,#1b1f1d,#151716 68%); }
.hero:before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0,transparent calc(25% - 1px),rgba(255,255,255,.08) calc(25% - 1px),rgba(255,255,255,.08) 25%); pointer-events:none; }
.hero-copy,.hero-meta { position:relative; z-index:1; }.eyebrow { display:flex; align-items:center; gap:9px; color:#c4c7c8; margin:0 0 26px; font:500 11px var(--mono); letter-spacing:.08em; }.eyebrow-mark:before,.eyebrow-mark:after { content:""; width:5px; height:12px; display:block; background:var(--acid); }.eyebrow-mark:after { opacity:.45; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:760px; margin-bottom:26px; font-size:clamp(54px,7.6vw,116px); line-height:.95; letter-spacing:-.075em; font-weight:500; } em{font-style:normal;color:var(--acid)}
.hero-description { max-width:475px; color:#b4b8ba; font-size:17px; line-height:1.65; }.hero-actions { margin-top:36px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }.button { display:inline-flex; gap:18px; align-items:center; padding:17px 20px; text-decoration:none; font:500 11px var(--mono); letter-spacing:.04em; transition:transform .2s,background .2s; }.button:hover { transform:translate(-3px,-3px); }.button-primary{background:var(--acid);color:#111}.button-primary span{font-size:17px}.hero-meta { align-self:end; display:flex; flex-direction:column; gap:26px; color:#a8adaf; font:400 10px/1.6 var(--mono); letter-spacing:.03em; }
.workflow-section{margin:clamp(30px,5vw,72px) clamp(14px,4vw,64px);border:1px solid var(--line);background:#1b201e;box-shadow:0 28px 70px rgba(0,0,0,.25)}.workflow-toolbar{height:59px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:400 10px var(--mono);letter-spacing:.06em;color:#9fa69e}.workflow-tabs{display:flex;gap:24px}.workflow-tabs .active{color:var(--paper)}.workflow-tabs .active:before{content:"";display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--acid);margin-right:7px}.workflow-status{color:#d7d8cc}.status-dot{display:inline-block;width:6px;height:6px;background:var(--acid);border-radius:50%;margin-right:7px;box-shadow:0 0 13px var(--acid)}
.workflow-canvas { min-height:410px; position:relative; overflow:hidden; background:radial-gradient(circle at 54% 47%,rgba(234,219,145,.1),transparent 18%),linear-gradient(135deg,#1e2421,#191b1a); }.canvas-grid{position:absolute;inset:0;background-image:radial-gradient(#56605a 1px,transparent 1px);background-size:16px 16px;opacity:.38}.canvas-label{position:absolute;top:22px;left:25px;color:#c3c8c0;font:500 10px var(--mono);letter-spacing:.08em}.canvas-label span{color:var(--acid);margin-right:10px}.workflow-lines{position:absolute;inset:0;width:100%;height:100%;}.line-base,.line-branch{stroke:#707970;stroke-width:1.5;stroke-dasharray:8 7;fill:none}.pulse-path{fill:var(--acid);filter:drop-shadow(0 0 5px var(--acid))}
.flow-card { position:absolute;width:120px;min-height:137px;padding:13px 13px;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025));border:1px solid rgba(212,220,205,.34);border-radius:7px;box-shadow:10px 10px 0 rgba(7,9,8,.35),inset 0 1px rgba(255,255,255,.09);backdrop-filter:blur(6px); }.flow-card:after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.07);border-radius:3px;pointer-events:none}.node-icon{width:29px;height:29px;border:1px solid rgba(234,219,145,.72);border-radius:5px;display:grid;place-items:center;color:var(--acid);font:500 13px var(--mono);text-shadow:0 0 14px rgba(234,219,145,.7);box-shadow:inset 0 0 15px rgba(234,219,145,.11)}.ai-icon{font-size:10px}.node-port{position:absolute;width:10px;height:10px;background:#f1edcf;border-radius:2px;top:45px;z-index:2;box-shadow:0 0 10px rgba(234,219,145,.45)}.port-left{left:-5px}.port-right{right:-5px}.node-kicker{margin:15px 0 5px;color:var(--acid);font:500 8px var(--mono);letter-spacing:.08em}.flow-card h2{font-size:12px;margin:0 0 6px;letter-spacing:-.03em}.node-detail{font:400 8px var(--mono);line-height:1.45;color:#b5baaf;margin:0}.card-trigger{left:7%;top:115px}.card-ai{left:29%;top:115px}.card-route{left:50%;top:115px}.card-action{left:71%;top:115px}.card-result{right:1.2%;top:115px}.insight-card{position:absolute;left:57%;top:282px;border:1px dashed #929686;padding:15px 21px;color:#dbddd1;background:rgba(35,41,38,.88);font:400 10px/1.6 var(--mono);animation:float 4s ease-in-out infinite;box-shadow:0 0 28px rgba(234,219,145,.08)}.insight-card p{margin:0}.insight-card strong{color:var(--acid);font-size:15px}.mini-spark{color:var(--acid);float:right;margin-left:20px}.cursor{position:absolute;left:43%;bottom:23px;background:#3b443e;border:1px solid #778176;border-radius:18px;padding:8px 11px;color:#f0f0e9;font:400 9px var(--mono);animation:cursor 6s ease-in-out infinite}.cursor span{display:inline-block;width:0;height:0;border-left:8px solid var(--paper);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-right:5px;vertical-align:middle}
.promise{padding:95px clamp(24px,9vw,142px) 100px;background:#dddcb9;color:#20231e}.section-index{color:#596055;font:500 10px var(--mono);letter-spacing:.08em}.promise-intro{display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:end;padding:38px 0 74px;border-bottom:1px solid #a6aa90}.promise h2,.cta-section h2{font-size:clamp(43px,6vw,84px);line-height:.96;letter-spacing:-.075em;font-weight:500;margin:0}.promise h2 em{color:#506451}.promise-intro>p{max-width:330px;margin:0;color:#4a534a;font-size:15px;line-height:1.65}.outcomes{display:grid;grid-template-columns:repeat(4,1fr)}.outcomes article{min-height:210px;padding:25px 21px 15px;border-right:1px solid #a6aa90}.outcomes article:first-child{padding-left:0}.outcomes article:last-child{border:0}.outcomes span{color:#526451;font:400 10px var(--mono)}.outcomes h3{font-size:20px;line-height:1.05;letter-spacing:-.05em;margin:40px 0 13px}.outcomes p{font-size:12px;line-height:1.5;color:#536053;max-width:160px}
.cta-section{padding:120px 24px;text-align:center;background:radial-gradient(circle at 50% 22%,rgba(234,219,145,.14),transparent 27%),linear-gradient(155deg,#26312c,#161918 65%)}.cta-section .eyebrow{justify-content:center}.cta-section h2{margin-bottom:38px}.cta-section h2 em{color:var(--acid)}footer{display:flex;justify-content:space-between;padding:22px clamp(24px,4vw,64px);border-top:1px solid var(--line);color:#a7ada3;font:400 9px var(--mono);letter-spacing:.04em}
.hero-builder { width:320px; min-height:390px; align-self:center; justify-self:end; position:relative; z-index:1; display:grid; place-items:center; background:radial-gradient(circle at 52% 48%,rgba(234,219,145,.13),transparent 19%),radial-gradient(circle at 50% 50%,rgba(75,100,88,.26),transparent 59%); }
.builder-label,.builder-proof { position:absolute; left:0; color:#bbc0b5; font:500 9px var(--mono); letter-spacing:.08em; }.builder-label{top:14px}.builder-proof{bottom:13px;color:var(--acid)}
.first-step{z-index:3;width:162px;height:162px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed rgba(234,219,145,.7);border-radius:17px;background:linear-gradient(145deg,rgba(238,234,203,.2),rgba(82,96,88,.2));color:var(--paper);cursor:pointer;font:500 15px/1.08 var(--sans);letter-spacing:-.045em;box-shadow:11px 13px 0 rgba(6,8,7,.25),inset 0 1px rgba(255,255,255,.16);transition:transform .25s ease,border-color .25s,box-shadow .25s}.first-step:hover{transform:translateY(-5px) rotate(-1deg);border-color:var(--acid);box-shadow:15px 18px 0 rgba(6,8,7,.22),0 0 48px rgba(234,219,145,.15),inset 0 1px rgba(255,255,255,.22)}.first-step-plus{font:300 56px/.65 var(--sans);color:var(--acid);text-shadow:0 0 24px rgba(234,219,145,.5)}.first-step-hint{font:500 7px var(--mono);letter-spacing:.08em;color:#d9d9cd}
.node-picker{position:absolute;inset:0;z-index:2;pointer-events:none}.picker-label{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:140px;text-align:center;color:#d8d8cc;font:500 8px/1.5 var(--mono);letter-spacing:.08em;opacity:0;transition:opacity .2s}.app-node{position:absolute;width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;border:1px solid rgba(234,219,145,.48);border-radius:14px;background:linear-gradient(140deg,rgba(238,234,203,.23),rgba(56,71,64,.46));color:var(--paper);box-shadow:8px 10px 0 rgba(7,9,8,.25),inset 0 1px rgba(255,255,255,.12);cursor:pointer;opacity:0;transform:scale(.3);transition:opacity .28s,transform .38s cubic-bezier(.17,.88,.33,1.28),background .2s}.app-node:hover{background:rgba(234,219,145,.3);border-color:var(--acid);transform:scale(1.12)!important}.app-node span{font-size:23px;color:var(--acid);text-shadow:0 0 16px rgba(234,219,145,.52)}.app-node small{font:500 8px var(--mono)}.node-form{top:43px;left:8px}.node-whatsapp{top:2px;left:122px}.node-gmail{top:43px;right:8px}.node-calendar{bottom:44px;right:8px}.node-webhook{bottom:2px;left:122px}.node-sheet{bottom:44px;left:8px}.is-open .first-step{transform:scale(.74);opacity:.58;pointer-events:none}.is-open .picker-label{opacity:1}.is-open .app-node{opacity:1;transform:scale(1);pointer-events:auto}.is-open .node-form{transition-delay:40ms}.is-open .node-whatsapp{transition-delay:90ms}.is-open .node-gmail{transition-delay:140ms}.is-open .node-calendar{transition-delay:190ms}.is-open .node-webhook{transition-delay:240ms}.is-open .node-sheet{transition-delay:290ms}.has-selection .first-step{border-style:solid;border-color:var(--acid);box-shadow:0 0 45px rgba(234,219,145,.18),11px 13px 0 rgba(6,8,7,.25)}
@keyframes float{50%{transform:translateY(-8px)}}@keyframes cursor{0%,22%{transform:translate(0,0);opacity:0}28%,78%{opacity:1}50%{transform:translate(70px,-16px)}100%{transform:translate(110px,-22px);opacity:0}}
@media (max-width:760px){.hero{min-height:760px}.hero-builder{width:min(300px,100%);min-height:350px;margin:44px auto 0;justify-self:auto}.builder-label{top:0}.builder-proof{bottom:0}.node-form{left:0}.node-gmail{right:0}.node-sheet{left:0}.node-calendar{right:0}}

.launch-film{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,7vw,105px);align-items:center;padding:clamp(70px,10vw,145px) clamp(24px,9vw,142px);background:linear-gradient(120deg,#202923,#171918 75%);border-top:1px solid var(--line)}.launch-copy h2{font-size:clamp(42px,5.2vw,74px);line-height:.96;letter-spacing:-.075em;font-weight:500;margin:0 0 24px}.launch-copy>p{max-width:330px;color:#b9bdb4;font-size:15px;line-height:1.65}.launch-video{position:relative;aspect-ratio:16/9;border:1px solid rgba(234,219,145,.4);background:#0e100f;box-shadow:14px 17px 0 rgba(5,7,6,.28),0 0 50px rgba(234,219,145,.08)}.launch-video:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.08);z-index:1;pointer-events:none}.launch-video iframe{display:block;width:100%;height:100%;border:0}.workflow-section{display:none}.scroll-stories{background:#171918}.story{min-height:92vh;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;padding:9vw clamp(24px,9vw,142px);border-top:1px solid var(--line);position:relative;overflow:hidden}.story:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 50%,rgba(234,219,145,.1),transparent 20%),radial-gradient(circle at 4% 100%,rgba(75,100,88,.18),transparent 35%);opacity:0;transition:opacity .8s}.story.is-active:before{opacity:1}.story-copy,.node-scene{position:relative;z-index:1}.story-number{font:500 10px var(--mono);letter-spacing:.1em;color:#969e93;margin-bottom:22px}.story-copy h2{font-size:clamp(50px,6.4vw,90px);line-height:.94;letter-spacing:-.08em;font-weight:500;margin:0 0 22px;transform:translateY(48px);opacity:0;transition:transform .7s cubic-bezier(.16,.82,.26,1),opacity .6s}.story-copy>p:last-child{max-width:310px;color:#b9bdb4;font-size:15px;line-height:1.65;transform:translateY(25px);opacity:0;transition:transform .7s .12s,opacity .6s .12s}.story.is-active .story-copy h2,.story.is-active .story-copy>p:last-child{transform:translateY(0);opacity:1}.node-scene{height:360px;max-width:510px;width:100%;justify-self:end;background-image:radial-gradient(#5c665d 1px,transparent 1px);background-size:18px 18px;border:1px solid rgba(161,171,156,.15);border-radius:20px;background-color:rgba(39,47,42,.28);box-shadow:inset 0 1px rgba(255,255,255,.04);overflow:hidden}.workflow-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.08;filter:grayscale(1) sepia(.3) hue-rotate(50deg) brightness(.72);transition:opacity .8s}.story.is-active .workflow-video{opacity:.28}.scene-node{position:absolute;width:78px;height:78px;display:grid;place-items:center;border:1px solid rgba(205,214,195,.4);border-radius:16px;background:linear-gradient(145deg,rgba(238,234,203,.18),rgba(59,75,66,.42));color:#aaafa8;font:500 21px var(--mono);font-style:normal;box-shadow:10px 12px 0 rgba(6,8,7,.25),inset 0 1px rgba(255,255,255,.14);transition:color .45s,border-color .45s,box-shadow .45s,transform .45s}.n-one{left:9%;top:40%}.n-two{left:33%;top:18%}.n-three{left:56%;top:53%}.n-four{right:8%;top:27%}.scene-line{position:absolute;height:1px;background:#657068;transform-origin:left;opacity:.5;transition:background .45s,box-shadow .45s}.l-one{width:122px;left:22%;top:45%;transform:rotate(-33deg)}.l-two{width:133px;left:43%;top:34%;transform:rotate(40deg)}.l-three{width:126px;left:66%;top:53%;transform:rotate(-33deg)}.scene-pulse{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--acid);opacity:0;left:22%;top:44%;filter:drop-shadow(0 0 8px var(--acid))}.story.is-active .scene-node{color:var(--acid);border-color:var(--acid);box-shadow:0 0 25px rgba(234,219,145,.2),10px 12px 0 rgba(6,8,7,.25),inset 0 1px rgba(255,255,255,.14)}.story.is-active .scene-node:nth-of-type(1){transition-delay:0ms}.story.is-active .scene-node:nth-of-type(2){transition-delay:180ms}.story.is-active .scene-node:nth-of-type(3){transition-delay:360ms}.story.is-active .scene-node:nth-of-type(4){transition-delay:540ms}.story.is-active .scene-line{background:var(--acid);box-shadow:0 0 10px rgba(234,219,145,.55)}.story.is-active .scene-pulse{animation:run-flow 2.4s .5s infinite linear;opacity:1}@keyframes run-flow{0%{transform:translate(0,0);opacity:0}8%{opacity:1}28%{transform:translate(118px,-75px)}46%{transform:translate(245px,10px)}65%{transform:translate(365px,-60px);opacity:1}100%{transform:translate(365px,-60px);opacity:0}}
@media (max-width:760px){.story{min-height:790px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:80px 24px 55px;gap:55px}.node-scene{height:290px;align-self:center}.scene-node{width:61px;height:61px;border-radius:13px;font-size:17px}.n-one{left:7%;top:42%}.n-two{left:32%;top:17%}.n-three{left:55%;top:55%}.n-four{right:5%;top:28%}.l-one{width:83px;left:21%;top:47%}.l-two{width:102px;left:42%;top:34%}.l-three{width:86px;left:66%;top:53%}.scene-pulse{left:21%;top:46%}.story-copy h2{font-size:58px}@keyframes run-flow{0%{transform:translate(0,0);opacity:0}8%{opacity:1}30%{transform:translate(81px,-55px)}48%{transform:translate(178px,12px)}70%{transform:translate(259px,-43px);opacity:1}100%{transform:translate(259px,-43px);opacity:0}}}
@media (max-width:760px){.site-header{height:67px}.header-link{font-size:9px}.hero{min-height:610px;display:block;padding:70px 24px 50px}.hero:before{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),rgba(255,255,255,.08) calc(50% - 1px),rgba(255,255,255,.08) 50%)}.hero-meta{margin-top:55px;flex-direction:row;gap:32px}.hero-meta p{font-size:8px}.workflow-section{margin:24px 12px}.workflow-canvas{min-height:590px}.workflow-lines{display:none}.flow-card{width:142px;min-height:121px}.card-trigger{left:10%;top:64px}.card-ai{left:55%;top:64px}.card-route{left:10%;top:225px}.card-action{left:55%;top:225px}.card-result{left:31%;top:388px}.insight-card{display:none}.cursor{bottom:20px;left:13%}.promise{padding:70px 24px}.promise-intro{display:block;padding:25px 0 50px}.promise-intro>p{margin-top:27px}.outcomes{grid-template-columns:repeat(2,1fr)}.outcomes article{min-height:174px;padding:20px 15px;border-bottom:1px solid #c6c8c1}.outcomes article:nth-child(2){border-right:0}.outcomes article:nth-child(3){padding-left:0;border-bottom:0}.outcomes article:nth-child(4){border-bottom:0;border-right:0}.outcomes article:first-child{padding-left:0}.outcomes h3{margin:28px 0 10px}.cta-section{padding:90px 24px}footer{gap:14px;font-size:8px}.workflow-status{display:none}}