/* FlowTV advanced styles */
:root{
  --brand:#1463ff;
  --bg:#0c111b;
  --fg:#e5eefc;
}
html,body{ height:100%; }
body{ background: var(--bg); color:#dbe7ff; }
.navbar{ backdrop-filter: blur(6px); }
.brand{ color: var(--brand); }
.hero{
  min-height: 75vh;
  display:flex;
  align-items:center;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.fade-in{ opacity:0; transform: translateY(8px); animation: fadeUp .8s .3s forwards; }
@keyframes fadeUp{to{opacity:1; transform:none;}}
.hover-raise{ transition: transform .25s, box-shadow .25s; }
.hover-raise:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.reveal{ opacity:0; transform: translateY(20px); transition: .6s ease; }
.reveal.show{ opacity:1; transform: none; }
.metric{
  font-size: 44px; font-weight:800; color:#fff; background: #101827;
  display:inline-block; padding:12px 18px; border-radius:14px; min-width:120px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25);
}
/* Canvas background */
#bg-particles{
  position: fixed; inset:0; z-index:-1; display:block; width:100%; height:100%;
  background: radial-gradient(1200px circle at 10% 10%, rgba(20,99,255,.15), transparent),
              linear-gradient(135deg, #0b1220 0%, #111827 100%);
}
/* Ripple buttons */
.ripple{ position:relative; overflow:hidden; }
.ripple::after{ content:''; position:absolute; inset:0; border-radius:inherit; transform:scale(0); opacity:.5; background:#fff; transition:transform .4s, opacity .8s; }
.ripple:active::after{ transform:scale(1); opacity:0; }
/* Typewriter */
.typewriter::after{ content:'|'; margin-left:4px; animation: blink 1s step-end infinite; }
@keyframes blink{50%{opacity:0}}
.card, .list-group-item, .bg-light{ background:#0f1729!important; color:#dbe7ff!important; border:1px solid rgba(255,255,255,.06)!important; }
footer{ border-top:1px solid rgba(255,255,255,.08); }