/* ============================================================
   Vestjysk Varmepumper — delt designsystem
   ------------------------------------------------------------
   Farver, typografi, navigation og footer stod tidligere som
   inline CSS i hver enkelt sides indhold — de samme regler
   gentaget syv gange, uden mulighed for caching.

   Samlet her, så en rettelse slår igennem overalt.
   ============================================================ */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0d1b2a;
  --navy-light: #132236;
  --navy-card: #1a2e45;
  --blue: #1a73e8;
  --blue-dark: #1557b0;
  --green: #22c55e;
  --green-dark: #16a34a;
  --red: #ef4444;
  --white: #ffffff;
  --gray-100: #f8fafc;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-600: #64748b;
  --text-light: rgba(255,255,255,0.72);
  --font: 'DM Sans', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.25);
  --max-w: 1200px;
}

html { scroll-behavior: smooth; }
/* Kun skrifttype og linjehøjde er fælles.
   Baggrund og tekstfarve sættes af den enkelte side, så
   navigationen kan genbruges på både mørke og lyse sider. */
body {
	font-family: var(--font);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Mørk baggrund tilvælges eksplicit. */
.vv-dark {
	background: var(--navy);
	color: var(--white);
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }


/* ─── NAV ─── */
.nav{position:sticky;top:0;z-index:100;background:rgba(13,27,42,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.07);padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:64px;}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:#fff;letter-spacing:-0.02em;text-decoration:none;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,0.72);text-decoration:none;transition:color 0.2s;}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:#fff;font-weight:600;}
.btn-nav{background:#1a73e8;color:#fff!important;padding:10px 20px;border-radius:8px;font-weight:700!important;font-size:14px!important;transition:background 0.2s!important;white-space:nowrap;text-decoration:none;}
.btn-nav:hover{background:#1557b0!important;}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px;}
.nav-burger span{display:block;width:24px;height:2px;background:#fff;transition:0.2s;}
.nav-mobile-cta{display:none;}
@media(max-width:768px){
  .nav{padding:0 20px;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-mobile-cta{display:flex;align-items:center;background:#1a73e8;color:#fff!important;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;}
  .nav-mobile-open .nav-links{display:flex!important;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:rgba(13,27,42,0.98);padding:16px 20px;gap:4px;align-items:stretch;border-bottom:1px solid rgba(255,255,255,0.1);z-index:99;}
  .nav-mobile-open .nav-links a{padding:12px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,0.06);}
}

/* ─── FOOTER ─── */
.footer {
  background: var(--navy-light);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 48px 40px 32px;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 8px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--white); }
.footer-col p { font-size: 14px; color: var(--text-light); line-height: 1.7; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-size: 13px; color: var(--gray-400); }
.footer-logo { font-size: 15px; font-weight: 700; }


/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-form-card { display: none; }
  .hero-mobile-form { display: block !important; }
  .process-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nav-burger { display: flex; }
  .nav-links { display: none; }
  .nav-mobile-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: var(--white) !important; padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 640px) {
  .nav { padding: 0 20px; }
  .section { padding: 48px 20px; }
  .section-full { padding: 48px 20px; }
  .trust-bar { padding: 16px 20px; gap: 20px; }
  .usp-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cta-section { padding: 48px 20px; }
  .footer { padding: 40px 20px 24px; }
}


/* ============================================================
   404 — siden findes ikke
   ============================================================ */

.vv-404 {
	background: var(--navy);
	color: var(--white);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.vv-404__main {
	flex: 1;
	max-width: 760px;
	width: 100%;
	margin: 0 auto;
	padding: 80px 24px 100px;
	text-align: center;
}

.vv-404__code {
	font-size: clamp(72px, 14vw, 140px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	/* Tallet er dekoration — overskriften nedenunder bærer beskeden. */
	color: rgba(26, 115, 232, 0.28);
	margin-bottom: 8px;
}

.vv-404__title {
	font-size: clamp(28px, 5vw, 44px);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin-bottom: 14px;
}

.vv-404__lead {
	font-size: 17px;
	color: var(--text-light);
	line-height: 1.7;
	max-width: 46ch;
	margin: 0 auto 36px;
}

.vv-404__search {
	display: flex;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto 52px;
}

.vv-404__search input {
	flex: 1;
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: var(--navy-card);
	color: var(--white);
	font-family: var(--font);
	font-size: 15px;
}

.vv-404__search input::placeholder {
	color: var(--gray-400);
}

.vv-404__search input:focus {
	outline: none;
	border-color: var(--blue);
}

.vv-404__search button {
	padding: 14px 26px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--blue);
	color: var(--white);
	font-family: var(--font);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.2s;
}

.vv-404__search button:hover {
	background: var(--blue-dark);
}

.vv-404__block {
	margin-bottom: 40px;
}

.vv-404__block h2 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gray-400);
	margin-bottom: 16px;
}

.vv-404__links,
.vv-404__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	list-style: none;
	padding: 0;
}

.vv-404__links a,
.vv-404__suggestions a {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: var(--navy-card);
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	transition: border-color 0.2s, background 0.2s;
}

.vv-404__links a:hover,
.vv-404__suggestions a:hover {
	border-color: var(--blue);
	background: var(--navy-light);
}

.vv-404__cta {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vv-404__cta p {
	color: var(--text-light);
	margin-bottom: 18px;
}

.vv-404__phone {
	display: inline-block;
	padding: 15px 30px;
	border-radius: var(--radius-sm);
	background: var(--blue);
	color: var(--white);
	font-weight: 700;
	font-size: 16px;
	margin-right: 10px;
	transition: background 0.2s;
}

.vv-404__phone:hover {
	background: var(--blue-dark);
}

.vv-404__ghost {
	display: inline-block;
	padding: 15px 30px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--white);
	font-weight: 600;
	font-size: 16px;
}

.vv-404__ghost:hover {
	background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 560px) {
	.vv-404__main { padding: 56px 18px 72px; }
	.vv-404__search { flex-direction: column; }
	.vv-404__phone,
	.vv-404__ghost { display: block; margin: 0 0 10px; }
}


/* Footeren fik en femte spalte med vejledningssiderne.
   Auto-fit lader spalterne finde deres egen bredde, så den
   ikke skal rettes igen næste gang der kommer en til. */
.footer-top {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* ============================================================
   Produktkort
   ------------------------------------------------------------
   Kortene arvede sidernes gamle CSS og stod hvide på mørk
   baggrund — de brød med resten af designet.

   Nu har de deres egen klasse og styles ét sted, så de ser
   ens ud på forsiden, områdesiderne og alle andre steder de
   måtte blive brugt.
   ============================================================ */

:is(.vv-kort, .product-card) {
	position: relative;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 16px !important;
	padding: 14px 14px 18px !important;
	overflow: hidden;
	/* Kun transform og opacity animeres — de kører på grafikkortet. */
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.vv-kort, .product-card):hover {
	transform: translateY(-3px);
	border-color: rgba(26, 115, 232, 0.55) !important;
}

/* --- Billedet ---------------------------------------------
   Produktfotos har hver sin baggrund — hvid, creme, sort.
   En lys, neutral flade får dem til at stå ensartet i stedet
   for at fremhæve forskellen. */

:is(.vv-kort, .product-card) .product-img-wrap {
	background: #f2f5f9 !important;
	border-radius: 12px !important;
	padding: 18px !important;
	margin-bottom: 16px !important;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

:is(.vv-kort, .product-card) .product-img-wrap img {
	max-width: 100%;
	max-height: 130px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* --- Tekst ------------------------------------------------- */

:is(.vv-kort, .product-card) .product-brand {
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0.09em !important;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45) !important;
	margin-bottom: 5px !important;
}

:is(.vv-kort, .product-card) .product-name {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3;
	color: #fff !important;
	margin-bottom: 12px !important;
	/* Skubber prisen ned i bunden, så kortene flugter uanset
	   hvor langt produktnavnet er. */
	flex: 1;
}

:is(.vv-kort, .product-card) .product-price {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #fff !important;
	letter-spacing: -0.02em;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

:is(.vv-kort, .product-card) .product-price .old {
	display: inline-block;
	margin-left: 8px;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.4) !important;
	text-decoration: line-through;
}

:is(.vv-kort, .product-card) .product-price-sub,
:is(.vv-kort, .product-card) .product-save {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 3px;
}

:is(.vv-kort, .product-card) .product-save {
	color: #4ade80;
	font-weight: 600;
}

/* --- Knappen ----------------------------------------------- */

:is(.vv-kort, .product-card) .product-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin-top: 14px;
	padding: 10px 16px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
	touch-action: manipulation;
}

:is(.vv-kort, .product-card) .product-link:hover {
	background: #1a73e8;
	border-color: #1a73e8;
}

:is(.vv-kort, .product-card) .product-link:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

/* --- Rabatmærkat ------------------------------------------- */

:is(.vv-kort, .product-card) .discount-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: #e84c1a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 9999px;
	letter-spacing: 0.02em;
}

/* --- Gitteret ---------------------------------------------- */

.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
}

