/* GERMZ neon layer: the glowing blue-to-red frames, lit headings and
   label chips of the GERMZ posters. Loaded after site.css; remove the
   <link> in layouts/master.html to switch it off. */
:root{
  --neon-blue:#1e6bff;
  --neon-cyan:#22b8ff;
  --neon-red:#ff1a1a;
  --neon-line:linear-gradient(90deg,var(--neon-blue),#8a3dff 50%,var(--neon-red));
  --glow-blue:0 0 6px #1e6bffcc,0 0 18px #1e6bff66,0 0 36px #1e6bff33;
  --glow-red:0 0 6px #ff1a1acc,0 0 18px #ff1a1a66,0 0 36px #ff1a1a33;
  --glow-frame:-8px 0 22px -6px #1e6bffaa,8px 0 22px -6px #ff1a1aaa,inset 0 0 18px #1e6bff14;
}

/* Night-sky backdrop with faint blue and red light. */
body{background:
  radial-gradient(900px 600px at 0% 0%,#1e6bff14,transparent 70%),
  radial-gradient(900px 600px at 100% 30%,#ff1a1a10,transparent 70%),
  radial-gradient(900px 700px at 0% 85%,#ff1a1a0c,transparent 70%),
  var(--bg);background-attachment:fixed}

/* A lit gradient rule under the navigation. */
nav{border-bottom:0}
nav:after{content:'';position:absolute;left:6%;right:6%;bottom:0;height:2px;background:var(--neon-line);box-shadow:0 0 12px #1e6bff99,0 0 22px #ff1a1a55;opacity:.85}

/* Headings glow like the poster titles. */
/* The hero's PLAY. GAME. CONNECT. keeps its original look. */
h1:not(.hero h1),h2{text-shadow:0 0 2px #fff6,0 0 18px #1e6bff55,0 0 42px #1e6bff2a}
h3{text-shadow:0 0 14px #ffffff1f}

/* Eyebrows: the red/blue slashes either side of the poster banners. */
.eyebrow{color:#dfe7ff;text-shadow:0 0 10px #1e6bff88}
.eyebrow:before{width:26px;height:3px;background:var(--neon-line);box-shadow:0 0 8px var(--neon-blue);transform:skewX(-30deg)}

/* Buttons: glowing pills. */
.btn{border-radius:10px;background:linear-gradient(100deg,var(--neon-blue),#2f7dff);border-color:#5b95ff;box-shadow:0 0 14px #1e6bff88,0 0 30px #1e6bff3a,inset 0 0 10px #ffffff22;text-shadow:0 0 6px #fff8;transition:box-shadow .25s,transform .25s}
.btn:hover{background:linear-gradient(100deg,#2f7dff,var(--neon-cyan));box-shadow:0 0 18px #1e6bffcc,0 0 44px #1e6bff66;transform:translateY(-1px)}
.btn.outline{background:transparent;border-color:var(--neon-red);box-shadow:0 0 12px #ff1a1a66,inset 0 0 10px #ff1a1a22}
.btn.outline:hover{background:#ff1a1a1c;box-shadow:0 0 18px #ff1a1aaa,inset 0 0 14px #ff1a1a33}

/* The poster frame: a rounded panel with a blue-to-red lit border. */
.zone,.event-card,.media-card,.club-card,.club-stat,.club-panel,.branch-detail,.branch-select,.event-plan,.location-card,.reward{
  border:1.5px solid transparent!important;border-radius:16px;
  background:linear-gradient(#0a0b10,#0a0b10) padding-box,var(--neon-line) border-box!important;
  box-shadow:var(--glow-frame);transition:box-shadow .3s,transform .3s}
.zone:hover,.event-card:hover,.media-card:hover,.club-stat:hover,.reward:hover{box-shadow:-10px 0 30px -6px #1e6bffdd,10px 0 30px -6px #ff1a1add,inset 0 0 24px #1e6bff22;transform:translateY(-3px)}
.zone:first-child{background:linear-gradient(140deg,#001b3c,#0a0b10 70%) padding-box,var(--neon-line) border-box!important}
.club-card{background:radial-gradient(ellipse at 0 0,#1e6bff40,transparent 70%) padding-box,radial-gradient(ellipse at 100% 100%,#ff1a1a26,transparent 70%) padding-box,linear-gradient(#0b0c10,#0b0c10) padding-box,var(--neon-line) border-box!important}
.reward{padding:14px 16px;margin-bottom:10px}
.media-card{overflow:hidden}

/* Icons and numbers light up in their zone colour. */
.zone-icon,.event-num{filter:drop-shadow(0 0 8px currentColor)}
.zone .tag{text-shadow:0 0 8px currentColor}
.ticker{background:#05060a}
.ticker span{color:#7f93b5;text-shadow:0 0 10px #1e6bff66}
.ticker span:nth-child(even){color:#c97f86;text-shadow:0 0 10px #ff1a1a55}

/* Price list: the "Bei za michezo" poster. Each experience is its own lit
   card; the amount glows white over blue and red. */
.pricing-wrap{background:transparent;border:0;position:relative}
.pricing-wrap:before,.pricing-wrap:after{content:'';position:absolute;left:6%;right:6%;height:2px;background:var(--neon-line);box-shadow:0 0 14px #1e6bff99,0 0 22px #ff1a1a66}
.pricing-wrap:before{top:0}
.pricing-wrap:after{bottom:0}
.pricing{border:0;gap:18px}
.pricing .price{position:relative;border:1.5px solid transparent;border-radius:16px;
  background:linear-gradient(160deg,#0b1428,#07080d 60%) padding-box,var(--neon-line) border-box;
  box-shadow:var(--glow-frame);animation:neon-breathe 4.5s ease-in-out infinite}
.pricing .price:nth-child(2){animation-delay:-1.1s}
.pricing .price:nth-child(3){animation-delay:-2.2s}
.pricing .price:nth-child(4){animation-delay:-3.3s}
.pricing .price .label{display:inline-block;padding:6px 14px;font:800 italic 12px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.5px;color:#fff;background:linear-gradient(100deg,var(--neon-blue),#2f7dff);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);box-shadow:0 0 14px #1e6bff99}
.pricing .price:nth-child(even) .label{background:linear-gradient(100deg,#d40f0f,var(--neon-red))}
.pricing .price .amount{color:#fff;text-shadow:0 0 4px #fff9,0 0 16px #1e6bff99,0 0 32px #ff1a1a55}
.pricing .price .amount small{color:#9fb6ff;text-shadow:none}
.pricing .price p{color:#c9d3ea;font-size:11px;letter-spacing:.5px}

/* Club: rates rows lit like the points table on the rewards poster. */
.club-rates li{border-bottom:1px solid #1e6bff33}
.club-rates li span{color:#7fb0ff;text-shadow:0 0 8px #1e6bff99}
.club-rates li b{text-shadow:0 0 10px #ffffff55}
.club-stat strong{text-shadow:0 0 6px #fff8,0 0 20px #1e6bff88}

/* Final call to action keeps its colour band, now glowing. */
.final-cta{box-shadow:0 0 40px #1e6bff55,0 0 70px #ff1a1a33}

footer{border-top:0;position:relative}
footer:before{content:'';position:absolute;left:6%;right:6%;top:0;height:2px;background:var(--neon-line);box-shadow:0 0 12px #1e6bff88}

/* Socials: "Scan kwa bei, offers & socials". Each account is a lit card
   with its platform's own glow. */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.social{--tint:var(--neon-cyan);display:flex;align-items:center;gap:16px;padding:20px 22px;border:1.5px solid transparent;border-radius:16px;
  background:linear-gradient(160deg,#0b1428,#07080d 65%) padding-box,var(--neon-line) border-box;box-shadow:var(--glow-frame);transition:box-shadow .3s,transform .3s}
.social:hover{transform:translateY(-3px);box-shadow:-10px 0 30px -6px #1e6bffdd,10px 0 30px -6px #ff1a1add,0 0 26px -8px var(--tint)}
.social-icon{flex:none;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:var(--tint);border:1px solid color-mix(in srgb,var(--tint) 60%,transparent);
  box-shadow:0 0 14px -2px var(--tint),inset 0 0 12px -4px var(--tint);filter:drop-shadow(0 0 6px var(--tint))}
.social-icon svg{width:28px;height:28px}
.social-text{display:flex;flex-direction:column;min-width:0}
.social-text small{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#9fb0cf}
.social-text b{font:800 italic 22px 'Barlow Condensed',Impact,sans-serif;color:#fff;text-shadow:0 0 10px #ffffff55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px}
.social-go{margin-left:auto;color:var(--tint);text-shadow:0 0 8px var(--tint)}
.social-whatsapp{--tint:#2bff88}
.social-instagram{--tint:#ff4fb4}
.social-tiktok{--tint:#25f4ee}
.social-facebook{--tint:#4d8dff}
.social-youtube{--tint:#ff2b2b}
.social-x{--tint:#e8ecf5}
.social-snapchat{--tint:#fffc00}
.social-website{--tint:var(--neon-cyan)}
.footer-socials{display:flex;gap:12px}
.footer-socials a{--tint:var(--neon-cyan);width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--tint);border:1px solid color-mix(in srgb,var(--tint) 55%,transparent);
  box-shadow:0 0 10px -3px var(--tint);transition:box-shadow .25s,transform .25s}
.footer-socials a:hover{transform:translateY(-2px);box-shadow:0 0 18px -2px var(--tint)}
.footer-socials svg{width:20px;height:20px}
.footer-socials a.social-whatsapp{--tint:#2bff88}
.footer-socials a.social-instagram{--tint:#ff4fb4}
.footer-socials a.social-tiktok{--tint:#25f4ee}
.footer-socials a.social-facebook{--tint:#4d8dff}
.footer-socials a.social-youtube{--tint:#ff2b2b}
.footer-socials a.social-snapchat{--tint:#fffc00}

@keyframes neon-breathe{
  0%,100%{box-shadow:var(--glow-frame)}
  50%{box-shadow:-10px 0 28px -5px #1e6bffee,10px 0 28px -5px #ff1a1aee,inset 0 0 22px #1e6bff22}
}

@media(prefers-reduced-motion:reduce){
  .pricing .price{animation:none}
  .btn,.zone,.event-card,.media-card,.club-stat,.reward,.social,.footer-socials a{transition:none}
  .btn:hover,.zone:hover,.event-card:hover,.media-card:hover,.club-stat:hover,.reward:hover,.social:hover,.footer-socials a:hover{transform:none}
}