:root{--bg:#f5f5f7;--panel:#fff;--text:#222228;--muted:#666670;--button:#e3e3e8;--line:rgba(37,39,43,.14);--placeholder:#37383c;--red:#e01b24;--scale:1;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background-color:var(--bg);background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:calc(64px * var(--scale)) calc(64px * var(--scale));color:var(--text);font-family:'Segoe UI',Arial,sans-serif;transition:background-color .35s,color .35s}body.dark{--bg:#18181d;--panel:#25252b;--text:#f1f1f3;--muted:#aaaab4;--button:#303037;--line:rgba(210,210,220,.10);--placeholder:#34343c;color-scheme:dark}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:5px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar{position:fixed;z-index:20;top:calc(18px * var(--scale));left:50%;transform:translateX(-50%);width:calc(960px * var(--scale));height:calc(80px * var(--scale));border-radius:calc(28px * var(--scale));background:var(--panel);display:flex;align-items:center;padding:0 calc(22px * var(--scale));gap:calc(26px * var(--scale));transition:background .35s}.brand{margin-left:calc(22px * var(--scale));margin-right:auto;display:flex}.brand img{width:calc(128px * var(--scale));height:auto}.dark .brand img{filter:invert(1)}.topbar nav{display:flex;align-items:center;gap:calc(32px * var(--scale));font-size:calc(20px * var(--scale));white-space:nowrap;color:var(--muted)}.topbar nav button{padding:0}.topbar nav .current,.topbar nav button:hover{color:var(--text)}.theme{border-radius:50%;background:var(--button);width:calc(48px * var(--scale));height:calc(48px * var(--scale));display:grid;place-items:center;flex-shrink:0}.theme svg{width:50%;height:50%;transition:transform .35s,fill .35s}.theme:hover svg{transform:rotate(-35deg) scale(1.15);fill:var(--red)}.dark .theme svg{transform:rotate(180deg)}
.orbit{position:fixed;left:0;top:50%;width:calc(510px * var(--scale));height:calc(1080px * var(--scale));transform:translateY(-50%);z-index:10;transition:opacity .3s,transform .4s}.arc{position:absolute;width:100%;height:100%;stroke:none}.arc path{stroke:var(--text);stroke-opacity:.22;stroke-width:1.5;fill:none}.category{position:absolute;width:calc(148px * var(--scale));height:calc(108px * var(--scale));padding:0;transition:left .65s cubic-bezier(.4,0,.2,1),top .65s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center}.category .icon{width:calc(56px * var(--scale));height:calc(56px * var(--scale));background:var(--button);border-radius:50%;display:grid;place-items:center;transition:transform .2s,background .2s,color .2s}.category svg{width:calc(24px * var(--scale));height:calc(24px * var(--scale))}.category .label{font-size:calc(13px * var(--scale));line-height:1.3;color:var(--muted);margin-top:calc(9px * var(--scale));max-width:calc(130px * var(--scale));transition:opacity .18s}.category:hover .icon{transform:scale(1.12);background:var(--red);color:white}.category.active{z-index:2}.category.active .icon{background:var(--red);color:#fff}.category.active .label{display:none}.selected-label{position:absolute;left:calc(212px * var(--scale));top:calc(512px * var(--scale));height:calc(56px * var(--scale));width:calc(270px * var(--scale));background:var(--red);border-radius:calc(28px * var(--scale));color:#fff;display:flex;align-items:center;padding-left:calc(54px * var(--scale));font-size:calc(17px * var(--scale));pointer-events:none;animation:label-in .25s both}.category.active .icon{position:relative;z-index:3}
.mode{position:fixed;z-index:20;right:calc(28px * var(--scale));top:50%;transform:translateY(-50%);background:var(--panel);border-radius:calc(36px * var(--scale));width:calc(104px * var(--scale));padding:calc(20px * var(--scale)) calc(8px * var(--scale));display:flex;flex-direction:column;gap:calc(26px * var(--scale));transition:background .35s}.mode button{display:flex;flex-direction:column;align-items:center;gap:calc(10px * var(--scale));font-size:calc(12px * var(--scale));color:var(--muted);padding:0}.mode span{display:grid;place-items:center;width:calc(56px * var(--scale));height:calc(56px * var(--scale));background:var(--button);border-radius:50%;transition:background .25s,transform .25s}.mode button.active span{background:var(--red);color:white}.mode button:hover span{transform:scale(1.08)}.mode svg{width:calc(24px * var(--scale));height:calc(24px * var(--scale))}
main{margin-left:28.716%;margin-right:10.05%;padding-top:calc(132px * var(--scale));padding-bottom:calc(140px * var(--scale));min-height:100vh;outline:none}.video-section{margin-bottom:calc(50px * var(--scale))}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(16px * var(--scale));gap:16px}h2{font-size:calc(26px * var(--scale));font-weight:400;margin:0}.more{font-size:calc(16px * var(--scale));color:var(--muted);padding:0}.more:hover{color:var(--red)}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24px * var(--scale))}.video-card{position:relative;aspect-ratio:16/9;border-radius:calc(16px * var(--scale));background:var(--placeholder);width:100%;overflow:hidden;padding:0;display:block}.video-card img{width:100%;height:100%;object-fit:cover}.play{position:absolute;inset:0;display:grid;place-items:center;color:white;opacity:0;transition:opacity .2s;background:rgba(0,0,0,.12)}.play svg{width:42px;height:42px}.video-card:hover .play,.video-card:focus-visible .play{opacity:1}.category-feed{padding-top:calc(30px * var(--scale));padding-left:calc(22px * var(--scale));padding-right:calc(26px * var(--scale))}.category-feed .video-card{margin-bottom:calc(40px * var(--scale))}.promotion main{margin-left:6.25%;margin-right:11.45%;padding-top:calc(150px * var(--scale))}.promotion .orbit{opacity:0;pointer-events:none;transform:translate(-50px,-50%)}.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(38px * var(--scale)) calc(40px * var(--scale))}.case h2{font-size:calc(25px * var(--scale));margin:calc(18px * var(--scale)) 0 calc(8px * var(--scale))}.case p{font-size:calc(19px * var(--scale));color:var(--muted);margin:0 0 calc(12px * var(--scale))}.case .more{font-size:calc(19px * var(--scale));color:var(--text)}.content-enter{animation:content-in .35s both}dialog{border:none;border-radius:24px;background:var(--panel);color:var(--text);width:min(950px,90vw);padding:48px 32px 32px}dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(6px)}dialog .close{position:absolute;right:12px;top:8px;font-size:30px}dialog h2{font-size:28px;margin-bottom:16px}dialog p{line-height:1.6;color:var(--muted)}dialog video,dialog iframe{width:100%;aspect-ratio:16/9;border:0;background:#17171b}dialog img{width:100%;border-radius:14px}.empty{aspect-ratio:16/9;background:var(--placeholder);display:grid;place-items:center;text-align:center;color:#ddd;padding:24px;border-radius:16px}
@keyframes content-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes label-in{from{opacity:0;transform:scaleX(.8);transform-origin:left}to{opacity:1;transform:scaleX(1)}}
@media(min-width:1921px){main{max-width:1176px;margin-left:calc(50% - 408px)}.promotion main{max-width:1580px;margin-left:auto;margin-right:auto;padding-right:80px}}
@media(max-width:800px){:root{--scale:1!important}.topbar{top:12px;width:calc(100% - 24px);height:64px;padding:0 14px;border-radius:22px;gap:12px}.brand{margin-left:0}.brand img{width:96px}.topbar nav{gap:12px;font-size:13px}.topbar nav button[data-info=about],.topbar nav button[data-info=contacts]:last-child{display:none}.theme{width:36px;height:36px}.orbit{top:88px;width:100%;height:86px;transform:none;background:var(--bg);overflow-x:auto;overflow-y:hidden;padding:8px 12px}.arc{display:none}#categories{display:flex;gap:8px;min-width:max-content}.category{position:relative!important;left:auto!important;top:auto!important;width:90px;height:70px;flex-shrink:0}.category .icon{width:36px;height:36px}.category svg{width:20px;height:20px}.category .label,.category.active .label{display:block;font-size:10px;margin-top:5px;max-width:90px}.selected-label{display:none}.mode{top:auto;bottom:16px;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;width:250px;gap:8px;padding:8px;border-radius:24px}.mode button{flex:1;flex-direction:row;font-size:12px;gap:6px}.mode span{width:36px;height:36px}.mode svg{width:20px;height:20px}main{margin:0;padding:196px 20px 110px}.video-section{margin-bottom:32px}h2{font-size:20px}.more{font-size:12px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.video-grid .video-card:last-child{display:none}.section-head{gap:8px;margin-bottom:12px}.category-feed{padding:0}.category-feed .video-card{margin-bottom:20px}.promotion main{margin:0;padding:100px 20px 110px}.promotion .orbit{display:none}.cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.case h2{font-size:20px}.case p,.case .more{font-size:14px}.video-card{border-radius:12px}}
@media(max-width:420px){.topbar nav{gap:10px}.topbar nav button[data-info=contacts]{display:none}.cases{grid-template-columns:1fr}.section-head h2{font-size:18px}.more{font-size:11px}}
.dark .brand img{content:url('assets/dark-node-qko584fvug.png');filter:none}.video-grid .video-card:last-child{display:block}
@media(max-width:420px){.video-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* Preserve source proportions; all portrait lists share the same paired layout. */
.video-card{aspect-ratio:var(--ratio,16/9)}
.video-card img{object-fit:contain}
.video-grid{align-items:start}
.play{opacity:.8;background:transparent}
.play svg{filter:drop-shadow(0 2px 8px #000)}
.paired-feed{display:flex;flex-direction:column;gap:calc(40px * var(--scale))}
.paired-feed .video-card{margin:0}
.portrait-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(40px * var(--scale));width:100%;max-width:calc(930px * var(--scale));margin-inline:auto;align-items:start}
.portrait-pair .portrait{width:100%;max-width:none;margin:0;min-width:0}
.overview-portraits{display:flex;flex-direction:column;gap:calc(24px * var(--scale))}
.video-grid+.overview-portraits{margin-top:calc(24px * var(--scale))}
.reels-feed{max-width:calc(930px * var(--scale));margin-inline:auto}
dialog video{display:block;aspect-ratio:var(--ratio,16/9);max-height:72vh;object-fit:contain}
dialog.portrait-player{width:min(460px,94vw);padding:42px 20px 20px}
dialog.portrait-player h2{font-size:20px}
dialog.portrait-player video{width:auto;max-width:100%;height:min(70vh,720px);margin-inline:auto;aspect-ratio:var(--ratio,9/16)}
.no-videos{color:var(--muted);padding:40px 0}
@media(max-width:800px){.mode{width:290px}.paired-feed{gap:20px}.portrait-pair{gap:16px;max-width:none}.overview-portraits{gap:16px}.video-grid+.overview-portraits{margin-top:16px}.reels-feed{max-width:none}dialog video{max-height:65vh}dialog.portrait-player video{height:min(62vh,720px)}}

/* Unfinished sections use a word-by-word entrance and keep the final text visible. */
.development-state{display:grid;place-items:center;width:100%;padding:32px 20px;text-align:center}
.development-title{display:flex;flex-wrap:wrap;justify-content:center;gap:.28em;margin:0;font-size:clamp(28px,3.3vw,54px);font-weight:400;line-height:1.2;color:var(--text)}
.development-word{display:inline-block;overflow:hidden;padding-block:.1em}
.development-word>span{display:block;animation:development-word-in .65s cubic-bezier(.2,.75,.3,1) both}
.development-word:nth-child(2)>span{animation-delay:.17s}
.development-word:nth-child(3)>span{animation-delay:.34s}
.development-word:nth-child(4)>span{animation-delay:.51s}
.development-page main{margin:0;max-width:none;min-height:100vh;min-height:100dvh;padding:120px 150px;display:grid;place-items:center}
.development-page .content-enter{width:100%;animation:none}
dialog .development-state{min-height:180px;padding:28px 12px}
dialog .development-title{font-size:clamp(24px,3vw,36px)}
@keyframes development-word-in{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){.development-page main{margin:0;padding:100px 20px 110px}.development-title{font-size:clamp(26px,7vw,40px)}dialog .development-state{min-height:150px}}

/* Only the all-videos overview uses compact rows of equal-height preview slots. */
.overview-row{--overview-gap:calc(24px * var(--scale));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--overview-gap);align-items:start}
.overview-row>.video-card{aspect-ratio:16/9;min-width:0}
@media(max-width:800px){.overview-row{--overview-gap:12px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70%;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-bottom:4px}.overview-row>*{scroll-snap-align:start}}

/* Overview-only exception: three fixed portrait slots fit one landscape slot. */
.overview-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:calc(8px * var(--scale));aspect-ratio:16/9;width:100%;min-width:0;min-height:0}
.overview-trio>.portrait{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto;margin:0}
.overview-reels{--reel-gap:calc(16px * var(--scale));display:flex;gap:var(--reel-gap);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;align-items:start;padding-bottom:4px}
.overview-reels>.portrait{flex:0 0 calc((100% - 4 * var(--reel-gap))/5);min-width:0;scroll-snap-align:start}
@media(max-width:800px){.overview-trio{gap:8px}.overview-reels{--reel-gap:12px}.overview-reels>.portrait{flex-basis:36%}.orbit,.overview-row,.overview-reels{scrollbar-width:none;-ms-overflow-style:none}.orbit::-webkit-scrollbar,.overview-row::-webkit-scrollbar,.overview-reels::-webkit-scrollbar{display:none;width:0;height:0}}