:root{
  --bg0:#050B1C;
  --bg1:#02040B;
  --blue:#0B4AA6;
  --blueGlow:#2B7CFF;
  --gold:#F2B200;
  --yellow:#FFE14A;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.12);

  --shadow: 0 22px 70px rgba(0,0,0,.62);
}

/* Base */
.thunder-body{
  margin:0;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 50% 16%, rgba(43,124,255,.18) 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 96%, rgba(242,178,0,.10) 0%, transparent 55%),
    radial-gradient(1200px 900px at 50% 110%, rgba(0,0,0,.72), rgba(0,0,0,.94)),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* CODE-ONLY soccer ball watermark (no image file) */
.thunder-body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    radial-gradient(1100px 700px at 50% 16%, rgba(43,124,255,.18) 0%, transparent 60%),
    radial-gradient(900px 600px at 50% 96%, rgba(242,178,0,.10) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1000 1000'%3E%3Cg fill='none' stroke='rgba(43,124,255,0.14)' stroke-width='14'%3E%3Ccircle cx='500' cy='500' r='420'/%3E%3Ccircle cx='500' cy='500' r='260'/%3E%3Cpath d='M500 250l110 80-40 130H430l-40-130z'/%3E%3Cpath d='M390 460l-120 70 30 140 130 40 40-120z'/%3E%3Cpath d='M610 460l120 70-30 140-130 40-40-120z'/%3E%3Cpath d='M430 590l70 120 70-120-70-60z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center 140px;
  background-size: 980px;
  filter: blur(0.2px);
}

/* FX layers */
#fx{
  position:fixed;
  inset:0;
  z-index:-4;
}

.rays{
  position:fixed;
  inset:-10%;
  z-index:-3;
  pointer-events:none;
  background:
    repeating-conic-gradient(
      from 215deg at 50% 34%,
      rgba(43,124,255,.10) 0deg,
      rgba(43,124,255,.10) 2.5deg,
      rgba(43,124,255,0) 2.5deg,
      rgba(43,124,255,0) 12deg
    );
  mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,.90) 0%, rgba(0,0,0,.45) 44%, rgba(0,0,0,0) 72%);
  opacity:.25; /* reduced so soccer ball reads */
}

.vignette{
  position:fixed;
  inset:-40px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 50% 18%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(1200px 900px at 50% 110%, rgba(0,0,0,.70), rgba(0,0,0,.95));
}

/* Panels */
.panel{
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius: 22px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}

/* Text helpers */
.text-muted-thunder{ color: var(--muted) !important; }
.fw-black{ font-weight: 900 !important; }
.thunder-title{ letter-spacing: .02em; }

/* Logo block */
.logo-wrap{
  width: 190px;
  height: 190px;
  border-radius: 34px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  position:relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.logo-wrap::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 50% 50%, rgba(242,178,0,.20) 0%, transparent 58%),
    radial-gradient(circle at 45% 40%, rgba(43,124,255,.12) 0%, transparent 62%);
  filter: blur(7px);
  animation: aura 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes aura{
  0%,100%{ transform: scale(1); opacity:.85; }
  50%{ transform: scale(1.07); opacity:1; }
}
.logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.03);
}

/* Tagline pill */
.thunder-pill{
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(242,178,0,.30);
  background: rgba(242,178,0,.08);
  color: rgba(255,255,255,.86);
  font-size: 13.5px;
}
.pill-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--blueGlow);
  box-shadow: 0 0 18px rgba(43,124,255,.85);
  display:inline-block;
}

/* Feature cards */
.feature-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 18px;
}
.badge-num{
  width:28px;height:28px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(43,124,255,.14);
  border:1px solid rgba(43,124,255,.28);
  font-weight: 900;
  font-size: 12px;
}

/* Form styling */
.thunder-input{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.thunder-input:focus{
  border-color: rgba(43,124,255,.78) !important;
  box-shadow: 0 0 0 4px rgba(43,124,255,.14) !important;
}

.thunder-btn{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(180deg, var(--gold), var(--yellow)) !important;
  color: rgba(10,12,20,.95) !important;
  box-shadow: 0 12px 30px rgba(242,178,0,.20);
}

.thunder-social{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.84) !important;
}

.thunder-link{
  color: rgba(43,124,255,.92);
  text-decoration:none;
}
.thunder-link:hover{ text-decoration: underline; }

/* Alerts */
.thunder-alert{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
}
.thunder-alert-ok{
  border-color: rgba(242,178,0,.35);
  box-shadow: 0 0 0 4px rgba(242,178,0,.08) inset;
}
.thunder-alert-err{
  border-color: rgba(255,150,150,.35);
  box-shadow: 0 0 0 4px rgba(255,150,150,.08) inset;
}

/* Video */
.video-wrap{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  aspect-ratio: 16 / 9;
  position:relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}