/* ===== Card Shuffle (sticky lock section) ===== */
.card-section {
  height: 300vh;             /* gives ~200vh scroll room while inner is sticky */
  position: relative;
  padding-bottom: 1px;       /* tiny spacer keeps sticky engaged, prevents snap */
  background-color: #ffffff;
}

.card-container {
  position: sticky;
  top: var(--header-measured, var(--header-h, 70px));
  min-height: calc(100vh - var(--hero-content-top, 18vh));
  overflow: hidden;
  background-color: #ffffff;
}

.card-container.is-fixed {
  position: fixed;
  top: var(--header-measured, var(--header-h, 70px));
  left: 0;
  right: 0;
  min-height: calc(100vh - var(--hero-content-top, 18vh));
  z-index: 30;
}

.card-container.at-end {
  position: absolute;
  left: 0;
  right: 0;
}

.card-section-mobile {
  display: none;
}


.card-text {
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 1px;
  overflow: hidden;
}

.card-text small {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #1064CB;
  font-synthesis: none;
}

.card-text strong {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 40px;
  color: #000;
  display: block;
  font-synthesis: none;
}

.card-text p {
  font-family: 'Switzer', sans-serif;
  font-weight: 200;
  font-size: 20px;
  color: #000;
  margin: 10px 0;
}

.card-text__message {
  display: inline-block;
}

/* Cards: positioned like in the working prototype */
.card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 80vw;
  height: auto;
  border-radius: 20px 20px 0 0;
  z-index: 1;
  transform-origin: top center;
}


#card1 {
  top: 190px;
  z-index: 1;
}

#card2 {
  top: calc(100vh + 20px);
  z-index: 2;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

#card3 {
  top: 210px;
  z-index: 3;
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.16);
}

@media (max-width: 768px) {
  section {
    scroll-margin-top: 0;
  }
  #card-section {
    scroll-margin-top: 0;
  }

  .card-section {
    height: auto;
    padding: 72px 0 48px;
  }

  .card-container,
  .card-container.is-fixed,
  .card-container.at-end {
    display: none;
  }

  .card-section-mobile {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 24px;
  }

  .card-section-mobile__text {
    text-align: center;
  }

  .card-section-mobile__text small {
    font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #1064CB;
    display: inline-block;
  }

  .card-section-mobile__text strong {
    font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 6vw, 36px);
    color: #000;
    line-height: 1.1;
    display: block;
  }

  .card-section-mobile__text p {
    font-family: 'Switzer', sans-serif;
    font-weight: 200;
    font-size: clamp(17px, 4.6vw, 20px);
    color: #1f2937;
    margin: 12px 0 0;
    line-height: 1.45;
    min-height: 5rem;
  }

  .forms-gallery {
    position: relative;
    overflow: hidden;
    padding-bottom: 28px;
  }

  .forms-gallery__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    height: clamp(320px, 68vh, 520px);
    align-items: stretch;
    padding: 0;
    scroll-padding: 0 16px;
  }

  .forms-gallery__track::-webkit-scrollbar {
    display: none;
  }

  .forms-gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 12px;
  }

  .forms-gallery__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 18px;
  }

  .forms-gallery__cta {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .forms-gallery__dots {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
  }

  .forms-gallery__dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background-color: #E9E9E9;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .forms-gallery__dot.is-active {
    width: 26px;
    background-color: #1064CB;
    transform: none;
  }


  .forms-gallery__dot:focus-visible {
    outline: 2px solid #1064CB;
    outline-offset: 2px;
  }

  #modules {
    margin-top: 32px;
  }
}

@media (max-width: 500px) {
  .card-section-mobile {
    padding: 0 20px;
    gap: 16px;
  }

  .forms-gallery__track {
    height: clamp(300px, 68vh, 520px);
  }

  .card-section-mobile__text p {
    font-size: 16px;
    min-height: 5.4rem;
  }

  /* Ensure VYZR.FORMS images show their top (avoid cutting at the top) */
  .forms-gallery__slide img {
    object-position: top center;
  }
}


/* Make sure nothing up the chain prevents sticky (no unintended overflow on parents) */
#main-content {
  overflow: visible;
}

.font-switzer-light {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
}

.font-switzer-bold {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}

html,
body {
  margin: 0;
  background: #fff !important;
  /* site background back to white */
  overflow-x: hidden;
  /* prevent horizontal page shift on icon clicks */
}

/* === HERO right-side interactive preview (isolated) === */
:root {
  --header-h: 70px;
  --header-offset: 20px;
  /* vertical gap above the rounded header pill */
  --feather-h: 44px;
  /* larger fade height to avoid a hard edge */
  /* Defaults for the content-occluder mask (JS will update precisely) */
  --occlude-soft: 40px;
  /* start of fade-in (transparent ->) */
  --occlude-hard: 72px;
  /* end of fade-in (-> opaque) */
}

.hero-demo {
  position: absolute;
  top: var(--hero-content-top, 22vh);
  right: var(--hero-demo-right, var(--gutter));
  width: var();
  height: clamp(380px, 48vh, 640px);
  z-index: 2;
  pointer-events: auto;
}

@media (max-width: 1279px) {
  .hero-demo {
    position: static;
    width: 100%;
    height: clamp(320px, 46vh, 560px);
    margin-top: 1.5rem;
    right: auto;
  }
}

@media (max-width: 640px) {
  .hero-demo {
    height: clamp(280px, 42vh, 500px);
    margin-top: 1.25rem;
  }
}

/* Ramme (mock browser uten chrome) */
/* === Free-floating icon strip + stage === */
.hd-strip-wrap {
  position: relative;
  margin-bottom: 12px;
  overflow: visible;
  /* show full strip, no fades */
  display: flex;
  /* center the strip wrapper */
  justify-content: center;
  /* horizontally center over the stage */
  z-index: 3;
  /* keep underline above stage */
}

.hd-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* center icons when they fit */
  gap: 8px;
  padding: 6px 8px 14px;
  /* extra bottom space for underline */
  overflow-x: auto;
  overflow-y: visible;
  /* allow underline to extend inside padding */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.hd-strip::-webkit-scrollbar {
  display: none;
}

/* Animated underline for active icon */
.hd-underline {
  position: absolute;
  bottom: 12px;
  /* sit within the strip padding (closer to icon bottom) */
  left: 0;
  height: 4px;
  /* slightly thicker */
  width: 0;
  background: #1064CB;
  /* brand color */
  border-radius: 9999px;
  /* fully rounded corners */
  transform: translateX(0);
  transition:
    transform 420ms cubic-bezier(.2, 1.2, .2, 1),
    width 420ms cubic-bezier(.2, 1.2, .2, 1),
    opacity 240ms ease;
  opacity: 0;
  /* hidden until initialized */
  pointer-events: none;
  z-index: 1;
}

.hd-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  height: calc(var(--icon-h) + 12px);
  border: none;
  background: transparent;
  color: #27304F;
  transition: transform .15s ease, color .2s ease, opacity .2s ease;
}

.hd-icon:hover {
  transform: translateY(-1px);
}

.hd-icon.is-active {
  color: #1064CB;
}

.hd-ico {
  height: var(--icon-h) !important;
  width: auto !important;
  display: block;
  object-fit: contain;
  max-width: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25));
}

.hd-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 48vh, 640px);
  overflow: visible;
  background: transparent;
  /* fjern hvit */
  box-shadow: none;
  /* fjern skygge */
  border-radius: 0;
  /* fjern runding */
}

@media (max-width: 1279px) {
  .hd-stage {
    height: clamp(320px, 46vh, 560px);
  }
}

@media (max-width: 640px) {
  .hd-stage {
    height: clamp(280px, 42vh, 500px);
  }
}

/* View-området */
.hd-views {
  position: relative;
  flex: 1 1 auto;
  background: linear-gradient(180deg, rgba(162, 196, 253, .12) 0%, rgba(108, 140, 203, .08) 100%);
}

