/* ==========================================================================
   eBite - huvudstilmall, designversion A
   Ljus översättning av den mörka designen (B): samma layout, ljusa färger. Bygger ovanpå Bootstrap 5.
   ========================================================================== */

/* Typsnitt (lokalt i temat - inga anrop till Google Fonts) ------------------ */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Titillium Web";
	src: url("../fonts/titillium-web-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Designtokens ------------------------------------------------------------- */
:root {
	--eb-bg: #ffffff;
	--eb-bg-2: #f6f8fb;
	--eb-card: #ffffff;
	--eb-card-2: #f4f6fa;
	--eb-line: rgba(15, 23, 42, 0.08);
	--eb-line-strong: rgba(15, 23, 42, 0.14);

	--eb-heading: #0b1220;
	--eb-text: #1e293b;
	--eb-muted: #5b6678;
	--eb-dim: #8b95a5;

	--eb-blue: #2458e6;
	--eb-teal: #087a6f;
	--eb-amber: #d97706;
	--eb-grad: linear-gradient(100deg, #2458e6 0%, #0fa899 100%);

	--eb-radius: 18px;
	--eb-radius-sm: 10px;

	--eb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--eb-font-logo: "Titillium Web", var(--eb-font);
	--eb-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

	/* Bootstrap-variabler */
	--bs-body-font-family: var(--eb-font);
	--bs-body-color: var(--eb-text);
	--bs-body-bg: var(--eb-bg);
	--bs-emphasis-color: var(--eb-heading);
	--bs-link-color-rgb: 36, 88, 230;
	--bs-link-hover-color-rgb: 27, 70, 192;
	--bs-border-color: var(--eb-line);
	--bs-focus-ring-color: rgba(79, 140, 255, 0.45);
	color-scheme: light;
}

/* Bas ---------------------------------------------------------------------- */
body {
	font-family: var(--eb-font);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--eb-text);
	background: var(--eb-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	color: var(--eb-heading);
	font-weight: 650;
	letter-spacing: -0.025em;
	line-height: 1.12;
}

img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 575.98px) {
	.container {
		--bs-gutter-x: 2.5rem;
	}
}

::selection {
	background: rgba(79, 140, 255, 0.35);
	color: var(--eb-heading);
}

:focus-visible {
	outline: 2px solid var(--eb-teal);
	outline-offset: 3px;
	border-radius: 4px;
}

.eb-icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

.eb-gradient-text {
	white-space: nowrap;
	background: var(--eb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.eb-skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 2000;
	padding: 0.75rem 1rem;
	background: var(--eb-heading);
	color: #fff;
	border-radius: var(--eb-radius-sm);
	text-decoration: none;
}

.eb-skip-link:focus {
	top: 1rem;
}

/* Knappar ------------------------------------------------------------------ */
.btn {
	--bs-btn-font-weight: 600;
	--bs-btn-padding-x: 1.125rem;
	--bs-btn-padding-y: 0.55rem;
	--bs-btn-border-radius: 999px;
	--bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-lg {
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 0.8rem;
	--bs-btn-font-size: 1rem;
}

.btn .eb-icon {
	width: 1.1em;
	height: 1.1em;
}

/* Huvudknappen ("Boka demo" i header, hero och CTA): eBite-blå. */
.btn-light {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--eb-blue);
	--bs-btn-border-color: var(--eb-blue);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #1d4bd0;
	--bs-btn-hover-border-color: #1d4bd0;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1a41b8;
	--bs-btn-active-border-color: #1a41b8;
	box-shadow: 0 8px 30px rgba(36, 88, 230, 0.22);
}

.btn-ghost {
	--bs-btn-color: var(--eb-text);
	--bs-btn-bg: rgba(15, 23, 42, 0.04);
	--bs-btn-border-color: var(--eb-line-strong);
	--bs-btn-hover-color: var(--eb-heading);
	--bs-btn-hover-bg: rgba(15, 23, 42, 0.08);
	--bs-btn-hover-border-color: rgba(15, 23, 42, 0.28);
	--bs-btn-active-color: var(--eb-heading);
	--bs-btn-active-bg: rgba(15, 23, 42, 0.1);
	--bs-btn-active-border-color: rgba(15, 23, 42, 0.28);
}

.eb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

/* Logotyp ------------------------------------------------------------------ */
.eb-logo {
	display: inline-flex;
	text-decoration: none;
	line-height: 1;
}

.eb-logo__mark {
	display: inline-block;
	padding: 0.28em 0.5em 0.3em;
	font-family: var(--eb-font-logo);
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: -0.01em;
	border-radius: 0.3em;
	background: var(--eb-heading);
	color: #fff;
	transition: box-shadow 0.2s ease;
}

.eb-logo:hover .eb-logo__mark {
	box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.35);
}

/* Header ------------------------------------------------------------------- */
.eb-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.eb-header.is-scrolled {
	background: rgba(255, 255, 255, 0.94);
	border-bottom-color: var(--eb-line);
}

.admin-bar .eb-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .eb-header {
		top: 46px;
	}
}

.eb-header .navbar {
	--bs-navbar-padding-y: 0.9rem;
}

.eb-header .nav-link {
	color: var(--eb-muted);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.5rem 0.85rem !important;
	border-radius: 999px;
	background: none;
	border: 0;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.eb-header .nav-link:hover,
.eb-header .nav-link:focus-visible,
.eb-header .nav-link.show,
.eb-header .nav-link.active {
	color: var(--eb-heading);
}

.eb-header .nav-link:hover,
.eb-header .nav-link.show {
	background: rgba(15, 23, 42, 0.06);
}

/* Dator: lite luft mellan menyvalen, så att markeringen på aktiv sida och hovring inte går ihop */
@media (min-width: 992px) {
	.eb-header .navbar-nav {
		gap: 0.3rem;
	}
}

.eb-header .dropdown-toggle::after {
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.45em;
	border: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
	vertical-align: middle;
	transition: transform 0.15s ease;
}

.eb-header .dropdown-toggle.show::after {
	transform: translateY(0.05em) rotate(-135deg);
}

.eb-header .dropdown-menu {
	--bs-dropdown-bg: var(--eb-card);
	--bs-dropdown-color: var(--eb-text);
	--bs-dropdown-border-color: var(--eb-line-strong);
	--bs-dropdown-border-radius: 14px;
	--bs-dropdown-padding-y: 0.5rem;
	--bs-dropdown-padding-x: 0.5rem;
	--bs-dropdown-min-width: 15rem;
	--bs-dropdown-link-color: var(--eb-text);
	--bs-dropdown-link-hover-bg: rgba(15, 23, 42, 0.06);
	--bs-dropdown-link-hover-color: var(--eb-heading);
	--bs-dropdown-link-active-bg: rgba(79, 140, 255, 0.14);
	--bs-dropdown-link-active-color: var(--eb-heading);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.eb-header .dropdown-item {
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.95rem;
}

.eb-header__cta {
	margin-left: 1rem;
	box-shadow: none;
}

/* Hamburgermeny */
.eb-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 11px;
	border: 1px solid var(--eb-line-strong);
	border-radius: 999px;
}

.eb-burger span {
	display: block;
	height: 1.5px;
	background: var(--eb-heading);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.eb-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.eb-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.eb-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

.eb-burger:focus {
	box-shadow: none;
}

@media (max-width: 991.98px) {
	.eb-header .navbar-collapse {
		padding: 1rem 0 0.5rem;
	}

	.eb-header .nav-link {
		padding: 0.75rem 0.5rem !important;
		font-size: 1.05rem;
		color: var(--eb-text);
	}

	/* Luft mellan menyvalen, så att markeringen på aktiv sida och en öppen undermeny inte går ihop.
	   Produkter (en knapp) blir lika bred som länkarna, så att markeringarna ser likadana ut. */
	.eb-header .navbar-nav {
		gap: 0.35rem;
	}

	.eb-header .dropdown-toggle {
		width: 100%;
		text-align: left;
	}

	.eb-header .dropdown-menu {
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0.5rem 0.75rem;
	}

	.eb-header__cta {
		margin: 1rem 0 0;
		width: 100%;
	}
}

/* Etikett ovanför rubriker -------------------------------------------------- */
.eb-eyebrow {
	margin-bottom: 1rem;
	font-family: var(--eb-font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eb-teal);
}

.eb-eyebrow::before {
	content: "// ";
	color: var(--eb-dim);
}

/* Hero --------------------------------------------------------------------- */
.eb-hero {
	position: relative;
	overflow: hidden;
	margin-top: -76px;
	padding: calc(clamp(4rem, 9vw, 7rem) + 76px) 0 clamp(5rem, 11vw, 9rem);
}

/* Ljusglöd och rutnät i bakgrunden */
.eb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50rem 26rem at 50% 100%, rgba(79, 140, 255, 0.2), transparent 70%),
		radial-gradient(30rem 16rem at 72% 100%, rgba(61, 214, 195, 0.1), transparent 70%);
	pointer-events: none;
}

.eb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Bikakemönster: en spetsig hexagon (sida 24px) per ruta plus kanten ned till nästa rad,
	   som är förskjuten en halv hexagon. Rutan är √3 × 24 bred och 3 × 24 hög. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.569' height='72'%3E%3Cpath d='M20.785 0L41.569 12V36L20.785 48L0 36V12ZM20.785 48V72' fill='none' stroke='rgba(15,23,42,0.1)' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 41.569px 72px;
	background-position: center top;
	mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 80%);
	opacity: 0.6;
	pointer-events: none;
}

.eb-hero .container {
	position: relative;
	z-index: 1;
}

.eb-hero__intro {
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}

.eb-hero__intro .eb-actions {
	justify-content: center;
}

.eb-hero__title {
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 650;
	letter-spacing: -0.045em;
	line-height: 1.02;
	margin-bottom: 1.5rem;
}

/* Startsidan: rubriken på en rad på större skärmar. */
.eb-hero__intro--wide {
	max-width: none;
}

@media (min-width: 992px) {
	.eb-hero__title--line {
		font-size: min(6rem, 6.6vw);
		white-space: nowrap;
	}
}

.eb-hero__lead {
	max-width: 38rem;
	margin: 0 auto;
	font-size: clamp(1.075rem, 1.5vw, 1.25rem);
	color: var(--eb-muted);
	text-wrap: balance;
}

/* Abstrakt skärmbild i produktkort (ljus, i produktens egna färger) --------------- */
.eb-shot {
	width: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.14);
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12), 0 0 0 6px rgba(15, 23, 42, 0.03);
}

.eb-shot svg {
	display: block;
	width: 100%;
	height: auto;
}

