@font-face{
  font-family:'Roca One';
  src:url('../assets/fonts/rocaone-light.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roca One';
  src:url('../assets/fonts/rocaone-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roca One';
  src:url('../assets/fonts/rocaone-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roca One';
  src:url('../assets/fonts/rocaone-heavy.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roca One';
  src:url('../assets/fonts/rocaone-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Roca One';
  src:url('../assets/fonts/rocaone-bolditalic.woff2') format('woff2');
  font-weight:700;font-style:italic;font-display:swap;
}

:root{
  --bg:#0d1310;
  --bg-2:#131a16;
  --surface:rgba(255,255,255,.04);
  --text:#f4f1e8;
  --text-dim:#b8b0a0;
  --text-mute:#82786a;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);

  --kmr-green:#6D913D;
  --kmr-green-2:#91BC59;
  --kmr-orange:#F49E29;
  --kmr-orange-2:#FDB95D;
  --kmr-purple-2:#B98Aff;

  /* Phase colors — match respective panel accents for consistency */
  --c-start:#2DD4BF;
  --c-music:#5B8FE0;
  --c-graphics:#91BC59;
  --c-release:#B98Aff;
  --c-marketing:#F49E29;

  --glass-blur:blur(20px) saturate(1.6);
  --glass-bg:rgba(255,255,255,.06);
  --glass-bg-strong:rgba(255,255,255,.1);
  --glass-border:rgba(255,255,255,.12);
  --glass-shadow:0 8px 32px rgba(0,0,0,.37);
  --glass-highlight:linear-gradient(135deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 40%,transparent 70%);

  --serif:'Roca One','Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;

  --tab-c-overview:#F49E29;
  --tab-c-schema:#2DD4BF;
  --tab-c-musik:#5B8FE0;
  --tab-c-grafik:#91BC59;
  --tab-c-utgivning:#B98Aff;
  --tab-c-pris:#F472B6;

  /* #2 buggfix: ink/ink-soft used by Grafik panel but never defined */
  --ink:var(--text);
  --ink-soft:var(--text-dim);

  /* #6 per-panel accent — Grafik uses green per KMR brand (Media=green), not orange */
  --accent-overview:#F49E29;
  --accent-overview-rgb:244,158,41;
  --accent-overview-2:#B98Aff;
  --accent-overview-2-rgb:185,138,255;
  --accent-schema:#2DD4BF;
  --accent-schema-rgb:45,212,191;
  --accent-grafik:#91BC59;
  --accent-grafik-rgb:145,188,89;
  --accent-pris:#F472B6;
  --accent-pris-rgb:244,114,182;
  --accent-musik:#5B8FE0;
  --accent-musik-rgb:91,143,224;
  --accent-utgivning:#B98Aff;
  --accent-utgivning-rgb:185,138,255;

  /* ===== DESIGN SYSTEM TOKENS =====
     Centralized so every component reads from the same scale.
     Change a value here once — it propagates everywhere. */

  /* — Typography scale (fluid clamp: min, preferred, max) — */
  --fs-h1:clamp(2.4rem,9vw,4.5rem);
  --fs-h2:clamp(1.9rem,5.5vw,2.6rem);
  --fs-body:clamp(1rem,2.4vw,1.08rem);
  --fs-body-sm:.92rem;

  /* — Letter spacing — */

  /* — Spacing scale (4px base, doubling pattern) — */
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;

  /* — Container widths — */
  --cw-read:680px;      /* prose / glass-quote / price-card */
  --cw-wide:1100px;    /* standard content wrap */

  /* — Border radius — */
  --r-xl:20px;

  /* — Transitions — */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:500}

.wrap{max-width:780px;margin:0 auto;padding:0 var(--sp-6)}
@media(min-width:720px){.wrap{padding:0 var(--sp-10);max-width:900px}}
@media(min-width:1024px){.wrap{max-width:var(--cw-wide);padding:0 60px}}
@media(min-width:1400px){.wrap{max-width:1200px;padding:0 60px}}

/* Content wrap after page-header — ensures spacing from header border */
.panel > .wrap{padding-top:56px}
@media(min-width:1024px){.panel > .wrap{padding-top:72px}}
/* Pris panel: tighter width for focus */
#panel-pris .wrap{max-width:760px}
@media(min-width:1024px){#panel-pris .wrap{max-width:820px}}


/* ===== GLASS ===== */
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:var(--glass-shadow);
  position:relative;overflow:hidden;
}
.glass::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:var(--glass-highlight);pointer-events:none;border-radius:20px 20px 0 0;
}

/* ===== ANIMATIONS ===== */
@keyframes stagger-in{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}

@keyframes panel-enter{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.stagger > *{animation:stagger-in .6s cubic-bezier(.22,1,.36,1) backwards}
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.12s}
.stagger > *:nth-child(3){animation-delay:.19s}
.stagger > *:nth-child(4){animation-delay:.26s}
.stagger > *:nth-child(5){animation-delay:.33s}
.stagger > *:nth-child(6){animation-delay:.4s}

.panel.active{animation:panel-enter .4s cubic-bezier(.22,1,.36,1)}



/* ===== PAGE HEADER (replaces hero — #1 unified header for all panels) ===== */
/* FIX: No negative margins. Page-header sits directly in .panel (not inside .wrap).
   It's full-width by nature. Its inner .wrap constrains content width. */
.page-header{
  position:relative;
  padding:64px 0 40px;
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
@media(min-width:720px){.page-header{padding:88px 0 48px}}
@media(min-width:1024px){.page-header{padding:100px 0 56px}}
.page-header::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%,rgba(var(--panel-accent-rgb,145,188,89),.14) 0%,transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 100%,rgba(var(--panel-accent-rgb,145,188,89),.04) 0%,transparent 60%),
    linear-gradient(180deg,var(--bg-2) 0%,var(--bg-2) 60%,var(--bg) 100%);
}
.page-header::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(200px,50%);height:2px;
  background:linear-gradient(90deg,transparent,var(--panel-accent,var(--kmr-green-2)),transparent);
  z-index:1;
}
/* Översikt: KMR Studio A hero image + gradient accent (orange → lila) */
#panel-overview .page-header::before{
  background:
    linear-gradient(180deg,rgba(13,19,16,.82) 0%,rgba(13,19,16,.92) 100%),
    radial-gradient(ellipse 90% 70% at 30% 0%,rgba(var(--accent-overview-rgb),.14) 0%,transparent 65%),
    radial-gradient(ellipse 90% 70% at 70% 0%,rgba(var(--accent-overview-2-rgb),.14) 0%,transparent 65%),
    url('../assets/hero/hero-studio-a.jpg') center/cover no-repeat;
}
#panel-overview .page-header::after{
  background:linear-gradient(90deg,transparent,var(--accent-overview),var(--accent-overview-2),transparent);
}
#panel-overview .page-header .eyebrow{
  background:linear-gradient(135deg,rgba(var(--accent-overview-rgb),.12),rgba(var(--accent-overview-2-rgb),.12));
  border:1px solid rgba(var(--accent-overview-rgb),.25);
  color:var(--accent-overview);
}
#panel-overview .page-header h1 .italic{
  background:linear-gradient(135deg,var(--accent-overview),var(--accent-overview-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.6)) brightness(1.15);
}
#panel-overview .page-stats .dot{
  background:var(--accent-overview);box-shadow:0 0 6px var(--accent-overview);
}
#panel-overview .page-header-cta{
  background:linear-gradient(135deg,rgba(var(--accent-overview-rgb),.15),rgba(var(--accent-overview-2-rgb),.15));
  border:1px solid rgba(var(--accent-overview-rgb),.35);
  box-shadow:0 0 24px rgba(var(--accent-overview-rgb),.08);
}
#panel-overview .page-header-cta:hover{
  background:linear-gradient(135deg,rgba(var(--accent-overview-rgb),.22),rgba(var(--accent-overview-2-rgb),.22));
  border-color:rgba(var(--accent-overview-rgb),.5);
}
.page-header .wrap{position:relative;z-index:2;text-align:center}
/* Removed ::after decorative line — it created visual asymmetry */
.page-header .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--panel-accent,var(--kmr-green-2));margin:0 auto 28px;
  padding:8px 16px;border-radius:100px;
  background:rgba(var(--panel-accent-rgb,145,188,89),.12);
  border:1px solid rgba(var(--panel-accent-rgb,145,188,89),.25);
}
.page-header .eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--panel-accent,var(--kmr-green-2));
  box-shadow:0 0 8px var(--panel-accent,var(--kmr-green-2));
}
.page-header .eyebrow .eyebrow-icon{width:16px;height:16px;flex-shrink:0}
.page-header .eyebrow .eyebrow-logo{width:22px;height:22px;flex-shrink:0}
.page-header .eyebrow:has(.eyebrow-logo-img){
  padding:10px 22px 10px 28px;
}
.page-header .eyebrow:has(.eyebrow-icon)::before,
.page-header .eyebrow:has(.eyebrow-logo-img)::before{display:none}
@keyframes music-float{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes logo-shimmer{0%,100%{opacity:1}50%{opacity:.78}}
.page-header .eyebrow .eyebrow-logo-img{height:22px;width:auto;flex-shrink:0;object-fit:contain;animation:logo-shimmer 2.4s ease-in-out infinite}
@keyframes camera-shimmer{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes cd-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes clock-minute-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes price-wave{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(1.08)}}
@keyframes overview-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.95)}}
#panel-musik .eyebrow-icon{animation:music-float .8s ease-in-out infinite;transform-origin:center}
#panel-grafik .eyebrow-icon{animation:camera-shimmer 2s ease-in-out infinite}
#panel-utgivning .cd-disc{animation:cd-spin 8s linear infinite;transform-origin:center}
#panel-schema .clock-icon{transform-origin:center}
#panel-schema .clock-icon .clock-hour-hand{transform-origin:12px 12px}
#panel-schema .clock-icon .clock-minute-hand{transform-origin:12px 12px;animation:clock-minute-sweep 60s linear infinite}
#panel-pris .eyebrow-icon{animation:price-wave 2.5s ease-in-out infinite;transform-origin:center}
#panel-overview .eyebrow-icon{animation:overview-pulse 3s ease-in-out infinite}
.page-header h1{
  font-size:var(--fs-h1);
  line-height:.98;letter-spacing:-.025em;
  font-weight:400;margin-bottom:var(--sp-3);
  padding:0 var(--sp-8);max-width:900px;margin-inline:auto;
}
/* All panels use the same h1 size — modular header */
.page-header h1 .italic{font-style:italic;color:var(--panel-accent,var(--kmr-orange-2));font-weight:300}
.page-header .lede{
  font-size:clamp(1.02rem,2.4vw,1.25rem);
  color:var(--text-dim);max-width:680px;margin:0 auto 20px;font-weight:300;
  min-height:2.6em;
}

