:root{
  --cs-eye-cyan:#22f4ff;
  --cs-eye-blue:#2f8cff;
  --cs-eye-violet:#9f55ff;
  --cs-footer-text:#ecf7ff;
  --cs-footer-muted:#aab8d7;
  --cs-footer-panel:rgba(7,13,34,.78);
  --cs-footer-border:rgba(101,190,255,.24);
}

/* Real website glow layer. This is browser-rendered light on top of the logo,
   not a new image and not just a flat color inside the PNG. */
.cs-real-eye-logo-wrap,
.csob-logo-stage{
  position:relative !important;
  isolation:isolate !important;
  display:inline-grid !important;
  place-items:center !important;
}

.cs-real-eye-logo-wrap img,
.csob-logo-stage img,
.csob-logo{
  position:relative !important;
  z-index:2 !important;
}

.cs-real-eye-logo-wrap img,
.csob-logo-stage img,
img[src*="bull"],
img[src*="steer"],
img[src*="emblem"]{
  filter:
    drop-shadow(0 0 10px rgba(34,244,255,.42))
    drop-shadow(0 0 26px rgba(47,140,255,.25))
    drop-shadow(0 0 44px rgba(159,85,255,.16))
    saturate(1.12)
    contrast(1.05) !important;
}

/* Animated bloom directly over likely eye positions on the displayed logo. */
.cs-real-eye-logo-wrap::before,
.csob-logo-stage::before{
  content:"" !important;
  position:absolute !important;
  z-index:4 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at 41% 50%, rgba(255,255,255,.98) 0 2.3%, rgba(34,244,255,.96) 3.6%, rgba(47,140,255,.50) 7.5%, rgba(34,244,255,.20) 13%, transparent 22%),
    radial-gradient(ellipse at 59% 50%, rgba(255,255,255,.98) 0 2.3%, rgba(34,244,255,.96) 3.6%, rgba(47,140,255,.50) 7.5%, rgba(34,244,255,.20) 13%, transparent 22%),
    linear-gradient(90deg, transparent 30%, rgba(34,244,255,.22) 41%, transparent 49%, rgba(34,244,255,.22) 59%, transparent 70%);
  filter:blur(4.5px) saturate(1.25) !important;
  mix-blend-mode:screen !important;
  opacity:.96 !important;
  transform:translateZ(0) !important;
  animation:cs-real-eye-pulse 2.35s ease-in-out infinite !important;
}

/* Bright core highlight inside each eye. */
.cs-real-eye-logo-wrap::after,
.csob-logo-stage::after{
  content:"" !important;
  position:absolute !important;
  z-index:5 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at 41% 50%, rgba(255,255,255,.9) 0 1.4%, rgba(34,244,255,.78) 2.2%, transparent 5.4%),
    radial-gradient(ellipse at 59% 50%, rgba(255,255,255,.9) 0 1.4%, rgba(34,244,255,.78) 2.2%, transparent 5.4%);
  filter:blur(.9px) !important;
  mix-blend-mode:screen !important;
  opacity:1 !important;
  animation:cs-real-eye-core 1.65s ease-in-out infinite !important;
}

@keyframes cs-real-eye-pulse{
  0%,100%{ opacity:.70; filter:blur(4.2px) saturate(1.1); transform:scale(.985); }
  45%{ opacity:1; filter:blur(6.5px) saturate(1.45); transform:scale(1.035); }
  62%{ opacity:.92; }
}

@keyframes cs-real-eye-core{
  0%,100%{ opacity:.78; transform:scale(.99); }
  50%{ opacity:1; transform:scale(1.035); }
}

/* Better bottom branding panel */
#cryptosteer-bottom-branding{
  position:relative;
  overflow:hidden;
  margin:42px clamp(10px,2vw,24px) 22px;
  padding:clamp(20px,3vw,34px);
  border-radius:28px;
  border:1px solid var(--cs-footer-border);
  background:
    radial-gradient(circle at 12% 45%, rgba(34,244,255,.15), transparent 26%),
    radial-gradient(circle at 88% 30%, rgba(159,85,255,.14), transparent 24%),
    linear-gradient(135deg, rgba(5,9,24,.92), rgba(7,18,43,.86) 58%, rgba(11,11,38,.90));
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 0 44px rgba(34,244,255,.10);
  color:var(--cs-footer-text);
}

#cryptosteer-bottom-branding::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(34,244,255,.14), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 68px);
  opacity:.58;
}

#cryptosteer-bottom-branding::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-68px;
  height:126px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(34,244,255,.26), rgba(159,85,255,.22), transparent);
  filter:blur(18px);
}

.csb-footer-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:18px;
  align-items:center;
}

.csb-footer-logo{
  width:92px;
  height:92px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border:1px solid rgba(111,185,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.32);
}

.csb-footer-logo img{
  width:86px;
  height:86px;
  object-fit:contain;
}

.csb-footer-kicker{
  margin:0 0 6px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9feeff;
}

.csb-footer-title{
  margin:0;
  font-size:clamp(23px,3vw,38px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.035em;
  color:#fff;
}

.csb-footer-title span{
  color:var(--cs-eye-cyan);
  text-shadow:0 0 20px rgba(34,244,255,.32);
}

.csb-footer-copy{
  margin:10px 0 0;
  color:var(--cs-footer-muted);
  font-size:clamp(14px,1.6vw,17px);
  line-height:1.55;
  max-width:900px;
}

.csb-footer-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.csb-footer-chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(111,185,255,.20);
  color:#eaf8ff;
  background:rgba(255,255,255,.045);
  font-size:12px;
  font-weight:800;
}

@media(max-width:640px){
  .csb-footer-inner{ grid-template-columns:1fr; }
  .csb-footer-logo{ width:82px; height:82px; }
  .csb-footer-logo img{ width:76px; height:76px; }
}