@media (max-width: 900px) {
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.products-grid {
		grid-template-columns: 1fr;
	}

	:is(.vv-kort, .product-card) .product-img-wrap {
		min-height: 170px;
	}
}

/* ============================================================
   Kort med ekstra indhold (mærkesiderne)
   ------------------------------------------------------------
   Daikin-siden bruger samme kort, men med beskrivelse,
   specifikationer og mærkater ovenpå. De arvede tidligere
   sidens egen CSS; nu hører de med til kortet, så de tre
   modeller ser ud præcis som kortene alle andre steder.
   ============================================================ */

.product-card .product-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Navnet fylder ikke resten her — det gør prisen, som skubbes
   ned, så pris, specs og knap flugter på tværs af kortene. */
.product-card .product-name {
	flex: 0 0 auto;
	margin-bottom: 8px !important;
}

.product-card .product-desc {
	font-size: 13px !important;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55) !important;
	margin-bottom: 14px !important;
}

.product-card .product-price {
	margin-top: auto;
}

/* --- Specifikationer --------------------------------------- */

.product-card .product-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.product-card .spec-tag {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 9999px !important;
	padding: 4px 10px !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	white-space: nowrap;
}

/* --- Knappen ----------------------------------------------- */

.product-card .btn-product {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 14px;
	padding: 10px 16px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
	touch-action: manipulation;
}

