:root{
  --brand-red:#E13131; --brand-red-dark:#B82424; --brand-gray:#0B0F1A;
  --panel:#0F1623; --ink:#E5E7EB;
}
html { scroll-behavior: smooth; }
.brand-gradient{ background: radial-gradient(120% 120% at 10% 0%, rgba(225,49,49,.25) 0%, transparent 40%), linear-gradient(135deg, var(--brand-red) 0%, #ff6b6b 100%); }
.shine{ position: relative; overflow: hidden; }
.shine::after{ content:""; position:absolute; inset:-120% -50% auto; height:200%; width:40%; transform:rotate(25deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); animation: shine 6s linear infinite; }
@keyframes shine { 0%{ left:-60%; top:-60%; } 50%{ left:120%; top:20%; } 100%{ left:220%; top:60%; } }
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease, filter .6s ease; filter: saturate(.9);}
.reveal.show{ opacity:1; transform: translateY(0); filter: saturate(1);}
.focus-ring:focus{ outline: 3px solid rgba(225,49,49,.4); outline-offset: 2px;}
.elevate{ box-shadow: 0 10px 30px rgba(16,24,40,.08); }
#interactive-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: -2;
}
.hero-slide.active {
  opacity: 1;
}
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(11, 15, 26, 0.95), rgba(225, 49, 49, 0.1), rgba(11, 15, 26, 0.95));
  background-size: 200% 200%;
  animation: gradient-pan 3s ease infinite;
}
@keyframes gradient-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.logo{
  width: 80px;
  height: auto;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.3));
}