/* =========================================================
   STYLE.CSS — CLEANUP (KEEPING CURRENT LOOK)
   ========================================================= */

/* ===================== 0) DESIGN TOKENS ===================== */
:root{
  --base-1:#f7fbe8; --base-2:#eff8d7; --base-3:#f1f9dc;
  --green-1:#95ca6f; --green-2:#88c370; --green-3:#7abb6e;
  --blue-1:#b7dadd; --blue-2:#afe4ed;
  --text-dark:#000000; --text-light:#ffffff;

  --radius-xl:24px; --radius-lg:18px; --radius-md:14px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --shadow-lg:0 12px 30px rgba(0,0,0,.12);

  --maxw:1200px;
  --header-h:88px;
}

/* ===================== 1) BASE / RESET ===================== */
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text-dark); background:var(--base-1);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:.01em;
}
h1,h2,h3{ font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial }
a{ color:inherit; text-decoration:none }
p{ margin:.6em 0 1.1em }
.container{ max-width:var(--maxw); margin-inline:auto; padding:0 18px }
section{ padding:72px 0 }
.stack{ display:grid; gap:8px }

/* Accessibility: Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:10px 14px;
  border-radius:12px; background: #0f2d1f; color:#fff; z-index:1000;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* ===================== 2) HEADER / NAV ===================== */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(255,255,255,0.72);
  border-bottom:1px solid var(--base-2);
  transition: box-shadow .25s ease, background .25s ease;
}
header.scrolled{ box-shadow:0 4px 16px rgba(0,0,0,0.08); background:rgba(255,255,255,0.9); }
header, header a, header strong{ color:var(--text-dark); transition:color .25s ease; }

.nav{ display:flex; align-items:center; justify-content:space-between; height:64px }
.brand{ display:flex; align-items:center; gap:10px }
.brand-badge{ height:36px; width:auto; display:block; }

.nav-links{ display:none; gap:6px }
.nav-links a{
  position:relative; font-weight:600; padding:10px 14px; border-radius:12px; transition:color .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--green-3); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; opacity:.9;
}
.nav-links a:hover::after, .nav-links a:focus::after, .nav-links a.is-active::after{ transform:scaleX(1); }
.nav-links a:hover, .nav-links a:focus, .nav-links a.is-active{ color:var(--green-3); }
.nav-links a, .nav-links a:hover, .nav-links a:focus, .nav-links a.is-active{ background:transparent !important; }

.cta{ display:none }

/* ===================== 3) BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:999px; font-weight:700; cursor:pointer; border:0;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn-primary{
  background:linear-gradient(180deg, var(--green-1), var(--green-3));
  color:var(--text-light); box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.btn-ghost{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.06);
  color:#0f2d1f;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.btn:active{ transform:scale(.97); box-shadow:0 4px 10px rgba(0,0,0,.12) inset; }

/* ===================== 4) HERO (SPLINE BACKGROUND + COPY) ===================== */
/* Section shell */
.pv-hero{
  position:relative; isolation:isolate;
  min-height: clamp(520px, 70vh, 760px);
  overflow:hidden;
  background: linear-gradient(180deg, var(--base-2), var(--base-3));
  padding:0; /* paddning ligger i .pv-hero-inner */
}

/* Full-bleed Spline */
.spline-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.spline-bg iframe{
  width:100%; height:100%; border:0; pointer-events:none;
  filter: brightness(.9) contrast(1.05);
}
/* Ton för att matcha paletten (grön/blå) */
.spline-bg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(149,202,111,.55) 0%,
    rgba(122,187,110,.45) 50%,
    rgba(175,228,237,.35) 100%
  );
  mix-blend-mode: multiply;
}
/* (overlay patch borttagen enligt önskemål) */

/* Inner wrapper (maxbredd + spacing under headern) */
.pv-hero-inner{
  position:relative; z-index:2;
  padding: calc(2rem + var(--header-h)) 2rem 64px;
  max-width: var(--maxw); margin:0 auto;
}

/* Grid (du styr extra spacing med inline-style i HTML) */
.pv-hero-grid{
  display:grid; grid-template-columns: 1fr;
  align-items:flex-start; justify-content:center;
}

