:root{
  --neon:#39ff14;
  --ink:#eaffea;
  --muted:rgba(234,255,234,.78);
  --soft:rgba(57,255,20,.07);
  --ring:rgba(57,255,20,.35);
  --edge:rgba(57,255,20,.35);
}
html,body{margin:0;min-height:100%;background:#000;color:var(--ink);color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
a{color:inherit}

body::before,body::after{content:"";position:fixed;top:0;bottom:0;width:10px;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,rgba(57,255,20,.22) 0 10px,rgba(57,255,20,0) 10px 34px);box-shadow:inset 0 0 0 1px rgba(57,255,20,.28),0 0 22px rgba(57,255,20,.10);animation:filmRise 12s linear infinite;opacity:.75;mix-blend-mode:screen}
body::before{left:0}body::after{right:0}
@keyframes filmRise{from{background-position:0 0}to{background-position:0 -240px}}

#rtc-page{position:relative;isolation:isolate;height:100vh;height:100dvh;padding:calc(8px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom));overflow:hidden}
.wrap{max-width:980px;margin:0 auto;display:grid;gap:10px;position:relative;z-index:2;height:100%;grid-template-rows:auto minmax(0,1fr) auto}

.topbar{position:sticky;top:0;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;border:1.5px solid var(--ring);border-radius:14px;padding:10px 12px;background:linear-gradient(180deg,var(--soft),rgba(57,255,20,.03));box-shadow:0 0 40px rgba(57,255,20,.12);z-index:8}
.menu-hitbox{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:56px;height:44px;border:0;background:transparent;z-index:99;-webkit-tap-highlight-color:transparent}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--neon);appearance:none;background:transparent;border:1.5px solid var(--ring)}
.icon-btn svg{width:22px;height:22px}
.brand{text-align:center;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--neon);text-shadow:0 0 18px rgba(57,255,20,.35)}
.brand a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.rtc-brand-logo{
  display:block;
  width:auto;
  height:clamp(44px,7vw,56px);
  max-width:min(260px,34vw);
  aspect-ratio:890 / 415;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(57,255,20,.25));
}
.topbar .spacer{display:none}

main.panel{border:1.5px solid var(--ring);border-radius:18px;padding:22px 16px;background:linear-gradient(180deg,rgba(57,255,20,.11),rgba(57,255,20,.03));box-shadow:0 0 30px rgba(57,255,20,.18),0 0 8px rgba(57,255,20,.25) inset;overflow:auto;min-height:0}
.panel h1{margin:0 0 8px;text-align:center;color:var(--neon);font-size:clamp(1.6rem,8vw,2.4rem)}
.panel p{margin:0 auto;text-align:center;color:#b5ffb5;max-width:56ch}
.cards{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.card{border:1px solid var(--edge);border-radius:12px;padding:12px;background:linear-gradient(180deg,rgba(57,255,20,.08),rgba(57,255,20,.02));min-height:94px;display:grid;place-items:center;text-align:center}

.dock{position:sticky;bottom:0;border:1.5px solid var(--ring);border-radius:18px;padding:8px 10px;background:linear-gradient(180deg,var(--soft),rgba(57,255,20,.03));display:grid;grid-template-columns:repeat(4,1fr);gap:6px;box-shadow:0 0 40px rgba(57,255,20,.12);z-index:8}
.dock a{display:grid;justify-items:center;gap:4px;padding:8px 6px;text-decoration:none;color:var(--ink);border-radius:12px;border:1px solid transparent;font-size:.9rem}
.dock svg{width:22px;height:22px;color:var(--neon);filter:drop-shadow(0 0 6px rgba(57,255,20,.35))}
#rtc-page[data-page="home"] .dock a[data-tab="home"],
#rtc-page[data-page="explore"] .dock a[data-tab="explore"],
#rtc-page[data-page="god"] .dock a[data-tab="god"],
#rtc-page[data-page="social"] .dock a[data-tab="social"],
#rtc-page[data-page="contact"] .dock a[data-tab="contact"]{border-color:var(--neon);background:rgba(57,255,20,.06)}

.quick-sheet{position:fixed;inset:0 auto 0 0;width:min(70vw,320px);transform:translateX(-102%);background:linear-gradient(180deg,rgba(6,20,11,.95),rgba(2,10,6,.96) 50%,rgba(0,0,0,.98));border-right:1px solid var(--edge);backdrop-filter:blur(4px);box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 0 32px rgba(57,255,20,.18),0 18px 40px rgba(0,0,0,.6);padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));z-index:60;transition:transform .25s ease;overflow:auto}
.quick-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;margin-bottom:8px;background:linear-gradient(180deg,rgba(6,20,11,1),rgba(6,20,11,.85));border-bottom:1px solid var(--edge)}
.quick-title{font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--neon)}
.quick-close{width:38px;height:38px;border-radius:10px;border:1px solid var(--edge);background:transparent;color:var(--ink)}
.quick-sheet a{display:block;color:var(--ink);font-weight:800;padding:12px;margin:8px 0;text-decoration:none;border:1px solid var(--edge);border-radius:12px;background:linear-gradient(180deg,rgba(57,255,20,.10),rgba(57,255,20,.03))}
.quick-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s linear;z-index:59}
body[data-menu="open"] .quick-sheet{transform:translateX(0)}
body[data-menu="open"] .quick-scrim{opacity:1;pointer-events:auto}

