/* SEO – Google-sök, AI-sök och en tydlig väg från fråga till affär. */
.seo-service-page {
  --google-blue: #4285f4;
  --google-red: #ea4335;
  --google-yellow: #fbbc05;
  --google-green: #34a853;
  background: #f7f7f5;
}

.seo-service-page h1,
.seo-service-page h2,
.seo-service-page h3 { font-weight: 430; }
.seo-service-page h1 em,
.seo-service-page h2 em { font-weight: 370; }

.seo-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--hero-space-top)) 0 var(--hero-space-bottom);
  background:
    radial-gradient(circle at 4% 85%, rgba(52,168,83,.08), transparent 25rem),
    radial-gradient(circle at 92% 18%, rgba(66,133,244,.08), transparent 28rem),
    #fff;
  color: var(--coal);
  isolation: isolate;
}
.seo-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(30,91,90,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,91,90,.035) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
  opacity: .6;
  mask-image: linear-gradient(90deg, #000, transparent 68%);
}
.seo-hero::after {
  position: absolute;
  z-index: -1;
  top: -22rem;
  left: -18rem;
  width: 45rem;
  aspect-ratio: 1;
  border: 1px solid rgba(66,133,244,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(234,67,53,.018), 0 0 0 10rem rgba(251,188,5,.014);
  content: "";
}
.seo-hero-grid {
  display: grid;
  min-height: clamp(40rem, 67vh, 48rem);
  align-items: center;
  grid-template-columns: minmax(25rem,.88fr) minmax(0,1.12fr);
  gap: clamp(3rem,7vw,8rem);
}
.seo-hero-copy h1 {
  max-width: 13.5ch;
  margin: 0 0 1.55rem;
  color: var(--coal);
  font-size: var(--type-page-title);
  letter-spacing: -.055em;
  line-height: 1.01;
}
.seo-hero-copy h1 em { color: var(--deep); }
.seo-hero-copy > p {
  max-width: 47rem;
  margin: 0;
  color: var(--slate);
  font-size: var(--text-lead);
  line-height: 1.7;
}
.seo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2rem; }
.seo-hero-actions .button { border-color: var(--deep); background: var(--deep); color: #fff; }
.seo-hero-actions .button:hover { border-color: var(--coal); background: var(--coal); }
.seo-hero-actions > a { border-bottom: 1px solid rgba(30,91,90,.4); color: var(--deep); font-size: var(--text-action); font-weight: 600; }

.seo-query-field {
  position: relative;
  padding: clamp(1.15rem,2vw,1.6rem);
  border: 1px solid rgba(30,31,32,.13);
  border-radius: 1.7rem;
  background: rgba(255,255,255,.96);
  box-shadow: 0 2rem 5rem rgba(30,31,32,.12);
  transform: rotate(-1deg);
}
.seo-query-field::after {
  position: absolute;
  right: 1.6rem;
  bottom: -1rem;
  width: 5.4rem;
  height: .42rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--google-blue) 0 25%, var(--google-red) 25% 50%, var(--google-yellow) 50% 75%, var(--google-green) 75%);
  content: "";
}
.seo-google-mark { display: flex; align-items: center; margin: .15rem .35rem 1.1rem; gap: .38rem; }
.seo-google-mark i { width: .56rem; aspect-ratio: 1; border-radius: 50%; background: var(--google-blue); }
.seo-google-mark i:nth-child(2) { background: var(--google-red); }
.seo-google-mark i:nth-child(3) { background: var(--google-yellow); }
.seo-google-mark i:nth-child(4) { background: var(--google-green); }
.seo-google-mark span { margin-left: .35rem; color: #5f6368; font-size: var(--text-label); font-weight: 500; }
.seo-query-input {
  display: grid;
  min-height: 4.35rem;
  align-items: center;
  padding: .8rem 1.15rem;
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .25rem .8rem rgba(60,64,67,.08);
  grid-template-columns: 1.2rem 1fr auto;
  gap: .85rem;
}
.seo-query-input i { position: relative; width: .92rem; aspect-ratio: 1; border: 2px solid var(--google-blue); border-radius: 50%; }
.seo-query-input i::after { position: absolute; right: -.28rem; bottom: -.2rem; width: .4rem; height: 2px; background: var(--google-blue); content: ""; transform: rotate(45deg); }
.seo-query-input span { color: #202124; font-size: clamp(.82rem,1vw,.97rem); line-height: 1.45; }
.seo-query-input b { color: var(--google-blue); font-family: var(--font-mono); font-weight: 400; }
.seo-ai-overview { margin-top: 1.15rem; padding: 1.15rem; border: 1px solid #e0e4e7; border-radius: 1.2rem; background: linear-gradient(135deg, rgba(66,133,244,.045), rgba(52,168,83,.035)); }
.seo-ai-overview-title { display: flex; align-items: center; gap: .6rem; }
.seo-ai-overview-title span { display: grid; width: 1.8rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: linear-gradient(135deg,var(--google-blue),var(--google-red)); color: #fff; font-size: .82rem; }
.seo-ai-overview-title strong { color: #202124; font-size: .92rem; font-weight: 500; }
.seo-ai-overview > p { margin: .8rem 0 0; color: #4f5459; font-size: .82rem; line-height: 1.6; }
.seo-ai-source-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.seo-ai-source-row span { padding: .35rem .55rem; border: 1px solid #dfe3e7; border-radius: 999px; background: #fff; color: #5f6368; font-size: .68rem; }
.seo-query-field ol { display: grid; margin: .8rem 0 0; padding: 0; list-style: none; gap: 0; }
.seo-query-field li { display: grid; align-items: start; padding: .9rem .4rem; border-bottom: 1px solid #e7e8ea; grid-template-columns: .65rem 1fr; gap: .7rem; }
.seo-query-field li:last-child { border-bottom: 0; }
.seo-query-field li > span { width: .58rem; aspect-ratio: 1; margin-top: .35rem; border-radius: 50%; background: var(--google-blue); }
.seo-query-field li:nth-child(2) > span { background: var(--google-green); }
.seo-query-field li div { min-width: 0; }
.seo-query-field strong { display: block; color: #202124; font-size: .84rem; font-weight: 500; }
.seo-query-field small { display: block; margin-top: .2rem; color: #6e7378; font-size: .73rem; line-height: 1.45; }

.seo-intent { overflow: hidden; padding: var(--section-space) 0 0; background: #f8f6f2; }
.seo-intent-heading { display: grid; align-items: end; grid-template-columns: minmax(0,1fr) minmax(20rem,.52fr); gap: clamp(3rem,8vw,9rem); }
.seo-intent-heading h2 { max-width: 15ch; margin: 0; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -.045em; }
.seo-intent-heading h2 em { color: var(--deep); }
.seo-intent-heading p { max-width: 40rem; margin: 0; color: var(--slate); font-size: var(--text-lead); line-height: 1.7; }
.seo-intent-stream { display: flex; width: max-content; margin-top: var(--content-space); padding: 1.35rem 0; border-block: 1px solid rgba(30,91,90,.16); animation: seo-stream 34s linear infinite; }
.seo-intent-stream span { padding: 0 clamp(2rem,5vw,5rem); border-right: 1px solid rgba(30,91,90,.16); color: rgba(30,91,90,.62); font-family: var(--font-mono); font-size: clamp(1rem,1.5vw,1.3rem); }
@keyframes seo-stream { to { transform: translateX(-18%); } }

.seo-ai-search { position: relative; overflow: hidden; padding: var(--section-space) 0; background: #edf1ef; }
.seo-ai-search::before { position: absolute; top: 0; right: 0; left: 0; height: .4rem; background: linear-gradient(90deg,var(--google-blue) 0 25%,var(--google-red) 25% 50%,var(--google-yellow) 50% 75%,var(--google-green) 75%); content: ""; opacity: .72; }
.seo-ai-grid { position: relative; }
.seo-ai-copy { display: grid; align-items: end; grid-template-columns: minmax(0,1fr) minmax(23rem,.62fr); gap: 1.25rem clamp(3rem,8vw,9rem); }
.seo-ai-copy h2 { max-width: 15ch; margin: 0; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -.045em; grid-row: span 2; }
.seo-ai-copy h2 em { color: var(--deep); }
.seo-ai-copy p { max-width: 42rem; margin: 0; color: var(--slate); line-height: 1.72; }
.seo-ai-copy p + p { margin-top: .3rem; }
.seo-ai-path { display: grid; margin-top: var(--content-space); align-items: stretch; grid-template-columns: minmax(0,.72fr) auto minmax(0,1.25fr) auto minmax(0,1fr); gap: clamp(.8rem,2vw,1.5rem); }
.seo-ai-path article { min-height: 14rem; padding: clamp(1.3rem,2vw,1.8rem); border: 1px solid rgba(30,91,90,.18); border-radius: 1.25rem; background: rgba(255,255,255,.68); }
.seo-ai-path article:nth-of-type(2) { background: #fff; box-shadow: 0 1.4rem 3.5rem rgba(30,31,32,.08); }
.seo-ai-path article > span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.seo-ai-path strong { display: block; margin-top: 2rem; font-size: var(--type-card-title-small); font-weight: 430; line-height: 1.35; }
.seo-ai-path p { margin: .8rem 0 0; color: var(--slate); font-size: var(--text-support); line-height: 1.6; }
.seo-ai-path > i { align-self: center; color: var(--deep); font-size: 1.5rem; font-style: normal; }
.seo-ai-principles { display: grid; margin-top: clamp(2rem,4vw,3.5rem); border-top: 1px solid rgba(30,91,90,.18); grid-template-columns: repeat(4,1fr); }
.seo-ai-principles > div { position: relative; padding: 1.5rem clamp(1rem,2vw,1.6rem) 0; border-right: 1px solid rgba(30,91,90,.18); }
.seo-ai-principles > div:first-child { padding-left: 0; }
.seo-ai-principles > div:last-child { border-right: 0; }
.seo-ai-principles span { display: block; width: 2.3rem; height: .28rem; margin-bottom: 1rem; border-radius: 999px; background: var(--google-blue); }
.seo-ai-principles > div:nth-child(2) span { background: var(--google-red); }
.seo-ai-principles > div:nth-child(3) span { background: var(--google-yellow); }
.seo-ai-principles > div:nth-child(4) span { background: var(--google-green); }
.seo-ai-principles strong { font-size: 1rem; font-weight: 500; }
.seo-ai-principles p { margin: .55rem 0 0; color: var(--slate); font-size: var(--text-support); line-height: 1.6; }

.seo-system { padding: var(--section-space) 0; background: #f8f6f2; }
.seo-system-heading { display: grid; align-items: end; grid-template-columns: 1fr minmax(20rem,.48fr); gap: clamp(3rem,8vw,9rem); }
.seo-system-heading h2 { max-width: 15ch; margin: 0; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -.045em; }
.seo-system-heading h2 em { color: var(--deep); }
.seo-system-heading p { max-width: 39rem; margin: 0; color: var(--slate); font-size: var(--text-lead); line-height: 1.7; }
.seo-system-map { margin-top: var(--content-space); border-top: 1px solid rgba(30,31,32,.15); }
.seo-system-map article { display: grid; align-items: center; padding: clamp(1.8rem,3vw,2.8rem) 0; border-bottom: 1px solid rgba(30,31,32,.15); grid-template-columns: 4rem minmax(16rem,.85fr) minmax(16rem,.55fr); gap: clamp(1.3rem,4vw,4rem); }
.seo-system-map article > span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); }
.seo-system-map h3 { margin: 0 0 .6rem; font-size: var(--type-card-title-large); line-height: 1.2; }
.seo-system-map p { max-width: 43rem; margin: 0; color: var(--slate); line-height: 1.7; }
.seo-system-map small { justify-self: end; padding: .65rem .9rem; border: 1px solid rgba(30,91,90,.2); border-radius: 999px; color: var(--deep); font-size: var(--text-label); text-align: center; }

.seo-work { padding: var(--section-space) 0; background: #dce7e2; }
.seo-work-grid { display: grid; align-items: start; grid-template-columns: minmax(0,.88fr) minmax(24rem,.72fr); gap: clamp(3rem,8vw,9rem); }
.seo-work-copy h2 { max-width: 14ch; margin: 0; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -.045em; }
.seo-work-copy h2 em { color: var(--deep); }
.seo-work-copy p { max-width: 42rem; margin: 1.4rem 0 0; color: var(--slate); font-size: var(--text-lead); line-height: 1.7; }
.seo-work-copy a { display: inline-flex; gap: .7rem; margin-top: 1.3rem; border-bottom: 1px solid rgba(30,91,90,.4); color: var(--deep); font-size: var(--text-action); font-weight: 600; }
.seo-work-ledger { border-top: 1px solid rgba(30,91,90,.24); }
.seo-work-ledger div { display: grid; padding: 1.25rem 0; border-bottom: 1px solid rgba(30,91,90,.24); grid-template-columns: 8.5rem 1fr; gap: 1rem; }
.seo-work-ledger span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; text-transform: uppercase; }
.seo-work-ledger p { margin: 0; color: var(--slate); font-size: var(--text-support); line-height: 1.6; }

.seo-marketing {
  position: relative;
  overflow: hidden;
  padding: var(--section-space-feature) 0;
  background: #eef2f5;
}
.seo-marketing::before {
  position: absolute;
  top: -14rem;
  right: -10rem;
  width: 36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 20deg, rgba(66,133,244,.11), rgba(234,67,53,.08), rgba(251,188,5,.08), rgba(52,168,83,.1), rgba(66,133,244,.11));
  content: "";
  filter: blur(2rem);
  opacity: .8;
  pointer-events: none;
}
.seo-marketing-grid { position: relative; display: grid; align-items: start; grid-template-columns: minmax(0,.72fr) minmax(34rem,1fr); gap: clamp(3rem,8vw,9rem); }
.seo-marketing-copy h2 { max-width: 14ch; margin: 0; font-size: var(--type-section-title); letter-spacing: -.045em; line-height: 1.08; }
.seo-marketing-copy h2 em { color: var(--deep); }
.seo-marketing-copy p { max-width: 43rem; margin: 1.3rem 0 0; color: var(--slate); font-size: var(--text-support); line-height: 1.72; }
.seo-marketing-copy .button { margin-top: 1.7rem; border-color: var(--deep); background: var(--deep); color: #fff; }
.seo-marketing-copy .button:hover { border-color: var(--coal); background: var(--coal); }
.seo-marketing-channels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.seo-marketing-channel { position: relative; min-height: 13rem; padding: 1.45rem; overflow: hidden; border: 1px solid rgba(30,31,32,.12); border-radius: 1.35rem; background: rgba(255,255,255,.82); box-shadow: 0 1rem 2.5rem rgba(30,31,32,.045); }
.seo-marketing-channel::before { position: absolute; top: 0; right: 0; left: 0; height: .3rem; background: var(--channel-color); content: ""; }
.seo-marketing-channel > span { color: var(--slate); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.seo-marketing-channel h3 { margin: 2rem 0 .65rem; font-size: var(--type-card-title); line-height: 1.15; }
.seo-marketing-channel p { max-width: 28rem; margin: 0; color: var(--slate); font-size: var(--text-support); line-height: 1.62; }
.seo-marketing-channel-organic { --channel-color: var(--google-green); }
.seo-marketing-channel-google { --channel-color: linear-gradient(90deg,var(--google-blue),var(--google-red),var(--google-yellow),var(--google-green)); }
.seo-marketing-channel-meta { --channel-color: #5a70d6; }
.seo-marketing-channel-linkedin { --channel-color: #3c7396; }
.seo-marketing-common { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border: 1px solid rgba(30,91,90,.16); border-radius: 1.1rem; background: #dbe7e3; grid-column: 1 / -1; gap: 1.5rem; }
.seo-marketing-common span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.seo-marketing-common strong { color: var(--deep); font-size: var(--text-support); font-weight: 500; text-align: right; }

.seo-measure { padding: var(--section-space-feature) 0; background: #173d3d; color: #fff; }
.seo-measure-inner { display: grid; align-items: start; grid-template-columns: minmax(0,.88fr) minmax(24rem,.72fr); gap: clamp(3rem,8vw,9rem); }
.seo-measure h2 { max-width: 14ch; margin: 0; color: #fff; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -.045em; }
.seo-measure h2 em { color: #b7d6cd; }
.seo-measure p { max-width: 42rem; margin: 1.4rem 0 0; color: rgba(255,255,255,.7); font-size: var(--text-lead); line-height: 1.7; }
.seo-measure ul { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); list-style: none; }
.seo-measure li { display: grid; padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.14); gap: .4rem; }
.seo-measure strong { color: #fff; font-weight: 500; }
.seo-measure li span { color: rgba(255,255,255,.65); font-size: var(--text-support); line-height: 1.6; }

.seo-faq { padding: var(--section-space) 0; background: #f8f6f2; }
.seo-faq-grid { display: grid; align-items: start; grid-template-columns: minmax(18rem,.55fr) minmax(28rem,1fr); gap: clamp(3rem,8vw,9rem); }
.seo-faq-grid > div:first-child { position: sticky; top: calc(var(--header-height) + 2rem); }
.seo-faq-grid h2 { max-width: 12ch; margin: 0; font-size: var(--type-section-title-compact); line-height: 1.08; letter-spacing: -.04em; }
.seo-faq-grid > div:first-child p { max-width: 31rem; margin: 1.25rem 0 0; color: var(--slate); line-height: 1.7; }
.seo-faq-list { border-top: 1px solid var(--line); }
.seo-faq-list details { border-bottom: 1px solid var(--line); }
.seo-faq-list summary { display: flex; min-height: 4.8rem; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 500; list-style: none; }
.seo-faq-list summary::-webkit-details-marker { display: none; }
.seo-faq-list summary i { width: .8rem; height: .8rem; flex: 0 0 auto; border-right: 1px solid var(--deep); border-bottom: 1px solid var(--deep); transform: rotate(45deg); transition: transform 180ms ease; }
.seo-faq-list details[open] summary i { transform: rotate(225deg); }
.seo-faq-list details p { max-width: 47rem; margin: 0; padding: 0 2rem 1.5rem 0; color: var(--slate); line-height: 1.7; }

.seo-final { padding: var(--section-space-cta) 0; background: #cbded7; }
.seo-final-inner { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.seo-final h2 { max-width: 17ch; margin: 0 0 1rem; font-size: var(--type-section-title-compact); line-height: 1.08; letter-spacing: -.04em; }
.seo-final p { max-width: 44rem; margin: 0; color: var(--slate); line-height: 1.7; }
.seo-final .button { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .seo-hero-grid { grid-template-columns: minmax(22rem,.85fr) minmax(0,1.15fr); gap: 3rem; }
  .seo-ai-principles { grid-template-columns: repeat(2,1fr); }
  .seo-ai-principles > div { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(30,91,90,.18); }
  .seo-ai-principles > div:nth-child(2) { border-right: 0; }
}

@media (max-width: 900px) {
  .seo-hero-grid,
  .seo-intent-heading,
  .seo-ai-copy,
  .seo-system-heading,
  .seo-work-grid,
  .seo-marketing-grid,
  .seo-measure-inner,
  .seo-faq-grid { grid-template-columns: 1fr; }
  .seo-hero-grid { min-height: 0; }
  .seo-hero-copy { order: 1; }
  .seo-query-field { width: min(100%,40rem); order: 2; transform: none; }
  .seo-ai-copy h2 { grid-row: auto; }
  .seo-ai-path { grid-template-columns: 1fr; }
  .seo-ai-path > i { justify-self: center; transform: rotate(90deg); }
  .seo-system-map article { grid-template-columns: 3rem 1fr; }
  .seo-system-map small { grid-column: 2; justify-self: start; }
  .seo-marketing-grid { gap: 3rem; }
  .seo-faq-grid > div:first-child { position: static; }
  .seo-final-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .seo-hero-grid { gap: 2.5rem; }
  .seo-hero-actions { align-items: flex-start; flex-direction: column; }
  .seo-query-field { padding: .9rem; border-radius: 1.3rem; }
  .seo-query-input { min-height: 3.8rem; padding: .7rem .9rem; }
  .seo-query-input span { font-size: .78rem; }
  .seo-ai-overview { padding: .95rem; }
  .seo-ai-principles { grid-template-columns: 1fr; }
  .seo-ai-principles > div,
  .seo-ai-principles > div:first-child { padding: 1.3rem 0; border-right: 0; }
  .seo-system-map article { grid-template-columns: 1fr; }
  .seo-system-map article > span,
  .seo-system-map small { grid-column: 1; }
  .seo-work-ledger div { grid-template-columns: 1fr; }
  .seo-marketing-channels { grid-template-columns: 1fr; }
  .seo-marketing-common { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .seo-marketing-common strong { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-intent-stream { animation: none; }
}