/* Bildene som “pages” */
.hd-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* was cover → prevent left/right cropping */
  object-position: center;
  /* keep centered */
  opacity: 0;
  transform: translateY(6px) scale(.995);
  transition: opacity .32s ease, transform .38s cubic-bezier(.2, .7, 0, 1);
  pointer-events: none;
  will-change: opacity, transform;
  border-radius: 0;
  /* Add smooth bottom fade mask (restore fade effect) */
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 60%,
      rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 60%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hd-view.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Liten highlight når tab skifter (valgfritt) */
.hd-frame:has(.hd-tab.is-active) {
  outline: 0;
}

/* ========== Base ========== */
/* --- Occlude foreground under fixed header area --- */
.occlude-top {
  /* Use a mask so content is actually invisible beneath the header,
     then fades in below it */
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) var(--occlude-soft, 40px),
      rgba(0, 0, 0, 1) var(--occlude-hard, 72px),
      rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) var(--occlude-soft, 40px),
      rgba(0, 0, 0, 1) var(--occlude-hard, 72px),
      rgba(0, 0, 0, 1) 100%);

  /* Ensure the mask covers the full box and doesn’t tile */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  will-change: -webkit-mask-image, mask-image;
  transition: -webkit-mask-image .25s ease, mask-image .25s ease;
}

/* Softer occlude on small screens */
@media (max-width: 768px) {
  :root {
    --feather-h: 36px;
  }

  .occlude-top {
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 24px,
        rgba(0, 0, 0, 1) 56px,
        rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 24px,
        rgba(0, 0, 0, 1) 56px,
        rgba(0, 0, 0, 1) 100%);
  }
}


.outfit, .font-switzer-light, h1, h2, h3, .nav-menu a {
  font-weight: inherit;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
}

/* In-page anchors offset */
section {
  scroll-margin-top: 80px;
}
#card-section {
  scroll-margin-top: 80px;
}

/* Override Tailwind cyan utilities with brand blue */
.text-cyan-600,
.hover\:text-cyan-600:hover,
.hover\:text-cyan-600:focus {
  color: #1064CB !important;
}

.bg-cyan-600,
.hover\:bg-cyan-700:hover,
.hover\:bg-cyan-700:focus {
  background-color: #1064CB !important;
  border-color: #1064CB !important;
}

/* ========== Header (glass baseline) ========== */
/* Header shell stays transparent; the pill carries the glass */
header#header {
  background: transparent;
  transition:
    background-color .25s ease,
    border-color .25s ease,
    -webkit-backdrop-filter .25s ease,
    backdrop-filter .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
  padding-top: 0;
  padding-bottom: 0;
}

/* Nudge the fixed header down a bit */
header#header {
  top: 0;
  /* sit flush to the top; we create the visual gap on .header-pill instead */
  height: var(--header-h);
}



/* Top occluder "feather" that sits *under* the rounded header and fades page content out */
.header-feather {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-measured, var(--header-h, 70px)) + 28px);
  pointer-events: none;
  z-index: 40;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.97) 32%,
      rgba(255, 255, 255, 0.70) 64%,
      rgba(255, 255, 255, 0.0) 100%);
}

/* If you want an even softer feather on small screens, slightly reduce its height */
@media (max-width: 640px) {
  .header-feather {
    height: calc(var(--header-measured, var(--header-h, 70px)) + 8px);
  }
}

/* Hide the top feather entirely on mobile */
@media (max-width: 1023px) {
  /* Backdrop behind center menu (blurs page while open) */
  /* Disable backdrop for now */
  .menu-backdrop { display: none !important; }
  body.menu-open .menu-backdrop { display: none !important; }
  /* Restore testimonials on mobile with ample vertical spacing */
  .testimonials { margin-top: 3rem; margin-bottom: 3rem; }
  .header-feather { display: none !important; }
}

/* Center entire hero section for mid-mobile widths (501–1023px) */
@media (min-width: 501px) and (max-width: 1023px) {
  .hero-content {
    /* Center the whole hero block horizontally without pushing off-screen */
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    max-width: min(640px, 92vw);
    text-align: center;
    align-items: center;
  }

  /* Center the label over the title in this range */
  .hero-content .hero-title::before {
    left: 50% !important;
    transform: translate(-50%, -8px) !important;
  }

  /* Re-enable hero interactive demo in this range */
  .hero-demo { display: block !important; }
}

/* Phones: tighten hero height a tad and let Benefits follow */
@media (max-width: 640px) {
  :root { --hero-mobile-trim: 36px; }

  /* Shorten hero from the bottom (reduce overall min-height slightly) */
  .hero-solid {
    min-height: calc(
      100vh + var(--header-measured, var(--header-h, 70px)) - var(--hero-mobile-trim, 0px)
    ) !important;
  }

  /* Increase Benefits top padding by the same amount so it follows upward */
  #benefits {
    /* Pull section boundary upward by the trim and compensate with padding */
    margin-top: calc(-1 * var(--hero-mobile-trim, 0px));
    padding-top: calc(4rem + var(--hero-mobile-trim, 0px));
  }
}


/* Rounded glass bar */
.header-pill {
  margin: var(--header-offset) var(--gutter) 0;
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);

  /* NEW: make the header visibly taller and center content vertically */
  min-height: var(--header-h);
  display: flex;
  align-items: center;
}

:root {
  --overlap-fix: 1px;
  /* base gutter for header/container alignment */
  --gutter: clamp(12px, 4vw, 84px);

  /* align hero text slightly left of the logo gutter, 
     and hero demo equally inset from the right (keeps the pair visually centered as a group) */
  --hero-content-left: calc(var(--gutter) - 24px);
  --hero-demo-right: calc(var(--gutter) - 24px);
}

@media (min-width: 1536px) and (max-width: 1700px) {
  :root {
    --gutter: clamp(14px, 3.4vw, 84px);
    --hero-content-left: calc(var(--gutter) - 20px);
    --hero-demo-right: calc(var(--gutter) - 20px);
  }
}

@media (min-width: 1700px) and (max-width: 1899px) {
  :root {
    --gutter: clamp(20px, 1.6vw, 80px);
    /* Pull both sides further in from the edges on wide screens */
    --hero-content-left: calc(var(--gutter) + 80px);
    --hero-demo-right: calc(var(--gutter) + 80px);
  }
}

@media (min-width: 1900px) {
  :root {
    /* On ultra-wide screens, maintain a fixed inset */
    --hero-content-left: 146px;
    --hero-demo-right: 146px;
  }
}

/* Match hero-gutter i header-containeren (overstyrer Tailwinds .px-8) */
/* Inside the pill we use a small inner padding; outer inset handled by .header-pill margin */
header#header .container {
  padding-left: 24px;
  padding-right: 24px;
}

/* Hide burger icon and header demo button on mobile */
@media (max-width: 1023px) {
  #header #menu-toggle,
  #header .btn-demo {
    display: none !important;
  }

  /* Hide header on scroll down (JS toggles body.header-hidden) */
  body.header-hidden header#header { transform: translateY(-120%); }
  /* Also allow force-hiding header outside hero */
  body.force-header-hidden header#header { transform: translateY(-120%); }

  /* Make the header pill hug the logo content */
  header#header .container {
    display: inline-flex;
    width: auto;
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-pill {
    min-height: unset;
    padding: 6px 10px;
    display: inline-flex;
  }
}

/* Når mobilmeny er åpen → tvang på glass, selv på toppen */
body.menu-open #header {
  background: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* On mobile, do not force a blurred header when the menu is open */
@media (max-width: 1023px) {
  body.menu-open #header {
    /* Undo: keep header clear when menu is open (no frosted/opaque header) */
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
}

/* ========== Main content blur/spacer ========== */
#main-content {
  transition: filter 0.3s ease;
  padding-top: calc(var(--header-measured, var(--header-h, 80px)) + 12px);
  /* keeps content clear of fixed header */
  background: none !important;
}

#main-content.blur {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

