*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;overflow:hidden}

.landing-body{font-family:'Montserrat',sans-serif;background:#000}

.landing-wrap{display:flex;height:100vh;width:100%}

.panel{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:flex .5s cubic-bezier(.77,0,.18,1);text-decoration:none}

.panel.expanded{flex:1.6}

.panel.compressed{flex:0.7}

.panel-left{background:linear-gradient(135deg,#0f1923 0%,#1a2535 50%,#0f1923 100%)}

.panel-right{background:linear-gradient(135deg,#020e1c 0%,#0a1f3d 50%,#020e1c 100%)}

.panel-overlay{position:absolute;inset:0;opacity:0;transition:opacity .5s}

.panel-left .panel-overlay{background:radial-gradient(ellipse at center,rgba(230,81,0,0.15) 0%,transparent 70%)}

.panel-right .panel-overlay{background:radial-gradient(ellipse at center,rgba(21,101,192,0.2) 0%,transparent 70%)}

.panel:hover .panel-overlay{opacity:1}

.panel-content{position:relative;z-index:2;text-align:center;color:#fff;padding:40px;display:flex;flex-direction:column;align-items:center;gap:16px;opacity:0;animation:panelIn .8s ease forwards}

.panel-left .panel-content{animation-delay:.1s}

.panel-right .panel-content{animation-delay:.3s}

@keyframes panelIn{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}

.panel-logo img{height:60px;width:auto;filter:brightness(0) invert(1)}

.logo-text-fallback{display:none;font-size:14px;font-weight:700;letter-spacing:3px;color:rgba(255,255,255,0.7);text-transform:uppercase}

.panel-divider-line{width:50px;height:1px;background:rgba(255,255,255,0.4)}

.panel-title{font-size:clamp(24px,3.5vw,42px);font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff}

.panel-left .panel-title{text-shadow:0 0 40px rgba(230,81,0,0.3)}

.panel-right .panel-title{text-shadow:0 0 40px rgba(21,101,192,0.4)}

.panel-subtitle{font-size:clamp(12px,1.5vw,16px);font-weight:300;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.6)}

.panel-btn{margin-top:8px;padding:12px 32px;border:1px solid rgba(255,255,255,0.4);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#fff;transition:all .3s;display:inline-flex;align-items:center;gap:8px}

.panel-left:hover .panel-btn{border-color:#e65100;background:rgba(230,81,0,0.15)}

.panel-right:hover .panel-btn{border-color:#1565c0;background:rgba(21,101,192,0.2)}

.panel-btn i{transition:transform .3s}

.panel:hover .panel-btn i{transform:translateX(4px)}

.landing-separator{width:1px;background:rgba(255,255,255,0.15);flex-shrink:0;z-index:10;align-self:stretch;transition:opacity .3s}

.landing-wrap:hover .landing-separator{opacity:0.05}

@media (max-width:768px){
    html,body{height:auto;overflow:auto}
    .landing-wrap{flex-direction:column;height:auto}
    .panel{height:50vh;flex:none}
    .panel.expanded,.panel.compressed{flex:none}
    .landing-separator{width:100%;height:1px;align-self:auto}
    .panel-title{font-size:28px}
}