/* ---------- Design tokens / vars ---------- */ 
:root{
  --accent:#00FF00; --text:#0a0a0a; --muted:#2b2b2b; --bg:#fff; --border:#eaeaea;
  --panelHalo1: rgba(255,255,255,.85); --panelHalo2: rgba(255,255,255,.55);
  --hdr-h: 64px;

  /* Typografi-skala */
  --h1-min: 40px; --h1-max: 56px;
  --h2-min: 28px; --h2-max: 38px;
}
[data-theme="dark"]{
  --bg:#000; --text:#f2f2f2; --muted:#cfcfcf; --border:#1b1b1b;
  --panelHalo1: rgba(10,10,10,.85); --panelHalo2: rgba(10,10,10,.55);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);line-height:1.6;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  transition:background .25s,color .25s;
  padding-top: var(--hdr-h); /* tryck ned innehåll under fixed header */
}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* Canvas bg */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.50}

/* ---------- Header (fixed glass) ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  overflow:visible; /* låt dropdowns hänga utanför */
}
:root:not([data-theme="dark"]) .site-header{
  background: rgba(255,255,255,0.30);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .site-header{
  background: rgba(0,0,0,0.30);
  border-bottom:1px solid transparent;
  backdrop-filter: blur(6px);
}
.site-header.elevated{ box-shadow: 0 2px 14px rgba(0,0,0,0.12); }
:root[data-theme="dark"] .site-header.elevated{ box-shadow: 0 2px 16px rgba(0,0,0,0.45); }
/* ===== Liten grön glow-switch (syns på mörk bakgrund) ===== */
.toggle{
  position:relative;
  width:44px; height:26px;      /* liten, kompakt */
  border-radius:12px;
  padding:0; border:0;
  background:rgba(0,0,0,.70);   /* mörk kapsel – aldrig vit */
  box-shadow:
    inset 0 0 0 2px rgba(0,255,0,.65),   /* neon-kant */
    0 0 14px rgba(0,255,0,.25);          /* yttre glow */
  cursor:pointer;
}
.toggle:hover{
  box-shadow:
    inset 0 0 0 2px rgba(0,255,0,.9),
    0 0 18px rgba(0,255,0,.45);
}
.toggle:focus-visible{ outline:2px solid rgba(0,255,0,.6); outline-offset:2px; }

/* Den lilla ringen inuti */
.toggle .ico{
  position:absolute; top:4px; left:4px;
  width:18px; height:18px; border-radius:50%;
  background:transparent;
  border:2px solid var(--accent);
  box-shadow:
    0 0 10px rgba(0,255,0,.6),
    inset 0 0 6px rgba(0,255,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  transform:translateX(0);      /* läge vänster */
}

/* När du togglar (kosmetiskt), för knoppen till höger */
.toggle.on .ico{
  transform:translateX(18px);
  box-shadow:
    0 0 12px rgba(0,255,0,.85),
    inset 0 0 6px rgba(0,255,0,.5);
  border-color:#00ff00;
}

/* Mindre version till mobilen om du vill */
.toggle.small{ width:38px; height:24px; }
.toggle.small .ico{ top:3px; left:3px; width:16px; height:16px; }
.toggle.small.on .ico{ transform:translateX(16px); }

/* Inre layout */
.nav-bleed{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:16px; padding:14px 24px;
  min-height: var(--hdr-h);
}

/* Brand */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:30px;height:30px;border:2px solid var(--accent);border-radius:6px;display:grid;place-items:center}
.brand-mark::after{content:"✓";color:var(--accent);font-weight:800;font-size:18px;line-height:1}
.brand-name{font-family:"Playfair Display",serif;font-weight:700;unicode-bidi:isolate}

/* Mode-panel i headern */
.mode-panel{
  display:flex; gap:8px; flex-wrap:wrap; background:transparent; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:4px; font:600 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:#eaeaea;
  pointer-events:auto;
}
.mode-panel button{
  appearance:none; border:1px solid rgba(255,255,255,.25); background:transparent; color:#eaeaea;
  padding:6px 10px; border-radius:999px; cursor:pointer;
  transition:transform .06s, box-shadow .15s, background .15s, color .15s;
}
.mode-panel button:hover{ box-shadow:0 0 12px rgba(255,255,255,.25); }
.mode-panel button.active{ background:#eaeaea; color:#000; border-color:#eaeaea; }

/* ---------- Meny / Right rail ---------- */
.menu{
  display:flex; align-items:center; justify-content:space-evenly; gap:0; width:100%;
  flex-wrap:nowrap; white-space:nowrap;
}
.menu a{
  position:relative; display:block; padding:14px 10px; text-decoration:none; font-weight:600
}
.menu a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px; height:2px;
  background:linear-gradient(90deg,transparent 0,rgba(0,255,0,.9) 30%,rgba(0,255,0,.9) 70%,transparent 100%);
  transform:scaleX(0); transform-origin:50% 100%; transition:transform .18s
}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
.menu a:hover,.menu a:focus-visible{color:var(--accent);text-shadow:0 0 8px rgba(0,255,0,.65)}
:root:not([data-theme="dark"]) .burger span{ background: var(--text); }

.right-rail{display:flex;align-items:center;gap:12px;justify-self:end}

/* ---------- Burger + mobilpanel ---------- */
.burger{display:none;background:none;border:none;padding:10px;border-radius:10px}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0}

