/* ====== Bas ====== */
:root{
  --bg:#0b0f19; --fg:#e8eef7; --muted:#96a3b8; --card:#0f1629; --edge:#1f2a44;
  --brand:#7c3aed; --brand2:#22d3ee; --ok:#22c55e;
  --maxw:1120px; --pad:18px; --radius:18px; --shadow:0 12px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fc; --fg:#0b1220; --muted:#4a586d; --card:#ffffff; --edge:#e7ecf3; --shadow:0 8px 24px rgba(10,40,120,.08); }
}
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) }
.center{ text-align:center }
.small{ font-size:.9rem }
.muted{ color:var(--muted) }
.card{ background:var(--card); border:1px solid var(--edge); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) }
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; border-radius:14px; border:1px solid var(--edge); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); cursor:pointer; text-decoration:none; transition:transform .15s ease, border-color .2s ease }
.btn:hover{ transform:translateY(-1px); border-color:transparent }
.btn--primary{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; border:none }
.btn--small{ padding:.55rem .8rem; border-radius:10px }

section{ padding:70px 0 }
h1,h2,h3{ margin:.5rem 0 }
.section-title{ font-size:1.9rem }
.lead{ color:var(--muted); max-width:60ch }

/* ====== Topbar ====== */
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(12px); background:linear-gradient(180deg, rgba(10,14,25,.85), rgba(10,14,25,.55)); border-bottom:1px solid var(--edge) }
.topbar .inner{ display:flex; align-items:center; justify-content:space-between; height:64px }
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px }
.logo .badge{ width:28px; height:28px; border-radius:9px; background:
  radial-gradient(120px 60px at 10% 10%, var(--brand), transparent),
  radial-gradient(100px 80px at 90% 80%, var(--brand2), transparent),
  linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.logo-text b{ font-weight:800 }
.nav{ display:flex; align-items:center; gap:1rem }
.nav-toggle{ display:none; background:none; border:1px solid var(--edge); border-radius:10px; padding:.5rem .6rem; color:var(--fg) }
.nav-menu{ display:flex; gap:1rem; list-style:none; padding:0; margin:0 }
.nav-menu a{ padding:.3rem .7rem; border-radius:10px; color:var(--muted); text-decoration:none }
.nav-menu a:hover{ color:var(--fg); background:rgba(255,255,255,.06) }

/* ====== Hero ====== */
.hero{ padding:96px 0 60px }
.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center }
.eyebrow{ color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-weight:700; font-size:.78rem }
.headline{ font-size:clamp(2.1rem, 5vw, 3.3rem); line-height:1.12; margin:.4rem 0 1rem; font-weight:800 }
.gradient{ background:linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.trust{ display:flex; gap:1rem; list-style:none; padding:0; margin:1rem 0 0; color:var(--muted) }
.hero-card .mock{ border:1px solid var(--edge); border-radius:14px; overflow:hidden }
.mock-bar{ height:34px; background:linear-gradient(180deg, #1b2440, #121a30); border-bottom:1px solid var(--edge) }
.mock-body{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) }
.mock-col{ display:grid; gap:12px }
.mock-block{ height:110px; background:linear-gradient(90deg, rgba(124,58,237,.35), rgba(34,211,238,.25)); border-radius:10px }
.mock-block.small{ height:64px }
.mock-block.tall{ height:236px }
.center{ text-align:center }

/* ====== Cards / Services ====== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px }
.service h3{ margin-top:.2rem }
.bullets{ margin:.6rem 0 0; padding-left:1rem }
.bullets li{ margin:.25rem 0 }

/* ====== Projects ====== */
.projects{ gap:16px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.project{ overflow:hidden; transition:transform .15s ease, box-shadow .2s ease }
.project:hover{ transform:translateY(-2px); box-shadow:0 16px 60px rgba(124,58,237,.15) }
.thumb{ aspect-ratio:16/10; display:grid; place-items:center; font-weight:700; letter-spacing:.08em; color:#fff; background:linear-gradient(120deg, rgba(124,58,237,.35), rgba(34,211,238,.25)) }
.meta{ padding:14px 14px 16px }
.meta .muted{ font-size:.95rem }

/* ====== Process ====== */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; list-style:none; padding:0; margin:18px 0 0 }
.timeline li{ display:flex; align-items:center; gap:.6rem; border:1px dashed var(--edge); padding:12px; border-radius:12px; background:var(--card) }
.timeline li span{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; font-weight:700 }

/* ====== USP/Stats ====== */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:stretch }
.stats > div{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border:1px solid var(--edge); border-radius:14px; padding:16px; text-align:center }
.stats strong{ font-size:1.6rem; display:block }
.stats span{ color:var(--muted) }

/* ====== Form ====== */
.form{ margin-top:10px }
label{ display:block; font-weight:600; margin-bottom:.4rem }
input, textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--edge); background:var(--card); color:var(--fg) }
input:focus, textarea:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(124,58,237,.35) }

