@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@500;600;700&display=swap');

.section-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:.92;
}

.hero-script{
  font-family:'Allura', cursive;
  font-weight:400;
  letter-spacing:.02em;
}


:root{
  --black:#050507;
  --panel:#0c0c12;
  --panel2:#11111b;
  --purple:#8b5cf6;
  --purple2:#a855f7;
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:#fff;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}

.serif{font-family:"Cormorant Garamond",Georgia,serif}
.script{font-family:"Great Vibes",cursive}

.hero-bg{
  background:
    linear-gradient(90deg,rgba(5,5,7,.92),rgba(5,5,7,.78),rgba(5,5,7,.92)),
    linear-gradient(180deg,rgba(5,5,7,.18),rgba(5,5,7,.94)),
    url('/assets/herobackground.jfif') center center / 275px 183px repeat;
}

.hero-photo-bg{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,5,7,.86) 0%,rgba(5,5,7,.72) 34%,rgba(5,5,7,.34) 68%,rgba(5,5,7,.70) 100%),
    linear-gradient(180deg,rgba(5,5,7,.05),rgba(5,5,7,.84)),
    url('/assets/header.jpeg') center center / cover no-repeat;
}

.hero-photo-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(168,85,247,.22),transparent 30%),
    radial-gradient(circle at 82% 20%,rgba(168,85,247,.32),transparent 28%),
    radial-gradient(circle at 20% 80%,rgba(139,92,246,.18),transparent 32%);
}

.hero-photo-bg > *{
  position:relative;
  z-index:1;
}

.soft-grid{
  background:
    linear-gradient(180deg,rgba(5,5,7,.82),rgba(5,5,7,.90)),
    url('/assets/background.jpg') center center / cover fixed no-repeat;
}

.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid var(--line);
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.purple-btn{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 18px 50px rgba(139,92,246,.28);
}
.purple-btn:hover{filter:brightness(1.08)}

.outline-btn{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.03);
}
.outline-btn:hover{
  border-color:rgba(168,85,247,.7);
  background:rgba(168,85,247,.08);
}

.brand-img{
  display:block;
  width:230px;
  max-width:46vw;
  height:auto;
  object-fit:contain;
}

.brand-img-small{
  display:block;
  width:190px;
  max-width:48vw;
  height:auto;
  object-fit:contain;
}

.logo-cc{
  font-size:4rem;
  line-height:.72;
  letter-spacing:-.08em;
  text-shadow:0 0 22px rgba(168,85,247,.25);
}

.logo-word{
  font-family:"Cormorant Garamond",Georgia,serif;
  letter-spacing:.22em;
  font-weight:700;
}

.logo-small{
  letter-spacing:.43em;
  color:var(--purple2);
  font-size:.68rem;
  font-weight:800;
}

.section-title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
  letter-spacing:.01em;
}

.purple-text{color:var(--purple2)}

.tiny-label{
  color:var(--purple2);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.input{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:15px 16px;
  color:white;
  outline:none;
}

.input:focus{border-color:rgba(168,85,247,.8)}

@media(max-width:768px){
  .brand-img{width:180px}
  .brand-img-small{width:160px}
}


.site-logo-img{
  display:block;
  width:220px;
  max-width:48vw;
  height:auto;
  object-fit:contain;
}

@media(max-width:768px){
  .site-logo-img{
    width:170px;
  }
}


.top-photo-header{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,5,7,.92),rgba(5,5,7,.72),rgba(5,5,7,.88)),
    url('/assets/header.jpeg') center center / cover no-repeat;
}

.top-photo-header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 20%,rgba(168,85,247,.26),transparent 32%),
    radial-gradient(circle at 80% 30%,rgba(168,85,247,.20),transparent 34%);
}

.top-photo-header > *{
  position:relative;
  z-index:1;
}


main > section:not(.hero-bg):not(.hero-photo-bg){
  background:
    linear-gradient(180deg,rgba(5,5,7,.84),rgba(5,5,7,.92)),
    url('/assets/background.jpg') center center / cover fixed no-repeat;
}




.mobile-menu-btn{
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  z-index:50;
}

.mobile-menu-btn span{
  width:21px;
  height:2px;
  background:#fff;
  border-radius:999px;
  display:block;
}

.mobile-menu-panel{
  display:none;
  padding:0 24px 24px;
  position:relative;
  z-index:40;
}

.mobile-menu-open .mobile-menu-panel{
  display:grid;
  gap:10px;
}

.mobile-menu-panel a{
  display:block;
  padding:15px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-weight:800;
  color:white;
}

.mobile-menu-panel .mobile-menu-cta{
  text-align:center;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
}

@media(max-width:767px){
  .mobile-menu-btn{
    display:flex !important;
  }

  header nav,
  header .purple-btn.hidden{
    display:none !important;
  }
}

@media(min-width:768px){
  .mobile-menu-btn,
  .mobile-menu-panel{
    display:none !important;
  }
}