/* ––––––––––––––– Hero –––––––––––––––*/
#hero {
    padding-top: var(--spacing-4xl);
    position: relative;
    overflow: hidden;
    min-height: min(calc(100vh - var(--spacing-l) * 2 - 70px), 850px);
    align-items: center;
    background: linear-gradient(122deg, #f8e7ff, #ffffff);
    z-index: 1;
}

#hero .custom-spacer {
    height: 10vh
}

#hero h1 {
  color: var(--c-primary-4);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#hero video {
    max-height: 40vh;
    height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-m);
    box-shadow: var(--shadow-m);
    margin-bottom: var(--spacing-l);
}

#hero .tiles-col {
    margin-bottom: calc(var(--spacing-xl) * -1);
    margin-right: auto;
    transform: translateX(calc(var(--p-ratio) * -75px + 70px));
}

#hero .tiles-upper-row {
  transform: translateX(calc(var(--p-ratio) * -75px + 50px));
}

#hero .tiles-col .tile-secondary {
   transform: translateX(var(--spacing-xl));
}

#hero .mascot-container {
    position: absolute;
    left: 73%;
    bottom: calc(var(--spacing-xl) * -1);
    width: 50%;
    height: 80%;
    z-index: 1;
}

#hero .mascot-container img {
    object-position: left;
    filter: drop-shadow(10px 30px 40px rgba(0, 0, 0, .2));
    transform: scale(1.3);
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (max-width: 1300px) {
    #hero > .container {
        gap: 40px;
    }
}

@media screen and (max-width: 900px) {
    #hero > .container {
        gap: 20px;
    }
}

@media screen and (max-width: 749px) {
    #hero {
        padding-top: calc(var(--spacing-2xl) + 20px);
        min-height: 100vh;
    }

    #hero > .container {
        gap: 30px 
    }

    #hero .tiles-col {
        order: -1;
        margin: 0;
        opacity: 0.9;
        transform: scale(0.95) translateX(calc(var(--p-ratio) * -75px + 70px)) translateY(10px);
        transform-origin: top;
    }

    #hero h1 {
      white-space: normal;
    }

    #hero h1 br {
      display: none;
    }

    #hero .mascot-container {
        display: none;
    }
}


/* ––––––––––––––– Mentioned In –––––––––––––––*/
#mentions {
  padding: var(--spacing-l) 0;
  background-color: var(--bg-bright-2);
  text-align: center;
}

#mentions .logo-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
}

#mentions .logo-grid img {
  height: 30px;
  filter: grayscale(100%) brightness(0);
  opacity: 0.2;
  transition: filter var(--transition-normal), opacity var(--transition-normal);
}

#mentions .logo-grid img:hover {
  filter: grayscale(0);
  opacity: 1;
}


/* ––––––––––––––– USPS: VARFÖR ALLABIDRAG & SIFFROR –––––––––––––––*/
#usps {
    background-color: var(--bg-bright-3);
}

#siffror .tiles-wrapper .tile:nth-child(1) {
    opacity: calc(var(--p-ratio) + 0.5);
    transform: translateX(max(calc(var(--p-ratio) * -70% + 30%),0px));
}

#siffror .tiles-wrapper .tile:nth-child(2) {
    opacity: calc(var(--p-ratio) + 0.47);
    transform: translateX(max(calc(var(--p-ratio) * -105% + 50%),0px));
}

#siffror .tiles-wrapper .tile:nth-child(3) {
    opacity: calc(var(--p-ratio) + 0.44);
    transform: translateX(max(calc(var(--p-ratio) * -145% + 70%),0px));
}

#siffror img.hide-m {
    padding: var(--spacing-m);
    filter: 
        drop-shadow(4px 0px 2px rgba(140, 70, 255, 0.4)) 
        drop-shadow(-50px 0px 7px rgba(140, 70, 255, 0.1)) 
        drop-shadow(-2px 8px 5px rgba(0, 0, 0, 0.2)) 
        brightness(1.1) 
        saturate(1.05);
    transform: translateY(var(--spacing-3xl));
}

