/* Zio · atmosphere. Load after the existing portfolio stylesheet. */
:root{--zg-bg:#111622;--zg-cyan:#8ae6f3;--zg-violet:#b298f3;--zg-light:.8}
body{background:var(--zg-bg);isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(ellipse at 76% 18%,#647fac24,transparent 41%),radial-gradient(ellipse at 99% 66%,#69509226,transparent 46%),radial-gradient(ellipse at 5% 82%,#39717f20,transparent 42%),linear-gradient(115deg,#141c27,#141824 48%,#191825)}
.background-grid{display:none}
.zg-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-2;contain:strict}
.zg-atmosphere::before{content:"";position:absolute;width:80vw;height:90vh;right:-18vw;top:-44vh;border-radius:50%;background:radial-gradient(ellipse,#78cfe326,transparent 66%);filter:blur(55px);opacity:var(--zg-light);animation:zg-atmosphere-breathe 20s ease-in-out infinite alternate}
.zg-atmosphere::after{content:"";position:absolute;inset:0;opacity:.038;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.zg-light-ribbon{position:absolute;width:110vw;height:57vw;min-height:500px;border-radius:50%;transform:rotate(-29deg);border:1px solid #a5d9f01b;box-shadow:inset 0 11px 22px -18px #b7efffc4,0 -9px 24px -19px #90d5ffa3;right:-32vw;top:-22vw;opacity:var(--zg-light)}
.zg-light-ribbon::after{content:"";position:absolute;inset:18px;border-radius:inherit;border-top:1px solid #a1c5fa0e;box-shadow:0 -24px 65px -45px #a4dbff70}
.zg-light-ribbon.second{width:100vw;height:65vw;right:auto;left:-58vw;top:40vh;transform:rotate(-42deg);border-color:#aaa0f015;box-shadow:inset 0 -10px 21px -18px #bbaaff88,0 10px 30px -24px #9388fc66}
.header{border-bottom:1px solid #bfd0ed0c}
.monogram{color:#a3e8f5;text-shadow:2px 2px 0 #6984b9,0 0 20px #8bddf833}
.zg-logo{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 7px #80ceff26)}
.brand:has(.zg-logo){gap:10px}
.zg-zmark:has(img){padding:5px}
.zg-zmark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px #12203855)}
h1 span{color:#a6e8f1;background:linear-gradient(100deg,#b9f3f8 10%,#8ad3ee 52%,#b2a4ee);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.hero{grid-template-columns:45% 55%;height:auto;min-height:595px;align-items:center}
.hero-copy{padding:38px 0 55px 17px}
.hero-copy>p{color:#b5bdce;line-height:1.75}
.zg-hero-art{height:560px;position:relative;min-width:0;isolation:isolate;perspective:1100px}
.zg-scene{position:absolute;inset:0;transform-style:preserve-3d;animation:zg-scene-drift 18s ease-in-out infinite}
.zg-lens{position:absolute;width:410px;height:410px;left:76px;top:35px;border-radius:50%;border:1px solid #c1e9ff2b;background:radial-gradient(ellipse at 26% 14%,#d6f5ff1f 0%,transparent 43%),radial-gradient(ellipse at 70% 85%,#b88cf612,transparent 52%),linear-gradient(140deg,#a4bada08,#43527c08);box-shadow:inset 3px 3px 13px #c4eeff14,inset -3px -4px 15px #aa8fdb16,0 0 85px #91b5f10b;transform:rotate(-20deg);overflow:hidden}
.zg-lens::before{content:"";position:absolute;inset:5px;border-radius:50%;border-top:2px solid #d7f5ff4d;border-left:1px solid #dcfaff17;mask-image:linear-gradient(130deg,black,transparent 44%)}
.zg-lens::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 8%,#dcf7ff0a 25%,transparent 25.5%,transparent 70%,#b8a1ff0a 92%)}
.zg-orbit{position:absolute;left:6px;top:154px;width:570px;height:193px;border:1px solid #a2d7f123;border-radius:50%;transform:rotate(-24deg);box-shadow:0 -7px 24px -20px #baf7ff;z-index:0}
.zg-orbit::before{content:"";position:absolute;width:6px;height:6px;left:66px;bottom:8px;border-radius:50%;background:#b5eaf9;box-shadow:0 0 12px #7de8ff}
.zg-orbit::after{content:"";position:absolute;width:4px;height:4px;right:59px;top:14px;border-radius:50%;background:#bfaaff;box-shadow:0 0 10px #bca1ff}
.zg-orbit.back{left:118px;top:15px;width:310px;height:440px;transform:rotate(42deg);border-color:#a9afe111;box-shadow:none}
.zg-orbit.back::before,.zg-orbit.back::after{display:none}
.zg-object{position:absolute;left:65px;top:70px;width:340px;height:238px;transform-style:preserve-3d;animation:zg-float 9s ease-in-out infinite}
.zg-browser{position:absolute;inset:0;border:1px solid #caefff7d;border-radius:16px;background:linear-gradient(122deg,#a9d8ee29,#203249b8 39%,#292c47d9);box-shadow:inset 1px 1px 2px #edffff85,inset -1px -1px 3px #c3acff45,3px 4px 0 #697a9d4d,6px 8px 0 #263047,7px 9px 0 #a0add642,0 30px 60px #04081785;transform:rotateY(-17deg) rotateX(8deg) rotateZ(-8deg);overflow:hidden;backdrop-filter:blur(12px)}
.zg-browser::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(126deg,#f0ffff12 0 38%,transparent 38.3% 75%,#c6afff0a 100%)}
.zg-browser::before{content:"";position:absolute;bottom:0;height:2px;width:64%;left:18%;background:linear-gradient(90deg,transparent,#a3e6ff,#b49bff,transparent);box-shadow:0 0 14px #7faeff}
.zg-browser.back{inset:-28px 22px 21px -8px;transform:rotateY(-17deg) rotateX(8deg) rotateZ(2deg) translateZ(-30px);opacity:.35;background:linear-gradient(120deg,#9ecbdf25,#7e69ab19);border-color:#c3d3fd4d;box-shadow:inset 1px 1px 2px #e0faff33,4px 6px 0 #66719a21}
.zg-browser.third{inset:-45px 38px 42px 6px;transform:rotateY(-17deg) rotateX(8deg) rotateZ(10deg) translateZ(-55px);opacity:.2}
.zg-windowbar{height:32px;border-bottom:1px solid #c9dcf623;display:flex;align-items:center;gap:5px;padding:0 14px;background:#c5e7ff07}
.zg-windowbar i{display:block;width:5px;height:5px;border-radius:50%;background:#c7e9fb5c}
.zg-windowbar span{font:9px/1.4 Consolas,monospace;letter-spacing:1px;color:#adbed1;margin-left:auto}
.zg-windowbody{padding:19px 23px}.zg-windowbrand{font-size:12px;letter-spacing:1px;color:#dceff9;font-weight:700}.zg-windowbrand b{font-size:17px;font-style:italic;margin-right:5px;color:#aff0ff}
.zg-wireframe{display:flex;align-items:center;gap:18px;margin-top:18px}.zg-wire-copy{flex:1}.zg-wire-copy i{height:5px;display:block;border-radius:5px;background:#b5d9eb24;width:87%;margin-bottom:7px}.zg-wire-copy i:first-child{height:10px;width:88%;background:linear-gradient(90deg,#cef5ff9c,#a9bcf456)}.zg-wire-copy i:nth-child(2){height:10px;width:65%;background:#adc7e450;margin-bottom:14px}.zg-wire-copy i:nth-child(4){width:70%}.zg-wire-copy em{display:block;width:55px;height:17px;border-radius:5px;background:linear-gradient(120deg,#9ae4ed85,#9584cd8f);border:1px solid #c0eaff5c;margin-top:14px;box-shadow:0 0 10px #90d3ed1f}
.zg-zmark{width:106px;height:101px;display:flex;align-items:center;justify-content:center;border:1px solid #b3d8fb3d;border-radius:15px;background:linear-gradient(135deg,#b0ebff1f,#566c9940,#ad94f329);box-shadow:inset 1px 1px 2px #e0f8ff47,6px 6px 0 #778bb620;transform:rotate(-5deg);font-size:76px;line-height:1;font-weight:800;font-style:italic;letter-spacing:-8px;padding-right:9px;color:#c3e8f7;text-shadow:1px 1px 0 #679ebc,2px 2px 0 #647ea1,3px 3px 0 #776d9f,4px 4px 0 #77699c,0 0 25px #a1d7ee47}
.zg-widget{position:absolute;border:1px solid #c5e0f260;border-radius:12px;background:linear-gradient(127deg,#c6e8fb25,#243149e8 43%,#38314ee8);box-shadow:inset 1px 1px 2px #ebffff66,4px 5px 0 #68799935,7px 8px 0 #917bc01c,0 20px 35px #060b194d;backdrop-filter:blur(18px);z-index:3}
.zg-admin{right:10px;top:195px;width:150px;padding:15px 15px 17px;transform:rotate(7deg);animation:zg-widget-float 10s ease-in-out infinite -3s}
.zg-widget-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#c1cfe1;gap:9px;margin-bottom:12px}.zg-widget-title svg{width:17px;height:17px;color:#c4c0f2}.zg-widget-title>i{width:4px;height:4px;border-radius:50%;background:#9af1e0;box-shadow:0 0 6px #9af1e088}
.zg-admin-row{display:flex;align-items:center;gap:7px;margin-top:9px}.zg-admin-row i{width:19px;height:19px;border-radius:5px;background:linear-gradient(130deg,#a6daed40,#a995e14d);border:1px solid #bee5f525}.zg-admin-row span{height:4px;border-radius:2px;background:#b7d5ef33;width:57px}.zg-admin-row b{font-size:10px;font-weight:400;color:#a2e5e6;margin-left:auto}
.zg-code{left:78px;top:368px;width:232px;padding:13px 16px;transform:rotate(-5deg);animation:zg-code-float 11s ease-in-out infinite -4s}.zg-code .zg-widget-title{margin-bottom:8px}.zg-code code{display:block;font:10px/1.8 Consolas,monospace;color:#a6b3ca}.zg-code code b{color:#a5e4ed;font-weight:400}.zg-code code em{color:#bea9e9;font-style:normal}
.zg-caption{position:absolute;right:64px;top:93px;font:10px/1.4 Consolas,monospace;letter-spacing:2px;color:#8599b6;transform:rotate(0deg)}
.zg-metrics{position:absolute;bottom:13px;left:42px;right:5px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #bccded1c;padding-top:18px;gap:17px}.zg-metric{display:flex;gap:10px;align-items:center}.zg-metric strong{font-size:29px;line-height:1.2;font-weight:500;color:#dce5f3;letter-spacing:-1px}.zg-metric span{font-size:10px;line-height:1.6;color:#9fabbd}
.zg-hero-art::after{content:"";position:absolute;bottom:95px;width:280px;height:25px;left:115px;border-radius:50%;background:#05091380;filter:blur(17px);z-index:-1}
.panel{background:linear-gradient(125deg,#7e9bbf19,#192638bf 42%,#36304e75);backdrop-filter:blur(18px)}
.skill-track i{background:linear-gradient(90deg,#80cbd8,#a3dded 70%,#aaa4ed);box-shadow:0 0 10px #81cdeb30}
.desktop-nav a:hover,.desktop-nav a.active{color:#a2e0ed}.zg-demo-note{width:min(1180px,calc(100% - 48px));margin:15px auto 0;font-size:11px;color:#8795af;padding:12px 0;border-top:1px solid #aabde118}.zg-demo-note a{color:#bdcfea}
@keyframes zg-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes zg-widget-float{0%,100%{translate:0 0}50%{translate:0 7px}}
@keyframes zg-code-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:3px 4px;rotate:1deg}}
@keyframes zg-scene-drift{0%,100%{transform:translateY(0) rotateX(1deg) rotateY(-2deg)}50%{transform:translateY(-6px) rotateX(-1deg) rotateY(2deg)}}
@keyframes zg-atmosphere-breathe{from{transform:translate(0,0);opacity:.65}to{transform:translate(-35px,30px);opacity:1}}
@media(min-width:1400px){.zg-hero-art{transform:translateX(9px)}}
@media(max-width:1100px) and (min-width:801px){.zg-hero-art{scale:.83;transform-origin:center center;width:600px;margin-left:-55px}.hero-copy{padding-left:0}.hero{grid-template-columns:46% 54%;overflow:clip}.hero h1{font-size:clamp(39px,4.7vw,53px)}.hero-actions{gap:12px}.hero-actions .button{padding:12px 17px;gap:12px}}
@media(max-width:800px){.hero{display:flex;flex-direction:column;height:auto;min-height:0;overflow:clip}.hero-copy{width:100%;padding:35px 0 15px}.zg-hero-art{width:570px;max-width:none;height:550px;flex-shrink:0;scale:.88;transform-origin:top center;margin-bottom:-50px}.hero-copy>p{max-width:470px}.zg-light-ribbon{top:6vh;width:170vw;height:90vw;right:-70vw;opacity:.55}.zg-light-ribbon.second{top:70vh;left:-110vw;width:170vw;height:100vw}.about-grid{position:relative}}
@media(max-width:520px){.zg-hero-art{height:590px;scale:.58;margin-bottom:-243px}.hero h1{font-size:clamp(38px,10vw,53px)}.hero-copy{padding-top:27px}.zg-metrics{left:25px;right:0;gap:13px}.zg-metric strong{font-size:39px}.zg-metric span{font-size:18px;line-height:1.45}.zg-caption{display:none}}
@media(max-width:370px){.zg-hero-art{scale:.48;margin-bottom:-300px}.zg-metric span{font-size:20px}.hero-actions .button{padding:10px 15px;gap:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.zg-scene,.zg-object,.zg-widget,.zg-atmosphere::before{animation:none}.zg-scene{transform:none}}

/* Правка к набору: на 801–900px композиция вылезала за правый край (обрезались «Админка» и «8 сайтов») */
@media(max-width:900px) and (min-width:801px){.zg-hero-art{scale:.68;margin-left:-95px}}