.mobile-panel{display:none}
@media (max-width:1200px){
  .menu,.right-rail{display:none}
  .burger{display:block;justify-self:end}
  .mobile-panel{
    position:fixed; top: var(--hdr-h); left:0; right:0;
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--border); padding:16px 24px; z-index:1100
  }
  [data-theme="dark"] .mobile-panel{background:rgba(0,0,0,.96)}
  .mobile-panel.open{display:block}
  .mobile-panel a{display:block;padding:12px 6px;font-weight:600;text-decoration:none;border-radius:10px}
  .mobile-panel a:hover{color:var(--accent);text-shadow:0 0 10px rgba(0,255,0,.6)}
  .mobile-panel .cta-stack{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:10px}
  .row{display:flex;gap:8px;align-items:center}
  .mt8{margin-top:8px}
}

/* ---------- Translate-block ---------- */
#translate-container{border:1px solid var(--border);border-left:4px solid var(--accent);padding:6px 8px;border-radius:10px;background:#fff}
[data-theme="dark"] #translate-container{background:#0c0c0c;border-color:#202020}
#google_translate_element .goog-logo-link, #google_translate_element .goog-te-gadget>span{display:none!important}
#google_translate_element .goog-te-gadget{font-size:0}

/* ---------- Sections & type ---------- */
section{padding:84px 0}
.hero .wrap{padding:124px 24px 84px}
@media (max-width:900px){
  section{padding:64px 0}
  .hero .wrap{padding:96px 20px 64px}
}
.eyebrow{
  display:inline-block;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-left:4px solid var(--accent)
}

/* Rubriker */
h1, h2{ font-family:"Playfair Display",serif; font-weight:700; margin:18px 0 12px; }
h3, h4, h5, h6{ font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-weight:700; margin:18px 0 12px; }
h1{ font-size: clamp(var(--h1-min), 5.2vw, var(--h1-max)); line-height:1.08; letter-spacing:-.4px; }
h2{ font-size: clamp(var(--h2-min), 3.2vw, var(--h2-max)); line-height:1.15; letter-spacing:-.3px; }
.branding-title{ font-size: clamp(var(--h1-min), 5.2vw, var(--h1-max)); line-height:1.08; letter-spacing:-.4px; }
.display-hero{ font-size: clamp(calc(var(--h1-min) + 4px), 6vw, calc(var(--h1-max) + 8px)); }
.lead{font-size:1.125rem;color:var(--muted);max-width:820px}
.highlight{ font-weight:800; }

/* ---------- Panels & cards ---------- */
.panel,.card{position:relative;z-index:1;background:transparent;padding:0}
.panel::before{
  content:"";position:absolute;inset:-8px -12px -10px -12px;z-index:-1;
  background:radial-gradient(ellipse at 30% 20%, var(--panelHalo1), var(--panelHalo2) 45%, rgba(0,0,0,0) 70%);
  border-left:4px solid var(--accent);border-radius:18px;pointer-events:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.05));
}
.hero .panel::before{inset:-12px -14px -14px -14px}
.card{border:none;border-radius:12px;padding:20px}

