/* ============================================================
   VOICEDESK — AUTH (guest layout)
   Split panel: form left, orbital brand field right.
   ============================================================ */
.g-wrap{ min-height:100vh; display:grid; grid-template-columns:minmax(420px,44%) 1fr; background:var(--bg) }

.g-form{
    display:flex; flex-direction:column; padding:36px clamp(28px,5vw,72px);
    position:relative; z-index:2;
}
.g-brand{ display:flex; align-items:center; gap:12px }
.g-mark{ width:28px; height:28px; border-radius:50%; border:1px solid var(--border-strong);
         position:relative; background:var(--surface) }
.g-mark::after{ content:""; position:absolute; inset:8px; border-radius:50%;
                background:var(--primary); animation:breathe 3.2s var(--ease-io) infinite }
.g-brand span{ font-family:var(--font-display); font-weight:500; font-size:15.5px }
.g-brand b{ color:var(--primary); font-weight:500 }

.g-body{ flex:1; display:flex; flex-direction:column; justify-content:center;
         width:min(400px,100%); margin:0 auto; padding:48px 0 }
.g-eyebrow{ margin-bottom:22px }
.g-title{ font-size:clamp(30px,3.4vw,40px); font-weight:400; letter-spacing:-.03em; line-height:1.05 }
.g-title .serif{ color:var(--primary) }
.g-sub{ margin-top:14px; font-size:14px; color:var(--muted); line-height:1.65 }
.g-fields{ margin-top:34px; display:flex; flex-direction:column; gap:20px }
.g-alt{ margin-top:28px; font-size:13px; color:var(--muted); text-align:center }
.g-alt a{ color:var(--text); font-weight:500; border-bottom:1px solid var(--border-strong);
          transition:border-color var(--t-fast) }
.g-alt a:hover{ border-color:var(--text) }
.g-status{ margin-bottom:18px }
.g-foot{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em;
         text-transform:uppercase; color:var(--muted-2);
         display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
.g-row-split{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.g-link{ font-size:12.5px; color:var(--muted); border-bottom:1px solid transparent;
         transition:all var(--t-fast) }
.g-link:hover{ color:var(--text); border-color:var(--border-strong) }

/* ---- right: orbital field ---- */
.g-art{
    position:relative; overflow:hidden;
    background:var(--surface-2); border-left:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
}
.g-orbit{ position:absolute; top:50%; left:50%; border:1px solid rgba(9,9,11,.08); border-radius:50% }
.g-o1{ width:min(560px,80%); aspect-ratio:1; animation:g-spin 80s linear infinite }
.g-o2{ width:min(400px,58%); aspect-ratio:1; animation:g-spin 55s linear infinite reverse; border-color:rgba(9,9,11,.06) }
@keyframes g-spin{ from{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(0)}
                   to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg)} }
.g-path{ position:absolute; top:50%; left:50%; width:min(560px,80%); aspect-ratio:1; animation:g-spin 24s linear infinite }
.g-path::after{ content:""; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px;
                border-radius:50%; background:var(--primary); box-shadow:0 0 14px var(--primary-ring) }
.g-sphere{
    position:relative; width:clamp(130px,14vw,180px); aspect-ratio:1; border-radius:50%;
    background:
        radial-gradient(circle at 33% 27%, #fff 0%, rgba(255,255,255,0) 45%),
        radial-gradient(circle at 50% 50%, #FFF, #F0F1F6 60%, #E4E6EF);
    box-shadow: inset 0 -18px 38px rgba(9,9,11,.05), inset 0 10px 26px rgba(255,255,255,.95),
                0 38px 90px -24px rgba(9,9,11,.16);
    animation:breathe 8s var(--ease-io) infinite;
}
.g-quote{
    position:absolute; bottom:44px; left:0; right:0; text-align:center; padding:0 32px;
}
.g-quote p{ font-family:var(--font-display); font-weight:400; font-size:19px; letter-spacing:-.02em }
.g-quote p .serif{ color:var(--primary) }
.g-quote span{ display:block; margin-top:10px; font-family:var(--font-mono); font-size:9.5px;
               letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2) }

@media(max-width:880px){
    .g-wrap{ grid-template-columns:1fr }
    .g-art{ display:none }
}