:root{
      --bg:#07070a;
      --panel:#0c0c12;
      --panel2:#0f0f16;
      --text:#f4f4f7;
      --muted:rgba(244,244,247,.72);
      --muted2:rgba(244,244,247,.55);
      --line:rgba(255,255,255,.10);
      --line2:rgba(255,255,255,.16);
      --accent:#c61f2b;
      --shadow: 0 20px 60px rgba(0,0,0,.58);
      --shadow2: 0 10px 28px rgba(0,0,0,.38);
      --r:22px;
      --r2:30px;
      --max:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    html,body{ overflow-x: hidden; }
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 15% 10%, rgba(198,31,43,.12), transparent 60%),
        radial-gradient(900px 560px at 90% 25%, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
        var(--bg);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      line-height:1.55;
      letter-spacing:.01em;
    }
    a{color:inherit;text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{max-width:var(--max); margin:0 auto; padding: 28px 18px 80px;}

    /* Top nav */
    .topbar{
      position:sticky; top:0; z-index:80;
      backdrop-filter: blur(12px);
      background: rgba(7,7,10,.62);
      border-bottom:1px solid var(--line);
    }
    .topbar .inner{
      max-width:var(--max);
      margin:0 auto;
      padding: 12px 18px;
      display:flex;
      align-items:center;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap: 12px;
      min-width: 0;
    }
    .mark{
      width:36px;height:36px;border-radius:14px;
      background: linear-gradient(180deg, rgba(198,31,43,.36), rgba(198,31,43,.10));
      border:1px solid rgba(198,31,43,.34);
      box-shadow: 0 0 0 6px rgba(198,31,43,.10);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }
    .mark svg{width:20px;height:20px}
    .bname{
      font-weight: 1000;
      letter-spacing:.28em;
      font-size: 14px;
      white-space:nowrap;
    }
    .bsub{
      color:var(--muted2);
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      margin-top:2px;
      white-space:nowrap;
    }
    .nav{
      margin-left:auto;
      display:flex;
      gap: 8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .nav a{
      font-size:12px;
      color:var(--muted);
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius:999px;
      background: rgba(255,255,255,.02);
    }
    .nav a:hover{
      color:var(--text);
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.05);
      text-decoration:none;
    }

    /* Hero */
    .hero{
      border-radius: var(--r2);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      min-height: 70vh;
      display:flex;
      align-items:flex-end;
      margin-top: 18px;
      background:
        linear-gradient(0deg, rgba(7,7,10,.92), rgba(7,7,10,.55) 35%, rgba(7,7,10,.28) 70%, rgba(7,7,10,.20)),
        url(var(--hero-url)) center/cover no-repeat,
        url(var(--hero-fallback-url)) center/cover no-repeat;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 520px at 35% 30%, rgba(255,255,255,.10), transparent 55%),
        radial-gradient(900px 520px at 70% 20%, rgba(198,31,43,.10), transparent 60%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      width:100%;
      padding: 22px 22px 18px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 18px;
      align-items:end;
    }
    .logoRow{
      display:flex; align-items:center; gap: 10px;
      color: rgba(255,255,255,.88);
      letter-spacing:.22em;
      text-transform:uppercase;
      font-size:12px;
    }
    .logoRow .mini{
      width:34px;height:34px;border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(0,0,0,.20);
      display:flex; align-items:center; justify-content:center;
    }
    .logoRow .mini svg{width:18px;height:18px}
    h1{
      margin: 10px 0 0;
      font-size: clamp(30px, 4.4vw, 56px);
      letter-spacing: .08em;
      line-height:1.02;
      text-transform: uppercase;
      text-shadow: 0 12px 40px rgba(0,0,0,.55);
    }
    .lead{
      margin: 12px 0 0;
      color: rgba(255,255,255,.78);
      max-width: 72ch;
      font-size: 14px;
    }
    .ctaRow{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.25);
      color: rgba(255,255,255,.92);
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 12px;
    }
    .btn:hover{text-decoration:none; border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.06);}
    .btn.primary{
      background: linear-gradient(180deg, rgba(198,31,43,.95), rgba(198,31,43,.70));
      border-color: rgba(198,31,43,.85);
      box-shadow: 0 18px 50px rgba(198,31,43,.18);
    }
    .btn.primary:hover{filter: brightness(1.08); box-shadow: 0 22px 60px rgba(198,31,43,.22);}
    .badgeRow{
      display:flex; flex-wrap:wrap; gap: 10px;
      margin-top: 14px;
    }
    .badge{
      display:inline-flex; align-items:center; gap: 10px;
      padding: 9px 12px;
      border-radius:999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.25);
      color: rgba(255,255,255,.75);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .dot{width:10px;height:10px;border-radius:999px;background:var(--accent); box-shadow: 0 0 0 6px rgba(198,31,43,.14);}


    .heroCopy{
      border-radius: calc(var(--r) + 6px);
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
      padding: 16px 16px 14px;
      backdrop-filter: blur(8px);
    }

    .heroCard{
      border-radius: var(--r);
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.22);
      box-shadow: var(--shadow2);
      padding: 16px;
      backdrop-filter: blur(6px);
    }
    .hcTitle{
      margin:0 0 10px;
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.88);
    }
    .hcLine{height: 2px; width: 72px; background: var(--accent); border-radius:999px; margin: 10px 0 12px;}
    .infoRow{
      display:flex; gap:10px; align-items:flex-start;
      padding: 10px 0;
      border-top: 1px dashed rgba(255,255,255,.18);
    }
    .infoRow:first-of-type{border-top:0;}
    .ico{
      width:34px;height:34px;border-radius:14px;
      background: rgba(198,31,43,.14);
      border: 1px solid rgba(198,31,43,.25);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }
    .ico svg{width:18px;height:18px}
    .lbl{margin:0; font-size:11px; letter-spacing:.20em; text-transform:uppercase; color: rgba(255,255,255,.86);}
    .val{margin:4px 0 0; color: rgba(255,255,255,.75); font-size: 13px;}
    .muted{color:var(--muted2);}


    .slogan{
      margin: 10px 0 0;
      font-size: 13px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.82);
      text-shadow: 0 10px 30px rgba(0,0,0,.55);
    }


    /* =========================================================
       EDIT MODE (v1.4.3)
       - Tryck "E" för att slå på/av redigeringsmarkeringar.
       - Ändra innehåll i CONFIG-objektet (se <script> längst ner).
       ========================================================= */
    .editToggle{
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 9999;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.32);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
      color: rgba(255,255,255,.88);
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: 11px;
      cursor: pointer;
      user-select: none;
    }
    .editToggle .k{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 22px; height: 22px;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      font-size: 11px;
      letter-spacing: .10em;
    }
    .editPanel{
      position: fixed;
      right: 14px;
      bottom: 60px;
      z-index: 9999;
      width: min(520px, calc(100vw - 28px));
      max-height: min(72vh, 680px);
      overflow: auto;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.42);
      backdrop-filter: blur(14px);
      box-shadow: 0 24px 70px rgba(0,0,0,.52);
      padding: 14px;
      display: none;
    }
    .editPanel h4{
      margin: 0 0 8px;
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);
    }
    .editPanel p{
      margin: 0 0 10px;
      font-size: 12px;
      color: rgba(255,255,255,.74);
      line-height: 1.5;
    }
    .editPanel code{
      display:block;
      white-space: pre;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.82);
      overflow-x: auto;
      font-size: 12px;
    }
    .editBadge{
      display:none;
      margin-left: 10px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(198,31,43,.22);
      border: 1px solid rgba(198,31,43,.40);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: 10px;
      vertical-align: middle;
    }
    .editOutline{
      outline: 2px dashed rgba(198,31,43,.55);
      outline-offset: 6px;
      border-radius: 14px;
    }
    body.editMode .editBadge{ display:inline-flex; }
    body.editMode [data-edit="true"]{ outline: 2px dashed rgba(198,31,43,.55); outline-offset: 6px; border-radius: 14px; }
    
    body.heroFallbackUsed.editMode .editPanel::before{
      content: "OBS: Hero-bilden saknas eller hittas inte. Fallback-bild används (inbäddad).";
      display:block;
      margin-bottom: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(198,31,43,.40);
      background: rgba(198,31,43,.16);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size: 11px;
    }

    
    /* =========================================================
       RESPONSIVE (v1.4.6)
       - Desktop: som tidigare
       - Mobil: header staplas + meny blir "drawer" (hamburger)
       ========================================================= */
    .navToggle{
      display:none;
      align-items:center;
      justify-content:center;
      width: 46px; height: 46px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
      backdrop-filter: blur(10px);
      cursor:pointer;
      user-select:none;
    }
    .navToggle svg{ width: 22px; height: 22px; opacity:.92; }
    .navLinks{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    /* Drawer */
    .navDrawer{
      position: fixed;
      inset: 0;
      z-index: 9998;
      display:none;
    }
    .navDrawer .backdrop{
      position:absolute; inset:0;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(6px);
    }
    .navDrawer .panel{
      position:absolute;
      left: 50%;
      top: 14px;
      transform: translateX(-50%);
      right: auto;
      width: min(360px, calc(100vw - 28px));
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.52);
      backdrop-filter: blur(14px);
      box-shadow: 0 28px 80px rgba(0,0,0,.65);
      padding: 12px;
    }
    .navDrawer .panelHeader{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 6px 10px;
    }
    .navDrawer .panelHeader .t{
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: 11px;
      color: rgba(255,255,255,.80);
    }
    .navDrawer .close{
      width: 42px; height: 42px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      cursor:pointer;
    }
    .navDrawer .drawerLinks{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 6px;
    }
    .navDrawer a{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 12px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.86);
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 11px;
      text-decoration:none;
    }
    .navDrawer a:hover{ background: rgba(255,255,255,.07); }

    @media (max-width: 1100px){
      .topbar{
        position: sticky;
        top: 0;
        z-index: 50;
      }
      .topbarInner{
        gap: 12px;
      }
      .topbarRight{
        gap: 10px;
      }
      .navLinks{ display:none; }
      .navToggle{ display:inline-flex; }
      .brandTitle{ font-size: 12px; letter-spacing: .26em; }
      .brandSub{ font-size: 10px; letter-spacing: .24em; }
      .meta{ display:none; } /* versionrad flyttas visuellt (finns kvar i footer) */

      .topbarInner{
        align-items: center;
      }
      .topbarLeft{
        min-width: 0;
      }
      .brand{
        min-width: 0;
      }

    }
    @media (max-width: 720px){
      .hero{ min-height: 560px; }
      .heroCopy{ padding: 14px; }
      .hero h1{ font-size: 34px; letter-spacing: .08em; }
      .slogan{ font-size: 12px; letter-spacing: .18em; }
      .lead{ font-size: 14px; }
      .grid{ grid-template-columns: 1fr; }
      .twoCol{ grid-template-columns: 1fr; }
    }

    
    /* ScrollSpy active link (v1.4.7) */
    .nav a.active,
    .navDrawer a.active{
      border-color: rgba(198,31,43,.55) !important;
      background: rgba(198,31,43,.16) !important;
      box-shadow: 0 18px 60px rgba(198,31,43,.18);
      color: rgba(255,255,255,.95) !important;
    }

    
    /* Scroll progress (v1.4.8) */
    .scrollProgress{
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      z-index: 9997;
      background: linear-gradient(90deg, rgba(198,31,43,.0), rgba(198,31,43,.85), rgba(255,255,255,.55));
      box-shadow: 0 10px 30px rgba(198,31,43,.25);
      pointer-events: none;
    }
    .scrollProgressTrack{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      z-index: 9996;
      background: rgba(255,255,255,.05);
      pointer-events: none;
    }

    
    /* Drawer current section label (v1.4.9) */
    #navCurrent{ color: rgba(255,255,255,.95); font-weight: 900; }

    
    /* ========= NAV RESPONSIVE FIX (v1.5.0) ========= */
    .navToggle{
      display:none;
      align-items:center;
      justify-content:center;
      width: 46px; height: 46px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
      backdrop-filter: blur(10px);
      cursor:pointer;
      user-select:none;
    }
    .navToggle svg{ width:22px; height:22px; opacity:.92; }
    .navLinks{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .navDrawer{
      position: fixed;
      inset: 0;
      z-index: 9998;
      display:none;
    }
    .navDrawer .backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); }
    .navDrawer .panel{
      position:absolute;
      right: 14px;
      top: 14px;
      width: min(360px, calc(100vw - 28px));
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.52);
      backdrop-filter: blur(14px);
      box-shadow: 0 28px 80px rgba(0,0,0,.65);
      padding: 12px;
    }
    .navDrawer .panelHeader{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 8px 10px;
      align-items:center;
      padding: 6px 6px 10px;
    }
    .navDrawer .panelHeader .t:first-child{ grid-column: 1 / 2; }
    .navDrawer .panelHeader .t:nth-child(2){ grid-column: 1 / 2; }
    .navDrawer .close{
      grid-column: 2 / 3;
      grid-row: 1 / 3;
      width: 42px; height: 42px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      cursor:pointer;
    }
    .navDrawer .drawerLinks{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 6px;
    }
    .navDrawer a{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 12px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.86);
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 11px;
      text-decoration:none;
    }
    .navDrawer a:hover{ background: rgba(255,255,255,.07); }

    @media (max-width: 1100px){
      .navLinks{ display:none !important; }
      .navToggle{ display:inline-flex !important; }
      .meta{ display:none !important; }
    }

    
    /* Current section pill (v1.5.1) */
    .currentPill{
      display:none;
      align-items:center;
      justify-content:center;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.86);
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: 11px;
      max-width: 42vw;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @media (max-width: 1100px){
      .currentPill{ display:inline-flex; }
    }

    
    /* Top CTA (v1.5.2) */
    .joinTop{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(198,31,43,.45);
      background: rgba(198,31,43,.16);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: 11px;
      text-decoration: none;
      box-shadow: 0 18px 60px rgba(198,31,43,.14);
      white-space: nowrap;
    }
    .joinTop:hover{ background: rgba(198,31,43,.22); }
    @media (max-width: 360px){
      .joinTop{ display:none; }
    }

    
    /* Drawer CTA (v1.5.3) */
    .joinDrawer{
      grid-column: 1 / -1;
      border-color: rgba(198,31,43,.55) !important;
      background: rgba(198,31,43,.18) !important;
      box-shadow: 0 18px 60px rgba(198,31,43,.16);
    }

    
    /* Map pin icon + link styling (v1.5.4) */
    .iconPin{
      width: 16px; height: 16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-right: 8px;
      opacity: .92;
    }
    .iconPin svg{ width: 16px; height: 16px; }
    #cfg_mapsLink{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      text-decoration: none;
    }
    #cfg_mapsLink .mapsText{ text-decoration: underline; text-underline-offset: 3px; }
    #cfg_mapsLink:hover .mapsText{ opacity: .95; }

    /* Extra Join CTAs (v1.5.4) */
    .btnJoin{
      border-color: rgba(198,31,43,.40) !important;
      background: rgba(198,31,43,.10) !important;
    }
    .btnJoin:hover{ background: rgba(198,31,43,.16) !important; }

    .footerJoin{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(198,31,43,.45);
      background: rgba(198,31,43,.14);
      color: rgba(255,255,255,.92);
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size: 11px;
      text-decoration:none;
      margin-top: 10px;
    }
    .footerJoin:hover{ background: rgba(198,31,43,.20); }

    /* Floating join button on mobile */
    .joinFab{
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 9995;
      display:none;
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid rgba(198,31,43,.55);
      background: rgba(198,31,43,.22);
      color: rgba(255,255,255,.95);
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size: 11px;
      text-decoration:none;
      box-shadow: 0 22px 70px rgba(198,31,43,.22);
      backdrop-filter: blur(10px);
    }
    .joinFab:hover{ background: rgba(198,31,43,.28); }
    @media (max-width: 900px){
      .joinFab{ display:inline-flex; }
    }
    @media (max-width: 420px){
      .joinFab{ right: 12px; bottom: 12px; }
    }

    
    /* Value badges (non-clickable) v1.5.5 */
    .valueBadge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 12px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.085);
      color: rgba(255,255,255,.70);
      cursor: default;
      user-select: none;
      box-shadow: none !important;
      text-decoration: none;
    }
    .valueBadge:hover{ background: rgba(255,255,255,.035); }
    .valueBadge:active{ transform: none !important; }
    .valueBadge:focus{ outline: none; }
    .valueIcon{
      width: 10px; height: 10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color: rgba(198,31,43,.55);
      font-size: 12px;
      transform: translateY(-1px);
      opacity: .95;
    }
    .valueText{
      letter-spacing: .14em;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 12px;
    }

    
    /* Link badge emphasis v1.5.5 */
    a.tagPill, a.linkBadge, a#cfg_websiteLinkBottom, a#cfg_mapsLink, a.joinTop, a.joinDrawer, a.footerJoin{
      cursor: pointer;
    }

    
    /* Badge differentiation (link vs value) v1.5.6 */
    .badgeRow a.badge{ cursor:pointer; }
    .badgeRow div.badge{
      cursor: default;
      user-select: none;
      opacity: .92;
      background: rgba(255,255,255,.028);
      border-color: rgba(255,255,255,.085);
      box-shadow: none !important;
    }
    .badgeRow div.badge:hover{
      transform: none !important;
      background: rgba(255,255,255,.028);
    }
    /* Value badge dot: muted + no glow */
    .badgeRow div.badge .dot{
      background: rgba(255,255,255,.22) !important;
      box-shadow: none !important;
      filter: none !important;
    }
    
    /* Optional: make value dots hollow ring */
    .badgeRow div.badge .dot{
      background: transparent !important;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.28) !important;
    }

    /* Link badge dot stays red + can glow on hover */
    .badgeRow a.badge .dot{
      background: rgba(198,31,43,.95);
      box-shadow: 0 0 0 6px rgba(198,31,43,.18);
    }
    .badgeRow a.badge:hover .dot{
      box-shadow: 0 0 0 8px rgba(198,31,43,.22);
    }

    
    /* Site badge polish v1.5.8 */
    .siteRow{
      width: fit-content;
      max-width: 100%;
      margin: 12px auto 10px auto;
      padding: 0;
      justify-content: center;
    }
    .siteRow .badge{
      padding-left: 18px;
      padding-right: 22px;
      border-color: rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
    }
    .siteHint{
      margin: 0 auto 14px auto;
      width: fit-content;
      max-width: 100%;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      color: rgba(255,255,255,.58);
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      user-select: none;
    }

    @media print{
      .editToggle, .editPanel, .editBadge{ display:none !important; }
      body.editMode [data-edit="true"]{ outline: none !important; }
    }

    /* Sections */
    .section{margin-top: 26px; scroll-margin-top: 92px;}
    .head{
      border-radius: var(--r2);
      border: 1px solid var(--line);
      background:
        radial-gradient(900px 520px at 20% 0%, rgba(198,31,43,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow: var(--shadow2);
      padding: 18px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
    }
    .headL{display:flex; align-items:center; gap: 12px; min-width:0;}
    .headI{
      width:46px;height:46px;border-radius:18px;
      background: linear-gradient(180deg, rgba(198,31,43,.26), rgba(198,31,43,.10));
      border: 1px solid rgba(198,31,43,.32);
      box-shadow: 0 0 0 6px rgba(198,31,43,.10);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }
    .headI svg{width:22px;height:22px}
    .ht{
      margin:0;
      font-size: 15px;
      font-weight: 1000;
      letter-spacing:.14em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .hd{
      margin: 4px 0 0;
      color: var(--muted2);
      font-size: 12px;
      letter-spacing:.04em;
      max-width: 78ch;
    }
    .tag{
      color: rgba(255,255,255,.70);
      font-size: 12px;
      letter-spacing:.18em;
      text-transform: uppercase;
      border-left: 3px solid var(--accent);
      padding-left: 10px;
      white-space: nowrap;
      flex:0 0 auto;
    }

    .grid{display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px;}
    .card{
      border-radius: var(--r);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow: var(--shadow2);
      padding: 18px;
    }
    .card h3{
      margin:0 0 10px;
      font-size: 13px;
      letter-spacing:.14em;
      text-transform: uppercase;
    }
    .card p{margin:0; color: var(--muted); font-size: 13px;}
    ul{margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px;}
    li{margin: 7px 0;}

    /* Timeline */
    .timeline{display:grid; grid-template-columns: 150px 1fr; gap: 10px 16px; margin-top: 12px;}
    .time{font-weight: 1000; letter-spacing:.06em;}
    .event{color: var(--muted); padding: 0 0 12px 0; border-bottom: 1px dashed rgba(255,255,255,.16); position:relative;}
    .event::before{content:""; position:absolute; left:-14px; top: 6px; width: 8px;height:8px;border-radius:999px;background:var(--accent); box-shadow:0 0 0 6px rgba(198,31,43,.14);}
    .event b{color: var(--text);}

    /* Team */
    .teamGrid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 14px;}
    .person{
      border-radius: var(--r);
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.22);
      box-shadow: var(--shadow2);
      padding: 14px;
      text-align:center;
    }
    .avatar{
      width:100%;
      aspect-ratio: 1 / 1;
      border-radius:999px;
      border: 1px solid rgba(255,255,255,.16);
      overflow:hidden;
      background: rgba(255,255,255,.04);
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .avatar img{width:100%; height:100%; object-fit: cover;}
    .avatar .hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding: 12px; color: rgba(255,255,255,.70); font-size: 12px; line-height:1.35;}
    .n{margin-top: 10px; font-weight: 1000; letter-spacing:.18em; color: var(--accent);}
    .role{
      margin-top: 6px;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 7px 10px;
      border-radius:999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.20);
      color: rgba(255,255,255,.78);
      font-size: 11px;
      letter-spacing:.12em;
      text-transform: uppercase;
    }
    .p{margin-top: 8px; color: var(--muted2); font-size: 12px;}

    /* Poster block */
    .poster{
      margin-top: 14px;
      border-radius: var(--r2);
      border: 1px solid var(--line2);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .poster::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(0deg, rgba(7,7,10,.85), rgba(7,7,10,.35) 55%, rgba(7,7,10,.25)),
        url(var(--hero-url)) center/cover no-repeat,
        url(var(--hero-fallback-url)) center/cover no-repeat;
      opacity:.85;
      filter: saturate(1.0) contrast(1.1);
      pointer-events:none;
    }
    .posterInner{
      position:relative;
      padding: 22px 22px 18px;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 16px;
      align-items: stretch;
    }
    .ptK{color: rgba(255,255,255,.70); letter-spacing:.22em; text-transform:uppercase; font-size: 12px;}
    .ptT{margin: 8px 0 0; font-size: clamp(30px, 4.2vw, 54px); letter-spacing:.10em; text-transform:uppercase; line-height:1.02;}
    .line{height: 3px; width: 86px; background: var(--accent); border-radius:999px; margin: 14px 0 10px;}
    .ptP{margin:0; color: rgba(255,255,255,.76); font-size: 14px;}
    .box{
      border-radius: var(--r);
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.22);
      box-shadow: var(--shadow2);
      padding: 14px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      backdrop-filter: blur(6px);
    }
    .qr{
      margin-top:auto;
      border-radius: calc(var(--r) + 4px);
      border: 1px dashed rgba(255,255,255,.22);
      background: rgba(255,255,255,.03);
      aspect-ratio: 1 / 1;
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(255,255,255,.75);
      text-align:center;
      padding: 12px;
      font-size: 12px;
      line-height: 1.35;
    }
    .qr img{max-width:70%; margin-top:10px;}

    /* Footer */
    .footer{
      margin-top: 26px;
      padding: 16px 18px;
      border-top: 1px solid var(--line);
      color: var(--muted2);
      font-size: 12px;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      justify-content:space-between;
    }

    /* Responsive */
    @media (max-width: 980px){
      .heroInner{grid-template-columns: 1fr;}
      .grid{grid-template-columns: 1fr;}
      .teamGrid{grid-template-columns: repeat(2, minmax(0,1fr));}
      .posterInner{grid-template-columns: 1fr;}
      .nav{justify-content:flex-start;}
      .timeline{grid-template-columns: 110px 1fr;}
    }
    @media (max-width: 520px){
      .teamGrid{grid-template-columns: 1fr;}
      .head{flex-direction:column; align-items:flex-start;}
      .tag{border-left:0; padding-left:0; border-top:2px solid var(--accent); padding-top:8px;}
    }

    /* Print */
    @media print{
      .topbar, .nav, .ctaRow{display:none !important;}
      body{background:#fff; color:#111;}
      :root{--bg:#fff; --text:#111; --muted:#333; --muted2:#444; --line: rgba(0,0,0,.12); --line2: rgba(0,0,0,.16); --shadow:none; --shadow2:none;}
      .hero, .card, .head, .poster, .person{box-shadow:none;}
      .hero{min-height: 420px; border-color: rgba(0,0,0,.16);}
      .poster{border-color: rgba(0,0,0,.16);}
      .printBreak{break-before: page; page-break-before: always;}
    }

/* =========================================
   INDEX HERO – PHOTO BACKGROUND BLEND
   (lägg längst ner i style.css)
   ========================================= */

:root{
  /* Byt till dina faktiska filnamn */
  --hero-photo: url("../assets/img/gym-bg.png");
  /* Styr hur tydlig bilden är (0.06–0.30 är oftast perfekt) */
  --hero-photo-opacity: 0.16;
  /* Grain/noise (om du har en noise.png, annars sätt 0) */
  --hero-grain: url("../assets/img/noise.png");
  --hero-grain-opacity: 0.05;

  /* Röd glöd (matchar ert tema) */
  --hero-red-1: rgba(198,31,43,0.40);
  --hero-red-2: rgba(198,31,43,0.18);
}

/* Sätt gärna denna klass på index-hero (se steg 3) */
.hero.isIndex{
  position: relative;
  overflow: hidden;
}

/* FOTO-LAGER */
.hero.isIndex::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--hero-photo-opacity);
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  pointer-events:none;
  z-index: 0;
}

