/* Base styles */
:root {

    /* Background Colors */
    --color-bg: #26292F;
    --color-bg-level-1: #1D2025;
    --color-bg-level-2: #15171C;
  
    /* Text Colors */
    --color-text-primary: #EEEEEE;
    --color-text-secondary: #FFFFFF;
  
    /* Brand Colors */
    --color-primary: #1058CE;
    --color-secondary: #F72585;
    --color-tertiary: #8FC93A;
  
    /* Status Colors */
    --color-error: #F72585;
    --color-success: #8FC93A;
    --color-warning: #E4CC37;
    --color-info: #4CC9F0;
  
    /* Fonts */
    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Segoe UI', sans-serif;
  
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
  
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 24px;

    /* paddings - margins */
    --space-sm: 0.5em;
    --space-md: 1em;
    --space-lg: 2em;
    --space-xl: 4em;

    --content-max-width:1200px;
    --page-max-width:1440px;

}


body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  background-image:url(bg-image.png);
  backdrop-filter: opacity(20%);
  background-size: 50%;
  overflow-x:hidden;
  height: 100%;
}

a {
  color: var(--color-info);
  text-decoration: none;
}

h1, h2 {
  margin: 0 0 var(--space-sm) 0;
  font-family:var(--font-title)
}

p {
  margin: 0 0 var(--space-md) 0;
}

/* Layout */
.section {
  padding: var(--space-xl) var(--space-lg);
  
  width: var(--content-max-width);
  max-width:99%;
  margin: 0 auto;
  box-sizing: border-box;
}

.logos {
  max-width:100%;
  border-top:1px solid #ffffff22;
  border-bottom:1px solid #ffffff22;
  padding: var(--space-xl) 0;
  margin: var(--space-lg) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
}

.logos img {
  width: 100px;
  max-width:100%;
  height: auto;
  border-radius: var(--radius-md);
  opacity:0.7;
}

.logos img:hover {
  opacity:1;
  transition: all 0.3s ease-in-out;
}

.section .center {
  text-align: center;
  margin-bottom:80px;
}
.section .center h2 {
  margin-top:20px;
  font-size:36px;
}

.section .center p {
  margin:5px;
}

.content.grid {
  gap:50px;
  width:95%;
  max-width:var(--page-max-width);
  margin:0 auto;
}

.content.grid.flipped {
  flex-direction: row-reverse;
  margin-top:-50px;
}

.content.grid  .image {
  flex: 1.5;
  margin-right:-100px;
  margin-top:-50px;
}

.content.grid.flipped .image {
  margin-left:-100px;
  margin-top:-100px;
}

.image img {
  max-width: 90%;
  border-radius: var(--radius-md);
}

.hero {
  text-align: left;
  width:100%;
  margin:0;
  padding: 12em var(--space-lg);
  background-color: var(--color-bg-level-2);
  background-image:url(bg-image.png);
  background-size: 150%;
  background-position: center;
  position:relative;
  box-sizing: border-box;
  overflow-x:hidden;
}


.hero .glasses-rand {
    width: 0px;
    height: 0px;
    background-color: transparent;
    background-size: contain;
    background-repeat:no-repeat;
    background-position: -500px -500px;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    top: 0;
    left: 0;
    position:absolute;
}

.hero .glasses-rand.one {
  width:95px;
  height:95px;
  top:-40px;
  left:-0px;
  rotate: -20deg;
  z-index:99;
}

.hero .glasses-rand.two {
  width:135px;
  height:135px;
  top:150px;
  left:-40px;
  rotate:-10deg;
  z-index:1;
}

.hero .glasses-rand.three {
  width:50px;
  height:50px;
  top:90px;
  left:10px;
  rotate:10deg;
}

.hero .glasses-rand.four {
  width:150px;
  height:150px;
  bottom:-80px;
  top:auto;
  left:auto;
  right:-80px;
  rotate:10deg;
  z-index:99;
}

.hero .glasses-rand.five {
  width:50px;
  height:50px;
  bottom:80px;
  top:auto;
  left:auto;
  right:-10px;
  rotate:-10deg;
  z-index:99;
}

  

.hero .logo img {
  width: 400px;
  max-width:90%;
  height: auto;
  margin-bottom:20px;
  border-radius: var(--radius-lg);
}

