/* XWEB outlook — modular product-studio composition */
:root { --silver: #dfe4e9; --silver-light: #eef2f6; --navy: #111820; --blue: #3975e6; }
body { background: var(--silver); }
.reveal { transition-delay: var(--reveal-delay,0ms); }
.scroll-progress { position: fixed; inset: 0 auto auto 0; width: 0; height: 3px; background: var(--blue); z-index: 50; pointer-events: none; }

.hero { grid-template-columns: minmax(0,.92fr) minmax(480px,1.08fr); display: grid; align-items: center; gap: 5vw; max-width: none; min-height: 900px; padding-top: 130px; padding-bottom: 70px; }
.hero::before { width: 680px; right: -16%; top: 10%; opacity: .13; filter: saturate(.6); }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(58px,6.4vw,106px); line-height: .95; margin-top: 42px; }
.hero-bottom { align-items: center; margin-top: 38px; }
.hero-bottom p { max-width: 560px; color: #b4c0ba; font-size: 18px; }
.hero .round-link { width: 104px; height: 104px; min-width: 104px; background: var(--blue); border: 0; color: #fff; }
.hero-trust { display: flex; gap: 25px; margin-top: 42px; color: #84918a; font: 600 11px Manrope,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.hero-trust span::before { content: "✓"; color: #6fa0ff; margin-right: 7px; }

.hero-studio { height: 650px; position: relative; perspective: 1200px; }
.studio-glow { position: absolute; width: 720px; height: 720px; inset: -30px auto auto -50px; border-radius: 50%; background: radial-gradient(circle,#3975e638,transparent 66%); animation: glow-breathe 6s ease-in-out infinite; }
.studio-browser { position: absolute; width: 94%; height: 430px; top: 64px; right: -5%; overflow: hidden; border: 1px solid #ffffff22; border-radius: 18px; background: #edf1f5; color: var(--navy); box-shadow: 0 36px 90px #0009; transform: translate(var(--pointer-x,0),var(--pointer-y,0)) rotateY(-4deg) rotateX(2deg); transition:transform .2s ease-out; will-change: transform; }
.studio-bar { height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #d7dde4; border-bottom: 1px solid #c6ced6; }
.studio-bar i { width: 7px; height: 7px; border-radius: 50%; background: #8795a3; }.studio-bar i:first-child { background: var(--blue); }
.studio-bar span { margin-left: 10px; color: #677482; font-size: 9px; letter-spacing: .09em; }
.studio-canvas { padding: 44px; height: 278px; background: linear-gradient(120deg,#f5f7f9 65%,#d8e3f1); position: relative; overflow: hidden; }
.studio-canvas::after { content:""; position:absolute; width:240px; height:240px; border-radius:50%; right:-50px; top:-40px; border:50px solid #3975e6; opacity:.9; }
.studio-canvas small { color: #687583; font: 700 9px Manrope; letter-spacing: .14em; }
.studio-canvas strong { display: block; margin-top: 20px; font: 600 38px/1.02 Manrope; letter-spacing: -.055em; position: relative; z-index: 2; }.studio-canvas strong em { color: var(--blue); font-style: normal; }
.studio-lines { display:flex; gap:7px; margin-top:30px; }.studio-lines i { display:block; width:52px; height:5px; background:#bec7d0; border-radius:9px; }.studio-lines i:first-child { width:90px; background:var(--navy); }
.studio-stats { display:grid; grid-template-columns:repeat(3,1fr); height:107px; background:#e4e9ee; }.studio-stats span { padding:24px; border-right:1px solid #cbd3da; color:#62707e; font-size:11px; }.studio-stats b { display:block; color:var(--blue); margin-bottom:12px; }
.studio-phone { position: absolute; width: 220px; height: 450px; left: -4%; bottom: 5px; z-index: 4; padding: 52px 20px 18px; border: 7px solid #1c2733; border-radius: 36px; background: linear-gradient(160deg,#f8fafc,#dce5ef); color: var(--navy); box-shadow: 0 34px 80px #000b; transform: translate(var(--pointer-x,0),var(--pointer-y,0)) rotate(-4deg); transition:transform .2s ease-out; will-change: transform; }
.phone-island { position:absolute; width:70px; height:20px; border-radius:20px; background:#111820; top:13px; left:calc(50% - 35px); }.studio-phone small { color:#718090; font:700 8px Manrope; letter-spacing:.14em; }.studio-phone strong { display:block; margin-top:13px; font:700 21px/1.08 Manrope; letter-spacing:-.04em; }
.phone-wave { height:165px; display:flex; align-items:end; gap:7px; padding:30px 5px 18px; }.phone-wave i { flex:1; border-radius:8px 8px 2px 2px; background:#a9bdd5; animation:wave 2.4s ease-in-out infinite; }.phone-wave i:nth-child(1){height:35%}.phone-wave i:nth-child(2){height:75%;animation-delay:-.6s}.phone-wave i:nth-child(3){height:52%;animation-delay:-1.2s}.phone-wave i:nth-child(4){height:92%;background:var(--blue);animation-delay:-1.8s}.studio-phone button { width:100%; border:0; border-radius:12px; padding:13px; background:var(--navy); color:#fff; font-weight:700; }
.studio-badge { position:absolute; right:1%; bottom:24px; z-index:5; width:118px; height:118px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-content:center; text-align:center; box-shadow:0 20px 50px #0007; translate:var(--pointer-x,0) var(--pointer-y,0); transition:translate .2s ease-out; animation:badge-float 4.5s ease-in-out infinite; }.studio-badge span { font-size:21px; }.studio-badge b { font:700 10px/1.2 Manrope; letter-spacing:.12em; margin-top:7px; }
.hero-studio .hero-orbit { right: 20%; bottom: 2%; }

.work,.process { background: var(--silver); max-width: none; }.work.shell,.process.shell { padding-left:max(var(--pad),calc((100vw - 1440px)/2 + var(--pad))); padding-right:max(var(--pad),calc((100vw - 1440px)/2 + var(--pad))); }
.service-card,.project .visual { border-radius: 16px; }.service-grid { gap:18px; }.service-card { box-shadow:0 16px 50px #00000012; }.project:hover .visual { transform:translateY(-8px) scale(.99); box-shadow:0 25px 60px #1a2c3f25; }
.steps li { transition:padding-left .35s ease,background .35s ease; }.steps li:hover { padding-left:18px; background:#ffffff50; }
.cta-section { background:linear-gradient(120deg,#91acd0,#3975e6); }.cta-orb { opacity:.18; animation:orb-drift 9s ease-in-out infinite alternate; }

@keyframes glow-breathe { 50% { transform:scale(1.12); opacity:.7; } }
@keyframes wave { 50% { transform:scaleY(.72); filter:brightness(1.12); } }
@keyframes badge-float { 50% { transform:translateY(-13px) rotate(4deg); } }
@keyframes orb-drift { to { transform:translate(55px,35px) scale(1.12); } }

@media(max-width:1050px){.hero{grid-template-columns:1fr;padding-top:150px}.hero-copy{max-width:850px}.hero-studio{height:610px;margin-top:20px}.studio-browser{width:85%;right:0}.studio-phone{left:8%}}
@media(max-width:800px){.hero{display:grid;min-height:auto}.hero h1{font-size:clamp(54px,15vw,88px)}.hero-studio{height:520px}.studio-browser{height:350px;width:105%;right:-35%;transform:none}.studio-canvas{height:218px;padding:30px}.studio-canvas strong{font-size:29px}.studio-stats{height:87px}.studio-stats span{padding:17px 12px}.studio-phone{transform:scale(.82) rotate(-3deg);transform-origin:left bottom;left:0}.studio-badge{width:92px;height:92px;right:2%}.hero-trust{flex-wrap:wrap}.work.shell,.process.shell{padding-left:var(--pad);padding-right:var(--pad)}}
@media(max-width:520px){.hero-studio{height:470px}.studio-browser{right:-65%;width:145%}.studio-phone{left:-8px}.studio-badge{right:-15px;bottom:15px}.hero-bottom{align-items:flex-start}.hero .round-link{width:88px;height:88px;min-width:88px}.studio-stats span:nth-child(3){display:none}.studio-stats{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.studio-glow,.phone-wave i,.studio-badge,.cta-orb{animation:none!important}.motion-layer{transform:none!important}}

/* Compact editorial scale */
.nav { height: 82px; }
.section { padding-top: clamp(76px,8vw,112px); padding-bottom: clamp(76px,8vw,112px); }
.section-head { margin-bottom: 52px; }
.section-head h2,.process h2 { font-size: clamp(44px,5.8vw,82px); margin-top: 22px; }
.section-head>p { font-size: 16px; max-width: 370px; }

.hero { min-height: 760px; height: auto; max-height: none; padding-top: 108px; padding-bottom: 45px; gap: 4vw; }
.hero h1 { font-size: clamp(48px,5.3vw,82px); margin-top: 30px; }
.hero-bottom { margin-top: 28px; gap: 24px; }
.hero-bottom p { font-size: 16px; line-height: 1.5; max-width: 510px; }
.hero .round-link { width: 88px; height: 88px; min-width: 88px; font-size: 11px; }
.hero-trust { margin-top: 28px; }
.hero-studio { height: 540px; }
.studio-glow { width: 600px; height: 600px; }
.studio-browser { height: 365px; top: 58px; }
.studio-bar { height: 38px; }
.studio-canvas { height: 235px; padding: 34px; }
.studio-canvas strong { font-size: 32px; margin-top: 15px; }
.studio-lines { margin-top: 22px; }
.studio-stats { height: 92px; }
.studio-stats span { padding: 18px; }
.studio-phone { width: 190px; height: 390px; padding: 47px 17px 16px; border-radius: 31px; }
.studio-phone strong { font-size: 18px; }
.phone-wave { height: 140px; padding-top: 23px; }
.studio-badge { width: 96px; height: 96px; }

.service-card { min-height: 400px; padding: 27px; }
.service-card h3 { font-size: clamp(34px,4vw,54px); margin-bottom: 15px; }
.service-card p { font-size: 15px; }
.visual { height: clamp(390px,45vw,590px); }
.project-title h3 { font-size: clamp(34px,4vw,56px); }
.project-b { margin-top: 0; }
.process { gap: 6vw; }
.process-intro p { margin-top: 28px; }
.steps li { padding-top: 26px; padding-bottom: 42px; }
.steps h3 { font-size: clamp(32px,3.3vw,48px); }
.steps p { margin-bottom: 0; }
.cta-section { min-height: 540px; }
.cta-content h2 { font-size: clamp(52px,8vw,105px); margin: 30px 0; }
.cta-orb.one { width: 380px; height: 380px; }
.cta-orb.two { width: 280px; height: 280px; }
footer { padding-top: 58px; }
.footer-top { padding-bottom: 65px; }

@media(max-width:1050px){.hero{padding-top:120px}.hero-studio{height:520px;margin-top:0}.studio-browser{height:350px}.studio-phone{left:6%}}
@media(max-width:800px){.section{padding-top:68px;padding-bottom:68px}.section-head{margin-bottom:40px}.section-head h2,.process h2{font-size:clamp(40px,11vw,64px)}.hero{padding-top:112px;padding-bottom:35px}.hero h1{font-size:clamp(46px,13vw,72px)}.hero-bottom{margin-top:32px}.hero-studio{height:450px}.studio-browser{height:310px}.studio-canvas{height:190px;padding:25px}.studio-canvas strong{font-size:26px}.studio-stats{height:82px}.studio-phone{transform:scale(.76) rotate(-3deg)}.service-card{min-height:360px}.visual{height:min(112vw,560px)}.process-intro{margin-bottom:52px}.cta-section{min-height:460px}.footer-top{padding-bottom:48px}}
@media(max-width:520px){.nav{height:70px}.hero{padding-top:98px}.hero h1{font-size:clamp(43px,12.5vw,60px)}.hero-bottom{gap:16px}.hero-bottom p{font-size:15px}.hero .round-link{width:78px;height:78px;min-width:78px}.hero-trust{gap:14px;margin-top:22px}.hero-studio{height:405px}.studio-phone{transform:scale(.68) rotate(-3deg)}.studio-browser{height:285px}.studio-badge{width:76px;height:76px}.service-card{min-height:330px}.service-card h3{font-size:36px}.cta-content h2{font-size:48px}}