/* Hero base (extended height for SVG/waves, adjusted for logo placement) */
.hero-blend {
  position: relative;
  min-height: calc(90vh + var(--hero-extra-bottom, 0px));
  /* Nearly full-screen for waves */
  padding-bottom: clamp(16rem, 20vw, 24rem);
  /* Push feather/waves lower */
  padding-top: calc(var(--header-h, 80px) + 120px);
  /* Keep title position */
  margin-top: calc((var(--header-h, 80px) * -1) - var(--overlap-fix));
  /* Unchanged */
  overflow: hidden;
  position: relative;
  /* Container for absolute positioning of customers-section */
  isolation: isolate;
}

/* === New: Solid hero background (no SVG, no feather) === */
.hero-solid {
  position: relative;
  isolation: isolate;
  /* keep any pseudo-layers below content */
  /* same geometry as hero-blend so layout doesn’t shift */
  /* Lock hero bottom to viewport bottom by compensating for fixed header */
  min-height: calc(100vh + var(--header-measured, var(--header-h, 70px)));
  padding-bottom: 0;
  padding-top: calc(var(--header-h, 80px) + 120px);
  margin-top: calc((var(--header-h, 80px) * -1) - var(--overlap-fix));
  overflow: hidden;
  background: none !important;
}

@media (max-width: 1023px) {
  .hero-solid {
    /* Same locking logic on mobile */
    min-height: calc(100vh + var(--header-measured, var(--header-h, 70px)));
    padding-top: calc(var(--header-h, 70px) + 56px);
    padding-bottom: 0;
    margin-top: calc((var(--header-h, 70px) * -1) - var(--overlap-fix));
  }
}

/* Subtle visual baseline tweak for logo descender */
.header-logo {
  position: relative;
  top: 2px;
}

/* Bottom fade effect for hero-solid */
.hero-solid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  /* adjust as needed for smoother fade */
  /* background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #F9FAFB 100%); */
  pointer-events: none;
  z-index: 1;
}

/* subtle mesh glow for depth (kept gentle) */
.hero-solid::before {
  content: "";
  position: absolute;
  inset: -20% -10% -10% -10%;
  z-index: -1;
  /* background:
    radial-gradient(1200px 800px at 10% 15%, rgba(108,140,203,0.28), transparent 60%),
    radial-gradient(900px 700px at 85% 25%, rgba(108,140,203,0.18), transparent 60%),
    radial-gradient(700px 600px at 65% 80%, rgba(39,48,79,0.10), transparent 60%);
  */
  filter: blur(28px);
  transform: translateZ(0);
  /* animation: heroDrift 28s ease-in-out infinite alternate; */
}

@media (min-width: 1024px) {
  .hero-solid {
    min-height: calc(95vh + var(--hero-extra-bottom, 0px));
    padding-bottom: clamp(18rem, 15vw, 28rem);
    padding-top: calc(var(--header-h, 80px) + 140px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-solid::before {
    animation: none;
  }
}

/* Ensure SVG sits above page background but below content */
.hero-waves {
  z-index: 0;
  /* replaces Tailwind -z-10 from HTML */
}

/* === Hero demo controls (arrows + dots) === */
.hd-controls { position: absolute; left: 0; right: 0; bottom: 8px; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Order: <prev> <dots> <next> */
.hd-controls .hd-prev { order: 0; }
.hd-controls .hd-dots { order: 1; }
.hd-controls .hd-next { order: 2; }

/* Make arrows just a tad larger than the dots */
.hd-controls .hd-arrow {
  width: 16px; height: 16px; border-radius: 9999px;
  background: rgba(17,24,39,.65); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; line-height: 1; /* fit the glyph */
  cursor: pointer; pointer-events: auto;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  opacity: .3;
}
.hd-controls .hd-arrow:hover { background: rgba(17,24,39,.8); transform: scale(1.05); opacity: .6; }

.hd-controls .hd-dots { display: flex; gap: 6px; pointer-events: auto; }
.hd-controls .hd-dot { width: 10px; height: 10px; border-radius: 9999px; background: rgba(17,24,39,.35); transition: background .2s ease, transform .2s ease; cursor: pointer; }
.hd-controls .hd-dot.is-active { background: var(--btn-bg, #1064CB); transform: scale(1.1); }

/* Bottom feather (positioned lower, increased height for smooth transition) */
.hero-blend::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 0;
  height: 140px;
  /* Increased for full coverage */
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #F9FAFB 90%);
}


/* Desktop adjustments (taller hero for larger screens) */
@media (min-width: 1024px) {
  .hero-blend {
    min-height: calc(95vh + var(--hero-extra-bottom, 0px));
    /* Taller on desktop */
    padding-bottom: clamp(18rem, 15vw, 28rem);
    /* More push-down */
    padding-top: calc(var(--header-h) + 140px);
    /* Tweak for title */
  }
}

/* SVG waves (adjusted for alignment with feather) */
.waves-shift {
  transform: translateY(0);
  bottom: -10%;
  /* Push waves lower, adjust if needed */
  transition: transform .3s ease;
}

/* Hero background (stretches with new height) */
.hero-modern {
  position: relative;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 60%);
  isolation: isolate;
}

.hero-modern::before {
  content: "";
  position: absolute;
  inset: -20% -10% -10% -10%;
  z-index: -1;
  background:
    radial-gradient(1200px 800px at 10% 15%, rgba(108, 140, 203, 0.35), transparent 60%),
    radial-gradient(900px 700px at 85% 25%, rgba(108, 140, 203, 0.22), transparent 60%),
    radial-gradient(700px 600px at 65% 80%, rgba(39, 48, 79, 0.14), transparent 60%);
  filter: blur(30px);
  transform: translateZ(0);
  animation: heroDrift 28s ease-in-out infinite alternate;
}

.hero-modern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1.2px);
  background-size: 22px 22px;
  opacity: .25;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}

@keyframes heroDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(0, -12px, 0) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-modern::before {
    animation: none;
  }
}

@media (min-width: 1536px) {
  .hero-modern {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
}

/* ========== Burger ========== */
.burger-icon {
  width: 24px;
  height: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger-line {
  width: 100%;
  height: 2px;
  background-color: #000000;
  transition: transform 0.3s ease;
}

.burger-icon.expanded .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger-icon.expanded .burger-line:nth-child(2) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==== Mobile menu overlay and visibility ==== */
#mobile-menu {
  display: none;
}

#mobile-menu.hidden {
  display: none !important;
}

#mobile-menu.expanded {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 1100; /* above other floating UI */
  background: transparent; /* remove overlay */
  align-items: flex-end;   /* anchor to bottom */
  justify-content: flex-end; /* anchor to right */
  animation: mmOverlayIn 220ms ease-out both;
}

#mobile-menu.expanded .menu-content {
  position: fixed;           /* anchor below header regardless of flex */
  top: calc(var(--header-measured, var(--header-h, 70px)) + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 26rem);
  max-height: calc(100vh - (var(--header-measured, var(--header-h, 70px)) + 40px));
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff; /* solid card, no blur */
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 24px;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.22);
  animation: mmCardIn 220ms ease-out both;
  z-index: 1200;
}

/* When JS anchors the card, drop the entrance animation to avoid extra movement */
#mobile-menu.expanded .menu-content.anchored {
  position: fixed;
  animation: none;
  z-index: 1002;
}

#mobile-menu.expanded .menu-content > img {
  margin-bottom: 0.75rem;
}

#mobile-menu.expanded .menu-content ul {
  width: 100%;
}

#mobile-menu.expanded .menu-content li {
  opacity: 0;
  transform: translateY(12px);
  animation: mmItemIn 420ms cubic-bezier(.2, 1, .2, 1) forwards;
}

#mobile-menu.expanded .menu-content li:nth-child(1) { animation-delay: 60ms; }
#mobile-menu.expanded .menu-content li:nth-child(2) { animation-delay: 120ms; }
#mobile-menu.expanded .menu-content li:nth-child(3) { animation-delay: 180ms; }
#mobile-menu.expanded .menu-content li:nth-child(4) { animation-delay: 240ms; }

@keyframes mmOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mmCardIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes mmItemIn {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-menu.expanded { animation: none; }
  #mobile-menu.expanded .menu-content { animation: none; }
  #mobile-menu.expanded .menu-content li { animation: none; opacity: 1; transform: none; }
}

/* Previously hid header logo under overlay; keep visible now */

