.hero{
  padding:48px 0 20px; text-align:center;
}
.hero .eyebrow{display:block; margin-bottom:10px;}
.hero h1{font-size:2.4rem; margin:0 0 8px;}
.hero p{max-width:560px; margin:0 auto; color:var(--teal-deep); opacity:0.8;}

.radial-wrap{
  position:relative;
  width:min(640px, 92vw);
  aspect-ratio:1/1;
  margin:26px auto 10px;
}
.radial-ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 34%),
    conic-gradient(from 0deg, rgba(39,71,84,0.06), rgba(173,138,78,0.08), rgba(124,144,120,0.07), rgba(39,71,84,0.06));
  border:1px solid var(--line);
}
.radial-ring::before{
  content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px dashed rgba(173,138,78,0.35);
}
.radial-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:31%; aspect-ratio:1/1; border-radius:50%;
  background:var(--parchment); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:0 8px 24px rgba(35,48,58,0.18);
  text-align:center; text-decoration:none; color:var(--ink);
  z-index:5;
}
.radial-center img{ width:42%; height:auto; }
.radial-center span{ display:block; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; margin-top:4px; color:var(--teal);}

.spoke{
  position:absolute; top:50%; left:50%;
  width:118px; margin:-46px 0 0 -59px;
  text-align:center; text-decoration:none; color:var(--ink);
}
.spoke .dot{
  width:54px; height:54px; border-radius:50%; margin:0 auto 6px;
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.35rem;
  box-shadow:0 6px 16px rgba(35,48,58,0.12);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.spoke .label{ font-size:0.72rem; font-weight:600; line-height:1.25; display:block;}
.spoke:hover .dot, .spoke:focus-visible .dot{
  transform:scale(1.09); border-color:var(--gold); box-shadow:0 10px 22px rgba(173,138,78,0.28);
}
.spoke:focus-visible{ outline:none; }
.spoke:focus-visible .dot{ outline:3px solid var(--gold); outline-offset:2px; }

.radial-fallback{
  display:none;
  margin:18px auto 0; max-width:760px;
}
.radial-fallback ul{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0;}
.radial-fallback a{ display:block; padding:10px 14px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); font-size:0.9rem;}

@media (max-width:640px){
  .radial-wrap{ display:none; }
  .radial-fallback{ display:block; }
}