/* ---------- Grid helpers ---------- */
.grid{display:grid;gap:24px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---------- Steps ---------- */
.steps .step-num{
  width:32px;height:32px;border-radius:8px;border:2px solid var(--accent);
  color:var(--accent);background:transparent;display:grid;place-items:center;
  font-weight:800;margin-bottom:8px;font-size:1rem;
}

/* ---------- Hero CTA ---------- */
.hero .hero-cta{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;margin-bottom:6px;align-items:center;
}
.hero .proof{
  display:flex;gap:10px;flex-wrap:wrap;width:100%;margin-top:6px;line-height:1.4;
}
.hero .proof span{
  border:1px solid var(--accent);border-radius:999px;padding:4px 10px;font-size:.9rem;
}

/* ---------- Buttons ---------- */
.btn{
  appearance:none;border:1px solid var(--accent);background:var(--accent);color:#000;
  padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;
  transition:box-shadow .2s,transform .08s
}
.btn:hover{box-shadow:0 0 18px rgba(0,255,0,.55)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:#cfcfcb;color:var(--text)}
.text-link{text-decoration:underline;font-weight:600}

/* ---------- Compact tjänstegalleri ---------- */
.compact-gallery{ gap:16px; align-items:stretch; }
.compact-gallery .card{
  position:relative; padding:20px; min-height:200px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:rgba(0,0,0,.85);
  border:1px solid rgba(0,255,0,.25);
  border-radius:10px; box-shadow:0 0 8px rgba(0,255,0,.25);
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s;
  cursor:pointer;
}
.compact-gallery .card:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0,255,0,.6);
}
.compact-gallery .card h3{
  font-size:1rem; margin:0 0 6px 0; color:var(--accent); font-weight:700;
}
.compact-gallery .card > .stretched-link{
  position:absolute; inset:0; border-radius:inherit; z-index:5;
  text-indent:-9999px; overflow:hidden; background:transparent;
}
.compact-gallery .card h3 a{
  position:static!important; text-indent:0!important; color:var(--accent); text-decoration:none;
}

