/* Salongsplaneraren – förslag till hemsida (2026-11-14). Samma färger som appen: mossa, salvia, puder och papper. */
:root {
  --papper: #F7F4EC;
  --papper-2: #EFEADD;
  --kort: #FFFDF8;
  --mossa: #47553F;
  --mossa-mork: #2C3524;
  --salvia: #A9B79A;
  --salvia-ljus: #DDE3D0;
  --puder: #C79A8E;
  --puder-ljus: #F1E2DC;
  --sand: #E8DCC6;
  --text: #2A3022;
  --text-2: #5E6656;
  --linje: rgba(44, 53, 36, .12);
  --skugga: 0 30px 60px -28px rgba(44, 53, 36, .35), 0 8px 20px -12px rgba(44, 53, 36, .18);
  --rund: 22px;
  --rubrik: 'Cormorant Garamond', Georgia, serif;
  --brod: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --logo: 'Dancing Script', cursive;
  --bredd: 1180px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--papper); color: var(--text); font-family: var(--brod); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--rubrik); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; color: var(--mossa-mork); }
h1 { font-size: clamp(42px, 6.2vw, 76px); }
h2 { font-size: clamp(34px, 4.4vw, 54px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); }
em { font-style: italic; color: var(--puder); }
.ram { width: min(var(--bredd), 100% - 32px); margin-inline: auto; }
.etikett { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--puder); }
.etikett::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.ingress { font-size: clamp(18px, 1.6vw, 20px); color: var(--text-2); max-width: 620px; }
section { position: relative; }
main { overflow-x: clip; } /* färgfälten bakom bilderna får inte göra sidan bredare än skärmen */
.sektion { padding: clamp(72px, 10vw, 128px) 0; }
.sektion-topp { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 720px; }
.sektion-topp.mitten { margin-inline: auto; text-align: center; justify-items: center; }

/* Knappar */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font: 500 16px/1 var(--brod); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease; }
.knapp.fylld { background: var(--mossa); color: var(--papper); box-shadow: 0 12px 26px -12px rgba(71, 85, 63, .7); }
.knapp.fylld:hover { background: var(--mossa-mork); transform: translateY(-2px); }
.knapp.ljus { background: transparent; color: var(--mossa-mork); border-color: rgba(44, 53, 36, .25); }
.knapp.ljus:hover { background: var(--kort); border-color: var(--mossa); }
.knapp:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--puder); outline-offset: 3px; }
.pil { transition: transform .2s ease; }
.knapp:hover .pil { transform: translateX(3px); }

