/* Relio — Dynamics 365 CRM: økosystem-diagram, modulrader, kapabilitets-chips, diagramrammer.
   Bygger på css/site.css. */

/* Økosystem-diagram (hub & spoke) */
.eco{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.eco__lead{max-width:58ch;color:var(--text);font-size:clamp(1.05rem,1.5vw,1.18rem);line-height:1.6}
.eco figure{margin:0;width:100%}
.eco svg{width:100%;max-width:760px;height:auto;display:block;margin:0 auto}

/* Modulrader — vekslende (zig-zag), ikke like kort */
.modules{display:flex;flex-direction:column;gap:clamp(48px,7vw,84px)}
.module{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
@media(min-width:860px){
  .module{grid-template-columns:1fr 1fr;gap:56px}
  .module:nth-child(even) .module__media{order:-1}
}
.module__k{font-size:.82rem;color:var(--blue-strong);font-weight:600;font-family:var(--display);letter-spacing:.02em}
.module h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;color:var(--navy);margin:8px 0 14px;letter-spacing:-.02em}
.module p{color:var(--text);max-width:52ch;line-height:1.6}
.module__caps{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.cap{font-size:.84rem;font-weight:500;color:var(--navy);background:var(--blue-tint);border-radius:999px;padding:6px 14px}
.module__help{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;color:var(--gray-body);max-width:52ch;line-height:1.55}
.module__help b{color:var(--navy);font-family:var(--display);font-weight:600}
.module__link{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--blue-strong)}
.module__link svg{transition:transform .3s var(--e-expo)}
.module__link:hover{color:var(--blue-hover)}
.module__link:hover svg{transform:translateX(3px)}

/* Diagram-ramme */
.dgm{border-radius:18px;background:linear-gradient(160deg,var(--gray-50),#fff);border:1px solid var(--line);padding:clamp(22px,3vw,34px);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.dgm svg{width:100%;height:auto;max-width:380px;display:block}
.dgm--wide svg{max-width:820px}

/* Delt SVG-diagramstil */
.d-node{fill:#fff;stroke:var(--blue);stroke-width:1.5}
.d-core{fill:var(--navy)}
.d-line{stroke:var(--blue);stroke-width:1.5;fill:none}
.d-line--dash{stroke:var(--blue);stroke-width:1.4;fill:none;stroke-dasharray:4 5}
.d-lbl{font-family:var(--display);font-weight:600;fill:var(--navy);font-size:15px}
.d-lbl--sm{font-family:var(--body);font-weight:500;fill:var(--gray-muted);font-size:12px}
.d-lbl--on{font-family:var(--display);font-weight:600;fill:#fff;font-size:16px}
.d-accent{fill:var(--blue)}

/* Hero side ved side (foto eller diagram) */
.crm-hero{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.crm-hero{grid-template-columns:1.05fr .95fr;gap:52px}}
.crm-hero__media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--gray-100);box-shadow:0 30px 60px -32px rgba(4,22,53,.5)}
.crm-hero__media img{width:100%;height:100%;object-fit:cover}
.crm-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(190deg,transparent 58%,rgba(4,22,53,.4))}
.crm-hero__cap{position:absolute;left:18px;bottom:15px;color:#fff;font-size:.85rem;font-weight:500;text-shadow:0 1px 8px rgba(4,22,53,.6);z-index:1}
@media(max-width:899px){.crm-hero__media{max-width:440px;margin:0 auto}}

/* Kapabiliteter — detaljert forklaring */
.capgrid{display:grid;gap:22px 34px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:8px}
.capitem{border-top:1px solid var(--line-2);padding-top:16px}
.capitem h4{font-size:1.04rem;color:var(--navy);font-family:var(--display);font-weight:600}
.capitem p{color:var(--text);font-size:.95rem;margin-top:6px;line-height:1.5}

/* Fotoband med bildetekst (bruker delt .band, men litt tekststil) */
.band__cap .kicker{display:block;font-family:var(--body);font-weight:500;font-size:.82rem;color:#cdd8ec;margin-bottom:6px}

/* Layered/lifecycle-diagram er brede */
.eco svg.eco--layer{max-width:820px}

/* Animert systemdiagram (hero) + flyt i livsløpsdiagram. Alt av under redusert bevegelse. */
.sys{max-width:400px}
.d-flow{stroke-dasharray:6 8}
.sys-ring{transform-box:fill-box;transform-origin:center;opacity:.28}
.sys-node{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .d-flow{animation:d-flow 2.6s linear infinite}
  .sys-ring{animation:d-spin 46s linear infinite}
  .sys-ring--rev{animation-duration:62s;animation-direction:reverse}
  .sys-node{animation:d-pulse 3.4s var(--e-expo) infinite}
  .sys-node--2{animation-delay:.6s}.sys-node--3{animation-delay:1.2s}.sys-node--4{animation-delay:1.8s}
  .sys-dot{opacity:0}
  .sys-dot--n{animation:d-n 2.8s ease-in-out infinite}
  .sys-dot--e{animation:d-e 2.8s ease-in-out infinite .5s}
  .sys-dot--s{animation:d-s 2.8s ease-in-out infinite 1s}
  .sys-dot--w{animation:d-w 2.8s ease-in-out infinite 1.5s}
}
@keyframes d-flow{to{stroke-dashoffset:-28}}
@keyframes d-spin{to{transform:rotate(360deg)}}
@keyframes d-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes d-n{0%{transform:translate(0,0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(0,-116px);opacity:0}}
@keyframes d-e{0%{transform:translate(0,0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(116px,0);opacity:0}}
@keyframes d-s{0%{transform:translate(0,0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(0,116px);opacity:0}}
@keyframes d-w{0%{transform:translate(0,0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(-116px,0);opacity:0}}