.product-card .btn-product:hover {
	background: #1a73e8 !important;
	border-color: #1a73e8;
}

.product-card .btn-product:focus-visible {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

/* --- Mærkater ----------------------------------------------
   Uden position lagde de sig som fuldbredde-bjælker øverst og
   nederst på siden. De hører til inde i kortet. */

.product-card .featured-label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: #1a73e8;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	padding: 5px 8px;
}

/* Mærkatet ligger over kortets øverste kant — indholdet skal
   forbi den. */
.product-card.featured {
	padding-top: 36px !important;
	border-color: rgba(26, 115, 232, 0.45) !important;
}

.product-card .product-img-wrap {
	position: relative;
}

.product-card .cashback-badge,
.product-card .energy-badge {
	position: absolute;
	/* Sidens egen CSS spænder mærkaterne ud over alle fire kanter,
	   så de dækkede hele billedet. inset nulstiller dem, før vi
	   sætter det ene hjørne, hver mærkat skal sidde i. */
	inset: auto !important;
	width: auto !important;
	height: auto !important;
	z-index: 2;
	font-size: 11px !important;
	font-weight: 700;
	padding: 4px 9px !important;
	border-radius: 9999px !important;
	line-height: 1.4;
	white-space: nowrap;
}

.product-card .cashback-badge {
	left: 8px !important;
	bottom: 8px !important;
	background: #0f6b32 !important;
	color: #fff !important;
}

.product-card .energy-badge {
	right: 8px !important;
	top: 8px !important;
	background: #1a1a1a !important;
	color: #fff !important;
}

@media (max-width: 520px) {
	.product-card .product-specs {
		margin-top: 10px;
	}
}

/* Kortrækken på mærkesiderne — samme kort som forsiden, så de
   tre mærker præsenteres på linje med Daikin i stedet for kun
   som tekst og tabel. */
.vv-maerke-kort {
	margin: 28px 0 40px;
}

/* ------------------------------------------------------------
   Lys kortvariant
   Mærkesiderne har hvid baggrund, hvor det mørke kort stod med
   hvid tekst på hvidt. Samme form og mål som det mørke kort —
   kun fladerne er vendt om.
   ------------------------------------------------------------ */

.vv-maerke-kort .product-card {
	background: var(--white) !important;
	border: 1px solid var(--gray-200) !important;
	box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04);
}

.vv-maerke-kort .product-card:hover {
	border-color: var(--blue) !important;
	box-shadow: 0 6px 20px rgba(13, 27, 42, 0.08);
}

.vv-maerke-kort .product-img-wrap {
	background: var(--gray-100) !important;
}

.vv-maerke-kort .product-brand {
	color: var(--gray-600) !important;
}

.vv-maerke-kort .product-name,
.vv-maerke-kort .product-price {
	color: var(--navy) !important;
}

.vv-maerke-kort .product-price .old,
.vv-maerke-kort .product-price-sub {
	color: var(--gray-600) !important;
}

.vv-maerke-kort .product-save {
	color: var(--green-dark) !important;
}

.vv-maerke-kort .product-link {
	border-color: var(--gray-200);
	color: var(--navy) !important;
}

.vv-maerke-kort .product-link:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white) !important;
}

/* Fire modeller på én række. Tekstspalten er smallere end
   forsidens fulde bredde, så auto-fit lagde det fjerde kort
   alene på anden række. */
.vv-maerke-kort {
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

@media (max-width: 820px) {
	.vv-maerke-kort { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
	.vv-maerke-kort { grid-template-columns: 1fr; }
}