body {
  font-family: 'Outfit', sans-serif;
  line-height: 1.5;
  background: #A1C4FD; /* Match SVG bottom color to prevent body background bleed */
  margin: 0; /* Remove default body margin that could cause gaps */
  height: 100%; /* Ensure body takes full height */
}

header {
  /* Glassmorphism baseline */
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  /* box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06); */ /* Legger til skygge på headeren (under) */
}

section {
  scroll-margin-top: 80px;
}

.info-box,
.module-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-box:hover,
.module-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);
}

a.bg-cyan-600 {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

a.bg-cyan-600:hover {
  transform: scale(1.05);
}

.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;
  /* Tailwind cyan-600 */
  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);
}

#main-content {
  transition: filter 0.3s ease;
  padding-top: 60px;
}

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

footer a {
  transition: color 0.3s ease;
}

.customers-section {
  padding: 2rem 0;
  background: transparent;
  /* Matches white section */
  margin-top: 1rem;
  /* Adjust to move up/down */
  margin-bottom: 5rem;
  position: relative;
  overflow: hidden;
}

.customers-container {
  max-width: 80%;
  /* Centered container with consistent width */
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  /* Consistent padding on all screen sizes */
  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;
  /* Slower speed (100s) */
  width: 200%;
  /* Double width for seamless loop */
  position: relative;
}

.logo-wrapper img {
  height: 30px;
  margin: 0 1rem;
  opacity: 0.8;
  /* Default opacity */
}

/* Remove hover effect completely */
.logo-wrapper img:hover {
  opacity: 0.8;
  /* No change, effectively disabling hover */
  transition: none;
  /* Remove transition to prevent hover interference */
}

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

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

/* Ensure seamless loop */
.logo-wrapper {
  width: 200%;
  /* Double the width to accommodate duplicates */
}

/* Menu items animation */
.nav-menu a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  /* Matches your example, adjust if needed */
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #6C8CCB, #6f83cf);
  /* Gradient from your code */
  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;
}

/* === Overlay — utgangspunkt === */
#demo-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: rgba(185, 185, 185, 0);
  /* starter helt transparent */
  backdrop-filter: blur(1px);
  opacity: 0;
  /* usynlig til animasjon starter */
}

/* === Når vi viser modal === */
#demo-modal.show {
  display: block;
  /* Kun overlay-animasjon */
  animation: fadeInOverlay 0.3s ease-in forwards;
}

/* === Innholds-boksen kjører sin egen animasjon === */
#demo-modal.show .max-w-md {
  animation: slideUpFadeIn 0.3s ease-out forwards;
}

/* === Uendret styling for popup-boksen, beholder opprinnelig posisjonering === */
#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;
  /* slik du hadde det */
  position: absolute;
}

/* === Uendrede input- og knapp-stiler === */
#demo-modal input {
  border-color: #e5e7eb;
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

#demo-modal button {
  cursor: pointer;
}

/* === Keyframes === */
@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);
  }
}

/* Subtil oppmerksomhetsanimasjon for .js-book-demo */
@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.nudge {
  animation: nudge-wiggle 1000ms cubic-bezier(.2, .8, .2, 1) both;
}

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

.js-book-demo.nudge {
  position: relative;
}

/* Respekter redusert animasjon */
@media (prefers-reduced-motion: reduce) {

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

.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 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    border-radius 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.floating-demo-btn .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.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);
  /* Starter med høyre side klippet */
  transition: opacity 0.3s ease, clip-path 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.floating-demo-btn .expanded text {
  opacity: 0;
  transition: opacity 0.3s ease 0.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(0.95);
  }

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

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

  50% {
    transform: scale(0.9);
  }

  70% {
    transform: scale(1.05);
  }

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