/* ====== Footer ====== */
.footer{ border-top:1px solid var(--edge); padding:28px 0; color:var(--muted) }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.foot-nav{ display:flex; gap:12px }
.foot-nav a{ color:var(--muted); text-decoration:none; padding:.25rem .5rem; border-radius:8px }
.foot-nav a:hover{ background:rgba(255,255,255,.06); color:var(--fg) }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .grid-2{ grid-template-columns:1fr }
  .cards,.grid-3,.timeline{ grid-template-columns:1fr 1fr }
  .stats{ grid-template-columns:1fr 1fr 1fr }
  .nav-toggle{ display:inline-block }
  .nav-menu{ position:fixed; inset:64px 0 auto 0; background:var(--bg); border-bottom:1px solid var(--edge);
             transform:translateY(-130%); transition:transform .2s ease; padding:10px var(--pad); flex-direction:column }
  .nav-menu.is-open{ transform:translateY(0) }
}

@media (max-width: 640px){
  .cards,.grid-3,.timeline,.stats{ grid-template-columns:1fr }
  .headline{ font-size:clamp(1.9rem, 8vw, 2.4rem) }
}
/* ====== Lighten theme overrides (paste at end) ====== */
:root{
  /* Ljusare mörkt tema (~20–25% ljusare) */
  --bg:#131a2b;        /* var #0b0f19 */
  --fg:#f2f6fb;        /* var #e8eef7 */
  --muted:#a9b4c8;     /* var #96a3b8 */
  --card:#182345;      /* var #0f1629 */
  --edge:#2b3a60;      /* var #1f2a44 */
  --shadow:0 12px 30px rgba(12, 32, 100, .28); /* lite mjukare skugga */
  /* behåll varumärkesfärgerna men du kan öka kontrasten om du vill: */
  /* --brand:#7c3aed; --brand2:#22d3ee; */
}

/* Gör topbaren något ljusare (den använder fasta RGBA i din CSS) */
.topbar{
  background:linear-gradient(180deg, rgba(19,26,43,.78), rgba(19,26,43,.48));
  border-bottom-color: var(--edge);
}

/* Ljusare fönsterlist på mockup-kortet (hade hårdkodade färger) */
.mock-bar{
  background:linear-gradient(180deg, #283763, #1a2542); /* var #1b2440 → #121a30 */
  border-bottom:1px solid var(--edge);
}

/* Öka lätthetskänslan i hover-states mot mörk bakgrund */
.nav-menu a:hover{ background:rgba(255,255,255,.10); color:var(--fg) }

/* Gör knapparnas toppglans lite tydligare (syns bättre på ljusare mörk) */
.btn{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)); }

/* Ge “block”-demo-elementen lite mer lyster */
.mock-block{ background:linear-gradient(90deg, rgba(124,58,237,.45), rgba(34,211,238,.35)); }

/* Stats-kort och liknande: aningen tydligare paneler */
.stats > div{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  border-color:var(--edge);
}


