/* ============================================================
   ALEMO enhance layer · v20261110
   Loads AFTER styles.css — append-only polish, no base rewrites.
   1) Brand: the real ALEMO monogram in signal mint (same mark
      as on arve.alemo.ee), header + footer + favicon
   2) Gentle depth and motion polish across cards and controls
   ============================================================ */

/* 1 · Brand monogram — the mark carries its own ring, so the old
      .brand-mark circle border is dropped to avoid a double ring */
.brand-logo { border: none; background: none; transition: filter .25s var(--ease); }
.brand-logo .mark-svg { width: 40px; height: 40px; color: var(--mint-bright); filter: drop-shadow(0 0 8px rgba(115,255,184,.55)); }
.wordmark:hover .brand-logo .mark-svg { filter: drop-shadow(0 0 12px rgba(115,255,184,.9)); }
.footer-wordmark .brand-logo .mark-svg { width: 36px; height: 36px; }

/* 2 · Header: thin mint signal line under the bar + subtle glass */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(115,255,184,.55) 18%, rgba(45,212,168,.25) 50%, rgba(115,255,184,.55) 82%, transparent); pointer-events: none; }
@supports (backdrop-filter: blur(6px)) { .site-header { background: rgba(8,19,31,.92); backdrop-filter: blur(6px); } }

/* 3 · Hero headline: mint gradient on the emphasised words */
.hero h1 em { background: linear-gradient(98deg, var(--mint) 0%, var(--mint-bright) 55%, #b9ffd9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 4 · Primary buttons: quiet glow that answers hover */
.button-primary { box-shadow: 0 10px 26px -12px rgba(115,255,184,.45); }
.button-primary:hover { box-shadow: 0 16px 34px -12px rgba(115,255,184,.6); }

/* 5 · Cards lift calmly */
.approach-card, .scan-visual-card, .media-card, .lab-frame { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.approach-card:hover { transform: translateY(-4px); border-color: rgba(115,255,184,.45); box-shadow: 0 18px 40px -22px rgba(45,212,168,.5); }
.media-card:hover, .scan-visual-card:hover { border-color: rgba(115,255,184,.4); }

/* 6 · Capability list: arrows answer the cursor */
.capability-list li { transition: border-color .25s var(--ease), background .25s var(--ease); }
.capability-list li:hover { border-color: rgba(115,255,184,.45); background: rgba(45,212,168,.07); }
.capability-list .list-arrow { transition: transform .25s var(--ease), color .25s var(--ease); }
.capability-list li:hover .list-arrow { transform: translate(3px,-3px); color: var(--mint-bright); }

/* 7 · Form fields answer focus in mint */
.feedback-field input:focus, .feedback-field textarea:focus { outline: 2px solid var(--mint); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(45,212,168,.14); }

/* 8 · Scrollbar in theme */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: #1d3a44; border-radius: 8px; border: 3px solid var(--ink-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--mint); }

/* 9 · Reduced motion: no lifts */
@media (prefers-reduced-motion: reduce) {
  .approach-card:hover { transform: none; }
  .brand-logo, .approach-card, .scan-visual-card, .media-card, .lab-frame { transition: none; }
}