@media screen and (max-width: 749px) {
    #usps {
        padding-bottom: 0;
        z-index: 2;
    }

    #siffror .image-col {
        margin-bottom: -17px;
    }

    #siffror img.show-m {
        filter: 
            drop-shadow(-2px -2px 2px rgba(140, 70, 255, 0.4)) 
            drop-shadow(20px 10px 5px rgba(140, 70, 255, 0.1)) 
            drop-shadow(6px 4px 3px rgba(0, 0, 0, 0.5)) 
            brightness(1.1) 
            saturate(1.05);
    }
}


/* ––––––––––––––– KOM IGÅNG: STEG FÖR STEG & FAQ –––––––––––––––*/
#kom-igang {
    background-color: var(--bg-bright-3);
}

/* ––––––––––––––– FINAL CTA –––––––––––––––*/
#final-cta {
    background-color: var(--bg-bright-5);
}







/* ––––––––––––––– About & USP –––––––––––––––*/
.about-usp {
  padding: var(--spacing-2xl) 0;
}

.about-usp h2 {
  text-align: center;
  color: var(--c-primary-1);
  margin-bottom: var(--spacing-xl);
}

.about-usp-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}

.about-column h3, .usp-column h3 {
  color: var(--c-text-dark);
  margin-bottom: var(--spacing-m);
}

.quote {
  font-style: italic;
  color: var(--c-text-medium);
  border-left: 2px solid var(--c-accent-pink);
  padding-left: var(--spacing-s);
  margin: var(--spacing-m) 0;
}

.usp-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.usp-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
}

.usp-item .icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--c-primary-1);
}

.usp-item-content h4 {
  color: var(--c-primary-1);
  margin-bottom: var(--spacing-xs);
}

@media (max-width: 768px) {
  .about-usp-container {
    grid-template-columns: 1fr;
  }
}


/* ––––––––––––––– Pain Points –––––––––––––––*/
.pain-points {
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.pain-points h2 {
  color: var(--c-primary-1);
  margin-bottom: var(--spacing-s);
}

.pain-points-intro {
  max-width: 700px;
  margin: 0 auto var(--spacing-xl);
}

.pain-point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-l);
}

.pain-point-card {
  padding: var(--spacing-l);
  text-align: left;
  position: relative;
}

.pain-point-card .quote {
  font-size: var(--fs-sall);
  margin-bottom: var(--spacing-s);
}

.pain-point-card h4 {
  color: var(--c-text-dark);
  margin-bottom: var(--spacing-s);
}

.pain-point-card .icon {
  position: absolute;
  top: var(--spacing-s);
  right: var(--spacing-s);
  width: 32px;
  height: 32px;
  color: var(--c-accent-pink);
}


/* ––––––––––––––– CTA Banner 2 –––––––––––––––*/
/* Uses the same styles as the first CTA banner */


/* ––––––––––––––– FAQ –––––––––––––––*/
.faq {
  padding: var(--spacing-2xl) 0;
}

.faq h2 {
  text-align: center;
  color: var(--c-primary-1);
  margin-bottom: var(--spacing-xl);
}

.accordion {
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid var(--bg-bright-5);
}

.accordion-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 10px;
  align-items: center;
  padding: var(--spacing-m) var(--spacing-s);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 400;
  font-size: var(--fs-m);
}

.accordion-trigger:hover {
  background-color: var(--bg-bright-2);
}

.accordion-trigger i {
  width: 20px;
  height: 20px;
  text-align: right;
}

.accordion-trigger i::before {
  display: block;
  transition: transform var(--transition-fast);
  transform: scaleY(-1);
}

.accordion-trigger[aria-expanded="true"] i::before {
  transform: scaleY(1);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-fast);
  padding: 0 var(--spacing-s);
}

.accordion-content-inner {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-m);
}