/* Copy (centrerad) */
.pv-hero-centered{
  max-width:800px; margin:0 auto; text-align:center; position:relative; z-index:3;
}
.pv-hero-centered .hero-title{
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800; line-height:1.1; margin-bottom:1rem; color:#0e1b14;
}
.pv-hero-centered .hero-title .muted{ color: rgba(0,0,0,.85); }
.grad{
  background: linear-gradient(90deg, var(--green-1), var(--green-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.2px #000000;
}
/* Lyxig grön gradient-animation enbart för hero-ordet */
.pv-hero-centered .hero-title .grad{
  /* Topplager: mjuk men tydligare vit gloss (diagonal) */
  background-image:
    linear-gradient(135deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 46%,
      rgba(255,255,255,.18) 48%,
      rgba(255,255,255,.42) 50%,
      rgba(255,255,255,.18) 52%,
      rgba(255,255,255,0) 54%,
      rgba(255,255,255,0) 100%
    ),
    /* Baslager: stilla grön gradient */
    linear-gradient(90deg,
      var(--green-1) 0%,
      var(--green-2) 30%,
      var(--green-3) 50%,
      var(--green-2) 70%,
      var(--green-1) 100%
    );
  background-size: 280% 280%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  /* Start off-screen to the LEFT; sweep right */
  background-position: -220% 50%, 50% 50%;
  /* 3s sweep + 8s rest = 11s total */
  animation: pvGlossSweep 11s linear infinite;
}

@keyframes pvGlossSweep{
  /* 0–27.3% ≈ 3s sweep, then hold (rest) until 100% */
  0%     { background-position: -220% 50%, 50% 50%; }
  27.3%  { background-position:  120% 50%, 50% 50%; }
  100%   { background-position:  120% 50%, 50% 50%; }
}

@keyframes pvGradShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .pv-hero-centered .hero-title .grad{ animation:none; }
}
/* (tog bort text-shadow enligt önskemål; använder vit stroke istället) */
.pv-hero-centered .lede{
  font-size:1.15rem; color:#2a2a2a; opacity:.9; margin:0 auto 2rem; max-width:60ch;
}
.pv-hero-centered .pv-cta{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ===================== 5) PRODUKTER / CARDS ===================== */
.grid-3{ display:grid; gap:18px }
.card{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border:1px solid rgba(0,0,0,.04);
  border-radius:var(--radius-xl); padding:22px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, filter .25s ease;
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(160% 120% at 110% -10%, rgba(175,228,237,.16), transparent 40%),
    radial-gradient(140% 120% at -10% 110%, rgba(149,202,111,.12), transparent 45%);
  opacity:.85;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(0,0,0,.08); box-shadow:0 16px 42px rgba(0,0,0,.16); filter: saturate(1.02); }
.thumb{
  width:100%; height:auto; object-fit:contain; background:#fff;
  border-radius:16px; margin-bottom:14px; opacity:.95;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Product card typography and link treatment */
#produkter .card h3{ letter-spacing:.005em; }
#produkter .card p a{
  color:#0f1a12; text-decoration:none; position:relative;
  background: linear-gradient(90deg, var(--green-2), var(--green-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#produkter .card p a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--green-2), var(--green-3)); opacity:.9;
}

/* (replaced keyframe pop with smoother state transitions in mobile block) */

/* ===================== 6) TEKNOLOGI & FEATURE-KORT ===================== */
.features{ display:grid; gap:18px }
.feature{
  background:var(--base-1); border:1px solid var(--base-3); border-radius:var(--radius-xl);
  padding:22px; box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.feature:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.14); border-color:rgba(0,0,0,.08); }
.feature h3{ margin:8px 0 6px; font-size:1rem }
.feature svg{ transition: transform .2s ease, color .2s ease; }
.feature:hover svg{ transform:scale(1.1); color:var(--green-3); }

/* ===================== 7) ANVÄNDNINGSOMRÅDEN ===================== */
#anvandning{ --tile-bg: var(--base-1); }
.use-grid{ display:grid; gap:18px; }
.use-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:28px; background:var(--tile-bg);
  border:1px solid var(--base-3); border-radius:20px;
  box-shadow:var(--shadow-sm);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
  color:inherit; text-decoration:none;
}
.use-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.08);
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
}
.use-card svg{ width:44px; height:44px; margin-bottom:12px; color: var(--green-3); }
.use-card h3{ margin:6px 0 6px; font-size:1.06rem; letter-spacing:.01em; }
.use-card p{ margin:0; opacity:.85; font-size:.94rem; line-height:1.45; }