/* RÖD GLOW + VIGNETTE (läsbarhet) */
.hero.isIndex::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 18% 30%, var(--hero-red-1), rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 80% 10%, var(--hero-red-2), rgba(0,0,0,0) 55%),
    radial-gradient(1200px 800px at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  pointer-events:none;
  z-index: 1;
}

/* GRAIN (valfritt) */
.hero.isIndex .heroInner{
  position: relative;
  z-index: 2; /* allt innehåll ovanpå overlays */
}

.hero.isIndex .heroInner::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: var(--hero-grain);
  background-size: 220px 220px;
  opacity: var(--hero-grain-opacity);
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index: -1; /* bakom content men inom heroInner-lager */
}

/* Mobil: minska foto lite om det blir "för mycket" */
@media (max-width: 768px){
  :root{
    --hero-photo-opacity: 0.12;
  }
}

/* =========================================
   INDEX – SNABBFAKTA BACKGROUND
   ========================================= */

.sectionIndexBg{
  position: relative;
  overflow: hidden;
  background: #050505; /* fallback */
}

/* FOTO-LAGRET */
.sectionIndexBg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/gym-bg.png"); /* välj bild */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.14; /* justera styrka */
  filter: saturate(1.05) contrast(1.05);
  pointer-events: none;
  z-index: 0;
}

/* RÖD OVERLAY + VIGNETTE */
.sectionIndexBg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      800px 400px at 20% 30%,
      rgba(198,31,43,0.35),
      rgba(0,0,0,0) 60%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.75)
    );
  pointer-events: none;
  z-index: 1;
}

/* Se till att innehållet ligger över bakgrunden */
.sectionIndexBg > *{
  position: relative;
  z-index: 2;
}