/* OTRSI umbrella honeycomb + electrified SI hub + nerve-firing strands */
.umbrella-hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1000px 520px at 50% 18%,#8A1A2E 0%,var(--cr-d) 42%,#2A060E 100%);
  color:#fff;padding:72px 0 40px;text-align:center;
}
.umbrella-hero .wrap{position:relative;z-index:2}
.umbrella-hero .eyebrow{
  color:#F7C9D2;font-weight:700;letter-spacing:.16em;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.umbrella-hero h1{color:#fff;text-transform:uppercase;margin:.1em 0 .35em}
.umbrella-hero .lede{color:#F1DDE1;margin:0 auto;max-width:720px}
.umbrella-hero .meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 0;margin-top:28px;font-size:14px;color:#F7E6EA;
}
.umbrella-hero .meta span{
  display:inline-flex;align-items:center;padding:0 18px;
  border-right:1px solid rgba(255,255,255,.35);
}
.umbrella-hero .meta span:last-child{border-right:0}
.umbrella-hero .meta span::before{display:none!important;content:none!important}
@media (max-width:640px){
  .umbrella-hero .meta{flex-direction:column;gap:10px}
  .umbrella-hero .meta span{border-right:0;padding:0}
}
.umbrella-hero svg.circuit{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.4;pointer-events:none}

/* Text wordmark for umbrella / soon pages */
.brand-wordmark{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--cr);
  font-family:var(--f-disp);font-weight:700;font-size:28px;letter-spacing:.04em;line-height:1;
}
.brand-wordmark .mark{
  width:36px;height:36px;border-radius:8px;
  background:linear-gradient(145deg,var(--cr),var(--cr-d));
  color:#fff;display:grid;place-items:center;
  font-size:15px;letter-spacing:.06em;
  box-shadow:0 0 0 1px rgba(158,27,50,.2),0 0 12px rgba(94,200,255,.25);
}
.brand-wordmark .name{color:var(--ink)}
.brand-wordmark:hover .name{color:var(--cr)}

.honeycomb-section{padding:48px 0 88px;background:var(--bg);position:relative}
.honeycomb-section .eyebrow{text-align:center}
.honeycomb-section h2{text-align:center}
.honeycomb-section .lede{text-align:center;margin:0 auto 28px}

