:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted-2: rgba(255,255,255,.58);

  --brand: #7aa7ff;
  --brand-2: #6df0ff;
  --accent: #ffd86b;
  --danger: #ff6b6b;

  --shadow-lg: 0 22px 60px rgba(0,0,0,.35);
  --shadow-md: 0 14px 30px rgba(0,0,0,.30);
  --shadow-sm: 0 10px 18px rgba(0,0,0,.22);

  --radius-xl: 24px;
  --radius-lg: 18px;

  --maxw: 1200px;
  --ease: cubic-bezier(.2,.9,.2,1);
  --hero-h: 100dvh;
}

@supports not (height: 100dvh) {
  :root { --hero-h: 100vh; }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ width:100%; overflow-x:hidden; scroll-behavior:smooth; }
body{
  min-height: 100dvh;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(122,167,255,.25), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(109,240,255,.18), transparent 55%),
    radial-gradient(1000px 800px at 50% 90%, rgba(255,216,107,.14), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #070a14 60%, #070a14 100%);
}

::selection{ background: rgba(122,167,255,.35); }

*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(122,167,255,.65), rgba(109,240,255,.55));
  border-radius: 999px;
}
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }

a{ color: inherit; }

.fade-in-up{
  opacity: 0;
  transform: translateY(26px) scale(.98);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
  filter: blur(6px);
}
.fade-in-up.visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .fade-in-up{ opacity:1; transform:none; filter:none; }
}


.nav-bar{
  position: sticky;
  top: 0;
  z-index: 999;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 14px 22px;
  background: rgba(10,14,28,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .38s var(--ease), opacity .38s var(--ease);
}
.nav-bar.hide{ transform: translateY(-110%); opacity: 0; }
.nav-bar.show{ transform: translateY(0); opacity: 1; }

.nav-left{ display:flex; align-items:center; gap: 16px; min-width:0; }

.ungway{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 22px;
  text-decoration:none;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(122,167,255,.22), rgba(109,240,255,.16));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ungway:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); box-shadow: 0 18px 40px rgba(0,0,0,.34); }

.nav-links{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.nav-links a{
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }

.mobile-menu-btn{
  display:none;
  flex-direction: column;
  justify-content:center;
  gap: 6px;
  width: 34px;
  height: 34px;
  cursor:pointer;
  z-index: 1200;
  transition: transform .25s var(--ease);
}
.mobile-menu-btn span{
  height: 3px; width:100%;
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  transition: .35s var(--ease);
  transform-origin:center;
}
@media (max-width: 900px){
  .mobile-menu-btn{ display:flex; }
  .nav-links{ display:none; }
}
.mobile-menu-btn.active{ transform: rotate(-2deg); }
.mobile-menu-btn.active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2){ opacity: 0; transform: scaleX(.7); }
.mobile-menu-btn.active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.mobile-menu-overlay{
  position: fixed; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  opacity:0;
  pointer-events:none;
  transition: opacity .32s var(--ease);
  z-index: 1100;
}
.mobile-menu-overlay.active{ opacity:1; pointer-events:all; }

.mobile-menu{
  position: fixed;
  top: 0; right: -320px;
  width: 300px; height: 100%;
  padding: 96px 22px 22px;
  display:flex; flex-direction: column; gap: 14px;
  background: rgba(15,23,48,.78);
  border-left: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  box-shadow: -18px 0 70px rgba(0,0,0,.45);
  transition: right .42s var(--ease), opacity .42s var(--ease);
  opacity: 0;
  z-index: 1150;
}
.mobile-menu.active{ right:0; opacity:1; }
.mobile-menu a{
  font-size: 18px;
  font-weight: 700;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  transform: translateX(18px);
  opacity: 0;
  transition: transform .35s var(--ease), opacity .35s var(--ease), background .2s var(--ease);
}
.mobile-menu.active a{ transform: translateX(0); opacity: 1; }
.mobile-menu a:hover{ background: rgba(255,255,255,.12); }


