/* Meet the Founders Section */
.founders-grid {
  display: flex;
  gap: 96px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 32px;
  margin-bottom: 12px;
  padding: 0 20px;
}
.founder {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 220px;
}
.founder-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 24px 0 rgba(203,108,230,0.10);
  margin-bottom: 16px;
  background: #222;
}

@media (max-width: 768px) {
  .founders-grid {
    flex-direction: column;
    gap: 48px;
    align-items: center;
  }
  
  .founder {
    max-width: 180px;
  }
  
  .founder-img {
    width: 160px;
    height: 160px;
  }
}
.founder-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-top: 4px;
}
/* Contact Social Buttons */
.contact-socials {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}
.contact-social-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: #0b0b0d;
  background: var(--magenta);
  box-shadow: 0 2px 12px rgba(203,108,230,.18);
  font-size: 1rem;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.contact-social-btn:hover {
  background: #fff;
  color: var(--magenta);
  box-shadow: 0 4px 18px rgba(203,108,230,.28);
  transform: translateY(-2px) scale(1.04);
}
/* ================================
   CUESIC — Global Theme Tokens
================================= */
:root{
  --magenta:#cb6ce6;
  --black:#18181b;
  --ink:#e8e8ea;
  --muted:#a1a1aa;
  --card:#1f1f24;
  --surface:#121215;
  --header-h: 80px; /* header height */
}

/* Reset & base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: var(--surface);      /* solid background to avoid banding */
  line-height:1.6;
  padding-top: var(--header-h);    /* offset for fixed header */
  overflow-x: hidden;              /* prevent horizontal scroll on mobile menu */
}
/* Mobile Navigation Styles */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1000;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: background .2s;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform .2s;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

.nav-toggle.active .hamburger {
  background: transparent;
}

.nav-toggle.active .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle.active .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-h);
    right: -100%;
    width: 100%;
    height: calc(100vh - var(--header-h));
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: right .3s ease;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-menu li {
    margin: 20px 0;
  }
}

/* Site-wide ambient glow (fixed) */
body::before{
  content:"";
  position:fixed;
  inset:-20vmax;                 /* huge bleed so it never shows edges */
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 70% 0%,
      rgba(203,108,230,.10), transparent 70%),
    radial-gradient(1400px 1000px at 15% 60%,
      rgba(203,108,230,.08), transparent 75%);
  filter: blur(2px);
}

h1,h2,h3{ line-height:1.2; margin:0 0 12px }
h2{ font-size:clamp(28px, 3vw, 36px) }
h3{ font-size:clamp(20px, 2.4vw, 24px) }
.sub{ color:var(--muted); margin:6px 0 28px }

/* ================================
   Header / Navigation (Fixed)
================================= */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--header-h);
  z-index: 1000; /* above embeds */
  backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(to bottom, rgba(24,24,27,.9), rgba(24,24,27,.7));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  max-width:100%;
  height:100%;
  margin:0;
  padding:0 60px 0 100px;   /* more right padding to move links away from edge */
  display:flex; align-items:center; justify-content:space-between;
}

@media (max-width: 768px) {
  .nav {
    padding: 0 24px;
  }
  
  .nav .brand {
    margin-right: auto; /* Push logo to the left */
  }
  
  .nav .brand-mark {
    height: 32px; /* Slightly smaller logo on mobile */
  }
}

.nav .brand{
  color:var(--ink);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.4px;
  font-size:clamp(1.15rem, 1.9vw, 1.6rem); /* BIGGER brand */
}

.nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0 } /* wider gaps */

.nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:700;                          /* bolder */
  font-size:clamp(1.05rem, 1.5vw, 1.25rem); /* BIGGER links */
  line-height:1;                             /* tighter vertical alignment */
}
.nav a:hover{ color:var(--ink) }

/* ================================
   Sections & Containers
================================= */
.section{ padding:80px 20px; position:relative; isolation:isolate; overflow:hidden; }
.container{ max-width:1100px; margin:0 auto }

/* Per-section magenta glow (no seams) */

/* Optional: subtle per-section depth effect (no color, just shadow) */
.section > *{ position:relative; z-index:1; }
.section::before{
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
  background: none;
  box-shadow: 0 12px 48px 0 rgba(203,108,230,0.04);
  border-radius: 32px;
}

/* ================================
   Hero
================================= */
.hero{
  display:grid; place-items:center;
  min-height:78vh;
}
.hero-inner{ display:grid; place-items:center; text-align:center; gap:18px }

