.elementor-22789 .elementor-element.elementor-element-7f1d7ce:not(.elementor-motion-effects-element-type-background), .elementor-22789 .elementor-element.elementor-element-7f1d7ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.svenskaalarm.se/wp-content/uploads/elementor/thumbs/garden-r1q7gdxlrhft6vc8da2q50aa44nzd04kz8kchcfeo0.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-22789 .elementor-element.elementor-element-7f1d7ce > .elementor-container{min-height:100px;}.elementor-22789 .elementor-element.elementor-element-7f1d7ce{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:40px 0px 80px 0px;}.elementor-22789 .elementor-element.elementor-element-7f1d7ce > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-22789 .elementor-element.elementor-element-77d6d19 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-22789 .elementor-element.elementor-element-7f1d7ce{padding:30px 15px 20px 15px;}}/* Start custom CSS for html, class: .elementor-element-77d6d19 */:root{
  --sa-blue:#1f3b87;
  --sa-sky:#2a6cf1;
  --sa-ink:#0b1426;
  --sa-text:#2b3340;
  --sa-bg:#f6f7fb;
  --sa-cream:#efe8de;
  --radius-xl:22px;
  --shadow:0 10px 30px rgba(7,16,37,.15);
  --shadow-sm:0 6px 18px rgba(7,16,37,.10);
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--sa-text);background:#fff;line-height:1.5}
.container{width:min(1120px,92vw);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eef1f6}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand img{height:36px;width:auto;display:block}
.nav{display:flex;gap:24px;align-items:center;font-weight:600}
.nav a{color:var(--sa-ink);text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}
.btn{padding:12px 18px;border-radius:999px;border:2px solid var(--sa-blue);text-decoration:none;font-weight:700;display:inline-block}
.btn.ghost{color:var(--sa-blue);background:#fff}
.btn.primary{background:var(--sa-blue);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.btn.primary:hover{filter:brightness(1.05)}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.85);z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);z-index:-1}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding:64px 0 48px}
.hero-copy h1{font-size:clamp(28px,3.4vw,48px);line-height:1.05;color:var(--sa-ink);margin:8px 0 12px}
.hero-copy h1 span{color:var(--sa-blue)}
.sub{font-size:clamp(16px,1.6vw,20px);opacity:.9;margin:0 0 16px}
.campaign-pill{display:inline-block;background:#fff;border:1px dashed var(--sa-cream);padding:8px 12px;border-radius:999px;font-weight:700;color:#b85b00;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.countdown{margin:12px 0 6px;font-weight:700;color:var(--sa-ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cd-box{background:#fff;border:1px solid #e6ebf2;padding:6px 10px;border-radius:10px;display:inline-block;min-width:60px;text-align:center}
.usp-inline{list-style:none;padding:0;margin:10px 0 18px;display:flex;flex-wrap:wrap;gap:12px}
.usp-inline li{background:#fff;border:1px solid #e6ebf2;padding:8px 12px;border-radius:999px;font-weight:600}

/* Lead form */
.lead-form{display:flex;gap:10px;align-items:center;margin:8px 0 10px;background:#fff;padding:10px;border-radius:999px;box-shadow:var(--shadow);width:min(560px,100%)}
.lead-form input{flex:1;border:0;outline:0;font-size:16px;padding:10px 14px;border-radius:999px}
.lead-form .btn{white-space:nowrap}
.micro-copy{font-size:13px;opacity:.9;margin-top:8px}

/* Visual */
.hero-visual{position:relative;display:grid;place-items:center}
.product{width:min(540px,100%);height:auto;filter:drop-shadow(0 35px 40px rgba(0,0,0,.18))}
.phone-card{position:absolute;right:0;bottom:-8px;background:#fff;padding:10px 12px;border-radius:var(--radius-xl);display:grid;place-items:center;box-shadow:var(--shadow)}
.phone-card img{height:220px;width:auto;display:block}
.phone-card p{margin:6px 0 2px;font-weight:700;color:var(--sa-ink)}

/* After click */
.after-click{background:var(--sa-bg);padding:40px 0;border-top:1px solid #eef1f6}
.after-click h2{margin:0 0 18px;color:var(--sa-ink);font-size:clamp(22px,2.4vw,30px)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.step-num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sa-blue);color:#fff;font-weight:800}

/* Trust row */
.trust{background:#fff;border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6}
.trust-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.star-row{font-size:22px;letter-spacing:2px;color:#ffb400}
.star.half{opacity:.6}
.trust .badges{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.trust .badges li{background:#f0f4ff;color:#122a6a;border:1px solid #d9e4ff;padding:8px 12px;border-radius:999px;font-weight:700;box-shadow:var(--shadow-sm)}

/* Compare */
.compare{background:var(--sa-bg);padding:46px 0}
.compare h2{margin:0 0 8px;color:var(--sa-ink)}
.muted{opacity:.8}
.compare-grid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin-top:16px}
.cmp.card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px}
.cmp.card.alt{background:#fff7f7;border:1px solid #ffd9d9}
.checklist{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.price-box{background:#fff;border:1px solid #e6ebf2;border-radius:12px;padding:12px;display:grid;gap:8px}
.price-box .line{display:flex;align-items:center;justify-content:space-between}
.price-box .total{margin-top:6px;font-weight:800}
.note.card{margin-top:16px;padding:16px;border-radius:12px;background:#fff;border:1px solid #e6ebf2;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Testimonials */
.testimonials{background:#fff;padding:44px 0}
.testimonials h2{margin-top:0}
.t-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.t-card{background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)}
.t-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#eaf0ff;color:#1f3b87;font-weight:900}

/* Benefits */
.benefits{background:#fff;padding:40px 0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.card{background:#fff;padding:22px;border-radius:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;color:var(--sa-ink)}
.card p{margin:0;opacity:.9}

/* FAQ */
.faq{background:var(--sa-bg);padding:44px 0;border-top:1px solid #eef1f6}
.faq h2{margin-top:0}
.accordion{display:grid;gap:10px}
.acc-btn{width:100%;text-align:left;background:#fff;border:1px solid #e6ebf2;padding:14px 16px;border-radius:12px;font-weight:800;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:var(--shadow-sm)}
.acc-btn[aria-expanded="true"]{border-color:#cdd9ff;background:#f7f9ff}
.acc-panel{display:none;padding:12px 16px;background:#fff;border:1px solid #e6ebf2;border-top:0;border-radius:0 0 12px 12px;margin-top:-10px}
.acc-panel.open{display:block}

/* Sticky CTA (mobile) */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;background:var(--sa-blue);color:#fff;text-decoration:none;text-align:center;padding:14px 18px;border-radius:999px;font-weight:800;box-shadow:var(--shadow);display:none;z-index:60}

/* Footer */
.site-footer{border-top:1px solid #eef1f6;background:#fff}
.foot-inner{padding:22px 0}
.foot-inner small{opacity:.7}

/* Responsive */
@media (max-width:980px){
  .nav a:not(.btn){display:none}
  .hero-inner{grid-template-columns:1fr;gap:24px;padding:38px 0}
  .phone-card{position:relative;right:auto;bottom:auto;margin-top:8px}
  .sticky-cta{display:block}
  .grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .t-grid{grid-template-columns:1fr}
  .trust-inner{flex-direction:column;align-items:flex-start}
}
/* FAQ – gör texten läsbar */
.sa-landing .acc-btn {
  color: #ffffff;              /* gör frågetexten vit */
}

.sa-landing .acc-btn span {
  color: #ffffff;              /* om texten ligger i ett span */
}

.sa-landing .acc-panel {
  color: #111827;              /* mörk text inne i svaret */
}
/* Justera utsnittet av hero-bilden */
.sa-landing .hero-bg {
  object-position: center center;   /* testa också 60% center eller 70% center */
}

/* Ny kampanjtagg – Svenska Alarm stil */
.campaign-pill {
    background: #e7f2ff; /* deras ljusblå bakgrund */
    color: #1d3b70; /* deras mörkblå text */
    font-weight: 600;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 40px;
    border: 1px solid #c9dff5; 
    display: inline-block;
    letter-spacing: -0.2px;
}


/* Gör fältet likt din tidigare input */
.gf-lead-form .gform_wrapper .gfield input[type="text"],
.gf-lead-form .gform_wrapper .gfield input[type="tel"] {
    width: 100%;
    max-width: 480px;
    border-radius: 999px;
    border: none;
    padding: 18px 24px;
    font-size: 16px;
}

/* Knappen i samma stil som "Få ditt pris idag" */
.gf-lead-form .gform_footer input[type="submit"] {
    background: var(--sa-blue);
    color: #fff;
    border-radius: 999px;
    padding: 16px 36px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

/* Ta bort Gravity Forms standardmeddelanden under fältet om du vill ha det renare */
.gf-lead-form .gform_validation_errors {
    margin-top: 8px;
}
.hero-form {
  margin-top: 20px;
  max-width: 520px;
}

.hero-form .gform_wrapper {
  background: rgba(255,255,255,0.95);
  padding: 12px;
  border-radius: 999px;
}

/* =========================================
   Gravity Form i HERO – input + knapp bredvid
   (fixar att knappen hamnar längst till höger)
   ========================================= */

.gf-hero{
  margin-top: 18px;
  width: min(560px, 100%) !important;   /* lås bredden */
  max-width: 560px !important;
}

/* pill-bakgrunden */
.gf-hero .gform_wrapper{
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255,255,255,0.95);
  padding: 12px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* Gör FORMEN till en flexrad */
.gf-hero .gform_wrapper form{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Body (fält) ska INTE ta all bredd */
.gf-hero .gform_wrapper .gform_body{
  flex: 0 1 420px !important;  /* viktig: inte flex:1 */
  margin: 0 !important;
}

/* Footer (knapp) */
.gf-hero .gform_wrapper .gform_footer{
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}

/* Städa bort default-marginaler */
.gf-hero .gform_wrapper .gform_fields,
.gf-hero .gform_wrapper .gfield{
  margin: 0 !important;
}

/* Input */
.gf-hero .gform_wrapper input[type="tel"],
.gf-hero .gform_wrapper input[type="text"],
.gf-hero .gform_wrapper input[type="email"]{
  width: 100% !important;
  max-width: 100% !important;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  padding: 0 18px;
  font-size: 16px;
  background: #fff;
  outline: 0;
}

/* Knapp */
.gf-hero .gform_wrapper input[type="submit"],
.gf-hero .gform_wrapper .gform_button,
.gf-hero .gform_wrapper button[type="submit"]{
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--sa-blue);
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Mobil: stacka */
@media (max-width: 768px){
  .gf-hero{ max-width: 100% !important; }
  .gf-hero .gform_wrapper form{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .gf-hero .gform_wrapper .gform_body{
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .gf-hero .gform_wrapper input[type="submit"]{
    width: 100% !important;
  }
}

/* =========================================
   HARD OVERRIDE – lås layouten (knapp bredvid input)
   ========================================= */

/* Begränsa bredd så den inte fyller hela heron */
.gf-hero,
.gf-hero #gform_wrapper_1{
  width: min(620px, 100%) !important;
  max-width: 620px !important;
}

/* PILL-wrapper (bakgrund) */
.gf-hero #gform_wrapper_1{
  background: rgba(255,255,255,0.95) !important;
  padding: 12px !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow) !important;
}

/* Tvinga layout: 2 kolumner (fält + knapp) */
.gf-hero #gform_wrapper_1 form#gform_1{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 12px !important;

  /* döda theme-beteenden */
  justify-content: initial !important;
}

/* Döda “flytta-knappen-till-höger”-beteenden */
.gf-hero #gform_wrapper_1 .gform_footer,
.gf-hero #gform_wrapper_1 .gform_footer.top_label{
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;

  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  justify-self: start !important;
  align-self: center !important;
}

/* Se till att body inte skapar extra rad/utrymme */
.gf-hero #gform_wrapper_1 .gform_body{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Städa bort default-marginaler på fält */
.gf-hero #gform_wrapper_1 .gform_fields,
.gf-hero #gform_wrapper_1 .gfield{
  margin: 0 !important;
}

/* Input (telefon) */
.gf-hero #gform_wrapper_1 input[type="tel"],
.gf-hero #gform_wrapper_1 input[type="text"],
.gf-hero #gform_wrapper_1 input[type="email"]{
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  padding: 0 18px !important;
  font-size: 16px !important;
  background: #fff !important;
}

/* Knapp */
.gf-hero #gform_wrapper_1 input[type="submit"],
.gf-hero #gform_wrapper_1 .gform_button,
.gf-hero #gform_wrapper_1 button[type="submit"]{
  height: 52px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: var(--sa-blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;

  /* döda theme-saker */
  margin-left: 0 !important;
  position: static !important;
  right: auto !important;
  left: auto !important;
}

/* Mobil: stacka */
@media (max-width: 768px){
  .gf-hero #gform_wrapper_1 form#gform_1{
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
  .gf-hero #gform_wrapper_1 input[type="submit"]{
    width: 100% !important;
  }
}/* End custom CSS */