@media (min-width:1024px){
  .rtc-brand-logo{
    width:auto;
    height:clamp(56px,7vw,96px);
    max-width:min(460px,28vw);
  }
}

.card-section{
  margin-top:clamp(18px,4vw,28px);
}
.card-section h2{
  margin:0 0 10px;
  color:var(--ink);
  font-size:clamp(1rem,4.5vw,1.35rem);
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(57,255,20,.28);
}
.card,
.card:visited{
  color:var(--ink);
  text-decoration:none;
}
.card:focus-visible,
.icon-btn:focus-visible,
.quick-close:focus-visible,
.quick-sheet a:focus-visible,
.dock a:focus-visible{
  outline:3px solid var(--neon);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(255,111,0,.22),0 0 24px rgba(57,255,20,.36);
}
.image-cards{
  align-items:stretch;
}
.image-card{
  position:relative;
  display:flex;
  min-height:0;
  overflow:hidden;
  padding:0;
  place-items:initial;
  border:1px solid rgba(57,255,20,.45);
  background:linear-gradient(145deg,rgba(57,255,20,.12),rgba(255,111,0,.06) 48%,rgba(57,255,20,.035));
  box-shadow:0 0 18px rgba(57,255,20,.12),0 0 0 1px rgba(255,111,0,.08) inset;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.image-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 44%,rgba(0,0,0,.76));
}
.image-card img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:11px;
  filter:saturate(1.08) contrast(1.05);
}
.image-card .card-body{
  position:absolute;
  inset:auto 0 0;
  z-index:1;
  display:grid;
  gap:4px;
  padding:18px 14px 14px;
  text-align:left;
}
.card-title{
  color:#fff;
  font-weight:900;
  letter-spacing:.03em;
  text-shadow:0 0 12px rgba(57,255,20,.45),0 2px 10px rgba(0,0,0,.85);
}
.card-copy{
  color:rgba(234,255,234,.84);
  font-size:.9rem;
  line-height:1.35;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}
.business-card{
  margin:18px auto 0;
  max-width:320px;
  min-height:64px;
  border-color:rgba(255,111,0,.42);
  box-shadow:0 0 20px rgba(255,111,0,.10);
}
@media (hover:hover){
  .image-card:hover{
    transform:translateY(-2px);
    border-color:var(--neon);
    box-shadow:0 0 24px rgba(57,255,20,.26),0 0 18px rgba(255,111,0,.16) inset;
  }
}
@media (min-width:720px){
  .cards{
    gap:14px;
  }
  .image-card .card-body{
    padding:24px 18px 18px;
  }
}