:root {
  --bg: #e6f4f5;
  --dark: #235b63;
  --orange: #f47b3b;
  --teal: #43a8ae;
  --soft-orange: #ffd9c5;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--bg); }
body { font-family: "Poppins", Arial, sans-serif; color: var(--dark); }
.svg-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.page { width: 100vw; background: var(--bg); }
.canvas {
  position: relative;
  width: 100vw;
  aspect-ratio: 4269 / 6429;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.layer, .bg-lines { position: absolute; user-select: none; pointer-events: none; image-rendering: auto; }
.full { left: 0; top: 0; width: 100%; height: auto; }
.base-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg);
  background-image: url("assets/Background Web.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
}
/* Keep the original Canva background color and line tone. */
.base-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/Background Web.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: .18;
  mix-blend-mode: multiply;
}

.animated-bg-lines {
  z-index: 1;
  opacity: .58;
  mix-blend-mode: multiply;
  filter: url(#seaweed-lines);
  transform-origin: 50% 50%;
  animation: seaweedFloat 22s ease-in-out infinite alternate;
}

@keyframes seaweedFloat {
  0% { transform: translate3d(-0.28%, -0.10%, 0) scale(1.006) skewX(-0.35deg); }
  50% { transform: translate3d(0.32%, 0.18%, 0) scale(1.012) skewX(0.45deg); }
  100% { transform: translate3d(-0.18%, 0.05%, 0) scale(1.008) skewX(-0.25deg); }
}

.bg-lines { display: none; }

.elements { z-index: 2; }
.logo { z-index: 8; }
.upper-buttons { z-index: 10; }
.news-button { left: 35.63%; top: 1.99%; width: 100%; z-index: 9; }
.noah { left: 22.59%; top: 19.86%; width: 100%; z-index: 6; }
.friends { left: -23.94%; top: 40.07%; width: 100%; z-index: 6; }
.cold-img { left: -20.45%; top: 62.57%; width: 100%; z-index: 6; }
.warm-img { left: 21.32%; top: 64.06%; width: 100%; z-index: 6; }
.decorative-wave {
  left: 6.9%;
  top: 36.95%;
  width: 57.2%;
  height: auto;
  z-index: 4;
}

.copy, .nav-btn, .section-badge { position: absolute; z-index: 7; text-align: center; }
.hero-title, .section-title, .cold-title, .warm-title, .closing, .beginning, .nav-btn { font-family: "MuseoModerno", "Poppins", sans-serif; }
.hero-title {
  left: 9.5%; top: 24.15%; width: 43%;
  white-space: nowrap;
  color: var(--orange); font-size: 2.82vw; line-height: 1.38; font-weight: 800; letter-spacing: .035em;
}
.hero-sub {
  left: 10.2%; top: 32.55%; width: 43%;
  white-space: nowrap;
  font-size: 1.58vw; line-height: 1.34; font-weight: 400; letter-spacing: .02em;
}
.beginning {
  left: 13.2%; top: 40.45%; width: 43%;
  color: var(--orange); font-size: 1.86vw; line-height: 1.25; font-weight: 500; letter-spacing: .08em;
}
.vision {
  left: 47.2%; top: 43.65%; width: 43.5%;
  font-size: 1.62vw; line-height: 1.47; font-weight: 400; letter-spacing: .015em;
}
.vision strong { font-weight: 800; }
.section-title {
  left: 27.0%; top: 58.95%; width: 46%;
  color: var(--orange); font-size: 2.12vw; font-weight: 900; letter-spacing: .115em; white-space: nowrap;
  padding: .55em .75em .48em; border-radius: .42em; background: rgba(255,217,197,.94);
}
.cold-title, .warm-title { color: var(--teal); font-size: 2.10vw; font-weight: 900; letter-spacing: .18em; white-space: nowrap; }
.cold-title { left: 13.0%; top: 81.15%; width: 34%; }
.warm-title { left: 58.8%; top: 81.15%; width: 36%; }
.cold-text, .warm-text { font-size: 1.48vw; line-height: 1.31; font-weight: 400; letter-spacing: .01em; }
.cold-text { left: 13.5%; top: 85.25%; width: 33%; }
.warm-text { left: 57.2%; top: 85.25%; width: 39%; }
.closing { left: 10.0%; top: 95.15%; width: 64%; color: var(--orange); font-size: 2.22vw; font-weight: 900; letter-spacing: .085em; text-align: left; white-space: nowrap; }

/* Real visible navigation buttons, positioned on top of the teal bar */
.nav-btn {
  display: flex; align-items: center; justify-content: center;
  height: 2.75%;
  border-radius: 999px; background: #fff;
  color: #1b1b1b; text-decoration: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.02vw; font-weight: 500;
  letter-spacing: .01em;
  box-shadow: none;
  z-index: 12;
}
.nav-story { left: 10.9%; top: 15.55%; width: 14.7%; }
.nav-offer { left: 32.65%; top: 15.55%; width: 14.7%; }
.nav-find { left: 52.85%; top: 15.55%; width: 14.7%; }
.nav-contact { left: 74.05%; top: 15.55%; width: 14.9%; }

.hotspot { position: absolute; z-index: 20; display: block; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; text-decoration: none; }
.hotspot:focus-visible { outline: 3px solid rgba(67,168,174,.9); outline-offset: 4px; border-radius: 999px; }
.lang { left: 5.5%; top: 2.4%; width: 7.8%; height: 4.3%; border-radius: 999px; }
.news { left: 81.2%; top: 5.2%; width: 8.5%; height: 4.2%; border-radius: 999px; }
.menu { left: 88.7%; top: 1.5%; width: 7.5%; height: 6.5%; border-radius: 999px; }
.story { left: 10.9%; top: 15.55%; width: 14.7%; height: 2.75%; border-radius: 999px; }
.offer { left: 32.65%; top: 15.55%; width: 14.7%; height: 2.75%; border-radius: 999px; }
.find { left: 52.85%; top: 15.55%; width: 14.7%; height: 2.75%; border-radius: 999px; }
.contact { left: 74.05%; top: 15.55%; width: 14.9%; height: 2.75%; border-radius: 999px; }
.floating-menu {
  position: absolute; right: 4.2%; top: 9.4%; width: min(260px, 18vw); min-width: 190px;
  padding: 14px; border-radius: 24px; background: rgba(255,255,255,.96);
  box-shadow: 0 18px 40px rgba(0,0,0,.14); z-index: 30;
}
.floating-menu a { display: block; padding: 10px 14px; border-radius: 14px; color: var(--dark); text-decoration: none; font-family: "MuseoModerno", "Poppins", sans-serif; font-weight: 800; }
.floating-menu a:hover { background: var(--bg); }


/* Desktop design protection: below tablet width, keep the Canva layout proportional.
   This prevents text boxes/buttons from wrapping or overlapping while we build a separate mobile version. */
@media (max-width: 900px) {
  html, body { overflow-x: auto; }
  .page { width: 900px; min-width: 900px; }
  .canvas { width: 900px; min-width: 900px; }
}

/* ---------- Mobile version: separate layout, optimized for phones ---------- */
.mobile-home { display: none; }

@media (max-width: 768px) {
  html, body { overflow-x: hidden; background: var(--bg); }
  .page { width: 100%; min-width: 0; }
  .canvas { display: none; }

  .mobile-home {
    position: relative;
    display: block;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--dark);
    padding: 14px 18px 42px;
  }

  .mobile-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg);
    background-image: url("assets/Background Web.png");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: repeat-y;
    opacity: 1;
  }

  .mobile-header,
  .mobile-hero,
  .mobile-community,
  .mobile-offer,
  .mobile-nav {
    position: relative;
    z-index: 2;
  }

  .mobile-header {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: start;
    gap: 8px;
    min-height: 96px;
    margin-bottom: 4px;
  }

  .mobile-logo {
    justify-self: center;
    width: clamp(82px, 24vw, 106px);
    height: auto;
    display: block;
  }

  .mobile-lang,
  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--teal);
    color: white;
    box-shadow: 0 7px 16px rgba(35, 91, 99, .10);
    cursor: pointer;
  }

  .mobile-lang {
    font-size: 0;
    position: relative;
  }
  .mobile-lang::before {
    content: "EN/DE";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    justify-self: end;
  }
  .mobile-menu-btn span {
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: white;
  }

  .mobile-nav {
    margin: -18px 0 24px auto;
    width: min(260px, 86vw);
    padding: 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
  }
  .mobile-nav a {
    display: block;
    padding: 11px 13px;
    border-radius: 15px;
    color: var(--dark);
    text-decoration: none;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .03em;
  }
  .mobile-nav a:hover { background: rgba(67,168,174,.12); }

  .mobile-teal-divider {
    position: relative;
    z-index: 2;
    width: min(360px, 92vw);
    height: 18px;
    margin: 8px auto 24px;
    background: var(--teal);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(35, 91, 99, .08);
  }

  .mobile-copy { text-align: center; }

  .mobile-hero { padding: 4px 0 20px; }

  .mobile-hero-title {
    margin: 0 auto 18px;
    max-width: 350px;
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 850;
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.22;
    letter-spacing: .03em;
  }

  .mobile-hero-sub {
    margin: 0 auto 14px;
    max-width: 330px;
    font-size: clamp(15.5px, 4.15vw, 18px);
    line-height: 1.42;
    letter-spacing: .012em;
  }

  .mobile-noah {
    display: block;
    width: min(275px, 76vw);
    height: auto;
    margin: 2px auto 4px;
  }

  .mobile-wave {
    display: block;
    width: 92vw;
    max-width: 380px;
    height: 10px;
    object-fit: fill;
    margin: 2px auto 16px;
  }

  .mobile-beginning {
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.28;
    font-weight: 500;
    letter-spacing: .075em;
    margin: 0 auto;
    max-width: 350px;
  }

  .mobile-community { padding: 8px 0 28px; }

  .mobile-friends {
    display: block;
    width: min(330px, 88vw);
    height: auto;
    margin: 0 auto 18px;
  }

  .mobile-vision {
    max-width: 342px;
    margin: 0 auto;
    font-size: clamp(16px, 4.25vw, 18.5px);
    line-height: 1.48;
    letter-spacing: .008em;
  }
  .mobile-vision strong { font-weight: 800; }

  .mobile-offer { padding-top: 4px; }

  .mobile-section-title {
    display: block;
    width: min(330px, 88vw);
    margin: 0 auto 22px;
    padding: 12px 15px 11px;
    border-radius: 17px;
    background: rgba(255,217,197,.95);
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 900;
    font-size: clamp(19px, 5.2vw, 24px);
    line-height: 1.22;
    letter-spacing: .075em;
  }

  .mobile-card {
    max-width: 360px;
    margin: 0 auto 32px;
    text-align: center;
  }

  .mobile-product {
    display: block;
    width: min(340px, 92vw);
    height: auto;
    margin: 0 auto 14px;
  }

  .mobile-product-warm {
    width: min(245px, 66vw);
    margin-top: 4px;
  }

  .mobile-card h2 {
    margin: 4px 0 11px;
    color: var(--teal);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(22px, 6vw, 27px);
    line-height: 1.14;
    font-weight: 900;
    letter-spacing: .145em;
  }

  .mobile-card p {
    margin: 0 auto;
    max-width: 330px;
    font-size: clamp(15.5px, 4.15vw, 18px);
    line-height: 1.42;
  }

  .mobile-closing {
    max-width: 340px;
    margin: 0 auto;
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: .055em;
  }
}

@media (max-width: 380px) {
  .mobile-home { padding-left: 14px; padding-right: 14px; }
  .mobile-header { grid-template-columns: 44px 1fr 44px; min-height: 88px; }
  .mobile-lang, .mobile-menu-btn { width: 40px; height: 40px; }
  .mobile-menu-btn span { width: 22px; height: 3px; }
  .mobile-logo { width: 82px; }
  .mobile-teal-divider { height: 15px; margin: 6px auto 20px; }
  .mobile-hero-title { font-size: 26px; }
  .mobile-section-title { letter-spacing: .055em; }
  .mobile-card h2 { letter-spacing: .11em; }
}