/* CSS Reset */
*,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin-block-end:0}ol[role=list],ul[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}button,h1,h2,h3,h4,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

html, body {
  margin: 0;
  padding: 0;
  font-size:18px;
  height: 100%;
  font-family: var(--font-body, 'Inter'), sans-serif;
  color: var(--text-color);
  background:var(--bg-color);
  scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, 'Inter'), sans-serif;
  font-weight: 600;
  font-weight: bold;
  line-height: 1.25;
  margin: 0 0 0.25em;
  color: inherit;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3, .tagline { font-size: 1.75rem; } 
h4 { font-size: 1.5rem; }
h5, .subtext, .feature-subtitle { font-size: 1.25rem; } 
h6 { font-size: 1.15rem; }     
p {
  margin: 0 0 1em;
}
ul, ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
}
li {
  margin-bottom: 0.5em;
}
a {
  color: var(--primary-color);
  text-decoration: underline;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--secondary-color);
}
button, .btn,
input[type="submit"] {
  font: inherit;
  display: inline-block;
  background: var(--primary-color);
  color: var(--button-text-color);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
button:hover, .btn:hover,
input[type="submit"]:hover,
header nav ul .btn:focus,
header nav ul .btn:active {
  background-color: var(--secondary-color);
  color: var(--button-text-hover-color);
}
input,
textarea,
select {
  font: inherit;
  padding: 0.5em;
  border: 1px solid var(--text-color);
  border-radius: var(--radius-lg);
  width: 100%;
  margin-bottom: 1em;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-color: var(--primary-color);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.hidden {
  display: none !important;
}
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}
.txt-primary {
  color: var(--primary-color);
}
.txt-accent {
  color: var(--accent-color);
}
.bg-primary {
  background-color: var(--primary-color);
}
.bg-accent {
  background-color: var(--accent-color);
}
.txt-center {
  text-align:center
}
header {
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap:1em;
  flex-direction: row;
  width:100%;
  z-index:999;
  padding: 0.5rem 2rem;
  background-color: var(--bg-color);
}
header nav ul {
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:2rem;
  padding:0;
  margin:0;
}
header nav ul .btn {
  margin-top:0;
  padding:0.5rem 1.5rem;
}
header nav ul li {
  list-style:none;
  margin:0;
}
header nav ul li a {
  text-decoration:none !important;
  padding:5px;
  color:var(--text-color)
}
header nav ul li a:not(.btn):hover,
header nav ul li a.active:not(.btn) {
  color:var(--primary-color);
}
#menu-toggle {
  display:none;
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0;
  z-index: 1002;
}
#menu-toggle:hover {
  background: transparent;
}
#menu-toggle::before{
  content: "";
  position: absolute;
  inset: -8px; 
}
#menu-toggle .menu-bars {
  display:block;
  position: relative;
  height:2px;
  width:100%;
  background:var(--text-color);
  margin: 0 auto;
}
#menu-toggle:hover .menu-bars {
  background:var(--primary-color);
}
#theme-toggle {
  background: transparent;
  color: var(--text-color);
  z-index: 1000;
  margin:0;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
  z-index: 1002; 
}
#theme-toggle:active {
  transform: scale(0.95);
}
#theme-toggle .theme-toggle__within__circle,
#theme-toggle .theme-toggle__within__inner {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform-origin: center;
}
[data-theme='dark'] #theme-toggle .theme-toggle__within__circle {
  transform: scale(1.15);
  opacity: 0.2;
}
[data-theme='dark'] #theme-toggle .theme-toggle__within__inner {
  transform: scale(0.8);
  opacity: 1;
}
[data-theme='light'] #theme-toggle .theme-toggle__within__circle {
  transform: scale(1);
  opacity: 1;
}
[data-theme='light'] #theme-toggle .theme-toggle__within__inner {
  transform: scale(1);
  opacity: 0;
}
.logo.dark { display: none; }
[data-theme="dark"] .logo.dark { display: inline; }
[data-theme="dark"] .logo.light { display: none; }
.logo {
  max-width: 100%;
  height:52px
}
.slider-wrapper {
  position: relative;
  width: 100vw;
  height: auto;
}
.slider-container {
  display: block;
  height: auto;
  overflow: visible; 
  scroll-snap-type: none;
}
.slider-container {
  display: block; 
  height: auto;
  overflow: visible;
  scroll-snap-type: none; 
}
.slider-container::-webkit-scrollbar {
  height: 20px;
}
.slider-container::-webkit-scrollbar-track {
  background: var(--bg-color);
}
.slider-container::-webkit-scrollbar-thumb {
  background:var(--primary-color);
  border-radius: var(--radius-lg);
}
.slider-container::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}
.slider-container {
  scrollbar-width: auto;
  scrollbar-color: var(--primary-color) var(--border-color);
}
.slide {
  height: auto;
  padding: 1.25rem;
  scroll-snap-align: unset;
  box-sizing: border-box;
}
.slide .content {
  padding:5vw;
}

