.cta:not(.cta-joinmap):hover, .cta:not(.cta-joinmap):active {
  background: #f6bad6 !important;
  color: #3d1119 !important;
  transition: background 0.18s, color 0.18s;
}
/* Invert button colors on hover and active, with smooth transition */
.cta, .cta-offer, .block-3-cta {
  transition: background 0.18s, color 0.18s;
  background: #3d1119;
  color: #f6bad6;
}
.cta:hover, .cta:active, .cta-offer:hover, .cta-offer:active, .block-3-cta:hover, .block-3-cta:active {
  background: #f6bad6 !important;
  color: #3d1119 !important;
}
.cta.cta-joinmap:hover, .cta.cta-joinmap:active {
  background: #3d1119 !important;
  color: #f6bad6 !important;
}
.block-3-cta:hover, .block-3-cta:active {
  background: #f6bad6 !important;
  color: #3d1119 !important;
}
@media (min-width: 601px) {
  .footer-content-centered > .footer-contact {
    margin-bottom: 0.2em;
  }
  .footer-content-centered > .footer-links-centered {
    margin-top: 0.2em;
  }
  .footer-content-centered {
    gap: 6px !important;
  }
}
.footer-label-strong {
  font-weight: 900 !important;
  font-size: 1.08em;
  letter-spacing: 0.01em;
  text-transform: none !important;
}
.block-3-footer-overlay .footer-links .vi-highlight:not(:first-child),
.block-3-footer-overlay .footer-contact .vi-highlight:not(:first-child) {
  font-weight: bold !important;
}

.block-3-footer-overlay, .block-3-footer-overlay * {
  font-family: var(--font) !important;
  color: #fb0600 !important;
  font-weight: bold !important;
  filter: none !important;
}

.block-3-footer-overlay img[src$="Logored.png"] {
  height: 54px !important;
  width: auto !important;
  display: inline-block;
  vertical-align: middle;
  filter: none !important;
}
.block-3-footer-overlay img[src$="Logored.png"] {
  height: 54px !important;
  width: auto !important;
  display: inline-block;
  vertical-align: middle;
}
.vi-highlight {
 /*background: #ffff; */
  border-radius: 0px; 
  padding: 0.1em 0.3em;
  display: inline;
  box-decoration-break: clone;
}
/* Overlay footer for block-3-inner */
.block-3-inner {
  position: relative;
}


.block-3-footer-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: none;
  color: #fb0600;
  padding: 24px 16px 16px 16px;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
}

.block-3-footer-overlay .footer-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.block-3-footer-overlay .footer-contact {
  margin-right: 120px;
  margin-bottom: 12px;
}

.block-3-footer-overlay .footer-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.block-3-footer-overlay .footer-links div {
  min-width: 120px;
}

.block-3-footer-overlay a {
  color: #fb0600;
  text-decoration: underline;
}
.block-3-footer-overlay .footer-content,
.block-3-footer-overlay .footer-contact,
.block-3-footer-overlay .footer-links,
.block-3-footer-overlay .footer-links div,
.block-3-footer-overlay strong {
  color: #fb0600;
}

@media (min-width: 600px) {
  .block-3-footer-overlay .footer-content {
    flex-direction: row;
   /* justify-content: space-between;*/
    align-items: flex-end;
  }
  .block-3-footer-overlay .footer-contact {
    max-width: 350px;
  }
}
.statistics-container{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 20px;
  width:100%;
  max-width:900px;
  margin:40px auto 60px;
}

.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 8px;
  min-width:0;
}

.stat-number{
  font-size:clamp(1.8rem,4.2vw,3.2rem);
  font-weight:800;
  color:#38141a;
  line-height:1.05;
  margin:0 0 8px 0;
}

.stat-label{
  font-size:clamp(0.85rem,1.6vw,0.95rem);
  color:#38141a;
  line-height:1.35;
  margin:0;
  max-width:22ch;
}

.stat-number.dark-bg,
.stat-label.dark-bg{
  color:#f5b5d3;
}

@media (min-width:768px){
  .statistics-container{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    margin:60px auto;
  }
}

@media (max-width:380px){
  .statistics-container{
    grid-template-columns:1fr;
  }
}








/* Dölj som standard (desktop) */
.between-header-about {
  display: none;
}

/* Mobil */
@media (max-width: 768px) {
  .between-header-about {
    display: block;
    margin: 40px 0;
    padding-top: 11px;
    text-align: center;
  }

  .between-header-about img {
    max-width: 110px;
    height: auto;
  }
}


.between-header-about img {
  max-width: 150px; /* justera vid behov */
  height: auto;
}





