/* ====== Hero med parallax-logo ====== */
.home-hero{
  position: relative;
  min-height: 78vh;
  display:flex; align-items:center; justify-content:center;
  padding: 8rem 1.5rem 4rem;
  background: var(--black);
  overflow: hidden;
}

/* Stor vattenstämpel – utan JS, funkar överallt */
.home-hero.with-logo::before{
  content:"";
  position:absolute; inset:-15vh 0 -15vh 0; /* lite extra luft upp/ner */
  z-index:0; pointer-events:none;

  /* webp först, png fallback */
  background-image: url("/bilder/Logga.webp"), url("/bilder/Logga.png");
  background-repeat: no-repeat;
  background-position: 50% 45%;     /* aningen högre än exakt center */
  background-size: 80vmax;         /* storlek ~”3x” känsla */
  opacity:.18;

  /* enkel “parallax-känsla” på desktop */
  background-attachment: fixed;
}

/* Innehållet ska alltid ligga över vattenstämpeln */
.home-hero__inner{ position:relative; z-index:2; }

/* Mobil/Tablet: vissa webviews ignorerar fixed – använd scroll och justera vy */
@media (max-width: 1024px){
  .home-hero.with-logo::before{
    background-attachment: scroll;
    background-size: 185vmax;       /* lite mindre så loggan fyller snyggt */
    background-position: 50% 40%;
    opacity:.20;                    /* ett snäpp tydligare på mobil */
  }
}

/* Respektera mindre rörelser */
@media (prefers-reduced-motion: reduce){
  .home-hero.with-logo::before{ transform: none !important; }
}

/* Diskret bakgrund bakom varje text-rad */
.home-hero .ink {
  background: rgba(0, 0, 0, 0.12);   /* ≈ 12% opacitet – justera 0.08–0.18 */
  padding: .08em .22em;
  border-radius: .35em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* Safari/iOS */
}

/* Lite starkare på mobiler där texten fyller mer av skärmen */
@media (max-width: 768px){
  .home-hero .ink { background: rgba(0,0,0,0.16); }
}

.home-hero__inner{
  position: relative; z-index: 2;
  text-align:center; max-width: 1100px; margin-inline:auto;
}

.eyebrow{
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--iron-gray);
  font-size:.9rem; margin-bottom: .75rem;
}

.home-hero h1{
  font-family: var(--font-serif, inherit);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height:1.15; color: var(--white);
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

.home-hero h1 span{ color: var(--gold-light); }

.home-hero .lead{
  margin: 1rem auto 1.75rem; max-width: 68ch; color: var(--gray);
}

.cta-row{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:.75rem;
  border:1px solid transparent; font-weight:600;
  transition: transform .15s ease, background-color .25s ease, border-color .25s ease;
}
.btn-primary{ background: var(--gold); color:#221c11; border-color: var(--gold); }
.btn-primary:hover{ transform: translateY(-2px); background: var(--gold-light); }
.btn-ghost{ background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-ghost:hover{ transform: translateY(-2px); color: var(--black); background: var(--gold); }

.home-hero__tagline{
  margin-top: .75rem; color: var(--iron-gray); font-size:.85rem; letter-spacing:.08em;
}

/* Gul våg under hero om du använder den */
.gold-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:48px;
  background: linear-gradient(180deg, transparent 0 20%, var(--gold) 20% 80%, transparent 80% 100%);
  opacity:.65;
}

/* ====== Bildhighlight (centrerad & elegant) ====== */
.home-feature {
  padding: 3rem 1rem 2rem;
  text-align: center;
}
.home-feature h2 {
  color: var(--gold-light);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 1.8rem;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.home-feature .image-frame {
  margin-inline: auto;
  max-width: 960px;
  border: 2px solid rgba(214, 184, 108, 0.55);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #1a1a1a 0%, #0c0c0c 100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-feature .image-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 50px rgba(214, 184, 108, 0.15);
}
.home-feature .image-scroll-container picture,
.home-feature .image-scroll-container img {
  width: 100%; height: auto; display: block; border-radius: 12px; margin: 0 auto;
}

/* ====== USP ====== */
.home-usp{ padding: 2.25rem 1rem 3rem; text-align:center; }
.home-usp .link{ color: var(--gold); display:inline-block; margin-bottom:.5rem; }
.home-usp h3{ color: var(--steel-gray); }
.home-usp .checklist{ margin: 1rem auto 0; width: fit-content; text-align:left; color: var(--gray); }
.home-usp .checklist li{ margin:.3rem 0; }

/* ====== Avslutande CTA ====== */
.home-cta{
  padding: 2.5rem 1rem 3.5rem; text-align:center;
  background: linear-gradient(180deg, rgba(214,184,108,.06) 0, transparent 40%);
}
.home-cta__inner{ max-width: 880px; margin-inline:auto; }
.home-cta .microcopy{ margin-top:.5rem; color: var(--iron-gray); letter-spacing:.08em; }

/* ====== Scroll-to-top ====== */
.to-top{
  position: fixed; right: 1rem; bottom: 1rem;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(214,184,108,.9); color:#111; border:0;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  display:none; place-items:center; font-weight:700; cursor:pointer;
}
.to-top.show{ display:grid; }
.to-top:hover{ transform: translateY(-2px); }

/* Mobil: iOS stödjer inte fixed bra → vi kör mjuk JS-parallax */
@media (max-width: 768px){
  .home-hero{ padding-top: 7rem; }
  .home-hero.with-logo::before{
    background-size: 90vmin;
    opacity:.18;
    background-attachment: scroll; /* slå av fixed på mobil */
  }
}

/* Respektera mindre rörelser */
@media (prefers-reduced-motion: reduce){
  .home-hero.with-logo::before{ transform: none !important; }
}