/* ==========================================================================
   Biolana — Alpha Drive
   Stilmall / style.css
   Palett: ljust, mättat blått, silver och mörkblått.
   ========================================================================== */

:root{
  /* Färg */
  --bl-navy:      #0a1f3c;
  --bl-navy-soft: #12305a;
  --bl-deep:      #123a6b;
  --bl-azure:     #1e6fd9;
  --bl-azure-dark:#1558b0;
  --bl-azure-lite:#4a92f0;
  --bl-sky:       #e8f1fc;
  --bl-sky-deep:  #d3e5fa;
  --bl-silver:    #c9d3de;
  --bl-silver-lt: #e6ecf3;
  --bl-mist:      #f4f8fd;
  --bl-paper:     #ffffff;
  --bl-ink:       #0f2544;
  --bl-text:      #33465f;
  --bl-muted:     #64798f;

  /* Typografi */
  --bl-face-display: "Segoe UI Semibold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bl-face-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bl-face-util: "SFMono-Regular", "Segoe UI", Consolas, "Liberation Mono", monospace;

  /* Rytm */
  --bl-gap-xs: .5rem;
  --bl-gap-s:  1rem;
  --bl-gap-m:  1.75rem;
  --bl-gap-l:  3rem;
  --bl-gap-xl: 5rem;
  --bl-block:  clamp(4rem, 8vw, 7.5rem);

  --bl-shell: 1180px;
  --bl-radius:   18px;
  --bl-radius-l: 28px;
  --bl-radius-pill: 999px;

  --bl-shadow-s: 0 2px 8px rgba(10,31,60,.06);
  --bl-shadow-m: 0 12px 34px rgba(10,31,60,.09);
  --bl-shadow-l: 0 26px 64px rgba(10,31,60,.14);
  --bl-line: 1px solid rgba(18,58,107,.12);

  --bl-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Grund ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--bl-face-body);
  font-size:17px;
  line-height:1.72;
  color:var(--bl-text);
  background:var(--bl-paper);
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }

a{ color:var(--bl-azure-dark); text-decoration:none; }
a:hover{ color:var(--bl-deep); }

h1,h2,h3,h4{
  font-family:var(--bl-face-display);
  color:var(--bl-ink);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.14;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2.3rem, 5.2vw, 3.85rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.7rem); letter-spacing:-.028em; }
h3{ font-size:clamp(1.15rem, 1.9vw, 1.4rem); }
h4{ font-size:1.05rem; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left:1.15rem; }
li{ margin-bottom:.45em; }

:focus-visible{
  outline:3px solid var(--bl-azure);
  outline-offset:3px;
  border-radius:6px;
}

.bl-shell{
  width:100%;
  max-width:var(--bl-shell);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2.25rem);
}

.bl-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bl-navy); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 10px 0;
}
.bl-skip:focus{ left:0; color:#fff; }

/* ---------- Etiketter och rubrikblock ---------- */
.bl-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--bl-face-util);
  font-size:.72rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--bl-azure-dark);
  margin-bottom:1.1rem;
}
.bl-eyebrow::before{
  content:""; width:26px; height:1px; background:var(--bl-azure); opacity:.55;
}
.bl-eyebrow--pale{ color:var(--bl-sky-deep); }
.bl-eyebrow--pale::before{ background:var(--bl-sky-deep); }

.bl-lede{
  font-size:clamp(1.02rem, 1.5vw, 1.16rem);
  color:var(--bl-muted);
  max-width:62ch;
}

.bl-heading{ max-width:44rem; margin-bottom:var(--bl-gap-l); }
.bl-heading--mid{ margin-inline:auto; text-align:center; }

/* ---------- Knappar ---------- */
.bl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--bl-face-body);
  font-size:.96rem; font-weight:600; letter-spacing:.005em;
  padding:1rem 1.9rem;
  border:1px solid transparent;
  border-radius:var(--bl-radius-pill);
  cursor:pointer;
  transition:transform .25s var(--bl-ease), box-shadow .25s var(--bl-ease),
             background-color .2s var(--bl-ease), color .2s var(--bl-ease),
             border-color .2s var(--bl-ease);
  text-align:center;
}
.bl-btn--primary{
  background:var(--bl-azure); color:#fff;
  box-shadow:0 10px 26px rgba(30,111,217,.28);
}
.bl-btn--primary:hover{
  background:var(--bl-azure-dark); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(30,111,217,.34);
}
.bl-btn--primary:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(30,111,217,.3); }