.main-photo{
  position: relative;
  width: 100%;
  height: var(--hero-h);
  min-height: -webkit-fill-available;
  overflow: hidden;
  isolation: isolate;
}
.main-photo img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.1) contrast(1.05);
  animation: hero-zoom 16s var(--ease) infinite alternate;
}
@keyframes hero-zoom{
  from{ transform: scale(1.04) translateY(0); }
  to{ transform: scale(1.10) translateY(8px); }
}
.main-photo .overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(900px 600px at 30% 40%, rgba(122,167,255,.35), transparent 60%),
    radial-gradient(700px 520px at 80% 30%, rgba(109,240,255,.25), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.72) 100%);
}

.hero-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction: column;
  justify-content:center; align-items:center;
  text-align:center;
  gap: 14px;
  padding: 0 18px;
}
.hero-content h1{
  font-size: clamp(34px, 7vw, 72px);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.05;
  background: linear-gradient(90deg, #ffffff 0%, rgba(122,167,255,.98) 35%, rgba(109,240,255,.96) 70%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 14px 50px rgba(0,0,0,.35);
}
.hero-content .p1,
.hero-content .p2{
  max-width: 820px;
  font-size: clamp(14px, 2.1vw, 20px);
  font-weight: 600;
  color: rgba(255,255,255,.86);
}
.hero-content .p2{ color: rgba(255,255,255,.78); font-weight: 550; }

.hero-content .join-us-btn,
.hero-content .learn-more-btn,
.join-btn, .donate-btn,
.newsletter-form button{
  border:none;
  cursor:pointer;
  font-weight: 800;
  border-radius: 14px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.hero-content .join-us-btn{
  margin-top: 10px;
  padding: 14px 42px;
  color: #0b1020;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,.40);
}
.hero-content .join-us-btn:hover{ transform: translateY(-2px); box-shadow: 0 24px 60px rgba(0,0,0,.52); }
.hero-content .learn-more-btn{
  padding: 14px 28px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.hero-content .learn-more-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }


.about-gallery-wrapper{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 54px 18px;
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  align-items:start;
}
@media (max-width: 980px){
  .about-gallery-wrapper{ grid-template-columns: 1fr; gap: 22px; padding-top: 34px; }
}

.info-panel{
  border-radius: var(--radius-xl);
  padding: 18px;
  background: rgba(255,216,107,.14);
  border: 1px solid rgba(255,216,107,.20);
  box-shadow: var(--shadow-md);
}
.accordion-item{
  border-radius: 16px;
  overflow:hidden;
  background: rgba(10,14,28,.58);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  margin-bottom: 12px;
}
.accordion-btn{
  width:100%;
  background: transparent;
  border:none;
  padding: 14px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.accordion-btn::before{
  content:"▸";
  font-size: 14px;
  opacity:.85;
  transition: transform .25s var(--ease);
}
.accordion-btn.active::before{ transform: rotate(90deg); }

.accordion-content{
  max-height: 0;
  overflow:hidden;
  padding: 0 14px;
  transition: max-height .35s var(--ease);
}
.accordion-content p{
  padding: 10px 0 12px;
  color: rgba(255,255,255,.80);
  font-size: 14px;
  line-height: 1.5;
}

.social-icons{
  display:flex;
  gap: 10px;
  padding: 0 0 14px;
}
.social-icons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px; height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.social-icons a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); }
.social-icons img{ width: 20px; height: 20px; }

.gallery-title{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .4px;
  margin: 6px 0 16px;
}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .gallery-title{ text-align:center; }
  .gallery-grid{ grid-template-columns: 1fr; }
}
.gallery-card{
  border-radius: var(--radius-xl);
  overflow:hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.gallery-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(255,255,255,.18); }
.gallery-image{ height: 220px; overflow:hidden; background: rgba(0,0,0,.18); }
.gallery-image img{ width:100%; height:100%; object-fit: cover; transform: scale(1.02); transition: transform .5s var(--ease); }
.gallery-card:hover .gallery-image img{ transform: scale(1.10); }
.gallery-info{ padding: 14px 14px 16px; display:flex; flex-direction: column; gap: 8px; }
.gallery-title-text{ font-size: 15px; font-weight: 900; }
.gallery-date{ font-size: 12px; color: rgba(255,255,255,.62); }
.gallery-desc{ font-size: 13px; color: rgba(255,255,255,.74); line-height: 1.45; }


