.landing{
    width:min(920px,100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
}
.landing-inner{
    width:100%;
    padding:42px 42px;
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:26px;
    align-items:center;
}
.hero{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.hero-actions{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:6px;
}
.hero-art{
    border-radius:var(--radius2);
    border:1px solid var(--border);
    background:
            radial-gradient(220px 180px at 20% 30%, rgba(37,99,235,.22), transparent 60%),
            radial-gradient(240px 180px at 70% 40%, rgba(99,102,241,.20), transparent 65%),
            radial-gradient(260px 240px at 50% 90%, rgba(37,99,235,.16), transparent 68%),
            rgba(255,255,255,.75);
    box-shadow:var(--shadow);
    height:320px;
    position:relative;
    overflow:hidden;
}
.hero-art::after{
    content:"";
    position:absolute;
    inset:-40px;
    background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.35), transparent 60%);
    transform:translateX(-35%) rotate(8deg);
    animation:shine 3.2s ease-in-out infinite;
    opacity:.65;
}
@keyframes shine{
    0%{transform:translateX(-55%) rotate(8deg)}
    50%{transform:translateX(10%) rotate(8deg)}
    100%{transform:translateX(-55%) rotate(8deg)}
}

.auth{
    width:min(460px,100%);
    padding:26px;
}
.auth-inner{
    padding:26px;
}
.auth-title{
    font-size:24px;
    margin:0 0 6px 0;
    letter-spacing:-.02em;
}
.auth-sub{
    margin:0 0 18px 0;
    color:var(--muted);
    font-size:13px;
}
.auth-grid{
    display:grid;
    gap:12px;
}
.auth-row{
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
}
.auth-toggle{
    background:transparent;
    border:none;
    color:var(--primary2);
    cursor:pointer;
    font-weight:650;
}
.auth-toggle:hover{text-decoration:underline}

.center-chat{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
}
.center-box{
    width:min(860px, 100%);
    padding:30px;
}
.center-title{
    text-align:center;
    margin:0 0 18px 0;
    font-size:34px;
    letter-spacing:-.03em;
}
.center-sub{
    text-align:center;
    margin:-10px 0 22px 0;
    color:var(--muted);
    font-size:14px;
}

@media (max-width: 920px){
    .landing-inner{grid-template-columns: 1fr; }
    .hero-art{height:260px}
    .sidebar{display:none}
}
.center-chat .center-box{
    background:transparent;
    border:none;
    box-shadow:none;
}