/* ===== CSS VARIABLES ===== */
:root {
  --blue: #19A8FF;
  --blue-dark: #1177b8;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --text: #111111;
  --text-soft: #5a5a5a;
  --border: #dddddd;
  --max-width: 1100px;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET & BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
.highlight { color: var(--blue); font-weight: 600; }

/* ===== SCROLL ANCHOR OFFSETS ===== */
#top, #why, #services, #roofers { scroll-margin-top: 100px; }

#contact { scroll-margin-top: 300px; }
#top { scroll-margin-top: 180px; }

/* ===== TOPBAR ===== */
.topbar { background: transparent; color: var(--text); font-size: 0.9rem; position: relative; z-index: 10; background-image: linear-gradient(135deg, rgba(42,54,72,0.45), rgba(42,54,72,0.45)), url('Hero-4.0.jpg'); background-size: cover; background-position: center; background-attachment: fixed; }
body.takbyte-page .topbar { background-image: linear-gradient(135deg, rgba(42,54,72,0.45), rgba(42,54,72,0.45)), url('hejdar.jpg'); }
body.takpannor-page .topbar { background: url('tak2.jpg') fixed center/cover no-repeat; }
body.takpannor-page .topbar-contact-item { background: transparent; border: 1px solid rgba(25,168,255,0.2); }
body.fasad-page .topbar { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('fasad1.jpg'); }
body.platslageri-page { background: linear-gradient(135deg, rgba(30,40,55,0.3), rgba(30,40,55,0.3)), url('Plat1.jpg') center/cover no-repeat fixed; }
body.platslageri-page .topbar { background: transparent; }
body.terms-body { background: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat11.jpg') center/cover no-repeat fixed; }
body.privacy-body { background: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat11.jpg') center/cover no-repeat fixed; }
body.terms-body .topbar,
body.privacy-body .topbar { background: transparent; }
body.plattaket-page .topbar { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat4.jpg'); background-attachment: fixed; }
body.plattaket-page header { background-attachment: fixed; }
body.plattaket-page .hero-plattaket { background-attachment: fixed; }
body.plattaket-page .topbar { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat4.jpg'); }
.topbar-inner { max-width: var(--max-width); margin: 0 auto; padding: 0.4rem 1.5rem; display: flex; justify-content: flex-end; gap: 1.2rem; }
.topbar-contact-item { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.75); text-decoration: none; transition: all 0.3s; padding: 0.35rem 0.7rem; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(25,168,255,0.1); backdrop-filter: blur(8px); }
.topbar-contact-item:hover { background: rgba(25,168,255,0.12); border-color: rgba(25,168,255,0.3); color: rgba(255,255,255,0.95); }
.topbar-contact-item svg { width: 16px; height: 16px; stroke: rgba(25,168,255,0.8); flex-shrink: 0; transition: all 0.3s; }
.topbar-contact-item:hover svg { stroke: var(--blue); }
.topbar-contact-item > div { display: flex; flex-direction: column; gap: 0; }
.topbar-label { font-size: 0.6rem; color: rgba(255,255,255,0.55); text-transform: uppercase; font-weight: 700; letter-spacing: 0.02em; }
.topbar-value { font-size: 0.75rem; color: rgba(255,255,255,0.85); font-weight: 600; letter-spacing: -0.2px; }

/* ===== COOKIE CONSENT – FEROTECT PREMIUM ===== */
.fc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.fc-overlay.fc-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Banner – bottom bar */
.fc-banner {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: bottom 0.6s cubic-bezier(0.34,1.56,0.64,1);
  font-family: 'Inter', sans-serif;
}
.fc-banner.fc-visible {
  bottom: 0;
}

.fc-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  background: rgba(8,12,22,0.88);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-top: 1px solid rgba(25,168,255,0.15);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.3);
}

/* Cookie icon animated */
.fc-icon-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #19A8FF 0%, #0066aa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(25,168,255,0.3);
  animation: fcPulseGlow 3s ease-in-out infinite;
}

@keyframes fcPulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(25,168,255,0.3); }
  50% { box-shadow: 0 4px 30px rgba(25,168,255,0.5), 0 0 60px rgba(25,168,255,0.15); }
}

.fc-icon-wrap svg {
  width: 26px;
  height: 26px;
  color: white;
}

/* Text */
.fc-text {
  flex: 1;
  min-width: 0;
}
.fc-text h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.2px;
}
.fc-text p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: 1.5;
}
.fc-text a {
  color: #19A8FF;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.fc-text a:hover {
  color: #00d9ff;
}

/* Buttons group */
.fc-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.fc-btn {
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
  border: none;
  letter-spacing: 0.01em;
  font-family: 'Inter', sans-serif;
}

.fc-btn-accept {
  background: linear-gradient(135deg, #19A8FF, #0077dd);
  color: #fff;
  box-shadow: 0 4px 16px rgba(25,168,255,0.35);
}
.fc-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(25,168,255,0.45);
}
.fc-btn-accept:active { transform: translateY(0); }

.fc-btn-settings {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.12);
}
.fc-btn-settings:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(25,168,255,0.3);
  color: #fff;
  transform: translateY(-2px);
}

.fc-btn-reject {
  background: transparent;
  color: rgba(255,255,255,0.5);
  padding: 0.7rem 1rem;
}
.fc-btn-reject:hover {
  color: rgba(255,255,255,0.85);
}

/* ===== SETTINGS PANEL ===== */
.fc-panel {
  position: fixed;
  top: 0;
  right: -520px;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  z-index: 10000;
  background: rgba(10,14,26,0.95);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border-left: 1px solid rgba(25,168,255,0.12);
  box-shadow: -20px 0 80px rgba(0,0,0,0.5);
  transition: right 0.5s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
}
.fc-panel.fc-visible {
  right: 0;
}

/* Panel header */
.fc-panel-header {
  padding: 1.8rem 2rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fc-panel-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.fc-panel-header h2 svg {
  color: #19A8FF;
}
.fc-panel-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.fc-panel-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(25,168,255,0.3);
}

/* Panel body */
.fc-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}
.fc-panel-body::-webkit-scrollbar { width: 5px; }
.fc-panel-body::-webkit-scrollbar-track { background: transparent; }
.fc-panel-body::-webkit-scrollbar-thumb { background: rgba(25,168,255,0.2); border-radius: 10px; }

.fc-panel-intro {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 0 0 1.5rem 0;
}

/* Category cards */
.fc-category {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 0.8rem;
  transition: all 0.3s;
}
.fc-category:hover {
  border-color: rgba(25,168,255,0.15);
  background: rgba(25,168,255,0.03);
}
.fc-category-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.fc-category-info {
  flex: 1;
  min-width: 0;
}
.fc-category-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fc-category-name svg {
  flex-shrink: 0;
  color: #19A8FF;
  width: 16px;
  height: 16px;
}
.fc-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  background: rgba(25,168,255,0.12);
  color: #19A8FF;
}
.fc-badge-required {
  background: rgba(25,168,255,0.15);
  color: #19A8FF;
}
.fc-category-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  margin: 0;
}

/* Toggle switch */
.fc-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.fc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.fc-toggle-track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 24px;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  border: 1px solid rgba(255,255,255,0.08);
}
.fc-toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  top: 2px;
  left: 2px;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.fc-toggle input:checked + .fc-toggle-track {
  background: linear-gradient(135deg, #19A8FF, #0077dd);
  border-color: rgba(25,168,255,0.4);
}
.fc-toggle input:checked + .fc-toggle-track::after {
  transform: translateX(20px);
  background: #fff;
  box-shadow: 0 2px 8px rgba(25,168,255,0.4);
}
.fc-toggle input:disabled + .fc-toggle-track {
  opacity: 0.5;
  cursor: default;
}
.fc-toggle input:disabled:checked + .fc-toggle-track {
  opacity: 0.7;
}

/* Panel footer */
.fc-panel-footer {
  padding: 1.2rem 2rem 1.8rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 0.65rem;
}
.fc-panel-footer .fc-btn {
  flex: 1;
  text-align: center;
  padding: 0.8rem 1rem;
}
.fc-btn-save {
  background: linear-gradient(135deg, #19A8FF, #0077dd);
  color: #fff;
  box-shadow: 0 4px 16px rgba(25,168,255,0.3);
  border: none;
}
.fc-btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(25,168,255,0.45);
}
.fc-btn-save:active { transform: translateY(0); }
.fc-btn-deny-all {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.08);
}
.fc-btn-deny-all:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateY(-2px);
}

/* ===== SMALL REOPEN BUTTON ===== */
.fc-reopen {
  position: fixed;
  bottom: 1.2rem;
  left: 1.2rem;
  z-index: 9990;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(25,168,255,0.15);
  background: rgba(8,12,22,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.fc-reopen.fc-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.fc-reopen:hover {
  background: rgba(25,168,255,0.15);
  border-color: rgba(25,168,255,0.35);
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(25,168,255,0.2);
}
.fc-reopen svg {
  width: 20px;
  height: 20px;
  color: #19A8FF;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .fc-banner-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 1.3rem 1.2rem;
    gap: 1rem;
  }
  .fc-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: none;
  }
  .fc-text h3 { font-size: 0.95rem; }
  .fc-text p { font-size: 0.8rem; }
  .fc-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  .fc-actions .fc-btn {
    width: 100%;
    text-align: center;
  }
  .fc-panel {
    width: 100vw;
    max-width: 100vw;
    right: -110vw;
  }
  .fc-panel-header { padding: 1.4rem 1.2rem 1rem; }
  .fc-panel-body { padding: 1.2rem; }
  .fc-panel-footer { padding: 1rem 1.2rem 1.4rem; }
  .fc-category { padding: 1rem 1.1rem; }
}

/* ===== HEADER ===== */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background-color var(--transition-smooth), box-shadow var(--transition-smooth);
  background-image: linear-gradient(135deg, rgba(42,54,72,0.45), rgba(42,54,72,0.45)), url('Hero-4.0.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.takbyte-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.45), rgba(42,54,72,0.45)), url('hejdar.jpg');
}
body.takpannor-page header {
  background-image: url('tak2.jpg');
  background-attachment: fixed;
}
body.fasad-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('fasad1.jpg');
}
body.platslageri-page header {
  background: transparent;
}
body.terms-body header,
body.privacy-body header {
  background: transparent;
}
body.plattaket-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat4.jpg');
}
body:has(.solar-hero) header {
  background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('money1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body:has(.plat-hero) header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.65), rgba(42,54,72,0.65)), url('plat1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body:has(.plat-hero) .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.65), rgba(42,54,72,0.65)), url('plat1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ===== TAKBYTE PAGE PROCESS SECTION ===== */
body.takbyte-page #process .step-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
body.takbyte-page #process .step-header { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; width: 100%; }
body.takbyte-page #process .step-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
body.takbyte-page #process .step-icon svg { width: 32px; height: 32px; }
body.takbyte-page #process .step-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
body.takbyte-page #process .step-title { font-size: 1.08rem; text-align: center; }
body.takbyte-page #process .step-description { font-size: 0.8rem; text-align: center; }
body.takbyte-page #process .step-footer { text-align: center; }

header::before { content: ''; position: absolute; inset: 0; background: #ffffff; opacity: 0; transition: opacity var(--transition-smooth); pointer-events: none; z-index: -1; }
header.scrolled::before { opacity: 1; }
header.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
header.scrolled .btn-primary { opacity: 0; pointer-events: none; width: 0; padding: 0; margin: 0; overflow: hidden; }
header.scrolled .nav-links { opacity: 0; pointer-events: none; }
header .btn-primary { transition: opacity 0.3s ease, width 0.3s ease, padding 0.3s ease, margin 0.3s ease; }
header .nav-links { transition: opacity 0.3s ease; }

.nav { max-width: var(--max-width); margin: 0 auto; padding: 0.5rem 1.5rem; display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 0.8rem; position: relative; z-index: 1; }
.nav-left { display: flex; align-items: center; gap: 0; margin-left: 0.5rem; }
.nav-title { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 1rem; color: #19A8FF; margin: 0; align-self: center; margin-bottom: -0.6rem; margin-left: -0.075rem; }
.nav-left a { display: flex; align-items: center; height: 50px; overflow: hidden; padding-right: 7.5rem; }
.logo-img { height: 200px; width: auto; margin: -80px -10px -80px 0; object-fit: contain; display: block; max-width: 140px; position: relative; z-index: 60; pointer-events: none; }
.nav-links { display: none; gap: 1.2rem; }
.nav-links a { position: relative; padding-bottom: 0.2rem; color: rgba(255,255,255,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #FFF; transition: width 0.18s ease; }
.nav-links a:hover::after { width: 100%; }
.dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; background: none; border: none; font-size: inherit; font-family: inherit; color: inherit; padding: 0; position: relative; padding-bottom: 0.2rem; color: rgba(255,255,255,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.dropdown-toggle::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #FFF; transition: width 0.18s ease; }
.dropdown-toggle:hover::after { width: 100%; }
.dropdown-menu { position: absolute; top: 130%; left: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.06); min-width: 160px; padding: 0.4rem 0; display: none; z-index: 100; }
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.dropdown-menu a:hover { background: var(--bg-soft); color: var(--blue-dark); }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 1.75rem; font-size: 0.9rem; }
.nav-right > .btn-primary { padding: 0.45rem 1rem; font-size: 0.78rem; }

/* NAV CTA BUTTON — "Få offert" */
.nav-cta-btn {
  display: inline-block;
  padding: 0.55rem 1.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #19A8FF, #0088CC);
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: -0.2px;
  box-shadow: 0 4px 15px rgba(25,168,255,0.35);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  animation: ctaPulse 2.5s ease-in-out infinite;
  white-space: nowrap;
}
.nav-cta-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 25px rgba(25,168,255,0.5);
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(25,168,255,0.35); }
  50% { box-shadow: 0 4px 25px rgba(25,168,255,0.55); }
}
header.scrolled .nav-cta-btn { opacity: 0; pointer-events: none; width: 0; padding: 0; margin: 0; overflow: hidden; }
header .nav-cta-btn { transition: opacity 0.3s ease, width 0.3s ease, padding 0.3s ease, margin 0.3s ease; }

/* MOBILE MENU CTA — "Få offert" */
.mobile-menu-cta {
  display: block;
  margin: 1.2rem 1.5rem 0;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #19A8FF, #0088CC);
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(25,168,255,0.35);
  animation: ctaPulse 2.5s ease-in-out infinite;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.mobile-menu-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(25,168,255,0.5);
}

/* Calculator link in mobile menu — styled like a regular menu item */
.mobile-menu-calc {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 0.7rem;
  padding: 1rem 1.35rem !important;
  margin: 1rem 1.5rem 0 !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  background: rgba(25,168,255,0.12) !important;
  border: 2px solid rgba(25,168,255,0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(25,168,255,0.12) !important;
  animation: none !important;
  text-align: center !important;
  line-height: 1.2;
  position: relative;
  padding-left: 2.9rem !important;
  padding-right: 2.9rem !important;
  letter-spacing: -0.3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu-calc:hover {
  transform: translateY(-2px) !important;
  color: #fff !important;
  background: rgba(25,168,255,0.2) !important;
  box-shadow: 0 16px 30px rgba(25,168,255,0.2) !important;
}
.mobile-menu-calc svg {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
}
.mobile-menu-calc::after {
  content: '';
  width: 20px;
  height: 1px;
  flex-shrink: 0;
}
.mobile-menu-calc:hover svg {
  color: #fff;
}

/* Desktop: index-page topbar/header share hero bg for seamless split-screen */
.index-page .topbar {
  background-image: linear-gradient(135deg, rgba(10,20,35,0.55), rgba(10,20,35,0.4)), url('takpanneplat1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;
}
.index-page header {
  background-image: linear-gradient(135deg, rgba(10,20,35,0.55), rgba(10,20,35,0.4)), url('takpanneplat1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  z-index: 50;
}

/* ===== MAIN ===== */
main { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem 0 1.5rem; }
section { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
section.stats-section { border-bottom: none; }
.section-title { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 0.4rem; }
.section-sub { font-size: clamp(0.85rem, 1vw, 0.92rem); color: var(--text-soft); margin-bottom: 1.4rem; max-width: 34rem; }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
#why { margin-top: 8rem; margin-bottom: -1rem; border-bottom: none; }

/* ===== WHY SECTION ===== */
.why-container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: center; margin-bottom: 4rem; padding-bottom: 3rem; }
.why-content { animation: fadeInLeft 0.8s ease 0.2s forwards; opacity: 0; margin-top: -3rem; }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
.why-content h3 { font-size: 1.6rem; margin-bottom: 1.4rem; font-weight: 700; color: var(--text); }
.why-content p { font-size: 0.92rem; color: var(--text-soft); margin-bottom: 1.2rem; line-height: 1.75; }
.why-image { position: relative; border-radius: 20px; overflow: hidden; animation: fadeInRight 0.8s ease 0.2s forwards; opacity: 0; box-shadow: 0 25px 60px rgba(0,0,0,0.12); height: 500px; background: var(--bg-soft); border: 1px solid rgba(25,168,255,0.1); background-image: url('Kingen-bild-2.png'); background-size: cover; background-position: center; }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } }
.why-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0; position: absolute; top: 0; left: 0; }

/* ===== WHY INTRO SECTION ===== */
.why-intro { animation: fadeInUp 0.8s ease 0.4s forwards; opacity: 0; margin-top: 2rem; padding: 0; }
.why-intro .why-container { margin-bottom: 0; padding: 4rem 1.5rem; border-bottom: none; grid-template-columns: 1fr 1.4fr; gap: 5.5rem; align-items: center; background: linear-gradient(135deg, rgba(25,168,255,0.02), rgba(25,168,255,0.01)); border-radius: 28px; }
.why-intro .why-content { display: flex; flex-direction: column; justify-content: center; }
.why-intro .why-content h2 { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 1.8rem; color: var(--text); line-height: 1.2; }
.why-intro .why-content p { font-size: 0.98rem; line-height: 1.85; color: var(--text-soft); margin-bottom: 1.4rem; }
.why-intro .why-content p:last-child { margin-bottom: 0; }
.why-intro .why-image { height: 550px; box-shadow: 0 35px 80px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1); border-radius: 28px; border: 1px solid rgba(25,168,255,0.12); transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.6s ease; background-image: url('takyto-1.jpg') !important; opacity: 1 !important; animation: none !important; }
.why-intro .why-image:hover { transform: translateY(-6px); box-shadow: 0 40px 90px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem 5rem;
  background-image: linear-gradient(135deg, rgba(42,54,72,0.45), rgba(42,54,72,0.45)), url('Hero-4.0.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  height: auto;
  margin: -2rem calc(-50vw + 50%) -4rem;
  width: 100vw;
  z-index: 2;
  overflow: visible;
}
.hero > div { position: relative; z-index: 2; max-width: 620px; }

/* ===== INDEX HERO — Split layout ===== */
.hero-index {
  background-image: linear-gradient(135deg, rgba(10,20,35,0.55), rgba(10,20,35,0.4)), url('takpanneplat1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 1.5rem 5rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-index .frosted-box {
  margin-top: 0;
}

/* Split layout container */
.hero-index-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 3rem;
  min-height: 100vh;
}

/* Left column — headline + CTA */
.hero-index-left {
  max-width: 680px;
}
.hero-index-left .hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00d9ff;
  margin-bottom: 1.2rem;
  animation: heroTextReveal 0.7s ease-out 0.3s forwards;
  opacity: 0;
  transform: translateY(15px);
}
.hero-kicker-dot {
  width: 8px;
  height: 8px;
  background: #00d9ff;
  border-radius: 50%;
  animation: heroDotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0,217,255,0.6);
}
@keyframes heroDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
.hero-index-left h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 1.2rem;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: heroTextReveal 0.8s ease-out 0.5s forwards;
  opacity: 0;
  transform: translateY(15px);
}
.hero-accent {
  background: linear-gradient(135deg, #19A8FF, #00d9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-index-left .hero-lead {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255,255,255,0.85);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 520px;
  animation: heroTextReveal 0.8s ease-out 0.7s forwards;
  opacity: 0;
  transform: translateY(15px);
}
.hero-index-left .hero-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: heroTextReveal 0.8s ease-out 0.9s forwards;
  opacity: 0;
  transform: translateY(15px);
}

/* Particles */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(25,168,255,0.4);
  border-radius: 50%;
  animation: heroParticleFloat 8s ease-in-out infinite;
}
.hero-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
.hero-particles span:nth-child(2) { left: 25%; top: 70%; animation-delay: 1s; animation-duration: 9s; width: 3px; height: 3px; }
.hero-particles span:nth-child(3) { left: 50%; top: 30%; animation-delay: 2s; animation-duration: 6s; }
.hero-particles span:nth-child(4) { left: 75%; top: 60%; animation-delay: 0.5s; animation-duration: 10s; width: 5px; height: 5px; }
.hero-particles span:nth-child(5) { left: 85%; top: 15%; animation-delay: 3s; animation-duration: 8s; }
.hero-particles span:nth-child(6) { left: 40%; top: 80%; animation-delay: 1.5s; animation-duration: 7.5s; width: 3px; height: 3px; }
.hero-particles span:nth-child(7) { left: 60%; top: 45%; animation-delay: 4s; animation-duration: 9s; }
.hero-particles span:nth-child(8) { left: 15%; top: 55%; animation-delay: 2.5s; animation-duration: 6.5s; width: 5px; height: 5px; }
@keyframes heroParticleFloat {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(-80px) translateX(20px) scale(1.5); opacity: 0.6; }
  90% { opacity: 1; }
}

/* ===== HERO BUBBLES — Ferotect Style ===== */
.hero-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(25,168,255,0.25), rgba(25,168,255,0.05));
  border: 1px solid rgba(25,168,255,0.12);
  animation: heroBubbleFloat linear infinite;
  opacity: 0;
}
.hero-bubble:nth-child(1)  { width: 60px;  height: 60px;  left: 5%;   bottom: -60px;  animation-duration: 14s; animation-delay: 0s; }
.hero-bubble:nth-child(2)  { width: 35px;  height: 35px;  left: 15%;  bottom: -35px;  animation-duration: 11s; animation-delay: 2s; }
.hero-bubble:nth-child(3)  { width: 80px;  height: 80px;  left: 28%;  bottom: -80px;  animation-duration: 16s; animation-delay: 4s; }
.hero-bubble:nth-child(4)  { width: 25px;  height: 25px;  left: 40%;  bottom: -25px;  animation-duration: 10s; animation-delay: 1s; }
.hero-bubble:nth-child(5)  { width: 50px;  height: 50px;  left: 55%;  bottom: -50px;  animation-duration: 13s; animation-delay: 3s; }
.hero-bubble:nth-child(6)  { width: 70px;  height: 70px;  left: 65%;  bottom: -70px;  animation-duration: 15s; animation-delay: 5s; }
.hero-bubble:nth-child(7)  { width: 30px;  height: 30px;  left: 75%;  bottom: -30px;  animation-duration: 12s; animation-delay: 0.5s; }
.hero-bubble:nth-child(8)  { width: 45px;  height: 45px;  left: 85%;  bottom: -45px;  animation-duration: 14s; animation-delay: 2.5s; }
.hero-bubble:nth-child(9)  { width: 55px;  height: 55px;  left: 92%;  bottom: -55px;  animation-duration: 13s; animation-delay: 6s; }
.hero-bubble:nth-child(10) { width: 40px;  height: 40px;  left: 20%;  bottom: -40px;  animation-duration: 11s; animation-delay: 7s; }
.hero-bubble:nth-child(11) { width: 65px;  height: 65px;  left: 48%;  bottom: -65px;  animation-duration: 15s; animation-delay: 1.5s; }
.hero-bubble:nth-child(12) { width: 28px;  height: 28px;  left: 35%;  bottom: -28px;  animation-duration: 10s; animation-delay: 4.5s; }

@keyframes heroBubbleFloat {
  0%   { transform: translateY(0) scale(0.4); opacity: 0; }
  10%  { opacity: 0.6; transform: translateY(-10vh) scale(0.8); }
  50%  { opacity: 0.35; transform: translateY(-50vh) scale(1); }
  90%  { opacity: 0.15; }
  100% { transform: translateY(-110vh) scale(0.6); opacity: 0; }
}

/* ===== INDEX HERO MOBILE ENHANCEMENTS ===== */
@media (max-width: 600px) {
  .hero-index {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 1.2rem;
  }
  .hero-index .frosted-box {
    max-width: 100%;
    padding: 2rem 1.5rem;
    border-radius: 18px;
  }
  .hero-index .frosted-box h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.15;
  }
  .hero-index .frosted-box .hero-lead {
    font-size: 0.88rem;
    line-height: 1.65;
  }
  .hero-index .frosted-box .hero-cta-row {
    flex-direction: column;
    gap: 0.8rem;
    display: flex;
  }
  .hero-index .frosted-box .hero-cta-row .btn-primary,
  .hero-index .frosted-box .hero-cta-row .btn-ghost {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.8rem 1.2rem;
  }
  .hero-bubble:nth-child(n+9) { display: none; }
}

@keyframes heroTextReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== HERO SCROLL HINT ===== */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  z-index: 5;
  animation: heroScrollBounce 2s ease-in-out infinite 1.5s;
  opacity: 0;
  animation-fill-mode: both;
}
.hero-scroll-hint span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
}
.hero-scroll-hint svg {
  color: rgba(255,255,255,0.5);
}
@keyframes heroScrollBounce {
  0% { opacity: 0.7; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 0.7; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 640px) {
  .hero-scroll-hint { bottom: 1.2rem; }
}

/* Hero-index mobile responsiveness */
@media (max-width: 768px) {
  .hero-index-layout {
    padding: 0 1.5rem;
  }
  .hero-index-left {
    padding-top: 0;
  }
  .hero-index-left h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
}

.hero-takbyte { background-image: linear-gradient(135deg, rgba(42,54,72,0.45), rgba(42,54,72,0.45)), url('hejdar.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; padding: 0 1.5rem 5rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero-fasad { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('fasad1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; padding: 0 1.5rem 5rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero-platslageri { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('Plat1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; padding: 0 1.5rem 5rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
body.platslageri-page .hero-platslageri { background: transparent; padding: 0 1.5rem 5rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero-plattaket { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat4.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; padding: 0 1.5rem 5rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.papptak-page .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('papp1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.bandtackning-page .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('joy1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.papptak-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('papp1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.bandtackning-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('joy1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.takpanneplat-page .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('takpanneplat3.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.takpanneplat-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('takpanneplat3.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.korrugerad-page .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('kr1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.korrugerad-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('kr1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.takkupor-page .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('takkupa.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.takkupor-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('takkupa.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.skorsten-page .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat8.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.skorsten-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat8.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.batterilagring-page .topbar {
  background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('batteri1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.batterilagring-page header {
  background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('batteri1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.fasad-panel-page .topbar {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('fas1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.fasad-panel-page header {
  background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('fas1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.hero-papptak { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('papp1.png'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bandtackning { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('joy1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-takpanneplat { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('takpanneplat3.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-korrugerad { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('kr1.png'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-takkupor { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('takkupa.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-skorsten { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('plat8.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-batterilagring { background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('batteri1.png'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-fasad-panel { background-image: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('fas1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 0; margin-bottom: 0; padding: 0 1.5rem; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-takbyte > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-fasad > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-platslageri > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-plattaket > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-bandtackning > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-takpanneplat > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-korrugerad > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-takkupor > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-skorsten > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-batterilagring > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }
.hero-fasad-panel > div { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: var(--max-width); margin: 0 auto; }

/* ===== FASADRENOVERING PANEL — Varför välja oss ===== */
.fp-why { background: linear-gradient(180deg, #fff 0%, #f0f6ff 100%); padding: 6rem 1.5rem; position: relative; overflow: hidden; }
.fp-why::before { content: ''; position: absolute; top: -40%; right: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(25,168,255,0.06) 0%, transparent 70%); pointer-events: none; }
.fp-why-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.fp-why-header { text-align: center; margin-bottom: 3.5rem; }
.fp-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blue); background: rgba(25,168,255,0.08);
  padding: 0.4rem 1.2rem; border-radius: 100px; margin-bottom: 1rem;
  border: 1px solid rgba(25,168,255,0.15);
}
.fp-why-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: #1a1a2e; line-height: 1.2; margin-bottom: 0.75rem; letter-spacing: -0.5px; }
.fp-accent { background: linear-gradient(135deg, var(--blue) 0%, #0066aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; }
.fp-accent::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue), #0066aa); border-radius: 2px; }
.fp-why-sub { font-size: 1.05rem; color: #5a5a6a; max-width: 560px; margin: 0 auto; line-height: 1.65; }

.fp-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}

/* Card container — perspective for 3D flip */
.fp-why-card {
  position: relative; height: 280px; perspective: 800px; cursor: pointer;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fp-why-card.fp-card-visible { opacity: 1; transform: translateY(0); }

.fp-why-card-front, .fp-why-card-back {
  position: absolute; inset: 0; border-radius: 16px; padding: 2rem 1.5rem;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
}

.fp-why-card-front {
  background: #fff; border: 1px solid rgba(25,168,255,0.1);
  align-items: flex-start; justify-content: space-between;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.fp-why-card:hover .fp-why-card-front { box-shadow: 0 8px 32px rgba(25,168,255,0.15), 0 0 0 1px rgba(25,168,255,0.15); }
.fp-why-card-back {
  background: linear-gradient(135deg, #0a1e33 0%, #1a3a5c 100%); color: #fff;
  align-items: center; justify-content: center; text-align: center;
  transform: rotateY(180deg);
  box-shadow: 0 12px 40px rgba(25,168,255,0.2);
}
.fp-why-card-back p { font-size: 0.95rem; line-height: 1.7; }
.fp-why-card-back strong { color: #7dd3fc; }

.fp-why-card.fp-flipped .fp-why-card-front { transform: rotateY(-180deg); }
.fp-why-card.fp-flipped .fp-why-card-back { transform: rotateY(0deg); }

.fp-card-number {
  font-size: 2.8rem; font-weight: 800; background: linear-gradient(135deg, rgba(25,168,255,0.15), rgba(25,168,255,0.05));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; letter-spacing: -0.04em;
}
.fp-card-icon { color: var(--blue); margin-bottom: 0.25rem; }
.fp-card-icon svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 8px rgba(25,168,255,0.2)); }
.fp-card-title { font-size: 1.1rem; font-weight: 600; color: #1a1a2e; }
.fp-card-hint { font-size: 0.78rem; color: #8a8a9a; margin-top: auto; }

/* Reveal animation */
[data-fp-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-fp-reveal].fp-visible { opacity: 1; transform: translateY(0); }

.fp-why-cta { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(42,54,72,0.08); }
.fp-why-cta-text { font-size: 1.1rem; color: #5a5a6a; margin-bottom: 1.25rem; }

/* Responsive */
@media (max-width: 768px) {
  .fp-why-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .fp-why-card { height: 250px; }
  .fp-why { padding: 4rem 1.2rem; }
}
@media (max-width: 520px) {
  .fp-why-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fp-why-card { height: 230px; }
  .fp-card-number { font-size: 2.2rem; }
}

/* ===== FASADRENOVERING PANEL — Materialkollen ===== */
.mk-section {
  padding: 100px 40px 120px;
  background: #f5f7fa;
  overflow: hidden;
}
.mk-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Header --- */
.mk-header {
  text-align: center;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.mk-header.mk-visible {
  opacity: 1;
  transform: translateY(0);
}
.mk-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #2a3648;
  background: rgba(42,54,72,0.07);
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.mk-title {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #0a0a14;
  margin: 0 0 14px;
}
.mk-accent {
  color: #2a3648;
  position: relative;
}
.mk-accent::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #2a3648, #4a6a8a);
  border-radius: 2px;
}
.mk-sub {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(10,10,20,0.5);
  max-width: 540px;
  margin: 0 auto;
}

/* --- Tabs --- */
.mk-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 48px;
  background: #e9ecf0;
  border-radius: 40px;
  padding: 4px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.mk-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 36px;
  background: transparent;
  color: rgba(10,10,20,0.55);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}
.mk-tab:hover { color: #0a0a14; }
.mk-tab-active {
  background: linear-gradient(135deg, var(--blue), #0077cc);
  color: #fff;
  box-shadow: 0 4px 16px rgba(25,168,255,0.3);
}
.mk-tab-active:hover { color: #fff; }

/* --- Grid: specs left, image right --- */
.mk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* --- Specs card --- */
.mk-specs { position: relative; }
.mk-detail {
  display: none;
  opacity: 0;
  transform: translateX(-16px);
}
.mk-detail-active {
  display: block;
  animation: mkSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mkSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

.mk-detail-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #2a3648;
  background: rgba(42,54,72,0.08);
  padding: 5px 14px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.mk-badge-cedar {
  color: #b45309;
  background: rgba(180,83,9,0.08);
}
.mk-badge-komposit {
  color: #0d9488;
  background: rgba(13,148,136,0.08);
}

.mk-detail-name {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -1.5px;
  margin: 0 0 4px;
  color: #0a0a14;
}
.mk-detail-model {
  font-size: 0.85rem;
  color: rgba(10,10,20,0.4);
  margin: 0 0 28px;
  font-weight: 500;
}

.mk-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mk-spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(10,10,20,0.06);
  font-size: 0.9rem;
  transition: background 0.2s ease;
}
.mk-spec-list li:hover {
  background: rgba(42,54,72,0.02);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 8px;
}
.mk-spec-label {
  color: rgba(10,10,20,0.5);
  font-weight: 500;
}
.mk-spec-value {
  color: #0a0a14;
  font-weight: 700;
}

.mk-verdict {
  margin-top: 24px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(10,10,20,0.6);
  padding: 16px;
  background: rgba(42,54,72,0.03);
  border-radius: 12px;
  border-left: 3px solid #2a3648;
}
.mk-verdict strong { color: #0a0a14; }

/* --- Image --- */
.mk-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  background: rgba(42,54,72,0.03);
  border-radius: 24px;
  border: 1px solid rgba(10,10,20,0.04);
  padding: 24px;
  overflow: hidden;
}
.mk-img {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  transform: scale(0.92) translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.mk-img-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .mk-section { padding: 80px 32px 100px; }
  .mk-grid { gap: 32px; }
}
@media (max-width: 768px) {
  .mk-section { padding: 60px 20px 80px; }
  .mk-grid { grid-template-columns: 1fr; gap: 24px; }
  .mk-image-wrap { order: -1; min-height: 280px; }
  .mk-img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
  .mk-tabs { max-width: 100%; }
  .mk-tab { font-size: 0.82rem; }
}
@media (max-width: 480px) {
  .mk-section { padding: 50px 16px 60px; }
  .mk-image-wrap { min-height: 220px; }
  .mk-detail-name { font-size: 1.6rem; }
}

/* ===== FASADRENOVERING PANEL — FAQ Section ===== */
.fp-faq {
  padding: 6rem 1.5rem 5rem;
  background: linear-gradient(180deg, #f0f6ff 0%, #fff 100%);
  position: relative;
}
.fp-faq-inner { max-width: 800px; margin: 0 auto; }
.fp-faq-header {
  text-align: center; margin-bottom: 3rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fp-faq-header.fp-visible { opacity: 1; transform: translateY(0); }
.fp-faq-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800;
  color: #1a1a2e; letter-spacing: -0.5px; margin-bottom: 0.6rem;
}
.fp-faq-title span {
  background: linear-gradient(135deg, var(--blue) 0%, #0066aa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.fp-faq-sub { font-size: 1rem; color: #5a5a6a; line-height: 1.6; }

.fp-faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.fp-faq-item {
  background: #fff; border: 1px solid rgba(25,168,255,0.08);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.fp-faq-item.fp-visible { opacity: 1; transform: translateY(0); }
.fp-faq-item.fp-faq-open { border-color: rgba(25,168,255,0.2); box-shadow: 0 6px 24px rgba(25,168,255,0.08); }

.fp-faq-q {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  color: #1a1a2e; line-height: 1.4;
  transition: color 0.2s ease;
}
.fp-faq-q:hover { color: var(--blue); }
.fp-faq-q-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(25,168,255,0.08); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.fp-faq-open .fp-faq-q-icon { background: var(--blue); transform: rotate(45deg); }
.fp-faq-q-icon svg { width: 18px; height: 18px; stroke: var(--blue); transition: stroke 0.3s ease; }
.fp-faq-open .fp-faq-q-icon svg { stroke: #fff; }

.fp-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}
.fp-faq-open .fp-faq-a { max-height: 400px; }
.fp-faq-a-inner {
  padding: 0 1.5rem 1.25rem 4.25rem;
  font-size: 0.93rem; line-height: 1.7;
  color: #5a5a6a;
}
.fp-faq-a-inner strong { color: #1a1a2e; }

@media (max-width: 600px) {
  .fp-faq { padding: 4rem 1rem 3.5rem; }
  .fp-faq-q { padding: 1rem 1.2rem; font-size: 0.92rem; gap: 0.8rem; }
  .fp-faq-q-icon { width: 32px; height: 32px; }
  .fp-faq-a-inner { padding: 0 1.2rem 1rem 3.5rem; font-size: 0.88rem; }
}

.hero-batterilagring .frosted-box h1 span {
  background: linear-gradient(135deg, #00D9FF 0%, #19A8FF 50%, #00D9FF 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}
.frosted-box { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 24px; padding: clamp(2rem, 3.5vw, 3.2rem) clamp(1.5rem, 3vw, 2.8rem); width: 100%; max-width: min(560px, 85vw); animation: fadeInUp 0.8s ease 0.2s forwards; opacity: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1); margin-top: 0; }
.frosted-box .hero-kicker { margin-bottom: 0.8rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(255,255,255,0.95); font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.frosted-box h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.2; margin-bottom: 1.2rem; color: #FFF; text-shadow: 0 3px 10px rgba(0,0,0,0.5); font-weight: 800; letter-spacing: -0.6px; }
.frosted-box .hero-lead { font-size: clamp(0.88rem, 1.2vw, 1rem); color: rgba(255,255,255,0.95); margin-bottom: 2rem; line-height: 1.7; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.frosted-box .hero-cta-row { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 0; }
.hero-kicker { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.98); margin-bottom: 0.8rem; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); }
.hero h1 { font-size: clamp(1.8rem, 3vw + 0.4rem, 2.8rem); line-height: 1.15; margin-bottom: 1rem; color: #FFF; text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 6px 24px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.3); font-weight: 700; }
.hero-lead { font-size: clamp(0.88rem, 1.1vw, 0.98rem); color: rgba(255,255,255,1); margin-bottom: 2rem; max-width: 500px; line-height: 1.7; text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-note { font-size: 0.82rem; color: rgba(255,255,255,0.98); margin-top: 1.5rem; font-weight: 500; max-width: 500px; text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); }

/* ============================================================
   SKORSTEN: VARFÖR VÄLJA OSS — compact accordion
   ============================================================ */

.skor-why {
  position: relative;
  padding: 5rem 1.5rem 4rem;
  background: #f8fafb;
  overflow: hidden;
}
.skor-why::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(25,168,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(25,168,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.skor-why-inner { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 2; }

/* header */
.skor-why-header, .skor-anatomy-header { text-align: center; margin-bottom: 3rem; }
.skor-why-kicker {
  display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--blue); font-weight: 700; margin-bottom: 1rem; padding: 0.4rem 1rem;
  border: 1px solid rgba(25,168,255,0.25); border-radius: 100px; background: rgba(25,168,255,0.06);
}
.skor-why-title {
  font-size: clamp(2rem, 3.8vw, 2.8rem); font-weight: 800; color: var(--text);
  margin-bottom: 1.2rem; letter-spacing: -0.5px; line-height: 1.2;
}
.skor-why-title span {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.skor-why-lead { font-size: 1.08rem; line-height: 1.75; color: var(--text-soft); max-width: 620px; margin: 0 auto; }

/* ---- accordion ---- */
.skor-acc-wrap { display: flex; flex-direction: column; gap: 0; border-radius: 1.2rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.skor-acc-item { border-bottom: 1px solid rgba(0,0,0,0.06); }
.skor-acc-item:last-child { border-bottom: none; }
.skor-acc-header {
  display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.2rem 1.8rem;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.2s;
}
.skor-acc-header:hover { background: rgba(25,168,255,0.03); }
.skor-acc-num { font-size: 0.7rem; font-weight: 800; color: rgba(25,168,255,0.3); min-width: 24px; letter-spacing: 0.05em; }
.skor-acc-label { flex: 1; font-size: 1rem; font-weight: 650; color: var(--text); letter-spacing: -0.2px; }
.skor-acc-chevron { flex-shrink: 0; color: var(--text-soft); transition: transform 0.35s cubic-bezier(.25,.8,.25,1); }
.skor-acc-active .skor-acc-chevron { transform: rotate(180deg); }
.skor-acc-active .skor-acc-num { color: var(--blue); }

.skor-acc-body {
  max-height: 0; overflow: hidden; padding: 0 1.8rem;
  transition: max-height 0.45s cubic-bezier(.25,.8,.25,1), padding 0.35s;
}
.skor-acc-active .skor-acc-body { max-height: 400px; padding: 0 1.8rem 1.5rem; }
.skor-acc-body p { font-size: 0.93rem; line-height: 1.75; color: var(--text-soft); margin-bottom: 0.8rem; }

/* badge */
.skor-acc-badge {
  display: inline-block; font-size: 0.82rem; padding: 0.45rem 1rem; border-radius: 8px;
  background: rgba(25,168,255,0.06); border: 1px solid rgba(25,168,255,0.12); color: var(--text-soft);
}
.skor-acc-badge strong { color: var(--blue); font-weight: 800; }

/* checks */
.skor-acc-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.skor-acc-checks li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.87rem; color: var(--text-soft); font-weight: 500; }
.skor-acc-checks svg { width: 16px; height: 16px; flex-shrink: 0; }

/* bars */
.skor-acc-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.skor-bar-row { display: grid; grid-template-columns: 75px 1fr 55px; align-items: center; gap: 0.6rem; }
.skor-bar-label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.skor-bar-track { height: 7px; background: rgba(0,0,0,0.06); border-radius: 99px; overflow: hidden; }
.skor-bar-fill { height: 100%; border-radius: 99px; width: 0%; transition: width 1s cubic-bezier(.25,.8,.25,1); }
.skor-bar-bad { background: #e0e0e0; }
.skor-bar-good { background: linear-gradient(90deg, var(--blue), var(--blue-dark)); }
.skor-bar-val { font-size: 0.76rem; color: var(--text-soft); font-weight: 600; text-align: right; }

/* tags */
.skor-acc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.skor-acc-tags span {
  font-size: 0.73rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: 100px;
  background: rgba(25,168,255,0.08); color: var(--blue-dark); border: 1px solid rgba(25,168,255,0.15);
}

/* bottom CTA */
.skor-why-bottom { text-align: center; margin-top: 2.5rem; }
.skor-why-cta {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2.2rem;
  border-radius: 100px; background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 4px 18px rgba(25,168,255,0.3); transition: transform 0.3s, box-shadow 0.3s;
}
.skor-why-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(25,168,255,0.4); }
.skor-why-cta svg { transition: transform 0.3s; }
.skor-why-cta:hover svg { transform: translateX(4px); }

/* ============================================================
   SKORSTEN: INTERACTIVE CHIMNEY ANATOMY
   ============================================================ */
.skor-anatomy {
  position: relative; padding: 5rem 1.5rem 5rem; background: #fff; overflow: hidden;
}
.skor-anatomy-inner { max-width: var(--max-width); margin: 0 auto; }

/* stage: SVG left, info right */
.skor-anatomy-stage {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
  margin-bottom: 3rem;
}
.skor-anatomy-svg-wrap {
  position: relative; border-radius: 1.2rem; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.06);
}
.skor-anatomy-svg { display: block; width: 100%; height: auto; }

/* hotspot glow — no CSS transform on SVG <g> to avoid jitter */
.skor-hotspot { cursor: pointer; }
.skor-spot-active circle:nth-child(3) { fill: #fff !important; stroke: var(--blue) !important; stroke-width: 3; }
.skor-spot-active text { fill: var(--blue) !important; }

/* info panels */
.skor-anatomy-info { position: relative; min-height: 280px; }
.skor-anatomy-panel {
  position: absolute; inset: 0; opacity: 0; transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
}
.skor-anatomy-panel.skor-panel-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; }
.skor-panel-icon {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: rgba(25,168,255,0.08); border-radius: 12px; margin-bottom: 1.2rem;
}
.skor-panel-icon svg { width: 26px; height: 26px; }
.skor-anatomy-panel h3 { font-size: 1.25rem; font-weight: 750; color: var(--text); margin-bottom: 0.7rem; letter-spacing: -0.3px; }
.skor-anatomy-panel p { font-size: 0.95rem; line-height: 1.75; color: var(--text-soft); margin-bottom: 1rem; }
.skor-panel-fact {
  display: inline-block; font-size: 0.82rem; padding: 0.5rem 1rem; border-radius: 8px;
  background: rgba(25,168,255,0.06); border: 1px solid rgba(25,168,255,0.12); color: var(--text-soft);
}
.skor-panel-fact strong { color: var(--blue); }

/* anatomy cta */
.skor-anatomy-cta { text-align: center; }
.skor-anatomy-cta p { font-size: 1rem; color: var(--text-soft); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }

/* ---- responsive ---- */
@media (max-width: 850px) {
  .skor-anatomy-stage { grid-template-columns: 1fr; gap: 2rem; }
  .skor-anatomy-info { min-height: auto; }
  .skor-anatomy-panel { position: relative; }
  .skor-anatomy-panel:not(.skor-panel-active) { display: none; }
  .skor-why { padding: 4rem 1.5rem 3rem; }
  .skor-anatomy { padding: 4rem 1.5rem; }
}
@media (max-width: 600px) {
  .skor-why { padding: 3rem 1rem 2.5rem; }
  .skor-why-header, .skor-anatomy-header { margin-bottom: 2rem; }
  .skor-why-title { font-size: 1.65rem; }
  .skor-why-lead { font-size: 0.95rem; }
  .skor-acc-header { padding: 1rem 1.2rem; gap: 0.7rem; }
  .skor-acc-label { font-size: 0.92rem; }
  .skor-acc-body, .skor-acc-active .skor-acc-body { padding-left: 1.2rem; padding-right: 1.2rem; }
  .skor-acc-checks { flex-direction: column; gap: 0.3rem; }
  .skor-bar-row { grid-template-columns: 65px 1fr 48px; gap: 0.4rem; }
  .skor-anatomy { padding: 3rem 1rem; }
  .skor-anatomy-panel h3 { font-size: 1.1rem; }
  .skor-anatomy-panel p { font-size: 0.9rem; }
  .skor-why-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   SKORSTENSKOLLEN – Interactive Chimney Health Quiz
   ============================================================ */
.skor-check {
  padding: 7rem 1.5rem 6rem;
  background: #f8fafb;
  opacity: 0; transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.skor-check.skor-visible { opacity: 1; transform: none; }
.skor-check-inner { max-width: 720px; margin: 0 auto; }
.skor-check-header { text-align: center; margin-bottom: 2.5rem; }

/* Quiz wrap */
.skor-quiz-wrap {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  padding: 2.5rem 2.5rem 2rem;
  position: relative;
  overflow: hidden;
}

/* Progress bar */
.skor-quiz-progress {
  height: 5px;
  background: #e8ecf0;
  border-radius: 100px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.skor-quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #19A8FF, #0088cc);
  border-radius: 100px;
  transition: width .4s ease;
}

/* Step label */
.skor-quiz-step-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.03em;
  margin-bottom: 2rem;
}

/* Slides */
.skor-quiz-slides { position: relative; }
.skor-quiz-slide {
  display: none;
  animation: quizSlideIn .35s ease;
}
.skor-quiz-slide.skor-quiz-active { display: block; }

@keyframes quizSlideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Question */
.skor-quiz-question {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.skor-quiz-q-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  background: rgba(25,168,255,.08);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.skor-quiz-q-icon svg { width: 26px; height: 26px; }
.skor-quiz-question h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -0.2px;
  margin: 0;
}

/* Options grid */
.skor-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.skor-quiz-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid #e2e6ea;
  border-radius: 12px;
  background: #fafbfc;
  cursor: pointer;
  transition: all .2s ease;
  text-align: left;
  font-family: inherit;
}
.skor-quiz-opt:hover {
  border-color: #19A8FF;
  background: rgba(25,168,255,.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25,168,255,.1);
}
.skor-quiz-opt.skor-opt-chosen {
  border-color: #19A8FF;
  background: rgba(25,168,255,.08);
  box-shadow: 0 0 0 3px rgba(25,168,255,.12);
}
.skor-opt-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.03);
  border-radius: 10px;
  transition: background .2s ease;
}
.skor-opt-icon svg { width: 20px; height: 20px; }
.skor-quiz-opt.skor-opt-chosen .skor-opt-icon {
  background: rgba(25,168,255,.1);
}
.skor-opt-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.4;
}
.skor-opt-text strong {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}
.skor-opt-text br + * { color: var(--text-soft); }

/* Result panel */
.skor-quiz-result {
  text-align: center;
  animation: quizSlideIn .5s ease;
}
.skor-result-gauge {
  position: relative;
  width: 200px;
  margin: 0 auto 1rem;
}
.skor-gauge-svg { display: block; width: 100%; height: auto; }
.skor-gauge-label {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.skor-gauge-score {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: -0.3rem;
  margin-bottom: 1.2rem;
}

.skor-quiz-result h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.6rem;
  letter-spacing: -0.3px;
}
.skor-quiz-result p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 520px;
  margin: 0 auto 1.2rem;
}

/* Tips */
.skor-result-tips { margin-bottom: 1.5rem; }
.skor-tip {
  background: #f0f9ff;
  border-left: 3px solid #19A8FF;
  padding: 0.9rem 1.1rem;
  border-radius: 0 10px 10px 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
}
.skor-tip-warn {
  background: #fffbeb;
  border-left-color: #f59e0b;
}
.skor-tip-urgent {
  background: #fef2f2;
  border-left-color: #ef4444;
}

/* Actions */
.skor-result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.skor-result-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.skor-result-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
.skor-result-restart {
  background: none;
  border: none;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: color .2s;
}
.skor-result-restart:hover { color: var(--text); }

/* Quiz responsive */
@media (max-width: 600px) {
  .skor-check { padding: 4rem 1rem 3.5rem; }
  .skor-quiz-wrap { padding: 1.5rem 1.2rem 1.3rem; border-radius: 14px; }
  .skor-quiz-options { grid-template-columns: 1fr; gap: 0.55rem; }
  .skor-quiz-opt { padding: 0.85rem 1rem; }
  .skor-quiz-question { gap: 0.7rem; }
  .skor-quiz-question h3 { font-size: 1rem; }
  .skor-quiz-q-icon { width: 40px; height: 40px; }
  .skor-quiz-q-icon svg { width: 22px; height: 22px; }
  .skor-quiz-result h3 { font-size: 1.15rem; }
  .skor-result-gauge { width: 160px; }
  .skor-gauge-label { font-size: 1.1rem; }
  .skor-result-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   SKORSTENSINFO – Bento Knowledge Grid
   ============================================================ */
.skor-kb {
  padding: 7rem 1.5rem 6rem;
  background: #fff;
  opacity: 0; transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.skor-kb.skor-visible { opacity: 1; transform: none; }
.skor-kb-inner { max-width: var(--max-width); margin: 0 auto; }
.skor-kb-header { text-align: center; margin-bottom: 3.5rem; }

/* --- Bento Grid --- */
.skor-kb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1.25rem;
}

/* --- Base Card --- */
.skor-kb-card {
  background: #f8fafb;
  border: 1px solid #e8ecf0;
  border-radius: 20px;
  padding: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease, box-shadow .35s ease;
  overflow: hidden;
}
.skor-kb-card.skor-kb-card-visible {
  opacity: 1;
  transform: none;
}
.skor-kb-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
}
.skor-kb-card-inner {
  padding: 2rem 1.8rem;
}
.skor-kb-card h3 {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--text);
  margin-bottom: 0.55rem;
  letter-spacing: -0.2px;
}
.skor-kb-card p {
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--text-soft);
  margin: 0;
}

/* --- Featured Card (2 col, left blue accent) --- */
.skor-kb-card-featured {
  grid-column: span 2;
  border-left: 4px solid var(--blue);
  background: linear-gradient(135deg, rgba(25,168,255,.03) 0%, #f8fafb 60%);
}
.skor-kb-badge {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  background: rgba(25,168,255,.1);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 20px;
  margin-bottom: 1rem;
}

/* --- Meter (progress bar) --- */
.skor-kb-meter { margin-top: 1.2rem; }
.skor-kb-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.skor-kb-meter-label {
  font-size: 0.78rem;
  color: var(--text-soft);
  font-weight: 500;
}
.skor-kb-meter-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.5px;
}
.skor-kb-meter-track {
  height: 10px;
  background: rgba(25,168,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.skor-kb-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), #5dc8ff);
  border-radius: 10px;
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
}

/* --- Stat Card (ring chart) --- */
.skor-kb-card-stat {
  text-align: center;
}
.skor-kb-card-stat .skor-kb-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.skor-kb-stat-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 1rem;
}
.skor-kb-stat-ring svg {
  width: 100%;
  height: 100%;
}
.skor-kb-ring-fill {
  transition: stroke-dasharray 0s;
}
.skor-kb-stat-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.skor-kb-stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -1px;
  line-height: 1;
}
.skor-kb-stat-unit {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* --- Wide Card (2 col) --- */
.skor-kb-card-wide {
  grid-column: span 2;
}
.skor-kb-icon-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.skor-kb-icon-circle {
  width: 48px; height: 48px;
  background: rgba(25,168,255,.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
.skor-kb-icon-circle svg { width: 24px; height: 24px; }
.skor-kb-icon-text {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-soft);
}
.skor-kb-zero {
  font-size: 4.5rem;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -3px;
  opacity: 0;
}
.skor-kb-zero-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 0.3rem;
}

/* --- Warnings Card --- */
.skor-kb-card-warnings .skor-kb-card-inner {
  display: flex;
  flex-direction: column;
}
.skor-kb-warn-icon {
  width: 40px; height: 40px;
  background: rgba(245,158,11,.08);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #f59e0b;
}
.skor-kb-warn-icon svg { width: 22px; height: 22px; }
.skor-kb-warn-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
}
.skor-kb-warn-list li {
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.55;
  padding: 0.35rem 0 0.35rem 1.3rem;
  position: relative;
}
.skor-kb-warn-list li .skor-kb-warn-dot {
  position: absolute;
  left: 0; top: 0.7rem;
  width: 6px; height: 6px;
  background: #f59e0b;
  border-radius: 50%;
  display: inline-block;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .skor-kb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .skor-kb-card-featured,
  .skor-kb-card-wide {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .skor-kb { padding: 4rem 1rem 3.5rem; }
  .skor-kb-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .skor-kb-card-featured,
  .skor-kb-card-wide {
    grid-column: span 1;
  }
  .skor-kb-card-inner { padding: 1.5rem 1.3rem; }
  .skor-kb-stat-ring { width: 100px; height: 100px; }
  .skor-kb-stat-num { font-size: 1.4rem; }
  .skor-kb-zero { font-size: 3.5rem; }
}

/* ============================================================
   KORRUGERAD: INTERACTIVE ROOF LAYERS EXPLAINER (Light Theme)
   ============================================================ */
.kor-layers-section {
  position: relative;
  padding: 6rem 1.5rem 7rem;
  background: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.kor-layers-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* -- Header -- */
.kor-layers-header {
  text-align: center;
  margin-bottom: 4rem;
}

.kor-layers-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  color: #111;
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}
.kor-layers-title span {
  background: linear-gradient(135deg, #19A8FF, #0088cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kor-layers-subtitle {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* -- Main content grid -- */
.kor-layers-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* -- Visual (left side) -- */
.kor-layers-visual {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  padding: 2rem 1rem 2rem 2.5rem;
}

/* Progress bar */
.kor-layers-progress {
  position: absolute;
  left: 0;
  top: 2rem;
  bottom: 2rem;
  width: 3px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.kor-layers-progress-fill {
  width: 100%;
  background: linear-gradient(180deg, #19A8FF, #0088cc);
  border-radius: 3px;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  height: 20%;
  box-shadow: 0 0 10px rgba(25,168,255,0.3);
}

/* -- Individual layer -- */
.kor-layer {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  padding: 6px 12px 6px 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
  background: transparent;
}
.kor-layer:hover {
  transform: translateX(8px) scale(1.015);
  background: rgba(25,168,255,0.03);
  border-color: rgba(25,168,255,0.1);
}
.kor-layer.active {
  transform: translateX(16px) scale(1.03);
  background: rgba(25,168,255,0.05);
  border-color: rgba(25,168,255,0.18);
}

/* Layer number watermark */
.kor-layer-num {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(0,0,0,0.04);
  line-height: 1;
  letter-spacing: -2px;
  transition: color 0.4s ease;
  pointer-events: none;
  z-index: 5;
}
.kor-layer.active .kor-layer-num {
  color: rgba(25,168,255,0.15);
}

/* SVG shape */
.kor-layer-shape {
  position: relative;
  z-index: 2;
}
.kor-layer-shape svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
  transition: filter 0.5s ease, transform 0.5s ease;
}
.kor-layer.active .kor-layer-shape svg {
  filter: drop-shadow(0 6px 20px rgba(25,168,255,0.15)) drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

/* Tag label (right side) */
.kor-layer-tag {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0,0,0,0.2);
  white-space: nowrap;
  transition: all 0.4s ease;
  padding-left: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  z-index: 10;
}
.kor-layer-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(25,168,255,0.25);
  transition: all 0.4s ease;
}
.kor-layer.active .kor-layer-tag {
  color: var(--blue);
}
.kor-layer.active .kor-layer-tag::before {
  width: 14px;
  background: var(--blue);
  box-shadow: 0 0 6px rgba(25,168,255,0.3);
}

/* Glow effect on active */
.kor-layer-glow {
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(25,168,255,0.06) 0%, transparent 70%);
}
.kor-layer.active .kor-layer-glow {
  opacity: 1;
}

/* Explode / Collapse button */
.kor-layers-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem auto 0;
  padding: 0.6rem 1.4rem;
  background: rgba(25,168,255,0.06);
  border: 1px solid rgba(25,168,255,0.2);
  border-radius: 50px;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.kor-layers-toggle:hover {
  background: rgba(25,168,255,0.12);
  border-color: rgba(25,168,255,0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(25,168,255,0.15);
}
.kor-layers-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.kor-toggle-icon-collapse { display: none; }
.kor-layers-visual.exploded .kor-toggle-icon-explode { display: none; }
.kor-layers-visual.exploded .kor-toggle-icon-collapse { display: block; }

/* Exploded state — increased spacing */
.kor-layers-visual.exploded {
  gap: 28px;
}
.kor-layers-visual.exploded .kor-layer {
  transform: translateX(0) scale(1);
}
.kor-layers-visual.exploded .kor-layer.active {
  transform: translateX(16px) scale(1.03);
}

/* -- Info panel (right side) -- */
.kor-layers-info {
  position: relative;
  min-height: 380px;
}

.kor-info-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
.kor-info-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
}

/* Icon */
.kor-info-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(25,168,255,0.06);
  border: 1px solid rgba(25,168,255,0.12);
  border-radius: 14px;
  margin-bottom: 1.2rem;
}
.kor-info-icon svg {
  width: 32px;
  height: 32px;
}

/* Step label */
.kor-info-step {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.kor-info-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 0.7rem;
  letter-spacing: -0.5px;
}

.kor-info-card p {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}

/* Spec grid */
.kor-info-specs {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.kor-spec {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: rgba(0,0,0,0.015);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  transition: all 0.3s ease;
}
.kor-spec:hover {
  background: rgba(25,168,255,0.04);
  border-color: rgba(25,168,255,0.15);
  transform: translateX(4px);
}
.kor-spec svg {
  flex-shrink: 0;
}
.kor-spec div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.kor-spec-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.kor-spec-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111;
}

/* Navigation dots */
.kor-layers-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
}
.kor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: transparent;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}
.kor-dot:hover {
  border-color: rgba(25,168,255,0.5);
  background: rgba(25,168,255,0.1);
}
.kor-dot.active {
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.35);
  box-shadow: 0 0 12px rgba(25,168,255,0.35);
}

/* ===== KOR LAYERS RESPONSIVE ===== */
@media (max-width: 900px) {
  .kor-layers-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .kor-layers-visual {
    max-width: 500px;
    margin: 0 auto;
  }
  .kor-layers-info {
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .kor-layers-section { padding: 4rem 1rem 5rem; }
  .kor-layers-visual {
    padding: 1.5rem 0.5rem 1.5rem 2rem;
  }
  .kor-layer-tag { display: none; }
  .kor-layers-progress { left: 0.2rem; }
  .kor-info-card { padding: 1.5rem; border-radius: 14px; }
  .kor-info-card h3 { font-size: 1.15rem; }
  .kor-info-card p { font-size: 0.85rem; }
  .kor-info-icon { width: 44px; height: 44px; border-radius: 10px; }
  .kor-info-icon svg { width: 24px; height: 24px; }
  .kor-layers-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .kor-layers-subtitle { font-size: 0.92rem; }
  .kor-layers-toggle { font-size: 0.72rem; padding: 0.5rem 1rem; }
  .kor-spec { padding: 0.5rem 0.7rem; }
}


/* ═══════════════════════════════════════════════════════
   VENTILATION & KONDENS SECTION — korrugerad.html
   ═══════════════════════════════════════════════════════ */

.vent-section {
  padding: 6rem 1.5rem;
  background: #ffffff;
  overflow: hidden;
}

.vent-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header */
.vent-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.vent-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(25,168,255,0.07);
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}
.vent-header h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.vent-header p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ── Main SVG visual ── */
.vent-visual {
  position: relative;
  margin: 0 auto 3.5rem;
  max-width: 960px;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
.vent-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Layer hover highlight */
.vent-layer {
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.vent-section.vent-highlight .vent-layer {
  opacity: 0.35;
}
.vent-section.vent-highlight .vent-layer.vent-layer-focused {
  opacity: 1;
}

/* Air particles base CSS animation */
.vent-particle {
  will-change: transform, opacity;
}
@keyframes vent-float-right {
  0%   { transform: translateX(0)    translateY(0);    opacity: 0; }
  8%   { opacity: 0.55; }
  50%  { transform: translateX(100px) translateY(-5px); opacity: 0.5; }
  90%  { opacity: 0.45; }
  100% { transform: translateX(200px) translateY(-3px); opacity: 0; }
}
.vp-1  { animation: vent-float-right 4s   ease-in-out infinite 0s; }
.vp-2  { animation: vent-float-right 4.8s ease-in-out infinite 0.5s; }
.vp-3  { animation: vent-float-right 3.8s ease-in-out infinite 1.1s; }
.vp-4  { animation: vent-float-right 5s   ease-in-out infinite 1.7s; }
.vp-5  { animation: vent-float-right 3.6s ease-in-out infinite 2.3s; }
.vp-6  { animation: vent-float-right 3.2s ease-in-out infinite 0.7s; }
.vp-7  { animation: vent-float-right 5s   ease-in-out infinite 1.4s; }
.vp-8  { animation: vent-float-right 4.4s ease-in-out infinite 2.1s; }
.vp-9  { animation: vent-float-right 3.9s ease-in-out infinite 0.3s; }
.vp-10 { animation: vent-float-right 4.6s ease-in-out infinite 1.9s; }

/* Moisture rising animation */
@keyframes vent-rise {
  0%   { transform: translateY(0);     opacity: 0; }
  12%  { opacity: 0.5; }
  55%  { opacity: 0.35; }
  100% { transform: translateY(-170px); opacity: 0; }
}
.vent-moisture {
  will-change: transform, opacity;
}
.vm-1 { animation: vent-rise 5.5s ease-in-out infinite 0s; }
.vm-2 { animation: vent-rise 6.5s ease-in-out infinite 1.2s; }
.vm-3 { animation: vent-rise 5s   ease-in-out infinite 0.6s; }
.vm-4 { animation: vent-rise 6s   ease-in-out infinite 2s; }

/* Condensation shimmer */
@keyframes vent-cond-shimmer {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.7; }
}
.vent-condensation circle {
  animation: vent-cond-shimmer 3.5s ease-in-out infinite;
}
.vent-condensation circle:nth-child(2) { animation-delay: 0.6s; }
.vent-condensation circle:nth-child(3) { animation-delay: 1.2s; }
.vent-condensation circle:nth-child(4) { animation-delay: 1.8s; }
.vent-condensation circle:nth-child(5) { animation-delay: 2.4s; }

/* Entry / exit zone subtle pulse */
@keyframes vent-zone-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
.vent-entry-zone, .vent-exit-zone {
  animation: vent-zone-pulse 3s ease-in-out infinite;
}
.vent-exit-zone { animation-delay: 1.5s; }

/* Ströläkt subtle scale */
.vent-strolakt rect {
  transition: filter 0.3s ease;
}
.vent-airgap:hover .vent-strolakt rect {
  filter: brightness(1.05);
}

/* Paused state */
.vent-section.vent-paused .vent-particle,
.vent-section.vent-paused .vent-moisture {
  animation-play-state: paused;
}

/* Labels */
.vent-label text {
  transition: opacity 0.25s ease;
}
.vent-label-clickable {
  cursor: pointer;
}
.vent-label-clickable:hover text {
  opacity: 0.85;
}

/* Play / pause button */
.vent-play-btn {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.vent-play-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: scale(1.08);
}

/* Legend */
.vent-legend {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.vent-legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-soft);
  font-weight: 500;
}
.vent-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Info Cards Row ── */
.vent-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.vent-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.8rem;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.vent-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.35s ease;
}
.vent-card:hover, .vent-card-active {
  border-color: rgba(25,168,255,0.2);
  box-shadow: 0 4px 24px rgba(25,168,255,0.08);
  transform: translateY(-2px);
}
.vent-card-active::before {
  background: var(--blue);
}
.vent-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(25,168,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.vent-card-icon svg {
  width: 28px;
  height: 28px;
}
.vent-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.vent-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 1rem;
}
.vent-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue);
  background: rgba(25,168,255,0.06);
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
}

/* Moisture card accent */
.vent-card[data-vent-card="moisture"] .vent-card-icon {
  background: rgba(255,80,60,0.06);
}
.vent-card[data-vent-card="moisture"] .vent-card-tag {
  color: rgba(220,60,40,0.8);
  background: rgba(255,80,60,0.06);
}
/* Result card accent */
.vent-card[data-vent-card="result"] .vent-card-icon {
  background: rgba(46,170,92,0.06);
}
.vent-card[data-vent-card="result"] .vent-card-tag {
  color: #2eaa5c;
  background: rgba(46,170,92,0.06);
}

/* ── Entrance animation ── */
.vent-section:not(.visible) .vent-header,
.vent-section:not(.visible) .vent-visual,
.vent-section:not(.visible) .vent-card {
  opacity: 0;
  transform: translateY(30px);
}
.vent-section.visible .vent-header {
  animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
.vent-section.visible .vent-visual {
  animation: vent-enter 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s forwards;
}
.vent-section.visible .vent-card:nth-child(1) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s forwards; }
.vent-section.visible .vent-card:nth-child(2) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s forwards; }
.vent-section.visible .vent-card:nth-child(3) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; }

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

/* ── Responsive ── */
@media (max-width: 900px) {
  .vent-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .vent-visual { padding: 1.2rem 0.8rem 1rem; }
  .vent-labels text { font-size: 10px; }
}
@media (max-width: 600px) {
  .vent-section { padding: 4rem 1rem; }
  .vent-header h2 { font-size: 1.6rem; }
  .vent-header p { font-size: 0.92rem; }
  .vent-legend { gap: 1rem; }
  .vent-legend-item { font-size: 0.72rem; }
  .vent-card { padding: 1.5rem 1.2rem 1.4rem; }
  .vent-card h3 { font-size: 1rem; }
  .vent-card p { font-size: 0.85rem; }
}


/* ═══════════════════════════════════════════════════════
   TAKFALL & AVRINNING SECTION — korrugerad.html
   ═══════════════════════════════════════════════════════ */

.slope-section {
  padding: 6rem 1.5rem;
  background: #ffffff;
  overflow: hidden;
}
.slope-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header */
.slope-header {
  text-align: center;
  margin-bottom: 3rem;
}
.slope-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(25,168,255,0.07);
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}
.slope-header h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.slope-header p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ── Stage: SVG left + Explanation right ── */
.slope-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

/* Visual container */
.slope-visual {
  position: relative;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem 1rem 0.6rem;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
.slope-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Cloud drift */
@keyframes slope-cloud-drift-1 { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } }
@keyframes slope-cloud-drift-2 { 0% { transform: translateX(0); } 100% { transform: translateX(-16px); } }
@keyframes slope-cloud-drift-3 { 0% { transform: translateX(0); } 100% { transform: translateX(12px); } }
.slope-cloud-1 { animation: slope-cloud-drift-1 14s ease-in-out infinite alternate; }
.slope-cloud-2 { animation: slope-cloud-drift-2 18s ease-in-out infinite alternate; }
.slope-cloud-3 { animation: slope-cloud-drift-3 22s ease-in-out infinite alternate; }

/* Rain streaks */
@keyframes slope-rain-fall {
  0%   { transform: translateY(-50px); opacity: 0; }
  10%  { opacity: 0.3; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(420px); opacity: 0; }
}
.slope-rain { will-change: transform, opacity; opacity: 0; }
.sr-1  { animation: slope-rain-fall 1.8s linear infinite 0s; }
.sr-2  { animation: slope-rain-fall 2.0s linear infinite 0.15s; }
.sr-3  { animation: slope-rain-fall 1.7s linear infinite 0.3s; }
.sr-4  { animation: slope-rain-fall 2.1s linear infinite 0.5s; }
.sr-5  { animation: slope-rain-fall 1.9s linear infinite 0.7s; }
.sr-6  { animation: slope-rain-fall 2.2s linear infinite 0.2s; }
.sr-7  { animation: slope-rain-fall 1.6s linear infinite 0.4s; }
.sr-8  { animation: slope-rain-fall 2.0s linear infinite 0.6s; }
.sr-9  { animation: slope-rain-fall 1.9s linear infinite 0.35s; }
.sr-10 { animation: slope-rain-fall 2.1s linear infinite 0.55s; }

/* Water drops */
.slope-drop { will-change: transform, opacity, cy; }
.slope-gutter-drip { will-change: cy, opacity; }

/* ── Explanation panel (right side) ── */
.slope-explain {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 0.5rem;
}
.slope-explain-summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1.5px solid var(--border);
}
.slope-explain-angle {
  display: flex;
  align-items: baseline;
  line-height: 1;
}
.slope-explain-angle-num {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -1px;
  transition: all 0.2s;
}
.slope-explain-angle-deg {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue);
  opacity: 0.6;
}
.slope-explain-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.slope-explain-status {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  display: inline-block;
  width: fit-content;
  transition: all 0.3s ease;
}
.slope-status-low {
  color: rgba(200,120,20,0.9);
  background: rgba(255,160,60,0.08);
}
.slope-status-mid {
  color: var(--blue);
  background: rgba(25,168,255,0.06);
}
.slope-status-high {
  color: #2eaa5c;
  background: rgba(46,170,92,0.06);
}
.slope-explain-range {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  opacity: 0.7;
}

/* Dynamic text */
.slope-explain-body {
  min-height: 80px;
}
.slope-explain-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-soft);
  transition: opacity 0.3s ease;
}

/* Indicator bars */
.slope-explain-indicators {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.slope-indicator {
  display: grid;
  grid-template-columns: 120px 1fr 70px;
  align-items: center;
  gap: 0.6rem;
}
.slope-indicator-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
}
.slope-indicator-bar {
  height: 6px;
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.slope-indicator-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1), background 0.4s ease;
}
.slope-fill-speed { background: var(--blue); }
.slope-fill-risk { background: rgba(200,120,20,0.6); }
.slope-fill-wind { background: rgba(46,170,92,0.6); }
.slope-indicator-value {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
  min-width: 68px;
  text-align: right;
  white-space: nowrap;
}

/* Pro tip */
.slope-explain-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: rgba(25,168,255,0.04);
  border: 1px solid rgba(25,168,255,0.1);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.slope-explain-tip svg { flex-shrink: 0; margin-top: 1px; }
.slope-explain-tip strong { color: var(--blue); }

/* Controls */
.slope-controls {
  max-width: 580px;
  margin: 0 auto 1.8rem;
  text-align: center;
}
.slope-slider-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  justify-content: center;
}
.slope-slider-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.slope-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 280px;
  height: 6px;
  background: linear-gradient(90deg, rgba(200,120,20,0.25) 0%, rgba(25,168,255,0.3) 25%, rgba(46,170,92,0.3) 100%);
  border-radius: 3px;
  outline: none;
}
.slope-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(25,168,255,0.3);
  border: 2px solid #fff;
  transition: transform 0.2s ease;
}
.slope-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slope-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(25,168,255,0.3);
  border: 2px solid #fff;
}
.slope-slider-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue);
  min-width: 48px;
  text-align: center;
}
.slope-presets {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.slope-preset {
  padding: 0.35rem 0.85rem;
  font-size: 0.73rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: #fff;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}
.slope-preset:hover { border-color: var(--blue); color: var(--blue); }
.slope-preset-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.slope-preset-active:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }

/* ── Insight cards (compact row) ── */
.slope-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.slope-insight {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.1rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.slope-insight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: transparent;
  transition: background 0.35s ease;
}
.slope-insight:hover, .slope-insight-active {
  border-color: rgba(25,168,255,0.2);
  box-shadow: 0 3px 16px rgba(25,168,255,0.06);
}
.slope-insight-active::before { background: var(--blue); }
.slope-insight-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.slope-insight strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.slope-insight p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
}

/* Entrance animations */
.slope-section:not(.visible) .slope-header,
.slope-section:not(.visible) .slope-stage,
.slope-section:not(.visible) .slope-controls,
.slope-section:not(.visible) .slope-insights {
  opacity: 0;
  transform: translateY(30px);
}
.slope-section.visible .slope-header {
  animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
.slope-section.visible .slope-stage {
  animation: vent-enter 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s forwards;
}
.slope-section.visible .slope-controls {
  animation: vent-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}
.slope-section.visible .slope-insights {
  animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s forwards;
}

/* Responsive */
@media (max-width: 900px) {
  .slope-stage { grid-template-columns: 1fr; gap: 1.5rem; }
  .slope-explain-summary { gap: 1rem; }
  .slope-explain-angle-num { font-size: 2.6rem; }
  .slope-indicator { grid-template-columns: 100px 1fr 65px; gap: 0.5rem; }
  .slope-slider { width: 220px; }
  .slope-presets { gap: 0.4rem; }
  .slope-preset { font-size: 0.68rem; padding: 0.3rem 0.65rem; }
  .slope-insights { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .slope-section { padding: 4rem 1rem; }
  .slope-header h2 { font-size: 1.6rem; }
  .slope-header p { font-size: 0.92rem; }
  .slope-visual { padding: 0.8rem 0.5rem 0.4rem; }
  .slope-slider { width: 160px; }
  .slope-slider-value { font-size: 1.1rem; }
  .slope-explain-angle-num { font-size: 2.2rem; }
  .slope-explain-text { font-size: 0.88rem; }
  .slope-indicator { grid-template-columns: 85px 1fr 60px; }
  .slope-indicator-label { font-size: 0.72rem; }
  .slope-insight { padding: 0.9rem 0.8rem; }
  .slope-insight strong { font-size: 0.82rem; }
  .slope-insight p { font-size: 0.75rem; }
}


/* ═══════════════════════════════════════════════════════
   VARFÖR VÄLJA KORRUGERAD PLÅT — Interactive facts
   ═══════════════════════════════════════════════════════ */

.corrfacts-section {
  padding: 6rem 1.5rem;
  background: #f8f9fa;
  overflow: hidden;
}
.corrfacts-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header */
.corrfacts-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.corrfacts-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(25,168,255,0.07);
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}
.corrfacts-header h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.corrfacts-header p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ── Stats Counter Row ── */
.corrfacts-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.corrfacts-stat {
  text-align: center;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.corrfacts-stat:hover {
  border-color: rgba(25,168,255,0.2);
  box-shadow: 0 4px 24px rgba(25,168,255,0.08);
  transform: translateY(-2px);
}
.corrfacts-stat-number {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  display: inline;
}
.corrfacts-stat-suffix {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  color: var(--blue);
  opacity: 0.7;
}
.corrfacts-stat-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 0.5rem;
}

/* ── Fact Cards Grid (accordion) ── */
.corrfacts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-bottom: 3rem;
  align-items: start;
}
.corrfacts-card {
  cursor: pointer;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: #fff;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.corrfacts-card:hover {
  border-color: rgba(25,168,255,0.2);
  box-shadow: 0 4px 24px rgba(25,168,255,0.08);
}
.corrfacts-card.corrfacts-open {
  border-color: rgba(25,168,255,0.25);
  box-shadow: 0 6px 28px rgba(25,168,255,0.1);
}
.corrfacts-card-inner {
  width: 100%;
}
.corrfacts-card-front {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
}
.corrfacts-card-back {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s cubic-bezier(0.4,0,0.2,1);
  padding: 0 1.4rem;
  border-top: 0 solid transparent;
}
.corrfacts-card.corrfacts-open .corrfacts-card-back {
  max-height: 400px;
  padding: 0.8rem 1.4rem 1.4rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Card icon */
.corrfacts-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.corrfacts-card-icon svg {
  width: 44px;
  height: 44px;
}
.corrfacts-card-front h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  flex: 1;
}
.corrfacts-card-front p {
  display: none;
}

/* Chevron toggle */
.corrfacts-card-front::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.3s;
  flex-shrink: 0;
  opacity: 0.5;
}
.corrfacts-card.corrfacts-open .corrfacts-card-front::after {
  transform: rotate(-135deg);
  opacity: 0.8;
}

/* Card back styling */
.corrfacts-card-back h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.corrfacts-card-back p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 0.4rem;
}
.corrfacts-card-back ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.corrfacts-card-back li {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-soft);
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.corrfacts-card-back li:last-child {
  border-bottom: none;
}
.corrfacts-card-back li strong {
  color: var(--text);
  font-weight: 700;
}

/* Cost comparison bars */
.corrfacts-compare {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.corrfacts-bar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.corrfacts-bar-row span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
  min-width: 95px;
  text-align: right;
}
.corrfacts-bar {
  flex: 1;
  height: 10px;
  background: rgba(0,0,0,0.04);
  border-radius: 5px;
  overflow: hidden;
}
.corrfacts-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.corrfacts-bar-blue {
  background: linear-gradient(90deg, var(--blue), #0088cc);
}
.corrfacts-bar-gray {
  background: rgba(0,0,0,0.12);
}

/* ── Bottom CTA ── */
.corrfacts-cta {
  text-align: center;
  padding: 2.5rem 0 0;
}
.corrfacts-cta p {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.corrfacts-cta-btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 16px rgba(25,168,255,0.25);
}
.corrfacts-cta-btn:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(25,168,255,0.35);
}

/* ── Entrance ── */
.corrfacts-section:not(.visible) .corrfacts-header,
.corrfacts-section:not(.visible) .corrfacts-stat,
.corrfacts-section:not(.visible) .corrfacts-card,
.corrfacts-section:not(.visible) .corrfacts-cta {
  opacity: 0;
  transform: translateY(30px);
}
.corrfacts-section.visible .corrfacts-header {
  animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
.corrfacts-section.visible .corrfacts-stat:nth-child(1) { animation: vent-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
.corrfacts-section.visible .corrfacts-stat:nth-child(2) { animation: vent-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.25s forwards; }
.corrfacts-section.visible .corrfacts-stat:nth-child(3) { animation: vent-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.35s forwards; }
.corrfacts-section.visible .corrfacts-stat:nth-child(4) { animation: vent-enter 0.6s cubic-bezier(0.22,1,0.36,1) 0.45s forwards; }
.corrfacts-section.visible .corrfacts-card:nth-child(1) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s forwards; }
.corrfacts-section.visible .corrfacts-card:nth-child(2) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s forwards; }
.corrfacts-section.visible .corrfacts-card:nth-child(3) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; }
.corrfacts-section.visible .corrfacts-card:nth-child(4) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.6s forwards; }
.corrfacts-section.visible .corrfacts-card:nth-child(5) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.7s forwards; }
.corrfacts-section.visible .corrfacts-card:nth-child(6) { animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.8s forwards; }
.corrfacts-section.visible .corrfacts-cta {
  animation: vent-enter 0.7s cubic-bezier(0.22,1,0.36,1) 0.9s forwards;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .corrfacts-stats { grid-template-columns: repeat(2, 1fr); }
  .corrfacts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .corrfacts-section { padding: 4rem 1rem; }
  .corrfacts-header h2 { font-size: 1.6rem; }
  .corrfacts-header p { font-size: 0.92rem; }
  .corrfacts-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .corrfacts-stat { padding: 1.5rem 0.8rem; }
  .corrfacts-stat-number { font-size: 2rem; }
  .corrfacts-grid { grid-template-columns: 1fr; }
  .corrfacts-card-front { padding: 1rem 1.2rem; }
  .corrfacts-cta p { font-size: 1rem; }
  .corrfacts-cta-btn { padding: 0.8rem 2rem; font-size: 0.9rem; }
}


/* ===== BANDTÄCKNING BENEFITS SECTION ===== */
.bandtackning-benefits-section {
  padding: 6rem 1.5rem;
  background: #ffffff;
}

.benefits-header {
  text-align: center;
  margin-bottom: 4.5rem;
  position: relative;
}

.benefits-header::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #0088cc, #00d9ff, #0088cc, transparent);
  border-radius: 2px;
}

.benefits-header .section-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  color: #111111;
  margin-bottom: 1.2rem;
  letter-spacing: -0.5px;
}

.benefits-header .section-sub {
  font-size: 1.05rem;
  color: #5a5a5a;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 400;
}

/* BENEFITS GRID - TOP SECTION */
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 3.5rem;
}

.benefits-image-section {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.benefits-image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.benefits-image-section:hover img {
  transform: scale(1.03);
}

.benefits-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,136,204,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Animated divider line between image and text */
.benefits-divider-line {
  width: 2px;
  margin: 2rem 2rem;
  background: linear-gradient(180deg, transparent, #0088cc, #00d9ff, #0088cc, transparent);
  border-radius: 2px;
  position: relative;
}

.benefits-divider-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 4px;
  height: 30px;
  background: #00d9ff;
  border-radius: 4px;
  animation: dividerPulse 3s ease-in-out infinite;
}

@keyframes dividerPulse {
  0%, 100% { top: 10%; opacity: 0.6; }
  50% { top: 70%; opacity: 1; }
}

.benefits-content-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  padding: 1rem 0;
}

.benefit-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.5rem 1.5rem;
  border-radius: 14px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.benefit-item:hover {
  background: rgba(0, 136, 204, 0.04);
  box-shadow: 0 0 0 1px rgba(0, 136, 204, 0.08), 0 8px 25px rgba(0, 136, 204, 0.06);
}

.benefit-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #111;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: background 0.3s ease;
}

.benefit-item:hover .benefit-num {
  background: #0088cc;
}

.benefit-item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.2px;
}

.benefit-item p {
  font-size: 0.88rem;
  color: #666;
  line-height: 1.55;
  margin: 0;
}

/* BENEFITS BOTTOM - HORIZONTAL ICON CARDS */
.benefits-bottom-section {
  text-align: center;
}

.benefits-bottom-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0088cc;
  margin: 0 0 1.5rem 0;
}

.expectations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.expectation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.4rem 1.2rem;
  background: #f8f9fa;
  border-radius: 14px;
  min-width: 130px;
  flex: 1;
  max-width: 170px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  cursor: default;
}

.expectation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 136, 204, 0.1);
  background: #fff;
}

.expectation-card svg {
  width: 28px;
  height: 28px;
  stroke: #0088cc;
  flex-shrink: 0;
}

.expectation-card span {
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
  text-align: center;
  line-height: 1.35;
}

/* ===== BEFORE & AFTER REVEAL ===== */
.ba-reveal-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 6rem 1.5rem;
  background: #fff;
  text-align: center;
}

.ba-reveal-text {
  margin-bottom: 3rem;
}

.ba-reveal-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0088cc;
  margin-bottom: 1rem;
}

.ba-reveal-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #111;
  line-height: 1.15;
  letter-spacing: -1px;
}

.ba-reveal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 800px;
}

.ba-reveal-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}

.ba-reveal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-img-before {
  z-index: 1;
}

.ba-img-after {
  z-index: 0;
}

/* Reveal animation – "före" fades + scales out to show "efter" */
.ba-reveal-card.revealed .ba-img-before {
  animation: revealOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ba-reveal-card.revealed .ba-img-after {
  animation: revealIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Unrevealing – "före" comes back */
.ba-reveal-card.unrevealing .ba-img-before {
  animation: unrevealIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ba-reveal-card.unrevealing .ba-img-after {
  animation: unrevealOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes revealOut {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.6; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes revealIn {
  0%   { opacity: 0; transform: scale(0.96); }
  50%  { opacity: 0.5; }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes unrevealIn {
  0%   { opacity: 0; transform: scale(1.06); }
  50%  { opacity: 0.5; }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes unrevealOut {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.6; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* Overlay tag */
.ba-reveal-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
}

.ba-reveal-tag {
  display: inline-block;
  padding: 0.35rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  transition: background 0.4s ease;
}

.ba-reveal-card.revealed .ba-reveal-tag {
  background: rgba(0,136,204,0.75);
}

/* Button */
.ba-reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 2rem;
  background: #111;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.ba-reveal-btn:hover {
  background: #0088cc;
  transform: translateY(-1px);
}

.ba-btn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0088cc;
  transition: background 0.3s ease;
}

.ba-reveal-btn:hover .ba-btn-dot {
  background: #fff;
}

.ba-tap-hint {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.2rem;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
  animation: hintPulse 2s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.5; }
}

/* ===== COMPARISON SECTION ===== */
.compare-section {
  padding: 6rem 1.5rem;
  background: #fff;
}

.compare-container {
  max-width: 900px;
  margin: 0 auto;
}

.compare-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.compare-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0088cc;
  margin-bottom: 0.8rem;
}

.compare-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #111;
  letter-spacing: -0.5px;
  margin-bottom: 0.6rem;
}

.compare-subtitle {
  font-size: 1rem;
  color: #666;
  font-weight: 400;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Table */
.compare-table {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.25s ease;
  position: relative;
}

.compare-row:last-child {
  border-bottom: none;
}

.compare-row:not(.compare-row-header):hover {
  background: #f0f7ff;
}

/* Blur unrevealed values */
.compare-row:not(.compare-row-header):not(.revealed) .compare-cell-band,
.compare-row:not(.compare-row-header):not(.revealed) .compare-cell-pann {
  filter: blur(4px);
  transition: filter 0.4s ease;
}

.compare-row.revealed .compare-cell-band,
.compare-row.revealed .compare-cell-pann {
  filter: blur(0);
  transition: filter 0.5s ease;
}

/* Already revealed = no pointer */
.compare-row.revealed {
  cursor: default;
}

.compare-row-header {
  background: #0088cc;
  cursor: default;
}

.compare-row-header .compare-cell {
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1rem 1.2rem;
}

.compare-cell {
  padding: 1.1rem 1.2rem;
  font-size: 0.92rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.compare-cell-prop {
  font-weight: 600;
  color: #111;
  gap: 0.7rem;
}

.compare-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #0088cc;
}

.compare-value {
  font-weight: 500;
}

/* Insight row (hidden by default, slides down on reveal) */
.compare-insight {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  padding: 0 1.2rem;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.6;
  background: #f7fbff;
  border-top: 1px solid transparent;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.5s ease,
              border-color 0.3s ease;
}

.compare-row.revealed .compare-insight {
  max-height: 80px;
  padding: 0.8rem 1.2rem;
  border-top: 1px solid #e8f0fe;
}

/* Subtle edge highlight on reveal */
.compare-row.revealed.edge-band .compare-cell-band {
  background: rgba(0, 136, 204, 0.05);
}

.compare-row.revealed.edge-pann .compare-cell-pann {
  background: rgba(0, 136, 204, 0.05);
}

/* Click hint on unrevealed rows */
.compare-row:not(.compare-row-header):not(.revealed)::after {
  content: 'visa';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #bbb;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.compare-row:not(.compare-row-header):not(.revealed):hover::after {
  opacity: 1;
}

/* Verdict */
.compare-verdict {
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  background: #fff;
  border-radius: 16px;
  transition: all 0.5s ease;
}

.compare-verdict-text {
  font-size: 0.95rem;
  color: #888;
  font-weight: 500;
  transition: color 0.3s ease;
}

.compare-verdict.complete {
  background: linear-gradient(135deg, #0088cc, #006da3);
  box-shadow: 0 4px 30px rgba(0, 136, 204, 0.15);
}

.compare-verdict.complete .compare-verdict-text {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.6;
}

/* Tip CTA */
.compare-tip {
  text-align: center;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.compare-tip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.compare-tip p {
  font-size: 0.9rem;
  color: #666;
}

.compare-tip a {
  color: #0088cc;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.compare-tip a:hover {
  border-bottom-color: #0088cc;
}

/* Responsive */
@media (max-width: 640px) {
  .compare-section {
    padding: 4rem 1rem;
  }

  .compare-row {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .compare-cell {
    padding: 0.9rem 0.7rem;
    font-size: 0.82rem;
  }

  .compare-row-header .compare-cell {
    font-size: 0.65rem;
    padding: 0.8rem 0.7rem;
  }

  .compare-icon {
    width: 16px;
    height: 16px;
  }

  .compare-cell-prop {
    gap: 0.4rem;
  }

  .compare-insight {
    font-size: 0.8rem;
  }

  .compare-row.revealed .compare-insight {
    max-height: 100px;
  }

  .compare-row:not(.compare-row-header):not(.revealed)::after {
    display: none;
  }
}

/* ===== ALLT INGÃ…R SECTION ===== */
.included-section {
  padding: 6rem 1.5rem;
  background: #fff;
}

.included-container {
  max-width: 1000px;
  margin: 0 auto;
}

.included-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.included-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0088cc;
  margin-bottom: 0.8rem;
}

.included-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #111;
  letter-spacing: -0.5px;
  margin-bottom: 0.8rem;
}

.included-subtitle {
  font-size: 1rem;
  color: #666;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Cards grid */
.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 3rem;
}

.included-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 1.6rem;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
  border: 1px solid rgba(0,0,0,0.04);
  cursor: default;
}

.included-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0088cc, #00d9ff);
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.included-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 136, 204, 0.1);
}

.included-card:hover::before {
  opacity: 1;
}

.included-card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(0,136,204,0.08), rgba(0,217,255,0.08));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: background 0.3s ease;
}

.included-card:hover .included-card-icon {
  background: linear-gradient(135deg, rgba(0,136,204,0.15), rgba(0,217,255,0.15));
}

.included-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: #0088cc;
}

.included-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.2px;
}

.included-card p {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Trust strip */
.included-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,136,204,0.1);
}

.included-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.included-trust-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0088cc;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.included-trust-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.included-trust-divider {
  width: 1px;
  height: 36px;
  background: rgba(0,0,0,0.08);
}

/* ===== BANDTACKNING CTA ===== */
.band-cta {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.band-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: transform 0.6s ease;
}

.band-cta:hover .band-cta-bg {
  transform: scale(1.03);
}

.band-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,30,50,0.55), rgba(0,80,140,0.45));
}

.band-cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 1.5rem;
  max-width: 600px;
}

.band-cta-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #00d9ff;
  margin-bottom: 1rem;
}

.band-cta-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.band-cta-text {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.band-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.4rem;
  background: #fff;
  color: #0088cc;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.band-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 35px rgba(0,0,0,0.25);
  background: #0088cc;
  color: #fff;
}

.band-cta-btn svg {
  transition: transform 0.3s ease;
}

.band-cta-btn:hover svg {
  transform: translateX(4px);
}

/* ===== PAPPTAK WHY SECTION ===== */

/* Chevron Layout */
.why-chevron { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto 5rem; }
.why-chevron-1 { grid-template-columns: 1fr 1fr; }
.why-chevron-2 { grid-template-columns: 1fr 1fr; }

.why-chevron-image { position: relative; border-radius: 16px; overflow: hidden; height: 400px; box-shadow: 0 12px 32px rgba(0,136,204,0.15); }
.why-chevron-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.why-chevron:hover .why-chevron-image img { transform: scale(1.05); }

/* Benefits Column */
.why-chevron-content { display: flex; align-items: center; }
.why-chevron-benefits { display: flex; flex-direction: column; gap: 2rem; }

.why-benefit-item { display: flex; gap: 1.5rem; align-items: flex-start; }
.why-benefit-icon { flex-shrink: 0; width: 64px; height: 64px; background: linear-gradient(135deg, rgba(0,136,204,0.1), rgba(0,217,255,0.05)); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.why-benefit-icon svg { width: 40px; height: 40px; }

.why-benefit-text h3 { font-size: 1.15rem; font-weight: 700; color: #111111; margin-bottom: 0.6rem; }
.why-benefit-text p { font-size: 0.95rem; color: #5a5a5a; line-height: 1.6; }

/* Responsive Tablet */
@media (max-width: 1024px) {
  .papptak-why-section { padding: 4rem 1rem; }
  .why-header { margin-bottom: 3rem; }
  .why-header::before { width: 70px; top: -1.5rem; }
  .why-header .section-title { font-size: 2.3rem; margin-bottom: 1rem; }
  .why-header .section-sub { font-size: 1rem; }
  .why-chevron { gap: 2.5rem; margin-bottom: 4rem; }
  .why-chevron-image { height: 350px; }
  .why-benefit-item { gap: 1.2rem; }
  .why-benefit-icon { width: 56px; height: 56px; }
  .why-benefit-icon svg { width: 36px; height: 36px; }
  .why-benefit-text h3 { font-size: 1.05rem; }
  .why-benefit-text p { font-size: 0.9rem; }
  .why-chevron-benefits { gap: 1.5rem; }
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .papptak-why-section { padding: 3rem 0.8rem; }
  .why-header { margin-bottom: 2.5rem; }
  .why-header::before { width: 60px; top: -1.2rem; height: 3px; }
  .why-header .section-title { font-size: 2rem; margin-bottom: 0.8rem; letter-spacing: -0.3px; }
  .why-header .section-sub { font-size: 0.95rem; line-height: 1.7; }
  .why-chevron { gap: 1.5rem; margin-bottom: 3rem; }
  .why-chevron-image { height: 300px; }
  .why-benefit-item { gap: 0.9rem; }
  .why-benefit-icon { width: 52px; height: 52px; }
  .why-benefit-icon svg { width: 32px; height: 32px; }
  .why-benefit-text h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
  .why-benefit-text p { font-size: 0.85rem; }
  .why-chevron-benefits { gap: 1.2rem; }
}

/* Responsive Small Mobile */
@media (max-width: 600px) {
  .papptak-why-section { padding: 2.5rem 0.7rem; }
  .why-header { margin-bottom: 2rem; }
  .why-header::before { width: 50px; top: -1rem; height: 2px; }
  .why-header .section-title { font-size: 1.7rem; margin-bottom: 0.6rem; letter-spacing: -0.2px; }
  .why-header .section-sub { font-size: 0.85rem; line-height: 1.6; }
  .why-header .section-sub::after { width: 50px; height: 2px; margin: 1rem auto 0; }
  .why-chevron { gap: 1rem; margin-bottom: 2.5rem; }
  .why-chevron-image { height: 250px; border-radius: 12px; }
  .why-benefit-item { gap: 0.8rem; }
  .why-benefit-icon { width: 48px; height: 48px; }
  .why-benefit-icon svg { width: 28px; height: 28px; }
  .why-benefit-text h3 { font-size: 0.9rem; margin-bottom: 0.3rem; }
  .why-benefit-text p { font-size: 0.8rem; line-height: 1.4; }
  .why-chevron-benefits { gap: 1rem; }
}

/* ===== PAPPTAK MATERIALS SECTION ===== */
.papptak-materials-section { padding: 5rem 1.5rem; background: #ffffff; }
.materials-header { text-align: center; margin-bottom: 4rem; position: relative; }
.materials-header::before { content: ''; position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #0088cc, #00d9ff, #0088cc, transparent); border-radius: 2px; }
.materials-header .section-title { font-size: 2.8rem; font-weight: 800; color: #111111; margin-bottom: 1.2rem; letter-spacing: -0.5px; background: linear-gradient(135deg, #0088cc 0%, #111111 50%, #00d9ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.materials-header .section-sub { font-size: 1.1rem; color: #5a5a5a; max-width: 650px; margin: 0 auto; line-height: 1.8; font-weight: 500; }
.materials-header .section-sub::after { content: ''; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, #0088cc, #00d9ff); margin: 1.5rem auto 0; border-radius: 2px; }

.materials-selector { max-width: 1200px; margin: 0 auto; }
.materials-buttons { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; }
.material-btn { padding: 1rem 2rem; border: 2px solid #dddddd; background: #ffffff; border-radius: 12px; font-size: 1rem; font-weight: 600; color: #5a5a5a; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.material-btn:hover { border-color: #0088cc; color: #0088cc; }
.material-btn.active { background: #0088cc; color: #ffffff; border-color: #0088cc; box-shadow: 0 8px 24px rgba(0, 136, 204, 0.25); }

.materials-content { max-width: 1200px; margin: 0 auto; }
.material-item { display: none; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; animation: fadeIn 0.4s ease-in-out; }
.material-item.active { display: grid; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.material-image { border-radius: 16px; overflow: hidden; height: 400px; box-shadow: 0 12px 32px rgba(0,136,204,0.15); }
.material-image img { width: 100%; height: 100%; object-fit: cover; }

.material-description h3 { font-size: 1.8rem; font-weight: 800; color: #111111; margin-bottom: 1rem; }
.material-description p { font-size: 1rem; color: #5a5a5a; line-height: 1.8; margin-bottom: 1.5rem; }
.material-description strong { color: #0088cc; font-weight: 700; }

.material-benefits { list-style: none; margin-bottom: 1.5rem; }
.material-benefits li { padding: 0.7rem 0 0.7rem 2rem; position: relative; font-size: 0.95rem; color: #5a5a5a; line-height: 1.6; }
.material-benefits li::before { content: '✓'; position: absolute; left: 0; color: #0088cc; font-weight: 800; font-size: 1.1rem; }

/* Responsive Tablet */
@media (max-width: 1024px) {
  .papptak-materials-section { padding: 4rem 1rem; }
  .materials-header { margin-bottom: 3rem; }
  .materials-header .section-title { font-size: 2.3rem; }
  .materials-buttons { gap: 1rem; }
  .material-btn { padding: 0.8rem 1.5rem; font-size: 0.95rem; }
  .materials-content { gap: 2.5rem; }
  .material-image { height: 350px; }
  .material-description h3 { font-size: 1.5rem; }
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .papptak-materials-section { padding: 3rem 0.8rem; }
  .materials-header { margin-bottom: 2.5rem; }
  .materials-header .section-title { font-size: 2rem; }
  .materials-buttons { gap: 0.8rem; flex-direction: column; }
  .material-btn { width: 100%; padding: 0.9rem 1.5rem; font-size: 0.9rem; }
  .materials-content { grid-template-columns: 1fr; gap: 2rem; }
  .material-image { height: 300px; }
  .material-description h3 { font-size: 1.3rem; }
  .material-description p { font-size: 0.95rem; }
  .material-benefits li { font-size: 0.9rem; padding: 0.6rem 0 0.6rem 1.8rem; }
}

/* Responsive Small Mobile */
@media (max-width: 600px) {
  .papptak-materials-section { padding: 2.5rem 0.7rem; }
  .materials-header { margin-bottom: 2rem; }
  .materials-header .section-title { font-size: 1.7rem; }
  .materials-buttons { gap: 0.6rem; }
  .material-btn { padding: 0.7rem 1.2rem; font-size: 0.85rem; }
  .material-image { height: 250px; }
  .material-description h3 { font-size: 1.1rem; margin-bottom: 0.8rem; }
  .material-description p { font-size: 0.9rem; margin-bottom: 1rem; }
  .material-benefits li { font-size: 0.85rem; padding: 0.5rem 0 0.5rem 1.6rem; }
}

/* ===== PAPPTAK TRANSFORMATION SECTION ===== */
.papptak-transformation-section { padding: 4rem 1.5rem; background: #ffffff; }
.transformation-header { text-align: center; margin-bottom: 3rem; position: relative; }
.transformation-header::before { content: ''; position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #0088cc, #00d9ff, #0088cc, transparent); border-radius: 2px; }
.transformation-header .section-title { font-size: 2.8rem; font-weight: 800; color: #111111; margin-bottom: 0.8rem; letter-spacing: -0.5px; background: linear-gradient(135deg, #0088cc 0%, #111111 50%, #00d9ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.transformation-header .section-sub { font-size: 1rem; color: #5a5a5a; max-width: 550px; margin: 0 auto; font-weight: 500; }

/* Showcase */
.transformation-showcase { display: flex; gap: 2rem; align-items: center; justify-content: center; max-width: 1000px; margin: 0 auto 2.5rem; flex-wrap: nowrap; }

.transformation-before,
.transformation-after { flex: 1; text-align: center; min-width: 0; }

.transformation-img { width: 100%; height: 320px; object-fit: cover; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.15); margin-bottom: 1rem; }

.transformation-label { display: inline-block; padding: 0.5rem 1.2rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.8rem; }
.transformation-before .transformation-label { background: rgba(255,107,107,0.15); color: #d32f2f; }
.transformation-after .transformation-label { background: rgba(0,136,204,0.15); color: #0088cc; }

.transformation-before p,
.transformation-after p { font-size: 0.9rem; color: #5a5a5a; font-weight: 500; }

.transformation-arrow { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: linear-gradient(135deg, rgba(0,136,204,0.1), rgba(0,217,255,0.05)); border-radius: 12px; color: #0088cc; flex-shrink: 0; }
.transformation-arrow svg { width: 32px; height: 32px; }

/* CTA */
.transformation-cta { text-align: center; padding: 2rem; background: linear-gradient(135deg, rgba(0,136,204,0.08), rgba(0,217,255,0.05)); border-radius: 12px; border: 1px solid rgba(0,136,204,0.15); }
.transformation-cta p { font-size: 1rem; color: #111111; font-weight: 500; margin-bottom: 1.2rem; }
.transformation-cta .btn-primary { display: inline-block; }

/* Info */
.transformation-info { text-align: center; padding: 2rem; background: linear-gradient(135deg, rgba(0,136,204,0.05), rgba(0,217,255,0.03)); border-radius: 12px; border: 1px solid rgba(0,136,204,0.1); }
.transformation-info p { font-size: 0.95rem; color: #5a5a5a; line-height: 1.8; max-width: 800px; margin: 0 auto; }

/* Responsive Tablet */
@media (max-width: 1024px) {
  .papptak-transformation-section { padding: 3rem 1rem; }
  .transformation-header { margin-bottom: 2.5rem; }
  .transformation-header .section-title { font-size: 2.2rem; }
  .transformation-img { height: 280px; }
  .transformation-showcase { gap: 1.5rem; }
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .papptak-transformation-section { padding: 2.5rem 0.8rem; }
  .transformation-header { margin-bottom: 2rem; }
  .transformation-header .section-title { font-size: 1.8rem; }
  .transformation-header .section-sub { font-size: 0.95rem; }
  .transformation-showcase { gap: 1rem; }
  .transformation-img { height: 220px; }
  .transformation-arrow { width: 50px; height: 50px; }
  .transformation-arrow svg { width: 28px; height: 28px; }
  .transformation-label { padding: 0.4rem 1rem; font-size: 0.75rem; }
  .transformation-before p,
  .transformation-after p { font-size: 0.85rem; }
  .transformation-info { padding: 1.5rem; }
  .transformation-info p { font-size: 0.9rem; }
}

/* Responsive Small Mobile */
@media (max-width: 600px) {
  .papptak-transformation-section { padding: 2rem 0.7rem; }
  .transformation-header { margin-bottom: 1.5rem; }
  .transformation-header .section-title { font-size: 1.5rem; }
  .transformation-header .section-sub { font-size: 0.9rem; }
  .transformation-showcase { gap: 0.8rem; }
  .transformation-img { height: 180px; }
  .transformation-arrow { width: 45px; height: 45px; }
  .transformation-arrow svg { width: 24px; height: 24px; }
  .transformation-label { padding: 0.35rem 0.8rem; font-size: 0.7rem; margin-bottom: 0.6rem; }
  .transformation-before p,
  .transformation-after p { font-size: 0.8rem; }
  .transformation-info { padding: 1rem; }
  .transformation-info p { font-size: 0.85rem; line-height: 1.6; }
}

.scroll-indicator {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  z-index: 10;
}
.scroll-indicator-text {
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  writing-mode: horizontal-tb;
  transform: none;
  line-height: 1.2;
  white-space: nowrap;
  animation: fadeInText 0.8s ease 0.6s forwards;
  opacity: 0;
}
@keyframes fadeInText { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.scroll-line {
  width: 2px;
  height: 50px;
  position: relative;
  border-radius: 1px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #19A8FF, transparent);
  animation: scrollLineMove 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scrollLineMove {
  0%   { top: -100%; opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 100%; opacity: 1; }
  60%  { opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

/* ===== TAKTYPE CARDS SECTION ===== */
.taktyper-section { padding: 6rem 1.5rem; background: var(--bg); }
.taktyper-section .section-title { font-size: 2.8rem; font-weight: 800; letter-spacing: -1px; text-align: center; margin-bottom: 1.2rem; }
.taktyper-section .section-sub { text-align: center; margin: 0 auto 4.5rem; }
.taktyper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1200px; margin: 0 auto; }
.taktype-card { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid rgba(25,168,255,0.12); box-shadow: 0 12px 36px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); text-decoration: none; cursor: pointer; position: relative; opacity: 0; animation: slideUp 0.6s ease-out forwards; }
.taktype-card:nth-child(1) { animation-delay: 0.1s; }
.taktype-card:nth-child(2) { animation-delay: 0.2s; }
.taktype-card:nth-child(3) { animation-delay: 0.3s; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.taktype-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), #0088CC); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); z-index: 10; }
.taktype-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(25,168,255,0.18), 0 0 30px rgba(25,168,255,0.1); border-color: rgba(25,168,255,0.3); }
.taktype-card:hover::before { transform: scaleX(1); }
.taktype-image { position: relative; width: 100%; height: 240px; overflow: hidden; background: linear-gradient(135deg, var(--bg-soft), #f0f5ff); }
.taktype-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.taktype-card:hover .taktype-image img { transform: scale(1.08) translateY(-8px); }
.taktype-content { display: flex; flex-direction: column; gap: 1rem; padding: 2.2rem 2rem; flex: 1; }
.taktype-content h3 { font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -0.5px; }
.taktype-content p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.6; margin: 0; flex: 1; }
.taktype-cta { font-size: 0.9rem; color: var(--blue); font-weight: 700; letter-spacing: -0.2px; transition: all 0.3s; margin-top: 0.5rem; }
.taktype-card:hover .taktype-cta { color: var(--blue-dark); transform: translateX(6px); }

/* ===== BUTTONS ===== */
.btn-primary, .btn-ghost { padding: 0.65rem 1.3rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: all 0.18s; text-align: center; display: inline-block; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); position: relative; overflow: hidden; }
.btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: buttonShine 2s infinite; }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.btn-primary.btn-large { padding: 1.2rem 2.5rem; font-size: 1.05rem; font-weight: 700; }
@keyframes buttonShine { 0% { left: -100%; } 100% { left: 100%; } }
.btn-ghost { background: rgba(255,255,255,0.95); color: var(--text); }
.btn-ghost:hover { background: #FFF; }

/* Calculator CTA button */
.btn-calc {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--blue);
  background: rgba(25,168,255,0.12);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  animation: calcPulse 3s ease-in-out infinite;
}
.btn-calc svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}
.btn-calc:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(25,168,255,0.35);
}
.btn-calc:hover svg { transform: rotate(12deg) scale(1.15); }
@keyframes calcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25,168,255,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(25,168,255,0); }
}
.btn-calc-cta {
  display: inline-flex !important;
  animation: calcPulse 3s ease-in-out infinite;
}
.band-cta-content .btn-calc-cta,
.cta-ferotect-content .btn-calc-cta,
.takpannor-cta-content .btn-calc-cta,
.solar-cta-final-content .btn-calc-cta {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.band-cta-content .btn-calc-cta:hover,
.cta-ferotect-content .btn-calc-cta:hover,
.takpannor-cta-content .btn-calc-cta:hover,
.solar-cta-final-content .btn-calc-cta:hover {
  background: var(--blue);
  border-color: var(--blue);
}

/* ===== STATS ===== */
.stats-section {
  background: linear-gradient(135deg, rgba(42,54,72,0.45), rgba(42,54,72,0.45)), url('Hero-v3.0.jpg') center/cover fixed;
  padding: 5rem 1.5rem;
  margin: 0 calc(-50vw + 50%);
  width: 100vw;
  padding-left: calc(1.5rem + (100vw - 100%) / 2);
  padding-right: calc(1.5rem + (100vw - 100%) / 2);
  z-index: 3;
}
#stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; padding-top: 1rem; border-top: 1px solid rgba(212,220,232,0.3); }
.stat-card { background: rgba(255,255,255,0.95); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; border: 1px solid rgba(212,220,232,0.8); transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.12); position: relative; overflow: hidden; backdrop-filter: blur(8px); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), #0088CC); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.stat-card.animate-fill::before { transform: scaleX(1); }
.stat-card:hover { border-color: var(--blue); box-shadow: 0 12px 28px rgba(25,168,255,0.12); transform: translateY(-6px); background: #fff; }
.stat-label { font-size: 0.8rem; color: var(--text-soft); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; }
.stat-number { font-size: 3.2rem; font-weight: 700; color: var(--blue); letter-spacing: -1px; }

/* ===== SERVICES ===== */
#services-showcase { 
  padding: 6rem 1.5rem; 
  background: var(--bg);
  position: relative;
}

#services-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25,168,255,0.15), transparent);
}

.services-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.services-header {
  text-align: center;
  margin-bottom: 4.5rem;
  animation: fadeInDown 0.6s ease-out forwards;
}

#services-showcase .section-title {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -1px;
  text-align: center;
  margin-bottom: 1.2rem;
  color: var(--text);
}

#services-showcase .section-title .highlight {
  background: linear-gradient(135deg, var(--blue) 0%, #0088CC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  animation: fadeInUp 0.7s ease-out 0.2s forwards;
  opacity: 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(25,168,255,0.12);
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  opacity: 0;
  animation: slideUp 0.6s ease-out forwards;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), #0088CC);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 10;
}

.service-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(25,168,255,0.18), 0 0 30px rgba(25,168,255,0.1);
  border-color: rgba(25,168,255,0.3);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-image {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-soft), #f0f5ff);
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.service-card:hover .service-image img {
  transform: scale(1.08) translateY(-8px);
}

.service-card-takbyte img { object-position: center center; }
.service-card-fasad img { object-position: center 40%; }
.service-card-plats img { object-position: center 45%; }

.service-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.2rem 2rem;
  flex: 1;
}

.service-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.5px;
}

.service-content p {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.service-cta {
  font-size: 0.9rem;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: -0.2px;
  transition: all 0.3s;
  margin-top: 0.5rem;
}

.service-card:hover .service-cta {
  color: var(--blue-dark);
  transform: translateX(6px);
}

/* ===== TABLET & RESPONSIVE ===== */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .service-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    border-radius: 14px;
  }
  .service-image {
    height: 100%;
    min-height: 120px;
    border-radius: 14px 0 0 14px;
  }
  .service-content {
    padding: 1.2rem 1.4rem;
    gap: 0.4rem;
  }
  .service-content h3 { font-size: 1.05rem; }
  .service-content p { font-size: 0.85rem; line-height: 1.5; }
  .service-card:hover { transform: none; }
  .service-card::before { display: none; }
}

/* ===== FORMS ===== */
form { display: grid; gap: 0.8rem; }
label { font-size: 0.85rem; font-weight: 500; }
input, textarea, select { width: 100%; margin-top: 0.25rem; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(25,168,255,0.15); }
textarea { resize: vertical; min-height: 120px; }

/* ===== CONTACT ===== */
#contact { background: linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0a1628 100%); margin: 0 calc(-50vw + 50%); width: 100vw; padding: 5rem calc(1.5rem + (100vw - 100%) / 2); margin-bottom: 0; border-bottom: none; border-top: 2px solid rgba(25,168,255,0.3); position: relative; overflow: hidden; }
#contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 20%, rgba(25,168,255,0.15), transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(25,168,255,0.1), transparent 50%); pointer-events: none; z-index: 1; }
#contact .section-title { color: #fff; font-size: 2.8rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -1px; position: relative; z-index: 2; }
#contact .section-sub { color: rgba(255,255,255,0.75); margin-bottom: 3.5rem; position: relative; z-index: 2; font-size: 1.05rem; line-height: 1.6; }
.contact-ferotect { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: stretch; position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }
.contact-form-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; padding: 3rem; position: relative; overflow: hidden; }
.contact-form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), #0088CC, var(--blue)); border-radius: 28px 28px 0 0; }
.contact-form-card h3 { color: #fff; font-size: 1.5rem; font-weight: 800; margin-bottom: 0.8rem; letter-spacing: -0.5px; }
.contact-form-card .form-subtitle { color: rgba(255,255,255,0.65); font-size: 0.9rem; margin-bottom: 2.5rem; line-height: 1.5; }
.form-calc-alt { text-align: center; margin-top: 1.2rem; font-size: 0.82rem; color: rgba(255,255,255,0.45); }
.form-calc-alt a { color: rgba(25,168,255,0.7); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; transition: color 0.2s; }
.form-calc-alt a:hover { color: var(--blue); }
.form-calc-alt svg { vertical-align: middle; }
.contact-form-card form { display: flex; flex-direction: column; gap: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-form-card label { color: rgba(255,255,255,0.92); font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-form-card input, .contact-form-card textarea, .contact-form-card select { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 1rem 1.1rem; color: #fff; font-size: 0.95rem; transition: all 0.3s; margin-top: 0; }
.contact-form-card input::placeholder, .contact-form-card textarea::placeholder { color: rgba(255,255,255,0.45); }
.contact-form-card input:focus, .contact-form-card textarea:focus, .contact-form-card select:focus { background: rgba(255,255,255,0.13); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(25,168,255,0.2); outline: none; }
.contact-form-card select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.contact-form-card select option { background: #1a2d4a; color: #fff; }
.contact-form-card textarea { min-height: 110px; resize: vertical; }
.form-field-hint {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}
.contact-form-card .btn-primary { width: 100%; padding: 1.1rem 2rem; font-size: 1.05rem; font-weight: 700; border-radius: 14px; margin-top: 0.8rem; background: linear-gradient(135deg, var(--blue), #0088CC); border: none; box-shadow: 0 10px 30px rgba(25,168,255,0.35); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); letter-spacing: -0.3px; }
.contact-form-card .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(25,168,255,0.45); }
.contact-image-side { position: relative; border-radius: 28px; overflow: hidden; min-height: 550px; display: block; box-shadow: 0 35px 80px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(25,168,255,0.12); }
.contact-image-side img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.contact-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,0.2), rgba(10,22,40,0.75)); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem; text-align: center; }
.contact-info-cards { display: flex; flex-direction: column; gap: 1.3rem; align-items: stretch; }
.contact-info-item { background: rgba(255,255,255,0.12); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.18); border-radius: 16px; padding: 1.4rem 1.6rem; display: flex; align-items: center; justify-content: center; gap: 1.2rem; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); cursor: pointer; text-decoration: none; }
.contact-info-item:hover { background: rgba(255,255,255,0.16); border-color: rgba(25,168,255,0.4); transform: translateX(10px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.contact-info-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), #0088CC); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 20px rgba(25,168,255,0.3); }
.contact-info-icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-info-text { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.contact-info-label { font-size: 0.72rem; color: rgba(255,255,255,0.65); text-transform: uppercase; font-weight: 650; letter-spacing: 0.04em; }
.contact-info-value { font-size: 1.05rem; color: #fff; font-weight: 700; letter-spacing: -0.3px; }
.contact-info-value a { color: #fff; transition: color 0.2s ease; }
.contact-info-value a:hover { color: var(--blue); }
.contact-trust-badge { margin-top: 2rem; padding: 1.3rem 1.6rem; background: rgba(25,168,255,0.2); border: 1px solid rgba(25,168,255,0.4); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.contact-trust-badge svg { width: 30px; height: 30px; stroke: var(--blue); flex-shrink: 0; }
.contact-trust-badge span { font-size: 0.88rem; color: rgba(255,255,255,0.92); text-align: center; }
.contact-trust-badge strong { color: #fff; font-weight: 750; }

/* ===== PROCESS SECTION ===== */
#process { background: linear-gradient(180deg, rgba(25,168,255,0.02) 0%, rgba(25,168,255,0.04) 50%, rgba(25,168,255,0.02) 100%); padding: 8rem 2rem 7rem; border-bottom: none; position: relative; }
#process::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(25,168,255,0.3), transparent); }
#process::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(25,168,255,0.2), transparent); }
.process-wrapper { max-width: 1176px; margin: 0 auto; width: 100%; padding: 0; }
.process-badge { display: none; }
.process-header { text-align: center; margin-bottom: 6rem; }
.process-eyebrow { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.2rem; opacity: 0; animation: fadeInDown 0.6s ease-out 0.1s forwards; }
.process-header .section-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 1.2rem; background: linear-gradient(135deg, var(--text) 0%, var(--text) 60%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; opacity: 0; animation: fadeInDown 0.7s ease-out 0.2s forwards; }
.process-header .section-sub { font-size: 1rem; color: var(--text-soft); max-width: 640px; margin: 0 auto; line-height: 1.85; font-weight: 500; letter-spacing: -0.3px; opacity: 0; animation: fadeInUp 0.7s ease-out 0.3s forwards; }
/* ===== PROCESS SECTION - FEROTECT TIMELINE ===== */
.process-section { position: relative; margin-top: 8rem; }

.process-wrapper { 
  max-width: 1200px; 
  margin: 0 auto; 
  width: 100%; 
  padding: 6rem 2rem;
}

.process-header { 
  text-align: center; 
  margin-bottom: 4.5rem;
}

.process-eyebrow { 
  display: block; 
  font-size: 0.75rem; 
  font-weight: 900; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--blue); 
  margin-bottom: 1.2rem; 
  opacity: 0; 
  animation: fadeInDown 0.6s ease-out 0.1s forwards; 
}

.process-header .section-title { 
  font-size: 2.2rem; 
  font-weight: 800; 
  letter-spacing: -1px; 
  margin-bottom: 1.2rem; 
  background: linear-gradient(135deg, var(--text) 0%, var(--text) 60%, var(--blue) 100%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
  line-height: 1.1; 
  opacity: 0; 
  animation: fadeInDown 0.7s ease-out 0.2s forwards; 
}

.process-header .section-sub { 
  font-size: 1.1rem; 
  color: var(--text-soft); 
  max-width: 620px; 
  margin: 0 auto; 
  line-height: 1.85; 
  font-weight: 500; 
  letter-spacing: -0.3px; 
  opacity: 0; 
  animation: fadeInUp 0.7s ease-out 0.3s forwards; 
}

/* Timeline Layout */
.process-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}

.process-timeline::before {
  content: '';
  position: absolute;
  left: 2.5%;
  top: 60px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue), rgba(25,168,255,0.2));
  z-index: 0;
}

.timeline-step {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  padding: 0 0 0 8%;
  animation: slideUpStagger 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;
  opacity: 0;
}

.timeline-step:nth-child(1) { animation-delay: 0.3s; }
.timeline-step:nth-child(2) { animation-delay: 0.4s; }
.timeline-step:nth-child(3) { animation-delay: 0.5s; }
.timeline-step:nth-child(4) { animation-delay: 0.6s; }
.timeline-step:nth-child(5) { animation-delay: 0.7s; }
.timeline-step:nth-child(6) { animation-delay: 0.8s; }

.step-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--blue), #0088CC);
  border: 4px solid var(--bg);
  border-radius: 50%;
  position: absolute;
  left: -8px;
  top: 28px;
  box-shadow: 0 0 0 6px rgba(25,168,255,0.1);
  transition: all 0.4s ease;
}

.timeline-step:hover .step-dot {
  width: 20px;
  height: 20px;
  left: -10px;
  top: 26px;
  box-shadow: 0 0 0 8px rgba(25,168,255,0.15), 0 4px 16px rgba(25,168,255,0.4);
}

.step-card {
  flex: 1;
  display: flex;
  gap: 1.8rem;
  padding: 2rem 2.2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  border: 1px solid rgba(25,168,255,0.14);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.timeline-step:hover .step-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  border-color: rgba(25,168,255,0.3);
  box-shadow: 0 16px 48px rgba(25,168,255,0.15), inset 0 1px 0 rgba(255,255,255,0.7);
  transform: translateY(-6px);
}

.timeline-step:hover .step-card::before {
  opacity: 1;
}

.step-card-final {
  background: linear-gradient(135deg, rgba(25,168,255,0.08), rgba(25,168,255,0.03));
  border-color: rgba(25,168,255,0.2);
}

.timeline-step:hover .step-card-final {
  background: linear-gradient(135deg, rgba(25,168,255,0.12), rgba(25,168,255,0.06));
  border-color: rgba(25,168,255,0.35);
}

.step-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(25,168,255,0.12), rgba(25,168,255,0.05));
  border: 1.5px solid rgba(25,168,255,0.25);
  border-radius: 12px;
  color: var(--blue);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-step:hover .step-icon {
  background: linear-gradient(135deg, var(--blue), #0088CC);
  color: #fff;
  border-color: var(--blue);
  transform: scale(1.15) rotateZ(-3deg);
  box-shadow: 0 12px 32px rgba(25,168,255,0.35);
}

.step-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

.step-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  justify-content: center;
}

.step-num {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}

.step-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

.step-description {
  font-size: 0.95rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.7;
  font-weight: 500;
}


/* Remove old step styling */
.step-item, .step-item-final { display: none; }
.step-footer { display: none; }
.step-connector { display: none; }
.step-background { display: none; }

@keyframes slideUpStagger {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RESPONSIVE: TABLET 1024px AND DOWN */
@media (max-width: 1024px) {
  .process-wrapper { 
    padding: 4rem 2rem;
  }

  .process-header .section-title { 
    font-size: 2.6rem; 
    margin-bottom: 1.2rem; 
  }

  .process-header .section-sub { 
    font-size: 1rem; 
    max-width: 540px; 
  }

  .process-timeline {
    gap: 2.2rem;
  }

  .process-timeline::before {
    left: 3%;
  }

  .timeline-step {
    gap: 2rem;
    padding: 0 0 0 9%;
  }

  .step-card {
    gap: 1.4rem;
    padding: 1.8rem 1.8rem;
    border-radius: 14px;
  }

  .step-icon {
    width: 54px;
    height: 54px;
  }

  .step-icon svg {
    width: 26px;
    height: 26px;
  }

  .step-title {
    font-size: 1.2rem;
  }

  .step-description {
    font-size: 0.9rem;
  }
}

/* RESPONSIVE: MID-TABLET 768px AND DOWN */
@media (max-width: 768px) {
  .process-wrapper { 
    padding: 3rem 1.8rem;
  }

  .process-header .section-title { 
    font-size: 2.2rem; 
    margin-bottom: 1rem; 
  }

  .process-header .section-sub { 
    font-size: 0.95rem; 
    max-width: 500px; 
  }

  .process-timeline {
    gap: 1.8rem;
  }

  .process-timeline::before {
    left: 3.5%;
    top: 50px;
  }

  .timeline-step {
    gap: 1.6rem;
    padding: 0 0 0 10%;
  }

  .step-dot {
    width: 14px;
    height: 14px;
    top: 24px;
    left: -7px;
  }

  .timeline-step:hover .step-dot {
    width: 16px;
    height: 16px;
    left: -8px;
    top: 23px;
  }

  .step-card {
    gap: 1.2rem;
    padding: 1.5rem 1.5rem;
    border-radius: 12px;
  }

  .step-icon {
    width: 50px;
    height: 50px;
  }

  .step-icon svg {
    width: 24px;
    height: 24px;
  }

  .step-num {
    font-size: 0.7rem;
  }

  .step-title {
    font-size: 1.1rem;
  }

  .step-description {
    font-size: 0.85rem;
    line-height: 1.6;
  }
}

/* RESPONSIVE: MOBILE 600px AND DOWN */
@media (max-width: 600px) {
  .process-wrapper { 
    padding: 2.5rem 1.5rem;
  }

  .process-header {
    margin-bottom: 3rem;
  }

  .process-header .section-title { 
    font-size: 1.8rem; 
    margin-bottom: 0.8rem; 
  }

  .process-eyebrow {
    font-size: 0.7rem;
    margin-bottom: 0.8rem;
  }

  .process-header .section-sub { 
    font-size: 0.9rem; 
    max-width: 100%; 
    line-height: 1.7;
  }

  .process-timeline {
    gap: 1.4rem;
  }

  .process-timeline::before {
    left: 2.5%;
    top: 40px;
  }

  .timeline-step {
    gap: 1.2rem;
    padding: 0 0 0 11%;
    align-items: flex-start;
  }

  .step-dot {
    width: 12px;
    height: 12px;
    top: 20px;
    left: -6px;
  }

  .timeline-step:hover .step-dot {
    width: 14px;
    height: 14px;
    left: -7px;
    top: 19px;
  }

  .step-card {
    gap: 1rem;
    padding: 1.2rem 1.2rem;
    border-radius: 10px;
  }

  .step-icon {
    width: 46px;
    height: 46px;
  }

  .step-icon svg {
    width: 22px;
    height: 22px;
  }

  .step-num {
    font-size: 0.65rem;
  }

  .step-title {
    font-size: 1rem;
  }

  .step-description {
    font-size: 0.8rem;
    line-height: 1.55;
  }
}
.step-connector { display: none; }

/* ===== INTERACTIVE STEPPER ===== */
.stepper {
  max-width: 900px;
  margin: 0 auto;
}

.stepper-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.stepper-track {
  position: absolute;
  top: 24px;
  left: 40px;
  right: 40px;
  height: 3px;
  background: rgba(25,168,255,0.15);
  border-radius: 4px;
  z-index: 0;
}

.stepper-track-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), #00d4ff);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 12px rgba(25,168,255,0.4);
}

.stepper-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  padding: 0;
  transition: all 0.3s ease;
}

.stepper-dot-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 2.5px solid rgba(25,168,255,0.2);
  color: rgba(25,168,255,0.5);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}

.stepper-dot.is-active .stepper-dot-ring {
  background: linear-gradient(135deg, var(--blue), #0088CC);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(25,168,255,0.15), 0 8px 24px rgba(25,168,255,0.35);
  transform: scale(1.15);
}

.stepper-dot.is-done .stepper-dot-ring {
  background: linear-gradient(135deg, var(--blue), #00d4ff);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(25,168,255,0.25);
}

.stepper-dot:hover .stepper-dot-ring {
  border-color: var(--blue);
  color: var(--blue);
  transform: scale(1.1);
}

.stepper-dot.is-active:hover .stepper-dot-ring {
  transform: scale(1.2);
}

.stepper-dot-ring svg {
  width: 22px;
  height: 22px;
}

.stepper-dot-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  text-transform: uppercase;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.stepper-dot.is-active .stepper-dot-label,
.stepper-dot.is-done .stepper-dot-label {
  color: var(--blue);
}

.stepper-viewport {
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35));
  border: 1px solid rgba(25,168,255,0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 48px rgba(25,168,255,0.08);
  position: relative;
}

.stepper-viewport::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), #00d4ff, var(--blue));
  background-size: 200% 100%;
  animation: stepperShimmer 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes stepperShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.stepper-slider {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform;
}

.stepper-panel {
  min-width: 100%;
  padding: 3rem 3.5rem;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.stepper-panel.is-visible {
  opacity: 1;
  transform: scale(1);
}

.stepper-panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(25,168,255,0.12), rgba(25,168,255,0.04));
  border: 1.5px solid rgba(25,168,255,0.2);
  color: var(--blue);
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 1.2rem;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.stepper-panel.is-visible .stepper-panel-badge {
  background: linear-gradient(135deg, var(--blue), #0088CC);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 8px 20px rgba(25,168,255,0.3);
}

.stepper-panel h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem;
  letter-spacing: -0.5px;
}

.stepper-panel p {
  font-size: 1.05rem;
  color: var(--text-soft);
  line-height: 1.8;
  margin: 0;
  font-weight: 500;
  max-width: 600px;
}

.stepper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding: 0 0.5rem;
}

.stepper-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border: 1.5px solid rgba(25,168,255,0.2);
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter: blur(8px);
}

.stepper-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(25,168,255,0.3);
}

.stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.stepper-btn:disabled:hover {
  background: rgba(255,255,255,0.6);
  color: var(--blue);
  border-color: rgba(25,168,255,0.2);
}

.stepper-btn svg {
  width: 18px;
  height: 18px;
}

.stepper-counter {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-soft);
  letter-spacing: 0.05em;
}

.stepper-counter span {
  color: var(--blue);
}

/* Stepper Responsive */
@media (max-width: 768px) {
  .stepper-nav {
    padding: 0 0.5rem;
    margin-bottom: 2rem;
  }
  .stepper-dot-ring {
    width: 40px;
    height: 40px;
  }
  .stepper-dot-ring svg {
    width: 18px;
    height: 18px;
  }
  .stepper-dot-label {
    font-size: 0.6rem;
  }
  .stepper-track {
    top: 20px;
    left: 28px;
    right: 28px;
  }
  .stepper-panel {
    padding: 2rem 2rem;
  }
  .stepper-panel h3 {
    font-size: 1.3rem;
  }
  .stepper-panel p {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .stepper-nav {
    padding: 0;
    margin-bottom: 1.5rem;
  }
  .stepper-dot-ring {
    width: 34px;
    height: 34px;
  }
  .stepper-dot-ring svg {
    width: 16px;
    height: 16px;
  }
  .stepper-dot-label {
    font-size: 0.55rem;
    display: none;
  }
  .stepper-track {
    top: 17px;
    left: 20px;
    right: 20px;
  }
  .stepper-panel {
    padding: 1.8rem 1.5rem;
  }
  .stepper-panel-badge {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .stepper-panel h3 {
    font-size: 1.15rem;
  }
  .stepper-panel p {
    font-size: 0.88rem;
    line-height: 1.7;
  }
  .stepper-btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.82rem;
  }
}

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUpStagger { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.step-item { animation: slideUpStagger 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; opacity: 0; }
.step-item:nth-child(1) { animation-delay: 0.15s; }
.step-item:nth-child(2) { animation-delay: 0.25s; }
.step-item:nth-child(3) { animation-delay: 0.35s; }
.step-item:nth-child(4) { animation-delay: 0.45s; }
.step-item:nth-child(5) { animation-delay: 0.55s; }
.contact-cta-container { text-align: center; padding: 8rem 2rem; background: linear-gradient(135deg, rgba(25,168,255,0.05), rgba(25,168,255,0.02)); border-radius: 24px; margin: 4rem auto; max-width: 800px; }
.contact-cta-container .section-title { font-size: 2.5rem; margin-bottom: 1.2rem; }
.contact-cta-container .section-sub { margin-bottom: 3rem; font-size: 1.05rem; }

#contact-cta { position: relative; background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)), url('bokahembesok.jpg'); background-size: cover; background-position: center; background-attachment: fixed; padding: 0; margin: 0 calc(-50vw + 50%); width: 100vw; overflow: hidden; }

#contact-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(25,168,255,0.08) 0%, rgba(25,168,255,0.04) 100%); pointer-events: none; z-index: 1; }

.cta-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); z-index: 1; }

.contact-cta-container { position: relative; z-index: 2; text-align: center; padding: 7rem 2rem; display: flex; align-items: center; justify-content: center; min-height: 500px; }

.cta-content { max-width: 700px; }

.contact-cta-container .section-title { font-size: 3.5rem; margin-bottom: 1.5rem; color: #ffffff; font-weight: 800; letter-spacing: -1.5px; line-height: 1.15; text-shadow: 0 4px 20px rgba(0,0,0,0.4); }

.contact-cta-container .section-sub { margin-bottom: 3rem; font-size: 1.25rem; color: rgba(255,255,255,0.95); line-height: 1.8; font-weight: 400; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }

.contact-cta-container .btn-primary { padding: 1.3rem 3.2rem; font-size: 1.05rem; font-weight: 700; background: linear-gradient(135deg, var(--blue) 0%, #0088CC 100%); box-shadow: 0 12px 40px rgba(25,168,255,0.35), 0 0 30px rgba(25,168,255,0.25); border: 1px solid rgba(255,255,255,0.15); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); color: #fff; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 0.5px; }

.contact-cta-container .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); animation: buttonShine 2.5s infinite; z-index: 0; }

.contact-cta-container .btn-primary span { position: relative; z-index: 1; }

.contact-cta-container .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(25,168,255,0.45), 0 0 40px rgba(25,168,255,0.35); }
.contact-cta-container .btn-primary:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 30px 70px rgba(25,168,255,0.55), 0 0 60px rgba(25,168,255,0.4); border-color: rgba(255,255,255,0.4); }

/* ===== FOOTER ===== */
#footer { background: linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0a1628 100%); color: #fff; padding: 5rem calc(1.5rem + (100vw - 100%) / 2) 2rem; margin: 0 calc(-50vw + 50%); width: 100vw; margin-top: 0; border-top: 2px solid rgba(25,168,255,0.3); position: relative; overflow: hidden; }
#footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(25,168,255,0.08), transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(25,168,255,0.06), transparent 50%); pointer-events: none; z-index: 1; }
.footer-content { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; margin-bottom: 3.5rem; }
.footer-block h3, .footer-block h4 { color: #fff; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -0.5px; }
.footer-block h3 { font-size: 1.6rem; }
.footer-block h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 750; }
.footer-logo-img { height: 30px; width: auto; margin: -26px 0 -3px -3px; display: block; }
.footer-tagline { color: rgba(255,255,255,0.75); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; }
.footer-social { display: flex; gap: 1.2rem; }
.social-link { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), #0088CC); display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 6px 16px rgba(25,168,255,0.25); }
.social-link:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(25,168,255,0.35); }
.social-link svg { width: 20px; height: 20px; stroke: #fff; }
.footer-info-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; padding: 1rem; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(25,168,255,0.1); transition: all 0.3s; cursor: pointer; text-decoration: none; }
.footer-info-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(25,168,255,0.2); }
.footer-info-item svg { width: 24px; height: 24px; stroke: var(--blue); flex-shrink: 0; margin-top: 0.2rem; }
.footer-info-item div { flex: 1; }
.footer-label { font-size: 0.75rem; color: rgba(255,255,255,0.6); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.footer-value { font-size: 0.95rem; color: rgba(255,255,255,0.95); font-weight: 600; }
.footer-value a { color: rgba(255,255,255,0.95); text-decoration: none; transition: color 0.2s; }
.footer-value a:hover { color: var(--blue); }
.footer-nav { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-nav-link { color: rgba(255,255,255,0.8); font-size: 0.95rem; text-decoration: none; transition: all 0.2s; padding-left: 0; }
.footer-nav-link:hover { color: var(--blue); padding-left: 0.5rem; }
.footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(25,168,255,0.2), transparent); margin-bottom: 2rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; }
.footer-bottom p { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; }
.footer-bottom-links { display: flex; gap: 2rem; }
.footer-bottom-link { font-size: 0.8rem; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.footer-bottom-link:hover { color: var(--blue); }

/* ===== HAMBURGER ===== */
.hamburger { display: flex; flex-direction: column; cursor: pointer; gap: 5px; background: none; border: none; padding: 8px; transition: all 0.3s; position: relative; z-index: 100; }
.hamburger span { width: 22px; height: 2.5px; background: #FFF; border-radius: 2px; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(9px, 9px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
header.scrolled .hamburger span { background: #111; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

/* ===== MOBILE MENU - MODERNIZED ===== */
#mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(160deg, #0a1628 0%, #0f2240 50%, #162d4f 100%);
  color: #fff;
  overflow-y: auto;
  transition: right 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99;
  box-shadow: -10px 0 50px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}

#mobile-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(25,168,255,0.08), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

#mobile-menu.is-active {
  right: 0;
}

.mobile-menu-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(25,168,255,0.12);
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Brand in mobile menu */
.mobile-menu-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mobile-menu-brand img.mobile-menu-logo {
  width: auto;
  height: 150px;
  margin: -45px -15px -50px 0;
  max-width: 100px;
  object-fit: contain;
}

.mobile-menu-brand span {
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.5px;
}

.mobile-menu-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.5px;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  border-radius: 8px;
}

.mobile-menu-close:hover {
  color: var(--blue);
  background: rgba(25,168,255,0.1);
}

.mobile-menu-close svg {
  width: 24px;
  height: 24px;
}

.mobile-menu-list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
}

.mobile-menu-list > li {
  border-bottom: 1px solid rgba(25,168,255,0.1);
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 1.5rem;
  font-size: 1.02rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.3px;
  position: relative;
  text-decoration: none;
}

.mobile-menu-link > svg {
  flex-shrink: 0;
  color: rgba(25,168,255,0.5);
  transition: color 0.3s ease;
}

.mobile-menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, var(--blue), #00d4ff);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.mobile-menu-link:hover {
  color: var(--blue);
  padding-left: 1.8rem;
  background: rgba(25,168,255,0.08);
}

.mobile-menu-link:hover > svg {
  color: var(--blue);
}

.mobile-menu-link:hover::before {
  transform: scaleY(1);
}

.mobile-menu-link-contact {
  margin-top: 0.5rem;
  background: linear-gradient(135deg, rgba(25,168,255,0.2), rgba(0,212,255,0.1));
  border-radius: 10px;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  padding-left: 1.5rem;
  font-weight: 700;
  color: #19A8FF;
  border: 1px solid rgba(25,168,255,0.15);
}

.mobile-menu-link-contact:hover {
  background: linear-gradient(135deg, rgba(25,168,255,0.35), rgba(0,212,255,0.2));
  color: #00d4ff;
}

/* Dropdown Menu Toggle */
.mobile-menu-item-dropdown {
  padding: 0;
}

.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 1.02rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(25,168,255,0.1);
  position: relative;
}

.mobile-menu-toggle > a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  padding: 1.1rem 0 1.1rem 1.5rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.mobile-menu-toggle > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, var(--blue), #00d4ff);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.mobile-menu-toggle > a:hover {
  color: var(--blue);
  padding-left: 1.8rem;
  background: rgba(25,168,255,0.08);
}

.mobile-menu-toggle > a:hover::before {
  transform: scaleY(1);
}

.mobile-menu-toggle > a > svg {
  flex-shrink: 0;
  color: rgba(25,168,255,0.5);
  transition: color 0.3s ease;
}

.mobile-menu-toggle > a:hover > svg {
  color: var(--blue);
}

.mobile-submenu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.2rem;
  background: none;
  border: none;
  border-left: 1px solid rgba(25,168,255,0.1);
  cursor: pointer;
  color: var(--blue);
  transition: all 0.3s ease;
}

.mobile-submenu-btn:hover {
  background: rgba(25,168,255,0.12);
}

.mobile-submenu-btn svg.mobile-chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--blue);
}

.mobile-submenu-btn[aria-expanded="true"] svg.mobile-chevron {
  transform: rotate(180deg);
}

/* Submenu */
.mobile-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(0,0,0,0.2);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.mobile-submenu.active {
  max-height: 500px;
}

.mobile-submenu li {
  border: none;
}

.mobile-submenu .mobile-menu-link {
  padding-left: 3rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  border-left: 2px solid transparent;
}

.mobile-submenu .mobile-menu-link::before {
  display: none;
}

.mobile-submenu .mobile-menu-link:hover {
  color: var(--blue);
  background: rgba(25,168,255,0.05);
  padding-left: 3.2rem;
  border-left-color: var(--blue);
}

/* Mobile Menu Footer */
.mobile-menu-footer {
  flex-shrink: 0;
  padding: 1.2rem 1.5rem;
  border-top: 1px solid rgba(25,168,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}

.mobile-menu-phone {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #19A8FF;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-menu-phone:hover {
  color: #00d4ff;
}

.mobile-menu-phone svg {
  flex-shrink: 0;
}

.mobile-menu-email {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.3s ease;
  padding-left: 1.6rem;
}

.mobile-menu-email:hover {
  color: rgba(255,255,255,0.8);
}

/* DROPDOWN MENU */
.menu-item-with-dropdown {
  position: relative;
}

.menu-toggle::after {
  content: 'â–¼';
  font-size: 0.7rem;
  margin-left: 0.5rem;
  display: inline-block;
  transition: transform 0.3s;
}

.menu-item-with-dropdown:hover .menu-toggle::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: none;
  list-style: none;
  position: absolute;
  top: calc(100% + 0.8rem);
  left: -0.5rem;
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(26, 45, 74, 0.98) 100%);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 220px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(25, 168, 255, 0.1);
  z-index: 100;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 168, 255, 0.15);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-item-with-dropdown:hover .dropdown-menu {
  display: flex;
  flex-direction: column;
}

.dropdown-menu li {
  border-bottom: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(25, 168, 255, 0.08);
}

.dropdown-menu a {
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 1.8rem;
}

.dropdown-menu a::before {
  content: '→';
  position: absolute;
  left: 0.8rem;
  opacity: 0;
  transition: all 0.3s ease;
  font-weight: bold;
  color: var(--blue);
}

.dropdown-menu a:hover {
  background: rgba(0, 217, 255, 0.08);
  color: var(--blue);
  padding-left: 2.2rem;
}

.dropdown-menu a:hover::before {
  opacity: 1;
  left: 1.2rem;
}

.mobile-cta { margin-top: 2.5rem; position: relative; z-index: 1; }
.mobile-cta a { display: block; padding: 1rem; text-align: center; background: linear-gradient(135deg, var(--blue), #0088CC); color: #fff; border-radius: 14px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.3px; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 10px 30px rgba(25,168,255,0.3); }
.mobile-cta a:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(25,168,255,0.45); }

/* ===== COOKIE ===== */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  max-width: 400px;
  width: calc(100% - 40px);
  display: block;
}

.cookie-banner.hidden {
  display: none !important;
}

.cookie-text {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.cookie-text strong {
  color: var(--blue);
  font-weight: 700;
}

.cookie-text a {
  color: var(--blue);
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.cookie-btn-accept {
  background: var(--blue);
  color: #fff;
  flex: 1;
  min-width: 100px;
}

.cookie-btn-accept:hover {
  background: var(--blue-dark);
}

.cookie-btn-reject {
  background: #f0f0f0;
  color: #333;
  flex: 1;
  min-width: 100px;
}

.cookie-btn-reject:hover {
  background: #e0e0e0;
}

.cookie-btn-details {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 0.5rem 1rem;
}

.cookie-btn-details:hover {
  background: var(--blue);
  color: #fff;
}

.cookie-btn-selected {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 0.5rem 1rem;
}

.cookie-btn-selected:hover {
  background: var(--blue);
  color: #fff;
}

/* ===== SERVICES SECTION ===== */
#services {
  background: linear-gradient(180deg, rgba(25,168,255,0.02) 0%, rgba(25,168,255,0.04) 50%, rgba(25,168,255,0.02) 100%);
  padding: 8rem 2rem 7rem;
  border-bottom: none;
  position: relative;
}
#services::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(25,168,255,0.3), transparent); }
#services::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(25,168,255,0.2), transparent); }
.process-wrapper { max-width: 1176px; margin: 0 auto; width: 100%; padding: 0; }
.process-header { text-align: center; margin-bottom: 6rem; }
.process-eyebrow { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.2rem; opacity: 0; animation: fadeInDown 0.6s ease-out 0.1s forwards; }
#services .section-title { font-size: 3.2rem; font-weight: 800; letter-spacing: -1.2px; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--text) 0%, var(--text) 60%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; opacity: 0; animation: fadeInDown 0.7s ease-out 0.2s forwards; }
#services .section-sub { font-size: 1.1rem; color: var(--text-soft); max-width: 640px; margin: 0 auto; line-height: 1.85; font-weight: 500; letter-spacing: -0.3px; opacity: 0; animation: fadeInUp 0.7s ease-out 0.3s forwards; }
.ferotect-method { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 100%; 
  padding: 0;
}

/* ===== DESKTOP: 2x3 PREMIUM LAYOUT ===== */
.steps-container { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 3.8rem 3.2rem;
  align-items: stretch;
  position: relative; 
  padding: 2.5rem 0; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1080px; 
}

.step-item-final {
  grid-column: 1 / -1;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.step-item, .step-item-final { 
  display: flex; 
  flex-direction: column; 
  position: relative; 
  z-index: 2; 
  padding: 3.4rem 2.8rem; 
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  border: 1.3px solid rgba(25,168,255,0.22); 
  border-radius: 36px; 
  backdrop-filter: blur(22px);
  transition: all 0.7s cubic-bezier(0.34,1.56,0.64,1); 
  box-shadow: 0 25px 70px rgba(25,168,255,0.12), inset 0 1px 0 rgba(255,255,255,0.75); 
  cursor: pointer; 
  align-items: center; 
  justify-content: flex-start; 
  overflow: hidden; 
  height: 100%;
  text-align: center;
  min-height: 400px;
}

.step-item-final {
  min-height: auto;
  padding: 3.8rem 3.4rem;
  background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.03));
  border: 1.5px solid rgba(25,168,255,0.32);
  box-shadow: 0 32px 100px rgba(25,168,255,0.16), inset 0 1px 0 rgba(255,255,255,0.75);
}

/* PREMIUM HOVER EFFECTS */
.step-item:hover, .step-item-final:hover { 
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
  border-color: rgba(25,168,255,0.5); 
  box-shadow: 0 50px 150px rgba(25,168,255,0.28), inset 0 1px 0 rgba(255,255,255,0.8); 
  transform: translateY(-22px) scale(1.02);
}

.step-item-final:hover {
  background: linear-gradient(135deg, rgba(25,168,255,0.16), rgba(25,168,255,0.08));
  border-color: rgba(25,168,255,0.48);
  box-shadow: 0 60px 180px rgba(25,168,255,0.32), inset 0 1px 0 rgba(255,255,255,0.8);
  transform: translateY(-26px) scale(1.02);
}

/* TOP ACCENT LINE */
.step-item::before, .step-item-final::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 50%;
  width: 65%;
  height: 5px; 
  background: linear-gradient(90deg, transparent, var(--blue), transparent); 
  border-radius: 4px;
  opacity: 0; 
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: all 0.7s cubic-bezier(0.34,1.56,0.64,1); 
}

.step-item:hover::before, .step-item-final:hover::before { 
  opacity: 1; 
  transform: translateX(-50%) scaleX(1);
}

/* STEP BACKGROUND */
.step-background { 
  position: absolute; 
  inset: 0; 
  background: transparent; 
  border-radius: 36px;
  transition: all 0.7s ease;
}

.step-item:hover .step-background { 
  background: linear-gradient(135deg, rgba(25,168,255,0.05) 0%, transparent 100%); 
}

/* HEADER WITH STEP NUMBER */
.step-header { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 1.6rem; 
  margin-bottom: 2.2rem; 
  justify-content: center; 
  position: relative; 
  z-index: 1; 
  width: 100%; 
}

.step-number {
  font-size: 0.85rem;
  font-weight: 920;
  color: var(--blue);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* LARGE PREMIUM ICONS */
.step-icon { 
  width: 110px; 
  height: 110px; 
  min-width: 110px; 
  max-width: 110px; 
  border-radius: 32px; 
  background: linear-gradient(135deg, rgba(25,168,255,0.18), rgba(25,168,255,0.1)); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--blue); 
  border: 2.4px solid rgba(25,168,255,0.36); 
  transition: all 0.7s cubic-bezier(0.34,1.56,0.64,1); 
  flex-shrink: 0; 
  font-size: 2.8rem; 
  line-height: 1;
  box-shadow: 0 12px 36px rgba(25,168,255,0.12);
}

.step-item:hover .step-icon, .step-item-final:hover .step-icon { 
  background: linear-gradient(135deg, var(--blue), #0088CC); 
  color: #fff; 
  border-color: var(--blue); 
  transform: scale(1.42) rotateZ(-7deg); 
  box-shadow: 0 40px 100px rgba(25,168,255,0.6); 
}

.step-icon svg { 
  width: 48px; 
  height: 48px; 
  stroke-width: 1.3; 
}

/* CONTENT */
.step-content { 
  display: flex; 
  flex-direction: column; 
  gap: 1.6rem; 
  text-align: center; 
  flex-grow: 1; 
  justify-content: flex-start; 
  position: relative; 
  z-index: 1; 
  width: 100%; 
  align-items: center; 
}

.step-title { 
  font-size: 1.52rem; 
  font-weight: 880; 
  color: var(--text); 
  margin: 0; 
  letter-spacing: -0.45px; 
  line-height: 1.32;
}

.step-description { 
  font-size: 1.08rem; 
  color: var(--text-soft); 
  line-height: 1.85; 
  margin: 0; 
  font-weight: 530;
}

.step-footer { 
  font-size: 0.8rem; 
  color: var(--blue); 
  font-weight: 900; 
  text-transform: uppercase; 
  letter-spacing: 0.16em; 
  margin-top: 1.4rem; 
  transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1); 
  opacity: 0; 
  transform: translateY(5px);
}

.step-item:hover .step-footer, .step-item-final:hover .step-footer { 
  opacity: 1;
  transform: translateY(0);
}

/* ANIMATIONS */
@keyframes slideUpStagger {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

.step-item {
  animation: slideUpStagger 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.step-item[data-step="1"] { animation-delay: 0.1s; }
.step-item[data-step="2"] { animation-delay: 0.2s; }
.step-item[data-step="3"] { animation-delay: 0.3s; }
.step-item[data-step="4"] { animation-delay: 0.4s; }
.step-item-final { animation-delay: 0.55s; }

/* ===== RESPONSIVE: DESKTOP 1600px+ ===== */
@media (min-width: 1600px) {
  .steps-container {
    gap: 4.2rem 3.6rem;
    max-width: 1200px;
  }

  .step-item, .step-item-final {
    padding: 3.8rem 3.2rem;
  }

  .step-icon {
    width: 120px;
    height: 120px;
    min-width: 120px;
    max-width: 120px;
    font-size: 3rem;
    border-radius: 36px;
  }

  .step-icon svg {
    width: 52px;
    height: 52px;
  }

  .step-title {
    font-size: 1.62rem;
  }

  .step-description {
    font-size: 1.12rem;
  }
}

/* ===== RESPONSIVE: TABLET 1200px ===== */
@media (max-width: 1200px) {
  .steps-container {
    gap: 3.4rem 2.8rem;
    max-width: 980px;
  }

  .step-item, .step-item-final {
    padding: 3.2rem 2.6rem;
    min-height: 380px;
  }

  .step-icon {
    width: 104px;
    height: 104px;
    min-width: 104px;
    max-width: 104px;
    font-size: 2.6rem;
    border-radius: 30px;
  }

  .step-title {
    font-size: 1.44rem;
  }

  .step-header {
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .step-item:hover .step-icon, .step-item-final:hover .step-icon {
    transform: scale(1.38);
  }
}

/* ===== RESPONSIVE: TABLET 1024px ===== */
@media (max-width: 1024px) {
  .steps-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.4rem;
    max-width: 900px;
    padding: 2rem 1.5rem;
  }

  .step-item, .step-item-final {
    padding: 2.8rem 2.2rem;
    min-height: 360px;
  }

  .step-item-final {
    padding: 3.2rem 2.8rem;
    max-width: 460px;
  }

  .step-icon {
    width: 96px;
    height: 96px;
    min-width: 96px;
    max-width: 96px;
    font-size: 2.4rem;
    border-radius: 28px;
  }

  .step-icon svg {
    width: 44px;
    height: 44px;
  }

  .step-title {
    font-size: 1.34rem;
  }

  .step-description {
    font-size: 1rem;
  }

  .step-header {
    gap: 1.4rem;
    margin-bottom: 2rem;
  }

  .step-item:hover {
    transform: translateY(-18px) scale(1.01);
  }

  .step-item:hover .step-icon, .step-item-final:hover .step-icon {
    transform: scale(1.36);
  }
}

/* ===== RESPONSIVE: MID-TABLET 768px ===== */
@media (max-width: 768px) {
  .steps-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.6rem 2rem;
    max-width: 100%;
    padding: 1.5rem 1rem;
  }

  .step-item, .step-item-final {
    padding: 2.4rem 1.8rem;
    min-height: 340px;
  }

  .step-item-final {
    padding: 2.8rem 2.2rem;
    max-width: 100%;
  }

  .step-icon {
    width: 88px;
    height: 88px;
    min-width: 88px;
    max-width: 88px;
    font-size: 2.2rem;
    border-radius: 26px;
  }

  .step-icon svg {
    width: 40px;
    height: 40px;
  }

  .step-title {
    font-size: 1.24rem;
  }

  .step-description {
    font-size: 0.96rem;
    line-height: 1.75;
  }

  .step-header {
    gap: 1.2rem;
    margin-bottom: 1.8rem;
  }

  .step-content {
    gap: 1.4rem;
  }

  .step-footer {
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    margin-top: 1.2rem;
  }

  .step-item:hover {
    transform: translateY(-14px) scale(1.01);
  }

  .step-item:hover .step-icon, .step-item-final:hover .step-icon {
    transform: scale(1.32);
  }
}

/* ===== RESPONSIVE: MOBILE 600px ===== */
@media (max-width: 600px) {
  .steps-container {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    max-width: 100%;
    padding: 1.5rem 0.8rem;
  }

  .step-item, .step-item-final {
    padding: 2.2rem 1.6rem;
    min-height: auto;
  }

  .step-item-final {
    padding: 2.6rem 1.8rem;
    max-width: 100%;
  }

  .step-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    max-width: 80px;
    font-size: 2rem;
    border-radius: 24px;
  }

  .step-icon svg {
    width: 36px;
    height: 36px;
  }

  .step-title {
    font-size: 1.16rem;
    font-weight: 860;
  }

  .step-description {
    font-size: 0.92rem;
    line-height: 1.7;
  }

  .step-header {
    gap: 1rem;
    margin-bottom: 1.6rem;
  }

  .step-content {
    gap: 1.2rem;
  }

  .step-footer {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    margin-top: 1rem;
  }

  .step-item:hover {
    transform: translateY(-10px) scale(1.01);
  }

  .step-item:hover .step-icon, .step-item-final:hover .step-icon {
    transform: scale(1.28);
    box-shadow: 0 28px 72px rgba(25,168,255,0.48);
  }
}

/* ===== RESPONSIVE: SMALL MOBILE 480px ===== */
@media (max-width: 480px) {
  .steps-container {
    gap: 1.4rem;
    padding: 1rem 0.6rem;
  }

  .step-item, .step-item-final {
    padding: 2rem 1.4rem;
  }

  .step-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    max-width: 72px;
    font-size: 1.8rem;
  }

  .step-icon svg {
    width: 32px;
    height: 32px;
  }

  .step-title {
    font-size: 1.08rem;
  }

  .step-description {
    font-size: 0.88rem;
  }

  .step-header {
    gap: 0.9rem;
    margin-bottom: 1.4rem;
  }
}

@keyframes slideDown { from { opacity: 0; max-height: 0; transform: translateY(-12px); } to { opacity: 1; max-height: 400px; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(25px) rotate(5deg); } }

/* ===== ROOFERS ===== */
#roofers { background: linear-gradient(135deg, rgba(25,168,255,0.03), rgba(25,168,255,0.01) 50%); margin: 0 calc(-50vw + 50%); width: 100vw; padding: 5rem calc(1.5rem + (100vw - 100%) / 2); border-bottom: none; }
#roofers .section-title { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 1.2rem; }
#roofers .solutions-grid { display: grid; grid-template-columns: 1.1fr 1.3fr; gap: 5.5rem; max-width: var(--max-width); margin: 0 auto; align-items: center; }
#roofers .solutions-content { display: flex; flex-direction: column; gap: 2.5rem; }
#roofers .solution-accordion { display: grid; gap: 1.8rem; }
.accordion-item { background: #fff; border: 1px solid rgba(25,168,255,0.12); border-radius: 18px; padding: 2rem 2.2rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 8px 24px rgba(0,0,0,0.06); position: relative; overflow: hidden; }
.accordion-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), #0088CC); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.accordion-item:hover { border-color: rgba(25,168,255,0.25); box-shadow: 0 16px 40px rgba(0,0,0,0.1); transform: translateY(-4px); }
.accordion-item:hover::before { transform: scaleX(1); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; }
.accordion-header h3 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -0.5px; }
.accordion-toggle { color: var(--blue); transition: all 0.3s; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(25,168,255,0.1); border-radius: 6px; }
.accordion-item.active .accordion-toggle { transform: rotate(180deg); background: rgba(25,168,255,0.15); }
.accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s; }
.accordion-item.active .accordion-content { max-height: 300px; opacity: 1; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(25,168,255,0.1); }
.accordion-content p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.75; margin: 0; }
#roofers .solutions-image { position: relative; border-radius: 24px; overflow: hidden; height: 550px; box-shadow: 0 35px 80px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(25,168,255,0.12); transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.6s ease; }
#roofers .solutions-image:hover { transform: translateY(-8px); box-shadow: 0 45px 100px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
#roofers .solutions-image img { width: 100%; height: 100%; object-fit: cover; }

/* ===== CONTACT ===== */
@media (max-width: 1024px) {
  .topbar-inner { padding: 0.35rem 1.5rem; gap: 0.8rem; }
  .topbar-contact-item { padding: 0.3rem 0.6rem; }
  .topbar-label { font-size: 0.55rem; }
  .topbar-value { font-size: 0.7rem; }
  .topbar-contact-item svg { width: 14px; height: 14px; }
  .nav { grid-template-columns: 1fr 1fr; }
  .logo-img { height: 170px; margin: -75px -20px -87px 0; max-width: 110px; }
  .nav-title { font-size: 0.9rem; margin-bottom: -0.5rem; }
  .frosted-box { padding: 2.2rem 1.8rem; max-width: min(480px, 80vw); margin-top: 0; border-radius: 20px; }
  .frosted-box h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
  .frosted-box .hero-kicker { font-size: 0.65rem; margin-bottom: 0.6rem; }
  .frosted-box .hero-lead { font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.65; }
  .frosted-box .hero-cta-row { gap: 0.8rem; }
  .hero h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
  .hero-lead { font-size: 0.9rem; margin-bottom: 1.5rem; }
  .hero-kicker { font-size: 0.65rem; }
  .hero-note { font-size: 0.78rem; margin-top: 1.2rem; }
  .why-container { grid-template-columns: 1fr; gap: 2rem; }
  .why-image { height: 300px; }
  .why-intro .why-container { grid-template-columns: 1fr 1.2fr; gap: 4rem; padding: 3.5rem 1.5rem; }
  .why-intro .why-image { height: 420px; box-shadow: 0 30px 70px rgba(0,0,0,0.15); opacity: 1 !important; animation: none !important; background-image: url('takyto-1.jpg') !important; }
  .why-intro .why-content h2 { font-size: 1.8rem; margin-bottom: 1.4rem; letter-spacing: -0.8px; }
  .why-intro .why-content p { font-size: 0.92rem; line-height: 1.8; }
  .taktyper-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  #process { padding: 5rem 1.5rem 4rem; }
  #process::before { height: 1px; }
  #process::after { height: 1px; }
  .process-wrapper { max-width: 100%; }
  .process-eyebrow { font-size: 0.7rem; margin-bottom: 1rem; animation: none; opacity: 1; }
  .process-badge { display: none; }
  .process-header { margin-bottom: 3.5rem; }
  .process-header .section-title { font-size: 1.8rem; letter-spacing: -0.6px; margin-bottom: 0.8rem; animation: none; opacity: 1; }
  .process-header .section-sub { font-size: 0.88rem; max-width: 480px; line-height: 1.7; animation: none; opacity: 1; }
  #roofers { padding: 4rem calc(1.5rem + (100vw - 100%) / 2); }
  #roofers .solutions-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  #roofers .solutions-image { height: 400px; }
  #roofers .section-title { font-size: 1.8rem; }
  .accordion-item { padding: 1.6rem 1.8rem; }
  .accordion-header h3 { font-size: 1.15rem; }
  .contact-ferotect { grid-template-columns: 1fr; }
  .contact-image-side { display: none; }
  .form-row { grid-template-columns: 1fr; }

  #contact { padding: 3.5rem calc(1.5rem + (100vw - 100%) / 2) 3rem; }
  #footer { padding: 3.5rem calc(1.5rem + (100vw - 100%) / 2) 1.5rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-bottom: 2.5rem; }
  .footer-block h3 { font-size: 1.4rem; }
  .footer-block h4 { font-size: 0.95rem; margin-bottom: 1.2rem; }
  .footer-tagline { font-size: 0.9rem; margin-bottom: 1.2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 1.5rem; }
  .footer-bottom-links { flex-direction: column; gap: 0.8rem; }
  .hero { height: auto; min-height: auto; }
  .hero-papptak { height: 100vh; }
  .scroll-indicator { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 600px) {
  .topbar { display: none; }
  main { padding: 1.25rem 1rem 0; }
  .nav { padding: 0.6rem 1rem; grid-template-columns: 1fr auto; }
  .nav-left { display: flex; align-items: center; gap: 0.5rem; }
  .logo-img { height: 140px; margin: -62px -15px -72px 0; max-width: 90px; }
  .nav-title { font-size: 0.8rem; margin-left: -0.4rem; margin-bottom: -0.4rem; }
  .nav-right { display: flex; align-items: center; gap: 0.5rem; }
  .nav-links { display: none; }
  header .btn-primary { display: none; }
  header .nav-cta-btn { display: none; }
  .contact-cta-container .btn-primary { display: inline-block; }
  .frosted-box { padding: 2.2rem 1.5rem; margin-left: auto; margin-right: auto; max-width: 100%; margin-top: 0; }
  .frosted-box h1 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin-bottom: 0.8rem; }
  .frosted-box .hero-lead { font-size: 0.85rem; margin-bottom: 1.5rem; line-height: 1.6; }
  .hero { height: auto; min-height: 100vh; background-attachment: scroll; padding-top: 4rem; padding-bottom: 4rem; background-size: cover; background-position: center; background-repeat: no-repeat; }
  .hero-papptak { height: 100vh; padding-top: 0; padding-bottom: 0; }
  .hero-takpanneplat { height: 100vh; padding-top: 0; padding-bottom: 0; }
  .scroll-indicator { display: none; }
  .hero > div { text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-kicker { font-size: 0.62rem; letter-spacing: 0.25em; opacity: 0.95; }
  .hero h1 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); line-height: 1.15; margin-bottom: 0.8rem; font-weight: 800; letter-spacing: -0.5px; }
  .hero-lead { font-size: 0.85rem; line-height: 1.65; margin-bottom: 1.5rem; font-weight: 500; }
  .hero-cta-row { justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0; display: none; }
  .hero-cta-row .btn-ghost { display: none; }
  .btn-calc {
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    position: relative;
    padding-left: 2.6rem;
    padding-right: 2.6rem;
  }
  .btn-calc svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .btn-calc::after {
    content: '';
    width: 16px;
    height: 1px;
    flex-shrink: 0;
  }
  .btn-calc:hover svg {
    transform: translateY(-50%) rotate(12deg) scale(1.15);
  }
  .hero-note { margin-top: 1.5rem; font-size: 0.8rem; line-height: 1.6; opacity: 0.95; }
  .hero-note::before { content: 'Kontakta oss idag'; display: block; background: linear-gradient(135deg, #19A8FF 0%, #0088CC 100%); color: white; padding: 0.8rem 1.5rem; border-radius: 10px; font-weight: 700; font-size: 0.9rem; margin-bottom: 1.2rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 8px 24px rgba(25,168,255,0.35); letter-spacing: -0.3px; text-decoration: none; }
  .hero-note:hover::before { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(25,168,255,0.45); background: linear-gradient(135deg, #0d9cff 0%, #0077bb 100%); }
  #why { margin-top: 8rem; margin-bottom: -1rem; }
  .why-intro .why-container { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; background: transparent; }
  .why-intro .why-image { height: 300px; border-radius: 20px; background-image: url('takyto-1.jpg') !important; background-size: cover; background-position: center; opacity: 1 !important; animation: none !important; }
  .why-intro .why-image img { display: none; width: 100%; height: 100%; object-fit: cover; }
  .why-container { grid-template-columns: 1fr; }
  .why-container .why-image { height: 300px; border-radius: 20px; background-image: url('Kingen-bild-2.png'); background-size: cover; background-position: center; display: block; opacity: 1; animation: none; box-shadow: 0 15px 40px rgba(0,0,0,0.15); }
  .why-container .why-image img { display: none; }
  .why-intro .why-content h2 { font-size: 1.6rem; margin-bottom: 1.2rem; letter-spacing: -0.8px; }
  .why-intro .why-content p { font-size: 0.9rem; line-height: 1.75; }
  .taktyper-grid { grid-template-columns: 1fr; gap: 2rem; }
  .taktype-card { box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: slideUp 0.5s ease-out forwards; }
  .taktype-card:nth-child(1) { animation-delay: 0.05s; }
  .taktype-card:nth-child(2) { animation-delay: 0.1s; }
  .taktype-card:nth-child(3) { animation-delay: 0.15s; }
  .taktype-image { height: 200px; }
  .taktype-content { padding: 2rem 1.8rem; }
  .taktype-content h3 { font-size: 1.25rem; }
  .taktype-content p { font-size: 0.9rem; }
  .contact-cta-container { padding: 4rem 1.5rem; margin: 3rem 1rem; }
  .contact-cta-container .section-title { font-size: 1.5rem; }
  .stats-section { background: linear-gradient(135deg, rgba(42,54,72,0.55), rgba(42,54,72,0.55)), url('Hero-v3.0.jpg') center/cover no-repeat scroll; padding: 3.5rem 1.5rem; margin: 0 calc(-50vw + 50%); width: 100vw; padding-left: calc(1.5rem + (100vw - 100%) / 2); padding-right: calc(1.5rem + (100vw - 100%) / 2); background-attachment: scroll; }
  #stats { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0.5rem; }
  .stat-card { padding: 2rem 1.5rem; }
  .stat-number { font-size: 2.4rem; }
  #services .section-title { font-size: 1.4rem; margin-bottom: 1.2rem; letter-spacing: -0.6px; }
  #services .process-eyebrow { font-size: 0.65rem; margin-bottom: 0.8rem; opacity: 1; animation: none; }
  #services .process-header { margin-bottom: 2rem; }
  #services .section-sub { font-size: 0.9rem; opacity: 1; animation: none; }
  #services .ferotect-method { padding: 0 1.5rem; }
  .steps-container { grid-template-columns: 1fr; gap: 1rem; padding: 0; margin: 0; }
  .step-item { padding: 1.5rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,0.75); min-height: auto; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 1; animation: none; }
  .step-item::before { display: none; }
  .step-item::after { display: none; }
  .step-item-final { padding: 1.5rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,0.75); min-height: auto; }
  .step-item-final::before { display: none; }
  .step-item-final::after { display: none; }
  .step-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.85); }
  .step-item-final:hover { transform: translateY(-4px); background: rgba(255,255,255,0.85); }
  .step-header { gap: 0.8rem; margin-bottom: 0.8rem; width: 100%; }
  .step-icon { width: 52px; height: 52px; border-radius: 14px; min-width: 52px; margin-bottom: 0.8rem; }
  .step-icon svg { width: 24px; height: 24px; }
  .step-content { gap: 0.6rem; width: 100%; }
  .step-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.3px; text-align: center; line-height: 1.3; }
  .step-description { font-size: 0.85rem; line-height: 1.6; text-align: center; }
  #roofers { padding: 3rem 1.5rem; }
  #roofers .solutions-grid { gap: 2.5rem; }
  #roofers .solutions-image { height: 300px; border-radius: 18px; }
  #roofers .section-title { font-size: 1.4rem; }
  .accordion-item { padding: 1.4rem 1.6rem; }
  .accordion-header h3 { font-size: 1.05rem; }
  .stat-number { font-size: 2.8rem; }
  #stats { grid-template-columns: 1fr; }
  #contact { padding: 4.5rem calc(1.5rem + (100vw - 100%) / 2); }
  #contact .section-title { font-size: 1.6rem; }
  #contact .section-sub { font-size: 0.85rem; margin-bottom: 2rem; }
  .contact-ferotect { grid-template-columns: 1fr; gap: 3rem; }
  .contact-image-side { min-height: 420px; }
  .contact-image-overlay { padding: 2.5rem; justify-content: center; }
  .contact-info-cards { gap: 1.1rem; }
  .contact-info-item { padding: 1.3rem; gap: 1rem; }
  .contact-info-label { font-size: 0.7rem; }
  .contact-info-value { font-size: 1rem; }
  .contact-form-card { padding: 2.8rem; }
  .form-row { gap: 1rem; }
  .hero { height: auto; min-height: auto; background-attachment: scroll; padding-top: 1.5rem; padding-bottom: 2rem; background-position: top center; }
  .hero > div { margin-top: 1rem; }
  .hero h1 { font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.1; margin-bottom: 0.6rem; }
  .hero-lead { font-size: 0.85rem; margin-bottom: 1.2rem; line-height: 1.6; }
  .hero-cta-row { gap: 0.6rem; }
  .hero-takbyte { padding: 1.5rem 1.5rem 2rem; min-height: auto; background-position: top center; background-attachment: scroll; }
  .hero-takbyte > div { min-height: auto; padding: 1.5rem 0; }
  .hero-fasad { padding: 1.5rem 1.5rem; min-height: 60vh; background-attachment: scroll; }
  .hero-fasad > div { min-height: auto; padding: 2rem 0; justify-content: flex-start; align-items: center; }
  .frosted-box { padding: 1.5rem 1.2rem; margin-top: 0; max-width: 100%; border-radius: 16px; }
  .frosted-box h1 { font-size: clamp(1.3rem, 4vw, 1.6rem); margin-bottom: 0.6rem; }
  .frosted-box .hero-kicker { font-size: 0.6rem; margin-bottom: 0.6rem; }
  .frosted-box .hero-lead { font-size: 0.82rem; margin-bottom: 1.2rem; line-height: 1.6; }
  .frosted-box .hero-cta-row { gap: 0.6rem; flex-direction: column; }
  .frosted-box .btn-primary, .frosted-box .btn-ghost { width: 100%; font-size: 0.85rem; padding: 0.7rem 1.2rem; }
}

@media (max-width: 600px) {
  #process { padding: 4rem 1.2rem 3.5rem; }
  #process::before { height: 1px; }
  #process::after { height: 1px; }
  .process-wrapper { max-width: 100%; }
  .process-eyebrow { font-size: 0.65rem; margin-bottom: 0.9rem; letter-spacing: 0.12em; animation: none; opacity: 1; }
  .process-badge { display: none; }
  .process-header { margin-bottom: 2.5rem; }
  .process-header .section-title { font-size: 1.5rem; margin-bottom: 0.6rem; letter-spacing: -0.5px; animation: none; opacity: 1; }
  .process-header .section-sub { font-size: 0.82rem; max-width: 100%; line-height: 1.65; animation: none; opacity: 1; }
  .steps-container { grid-template-columns: 1fr; gap: 0.6rem; padding: 0; margin: 0 auto; width: fit-content; }
  .step-item { padding: 1.2rem 0.95rem; padding-top: 1.2rem; border-radius: 18px; background: rgba(255,255,255,0.65); min-height: 220px; align-items: center; justify-content: flex-start; text-align: center; }
  .step-item::before { height: 2px; display: none; }
  .step-item:hover { transform: translateY(-4px); }
  .step-header { flex-direction: column; gap: 0.7rem; margin-bottom: 0.6rem; justify-content: center; width: 100%; }
  .step-icon { width: 50px; height: 50px; max-width: 50px; font-size: 1.5rem; }
  .step-icon svg { width: 22px; height: 22px; }
  .step-content { gap: 0.5rem; align-items: center; width: 100%; }
  .step-title { font-size: 0.98rem; font-weight: 750; line-height: 1.32; }
  .step-description { font-size: 0.78rem; font-weight: 500; line-height: 1.55; }
  .step-footer { font-size: 0.63rem; margin-top: 0.7rem; opacity: 1 !important; }
  .topbar-inner { padding: 0.3rem 1.5rem; gap: 0.6rem; flex-direction: row; }
  .topbar-contact-item { padding: 0.3rem 0.5rem; width: auto; }
  .topbar-label { font-size: 0.5rem; display: none; }
  .topbar-value { font-size: 0.65rem; }
  .topbar-contact-item svg { width: 13px; height: 13px; }
  #contact { padding: 2.5rem 1.5rem 2rem; }
  #contact .section-title { font-size: 1.8rem; }
  #contact .section-sub { font-size: 0.9rem; margin-bottom: 2rem; }
  .contact-form-card { padding: 2rem; }
  .contact-form-card h3 { font-size: 1.2rem; margin-bottom: 1rem; }
  .contact-form-card .form-subtitle { font-size: 0.85rem; margin-bottom: 1.5rem; }
  .form-row { grid-template-columns: 1fr; gap: 1rem; }
  .contact-form-card label { font-size: 0.7rem; }
  .contact-form-card input, .contact-form-card textarea, .contact-form-card select { padding: 0.85rem 1rem; font-size: 0.9rem; }
  .contact-form-card textarea { min-height: 90px; }
  .contact-form-card .btn-primary { padding: 0.95rem 1.5rem; font-size: 0.95rem; }
  .contact-image-side { min-height: 380px; }
  .contact-image-overlay { padding: 2rem; justify-content: center; }
  .contact-info-cards { gap: 1rem; }
  .contact-info-item { padding: 1.1rem 1.3rem; gap: 0.9rem; border-radius: 13px; }
  .contact-info-item:hover { transform: translateX(6px); }
  .contact-info-icon { width: 48px; height: 48px; border-radius: 12px; }
  .contact-info-icon svg { width: 22px; height: 22px; }
  .contact-info-label { font-size: 0.68rem; }
  .contact-info-value { font-size: 0.95rem; }
  .contact-trust-badge { margin-top: 1.5rem; padding: 1.1rem 1.3rem; border-radius: 13px; }
  .contact-trust-badge svg { width: 26px; height: 26px; }
  .contact-trust-badge span { font-size: 0.8rem; }
#contact-cta { padding: 0; background-attachment: scroll; margin: 0 calc(-50vw + 50%); width: 100vw; background-size: cover; background-position: center; }
  .contact-cta-container { padding: 4rem 1.5rem; background: none; backdrop-filter: none; border: none; border-radius: 0; max-width: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; }
  .cta-content { max-width: 100%; }
  .contact-cta-container .section-title { font-size: 2rem; margin-bottom: 1.2rem; color: #fff; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
  .contact-cta-container .section-sub { margin-bottom: 2.5rem; font-size: 1rem; color: rgba(255,255,255,0.95); line-height: 1.7; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
  .contact-cta-container .btn-primary { padding: 1rem 2rem; font-size: 0.95rem; font-weight: 700; background: linear-gradient(135deg, var(--blue) 0%, #0088CC 100%); box-shadow: 0 12px 30px rgba(25,168,255,0.35), 0 0 25px rgba(25,168,255,0.25); border: 1px solid rgba(255,255,255,0.15); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); width: auto; color: #fff; position: relative; overflow: hidden; display: inline-block; }
  .contact-cta-container { padding: 3rem 1.5rem; border-radius: 20px; }
  .contact-cta-container .section-title { font-size: 1.8rem; margin-bottom: 1rem; }
  .contact-cta-container .section-sub { font-size: 0.95rem; margin-bottom: 2rem; }
  .contact-cta-container .btn-primary { padding: 1rem 2rem; font-size: 1rem; }
  #footer { padding: 2.5rem 1.5rem 1rem; margin-top: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
  .footer-block h3 { font-size: 1.3rem; margin-bottom: 1rem; }
  .footer-block h4 { font-size: 0.9rem; margin-bottom: 1rem; }
  .footer-tagline { font-size: 0.85rem; margin-bottom: 1rem; }
  .footer-social { gap: 1rem; }
  .social-link { width: 40px; height: 40px; }
  .social-link svg { width: 18px; height: 18px; }
  .footer-info-item { padding: 0.8rem; margin-bottom: 1rem; }
  .footer-label { font-size: 0.7rem; }
  .footer-value { font-size: 0.9rem; }
  .footer-nav-link { font-size: 0.9rem; }
  .footer-bottom { gap: 1rem; }
  .footer-bottom p { font-size: 0.8rem; }
  .footer-bottom-link { font-size: 0.75rem; }
}

/* ===== SOLCELLER PAGE ===== */
/* Hero Section */
.solar-hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: linear-gradient(135deg, rgba(42,54,72,0.65), rgba(42,54,72,0.65)), url('money1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; }
body:has(.solar-hero) .topbar { background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('money1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; }
body:has(.solar-hero) header { background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('money1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; }
.solar-hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center right; background-attachment: fixed; z-index: -2; display: none; }
.solar-hero-overlay { display: none; }
.solar-hero-content { position: relative; z-index: 2; max-width: 700px; width: 100%; padding: 2rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.solar-hero-box { background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.4); border-radius: 22px; padding: clamp(2rem, 3.5vw, 3.2rem); max-width: min(500px, 80vw); box-shadow: 0 20px 60px rgba(0,0,0,0.15); animation: slideInLeft 0.8s ease-out; }
.solar-eyebrow { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); margin-bottom: 1rem; }
.solar-hero-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -1px; margin-bottom: 1.2rem; color: var(--text); line-height: 1.15; }
.solar-hero-sub { font-size: clamp(0.88rem, 1.2vw, 1rem); color: var(--text-soft); line-height: 1.75; margin-bottom: 1.5rem; font-weight: 500; }

/* Expertis Section */
.solar-expertise { padding: 8rem 2rem 7rem; background: linear-gradient(180deg, #fafbfc 0%, rgba(25,168,255,0.02) 100%); border-top: 1px solid rgba(25,168,255,0.1); }
.solar-expertise-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.solar-expertise-image { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(25,168,255,0.1); }
.solar-expertise-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solar-expertise-content .section-title { margin-bottom: 1.5rem; }
.solar-expertise-content .section-sub { margin-bottom: 2.5rem; }
.expertise-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.expertise-card { background: rgba(255,255,255,0.7); border: 1px solid rgba(25,168,255,0.12); border-radius: 20px; padding: 2rem; backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.expertise-card:hover { background: rgba(255,255,255,0.95); border-color: rgba(25,168,255,0.25); box-shadow: 0 20px 56px rgba(25,168,255,0.1); transform: translateY(-6px); }
.expertise-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.05)); border-radius: 14px; color: var(--blue); margin-bottom: 1rem; border: 1.5px solid rgba(25,168,255,0.15); }
.expertise-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 0.8rem 0; }
.expertise-card p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.6; margin: 0; }

/* Produkt Ecosystem */
.solar-products { padding: 10rem 2rem 10rem; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(25,168,255,0.02) 100%); position: relative; }
.solar-products-wrapper { max-width: 1200px; margin: 0 auto; }
.solar-products-wrapper .section-title { text-align: center; margin-bottom: 1rem; }
.solar-products-wrapper .section-sub { text-align: center; margin-bottom: 4rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.solar-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.solar-product-card { position: relative; height: 480px; border-radius: 24px; overflow: hidden; cursor: pointer; }
.solar-product-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.solar-product-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.05)); color: rgba(25,168,255,0.4); }
.solar-product-card:hover .solar-product-image { transform: scale(1.08); }
.solar-product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%); z-index: 1; }
.solar-product-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 2rem; color: white; display: flex; flex-direction: column; gap: 1.2rem; }
.solar-product-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.solar-product-desc { font-size: 0.95rem; line-height: 1.6; margin: 0; opacity: 0.95; }
.btn-secondary { display: inline-block; padding: 0.85rem 2rem; background: rgba(255,255,255,0.95); color: var(--blue); border: none; border-radius: 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; width: fit-content; }
.btn-secondary:hover { background: white; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

/* Planering & Analys */
.solar-planning { padding: 10rem 2rem 10rem; background: linear-gradient(180deg, #fafbfc 0%, rgba(25,168,255,0.02) 100%); border-top: 1px solid rgba(25,168,255,0.1); }
.solar-planning-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.solar-planning-content .section-title { margin-bottom: 1.5rem; }
.solar-planning-content .section-sub { margin-bottom: 3rem; }
.planning-features { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.planning-feature { background: rgba(255,255,255,0.7); border: 1px solid rgba(25,168,255,0.12); border-radius: 20px; padding: 2rem; backdrop-filter: blur(12px); transition: all 0.4s ease; }
.planning-feature:hover { background: rgba(255,255,255,0.95); border-color: rgba(25,168,255,0.25); transform: translateY(-4px); }
.planning-feature-number { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blue), #0088CC); color: white; border-radius: 12px; font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem; }
.planning-feature h4 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 0.8rem 0; }
.planning-feature p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.6; margin: 0; }
.solar-planning-image { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(25,168,255,0.1); }
.solar-planning-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ekonomisk Transparens */
.solar-economics { padding: 8rem 2rem 7rem; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(25,168,255,0.02) 100%); }
.solar-economics-wrapper { max-width: 1200px; margin: 0 auto; }
.solar-economics-wrapper .section-title { text-align: center; margin-bottom: 1rem; }
.solar-economics-wrapper .section-sub { text-align: center; margin-bottom: 4rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.economics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem; }
.economics-card { background: rgba(255,255,255,0.7); border: 1px solid rgba(25,168,255,0.12); border-radius: 20px; padding: 2.5rem; backdrop-filter: blur(12px); text-align: center; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); display: flex; flex-direction: column; align-items: center; }
.economics-card:hover { background: rgba(255,255,255,0.95); border-color: rgba(25,168,255,0.25); transform: translateY(-8px); box-shadow: 0 25px 60px rgba(25,168,255,0.12); }
.economics-highlight { background: linear-gradient(135deg, rgba(25,168,255,0.08) 0%, rgba(25,168,255,0.04) 100%); border-color: rgba(25,168,255,0.2); }
.economics-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(25,168,255,0.15), rgba(25,168,255,0.08)); border-radius: 16px; color: var(--blue); margin-bottom: 1.5rem; border: 1.5px solid rgba(25,168,255,0.2); }
.economics-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0 0 0.8rem 0; }
.economics-value { font-size: 2.2rem; font-weight: 800; background: linear-gradient(135deg, var(--blue), #0088CC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 0.8rem 0; }
.economics-desc { font-size: 0.95rem; color: var(--text-soft); line-height: 1.6; margin: 0; }
.economics-bottom { background: rgba(255,255,255,0.7); border: 1px solid rgba(25,168,255,0.12); border-radius: 20px; padding: 2.5rem; backdrop-filter: blur(12px); text-align: center; }
.economics-bottom h3 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0 0 1rem 0; }
.economics-bottom p { font-size: 1rem; color: var(--text-soft); line-height: 1.8; margin: 0; }

/* WHY FEROTECT SECTION */
.why-ferotect-section {
  padding: 100px 40px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
}

.why-ferotect-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.why-ferotect-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(25,168,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
}

.why-ferotect-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.why-ferotect-header {
  text-align: center;
  margin-bottom: 50px;
}

.why-ferotect-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #19A8FF;
  margin-bottom: 12px;
  padding: 8px 16px;
  background: rgba(25,168,255,0.08);
  border-radius: 20px;
}

.why-ferotect-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0a1e2e;
  margin: 0;
  line-height: 1.2;
}

.highlight-gradient {
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.why-ferotect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

.why-ferotect-card {
  background: white;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid rgba(25,168,255,0.1);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
}

.why-ferotect-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #19A8FF, #00D9FF);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.why-ferotect-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(25,168,255,0.12);
  border-color: rgba(25,168,255,0.2);
}

.why-ferotect-card:hover::before {
  transform: scaleX(1);
}

.why-ferotect-card-large {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #0a1e2e 0%, #1a3a52 100%);
  border: none;
}

.why-ferotect-card-large::before {
  display: none;
}

.why-ferotect-card-large .why-card-icon {
  width: 70px;
  height: 70px;
  background: rgba(25,168,255,0.15);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.why-ferotect-card-large .why-card-icon svg {
  width: 36px;
  height: 36px;
  color: #19A8FF;
}

.why-ferotect-card-large .why-card-content h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin: 0 0 12px 0;
}

.why-ferotect-card-large .why-card-content p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0;
}

.why-card-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(25,168,255,0.2);
  color: #19A8FF;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.why-card-number {
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}

.why-ferotect-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0a1e2e;
  margin: 0 0 8px 0;
}

.why-ferotect-card p {
  font-size: 0.9rem;
  color: #536471;
  line-height: 1.5;
  margin: 0;
}

.why-ferotect-card-cta {
  background: linear-gradient(135deg, rgba(25,168,255,0.08) 0%, rgba(25,168,255,0.03) 100%);
  border: 2px dashed rgba(25,168,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.why-ferotect-card-cta:hover {
  border-style: solid;
  background: linear-gradient(135deg, rgba(25,168,255,0.12) 0%, rgba(25,168,255,0.06) 100%);
}

.why-card-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.why-cta-emoji {
  font-size: 2.5rem;
  margin-bottom: 4px;
}

.why-ferotect-card-cta h3 {
  color: #0a1e2e;
  margin: 0;
}

.why-ferotect-card-cta p {
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.why-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.why-cta-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.why-cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(25,168,255,0.3);
}

.why-cta-btn:hover svg {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .why-ferotect-grid {
    grid-template-columns: 1fr;
  }
  
  .why-ferotect-card-large {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ===== SOLCELLER PAGE STYLES ===== */
/* HERO */
.solar-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 180px 60px 80px;
  background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('money1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  margin: -140px calc(-50vw + 50%) -4rem;
  padding-top: 220px;
  width: 100vw;
  z-index: 1;
  overflow: hidden;
}

.solar-hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(255,255,255,1) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.solar-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: heroFadeIn 1s ease-out;
}
.solar-hero .frosted-box {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.2s forwards;
}

.solar-hero-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #19A8FF;
  margin-bottom: 16px;
  padding: 8px 16px;
  background: rgba(25,168,255,0.15);
  border: 1px solid rgba(25,168,255,0.3);
  border-radius: 30px;
  backdrop-filter: blur(10px);
}

.solar-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 20px 0;
  color: #FFF;
  font-weight: 900;
  letter-spacing: -1px;
}

.hero-gradient {
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 50%, #19A8FF 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.solar-hero-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 32px 0;
  max-width: 480px;
  line-height: 1.6;
  font-weight: 400;
}

.solar-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 40px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  color: white;
  padding: 14px 28px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 10px 40px rgba(25,168,255,0.4);
}

.btn-hero-primary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-hero-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 60px rgba(25,168,255,0.5);
}

.btn-hero-primary:hover svg {
  transform: translateX(4px);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  color: white;
  padding: 14px 28px;
  border-radius: 60px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.05);
}

.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}

.solar-hero-trust {
  display: flex;
  align-items: center;
  gap: 24px;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
}

.trust-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.trust-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.2);
}

.solar-hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.6);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 5;
}

.solar-hero-scroll .scroll-line {
  width: 50px;
  height: 2px;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}

.solar-hero-scroll .scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #19A8FF;
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { left: -100%; }
  50% { left: 0; }
  100% { left: 100%; }
}

/* EXPERTISE */
.solar-expertise {
  padding: 100px 40px 100px 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  position: relative;
  overflow: visible;
  margin-top: -40px;
  padding-top: 120px;
  border-top: none;
}

.solar-expertise::before {
  display: none;
}

.solar-expertise-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.solar-expertise-column {
  display: flex;
  flex-direction: column;
}

.solar-expertise-text h2 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 900;
  color: #0a1e2e;
  margin: 0 0 0.8rem 0;
  line-height: 1.2;
  letter-spacing: -1.2px;
}

.solar-expertise-text h2 .expertise-highlight {
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.solar-expertise-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #19A8FF;
  margin-bottom: 1rem;
  padding: 8px 16px;
  background: rgba(25,168,255,0.08);
  border: 1px solid rgba(25,168,255,0.15);
  border-radius: 20px;
}

.solar-expertise-intro {
  display: none;
}

.solar-expertise-tagline {
  font-size: 1.1rem;
  color: #536471;
  margin: 0 0 3rem 0;
  line-height: 1.6;
  font-weight: 500;
}

.solar-expertise-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.solar-expertise-feature {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 0;
  border: none;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}

.solar-expertise-feature:hover {
  transform: translateX(12px);
}

.solar-expertise-feature::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1.25rem;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #19A8FF, rgba(25,168,255,0));
  transition: width 0.4s ease;
}

.solar-expertise-feature:hover::after {
  width: 100%;
}

.solar-expertise-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.05));
  border: 1.5px solid rgba(25,168,255,0.2);
  border-radius: 14px;
  color: #19A8FF;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.solar-expertise-feature:hover .solar-expertise-icon {
  background: linear-gradient(135deg, rgba(25,168,255,0.15), rgba(25,168,255,0.1));
  border-color: rgba(25,168,255,0.4);
  box-shadow: 0 8px 20px rgba(25,168,255,0.1);
}

.solar-expertise-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.solar-expertise-feature h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a1e2e;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.3px;
}

.solar-expertise-feature p {
  font-size: 0.95rem;
  color: #536471;
  line-height: 1.5;
  margin: 0;
}

.solar-expertise-visual {
  position: relative;
  display: flex;
  margin-top: 120px;
}

.solar-expertise-image {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(25,168,255,0.12);
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
}

.solar-expertise-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solar-expertise-list {
  display: none;
}

.solar-expertise-item {
  display: none;
}

.solar-expertise-number {
  display: none;
}

.solar-expertise-content {
  display: none;
}

/* PRODUCTS */
.solar-products {
  padding: 80px 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  position: relative;
  scroll-margin-top: 100px;
}

.solar-products::before {
  display: none;
}

.solar-products-section-header {
  max-width: 1200px;
  margin: 0 auto 60px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.solar-products-section-header h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #0a1e2e;
  margin: 0 0 12px 0;
  line-height: 1.2;
  position: relative;
}

.solar-products-section-header h2 .highlight-text {
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.solar-products-section-header p {
  font-size: 0.95rem;
  color: #536471;
  margin: 0 0 24px 0;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.solar-products-subtext {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 12px;
}

.badge-feature {
  font-size: 0.85rem;
  color: #19A8FF;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

.solar-products-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  z-index: 2;
}

.solar-product-card {
  position: relative;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 15px 40px rgba(25,168,255,0.08);
  border: 1px solid rgba(25,168,255,0.1);
}

.solar-product-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 35px 100px rgba(25,168,255,0.15);
  border-color: rgba(25,168,255,0.2);
}

.solar-product-card:hover .solar-card-image {
  transform: scale(1.08);
}

.solar-product-card:hover .solar-card-overlay {
  opacity: 0.8;
}

.solar-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.solar-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.85) 100%);
  opacity: 0.75;
  transition: opacity 0.5s ease;
}

.solar-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px;
  color: white;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}

.solar-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.solar-card-tag {
  display: inline-block;
  background: rgba(25,168,255,0.95);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.solar-card-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
  color: #ffffff;
}

.solar-card-content p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.solar-card-cta {
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.solar-product-card:hover .solar-card-cta {
  gap: 10px;
}

.solar-product-card:nth-child(2) .solar-card-content {
  bottom: 20px;
}

/* PLANNING */
.solar-planning {
  padding: 80px 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  position: relative;
  overflow: hidden;
}

.solar-planning::before {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,217,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.solar-planning-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.solar-planning-image {
  position: relative;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
}

.solar-planning-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solar-planning-badge {
  display: none;
}

.solar-planning-cta {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  backdrop-filter: blur(12px);
  padding: 18px 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(25,168,255,0.1);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 10;
  overflow: hidden;
}

.solar-planning-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(25,168,255,0.08), transparent);
  transition: left 0.6s ease;
}

.solar-planning-cta:hover::before {
  left: 100%;
}

.solar-planning-cta:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 50px rgba(25,168,255,0.2), 0 0 0 2px rgba(25,168,255,0.3);
}

.solar-planning-cta-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25,168,255,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(25,168,255,0); }
}

.solar-planning-cta-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.solar-planning-cta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.solar-planning-cta-label {
  font-size: 0.7rem;
  color: #19A8FF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.solar-planning-cta:hover .solar-planning-cta-label {
  opacity: 1;
  max-height: 20px;
}

.solar-planning-cta-action {
  font-size: 1rem;
  color: #0a1e2e;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cta-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.solar-planning-cta:hover .cta-arrow {
  transform: translateX(4px);
}

.solar-planning-text h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #0a1e2e;
  margin: 0 0 12px 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.solar-planning-intro {
  font-size: 0.75rem;
  color: #19A8FF;
  margin: 0 0 8px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.solar-planning-steps {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
  position: relative;
}

.solar-planning-steps::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, rgba(25,168,255,0.3), transparent);
}

.solar-planning-step {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
  align-items: flex-start;
}

.solar-step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(25,168,255,0.25);
  position: relative;
  z-index: 3;
}

.solar-planning-step-text h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0a1e2e;
  margin: 0 0 4px 0;
}

.solar-planning-step-text p {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* FINAL CTA */
.solar-cta-final {
  padding: 140px 40px;
  background-color: #0a1e2e;
  background-image: linear-gradient(135deg, rgba(10,30,46,0.85) 0%, rgba(26,58,82,0.8) 100%), url('./money7.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.solar-cta-final::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(25,168,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.solar-cta-final::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,217,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.solar-cta-final-content {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-final-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #19A8FF;
  margin-bottom: 16px;
  padding: 8px 16px;
  background: rgba(25,168,255,0.15);
  border: 1px solid rgba(25,168,255,0.3);
  border-radius: 30px;
  backdrop-filter: blur(10px);
}

.solar-cta-final h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: white;
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.solar-cta-final p {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 32px 0;
  font-weight: 400;
  line-height: 1.6;
}

.btn-cta-final {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  color: white;
  padding: 14px 28px;
  border-radius: 60px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 10px 40px rgba(25,168,255,0.4);
}

.btn-cta-final svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-cta-final:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 60px rgba(25,168,255,0.5);
}

.btn-cta-final:hover svg {
  transform: translateX(4px);
}

/* ANIMATIONS */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes imageFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}



/* Responsiv */
@media (max-width: 1024px) {
  .solar-hero { 
    padding: 160px 40px 80px;
    min-height: 90vh; 
  }
  .solar-hero-title { font-size: clamp(1.8rem, 4vw, 2.5rem); }
  .solar-hero-lead { font-size: 1.1rem; }
  .solar-expertise-wrapper { grid-template-columns: 1fr; gap: 4rem; }
  .solar-planning-wrapper { grid-template-columns: 1fr; gap: 4rem; }
  .solar-products-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .solar-product-card { height: 380px; }
  .solar-expertise-image, .solar-planning-image { height: 400px; }
  .expertise-cards { grid-template-columns: 1fr; }
  .planning-features { grid-template-columns: 1fr; }
  .solar-hero-trust { gap: 20px; }
  .trust-number { font-size: 1.5rem; }
}

@media (max-width: 768px) {
  .solar-hero { 
    min-height: 100vh;
    min-height: 100svh;
    padding: 160px 24px 60px;
    background-attachment: scroll;
  }
  .solar-hero::before {
    height: 120px;
  }
  .solar-hero-tag {
    font-size: 0.65rem;
    padding: 8px 16px;
    letter-spacing: 2px;
  }
  .solar-hero-title { 
    font-size: clamp(1.4rem, 5vw, 1.8rem); 
    letter-spacing: -0.5px;
    margin-bottom: 12px;
  }
  .solar-hero-lead { 
    font-size: 1rem; 
    line-height: 1.6; 
    margin-bottom: 30px;
  }
  .solar-hero-ctas { 
    margin-bottom: 40px;
    flex-direction: column;
  }
  .btn-hero-primary {
    padding: 14px 24px;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
  }
  .btn-hero-secondary {
    padding: 12px 24px;
    font-size: 0.85rem;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .solar-hero-trust {
    flex-wrap: wrap;
    gap: 16px;
  }
  .trust-number {
    font-size: 1.4rem;
  }
  .trust-label {
    font-size: 0.7rem;
  }
  .trust-divider {
    height: 30px;
  }
  .solar-hero-scroll {
    left: 24px;
    bottom: 30px;
  }
  .btn-primary, .btn-ghost { padding: 0.8rem 1.5rem; font-size: 0.95rem; }
  
  .solar-expertise { padding: 4rem 1rem 3rem 1rem; margin-bottom: 2rem; margin-top: 6rem; }
  .solar-expertise-wrapper { grid-template-columns: 1fr; gap: 2.5rem; }
  .solar-expertise-text h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 1.2rem; }
  .solar-expertise-tagline { font-size: 1rem; margin-bottom: 2rem; }
  .solar-expertise-features { gap: 2rem; }
  .solar-expertise-feature { gap: 1.2rem; }
  .solar-expertise-icon { width: 48px; height: 48px; }
  .solar-expertise-icon svg { width: 24px; height: 24px; }
  .solar-expertise-feature h4 { font-size: 1rem; }
  .solar-expertise-feature p { font-size: 0.9rem; }
  .solar-expertise-visual { margin-top: 1rem; }
  .solar-expertise-image { aspect-ratio: 3/4; }
  
  .solar-products { padding: 4rem 1rem 3rem 1rem; }
  .solar-products-section-header { margin-bottom: 40px; }
  .solar-products-section-header h2 { margin-bottom: 10px; }
  .solar-products-subtext { gap: 12px; font-size: 0.8rem; }
  .badge-feature { font-size: 0.75rem; }
  .solar-products-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .solar-product-card { height: 320px; }
  .solar-card-content { padding: 20px; }
  .solar-card-content h3 { font-size: 1.1rem; margin-bottom: 8px; }
  .solar-card-content p { font-size: 0.85rem; margin-bottom: 12px; }
  .solar-card-cta { font-size: 0.8rem; }
  
  .solar-planning { padding: 5rem 1rem; }
  .solar-planning-wrapper { grid-template-columns: 1fr; gap: 2.5rem; }
  .solar-planning-image { height: 260px; }
  .solar-planning-steps::before { left: 29px; }
  .solar-step-circle { width: 60px; height: 60px; font-size: 1.5rem; }
  .solar-step-text h4 { font-size: 1.1rem; }
  
  .solar-cta-final { padding: 2.5rem 1rem; }
  .solar-cta-final-content { max-width: 100%; padding: 2rem; }
  .solar-cta-final-content h2 { font-size: 1.8rem; }
  
  .economics-grid { grid-template-columns: 1fr; }
  .economics-card { padding: 1.5rem; }
  .economics-value { font-size: 2rem; }

  /* ===== FASAD PAGE - PREMIUM STYLING ===== */
  html.fasad-page { scroll-behavior: smooth; }
  .fasad-topbar { background: linear-gradient(135deg, rgba(42,54,72,0.65), rgba(42,54,72,0.65)), url('fasad1.jpg') center/cover fixed no-repeat; position: relative; z-index: 10; }
  .fasad-header { background: linear-gradient(135deg, rgba(42,54,72,0.65), rgba(42,54,72,0.65)), url('fasad1.jpg') center/cover fixed no-repeat; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,0.1); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
  .fasad-header::before { content: ''; position: absolute; inset: 0; background: #ffffff; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: -1; }
  .fasad-header.scrolled::before { opacity: 1; }
  .fasad-header.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
  .fasad-header.scrolled .nav-links a { color: var(--text); }
  .fasad-header.scrolled .hamburger span { background: #111; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
  .fasad-header .nav-title { color: #19A8FF; transition: color 0.3s ease; }
  .fasad-header.scrolled .nav-title { color: #19A8FF; }
  .fasad-header .nav-links a { color: rgba(255,255,255,0.95); transition: color 0.3s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
  .fasad-header .hamburger span { transition: all 0.3s ease; background: rgba(255,255,255,0.9); }
  .fasad-header.scrolled .hamburger span { background: #111; }
  .fasad-hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; background: linear-gradient(135deg, rgba(42,54,72,0.65), rgba(42,54,72,0.65)), url('fasad1.jpg') center/cover fixed no-repeat; margin: 0 calc(-50vw + 50%); width: 100vw; padding-left: calc(50vw - 50%); }
  .fasad-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(25,168,255,0.15), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(25,168,255,0.08), transparent 60%); pointer-events: none; z-index: 1; }
  .fasad-hero-content { position: relative; z-index: 2; max-width: 850px; margin-left: 5%; margin-top: -12rem; animation: fadeInUp 0.9s ease 0.2s forwards; opacity: 0; }
  .fasad-hero-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3em; color: #00D9FF; font-weight: 900; margin-bottom: 0.8rem; text-shadow: 0 2px 8px rgba(0,0,0,0.4); display: inline-block; padding: 0.5rem 1rem; background: rgba(0,217,255,0.1); border-radius: 8px; border: 1px solid rgba(0,217,255,0.3); }
  .fasad-hero-title { font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.2; margin-bottom: 0.8rem; color: #fff; font-weight: 900; letter-spacing: -0.8px; text-shadow: 0 6px 20px rgba(0,0,0,0.6); }
  .hero-gradient { background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .fasad-hero-lead { font-size: 0.95rem; color: rgba(255,255,255,0.92); margin-bottom: 2.2rem; max-width: 650px; line-height: 1.75; text-shadow: 0 3px 12px rgba(0,0,0,0.4); font-weight: 500; }
  .fasad-hero-ctas { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
  .btn-hero-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.1rem 2.2rem; background: linear-gradient(135deg, #19A8FF 0%, #0088CC 100%); color: #fff; border-radius: 10px; font-weight: 800; font-size: 0.95rem; text-decoration: none; transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 20px 50px rgba(25,168,255,0.45), 0 0 40px rgba(25,168,255,0.3); border: 1.5px solid rgba(255,255,255,0.2); position: relative; overflow: hidden; letter-spacing: -0.3px; white-space: nowrap; }
  .btn-hero-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: buttonShine 2.5s infinite; z-index: 0; }
  .btn-hero-primary span { position: relative; z-index: 1; }
  .btn-hero-primary svg { width: 18px; height: 18px; stroke-width: 3; position: relative; z-index: 1; }
  .btn-hero-primary:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 30px 70px rgba(25,168,255,0.55), 0 0 60px rgba(25,168,255,0.4); border-color: rgba(255,255,255,0.4); }
  .btn-hero-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 1.1rem 2rem; background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.25); border-radius: 10px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all 0.4s ease; backdrop-filter: blur(10px); letter-spacing: -0.3px; white-space: nowrap; }
  .btn-hero-secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); transform: translateY(-4px); }
  .fasad-expertise { padding: 8rem 2rem; background: linear-gradient(180deg, rgba(25,168,255,0.01) 0%, rgba(25,168,255,0.03) 50%, transparent 100%); position: relative; overflow: hidden; max-width: 100vw; }
  .fasad-expertise::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(25,168,255,0.3), transparent); }
  .fasad-expertise-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6rem; align-items: center; }
  .fasad-expertise-content { position: relative; z-index: 2; }
  .fasad-expertise-content h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.15; margin-bottom: 1rem; color: var(--text); font-weight: 900; letter-spacing: -1px; }
  .fasad-expertise-highlight { background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900; }
  .fasad-expertise-intro { font-size: 1.15rem; color: var(--text-soft); margin-bottom: 3.5rem; line-height: 1.85; font-weight: 500; max-width: 520px; }
  .fasad-benefits { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .fasad-benefit { padding: 2.2rem; background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); border: 1.5px solid rgba(25,168,255,0.15); border-radius: 20px; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; display: flex; gap: 1.8rem; align-items: flex-start; }
  .fasad-benefit::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(25,168,255,0.08), transparent); opacity: 0; transition: opacity 0.4s ease; z-index: 0; }
  .fasad-benefit:hover { background: rgba(255,255,255,0.07); border-color: rgba(25,168,255,0.3); box-shadow: 0 15px 50px rgba(25,168,255,0.08), inset 0 1px 0 rgba(255,255,255,0.1); transform: translateY(-4px); }
  .fasad-benefit:hover::before { opacity: 1; }
  .fasad-benefit-icon { width: 56px; height: 56px; min-width: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(25,168,255,0.2), rgba(0,217,255,0.1)); display: flex; align-items: center; justify-content: center; color: #19A8FF; font-size: 1.8rem; font-weight: 900; position: relative; z-index: 1; flex-shrink: 0; box-shadow: 0 8px 20px rgba(25,168,255,0.15); }
  .fasad-benefit-content { position: relative; z-index: 1; }
  .fasad-benefit h3 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 0.6rem; letter-spacing: -0.3px; }
  .fasad-benefit p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.7; font-weight: 500; }
  .fasad-expertise-visual { position: relative; }
  .fasad-expertise-visual::before { content: ''; position: absolute; inset: -30px; background: radial-gradient(ellipse at 60% 40%, rgba(25,168,255,0.15), transparent 70%); filter: blur(40px); z-index: 0; }
  .fasad-expertise-image { position: relative; border-radius: 28px; overflow: hidden; height: 550px; box-shadow: 0 40px 100px rgba(25,168,255,0.15), 0 0 60px rgba(25,168,255,0.1); z-index: 1; animation: fadeInUp 0.9s ease 0.3s forwards; opacity: 0; }
  .fasad-expertise-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1); }
  .fasad-expertise-image:hover img { transform: scale(1.08); }
  .fasad-expertise-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(25,168,255,0.1), transparent); border-radius: 28px; pointer-events: none; z-index: 2; }
  .fasad-process { background: linear-gradient(135deg, rgba(42,54,72,0.7), rgba(42,54,72,0.7)), url('fasad3.jpg') center/cover fixed no-repeat; padding: 8rem 2rem; position: relative; }
  .fasad-process::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(25,168,255,0.12), transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(25,168,255,0.08), transparent 60%); pointer-events: none; z-index: 1; }
  .fasad-process-wrapper { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }
  .fasad-process-header { text-align: center; margin-bottom: 6rem; }
  .fasad-process-header h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); color: #fff; margin-bottom: 1.5rem; font-weight: 900; letter-spacing: -0.8px; text-shadow: 0 4px 16px rgba(0,0,0,0.4); }
  .fasad-process-header p { font-size: 1.15rem; color: rgba(255,255,255,0.9); max-width: 700px; margin: 0 auto; line-height: 1.8; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
  .fasad-process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .fasad-process-step { background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); border: 1.5px solid rgba(25,168,255,0.2); border-radius: 24px; padding: 2.5rem; text-align: center; transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; }
  .fasad-process-step::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(25,168,255,0.1), transparent); animation: shimmer 3s infinite; z-index: 0; }
  .fasad-process-step:hover { transform: translateY(-12px); background: rgba(255,255,255,0.12); border-color: rgba(25,168,255,0.4); box-shadow: 0 20px 50px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
  .fasad-process-number { font-size: 3.5rem; font-weight: 900; background: linear-gradient(135deg, var(--blue), #00D9FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; position: relative; z-index: 1; }
  .fasad-process-step h3 { font-size: 1.3rem; color: #fff; margin-bottom: 1rem; font-weight: 800; letter-spacing: -0.3px; position: relative; z-index: 1; }
  .fasad-process-step p { font-size: 0.95rem; color: rgba(255,255,255,0.85); line-height: 1.7; position: relative; z-index: 1; }
  .fasad-showcase { padding: 8rem 2rem; max-width: 1400px; margin: 0 auto; }
  .fasad-showcase-header { text-align: center; margin-bottom: 6rem; }
  .fasad-showcase-header h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--text); margin-bottom: 1rem; font-weight: 900; letter-spacing: -0.8px; }
  .fasad-showcase-intro { font-size: 1.1rem; color: var(--text-soft); max-width: 700px; margin: 0 auto; line-height: 1.8; }
  .fasad-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .fasad-showcase-card { position: relative; height: 450px; border-radius: 28px; overflow: hidden; cursor: pointer; }
  .fasad-showcase-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1); }
  .fasad-showcase-card:hover .fasad-showcase-card-image { transform: scale(1.12); }
  .fasad-showcase-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(25,168,255,0.2), rgba(42,54,72,0.3)); opacity: 0; transition: opacity 0.5s ease; z-index: 2; }
  .fasad-showcase-card:hover::before { opacity: 1; }
  .fasad-showcase-card-content { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 3rem 2rem; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%); z-index: 3; }
  .fasad-showcase-card-title { font-size: 1.8rem; color: #fff; font-weight: 900; text-align: center; letter-spacing: -0.5px; text-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .fasad-showcase-card::after { content: ''; position: absolute; inset: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); border-radius: 28px; pointer-events: none; z-index: 4; }
  .fasad-features { padding: 8rem 2rem; background: linear-gradient(180deg, rgba(25,168,255,0.02) 0%, rgba(25,168,255,0.04) 50%, rgba(25,168,255,0.02) 100%); max-width: 1400px; margin: 0 auto; }
  .fasad-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .fasad-feature-card { background: #fff; border: 1px solid rgba(25,168,255,0.1); border-radius: 20px; padding: 3rem; text-align: center; transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 10px 32px rgba(25,168,255,0.06), inset 0 1px 0 rgba(255,255,255,0.6); }
  .fasad-feature-card:hover { transform: translateY(-8px); border-color: rgba(25,168,255,0.25); box-shadow: 0 20px 60px rgba(25,168,255,0.12), inset 0 1px 0 rgba(255,255,255,0.8); }
  .fasad-feature-icon { width: 70px; height: 70px; border-radius: 20px; background: linear-gradient(135deg, rgba(25,168,255,0.15), rgba(25,168,255,0.05)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--blue); font-size: 2rem; }
  .fasad-feature-card h3 { font-size: 1.3rem; color: var(--text); margin-bottom: 1rem; font-weight: 800; letter-spacing: -0.3px; }
  .fasad-feature-card p { font-size: 0.95rem; color: var(--text-soft); line-height: 1.7; }
  #fasad-contact-cta { padding: 8rem 2rem; background: linear-gradient(135deg, rgba(42,54,72,0.5), rgba(42,54,72,0.5)), url('fasad6.jpg') center/cover fixed no-repeat; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  #fasad-contact-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 50%, rgba(25,168,255,0.15), transparent 50%), radial-gradient(circle at 100% 100%, rgba(25,168,255,0.1), transparent 50%); pointer-events: none; z-index: 1; }
  .fasad-cta-container { position: relative; z-index: 2; text-align: center; padding: 5rem 3rem; background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); border: 1.5px solid rgba(25,168,255,0.25); border-radius: 32px; max-width: 900px; margin: 0 auto; box-shadow: 0 30px 90px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
  .fasad-cta-container h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1.5rem; color: #fff; font-weight: 900; letter-spacing: -0.8px; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.95) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; text-shadow: 0 4px 12px rgba(0,0,0,0.4); }
  .fasad-cta-container p { margin-bottom: 3rem; font-size: 1.15rem; color: rgba(255,255,255,0.95); line-height: 1.85; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
  .fasad-cta-container .btn-primary { padding: 1.5rem 3.5rem; font-size: 1.15rem; font-weight: 800; background: linear-gradient(135deg, var(--blue) 0%, #0088CC 100%); box-shadow: 0 20px 50px rgba(25,168,255,0.45), 0 0 40px rgba(25,168,255,0.3); border: 1.5px solid rgba(255,255,255,0.2); transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1); text-shadow: 0 2px 4px rgba(0,0,0,0.2); letter-spacing: -0.5px; color: #fff; position: relative; overflow: hidden; }
  .fasad-cta-container .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: buttonShine 2.5s infinite; z-index: 0; }
  .fasad-cta-container .btn-primary span { position: relative; z-index: 1; }
  .fasad-cta-container .btn-primary:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 30px 70px rgba(25,168,255,0.55), 0 0 60px rgba(25,168,255,0.4); border-color: rgba(255,255,255,0.4); }
  @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
}

/* RESPONSIVE FASAD */
@media (max-width: 1024px) {
  .fasad-expertise-grid { grid-template-columns: 1fr; gap: 4rem; }
  .fasad-expertise-image { height: 400px; }
  .fasad-process-steps { grid-template-columns: repeat(2, 1fr); }
  .fasad-showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .fasad-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .fasad-hero-content { margin-left: 0; }
  .fasad-hero-ctas { flex-direction: column; width: 100%; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }
  .fasad-expertise { padding: 4rem 1.5rem; }
  .fasad-expertise-grid { gap: 3rem; }
  .fasad-expertise-image { height: 350px; }
  .fasad-benefit { padding: 1.8rem; gap: 1.2rem; }
  .fasad-benefit-icon { width: 48px; height: 48px; font-size: 1.4rem; }
  .fasad-benefit h3 { font-size: 1.1rem; }
  .fasad-process { padding: 4rem 1.5rem; }
  .fasad-showcase { padding: 4rem 1.5rem; }
  .fasad-features { padding: 4rem 1.5rem; }
  .fasad-showcase-card { height: 350px; }
}

@media (max-width: 600px) {
  .fasad-hero { background-attachment: scroll; }
  .fasad-hero-content { padding-top: 2rem; }
  .fasad-hero-tag { font-size: 0.6rem; margin-bottom: 0.6rem; padding: 0.4rem 0.8rem; }
  .fasad-hero-title { font-size: clamp(1.4rem, 4vw, 1.8rem); margin-bottom: 0.6rem; }
  .fasad-hero-lead { font-size: 0.85rem; margin-bottom: 1.5rem; }
  .fasad-hero-ctas { gap: 0.6rem; }
  .btn-hero-primary { padding: 0.95rem 1.4rem; font-size: 0.8rem; }
  .btn-hero-secondary { padding: 0.95rem 1.4rem; font-size: 0.8rem; }
  .fasad-expertise { padding: 3rem 1.5rem; }
  .fasad-benefit { gap: 1rem; }
  .fasad-benefit-icon { width: 40px; height: 40px; font-size: 1rem; }
  .fasad-expertise-image { height: 350px; }
  .fasad-process { padding: 3rem 1.5rem; background-attachment: scroll; }
  .fasad-process-header h2 { font-size: 1.8rem; }
  .fasad-process-steps { grid-template-columns: 1fr; gap: 1.2rem; }
  .fasad-process-step { padding: 1.8rem; }
  .fasad-process-number { font-size: 2.5rem; }
  .fasad-showcase { padding: 3rem 1.5rem; }
  .fasad-showcase-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .fasad-showcase-card { height: 300px; }
  .fasad-features { padding: 3rem 1.5rem; }
  .fasad-features-grid { grid-template-columns: 1fr; }
  #fasad-contact-cta { padding: 3rem 1.5rem; background-attachment: scroll; }
  .fasad-cta-container { padding: 2rem 1.5rem; }
  .fasad-cta-container h2 { font-size: 1.8rem; margin-bottom: 1rem; }
  .fasad-cta-container p { font-size: 0.95rem; margin-bottom: 2rem; }
  .fasad-cta-container .btn-primary { padding: 1.2rem 2rem; font-size: 1rem; width: 100%; }
}

/* ==================== EXPERTISE SECTION ==================== */
.expertise-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.expertise-wrapper .section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--blue) 0%, #0088CC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  line-height: 1.15;
  text-shadow: 0 4px 20px rgba(25, 168, 255, 0.2);
  position: relative;
  z-index: 1;
}

.expertise-wrapper .section-sub {
  font-size: 0.95rem;
  color: var(--text-soft);
  max-width: 600px;
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.expertise-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.expertise-item {
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1.5px solid rgba(25, 168, 255, 0.2);
  border-radius: 24px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: slideUp 0.8s ease-out backwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(25, 168, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.1);
}

.expertise-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 0% 0%, rgba(25, 168, 255, 0.1), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.expertise-item:nth-child(1) { animation-delay: 0.1s; }
.expertise-item:nth-child(2) { animation-delay: 0.2s; }
.expertise-item:nth-child(3) { animation-delay: 0.3s; }
.expertise-item:nth-child(4) { animation-delay: 0.4s; }

.expertise-item:hover {
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.12), rgba(25, 168, 255, 0.08));
  border-color: rgba(25, 168, 255, 0.4);
  transform: translateY(-12px);
  box-shadow: 0 30px 80px rgba(25, 168, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}

.expertise-content {
  position: relative;
  z-index: 1;
}

.expertise-icon {
  width: 70px;
  height: 70px;
  color: var(--blue);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.12), rgba(25, 168, 255, 0.05));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(25, 168, 255, 0.15);
}

.expertise-icon svg {
  width: 100%;
  height: 100%;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.expertise-item h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.expertise-item p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
}

@media (max-width: 1024px) {
  .expertise-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .expertise-wrapper {
    padding: 5rem 1.5rem;
  }
  
  .expertise-item {
    padding: 2rem;
  }
  
  .expertise-icon {
    width: 60px;
    height: 60px;
  }
  
  .expertise-item h3 {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .expertise-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .expertise-wrapper {
    padding: 4rem 1rem;
  }
  
  .expertise-item {
    padding: 1.8rem;
  }
  
  .expertise-icon {
    width: 56px;
    height: 56px;
  }
  
  .expertise-item h3 {
    font-size: 1.15rem;
  }
  
  .expertise-item p {
    font-size: 0.9rem;
  }
}

/* ==================== SERVICES SECTION ==================== */
.services-section {
  background: linear-gradient(180deg, rgba(25,168,255,0.02) 0%, rgba(25,168,255,0.04) 50%, rgba(25,168,255,0.02) 100%);
}

.services-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.services-header-content {
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.services-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.15), rgba(25, 168, 255, 0.05));
  padding: 0.65rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(25, 168, 255, 0.2);
  box-shadow: 0 4px 12px rgba(25, 168, 255, 0.08);
}

.services-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--text) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.services-sub {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 500;
  color: var(--text-soft);
}

.services-wrapper .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 3rem;
  margin-top: 2rem;
}

.services-wrapper .service-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1.5px solid rgba(25, 168, 255, 0.15);
  border-radius: 28px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 15px 50px rgba(25, 168, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}

.services-wrapper .service-card:hover {
  border-color: rgba(25, 168, 255, 0.3);
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.15), rgba(25, 168, 255, 0.1));
  transform: translateY(-16px);
  box-shadow: 0 40px 100px rgba(25, 168, 255, 0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

.services-wrapper .service-card-featured {
  border: 2px solid rgba(25, 168, 255, 0.25);
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.12), rgba(25, 168, 255, 0.06));
}

.services-wrapper .service-card-featured:hover {
  border-color: rgba(25, 168, 255, 0.4);
}

.services-wrapper .service-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.1), rgba(25, 168, 255, 0.05));
  overflow: hidden;
  position: relative;
}

.services-wrapper .service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.services-wrapper .service-card:hover .service-image img {
  transform: scale(1.08);
}

.services-wrapper .service-label {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, var(--blue), #0088CC);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(25, 168, 255, 0.3);
}

.services-wrapper .service-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.08), rgba(25, 168, 255, 0.04));
  color: var(--text-soft);
}

.services-wrapper .placeholder-icon {
  width: 100px;
  height: 100px;
  color: rgba(25, 168, 255, 0.25);
}

.services-wrapper .placeholder-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1;
}

.services-wrapper .placeholder-text {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(25, 168, 255, 0.4);
}

.services-wrapper .service-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1.5rem;
}

.services-wrapper .service-header-content {
  flex-grow: 1;
}

.services-wrapper .service-card h3 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
  color: var(--text);
  letter-spacing: -0.4px;
  line-height: 1.3;
}

.services-wrapper .service-intro {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-soft);
  margin: 0;
}

.services-wrapper .service-divider {
  width: 50px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--blue), transparent);
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
}

.services-wrapper .service-features {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.services-wrapper .service-features li {
  font-size: 0.9rem;
  color: var(--text-soft);
  padding: 0.6rem 0 0.6rem 2rem;
  position: relative;
  line-height: 1.6;
  font-weight: 500;
}

.services-wrapper .service-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(25, 168, 255, 0.15);
}

.services-wrapper .btn-service {
  display: inline-block;
  padding: 1.1rem 2rem;
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.9), rgba(0, 136, 204, 0.9));
  color: white;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.3px;
  box-shadow: 0 12px 30px rgba(25, 168, 255, 0.25);
}

.services-wrapper .btn-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(25, 168, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, var(--blue), #0088CC);
}

.services-wrapper .btn-service-primary {
  background: linear-gradient(135deg, var(--blue), #0088CC);
  box-shadow: 0 15px 40px rgba(25, 168, 255, 0.3);
}

.services-wrapper .btn-service-secondary {
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.85), rgba(0, 136, 204, 0.85));
  border-color: rgba(25, 168, 255, 0.3);
}

@media (max-width: 1024px) {
  .services-wrapper .services-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .services-wrapper {
    padding: 6rem 1.5rem;
  }
  
  .services-wrapper .service-content {
    padding: 2.5rem;
  }
}

@media (max-width: 768px) {
  .services-wrapper {
    padding: 5rem 1rem;
  }
  
  .services-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }
  
  .services-sub {
    font-size: 1rem;
  }
  
  .services-wrapper .service-card h3 {
    font-size: 1.3rem;
  }
  
  .services-wrapper .service-content {
    padding: 2rem;
    gap: 1.2rem;
  }
  
  .services-wrapper .service-image {
    height: 250px;
  }
  
  .services-wrapper .service-label {
    top: 1rem;
    right: 1rem;
  }
}

/* ==================== END SERVICES SECTION ==================== */

/* ==================== FASAD WARNING SIGNS SECTION ==================== */
.warning-section {
  background: linear-gradient(180deg, rgba(255, 150, 0, 0.02) 0%, rgba(255, 100, 0, 0.04) 50%, rgba(25,168,255,0.02) 100%);
  padding: 8rem 0;
}

.warning-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.warning-header {
  margin-bottom: 5rem;
  text-align: center;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.warning-header .section-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-bottom: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), #0088CC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.warning-header .section-sub {
  font-size: 1.15rem;
  line-height: 1.9;
  color: #4a5568;
  font-weight: 500;
  letter-spacing: -0.2px;
  max-width: 800px;
}

/* WARNING SIGNS GRID */
.warning-signs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
}

.warning-sign-card {
  background: white;
  border: 2px solid rgba(255, 150, 0, 0.2);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 40px rgba(255, 150, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.warning-sign-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF9600, #FF6400);
}

.warning-sign-card:hover {
  border-color: rgba(255, 150, 0, 0.4);
  transform: translateY(-12px);
  box-shadow: 0 30px 80px rgba(255, 150, 0, 0.15);
}

.warning-number {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #FF9600, #FF6400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  width: fit-content;
}

.warning-sign-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.warning-sign-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
  flex-grow: 1;
}

.warning-severity {
  display: flex;
  gap: 0.5rem;
}

.severity-level {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.severity-level.critical {
  background: linear-gradient(135deg, rgba(255, 50, 0, 0.15), rgba(255, 30, 0, 0.08));
  color: #FF3200;
  border: 1px solid rgba(255, 50, 0, 0.3);
}

.severity-level.high {
  background: linear-gradient(135deg, rgba(255, 150, 0, 0.15), rgba(255, 100, 0, 0.08));
  color: #FF9600;
  border: 1px solid rgba(255, 150, 0, 0.3);
}

.severity-level.medium {
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.15), rgba(255, 150, 0, 0.08));
  color: #FFC800;
  border: 1px solid rgba(255, 200, 0, 0.3);
}

/* ACTION CARD */
.action-card {
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.12), rgba(25, 168, 255, 0.08));
  border: 2px solid rgba(25, 168, 255, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem;
}

.action-card::before {
  background: linear-gradient(90deg, var(--blue), #0088CC);
}

.action-card:hover {
  border-color: rgba(25, 168, 255, 0.4);
  box-shadow: 0 30px 80px rgba(25, 168, 255, 0.2);
}

.action-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.action-card h3 {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text);
}

.action-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.btn-warning {
  display: inline-block;
  padding: 1.1rem 2.5rem;
  background: linear-gradient(135deg, var(--blue), #0088CC);
  color: white;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.3px;
  box-shadow: 0 12px 30px rgba(25, 168, 255, 0.25);
  width: fit-content;
  margin: 0 auto;
}

.btn-warning:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(25, 168, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
  .warning-section {
    padding: 6rem 0;
  }

  .warning-signs-grid {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .warning-section {
    padding: 5rem 1rem;
  }

  .warning-wrapper {
    padding: 0 1rem;
  }

  .warning-signs-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .warning-number {
    font-size: 2.5rem;
  }

  .action-card {
    padding: 2rem;
  }

  .action-card h3 {
    font-size: 1.2rem;
  }
}

/* ==================== END FASAD WARNING SIGNS SECTION ==================== */


.cta-section::after { content: ''; position: absolute; bottom: -30%; left: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(25,168,255,0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.cta-container { position: relative; z-index: 2; text-align: center; padding: 5rem 3rem; background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); border: 1.5px solid rgba(25,168,255,0.25); border-radius: 32px; margin: 0 auto; max-width: 800px; box-shadow: 0 30px 80px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2); }
.cta-container h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1.2rem; color: var(--text); font-weight: 900; letter-spacing: -0.8px; line-height: 1.2; }
.cta-container p { font-size: 1.1rem; color: var(--text-soft); margin-bottom: 2.5rem; line-height: 1.8; font-weight: 500; }
.cta-container .btn-primary { padding: 1.4rem 3rem; font-size: 1.05rem; font-weight: 800; margin: 0 auto; display: inline-block; }
.cta-subtext { font-size: 0.95rem; color: var(--text-soft); margin-top: 2rem; font-style: italic; opacity: 0.9; }

/* ==================== TRE SAKER (FASAD EXPERTISE) ==================== */
.tre-saker {
  background: #fff;
  padding: 18rem 2rem 7rem;
  position: relative;
}
.tre-saker-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tre-saker-header {
  text-align: center;
  margin-bottom: 4rem;
}
.tre-saker-header .section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.8px;
  margin-bottom: 0.8rem;
}
.tre-saker-header .section-sub {
  font-size: 1.1rem;
  color: var(--text-soft);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-align: center;
  margin: 0 auto;
}
.tre-saker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.tre-saker-card {
  position: relative;
  background: linear-gradient(160deg, #f8fbff, #fff);
  border: 1.5px solid rgba(25,168,255,0.12);
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
}
.tre-saker-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.tre-saker-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #00D9FF);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.tre-saker-card:hover::before,
.tre-saker-card.tre-open::before {
  transform: scaleX(1);
}
.tre-saker-card:hover {
  border-color: rgba(25,168,255,0.3);
  box-shadow: 0 16px 48px rgba(25,168,255,0.12);
  transform: translateY(-6px);
}
.tre-saker-card.in-view:hover {
  transform: translateY(-6px);
}
.tre-saker-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.04));
  border-radius: 16px;
  color: var(--blue);
  transition: all 0.4s ease;
}
.tre-saker-card:hover .tre-saker-icon {
  background: linear-gradient(135deg, var(--blue), #0088CC);
  color: #fff;
  transform: scale(1.08);
}
.tre-saker-num {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}
.tre-saker-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.6rem;
  letter-spacing: -0.3px;
}
.tre-saker-short {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.tre-saker-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
  opacity: 0;
}
.tre-saker-card.tre-open .tre-saker-expand {
  max-height: 300px;
  opacity: 1;
}
.tre-saker-expand p {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.75;
  padding: 0.5rem 0 0.8rem;
  text-align: left;
}
.tre-saker-toggle {
  background: none;
  border: 2px solid rgba(25,168,255,0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto 0;
  cursor: pointer;
  color: var(--blue);
  transition: all 0.35s ease;
}
.tre-saker-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s ease;
}
.tre-saker-card.tre-open .tre-saker-toggle svg {
  transform: rotate(45deg);
}
.tre-saker-toggle:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
@media (max-width: 768px) {
  .tre-saker { padding: 4rem 1.5rem; }
  .tre-saker-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tre-saker-card { padding: 2rem 1.5rem 1.5rem; }
  .tre-saker-card:hover { transform: none; }
  .tre-saker-card.in-view:hover { transform: none; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .tre-saker { padding-top: 22rem; }
}
/* ==================== END TRE SAKER ==================== */

/* ==================== FASAD PROCESS ACCORDION SECTION ==================== */
.fasad-process {
  background: #fff;
  padding: 8rem 2rem;
  position: relative;
  overflow: hidden;
}
.fasad-process::before {
  display: none;
}
.fasad-process-inner {
  max-width: 820px;
  margin: 0 auto;
}
.fasad-process-header {
  text-align: center;
  margin-bottom: 4rem;
}
.fasad-process-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--blue), #0077cc);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.45rem 1.4rem;
  border-radius: 60px;
  margin-bottom: 1.2rem;
}
.fasad-process .fasad-process-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  line-height: 1.2;
  margin: 0 0 1rem;
  text-shadow: none;
}
.fasad-process .fasad-process-title span {
  background: linear-gradient(135deg, var(--blue), #0077cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fasad-process .fasad-process-sub {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: #5a6b7d;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: none;
}

/* --- Accordion Steps --- */
.fasad-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fasad-step {
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid rgba(25,168,255,0.12);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.fasad-step:hover {
  border-color: rgba(25,168,255,0.25);
}
.fasad-step-open {
  border-color: rgba(25,168,255,0.3);
  box-shadow: 0 8px 32px rgba(25,168,255,0.1);
}

/* Header button */
.fasad-step-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1.2rem;
  padding: 1.4rem 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s;
}
.fasad-step-header:hover {
  background: rgba(25,168,255,0.03);
}

/* Step number */
.fasad-step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 900;
  color: var(--blue);
  background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.04));
  border: 1.5px solid rgba(25,168,255,0.15);
  transition: all 0.35s ease;
}
.fasad-step-open .fasad-step-num {
  background: linear-gradient(135deg, var(--blue), #0077cc);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(25,168,255,0.3);
}

/* Info area */
.fasad-step-info {
  flex: 1;
  min-width: 0;
}
.fasad-step-info h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  transition: color 0.3s;
}
.fasad-step-open .fasad-step-info h3 {
  color: var(--blue);
}
.fasad-step-preview {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0.2rem 0 0;
  transition: opacity 0.3s;
}
.fasad-step-open .fasad-step-preview {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* Toggle chevron */
.fasad-step-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s;
}
.fasad-step-toggle svg {
  width: 20px;
  height: 20px;
}
.fasad-step-open .fasad-step-toggle {
  transform: rotate(180deg);
  color: var(--blue);
}

/* Collapsible body */
.fasad-step-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.fasad-step-open .fasad-step-body {
  max-height: 300px;
}
.fasad-step-body-inner {
  padding: 0 1.8rem 1.6rem 5.8rem;
}
.fasad-step-body-inner p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: #5a6b7d;
  margin: 0 0 1rem;
}

/* Tags */
.fasad-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.fasad-tag {
  display: inline-block;
  background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.04));
  color: var(--blue);
  padding: 0.35rem 0.9rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(25,168,255,0.12);
  letter-spacing: -0.2px;
}

/* Scroll reveal stagger */
.fasad-step {
  opacity: 0;
  transform: translateY(24px);
}
.fasad-step.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s, box-shadow 0.3s;
}

/* Responsive */
@media (max-width: 768px) {
  .fasad-process { padding: 5rem 1.2rem; }
  .fasad-step-header { padding: 1.1rem 1.2rem; gap: 0.9rem; }
  .fasad-step-num { width: 40px; height: 40px; font-size: 0.85rem; border-radius: 12px; }
  .fasad-step-info h3 { font-size: 1rem; }
  .fasad-step-body-inner { padding: 0 1.2rem 1.4rem 4.3rem; }
}
@media (max-width: 480px) {
  .fasad-step-body-inner { padding: 0 1rem 1.2rem 1rem; }
  .fasad-step-header { gap: 0.7rem; }
}

/* ==================== END FASAD PROCESS ACCORDION SECTION ==================== */

/* ==================== TAKBYTE JOURNEY ACCORDION ==================== */
.tb-journey {
  background: #fff;
  padding: 7rem 2rem;
  border-bottom: none;
}
.tb-journey-inner { max-width: 820px; margin: 0 auto; }
.tb-journey-header { text-align: center; margin-bottom: 3.5rem; }
.tb-journey-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--blue), #0077cc);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.4rem 1.3rem;
  border-radius: 60px;
  margin-bottom: 1rem;
}
.tb-journey-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 0.8rem;
}
.tb-journey-title span {
  background: linear-gradient(135deg, var(--blue), #0077cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tb-journey-sub {
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  color: #5a6b7d;
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto;
}

.tb-steps { display: flex; flex-direction: column; gap: 0.8rem; }
.tb-step {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid rgba(25,168,255,0.1);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  opacity: 0;
  transform: translateY(20px);
}
.tb-step.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s, box-shadow 0.3s;
}
.tb-step:hover { border-color: rgba(25,168,255,0.22); }
.tb-step-open {
  border-color: rgba(25,168,255,0.3);
  box-shadow: 0 6px 28px rgba(25,168,255,0.1);
}

.tb-step-head {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s;
}
.tb-step-head:hover { background: rgba(25,168,255,0.02); }

.tb-step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--blue);
  background: linear-gradient(135deg, rgba(25,168,255,0.08), rgba(25,168,255,0.03));
  border: 1.5px solid rgba(25,168,255,0.12);
  transition: all 0.35s ease;
}
.tb-step-open .tb-step-num {
  background: linear-gradient(135deg, var(--blue), #0077cc);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(25,168,255,0.3);
}

.tb-step-label { flex: 1; min-width: 0; }
.tb-step-label h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  transition: color 0.3s;
}
.tb-step-open .tb-step-label h3 { color: var(--blue); }
.tb-step-hint {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0.15rem 0 0;
  transition: opacity 0.3s;
}
.tb-step-open .tb-step-hint { opacity: 0; height: 0; margin: 0; overflow: hidden; }

.tb-step-chev {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.3s;
}
.tb-step-chev svg { width: 18px; height: 18px; }
.tb-step-open .tb-step-chev { transform: rotate(180deg); color: var(--blue); }

.tb-step-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1);
}
.tb-step-open .tb-step-body { max-height: 280px; }
.tb-step-body-in { padding: 0 1.5rem 1.4rem 5rem; }
.tb-step-body-in p {
  font-size: 0.93rem;
  line-height: 1.85;
  color: #5a6b7d;
  margin: 0 0 0.8rem;
}
.tb-step-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tb-step-tags span {
  background: linear-gradient(135deg, rgba(25,168,255,0.08), rgba(25,168,255,0.03));
  color: var(--blue);
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(25,168,255,0.1);
}

@media (max-width: 768px) {
  .tb-journey { padding: 4.5rem 1.2rem; }
  .tb-step-head { padding: 1rem 1rem; gap: 0.8rem; }
  .tb-step-num { width: 38px; height: 38px; font-size: 0.82rem; border-radius: 10px; }
  .tb-step-label h3 { font-size: 0.95rem; }
  .tb-step-body-in { padding: 0 1rem 1.2rem 3.8rem; }
}
@media (max-width: 480px) {
  .tb-step-body-in { padding: 0 1rem 1rem 1rem; }
}
/* ==================== END TAKBYTE JOURNEY ACCORDION ==================== */

/* ==================== CTA SECTION ==================== */
.cta-section {
  background: linear-gradient(135deg, rgba(25, 168, 255, 0) 0%, rgba(0, 136, 204, 0) 50%, rgba(0, 102, 153, 0) 100%), 
              url('fasad3.jpg') center / cover no-repeat fixed;
  padding: 10rem 2rem;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.cta-fasad {
  background-image: 
    linear-gradient(135deg, rgba(42, 54, 72, 0.3), rgba(0, 0, 0, 0.15)),
    url('fasad5.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: 12rem 2rem;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: none !important;
  pointer-events: none;
  z-index: 0;
}

.cta-fasad::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: none !important;
  pointer-events: none;
  z-index: 0;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(25, 168, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(0, 136, 204, 0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.cta-fasad.cta-section::before {
  background: none !important;
}

.cta-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.cta-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.cta-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  animation: fadeInDown 0.6s ease-out 0.1s forwards;
  opacity: 0;
}

.cta-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.cta-heading {
  font-size: clamp(2.5rem, 6vw, 3.8rem);
  font-weight: 900;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.8px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.3);
  animation: fadeInDown 0.7s ease-out 0.2s forwards;
  opacity: 0;
}

.cta-subheading {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  max-width: 680px;
  animation: fadeInUp 0.7s ease-out 0.3s forwards;
  opacity: 0;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
  opacity: 0;
}

.btn-cta-primary {
  display: inline-block;
  padding: 1.4rem 3.5rem;
  background: linear-gradient(135deg, var(--blue), #0088CC);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  font-weight: 900;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 15px 50px rgba(25, 168, 255, 0.3);
  letter-spacing: -0.3px;
  text-transform: capitalize;
  position: relative;
  overflow: hidden;
}

.btn-cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: buttonShine 2.5s infinite;
  z-index: 0;
}

.btn-cta-primary span {
  position: relative;
  z-index: 1;
}

.btn-cta-primary:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 25px 70px rgba(25, 168, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-lg {
  padding: 1.6rem 4rem !important;
  font-size: 1.15rem !important;
  border-radius: 16px !important;
}

.cta-footnote {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0;
  font-style: italic;
  letter-spacing: -0.2px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .cta-section {
    padding: 6rem 1.5rem;
    background-attachment: scroll;
  }

  .cta-fasad {
    padding: 8rem 1.5rem;
    min-height: 500px;
    background-attachment: scroll;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  .cta-content {
    gap: 1.5rem;
  }

  .cta-heading {
    font-size: 2rem;
    color: #ffffff !important;
  }

  .cta-subheading {
    font-size: 1.1rem;
    color: #ffffff !important;
  }

  .btn-cta-primary {
    padding: 1.2rem 2.5rem;
    font-size: 1rem;
    width: 100%;
  }
}

/* ==================== END CTA SECTION ==================== */
@media (max-width: 768px) {
  .cta-section { padding: 4rem 1.5rem; background-attachment: scroll; }
  .cta-fasad { background-attachment: scroll !important; }
  .cta-container { padding: 3rem 1.5rem; }
  .cta-container h2 { font-size: 1.8rem; margin-bottom: 1rem; }
  .cta-container p { font-size: 1rem; margin-bottom: 2rem; }
  .cta-container .btn-primary { width: 100%; }
}

@media (max-width: 600px) {
  .cta-fasad {
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    padding: 6rem 1.5rem;
    min-height: 450px;
  }
}

/* ===== PLÃ…TSLAGERI PAGE ===== */
body:has(.solar-hero) .topbar { background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('money1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; }
body:has(.solar-hero) header { background-image: linear-gradient(135deg, rgba(10,30,46,0.7), rgba(10,30,46,0.5)), url('money1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; }

/* ===== PLÃ…TSLAGERI - MODERN ASYMMETRIC HERO ===== */

.plat-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(42,54,72,0.7), rgba(42,54,72,0.6)), url('plat1.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  padding: 2rem 0;
}

.plat-hero-grid {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: 0 2rem;
  align-items: center;
}

.plat-hero-left {
  animation: slideInLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plat-hero-right {
  animation: slideInRight 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #19A8FF;
  margin-bottom: 1rem;
  display: block;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 1.2rem 0;
  letter-spacing: -0.8px;
  max-width: 500px;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

.hero-accent {
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hero-subtitle {
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 2rem 0;
  max-width: 480px;
  font-weight: 400;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(25, 168, 255, 0.2);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.metric-value {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.hero-buttons .btn-hero-primary,
.hero-buttons .btn-hero-secondary {
  padding: 1.05rem 2.2rem;
  font-size: 0.95rem;
  border-radius: 10px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

.plat-hero-left .hero-eyebrow,
.plat-hero-left .hero-title,
.plat-hero-left .hero-subtitle,
.plat-hero-left .hero-buttons {
  opacity: 0;
  transform: translateY(16px);
  animation: heroTextLift 0.8s ease forwards;
}

.plat-hero-left .hero-eyebrow { animation-delay: 0.1s; }
.plat-hero-left .hero-title { animation-delay: 0.2s; }
.plat-hero-left .hero-subtitle { animation-delay: 0.35s; }
.plat-hero-left .hero-buttons { animation-delay: 0.5s; }

@keyframes heroTextLift {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-hero-primary {
  box-shadow: 0 20px 45px rgba(25, 168, 255, 0.35), 0 0 30px rgba(25, 168, 255, 0.25);
}

.btn-hero-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 28px 60px rgba(25, 168, 255, 0.4), 0 0 40px rgba(25, 168, 255, 0.3);
}

.btn-hero-secondary {
  border-width: 1.5px;
}

.btn-hero-secondary:hover {
  transform: translateY(-2px);
}

.hero-visual {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-accent {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(60px);
}

.accent-1 {
  width: 300px;
  height: 300px;
  background: #19A8FF;
  top: -50px;
  right: -100px;
}

.accent-2 {
  width: 200px;
  height: 200px;
  background: #00D9FF;
  bottom: -50px;
  left: -80px;
}

.visual-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metal-icon {
  width: 100%;
  max-width: 280px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(25, 168, 255, 0.15));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(10px); opacity: 0.6; }
}

.scroll-cue svg {
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 16px rgba(25, 168, 255, 0.35));
}

@media (max-width: 1024px) {
  .plat-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 1.5rem;
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .hero-metrics {
    margin-bottom: 2rem;
    gap: 1.2rem;
    padding-bottom: 1.5rem;
  }

  .hero-visual {
    height: 350px;
  }

  .metal-icon {
    max-width: 250px;
  }
}

@media (max-width: 768px) {
  .plat-hero {
    min-height: auto;
    padding: 3rem 0;
  }

  .plat-hero-grid {
    padding: 0 1.5rem;
    gap: 2rem;
  }

  .hero-eyebrow {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }

  .hero-title {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    margin-bottom: 0.8rem;
    line-height: 1.3;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.8rem;
    line-height: 1.7;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1.8rem;
    padding-bottom: 1.5rem;
    gap: 1rem;
  }

  .metric-value {
    font-size: 1.4rem;
  }

  .metric-text {
    font-size: 0.75rem;
  }

  .hero-buttons {
    gap: 0.8rem;
  }

  .hero-buttons .btn-hero-primary,
  .hero-buttons .btn-hero-secondary {
    flex: 1;
    min-width: 150px;
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
  }

  .hero-visual {
    height: 300px;
  }

  .metal-icon {
    max-width: 220px;
  }
}

@media (max-width: 600px) {
  .plat-hero {
    min-height: auto;
    padding: 2.5rem 0;
  }

  .plat-hero-grid {
    padding: 0 1rem;
    gap: 1.5rem;
  }

  .hero-eyebrow {
    font-size: 0.75rem;
    margin-bottom: 0.8rem;
  }

  .hero-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin-bottom: 0.6rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    gap: 0.8rem;
  }

  .metric-value {
    font-size: 1.2rem;
  }

  .metric-text {
    font-size: 0.7rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.6rem;
  }

  .hero-buttons .btn-hero-primary,
  .hero-buttons .btn-hero-secondary {
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-size: 0.85rem;
  }

  .hero-visual {
    height: 250px;
    margin-top: 1rem;
  }

  .metal-icon {
    max-width: 200px;
  }

  .scroll-cue {
    bottom: 1rem;
  }
}

.plat-services {
  padding: 8rem 2rem;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.plat-services::before {
  display: none;
}

.plat-section-header {
  max-width: 1200px;
  margin: 0 auto 6rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

.plat-section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
  line-height: 1.2;
}

.plat-section-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  margin: 0 0 1.5rem 0;
  line-height: 1.7;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}

.plat-service-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}

.plat-service-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid rgba(0, 217, 255, 0.12);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.plat-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #19a8ff 0%, #00d9ff 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.plat-service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.03) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.plat-service-card:hover {
  transform: translateY(-12px);
  border-color: rgba(0, 217, 255, 0.3);
  box-shadow: 0 35px 100px rgba(0, 217, 255, 0.15), 0 0 60px rgba(0, 217, 255, 0.1);
}

.plat-service-card:hover::before {
  transform: scaleX(1);
}

.plat-service-card:hover::after {
  opacity: 1;
}

.plat-service-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  display: inline-block;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(25, 168, 255, 0.05));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 24px rgba(0, 217, 255, 0.15);
}

.plat-service-card:hover .plat-service-icon {
  background: linear-gradient(135deg, #00d9ff, #00f0ff);
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 20px 60px rgba(0, 217, 255, 0.4);
}

.plat-service-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 1rem 0;
  letter-spacing: -0.4px;
  position: relative;
  z-index: 1;
}

.plat-service-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.plat-service-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
  border-top: 1px solid rgba(0, 217, 255, 0.1);
  padding-top: 1.5rem;
  position: relative;
  z-index: 1;
}

.plat-service-features li {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 0.8rem;
  padding-left: 1.8rem;
  position: relative;
  font-weight: 500;
}

.plat-service-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #00d9ff;
  font-weight: 900;
  font-size: 1rem;
}

.plat-insights-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.plat-insight-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid rgba(25,168,255,0.12);
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
}
.plat-insight-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.plat-insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, var(--blue), #00D9FF);
  transition: height 0.5s ease;
  border-radius: 0 2px 2px 0;
}
.plat-insight-card.plat-open::before,
.plat-insight-card:hover::before {
  height: 100%;
}

.plat-insight-card::after {
  display: none;
}

.plat-insight-card:hover {
  border-color: rgba(25,168,255,0.3);
  box-shadow: 0 12px 36px rgba(25,168,255,0.1);
}

.plat-insight-card:hover::before {
  height: 100%;
}

.plat-insight-card:hover::after {
  display: none;
}

.plat-insight-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 1.8rem;
  cursor: pointer;
  user-select: none;
}

.plat-insight-icon {
  font-size: 1.4rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.04));
  border-radius: 14px;
  color: var(--blue);
  flex-shrink: 0;
  transition: all 0.4s ease;
  margin-bottom: 0;
}

.plat-insight-card:hover .plat-insight-icon,
.plat-insight-card.plat-open .plat-insight-icon {
  background: linear-gradient(135deg, var(--blue), #0088CC);
  color: #fff;
  transform: scale(1.05);
}

.plat-insight-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0;
  line-height: 1.3;
}

.plat-insight-hint {
  font-size: 0.78rem;
  color: var(--blue);
  opacity: 0.7;
  margin-top: 0.2rem;
  transition: opacity 0.3s;
}
.plat-insight-card.plat-open .plat-insight-hint {
  opacity: 0;
}

.plat-insight-chev {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  transition: transform 0.35s ease;
}
.plat-insight-chev svg {
  width: 20px;
  height: 20px;
}
.plat-insight-card.plat-open .plat-insight-chev {
  transform: rotate(180deg);
}

.plat-insight-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1);
}
.plat-insight-card.plat-open .plat-insight-body {
  max-height: 200px;
}

.plat-insight-text {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.7;
  padding: 0 1.8rem 1.5rem 5rem;
}

.plat-services-section {
  padding: 10rem 2rem 8rem;
  background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.plat-services-section::before {
  content: '';
  position: absolute;
  left: -15%;
  top: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.plat-services-section::after {
  content: '';
  position: absolute;
  right: -10%;
  bottom: 0%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(25, 168, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.plat-services-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.plat-service-card {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.2);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.plat-service-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f0f4f8 0%, #e0e7f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plat-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plat-service-card:hover .plat-service-image img {
  transform: scale(1.1);
}

.plat-service-info {
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.plat-service-title {
  font-size: 1.35rem;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: auto;
  line-height: 1.3;
  position: relative;
  z-index: 2;
  letter-spacing: -0.3px;
}

.plat-service-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, #19a8ff 0%, #00d9ff 100%);
  color: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 2;
  width: fit-content;
  box-shadow: 0 10px 30px rgba(0, 217, 255, 0.25);
  border: none;
  cursor: pointer;
  margin-top: 1.2rem;
}

.plat-service-btn:hover {
  transform: translateX(6px);
  box-shadow: 0 15px 40px rgba(0, 217, 255, 0.35);
}

.plat-service-btn i {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 0.9rem;
}

.plat-service-btn:hover i {
  transform: translateX(3px);
}

@media (min-width: 1400px) {
  .plat-service-card {
    min-height: 480px;
  }

  .plat-service-image {
    height: 280px;
  }

  .plat-service-info {
    padding: 2.8rem 2.5rem;
  }

  .plat-service-title {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.4px;
  }

  .plat-service-btn {
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .plat-service-btn i {
    font-size: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════
   PLAT SHOWCASE CARDS — Modern clickable service cards
   ═══════════════════════════════════════════════════════ */
.plat-showcase-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}

a.plat-showcase-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.plat-showcase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(25,168,255,0.14), 0 8px 24px rgba(0,0,0,0.06);
  border-color: rgba(25,168,255,0.2);
}

.plat-showcase-media {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.plat-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

a.plat-showcase-card:hover .plat-showcase-media img {
  transform: scale(1.08);
}

.plat-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}

.plat-showcase-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.9rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(25,168,255,0.3);
  z-index: 2;
}

.plat-showcase-body {
  padding: 1.6rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.plat-showcase-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.plat-showcase-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 0;
  flex-grow: 1;
}

.plat-showcase-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(25,168,255,0.06);
  margin-top: 1.2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-end;
}

.plat-showcase-arrow svg {
  color: var(--blue);
  transition: transform 0.4s ease;
}

a.plat-showcase-card:hover .plat-showcase-arrow {
  background: var(--blue);
}

a.plat-showcase-card:hover .plat-showcase-arrow svg {
  color: #fff;
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .plat-showcase-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 480px;
  }
}

@media (max-width: 600px) {
  .plat-showcase-media {
    height: 220px;
  }
  .plat-showcase-body {
    padding: 1.2rem 1.3rem 1.4rem;
  }
  .plat-showcase-title {
    font-size: 1.1rem;
  }
}

/* ═══════════════════════════════════════════════════════
   WHY FEROTECT — Takkupor page
   ═══════════════════════════════════════════════════════ */
.why-ferotect {
  padding: 7rem 2rem 6rem;
  background: linear-gradient(180deg, #f8fafb 0%, #ffffff 50%, #f8fafb 100%);
  position: relative;
  overflow: hidden;
}

.why-ferotect::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(25,168,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.why-ferotect-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Header --- */
.why-ferotect-header {
  text-align: center;
  margin-bottom: 4rem;
}

.why-ferotect-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 1rem;
}

.why-ferotect-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 1.2rem;
}

.why-ferotect-title span {
  color: var(--blue);
}

.why-ferotect-lead {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* --- Animated stat counters --- */
.why-ferotect-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 32px rgba(0,0,0,0.04);
  margin-bottom: 4rem;
}

.why-ferotect-stat {
  text-align: center;
  padding: 0.5rem 0;
}

.why-ferotect-stat-number {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  display: inline;
  letter-spacing: -1px;
}

.why-ferotect-stat-suffix {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--blue);
  display: inline;
  margin-left: 2px;
}

.why-ferotect-stat-label {
  font-size: 0.78rem;
  color: var(--text-soft);
  font-weight: 500;
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

.why-ferotect-stat-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.08), transparent);
  justify-self: center;
}

/* --- Pillar cards --- */
.why-ferotect-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.why-ferotect-pillar {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 2.2rem 2rem 2rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 16px rgba(0,0,0,0.03);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.why-ferotect-pillar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.why-ferotect-pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(25,168,255,0.10), 0 4px 16px rgba(0,0,0,0.04);
  border-color: rgba(25,168,255,0.12);
}

.why-ferotect-pillar:hover::after {
  transform: scaleX(1);
}

.why-ferotect-pillar-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(25,168,255,0.06);
  border-radius: 14px;
  margin-bottom: 1.4rem;
  transition: all 0.4s ease;
}

.why-ferotect-pillar:hover .why-ferotect-pillar-icon {
  background: var(--blue);
  transform: scale(1.08);
}

.why-ferotect-pillar-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue);
  transition: stroke 0.4s ease;
}

.why-ferotect-pillar:hover .why-ferotect-pillar-icon svg {
  stroke: #fff;
}

.why-ferotect-pillar-number {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
  opacity: 0.5;
}

.why-ferotect-pillar h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.why-ferotect-pillar p {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .why-ferotect {
    padding: 5rem 1.5rem 4rem;
  }
  .why-ferotect-stats {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
  .why-ferotect-stat-divider {
    display: none;
  }
  .why-ferotect-pillars {
    grid-template-columns: 1fr;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    scrollbar-width: none;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .why-ferotect-pillars::-webkit-scrollbar {
    display: none;
  }
  .why-ferotect-pillar {
    min-width: 280px;
    max-width: 300px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .why-ferotect {
    padding: 4rem 1.2rem 3rem;
  }
  .why-ferotect-header {
    margin-bottom: 2.5rem;
  }
  .why-ferotect-stats {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    padding: 1.5rem 1rem;
    margin-bottom: 2.5rem;
  }
  .why-ferotect-pillar {
    padding: 1.6rem 1.4rem 1.4rem;
    min-width: 260px;
  }
  .why-ferotect-pillars {
    margin: 0 -1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .why-ferotect-title {
    font-size: 1.6rem;
  }
}

/* ═══════════════════════════════════════════════════════
   SKÅNE MAP — Vi finns nära dig
   ═══════════════════════════════════════════════════════ */
.skane-map-section {
  padding: 7rem 2rem 6rem;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.skane-map-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Header --- */
.skane-map-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.skane-map-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 1rem;
}

.skane-map-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
}

.skane-map-title span {
  color: var(--blue);
}

.skane-map-lead {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 560px;
  margin: 0 auto;
}

/* --- Grid layout --- */
.skane-map-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

/* --- SVG Map container --- */
.skane-map-container {
  position: relative;
  background: linear-gradient(135deg, #f6f9fc 0%, #eef3f8 100%);
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 4px 32px rgba(0,0,0,0.04);
}

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

/* Outline */
.skane-outline {
  fill: rgba(25,168,255,0.04);
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-opacity: 0;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: all 0.6s ease;
}

.skane-outline.drawn {
  stroke-opacity: 0.25;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1), stroke-opacity 0.8s ease;
}

.skane-map-container:hover .skane-outline {
  fill: rgba(25,168,255,0.06);
  stroke-opacity: 0.35;
}

/* --- Pin styles --- */
.skane-pin {
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.skane-pin.visible {
  opacity: 1;
  transform: translateY(0);
}

.skane-pin-glow {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.skane-pin:hover .skane-pin-glow,
.skane-pin.active .skane-pin-glow {
  opacity: 1;
}

.skane-pin-dot {
  fill: var(--blue);
  stroke: #fff;
  stroke-width: 3;
  transition: all 0.3s ease;
  filter: url(#shadow-pin);
}

.skane-pin:hover .skane-pin-dot,
.skane-pin.active .skane-pin-dot {
  fill: #0088cc;
  r: 9;
}

.skane-pin-pulse {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  opacity: 0;
  animation: skane-pulse 2.5s ease-out infinite;
}

.skane-pin.visible .skane-pin-pulse {
  opacity: 1;
}

@keyframes skane-pulse {
  0% {
    r: 7;
    opacity: 0.6;
    stroke-width: 2;
  }
  100% {
    r: 24;
    opacity: 0;
    stroke-width: 0.5;
  }
}

/* Home pin special */
.skane-pin-home .skane-pin-dot {
  fill: #0066aa;
  r: 9;
  stroke-width: 3.5;
}

.skane-pin-home .skane-pin-pulse {
  animation-duration: 2s;
}

.skane-pin-home-icon {
  font-size: 11px;
  fill: #fff;
  font-weight: 700;
  pointer-events: none;
}

/* --- Tooltip --- */
.skane-tooltip {
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.skane-tooltip-bg {
  fill: rgba(17,17,17,0.92);
  rx: 10;
}

.skane-tooltip-city {
  font-size: 13px;
  font-weight: 700;
  fill: #fff;
  font-family: 'Inter', sans-serif;
}

.skane-tooltip-type {
  font-size: 10.5px;
  fill: rgba(255,255,255,0.65);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

/* --- City labels --- */
.skane-city-labels {
  transition: opacity 0.8s ease;
}

.skane-city-labels.visible {
  opacity: 0.55 !important;
}

.skane-label {
  font-size: 8.5px;
  fill: #444;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* --- Info / Legend sidebar --- */
.skane-map-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.skane-map-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: #f8fafb;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.skane-map-info-item:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 28px rgba(25,168,255,0.06);
  border-color: rgba(25,168,255,0.1);
}

.skane-map-info-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(25,168,255,0.2);
  margin-top: 3px;
}

.skane-map-info-dot-home {
  background: #0066aa;
  width: 18px;
  height: 18px;
  min-width: 18px;
  box-shadow: 0 0 0 3px rgba(0,102,170,0.2);
}

.skane-map-info-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  stroke: var(--blue);
  margin-top: 2px;
}

.skane-map-info-item strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 0.25rem;
}

.skane-map-info-item p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

.skane-map-info-item a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.skane-map-info-item a:hover {
  text-decoration: underline;
}

/* Info counter */
.skane-map-info-count {
  align-items: center;
}

.skane-map-info-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--blue);
  min-width: 52px;
  line-height: 1;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .skane-map-section {
    padding: 5rem 1.5rem 4rem;
  }
  .skane-map-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .skane-map-container {
    max-width: 420px;
    margin: 0 auto;
  }
  .skane-map-info {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .skane-map-section {
    padding: 4rem 1rem 3rem;
  }
  .skane-map-container {
    padding: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 1rem;
  }
  .skane-svg {
    width: 680px;
    max-width: none;
  }
  .skane-label {
    font-size: 12px;
    font-weight: 700;
  }
  .skane-pin-dot {
    stroke-width: 4;
  }
  .skane-pin-home .skane-pin-dot {
    stroke-width: 4.5;
  }
  .skane-tooltip-city {
    font-size: 14px;
  }
  .skane-map-info {
    gap: 1rem;
  }
  .skane-map-info-item {
    padding: 1rem 1.1rem;
  }
  .skane-map-info-item strong {
    font-size: 0.98rem;
  }
  .skane-map-info-item p {
    font-size: 0.88rem;
    line-height: 1.6;
  }
  .skane-map-title {
    font-size: 1.6rem;
  }
}

/* ============================================================
   KUPA TJÄNST — Interactive Dormer Services Section (v2)
   ============================================================ */
.kupa-tjanst {
  padding: 7rem 2rem 6rem;
  background: linear-gradient(180deg, #f7f9fc 0%, #fff 100%);
  position: relative;
  overflow: hidden;
}

.kupa-tjanst::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(25,168,255,0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.kupa-tjanst-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header */
.kupa-tjanst-header {
  text-align: center;
  margin-bottom: 3.5rem;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.kupa-tjanst-header.revealed {
  opacity: 1;
  transform: translateY(0);
}

.kupa-tjanst-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 1rem;
}

.kupa-tjanst-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 1rem;
}

.kupa-tjanst-title span {
  color: var(--blue);
}

.kupa-tjanst-lead {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* ---- Interactive Anatomy Section (v2) ---- */
.kupa-anatomy {
  margin-bottom: 5rem;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.kupa-anatomy.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Desktop: SVG left, info right */
.kupa-anatomy-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: start;
}

/* SVG Visual */
.kupa-anatomy-visual {
  position: relative;
}

.kupa-anatomy-svg-wrap {
  background: linear-gradient(145deg, #f5f8fb 0%, #edf2f7 100%);
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,0.04);
  padding: 1.5rem 1rem 0.8rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
}

.kupa-anatomy-svg {
  width: 100%;
  height: auto;
  display: block;
}

.kupa-svg-label {
  font-family: 'Inter', sans-serif;
}

/* Hotspots */
.kupa-hotspot {
  cursor: pointer;
  outline: none;
}

.kupa-hotspot-glow {
  transition: all 0.4s ease;
}

.kupa-hotspot-dot {
  transition: all 0.3s ease;
}

.kupa-hotspot-pulse {
  animation: kupaPulse 2s ease-out infinite;
}

@keyframes kupaPulse {
  0% { r: 11; opacity: 0.8; }
  70% { r: 24; opacity: 0; }
  100% { r: 24; opacity: 0; }
}

.kupa-hotspot:hover .kupa-hotspot-dot,
.kupa-hotspot:focus .kupa-hotspot-dot {
  r: 14;
  fill: #0088cc;
}

.kupa-hotspot:hover .kupa-hotspot-glow,
.kupa-hotspot:focus .kupa-hotspot-glow {
  r: 28;
  fill: rgba(25,168,255,0.15);
}

.kupa-hotspot-active .kupa-hotspot-dot {
  r: 14;
  fill: #0066aa;
}

.kupa-hotspot-active .kupa-hotspot-pulse {
  animation: none;
}

.kupa-hotspot-active .kupa-hotspot-glow {
  r: 30;
  fill: rgba(25,168,255,0.2);
}

/* Zone highlights */
.kupa-plat-zone {
  transition: all 0.5s ease;
}

.kupa-plat-zone.kupa-zone-active {
  opacity: 1 !important;
  stroke: #0088cc;
  stroke-width: 3;
  fill: rgba(25,168,255,0.25);
  filter: url(#glow-soft);
}

.kupa-takfonster-rect.kupa-zone-active {
  stroke: #0088cc;
  stroke-width: 2;
  fill: rgba(25,168,255,0.3);
  filter: url(#glow-soft);
}

.kupa-takfonster-plat.kupa-zone-active {
  stroke: #0088cc;
  stroke-width: 2;
  opacity: 1;
  filter: url(#glow-soft);
}

/* ---- Desktop Info Panel (side panel) ---- */
.kupa-anatomy-info-desktop {
  position: sticky;
  top: 8rem;
}

.kupa-info-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 2rem 1.8rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.kupa-info-detail {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.kupa-info-detail.kupa-info-active {
  opacity: 1;
  transform: translateY(0);
}

.kupa-info-badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(25,168,255,0.08);
  color: var(--blue);
  margin-bottom: 1rem;
}

.kupa-info-icon {
  margin-bottom: 1.2rem;
}

.kupa-info-icon svg {
  width: 48px;
  height: 48px;
}

.kupa-info-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.kupa-info-desc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}

.kupa-info-hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(25,168,255,0.04);
  border-radius: 12px;
  border: 1px solid rgba(25,168,255,0.08);
}

.kupa-info-hint svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.kupa-info-hint span {
  font-size: 0.78rem;
  color: var(--blue);
  font-weight: 600;
}

.kupa-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.kupa-info-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: var(--text);
  font-weight: 500;
}

.kupa-info-list li svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
}

/* ---- Info Panel BELOW SVG (splitscreen / mobile) ---- */
.kupa-info-below {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease,
              padding 0.4s ease,
              margin 0.4s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(25,168,255,0.08);
  display: none;
  margin-top: 0;
}

.kupa-info-below.kupa-overlay-visible {
  max-height: 600px;
  opacity: 1;
  padding: 1.5rem 1.5rem 1.3rem;
  margin-top: 1rem;
  overflow-y: auto;
}

.kupa-info-below-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.04);
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}

.kupa-info-below-close:hover {
  background: rgba(25,168,255,0.08);
  color: var(--blue);
}

.kupa-info-below .kupa-info-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.kupa-info-below .kupa-info-desc {
  font-size: 0.84rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

.kupa-info-below .kupa-info-badge {
  margin-bottom: 0.7rem;
  font-size: 0.62rem;
}

.kupa-info-below .kupa-info-list {
  gap: 0.45rem;
}

.kupa-info-below .kupa-info-list li {
  font-size: 0.8rem;
}

/* ---- "Varför det behövs" box ---- */
.kupa-info-why {
  background: rgba(25,168,255,0.04);
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.1rem;
}

.kupa-info-why-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 0.35rem;
}

.kupa-info-why p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

/* ---- Mobile Hotspot Navigation Bar ---- */
.kupa-hotspot-nav {
  display: none;
  gap: 0.5rem;
  margin-top: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.2rem 0;
}

.kupa-hotspot-nav::-webkit-scrollbar {
  display: none;
}

.kupa-hotspot-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 100px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}

.kupa-hotspot-nav-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(25,168,255,0.08);
  color: var(--blue);
  font-size: 0.65rem;
  font-weight: 800;
}

.kupa-hotspot-nav-btn:hover,
.kupa-hotspot-nav-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 4px 16px rgba(25,168,255,0.2);
}

.kupa-hotspot-nav-btn:hover span,
.kupa-hotspot-nav-btn.active span {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ---- Service Cards ---- */
.kupa-services {
  margin-bottom: 5rem;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.kupa-services.revealed {
  opacity: 1;
  transform: translateY(0);
}

.kupa-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.kupa-service-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 1.6rem 1.8rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 16px rgba(0,0,0,0.03);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.kupa-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(25,168,255,0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.kupa-service-card:hover::before {
  opacity: 1;
}

.kupa-service-card:hover {
  box-shadow: 0 12px 40px rgba(25,168,255,0.08), 0 2px 8px rgba(0,0,0,0.04);
  border-color: rgba(25,168,255,0.12);
}

.kupa-service-featured {
  border-color: rgba(25,168,255,0.15);
  box-shadow: 0 4px 24px rgba(25,168,255,0.06);
}

.kupa-service-featured::before {
  opacity: 1;
  background: linear-gradient(90deg, var(--blue), #0088cc);
  height: 3px;
}

.kupa-service-number {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.15em;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.kupa-service-icon {
  margin-bottom: 1.2rem;
}

.kupa-service-icon svg {
  width: 56px;
  height: 56px;
}

.kupa-service-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
  margin-bottom: 0.6rem;
}

.kupa-service-desc {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}

.kupa-service-details {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.kupa-service-detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.kupa-service-detail-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---- Material Comparison ---- */
.kupa-material {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
}

.kupa-material.revealed {
  opacity: 1;
  transform: translateY(0);
}

.kupa-material-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.kupa-material-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 0.75rem;
}

.kupa-material-title span {
  color: var(--blue);
}

.kupa-material-lead {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 520px;
  margin: 0 auto;
}

.kupa-material-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.kupa-mat-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.8rem 1.5rem 1.6rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 16px rgba(0,0,0,0.03);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.kupa-mat-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
  border-color: rgba(25,168,255,0.1);
}

.kupa-mat-swatch {
  width: 100%;
  height: 6px;
  border-radius: 6px;
  margin-bottom: 1.3rem;
}

.kupa-mat-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.8rem;
  letter-spacing: -0.2px;
}

.kupa-mat-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.kupa-mat-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kupa-mat-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--blue);
}

.kupa-mat-stat-label {
  font-size: 0.68rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.kupa-mat-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin-bottom: 1rem;
}

.kupa-mat-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(25,168,255,0.06);
  color: var(--blue);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .kupa-tjanst {
    padding: 5rem 1.5rem 4rem;
  }
  .kupa-anatomy-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .kupa-anatomy-info-desktop {
    display: none;
  }
  .kupa-info-below {
    display: block;
  }
  .kupa-hotspot-nav {
    display: flex;
  }
  .kupa-services-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .kupa-material-cards {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

@media (max-width: 600px) {
  .kupa-tjanst {
    padding: 4rem 1.2rem 3rem;
  }
  .kupa-tjanst-title {
    font-size: 1.6rem;
  }
  .kupa-anatomy-svg-wrap {
    padding: 1rem 0.5rem 0.5rem;
    border-radius: 16px;
  }
  .kupa-info-card {
    padding: 1.5rem 1.3rem;
    border-radius: 16px;
  }
  .kupa-info-title {
    font-size: 1.15rem;
  }
  .kupa-info-below.kupa-overlay-visible {
    padding: 1.2rem 1.2rem 1rem;
    max-height: 500px;
    overflow-y: auto;
  }
  .kupa-hotspot-nav-btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.68rem;
  }
  .kupa-service-card {
    padding: 1.5rem 1.3rem;
    border-radius: 16px;
  }
  .kupa-material-title {
    font-size: 1.4rem;
  }
  .kupa-mat-card {
    padding: 1.4rem 1.2rem;
    border-radius: 16px;
  }
}

.plat-process {
  padding: 10rem 2rem 8rem;
  background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 100%);
  position: relative;
}

.plat-process::before {
  content: '';
  position: absolute;
  left: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(25, 168, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.plat-timeline {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.plat-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #00d9ff 0%, #19a8ff 50%, #00d9ff 100%);
}

.plat-timeline-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  padding: 0;
}

.plat-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
}

.plat-step:nth-child(even) {
  direction: rtl;
}

.plat-step:nth-child(even) > div {
  direction: ltr;
}

.plat-step::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #00d9ff, #00f0ff);
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 217, 255, 0.3), 0 10px 30px rgba(0, 217, 255, 0.3);
  z-index: 10;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 4px rgba(0, 217, 255, 0.3), 0 10px 30px rgba(0, 217, 255, 0.3); }
  50% { transform: translateX(-50%) scale(1.3); box-shadow: 0 0 0 8px rgba(0, 217, 255, 0.15), 0 15px 40px rgba(0, 217, 255, 0.4); }
}

.plat-step-content {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid rgba(0, 217, 255, 0.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  animation: stepFadeIn 0.6s ease-out forwards;
  opacity: 0;
}

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

.plat-step:nth-child(1) .plat-step-content { animation-delay: 0.1s; }
.plat-step:nth-child(2) .plat-step-content { animation-delay: 0.2s; }
.plat-step:nth-child(3) .plat-step-content { animation-delay: 0.3s; }
.plat-step:nth-child(4) .plat-step-content { animation-delay: 0.4s; }

.plat-step-content:hover {
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 217, 255, 0.12);
  transform: translateY(-4px);
}

.plat-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #19a8ff, #00d9ff);
  color: #ffffff;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 217, 255, 0.25);
}

.plat-step-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.3px;
}

.plat-step-desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* ===== DETAILS SECTION ===== */
.details-section {
  padding: 8rem 2rem;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.details-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.05) 0%, transparent 50%, rgba(25, 168, 255, 0.03) 100%);
  pointer-events: none;
  animation: slideBg 20s ease-in-out infinite;
}

@keyframes slideBg {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

.details-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.details-header {
  text-align: center;
  margin-bottom: 6rem;
  animation: fadeInDown 0.8s ease-out forwards;
}

.details-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 1.5rem 0;
  letter-spacing: -1.2px;
  line-height: 1.2;
}

.details-lead {
  font-size: 1.1rem;
  color: var(--text-soft);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: -0.3px;
}

/* Detail Items */
.detail-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 6rem;
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

.detail-item:nth-child(odd) {
  animation-delay: 0.2s;
}

.detail-item:nth-child(even) {
  animation-delay: 0.4s;
}

.detail-item-2 {
  grid-template-columns: 1fr 1fr;
}

.detail-item-2 .detail-image {
  order: -1;
}

.detail-item-4 .detail-image {
  order: -1;
}

.detail-content {
  padding: 0 2rem;
}

.detail-heading {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1.2rem 0;
  letter-spacing: -0.5px;
  position: relative;
  padding-bottom: 1rem;
}

.detail-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), #00d9ff);
  border-radius: 2px;
}

.detail-description {
  font-size: 1.05rem;
  color: var(--text-soft);
  line-height: 1.8;
  margin: 0 0 2rem 0;
  letter-spacing: -0.2px;
}

.detail-highlight {
  background: rgba(0, 217, 255, 0.08);
  border-left: 4px solid var(--blue);
  padding: 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.8;
  font-weight: 500;
}

.detail-highlight br {
  display: block;
  margin: 0.5rem 0;
}

.detail-image {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  height: 400px;
  animation: zoomIn 0.8s ease-out forwards;
  opacity: 0;
}

.detail-item:nth-child(3) .detail-image {
  animation-delay: 0.3s;
}

.detail-item:nth-child(4) .detail-image {
  animation-delay: 0.3s;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.detail-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15) 0%, transparent 100%);
  pointer-events: none;
}

.detail-image:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .details-section {
    padding: 6rem 1.5rem;
  }

  .details-header {
    margin-bottom: 4rem;
  }

  .detail-item {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
  }

  .detail-item-2 .detail-image,
  .detail-item-4 .detail-image {
    order: 0;
  }

  .detail-content {
    padding: 0;
  }

  .detail-heading {
    font-size: 1.5rem;
  }

  .detail-image {
    height: 300px;
  }
}

.plat-trust {
  padding: 10rem 2rem 8rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  position: relative;
  overflow: hidden;
}

.plat-trust::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 30% 30%, rgba(0, 217, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(25, 168, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.plat-trust-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.plat-trust-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 1.2rem 0;
  letter-spacing: -1px;
  line-height: 1.2;
}

.plat-trust-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto 4rem;
  line-height: 1.8;
  font-weight: 400;
}

.plat-trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.plat-trust-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.plat-trust-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.plat-trust-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 217, 255, 0.5);
  transform: translateY(-8px);
  box-shadow: 0 25px 70px rgba(0, 217, 255, 0.2);
}

.plat-trust-card:hover::before {
  opacity: 1;
}

.plat-trust-icon {
  font-size: 3rem;
  margin-bottom: 1.2rem;
  display: block;
}

.plat-trust-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.3px;
  position: relative;
  z-index: 1;
}

.plat-trust-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== CTA FINAL ENHANCED ===== */
.cta-final-enhanced {
  padding: 8rem 2rem;
  background: linear-gradient(135deg, #0f172a 0%, #1a2744 50%, #0f172a 100%);
  position: relative;
  overflow: hidden;
}

.cta-enhanced-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cta-enhanced-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  filter: blur(60px);
}

.cta-blob-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, var(--blue), #00d9ff);
  top: -200px;
  left: -100px;
  animation: float1 8s ease-in-out infinite;
}

.cta-blob-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #0088cc, var(--blue));
  bottom: -150px;
  right: -50px;
  animation: float2 10s ease-in-out infinite;
}

.cta-blob-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: float3 12s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(50px, -50px); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-50px, 50px); }
}

@keyframes float3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.cta-enhanced-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-enhanced-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.cta-enhanced-content {
  animation: fadeInLeft 0.8s ease-out;
}

.cta-enhanced-badge {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: rgba(0, 217, 255, 0.12);
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00f0ff;
  margin-bottom: 2rem;
}

.cta-enhanced-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: white;
  margin: 0 0 2rem 0;
  line-height: 1.3;
  letter-spacing: -1.5px;
}

.title-line {
  display: block;
}

.title-highlight {
  display: block;
  background: linear-gradient(135deg, var(--blue) 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-enhanced-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), #00d9ff);
  border-radius: 2px;
  margin-bottom: 2.5rem;
  animation: slideRight 0.8s ease-out;
}

@keyframes slideRight {
  from {
    width: 0;
  }
  to {
    width: 80px;
  }
}

.cta-enhanced-description {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.description-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  animation: fadeInLeft 0.8s ease-out backwards;
}

.description-item:nth-child(1) { animation-delay: 0.1s; }
.description-item:nth-child(2) { animation-delay: 0.2s; }
.description-item:nth-child(3) { animation-delay: 0.3s; }

.description-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(25, 168, 255, 0.15));
  border: 2px solid rgba(0, 217, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f0ff;
  font-weight: 900;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.description-item p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}

/* Right Column */
.cta-enhanced-action {
  animation: fadeInRight 0.8s ease-out;
}

.cta-action-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 24px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.cta-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.5), transparent);
}

.action-card-inner {
  position: relative;
  z-index: 1;
}

.action-card-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: white;
  margin: 0 0 2.5rem 0;
  letter-spacing: -0.5px;
  text-align: center;
}

.action-buttons-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 1.8rem;
  background: rgba(0, 217, 255, 0.12);
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: 12px;
  color: white;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.action-btn:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: rgba(0, 217, 255, 0.6);
  transform: translateX(8px);
  box-shadow: 0 15px 40px rgba(0, 217, 255, 0.2);
}

.action-btn:hover::before {
  opacity: 1;
}

.btn-icon {
  font-size: 1.5rem;
  display: block;
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.btn-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.btn-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: white;
}

.action-btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem 2rem;
  background: linear-gradient(135deg, var(--blue) 0%, #0088cc 100%);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 15px 40px rgba(0, 217, 255, 0.35);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.action-btn-contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

.action-btn-contact:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.5);
}

.action-btn-contact:hover::before {
  left: 100%;
}

.action-btn-contact svg {
  width: 20px;
  height: 20px;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1024px) {
  .cta-enhanced-wrapper {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .cta-enhanced-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
}

@media (max-width: 768px) {
  .cta-final-enhanced {
    padding: 5rem 1.5rem;
  }

  .cta-enhanced-wrapper {
    gap: 2.5rem;
  }

  .cta-enhanced-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }

  .cta-enhanced-divider {
    margin-bottom: 2rem;
  }

  .cta-enhanced-description {
    gap: 1.2rem;
  }

  .description-item {
    gap: 1rem;
  }

  .cta-action-card {
    padding: 2rem;
  }

  .action-card-title {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }

  .action-buttons-group {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .action-btn {
    padding: 1.1rem 1.5rem;
  }

  .btn-icon {
    font-size: 1.2rem;
  }

  .btn-value {
    font-size: 0.95rem;
  }
}

@media (max-width: 1024px) {
  .plat-timeline::before {
    left: 40px;
  }

  .plat-step {
    grid-template-columns: 1fr;
  }

  .plat-step:nth-child(even) {
    direction: ltr;
  }

  .plat-step::before {
    left: 40px;
  }

  .plat-step-content {
    margin-left: 80px;
  }
}

@media (max-width: 768px) {
  .plat-hero {
    min-height: 90vh;
  }

  .plat-hero-title {
    font-size: 2.2rem;
  }

  .plat-hero-subtitle {
    font-size: 1rem;
  }

  .plat-hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .plat-btn-primary,
  .plat-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .plat-services {
    padding: 5rem 1rem 4rem;
  }

  .plat-section-title {
    font-size: 2rem;
  }

  .plat-service-grid {
    grid-template-columns: 1fr;
  }

  .plat-process {
    padding: 5rem 1rem 4rem;
  }

  .plat-timeline::before {
    left: 30px;
  }

  .plat-step::before {
    left: 30px;
  }

  .plat-step-content {
    margin-left: 60px;
  }

  .plat-trust {
    padding: 5rem 1rem 4rem;
  }

  .plat-trust-title {
    font-size: 2rem;
  }

  .plat-trust-cards {
    grid-template-columns: 1fr;
  }

  .plat-cta-final {
    padding: 4rem 1rem;
  }

  .plat-cta-title {
    font-size: 2rem;
  }
}

@keyframes heroFadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ===== PLÃ…TSLAGERI - WORLD-CLASS HERO REDESIGN ===== */

.plat-hero-premium {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0f1f35 100%);
  padding: 4rem 0;
}

.plat-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.plat-hero-glow {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(80px);
  animation: heroGlowFloat 8s ease-in-out infinite;
}

.plat-hero-glow-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  top: -10%;
  right: -15%;
  animation-delay: 0s;
}

.plat-hero-glow-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #0088CC, #19A8FF);
  bottom: -5%;
  left: -10%;
  animation-delay: 3s;
}

@keyframes heroGlowFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}

.plat-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
  padding: 0 3rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.plat-hero-content {
  animation: heroContentFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

@keyframes heroContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.plat-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #00D9FF;
  margin-bottom: 2rem;
  padding: 0.7rem 1.5rem;
  background: rgba(0, 217, 255, 0.1);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 50px;
  backdrop-filter: blur(10px);
}

.plat-hero-tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(0, 217, 255, 0.2);
  border-radius: 50%;
  font-size: 0.7rem;
}

.plat-hero-heading {
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 2rem 0;
  letter-spacing: -1.5px;
}

.plat-hero-line {
  display: block;
}

.plat-hero-highlight {
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 50%, #19A8FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: heroGradientShift 4s ease infinite;
}

@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.plat-hero-word {
  position: relative;
}

.plat-hero-accent {
  position: relative;
}

.plat-hero-description {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2.5rem 0;
  max-width: 550px;
  font-weight: 400;
}

.plat-hero-trust-line {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(0, 217, 255, 0.2);
  flex-wrap: wrap;
}

.plat-hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.plat-hero-trust-number {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  background: linear-gradient(135deg, #00D9FF, #19A8FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.plat-hero-trust-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.plat-hero-trust-divider {
  width: 1px;
  background: rgba(0, 217, 255, 0.15);
}

.plat-hero-cta {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.plat-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.1rem 2.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: -0.3px;
  position: relative;
  overflow: hidden;
}

.plat-hero-btn-primary {
  background: linear-gradient(135deg, #00D9FF 0%, #19A8FF 100%);
  color: #0a1628;
  border: none;
  box-shadow: 0 15px 50px rgba(0, 217, 255, 0.35), 0 0 30px rgba(0, 217, 255, 0.2);
}

.plat-hero-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: buttonShineFlow 2.5s infinite;
}

.plat-hero-btn-primary span {
  position: relative;
  z-index: 1;
}

.plat-hero-btn-primary svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.plat-hero-btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 25px 70px rgba(0, 217, 255, 0.45), 0 0 50px rgba(0, 217, 255, 0.3);
}

.plat-hero-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1.5px solid rgba(0, 217, 255, 0.3);
  backdrop-filter: blur(10px);
}

.plat-hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(0, 217, 255, 0.6);
  transform: translateY(-2px);
}

.plat-hero-subtext {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0;
}

@keyframes buttonShineFlow {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ===== PROCESS SECTION ===== */
.process-section {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #f8fafb 0%, #f0f4f8 100%);
  position: relative;
  overflow: hidden;
  margin-top: -4rem;
}

.process-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.2), transparent);
}

.process-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.process-header {
  text-align: center;
  margin-bottom: 5rem;
  animation: fadeInDown 0.8s ease-out;
}

.process-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 2.5rem 0;
  letter-spacing: -1.2px;
  line-height: 1.2;
}

.process-intro {
  max-width: 800px;
  margin: 0 auto;
}

.process-intro-text {
  font-size: 1.15rem;
  color: var(--text-soft);
  line-height: 1.8;
  margin: 0 0 1.5rem 0;
  font-weight: 500;
  letter-spacing: -0.3px;
}

.process-intro-highlight {
  font-size: 1.2rem;
  color: var(--text);
  line-height: 1.8;
  margin: 0;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(25, 168, 255, 0.1));
  padding: 1.5rem;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
}

/* Process Steps */
.process-visit-section {
  margin-bottom: 6rem;
}

.process-section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 3rem 0;
  text-align: center;
  letter-spacing: -0.5px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

@supports (display: grid) {
  @media (min-width: 1100px) {
    .process-steps {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .process-step:nth-child(4) {
      grid-column: 2 / 3;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.process-step {
  background: white;
  border: 1px solid rgba(0, 217, 255, 0.15);
  border-radius: 16px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  animation: slideUp 0.7s ease-out forwards;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-step:nth-child(1) { animation-delay: 0.1s; }
.process-step:nth-child(2) { animation-delay: 0.2s; }
.process-step:nth-child(3) { animation-delay: 0.3s; }
.process-step:nth-child(4) { animation-delay: 0.4s; }

.process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #00d9ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-step:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.12);
}

.process-step:hover::before {
  transform: scaleX(1);
}

.step-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--blue), #0088cc);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.step-content {
  position: relative;
  z-index: 1;
}

.step-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.3px;
}

.step-description {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}

/* Fits Section */
.process-fits-section {
  margin-bottom: 4rem;
}

.process-fits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.fits-card {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(25, 168, 255, 0.04));
  border: 2px solid rgba(0, 217, 255, 0.2);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: fadeInUp 0.8s ease-out backwards;
}

.fits-card:nth-child(1) { animation-delay: 0.1s; }
.fits-card:nth-child(2) { animation-delay: 0.2s; }
.fits-card:nth-child(3) { animation-delay: 0.3s; }

.fits-card:hover {
  border-color: rgba(0, 217, 255, 0.6);
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(25, 168, 255, 0.08));
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0, 217, 255, 0.15);
}

.fits-icon {
  font-size: 2.5rem;
  margin-bottom: 1.2rem;
  display: block;
}

.fits-text {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* Closing */
.process-closing {
  text-align: center;
  padding: 8rem 2rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 88, 204, 0.2));
  border-radius: 16px;
  animation: fadeInUp 0.8s ease-out 0.5s backwards;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.process-closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 88, 204, 0.15);
  z-index: 1;
}

.closing-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: white;
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}

.closing-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 2.5rem 0;
  letter-spacing: -0.3px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  font-weight: 500;
}

.closing-cta-btn {
  display: inline-block;
  padding: 1.1rem 2.8rem;
  background: linear-gradient(135deg, var(--blue), #0088cc);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: none;
  position: relative;
  z-index: 2;
  overflow: hidden;
  letter-spacing: -0.3px;
  box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3);
}

.closing-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.6s;
  z-index: -1;
}

.closing-cta-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 217, 255, 0.4);
}

.closing-cta-btn:hover::before {
  left: 100%;
}

.process-cta-btn {
  display: inline-block;
  padding: 1.1rem 2.5rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  letter-spacing: -0.3px;
}

.process-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

.process-cta-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.process-cta-btn:hover::before {
  left: 100%;
}

@media (max-width: 768px) {
  .process-section {
    padding: 6rem 1.5rem;
  }

  .process-header {
    margin-bottom: 3rem;
  }

  .process-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .process-intro-highlight {
    padding: 1.2rem;
    font-size: 1rem;
  }

  .process-visit-section {
    margin-bottom: 4rem;
  }

  .process-section-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .process-steps {
    gap: 1.5rem;
  }

  .process-step {
    padding: 2rem;
  }

  .process-fits-grid {
    gap: 1.5rem;
  }

  .fits-card {
    padding: 2rem;
  }

  .fits-icon {
    font-size: 2rem;
  }

  .closing-text {
    font-size: 1.2rem;
  }

  .process-cta-btn {
    width: 100%;
  }
}

/* ===== WHY FEROTECT SECTION ===== */
.why-ferotect-section {
  padding: 8rem 2rem;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.08) 0%, rgba(25, 168, 255, 0.04) 100%);
  position: relative;
  overflow: hidden;
}

.why-ferotect-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.why-ferotect-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(25, 168, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(30px); }
}

.why-ferotect-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.why-ferotect-header {
  text-align: center;
  margin-bottom: 5rem;
  animation: fadeInDown 0.8s ease-out forwards;
}

.why-ferotect-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 1.2rem 0;
  letter-spacing: -1px;
  line-height: 1.2;
}

.why-ferotect-lead {
  font-size: 1.1rem;
  color: var(--text-soft);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: -0.3px;
}

.why-ferotect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.why-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  animation: slideUp 0.7s ease-out forwards;
  opacity: 0;
}

.why-card-1 { animation-delay: 0.1s; }
.why-card-2 { animation-delay: 0.2s; }
.why-card-3 { animation-delay: 0.3s; }
.why-card-4 { animation-delay: 0.4s; }

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #00d9ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.why-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.15);
  background: rgba(255, 255, 255, 0.85);
}

.why-card:hover::before {
  transform: scaleX(1);
}

.why-card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(25, 168, 255, 0.1));
  border: 2px solid rgba(0, 217, 255, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--blue);
  transition: all 0.4s ease;
}

.why-card:hover .why-card-icon {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.25), rgba(25, 168, 255, 0.2));
  border-color: rgba(0, 217, 255, 0.6);
  transform: scale(1.1) rotate(5deg);
}

.why-card-icon svg {
  width: 28px;
  height: 28px;
}

.why-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.3px;
}

.why-card-text {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin: 0;
}

.why-ferotect-cta {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(25, 168, 255, 0.08));
  border-radius: 16px;
  border: 1px solid rgba(0, 217, 255, 0.2);
  animation: fadeInUp 0.8s ease-out 0.5s forwards;
  opacity: 0;
}

.why-ferotect-cta-text {
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 1.5rem 0;
  font-weight: 500;
}

.why-ferotect-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, var(--blue) 0%, #0088cc 100%);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3);
  position: relative;
  overflow: hidden;
  letter-spacing: -0.3px;
}

.why-ferotect-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.why-ferotect-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 217, 255, 0.4);
}

.why-ferotect-btn:hover::before {
  left: 100%;
}

@media (max-width: 768px) {
  .why-ferotect-section {
    padding: 6rem 1.5rem;
  }

  .why-ferotect-header {
    margin-bottom: 3rem;
  }

  .why-ferotect-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .why-ferotect-lead {
    font-size: 1rem;
  }

  .why-ferotect-grid {
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .why-card {
    padding: 2rem 1.5rem;
  }

  .why-ferotect-cta {
    padding: 2rem 1.5rem;
  }
}

.plat-hero-visual-zone {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.plat-hero-card {
  padding: 1.8rem 2rem;
  border-radius: 14px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 217, 255, 0.15);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: heroCardFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.plat-hero-card-primary {
  animation-delay: 0.2s;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.12), rgba(0, 217, 255, 0.04));
}

.plat-hero-card-secondary {
  animation-delay: 0.4s;
  background: linear-gradient(135deg, rgba(25, 168, 255, 0.12), rgba(25, 168, 255, 0.04));
}

.plat-hero-card-tertiary {
  animation-delay: 0.6s;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(25, 168, 255, 0.04));
}

@keyframes heroCardFadeIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.plat-hero-card:hover {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(0, 217, 255, 0.1));
  border-color: rgba(0, 217, 255, 0.4);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 217, 255, 0.15);
}

.plat-hero-card-icon {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
  display: inline-block;
}

.plat-hero-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.6rem 0;
  letter-spacing: -0.3px;
}

.plat-hero-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

.plat-hero-scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  z-index: 10;
  animation: scrollIndicatorBounce 2.5s ease-in-out infinite;
}

.plat-hero-scroll-indicator span {
  font-size: 0.75rem;
  color: rgba(0, 217, 255, 0.6);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

.plat-scroll-line {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.8), transparent);
  border-radius: 1px;
}

@keyframes scrollIndicatorBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50% { transform: translateX(-50%) translateY(10px); opacity: 1; }
}

/* RESPONSIVE */

@media (max-width: 1200px) {
  .plat-hero-container {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0 2rem;
  }

  .plat-hero-heading {
    font-size: clamp(2.2rem, 6vw, 3.5rem);
  }

  .plat-hero-description {
    font-size: 1.05rem;
  }

  .plat-hero-visual-zone {
    grid-template-columns: 1fr;
    order: -1;
  }
}

@media (max-width: 768px) {
  .plat-hero-premium {
    min-height: 90vh;
    padding: 2rem 0;
  }

  .plat-hero-container {
    padding: 0 1.5rem;
  }

  .plat-hero-heading {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    margin-bottom: 1.5rem;
  }

  .plat-hero-description {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .plat-hero-tag {
    font-size: 0.7rem;
    margin-bottom: 1.5rem;
  }

  .plat-hero-trust-line {
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }

  .plat-hero-trust-number {
    font-size: 1.5rem;
  }

  .plat-hero-cta {
    flex-direction: column;
  }

  .plat-hero-btn {
    width: 100%;
    padding: 1rem 2rem;
  }

  .plat-hero-card {
    padding: 1.5rem 1.8rem;
  }

  .plat-hero-scroll-indicator {
    display: none;
  }
}

@media (max-width: 600px) {
  .plat-hero-premium {
    min-height: auto;
    padding: 2rem 0 4rem 0;
  }

  .plat-hero-heading {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-bottom: 1.2rem;
  }

  .plat-hero-description {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }

  .plat-hero-trust-line {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .plat-hero-trust-divider {
    display: none;
  }

  .plat-hero-cta {
    gap: 0.8rem;
  }

  .plat-hero-btn {
    padding: 0.95rem 1.8rem;
    font-size: 0.9rem;
  }

  .plat-hero-btn svg {
    width: 18px;
    height: 18px;
  }

  .plat-hero-visual-zone {
    gap: 1rem;
  }

  .plat-hero-card {
    padding: 1.3rem 1.5rem;
  }

  .plat-hero-card h3 {
    font-size: 1rem;
  }

  .plat-hero-card p {
    font-size: 0.85rem;
  }

  .plat-hero-subtext {
    font-size: 0.7rem;
  }
}

/* ===== PLÃ…TTAK PAGE ===== */

/* Intro Section */
/* ========== 4 PILLARS SECTION - PREMIUM DESIGN ========== */

.plat-pillars-section {
  padding: 8rem 2rem;
  margin-top: 8rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 50%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.plat-pillars-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.plat-pillars-section::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 136, 204, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.plat-pillars-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
}

.plat-pillars-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  letter-spacing: -1.2px;
}

.plat-pillars-subtitle {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.plat-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.plat-pillar {
  background: white;
  padding: 2.2rem 2rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 217, 255, 0.15);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: fadeInUp 0.8s ease-out backwards;
}

.plat-pillar:nth-child(1) { animation-delay: 0.1s; }
.plat-pillar:nth-child(2) { animation-delay: 0.2s; }
.plat-pillar:nth-child(3) { animation-delay: 0.3s; }
.plat-pillar:nth-child(4) { animation-delay: 0.4s; }

.plat-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #00d9ff 0%, #0088cc 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plat-pillar:hover::before {
  transform: scaleX(1);
}

.plat-pillar:hover {
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.1);
  transform: translateY(-12px);
}

.plat-pillar-number {
  display: inline-block;
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  letter-spacing: -2px;
  opacity: 0.4;
}

.plat-pillar-icon {
  width: 70px;
  height: 70px;
  margin: 1.5rem auto 2rem;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, rgba(0, 136, 204, 0.1) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0088cc;
  transition: all 0.4s ease;
}

.plat-pillar:hover .plat-pillar-icon {
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  color: white;
  transform: scale(1.15) rotate(-5deg);
}

.plat-pillar-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2;
}

.plat-pillar-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem 0;
  letter-spacing: -0.5px;
}

.plat-pillar-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #666;
  margin-bottom: 1.5rem;
}

.plat-pillar-details {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  background: rgba(0, 217, 255, 0.04);
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 3px solid #00d9ff;
}

.plat-pillar-details li {
  font-size: 0.9rem;
  color: #555;
  padding: 0.6rem 0;
  display: flex;
  align-items: center;
}

.plat-pillar-details li::before {
  content: '✓';
  color: #00d9ff;
  font-weight: 800;
  margin-right: 0.8rem;
  font-size: 1.1rem;
}

.plat-pillars-cta {
  text-align: center;
  margin-top: 5rem;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.08) 0%, rgba(0, 136, 204, 0.08) 100%);
  border-radius: 16px;
  border: 1px solid rgba(0, 217, 255, 0.2);
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.5s backwards;
}

.plat-pillars-cta p {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1.5rem 0;
  line-height: 1.7;
}

.plat-pillars-btn {
  display: inline-block;
  padding: 1.2rem 2.8rem;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 217, 255, 0.2);
}

.plat-pillars-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 217, 255, 0.3);
}

.plat-pillars-btn:active {
  transform: translateY(-1px);
}

/* ---- PILLARS RESPONSIVE ---- */
@media (max-width: 900px) {
  .plat-pillars-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .plat-pillars-section { padding: 5rem 1.5rem; margin-top: 4rem; }
  .plat-pillars-header { margin-bottom: 3rem; }
  .plat-pillar { padding: 1.8rem 1.5rem; }
  .plat-pillar-number { font-size: 2rem; margin-bottom: 0.5rem; }
  .plat-pillar-icon { width: 56px; height: 56px; margin: 1rem auto 1.2rem; }
  .plat-pillar-title { font-size: 1.25rem; }
  .plat-pillar-description { font-size: 0.9rem; margin-bottom: 1rem; }
  .plat-pillar-details { padding: 1.2rem; }
  .plat-pillar-details li { font-size: 0.85rem; padding: 0.4rem 0; }
  .plat-pillar:hover { transform: none; }
  .plat-pillars-cta { margin-top: 3rem; padding: 2rem 1.5rem; }
}

/* OLD UNUSED STYLES */
.plat-importance-section {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}

/* ========== PREMIUM SERVICES SECTION ========== */

.plat-services-premium-section {
  padding: 8rem 2rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 50%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.plat-services-premium-section::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.plat-services-premium-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 136, 204, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.plat-services-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.plat-services-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  letter-spacing: -1.2px;
}

.plat-services-subtitle {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.plat-services-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.plat-service-premium-card {
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(0, 217, 255, 0.15);
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out backwards;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.plat-service-premium-card:nth-child(1) { animation-delay: 0.1s; }
.plat-service-premium-card:nth-child(2) { animation-delay: 0.2s; }
.plat-service-premium-card:nth-child(3) { animation-delay: 0.3s; }

.plat-service-premium-card:hover {
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.12);
  transform: translateY(-8px);
}

.plat-service-top {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.plat-service-image-premium {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.plat-service-image-premium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.plat-service-premium-card:hover .plat-service-image-premium img {
  transform: scale(1.08);
}

.plat-service-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}

.plat-service-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 2;
}

.plat-service-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.plat-service-body h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.4px;
}

.plat-service-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #666;
  margin: 0;
  flex: 1;
}

.plat-service-specs {
  display: none;
}

.plat-spec-item {
  display: flex;
  flex-direction: column;
}

.plat-spec-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0088cc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}

.plat-spec-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.plat-service-link {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.plat-service-link:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 25px rgba(0, 217, 255, 0.2);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .plat-services-premium-section {
    padding: 6rem 2rem;
  }

  .plat-services-premium-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .plat-service-top {
    height: 240px;
  }

  .plat-services-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }
}

@media (max-width: 768px) {
  .plat-services-premium-section {
    padding: 4rem 1.5rem;
  }

  .plat-services-header {
    margin-bottom: 3rem;
  }

  .plat-services-premium-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .plat-services-title {
    font-size: clamp(1.6rem, 4vw, 2rem);
  }

  .plat-services-subtitle {
    font-size: 1rem;
  }

  .plat-service-top {
    height: 220px;
  }

  .plat-service-body {
    padding: 1.5rem;
  }

  .plat-service-body h3 {
    font-size: 1.3rem;
  }

  .plat-service-description {
    font-size: 0.9rem;
  }

  .plat-service-badge {
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
  }
}

/* OLD STYLES - KEEPING FOR REFERENCE */
.plat-services-section {
  padding: 8rem 2rem;
  background: white;
}

.plat-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.plat-service-card {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(25, 168, 255, 0.04));
  border: 2px solid rgba(0, 217, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  animation: slideUp 0.8s ease-out backwards;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.plat-service-card:nth-child(1) { animation-delay: 0.1s; }
.plat-service-card:nth-child(2) { animation-delay: 0.2s; }
.plat-service-card:nth-child(3) { animation-delay: 0.3s; }

.plat-service-card:hover {
  transform: translateY(-12px);
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.2);
}

.plat-service-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue), #0088cc);
}

.plat-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.plat-service-card:hover .plat-service-image img {
  transform: scale(1.05);
}

.plat-service-content {
  padding: 2.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.plat-service-content h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem 0;
  letter-spacing: -0.4px;
}

.plat-service-content p {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.plat-service-details {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.plat-detail-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(0, 217, 255, 0.15);
  color: var(--blue);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* ========== KNOWLEDGE CENTER SECTION ========== */

.plat-knowledge-section {
  padding: 10rem 2rem;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.plat-knowledge-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('joy4.jpg');
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

.plat-knowledge-bg::before {
  display: none;
}

.plat-knowledge-bg::after {
  display: none;
}

.plat-knowledge-header {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
}

.plat-knowledge-header h2 {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 0.5rem 0;
  letter-spacing: -2px;
  line-height: 1.1;
}

.plat-knowledge-header h2:nth-of-type(2) {
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 1.5rem;
}

.plat-knowledge-header p {
  font-size: 1.15rem;
  color: #666;
  margin: 0;
  font-weight: 500;
}

.plat-knowledge-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 700px;
  margin: 0 auto;
}

/* IMAGE COLUMN */
.plat-knowledge-image-wrap {
  display: none;
}

.plat-knowledge-image-container {
  display: none;
}

.plat-knowledge-image {
  display: none;
}

.plat-knowledge-image-accent {
  display: none;
}

/* CARDS COLUMN */
.plat-knowledge-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.plat-knowledge-card {
  background: white;
  border: 2px solid rgba(0, 217, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: fadeInUp 0.6s ease-out backwards;
}

.plat-knowledge-card:nth-child(1) { animation-delay: 0.1s; }
.plat-knowledge-card:nth-child(2) { animation-delay: 0.2s; }
.plat-knowledge-card:nth-child(3) { animation-delay: 0.3s; }
.plat-knowledge-card:nth-child(4) { animation-delay: 0.4s; }
.plat-knowledge-card:nth-child(5) { animation-delay: 0.5s; }

.plat-knowledge-card:hover {
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 136, 204, 0.1);
}

.plat-knowledge-card.active {
  border-color: rgba(0, 217, 255, 0.5);
  box-shadow: 0 20px 60px rgba(0, 136, 204, 0.15);
}

/* CARD HEADER */
.plat-knowledge-card-header {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.plat-knowledge-card.active .plat-knowledge-card-header {
  background: linear-gradient(90deg, rgba(0, 217, 255, 0.08) 0%, rgba(0, 136, 204, 0.04) 100%);
}

.plat-knowledge-card-number {
  font-size: 1.4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -1px;
}

.plat-knowledge-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.plat-knowledge-card:hover .plat-knowledge-card-title {
  color: #0088cc;
}

.plat-knowledge-card-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #0088cc;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plat-knowledge-card-toggle svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.plat-knowledge-card.active .plat-knowledge-card-toggle {
  transform: rotate(45deg);
  color: #00d9ff;
}

/* CARD BODY */
.plat-knowledge-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: white;
}

.plat-knowledge-card.active .plat-knowledge-card-body {
  max-height: 500px;
}

.plat-knowledge-card-body p {
  padding: 0 2rem 2rem 2rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .plat-knowledge-section {
    padding: 7rem 2rem;
  }

  .plat-knowledge-header {
    margin-bottom: 4rem;
  }

  .plat-knowledge-header h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
  }

  .plat-knowledge-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .plat-knowledge-image-wrap {
    position: relative;
    top: 0;
  }

  .plat-knowledge-image {
    max-width: 100%;
  }

  .plat-knowledge-card-header {
    grid-template-columns: 50px 1fr 35px;
    gap: 1rem;
    padding: 1.6rem;
  }

  .plat-knowledge-card-number {
    font-size: 1.2rem;
  }

  .plat-knowledge-card-title {
    font-size: 1rem;
  }

  .plat-knowledge-card-body p {
    padding: 0 1.6rem 1.6rem 1.6rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .plat-knowledge-section {
    padding: 5rem 1.5rem;
  }

  .plat-knowledge-header {
    margin-bottom: 3rem;
  }

  .plat-knowledge-header h2 {
    font-size: clamp(1.6rem, 4vw, 2rem);
    margin-bottom: 0.3rem;
  }

  .plat-knowledge-header p {
    font-size: 1rem;
  }

  .plat-knowledge-grid {
    gap: 2.5rem;
  }

  .plat-knowledge-cards-wrap {
    gap: 1rem;
  }

  .plat-knowledge-card-header {
    grid-template-columns: 45px 1fr 30px;
    gap: 0.8rem;
    padding: 1.2rem;
  }

  .plat-knowledge-card-number {
    font-size: 1rem;
  }

  .plat-knowledge-card-title {
    font-size: 0.9rem;
  }

  .plat-knowledge-card-body p {
    padding: 0 1.2rem 1.2rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* OLD STYLES */
.plat-nc-section {
  padding: 8rem 2rem;
  background: linear-gradient(180deg, #ffffff 0%, rgba(0, 217, 255, 0.02) 100%);
  position: relative;
  overflow: hidden;
}

.plat-nc-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.plat-nc-wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4rem;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

/* IMAGE COLUMN */
.plat-nc-image-col {
  position: relative;
  order: -1;
}

.plat-nc-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 136, 204, 0.15);
  animation: fadeInUp 0.8s ease-out;
}

.plat-nc-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

/* CONTENT COLUMN */
.plat-nc-content-col {
  animation: fadeInUp 0.8s ease-out 0.1s backwards;
}

.plat-nc-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 0.5rem 0;
  letter-spacing: -1.5px;
  line-height: 1.2;
}

.plat-nc-subtitle {
  font-size: 1.1rem;
  color: #0088cc;
  font-weight: 600;
  margin: 0 0 2.5rem 0;
  letter-spacing: 0.5px;
}

/* ACCORDION */
.plat-nc-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.plat-nc-accordion-item {
  background: white;
  border: 2px solid rgba(0, 217, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.plat-nc-accordion-item:hover {
  border-color: rgba(0, 217, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 136, 204, 0.1);
}

.plat-nc-accordion-header {
  width: 100%;
  padding: 1.6rem 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  transition: all 0.3s ease;
  letter-spacing: -0.3px;
}

.plat-nc-accordion-header:hover {
  color: #0088cc;
}

.plat-nc-accordion-header span {
  flex: 1;
}

.plat-nc-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #0088cc;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ACTIVE STATE */
.plat-nc-accordion-item.active .plat-nc-accordion-header {
  background: linear-gradient(90deg, rgba(0, 217, 255, 0.06) 0%, rgba(0, 136, 204, 0.06) 100%);
  color: #0088cc;
}

.plat-nc-accordion-item.active .plat-nc-chevron {
  transform: rotate(180deg);
}

.plat-nc-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plat-nc-accordion-item.active .plat-nc-accordion-content {
  max-height: 500px;
}

.plat-nc-accordion-content p {
  padding: 0 2rem 1.6rem 2rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .plat-nc-section {
    padding: 6rem 2rem;
  }

  .plat-nc-wrapper {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .plat-nc-image-col {
    order: 1;
  }

  .plat-nc-image {
    max-width: 100%;
  }

  .plat-nc-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }

  .plat-nc-accordion-header {
    padding: 1.4rem 1.5rem;
    font-size: 1rem;
  }

  .plat-nc-accordion-content p {
    padding: 0 1.5rem 1.4rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .plat-nc-section {
    padding: 4rem 1rem;
  }

  .plat-nc-wrapper {
    gap: 2.5rem;
  }

  .plat-nc-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.3rem;
  }

  .plat-nc-subtitle {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .plat-nc-accordion {
    gap: 1rem;
  }

  .plat-nc-accordion-header {
    padding: 1.2rem 1.2rem;
    font-size: 0.95rem;
    gap: 1rem;
  }

  .plat-nc-chevron {
    width: 20px;
    height: 20px;
  }

  .plat-nc-accordion-content p {
    padding: 0 1.2rem 1.2rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* OLD STYLES - KEEPING FOR REFERENCE */
.plat-no-compromise-section {
  padding: 8rem 2rem;
  background: linear-gradient(180deg, #ffffff 0%, rgba(0, 217, 255, 0.03) 100%);
  position: relative;
  overflow: hidden;
}

.plat-no-compromise-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 400px;
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.08) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.plat-nc-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.plat-nc-title {
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--text);
  text-align: center;
  margin: 0 0 1rem 0;
  letter-spacing: -2px;
}

.plat-nc-intro {
  font-size: 1.3rem;
  text-align: center;
  color: #0088cc;
  font-weight: 700;
  margin: 0 0 3.5rem 0;
  letter-spacing: -0.5px;
}

.plat-nc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-bottom: 4rem;
}

.plat-nc-item {
  background: white;
  padding: 2.8rem;
  border-radius: 16px;
  border: 2px solid rgba(0, 217, 255, 0.15);
  animation: fadeInUp 0.8s ease-out backwards;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.plat-nc-item:nth-child(1) { animation-delay: 0.1s; }
.plat-nc-item:nth-child(2) { animation-delay: 0.2s; }
.plat-nc-item:nth-child(3) { animation-delay: 0.3s; }
.plat-nc-item:nth-child(4) { animation-delay: 0.4s; }

.plat-nc-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00d9ff 0%, #0088cc 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plat-nc-item:hover::before {
  transform: scaleX(1);
}

.plat-nc-item:hover {
  border-color: rgba(0, 217, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.1);
  transform: translateY(-8px);
}

.plat-nc-icon {
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, rgba(0, 136, 204, 0.1) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0088cc;
  margin-bottom: 1.5rem;
  transition: all 0.4s ease;
}

.plat-nc-item:hover .plat-nc-icon {
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  color: white;
  transform: scale(1.1);
}

.plat-nc-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.5;
}

.plat-nc-item h4 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem 0;
  letter-spacing: -0.3px;
  line-height: 1.4;
}

.plat-nc-item p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #666;
  margin: 0;
}

.plat-nc-closing {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.06) 0%, rgba(0, 136, 204, 0.06) 100%);
  border: 1px solid rgba(0, 217, 255, 0.2);
  padding: 3rem;
  border-radius: 16px;
  text-align: center;
  animation: fadeInUp 0.8s ease-out 0.5s backwards;
}

.plat-nc-closing p {
  font-size: 1.1rem;
  color: #666;
  margin: 0 0 1rem 0;
  line-height: 1.8;
}

.plat-nc-closing p:last-child {
  margin-bottom: 0;
}

.plat-nc-emphasis {
  font-size: 1.4rem !important;
  font-weight: 800;
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* NO COMPROMISE - RESPONSIVE */
@media (max-width: 1024px) {
  .plat-no-compromise-section {
    padding: 6rem 2rem;
  }

  .plat-nc-grid {
    gap: 2.5rem;
  }

  .plat-nc-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .plat-nc-intro {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .plat-no-compromise-section {
    padding: 4rem 1.5rem;
  }

  .plat-nc-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .plat-nc-title {
    font-size: clamp(1.8rem, 4vw, 2.2rem);
  }

  .plat-nc-intro {
    font-size: 1rem;
    margin-bottom: 2.5rem;
  }

  .plat-nc-item {
    padding: 2rem;
  }

  .plat-nc-item h4 {
    font-size: 1.1rem;
  }

  .plat-nc-item p {
    font-size: 0.9rem;
  }

  .plat-nc-closing {
    padding: 2rem 1.5rem;
  }

  .plat-nc-closing p {
    font-size: 1rem;
  }

  .plat-nc-emphasis {
    font-size: 1.2rem !important;
  }
}

/* Why Section */
.plat-why-section {
  padding: 8rem 2rem;
  background: linear-gradient(135deg, #f8fafb 0%, #f0f4f8 100%);
}

.plat-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.plat-why-item {
  text-align: center;
  animation: fadeInUp 0.8s ease-out backwards;
}

.plat-why-item:nth-child(1) { animation-delay: 0.1s; }
.plat-why-item:nth-child(2) { animation-delay: 0.2s; }
.plat-why-item:nth-child(3) { animation-delay: 0.3s; }
.plat-why-item:nth-child(4) { animation-delay: 0.4s; }

.plat-why-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--blue), #0088cc);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  margin: 0 auto 1.5rem;
}

.plat-why-item h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1rem 0;
  letter-spacing: -0.3px;
}

.plat-why-item p {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}

/* CTA Section */
.plat-cta-section {
  padding: 10rem 2rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 88, 204, 0.35)), url('joy5.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  margin-top: 4rem;
  margin-bottom: 4rem;
  border-radius: 24px;
}

.plat-cta-bg {
  display: none;
}

.plat-cta-section .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.plat-cta-wrapper {
  display: none;
}

.plat-cta-image-col {
  display: none;
}

.plat-cta-image {
  display: none;
}

.plat-cta-content-col {
  display: none;
}

.plat-cta-section .process-closing {
  animation: fadeInUp 0.8s ease-out;
  background: none;
  padding: 0;
  border-radius: 0;
  min-height: auto;
}

.plat-cta-section .closing-title {
  color: white;
}

.plat-cta-section .closing-subtitle {
  color: white;
}

.plat-cta-section .closing-cta-btn {
  background: linear-gradient(135deg, #00d9ff 0%, #0088cc 100%);
}

/* Responsive */
@media (max-width: 640px) {
  .plat-cta-section {
    padding: 6rem 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

/* OLD STYLES */
.btn-large {
  padding: 1.2rem 3rem;
  font-size: 1.05rem;
  display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
  .plat-why-intro-section {
    padding: 4rem 1.5rem;
  }

  .plat-why-intro-content {
    margin-bottom: 3rem;
  }

  .plat-why-intro-content .section-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  .plat-why-intro-text {
    font-size: 1rem;
  }

  .plat-benefit-item {
    padding: 2rem 1.8rem;
  }

  .plat-benefit-item h4 {
    font-size: 1.1rem;
  }

  .plat-why-intro-benefits {
    gap: 1.5rem;
  }

  .plat-services-section {
    padding: 4rem 1.5rem;
  }

  .plat-why-section {
    padding: 4rem 1.5rem;
  }

  .plat-cta-section {
    padding: 4rem 1.5rem;
  }

  .plat-services-grid {
    gap: 1.5rem;
  }

  .plat-why-grid {
    gap: 1.5rem;
  }

  .plat-service-image {
    height: 180px;
  }

  .plat-service-content {
    padding: 1.5rem;
  }
}

/* ===== TAKPANNOR PAGE ===== */

/* Hero Section */
.hero-takpannor {
  background: url('tak2.jpg') fixed center/cover no-repeat;
  padding: 0 1.5rem 5rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-takpannor > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* PANNMODELLER & FÄRGER INTERACTIVE SELECTOR */
.pannmodeller-section {
  padding: 6rem 1.5rem;
  background: #ffffff;
  margin-top: 4.5rem;
}

.pannmodeller-container {
  max-width: 1200px;
  margin: 0 auto;
}

.pannmodeller-header {
  text-align: center;
  margin-bottom: 6.25rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.pannmodeller-header .section-title {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.pannmodeller-header .section-sub {
  font-size: 1.1rem;
  color: #5a5a5a;
  line-height: 1.8;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  display: block;
}

.pannmodeller-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
}

/* PANNMODELLER SELECTOR */
.pannmodeller-selector {
  background: white;
  border: 2px solid #dddddd;
  border-radius: 20px;
  padding: 2.5rem;
  height: fit-content;
}

.pannmodeller-selector h3 {
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(0,217,255,0.3);
}

.pannmodeller-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 395px;
  justify-content: space-around;
}

.pannmodell-btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem;
  background: #f9f9f9;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
  flex: 1;
}

.pannmodell-btn:hover {
  border-color: #00d9ff;
  background: rgba(0,217,255,0.05);
  transform: translateX(4px);
}

.pannmodell-btn.active {
  background: linear-gradient(135deg, rgba(0,217,255,0.15), rgba(0,136,204,0.1));
  border-color: #00d9ff;
  box-shadow: 0 8px 20px rgba(0,217,255,0.15);
}

.btn-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pannmodell-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.btn-text {
  flex: 1;
}

.btn-text strong {
  display: block;
  color: #111111;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.btn-text span {
  display: block;
  color: #7a7a7a;
  font-size: 0.85rem;
}

/* PREVIEW AREA */
.pannmodeller-preview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.preview-image-container {
  position: relative;
  background: #f5f5f5;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 0.5;
  border: 2px solid #e5e5e5;
}

.preview-house {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b8361e;
  opacity: 0.35;
  mix-blend-mode: multiply;
  transition: all 0.5s ease;
}

.preview-info {
  background: linear-gradient(135deg, rgba(0,136,204,0.05) 0%, rgba(0,217,255,0.03) 100%);
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid rgba(0,217,255,0.2);
}

.preview-info h4 {
  font-size: 1.3rem;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.preview-info p {
  font-size: 0.95rem;
  color: #5a5a5a;
  line-height: 1.7;
  font-weight: 500;
}

/* FÄRGER SELECTOR */
.färger-selector {
  grid-column: 1 / -1;
  background: white;
  border: 2px solid #dddddd;
  border-radius: 20px;
  padding: 2.5rem;
}

.färger-selector h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(0,217,255,0.2);
}

.färger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 1.2rem;
}

.färg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.färg-swatch {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.färg-option:hover .färg-swatch {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.färg-option.active .färg-swatch {
  border-color: #00d9ff;
  box-shadow: 0 0 0 4px rgba(0,217,255,0.2), 0 8px 24px rgba(0,217,255,0.3);
}

.färg-name {
  font-size: 0.85rem;
  color: #5a5a5a;
  text-align: center;
  font-weight: 500;
}

.färg-option.active .färg-name {
  color: #00d9ff;
  font-weight: 700;
}

/* VALD FÄRG INFO */
.vald-färg-info {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(0,217,255,0.08), rgba(0,136,204,0.05));
  border: 2px solid rgba(0,217,255,0.3);
  border-radius: 16px;
  padding: 2.5rem;
  align-items: start;
}

.färg-preview {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  border: 3px solid rgba(0,217,255,0.4);
  transition: all 0.5s ease;
}

.färg-details h4 {
  font-size: 1.5rem;
  color: #111111;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.färg-details p {
  font-size: 0.95rem;
  color: #5a5a5a;
  margin-bottom: 0.5rem;
}

#färgRAL {
  font-weight: 600;
  color: #00688c;
  font-family: 'Courier New', monospace;
}

.färg-beskrivning {
  margin: 1rem 0 !important;
  line-height: 1.7;
}

.färg-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7a7a7a;
  font-weight: 600;
}

.stat-value {
  font-size: 0.95rem;
  color: #111111;
  font-weight: 700;
}

/* CTA SECTION */
/* PANNMODELLER INFO SECTION */
.pannmodeller-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}

.info-card {
  background: linear-gradient(135deg, rgba(0,136,204,0.05) 0%, rgba(0,217,255,0.03) 100%);
  border: 2px solid rgba(0,217,255,0.15);
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.info-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0,217,255,0.3);
  box-shadow: 0 20px 40px rgba(0,136,204,0.1);
}

.info-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  border-radius: 12px;
  color: white;
  flex-shrink: 0;
}

.info-icon svg {
  width: 28px;
  height: 28px;
  stroke: white;
}

.info-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.8rem;
}

.info-card p {
  font-size: 0.9rem;
  color: #5a5a5a;
  line-height: 1.6;
}

/* TAKPANNOR SHOWCASE */
.takpannor-showcase {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}

.showcase-card {
  max-width: 900px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(0,217,255,0.2);
  box-shadow: 0 20px 60px rgba(0,136,204,0.12);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.showcase-card:hover {
  box-shadow: 0 30px 80px rgba(0,136,204,0.18);
  border-color: rgba(0,217,255,0.3);
}

.showcase-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.showcase-label {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: rgba(0,136,204,0.95);
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
}

.showcase-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: -1;
  height: 100%;
}

.showcase-right {
  order: -1;
}

.showcase-left {
  order: -1;
}

.showcase-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.showcase-card p {
  font-size: 0.95rem;
  color: #5a5a5a;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .showcase-card {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .showcase-content {
    padding: 1.8rem 1.5rem;
    order: 0;
  }
  .showcase-image-container {
    height: 240px;
    order: -1;
  }
  .showcase-card h3 { font-size: 1.2rem; }
  .showcase-card p { font-size: 0.9rem; }
  .takpannor-showcase { margin-top: 2.5rem; }
}

.pannmodeller-cta {
  text-align: center;
  background: linear-gradient(135deg, rgba(0,217,255,0.12), rgba(0,136,204,0.08));
  border: 2px solid rgba(0,217,255,0.3);
  border-radius: 20px;
  padding: 3rem;
  max-width: 700px;
  margin: 0 auto;
}

.pannmodeller-cta h3 {
  font-size: 1.8rem;
  color: #111111;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.pannmodeller-cta p {
  font-size: 1.05rem;
  color: #5a5a5a;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .pannmodeller-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .vald-färg-info {
    grid-template-columns: 1fr;
  }

  .färg-preview {
    width: 100%;
    max-width: 180px;
  }

  .färger-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
}

@media (max-width: 640px) {
  .pannmodeller-section {
    padding: 3rem 1rem;
  }

  .pannmodeller-header .section-title {
    font-size: 2rem;
  }

  .pannmodeller-selector,
  .färger-selector,
  .vald-färg-info {
    padding: 1.5rem;
  }

  .pannmodeller-buttons {
    gap: 0.8rem;
  }

  .pannmodell-btn {
    padding: 1.2rem;
    gap: 1rem;
  }

  .btn-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
  }

  .färger-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 1rem;
  }

  .färg-swatch {
    width: 60px;
    height: 60px;
  }

  .pannmodeller-cta {
    padding: 2rem 1.5rem;
  }

  .pannmodeller-cta h3 {
    font-size: 1.4rem;
  }
}

/* TAKPANNOR EXPLAINED SECTION - NEW */
.takpannor-explained-section {
  padding: 6rem 1.5rem;
  background: #ffffff;
}

.takpannor-explained-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.takpannor-explained-header .section-title {
  font-size: 3.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.takpannor-explained-header .section-sub {
  font-size: 1.15rem;
  color: #5a5a5a;
  line-height: 1.8;
  text-align: center;
  display: block;
  margin: 0 auto;
}

/* Ingress Box */
.takpannor-ingress-box {
  background: linear-gradient(135deg, rgba(0,217,255,0.1), rgba(0,136,204,0.1));
  border: 2px solid rgba(0,217,255,0.3);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 4rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.ingress-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ingress-icon svg {
  width: 40px;
  height: 40px;
  stroke: white;
  stroke-width: 2;
}

.ingress-content h3 {
  font-size: 1.4rem;
  color: #111111;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.ingress-content p {
  font-size: 1rem;
  color: #5a5a5a;
  line-height: 1.8;
}

/* Key Questions Grid */
.takpannor-key-questions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.key-question-card:nth-child(3) {
  grid-column: 1 / -1;
  max-width: 100%;
  margin: 0;
}

.key-question-card:nth-child(3) .question-number {
  margin-bottom: 1.5rem;
}

.key-question-card:nth-child(3) .benefits-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.key-question-card:nth-child(3) .benefit-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

.key-question-card:nth-child(3) .benefit-icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.key-question-card:nth-child(3) .benefit-text {
  text-align: left;
}

.key-question-card {
  background: white;
  border: 2px solid #dddddd;
  border-radius: 16px;
  padding: 2.5rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.key-question-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00d9ff, #0088cc);
}

.key-question-card:hover {
  border-color: #00d9ff;
  box-shadow: 0 12px 32px rgba(0,217,255,0.15);
  transform: translateY(-4px);
}

.question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
}

.key-question-card h3 {
  font-size: 1.4rem;
  color: #111111;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.question-intro {
  font-size: 0.95rem;
  color: #5a5a5a;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* Checklist Section */
.checklist-section {
  margin-top: 1.5rem;
}

.section-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  display: block;
}

.feature-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.feature-checklist li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.check-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-checklist li div {
  flex: 1;
}

.feature-checklist strong {
  color: #111111;
  display: block;
  margin-bottom: 0.3rem;
}

.feature-checklist li div {
  font-size: 0.95rem;
  color: #5a5a5a;
  line-height: 1.6;
}

.cta-text {
  background: rgba(0,217,255,0.08);
  padding: 1.2rem;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #00688c;
  font-weight: 600;
  margin-top: 1.5rem;
}

/* Material Comparison */
.material-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.material-option h4 {
  font-size: 1.1rem;
  color: #111111;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #00d9ff;
}

.material-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.material-features li {
  font-size: 0.9rem;
  color: #5a5a5a;
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
}

.material-features li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #00d9ff;
  font-weight: 700;
}

.choice-guide {
  background: #f5f7fa;
  padding: 1.5rem;
  border-radius: 12px;
  margin-top: 1.5rem;
}

.choice-guide p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #5a5a5a;
}

.choice-guide p:first-child {
  font-weight: 700;
  color: #111111;
  margin-bottom: 0.8rem;
}

.highlight-bold {
  color: #00d9ff;
  font-weight: 700;
}

/* Benefits List */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.benefit-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1rem;
  background: rgba(0,217,255,0.05);
  border-radius: 12px;
}

.benefit-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-icon svg {
  width: 20px;
  height: 20px;
  stroke: white;
  stroke-width: 2;
}

.benefit-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #5a5a5a;
}

.benefit-text strong {
  color: #111111;
  display: inline;
}

/* Maintenance Tasks */
.maintenance-tasks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.task-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.2rem;
  background: white;
  border: 1px solid #dddddd;
  border-radius: 12px;
  align-items: flex-start;
}

.task-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.task-content {
  flex: 1;
  font-size: 0.95rem;
  color: #5a5a5a;
  line-height: 1.6;
}

.task-content strong {
  color: #111111;
  display: block;
  margin-bottom: 0.3rem;
}

.maintenance-summary {
  background: linear-gradient(135deg, rgba(0,217,255,0.1), rgba(0,136,204,0.1));
  border: 2px solid rgba(0,217,255,0.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.maintenance-summary p {
  font-size: 1rem;
  color: #5a5a5a;
  line-height: 1.7;
}

.maintenance-summary strong {
  color: #111111;
}

/* Bottom CTA */
.takpannor-explained-cta {
  background: linear-gradient(135deg, rgba(0,217,255,0.12), rgba(0,136,204,0.08));
  border: 2px solid rgba(0,217,255,0.3);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.takpannor-explained-cta h3 {
  font-size: 1.8rem;
  color: #111111;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.takpannor-explained-cta p {
  font-size: 1.05rem;
  color: #5a5a5a;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* Intro Section */
.takpannor-intro-section {
  padding: 6rem 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
}

.takpannor-intro-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.takpannor-intro-header .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 1rem;
}

.takpannor-intro-header .section-sub {
  font-size: 1.1rem;
  color: #5a5a5a;
  line-height: 1.7;
}

.takpannor-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.takpannor-intro-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  border: 2px solid #f0f0f0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.takpannor-intro-card:hover {
  border-color: #00d9ff;
  box-shadow: 0 12px 30px rgba(0,217,255,0.15);
  transform: translateY(-6px);
}

.intro-card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
}

.intro-card-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
  stroke-width: 2;
}

.takpannor-intro-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #111111;
  font-weight: 600;
}

.takpannor-intro-card p {
  font-size: 0.95rem;
  color: #5a5a5a;
  line-height: 1.6;
}

/* Advantages Section */
/* ========================================
/* ========================================
   COMPARISON SECTION - PREMIUM DESIGN
   ======================================== */

.comparison-premium {
  padding: 5rem 1.5rem;
  background: #ffffff;
}

.comparison-premium-container {
  max-width: 1200px;
  margin: 0 auto;
}

.comparison-premium-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  padding-bottom: 2rem;
}

.comparison-premium-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.comparison-premium-header p {
  font-size: 1.1rem;
  color: #666666;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.header-accent {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0088cc 0%, #00d9ff 100%);
  margin: 0 auto;
  border-radius: 2px;
}

/* Premium Cards Grid */
.premium-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.premium-card {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0088cc 0%, #00d9ff 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.premium-card:hover {
  border-color: #0088cc;
  box-shadow: 0 12px 32px rgba(0, 136, 204, 0.15);
  transform: translateY(-6px);
}

.premium-card:hover::before {
  transform: scaleX(1);
}

.card-top {
  margin-bottom: 1.8rem;
  text-align: center;
}

.card-icon-circle {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.card-icon-circle svg {
  width: 60px;
  height: 60px;
}

.premium-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 0.4rem;
}

.card-meta {
  font-size: 0.9rem;
  color: #0088cc;
  font-weight: 600;
  margin: 0;
}

/* Card Specs */
.card-specs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 2px solid #f0f0f0;
}

.spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spec-label {
  font-size: 0.85rem;
  color: #5a5a5a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spec-value {
  font-size: 0.95rem;
  color: #111111;
  font-weight: 700;
  text-align: right;
}

.card-description {
  font-size: 0.9rem;
  color: #5a5a5a;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  color: #0088cc;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  padding-bottom: 4px;
}

.card-link::after {
  content: '→';
  margin-left: 0.6rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-link:hover {
  color: #00d9ff;
}

.card-link:hover::after {
  transform: translateX(4px);
}

/* CTA Box */
.comparison-cta-box {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid #e8e8e8;
  border-radius: 16px;
  padding: 3rem;
  text-align: center;
}

.comparison-cta-box h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.comparison-cta-box p {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .comparison-premium {
    padding: 4rem 1.5rem;
  }

  .comparison-premium-header h2 {
    font-size: 2.1rem;
  }

  .premium-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .comparison-cta-box {
    padding: 2.5rem 2rem;
  }

  .comparison-cta-box h3 {
    font-size: 1.4rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .comparison-premium {
    padding: 3rem 1rem;
  }

  .comparison-premium-header {
    margin-bottom: 2.5rem;
  }

  .comparison-premium-header h2 {
    font-size: 1.8rem;
  }

  .comparison-premium-header p {
    font-size: 0.95rem;
  }

  .premium-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
  }

  .premium-card {
    padding: 1.5rem;
  }

  .card-icon-circle {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
  }

  .premium-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
  }

  .card-meta {
    font-size: 0.85rem;
  }

  .card-specs {
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
  }

  .spec-label {
    font-size: 0.8rem;
  }

  .spec-value {
    font-size: 0.9rem;
  }

  .card-description {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .card-link {
    font-size: 0.85rem;
  }

  .comparison-cta-box {
    padding: 2rem 1.5rem;
  }

  .comparison-cta-box h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
  }

  .comparison-cta-box p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 640px) {
  .comparison-premium {
    padding: 2.5rem 1rem;
  }

  .comparison-premium-header h2 {
    font-size: 1.5rem;
  }

  .comparison-premium-header p {
    font-size: 0.9rem;
  }

  .premium-cards-grid {
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .premium-card {
    padding: 1.2rem;
  }

  .card-icon-circle {
    font-size: 2rem;
    margin-bottom: 0.6rem;
  }

  .premium-card h3 {
    font-size: 1.05rem;
  }

  .card-specs {
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  .spec {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .spec-label {
    font-size: 0.75rem;
  }

  .spec-value {
    font-size: 0.85rem;
  }

  .card-description {
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
  }

  .comparison-cta-box {
    padding: 1.5rem 1rem;
  }

  .comparison-cta-box h3 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
  }

  .comparison-cta-box p {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
  }
}

/* ========================================
   COMPARISON SECTION (OLD - TO BE REMOVED)
   ======================================== */

.comparison-section {
  padding: 6rem 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.comparison-container {
  max-width: 1400px;
  margin: 0 auto;
}

.comparison-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.comparison-header .section-title {
  font-size: 3.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.comparison-header .section-sub {
  font-size: 1.15rem;
  color: #5a5a5a;
  line-height: 1.8;
  text-align: center;
  display: block;
  margin: 0 auto;
}

/* Filter Buttons */
.comparison-filter-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.7rem 1.5rem;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5a5a5a;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: #0088cc;
  color: #0088cc;
}

.filter-btn.active {
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  border-color: transparent;
  color: #ffffff;
}

/* Comparison Table */
.comparison-wrapper {
  overflow-x: auto;
  margin-bottom: 4rem;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.comparison-table {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
  gap: 0;
  min-width: 100%;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
}

.comparison-row {
  display: contents;
}

.comparison-row.header-row {
  display: contents;
}

.comparison-cell {
  padding: 1.5rem;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.comparison-row:first-child .comparison-cell {
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
  border: none;
  border-bottom: 2px solid #e0e0e0;
  font-weight: 700;
  padding: 2rem 1.5rem;
}

.comparison-cell.criteria-cell {
  background: #f8f9fa;
  text-align: left;
  align-items: flex-start;
  font-weight: 600;
  color: #111111;
  font-size: 0.95rem;
  border-left: 4px solid transparent;
  border-bottom: 1px solid #f0f0f0;
}

.comparison-row:nth-child(odd) .comparison-cell {
  background: #ffffff;
}

.comparison-row:nth-child(even) .comparison-cell {
  background: #f8f9fa;
}

.comparison-row:nth-child(odd) .comparison-cell.criteria-cell {
  background: #ffffff;
}

.comparison-row:nth-child(even) .comparison-cell.criteria-cell {
  background: #f0f2f5;
}

.criteria-label {
  font-weight: 700;
  color: #111111;
  font-size: 0.95rem;
}

/* Roof Type Badges */
.rooftype-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.rooftype-badge svg {
  width: 32px;
  height: 32px;
  margin-bottom: 0.5rem;
}

.rooftype-badge.takpannor {
  color: #ff6b35;
}

.rooftype-badge.metal {
  color: #6b7280;
}

.rooftype-badge.concrete {
  color: #8b5a3c;
}

.rooftype-badge.bitumen {
  color: #1f2937;
}

.rooftype-badge span {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Score Badges */
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.score-badge.excellent {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.score-badge.good {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.score-badge.average {
  background: rgba(251, 146, 60, 0.15);
  color: #ea580c;
}

.score-badge.poor {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.score-icon {
  font-size: 1rem;
}

.score-value {
  font-weight: 700;
  font-size: 0.85rem;
}

.score-text {
  font-size: 0.85rem;
}

.score-detail {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.3rem;
  font-weight: 500;
}

/* Summary Box */
.comparison-summary {
  background: linear-gradient(135deg, rgba(0,217,255,0.1), rgba(0,136,204,0.1));
  border: 2px solid rgba(0,217,255,0.3);
  border-radius: 20px;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.summary-content h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 1.5rem;
}

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

.summary-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #5a5a5a;
  line-height: 1.6;
}

.summary-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
}

.summary-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.summary-cta p {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111111;
}

.summary-cta .cta-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 136, 204, 0.3);
}

.summary-cta .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 136, 204, 0.4);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .comparison-table {
    grid-template-columns: 160px repeat(4, 0.9fr);
  }

  .comparison-cell {
    padding: 1.2rem 0.8rem;
  }

  .comparison-header .section-title {
    font-size: 2.8rem;
  }

  .comparison-summary {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .comparison-section {
    padding: 4rem 1rem;
  }

  .comparison-header .section-title {
    font-size: 2rem;
  }

  .comparison-header .section-sub {
    font-size: 1rem;
  }

  .comparison-filter-buttons {
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  .filter-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  .comparison-table {
    grid-template-columns: 120px repeat(4, 1fr);
  }

  .comparison-cell {
    padding: 1rem 0.6rem;
    font-size: 0.85rem;
  }

  .rooftype-badge svg {
    width: 24px;
    height: 24px;
  }

  .rooftype-badge span {
    font-size: 0.75rem;
  }

  .score-badge {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }

  .score-detail {
    font-size: 0.7rem;
  }

  .comparison-summary {
    padding: 1.5rem 1rem;
  }

  .summary-content h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }

  .summary-list li {
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
  }

  .summary-icon {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
  }

  .summary-cta p {
    font-size: 0.95rem;
  }

  .summary-cta .cta-btn {
    padding: 0.8rem 2rem;
    font-size: 0.85rem;
  }
}

/* Responsive - Small Mobile */
@media (max-width: 640px) {
  .comparison-table {
    grid-template-columns: 100px repeat(4, 0.8fr);
  }

  .comparison-cell {
    padding: 0.8rem 0.5rem;
    font-size: 0.7rem;
  }

  .criteria-label {
    font-size: 0.75rem;
  }

  .score-badge {
    padding: 0.3rem 0.6rem;
    font-size: 0.65rem;
  }

  .comparison-header {
    margin-bottom: 2rem;
  }

  .comparison-header .section-title {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }

  .comparison-filter-buttons {
    margin-bottom: 1.5rem;
  }

  .filter-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.75rem;
  }

  .comparison-summary {
    padding: 1.2rem 0.8rem;
  }

  .summary-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }

  .summary-list li {
    font-size: 0.8rem;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .summary-icon {
    min-width: 18px;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
  }

  .summary-cta p {
    font-size: 0.85rem;
  }

  .summary-cta .cta-btn {
    padding: 0.7rem 1.8rem;
    font-size: 0.8rem;
  }
}

.takpannor-advantages-section {
  padding: 6rem 1.5rem;
  background: #ffffff;
}

.takpannor-advantages-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.takpannor-advantages-header .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 1rem;
}

.takpannor-advantages-header .section-sub {
  font-size: 1.1rem;
  color: #5a5a5a;
  line-height: 1.7;
}

.takpannor-advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.advantage-card {
  position: relative;
  background: linear-gradient(135deg, rgba(0,217,255,0.08), rgba(0,136,204,0.08));
  border: 2px solid rgba(0,217,255,0.2);
  border-radius: 20px;
  padding: 2.5rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.advantage-card:hover {
  border-color: #00d9ff;
  background: linear-gradient(135deg, rgba(0,217,255,0.15), rgba(0,136,204,0.12));
  box-shadow: 0 20px 40px rgba(0,217,255,0.1);
}

.advantage-number {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.advantage-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.advantage-text {
  font-size: 0.95rem;
  color: #5a5a5a;
  line-height: 1.7;
}

.advantage-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #00d9ff, #0088cc);
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.advantage-card:hover .advantage-accent {
  width: 100%;
}

/* Craftsmanship Method Section */
.craftsmanship-section {
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,88,204,0.05), rgba(0,217,255,0.05));
  position: relative;
}

.craftsmanship-container {
  max-width: 1200px;
  margin: 0 auto;
}

.craftsmanship-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  padding-bottom: 2rem;
}

.craftsmanship-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.craftsmanship-header p {
  font-size: 1.1rem;
  color: #666666;
  font-weight: 500;
  margin-bottom: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.craftsmanship-header .header-accent {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0088cc 0%, #00d9ff 100%);
  margin: 0 auto;
  border-radius: 2px;
}

.process-timeline {
  display: grid;
  gap: 3rem;
  margin-bottom: 4rem;
}

.process-step {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 2rem;
  align-items: start;
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  border: 2px solid #e8e8e8;
  transition: all 0.3s ease;
}

.process-step:hover {
  border-color: #0088cc;
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.15);
  transform: translateX(8px);
}

.step-number {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.step-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 0.8rem 0;
}

.step-content p {
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(0,136,204,0.1), rgba(0,217,255,0.1));
  border-radius: 12px;
}

.step-icon svg {
  width: 60px;
  height: 60px;
}

.craftsmanship-message {
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  padding: 4rem;
  border-radius: 16px;
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.craftsmanship-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}

.message-box {
  position: relative;
  z-index: 1;
}

.message-box h3 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-box p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 0.8rem 0;
  font-weight: 500;
}

.message-box p strong {
  font-weight: 700;
}

/* Vertical Timeline Layout */
.timeline {
  position: relative;
  padding: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0088cc, #00d9ff);
  top: 0;
}

.timeline-item {
  margin-bottom: 3rem;
  position: relative;
}

.timeline-item:nth-child(odd) {
  padding-right: calc(50% + 2rem);
  text-align: right;
}

.timeline-item:nth-child(even) {
  padding-left: calc(50% + 2rem);
  text-align: left;
}

.timeline-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  top: 0;
}

.timeline-number {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
  border: 4px solid #ffffff;
}

.timeline-content {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid #e8e8e8;
  transition: all 0.3s ease;
  position: relative;
  margin-top: 1rem;
}

.timeline-content:hover {
  border-color: #0088cc;
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.12);
  transform: translateY(-4px);
}

.timeline-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 0.8rem 0;
  text-align: center;
}

.timeline-content p {
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

.timeline-connector {
  height: 0;
}

/* Responsive - Single Column Timeline */
@media (max-width: 1024px) {
  .timeline::before {
    left: 20px;
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-right: 0;
    padding-left: calc(100px + 2rem);
    text-align: left;
  }

  .timeline-marker {
    left: 20px;
    top: -8px;
  }

  .timeline-number {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
  }

  .timeline-content {
    margin-top: 0;
    padding: 1.5rem;
  }

  .timeline-content h3 {
    font-size: 1.2rem;
  }

  .timeline-content p {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .timeline {
    padding: 1rem 0;
  }

  .timeline::before {
    left: 16px;
  }

  .timeline-item {
    margin-bottom: 2.5rem;
  }

  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-left: calc(80px + 1.5rem);
  }

  .timeline-marker {
    left: 16px;
  }

  .timeline-number {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    border-width: 3px;
  }

  .timeline-content {
    padding: 1.25rem;
    border-radius: 10px;
  }

  .timeline-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
  }

  .timeline-content p {
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .craftsmanship-section {
    padding: 4rem 1.5rem;
  }

  .craftsmanship-header h2 {
    font-size: 2.2rem;
  }

  .process-step {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .step-icon {
    width: 80px;
    height: 80px;
  }

  .step-icon svg {
    width: 50px;
    height: 50px;
  }

  .craftsmanship-message {
    padding: 3rem;
  }

  .message-box h3 {
    font-size: 1.6rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .craftsmanship-section {
    padding: 3rem 1rem;
  }

  .craftsmanship-header h2 {
    font-size: 1.8rem;
  }

  .craftsmanship-header p {
    font-size: 1rem;
  }

  .process-step {
    padding: 1.5rem;
    gap: 1.2rem;
  }

  .step-number {
    font-size: 1.6rem;
  }

  .step-content h3 {
    font-size: 1.15rem;
  }

  .step-content p {
    font-size: 0.9rem;
  }

  .step-icon {
    width: 70px;
    height: 70px;
  }

  .step-icon svg {
    width: 45px;
    height: 45px;
  }

  .craftsmanship-message {
    padding: 2rem 1.5rem;
  }

  .message-box h3 {
    font-size: 1.4rem;
  }

  .message-box p {
    font-size: 1rem;
  }
}

/* Roof Savings Calculator Section */
.roof-comparison-section {
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,88,204,0.08), rgba(0,217,255,0.08));
  position: relative;
}

.roof-comparison-container {
  max-width: 1200px;
  margin: 0 auto;
}

.comparison-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  padding-bottom: 2rem;
}

.comparison-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.comparison-header p {
  font-size: 1.1rem;
  color: #666666;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.comparison-header .header-accent {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0088cc 0%, #00d9ff 100%);
  margin: 0 auto;
  border-radius: 2px;
}

.comparison-info-box {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-left: 4px solid #0088cc;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 3rem;
  font-size: 1rem;
  color: #666666;
  line-height: 1.6;
}

.cost-comparison-table-wrapper {
  overflow-x: auto;
  margin-bottom: 3rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cost-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.cost-comparison-table thead {
  background: linear-gradient(135deg, rgba(0,88,204,0.1), rgba(0,217,255,0.1));
  border-bottom: 2px solid #0088cc;
}

.cost-comparison-table th {
  padding: 1.5rem 1.2rem;
  text-align: left;
  font-weight: 700;
  color: #0088cc;
  font-size: 0.95rem;
  border-bottom: 2px solid #e8e8e8;
}

.cost-comparison-table td {
  padding: 1.5rem 1.2rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.95rem;
}

.material-row:hover {
  background: rgba(0,136,204,0.03);
}

.material-name {
  font-weight: 700;
  color: #111111;
  min-width: 140px;
}

.cost-cell {
  color: #0088cc;
  font-weight: 600;
  min-width: 110px;
}

.lifespan-cell {
  color: #666666;
  min-width: 100px;
}

.maintenance-cell {
  color: #666666;
  min-width: 120px;
}

.renovation-cell {
  color: #999999;
  min-width: 110px;
}

.total-cell {
  font-weight: 700;
  color: #0088cc;
  background: rgba(0,136,204,0.08);
  min-width: 140px;
}

.total-column {
  background: rgba(0,136,204,0.15);
  color: #0088cc;
}

.cost-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.insight-card {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.insight-card:hover {
  border-color: #0088cc;
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.15);
  transform: translateY(-4px);
}

.insight-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 1rem;
}

.insight-card p {
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .roof-comparison-section {
    padding: 4rem 1.5rem;
  }

  .comparison-header h2 {
    font-size: 2.2rem;
  }

  .cost-insights-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .roof-comparison-section {
    padding: 3rem 1rem;
  }

  .comparison-header h2 {
    font-size: 1.8rem;
  }

  .comparison-header p {
    font-size: 1rem;
  }

  .comparison-info-box {
    padding: 1.5rem;
  }

  .cost-comparison-table th,
  .cost-comparison-table td {
    padding: 1rem 0.8rem;
    font-size: 0.85rem;
  }

  .cost-insights-grid {
    gap: 1.5rem;
  }

  .insight-card {
    padding: 1.5rem;
  }

  .insight-title {
    font-size: 1rem;
  }

  .insight-card p {
    font-size: 0.9rem;
  }
}

.roof-savings-section {
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,88,204,0.08), rgba(0,217,255,0.08));
  position: relative;
}

.roof-savings-container {
  max-width: 1200px;
  margin: 0 auto;
}

.savings-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  padding-bottom: 2rem;
}

.savings-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.savings-header p {
  font-size: 1.1rem;
  color: #666666;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.savings-header .header-accent {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0088cc 0%, #00d9ff 100%);
  margin: 0 auto;
  border-radius: 2px;
}

.calculator-input {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-radius: 16px;
  padding: 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.input-group {
  max-width: 600px;
  margin: 0 auto;
}

.input-group label {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 1.5rem;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.size-slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #0088cc 0%, #00d9ff 100%);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0088cc;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.4);
  transition: all 0.2s ease;
}

.size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.6);
}

.size-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0088cc;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.4);
  transition: all 0.2s ease;
}

.size-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.6);
}

.size-display {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0088cc;
  min-width: 100px;
}

.size-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #999999;
  margin-top: 1rem;
  font-weight: 500;
}

.savings-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.savings-card {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.savings-card:hover {
  border-color: #0088cc;
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.15);
  transform: translateY(-4px);
}

.savings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 1rem;
}

.savings-card-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

.material-badge {
  background: linear-gradient(135deg, #0088cc 0%, #00d9ff 100%);
  color: #ffffff;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.savings-timeline {
  margin-bottom: 2rem;
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-label {
  font-size: 0.95rem;
  color: #666666;
  font-weight: 500;
}

.timeline-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0088cc;
}

.timeline-value.lifetime {
  color: #00d9ff;
}

.savings-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(0,88,204,0.08), rgba(0,217,255,0.08));
  padding: 1.2rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  border-left: 4px solid #0088cc;
}

.total-label {
  font-size: 0.9rem;
  color: #666666;
  font-weight: 600;
}

.total-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0088cc;
}

.savings-score {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.score-bar {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: 4px;
  animation: scoreAnimation 0.8s ease-out;
}

@keyframes scoreAnimation {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.score-excellent {
  background: linear-gradient(90deg, #00c851 0%, #00d9ff 100%);
  width: 95%;
}

.score-good {
  background: linear-gradient(90deg, #0088cc 0%, #00d9ff 100%);
  width: 80%;
}

.score-fair {
  background: linear-gradient(90deg, #ffa500 0%, #ff6b6b 100%);
  width: 60%;
}

.score-text {
  font-size: 0.85rem;
  color: #666666;
  font-weight: 600;
}

.savings-insights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  border: 2px solid #e8e8e8;
}

.insight-box {
  display: flex;
  gap: 1.5rem;
}

.insight-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.insight-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 0.5rem 0;
}

.insight-content p {
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .roof-savings-section {
    padding: 4rem 1.5rem;
  }

  .savings-header h2 {
    font-size: 2.2rem;
  }

  .savings-comparison-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .savings-insights {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .roof-savings-section {
    padding: 3rem 1rem;
  }

  .savings-header h2 {
    font-size: 1.8rem;
  }

  .savings-header p {
    font-size: 1rem;
  }

  .calculator-input {
    padding: 2rem 1.5rem;
  }

  .slider-container {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .size-display {
    text-align: center;
  }

  .savings-card {
    padding: 1.5rem;
  }

  .savings-card-header h3 {
    font-size: 1.1rem;
  }

  .timeline-value {
    font-size: 1rem;
  }

  .total-amount {
    font-size: 1.4rem;
  }

  .savings-insights {
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .insight-box {
    gap: 1rem;
  }

  .insight-icon {
    font-size: 2rem;
  }

  .insight-content h4 {
    font-size: 1rem;
  }

  .insight-content p {
    font-size: 0.9rem;
  }
}

/* Knowledge Section */
.takpannor-knowledge-section {
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,88,204,0.05), rgba(0,217,255,0.05));
  position: relative;
}

.takpannor-knowledge-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.knowledge-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 1rem;
}

.knowledge-subtitle {
  font-size: 1.1rem;
  color: #5a5a5a;
  line-height: 1.7;
}

.takpannor-knowledge-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.takpannor-knowledge-card {
  background: white;
  border: 2px solid #f0f0f0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.takpannor-knowledge-card:hover {
  border-color: #00d9ff;
  box-shadow: 0 12px 30px rgba(0,217,255,0.1);
}

.takpannor-knowledge-header-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  cursor: pointer;
  background: white;
  transition: background 0.3s;
}

.takpannor-knowledge-card:hover .takpannor-knowledge-header-card {
  background: rgba(0,217,255,0.05);
}

.knowledge-card-number {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d9ff, #0088cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-width: 50px;
}

.knowledge-card-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111111;
  text-align: left;
  line-height: 1.4;
}

.knowledge-card-arrow {
  width: 24px;
  height: 24px;
  color: #0088cc;
  stroke-width: 3;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.takpannor-knowledge-card.active .knowledge-card-arrow {
  transform: rotate(180deg);
  color: #00d9ff;
}

.knowledge-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: rgba(0,217,255,0.03);
}

.takpannor-knowledge-card.active .knowledge-card-body {
  max-height: 500px;
}

.knowledge-card-body p {
  padding: 0 2rem 2rem 2rem;
  color: #5a5a5a;
  line-height: 1.8;
  font-size: 0.95rem;
}

/* CTA Section */
.takpannor-cta-section {
  position: relative;
  padding: 8rem 0;
  margin: 0 -1.5rem;
  background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,88,204,0.25)), url('tak2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.takpannor-cta-container {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: center;
  padding: 0 1.5rem;
}

.takpannor-cta-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.takpannor-cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
}

.takpannor-cta-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
}

.takpannor-cta-section .btn-primary {
  margin-top: 1rem;
}

/* Animations for Takpannor */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

/* Responsive Design for Takpannor */
@media (max-width: 1024px) {
  .takpannor-intro-section {
    padding: 4rem 1.5rem;
  }

  .takpannor-advantages-section {
    padding: 4rem 1.5rem;
  }

  .takpannor-knowledge-section {
    padding: 4rem 1.5rem;
  }

  .takpannor-intro-header .section-title,
  .takpannor-advantages-header .section-title,
  .knowledge-title {
    font-size: 2rem;
  }

  .takpannor-intro-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .takpannor-advantages-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .takpannor-cta-section {
    padding: 6rem 1.5rem;
    min-height: 400px;
  }

  .takpannor-cta-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .takpannor-key-questions {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .key-question-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .takpannor-intro-section {
    padding: 3rem 1rem;
  }

  .takpannor-advantages-section {
    padding: 3rem 1rem;
  }

  .takpannor-knowledge-section {
    padding: 3rem 1rem;
  }

  .takpannor-intro-header .section-title,
  .takpannor-advantages-header .section-title,
  .knowledge-title {
    font-size: 1.6rem;
  }

  .takpannor-intro-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .takpannor-intro-card {
    padding: 1.5rem;
  }

  .takpannor-advantages-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .advantage-card {
    padding: 1.5rem;
  }

  .advantage-number {
    font-size: 2rem;
  }

  .advantage-title {
    font-size: 1.1rem;
  }

  .takpannor-knowledge-header-card {
    padding: 1.5rem;
    gap: 1rem;
  }

  .knowledge-card-title {
    font-size: 1rem;
  }

  .knowledge-card-number {
    font-size: 1.5rem;
    min-width: 40px;
  }

  .knowledge-card-body p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    font-size: 0.9rem;
  }

  .takpannor-cta-section {
    padding: 4rem 1rem;
    min-height: 350px;
  }

  .takpannor-cta-title {
    font-size: 1.6rem;
  }

  .takpannor-cta-subtitle {
    font-size: 0.95rem;
  }

  /* Mobile Responsive for New Explained Section */
  .takpannor-explained-header .section-title {
    font-size: 2rem;
  }

  .takpannor-explained-header .section-sub {
    font-size: 1rem;
  }

  .takpannor-ingress-box {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .ingress-icon {
    width: 60px;
    height: 60px;
  }

  .ingress-icon svg {
    width: 32px;
    height: 32px;
  }

  .ingress-content h3 {
    font-size: 1.2rem;
  }

  .ingress-content p {
    font-size: 0.9rem;
  }

  .key-question-card {
    padding: 1.5rem;
  }

  .key-question-card h3 {
    font-size: 1.2rem;
  }

  .material-comparison {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .material-option h4 {
    font-size: 1rem;
  }

  .material-features li {
    font-size: 0.85rem;
  }

  .benefit-item {
    gap: 1rem;
    padding: 0.8rem;
  }

  .benefit-icon {
    width: 36px;
    height: 36px;
  }

  .benefit-text {
    font-size: 0.9rem;
  }

  .task-item {
    gap: 1rem;
    padding: 1rem;
  }

  .task-icon {
    font-size: 1.5rem;
    width: 35px;
  }

  .task-content {
    font-size: 0.9rem;
  }

  .takpannor-explained-cta {
    padding: 2rem 1.5rem;
  }

  .takpannor-explained-cta h3 {
    font-size: 1.4rem;
  }

  .takpannor-explained-cta p {
    font-size: 0.95rem;
  }
}

/* ===== INSTALLATION SECTION (PAPPTAK) ===== */
.installation-section {
  padding: 4rem 1.5rem;
  background: #ffffff;
  display: flex;
  justify-content: center;
}

.installation-section > .papptak-container {
  width: 100%;
}

.installation-header {
  text-align: center;
  margin-bottom: 3.5rem;
  width: 100%;
}

.installation-header .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--text);
}

.installation-header .section-sub {
  font-size: 1.1rem;
  color: var(--blue);
  font-weight: 600;
  text-align: center;
  display: block;
  margin: 0 auto;
  max-width: 600px;
}

.installation-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto 3rem;
}

.installation-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.installation-image-left {
  grid-column: 1;
  display: none;
}

.installation-image-right {
  grid-column: 2;
}

.installation-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.installation-label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(25, 168, 255, 0.95);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  backdrop-filter: blur(8px);
}

.installation-middle {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.installation-point {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.installation-dot {
  width: 12px;
  height: 12px;
  background: var(--blue);
  border-radius: 50%;
  margin-top: 0.5rem;
  flex-shrink: 0;
}

.installation-text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--text);
}

.installation-text p {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.5;
}

.installation-cta {
  text-align: center;
  background: rgba(25, 168, 255, 0.05);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid rgba(25, 168, 255, 0.1);
}

.installation-cta p {
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
}

.installation-cta strong {
  color: var(--blue);
}

/* ===== RESPONSIVE: INSTALLATION ===== */
@media (max-width: 1024px) {
  .installation-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
  }

  .installation-image-right {
    display: none;
  }

  .installation-header .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .installation-section {
    padding: 3rem 1.5rem;
  }

  .installation-header .section-title {
    font-size: 1.7rem;
  }

  .installation-header .section-sub {
    font-size: 0.95rem;
  }

  .installation-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .installation-middle {
    grid-template-columns: 1fr;
  }

  .installation-img {
    height: 280px;
  }

  .installation-cta {
    padding: 1.5rem;
  }

  .installation-cta p {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .installation-section {
    padding: 2rem 1rem;
  }

  .installation-header {
    margin-bottom: 2rem;
  }

  .installation-header .section-title {
    font-size: 1.4rem;
  }

  .installation-content {
    gap: 1rem;
  }

  .installation-img {
    height: 220px;
  }

  .installation-label {
    bottom: 1rem;
    left: 1rem;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }

  .installation-text h3 {
    font-size: 1rem;
  }

  .installation-text p {
    font-size: 0.85rem;
  }

  .installation-cta p {
    font-size: 0.85rem;
  }
}

/* ===== CTA FEROTECT SECTION ===== */
.papptak-cta-section-ferotect {
  position: relative;
  padding: 10rem 1.5rem;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

.cta-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}

.papptak-cta-section-ferotect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.papptak-cta-section-ferotect .papptak-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.cta-ferotect-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.cta-ferotect-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: white;
  line-height: 1.1;
}

.cta-ferotect-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0 auto;
}

.btn-cta-ferotect {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--blue);
  color: white;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  transition: all var(--transition-smooth);
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.btn-cta-ferotect:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(25, 168, 255, 0.3);
}

/* ===== RESPONSIVE: CTA FEROTECT ===== */
@media (max-width: 1024px) {
  .cta-ferotect-title {
    font-size: 2.5rem;
  }

  .cta-ferotect-subtitle {
    font-size: 1rem;
  }

  .papptak-cta-section-ferotect {
    padding: 8rem 1.5rem;
    min-height: 550px;
  }
}

@media (max-width: 768px) {
  .cta-ferotect-title {
    font-size: 2rem;
  }

  .cta-ferotect-subtitle {
    font-size: 0.95rem;
  }

  .btn-cta-ferotect {
    width: 100%;
    text-align: center;
  }

  .papptak-cta-section-ferotect {
    padding: 6rem 1.5rem;
    min-height: 500px;
  }
}

@media (max-width: 600px) {
  .cta-ferotect-title {
    font-size: 1.6rem;
  }

  .cta-ferotect-subtitle {
    font-size: 0.9rem;
  }

  .btn-cta-ferotect {
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
  }

  .papptak-cta-section-ferotect {
    padding: 4rem 1rem;
    min-height: 400px;
  }
}

/* ============================================================
   TAKPANNEPLÅT – SÖMLÖS COMPARISON SLIDER SECTION
   ============================================================ */
.tpp-compare-section {
  padding: 7rem 1.5rem 6rem;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.tpp-compare-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25,168,255,0.2), transparent);
}

.tpp-compare-wrapper {
  max-width: 960px;
  margin: 0 auto;
}

/* --- Header --- */
.tpp-compare-header {
  text-align: center;
  margin-bottom: 4rem;
}

.tpp-compare-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #0088cc;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.tpp-compare-kicker::before,
.tpp-compare-kicker::after {
  content: '';
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0088cc);
  border-radius: 2px;
}

.tpp-compare-kicker::after {
  background: linear-gradient(90deg, #0088cc, transparent);
}

.tpp-compare-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #111;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 1.2rem;
}

.tpp-compare-subtitle {
  font-size: 1.05rem;
  color: #5a5a5a;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.8;
}

/* --- Slider Container --- */
.tpp-slider-container {
  margin-bottom: 3rem;
}

.tpp-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  cursor: col-resize;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  user-select: none;
  -webkit-user-select: none;
}

/* Before (full width, visible as background) */
.tpp-slider-before {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tpp-slider-before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* After (clipped from the right) */
.tpp-slider-after {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 0 0 50%);
  transition: clip-path 0.05s linear;
}

.tpp-slider-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Labels --- */
.tpp-slider-label {
  position: absolute;
  top: 1.2rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem 0.4rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 100px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.tpp-label-before {
  left: 1.2rem;
  background: rgba(0,0,0,0.45);
}

.tpp-label-after {
  right: 1.2rem;
  background: rgba(0,136,204,0.7);
}

.tpp-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tpp-dot-before {
  background: rgba(255,255,255,0.8);
}

.tpp-dot-after {
  background: #00d9ff;
  box-shadow: 0 0 6px rgba(0,217,255,0.6);
}

/* --- Drag Handle --- */
.tpp-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4px;
  pointer-events: none;
  transition: left 0.05s linear;
}

.tpp-handle-line {
  flex: 1;
  width: 2px;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.tpp-handle-grip {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #19A8FF, #0088CC);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(25,168,255,0.5), 0 0 0 4px rgba(255,255,255,0.3);
  color: #fff;
  pointer-events: auto;
  cursor: col-resize;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: tppGripPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.tpp-handle-grip:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(25,168,255,0.6), 0 0 0 6px rgba(255,255,255,0.4);
}

.tpp-slider.dragging .tpp-handle-grip {
  animation: none;
  transform: scale(1.15);
  box-shadow: 0 8px 32px rgba(25,168,255,0.7), 0 0 0 6px rgba(255,255,255,0.5);
}

@keyframes tppGripPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(25,168,255,0.5), 0 0 0 4px rgba(255,255,255,0.3); }
  50% { box-shadow: 0 4px 30px rgba(25,168,255,0.7), 0 0 0 8px rgba(25,168,255,0.15); }
}

/* --- Drag Hint --- */
.tpp-drag-hint {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.2rem;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 100px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
  animation: tppHintBounce 2s ease-in-out infinite;
}

.tpp-drag-hint.hidden {
  opacity: 0;
}

@keyframes tppHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* --- Stat Badges --- */
.tpp-slider-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.tpp-stat-badge {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1rem;
  background: rgba(25,168,255,0.04);
  border: 1px solid rgba(25,168,255,0.1);
  border-radius: 16px;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  cursor: default;
}

.tpp-stat-badge:hover {
  background: rgba(25,168,255,0.08);
  border-color: rgba(25,168,255,0.25);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(25,168,255,0.1);
}

.tpp-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #19A8FF, #0088CC);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(25,168,255,0.25);
}

.tpp-stat-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.tpp-stat-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tpp-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.3px;
}

.tpp-stat-label {
  font-size: 0.72rem;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* --- Bottom CTA --- */
.tpp-compare-cta {
  text-align: center;
  padding-top: 1rem;
}

.tpp-compare-cta-text {
  font-size: 1rem;
  color: #5a5a5a;
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.tpp-compare-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.4rem;
  background: linear-gradient(135deg, #19A8FF 0%, #0088CC 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 10px 30px rgba(25,168,255,0.35);
  letter-spacing: -0.2px;
}

.tpp-compare-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(25,168,255,0.45);
}

.tpp-compare-cta-btn svg {
  transition: transform 0.3s ease;
}

.tpp-compare-cta-btn:hover svg {
  transform: translateX(4px);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .tpp-compare-section {
    padding: 5rem 1.2rem 4rem;
  }

  .tpp-compare-header {
    margin-bottom: 2.5rem;
  }

  .tpp-compare-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .tpp-compare-subtitle {
    font-size: 0.95rem;
  }

  .tpp-slider-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .tpp-stat-badge {
    padding: 1rem 0.8rem;
  }

  .tpp-stat-value {
    font-size: 0.95rem;
  }

  .tpp-handle-grip {
    width: 40px;
    height: 40px;
  }

  .tpp-handle-grip svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .tpp-compare-section {
    padding: 4rem 1rem 3rem;
  }

  .tpp-slider {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .tpp-slider-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .tpp-stat-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.9rem;
  }

  .tpp-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .tpp-stat-icon svg {
    width: 18px;
    height: 18px;
  }

  .tpp-compare-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
  }
}

/* ===== TAKPANNEPLÃ…T USP SECTION ===== */

.tpp-usp-section {
  padding: 7rem 1.5rem;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 40%, #f0f7ff 100%);
  position: relative;
  overflow: hidden;
}

.tpp-usp-wrapper {
  max-width: 1260px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---- Header ---- */
.tpp-usp-header {
  text-align: center;
  margin-bottom: 4.5rem;
}

.tpp-usp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(0,136,204,0.1), rgba(0,217,255,0.08));
  color: #0088cc;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  border: 1px solid rgba(0,136,204,0.15);
  margin-bottom: 1.5rem;
  animation: tppBadgeGlow 3s ease-in-out infinite;
}

@keyframes tppBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,136,204,0); }
  50% { box-shadow: 0 0 20px 4px rgba(0,136,204,0.12); }
}

.tpp-usp-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: #111;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 1.2rem;
}

.tpp-usp-accent {
  background: linear-gradient(135deg, #0088cc, #00d9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tpp-usp-subtitle {
  font-size: 1.15rem;
  color: #5a5a5a;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 400;
}

/* ---- Chevron Grid ---- */
.tpp-usp-chevron {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* ---- Image Column ---- */
.tpp-usp-image-col {
  position: relative;
}

.tpp-usp-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: visible;
  height: 520px;
}

.tpp-usp-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,136,204,0.15), 0 8px 24px rgba(0,0,0,0.08);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
}

.tpp-usp-image-wrapper:hover img {
  transform: scale(1.03);
  box-shadow: 0 25px 70px rgba(0,136,204,0.2), 0 10px 30px rgba(0,0,0,0.1);
}

/* Image glow effect */
.tpp-usp-image-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 40px;
  background: radial-gradient(ellipse, rgba(0,136,204,0.2) 0%, transparent 70%);
  filter: blur(15px);
  pointer-events: none;
  z-index: -1;
}

/* Floating badges */
.tpp-usp-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,136,204,0.1);
  font-size: 0.82rem;
  font-weight: 600;
  color: #111;
  z-index: 5;
  white-space: nowrap;
}

.tpp-usp-float-badge svg {
  color: #0088cc;
  flex-shrink: 0;
}

.tpp-float-top {
  top: 20px;
  right: -20px;
  animation: tppFloatUp 4s ease-in-out infinite;
}

.tpp-float-bottom {
  bottom: 40px;
  left: -20px;
  animation: tppFloatDown 5s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes tppFloatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes tppFloatDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ---- USP Points Column ---- */
.tpp-usp-points-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tpp-usp-points {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* USP Card */
.tpp-usp-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.8rem 2rem;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,136,204,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: default;
}

.tpp-usp-card:hover {
  transform: translateY(-4px) translateX(4px);
  box-shadow: 0 16px 48px rgba(0,136,204,0.12), 0 4px 16px rgba(0,0,0,0.06);
  border-color: rgba(0,136,204,0.2);
}

/* Shine sweep effect on hover */
.tpp-usp-card-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.tpp-usp-card:hover .tpp-usp-card-shine {
  left: 120%;
}

/* Card number */
.tpp-usp-card-number {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(0,136,204,0.05);
  line-height: 1;
  pointer-events: none;
  transition: color 0.4s ease;
}

.tpp-usp-card:hover .tpp-usp-card-number {
  color: rgba(0,136,204,0.1);
}

/* Card icon */
.tpp-usp-card-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(0,136,204,0.08), rgba(0,217,255,0.05));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.tpp-usp-card-icon svg {
  width: 36px;
  height: 36px;
  transition: transform 0.4s ease;
}

.tpp-usp-card:hover .tpp-usp-card-icon {
  background: linear-gradient(135deg, rgba(0,136,204,0.15), rgba(0,217,255,0.1));
  transform: scale(1.05);
}

.tpp-usp-card:hover .tpp-usp-card-icon svg {
  transform: rotate(-3deg) scale(1.08);
}

/* Card content */
.tpp-usp-card-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.tpp-usp-card:hover .tpp-usp-card-content h3 {
  color: #0088cc;
}

.tpp-usp-card-content p {
  font-size: 0.92rem;
  color: #5a5a5a;
  line-height: 1.65;
}

/* ---- CTA ---- */
.tpp-usp-cta {
  text-align: center;
  margin-top: 1rem;
}

.tpp-usp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2.2rem;
  background: linear-gradient(135deg, #0088cc, #006daa);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(0,136,204,0.25);
  position: relative;
  overflow: hidden;
}

.tpp-usp-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.tpp-usp-cta-btn:hover::before {
  left: 100%;
}

.tpp-usp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,136,204,0.35);
  background: linear-gradient(135deg, #009ee6, #0077bb);
}

.tpp-usp-cta-btn svg {
  transition: transform 0.3s ease;
}

.tpp-usp-cta-btn:hover svg {
  transform: translateX(4px);
}

.tpp-usp-cta-sub {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: #999;
  font-weight: 500;
}

/* ---- Staggered Entrance Animations ---- */
.tpp-usp-card {
  opacity: 0;
  transform: translateY(30px) translateX(-20px);
  animation: tppUspCardIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.tpp-usp-card[data-usp="1"] { animation-delay: 0.2s; }
.tpp-usp-card[data-usp="2"] { animation-delay: 0.45s; }
.tpp-usp-card[data-usp="3"] { animation-delay: 0.7s; }

@keyframes tppUspCardIn {
  0% {
    opacity: 0;
    transform: translateY(30px) translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

.tpp-usp-image-wrapper {
  opacity: 0;
  transform: translateX(-40px) scale(0.95);
  animation: tppUspImgIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}

@keyframes tppUspImgIn {
  0% {
    opacity: 0;
    transform: translateX(-40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.tpp-usp-header {
  opacity: 0;
  transform: translateY(20px);
  animation: tppUspHeaderIn 0.6s ease-out forwards;
}

@keyframes tppUspHeaderIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tpp-usp-cta {
  opacity: 0;
  animation: tppUspCtaIn 0.5s ease-out 1s forwards;
}

@keyframes tppUspCtaIn {
  to {
    opacity: 1;
  }
}

/* ---- Responsive 1024px ---- */
@media (max-width: 1024px) {
  .tpp-usp-section { padding: 5rem 1.2rem; }
  .tpp-usp-header { margin-bottom: 3.5rem; }
  .tpp-usp-title { font-size: 2.6rem; }
  .tpp-usp-subtitle { font-size: 1.05rem; }
  .tpp-usp-chevron { gap: 3rem; }
  .tpp-usp-image-wrapper { height: 440px; }
  .tpp-usp-card { padding: 1.5rem 1.6rem; }
  .tpp-usp-card-icon { width: 56px; height: 56px; }
  .tpp-usp-card-icon svg { width: 32px; height: 32px; }
}

/* ---- Responsive 768px ---- */
@media (max-width: 768px) {
  .tpp-usp-section { padding: 4rem 1rem; }
  .tpp-usp-header { margin-bottom: 2.5rem; }
  .tpp-usp-title { font-size: 2.1rem; letter-spacing: -0.5px; }
  .tpp-usp-subtitle { font-size: 0.95rem; line-height: 1.7; }
  .tpp-usp-chevron {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .tpp-usp-image-wrapper { height: 320px; }
  .tpp-float-top { top: 12px; right: 10px; }
  .tpp-float-bottom { bottom: 20px; left: 10px; }
  .tpp-usp-card { padding: 1.3rem 1.4rem; gap: 1rem; }
  .tpp-usp-card-number { font-size: 2.5rem; }
  .tpp-usp-card-icon { width: 52px; height: 52px; border-radius: 12px; }
  .tpp-usp-card-icon svg { width: 28px; height: 28px; }
  .tpp-usp-card-content h3 { font-size: 1.05rem; }
  .tpp-usp-card-content p { font-size: 0.88rem; }
}

/* ---- Responsive 480px ---- */
@media (max-width: 480px) {
  .tpp-usp-section { padding: 3rem 0.8rem; }
  .tpp-usp-badge { font-size: 0.75rem; padding: 0.5rem 1rem; }
  .tpp-usp-title { font-size: 1.7rem; letter-spacing: -0.3px; }
  .tpp-usp-title br { display: none; }
  .tpp-usp-subtitle { font-size: 0.88rem; }
  .tpp-usp-image-wrapper { height: 260px; border-radius: 14px; }
  .tpp-usp-image-wrapper img { border-radius: 14px; }
  .tpp-usp-float-badge { font-size: 0.75rem; padding: 0.5rem 0.8rem; border-radius: 10px; }
  .tpp-float-top { top: 8px; right: 6px; }
  .tpp-float-bottom { bottom: 12px; left: 6px; }
  .tpp-usp-card { padding: 1.1rem 1.2rem; gap: 0.9rem; border-radius: 12px; }
  .tpp-usp-card-number { font-size: 2rem; top: 8px; right: 10px; }
  .tpp-usp-card-icon { width: 46px; height: 46px; border-radius: 10px; }
  .tpp-usp-card-icon svg { width: 24px; height: 24px; }
  .tpp-usp-card-content h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
  .tpp-usp-card-content p { font-size: 0.82rem; line-height: 1.5; }
  .tpp-usp-cta-btn { width: 100%; justify-content: center; padding: 0.9rem 1.5rem; font-size: 0.95rem; }
}

/* ============================================================
   TPP FACTS COMPARISON SECTION (Neutral, light bg)
   ============================================================ */
.tpp-compare-table-section {
  position: relative;
  padding: 6rem 1.5rem;
  background: #fff;
  overflow: hidden;
}

.tpp-compare-table-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(25,168,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(167,139,250,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.tpp-ct-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.tpp-ct-header {
  text-align: center;
  margin-bottom: 3rem;
}

.tpp-ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.2rem;
  background: rgba(25,168,255,0.06);
  border: 1px solid rgba(25,168,255,0.12);
  border-radius: 50px;
  color: #0088cc;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.2rem;
}

.tpp-ct-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #111;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 1rem;
}

.tpp-ct-subtitle {
  font-size: 1.05rem;
  color: rgba(0,0,0,0.5);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Material Selector */
.tpp-ct-material-selector {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.tpp-ct-mat-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.02);
  color: rgba(0,0,0,0.5);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpp-ct-mat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tpp-ct-mat-btn:hover {
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.04);
}

.tpp-ct-mat-btn.active {
  border-color: rgba(25,168,255,0.35);
  background: rgba(25,168,255,0.06);
  color: #111;
}

.tpp-ct-mat-btn.active .tpp-ct-mat-dot {
  opacity: 1;
  transform: scale(1.3);
}

/* Fact Cards Grid */
.tpp-ct-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.tpp-ct-fact-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 1.8rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.tpp-ct-fact-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(25,168,255,0.4), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tpp-ct-fact-card:hover {
  border-color: rgba(25,168,255,0.15);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.tpp-ct-fact-card:hover::after {
  opacity: 1;
}

.tpp-ct-fact-card[data-anim="card"] {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.tpp-ct-fact-card[data-anim="card"].tpp-ct-visible {
  opacity: 1;
  transform: translateY(0);
}

.tpp-ct-fact-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(25,168,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.tpp-ct-fact-icon svg {
  stroke: #0088cc;
}

.tpp-ct-fact-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

/* Fact Values (switchable per material) */
.tpp-ct-fact-values {
  position: relative;
  min-height: 100px;
}

.tpp-ct-fact-item {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tpp-ct-fact-item.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.tpp-ct-fact-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: #0088cc;
  letter-spacing: -1px;
  line-height: 1;
}

.tpp-ct-fact-suffix {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(0,0,0,0.4);
  margin-left: 0.2rem;
}

.tpp-ct-fact-label {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0088cc;
  margin-bottom: 0.4rem;
}

.tpp-ct-fact-item p {
  font-size: 0.88rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* Material-specific colors when switching */
.tpp-ct-fact-item[data-mat="betongpannor"] .tpp-ct-fact-num,
.tpp-ct-fact-item[data-mat="betongpannor"] .tpp-ct-fact-label {
  color: #7c3aed;
}

.tpp-ct-fact-item[data-mat="papptak"] .tpp-ct-fact-num,
.tpp-ct-fact-item[data-mat="papptak"] .tpp-ct-fact-label {
  color: #d97706;
}

/* Summary bar */
.tpp-ct-summary {
  background: rgba(25,168,255,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.tpp-ct-summary[data-anim="card"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tpp-ct-summary[data-anim="card"].tpp-ct-visible {
  opacity: 1;
  transform: translateY(0);
}

.tpp-ct-summary-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(25,168,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tpp-ct-summary p {
  font-size: 0.92rem;
  color: rgba(0,0,0,0.55);
  line-height: 1.65;
}

.tpp-ct-summary p strong {
  color: #0088cc;
  font-weight: 700;
}

/* Responsive - Facts */
@media (max-width: 768px) {
  .tpp-compare-table-section { padding: 4rem 1rem; }
  .tpp-ct-title { font-size: clamp(1.7rem, 5vw, 2.4rem); }
  .tpp-ct-facts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .tpp-ct-facts-grid { grid-template-columns: 1fr; }
  .tpp-ct-fact-card { padding: 1.4rem; }
  .tpp-ct-material-selector { gap: 0.4rem; }
  .tpp-ct-mat-btn { padding: 0.6rem 1rem; font-size: 0.82rem; }
  .tpp-ct-summary { flex-direction: column; gap: 0.8rem; padding: 1.2rem 1.4rem; }
}

/* ============================================================
   TPP INTERACTIVE ROOF EXPLORER
   ============================================================ */
.tpp-explorer-section {
  position: relative;
  padding: 6rem 1.5rem;
  background: linear-gradient(180deg, #f0f7ff 0%, #e8f2fb 50%, #f0f7ff 100%);
  overflow: hidden;
}

.tpp-explorer-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.tpp-explorer-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.tpp-explorer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.2rem;
  background: rgba(25,168,255,0.06);
  border: 1px solid rgba(25,168,255,0.12);
  border-radius: 50px;
  color: #0088cc;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.2rem;
}

.tpp-explorer-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #111;
  letter-spacing: -1px;
  margin-bottom: 1rem;
}

.tpp-explorer-subtitle {
  font-size: 1.05rem;
  color: rgba(0,0,0,0.45);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* CTA hint — click prompt */
.tpp-explorer-cta-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #19A8FF;
  margin-top: 1rem;
  padding: 0.45rem 1rem;
  border-radius: 50px;
  background: rgba(25,168,255,0.06);
  border: 1px solid rgba(25,168,255,0.15);
  animation: tppHintPulse 2.5s ease-in-out infinite;
}

.tpp-explorer-cta-hint svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@keyframes tppHintPulse {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

/* Main Visual Area */
.tpp-explorer-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Roof Layers Stack */
.tpp-explorer-roof {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  perspective: 800px;
  max-width: 480px;
}

.tpp-roof-layer {
  position: relative;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
  border-radius: 8px;
  padding: 4px 0;
}

.tpp-roof-layer:hover {
  transform: translateX(8px) scale(1.02);
}

.tpp-roof-layer.active {
  transform: translateX(14px) scale(1.04);
}

.tpp-roof-layer.active .tpp-layer-label {
  opacity: 1;
  color: #0077b6;
}

.tpp-roof-layer.active .tpp-layer-pulse {
  opacity: 1;
}

.tpp-layer-shape {
  position: relative;
  z-index: 1;
}

.tpp-layer-shape svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
  transition: filter 0.4s ease;
}

.tpp-roof-layer.active .tpp-layer-shape svg {
  filter: drop-shadow(0 4px 16px rgba(25,168,255,0.2));
}

.tpp-layer-label {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%) translateX(100%);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(0,0,0,0.3);
  white-space: nowrap;
  transition: all 0.4s ease;
  padding-left: 12px;
  z-index: 10;
}

.tpp-layer-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(25,168,255,0.3);
  transition: width 0.3s ease, background 0.3s ease;
}

.tpp-roof-layer.active .tpp-layer-label::before {
  width: 12px;
  background: #0088cc;
}

.tpp-layer-pulse {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #19A8FF;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.tpp-layer-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(25,168,255,0.4);
  animation: tppPulseRing 2s ease-out infinite;
}

@keyframes tppPulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Info Panel */
.tpp-explorer-info {
  position: relative;
  min-height: 280px;
}

.tpp-explorer-info-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 1.8rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.tpp-explorer-info-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

.tpp-info-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(25,168,255,0.08);
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  line-height: 1;
  letter-spacing: -2px;
}

.tpp-explorer-info-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 0.6rem;
  letter-spacing: -0.5px;
}

.tpp-explorer-info-card p {
  font-size: 0.9rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.tpp-info-specs {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.tpp-info-spec {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tpp-spec-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0,0,0,0.35);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tpp-spec-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0088cc;
}

/* Navigation Dots */
.tpp-explorer-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
}

.tpp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: transparent;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  padding: 0;
}

.tpp-dot:hover {
  border-color: rgba(25,168,255,0.5);
  background: rgba(25,168,255,0.12);
}

.tpp-dot.active {
  background: #19A8FF;
  border-color: #19A8FF;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(25,168,255,0.3);
}

/* Floating Particles */
.tpp-explorer-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.tpp-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(25,168,255,0.2);
  animation: tppFloat linear infinite;
}

@keyframes tppFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* Explorer Responsive */
@media (max-width: 768px) {
  .tpp-explorer-section { padding: 4rem 1rem; }
  .tpp-explorer-visual {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .tpp-layer-label {
    font-size: 0.72rem;
  }
  .tpp-explorer-info-card {
    padding: 1.4rem;
  }
  .tpp-info-number {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .tpp-explorer-info-card { padding: 1.2rem; border-radius: 12px; }
  .tpp-explorer-info-card h3 { font-size: 1.05rem; }
  .tpp-explorer-info-card p { font-size: 0.85rem; }
  .tpp-info-specs { flex-direction: column; gap: 0.8rem; }
  .tpp-layer-label { display: none; }
  .tpp-explorer-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES v2 - SAFE (does NOT touch heroes,
   fullbleed widths, or background-attachment on desktop/tablet)
   ============================================================ */

/* Prevent horizontal scrollbar from 100vw elements */
html { overflow-x: hidden; }

/* ===== iOS Safari: background-attachment fix (MOBILE ONLY) ===== */
/* On iOS, background-attachment: fixed renders background relative to   */
/* the VIEWPORT not the element, causing extreme zoom / broken images.   */
/* Fix: override ALL elements that use fixed attachment to scroll.       */
@media (max-width: 600px) {

  /* --- Body backgrounds for terms/privacy pages --- */
  body.terms-body,
  body.privacy-body,
  body.platslageri-page {
    background-attachment: scroll !important;
  }

  /* --- Header (sticky nav bar) - ALL pages --- */
  header,
  body.takbyte-page header,
  body.takpannor-page header,
  body.fasad-page header,
  body.platslageri-page header,
  body.plattaket-page header,
  body.terms-body header,
  body.privacy-body header,
  body:has(.solar-hero) header,
  body:has(.plat-hero) header,
  .papptak-page header,
  .bandtackning-page header,
  .takpanneplat-page header,
  .korrugerad-page header,
  .skorsten-page header,
  .allblack-page header,
  .batterilagring-page header,
  .fasad-panel-page header {
    background-attachment: scroll !important;
  }

  /* --- Hero sections - ALL page variants --- */
  .hero,
  .hero-takbyte,
  .hero-fasad,
  .hero-platslageri,
  .hero-plattaket,
  .hero-papptak,
  .hero-bandtackning,
  .hero-takpanneplat,
  .solar-hero,
  .terms-hero,
  .privacy-hero,
  .hero-korrugerad,
  .hero-takpannor,
  .hero-takkupor,
  .hero-skorsten,
  .allblack-hero,
  .hero-batterilagring,
  .hero-fasad-panel {
    background-attachment: scroll !important;
  }

  /* --- CTA / other fixed-bg sections --- */
  #contact-cta,
  .cta-section,
  .cta-fasad,
  .renovation-section,
  .band-cta,
  .band-cta-bg,
  .takpannor-cta-section,
  .papptak-cta-section-ferotect,
  .cta-background,
  .plat-hero,
  .solar-hero-background {
    background-attachment: scroll !important;
  }

  /* --- Topbar (hidden on mobile but override just in case) --- */
  .topbar,
  body.takbyte-page .topbar,
  body.takpannor-page .topbar,
  body.fasad-page .topbar,
  body.platslageri-page .topbar,
  body.plattaket-page .topbar,
  body.terms-body .topbar,
  body.privacy-body .topbar,
  body:has(.solar-hero) .topbar,
  body:has(.plat-hero) .topbar,
  .papptak-page .topbar,
  .bandtackning-page .topbar,
  .takpanneplat-page .topbar,
  .korrugerad-page .topbar,
  .takkupor-page .topbar,
  .skorsten-page .topbar,
  .allblack-page .topbar,
  .batterilagring-page .topbar,
  .fasad-panel-page .topbar {
    background-attachment: scroll !important;
  }

  /* --- Plattaket explicit overrides --- */
  body.plattaket-page .topbar,
  body.plattaket-page header,
  body.plattaket-page .hero-plattaket {
    background-attachment: scroll !important;
  }

  /* Hero heights: allow content overflow */
  .hero-papptak,
  .hero-bandtackning,
  .hero-takpanneplat,
  .hero-plattaket,
  .hero-takpannor,
  .hero-takkupor,
  .hero-skorsten,
  .hero-fasad,
  .hero-platslageri,
  .allblack-hero,
  .hero-batterilagring,
  .hero-fasad-panel,
  .hero-takbyte,
  .solar-hero {
    height: auto;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }

  /* On mobile, topbar + header go transparent — hero carries the full bg */
  .papptak-page .topbar,
  .bandtackning-page .topbar,
  .takpanneplat-page .topbar,
  .korrugerad-page .topbar,
  .plattaket-page .topbar,
  .takpannor-page .topbar,
  .takkupor-page .topbar,
  .skorsten-page .topbar,
  .fasad-page .topbar,
  .platslageri-page .topbar,
  .solceller-page .topbar,
  .takbyte-page .topbar,
  .allblack-page .topbar,
  .batterilagring-page .topbar,
  .fasad-panel-page .topbar {
    background-image: none !important;
    background: transparent !important;
  }
  .papptak-page header,
  .bandtackning-page header,
  .takpanneplat-page header,
  .korrugerad-page header,
  .plattaket-page header,
  .takpannor-page header,
  .takkupor-page header,
  .skorsten-page header,
  .fasad-page header,
  .platslageri-page header,
  .solceller-page header,
  .takbyte-page header,
  .allblack-page header,
  .batterilagring-page header,
  .fasad-panel-page header {
    background-image: none !important;
    background: transparent !important;
  }

  /* Header taller on mobile for better tap targets */
  .papptak-page header .nav,
  .bandtackning-page header .nav,
  .takpanneplat-page header .nav,
  .korrugerad-page header .nav,
  .plattaket-page header .nav,
  .takpannor-page header .nav,
  .takkupor-page header .nav,
  .skorsten-page header .nav,
  .fasad-page header .nav,
  .platslageri-page header .nav,
  .solceller-page header .nav,
  .takbyte-page header .nav,
  .allblack-page header .nav,
  .batterilagring-page header .nav,
  .fasad-panel-page header .nav {
    padding: 1.1rem 1.5rem;
  }

  /* Hero fills exactly one screen, bg covers full section */
  .hero-papptak,
  .hero-bandtackning,
  .hero-takpanneplat,
  .hero-korrugerad,
  .hero-plattaket,
  .hero-takpannor,
  .hero-takkupor,
  .hero-skorsten,
  .hero-fasad,
  .hero-platslageri,
  .allblack-hero,
  .hero-batterilagring,
  .hero-fasad-panel,
  .hero-takbyte,
  .solar-hero {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    background-attachment: scroll !important;
    background-size: cover;
    background-position: center;
    margin-top: -120px;
    padding-top: 120px;
  }

  /* Frosted box: don't let it sit too low */
  .hero-papptak > div,
  .hero-bandtackning > div,
  .hero-takpanneplat > div,
  .hero-korrugerad > div,
  .hero-plattaket > div,
  .hero-takpannor > div,
  .hero-takkupor > div,
  .hero-skorsten > div,
  .hero-fasad > div,
  .hero-platslageri > div,
  .allblack-hero > div,
  .hero-batterilagring > div,
  .hero-fasad-panel > div,
  .hero-takbyte > div {
    min-height: auto;
    padding-top: 0;
    padding-bottom: 2rem;
  }

  /* Solar hero specific: reset margins/width from desktop and fix padding */
  .solar-hero {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 60px;
    display: flex;
    align-items: center;
  }
  .solar-hero .solar-hero-content {
    padding-top: 0;
    max-width: 100%;
  }

  /* ===== INDEX.HTML (homepage) hero — same seamless-bg treatment ===== */
  .index-page .topbar,
  .index-page header {
    background-image: none !important;
    background: transparent !important;
  }
  .index-page header .nav {
    padding: 1.1rem 1.5rem;
  }
  .index-page .hero {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    background-attachment: scroll !important;
    background-size: cover;
    background-position: center;
    margin-top: -120px;
    padding-top: 120px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .index-page .hero > div {
    margin-top: 0;
    text-align: center;
    max-width: 100%;
  }
  .index-page .hero .scroll-indicator {
    display: none;
  }
}

/* ===== GRIDS THAT NEED TO COLLAPSE ON MOBILE ===== */
@media (max-width: 600px) {
  /* Bandtackning benefits: 3-col → 1-col */
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .benefits-divider-line { display: none; }
  .benefits-image-section {
    height: 260px;
    order: -1;
  }

  /* Bandtackning included: 3-col → 2-col */
  .included-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem;
  }
  .included-card { padding: 1.4rem 1rem; }
  .included-card h3 { font-size: 0.95rem; }
  .included-card p { font-size: 0.82rem; }

  /* Papptak chevrons: 2-col → 1-col */
  .why-chevron,
  .why-chevron-1,
  .why-chevron-2 {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .why-chevron-image { height: 240px; }

  /* Papptak transformation: side-by-side → stacked */
  .transformation-showcase {
    flex-direction: column !important;
    gap: 1.5rem;
  }
  .transformation-arrow { transform: rotate(90deg); }
  .transformation-img { height: 220px; }

  /* Papptak materials */
  .material-item { grid-template-columns: 1fr !important; }
  .material-image { height: 200px; }
  .materials-buttons { flex-wrap: wrap; gap: 0.6rem; }
  .material-btn { flex: 1; min-width: 0; font-size: 0.85rem; padding: 0.7rem 0.8rem; }

  /* Platslageri grids */
  .plat-insights-grid { gap: 0.8rem; }
  .plat-insight-head { padding: 1.2rem 1.4rem; gap: 1rem; }
  .plat-insight-text { padding: 0 1.4rem 1.2rem 4.2rem; }
  .plat-services-grid { grid-template-columns: 1fr !important; }
  .detail-item { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .detail-image { height: 200px; order: -1; }
  .process-steps { grid-template-columns: 1fr !important; }

  /* Takpannor grids */
  .pannmodeller-layout { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .pannmodeller-selector {
    display: flex; flex-direction: row;
    overflow-x: auto; gap: 0.6rem;
    padding-bottom: 0.5rem;
  }
  .pannmodell-btn { flex-shrink: 0; }
  .pannmodeller-preview { height: auto; overflow: visible; }
  .premium-cards-grid { grid-template-columns: 1fr !important; }
  .takpannor-key-questions { grid-template-columns: 1fr !important; }

  /* Solceller grids */
  .solar-expertise-wrapper { grid-template-columns: 1fr !important; }
  .solar-products-grid { grid-template-columns: 1fr !important; }
  .solar-planning-wrapper { grid-template-columns: 1fr !important; }
  .why-ferotect-grid { grid-template-columns: 1fr !important; }

  /* Plattaket knowledge grid */
  .plat-knowledge-grid { grid-template-columns: 1fr !important; }

  /* Fasad warning signs */
  .warning-signs-grid { grid-template-columns: 1fr; }
}

/* ===== SMALL MOBILE (< 480px) - EXTRA COLLAPSE ===== */
@media (max-width: 480px) {
  .included-grid { grid-template-columns: 1fr !important; }
  .expectations-grid { grid-template-columns: 1fr !important; }

  .compare-row {
    grid-template-columns: 1fr !important;
    gap: 0.4rem;
    text-align: center;
  }
  .compare-header {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
}

/* ===== SOLCELLER HERO - MOBILE MARGIN FIX ===== */
@media (max-width: 600px) {
  .solar-hero {
    margin-top: -120px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100vw !important;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    padding: 120px 1.2rem 50px !important;
    background-attachment: scroll !important;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .solar-hero-box {
    padding: 2rem !important;
    max-width: 100% !important;
  }
  .solar-hero-title {
    font-size: clamp(1.3rem, 4.5vw, 1.8rem) !important;
  }
}

/* ============================================================
   ANVÄNDARVILLKOR PAGE STYLES — PREMIUM REDESIGN
   ============================================================ */

/* ===== SCROLL ANIMATIONS ===== */
.terms-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.terms-animate[data-animate="fade-left"] {
  transform: translateX(50px);
}
.terms-animate[data-animate="fade-right"] {
  transform: translateX(-50px);
}
.terms-animate[data-animate="fade-in"] {
  transform: translateY(0) scale(0.97);
}
.terms-animate.terms-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ===== HERO ===== */
.terms-hero {
  position: relative;
  background: transparent;
  width: 100vw;
  margin: 0 calc(-50vw + 50%) 0;
  padding: 0 1.5rem;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hero Decorative SVGs */
.terms-hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.terms-decor-circle-1 {
  position: absolute;
  width: 220px;
  height: 220px;
  top: 10%;
  left: -60px;
  animation: termsFloat 14s ease-in-out infinite;
}

.terms-decor-circle-2 {
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: -80px;
  right: -100px;
  animation: termsFloat 18s ease-in-out infinite reverse;
}

.terms-decor-line-1 {
  position: absolute;
  width: 2px;
  height: 120px;
  top: 15%;
  right: 12%;
  animation: termsFadePulse 4s ease-in-out infinite;
}

.terms-decor-dots {
  position: absolute;
  width: 80px;
  height: 80px;
  bottom: 20%;
  left: 8%;
  animation: termsFloat 10s ease-in-out infinite;
}

@keyframes termsFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes termsFadePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.terms-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  margin-top: -8rem;
  text-align: center;
  padding: 2rem 2rem;
  color: #fff;
}

.terms-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.3rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(25,168,255,0.15);
  border: 1px solid rgba(25,168,255,0.3);
  color: #19A8FF;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
}

.terms-hero-badge svg {
  flex-shrink: 0;
}

.terms-hero-content h1 {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.terms-hero-content > p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 560px;
  margin: 0 auto 2rem;
}

.terms-hero-meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.terms-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

.terms-meta-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Hero Scroll Hint */
.terms-hero-scroll-hint {
  margin-top: 2.5rem;
  animation: termsBounce 2s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes termsBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 0.9; }
}

/* ===== WAVE DIVIDER ===== */
.terms-wave-divider {
  position: relative;
  margin-top: -40px;
  z-index: 2;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.terms-wave-divider svg {
  display: block;
  width: 100%;
  height: 50px;
}

/* ===== TABLE OF CONTENTS ===== */
.terms-toc {
  padding: 0 2rem;
  margin-top: 4rem;
  position: relative;
  z-index: 3;
  background: #fff;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.terms-container {
  max-width: 960px;
  margin: 0 auto;
}

.terms-toc-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem 3rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
}

.terms-toc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.terms-toc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(25,168,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-toc-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.5px;
  margin: 0;
}

.terms-toc-subtitle {
  font-size: 0.82rem;
  color: rgba(0,0,0,0.4);
  margin: 0.15rem 0 0;
  font-weight: 400;
}

.terms-toc-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
}

.terms-toc-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.25s ease;
}

.terms-toc-link:hover {
  background: rgba(25,168,255,0.06);
  color: #0088cc;
  transform: translateX(4px);
}

.terms-toc-link:hover .terms-toc-arrow {
  transform: translateX(3px);
  color: #19A8FF;
}

.terms-toc-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: #19A8FF;
  background: rgba(25,168,255,0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  min-width: 28px;
  text-align: center;
}

.terms-toc-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: rgba(0,0,0,0.2);
  transition: all 0.25s ease;
}

/* ===== SECTIONS ===== */
.terms-section {
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
  background: #fff;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.terms-section-alt {
  background: #f7f9fb;
}

/* Section Decorative SVGs */
.terms-section-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.terms-section-decor-shape {
  position: absolute;
  width: 140px;
  height: 140px;
  top: 20%;
  left: -30px;
}

.terms-section-decor-right {
  left: auto;
  right: -30px;
  top: 10%;
}

.terms-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.terms-section-grid:has(.terms-section-image) {
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
}

.terms-section-grid-reverse:has(.terms-section-image) {
  grid-template-columns: 0.8fr 1.2fr;
  direction: rtl;
}

.terms-section-grid-reverse > * {
  direction: ltr;
}

/* Section Label (number + line) */
.terms-section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.terms-section-number {
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(25,168,255,0.12);
  line-height: 1;
  letter-spacing: -2px;
}

.terms-section-line {
  display: block;
  height: 2px;
  width: 50px;
  background: linear-gradient(90deg, rgba(25,168,255,0.3), rgba(25,168,255,0));
  border-radius: 2px;
}

.terms-section-content {
  position: relative;
}

.terms-section-content h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.8px;
  margin-bottom: 1.2rem;
}

.terms-section-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.terms-section-content p {
  font-size: 0.95rem;
  color: rgba(0,0,0,0.55);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.terms-section-content a {
  color: #19A8FF;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.terms-section-content a:hover {
  color: #0077b6;
}

/* Section Image with Badge */
.terms-section-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 30px rgba(0,0,0,0.08);
  position: relative;
}

.terms-section-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.terms-section-image:hover img {
  transform: scale(1.04);
}

.terms-image-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.15);
}

.terms-image-badge svg {
  flex-shrink: 0;
}

/* ===== LIST ===== */
.terms-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.terms-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.93rem;
  color: rgba(0,0,0,0.55);
  line-height: 1.6;
}

.terms-list li svg {
  flex-shrink: 0;
  margin-top: 3px;
}

.terms-list-compact {
  gap: 0.45rem;
  margin: 0.6rem 0 1rem;
}

.terms-list-compact li {
  font-size: 0.88rem;
}

/* ===== INFO BOXES ===== */
.terms-info-box {
  display: flex;
  gap: 0.8rem;
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  background: rgba(25,168,255,0.04);
  border: 1px solid rgba(25,168,255,0.12);
  margin: 1.5rem 0;
}

.terms-info-box-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.terms-info-box p {
  font-size: 0.88rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.65;
  margin: 0;
}

.terms-info-box-warning {
  background: rgba(230,168,23,0.04);
  border-color: rgba(230,168,23,0.15);
}

/* ===== MINI CARDS GRID ===== */
.terms-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.terms-mini-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 1.5rem;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.terms-section-alt .terms-mini-card {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.terms-mini-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(25,168,255,0.08);
  border-color: rgba(25,168,255,0.12);
}

.terms-mini-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(25,168,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
  transition: all 0.35s ease;
}

.terms-mini-card:hover .terms-mini-icon {
  background: rgba(25,168,255,0.1);
  transform: scale(1.06);
}

.terms-mini-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.4rem;
}

.terms-mini-card p {
  font-size: 0.85rem;
  color: rgba(0,0,0,0.45);
  line-height: 1.6;
  margin: 0;
}

/* ===== TIMELINE ===== */
.terms-timeline {
  position: relative;
  padding-left: 2rem;
  margin: 1.5rem 0;
}

.terms-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #19A8FF 0%, rgba(25,168,255,0.1) 100%);
  border-radius: 2px;
}

.terms-timeline-item {
  position: relative;
  padding-bottom: 1.8rem;
}

.terms-timeline-item:last-child {
  padding-bottom: 0;
}

.terms-timeline-dot {
  position: absolute;
  left: -2rem;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #19A8FF;
  z-index: 1;
}

.terms-timeline-dot-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(25,168,255,0.15);
  animation: termsDotPulse 2.5s ease-out infinite;
}

@keyframes termsDotPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

.terms-timeline-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.3rem;
}

.terms-timeline-content p {
  font-size: 0.88rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.65;
  margin: 0;
}

/* ===== TWO COLUMN LAYOUT ===== */
.terms-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.5rem 0;
}

.terms-two-col h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.6rem;
}

/* ===== STEPS ===== */
.terms-steps {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.terms-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.terms-step-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #19A8FF, #0077b6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(25,168,255,0.2);
  transition: all 0.3s ease;
}

.terms-step:hover .terms-step-num {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(25,168,255,0.3);
}

.terms-step h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.25rem;
}

.terms-step p {
  font-size: 0.88rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.65;
  margin: 0;
}

/* ===== IMAGE BREAK ===== */
.terms-image-break {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.terms-image-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.terms-image-break-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,20,50,0.72) 0%, rgba(0,50,100,0.5) 100%);
}

.terms-image-break-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 2rem;
}

.terms-quote-svg {
  margin-bottom: 1rem;
  opacity: 0.7;
}

.terms-image-break-content p {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  max-width: 600px;
  line-height: 1.5;
  font-style: italic;
  letter-spacing: -0.3px;
}

/* ===== CONTACT SECTION ===== */
.terms-contact-section {
  padding: 5rem 2rem;
  background: linear-gradient(180deg, #f7f9fb 0%, #fff 100%);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.terms-contact-card {
  background: #fff;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  max-width: 960px;
  margin: 0 auto;
}

.terms-contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.terms-contact-text h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.8px;
  margin-bottom: 0.8rem;
}

.terms-contact-text p {
  font-size: 0.95rem;
  color: rgba(0,0,0,0.5);
  line-height: 1.7;
}

.terms-contact-methods {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.terms-contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: #f7f9fb;
  border: 1px solid rgba(0,0,0,0.04);
  text-decoration: none;
  transition: all 0.3s ease;
}

.terms-contact-item:hover {
  background: rgba(25,168,255,0.04);
  border-color: rgba(25,168,255,0.12);
  transform: translateX(6px);
}

.terms-contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(25,168,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #19A8FF;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.terms-contact-item:hover .terms-contact-icon {
  background: rgba(25,168,255,0.14);
  transform: scale(1.06);
}

.terms-contact-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0,0,0,0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.terms-contact-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
}

/* ===== BACK TO TOP ===== */
.terms-back-top {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.terms-back-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0,0,0,0.4);
  text-decoration: none;
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.terms-back-top-btn:hover {
  color: #19A8FF;
  border-color: rgba(25,168,255,0.3);
  background: rgba(25,168,255,0.04);
  transform: translateY(-2px);
}

/* ============================================================
   INTEGRITETSPOLICY PAGE STYLES — PREMIUM
   ============================================================ */

/* Privacy Hero — seamless with topbar + header using plat11.jpg */
.privacy-hero {
  position: relative;
  background: transparent;
  width: 100vw;
  margin: 0 calc(-50vw + 50%) 0;
  padding: 0 1.5rem;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.privacy-hero .terms-hero-content {
  margin-top: -8rem;
}

/* Privacy-specific highlight card */
.privacy-highlight-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.privacy-highlight-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 1.4rem 1.3rem;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.privacy-highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(25,168,255,0.08);
  border-color: rgba(25,168,255,0.15);
}

.privacy-highlight-card .phi-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(25,168,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.7rem;
  color: #19A8FF;
  transition: all 0.35s ease;
}

.privacy-highlight-card:hover .phi-icon {
  background: rgba(25,168,255,0.12);
  transform: scale(1.08);
}

.privacy-highlight-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.3rem;
}

.privacy-highlight-card p {
  font-size: 0.82rem;
  color: rgba(0,0,0,0.45);
  line-height: 1.55;
  margin: 0;
}

/* Cookie table */
.privacy-cookie-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 0.88rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}

.privacy-cookie-table thead th {
  background: rgba(25,168,255,0.05);
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 700;
  color: #111;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.privacy-cookie-table tbody td {
  padding: 0.75rem 1rem;
  color: rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: top;
  line-height: 1.5;
}

.privacy-cookie-table tbody tr:last-child td {
  border-bottom: none;
}

.privacy-cookie-table tbody tr:hover {
  background: rgba(25,168,255,0.02);
}

.privacy-cookie-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: #111;
}

.privacy-cookie-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.privacy-cookie-badge-required {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
}

.privacy-cookie-badge-optional {
  background: rgba(25,168,255,0.1);
  color: #19A8FF;
}

/* Your rights accordion */
.privacy-rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.privacy-right-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 1.4rem;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.terms-section-alt .privacy-right-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.privacy-right-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(25,168,255,0.07);
  border-color: rgba(25,168,255,0.12);
}

.privacy-right-card .pri-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
  transition: all 0.35s ease;
}

.privacy-right-card:hover .pri-icon {
  transform: scale(1.06);
}

.pri-icon-blue { background: rgba(25,168,255,0.08); color: #19A8FF; }
.pri-icon-green { background: rgba(34,197,94,0.08); color: #16a34a; }
.pri-icon-purple { background: rgba(168,85,247,0.08); color: #a855f7; }
.pri-icon-amber { background: rgba(245,158,11,0.08); color: #d97706; }

.privacy-right-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.35rem;
}

.privacy-right-card p {
  font-size: 0.83rem;
  color: rgba(0,0,0,0.45);
  line-height: 1.6;
  margin: 0;
}

/* Data flow visual */
.privacy-data-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(25,168,255,0.03);
  border-radius: 16px;
  border: 1px solid rgba(25,168,255,0.08);
}

.pdf-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #111;
}

.pdf-step svg { color: #19A8FF; flex-shrink: 0; }

.pdf-arrow {
  color: rgba(25,168,255,0.3);
  flex-shrink: 0;
}

/* ===== PRIVACY RESPONSIVE ===== */
@media (max-width: 768px) {
  .privacy-hero {
    height: 100vh;
    background-attachment: scroll;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
  .privacy-hero .terms-hero-content {
    margin-top: -6rem;
  }
  .privacy-highlight-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .privacy-cookie-table {
    font-size: 0.78rem;
  }
  .privacy-cookie-table thead th,
  .privacy-cookie-table tbody td {
    padding: 0.6rem 0.7rem;
  }
  .privacy-rights-grid {
    grid-template-columns: 1fr;
  }
  .privacy-data-flow {
    flex-direction: column;
  }
  .pdf-arrow { transform: rotate(90deg); }
}

@media (max-width: 480px) {
  .privacy-highlight-strip {
    grid-template-columns: 1fr;
  }
  .privacy-hero .terms-hero-content {
    padding: 80px 1rem 60px;
  }
}

/* ===== TERMS RESPONSIVE ===== */
@media (max-width: 768px) {
  .terms-hero {
    height: 100vh;
    background-attachment: scroll;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
  .terms-hero-content {
    padding: 1.5rem 1.5rem;
    margin-top: -6rem;
  }
  .terms-hero-content h1 {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }
  .terms-hero-decor { display: none; }
  .terms-toc-card {
    padding: 1.8rem 1.5rem;
  }
  .terms-toc-nav {
    grid-template-columns: 1fr;
  }
  .terms-section {
    padding: 3.5rem 1.5rem;
  }
  .terms-section-decor { display: none; }
  .terms-section-grid:has(.terms-section-image),
  .terms-section-grid-reverse:has(.terms-section-image) {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .terms-section-image {
    order: -1;
  }
  .terms-section-image img {
    height: 220px;
  }
  .terms-section-content h2 {
    font-size: 1.5rem;
  }
  .terms-two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .terms-contact-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .terms-contact-card {
    padding: 2rem 1.5rem;
  }
  .terms-image-break {
    height: 250px;
  }
  .terms-image-break-content p {
    font-size: 1.1rem;
  }
  .terms-hero-meta {
    gap: 1rem;
  }
  .terms-hero-scroll-hint { display: none; }
}

@media (max-width: 480px) {
  .terms-hero-content {
    padding: 80px 1rem 60px;
  }
  .terms-hero-content > p {
    font-size: 0.95rem;
  }
  .terms-toc-card {
    padding: 1.4rem 1.2rem;
  }
  .terms-toc-link {
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
  }
  .terms-section {
    padding: 2.5rem 1rem;
  }
  .terms-section-number {
    font-size: 1.8rem;
  }
  .terms-section-content h2 {
    font-size: 1.3rem;
  }
  .terms-card-grid {
    grid-template-columns: 1fr;
  }
  .terms-mini-card {
    padding: 1.2rem;
  }
  .terms-contact-card {
    padding: 1.5rem 1.2rem;
  }
  .terms-image-break {
    height: 200px;
  }
  .terms-image-break-content p {
    font-size: 0.95rem;
  }
  .terms-quote-svg {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   CROSS-SCREEN PROPORTIONAL FIX
   
   Shorter desktop viewports (e.g. Windows 150% DPI → ~720px)
   display disproportionately large text/spacing vs Mac (~900px).
   
   Fix:
   1. Scale root font-size via viewport-height clamp.
      Below 800px viewport: smoothly scales from 13px.
      At 800px+: normal 15px. ALL rem-based values shrink
      proportionally — design ratios stay identical.
   2. Pull heroes behind topbar+header for full viewport height.
   3. Splitscreen-friendly: max-width on frosted-box scales with vw.
   ============================================================ */

@media (min-width: 769px) {

  /* ---- Proportional root font scaling ---- */
  html {
    font-size: clamp(13px, 1.8vh, 15px);
  }

  /* ---- INDEX PAGE: hero fills full viewport ---- */
  .index-page .hero {
    min-height: 100svh;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    margin-top: calc(-2rem - 90px);
    padding-top: calc(3rem + 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .index-page .hero > div {
    margin-top: 0;
  }

  /* ---- SUB-PAGES: frosted-box heroes fill full viewport ---- */
  .hero-takbyte,
  .hero-fasad,
  .hero-platslageri,
  .hero-plattaket,
  .hero-papptak,
  .hero-bandtackning,
  .hero-takpanneplat,
  .hero-korrugerad,
  .hero-takkupor,
  .hero-skorsten,
  .hero-fasad-panel {
    min-height: 100svh;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    margin-top: -90px;
    padding-top: 90px;
  }

  .hero-takbyte > div,
  .hero-fasad > div,
  .hero-platslageri > div,
  .hero-plattaket > div,
  .hero-papptak > div,
  .hero-bandtackning > div,
  .hero-takpanneplat > div,
  .hero-korrugerad > div,
  .hero-takkupor > div,
  .hero-skorsten > div,
  .hero-fasad-panel > div {
    min-height: auto;
  }

  .frosted-box {
    margin-top: clamp(-8rem, -10vh, -4rem);
  }

  /* ---- SOLCELLER PAGE ---- */
  .solar-hero {
    min-height: 100svh;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    margin-top: -90px;
    padding-top: 90px;
  }
}

/* ===== FULLSCREEN DESKTOP (>1024px) — index hero polish ===== */
@media (min-width: 1025px) {
  .index-page .hero > div {
    max-width: 650px;
    margin-left: 0;
  }
  .index-page .hero h1 {
    font-size: clamp(2.4rem, 3.2vw, 3.2rem);
    letter-spacing: -0.6px;
    line-height: 1.15;
  }
  .index-page .hero .hero-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    margin-bottom: 0.8rem;
  }
  .index-page .hero .hero-lead {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    max-width: 520px;
    line-height: 1.7;
    margin-bottom: 2rem;
  }
  .index-page .hero .hero-cta-row {
    gap: 0.9rem;
  }
  .index-page .hero .hero-cta-row .btn-primary,
  .index-page .hero .hero-cta-row .btn-ghost {
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
  }
  .index-page .hero .hero-note {
    font-size: 0.9rem;
    margin-top: 1.4rem;
    max-width: 500px;
  }
}

/* ===== SPLITSCREEN / NARROW DESKTOP (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero > div {
    max-width: 600px;
  }
  .hero h1 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
  }
  .hero-lead {
    font-size: 0.88rem;
    max-width: 440px;
  }
  .hero-note {
    font-size: 0.78rem;
  }
  .frosted-box {
    padding: 2rem 1.6rem;
    max-width: min(440px, 75vw);
    border-radius: 18px;
  }
  .frosted-box h1 {
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  }
  .frosted-box .hero-lead {
    font-size: 0.85rem;
    line-height: 1.6;
  }
  .frosted-box .hero-kicker {
    font-size: 0.6rem;
  }
  .logo-img {
    height: 180px;
    margin: -80px -22px -92px 0;
    max-width: 115px;
  }
  .nav-title {
    font-size: 0.85rem;
  }
}

/* ============================================================
   ALL BLACK PANELER PAGE STYLES
   ============================================================ */

/* --- Topbar & Header seamless background (bandtackning pattern) --- */
body.allblack-page .topbar {
  background-image: linear-gradient(135deg, rgba(5,5,12,0.72), rgba(5,5,12,0.5)), url('solceller1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.allblack-page header {
  background-image: linear-gradient(135deg, rgba(5,5,12,0.72), rgba(5,5,12,0.5)), url('solceller1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* --- Hero (plattaket pattern — same fixed bg, no viewport escape) --- */
.allblack-hero {
  background-image: linear-gradient(135deg, rgba(5,5,12,0.72), rgba(5,5,12,0.5)), url('solceller1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 1.5rem;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.allblack-hero > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-width: var(--max-width);
  margin: 0 auto;
}
.allblack-hero .frosted-box h1 span {
  background: linear-gradient(135deg, #19A8FF 0%, #00D9FF 50%, #19A8FF 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* --- Responsive: 1024px --- */
@media (max-width: 1024px) {
  .allblack-hero {
    height: 100vh;
    padding: 0 1.2rem;
  }
}

/* --- Responsive: 600px --- */
@media (max-width: 600px) {
  .allblack-hero {
    height: 100svh !important;
    min-height: 100svh;
    max-height: 100svh;
    margin-top: -120px;
    padding-top: 120px !important;
    background-attachment: scroll !important;
  }
  .allblack-hero .frosted-box {
    margin-top: 0;
    padding: 1.6rem 1.2rem;
  }
}

/* ============================================================
   FILOSOFI — INTERAKTIV SEKTION (white / clean)
   ============================================================ */

.ip-section {
  position: relative;
  overflow: hidden;
  padding: 120px 40px 100px;
  background: #fff;
  color: #0a0a14;
  z-index: 1;
}

.ip-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Header --- */
.ip-header {
  text-align: center;
  margin-bottom: 72px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.ip-header.ip-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.ip-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #19A8FF;
  border: 1.5px solid rgba(25,168,255,0.3);
  border-radius: 20px;
  padding: 6px 18px;
  margin-bottom: 20px;
}

.ip-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  margin: 0 0 16px;
  color: #0a0a14;
}

.ip-subtitle {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(10,10,20,0.55);
  max-width: 540px;
  margin: 0 auto;
}

/* --- Pillars --- */
.ip-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ip-pillar {
  position: relative;
  padding: 44px 28px 32px;
  background: #fafbfd;
  border: 1px solid rgba(10,10,20,0.06);
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.ip-pillar.ip-pillar-visible {
  opacity: 1;
  transform: translateY(0);
}

.ip-pillar:hover {
  border-color: rgba(25,168,255,0.25);
  box-shadow: 0 12px 40px rgba(25,168,255,0.08);
}

/* --- SVG icon animation --- */
.ip-pillar-icon-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  cursor: pointer;
}
.ip-pillar-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,168,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.ip-pillar:hover .ip-pillar-icon-wrap::after {
  opacity: 1;
}
.ip-icon-svg {
  width: 100%;
  height: 100%;
}

.ip-icon-ring,
.ip-icon-ring2 {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.ip-icon-dot {
  transition: opacity 0.5s ease 0.7s;
}
.ip-icon-path {
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.ip-icon-line {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}
.ip-icon-bolt {
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}

/* Animated state */
.ip-pillar.ip-pillar-visible .ip-icon-ring,
.ip-pillar.ip-pillar-visible .ip-icon-ring2 {
  stroke-dashoffset: 0;
}
.ip-pillar.ip-pillar-visible .ip-icon-dot {
  opacity: 1;
}
.ip-pillar.ip-pillar-visible .ip-icon-path {
  stroke-dashoffset: 0;
}
.ip-pillar.ip-pillar-visible .ip-icon-line {
  stroke-dashoffset: 0;
}
.ip-pillar.ip-pillar-visible .ip-icon-bolt {
  stroke-dashoffset: 0;
}

/* Hover effects */
.ip-pillar-icon-wrap:hover .ip-icon-ring {
  animation: ipRingPulse 1.2s ease infinite;
}
.ip-pillar-icon-wrap:hover .ip-icon-svg {
  filter: drop-shadow(0 0 8px rgba(25,168,255,0.35));
}
@keyframes ipRingPulse {
  0%, 100% { stroke-width: 1.5; }
  50% { stroke-width: 3; }
}

.ip-pillar-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #0a0a14;
  letter-spacing: -0.3px;
}

.ip-pillar-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(10,10,20,0.55);
  margin: 0 0 16px;
}

/* --- Expandable content --- */
.ip-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #19A8FF;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.25s ease;
}
.ip-expand-btn:hover {
  color: #007acc;
}
.ip-expand-btn svg {
  transition: transform 0.3s ease;
}
.ip-expand-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ip-expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  opacity: 0;
}
.ip-expand-content.ip-expanded {
  max-height: 200px;
  opacity: 1;
}
.ip-expand-content p {
  padding-top: 12px;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(10,10,20,0.5);
  margin: 0;
}

/* === IP RESPONSIVE === */
@media (max-width: 1024px) {
  .ip-section { padding: 100px 32px 80px; }
  .ip-pillars { gap: 24px; }
  .ip-pillar { padding: 36px 24px 28px; }
}
@media (max-width: 768px) {
  .ip-section { padding: 80px 20px 60px; }
  .ip-pillars { grid-template-columns: 1fr; gap: 20px; }
  .ip-pillar { padding: 32px 24px 24px; }
  .ip-header { margin-bottom: 48px; }
}
@media (max-width: 480px) {
  .ip-section { padding: 60px 16px 50px; }
  .ip-pillar-icon-wrap { width: 64px; height: 64px; }
}

/* ============================================================
   PANEL-JÄMFÖRELSE SEKTION
   ============================================================ */

.panel-compare {
  padding: 100px 40px 120px;
  background: #f5f7fa;
  overflow: hidden;
}

.panel-compare-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.panel-compare-header {
  text-align: center;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.panel-compare-header.ip-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.panel-compare-title {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #0a0a14;
  margin: 0 0 14px;
}
.panel-compare-sub {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(10,10,20,0.5);
  max-width: 520px;
  margin: 0 auto;
}

/* --- Tabs with sliding pill --- */
.panel-compare-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 48px;
  background: #e9ecf0;
  border-radius: 40px;
  padding: 4px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.panel-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 36px;
  background: transparent;
  color: rgba(10,10,20,0.55);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}
.panel-tab:hover {
  color: #0a0a14;
}
.panel-tab-active {
  background: #0a0a14;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.panel-tab-active:hover {
  color: #fff;
}

/* --- Grid: specs left, image right --- */
.panel-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* --- Specs card --- */
.panel-specs {
  position: relative;
}

.panel-detail {
  display: none;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.panel-detail-active {
  display: block;
  animation: panelSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes panelSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

.panel-detail-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #19A8FF;
  background: rgba(25,168,255,0.08);
  padding: 5px 14px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.panel-badge-medium {
  color: #10b981;
  background: rgba(16,185,129,0.08);
}
.panel-badge-premium {
  color: #f59e0b;
  background: rgba(245,158,11,0.08);
}

.panel-detail-name {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -1.5px;
  margin: 0 0 4px;
  color: #0a0a14;
}
.panel-detail-model {
  font-size: 0.85rem;
  color: rgba(10,10,20,0.4);
  margin: 0 0 28px;
  font-weight: 500;
}

.panel-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.panel-spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(10,10,20,0.06);
  font-size: 0.9rem;
  transition: background 0.2s ease;
}
.panel-spec-list li:hover {
  background: rgba(25,168,255,0.02);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 8px;
}
.spec-label {
  color: rgba(10,10,20,0.5);
  font-weight: 500;
}
.spec-value {
  color: #0a0a14;
  font-weight: 700;
}

/* --- Panel image --- */
.panel-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  background: rgba(25,168,255,0.03);
  border-radius: 24px;
  border: 1px solid rgba(10,10,20,0.04);
  padding: 32px;
}
.panel-img {
  position: absolute;
  inset: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  object-fit: contain;
  opacity: 0;
  transform: scale(0.88) translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.panel-img-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* === PANEL RESPONSIVE === */
@media (max-width: 1024px) {
  .panel-compare { padding: 80px 32px 100px; }
  .panel-compare-grid { gap: 32px; }
}
@media (max-width: 768px) {
  .panel-compare { padding: 60px 20px 80px; }
  .panel-compare-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .panel-image-wrap {
    order: -1;
    min-height: 260px;
    padding: 24px;
  }
  .panel-img { inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
  .panel-compare-tabs { max-width: 100%; }
  .panel-tab { font-size: 0.82rem; }
}
@media (max-width: 480px) {
  .panel-compare { padding: 50px 16px 60px; }
  .panel-image-wrap { min-height: 200px; }
  .panel-img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
  .panel-detail-name { font-size: 1.6rem; }
}

/* ============================================================
   FRÅN SOL TILL BESPARING — INFORMATIV SEKTION
   ============================================================ */

.solar-journey {
  padding: 120px 40px 100px;
  background: #fff;
  color: #0a0a14;
  overflow: hidden;
}

.sj-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sj-header {
  text-align: center;
  margin-bottom: 80px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.sj-header.sj-visible {
  opacity: 1;
  transform: translateY(0);
}

.sj-badge {
  color: #0088cc;
  border-color: rgba(0,136,204,0.25);
}

.sj-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  margin: 0 0 16px;
  color: #0a0a14;
}

.sj-sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #5a5a5a;
  max-width: 480px;
  margin: 0 auto;
}

/* --- Steps row --- */
.sj-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 80px;
}

.sj-step {
  flex: 1;
  max-width: 240px;
  text-align: center;
  padding: 36px 20px 32px;
  border-radius: 20px;
  background: linear-gradient(145deg, #f7f9fc, #ffffff);
  border: 1px solid rgba(0,136,204,0.06);
  box-shadow: 0 2px 16px rgba(0,0,0,0.03);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
  cursor: default;
  position: relative;
}
.sj-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #19A8FF, #00D9FF);
  opacity: 0;
  transition: opacity 0.4s ease, width 0.4s ease;
}
.sj-step.sj-step-visible {
  opacity: 1;
  transform: translateY(0);
}
.sj-step.sj-step-visible:hover {
  background: linear-gradient(145deg, #f0f6ff, #ffffff);
  box-shadow: 0 12px 40px rgba(0,136,204,0.1);
  transform: translateY(-6px);
}
.sj-step.sj-step-visible:hover::before {
  opacity: 1;
  width: 80px;
}

.sj-step-icon-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  position: relative;
}
.sj-step-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(0,136,204,0.1);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.sj-step.sj-step-visible:hover .sj-step-icon-wrap::before {
  border-color: rgba(0,136,204,0.25);
  box-shadow: 0 0 30px rgba(0,136,204,0.1);
}
.sj-icon {
  width: 100%;
  height: 100%;
}

/* SVG icon animation classes */
.sj-icon-main {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.sj-icon-ray {
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
.sj-icon-dot {
  transition: opacity 0.5s ease 0.7s;
}
.sj-step.sj-step-visible .sj-icon-main {
  stroke-dashoffset: 0;
}
.sj-step.sj-step-visible .sj-icon-ray {
  stroke-dashoffset: 0;
}
.sj-step.sj-step-visible .sj-icon-dot {
  opacity: 1;
}

.sj-step-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: rgba(0,136,204,0.4);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sj-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #0a0a14;
}

.sj-step-text {
  font-size: 0.84rem;
  line-height: 1.7;
  color: #5a5a5a;
  margin: 0;
}

/* --- Connectors --- */
.sj-connector {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  padding-top: 84px;
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
.sj-connector.sj-conn-visible {
  opacity: 1;
}
.sj-connector.sj-conn-visible line {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  stroke-dashoffset: 0;
}

/* --- Stats row --- */
.sj-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 60px;
  border-top: 1px solid rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.sj-stats.sj-visible {
  opacity: 1;
  transform: translateY(0);
}

.sj-stat {
  text-align: center;
  padding: 24px 16px;
  border-radius: 16px;
  transition: background 0.3s ease;
}
.sj-stat:hover {
  background: rgba(0,136,204,0.03);
}

.sj-stat-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.sj-count {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sj-suffix {
  font-size: 1rem;
  font-weight: 700;
  color: #5a5a5a;
}

.sj-stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 6px;
}

/* === SOLAR JOURNEY RESPONSIVE === */
@media (max-width: 1024px) {
  .solar-journey { padding: 100px 32px 80px; }
  .sj-steps { gap: 0; }
  .sj-connector { width: 32px; }
  .sj-step { max-width: 220px; padding: 28px 16px 24px; }
  .sj-step-icon-wrap { width: 72px; height: 72px; }
}
@media (max-width: 768px) {
  .solar-journey { padding: 80px 20px 60px; }
  .sj-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .sj-step { max-width: 100%; width: 100%; }
  .sj-step-icon-wrap { width: 72px; height: 72px; }
  .sj-connector {
    width: 4px;
    height: 40px;
    padding-top: 0;
    justify-content: center;
  }
  .sj-connector svg {
    transform: rotate(90deg);
    width: 40px;
  }
  .sj-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .sj-header { margin-bottom: 48px; }
}
@media (max-width: 480px) {
  .solar-journey { padding: 60px 16px 50px; }
  .sj-step-icon-wrap { width: 64px; height: 64px; }
  .sj-count { font-size: 2rem; }
  .sj-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BATTERILAGRING — VARFÖR VÄLJA BATTERI
   ============================================================ */

.batt-why {
  position: relative;
  padding: 100px 40px 90px;
  background: #fff;
  color: #0a0a14;
  overflow: hidden;
}
.batt-why::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(25,168,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(25,168,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}

.batt-why-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.batt-why-header {
  text-align: center;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.batt-why-header.batt-visible {
  opacity: 1;
  transform: translateY(0);
}

.batt-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #19A8FF;
  border: 1.5px solid rgba(25,168,255,0.3);
  border-radius: 20px;
  padding: 6px 18px;
  margin-bottom: 20px;
}

.batt-why-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  margin: 0 0 16px;
  color: #0a0a14;
}
.batt-gradient {
  background: linear-gradient(135deg, #19A8FF, #00D9FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.batt-why-sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(10,10,20,0.55);
  max-width: 540px;
  margin: 0 auto;
}

/* Cards Grid */
.batt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.batt-card {
  position: relative;
  padding: 40px 28px 32px;
  background: #fafbfd;
  border: 1px solid rgba(10,10,20,0.06);
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.batt-card.batt-card-visible {
  opacity: 1;
  transform: translateY(0);
}
.batt-card:hover {
  border-color: rgba(25,168,255,0.25);
  box-shadow: 0 12px 40px rgba(25,168,255,0.08);
}

/* Card Icon */
.batt-card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  position: relative;
}
.batt-card-icon::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,168,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.batt-card:hover .batt-card-icon::after {
  opacity: 1;
}
.batt-card-icon svg {
  width: 100%;
  height: 100%;
}

/* SVG icon animation paths */
.batt-icon-ring {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.batt-icon-path {
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.batt-icon-line {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}
.batt-icon-bolt {
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
.batt-icon-dot {
  transition: opacity 0.5s ease 0.9s;
}

.batt-card.batt-card-visible .batt-icon-ring { stroke-dashoffset: 0; }
.batt-card.batt-card-visible .batt-icon-path { stroke-dashoffset: 0; }
.batt-card.batt-card-visible .batt-icon-line { stroke-dashoffset: 0; }
.batt-card.batt-card-visible .batt-icon-bolt { stroke-dashoffset: 0; }
.batt-card.batt-card-visible .batt-icon-dot { opacity: 1; }

.batt-card:hover .batt-icon-ring {
  animation: battRingPulse 1.2s ease infinite;
}
.batt-card:hover .batt-card-icon svg {
  filter: drop-shadow(0 0 8px rgba(25,168,255,0.3));
}
@keyframes battRingPulse {
  0%, 100% { stroke-width: 1.5; }
  50% { stroke-width: 3; }
}

/* Card Title & Text */
.batt-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #0a0a14;
  letter-spacing: -0.3px;
}
.batt-card-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(10,10,20,0.55);
  margin: 0 0 16px;
}

/* Expand Button & Content */
.batt-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #19A8FF;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.25s ease;
}
.batt-expand-btn:hover { color: #007acc; }
.batt-expand-btn svg {
  transition: transform 0.3s ease;
}
.batt-expand-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.batt-expand-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}
.batt-expand-content.batt-expanded {
  max-height: 250px;
  opacity: 1;
}
.batt-expand-content p {
  padding-top: 12px;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(10,10,20,0.5);
  margin: 0;
  text-align: left;
}

/* Responsive */
@media (max-width: 1024px) {
  .batt-why { padding: 80px 32px 70px; }
  .batt-cards { gap: 22px; }
  .batt-card { padding: 32px 22px 28px; }
}
@media (max-width: 768px) {
  .batt-why { padding: 70px 20px 60px; }
  .batt-cards { grid-template-columns: 1fr 1fr; gap: 18px; }
  .batt-card { padding: 28px 20px 24px; }
  .batt-why-header { margin-bottom: 48px; }
}
@media (max-width: 540px) {
  .batt-why { padding: 60px 16px 50px; }
  .batt-cards { grid-template-columns: 1fr; gap: 16px; }
  .batt-card-icon { width: 64px; height: 64px; }
}

/* ───── Dag-till-Natt Energiflöde ───── */
.batt-flow {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #ffffff;
  padding: 100px 40px 90px;
  overflow: hidden;
}
.batt-flow::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}
.batt-flow-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* Header */
.batt-flow-header {
  text-align: center;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.batt-flow-header.batt-visible {
  opacity: 1;
  transform: translateY(0);
}
.batt-flow .batt-badge {
  background: rgba(25,168,255,0.08);
  border-color: rgba(25,168,255,0.12);
}
.batt-flow-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #0a0a14;
  margin: 0 0 14px;
}
.batt-flow-sub {
  color: #5a5a6a;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* Toggle */
.batt-flow-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.batt-flow-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50px;
  padding: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.4s ease;
}
.batt-flow-toggle:hover { border-color: rgba(25,168,255,0.3); }
.batt-flow-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(0,0,0,0.35);
  z-index: 1;
  transition: color 0.35s ease;
  border-radius: 50px;
}
.batt-flow-toggle-label.active { color: #0a0a14; }
.batt-flow-toggle-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: rgba(25,168,255,0.12);
  border-radius: 50px;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.batt-flow-toggle[data-mode="night"] .batt-flow-toggle-pill {
  transform: translateX(100%);
}

/* Scene Container */
.batt-flow-scene {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto 48px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}

/* Sky */
.batt-flow-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.batt-sky-day {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1a6fb5 0%, #5bb6f5 50%, #a3d9ff 100%);
  transition: opacity 0.8s ease;
}
.batt-sky-night {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0e1a 0%, #111933 50%, #1a2744 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.batt-flow-scene[data-mode="night"] .batt-sky-day { opacity: 0; }
.batt-flow-scene[data-mode="night"] .batt-sky-night { opacity: 1; }

/* Celestial bodies */
.batt-celestial {
  position: absolute;
  top: 4%;
  right: 10%;
  width: 90px;
  height: 90px;
  z-index: 1;
}
.batt-sun {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.batt-moon {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: rotate(-30deg) scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.batt-flow-scene[data-mode="night"] .batt-sun {
  opacity: 0;
  transform: rotate(20deg) scale(0.7);
}
.batt-flow-scene[data-mode="night"] .batt-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* House */
.batt-flow-house {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  z-index: 2;
}
.batt-house-svg { width: 100%; height: auto; display: block; }
.batt-svg-text { pointer-events: none; }

/* Panel glow in day mode */
.batt-panels rect {
  transition: opacity 0.6s ease, filter 0.6s ease;
}
.batt-flow-scene[data-mode="day"] .batt-panels rect[fill="url(#panelGrad)"] {
  filter: drop-shadow(0 0 6px rgba(25,168,255,0.45));
}
.batt-flow-scene[data-mode="night"] .batt-panels rect[fill="url(#panelGrad)"] {
  opacity: 0.35;
  filter: none;
}
.batt-flow-scene[data-mode="night"] .batt-panels line,
.batt-flow-scene[data-mode="night"] .batt-panels rect[fill="#fff"] {
  opacity: 0.15;
}

/* Windows glow */
.batt-window {
  transition: fill 0.6s ease, opacity 0.6s ease;
}
.batt-flow-scene[data-mode="night"] .batt-window {
  fill: #FFD93D;
  opacity: 0.85;
}

/* Chimney smoke - hide at night */
.batt-chimney-smoke {
  transition: opacity 0.6s ease;
}
.batt-flow-scene[data-mode="night"] .batt-chimney-smoke {
  opacity: 0 !important;
}

/* Battery unit charge animation */
.batt-level-1, .batt-level-2, .batt-level-3 {
  transition: opacity 0.4s ease;
}
.batt-flow-scene[data-mode="day"] .batt-level-1 { opacity: 0.25; animation: battCharge 2s ease infinite; }
.batt-flow-scene[data-mode="day"] .batt-level-2 { opacity: 0.5; animation: battCharge 2s ease 0.3s infinite; }
.batt-flow-scene[data-mode="day"] .batt-level-3 { opacity: 0.8; }
.batt-flow-scene[data-mode="night"] .batt-level-3 { opacity: 0.8; animation: battDrain 2.5s ease infinite; }
.batt-flow-scene[data-mode="night"] .batt-level-2 { opacity: 0.5; animation: battDrain 2.5s ease 0.4s infinite; }
.batt-flow-scene[data-mode="night"] .batt-level-1 { opacity: 0.2; }

@keyframes battCharge {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.7; }
}
@keyframes battDrain {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.3; }
}

/* Energy Flow Arrows */
.batt-flow-arrows {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.batt-arrow {
  position: absolute;
  overflow: visible;
}
.batt-arrow-path {
  animation: flowDash 1.2s linear infinite;
}
@keyframes flowDash {
  to { stroke-dashoffset: -24; }
}

/* Arrow positions */
.batt-arrow-sun {
  top: 16%;
  left: 42%;
  width: 18%;
  height: 30px;
  transform: rotate(30deg);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.batt-arrow-to-batt {
  bottom: 30%;
  right: 3%;
  width: 14%;
  height: 30px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.batt-arrow-to-house {
  top: 36%;
  left: 48%;
  width: 30px;
  height: 18%;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.batt-arrow-from-batt {
  bottom: 34%;
  right: 12%;
  width: 14%;
  height: 30px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Night arrow visibility */
.batt-flow-scene[data-mode="night"] .batt-arrow-sun { opacity: 0; }
.batt-flow-scene[data-mode="night"] .batt-arrow-to-batt { opacity: 0; }
.batt-flow-scene[data-mode="night"] .batt-arrow-to-house { opacity: 0; }
.batt-flow-scene[data-mode="night"] .batt-arrow-from-batt { opacity: 1; }

/* Labels */
.batt-flow-labels {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.batt-flow-label {
  position: absolute;
  text-align: center;
}
.batt-label-value {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.batt-label-detail {
  display: block;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.batt-label-sun { top: 8%; left: 12%; }
.batt-label-house { bottom: 6%; left: 42%; }
.batt-label-battery { bottom: 6%; right: 4%; }

/* Info Cards */
.batt-flow-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s, transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s;
}
.batt-flow-info.batt-visible {
  opacity: 1;
  transform: translateY(0);
}
.batt-flow-info-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: 14px;
  background: #f8f8fa;
  border: 1px solid rgba(0,0,0,0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.batt-flow-info-card:hover {
  border-color: rgba(25,168,255,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.batt-flow-info-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
}
.batt-flow-info-card h4 {
  color: #0a0a14;
  font-size: 1rem;
  margin-bottom: 6px;
}
.batt-flow-info-card p {
  color: #5a5a6a;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .batt-flow { padding: 70px 20px 60px; }
  .batt-flow-scene { aspect-ratio: 4 / 3; }
  .batt-flow-info { grid-template-columns: 1fr; gap: 16px; }
  .batt-flow-label { font-size: 0.7rem; }
}
@media (max-width: 540px) {
  .batt-flow { padding: 60px 16px 50px; }
  .batt-flow-title { font-size: 1.5rem; }
  .batt-flow-toggle-label { padding: 6px 14px; font-size: 0.82rem; }
  .batt-flow-info-card { padding: 18px; }
  .batt-celestial { width: 65px; height: 65px; }
}

/* ───── Kunskapsbank (replaces energiflöde) ───── */
.batt-knowledge {
  position: relative; width: 100vw; margin-left: calc(-50vw + 50%);
  background: #fff; padding: 5rem 2rem;
}
.batt-knowledge-inner { max-width: 780px; margin: 0 auto; }
.batt-knowledge-header { text-align: center; margin-bottom: 3rem; }
.batt-knowledge-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: #0a1e2e; margin-bottom: 0.6rem; }
.batt-knowledge-sub { font-size: 1rem; color: #6a6a7a; max-width: 500px; margin: 0 auto; }
.batt-knowledge-grid { display: flex; flex-direction: column; gap: 0.75rem; }

.batt-knowledge-item {
  border: 1px solid rgba(25,168,255,0.1); border-radius: 14px;
  background: #fafbfc; overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.batt-knowledge-item[open] {
  border-color: rgba(25,168,255,0.25);
  box-shadow: 0 4px 20px rgba(25,168,255,0.08);
}
.batt-knowledge-q {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.2rem 1.5rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1rem; color: #1a1a2e;
}
.batt-knowledge-q::-webkit-details-marker { display: none; }
.batt-knowledge-q::marker { content: ''; }
.batt-knowledge-icon { flex-shrink: 0; color: #19A8FF; }
.batt-knowledge-q > span { flex: 1; }
.batt-knowledge-chevron {
  flex-shrink: 0; transition: transform 0.3s ease; color: #8a8a9a;
}
.batt-knowledge-item[open] .batt-knowledge-chevron { transform: rotate(180deg); }

.batt-knowledge-a {
  padding: 0 1.5rem 1.3rem 4.4rem;
  font-size: 0.92rem; line-height: 1.7; color: #4a4a5a;
}
.batt-knowledge-a strong { color: #19A8FF; font-weight: 600; }
.batt-knowledge-cta { text-align: center; margin-top: 2.5rem; }
.batt-knowledge-cta p { font-size: 1rem; color: #6a6a7a; margin-bottom: 1rem; }

@media (max-width: 600px) {
  .batt-knowledge { padding: 3.5rem 1.2rem; }
  .batt-knowledge-q { padding: 1rem 1.1rem; font-size: 0.92rem; gap: 0.65rem; }
  .batt-knowledge-a { padding: 0 1.1rem 1rem 3.2rem; font-size: 0.88rem; }
}

/* ───── Teknikjämförelse ───── */
.batt-compare {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #f5f5f8;
  padding: 100px 40px 90px;
  overflow: hidden;
}
.batt-compare::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}
.batt-compare-inner {
  max-width: 900px;
  margin: 0 auto;
}
.batt-compare-header {
  text-align: center;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.batt-compare-header.batt-visible {
  opacity: 1;
  transform: translateY(0);
}
.batt-compare-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #0a0a14;
  margin: 0 0 14px;
}
.batt-compare-sub {
  color: #5a5a6a;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* Comparison Grid */
.batt-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s, transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s;
}
.batt-compare-grid.batt-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tech Card */
.batt-tech-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 36px 28px 32px;
  border: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}
.batt-tech-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.1);
}

/* Recommended card */
.batt-tech-recommended {
  border-color: rgba(25,168,255,0.2);
  box-shadow: 0 4px 24px rgba(25,168,255,0.08);
}
.batt-tech-recommended:hover {
  border-color: rgba(25,168,255,0.35);
  box-shadow: 0 8px 36px rgba(25,168,255,0.12);
}
.batt-tech-badge-wrap {
  text-align: center;
  margin-bottom: 16px;
}
.batt-tech-rec-badge {
  display: inline-block;
  background: linear-gradient(135deg, #19A8FF, #0088CC);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 50px;
}

/* Tech Header */
.batt-tech-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.batt-tech-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(25,168,255,0.06);
  border: 1px solid rgba(25,168,255,0.1);
}
.batt-tech-icon-alt {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.06);
}
.batt-tech-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0a0a14;
  margin-bottom: 2px;
}
.batt-tech-type {
  font-size: 0.82rem;
  color: #7a7a8a;
}

/* Specs List */
.batt-tech-specs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.batt-tech-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.batt-tech-specs li:last-child { border-bottom: none; }
.batt-spec-label {
  font-size: 0.88rem;
  color: #5a5a6a;
}
.batt-spec-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0a0a14;
}
.batt-spec-highlight {
  color: #19A8FF;
}

/* Callout */
.batt-compare-callout {
  display: flex;
  gap: 18px;
  padding: 28px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(25,168,255,0.12);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s, transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s;
}
.batt-compare-callout.batt-visible {
  opacity: 1;
  transform: translateY(0);
}
.batt-compare-callout-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(25,168,255,0.06);
}
.batt-compare-callout-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0a0a14;
  margin-bottom: 8px;
}
.batt-compare-callout-text {
  font-size: 0.92rem;
  color: #5a5a6a;
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 768px) {
  .batt-compare { padding: 70px 20px 60px; }
  .batt-compare-grid { grid-template-columns: 1fr; gap: 20px; }
  .batt-tech-card { padding: 28px 22px 24px; }
}
@media (max-width: 540px) {
  .batt-compare { padding: 60px 16px 50px; }
  .batt-compare-callout { flex-direction: column; gap: 12px; }
}

/* ───── Batterilagring CTA ───── */
.batt-cta .band-cta-overlay {
  background: linear-gradient(135deg, rgba(0,20,40,0.6), rgba(0,60,100,0.45));
}

/* ===== ARTICLES SLIDER SECTION ===== */
.articles-section {
  padding: 6rem 2rem 5rem;
  background: var(--bg, #f8fafc);
  position: relative;
}
.articles-section-inner {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
}
.articles-section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.articles-kicker {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue, #19A8FF);
  margin-bottom: 0.5rem;
}
.articles-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--text, #0f172a);
  line-height: 1.2;
}
.articles-slider-wrap {
  position: relative;
}
.articles-slider {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1rem;
}
.articles-slider::-webkit-scrollbar { display: none; }

.article-card {
  flex: 0 0 calc(33.333% - 1rem);
  scroll-snap-align: start;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.article-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.article-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue, #19A8FF);
  background: rgba(25,168,255,0.08);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  width: fit-content;
}
.article-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
.article-card-excerpt {
  font-size: 0.88rem;
  color: var(--text-soft, #64748b);
  line-height: 1.55;
  flex: 1;
}
.article-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue, #19A8FF);
  margin-top: 1rem;
  transition: gap 0.3s ease;
}
.article-card:hover .article-card-read { gap: 0.6rem; }

/* Slider arrows */
.articles-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s, box-shadow 0.2s;
  color: var(--text, #0f172a);
}
.articles-arrow:hover {
  background: var(--blue, #19A8FF);
  color: #fff;
  box-shadow: 0 4px 16px rgba(25,168,255,0.3);
}
.articles-arrow--prev { left: -22px; }
.articles-arrow--next { right: -22px; }
.articles-arrow:disabled { opacity: 0.3; pointer-events: none; }

@media (max-width: 1024px) {
  .article-card { flex: 0 0 calc(50% - 0.75rem); }
  .articles-arrow--prev { left: -10px; }
  .articles-arrow--next { right: -10px; }
}
@media (max-width: 640px) {
  .articles-section { padding: 4rem 1rem 3rem; }
  .article-card { flex: 0 0 85%; }
  .articles-arrow { display: none; }
}
@media (max-width: 400px) {
  .article-card { flex: 0 0 92%; }
}

/* ===== ARTICLE PAGES ===== */

/* --- Hero background images per page (CSS custom property approach) --- */
body.article-page { --hero-overlay: linear-gradient(135deg, rgba(10,26,47,0.62), rgba(0,60,110,0.48)); }
body.art-takbyte       { --hero-img: url('takbyte.jpg'); }
body.art-solceller     { --hero-img: url('Solceller-tak.jpg'); }
body.art-fasad         { --hero-img: url('Fasadbild-ferotect.jpg'); }
body.art-bandtackning  { --hero-img: url('band1.jpg'); }
body.art-platslageri   { --hero-img: url('plat9.jpg'); }
body.art-takpanneplat  { --hero-img: url('takpannplat4.jpg'); }

/* Topbar, header & hero share same fixed bg -> seamless full-bleed image */
body.article-page .topbar {
  background-image: var(--hero-overlay), var(--hero-img);
  background-size: cover; background-position: center;
  background-attachment: fixed; background-repeat: no-repeat;
}
body.article-page header {
  background-image: var(--hero-overlay), var(--hero-img) !important;
  background-size: cover !important; background-position: center !important;
  background-attachment: fixed !important; background-repeat: no-repeat !important;
}

/* --- Hero section (skorsten-style) --- */
.hero-article {
  background-image: var(--hero-overlay), var(--hero-img);
  background-size: cover; background-position: center;
  background-attachment: fixed; background-repeat: no-repeat;
  width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
  margin-top: 0; margin-bottom: 0; padding: 0 1.5rem;
  height: 100vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-article > div {
  width: 100%; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; max-width: var(--max-width); margin: 0 auto;
}

/* --- Article wave transition --- */
.article-wave {
  position: relative; margin-top: -60px; z-index: 2;
  width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
}
.article-wave svg { display: block; width: 100%; height: 60px; }

/* --- Content sections --- */
.art-section {
  background: #fff; width: 100vw;
  margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
  padding: 4.5rem 2rem; position: relative; overflow: hidden;
}
.art-section:nth-child(even) { background: #f8fbff; }
.art-section-inner {
  max-width: 900px; margin: 0 auto; position: relative; z-index: 1;
}

/* Decorative accent bar before headings */
.art-section h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem); font-weight: 800; color: #0b1a2e;
  letter-spacing: -0.6px; margin-bottom: 1.2rem; position: relative;
  padding-left: 1.1rem;
}
.art-section h2::before {
  content: ''; position: absolute; left: 0; top: 0.15em;
  width: 4px; height: 1.2em; border-radius: 3px;
  background: linear-gradient(180deg, #19A8FF, #0066bb);
}
.art-section h3 {
  font-size: 1.12rem; font-weight: 700; color: #0b1a2e;
  margin-top: 1.8rem; margin-bottom: 0.6rem;
}
.art-section p {
  font-size: 0.95rem; color: #3a4a5c; line-height: 1.78; margin-bottom: 1rem;
}
.art-section .highlight { color: var(--blue); font-weight: 600; }
.art-section ul { list-style: none; padding: 0; margin: 0 0 1.5rem 0; }
.art-section ul li {
  position: relative; padding-left: 1.8rem; margin-bottom: 0.7rem;
  font-size: 0.95rem; color: #3a4a5c; line-height: 1.68;
}
.art-section ul li::before {
  content: ''; position: absolute; left: 0; top: 0.55rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #19A8FF, #0066bb);
}

/* --- Feature grid cards --- */
.art-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem; margin: 2rem 0;
}
.art-feature-card {
  background: #fff; border: 1px solid rgba(25,168,255,0.1);
  border-radius: 18px; padding: 2rem 1.5rem; text-align: center;
  position: relative; overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.art-feature-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(25,168,255,0.03), rgba(25,168,255,0));
  opacity: 0; transition: opacity 0.4s ease;
}
.art-feature-card:hover::before { opacity: 1; }
.art-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(25,168,255,0.14);
  border-color: rgba(25,168,255,0.28);
}
.art-feature-card .art-icon {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(25,168,255,0.1), rgba(25,168,255,0.04));
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.art-feature-card:hover .art-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(25,168,255,0.2);
}
.art-feature-card .art-icon svg { width: 28px; height: 28px; stroke: #19A8FF; }
.art-feature-card h4 {
  font-size: 1.05rem; font-weight: 700; color: #0b1a2e; margin-bottom: 0.5rem;
}
.art-feature-card p {
  font-size: 0.88rem; color: #556b82; line-height: 1.62; margin: 0;
}

/* --- Info / tip box --- */
.art-info-box {
  display: flex; gap: 1rem; padding: 1.5rem 1.8rem;
  background: linear-gradient(135deg, rgba(25,168,255,0.05), rgba(25,168,255,0.02));
  border-left: 4px solid #19A8FF; border-radius: 0 14px 14px 0;
  margin: 2rem 0; align-items: flex-start;
}
.art-info-box svg { flex-shrink: 0; stroke: #19A8FF; }
.art-info-box p { margin: 0; font-size: 0.92rem; color: #2a3a4c; line-height: 1.68; }

/* --- Service / material cards slider --- */
.art-services-row {
  display: flex; gap: 1.2rem; overflow-x: auto; padding: 1rem 0;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.art-services-row::-webkit-scrollbar { display: none; }
.art-service-link {
  flex: 0 0 240px; scroll-snap-align: start;
  background: #fff; border: 1px solid rgba(25,168,255,0.1);
  border-radius: 16px; overflow: hidden; text-decoration: none;
  color: inherit; transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
}
.art-service-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(25,168,255,0.14);
  border-color: rgba(25,168,255,0.28);
}
.art-service-link img { width: 100%; height: 150px; object-fit: cover; display: block; }
.art-service-link-body { padding: 1.1rem 1.3rem; }
.art-service-link-body h4 {
  font-size: 0.95rem; font-weight: 700; color: #0b1a2e; margin-bottom: 0.35rem;
}
.art-service-link-body p {
  font-size: 0.82rem; color: #556b82; margin: 0; line-height: 1.55;
}

/* --- Steps / process list --- */
.art-steps { list-style: none; padding: 0; margin: 2rem 0; counter-reset: step; }
.art-steps li {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.4rem 0; border-bottom: 1px solid rgba(25,168,255,0.08);
  counter-increment: step;
}
.art-steps li:last-child { border-bottom: none; }
.art-step-num {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #19A8FF, #0066bb); color: #fff;
  font-weight: 800; font-size: 1rem; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 4px 14px rgba(25,168,255,0.25);
  transition: transform 0.3s ease;
}
.art-steps li:hover .art-step-num { transform: scale(1.08); }
.art-step-text h4 { font-size: 1rem; font-weight: 700; color: #0b1a2e; margin-bottom: 0.2rem; }
.art-step-text p { font-size: 0.9rem; color: #556b82; line-height: 1.65; margin: 0; }

/* --- Stat / number highlights --- */
.art-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem; margin: 2.5rem 0;
}
.art-stat {
  text-align: center; padding: 1.5rem 1rem;
  background: linear-gradient(135deg, rgba(25,168,255,0.06), rgba(25,168,255,0.02));
  border-radius: 16px; border: 1px solid rgba(25,168,255,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.art-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(25,168,255,0.1);
}
.art-stat-number {
  font-size: 2rem; font-weight: 900; color: #19A8FF;
  background: linear-gradient(135deg, #19A8FF, #0055aa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.1;
}
.art-stat-label { font-size: 0.82rem; color: #556b82; margin-top: 0.3rem; font-weight: 500; }

/* --- FAQ accordion --- */
.art-faq { margin: 2rem 0; }
.art-faq-item {
  border: 1px solid rgba(25,168,255,0.1); border-radius: 14px;
  margin-bottom: 0.8rem; overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.art-faq-item:hover {
  border-color: rgba(25,168,255,0.25);
  box-shadow: 0 4px 16px rgba(25,168,255,0.06);
}
.art-faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem; cursor: pointer; background: #fff;
  font-weight: 700; font-size: 0.95rem; color: #0b1a2e;
  transition: background 0.3s ease; gap: 1rem;
}
.art-faq-q:hover { background: rgba(25,168,255,0.03); }
.art-faq-q svg {
  flex-shrink: 0; stroke: #19A8FF;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.art-faq-item.open .art-faq-q svg { transform: rotate(180deg); }
.art-faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease;
}
.art-faq-item.open .art-faq-a { max-height: 600px; }
.art-faq-a-inner {
  padding: 0 1.5rem 1.3rem; font-size: 0.9rem; color: #3a4a5c; line-height: 1.72;
}

/* --- Question / cross-link box --- */
.art-question-box {
  background: linear-gradient(135deg, rgba(25,168,255,0.06), rgba(25,168,255,0.02));
  border: 1px solid rgba(25,168,255,0.12); border-radius: 18px;
  padding: 2.2rem; margin: 2.5rem 0; text-align: center;
}
.art-question-box h4 {
  font-size: 1.15rem; font-weight: 700; color: #0b1a2e; margin-bottom: 0.5rem;
}
.art-question-box p {
  color: #556b82; font-size: 0.9rem; margin-bottom: 1.5rem;
}
.art-question-links {
  display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap;
}
.art-question-links a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1.5rem; border-radius: 100px;
  background: #fff; border: 1px solid rgba(25,168,255,0.18);
  color: #0077cc; font-weight: 600; font-size: 0.85rem;
  transition: all 0.3s ease; text-decoration: none;
}
.art-question-links a:hover {
  background: #19A8FF; color: #fff; border-color: #19A8FF;
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(25,168,255,0.25);
}

/* --- CTA wrap --- */
.art-cta-wrap {
  width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .hero-article > div { min-height: auto; padding-top: 0; padding-bottom: 2rem; }
}
@media (max-width: 768px) {
  .art-section { padding: 3.5rem 1.5rem; }
  .art-section h2 { font-size: 1.45rem; }
  .art-feature-grid { grid-template-columns: 1fr; }
  .art-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body.article-page .topbar { background-image: none !important; background: transparent !important; }
  body.article-page header { background-image: none !important; background: transparent !important; }
  .hero-article {
    height: 100svh; min-height: 100svh; max-height: 100svh;
    background-attachment: scroll !important;
    margin-top: -120px; padding-top: 120px;
  }
  .hero-article > div { min-height: auto; padding-top: 0; padding-bottom: 2rem; }
  .art-section { padding: 3rem 1.2rem; }
  .art-section h2 { font-size: 1.3rem; }
  .art-service-link { flex: 0 0 200px; }
  .art-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .art-stat { padding: 1.2rem 0.8rem; }
  .art-stat-number { font-size: 1.6rem; }

  /* Index hero: center calc button content on mobile */
  .index-page .hero .hero-cta-row {
    justify-content: center;
  }
  .index-page .hero .btn-calc {
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Solceller hero: remove left white strip and keep full-bleed image */
  .solceller-page .solar-hero {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .solceller-page .solar-hero .solar-hero-content {
    width: 100%;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Footer logo: move slightly higher and add breathing room above tagline */
.footer-logo-img {
  margin: -36px 0 8px -3px;
}

/* Terms page: make hero/header/topbar background explicit and always visible */
body.terms-body .topbar,
body.terms-body header,
body.terms-body .terms-hero {
  background: transparent !important;
}

/* Article cards: force consistent left-to-right arrow direction on all pages */
.articles-slider-wrap,
.articles-slider,
.article-card,
.article-card-body,
.article-card-read {
  direction: ltr;
}

.article-card-read svg,
.articles-arrow svg {
  transform: none !important;
}

@media (max-width: 600px) {
  body.terms-body .topbar,
  body.terms-body header,
  body.terms-body .terms-hero {
    background: transparent !important;
  }
  body.terms-body {
    background-attachment: scroll;
    background-position: center top;
  }
}