/* strombladsmaleri.se – info/landing */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#5b6472;
  --brand:#0a6ad6;
  --brand-2:#0048a6;
  --accent:#ffb357;
  --tint:#f5f8ff;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  color:var(--text); background:var(--bg); line-height:1.6; text-wrap:pretty;
}

.container{max-width:980px; margin-inline:auto; padding:clamp(16px,2.5vw,28px)}
.section{padding:clamp(28px,6vw,72px) 0}
h1,h2,h3{line-height:1.15;margin:0 0 .6rem}
h1{font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3.2vw,2rem)}
h3{font-size:1.15rem;margin-top:.4rem}
p{margin:.25rem 0 1rem}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.9rem}
.muted{color:var(--muted)}

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(16px,2.5vw,28px);
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; color:var(--brand); text-decoration:none}

.hero{
  position:relative;
  background: linear-gradient(180deg, rgba(10,106,214,.85), rgba(10,106,214,.55)), radial-gradient(60% 60% at 70% 20%, rgba(255,179,87,.5), transparent 60%);
  color:white;
  min-height:64vh; display:grid; place-items:center; text-align:center; isolation:isolate;
}
.hero-inner{padding:clamp(24px,4vw,48px)}
.eyebrow{letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-weight:700}
.accent{color:var(--accent)}
.lead{opacity:.95}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.btn{display:inline-flex; align-items:center; gap:8px; background:white; color:var(--brand-2); border:0; padding:12px 18px; border-radius:999px; font-weight:800; text-decoration:none; box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:white; border:2px solid rgba(255,255,255,.85)}

.wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:120px; display:block}
.wave path{fill:#ffffff}

.grid{display:grid; gap:clamp(16px,3vw,28px); grid-template-columns: 1.2fr 1fr}
.card{background:white; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.ticks{list-style:none; padding-left:0}
.ticks li{padding-left:28px; position:relative; margin:.4rem 0}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:900}

.site-footer{border-top:1px solid #e8ecf5; background:#fafcff}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:12px}

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


/* --- Primary CTA button style --- */
.btn-primary{
  background:#ffb357;
  color:#1a1a1a;
  border-radius:10px;
  font-weight:800;
  padding:12px 18px;
  box-shadow:0 6px 18px rgba(255,179,87,.35);
  border:0;
}
.btn-primary:hover{
  text-decoration:none;
  background:#ffc06f;
  box-shadow:0 8px 22px rgba(255,179,87,.45);
  transform: translateY(-1px);
}

/* --- Fade-in animation for hero content --- */
@keyframes softFadeUp{
  from{opacity:0; transform: translateY(8px)}
  to{opacity:1; transform: translateY(0)}
}
.fade-in{animation: softFadeUp .6s ease both}
.hero-inner h1, .hero-inner .lead, .hero .cta{animation: softFadeUp .7s ease both}
.hero-inner h1{animation-delay:.05s}
.hero-inner .lead{animation-delay:.12s}
.hero .cta{animation-delay:.18s}


/* --- Hero CTA spacing & stacking fix v3 --- */
.hero{ position:relative }
.hero-inner{ position:relative; z-index:2 }
.hero .cta{ margin-top: 28px }
.wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:120px; display:block; z-index:0; pointer-events:none }


/* --- Hero logo placement (v4) --- */
.hero-inner{ position:relative; z-index:2 }
.hero-logo{
  display:block;
  margin: 14px auto 8px;
  width: min(60vw, 260px);
  height: auto;
  max-height: 120px;
  object-fit: contain;
}