:root{
  --brand:#FF0000;
  --bg:#0b0b0f;
  --bg-2:#111118;
  --text:#eaeaf3;
  --muted:#b8b8c9;
  --card:#15151e;
  --shadow:0 10px 30px rgba(255,0,0,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(255,0,0,.08), transparent 60%),
              radial-gradient(900px 700px at 100% 0%, rgba(255,0,0,.06), transparent 60%),
              var(--bg);
  overflow-x:hidden;
}
.particles{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(12px 12px at 10% 20%, rgba(255,0,0,.35), transparent 70%),
    radial-gradient(10px 10px at 80% 30%, rgba(255,0,0,.25), transparent 70%),
    radial-gradient(8px 8px at 30% 80%, rgba(255,0,0,.25), transparent 70%),
    radial-gradient(14px 14px at 60% 60%, rgba(255,0,0,.3), transparent 70%);
  filter:blur(1px) saturate(120%);
  animation: drift 25s linear infinite alternate;
  opacity:.35;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-30px,10px,0)}
}
header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px clamp(16px, 4vw, 56px);
}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--text)}
.brand__logo{width:44px; height:44px; border-radius:12px; background:#000 url('../img/logo.svg') center/cover no-repeat; box-shadow:0 0 0 2px rgba(255,0,0,.2), 0 10px 30px rgba(255,0,0,.2)}
.brand__name{font-weight:800; letter-spacing:.5px; font-size:1.25rem}
.brand__tag{font-weight:600; color:var(--brand)}
.cta{display:flex; gap:12px; align-items:center}
.btn{
  appearance:none; border:none; cursor:pointer; color:white; font-weight:700;
  padding:12px 16px; border-radius:14px; background:
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
  linear-gradient(90deg, var(--brand), #ff4d4d);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none; display:inline-block;
}
.btn:hover{ transform: translateY(-2px) scale(1.01); filter:saturate(115%)}
.btn:active{ transform: translateY(0) scale(.99)}
.hero{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 64px);
  align-items:center; padding: clamp(32px, 6vw, 96px) clamp(16px, 4vw, 56px);
}
.hero__title{font-size: clamp(2rem, 3.8vw, 3.5rem); line-height:1.08; margin:0 0 12px; font-weight:800; text-shadow:0 6px 30px rgba(255,0,0,.25)}
.hero__title .accent{color:var(--brand); filter: drop-shadow(0 6px 18px rgba(255,0,0,.35))}
.hero__subtitle{color:var(--muted); max-width:62ch; margin:0 0 22px}
.stats{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px }
.stat{ padding:10px 14px; border-radius:12px; background:var(--card); color:var(--muted); border:1px solid rgba(255,255,255,.06); box-shadow: 0 6px 24px rgba(0,0,0,.25) }
.hero__media{ position:relative; isolation:isolate; border-radius:20px; overflow:hidden; border:1px solid rgba(255,0,0,.18); box-shadow: 0 20px 60px rgba(255,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.02)}
.hero__media img{ display:block; width:100%; height:auto }
.grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap: clamp(14px, 2vw, 18px); padding: 0 clamp(16px, 4vw, 56px) clamp(56px, 8vw, 100px) }
.section-title{ grid-column: 1 / -1; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 24px 0 8px }
.section-sub{ grid-column: 1 / -1; color:var(--muted); margin:0 0 18px }
.card{ grid-column: span 4; background: linear-gradient(180deg, rgba(255,0,0,.06), rgba(255,0,0,.02)), var(--card); border:1px solid rgba(255,255,255,.06); border-radius:22px; padding:20px; position:relative; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.25), var(--shadow); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease }
.card:hover{ transform: translateY(-6px) scale(1.01); filter:saturate(115%); box-shadow:0 25px 60px rgba(255,0,0,.12)}
.ribbon{ position:absolute; top:16px; right:-40px; rotate: 30deg; background:var(--brand); color:#fff; padding:6px 56px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; font-size:.8rem; box-shadow:0 10px 25px rgba(255,0,0,.35) }
.avatar{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.1rem; background: radial-gradient(100% 100% at 30% 30%, #ff4d4d, var(--brand) 70%); color:#fff; box-shadow:0 15px 40px rgba(255,0,0,.3); border:2px solid rgba(255,255,255,.2) }
.role{ color:var(--muted); font-weight:600; margin-top:6px }
.footer{ color:var(--muted); padding: 24px clamp(16px, 4vw, 56px) 56px; text-align:center; border-top:1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(255,0,0,.08), transparent 40%) }
@media (max-width: 980px){ .hero{ grid-template-columns: 1fr } .card{ grid-column: span 12 } }

.hero__title--red{ }

/* Reveal + float animations for staff cards */
@keyframes floaty { 
  0% { transform: translateY(0) } 
  50% { transform: translateY(-4px) } 
  100% { transform: translateY(0) } 
}
.card--reveal{ opacity:1; transform:none; animation: floaty 6s ease-in-out infinite .6s }
.card--reveal.is-visible{ opacity:1; transform: none; animation: floaty 6s ease-in-out infinite .6s }
.avatar::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,0,0,.45), transparent 70%);
  filter: blur(6px); z-index:-1; opacity:.6;
  animation: pulseGlow 3s ease-in-out infinite;
}
.avatar{ position:relative }
@keyframes pulseGlow { 0%,100%{opacity:.35} 50%{opacity:.85} }


/* All‑red animated gradient + subtle shine for the hero title */
.hero__title--red{
  background: linear-gradient(100deg, #8b0000, #ff0000 30%, #ff4d4d 45%, #ff0000 60%, #8b0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 22px rgba(255,0,0,.25);
  background-size: 200% 100%;
  animation: redSweep 6s linear infinite;
  position: relative;
}
.hero__title--red::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.25) 9%, transparent 18%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  mix-blend-mode: screen;
  animation: gloss 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes redSweep{
  0%{ background-position: 0% 50% }
  100%{ background-position: 200% 50% }
}
@keyframes gloss{
  0%, 35%{ transform: translateX(-120%) rotate(0.001deg); opacity:.0 }
  45%{ opacity:.55 }
  70%,100%{ transform: translateX(120%) rotate(0.001deg); opacity:0 }
}


/* ===== Reusable animated red shine effect ===== */
.shine-red{
  background: linear-gradient(100deg, #8b0000, #ff0000 35%, #ff4d4d 50%, #ff0000 65%, #8b0000);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  animation: redSweep 6s linear infinite;
  display: inline-block;
}
.shine-red::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.28) 9%, transparent 18%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; mix-blend-mode: screen;
  animation: gloss 4.2s ease-in-out infinite;
  pointer-events:none;
}
.glow-red{ text-shadow: 0 0 12px rgba(255,0,0,.35), 0 4px 18px rgba(255,0,0,.25) }

@keyframes redSweep{ 0%{ background-position: 0% 50% } 100%{ background-position: 200% 50% } }
@keyframes gloss{ 0%, 35%{ transform: translateX(-120%) rotate(0.001deg); opacity:.0 } 45%{ opacity:.55 } 70%,100%{ transform: translateX(120%) rotate(0.001deg); opacity:0 } }

/* Ensure footer link shows gradient and no default blue */
.footer a{ text-decoration:none }
.footer a:hover{ text-decoration:underline }