/* #5 compact stats strip in page-header */
.page-stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  font-size:.88rem;color:var(--text-dim);
  padding:0;margin-bottom:0;
}
.page-stats .stat{display:inline-flex;align-items:center;gap:7px}
.page-stats .stat strong{color:var(--text);font-weight:600;font-size:.95rem}
.page-stats .dot{width:5px;height:5px;border-radius:50%;background:var(--panel-accent,var(--kmr-green-2));box-shadow:0 0 6px var(--panel-accent,var(--kmr-green-2));opacity:.7}

/* CTA button in page-header — gives eye a landing spot */
.page-header-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin:24px auto 0;
  padding:14px 28px;
  border-radius:100px;
  background:rgba(var(--panel-accent-rgb,145,188,89),.15);
  border:1px solid rgba(var(--panel-accent-rgb,145,188,89),.35);
  color:var(--text);
  font-family:var(--sans);font-size:.92rem;font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 0 24px rgba(var(--panel-accent-rgb,145,188,89),.08);
}
.page-header-cta:hover{
  background:rgba(var(--panel-accent-rgb,145,188,89),.22);
  border-color:rgba(var(--panel-accent-rgb,145,188,89),.5);
  transform:translateY(-2px);
  box-shadow:0 4px 32px rgba(var(--panel-accent-rgb,145,188,89),.15);
}
.page-header-cta .arrow{
  font-size:1.1rem;
  transition:transform .25s ease;
}
.page-header-cta:hover .arrow{transform:translateX(3px)}

/* ===== BOTTOM NAV ===== */
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:max(12px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  width:calc(100% - 32px);
  max-width:420px;
  padding:6px 8px;
  background:var(--bg);
  border:1px solid var(--glass-border);
  border-radius:24px;
  box-shadow:0 8px 32px rgba(0,0,0,.45),
             0 2px 8px rgba(0,0,0,.25),
             inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.bottom-nav-tab{
  flex:1 1 0;
  min-width:0;
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:14px 4px 15px;
  border-radius:18px;
  border:none;
  background:transparent;
  color:var(--text-dim);
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:600;
  line-height:1.1;
  letter-spacing:.01em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s ease, background .25s ease, transform .15s ease;
  position:relative;
}
.bottom-nav-tab:hover{
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.bottom-nav-tab:active{
  transform:scale(.94);
}
.bottom-nav-tab.active{
  color:var(--text);
  font-weight:600;
}
.bottom-nav-tab.active::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:3px;
  border-radius:2px;
  background:var(--tab-color,var(--kmr-green-2));
  box-shadow:0 0 10px var(--tab-color,var(--kmr-green-2));
}
.bottom-nav-tab[data-tab="overview"]{ --tab-color:var(--tab-c-overview) }
.bottom-nav-tab[data-tab="schema"]{ --tab-color:var(--tab-c-schema) }
.bottom-nav-tab[data-tab="musik"]{ --tab-color:var(--tab-c-musik) }
.bottom-nav-tab[data-tab="grafik"]{ --tab-color:var(--tab-c-grafik) }
.bottom-nav-tab[data-tab="utgivning"]{ --tab-color:var(--tab-c-utgivning) }
.bottom-nav-tab[data-tab="pris"]{ --tab-color:var(--tab-c-pris) }

/* Full-width on very small screens */
@media(max-width:480px){
  .bottom-nav{
    width:100%;
    max-width:none;
    bottom:0;
    left:0;
    transform:none;
    border-radius:24px 24px 0 0;
    border-bottom:none;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 24px rgba(0,0,0,.35),
               inset 0 1px 0 rgba(255,255,255,.06);
  }
}
/* Compact desktop/landscape tweak */
@media(min-width:720px){
  .bottom-nav{
    max-width:440px;
    padding:7px 10px;
    bottom:max(16px, env(safe-area-inset-bottom));
  }
  .bottom-nav-tab{
    font-size:.8rem;
    padding:15px 6px 16px;
  }
}

/* ===== PANELS ===== */
/* FIX: No padding-top on .panel — page-header handles it */
.panel{display:none}
.panel.active{display:block}

/* ===== SECTION ===== */
/* #9 alternating section backgrounds for rhythm */
section{padding:56px 0;border-top:1px solid var(--border)}
@media(min-width:1024px){section{padding:72px 0}}
/* Removed section:first-child override — content .wrap now has padding-top */
/* Content wrap's padding-top replaces first-section's top padding */
.panel > .wrap > section:first-child{padding-top:0;border-top:none}
.panel-alt .wrap > section:nth-of-type(even){background:rgba(255,255,255,.015)}
.section-head{margin-bottom:36px;text-align:center}
/* #3 unified section-tag via classes instead of inline styles */
.section-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 20px;border-radius:100px;margin-bottom:16px;
  border:1px solid;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.section-tag--overview{color:var(--accent-overview);border-color:rgba(var(--accent-overview-rgb),.25);background:rgba(var(--accent-overview-rgb),.08)}
.section-tag--schema{color:var(--accent-schema);border-color:rgba(var(--accent-schema-rgb),.25);background:rgba(var(--accent-schema-rgb),.08)}
.section-tag--musik{color:var(--accent-musik);border-color:rgba(var(--accent-musik-rgb),.25);background:rgba(var(--accent-musik-rgb),.08)}
.section-tag--grafik{color:var(--accent-grafik);border-color:rgba(var(--accent-grafik-rgb),.25);background:rgba(var(--accent-grafik-rgb),.08)}
.section-tag--utgivning{color:var(--accent-utgivning);border-color:rgba(var(--accent-utgivning-rgb),.25);background:rgba(var(--accent-utgivning-rgb),.08)}
.section-tag--pris{color:var(--accent-pris);border-color:rgba(var(--accent-pris-rgb),.25);background:rgba(var(--accent-pris-rgb),.08)}
.section-head h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.015em;font-weight:400;margin-bottom:var(--sp-3)}
.section-head .sub{color:var(--text-dim);font-size:1.02rem;max-width:680px;font-weight:300;margin:0 auto}
/* Distinct chapter separators */
#panel-musik section[id^="musik-"]{padding-top:48px;border-top:1px solid var(--border);margin-top:48px}
#panel-musik section[id^="musik-"]:first-of-type{border-top:none;margin-top:0;padding-top:0}

