:root{--u-ink:#0f172a;--u-muted:#64748b;--u-primary:#4f46e5;--u-cyan:#0891b2;--u-line:#e8edf5}
.user-page{background:#f7f9fd;min-height:100vh;color:var(--u-ink);overflow:hidden}
.user-hero{position:relative;min-height:650px;padding:70px 24px 60px;background:linear-gradient(135deg,#0b1020 0%,#1e1b4b 46%,#075985 100%);color:#fff;overflow:hidden}
.user-container{max-width:1180px;margin:auto;position:relative;z-index:5}
.user-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:75px}
.user-brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.5px}
.user-logo{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#ffffff16;border:1px solid #ffffff25;box-shadow:0 12px 30px #0003;font-size:25px}
.user-nav .nav-pill{padding:10px 14px;border:1px solid #ffffff25;background:#ffffff10;border-radius:999px;color:#e0e7ff;text-decoration:none;font-size:12px;font-weight:800}
.user-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:45px}
.user-kicker{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff25;font-size:11px;font-weight:900;letter-spacing:.8px}
.user-kicker i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 7px #34d39918;animation:pulse 1.7s infinite}
.user-title{font-size:clamp(40px,6vw,74px);line-height:.98;letter-spacing:-4px;margin:20px 0}
.user-title span{background:linear-gradient(90deg,#fff,#a5f3fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.user-desc{font-size:16px;line-height:1.8;color:#cbd5e1;max-width:650px}
.user-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.user-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:15px;padding:14px 18px;text-decoration:none;font-weight:900;font-size:13px;transition:.25s;border:1px solid transparent}
.user-btn:hover{transform:translateY(-3px);box-shadow:0 15px 30px #0003}
.user-btn.primary{background:#fff;color:#1e1b4b}.user-btn.glass{background:#ffffff10;color:#fff;border-color:#ffffff25}
.user-stage{height:440px;position:relative;display:grid;place-items:center}
.halo{position:absolute;border-radius:50%;border:1px solid #ffffff1c;animation:spin 22s linear infinite}
.halo.a{width:390px;height:390px}.halo.b{width:300px;height:300px;animation-direction:reverse;animation-duration:15s}.halo.c{width:210px;height:210px;animation-duration:10s}
.floating-card{position:absolute;padding:14px 16px;border-radius:18px;background:#ffffff12;border:1px solid #ffffff22;backdrop-filter:blur(12px);box-shadow:0 18px 50px #0004;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;animation:float 5s ease-in-out infinite}
.floating-card.one{top:50px;right:8px}.floating-card.two{bottom:45px;left:0;animation-delay:1s}.floating-card.three{top:170px;left:15px;animation-delay:2s}
.center-orb{width:135px;height:135px;border-radius:40px;background:linear-gradient(135deg,#6366f1,#06b6d4);display:grid;place-items:center;font-size:55px;box-shadow:0 25px 80px #22d3ee55;animation:breathe 3s ease-in-out infinite;transform:rotate(-6deg)}
.orbit-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:#67e8f9;box-shadow:0 0 25px #67e8f9;animation:orbit 8s linear infinite}
@keyframes orbit{from{transform:rotate(0deg) translateX(195px) rotate(0deg)}to{transform:rotate(360deg) translateX(195px) rotate(-360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}@keyframes breathe{50%{transform:rotate(3deg) scale(1.06)}}@keyframes pulse{70%{box-shadow:0 0 0 12px #34d39900}}
.user-wave{position:absolute;bottom:-2px;left:0;width:100%;height:90px;display:flex;align-items:flex-end;gap:4px;opacity:.28}
.user-wave span{flex:1;background:#fff;border-radius:10px 10px 0 0;animation:wave 2s ease-in-out infinite}
.user-wave span:nth-child(2n){animation-delay:.15s}.user-wave span:nth-child(3n){animation-delay:.3s}
.user-features{padding:75px 24px;background:#f7f9fd}
.user-section-title{text-align:center;max-width:700px;margin:0 auto 40px}.user-section-title h2{font-size:clamp(28px,4vw,44px);letter-spacing:-2px;margin:0 0 10px}.user-section-title p{color:var(--u-muted);line-height:1.7}
.feature-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;max-width:1180px;margin:auto}
.uf-card{background:#fff;border:1px solid var(--u-line);border-radius:24px;padding:24px;transition:.3s;position:relative;overflow:hidden}
.uf-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px #0f172a12}.uf-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:26px;background:#eef2ff;margin-bottom:17px}.uf-card h3{font-size:15px;margin:0 0 8px}.uf-card p{font-size:12px;line-height:1.7;color:var(--u-muted);margin:0}
.user-flow{padding:75px 24px;background:#fff}.flow-grid{max-width:1000px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.flow-step{text-align:center;position:relative}.flow-num{margin:auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#4338ca;font-weight:900;border:6px solid #fff;box-shadow:0 0 0 1px #e0e7ff}.flow-step h4{font-size:12px;margin:12px 0 4px}.flow-step p{font-size:10px;color:var(--u-muted);line-height:1.5}.flow-line{position:absolute;top:26px;left:calc(50% + 32px);width:calc(100% - 64px);border-top:2px dashed #c7d2fe}
.user-cta{padding:75px 24px;background:linear-gradient(135deg,#eef2ff,#ecfeff)}.cta-box{max-width:1050px;margin:auto;border-radius:30px;padding:40px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:25px;box-shadow:0 25px 70px #0f172a22}.cta-box h2{margin:0 0 8px;font-size:30px;letter-spacing:-1px}.cta-box p{margin:0;color:#cbd5e1;font-size:13px}
.user-footer{padding:30px 24px;background:#0b1020;color:#94a3b8;text-align:center;font-size:11px}
@media(max-width:950px){.user-grid{grid-template-columns:1fr}.user-stage{height:360px}.feature-cards{grid-template-columns:1fr 1fr}.flow-grid{grid-template-columns:1fr}.flow-line{display:none}.cta-box{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.user-hero{padding-top:35px}.user-nav{margin-bottom:50px}.user-title{letter-spacing:-2.5px}.feature-cards{grid-template-columns:1fr}.user-stage{height:300px}.halo.a{width:270px;height:270px}.halo.b{width:210px;height:210px}.halo.c{width:150px;height:150px}.floating-card{font-size:10px}.floating-card.one{right:0}.floating-card.two{left:0}.floating-card.three{left:0;top:125px}}