/* Stilovi iz Maxim.dc.html — <style> blok, doslovno. */

body { margin: 0; -webkit-text-size-adjust: 100%; }
  a:hover { color: var(--color-accent-700); }
  img, image-slot { max-width: 100%; }
  table[data-fluid] { table-layout: fixed; word-break: break-word; }
  .mx-dark { --color-bg: #1b1a19; --color-text: #f4f2f1; --color-surface: #2d2b2b; --color-divider: color-mix(in srgb, #f4f2f1 32%, transparent); --color-accent-700: #ff8b78; }
  .mx-dark .grayscale { filter: grayscale(1) contrast(1.02) brightness(.92); }
  .mx-icon-btn { transition: border-color .16s ease, color .16s ease, background .16s ease; }
  .mx-icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
  @keyframes mxShimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
  .mx-skel { background: linear-gradient(100deg, var(--color-surface) 30%, color-mix(in srgb, var(--color-text) 12%, var(--color-surface)) 50%, var(--color-surface) 70%); background-size: 220% 100%; animation: mxShimmer 1.5s linear infinite; }
  @keyframes mxUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes mxClip { from { opacity: 0; clip-path: inset(0 0 22% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
  @keyframes mxDrawer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .mx-reveal.mx-armed { opacity: 0; }
  .mx-reveal.mx-in { animation: mxUp .55s cubic-bezier(.2,.75,.25,1) both; }
  .mx-tile .grayscale { overflow: hidden; }
  .mx-tile image-slot { transition: transform .5s cubic-bezier(.2,.75,.25,1); }
  .mx-tile:hover image-slot { transform: scale(1.045); }
  .mx-tile h3 { transition: color .2s ease; }
  .mx-tile:hover h3 { color: var(--color-accent-700); }
  .mx-tile a[href^="#s02"] { position: relative; }
  .mx-tile a[href^="#s02"]::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--color-accent); transition: right .28s cubic-bezier(.2,.75,.25,1); }
  .mx-tile:hover a[href^="#s02"]::after { right: 0; }
  .mx-drawer { animation: mxDrawer .22s ease both; }
  .mx-skip:focus-visible { left: 8px; }
  .mx-top { animation: mxUp .3s ease both; transition: background .18s ease, transform .18s ease; }
  .mx-top:hover { background: var(--color-accent-600); }
  .mx-top:active { transform: translateY(1px); }
  input.input, textarea.input { transition: border-color .16s ease, background .16s ease; }
  input[type="range"] { accent-color: var(--color-accent); }
  .mx-header a.btn-primary { transition: transform .18s ease, background .18s ease; }
  .mx-header a.btn-primary:active { transform: translateY(1px); }
  @media (prefers-reduced-motion: reduce) {
    .mx-reveal, .mx-reveal.mx-armed, .mx-reveal.mx-in { opacity: 1; animation: none; }
    .mx-tile image-slot, .mx-tile:hover image-slot { transition: none; transform: none; }
    .mx-drawer { animation: none; }
  }
  @media (max-width: 860px) {
    .mx-header .mx-nav { display: none !important; }
    .mx-header .mx-burger { display: inline-flex !important; }
  }
  @media (max-width: 720px) {
    h1 { letter-spacing: -0.02em; }
    a.btn, .btn { min-height: 44px; }
    nav a { min-height: 44px; display: inline-flex; align-items: center; }
  }
  @media (max-width: 520px) {
    section > div[style*="columns"], div[style*="columns:"] { columns: 1 !important; }
  }