/* Home Slide */
#tagline.slide .content {
  text-align: center;
  max-width:1160px;
}
#tagline .tagline {
  margin-bottom:0
}
#tagline .action-buttons {
  display: flex;
  flex-direction: column;
  gap:1em;
  justify-content: center;
  align-items: center;
  margin-top:1rem;
}
#tagline .reveal-image-wrapper img {
  width: 100%;
  max-width: 100%;
  height:auto;
  aspect-ratio:2 / 1;
  overflow:hidden;
  object-fit: cover;
  cursor: pointer;
  border-radius: var(--radius-lg) var(--radius-lg);
}
.reveal-click-hint {
  position: absolute;
  display:flex;
  flex-direction:row;
  align-items: center;
  gap:0;
  line-height:1;
  top:0.75rem;  
  padding: .2rem .6rem;
  color: var(--bg-color);
  background: var(--text-color);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-md);  
  pointer-events: none;
  user-select: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  opacity:0.75;
}
.reveal-click-hint svg {
  fill:currentColor;
  width:16px;
  height:16px
}

/* About Slide */
#about h2 {
  margin-bottom:2rem;
}
#about .about-wrapper {
  display:grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: stretch;
  justify-items: center;
  align-content: center;
  max-width:991px;
  margin:auto;
}
#about .about-block.text {
  padding:1.5rem;
  display: flex;
  align-items: center;
  text-align:center;
  border:1px solid var(--border-color);
}
#about .about-block.text.overflowing {
  align-items: flex-start; 
  justify-content: flex-start;
}
#about .about-block.image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
#about .about-block.image img {
  object-fit: cover;
}
#about .about-block {
  opacity: 0;
  transition: opacity 700ms ease; 
  will-change: opacity;
}
#about .about-block.revealed {
  opacity: 1;
}
#about .about-block * {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #about .about-block {
    transition: none;
    opacity: 1;
  }
}

/* Features Slide */
#features .features-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  text-align: center;
}
#features .feature-content {
  display: grid;
  gap: 1.5rem;
  max-width:991px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#features .feature-content.fade-out {
  opacity: 0;
}
#features .feature-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
#features .feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
#features .feature-subtitle {
  color: var(--primary-color);
  text-transform: uppercase;
  margin:0;
}
#features .feature-description {
  color: var(--text-color);
}
#features .btn {
  margin-top: 0.5rem;
}
#features .feature-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: stretch;
}
#features .feature-tab {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  margin:0;
  padding: 0.75rem 1.25rem;
  text-align: center;
  color: var(--text-color);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md) var(--radius-md);
  transition: color 0.3s, border-color 0.3s;
}
#features .feature-tab:hover {
  background-color:var(--primary-color)
}
#features .feature-tab.active {
  border-color: var(--primary-color);
  font-weight:bold;
  box-shadow:0px 2px 0px 0px  var(--primary-color);
}
#features .feature-tab:hover,
#features .feature-tab.active:hover {
  color: var(--bg-color);
}
#features .feature-tab span {
  font-size: 0.8rem;
  display: block;
  margin-top: 0.25rem;
}