/* === Book-demo (mobil) – variabler for enkel tweaking === */
:root {
  --bookdemo-height: 4rem;
  /* sirkel-diameter + pill-høyde */
  --bookdemo-width: 16rem;
  /* pill-lengde */
  --bookdemo-radius: 999px;
  --bookdemo-bg: #27304F;
  --bookdemo-color: #ffffff;

  --bookdemo-open-duration: 420ms;
  --bookdemo-close-duration: 320ms;
  --bookdemo-auto-delay: 2000ms;
  /* ventetid før auto-spill */
  --bookdemo-auto-visible: 2000ms;
  /* hvor lenge pill vises før auto-lukk */
}

/* Skjul hele komponenten på ≥ md (>=768px) */
@media (min-width: 768px) {
  .book-demo-mobile {
    display: none !important;
  }
}

/* Plassering nede til høyre på mobil */
.book-demo-mobile {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: var(--bookdemo-height);
  height: var(--bookdemo-height);
}

/* PILL som avsløres med clip-path (høyre→venstre) */
.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;
  /* klaring v. tekst */
  padding-right: 4rem;
  /* klaring mot sirkel */
  color: var(--bookdemo-color);

  /* Start skjult fra venstre; åpner høyre→venstre */
  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;
}

/* Åpen tilstand: avslør hele pillen */
.book-demo-mobile.is-open .book-demo__reveal {
  clip-path: inset(0 0 0 0 round var(--bookdemo-radius));
}

/* Lukking: litt raskere */
.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));
}

/* Tekst */
.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;
}

/* Sirkel-knapp (øverst) */
.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;
}

/* Ikoner – bytt på åpen/lukket */
.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;
}

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

/* Abel-font (om ikke lagt inn i <head>) */
/* <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet"> */

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

/* PILL: Start skjult fra venstre; åpner høyre→venstre */
.reveal {
  clip-path: inset(0 0 0 100% round 999px);
  transition: clip-path 420ms cubic-bezier(.2, .7, 0, 1);
  will-change: clip-path;
}

/* Når wrapperen får .open → vis hele pillen */
.open .reveal {
  clip-path: inset(0 0 0 0 round 999px);
}

/* Skjul hele komponenten på ≥ md (>=768px) */
@media (min-width: 768px) {
  .book-demo-mobile {
    display: none !important;
  }
}

/* Skjul/vis smile ved åpen/lukket (fallback hvis inline style ikke brukes) */
.group.open #iconCalendar {
  display: none !important;
}

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

/* Demper mobilpillen etter innsending */
.book-demo-mobile.submitted {
  opacity: 0.25;
  transition: opacity 300ms ease;
}

/* Litt mer synlig ved hover/fokus (om du vil) */
.book-demo-mobile.submitted:hover,
.book-demo-mobile.submitted:focus-within {
  opacity: 0.5;
}

/* (valgfritt) demp desktop-knappen hvis du la til .submitted der også */
.js-book-demo.submitted {
  opacity: 0.5;
  pointer-events: auto;
  /* behold klikkbarhet */
  transition: opacity 300ms ease;
}

/* === Fullscreen mobilmeny via utvidet header === */
@media (max-width: 1024px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    transition: height 0.6s ease, background 0.3s ease, backdrop-filter 0.3s ease;
    overflow: hidden;
    z-index: 1000;

    /* Glass on mobile too */
    background: rgba(255, 255, 255, 0.40);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    /* box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06); */ /* Legger til skygge på headeren (under) */
  }

  header.expanded {
    height: 100vh;

    /* Slightly stronger veil when expanded to give depth */
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    border-bottom: none; /* remove seam while expanded */
    box-shadow: none;    /* avoid visible divider at the fold */
  }

  /* Selve mobile-menu-innholdet (unchanged except it will sit on glass header) */
  #mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
    gap: 2.5rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }

  header.expanded #mobile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  #mobile-menu a {
    color: rgb(56, 56, 56);
    font-size: 2rem;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
  }

  #mobile-menu a:hover {
    color: #d36ff7;
  }
}

