/* =========================================================
   SÖDERSLÄTTS POOLSERVICE – SINGLE OPTIMIZED CSS
   (Merge + dedupe + stable cards/form behavior)
   ========================================================= */

/* =============== Tokens / Base =============== */
:root{
  --bg:#f3f6fb;
  --text:#0b1220;
  --muted:#5f6b7a;
  --card:#ffffff;
  --line:#e6edf5;

  --primary:#15b5ff;
  --primary2:#11cfe5;
  --primaryDark:#0b7fb3;

  --shadow: 0 18px 50px rgba(15, 23, 42, .08);
  --shadow2: 0 10px 25px rgba(15, 23, 42, .06);

  --radius:18px;
  --radius2:22px;

  --max: 1160px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}

/* =============== Topbar / Nav =============== */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:-.2px;
}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 10px 18px rgba(17, 207, 229, .18);
}
.menu{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.menu a{
  text-decoration:none;
  font-size:14px;
  color:#3b4554;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition:.15s ease;
  white-space:nowrap;
}
.menu a:hover{ border-color: var(--line); background:#fff; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:.15s ease;
  white-space:nowrap;
}
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 14px 26px rgba(21, 181, 255, .20);
}
.btn-primary:hover{filter:brightness(1.02)}
.btn-ghost{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
  color:#fff;
}
.btn-ghost:hover{background: rgba(255,255,255,.22)}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  border:1px solid var(--line);
  background:#fff; color:var(--text);
  font-weight:900; text-decoration:none;
}
.btn-outline:hover{ filter:brightness(.985); }