/* Countdown Slide */
#countdown #timer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
#countdown .time-block {
  padding: 0.75rem;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--border-color, #ccc);
  border-radius: var(--radius-md);
  background: var(--primary-color);
  color: var(--bg-color);
  text-align: center;
  min-width: 80px;
  box-shadow: 0 2px 0 0 transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
  display: grid;
  place-items: center;
}
[data-theme='dark'] #countdown .time-block {
  color: var(--text-color);
}
#countdown .time-block span {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  min-width: 2.2ch;
  text-align: center;
}
#countdown #days { min-width: 3.2ch; }
#countdown .time-block small {
  font-size: .75rem;
  text-transform: lowercase;
}

/* Signup Slide */
#signup.slide {
  flex-direction: column;
}
#signup .content {
  max-width:1024px;
}
#signup form#form {
  display:grid;
  grid-template-columns: 3fr 1fr;
  gap:0;
  margin:2rem 0;
  max-width:600px;
  margin:1em auto 2em;
}
#signup form#form input {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  margin:0;
}
#signup form#form button {
  margin:0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  white-space:nowrap;
}
#signup .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
#signup .form-error,
#signup .form-success {
  text-align: center;
}
#signup .form-error {
  color: var(--error-color, #E63946);
  margin-top: .75rem;
  font-weight: 600;
}
#signup .form-success {
  color: var(--success-color, #2ECC71);
  margin-top: .75rem;
  font-weight: 600;
}
#signup #form-message { min-height: 1.25rem; }
#signup .social-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
#signup .social-links a {
  text-decoration: none;
  font-weight: 600;
  color: var(--text-color);
  transition: color 0.3s ease, border-color 0.3s ease;
  text-decoration:none
}
#signup .social-links a:hover {
  color: var(--primary-color);
  text-decoration:none
}
#site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-color);
  color: var(--text-color-muted);
  font-size: 0.85rem;
  padding: 0.5rem 1rem 0.25rem;
  text-align: center;
  z-index: 1;
}

#site-footer a {
  color: var(--link-color);
  text-decoration: none;
}

#site-footer a:hover {
  text-decoration: underline;
}
#privacy-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
[data-theme='dark'] #privacy-modal {
  background: rgba(0,0,0,0.9);
}
#privacy-modal.modal.open { display: flex; }
#privacy-modal .modal-content {
  background: var(--primary-color);
  color: var(--button-text-color);
  max-width: 600px;
  width: 90%;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  position: relative;
}
[data-theme='dark'] #privacy-modal {
  background: rgba(0,0,0,0.9);
}
#privacy-modal .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
}
#privacy-modal .modal-close:hover {
  color:var(--text-color)
}
@media (min-width:400px) {
  #tagline .action-buttons {
    flex-direction: row;
  }
}
@media (min-width:1025px)  {
  html, body {
    overflow: hidden;
  }
  #menu-toggle {display:none;}
  .slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
  }  
  .slider-container {    
    flex-direction: column;
    display: flex; 
    width: 100vw;
    scroll-behavior: smooth;
    flex-direction: row; 
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
  .slide {
    width: 100%;
    padding: 3rem 2rem;  
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100vw;
    height: 100vh;
    padding: 2rem;
  }
  .arrow {
    display:block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background:transparent !important;
    color: var(--text-color);
    border: none;
    padding: 1rem;
    font-size: 3rem;
    cursor: pointer;
    z-index: 1000;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  .arrow:hover {
    color: var(--primary-color);
  }
  .arrow.left-arrow {
    left: 1rem;
  }
  .arrow.right-arrow {
    right: 1rem;
  }
  #tagline .tagline-wrapper {
    position: relative;
    overflow: hidden;
  }
  #tagline.slide { min-height: 100dvh; }   
  #tagline.slide .content {
    box-sizing: border-box;
    padding: 3rem 3rem 200px;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #tagline .reveal-image-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    transform: translateY(100%); 
    transition: transform 0.8s ease-in-out;
    z-index: 99;
    pointer-events: auto;
    will-change: transform;
  }
  #tagline .reveal-image-wrapper.prep {
    transition: none !important;
  }
  #tagline .reveal-image-wrapper.is-ready{
    transition: transform .8s ease-in-out;
  }
  #tagline .reveal-image-wrapper.hidden {
    transform: translateY(100%);
  }
  #tagline .reveal-image-wrapper.partial {
    transform: translateY(calc(100% - var(--reveal-safe)));
  }
  #tagline .reveal-image-wrapper.full {
    transform: translateY(0); 
  }
  #tagline .reveal-image-wrapper img {
    max-width: 60vw;
    max-height: auto;
    object-fit: cover;
    cursor: pointer;
    aspect-ratio:unset;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  #about .about-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #about .about-block.text {
    max-height: 220px;
    overflow-y: auto;
  }
  #features .features-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  #features .feature-content {
    grid-template-columns: 1fr 2fr;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: left;
    gap: 2rem;
  }
  #features .feature-description {
    max-height: 15vh;
    overflow: auto;
  }
  #features .feature-image {
    max-width: 300px;
    aspect-ratio: 1 / 1;
  }
  #features .feature-tabs {
    justify-content: center;
    margin-top: 2rem;
  }
}