/* Skjul CTA-knapp på mobil når menyen er åpen */
@media (max-width: 1024px) {
  body.menu-open .floating-demo-btn,
  body.menu-open .book-demo-mobile {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
  }
}

/* Use Abel in the entire footer (skip <i> icons) */
footer.font-abel,
footer.font-abel *:not(i) {
  font-family: 'Abel', sans-serif;
}

@media (min-width: 1536px) {
  .info-box {
    min-height: 300px; /* adjust as needed */
  }
}

.font-abel {
  font-family: 'Abel', sans-serif;
}
.text-custom-blue {
  color: #6C8CCB;
}

/* Brand-variabler (valgfritt) */
:root{
  --brand:#6C8CCB;         /* primær blålilla */
  --ink:#27304F;           /* mørk bakgrunnsfarge du bruker ellers */
  --bg-top:#F7FAFF;        /* lys topp */
  --bg-mid:#FFFFFF;        /* hvit */
}

/* HERO: moderne mesh + subtilt mønster + dybde */
.hero-modern{
  position: relative;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 60%);
  isolation:isolate; /* sørger for at blur-lag ligger pent under innholdet */
}

/* Mesh-blob-lag (myke “lys-flekker”) */
.hero-modern::before{
  content:"";
  position:absolute;
  inset:-20% -10% -10% -10%;
  z-index:-1;
  /* flere radial-gradients som mesh */
  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;
}

/* Subtil prikketekstur for dybde */
.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;
  /* myk “fade” mot topp/bunn så mønsteret ikke tar over */
  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%);
}

/* Lett flyt-animasjon av mesh */
@keyframes heroDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-12px,0) scale(1.03); }
}

/* Respekter redusert animasjon */
@media (prefers-reduced-motion: reduce){
  .hero-modern::before{ animation:none; }
}

/* Ekstra “luft” på svært brede skjermer om ønskelig */
@media (min-width:1536px){ /* 2xl i Tailwind */
  .hero-modern{ padding-top: 9rem; padding-bottom: 9rem; } /* ~py-36 */
}

:root{
  /* justér til faktisk header-høyde */
  --header-h: 80px;
}

/* Hero som overlapper bak header + myke kanter */
.hero-blend {
  position: relative;
  margin-top: calc(var(--header-h) * -1);                   /* trekk opp bak headeren */
  padding-top: calc(var(--header-h) + 120px);                /* sørg for at tittel ikke havner under headeren */
  padding-bottom: 0;                                     /* Remove padding to align with bottom */
  overflow: hidden;
  min-height: 100vh;                                         /* Force full viewport height */
  height: 100vh;                                             /* Explicit height to match viewport */
}

/* Top “feather” så overgangen mot semi-transparent header blir myk */
.hero-blend::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--header-h) + 24px);
  pointer-events: none;
  /* hvit “tåke” oppover – justér om headeren har annen bakgrunn */
  background: linear-gradient(to top,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.7) 50%,
    rgba(255,255,255,1) 100%
  );
}

/* Bottom feather inn i neste seksjon (bg-gray-50 ≈ #F9FAFB) */
.hero-blend::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    #F9FAFB 90%
  );
}

/* Litt høyere på store skjermer */
@media (min-width: 1024px){
  .hero-blend{ min-height: 100vh; height: 100vh; padding-bottom: 0; }
}

/* Headeren ligger på z-50 hos deg. Denne legger vi på 40, så den ligger UNDER headeren,
   men OVER resten av siden. Den påvirker ikke klikk (pointer-events:none). */
.header-feather{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;                 /* ← juster høyden for hvor langt “blått” skal dra seg ned */
  z-index: 40;                   /* header har z-50, så denne havner under */
  pointer-events: none;

  /* Myk vertikal gradient som matcher hero-paletten */
  background: linear-gradient(
    to bottom,
    rgba(108,140,203,0.18) 0%,
    rgba(108,140,203,0.12) 40%,
    rgba(108,140,203,0.06) 70%,
    rgba(108,140,203,0.00) 100%
  );
}