/* Sidhuvud */
.huvud { position: sticky; top: 0; z-index: 50; background: rgba(247, 244, 236, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.huvud.rullad { border-bottom-color: var(--linje); }
.huvud .ram { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.logga { font-family: var(--logo); font-size: 30px; font-weight: 600; color: var(--mossa-mork); text-decoration: none; white-space: nowrap; }
.meny { display: flex; align-items: center; gap: 30px; }
.meny a { font-size: 15px; text-decoration: none; color: var(--text-2); transition: color .2s ease; }
.meny a:hover { color: var(--mossa-mork); }
.meny .knapp { padding: 11px 20px; font-size: 15px; color: var(--papper); }
.meny-knapp { display: none; width: 44px; height: 44px; border: 1px solid var(--linje); border-radius: 12px; background: var(--kort); align-items: center; justify-content: center; cursor: pointer; }
.meny-knapp span, .meny-knapp span::before, .meny-knapp span::after { display: block; width: 18px; height: 1.5px; background: var(--mossa-mork); position: relative; transition: transform .25s ease, background .25s ease; }
.meny-knapp span::before, .meny-knapp span::after { content: ''; position: absolute; left: 0; }
.meny-knapp span::before { top: -6px; }
.meny-knapp span::after { top: 6px; }
.huvud.oppen .meny-knapp span { background: transparent; }
.huvud.oppen .meny-knapp span::before { transform: translateY(6px) rotate(45deg); }
.huvud.oppen .meny-knapp span::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 9vw, 120px); overflow: hidden; }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; }
.hero::before { width: 620px; height: 620px; right: -160px; top: -120px; background: radial-gradient(circle, rgba(199, 154, 142, .38), transparent 70%); }
.hero::after { width: 560px; height: 560px; left: -220px; bottom: -160px; background: radial-gradient(circle, rgba(169, 183, 154, .45), transparent 70%); }
.hero .ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-text { display: grid; gap: 26px; }
.hero h1 em { display: block; }
.hero-knappar { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-punkter { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; font-size: 15px; color: var(--text-2); }
.hero-punkter li { display: flex; align-items: center; gap: 8px; }
.hero-punkter svg { width: 18px; height: 18px; color: var(--mossa); flex: none; }
.hero-bild { position: relative; }
.webblasare { border-radius: 16px; background: var(--kort); box-shadow: var(--skugga); overflow: hidden; border: 1px solid var(--linje); }
.webblasare .list { display: flex; gap: 7px; padding: 12px 16px; background: var(--papper-2); border-bottom: 1px solid var(--linje); }
.webblasare .list i { width: 10px; height: 10px; border-radius: 50%; background: rgba(44, 53, 36, .16); }
.telefon { position: absolute; width: 30%; right: -4%; bottom: -12%; border-radius: 28px; padding: 7px; background: var(--mossa-mork); box-shadow: var(--skugga); }
.telefon img { border-radius: 22px; }
.flytande { position: absolute; left: -6%; top: 58%; display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 14px; background: var(--kort); border-radius: 16px; box-shadow: var(--skugga); font-size: 14px; line-height: 1.35; border: 1px solid var(--linje); animation: sväva 6s ease-in-out infinite; }
.flytande b { display: block; font-weight: 500; color: var(--mossa-mork); }
.flytande span { color: var(--text-2); }
.prick { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--salvia-ljus); color: var(--mossa); flex: none; }
.prick svg { width: 20px; height: 20px; }
@keyframes sväva { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Känns det igen */
.igen { background: var(--mossa-mork); color: var(--papper); }
.igen .ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.igen h2 { color: var(--papper); }
.igen .etikett { color: var(--salvia); }
.lappar { display: grid; gap: 14px; }
.lapp { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; background: rgba(247, 244, 236, .06); border: 1px solid rgba(247, 244, 236, .1); }
.lapp .x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(199, 154, 142, .6); color: var(--puder); display: grid; place-items: center; flex: none; font-size: 15px; }
.lapp b { display: block; font-weight: 500; font-size: 18px; }
.lapp span { color: rgba(247, 244, 236, .66); font-size: 15px; }
.svar { display: grid; gap: 22px; }
.svar p { font-size: clamp(18px, 1.7vw, 21px); color: rgba(247, 244, 236, .8); }
.svar .stor { font-family: var(--rubrik); font-size: clamp(28px, 3vw, 38px); line-height: 1.2; color: var(--papper); }
.svar .stor em { color: var(--puder); }

/* Det som gör den speciell */
.special { display: grid; gap: clamp(72px, 9vw, 120px); }
.rad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.rad.omvand .rad-text { order: 2; }
.rad-text { display: grid; gap: 18px; align-content: start; }
.rad-text .nummer { font-family: var(--rubrik); font-size: 20px; color: var(--puder); font-style: italic; }
.rad-text p { color: var(--text-2); }
.lista { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; }
.lista li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--salvia-ljus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347553F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.rad-bild { position: relative; }
.rad-bild::before { content: ''; position: absolute; inset: 8% -5% -7% 10%; border-radius: 36px; background: var(--puder-ljus); z-index: -1; transform: rotate(-2deg); }
.rad.omvand .rad-bild::before { inset: 8% 10% -7% -5%; background: var(--salvia-ljus); transform: rotate(2deg); }
.dubbel { position: relative; }
.dubbel .webblasare:nth-child(2) { position: absolute; width: 62%; right: -6%; bottom: -16%; }
.citat-bricka { position: absolute; left: -4%; bottom: -8%; background: var(--kort); border-radius: 16px; padding: 14px 18px; box-shadow: var(--skugga); border: 1px solid var(--linje); font-size: 14px; max-width: 250px; }
.citat-bricka b { font-weight: 500; color: var(--mossa-mork); }

