@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

#site-scale { transform: scale(1.4); transform-origin: top left; width: 71.43%; }

/* Fix landscape orientation scaling issues on mobile */
@media (max-width: 1024px) and (orientation: landscape) {
  #site-scale {
    transform: none;
    width: auto;
  }
}
header { position: relative; z-index: 1000; }
.global-menu-dropdown { position: fixed; top: 80px; right: 20px; z-index: 99999999; }
.hero-watermark, .banner, .hero { position: relative; z-index: 1; overflow: visible; }

:root{
  --bg:#0e0f12;--card:#15181e;--muted:#8892a1;--text:#f4f6fa;
  --accent:#7df9ff;--accent-2:#ff4d9d;--ring:rgba(125,249,255,.35);
  --radius:16px;--gap:18px;--shadow:0 8px 30px rgba(0,0,0,.35);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial
}
*{box-sizing:border-box}
html,body{height:100%}
html { zoom: 1; }


body{margin:0;font-family:var(--font);
  background:radial-gradient(1200px 800px at 50% -10%,rgba(125,249,255,.06),transparent),var(--bg);
  color:var(--text);
  transition: background 0.5s ease-in-out;
}

/* Smooth background transition for main content areas only */
main {
  background: radial-gradient(1200px 800px at 50% -10%,rgba(125,249,255,.06),transparent),var(--bg);
  transition: background 0.5s ease-in-out;
}


header {
  position: relative;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, #0c0d10 0%, #1a1b1f 30%, #0f0f14 70%, #0c0d10 100%);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(125, 249, 255, 0.4);
  box-shadow: 0 2px 12px rgba(125, 249, 255, 0.15);
  overflow: visible;
  min-height: 120px;
  padding: 25px 0;
}

header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(1px 1px at 20px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 40px 35px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 60px 20px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 80px 40px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 100px 15px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 120px 30px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 140px 10px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 160px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 180px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 200px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 220px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 240px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 260px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 280px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 300px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 320px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 340px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 360px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 380px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 400px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 420px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 440px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 460px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 480px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 500px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 520px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 540px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 560px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 580px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 600px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 620px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 640px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 660px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 680px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 700px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 720px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 740px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 760px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 780px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 800px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 820px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 840px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 860px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 880px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 900px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 920px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 940px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 960px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 980px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1000px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1020px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1040px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1060px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1080px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1100px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1120px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1140px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1160px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1180px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1200px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1220px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1240px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1260px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1280px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1300px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1320px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1340px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1360px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1380px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1400px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1420px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1440px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1460px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1480px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1500px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1520px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1540px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1560px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1580px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1600px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1620px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1640px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1660px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1680px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1700px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1720px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1740px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1760px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1780px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1800px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1820px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1840px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1860px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1880px 40px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1900px 20px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1920px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    /* Additional particles for better vertical coverage */
    radial-gradient(1px 1px at 50px 60px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 150px 70px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 250px 65px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 350px 75px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 450px 55px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 550px 80px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 650px 70px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 750px 60px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 850px 75px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 950px 65px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1050px 80px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1150px 70px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1250px 60px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1350px 75px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1450px 65px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1550px 80px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1650px 70px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1750px 60px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1850px 75px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1950px 65px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    /* Additional particles for full header height coverage */
    radial-gradient(1px 1px at 100px 85px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 200px 90px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 300px 95px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 400px 88px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 500px 92px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 600px 87px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 700px 93px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 800px 89px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 900px 94px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1000px 86px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1100px 91px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1200px 88px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1300px 93px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1400px 87px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1500px 92px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1600px 89px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1700px 94px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1800px 86px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1900px 91px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    /* Even more particles for dense bottom coverage */
    radial-gradient(1px 1px at 75px 96px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 125px 98px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 175px 97px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 225px 99px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 275px 96px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 325px 98px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 375px 97px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 425px 99px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 475px 96px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 525px 98px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 575px 97px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 625px 99px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 675px 96px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 725px 98px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 775px 97px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 825px 99px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 875px 96px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 925px 98px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 975px 97px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1025px 99px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1075px 96px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1125px 98px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1175px 97px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1225px 99px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1275px 96px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1325px 98px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1375px 97px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1425px 99px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1475px 96px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1525px 98px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1575px 97px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1625px 99px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1675px 96px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1725px 98px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1775px 97px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1825px 99px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1875px 96px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1925px 98px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1975px 97px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent);
  opacity: 1.0;
  animation: headerParticleFloat 25s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(125, 249, 255, 1.0)) drop-shadow(0 0 20px rgba(125, 249, 255, 0.8)) drop-shadow(0 0 30px rgba(125, 249, 255, 0.6));
}

header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(1px 1px at 30px 25px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 50px 10px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 70px 35px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 90px 20px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 110px 40px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 130px 15px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 150px 30px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 170px 45px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 190px 30px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 210px 15px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 230px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 250px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 270px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 290px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 310px 20px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 330px 45px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 350px 30px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 370px 15px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 390px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 410px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 430px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 450px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 470px 20px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 490px 45px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 510px 30px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 530px 15px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 550px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 570px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 590px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 610px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 630px 20px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 650px 45px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 670px 30px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 690px 15px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 710px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 730px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 750px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 770px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 790px 20px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 810px 45px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 830px 30px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 850px 15px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 870px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 890px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 910px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 930px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 950px 20px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 970px 45px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 990px 30px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1010px 15px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1030px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1050px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1070px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1090px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1110px 20px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1130px 45px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1150px 30px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1170px 15px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1190px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1210px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1230px 10px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1250px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1270px 20px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1290px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1310px 15px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1330px 30px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1350px 40px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1370px 25px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1390px 10px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1410px 35px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1430px 20px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1450px 45px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1470px 15px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1490px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1510px 40px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1530px 25px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1550px 10px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1570px 35px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1590px 20px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1610px 45px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1630px 15px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1650px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1670px 40px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1690px 25px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1710px 10px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1730px 35px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1750px 20px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1770px 45px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1790px 15px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1810px 30px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1830px 40px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1850px 25px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1870px 10px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1890px 35px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1910px 20px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1930px 45px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1950px 15px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1970px 30px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1990px 40px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent);
  opacity: 1.0;
  animation: headerParticleFloat2 28s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 77, 157, 1.0)) drop-shadow(0 0 20px rgba(255, 77, 157, 0.8)) drop-shadow(0 0 30px rgba(255, 77, 157, 0.6));
}



