.onboarding {
  position:fixed; inset:0; z-index:10000;
  display:flex; min-height:100vh;
  background:#0F1117;
}
.onboarding.hidden { display:none; }

.onboarding-left {
  flex:1; background:linear-gradient(135deg,#1a1f2e 0%,#0f1117 50%,#1a1020 100%);
  display:flex; flex-direction:column; justify-content:center; padding:3rem 4rem;
  position:relative; overflow:hidden;
}
.onboarding-left::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(99,102,241,0.15) 0%, transparent 60%),
             radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.1) 0%, transparent 50%);
}
.onboarding-left-content { position:relative; z-index:1; }
.ob-logo { display:flex; align-items:center; gap:12px; margin-bottom:3rem; }
.ob-logo-icon { width:48px; height:48px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 8px 24px rgba(99,102,241,0.4); }
.ob-logo-text { font-size:20px; font-weight:700; color:#fff; }
.ob-title { font-size:42px; font-weight:700; color:#fff; line-height:1.2; margin-bottom:1rem; letter-spacing:-0.02em; }
.ob-title span { background:linear-gradient(135deg,#6366f1,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.ob-desc { font-size:16px; color:#64748B; line-height:1.7; margin-bottom:2.5rem; max-width:400px; }
.ob-features { display:flex; flex-direction:column; gap:12px; }
.ob-feature { display:flex; align-items:center; gap:12px; }
.ob-feature-icon { width:36px; height:36px; background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ob-feature-text { font-size:14px; color:#94A3B8; }
.ob-feature-text strong { color:#CBD5E1; font-weight:600; }

.onboarding-right {
  width:480px; flex-shrink:0;
  background:rgba(255,255,255,0.02);
  border-left:1px solid rgba(255,255,255,0.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3rem;
}
.ob-card { width:100%; max-width:360px; }
.ob-card h2 { font-size:24px; font-weight:700; color:#F1F5F9; margin-bottom:0.5rem; }
.ob-card p { font-size:14px; color:#64748B; margin-bottom:2rem; line-height:1.6; }
.ob-google-btn {
  width:100%; padding:14px; border-radius:12px;
  background:white; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:15px; font-weight:600; color:#1a1a1a;
  transition:all 0.2s; box-shadow:0 4px 16px rgba(0,0,0,0.3);
  font-family:inherit;
}
.ob-google-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.ob-google-btn:active { transform:translateY(0); }
.ob-divider { display:flex; align-items:center; gap:12px; margin:1.5rem 0; }
.ob-divider::before, .ob-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.08); }
.ob-divider span { font-size:12px; color:#334155; }
.ob-terms { font-size:11px; color:#334155; text-align:center; line-height:1.6; margin-top:1.5rem; }
.ob-terms a { color:#6366f1; text-decoration:none; }

.ob-float { position:absolute; border-radius:16px; opacity:0.06; }
.ob-float-1 { width:200px; height:200px; background:linear-gradient(135deg,#6366f1,#8b5cf6); top:-60px; right:-60px; transform:rotate(20deg); }
.ob-float-2 { width:150px; height:150px; background:linear-gradient(135deg,#8b5cf6,#ec4899); bottom:60px; right:-40px; transform:rotate(-15deg); border-radius:50%; }
.ob-float-3 { width:80px; height:80px; background:#6366f1; bottom:200px; left:40px; border-radius:50%; opacity:0.04; }