/* Removed legacy full-screen header-expansion mobile menu styles */

/* ========== Footer/lenker ========== */
footer a {
  transition: color 0.3s ease;
}

/* ========== Customers logo slider (overlapping waves) ========== */
.customers-section {
  position: absolute;
  bottom: 40px;
  /* Align with bottom of feather */
  left: 0;
  right: 0;
  padding: 1rem 0;
  /* Reduced padding for tighter fit */
  background: transparent;
  z-index: 1;
  /* Above waves (z-index: -1) but below hero content */
}

.customers-container {
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  position: relative;
  overflow: hidden;
}

.customers-logos {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50px, rgba(0, 0, 0, 1) calc(100% - 50px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50px, rgba(0, 0, 0, 1) calc(100% - 50px), rgba(0, 0, 0, 0) 100%);
}

.logo-wrapper {
  display: inline-flex;
  animation: scrollLogos 40s linear infinite;
  width: 200%;
  position: relative;
}

.logo-wrapper img {
  height: 31.5px; /* 5% larger than 30px */
  margin: 0 1rem;
  opacity: 0.8;
}

.logo-wrapper img:hover {
  opacity: 0.8;
  transition: none;
}

@media (max-width: 1024px) {
  .customers-section {
    bottom: 100px;
    /* Adjust for smaller screens */
    padding: 0.5rem 0;
  }

  .customers-container {
    max-width: 94%;
    padding: 0 1rem;
  }

  .logo-wrapper img {
    height: 26.25px; /* 5% larger than 25px */
    /* Smaller logos on mobile */
  }
}

/* Benefits copy of customers scroller: hidden by default */
.customers-section--benefits { display: none; }

/* From 501px to 1500px: show scroller in benefits, hide in hero */
@media (min-width: 501px) and (max-width: 1500px) {
  .hero-solid .customers-section { display: none !important; }
  .customers-section--benefits {
    display: block !important;
    position: static !important;
    margin-top: 0;
    margin-bottom: 3rem; /* match top padding for equal spacing */
  }
}

/* Equalize spacing around logos inside Benefits for 501–1500px */
@media (min-width: 501px) and (max-width: 1500px) {
  #benefits { padding-top: 3rem; }
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ========== Nav underline (uendret) ========== */
.nav-menu a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-family: inherit;
}
/* Ensure headings and nav links do not inherit Inter, but allow explicit font classes */
h1, h2, h3 {
  font-family: inherit;
  font-weight: inherit;
}


.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: #1064CB;
  opacity: 0;
  transition: width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease;
}

.nav-menu a:hover::after {
  width: 100%;
  opacity: 1;
}

/* ========== Modal (uendret) ========== */
/* #demo-modal config removed */
/*
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: rgba(185, 185, 185, 0);
  backdrop-filter: blur(1px);
  opacity: 0;
}*/

#demo-modal.show {
  display: block;
  animation: fadeInOverlay 0.3s ease-in forwards;
}

#demo-modal.show .max-w-md {
  animation: slideUpFadeIn 0.3s ease-out forwards;
}

#demo-modal .max-w-md {
  max-width: 400px;
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 0;
  position: absolute;
}

#demo-modal input {
  border-color: #e5e7eb;
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

#demo-modal button {
  cursor: pointer;
}

@keyframes fadeInOverlay {
  from {
    background: rgba(185, 185, 185, 0);
    opacity: 0;
  }

  to {
    background: rgba(185, 185, 185, 0.3);
    opacity: 1;
  }
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Demo-knapp anim (uendret) ========== */
@keyframes nudge-wiggle {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  12% {
    transform: translateY(-1px) rotate(-1deg) scale(1.02);
  }

  24% {
    transform: translateY(0) rotate(1deg) scale(1.03);
  }

  36% {
    transform: translateY(-1px) rotate(-1deg) scale(1.02);
  }

  48% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.js-book-demo {
  position: relative;
  top: -10px; /* try -2px, -3px, etc. until it feels perfectly centered */
}

.js-book-demo.nudge {
  animation: nudge-wiggle 1000ms cubic-bezier(.2, .8, .2, 1) both;
  position: relative;
}

.js-book-demo.nudge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 0.5rem;
  pointer-events: none;
  transition: box-shadow 900ms cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {

  .js-book-demo.nudge,
  .js-book-demo.nudge::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ========== Floating demo button (uendret) ========== */
.floating-demo-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 177px;
  height: 177px;
  border-radius: 75.5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .5s cubic-bezier(.68, -.55, .27, 1.55), border-radius .5s cubic-bezier(.68, -.55, .27, 1.55);
}

.floating-demo-btn .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
}

.floating-demo-btn .compact {
  opacity: 1;
  width: 177px;
  height: 177px;
}

.floating-demo-btn .expanded {
  opacity: 0;
  width: 477px;
  height: 177px;
  clip-path: inset(0 100% 0 0);
  transition: opacity .3s ease, clip-path .5s cubic-bezier(.68, -.55, .27, 1.55);
}

.floating-demo-btn .expanded text {
  opacity: 0;
  transition: opacity .3s ease .2s;
}

.floating-demo-btn.expanded {
  width: 477px;
  height: 177px;
  border-radius: 75.5px;
}

.floating-demo-btn.expanded .compact {
  opacity: 0;
}*/

.floating-demo-btn.expanded .expanded {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.floating-demo-btn.expanded .expanded text {
  opacity: 1;
}

@media (max-width: 768px) {
  .floating-demo-btn {
    display: flex;
  }
}

@keyframes bounceExpand {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(.95);
  }

  100% {
    transform: scale(1);
    width: 477px;
  }
}

@keyframes bounceShrink {
  0% {
    transform: scale(1);
    width: 477px;
  }

  50% {
    transform: scale(.9);
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    width: 177px;
  }
}

/* ========== Mobile “book demo” pill (uendret) ========== */
:root {
  --bookdemo-height: 4rem;
  --bookdemo-width: 16rem;
  --bookdemo-radius: 999px;
  --bookdemo-bg: #27304F;
  --bookdemo-color: #ffffff;
  --bookdemo-open-duration: 420ms;
  --bookdemo-close-duration: 320ms;
  --bookdemo-auto-delay: 2000ms;
  --bookdemo-auto-visible: 2000ms;
}

@media (min-width: 1024px) {
  .book-demo-mobile {
    display: none !important;
  }
}

.book-demo-mobile {
  position: fixed;
  right: clamp(16px, 5vw, 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 1400;
  width: var(--bookdemo-height);
  height: var(--bookdemo-height);
}

.book-demo__reveal {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--bookdemo-width);
  height: var(--bookdemo-height);
  background: var(--bookdemo-bg);
  border-radius: var(--bookdemo-radius);
  display: grid;
  place-items: center;
  padding-left: 1.5rem;
  padding-right: 4rem;
  color: var(--bookdemo-color);
  clip-path: inset(0 0 0 100% round var(--bookdemo-radius));
  transition: clip-path var(--bookdemo-open-duration) cubic-bezier(.2, .7, 0, 1);
  will-change: clip-path;
  overflow: hidden;
}

.book-demo-mobile.is-open .book-demo__reveal {
  clip-path: inset(0 0 0 0 round var(--bookdemo-radius));
}

.book-demo-mobile.is-closing .book-demo__reveal {
  transition: clip-path var(--bookdemo-close-duration) cubic-bezier(.4, 0, .2, 1);
  clip-path: inset(0 0 0 100% round var(--bookdemo-radius));
}

.abel {
  font-family: "Abel", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.book-demo__label {
  font-size: 26px;
  letter-spacing: .02em;
  user-select: none;
  white-space: nowrap;
}

.book-demo__btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--bookdemo-height);
  height: var(--bookdemo-height);
  border-radius: 999px;
  background: var(--bookdemo-bg);
  color: var(--bookdemo-color);
  display: grid;
  place-items: center;
  border: 0;
  outline: 0;
  appearance: none;
}

.book-demo-mobile .icon {
  transition: opacity 180ms ease, transform 180ms ease;
}

.book-demo-mobile .icon.hidden {
  display: none;
}

