@media (max-width: 600px) {
   .section.container {
      margin-left: 20px !important;
      margin-right: 0 !important;
      padding-left: 5px !important;
      padding-right: 0 !important;
   }
}
/* Styles for section container-buttons */
.container-buttons-group {
   display: flex;
   justify-content: center;
   gap: 24px;
   padding-top: 10px;
   padding-bottom: 80px;
}

.container-button {
   display: inline-block;
   padding: 12px 32px;
   background: #FC5F3A;
   color: #fff;
   border-radius: 6px;
   text-decoration: none;
   font-weight: 600;
   font-size: 1rem;
   border: 2px solid #FC5F3A;
   transition: background 0.2s, color 0.2s;
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.container-button:hover,
.container-button:focus {
   background: #EC4626;
   color: #fff;
   border-color: #EC4626;
}
.section.container h3 + p {
   margin-top: -15px !important;
}
.section.container .two-cols img {
   margin-top: 10px !important;
}
.section.container > .two-cols > div > *:first-child {
   margin-top: 0;
}
html.dark .section.container {
   background: #253447;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: #F5F7FA; color: #364152; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

/* =========================================================
   HEADER (KOMPAKT HEADER MED LOGO-BYTTE)
   ========================================================= */
.site-header { display:flex; align-items:center; justify-content:space-between; padding:6px 20px; height:81px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.07); }
.main-menu a { margin:0 12px; font-weight:500; padding:8px 12px; border-radius:4px; }
.lang-menu { display:flex; align-items:center; gap:6px; }
.lang-menu a { opacity: .85; }
.theme-toggle { background:none; border:none; cursor:pointer; font-size:1.15rem; opacity:.8; }
.theme-toggle:hover { opacity:1; }
.hamburger { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; padding:8px; border-radius:4px; }
.hamburger:hover { background:#f0f0f0; }
html.dark .hamburger { color:#fff; }
html.dark .hamburger:hover { background:#333; }
.logo { height:102px; width:auto; vertical-align:middle; }
.logo-dark { display:none; }
html.dark .logo-light { display:none; }
html.dark .logo-dark { display:inline; }

/* Aktiv menypeker */
.main-menu a.active { color:#2AA9E0; font-weight:700; position:relative; }
.main-menu a.active::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:#2AA9E0; border-radius:2px; opacity:.9; }
.lang-menu a.active { color:#2AA9E0; font-weight:700; position:relative; }
.lang-menu a.active::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:#2AA9E0; border-radius:2px; opacity:.9; }

/* =========================================================
   HERO & SUB-HERO
   ========================================================= */
.hero { background: linear-gradient(135deg, #2AA9E0 0%, #2A49E0 100%); color:#fff; text-align:center; padding:100px 20px 80px; margin-bottom: 36px; }
.hero-brand { font-size:3.4rem; font-weight:800; margin:0; letter-spacing:-1px; }
.hero-subtitle { font-size:1.2rem; margin-top:6px; opacity:.9; }
.hero-tagline { font-size:1.2rem; max-width:720px; margin:32px auto 38px; line-height:1.55; }
/* =========================================================
    COOKIE BANNER
    ========================================================= */
#cookie-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: #fff;
   box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
   z-index: 1000;
   padding: 0;
}
.cookie-banner-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1100px;
   margin: 0 auto;
   padding: 16px 20px;
   font-size: 1rem;
}
#cookie-accept {
   background: #2AA9E0;
   color: #fff;
   border: none;
   border-radius: 4px;
   background: #fff;
}
html.dark #cookie-banner {
   background: #253447;
   color: #F5F7FA;
   font-size: 1rem;
   cursor: pointer;
   font-weight: 600;
}
#cookie-accept:hover {
   background: #2A49E0;
}
.hero-buttons a { display:inline-block; padding:12px 24px; border-radius:8px; font-weight:600; margin:6px 8px; color:#2AA9E0; background:#fff; }
.hero-buttons a:hover { background:#E6ECFF; }
   color: inherit;

html.dark .cookie-banner-content a {
   color: #7DD3FC;
}
html.dark #cookie-accept {
   background: #2AA9E0;
   color: #fff;
}
.sub-hero { text-align:center; padding:70px 20px 50px; margin-bottom: 36px; background: linear-gradient(135deg, #2AA9E0 0%, #2A49E0 100%); color:#fff; }
.sub-hero-lead { font-size:1.1rem; opacity:.95; max-width:700px; margin:14px auto 30px; }

/* Responsive images */
.responsive-img { max-width:100%; height:auto; display:block; border-radius:14px; }
.hero-art img { margin:40px auto 40px; }
.sub-hero img { margin:20px auto 0; }

/* Sections */
.section { padding:0 0; }
.section-alt { padding:50px 0; background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.two-cols { display:flex; gap:70px; flex-wrap:wrap; }
.two-cols > div { flex:1; min-width:280px; }
.benefit-list li { margin-bottom:10px; }
.cards { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.card { flex: 1; min-width: 250px; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; }
.card h3 { margin-top: 0; }
.lead { font-size: 1.1rem; font-weight: 500; margin-bottom: 20px; }

/* Alternating section backgrounds and card effect */
.section.container {
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 2px 16px 0 rgba(44, 62, 80, 0.07);
   margin-bottom: 36px;
   padding: 48px 70px;
   transition: box-shadow 0.2s;
}

/* CTA footer */
.cta-footer { text-align:center; padding:60px 20px; background: linear-gradient(135deg, #2AA9E0 0%, #2A49E0 100%); color:#fff; }
.cta-footer a { display:inline-block; padding:12px 25px; margin:10px; background:#fff; color:#2AA9E0; border-radius:6px; font-weight:600; }
.cta-footer a:hover { background:#E6ECFF; }

/* Footer */
.footer { text-align:center; padding:24px; background:#1C2B35; color:#fff; }
.footer a { margin-right: 100px; }

/* Dark mode */
html.dark body { background:#1C2B35; color:#F5F7FA; }
html.dark h1, html.dark h2, html.dark h3 { color:#F5F7FA; }
html.dark .site-header { background:#1C2B35; box-shadow:none; }
html.dark .cta-footer { background: linear-gradient(135deg, #2AA9E0 0%, #2A49E0 100%); }
html.dark .card { background: #1a1a1a; }
html.dark .main-menu a, html.dark .lang-menu a { color:#F5F7FA; }

/* Responsive tweaks */
@media (max-width: 768px){
  .site-header { flex-direction:column; text-align:center; height:auto; padding:12px 20px; }
  .main-menu { margin-top:8px; }
  .hero-brand { font-size:2.2rem; }
  .hero-subtitle { font-size:1rem; }
  .hero-tagline { font-size:1rem; }
}

@media (max-width: 480px){
  .hero-brand { font-size:1.8rem; }
  .hero-subtitle { font-size:0.9rem; }
  .hero-tagline { font-size:0.95rem; margin:20px auto 30px; }
  .hero-buttons { display:flex; flex-direction:column; gap:10px; }
  .hero-buttons a { display:block; width:100%; margin:0; padding:14px 20px; }
  .sub-hero-lead { font-size:1rem; }
  .section { padding:40px 0; }
  .two-cols { gap:16px; }
  .cta-footer { padding:50px 15px; }
  .cta-footer a { display:block; width:100%; margin:8px 0; padding:14px 20px; }
  .main-menu { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; box-shadow:0 4px 8px rgba(0,0,0,0.1); z-index:1000; padding:10px 0; }
  .mobile-menu-open .main-menu { display:block; }
  .hamburger { display:block; }
  .site-header { padding:10px 15px; position:relative; }
  html.dark .main-menu { background:#1C2B35; }
}