.bl-btn--ghost{
  background:transparent; color:var(--bl-deep);
  border-color:rgba(18,58,107,.28);
}
.bl-btn--ghost:hover{
  background:var(--bl-sky); color:var(--bl-navy); border-color:var(--bl-azure);
}

.bl-btn--light{
  background:#fff; color:var(--bl-navy); box-shadow:var(--bl-shadow-m);
}
.bl-btn--light:hover{ background:var(--bl-sky); color:var(--bl-navy); transform:translateY(-2px); }

.bl-btn--wide{ width:100%; }
.bl-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.bl-textlink{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; color:var(--bl-azure-dark);
}
.bl-textlink::after{ content:"→"; transition:transform .25s var(--bl-ease); }
.bl-textlink:hover::after{ transform:translateX(4px); }

/* ---------- Sidhuvud ---------- */
.bl-masthead{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid rgba(18,58,107,.09);
  transition:box-shadow .3s var(--bl-ease);
}
.bl-masthead.is-lifted{ box-shadow:0 6px 22px rgba(10,31,60,.08); }

.bl-masthead__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--bl-gap-s);
  min-height:76px;
}

.bl-brand{ display:inline-flex; align-items:center; gap:.7rem; }
.bl-brand__mark{ width:34px; height:34px; flex:none; }
.bl-brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.bl-brand__name{
  font-family:var(--bl-face-display); font-weight:700; font-size:1.16rem;
  letter-spacing:-.02em; color:var(--bl-navy);
}
.bl-brand__sub{
  font-family:var(--bl-face-util); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bl-muted);
}

.bl-nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.bl-nav__link{
  font-size:.94rem; font-weight:500; color:var(--bl-text);
  position:relative; padding-block:.3rem;
}
.bl-nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--bl-azure); transition:width .25s var(--bl-ease);
}
.bl-nav__link:hover{ color:var(--bl-navy); }
.bl-nav__link:hover::after{ width:100%; }

.bl-masthead__side{ display:flex; align-items:center; gap:1.1rem; }
.bl-masthead__tel{
  font-weight:600; color:var(--bl-navy); font-size:.94rem; white-space:nowrap;
}
.bl-masthead__cta{ padding:.72rem 1.4rem; font-size:.9rem; }

.bl-burger{
  display:none; width:44px; height:44px; border:var(--bl-line); border-radius:12px;
  background:#fff; cursor:pointer; position:relative;
}
.bl-burger span{
  position:absolute; left:12px; width:20px; height:2px; background:var(--bl-navy);
  border-radius:2px; transition:transform .3s var(--bl-ease), opacity .2s;
}
.bl-burger span:nth-child(1){ top:15px; }
.bl-burger span:nth-child(2){ top:21px; }
.bl-burger span:nth-child(3){ top:27px; }
.bl-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.bl-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.bl-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.bl-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg, var(--bl-sky) 0%, #ffffff 62%);
  padding-block:clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
}
.bl-hero__glow{
  position:absolute; inset:auto -12% -35% auto; width:60vw; max-width:760px;
  aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 50%, rgba(30,111,217,.20), rgba(30,111,217,0) 66%);
  pointer-events:none;
}
.bl-hero__grid{
  position:relative;
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.bl-hero__badge{
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(255,255,255,.85); border:1px solid rgba(30,111,217,.22);
  border-radius:var(--bl-radius-pill); padding:.42rem 1rem;
  font-size:.78rem; font-weight:600; color:var(--bl-deep); letter-spacing:.01em;
  margin-bottom:1.5rem;
}
.bl-hero__badge i{ width:7px; height:7px; border-radius:50%; background:var(--bl-azure); }
.bl-hero h1 em{ font-style:normal; color:var(--bl-azure-dark); }
.bl-hero__text{ font-size:1.1rem; color:var(--bl-muted); max-width:36rem; }
.bl-hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.bl-hero__meta{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; margin-top:2.6rem;
  padding-top:1.7rem; border-top:var(--bl-line);
}
.bl-hero__metaitem strong{
  display:block; font-family:var(--bl-face-display); font-size:1.32rem; color:var(--bl-navy);
}
.bl-hero__metaitem span{ font-size:.85rem; color:var(--bl-muted); }

.bl-hero__stage{ position:relative; }
.bl-hero__frame{
  position:relative; border-radius:var(--bl-radius-l); overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--bl-shadow-l);
}
.bl-hero__frame img{ width:100%; height:100%; object-fit:cover; }
.bl-hero__bottle{
  position:absolute; right:-6%; bottom:-4%; width:56%;
  filter:drop-shadow(0 26px 40px rgba(10,31,60,.32));
}
.bl-hero__bottle img{ width:100%; height:auto; }
.bl-hero__chip{
  position:absolute; left:-4%; top:8%;
  background:#fff; border-radius:16px; padding:.85rem 1.1rem;
  box-shadow:var(--bl-shadow-m); max-width:190px;
}
.bl-hero__chip strong{ display:block; font-size:.88rem; color:var(--bl-navy); }
.bl-hero__chip span{ font-size:.76rem; color:var(--bl-muted); }