.book-demo-mobile.is-open .icon--calendar {
  display: none;
}

.book-demo-mobile.is-open .icon--smile {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .book-demo__reveal {
    transition: none !important;
  }
}

.reveal {
  clip-path: inset(0 0 0 100% round 999px);
  transition: clip-path 420ms cubic-bezier(.2, .7, 0, 1);
  will-change: clip-path;
}

.open .reveal {
  clip-path: inset(0 0 0 0 round 999px);
}

@media (min-width: 1024px) {
  .book-demo-mobile {
    display: none !important;
  }
}

.group.open #iconCalendar {
  display: none !important;
}

.group.open #iconSmile {
  display: inline !important;
}

.book-demo-mobile.submitted {
  opacity: 0.25;
  transition: opacity 300ms ease;
}

.book-demo-mobile.submitted:hover,
.book-demo-mobile.submitted:focus-within {
  opacity: 0.5;
}

.js-book-demo.submitted {
  opacity: 0.5;
  pointer-events: auto;
  transition: opacity 300ms ease;
}

/* Previously hid mobile CTAs when menu opened; removed to keep them visible */

/* ========== Footer font helper & misc ========== */
footer.font-abel,
footer.font-abel *:not(i) {
  font-family: 'Abel', sans-serif;
}

@media (min-width: 1536px) {
  .info-box {
    min-height: 255px;
  }
}

.font-abel {
  font-family: 'Abel', sans-serif;
}

.text-custom-blue {
  color: #1064CB;
}

.benefits-grid {
  display: grid;
  /* Tighter gaps on mobile for smaller stacked cards */
  gap: clamp(1.25rem, 4vw, 2rem);
  /* Stack cards under 1024px */
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: center;
  justify-content: space-between;
  max-width: min(1500px, 100%);
  margin: 0 auto;
}


.benefit-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
  border-radius: 26px;
  /* Smaller padding on mobile; increased at >=1024px below */
  --benefit-gap: clamp(0.75rem, 2.2vw, 1rem);
  --benefit-padding: clamp(1.6rem, 3.6vw, 2.6rem);
  padding: var(--benefit-padding);
  gap: var(--benefit-gap);
  min-height: clamp(140px, 18vw, 180px);
  /* Let cards fill their grid column width */
  max-width: none;
  width: 90%;
  box-shadow: 0 11px 31px rgba(15, 23, 42, 0.056);
  text-align: left;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Mobile-first tightening: smaller cards when stacked (<1024px) */
@media (max-width: 1023px) {
  .benefit-card {
    --benefit-gap: clamp(3.6rem, 14vw, 6rem);
    --benefit-padding: clamp(3.6rem, 14vw, 6.4rem);
    /* Give cards a modest height so centering is visible */
    min-height: clamp(260px, 64vw, 340px);
    /* Center the image+title+text group vertically */
    justify-content: center;
    gap: var(--benefit-gap);
    padding: var(--benefit-padding);
    width: 100%;
  }

  .benefit-card__media {
    aspect-ratio: auto;
  }

  .benefit-card__media img {
    width: min(72%, 240px);
  }
}

.benefit-card__media {
  width: 70%;
  max-width: 280px;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.benefit-card__media img {
  width: min(96%, 360px);
  height: auto;
  display: block;
}

/* Scale down the benefits illustrations so they sit proportionally inside the card */
.benefit-card__media img[src$="benefits-image1-en.png"],
.benefit-card__media img[src$="benefits-image1-no.png"],
.benefit-card__media img[src$="benefits-image2-en.png"],
.benefit-card__media img[src$="benefits-image2-no.png"],
.benefit-card__media img[src$="benefits-image3-en.png"],
.benefit-card__media img[src$="benefits-image3-no.png"] {
  width: min(56%, 230px);
}

/* Re-override media sizing after defaults for mobile to raise text position */
@media (max-width: 1023px) {
  .benefit-card__media { aspect-ratio: auto; }
  .benefit-card__media img { width: min(60%, 200px); }
  /* Give the title generous breathing room below the image */
  .benefit-card__title { margin-top: calc(2.2 * var(--benefit-gap)); }
  /* Keep the paragraph comfortably spaced from the title */
  .benefit-card__text { margin-top: calc(1.2 * var(--benefit-gap)); }
  .benefit-card__title { font-weight: 800; }
  .benefit-card__text { font-weight: 500; }
}

@media (max-width: 1023px) {
  .benefit-card__media img[src$="benefits-image1-en.png"],
  .benefit-card__media img[src$="benefits-image1-no.png"],
  .benefit-card__media img[src$="benefits-image2-en.png"],
  .benefit-card__media img[src$="benefits-image2-no.png"],
  .benefit-card__media img[src$="benefits-image3-en.png"],
  .benefit-card__media img[src$="benefits-image3-no.png"] {
    width: min(72%, 210px);
  }
}

.benefit-card__title {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.25;
  color: #0f172a;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.benefit-card__text {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
  /* Override flex gap between title and text: leave ~0.3rem spacing */
  margin-top: calc(0.3rem - var(--benefit-gap));
  text-align: center;
}

/* From 1024px and up: 3 columns, slightly tighter gap so cards are wider */
@media (min-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.8vw, 2.5rem);
  }

  .benefit-card {
    /* Slightly larger inner gap on desktop */
    --benefit-gap: clamp(1.1rem, 2vw, 1.75rem);
    max-width: none;
    width: 85%;
  }
}

/* From 1500px and up: switch to 3 columns */
@media (min-width: 1500px) {
  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .benefits-grid {
    max-width: 1760px;
    gap: clamp(2rem, 3.2vw, 3rem);
  }

  .benefit-card {
    min-height: 160px;
    max-width: none;
  }
}

/* ========== "Derfor velger kundene oss" section (push down to hide until scroll) */
.hero-blend+section {
  margin-top: 4rem;
  /* Unchanged */
  padding-top: 4rem;
  /* Increased for breathing room */
}

.outfit, .font-switzer-light, h1, h2, h3, .nav-menu a {
  font-synthesis: none; /* prevent Safari from faking weight/italic */
}

