:root{--mw-focus:#10B981}
.skip-link{position:absolute;left:0;top:-120px;z-index:9999;background:#10B981;color:#fff;padding:10px 14px;border-radius:0 0 8px 0;text-decoration:none;font:600 .86rem/1.2 system-ui,sans-serif;transition:top .2s}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--mw-focus);outline-offset:2px}

/* Chat UX hardening shared across pages */
#mw-chat-window .mw-header{position:relative}
#mw-chat-close{position:absolute;top:10px;right:10px;margin-left:0}
#mw-chat-btn,#mw-chat-close,#mw-send{min-width:44px;min-height:44px}
#mw-chat-window .mw-bubble{overflow-wrap:anywhere;word-break:break-word}
body.mw-chat-open #mw-chat-btn{display:none !important}
body.mw-chat-open #mw-bubble{display:none !important}
#mw-chat-retry{margin-top:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:inherit;border-radius:8px;padding:8px 10px;font-size:.78rem;cursor:pointer}

@media (max-width:768px){
  #mw-chat-window{
    left:12px !important;
    right:12px !important;
    width:min(360px,calc(100vw - 24px)) !important;
    margin-inline:auto !important;
    max-height:min(72dvh,560px) !important;
    bottom:84px !important;
  }
  #mw-bubble{
    max-width:calc(100vw - 32px) !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ── Theme toggle: fade culori (ca index T15) — toate paginile cu global.css ── */
@media (hover: hover) {
  html, body, .nav-shell, .sec, .card, .faq-item, .btn-p, .btn-ghost, input, textarea, select,
  .modal-box, .footer-bg, .pkg, .testi, .stat-box, .browser-mockup, .nav-a, .cookie-inner,
  .btn, .services-extra, .service-row, .agree-wrap, #cookie-banner, .cookie-modal-box,
  .pkg-feat, .toc-card, .price-contrast-box, .hero-section, .port-card-link .card {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
  }
}

/* View Transitions API — navigare între pagini (meta view-transition same-origin în head) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root) { animation-name: mw-vt-fade-out; }
::view-transition-new(root) { animation-name: mw-vt-fade-in; }
@keyframes mw-vt-fade-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes mw-vt-fade-in  { from { opacity: 0; transform: translateY(6px); } }