*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f6f8;color:#0a1020;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit}.shell{width:min(1240px,calc(100% - 48px));margin:auto}.section{padding:130px 0}.noise{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.cursor-glow{position:fixed;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(24,140,255,.10),transparent 62%);mix-blend-mode:multiply}#ambient{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.22;z-index:0}.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(3,7,17,.6);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);transition:.35s}.site-header.scrolled{background:rgba(3,7,17,.88)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;align-items:center}.brand img{width:205px;height:auto;filter:none}.desktop-nav{display:flex;gap:26px;align-items:center}.desktop-nav a,.langs a{color:rgba(255,255,255,.72);font-size:13px;font-weight:700;transition:.2s}.desktop-nav a:hover,.langs a:hover,.langs .active{color:#fff}.nav-side{display:flex;align-items:center;gap:18px}.langs{display:flex;gap:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:54px;padding:0 25px;border-radius:999px;background:#188cff;color:#fff;font-weight:900;font-size:14px;letter-spacing:.01em;border:1px solid #188cff;box-shadow:0 14px 45px rgba(24,140,255,.26);transition:.25s transform,.25s background}.button:hover{transform:translateY(-2px);background:#3e9eff}.button-sm{min-height:42px;padding:0 18px;font-size:12px}.outline-dark{background:transparent;color:#0a1020;border-color:#cfd4e1;box-shadow:none}.outline-dark:hover{background:#fff;color:#0a1020}.menu-toggle{display:none;background:none;border:0;width:44px;height:44px;position:relative}.menu-toggle span{position:absolute;width:22px;height:2px;background:white;left:11px;top:17px}.menu-toggle span:last-child{top:25px}.mobile-menu{display:none;background:#050916;color:#fff;padding:28px 24px 38px}.mobile-menu a{display:block;font-size:22px;font-weight:800;padding:10px 0}.mobile-menu div{margin-top:20px;display:flex;gap:8px}.mobile-menu div a{font-size:13px;padding:0}.hero{min-height:100vh;background:#030711;color:#fff;position:relative;padding-top:82px;overflow:hidden}.hero:after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,#030711);pointer-events:none}.hero-grid{min-height:calc(100vh - 120px);display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:50px;position:relative;z-index:3}.hero-copy{padding:80px 0 60px}.eyebrow,.section-no{font-size:11px;font-weight:900;letter-spacing:.16em;color:#687083;text-transform:uppercase}.eyebrow{color:#aeb6d1;display:flex;align-items:center;gap:12px}.eyebrow span{width:24px;height:1px;background:#188cff}.hero-title{font-size:clamp(3.6rem,6.9vw,7.1rem);line-height:.83;letter-spacing:-.07em;margin:25px 0 32px;font-weight:950}.hero-title .line{display:block}.hero-title .accent{color:#188cff;font-style:italic;font-weight:500}.hero-lead{font-size:18px;line-height:1.7;color:#aeb6c8;max-width:670px}.hero-lead strong{color:#fff}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:38px;flex-wrap:wrap}.text-link{display:inline-flex;gap:14px;align-items:center;font-size:14px;font-weight:900}.text-link span{transition:.2s}.text-link:hover span{transform:translateY(3px)}.text-link.light{color:#fff}.text-link.dark{color:#0a1020}.hero-tech{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px;max-width:760px}.hero-tech div{padding:16px 16px 18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:18px}.hero-tech small{display:block;font-size:10px;letter-spacing:.12em;color:#5caeff;margin-bottom:10px}.hero-tech b{display:block;font-size:13px;letter-spacing:.08em}.hero-tech span{display:block;color:#96a2c2;font-size:12px;line-height:1.45;margin-top:6px}.hero-stage{height:620px;position:relative;perspective:1000px;transform-style:preserve-3d;isolation:isolate;--stage-tilt-x:0deg;--stage-tilt-y:0deg}.stage-grid{position:absolute;inset:8% -15% -10% -15%;background-image:linear-gradient(rgba(24,140,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(24,140,255,.12) 1px,transparent 1px);background-size:42px 42px;transform:perspective(500px) rotateX(calc(61deg + var(--stage-tilt-x))) rotateZ(-12deg) rotateY(var(--stage-tilt-y));mask-image:linear-gradient(to bottom,#000,transparent);animation:gridDrift 18s linear infinite}.orb{position:absolute;width:330px;height:330px;border-radius:50%;right:15%;top:20%;background:radial-gradient(circle at 28% 22%,#ffffff 0,#d8f3ff 5%,#6dc6ff 16%,#188cff 32%,#0d2d74 58%,#070b1c 76%);box-shadow:0 0 110px rgba(24,140,255,.38),0 0 180px rgba(24,140,255,.10),inset -35px -45px 90px #030711;animation:float 9s ease-in-out infinite,pulseOrb 6s ease-in-out infinite}.orb:before{content:"";position:absolute;inset:-12%;border-radius:50%;border:1px solid rgba(90,187,255,.12);box-shadow:0 0 0 18px rgba(24,140,255,.04),0 0 0 40px rgba(24,140,255,.02);animation:pulseHalo 5.5s ease-in-out infinite}.orb:after{content:"";position:absolute;inset:20%;border:1px solid rgba(255,255,255,.35);border-radius:50%;box-shadow:0 0 30px rgba(255,255,255,.16)}.floating-window{position:absolute;border:1px solid rgba(255,255,255,.16);background:rgba(9,14,34,.72);backdrop-filter:blur(18px);box-shadow:0 28px 80px rgba(0,0,0,.38);transition:transform .2s ease-out}.fw1{width:360px;right:28%;top:12%;transform:rotate(-3deg)}.window-top,.browser-top{height:36px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:6px;padding:0 12px}.window-top i,.browser-top i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}.window-top span,.browser-top span{font-size:8px;letter-spacing:.08em;color:#7f8aa8;margin-left:8px}.window-body{padding:32px}.mini-label{font-size:9px;letter-spacing:.15em;color:#8e98bd}.mini-title{font-size:34px;font-weight:950;line-height:.95;margin:16px 0 30px}.mini-title em{font-style:normal;color:#37a0ff;font-weight:500}.mini-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-panels b{display:block;height:56px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);border-radius:12px}.fw2{left:0;bottom:11%;width:230px;padding:18px 20px 20px;transform:rotate(3deg)}.code-head,.stack-head{font-size:10px;letter-spacing:.16em;color:#4ca6ff;margin-bottom:14px}.fw2 pre{margin:0;font-size:14px;line-height:1.6;color:#d2d8f4}.fw3{right:0;bottom:5%;width:210px;padding:21px;border-radius:18px}.status-dot{width:10px;height:10px;border-radius:50%;background:#61efad;box-shadow:0 0 22px #61efad;margin-bottom:12px}.fw3 strong{display:block;font-size:30px}.fw3 small{display:block;margin-top:8px;color:#94a0c2}.fw4{width:220px;right:5%;top:34%;padding:18px 18px 10px;border-radius:18px}.fw4 ul{list-style:none;padding:0;margin:0}.fw4 li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}.fw4 li:first-child{border-top:0}.fw4 span{color:#97a2c5;font-size:12px}.fw4 b{font-size:11px;letter-spacing:.12em;color:#fff}.flow{position:absolute;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:10px;font-weight:900;letter-spacing:.13em;color:#cad1ea}.flow1{left:13%;top:17%}.flow2{left:6%;top:33%}.flow3{left:17%;top:67%}.flow4{right:18%;top:15%}.flow5{right:14%;top:62%}.hero-strip{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;background:rgba(255,255,255,.02)}.marquee{display:flex;gap:18px;white-space:nowrap;padding:15px 0;min-width:max-content;animation:marquee 30s linear infinite}.marquee span,.marquee i{font-size:12px;font-weight:900;letter-spacing:.16em;color:#69b7ff}.manifesto{background:#f5f6f8;position:relative}.manifesto-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:55px}.sticky-copy{position:sticky;top:130px;height:fit-content}.sticky-copy h2,.section-heading h2,.portfolio-head h2,.infra-copy h2,.journey h2,.challenge-copy h2{font-size:clamp(2.6rem,5vw,5.3rem);line-height:.92;letter-spacing:-.06em;margin:18px 0 0}.sticky-copy h2 em,.section-heading h2 em,.portfolio-head h2 em,.infra-copy h2 em,.journey h2 em,.challenge-copy h2 em,.final-cta h2 em{font-style:italic;color:#188cff;font-weight:500}.manifesto-copy{padding-top:40px}.manifesto-copy .big-copy{font-size:5.5rem;line-height:.85;letter-spacing:-.09em;font-weight:950;margin:0 0 22px}.manifesto-copy .big-copy span{color:#188cff}.manifesto-copy p{font-size:19px;line-height:1.8;color:#545e73;max-width:760px}.process-chain{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px;font-size:11px;font-weight:900;letter-spacing:.16em;color:#20283c}.process-chain b{color:#188cff}.creative-lab{background:#070a11;color:#fff;overflow:hidden}.section-heading,.portfolio-head{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:end;margin-bottom:56px}.section-heading p,.portfolio-head p{font-size:17px;line-height:1.8;color:#949eb1}.lab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.lab-card{min-height:450px;padding:38px;border-radius:26px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 24px 80px rgba(0,0,0,.22)}.lab-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 100%)}.lab-card>*{position:relative;z-index:2}.lab-card small{position:absolute;left:38px;top:34px;font-size:10px;letter-spacing:.15em;font-weight:900;color:rgba(255,255,255,.72)}.lab-card h3{font-size:40px;line-height:.92;letter-spacing:-.05em;margin:0 0 14px}.lab-card p{color:rgba(255,255,255,.78);line-height:1.7}.lab-card span{display:inline-block;margin-top:22px;font-size:10px;letter-spacing:.18em;font-weight:900;color:#dce1ff}.lab-card.brutal{background:linear-gradient(140deg,#191d2b,#188cff)}.lab-card.luxury{background:linear-gradient(145deg,#151515,#4c515f 48%,#e2d8bf)}.lab-card.future{background:radial-gradient(circle at 20% 20%,#6e7bff,#151b36 60%,#090d18)}.lab-card.precise{background:linear-gradient(145deg,#081f24,#204964 55%,#8bd4ff)}.portfolio{background:#f5f6f8}.portfolio-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.portfolio-tags span{padding:10px 14px;border:1px solid #d6dbe4;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.12em;color:#293145;background:#fff}.project-list{display:flex;flex-direction:column;gap:26px}.project-row{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;align-items:center;background:#fff;border:1px solid #e2e7ef;border-radius:28px;padding:26px;box-shadow:0 18px 60px rgba(22,31,55,.06)}.project-row.reverse{grid-template-columns:1.25fr .75fr}.project-row.reverse .project-copy{order:2}.project-row.reverse .project-preview{order:1}.project-copy{padding:10px 4px 10px 2px}.project-index{font-size:13px;font-weight:900;letter-spacing:.18em;color:#7481ac;margin-bottom:18px}.project-copy small{display:block;font-size:10px;letter-spacing:.16em;font-weight:900;color:#76829b;margin-bottom:10px}.project-copy h3{font-size:44px;line-height:.92;letter-spacing:-.06em;margin:0 0 14px}.project-copy p{font-size:16px;line-height:1.8;color:#5a6274;max-width:470px}.project-actions{margin-top:24px}.live-browser{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 32px 90px rgba(10,15,30,.24);background:#11162a}.live-browser.compact{box-shadow:0 24px 58px rgba(10,15,30,.16)}.browser-top{border-bottom-color:rgba(255,255,255,.09)}.frame-wrap{position:relative;aspect-ratio:16/9;background:#131827}.frame-wrap.compact{aspect-ratio:16/9}.frame-wrap iframe{position:absolute;left:0;top:0;width:1440px;height:910px;border:0;transform-origin:0 0;transform:scale(.58);background:#fff}.frame-wrap.compact iframe{transform:scale(.535)}.frame-wrap a{position:absolute;inset:0;z-index:4}.portfolio-more{display:flex;justify-content:center;margin-top:34px}.infrastructure{position:relative;background:#050915;color:#fff;overflow:hidden}.infra-bg{position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(24,140,255,.24),transparent 28%),radial-gradient(circle at 86% 40%,rgba(24,140,255,.13),transparent 24%),linear-gradient(180deg,#070b17,#050915)}.infra-grid{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center}.section-no.light{color:#8c97b9}.infra-copy p{font-size:17px;line-height:1.8;color:#aeb6c8;max-width:640px}.system-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:22px 24px 8px;backdrop-filter:blur(10px)}.system-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:16px;margin-bottom:10px}.system-head span{font-size:10px;letter-spacing:.15em;color:#69b7ff}.system-head b{font-size:11px;letter-spacing:.14em;color:#65f0af}.system-row{display:grid;grid-template-columns:1.1fr 1fr auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}.system-row:last-child{border-bottom:0}.system-row span{font-size:14px;font-weight:800;letter-spacing:.06em}.system-row small{color:#8f9ab7}.system-row i{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.12em;color:#65f0af;border:1px solid rgba(99,239,173,.25);padding:6px 8px;border-radius:999px}.services-grid{position:relative;margin-top:110px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12)}.service{min-height:280px;padding:30px;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;transition:.3s;background:rgba(255,255,255,.01)}.service:hover{background:#101936;transform:translateY(-4px)}.service span{font-size:10px;color:#68738f}.service h3{font-size:28px;letter-spacing:-.04em;margin:48px 0 10px}.service p{color:#818ba0;line-height:1.6}.service b{margin-top:auto;font-size:10px;letter-spacing:.12em}.journey{background:#f1f3f6}.journey h2{max-width:800px}.journey-line{display:grid;grid-template-columns:repeat(7,1fr);margin-top:80px;position:relative}.journey-line:before{content:"";position:absolute;top:24px;left:1%;right:1%;height:1px;background:#cfd4dc}.journey-line div{position:relative;padding-top:55px}.journey-line b{position:absolute;top:15px;width:18px;height:18px;background:#f1f3f6;border:2px solid #188cff;border-radius:50%;font-size:0}.journey-line span{display:block;font-size:11px;font-weight:900;letter-spacing:.12em}.journey-line small{display:block;color:#788092;margin-top:8px}.challenge{background:#fff}.challenge-box{min-height:580px;border-radius:32px;background:#0b0e16;color:#fff;padding:70px;display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;overflow:hidden;position:relative}.challenge-box:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:#6b7dff;filter:blur(120px);opacity:.22;left:-170px}.challenge-copy{position:relative;z-index:2}.challenge-copy p{color:#9fa8bb;line-height:1.8;max-width:690px}.web7-section{background:linear-gradient(180deg,#fff,#f4f6fb)}.web7-box{grid-template-columns:.8fr 1.2fr;background:radial-gradient(circle at 10% 20%,rgba(24,140,255,.18),transparent 30%),linear-gradient(135deg,#0a0e1a,#111833 58%,#0b1020);border:1px solid rgba(24,140,255,.18);box-shadow:0 30px 100px rgba(24,34,76,.18)}.web7-box:after{content:"";position:absolute;right:-80px;top:-120px;width:420px;height:420px;border:1px solid rgba(24,140,255,.12);border-radius:50%;box-shadow:0 0 0 80px rgba(24,140,255,.04),0 0 0 160px rgba(24,140,255,.02)}.web7-mark{position:relative;z-index:2;display:grid;grid-template-columns:auto auto;align-items:end;justify-content:start;column-gap:4px}.web7-web{font-size:clamp(2rem,5vw,4.2rem);font-weight:950;letter-spacing:-.07em;line-height:.9}.web7-seven{font-size:clamp(9rem,22vw,18rem);font-weight:950;line-height:.62;letter-spacing:-.1em;color:#3e9eff;text-shadow:0 0 55px rgba(113,130,255,.2)}.web7-mark small{grid-column:1/-1;margin-top:28px;font-size:10px;letter-spacing:.24em;font-weight:900;color:#838eaa}.web7-flow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0 16px}.web7-flow span{font-size:10px;letter-spacing:.14em;font-weight:900;border:1px solid rgba(255,255,255,.14);padding:10px 12px;border-radius:999px;color:#dbe0f5}.web7-flow b{color:#188cff}.web7-note{font-size:13px;line-height:1.7;color:#c0c7da;margin:0 0 28px;max-width:690px;padding-left:18px;border-left:2px solid #188cff}.ecosystem{background:#f5f6f8}.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.eco-card{min-height:320px;background:#fff;border:1px solid #e2e5ea;border-radius:22px;padding:32px;display:flex;flex-direction:column;transition:.3s}.eco-card:hover{transform:translateY(-5px);box-shadow:0 25px 60px rgba(22,31,55,.09)}.eco-card.active{background:#0b0f1c;color:#fff;border-color:#0b0f1c}.eco-card small{font-size:9px;letter-spacing:.14em;font-weight:900;color:#737e94}.eco-card h3{font-size:42px;margin:55px 0 8px;letter-spacing:-.05em}.eco-card p{line-height:1.65;color:#697184}.eco-card.active p{color:#939db2}.eco-card b{margin-top:auto;font-size:10px;letter-spacing:.12em}.final-cta{background:#070a12;color:#fff;min-height:760px;display:flex;align-items:center;position:relative;overflow:hidden}.final-cta .shell{position:relative}.final-cta h2{font-size:clamp(3.6rem,8vw,8.8rem);line-height:.81;letter-spacing:-.075em;margin:28px 0 35px}.final-cta p{color:#929caf;max-width:620px;font-size:17px;line-height:1.8}.button.light{background:#fff;color:#07101b;border-color:#fff;box-shadow:none}.cta-orbit{position:absolute;width:560px;height:560px;border:1px solid rgba(24,140,255,.28);border-radius:50%;right:-80px;top:-40px}.cta-orbit:before,.cta-orbit:after{content:"";position:absolute;inset:12%;border:1px solid rgba(24,140,255,.17);border-radius:50%}.cta-orbit:after{inset:29%}footer{background:#03050a;color:#fff;padding:70px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px}.footer-brand img{width:225px}.footer-brand p{color:#788197;line-height:1.7}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:12px}.footer-grid b{font-size:11px;letter-spacing:.1em;margin-bottom:10px}.footer-grid a{color:#818a9e;font-size:13px}.footer-grid a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:60px;padding-top:22px;display:flex;justify-content:space-between;color:#616a7b;font-size:11px}.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}.reveal.on{opacity:1;transform:none}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(2deg)}}@keyframes marquee{to{transform:translateX(-50%)}}
.stage-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(24,140,255,.045) 42%,rgba(24,140,255,.12) 50%,rgba(24,140,255,.04) 58%,transparent 100%);mix-blend-mode:screen;animation:scanSweep 7.5s linear infinite;pointer-events:none}
.beam{position:absolute;left:50%;top:50%;width:420px;height:420px;translate:-50% -50%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;filter:blur(10px)}
.beam:before{content:"";position:absolute;inset:-8%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 18%,rgba(24,140,255,.28) 25%,transparent 34% 58%,rgba(126,210,255,.18) 68%,transparent 78% 100%)}
.beam1{animation:spinSlow 18s linear infinite}
.beam2{scale:.78;opacity:.65;animation:spinReverse 12s linear infinite}
.ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(111,184,255,.14);box-shadow:0 0 40px rgba(24,140,255,.05);pointer-events:none}
.ring1{width:470px;height:470px;animation:spinSlow 24s linear infinite}
.ring2{width:390px;height:390px;border-style:dashed;animation:spinReverse 16s linear infinite}
.ring3{width:290px;height:290px;opacity:.75;animation:spinSlow 14s linear infinite}
.hero-node{position:absolute;width:12px;height:12px;border-radius:50%;background:#7fd0ff;box-shadow:0 0 0 6px rgba(127,208,255,.08),0 0 18px rgba(127,208,255,.45);pointer-events:none}
.hero-node:after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:28px;height:28px;border-radius:50%;border:1px solid rgba(127,208,255,.14)}
.n1{left:14%;top:22%;animation:nodeFloat 6s ease-in-out infinite}
.n2{left:24%;top:68%;animation:nodeFloat 5s ease-in-out infinite 1s}
.n3{right:12%;top:24%;animation:nodeFloat 7s ease-in-out infinite .6s}
.n4{right:6%;bottom:16%;animation:nodeFloat 6.5s ease-in-out infinite 1.3s}
.n5{left:48%;bottom:8%;animation:nodeFloat 5.8s ease-in-out infinite .9s}
.floating-window{border-radius:22px}
.fw1{animation:driftA 9s ease-in-out infinite}
.fw2{animation:driftB 8s ease-in-out infinite}
.fw3{animation:driftC 7s ease-in-out infinite}
.fw4{animation:driftD 10s ease-in-out infinite}
.fw5{left:12%;top:34%;width:250px;animation:driftE 8.5s ease-in-out infinite}
.metrics{padding:18px 18px 12px}
.metrics div{padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.metrics div:first-child{border-top:0;padding-top:4px}
.metrics small{display:block;font-size:9px;letter-spacing:.16em;color:#89a1cc;margin-bottom:6px}
.metrics b{font-size:12px;letter-spacing:.08em;color:#fff}
@keyframes pulseOrb{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes pulseHalo{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes spinSlow{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes scanSweep{0%{transform:translateY(-56%)}100%{transform:translateY(56%)}}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes driftA{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(-1deg)}}
@keyframes driftB{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(14px) rotate(1deg)}}
@keyframes driftC{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes driftD{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes driftE{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes tagPulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes gridDrift{0%{background-position:0 0,0 0}100%{background-position:84px 42px,84px 42px}}
.preview-deck{position:absolute;right:-1%;top:51%;width:250px;height:210px;pointer-events:none}
.deck-card{position:absolute;inset:0;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(10,16,33,.92),rgba(18,29,59,.72));box-shadow:0 26px 60px rgba(7,10,20,.34);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.deck-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 22%,rgba(98,203,255,.18),transparent 26%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 52%);pointer-events:none}
.deck-card small,.deck-card strong,.deck-card span{position:relative;z-index:2}
.deck-card small{font-size:9px;letter-spacing:.18em;color:#89bdf7;font-weight:900}
.deck-card strong{display:block;margin-top:10px;font-size:22px;line-height:1.05;letter-spacing:-.04em}
.deck-card span{display:block;margin-top:18px;width:100%;height:72px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(24,140,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.card-back{transform:translate(-36px,22px) rotate(-10deg) scale(.92);opacity:.48;animation:deckBack 8s ease-in-out infinite}
.card-mid{transform:translate(-12px,10px) rotate(-5deg) scale(.97);opacity:.72;animation:deckMid 8s ease-in-out infinite}
.card-front{transform:translate(0,0) rotate(0deg);animation:deckFront 8s ease-in-out infinite}
.console-rail{position:absolute;left:-2%;top:52%;width:190px;padding:18px 16px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(8,14,31,.64);backdrop-filter:blur(14px);box-shadow:0 26px 50px rgba(7,10,20,.25)}
.console-head{font-size:9px;letter-spacing:.18em;color:#7fbaf8;font-weight:900;margin-bottom:14px}
.signal-row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;margin:11px 0}
.signal-row label{font-size:10px;font-weight:800;letter-spacing:.1em;color:#b6d4f4}
.signal-row b{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.signal-row b i{display:block;height:100%;width:72%;border-radius:999px;background:linear-gradient(90deg,#37a0ff,#9bdfff);box-shadow:0 0 14px rgba(55,160,255,.45);animation:signalPulse 3.2s ease-in-out infinite}
.signal-row:nth-child(3) b i{width:84%;animation-delay:.4s}
.signal-row:nth-child(4) b i{width:67%;animation-delay:.9s}
.signal-row:nth-child(5) b i{width:78%;animation-delay:1.2s}
.hero-caption{position:absolute;right:12%;bottom:-10px;font-size:12px;font-weight:900;letter-spacing:.44em;color:rgba(170,214,255,.55);text-transform:uppercase;white-space:nowrap;animation:captionFloat 7s ease-in-out infinite}
.hero-stage:before{content:"";position:absolute;inset:6% -12% 2% -12%;border-radius:40px;background:radial-gradient(circle at 52% 48%,rgba(24,140,255,.07),transparent 32%),radial-gradient(circle at 32% 80%,rgba(149,216,255,.08),transparent 18%);filter:blur(30px);pointer-events:none}
.metrics div b,.stack-head,.code-head,.mini-label,.web7-flow span{font-variant-ligatures:none}
@keyframes deckBack{0%,100%{transform:translate(-36px,22px) rotate(-10deg) scale(.92)}50%{transform:translate(-42px,14px) rotate(-13deg) scale(.94)}}
@keyframes deckMid{0%,100%{transform:translate(-12px,10px) rotate(-5deg) scale(.97)}50%{transform:translate(-16px,2px) rotate(-7deg) scale(.99)}}
@keyframes deckFront{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(4px,-8px) rotate(2deg)}}
@keyframes signalPulse{0%,100%{filter:brightness(1);transform:scaleX(.96);transform-origin:left}50%{filter:brightness(1.22);transform:scaleX(1)}}
@keyframes captionFloat{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:.9}}
/* --- V2.7 cinematic-luxury hero --- */
.hero-stage{height:650px;position:relative;perspective:1400px;transform-style:preserve-3d;isolation:isolate;--stage-tilt-x:0deg;--stage-tilt-y:0deg}
.stage-grid{position:absolute;inset:10% -14% -14% -14%;background-image:linear-gradient(rgba(24,140,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(24,140,255,.10) 1px,transparent 1px);background-size:42px 42px;transform:perspective(700px) rotateX(calc(67deg + var(--stage-tilt-x))) rotateZ(-10deg) rotateY(var(--stage-tilt-y));mask-image:linear-gradient(to bottom,#000,transparent);animation:gridDrift 18s linear infinite}
.stage-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(24,140,255,.04) 45%,rgba(176,230,255,.14) 50%,rgba(24,140,255,.05) 55%,transparent 100%);mix-blend-mode:screen;animation:scanSweep 8s linear infinite;pointer-events:none}
.stage-glow{position:absolute;inset:8% 2% 6% 2%;border-radius:40px;background:radial-gradient(circle at 58% 42%,rgba(24,140,255,.18),transparent 28%),radial-gradient(circle at 42% 60%,rgba(140,222,255,.10),transparent 20%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 80%);filter:blur(28px);pointer-events:none}
.spotlight{position:absolute;top:-12%;width:280px;height:580px;pointer-events:none;filter:blur(4px);opacity:.8;mix-blend-mode:screen;background:linear-gradient(180deg,rgba(191,236,255,.28),rgba(24,140,255,.10) 30%,transparent 75%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}
.sp1{left:20%;transform:rotate(-15deg);animation:spotMove1 10s ease-in-out infinite}
.sp2{right:0;transform:rotate(12deg);animation:spotMove2 11s ease-in-out infinite}
.hero-platform{position:absolute;left:8%;right:3%;bottom:3%;height:150px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(116,205,255,.26),rgba(24,140,255,.10) 26%,rgba(10,17,36,.05) 48%,transparent 75%);filter:blur(26px);pointer-events:none}
.cinema-display{position:absolute;left:17%;top:10%;width:500px;height:350px;transform:rotate(-7deg);transform-style:preserve-3d;animation:displayFloat 9s ease-in-out infinite}
.display-frame{height:100%;border-radius:34px;background:linear-gradient(180deg,rgba(11,18,36,.92),rgba(7,12,26,.76));border:1px solid rgba(255,255,255,.16);box-shadow:0 44px 120px rgba(2,7,18,.56),0 18px 60px rgba(24,140,255,.10),inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(16px);overflow:hidden;position:relative}
.display-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.10),transparent 22%,transparent 56%,rgba(145,221,255,.08) 88%);pointer-events:none}
.display-topbar,.display-bottom{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:rgba(255,255,255,.03);position:relative;z-index:2}
.display-topbar{border-bottom:1px solid rgba(255,255,255,.08)}
.display-bottom{border-top:1px solid rgba(255,255,255,.08)}
.dots{display:flex;gap:6px;align-items:center}
.dots i,.mock-top i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.42)}
.display-topbar span,.display-bottom span,.mock-top span{font-size:9px;letter-spacing:.15em;color:#8ec3fb;font-weight:800}
.display-topbar b{padding:6px 9px;border-radius:999px;border:1px solid rgba(117,212,255,.25);color:#dbf5ff;font-size:9px;letter-spacing:.15em}
.display-screen{position:relative;height:266px;padding:24px 26px 22px}
.screen-shine{position:absolute;left:-22%;top:-46%;width:68%;height:190%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:rotate(18deg);filter:blur(10px);animation:glareSweep 8.6s ease-in-out infinite}
.screen-copy{position:relative;z-index:2;max-width:220px}
.screen-copy small{display:block;font-size:10px;letter-spacing:.20em;color:#8ec3fb;font-weight:900}
.screen-copy strong{display:block;font-size:82px;line-height:.84;letter-spacing:-.08em;color:#f6fbff;margin:12px 0 10px;text-shadow:0 14px 34px rgba(24,140,255,.20)}
.screen-copy p{margin:0;color:#c0d7e9;font-size:13px;line-height:1.7}
.screen-layout{position:absolute;right:24px;top:24px;width:220px;display:grid;grid-template-columns:1.1fr .9fr;gap:12px;z-index:2}
.layout-col{display:flex;flex-direction:column;gap:12px}
.ui-shot,.mini-shot{border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:0 16px 40px rgba(5,10,20,.25);overflow:hidden}
.feature-large .ui-shot{height:176px;padding:18px}
.ui-lines{display:flex;flex-direction:column;gap:9px}
.ui-lines span{display:block;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(151,224,255,.85),rgba(24,140,255,.22))}
.ui-lines span:nth-child(1){width:86%}.ui-lines span:nth-child(2){width:64%}.ui-lines span:nth-child(3){width:72%}
.ui-panel{margin-top:18px;height:96px;border-radius:16px;background:linear-gradient(140deg,rgba(122,217,255,.18),rgba(24,140,255,.05));border:1px solid rgba(255,255,255,.06)}
.mini-shot{padding:14px}
.mini-shot label,.feature-large label{display:block;font-size:8px;letter-spacing:.18em;color:#8fc4fb;font-weight:900;margin-bottom:10px}
.mini-bars{display:grid;gap:8px}
.mini-bars span{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(24,140,255,.18))}
.mini-map{height:78px;border-radius:14px;background:
radial-gradient(circle at 22% 24%,rgba(126,219,255,.36),transparent 14%),
radial-gradient(circle at 66% 54%,rgba(24,140,255,.28),transparent 18%),
linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.05)}
.mini-shot.dark{background:linear-gradient(180deg,rgba(11,18,36,.82),rgba(12,22,49,.66))}
.mock-browser{position:absolute;width:230px;height:168px;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(12,18,37,.90),rgba(8,13,29,.70));box-shadow:0 34px 80px rgba(2,6,18,.42),0 12px 40px rgba(24,140,255,.08);backdrop-filter:blur(16px);overflow:hidden;transform-style:preserve-3d}
.mock-top{height:34px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:6px;padding:0 12px}
.mock-top span{margin-left:6px}
.mock-body{padding:14px}
.mock-hero{height:68px;border-radius:16px;background:linear-gradient(135deg,rgba(129,211,255,.34),rgba(24,140,255,.10));border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.mock-hero:after{content:"";position:absolute;right:-10px;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10))}
.mock-copy{margin-top:12px}
.mock-copy b{display:block;font-size:14px;line-height:1.35;color:#fff}
.mock-copy small{display:block;margin-top:6px;color:#b4cfe4;font-size:11px;line-height:1.5}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock-grid span,.mock-columns span{display:block;border-radius:12px;height:50px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(24,140,255,.08));border:1px solid rgba(255,255,255,.06)}
.mock-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:8px}
.mock-left{left:0;top:28%;transform:rotate(-13deg);animation:mockLeftFloat 8.5s ease-in-out infinite}
.mock-right{right:2%;top:18%;transform:rotate(9deg);animation:mockRightFloat 9.5s ease-in-out infinite}
.mock-front{right:10%;bottom:10%;transform:rotate(4deg);animation:mockFrontFloat 8s ease-in-out infinite}
.mock-body.auto .mock-hero{background:linear-gradient(140deg,rgba(160,231,255,.30),rgba(24,140,255,.10)),linear-gradient(180deg,#1d2538,#0d1323)}
.mock-body.fs .mock-grid span:nth-child(1){height:58px}.mock-body.fs .mock-grid span:nth-child(3){height:42px}.mock-body.fs .mock-grid span:nth-child(4){height:42px}
.mock-body.planet .mock-columns span:first-child{height:70px}.mock-body.planet .mock-columns span:last-child{height:70px}
.lux-card{position:absolute;width:215px;padding:18px 18px 20px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:0 22px 50px rgba(3,7,18,.22);backdrop-filter:blur(16px)}
.lux-card small{display:block;font-size:9px;letter-spacing:.18em;color:#8ec3fb;font-weight:900;margin-bottom:10px}
.lux-card strong{display:block;font-size:26px;line-height:1;color:#fff;letter-spacing:-.04em}
.lux-card span{display:block;margin-top:10px;font-size:12px;line-height:1.65;color:#bfd6e8}
.lux-a{left:8%;bottom:8%;transform:rotate(-4deg);animation:cardFloatA 7s ease-in-out infinite}
.lux-b{right:27%;bottom:0;transform:rotate(4deg);animation:cardFloatB 8s ease-in-out infinite}
@keyframes displayFloat{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-12px)}}
@keyframes mockLeftFloat{0%,100%{transform:rotate(-13deg) translateY(0)}50%{transform:rotate(-10deg) translateY(-10px)}}
@keyframes mockRightFloat{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(6deg) translateY(-12px)}}
@keyframes mockFrontFloat{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px)}}
@keyframes cardFloatA{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}
@keyframes cardFloatB{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px)}}
@keyframes glareSweep{0%,100%{transform:translateX(-6%) rotate(18deg);opacity:.25}50%{transform:translateX(98%) rotate(18deg);opacity:.70}}
@keyframes spotMove1{0%,100%{transform:rotate(-15deg) translateY(0)}50%{transform:rotate(-11deg) translateY(12px)}}
@keyframes spotMove2{0%,100%{transform:rotate(12deg) translateY(0)}50%{transform:rotate(18deg) translateY(14px)}}
.sticky-copy h2{max-width:640px}
.manifesto-copy{padding-top:88px}
@media(max-width:1120px){
.hero-stage{height:760px}
.cinema-display{left:12%;top:8%;width:76%;max-width:520px}
.mock-left{left:2%;top:46%}
.mock-right{right:0;top:18%}
.mock-front{right:10%;bottom:8%}
.lux-a{left:4%;bottom:6%}
.lux-b{right:16%;bottom:-2%}
.manifesto-copy{padding-top:10px}
}
@media(max-width:720px){
.hero-stage{height:560px}
.cinema-display{position:relative;left:auto;top:auto;width:100%;max-width:none;height:300px;transform:none}
.display-screen{height:226px;padding:18px}
.screen-copy{max-width:100%}
.screen-copy strong{font-size:62px}
.screen-copy p{max-width:170px;font-size:12px}
.screen-layout{width:150px;right:18px;top:20px;gap:8px}
.feature-large .ui-shot{height:138px;padding:12px}
.ui-panel{height:72px}
.mini-shot{padding:10px}
.mini-map{height:56px}
.mock-right,.mock-front,.lux-b,.sp1,.sp2{display:none}
.mock-left{left:6px;top:auto;bottom:16px;width:170px;height:132px;transform:none}
.mock-copy b{font-size:11px}
.mock-copy small{font-size:10px}
.lux-a{left:auto;right:4px;bottom:10px;width:160px;padding:12px}
.lux-card strong{font-size:20px}
}
@media(max-width:1120px){.desktop-nav{display:none}.menu-toggle{display:block}.hero-grid{grid-template-columns:1fr}.hero-stage{height:500px;margin-top:-30px}.hero-copy{padding-bottom:10px}.hero-tech{grid-template-columns:repeat(2,1fr)}.console-rail{left:0;top:auto;bottom:24px}.preview-deck{right:2%;top:55%;scale:.9}.hero-caption{right:10%;bottom:-4px}.manifesto-grid,.infra-grid,.challenge-box{grid-template-columns:1fr}.sticky-copy{position:static}.manifesto-copy{padding-top:0}.section-heading,.portfolio-head{grid-template-columns:1fr;gap:25px}.services-grid{grid-template-columns:repeat(2,1fr)}.journey-line{grid-template-columns:repeat(4,1fr);row-gap:40px}.journey-line:before{display:none}.web7-mark{margin-bottom:20px}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/3}.project-row,.project-row.reverse{grid-template-columns:1fr}.project-row.reverse .project-copy,.project-row.reverse .project-preview{order:initial}}@media(max-width:720px){.shell{width:min(100% - 28px,1240px)}.section{padding:88px 0}.nav{height:70px}.brand{padding:0;border-radius:0}.brand img{width:165px}.nav-side .langs,.nav-side>.button{display:none}.site-header.menu-open .mobile-menu{display:block}.hero{padding-top:70px}.hero-grid{min-height:auto}.hero-copy{padding-top:80px}.hero-title{font-size:clamp(3.25rem,16vw,5rem)}.hero-lead{font-size:16px}.hero-stage{height:440px;margin-top:0}.hero-tech{grid-template-columns:1fr 1fr}.spectrum-tags{gap:8px}.spectrum-tags span{font-size:10px;padding:8px 10px}.fw1{width:280px;right:2%;top:10%}.fw2{width:190px;left:0;bottom:10%}.fw3{right:1%;bottom:3%;width:190px}.fw4,.fw5,.ring,.beam,.hero-node,.preview-deck,.console-rail,.hero-caption{display:none}.orb{width:230px;height:230px}.flow{display:none}.manifesto-grid{gap:25px}.manifesto-copy .big-copy{font-size:3.8rem}.manifesto-copy p{font-size:17px}.lab-grid{grid-template-columns:1fr}.lab-card{min-height:340px;padding:30px}.lab-card small{left:30px;top:28px}.lab-card h3{font-size:34px}.frame-wrap iframe{width:1200px;height:760px;transform:scale(.5)}.frame-wrap.compact iframe{transform:scale(.49)}.services-grid{grid-template-columns:1fr}.journey-line{grid-template-columns:repeat(2,1fr)}.challenge-box{padding:38px 26px;min-height:auto}.web7-seven{font-size:8rem}.eco-grid{grid-template-columns:1fr}.final-cta{min-height:650px}.final-cta h2{font-size:3.8rem}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column;gap:8px}.cursor-glow,#ambient{display:none}.project-copy h3{font-size:34px}.project-row{padding:18px;border-radius:20px}.portfolio-tags span{font-size:10px;padding:9px 11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* =========================
V2.8 FINAL HERO OVERRIDES
========================= */
.hero-grid > *{min-width:0}
.hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(520px,.96fr);gap:54px;align-items:center}
.hero-copy{position:relative;z-index:8;padding:86px 0 60px}
.hero-stage{
height:640px !important;
margin-top:0 !important;
position:relative;
overflow:visible;
z-index:4;
perspective:1600px;
}
.stage-grid{opacity:.9}
.stage-glow{inset:5% -4% 2% -4%;filter:blur(34px)}
.hero-platform{left:6%;right:0;bottom:1%;height:165px;opacity:.95}
.sp1{left:17%;top:-10%}
.sp2{right:-2%;top:-12%}
.cinema-display{
left:11%;
top:6%;
width:560px;
height:370px;
z-index:6;
transform:rotate(-6deg);
}
.display-frame{
border-radius:36px;
box-shadow:
0 55px 140px rgba(2,7,18,.62),
0 18px 60px rgba(24,140,255,.14),
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -30px 60px rgba(4,9,20,.18);
}
.display-screen{height:286px;padding:26px 28px 24px}
.screen-copy strong{
font-size:96px;
letter-spacing:-.095em;
text-shadow:0 18px 44px rgba(24,140,255,.22);
}
.screen-copy p{max-width:240px}
.screen-layout{right:26px;top:26px;width:236px;gap:14px}
.feature-large .ui-shot{height:188px}
.ui-panel{height:104px}
.mock-browser{
border-radius:26px;
box-shadow:
0 38px 95px rgba(2,6,18,.48),
0 12px 40px rgba(24,140,255,.10);
}
.mock-left{
left:-1%;
top:31%;
width:235px;
height:172px;
z-index:7;
}
.mock-right{
right:2%;
top:18%;
width:235px;
height:172px;
z-index:7;
}
.mock-front{
right:12%;
bottom:8%;
width:245px;
height:178px;
z-index:7;
}
.lux-card{
z-index:6;
width:230px;
box-shadow:0 26px 60px rgba(3,7,18,.28);
}
.lux-a{left:6%;bottom:6%}
.lux-b{right:31%;bottom:-1%}
.sticky-copy h2{max-width:700px}
.manifesto-copy{padding-top:42px}
.manifesto-copy p:first-child{margin-top:0}
.web7-copy h2{max-width:760px}
.web7-copy p{max-width:740px}
.web7-note{max-width:740px}
@media (max-width:1260px){
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(480px,.92fr);gap:40px}
.cinema-display{left:9%;width:520px;height:352px}
.mock-left{left:0}
.mock-right{right:0}
.mock-front{right:9%}
.lux-b{right:26%}
}
@media (max-width:1120px){
.hero-grid{
grid-template-columns:1fr !important;
gap:22px !important;
min-height:auto;
}
.hero-copy{
padding:82px 0 8px !important;
}
.hero-stage{
height:720px !important;
width:min(100%,760px);
margin:0 auto !important;
}
.cinema-display{
left:50%;
top:6%;
width:min(92%,560px);
height:360px;
transform:translateX(-50%) rotate(-4deg);
}
.mock-left{left:3%;top:49%}
.mock-right{right:2%;top:17%}
.mock-front{right:16%;bottom:10%}
.lux-a{left:4%;bottom:7%}
.lux-b{right:20%;bottom:1%}
.manifesto-copy{padding-top:8px !important}
}
@media (max-width:720px){
.hero-copy{padding-top:78px !important}
.hero-stage{
height:520px !important;
min-height:520px;
}
.stage-grid{inset:24% -20% -6% -20%}
.stage-glow{inset:12% -8% 6% -8%}
.cinema-display{
left:0;
top:2%;
width:100%;
height:292px;
transform:none;
}
.display-screen{height:218px;padding:18px}
.screen-copy strong{font-size:64px}
.screen-copy p{max-width:168px;font-size:12px}
.screen-layout{width:146px;right:16px;top:18px;gap:8px}
.feature-large .ui-shot{height:136px;padding:12px}
.ui-panel{height:72px}
.mini-shot{padding:10px}
.mini-map{height:56px}
.mock-right,.mock-front,.lux-b,.sp1,.sp2{display:none !important}
.mock-left{
left:8px;
top:auto;
bottom:14px;
width:168px;
height:128px;
transform:none;
}
.mock-copy b{font-size:11px}
.mock-copy small{font-size:10px}
.lux-a{
left:auto;
right:4px;
bottom:14px;
width:164px;
padding:12px;
transform:none;
}
.lux-card strong{font-size:20px}
}
/* =========================
V2.9 LUXURY POLISH
========================= */
:root{
--wc-blue:#188cff;
--wc-blue-soft:#7dd2ff;
--wc-panel:rgba(255,255,255,.05);
--wc-line:rgba(255,255,255,.12);
}
body{
background:
radial-gradient(circle at top left, rgba(24,140,255,.025), transparent 26%),
radial-gradient(circle at top right, rgba(24,140,255,.018), transparent 22%),
#f5f6f8;
}
.button{
background:linear-gradient(180deg,#31a1ff,#188cff 62%,#0f79e9);
border-color:rgba(129,211,255,.35);
box-shadow:
0 16px 44px rgba(24,140,255,.22),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -10px 18px rgba(5,17,42,.12);
position:relative;
overflow:hidden;
}
.button:before{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%);
pointer-events:none;
}
.button:hover{
background:linear-gradient(180deg,#52afff,#2293ff 60%,#117ce9);
}
.hero{
background:
radial-gradient(circle at 76% 22%, rgba(68,171,255,.08), transparent 20%),
radial-gradient(circle at 24% 14%, rgba(125,210,255,.05), transparent 18%),
linear-gradient(180deg,#030711,#07101f 58%,#030711);
}
.hero-copy{
filter:drop-shadow(0 10px 40px rgba(0,0,0,.08));
}
.hero-lead{
color:#b8c3d7;
}
.hero-tech div{
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.028));
border-color:rgba(148,219,255,.12);
box-shadow:
0 10px 30px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-tech div:hover{
transform:translateY(-2px);
transition:.25s;
border-color:rgba(148,219,255,.22);
}
.stage-glow{
background:
radial-gradient(circle at 52% 42%, rgba(24,140,255,.22), transparent 30%),
radial-gradient(circle at 38% 66%, rgba(160,229,255,.12), transparent 20%),
linear-gradient(180deg,rgba(255,255,255,.04),transparent 84%);
}
.display-frame{
background:
linear-gradient(180deg,rgba(12,19,38,.93),rgba(7,12,26,.80)),
radial-gradient(circle at 20% 16%, rgba(160,230,255,.08), transparent 24%);
}
.display-frame:after{
content:"";
position:absolute;
inset:1px;
border-radius:35px;
border:1px solid rgba(255,255,255,.05);
pointer-events:none;
}
.display-topbar,.display-bottom{
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}
.display-screen:after{
content:"";
position:absolute;
inset:14px;
border-radius:26px;
background:
linear-gradient(180deg,rgba(255,255,255,.05),transparent 18%,transparent 82%,rgba(255,255,255,.03)),
repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
pointer-events:none;
mix-blend-mode:screen;
}
.screen-copy strong{
background:linear-gradient(180deg,#ffffff,#dff4ff 58%,#98dbff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.ui-shot,.mini-shot,.mock-browser,.lux-card{
position:relative;
}
.ui-shot:before,.mini-shot:before,.mock-browser:before,.lux-card:before{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 40%);
pointer-events:none;
}
.mock-browser{
backdrop-filter:blur(20px);
}
.mock-browser:after{
content:"";
position:absolute;
left:-22%;
top:-26%;
width:48%;
height:170%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
transform:rotate(14deg);
filter:blur(8px);
opacity:.65;
pointer-events:none;
}
.mock-top{
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}
.mock-copy b{
letter-spacing:-.02em;
}
.lux-card{
background:
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),
radial-gradient(circle at top left, rgba(142,223,255,.10), transparent 26%);
border-color:rgba(180,231,255,.16);
}
.hero-strip{
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
}
.manifesto{
background:
linear-gradient(180deg,#f5f6f8,#f4f6fa 55%,#f8f9fb);
}
.sticky-copy h2 em{
display:inline-block;
margin-top:10px;
}
.process-chain{
padding-top:4px;
}
.lab-card{
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 24px 80px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.10);
}
.lab-card:after{
content:"";
position:absolute;
inset:1px;
border-radius:25px;
background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 34%);
pointer-events:none;
}
.project-row{
border-color:#e5ebf2;
box-shadow:
0 18px 60px rgba(22,31,55,.06),
0 8px 20px rgba(22,31,55,.03);
}
.project-row:hover{
transform:translateY(-2px);
transition:.25s ease;
box-shadow:
0 26px 80px rgba(22,31,55,.09),
0 10px 24px rgba(22,31,55,.04);
}
.live-browser{
box-shadow:
0 32px 90px rgba(10,15,30,.22),
inset 0 1px 0 rgba(255,255,255,.04);
}
.system-panel{
background:
linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03)),
radial-gradient(circle at top left, rgba(24,140,255,.10), transparent 30%);
box-shadow:
0 24px 70px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.07);
}
.service{
background:
linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
}
.service:hover{
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 40px rgba(7,12,28,.12);
}
.challenge-box.web7-box{
box-shadow:
0 35px 110px rgba(24,34,76,.16),
inset 0 1px 0 rgba(255,255,255,.06);
}
.web7-box:before{
opacity:.18;
}
.web7-mark{
filter:drop-shadow(0 18px 42px rgba(24,140,255,.12));
}
.web7-seven{
background:linear-gradient(180deg,#8ad8ff,#188cff 58%,#0b76e7);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:none;
}
.web7-flow span{
background:rgba(255,255,255,.04);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.eco-card,.service,.project-row{
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.eco-card{
box-shadow:
0 14px 40px rgba(22,31,55,.04),
inset 0 1px 0 rgba(255,255,255,.6);
}
.eco-card.active{
box-shadow:
0 24px 80px rgba(8,12,26,.22),
inset 0 1px 0 rgba(255,255,255,.04);
}
.final-cta{
background:
radial-gradient(circle at 26% 26%, rgba(24,140,255,.10), transparent 24%),
linear-gradient(180deg,#070a12,#09111f 64%,#070a12);
}
.cta-orbit{
filter:drop-shadow(0 0 20px rgba(24,140,255,.10));
}
footer{
background:linear-gradient(180deg,#02050b,#050913);
}
.footer-bottom{
border-top-color:rgba(255,255,255,.08);
}
@media (max-width:1120px){
.project-row:hover{transform:none}
}
@media (max-width:720px){
.hero-tech{
grid-template-columns:1fr 1fr;
gap:10px;
}
.hero-tech div{
padding:14px 12px 15px;
}
}
/* =========================
V3 — CLEAN CINEMATIC HERO
========================= */
.hero .hero-stage,.hero .cinema-display,.hero .mock-browser,.hero .lux-card,
.hero .floating-window,.hero .preview-deck,.hero .console-rail,.hero .flow,
.hero .ring,.hero .beam,.hero .orb,.hero .hero-node,.hero .spotlight,
.hero .stage-grid,.hero .stage-glow,.hero .hero-platform,.hero .floor-reflection{
display:none !important;
}
.hero{
min-height:100vh;
padding-top:82px;
background:
radial-gradient(circle at 76% 28%,rgba(24,140,255,.105),transparent 20%),
radial-gradient(circle at 66% 64%,rgba(117,211,255,.055),transparent 22%),
linear-gradient(180deg,#020610 0%,#07101d 55%,#030711 100%);
}
.hero-grid{
min-height:calc(100vh - 132px);
display:grid;
grid-template-columns:minmax(0,.94fr) minmax(560px,1.06fr);
gap:66px;
align-items:center;
position:relative;
z-index:3;
}
.hero-copy{
padding:64px 0 52px;
min-width:0;
}
.hero-title{
font-size:clamp(3.4rem,5.4vw,6.3rem);
line-height:.86;
max-width:690px;
}
.hero-lead{max-width:660px}
.hero-tech{max-width:690px}
.hero-visual{
height:650px;
position:relative;
perspective:1600px;
transform-style:preserve-3d;
isolation:isolate;
min-width:0;
}
.visual-halo{
position:absolute;
inset:4% -4% 4% -4%;
border-radius:48px;
background:
radial-gradient(circle at 54% 42%,rgba(24,140,255,.25),transparent 27%),
radial-gradient(circle at 35% 68%,rgba(137,218,255,.11),transparent 24%);
filter:blur(34px);
pointer-events:none;
}
.visual-grid{
position:absolute;
inset:15% -12% -12% -10%;
background-image:
linear-gradient(rgba(70,164,255,.10) 1px,transparent 1px),
linear-gradient(90deg,rgba(70,164,255,.10) 1px,transparent 1px);
background-size:40px 40px;
transform:perspective(650px) rotateX(64deg) rotateZ(-8deg);
mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 50%,transparent 92%);
animation:gridDrift 20s linear infinite;
}
.visual-floor{
position:absolute;
left:3%;
right:1%;
bottom:2%;
height:160px;
border-radius:50%;
background:radial-gradient(ellipse at center,rgba(103,200,255,.24),rgba(24,140,255,.09) 30%,transparent 72%);
filter:blur(28px);
}
.hero-device{
position:absolute;
left:7%;
top:9%;
width:590px;
height:392px;
transform:rotate(-5deg);
animation:deviceFloat 8.5s ease-in-out infinite;
z-index:4;
}
.device-frame{
position:relative;
width:100%;
height:100%;
border-radius:34px;
overflow:hidden;
background:
linear-gradient(180deg,rgba(13,21,42,.96),rgba(7,13,28,.88));
border:1px solid rgba(190,232,255,.18);
box-shadow:
0 60px 150px rgba(0,0,0,.55),
0 18px 70px rgba(24,140,255,.15),
inset 0 1px 0 rgba(255,255,255,.13);
backdrop-filter:blur(18px);
}
.device-frame:after{
content:"";
position:absolute;
inset:1px;
border-radius:33px;
border:1px solid rgba(255,255,255,.045);
pointer-events:none;
}
.device-topbar,.device-footer{
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 16px;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
position:relative;
z-index:3;
}
.device-topbar{border-bottom:1px solid rgba(255,255,255,.08)}
.device-footer{border-top:1px solid rgba(255,255,255,.08)}
.device-dots{display:flex;gap:6px}
.device-dots i,.mock-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.device-topbar span,.device-footer span,.mock-bar span{
font-size:9px;
letter-spacing:.15em;
color:#8fc6ff;
font-weight:800;
}
.device-topbar b{
font-size:9px;
letter-spacing:.16em;
color:#dff5ff;
border:1px solid rgba(143,211,255,.25);
padding:6px 9px;
border-radius:999px;
}
.device-screen{
position:relative;
height:308px;
padding:28px;
overflow:hidden;
}
.device-screen:before{
content:"";
position:absolute;
inset:16px;
border-radius:26px;
background:
radial-gradient(circle at 20% 15%,rgba(133,216,255,.13),transparent 26%),
radial-gradient(circle at 80% 80%,rgba(24,140,255,.11),transparent 28%),
linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.06);
}
.device-glare{
position:absolute;
left:-25%;
top:-38%;
width:64%;
height:190%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
transform:rotate(17deg);
filter:blur(10px);
animation:glareSweep 8s ease-in-out infinite;
}
.device-copy{
position:relative;
z-index:2;
max-width:235px;
}
.device-copy small{
display:block;
font-size:10px;
font-weight:900;
letter-spacing:.18em;
color:#8fc6ff;
}
.device-copy strong{
display:block;
margin:12px 0 10px;
font-size:92px;
line-height:.82;
letter-spacing:-.09em;
background:linear-gradient(180deg,#fff,#dff4ff 60%,#8fd7ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.device-copy p{
margin:0;
color:#bfd8ec;
font-size:13px;
line-height:1.65;
}
.device-ui{
position:absolute;
right:28px;
top:28px;
width:260px;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:13px;
z-index:2;
}
.ui-main,.ui-card{
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
border-radius:20px;
box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.ui-main{height:210px;padding:16px}
.ui-kicker{
display:block;
font-size:8px;
letter-spacing:.18em;
color:#8fc6ff;
font-weight:900;
}
.ui-heading,.ui-subheading{
border-radius:999px;
background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(135,211,255,.25));
}
.ui-heading{height:12px;width:84%;margin-top:16px}
.ui-subheading{height:8px;width:62%;margin-top:10px}
.ui-visual{
height:124px;
margin-top:16px;
border-radius:15px;
background:
radial-gradient(circle at 68% 32%,rgba(115,210,255,.36),transparent 28%),
linear-gradient(135deg,rgba(24,140,255,.18),rgba(255,255,255,.045));
border:1px solid rgba(255,255,255,.06);
}
.ui-side{display:flex;flex-direction:column;gap:13px}
.ui-card{height:98px;padding:14px;display:flex;flex-direction:column;gap:9px}
.ui-card span{display:block;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.84),rgba(24,140,255,.16))}
.ui-card span:nth-child(2){width:68%}
.ui-card span:nth-child(3){width:84%}
.ui-card.alt{background:linear-gradient(180deg,rgba(20,44,84,.42),rgba(255,255,255,.018))}
.project-mock{
position:absolute;
width:235px;
height:180px;
border-radius:24px;
overflow:hidden;
background:linear-gradient(180deg,rgba(12,19,37,.96),rgba(7,13,27,.84));
border:1px solid rgba(190,232,255,.15);
box-shadow:
0 34px 90px rgba(0,0,0,.48),
0 10px 40px rgba(24,140,255,.09),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
z-index:6;
}
.mock-bar{
height:34px;
display:flex;
align-items:center;
gap:6px;
padding:0 12px;
border-bottom:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}
.mock-bar span{margin-left:6px}
.mock-content{padding:13px}
.mock-photo{
height:78px;
border-radius:14px;
border:1px solid rgba(255,255,255,.06);
margin-bottom:12px;
}
.mock-photo.car{
background:
radial-gradient(circle at 68% 30%,rgba(151,224,255,.32),transparent 20%),
linear-gradient(135deg,#17223a,#0b1220 52%,#173b66);
}
.mock-photo.inventory{
background:
linear-gradient(90deg,rgba(255,255,255,.06) 48%,transparent 48% 52%,rgba(255,255,255,.045) 52%),
linear-gradient(180deg,#182338,#0d1424);
}
.mock-photo.corporate{
background:
linear-gradient(135deg,rgba(139,220,255,.16),transparent 38%),
linear-gradient(180deg,#15263e,#0b1324);
}
.mock-content b{
display:block;
color:#fff;
font-size:14px;
line-height:1.25;
}
.mock-content small{
display:block;
margin-top:5px;
color:#adc8dc;
font-size:10px;
line-height:1.4;
}
.mock-a{left:-2%;top:45%;transform:rotate(-10deg);animation:mockA 8s ease-in-out infinite}
.mock-b{right:-1%;top:20%;transform:rotate(8deg);animation:mockB 9s ease-in-out infinite}
.mock-c{right:8%;bottom:5%;transform:rotate(3deg);animation:mockC 7.5s ease-in-out infinite}
.visual-caption{
position:absolute;
left:23%;
bottom:0;
font-size:10px;
letter-spacing:.36em;
color:rgba(181,222,255,.55);
font-weight:900;
white-space:nowrap;
}
@keyframes deviceFloat{
0%,100%{transform:rotate(-5deg) translateY(0)}
50%{transform:rotate(-3deg) translateY(-12px)}
}
@keyframes mockA{
0%,100%{transform:rotate(-10deg) translateY(0)}
50%{transform:rotate(-8deg) translateY(-9px)}
}
@keyframes mockB{
0%,100%{transform:rotate(8deg) translateY(0)}
50%{transform:rotate(6deg) translateY(-11px)}
}
@keyframes mockC{
0%,100%{transform:rotate(3deg) translateY(0)}
50%{transform:rotate(1deg) translateY(-8px)}
}
@media(max-width:1180px){
.hero-grid{
grid-template-columns:1fr !important;
gap:10px !important;
}
.hero-copy{
padding:80px 0 12px !important;
}
.hero-visual{
width:min(100%,780px);
height:700px;
margin:0 auto;
}
.hero-device{
left:50%;
width:min(88%,590px);
transform:translateX(-50%) rotate(-4deg);
}
.mock-a{left:3%;top:48%}
.mock-b{right:2%;top:22%}
.mock-c{right:12%;bottom:5%}
}
@media(max-width:720px){
.hero{padding-top:70px}
.hero-copy{padding-top:76px !important}
.hero-title{font-size:clamp(3.2rem,15vw,4.8rem)}
.hero-visual{
height:490px;
width:100%;
}
.visual-grid{inset:30% -24% -8% -24%}
.hero-device{
left:0;
top:4%;
width:100%;
height:300px;
transform:none;
}
.device-screen{height:226px;padding:18px}
.device-copy strong{font-size:60px}
.device-copy p{max-width:160px;font-size:11px}
.device-ui{width:145px;right:16px;top:18px;gap:8px}
.ui-main{height:148px;padding:11px}
.ui-visual{height:80px}
.ui-card{height:70px;padding:10px}
.project-mock{width:165px;height:126px}
.mock-content{padding:9px}
.mock-photo{height:48px;margin-bottom:7px}
.mock-content b{font-size:11px}
.mock-content small{font-size:9px}
.mock-a{left:4px;top:auto;bottom:10px;transform:none}
.mock-b{right:4px;top:auto;bottom:10px;transform:none}
.mock-c{display:none}
.visual-caption{display:none}
}
/* =========================
V3.1 — LUXURY / BRIGHTNESS / MOTION POLISH
========================= */
.hero{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 74% 24%, rgba(35,154,255,.14), transparent 18%),
radial-gradient(circle at 62% 58%, rgba(133,217,255,.08), transparent 22%),
radial-gradient(circle at 18% 14%, rgba(95,170,255,.05), transparent 18%),
linear-gradient(180deg,#020611 0%,#081223 56%,#030711 100%);
}
.hero:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 80% 30%, rgba(255,255,255,.045), transparent 12%),
radial-gradient(circle at 70% 44%, rgba(255,255,255,.025), transparent 16%),
radial-gradient(circle at 16% 18%, rgba(255,255,255,.018), transparent 14%);
mix-blend-mode:screen;
}
.hero-copy{
filter:drop-shadow(0 14px 44px rgba(0,0,0,.10));
}
.hero-title{
text-shadow:0 18px 42px rgba(0,0,0,.22);
}
.hero-title .accent{
color:#2b97ff;
text-shadow:
0 0 18px rgba(43,151,255,.18),
0 10px 34px rgba(43,151,255,.10);
}
.hero-lead{
color:#c0cadc;
}
.button{
background:linear-gradient(180deg,#4fb1ff 0%,#2092ff 58%,#147de8 100%);
box-shadow:
0 18px 52px rgba(24,140,255,.28),
0 0 0 1px rgba(137,213,255,.10),
inset 0 1px 0 rgba(255,255,255,.24),
inset 0 -12px 20px rgba(8,20,47,.18);
}
.button:hover{
transform:translateY(-2px);
box-shadow:
0 24px 60px rgba(24,140,255,.32),
0 0 0 1px rgba(137,213,255,.12),
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -12px 20px rgba(8,20,47,.16);
}
.hero-tech div{
background:
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03)),
radial-gradient(circle at top left, rgba(141,222,255,.06), transparent 35%);
border-color:rgba(171,231,255,.14);
box-shadow:
0 14px 36px rgba(0,0,0,.14),
inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-tech div:hover{
transform:translateY(-3px) scale(1.01);
}
.visual-halo{
background:
radial-gradient(circle at 54% 42%,rgba(24,140,255,.30),transparent 26%),
radial-gradient(circle at 36% 66%,rgba(154,230,255,.14),transparent 24%),
radial-gradient(circle at 76% 26%,rgba(255,255,255,.055),transparent 16%);
filter:blur(38px);
animation:haloPulse 7s ease-in-out infinite;
}
.visual-grid{
opacity:.95;
}
.visual-floor{
height:175px;
background:radial-gradient(ellipse at center,rgba(111,207,255,.30),rgba(24,140,255,.12) 30%,transparent 72%);
filter:blur(32px);
animation:floorPulse 6.5s ease-in-out infinite;
}
.hero-device{
animation:deviceFloatLux 9s ease-in-out infinite;
}
.device-frame{
box-shadow:
0 68px 165px rgba(0,0,0,.58),
0 22px 74px rgba(24,140,255,.18),
0 0 0 1px rgba(196,236,255,.04),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -26px 55px rgba(4,9,20,.20);
}
.device-frame:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 22% 0%, rgba(255,255,255,.10), transparent 18%),
linear-gradient(135deg,rgba(255,255,255,.10),transparent 24%,transparent 66%,rgba(112,203,255,.08) 100%);
pointer-events:none;
z-index:1;
}
.device-screen:after{
content:"";
position:absolute;
inset:14px;
border-radius:24px;
background:
repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px),
linear-gradient(180deg,rgba(255,255,255,.05),transparent 16%,transparent 82%,rgba(255,255,255,.02));
mix-blend-mode:screen;
pointer-events:none;
}
.device-glare{
width:68%;
opacity:.72;
animation:glareSweepLux 9s ease-in-out infinite;
}
.device-copy strong{
text-shadow:
0 16px 44px rgba(24,140,255,.16),
0 0 20px rgba(255,255,255,.05);
}
.device-ui{
perspective:800px;
}
.ui-main,.ui-card{
box-shadow:
0 18px 44px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.08);
}
.ui-main{
transform:rotateY(-4deg) rotateX(2deg);
}
.ui-side{
transform:rotateY(5deg);
}
.ui-visual{
position:relative;
overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ui-visual:before{
content:"";
position:absolute;
inset:auto -20% -8% -20%;
height:54%;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.06));
pointer-events:none;
}
.project-mock{
box-shadow:
0 38px 100px rgba(0,0,0,.50),
0 12px 42px rgba(24,140,255,.11),
inset 0 1px 0 rgba(255,255,255,.09);
backdrop-filter:blur(20px);
}
.project-mock:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(140deg,rgba(255,255,255,.07),transparent 28%,transparent 72%,rgba(102,202,255,.05));
pointer-events:none;
}
.mock-a{animation:mockALux 9s ease-in-out infinite}
.mock-b{animation:mockBLux 10s ease-in-out infinite}
.mock-c{animation:mockCLux 8.5s ease-in-out infinite}
.mock-photo{
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.visual-caption{
color:rgba(198,232,255,.66);
text-shadow:0 0 20px rgba(24,140,255,.10);
animation:captionGlow 6s ease-in-out infinite;
}
.hero-strip{
background:
linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));
}
.marquee{
animation-duration:26s;
}
@keyframes haloPulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.92;transform:scale(1.04)}
}
@keyframes floorPulse{
0%,100%{opacity:.95;transform:scale(1)}
50%{opacity:1;transform:scale(1.05)}
}
@keyframes deviceFloatLux{
0%,100%{transform:rotate(-5deg) translateY(0)}
50%{transform:rotate(-3deg) translateY(-14px)}
}
@keyframes glareSweepLux{
0%,100%{transform:translateX(-8%) rotate(17deg);opacity:.28}
50%{transform:translateX(102%) rotate(17deg);opacity:.82}
}
@keyframes mockALux{
0%,100%{transform:rotate(-10deg) translateY(0)}
50%{transform:rotate(-8deg) translateY(-12px)}
}
@keyframes mockBLux{
0%,100%{transform:rotate(8deg) translateY(0)}
50%{transform:rotate(6deg) translateY(-13px)}
}
@keyframes mockCLux{
0%,100%{transform:rotate(3deg) translateY(0)}
50%{transform:rotate(1deg) translateY(-10px)}
}
@keyframes captionGlow{
0%,100%{opacity:.65;letter-spacing:.36em}
50%{opacity:1;letter-spacing:.42em}
}
@media(max-width:720px){
.hero-tech div:hover{
transform:none;
}
}
/* =========================
V3.2 — HYBRID HERO (3.1 + B + C)
========================= */
.project-mock{display:none !important;}
.hero-visual{
overflow:visible;
}
.editorial-backword{
position:absolute;
left:50%;
top:43%;
transform:translate(-50%,-50%);
font-size:min(18vw,11rem);
font-weight:950;
letter-spacing:-.09em;
color:rgba(255,255,255,.03);
white-space:nowrap;
pointer-events:none;
z-index:1;
text-shadow:0 0 34px rgba(24,140,255,.02);
}
.signature-word{
position:absolute;
right:3%;
top:2%;
font-size:min(18vw,8rem);
line-height:.82;
letter-spacing:-.11em;
font-weight:950;
color:rgba(255,255,255,.045);
pointer-events:none;
z-index:1;
text-shadow:0 0 28px rgba(24,140,255,.04);
}
.hybrid-glass{
position:absolute;
border-radius:28px;
border:1px solid rgba(194,233,255,.14);
background:
linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.022)),
radial-gradient(circle at top left, rgba(141,223,255,.10), transparent 32%);
box-shadow:
0 26px 70px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
z-index:2;
}
.hybrid-glass-one{
right:1%;
top:16%;
width:185px;
height:230px;
transform:rotate(10deg);
animation:hybridGlassOne 8.8s ease-in-out infinite;
}
.hybrid-glass-two{
right:14%;
bottom:7%;
width:165px;
height:180px;
transform:rotate(-8deg);
animation:hybridGlassTwo 9.4s ease-in-out infinite;
}
.hybrid-panel{
position:absolute;
width:220px;
padding:20px;
border-radius:22px;
border:1px solid rgba(194,233,255,.14);
background:
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.022)),
radial-gradient(circle at top left, rgba(141,223,255,.10), transparent 32%);
box-shadow:
0 26px 64px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
z-index:5;
}
.hybrid-panel:before{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 42%);
pointer-events:none;
}
.hybrid-panel small{
position:relative;
display:block;
font-size:9px;
letter-spacing:.18em;
color:#91c8ff;
font-weight:900;
margin-bottom:10px;
}
.hybrid-panel strong{
position:relative;
display:block;
font-size:26px;
line-height:1.04;
color:#fff;
letter-spacing:-.04em;
}
.hybrid-panel span{
position:relative;
display:block;
margin-top:10px;
color:#bfd8ec;
font-size:12px;
line-height:1.65;
}
.hybrid-panel-a{
left:0;
bottom:9%;
transform:rotate(-7deg);
animation:panelFloatA 8.2s ease-in-out infinite;
}
.hybrid-panel-b{
right:6%;
top:18%;
transform:rotate(6deg);
animation:panelFloatB 8.8s ease-in-out infinite;
}
.visual-caption{
left:22%;
bottom:0;
color:rgba(198,232,255,.62);
}
@keyframes hybridGlassOne{
0%,100%{transform:rotate(10deg) translateY(0)}
50%{transform:rotate(8deg) translateY(-10px)}
}
@keyframes hybridGlassTwo{
0%,100%{transform:rotate(-8deg) translateY(0)}
50%{transform:rotate(-5deg) translateY(-10px)}
}
@keyframes panelFloatA{
0%,100%{transform:rotate(-7deg) translateY(0)}
50%{transform:rotate(-5deg) translateY(-9px)}
}
@keyframes panelFloatB{
0%,100%{transform:rotate(6deg) translateY(0)}
50%{transform:rotate(4deg) translateY(-11px)}
}
@media(max-width:1180px){
.hybrid-panel-a{left:3%;bottom:7%}
.hybrid-panel-b{right:5%;top:18%}
.hybrid-glass-one{right:4%}
.hybrid-glass-two{right:18%}
}
@media(max-width:720px){
.editorial-backword{
font-size:4.8rem;
top:21%;
}
.signature-word{
font-size:4.4rem;
right:4%;
top:6%;
}
.hybrid-glass-one,.hybrid-glass-two{
display:none;
}
.hybrid-panel{
width:164px;
padding:12px;
}
.hybrid-panel strong{
font-size:18px;
}
.hybrid-panel span{
font-size:10px;
}
.hybrid-panel-a{
left:4px;
bottom:12px;
transform:none;
}
.hybrid-panel-b{
right:4px;
top:auto;
bottom:12px;
transform:none;
}
.visual-caption{
display:none;
}
}
/* =========================
V3.3 — PANEL REPOSITION + MESSAGE UPDATE
========================= */
.hybrid-panel{
width:238px;
}
.hybrid-panel-a{
left:-1%;
bottom:9%;
}
.hybrid-panel-b{
right:-1%;
top:4%;
width:255px;
transform:rotate(4deg);
z-index:7;
}
.hybrid-panel-b strong{
font-size:22px;
line-height:1.06;
}
.hybrid-panel-b span{
margin-top:12px;
}
.hybrid-glass-one{
right:5%;
top:42%;
width:170px;
height:210px;
transform:rotate(8deg);
}
.hybrid-glass-two{
right:20%;
bottom:6%;
width:150px;
height:160px;
transform:rotate(-7deg);
}
.visual-caption{
left:21%;
bottom:-2px;
}
@media(max-width:1180px){
.hybrid-panel-a{
left:3%;
bottom:7%;
}
.hybrid-panel-b{
right:2%;
top:4%;
width:240px;
}
.hybrid-glass-one{
right:4%;
top:44%;
}
.hybrid-glass-two{
right:18%;
bottom:6%;
}
}
@media(max-width:720px){
.hybrid-panel{
width:164px;
}
.hybrid-panel-b{
right:4px;
top:auto;
bottom:12px;
transform:none;
}
.hybrid-panel-b strong{
font-size:18px;
}
}
/* =========================
V3.4 — MOVE RIGHT PANEL
========================= */
.hybrid-panel-b{
right:18%;
top:auto;
bottom:16%;
width:270px;
transform:rotate(2deg);
z-index:7;
}
.hybrid-glass-one{
right:4%;
top:14%;
width:168px;
height:205px;
}
.hybrid-glass-two{
right:9%;
bottom:3%;
width:140px;
height:150px;
}
.visual-caption{
left:24%;
bottom:-1px;
}
@media(max-width:1180px){
.hybrid-panel-b{
right:17%;
top:auto;
bottom:15%;
width:248px;
}
.hybrid-glass-one{
right:2%;
top:16%;
}
.hybrid-glass-two{
right:10%;
bottom:2%;
}
}
@media(max-width:720px){
.hybrid-panel-b{
right:4px;
top:auto;
bottom:12px;
width:164px;
transform:none;
}
}
/* =========================
V3.5 — REBALANCE RIGHT SIDE
========================= */
.hybrid-panel-b{
right:8%;
top:auto;
bottom:22%;
width:268px;
transform:rotate(-3deg);
z-index:7;
}
.hybrid-panel-c{
position:absolute;
right:1%;
top:8%;
width:248px;
padding:20px;
border-radius:22px;
border:1px solid rgba(194,233,255,.14);
background:
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.022)),
radial-gradient(circle at top left, rgba(141,223,255,.10), transparent 32%);
box-shadow:
0 26px 64px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(18px);
z-index:7;
transform:rotate(5deg);
animation:panelFloatC 9s ease-in-out infinite;
}
.hybrid-panel-c:before{
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 42%);
pointer-events:none;
}
.hybrid-panel-c small{
position:relative;
display:block;
font-size:9px;
letter-spacing:.18em;
color:#91c8ff;
font-weight:900;
margin-bottom:10px;
}
.hybrid-panel-c strong{
position:relative;
display:block;
font-size:22px;
line-height:1.08;
color:#fff;
letter-spacing:-.03em;
}
.hybrid-panel-c span{
position:relative;
display:block;
margin-top:12px;
color:#bfd8ec;
font-size:12px;
line-height:1.65;
}
.hybrid-glass-one{
right:3%;
top:38%;
width:166px;
height:205px;
}
.hybrid-glass-two{
right:1%;
bottom:2%;
width:152px;
height:154px;
}
.visual-caption{
left:22%;
bottom:-1px;
}
@keyframes panelFloatC{
0%,100%{transform:rotate(5deg) translateY(0)}
50%{transform:rotate(3deg) translateY(-10px)}
}
@media(max-width:1180px){
.hybrid-panel-b{
right:10%;
bottom:21%;
width:248px;
}
.hybrid-panel-c{
right:2%;
top:7%;
width:228px;
}
.hybrid-glass-one{
right:2%;
top:40%;
}
.hybrid-glass-two{
right:2%;
bottom:2%;
}
}
@media(max-width:720px){
.hybrid-panel-b{
right:4px;
top:auto;
bottom:12px;
width:164px;
transform:none;
}
.hybrid-panel-c{
display:none;
}
}
/* =========================
V3.6 — MOVE WEB7 PANEL TO LOWER RIGHT
========================= */
/* "Presença digital com assinatura." passa para a zona inferior direita,
libertando totalmente a área central do mockup principal. */
.hybrid-panel-b{
right:1%;
top:auto;
bottom:2%;
width:270px;
transform:rotate(3deg);
z-index:8;
}
/* O vidro intermédio sobe ligeiramente para preencher a zona livre
sem competir com texto ou com o painel WEB7. */
.hybrid-glass-one{
right:4%;
top:40%;
width:168px;
height:200px;
transform:rotate(7deg);
}
/* A segunda placa fica mais ao centro e discreta. */
.hybrid-glass-two{
right:22%;
bottom:10%;
width:145px;
height:150px;
transform:rotate(-6deg);
}
/* Mantemos o CTA criativo bem isolado no canto superior direito. */
.hybrid-panel-c{
right:1%;
top:7%;
}
/* Assinatura inferior deslocada para não colidir com o novo painel. */
.visual-caption{
left:18%;
right:auto;
bottom:-1px;
max-width:55%;
}
@media(max-width:1180px){
.hybrid-panel-b{
right:2%;
bottom:2%;
width:248px;
}
.hybrid-glass-one{
right:4%;
top:42%;
}
.hybrid-glass-two{
right:24%;
bottom:12%;
}
}
@media(max-width:720px){
.hybrid-panel-b{
right:4px;
bottom:12px;
width:164px;
transform:none;
}
}
/* =========================
V3.7 — LOWER "DESAFIE A NOSSA IMAGINAÇÃO"
========================= */
.hybrid-panel-c{
top:15%;
}
@media(max-width:1180px){
.hybrid-panel-c{
top:14%;
}
}
/* =========================
V5 — DIGITAL SCULPTURE HERO
========================= */
.hero-v5{
position:relative;
min-height:100vh;
padding-top:82px;
overflow:hidden;
background:
radial-gradient(circle at 78% 24%,rgba(24,140,255,.12),transparent 18%),
radial-gradient(circle at 64% 58%,rgba(196,84,255,.08),transparent 20%),
linear-gradient(180deg,#020510 0%,#071121 58%,#030711 100%);
}
.hero-v5-bg{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
}
.v5-aurora{
position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:.72;
mix-blend-mode:screen;
}
.aurora-a{
width:520px;height:520px;
right:7%;top:2%;
background:radial-gradient(circle,#1f9cff 0%,rgba(31,156,255,.35) 35%,transparent 72%);
animation:auroraA 11s ease-in-out infinite;
}
.aurora-b{
width:460px;height:460px;
right:30%;bottom:0;
background:radial-gradient(circle,#8d52ff 0%,rgba(141,82,255,.26) 38%,transparent 72%);
animation:auroraB 13s ease-in-out infinite;
}
.aurora-c{
width:320px;height:320px;
right:0;bottom:8%;
background:radial-gradient(circle,#ff5aa5 0%,rgba(255,90,165,.18) 35%,transparent 72%);
animation:auroraC 9s ease-in-out infinite;
}
.v5-grain{
position:absolute;
inset:0;
opacity:.035;
background-image:
linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:3px 3px;
}
.hero-v5 .hero-grid{
min-height:calc(100vh - 132px);
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(620px,1.1fr);
gap:68px;
align-items:center;
position:relative;
z-index:3;
}
.hero-v5 .hero-copy{
padding:70px 0 56px;
min-width:0;
}
.hero-v5 .hero-title{
font-size:clamp(3.65rem,5.7vw,6.6rem);
max-width:700px;
}
.hero-v5 .hero-title .accent{
background:linear-gradient(90deg,#2fa0ff,#72d7ff 52%,#b55cff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 14px 36px rgba(72,164,255,.12);
}
.hero-v5 .hero-lead{
max-width:660px;
color:#bcc7da;
}
.hero-v5 .hero-tech{
max-width:700px;
}
.hero-v5 .hero-tech div{
background:
linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.026)),
radial-gradient(circle at top left,rgba(80,185,255,.07),transparent 35%);
border-color:rgba(163,221,255,.12);
}
.hero-v5-lines{
display:flex;
gap:18px 26px;
flex-wrap:wrap;
margin-top:22px;
}
.hero-v5-lines span{
position:relative;
padding-left:18px;
font-size:12px;
color:#d6e7f6;
letter-spacing:.04em;
font-weight:700;
}
.hero-v5-lines span:before{
content:"";
position:absolute;
left:0;top:.62em;
width:8px;height:1px;
background:linear-gradient(90deg,#38a8ff,#b85dff);
}
.digital-sculpture{
position:relative;
height:670px;
perspective:1800px;
transform-style:preserve-3d;
overflow:visible;
}
.sculpture-halo{
position:absolute;
inset:4% -8% 6% -8%;
border-radius:50%;
background:
radial-gradient(circle at 52% 45%,rgba(80,186,255,.24),transparent 27%),
radial-gradient(circle at 72% 58%,rgba(176,78,255,.18),transparent 22%),
radial-gradient(circle at 22% 68%,rgba(255,90,165,.12),transparent 18%);
filter:blur(42px);
animation:haloMove 10s ease-in-out infinite;
}
.sculpture-floor{
position:absolute;
left:2%;right:0;bottom:1%;
height:170px;
border-radius:50%;
background:radial-gradient(ellipse at center,rgba(100,207,255,.30),rgba(76,73,255,.10) 36%,transparent 74%);
filter:blur(30px);
transform:rotate(-4deg);
}
.screen-panel{
position:absolute;
border-radius:30px;
overflow:hidden;
border:1px solid rgba(217,239,255,.16);
background:linear-gradient(180deg,rgba(10,16,32,.95),rgba(7,11,24,.90));
box-shadow:
0 46px 120px rgba(0,0,0,.46),
0 12px 48px rgba(40,145,255,.10),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter:blur(18px);
transform-style:preserve-3d;
}
.browser-chrome{
height:34px;
display:flex;
align-items:center;
gap:6px;
padding:0 12px;
border-bottom:1px solid rgba(255,255,255,.07);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.browser-chrome i{
width:7px;height:7px;
border-radius:50%;
background:rgba(255,255,255,.44);
}
.browser-chrome span{
margin-left:7px;
font-size:8px;
letter-spacing:.14em;
color:#9bcfff;
font-weight:800;
}
.browser-chrome.light{
background:rgba(255,255,255,.75);
border-bottom-color:rgba(0,0,0,.06);
}
.browser-chrome.light i{
background:#aab4c1;
}
.browser-chrome.light span{
color:#697487;
}
.mock-page{
position:relative;
height:calc(100% - 34px);
overflow:hidden;
}
.panel-hero{
left:13%;
top:12%;
width:470px;
height:360px;
transform:rotate(-6deg);
z-index:5;
animation:panelHero 9s ease-in-out infinite;
}
.panel-color{
right:1%;
top:7%;
width:300px;
height:260px;
transform:rotate(8deg);
z-index:6;
animation:panelColor 8.4s ease-in-out infinite;
}
.panel-light{
left:-2%;
bottom:8%;
width:330px;
height:245px;
transform:rotate(-10deg);
z-index:6;
animation:panelLight 9.6s ease-in-out infinite;
}
.panel-future{
right:5%;
bottom:4%;
width:330px;
height:260px;
transform:rotate(5deg);
z-index:7;
animation:panelFuture 8.8s ease-in-out infinite;
}
/* Dark premium page */
.page-dark{
padding:26px;
background:
radial-gradient(circle at 72% 34%,rgba(44,162,255,.30),transparent 24%),
radial-gradient(circle at 78% 70%,rgba(135,88,255,.20),transparent 26%),
linear-gradient(135deg,#090e1a,#10192c 56%,#0b1020);
}
.page-kicker{
font-size:9px;
letter-spacing:.19em;
color:#8ed1ff;
font-weight:900;
}
.page-title{
margin-top:16px;
font-size:48px;
line-height:.88;
letter-spacing:-.055em;
color:#fff;
font-weight:950;
}
.page-title em{
font-style:normal;
background:linear-gradient(90deg,#2ea0ff,#8fe8ff 55%,#c16cff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.page-copy{
width:44%;
height:8px;
margin-top:18px;
border-radius:999px;
background:linear-gradient(90deg,#fff,rgba(255,255,255,.2));
}
.page-visual{
position:absolute;
right:24px;
bottom:24px;
width:46%;
height:58%;
border-radius:22px;
border:1px solid rgba(255,255,255,.08);
}
.visual-dark{
background:
radial-gradient(circle at 70% 25%,rgba(132,226,255,.38),transparent 25%),
linear-gradient(145deg,#16264b,#0b1223 52%,#233b7d);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.page-button{
width:110px;height:34px;
margin-top:24px;
border-radius:999px;
background:linear-gradient(180deg,#3fb0ff,#147fe7);
box-shadow:0 12px 28px rgba(23,136,255,.22);
}
/* Color campaign page */
.page-color{
padding:24px;
background:
radial-gradient(circle at 78% 22%,#ffcc5b 0%,rgba(255,204,91,.86) 13%,transparent 28%),
radial-gradient(circle at 28% 78%,#ff4fa3 0%,rgba(255,79,163,.68) 16%,transparent 34%),
linear-gradient(135deg,#5a2cff,#1f6dff 58%,#00c2ff);
}
.color-orb{
position:absolute;
width:160px;height:160px;
border-radius:50%;
right:-38px;top:-30px;
background:linear-gradient(145deg,#fff4ad,#ff8c43 50%,#ff4fa3);
box-shadow:0 25px 70px rgba(255,84,138,.30);
}
.page-color .page-kicker{
color:rgba(255,255,255,.78);
}
.page-color .page-title{
font-size:36px;
margin-top:14px;
max-width:180px;
text-shadow:0 16px 32px rgba(31,17,83,.18);
}
.color-grid{
position:absolute;
left:22px;right:22px;bottom:20px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.color-grid span{
height:44px;
border-radius:12px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.20);
backdrop-filter:blur(8px);
}
/* Light corporate page */
.page-light{
background:#f8fbff;
color:#081325;
}
.light-nav{
height:42px;
display:flex;
align-items:center;
gap:14px;
padding:0 18px;
border-bottom:1px solid #e8edf4;
}
.light-nav b{
width:70px;height:11px;
border-radius:999px;
background:linear-gradient(90deg,#09213f,#2a5f9d);
margin-right:auto;
}
.light-nav span{
width:36px;height:7px;
border-radius:999px;
background:#b7c5d5;
}
.light-hero{
padding:22px 20px 10px;
}
.light-hero small{
font-size:8px;
letter-spacing:.17em;
color:#2d77c5;
font-weight:900;
}
.light-hero strong{
display:block;
margin-top:10px;
font-size:28px;
line-height:1;
letter-spacing:-.04em;
}
.light-hero p{
width:70%;
height:6px;
margin:10px 0 0;
border-radius:999px;
background:#d8e1ec;
}
.light-hero p:nth-of-type(2){width:48%}
.light-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
padding:10px 20px 18px;
}
.light-cards span{
height:55px;
border-radius:13px;
border:1px solid #e3eaf2;
background:linear-gradient(180deg,#fff,#edf4fb);
}
/* Future page */
.page-future{
background:
radial-gradient(circle at 50% 42%,rgba(89,209,255,.16),transparent 28%),
linear-gradient(145deg,#071120,#111d38 58%,#08101c);
}
.future-ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(111,219,255,.20);
}
.r1{
width:210px;height:210px;
right:-40px;top:-40px;
}
.r2{
width:140px;height:140px;
right:-6px;top:-5px;
border-style:dashed;
}
.future-copy{
position:absolute;
left:24px;top:26px;
}
.future-copy small{
display:block;
color:#6cd6ff;
font-size:10px;
letter-spacing:.2em;
font-weight:900;
}
.future-copy strong{
display:block;
margin-top:12px;
color:#fff;
font-size:34px;
line-height:.94;
letter-spacing:-.04em;
}
.future-lines{
position:absolute;
left:24px;right:24px;bottom:24px;
display:grid;
gap:9px;
}
.future-lines span{
height:7px;
border-radius:999px;
background:linear-gradient(90deg,#6edcff,rgba(76,154,255,.18));
}
.future-lines span:nth-child(1){width:92%}
.future-lines span:nth-child(2){width:68%}
.future-lines span:nth-child(3){width:80%}
.sculpture-spark{
position:absolute;
width:7px;height:7px;
border-radius:50%;
background:#fff;
box-shadow:0 0 14px #8cdfff,0 0 30px rgba(76,149,255,.75);
z-index:9;
}
.s1{left:48%;top:13%;animation:spark1 6s ease-in-out infinite}
.s2{right:16%;top:48%;animation:spark2 7s ease-in-out infinite}
.s3{left:28%;bottom:9%;animation:spark3 5.5s ease-in-out infinite}
.v5-caption{
position:absolute;
right:5%;
bottom:0;
font-size:10px;
letter-spacing:.36em;
font-weight:900;
color:rgba(207,235,255,.62);
text-shadow:0 0 20px rgba(75,167,255,.16);
white-space:nowrap;
}
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-22px,18px) scale(1.08)}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-16px) scale(1.05)}}
@keyframes auroraC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-18px,-14px) scale(1.08)}}
@keyframes haloMove{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.04) translateY(-8px)}}
@keyframes panelHero{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-12px)}}
@keyframes panelColor{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(5deg) translateY(-11px)}}
@keyframes panelLight{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-10px)}}
@keyframes panelFuture{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-13px)}}
@keyframes spark1{0%,100%{opacity:.4;transform:translate(0,0) scale(.8)}50%{opacity:1;transform:translate(8px,-10px) scale(1.4)}}
@keyframes spark2{0%,100%{opacity:.45;transform:translate(0,0) scale(.7)}50%{opacity:1;transform:translate(-10px,8px) scale(1.3)}}
@keyframes spark3{0%,100%{opacity:.35;transform:translate(0,0) scale(.8)}50%{opacity:1;transform:translate(6px,-8px) scale(1.35)}}
@media(max-width:1180px){
.hero-v5 .hero-grid{
grid-template-columns:1fr !important;
gap:12px !important;
}
.hero-v5 .hero-copy{
padding:82px 0 10px !important;
}
.digital-sculpture{
width:min(100%,820px);
height:720px;
margin:0 auto;
}
.panel-hero{left:17%}
.panel-light{left:2%}
}
@media(max-width:720px){
.hero-v5{padding-top:70px}
.hero-v5 .hero-copy{padding-top:76px !important}
.hero-v5 .hero-title{font-size:clamp(3.2rem,15vw,4.8rem)}
.digital-sculpture{
height:510px;
width:100%;
}
.panel-hero{
left:0;
top:5%;
width:100%;
height:300px;
transform:none;
}
.page-dark{padding:20px}
.page-title{font-size:38px}
.panel-color{
right:2px;
top:auto;
bottom:10px;
width:165px;
height:150px;
transform:none;
}
.panel-light{
left:2px;
bottom:10px;
width:165px;
height:150px;
transform:none;
}
.panel-future{display:none}
.page-color{padding:14px}
.page-color .page-title{font-size:22px}
.color-grid span{height:24px}
.light-nav{height:28px;padding:0 10px}
.light-hero{padding:12px 10px 6px}
.light-hero strong{font-size:18px}
.light-cards{padding:6px 10px 10px}
.light-cards span{height:30px}
.v5-caption{display:none}
}
/* =========================
V5.5 — THINK FIRST COPY REFINED
========================= */
.manifesto-intro{
margin:0 0 8px;
font-size:clamp(1.45rem,2vw,2rem);
line-height:1.35;
letter-spacing:-.02em;
color:#3d5879;
}
.manifesto-copy p strong{
color:#415c7f;
}
.manifesto-quote{
margin-top:26px;
padding:16px 0 16px 18px;
border-left:4px solid #47adff;
font-size:clamp(1.1rem,1.55vw,1.55rem);
line-height:1.48;
font-weight:900;
letter-spacing:-.02em;
color:#0a1c3c;
}
@media(max-width:720px){
.manifesto-intro{
font-size:1.22rem;
}
.manifesto-quote{
font-size:1.02rem;
padding-left:14px;
}
}
/* =========================
V5.8 — SELECTED WORK REFINED
========================= */
.portfolio{
background:
radial-gradient(circle at 16% 8%, rgba(24,140,255,.07), transparent 18%),
linear-gradient(180deg,#f6f8fb 0%,#f3f6fa 100%);
}
.portfolio-head{
margin-bottom:68px;
}
.portfolio-head h2{
max-width:760px;
}
.portfolio-head p{
max-width:690px;
color:#59657c;
}
.portfolio-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:22px;
}
.portfolio-tags span{
border:1px solid rgba(24,140,255,.10);
background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.78));
color:#1a3e77;
box-shadow:0 12px 30px rgba(14,34,67,.04);
}
.project-list{
display:grid;
gap:26px;
}
.project-row{
position:relative;
display:grid;
grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);
gap:34px;
align-items:center;
padding:28px;
border:1px solid #e6ecf3;
border-radius:28px;
background:
radial-gradient(circle at top left, rgba(73,177,255,.08), transparent 24%),
linear-gradient(180deg,#ffffff,#f8fbff 100%);
overflow:hidden;
}
.project-row:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 28%,transparent 72%,rgba(163,226,255,.10));
pointer-events:none;
}
.project-copy{
position:relative;
z-index:2;
padding:8px 6px 8px 6px;
}
.project-index{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:46px;
height:34px;
padding:0 12px;
border-radius:999px;
background:linear-gradient(180deg,#edf7ff,#dceefe);
color:#137be0;
font-size:11px;
font-weight:900;
letter-spacing:.14em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 22px rgba(16,87,160,.08);
margin-bottom:14px;
}
.project-copy small{
display:block;
font-size:11px;
letter-spacing:.16em;
color:#5e7a9d;
font-weight:900;
margin-bottom:12px;
}
.project-copy h3{
margin:0 0 14px;
font-size:clamp(2rem,2.8vw,3rem);
line-height:.94;
letter-spacing:-.05em;
color:#071326;
}
.project-copy p{
margin:0;
font-size:17px;
line-height:1.8;
color:#5c677b;
max-width:520px;
}
.project-actions{
margin-top:22px;
}
.project-actions .text-link.dark{
gap:12px;
min-height:48px;
padding:0 18px;
border-radius:999px;
border:1px solid #d8e4f3;
background:rgba(255,255,255,.76);
box-shadow:0 12px 28px rgba(18,34,64,.05);
}
.project-actions .text-link.dark:hover{
background:#fff;
}
.project-preview{
position:relative;
z-index:2;
}
.project-preview:before{
content:"";
position:absolute;
inset:9% -4% 6%;
border-radius:32px;
background:radial-gradient(circle at 60% 40%, rgba(65,175,255,.18), transparent 38%);
filter:blur(30px);
z-index:0;
}
.live-browser.compact{
position:relative;
z-index:2;
border-radius:28px;
overflow:hidden;
border:1px solid rgba(13,28,58,.10);
background:linear-gradient(180deg,rgba(10,17,33,.98),rgba(10,17,33,.92));
box-shadow:
0 34px 95px rgba(4,12,26,.20),
0 10px 34px rgba(24,140,255,.08),
inset 0 1px 0 rgba(255,255,255,.06);
}
.live-browser .browser-top{
height:40px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.live-browser .browser-top span{
color:#94a8c9;
letter-spacing:.12em;
}
.frame-wrap.compact{
background:linear-gradient(180deg,#0e162b,#101c33);
}
/* FS preview fallback card */
.fs-preview-card{
min-height:365px;
}
.fs-preview-sim{
position:relative;
min-height:325px;
padding:26px;
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:22px;
align-items:end;
background:
radial-gradient(circle at 75% 18%, rgba(122,214,255,.24), transparent 18%),
radial-gradient(circle at 82% 74%, rgba(44,162,255,.18), transparent 18%),
linear-gradient(135deg,#0a1020,#10203f 52%,#0c1426);
}
.fs-preview-copy small{
display:block;
font-size:10px;
letter-spacing:.18em;
color:#73ccff;
font-weight:900;
margin-bottom:12px;
}
.fs-preview-copy strong{
display:block;
font-size:38px;
line-height:.92;
letter-spacing:-.05em;
color:#fff;
max-width:240px;
}
.fs-preview-copy p{
margin:16px 0 0;
font-size:14px;
line-height:1.7;
color:#b9c5dc;
max-width:260px;
}
.fs-preview-ui{
position:relative;
height:220px;
}
.fs-car-card{
position:absolute;
border-radius:20px;
border:1px solid rgba(255,255,255,.10);
background:
linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),
linear-gradient(140deg,#172744,#0f1830 58%,#1a3665);
box-shadow:0 20px 44px rgba(3,8,18,.28);
overflow:hidden;
}
.fs-car-card:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 72% 28%, rgba(140,229,255,.34), transparent 22%),
linear-gradient(180deg,transparent 46%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.05) 47%, transparent 47%);
}
.fs-car-card:after{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:18px;
height:40px;
border-radius:12px;
background:
linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),
radial-gradient(circle at top left, rgba(62,177,255,.14), transparent 32%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.card-a{
left:0;
bottom:12px;
width:180px;
height:126px;
transform:rotate(-8deg);
}
.card-b{
right:8px;
bottom:44px;
width:188px;
height:134px;
transform:rotate(7deg);
}
.card-c{
left:70px;
top:0;
width:176px;
height:122px;
transform:rotate(-2deg);
}
.fs-preview-sim > a{
position:absolute;
left:26px;
bottom:26px;
display:inline-flex;
align-items:center;
gap:10px;
min-height:42px;
padding:0 15px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.08);
color:#fff;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.fs-preview-sim > a:hover{
background:rgba(255,255,255,.14);
}
@media(max-width:1120px){
.project-row{
grid-template-columns:1fr;
gap:24px;
}
}
@media(max-width:720px){
.project-row{
padding:20px;
border-radius:22px;
}
.project-copy p{
font-size:16px;
}
.fs-preview-sim{
grid-template-columns:1fr;
min-height:340px;
padding:20px;
}
.fs-preview-copy strong{
font-size:30px;
max-width:100%;
}
.fs-preview-copy p{
max-width:100%;
margin-bottom:8px;
}
.fs-preview-ui{
height:160px;
}
.card-a{width:128px;height:96px}
.card-b{width:132px;height:100px;right:0}
.card-c{width:126px;height:90px;left:48px}
}
/* =========================
V5.10 — REAL CLEAN PREVIEWS
========================= */
.clean-browser{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
overflow:visible !important;
}
.clean-browser .browser-top{display:none !important}
.clean-browser .frame-wrap{
position:relative;
aspect-ratio:16/9;
border-radius:24px;
overflow:hidden;
background:#ffffff;
box-shadow:0 26px 72px rgba(10,15,30,.14), 0 8px 22px rgba(24,140,255,.06);
}
.clean-browser .frame-wrap::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 18%,transparent 82%,rgba(255,255,255,.03));
}
.clean-browser .frame-wrap iframe{
position:absolute;
left:0; top:0;
width:1440px; height:860px;
border:0;
transform-origin:0 0;
background:#fff;
}
/* gentler scaling so more of the site is visible */
.fit-autocambota iframe{ transform:scale(.485); }
.fit-educa iframe{ transform:scale(.485); }
.fit-fs iframe{ transform:scale(.485); }
.fit-planetmais iframe{ transform:scale(.485); }
.fit-planetpeople iframe{ transform:scale(.485); }
/* larger visible area for auto cambota */
.clean-autocambota .frame-wrap{ aspect-ratio:16/9.4; }
.clean-educa .frame-wrap{ aspect-ratio:16/9.3; }
.clean-fs .frame-wrap{ aspect-ratio:16/9.2; }
.clean-planetmais .frame-wrap,
.clean-planetpeople .frame-wrap{ aspect-ratio:16/9.2; }
/* remove old FS simulated card styling influence */
.fs-preview-card,
.fs-preview-sim,
.fs-preview-ui,
.fs-car-card{all:unset}
@media(max-width:720px){
.clean-browser .frame-wrap{ border-radius:20px; }
.clean-browser .frame-wrap iframe{ width:1280px; height:820px; }
.fit-autocambota iframe,
.fit-educa iframe,
.fit-fs iframe,
.fit-planetmais iframe,
.fit-planetpeople iframe{ transform:scale(.42); }
}
/* =========================
V5.14 — COMPACT LET'S BUILD
========================= */
.final-cta{
min-height:590px;
padding:92px 0 !important;
}
.final-cta h2{
margin:24px 0 28px;
}
.final-cta p{
margin-bottom:0;
}
.final-cta .cta-orbit{
width:500px;
height:500px;
right:-50px;
top:-30px;
}
@media(max-width:720px){
.final-cta{
min-height:auto;
padding:84px 0 !important;
}
.final-cta h2{
margin-bottom:24px;
}
.final-cta .cta-orbit{
width:360px;
height:360px;
right:-150px;
top:10px;
}
}
/* =========================
V5.15 — FS AUTOMÓVEIS CORRECT PROJECT RESOLVER
========================= */
.fs-live-frame{
position:relative;
}
.fs-live-frame.is-loading:before{
content:"A carregar preview…";
position:absolute;
inset:0;
display:grid;
place-items:center;
z-index:2;
font-size:11px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
color:#6f86a5;
background:
radial-gradient(circle at 70% 25%,rgba(24,140,255,.08),transparent 22%),
linear-gradient(180deg,#f8fbff,#eef4fa);
}
.fs-preview-fallback{
position:absolute;
inset:0;
z-index:2;
display:none;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
.fs-preview-fallback:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(5,12,25,.80),rgba(5,12,25,.30) 55%,rgba(5,12,25,.05)),
linear-gradient(180deg,transparent 45%,rgba(5,12,25,.36));
}
.fs-preview-fallback-copy{
position:absolute;
left:28px;
bottom:28px;
z-index:2;
color:#fff;
}
.fs-preview-fallback-copy small{
display:block;
margin-bottom:8px;
font-size:10px;
letter-spacing:.17em;
font-weight:900;
color:#8bd9ff;
}
.fs-preview-fallback-copy strong{
display:block;
font-size:34px;
line-height:.95;
letter-spacing:-.04em;
}
.fs-live-frame.fallback-on iframe{
visibility:hidden;
}
.fs-live-frame.fallback-on .fs-preview-fallback{
display:block;
}
.fs-live-frame.resolved.is-loading:before{
display:none;
}
/* =========================
V5.16 — TRUE EDGE-TO-EDGE MARQUEE
========================= */
.hero-strip{
width:100%;
overflow:hidden;
}
.marquee{
display:flex;
align-items:center;
gap:0;
width:max-content;
min-width:0;
padding:15px 0;
white-space:nowrap;
animation:marqueeFull 36s linear infinite;
will-change:transform;
}
.marquee-track{
display:flex;
align-items:center;
flex:none;
gap:18px;
padding-right:18px;
white-space:nowrap;
}
.marquee-track span,
.marquee-track i{
flex:none;
}
@keyframes marqueeFull{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
@media(max-width:720px){
.marquee{
animation-duration:29s;
}
}
/* =========================
V5.17 — LIVING HERO + STORY FLOW
========================= */
.screen-panel{isolation:isolate}
.screen-panel .mock-page,
.screen-panel .browser-chrome{
transition:
opacity .38s ease,
filter .38s ease,
transform .38s ease,
background .65s ease,
color .45s ease;
}
.screen-panel.concept-changing .mock-page{
opacity:.18;
filter:blur(5px) saturate(.8);
transform:scale(.985);
}
.screen-panel.concept-changing .browser-chrome span{opacity:.25}
/* Very soft cinematic sweep across the website panels */
.screen-panel::after{
content:"";
position:absolute;
z-index:20;
top:-24%;
bottom:-24%;
left:-65%;
width:30%;
pointer-events:none;
opacity:0;
transform:skewX(-17deg);
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.025) 18%,
rgba(188,235,255,.15) 48%,
rgba(255,255,255,.035) 72%,
transparent
);
filter:blur(2px);
animation:panelLightSweep 10.5s ease-in-out infinite;
}
.panel-color::after{animation-delay:-7.1s}
.panel-light::after{animation-delay:-4.2s}
.panel-future::after{animation-delay:-1.2s}
@keyframes panelLightSweep{
0%,62%{left:-65%;opacity:0}
68%{opacity:.55}
80%{left:135%;opacity:.32}
84%,100%{left:135%;opacity:0}
}
/* AUTOMÓVEL <-> ARQUITETURA */
.panel-hero[data-concept="architecture"] .page-dark{
background:
radial-gradient(circle at 78% 27%,rgba(255,205,119,.30),transparent 24%),
radial-gradient(circle at 72% 78%,rgba(70,173,255,.18),transparent 28%),
linear-gradient(135deg,#131313,#24211d 54%,#10243a);
}
.panel-hero[data-concept="architecture"] .visual-dark{
background:
linear-gradient(155deg,rgba(255,255,255,.14),transparent 34%),
radial-gradient(circle at 70% 26%,rgba(255,219,151,.30),transparent 22%),
linear-gradient(145deg,#40382f,#14191f 54%,#17486a);
}
.panel-hero[data-concept="architecture"] .page-title em{
background:linear-gradient(90deg,#ffd898,#72d5ff 58%,#e9f9ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.panel-hero[data-concept="architecture"] .page-button{
background:linear-gradient(180deg,#ffd28a,#d59847);
box-shadow:0 12px 28px rgba(214,159,78,.22);
}
/* CAMPANHA <-> BEAUTY/LIFESTYLE */
.panel-color[data-concept="beauty"] .page-color{
background:
radial-gradient(circle at 78% 22%,#ffe5bb 0%,rgba(255,229,187,.84) 13%,transparent 29%),
radial-gradient(circle at 28% 78%,#ff80b4 0%,rgba(255,128,180,.62) 16%,transparent 34%),
linear-gradient(135deg,#bd4bff,#ff5da2 54%,#ff9950);
}
.panel-color[data-concept="beauty"] .color-orb{
background:linear-gradient(145deg,#fff7df,#ffb970 42%,#ff6bab 72%,#c74eff);
box-shadow:0 25px 70px rgba(255,84,154,.33);
}
.panel-color[data-concept="beauty"] .color-grid span:nth-child(1){background:rgba(255,235,207,.24)}
.panel-color[data-concept="beauty"] .color-grid span:nth-child(2){background:rgba(255,111,170,.22)}
.panel-color[data-concept="beauty"] .color-grid span:nth-child(3){background:rgba(195,78,255,.20)}
.panel-color[data-concept="beauty"] .color-grid span:nth-child(4){background:rgba(255,255,255,.19)}
/* CORPORATE <-> SAÚDE */
.panel-light[data-concept="health"] .page-light{
background:
radial-gradient(circle at 86% 18%,rgba(84,218,207,.13),transparent 20%),
linear-gradient(180deg,#fbffff,#eefaf8);
}
.panel-light[data-concept="health"] .light-nav b{
background:linear-gradient(90deg,#0c6e75,#3ac6bd);
}
.panel-light[data-concept="health"] .light-hero small{color:#15978f}
.panel-light[data-concept="health"] .light-cards span{
border-color:#dcefeb;
background:linear-gradient(180deg,#fff,#eaf7f4);
}
/* WEB7 remains the stable conceptual anchor */
.panel-future{
box-shadow:
0 48px 120px rgba(0,0,0,.45),
0 15px 55px rgba(24,140,255,.14),
inset 0 1px 0 rgba(255,255,255,.10);
}
/* Story bridge — Websites into WEB7 */
.journey-bridge{
margin-top:76px;
padding-top:28px;
border-top:1px solid #cfd4dc;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:18px;
}
.journey-bridge span,
.portfolio-story span{
font-size:11px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
color:#7d879a;
}
.journey-bridge strong,
.portfolio-story strong{
font-size:clamp(1.2rem,1.9vw,1.8rem);
line-height:1.2;
letter-spacing:-.025em;
color:#0b1730;
}
.journey-bridge i,
.portfolio-story i{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:50%;
font-style:normal;
color:#188cff;
border:1px solid rgba(24,140,255,.18);
background:#fff;
box-shadow:0 10px 25px rgba(24,140,255,.07);
animation:bridgeArrow 2.4s ease-in-out infinite;
}
@keyframes bridgeArrow{
0%,100%{transform:translateY(0)}
50%{transform:translateY(5px)}
}
/* Story bridge — WEB7 / statement into portfolio */
.portfolio-story{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:18px;
margin-bottom:48px;
padding:0 0 26px;
border-bottom:1px solid #dfe6ef;
}
/* Selected Work gets a minimal interaction instead of more framing */
.project-preview{overflow:visible}
.project-preview::after{
content:"VISITAR PROJETO ↗";
position:absolute;
z-index:8;
right:20px;
bottom:20px;
min-height:40px;
display:flex;
align-items:center;
padding:0 15px;
border-radius:999px;
background:rgba(4,11,24,.78);
color:#fff;
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(13px);
box-shadow:0 14px 34px rgba(0,0,0,.20);
font-size:10px;
font-weight:900;
letter-spacing:.12em;
opacity:0;
transform:translateY(8px);
transition:opacity .24s ease,transform .24s ease;
pointer-events:none;
}
.project-preview:hover::after{
opacity:1;
transform:translateY(0);
}
.project-preview .frame-wrap,
.project-preview .fs-live-frame{
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
}
.project-preview:hover .frame-wrap,
.project-preview:hover .fs-live-frame{
transform:scale(1.012);
box-shadow:
0 34px 90px rgba(4,12,26,.18),
0 12px 32px rgba(24,140,255,.09);
}
@media(pointer:fine) and (min-width:1181px){
.digital-sculpture{transition:transform .25s ease-out}
}
@media(max-width:720px){
.journey-bridge,
.portfolio-story{
grid-template-columns:1fr auto;
gap:10px 14px;
}
.journey-bridge span,
.portfolio-story span{
grid-column:1/-1;
}
.journey-bridge{margin-top:50px}
.portfolio-story{margin-bottom:34px}
.project-preview::after{display:none}
}
@media(prefers-reduced-motion:reduce){
.screen-panel::after,
.journey-bridge i,
.portfolio-story i{
animation:none !important;
}
}
/* =========================
V5.21 — ORIGINAL V5.17 ORANGE PANEL TO FRONT
========================= */
.panel-color{
box-shadow:
0 32px 90px rgba(0,0,0,.26),
0 10px 34px rgba(255,143,82,.14),
inset 0 1px 0 rgba(255,255,255,.08);
}
/* =========================
V5.22 — PORTFOLIO STORY PREMIUM
========================= */
.portfolio-story{
position:relative;
z-index:6;
margin-top:-88px;
margin-bottom:54px;
padding:0;
border:0;
}
.portfolio-story-card{
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
align-items:center;
gap:34px;
min-height:212px;
padding:34px 38px;
border-radius:34px;
border:1px solid rgba(255,255,255,.08);
background:
radial-gradient(circle at 82% 22%, rgba(62,153,255,.26), transparent 22%),
radial-gradient(circle at 18% 120%, rgba(110,74,255,.22), transparent 28%),
linear-gradient(145deg, rgba(7,17,34,.98), rgba(8,19,38,.94) 55%, rgba(11,27,52,.98));
box-shadow:
0 34px 90px rgba(4,12,26,.26),
0 8px 30px rgba(24,140,255,.08),
inset 0 1px 0 rgba(255,255,255,.08);
}
.portfolio-story-card:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%, transparent 70%, rgba(255,255,255,.025)),
linear-gradient(90deg, transparent, rgba(255,255,255,.02) 46%, transparent 70%);
pointer-events:none;
}
.portfolio-story-card:after{
content:"";
position:absolute;
left:38px;
right:38px;
top:24px;
height:1px;
background:linear-gradient(90deg, rgba(74,171,255,.55), rgba(255,255,255,.06), transparent 72%);
pointer-events:none;
}
.portfolio-story-copy{
position:relative;
z-index:1;
max-width:740px;
}
.portfolio-story-copy span{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:14px;
font-size:11px;
font-weight:900;
letter-spacing:.16em;
text-transform:uppercase;
color:#8ec9ff;
}
.portfolio-story-copy span:before{
content:"";
width:34px;
height:1px;
background:linear-gradient(90deg, #4aa6ff, rgba(74,166,255,.15));
}
.portfolio-story-copy strong{
display:block;
margin:0 0 10px;
font-size:clamp(2rem,3vw,3.25rem);
line-height:.96;
letter-spacing:-.05em;
color:#ffffff;
text-wrap:balance;
}
.portfolio-story-copy p{
max-width:560px;
margin:0;
font-size:clamp(1rem,1.3vw,1.15rem);
line-height:1.55;
color:rgba(232,240,250,.80);
}
.portfolio-story-side{
position:relative;
z-index:1;
display:grid;
justify-items:end;
gap:18px;
}
.portfolio-story-pills{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:10px;
}
.portfolio-story-pills b{
min-height:38px;
display:inline-flex;
align-items:center;
padding:0 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.055);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
color:#eef5ff;
font-size:10px;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
}
.portfolio-story-arrow{
width:74px;
height:74px;
display:grid;
place-items:center;
border-radius:24px;
border:1px solid rgba(255,255,255,.12);
background:
radial-gradient(circle at 50% 35%, rgba(102,190,255,.16), transparent 45%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
box-shadow:
0 18px 36px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.06);
}
.portfolio-story-arrow i{
width:52px;
height:52px;
display:grid;
place-items:center;
border-radius:18px;
font-style:normal;
font-size:22px;
color:#8dd1ff;
border:1px solid rgba(141,209,255,.16);
background:rgba(7,15,31,.55);
box-shadow:none;
animation:portfolioArrowPulse 2.6s ease-in-out infinite;
}
@keyframes portfolioArrowPulse{
0%,100%{transform:translateY(0)}
50%{transform:translateY(5px)}
}
@media(max-width:980px){
.portfolio-story{
margin-top:-54px;
}
.portfolio-story-card{
grid-template-columns:1fr;
gap:24px;
padding:30px 28px;
min-height:auto;
}
.portfolio-story-side{
justify-items:start;
}
.portfolio-story-pills{
justify-content:flex-start;
}
}
@media(max-width:720px){
.portfolio-story{
margin-top:-34px;
margin-bottom:36px;
}
.portfolio-story-card{
padding:24px 20px;
border-radius:26px;
}
.portfolio-story-card:after{
left:20px;
right:20px;
top:18px;
}
.portfolio-story-copy span{
margin-bottom:10px;
}
.portfolio-story-copy strong{
font-size:clamp(1.7rem,9vw,2.3rem);
}
.portfolio-story-copy p{
font-size:.98rem;
}
.portfolio-story-pills b{
min-height:34px;
padding:0 12px;
font-size:9px;
}
.portfolio-story-arrow{
width:62px;
height:62px;
border-radius:20px;
}
.portfolio-story-arrow i{
width:44px;
height:44px;
border-radius:14px;
font-size:19px;
}
}
@media(prefers-reduced-motion:reduce){
.portfolio-story-arrow i{
animation:none !important;
}
}
/* V5.24 — mantém o design V5.22; apenas torna o bloco clicável */
a.portfolio-story-card{
text-decoration:none;
color:inherit;
}
/* V5.62 — PCenter brand signature in footer */
.footer-brand-mark{
display:inline-flex;
align-items:center;
gap:9px;
white-space:nowrap;
}
.footer-brand-mark>span{
color:#616a7b;
}
.footer-brand-mark a{
display:inline-flex;
align-items:center;
opacity:.72;
transition:opacity .2s ease,transform .2s ease;
}
.footer-brand-mark a:hover{
opacity:1;
transform:translateY(-1px);
}
.footer-brand-mark img{
display:block;
width:auto;
height:22px;
max-width:118px;
object-fit:contain;
}
@media(max-width:720px){
.footer-brand-mark{gap:8px}
.footer-brand-mark img{height:20px;max-width:108px}
}