/* ===================== 8) VARFÖR PUREVIA ===================== */
.why-grid{ display:grid; gap:18px; }
.why-card{
  position:relative; background:var(--base-1); border:1px solid var(--base-3);
  border-radius:20px; padding:24px 22px 22px; box-shadow:var(--shadow-sm);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.why-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.08);
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
}
.why-icon{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background: var(--base-2); color: var(--green-3); box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
.why-icon svg{ width:22px; height:22px; }
.why-card h3{ margin:10px 0 8px; font-size:1.06rem; letter-spacing:.01em; }
.why-card p{ margin:0; opacity:.9; line-height:1.5; font-size:.95rem; }

/* ===================== 9) KONTAKT ===================== */
.contact-single{ max-width:720px; margin:0 auto; }
.contact-card{
  background: var(--base-1); border:1px solid var(--base-3);
  border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.contact-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.08);
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
}
.contact-item{
  display:grid; grid-template-columns: 44px 1fr max-content;
  align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--base-3);
}
.contact-item:last-child{ border-bottom:0 }
.contact-icon{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background: var(--base-2); color: var(--green-3); box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
.contact-icon svg{ width:22px; height:22px }
.contact-text .label{ font-size:.8rem; opacity:.7; margin-bottom:2px }
.contact-text .value{ font-weight:700 }

/* Copy-knappar (scopad till #kontakt) */
#kontakt .copy-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; margin-left:10px;
  border:0; border-radius:12px; font:inherit; font-weight:600;
  color:var(--text-light) !important;
  background: linear-gradient(135deg, #9edbaf, #7abb6e) !important;
  box-shadow: 0 4px 10px rgba(122,187,110,.18);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .3s ease, opacity .3s ease;
  appearance:none;
}
#kontakt .copy-btn:hover, #kontakt .copy-btn:focus{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(122,187,110,0.25);
  outline: none;
}
#kontakt .copy-btn:active{ transform: scale(.98); }
#kontakt .copy-btn.copied{
  background: linear-gradient(135deg, #95ca6f, #6fa85b) !important;
  box-shadow: 0 6px 16px rgba(111, 168, 91, 0.25);
}
#kontakt .copy-btn.copied::after{ content: " ✓"; font-weight:700; opacity:.9; }

/* ===================== 10) FOOTER ===================== */
footer{
  background: linear-gradient(180deg, var(--base-2), var(--base-3));
  border-top: 1px solid var(--base-2);
}
.foot{ display:flex; align-items:center; justify-content:flex-start; padding:32px 0 }

/* ===================== 11) TO TOP BUTTON ===================== */
#toTop{
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 16px; border-radius: 50%;
  /* Use a stable gradient by default to avoid flicker when hovering */
  background: linear-gradient(180deg, var(--green-2), var(--green-3));
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); display: none;
  transition: opacity .3s ease, transform .2s ease, box-shadow .25s ease;
  will-change: transform, box-shadow;
}
#toTop.show{ display:block; }
/* Subtil hoveranimation för tillbaka-till-toppen-knappen */
#toTop:hover,
#toTop:focus-visible{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  outline: none;
}
#toTop:hover svg{ animation: toTopNudge .5s ease-out both; }
@keyframes toTopNudge{
  0%{ transform: translateY(0); }
  55%{ transform: translateY(-2px); }
  100%{ transform: translateY(0); }
}

/* ===================== 12) ANIMATIONER / REVEALS ===================== */
.fade{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease }
.fade.show{ opacity:1; transform:translateY(0) }

.fade-in, .fade-up, .fade-down, .fade-left, .fade-right, .fade-zoom{
  opacity:0; will-change:transform,opacity;
  transition-property:opacity,transform,filter;
  transition-duration:.7s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
  filter: blur(6px);
}
.fade-in.show{ opacity:1; filter:none; transform:none; }
.fade-up{ transform:translateY(16px) } .fade-up.show{ transform:none; filter:none }
.fade-down{ transform:translateY(-16px) } .fade-down.show{ transform:none; filter:none }
.fade-left{ transform:translateX(-18px) } .fade-left.show{ transform:none; filter:none }
.fade-right{ transform:translateX(18px) } .fade-right.show{ transform:none; filter:none }
.fade-zoom{ transform:scale(.98) } .fade-zoom.show{ transform:scale(1); filter:none }

@media (prefers-reduced-motion: reduce){
  .fade, .fade-in, .fade-up, .fade-down, .fade-left, .fade-right, .fade-zoom,
  .fade.show, .fade-in.show, .fade-up.show, .fade-down.show, .fade-left.show, .fade-right.show, .fade-zoom.show{
    transition:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* ===================== 13) RESPONSIVE BREAKPOINTS ===================== */
@media (min-width:768px){
  .nav-links{ display:flex }
  .cta{ display:inline-flex }
  .grid-3{ grid-template-columns:repeat(3,1fr) }
  .features{ grid-template-columns:repeat(4,1fr) }
  .use-grid{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:480px){
  .foot{ flex-direction:column; text-align:center; gap:12px; padding:20px }
}
/* ---- MOBILE NAV (PILL BAR) ---- */
@media (max-width:767px){
  header .nav-links{
    display:flex !important; align-items:center; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:8px 0; scrollbar-width:none;
    mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
  }
  header .nav-links::-webkit-scrollbar{ display:none }
  header .nav-links a{
    white-space:nowrap; padding:10px 14px; border-radius:9999px; font-weight:700;
    border:1px solid var(--base-2); background:#fff; box-shadow:var(--shadow-sm);
    transition: transform .15s ease, background .2s ease, color .2s ease;
  }
  header .nav-links a:hover{ transform:translateY(-1px) }
  header .nav{ height:64px; gap:8px }
}

/* Produkter: gemensam höjd på bildrutan */
#produkter .grid-3 .thumb{
  height: 340px;      /* ← ändra höjden här */
  object-fit: contain; /* behåll hela bilden, lämnar vit luft om bilden är “låg” */
}

/* Se till att våra hovers har transitions */
.card, .feature, .use-card, .chip, .btn {
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}

.card:hover, .feature:hover, .use-card:hover, .chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* Hero-overlay ska inte blocka input */
.spline-bg, .spline-bg::before, .spline-bg::after, .spline-bg iframe {
  pointer-events: none !important;
}

/* === Varför PureVia – hover/polish === */
#om .why-card{
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
  will-change: transform, box-shadow;
}
#om .why-card:hover,
#om .why-card:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.08);
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
}
/* liten highlight på ikonrutan vid hover */
#om .why-card:hover .why-icon,
#om .why-card:focus-within .why-icon{
  background: var(--base-2);
  color: var(--green-3);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
