/* BUREAUER, funktionaliteter */
.features { background: var(--dark-blue); color: var(--cold-sand); padding: 120px 0; }
.features-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cs-line); border: 1px solid var(--cs-line); border-radius: 0 24px 0 24px; overflow: hidden; }
.feature { background: var(--dark-blue); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; transition: background .35s ease; }
.feature:hover { background: rgba(46,255,209,0.06); }
a.feature { text-decoration: none; color: inherit; cursor: pointer; }
.func { scroll-margin-top: 88px; }
html { scroll-behavior: smooth; }
.feature-name { color: var(--mint); font-weight: 800; font-size: 16px; line-height: 1.3; }
.feature-desc { margin: 0; color: var(--cold-sand); font-weight: 300; font-size: 14.5px; line-height: 1.55; }
.feature-ico { width: 46px; height: 46px; margin-bottom: 6px; }
.feature-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fi-bar  { transform-box: fill-box; transform-origin: bottom center; animation: fi-bar 1.8s ease-in-out infinite; }
.fi-bar2 { transform-box: fill-box; transform-origin: center; animation: fi-bar 1.4s ease-in-out infinite; }
.fi-pulse{ transform-box: fill-box; transform-origin: center; animation: fi-pulse 2.2s ease-in-out infinite; }
.fi-up   { animation: fi-up 2.6s ease-in-out infinite; }
.fi-fade { animation: fi-fade 2.4s ease-in-out infinite; }
.fi-spin { transform-box: fill-box; transform-origin: center; animation: fi-spin 7s linear infinite; }
.fi-blink{ animation: fi-blink 2.6s ease-in-out infinite; }
@keyframes fi-bar { 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }
@keyframes fi-pulse { 0%,100%{transform:scale(.82)} 50%{transform:scale(1.05)} }
@keyframes fi-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes fi-fade { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes fi-spin { to{transform:rotate(360deg)} }
@keyframes fi-blink { 0%,30%{opacity:.15} 50%,80%{opacity:1} 100%{opacity:.15} }
@media (max-width: 900px){ .features { padding: 88px 0; } .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .features { padding: 72px 0; } .features-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .feature-ico * { animation: none; } }

/* Samleband-animation (hero): outlinede former -> faerdige farvelagte former */
.belt-stage { position: absolute; left: 0; right: 0; bottom: 7%; width: 100%; pointer-events: none; }
.belt-svg { width: 100%; height: auto; display: block; overflow: hidden; }
.belt-track  { stroke: var(--cold-sand); stroke-opacity: .16; stroke-width: 2; }
.belt-roller { fill: none; stroke: var(--cold-sand); stroke-opacity: .26; stroke-width: 2.5; }
.roller-spoke{ stroke: var(--cold-sand); stroke-opacity: .26; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: beltSpin 2.6s linear infinite; }
.machine     { fill: var(--mint); stroke: var(--mint); stroke-width: 2.5; }
.scan-glow   { fill: var(--mint); opacity: .12; }
.scan-beam   { stroke: var(--dark-blue); stroke-width: 2.5; animation: beltBeam 1.6s ease-in-out infinite; }
.machine-grp { transform-box: view-box; transform-origin: 600px 193px; animation: machinePulse 4s ease-in-out infinite; }
.bi    { stroke-width: 2.5; animation: beltRun 12s linear infinite, beltFill 12s linear infinite; }
.c-mint { fill: var(--mint); stroke: var(--mint); }
.c-sand { fill: var(--warm-sand); stroke: var(--warm-sand); }
.c-cold { fill: var(--cold-sand); stroke: var(--cold-sand); }
@keyframes beltRun  { from { transform: translateX(-680px); } to { transform: translateX(680px); } }
@keyframes beltFill { 0%,47% { fill-opacity: 0; stroke-opacity: .92; } 53%,100% { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes beltBeam { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes beltSpin { to { transform: rotate(360deg); } }
@keyframes machinePulse {
  0%, 30%  { transform: scale(1); }
  44%, 50% { transform: scale(1.1); }   /* form paa vej ind / inde -> stoerre */
  60%      { transform: scale(0.95); }  /* fyldt form ude igen -> lidt mindre */
  72%, 100%{ transform: scale(1); }
}
@media (max-width: 720px){ .belt-stage { bottom: 7%; } }
@media (prefers-reduced-motion: reduce){ .bi, .scan-beam, .roller-spoke, .machine-grp { animation: none !important; } }



/* === 15 funktionalitets-afsnit (fuld viewport) === */
.func { min-height: 100vh; display: flex; align-items: center; padding: 96px 0; }
.func-light { background: var(--cold-sand); color: var(--dark-blue); }
.func-dark  { background: var(--dark-blue); color: var(--cold-sand); }
.func .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; width: 100%; }
.func.rev .func-text { order: 2; }
.func.rev .func-illu { order: 1; }
.func-eyebrow { font-weight: 800; font-size: 14px; letter-spacing: normal; margin-bottom: 18px; }
.func-light .func-eyebrow { color: var(--dark-blue); }
.func-dark  .func-eyebrow { color: var(--mint); }
.func-h { font-weight: 800; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 22px; }
.func-desc { font-weight: 300; font-size: 18px; line-height: 1.65; max-width: 460px; margin: 0; opacity: .92; }
.func-illu svg { width: 100%; height: auto; display: block; max-width: 560px; margin: 0 auto; }
.func.rev .func-illu svg { margin-right: 0; }
/* animationer */
@keyframes fuPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@keyframes fuFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes fuSlide { 0%,100%{transform:translateX(0)} 50%{transform:translateX(14px)} }
@keyframes fuGrow  { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
@keyframes fuBlink { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes fuPop   { 0%,12%{opacity:0;transform:scale(.55)} 32%,78%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.55)} }
@keyframes fuDraw  { to { stroke-dashoffset:0 } }
@keyframes fuType  { 0%{transform:scaleX(0)} 55%,100%{transform:scaleX(1)} }
@keyframes fuSpin  { to { transform:rotate(360deg) } }
@keyframes fuPlayX { 0%{transform:translateX(0)} 100%{transform:translateX(var(--w,340px))} }
@keyframes fuScanY { 0%{transform:translateY(0)} 100%{transform:translateY(210px)} }
.fu-pulse{ animation:fuPulse 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-float{ animation:fuFloat 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-slide{ animation:fuSlide 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-grow { animation:fuGrow 1.8s ease-in-out infinite; transform-box:fill-box; }
.fu-blink{ animation:fuBlink 2.2s ease-in-out infinite; }
.fu-pop  { animation:fuPop 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-draw { stroke-dasharray:360; stroke-dashoffset:360; animation:fuDraw 2.6s ease-in-out infinite alternate; }
.fu-type { animation:fuType 3.2s ease-in-out infinite; transform-box:fill-box; }
.fu-spin { animation:fuSpin 9s linear infinite; transform-box:fill-box; transform-origin:center; }
.fu-playX{ animation:fuPlayX 3.6s linear infinite; }
.fu-scanY{ animation:fuScanY 3.2s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){ .func-illu * { animation: none !important; } }
@media (max-width: 860px){
  .func { min-height: auto; padding: 64px 0; }
  .func .wrap { grid-template-columns: 1fr; gap: 36px; }
  .func.rev .func-text { order: 1; } .func.rev .func-illu { order: 2; }
  .func-desc { font-size: 16px; }
}