/* Allt på ett ställe: rundtur med flikar */
.rundtur { background: linear-gradient(180deg, var(--papper) 0%, var(--papper-2) 100%); }
.flikar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.flik { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linje); background: var(--kort); font: 400 15px/1 var(--brod); color: var(--text-2); cursor: pointer; transition: all .2s ease; }
.flik svg { width: 17px; height: 17px; }
.flik:hover { border-color: var(--salvia); color: var(--mossa-mork); }
.flik[aria-selected="true"] { background: var(--mossa); border-color: var(--mossa); color: var(--papper); }
.flikvy { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.flikvy[hidden] { display: none; }
.flikvy .text { display: grid; gap: 14px; }
.flikvy .text p { color: var(--text-2); }
.flikvy .webblasare { animation: tona .5s ease; }
@keyframes tona { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Fördelar */
.fordelar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fordel { padding: 30px 28px; border-radius: var(--rund); background: var(--kort); border: 1px solid var(--linje); display: grid; gap: 12px; align-content: start; transition: transform .25s ease, box-shadow .25s ease; }
.fordel:hover { transform: translateY(-4px); box-shadow: var(--skugga); }
.fordel .ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--salvia-ljus); color: var(--mossa); }
.fordel:nth-child(3n+2) .ikon { background: var(--puder-ljus); color: #9A5F51; }
.fordel:nth-child(3n) .ikon { background: var(--sand); color: #7A6440; }
.fordel .ikon svg { width: 24px; height: 24px; }
.fordel h3 { font-size: 25px; }
.fordel p { color: var(--text-2); font-size: 16px; }

/* Kom igång */
.steg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: steg; }
.steg li { list-style: none; position: relative; padding: 32px 28px 30px; border-radius: var(--rund); background: var(--kort); border: 1px solid var(--linje); display: grid; gap: 10px; }
.steg li::before { counter-increment: steg; content: counter(steg); display: block; height: 52px; font-family: var(--rubrik); font-size: 54px; line-height: 52px; color: var(--puder); font-style: italic; }
.steg h3 { font-size: 25px; }
.steg p { color: var(--text-2); font-size: 16px; }

/* Trygghet */
.trygg { background: var(--mossa); color: var(--papper); overflow: hidden; }
.trygg::before { content: ''; position: absolute; width: 700px; height: 700px; right: -260px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(169, 183, 154, .35), transparent 70%); }
.trygg h2, .trygg h3 { color: var(--papper); }
.trygg .etikett { color: var(--sand); }
.trygg .ingress { color: rgba(247, 244, 236, .78); }
.trygg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.trygg-kort { padding: 26px 24px; border-radius: var(--rund); background: rgba(247, 244, 236, .07); border: 1px solid rgba(247, 244, 236, .14); display: grid; gap: 10px; align-content: start; }
.trygg-kort svg { width: 26px; height: 26px; color: var(--sand); }
.trygg-kort h3 { font-size: 23px; }
.trygg-kort p { font-size: 15px; color: rgba(247, 244, 236, .74); }

