/* ═══ EXKLUSIV MALL: Helix (helix) ═══ Inre-sid-CSS-lager + animation. Scopat [data-template="helix"]. Video:true. Signatur:#5B7CFA. */

html[data-template="helix"]{--bg:#0a0c14;--bg-soft:#10131f;--ink:#f3f5fb;--ink-2:#b3bbcf;--muted:#7d859c;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);--brand-deep:var(--brand);--ff-heading:"Manrope",var(--ff-heading,system-ui),sans-serif;--btn-radius:12px;--btn-pad:14px 26px;--btn-weight:700;--btn-transform:none;--btn-tracking:.01em;--star:#f5c518;--hlx-surface:#121624;--hlx-surface-2:#171c2e;--hlx-raise:#1c2236;--hlx-elev-1:0 1px 0 rgba(255,255,255,.05) inset,0 10px 24px -12px rgba(0,0,0,.7);--hlx-elev-2:0 1px 0 rgba(255,255,255,.07) inset,0 26px 60px -20px rgba(0,0,0,.85);--hlx-glow:0 0 0 1px rgba(var(--brand-rgb),.5),0 24px 60px -18px rgba(var(--brand-rgb),.55)}
[data-template="helix"] body{background:var(--bg);color:var(--ink-2);background-image:radial-gradient(120% 80% at 80% -10%,rgba(var(--brand-rgb),.12) 0%,transparent 55%),radial-gradient(90% 60% at -10% 10%,rgba(var(--brand-rgb),.06) 0%,transparent 50%)}
[data-template="helix"] h1,[data-template="helix"] h2,[data-template="helix"] h3,[data-template="helix"] h4{color:var(--ink);font-family:var(--ff-heading);letter-spacing:-.025em}
[data-template="helix"] .subhero{background:linear-gradient(180deg,var(--hlx-surface) 0%,var(--bg) 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
[data-template="helix"] .subhero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 88% 0%,rgba(var(--brand-rgb),.18) 0%,transparent 60%);z-index:0}
[data-template="helix"] .subhero>*{position:relative;z-index:1}
[data-template="helix"] .subhero h1{color:var(--ink)}
[data-template="helix"] .subhero__lead{color:var(--ink-2)}
[data-template="helix"] .subhero__crumbs,[data-template="helix"] .subhero__crumbs a{color:var(--muted);font-size:13px}
[data-template="helix"] .subhero__crumbs a:hover{color:var(--brand)}
[data-template="helix"] .subhero__crumbs span{color:var(--line-2)}
[data-template="helix"] .subhero__answer{background:var(--hlx-surface-2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:16px;color:var(--ink-2);box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .subhero__answer-label{color:var(--brand);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700}
[data-template="helix"] .subhero__answer p{color:var(--ink-2)}
[data-template="helix"] .subhero__photo,[data-template="helix"] .photo{background:var(--hlx-surface-2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--hlx-elev-2)}
[data-template="helix"] .eyebrow,[data-template="helix"] .section-head .eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(var(--brand-rgb),.12);border:1px solid rgba(var(--brand-rgb),.32);color:#cdd6ff;text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:11.5px;border-radius:999px;padding:6px 14px}
[data-template="helix"] .section{background:var(--bg)}
[data-template="helix"] .section:nth-child(even){background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%)}
[data-template="helix"] .section-head h2{color:var(--ink)}
[data-template="helix"] .section-head p{color:var(--ink-2)}
[data-template="helix"] .card,[data-template="helix"] .aside-card,[data-template="helix"] .other-services__card,[data-template="helix"] .area-service-card,[data-template="helix"] .case-card,[data-template="helix"] .related-link,[data-template="helix"] .hub-bottom__panel{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:18px;color:var(--ink-2);box-shadow:var(--hlx-elev-1);position:relative}
[data-template="helix"] .card:hover,[data-template="helix"] .other-services__card:hover,[data-template="helix"] .area-service-card:hover,[data-template="helix"] .related-link:hover{border-color:rgba(var(--brand-rgb),.5);box-shadow:var(--hlx-glow);transform:translateY(-6px)}
[data-template="helix"] .card h3,[data-template="helix"] .related-link h3,[data-template="helix"] .case-card h3{color:var(--ink)}
[data-template="helix"] .card p{color:var(--muted)}
[data-template="helix"] .card__image{background:var(--hlx-surface);border-bottom:1px solid var(--line);border-radius:18px 18px 0 0}
[data-template="helix"] .card__icon{background:linear-gradient(160deg,rgba(var(--brand-rgb),.28),rgba(var(--brand-rgb),.10));border:1px solid rgba(var(--brand-rgb),.4);color:#dbe2ff;border-radius:14px;box-shadow:0 8px 18px -10px rgba(var(--brand-rgb),.8)}
[data-template="helix"] .card__price{color:#cdd6ff;font-weight:700}
[data-template="helix"] .card__price small{color:var(--muted)}
[data-template="helix"] .card__link{color:var(--ink);font-size:14px;font-weight:600}
[data-template="helix"] .card__link:hover{color:var(--brand)}
[data-template="helix"] .article-card,[data-template="helix"] .article-featured{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:18px;color:var(--ink-2);box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .article-card:hover,[data-template="helix"] .article-featured:hover{transform:translateY(-5px);box-shadow:var(--hlx-elev-2)}
[data-template="helix"] .article-card h3,[data-template="helix"] .article-featured h3{color:var(--ink)}
[data-template="helix"] .article-card p{color:var(--muted)}
[data-template="helix"] .article-card__media,[data-template="helix"] .article-featured__media,[data-template="helix"] .area-service-card__media{background:var(--hlx-surface);border-bottom:1px solid var(--line)}
[data-template="helix"] .article-badge{background:var(--brand);color:#070a14;text-transform:uppercase;letter-spacing:.05em;font-weight:700;border-radius:999px}
[data-template="helix"] .article-hero{background:linear-gradient(180deg,var(--hlx-surface) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
[data-template="helix"] .faq__item{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:16px;box-shadow:var(--hlx-elev-1);margin-bottom:12px}
[data-template="helix"] .faq__q{background:transparent;color:var(--ink);font-weight:600}
[data-template="helix"] .faq__icon{color:var(--brand)}
[data-template="helix"] .faq__a p{color:var(--ink-2)}
[data-template="helix"] .form-card{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:20px;color:var(--ink-2);box-shadow:var(--hlx-elev-2)}
[data-template="helix"] .form-card h2{color:var(--ink)}
[data-template="helix"] .field label,[data-template="helix"] .form-pane__title,[data-template="helix"] .form-step__name{color:var(--ink-2);font-size:13px;letter-spacing:.01em;font-weight:600}
[data-template="helix"] .field input,[data-template="helix"] .field textarea,[data-template="helix"] .field select,[data-template="helix"] .postal-check__row input,[data-template="helix"] .services-search input{background:var(--bg);border:1px solid var(--line-2);border-radius:12px;color:var(--ink)}
[data-template="helix"] .field input::placeholder,[data-template="helix"] .field textarea::placeholder,[data-template="helix"] .postal-check__row input::placeholder{color:var(--muted)}
[data-template="helix"] .field input:focus,[data-template="helix"] .field textarea:focus,[data-template="helix"] .field select:focus,[data-template="helix"] .postal-check__row input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px rgba(var(--brand-rgb),.2)}
[data-template="helix"] .form-step__bubble{background:var(--hlx-surface-2);border:1px solid var(--line-2);color:var(--muted);border-radius:999px}
[data-template="helix"] .form-step__bubble.is-active{background:var(--brand);color:#070a14;border-color:var(--brand)}
[data-template="helix"] .file-drop{background:var(--bg);border:1.5px dashed var(--line-2);border-radius:14px;color:var(--ink-2)}
[data-template="helix"] .file-drop:hover,[data-template="helix"] .file-drop.is-drag{border-color:var(--brand);background:rgba(var(--brand-rgb),.07);color:#cdd6ff}
[data-template="helix"] .postal-check{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:18px;box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .postal-check__title{color:var(--ink)}
[data-template="helix"] .postal-check__sub{color:var(--muted)}
[data-template="helix"] .postal-check__pin{background:rgba(var(--brand-rgb),.16);color:#cdd6ff;border-radius:12px}
[data-template="helix"] .review-card,[data-template="helix"] .reviews-carousel__card{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:18px;color:var(--ink-2);box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .review-card blockquote,[data-template="helix"] .review-card__author,[data-template="helix"] .case-card__quote{color:var(--ink)}
[data-template="helix"] .review-card__source,[data-template="helix"] .reviews-source-label{color:var(--muted)}
[data-template="helix"] .review-card__stars,[data-template="helix"] .reviews-carousel__card .stars{color:var(--star)}
[data-template="helix"] .trusted{background:var(--bg-soft);border-block:1px solid var(--line)}
[data-template="helix"] .trusted__label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:12px}
[data-template="helix"] .trusted__row svg{filter:brightness(0) invert(1);opacity:.62}
[data-template="helix"] .trusted__google-rating,[data-template="helix"] .trusted__google-score{color:var(--ink)}
[data-template="helix"] .trusted__google-sub{color:var(--muted)}
[data-template="helix"] .trusted__google-rating .stars,[data-template="helix"] .trusted__google-rating svg{color:var(--star)}
[data-template="helix"] .process__step{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:16px;box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .process__step h3{color:var(--ink)}
[data-template="helix"] .process__step p{color:var(--muted)}
[data-template="helix"] .process__check{background:linear-gradient(160deg,rgba(var(--brand-rgb),.3),rgba(var(--brand-rgb),.12));color:#dbe2ff;border:1px solid rgba(var(--brand-rgb),.4);box-shadow:0 8px 16px -8px rgba(var(--brand-rgb),.7)}
[data-template="helix"] .cta-strip{background:linear-gradient(135deg,var(--hlx-surface-2) 0%,var(--bg) 100%);border:1px solid rgba(var(--brand-rgb),.35);border-radius:22px;position:relative;overflow:hidden;box-shadow:var(--hlx-elev-2)}
[data-template="helix"] .cta-strip::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 140% at 0% 0%,rgba(var(--brand-rgb),.28) 0%,transparent 60%)}
[data-template="helix"] .cta-strip h2{color:var(--ink);position:relative}
[data-template="helix"] .cta-strip p{color:var(--ink-2);position:relative}
[data-template="helix"] .cta-strip .btn--primary{background:var(--brand);color:#070a14;border-color:var(--brand)}
[data-template="helix"] .cta-strip .btn--ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line-2)}
[data-template="helix"] .btn--primary{background:linear-gradient(180deg,var(--brand) 0%,var(--brand-deep) 100%);color:#070a14;border:1px solid var(--brand);font-weight:700;box-shadow:0 10px 24px -10px rgba(var(--brand-rgb),.7),inset 0 1px 0 rgba(255,255,255,.3)}
[data-template="helix"] .btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(var(--brand-rgb),.8),inset 0 1px 0 rgba(255,255,255,.4)}
[data-template="helix"] .btn--ghost{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--line-2);font-weight:600}
[data-template="helix"] .btn--ghost:hover{background:rgba(var(--brand-rgb),.12);border-color:rgba(var(--brand-rgb),.5);color:#cdd6ff}
[data-template="helix"] .price-table{color:var(--ink-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .price-table th{background:var(--hlx-surface-2);color:var(--ink);text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;border-bottom:1px solid var(--line)}
[data-template="helix"] .price-table td{border-bottom:1px solid var(--line)}
[data-template="helix"] .price-table .num{color:#cdd6ff;font-weight:700}
[data-template="helix"] .sitemap-block{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:16px;box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .sitemap-block h3{color:var(--ink)}
[data-template="helix"] .sitemap-block a{color:var(--ink-2)}
[data-template="helix"] .sitemap-block a:hover{color:var(--brand)}
[data-template="helix"] .sitemap-block__icon{background:rgba(var(--brand-rgb),.14);color:#cdd6ff;border-radius:10px}
[data-template="helix"] .pagination__btn,[data-template="helix"] .article-filter__chip{background:var(--hlx-surface);border:1px solid var(--line-2);color:var(--ink-2);border-radius:999px}
[data-template="helix"] .pagination__btn:hover,[data-template="helix"] .article-filter__chip:hover,[data-template="helix"] .pagination__btn.is-active,[data-template="helix"] .article-filter__chip.is-active{border-color:var(--brand);color:#cdd6ff;background:rgba(var(--brand-rgb),.12)}
[data-template="helix"] .card-scroller__nav,[data-template="helix"] .reviews-carousel__nav,[data-template="helix"] .hero-carousel__nav{background:var(--hlx-surface);border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .contact-hero{background:linear-gradient(180deg,var(--hlx-surface) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
[data-template="helix"] .contact-method{background:linear-gradient(180deg,var(--hlx-raise) 0%,var(--hlx-surface) 100%);border:1px solid var(--line);border-radius:16px;box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .contact-method__body,[data-template="helix"] .contact-hero__lead{color:var(--ink-2)}
[data-template="helix"] .contact-method__icon{background:rgba(var(--brand-rgb),.14);color:#cdd6ff;border-radius:12px}
[data-template="helix"] .addr-ac__list{background:var(--hlx-surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--hlx-elev-1)}
[data-template="helix"] .addr-ac__item{color:var(--ink-2)}
[data-template="helix"] .addr-ac__item.is-active,[data-template="helix"] .addr-ac__item:hover{background:rgba(var(--brand-rgb),.14);color:#cdd6ff}
[data-template="helix"] .mobile-call-bar{background:rgba(10,12,20,.94);border-top:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-template="helix"] .mobile-call-bar a,[data-template="helix"] .mobile-call-bar .quote,[data-template="helix"] .mobile-call-bar__quote{color:var(--ink)}
[data-template="helix"] .mobile-call-bar .btn--primary,[data-template="helix"] .mobile-call-bar .quote{background:linear-gradient(180deg,var(--brand) 0%,var(--brand-deep) 100%);color:#070a14;border-color:var(--brand)}

/* — Animation (helix) — */
@media (prefers-reduced-motion: no-preference){
  @keyframes hlx-rise{from{opacity:0;transform:translateY(20px) perspective(1000px) rotateX(4deg)}to{opacity:1;transform:none}}
  @keyframes hlx-sheen{from{background-position:-160% 0}to{background-position:260% 0}}

  [data-template="helix"] .reveal{opacity:0}
  [data-template="helix"] .reveal.is-visible{animation:hlx-rise .6s cubic-bezier(.22,.61,.36,1) forwards}
  [data-template="helix"] .card,[data-template="helix"] .article-card,[data-template="helix"] .article-featured,[data-template="helix"] .other-services__card,[data-template="helix"] .area-service-card,[data-template="helix"] .related-link{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .3s ease}
  [data-template="helix"] .btn--primary,[data-template="helix"] .btn--ghost{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease}
  [data-template="helix"] .card__icon,[data-template="helix"] .process__check{transition:transform .3s ease}
  [data-template="helix"] .card:hover .card__icon{transform:translateY(-2px) rotate(-4deg)}
  [data-template="helix"] .field input:focus,[data-template="helix"] .field textarea:focus,[data-template="helix"] .field select:focus{transition:box-shadow .2s ease,border-color .2s ease}
  [data-template="helix"] .cta-strip::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);background-size:200% 100%;animation:hlx-sheen 7s ease-in-out infinite}
}


/* ═══ Helix — CHROME ═══ */
/* ════════════════════════════════════════════════════════════════════
   HELIX — exklusiv "depth / 3D-layered" tech-mall. Klassprefix .hlx-.
   Endast chrome (header/footer/home). Färg & typsnitt via CSS-variabler
   (--brand, --brand-rgb, --brand-deep, --ink, --ff-heading) → följer
   kundens tema. Mörk grund; alla ytor ger ljus text för säker kontrast.
   ════════════════════════════════════════════════════════════════════ */

/* ── HEADER ───────────────────────────────────────────────────────── */
.hlx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 68px;
  background: rgba(10, 12, 20, 0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.hlx-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logga — staplad "layer-mark" + wordmark */
.hlx-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.hlx-logo__mark {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--brand, #5b7cfa), var(--brand-deep, #3a57d6));
  box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb, 91 124 250), 0.8);
  flex: none;
}
.hlx-logo__mark::before,
.hlx-logo__mark::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}
.hlx-logo__mark::before { top: 9px; opacity: 0.9; }
.hlx-logo__mark::after { top: 14px; opacity: 0.55; box-shadow: 0 4px 0 rgba(255, 255, 255, 0.3); }
.hlx-logo__name {
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Nav — mitten, glidande underline-pill vid hover */
.hlx-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.hlx-nav__link {
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  color: #b3bbcf;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.18s ease;
}
.hlx-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--brand, #5b7cfa);
  transform: translateX(-50%);
  transition: width 0.22s ease;
}
.hlx-nav__link:hover { color: #fff; }
.hlx-nav__link:hover::after { width: 6px; }

/* Höger — telefon + primär CTA + burger */
.hlx-header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hlx-header__phone {
  font-weight: 700;
  font-size: 14.5px;
  color: #e9edf8;
  text-decoration: none;
  transition: color 0.18s ease;
}
.hlx-header__phone:hover { color: var(--brand, #5b7cfa); }
.hlx-header__cta {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 10px 20px;
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  color: #070a14;
  background: linear-gradient(180deg, var(--brand, #5b7cfa), var(--brand-deep, #3a57d6));
  border: 1px solid var(--brand, #5b7cfa);
  box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb, 91 124 250), 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hlx-header__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(var(--brand-rgb, 91 124 250), 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Burger — döljs på desktop */
.hlx-burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.15));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #e9edf8;
  cursor: pointer;
}
.hlx-burger > svg { display: none; }
.hlx-burger__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.hlx-burger__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.hlx-burger[aria-expanded="true"] .hlx-burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hlx-burger[aria-expanded="true"] .hlx-burger__bars span:nth-child(2) { opacity: 0; }
.hlx-burger[aria-expanded="true"] .hlx-burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer — helskärms-overlay */
.hlx-drawer {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(8, 10, 16, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-y: auto;
}
.hlx-drawer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 28px 40px;
  display: flex;
  flex-direction: column;
}
.hlx-drawer__link {
  display: block;
  padding: 16px 0;
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 700;
  font-size: 18px;
  color: #e9edf8;
  text-decoration: none;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.hlx-drawer__link:hover { color: var(--brand, #5b7cfa); }
.hlx-drawer__phone {
  display: block;
  padding: 22px 0 14px;
  font-weight: 800;
  font-size: 20px;
  color: var(--brand, #5b7cfa);
  text-decoration: none;
}
.hlx-drawer__cta {
  display: inline-flex;
  justify-content: center;
  margin-top: 6px;
  border-radius: 12px;
  padding: 14px 24px;
  font-weight: 700;
  text-decoration: none;
  color: #070a14;
  background: linear-gradient(180deg, var(--brand, #5b7cfa), var(--brand-deep, #3a57d6));
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hlx-hero {
  position: relative;
  overflow: hidden;
  padding: 150px 28px 100px;
  background: var(--bg, #0a0c14);
  background-image:
    radial-gradient(60% 50% at 88% 0%, rgba(var(--brand-rgb, 91 124 250), 0.16) 0%, transparent 60%),
    radial-gradient(50% 45% at 0% 18%, rgba(var(--brand-rgb, 91 124 250), 0.08) 0%, transparent 55%),
    radial-gradient(80% 60% at 50% 110%, rgba(var(--brand-rgb, 91 124 250), 0.05) 0%, transparent 60%);
}
.hlx-hero__video,
.hlx-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hlx-hero__video { opacity: 0.35; }
.hlx-hero__poster {
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}
.hlx-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 20, 0.4) 0%,
    rgba(10, 12, 20, 0.85) 70%,
    var(--bg, #0a0c14) 100%
  );
}

/* Roterande dubbel-spiral (signatur-dekor) */
.hlx-hero__helix {
  position: absolute;
  top: 50%;
  right: -60px;
  width: 460px;
  height: 460px;
  z-index: 1;
  transform: translateY(-50%);
  opacity: 0.7;
  pointer-events: none;
}
.hlx-helix-strand {
  position: absolute;
  inset: 0;
  animation: hlx-helix-spin 40s linear infinite;
}
.hlx-helix-strand--b { animation-direction: reverse; }
.hlx-helix-strand i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb, 91 124 250), 0.3);
  transform:
    rotate(calc(var(--i) * 22.5deg))
    translateX(190px)
    translateY(calc(sin(var(--i) * 0.7) * 60px));
}
.hlx-helix-strand--a i { background: rgba(var(--brand-rgb, 91 124 250), 0.32); }
.hlx-helix-strand--b i {
  width: 6px;
  height: 6px;
  margin: -3px;
  background: rgba(205, 214, 255, 0.22);
}
@keyframes hlx-helix-spin {
  to { transform: rotate(360deg); }
}

.hlx-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hlx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--brand-rgb, 91 124 250), 0.12);
  border: 1px solid rgba(var(--brand-rgb, 91 124 250), 0.32);
  color: #cdd6ff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 11.5px;
  border-radius: 999px;
  padding: 6px 14px;
}
.hlx-hero__title {
  margin: 18px 0 0;
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: #fff;
}
.hlx-hero__title em {
  font-style: normal;
  background: linear-gradient(110deg, var(--brand, #5b7cfa), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hlx-hero__title strong { color: var(--brand, #5b7cfa); font-weight: 800; }
.hlx-hero__sub {
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: #b3bbcf;
  max-width: 560px;
}
.hlx-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.hlx-hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: #cdd6ff;
  font-size: 14.5px;
  font-weight: 600;
}
.hlx-hero__trust .hero__stars { color: var(--star, #f5c518); display: inline-flex; gap: 1px; }
.hlx-hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  opacity: 0.8;
}
.hlx-hero__logos img { filter: brightness(0) invert(1); opacity: 0.7; }
.hlx-hero__postal { margin-top: 30px; max-width: 460px; }

/* Signatur: perspektiv-stack med flytande kort */
.hlx-hero__stack {
  perspective: 1400px;
  display: flex;
  justify-content: center;
}
.hlx-stack {
  position: relative;
  width: 340px;
  height: 380px;
  transform-style: preserve-3d;
}
.hlx-stack__card {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--hlx-raise, #1c2236) 0%, var(--hlx-surface, #121624) 100%);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 26px 60px -20px rgba(0, 0, 0, 0.85);
  transform: rotateY(-12deg) rotateX(6deg);
  animation: hlx-float 6s ease-in-out infinite;
}
.hlx-stack__card--0 {
  top: 0;
  z-index: 3;
  transform: translateZ(60px) rotateY(-12deg) rotateX(6deg);
  border-color: rgba(var(--brand-rgb, 91 124 250), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb, 91 124 250), 0.4),
    0 30px 70px -22px rgba(var(--brand-rgb, 91 124 250), 0.5);
}
.hlx-stack__card--1 {
  top: 70px;
  left: 36px;
  right: -28px;
  z-index: 2;
  transform: translateZ(20px) rotateY(-12deg) rotateX(6deg);
  animation-delay: 0.8s;
  opacity: 0.96;
}
.hlx-stack__card--2 {
  top: 150px;
  left: 64px;
  right: -54px;
  z-index: 1;
  transform: translateZ(-20px) rotateY(-12deg) rotateX(6deg);
  animation-delay: 1.6s;
  opacity: 0.9;
}
.hlx-stack__head { display: flex; align-items: center; gap: 12px; }
.hlx-stack__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
  color: #dbe2ff;
  background: linear-gradient(160deg, rgba(var(--brand-rgb, 91 124 250), 0.3), rgba(var(--brand-rgb, 91 124 250), 0.1));
  border: 1px solid rgba(var(--brand-rgb, 91 124 250), 0.4);
}
.hlx-stack__title {
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.hlx-stack__media {
  display: block;
  height: 120px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.hlx-stack__rows { display: flex; flex-direction: column; gap: 9px; }
.hlx-stack__rows span {
  display: block;
  height: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.hlx-stack__rows span:nth-child(1) { width: 90%; }
.hlx-stack__rows span:nth-child(2) { width: 70%; }
.hlx-stack__rows span:nth-child(3) { width: 80%; }
.hlx-stack__price { color: #cdd6ff; font-weight: 700; font-size: 15px; }
@keyframes hlx-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

/* ── RAIL — fakta/nyckeltal under hero ─────────────────────────────── */
.hlx-rail {
  border-block: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  background: var(--bg-soft, #10131f);
}
.hlx-rail__track {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
}
.hlx-rail__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 18px 26px;
  color: #8a93a9;
  font-size: 14px;
  font-weight: 600;
  border-left: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.hlx-rail__item:first-child { border-left: 0; padding-left: 0; }
.hlx-rail__item svg { color: var(--brand, #5b7cfa); opacity: 0.85; }

/* ── SEKTIONER ────────────────────────────────────────────────────── */
.hlx-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px 28px;
}
.hlx-section--trust { padding-top: 56px; padding-bottom: 56px; }
.hlx-section--about .hlx-section__intro { font-size: 19px; }
.hlx-section__head {
  max-width: 720px;
  margin: 0 0 48px;
}
.hlx-section__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--brand, #5b7cfa);
}
.hlx-section__title {
  margin: 12px 0 0;
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.03em;
  color: #fff;
}
.hlx-section__intro {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: #b3bbcf;
}

/* TJÄNSTE-KORT — rutnät (innerCss lyfter .card till djup-look) */
.hlx-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.hlx-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px;
}
.hlx-card .card__image {
  display: block;
  width: calc(100% + 52px);
  margin: -26px -26px 6px;
  height: 180px;
  border-radius: 18px 18px 0 0;
  background-size: cover;
  background-position: center;
}
.hlx-card h3 {
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 700;
  font-size: 19px;
}
.hlx-card .card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

/* USP — fördels-kort */
.hlx-usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.hlx-usp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}
.hlx-usp h3 {
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 700;
  font-size: 18px;
}

/* ── STATS-BAND ───────────────────────────────────────────────────── */
.hlx-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hlx-surface-2, #171c2e) 0%, var(--bg, #0a0c14) 100%);
  border-block: 1px solid rgba(var(--brand-rgb, 91 124 250), 0.25);
}
.hlx-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 140% at 0% 0%, rgba(var(--brand-rgb, 91 124 250), 0.2) 0%, transparent 60%);
}
.hlx-band__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  text-align: center;
}
.hlx-stat__num {
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.03em;
  background: linear-gradient(110deg, var(--brand, #5b7cfa), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand, #5b7cfa);
}
.hlx-stat__lab {
  margin-top: 6px;
  color: #b3bbcf;
  font-size: 14.5px;
  font-weight: 600;
}

/* ── PROCESS-STEG ─────────────────────────────────────────────────── */
.hlx-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hlx-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
}
.hlx-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 800;
  font-size: 19px;
}
.hlx-step h3 {
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 700;
  font-size: 18px;
}

/* ── FOOTER ───────────────────────────────────────────────────────── */
.hlx-footer {
  position: relative;
  margin-top: 80px;
  background: #07090f;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.hlx-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb, 91 124 250), 0.6), transparent);
}
.hlx-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 28px 40px;
}
.hlx-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 56px;
}
.hlx-footer__lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hlx-footer__mark {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  flex: none;
  background: linear-gradient(160deg, var(--brand, #5b7cfa), var(--brand-deep, #3a57d6));
  box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb, 91 124 250), 0.8);
}
.hlx-footer__mark::before,
.hlx-footer__mark::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
}
.hlx-footer__mark::before { top: 15px; }
.hlx-footer__mark::after { top: 23px; opacity: 0.55; }
.hlx-footer__name {
  font-family: var(--ff-heading, system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  color: #fff;
}
.hlx-footer__blurb {
  margin: 20px 0 0;
  color: #7d859c;
  font-size: 15px;
  line-height: 1.6;
  max-width: 360px;
}
.hlx-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
.hlx-footer__contact a,
.hlx-footer__addr {
  color: #b3bbcf;
  font-size: 14.5px;
  text-decoration: none;
  line-height: 1.5;
}
.hlx-footer__contact a:hover { color: var(--brand, #5b7cfa); }
.hlx-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.hlx-footer__col { display: flex; flex-direction: column; }
.hlx-footer__col-head {
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
  color: #7d859c;
}
.hlx-footer__link {
  position: relative;
  padding: 6px 0 6px 0;
  color: #b3bbcf;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.18s ease, padding 0.18s ease;
}
.hlx-footer__link::before {
  content: "→ ";
  opacity: 0;
  color: var(--brand, #5b7cfa);
  transition: opacity 0.18s ease;
}
.hlx-footer__link:hover { color: var(--brand, #5b7cfa); padding-left: 4px; }
.hlx-footer__link:hover::before { opacity: 1; }
.hlx-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.hlx-footer__copy { color: #7d859c; font-size: 13.5px; }
.hlx-footer__meta { display: flex; flex-wrap: wrap; gap: 12px; }
.hlx-footer__tag {
  padding: 5px 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  color: #8a93a9;
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.hlx-footer__tag:hover { color: #cdd6ff; border-color: rgba(var(--brand-rgb, 91 124 250), 0.5); }

/* ── RESPONSIVT ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hlx-nav { display: none; }
  .hlx-burger { display: inline-flex; }
  .hlx-hero { padding: 120px 22px 70px; }
  .hlx-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hlx-hero__helix { opacity: 0.4; right: -160px; }
  .hlx-hero__stack { order: 2; }
  .hlx-stack { transform: scale(0.92); }
  .hlx-stack__card { transform: rotateY(-7deg) rotateX(3deg); }
  .hlx-stack__card--0 { transform: translateZ(40px) rotateY(-7deg) rotateX(3deg); }
  .hlx-stack__card--1 { transform: translateZ(14px) rotateY(-7deg) rotateX(3deg); }
  .hlx-stack__card--2 { transform: translateZ(-14px) rotateY(-7deg) rotateX(3deg); }
  .hlx-cards,
  .hlx-usps { grid-template-columns: repeat(2, 1fr); }
  .hlx-steps { grid-template-columns: repeat(2, 1fr); }
  .hlx-footer__top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .hlx-header__cta { display: none; }
  .hlx-header__inner { padding: 0 18px; gap: 14px; }
  .hlx-hero { padding: 108px 18px 60px; }
  .hlx-hero__title { font-size: clamp(34px, 9vw, 48px); }
  .hlx-hero__stack { display: none; }
  .hlx-section { padding: 64px 18px; }
  .hlx-cards,
  .hlx-usps,
  .hlx-steps { grid-template-columns: 1fr; }
  .hlx-rail__item:first-child { padding-left: 0; }
  .hlx-rail__item { padding: 14px 18px; border-left: 0; }
  .hlx-footer__cols { grid-template-columns: 1fr 1fr; }
  .hlx-footer__inner { padding: 60px 18px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hlx-helix-strand,
  .hlx-stack__card { animation: none; }
}



/* ═══ QA-FIXAR (helix) ═══ */
/* [hög] html[data-template="helix"] .btn--primary, html[data-te */
html[data-template="helix"]{--hlx-on-brand:#070a14}html[data-template="helix"] .btn--primary,html[data-template="helix"] .cta-strip .btn--primary,html[data-template="helix"] .article-badge,html[data-template="helix"] .form-step__bubble.is-active,html[data-template="helix"] .mobile-call-bar .btn--primary,html[data-template="helix"] .mobile-call-bar .quote{color:var(--hlx-on-brand)}/* Satt --hlx-on-brand:#fff i temat nar kunden valjer en mork --brand. Lagg ev. en latt skugga sa texten halls lasbar pa bada hallen: */html[data-template="helix"] .btn--primary,html[data-template="helix"] .cta-strip .btn--primary{text-shadow:0 1px 1px rgba(0,0,0,.18)}
/* [hög] html[data-template="helix"] .hlx-header__cta, html[data */
html[data-template="helix"] .hlx-header__cta,html[data-template="helix"] .hlx-drawer__cta{color:var(--hlx-on-brand,#070a14)}
/* [låg] html[data-template="helix"] .cta-strip .btn--ghost */
html[data-template="helix"] .cta-strip .btn--ghost{color:var(--ink);border-color:var(--line-2)}

/* ═══ ANIMATIONS-FINPUTSNING (helix) — 6 loopande (infinite) animationer: 2x hlx-helix-spin (strand a+b, 40s), 3x hlx-f ═══ */
@media (prefers-reduced-motion: no-preference){
  /* Behall EN signatur: 3D-kort-floaten (lugnare, 8s) — men bara ett kort flyter sa det inte blir tre osynkade rorelser */
  html[data-template="helix"] .hlx-stack__card{animation-duration:8s}
  html[data-template="helix"] .hlx-stack__card--1,
  html[data-template="helix"] .hlx-stack__card--2{animation:none}
  /* Helix-dekorn: en strand racker som signatur, langsammare; ta bort dubbel-spinnet */
  html[data-template="helix"] .hlx-helix-strand--b{animation:none}
  html[data-template="helix"] .hlx-helix-strand--a{animation-duration:60s}
  /* Sheen-loopen pa cta-strip animerar background-position (icke-compositor) oandligt — ta bort */
  html[data-template="helix"] .cta-strip::after{animation:none;background:none}
}
@media (prefers-reduced-motion: reduce){
  html[data-template="helix"] .hlx-helix-strand,
  html[data-template="helix"] .hlx-stack__card,
  html[data-template="helix"] .cta-strip::after,
  html[data-template="helix"] .reveal,
  html[data-template="helix"] .reveal.is-visible{animation:none!important}
  html[data-template="helix"] .reveal{opacity:1!important}
}