/* tillgänglig fokus */
#om .why-card:focus-visible{
  outline: 3px solid var(--blue-1);
  outline-offset: 4px;
}

/* === Kontakt – hover/polish === */
#kontakt .contact-card{
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
  will-change: transform, box-shadow;
}
#kontakt .contact-card:hover,
#kontakt .contact-card:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.08);
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
}

/* mjuk hover på varje rad i kontaktkortet */
#kontakt .contact-item{ transition: background .2s ease, border-radius .2s ease; }
#kontakt .contact-item:hover{
  background: rgba(0,0,0,.03);
  border-radius: 12px;
}

/* Footer: tydlig avskiljande toppskugga */
footer{
  position: relative;
  background: linear-gradient(180deg, var(--base-2), var(--base-3));
  border-top: 1px solid var(--base-2);
  box-shadow: 0 -8px 22px rgba(0,0,0,.08); /* ← skuggan ovanför footern */
}

/* Footer: centrerad layout på mobil */
@media (max-width: 767px){
  .foot{
    justify-content: center;   /* centrera horisontellt */
    align-items: center;       /* centrera vertikalt i raden */
    text-align: center;        /* centrera texten */
    gap: 12px;
    padding: 20px;
  }
}

/* ===== Sektionstitlar: stor och med grön underline ===== */
.section-title{
  position: relative;
  display: inline-block;
  margin: 0 0 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.01em;
  /* gör dem större igen */
  font-size: clamp(34px, 4.2vw, 34px);
}

/* den gröna linjen under */
.section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: min(120px, 42%);           /* längden på “linjen” */
  height: 3px;                      /* tjocklek */
  background: linear-gradient(90deg, var(--green-2), var(--green-3));
  border-radius: 999px;
  opacity: .9;
}

/* om du ibland centrerar rubriker, lägg .section-title--center i HTML */
.section-title--center{ text-align:center; display:block; }
.section-title--center::after{
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 480px){
  .section-title{ font-size: clamp(28px, 7vw, 36px); }
  .section-title::after{ height: 4px; bottom: -8px; width: 96px; }
}

/* HERO: full viewport (minus navbar) */
:root { --header-h: 65px; }         /* set this to your real header height */

.pv-hero{
  position: relative;
  padding: 0;                        /* kill section's default padding */
  height: calc((var(--vh, 1vh) * 100) - var(--header-h)); /* JS-set stable fallback */
  height: calc(100svh - var(--header-h));                 /* stable mobile viewport to avoid jitter */
  min-height: 520px;                 /* safety for very small screens */
}

/* Spline stays full-bleed */
.spline-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.spline-bg iframe{ width:100%; height:100%; border:0; pointer-events:none; }

/* Make the content fill the hero height */
.pv-hero-inner{
  height: 100%;
  display: flex;
  align-items: flex-start;           /* top-align */
  justify-content: center;
  padding: calc(var(--header-h) + 24px) 2rem 0;  /* clear the navbar */
}

/* your centered hero copy should not add extra top padding */
.pv-hero-centered{ padding: 0; }

.pv-hero { position: relative; }
.pv-hero::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(600px 240px at 50% 44%, rgba(255,255,255,.55), transparent 70%);
}
.pv-hero-centered{ position:relative; z-index:2; } /* text above spotlight */

/* --- Fix: kontakt-kort på mobil --- */
@media (max-width: 640px){
  /* 2 kolumner: ikon + text. Ingen tredje "knapp"-kolumn */
  #kontakt .contact-item{
    grid-template-columns: 40px 1fr;
    align-items: start;
    gap: 10px;
  }

  /* Lägg knappen under texten (kolumn 2), vänsterställd */
  #kontakt .contact-item .copy-btn{
    grid-column: 1 / -1;       /* eller 1 / -1 om du vill låta den gå hela bredden */
    justify-self: start;
    margin-left: 0;            /* neutralisera tidigare margin-left */
    margin-top: 8px;
    white-space: nowrap;       /* för säkerhets skull så 'Kopiera' inte radbryts */
  }
}

