:root{
      --brand-accent: #ff7a00; /* orange */
      --brand-blue: #0b1e2d;
      --brand-black:#0b0f14;
      --text:#e6f1f3;
      --muted:#9fb6c3;
      --card:#101722;
      --card-2:#0f1620;
      --grad:
        radial-gradient(1200px 600px at 20% 0%, rgba(255,122,0,.18), transparent 60%),
        radial-gradient(1200px 600px at 80% 0%, rgba(11,30,45,.35), transparent 60%),
        linear-gradient(180deg, #0b0f14 0%, #0b1e2d 70%);
    }
    html,body{background:var(--brand-black);color:var(--text);}
    .navbar{background:rgba(11,15,20,.75);backdrop-filter:blur(6px);}
    .navbar-brand img{height:34px;width:auto;}
    .btn-brand{background:var(--brand-accent);border:none;color:#2b1200;font-weight:700;}
    .btn-outline-brand{border-color:var(--brand-accent);color:var(--text);}
    .btn-outline-brand:hover{background:var(--brand-accent);color:#2b1200;}
    .hero{background:var(--grad);}
    .navbar strong span{color:var(--brand-accent);}
    .hero h1 span{color:var(--brand-accent);}
    #ticker h2 span{color:var(--brand-accent);}
    .section-muted{color:var(--muted);}
    .badge-soft{background:rgba(255,122,0,.12);color:var(--brand-accent);border:1px solid rgba(255,122,0,.35);}
    .card{background:var(--card);border:1px solid #132337;color: #ff7a00;}
    .card.alt{background:var(--card-2);}
    .icon-pill{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,122,0,.12);border:1px solid rgba(255,122,0,.35);}
    .trusted-logos img { max-height: 28px; margin-right: 18px; opacity:.8; filter: grayscale(100%); }
    .tick { white-space: nowrap; overflow: hidden; }
    .tick-inner { display:inline-block; padding-left: 100%; animation: slide 30s linear infinite; }
    @keyframes slide { 0% { transform: translateX(0) } 100% { transform: translateX(-100%) } }
    footer{background:#0a131d;}
    a{text-decoration:none;}
    .shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.35);}
    .companies{ width: 200px; height: 175px; padding: 5px;}

/* === Metric transition effects === */
.soc-metric { display:inline-block; will-change: filter, transform; }

/* Foggy blur effect */
.foggy-update { animation: fogIn 750ms ease; }
@keyframes fogIn {
  0%   { filter: blur(6px); opacity: 0.2; transform: translateY(-2px); }
  100% { filter: blur(0);  opacity: 1;   transform: none; }
}

/* Glitch effect */
.glitchy { position: relative; }
.glitchy::before,
.glitchy::after {
  content: attr(data-val);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  mix-blend-mode: screen;
}
.glitchy::before {
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%);
  animation: glitchTop 420ms steps(2) 2;
  text-shadow: -1px 0 var(--brand-accent, #ff7a00);
}
.glitchy::after {
  clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%);
  animation: glitchBot 420ms steps(2) 2;
  text-shadow: 1px 0 #00d4ff;
}
@keyframes glitchTop {
  0% { transform: translate(0, 0); }
  50%{ transform: translate(-2px, -1px); }
  100%{ transform: translate(0, 0); }
}
@keyframes glitchBot {
  0% { transform: translate(0, 0); }
  50%{ transform: translate(2px, 1px); }
  100%{ transform: translate(0, 0); }
}