/* ===== Outfit base ===== */
.outfit {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.outfit-200 {
  font-weight: 200;
}

/* ExtraLight */
.outfit-300 {
  font-weight: 300;
}

/* Light */
.outfit-400 {
  font-weight: 400;
}

/* Regular */
.outfit-500 {
  font-weight: 500;
}

/* Medium */

/* Brand blue */
.brand-blue {
  color: #1064CB !important;
}

/* ===== Scalable type ramp (balansert mot Tailwind) ===== */
/* Store titler */
.heading-xxl {
  font-size: clamp(36px, 6.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.heading-xl {
  font-size: clamp(30px, 5.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.005em;
}

.heading-lg {
  font-size: clamp(26px, 4.4vw, 44px);
  line-height: 1.12;
}

/* Mellomtitler / ingress */
.subhead-lg {
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.25;
}

.subhead-md {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
}

/* Brødtekst-varianter */
.body-lg {
  font-size: clamp(16px, 2.0vw, 20px);
  line-height: 1.5;
}

.body-md {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
}

.caption {
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.4;
}

/* Små verktøyklasser (spacing uten å måtte bruke Tailwind for disse) */
.stack-tight>*+* {
  margin-top: 0.35rem;
}

.stack>*+* {
  margin-top: 0.75rem;
}

.stack-loose>*+* {
  margin-top: 1.25rem;
}

/* ===== Hero content independent positioning (text layer over waves) ===== */

/* Juster tittel og innhold samlet */
/* === Hero content (left) === */
.hero-content {
  position: absolute;
  top: var(--hero-content-top, 18vh);
  left: var(--hero-content-left, calc(var(--gutter) - 24px));
  max-width: 36%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Responsive tuning */
@media (min-width: 1536px) {

  /* 2xl */
  .hero-content {
    max-width: 34%;
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {

  /* xl */
  .hero-content {
    max-width: 36%;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {

  /* lg */
  .hero-content {
    position: absolute;
    top: var(--hero-content-top, 16vh);
    left: var(--hero-content-left, calc(var(--gutter) - 16px));
    max-width: 44%;
  }
}

@media (max-width: 1023px) {

  /* md and below: stack above demo */
  .hero-content {
    position: relative;
    top: 0;
    max-width: 100%;
    padding: 0 clamp(45px, 8vw, 60px);
    gap: 0.5rem; /* tighten spacing between items on mobile */
    margin-top: 20px; /* nudge hero title, label, subtext, and CTA down slightly */
  }

  /* Hero subtext: use Outfit Light on mobile */
  .hero-content p.font-switzer-light {
    font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-weight: 300 !important; /* Outfit Light */
    /* Align left with title, but keep a narrower measure */
    position: static;
    left: auto;
    width: auto;
    max-width: 92%;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  /* Reduce additional stack spacing on mobile for hero block */
  .hero-content.stack > * + * {
    margin-top: 0.25rem;
  }

  /* Slight top margin for subtext under title */
  .hero-content p {
    margin-top: 20px;
  }

  /* Add more space above the hero CTA button on mobile */
  .hero-content .btn-demo {
    margin-top: 24px !important;
  }

  /* Hide interactive preview on mobile */
  .hero-demo {
    display: none !important;
  }

  /* Mobile circles: match header style (white + shadow), dark icon */
  #mobile-menu-fab,
  #circleBtn {
    background: rgba(255, 255, 255, 0.62) !important; /* thicker, more opaque glass */
    color: #28314F !important; /* icon/stroke color */
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.10);
  }

  #mobile-menu-fab {
    position: fixed;
    right: clamp(16px, 5vw, 24px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    border: 0;
    outline: 0;
    appearance: none;
    z-index: 1001;
    display: grid;
    place-items: center;
    transition: transform 240ms ease, opacity 240ms ease;
  }

  #circleBtn {
    width: var(--bookdemo-height);
    height: var(--bookdemo-height);
    border-radius: 999px;
    border: 0;
    outline: 0;
    appearance: none;
    display: grid;
    place-items: center;
    transition: transform 240ms ease, opacity 240ms ease;
  }

  /* Ensure burger lines use the dark color */
  #mobile-menu-fab .burger-line {
    background-color: #28314F !important;
    height: 3px; /* slightly thicker lines on mobile */
  }

  /* Expander pill: match header glass style and dark text */
  #expander {
    /* Glassy white like header, with 28314F stroke */
    background: rgba(255, 255, 255, 0.62) !important; /* thicker, more opaque */
    border: 1px solid #28314F !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.10) !important;
  }

  #expander span {
    color: #28314F !important;
  }

  /* Center fixed square (mobile menu) */
  #center-square {
    position: fixed;
    top: calc(50% + 20px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 380px; /* room for language circles */
    /* Solid white menu (no glass effect) */
    background: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.06);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 30px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.10);
    z-index: 2000; /* above any other UI */
    padding: 22px; /* slightly larger inner gap */
    padding-bottom: 82px; /* keep extra room for circles */
    display: none; /* hidden by default; shown when menu is open */
    align-items: center;
    justify-content: center;
  }

  /* Show the centered menu when the menu is open */
  body.menu-open #center-square {
    display: flex;
    animation: csIn 220ms cubic-bezier(.2, 1, .2, 1) both;
  }

  @keyframes csIn {
    0%   { opacity: 0; transform: translate(-50%, calc(-50% - 4px)) scale(0.985); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  #center-square .center-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    color: #28314F;
    font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 27pt; /* ~36px at 96dpi; switched to points */
    line-height: 1.25;
    font-weight: 400; /* Outfit Regular */
  }

  #center-square .center-menu li + li { margin-top: 30px; }

#center-square .center-menu a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 2px 6px;
}

/* Position language circles at the bottom of the center menu */
#center-square .lang-circles {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}
}

@media (max-width: 640px) {

  /* sm */
  .hero-content {
    top: 0;
    padding-right: 12px;
  }

  .hero-content .heading-xl {
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.15;
  }
}
@media (max-width: 768px) {
  :root {
    --hero-content-top: 6vh;
  }

  /* a bit higher on small screens */
}

/* === Container width vars to align hero text with header .container === */
:root {
  --container-max: 100%;
}

@media (min-width: 640px) {
  :root {
    --container-max: 640px;
  }
}

@media (min-width: 768px) {
  :root {
    --container-max: 768px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-max: 1024px;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-max: 1280px;
  }
}

@media (min-width: 1536px) {
  :root {
    --container-max: 1536px;
  }
}

/* === Hero title positioning and typography === */
:root {
  --hero-content-top: 20vh;
  /* default for large screens */
}

.hero-content .heading-xl {
  font-size: clamp(36px, 4.5vw, 64px);
}

/* === Hero text: large-screen alignment & vertical placement === */

/* Nudge the vertical offset only on large screens (keeps mobile/tablet unchanged) */
@media (min-width: 1280px) {

  /* xl */
  :root {
    --hero-content-top: 18vh;
  }
}

@media (min-width: 1536px) {

  /* 2xl */
  :root {
    --hero-content-top: 16vh;
  }
}

/* Fine-tune only the hero title line-height/letter-spacing (higher specificity) */
.hero-content .hero-title {
  line-height: 1.15;
  letter-spacing: -0.005em;
}

/* Anchor tuning: ensure section headings land consistently below header */
#benefits h2,
#modules h2 {
  scroll-margin-top: calc(var(--header-measured, var(--header-h, 70px)) + 64px);
}

@media (min-width: 1280px) {

  /* xl */
  .hero-content .hero-title {
    line-height: 1.2;
  }
}

@media (min-width: 1536px) {

  /* 2xl */
  .hero-content .hero-title {
    line-height: 1.2;
  }
}

/* Hero CTA pills – solid brand color */
.cta-pill {
  background: #1064CB !important;
}

.cta-pill:hover {
  background: #1064CB !important;
}

/* Make sure Inter is available */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.font-inter {
  font-family: 'Inter', sans-serif;
}

/* === Icon height root variables === */
:root {
  --icon-h: 40px;
}

@media (min-width: 1280px) {
  :root {
    --icon-h: 44px;
  }
}

@media (min-width: 1536px) {
  :root {
    --icon-h: 48px;
  }
}

/* === Scroll reveal: fade + rise + soft blur === */
.reveal-up,
.hero-demo {
  opacity: 0;
  transform: translateX(-18px);
  filter: blur(6px);
  /* Scope the delay to just these properties */
  transition:
    opacity .7s ease var(--d, 0ms),
    transform .7s cubic-bezier(.2, .7, 0, 1) var(--d, 0ms),
    filter .7s ease var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal-up.in,
.hero-demo.in {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* === Primary CTA button (rounded, simple color fade on hover) === */
:root {
  --btn-bg: #1064CB;
  /* base brand blue */
  --btn-hover: #1064CB;
  /* hover blue */
  --btn-active: #1064CB;
  /* active press */
}

.btn-demo {
  position: relative;
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 2rem;
  /* <- juster her om du vil endre størrelsen */
  max-width: max-content;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #ffffff;
  background: var(--btn-bg);
  overflow: hidden;
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .15s ease,
    opacity .15s ease;
  will-change: transform, background-color;
}

/* Make the hero CTA 10% smaller without affecting header variant */
.hero-content .btn-demo {
  font-size: 12pt;          /* set in points for "Les mer" */
  padding: 0.54rem 1.8rem;  /* keep compact padding */
}


.btn-demo:hover {
  background: var(--btn-hover);
  text-decoration: none;
}


.btn-demo:active {
  background: var(--btn-active);
}

.btn-demo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(48, 132, 235, 0.25);
}

/* Small variant for header button (same look, tighter sizing) */
.btn-demo--sm {
  padding: 0.45rem 1.1rem;
  /* smaller than the hero button */
  font-size: 0.875rem;
  /* ~14px */
  line-height: 1.1;
}

@media (min-width: 1280px) {
  .btn-demo--sm {
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* Header button adjustments: remove extra top margin and nudge up */
.header-pill .btn-demo { margin-top: 0; }
.header-pill .btn-demo--sm {
  position: relative;
  top: -2px; /* adjust between -1px and -4px if needed */
}


.header-pill .language-switcher {
  margin-left: 1.25rem;
}

.language-switcher {
  position: relative;
}

.language-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: transparent;
  color: #111827;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.language-switcher__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}

.language-switcher__toggle:hover,
.language-switcher__toggle:focus-visible {
  color: #1064CB;
  outline: none;
}

.language-switcher__chevron {
  width: 1rem;
  height: 1rem;
}

.language-switcher__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 13rem;
  padding: 0.4rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 1200;
}

.language-switcher__menu.is-open {
  display: flex;
}

.language-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease;
}

.language-switcher__option:hover,
.language-switcher__option:focus-visible {
  background: rgba(16, 100, 203, 0.08);
  color: #1064CB;
  outline: none;
}

.language-switcher--mobile {
  display: flex;
  justify-content: center;
}

.language-switcher--mobile .language-switcher__menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.language-switcher--mobile .language-switcher__toggle {
  width: 100%;
  justify-content: center;
}

/* === Mobile language circles (inside mobile menu) === */
.lang-circles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding-bottom: 0.25rem;
}