/* #6 phase-start section-tag uses overview accent (green), not blue */
.phase-start .section-tag{color:var(--accent-overview);border-color:rgba(var(--accent-overview-rgb),.25);background:rgba(var(--accent-overview-rgb),.08)}

/* Panel-locked timeline colors: each panel's timeline uses that panel's accent */
#panel-musik .tl-phase::before,
#panel-musik .tl-event[data-phase]{border-left-color:var(--accent-musik)}
#panel-musik .tl-phase[data-phase]::before{background:var(--accent-musik);box-shadow:0 0 10px rgba(var(--accent-musik-rgb),.4),0 0 0 1px var(--border-strong)}

#panel-utgivning .tl-phase::before,
#panel-utgivning .tl-event[data-phase]{border-left-color:var(--accent-utgivning)}
#panel-utgivning .tl-phase[data-phase]::before{background:var(--accent-utgivning);box-shadow:0 0 10px rgba(var(--accent-utgivning-rgb),.4),0 0 0 1px var(--border-strong)}

#panel-schema .tl-phase[data-phase="start"]::before{background:var(--c-start);box-shadow:0 0 10px rgba(45,212,191,.4),0 0 0 1px var(--border-strong)}
#panel-schema .tl-phase[data-phase="music"]::before{background:var(--c-music);box-shadow:0 0 10px rgba(91,143,224,.4),0 0 0 1px var(--border-strong)}
#panel-schema .tl-phase[data-phase="mix"]::before{background:var(--c-music);box-shadow:0 0 10px rgba(91,143,224,.35),0 0 0 1px var(--border-strong)}
#panel-schema .tl-phase[data-phase="graphics"]::before{background:var(--c-graphics);box-shadow:0 0 10px rgba(145,188,89,.4),0 0 0 1px var(--border-strong)}
#panel-schema .tl-phase[data-phase="marketing"]::before{background:var(--c-marketing);box-shadow:0 0 10px rgba(244,158,41,.4),0 0 0 1px var(--border-strong)}
#panel-schema .tl-phase[data-phase="release"]::before{background:var(--c-release);box-shadow:0 0 10px rgba(185,138,255,.4),0 0 0 1px var(--border-strong)}

/* ===== HERO IMAGE OVERLAYS per panel ===== */
/* Subtle artist/studio imagery as atmospheric background in page-headers */
#panel-musik .page-header::before{
  background:
    linear-gradient(180deg,rgba(13,19,16,.85) 0%,rgba(13,19,16,.94) 100%),
    url('../assets/hero/team-studio-a.jpg') center/cover no-repeat;
}
#panel-grafik .page-header::before{
  background:
    linear-gradient(180deg,rgba(13,19,16,.85) 0%,rgba(13,19,16,.94) 100%),
    url('../assets/hero/team-fotostudion.jpg') center/cover no-repeat;
}
#panel-utgivning .page-header::before{
  background:
    linear-gradient(180deg,rgba(13,19,16,.85) 0%,rgba(13,19,16,.94) 100%),
    url('../assets/hero/team-ute.jpg') center/cover no-repeat;
}
#panel-schema .page-header::before{
  background:
    linear-gradient(180deg,rgba(13,19,16,.85) 0%,rgba(13,19,16,.94) 100%),
    url('../assets/hero/studio-b-3.jpg') center/cover no-repeat;
}
#panel-pris .page-header::before{
  background:
    linear-gradient(180deg,rgba(13,19,16,.85) 0%,rgba(13,19,16,.94) 100%),
    url('../assets/hero/konferens-3.jpg') center/cover no-repeat;
}