.topbar{
  backdrop-filter:saturate(180%) blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border-bottom-color:var(--edge);
}
.nav-menu a{ color:var(--muted) }
.nav-menu a:hover{ background:rgba(0,0,0,.04); color:var(--fg) }
.mock-bar{ background:linear-gradient(180deg, #eef2f8, #e6ecf6); border-bottom:1px solid var(--edge); }
.btn{ background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2)); border-color:var(--edge) }




/* gör topbaren ett snäpp mer definierad mot den mörkare bakgrunden */
.topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
  border-bottom-color:var(--edge);
}

/* öka hover-kontrasten lite i ljusläget */
.nav-menu a:hover{ background:rgba(0,0,0,.06); color:var(--fg) }

/* mock-fönsterlisten följer den något mörkare tonen */
.mock-bar{
  background:linear-gradient(180deg, #e8eef7, #dee7f3);
  border-bottom:1px solid var(--edge);
}

/* === Följ oss-ruta utan bakgrund === */
.hero-social{
  margin: 14px auto 0;
  padding: 0;
  text-align: center;
  max-width: 340px;
}
.hero-social .social-lead{
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--fg);
}
.hero-social .icons{
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.hero-social .icons li{ display: inline-block; }

/* Ikonerna behåller samma runda knappar */
.hero-social .icon{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.hero-social .icon svg{ width: 22px; height: 22px; }

/* Varumärkesfärger */
.hero-social .icon.fb{ background:#1877F2; }
.hero-social .icon.ig{ background: radial-gradient(circle at 30% 30%, #feda75, #d62976 45%, #962fbf 65%, #4f5bd5); }
.hero-social .icon.tt{ background:#000; }

/* Hover-effekt */
.hero-social .icon:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  opacity: .95;
}


/* Varumärkesfärger */
.hero-social .icon.fb{ background:#1877F2; }                     /* Facebook blå */
.hero-social .icon.ig{ background: radial-gradient(circle at 30% 30%, #feda75, #d62976 45%, #962fbf 65%, #4f5bd5); } /* Instagram gradient */
.hero-social .icon.tt{ background:#000; }                         /* TikTok svart */

/* Hover-effekt */
.hero-social .icon:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  opacity: .95;
}

/* Responsiv marginal på små skärmar */
@media (max-width: 480px){
  .hero-social{ margin-top: 12px; }
}

/* === Contrast fix for light header/logo text === */
.topbar,
.topbar * { color: inherit; } /* nollställ ev. hårdkodade färger */

.topbar .logo,
.topbar .logo b,
.topbar .logo a {
  color: #0b1220;                 /* mörk text på ljus topbar */
}

.topbar .logo small,
.topbar .logo .tagline,
.topbar .logo .sub,
.topbar .muted,
.topbar .nav-menu a {
  color: #4b5a72;                 /* sekundär textlänk */
}

.topbar .nav-menu a:hover {
  background: rgba(0,0,0,.06);
  color: #0b1220;
}

/* Om texten under WDBS råkar vara hårdkodad till #fff */
.topbar :is(span,small,em,strong,a).on-light,
.topbar :is(span,small,em,strong,a)[style*="color:#fff"],
.topbar :is(span,small,em,strong,a)[style*="color: rgb(255, 255, 255)"]{
  color:#0b1220 !important;
}

/* === Dark-Reader style overrides (paste at very end) === */
:root{
  --bg:#0b1220;        /* djup midnatt */
  --fg:#e7eef7;        /* ljus text */
  --muted:#9fb0cd;     /* sekundär text */
  --card:#0f1629;      /* mörka kort/paneler */
  --edge:#1f2a44;      /* diskret kant */
  --shadow:0 14px 40px rgba(0,0,0,.45);
  /* behåll brandfärgerna */
  /* --brand:#7c3aed; --brand2:#22d3ee; */
}

/* Topbar – mörk, lätt transparent */
.topbar{
  background:linear-gradient(180deg, rgba(9,14,26,.90), rgba(9,14,26,.70));
  border-bottom:1px solid var(--edge);
}

/* Hero – mörk bas + subtila purple/teal glows */
.hero{
  background:
          radial-gradient(1200px 600px at 22% 20%, rgba(124,58,237,.22), transparent 60%),
          radial-gradient(1200px 600px at 78% 20%, rgba(34,211,238,.18), transparent 60%),
          linear-gradient(180deg, #0b1220 0%, #0a1528 100%);
}

/* Läsbar brödtext i heron */
.hero .lead{ color:#c9d5e8; }

/* Navigation – tydligare kontrast */
.nav-menu a{ color:#9fb0cd; }
.nav-menu a:hover{ color:var(--fg); background:rgba(255,255,255,.06); }

/* Mock-fönster */
.mock{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.mock-bar{
  background:linear-gradient(180deg, #121a30, #0b1324);
  border-bottom:1px solid var(--edge);
}
.mock-block{
  background:linear-gradient(135deg, rgba(124,58,237,.60), rgba(34,211,238,.45));
  border-radius:10px;
}

/* Etiketter i mock-rutor – mörka pills (som i din högra bild) */
.mock-block{ position:relative; }
.mock-block::after{
  content: attr(data-label);
  position:absolute; left:10px; bottom:10px;
  padding:6px 10px;
  font-size:.9rem; font-weight:600; letter-spacing:.3px;
  color:#fff;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;
}

/* Cards / stats – mörkare och med lite glow vid hover */
.card{ background:var(--card); border:1px solid var(--edge); box-shadow:var(--shadow); }
.project:hover{ box-shadow:0 16px 60px rgba(34,211,238,.12); }

/* Knappar – behåll primär gradient, förstärk hover lite */
.btn--primary:hover{ filter:saturate(1.1) brightness(1.05); box-shadow:0 8px 22px rgba(34,211,238,.25); }

/* Footer – mörk, tydlig kant */
.footer{ border-top:1px solid var(--edge); color:var(--muted); }

/* Inputs – mörka fält med tydlig fokusring */
input, textarea{
  background:#0e1729;
  border:1px solid var(--edge);
  color:var(--fg);
}
input:focus, textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(34,211,238,.25);
  border-color:var(--brand2);
}
/* Nav: gör länkarna vita */
.topbar .nav-menu a {
  color: #fff !important;
}
.topbar .nav-menu a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12);
}




/* === Färggladare overrides (KLISTRAS LÄNGST NER) === */

/* Extra accenter att leka med */
:root{
  --accent1:#f97316;  /* orange */
  --accent2:#e11d48;  /* cerise/rosa */
  --accent3:#84cc16;  /* limegrön */
  --accent4:#22d3ee;  /* turkos – matchar din brand2 */
}

/* 1) Rubriker får en snygg flerfärgad underline */
.section-title{
  position:relative;
  padding-bottom:6px;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:84px; height:3px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent1),var(--accent2),var(--accent4));
  box-shadow:0 0 10px rgba(34,211,238,.25);
}

/* 2) Länkar blir tydligare och mer lockande */
a:hover{
  text-decoration:none;
  background-image:linear-gradient(90deg,var(--accent4),var(--accent1));
  background-size:100% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
}

/* 3) Knappar – mer färg på hover + en sekundär variant om du vill använda den */
.btn--primary{
  background:linear-gradient(90deg,var(--brand) 0%, var(--brand2) 100%);
  color:#fff;
}
.btn--primary:hover{
  filter:saturate(1.15) brightness(1.05);
  box-shadow:0 8px 22px rgba(34,211,238,.25);
}
.btn--secondary{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff;
}

/* 4) Cards – subtil färgkant och sken vid hover (ser lyxigare ut) */
.card{
  border:1px solid rgba(255,255,255,.04);
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.25)) border-box; /* brand -> turkos */
}
.card:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 3px rgba(34,211,238,.15) inset;
  transform:translateY(-3px);
}

/* 5) Projekt/thumbnail-ytor – mer färg */
.thumb{
  display:grid; place-items:center;
  color:#fff; font-weight:600; letter-spacing:.3px;
  background:linear-gradient(135deg,var(--brand2),var(--accent1),var(--accent2),var(--brand));
  border-radius:var(--radius);
  min-height:120px;
}

/* 6) Badges (små runda i logotyp/hero/timeline) – gör dem “glowiga” */
.badge{
  display:inline-block;
  width:28px; height:28px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--accent1));
  box-shadow:0 0 0 3px rgba(124,58,237,.25);
}

/* 7) Inputs – tydlig färgring på fokus */
input, textarea, select{
  background:var(--edge);
  border:1px solid var(--edge);
  color:var(--fg);
  border-radius:12px;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--brand2);
  box-shadow:0 0 0 3px rgba(34,211,238,.25);
}

/* 8) Hero – lite mer “pop” utan att byta stil helt */
.hero{
  background:
    linear-gradient(135deg, rgba(20,28,51,.85), rgba(20,28,51,.85)),
    radial-gradient(80rem 40rem at -20% -20%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(60rem 38rem at 120% 20%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(60rem 30rem at 50% 120%, rgba(233,69,96,.18), transparent 60%);
  /* behåller din textfärg och spacing */
}

/* 9) Footer – tunn färglinje högst upp för att bryta det mörka */
.footer{
  position:relative;
}
.footer::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent1),var(--accent2),var(--brand2));
  opacity:.9;
}

/* 10) Socialikoner – lite extra glöd på hover (om du använder blocket) */
.hero-social .icon:hover{
  box-shadow:0 10px 22px rgba(0,0,0,.45), 0 0 0 4px rgba(34,211,238,.2);
}

/* 11) Timeline (om du använder .timeline) – färga siffror/badges */
.timeline li span{
  background:linear-gradient(135deg,var(--brand),var(--accent1));
  color:#fff;
  box-shadow:0 0 0 3px rgba(124,58,237,.25);
}

.logo-img {
  height: 170px;      /* justera storlek */
  width: auto;
  display: block;
}

/* ---- Lås färgtemat oavsett telefonens ljus/mörk ---- */
html { color-scheme: dark; } /* bättre formulär/scrollbars i mörkt läge */

@media (prefers-color-scheme: light){
  :root{
    /* använd samma palett som ditt mörka tema */
    --bg:#0b0f19; --fg:#e8eef7; --muted:#96a3b8; --card:#0f1629; --edge:#1f2a44;
    --shadow:0 12px 30px rgba(0,0,0,.35);
    /* behåll övriga variabler oförändrade */
  }
}

a[href^="tel"] {
  color: var(--fg);
  font-weight: bold;
  text-decoration: none;
}

a[href^="tel"].btn {
  background: var(--primary);
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  display: inline-block;
}

a[href^="tel"].btn:hover {
  background: var(--primary-hover, #0056b3);
}


/* Telefonknapp */
.btn--secondary {
  background: linear-gradient(90deg, var(--brand2), var(--brand));
  color:#fff;
}
.btn--secondary:hover {
  filter: brightness(1.1);
}



/* Visas bara på desktop */
.only-desktop { display: none; }
@media (min-width: 1024px){
  .only-desktop { display: block; }
}

/* Diskret “ghost”-knapp för telefonnumret */
.btn--ghost{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border:1px solid var(--edge);
  border-radius:12px;
  background:transparent;
  color:var(--fg);
  font-weight:600;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--brand2);
  color:#fff;
}

/* Se till att nav-länkar inte “hoppar” i höjd */
.nav-menu li a.btn--ghost,
.nav-menu li a.btn.btn--small{ line-height:1; }


.contact-direct a {
  color: var(--brand2);
  font-weight: 600;
  text-decoration: none;
}
.contact-direct a:hover {
  text-decoration: underline;
}
.contact-direct p {
  margin: 6px 0;
  font-size: 1.1rem;
}

/* === Toast (popup) === */
.toast{
  position: fixed;
  right: 20px; bottom: 22px;
  background: #16a34a;           /* grön */
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  display: flex; gap: 10px; align-items: center;
  max-width: min(92vw, 420px);
  z-index: 9999;

  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-visible{
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.toast.toast--error{ background:#ef4444; }   /* röd vid fel */

.toast-close{
  background: transparent; border: none; color:#fff;
  font-size: 16px; cursor: pointer; line-height: 1;
  opacity: .9;
}
.toast-close:hover{ opacity: 1; }


/* === Modal toast (centrerad bekräftelse) === */
.modal-toast{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.modal-toast.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.modal-toast__box{
  background: #16a34a; /* grön bakgrund */
  color: #fff;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  animation: popIn .25s ease;
}
.modal-toast__box p{
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
@keyframes popIn{
  from{ transform: scale(.9); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

/* Röd variant om du vill använda vid fel */
.modal-toast__box.error{
  background: #dc2626; /* röd bakgrund */
}

/* Modal – ska INTE blockera klick när den är gömd */
.modal-toast{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 9999;

  opacity: 0;
  pointer-events: none;        /* <- släpper igenom klick när gömd */
  transition: opacity .25s ease;
}

.modal-toast.is-visible{
  opacity: 1;
  pointer-events: auto;        /* <- fånga klick när den visas */
}

/* Själva rutan (behåll gärna din befintliga stil) */
.modal-toast__box{
  background: #16a34a;
  color:#fff;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}

/* 1) Stäng av horisontell rullning helt */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;      /* fallback */
}

/* 2) Klipp allt som ändå råkar sticka ut i sektioner/topbar/footer */
header, .topbar, section, footer, .container, .wrap {
  overflow-x: clip;        /* modern, utan scroll */
}

/* 3) Media får aldrig bli bredare än viewport */
img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 4) Vanlig bov: element som använder 100vw skapar overflow pga scrollbar.
   Om du använder .fullwidth / .hero etc, tvinga dem till 100% istället. */
.fullwidth, .hero, .hero-content, .band, .strip {
  width: 100%;
  max-width: 100%;
}

/* 5) Box-shadow/glow som ligger utanför kan trigga scroll – klipp dem. */
.hero, .card, .mock, .shadow, .glow {
  overflow: clip;
}

/* 6) Säkerställ att alla element räknar padding i bredd */
*, *::before, *::after { box-sizing: border-box; }


/* === Footer fix för små skärmar === */
footer {
  text-align: center;              /* centrera all text i footern */
  line-height: 1.6;
  padding: 20px 10px;
}

footer .footer-inner {
  display: flex;
  flex-direction: column;          /* stapla på mobil */
  align-items: center;
  gap: 8px;
}

/* Gör så att årtal + företagsnamn + ort håller ihop */
footer .footer-brand {
  white-space: nowrap;             /* inget radbryt mitt i */
  font-weight: 600;
}

/* Telefonnummer också tydligt */
footer .footer-phone {
  white-space: nowrap;
  font-weight: 500;
}

/* Footer text på en rad */
.footer .foot{
  display:flex;
  justify-content:center;
  align-items:center;
}

.footer-line{
  display:flex;
  align-items:center;
  gap:10px;
  white-space: nowrap;
  font-weight:600;
  font-size: clamp(11px, 2.9vw, 16px);
  line-height: 1.6;
  text-align:center;
}

/* Klickbar telefonlänk */
.footer-phone{
  color: var(--brand2, #16a34a);
  text-decoration: none;
  font-weight:700;
}
.footer-phone:hover{
  text-decoration: underline;
}

.footer-line .sep{ opacity:.65; }


/* === FIX: Låt navigationen inte klippas === */
header,
.topbar,
.topbar .inner,
nav,
.nav {
  overflow: visible !important;   /* dropdownen får sticka ut */
}

/* Se till att menyn ligger över resten */
.topbar { position: relative; z-index: 2000; }
.nav-menu { z-index: 3000; }
.nav-toggle { z-index: 3100; } /* knappen över panelen */

/* (Om du har en regel som satte overflow-x: clip på header/topbar, denna vinner nu) */