/* Zilch Support Academy — design system (extracted from prototype). */
:root { --glass: rgba(255,255,255,.04); --glass-brd: rgba(255,255,255,.08); }
html.light { --glass: rgba(255,255,255,.72); --glass-brd: rgba(0,0,0,.06); }
* { -webkit-font-smoothing: antialiased; }
body { font-family: Inter, sans-serif; }

.app-bg { background:
  radial-gradient(60rem 60rem at 85% -10%, rgba(0,210,106,.14), transparent 60%),
  radial-gradient(50rem 50rem at -10% 110%, rgba(0,210,106,.08), transparent 55%), #06080c; }
html.light .app-bg { background:
  radial-gradient(60rem 60rem at 85% -10%, rgba(0,210,106,.16), transparent 60%),
  radial-gradient(50rem 50rem at -10% 110%, rgba(0,210,106,.10), transparent 55%), #f3f5f8; color:#0f172a; }

.glass { background: var(--glass); backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--glass-brd); }
.card-hover { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(0,210,106,.4); box-shadow: 0 18px 50px -12px rgba(0,210,106,.25); }
.btn-brand { background: linear-gradient(135deg,#00d26a,#00a957); transition: all .25s; }
.btn-brand:hover { box-shadow: 0 10px 30px -8px rgba(0,210,106,.6); transform: translateY(-1px); }
.text-grad { background: linear-gradient(120deg,#22e88a,#57f7ab 60%,#96ffcb); -webkit-background-clip: text; background-clip: text; color: transparent; }

.prog { background: linear-gradient(90deg,#00a957,#22e88a); transition: width 1s cubic-bezier(.2,.7,.2,1); position: relative; overflow: hidden; }
.prog::after { content:''; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation: shimmer 2.2s infinite; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius:99px; border:2px solid transparent; background-clip: padding-box; }
html.light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); background-clip: padding-box; }

.nav-item { transition: all .2s; } .nav-item:hover { background: var(--glass); }
.nav-active { background: linear-gradient(90deg, rgba(0,210,106,.18), rgba(0,210,106,.04)); border-left: 2px solid #00d26a; }

.chat-in { animation: fade-up .4s cubic-bezier(.2,.7,.2,1) both; }
.typing span { width:6px;height:6px;border-radius:50%;background:#22e88a;display:inline-block;animation: float 1s infinite; }
.typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s}

.ring-track { stroke: rgba(255,255,255,.08); } html.light .ring-track { stroke: rgba(0,0,0,.08); }

[x-view] { display:none; } .view-on { display:block; animation: fade-up .45s cubic-bezier(.2,.7,.2,1) both; }
.stagger > * { animation: fade-up .5s cubic-bezier(.2,.7,.2,1) both; }

/* interactive flow diagram */
.flow { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.flow-node { position:relative; flex:1; min-width:120px; padding:14px; border-radius:14px; background: var(--glass);
  border:1px solid var(--glass-brd); transition: all .25s; cursor:default; }
.flow-node:hover { border-color: rgba(0,210,106,.5); transform: translateY(-3px); box-shadow:0 12px 30px -12px rgba(0,210,106,.3); }
.flow-arrow { display:grid; place-items:center; color:#57f7ab; padding:0 6px; }
.flow-desc { max-height:0; overflow:hidden; opacity:0; transition: all .3s; font-size:12px; color:var(--text-muted,#94a3b8); }
.flow-node:hover .flow-desc { max-height:100px; opacity:1; margin-top:8px; }

html.light .text-white { color:#0f172a !important; }
html.light .text-slate-400 { color:#64748b !important; }
html.light .text-slate-300 { color:#475569 !important; }
html.light .text-slate-200 { color:#334155 !important; }
html.light .text-slate-500 { color:#94a3b8 !important; }

@keyframes fade-up { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes fade-in { 0%{opacity:0} 100%{opacity:1} }
@keyframes scale-in { 0%{opacity:0;transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }
@keyframes shimmer { 100%{transform:translateX(100%)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(0,210,106,.5)} 100%{box-shadow:0 0 0 12px rgba(0,210,106,0)} }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 1.8s cubic-bezier(.2,.7,.2,1) infinite; }
.animate-scale-in { animation: scale-in .35s cubic-bezier(.2,.7,.2,1) both; }
.animate-fade-in { animation: fade-in .4s ease both; }

/* ---------------- premium polish ---------------- */
/* Consistent, springy lift for primary/secondary actions. */
.hover-lift { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; }
.hover-lift:hover { transform: translateY(-2px); }
.hover-lift:active { transform: translateY(0); transition-duration: .08s; }

/* Sharper heading rhythm + tabular numerals for stats. */
h1, h2 { letter-spacing: -.02em; }
.text-3xl, .text-4xl, .text-5xl { letter-spacing: -.025em; }
.font-extrabold { font-feature-settings: "tnum" 1, "cv11" 1; }

/* Clamp helpers (used on dashboard action cards). */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Softer, brand-tinted scrollbar for a more finished feel. */
::-webkit-scrollbar-thumb:hover { background: rgba(0,210,106,.35); background-clip: padding-box; }

/* Lucide icons inherit weight/scale cleanly. */
svg[data-lucide] { stroke-width: 2; }

/* ---------------- welcome experience ---------------- */
.welcome-scrim {
  background:
    radial-gradient(70rem 70rem at 80% -20%, rgba(0,210,106,.18), transparent 60%),
    radial-gradient(60rem 60rem at -10% 120%, rgba(0,210,106,.12), transparent 55%),
    rgba(4,6,10,.86);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  animation: welcome-fade .5s ease both;
}
html.light .welcome-scrim { background:
  radial-gradient(70rem 70rem at 80% -20%, rgba(0,210,106,.20), transparent 60%),
  radial-gradient(60rem 60rem at -10% 120%, rgba(0,210,106,.12), transparent 55%),
  rgba(243,245,248,.9); }
.welcome-scrim.welcome-out { animation: welcome-fade .45s ease reverse forwards; }
/* Slow drifting aurora behind the hero content. */
.welcome-aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.welcome-aurora::before, .welcome-aurora::after {
  content:''; position:absolute; width:44rem; height:44rem; border-radius:50%; filter: blur(60px); opacity:.5;
}
.welcome-aurora::before { top:-14rem; right:-10rem; background: radial-gradient(circle, rgba(0,210,106,.4), transparent 70%); animation: drift 18s ease-in-out infinite; }
.welcome-aurora::after  { bottom:-16rem; left:-12rem; background: radial-gradient(circle, rgba(34,232,138,.28), transparent 70%); animation: drift 22s ease-in-out infinite reverse; }
.welcome-line, .welcome-badge, .welcome-logo, .welcome-card { animation: welcome-rise .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes welcome-fade { 0%{opacity:0} 100%{opacity:1} }
@keyframes welcome-rise { 0%{opacity:0;transform:translateY(16px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(3rem,2rem) scale(1.1)} }

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .welcome-line, .welcome-badge, .welcome-logo, .welcome-card, .animate-float, .welcome-aurora::before, .welcome-aurora::after { animation: none !important; }
  .stagger > *, .view-on, .chat-in { animation-duration: .01ms !important; }
}