.eb-shot .page { fill: #f3f4f6; }
.eb-shot .nav { fill: #2d2f36; }
.eb-shot .navi { fill: #d9dbe0; }
.eb-shot .navl { fill: #8b8f99; }
.eb-shot .navs { fill: #4a4d55; }
.eb-shot .pnl { fill: #fff; stroke: #e5e7eb; }
.eb-shot .zebra { fill: #f6f7f9; }
.eb-shot .line { fill: #e5e7eb; }
.eb-shot .t { fill: #1f2937; }
.eb-shot .t2 { fill: #4b5563; }
.eb-shot .m { fill: #9ca3af; }
.eb-shot .m2 { fill: #c4c9d1; }
.eb-shot .gbtn { fill: #1e7f4f; }
.eb-shot .btnt { fill: #d6efe2; }
.eb-shot .out { fill: #fff; stroke: #c4c9d1; }
.eb-shot .out-no { fill: #fff; stroke: #dc2626; }
.eb-shot .no-t { fill: #dc2626; }
.eb-shot .dots { stroke: #9ca3af; stroke-width: 1; stroke-dasharray: 2 3; }
.eb-shot .chip-ok { fill: #e8f5ee; stroke: #1e7f4f; }
.eb-shot .chipt-ok { fill: #1e7f4f; }
.eb-shot .chip-no { fill: #fdecec; stroke: #dc2626; }
.eb-shot .chipt-no { fill: #dc2626; }
.eb-shot .chip-mid { fill: #fdf1e3; stroke: #d97706; }
.eb-shot .chipt-mid { fill: #d97706; }
.eb-shot .white { fill: #fff; }
.eb-shot .b { fill: #1f6feb; }
.eb-shot .bs { fill: #dbe7fb; }
.eb-shot .g { fill: #1e7f4f; }
.eb-shot .r { fill: #dc2626; }
.eb-shot .tr { fill: #e5e7eb; }
.eb-shot .hdr { fill: #e6effb; }
.eb-shot .chip { fill: #f3f4f6; stroke: #e5e7eb; }
.eb-shot .me { fill: #e8eaee; }
.eb-shot .lb { fill: #a5c4f7; }
.eb-shot .spark { fill: none; stroke: #1f6feb; stroke-width: 1.5; }
.eb-shot .grey { fill: #e9ebee; stroke: #d1d5db; }
.eb-shot .okbox { fill: #dcefe6; stroke: #b9dcc9; }
.eb-shot .okline { fill: none; stroke: #1e7f4f; stroke-width: 1.5; }
.eb-shot .okt { fill: #166534; }
.eb-shot .warn { fill: #fff8e1; stroke: #f5d77a; }
.eb-shot .warnt { fill: #b45309; }
.eb-shot .yellow { fill: #f5c518; }
.eb-shot .input { fill: #f3f4f6; stroke: #eceef1; }
.eb-shot .dark { fill: #374151; }
.eb-shot .teal { fill: #0d9488; }
.eb-shot .purple { fill: #7c3aed; }
.eb-shot .tag { fill: #14a37f; }
.eb-shot .tealbtn { fill: #0d9488; }
.eb-shot .dot { fill: #d6d9e0; }
.eb-shot .edge { stroke: #b9cde6; stroke-width: 0.8; opacity: 0.7; }
.eb-shot .nb { fill: #1d5fbf; stroke: #fff; stroke-width: 1; }
.eb-shot .ng { fill: #159a5b; stroke: #fff; stroke-width: 1; }
.eb-shot .nt { fill: #0f9fa8; stroke: #fff; stroke-width: 1; }
/* Tjänstekatalogen: mörkblå meny, blå markering och kategoriernas egna färger (k1-k13). */
.eb-shot .navy { fill: #1e293b; }
.eb-shot .navsel { fill: #27354b; }
.eb-shot .acc { fill: #3b82f6; }
.eb-shot .chev { fill: none; stroke: #9ca3af; stroke-width: 1.2; }
.eb-shot .orange { fill: #e8932c; }
.eb-shot .oranges { fill: #fdf0dc; }
.eb-shot .reds { fill: #fde8e8; }
.eb-shot .k1 { fill: #f47c5a; }
.eb-shot .k2 { fill: #77935c; }
.eb-shot .k3 { fill: #8b1010; }
.eb-shot .k4 { fill: #5ee65e; }
.eb-shot .k5 { fill: #e8679a; }
.eb-shot .k6 { fill: #4f8ff7; }
.eb-shot .k7 { fill: #0b1080; }
.eb-shot .k8 { fill: #5b7f99; }
.eb-shot .k9 { fill: #8b4513; }
.eb-shot .k10 { fill: #5b55a0; }
.eb-shot .k11 { fill: #96578f; }
.eb-shot .k12 { fill: #2bb3a0; }
.eb-shot .k13 { fill: #f06ab0; }
/* TOR: nyckeltalens färger, tabellhuvud och etiketter för taggar och ägare. */
.eb-shot .tor-teal { fill: #2d5759; }
.eb-shot .tor-yellow { fill: #fcc010; }
.eb-shot .tor-cyan { fill: #10c9ee; }
.eb-shot .tor-red { fill: #dc3545; }
.eb-shot .tor-head { fill: #33588a; }
.eb-shot .tor-blue { fill: #1f4e8c; }
.eb-shot .tor-orange { fill: #f0a868; }
.eb-shot .tor-green { fill: #7cb342; }
.eb-shot .tor-own { fill: #2c5c5a; }
.eb-shot .tor-org { fill: #7d63b8; }
.eb-shot .iconw { fill: rgba(255, 255, 255, 0.9); }
.eb-shot .gauge { fill: none; stroke: #6b7280; stroke-width: 3; stroke-linecap: round; }
/* FotaSäkert: appen i en telefon. Telefonen är själva ramen, så figurens egen ram och skugga tas bort. */
.eb-shot--phone {
	max-width: 19rem;
	margin: 0 auto;
	overflow: visible;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.eb-shot--phone svg { filter: drop-shadow(0 24px 40px rgba(15, 23, 42, 0.22)); }
.eb-shot .phone { fill: #111827; }
.eb-shot .fs-blue { fill: #0d47a1; }
.eb-shot .fs-light { fill: rgba(255, 255, 255, 0.55); }
.eb-shot .fs-shield { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.eb-shot .fs-line { fill: none; stroke: #4b5563; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eb-shot .fs-card { fill: #f3f4f6; stroke: #374151; stroke-width: 1.5; }
.eb-shot .fs-ring { fill: #e5e7eb; stroke: #374151; stroke-width: 2; }
.eb-shot .fs-cam { fill: none; stroke: #0d47a1; stroke-width: 3; stroke-linejoin: round; }
.eb-shot .fs-lens { fill: none; stroke: #0d47a1; stroke-width: 3; }
.eb-shot .fs-note { fill: #eef0f2; stroke: #d1d5db; }
.eb-shot .fs-ok { fill: none; stroke: #22a05a; stroke-width: 2; stroke-linejoin: round; }
.eb-shot .fs-navbtn { fill: none; stroke: #4b5563; stroke-width: 1.8; }

/* Mjukare textlinjer i list- och systemvyn (rubriker mörkgrå, brödtext ljusgrå) */
.eb-shot--soft .t { fill: #475569; }
.eb-shot--soft .t2 { fill: #cfd5dd; }

/* Statusmarkörer i produktkortens illustrationer */
.eb-product__visual b {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 500;
}

.eb-product__visual b::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}

.ok {
	color: var(--eb-teal);
}

.warn {
	color: var(--eb-amber);
}

/* Kundlogotyper ------------------------------------------------------------ */
.eb-customers {
	position: relative;
	padding: 3.5rem 0;
	border-top: 1px solid var(--eb-line);
	border-bottom: 1px solid var(--eb-line);
}

.eb-customers__title {
	margin-bottom: 2rem;
	font-family: var(--eb-font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--eb-dim);
}

.eb-customers__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.75rem 3.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-customers__list a {
	display: block;
}

/* Gråa logotyper; vita bakgrunder smälter in mot den ljusa sidan. */
.eb-customers__list img {
	display: block;
	width: auto;
	max-width: 150px;
	height: 50px;
	object-fit: contain;
	filter: grayscale(1);
	mix-blend-mode: multiply;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.eb-customers__list a:hover img,
.eb-customers__list a:focus-visible img {
	opacity: 1;
}

/* Sektioner ---------------------------------------------------------------- */
.eb-section {
	padding: clamp(4.5rem, 9vw, 7rem) 0;
}

.eb-section--line {
	border-top: 1px solid var(--eb-line);
}

.eb-section--tight {
	padding-top: 0;
}

/* Sektion som fortsätter direkt i nästa (Så arbetar vi → produkterna): mindre luft under. */
.eb-section--flow {
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.eb-section__head {
	max-width: 44rem;
	margin-bottom: 3rem;
}

.eb-section__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 1rem;
}

.eb-section__lead {
	font-size: 1.1rem;
	color: var(--eb-muted);
	margin-bottom: 0;
}

/* Produkter (bento) --------------------------------------------------------- */
/* Varje kort har en egen accentfärg (--eb-accent-c, sätts i mallen) så att produkterna skiljs åt. */
.eb-product {
	--eb-accent-c: var(--eb-blue);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: var(--eb-radius);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
	transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.eb-product:hover,
.eb-product:focus-within {
	background: #fbfcfe;
	border-color: color-mix(in srgb, var(--eb-accent-c) 45%, transparent);
	transform: translateY(-3px);
}

.eb-product__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 13rem;
	padding: 2.25rem 2rem 1.75rem;
	background:
		radial-gradient(28rem 12rem at 50% 100%, color-mix(in srgb, var(--eb-accent-c) 16%, transparent), transparent 70%),
		rgba(15, 23, 42, 0.015);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	font-size: 0.8125rem;
}

.eb-product__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 2rem 2rem;
}

.eb-product__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-family: var(--eb-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--eb-muted);
}

.eb-product__tag .eb-icon {
	width: 1rem;
	height: 1rem;
	color: var(--eb-accent-c);
}

.eb-product__title {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.eb-product__title a {
	color: var(--eb-heading);
	text-decoration: none;
}

.eb-product__body p {
	color: var(--eb-muted);
}

.eb-product__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 500;
	color: var(--eb-heading);
}

.eb-product__more .eb-icon {
	width: 1rem;
	height: 1rem;
	color: var(--eb-accent-c);
	transition: transform 0.2s ease;
}

.eb-product:hover .eb-product__more .eb-icon {
	transform: translateX(4px);
}

/* Mini-illustrationer i produktkorten */
.eb-viz-bars {
	width: 100%;
	max-width: 26rem;
}

.eb-viz-bars p {
	margin-bottom: 0.85rem;
	font-family: var(--eb-font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--eb-dim);
}

.eb-viz-bars div {
	display: grid;
	grid-template-columns: 8.5rem 1fr 3rem;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
	color: var(--eb-muted);
}

.eb-viz-bars i {
	height: 8px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.06);
	position: relative;
	overflow: hidden;
}

.eb-viz-bars i::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w);
	border-radius: inherit;
	background: var(--eb-grad);
}

.eb-viz-bars b {
	font-weight: 500;
	color: var(--eb-text);
	text-align: right;
}

.eb-viz-bars b::before {
	display: none;
}

/* Nav: ett system i mitten med det Systemlistan samlar runt omkring */
.eb-viz-hub {
	position: relative;
	width: 100%;
	max-width: 22rem;
	aspect-ratio: 320 / 190;
}

.eb-viz-hub__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.eb-viz-hub__lines path {
	fill: none;
	stroke: rgba(79, 140, 255, 0.5);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	vector-effect: non-scaling-stroke;
}

.eb-viz-hub__node {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	font-family: var(--eb-font-mono);
	font-size: 0.7rem;
	color: var(--eb-text);
	white-space: nowrap;
	background: var(--eb-card-2);
	border: 1px solid var(--eb-line-strong);
	border-radius: 8px;
	transform: translate(-50%, -50%);
}

.eb-viz-hub__node .eb-icon {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--eb-blue);
}

.eb-viz-hub__node--center {
	top: 50%;
	left: 50%;
	padding: 0.6rem 0.9rem;
	font-size: 0.75rem;
	color: var(--eb-heading);
	border-color: rgba(61, 214, 195, 0.6);
	box-shadow: 0 0 28px rgba(61, 214, 195, 0.22);
}

.eb-viz-hub__node--center .eb-icon {
	color: var(--eb-teal);
}

.eb-viz-hub__node--tl { top: 17.9%; left: 16.25%; }
.eb-viz-hub__node--tr { top: 17.9%; left: 83.75%; }
.eb-viz-hub__node--bl { top: 82.1%; left: 16.25%; }
.eb-viz-hub__node--br { top: 82.1%; left: 83.75%; }

/* Påminnelse: avtalet löper snart ut */
.eb-viz-hub__alert {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 9px;
	height: 9px;
	background: var(--eb-amber);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(245, 181, 71, 0.6);
	animation: eb-pulse 2s ease-out infinite;
}

@keyframes eb-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(245, 181, 71, 0.6);
	}
	70%,
	100% {
		box-shadow: 0 0 0 8px rgba(245, 181, 71, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.eb-viz-hub__alert {
		animation: none;
	}
}

.eb-viz-upload {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	max-width: 22rem;
	padding: 1rem;
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid var(--eb-line-strong);
	border-radius: 12px;
}

.eb-viz-upload strong {
	display: block;
	font-weight: 500;
	color: var(--eb-heading);
}

.eb-viz-upload small {
	color: var(--eb-muted);
}

.eb-viz-upload__icon,
.eb-viz-upload__ok {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: 10px;
}

.eb-viz-upload__icon {
	color: var(--eb-blue);
	background: rgba(79, 140, 255, 0.12);
}

.eb-viz-upload__ok {
	width: 1.75rem;
	height: 1.75rem;
	margin-left: auto;
	color: var(--eb-bg);
	background: var(--eb-teal);
	border-radius: 50%;
}

.eb-viz-upload__ok .eb-icon {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.5;
}

.eb-viz-devices {
	width: 100%;
	max-width: 28rem;
}

.eb-viz-devices div {
	display: grid;
	grid-template-columns: 6rem 1fr auto;
	gap: 1rem;
	align-items: center;
	padding: 0.7rem 0.9rem;
	color: var(--eb-muted);
	border-bottom: 1px solid var(--eb-line);
}

.eb-viz-devices div:first-child {
	border-top: 1px solid var(--eb-line);
}

.eb-viz-devices span:first-child {
	font-family: var(--eb-font-mono);
	font-size: 0.75rem;
	color: var(--eb-text);
}

/* Plattformsegenskaper ------------------------------------------------------ */
.eb-caps {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	overflow: hidden;
	background: var(--eb-line);
	border: 1px solid var(--eb-line);
	border-radius: var(--eb-radius);
}

.eb-cap {
	padding: 2rem;
	background: var(--eb-bg);
}

.eb-cap__icon {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1.25rem;
	color: var(--eb-teal);
	background: rgba(61, 214, 195, 0.08);
	border: 1px solid rgba(61, 214, 195, 0.2);
	border-radius: 10px;
}

.eb-cap__icon .eb-icon {
	width: 1.2rem;
	height: 1.2rem;
}

.eb-cap__title {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.eb-cap p {
	margin: 0;
	color: var(--eb-muted);
	font-size: 0.975rem;
}

@media (max-width: 575.98px) {
	.eb-caps {
		grid-template-columns: 1fr;
	}
}

/* CTA ---------------------------------------------------------------------- */
.eb-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
	text-align: center;
	background:
		radial-gradient(40rem 18rem at 50% 120%, rgba(36, 88, 230, 0.18), transparent 70%),
		var(--eb-card);
	border: 1px solid var(--eb-line-strong);
	border-radius: 24px;
}

.eb-cta__title {
	max-width: 36rem;
	margin: 0 auto;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.eb-cta .eb-actions {
	justify-content: center;
}

/* Produktsidor ------------------------------------------------------------- */
.eb-hero--product {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.eb-hero__title--product {
	font-size: clamp(2.5rem, 6vw, 4.75rem);
}

.eb-hero--product .eb-hero__lead {
	max-width: 46rem;
	font-size: clamp(1.02rem, 1.3vw, 1.125rem);
}

/* Produktnamnet som liten rad överst i h1 */
.eb-hero__kicker {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--eb-font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--eb-teal);
}

.eb-product-hero-shot {
	position: relative;
	max-width: 68rem;
	margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.eb-product-hero-shot::before {
	content: "";
	position: absolute;
	inset: 10% 5% -6%;
	background: radial-gradient(closest-side, rgba(79, 140, 255, 0.35), transparent);
	filter: blur(40px);
	pointer-events: none;
}

.eb-product-hero-shot .eb-shot {
	position: relative;
	border-radius: 14px;
}

.eb-section--tight-top {
	padding-top: 0;
}

.eb-section__head--wide {
	max-width: none;
}

/* Klickbar funktionslista: rubriker till vänster, vald funktion i panelen */
.eb-explorer {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 1.5rem;
	align-items: start;
}

.eb-explorer__list {
	display: grid;
	gap: 0.25rem;
}

.eb-explorer__tab {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	padding: 0.8rem 1rem;
	font: inherit;
	font-size: 0.975rem;
	font-weight: 500;
	text-align: left;
	color: var(--eb-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.eb-explorer__tab .eb-icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--eb-dim);
	transition: color 0.15s ease;
}

.eb-explorer__tab:hover {
	color: var(--eb-heading);
	background: rgba(15, 23, 42, 0.04);
}

.eb-explorer__tab[aria-selected="true"] {
	color: var(--eb-heading);
	background: var(--eb-card-2);
	border-color: var(--eb-line-strong);
}

.eb-explorer__tab[aria-selected="true"] .eb-icon {
	color: var(--eb-teal);
}

.eb-explorer__panels {
	position: sticky;
	top: 6rem;
}

.eb-explorer__panel {
	position: relative;
	min-height: 22rem;
	padding: clamp(2rem, 4vw, 3rem);
	overflow: hidden;
	background:
		radial-gradient(30rem 18rem at 100% 0%, rgba(79, 140, 255, 0.18), transparent 70%),
		radial-gradient(24rem 14rem at 0% 100%, rgba(61, 214, 195, 0.1), transparent 70%),
		var(--eb-card);
	border: 1px solid var(--eb-line-strong);
	border-radius: 24px;
}

.eb-explorer__count {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	font-family: var(--eb-font-mono);
	font-size: 0.75rem;
	color: var(--eb-dim);
}

.eb-explorer__icon {
	display: inline-grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 2rem;
	color: var(--eb-teal);
	background: rgba(61, 214, 195, 0.08);
	border: 1px solid rgba(61, 214, 195, 0.25);
	border-radius: 16px;
}

.eb-explorer__icon .eb-icon {
	width: 1.9rem;
	height: 1.9rem;
}

.eb-explorer__title {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
	margin-bottom: 1rem;
}

.eb-explorer__text {
	max-width: 32rem;
	margin: 0;
	font-size: 1.15rem;
	color: var(--eb-muted);
}

/* När skriptet har tagit över visas bara den valda panelen, med en mjuk övergång */
.eb-explorer.is-ready .eb-explorer__panel[hidden] {
	display: none;
}

.eb-explorer.is-ready .eb-explorer__panel {
	animation: eb-fade-in 0.35s ease;
}

@keyframes eb-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Utan skript: visa alla funktioner under varandra, utan flikraden */
.eb-explorer:not(.is-ready) {
	grid-template-columns: 1fr;
}

.eb-explorer:not(.is-ready) .eb-explorer__list {
	display: none;
}

/* Svepstapeln (main.js) syns bara på mobil, när rubrikraden är bredare än skärmen */
.eb-explorer__progress {
	display: none;
}

.eb-explorer:not(.is-ready) .eb-explorer__panels {
	position: static;
	display: grid;
	gap: 1rem;
}

.eb-explorer:not(.is-ready) .eb-explorer__panel {
	min-height: 0;
}

/* Mobil: rubrikerna blir en rad att svepa i sidled, panelen under */
@media (max-width: 991.98px) {
	.eb-explorer {
		grid-template-columns: 1fr;
	}

	.eb-explorer__list {
		display: flex;
		gap: 0.5rem;
		padding-bottom: 0.5rem;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.eb-explorer__list::-webkit-scrollbar {
		display: none;
	}

	/* Högra kanten tonas ut så länge det finns fler rubriker att svepa fram (main.js sätter klasserna) */
	.eb-explorer.has-overflow:not(.is-at-end) .eb-explorer__list {
		-webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
		mask-image: linear-gradient(to right, #000 82%, transparent);
	}

	/* Tunn stapel under rubrikraden: hur långt man har svept */
	.eb-explorer.has-overflow .eb-explorer__progress {
		display: block;
		height: 3px;
		margin: 0.25rem 0 1rem;
		overflow: hidden;
		background: var(--eb-line);
		border-radius: 999px;
	}

	.eb-explorer__progress span {
		display: block;
		height: 100%;
		background: var(--eb-teal);
		border-radius: inherit;
	}

	/* Första gången raden syns glider rubrikerna en bit åt vänster och tillbaka, och stapeln följer med */
	.eb-explorer.is-hinting .eb-explorer__tab {
		animation: eb-explorer-hint 1.4s ease-in-out 0.3s;
	}

	.eb-explorer.is-hinting .eb-explorer__progress span {
		animation: eb-explorer-hint-bar 1.4s ease-in-out 0.3s;
	}

	.eb-explorer__tab {
		flex: 0 0 auto;
		width: auto;
		padding: 0.6rem 0.9rem;
		font-size: 0.9rem;
		white-space: nowrap;
		border-color: var(--eb-line);
		border-radius: 999px;
		scroll-snap-align: start;
	}

	.eb-explorer__panels {
		position: static;
	}

	.eb-explorer__panel {
		min-height: 0;
	}
}

@keyframes eb-explorer-hint {
	0%,
	100% {
		transform: translateX(0);
	}

	45% {
		transform: translateX(-4.5rem);
	}
}

@keyframes eb-explorer-hint-bar {
	0%,
	100% {
		margin-left: 0;
	}

	45% {
		margin-left: 12%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eb-explorer.is-ready .eb-explorer__panel {
		animation: none;
	}
}
.eb-panel {
	padding: clamp(2rem, 5vw, 3.5rem);
	background:
		radial-gradient(40rem 20rem at 100% 0%, rgba(61, 214, 195, 0.1), transparent 70%),
		var(--eb-card);
	border: 1px solid var(--eb-line-strong);
	border-radius: 24px;
}

.eb-badges {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-badges li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	font-weight: 600;
	color: var(--eb-heading);
	background: rgba(15, 23, 42, 0.03);
	border: 1px solid var(--eb-line-strong);
	border-radius: 12px;
}

.eb-badges .eb-icon {
	color: var(--eb-teal);
}

.eb-checklist {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 1.05rem;
	color: var(--eb-text);
}

.eb-checklist .eb-icon {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.3rem;
	margin-top: 0.05rem;
	color: var(--eb-bg);
	background: var(--eb-teal);
	border-radius: 50%;
	stroke-width: 3;
}

.eb-checklist--compact {
	gap: 0.65rem;
	margin-top: 1.75rem;
}

.eb-checklist--compact li {
	font-size: 0.975rem;
}

.eb-cta--left {
	text-align: left;
}

.eb-cta--left .eb-cta__title {
	margin: 0;
}

.eb-cta--left .eb-actions {
	justify-content: flex-start;
}

.eb-customers--partners {
	border-bottom: 0;
}

/* Samarbetspartners får sina egna färger när man pekar på dem. */
.eb-customers--partners .eb-customers__list img {
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.eb-customers--partners .eb-customers__list a:hover img,
.eb-customers--partners .eb-customers__list a:focus-visible img {
	filter: none;
}

/* Team --------------------------------------------------------------------- */
.eb-team {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--eb-line);
}

.eb-person {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--eb-line);
}

.eb-person__avatar {
	display: inline-grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	font-family: var(--eb-font-mono);
	font-size: 0.9rem;
	color: var(--eb-heading);
	background:
		linear-gradient(var(--eb-card-2), var(--eb-card-2)) padding-box,
		var(--eb-grad) border-box;
	border: 1px solid transparent;
	border-radius: 50%;
}

.eb-person__name {
	margin: 0 0 0.15rem;
	font-size: 1.15rem;
}

.eb-person__role {
	margin: 0;
	color: var(--eb-muted);
	font-size: 0.95rem;
}

.eb-person__contact {
	display: grid;
	gap: 0.3rem;
	justify-items: end;
	font-size: 0.925rem;
}

.eb-person__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--eb-text);
	text-decoration: none;
}

.eb-person__contact a:hover {
	color: var(--eb-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-person__contact .eb-icon {
	width: 0.95rem;
	height: 0.95rem;
	color: var(--eb-dim);
}

@media (max-width: 767.98px) {
	.eb-person {
		grid-template-columns: auto 1fr;
	}

	.eb-person__contact {
		grid-column: 1 / -1;
		justify-items: start;
	}
}

/* Besök / kontakt ---------------------------------------------------------- */
.eb-visit {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-visit li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--eb-card);
	border: 1px solid var(--eb-line);
	border-radius: 14px;
}

.eb-visit small {
	display: block;
	font-family: var(--eb-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eb-dim);
}

.eb-visit__icon {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	color: var(--eb-blue);
	background: rgba(79, 140, 255, 0.1);
	border-radius: 10px;
}

.eb-visit a {
	color: var(--eb-heading);
}

/* Footer ------------------------------------------------------------------- */
.eb-footer {
	padding: 4.5rem 0 2rem;
	color: var(--eb-muted);
	background: var(--eb-bg-2);
	border-top: 1px solid var(--eb-line);
	font-size: 0.95rem;
}

.eb-footer a {
	color: var(--eb-text);
	text-decoration: none;
}

.eb-footer a:hover,
.eb-footer a:focus-visible {
	color: var(--eb-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eb-footer__about {
	max-width: 22rem;
	margin: 1.25rem 0 0;
}

.eb-footer__heading {
	margin-bottom: 1rem;
	font-family: var(--eb-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eb-dim);
}

.eb-footer__links,
.eb-footer__contact {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.eb-footer__contact .eb-icon {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.2rem;
	color: var(--eb-teal);
}

.eb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--eb-line);
	font-size: 0.85rem;
}

.eb-footer__bottom p {
	margin: 0;
}

.eb-footer__top {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.eb-footer__top .eb-icon {
	width: 1rem;
	height: 1rem;
}

/* Rörelse ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

/* Startsidan: processfokus ------------------------------------------------ */
.eb-section__title--sm {
	font-size: clamp(1.6rem, 2.6vw, 2.125rem);
}

/* Nivåkurva: trappformad linje som stiger mot nivå 4, med texten under varje punkt */
.eb-climb__chart {
	position: relative;
	height: 15rem;
	margin-bottom: 2rem;
	/* Diskreta stödlinjer i bakgrunden */
	background-image: repeating-linear-gradient(to bottom, var(--eb-line) 0 1px, transparent 1px 25%);
	border-bottom: 1px solid var(--eb-line-strong);
}

.eb-climb__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.eb-climb__area {
	fill: url(#eb-climb-fill);
}

.eb-climb__line {
	fill: none;
	stroke: url(#eb-climb-stroke);
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.eb-climb__node {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	font-weight: 600;
	color: var(--eb-blue);
	background: #fff;
	border: 2px solid var(--eb-blue);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.eb-climb__node.is-top {
	width: 3.25rem;
	height: 3.25rem;
	color: #fff;
	background: var(--eb-grad);
	border: 0;
}

.eb-climb__levels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-climb__num {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eb-blue);
}

.eb-climb__title {
	margin-bottom: 0.5rem;
	font-size: 1.35rem;
}

.eb-climb__text {
	margin: 0;
	font-size: 0.975rem;
	color: var(--eb-muted);
}

/* Uppritning när sektionen syns (klassen is-ready sätts bara när skriptet körs) */
/* Kurvan avslöjas från vänster till höger */
.eb-climb.is-ready .eb-climb__svg {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.eb-climb.is-ready .eb-climb__node,
.eb-climb.is-ready .eb-climb__level {
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(0.2s + var(--i) * 0.35s);
}

.eb-climb.is-ready .eb-climb__node {
	transform: translate(-50%, -50%) scale(0.6);
}

.eb-climb.is-visible .eb-climb__svg {
	clip-path: inset(0 0 0 0);
}

.eb-climb.is-visible .eb-climb__node,
.eb-climb.is-visible .eb-climb__level {
	opacity: 1;
}

.eb-climb.is-visible .eb-climb__node {
	transform: translate(-50%, -50%) scale(1);
}

/* Välj nivå: vald nivå markeras, lägre nivåer fylls i, högre blir mål */
.eb-climb__node,
.eb-climb__level {
	cursor: pointer;
}

.eb-climb.is-settled .eb-climb__node,
.eb-climb.is-settled .eb-climb__level {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, width 0.25s ease, height 0.25s ease;
	transition-delay: 0s;
}

.eb-climb__node.is-past {
	color: #fff;
	background: var(--eb-blue);
}

.eb-climb__node.is-current {
	width: 3.25rem;
	height: 3.25rem;
	color: #fff;
	background: var(--eb-heading);
	border-color: var(--eb-heading);
}

/* "Ni är här"-etiketten ovanför vald punkt */
.eb-climb__here {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 50%;
	padding: 0.3rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	background: var(--eb-heading);
	border-radius: 999px;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.eb-climb__here::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	border: 5px solid transparent;
	border-top-color: var(--eb-heading);
	transform: translateX(-50%);
}

.eb-climb__node.is-current .eb-climb__here {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (min-width: 992px) {
	.eb-climb__level {
		margin: -1rem;
		padding: 1rem;
		border-radius: 14px;
	}

	.eb-climb__level:hover,
	.eb-climb__level:focus-visible {
		background: var(--eb-card-2);
	}

	.eb-climb__level.is-current {
		background: color-mix(in srgb, var(--eb-blue) 7%, #fff);
	}
}

.eb-climb__level.is-current .eb-climb__title {
	color: var(--eb-blue);
}

/* Vägen vidare: text som ändras efter vald nivå, följd av processtegen */
.eb-route {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

.eb-route__title {
	margin-bottom: 0.5rem;
	font-size: clamp(1.6rem, 2.6vw, 2.125rem);
}

.eb-route__lead {
	min-height: 1.7em;
	margin-bottom: 2.25rem;
	font-size: 1.125rem;
	color: var(--eb-muted);
}

.eb-route__lead strong {
	color: var(--eb-blue);
	font-weight: 600;
}

.eb-step {
	transition: transform 0.2s ease;
}

.eb-step__num {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.eb-step:hover {
	transform: translateY(-3px);
}

.eb-step:hover .eb-step__num {
	color: #fff;
	background: var(--eb-blue);
	border-color: var(--eb-blue);
}

/* Mobil: lodrät linje med punkterna under varandra */
@media (max-width: 991.98px) {
	.eb-climb__chart {
		display: none;
	}

	.eb-climb__level.is-past::before {
		background: var(--eb-blue);
	}

	.eb-climb__level.is-current::before {
		background: var(--eb-heading);
		border-color: var(--eb-heading);
	}

	.eb-climb__levels {
		position: relative;
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	/* Linjebit från varje punkt ner till nästa, så linjen slutar vid sista punkten */
	.eb-climb__level:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.5rem;
		bottom: -1.85rem;
		left: calc(0.75rem - 1.5px);
		width: 3px;
		background: color-mix(in srgb, #2458e6 calc(100% - var(--i) * 30%), #0fa899);
	}

	.eb-climb__level {
		position: relative;
		padding-left: 2.75rem;
	}

	.eb-climb__level::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.1rem;
		width: 1.5rem;
		height: 1.5rem;
		background: #fff;
		border: 2px solid var(--eb-blue);
		border-radius: 50%;
	}

	.eb-climb__level.is-top::before {
		background: var(--eb-grad);
		border: 0;
	}
}

/* Processteg: numrerade steg på en linje */
.eb-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-steps::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	right: 1.25rem;
	height: 1px;
	background: var(--eb-line-strong);
}

.eb-step {
	position: relative;
}

.eb-step__num {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1.25rem;
	font-weight: 600;
	color: var(--eb-heading);
	background: var(--eb-card);
	border: 1px solid var(--eb-line-strong);
	border-radius: 50%;
}

.eb-step:last-child .eb-step__num {
	color: #fff;
	background: var(--eb-heading);
	border-color: var(--eb-heading);
}

.eb-step__title {
	margin-bottom: 0.5rem;
	font-size: 1.15rem;
}

.eb-step__text {
	margin: 0;
	font-size: 0.975rem;
	color: var(--eb-muted);
}

@media (max-width: 991.98px) {
	.eb-steps {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.eb-steps::before {
		top: 1.25rem;
		bottom: 1.25rem;
		left: 1.25rem;
		right: auto;
		width: 1px;
		height: auto;
	}

	.eb-step {
		padding-left: 3.75rem;
	}

	.eb-step__num {
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
	}
}

/* Produkterna: kort med namn, en mening och en länk. */
.eb-tools {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Varje produkt har en egen färg, samma som i nodgrafen (main.js): ljus platt yta, tonad kant
   och stark ton på namnet och länken. Himmelsblå och indigo är mörkare i texten för läsbarhetens skull. */
.eb-tool {
	--tool-c: var(--eb-blue);
	--tool-bg: #eef3fe;
	--tool-line: #c9d7fa;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	background: var(--tool-bg);
	border: 1px solid var(--tool-line);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eb-tool--systemlistan {
	--tool-c: var(--eb-teal);
	--tool-bg: #e8f5f3;
	--tool-line: #b9e0da;
}

.eb-tool--fotasakert-saker-bildhantering {
	--tool-c: #0369a1;
	--tool-bg: #e9f6fd;
	--tool-line: #bfe5f8;
}

.eb-tool--tor-inventeringssystem {
	--tool-c: #4f46e5;
	--tool-bg: #efefff;
	--tool-line: #cfd0fb;
}

/* .is-linked: systemet hovras i nodgrafen (main.js). */
.eb-tool:hover,
.eb-tool:focus-visible,
.eb-tool.is-linked {
	border-color: var(--tool-c);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.eb-tool__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}

.eb-tool__name {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--tool-c);
}

.eb-tool__text {
	margin: 0.4rem 0 1.25rem;
	color: var(--eb-text);
}

.eb-tool__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	font-weight: 600;
	color: var(--tool-c);
}

.eb-tool__more .eb-icon {
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s ease;
}

.eb-tool:hover .eb-tool__more .eb-icon {
	transform: translateX(3px);
}

@media (max-width: 767.98px) {
	.eb-tools {
		grid-template-columns: 1fr;
	}
}


/* Så arbetar vi: text till vänster, nodgrafen (canvas, ritas i main.js) till höger. */
.eb-graph {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.eb-graph__canvas {
	position: relative;
	aspect-ratio: 1 / 1;
	max-height: 38rem;
}

.eb-graph__canvas canvas {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 991.98px) {
	.eb-graph {
		grid-template-columns: 1fr;
	}

	.eb-graph__canvas {
		max-width: 32rem;
		margin: 0 auto;
		width: 100%;
	}
}

/* Grunden: isometrisk stack (template-parts/iso-stack.php) till vänster, lagren beskrivna till höger.
   Varje lager har en egen ton: data (turkos), struktur (grå), verktyg (blå). */
.eb-stack {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.eb-stack__svg {
	display: block;
	width: 100%;
	max-width: 34rem;
	height: auto;
	margin: 0 auto;
	overflow: visible;
}

.eb-stack__layer--data { --eb-layer: var(--eb-teal); }
.eb-stack__layer--struktur { --eb-layer: #64748b; }
.eb-stack__layer--verktyg { --eb-layer: var(--eb-blue); }

.eb-stack__top {
	fill: color-mix(in srgb, var(--eb-layer) 7%, #fff);
	stroke: color-mix(in srgb, var(--eb-layer) 35%, #fff);
	stroke-width: 1;
}

.eb-stack__side-l {
	fill: color-mix(in srgb, var(--eb-layer) 22%, #fff);
}

.eb-stack__side-r {
	fill: color-mix(in srgb, var(--eb-layer) 38%, #fff);
}

.eb-stack__shadow {
	fill: color-mix(in srgb, var(--eb-layer) 25%, transparent);
}

.eb-stack__card {
	fill: #fff;
	stroke: color-mix(in srgb, var(--eb-layer) 35%, #fff);
	stroke-width: 1;
}

.eb-stack__icon {
	color: var(--eb-layer);
}

/* Verktygen överst: fyllda brickor */
.eb-stack__layer--verktyg .eb-stack__card {
	fill: var(--eb-blue);
	stroke: var(--eb-blue);
}

.eb-stack__layer--verktyg .eb-stack__icon {
	color: #fff;
}

/* Rören: data som strömmar in i det nedersta lagret */
.eb-stack__pipe {
	stroke: color-mix(in srgb, var(--eb-teal) 22%, #fff);
	stroke-width: 7;
	stroke-linecap: round;
}

.eb-stack__flow {
	stroke: var(--eb-teal);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 5 13;
	animation: eb-stack-flow 1.2s linear infinite;
}

@keyframes eb-stack-flow {
	to { stroke-dashoffset: -18; }
}

/* Listan med lagren */
.eb-stack__list {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.eb-stack__item {
	position: relative;
	padding: 1rem 0 1rem 1.5rem;
	border-top: 1px solid var(--eb-line);
}

.eb-stack__item::before {
	content: "";
	position: absolute;
	top: 1.35rem;
	left: 0;
	width: 0.65rem;
	height: 0.65rem;
	background: var(--eb-layer);
	border-radius: 3px;
}

.eb-stack__item--data { --eb-layer: var(--eb-teal); }
.eb-stack__item--struktur { --eb-layer: #64748b; }
.eb-stack__item--verktyg { --eb-layer: var(--eb-blue); }

.eb-stack__name {
	margin-bottom: 0.25rem;
	font-size: 1.05rem;
}

.eb-stack__desc {
	margin: 0;
	color: var(--eb-muted);
}

/* Uppbyggnaden: lagren landar nerifrån och upp, och texten följer med */
.eb-stack__layer,
.eb-stack__item {
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eb-stack.is-ready:not(.is-visible) .eb-stack__layer {
	opacity: 0;
	transform: translateY(-50px);
}

.eb-stack.is-ready:not(.is-visible) .eb-stack__item {
	opacity: 0;
	transform: translateX(-8px);
}

.eb-stack.is-ready:not(.is-visible) .eb-stack__pipes {
	opacity: 0;
}

.eb-stack__pipes {
	transition: opacity 0.6s ease;
}

.eb-stack__layer--struktur,
.eb-stack__item--struktur { transition-delay: 0.5s; }

.eb-stack__layer--verktyg,
.eb-stack__item--verktyg { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
	.eb-stack__flow {
		animation: none;
	}

	.eb-stack__layer,
	.eb-stack__item {
		transition: none;
	}
}

@media (max-width: 991.98px) {
	.eb-stack {
		grid-template-columns: 1fr;
	}

	.eb-stack__visual {
		order: 2;
	}
}


/* Stackens brickor: lyfts vid hover/fokus och visar en etikett (.eb-stack__tip, placeras i main.js) */
.eb-stack__visual {
	position: relative;
}

.eb-stack__tile {
	cursor: default;
	outline: none;
}

a.eb-stack__tile {
	cursor: pointer;
}

.eb-stack__lift {
	transition: transform 0.2s ease;
}

.eb-stack__tile:hover .eb-stack__lift,
.eb-stack__tile:focus-visible .eb-stack__lift {
	transform: translateY(-5px);
}

.eb-stack__tile:hover .eb-stack__card,
.eb-stack__tile:focus-visible .eb-stack__card {
	stroke: var(--eb-layer);
	stroke-width: 1.5;
}

.eb-stack__tip {
	position: absolute;
	z-index: 2;
	padding: 0.35rem 0.7rem;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	background: var(--eb-heading);
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
	transform: translate(-50%, calc(-100% - 8px));
	pointer-events: none;
}

#fore-efter {
	overflow-x: clip;
}

/* Före/efter: switchen växlar data-state på .eb-ba. Före är grått, snett och rörigt,
   efter är prydligt och i varumärkesfärger. Varje ruta har båda lägena ovanpå varandra. */
.eb-ba__head {
	margin-inline: auto;
	text-align: center;
}

.eb-ba__switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

/* Uppmaning under switchen - försvinner när besökaren har klickat */
.eb-ba__hint {
	margin: 0.75rem 0 4.5rem;
	font-size: 0.85rem;
	text-align: center;
	color: var(--eb-muted);
	transition: opacity 0.3s ease;
}

.eb-ba.is-touched .eb-ba__hint {
	opacity: 0;
}

/* Knoppen knuffar till två gånger när sektionen syns */
.eb-ba.is-hinting:not(.is-touched) .eb-ba__knob {
	animation: eb-ba-nudge 1.4s ease-in-out 0.4s 2;
}

@keyframes eb-ba-nudge {
	0%, 60%, 100% { transform: none; }
	30% { transform: translateX(0.6rem); }
}

.eb-ba__label {
	font-weight: 600;
	cursor: pointer;
	color: var(--eb-dim);
	transition: color 0.3s ease;
}

.eb-ba[data-state="before"] .eb-ba__label--before,
.eb-ba[data-state="after"] .eb-ba__label--after {
	color: var(--eb-heading);
}

.eb-ba__toggle {
	position: relative;
	flex-shrink: 0;
	width: 4.5rem;
	height: 2.5rem;
	padding: 0;
	background: #cbd2dc;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.35s ease;
}

.eb-ba__toggle:focus-visible {
	outline: 2px solid var(--eb-blue);
	outline-offset: 3px;
}

.eb-ba__knob {
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	width: 2rem;
	height: 2rem;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
	transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.eb-ba[data-state="after"] .eb-ba__toggle {
	background: var(--eb-blue);
}

.eb-ba[data-state="after"] .eb-ba__knob {
	transform: translateX(2rem);
}

/* Rutnätet */
.eb-ba__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-ba__tile {
	position: relative;
	display: grid;
	min-height: 11rem;
	background: #fff;
	border: 1px solid var(--eb-line-strong);
	border-radius: 12px;
	transition: transform 0.8s cubic-bezier(0.34, 1.45, 0.64, 1), border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.eb-ba__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	padding: 1.35rem;
	transition: opacity 0.35s ease, visibility 0.35s;
}

.eb-ba__icon {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 0.9rem;
	border-radius: 8px;
}

.eb-ba__icon .eb-icon {
	width: 1.15rem;
	height: 1.15rem;
}

.eb-ba__title {
	margin-bottom: 0.3rem;
	font-size: 1.05rem;
}

.eb-ba__text {
	margin: 0;
	font-size: 0.92rem;
	color: var(--eb-muted);
}

/* Före: grått, streckat och huller om buller */
.eb-ba[data-state="before"] .eb-ba__tile {
	background: var(--eb-bg-2);
	border-style: dashed;
}

.eb-ba[data-state="before"] .eb-ba__tile:nth-child(1) { transform: rotate(-7deg) translate(30px, 40px) scale(0.92); }
.eb-ba[data-state="before"] .eb-ba__tile:nth-child(2) { transform: rotate(5deg) translate(-20px, -30px) scale(1.04); z-index: 1; }
.eb-ba[data-state="before"] .eb-ba__tile:nth-child(3) { transform: rotate(9deg) translate(-50px, 50px) scale(0.9); }
.eb-ba[data-state="before"] .eb-ba__tile:nth-child(4) { transform: rotate(6deg) translate(60px, -20px) scale(0.95); z-index: 1; }
.eb-ba[data-state="before"] .eb-ba__tile:nth-child(5) { transform: rotate(-10deg) translate(10px, 30px) scale(1.02); }
.eb-ba[data-state="before"] .eb-ba__tile:nth-child(6) { transform: rotate(-4deg) translate(-60px, -40px) scale(0.88); }

/* Före: innehållet vickar oroligt, i olika takt i varje ruta */
.eb-ba[data-state="before"] .eb-ba__face--before {
	animation: eb-ba-wobble 3.2s ease-in-out infinite alternate;
}

.eb-ba[data-state="before"] .eb-ba__tile:nth-child(2n) .eb-ba__face--before { animation-duration: 2.6s; animation-direction: alternate-reverse; }
.eb-ba[data-state="before"] .eb-ba__tile:nth-child(3n) .eb-ba__face--before { animation-duration: 3.8s; }

@keyframes eb-ba-wobble {
	from { transform: rotate(-1.2deg) translateY(-2px); }
	to { transform: rotate(1.2deg) translateY(2px); }
}

.eb-ba__face--before .eb-ba__icon {
	color: var(--eb-muted);
	background: #e5e8ee;
}

.eb-ba__face--before .eb-ba__title {
	color: var(--eb-text);
}

/* Varningen i före-läget får en egen ton */
.eb-ba__tile:nth-child(2) .eb-ba__face--before .eb-ba__icon {
	color: var(--eb-amber);
	background: color-mix(in srgb, var(--eb-amber) 12%, #fff);
}

/* Efter: prydligt, raka rader och varumärkesfärger */
.eb-ba[data-state="after"] .eb-ba__tile {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.eb-ba__tile:nth-child(2) { transition-delay: 0.07s; }
.eb-ba__tile:nth-child(3) { transition-delay: 0.14s; }
.eb-ba__tile:nth-child(4) { transition-delay: 0.21s; }
.eb-ba__tile:nth-child(5) { transition-delay: 0.28s; }
.eb-ba__tile:nth-child(6) { transition-delay: 0.35s; }

/* Efter: en bock poppar upp i hörnet på varje ruta */
.eb-ba__done {
	position: absolute;
	top: -0.7rem;
	right: -0.7rem;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	color: #fff;
	background: var(--eb-teal);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.eb-ba__done .eb-icon {
	width: 0.95rem;
	height: 0.95rem;
}

.eb-ba[data-state="after"] .eb-ba__done {
	transform: scale(1);
	transition-delay: 0.7s;
}

.eb-ba[data-state="after"] .eb-ba__tile:nth-child(2) .eb-ba__done { transition-delay: 0.78s; }
.eb-ba[data-state="after"] .eb-ba__tile:nth-child(3) .eb-ba__done { transition-delay: 0.86s; }
.eb-ba[data-state="after"] .eb-ba__tile:nth-child(4) .eb-ba__done { transition-delay: 0.94s; }
.eb-ba[data-state="after"] .eb-ba__tile:nth-child(5) .eb-ba__done { transition-delay: 1.02s; }
.eb-ba[data-state="after"] .eb-ba__tile:nth-child(6) .eb-ba__done { transition-delay: 1.1s; }

/* Röran: lappar, filer, mejl och varningar ovanpå rutnätet. Flyger iväg vid efter. */
.eb-ba__stage {
	position: relative;
	max-width: 60rem;
	margin: 0 auto;
}

.eb-ba__clutter {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.eb-ba__bit {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--eb-text);
	background: #fff;
	border: 1px solid var(--eb-line-strong);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
	transform: translate(-50%, -50%) rotate(var(--r));
	transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.5s ease;
	transition-delay: calc(0.3s + var(--i) * 0.05s);
}

.eb-ba__bit .eb-icon {
	width: 0.95rem;
	height: 0.95rem;
}

.eb-ba__bit--note {
	padding: 0.7rem 0.85rem;
	font-style: italic;
	background: #fde68a;
	border-color: #f5d565;
	border-radius: 2px;
}

.eb-ba__bit--alert {
	color: #b42318;
	background: #fee4e2;
	border-color: #fecdca;
}

.eb-ba__bit--mail .eb-icon {
	color: var(--eb-muted);
}

.eb-ba__xls {
	display: grid;
	place-items: center;
	width: 1.1rem;
	height: 1.1rem;
	font-size: 0.65rem;
	font-weight: 700;
	font-style: normal;
	color: #fff;
	background: #107c41;
	border-radius: 3px;
}

.eb-ba[data-state="after"] .eb-ba__bit {
	opacity: 0;
	transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) rotate(calc(var(--r) * 4)) scale(0.6);
	transition: transform 0.6s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.45s ease;
	transition-delay: calc(var(--i) * 0.04s);
}

.eb-ba__face--after .eb-ba__icon {
	color: #fff;
	background: var(--eb-blue);
}

.eb-ba__tile:nth-child(2) .eb-ba__face--after .eb-ba__icon,
.eb-ba__tile:nth-child(3) .eb-ba__face--after .eb-ba__icon {
	background: var(--eb-teal);
}

.eb-ba__bar {
	display: block;
	height: 6px;
	margin-top: auto;
	background: var(--eb-bg-2);
	border-radius: 999px;
	overflow: hidden;
}

.eb-ba__bar span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--eb-blue);
	border-radius: inherit;
	transform-origin: left;
	transition: transform 0.8s ease 0.3s;
}

.eb-ba[data-state="before"] .eb-ba__bar span {
	transform: scaleX(0);
}

.eb-ba__checks {
	display: grid;
	gap: 0.3rem;
	margin-top: 0.75rem;
}

.eb-ba__checks span {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.eb-ba__checks .eb-icon {
	width: 0.9rem;
	height: 0.9rem;
	color: var(--eb-teal);
}

.eb-ba__checks i {
	display: block;
	width: 55%;
	height: 0.4rem;
	background: var(--eb-bg-2);
	border-radius: 4px;
}

.eb-ba__checks span:nth-child(2) i { width: 42%; }
.eb-ba__checks span:nth-child(3) i { width: 48%; }

/* Bara aktuellt läge syns */
.eb-ba[data-state="before"] .eb-ba__face--after,
.eb-ba[data-state="after"] .eb-ba__face--before {
	opacity: 0;
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.eb-ba__tile,
	.eb-ba__face,
	.eb-ba__knob,
	.eb-ba__bar span {
		transition: none;
	}

	.eb-ba.is-hinting .eb-ba__knob,
	.eb-ba[data-state="before"] .eb-ba__face--before {
		animation: none;
	}

	.eb-ba__bit,
	.eb-ba__done {
		transition: none;
	}
}

@media (max-width: 767.98px) {
	.eb-ba__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eb-ba__switch {
		gap: 0.6rem;
		font-size: 0.9rem;
	}
}

@media (max-width: 479.98px) {
	.eb-ba__grid {
		grid-template-columns: 1fr;
	}

	.eb-ba[data-state="before"] .eb-ba__tile:nth-child(odd) {
		transform: rotate(-4deg) translateX(10px);
	}

	.eb-ba[data-state="before"] .eb-ba__tile:nth-child(even) {
		transform: rotate(3deg) translateX(-10px);
	}

	.eb-ba__bit:nth-child(n+6) {
		display: none;
	}
}

/* Stacken: hover på ett lager (grafik) eller en rad (lista) markerar samma lager i
   båda delarna. main.js sätter data-active; is-built tar bort uppbyggnadens fördröjningar. */
.eb-stack__pipes,
.eb-stack__item {
	transition-property: opacity, transform, background-color;
}

.eb-stack__tile {
	transition: opacity 0.25s ease;
}

.eb-stack.is-built .eb-stack__layer,
.eb-stack.is-built .eb-stack__item,
.eb-stack.is-built .eb-stack__pipes {
	transition-delay: 0s;
}

.eb-stack__item {
	margin-inline: -0.75rem;
	padding-right: 0.75rem;
	padding-left: 2.25rem;
	border-radius: 8px;
	cursor: default;
}

.eb-stack__item::before {
	left: 0.75rem;
}

/* Grafiken: plattformarna behåller sina färger, bara objekten på de andra släcks */
.eb-stack[data-active] .eb-stack__tile,
.eb-stack[data-active] .eb-stack__pipes {
	opacity: 0.2;
}

/* Listan: övriga rader tonas ned */
.eb-stack[data-active] .eb-stack__item {
	opacity: 0.35;
}

.eb-stack[data-active="data"] [data-layer="data"],
.eb-stack[data-active="data"] [data-layer="data"] .eb-stack__tile,
.eb-stack[data-active="struktur"] [data-layer="struktur"],
.eb-stack[data-active="struktur"] [data-layer="struktur"] .eb-stack__tile,
.eb-stack[data-active="verktyg"] [data-layer="verktyg"],
.eb-stack[data-active="verktyg"] [data-layer="verktyg"] .eb-stack__tile {
	opacity: 1;
}

.eb-stack[data-active="data"] .eb-stack__item[data-layer="data"],
.eb-stack[data-active="struktur"] .eb-stack__item[data-layer="struktur"],
.eb-stack[data-active="verktyg"] .eb-stack__item[data-layer="verktyg"] {
	background: color-mix(in srgb, var(--eb-layer) 8%, #fff);
	border-top-color: transparent;
}

/* Mörk ram: header, översta sektionen och footer -------------------------------------------- */
/* Samma mörka botten som startsidans hero på alla sidor. Headern är genomskinlig ovanpå en mörk hero
   på dator och blir mörk när man scrollar; på mobil, och på sidor utan mörk hero, är den alltid mörk.
   Länkar, logga och hamburgare är ljusa. */
.eb-header,
.eb-header.is-scrolled {
	background: #0b1220;
	border-bottom-color: rgba(255, 255, 255, 0.08);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.eb-header .eb-logo__mark,
.eb-footer .eb-logo__mark {
	color: #0b1220;
	background: #fff;
}

.eb-header .nav-link {
	color: rgba(255, 255, 255, 0.78);
}

.eb-header .nav-link:hover,
.eb-header .nav-link:focus-visible,
.eb-header .nav-link.show,
.eb-header .nav-link.active {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 992px) {
	.eb-v2 .eb-header:not(.is-scrolled),
	body:has(.eb-hero) .eb-header:not(.is-scrolled) {
		background: transparent;
		border-bottom-color: transparent;
	}
}

@media (max-width: 991.98px) {
	.eb-header .eb-burger {
		border-color: rgba(255, 255, 255, 0.3);
	}

	.eb-header .eb-burger span {
		background: #fff;
	}

	.eb-header .nav-link,
	.eb-header .dropdown-item {
		color: rgba(255, 255, 255, 0.85);
	}
}

/* Översta sektionen på undersidorna (eb-hero): mörk botten, ljus text. Glöden ligger kvar; i stället för
   bikakemönstret går kretsbanorna i bakgrunden, som på startsidan. Rubrikens färgade ord är vitt som
   resten av rubriken. */
.eb-hero {
	isolation: isolate;
	color: #b4bfcf;
	background: #0b1220;
}

.eb-hero::after {
	display: none;
}

/* Kretsbanorna (circuit.js, ebite_circuit()): ligger under allt innehåll i toppsektionen och tar inte
   emot klick. Toppsektionen isoleras, så att canvasen hamnar bakom innehållet men framför bakgrunden. */
.eb-circuit {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.eb-hero__title {
	color: #fff;
}

.eb-hero__lead {
	color: #b4bfcf;
}

.eb-hero__kicker {
	color: #5eead4;
}

.eb-hero .eb-gradient-text {
	background: none;
	color: #fff;
}

.eb-hero .btn-light {
	box-shadow: none;
}

/* Sektionen direkt under den mörka hero ska inte ligga kant i kant med den. */
.eb-hero + .eb-section--tight-top {
	padding-top: clamp(3rem, 6vw, 5rem);
}

.eb-hero .btn-ghost {
	--bs-btn-color: #fff;
	--bs-btn-bg: rgba(255, 255, 255, 0.06);
	--bs-btn-border-color: rgba(255, 255, 255, 0.28);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
	--bs-btn-hover-border-color: rgba(255, 255, 255, 0.6);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: rgba(255, 255, 255, 0.16);
	--bs-btn-active-border-color: #fff;
}

.eb-footer {
	color: #b4bfcf;
	background: #0b1220;
	border-top-color: #0b1220;
}

/* Ytan under sidan har footerns färg, så att en kort sida inte får en vit rand under footern. */
html {
	background: #0b1220;
}

.eb-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.eb-footer a:hover,
.eb-footer a:focus-visible {
	color: #fff;
}

.eb-footer__heading {
	color: #8b95a5;
}

.eb-footer__contact .eb-icon {
	color: #5eead4;
}

.eb-footer__bottom {
	border-top-color: rgba(255, 255, 255, 0.1);
}

/* Systemlistan: vad den löser. Kort med frågan man ställer i dag överst, svaret under en streckad linje. */
.eb-solves {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-solves__item {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--eb-line-strong);
	border-radius: 14px;
}

.eb-solves__question {
	/* Plats för två rader, så att linjerna hamnar i jämnhöjd i hela raden. */
	min-height: calc(2.8em + 1.25rem);
	margin: 0 0 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px dashed var(--eb-line-strong);
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--eb-dim);
}

.eb-solves__question::before,
.eb-solves__question::after {
	content: "”";
}

.eb-solves__title {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
	font-size: 1.1rem;
	line-height: 1.3;
}

.eb-solves__title .eb-icon {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.1rem;
	color: var(--eb-teal);
}

/* "Frågorna ni slutar ställa" (eb-solves--hover): frågan i mörkare text så att den är lätt att läsa,
   och kortet lyfter lätt vid hovring med en kant och skugga i turkos. */
.eb-solves--hover .eb-solves__question {
	color: #475569;
}

.eb-solves--hover .eb-solves__item {
	cursor: pointer;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.eb-solves--hover .eb-solves__item:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--eb-teal) 45%, #fff);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.eb-solves--hover .eb-solves__title .eb-icon {
	transition: transform 0.25s ease;
}

.eb-solves--hover .eb-solves__item:hover .eb-solves__title .eb-icon {
	transform: scale(1.2);
}

.eb-solves__text {
	margin: 0;
	font-size: 0.95rem;
	color: var(--eb-muted);
}

@media (max-width: 1199.98px) {
	.eb-solves {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.eb-solves {
		grid-template-columns: minmax(0, 1fr);
	}

	.eb-solves__question {
		min-height: 0;
	}
}

/* Vanliga frågor: en fråga per rad som fälls ut. Bygger på <details>, så det fungerar utan skript. */
.eb-faq {
	border-top: 1px solid var(--eb-line-strong);
}

.eb-faq__item {
	border-bottom: 1px solid var(--eb-line-strong);
}

.eb-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--eb-heading);
	cursor: pointer;
	list-style: none;
}

.eb-faq__question::-webkit-details-marker {
	display: none;
}

/* Plustecken som blir ett minus när frågan är öppen. */
.eb-faq__question::after {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	color: var(--eb-teal);
}

.eb-faq__item[open] .eb-faq__question::after {
	background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

.eb-faq__question:hover {
	color: var(--eb-teal);
}

.eb-faq__answer {
	max-width: 44rem;
	padding-bottom: 1.25rem;
	color: var(--eb-muted);
}

.eb-faq__answer p:last-child {
	margin-bottom: 0;
}

/* Om oss: resan från spritt till förvaltat. Fyra steg i rad med en tunn linje genom bilderna; på
   smala skärmar under varandra med linjen till vänster. När sektionen syns (main.js, is-visible)
   dras linjen från vänster och stegen tonar fram ett i taget. Utan skript syns allt direkt. */
.eb-journey {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-journey::before {
	content: "";
	position: absolute;
	top: 4.5rem;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--eb-line-strong) 8%, var(--eb-line-strong) 92%, transparent);
	transform-origin: left;
	transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.eb-journey__step {
	position: relative;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(0.25s + var(--i) * 0.3s);
}

.eb-journey__visual {
	position: relative;
	display: block;
	width: 100%;
	max-width: 12rem;
	height: 9rem;
	margin-bottom: 1.25rem;
	background: var(--eb-bg);
}

.eb-journey__visual polygon {
	stroke: var(--eb-bg);
	stroke-width: 1;
	stroke-linejoin: round;
}

.eb-journey__top {
	fill: color-mix(in srgb, var(--c) 30%, #fff);
}

.eb-journey__left {
	fill: color-mix(in srgb, var(--c) 78%, #fff);
}

.eb-journey__right {
	fill: var(--c);
}

.eb-journey__name {
	margin-bottom: 0.5rem;
	font-family: var(--eb-font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eb-teal);
}

.eb-journey__name span {
	color: var(--eb-dim);
}

.eb-journey__title {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

.eb-journey__text {
	margin: 0;
	font-size: 0.95rem;
	color: var(--eb-muted);
}

/* Dolt från första bildrutan när skript finns (html.eb-js, header.php) och rörelse är tillåten; main.js
   sätter is-visible när resan syns. Utan skript eller med reducerad rörelse syns allt direkt. */
@media (prefers-reduced-motion: no-preference) {
	.eb-js .eb-journey:not(.is-visible)::before {
		transform: scaleX(0);
	}

	.eb-js .eb-journey:not(.is-visible) .eb-journey__step {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (max-width: 991.98px) {
	.eb-journey {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.eb-journey::before {
		top: 0;
		bottom: 0;
		left: 5.5rem;
		right: auto;
		width: 1px;
		height: auto;
		background: var(--eb-line-strong);
		transform-origin: top;
	}

	.eb-js .eb-journey:not(.is-visible)::before {
		transform: scaleY(0);
	}

	.eb-journey__step {
		display: grid;
		grid-template-columns: 11rem minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;
	}

	.eb-journey__visual {
		grid-row: span 3;
		width: 11rem;
		height: 8.25rem;
		margin: 0;
	}
}

@media (max-width: 575.98px) {
	.eb-journey::before {
		left: 3.5rem;
	}

	.eb-journey__step {
		grid-template-columns: 7rem minmax(0, 1fr);
	}

	.eb-journey__visual {
		width: 7rem;
		height: 5.25rem;
	}
}

/* Om oss: hur vi arbetar, som ett kort manifest på mörk botten (samma som hero). Stora påståenden
   med nummer i monospace. */
.eb-manifest {
	padding: clamp(4.5rem, 9vw, 8rem) 0;
	color: #b4bfcf;
	background: #0b1220;
}

.eb-manifest .eb-eyebrow {
	margin-bottom: 2.5rem;
	color: #5eead4;
}

.eb-manifest__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-manifest__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 2rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.eb-manifest__item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.eb-manifest__number {
	padding-top: 0.6rem;
	font-family: var(--eb-font-mono);
	font-size: 0.9rem;
	color: #5eead4;
}

.eb-manifest__statement {
	margin-bottom: 0.5rem;
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	color: #fff;
}

.eb-manifest__text {
	max-width: 40rem;
	margin: 0;
	font-size: 1.05rem;
	color: #8b95a5;
}

@media (max-width: 575.98px) {
	.eb-manifest__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}

	.eb-manifest__number {
		padding-top: 0;
	}
}

/* Om oss: ledningen. Porträtten är små och runda, så att de inte tar över sidan. */
.eb-leaders {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* Kolumnerna blir lika höga, så att mejladresserna hamnar på samma rad hur långa titlarna än är. */
.eb-leaders__person {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 13rem;
}

.eb-leaders__photo {
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 0 auto 1rem;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--eb-line-strong);
}

.eb-leaders__name {
	margin-bottom: 0.25rem;
	font-size: 1.1rem;
}

.eb-leaders__role {
	margin: 0;
	font-size: 0.95rem;
	color: var(--eb-muted);
}

/* Mejladressen i samma stil som rubriketiketterna ("// TEAMET"). */
.eb-leaders__email {
	margin-top: auto;
	padding-top: 0.75rem;
	font-family: var(--eb-font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--eb-teal);
	text-decoration: none;
}

.eb-leaders__email:hover,
.eb-leaders__email:focus-visible {
	color: var(--eb-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Några rader om var vi kommer ifrån, centrerade under porträtten med ett kort streck ovanför. */
.eb-leaders__story {
	max-width: 40rem;
	margin: 3rem auto 0;
	padding-top: 2rem;
	text-align: center;
	color: var(--eb-muted);
	background: linear-gradient(var(--eb-line-strong), var(--eb-line-strong)) top center / 3rem 1px no-repeat;
}

.eb-leaders__story p {
	margin-bottom: 0.75rem;
}

.eb-leaders__story p:last-child {
	margin-bottom: 0;
}

/* Kontakt: företagets kontaktuppgifter bredvid formuläret. */
.eb-contact__title {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.eb-contact {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-contact li {
	display: flex;
	gap: 0.85rem;
	line-height: 1.5;
}

.eb-contact .eb-icon {
	margin-top: 1.55rem;
	color: var(--eb-teal);
}

.eb-contact__label {
	display: block;
	margin-bottom: 0.15rem;
	font-family: var(--eb-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eb-dim);
}

.eb-contact a {
	color: var(--eb-heading);
	font-weight: 600;
	text-decoration: none;
}

.eb-contact a:hover {
	text-decoration: underline;
}

/* Formuläret (Contact Form 7) i ett kort: två fält per rad på större skärmar. */
.eb-form-card {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: #fff;
	border: 1px solid var(--eb-line-strong);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.eb-form-card__title {
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
}

.eb-form-card .ebite-demo-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
}

.eb-form-card .ebite-demo-form > p {
	margin-bottom: 1.1rem;
}

.eb-form-card .ebite-demo-form > p:nth-last-of-type(-n + 2),
.eb-form-card .ebite-demo-form > .wpcf7-turnstile {
	grid-column: 1 / -1;
}

.eb-form-card .ebite-demo-form br {
	display: none;
}

.eb-form-card label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--eb-heading);
}

.eb-form-card .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--eb-heading);
	background: #fff;
	border: 1px solid var(--eb-line-strong);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eb-form-card .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: 0;
	border-color: var(--eb-blue);
	box-shadow: 0 0 0 3px rgba(36, 88, 230, 0.15);
}

.eb-form-card textarea.wpcf7-form-control {
	height: 8rem;
	resize: vertical;
}

.eb-form-card .wpcf7-submit {
	padding: 0.8rem 1.6rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--eb-blue);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.eb-form-card .wpcf7-submit:hover {
	background: #1d4bd0;
}

.eb-form-card .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	font-size: 0.85rem;
	color: #dc2626;
}

.eb-form-card .wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: 0.75rem 1rem !important;
	border-radius: 10px;
	font-size: 0.95rem;
}

@media (max-width: 575.98px) {
	.eb-form-card .ebite-demo-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Boka demo: hur det går till, tre numrerade steg bredvid formuläret. */
.eb-demo-steps {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-demo-steps li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: 0.5rem;
	color: var(--eb-muted);
	line-height: 1.55;
}

.eb-demo-steps strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--eb-heading);
}

.eb-demo-steps__number {
	padding-top: 0.15rem;
	font-family: var(--eb-font-mono);
	font-size: 0.85rem;
	color: var(--eb-teal);
}

.eb-demo-steps__note {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--eb-line-strong);
	font-size: 0.95rem;
	color: var(--eb-muted);
}

.eb-demo-steps__note a {
	color: var(--eb-heading);
	font-weight: 600;
}

/* Kuben i liten skala (ebite_product_cube()): tända delar i produktens tre toner, övriga ljusgrå. */
.eb-cube {
	display: inline-block;
	flex: none;
	width: 2.75rem;
	height: 3.15rem;
}

.eb-cube svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.eb-cube polygon {
	stroke: #fff;
	stroke-width: 5;
	stroke-linejoin: round;
	transition: fill 0.5s ease;
}

.eb-cube__top { fill: #e9edf2; }
.eb-cube__left { fill: #dae0e8; }
.eb-cube__right { fill: #cbd3dd; }

.eb-cube__part.is-on .eb-cube__top { fill: color-mix(in srgb, var(--c) 30%, #fff); }
.eb-cube__part.is-on .eb-cube__left { fill: color-mix(in srgb, var(--c) 78%, #fff); }
.eb-cube__part.is-on .eb-cube__right { fill: var(--c); }

/* Lösningar: listan med problem. Luftig lista med hårfina linjer, två spalter på större skärmar. */
.eb-problems {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 5vw, 4rem);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--eb-line-strong);
}

.eb-problems li {
	border-bottom: 1px solid var(--eb-line-strong);
}

.eb-problems__item {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 1.5rem 0.25rem;
	color: var(--eb-heading);
	text-decoration: none;
}

.eb-problems__number {
	font-family: var(--eb-font-mono);
	font-size: 0.8rem;
	color: var(--eb-teal);
}

.eb-problems__question {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color 0.15s ease;
}

.eb-problems__arrow {
	color: var(--eb-dim);
	transition: transform 0.2s ease, color 0.2s ease;
}

.eb-problems__item:hover .eb-problems__question,
.eb-problems__item:focus-visible .eb-problems__question {
	color: var(--eb-blue);
}

.eb-problems__item:hover .eb-problems__arrow,
.eb-problems__item:focus-visible .eb-problems__arrow {
	color: var(--eb-blue);
	transform: translateX(4px);
}

/* Det valda problemet: blå text och pilen pekar ned mot svaret. */
.eb-problems__item.is-current .eb-problems__question,
.eb-problems__item.is-current .eb-problems__arrow {
	color: var(--eb-blue);
}

.eb-problems__item.is-current .eb-problems__arrow {
	transform: rotate(90deg);
}

.eb-problems__more {
	margin: 2.5rem 0 0;
	text-align: center;
	color: var(--eb-muted);
}

.eb-problems__more a {
	color: var(--eb-heading);
	font-weight: 600;
}

@media (max-width: 767.98px) {
	.eb-problems {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Svaren: en mörk sektion under listan (samma botten som toppsektionerna). Den syns när ett problem är
   valt (is-active: problemets egen adress, eller ett klick i listan). Med skript (is-ready, main.js)
   ligger svaren ovanpå varandra i samma yta så att inget under hoppar när man byter; stegen tonar fram
   ett i taget och resultatet visas sist (is-done). */
.eb-answers {
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	color: #b4bfcf;
	background: #0b1220;
	/* Samma tunna linje som i footern, så att svaret och footern inte flyter ihop. */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	/* Sidan har redan scroll-padding-top (5.5rem) för headern; svaret ska landa precis under headern (73px). */
	scroll-margin-top: calc(73px - 5.5rem);
}

.eb-answers:not(.is-active) {
	display: none;
}

.eb-answers__stack {
	display: grid;
}

.eb-answers.is-ready .eb-film {
	grid-row: 1;
	grid-column: 1;
}

.eb-answers.is-ready .eb-film:not(.is-current) {
	visibility: hidden;
}

.eb-film {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.eb-film__top {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.eb-film__number {
	margin-right: auto;
	font-family: var(--eb-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5eead4;
}

.eb-film__question {
	max-width: 52rem;
	margin: 1.25rem 0 clamp(2.5rem, 5vw, 3.5rem);
	font-size: clamp(1.9rem, 4vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

/* Stegen i rad, med en tunn linje genom kuberna som dras fram steg för steg. */
.eb-film__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-film__steps::before {
	content: "";
	position: absolute;
	top: 2.6rem;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
	transform-origin: left;
	transition: transform 0.8s ease;
}

.eb-film__step {
	position: relative;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.eb-film__cube {
	display: block;
	width: 4.5rem;
	height: 5.2rem;
	margin-bottom: 1.25rem;
	background: #0b1220;
	box-shadow: 0 0 0 0.75rem #0b1220;
}

/* Kuben på mörk botten: springorna i bakgrundens färg och de släckta delarna svagt ljusa. */
.eb-film .eb-cube polygon {
	stroke: #0b1220;
}

.eb-film .eb-cube__top { fill: rgba(255, 255, 255, 0.14); }
.eb-film .eb-cube__left { fill: rgba(255, 255, 255, 0.09); }
.eb-film .eb-cube__right { fill: rgba(255, 255, 255, 0.06); }

.eb-film .eb-cube__part.is-on .eb-cube__top { fill: color-mix(in srgb, var(--c) 30%, #fff); }
.eb-film .eb-cube__part.is-on .eb-cube__left { fill: color-mix(in srgb, var(--c) 78%, #fff); }
.eb-film .eb-cube__part.is-on .eb-cube__right { fill: var(--c); }

.eb-film__product {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-family: var(--eb-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--c) 60%, #fff);
	text-decoration: none;
}

.eb-film__product:hover {
	text-decoration: underline;
}

.eb-film__title {
	margin-bottom: 0.4rem;
	font-size: 1.2rem;
	color: #fff;
}

.eb-film__text {
	margin: 0;
	font-size: 0.95rem;
	color: #8b95a5;
}

/* Resultatet: hela kuben med de använda delarna tända, en mening om resultatet och knappen. */
.eb-film__result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	margin-top: auto;
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.eb-film__result .eb-film__cube {
	margin: 0;
	box-shadow: none;
}

.eb-film__result-text {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #fff;
}

.eb-film__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-left: auto;
}

.eb-film .btn-light {
	box-shadow: none;
}

/* Filmens lägen (is-film): steg som inte har visats är dolda, linjen dras fram till det senast visade
   steget (--shown) och resultatet kommer när filmen är klar (is-done). */
.eb-film.is-film .eb-film__step:not(.is-shown) {
	opacity: 0;
	transform: translateY(16px);
}

.eb-film.is-film .eb-film__steps::before {
	transform: scaleX(var(--shown, 0));
}

.eb-film.is-film .eb-film__step.is-shown .eb-cube__part.is-on {
	animation: eb-film-lift 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes eb-film-lift {
	0% { transform: translateY(-60px); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

.eb-film.is-film:not(.is-done) .eb-film__result {
	visibility: hidden;
	opacity: 0;
	transform: translateY(12px);
}

@media (max-width: 767.98px) {
	.eb-film__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.eb-film__steps::before {
		display: none;
	}

	.eb-film__step {
		display: grid;
		grid-template-columns: 3.5rem minmax(0, 1fr);
		column-gap: 1.25rem;
	}

	.eb-film__step .eb-film__cube {
		grid-row: span 3;
		width: 3.5rem;
		height: 4rem;
		margin: 0;
		box-shadow: none;
	}

	.eb-film__actions {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eb-film.is-film .eb-film__step.is-shown .eb-cube__part.is-on {
		animation: none;
	}
}

/* 404 ---------------------------------------------------------------------- */
.eb-404__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eb-404__links a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--eb-line-strong);
	border-radius: var(--eb-radius-sm);
	color: var(--eb-text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eb-404__links a:hover,
.eb-404__links a:focus-visible {
	border-color: var(--eb-blue);
	color: var(--eb-blue);
}

.eb-404__links .eb-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* Integritetspolicy -------------------------------------------------------- */
.eb-legal {
	max-width: 46rem;
	margin: 0 auto;
}

.eb-legal h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.25rem;
}

.eb-legal h2:first-child {
	margin-top: 0;
}

.eb-legal__updated {
	margin-top: 2.5rem;
	font-size: 0.9rem;
	color: var(--eb-muted);
}

.eb-form-card__privacy {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	color: var(--eb-muted);
}