/* ===================================================================
   Resolveit — Tema (ryddet)
   - Hero og «tjeneste-bobler» på separate lag
   - Stabil typografi og spacing
   =================================================================== */

/* ------------------------ Variabler ------------------------ */
:root{
  --bg:#f6f9fc;
  --fg:#0c1b27;
  --muted:#4f5b66;
  --accent:#2f8cff;
  --stroke:#e6edf3;
  --radius:14px;

  --bubble:rgba(12,27,39,.05);
  --bubble2:rgba(12,27,39,.07);

  /* hvor mye seksjonen under skal overlappe hero */
  --hero-overhang: 64px;
}

/* ------------------------ Base ------------------------ */
html,body{height:100%}
body{
  background: radial-gradient(700px 340px at 80% -10%, #dff0ff 0%, transparent 50%), var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ------------------------ Navbar ------------------------ */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--stroke);
  padding-top:.8rem; padding-bottom:.8rem;
}
.navbar-brand img{height:40px; width:auto; object-fit:contain}
.navbar .nav-link{
  color:#1b2a38!important;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.2px;
  padding:.6rem .8rem;
  transition:color .15s ease;
}
.navbar .nav-link:hover{color:var(--accent)!important}
.btn-primary{background:var(--accent);border-color:var(--accent)}

/* ------------------------ Chips / Kort ------------------------ */
.chip{
  display:inline-block; background:#fff;
  border:1px solid var(--stroke); border-radius:999px;
  padding:.35rem .75rem; color:#2b4456; font-size:.9rem;
}
.bubble-card{
  position:relative; background:#fff;
  border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(12,27,39,.08);
}
.bubble-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(140px 70px at 12% 18%, var(--bubble2), transparent 60%),
    radial-gradient(160px 70px at 88% 14%, var(--bubble), transparent 60%),
    radial-gradient(130px 90px at 50% 120%, var(--bubble), transparent 60%);
}
.glass{
  background:#fff; border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:0 6px 28px rgba(14,30,37,.08)
}
.subtle{color:var(--muted)}
.footer{border-top:1px solid var(--stroke); color:#5b6772}

/* ------------------------ HERO ------------------------ */
.hero{
  position:relative;
  overflow:hidden;
  padding-top:96px;
  padding-bottom: calc(220px + var(--hero-overhang));
  z-index:0;
}
.hero.hero--bubbles::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(220px 110px at 14% 18%, var(--bubble2), transparent 60%),
    radial-gradient(260px 120px at 86% 12%, var(--bubble), transparent 60%),
    radial-gradient(220px 120px at 50% 120%, var(--bubble), transparent 60%);
}
.hero.hero--parallax{
  background-image: var(--hero-img);
  background-position: var(--hero-pos, 50% 35%);
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width:992px){
  .hero.hero--parallax{ background-attachment: fixed; }
}
.hero .hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.80) 26%,
    rgba(255,255,255,.62) 55%,
    rgba(255,255,255,.78) 85%,
    rgba(255,255,255,.92) 100%
  );
}
.hero > .container{ position:relative; z-index:2; }
.hero .hero-text{
  display:inline-block;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:14px;
  padding:18px 22px;
  box-shadow:0 8px 30px rgba(15,25,40,.10);
  max-width:100%;
}
.hero .display-5{font-size:2.35rem; line-height:1.15;}
.hero .lead{font-size:1.05rem;}
@media (min-width:992px){
  .hero{padding-top:108px; padding-bottom: calc(260px + var(--hero-overhang));}
  .hero .display-5{font-size:2.6rem;}
}

/* ------------------------ SEKSJONEN ETTER HERO ------------------------ */
.section--after-hero{
  position:relative;
  z-index:4;
  margin-top: calc(-1 * var(--hero-overhang));
  padding-top:8px;
  padding-bottom:18px;
}
@media (max-width:991.98px){
  :root{ --hero-overhang: 40px; }
}

.section--after-hero .row{
  --bs-gutter-x:1.1rem;
  --bs-gutter-y:1.1rem;
}
.section--after-hero .bubble-card{ padding:1rem 1.1rem; }

/* ------------------------ Småjusteringer ------------------------ */
.table thead th{border-bottom:2px solid var(--stroke)}
.table-primary th{background:#eaf3ff}

@media (min-width:992px){
  .navbar .nav-link{font-size:1.06rem}
}
html{ font-size:13px; }
@media (min-width:1200px){
  html{ font-size:13.25px; }
}

/* standard: ingen overlap */
.section--after-hero{
  position:relative;
  z-index:4;
  margin-top: 0;
  padding-top:8px;
  padding-bottom:18px;
}

/* kun når seksjonen kommer DIREKTE etter en hero */
.hero + .section--after-hero{
  margin-top: calc(-1 * var(--hero-overhang));
}


:root{
  /* ... dine variabler ... */
  --hero-overhang: 0px;  /* var 64px tidligere */
}
@media (max-width:991.98px){
  :root{ --hero-overhang: 0px; } /* behold 0 på mobil også */
}