/* ============ Signal hero — futuristic banner used on every page ============ */
.signal-hero{
  position:relative;
  min-height:600px;
  overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 38%, color-mix(in srgb, var(--hero-accent, #3987e5) 20%, transparent), transparent 72%),
    linear-gradient(180deg, #0a0d16 0%, #070810 62%, #05060a 100%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.signal-hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.signal-hero .grain{
  position:absolute; inset:0; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.signal-readout{
  position:absolute; top:26px; left:26px; z-index:3;
  font-variant-numeric:tabular-nums;
}
.signal-readout .r-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
}
.signal-readout .r-value{
  margin-top:6px; font-size:30px; font-weight:700; color:#eef1fb; letter-spacing:0.01em;
}
.signal-readout .r-sub{
  margin-top:2px; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--hero-accent, #3987e5);
}

.signal-core{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  padding:64px 24px 56px;
  text-align:center;
}
.signal-core img{
  width:clamp(161px,18.4vw,253px); height:auto;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.45))
    drop-shadow(0 0 14px color-mix(in srgb, var(--hero-accent, #3987e5) 55%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--hero-accent, #3987e5) 22%, transparent));
}
.signal-mark-link{ display:inline-block; line-height:0; transition:opacity 0.15s ease, transform 0.15s ease; }
.signal-mark-link:hover, .signal-mark-link:focus-visible{ opacity:0.85; transform:translateY(-1px); }
.signal-core .s-word{
  margin-top:28px;
  font-size:clamp(30px,4.6vw,54px);
  letter-spacing:0.04em;
  color:#fff;
  font-variant:small-caps;
}
.signal-core .s-slogan{
  margin-top:14px;
  font-size:clamp(14px,1.5vw,17px);
  font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--hero-accent, #3987e5);
  max-width:680px;
}

.signal-hero.hero-compact{ min-height:420px; }
.signal-hero.hero-compact .signal-core{ padding:52px 24px 44px; }
.signal-hero.hero-compact .signal-core img{ width:clamp(110px,12.6vw,161px); }
.signal-hero.hero-compact .signal-core .s-word{ font-size:clamp(24px,3.4vw,38px); }

.signal-hero.hero-full{ min-height:min(calc(100vh - 69px), 920px); align-items:flex-start; }
.signal-hero.hero-full .signal-core{ padding:min(6vh, 50px) 24px 40px; }
.signal-hero.hero-full .signal-core img{ width:clamp(214px,24.5vw,336px); }
.signal-hero.hero-full .signal-core .s-word{ margin-top:30px; font-size:clamp(38px,6vw,68px); }
.signal-hero.hero-full .signal-core .s-slogan{ margin-top:16px; font-size:clamp(15px,1.6vw,19px); max-width:820px; }

.hero-scroll-cue{
  position:absolute; left:50%; bottom:28px; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-muted); text-decoration:none;
  font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  animation:cueFloat 2.4s ease-in-out infinite;
}
.hero-scroll-cue:hover{ color:var(--text-secondary); }
.hero-scroll-cue svg{ width:16px; height:16px; }
.hero-scroll-cue svg path{ stroke:var(--hero-accent, #3987e5); }

@keyframes cueFloat{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.7; }
  50%{ transform:translateX(-50%) translateY(6px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll-cue{ animation:none; }
}

@media (max-width:640px){
  .signal-hero{ min-height:460px; }
  .signal-hero.hero-compact{ min-height:360px; }
  .signal-hero.hero-full{ min-height:min(calc(100svh - 69px), 620px); }
  .signal-hero.hero-full .signal-core{ padding:28px 20px 24px; }
  .signal-hero.hero-full .signal-core img{ width:clamp(150px,42vw,200px); }
  .signal-hero.hero-full .signal-core .s-word{ font-size:clamp(28px,7vw,40px); margin-top:20px; }
  .signal-hero.hero-full .signal-core .s-slogan{ font-size:13px; margin-top:12px; }
  .signal-readout{ top:16px; left:16px; }
  .signal-readout .r-value{ font-size:22px; }
  .hero-scroll-cue{ bottom:18px; }
}