/* === Copy button: collapse-to-check animation === */
#kontakt .copy-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;                /* stabil höjd */
  padding: 0 14px;             /* textläge */
  border-radius: 12px;
  transition:
    width .25s ease,
    padding .25s ease,
    border-radius .25s ease,
    transform .15s ease,
    box-shadow .25s ease,
    background .2s ease;
}

#kontakt .copy-btn .copy-label{
  transition: opacity .01s ease, transform .30s ease;
}

/* När kopierat: gör den “pill”→“cirkel” */
#kontakt .copy-btn.copied{
  width: 40px;                 /* samma som height ⇒ cirkel */
  padding: 0;
  border-radius: 999px;
}

/* Dölj texten när den är i 'copied'-state */
#kontakt .copy-btn.copied .copy-label{
  opacity: 0;
  transform: scale(.9);
}

/* Checkmark-lagret */
#kontakt .copy-btn::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
}

/* Visa checkmark när kopierat */
#kontakt .copy-btn.copied::after{
  opacity: 1;
  transform: scale(1);
}

/* Mobil-layout (behåll fixen så knappen inte flyter ut till höger) */
@media (max-width: 640px){
  #kontakt .contact-item{
    grid-template-columns: 40px 1fr;
    align-items: start;
    gap: 10px;
  }
  #kontakt .copy-btn{
    grid-column: 2 / 3;      /* lägg under texten, vänsterställd */
    justify-self: start;
    margin-left: 0;
    margin-top: 8px;
    white-space: nowrap;
  }
}

/* ===== Premium Glass Nav (drop-in, paste at end) ===== */
:root{
  --glass-bg: rgba(255,255,255,.42);
  --glass-bg-scrolled: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.45);
  --glass-shadow: 0 8px 30px rgba(0,0,0,.08);
  --ink: #0f1a12;
}

header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.04);
  /* faint frosted glow from the corners */
  isolation: isolate;
}
header::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 0% -20%, rgba(149,202,111,.15), transparent 60%),
    radial-gradient(120% 80% at 100% 0%, rgba(175,228,237,.12), transparent 60%);
  pointer-events:none;
}

header .nav{
  max-width: 1200px;
  margin: 0 auto;
  height: 68px;
  padding: 10px 16px;
  display:flex; align-items:center; gap:10px;
}

/* Dark ink for brand */
header .brand strong{ color: var(--ink); font-weight:800; letter-spacing:.01em; }

/* Glass intensifies a bit on scroll (your JS already toggles .scrolled) */
header.scrolled{
  background: var(--glass-bg-scrolled);
  box-shadow: var(--glass-shadow);
  border-bottom-color: rgba(0,0,0,.06);
}

/* Nav links: glassy hover + animated underline */
header .nav-links{ display:flex; gap:6px; }
header .nav-links a{
  position:relative;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--ink);
  transition: background .25s ease, color .25s ease, transform .12s ease;
}
header .nav-links a:hover,
header .nav-links a:focus{
  background: rgba(255,255,255,.28);
  color: var(--ink);
}
header .nav-links a::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:6px;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--green-2), var(--green-3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  opacity:.9;
}
header .nav-links a:hover::after,
header .nav-links a:focus::after,
header .nav-links a.is-active::after{
  transform: scaleX(1);
}
header .nav-links a.is-active{
  background: rgba(255,255,255,.36);
}

/* CTA: glossy, pill, subtle shine */
header .cta{
  position: relative;
  display:inline-flex; align-items:center;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green-2), var(--green-3));
  color:#fff; font-weight:800;
  box-shadow: 0 8px 20px rgba(122,187,110,.35),
              inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
header .cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(122,187,110,.45),
              inset 0 0 0 1px rgba(255,255,255,.45);
  filter: saturate(1.02);
}
header .cta::before{
  content:"";
  position:absolute; inset:1px;
  border-radius: 999px;
  background: radial-gradient(120% 60% at 30% -20%, rgba(255,255,255,.35), transparent 55%);
  opacity:.6; pointer-events:none;
}
header .cta svg{ margin-left:6px; }

/* Mobile: iOS-style pill scroller, hide CTA to keep it clean */
@media (max-width: 767px){
  header .nav{ height:64px; padding:8px 12px; }

  header .nav-links{
    display:flex !important;
    align-items:center; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling: touch;
    padding: 6px 0;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
  }
  header .nav-links::-webkit-scrollbar{ display:none; }

  header .nav-links a{
    white-space: nowrap;
    background: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border-radius: 9999px;
  }

}