/* ---------- Lists ---------- */
.ticks{list-style:none;padding-left:0;margin:12px 0}
.ticks li{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.tick{flex:0 0 auto;width:22px;height:22px;border:2px solid var(--accent);border-radius:6px;display:grid;place-items:center;font-weight:900;color:var(--accent);font-size:14px}
.tick::before{content:"✓"}
.flow{margin:0;padding-left:18px}

/* ---------- Forms ---------- */
.form input,.form textarea{
  padding:12px;border:1px solid var(--border);border-radius:10px;width:100%;
  background:transparent;color:var(--text)
}
.form .full{grid-column:1/-1}
@media (max-width:600px){
  .form input,.form textarea{ font-size:16px; padding:12px; } /* iOS zoom prevention */
}

/* ---------- Reveal + Parallax (EXAKT original-känsla) ---------- */
/* Reveal + Parallax (lerp i JS, reveal i CSS) */
@property --reveal-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --reveal-y { syntax: "<length>"; inherits: false; initial-value: 24px; }
@property --reveal-o { syntax: "<number>"; inherits: false; initial-value: 0; }

.parallax{
  --reveal-x: 0px;
  --reveal-y: 42px;   /* start-offset */
  --reveal-o: 0;
  --d: 0ms;

  opacity: var(--reveal-o);
  transform: translate3d(calc(var(--reveal-x)), calc(var(--reveal-y)), 0);
  will-change: transform, opacity;

  transition:
    opacity 2.5s ease-in-out var(--d),
    --reveal-x 2.5s cubic-bezier(.25,.8,.25,1) var(--d),
    --reveal-y 2.5s cubic-bezier(.25,.8,.25,1) var(--d);
}
.parallax.in{
  --reveal-x: 0px;
  --reveal-y: 0px;
  --reveal-o: 1;
}

@media (prefers-reduced-motion: reduce){
  .parallax{ transition: none; }
}

/* ---------- Dropdowns (nav + hero CTA) ---------- */
.dropdown{ position:relative; }
.dropdown .dd{
  position:absolute !important; top:calc(100% + 6px); left:0; display:none; z-index:1200;
}
.dropdown:hover .dd, .dropdown:focus-within .dd, .dropdown.open .dd{ display:block; }

.hero{ position:relative; z-index:20; overflow:visible; }
.hero .panel{ position:relative; z-index:25; }

.dropdown.cta{ position:relative; display:inline-flex; align-items:center; vertical-align:middle; }
.dropdown.cta::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px; pointer-events:auto;
}
.dropdown.cta .dd.info{
  position:absolute; top:calc(100% + 10px); left:0; min-width:480px; max-width:640px; display:none; z-index:99999;
  background:rgba(0,0,0,.92); color:inherit;
  border:1px solid rgba(0,255,0,.3); border-radius:14px; padding:14px 14px 12px 14px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(0,255,0,.08) inset;
}
.dropdown.cta .dd.info::before{
  content:""; position:absolute; top:-8px; left:16px;
  border:8px solid transparent; border-bottom-color: rgba(0,0,0,.92);
  filter: drop-shadow(0 -1px 0 rgba(0,255,0,.25));
}
.dropdown.cta .dd a{
  display:block; padding:10px 14px; border-radius:6px; font-weight:600; line-height:1.35;
  color:inherit; text-decoration:none; white-space:normal;
}
.dropdown.cta .dd a:hover{
  background: rgba(0,255,0,.12); color: var(--accent); text-shadow: 0 0 8px rgba(0,255,0,.45);
}
.dropdown.cta:hover .dd,
.dropdown.cta:focus-within .dd,
.dropdown.cta.open .dd{ display:block; }

:root:not([data-theme=dark]) .dropdown.cta .dd.info{
  background: rgba(255,255,255,.98); color:#111; border-color: rgba(0,0,0,.12);
}
:root:not([data-theme=dark]) .dropdown.cta .dd.info::before{
  border-bottom-color: rgba(255,255,255,.98); filter:none;
}
@media (max-width:640px){
  .dropdown.cta .dd.info{ left:0; right:0; min-width:unset; max-width:none; }
}

/* ---------- Footer (full-bleed) ---------- */
.site-footer{
  position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  left:0; right:0;
  border-top:1px solid var(--accent);
  box-shadow:0 -1px 6px rgba(0,255,0,0.25);
  padding:14px 0; background:transparent; text-align:center;
}
body{ overflow-x:hidden; } /* undvik sidscroll pga full-bleed */
.site-footer .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; width:100%; }
.footer-center{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.footer-links a{ text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }
.footer-links .org{ white-space:nowrap; }

@media (max-width:900px){
  .site-footer{ padding:12px 0; }
  .footer-center{ gap:4px; }
}

/* ---------- Gateway choices ---------- */
#gateway .choices{ display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:6px; }
#gateway .choice{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid var(--border); border-radius:10px; background:transparent; line-height:1.4; cursor:pointer;
}
#gateway .choice input{
  width:16px; height:16px; margin:0; vertical-align:middle; accent-color:var(--accent);
}
#gateway .choice:hover{ border-color:var(--accent); box-shadow:0 0 10px rgba(0,255,0,.15); }

/* ---------- Utilities ---------- */
.mt8{margin-top:8px}
.row{display:flex;gap:8px;align-items:center}
/* ===== Processanalogi (Sustrix) — matchar global fade/glide exakt ===== */
.sx-process{
  position:relative;
  background:transparent;            /* samma som andra sektioner */
  color:var(--text);
  padding:72px 20px 96px;
  isolation:isolate;                 /* separera stacking utan att ändra opacitet */
}
.sx-process__wrap{ max-width:1100px; margin:0 auto; }
.sx-process__h{ font-family:"Playfair Display",serif; font-size:clamp(28px,4vw,44px); margin:0 0 20px; }
.sx-process__lead{ max-width:800px; margin:0 0 36px; color:var(--muted); }

