@scope (.connected-hero) {
:root{color-scheme:dark;--ease:cubic-bezier(.22,.68,.18,1)}*{box-sizing:border-box}body{margin:0;color:#eee9e2;background:#0b0d12;font:14px 'DM Sans',Arial,sans-serif;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid #b79ce7;outline-offset:6px}p,h1{margin:0}.demo-bar{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid #b8a0d21a;background:#101017;font-size:8px;letter-spacing:1.5px;color:#9e92ac}.demo-bar>span{display:flex;gap:13px;align-items:center}.demo-bar i{width:3px;height:3px;border-radius:50%;background:#a678cf}.demo-bar button{border:0;background:none;color:#b2a4c3;padding:6px 10px;font-size:10px;letter-spacing:0}header{height:92px;margin:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #c2a5dc15}header img{object-fit:contain}.header-caption,.edition{font-size:9px;letter-spacing:2px;color:#8e849b}.edition{font-size:8px;color:#665d76}main{max-width:1580px;margin:auto;padding:55px 5% 25px;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:30px;min-height:calc(100svh - 220px)}.copy{position:relative;z-index:2}.eyebrow{font-size:8px;letter-spacing:1.6px;color:#ac9bbd;display:flex;align-items:center;gap:10px;margin-bottom:23px}.eyebrow i{width:4px;height:4px;border-radius:50%;background:#b17ed4}h1{font:400 clamp(43px,4.8vw,78px)/1.04 'Playfair Display',Georgia,serif;letter-spacing:-.045em}h1 em{color:#a995e1;font-weight:400}.description{margin-top:24px;color:#b4acbc;font-size:clamp(12px,1.1vw,16px);line-height:1.7}.instruction{display:flex;align-items:center;gap:14px;margin-top:29px;color:#d0bfdc}.instruction>span{display:grid;place-items:center;border:1px solid #ae8bd143;border-radius:50%;width:34px;height:34px;color:#b59bce}.instruction p{font-size:12px;line-height:1.9}.instruction small{color:#8e829b;font-size:10px}.selected-description{margin-top:18px;font-size:11px;color:#a795ba;min-height:34px;max-width:350px;line-height:1.7}.sample-label{display:block;font-size:6px;color:#61586c;letter-spacing:1.2px;margin-top:12px}.stage{position:relative;width:100%;height:620px;perspective:1400px;isolation:isolate}.stage-light{position:absolute;inset:0 -8% -5%;background:radial-gradient(ellipse at 58% 66%,#7748c61c,transparent 65%);pointer-events:none}.screen{position:absolute;margin:0;text-align:left;border:1px solid #9e8bc285;border-radius:12px;background:linear-gradient(130deg,#222235f5,#121420fa);padding:0;box-shadow:inset 0 1px #c7b4eb20,0 15px 45px #0006,0 0 8px #8961c923;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,-5deg)) rotateZ(var(--angle,0deg)) translateY(var(--lift,0px)) scale(var(--zoom,1));transform-origin:center;transition:transform .65s var(--ease),border-color .5s,box-shadow .65s,filter .65s;will-change:transform;isolation:isolate;z-index:2;appearance:none;display:block;color:#e1d9eb}.screen-web{left:0;top:17%;width:61%;height:73%;--angle:-3deg}.screen-crm{right:0;top:1%;width:35%;height:45%;--angle:4deg}.screen-flow{right:0;bottom:3%;width:35%;height:45%;--angle:3deg}.screen-edge{position:absolute;inset:-1px;border:1px solid #b3a0df40;border-radius:inherit;pointer-events:none;transition:border-color .5s,box-shadow .5s}.screen:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(170px circle at var(--light-x,50%) var(--light-y,50%),#b494f015,transparent 75%);opacity:.6;transition:opacity .5s}.screen[data-active=true]{--zoom:1.065;--lift:-7px;border-color:#ccb5fc;box-shadow:inset 0 1px #e8dbff55,0 22px 60px #0008,0 0 25px #9871ec38,0 0 65px #5476e515;z-index:8}.screen[data-active=true] .screen-edge{border-color:#ccbbff99;box-shadow:0 0 13px #b088f65c,inset 0 0 12px #8076ee16}.screen[data-active=true]:before{opacity:1}.stage[data-selected] .screen:not([data-active=true]){filter:brightness(.82)}.screen-top{height:52px;padding:0 17px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #c3afe41c;position:relative;z-index:1}.screen-icon{color:#ac8af0;font-size:23px;font-weight:400;line-height:1}.screen-top strong{font-size:13px;font-weight:500}.window-dots{margin-left:auto;font-size:12px;letter-spacing:3px;color:#81769b}.web-content{display:block;padding:14px 14px 0}.mini-nav{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:7px;letter-spacing:1px;color:#d7cede}.mini-nav small{font-size:5px;color:#a69ab5;letter-spacing:0}.web-visual{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:220px;background:linear-gradient(90deg,#10121ed9,#10121e30),url('assets/hero.png') 75% 55%/cover no-repeat;padding:20px 17px;margin-top:14px;overflow:hidden;border-radius:4px}.web-eyebrow{font-size:6px;letter-spacing:1px;color:#baa5cd}.web-heading{display:block;font:26px/1.15 Georgia,serif;letter-spacing:-.7px;margin-top:12px}.web-heading em{color:#ccb1e7}.web-subtitle{font-size:7px;max-width:150px;line-height:1.7;margin-top:12px;color:#bbb0c8}.mini-cta{margin-top:15px;font-size:7px;align-self:flex-start;border:1px solid #9b7cc354;padding:6px 11px;border-radius:20px;background:#4f396028}.thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.thumbnails>span{font-size:6px;color:#a99bb8}.thumbnails i{display:block;height:37px;margin-bottom:6px;border:1px solid #b99cc71c;border-radius:3px;background:linear-gradient(135deg,#4d3c5a77,#242d4177)}.thumbnails>span:nth-child(2) i{background:linear-gradient(135deg,#223b4c,#30263d)}.thumbnails>span:nth-child(3) i{background:linear-gradient(135deg,#6b5a4c55,#192a3c)}.screen-foot{display:flex;justify-content:space-between;margin:14px;font-size:6px;color:#827395;letter-spacing:.6px}.crm-content{display:block;padding:13px 12px}.search{display:flex;gap:6px;align-items:center;border:1px solid #9e8cbb2e;border-radius:5px;padding:8px;font-size:11px;color:#b0a5c3;background:#171a2b}.search span{font-size:7px}.contact-row{display:flex;align-items:center;gap:7px;padding:12px 0;border-bottom:1px solid #ad95cb12;font-size:7px}.avatar{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#7d61b326;border:1px solid #a088cf37;font-size:7px;flex-shrink:0}.tag{margin-left:auto;border:1px solid #a064d538;border-radius:15px;padding:4px 6px;font-size:6px;color:#d0b8ed;background:#764dc21a}.tag.blue{border-color:#4d8acb35;color:#86b8ed;background:#3b70a716}.tag.green{border-color:#529e9835;color:#9acdc4;background:#3b908116}.flow-content{display:block;padding:14px 12px}.flow-row{display:flex;align-items:center;gap:9px;padding:10px 8px;background:#8e77b410;border:1px solid #bc9ae91a;border-radius:5px}.flow-icon{width:26px;height:26px;flex-shrink:0;border-radius:6px;display:grid;place-items:center;background:linear-gradient(135deg,#9b53da,#583c9c);font-size:20px;color:#f2eaff}.blue-icon{font-size:15px;background:linear-gradient(135deg,#7161d6,#354789)}.green-icon{font-size:15px;background:linear-gradient(135deg,#55ae9a,#246358)}.flow-row>span:last-child{display:block}.flow-row strong{display:block;font-size:8px;font-weight:500}.flow-row small{display:block;font-size:6px;color:#91849e;margin-top:4px}.flow-join{display:block;width:1px;height:13px;background:#9975d27a;margin-left:21px}.connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}.connection{fill:none;stroke:url(#connection);stroke-width:1.2;opacity:.45;transition:opacity .6s,stroke-width .6s;filter:drop-shadow(0 0 3px #9a6ce0)}.connections circle{fill:#c5abf5;opacity:.6}.stage[data-selected=web] .web-connection,.stage[data-selected=crm] .crm-connection,.stage[data-selected=flow] .flow-connection{opacity:1;stroke-width:2;stroke-dasharray:9 5;animation:signal 2s linear infinite}.reflection{position:absolute;bottom:-22px;left:0;right:-5%;height:60px;background:radial-gradient(ellipse,#8661d52b,transparent 68%);filter:blur(10px);z-index:-1;pointer-events:none}footer{max-width:1580px;margin:auto;padding:28px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:8px;color:#80718f;letter-spacing:.6px}footer label{display:flex;align-items:center;gap:6px;cursor:pointer}input{accent-color:#a781d9}footer>span:last-child{font-size:8px;color:#675c75;letter-spacing:0}@keyframes signal{to{stroke-dashoffset:-28}}
@media(min-width:1400px){.stage{height:680px}.screen-web .web-visual{min-height:260px}.screen-top{height:56px}.contact-row{padding:15px 0}.flow-row{padding:14px 10px}.flow-join{height:18px}}
@media(max-width:1100px) and (min-width:761px){main{gap:15px;padding-top:45px}.stage{height:540px}.screen-top{padding:0 12px;gap:6px;height:43px}.screen-top strong{font-size:11px}.screen-icon{font-size:18px}.window-dots{letter-spacing:1px}.web-visual{min-height:190px;padding:14px}.web-heading{font-size:23px}.contact-row{gap:4px;padding:9px 0;font-size:6px}.crm-content,.flow-content{padding:10px 8px}.tag{padding:3px 4px;font-size:5px}.avatar{width:18px;height:18px;font-size:6px}.flow-row{padding:8px 5px;gap:5px}.flow-icon{width:20px;height:22px}.flow-row strong{font-size:7px}.flow-row small{font-size:5px}.thumbnails i{height:28px}}
@media(max-width:760px){.demo-bar{padding:8px 5%;flex-wrap:wrap;gap:3px}.demo-bar>span{font-size:6px;letter-spacing:1px}.demo-bar button{font-size:9px;padding:5px 8px}header{height:75px}header img{width:126px;height:auto}.header-caption{display:none}.edition{font-size:7px}main{display:block;padding:40px 6% 10px}.eyebrow{font-size:6px;letter-spacing:1.1px;margin-bottom:20px}h1{font-size:clamp(43px,10.5vw,62px);line-height:1.04}h1 br:nth-of-type(1){display:none}.description{font-size:12px;margin-top:20px}.instruction{margin-top:21px}.instruction p{font-size:11px}.selected-description{font-size:10px;margin-top:15px;min-height:34px}.sample-label{font-size:5px}.stage{height:540px;margin:28px 0 14px}.screen-web{width:60%;top:18%;height:74%;--angle:-2deg}.screen-crm{width:36%;top:0;height:43%;--angle:3deg}.screen-flow{width:36%;bottom:3%;height:44%;--angle:2deg}.screen{border-radius:8px}.screen[data-active=true]{--zoom:1.045;--lift:-4px}.screen-top{height:35px;padding:0 8px;gap:5px}.screen-top strong{font-size:9px}.screen-icon{font-size:16px}.window-dots{font-size:9px;letter-spacing:1px}.web-content{padding:9px 8px 0}.mini-nav{font-size:4px;letter-spacing:.4px}.mini-nav small{display:none}.web-visual{padding:15px 10px;min-height:220px;margin-top:10px}.web-eyebrow{font-size:4px;letter-spacing:.5px}.web-heading{font-size:22px;margin-top:15px}.web-subtitle{font-size:6px}.mini-cta{font-size:6px}.thumbnails{gap:5px;margin-top:12px}.thumbnails i{height:30px}.thumbnails>span{font-size:5px}.screen-foot{font-size:4px;margin:11px 8px}.crm-content{padding:8px 6px}.search{padding:6px;font-size:8px;gap:3px}.search span{font-size:5px}.contact-row{padding:9px 0;gap:4px;font-size:5px}.avatar{width:17px;height:17px;font-size:5px}.tag{font-size:4px;padding:3px}.flow-content{padding:11px 6px}.flow-row{padding:9px 4px;gap:4px}.flow-icon{width:19px;height:23px;font-size:16px;border-radius:4px}.blue-icon,.green-icon{font-size:12px}.flow-row strong{font-size:6px}.flow-row small{font-size:4.5px;margin-top:4px}.flow-join{height:13px;margin-left:13px}.reflection{height:35px;bottom:0}footer{padding:20px 6%;flex-wrap:wrap;gap:15px;font-size:7px}footer>span:last-child{width:100%;font-size:8px}.stage-light{inset:0 -5%}.selected-description{max-width:100%}}
@media(prefers-reduced-motion:reduce){.screen,.screen-edge,.connection,.screen:before{transition:none!important;animation:none!important}.screen{--rx:0deg!important;--ry:0deg!important}.screen[data-active=true]{--zoom:1;--lift:0px}.stage[data-selected] .screen:not([data-active=true]){filter:none}}
body.reduced-motion .screen,body.reduced-motion .screen-edge,body.reduced-motion .connection,body.reduced-motion .screen:before{transition:none!important;animation:none!important}body.reduced-motion .screen{--rx:0deg!important;--ry:0deg!important}body.reduced-motion .screen[data-active=true]{--zoom:1;--lift:0px}
.web-visual{background-size:cover,225% auto;background-position:0 0,100% 42%;background-repeat:no-repeat}

}
/* Approved connected-screen composition: sapphire, violet, platinum. */
.connected-hero{--ease:cubic-bezier(.22,.68,.18,1);min-height:920px;height:100svh;max-height:1200px;display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;align-items:center;padding:140px 6.5% 95px;background:#090c14;isolation:isolate;overflow:hidden}.connected-hero .hero-image{inset:0;background:radial-gradient(ellipse at 80% 60%,#29326d18,transparent 55%);transform:none!important;filter:none;animation:none}.connected-hero .hero-shade{background:radial-gradient(ellipse at 92% 85%,#54308113,transparent 55%);pointer-events:none}.connected-hero .hero-content{position:relative;z-index:4;padding:0;width:100%;max-width:none;text-align:left}.connected-hero .eyebrow{margin-bottom:27px;color:#a4aaca;font-size:8px;letter-spacing:2px;gap:10px}.connected-hero h1{font-size:clamp(46px,4.75vw,77px);line-height:1.04;letter-spacing:-.05em;color:#f5f3f8}.connected-hero h1 em{color:#aaa4ed}.connected-hero .hero-copy{font:14px/1.85 'DM Sans',Arial,sans-serif;color:#b1b5c9;max-width:430px;margin:25px 0 0}.connected-hero .hero-buttons{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}.connected-hero .hero-buttons .button{background:linear-gradient(120deg,#523a892e,#26427830) padding-box,linear-gradient(120deg,#bd9ce980,#839ee095) border-box;min-height:52px;color:#f4f0ff}.connected-hero .hero-buttons .button:hover{box-shadow:0 9px 32px #4058ba16,inset 0 1px #fff2}.connected-hero .text-link{color:#c7cce0;font-size:11px;gap:22px}.connected-stage-wrap{position:relative;z-index:3;width:100%;min-width:0}.connected-hero .stage{height:640px;max-width:740px;margin:0 auto}.connected-hero .screen{border-color:#9aace56b;background:linear-gradient(135deg,#1d2439fa,#0d1321fa);box-shadow:inset 0 1px #ebf2ff26,0 17px 50px #0006,0 0 14px #6285dc0c;transition:transform .7s var(--ease),border-color .5s,box-shadow .7s,filter .7s}.connected-hero .screen[data-active=true]{--zoom:1.055;--lift:-6px;border-color:#d7e5ff;box-shadow:inset 0 1px #f4f8ff73,0 22px 60px #0008,0 0 25px #677cfb34,0 0 50px #9766dc13}.connected-hero .screen[data-active=true] .screen-edge{border-color:#d9e4ffb0;box-shadow:0 0 16px #8da6ff63,inset 0 0 13px #a993ec12}.connected-hero .screen-top{border-color:#a9b9e31c}.connected-hero .screen-icon{color:#afbcf8}.connected-hero .window-dots{color:#798bb9}.connected-hero .screen-top strong{color:#e8edff;font-weight:400}.connected-hero .contact-row{border-color:#a3b5e314}.connected-hero .search{background:#0c1426;border-color:#92a4d332}.connected-hero .tag.blue{color:#b2d6ff;background:#315a9730}.connected-hero .tag.violet{color:#d9c4ff;background:#6444a329}.connected-hero .avatar{color:#d0d8f5;background:#6276b31a;border-color:#9aabe133}.connected-hero .flow-row{background:#a2b5e008;border-color:#b5c7ed1a}.connected-hero .flow-icon{background:linear-gradient(135deg,#9d8be9,#4f4c91)}.connected-hero .blue-icon{background:linear-gradient(135deg,#7aa2ec,#39568e)}.connected-hero .green-icon{background:linear-gradient(135deg,#8bb4d5,#386d82)}.connected-hero .stage-light{background:radial-gradient(ellipse at 55% 60%,#5d54ba18,transparent 65%)}.connected-hero .screen:before{background:radial-gradient(180px circle at var(--light-x,50%) var(--light-y,50%),#b4d3ff12,transparent 75%)}.connected-hero .web-visual{background:linear-gradient(90deg,#0b1120b8,#0b112008),url('assets/connected-architecture.png') 60% 50%/cover no-repeat}.connected-hero .web-subtitle{color:#d1d5e7}.connected-hero .thumbnails>span:nth-child(1) i{background:linear-gradient(135deg,#59638488,#17263d)}.connected-hero .thumbnails>span:nth-child(3) i{background:linear-gradient(135deg,#77658b66,#223b56)}.connected-hero .screen-foot{font-size:5px;color:#7d8aa7}.connected-hero .stage[data-selected] .screen:not([data-active=true]){filter:brightness(.87)}.screen-caption{min-height:33px;margin:22px 0 0;color:#8e9bbd;font:10px/1.7 'DM Sans',Arial,sans-serif;max-width:410px}.screen-interaction-hint{text-align:center;font:8px/1.7 'DM Sans',Arial,sans-serif;letter-spacing:1px;color:#7885a3;margin:20px 0 0}.connected-hero .hero-bottom{left:6.5%;right:6.5%;bottom:30px;z-index:5;font-size:7px;letter-spacing:1.5px;color:#7e8aa6}.connected-hero .hero-bottom>a{margin-right:40px;color:#a7b2cc}.connected-hero .connection{stroke-width:1;opacity:.55}.connected-hero .connections circle{fill:#cad8ff}.connected-hero .reflection{background:radial-gradient(ellipse,#7895df1c,transparent 68%)}
@media(min-width:1500px){.connected-hero{gap:55px}.connected-hero .stage{height:690px}}
@media(max-width:1100px) and (min-width:761px){.connected-hero{padding-left:5%;padding-right:5%;gap:24px;min-height:820px}.connected-hero h1{font-size:54px}.connected-hero .stage{height:540px}.connected-hero .hero-copy{font-size:12px}.connected-hero .eyebrow{font-size:7px;letter-spacing:1.5px}.connected-hero .hero-buttons{gap:18px}.connected-hero .hero-buttons .button{font-size:10px;gap:14px;padding-left:16px}}
@media(max-width:760px){.connected-hero{display:block;height:auto;max-height:none;min-height:0;padding:133px 7% 85px;overflow:hidden}.connected-hero .hero-content{padding:0;min-height:0;width:100%;text-align:left}.connected-hero h1{font-size:clamp(44px,10.8vw,65px);line-height:1.04}.connected-hero h1 br:nth-of-type(1){display:none}.connected-hero .eyebrow{font-size:6px;letter-spacing:1.3px;margin-bottom:23px}.connected-hero .hero-copy{font-size:12px;line-height:1.85;margin-top:23px;max-width:330px}.connected-hero .hero-buttons{gap:20px;margin-top:25px;align-items:center}.connected-hero .hero-buttons .button{min-height:48px;font-size:10px;padding-left:17px;gap:12px}.connected-hero .text-link{font-size:10px;gap:12px}.screen-caption{font-size:9px;min-height:30px;margin-top:17px}.connected-stage-wrap{margin-top:24px}.connected-hero .stage{height:545px;margin:0}.connected-hero .screen[data-active=true]{--zoom:1.04;--lift:-3px}.screen-interaction-hint{font-size:7px;margin-top:4px}.connected-hero .hero-bottom{left:7%;right:7%;bottom:22px;font-size:5px;letter-spacing:.8px;align-items:center}.connected-hero .hero-bottom>a{margin-right:40px;max-width:100px;line-height:1.7}.connected-hero .web-visual{min-height:225px}.connected-hero .stage .screen-top{gap:5px}.connected-hero .stage .screen-top strong{font-size:9px}.connected-hero .screen-foot{font-size:4px;letter-spacing:.2px}.connected-hero .web-heading{font-size:22px}}
@media(prefers-reduced-motion:reduce){.connected-hero .screen{transition:none!important}.connected-hero .screen[data-active=true]{--zoom:1;--lift:0}.connected-hero .stage[data-selected] .screen:not([data-active=true]){filter:none}.connected-hero .connection{animation:none!important}}
/* Keep all illustrative contacts inside the glass panel at every breakpoint. */
.connected-hero .contact-row{padding:9px 0;font-size:8px}.connected-hero .tag{font-size:6px}.connected-hero .search span{font-size:8px}.connected-hero .avatar{font-size:7px}.connected-hero .hero-buttons .button{background:linear-gradient(120deg,#243153,#1c213d) padding-box,linear-gradient(120deg,#c5b6ed9c,#97bdf1a3) border-box;border-color:transparent}.connected-hero .web-subtitle{font-size:8px;line-height:1.8}
@media(max-width:1100px){.connected-hero .contact-row{padding:8px 0;font-size:6px}.connected-hero .tag{font-size:5px}.connected-hero .search span{font-size:6px}.connected-hero .avatar{font-size:6px}}
@media(max-width:760px){.connected-hero .contact-row{padding:9px 0;font-size:5px}.connected-hero .tag{font-size:4px}.connected-hero .search span{font-size:5px}.connected-hero .avatar{font-size:5px}.connected-hero .web-subtitle{font-size:6px}}
/* Continue the entry's calm pacing through the first scene and its controls. */
.connected-hero .screen{transition:transform .95s cubic-bezier(.22,.61,.25,1),border-color .8s ease,box-shadow .95s ease,filter .85s ease}
.connected-hero .screen[data-active=true]{--zoom:1.035;--lift:-4px}
.connected-hero .screen-edge,.connected-hero .screen:before{transition:border-color .8s ease,box-shadow .95s ease,opacity .85s ease}
.connected-hero .connection{transition:opacity .85s ease,stroke-width .85s ease}
.connected-hero .stage[data-selected] .connection{animation-duration:3.4s}
body.intro-open:not(.intro-revealing) .connected-stage-wrap{opacity:0}
body.intro-revealing .connected-stage-wrap{animation:scene-unveil 1.6s cubic-bezier(.4,0,.2,1) both}
@keyframes scene-unveil{0%,12%{opacity:0;translate:0 14px}100%{opacity:1;translate:0 0}}
@media(max-width:760px){.connected-hero .screen[data-active=true]{--zoom:1.025;--lift:-2px}.connected-hero .screen{transition-duration:.85s,.75s,.85s,.75s}}
@media(prefers-reduced-motion:reduce){body.intro-open:not(.intro-revealing) .connected-stage-wrap{opacity:1}body.intro-revealing .connected-stage-wrap{animation:none}.connected-hero .screen,.connected-hero .screen-edge,.connected-hero .connection,.connected-hero .screen:before{transition:none!important;animation:none!important}.connected-hero .screen[data-active=true]{--zoom:1;--lift:0}}
/* Editorial continuity with the sections that follow. */
.connected-hero{background:#0c0e10;grid-template-columns:1fr 1.1fr;gap:46px;min-height:820px;height:auto;max-height:none;padding:165px 6% 110px}
.connected-hero .hero-image{background:radial-gradient(ellipse at 78% 55%,#81709608,transparent 65%)}
.connected-hero .hero-shade{background:linear-gradient(0deg,#0c0e10,transparent 32%)}
.connected-hero h1{font-size:clamp(44px,4.65vw,70px);line-height:1.08;letter-spacing:-.045em}
.connected-hero h1 em{color:#bdaec9}
.connected-hero .eyebrow{color:#aaa0b1;letter-spacing:2.2px;margin-bottom:28px}
.connected-hero .hero-copy{color:#aaa6ae;font-size:13px;line-height:1.9;max-width:390px}
.connected-hero .hero-buttons{gap:22px;margin-top:28px;flex-wrap:nowrap}
.connected-hero .hero-buttons .button{background:linear-gradient(120deg,#2d253633,#19202a33) padding-box,linear-gradient(120deg,#a18aaf69,#7185a269) border-box;min-height:50px;font-size:10px;gap:18px;padding-left:19px;padding-right:15px;white-space:nowrap}
.connected-hero .text-link{font-size:10px;gap:14px;white-space:nowrap;color:#beb6c5}
.connected-hero .stage{height:570px}
.connected-hero .screen{border-color:#a499b343;background:linear-gradient(135deg,#1b1b24fa,#11131afa);box-shadow:inset 0 1px #ede3ff13,0 17px 40px #0004,0 0 12px #9784b006}
.connected-hero .screen[data-active=true]{border-color:#c4b5d3a6;box-shadow:inset 0 1px #f4eaff30,0 20px 45px #0005,0 0 20px #a18ac31c}
.connected-hero .screen[data-active=true] .screen-edge{border-color:#c5b4da70;box-shadow:0 0 9px #ac92cf30,inset 0 0 10px #a993ec09}
.connected-hero .stage-light{background:radial-gradient(ellipse at 55% 65%,#8d709410,transparent 65%)}
.connected-hero .screen-icon{color:#b7a7cb}.connected-hero .screen-top strong{color:#ddd6e4}
.connected-hero .reflection{opacity:.4}.connected-hero .connection{opacity:.3}.connected-hero .connections circle{opacity:.35}
.connected-hero .screen-caption{color:#8f849b;font-size:9px;max-width:350px;margin-top:25px}
.connected-hero .screen-interaction-hint{color:#7f748b;font-size:7px;letter-spacing:1.2px}
.connected-hero .hero-bottom{color:#8d8296;font-size:7px}
@media(min-width:761px) and (max-width:1150px){.connected-hero{gap:26px;padding-left:5%;padding-right:5%;min-height:780px}.connected-hero h1{font-size:clamp(40px,4.6vw,53px)}.connected-hero .stage{height:530px}.connected-hero .hero-buttons{gap:18px;flex-wrap:wrap}}
@media(max-width:760px){.connected-hero{display:block;padding:135px 7% 85px;min-height:0}.connected-hero h1{font-size:clamp(40px,10.5vw,64px);line-height:1.08}.connected-hero h1 br:nth-of-type(1){display:initial}.connected-hero .hero-copy{font-size:12px;max-width:340px}.connected-hero .hero-buttons{flex-wrap:wrap;gap:20px}.connected-hero .stage{height:520px}.connected-stage-wrap{margin-top:18px}.connected-hero .screen-caption{font-size:9px;margin-top:20px}}
.connected-hero .web-visual{min-height:185px}.connected-hero .thumbnails{margin-top:10px}.connected-hero .thumbnails i{height:28px}.connected-hero .screen-foot{margin-top:10px;margin-bottom:10px}.connected-hero .screen-flow .flow-content{padding-top:10px;padding-bottom:10px}.connected-hero .screen-flow .flow-row{padding-top:8px;padding-bottom:8px}.connected-hero .screen-flow .flow-join{height:10px}
@media(max-width:1150px) and (min-width:761px){.connected-hero .stage{height:570px}}
@media(max-width:760px){.connected-hero .stage{height:555px}.connected-hero .web-visual{min-height:185px}}
/* Atmospheric backdrop in the same charcoal palette as the rest of the site. */
.connected-hero .hero-image{background:radial-gradient(ellipse 48% 62% at 79% 49%,#65517917,transparent 76%),radial-gradient(ellipse 55% 42% at 67% 100%,#4e668510,transparent 80%),linear-gradient(125deg,#0c0e10 28%,#101117 70%,#0c0e10);overflow:hidden}
.connected-hero .hero-image:before{content:'';position:absolute;inset:10% -15% -48% 29%;border:1px solid #b6a0cc0c;border-radius:50%;transform:rotate(-24deg);background:radial-gradient(ellipse at 50% 50%,transparent 52%,#a38abd05 70%,transparent 74%);pointer-events:none}
.connected-hero .hero-image:after{content:'';position:absolute;inset:0;background-image:linear-gradient(#c2b1d005 1px,transparent 1px),linear-gradient(90deg,#c2b1d005 1px,transparent 1px);background-size:90px 90px;mask-image:radial-gradient(ellipse at 80% 55%,#0008,transparent 64%);pointer-events:none}
.connected-hero .hero-shade{background:linear-gradient(0deg,#0c0e10 0%,#0c0e1000 27%),linear-gradient(90deg,#0c0e1038,transparent 58%);pointer-events:none}
@media(max-width:760px){.connected-hero .hero-image{background:radial-gradient(ellipse 100% 40% at 65% 70%,#65517914,transparent 80%),linear-gradient(#0c0e10,#0f1015 65%,#0c0e10)}.connected-hero .hero-image:before{inset:35% -60% -12% -25%}.connected-hero .hero-image:after{background-size:65px 65px;mask-image:radial-gradient(ellipse at 65% 70%,#0006,transparent 58%)}}
/* Tiny compositor-only drift, with spare edges to keep the charcoal seamless. */
.connected-hero .hero-image{inset:-10px;translate:var(--scene-x,0px) var(--scene-y,0px)}
@media(prefers-reduced-motion:reduce){.connected-hero .hero-image{translate:none!important}}
/* Softer atmospheric depth, without adding new foreground elements. */
.connected-hero .hero-image{background:radial-gradient(ellipse 53% 58% at 77% 46%,#6f597e13,transparent 78%),radial-gradient(ellipse 60% 32% at 73% 84%,#54698112,transparent 80%),linear-gradient(125deg,#0c0e10 20%,#101116 73%,#0c0e10)}
.connected-hero .hero-image:before{inset:8% -20% -44% 24%;border-color:#b6a0cc08;background:radial-gradient(ellipse at 50% 50%,transparent 49%,#a38abd04 68%,transparent 76%);box-shadow:inset 0 0 100px #a68cb503}
.connected-hero .hero-image:after{opacity:.6;background-size:110px 110px;mask-image:radial-gradient(ellipse at 79% 55%,#0006,transparent 65%)}
.connected-hero .stage-light{background:radial-gradient(ellipse at 56% 65%,#8d709411,transparent 69%)}
.connected-hero .screen{transition:transform .8s cubic-bezier(.22,.61,.25,1),border-color .85s ease,box-shadow 1s ease,filter .9s ease}
.connected-hero .stage[data-selected] .screen:not([data-active=true]){filter:brightness(.94)}
.connected-hero .screen:before{opacity:.4}.connected-hero .screen[data-active=true]:before{opacity:.7}
@media(max-width:760px){.connected-hero .hero-image{background:radial-gradient(ellipse 110% 42% at 70% 65%,#69577c12,transparent 80%),radial-gradient(ellipse 95% 25% at 45% 85%,#5469810d,transparent 80%),linear-gradient(#0c0e10,#101116 65%,#0c0e10)}.connected-hero .hero-image:before{inset:32% -65% -15% -30%;opacity:.7}.connected-hero .screen{transition-duration:.8s,.8s,.9s,.8s}}
@media(prefers-reduced-motion:reduce){.connected-hero .screen{transition:none!important}}
/* A tighter opening composition and more considered miniature web presentation. */
@media(min-width:761px){.connected-hero{min-height:760px;padding-top:135px;padding-bottom:95px;gap:38px}.connected-hero .stage{height:535px}.connected-hero .hero-content{align-self:center}.connected-hero .eyebrow{margin-bottom:24px}.connected-hero .screen-top{height:44px}.connected-hero .web-visual{min-height:170px}.connected-hero .screen-web{top:15%;height:77%}.connected-hero .screen-crm{height:46%}.connected-hero .screen-flow{height:46%;bottom:2%}.connected-hero .contact-row{padding-top:10px;padding-bottom:10px}}
.connected-hero .screen-web .web-content{padding:12px 12px 0}.connected-hero .screen-web .mini-nav{color:#c5bccf;letter-spacing:1.3px}.connected-hero .screen-web .web-visual{border:1px solid #b9a8c619;background:linear-gradient(90deg,#0b1120c9,#0b11201c),url('assets/connected-architecture.png') 64% 50%/cover no-repeat}.connected-hero .screen-web .web-heading{letter-spacing:-.65px}.connected-hero .screen-web .thumbnails i{background:linear-gradient(#11131c30,#11131c60),url('assets/connected-architecture.png') 10% 62%/220% auto;border-color:#b9a8c61a}.connected-hero .screen-web .thumbnails>span:nth-child(2) i{background-position:50% 35%}.connected-hero .screen-web .thumbnails>span:nth-child(3) i{background-position:94% 60%}.connected-hero .screen-web .screen-edge{border-color:#b3a0df23}.connected-hero .screen-web .mini-cta{background:#b0a0c20a;border-color:#bba9cb38}.connected-hero .screen-web .web-subtitle{color:#c3bdcc}
.connected-hero .hero-image:before{opacity:.65}.connected-hero .screen[data-active=true]{box-shadow:inset 0 1px #f4eaff24,0 20px 45px #0005,0 0 18px #a18ac314}
@media(max-width:760px){.connected-hero{padding-top:125px}.connected-hero .connected-stage-wrap{margin-top:14px}.connected-hero .screen-web .web-visual{min-height:185px}.connected-hero .screen-web .thumbnails i{height:28px}}
.connected-hero .screen-web .thumbnails>span:nth-child(n) i{background-image:linear-gradient(#11131c30,#11131c60),url('assets/connected-architecture.png');background-size:auto,220% auto}
@media(min-width:761px){.connected-hero .screen-crm .crm-content{padding:9px 10px}.connected-hero .screen-crm .contact-row{padding-top:7px;padding-bottom:7px;min-height:0}.connected-hero .screen-crm .search{padding:6px}.connected-hero .screen-crm .avatar{width:20px;height:20px}.connected-hero .screen-crm .tag{padding:3px 5px}}
/* Reserve breathing room under the web preview footer on desktop. */
@media(min-width:761px){.connected-hero .screen-web{height:80%}}
/* Crossfade attention between cards without a bright flash or a large jump. */
.connected-hero .screen{transition:transform 1s cubic-bezier(.22,.61,.25,1),border-color 1.05s ease,box-shadow 1.15s ease,filter 1.05s ease}
.connected-hero .screen[data-active=true]{--zoom:1.025;--lift:-3px;border-color:#bcafcc8f;box-shadow:inset 0 1px #f4eaff1c,0 20px 45px #0005,0 0 15px #a18ac310}
.connected-hero .screen[data-active=true] .screen-edge{border-color:#c5b4da56;box-shadow:0 0 8px #ac92cf20,inset 0 0 8px #a993ec06}
.connected-hero .screen-edge{transition:border-color 1.05s ease,box-shadow 1.15s ease}
.connected-hero .screen:before{opacity:.3;transition:opacity 1.05s ease}.connected-hero .screen[data-active=true]:before{opacity:.5}
.connected-hero .stage[data-selected] .screen:not([data-active=true]){filter:brightness(.97)}
.connected-hero .connection{transition:opacity 1.1s ease,stroke-width 1.1s ease}
.connected-hero .stage[data-selected=web] .web-connection,.connected-hero .stage[data-selected=crm] .crm-connection,.connected-hero .stage[data-selected=flow] .flow-connection{opacity:.62;stroke-width:1.35}
@media(max-width:760px){.connected-hero .screen{transition-duration:.85s,.95s,1s,.95s}.connected-hero .screen[data-active=true]{--zoom:1.015;--lift:-1px}}
@media(prefers-reduced-motion:reduce){.connected-hero .screen,.connected-hero .screen-edge,.connected-hero .screen:before,.connected-hero .connection{transition:none!important}.connected-hero .screen[data-active=true]{--zoom:1;--lift:0}}
/* Graphite notebook: restrained metal, wide display and a fine camera bezel. */
.connected-hero .stage .screen-web{width:70%;height:auto;aspect-ratio:1.26;top:24%;left:-2%;padding:12px 8px 8px;border:1px solid #8b879a73;border-radius:13px 13px 6px 6px;background:linear-gradient(140deg,#272832,#101217 65%);--angle:-2deg;box-shadow:inset 0 1px #e0d9ef26,0 18px 40px #0006}
.connected-hero .screen-web .screen-top{height:23px;padding:0 8px;gap:6px;background:#12141a;border-radius:4px 4px 0 0}.connected-hero .screen-web .screen-top strong{font-size:8px}.connected-hero .screen-web .screen-icon{font-size:12px}.connected-hero .screen-web .window-dots{font-size:8px}
.connected-hero .screen-web .web-content{padding:8px 8px 0;background:#101219}.connected-hero .screen-web .mini-nav{font-size:5px;letter-spacing:.8px}.connected-hero .screen-web .mini-nav small{font-size:4px}
.connected-hero .screen-web .web-visual{min-height:0;height:155px;margin-top:8px;padding:12px;border-radius:2px}.connected-hero .screen-web .web-heading{font-size:23px;margin-top:7px}.connected-hero .screen-web .web-eyebrow{font-size:4px}.connected-hero .screen-web .web-subtitle{font-size:6px;margin-top:7px;max-width:145px}.connected-hero .screen-web .mini-cta{font-size:5px;margin-top:8px;padding:4px 8px}
.connected-hero .screen-web .thumbnails{margin-top:8px;gap:6px}.connected-hero .screen-web .thumbnails i{height:23px;margin-bottom:4px}.connected-hero .screen-web .thumbnails>span{font-size:5px}.connected-hero .screen-web .screen-foot{font-size:4px;margin:7px 8px 1px;letter-spacing:.5px}
.laptop-camera{position:absolute;top:3px;left:50%;width:3px;height:3px;border-radius:50%;background:#343d4c;box-shadow:0 0 0 2px #0a0b0f}
.laptop-base{position:absolute;left:-7%;right:-7%;bottom:-10px;height:12px;border-radius:2px 2px 50% 50%/2px 2px 9px 9px;background:linear-gradient(#65626e,#36363f 28%,#1d2028 75%,#55515e);border:1px solid #91869940;box-shadow:0 9px 16px #0005;pointer-events:none}.laptop-base:before{content:'';position:absolute;left:41%;right:41%;top:-1px;height:4px;background:#252730;border-radius:0 0 5px 5px}
.connected-hero .stage .screen-crm,.connected-hero .stage .screen-flow{width:29%;right:-3%}
@media(max-width:760px){.connected-hero .stage .screen-web{width:75%;top:29%;left:-2%;aspect-ratio:auto;height:292px}.connected-hero .screen-web .web-visual{height:148px;min-height:0}.connected-hero .screen-web .web-heading{font-size:20px}.connected-hero .screen-web .web-subtitle{font-size:5px}.connected-hero .screen-web .thumbnails i{height:20px}.connected-hero .stage .screen-crm,.connected-hero .stage .screen-flow{width:29%;right:-3%}.connected-hero .screen-web .screen-top{height:22px}.connected-hero .screen-web .screen-foot{font-size:3px}}
.connected-hero .stage .screen-crm,.connected-hero .stage .screen-flow{width:34%;right:-4%}
.connected-hero .stage .screen-web{align-content:start;aspect-ratio:1.4}
@media(max-width:760px){.connected-hero .stage .screen-web{height:245px;aspect-ratio:auto;top:32%}.connected-hero .screen-web .web-visual{height:112px}.connected-hero .screen-web .web-heading{font-size:17px;margin-top:5px}.connected-hero .screen-web .web-subtitle{margin-top:5px}.connected-hero .screen-web .mini-cta{margin-top:5px;padding:3px 7px}.connected-hero .screen-web .thumbnails i{height:17px}.connected-hero .screen-web .screen-foot{margin-top:5px}}
/* Keep the full notebook silhouette separate from the CRM and follow-up cards. */
.connected-hero .stage .screen-web{width:67%}.connected-hero .laptop-base{left:-4%;right:-4%}
@media(max-width:760px){.connected-hero .stage .screen-web{width:64%;left:-1%;height:245px}.connected-hero .screen-web .web-visual{padding:9px}.connected-hero .screen-web .web-heading{font-size:16px}.connected-hero .screen-web .web-subtitle{font-size:5px;line-height:1.5}.connected-hero .screen-web .thumbnails{gap:4px}.connected-hero .screen-web .thumbnails>span{font-size:4px}}
.connected-hero .stage .screen-web{width:64%}
@media(max-width:760px){.connected-hero .stage .screen-web{width:61%}}
@media(min-width:761px){.connected-hero .stage .screen-web{aspect-ratio:1.33}}
/* Panoramic web canvas: a clearer silhouette than the compact notebook. */
.connected-hero .stage .screen-web{width:68%;height:342px;aspect-ratio:auto;top:22%;left:-4%;padding:0 0 10px;border-radius:10px;background:linear-gradient(145deg,#20212b,#101219);--angle:-2deg;border-color:#9e91ae59;align-content:start}
.connected-hero .screen-web .laptop-camera,.connected-hero .screen-web .laptop-base{display:none}
.connected-hero .screen-web .screen-top{height:31px;padding:0 12px;background:linear-gradient(#25253080,#171921);border-radius:9px 9px 0 0;border-bottom:1px solid #c3afe418}
.connected-hero .screen-web .screen-top strong{font-size:9px;font-weight:400}.connected-hero .screen-web .window-dots{font-size:10px;color:#9e93af}.connected-hero .screen-web .screen-icon{font-size:14px}
.connected-hero .screen-web .web-content{padding:10px 11px 0;background:none}.connected-hero .screen-web .mini-nav{font-size:6px}.connected-hero .screen-web .mini-nav small{font-size:5px}
.connected-hero .screen-web .web-visual{height:199px;min-height:0;margin-top:10px;padding:17px;background:linear-gradient(90deg,#0b1120d1,#0b11200c),url('assets/connected-architecture.png') 65% 50%/cover no-repeat;border-color:#b9a8c60f}
.connected-hero .screen-web .web-heading{font-size:27px;line-height:1.1;margin-top:9px;letter-spacing:-.8px}.connected-hero .screen-web .web-subtitle{font-size:6px;max-width:155px;line-height:1.7;margin-top:10px}.connected-hero .screen-web .web-eyebrow{font-size:5px;letter-spacing:1.2px}.connected-hero .screen-web .mini-cta{font-size:6px;padding:5px 9px;margin-top:10px}
.connected-hero .screen-web .thumbnails{margin-top:10px;gap:7px}.connected-hero .screen-web .thumbnails i{height:28px;margin-bottom:4px}.connected-hero .screen-web .thumbnails>span{font-size:5px}.connected-hero .screen-web .screen-foot{font-size:4px;margin:8px 11px 0}
.connected-hero .stage .screen-crm,.connected-hero .stage .screen-flow{right:-5%;width:34%}
@media(max-width:1150px) and (min-width:761px){.connected-hero .stage .screen-web{height:322px}.connected-hero .screen-web .web-visual{height:180px}.connected-hero .screen-web .web-heading{font-size:23px}}
@media(max-width:760px){.connected-hero .stage{height:580px}.connected-hero .stage .screen-web{left:0;top:1%;width:100%;height:300px;--angle:-1deg}.connected-hero .screen-web .web-visual{height:163px;padding:13px}.connected-hero .screen-web .web-heading{font-size:24px}.connected-hero .screen-web .web-subtitle{font-size:6px}.connected-hero .screen-web .thumbnails i{height:23px}.connected-hero .stage .screen-crm,.connected-hero .stage .screen-flow{top:auto;bottom:0;right:0;width:47%;height:245px;--angle:1deg}.connected-hero .stage .screen-crm{left:0;right:auto;--angle:-1deg}.connected-hero .screen-crm .crm-content{padding:10px}.connected-hero .screen-crm .contact-row{padding-top:7px;padding-bottom:7px;min-height:0}.connected-hero .screen-crm .search{padding:6px}.connected-hero .screen-crm .screen-top{height:40px}.connected-hero .screen-flow .screen-top{height:40px}}
/* One continuous signal phase: selection changes its intensity, never its position. */
.connected-hero .connections circle{display:none}
.connected-hero .connection{stroke-dasharray:2 12;stroke-linecap:round;stroke-width:1;opacity:.2;filter:none;animation:connected-drift 8s linear infinite;animation-play-state:paused;transition:opacity 1.2s ease,stroke-width 1.2s ease}
.connected-hero .scene-in-view .connection{animation-play-state:running}
.connected-hero .stage[data-selected=web] .web-connection,.connected-hero .stage[data-selected=crm] .crm-connection,.connected-hero .stage[data-selected=flow] .flow-connection{animation:connected-drift 8s linear infinite;stroke-dasharray:2 12;opacity:.55;stroke-width:1.2}
.connected-hero .stage:not(.scene-in-view) .connection{animation-play-state:paused}
@keyframes connected-drift{to{stroke-dashoffset:-56}}
@media(max-width:760px){.connected-hero .connection{opacity:.18}.connected-hero .screen[data-active=true]{--zoom:1.012;--lift:-1px}}
@media(prefers-reduced-motion:reduce){.connected-hero .connection{animation:none!important;transition:none!important;stroke-dasharray:none}}
/* Carry the scene quietly into the connected-system chapter. */
.connected-hero .hero-bottom:before{content:'';position:absolute;left:50%;bottom:-30px;width:1px;height:62px;background:linear-gradient(transparent,#a998bf32,#a998bf16);pointer-events:none}
.connected-hero .hero-bottom:after{content:'';position:absolute;left:calc(50% - 2px);bottom:-2px;width:4px;height:4px;border:1px solid #b3a0c43b;border-radius:50%;background:#17151d;pointer-events:none}
#sistema{background:linear-gradient(#0c0e10,#0d0f12 180px)}
#sistema .journey-sticky:before{content:'';position:absolute;left:50%;top:0;width:1px;height:48px;background:linear-gradient(#a998bf16,transparent);pointer-events:none}
@supports(animation-timeline:view()){
  .connected-hero{view-timeline-name:--opening-scene;view-timeline-axis:block}
  .connected-hero .stage{animation:scene-handoff linear both;animation-timeline:--opening-scene;animation-range:exit 0% exit 85%}
  @keyframes scene-handoff{from{opacity:1;translate:0 0}to{opacity:.82;translate:0 -10px}}
}
@media(max-width:760px){.connected-hero .hero-bottom:before{height:42px;bottom:-22px}.connected-hero .hero-bottom:after{bottom:0}#sistema .journey-sticky:before{height:30px}@keyframes scene-handoff{from{opacity:1;translate:0 0}to{opacity:.9;translate:0 -5px}}}
@media(prefers-reduced-motion:reduce){.connected-hero .stage{animation:none!important;opacity:1;translate:none}}
/* A unified showcase: wide web canvas above two balanced companion panels. */
@media(min-width:761px){.connected-hero{grid-template-columns:.88fr 1.12fr;gap:52px;min-height:875px;padding-top:145px;padding-bottom:105px}.connected-hero .stage{height:625px;max-width:680px}.connected-hero .stage .screen-web{left:0;top:0;width:100%;height:348px;--angle:-1deg}.connected-hero .stage .screen-crm,.connected-hero .stage .screen-flow{top:auto;bottom:0;width:47%;height:244px;right:0;--angle:1deg}.connected-hero .stage .screen-crm{left:0;right:auto;--angle:-1deg}.connected-hero .screen-crm .screen-top,.connected-hero .screen-flow .screen-top{height:37px}.connected-hero .screen-crm .crm-content{padding:9px 12px}.connected-hero .screen-crm .contact-row{padding:6px 0}.connected-hero .screen-flow .flow-row{padding:7px 9px}.connected-hero .screen-flow .flow-join{height:8px}.connected-hero .screen-flow .flow-content{padding:11px 12px}.connected-hero .screen-web .web-visual{height:197px;background-position:65% 50%}.connected-hero .screen-web .web-heading{font-size:30px}.connected-hero .screen-web .web-subtitle{font-size:7px;max-width:190px}.connected-hero .screen-web .mini-cta{font-size:7px}.connected-hero .screen-web .thumbnails i{height:28px}}
.connected-hero .screen-web .screen-top{background:linear-gradient(120deg,#25242e,#191c24);height:32px;border-bottom-color:#c3afe41c}.connected-hero .screen-web .screen-top strong{font-weight:400;letter-spacing:.4px}.connected-hero .screen-web .screen-edge{border-color:#b3a0df18}.connected-hero .screen-web .web-visual{border-radius:4px}.connected-hero .screen-web .thumbnails i{border-radius:3px}.connected-hero .screen-web .screen-foot{color:#8f849e;letter-spacing:.8px}
@media(min-width:761px) and (max-width:1100px){.connected-hero{gap:30px;grid-template-columns:.9fr 1.1fr}.connected-hero h1{font-size:clamp(38px,4.5vw,49px)}.connected-hero .screen-web .web-heading{font-size:26px}.connected-hero .screen-web .web-subtitle{font-size:6px}}
/* Restore the approved floating-screen direction. */
.connected-hero{grid-template-columns:.95fr 1.05fr;gap:35px;min-height:900px;padding:145px 6.5% 110px;background:#080b12}
.connected-hero h1{font-size:clamp(48px,5.2vw,82px);line-height:1.03;letter-spacing:-.05em}.connected-hero h1 em{color:#9e8cf1}.connected-hero .hero-copy{font-size:15px;line-height:1.65;color:#c0bfce;max-width:460px}
.connected-hero .hero-image{background:radial-gradient(ellipse 50% 50% at 80% 65%,#4f378c24,transparent 75%),radial-gradient(ellipse 70% 20% at 70% 94%,#375fbb20,transparent 75%),linear-gradient(#080b12,#070a10)}.connected-hero .hero-image:before{display:none}.connected-hero .hero-image:after{background:repeating-linear-gradient(0deg,transparent 0 16px,#8c9fdb06 17px 18px);inset:72% -10% -20%;transform:perspective(400px) rotateX(60deg);mask-image:radial-gradient(ellipse,#000,transparent 70%);opacity:.55}
.connected-hero .stage{height:650px;max-width:740px}.connected-hero .stage .screen-web{left:-1%;top:18%;bottom:auto;width:62%;height:490px;padding:0 0 12px;--angle:-3deg;border-radius:13px;background:linear-gradient(135deg,#20263cfa,#101526fa);border-color:#a4a9ee9c;box-shadow:inset 0 1px #f3eaff36,0 20px 45px #0006,0 0 17px #7777ed24}
.connected-hero .stage .screen-crm{left:auto;right:-3%;top:2%;bottom:auto;width:34%;height:291px;--angle:4deg}.connected-hero .stage .screen-flow{left:auto;right:-3%;top:auto;bottom:0;width:34%;height:281px;--angle:3deg}
.connected-hero .screen-web .screen-top{height:44px;padding:0 15px}.connected-hero .screen-web .screen-top strong{font-size:12px}.connected-hero .screen-web .screen-icon{font-size:21px;color:#a48cf0}.connected-hero .screen-web .web-content{padding:13px 13px 0}.connected-hero .screen-web .mini-nav{font-size:6px}.connected-hero .screen-web .web-visual{height:280px;padding:16px;margin-top:12px;background-position:65% 50%}.connected-hero .screen-web .web-heading{font-size:29px;line-height:1.13}.connected-hero .screen-web .web-subtitle{font-size:7px;max-width:160px;margin-top:13px}.connected-hero .screen-web .mini-cta{font-size:7px;margin-top:14px}.connected-hero .screen-web .thumbnails{margin-top:12px;gap:7px}.connected-hero .screen-web .thumbnails i{height:45px}.connected-hero .screen-web .thumbnails>span{font-size:6px}.connected-hero .screen-web .screen-foot{font-size:5px;margin-top:13px}
.connected-hero .screen-crm .screen-top,.connected-hero .screen-flow .screen-top{height:45px}.connected-hero .screen-crm .contact-row{padding:11px 0}.connected-hero .screen-flow .flow-row{padding:12px 8px}.connected-hero .screen-flow .flow-join{height:12px}.connected-hero .screen-crm .crm-content,.connected-hero .screen-flow .flow-content{padding:13px 11px}
.connected-hero .screen{border-color:#a495da70;background:linear-gradient(140deg,#1c2032,#101421)}.connected-hero .screen[data-active=true]{border-color:#d6c7ffb0;box-shadow:inset 0 1px #f4eaff30,0 20px 45px #0006,0 0 23px #9876ec2b}.connected-hero .screen-icon{color:#a18ae9}.connected-hero .reflection{opacity:.8;background:radial-gradient(ellipse,#6d72cf30,transparent 70%)}
.connected-hero .hero-buttons .button,header .button.small{border-radius:100px;background:linear-gradient(110deg,#851be8,#185bf0);border:1px solid #9e87f355;color:#fff;box-shadow:0 6px 25px #6532e32a}.connected-hero .hero-buttons .button{font-size:12px;padding:0 18px 0 23px;min-height:54px}.connected-hero .hero-buttons .button>span:last-child,header .button.small>span:last-child{border:0}.connected-hero .text-link{border:1px solid #bfb4d66b;border-radius:100px;padding:15px 20px;font-size:11px;gap:20px}.connected-hero .hero-buttons{gap:20px;flex-wrap:wrap}.connected-hero .screen-caption{font-size:9px;color:#8c87a6}
@media(min-width:761px) and (max-width:1100px){.connected-hero{gap:25px;padding-left:5%;padding-right:5%;grid-template-columns:.9fr 1.1fr}.connected-hero h1{font-size:clamp(43px,5vw,57px)}.connected-hero .hero-copy{font-size:12px}.connected-hero .stage{height:610px}.connected-hero .stage .screen-web{height:465px}.connected-hero .screen-web .web-visual{height:260px}.connected-hero .screen-web .web-heading{font-size:24px}.connected-hero .stage .screen-crm{height:280px}.connected-hero .stage .screen-flow{height:270px}}
@media(max-width:760px){.connected-hero{display:block;min-height:0;padding:128px 7% 85px}.connected-hero h1{font-size:clamp(42px,11vw,64px)}.connected-hero .hero-copy{font-size:12px}.connected-hero .stage{height:580px}.connected-hero .stage .screen-web{left:0;top:1%;width:100%;height:300px;--angle:-1deg}.connected-hero .screen-web .screen-top{height:32px}.connected-hero .screen-web .web-visual{height:163px;padding:13px;margin-top:10px}.connected-hero .screen-web .web-content{padding:10px 11px 0}.connected-hero .screen-web .web-heading{font-size:24px}.connected-hero .screen-web .web-subtitle{font-size:6px;margin-top:8px}.connected-hero .screen-web .mini-cta{font-size:6px;margin-top:8px}.connected-hero .screen-web .thumbnails{margin-top:10px}.connected-hero .screen-web .thumbnails i{height:23px}.connected-hero .screen-web .thumbnails>span{font-size:5px}.connected-hero .screen-web .screen-foot{font-size:4px;margin-top:8px}.connected-hero .stage .screen-crm,.connected-hero .stage .screen-flow{top:auto;bottom:0;right:0;width:47%;height:245px;--angle:1deg}.connected-hero .stage .screen-crm{left:0;right:auto;--angle:-1deg}.connected-hero .screen-crm .screen-top,.connected-hero .screen-flow .screen-top{height:40px}.connected-hero .screen-crm .contact-row{padding:7px 0}.connected-hero .screen-flow .flow-row{padding:8px}.connected-hero .screen-flow .flow-join{height:10px}.connected-hero .screen-crm .crm-content,.connected-hero .screen-flow .flow-content{padding:10px}.connected-hero .hero-buttons .button{font-size:10px;min-height:49px;padding-left:18px}.connected-hero .text-link{font-size:10px;padding:13px 16px}}
.connected-hero .hero-buttons .button,header .button.small{background:linear-gradient(112deg,#42345f,#303b59);border-color:#a694c568;box-shadow:inset 0 1px #e5d9ff14,0 3px 14px #17132044}
.connected-hero .hero-buttons .button{min-height:48px;font-size:11px;padding-left:20px;padding-right:15px}.connected-hero .text-link{font-size:10px;padding:13px 17px;border-color:#8f87a260;background:#11151e}
.connected-hero .screen[data-active=true]{--zoom:1.055;--lift:-6px;transition:transform 1s cubic-bezier(.2,.65,.2,1),border-color 1s,box-shadow 1s,filter 1s}
@media(max-width:760px){.connected-hero .screen[data-active=true]{--zoom:1.035;--lift:-3px}}
@media(prefers-reduced-motion:reduce){.connected-hero .screen[data-active=true]{--zoom:1;--lift:0;transition:none}}