.hero .grid {
  gap:20px;
  max-width:var(--page-max-width);
  margin:0 auto;
}

.grid .text,
.grid .image {
  flex: 1;
  position:relative;
}

.hero .grid .text{
  flex: 0.90;
}

.hero .image {
  text-align:right;
}

.hero .image img {
  max-width: 90%;
  height: auto;
  border-radius: var(--radius-lg);
  right:0;
  position:relative;
  z-index:50;
}

.tagline {
  font-size: 1.25em;
  opacity: 0.8;
  margin: var(--space-md) 0;
}

.btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: var(--color-primary);
  color: var(--color-text-primary);
  font-weight: bold;
  border-radius: var(--radius-sm);
  margin-top: var(--space-lg);
  text-transform: uppercase ;
}

.btn-outline {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  font-weight: bold;
  border-radius: var(--radius-xl);
  margin-top: var(--space-lg);
  text-transform: uppercase ;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
}

.feature,
.audience {
  background: var(--color-bg-level-1);
  padding: var(--space-lg);
  flex: 1 1 200px;
  text-align: left;
  background: linear-gradient(var(--color-bg-level-1), var(--color-bg-level-1)) padding-box,
              linear-gradient(to right, var(--color-primary), var(--color-secondary)) border-box;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}

.feature:nth-child(odd) {
  background: linear-gradient(var(--color-bg-level-1), var(--color-bg-level-1)) padding-box,
              linear-gradient(to right, var(--color-secondary),var(--color-primary)) border-box;
}

.feature .icon {
  background:var(--color-primary);
  color:var(--color-text-primary);
  display:block;
  width:60px;
  text-align:center;
  font-size:40px;
  line-height:60px;
  border-radius: var(--radius-sm);
  margin-bottom:var(--space-sm);
  font-style: normal;
  font-weight: 200;
}

.feature .title {
  color: var(--color-text-primary);
  display: block;
  font-weight:600;
  font-size: 1.5em;
}


.cta {
  background:var(--color-bg-level-1);
  text-align: center;
  box-sizing:border-box;
  width: var(--page-max-width);
  max-width:95%;
  padding: var(--space-xl);
  margin:auto;
  border-radius: var(--radius-lg);
  background: linear-gradient(var(--color-bg-level-1), var(--color-bg-level-1)) padding-box,
              linear-gradient(to right, var(--color-primary), var(--color-secondary)) border-box;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}

.cta .grid .text {
  flex: 1.5;
  margin-right: 0;
  text-align:left;
}

.footer {
  text-align: center;
  font-size: 0.9em;
  padding: var(--space-md);
  background: var(--color-bg);
  color:var(--color-text-primary);
}

.muted {
  opacity: 0.7;
}

.bg-primary {
  background: var(--color-primary)!important;
}
.bg-secondary {
  background: var(--color-secondary)!important;
}
.bg-tertiary {
  background: var(--color-tertiary)!important;
}



#glasses-snow-container {
  position: absolute;
  left: 0;
  top:600px;
  width: 100%;
  height: 1600px;
  pointer-events: none; /* allow clicks through */
  z-index: -1;
  overflow: hidden;
}

.glasses-snowflake {
  position: absolute;
  top: -50px;
  will-change: transform;
  opacity: 0.1;
  animation: fall linear;
  pointer-events: none;
}

.glasses-cursor {
  pointer-events: none;

}




@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}




/* Responsive */
@media (max-width: 600px) {
  .grid {
    flex-direction: column;
  }

  .hero {
    width:100%;
    text-align: center;
    padding: 1em 2em 8em 2em;
    box-sizing:border-box;
    
  }

  .hero .image {
    text-align:center;
  }

  .hero .image img {
    top:40px;
  }

  .content.grid.flipped {
    flex-direction: column;
    margin-top:0;
  }
  
  .content.grid  .image {
    margin-right:0;
    margin-top:0;
  }
  
  .content.grid.flipped .image {
    margin-left:0;
    margin-top:0;
  }
  
  .image img {
    max-width: 95%;
    border-radius: var(--radius-md);
  }

  .cta .grid .text {

    text-align:center;
  }

}