/* Hero: ensure enough height for the waves + keep text clear of them */
.hero-pad-waves {
  /* extra space so text doesn’t sit on the waves */
  padding-bottom: 0; /* Remove to align with bottom */
}

/* Waves: stick to bottom and scale horizontally without squishing vertically */
.hero-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;         /* Force SVG to fill hero height */
  pointer-events: none; /* never intercept clicks */
}

/* … alt ditt uendret over … */

/* --- HERO/WAVES TILLEGG (kun dette er nytt) ------------------------------ */

/* 1) La denne heroen fylle hele vinduet, så bunnen av bølgene flukter med bunn */
.hero-blend.hero-full{
  min-height: 100vh;
  height: 100vh; /* Explicit height to match viewport */
  padding-bottom: 0; /* Remove padding to align waves */
}

/* 2) Fjern “bottom feather”-overgangen på denne siden,
      så vi ikke får et hvitt belte over bølgene */
.hero-blend.no-bottom-feather::after{
  display: none !important; /* Stronger specificity to ensure removal */
}

/* Bølgene forankres i bunn og fyller hele høyden uten å bli klemt */
.hero-waves{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%; /* Ensure full height coverage */
  pointer-events:none;
}

/* Flytt bare bølge-pathene, ikke bakgrunns-rect */
.waves-shift{
  transform: translateY(0);   /* Reset to 0 to avoid gap, adjust if needed */
  will-change: transform;
}

@media (max-width: 480px){
  .waves-shift{ transform: translateY(0); }
}

/* Sørg for at hele heroen faktisk fyller vinduet */
.hero-blend.hero-full{ min-height:100vh; height: 100vh; }

/* Og vi har allerede slått av bunngradienten: */
.hero-blend.no-bottom-feather::after{ display:none; }

/* (valgfritt) litt mindre flytt på veldig små skjermer */
@media (max-width: 480px){
  .waves-shift{ transform: translateY(0); }
}

/* 1) Make hero fill the viewport and stop the white feather at the bottom */
html {
  height: 100%; /* Ensure html takes full height */
}

#home.hero-blend{
  min-height: 100vh;     /* hero spans full viewport */
  height: 100vh;         /* Explicit height */
  padding-bottom: 0;     /* Remove padding to align waves */
}

/* That small white band was your .hero-blend::after gradient */
#home.hero-blend::after{
  display: none !important;  /* hide bottom feather on this page */
}

/* 2) Waves: fill the hero, stick to bottom, and don't get pushed by margins */
.hero-waves{
  position: absolute;
  inset: 0;
  bottom: 0;
  width: 100%;
  height: 100%;               /* let the SVG occupy the whole hero */
  display: block;             /* kill inline-SVG descender gaps */
  margin-top: 0 !important;   /* override any mt-24 on the element */
  pointer-events: none;
}

/* 3) Nudge only the wave paths down (NOT the sky/background rect) */
.waves-shift{
  transform: translateY(0); /* Reset to avoid gap */
  will-change: transform;
}

/* Optional: slightly reduce the nudge on short viewports so waves don’t get too low */
@media (max-height: 740px){
  .waves-shift{ transform: translateY(0); }
}

/* Outfit helpers */
.outfit { font-family: 'Outfit', sans-serif; }
.outfit-200 { font-weight: 200; } /* ExtraLight */
.outfit-300 { font-weight: 300; } /* Light */
.outfit-400 { font-weight: 400; } /* Regular */

/* Exact sizes that scale a bit responsively */
.text-72 { font-size: clamp(36px, 6vw, 72px); line-height: 1; }
.text-32 { font-size: clamp(18px, 2.5vw, 32px); line-height: 1.2; }
.text-36 { font-size: clamp(20px, 2.8vw, 36px); line-height: 1.2; }