/* Priser */
.priser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pris { padding: 34px 30px; border-radius: 26px; background: var(--kort); border: 1px solid var(--linje); display: flex; flex-direction: column; gap: 18px; position: relative; }
.pris .smatt { margin-top: auto; }
.pris.utvald { background: var(--mossa-mork); color: var(--papper); border-color: var(--mossa-mork); box-shadow: var(--skugga); transform: translateY(-10px); }
.pris.utvald h3, .pris.utvald .belopp { color: var(--papper); }
.pris .bricka { position: absolute; top: -13px; left: 30px; background: var(--puder); color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.pris .for { font-size: 15px; color: var(--text-2); }
.pris.utvald .for, .pris.utvald .lista li, .pris.utvald .smatt { color: rgba(247, 244, 236, .78); }
.belopp { font-family: var(--rubrik); font-size: 58px; line-height: 1; color: var(--mossa-mork); }
.belopp small { font-family: var(--brod); font-size: 15px; color: var(--text-2); margin-left: 4px; }
.pris.utvald .belopp small { color: rgba(247, 244, 236, .7); }
.pris .lista li { font-size: 15px; }
.pris.utvald .lista li::before { background-color: rgba(247, 244, 236, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F4EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.pris .knapp { width: 100%; }
.pris.utvald .knapp.fylld { background: var(--papper); color: var(--mossa-mork); }
.smatt { font-size: 13px; color: var(--text-2); }
.pris-not { text-align: center; margin-top: 28px; }

/* Frågor */
.fragor { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
details { border-radius: 18px; background: var(--kort); border: 1px solid var(--linje); padding: 0 24px; transition: background .2s ease; }
details[open] { background: #fff; }
summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; font-weight: 500; color: var(--mossa-mork); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: var(--rubrik); font-size: 30px; line-height: 1; color: var(--puder); transition: transform .25s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 22px; color: var(--text-2); }

/* Avslutning */
.slut { text-align: center; padding: clamp(80px, 10vw, 130px) 0; background: radial-gradient(900px 500px at 50% 0%, var(--puder-ljus), transparent 70%), var(--papper); }
.slut .ram { display: grid; gap: 24px; justify-items: center; }
.slut .logga { font-size: clamp(44px, 6vw, 72px); }
.slut p { max-width: 560px; color: var(--text-2); font-size: 19px; }
.fot { background: var(--mossa-mork); color: rgba(247, 244, 236, .7); padding: 44px 0; font-size: 14px; }
.fot .ram { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; }
.fot .logga { color: var(--papper); font-size: 26px; }
.fot nav { display: flex; flex-wrap: wrap; gap: 22px; }
.fot a { text-decoration: none; }
.fot a:hover { color: var(--papper); }

/* Visas när man rullar */
.visas { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.visas.syns { opacity: 1; transform: none; }

/* Mindre skärmar */
@media (max-width: 980px) {
  .meny { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; background: var(--papper); border-bottom: 1px solid var(--linje); transform: translateY(-120%); transition: transform .3s ease; z-index: -1; }
  .meny a { padding: 14px 4px; border-bottom: 1px solid var(--linje); font-size: 17px; }
  .meny .knapp { margin-top: 14px; border-bottom: 0; justify-content: center; }
  .huvud.oppen .meny { transform: none; }
  .meny-knapp { display: inline-flex; }
  .hero .ram, .igen .ram, .rad, .flikvy { grid-template-columns: minmax(0, 1fr); }
  .rad.omvand .rad-text { order: 0; }
  .hero-bild { margin: 0 4% 40px 0; }
  .fordelar, .trygg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steg, .priser { grid-template-columns: minmax(0, 1fr); }
  .pris.utvald { transform: none; }
  .priser { max-width: 480px; margin-inline: auto; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .fordelar, .trygg-grid { grid-template-columns: minmax(0, 1fr); }
  .flytande { display: none; }
  .telefon { width: 34%; right: -2%; }
  .dubbel .webblasare:nth-child(2) { position: relative; width: 100%; right: 0; bottom: 0; margin-top: 14px; }
  .citat-bricka { position: relative; left: 0; bottom: 0; margin-top: 14px; max-width: none; }
  .flikar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .flik { flex: none; }
  .fot .ram { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .visas { opacity: 1; transform: none; }
}