.about-hero-left .about-main-desc {
  text-align: justify;
  text-justify: inter-word;
  max-width: 700px;
  margin-left: 0;
  margin-right: 0;
  font-family: var(--font);
  font-weight: 500;
  color: #3d1119;
  line-height: 1.6;
  letter-spacing: 0.01em;
  padding-top: 1em;
  padding-right: 0em;
  padding-bottom: 0em;
  padding-left: 3em;
}
@media (max-width: 900px) {
  .about-hero-left .about-main-desc {
    font-size: 1.6rem;
    max-width: 96vw;
    padding-top: 2.7em;
    padding-right: 0.2em;
    padding-bottom: 0.7em;
    padding-left: 0.9em;
  }
}
/* About Us Hero Two-Column Layout */
.about-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  width: 100vw;
  max-width: 100vw;
  background: #ecb8d2;
  min-height: 420px;
  box-sizing: border-box;
}
.about-hero-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.about-hero-left {
  align-items: flex-start;
  padding-left: 0;
  max-width: 50vw;
}
.about-hero-right {
  align-items: center;
  justify-content: center;
  max-width: 50vw;
  padding-right: 88px;
}
.about-hero-img {
  max-width: 98%;
  max-height: 773px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  padding-top: 56px;
  padding-right: 12px;
  padding-bottom: 0;
  padding-left: 0;
  animation: phone-float 9.5s ease-in-out infinite alternate;
}
@media (max-width: 900px) {
  .about-hero {
    flex-direction: column;
    min-height: unset;
  }
  .about-hero-left, .about-hero-right {
    max-width: 100vw;
  }
  .about-hero-right {
    order: 1;
    padding-top: 0em;
    padding-bottom: 2em;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .about-hero-left { order: 2; }
  .about-hero-img {
    max-width: 340px;
    max-height: 586px;
    margin: 24px auto 0 auto;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
}
/* About section: small inline note */
.about-desc-small {
  font-size: 1.1rem;
  color: #3d1119;
  font-weight: 400;
  opacity: 1;
}
/* About section main description responsive styles */
/* About section main description responsive column layout */
/* About section: justified, boxy newspaper-style column layout */
/* About section: justified, single column, newspaper-style */
.about-main-desc {
  display: block;
  font-size: 2rem;
  text-align: justify;
  text-justify: inter-word;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font);
  font-weight: 500;
  color: #3d1119;
  line-height: 1.6;
  letter-spacing: 0.01em;
  padding: 0 0.5em;
}
/* No multi-column layout on desktop */
@media (max-width: 700px) {
  .about-main-desc {
    font-size: 1.6rem;
    text-align: justify;
    text-justify: inter-word;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    letter-spacing: 0.01em;
    padding: 0 0.5em;
  }
}
/* ===== Slider Styles ===== */
.slider-container {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  position: relative;
  background: transparent;
  padding: 0;
}
.slider-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(.77,0,.18,1);
  gap: 24px;
  will-change: transform;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 16px 0;
}
.slider-img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 4px 18px rgba(61,17,25,0.10);
  background: #eee;
  object-fit: cover;
  display: block;
  margin: 0;
}
.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto 0 auto;
  padding-bottom: 12px;
}
.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d1b6c6;
  opacity: 0.5;
  transition: background 0.2s, opacity 0.2s;
  cursor: pointer;
}
.slider-dot.active {
  background: #3d1119;
  opacity: 1;
}
@media (max-width: 900px) {
  .slider-track { gap: 16px; }
  .slider-img { border-radius: 16px; }
}
@media (max-width: 600px) {
  .slider-track { gap: 8px; }
  .slider-img { border-radius: 10px; }
}
body {
  background: #ecb8d2;;
}
/* ===================== RESET ===================== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
}


/* ===================== VARIABLER ===================== */
:root{
  --accent: #331809;
  --white: #ffffff;
  --font: Menlo, monospace;
}

