:root{
    --paper:#F7F6F1;
    --paper-dim:#EFEDE5;
    --ink:#14151A;
    --ink-soft:#5B5D66;
    --line:#E3E0D6;
    --signal:#FF5A1F;
    --signal-dim:#FFE9DD;
    --tool-a:#4F46E5;
    --tool-b:#0EA5E9;
    --display:'Space Grotesk', sans-serif;
    --body:'Inter', sans-serif;
    --mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 32px;}
  :focus-visible{outline:2px solid var(--signal); outline-offset:3px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- TICK DIVIDER — mätsticka-motiv, sajtens signaturdetalj ---------- */
  .tick-rule{
    height:14px; width:100%;
    background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 24px);
    background-position: center;
  }

  /* ---------- NAV ---------- */
  header{position:sticky; top:0; z-index:50; background:rgba(247,246,241,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
  nav{display:flex; align-items:center; justify-content:space-between; padding:20px 32px; max-width:1140px; margin:0 auto;}
  .brand{font-family:var(--display); font-weight:700; font-size:20px; display:flex; align-items:center; gap:9px; letter-spacing:-0.01em;}
  .brand .crosshair{width:16px; height:16px; position:relative; flex-shrink:0;}
  .brand .crosshair::before, .brand .crosshair::after{content:''; position:absolute; background:var(--signal);}
  .brand .crosshair::before{width:100%; height:2px; top:7px; left:0;}
  .brand .crosshair::after{height:100%; width:2px; left:7px; top:0;}
  .nav-links{display:flex; gap:34px; list-style:none; font-size:14.5px; color:var(--ink-soft); font-weight:500;}
  .nav-links a{text-decoration:none; position:relative; padding-bottom:4px;}
  .nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--signal); transition:width .25s ease;}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{font-family:var(--body); font-weight:600; font-size:14px; text-decoration:none; background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:999px; transition:background .2s ease; white-space:nowrap;}
  .nav-cta:hover{background:var(--signal);}

  /* ---------- HERO ---------- */
  .hero{padding:88px 0 0; position:relative; overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;}
  .eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal); display:flex; align-items:center; gap:10px; margin-bottom:22px; opacity:0; animation:fadeUp .7s ease forwards; animation-delay:.05s;}
  .eyebrow::before{content:''; width:26px; height:1px; background:var(--signal);}
  h1{font-family:var(--display); font-weight:700; font-size:clamp(38px,5vw,60px); line-height:1.04; letter-spacing:-0.02em; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:.15s;}
  h1 span{color:var(--signal);}
  .hero-sub{font-size:18px; color:var(--ink-soft); max-width:460px; margin-top:22px; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:.3s;}
  .hero-actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:.45s;}
  .btn-primary{background:var(--ink); color:var(--paper); font-weight:600; font-size:14.5px; padding:15px 26px; border-radius:999px; text-decoration:none; transition:background .2s ease;}
  .btn-primary:hover{background:var(--signal);}
  .btn-ghost{border:1.5px solid var(--ink); color:var(--ink); font-weight:600; font-size:14.5px; padding:14px 26px; border-radius:999px; text-decoration:none; transition:all .2s ease;}
  .btn-ghost:hover{background:var(--ink); color:var(--paper);}

  @keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}

  /* ---------- SIGNATURE: Sikte / poänggauge ---------- */
  .hero-visual{position:relative; max-width:420px; margin:0 auto; opacity:0; animation:fadeUp 1s ease forwards; animation-delay:.4s;}
  .browser-mock{background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(20,21,26,0.12); overflow:hidden; border:1px solid var(--line); transform:rotate(-2deg);}
  .browser-bar{display:flex; align-items:center; gap:8px; padding:12px 14px; background:#F3F2ED; border-bottom:1px solid var(--line);}
  .browser-bar .dot{width:8px; height:8px; border-radius:50%;}
  .d1{background:#FF5F57;} .d2{background:#FEBC2E;} .d3{background:#28C840;}
  .browser-url{margin-left:8px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 12px; font-family:var(--mono); font-size:10.5px; color:var(--ink-soft);}
  .browser-body{padding:20px;}
  .bm-nav{display:flex; gap:14px; margin-bottom:18px;}
  .bm-nav span{width:34px; height:6px; border-radius:3px; background:var(--line);}
  .bm-nav span:first-child{width:50px; background:var(--signal);}
  .bm-hero{height:90px; border-radius:8px; background:linear-gradient(135deg, var(--tool-a), var(--tool-b)); margin-bottom:14px;}
  .bm-row{display:flex; gap:10px;}
  .bm-block{flex:1; height:44px; border-radius:6px; background:var(--paper-dim); border:1px solid var(--line);}

  .sikte-wrap{position:absolute; right:-14%; bottom:-14%; width:46%; aspect-ratio:1;}
  .sikte-ring{position:absolute; inset:0; border-radius:50%; border:1.5px dashed var(--line); background:var(--paper);}
  .sikte-ring.r2{inset:14%; border-style:solid; border-color:var(--ink); border-width:1.5px;}
  .sikte-cross{position:absolute; inset:0;}
  .sikte-cross::before, .sikte-cross::after{content:''; position:absolute; background:var(--signal);}
  .sikte-cross::before{width:100%; height:2px; top:50%; left:0; transform:translateY(-50%);}
  .sikte-cross::after{height:100%; width:2px; left:50%; top:0; transform:translateX(-50%);}
  .sikte-score{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--paper); border-radius:50%; width:58%; height:58%; margin:auto; box-shadow:0 8px 30px rgba(20,21,26,0.14);}
  .sikte-score .tal{font-family:var(--mono); font-weight:600; font-size:clamp(22px,4vw,32px); color:var(--ink); line-height:1;}
  .sikte-score .lbl{font-family:var(--mono); font-size:9px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; text-align:center;}

  /* ---------- STATS BAR ---------- */
  .statbar{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:72px;}
  .statbar .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}
  .stat-cell{background:var(--paper); padding:32px 8px; text-align:center;}
  .stat-cell .num{font-family:var(--mono); font-weight:600; font-size:clamp(24px,2.6vw,32px); color:var(--signal);}
  .stat-cell .lbl{font-size:13px; color:var(--ink-soft); margin-top:6px;}

  /* ---------- SECTIONS ---------- */
  .section{padding:104px 0;}
  .section-alt{background:var(--paper-dim);}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap;}
  .section-label{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--signal); margin-bottom:14px;}
  h2{font-family:var(--display); font-weight:700; font-size:clamp(28px,3.2vw,40px); letter-spacing:-0.01em; max-width:560px;}
  .section-head p{color:var(--ink-soft); max-width:320px; font-size:15px;}

  /* ---------- PORTFOLIO / EXEMPEL ---------- */
  .portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
  .portfolio-card h3{font-family:var(--display); font-weight:600; font-size:18px; margin:20px 0 8px;}
  .portfolio-card p{font-size:13.5px; color:var(--ink-soft);}
  .browser-mock.small{transform:none; box-shadow:0 10px 28px rgba(20,21,26,0.08);}
  .browser-mock.small .bm-hero{height:64px;}
  .browser-mock.small .bm-block{height:32px;}
  .bm-hero.warm{background:linear-gradient(135deg, #F97316, #FB7185);}
  .bm-hero.cool{background:linear-gradient(135deg, #0EA5E9, #6366F1);}
  .bm-hero.neutral{background:linear-gradient(135deg, #334155, #64748B);}

  /* ---------- LOKALT / SKÅNE-SILHUETT ---------- */
  .riksband{position:relative; background:var(--ink); color:var(--paper); padding:80px 0;}
  .riksband-text h2{color:var(--paper); max-width:560px; margin:14px 0 16px;}
  .riksband-text p{color:#A6A8B3; font-size:15.5px; max-width:520px; margin-bottom:28px;}
  .riksband-orter{display:flex; flex-wrap:wrap; gap:10px;}
  .riksband-orter span{
    font-family:var(--mono); font-size:12.5px; color:#C9CBD3;
    border:1px solid #2C2E38; border-radius:999px; padding:8px 16px;
  }
  .riksband-orter span:last-child{color:var(--signal); border-color:var(--signal);}

  /* ---------- TJÄNSTER ---------- */
  .tjanst-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .tjanst-card{background:var(--paper); padding:40px 36px;}
  .tjanst-mark{width:28px; height:28px; position:relative; margin-bottom:22px;}
  .tjanst-mark::before, .tjanst-mark::after{content:''; position:absolute; background:var(--signal);}
  .tjanst-mark::before{width:100%; height:2px; top:13px;}
  .tjanst-mark::after{height:100%; width:2px; left:13px;}
  .tjanst-card h3{font-family:var(--display); font-weight:600; font-size:21px; margin-bottom:10px;}
  .tjanst-card p{color:var(--ink-soft); font-size:14.5px; max-width:380px;}

  /* ---------- VERKTYGET (egen sub-identitet, matchar skrivbordsappen) ---------- */
  .verktyg-card{
    background:linear-gradient(135deg, var(--tool-a), var(--tool-b));
    border-radius:20px; padding:4px; box-shadow:0 20px 60px rgba(79,70,229,0.25);
  }
  .verktyg-inner{background:#fff; border-radius:17px; padding:44px;}
  .verktyg-topline{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tool-a); margin-bottom:16px;}
  .verktyg-topline .dot{width:7px; height:7px; border-radius:50%; background:var(--tool-b);}
  .verktyg-inner h3{font-family:var(--display); font-weight:700; font-size:26px; margin-bottom:10px;}
  .verktyg-inner > p{color:var(--ink-soft); font-size:15px; max-width:480px; margin-bottom:28px;}
  .verktyg-demo{display:grid; grid-template-columns:1fr auto; gap:12px; margin-bottom:28px;}
  .verktyg-demo input{border:1.5px solid #E5E7EB; border-radius:10px; padding:14px 16px; font-family:var(--body); font-size:15px; background:#F9FAFB;}
  .verktyg-demo button{background:var(--tool-a); color:#fff; border:none; border-radius:10px; padding:14px 24px; font-weight:600; font-size:14.5px; cursor:pointer; transition:background .2s ease;}
  .verktyg-demo button:hover{background:#4338CA;}
  .verktyg-resultat{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; background:#F9FAFB; border-radius:14px; padding:24px;}
  .verktyg-poang{font-family:var(--mono); font-weight:700; font-size:44px; color:#16A34A;}
  .verktyg-checks{display:flex; flex-direction:column; gap:9px;}
  .vcheck{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft);}
  .vcheck .mk{width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; flex-shrink:0;}
  .vcheck .ok{background:#16A34A;} .vcheck .warn{background:#D97706;}
  .verktyg-note{margin-top:20px; font-size:12.5px; color:#9CA3AF;}

  /* ---------- PROCESS ---------- */
  .process-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .process-step{background:var(--paper); padding:32px 26px;}
  .process-step .stage{font-family:var(--mono); font-size:12px; color:var(--signal); margin-bottom:14px;}
  .process-step h3{font-family:var(--display); font-weight:600; font-size:18.5px; margin-bottom:10px;}
  .process-step p{font-size:13.5px; color:var(--ink-soft);}

  /* ---------- PRISER ---------- */
  .pris-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .pris-card{background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:36px 30px; display:flex; flex-direction:column;}
  .pris-card.popular{border-color:var(--ink); position:relative; box-shadow:0 12px 32px rgba(20,21,26,0.08);}
  .pris-badge{position:absolute; top:-13px; left:30px; background:var(--signal); color:#fff; font-size:11.5px; font-weight:700; padding:5px 14px; border-radius:999px; letter-spacing:.02em;}
  .pris-namn{font-family:var(--display); font-weight:600; font-size:19px; margin-bottom:6px;}
  .pris-desc{font-size:13.5px; color:var(--ink-soft); margin-bottom:22px;}
  .pris-summa{font-family:var(--mono); font-weight:600; font-size:34px; margin-bottom:2px;}
  .pris-summa span{font-size:14px; color:var(--ink-soft); font-weight:400; font-family:var(--body);}
  .pris-list{list-style:none; margin:24px 0 28px; display:flex; flex-direction:column; gap:11px; flex-grow:1;}
  .pris-list li{font-size:14px; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start;}
  .pris-list li::before{content:'+'; color:var(--signal); font-weight:700; flex-shrink:0;}
  .pris-btn{text-align:center; padding:13px; border-radius:10px; text-decoration:none; font-weight:600; font-size:14.5px; border:1.5px solid var(--ink); color:var(--ink); transition:all .2s ease;}
  .pris-card.popular .pris-btn{background:var(--ink); color:var(--paper);}
  .pris-btn:hover{background:var(--ink); color:var(--paper);}

  /* ---------- KONTAKT ---------- */
  .kontakt{background:var(--ink); color:var(--paper); padding:100px 0;}
  .kontakt-inner{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
  .kontakt h2{color:var(--paper); max-width:420px;}
  .kontakt p{color:#A6A8B3; font-size:15.5px; margin-top:16px; max-width:400px;}
  .kontakt-details{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:12px; font-size:14.5px; color:#D5D6DD;}
  .kontakt-form{background:#1D1F27; border-radius:16px; padding:32px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8B8D99; margin-bottom:7px;}
  .field input, .field textarea{width:100%; background:#14151A; border:1px solid #2C2E38; border-radius:8px; padding:11px 13px; color:var(--paper); font-family:var(--body); font-size:14.5px;}
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--signal);}
  .kontakt-submit{width:100%; background:var(--signal); color:#fff; border:none; border-radius:8px; padding:14px; font-weight:600; font-size:14.5px; cursor:pointer; margin-top:6px;}

  footer{background:#0F1014; color:#71737E; padding:32px 0;}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px;}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  @media (max-width:900px){
    .nav-links{display:none;}
    .hero-grid{grid-template-columns:1fr; gap:40px;}
    .statbar .wrap{grid-template-columns:repeat(2,1fr);}
    .tjanst-grid{grid-template-columns:1fr;}
    .process-row{grid-template-columns:repeat(2,1fr);}
    .pris-grid{grid-template-columns:1fr;}
    .kontakt-inner{grid-template-columns:1fr;}
    .verktyg-demo{grid-template-columns:1fr;}
    .verktyg-resultat{grid-template-columns:1fr;}
    .portfolio-grid{grid-template-columns:1fr; gap:40px;}
    .hero-visual{max-width:340px; margin-top:20px;}
  }
  @media (max-width:520px){
    .wrap{padding:0 20px;}
    nav{padding:16px 20px;}
    .section{padding:72px 0;}
    .verktyg-inner{padding:28px;}
    .sikte-wrap{right:-8%; bottom:-10%; width:42%;}
  }

/* =================================================================
   BLOGG — delad stil för blogg.html och artikelsidor
   ================================================================= */

.blogg-hero{padding:64px 0 48px;}
.blogg-hero .eyebrow{margin-bottom:18px;}
.blogg-hero h1{font-size:clamp(32px,4.4vw,48px);}
.blogg-hero p{color:var(--ink-soft); font-size:16px; max-width:520px; margin-top:16px;}

.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin:36px 0 44px;}
.filter-pill{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft);
  padding:9px 18px; border-radius:999px; cursor:pointer; transition:all .2s ease;
}
.filter-pill:hover{border-color:var(--ink); color:var(--ink);}
.filter-pill.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}

.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.post-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--paper); transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(20,21,26,0.08);}
.post-cover{width:100%; aspect-ratio:16/10; display:block;}
.post-body{padding:22px 22px 26px;}
.post-kategori{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--signal); margin-bottom:10px;}
.post-body h3{font-family:var(--display); font-weight:600; font-size:18px; line-height:1.3; margin-bottom:8px;}
.post-excerpt{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}
.post-meta{display:flex; gap:10px; align-items:center; margin-top:16px; font-family:var(--mono); font-size:11px; color:#9CA3AF;}
.post-meta .sep{width:3px; height:3px; border-radius:50%; background:#D1D5DB;}

.post-card[hidden]{display:none;}

/* --- Artikelsida --- */
.brodsmula{font-family:var(--mono); font-size:12px; color:var(--ink-soft); padding:28px 0 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.brodsmula a{color:var(--ink-soft); text-decoration:none;}
.brodsmula a:hover{color:var(--signal);}

.artikel-header{padding:36px 0 40px; max-width:760px;}
.artikel-header .post-kategori{margin-bottom:16px;}
.artikel-header h1{font-size:clamp(30px,4.2vw,46px); line-height:1.1;}
.artikel-meta{display:flex; gap:14px; align-items:center; margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}
.artikel-cover{width:100%; aspect-ratio:21/9; border-radius:16px; margin-bottom:8px;}

.artikel-body{max-width:720px; padding:12px 0 64px; font-size:17px; line-height:1.75; color:#292A31;}
.artikel-body h2{font-family:var(--display); font-weight:700; font-size:26px; margin:44px 0 16px;}
.artikel-body h3{font-family:var(--display); font-weight:600; font-size:20px; margin:32px 0 12px;}
.artikel-body p{margin-bottom:20px;}
.artikel-body ul, .artikel-body ol{margin:0 0 20px 22px;}
.artikel-body li{margin-bottom:8px;}
.artikel-body strong{font-weight:600;}
.artikel-body blockquote{
  border-left:3px solid var(--signal); margin:28px 0; padding:4px 0 4px 22px;
  font-style:italic; color:var(--ink-soft); font-size:17px;
}
.artikel-figur{margin:32px 0;}
.artikel-figur img, .artikel-figur svg{width:100%; border-radius:12px;}
.artikel-figur figcaption{font-size:13px; color:var(--ink-soft); margin-top:10px; font-family:var(--mono);}

.relaterat{background:var(--paper-dim); padding:72px 0;}
.relaterat h2{margin-bottom:32px;}

@media (max-width:900px){
  .post-grid{grid-template-columns:1fr 1fr; gap:20px;}
}
@media (max-width:600px){
  .post-grid{grid-template-columns:1fr;}
  .filter-row{gap:8px;}
}

/* =================================================================
   HJÄLP-SEKTION — interaktivt "hur kan vi hjälpa dig"-flöde
   ================================================================= */

.hjalp-sektion{padding-top:0;}
.hjalp-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.hjalp-card{
  display:flex; align-items:center; gap:16px; text-align:left;
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px;
  padding:22px 24px; cursor:pointer; transition:all .2s ease;
  font-family:var(--body); font-size:15.5px; color:var(--ink); font-weight:500;
}
.hjalp-card:hover{border-color:var(--signal); background:var(--signal-dim);}
.hjalp-card.aktiv{border-color:var(--signal); background:var(--signal-dim);}
.hjalp-mark{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink-soft);
  flex-shrink:0; position:relative; transition:all .2s ease;
}
.hjalp-card:hover .hjalp-mark, .hjalp-card.aktiv .hjalp-mark{border-color:var(--signal); background:var(--signal);}
.hjalp-card.aktiv .hjalp-mark::after{
  content:''; position:absolute; inset:5px; border-radius:50%; background:var(--paper);
}
.hjalp-svar{
  margin-top:24px; background:var(--ink); color:var(--paper);
  border-radius:14px; padding:28px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.hjalp-svar p{font-size:15.5px; max-width:520px; margin:0;}
.hjalp-svar .btn-primary{flex-shrink:0;}

@media (max-width:700px){
  .hjalp-grid{grid-template-columns:1fr;}
  .hjalp-svar{flex-direction:column; align-items:flex-start;}
}