/* Designspråk 2026-07-28: LJUST & LUFTIGT. Vitt papper, varm sand som
       vilorum, mintgrönt som enda accent och stora svarta rubriker. En tanke
       per sektion, gott om luft omkring, produkten visad i riktiga skärmbilder
       på färgade fonder i stället för glödande mörker.
       Rörelse finns kvar men är dämpad, och stängs av vid prefers-reduced-motion. */
    :root {
      --papper: #ffffff;
      --sand: #f4f3ef;
      --sand2: #eceae3;
      --svart: #0c0e0d;
      --text: #454b49;
      --svag: #767d7a;
      --linje: #e3e1da;
      --mint: #7fe3b0;         /* fyllnad — alltid med svart text ovanpå */
      --mint-ljus: #d9f6e7;    /* fond bakom produktbilder */
      --gron: #0b7a4e;         /* text/länkar — klarar kontrastkravet */
      --gul: #ffd979;
      --lera: #e5ded4;
      --skugga: 0 18px 46px rgba(12, 20, 16, .10);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
           color: var(--text); background: var(--papper); line-height: 1.65;
           font-size: 17px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
    h1, h2, h3, .logo { font-family: 'Space Grotesk', 'Inter', sans-serif;
           color: var(--svart); letter-spacing: -.035em; line-height: 1.05; }
    a { color: var(--gron); text-decoration: none; }
    img { max-width: 100%; height: auto; display: block; }
    ::selection { background: var(--mint); color: #06140d; }
    .yta { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
    .smal { max-width: 720px; }

    /* ── Toppband + navigation ───────────────────────────────────────────── */
    .toppband { background: var(--svart); color: #cfd6d2; font-size: 13.5px; }
    .toppband .yta { display: flex; justify-content: space-between; align-items: center;
                     gap: 16px; height: 40px; }
    .toppband b { color: #fff; font-weight: 600; }
    .toppband a { color: #cfd6d2; }
    .toppband a:hover { color: #fff; }
    @media (max-width: 760px) { .toppband .hoger { display: none; } }

    nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
          backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
          border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
    nav.skugga { border-bottom-color: var(--linje); box-shadow: 0 6px 24px rgba(12,20,16,.05); }
    nav .yta { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 20px; }
    .logo { font-weight: 700; font-size: 21px; display: flex; align-items: center; gap: 11px; }
    .logo .mark { width: 34px; height: 34px; border-radius: 11px; background: var(--mint);
                  display: flex; align-items: center; justify-content: center; }
    .logo .mark svg { width: 18px; height: 18px; stroke: #06301d; stroke-width: 2.2; fill: none;
                      stroke-linecap: round; stroke-linejoin: round; }
    nav .lankar { display: flex; gap: 30px; font-size: 15.5px; font-weight: 500; align-items: center; }
    nav .lankar a { color: #2a312e; }
    nav .lankar a:hover { color: #000; }
    nav .lankar .cta { background: var(--mint); color: #06301d; padding: 13px 26px; white-space: nowrap;
                       border-radius: 999px; font-weight: 700; transition: transform .15s, background .2s; }
    nav .lankar .cta:hover { background: #6ddca4; transform: translateY(-1px); }
    @media (max-width: 1000px) { nav .lankar a:not(.cta) { display: none; } nav .yta { height: 66px; } }
    /* Under 700px får toppbandet inte plats på en rad — då bryter det och
       knuffar in navigationen i sig själv. Bort med det; mejladressen står
       ändå i sidfoten. */
    @media (max-width: 700px) {
      .toppband { display: none; }
      nav .lankar .cta { padding: 11px 18px; font-size: 14.5px; }
      .logo { font-size: 18px; }
    }

    /* ── Knappar ─────────────────────────────────────────────────────────── */
    .knapprad { display: flex; gap: 14px; flex-wrap: wrap; }
    .knapp { display: inline-block; padding: 16px 32px; border-radius: 999px; font-weight: 700;
             font-size: 16.5px; transition: transform .15s, background .2s, border-color .2s; }
    .knapp:hover { transform: translateY(-2px); }
    .knapp.primar { background: var(--mint); color: #06301d; }
    .knapp.primar:hover { background: #6ddca4; }
    .knapp.sekundar { background: transparent; color: var(--svart); border: 1.5px solid #cdcbc4; }
    .knapp.sekundar:hover { border-color: var(--svart); }
    .knapp.mork { background: var(--svart); color: #fff; }
    .knapp.mork:hover { background: #23302a; }

    /* ── Sektioner ───────────────────────────────────────────────────────── */
    section { padding: 116px 0; position: relative; }
    section.sand { background: var(--sand); }
    .over { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            color: var(--gron); margin-bottom: 22px; }
    h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 700; }
    h3 { font-size: 21px; font-weight: 700; }
    .strec { width: 148px; height: 5px; border-radius: 4px; background: var(--mint); margin: 30px 0; }
    .rubrikblock { max-width: 760px; margin-bottom: 62px; }
    .rubrikblock p { font-size: 18px; max-width: 620px; }
    .rubrikblock p b { color: var(--svart); font-weight: 600; }

    /* ── Hero ────────────────────────────────────────────────────────────── */
    .hero { padding: 0; overflow: hidden; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }

    /* Miljöfoto-hero: stort foto med rubriken ovanpå (kassaregister-greppet).
       Fotot ligger bakom hero-grid; texten blir ljus, produktmockupen sitter
       kvar som ett ljust "produktkort" på fotot. nyttor/band/siffror ligger
       kvar under, på ljus botten. */
    .herofoto { position: relative;
      background: #141618 url('/bilder/hero-miljo.jpg') center 40% / cover no-repeat; overflow: hidden; }
    .herofoto::before { content: ''; position: absolute; inset: 0; z-index: 1; background:
      linear-gradient(102deg, rgba(20,22,25,.90) 0%, rgba(20,22,25,.75) 42%, rgba(20,22,25,.46) 74%, rgba(20,22,25,.22) 100%); }
    .herofoto .hero-grid { position: relative; z-index: 2; padding: 94px 0 90px; }
    .herofoto .smula { color: #d7e2dc; }
    .herofoto .smula b, .herofoto h1, .herofoto p.under b, .herofoto .skarmtext h3 { color: #fff; }
    .herofoto h1 em { color: var(--mint); }
    .herofoto p.under { color: #e8efeb; }
    .herofoto .lofte { color: #cdd8d2; }
    .herofoto .lofte span::before { color: var(--mint); }
    .herofoto .skarmtext p { color: #c3ceca; }
    .herofoto h1, .herofoto p.under, .herofoto .smula, .herofoto .skarmtext, .herofoto .lofte {
      text-shadow: 0 1px 22px rgba(4,12,8,.55), 0 1px 4px rgba(4,12,8,.38); }
    .herofoto .knapp.sekundar { color: #fff; border-color: rgba(255,255,255,.55); }
    .herofoto .knapp.sekundar:hover { border-color: #fff; background: rgba(255,255,255,.10); }
    @media (max-width: 980px) { .herofoto .hero-grid { padding: 62px 0 70px; } }
    .smula { font-size: 15px; color: var(--svag); margin-bottom: 26px; }
    .smula b { color: var(--svart); font-weight: 600; }
    .hero h1 { font-size: clamp(42px, 6.4vw, 88px); font-weight: 700; letter-spacing: -.045em; }
    .hero h1 em { font-style: normal; color: var(--gron); }
    .hero p.under { font-size: 18.5px; margin: 30px 0 36px; max-width: 500px; }
    .hero p.under b { color: var(--svart); font-weight: 600; }
    .lofte { display: flex; gap: 8px 26px; flex-wrap: wrap; margin-top: 34px;
             font-size: 14.5px; font-weight: 600; color: var(--svag); }
    .lofte span::before { content: '✓ '; color: var(--gron); font-weight: 800; }
    .entre { opacity: 0; transform: translateY(16px); animation: upp .8s cubic-bezier(.2,.7,.3,1) forwards;
             animation-delay: var(--d, 0s); }
    @keyframes upp { to { opacity: 1; transform: none; } }

    /* Produktfond: skärmen står på en färgad platta, precis som en riktig
       produktbild — inte en glödande låda i mörkret. */
    .scen3d { background: var(--mint-ljus); border-radius: 18px; padding: 46px 40px;
              position: relative; overflow: hidden; }
    .scen3d::after { content: ''; position: absolute; inset: auto -10% -46% -10%; height: 55%;
                     background: rgba(255,255,255,.5); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
    .enhet3d { position: relative; z-index: 2;
               transform: rotate(-1.4deg) rotateY(calc(var(--ry, -4) * 1deg)) rotateX(calc(var(--rx, 2) * 1deg));
               transform-style: preserve-3d; transition: transform .3s ease-out; }
    .platta { border-radius: 16px; padding: 10px; background: #14181a;
              box-shadow: 0 26px 60px rgba(8, 24, 18, .28); }
    .skarmar { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 2000 / 1328; background: #eef1f6; }
    .skarmar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                   opacity: 0; transition: opacity .7s ease; }
    .skarmar img.aktiv { opacity: 1; }
    .mobil3d { position: absolute; right: -16px; bottom: -34px; width: 22%; z-index: 3;
               border-radius: 12px; overflow: hidden; border: 5px solid #14181a;
               box-shadow: 0 18px 40px rgba(8, 24, 18, .3); background: #14181a; }
    /* Svävkorten hänger UTANFÖR fonden (i .prodkol, inte i .enhet3d) — annars
       lägger de sig mitt över skärmbilden och döljer själva produkten. */
    .prodkol { position: relative; }
    .svavkort { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
                background: #fff; border-radius: 13px; padding: 11px 14px; font-size: 13px;
                font-weight: 600; color: var(--svart); box-shadow: var(--skugga); max-width: 216px; }
    .svavkort small { display: block; font-weight: 500; color: var(--svag); font-size: 11.5px; }
    .svavkort .ik { font-size: 18px; }
    .svav1 { left: -62px; top: 12%; animation: sväv 7s ease-in-out infinite; }
    .svav2 { left: -46px; top: 60%; animation: sväv 9s ease-in-out infinite reverse; }
    @media (max-width: 1180px) { .svavkort { display: none; } }
    @keyframes sväv { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
    .glod { display: none; }
    .skarmtext { margin-top: 30px; min-height: 92px; }
    .skarmtext h3 { font-size: 22px; margin-bottom: 7px; }
    .skarmtext p { font-size: 15.5px; color: var(--svag); }
    .skarmtext.byter { opacity: 0; transform: translateY(6px); }
    .skarmtext { transition: opacity .3s, transform .3s; }
    .prickrad { display: flex; gap: 9px; margin-top: 18px; }
    .prickrad button { width: 42px; height: 5px; border: 0; border-radius: 3px; padding: 0;
                       background: var(--sand2); cursor: pointer; position: relative; overflow: hidden; }
    .prickrad button.aktiv::after { content: ''; position: absolute; inset: 0; background: var(--gron);
                                    transform-origin: left; animation: fyll var(--tid, 5200ms) linear forwards; }
    @keyframes fyll { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; gap: 44px; }
      .svavkort { display: none; }
      .mobil3d { width: 18%; right: 4px; bottom: -20px; }
    }

    /* Fyra snabba nyttor direkt under hero — Yabies "ikon + rubrik + rad" */
    .nyttor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 92px;
              padding-bottom: 26px; }
    .nytta .ik { width: 46px; height: 46px; margin-bottom: 16px; }
    .nytta .ik svg { width: 100%; height: 100%; stroke: var(--svart); stroke-width: 1.5; fill: none;
                     stroke-linecap: round; stroke-linejoin: round; }
    .nytta h3 { font-size: 19px; margin-bottom: 8px; }
    .nytta p { font-size: 15px; color: var(--svag); }
    @media (max-width: 900px) { .nyttor { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 60px; } }
    @media (max-width: 520px) { .nyttor { grid-template-columns: 1fr; } }

    /* ── Löpande band ────────────────────────────────────────────────────── */
    .band { border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje);
            overflow: hidden; padding: 20px 0; margin-top: 40px; background: var(--papper); }
    .band .spår { display: flex; gap: 46px; width: max-content; animation: rulla 46s linear infinite; }
    .band .post { font-size: 14.5px; color: var(--svag); white-space: nowrap; font-weight: 500; }
    .band .post b { color: var(--gron); font-weight: 700; }
    @keyframes rulla { to { transform: translateX(-50%); } }

    /* ── Sifferrad ───────────────────────────────────────────────────────── */
    .siffror { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 86px 0 0; }
    .siffra .tal { font-family: 'Space Grotesk', sans-serif; font-size: clamp(36px, 4vw, 54px);
                   font-weight: 700; color: var(--svart); letter-spacing: -.04em; }
    .siffra .txt { font-size: 14.5px; color: var(--svag); margin-top: 6px; max-width: 220px; }
    @media (max-width: 820px) { .siffror { grid-template-columns: 1fr 1fr; gap: 30px; } }

    /* ── Varvsektioner: bild och text varannan gång ──────────────────────── */
    .varv { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center;
            margin-bottom: 128px; }
    .varv:last-child { margin-bottom: 0; }
    .varv.omvand .txt { order: 2; }
    .varv h3 { font-size: clamp(27px, 3vw, 40px); font-weight: 700; }
    .varv p { margin-top: 22px; max-width: 480px; }
    .varv .punkter { list-style: none; margin-top: 24px; }
    .varv .punkter li { padding-left: 30px; position: relative; margin-bottom: 10px; font-size: 16px; }
    .varv .punkter li::before { content: ''; position: absolute; left: 0; top: 9px; width: 16px; height: 9px;
      border-left: 2.5px solid var(--gron); border-bottom: 2.5px solid var(--gron); transform: rotate(-45deg); }
    .varv .lank { display: inline-block; margin-top: 26px; font-weight: 700; font-size: 16px; }
    .varv .lank::after { content: ' →'; }
    .fond { border-radius: 18px; padding: 46px; display: grid; place-items: center; position: relative;
            overflow: hidden; }
    .fond.mint { background: var(--mint-ljus); }
    .fond.sandf { background: var(--sand2); }
    .fond.lera { background: var(--lera); }
    .fond.gul { background: #fdf0cf; }
    .fond img { border-radius: 9px; box-shadow: 0 22px 50px rgba(12, 24, 18, .22);
                transform: rotate(-1.2deg); }
    .fond.rak img { transform: none; }
    .fond .platta2 { background: #14181a; padding: 9px; border-radius: 14px;
                     box-shadow: 0 24px 54px rgba(12, 24, 18, .24); transform: rotate(-1.2deg); }
    .fond .platta2 img { border-radius: 7px; box-shadow: none; transform: none; }
    /* Vissa skärmar har innehållet i överkant och tom yta under (köksskärmen,
       kalendern). Beskär uppifrån så bilden visar innehåll, inte tomrum. */
    .fond .platta2 img.krop { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
    @media (max-width: 900px) {
      .varv { grid-template-columns: 1fr; gap: 34px; margin-bottom: 84px; }
      .varv.omvand .txt { order: 0; }
      .fond { padding: 30px; }
    }

    /* ── Funktionsrutnät ─────────────────────────────────────────────────── */
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
    .kort { background: var(--papper); border: 1px solid var(--linje); border-radius: 16px;
            padding: 30px 26px 32px; transition: transform .2s, box-shadow .25s, border-color .2s; }
    .kort:hover { transform: translateY(-4px); box-shadow: var(--skugga); border-color: #d2cfc6; }
    .kort .ikon { width: 42px; height: 42px; border-radius: 11px; background: var(--mint-ljus);
                  display: grid; place-items: center; margin-bottom: 18px; }
    .kort .ikon svg { width: 22px; height: 22px; stroke: var(--gron); stroke-width: 1.7; fill: none;
                      stroke-linecap: round; stroke-linejoin: round; }
    .kort h3 { font-size: 18.5px; margin-bottom: 9px; }
    .kort p { font-size: 15px; color: var(--svag); }
    section.sand .kort { background: var(--papper); border-color: #e0ddd4; }

    /* ── Branscher (stora rutor, en per verksamhetstyp — Yabie/kassaregister-
       greppet: "hitta rätt för din bransch", fast med länk rakt in i en
       färdig demokassa) ─────────────────────────────────────────────────── */
    /* .storrutor låg tidigare bara som inline-regel i index.html, så klassen
       gav ingen grid alls på andra sidor — korten staplades i en kolumn.
       Regeln hör hemma här, i den delade CSS:en. */
    .storrutor { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
    .branscher { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
    .branschkort { border: 1px solid var(--linje); border-radius: 20px; overflow: hidden; background: var(--papper);
                   display: flex; flex-direction: column; transition: transform .2s, box-shadow .25s, border-color .2s; }
    .branschkort:hover { transform: translateY(-5px); box-shadow: var(--skugga); border-color: #d2cfc6; }
    .branschkort .topp { padding: 44px 30px; display: grid; place-items: center; font-size: 62px; line-height: 1; }
    .branschkort .topp.mint { background: var(--mint-ljus); }
    .branschkort .topp.sandf { background: var(--sand2); }
    .branschkort .topp.lera { background: var(--lera); }
    .branschkort .kropp { padding: 27px 28px 30px; display: flex; flex-direction: column; flex: 1; }
    .branschkort h3 { font-size: 21px; margin-bottom: 10px; }
    .branschkort p { font-size: 15px; color: var(--svag); margin-bottom: 17px; }
    .branschkort .taggar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
    .branschkort .taggar span { font-size: 12.5px; font-weight: 600; color: var(--gron); background: var(--mint-ljus);
                                padding: 5px 12px; border-radius: 999px; }
    .branschkort .lank { margin-top: auto; font-weight: 700; font-size: 15.5px; color: var(--svart); }
    .branschkort .lank::after { content: ' →'; color: var(--gron); }

    /* ── Galleri ─────────────────────────────────────────────────────────── */
    .galleri { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 34px; }
    .galleri figure { }
    .bildram { border-radius: 14px; overflow: hidden; background: var(--sand2); padding: 22px;
               margin-bottom: 18px; }
    .bildram img { border-radius: 7px; box-shadow: 0 14px 34px rgba(12, 24, 18, .16); }
    .galleri figcaption { font-size: 15px; color: var(--svag); }
    .galleri figcaption b { color: var(--svart); font-weight: 600; }

    /* ── Priser ──────────────────────────────────────────────────────────── */
    .bindval { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
    .pill { border: 1.5px solid #cdcbc4; background: transparent; color: var(--svart); font: inherit;
            font-size: 14.5px; font-weight: 600; padding: 11px 22px; border-radius: 999px; cursor: pointer; }
    .pill.aktiv { background: var(--svart); border-color: var(--svart); color: #fff; }
    .nivarad { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
    .niva { background: var(--papper); border: 1px solid var(--linje); border-radius: 18px;
            padding: 34px 30px 36px; position: relative; }
    .niva.markerad { border: 2px solid var(--svart); }
    .band2 { position: absolute; top: -13px; left: 30px; background: var(--mint); color: #06301d;
             font-size: 12.5px; font-weight: 700; padding: 5px 15px; border-radius: 999px; }
    .niva h3 { font-size: 19px; margin-bottom: 16px; }
    .niva .pris { font-family: 'Space Grotesk', sans-serif; font-size: 46px; font-weight: 700;
                  color: var(--svart); letter-spacing: -.04em; }
    .niva .pris small { font-size: 16px; font-weight: 500; color: var(--svag); letter-spacing: 0; }
    .niva .pris .ord { font-size: 24px; color: var(--svag); text-decoration: line-through;
                       margin-right: 10px; font-weight: 500; }
    .niva .procent { font-size: 15.5px; color: var(--gron); font-weight: 600; margin-top: 6px; }
    .niva .not { font-size: 14.5px; color: var(--svag); margin-top: 14px; }
    .niva .bindnot { font-size: 13.5px; color: var(--gron); margin-top: 16px; font-weight: 600; }
    .alltingar { margin-top: 34px; background: var(--papper); border: 1px solid var(--linje);
                 border-radius: 18px; padding: 34px 32px; }
    .alltingar h3 { font-size: 18px; margin-bottom: 12px; }
    .alltingar p { font-size: 15px; color: var(--svag); }
    .alltingar .slutrad { margin-top: 12px; color: var(--svart); font-weight: 600; }

    /* ── Kalkylator ──────────────────────────────────────────────────────── */
    .kalkyl { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
    .kalkyl .panel { background: var(--papper); border: 1px solid var(--linje); border-radius: 18px; padding: 32px; }
    .kalkyl label { display: block; font-size: 14px; font-weight: 600; color: var(--svart);
                    margin: 20px 0 8px; }
    .kalkyl label:first-child { margin-top: 0; }
    .kalkyl input, .kalkyl select { width: 100%; padding: 14px 16px; border: 1.5px solid var(--linje);
      border-radius: 11px; font: inherit; font-size: 16px; background: var(--papper); color: var(--svart); }
    .kalkyl input:focus, .kalkyl select:focus { outline: none; border-color: var(--gron); }
    .kalkyl small { display: block; font-size: 13px; color: var(--svag); margin-top: 8px; }
    .resultat { background: var(--svart); border-radius: 18px; padding: 34px 32px; color: #d7ded9; }
    .resultat h3 { color: #fff; font-size: 17px; font-weight: 600; }
    .resultat .stor { font-family: 'Space Grotesk', sans-serif; font-size: clamp(40px, 5vw, 62px);
                      font-weight: 700; color: var(--mint); letter-spacing: -.04em; margin: 6px 0; }
    .resultat .rad { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
                     border-top: 1px solid rgba(255,255,255,.12); font-size: 14.5px; }
    .resultat .rad b { color: #fff; }
    .resultat .rad b.basta { color: var(--mint); }
    .resultat .vart { font-size: 13.5px; color: #9fada7; margin-top: 20px; line-height: 1.6; }
    .stripeinfo { margin-top: 26px; background: var(--papper); border: 1px solid var(--linje);
                  border-radius: 16px; padding: 24px 26px; font-size: 14.5px; color: var(--svag); }
    .stripeinfo b { color: var(--svart); }
    @media (max-width: 900px) { .kalkyl { grid-template-columns: 1fr; } }

    /* ── Hårdvara ────────────────────────────────────────────────────────── */
    .sponsband { background: var(--mint-ljus); border-radius: 16px; padding: 22px 26px;
                 font-size: 15px; color: #14503a; margin-bottom: 26px; }
    .sponsband b { color: #06301d; }
    .hardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
    .hardpanel { background: var(--papper); border: 1px solid var(--linje); border-radius: 18px; padding: 32px; }
    .hardpanel h3 { font-size: 18px; margin-bottom: 20px; }
    .hrad { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0;
            border-bottom: 1px solid var(--linje); font-size: 15.5px; }
    .hrad b { color: var(--svart); white-space: nowrap; }
    .harddelbet { font-size: 14px; color: var(--svag); margin-top: 18px; }
    .hardpunkter { list-style: none; }
    .hardpunkter li { padding-left: 30px; position: relative; margin-bottom: 13px; font-size: 15.5px; }
    .hardpunkter li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 9px;
      border-left: 2.5px solid var(--gron); border-bottom: 2.5px solid var(--gron); transform: rotate(-45deg); }
    .hardpunkter b { color: var(--svart); }
    @media (max-width: 900px) { .hardgrid { grid-template-columns: 1fr; } }

    /* ── Kom igång ───────────────────────────────────────────────────────── */
    .steg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
    .st { border-top: 3px solid var(--linje); padding-top: 22px; counter-increment: s; }
    .st::before { content: counter(s); font-family: 'Space Grotesk', sans-serif; font-size: 15px;
                  font-weight: 700; color: var(--gron); display: block; margin-bottom: 10px; }
    .st h3 { font-size: 18px; margin-bottom: 8px; }
    .st p { font-size: 15px; color: var(--svag); }
    .tid { margin-top: 40px; font-size: 15.5px; font-weight: 600; color: var(--svart); }
    @media (max-width: 820px) { .steg { grid-template-columns: 1fr 1fr; } }

    .arlig { background: var(--sand); border-radius: 18px; padding: 34px 36px; font-size: 16px;
             color: var(--text); max-width: 900px; }
    .arlig b { color: var(--svart); }

    /* ── Frågor (hopfällbara) ────────────────────────────────────────────── */
    .fragor { max-width: 880px; }
    .fraga { border-bottom: 1px solid var(--linje); }
    .fraga summary { list-style: none; cursor: pointer; padding: 26px 46px 26px 0; position: relative;
                     display: block; }
    .fraga summary::-webkit-details-marker { display: none; }
    .fraga summary h3 { font-size: 20px; font-weight: 600; }
    .fraga summary::after { content: ''; position: absolute; right: 8px; top: 33px; width: 13px; height: 13px;
      border-right: 2.5px solid var(--svart); border-bottom: 2.5px solid var(--svart);
      transform: rotate(45deg); transition: transform .25s; }
    .fraga[open] summary::after { transform: rotate(-135deg); top: 38px; }
    .fraga p { padding: 0 40px 28px 0; font-size: 16px; color: var(--svag); max-width: 720px; }

    /* ── Slutruta ────────────────────────────────────────────────────────── */
    .slutcta { background: var(--mint-ljus); text-align: center; }
    .slutcta h2 { max-width: 780px; margin: 0 auto; }
    .slutcta p { max-width: 620px; margin: 26px auto 36px; font-size: 18px; }
    .slutcta .knapprad { justify-content: center; }
    .demorad { margin-top: 16px; }
    .demorad .knapp { background: rgba(255,255,255,.75); border-color: transparent; font-size: 15.5px;
                      padding: 13px 24px; }
    .demorad .knapp:hover { background: #fff; }

    /* ── Sidfot ──────────────────────────────────────────────────────────── */
    footer { background: var(--svart); color: #9fada7; padding: 74px 0 40px; font-size: 15px; }
    footer h4 { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em;
                text-transform: uppercase; margin-bottom: 18px; font-family: 'Inter', sans-serif; }
    footer a { color: #9fada7; display: block; padding: 5px 0; }
    footer a:hover { color: #fff; }
    .fotgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
    .fotgrid .logo { color: #fff; margin-bottom: 16px; }
    .fotgrid .om { max-width: 300px; font-size: 14.5px; }
    .fotslut { border-top: 1px solid rgba(255,255,255,.12); margin-top: 54px; padding-top: 26px;
               display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
    @media (max-width: 860px) { .fotgrid { grid-template-columns: 1fr 1fr; gap: 32px; } }

    /* ── Avtäckning vid scroll ───────────────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(20px); }
    .reveal.synlig { opacity: 1; transform: none;
      transition: opacity .7s cubic-bezier(.2,.7,.3,1) var(--d, 0s), transform .7s cubic-bezier(.2,.7,.3,1) var(--d, 0s); }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
      .entre, .reveal { opacity: 1 !important; transform: none !important; }
    }
    @media (max-width: 700px) {
      section { padding: 76px 0; }
      .yta { padding: 0 20px; }
      .rubrikblock { margin-bottom: 42px; }
    }