/* =================================================================
   Rosa Fix – stilmall
   -----------------------------------------------------------------
   ÄNDRA FÄRGER & TYPSNITT HÄR (variablerna nedan styr hela sajten).
   Vill du byta rosa-nyans? Ändra --rosa och --rosa-mork.
   ================================================================= */

:root {
  --rosa:        #e64980;   /* huvudrosa */
  --rosa-mork:   #c2255c;   /* mörkare rosa (knappar/hover) */
  --rosa-ljus:   #ffe3ec;   /* ljus rosa (bakgrundsband) */
  --rosa-bg:     #fff5f8;   /* sidbakgrund */
  --plommon:     #a61e4d;   /* djup accent */
  --guld:        #f6b73c;   /* liten varm accent */
  --text:        #3d2b33;   /* brödtext */
  --text-mjuk:   #7a5c68;   /* dämpad text */
  --vit:         #ffffff;
  --skugga:      0 10px 30px rgba(198, 37, 92, .12);
  --skugga-mjuk: 0 4px 14px rgba(198, 37, 92, .10);
  --radie:       18px;
  --max:         1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--rosa-bg);
  line-height: 1.65;
  font-size: 18px;
}

h1, h2, h3, .logo {
  font-family: "Quicksand", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--plommon);
}

h2 { font-size: 2rem; margin: 0 0 .4em; }
h3 { font-size: 1.25rem; margin: 0 0 .3em; color: var(--rosa-mork); }

a { color: var(--rosa-mork); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

section { padding: 72px 0; }
.center { text-align: center; }
.muted  { color: var(--text-mjuk); }

/* ---------- Knappar ---------- */
.btn {
  display: inline-block;
  background: var(--rosa);
  color: var(--vit);
  text-decoration: none;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow: var(--skugga-mjuk);
  transition: transform .15s ease, background .15s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover { background: var(--rosa-mork); transform: translateY(-2px); }
.btn.ghost {
  background: var(--vit);
  color: var(--rosa-mork);
  border: 2px solid var(--rosa);
}
.btn.ghost:hover { background: var(--rosa-ljus); }

/* ---------- Header / nav ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 245, 248, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rosa-ljus);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: var(--max); margin: 0 auto;
}
.logo { font-size: 1.5rem; color: var(--rosa-mork); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text); font-weight: 600; }
.nav-links a:hover { color: var(--rosa-mork); }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 400px at 80% -10%, var(--rosa-ljus), transparent),
    linear-gradient(180deg, #fff 0%, var(--rosa-bg) 100%);
  padding: 64px 0 40px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }
.hero h1 { font-size: 3.4rem; margin: 0 0 .1em; color: var(--plommon); }
.hero .tagline { font-size: 1.5rem; color: var(--rosa-mork); font-weight: 700; margin: 0 0 .6em; }
.hero p.lead { font-size: 1.15rem; max-width: 32em; margin: 0 auto 1.4em; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .hero .cta-row { justify-content: center; } }
.trust {
  margin-top: 22px; display: inline-flex; gap: 10px; align-items: center;
  background: var(--vit); padding: 10px 18px; border-radius: 999px;
  box-shadow: var(--skugga-mjuk); font-weight: 700; color: var(--plommon);
}
.hero-art { display: flex; justify-content: center; }
.hero-art svg { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(var(--skugga)); }

/* ---------- Tjänstekort ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--vit); border-radius: var(--radie); padding: 26px;
  box-shadow: var(--skugga-mjuk); border: 1px solid var(--rosa-ljus);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--skugga); }
.card .ikon { font-size: 2.2rem; margin-bottom: 8px; }
.badge {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px; margin-top: 10px;
}
.badge.rot { background: #e7f5ff; color: #1971c2; }
.badge.rut { background: #fff0f6; color: var(--rosa-mork); }
.badge.bada { background: #fff9db; color: #b08900; }

/* ---------- Trygg hjälp för äldre ---------- */
.aldre-card {
  background: var(--vit); border-radius: var(--radie); box-shadow: var(--skugga);
  border: 1px solid var(--rosa-ljus); padding: 40px 34px;
}
@media (max-width: 600px) { .aldre-card { padding: 28px 20px; } }
.pill-tag {
  display: inline-block; background: var(--rosa-ljus); color: var(--rosa-mork);
  font-weight: 800; font-size: .8rem; letter-spacing: .03em;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 12px;
}
.aldre-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 30px 0 6px;
}
@media (max-width: 860px) { .aldre-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .aldre-grid { grid-template-columns: 1fr; } }
.aldre-kol h3 { margin-bottom: 8px; }
.aldre-kol ul { margin: 0; padding-left: 18px; }
.aldre-kol li { margin-bottom: 5px; }
.trygg-chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px;
}
.trygg-chips span {
  background: var(--rosa-ljus); color: var(--plommon); font-weight: 700;
  padding: 8px 16px; border-radius: 999px; font-size: .9rem;
}

/* ---------- ROT/RUT-band ---------- */
.band { background: var(--rosa-ljus); }
.rotrut {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px;
}
@media (max-width: 700px) { .rotrut { grid-template-columns: 1fr; } }
.rotrut .box {
  background: var(--vit); border-radius: var(--radie); padding: 26px; box-shadow: var(--skugga-mjuk);
}
.rotrut .pct { font-size: 2.6rem; font-weight: 800; color: var(--rosa); font-family: "Quicksand", sans-serif; }

/* ---------- Om mig ---------- */
.om-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { .om-grid { grid-template-columns: 1fr; } }
.foto-platshallare {
  background: linear-gradient(135deg, var(--rosa-ljus), #fff);
  border: 2px dashed var(--rosa); border-radius: var(--radie);
  aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--text-mjuk); padding: 20px; font-weight: 600;
}
.om-foto {
  width: 100%; height: auto; display: block;
  border-radius: var(--radie); box-shadow: var(--skugga);
}

/* ---------- Galleri ---------- */
.galleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 820px) { .galleri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .galleri { grid-template-columns: 1fr; } }
.galleri .ruta {
  position: relative; margin: 0; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4/3; box-shadow: var(--skugga-mjuk); border: 1px solid var(--rosa-ljus);
}
.galleri .ruta img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.galleri .ruta:hover img { transform: scale(1.05); }
.galleri .ruta figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(166, 30, 77, .85));
  color: #fff; font-weight: 700; font-size: .95rem; text-align: left;
  padding: 26px 14px 12px;
}

/* ---------- Kontakt ---------- */
.kontakt { background: linear-gradient(180deg, var(--rosa-bg), var(--rosa-ljus)); }
.form-card {
  background: var(--vit); border-radius: var(--radie); padding: 30px; box-shadow: var(--skugga);
  max-width: 640px; margin: 24px auto 0;
}
.form-card label { display: block; font-weight: 700; margin: 14px 0 6px; color: var(--plommon); }
.form-card input, .form-card textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--rosa-ljus); border-radius: 12px;
  font: inherit; background: #fffafc;
}
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--rosa); border-color: var(--rosa); }
.kontakt-direkt { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.kontakt-direkt a {
  background: var(--vit); padding: 12px 20px; border-radius: 999px; text-decoration: none;
  font-weight: 700; box-shadow: var(--skugga-mjuk); color: var(--plommon);
}

/* ---------- Footer ---------- */
footer { background: var(--plommon); color: #ffd9e6; padding: 40px 0; text-align: center; }
footer a { color: #fff; }
footer .fskatt {
  display: inline-block; background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 999px;
  font-weight: 700; margin-bottom: 12px;
}

.section-intro { max-width: 40em; margin: 0 auto 8px; }