/* =============== Heroes =============== */
/* Index hero */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 8% 15%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(90deg, #0b78a6 0%, #11b7ff 45%, #3ddcd3 100%);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.hero-inner{
  padding: 70px 0 80px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:13px;
  font-weight:800;
  width:max-content;
}
.hero h1{
  margin:14px 0 12px;
  font-size: clamp(34px, 4.3vw, 58px);
  letter-spacing:-.7px;
  line-height:1.02;
}
.hero p{
  margin: 0 0 22px;
  max-width: 56ch;
  color: rgba(255,255,255,.88);
  font-size: 16px;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

/* Hero media */
.hero-media{display:flex; justify-content:flex-end; align-items:center;}
.hero-media img{
  width:100%;
  max-width:520px;
  height:360px;
  object-fit:cover;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 22px 60px rgba(15,23,42,.18);
  background:#fff;
}
.hero-waves{
  position:absolute;
  right:-40px;
  top:70px;
  width: 420px;
  height: 340px;
  opacity:.22;
  pointer-events:none;
  filter: blur(.2px);
}
.hero-dots{
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.28;
  pointer-events:none;
  mask-image: radial-gradient(800px 360px at 10% 20%, #000 25%, transparent 70%);
}

/* Undersidor hero */
.page-hero{
  background:
    radial-gradient(1100px 600px at 10% 10%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(90deg, #0b78a6 0%, #11b7ff 45%, #3ddcd3 100%);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding: 44px 0;
}
.page-hero h1{
  margin:0 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing:-.6px;
  line-height:1.05;
}
.page-hero p{
  margin:0;
  max-width:72ch;
  color: rgba(255,255,255,.88);
  font-size: 15px;
}
.page-hero .hero-actions{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }

/* =============== Section base =============== */
section{padding: 70px 0}
.section-head{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 34px;
}
.tag{
  display:inline-flex;
  padding:7px 12px;
  border-radius: 999px;
  background: #e9f7ff;
  color: #0a79ae;
  font-weight:900;
  font-size:12px;
  border: 1px solid #d7f0ff;
}
.section-head h2{
  margin:14px 0 10px;
  font-size: clamp(26px, 2.7vw, 36px);
  letter-spacing:-.4px;
}
.section-head p{
  margin:0;
  color: var(--muted);
  font-size: 14px;
}
.section-white{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* =============== Internal boost =============== */
.internal-boost{ padding: 34px 0; }
.internal-boost .boost-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 22px;
}
.internal-boost h2{
  margin:0 0 8px;
  font-size: 20px;
  letter-spacing:-.2px;
}
.internal-boost p{
  margin:10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height:1.6;
}
.internal-boost a{
  color: var(--primaryDark);
  font-weight: 900;
  text-decoration: none;
}
.internal-boost a:hover{ text-decoration: underline; }
.internal-boost .links{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.internal-boost .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #d7f0ff;
  background:#e9f7ff;
  color:#0a79ae;
  font-size:13px;
  font-weight:900;
}

/* =============== Cards (services) =============== */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
.card{
  position:relative;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 22px;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

.icon{
  width:48px; height:48px; border-radius: 14px;
  background: #eaf7ff;
  border:1px solid #d8f1ff;
  display:grid; place-items:center;
  color: #0a79ae;
  margin-bottom: 14px;
}
.card h3{margin: 4px 0 8px; font-size:18px; letter-spacing:-.2px}
.card p{margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.55}
.divider{height:1px; background: var(--line); margin: 14px 0}

.price-line{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px;
  font-weight:900;
}
.price-line strong{ font-size:22px; letter-spacing:-.2px; }
.price-line span{ font-size:12px; color:var(--muted); font-weight:800; white-space:nowrap; text-align:right; }

.card.featured{
  border-color: #9fe4ff;
  box-shadow: 0 18px 55px rgba(21, 181, 255, .12);
}
.card.featured .icon{
  background: linear-gradient(135deg, #12b7ff, #22e6d0);
  color:#fff;
  border-color: transparent;
}

/* Badge support: if you use <span class="badge"> or <span class="tag tag-corner"> */
.card .badge,
.card .tag.tag-corner{
  position:absolute;
  top:14px;
  right:14px;
  margin:0;
  padding:6px 10px;
  border-radius:999px;
  background:#e9f7ff;
  border:1px solid #d7f0ff;
  color:#0a79ae;
  font-size:12px;
  font-weight:950;
  line-height:1;
  z-index:2;
  pointer-events:none;
  width:auto;
}
.card.featured .badge,
.card.featured .tag.tag-corner{
  background:#f0fbff;
  border-color:#bfeeff;
}

/* Card CTA support: if you use class="cta" or class="cta-link" */
.card a.cta,
.card a.cta-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color: var(--primaryDark);
  font-weight:950;
  text-decoration:none;
}
.card a.cta:hover,
.card a.cta-link:hover{ text-decoration:underline; }

/* =============== Prices mini cards =============== */
.grid-prices{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  max-width: 860px;
  margin: 0 auto;
}
.mini{
  text-align:center;
  padding: 22px;
}
.mini .icon{margin:0 auto 12px}
.mini h3{margin:0 0 6px; font-size:16px}
.mini .big{
  font-size: 26px;
  font-weight: 950;
  letter-spacing:-.3px;
  margin-top: 6px;
}
.mini .sub{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* =============== Season subscription pricing =============== */
.pricing-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  margin-top: 26px;
}
.plan{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 24px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.plan .name{font-weight:900; font-size:16px}
.plan .amount{
  font-weight:950;
  font-size: 36px;
  letter-spacing:-.6px;
  line-height:1.0;
}
.plan .amount small{font-size:14px; font-weight:850; color:var(--muted)}
.plan ul{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  color:#263246;
  font-size: 13px;
}
.plan li{
  display:flex; gap:10px; align-items:flex-start;
  color:#2b3648;
}
.tick{
  width:18px; height:18px; border-radius:6px;
  background:#eafbf6;
  border:1px solid #c7f2e2;
  display:grid; place-items:center;
  color:#0b7f5b;
  flex:0 0 auto;
  margin-top:1px;
  font-weight:900;
  font-size: 12px;
}
.plan .choose{
  margin-top:auto;
  width:100%;
  padding:12px 14px;
  border-radius: 14px;
  border: 0;
  font-weight:900;
  cursor:pointer;
  background: #11b7ff;
  color:#fff;
  box-shadow: 0 12px 26px rgba(21, 181, 255, .18);
}
.plan .choose:hover{filter:brightness(1.03)}
.plan.pop{
  border: 2px solid #11b7ff;
  box-shadow: 0 18px 60px rgba(21, 181, 255, .14);
}
.pop-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform: translateX(-50%);
  background: #11b7ff;
  color:#fff;
  font-weight:950;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(21, 181, 255, .25);
}

/* =============== Pool robot section =============== */
.robot{ padding: 70px 0 90px; }
.robot-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:center;
}
.robot-box{
  height: 520px;
  border-radius: 26px;
  border: 4px solid #11b7ff;
  background: #fff;
  box-shadow: var(--shadow);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.robot-box.is-photo{padding:0;}
.robot-photo{width:100%;height:100%;object-fit:cover;display:block;}
.robot-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.22) 100%);pointer-events:none;}

.robot-float{
  position:absolute;
  top:-16px;
  right: 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 14px 16px;
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 190px;
}
.robot-float .dot{
  width:34px; height:34px; border-radius: 14px;
  background:#eaf7ff;
  border:1px solid #d7f0ff;
  display:grid; place-items:center;
  color:#0a79ae;
  font-weight:950;
}
.robot-float strong{display:block; font-size:18px; font-weight:950; letter-spacing:-.2px}
.robot-float span{display:block; font-size:12px; color:var(--muted); font-weight:850}

.robot-right .tag{background:#e9f7ff}
.robot-right h2{
  margin: 14px 0 12px;
  font-size: clamp(26px, 2.7vw, 38px);
  letter-spacing:-.4px;
}
.robot-right p{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  max-width: 62ch;
}
.benefits{
  margin: 18px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap: 12px;
  max-width: 520px;
}
.benefit{ display:flex; gap:12px; align-items:flex-start; }
.benefit .bicon{
  width:36px; height:36px; border-radius: 14px;
  background:#eaf7ff;
  border:1px solid #d7f0ff;
  display:grid; place-items:center;
  color:#0a79ae;
  flex: 0 0 auto;
  margin-top:1px;
  font-weight:950;
}
.benefit b{display:block; font-size:14px}
.benefit small{display:block; color:var(--muted); font-size:12px; margin-top:3px}

/* =============== Local SEO section =============== */
.local-seo{
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.seo-box{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 22px;
  max-width: 920px;
  margin: 0 auto;
}
.seo-box h3{margin:0 0 10px; font-size:18px}
.seo-box p{margin:0; color:var(--muted); font-size:14px}

.seo-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.seo-list li{
  font-size:12px;
  font-weight:900;
  color:#0a79ae;
  background:#e9f7ff;
  border:1px solid #d7f0ff;
  padding:7px 10px;
  border-radius:999px;
}

/* Pill links */
.pill-links{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  background:#e9f7ff;
  border:1px solid #d7f0ff;
  color:#0a79ae;
  font-weight: 900;
  font-size: 12px;
  text-decoration: none;
}
.pill:hover{ filter: brightness(0.98); text-decoration:none; }

/* =============== Undersidor: content blocks =============== */
main{ padding: 34px 0 0; }

.grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
}
.box{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.box h2{ margin:0 0 10px; font-size:18px; letter-spacing:-.2px; }
.box p{ margin:0 0 12px; color:var(--muted); font-size:14px; }
.box p:last-child{ margin-bottom:0; }
.box ul{ margin:0; padding-left:18px; color:#2b3648; line-height:1.7; }
.muted{color:var(--muted)}
.lead{ color:#2b3648; margin:0 0 12px; font-weight:950; letter-spacing:-.2px; }

.price{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  margin-top:14px;
  padding-top:14px;
}
.price strong{ font-size:20px; letter-spacing:-.2px; }

.note{
  border-top:1px solid var(--line);
  margin-top:14px;
  padding-top:14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.note strong{white-space:nowrap}

/* FAQ details/summary */
details{ border-top:1px solid var(--line); padding:14px 0; }
details:first-of-type{ border-top:0; }
summary{
  cursor:pointer;
  font-weight:950;
  color:#2b3648;
  letter-spacing:-.1px;
}
details p{ margin:10px 0 0; color:var(--muted); font-size:14px; }

/* Integritet: rubriker i content (inte globalt på hela sidan) */
.card h2{ margin:18px 0 8px; font-size:16px; letter-spacing:-.2px; }

/* =============== Contact / Form =============== */
.contact-wrap{max-width: 920px; margin: 0 auto;}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 22px;
}

/* Grid 2 kolumner */
.form-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

/* Labels/fields (stöd för både .form-input etc och om du har input/select/textarea utan klass) */
.form-label{
  display:block;
  font-size:12px;
  font-weight:950;
  color:var(--muted);
}
.form-input, .form-select, .form-textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-textarea{ min-height:120px; resize:vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus{
  border-color:#9fe4ff;
  box-shadow:0 0 0 4px rgba(21,181,255,.12);
}
.form-submit{
  border:0;
  width:100%;
  margin-top:12px;
}
.form-note{margin-top:10px; font-size:12px; color:var(--muted);}

.gdpr-row{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

/* Default checkbox (om du har <input type="checkbox"> direkt i .gdpr-row) */
.gdpr-row input[type="checkbox"]{
  margin-top:2px;
  width:18px;
  height:18px;
  accent-color:#11b7ff;
}

/* Custom checkbox variant (om du använder .cb + .cb-ui + .cb-label) */
.cb{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
}
.cb-ui{
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:7px;
  border:1.5px solid #cfe6f6;
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  display:grid;
  place-items:center;
  margin-top:2px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cb-ui::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid transparent;
  border-bottom:2px solid transparent;
  transform: rotate(-45deg) translateY(-1px);
  transition: border-color .12s ease;
}
.cb-label{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.cb-label a,
.gdpr-row a{
  font-weight:950;
  color: var(--primaryDark);
  text-decoration:none;
}
.cb-label a:hover,
.gdpr-row a:hover{ text-decoration:underline; }

.cb:checked + .cb-ui{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border-color: transparent;
  box-shadow: 0 14px 26px rgba(21,181,255,.18);
  transform: translateY(-1px);
}
.cb:checked + .cb-ui::after{
  border-left-color:#fff;
  border-bottom-color:#fff;
}
.cb:focus-visible + .cb-ui{
  box-shadow: 0 0 0 4px rgba(21,181,255,.18);
  border-color:#9fe4ff;
}

.gdpr-note{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.gdpr-note a{
  font-weight:950;
  color: var(--primaryDark);
  text-decoration:none;
}
.gdpr-note a:hover{ text-decoration:underline; }

/* =============== Tooltip =============== */
.i-tip{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-left:8px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  cursor:help;
  border:1px solid #d7f0ff;
  background:#e9f7ff;
  color:#0a79ae;
  position:relative;
}
.i-tip:hover::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom:130%;
  transform:translateX(-50%);
  width:min(280px, 80vw);
  background:#0b1220;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1.35;
  box-shadow:0 18px 50px rgba(15,23,42,.18);
  z-index:999;
  white-space:normal;
}
.i-tip:hover::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:120%;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:#0b1220;
}

/* =============== Sticky mobile CTA bar =============== */
.sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display:none;
}
.sticky-cta-inner{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.sticky-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 950;
  text-decoration:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.sticky-btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
  box-shadow: 0 14px 26px rgba(21, 181, 255, .18);
}

/* =============== Footer =============== */
.site-footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:44px 0 96px;
  font-size:14px;
}
.footer-inner{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items:start;
}
.footer-left h4{
  margin:0 0 12px;
  font-size:16px;
  letter-spacing:-.2px;
  color: var(--text);
}
.footer-left p{
  margin:6px 0;
  color: var(--muted);
}
.footer-left p strong{ color:#3b4554; }
.footer-left a{
  color:#3b4554;
  font-weight:900;
  text-decoration:none;
}
.footer-left a:hover{ text-decoration:underline; }
.company{
  margin-top:14px;
  font-size:12px;
  color: var(--muted);
  line-height:1.55;
}
.footer-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  text-align:right;
  min-width: 180px;
}
.footer-right a{
  color: var(--muted);
  font-weight:900;
  text-decoration:none;
}
.footer-right a:hover{ text-decoration:underline; }

/* =============== Responsive =============== */
@media (max-width: 980px){
  .hero-media img{height:260px; max-width:640px}
  .hero-inner{grid-template-columns:1fr; padding: 54px 0 64px}
  .hero-waves{right:-120px; top: 24px; transform: scale(.9)}

  .grid-3, .grid-prices, .pricing-3{grid-template-columns:1fr}
  .robot-grid{grid-template-columns:1fr}
  .robot-box{height: 420px}

  .grid{grid-template-columns:1fr;}

  .footer-inner{grid-template-columns:1fr;}
  .footer-right{align-items:flex-start; text-align:left;}
}

@media (max-width: 768px){
  .footer-inner{ grid-template-columns: 1fr; gap:18px; }
  .footer-right{ align-items:flex-start; text-align:left; }

  /* iPhone/Safari: om du vill ha non-sticky topbar på mobil */
  .topbar{
    position: static;
    top: auto;
    backdrop-filter: none;
  }
}

@media (max-width: 480px){
  .container{padding:0 16px}
  .hero h1{font-size: 34px}
  .section-head h2{font-size: 24px}
  .btn{padding:12px 14px}
  input, select, textarea{font-size:16px}
  .sticky-cta{display:block;}
  .robot-box{ height: 320px; }
  .site-footer{padding-bottom: 88px;}
  .form-grid-2{ grid-template-columns: 1fr; }
}

/* ===== Stable card layout ===== */
.card{
  display:flex;
  flex-direction:column;
}

.card .price-line{
  margin-top:auto;
}

@media (max-width:768px){
  .topbar{
    position:static;
    backdrop-filter:none;
  }
}

/* ===== Star tick (prioriterad jour) ===== */
.tick-star{
  background:linear-gradient(135deg,#ffd54f,#ffb300);
  border:0;
  color:#fff;
  box-shadow:0 4px 10px rgba(255,179,0,.4);
}
/* Outline button */
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid #fff;
  color:#fff;
  font-weight:800;
  text-decoration:none;
  background:transparent;
  transition:.15s ease;
}
.btn-outline:hover{
  background:rgba(255,255,255,.15);
}

.form-input,
.form-select,
.form-textarea{
  background:#ffffff;
}

.form-input::placeholder,
.form-textarea::placeholder{
  color:#8fa2b8;
}

.hero-media{
  max-height: 520px;          /* styr total höjd */
  overflow: hidden;
  border-radius: 24px;
}

.hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Section System ===== */

section{
  padding: 100px 0;
}

.section-white{
  background:#ffffff;
}

.section-soft{
  background: linear-gradient(to bottom, #f7fbff, #eef6fb);
}

.section-muted{
  background:#f5f7fa;
}

.section-divider{
  border-top:1px solid #e6edf3;
}

/* =========================================================
   REFERENSER PAGE (merged from referenser.css)
   ========================================================= */

.ref-hero{
  background:
    radial-gradient(1200px 700px at 8% 15%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(90deg, #0b78a6 0%, #11b7ff 45%, #3ddcd3 100%);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 56px 0 28px;
}

.ref-hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:center;
}

@media (max-width: 980px){
  .ref-hero-inner{ grid-template-columns: 1fr; }
}

.ref-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:600;
  font-size:13px;
}

.ref-hero h1{ margin:14px 0 10px; color:#fff; }
.ref-hero p{ color: rgba(255,255,255,.92); max-width: 54ch; }

.ref-note{
  margin-top:14px;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.45;
}

.ref-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

.ref-hero-card{
  border-radius: 22px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.ref-hero-card-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  background: rgba(0,0,0,.10);
}

.ref-hero-card img{
  width:100%;
  height:auto;
  display:block;
}

/* Grid */

.ref-wrap{
  padding: 34px 0 70px;
  background:#fff;
}

.ref-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 16px;
}

.ref-filters{ display:flex; gap:10px; flex-wrap:wrap; }

.filter{
  appearance:none;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
}

.filter.is-active{
  border-color: rgba(17,183,255,.55);
  box-shadow: 0 8px 16px rgba(17,183,255,.12);
}

.ref-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 980px){
  .ref-grid{ grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 560px){
  .ref-grid{ grid-template-columns: 1fr;}
}

.ref-item{
  border-radius: 18px;
  overflow:hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.ref-item img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
}

.ref-item figcaption{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.ref-item figcaption strong{ font-size:14px; }
.ref-item figcaption span{ font-size:12px; color: rgba(0,0,0,.60); }

.ref-item.is-hidden{ display:none; }

/* CTA */

.ref-cta{ margin-top: 22px; }

.ref-cta-card{
  border-radius: 22px;
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(17,183,255,.10), rgba(17,183,255,.04));
  border: 1px solid rgba(17,183,255,.18);
}

/* Lightbox */

.lb{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}

.lb.is-open{ display:flex; }

.lb-img{
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.lb-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size: 28px;
  cursor:pointer;
}

.lb-caption{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  text-align:center;
  font-size: 14px;
}

/* ================================
   Legal / Disclaimer Styling
================================ */

.legal-box {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 4px solid var(--primary);
  background: rgba(17,183,255,0.05);
  border-radius: 8px;
}

.legal-box h3 {
  font-size: inherit;       /* Samma som övriga h3/h2-logik */
  font-weight: 700;
  margin: 0 0 6px 0;
  letter-spacing: 0.4px;
}

.legal-text {
  font-size: inherit;       /* Följer sidans brödtext */
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}

/* ================================
   Price notes
================================ */

/* Price notes layout (utan att ändra din .price) */
.price-notes{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
}

.price-notes .muted{
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--muted);
}

/* ================================
   Price notes in service cards + price cards
   (safe with your existing card flex layout)
================================ */

/* Service cards: small muted note under price-line */
.card small.muted{
  display:block;
  margin: 10px 0 0;
  font-size:12px;
  line-height:1.45;
  color: var(--muted);
}

/* Keep CTA spacing consistent after the note */
.card a.cta,
.card a.cta-link{
  margin-top: 10px; /* you already have this, but re-assert safely */
}

/* Mini price cards: make multiple .sub lines look tight & consistent */
.grid-prices .mini .sub{
  margin-top: 6px;          /* tighter than your current 10px */
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* Optional: if you ever put small.muted inside the mini cards */
.grid-prices .mini small.muted{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}