/* ===================== LAYOUT ===================== */
.block-2-bg {
  background: #ecb8d2;
  width: 100%;
}
.block-2 {
  background: transparent;
}
.block-3 {
  background: transparent;
  color: inherit;
  padding-top: 80px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.block-3-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.join-map-section {
  background: #ecb8d2;
  color: #3d1119;
 /* padding: 64px 0 72px 0;*/
  width: 100%;
}
.join-map-inner {
  max-width: 700px;
  margin: 0 auto;
  /* padding: 0 24px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ===================== TYPOGRAFI ===================== */
.menu, nav, .meny {
  font-family: var(--font);
  font-size: 0.95rem;
}
ul, ol, li, p, h2, .join-map-title, .offer-title {
  font-family: var(--font);
}

/* ===================== KOMPONENTER ===================== */
/* Knappar */

.cta {
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: none;
  border-radius: 54px;
  padding: 28px 35px;
  /* color and background moved to shared selector for proper hover/active inversion */
}

.block-3-cta {
  display: block;
  margin: 0 auto 48px auto;
  background: #3d1119;
  color: #f6bad6;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 28px 60px;
  border-radius: 54px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(61,17,25,0.18), 0 2px 6px rgba(0,0,0,0.25);
  transition: transform .14s ease, box-shadow .14s ease;
}
.cta-offer {
  background: #3d1119;
  color: #f6bad6;
  display: block;
  margin: 32px auto 0 auto;
  padding: 64px 48px;
  min-width: 180px;
  max-width: 100%;
  font-weight: 700;
}

/* ...Flytta hit övriga komponenter (listor, bilder, rubriker, etc) ... */

/* ===================== MEDIA QUERIES ===================== */
@media (max-width: 600px) {
  .cta.cta-joinmap {
  padding: 35px 35px;
} 
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .cta-header-row {
    flex-direction: column;
    gap: 12px;
    max-width: 90vw;
      align-items: stretch;
  }
  .hero-inner .cta:not(.cta-offer) {
     padding: 35px 35px;
    width: 90vw;
    min-width: 0;
    max-width: 190px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  
/*
@media (max-width: 650px) {
  .offers-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .offer {
    max-width: 100%;
    width: 100%;
  }
} */
/* ...Flytta hit övriga media queries... */
/* Gör headerknapparna lika breda */
.cta-header-row {
  display: flex;
  gap: 18px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 0 auto;
}
.hero-inner .cta {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
/* Beskrivning under Join the map */
.join-map-desc {
  font-size: 1.25rem;
  color: #3d1119;
  text-align: center;
  /* margin: 0 0 36px 0; */
  font-family: var(--font);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 1;
}
/* Pristext under offertitlar */
.offer-price {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: -18px;
  text-align: left;
  opacity: 0.85;
  font-family: var(--font);
}
.offer-price-free {
  color: #3d1119;
}
.offer-price-premium {
  color: #3d1119;
}
/* Katun-bilder för block 3 */
.katun-img {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: auto;
  object-fit: cover;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  z-index: 1;
  vertical-align: bottom;
  border: none;
}
.block-3-inner {
  position: relative;
  z-index: 2;
}
.block-3-inner {
  padding-bottom: 0;
}
.katun-img-desktop {
  display: block;
}
.katun-img-mobile {
  display: none;
}
@media (max-width: 600px) {
  .katun-img-desktop {
    display: none;
  }
  .katun-img-mobile {
    display: block;
    max-width: 90vw;
  }
}
/* Mobile fix: säkerställ rundade hörn för knappar på små skärmar (överskrivs vid behov) */
@media (max-width: 600px) {
  .cta,
  .cta-offer,
  .block-3-cta,
  .contact-btn,
  .contact-form button[type="submit"] {
    border-radius: 54px !important;
    overflow: visible !important;
  }
}
/* Katun copy avslut och varianter */
.katun-copy {
  font-family: var(--font);
  font-size: 1.25rem;
  text-align: center;
  color: #f6bad6;
  margin: 32px 0 0 0;
}
.katunfullscreen-copy {
  display: block;
}
.katunmobil-copy {
  display: none;
}
@media (max-width: 600px) {
  .katunfullscreen-copy {
    display: none;
  }
  .katunmobil-copy {
    display: block;
    font-size: 1.05rem;
    margin-top: 24px;
  }
}
/* Block 3 rubrik och knapp */
.block-3-title {
  font-size: 2.6rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 32px;
  color: #f6bad6;
  letter-spacing: -1px;
  line-height: 1.18;
}
.block-3-desc {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 36px;
  color: #f6bad6;
}
.block-3-cta {
  display: block;
  margin: 0 auto 48px auto;
  background: #3d1119;
  color: #f6bad6;
  color: #3d1119;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 28px 60px;
  border-radius: 54px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(61,17,25,0.18), 0 2px 6px rgba(0,0,0,0.25);
  transition: transform .14s ease, box-shadow .14s ease;
}
.block-3-cta:active {
  transform: translateY(1px) scale(.995);
}
.block-3-cta:focus {
  outline: 3px solid rgba(255,255,255,0.12);
  outline-offset: 3px;
}
/* Block 2 bakgrund: rosa, täcker hela ytan tills block 3 börjar */
.block-2-bg {
  background: #ecb8d2;
  width: 100%;
}
.block-2 {
  background: transparent;
}
/* Block 3: mörkröd bakgrund */
.block-3 {
  background: #ecb8d2;
  color: inherit;
  padding-top: 80px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.block-3-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Header-knapp: rosa bakgrund, mörkröd text */
.hero .cta:not(.cta-offer) {
  background: #f6bad6;
  color: #3d1119;
}
/* Offer-knappar: mörkröd bakgrund, rosa text */
.cta-offer {
  background: #3d1119;
  color: #f6bad6;
}
/* Längre knapp för offerter */
.cta-offer {
  display: block;
  margin: 32px auto 0 auto;
  padding: 64px 48px;
  min-width: 180px;
  max-width: 100%;
}
/* Bulletpoints (li, ul, ol) får samma font som headern */
ul, ol, li {
  font-family: var(--font);
}
/* Alla p-element får samma font som headern */
p {
  font-family: var(--font);
}
.join-map-title {
    padding-top: 62px;
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 28px;
  color: #f6bad6;
  text-align: center;
  width: 100%;
  font-family: var(--font);
  letter-spacing: -1px;
  text-shadow: none;
}
/* Gör h2 mindre än titeln */
h2 {
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font);
  margin-bottom: 18px;
  color: #f6bad6;
}

.offers-row {
  display: flex; 
  flex-direction: row;
  gap: 32px;
  justify-content: center;
  width: 100%;
  flex-wrap: nowrap;
  min-width: 0;
}
.offer {
  background: #3d1119;
  border-radius: 32px;
  box-shadow: 0 4px 24px rgba(61,17,25,0.12);
  padding: 48px 40px 44px 40px;
  flex: 1 1 800px;
  max-width: 800px;
  min-width: 380px;
  color: #f6bad6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.offer-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 28px;
  color: #3d1119;
  text-align: left;
  width: 100%;
  font-family: var(--font);
}
.offer-list {
  list-style: none;
  font-size: 1.05rem;
  color: #3d1119;
  padding-left: 0;
  margin: 0;
}
.offer-list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 36px;
}
.offer-list li::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  /* försöker ladda extern fil först; om den saknas (case-sensitive server)
    så används en inbäddad SVG-fallback så layouten inte spricker på hostern */
  /* Försök flera vanliga sökvägs/case-varianter (minska risk för case-sensitive 404 på server) */
  /* Prioritera filnamn som finns i projektmappen (stor B), sedan andra varianter */
  background-image: url('Bubbla.jpg'), url('bubbla.jpg'), url('/Bubbla.jpg'), url('/bubbla.jpg'), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><radialGradient id='g' cx='50%' cy='30%' r='60%'><stop offset='0%' stop-color='%23ffffff' stop-opacity='0.95'/><stop offset='60%' stop-color='%23829DCE' stop-opacity='0.95'/><stop offset='100%' stop-color='%236b8bb8' stop-opacity='0.9'/></radialGradient></defs><circle cx='100' cy='100' r='80' fill='url(%23g)'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.offer-list li {
  margin-bottom: 10px;
}

@media (max-width: 800px) {
  .offers-row {
    flex-direction: column;
    align-items: baseline;
    gap: 24px;
  }
  .offer {
    max-width: 100%;
    width: 100%;
  }
}
/* Join the map section styles */
.join-map-section {
  background: #ecb8d2;
  color: #3d1119;
  /* padding: 64px 0 72px 0; */
  width: 100%;
}
.join-map-inner {
  max-width: 700px;
  margin: 0 auto;
  /* padding: 0 24px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.join-map-title {
  font-size: 2.2rem;
  font-weight: 700;
  /* margin-bottom: 28px; */
  color: #3d1119;
}
.join-map-list {
  list-style: disc inside;
  font-size: 1.15rem;
  color: #3d1119;
  padding-left: 18px;
}
.join-map-list li {
  margin-bottom: 16px;
}
/* Sticky logo that appears when header is out of view */
/* Basic reset */
* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; }

  .join-map-section {
  background: #ecb8d2;
    color: #3d1119;
   /* padding: 80px 0 90px 0; */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
/* Colors & font */
:root{
  --accent: #331809;
  --white: #ffffff;
  --font: Menlo, monospace;
}

/* Full-screen hero using header.png */
  .join-map-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadein 1.1s cubic-bezier(.33,1.02,.44,1) 1;
  }
.hero{
  height: 110vh; /* fill viewport */
  min-height: 100dvh; /* mobile-safe */
  display: flex;
  align-items: center;
  justify-content: center;

  .join-map-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 38px;
    color: #3d1119;
    letter-spacing: -1px;
    text-align: center;
  text-shadow: none;
  }
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background-image: url('header.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: var(--white);
  font-family: var(--font);
  font-weight: 400; /* changed: regular */
  margin-top: -135px;
  position: relative; /* new */
  overflow: hidden;   /* keep moving shapes clipped to hero */
}

/* center content block */
.hero-inner{
  width: 100%;
  max-width: 920px;
  padding: 6vmin 6vmin;
  .offers-row-nobox {
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 38px;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 6px 32px 0 rgba(61,17,25,0.10);
    padding: 44px 32px 40px 32px;
    position: relative;
    min-height: 340px;
    overflow: hidden;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.8vh, 12px); /* mindre gap => logo närmare text */
  /* subtle shadow for readability on varied backgrounds */
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  position: relative;
  z-index: 1; /* sits above .float-under and below .float-over */
}
  .offers-row-nobox > div {
    flex: 1 1 340px;
    min-width: 260px;
    max-width: 480px;
    padding: 0 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .offers-row-nobox > div:not(:last-child) {
    border-right: 1.5px solid #ecb8d2;
  }

/* responsive logo */
.logo{
  width: auto;
  /* larger, responsive logo */
  height: clamp(80px, 19vh, 220px);
  display: block;
  .offer-title-dark {
    color: #3d1119;
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 22px;
    text-align: left;
    letter-spacing: -0.5px;
  }
  object-fit: contain;
  -webkit-user-drag: none;
  margin-bottom: -7px; /* flytta logon närmare tagline */
}

/* Simplified tagline: original text as a single element + only side padding */
  .offer-list-dark {
    color: #3d1119;
    font-size: 1.13rem;
    list-style: none;
    padding-left: 0;
  }
.tagline{
  margin: 0 0 14px 0;
  padding: -1 6vmin;                /* endast padding på kanterna */
  text-align: center;
  color: #fff;
  font-family: var(--font);
  font-weight: 400; /* changed: regular */
  font-size: clamp(14px, 3.2vw, 18px);
  line-height: 1.4;
  max-width: min(56ch, 92%);
  width: 100%;
  text-shadow: none;
  @media (max-width: 1000px) {
    .offers-row-nobox {
      flex-direction: column;
      align-items: stretch;
      padding: 32px 8vw 32px 8vw;
      min-height: unset;
    }
    .offers-row-nobox > div {
      max-width: 100%;
      padding: 0 0 32px 0;
      border-right: none !important;
      border-bottom: 1.5px solid #ecb8d2;
    }
    .offers-row-nobox > div:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  @keyframes fadein {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Mobile tweak: mindre textstorlek men behåll paddings och undvik avklipp */
@media (max-width: 520px){
  .tagline{
    padding: 0 5vmin;
    font-size: clamp(12px, 4.6vw, 15px);
    line-height: 1.18;
    max-width: 96%;
  }
}

/* first line always its own row */
.tagline-line.line1{
  display: block;
  text-align: center;
  font-size: clamp(14px, 3.2vw, 18px);
  line-height: 1.2;
}

/* group contains the rest — on desktop it's one inline row,
   on mobile it becomes stacked rows */
.tagline-group{
  display: inline-block;   /* keeps second+third as one visual line on desktop */
  white-space: nowrap;     /* keep them together on desktop */
  text-align: center;
  font-size: clamp(14px, 3.2vw, 18px);
  line-height: 1.2;
}

/* inner spans inside the group are inline on desktop */
.tagline-group .tagline-line{
  display: inline;
}

/* Mobile: exakt tre rader, jämnt mellanrum, text får brytas och hålla padding */
@media (max-width: 520px){
  .tagline{
    gap: 6px;            /* equal smaller gap between each of the three rows */
    padding: 0 5vmin;
    max-width: 96%;
    width: 100%;
  }

  .tagline-line.line1{
    font-size: clamp(12px, 4.6vw, 15px);
  }

  .tagline-group{
    display: flex;
    flex-direction: column;
    gap: 6px;            /* same gap as .tagline so spacing is consistent */
    white-space: normal; /* allow wrapping if needed */
    width: 100%;
    align-items: center;
  }

  .tagline-group .tagline-line{
    display: block;
    font-size: clamp(12px, 4.6vw, 15px);
    line-height: 1.18;
    width: 100%;
    margin: 0;
    padding: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* Force each span to stay as a single line (no internal wraps).
   Reduce font-size responsively so both lines fit without wrapping to a 3:e rad. */
.tagline-line{
  display: inline-block;
  white-space: nowrap;                    /* EN rad per span */
  text-align: center;
  font-size: clamp(14px, 3.2vw, 18px);   /* skalar ner på smalare skärmar */
  line-height: 1.2;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;                       /* undvik att text sticker ut */
  text-overflow: clip;
}

/* lite extra balans för första raden */
.tagline-line:first-child{
  padding-right: 6px;
}

/* If viewport gets narrow, shrink the tagline so it fits and stays readable */
@media (max-width: 520px){
  .tagline{ padding: 0 5vmin; max-width: 96%; width: 100%; }
  .tagline-line{
    display: block !important;
    white-space: normal !important;      /* tillåt radbrytning */
    overflow: visible !important;        /* inget klipp */
    text-overflow: unset !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: clamp(12px, 4.6vw, 15px);
    line-height: 1.18;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
  }

  /* säkerställ knapp inte orsakar horisontell scroll */
  .cta{
    max-width: 92%;
    white-space: normal;
    word-break: keep-all;
  }
}

/* extra säkerhet för mycket små skärmar */
@media (max-width: 360px) {
  .tagline-line{
    font-size: clamp(11px, 5.6vw, 14px);
    line-height: 1.14;
  }
}

/* small chunky button */
.cta{
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #f6bad6;
  background: #3d1119;
  border: none;
  border-radius: 54px;
  padding: 28px 35px;
  min-height: 40px; /* touch target */
  font-size: clamp(12px, 1.8vh, 14px);

  font-family: var(--font);
  box-shadow: 0 6px 18px rgba(51,24,9,0.18), 0 2px 6px rgba(0,0,0,0.25);
  transition: transform .14s ease, box-shadow .14s ease;
  margin-top: 14px; /* ökat mellanrum över knappen */
  position: relative; /* säkerställer att knappen kan ligga ovanpå bubblor */
  z-index: 3;         /* prioritet över float-over så den alltid syns */
  max-width: 92%;     /* håll knappen inom viewport på små skärmar */
  box-sizing: border-box;
}

/* hover / active */
.cta:active{ transform: translateY(1px) scale(.995); }
.cta:focus{ outline: 3px solid rgba(255,255,255,0.12); outline-offset: 3px; }

/* make sure everything fits on small screens */
@media (max-width: 420px){
  .hero-inner{ padding: 5vmin; gap: 10px; }
  .logo{ height: clamp(56px, 29vw, 150px); }
  .tagline{ font-size: 13px; margin-bottom: 8px; padding: 0 5vmin; }

  .cta{
    padding: 16px 26px;                 /* större klickyta */
    min-height: 56px;                   /* matchar desktop touch-target */
    font-size: clamp(14px, 4.2vw, 18px);
    border-radius: 28px;                /* rundare, liknande desktop */
    margin-top: 18px;
    max-width: 92%;
    box-sizing: border-box;
    box-shadow: 0 8px 22px rgba(51,24,9,0.20), 0 3px 8px rgba(0,0,0,0.28);
    position: relative;
    z-index: 3;
    align-self: center;
    white-space: nowrap;                /* håller knapptexten på en rad */
  }
}

/* landscape phones / small tablets: keep content centered but smaller */
@media (max-height: 420px){
  .hero-inner{ gap: 8px; padding: 4vmin; }
  .logo{ height: clamp(56px, 14vh, 150px); }
  .tagline{ font-size: 12px; }
}

/* floating layer (shared) */
.float-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* one layer explicitly above the content */
.float-over{ z-index: 2; }

/* bubbles (flat solid circles) */
.bubble{
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  /* increased sizes: larger min, larger responsive value, larger max */
  width: clamp(48px, 9vmin, 160px);
  height: clamp(48px, 9vmin, 160px);
  box-shadow: none;
}

/* colors: five blue (#829DCE) and one green (#C3D663) */
.b1, .b2, .b3, .b4, .b5, .b6 {
  /* försök extern fil först, fallback till inbäddad SVG om filen inte finns på servern */
  /* Försök flera vanliga sökvägs/case-varianter (minska risk för case-sensitive 404 på server) */
  /* Prioritera filnamn som finns i projektmappen (stor B), sedan andra varianter */
  background-image: url('Bubbla.png'), url('bubbla.png'), url('/Bubbla.png'), url('/bubbla.png'), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><radialGradient id='g' cx='50%' cy='30%' r='60%'><stop offset='0%' stop-color='%23ffffff' stop-opacity='0.95'/><stop offset='60%' stop-color='%23829DCE' stop-opacity='0.95'/><stop offset='100%' stop-color='%236b8bb8' stop-opacity='0.9'/></radialGradient></defs><circle cx='100' cy='100' r='80' fill='url(%23g)'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

/* initial placement (percentage) — keeps layout responsive */
.b1{ left: 8%;  top: 12%;  }
.b2{ left: 72%; top: 10%;  }
.b3{ left: 18%; top: 62%;  }
.b4{ left: 50%; top: 28%;  }
.b5{ left: 86%; top: 60%;  }
.b6{ left: 36%; top: 78%;  }

/* --- MOVEMENT: 4 short movers (b1..b4) + 2 long movers (b5,b6) --- */
/* short movers: snabbare, små områden */
.b1 { animation: short-path-1 6.0s  cubic-bezier(.22,.78,.3,1) infinite; animation-delay: 0.05s; }
.b2 { animation: short-path-2 7.0s  cubic-bezier(.24,.8,.28,1)  infinite; animation-delay: 0.18s; }
.b3 { animation: short-path-3 6.5s  cubic-bezier(.2,.78,.26,1)  infinite; animation-delay: 0.32s; }
.b4 { animation: short-path-4 6.5s  cubic-bezier(.26,.8,.3,1) infinite; animation-delay: 0.10s; }

/* long movers: större räckvidd, längre cykler, men hålls inom viewport */
.b5 { animation: long-path-5 11s  cubic-bezier(.18,.82,.25,1) infinite; animation-delay: 0.20s; }

/* --- ändrat: endast b6 använder nu kort rörelse (så den beter sig som i början) --- */
.b6 {
  animation: short-path-3 6.5s cubic-bezier(.2,.78,.26,1) infinite;
  animation-delay: 0.25s;
}

/* Any bubble placed inside the .float-over layer (over the logo)
   will use a faster, snappier timing so it appears quicker over the logo.
   This only overrides timing/duration/easing — it keeps the existing keyframes. */
.float-over .bubble {
  animation-duration: 6s !important;
  animation-timing-function: cubic-bezier(.55,0,.3,1) !important;
  animation-delay: 0.12s !important;
  animation-iteration-count: infinite !important;
  will-change: transform, opacity;
}

/* Short paths — subtle bursts and gentle return (use vw/vh so responsive) */
@keyframes short-path-1 {
  0%   { transform: translate3d(0,0,0); }
  12%  { transform: translate3d(-3.6vw, -2.6vh, 0); }  /* quick outward */
  40%  { transform: translate3d(-2.2vw, -1.2vh, 0); }  /* slow drift */
  72%  { transform: translate3d(-3.0vw, -1.8vh, 0); }  /* gentle move */
  100% { transform: translate3d(0,0,0); }              /* return */
}
@keyframes short-path-2 {
  0%   { transform: translate3d(0,0,0); }
  14%  { transform: translate3d(3.4vw, -2.2vh, 0); }
  42%  { transform: translate3d(2.0vw, -1.0vh, 0); }
  76%  { transform: translate3d(3.0vw, -1.4vh, 0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes short-path-3 {
  0%   { transform: translate3d(0,0,0); }
  10%  { transform: translate3d(-2.4vw, 2.8vh, 0); }
  38%  { transform: translate3d(-1.6vw, 1.4vh, 0); }
  70%  { transform: translate3d(-2.6vw, 2.0vh, 0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes short-path-4 {
  0%   { transform: translate3d(0,0,0); }
  13%  { transform: translate3d(2.8vw, 1.6vh, 0); }
  44%  { transform: translate3d(1.8vw, 0.8vh, 0); }
  74%  { transform: translate3d(2.6vw, 1.4vh, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* Long paths — use more area but keep inside screen edges (caps ~36vw / ~20vh) */
@keyframes long-path-5 {
  0%   { transform: translate3d(0,0,0); }
  /* mindre, säkrare förflyttningar så bubblan håller sig synlig */
  12%  { transform: translate3d(10vw, 3vh, 0); }   /* snabb ut men inte för långt */
  38%  { transform: translate3d(3vw, 6vh, 0); }   /* nära kant men synlig */
  66%  { transform: translate3d(15vw, 5vh, 0); }   /* lugn drift */
  100% { transform: translate3d(0,0,0); }          /* åter till centrum */
}
@keyframes long-path-6 {
  0%   { transform: translate3d(0,0,0); }
  15%  { transform: translate3d(-14vw, -4vh, 0); }
  42%  { transform: translate3d(-26vw, -10vh, 0); }  /* near edge but stays visible */
  72%  { transform: translate3d(-22vw, -8vh, 0); }   /* drift back a bit */
  100% { transform: translate3d(0,0,0); }
}

/* keep reduced-motion preference honored */
@media (prefers-reduced-motion: reduce){
  .b1, .b2, .b3, .b4, .b5, .b6 {
    animation: none !important;
    transform: translate3d(0,0,0) !important;
  }
  .b6, .float-over .bubble { animation: none !important; transform: none !important; opacity: .95 !important; }
}

/* keep everything clipped nicely on small screens */
@media (max-width: 420px){
  .b1{ left: 6%; top: 10%; }
  .b2{ left: 70%; top: 8%; }
  .b3{ left: 14%; top: 64%; }
  .b4{ left: 52%; top: 30%; }
  .b5{ left: 72%; top: 58%; }
  .b6{ left: 34%; top: 76%; }
}

/* Mobile: större och jämnt mellanrum mellan tagline-rader */
@media (max-width: 520px) {
  .tagline{
    padding: 0 5vmin;
    max-width: 96%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Ökad, jämn line-height för bättre läsbarhet på mobilen */
  .tagline,
  .tagline-line,
  .tagline-group .tagline-line {
    line-height: 1.5;            /* öka här till 1.4–1.6 efter behov */
    font-size: clamp(12px, 4.6vw, 15px);
  }

  /* bevara vertikalt mellanrum mellan rader */
  .tagline{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* iPhone 14 Pro Max (portrait) — only reduce logo size, do not affect desktop */
@media (orientation: portrait) and (max-width: 430px) and (min-height: 900px) and (pointer: coarse) {
  .logo{
    /* tighter cap for iPhone 14 Pro Max */
    max-height: 130px !important;
    margin-bottom: 6px !important;
  }
}

/* Target iPhone 14 Pro Max (portrait) only — tighten logo so it won't bleed.
   Uses device-width/device-height for a narrow device-specific rule.
   This won't affect desktop or other phones. */
    text-shadow: none;
  .logo {
    height: clamp(40px, 10.5vh, 96px) !important;
    max-height: 110px !important;
    width: auto !important;
    margin-bottom: 6px !important;
  }

/* Make bubbles as large on mobile as on desktop (caps at desktop max) */
@media (max-width: 520px) {
  .bubble {
    /* medium size on mobile — smaller than 22vw but larger than desktop min */
    width: clamp(40px, 18vw, 140px);
    height: clamp(40px, 18vw, 140px);
  }
}

/* Header social icons */
.header-right a.social-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.header-right a.social-icon img {
  height: 48px;
  width: 48px;
  vertical-align: middle;
}

@media (min-width: 701px) {
  .header-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .header-left,
  .header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px;
    flex-wrap: nowrap !important;
  }
  .header-left a,
  .header-right a {
    display: inline-flex !important;
    white-space: nowrap !important;
  }
}

/* Center header text and icons on mobile screens */
@media (max-width: 700px) {
  .header-nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .header-left, .header-right {
    text-align: center !important;
    width: 100%;
    display: contents;
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-right a.social-icon img {
    display: none !important;
  }
  .header-right a.social-icon::after {
    content: attr(aria-label);
    font-size: 0.85rem;
    color: #fff !important;
    margin-left: 0;
    font-weight: 500;
    display: inline-block;
  }
  .header-left a, .header-right a {
    font-size: 0.85rem !important;
    margin: 0 8px;
  }
}

/* Sticker animation and positioning for statistic */
.statistics-wrap {
  position: relative;
  width: clamp(240px, 38vw, 420px);
  margin: 0 auto;
  display: block;
}

.statistics-hero-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  animation: phone-float 5.5s ease-in-out infinite alternate;
}
/* Sticker animation and positioning for phone */
.phone-wrap {
  position: relative;
  width: clamp(240px, 38vw, 420px);
  margin: 0 auto;
  display: block;
}
.about-hero-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  animation: phone-float 5.5s ease-in-out infinite alternate;
}
.sticker {
  --float: 18px;
  position: absolute;
 /* width: var(--sticker-size); */
  height: var(--sticker-size);
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}
.sticker-1 {
   --sticker-size: 310px;
    --overlap: 113px;
  left: calc(-1 * var(--sticker-size) + var(--overlap));
  top: 5%;
  animation: float1 3.7s ease-in-out infinite alternate;
}
.sticker-2 {
   --sticker-size: 310px;
    --overlap: 113px;
  left: calc(-1 * var(--sticker-size) + var(--overlap));
  bottom: 12%;
  animation: float2 4.5s ease-in-out infinite alternate;
}
.sticker-3 {
   --sticker-size: 310px;
    --overlap: 113px;
  right: calc(-1 * var(--sticker-size) + var(--overlap));
  top: 14%;
  animation: float3 2.5s ease-in-out infinite alternate;
}
.sticker-4 {
   --sticker-size: 310px;
    --overlap: 113px;
  right: calc(-1 * var(--sticker-size) + var(--overlap));
  bottom: 1%;
  animation: float4 5.9s ease-in-out infinite alternate;
}

.sticker-5 {
   --sticker-size: 120px;
  left: -540px;
  top: -178px;

  animation: float1 3.7s ease-in-out infinite alternate;
}
@keyframes float1 {
  0%   { transform: translateY(0) rotate(-2deg);}
  100% { transform: translateY(var(--float)) rotate(2deg);}
}
@keyframes float2 {
  0%   { transform: translateY(0) rotate(1deg);}
  100% { transform: translateY(calc(-1 * var(--float))) rotate(-1deg);}
}
@keyframes float3 {
  0%   { transform: translateY(0) rotate(1deg);}
  100% { transform: translateY(var(--float)) rotate(-1deg);}
}
@keyframes float4 {
  0%   { transform: translateY(0) rotate(-2deg);}
  100% { transform: translateY(calc(-1 * var(--float))) rotate(2deg);}
}

@keyframes float5 {
  0%   { transform: translateY(0) rotate(1deg);}
  100% { transform: translateY(var(--float)) rotate(-1deg);}
}

@keyframes phone-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(23px); }
}
@media (max-width: 600px) {
  .phone-wrap { width: clamp(160px, 70vw, 320px);}
  .sticker { --sticker-size: 195px; --float: 18px; --overlap: 113px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker { animation: none !important; }

  @media (max-width: 600px) {
  .statistic-wrap { width: clamp(-160px, -70vw, -320px);}
  .sticker { --sticker-size: 195px; --float: 18px; --overlap: 113px; }
}

}