:root{
  --bg:#0a0d14;
  --text:#ffffff;
  --muted:#8a93b2;

  --wx:#4cc9f0;
  --sdr:#f72585;
  --ha:#ffd166;
  --radar:#2dff9a;
  --plex:#ff9f1c;
  --radio:#60a5fa;
  --other:#34d399;

  --cardTop:#151c33;
  --cardBot:#0f1426;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:'Inter',system-ui,sans-serif;

  background:
    linear-gradient(rgba(10,13,20,0.15), rgba(10,13,20,0.25)),
    url("img/radio2.jpg") center/cover no-repeat fixed;

  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
}

.container{
  max-width:1100px;
  width:100%;
  padding:44px 18px;
  text-align:center;
}

/* HEADER */

.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.logo{
  width:44px;
  height:44px;
  filter: drop-shadow(0 0 16px rgba(45,255,154,.35));
}

.station-title{
  font-size:46px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

/* SUBTLE NEON */

.station-title .call{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  color:#2dff9a;

  text-shadow:
  0 0 3px #2dff9a,
  0 0 6px rgba(45,255,154,.6),
  0 0 12px rgba(45,255,154,.4);
}

.station-title .dot{
  color:#2dff9a;
}

.station-title .label{
  font-weight:300;
  color:#ffffff;

  text-shadow:
  0 0 3px #ffffff,
  0 0 8px rgba(255,255,255,.4);
}

.station-sub{
  margin-top:8px;
  font-size:14px;
  letter-spacing:2px;
  color:#4cc9f0;
  text-transform:uppercase;

  text-shadow:
  0 0 4px #4cc9f0,
  0 0 10px rgba(76,201,240,.6);
}

/* ABOUT CARD */

.about-card{
  margin-top:22px;
  padding:18px 22px;
  border-radius:18px;
  text-align:left;
  display:block;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(180deg,var(--cardTop),var(--cardBot));
  position:relative;
  transition:.25s;
}

.about-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(90deg, var(--radio), var(--radar));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.about-card:hover{
  transform:translateY(-4px);
  box-shadow:0 0 40px rgba(45,255,154,.25);
}

.about-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:2px;
  color:var(--radio);
  text-transform:uppercase;
}

.about-title{
  margin-top:4px;
  font-size:18px;
  font-weight:600;
}

.about-desc{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

/* GRID */

.grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}

.card{
  position:relative;
  padding:26px;
  border-radius:18px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(180deg,var(--cardTop),var(--cardBot));
  transition:.25s;
}

.card:hover{
  transform:translateY(-7px);
  box-shadow:0 25px 45px rgba(0,0,0,.55);
}

.card h3{
  margin:0;
  font-size:21px;
}

.wx{box-shadow:inset 0 0 0 1px var(--wx)}
.sdr{box-shadow:inset 0 0 0 1px var(--sdr)}
.ha{box-shadow:inset 0 0 0 1px var(--ha)}
.plex{box-shadow:inset 0 0 0 1px var(--plex)}
.other{box-shadow:inset 0 0 0 1px var(--other)}
.radar{box-shadow:inset 0 0 0 1px var(--radar),0 0 24px rgba(45,255,154,.35)}
.radio{box-shadow:inset 0 0 0 1px rgba(96,165,250,.95),0 0 26px rgba(96,165,250,.22)}

/* PRIVATE BADGE */

.badge-private{
  position:absolute;
  top:12px;
  right:12px;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  background:#ff9f1c;
  color:#000;
  font-weight:600;
  opacity:0;
  transition:.2s;
}

.card:hover .badge-private{
  opacity:1;
}

@media (max-width:700px){
  .badge-private{opacity:1;}
}

/* FOOTER */

footer{
  margin-top:30px;
  font-size:13px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.contact-link{
  display:inline-flex;
  color:var(--muted);
  transition:all .2s ease;
  text-decoration:none;
  padding: 5px;
}

.contact-link:hover{
  color: #2dff9a;
  transform: scale(1.2);
}

.icon-mail{
  width:20px;
  height:20px;
  fill:currentColor;
}


/* Unified cards and bilingual presentation */
:root{--muted:#b0bad0}
.container{padding-top:76px;padding-bottom:38px}
.language-switch{position:absolute;top:22px;right:24px;display:flex;align-items:center;gap:5px;padding:4px;background:#11192beF;border:1px solid #60a5fa;border-radius:12px;z-index:2;color:#a4b4ce}
.language-switch button{font:600 13px 'Inter',system-ui,sans-serif;min-width:44px;min-height:40px;border:0;border-radius:8px;background:transparent;color:#c3d0e6;cursor:pointer}
.language-switch button[aria-pressed="true"]{background:#203b48;color:#2dff9a}
.language-switch button:hover{color:#2dff9a}
.card,.about-card{border:1px solid #60a5fa;box-shadow:none}
.about-card::before{display:none}
.card:hover,.card:focus-visible,.about-card:hover,.about-card:focus-visible{border-color:#2dff9a;box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 20px rgba(45,255,154,.15);transform:translateY(-4px)}
a:focus-visible,button:focus-visible{outline:2px solid #2dff9a;outline-offset:4px}
.about-card{display:flex;align-items:center;gap:20px;padding:22px}
.profile-image{width:88px;height:88px;object-fit:cover;object-position:16% 88%;border-radius:14px;flex-shrink:0;border:1px solid #344b69}
.profile-copy{flex:1;min-width:0}
.about-title{font-size:21px}
.profile-intro{font-size:14px;line-height:1.6;margin:8px 0;color:#d0d8e8;max-width:710px}
.about-desc{font-size:12px;line-height:1.5}
.profile-more{font-size:12px;color:#72cff5;white-space:nowrap}
.card{display:flex;flex-direction:column;justify-content:center;min-height:135px;padding:22px 18px}
.card h3{font-size:20px;line-height:1.3}
.card-desc{font-size:13px;line-height:1.55;color:var(--muted);margin:9px 0 0}
.badge-private{position:static;align-self:center;opacity:1;font-size:9px;letter-spacing:.1px;padding:4px 8px;margin-bottom:10px;color:#ffd166;background:#ffd16615}
.grid{align-items:stretch}
@media(max-width:760px){.profile-more{display:none}.station-title{font-size:clamp(23px,5.5vw,40px);gap:9px;letter-spacing:1px}.brand-row{gap:9px}.station-sub{font-size:11px;line-height:1.7;letter-spacing:1px}.logo{width:36px;height:36px}.about-card{gap:14px;padding:18px}.profile-image{width:66px;height:66px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card h3{font-size:18px}.card{padding:20px 13px}.language-switch{top:14px;right:16px}}
@media(max-width:400px){.profile-image{display:none}.about-title{font-size:19px}.card h3{font-size:16px}.card-desc{font-size:12px}footer{font-size:11px;gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before{transition:none!important}.card:hover,.about-card:hover{transform:none}}