/* --- Fix: Header-CTA ska inte strechas/distortas --- */
header .cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* inga konstiga auto-stretchs */
  width: auto;
  min-width: unset;
  height: auto;

  /* “pill” dimensioner */
  padding: 14px 20px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ikonens storlek + stoppa att den påverkar layouten */
header .cta svg{
  width: 10px;
  height: 10px;
  margin-left: 6px;
  flex: 0 0 auto;
}

/* Om highlight-glansen såg “distressed” ut – tona ner den lite */
header .cta::before{ opacity: .35; }          /* eller testa 0.25–0.45 */

/* Behåll ren form även i scrollat läge */
header.scrolled .cta{ transform: none; }

/* === Hero readability halo (subtle shadow behind text block) === */
.pv-hero-centered{
  position: relative;
  z-index: 2;               /* stays above the Spline layer */
}

/* Soft radial haze behind the text block */
.pv-hero-centered::before{
  content:"";
  position:absolute;
  inset:-75px;              /* slightly larger than the text area */
  border-radius: 24px;
  pointer-events:none;
  z-index: 0;

  /* light, soft “glass” glow */
  background:
    radial-gradient(60% 55% at 50% 45%,
      rgba(255,255,255,.55) 0%,
      rgba(129, 231, 115, 0.555) 55%,
      transparent 80%);
  filter: blur(10px);
  opacity:.40;
}

/* Keep actual text & buttons above the halo and add a tiny text-shadow */
.pv-hero-centered .hero-title,
.pv-hero-centered .lede,
.pv-hero-centered .pv-cta{
  position: relative;
  z-index: 1;
}

.pv-hero-centered .hero-title{
  text-shadow: 0 2px 12px rgba(0,0,0,.16);
}
.pv-hero-centered .lede{
  text-shadow: 0 1px 8px rgba(0,0,0,.12);
}

/* Slightly stronger on small screens for readability */
@media (max-width: 640px){
  .pv-hero-centered::before{
    filter: blur(16px);
    opacity: .75;
  }
}

/* ===================== 15) MOBILE HAMBURGER NAV ===================== */
/* Show hamburger on mobile, hide inline links */
@media (max-width: 767px){
  header .nav-links{ display:none !important; }
  header .cta{ display:none !important; }
  .hamburger{ display:inline-flex; }
}
@media (min-width: 768px){ .hamburger{ display:none; } }