/* ===== INTRO ===== */
.intro .section-head{text-align:center}
.intro p{font-size:1.05rem;color:var(--text-dim);margin:0 auto 18px;max-width:720px;font-weight:300}
.intro p strong{color:var(--text);font-weight:500}
/* #4 reduce glass density — secondary elements use flat surfaces */
.glass-quote{
  margin:0 auto var(--sp-6);max-width:100%;padding:var(--sp-6) var(--sp-6);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);position:relative;overflow:hidden;
  text-align:center;
}
.glass-quote::before{display:none}
.glass-quote .label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-accent,var(--kmr-green-2));margin-bottom:10px}
.value-props{display:grid;gap:16px;margin-bottom:0}
@media(min-width:560px){.value-props{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:1024px){.value-props{gap:24px}.value-prop{padding:32px 28px}}
.value-prop{
  padding:24px 20px;text-align:center;
  background:var(--surface);
  border:1px solid var(--border);border-radius:16px;
  transition:transform .25s,border-color .25s;
}
.value-prop:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.value-prop .num{font-family:var(--serif);font-size:1.9rem;font-weight:600;margin-bottom:4px;background:linear-gradient(135deg,var(--accent-overview),var(--accent-overview-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.value-prop .lbl{font-size:.82rem;color:var(--text-dim);font-weight:300}

/* ===== OVERVIEW STEPS ===== */
/* #8 auto-fit grid instead of rigid breakpoints */
.steps{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media(min-width:600px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.steps{grid-template-columns:repeat(5,1fr)}}
.step-card{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  padding:28px 24px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:20px;box-shadow:var(--glass-shadow);
  transition:transform .3s,border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
  cursor:pointer;text-decoration:none;color:inherit;
}
.step-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 40%,transparent 70%);
  pointer-events:none;
}
.step-card::after{
  content:'';position:absolute;inset:0;border-radius:20px;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.08);
  pointer-events:none;
}
.step-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 12px 40px rgba(0,0,0,.4),var(--glass-shadow);
}
.step-num{
  font-family:var(--serif);font-size:2.2rem;font-weight:600;
  line-height:1;flex-shrink:0;width:auto;text-align:left;position:relative;
  display:flex;align-items:center;gap:12px;
}
@media(min-width:600px){.step-num{font-size:2rem}}
.step-num .n{display:block}
.step-num .icon{font-size:1.4rem;display:block;margin-top:4px}
.step-num-icon{width:22px;height:22px;flex-shrink:0;display:block}
.step-card .step-body{flex:1;position:relative}
.step-card .step-name{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:4px}
@media(min-width:600px){.step-card .step-name{font-size:1.1rem}}
.step-card .step-desc{font-size:.92rem;color:var(--text-dim);font-weight:300;line-height:1.6}
.step-card .step-cta{margin-top:14px;font-size:.82rem;font-weight:600;color:var(--panel-accent,var(--kmr-green-2));display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.step-card:hover .step-cta{gap:10px}
.step-card[data-phase="start"] .step-num{color:var(--c-start)}
.step-card[data-phase="music"] .step-num{color:var(--c-music)}
/* #3 step-card phase colors now match respective panel accents */
.step-card[data-phase="mix"] .step-num{color:var(--c-music)}
.step-card[data-phase="graphics"] .step-num{color:var(--c-graphics)}
.step-card[data-phase="release"] .step-num{color:var(--c-release)}

/* ===== SCHEMA PANEL ===== */
.phase-pills{
  display:flex;flex-wrap:wrap;gap:20px;
  margin-bottom:20px;
  padding:0;justify-content:center;
}
.phase-pills::-webkit-scrollbar{display:none}
.phase-pill{
  padding:10px 14px;font-size:.82rem;font-weight:500;
  color:var(--text-dim);display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;flex-shrink:0;
  min-height:44px;
  border:none;background:transparent;
  transition:color .2s;
}
.phase-pill:hover{color:var(--text)}
.phase-pill .pill-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;opacity:.85}
.phase-pill[data-phase="start"] .pill-dot{background:var(--c-start);color:var(--c-start)}
.phase-pill[data-phase="music"] .pill-dot{background:var(--c-music);color:var(--c-music)}
.phase-pill[data-phase="mix"] .pill-dot{background:var(--kmr-green-2);color:var(--kmr-green-2)}
.phase-pill[data-phase="graphics"] .pill-dot{background:var(--kmr-purple-2);color:var(--kmr-purple-2)}
.phase-pill[data-phase="marketing"] .pill-dot{background:var(--c-marketing);color:var(--c-marketing)}
.phase-pill[data-phase="release"] .pill-dot{background:var(--c-release);color:var(--c-release)}

/* ===== TIMELINE — centered rail layout ===== */
.timeline{position:relative;padding:0;max-width:680px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--border-strong),var(--border),transparent);z-index:0;transform:translateX(-50%)}
.tl-phase{position:relative;margin:36px 0 16px;padding:0;text-align:center}
.tl-phase::before{
  content:'';position:absolute;left:50%;top:4px;
  width:12px;height:12px;border-radius:50%;
  border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--border-strong);
  z-index:1;transform:translateX(-50%);
}
/* Per-panel colors set below — these are defaults */
.tl-phase[data-phase="start"]::before{background:var(--c-start)}
.tl-phase[data-phase="music"]::before{background:var(--c-music)}
.tl-phase[data-phase="mix"]::before{background:var(--c-music)}
.tl-phase[data-phase="graphics"]::before{background:var(--c-graphics)}
.tl-phase[data-phase="marketing"]::before{background:var(--c-marketing)}
.tl-phase[data-phase="release"]::before{background:var(--c-release)}
.tl-phase h3{font-family:var(--serif);font-size:1.15rem;font-weight:500;text-align:center}
.tl-phase .phase-sub{font-size:.86rem;color:var(--text-mute);margin-top:2px;text-align:center}