/* Keep language circles near the bottom but always visible */
#mobile-menu .menu-content .lang-circles { margin-top: 1rem; }

.lang-circle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid transparent; /* stroke only */
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: none; /* no drop shadow */
  transition: border-color 160ms ease, transform 120ms ease;
}

.lang-circle .flag {
  font-size: 22px;
  line-height: 1;
}

.lang-circle:focus-visible { outline: 2px solid #1064CB; outline-offset: 2px; }

.lang-circle:hover { transform: translateY(-1px); }

.lang-circle.is-active {
  border-color: #1064CB; /* blue stroke only */
}

/* === Tablet/XL: center demo and hide all hero text (1280–1500px) === */
@media (max-width: 1500px) and (min-width: 768px) {
  .hero-demo {
    position: relative !important;
    /* detach from absolute layout */
    left: auto !important;
    right: auto !important;
    margin: -120px auto 0 auto;
    /* sit just under header */
    transform: none !important;
    width: min(90vw, 980px);
    height: clamp(360px, 52vh, 640px);
    z-index: 2;
    /* behind text overlap */
  }

  #home.hero-solid {
    /* add a little more headroom so nothing sits under the header */
    padding-top: calc(var(--header-h, 70px) + 84px) !important;
  }

  .hero-content {
    position: relative !important;
    /* below the demo */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: min(860px, 92vw);
    margin: -40px auto 0 auto;
    /* slight overlap with bottom of demo */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    /* above demo for clean overlap */
  }

  .hero-content .hero-title {
    line-height: 1.12;
  }

  .hero-content p {
    max-width: 720px;
  }
}

/* Ensure customers scroller anchors to the bottom of the hero */
.hero-solid .customers-section {
  position: absolute !important;
  left: 0; right: 0; bottom: 40px !important;
  margin-top: 0 !important;
}

@media (max-width: 1024px) {
  .hero-solid .customers-section { bottom: 200px !important; }
}

/* Phones: bump logos a bit closer to the bottom */
@media (max-width: 640px) {
  .hero-solid .customers-section { bottom: 180px !important; }
}

/* ===== Testimonials ===== */
.testimonials {
  position: relative;
}

/* ===== Simple Modules Grid (fallback design) ===== */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.8vw, 2rem);
  align-items: stretch;
  margin-top: 1.25rem;
}

.module-box {
  background: #ffffff;
  border-radius: 26px;
  /* Slightly larger vertical padding for breathing room */
  --module-pad: clamp(1.25rem, 3.2vw, 1.8rem);
  padding: var(--module-pad);
  padding-top: calc(var(--module-pad) + 0.25rem);
  padding-bottom: calc(var(--module-pad) + 0.25rem);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.6vw, 0.9rem);
}

/* Mobile: a touch more vertical padding inside module boxes */
@media (max-width: 1023px) {
  .module-box {
    padding-top: calc(var(--module-pad) + 0.5rem);
    padding-bottom: calc(var(--module-pad) + 0.5rem);
  }
}

.module-box__title {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.25;
  color: #0f172a;
  margin: 0;
}

.module-box__text {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.8vw, 2.5rem);
  max-width: min(1500px, 100%);
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 26px;
  position: relative;
  width: 85%;
  max-width: 420px;
  height: 100%;
  --testimonial-pad: clamp(1.4rem, 3.4vw, 2.1rem);
  padding: var(--testimonial-pad);
  padding-top: clamp(1.6rem, 3.8vw, 2.4rem);
  padding-bottom: clamp(1.6rem, 3.8vw, 2.4rem);
  box-shadow: 0 11px 31px rgba(15, 23, 42, 0.056);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: clamp(0.9rem, 2.4vw, 1.4rem);
  min-height: clamp(250px, 24vw, 310px);
}

.testimonial-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.3rem, 1.4vw, 0.8rem);
  width: 100%;
  max-width: clamp(160px, 20vw, 220px);
  margin: 0 auto;
  min-height: clamp(82px, 14vw, 118px);
}

.testimonial-card__logo img {
  height: clamp(64px, 9vw, 88px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.08));
}

.testimonial-card:nth-child(1) .testimonial-card__logo img {
  height: clamp(36px, 5vw, 58px);
}

.testimonial-card:nth-child(2) .testimonial-card__logo img {
  height: clamp(54px, 8vw, 76px);
}

.testimonial-card__quote {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.7;
  color: #0f172a;
  margin: 0 auto;
  max-width: 32ch;
  text-wrap: balance;
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.6vw, 0.3rem);
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin-top: auto;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: clamp(4.6rem, 8vw, 6.2rem);
  justify-content: flex-end;
  overflow: visible;
}

.testimonial-card__name {
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: #0f172a;
}

.testimonial-card__role {
  font-weight: 300;
  font-size: clamp(0.85rem, 1.3vw, 0.95rem);
  color: #4b5563;
}

.testimonial-card__icon {
  position: absolute;
  top: clamp(0.9rem, 2.6vw, 1.3rem);
  right: clamp(0.9rem, 2.6vw, 1.3rem);
  width: clamp(28px, 3.2vw, 34px);
  height: clamp(28px, 3.2vw, 34px);
  display: grid;
  place-items: center;
}

.testimonial-card__icon svg {
  width: 100%;
  height: 100%;
  color: #1064CB;
  stroke-width: 1.6;
  fill: #ffffff;
}

@media (max-width: 1280px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.4rem, 6vw, 2.6rem);
  }

  .testimonial-card {
    width: min(94%, 480px);
  }
}

/* Make sure the sticky area isn't covered by hero/other elements with masks */
.hd-stage,
.hero-demo {
  isolation: isolate;
}

/* --- Hero label above title (does not push layout) --- */
.hero-title {
  position: relative;
}

.hero-title::before {
  content: "VYZR.KVALITETSSYSTEM";
  position: absolute;
  left: 0;
  bottom: 100%;
  content: attr(data-hero-label);
  transform: translateY(-10px);
  /* gap between label and title */
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #1064CB;
  white-space: nowrap;
  pointer-events: none;
}

/* Center the hero label over the title for mid-width screens */
@media (min-width: 1024px) and (max-width: 1500px) {
  .hero-title::before {
    left: 50%;
    /* Dytt label litt ned */
    transform: translate(-50%, -6px);
  }
}

/* Dytt hele heroen litt ned (kun 1024–1500px) */
@media (min-width: 1024px) and (max-width: 1500px) {
  #home.hero-solid {
    /* Et hakk til ned */
    padding-top: calc(var(--header-h, 70px) + 116px) !important;
  }
}

/* Optional: slightly reduce spacing on smaller screens */
@media (max-width: 1023px) {
  .hero-title::before {
    transform: translateY(-8px);
    font-size: 13px;
  }
}
/* Outfit font utility */
.outfit {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: inherit;
}

/* === Hero CTA icon: pulsating chevrons (top → bottom) === */
.btn-demo .lucide-chevrons-down { stroke: currentColor; }