.hamburger{
  position:relative;
  align-items:center; justify-content:center; width:52px; height:40px;
  border-radius:14px; border:0;
  background: linear-gradient(135deg, var(--green-2), var(--green-3));
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow: 0 8px 20px rgba(122,187,110,.35), inset 0 0 0 1px rgba(255,255,255,.35);
  cursor:pointer; padding:0; margin-left:8px;
  color:#fff;
  z-index: 200; /* keep clickable above dropdown */
  transition: transform .12s ease, box-shadow .25s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.hamburger::before{
  content:""; position:absolute; inset:1px; border-radius:14px;
  background: radial-gradient(120% 60% at 30% -20%, rgba(255,255,255,.35), transparent 55%);
  pointer-events:none; opacity:.45;
}
.hamburger:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(122,187,110,.45), inset 0 0 0 1px rgba(255,255,255,.45); filter: saturate(1.02); }
.hamburger:focus-visible{ outline:3px solid rgba(175,228,237,.6); outline-offset:2px; }
.hamburger .bar{
  position:absolute; left:50%; transform: translateX(-50%);
  width:28px; height:2px; background: currentColor; border-radius:2px; display:block;
  transition: transform .25s ease, opacity .2s ease, width .2s ease, background .2s ease, top .25s ease, bottom .25s ease;
}
.hamburger .bar:nth-child(1){ top:11px; }
.hamburger .bar:nth-child(2){ top:50%; margin-top:-1px; }
.hamburger .bar:nth-child(3){ bottom:11px; }
/* Open → morph into an X centered */
.hamburger[aria-expanded="true"]{ background: linear-gradient(135deg, var(--green-2), var(--green-3)); color:#fff; box-shadow: 0 12px 28px rgba(122,187,110,.45), inset 0 0 0 1px rgba(255,255,255,.45); }
.hamburger[aria-expanded="true"]::before{ opacity:.40; }
.hamburger[aria-expanded="true"] .bar:nth-child(1){ top:50%; margin-top:-1px; transform: translateX(-50%) rotate(45deg); }
.hamburger[aria-expanded="true"] .bar:nth-child(2){ opacity:0; transform: translateX(-50%) scaleX(.6); }
.hamburger[aria-expanded="true"] .bar:nth-child(3){ bottom:auto; top:50%; margin-top:-1px; transform: translateX(-50%) rotate(-45deg); }
/* Stronger contrast when header is scrolled */
header.scrolled .hamburger{ box-shadow: 0 8px 22px rgba(122,187,110,.42), inset 0 0 0 1px rgba(255,255,255,.45); }

/* Overlay */
.mobile-nav{ position:fixed; left:0; right:0; top: var(--header-h, 65px); bottom:0; z-index:90; pointer-events:none; opacity:0; transition: opacity .2s ease; }
.mobile-nav.open{ pointer-events:auto; opacity:1; }
.mnav-backdrop{ position:absolute; inset:0; background:rgba(10,20,14,.04); backdrop-filter:none; opacity:0; transition: opacity .28s ease; }
.mobile-nav.open .mnav-backdrop{ opacity:1; }
.mnav-panel{
  position:absolute; left:12px; right:12px; top: 8px; bottom:auto;
  max-height: none; height:auto;
  border-radius:20px; background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  overflow: visible; isolation:isolate;
  transform: translateY(-10px) scale(.985);
  opacity:0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.mnav-panel::before{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:0;
  background:
    radial-gradient(220px 140px at 12% 8%, rgba(149,202,111,.18), transparent 60%),
    radial-gradient(240px 160px at 88% 14%, rgba(175,228,237,.18), transparent 65%),
    radial-gradient(320px 220px at 50% 100%, rgba(149,202,111,.12), transparent 70%);
  mix-blend-mode: multiply;
}
.mnav-panel::after{
  /* Luxe shine sweep */
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; z-index:2;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.38) 48%, rgba(255,255,255,0) 66%);
  transform: translateX(-125%);
  opacity:0;
}
.mobile-nav.open .mnav-panel{ transform:none; opacity:1; }
.mobile-nav.open .mnav-panel::after{ animation: glintSweep 1.15s .12s ease-out both; }
.mnav-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; position:sticky; top:0; background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78)); border-bottom:1px solid rgba(0,0,0,.06); border-top-left-radius:20px; border-top-right-radius:20px; backdrop-filter: blur(6px); z-index:1; opacity:0; transform: translateY(-4px); transition: transform .28s ease, opacity .28s ease; }
.mobile-nav.open .mnav-header{ opacity:1; transform:none; }
.mnav-header::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:2px; border-radius:999px;
  background: linear-gradient(90deg, var(--green-2), var(--green-3)); opacity:.9;
}
.mnav-header strong{ font-weight:800; letter-spacing:.01em; color:#0f1a12; }
.mnav-close{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.85); display:grid; place-items:center; cursor:pointer; }
.mnav-links{ display:grid; gap:8px; padding:10px 12px 12px; position:relative; z-index:1; }
.mnav-links > *{ opacity:0; transform: translateY(12px); transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease; will-change: transform, opacity; }
.mobile-nav.open .mnav-links > *{ opacity:1; transform:none; }
.mnav-links > *:nth-child(1){ transition-delay:.12s }
.mnav-links > *:nth-child(2){ transition-delay:.22s }
.mnav-links > *:nth-child(3){ transition-delay:.32s }
.mnav-links > *:nth-child(4){ transition-delay:.42s }
.mnav-links > *:nth-child(5){ transition-delay:.52s }
.mnav-links > *:nth-child(6){ transition-delay:.62s }
.mnav-links > *:nth-child(7){ transition-delay:.72s }
.mnav-link{
  position:relative; display:block; padding:10px 12px 10px 22px; border-radius:12px; font-weight:700; color:#0f1a12; font-size:.95rem; line-height:1.1;
  border:1px solid var(--base-3); background: linear-gradient(180deg, var(--base-1), var(--base-2));
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  overflow:hidden;
}
.mnav-link::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:3px; border-radius:999px; opacity:.95;
  background: linear-gradient(180deg, var(--green-2), var(--green-3));
}
.mnav-link:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.14); border-color: rgba(0,0,0,.08); }
.mnav-link.is-active{ border-color: rgba(0,0,0,.08); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.mnav-link.is-active::before{ width:6px; }
.mnav-cta{
  margin-top:4px;
  justify-self:stretch;
  display:flex;                 /* fill row width */
  width:100%;                   /* span container */
  box-sizing:border-box;        /* include padding in width */
  justify-content:center;       /* center label */
  align-items:center;
  text-align:center;
  font-size:.95rem;
  padding: 12px 16px;
  box-shadow: 0 8px 20px rgba(122,187,110,.35), inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Lock scroll when open */
body.menu-open{ overflow:hidden; }

/* ===================== 13.1) MOBILE PRODUCT CAROUSEL ===================== */
@media (max-width: 767px){
  /* tighter section spacing on mobile */
  #produkter{ padding: 52px 0; }

  /* turn the grid into a swipeable row */
  #produkter .grid-3{
    display: grid;
    grid-auto-flow: column;                 /* lay cards in a row */
    grid-auto-columns: calc(84% - 12px);    /* card width */
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;          /* crisp, consistent snapping */
    scroll-behavior: smooth;                /* smooth programmatic scrolling */
    scroll-padding-left: 12px;              /* align first card */
    padding: 6px 12px 8px;                  /* inner gutter */
    margin: 0 -12px;                        /* bleed to container edges */
    scrollbar-width: none;                  /* Firefox */
    mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent);
    touch-action: auto;                     /* allow vertical scroll within carousel area */
  }
  #produkter .grid-3::-webkit-scrollbar{ display:none; }

  #produkter .card{ padding: 14px; border-radius: 16px; scroll-snap-align: start; scroll-snap-stop: always; }
  #produkter .thumb{ height: 200px; }
  #produkter h3{ font-size: 1rem; margin: 8px 0 6px; }
  #produkter p{ font-size: .92rem; line-height: 1.4; }

  /* Smooth, state-driven text reveal tied to active card */
  #produkter .card h3,
  #produkter .card p{
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1);
    will-change: transform, opacity;
  }
  #produkter .card.is-active h3{ opacity:1; transform:none; transition-delay: .12s; }
  #produkter .card.is-active p.muted{ opacity:1; transform:none; transition-delay: .22s; }
  #produkter .card.is-active p:last-child{ opacity:1; transform:none; transition-delay: .30s; }

  /* Respect reduced motion for product text reveals */
  @media (prefers-reduced-motion: reduce){
    #produkter .card h3,
    #produkter .card p{ transition: none !important; transform:none !important; opacity:1 !important; }
  }

  /* right-edge chevron hint (auto-hides on interaction) */
  #produkter .grid-3::after{
    content: "›"; position:absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; display:grid; place-items:center; border-radius: 999px;
    background: linear-gradient(135deg, var(--green-2), var(--green-3)); color:#fff; font-size:18px; font-weight:800;
    box-shadow: 0 10px 22px rgba(122,187,110,.35), inset 0 0 0 1px rgba(255,255,255,.45);
    opacity: .9; pointer-events:none; animation: pulseRight 1.6s ease infinite;
  }
  #produkter .grid-3.interacted::after{ display:none; }