/* Eighth particle layer - maximum density coverage */
header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    /* Ultra dense left coverage */
    radial-gradient(1px 1px at 15px 8px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 45px 16px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 85px 24px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 135px 32px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 185px 40px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 235px 48px, rgba(255, 77, 157, 0.8), rgba(255, 77, 157, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 285px 56px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 335px 64px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 385px 72px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 435px 80px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 485px 88px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 535px 96px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    /* Ultra dense right coverage */
    radial-gradient(1px 1px at 585px 8px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 635px 16px, rgba(255, 77, 157, 0.8), rgba(255, 77, 157, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 685px 24px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 735px 32px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 785px 40px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 835px 48px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 885px 56px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 935px 64px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 985px 72px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 1035px 80px, rgba(255, 77, 157, 0.8), rgba(255, 77, 157, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 1085px 88px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1135px 96px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    /* Ultra dense center coverage */
    radial-gradient(1px 1px at 1185px 8px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 1235px 16px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 1285px 24px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1335px 32px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 1385px 40px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 1435px 48px, rgba(255, 77, 157, 0.8), rgba(255, 77, 157, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 1485px 56px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1535px 64px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 1585px 72px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 1635px 80px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 1685px 88px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1735px 96px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 1785px 8px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 1835px 16px, rgba(255, 77, 157, 0.8), rgba(255, 77, 157, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 1885px 24px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1935px 32px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 1985px 40px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    /* Extended right coverage for menu button area */
    radial-gradient(1px 1px at 2000px 15px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2020px 25px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2040px 35px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2060px 45px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2080px 55px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2100px 65px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2120px 75px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2140px 85px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2160px 95px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2180px 5px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2200px 15px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2220px 25px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2240px 35px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2260px 45px, rgba(147, 51, 234, 0.9), rgba(147, 51, 234, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2280px 55px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2300px 65px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2320px 75px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2340px 85px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2360px 95px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2380px 5px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2400px 15px, rgba(255, 77, 157, 0.9), rgba(255, 77, 157, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2420px 25px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2440px 35px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2460px 45px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2480px 55px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2500px 65px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2520px 75px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2540px 85px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2560px 95px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2580px 5px, rgba(147, 51, 234, 0.9), rgba(147, 51, 234, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2600px 15px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2620px 25px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2640px 35px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2660px 45px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2680px 55px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2700px 65px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2720px 75px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2740px 85px, rgba(147, 51, 234, 0.9), rgba(147, 51, 234, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2760px 95px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2780px 5px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2800px 15px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2820px 25px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2840px 35px, rgba(255, 215, 0, 0.9), rgba(255, 215, 0, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2860px 45px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2880px 55px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2900px 65px, rgba(147, 51, 234, 0.9), rgba(147, 51, 234, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2920px 75px, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 2940px 85px, rgba(125, 249, 255, 0.9), rgba(125, 249, 255, 0.35) 50%, transparent),
    radial-gradient(1px 1px at 2960px 95px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 2980px 5px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.3) 50%, transparent),
    radial-gradient(1px 1px at 3000px 15px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.3) 50%, transparent);
  opacity: 1.0;
  animation: headerParticleFloat7 26s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(125, 249, 255, 1.0)) drop-shadow(0 0 20px rgba(125, 249, 255, 0.8)) drop-shadow(0 0 30px rgba(125, 249, 255, 0.6));
}



/* Fourth particle layer - evenly distributed across full header height */
header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    /* Top section particles (10-30px) */
    radial-gradient(1px 1px at 100px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 300px 20px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 500px 25px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 700px 18px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 900px 22px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1100px 28px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1300px 12px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1500px 26px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1700px 16px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1900px 24px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    /* Upper middle section particles (35-55px) */
    radial-gradient(1px 1px at 150px 38px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 350px 42px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 550px 45px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 750px 40px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 950px 48px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1150px 35px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1350px 52px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1550px 37px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1750px 50px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1950px 43px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    /* Lower middle section particles (60-80px) */
    radial-gradient(1px 1px at 200px 62px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 400px 68px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 600px 75px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 800px 65px, rgba(255, 215, 0, 0.7), rgba(255, 215, 0, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1000px 72px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1200px 78px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 1400px 63px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.25) 50%, transparent),
    radial-gradient(1px 1px at 1600px 70px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 1800px 77px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.15) 50%, transparent),
    radial-gradient(1px 1px at 2000px 69px, rgba(255, 77, 157, 0.7), rgba(255, 77, 157, 0.25) 50%, transparent);
  opacity: 1.0;
  animation: headerParticleFloat4 35s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 77, 157, 1.0)) drop-shadow(0 0 20px rgba(255, 77, 157, 0.8)) drop-shadow(0 0 30px rgba(255, 77, 157, 0.6));
}

@keyframes headerParticleFloat {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(5px, -4px); }
  40% { transform: translate(-2px, -5px); }
  60% { transform: translate(4px, 2px); }
  80% { transform: translate(-3px, 4px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes headerParticleFloat2 {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(-4px, 5px); }
  50% { transform: translate(2px, 4px); }
  75% { transform: translate(-2px, -2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes headerParticleFloat3 {
  0% { transform: translate(0px, 0px); }
  30% { transform: translate(4px, -2px); }
  60% { transform: translate(-2px, -4px); }
  90% { transform: translate(2px, 2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes headerParticleFloat4 {
  0% { transform: translate(0px, 0px); }
  33% { transform: translate(-3px, 4px); }
  66% { transform: translate(4px, -2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes headerParticleFloat5 {
  0% { transform: translate(0px, 0px); }
  40% { transform: translate(3px, -4px); }
  80% { transform: translate(-4px, 2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes headerParticleFloat6 {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(3px, -3px); }
  75% { transform: translate(-2px, -2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes headerParticleFloat7 {
  0% { transform: translate(0px, 0px); }
  35% { transform: translate(3px, 4px); }
  70% { transform: translate(-2px, -3px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes headerParticleFloat8 {
  0% { transform: translate(0px, 0px); }
  50% { transform: translate(-3px, -4px); }
  100% { transform: translate(0px, 0px); }
}


.wrap{margin:0 auto;padding:14px 20px;position:relative;z-index:2}
.row{display:flex;align-items:center;position:relative;z-index:2;padding:2px 0}













/* Legacy logo styles for backward compatibility */
.logo{display:flex;align-items:center;gap:16px;justify-content:center;margin:4px auto;text-decoration:none;color:inherit;transition:all .3s ease;position:relative;z-index:2}
.logo:hover{transform:scale(1.02);opacity:.9}
.logo h1{
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 5vw, 32px);
  letter-spacing: 0.06em;
  margin: 0 0 0 22px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 
    0 0 3px rgba(255, 255, 255, 0.4),
    0 0 6px rgba(143, 211, 255, 0.5),
    0 0 12px rgba(61, 158, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
  .logo h1 {
    text-shadow: 
      0 0 2px rgba(255, 255, 255, 0.3),
      0 0 4px rgba(143, 211, 255, 0.4),
      0 0 8px rgba(61, 158, 255, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.25);
  }
}

/* Responsive mascot sizing */
@media (min-width: 1024px) {
  .mascot-image {
    height: 52px !important;
    width: auto !important;
    box-shadow: 0 0 10px rgba(158,197,255,.12);
    background: transparent !important;
    border: none !important;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .mascot-image {
    height: 46px !important;
    width: auto !important;
    box-shadow: 0 0 10px rgba(158,197,255,.12);
    background: transparent !important;
    border: none !important;
  }
}

@media (max-width: 767px) {
  /* Make header title bigger on mobile */
  header .site-title {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
  }
  
  header .site-title-link {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
  }
  
  /* Make mascot smaller on mobile but keep in header */
  header .mark {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    background: none !important;
    box-shadow: none !important;
  }
  
  header .mark img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }
  
  /* Position mascot below banner, above search bar */
  .mobile-mascot-container {
    display: block !important;
    text-align: center !important;
    margin: 20px auto 16px auto !important;
  }
  
  .mascot-image {
    display: block !important;
    height: 32px !important;
    width: 32px !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 0 12px rgba(125, 249, 255, 0.8)) drop-shadow(0 0 20px rgba(147, 51, 234, 0.6)) drop-shadow(0 0 28px rgba(255, 77, 157, 0.4)) !important;
  }
}

/* Hide mobile mascot on desktop */
@media (min-width: 768px) {
  .mobile-mascot-container {
    display: none !important;
  }
}

/* New Header Styles */
.site-header {
  background: rgba(12, 13, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mascot-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(125, 249, 255, 0.8), rgba(147, 51, 234, 0.8), rgba(255, 77, 157, 0.8));
  display: grid;
  place-items: center;
  box-shadow: 0 0 20px rgba(125, 249, 255, 0.3), 0 0 40px rgba(147, 51, 234, 0.2);
}

.mascot-mark img {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.brand {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 0 20px rgba(125, 249, 255, 0.5);
}

.brand:hover {
  color: rgba(125, 249, 255, 1);
  text-shadow: 0 0 30px rgba(125, 249, 255, 0.8);
}



/* New Header Structure */
.site-header {
  position: relative;
  background: rgba(12, 13, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  position: relative;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.brand {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

.nav-desktop {
  display: flex;
  gap: 24px;
  align-items: center;
}

.nav-desktop a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.nav-desktop a:hover {
  color: rgba(125, 249, 255, 1);
  background: rgba(125, 249, 255, 0.1);
}

.nav-desktop a.active {
  color: rgba(125, 249, 255, 1);
  background: rgba(125, 249, 255, 0.15);
}

/* Mobile Menu Styles - Hidden by default on desktop */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}

.hamburger-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hamburger-btn:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.hamburger-btn svg {
  width: 28px;
  height: 28px;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(12, 13, 16, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-height: 200px;
}

.mobile-menu.show {
  display: block !important;
}

.mobile-menu a {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.mobile-menu a:last-child {
  margin-bottom: 0;
}

.mobile-menu a:hover {
  color: rgba(125, 249, 255, 1);
  background: rgba(125, 249, 255, 0.1);
}

.mobile-menu a.active {
  color: rgba(125, 249, 255, 1);
  background: rgba(125, 249, 255, 0.15);
}



/* Mobile Responsive */
@media (max-width: 767px) {
  .nav-desktop {
    display: none;
  }
  
  .hamburger-btn {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 12px;
    /* Move to far left on mobile */
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
  }
  
  .hamburger-btn svg {
    width: 28px;
    height: 28px;
  }
  
  /* Center the brand/title */
  .brand-container { 
    position: relative; 
    flex: 1 1 auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
  }
  .brand {
    font-size: 1.3rem;
    margin: 0 auto;
    text-align: center;
  }
  
  /* Move mascot to the right; override inline left positioning */
  .mark {
    width: 40px;
    height: 40px;
    background: none !important;
    box-shadow: none !important;
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1001;
  }
  
  .mark img {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 8px rgba(125, 249, 255, 0.4)) !important;
  }
}

/* Login Overlay Styles */
.login-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(12, 13, 16, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.login-container {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.login-header {
  margin-bottom: 32px;
}

.login-mascot {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  filter: drop-shadow(0 0 20px rgba(125, 249, 255, 0.6));
}

.login-header h2 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.login-header p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  text-align: left;
}

.form-group label {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #ffffff;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: rgba(125, 249, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(125, 249, 255, 0.1);
  background: rgba(255, 255, 255, 0.12);
}

.login-error {
  color: #ff6b6b;
  font-size: 0.9rem;
  text-align: center;
  padding: 12px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: 8px;
}

.login-btn {
  background: linear-gradient(135deg, rgba(125, 249, 255, 0.8), rgba(147, 51, 234, 0.8));
  color: #ffffff;
  border: none;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(125, 249, 255, 0.3);
}

.login-btn:active {
  transform: translateY(0);
}

/* Ensure main content is hidden when login overlay is active */
body:has(.login-overlay[style*="display: flex"]) #site-scale {
  display: none !important;
  visibility: hidden !important;
}

/* Force login overlay to be visible */
.login-overlay[style*="display: none"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.logo .mark{width:56px;height:56px;border-radius:12px;background:linear-gradient(145deg,rgba(125, 249, 255, 0.8),rgba(147, 51, 234, 0.8),rgba(255, 77, 157, 0.8));display:grid;place-items:center;box-shadow:0 0 20px rgba(125, 249, 255, 0.3),0 0 40px rgba(147, 51, 234, 0.2);position:relative}
.logo svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.lead{color:var(--muted);font-size:13px;margin:6px 0 0;text-align:center}
nav{display:flex;gap:10px;align-items:center}
@media (max-width: 640px) {
  nav{gap:6px}
  nav .pill{padding:6px 8px;font-size:12px}
}
.pill{border:1px solid rgba(255,255,255,.12);color:var(--text);background:transparent;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:all .3s ease}
.pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.pill.active{background:rgba(125,249,255,.1);border-color:var(--accent);box-shadow:0 0 0 3px var(--ring) inset}
main{margin:0 auto 80px;padding:0 20px}

/* Controls */
.controls{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:14px 0 8px}
input[type=search],input[type=text],input[type=number],input[type=url],textarea,select{
  width:100%;background:#0c0d10;color:var(--text);border:1px solid rgba(255,255,255,.12);
  padding:10px 12px;border-radius:12px;outline:none
}
.search-container {
  min-width: 200px;
  height: 42px;
}

.search {
  width: 100%;
  min-width: 200px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: #fff;
  outline: none;
  transition: all .3s ease;
  height: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  border-radius: 0;
}


.search-container:hover .search {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.search-container:focus-within .search {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(125,249,255,.15);
}

/* Responsive: Adjust for small screens */
@media (max-width: 480px) {
  .search {
    font-size: 0.85rem;
  }
}

.search:hover {
  background: rgba(255,255,255,.06);
}

.search:focus {
  background: rgba(255,255,255,.06);
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
/* Clean Frosted Glass Effect for category chips */
.chip{
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chip::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.3), 
    rgba(147, 51, 234, 0.3), 
    rgba(255, 77, 157, 0.3), 
    rgba(125, 249, 255, 0.3)
  );
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.chip:hover::before {
  opacity: 1;
  animation: glowPulse 3.5s ease-in-out infinite;
}

.chip:active::before,
.chip.active::before {
  opacity: 1;
  animation: none;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.5), 
    rgba(147, 51, 234, 0.5), 
    rgba(255, 77, 157, 0.5), 
    rgba(125, 249, 255, 0.5)
  );
  background-size: 100% 100%;
  background-position: 50% 50%;
  filter: blur(7px) 
          drop-shadow(0 0 16px rgba(255, 77, 157, 0.8)) 
          drop-shadow(0 0 32px rgba(255, 77, 157, 0.5)) 
          drop-shadow(0 0 48px rgba(255, 77, 157, 0.3));
}

.chip:hover{
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chip.active{background:rgba(125,249,255,.12);border-color:var(--accent)}
.tagline{
  margin: 0;
  margin-bottom: 18px;
  text-align: center;
  font-weight: 700;
  letter-spacing: .3px;
  opacity: .95;
  font-size: clamp(14px,2.5vw,18px);
  color: #fff;
  text-shadow: 0 0 6px rgba(125,249,255,.85), 0 0 18px rgba(255,77,157,.35);
  height: 120px;
  transition: opacity 1s ease-in-out;
  background: linear-gradient(135deg,rgba(125,249,255,.08),rgba(255,77,157,.08));
  border-top: 1px solid rgba(125,249,255,.15);
  border-bottom: 1px solid rgba(125,249,255,.15);
  padding: 0 20px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.tagline > span{max-width:500px;display:block;line-height:1.5;position:relative;z-index:2}

/* Natural Floating Particle Animation */
.tagline::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-image: 
    radial-gradient(1.5px 1.5px at 15px 25px, rgba(125, 249, 255, 0.8), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 35px 65px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(2px 2px at 75px 35px, rgba(147, 51, 234, 0.7), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 115px 75px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1.5px 1.5px at 155px 45px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 185px 85px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.1) 50%, transparent),
    radial-gradient(2px 2px at 225px 15px, rgba(147, 51, 234, 0.4), rgba(147, 51, 234, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 265px 55px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.1) 50%, transparent),
    radial-gradient(1.5px 1.5px at 305px 95px, rgba(125, 249, 255, 0.4), rgba(125, 249, 255, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 45px 105px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.1) 50%, transparent),
    radial-gradient(2px 2px at 125px 5px, rgba(147, 51, 234, 0.6), rgba(147, 51, 234, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 195px 115px, rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.1) 50%, transparent),
    radial-gradient(1.5px 1.5px at 275px 25px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 55px 45px, rgba(255, 77, 157, 0.4), rgba(255, 77, 157, 0.1) 50%, transparent),
    radial-gradient(2px 2px at 165px 105px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 215px 35px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.1) 50%, transparent);
  background-size: 320px 140px;
  animation: particleFloat1 35s linear infinite;
  opacity: 0.8;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(125, 249, 255, 0.6)) drop-shadow(0 0 8px rgba(125, 249, 255, 0.3));
}

.tagline::after {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-image: 
    radial-gradient(1px 1px at 25px 15px, rgba(125, 249, 255, 0.7), rgba(125, 249, 255, 0.2) 50%, transparent),
    radial-gradient(2px 2px at 65px 85px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 105px 25px, rgba(147, 51, 234, 0.8), rgba(147, 51, 234, 0.2) 50%, transparent),
    radial-gradient(1.5px 1.5px at 145px 95px, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.2) 50%, transparent),
    radial-gradient(1px 1px at 175px 55px, rgba(125, 249, 255, 0.6), rgba(125, 249, 255, 0.1) 50%, transparent),
    radial-gradient(2px 2px at 205px 5px, rgba(255, 77, 157, 0.5), rgba(255, 77, 157, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 245px 75px, rgba(147, 51, 234, 0.4), rgba(147, 51, 234, 0.1) 50%, transparent),
    radial-gradient(1.5px 1.5px at 285px 45px, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 85px 115px, rgba(125, 249, 255, 0.4), rgba(125, 249, 255, 0.1) 50%, transparent),
    radial-gradient(2px 2px at 135px 65px, rgba(255, 77, 157, 0.6), rgba(255, 77, 157, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 255px 115px, rgba(147, 51, 234, 0.5), rgba(147, 51, 234, 0.1) 50%, transparent),
    radial-gradient(1.5px 1.5px at 295px 85px, rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.1) 50%, transparent),
    radial-gradient(1px 1px at 15px 95px, rgba(125, 249, 255, 0.5), rgba(125, 249, 255, 0.1) 50%, transparent),
    radial-gradient(2px 2px at 155px 15px, rgba(255, 77, 157, 0.4), rgba(255, 77, 157, 0.1) 50%, transparent);
  background-size: 350px 140px;
  animation: particleFloat2 42s linear infinite;
  opacity: 0.7;
  z-index: 1;
  filter: drop-shadow(0 0 3px rgba(255, 77, 157, 0.5)) drop-shadow(0 0 6px rgba(255, 77, 157, 0.3));
}

@keyframes particleFloat1 {
  0% {
    transform: translate(0px, 0px);
  }
  15% {
    transform: translate(8px, -12px);
  }
  30% {
    transform: translate(-5px, -8px);
  }
  45% {
    transform: translate(15px, 5px);
  }
  60% {
    transform: translate(-12px, 18px);
  }
  75% {
    transform: translate(6px, -15px);
  }
  90% {
    transform: translate(-8px, 3px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes particleFloat2 {
  0% {
    transform: translate(0px, 0px);
  }
  12% {
    transform: translate(-6px, 10px);
  }
  25% {
    transform: translate(12px, -5px);
  }
  38% {
    transform: translate(-15px, -12px);
  }
  50% {
    transform: translate(8px, 15px);
  }
  62% {
    transform: translate(-10px, -8px);
  }
  75% {
    transform: translate(18px, 6px);
  }
  88% {
    transform: translate(-4px, -18px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

/* Mobile Preview Styles */
.mobile-preview-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  margin-top: 20px;
}

.mobile-controls {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  height: fit-content;
}

.mobile-controls h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}

.control-group {
  margin-bottom: 16px;
}

.control-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.control-group select,
.control-group input[type="number"] {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 13px;
}

.control-group select:focus,
.control-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(125, 249, 255, 0.15);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-preview-window {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-height: 600px;
}

.mobile-device-frame {
  background: #1a1a1a;
  border-radius: 25px;
  padding: 20px 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border: 2px solid #333;
  transition: all 0.3s ease;
}

.mobile-device-frame.landscape {
  transform: rotate(90deg);
  margin: 100px 0;
}

.mobile-screen {
  background: black;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

#mobilePreviewIframe {
  width: 375px;
  height: 667px;
  border: none;
  display: block;
  background: white;
  transform-origin: top left;
}

.mobile-device-controls {
  margin-top: 15px;
  text-align: center;
}

.device-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.preview-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.pill.small {
  padding: 6px 12px;
  font-size: 11px;
}

/* Responsive mobile preview */
@media (max-width: 1200px) {
  .mobile-preview-container {
    grid-template-columns: 1fr;
  }
  
  .mobile-preview-window {
    margin-top: 20px;
  }
}

/* Menu Dropdown Styles */
.menu-dropdown {
  position: relative;
  display: inline-block;
  z-index: 99999 !important;
}

.menu-btn {
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  position: relative;
  z-index: 99999 !important;
  white-space: nowrap;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

.menu-arrow {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
}

/* Ensure menu button doesn't squash on small screens */
@media (max-width: 640px) {
  .menu-btn {
    min-width: 70px;
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .menu-arrow {
    font-size: 11px;
  }
}

.global-menu-dropdown {
  position: fixed !important;
  top: 80px !important;
  right: 20px !important;
  background: rgba(12, 13, 16, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 2px solid rgba(125, 249, 255, 0.3) !important;
  border-radius: 12px !important;
  min-width: 160px !important;
  z-index: 99999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: all 0.3s ease !important;
  padding: 8px !important;
  pointer-events: none !important;
  display: none !important;
}

.global-menu-dropdown.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  display: block !important;
}

.menu-item {
  display: block !important;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100% !important;
  box-sizing: border-box !important;
}

.menu-item::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.3), 
    rgba(147, 51, 234, 0.3), 
    rgba(255, 77, 157, 0.3), 
    rgba(125, 249, 255, 0.3)
  );
  background-size: 400% 400%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(4px);
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 1);
  transform: translateX(4px);
}

.menu-item:hover::before {
  opacity: 1;
  animation: glowPulse 3.5s ease-in-out infinite;
}

.menu-item.active {
  background: rgba(125, 249, 255, 0.12);
  color: rgba(255, 255, 255, 1);
}

.menu-item.active::before {
  opacity: 1;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.4), 
    rgba(147, 51, 234, 0.4), 
    rgba(255, 77, 157, 0.4), 
    rgba(125, 249, 255, 0.4)
  );
  background-size: 100% 100%;
  background-position: 50% 50%;
  filter: blur(4px) 
          drop-shadow(0 0 8px rgba(125, 249, 255, 0.5)) 
          drop-shadow(0 0 16px rgba(125, 249, 255, 0.3));
  animation: none;
}

/* About Page Styles */
.about-page {
  margin: 0 auto;
  padding: 40px 20px;
}

.about-hero {
  text-align: center;
  margin-bottom: 60px;
}

.about-hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(125, 249, 255, 1), rgba(255, 77, 157, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Override for the "JUST ONE MORE" title specifically */
.about-hero h1.about-hero-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

.about-hero .lead {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.about-content {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.about-section {
  margin-bottom: 50px;
}

.about-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: rgba(125, 249, 255, 1);
}

.about-section p {
  margin-bottom: 16px;
  font-size: 16px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.feature-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(125, 249, 255, 0.3);
  transform: translateY(-4px);
}

.feature-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 1);
}

.feature-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.contact-options {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Enhanced Button Glow Effects */

/* Auto-suggest */
.suggest-container{position:relative}
.suggest-dropdown{position:absolute;top:100%;left:0;right:0;background:#0c0d10;border:1px solid rgba(255,255,255,.12);border-top:none;border-radius:0 0 12px 12px;max-height:200px;overflow-y:auto;z-index:100;display:none}
.suggest-item{padding:8px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.suggest-item:hover{background:rgba(255,255,255,.06)}
.suggest-item:last-child{border-bottom:none}

/* Editor Tabs */
.editor-tabs{display:flex;gap:8px;margin-top:16px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:0}
.editor-tab{background:none;border:none;color:rgba(255,255,255,.6);font-size:14px;font-weight:600;padding:12px 16px;cursor:pointer;border-radius:8px 8px 0 0;transition:all 0.2s ease;position:relative}
.editor-tab:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8)}
.editor-tab.active{background:rgba(125,249,255,.08);color:var(--accent);border-bottom:2px solid var(--accent)}
.tab-content{display:none;margin-top:0}
.tab-content.active{display:block}

/* Banner Editor */
.banners-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.banner-item{background:linear-gradient(180deg,#15181e,#12151a);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;transition:all 0.2s ease;position:relative}
.banner-item:hover{border-color:rgba(255,255,255,.12);background:linear-gradient(180deg,#18202a,#151a20)}
.banner-item.hidden{opacity:0.5;background:linear-gradient(180deg,#0f1114,#0c0e11)}
.banner-item-info{flex:1}
.banner-item-title{font-weight:600;font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.banner-item-details{font-size:13px;opacity:0.7;display:flex;gap:16px}
.banner-item-actions{display:flex;gap:8px;align-items:center}
.banner-item-preview{width:80px;height:40px;border-radius:6px;margin-right:16px;border:1px solid rgba(255,255,255,.12);overflow:hidden;position:relative;flex-shrink:0}
.banner-item-actions .visibility-toggle{background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;backdrop-filter:blur(4px);margin-right:8px}
.banner-item-actions .visibility-toggle:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);transform:scale(1.05)}
.banner-item-actions .visibility-toggle.visible{background:rgba(125,249,255,.15);border-color:rgba(125,249,255,.4);box-shadow:0 0 6px rgba(125,249,255,.2)}
.banner-item-actions .visibility-toggle.hidden{background:rgba(255,77,157,.15);border-color:rgba(255,77,157,.4);box-shadow:0 0 6px rgba(255,77,157,.2)}
.banner-item-actions .visibility-toggle svg{width:14px;height:14px;transition:all 0.2s ease}
.banner-item-actions .visibility-toggle.visible svg{fill:#7df9ff}
.banner-item-actions .visibility-toggle.hidden svg{fill:#ff4d9d}

/* Page Selector */
.page-selector{margin-top:6px}
.page-checkboxes{display:flex;flex-wrap:wrap;gap:8px}
.page-checkbox{display:flex;align-items:center;gap:6px;font-size:13px;margin:0;cursor:pointer;padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);transition:all 0.2s ease}
.page-checkbox:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.page-checkbox input[type="checkbox"]{margin:0;accent-color:var(--accent)}
.page-checkbox input[type="checkbox"]:checked + span{color:var(--accent);font-weight:600}
.page-checkbox input[type="checkbox"]:checked{background:var(--accent)}

/* Checkbox Label */
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;margin:0;cursor:pointer}
.checkbox-label input[type="checkbox"]{margin:0;accent-color:var(--accent)}
.checkbox-label span{font-weight:500}
.checkbox-label input[type="checkbox"]:disabled{opacity:0.4;cursor:not-allowed}
.checkbox-label:has(input:disabled){opacity:0.6;cursor:not-allowed}

.banner-editor{background:linear-gradient(180deg,#15181e,#12151a);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:20px;margin-top:20px}
.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:16px}
.editor-header h4{margin:0;font-size:18px;font-weight:600}

/* Banner Preview */
.banner-preview{position:fixed;top:20px;right:20px;width:300px;max-height:80vh;background:linear-gradient(180deg,#15181e,#12151a);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px;z-index:1000;box-shadow:0 20px 40px rgba(0,0,0,0.3);display:none}
.banner-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:600}
.banner-preview-content{border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden;min-height:80px;position:relative}

/* Preview Mode */
.preview-mode .owner{opacity:0.3;pointer-events:none}
.preview-mode .banner-preview{display:block}

/* Banner Styles for Live Preview */
.live-banner{width:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:all 0.3s ease}
.live-banner.clickable{cursor:pointer}
.live-banner.clickable:hover{opacity:0.9}
.live-banner-content{position:relative;z-index:2;padding:16px;width:100%;text-align:center}

/* Live Preview Panel */
.live-preview-panel{position:fixed;top:0;right:0;width:50vw;height:100vh;background:linear-gradient(180deg,#15181e,#12151a);border-left:1px solid rgba(255,255,255,.12);z-index:1000;display:flex;flex-direction:column;box-shadow:-20px 0 40px rgba(0,0,0,0.3)}
.preview-header{padding:16px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center}
.preview-header h4{margin:0;font-size:16px;font-weight:600}
.preview-controls{display:flex;gap:12px;align-items:center}
.preview-controls select{background:#15181e;border:1px solid rgba(255,255,255,.12);color:#fff;padding:6px 10px;border-radius:6px;font-size:13px}
.preview-content{flex:1;padding:16px;overflow:hidden}
.preview-content iframe{width:100%;height:100%;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:#fff}

/* Real-time Preview Window */
.realtime-preview{position:fixed;bottom:20px;right:20px;width:300px;max-height:60vh;background:linear-gradient(180deg,#15181e,#12151a);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px;z-index:1001;box-shadow:0 20px 40px rgba(0,0,0,0.3);display:none}
.realtime-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:600}
.realtime-preview-content{border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden;min-height:80px;position:relative;background:#fff}

/* Preview Mode Overlay */
.preview-mode-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);z-index:999;display:none}
.preview-mode .preview-mode-overlay{display:block}
.preview-mode .live-preview-panel{display:flex}

/* Visual Scaling Mode */
.banner-scale-container{position:relative;display:inline-block;width:100%;max-width:100%}
.banner-scale-handles{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:10}
.scaling-mode .banner-scale-handles{pointer-events:auto}
.scale-handle{position:absolute;background:var(--accent);border:2px solid #fff;border-radius:50%;width:12px;height:12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.3);transition:all 0.2s ease}
.scale-handle:hover{transform:scale(1.2);background:var(--accent-2)}
.scale-handle.nw{top:-6px;left:-6px;cursor:nw-resize}
.scale-handle.n{top:-6px;left:50%;transform:translateX(-50%);cursor:n-resize}
.scale-handle.ne{top:-6px;right:-6px;cursor:ne-resize}
.scale-handle.e{top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize}
.scale-handle.se{bottom:-6px;right:-6px;cursor:se-resize}
.scale-handle.s{bottom:-6px;left:50%;transform:translateX(-50%);cursor:s-resize}
.scale-handle.sw{bottom:-6px;left:-6px;cursor:sw-resize}
.scale-handle.w{top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize}

/* Scale overlay */
.scale-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border:2px dashed var(--accent);pointer-events:none;opacity:0;transition:opacity 0.2s ease}
.scaling-mode .scale-overlay{opacity:0.6}
.scaling-mode .preview-banner{outline:2px solid var(--accent);outline-offset:2px}

/* Scale info display */
.scale-info{position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s ease}
.scaling-mode .scale-info{opacity:1}

/* Import tagline banners button special styling */
#createTaglineBannersBtn{background:linear-gradient(135deg,rgba(125,249,255,.1),rgba(255,77,157,.1));border-color:rgba(125,249,255,.3);position:relative}
#createTaglineBannersBtn:hover{background:linear-gradient(135deg,rgba(125,249,255,.2),rgba(255,77,157,.2));border-color:rgba(125,249,255,.5);transform:translateY(-2px)}

/* Bulk Apply Modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.modal-content{background:#15181e;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px;max-height:80vh;overflow-y:auto}
.bulk-banner-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;margin-bottom:4px;transition:all 0.2s ease}
.bulk-banner-item:hover{background:rgba(255,255,255,.04)}
.bulk-banner-item input[type="checkbox"]{margin:0}
.bulk-banner-item label{margin:0;cursor:pointer;flex:1;font-size:14px}
.bulk-banner-item .banner-preview{font-size:12px;opacity:0.6;margin-top:2px}

/* Banner Animations Panel */
.animation-panel{position:fixed;top:0;right:0;width:400px;height:100vh;background:#0c0d10;border-left:1px solid rgba(255,255,255,.12);transform:translateX(100%);transition:transform 0.3s ease;z-index:999;overflow-y:auto}
.animation-panel.show{transform:translateX(0)}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.12);background:#15181e}
.panel-header h3{margin:0;font-size:18px;font-weight:600}
.panel-content{padding:20px}
.animation-section{margin-bottom:32px;padding:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.animation-section h4{margin:0 0 16px 0;font-size:16px;font-weight:600;color:var(--accent)}
.animation-group{margin-bottom:20px;padding:16px;background:rgba(255,255,255,.03);border-radius:8px}
.animation-group h5{margin:0 0 12px 0;font-size:14px;font-weight:600;opacity:0.8}
.animation-banners-list{max-height:200px;overflow-y:auto;margin-bottom:12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px}
.animation-banner-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;margin-bottom:4px;transition:all 0.2s ease}
.animation-banner-item:hover{background:rgba(255,255,255,.06)}
.animation-banner-item input[type="checkbox"]{margin:0}
.animation-banner-item label{margin:0;cursor:pointer;flex:1;font-size:13px}
.animation-banner-item .drag-handle{cursor:grab;opacity:0.5;font-size:12px}
.animation-banner-item .drag-handle:hover{opacity:1}
.animation-banner-item.dragging{opacity:0.5;transform:rotate(5deg)}
.animation-actions{display:flex;gap:12px;flex-wrap:wrap;padding:20px;background:rgba(255,255,255,.02);border-radius:12px;margin-top:20px}

/* Theme Background Controls */
.theme-section{padding:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.theme-section h4{margin:0 0 16px 0;font-size:16px;font-weight:600;color:var(--accent)}
.background-controls{display:flex;flex-direction:column;gap:16px}
.background-source{margin-bottom:12px}
#backgroundPreview > div{background-color:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:14px}
#backgroundPreview.has-image > div{border:1px solid rgba(255,255,255,.12);color:transparent}
#backgroundStylingControls input[type="range"]{width:100%;margin-bottom:4px}
#backgroundStylingControls .grid2 label{display:flex;flex-direction:column;gap:4px}

/* Custom Glow Editor Styling */
#customGlowEditor input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  cursor:pointer;
}
#customGlowEditor input[type="range"]::-webkit-slider-track{
  background:rgba(255,255,255,.1);
  height:6px;
  border-radius:3px;
}
#customGlowEditor input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  height:18px;
  width:18px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
#customGlowEditor input[type="range"]::-webkit-slider-thumb:hover{
  transform:scale(1.1);
}
#customGlowEditor input[type="range"]::-moz-range-track{
  background:rgba(255,255,255,.1);
  height:6px;
  border-radius:3px;
  border:none;
}
#customGlowEditor input[type="range"]::-moz-range-thumb{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  height:18px;
  width:18px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  cursor:pointer;
}

#glowPreview{
  background:radial-gradient(circle at center, #0c0d10 0%, #060708 100%);
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#glowPreviewText{
  user-select:none;
  letter-spacing:0.3px;
}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
.card{background:linear-gradient(180deg,#15181e,#12151a);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:all .3s ease}
.card:hover .meta{transform:translateY(-2px)}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.2);border-color:rgba(255,255,255,.1)}
.thumb{aspect-ratio:4/3;background:#0c0d10;position:relative;display:block;transition:all .3s ease;cursor:pointer}
.thumb:hover{transform:scale(1.02);filter:brightness(1.1)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);pointer-events:none;z-index:1}
.label-pill{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.15);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.24);pointer-events:none;z-index:1}
.meta{padding:14px;display:flex;flex-direction:column;gap:10px}
.title{font-weight:700;font-size:16px;line-height:1.3;max-height:2.6em;overflow:hidden}
.price{font-size:15px;font-weight:700;color:var(--accent)}
.actions{margin-top:auto;display:flex;gap:10px}
.btn{
  flex:1;
  text-align:center;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  background:#0c0d10;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn:not(.primary)::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(3px);
}

.btn:not(.primary):hover::before {
  opacity: 1;
}

.btn:not(.primary):hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.btn.primary{
  background:linear-gradient(180deg,rgba(125,249,255,.15),rgba(125,249,255,.08));
  border-color:var(--accent);
}

.btn.primary::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.5), 
    rgba(255, 77, 157, 0.5), 
    rgba(147, 51, 234, 0.5), 
    rgba(255, 215, 0, 0.4), 
    rgba(125, 249, 255, 0.5)
  );
  background-size: 400% 400%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(5px);
}

.btn.primary:hover::before {
  opacity: 1;
  animation: buyButtonGlow 3s ease-in-out infinite;
}



@keyframes buyButtonGlow {
  0%, 100% {
    background-position: 0% 50%;
    filter: blur(5px);
  }
  25% {
    background-position: 100% 0%;
    filter: blur(4px);
  }
  50% {
    background-position: 100% 100%;
    filter: blur(6px);
  }
  75% {
    background-position: 0% 100%;
    filter: blur(4px);
  }
}

/* Menus & Modals */
.menu{position:relative;min-width:0}
.menu .pill{min-width:80px;text-align:center}
.menu-group{display:flex;gap:10px;min-width:180px}
.menu-content{position:absolute;right:0;top:42px;background:#0c0d10;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:var(--shadow);min-width:180px;display:none;z-index:40;transform-origin:top right;opacity:0;transform:scale(0.95) translateY(-10px);transition:opacity 0.2s ease,transform 0.2s ease}
.menu-content.open{display:block;opacity:1;transform:scale(1) translateY(0)}
.menu-content button{display:block;width:100%;padding:10px 12px;background:transparent;border:0;color:var(--text);text-align:left;cursor:pointer}
.menu-content button:hover{background:rgba(255,255,255,.06)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:60}
.modal{position:fixed;right:50%;transform:translateX(50%);top:12%;width:min(560px,90%);background:#0c0d10;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:none;z-index:70}
.modal.open,.modal-backdrop.open{display:block}
.modal h3{margin:0 0 10px}

/* Detail */
.detail{display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:start;margin:0 auto;padding:20px}
.detail .hero{background:#0c0d10;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;position:sticky;top:20px}
.detail .hero img{width:100%;height:auto;object-fit:contain;display:block;max-height:600px;cursor:pointer}
.detail .panel{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px;overflow:visible;min-height:400px}
.detail .actions{overflow:visible;margin:0;padding:16px 0;border:none}

/* Enhanced product detail styling */
.detail .panel h2{font-size:2rem;font-weight:700;color:var(--accent);margin:0 0 8px 0;line-height:1.2}
.detail .panel .price{font-size:1.5rem;font-weight:600;color:var(--primary);margin:0 0 16px 0}
.detail .panel .pill-mini{display:inline-block;background:rgba(125,249,255,0.1);color:var(--primary);border:1px solid rgba(125,249,255,0.3);padding:6px 12px;border-radius:20px;font-size:0.875rem;font-weight:500;margin-bottom:8px}
.detail .panel p{font-size:1rem;line-height:1.7;color:rgba(255,255,255,0.9);margin:0 0 16px 0}
.detail .panel .video-wrap{margin:16px 0;border-radius:var(--radius);overflow:hidden;display:none}
.detail .panel .video-wrap.show{margin:16px 0;display:block}
.detail .panel .video-wrap iframe{width:100%;height:300px;border:none}

/* Image Pop-out Modal Styles */
.image-popout-modal{display:none;position:fixed;z-index:10000;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7143);max-width:610px;max-height:610px;background:#0c0d10;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.8);opacity:0;transition:opacity 0.3s ease-in-out}
.image-popout-modal.show{display:flex;opacity:1;align-items:center;justify-content:center}
.image-popout-content{position:relative;max-width:610px;max-height:610px;display:flex;align-items:center;justify-content:center;background:#0c0d10;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,0.8)}
.image-popout-content img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.image-popout-close{position:absolute;top:-30px;right:0;color:rgba(255,255,255,1);font-size:28px;font-weight:400;cursor:pointer;text-shadow:0 0 8px rgba(125,249,255,0.8),0 0 16px rgba(125,249,255,0.6);transition:all 0.2s ease}
.image-popout-close:hover{color:rgba(125,249,255,1);text-shadow:0 0 12px rgba(125,249,255,1),0 0 20px rgba(125,249,255,0.8),0 0 28px rgba(125,249,255,0.6);transform:scale(1.1)}
.image-popout-close:active{transform:scale(0.98)}

/* Force product page buy button glow */
#detailBuy {
  position: relative;
  overflow: visible;
}

#detailBuy::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.5), 
    rgba(255, 77, 157, 0.5), 
    rgba(147, 51, 234, 0.5), 
    rgba(255, 215, 0, 0.4), 
    rgba(125, 249, 255, 0.5)
  );
  background-size: 400% 400%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(5px);
}

#detailBuy:hover::before {
  opacity: 1;
  animation: buyButtonGlow 3s ease-in-out infinite;
}
.video-wrap{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}



/* Owner */
.owner-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 18px}
.owner{background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);border-radius:var(--radius);padding:16px}
.owner h3{margin:0 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.small{font-size:12px;color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.tbl th{color:var(--muted);font-weight:600}
.pill-mini{padding:4px 8px;font-size:11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--muted)}
.banner{display:none;margin:10px 0;padding:10px 12px;background:rgba(125,249,255,.08);border:1px solid rgba(125,249,255,.25);border-radius:12px}
.banner.show{display:block}

/* Editor blocks */
.blocks{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.block{border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:12px;background:rgba(255,255,255,.03)}
.block .row{display:flex;gap:10px;align-items:center}
.block .controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.block .handle{cursor:grab;opacity:.7}

/* Responsive */
@media (max-width:900px){
  .detail{grid-template-columns:1fr;gap:24px;padding:16px}
  .detail .hero{position:relative;top:auto}
  .detail .hero img{max-height:400px}
  .detail .panel{padding:20px;min-height:auto}
  .controls{grid-template-columns:1fr auto auto}
}

/* Controls responsive adjustments */
@media (max-width: 640px) {
  .controls {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .controls .search {
    min-width: auto;
    width: 100%;
  }
  
  .controls .chips {
    justify-content: center;
    gap: 8px;
  }
  
  .controls .chip {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .controls {
    gap: 10px;
  }
  
  .controls .chips {
    gap: 6px;
  }
  
  .controls .chip {
    font-size: 11px;
    padding: 6px 10px;
    min-height: 32px;
  }
}

@media (max-width: 400px) {
  .controls .chips {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .controls .chip {
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }
}

/* Navigation Dropdowns */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Inherit chip styling */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  min-height: 40px;
  justify-content: center;
  overflow: hidden;
}

.nav-dropdown-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.3), 
    rgba(147, 51, 234, 0.3), 
    rgba(255, 77, 157, 0.3), 
    rgba(125, 249, 255, 0.3)
  );
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.nav-dropdown-btn:hover::before {
  opacity: 1;
  animation: glowPulse 3.5s ease-in-out infinite;
}

.nav-dropdown-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-dropdown.active .nav-dropdown-btn::before {
  opacity: 1;
  animation: none;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.5), 
    rgba(147, 51, 234, 0.5), 
    rgba(255, 77, 157, 0.5), 
    rgba(125, 249, 255, 0.5)
  );
  background-size: 100% 100%;
  background-position: 50% 50%;
  filter: blur(7px) 
          drop-shadow(0 0 16px rgba(255, 77, 157, 0.8)) 
          drop-shadow(0 0 32px rgba(255, 77, 157, 0.5)) 
          drop-shadow(0 0 48px rgba(255, 77, 157, 0.3));
}

.nav-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(12, 13, 16, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(125, 249, 255, 0.3);
  border-radius: 12px;
  padding: 8px;
  z-index: 1000;
  margin-top: 4px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.nav-dropdown-content.show {
  display: block;
}

.nav-dropdown-content a {
  display: block;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 14px;
  white-space: nowrap;
}

.nav-dropdown-content a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent);
  transform: translateX(4px);
}

.nav-dropdown-content a.active {
  background: rgba(125, 249, 255, 0.2);
  color: var(--accent);
}

/* Responsive adjustments for navigation */
@media (max-width: 640px) {
  #quickBar {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  
  .nav-dropdown {
    width: 100%;
    max-width: 200px;
  }
  
  .nav-dropdown-btn {
    width: 100%;
    justify-content: center;
  }
  
  .nav-dropdown-content {
    width: 100%;
    left: 0;
    right: 0;
  }
  
  .shuffle-btn {
    display: none !important;
  }
}

@media (min-width: 641px) {
  .shuffle-btn {
    display: flex !important;
  }
}

/* Owner page */
.welcome-section {
  text-align: center;
  padding: 60px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.welcome-section h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 48px;
}

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

.action-box {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.action-box:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.action-icon {
  margin-bottom: 16px;
  color: var(--accent);
}

.action-icon svg {
  width: 48px;
  height: 48px;
}

.action-box h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--accent);
}

.action-box p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.back-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.quick-actions {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.8);
  padding: 12px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Image error and placeholder styles */
.card .thumb .image-error,
.card .thumb .image-placeholder {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  text-align: center;
}

.card .thumb .error-icon,
.card .thumb .placeholder-icon {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.7;
}

.card .thumb .error-text,
.card .thumb .placeholder-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Filter Dropdown Styles */
.filter-dropdown-content {
  padding: 20px;
  min-width: 320px;
  max-width: 380px;
  background: rgba(12, 13, 16, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(125, 249, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.filter-section {
  margin-bottom: 18px;
  padding: 4px 0;
}

.filter-label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 12px;
  font-family: var(--font);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  outline: none;
  transition: all 0.3s ease;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.filter-select:focus {
  border-color: rgba(125, 249, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(125, 249, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.filter-select:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.filter-select option {
  background: #0c0d10;
  color: #fff;
  padding: 8px 12px;
  font-weight: normal;
  font-size: 13px;
  font-family: var(--font);
}

.filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(125, 249, 255, 0.2);
}

/* Clean Frosted Glass Effect for filter and sort buttons */
.filter-btn,
.sort-btn {
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  font-weight: 500;
  font-size: 14px;
  font-family: var(--font);
  min-width: 80px;
  color: rgba(255, 255, 255, 0.9) !important;
  position: relative;
  overflow: hidden;
}

.filter-btn::before,
.sort-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.3), 
    rgba(147, 51, 234, 0.3), 
    rgba(255, 77, 157, 0.3), 
    rgba(125, 249, 255, 0.3)
  );
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.filter-btn:hover::before,
.sort-btn:hover::before {
  opacity: 1;
  animation: glowPulse 3.5s ease-in-out infinite;
}

.filter-btn:active::before,
.filter-btn.active-filter::before {
  opacity: 1;
  animation: none;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.4), 
    rgba(147, 51, 234, 0.4), 
    rgba(255, 77, 157, 0.4), 
    rgba(125, 249, 255, 0.4)
  );
  background-size: 100% 100%;
  background-position: 50% 50%;
  filter: blur(4px) 
          drop-shadow(0 0 8px rgba(125, 249, 255, 0.5)) 
          drop-shadow(0 0 16px rgba(125, 249, 255, 0.3));
}

.sort-btn:active::before {
  opacity: 1;
  animation: none;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.4), 
    rgba(147, 51, 234, 0.4), 
    rgba(255, 77, 157, 0.4), 
    rgba(125, 249, 255, 0.4)
  );
  background-size: 100% 100%;
  background-position: 50% 50%;
  filter: blur(4px) 
          drop-shadow(0 0 8px rgba(125, 249, 255, 0.5)) 
          drop-shadow(0 0 16px rgba(125, 249, 255, 0.3));
}

/* Shuffle Button Styling */
.shuffle-btn {
  padding: 8px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  min-height: 44px !important;
  display: inline-block !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  font-weight: 500;
  font-size: 14px;
  font-family: var(--font);
  min-width: 100px;
  color: rgba(255, 255, 255, 0.9) !important;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* Force visibility */
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

.shuffle-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.3), 
    rgba(147, 51, 234, 0.3), 
    rgba(255, 77, 157, 0.3), 
    rgba(125, 249, 255, 0.3)
  );
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.shuffle-btn:hover::before {
  opacity: 1;
  animation: glowPulse 3.5s ease-in-out infinite;
}

.shuffle-btn:active::before {
  opacity: 1;
  animation: none;
  background: linear-gradient(45deg, 
    rgba(125, 249, 255, 0.5), 
    rgba(147, 51, 234, 0.5), 
    rgba(255, 77, 157, 0.5), 
    rgba(125, 249, 255, 0.5)
  );
  background-size: 100% 100%;
  background-position: 50% 50%;
  filter: blur(7px) 
          drop-shadow(0 0 16px rgba(255, 77, 157, 0.8)) 
          drop-shadow(0 0 32px rgba(255, 77, 157, 0.5)) 
          drop-shadow(0 0 48px rgba(255, 77, 157, 0.3));
}

.shuffle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}



@keyframes glowPulse {
  0%, 100% {
    background-position: 0% 50%;
    filter: blur(10px) 
            drop-shadow(0 0 16px rgba(125, 249, 255, 0.8)) 
            drop-shadow(0 0 32px rgba(125, 249, 255, 0.5)) 
            drop-shadow(0 0 48px rgba(125, 249, 255, 0.3));
  }
  25% {
    background-position: 100% 0%;
    filter: blur(6px) 
            drop-shadow(0 0 20px rgba(255, 77, 157, 0.9)) 
            drop-shadow(0 0 40px rgba(255, 77, 157, 0.6)) 
            drop-shadow(0 0 60px rgba(255, 77, 157, 0.4));
  }
  50% {
    background-position: 100% 100%;
    filter: blur(10px) 
            drop-shadow(0 0 18px rgba(147, 51, 234, 0.8)) 
            drop-shadow(0 0 36px rgba(147, 51, 234, 0.5)) 
            drop-shadow(0 0 48px rgba(147, 51, 234, 0.3));
  }
  75% {
    background-position: 0% 100%;
    filter: blur(6px) 
            drop-shadow(0 0 22px rgba(125, 249, 255, 0.8)) 
            drop-shadow(0 0 44px rgba(125, 249, 255, 0.5)) 
            drop-shadow(0 0 66px rgba(125, 249, 255, 0.3));
  }
}

.filter-btn:hover,
.sort-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(125, 249, 255, 0.3) !important;
  transform: translateX(2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Legacy styles for filter dropdown buttons (keep for modal buttons) */
.filter-actions .filter-btn {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.filter-actions .filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.filter-actions .filter-btn.primary {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(125, 249, 255, 0.9) 100%);
  border-color: var(--accent);
  color: #000;
  box-shadow: 0 2px 8px rgba(125, 249, 255, 0.3);
}

.filter-actions .filter-btn.primary:hover {
  background: linear-gradient(135deg, rgba(125, 249, 255, 0.95) 0%, rgba(125, 249, 255, 0.8) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(125, 249, 255, 0.4);
}

/* Dropdown arrow styling */
.dropdown-arrow {
  font-size: 10px;
  margin-left: 6px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.menu.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Filter button arrow rotation using CSS pseudo-element approach would be complex,
   so we'll rely on the visual feedback from the dropdown opening/closing */

/* Active filter button styling */
.pill.active-filter {
  background: rgba(125, 249, 255, 0.15);
  border-color: rgba(125, 249, 255, 0.4);
  color: var(--accent);
}



/* Hero Watermark */
.hero-watermark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.watermark-mascot {
  width: 100px;
  height: 100px;
  opacity: 0.08;
  filter: grayscale(100%) brightness(0.8);
}

/* Site Title Styling - Applied to main header titles only */
.site-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.35);
  filter: none;
  -webkit-text-stroke: 0;
  font-size: 2.6rem !important;
}

/* About Page Hero Title Styling */
.about-hero-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff !important;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2.5rem;
  text-shadow: none;
}

/* Customer Confessions Page Styling - Now uses same classes as About Us page */

.confessions-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.confession-box {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(125, 249, 255, 0.3) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(125, 249, 255, 0.15), 0 0 40px rgba(147, 51, 234, 0.1) !important;
  margin-bottom: 24px !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.confession-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(125, 249, 255, 0.25), 0 0 50px rgba(147, 51, 234, 0.15) !important;
  border-color: rgba(125, 249, 255, 0.5) !important;
}

.confession-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.user-avatar {
  flex-shrink: 0;
}

.user-avatar img {
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: #f5f5f5;
  width: 48px;
  height: 48px;
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzIiIGZpbGw9IiMyMDIwMjAiLz4KPGNpcmNsZSBjeD0iMzIiIGN5PSIyNCIgcj0iOCIgZmlsbD0iIzQ1NDU0NSIvPgo8cGF0aCBkPSJNMTIgNDhDMTIgMzguMDU5IDIwLjA1OSAzMCAzMCAzMEgzNEM0My45NDEgMzAgNTIgMzguMDU5IDUyIDQ4IiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iMyIvPgo8Y2lyY2xlIGN4PSIyNCIgY3k9IjI4IiByPSIyIiBmaWxsPSIjNjY2NjY2Ii8+CjxjaXJjbGUgY3g9IjQwIiBjeT0iMjgiIHI9IjIiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI0IDM2QzI0IDM2IDI4IDQwIDMyIDQwQzM2IDQwIDQwIDM2IDQwIDM2IiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K");
}

.user-info {
  flex: 1;
}

.username {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.1rem;
  color: rgba(125, 249, 255, 1) !important;
  margin: 0 0 4px 0;
}

.post-date {
  font-family: var(--font);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7) !important;
}



/* Responsive controls - transform existing controls on narrow screens */
@media (max-width: 768px) {
  /* disable any page scale wrapper to avoid clipping */
  #site-scale {
    transform: none;
    width: auto;
  }

  /* Compact mode header title sizing */
  header .site-title {
    font-size: 1.1rem !important;
    line-height: 1.0 !important;
  }
  
  header .site-title-link {
    font-size: 1.1rem !important;
    line-height: 1.0 !important;
  }
  
    /* Compact mode glow positioning - prevent left boundary clipping */
  header .site-title .site-title-link::after {
    left: -15px;
    right: -15px;
    top: -10px;
    bottom: -10px;
    filter: blur(6px);
    opacity: .75;
  }
  
  /* Remove focus outline on title text in compact mode */
  header .site-title .site-title-link:focus,
  header .site-title .site-title-link:focus-visible,
  header .site-title .site-title-link:active,
  header .site-title .site-title-link:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
  }
  
  /* Also remove any focus indicators from the title container */
  header .site-title:focus,
  header .site-title:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Remove focus from title container in compact mode */
  header .site-title-container:focus,
  header .site-title-container:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Remove any hover or active states that might add borders */
  header .site-title .site-title-link:hover,
  header .site-title .site-title-link:active,
  header .site-title .site-title-link:visited {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
  }
  
  /* Fix filter dropdown positioning in compact mode */
  .menu-content {
    right: auto !important;
    left: 0 !important;
    min-width: 280px !important;
    max-width: calc(100vw - 32px) !important;
    transform-origin: top left !important;
    transform: scale(0.95) translateY(-10px) !important;
  }
  
  .menu-content.open {
    transform: scale(1) translateY(0) !important;
  }
  
  /* Make existing controls more compact */
  .controls {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .controls .search {
    min-width: auto;
    width: 100%;
  }
  

  
  /* Hide browse row on narrow screens */
  .browse-row {
    display: none !important;
  }
  
  /* Ensure menu group stays on one line in compact mode */
  .controls .menu-group.toolbar-compact {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 8px !important;
  }
}

/* Hide the All button in controls on wide screens */
.all-button-controls {
  display: none;
}

/* Very small screens */
@media (max-width: 420px) {
  .controls .toolbar .btn {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
}

.confession-content {
  font-family: var(--font);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9) !important;
}

.confession-content p {
  margin: 0;
  font-size: 1rem;
}

/* Responsive layout for confessions */
@media (min-width: 768px) {
  .confessions-grid {
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .confessions-grid {
    margin: 0 auto;
  }
}

/* Mobile responsiveness for confessions */
@media (max-width: 767px) {
  .confessions-grid {
    padding: 0 16px !important;
    gap: 24px !important;
    max-width: 100% !important;
  }
  
  .confession-box {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: none !important;
    min-width: 100% !important;
  }
  
  .confessions-hero h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  .confessions-hero .lead {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    word-break: keep-all !important;
  }
  

}

/* Extra small screen optimizations for confessions */
@media (max-width: 480px) {
  .confessions-grid {
    padding: 0 8px !important;
    gap: 16px !important;
    width: 95vw !important;
    max-width: 95vw !important;
  }
  
  .confession-box {
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: 95vw !important;
    box-sizing: border-box !important;
    margin-left: calc(-47.5vw + 50%) !important;
    margin-right: calc(-47.5vw + 50%) !important;
  }
  
  .confessions-hero .lead {
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
  }
  

}

/* Force confession box width in compact mode - override inline styles */
@media (max-width: 767px) {
  .confessions-container .confessions-grid .confession-box {
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: 95vw !important;
    box-sizing: border-box !important;
    margin-left: calc(-47.5vw + 50%) !important;
    margin-right: calc(-47.5vw + 50%) !important;
  }
  
  .confessions-grid {
    width: 95vw !important;
    max-width: 95vw !important;
    margin-left: calc(-47.5vw + 50%) !important;
    margin-right: calc(-47.5vw + 50%) !important;
  }
}
  



/* Remove focus outline on title text globally */
.site-title .site-title-link:focus,
.site-title .site-title-link:focus-visible,
.site-title .site-title-link:active,
.site-title .site-title-link:focus-within,
.site-title:focus,
.site-title:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Remove any user agent focus styles */
.site-title .site-title-link {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Remove focus from the title container as well */
.site-title-container:focus,
.site-title-container:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Debug: temporarily add a visible border to see what's happening */
.site-title-container {
  border: 2px solid transparent !important;
}

/* Mobile adjustments for site title */
@media (max-width: 480px) {
  .site-title-link {
    font-size: 1.2rem !important;
  }
  
  .site-title .site-title-link::after {
    top: -10px;
    left: -20px;
    right: -20px;
    bottom: -10px;
    filter: blur(8px);
    opacity: .9;
  }
}

@media (max-width: 400px) {
  .site-title-link {
    font-size: 1rem !important;
  }
}

@media (max-width: 350px) {
  .site-title-link {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 320px) {
  .site-title-link {
    font-size: 0.8rem !important;
  }
}

@media (max-width: 280px) {
  .site-title-link {
    font-size: 0.7rem !important;
  }
}





/* Site Title Link Styling */
.site-title-link {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline;
  position: relative;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0,0,0,.35);
  filter: none;
  -webkit-text-stroke: 0;
  overflow: visible;
}

.site-title-link:hover {
  color: rgba(143, 211, 255, 1) !important;
  filter: none !important;
  text-shadow: 
    0 0 6px rgba(143, 211, 255, 0.6),
    0 0 12px rgba(143, 211, 255, 0.4),
    0 0 18px rgba(143, 211, 255, 0.3),
    0 0 24px rgba(143, 211, 255, 0.2) !important;
  transform: scale(1.02);
}

.site-title-link:active {
  transform: scale(0.98);
}

/* Site Title Link Styling */
.site-title-link {
  font-size: 2.6rem !important;
}

/* Ensure the site title container allows glow overflow */
.site-title {
  overflow: visible;
  position: relative;
}

/* Subtle halo effect behind the title text */
.site-title .site-title-link::after {
  content: "";
  position: absolute;
  top: -15px;
  left: -25px;
  right: -25px;
  bottom: -15px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
             rgba(143,211,255,.18) 0%,
             rgba(143,211,255,.16) 15%,
             rgba(143,211,255,.14) 30%,
             rgba(143,211,255,.12) 45%,
             rgba(143,211,255,.10) 60%,
             rgba(143,211,255,.08) 70%,
             rgba(143,211,255,.06) 78%,
             rgba(143,211,255,.04) 84%,
             rgba(143,211,255,.02) 88%,
             rgba(143,211,255,.01) 91%,
             rgba(125,249,255,.02) 93%,
             rgba(147,51,234,.04) 95%,
             rgba(147,51,234,.02) 96%,
             rgba(147,51,234,.01) 97%,
             rgba(147,51,234,.005) 98%,
             rgba(0,0,0,0) 99%);
  filter: blur(8px);
  opacity: .60;
  border-radius: 50%;
}

/* Header Layout Components */
.site-title-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.header-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 9999999;
}



.all-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  z-index: 10000;
  min-width: 280px;
  max-width: 92vw;
  padding: 10px;
  border-radius: 12px;
  background: rgba(12, 13, 16, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(125, 249, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.all-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.3s ease;
}

.all-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent);
}

.all-menu .group {
  margin-top: 6px;
}

.all-menu .group > summary {
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  list-style: none;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.all-menu .group[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: rgba(255, 255, 255, 0.05);
}

/* NARROW breakpoint: disable page scale wrapper to avoid clipping */
@media (max-width: 768px) {
  /* disable any page scale wrapper to avoid clipping */
  #site-scale {
    transform: none;
    width: auto;
  }
}



/* default toolbar (wide): keep your current layout; do not force 4 columns */
.menu-group .btn, .menu-group .filter-btn, .menu-group .sort-btn, .menu-group .shuffle-btn, #btnAll {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 12px;
}

/* compact layout: 4 equal columns */
@media (max-width: 768px){
  .menu-group.toolbar-compact{
    display: flex;
    align-items: stretch;  /* ensure all children stretch to same height */
    justify-content: space-between;
    width: 100%;
    gap: 8px;  /* equal spacing between buttons */
  }
  .menu-group.toolbar-compact > * {
    flex: 1;   /* all buttons expand to fill available space equally */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40px;   /* slightly smaller height */
    height: 40px;       /* slightly smaller height */
    font-size: 0.95rem; /* slightly smaller text */
    padding: 10px 6px;  /* slightly smaller padding */
    box-sizing: border-box;
    min-width: 0;  /* allow buttons to shrink if needed */
    width: 100%;   /* ensure full width within flex container */
  }
  /* Force all buttons to be the same size regardless of wrapper structure */
  .menu-group.toolbar-compact .filter-btn,
  .menu-group.toolbar-compact .sort-btn,
  .menu-group.toolbar-compact .shuffle-btn,
  .menu-group.toolbar-compact #btnAll {
    width: 100% !important;
    min-width: 0 !important;  /* Override conflicting min-width values */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
  }
  
  /* Override .chip class properties for shuffle button in compact mode */
  .menu-group.toolbar-compact .shuffle-btn.chip {
    min-height: 40px !important;
    padding: 10px 6px !important;
    font-size: 0.95rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Target the wrapper elements to ensure they don't constrain button sizes */
  .menu-group.toolbar-compact .filter-menu-wrap,
  .menu-group.toolbar-compact .sort-menu-wrap {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* ensure the browse row no longer shows the original All slot visually if it leaves a gap */
  .browse-row #btnAll { display: none; }
  
  /* All button dropdown styling in compact mode */
  .menu-group.toolbar-compact {
    position: relative;
  }
  
  .menu-group.toolbar-compact .all-dropdown-content {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: -20px !important;
    background: rgba(12, 13, 16, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(125, 249, 255, 0.3) !important;
    border-radius: 12px !important;
    min-width: 320px !important;
    width: fit-content !important;
    z-index: 2147483647 !important;
    margin-top: 0 !important;
    padding: 20px !important;
    right: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    height: auto !important;
    min-height: fit-content !important;
    /* Force stacking context */
    transform: translateZ(0) !important;
    will-change: z-index !important;
    isolation: isolate !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section {
    margin-bottom: 12px !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section:last-child {
    margin-bottom: 0 !important;
  }
  
  .menu-group.toolbar-compact .dropdown-label {
    display: block !important;
    padding: 10px 16px !important;
    color: rgba(125, 249, 255, 0.8) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section a {
    display: block !important;
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 2px 0 !important;
    white-space: nowrap !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section a::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important; left: -2px !important; right: -2px !important; bottom: -2px !important;
    border-radius: 10px !important;
    background: linear-gradient(45deg, 
      rgba(125, 249, 255, 0.3), 
      rgba(147, 51, 234, 0.3), 
      rgba(255, 77, 157, 0.3), 
      rgba(125, 249, 255, 0.3)
    ) !important;
    background-size: 400% 400% !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.3s ease !important;
    filter: blur(4px) !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 1) !important;
    transform: translateX(4px) !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section a:hover::before {
    opacity: 1 !important;
    animation: glowPulse 3.5s ease-in-out infinite !important;
  }
  
  /* Accordion functionality */
  .menu-group.toolbar-compact .accordion-trigger {
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .menu-group.toolbar-compact .accordion-arrow {
    font-size: 12px !important;
    transition: all 0.3s ease !important;
    color: rgba(125, 249, 255, 0.6) !important;
    transform: rotate(0deg) !important;
  }
  
  .menu-group.toolbar-compact .accordion-trigger.active .accordion-arrow {
    color: rgba(125, 249, 255, 1) !important;
    transform: rotate(180deg) !important;
  }
  
  .menu-group.toolbar-compact .accordion-trigger.active .accordion-arrow {
    color: rgba(125, 249, 255, 1) !important;
  }
  
  .menu-group.toolbar-compact .accordion-content {
    display: none;
    margin-top: 12px !important;
    padding-left: 20px !important;
    border-left: 2px solid rgba(125, 249, 255, 0.2) !important;
    margin-bottom: 8px !important;
  }
  
  .menu-group.toolbar-compact .accordion-content a {
    margin: 6px 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  
  /* Special styling for the All button at the top */
  .menu-group.toolbar-compact .dropdown-section[data-section="all"] .dropdown-label {
    border-bottom: 1px solid rgba(125, 249, 255, 0.2) !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section[data-section="all"] .dropdown-label a {
    color: rgba(125, 249, 255, 0.8) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
  }
  
  .menu-group.toolbar-compact .dropdown-section[data-section="all"] .dropdown-label a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 1) !important;
    transform: translateX(4px) !important;
  }
  
  /* Styling for the All button when it shows a page name */
  .menu-group.toolbar-compact #btnAll.page-selected {
    color: rgba(255, 255, 255, 1) !important;
    background: rgba(125, 249, 255, 0.12) !important;
    border: 1px solid rgba(125, 249, 255, 0.3) !important;
    box-shadow: 0 0 8px rgba(125, 249, 255, 0.3) !important;
  }
  
  /* Alternative selector in case the ID doesn't work */
  .menu-group.toolbar-compact .page-selected {
    color: rgba(255, 255, 255, 1) !important;
    background: rgba(125, 249, 255, 0.12) !important;
    border: 1px solid rgba(125, 249, 255, 0.3) !important;
    box-shadow: 0 0 8px rgba(125, 249, 255, 0.3) !important;
  }
  
  /* Even more general selector */
  .page-selected {
    color: rgba(255, 255, 255, 1) !important;
    background: rgba(125, 249, 255, 0.12) !important;
    border: 1px solid rgba(125, 249, 255, 0.3) !important;
    box-shadow: 0 0 8px rgba(125, 249, 255, 0.3) !important;
  }
}

  /* very small phones guardrail */
  @media (max-width: 360px){
    .toolbar.toolbar-compact > * { padding: 8px 10px; font-size: 0.9rem; }
  }
  
  /* Back to Top Button - Compact Mode Only */
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #000000;
    border: 2px solid rgba(125, 249, 255, 0.4);
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 999999;
    opacity: 1;
    transform: none;
  }
  
  .back-to-top:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  
  .back-to-top:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  
  .back-to-top:active {
    transform: translateY(0);
  }
  
  /* Desktop positioning - top center */
@media (min-width: 769px) {
  .back-to-top {
    top: 20px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Hide back to top button on About Us page for mobile */
@media (max-width: 768px) {
  .about-page .back-to-top,
  .about-page ~ .back-to-top,
  .about-page + .back-to-top,
  .about-page-body .back-to-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
  


/* Dropdown visible state */
.all-menu.is-open {
  display: block;
}

/* Confessions CMS Styling */
.status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status.published {
  background: rgba(34, 197, 94, 0.2);
  color: rgba(34, 197, 94, 1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status.draft {
  background: rgba(251, 191, 36, 0.2);
  color: rgba(251, 191, 36, 1);
  border: 1px solid rgba(251, 191, 36, 0.3);
}