/* Flödeslayout */
.sx-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, minmax(160px,1fr));
  gap:28px;
  align-items:flex-start;
  padding-top:24px;
  overflow:hidden;
  z-index:0;
}

/* Låt den globala .parallax styra både opacity & transform – INGA overrides här */
.sx-flow.parallax{ /* medvetet tom: vi rör inte opacity/transform här */ }

/* Baslinjen ligger bakom innehållet */
.sx-flow::before{
  content:""; position:absolute; top:60px; left:calc(60px/2); right:calc(60px/2);
  height:4px; border-radius:2px; pointer-events:none;
  background:color-mix(in srgb, var(--accent) 65%, transparent);
  transform-origin:left center; transform:scaleX(0); opacity:0;
  transition: transform 1.2s ease-out, opacity .6s ease-out;
  z-index:-1;
}
.sx-flow.parallax.in::before{ transform:scaleX(1); opacity:1; }

/* Steg – inga egna fade/glide (rubrik & brödtext följer normal layout) */
.sx-step{
  position:relative; text-align:center;
  min-height:140px;
  z-index:0;
}

/* Cirklar (1–5) – visas direkt; animationer är valfria */
.sx-step__circle{
  width:60px; height:60px; margin:0 auto 14px; border-radius:50%;
  background:#0a0a0a; border:3px solid var(--accent);
  color:var(--accent); font-weight:700; font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.sx-flow.parallax.in .sx-step:nth-child(1) .sx-step__circle{ animation:sx-pop .6s .12s ease-out forwards, sx-pulse 2.4s 1.0s ease-out infinite; }
.sx-flow.parallax.in .sx-step:nth-child(2) .sx-step__circle{ animation:sx-pop .6s .18s ease-out forwards, sx-pulse 2.4s 1.1s ease-out infinite; }
.sx-flow.parallax.in .sx-step:nth-child(3) .sx-step__circle{ animation:sx-pop .6s .24s ease-out forwards, sx-pulse 2.4s 1.2s ease-out infinite; }
.sx-flow.parallax.in .sx-step:nth-child(4) .sx-step__circle{ animation:sx-pop .6s .30s ease-out forwards, sx-pulse 2.4s 1.3s ease-out infinite; }
.sx-flow.parallax.in .sx-step:nth-child(5) .sx-step__circle{ animation:sx-pop .6s .36s ease-out forwards, sx-pulse 2.4s 1.4s ease-out infinite; }

/* Titlar & brödtext — inga egna transitions (ingen “smyg upp”) */
.sx-step__t{ font-size:20px; margin:4px 0 6px; }
.sx-step__d{ font-size:15px; line-height:1.6; color:var(--muted); }

/* Keyframes (behåll om du vill ha pop/pulse på cirklarna) */
@keyframes sx-pop{
  0%{ opacity:0; transform:translateY(10px) scale(.92); }
  60%{ opacity:1; transform:translateY(-1px) scale(1.02); box-shadow:0 0 24px 6px color-mix(in srgb, var(--accent) 24%, transparent); }
  100%{ opacity:1; transform:translateY(0) scale(1); box-shadow:0 0 0 0 rgba(0,0,0,0); }
}
@keyframes sx-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70%{ box-shadow:0 0 24px 12px color-mix(in srgb, var(--accent) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Responsivt */
@media (max-width:980px){ .sx-flow{ grid-template-columns:repeat(3, minmax(160px,1fr)); } }
@media (max-width:640px){
  .sx-flow{ grid-template-columns:1fr; gap:18px; }
  .sx-flow::before{ display:none; }
  .sx-step{ text-align:left; padding-left:76px; min-height:unset; }
  .sx-step__circle{ margin:0; position:absolute; left:0; top:0; }
}

/* Reduced motion – låt din globala regel för .parallax sköta detta */
/* ===== Audiences – vågformad linje med 5 noder ===== */
#audiences{ 
  position:relative; 
  background:transparent; 
  padding:84px 0; 
}

#audiences .aud-flow{
  position:relative;
  height:120px;
  margin:18px 0 26px;
  z-index:0; /* ligger över bakgrund men under korten */
}
#audiences .aud-path{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-1;
}
#audiences .aud-path path{
  fill:none;
  stroke:rgba(0,255,0,0.8);       /* enklare än color-mix, inga lint-varningar */
  stroke-width:4; 
  stroke-linecap:round;
  filter: drop-shadow(0 0 10px rgba(0,255,0,0.35));
}