@media (max-width:1024px) {  
  .menu-toggle{ 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    margin:0;
  }
  .slide {
    padding:1.5rem 1.25rem;
  }
  .slide .content {
    padding:2vw
  }
  header {
    display:grid;
    grid-template-columns: 1fr 42px 42px;
    position:fixed;
    z-index: 1003;
  }
  header nav{
    position:fixed;
    inset:60px 0 0 0;        
    transform:translateY(-8px);
    opacity:0; 
    visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index:1000;
    padding:0 1.25rem;
    pointer-events: none;
    background: rgba(0,0,0,.7);
  }
  header nav.open{
    transform:translateY(0);
    opacity:1; 
    pointer-events: auto;
    visibility:visible;
    transition:opacity .2s ease, transform .2s ease;
  }
  header nav ul{
    display:flex; 
    justify-content: space-around;
    flex-wrap: wrap;
    gap:0.5rem;
    justify-content: center;
    background:var(--primary-color);
    padding:1rem 0.5rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md)
  }
  header nav ul li a,
  header nav ul .btn {
    padding:5px 10px;
    display:inline-block;
    color:var(--mobile-menu-color)
  }


  header nav ul li a:hover,
  header nav ul li a:not(.btn):hover,
  header nav ul .btn:hover,
  header nav ul li a.active,
  header nav ul li a:not(.btn):hover, 
  header nav ul li a.active:not(.btn)   {
    color:var(--mobile-menu-color);
    opacity:0.7;
    background:transparent;
  }
  header nav ul .btn{font-weight: 400;}
  .arrow { display: none !important }
  #tagline .reveal-image-wrapper, 
  #tagline .reveal-image-wrapper.partial, 
  #tagline .reveal-image-wrapper.full, 
  #tagline .reveal-image-wrapper.hidden {
    transform: none !important;
  }
  header {
    padding:0.5rem 1rem;
  }
  .logo {
    height: 30px;
  }
  .tagline-wrapper {
    display:flex;
    flex-direction: column;
    margin-top:60px;
    pointer-events: none;
  }
  .tagline-wrapper .reveal-image-wrapper {
    order:1
  }
  .tagline-wrapper .content {
    order:2
  }
  #about .about-block {
    opacity:1
  }
  #about .about-block.image,
  #about .about-block.text {
    aspect-ratio:unset;
    width:100%;
    border:0;
  }
  #about .about-block.image img {
    width:100%;
    border-radius:var(--radius-md)
  }
  #about .about-block.text {
    display:block !important;
    font-size: 1.3rem;;
  }
  #features .feature-tab {
    padding: 0.5rem;
  }
  #site-footer {position: static;}
}
@media (max-width:620px) {
  #signup form#form {
    grid-template-columns: 1fr;
    max-width:300px;
    gap: 0.5rem;
  }
  #signup form#form button,
  #signup form#form input {
    border-radius: var(--radius-lg);
    text-align:center;
  }
}


@media (max-width:420px) {
  h1 {font-size:2rem;}
  .logo {
    height: 25px;
  }
}