:root{--panel:#0b0d10;--line:rgba(210,225,240,.12);--muted:#939aa4;--grad:linear-gradient(110deg,#f6f8fa 0%,#9ca8b4 48%,#228ff2 100%)}
.nav-wrap{position:fixed;background:linear-gradient(#050608e8,transparent);transition:opacity .45s ease}
.hero:before{background:radial-gradient(circle,rgba(22,140,255,.1),transparent 64%)}
.hero{height:400svh;min-height:0;padding:0;display:block;overflow:visible}.hero-scene{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;padding:120px 8vw 70px;display:flex;align-items:center}.hero-grid,.hero-noise{z-index:-3}.hero:before{position:fixed}.hero-copy{opacity:var(--reveal,0);transform:translateY(calc((1 - var(--reveal,0))*34px));pointer-events:none}.hero-copy .hero-actions{pointer-events:auto}.hero-eyebrow{opacity:calc(1 - var(--hero-progress,0)*3);transition:none}.scroll-cue{opacity:calc(1 - var(--hero-progress,0)*5);transition:none}
.cube-stage{transform:translateY(-47%);will-change:transform}.cube-glow{background:radial-gradient(circle,rgba(73,157,235,.42) 0,rgba(16,77,128,.18) 30%,transparent 68%);opacity:calc(.18 + var(--hero-progress,0)*.38);animation:none}
.cube{animation:none;will-change:transform}.voxel{left:91px;top:91px;background:linear-gradient(145deg,#eef4f8 0%,#71899c 42%,#132838 100%);border-color:rgba(224,241,255,.52);box-shadow:inset 0 0 20px rgba(255,255,255,.18),0 18px 38px rgba(0,0,0,.34),0 0 20px rgba(16,117,210,.12);opacity:0;animation:none;will-change:transform,opacity}
.voxel:before,.voxel:after{background:linear-gradient(160deg,#7894aa,#182d3d);border-color:rgba(196,225,247,.3)}.voxel:after{background:linear-gradient(120deg,#a9bdcc,#284862)}
.orbit{border-color:rgba(73,157,235,.15);opacity:var(--reveal,0)}.hero-progress{position:absolute;right:28px;top:20%;height:60%;width:1px;background:rgba(255,255,255,.1)}.hero-progress i{display:block;width:1px;height:calc(var(--hero-progress,0)*100%);background:#299bff;box-shadow:0 0 12px #299bff}
.brand-mark{background:linear-gradient(145deg,#4ba8f4,#0b6dbd);box-shadow:0 0 24px rgba(20,127,232,.22)}.btn-primary{background:linear-gradient(110deg,#147fe8,#075cae);box-shadow:0 12px 50px rgba(20,127,232,.18)}.btn-primary:hover{box-shadow:0 15px 55px rgba(20,127,232,.32)}.reason-icon,.service-row b{color:#299bff;text-shadow:none}.reason:hover{border-color:rgba(41,155,255,.38)}
.price-card.featured{border-color:#277fc0;background:linear-gradient(150deg,rgba(34,124,190,.13),rgba(255,255,255,.02));box-shadow:0 30px 80px rgba(0,34,64,.24)}.final-cta .cta-orb{background:radial-gradient(ellipse,rgba(16,115,204,.22),rgba(30,72,106,.08) 38%,transparent 70%)}
.browser{transform:perspective(1000px) translateY(var(--card-shift,0));will-change:transform}.project:hover .browser{transform:perspective(1000px) translateY(calc(var(--card-shift,0px) - 8px)) rotateX(2deg)}
.mock-page:before,.slot-1 .mock-page:before,.slot-2 .mock-page:before,.slot-3 .mock-page:before,.slot-4 .mock-page:before{background:radial-gradient(circle at 76% 35%,rgba(42,141,221,.16),transparent 34%),linear-gradient(135deg,#171b20,#070809)}
.slot-1 .mock-shape{background:linear-gradient(160deg,#768490,#18222a)}.slot-2 .mock-shape{border-radius:50%;aspect-ratio:1;background:repeating-linear-gradient(40deg,#258cdb 0 2px,#10161b 2px 24px)}.slot-3 .mock-shape{border-radius:50%;aspect-ratio:1;background:radial-gradient(circle,#aeb8c0,#3c4a54 60%,#11171b 62%)}.slot-4 .mock-shape{border-radius:0;background:#31546d;transform:rotate(-6deg)}
.reviews{background:#07080a}.review-grid-single{grid-template-columns:minmax(0,760px);justify-content:center}.review-grid-single .review{min-height:270px}.review-stars{display:block!important;color:#299bff;font-size:18px;letter-spacing:.22em}
.whatsapp-options{display:grid;grid-template-columns:1fr 1fr;gap:18px}.whatsapp-card{min-height:270px;border:1px solid var(--line);padding:34px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(18,94,151,.08));transition:border-color .25s,transform .25s}.whatsapp-card:hover{border-color:#299bff;transform:translateY(-5px)}.whatsapp-card span{font:600 10px var(--display);letter-spacing:.22em;color:#299bff}.whatsapp-card strong{font:600 clamp(25px,2.7vw,42px) var(--display);letter-spacing:-.04em}.whatsapp-card b{font:500 13px var(--display)}
.reveal{transform:translateY(38px);filter:blur(4px);transition:opacity .9s cubic-bezier(.2,.72,.2,1),transform .9s cubic-bezier(.2,.72,.2,1),filter .9s}.reveal.visible{filter:none}
@media(max-width:900px){.hero-scene{padding-inline:6vw;align-items:flex-end;padding-bottom:110px}.voxel{width:68px;height:68px;left:70px;top:70px}.cube{scale:.75}.hero-copy{z-index:4}}@media(max-width:600px){.hero{height:360svh}.hero-scene{padding-inline:5vw;min-height:620px}.voxel{width:52px;height:52px;left:54px;top:54px}.cube-stage{top:31%;right:-31vw;opacity:.88}.hero-progress{right:12px}.hero h1{font-size:20vw}.whatsapp-options{grid-template-columns:1fr}.whatsapp-card{min-height:220px;padding:28px}}
@media(prefers-reduced-motion:reduce){.hero{height:max(780px,100svh)}.hero-scene{position:relative}.hero-copy{opacity:1;transform:none}.voxel{opacity:1}.orbit{opacity:.55}.hero-progress{display:none}}

/* Conversion-focused hero refinement */
.hero-copy{max-width:690px}
.hero h1{font-size:clamp(62px,8.5vw,132px);line-height:.82;letter-spacing:-.07em}
.hero-line{max-width:630px;font-size:clamp(19px,1.75vw,26px);line-height:1.5;margin:30px 0 28px}
.hero-brand{margin:0 0 12px;font:700 clamp(15px,1.35vw,20px) var(--display);letter-spacing:.18em;color:#fff;text-transform:uppercase}
.kicker{font-size:12px;letter-spacing:.15em;color:#b3bbc4}
.hero-proof{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;width:max-content;margin-top:28px;padding-left:15px;border-left:1px solid #299bff;transition:transform .25s,color .25s}
.hero-proof:hover{transform:translateX(5px);color:#fff}
.hero-proof span{grid-row:1/3;font:600 10px var(--display);letter-spacing:.12em;color:#299bff;writing-mode:vertical-rl;transform:rotate(180deg)}
.hero-proof strong{font:600 15px var(--display)}
.hero-proof small{font-size:12px;color:#919aa4}
.website-scene{position:absolute;right:2vw;top:43%;width:52vw;height:48vw;max-width:760px;max-height:680px;transform:translateY(-47%);perspective:1400px;z-index:1;pointer-events:none}
.hero-cube-art{position:absolute;right:2%;top:50%;width:min(92%,680px);height:auto;transform:translate3d(var(--mouse-x,0),calc(-50% + var(--mouse-y,0)),0) rotate(calc((1 - var(--reveal,0))*-6deg)) scale(calc(.9 + var(--reveal,0)*.1));filter:drop-shadow(0 38px 55px rgba(0,0,0,.62)) drop-shadow(0 0 28px rgba(28,151,255,.18));opacity:calc(.7 + var(--reveal,0)*.3);transition:filter .35s ease;will-change:transform}
.website-scene .cube-stage{right:-8%;top:43%;width:58%;height:58%;opacity:.28;transform:translateY(-50%) scale(.62)}
.site-panel{position:absolute;border:1px solid rgba(194,220,240,.18);background:#0d1115;box-shadow:0 35px 90px rgba(0,0,0,.55);transform-style:preserve-3d;will-change:transform;transition:border-color .4s}
.site-panel-main{width:72%;aspect-ratio:1.48;right:6%;top:19%;transform:rotateY(-12deg) rotateX(4deg) translate3d(var(--mouse-x,0px),var(--mouse-y,0px),80px);z-index:3;padding:7px;border-radius:8px}
.site-chrome{height:25px;display:flex;align-items:center;gap:5px;padding:0 8px;background:#181d22;color:#717b85;font:500 7px var(--display);letter-spacing:.1em}
.site-chrome i{width:5px;height:5px;border-radius:50%;background:#56616b}.site-chrome span{margin:auto}
.site-preview{height:calc(100% - 25px);overflow:hidden;background:#fff}.site-preview iframe{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:top left}
.site-panel-code{width:38%;aspect-ratio:1.28;left:1%;top:5%;padding:8%;transform:rotateY(20deg) rotateX(-5deg) translate3d(calc(var(--mouse-x,0px)*-.7),calc(var(--mouse-y,0px)*-.7),-40px);z-index:1;background:linear-gradient(145deg,#10161b,#07090b)}
.site-panel-code span,.site-panel-mobile span{font:600 8px var(--display);letter-spacing:.14em;color:#299bff}.site-panel-code strong{display:block;margin:18% 0;font:600 clamp(15px,1.8vw,27px)/1.12 var(--display)}
.ui-lines{display:grid;gap:7px}.ui-lines i{height:2px;background:#2a3239}.ui-lines i:nth-child(2){width:70%}.ui-lines i:nth-child(3){width:46%;background:#299bff}
.site-panel-mobile{width:21%;aspect-ratio:.56;right:0;bottom:2%;padding:7%;z-index:4;border-radius:12px;transform:rotateY(-18deg) rotateX(4deg) translate3d(calc(var(--mouse-x,0px)*.55),calc(var(--mouse-y,0px)*.55),130px)}
.mobile-hero{height:34%;margin:18% 0 15%;background:linear-gradient(145deg,#203547,#0a7dd0);border-radius:3px}.site-panel-mobile>i{display:block;height:2px;background:#3d464e;margin:8px 0}.site-panel-mobile>i:nth-of-type(2){width:62%}.site-panel-mobile b{display:block;background:#197fd5;padding:9px 5px;margin-top:16%;font:600 6px var(--display);text-align:center}
.project-grid{grid-template-columns:1fr}.project-wide{max-width:1180px;margin:auto;width:100%}.browser{aspect-ratio:1.78;padding:11px}.browser-top{height:34px}.live-preview{height:calc(100% - 34px)}
.section-index{font-size:11px;letter-spacing:.14em}.eyebrow{font-size:11px;letter-spacing:.14em}
@media(min-width:761px){.website-scene{top:34%}}
@media(max-width:1050px){.website-scene{right:-12vw;width:60vw}.hero-copy{max-width:58vw}.hero h1{font-size:8vw}.nav-wrap nav{gap:22px}}
@media(max-width:760px){.nav-wrap nav{display:none}.nav-cta{font-size:12px}.hero-scene{align-items:flex-end;padding-bottom:76px}.hero-copy{max-width:none;width:100%}.hero h1{font-size:16vw}.hero-line{max-width:92%;font-size:18px;margin:20px 0}.hero-proof{margin-top:18px}.website-scene{width:82vw;height:72vw;right:-11vw;top:27%;opacity:.86}.hero-cube-art{width:100%;right:0}.hero-eyebrow{top:100px}.hero-actions{flex-wrap:wrap}.btn{min-height:50px;padding:0 17px;gap:18px}.scroll-cue{display:none}.section-index,.eyebrow{font-size:10px}.project-grid{gap:30px}.browser{aspect-ratio:1.35;padding:6px}.browser-top{height:25px}.live-preview{height:calc(100% - 25px)}}
@media(max-width:420px){.hero h1{font-size:15vw}.hero-line{font-size:16px}.hero-proof small{font-size:10px}.website-scene{top:25%;width:105vw;right:-32vw}.hero-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.site-panel-main,.site-panel-code,.site-panel-mobile{transform:none}}