@keyframes pulseRight{
  0%,100%{ transform: translateY(-50%) scale(1); filter: saturate(1); }
  50%{ transform: translateY(-50%) scale(1.06); filter: saturate(1.05); }
}

@keyframes glintSweep{
  0%{ transform: translateX(-125%); opacity: 0; }
  20%{ opacity:.55; }
  60%{ opacity:.35; }
  100%{ transform: translateX(125%); opacity: 0; }
}

  /* dots below the carousel */
  #produkter .carousel-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin: 10px 0 0; }
  #produkter .carousel-dots .dot{
    width: 6px; height: 6px; border-radius: 999px; border:0; padding:0;
    background: #cfe6d0; opacity:.7; cursor:pointer;
    transition: width .2s ease, background .2s ease, opacity .2s ease;
  }
  #produkter .carousel-dots .dot[aria-selected="true"]{
    width: 18px; opacity:1;
    background: linear-gradient(90deg, var(--green-2), var(--green-3));
  }
}

/* ===================== 14) FAQ ===================== */
.faq{ display:grid; gap:14px }
.faq-item{
  border:1px solid var(--base-3);
  border-radius:16px;
  background: var(--base-1);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  transition: box-shadow .28s ease, border-color .25s ease, background .25s ease;
}
.faq-item[open]{ box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; position:relative;
  display:flex; align-items:center; gap:10px; padding-right:54px; /* leave space for +/– bubble */
}
/* small icon badge at the left of each question */
.faq-icon{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
  background: var(--base-2); color: var(--green-3); box-shadow: 0 4px 10px rgba(0,0,0,.06);
  flex: 0 0 auto;
}
.faq-icon svg{ width:20px; height:20px; }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center; border-radius:999px;
  background: linear-gradient(135deg, var(--green-2), var(--green-3)); color:#fff; font-weight:800; box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.faq-item summary:hover::after{ transform: translateY(-50%) scale(1.05); box-shadow:0 8px 16px rgba(0,0,0,.16); }
.faq-item[open] summary::after{ content:"–"; transform: translateY(-50%) rotate(180deg); }
.faq-item p{ padding:0 18px 16px; margin:0; opacity:.9; line-height:1.6 }

/* Animated content wrapper for FAQ */
.faq-content{
  overflow:hidden; height:0; opacity:0; will-change: height, opacity;
  transition: height .32s cubic-bezier(.4,.1,.2,1), opacity .24s ease;
}
.faq-item[open] .faq-content{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .faq-content{ transition:none; }
  .faq-item summary::after{ transition:none; }
}

/* (Removed mobile premium theme toggle and overrides by request) */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mnav-backdrop, .mnav-panel, .mnav-header, .mnav-links > *, .mnav-panel::after{
    transition: none !important; transform: none !important; opacity: 1 !important;
  }
}