/* Noder placerade på 5 kolumner längs bredden */
#audiences .aud-node{
  position:absolute;
  top:0; transform:translate(-50%,0);
  left: calc((var(--col) - 1) / 4 * 100%);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:800; font-size:18px;
  background:#0a0a0a; 
  color:#00ff00; 
  border:3px solid #00ff00;
  box-shadow:0 0 14px rgba(0,255,0,0.3);
}

/* Tunad “puls” i höjdled */
#audiences .aud-node:nth-of-type(1){ top:62px; }
#audiences .aud-node:nth-of-type(2){ top:18px; }
#audiences .aud-node:nth-of-type(3){ top:78px; }
#audiences .aud-node:nth-of-type(4){ top:26px; }
#audiences .aud-node:nth-of-type(5){ top:60px; }

/* Grid = 5 kolumner för att linjera med noderna */
#audiences .aud-grid{
  grid-template-columns:repeat(5, minmax(180px,1fr));
  align-items:start;
  gap:18px;
  margin-top:60px; /* skjuter ner korten så de inte krockar med cirklarna */
}

/* Responsivt – göm vågen/noder och använd 2/1 kolumn */
@media (max-width:980px){
  #audiences .aud-grid{ grid-template-columns:repeat(2,1fr); }
  #audiences .aud-node{ display:none; }
  #audiences .aud-flow{ height:0; margin:0 0 10px; }
}
@media (max-width:640px){
  #audiences .aud-grid{ grid-template-columns:1fr; }
}


/* ===== SERVICES: stabil layout, inget överlapp, GRÖN RYGGRAD BEHÅLLS ===== */
/* Rubrik: mer luft under */
.services-section h1{
  position:relative;
  z-index:3;
  margin-bottom:clamp(24px, 5vw, 56px);
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:28px;             /* sidoluft */
  row-gap:36px;                /* MER vertikal luft mellan blocken */
  position:relative;
  z-index:2;
  padding-bottom:32px;         /* så sista kortet inte “klistrar” mot foten */
  margin-bottom:clamp(24px,6vw,80px);
}

/* Paneler i tjänste-gridet */
.services-grid .panel,
.services-grid .panel.parallax{
  position:relative;
  transform:none!important;
  margin:0!important;
  top:auto!important;
  border:none!important;
  background:rgba(255,255,255,.85);         /* ljusläge */
  border-radius:14px;
  padding:18px 18px 20px 24px;               /* extra vänster för ryggraden */
  box-shadow:0 6px 18px rgba(0,0,0,.12);     /* diskret separation */
  overflow:hidden;                           /* kapsla pseudo-elementet */
}

/* GRÖN RYGGRAD – flyttad INNANFÖR panelen (ingen negativ inset) */
.services-grid .panel::before{
  content:"";
  position:absolute;
  inset:0;                                   /* ligger inuti kortet */
  border-left:4px solid var(--accent);       /* ryggraden */
  border-radius:14px;
  background:radial-gradient(ellipse at 28% 18%,
              color-mix(in srgb, var(--accent) 9%, transparent) 0%,
              transparent 55%);              /* subtilt inre halo */
  pointer-events:none;
  filter:none;                               /* ingen extern drop-shadow som kan överlappa gap */
}