@keyframes chevronPulse {
  0%   { opacity: .55; transform: translateY(0) scale(1); }
  50%  { opacity: 1;   transform: translateY(2px) scale(1.04); }
  100% { opacity: .65; transform: translateY(0) scale(1); }
}

/* Two paths: first is top chevron, second is bottom chevron */
.btn-demo .lucide-chevrons-down path {
  stroke-dasharray: none; /* ensure no draw effect */
  stroke-dashoffset: 0;
  transform-origin: center;
}

.btn-demo .lucide-chevrons-down path:nth-of-type(1) {
  animation: chevronPulse 1.6s ease-in-out infinite;
  animation-delay: 0s;
}

.btn-demo .lucide-chevrons-down path:nth-of-type(2) {
  animation: chevronPulse 1.6s ease-in-out infinite;
  animation-delay: .18s;
}

@media (prefers-reduced-motion: reduce) {
  .btn-demo .lucide-chevrons-down path { animation: none !important; }
}
/* ========== Modules layout ========== */
.modules-section {
  padding-top: 0;
  padding-bottom: clamp(4rem, 7vw, 5.5rem);
}

.modules-intro {
  max-width: 760px;
  margin: 0;
  text-align: left;
}

.modules-intro small {
  display: inline-block;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1064CB;
}

.modules-intro h2 {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 3rem);
  color: #111827;
  margin-top: 0.1rem;
}

.modules-intro p {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: #374151;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
}

.module-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 7vw, 7rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.module-row:last-of-type {
  margin-bottom: 0;
}

.module-row--reverse {
  flex-direction: row-reverse;
}

.module-row__image {
  flex: 0 0 clamp(380px, 42vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.module-row__image img {
  width: clamp(360px, 45vw, 640px);
  max-width: 100%;
  display: block;
  border-radius: 28px;
  box-shadow: none;
  object-fit: cover;
}

.module-row--reverse .module-row__image {
  flex: 0 0 clamp(460px, 55vw, 780px);
  display: flex;
  justify-content: flex-end;
}

.module-row--reverse .module-row__image img {
  width: clamp(460px, 55vw, 780px);
  max-width: none;
  margin: 0;
}

.module-more-btn {
  margin: clamp(1.1rem, 2vw, 1.8rem) auto 0;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid rgba(16, 100, 203, 0.4);
  color: #1064CB;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}

.module-more-btn:hover,
.module-more-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}

.module-more-btn:focus-visible {
  outline: 3px solid rgba(16, 100, 203, 0.35);
  outline-offset: 2px;
}


.module-row__content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: center;
  text-align: center;
}

.module-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.module-header h3 {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.65rem, 2.6vw, 2.1rem);
  color: #111827;
}

.module-icon {
  width: clamp(38px, 3vw, 44px);
  height: clamp(20px, 3vw, 30px);
  object-fit: contain;
}

.module-row__content p {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: #1f2937;
  line-height: 1.55;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
}

.module-points {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.module-points li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 1rem;
  color: #1f2937;
  line-height: 1.5;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
}

.module-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background-color: #1064CB;
}

@media (min-width: 1024px) {
  .modules-intro {
    margin: 0 0 clamp(3rem, 5vw, 4rem);
  }
}

@media (max-width: 1023px) {
  .modules-intro {
    margin-bottom: 2.75rem;
  }

  .module-row,
  .module-row--reverse {
    flex-direction: column;
    gap: 2rem;
  }

  .module-row__image,
  .module-row__content {
    flex: 1 1 auto;
    width: 100%;
  }

  .module-row__image img {
    border-radius: 22px;
  }

  .module-row--reverse .module-row__image {
    width: 100%;
    margin-right: 0;
  }

  .module-row--reverse .module-row__image img {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===== Module gallery overlay ===== */
.module-gallery[hidden] {
  display: none;
}

.module-gallery {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.module-gallery.is-active {
  pointer-events: auto;
}


.module-gallery__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.module-gallery.is-active .module-gallery__backdrop {
  opacity: 1;
}

.module-gallery__panel {
  position: relative;
  width: min(1800px, 98vw);
  height: min(calc(100vh - clamp(40px, 9vh, 120px)), 92vh);
  background: #ffffff;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.12);
  padding: clamp(2.2rem, 4vw, 3.2rem);
  transform: translateY(18%);
  opacity: 0;
  transition: transform 280ms ease, opacity 220ms ease;
  display: flex;
  flex-direction: column;
}

.module-gallery.is-active .module-gallery__panel {
  transform: translateY(0);
  opacity: 1;
}

.module-gallery__close {
  position: absolute;
  top: clamp(0.35rem, 1.1vw, 0.8rem);
  right: clamp(0.35rem, 1.1vw, 0.9rem);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.module-gallery__close:hover,
.module-gallery__close:focus-visible {
  transform: scale(1.05);
}

.module-gallery__close:focus-visible {
  outline: 3px solid rgba(16, 100, 203, 0.35);
  outline-offset: 2px;
}

.module-gallery__body {
  margin-top: auto;
  display: flex;
  gap: clamp(2rem, 4vw, 3.5rem);
  height: 100%;
}

.module-gallery__info {
  flex: 0 0 min(320px, 26%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(1rem, 2vw, 1.4rem);
  color: #111827;
}

.module-gallery__info-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(0.9rem, 2vw, 1.1rem);
}

.module-gallery__icon {
  width: clamp(30px, 2.4vw, 40px);
  height: clamp(30px, 2.4vw, 40px);
  object-fit: contain;
}

.module-gallery__info h3 {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
}

.module-gallery__copy {
  display: grid;
  gap: 0.85rem;
  margin-top: clamp(0.45rem, 1.2vw, 0.9rem);
}

.module-gallery__copy-item {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify;
  color: rgba(17, 24, 39, 0.55);
  transition: color 200ms ease, opacity 200ms ease;
}

.module-gallery__copy-item.is-active {
  color: #111827;
}

.module-gallery__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.module-gallery__points li {
  position: relative;
  padding-left: 1.6rem;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  color: #1f2937;
}

.module-gallery__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: #1064CB;
}

.module-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: auto;
  align-self: center;
}

.module-gallery__nav {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.26);
  color: #0f172a;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.module-gallery__chevron {
  width: 18px;
  height: 18px;
}

.module-gallery__nav.is-disabled,
.module-gallery__nav:disabled {
  background: rgba(255, 255, 255, 0.26);
  color: #9CA3AF;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

.module-gallery__nav:hover,
.module-gallery__nav:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.52);
}

.module-gallery__nav:focus-visible {
  outline: 3px solid rgba(16, 100, 203, 0.35);
  outline-offset: 1px;
}

.module-gallery__dots {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.module-gallery__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #D9D9D9;
  cursor: pointer;
  transition: width 200ms ease, background 200ms ease, border-radius 200ms ease;
}

.module-gallery__dot.is-active {
  width: 28px;
  border-radius: 999px;
  background: #1064CB;
}

.module-gallery__dot:hover,
.module-gallery__dot:focus-visible {
  background: #f0f0f0;
}


.module-gallery__media {
  flex: 1 1 74%;
  border-radius: clamp(24px, 3vw, 36px);
  padding: 0;
  background: transparent;
  display: flex;
}

.module-gallery__slides {
  position: relative;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-gallery__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.module-gallery__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: inherit;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .module-gallery__panel {
    width: 100vw;
    border-radius: 24px 24px 0 0;
    padding: clamp(1.6rem, 4vw, 2rem);
  }

  .module-gallery__body {
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem);
  }

  .module-gallery__info {
    flex: 0 0 auto;
  }

  .module-gallery__media {
    flex: 1 1 auto;
  }
}

body.module-gallery-open {
  overflow: hidden;
}

/* Mobile testimonials are visible again (reset removal) */


footer.bg-white {
  border-radius: 32px 32px 0 0;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-bottom: clamp(2.4rem, 8vw, 4rem);
}

footer.bg-white .container {
  padding-bottom: clamp(1rem, 2.2vw, 1.6rem);
}


#contact {
  border-radius: 32px;
  overflow: hidden;
}