:root { --accent:#1f7a3f; }

/* ---------- Knappar (enhetliga) ---------- */
.btn{
  display:inline-block; border-radius:1rem; padding:.6rem 1rem; font-size:.9rem; border:1px solid #e5e5e5; background:#fff; color:#111;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.10); border-color:var(--accent); }
.btn-primary{ background:#fff; color:#111; border-color:#fff; }
.btn-ghost{ background:transparent; color:#fff; border-color:#fff; }
.btn-ghost:hover{ background:#fff; color:#111; }
.btn-primary-dark{ background:#fff; color:#111; border-color:#fff; }
.btn-ghost-dark{ background:transparent; color:#fff; border-color:#fff; }
.btn-ghost-dark:hover{ background:#fff; color:#111; }
.btn-outline-accent{
  background:#fff; color:var(--accent); border-color:var(--accent);
}
.btn-outline-accent:hover{
  background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 10px 24px rgba(31,122,63,.2);
}

/* Globala transitions */
a, button, .rounded-2xl, .rounded-xl { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
a:hover { color: var(--accent); }
.rounded-2xl:hover, .rounded-xl:hover { box-shadow: 0 6px 16px rgba(0,0,0,.06); border-color: var(--accent); }

/* Subtil bild-zoom */
.hover-zoom img { transition: transform .35s ease; will-change: transform; }
.hover-zoom:hover img { transform: scale(1.03); }

/* Projekt-kort badge och info-knapp */
.info-dot{
  width:28px;height:28px;border-radius:9999px;border:1px solid rgba(255,255,255,.85);
  color:#fff;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;transition:all .2s ease;
}
.info-dot:hover{ background:var(--accent); border-color:var(--accent); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.badge-float{ opacity:.96; transition:opacity .25s ease, transform .25s ease; }

/* Accent-chip */
.chip-accent{
  display:inline-block; padding:.2rem .55rem; font-size:.75rem; border-radius:.6rem;
  background:rgba(31,122,63,.08); color:var(--accent); border:1px solid rgba(31,122,63,.25);
}

/* Modaler – fade-in + accentkant */
.project-modal .modal-backdrop{ opacity:0; transition:opacity .15s ease; }
.project-modal .modal-panel{
  opacity:0; transform:translate(-50%,-56%);
  transition:opacity .15s ease, transform .15s ease;
  border-top:4px solid var(--accent);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.project-modal.show .modal-backdrop{ opacity:1; }
.project-modal.show .modal-panel{ opacity:1; transform:translate(-50%,-50%); }
.modal-close{ transition: all .18s ease; border-color:#e7e7e7; background:#fff; }
.modal-close:hover{ color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 6px 16px rgba(31,122,63,.25); }

/* -------- Reviews: avatar + stjärnor på rad -------- */
.rv-track{ position:relative; height:190px; }
@media (min-width:768px){ .rv-track{ height:190px; } }

.rv-slide{
  position:absolute; inset:0; opacity:0; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  display:flex; flex-direction:column; gap:.5rem;
}
.rv-slide.active{ opacity:1; transform:translateY(0); }

.rv-header{ display:flex; align-items:center; gap:.6rem; }
.rv-ava{
  width:40px;height:40px; border-radius:9999px; object-fit:cover;
  border:2px solid #fff; outline:2px solid var(--accent);
}
.rv-name{ font-weight:600; line-height:1.1; }
.rv-sub{ font-size:.78rem; color:#cfcfcf; margin-top:.05rem; }

.rv-stars{ display:flex; align-items:center; gap:4px; }
.rv-stars .star{ width:16px; height:16px; fill:var(--accent); opacity:.95; }
.rv-stars .star.half{ filter:grayscale(30%); opacity:.7; }

.rv-quote{ color:#eaeaea; line-height:1.5; font-size:.95rem; }

/* Sociala ikoner i CTA */
.sm-icons .sm-btn{
  width:38px;height:38px;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.25); color:#fff; transition:all .2s ease;
}
.sm-icons .sm-btn:hover{ background:#fff; color:#111; border-color:#fff; }
.sm-ico{ width:18px; height:18px; fill:currentColor; }