.film-row {
 display: grid;
 grid-template-columns: minmax(300px, 4fr) 7fr;
 gap: 48px;
 align-items: center;
}
.film-spegel {
 grid-template-columns: 7fr minmax(300px, 4fr);
}
.film-spegel .film-copy {
 order: 1;
}
.film-copy h2,
.film-copy h3 {
 margin: 0 0 28px;
 font-size: clamp(32px, 3.6vw, 48px);
 line-height: 1.1;
 letter-spacing: -0.03em;
 font-weight: 700;
 color: var(--ink);
}
.film-copy [hidden] {
 display: none;
}
.film-checks {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 16px;
}
.film-checks li {
 display: grid;
 grid-template-columns: 22px 1fr;
 gap: 12px;
 align-items: start;
 font-size: 17px;
 line-height: 1.5;
 color: var(--ink);
}
.film-checks svg {
 width: 20px;
 height: 20px;
 margin-top: 3px;
 color: var(--brand-hover);
}
.film-tile {
 width: 100%;
 min-width: 0;
 aspect-ratio: 1;
 max-width: calc(100vh - 110px);
 justify-self: end;
 border-radius: 18px;
 overflow: hidden;
 background: #143129;
 box-shadow:
  0 0 0 1px var(--line),
  0 24px 60px rgb(23 63 51 / 16%);
}
.film-spegel .film-tile {
 justify-self: start;
}
.film-tile video {
 display: block;
 width: 100%;
 height: 100%;
}
.film-tabs {
 display: flex;
 gap: 8px;
 margin-bottom: 32px;
 overflow-x: auto;
}
.film-tabs button {
 flex: none;
 min-height: 44px;
 padding: 0 18px;
 cursor: pointer;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--surface);
 color: var(--ink);
 font: 600 15px var(--font);
}
.film-tabs button[aria-pressed='true'] {
 background: var(--brand);
 border-color: var(--brand);
 color: #fff;
}
@media (max-width: 820px) {
 .film-row,
 .film-spegel {
  grid-template-columns: 1fr;
  gap: 24px;
 }
 .film-spegel .film-copy {
  order: 0;
 }
 .film-flode .film-tile {
  order: -1;
 }
}
.kommande {
 display: inline-block;
 margin-left: 6px;
 font-size: 10px;
 font-weight: 500;
 letter-spacing: 0;
 text-transform: none;
 color: var(--muted);
 vertical-align: middle;
}
html {
 --kommande: 'kommande';
}
html[lang='en'] {
 --kommande: 'coming';
}
a[href='/synlighet']:not(.feature-card)::after,
a[href='/marknadsforing']:not(.feature-card)::after,
a[href='/omdomen']:not(.feature-card)::after,
a[href='/ai-automatisering']:not(.feature-card)::after,
a[href='/byggkalkyl']:not(.feature-card)::after,
.feature-card[href='/synlighet'] h3::after,
.feature-card[href='/marknadsforing'] h3::after,
.feature-card[href='/omdomen'] h3::after,
.feature-card[href='/ai-automatisering'] h3::after,
.feature-card[href='/byggkalkyl'] h3::after {
 content: var(--kommande);
 margin-left: 6px;
 font-size: 10px;
 font-weight: 500;
 color: var(--muted);
}
.pris-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
 padding-bottom: 48px;
}
.pris-card {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: 28px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: var(--surface);
}
.pris-card h2 {
 margin: 0;
 font-size: 26px;
}
.pris-who,
.pris-year {
 margin: 0;
 color: var(--muted);
 font-size: 15px;
}
.pris-price {
 margin: 6px 0 0;
 font-size: 18px;
}
.pris-price strong {
 font-size: 44px;
 letter-spacing: -0.03em;
}
.pris-card .film-checks {
 margin-top: 12px;
}
.pris-card .film-checks li {
 font-size: 15px;
}
.lead-falla {
 position: absolute;
 left: -9999px;
 width: 1px;
 height: 1px;
 opacity: 0;
}
.lead-fel {
 color: #a83b31;
 font-weight: 600;
}
.lead-not {
 color: var(--muted);
 font-size: 13px;
}
.lead-tack {
 padding: 20px;
 border-radius: 12px;
 background: var(--brand-soft);
}
.lead-tack p {
 margin: 6px 0 0;
}
@media (max-width: 820px) {
 .pris-grid {
  grid-template-columns: 1fr;
 }
}

/* Färgerna ur filmernas bakgrund: mjukt och sparsamt. */
:root {
 --kvota-gradient: linear-gradient(95deg, #f0a05f 0%, #d95b3d 42%, #2f6a58 100%);
}
#site {
 overflow-x: clip;
}
.home-hero {
 position: relative;
 isolation: isolate;
}
.home-hero::before {
 content: '';
 position: absolute;
 z-index: -1;
 top: -90px;
 bottom: -40px;
 left: 50%;
 width: 100vw;
 transform: translateX(-50%);
 pointer-events: none;
 background:
  radial-gradient(38% 55% at 26% 32%, rgb(240 160 95 / 30%), transparent 72%),
  radial-gradient(34% 50% at 74% 26%, rgb(217 91 61 / 15%), transparent 72%),
  radial-gradient(42% 52% at 58% 74%, rgb(47 106 88 / 17%), transparent 72%);
}
.home-hero h1 span {
 background: var(--kvota-gradient);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}
.home-hero .eyebrow i {
 background: var(--kvota-gradient);
}
.closing {
 background:
  linear-gradient(rgb(20 49 41 / 24%), rgb(20 49 41 / 52%)),
  url('/assets/vagg.jpg') center / cover;
}
.feature-card,
.pris-card {
 position: relative;
 overflow: hidden;
}
.feature-card::before,
.pris-card::before {
 content: '';
 position: absolute;
 inset: 0 0 auto;
 height: 3px;
 background: var(--kvota-gradient);
}
.feature-card::before {
 opacity: 0;
 transition: opacity 0.2s;
}
.feature-card:hover::before {
 opacity: 1;
}
.site-footer {
 border-top: 0;
}