/* GRÄDDVIT — varm, dämpad off-white (ej stalltvitt), grönfria neutrala ink-
   accenter, större vita 3D-kort som lyfter från den krämiga botten.
   Läggs OVANPÅ saljsida.css (basen är orörd). */

:root {
  --papper: #f7f5ef;   /* dämpad gräddvit botten (ej #fff) */
  --sand:   #efebe1;   /* varannan sektion, en aning djupare */
  --sand2:  #e6e1d5;
  --svart:  #1b1d1f;   /* rubriker + ink-accent */
  --text:   #4a4d50;
  --svag:   #7d817f;
  --linje:  #e6e1d5;
  --skugga: 0 22px 50px rgba(35,30,20,.12);
}

body { background: var(--papper); color: var(--text); }
::selection { background: #e7e0cf; color: #1b1d1f; }
a { color: #1b1d1f; }

/* ── Nav (gräddvit, genomskinlig) ───────────────────────────────────────── */
nav { background: rgba(247,245,239,.88); }
nav.skugga { border-bottom-color: var(--linje); box-shadow: 0 6px 24px rgba(35,30,20,.06); }
nav .lankar a { color: #33363a; }
nav .lankar a:hover { color: #000; }
.logo { color: #1b1d1f; }
.logo .mark { background: #1b1d1f; }           /* ink-chip, ej grön */
.logo .mark svg { stroke: #f7f5ef; }

/* ── Accenter: grönt ut → ink/neutralt in ───────────────────────────────── */
.over { color: #948f86; }
.strec { background: #1b1d1f; }

/* ── Knappar: ink-knapp på gräddvit ─────────────────────────────────────── */
.knapp.primar, nav .lankar .cta { background: #1b1d1f; color: #f7f5ef; }
.knapp.primar:hover, nav .lankar .cta:hover { background: #33363a; }
.knapp.sekundar { color: #1b1d1f; border-color: #cec8ba; }
.knapp.sekundar:hover { border-color: #1b1d1f; background: transparent; }
.knapp.mork { background: #1b1d1f; color: #f7f5ef; }
.knapp.mork:hover { background: #33363a; }

/* Hero ligger på mörkt foto → där ska primärknapp + bockar vara LJUSA */
.herofoto .knapp.primar { background: #f7f5ef; color: #1b1d1f; }
.herofoto .knapp.primar:hover { background: #fff; }
.herofoto .lofte span::before { color: #e9edf0; }

/* ── Sektioner ──────────────────────────────────────────────────────────── */
section.sand { background: var(--sand); }

/* ── Stora 3D-kort: vita, upphöjda på den krämiga botten ─────────────────── */
.storruta, .svarkort, .branschkort, #allt .kort {
  background: #ffffff;
  border: 1px solid #ece7db;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(40,34,22,.10), 0 2px 6px rgba(40,34,22,.05);
}
.storruta:hover, .svarkort:hover, .branschkort:hover, #allt .kort:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 66px rgba(40,34,22,.16), 0 3px 8px rgba(40,34,22,.06);
  border-color: #e2dccc;
}

.storrutor, .svar3, .branscher { gap: 26px; }
.storruta { padding: 44px 36px 46px; }
.storruta .ikon { font-size: 50px; margin-bottom: 24px; filter: drop-shadow(0 8px 14px rgba(40,34,22,.14)); }
.storruta h3 { font-size: 22px; }

.svarkort { padding: 42px 36px 42px; }
.svarkort .q-ik { font-size: 42px; filter: drop-shadow(0 8px 14px rgba(40,34,22,.14)); }
.svarkort .stort { font-size: 35px; color: #1b1d1f; }
.svarkort .lank, .storruta .lank, .branschkort .lank { color: #1b1d1f; }
.svarkort .lank::after, .branschkort .lank::after { color: #948f86; }

/* ── Bransch-boxar: mjuka varma toppar (ej mint) + neutrala taggar ───────── */
.branschkort .topp { padding: 52px 30px; font-size: 68px; }
.branschkort .topp.mint  { background: #efe9dc; }
.branschkort .topp.sandf { background: #eae3d5; }
.branschkort .topp.lera  { background: #ece2d2; }
.branschkort .kropp { padding: 30px 30px 34px; }
.branschkort .taggar span { color: #6d6255; background: #f1ece0; }

/* ── Slutruta: varm dämpad panel (ej mint) ──────────────────────────────── */
.slutcta { background: #ebe4d6; }
.slutcta h2 { color: #1b1d1f; }
.slutcta .demorad .knapp { background: rgba(255,255,255,.78); color: #1b1d1f; border-color: transparent; }
.slutcta .demorad .knapp:hover { background: #fff; }

/* ── Hero: starkare fond-scrim (text läsbar över ljusa delar av fotot) +
   röd accent på nyckelorden (Johnnys förslag att testa) ─────────────────── */
.herofoto::before {
  background: linear-gradient(100deg,
    rgba(13,15,17,.95) 0%, rgba(13,15,17,.86) 44%, rgba(13,15,17,.54) 72%, rgba(13,15,17,.20) 100%);
}
.herofoto p.under { color: #edf1f3; }
.herofoto p.under b { color: #ff6f52; }
.herofoto .smula { color: #e6ebee; }
/* Grönfritt även i hero: produktpanelen + progress-pricken neutrala */
.herofoto .scen3d { background: #eae8e2; }
.herofoto .prickrad button.aktiv::after { background: #1b1d1f; }

/* ══ Undersidor (Funktioner / Priser / Kom igång): grönfritt + samma stil ══ */
/* Paneler & prisnivåer som vita upphöjda kort */
.niva, .hardpanel, .kalkyl .panel, .alltingar, .stripeinfo {
  background: #fff; border-color: #ece7db; }
/* Funktionskortens ikoner (var mint/grönt) */
.kort .ikon { background: #f1ece0; }
.kort .ikon svg { stroke: #1b1d1f; }
/* Bock-punkter i varv/hårdvara → ink */
.varv .punkter li::before, .hardpunkter li::before { border-color: #1b1d1f; }
/* Fond-plattor bakom produktbilder → varma neutrala (ej mint/gul) */
.fond.mint  { background: #eae3d5; }
.fond.sandf { background: #ece6da; }
.fond.lera  { background: #e9e1d2; }
.fond.gul   { background: #efe6d0; }
.bildram { background: #eae3d5; }
/* Priser */
.band2 { background: #1b1d1f; color: #f7f5ef; }
.niva .procent, .niva .bindnot { color: #7d817f; }
.pill.aktiv { background: #1b1d1f; border-color: #1b1d1f; color: #fff; }
.kalkyl input:focus, .kalkyl select:focus { border-color: #1b1d1f; }
/* Kalkylatorns resultatruta: mörk ink-panel, röd sifferaccent (ej grön) */
.resultat { background: #1b1d1f; }
.resultat .stor, .resultat .rad b.basta { color: #ff6f52; }
/* Sponsband + steg-nummer */
.sponsband { background: #f1ece0; color: #4a4d50; }
.sponsband b { color: #1b1d1f; }
.st::before { color: #b0604a; }