<!doctype html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=1920,height=1080"><title>ЭКВИЛИБРИУМ — заставка</title><script src="assets/gsap.min.js"></script><style>
 @font-face{font-family:Montserrat;src:url('assets/Montserrat-Regular.ttf');font-weight:400}@font-face{font-family:Montserrat;src:url('assets/Montserrat-SemiBold.ttf');font-weight:600}
 *{box-sizing:border-box}body{margin:0;font-family:Montserrat,sans-serif;color:#073e42;background:#fbfcf9}#root{width:100%;height:100%;position:relative;overflow:hidden}
 .clip{position:absolute;inset:0}.back{position:absolute;inset:0;background:radial-gradient(ellipse at 82% 34%,#daf4e9,transparent 60%),#fbfcf9}
 .top{position:absolute;left:120px;top:85px;font-size:25px;letter-spacing:3px;color:#06746a}.name{position:absolute;left:120px;top:173px;font-size:54px;font-weight:600;letter-spacing:-2px}
 .rule{position:absolute;left:120px;top:275px;width:420px;height:3px;background:#06746a;transform-origin:left center}
 .headline{position:absolute;left:120px;top:351px;width:1250px;font-size:102px;line-height:1.14;font-weight:600;letter-spacing:-5px}.headline p{margin:0}.line2{color:#06746a}
 .domain{position:absolute;left:123px;top:685px;font-size:33px;letter-spacing:.3px}.caption{position:absolute;left:124px;top:775px;max-width:1040px;font-size:25px;line-height:1.5;color:#4f5e64}
 .art{position:absolute;width:590px;height:570px;right:52px;top:310px}.art text{font:23px Montserrat;fill:#073e42}.art .edge{fill:none;stroke:#06746a;stroke-width:2}.art .glyph{fill:none;stroke:#06746a;stroke-width:2.7}
 footer{position:absolute;left:120px;right:120px;bottom:65px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #b9c8c6;padding-top:28px;font-size:22px;color:#42595a}
 .signature{font-weight:600}.domain,.top,.name,.headline,.caption{z-index:2}
 </style></head><body><div id="root" data-composition-id="main" data-width="1920" data-height="1080" data-duration="8" data-fps="30"><section id="brand-card" class="clip" data-start="0" data-duration="8" data-track-index="0"><div class="back"></div><div class="top">01 / НАБЛЮДЕНИЕ И РАВНОВЕСИЕ</div><div class="name">ЭКВИЛИБРИУМ</div><div class="rule"></div><div class="headline"><p class="line1">Видеть целое.</p><p class="line2">Действовать точно.</p></div><div class="domain">equilibrium-system.com</div><div class="caption">Самостоятельная система. Общая культура созидания.</div><svg class="art" viewBox="0 0 590 570" aria-label="Геометрический образ связей"><defs><radialGradient id="glass"><stop stop-color="white"/><stop offset="1" stop-color="#daf4e9"/></radialGradient></defs><circle class="disc" cx="295" cy="285" r="133" fill="url(#glass)"/><path class="edge e0" d="M295 152V123"/><path class="edge e1" d="M197 375L106 421"/><path class="edge e2" d="M393 375L484 421"/><g class="glyph"><ellipse cx="295" cy="285" rx="116" ry="52"/><ellipse cx="295" cy="285" rx="52" ry="116"/><circle cx="295" cy="285" r="85"/></g><g class="node n0"><circle cx="295" cy="108" r="14" fill="#06746a"/><text x="295" y="170" text-anchor="middle">Данные</text></g><g class="node n1"><circle cx="95" cy="428" r="14" fill="#06746a"/><text x="95" y="490" text-anchor="middle">Связи</text></g><g class="node n2"><circle cx="495" cy="428" r="14" fill="#06746a"/><text x="495" y="490" text-anchor="middle">Решения</text></g></svg><footer><span class="signature">СФЕРА — Мир без границ</span><span>Вход в экосистему: speczashchita.com</span></footer></section></div><script>
 const tl=gsap.timeline({paused:true});
 tl.fromTo('.top',{opacity:0,y:12},{opacity:1,y:0,duration:.45,ease:'power2.out'},.05);
 tl.fromTo('.name',{opacity:0,scale:.96},{opacity:1,scale:1,duration:.85,ease:'power3.out'},.25);
 tl.fromTo('.rule',{scaleX:0},{scaleX:1,duration:.65,ease:'power2.inOut'},.9);
 tl.fromTo('.line1',{opacity:0,y:42},{opacity:1,y:0,duration:.85,ease:'power3.out'},1.3);
 tl.fromTo('.line2',{opacity:0,y:42},{opacity:1,y:0,duration:.85,ease:'power3.out'},1.9);
 tl.fromTo('.disc',{opacity:0,scale:.9,svgOrigin:'295 285'},{opacity:1,scale:1,duration:.9,ease:'power2.out'},1.2);
 tl.fromTo('.glyph',{opacity:0},{opacity:1,duration:.75},1.65);
 document.querySelectorAll('.edge').forEach((el,i)=>{const len=el.getTotalLength();tl.fromTo(el,{strokeDasharray:len,strokeDashoffset:len},{strokeDashoffset:0,duration:.6,ease:'power2.out'},2.4+i*.25)});
 tl.fromTo('.node',{opacity:0},{opacity:1,duration:.55,stagger:.25},2.9);
 tl.fromTo('.domain',{opacity:0,y:18},{opacity:1,y:0,duration:.7,ease:'power2.out'},3.65);
 tl.fromTo('.caption',{opacity:0},{opacity:1,duration:.6},4.25);
 tl.fromTo('footer',{opacity:0},{opacity:1,duration:.65},4.9);
 window.__timelines['main']=tl;
 </script></body></html>