/* ============================================
   SOMA9 - Animation & Responsive Enhancements
   ============================================ */

/* Smooth cursor transitions */
* {
  cursor: default;
}

a, button, label {
  cursor: pointer;
}

/* Better transitions on interactive elements */
a, button, .benefit, .flow, .navbar-item {
  transition: color 0.3s ease, transform 0.3s ease;
}

.navbar-item a:hover {
  color: rgba(155, 79, 215, 1);
}

/* Benefit cards */
.benefit {
  border-radius: 1em;
  padding: 2em 1em;
  transition: background-color 0.3s ease;
}

.benefit h3 i {
  color: rgba(155, 79, 215, 0.8);
  margin-right: 0.25em;
  transition: transform 0.3s ease;
}

.benefit:hover h3 i {
  transform: scale(1.2);
}

/* Flow cards enhanced */
.flow {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.flow:hover {
  box-shadow: 0 20px 60px rgba(85, 45, 172, 0.1);
}

/* Button hover effects */
button {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
  box-shadow: 0 8px 30px rgba(252, 255, 102, 0.2);
}

.navbar-items .btn a {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.navbar-items .btn a:hover {
  box-shadow: 0 4px 20px rgba(45, 45, 210, 0.4);
}

/* CTA callout enhanced */
.cta-callout .container {
  transition: transform 0.3s ease;
}

.cta-callout .container:hover {
  transform: scale(1.01);
}

/* Client logos hover */
.client-logos img {
  transition: filter 0.3s ease, transform 0.3s ease;
  filter: brightness(0.6);
}

.client-logos img:hover {
  filter: brightness(1);
  transform: scale(1.1);
}

/* Smooth scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(85, 45, 172, 0.4) transparent;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(85, 45, 172, 0.4);
  border-radius: 3px;
}

/* Social icons hover */
.socials a {
  transition: color 0.3s ease, transform 0.3s ease;
}

.socials a:hover {
  color: rgba(155, 79, 215, 1);
  transform: translateY(-2px);
}

/* Subscribe button */
.sub-form button {
  transition: background 0.3s ease, transform 0.3s ease;
}

.sub-form button:hover {
  background: rgb(60, 60, 230);
  transform: scale(1.03);
}

.sub-form input {
  transition: border-color 0.3s ease;
}

.sub-form input:focus {
  border-color: rgba(85, 45, 172, 0.6);
}

/* Footer link hover */
footer a:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Responsive Enhancements
   ============================================ */

@media screen and (max-width: 1000px) {
  /* Mobile menu improvements */
  .navbar-links {
    gap: 0;
  }

  .navbar-links li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .navbar-links li a {
    display: block;
    padding: 1.2em !important;
    font-size: 16px;
  }

  /* Hamburger animation */
  .hamburger-icon {
    position: relative;
    z-index: 100001;
  }

  .hamburger-icon i {
    font-size: 28px;
    transition: transform 0.3s ease;
  }

  #hamburger-toggle:checked ~ .hamburger-icon i,
  #hamburger-toggle:checked + label i {
    transform: rotate(90deg);
  }
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 42px !important;
    letter-spacing: -1px !important;
  }

  h2 {
    font-size: 32px !important;
    letter-spacing: -1px !important;
  }

  h3 {
    font-size: 15px;
  }

  .hero .container {
    margin-top: 6em;
    border-radius: 2em;
    gap: 2em;
  }

  .hero-copy p {
    width: 90% !important;
    font-size: 13px;
  }

  .hero-img {
    width: 95% !important;
  }

  /* CTA section */
  .cta-1 .container .col:nth-child(1) {
    padding: 2em;
  }

  section.cta-1 .container {
    border-radius: 2em;
  }

  /* Benefits grid */
  .why-pro .benefits {
    flex-direction: column !important;
  }

  .why-pro .benefits .col {
    width: 100%;
  }

  /* Flows */
  .flows {
    gap: 2em !important;
  }

  .flow {
    border-radius: 2em !important;
  }

  .flow-copy {
    padding: 1.5em !important;
  }

  .flow-copy h3 {
    font-size: 22px;
  }

  .flow.flow-lg {
    padding: 2em 2em 6em 2em !important;
  }

  .flow.flow-lg .flow-copy {
    width: 100% !important;
  }

  /* Quote */
  .ob-copy p {
    font-size: 18px !important;
    width: 90% !important;
  }

  /* CTA callout */
  .cta-callout .container {
    border-radius: 2em;
    padding: 4em 2em !important;
  }

  .callout-copy {
    width: 90% !important;
  }

  /* Footer */
  .f-subscribe {
    flex-direction: column !important;
  }

  .sub-form {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
  }

  .sub-form input {
    width: 100% !important;
  }

  .sub-form button {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 32px !important;
  }

  h2 {
    font-size: 26px !important;
  }

  .container {
    padding: 3em 1.5em !important;
  }

  section {
    padding: 0.5em;
  }

  .hero .container {
    margin-top: 5em;
    border-radius: 1.5em;
  }

  .client-logos {
    gap: 1.5em !important;
  }

  .client-logos img {
    width: 80px !important;
  }
}