.tl-event{
  position:relative;padding:16px 20px;margin:0 0 20px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:12px;
  transition:transform .25s,border-color .25s;
  text-align:center;z-index:1;
}
.tl-event::before{
  content:'';position:absolute;left:50%;top:-10px;
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--bg);
  z-index:1;transform:translateX(-50%);
}
/* Default node color — overridden per panel below */
.tl-event[data-phase]::before{background:var(--text-mute)}
#panel-musik .tl-event[data-phase]::before{background:var(--accent-musik);box-shadow:0 0 8px rgba(var(--accent-musik-rgb),.4)}
#panel-utgivning .tl-event[data-phase]::before{background:var(--accent-utgivning);box-shadow:0 0 8px rgba(var(--accent-utgivning-rgb),.4)}
#panel-schema .tl-event[data-phase="start"]::before{background:var(--c-start)}
#panel-schema .tl-event[data-phase="music"]::before{background:var(--c-music)}
#panel-schema .tl-event[data-phase="mix"]::before{background:var(--c-music)}
#panel-schema .tl-event[data-phase="graphics"]::before{background:var(--c-graphics)}
#panel-schema .tl-event[data-phase="marketing"]::before{background:var(--c-marketing)}
#panel-schema .tl-event[data-phase="release"]::before{background:var(--c-release)}
.tl-event:hover{transform:translateY(-2px)}
.tl-event[data-phase="start"],
.tl-event[data-phase="music"],
.tl-event[data-phase="mix"],
.tl-event[data-phase="graphics"],
.tl-event[data-phase="marketing"],
.tl-event[data-phase="release"]{border-top:3px solid var(--border-strong)}
.tl-event .ev-time{font-size:.82rem;color:var(--text-mute);font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.tl-event .ev-title{font-size:1.04rem;font-weight:500;color:var(--text);margin:4px 0}
.tl-event .ev-note{font-size:.86rem;color:var(--text-dim);font-weight:300}

.release-banner{
  text-align:center;margin:32px 0;padding:36px 24px;
  background:linear-gradient(135deg,rgba(163,186,255,.1),rgba(244,158,41,.08));
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(163,186,255,.2);border-radius:20px;
  box-shadow:var(--glass-shadow);position:relative;overflow:hidden;
}
.release-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:var(--glass-highlight);pointer-events:none;border-radius:20px 20px 0 0}
.release-banner > *{position:relative;z-index:1}
.release-banner .rb-label{color:var(--c-release);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.release-banner .rb-icon{font-size:2rem;margin-bottom:12px}
.release-banner h3{font-family:var(--serif);font-size:1.6rem;font-weight:500}
.release-banner .rb-date{color:var(--text-dim);font-size:1rem;margin-top:8px}
/* #4 flat surface for notes (secondary element) */
.glass-note{margin-top:32px;padding:24px 26px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.glass-note p{font-size:.86rem;color:var(--text-dim);margin-bottom:8px;font-weight:300}
.glass-note p:last-child{margin-bottom:0}
.glass-note strong{color:var(--text);font-weight:500}
.tl-event--note{background:rgba(255,255,255,.02);border-style:dashed;border-left-width:2px}
.tl-event--note .ev-time{color:var(--text-mute)}
.tl-event--note .ev-note{font-size:.86rem;color:var(--text-dim);font-weight:300}

/* ===== GRAFIK PANEL ===== */
.chapter{margin-bottom:48px;border-top:1px solid var(--border);padding-top:48px;text-align:center}
.chapter:first-child{border-top:none;padding-top:0}
.chapter-marker{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-accent,var(--kmr-orange-2));margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.chapter-marker .ch-num{font-family:var(--serif);font-size:1rem;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(var(--panel-accent-rgb,145,188,89),.12);border:1px solid rgba(var(--panel-accent-rgb,145,188,89),.25);color:var(--panel-accent,var(--kmr-green-2))}
.chapter h3{font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.1rem);font-weight:400;margin-bottom:12px;line-height:1.1}
.chapter .ch-sub{font-size:1rem;color:var(--text-dim);font-weight:300;margin:0 auto 24px;max-width:680px}
.chapter .ch-desc{font-size:.96rem;color:var(--text-dim);font-weight:300;margin:0 auto 24px;max-width:680px}
.chapter-img{position:relative;width:100%;border-radius:16px;overflow:hidden;margin-bottom:20px;aspect-ratio:16/10;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.chapter-img img{width:100%;height:100%;object-fit:cover;display:block}
.chapter-img .img-caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:linear-gradient(180deg,transparent,rgba(13,19,16,.85));font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.chapter-img .img-caption span:first-child{color:var(--panel-accent,var(--kmr-green-2))}
/* #4 flat surface for chapter list items (secondary element) */
.chapter-list{list-style:none;margin:20px auto 0;display:grid;gap:10px;max-width:680px}
.chapter-list li{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;background:var(--surface);border:1px solid var(--border);border-radius:14px;font-size:.92rem;color:var(--text-dim);font-weight:300;transition:transform .25s,border-color .25s}
.chapter-list li:hover{transform:translateX(4px);border-color:rgba(109,145,61,.2)}
.chapter-list li .li-icon{flex-shrink:0;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(var(--panel-accent-rgb,145,188,89),.1);border:1px solid rgba(var(--panel-accent-rgb,145,188,89),.2);font-size:1rem;color:var(--panel-accent,var(--kmr-green-2))}
.chapter-list li strong{color:var(--text);font-weight:500}
.chapter-list li .li-detail{display:block;margin-top:4px;font-size:.84rem;color:var(--text-mute)}
.chapter-note{margin:24px auto 0;max-width:680px;padding:20px 24px;background:rgba(109,145,61,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(109,145,61,.15);border-radius:14px;font-size:.88rem;color:var(--text-dim);font-weight:300;line-height:1.6}
.chapter-note strong{color:var(--panel-accent,var(--kmr-green-2));font-weight:600}

/* ===== PRIS PANEL ===== */
.price-card{
  max-width:680px;margin-inline:auto;
  padding:40px 36px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid var(--glass-border);border-radius:24px;
  box-shadow:0 16px 48px rgba(0,0,0,.4);
  overflow:hidden;position:relative;
}
.price-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent-pris)}
.price-card::after{content:'';position:absolute;top:0;left:0;right:0;height:60%;background:var(--glass-highlight);pointer-events:none;border-radius:24px 24px 0 0}
.price-card > *{position:relative;z-index:1}
.price-card .price-label{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-accent,var(--kmr-green-2));margin-bottom:8px}
.price-card .price-name{font-family:var(--serif);font-size:1.4rem;font-weight:500;margin-bottom:28px}
.price-items{list-style:none;margin-bottom:24px}
.price-items li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--border);font-size:.92rem}
@media(min-width:1024px){.price-items li{font-size:1rem;padding:18px 0}}
.price-items li:last-child{border-bottom:none}
.price-items .item-name{color:var(--text-dim);font-weight:300;flex:1 1 auto;min-width:0}
.price-items .item-name strong{color:var(--text);font-weight:500}
.price-items .item-price{color:var(--text);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;flex:0 0 auto;margin-left:12px}
.price-items .item-price.ingår{color:var(--panel-accent,var(--kmr-green-2));font-style:italic;font-weight:400}
.price-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:28px;padding-top:24px;border-top:2px solid var(--border-strong)}
.price-total .total-label{font-family:var(--serif);font-size:1.2rem;font-weight:500}
.price-total .total-amount{font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--panel-accent,var(--kmr-green-2));font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(var(--panel-accent-rgb,145,188,89),.2)}
.price-note{margin-top:20px;font-size:.86rem;color:var(--text-mute);font-weight:300;line-height:1.6}
.price-note strong{color:var(--text-dim);font-weight:500}
/* #4 flat surface for delbetalning note */
.glass-delbetalning{margin-top:20px;padding:18px 22px;background:rgba(109,145,61,.08);border:1px solid rgba(109,145,61,.18);border-radius:14px;font-size:.9rem;color:var(--text-dim)}
.glass-delbetalning strong{color:var(--panel-accent,var(--kmr-green-2));font-weight:600}

/* Price sub-groups */
.price-group{margin-bottom:8px}
.price-group:first-of-type{margin-top:8px}
.price-group-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 0 6px;border-bottom:1px solid var(--border);
}
.price-group-title{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--text)}
.price-group-price{font-weight:600;font-size:1rem;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.price-group-price.ingår{color:var(--panel-accent,var(--kmr-green-2));font-style:italic;font-weight:400}
.price-subitems{list-style:none;margin:0 0 8px;padding:0}
.price-subitems li{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;font-size:.88rem;color:var(--text-dim);font-weight:300;
}
.price-subitems li .sub-desc{color:var(--text-mute);font-size:.82rem;white-space:nowrap;flex:0 0 auto}

/* Included add-ons */
.price-included{
  margin-top:24px;padding:20px 24px;
  background:rgba(109,145,61,.06);
  border:1px solid rgba(109,145,61,.18);
  border-radius:14px;
}
.price-included h2{font-family:var(--serif);font-size:1.05rem;font-weight:500;margin:0 0 12px;color:var(--text)}
.price-included ul{list-style:none;margin:0;padding:0}
.price-included li{
  display:flex;align-items:baseline;gap:8px;
  padding:8px 0;font-size:.9rem;color:var(--text-dim);font-weight:300;
  border-bottom:1px solid rgba(109,145,61,.12);
}
.price-included li:last-child{border-bottom:none}
.price-included li::before{content:'✓';color:var(--panel-accent,var(--kmr-green-2));font-weight:600;flex:0 0 auto}
.price-included .addon-note{color:var(--text-mute);font-size:.82rem}

/* Optional add-ons (not included) */
.price-optional{
  margin-top:32px;padding:24px 28px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:16px;
}
.price-optional h3{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin:0 0 6px;color:var(--text)}
.price-optional>p{font-size:.88rem;color:var(--text-mute);font-weight:300;margin:0 0 16px}
.price-optional-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;
}
.price-optional-item{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 18px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:10px;
}
.price-optional-item .opt-title{font-size:.92rem;font-weight:500;color:var(--text)}
.price-optional-item .opt-desc{font-size:.8rem;color:var(--text-mute);font-weight:300}
/* #4 flat surface for price breakdown (secondary element) */
.price-breakdown{margin-top:24px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.price-breakdown h4{font-family:var(--serif);font-size:1.1rem;font-weight:500;margin-bottom:16px;color:var(--text)}
.price-breakdown .bd-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.88rem;color:var(--text-dim);font-weight:300}
.price-breakdown .bd-row strong{color:var(--text);font-weight:500}
.cta-glass{display:block;margin:40px auto 0;max-width:420px;padding:24px 40px;background:rgba(var(--panel-accent-rgb,109,145,61),.1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(var(--panel-accent-rgb,109,145,61),.25);border-radius:100px;text-align:center;text-decoration:none;font-weight:600;font-size:1rem;color:var(--panel-accent,var(--kmr-green-2));transition:all .3s;cursor:pointer}
.cta-glass:hover{transform:translateY(-2px);background:rgba(var(--panel-accent-rgb,109,145,61),.15);border-color:rgba(var(--panel-accent-rgb,109,145,61),.4)}

/* ===== PARTICLE BACKGROUND ===== */
#bg-particles{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:0.6;
}
.panel{position:relative;z-index:1}
.top-nav,.bottom-nav{z-index:10}

