/* Gli Amici di Boyle · rete-layout.css (gruppi per ambiente e mappa della Rete) */

/* ── gruppi ── */
#membersGrid.rl-arranged { display: block; }
.rl-group { margin: 0 0 54px; }
.rl-group[hidden] { display: none; }
.rl-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 0 0 20px; padding: 0 0 14px;
  border-bottom: 1px solid var(--r-border, rgba(120,210,255,.18));
  position: relative;
}
.rl-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px;
  background: var(--rl-accent, #7be4ff); border-radius: 2px;
  box-shadow: 0 0 14px var(--rl-accent, #7be4ff);
}
.rl-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.03em; margin: 0 0 4px; color: var(--r-text, #edf7ff); }
.rl-sub { margin: 0; color: var(--r-soft, rgba(237,247,255,.5)); font-size: .9rem; }
.rl-count {
  flex: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rl-accent, #7be4ff); opacity: .85;
}
.rl-group--nuovi   { --rl-accent: #39ff8f; }
.rl-group--spazio  { --rl-accent: #b49cff; }
.rl-group--quota   { --rl-accent: #e8f4ff; }
.rl-group--campo   { --rl-accent: #ffb020; }
.rl-group--mare    { --rl-accent: #4fd2ff; }
.rl-group--ricerca { --rl-accent: #7cf0d0; }

/* i nuovi: un leggero alone verde sulle card */
.rl-group--nuovi .member-card { box-shadow: 0 0 0 1px rgba(57,255,143,.28), 0 18px 44px rgba(0,0,0,.36); }

@media (max-width: 700px) {
  .rl-group { margin-bottom: 40px; }
  .rl-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── mappa ── */
.rl-map {
  position: relative; margin: 8px 0 30px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(20,70,130,.55), transparent 60%),
    linear-gradient(180deg, #04142e 0%, #020b1c 100%);
  border: 1px solid rgba(123,228,255,.22);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.2);
}
.rl-map::after { /* vignettatura ai bordi */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(1,7,18,.75) 100%);
}
.rl-map__bar {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; pointer-events: none;
}
.rl-map__bar > * { pointer-events: auto; }
.rl-map__stats {
  margin: 0; display: inline-flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(200,235,255,.6);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.rl-map__stats b {
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; font-weight: 700;
  text-shadow: 0 0 18px rgba(123,228,255,.55); margin-right: 4px;
}
.rl-map__views {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px;
  background: rgba(2,12,28,.7); border: 1px solid rgba(123,228,255,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.rl-map__views::before { /* cursore che scorre sotto il pulsante attivo */
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(135deg, #39ff8f, #7be4ff); box-shadow: 0 0 18px rgba(123,228,255,.55);
  transition: transform .35s cubic-bezier(.3,1.4,.5,1);
}
.rl-map__views.is-mondo::before { transform: translateX(100%); }
.rl-map__views button {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(200,235,255,.75); padding: 8px 18px; border-radius: 999px; transition: color .25s;
}
.rl-map__views button.is-on { color: #021022; }
.rl-map__frame { position: relative; height: clamp(260px, 36vw, 420px); }
.rl-map__svg { display: block; width: 100%; height: 100%; }
.rl-map__grat { fill: none; stroke: rgba(123,228,255,.07); stroke-width: .6px; vector-effect: non-scaling-stroke; }
.rl-map__sphere { fill: rgba(10,40,80,.25); stroke: rgba(123,228,255,.18); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.rl-map__landbg { fill: rgba(30,110,170,.16); }
.rl-map__land { fill: url(#rlDots); stroke: rgba(123,228,255,.32); stroke-width: .7px; vector-effect: non-scaling-stroke; }
.rl-map__arc {
  fill: none; stroke: url(#rlArc); stroke-width: 1.1px; vector-effect: non-scaling-stroke; opacity: .75;
  stroke-dasharray: 4 6; animation: rlFlow 2.6s linear infinite;
}
@keyframes rlFlow { to { stroke-dashoffset: -40; } }
.rl-map__pt { cursor: pointer; outline: none; }
.rl-map__dot {
  fill: #eafaff; stroke: #7be4ff; stroke-width: 2px; vector-effect: non-scaling-stroke;
  transition: fill .2s, stroke .2s; filter: drop-shadow(0 0 4px rgba(123,228,255,.9));
}
.rl-map__halo { transform-box: fill-box; transform-origin: center; animation: rlPulse 3.2s ease-in-out infinite; }
.rl-map__pt:hover .rl-map__dot, .rl-map__pt:focus .rl-map__dot { fill: #fff; stroke: #39ff8f; }
.rl-map__pt.is-on .rl-map__dot { fill: #39ff8f; stroke: #eafff3; }
@keyframes rlPulse { 0%, 100% { transform: scale(.75); opacity: .95; } 50% { transform: scale(1.2); opacity: .4; } }
.rl-map__tip {
  position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; white-space: nowrap;
  background: rgba(2,12,28,.92); border: 1px solid rgba(123,228,255,.4); color: #fff;
  font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 16px rgba(123,228,255,.25);
}
.rl-map__chip {
  position: absolute; z-index: 3; left: 18px; bottom: 16px; margin: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(2,12,28,.82); border: 1px solid rgba(57,255,143,.4); color: #d9fbe8; font-size: .85rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rl-map__chip b { color: #39ff8f; }
.rl-map__chip button {
  border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700;
  background: linear-gradient(135deg, #39ff8f, #7be4ff); color: #021022;
}
.rl-map__chip[hidden] { display: none; }
/* Amici di Boyle e legenda */
.rl-map__amico { fill: #39ff8f; opacity: .75; filter: drop-shadow(0 0 3px rgba(57,255,143,.8)); animation: rlTwinkle 4s ease-in-out infinite; }
@keyframes rlTwinkle { 0%, 100% { opacity: .85; } 50% { opacity: .35; } }
.rl-map__legend {
  position: absolute; z-index: 3; right: 18px; bottom: 16px; display: flex; gap: 16px;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(220,240,255,.75);
}
.rl-map__lg { display: inline-flex; align-items: center; gap: 7px; }
.rl-map__lg::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.rl-map__lg--rete::before { background: #eafaff; box-shadow: 0 0 0 2px #7be4ff, 0 0 8px #7be4ff; }
.rl-map__lg--amici::before { width: 7px; height: 7px; background: #39ff8f; box-shadow: 0 0 6px #39ff8f; }
@media (max-width: 700px) {
  .rl-map__legend { right: auto; left: 14px; bottom: 12px; gap: 12px; font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) { .rl-map__amico { animation: none; } }
@media (max-width: 700px) {
  .rl-map__bar { position: relative; padding: 14px 14px 4px; }
  .rl-map__stats { gap: 10px; font-size: .68rem; }
  .rl-map__stats b { font-size: 1.1rem; }
  .rl-map__frame { height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .rl-map__halo, .rl-map__arc { animation: none; } }

/* ── pulsanti principali della pagina Rete ──
   Stessa famiglia per tutti: vetro scuro, bordo a gradiente che ruota piano,
   bagliore del proprio colore, icona in un cerchietto e freccia che scorre al passaggio. */
@property --rl-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rlSpin { to { --rl-a: 360deg; } }

:is(.hero__cta, .rw-path) .btn-electric, :is(.hero__cta, .rw-path) .btn-amici, :is(.hero__cta, .rw-path) .btn-eventi {
  --c1: #4fa8ff; --c2: #7be4ff; --glow: rgba(79,168,255,.45); --txt: #eaf6ff;
  position: relative !important; overflow: hidden !important; isolation: isolate;
  display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  min-height: 54px !important; padding: 0 46px 0 8px !important; border-radius: 999px !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(8,26,54,.92), rgba(3,13,30,.95)) padding-box,
    conic-gradient(from var(--rl-a), var(--c1), var(--c2), rgba(255,255,255,.08) 35%, var(--c1) 60%, var(--c2), var(--c1)) border-box !important;
  color: var(--txt) !important; font-size: .95rem !important; font-weight: 700 !important; letter-spacing: .01em;
  text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 26px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.07) !important;
  animation: rlSpin 6s linear infinite;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s !important;
  filter: none !important;
}
:is(.hero__cta, .rw-path) .btn-amici  { --c1: #39ff8f; --c2: #4dffd6; --glow: rgba(57,255,143,.42); }
:is(.hero__cta, .rw-path) .btn-eventi { --c1: #a98bff; --c2: #e6a8ff; --glow: rgba(169,139,255,.45); animation-duration: 7s; }

/* icona: quella del pulsante Rete c'e' gia', per gli altri due la aggiungo qui */
:is(.hero__cta, .rw-path) .btn-electric::before, :is(.hero__cta, .rw-path) .btn-amici::before, :is(.hero__cta, .rw-path) .btn-eventi::before {
  content: "" !important; position: relative !important; inset: auto !important; flex: none;
  width: 38px !important; height: 38px !important; border-radius: 50%; transform: none !important; filter: none !important;
  opacity: 1 !important; animation: none !important;
  background-color: var(--c1) !important;
  -webkit-mask: var(--ico) center / 18px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: var(--ico) center / 18px no-repeat exclude, linear-gradient(#000 0 0);
  box-shadow: 0 0 16px var(--glow);
}
:is(.hero__cta, .rw-path) .btn-electric::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
:is(.hero__cta, .rw-path) .btn-amici::before  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
:is(.hero__cta, .rw-path) .btn-eventi::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
:is(.hero__cta, .rw-path) .btn-electric__inner > svg { display: none; }
:is(.hero__cta, .rw-path) .btn-electric__inner { gap: 0 !important; }

/* freccia */
:is(.hero__cta, .rw-path) .btn-electric::after, :is(.hero__cta, .rw-path) .btn-amici::after, :is(.hero__cta, .rw-path) .btn-eventi::after {
  content: "→"; position: absolute; right: 20px; top: 50%; transform: translate(-6px, -50%); opacity: .55;
  color: var(--c2); font-weight: 700; transition: transform .25s, opacity .25s;
}
:is(.hero__cta, .rw-path) .btn-electric:hover, :is(.hero__cta, .rw-path) .btn-amici:hover, :is(.hero__cta, .rw-path) .btn-eventi:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.4), 0 0 40px -4px var(--glow), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
:is(.hero__cta, .rw-path) .btn-electric:hover::after, :is(.hero__cta, .rw-path) .btn-amici:hover::after, :is(.hero__cta, .rw-path) .btn-eventi:hover::after { transform: translate(0, -50%); opacity: 1; }
:is(.hero__cta, .rw-path) .btn-electric:active, :is(.hero__cta, .rw-path) .btn-amici:active, :is(.hero__cta, .rw-path) .btn-eventi:active { transform: translateY(0) scale(.98) !important; }
@media (min-width: 901px) {
  :is(.hero__cta, .rw-path) .btn-electric, :is(.hero__cta, .rw-path) .btn-amici, :is(.hero__cta, .rw-path) .btn-eventi { min-width: 270px; }
}
@media (max-width: 640px) {
  :is(.hero__cta, .rw-path) .btn-electric, :is(.hero__cta, .rw-path) .btn-amici, :is(.hero__cta, .rw-path) .btn-eventi { white-space: normal; padding-right: 40px !important; }
}

/* pulsante ⓘ accanto */
.hero__cta .hero-info-btn {
  width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(8,26,54,.7); border: 1px solid rgba(123,228,255,.3); color: rgba(200,235,255,.8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, color .2s, transform .2s;
}
.hero__cta .hero-info-btn:hover { background: rgba(123,228,255,.18); color: #fff; transform: scale(1.06); }

/* barra "Codice membro + Accedi": un'unica capsula */
.hero-access-bar {
  padding: 5px !important; gap: 4px !important; border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, rgba(8,26,54,.9), rgba(3,13,30,.94)) padding-box,
    linear-gradient(135deg, rgba(123,228,255,.55), rgba(57,255,143,.35), rgba(123,228,255,.15)) border-box;
  box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-access-bar .hero-access-input {
  background: transparent !important; border: 0 !important; padding: 10px 14px 10px 16px !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase;
}
.hero-access-bar .hero-access-btn {
  border: 0 !important; padding: 10px 22px !important; border-radius: 999px !important;
  background: linear-gradient(135deg, #7be4ff, #39ff8f) !important; color: #021022 !important;
  font-size: .8rem !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 20px rgba(123,228,255,.35); transition: transform .2s, box-shadow .2s !important;
}
.hero-access-bar .hero-access-btn:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(57,255,143,.5); }
.hero-access-bar .hero-access-btn:disabled { opacity: .45; transform: none; }
.hero-access-bar .hero-access-status { padding: 0 10px; }

/* "Filtra per specialita'" */
.skill-filter-toggle {
  position: relative; gap: 12px !important; padding: 6px 22px 6px 6px !important; min-height: 48px;
  border: 1.5px solid transparent !important; color: #eaf6ff !important;
  font-size: .82rem !important; letter-spacing: .1em !important; text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(8,26,54,.92), rgba(3,13,30,.95)) padding-box,
    linear-gradient(135deg, rgba(123,228,255,.7), rgba(79,168,255,.25), rgba(123,228,255,.5)) border-box !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 22px -8px rgba(123,228,255,.6) !important;
}
.skill-filter-toggle > svg {
  box-sizing: content-box; padding: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #7be4ff, #4fa8ff); color: #021022; stroke: #021022;
}
.skill-filter-toggle:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(0,0,0,.36), 0 0 30px -6px rgba(123,228,255,.7) !important; }
#skillFilterArrow { opacity: .8 !important; }
.skill-filter-panel--open ~ * #skillFilterArrow, .skill-filter-toggle[aria-expanded="true"] #skillFilterArrow { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  :is(.hero__cta, .rw-path) .btn-electric, :is(.hero__cta, .rw-path) .btn-amici, :is(.hero__cta, .rw-path) .btn-eventi { animation: none; }
}

:is(.hero__cta, .rw-path) .btn-electric::after, :is(.hero__cta, .rw-path) .btn-amici::after, :is(.hero__cta, .rw-path) .btn-eventi::after { font-size: 1.1rem; line-height: 1; }

/* disposizione: i tre percorsi affiancati alla pari, l'accesso dei membri centrato sotto */
@media (min-width: 1100px) {
  .hero__cta {
    display: grid !important; grid-template-columns: repeat(3, max-content); justify-content: center;
    column-gap: 30px; row-gap: 26px; align-items: end;
  }
  .hero__cta .hero-cta-group { align-items: flex-start; }
  .hero__cta .hero-access-bar { grid-column: 1 / -1; justify-self: center; margin: 0 !important; }
}


/* ── "Perché entrare": due percorsi + tabella di cosa offrono ── */
.rw-section { position: relative; }
.rw-anchor { position: absolute; top: -90px; }
.rw-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 34px 0 30px; }
.rw-path {
  --c1: #4fa8ff; --c2: #7be4ff; --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 34px 34px 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  border: 1.5px solid transparent;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--c1) 16%, transparent), transparent 60%) padding-box,
    linear-gradient(180deg, rgba(7,24,52,.86), rgba(3,12,28,.9)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--c2) 70%, transparent), rgba(255,255,255,.05) 45%, color-mix(in srgb, var(--c1) 55%, transparent)) border-box;
  box-shadow: 0 26px 60px rgba(0,0,0,.4), 0 0 50px -20px var(--c1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .35s cubic-bezier(.3,1.3,.5,1), box-shadow .35s;
}
.rw-path:hover { transform: translateY(-4px); box-shadow: 0 32px 70px rgba(0,0,0,.45), 0 0 70px -18px var(--c1); }
.rw-path--amici { --c1: #39ff8f; --c2: #4dffd6; }
.rw-path::after { /* orbita decorativa che ruota lenta nell'angolo */
  content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--c2) 35%, transparent);
  box-shadow: inset 0 0 0 28px color-mix(in srgb, var(--c1) 5%, transparent), 0 0 0 28px color-mix(in srgb, var(--c1) 3%, transparent);
  animation: rwOrbit 40s linear infinite;
}
@keyframes rwOrbit { to { transform: rotate(360deg); } }
.rw-path__badge {
  font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--c2);
  padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c2) 45%, transparent);
  background: color-mix(in srgb, var(--c1) 10%, transparent);
}
.rw-path__title { margin: 4px 0 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.035em; color: #fff; }
.rw-path__text { margin: 0; color: rgba(225,240,255,.72); line-height: 1.65; }
.rw-path__meta {
  margin: 2px 0 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: color-mix(in srgb, var(--c2) 85%, white);
}
.rw-path__meta::before { content: "● "; color: var(--c1); }
.rw-path .btn-electric, .rw-path .btn-amici { margin-top: auto; }

.rw-matrix {
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, rgba(6,22,48,.82), rgba(3,12,28,.88));
  border: 1px solid rgba(123,228,255,.18);
  box-shadow: 0 26px 60px rgba(0,0,0,.38);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.rw-row {
  --mx: 50%; display: grid; grid-template-columns: 1fr 120px 120px; align-items: center; gap: 10px;
  padding: 16px 26px; border-top: 1px solid rgba(123,228,255,.08); position: relative;
  background: radial-gradient(300px circle at var(--mx) 50%, rgba(123,228,255,.07), transparent 70%);
  background-size: 0 0; background-repeat: no-repeat;
  transition: opacity .6s ease calc(var(--i, 0) * 70ms), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 70ms);
}
.rw-row:hover { background-size: 100% 100%; }
.rl-js .rw-matrix:not(.is-in) .rw-row { opacity: 0; transform: translateY(14px); }
.rw-row--head { border-top: 0; padding-top: 20px; padding-bottom: 14px; background: rgba(123,228,255,.04); }
.rw-row--head h3 { margin: 0; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(200,235,255,.7); }
.rw-feat { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.rw-feat h3 { margin: 0 0 3px; font-size: 1.02rem; color: #fff; letter-spacing: -.01em; }
.rw-feat p { margin: 0; font-size: .9rem; color: rgba(225,240,255,.62); line-height: 1.5; }
.rw-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #7be4ff;
  background: linear-gradient(135deg, rgba(123,228,255,.16), rgba(79,168,255,.05)); border: 1px solid rgba(123,228,255,.25);
  transition: transform .3s, box-shadow .3s;
}
.rw-ico svg { width: 20px; height: 20px; }
.rw-row:hover .rw-ico { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 20px rgba(123,228,255,.35); }
.rw-soon {
  margin-left: 8px; vertical-align: middle; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #ffb020; border: 1px solid rgba(255,176,32,.45); border-radius: 999px; padding: 2px 8px;
}
.rw-cell { display: grid; place-items: center; }
.rw-col {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  color: #021022; background: linear-gradient(135deg, #4fa8ff, #7be4ff); box-shadow: 0 0 18px rgba(123,228,255,.4);
}
.rw-cell--amici .rw-col { background: linear-gradient(135deg, #39ff8f, #4dffd6); box-shadow: 0 0 18px rgba(57,255,143,.4); }
.rw-check { width: 30px; height: 30px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rw-cell--rete .rw-check { stroke: #7be4ff; filter: drop-shadow(0 0 6px rgba(123,228,255,.55)); }
.rw-cell--amici .rw-check { stroke: #39ff8f; filter: drop-shadow(0 0 6px rgba(57,255,143,.55)); }
.rw-check circle { stroke-dasharray: 64; stroke-dashoffset: 0; opacity: .45; transition: stroke-dashoffset .8s ease calc(var(--i, 0) * 70ms + 250ms); }
.rw-check path { stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease calc(var(--i, 0) * 70ms + 700ms); }
.rl-js .rw-matrix:not(.is-in) .rw-check circle { stroke-dashoffset: 64; }
.rl-js .rw-matrix:not(.is-in) .rw-check path { stroke-dashoffset: 16; }
.rw-dash { width: 16px; height: 2px; border-radius: 2px; background: rgba(200,235,255,.22); }

@media (max-width: 860px) {
  .rw-paths { grid-template-columns: 1fr; gap: 18px; }
  .rw-path { padding: 26px 22px 24px; }
  .rw-row { grid-template-columns: 1fr 64px 64px; padding: 14px 14px; gap: 6px; }
  .rw-feat { gap: 12px; }
  .rw-ico { width: 36px; height: 36px; border-radius: 11px; }
  .rw-feat p { font-size: .82rem; }
  .rw-col { font-size: .6rem; padding: 5px 8px; letter-spacing: .1em; }
  .rw-check { width: 26px; height: 26px; }
  .rw-row--head h3 { font-size: .66rem; letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-row { opacity: 1; transform: none; transition: none; }
  .rw-check circle, .rw-check path { stroke-dashoffset: 0; transition: none; }
  .rw-path::after { animation: none; }
}

.rl-map__amici-n b { text-shadow: 0 0 18px rgba(57,255,143,.6); color: #d9ffe9; }

/* Amici di Boyle: scelta di comparire nella sfera */
.amici-sfera__opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.amici-sfera__opt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; cursor: pointer; font-weight: 600; letter-spacing: 0 !important; font-size: .9rem !important; color: #edf7ff !important; background: rgba(5,18,52,.8); border: 1px solid rgba(123,228,255,.2); }
.amici-sfera__opt:has(input:checked) { border-color: #39e6c3; box-shadow: 0 0 0 3px rgba(57,230,195,.15); }
.amici-sfera__opt input { accent-color: #39e6c3; width: auto; }
.amici-sfera__extra { display: grid; gap: 8px; margin-top: 14px; }
.amici-sfera__extra[hidden] { display: none; }
.amici-sfera__extra input[type=file] { padding: 10px 14px; font-size: .82rem; }
.amici-sfera__hint { margin: 2px 0 0; font-size: .74rem; line-height: 1.5; color: rgba(237,247,255,.55); }

/* Candidatura alla Rete: aree di competenza a cascata */
.cand-tags__hint { margin: 2px 0 10px; font-size: .78rem; line-height: 1.5; color: rgba(237,247,255,.6); letter-spacing: 0; font-weight: 400; }
.cand-tags__areas { display: flex; flex-wrap: wrap; gap: 8px; }
.cand-tags__area { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; color: #edf7ff; background: rgba(5,18,52,.8); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.cand-tags__area i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.cand-tags__area b { min-width: 18px; padding: 1px 6px; border-radius: 999px; font-size: .7rem; color: #021022; background: var(--c); }
.cand-tags__area.is-open { background: color-mix(in srgb, var(--c) 20%, rgba(5,18,52,.9)); border-color: var(--c); }
.cand-tags__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 14px; border-left: 2px solid rgba(123,228,255,.25); }
.cand-tags__list:empty { display: none; }
.cand-tags__tag { padding: 7px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .8rem; color: rgba(237,247,255,.85); background: rgba(5,18,52,.7); border: 1px solid rgba(123,228,255,.2); animation: candTagIn .25s ease both; }
.cand-tags__tag.is-on { color: #021022; background: var(--c); border-color: var(--c); font-weight: 700; }
@keyframes candTagIn { from { opacity: 0; transform: translateY(-6px); } }
.cand-tags__picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cand-tags__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; font-size: .78rem; color: #edf7ff; background: rgba(123,228,255,.12); border: 1px solid rgba(123,228,255,.35); }
.cand-tags__chip em { font-style: normal; font-size: .64rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; color: #021022; background: #7be4ff; }
.cand-tags__chip button { width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; color: #edf7ff; background: rgba(255,255,255,.12); font-size: .9rem; line-height: 1; padding: 0; }
.cand-tags__err { margin: 8px 0 0; font-size: .8rem; font-weight: 700; color: #ffb48a; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .cand-tags__tag { animation: none; } }

/* "Non ricordo il mio codice" */
.forgot-code-link { display: block; margin: 8px auto 0; padding: 4px 8px; background: none; border: 0; cursor: pointer; font: inherit; font-size: .78rem; color: rgba(168,238,255,.75); text-decoration: underline; text-underline-offset: 3px; }
.forgot-code-link:hover { color: #7be4ff; }
@media (min-width: 1380px) { .r3d-console .forgot-code-link { position: absolute; right: 0; bottom: -26px; margin: 0; } .r3d-console .hero__cta { position: relative; } }
#forgotModal .access-modal__form { display: flex; flex-direction: column; gap: 12px; }
#forgotModal .access-modal__input { flex: none; height: auto; min-height: 0; padding: 13px 16px; text-transform: none; letter-spacing: normal; font-family: inherit; font-size: 1rem; text-align: left; }