.honeycomb{
  position:relative;
  width:min(980px,100%);
  margin:0 auto;
  aspect-ratio: 980 / 720;
  max-height:720px;
}
.honeycomb-svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
.honeycomb-svg .strand{fill:none;stroke-linecap:round;stroke-linejoin:round}
.honeycomb-svg .strand-a{stroke:rgba(70,170,255,.75);stroke-width:2.6}
.honeycomb-svg .strand-b{stroke:rgba(158,27,50,.7);stroke-width:2.6}
.honeycomb-svg .strand-core{stroke:rgba(94,200,255,.1);stroke-width:14;filter:blur(1px)}
.honeycomb-svg .rung{stroke:rgba(120,190,230,.55);stroke-width:1.6;stroke-linecap:round}
.honeycomb-svg .pulse-dot{
  fill:#5EC8FF;filter:drop-shadow(0 0 6px #5EC8FF) drop-shadow(0 0 12px rgba(94,200,255,.8));
  opacity:0;
}
.honeycomb-svg .arc{
  fill:none;stroke:#7AD4FF;stroke-width:1.2;opacity:0;
  filter:drop-shadow(0 0 4px #5EC8FF);
}

.hex{
  position:absolute;
  width:168px;height:194px;
  transform:translate(-50%,-50%);
  text-decoration:none;color:inherit;
  display:block;
  z-index:3;
  --glow:0;
}
.hex .hex-face{
  width:100%;height:100%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(160deg,#fff 0%,#F7F7F7 100%);
  border:0;
  box-shadow:0 0 0 1.5px #E4E4E4, 0 8px 24px rgba(0,0,0,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px 18px 22px;
  transition:box-shadow .25s, background .25s, transform .2s;
  position:relative;
}
.hex .hex-face::after{
  content:"";position:absolute;inset:0;
  clip-path:inherit;
  box-shadow:inset 0 0 0 2px rgba(158,27,50,0);
  pointer-events:none;
  transition:box-shadow .3s;
}
.hex:hover .hex-face,.hex:focus-visible .hex-face{
  transform:translateY(-2px);
  box-shadow:0 0 0 1.5px #D9B3BA, 0 12px 28px rgba(158,27,50,.14);
}
.hex:focus-visible{outline:none}
.hex:focus-visible .hex-face{outline:3px solid var(--cr);outline-offset:3px}
.hex .status{
  font:600 10px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cr);margin:0 0 8px;
}
.hex .status.soon{color:var(--muted)}
.hex h3{
  font-family:var(--f-disp);font-size:18px;line-height:1.05;margin:0 0 8px;
  color:var(--ink);font-weight:700;letter-spacing:.01em;
}
.hex p{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted);max-width:118px}
.hex.live .hex-face{background:linear-gradient(160deg,#fff 0%,#F8E8EB 100%)}

/* Nerve-fire light-up */
.hex.fired .hex-face{
  box-shadow:0 0 0 2px #5EC8FF, 0 0 28px rgba(94,200,255,.55), 0 8px 24px rgba(0,0,0,.08);
  background:linear-gradient(160deg,#F0FAFF 0%,#E8F4FF 55%,#F8E8EB 100%);
}
.hex.fired .hex-face::after{box-shadow:inset 0 0 0 2.5px rgba(94,200,255,.85)}
.hex.fired h3{color:var(--cr-d)}

/* Central SI hub — electrified */
.hex.hub{
  width:196px;height:226px;z-index:4;
}
.hex.hub .hex-face{
  background:
    radial-gradient(circle at 50% 42%, rgba(94,200,255,.55) 0%, rgba(30,90,180,.35) 28%, transparent 58%),
    linear-gradient(160deg,#1a0a10 0%, #3A0812 40%, #6E1023 100%);
  box-shadow:
    0 0 0 2px rgba(94,200,255,.55),
    0 0 24px rgba(94,200,255,.45),
    0 0 48px rgba(94,200,255,.25),
    0 0 80px rgba(158,27,50,.35),
    inset 0 0 30px rgba(94,200,255,.15);
  color:#fff;
  animation:hub-pulse 2.8s ease-in-out infinite;
}
.hex.hub .hex-face::before{
  content:"";position:absolute;inset:10% 14%;
  clip-path:inherit;
  background:radial-gradient(circle at 50% 45%, rgba(126,220,255,.35), transparent 70%);
  pointer-events:none;animation:hub-core 2.2s ease-in-out infinite;
}
.hex.hub .si-mark{
  font-family:var(--f-disp);font-weight:700;font-size:64px;line-height:1;
  letter-spacing:.04em;color:#fff;
  text-shadow:0 0 12px #5EC8FF, 0 0 28px rgba(94,200,255,.8), 0 0 48px rgba(94,200,255,.4);
  margin:0;position:relative;z-index:1;
}
.hex.hub .si-sub{
  font:600 11px/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  color:#B8E9FF;margin:10px 0 0;position:relative;z-index:1;
  text-shadow:0 0 8px rgba(94,200,255,.5);
}
.hex.hub:hover .hex-face,.hex.hub:focus-visible .hex-face{transform:none}
.hex.hub{pointer-events:none} /* hub is message, not a link target to itself awkwardly - we'll use a div */
a.hex.hub{pointer-events:auto}

@keyframes hub-pulse{
  0%,100%{box-shadow:0 0 0 2px rgba(94,200,255,.45),0 0 20px rgba(94,200,255,.35),0 0 40px rgba(94,200,255,.18),0 0 70px rgba(158,27,50,.3),inset 0 0 28px rgba(94,200,255,.12)}
  50%{box-shadow:0 0 0 3px rgba(94,200,255,.85),0 0 36px rgba(94,200,255,.65),0 0 64px rgba(94,200,255,.35),0 0 96px rgba(158,27,50,.4),inset 0 0 40px rgba(94,200,255,.22)}
}
@keyframes hub-core{
  0%,100%{opacity:.55;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.04)}
}

/* Desktop positions: 3-3-3 honeycomb, SI center */
.hex[data-slot="0"]{left:18%;top:22%}
.hex[data-slot="1"]{left:50%;top:14%}
.hex[data-slot="2"]{left:82%;top:22%}
.hex[data-slot="3"]{left:18%;top:50%}
.hex[data-slot="hub"]{left:50%;top:50%}
.hex[data-slot="4"]{left:82%;top:50%}
.hex[data-slot="5"]{left:18%;top:78%}
.hex[data-slot="6"]{left:50%;top:86%}
.hex[data-slot="7"]{left:82%;top:78%}

.business-rules{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;
  margin-top:36px;font-size:14px;color:var(--muted);
}
.business-rules span{display:flex;align-items:center;gap:8px}
.business-rules span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cr)}

.division-motif{
  width:56px;height:64px;margin:0 auto 16px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(circle at 50% 42%, rgba(94,200,255,.5), transparent 60%), linear-gradient(160deg,#3A0812,#9E1B32);
  box-shadow:0 0 16px rgba(94,200,255,.35);
  display:grid;place-items:center;color:#fff;
  font-family:var(--f-disp);font-weight:700;font-size:18px;letter-spacing:.06em;
}

@media (max-width:900px){
  .honeycomb{
    aspect-ratio:auto;max-height:none;height:auto;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:8px 0 8px 36px;
  }
  .honeycomb-svg{display:none} /* mobile uses side helix below */
  .mobile-helix{display:block}
  .hex,.hex.hub{
    position:relative;left:auto!important;top:auto!important;
    transform:none;width:min(280px,86vw);height:auto;
  }
  .hex .hex-face,.hex.hub .hex-face{
    clip-path:none;border-radius:14px;min-height:110px;
    padding:20px 18px;align-items:flex-start;text-align:left;
    flex-direction:row;flex-wrap:wrap;gap:4px 12px;
  }
  .hex h3{font-size:20px;margin:0}
  .hex p{max-width:none;font-size:14px}
  .hex .status{width:100%}
  .hex.hub{order:-1;width:min(280px,86vw)}
  .hex.hub .hex-face{
    flex-direction:column;align-items:center;text-align:center;
    min-height:140px;animation:hub-pulse 2.8s ease-in-out infinite;
  }
  .hex.hub .si-mark{font-size:48px}
  .hex[data-slot="0"]{order:0}.hex[data-slot="1"]{order:1}.hex[data-slot="2"]{order:2}
  .hex[data-slot="3"]{order:3}.hex[data-slot="4"]{order:4}.hex[data-slot="5"]{order:5}
  .hex[data-slot="6"]{order:6}.hex[data-slot="7"]{order:7}
}
@media (min-width:901px){
  .mobile-helix{display:none!important}
}

.mobile-helix{
  position:absolute;left:8px;top:60px;bottom:40px;width:28px;pointer-events:none;
}
.mobile-helix path{fill:none;stroke-linecap:round}
.mobile-helix .a{stroke:rgba(94,200,255,.45);stroke-width:2}
.mobile-helix .b{stroke:rgba(158,27,50,.35);stroke-width:2}

@media (prefers-reduced-motion:reduce){
  .hex.hub .hex-face,.hex.hub .hex-face::before{animation:none!important}
  .honeycomb-svg .pulse-dot{display:none}
  .hex.fired .hex-face{transition:none}
  .hex.hub .hex-face{
    box-shadow:0 0 0 2px rgba(94,200,255,.7),0 0 28px rgba(94,200,255,.45),0 0 48px rgba(158,27,50,.3),inset 0 0 30px rgba(94,200,255,.18);
  }
}

.umbrella-hero .tagline{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(22px,3vw,32px);
  color:#fff;margin:0 auto 14px;letter-spacing:.01em;max-width:760px;
}
.umbrella-hero svg.circuit-net .lane{display:none}
.umbrella-hero svg.circuit-net .trace{stroke:rgba(255,255,255,.16);stroke-width:1.4;fill:none}
.about-block{max-width:760px;margin:0 auto;text-align:left}
.about-block .lede{max-width:none}
.foot-si{
  display:grid;place-items:center;width:56px;height:56px;border-radius:12px;margin-bottom:10px;
  background:linear-gradient(145deg,var(--cr),var(--cr-d));color:#fff;
  font-family:var(--f-disp);font-weight:700;font-size:20px;letter-spacing:.06em;
}