:root {
  --background-height: 100vh;
  --viewport-height: 100vh;
}

/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

body {
  line-height: 1.0;
  min-height: var(--viewport-height);
  min-width: 320px;
  overflow-x: hidden;
  word-wrap: break-word;
  background-color: #000000;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

/* Background Slideshow & Overlays */
.site-bg {
  background-attachment: scroll;
  height: var(--background-height);
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: scale(1);
  width: 100vw;
  z-index: 0;
}

.site-bg::before {
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cfilter%20id%3D%22noise%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.5546875%200%200%200%200%200%200.640625%200%200%200%200%200%200.74609375%200%200%200%200%200%200.4375%200%22%20%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20filter%3D%22url%28%23noise%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E'), linear-gradient(to top, rgba(54,57,66,0.329), rgba(54,57,66,0.329));
  background-size: 512px, auto;
  background-position: center, 0% 0%;
  background-repeat: repeat, repeat;
}

.slideshow-background > .slide {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -2;
  animation: slideshow 45s linear infinite;
}

.slideshow-background > .slide:nth-child(1) { animation-delay: 0s; }
.slideshow-background > .slide:nth-child(2) { animation-delay: 5s; }
.slideshow-background > .slide:nth-child(3) { animation-delay: 10s; }
.slideshow-background > .slide:nth-child(4) { animation-delay: 15s; }
.slideshow-background > .slide:nth-child(5) { animation-delay: 20s; }
.slideshow-background > .slide:nth-child(6) { animation-delay: 25s; }
.slideshow-background > .slide:nth-child(7) { animation-delay: 30s; }
.slideshow-background > .slide:nth-child(8) { animation-delay: 35s; }
.slideshow-background > .slide:nth-child(9) { animation-delay: 40s; }

@keyframes slideshow {
  0% { opacity: 0; }
  2% { opacity: 1; }
  11% { opacity: 1; }
  13% { opacity: 0; }
  100% { opacity: 0; }
}

/* Layout Wrapper */
.site-wrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--viewport-height);
  overflow-y: auto;
  position: relative;
  z-index: 10;
}

.site-main {
  align-items: center;
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  max-width: 100%;
  position: relative;
  text-align: left;
  z-index: 1;
  width: 100%;
}

.site-main > .inner {
  padding: 3rem;
  width: 40rem;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

/* Container Style */
.container-component.style-1 {
  background-image: linear-gradient(257deg, #2084DC 0%, #6B000D 91%);
  background-position: 0% 0%;
  background-repeat: repeat;
  background-size: cover;
  border-radius: 1rem;
  width: 100%;
  position: relative;
  z-index: 20;
}

.container-component.style-1 > .wrapper > .inner {
  padding: 5rem 4rem;
}

/* Typography */
h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  line-height: 1.125;
  margin-bottom: 2rem;
}

.main-content h1 {
  font-size: 2.875rem;
  background-image: linear-gradient(45deg, #EBEBEB 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-content h2 {
  font-size: 1.625rem;
  background-image: linear-gradient(45deg, #EBEBEB 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-content p {
  color: rgba(255,255,255,0.671);
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 2rem;
}

/* List Styling */
.main-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 2rem;
}

.main-content ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  color: rgba(255,255,255,0.671);
  font-size: 1.25rem;
  line-height: 1.5;
}

.main-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.main-content ul ul {
  margin-top: 1rem;
  margin-left: 1rem;
}

.main-content ul ul li {
  font-size: 1.1rem;
}

.main-content strong {
  color: #FFFFFF;
  font-weight: bolder;
}

.main-content a {
  color: #FFFFFF;
  text-decoration: underline;
}

.main-content a:hover {
  text-decoration: none;
}

/* Form Styles */
input[type="email"] {
  height: 3.5rem;
  padding: 0 1.225rem;
  line-height: 3.5rem;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  border-radius: 0.5rem;
  border: none;
  width: 100%;
  margin-bottom: 1.5rem;
  background-color: #FFFFFF;
  color: #333;
}

.button, .btn-join {
  display: inline-flex;
  width: 100%;
  height: 3.5rem;
  line-height: 3.5rem;
  padding: 0 1.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  border-radius: 0.5rem;
  background-color: #42B0FF;
  color: #FFFFFF;
  background-image: linear-gradient(15deg, #2679B5 0%, rgba(66,176,255,0.008) 100%);
  text-decoration: none;
  justify-content: center;
  align-items: center;
  transition: transform 0.25s ease;
}

.button:hover, .btn-join:hover {
  transform: scale(1.025);
  background-color: #7AC8FF;
}

/* Social Row */
.social-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.social-row a {
  text-decoration: none !important;
}

.social-row a i {
  font-size: 2.5rem; /* Larger icons like in Carrd */
  color: #FFFFFF;
  display: block;
  text-decoration: none;
}

.social-row a:hover {
  text-decoration: none !important;
}

.social-row a:hover i {
  color: rgba(255,255,255,0.7);
}

.data-usage-notice {
  color: rgba(255,255,255,0.42) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem !important;
  line-height: 2;
  font-weight: 300;
  margin-top: 2rem;
  margin-bottom: 2rem !important;
}

/* Bottom Navigation */
.links-component {
  margin-top: 3rem;
}

.links-component ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
  padding: 0;
}

.links-component ul li a {
  color: #FFFFFF;
  text-decoration: underline;
  font-family: 'Arial', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
}

.links-component ul li a:hover {
  text-decoration: none;
}

/* Remove old header styles */
header { display: none; }

/* Responsive */
@media (max-width: 736px) {
  .site-main > .inner {
    padding: 1.5rem;
  }
  .container-component.style-1 > .wrapper > .inner {
    padding: 3.5rem 2rem;
  }
  .main-content h1 {
    font-size: 1.875rem;
  }
}