/* Mörkt tema */
[data-theme="dark"] .services-grid .panel{
  background:rgba(0,0,0,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Typografi i korten */
.services-grid .panel h3{ margin:0 0 8px; }
.services-grid .panel .lead{ margin-bottom:8px; }
.services-grid .panel h4{ margin:14px 0 6px; }

/* Luft före CTA-knappar i paneler */
.services-grid .panel .btn{ margin-top:14px; }

/* Låt sista kortet gå över hela raden på desktop (som tidigare) */
@media (min-width:992px){
  .services-grid > .panel:last-of-type{ grid-column:1 / -1; }
}

/* Responsiv brytning */
@media (max-width:992px){
  .services-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
}

/* Luft under hela sektionen */
.services-section{
  padding-bottom:clamp(72px,10vw,140px);
}

/* Kontaktpanelens ryggrad linjeras fortsatt */
#contact{ --spine-shift:-8px; }
#contact .panel{ position:relative; }
#contact .panel::before{
  left:calc(-27px + var(--spine-shift));
}
@media (max-width:640px){
  #contact{ --spine-shift:0px; }
}

/* Mode-färger */
:root[data-mode="default"]{ --accent:#00FF00; }
:root[data-mode="holiday"]{ --accent:#ff2e2e; }
:root[data-mode="ocean"]{ --accent:#25d7ff; }
:root[data-mode="amber"]{ --accent:#ffc400; }
/* === Justering: Mer glasig bakgrund i ljus version av tjänstepanelerna === */
.services-grid .panel,
.services-grid .panel.parallax {
  background: rgba(255, 255, 255, 0.10); /* matchar känslan från mörkt läge */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* === Glasig bakgrund ENDAST i ljus version === */
:root:not([data-theme="dark"]) .services-grid .panel,
:root:not([data-theme="dark"]) .services-grid .panel.parallax {
  background: rgba(255,255,255,0.10); /* mer genomskinligt vitt */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  --panelHalo1: rgba(255,255,255,0.20);
  --panelHalo2: rgba(255,255,255,0.08);
}

/* Behåll mörkt tema separat */
[data-theme="dark"] .services-grid .panel,
[data-theme="dark"] .services-grid .panel.parallax {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
/* ==== Stoppa horisontell scroll (säkra overrides) ==== */
html, body { overflow-x: hidden; }

/* 1) Full-bleed footer: ersätt 100vw-tricket med säkrare variant */
.site-footer,
.site-ftr {
  width: 100%;                /* inte 100vw */
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* Linjen i site-ftr: gör fullbredd utan 100vw/negativ marginal */
.site-ftr::before {
  left: 0;
  width: 100%;
}

/* 2) Se till att inget barn kan sticka ut */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* 3) Off-canvas mobilpanel ska inte skapa bredd när den är stängd */
.mobile-panel {
  max-width: 100vw;
  overflow-x: hidden;
  transform: translateX(0);  /* du använder display:block/none; säkerställ att den inte ligger utanför */
}

/* 4) Säkra fullbleed-layouter (om du använder calc(50% - 50vw) någon annanstans) */
.full-bleed,
.site-footer,
.site-ftr {
  overflow-x: clip;           /* klipp hellre än skrolla om något hamnar utanför */
}

/* 5) Canvasen – bind den hårt till viewportens bredd/höjd */
#bg-canvas {
  width: 100vw;
  height: 100svh;             /* stabil höjd på mobil */
  overflow: hidden;
  pointer-events: none;
  display: block;
}

/* 6) Menyraden på mobil – förhindra att något “nowrap” trycker ut bredd */
@media (max-width: 768px) {
  .nav-bleed,
  .site-header,
  .mobile-panel { max-width: 100vw; }
  .menu { white-space: normal; } /* på mobil syns ändå inte .menu (du döljer den), men säkert före */
}
/* ==== Flow-steps (så funkar det) ==== */
.flow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.flow-steps .flow-line {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  border-radius: 4px;
  z-index: 0;
}

.flow-steps .step {
  position: relative;
  z-index: 1;
  text-align: left;
}

.flow-steps .step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 12px;
  box-shadow: 0 0 12px rgba(0,255,0,0.5);
}

@media (max-width: 900px) {
  .flow-steps {
    grid-template-columns: 1fr;
  }
  .flow-steps .flow-line {
    top: 0;
    left: 20px;
    width: 4px;
    height: 100%;
    background: var(--accent);
  }
  .flow-steps .step {
    padding-left: 60px;
  }
  .flow-steps .step-num {
    position: absolute;
    left: 0;
  }
}