/* TEMVIO v1.2.0 — Brand System */
:root{
  --temvio-navy:#0f1629;
  --temvio-violet:#6958f6;
  --temvio-teal:#27d1bc;
  --temvio-lime:#d3ff5c;
}

/* Evolved mark: Talent + Team + Work Connection */
.mark{
  width:34px !important;
  height:34px !important;
  border-radius:11px !important;
  background:url('./brand/temvio-symbol.svg') center/contain no-repeat !important;
  box-shadow:0 8px 20px rgba(38,42,85,.18) !important;
}
.mark::before,.mark::after{display:none !important}
.brand{letter-spacing:.02em}

/* Startup brand splash */
.temvio-brand-splash{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 38%,rgba(105,88,246,.24),transparent 28%),
    linear-gradient(160deg,#17223a,#0f1629 65%);
  opacity:1;transition:opacity .42s ease,transform .42s ease;
}
.temvio-brand-splash.leave{opacity:0;pointer-events:none;transform:scale(1.015)}
.temvio-splash-inner{display:grid;justify-items:center;gap:12px;color:white}
.temvio-splash-inner img{width:112px;height:112px;filter:drop-shadow(0 18px 35px rgba(0,0,0,.28))}
.temvio-splash-inner strong{font:900 34px/1 Inter,Arial,sans-serif;letter-spacing:.12em}
.temvio-splash-inner span{font:600 12px/1.4 Inter,Arial,sans-serif;color:#aebbd6;letter-spacing:.05em}

/* Onboarding */
.onboarding-modal{overflow:hidden}
.onboard-brand{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.04em}
.onboard-brand img{width:30px;height:30px;border-radius:9px}
.onboard-visual{
  min-height:120px;border-radius:22px;margin:8px 0 18px;padding:18px;
  background:linear-gradient(145deg,#10182d,#1a2544);
  color:#fff;display:grid;align-content:center;gap:12px;position:relative;overflow:hidden;
}
.onboard-visual::after{
  content:"";position:absolute;width:140px;height:140px;border-radius:50%;
  background:rgba(211,255,92,.10);left:-45px;bottom:-70px;
}
.onboard-visual img{width:60px;height:60px;border-radius:17px}
.onboard-kicker{font:800 10px/1 Inter,Arial,sans-serif;letter-spacing:.14em;color:#aebbd6}
.onboard-proof{display:grid;gap:5px}
.onboard-proof b{font-size:23px}.onboard-proof span{font-size:11px;color:#c5cee1}
.onboard-flow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.onboard-flow b{background:#f8faff;color:#101728;border-radius:999px;padding:7px 10px;font-size:10px}
.onboard-flow i{font-style:normal;color:var(--temvio-lime)}
.onboard-feature-chips{display:flex;gap:7px;flex-wrap:wrap}
.onboard-feature-chips span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:10px}
.onboard-growth-ring{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px}
.onboard-growth-ring b{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--temvio-lime);color:#11182b;font-size:22px}
.onboard-growth-ring span{font-weight:800;color:#e9edfa}
.onboarding-role-grid{grid-template-columns:1fr !important}
.onboarding-role-grid .choice{text-align:right}
#onboarding .stepper i.on{background:linear-gradient(90deg,var(--temvio-violet),var(--temvio-teal))}

/* In-app guide */
.temvio-guide-hero{
  background:
    radial-gradient(circle at 10% 20%,rgba(211,255,92,.16),transparent 25%),
    linear-gradient(145deg,#111a31,#1c2850);
  color:white;margin-bottom:14px
}
.guide-brand{display:flex;align-items:center;gap:15px}
.guide-brand img{width:64px;height:64px;border-radius:18px}
.guide-brand h2{margin:4px 0 5px;font-size:26px}
.guide-brand p{margin:0;color:#b9c3d9;line-height:1.7}
.temvio-guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
.guide-step{text-align:right;border:0;cursor:pointer}
.guide-step>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eef0ff;color:#5148d9;font-weight:900;font-size:10px;margin-bottom:10px}
.guide-step b{display:block;font-size:16px;margin-bottom:6px}.guide-step p{margin:0;color:var(--muted);font-size:11px;line-height:1.8}
.temvio-guide-role{display:flex;justify-content:space-between;align-items:center;gap:12px}
.temvio-guide-role>div{display:grid;gap:4px}.temvio-guide-role span{font-size:11px;color:var(--muted)}

@media(max-width:620px){
  .temvio-guide-grid{grid-template-columns:1fr}
  .guide-brand{align-items:flex-start}
  .guide-brand img{width:54px;height:54px}
  .guide-brand h2{font-size:22px}
  .temvio-guide-role{align-items:stretch;flex-direction:column}
  .temvio-guide-role .btn{width:100%}
}