.events-section{
  width: 100%;
  margin-top: 12px;
  padding: 64px 18px;
  text-align:center;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.events-section h2{
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 950;
  margin-bottom: 18px;
}

.event-filters{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 22px;
}
.filter-btn{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  font-weight: 800;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.filter-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.filter-btn.active{
  background: linear-gradient(90deg, rgba(122,167,255,.30), rgba(109,240,255,.22));
  border-color: rgba(255,255,255,.20);
}

.events-grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  gap: 16px;
  justify-items:center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px){ .events-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px){ .events-grid{ grid-template-columns: 1fr; } }

.event-card{
  width: 100%;
  max-width: 380px;
  height: 490px;
  display:flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow:hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease), filter .25s var(--ease),
              opacity .22s var(--ease);
}
.event-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(255,255,255,.18); }

.event-card > img{
  width:100%;
  height: 190px;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .55s var(--ease), filter .55s var(--ease);
  filter: saturate(1.08);
}
.event-card:hover > img{ transform: scale(1.08); filter: saturate(1.18); }

.event-content{ padding: 14px 14px 16px; display:flex; flex-direction: column; gap: 8px; flex: 1; }

.event-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.event-status::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}
.event-status.upcoming{ border-color: rgba(109,240,255,.28); }
.event-status.upcoming::before{ background: #49ffdf; }
.event-status.now{ border-color: rgba(255,216,107,.32); }
.event-status.now::before{ background: #ffd86b; }
.event-status.past{ border-color: rgba(255,107,107,.26); }
.event-status.past::before{ background: #ff6b6b; }

.event-date{ font-size: 12px; color: rgba(255,255,255,.65); }
.event-title{ font-size: 16px; font-weight: 950; }
.event-location{ font-size: 13px; color: rgba(255,255,255,.74); }

.event-tags{ display:flex; flex-wrap:wrap; gap: 8px; }
.event-tags span{
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}

.event-desc{
  margin-top: 4px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.45;
  overflow:hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  flex-grow: 1;
}

.event-card.is-hiding{
  opacity: 0;
  transform: translateY(8px) scale(.98);
  filter: blur(6px);
}
.event-card.is-hidden{ display:none !important; }
.event-card.is-showing{ animation: card-in .32s var(--ease) both; }
@keyframes card-in{
  from{ opacity:0; transform: translateY(10px) scale(.985); filter: blur(6px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}


.cta-section{
  max-width: var(--maxw);
  margin: 54px auto 0;
  padding: 54px 18px 60px;
  text-align:center;
  border-radius: 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-md);
}
.cta-section h2{ font-size: clamp(26px, 4vw, 36px); font-weight: 950; margin-bottom: 10px; }
.cta-section p{ color: rgba(255,255,255,.78); font-size: clamp(14px, 2vw, 18px); font-weight: 600; margin-bottom: 22px; }

.cta-buttons{ display:flex; justify-content:center; gap: 12px; flex-wrap:wrap; margin-bottom: 18px; }

.join-btn{
  padding: 13px 18px;
  color: #0b1020;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}
.join-btn:hover{ transform: translateY(-2px); box-shadow: 0 26px 60px rgba(0,0,0,.52); }
.donate-btn{
  padding: 13px 18px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
}
.donate-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }

.newsletter-form{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.newsletter-form input{
  width: min(420px, 92vw);
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  outline:none;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,.55); }

.newsletter-form button{
  padding: 14px 18px;
  color: #0b1020;
  background: linear-gradient(90deg, rgba(255,216,107,.95), rgba(255,172,82,.92));
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}
.newsletter-form button:hover{ transform: translateY(-2px); box-shadow: 0 26px 60px rgba(0,0,0,.52); }

.newsletter-message{
  margin-top: 10px;
  font-size: .95rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  color: rgba(255,255,255,.74);
}
.newsletter-message--success{ opacity:1; transform: translateY(0); color: rgba(109,240,255,.95); }
.newsletter-message--error{ opacity:1; transform: translateY(0); color: rgba(255,107,107,.95); }


.stats-section{
  max-width: var(--maxw);
  margin: 34px auto 64px;
  padding: 34px 18px 64px;
  text-align:center;
}
.stats-section h2{ font-size: clamp(22px, 3vw, 30px); font-weight: 950; margin-bottom: 18px; }

.stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  align-items:center;
  justify-items:center;
}
.partner-logo{
  width: 100%;
  max-width: 220px;
  height: 120px;
  border-radius: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.partner-logo:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(255,255,255,.18); }
.partner-logo img{ max-width: 80%; max-height: 70%; object-fit: contain; }


body[data-bg="aurora"]{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(122,167,255,.25), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(109,240,255,.18), transparent 55%),
    radial-gradient(1000px 800px at 50% 90%, rgba(255,216,107,.14), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #070a14 60%, #070a14 100%) !important;
}

body[data-bg="midnight"]{
  background:
    radial-gradient(900px 650px at 25% 10%, rgba(120,120,255,.16), transparent 60%),
    radial-gradient(900px 600px at 75% 20%, rgba(0,255,210,.10), transparent 58%),
    linear-gradient(180deg, #050612 0%, #070819 50%, #02020a 100%) !important;
}

body[data-bg="sunset"]{
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(255,120,120,.20), transparent 60%),
    radial-gradient(900px 650px at 85% 20%, rgba(255,216,107,.18), transparent 55%),
    radial-gradient(900px 700px at 50% 90%, rgba(122,167,255,.14), transparent 60%),
    linear-gradient(180deg, #140a14 0%, #0b0a14 55%, #070a14 100%) !important;
}

body[data-bg="fjord"]{
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(109,240,255,.20), transparent 60%),
    radial-gradient(1000px 700px at 85% 15%, rgba(122,167,255,.18), transparent 58%),
    radial-gradient(900px 700px at 50% 95%, rgba(80,255,150,.10), transparent 60%),
    linear-gradient(180deg, #071421 0%, #06101b 60%, #050a12 100%) !important;
}


.bg-switcher{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(0,0,0,.40);
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.bg-switcher:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
}

.bg-panel{
  position: fixed;
  right: 16px;
  bottom: 78px;
  z-index: 2000;
  width: 240px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(15,23,48,.78);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  transform: translateY(10px);
  opacity: 0;
  pointer-events:none;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.bg-panel.active{
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.bg-panel-title{
  font-weight: 950;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
}
.bg-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.bg-option{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  cursor:pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.bg-option:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}
.bg-option.active{
  border-color: rgba(109,240,255,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
}

.bg-swatch{ height: 48px; }
.bg-name{
  padding: 10px 10px 11px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.86);
}

.bg-swatch.aurora{
  background:
    radial-gradient(80px 40px at 20% 20%, rgba(109,240,255,.7), transparent 60%),
    radial-gradient(90px 50px at 80% 30%, rgba(122,167,255,.7), transparent 60%),
    linear-gradient(135deg, #0b1020, #071322);
}
.bg-swatch.midnight{
  background:
    radial-gradient(80px 40px at 30% 20%, rgba(120,120,255,.7), transparent 60%),
    linear-gradient(135deg, #050612, #02020a);
}
.bg-swatch.sunset{
  background:
    radial-gradient(90px 50px at 30% 20%, rgba(255,120,120,.8), transparent 60%),
    radial-gradient(90px 50px at 70% 25%, rgba(255,216,107,.75), transparent 60%),
    linear-gradient(135deg, #140a14, #070a14);
}
.bg-swatch.fjord{
  background:
    radial-gradient(90px 50px at 30% 20%, rgba(109,240,255,.75), transparent 60%),
    radial-gradient(90px 50px at 70% 30%, rgba(80,255,150,.45), transparent 60%),
    linear-gradient(135deg, #071421, #050a12);
}

@media (max-width: 600px){
  .nav-bar{ padding: 12px 14px; }
  .ungway{ font-size: 20px; }
  .cta-section{ border-radius: 22px; }
  .event-card{ height: 510px; }
}