/* ---------- Förtroendelist ---------- */
.bl-strip{
  background:var(--bl-navy); color:#dce8f6;
  padding-block:1.6rem;
}
.bl-strip__row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
.bl-strip__item{
  display:flex; align-items:center; gap:.75rem;
  font-size:.9rem; line-height:1.45;
}
.bl-strip__item svg{ flex:none; width:22px; height:22px; color:var(--bl-azure-lite); }

/* ---------- Sektionsbas ---------- */
.bl-block{ padding-block:var(--bl-block); }
.bl-block--mist{ background:var(--bl-mist); }
.bl-block--sky{ background:linear-gradient(180deg,#fff 0%, var(--bl-sky) 100%); }
.bl-block--navy{ background:var(--bl-navy); color:#c9daee; }
.bl-block--navy h2,.bl-block--navy h3{ color:#fff; }
.bl-block--tight{ padding-block:clamp(3rem,5vw,4.5rem); }

/* ---------- Två kolumner med bild ---------- */
.bl-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.bl-split--flip .bl-split__media{ order:2; }
.bl-split__media{
  position:relative; border-radius:var(--bl-radius-l); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--bl-shadow-m);
}
.bl-split__media img{ width:100%; height:100%; object-fit:cover; }
.bl-split__note{
  position:absolute; left:1.2rem; bottom:1.2rem; right:1.2rem;
  background:rgba(255,255,255,.92); border-radius:14px; padding:.9rem 1.1rem;
  font-size:.86rem; color:var(--bl-deep); box-shadow:var(--bl-shadow-s);
}

.bl-marklist{ list-style:none; padding:0; margin:1.6rem 0 0; }
.bl-marklist li{
  position:relative; padding-left:2rem; margin-bottom:.95rem; color:var(--bl-text);
}
.bl-marklist li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:11px; height:11px; border-radius:3px;
  background:var(--bl-azure); box-shadow:0 0 0 4px rgba(30,111,217,.14);
}

/* ---------- Pelare / kort ---------- */
.bl-cards{
  display:grid; gap:var(--bl-gap-m);
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.bl-cards--four{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.bl-cards--three{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.bl-card{
  background:#fff; border:var(--bl-line); border-radius:var(--bl-radius);
  padding:2rem 1.7rem; display:flex; flex-direction:column;
  transition:transform .3s var(--bl-ease), box-shadow .3s var(--bl-ease), border-color .3s;
}
.bl-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--bl-shadow-m);
  border-color:rgba(30,111,217,.3);
}
.bl-card__icon{
  width:46px; height:46px; border-radius:13px; margin-bottom:1.2rem;
  display:grid; place-items:center;
  background:var(--bl-sky); color:var(--bl-azure-dark);
}
.bl-card__icon svg{ width:22px; height:22px; }
.bl-card h3{ margin-bottom:.5rem; }
.bl-card p{ font-size:.94rem; color:var(--bl-muted); margin:0; }
.bl-card__tag{
  margin-top:1.1rem; font-family:var(--bl-face-util); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bl-silver);
}

.bl-card--onnavy{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);
}
.bl-card--onnavy p{ color:#a9c1de; }
.bl-card--onnavy .bl-card__icon{ background:rgba(74,146,240,.18); color:#9ec6f7; }
.bl-card--onnavy:hover{ border-color:rgba(74,146,240,.5); }

/* ---------- Rutinsteg ---------- */
.bl-steps{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--bl-gap-m);
  counter-reset:blstep;
}
.bl-step{
  position:relative; padding-top:2.4rem; border-top:2px solid var(--bl-silver-lt);
  transition:border-color .3s var(--bl-ease);
}
.bl-step:hover{ border-top-color:var(--bl-azure); }
.bl-step::before{
  counter-increment:blstep; content:counter(blstep,decimal-leading-zero);
  position:absolute; top:1rem; left:0;
  font-family:var(--bl-face-util); font-size:.78rem; letter-spacing:.16em;
  color:var(--bl-azure-dark); font-weight:700;
}
.bl-step h3{ font-size:1.08rem; margin-bottom:.45rem; }
.bl-step p{ font-size:.93rem; color:var(--bl-muted); margin:0; }

/* ---------- Nyttostatistik ---------- */
.bl-values{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--bl-gap-m);
}
.bl-value{
  background:linear-gradient(160deg,#fff, var(--bl-mist));
  border:var(--bl-line); border-radius:var(--bl-radius);
  padding:2.1rem 1.8rem;
}
.bl-value strong{
  display:block; font-family:var(--bl-face-display); font-size:1.25rem;
  color:var(--bl-navy); margin-bottom:.5rem;
}
.bl-value p{ margin:0; font-size:.94rem; color:var(--bl-muted); }

/* ---------- Produktpaket ---------- */
.bl-plans{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--bl-gap-m);
  align-items:stretch;
}
.bl-plan{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(18,58,107,.14); border-radius:var(--bl-radius-l);
  padding:1.8rem 1.6rem 1.9rem;
  transition:transform .3s var(--bl-ease), box-shadow .3s var(--bl-ease), border-color .3s;
}
.bl-plan:hover{ transform:translateY(-5px); box-shadow:var(--bl-shadow-l); border-color:rgba(30,111,217,.35); }
.bl-plan--featured{
  border-color:var(--bl-azure); box-shadow:var(--bl-shadow-m);
}
.bl-plan__flag{
  position:absolute; top:1.1rem; right:1.1rem;
  background:var(--bl-azure); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.34rem .75rem; border-radius:var(--bl-radius-pill);
}
.bl-plan__shot{
  aspect-ratio:4/3; border-radius:16px; overflow:hidden; margin-bottom:1.4rem;
  background:linear-gradient(160deg, var(--bl-sky), #fff);
  display:grid; place-items:center; padding:.9rem;
}
.bl-plan__shot img{
  width:100%; height:100%; object-fit:contain;
}
.bl-plan h3{ margin-bottom:.25rem; }
.bl-plan__vol{ font-size:.88rem; color:var(--bl-muted); margin:0 0 1.1rem; }
.bl-plan__price{
  display:flex; align-items:baseline; gap:.5rem; margin-bottom:.25rem;
}
.bl-plan__price b{
  font-family:var(--bl-face-display); font-size:2rem; color:var(--bl-navy); letter-spacing:-.03em;
}
.bl-plan__price span{ font-size:.9rem; color:var(--bl-muted); }
.bl-plan__unit{ font-size:.84rem; color:var(--bl-azure-dark); margin:0 0 1.3rem; font-weight:600; }
.bl-plan__list{ list-style:none; padding:0; margin:0 0 1.6rem; }
.bl-plan__list li{
  position:relative; padding-left:1.55rem; font-size:.92rem; color:var(--bl-text);
}
.bl-plan__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:50%; border:2px solid var(--bl-azure);
}
.bl-plan .bl-btn{ margin-top:auto; }

.bl-plans__note{
  margin-top:1.8rem; font-size:.86rem; color:var(--bl-muted); text-align:center;
}

/* ---------- Bildband med text ---------- */
.bl-band{
  position:relative; border-radius:var(--bl-radius-l); overflow:hidden;
  aspect-ratio:16/9; max-height:420px; display:grid;
}
.bl-band img{
  grid-area:1/1; width:100%; height:100%; object-fit:cover;
}
.bl-band__veil{
  grid-area:1/1; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.6rem,4vw,3.2rem);
  background:linear-gradient(100deg, rgba(10,31,60,.86) 0%, rgba(10,31,60,.6) 46%, rgba(10,31,60,.08) 100%);
  color:#dce8f6;
}
.bl-band__veil h3{ color:#fff; font-size:clamp(1.3rem,2.6vw,1.9rem); margin-bottom:.5rem; max-width:20ch; }
.bl-band__veil p{ margin:0; max-width:40ch; font-size:.98rem; }

/* ---------- Två mediakort ---------- */
.bl-duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bl-gap-m); }
.bl-duo__item{
  background:#fff; border:var(--bl-line); border-radius:var(--bl-radius-l); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s var(--bl-ease), box-shadow .3s var(--bl-ease);
}
.bl-duo__item:hover{ transform:translateY(-4px); box-shadow:var(--bl-shadow-m); }
.bl-duo__shot{ aspect-ratio:4/3; overflow:hidden; }
.bl-duo__shot img{ width:100%; height:100%; object-fit:cover; }
.bl-duo__body{ padding:1.8rem 1.7rem 2rem; }
.bl-duo__body h3{ margin-bottom:.5rem; }
.bl-duo__body p{ font-size:.95rem; color:var(--bl-muted); margin:0; }