/* Bigger logo + drop-in */
.logo{
  width: min(60vw, 500px); /* increased */
  filter: drop-shadow(0 10px 30px rgba(203,108,230,.35));
  opacity:0; transform:translateY(-80px) scale(.94);
  animation: drop-in .9s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.tagline{ font-size:clamp(18px, 2.4vw, 22px); color:var(--muted) }
.cta{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; text-decoration:none;
  color:#0b0b0d; background:var(--magenta);
  box-shadow:0 10px 30px rgba(203,108,230,.35);
}
.cta:hover{ transform:translateY(-1px); }

/* Old hero .glow element disabled (using section glow instead) */
.glow{ display:none; }

/* Optional: extra hero-only glow punch */
.hero::before{
  content:"";
  position:absolute; inset:auto;
  width:1200px; height:1200px;
  top:40%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(203,108,230,.14) 0%,
    rgba(203,108,230,.10) 35%,
    rgba(203,108,230,.06) 55%,
    transparent 78%);
  filter: blur(2px);
  z-index:0;
}

/* ================================
   Socials
================================= */
.socials{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 36px;
  margin-top: 8px;
}
@media (min-width:700px){
  .socials{
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 22px;
  }
}
.social{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:14px; text-decoration:none; color:var(--ink);
  background:linear-gradient(180deg, #1e1e22, #17171a); border:1px solid rgba(255,255,255,.06);
}
.social:hover{ border-color: rgba(203,108,230,.7); box-shadow:0 0 0 3px rgba(203,108,230,.18) inset; }
.social svg{ width:20px; height:20px; fill:currentColor }
.tiktok-title{
  margin-top: 32px;
  margin-bottom: 0;
  text-align: center;
}

/* TikTok embeds grid */
.tiktoks{
  display: grid;
  gap: 32px 28px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: center;
  margin-top: 24px;
  margin-bottom: 32px;
}

.tiktok-thumb {
  display: block;
  width: 220px;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px 0 rgba(203,108,230,0.10);
  position: relative;
  background: #222;
  transition: transform 0.18s cubic-bezier(.4,1.2,.4,1);
  margin: 0 auto;
}
.tiktok-thumb:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 32px 0 rgba(203,108,230,0.18);
}
.tiktok-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tiktok-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 2.5rem;
  border-radius: 50%;
  padding: 10px 18px 10px 16px;
  pointer-events: none;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
}

/* ================================
   Events
================================= */
.events-grid{
  display:grid; gap:22px;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .events-grid{ grid-template-columns:1fr 1fr; } }
.cards{ display:grid; gap:14px }
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px;
  padding:16px; display:grid; gap:8px;
}
.card h4{ margin:0; font-size:18px }
.meta{ color:var(--muted); font-size:14px }
.tag{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.2px;
  color:#0b0b0d; background:var(--magenta);
}

/* ================================
   Contact
================================= */
.contact-card{
  display:grid; gap:18px; grid-template-columns:1fr;
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px;
}
@media (min-width:700px){ .contact-card{ grid-template-columns:1fr 1fr; } }
.email{ color:var(--ink); text-decoration:none; font-weight:700 }
.email:hover{ color:var(--magenta) }

/* ================================
   Footer
================================= */
.site-footer{
  padding:32px 20px; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,.06);
}

/* ================================
   Animations / Accessibility
================================= */
@keyframes drop-in{
  0%{ opacity:0; transform:translateY(-80px) scale(.94) }
  70%{ opacity:1; transform:translateY(8px) scale(1.02) }
  100%{ opacity:1; transform:translateY(0) scale(1) }
}
.fade-up{ opacity:0; transform:translateY(16px) }
.revealed{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease }
:focus-visible{ outline:2px solid var(--magenta); outline-offset:2px; border-radius:6px }



/* Header logo sizing (responsive, but bigger) */
.brand-logo{
  height: var(--header-h);
  display: flex;
  align-items: center;
  overflow: visible; /* allow logo to show fully */
  padding-left: 0px; /* remove extra left padding */
}
.brand-logo .brand-mark{
  height: calc(var(--header-h) * 1.8);
  width: auto;
  display: block;
  transform-origin: left center;
  margin-left: 0px; /* no negative margin */
  filter: drop-shadow(0 2px 8px rgba(203,108,230,.25));
}
@media (min-width: 1200px){
  .brand-logo .brand-mark{
    height: calc(var(--header-h) * 2.0);
    margin-left: 0px;
  }
}