:root {
  --primary-color: #6464f0;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --transition-fast: .15s ease;
  --transition-normal: .3s ease;
}

body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/* header */
.sign-up {
  background-color: var(--primary-color);
  color: #fff;
  transition: var(--transition-fast);
}

.sign-up:hover {
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.nav-link:not(.sign-up):hover {
  color: var(--primary-color);
}


/* hero */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-title {
  font-size: 3em;
}

@media (min-width: 576px) {
  .hero-title {
    font-size: 4em;
  }
}

.download-btn {
  transition: var(--transition-fast);
}

.download-btn span {
  font-size: var(--font-size-xs);
  opacity: .9;
}

.download-btn strong,
.trust-text {
  font-size: var(--font-size-sm);
}

.download-btn:hover {
  background: rgba(255, 255, 255, .2);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.rating-stars {
  color: #fbbf24;
}

.tablet {
  width: 100%;
  aspect-ratio: 95 / 120;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .3));
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition: .5s ease;
}

.tablet:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05);
}


/* experience */
.experience-item {
  background-color: rgb(100 100 240 / 0);
  transition: var(--transition-normal);
}

.experience-item:hover {
  background-color: rgb(100 100 240 / .05);
  border-color: #6366f1 !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}


/* form */
form button {
  background-color: var(--primary-color);
  transition: var(--transition-fast);
}

form button:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}


/* mode */
.theme-btn {
  background-color: rgb(100 100 240 / 0);
  border: solid 1px var(--primary-color);
  transition: var(--transition-fast);
}

.theme-btn:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.theme-btn:hover:not(.active) {
  background-color: rgb(100 100 240 / .05);
}

.theme-btn.active {
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: var(--shadow-md);
}


/* footer */
footer a:hover {
  color: var(--primary-color) !important;
}