/* ---------- Omdömen ---------- */
.bl-quotes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--bl-gap-m); }
.bl-quote{
  background:#fff; border:var(--bl-line); border-radius:var(--bl-radius);
  padding:2rem 1.7rem; display:flex; flex-direction:column;
}
.bl-quote__stars{ display:flex; gap:.18rem; margin-bottom:1rem; color:var(--bl-azure); }
.bl-quote__stars svg{ width:16px; height:16px; }
.bl-quote p{ font-size:.97rem; color:var(--bl-text); margin:0 0 1.5rem; }
.bl-quote__who{ display:flex; align-items:center; gap:.85rem; margin-top:auto; }
.bl-quote__avatar{
  width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 3px var(--bl-sky);
}
.bl-quote__avatar img{ width:100%; height:100%; object-fit:cover; }
.bl-quote__who strong{ display:block; font-size:.93rem; color:var(--bl-navy); }
.bl-quote__who span{ font-size:.8rem; color:var(--bl-muted); }

/* ---------- FAQ ---------- */
.bl-faq{ max-width:840px; margin-inline:auto; }
.bl-faq__item{ border-bottom:var(--bl-line); }
.bl-faq__q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
  padding:1.35rem 0; text-align:left;
  font-family:var(--bl-face-display); font-size:1.04rem; font-weight:600; color:var(--bl-ink);
  transition:color .2s;
}
.bl-faq__q:hover{ color:var(--bl-azure-dark); }
.bl-faq__sign{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--bl-sky); color:var(--bl-azure-dark);
  display:grid; place-items:center; font-size:1.05rem; line-height:1;
  transition:transform .3s var(--bl-ease), background-color .3s;
}
.bl-faq__item.is-open .bl-faq__sign{ transform:rotate(45deg); background:var(--bl-azure); color:#fff; }
.bl-faq__a{
  overflow:hidden; max-height:0; transition:max-height .35s var(--bl-ease);
}
.bl-faq__a > div{ padding-bottom:1.4rem; color:var(--bl-muted); font-size:.97rem; }

/* ---------- Formulär ---------- */
.bl-lead{
  background:linear-gradient(160deg, var(--bl-navy) 0%, var(--bl-deep) 100%);
  color:#cddff2;
  border-radius:var(--bl-radius-l);
  padding:clamp(2rem,4vw,3.4rem);
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,4vw,3.4rem);
  align-items:start;
  box-shadow:var(--bl-shadow-l);
}
.bl-lead h2{ color:#fff; }
.bl-lead__aside p{ color:#adc6e2; font-size:.98rem; }
.bl-lead__points{ list-style:none; padding:0; margin:1.8rem 0 0; }
.bl-lead__points li{
  position:relative; padding-left:1.9rem; margin-bottom:.9rem; font-size:.94rem; color:#cddff2;
}
.bl-lead__points li::before{
  content:""; position:absolute; left:0; top:.5em; width:12px; height:12px;
  border-radius:4px; background:var(--bl-azure-lite);
}

.bl-form{
  background:#fff; border-radius:var(--bl-radius); padding:clamp(1.5rem,3vw,2.2rem);
}
.bl-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.bl-field{ display:flex; flex-direction:column; gap:.4rem; }
.bl-field--full{ grid-column:1 / -1; }
.bl-field label{
  font-size:.85rem; font-weight:600; color:var(--bl-navy);
}
.bl-field label .bl-req{ color:var(--bl-azure-dark); }
.bl-field input,
.bl-field select,
.bl-field textarea{
  font-family:inherit; font-size:.96rem; color:var(--bl-ink);
  background:var(--bl-mist);
  border:1px solid rgba(18,58,107,.14);
  border-radius:12px; padding:.85rem 1rem;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  width:100%;
}
.bl-field textarea{ min-height:104px; resize:vertical; }
.bl-field input:focus,
.bl-field select:focus,
.bl-field textarea:focus{
  outline:none; background:#fff; border-color:var(--bl-azure);
  box-shadow:0 0 0 4px rgba(30,111,217,.14);
}
.bl-field.is-invalid input,
.bl-field.is-invalid select{
  border-color:#c0392b; background:#fdf3f2;
}
.bl-field__err{
  font-size:.79rem; color:#c0392b; min-height:1em; display:none;
}
.bl-field.is-invalid .bl-field__err{ display:block; }

.bl-consent{
  grid-column:1 / -1; display:flex; gap:.7rem; align-items:flex-start;
  font-size:.83rem; color:var(--bl-muted); line-height:1.55;
}
.bl-consent input{ width:18px; height:18px; margin-top:.2rem; flex:none; accent-color:var(--bl-azure); }
.bl-consent.is-invalid{ color:#c0392b; }

.bl-form__foot{
  grid-column:1 / -1; display:flex; flex-direction:column; gap:.8rem; margin-top:.3rem;
}
.bl-form__micro{ font-size:.79rem; color:var(--bl-muted); text-align:center; margin:0; }

/* ---------- Kontakt ---------- */
.bl-contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.bl-contact__list{ list-style:none; padding:0; margin:2rem 0 0; }
.bl-contact__list li{
  display:flex; gap:1rem; padding:1.1rem 0; border-bottom:var(--bl-line); align-items:flex-start;
}
.bl-contact__list li:first-child{ border-top:var(--bl-line); }
.bl-contact__list svg{ width:20px; height:20px; flex:none; color:var(--bl-azure-dark); margin-top:.25rem; }
.bl-contact__list strong{ display:block; font-size:.82rem; color:var(--bl-muted); font-weight:600; }
.bl-contact__list a,.bl-contact__list span{ color:var(--bl-navy); font-weight:500; }
.bl-contact__media{ border-radius:var(--bl-radius-l); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--bl-shadow-m); }
.bl-contact__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Banner (uppmaning) ---------- */
.bl-cta{
  position:relative; overflow:hidden;
  border-radius:var(--bl-radius-l);
  background:linear-gradient(140deg, var(--bl-deep), var(--bl-navy));
  padding:clamp(2.4rem,5vw,3.6rem);
  display:grid; grid-template-columns:1.4fr auto; gap:2rem; align-items:center;
}
.bl-cta h2{ color:#fff; margin-bottom:.5rem; }
.bl-cta p{ color:#b6cde8; margin:0; max-width:46ch; }

/* ---------- Sidfot ---------- */
.bl-foot{ background:var(--bl-navy); color:#a9c1de; padding-block:4rem 2rem; }
.bl-foot a{ color:#cddff2; }
.bl-foot a:hover{ color:#fff; }
.bl-foot__top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.4rem;
  padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.bl-foot__brandtext{ font-size:.92rem; margin-top:1.1rem; max-width:34ch; }
.bl-foot h4{
  color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-family:var(--bl-face-util); margin-bottom:1.1rem;
}
.bl-foot ul{ list-style:none; padding:0; margin:0; }
.bl-foot ul li{ margin-bottom:.6rem; font-size:.93rem; }
.bl-foot__bottom{
  padding-top:1.8rem; display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between; align-items:center; font-size:.83rem;
}
.bl-foot__legal{ max-width:78ch; font-size:.8rem; color:#8dA8c8; margin-top:1.6rem; line-height:1.65; }
.bl-foot__prefs{
  background:none; border:1px solid rgba(255,255,255,.28); color:#cddff2;
  border-radius:var(--bl-radius-pill); padding:.5rem 1.1rem; font:inherit; font-size:.83rem;
  cursor:pointer; transition:background-color .2s, border-color .2s, color .2s;
}
.bl-foot__prefs:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.5); }

/* ---------- Undersidor / juridik ---------- */
.bl-pagehead{
  background:linear-gradient(165deg, var(--bl-sky), #fff);
  padding-block:clamp(3rem,6vw,4.6rem) clamp(2.4rem,5vw,3.6rem);
  border-bottom:var(--bl-line);
}
.bl-crumb{
  font-size:.83rem; color:var(--bl-muted); margin-bottom:1rem;
}
.bl-crumb a{ color:var(--bl-muted); }
.bl-crumb a:hover{ color:var(--bl-azure-dark); }

.bl-doc{ max-width:800px; margin-inline:auto; padding-block:clamp(2.5rem,5vw,4rem); }
.bl-doc h2{ font-size:clamp(1.35rem,2.4vw,1.75rem); margin-top:2.6rem; }
.bl-doc h2:first-child{ margin-top:0; }
.bl-doc h3{ font-size:1.08rem; margin-top:1.8rem; }
.bl-doc p, .bl-doc li{ color:var(--bl-text); }
.bl-doc table{
  width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.92rem;
}
.bl-doc th,.bl-doc td{
  text-align:left; padding:.85rem 1rem; border-bottom:var(--bl-line); vertical-align:top;
}
.bl-doc th{ background:var(--bl-mist); color:var(--bl-navy); font-weight:600; }
.bl-doc__box{
  background:var(--bl-mist); border-left:3px solid var(--bl-azure);
  border-radius:0 14px 14px 0; padding:1.3rem 1.5rem; margin:1.8rem 0;
  font-size:.95rem;
}
.bl-doc__meta{
  font-size:.85rem; color:var(--bl-muted); border-top:var(--bl-line);
  margin-top:2.6rem; padding-top:1.2rem;
}

/* ---------- Tack-sida ---------- */
.bl-thanks{
  min-height:62vh; display:grid; place-items:center; text-align:center;
  padding-block:clamp(3rem,7vw,6rem);
  background:linear-gradient(170deg, var(--bl-sky), #fff 70%);
}
.bl-thanks__card{
  background:#fff; border-radius:var(--bl-radius-l); box-shadow:var(--bl-shadow-l);
  padding:clamp(2rem,5vw,3.4rem); max-width:640px;
}
.bl-thanks__mark{
  width:74px; height:74px; margin:0 auto 1.6rem; border-radius:50%;
  background:var(--bl-sky); color:var(--bl-azure-dark); display:grid; place-items:center;
}
.bl-thanks__mark svg{ width:34px; height:34px; }
.bl-thanks__next{
  list-style:none; padding:0; margin:1.8rem 0 2rem; text-align:left;
  display:grid; gap:.8rem;
}
.bl-thanks__next li{
  background:var(--bl-mist); border-radius:12px; padding:.9rem 1.1rem; font-size:.93rem;
}

/* ---------- Artikel / kunskapssida ---------- */
.bl-article{ max-width:760px; margin-inline:auto; }
.bl-article h2{ margin-top:2.6rem; }
.bl-article__figure{
  border-radius:var(--bl-radius-l); overflow:hidden; margin:2.4rem 0 1rem;
  box-shadow:var(--bl-shadow-m); aspect-ratio:16/9;
}
.bl-article__figure img{ width:100%; height:100%; object-fit:cover; }
.bl-article__caption{ font-size:.84rem; color:var(--bl-muted); text-align:center; margin-bottom:2.4rem; }
.bl-tipgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bl-gap-m); margin:2rem 0; }
.bl-tip{
  background:var(--bl-mist); border-radius:var(--bl-radius); padding:1.6rem 1.5rem;
  border:var(--bl-line);
}
.bl-tip h3{ font-size:1.02rem; margin-bottom:.4rem; }
.bl-tip p{ font-size:.93rem; color:var(--bl-muted); margin:0; }

/* ---------- Kakbanner ---------- */
.bl-cookiebar{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(140%);
  width:min(960px, calc(100vw - 2rem)); z-index:120;
  background:#fff; border:1px solid rgba(18,58,107,.14); border-radius:var(--bl-radius-l);
  box-shadow:var(--bl-shadow-l);
  padding:1.5rem 1.7rem;
  display:grid; grid-template-columns:1fr auto; gap:1.4rem; align-items:center;
  transition:transform .45s var(--bl-ease), opacity .35s;
  opacity:0; visibility:hidden;
}
.bl-cookiebar.is-shown{ transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; }
.bl-cookiebar h3{ font-size:1.02rem; margin-bottom:.35rem; }
.bl-cookiebar p{ font-size:.87rem; color:var(--bl-muted); margin:0; max-width:62ch; }
.bl-cookiebar__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.bl-cookiebar__actions .bl-btn{ padding:.75rem 1.3rem; font-size:.88rem; }

.bl-modal{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  padding:1rem; background:rgba(10,31,60,.55);
  opacity:0; visibility:hidden; transition:opacity .3s var(--bl-ease);
}
.bl-modal.is-shown{ opacity:1; visibility:visible; }
.bl-modal__panel{
  background:#fff; border-radius:var(--bl-radius-l); width:min(600px,100%);
  max-height:88vh; overflow-y:auto; padding:clamp(1.5rem,3vw,2.2rem);
  transform:translateY(14px); transition:transform .35s var(--bl-ease);
}
.bl-modal.is-shown .bl-modal__panel{ transform:translateY(0); }
.bl-modal__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.bl-modal__close{
  width:36px; height:36px; flex:none; border-radius:50%; border:var(--bl-line);
  background:#fff; cursor:pointer; font-size:1.2rem; line-height:1; color:var(--bl-navy);
  transition:background-color .2s;
}
.bl-modal__close:hover{ background:var(--bl-sky); }
.bl-modal__intro{ font-size:.92rem; color:var(--bl-muted); }

.bl-toggle{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center;
  padding:1.1rem 0; border-bottom:var(--bl-line);
}
.bl-toggle:last-of-type{ border-bottom:0; }
.bl-toggle strong{ display:block; font-size:.97rem; color:var(--bl-navy); }
.bl-toggle span{ font-size:.85rem; color:var(--bl-muted); }
.bl-switch{ position:relative; width:50px; height:28px; flex:none; }
.bl-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.bl-switch i{
  position:absolute; inset:0; border-radius:var(--bl-radius-pill);
  background:var(--bl-silver); transition:background-color .25s var(--bl-ease); pointer-events:none;
}
.bl-switch i::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(10,31,60,.3);
  transition:transform .25s var(--bl-ease);
}
.bl-switch input:checked + i{ background:var(--bl-azure); }
.bl-switch input:checked + i::after{ transform:translateX(22px); }
.bl-switch input:focus-visible + i{ box-shadow:0 0 0 4px rgba(30,111,217,.28); }
.bl-switch input:disabled + i{ background:var(--bl-deep); opacity:.45; cursor:not-allowed; }
.bl-modal__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.bl-modal__actions .bl-btn{ flex:1 1 160px; padding:.85rem 1.2rem; font-size:.9rem; }

/* ---------- Åldersnotis ---------- */
.bl-agenote{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--bl-deep); background:var(--bl-sky);
  border-radius:var(--bl-radius-pill); padding:.35rem .85rem;
}

/* ---------- Rörelse vid inläsning ---------- */
.bl-reveal{ opacity:0; transform:translateY(18px); }
.bl-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--bl-ease), transform .7s var(--bl-ease);
}

/* ==========================================================================
   Responsivt
   ========================================================================== */
@media (max-width: 1024px){
  .bl-cards--four{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bl-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bl-strip__row{ grid-template-columns:repeat(2,1fr); }
  .bl-plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .bl-quotes{ grid-template-columns:1fr; }
  .bl-values{ grid-template-columns:1fr; }
  .bl-lead{ grid-template-columns:1fr; }
  .bl-foot__top{ grid-template-columns:1fr 1fr; }
  .bl-masthead__tel{ display:none; }
}

@media (max-width: 900px){
  .bl-nav{
    position:fixed; inset:76px 0 auto; z-index:70;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:var(--bl-line);
    padding:.5rem clamp(1.1rem,4vw,2.25rem) 1.6rem;
    box-shadow:var(--bl-shadow-m);
    transform:translateY(-130%); transition:transform .4s var(--bl-ease);
    max-height:calc(100vh - 76px); overflow-y:auto;
  }
  .bl-nav.is-open{ transform:translateY(0); }
  .bl-nav__link{ padding:.95rem 0; border-bottom:var(--bl-line); font-size:1rem; }
  .bl-nav__link::after{ display:none; }
  .bl-burger{ display:block; }
  .bl-masthead__cta{ display:none; }

  .bl-hero__grid{ grid-template-columns:1fr; }
  .bl-hero__stage{ max-width:460px; margin-inline:auto; width:100%; }
  .bl-hero__chip{ left:0; }
  .bl-split{ grid-template-columns:1fr; }
  .bl-split--flip .bl-split__media{ order:0; }
  .bl-contact{ grid-template-columns:1fr; }
  .bl-cta{ grid-template-columns:1fr; }
  .bl-form__grid{ grid-template-columns:1fr; }
  .bl-tipgrid{ grid-template-columns:1fr; }
  .bl-duo{ grid-template-columns:1fr; }
  .bl-band{ aspect-ratio:4/3; max-height:none; }
  .bl-band__veil{
    background:linear-gradient(180deg, rgba(10,31,60,.55) 0%, rgba(10,31,60,.88) 60%);
    justify-content:flex-end;
  }
  .bl-cookiebar{ grid-template-columns:1fr; }
}

@media (max-width: 620px){
  body{ font-size:16px; }
  .bl-cards--four,.bl-cards--three,.bl-steps{ grid-template-columns:1fr; }
  .bl-strip__row{ grid-template-columns:1fr; gap:1rem; }
  .bl-foot__top{ grid-template-columns:1fr; gap:2rem; }
  .bl-hero__bottle{ width:50%; right:-2%; }
  .bl-btn{ width:100%; }
  .bl-hero__actions{ flex-direction:column; }
  .bl-cookiebar__actions .bl-btn{ width:100%; }
  .bl-doc table{ font-size:.86rem; }
  .bl-doc th,.bl-doc td{ padding:.7rem .6rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
  .bl-reveal{ opacity:1; transform:none; }
}