/* ===== REFERENCE LINKS ===== */
/* ===== REFERENCE GRID — 3×2 symmetric (was flex 4+2 orphan) ===== */
.ref-links{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
  margin:var(--sp-5) auto 0;
  max-width:var(--cw-wide);
}
@media(min-width:560px){.ref-links{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.ref-links{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
.ref-links > a{
  min-width:0; /* allow grid to shrink */
}
.ref-link{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 20px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:12px;
  text-decoration:none;
  transition:transform .25s,border-color .25s,background .25s;
}
.ref-link:hover{transform:translateY(-2px);border-color:rgba(var(--panel-accent-rgb,244,158,41),.4);background:rgba(var(--panel-accent-rgb,244,158,41),.06)}
.ref-link-tag{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
/* #4 unique subtle hues per ref-link category */
.ref-link:nth-child(1) .ref-link-tag{color:#F49E29}
.ref-link:nth-child(2) .ref-link-tag{color:#5B8FE0}
.ref-link:nth-child(3) .ref-link-tag{color:#91BC59}
.ref-link:nth-child(4) .ref-link-tag{color:#F472B6}
.ref-link:nth-child(5) .ref-link-tag{color:#B98Aff}
.ref-link:nth-child(6) .ref-link-tag{color:#2DD4BF}
/* subtle left-border accent matching the tag color */
.ref-link:nth-child(1){border-left:2px solid rgba(244,158,41,.3)}
.ref-link:nth-child(2){border-left:2px solid rgba(91,143,224,.3)}
.ref-link:nth-child(3){border-left:2px solid rgba(145,188,89,.3)}
.ref-link:nth-child(4){border-left:2px solid rgba(244,114,182,.3)}
.ref-link:nth-child(5){border-left:2px solid rgba(185,138,255,.3)}
.ref-link:nth-child(6){border-left:2px solid rgba(45,212,191,.3)}
.ref-link-title{font-family:var(--serif);font-size:1.02rem;color:var(--text);font-weight:400}
.ref-link-sub{font-size:.8rem;color:var(--text-dim);font-weight:300}

/* ===== GLASS CARD + RK-SPECS (shared content cards) ===== */
.glass-card{
  max-width:680px;overflow-wrap:break-word;word-break:break-word;
  padding:28px 32px;margin:20px auto 0;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:16px;
}
.glass-card p{margin:0 0 12px}
.glass-card p:last-child{margin-bottom:0}
.rk-specs{
  display:grid;gap:0;
  max-width:100%;overflow:hidden;
  border-top:1px solid var(--glass-border);
  margin-top:20px;
}
.rk-spec{
  display:grid;grid-template-columns:minmax(7rem,auto) minmax(0,1fr);
  gap:1rem;align-items:baseline;
  padding:12px 0;
  border-bottom:1px solid var(--glass-border);
  min-width:0;
}
.rk-spec-label{
  font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-mute);
  white-space:nowrap;
}
.rk-spec-val{
  font-size:.92rem;color:var(--text);font-weight:300;
  min-width:0;overflow-wrap:break-word;word-break:break-word;
}

/* ===== COMMUNITY ===== */
/* #7 community becomes a glass-card instead of full-bleed image */
.community{text-align:center;padding:56px 0;overflow:hidden;border-top:1px solid var(--border);position:relative;z-index:2}
@media(min-width:1024px){.community{padding:80px 0}}
.community .big{font-family:var(--serif);font-size:clamp(2rem,6vw,3rem);font-weight:400;letter-spacing:-.025em;line-height:1.1;margin-bottom:20px}
.community .big .italic{font-style:italic;background:linear-gradient(135deg,var(--accent-overview),var(--accent-overview-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.community-card{
  max-width:560px;margin:0 auto;
  padding:32px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:var(--glass-shadow);
  position:relative;overflow:hidden;
}
.community-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--kmr-green),var(--kmr-orange))}
.community-card p{margin:0;color:var(--text-dim);font-weight:300;font-size:1.05rem;line-height:1.7}

/* ===== CONTACT ===== */
.contact{padding:72px 0;border-top:1px solid var(--border)}
.contact-grid{display:grid;gap:20px}
@media(min-width:560px){.contact-grid{grid-template-columns:1fr 1fr}}

/* Contact CTA buttons */
.contact-cta{display:grid;gap:16px;max-width:520px;margin:0 auto}
@media(min-width:560px){.contact-cta{grid-template-columns:1fr 1fr}}
.contact-btn{
  display:flex;flex-direction:column;gap:4px;
  padding:24px 28px;
  border-radius:20px;text-decoration:none;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.contact-btn::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 40%,transparent 70%);
  pointer-events:none;
}
.contact-btn-label{font-family:var(--serif);font-size:1.2rem;font-weight:500;position:relative}
.contact-btn-sub{font-size:.82rem;font-weight:300;position:relative}
.contact-btn--primary{
  background:rgba(109,145,61,.12);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(145,188,89,.3);
  color:var(--panel-accent,var(--kmr-green-2));
}
.contact-btn--primary:hover{
  transform:translateY(-3px);
  border-color:rgba(145,188,89,.5);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.contact-btn--primary .contact-btn-label{color:var(--text)}
.contact-btn--secondary{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  color:var(--text-dim);
}
.contact-btn--secondary:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.contact-btn--secondary .contact-btn-label{color:var(--text)}
/* #4 flat surface for contact items (secondary element) */
.contact-item{display:flex;flex-direction:column;gap:6px;padding:24px 26px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.contact-item .label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.contact-item a,.contact-item span{font-size:1rem;color:var(--text);text-decoration:none;font-weight:400}
.contact-item a:hover{color:var(--panel-accent,var(--kmr-green-2))}
.contact-item .val{font-family:var(--serif);font-size:1.1rem}

/* ===== FOOTER ===== */
footer{padding:48px 0 88px;border-top:1px solid var(--border);text-align:center}
footer .logo{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin-bottom:10px}
footer .meta{font-size:.82rem;color:var(--text-mute);line-height:1.7}
footer .meta a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid var(--border)}
footer .meta a:hover{color:var(--panel-accent,var(--kmr-green-2))}

/* #10 desktop top-nav — replaces floating pill on large screens */
.top-nav{display:none}
@media(min-width:1024px){
  .bottom-nav{display:none}
  .top-nav{
    display:flex;
    position:sticky;top:0;z-index:100;
    justify-content:center;gap:4px;
    padding:12px 24px;
    background:rgba(13,19,16,.85);
    backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
    border-bottom:1px solid var(--border);
  }
  .top-nav-tab{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:10px 28px;border-radius:12px;border:none;
    background:transparent;color:var(--text-dim);
    font-family:var(--sans);font-size:.85rem;font-weight:600;
    cursor:pointer;transition:all .25s ease;position:relative;
  }
  .top-nav-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
  .top-nav-tab.active{color:var(--text)}
  .top-nav-tab.active::after{
    content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:32px;height:3px;border-radius:2px;
    background:var(--tab-color,var(--kmr-green-2));
    box-shadow:0 0 12px var(--tab-color,var(--kmr-green-2)),0 0 4px var(--tab-color,var(--kmr-green-2));
  }
  .top-nav-tab[data-tab="overview"]{--tab-color:var(--tab-c-overview)}
  .top-nav-tab[data-tab="schema"]{--tab-color:var(--tab-c-schema)}
  .top-nav-tab[data-tab="musik"]{--tab-color:var(--tab-c-musik)}
  .top-nav-tab[data-tab="grafik"]{--tab-color:var(--tab-c-grafik)}
  .top-nav-tab[data-tab="utgivning"]{--tab-color:var(--tab-c-utgivning)}
  .top-nav-tab[data-tab="pris"]{--tab-color:var(--tab-c-pris)}
}
/* Desktop: remove bottom padding since no floating nav */
@media(min-width:1024px){
  body{padding-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rk-reveal{opacity:1!important;transform:none!important}
}

/* ===== KEYBOARD FOCUS STATES ===== */
:is(.top-nav-tab,.bottom-nav-tab,.page-header-cta,.cta-glass,.contact-btn,.step-card,.ref-link,a):focus-visible{
  outline:3px solid var(--panel-accent,var(--tab-color,var(--kmr-green-2)));
  outline-offset:3px;
}

/* ===== RELEASEKIT PANEL ===== */

/* Contents list */
.rk-contents{
  margin:0 auto 24px;
  max-width:860px;
}
.rk-contents-list{
  margin:0;
  padding:0;
  border-top:1px solid rgba(109,145,61,.25);
  list-style:none;
}
.rk-contents-list a{
  display:flex;
  align-items:center;
  gap:0.55rem;
  min-height:3.5rem;
  padding:0.8rem 0;
  border-bottom:1px solid rgba(109,145,61,.25);
  text-decoration:none;
}
.rk-contents-list span{
  color:var(--kmr-green);
  font-size:0.7rem;
  letter-spacing:0.12em;
}
.rk-contents-list strong{
  min-width:0;
  font-family:var(--serif);
  font-size:clamp(1.06rem,4.5vw,1.3rem);
  font-weight:400;
  line-height:1.18;
}
.rk-contents-list i{
  position:relative;
  width:1rem;
  height:0.75rem;
  margin-left:auto;
  flex-shrink:0;
}
.rk-contents-list i::before,
.rk-contents-list i::after{position:absolute;content:""}
.rk-contents-list i::before{
  top:50%;right:0;left:0;height:1px;
  background:var(--kmr-green);
}
.rk-contents-list i::after{
  top:0.19rem;right:0;width:0.38rem;height:0.38rem;
  border-top:1px solid var(--kmr-green);
  border-right:1px solid var(--kmr-green);
  transform:rotate(45deg);
}

/* Accent-themed TOC for Musik + Utgivning panels */
#panel-musik .rk-contents-list{border-top-color:rgba(var(--accent-musik-rgb),.25);border-bottom-color:rgba(var(--accent-musik-rgb),.25)}
#panel-musik .rk-contents-list a{border-bottom-color:rgba(var(--accent-musik-rgb),.25)}
#panel-musik .rk-contents-list span{color:var(--accent-musik)}
#panel-musik .rk-contents-list i::before{background:var(--accent-musik)}
#panel-musik .rk-contents-list i::after{border-top-color:var(--accent-musik);border-right-color:var(--accent-musik)}

#panel-utgivning .rk-contents-list{border-top-color:rgba(var(--accent-utgivning-rgb),.25);border-bottom-color:rgba(var(--accent-utgivning-rgb),.25)}
#panel-utgivning .rk-contents-list a{border-bottom-color:rgba(var(--accent-utgivning-rgb),.25)}
#panel-utgivning .rk-contents-list span{color:var(--accent-utgivning)}
#panel-utgivning .rk-contents-list i::before{background:var(--accent-utgivning)}
#panel-utgivning .rk-contents-list i::after{border-top-color:var(--accent-utgivning);border-right-color:var(--accent-utgivning)}

#panel-grafik .rk-contents-list{border-top-color:rgba(var(--accent-grafik-rgb),.25);border-bottom-color:rgba(var(--accent-grafik-rgb),.25)}
#panel-grafik .rk-contents-list a{border-bottom-color:rgba(var(--accent-grafik-rgb),.25)}
#panel-grafik .rk-contents-list span{color:var(--accent-grafik)}
#panel-grafik .rk-contents-list i::before{background:var(--accent-grafik)}
#panel-grafik .rk-contents-list i::after{border-top-color:var(--accent-grafik);border-right-color:var(--accent-grafik)}

/* Chapters */
.rk-chapter{
  position:relative;
  width:100%;
  padding-block:clamp(3rem,10vw,5rem);
  border-top:1px solid rgba(109,145,61,.35);
}
.rk-chapter:first-of-type,
#panel-grafik .rk-chapter:first-of-type,
#panel-musik .rk-chapter:first-of-type,
#panel-utgivning .rk-chapter:first-of-type{
  border-top:none;
}
.rk-chapter::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:min(120px,40%);height:2px;
  background:linear-gradient(90deg,transparent,var(--panel-accent,var(--kmr-green-2)),transparent);
}

.rk-chapter-heading{
  text-align:center;
}
.rk-marker{
  display:inline-flex;align-items:center;gap:0;
  margin-bottom:1.1rem;
  padding:6px 16px;
  border-radius:100px;
  background:rgba(109,145,61,.1);
  border:1px solid rgba(109,145,61,.25);
  color:var(--panel-accent,var(--kmr-green-2));
  font-size:0.72rem;
  letter-spacing:0.17em;
  text-transform:uppercase;
}
.rk-marker span{
  margin-right:0.55rem;
  font-family:var(--serif);
  font-size:0.85rem;
  font-weight:500;
}
.rk-chapter-heading h2{
  font-family:var(--serif);
  font-size:clamp(1.9rem,5.5vw,2.6rem);
  font-weight:400;
  letter-spacing:-0.015em;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
.rk-subtitle{
  margin-top:0.6rem;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.35rem,5.5vw,2rem);
  line-height:1.18;
}
.rk-chapter-heading > p:not(.rk-marker):not(.rk-subtitle){
  max-width:32rem;
  margin:1rem auto 0;
  font-size:clamp(1rem,4vw,1.15rem);
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* Media examples */
.rk-media{
  width:min(100%,47.5rem);
  margin:clamp(2rem,8vw,4rem) auto 0;
}
.rk-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
}
.rk-media figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:2.6rem;
  padding-top:0.7rem;
  color:var(--panel-accent,var(--kmr-green-2));
  font-size:0.67rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
}

/* Cover — square */
.rk-media--cover{
  max-width:28rem;
}
.rk-media--cover img{
  aspect-ratio:1;
  object-fit:cover;
}

/* Canvas — vertical */
.rk-media--canvas{
  max-width:20rem;
}
.rk-media--canvas img{
  aspect-ratio:9/16;
  object-fit:cover;
}

/* Subchapter */
.rk-subchapter{
  margin-top:clamp(3rem,12vw,5.5rem);
  text-align:center;
}
.rk-subchapter h3{
  font-family:var(--serif);
  font-size:clamp(1.7rem,7vw,2.5rem);
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1.08;
  color:var(--ink);
  margin:0;
}
.rk-subchapter p{
  max-width:28rem;
  margin:0.7rem auto 0;
  font-size:clamp(0.95rem,4vw,1.1rem);
  color:var(--ink-soft);
}

/* Media group — title + images together */
.rk-media-group{
  margin-top:clamp(2rem,8vw,4rem);
}
.rk-group-title{
  font-family:var(--serif);
  font-size:clamp(1.4rem,6vw,2rem);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.1;
  text-align:center;
  margin:0 0 0.4rem;
  color:var(--ink);
}
.rk-group-sub{
  max-width:28rem;
  margin:0 auto 1.5rem;
  font-size:clamp(0.92rem,4vw,1.05rem);
  color:var(--ink-soft);
  text-align:center;
  text-wrap:pretty;
}
.rk-media-group .rk-profile-examples,
.rk-media-group .rk-press-grid{
  margin-top:0;
}

/* Profile examples */
.rk-profile-examples{
  display:grid;
  gap:2.5rem;
  margin-top:clamp(2rem,8vw,4rem);
  max-width:min(100%,60rem);
  margin-inline:auto;
}
.rk-profile--desktop img{
  aspect-ratio:1200/632;
  object-fit:contain;
  border:none;
}
.rk-profile--mobile{
  width:min(100%,22rem);
  justify-self:center;
}
.rk-profile--mobile img{
  aspect-ratio:401/480;
  border-radius:0.75rem;
  border:none;
}

/* Press grid */
.rk-press-grid{
  display:grid;
  gap:2.5rem;
  margin-top:2.5rem;
  max-width:min(100%,60rem);
  margin-inline:auto;
}
.rk-press img{
  aspect-ratio:4/3;
  object-fit:cover;
}
.rk-press:nth-child(1) img{object-position:center 58%}
.rk-press:nth-child(2) img{object-position:center 44%}

/* Poster */
.rk-media--poster{
  max-width:24rem;
}
.rk-media--poster img{
  aspect-ratio:4/5;
  object-fit:cover;
}

/* Highlight rail */
.rk-highlight-rail{
  display:flex;
  width:min(100%,60rem);
  gap:0.75rem;
  margin:1.5rem auto 0;
  padding:0 1rem;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rk-highlight-rail::-webkit-scrollbar{display:none}
.rk-highlight-rail figure{
  scroll-snap-align:center;
  margin:0;
  flex:0 0 auto;
}
.rk-highlight-rail img{
  width:72px;height:72px;
  border-radius:50%;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  object-fit:cover;
  border:2px solid var(--glass-border);
  transition:transform .2s,border-color .2s;
}
.rk-highlight-rail figure:hover img{transform:scale(1.08);border-color:var(--panel-accent,var(--kmr-green-2))}

/* Rail status */
.rk-rail-status{
  display:grid;
  justify-items:center;
  gap:0.6rem;
  margin:1.25rem auto 0;
  max-width:60rem;
}
.rk-rail-progress{
  display:block;
  width:min(15rem,70%);
  height:2px;
  overflow:hidden;
  background:rgba(109,145,61,.18);
}
.rk-rail-progress i{
  display:block;
  width:26%;
  height:100%;
  background:var(--kmr-green);
  transform:translateX(0);
  transition:transform 180ms ease;
}
.rk-rail-status small{
  color:var(--text-mute);
  font-size:0.75rem;
}

/* Video elements */
.rk-media video{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
  background:#050504;
}
.rk-media--canvas video{
  aspect-ratio:9/16;
  object-fit:cover;
}
.rk-media--motion-square video{
  aspect-ratio:1;
  object-fit:cover;
}
.rk-media--motion-mobile video{
  aspect-ratio:3/4;
  object-fit:cover;
}

/* Guide note */
.rk-note{
  max-width:32rem;
  margin:3rem auto 0;
  padding:1.2rem 0;
  border-block:1px solid rgba(109,145,61,.25);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.05rem,4.5vw,1.3rem);
  text-align:center;
}

/* Motion */
.rk-media--motion-square{
  max-width:30rem;
}
.rk-media--motion-square img{
  aspect-ratio:1;
  object-fit:cover;
}
.rk-media--motion-mobile{
  max-width:22rem;
}
.rk-media--motion-mobile img{
  aspect-ratio:3/4;
  object-fit:cover;
}

/* Good to know */
.rk-good-to-know{
  margin-top:clamp(3rem,12vw,5.5rem);
  max-width:28rem;
  margin-inline:auto;
}
.rk-good-to-know h3{
  font-family:var(--serif);
  font-size:clamp(1.6rem,6.5vw,2.2rem);
  font-weight:400;
  letter-spacing:-0.03em;
  text-align:center;
  color:var(--ink);
  margin:0;
}
.rk-good-to-know ul{
  margin:1.2rem 0 0;
  padding:0;
  border-top:1px solid rgba(109,145,61,.25);
  list-style:none;
}
.rk-good-to-know li{
  padding-block:0.8rem;
  border-bottom:1px solid rgba(109,145,61,.25);
  color:var(--ink-soft);
}

/* Reveal animation */
.rk-reveal{
  opacity:0;
  transform:translateY(1.15rem);
  transition:opacity 700ms cubic-bezier(0.22,1,0.36,1),
             transform 850ms cubic-bezier(0.22,1,0.36,1);
}
.rk-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Desktop layout */
@media(min-width:37rem){
  .rk-press-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
  }
  .rk-press:last-child{
    grid-column:1/-1;
    width:min(100%,calc((100% - 1.5rem)/2));
    justify-self:center;
  }
  .rk-highlight-rail{
    gap:1rem;
  }
}
@media(min-width:1024px){
  .rk-media{max-width:52rem}
  .rk-media--cover{max-width:32rem}
  .rk-media--canvas{max-width:24rem}
  .rk-media--poster{max-width:28rem}
  .rk-media--motion-square{max-width:36rem}
  .rk-media--motion-mobile{max-width:28rem}
  .rk-chapter-heading h2{font-size:clamp(2.8rem,6vw,4rem)}
  .rk-group-title{font-size:clamp(1.6rem,3vw,2.2rem)}
  .rk-press-grid{max-width:72rem}
  .rk-profile-examples{max-width:64rem}
  .timeline{max-width:52rem;margin-inline:auto}
  .rk-highlight-rail img{width:80px;height:80px}
  .price-card{padding:56px 48px}
  .price-total .total-amount{font-size:3rem}
  .section-head h2{font-size:clamp(2.2rem,4vw,3rem)}
  .section-head .sub{max-width:680px}
  .page-header h1{font-size:clamp(2.8rem,6vw,5rem)}
  .page-header .lede{font-size:clamp(1.1rem,2vw,1.4rem);max-width:680px}
}

@media(min-width:60rem){
  .rk-contents-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
    column-gap:2rem;
    border-bottom:none !important;
  }
  .rk-contents-list a{
    border-bottom:none;
  }
  .rk-contents-list li{
    border-right:1px solid rgba(109,145,61,.25);
    padding-right:2rem;
  }
  .rk-contents-list li:last-child{
    border-right:none;
    padding-right:0;
  }
  .rk-profile-examples{
    grid-template-columns:minmax(0,1.9fr) minmax(16rem,0.84fr);
    gap:1.5rem;
    align-items:end;
  }
  .rk-press-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .rk-press:last-child{
    grid-column:auto;
    width:100%;
  }
  .rk-highlight-rail{
    grid-auto-columns:14.5rem;
    padding-inline:0;
  }
}