/* Maeve onboarding funnel — tema viola (dark immersivo, come /start ma on-brand) */
:root{
  --bg:#120a24; --bg2:#1b1033;
  --text:#f5f3ff; --muted:rgba(245,243,255,.58);
  --primary:#8b5cf6; --primary-glow:rgba(139,92,246,.35);
  --grad:linear-gradient(135deg,#a78bfa 0%,#7c3aed 100%);
  --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:radial-gradient(1200px 700px at 50% -10%,#2a1758 0%,var(--bg) 55%);
  color:var(--text);min-height:100vh;overflow-x:hidden;
}
.topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;z-index:20}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.15rem;color:#fff}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--grad)}
.step-counter{font-size:.82rem;color:var(--muted);font-weight:600}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--grad);width:0;z-index:30;transition:width .4s ease}

.funnel{position:relative;min-height:100vh}
.step{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 24px 48px;opacity:0;transform:translateY(40px);pointer-events:none;transition:opacity .45s ease,transform .45s cubic-bezier(.4,0,.2,1)}
.step.active{opacity:1;transform:translateY(0);pointer-events:auto}
.step.exit-up{opacity:0;transform:translateY(-40px)}
.step-inner{width:100%;max-width:520px;text-align:center}

.step-emoji{font-size:3.6rem;margin-bottom:14px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.step-title{font-size:1.8rem;font-weight:800;margin-bottom:12px;line-height:1.2;background:linear-gradient(135deg,#fff,#d3bbff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.step-subtitle{font-size:1rem;color:var(--muted);margin-bottom:32px;line-height:1.6}

.funnel-input{width:100%;padding:18px 20px;background:rgba(255,255,255,.06);border:1.5px solid var(--line);border-radius:14px;font-family:inherit;font-size:1.05rem;color:var(--text);outline:none;transition:all .3s ease;margin-bottom:16px}
.funnel-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow);background:rgba(255,255,255,.09)}
.funnel-input::placeholder{color:rgba(255,255,255,.28)}
.funnel-textarea{min-height:150px;resize:vertical;line-height:1.6}

.btn-next{width:100%;padding:18px 24px;background:var(--grad);border:none;border-radius:14px;font-family:inherit;font-size:1.05rem;font-weight:700;color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 24px var(--primary-glow);margin-top:8px}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--primary-glow)}
.btn-next:active{transform:translateY(0)}
.btn-next:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-skip{background:none;border:none;color:var(--muted);font-family:inherit;font-size:.88rem;cursor:pointer;padding:12px;margin-top:6px;transition:color .2s}
.btn-skip:hover{color:var(--text)}
.btn-back{position:fixed;top:74px;left:20px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:8px 14px;color:var(--muted);font-family:inherit;font-size:.85rem;cursor:pointer;transition:all .2s;z-index:21;display:none}
.btn-back:hover{background:rgba(255,255,255,.12);color:var(--text)}

.hint{font-size:.82rem;color:var(--muted);line-height:1.5;margin:-4px 0 16px;display:flex;gap:7px;align-items:flex-start;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.hint b{color:#d3bbff;font-weight:600}

.opt-row{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.opt-card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:1px;background:rgba(255,255,255,.04);border:2px solid var(--line);border-radius:14px;padding:13px 18px;cursor:pointer;transition:all .2s ease;text-align:left}
.opt-card:hover{border-color:rgba(167,139,250,.5);background:rgba(255,255,255,.07)}
.opt-card.selected{border-color:var(--primary);background:rgba(139,92,246,.14);box-shadow:0 0 24px var(--primary-glow)}
.opt-card .oc-emoji{grid-row:1 / 3;font-size:1.7rem;margin:0;line-height:1}
.opt-card .oc-label{font-weight:700;font-size:1rem;margin:0}
.opt-card .oc-desc{font-size:.8rem;color:var(--muted);line-height:1.3;margin:0}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.chip{padding:8px 16px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.04);font-size:.85rem;color:var(--muted);cursor:pointer;transition:all .2s;font-family:inherit}
.chip:hover,.chip.selected{border-color:var(--primary);color:#fff;background:rgba(139,92,246,.16)}

.phone-row{display:flex;gap:10px;margin-bottom:14px}
.phone-prefix{display:flex;align-items:center;padding:0 16px;background:rgba(255,255,255,.06);border:1.5px solid var(--line);border-radius:14px;font-weight:600;white-space:nowrap}
.phone-input{flex:1;margin-bottom:0!important}

.plan-row{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.plan-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.04);border:2px solid var(--line);border-radius:16px;padding:18px 20px;cursor:pointer;transition:all .25s ease;text-align:left}
.plan-card:hover{border-color:rgba(167,139,250,.5)}
.plan-card.selected{border-color:var(--primary);background:rgba(139,92,246,.14);box-shadow:0 0 28px var(--primary-glow)}
.plan-card .pc-name{font-weight:700;font-size:1.05rem}
.plan-card .pc-min{font-size:.82rem;color:var(--muted);margin-top:2px}
.plan-card .pc-price{font-weight:800;font-size:1.4rem;white-space:nowrap}
.plan-card .pc-price small{font-size:.8rem;font-weight:500;color:var(--muted)}
.plan-badge{font-size:.7rem;font-weight:700;background:var(--grad);color:#fff;border-radius:999px;padding:3px 10px;margin-left:8px}

.error-msg{color:#fca5a5;font-size:.88rem;margin-top:12px;min-height:18px}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.reassure{font-size:.8rem;color:var(--muted);margin-top:18px}

@media(max-width:560px){
  .step{padding:84px 18px 40px}
  .step-title{font-size:1.5rem}
  .opt-row{grid-template-columns:1fr}
}