/* === Menu end-line fix overrides (applied globally) === */
nav li:last-child,
.menu li:last-child,
.nav li:last-child,
.header-menu li:last-child,
nav ul > li:last-child,
header nav ul > li:last-child,
.navbar ul > li:last-child {
  border-right: none !important;
  border-left: none !important;
}

/* Hide any separator pseudo-element on the last item */
nav li:last-child::after,
.menu li:last-child::after,
.nav li:last-child::after,
.header-menu li:last-child::after,
nav ul > li:last-child::after,
header nav ul > li:last-child::after,
.navbar ul > li:last-child::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0 !important;
}
/* === End overrides === */


/* === v101: Center Tools/Alati and its submenu items in responsive menu === */
@media (max-width: 860px){
  .nav-dropdown{
    width: 100%;
  }
  .nav-dropdown > .has-caret{
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .nav-dropdown .nav-menu{
    width: 100%;
    text-align: center;
  }
  .nav-dropdown .nav-sub{
    display: block;
    margin: 4px auto;
    text-align: center;
  }
}
/* === end v101 === */


/* === v102: Ensure mobile menu is fully scrollable & language switcher visible === */
@media (max-width: 899.98px){
  header.menu-open #site-menu{
    max-height: calc(100vh - var(--header-h) - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep dropdown menus within the panel flow on mobile (safety) */
  .nav-dropdown .nav-menu{
    position: static !important;
    width: 100%;
  }
}
/* === end v102 === */


/* === v103: Style language switcher with a square/boxed look === */
.lang-switch, .lang-switch a, .lang-switch button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border:1px solid var(--accent);
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  text-decoration:none;
  transition: all .2s ease;
}
.lang-switch:hover, .lang-switch a:hover, .lang-switch button:hover{
  background: rgba(255,255,255,0.12);
  color:#fff;
}
/* Ensure spacing inside responsive menu */
@media (max-width: 899.98px){
  .lang-switch{ width:100%; text-align:center; margin-top:8px; }
}
/* === end v103 === */


/* === v103: Language switcher boxed style === */
header .lang-switch{
  display: inline-block;
  padding: 6px 12px !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px; /* soft square */
  text-decoration: none;
  line-height: 1.1;
  background: transparent;
  color: var(--text) !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
header .lang-switch:hover,
header .lang-switch:focus-visible{
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  box-shadow: 0 0 12px rgba(0, 246, 255, 0.35);
  text-shadow: 0 0 6px rgba(0, 246, 255, 0.4);
}
@media (max-width: 899.98px){
  /* keep it centered nicely in the mobile panel */
  header .lang-switch{ margin: 6px auto 0; display: inline-block; }
}
/* === end v103 === */


/* === v104: Persist header — fix disappearing after scroll === */
/* Some ancestors can break position:sticky (overflow/transform). Force fixed instead. */
header.sticky{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 200000 !important; /* above content & effects */
  background: var(--bg, rgba(10,12,20,.98)); /* keep header solid */
}

/* Ensure page content never hides under the fixed header */
main{ padding-top: var(--header-h) !important; }

/* Mobile menu panel already accounts for header height; keep it below header */
@media (max-width: 899.98px){
  #site-menu{
    top: calc(var(--header-h) + 8px) !important;
  }
}
/* === end v104 === */


/* === v105: Balance content spacing below header === */
/* Ensure consistent padding so content is not too close to the sticky header */
main, .content, body > section:first-of-type{
  padding-top: calc(var(--header-h) + 40px) !important;
}

/* On mobile, give a bit more breathing room below header */
@media (max-width: 899.98px){
  main, .content, body > section:first-of-type{
    padding-top: calc(var(--header-h) + 24px) !important;
  }
}
/* === end v105 === */


/* === v105: Consistent top spacing below fixed header (desktop + mobile) === */
/* Footer uses ~40px vertical padding; mirror a similar feel at the top. */
:root{ --content-top-gap: 40px; }
@media (max-width: 899.98px){
  :root{ --content-top-gap: 48px; } /* a tad extra on small screens */
}

/* Ensure the main content sits comfortably below the fixed header */
main{
  padding-top: calc(var(--header-h) + var(--content-top-gap)) !important;
}

/* Avoid unexpected collapsed margins on the very first section */
.section:first-of-type, section:first-of-type{
  margin-top: 0 !important;
  padding-top: min(2vh, 16px); /* tiny cushion inside the first section */
}
/* === end v105 === */


/* === v106: Refine language switcher button in responsive menu === */
@media (max-width: 899.98px){
  header .lang-switch{
    display: inline-block !important;
    width: auto !important;
    padding: 6px 12px !important;
    margin: 12px auto 0 !important;
    border-radius: 10px !important;
  }
}
/* === end v106 === */


/* === v106: Compact language switcher on mobile (match desktop) === */
@media (max-width: 899.98px){
  header .lang-switch{
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    align-self: center !important;
    padding: 6px 12px !important;   /* same as desktop */
    margin: 8px auto 0 !important;  /* centered inside panel */
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Prevent generic mobile nav rules from stretching it */
  #site-menu a.lang-switch{
    display: inline-flex !important;
  }
}
/* === end v106 === */



body{
  /* Dark top -> transparent -> show site background */
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.75) 15%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0) 45%) ,
              var(--site-bg, url('/assets/img/bg-texture.jpg')) no-repeat center top / cover;
  background-attachment: fixed;
  background-color: #000; /* fallback */
}
/* Ensure sections remain transparent to let blend show */
main, section, .section{
  background: transparent !important;
}
/* === end v107 === */

/* === v109: Full-page background (Option 1) === */
/* Apply the textured/nice background to the entire page, not just lower half */
body{
  background: var(--site-bg, url('/assets/img/bg-texture.jpg')) no-repeat center top / cover;
  background-attachment: fixed;
  background-color: #000; /* fallback */
}
main, section, .section{
  background: transparent !important;
}
/* === end v109 === */


/* === v110: Show background layers on home pages only === */
/* Only when .bg-layers exists (home pages), let it be visible behind content */
body:has(.bg-layers){
  background: transparent !important; /* reveal .bg-layers visuals */
}
/* Keep the layer in the back */
.bg-layers{ z-index: -1; pointer-events: none; }
/* Sections transparent so the layered bg is visible */
body:has(.bg-layers) main, 
body:has(.bg-layers) section, 
body:has(.bg-layers) .section{
  background: transparent !important;
}
/* === end v110 === */


/* === v112: Global dark box style for cards (match home page look) === */
.card, .card.pad{
  background: color-mix(in oklab, var(--panel, #0b0f1c) 92%, #0000) !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.4) !important;
}
/* === end v112 === */


/* === v112: Global card look to match home page === */
.card{
  background: var(--card) !important;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  padding: 24px !important;
}
.card.pad{
  background: color-mix(in oklab, var(--panel, #0b0f1c) 88%, transparent) !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 16px !important;
  padding: 20px !important;
}
/* Subtle glass hover for interactive cards (optional, gentle) */
.card a:hover, .card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  transition: box-shadow .2s ease;
}
/* === end v112 === */


/* === v113: Symmetrical bottom spacing on responsive === */
@media (max-width: 899.98px){
  main{
    padding-bottom: var(--content-top-gap) !important;
  }
}
/* === end v113 === */

/* === MARKOPNET technical navigation redesign === */
@font-face{
  font-family:"Markopnet Nav";
  src:url("/assets/fonts/markopnet-nav.woff") format("woff");
  font-display:swap;
  font-style:normal;
  font-weight:400;
}
header.sticky{
  background:linear-gradient(180deg,rgba(2,8,5,.97),rgba(2,7,5,.93)) !important;
  border-bottom:0 !important;
  box-shadow:0 10px 32px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
header.sticky > .container{
  position:relative;
  width:100% !important;
  max-width:1200px !important;
  min-height:80px;
  margin:0 auto !important;
  padding:10px 24px !important;
  border:0 !important;
  border-radius:0;
  background:
    linear-gradient(90deg,rgba(53,212,78,.025) 1px,transparent 1px),
    linear-gradient(rgba(53,212,78,.025) 1px,transparent 1px);
  background-size:26px 26px,26px 26px;
  box-shadow:none;
}
header.sticky > .container::before{
  content:"";position:absolute;left:34px;right:34px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(53,212,78,.38),transparent);
  box-shadow:0 0 10px rgba(53,212,78,.18);pointer-events:none;
}
header .logo-row{position:relative;z-index:2;transition:filter .2s ease,transform .2s ease}
header .logo-row:hover{filter:drop-shadow(0 0 10px rgba(53,212,78,.16));transform:translateY(-1px)}
#site-menu{gap:3px !important;margin-right:8px}
#site-menu > a:not(.lang-switch),#site-menu > .nav-dropdown > .has-caret{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:8px 11px !important;border-radius:8px;
  color:#b4c0b8 !important;font-family:"Markopnet Nav","Arial Narrow",sans-serif !important;
  font-size:1.05rem !important;font-weight:600;letter-spacing:.052em;text-transform:uppercase;
  opacity:1 !important;transition:color .2s ease,background .2s ease,transform .2s ease !important;
}
#site-menu > a:not(.lang-switch)::after,#site-menu > .nav-dropdown > .has-caret::before{
  content:"" !important;display:block !important;position:absolute;left:50%;right:50%;bottom:3px;height:1px;
  background:#43db5a !important;box-shadow:0 0 8px rgba(53,212,78,.65) !important;
  opacity:0;transition:left .22s ease,right .22s ease,opacity .22s ease !important;
}
#site-menu > a:not(.lang-switch):hover,#site-menu > .nav-dropdown > .has-caret:hover{
  color:#f0f5f2 !important;background:rgba(255,255,255,.035) !important;transform:translateY(-1px);
}
#site-menu > a:not(.lang-switch):hover::after,#site-menu > .nav-dropdown > .has-caret:hover::before,
#site-menu > a.is-current:not(.lang-switch)::after,#site-menu > .nav-dropdown.is-current > .has-caret::before{
  left:11px;right:11px;opacity:1;
}
#site-menu > a.is-current:not(.lang-switch),#site-menu > .nav-dropdown.is-current > .has-caret{
  color:#70e784 !important;background:rgba(53,212,78,.055) !important;
}
#site-menu > a[href$="kontakt.html"],#site-menu > a[href$="contact.html"]{
  margin-left:5px;padding:8px 15px !important;border:1px solid rgba(53,212,78,.42) !important;
  background:linear-gradient(135deg,rgba(53,212,78,.13),rgba(53,212,78,.045)) !important;
  color:#dff8e4 !important;box-shadow:inset 0 0 14px rgba(53,212,78,.035) !important;
}
#site-menu > a[href$="kontakt.html"]:hover,#site-menu > a[href$="contact.html"]:hover{
  border-color:rgba(65,225,91,.72) !important;background:rgba(53,212,78,.15) !important;
  box-shadow:0 0 17px rgba(53,212,78,.11) !important;
}
header #site-menu .lang-switch{
  display:inline-flex !important;align-items:center;gap:7px;min-width:auto;min-height:36px;margin-left:9px !important;padding:7px 8px 7px 11px !important;
  border:0 !important;border-left:1px solid rgba(255,255,255,.12) !important;border-radius:0 !important;
  background:transparent !important;color:#9aa8a0 !important;
  font:750 .8rem/1 "Markopnet Nav","Arial Narrow",sans-serif !important;letter-spacing:.085em;text-transform:uppercase;
}
header #site-menu .lang-switch:hover{background:transparent !important;box-shadow:none !important;color:#e9f5ec !important}
header #site-menu .lang-current{color:#4cdd63;font-weight:850;text-shadow:0 0 9px rgba(53,212,78,.2)}
header #site-menu .lang-divider{color:#455249;font-weight:500}
header #site-menu .lang-target{color:#98a69e;transition:color .2s ease}
header #site-menu .lang-switch:hover .lang-target{color:#eff7f1}
header .nav-dropdown .nav-menu{
  top:calc(100% + 11px);min-width:270px;padding:8px !important;border:1px solid rgba(53,212,78,.18) !important;
  border-radius:12px;background:rgba(4,12,8,.98) !important;box-shadow:0 22px 55px rgba(0,0,0,.58),0 0 28px rgba(53,212,78,.05) !important;
}
header .nav-dropdown .nav-sub{padding:10px 12px !important;border-radius:7px !important;color:#b8c5bd !important;font-size:.87rem !important}
header .nav-dropdown .nav-sub:hover,header .nav-dropdown .nav-sub.is-current{background:rgba(53,212,78,.075) !important;color:#e8f7eb !important}
header .hamburger{
  width:42px !important;height:40px !important;border:1px solid rgba(53,212,78,.22) !important;border-radius:9px !important;
  background:rgba(53,212,78,.045) !important;
}
header .hamburger .bar{left:10px !important;right:10px !important;background:#dce7df !important}
header .hamburger .bar:nth-child(1){top:10px}header .hamburger .bar:nth-child(2){top:19px}header .hamburger .bar:nth-child(3){top:28px}
header.menu-open .hamburger .bar:nth-child(1),header.menu-open .hamburger .bar:nth-child(3){top:19px}
@media(max-width:899.98px){
  header.sticky > .container{width:100% !important;min-height:64px;margin:0 auto !important;padding:7px 16px !important;border-radius:0}
  #site-menu{left:8px !important;right:8px !important;top:calc(var(--header-h) + 6px) !important;margin-right:0;padding:12px !important;gap:4px !important;border:1px solid rgba(53,212,78,.18) !important;border-radius:13px !important;background:linear-gradient(145deg,rgba(7,17,11,.985),rgba(3,9,6,.985)) !important;box-shadow:0 25px 65px rgba(0,0,0,.68) !important}
  #site-menu > a:not(.lang-switch),#site-menu > .nav-dropdown > .has-caret{width:100%;min-height:42px;font-size:1.02rem !important}
  #site-menu > a[href$="kontakt.html"],#site-menu > a[href$="contact.html"]{margin:5px 0 0 !important}
  header #site-menu .lang-switch{margin:7px auto 2px !important;padding-left:0 !important;border-left:0 !important}
  #site-menu > a:not(.lang-switch)::after,#site-menu > .nav-dropdown > .has-caret::before{bottom:1px}
  header .nav-dropdown .nav-menu{margin-top:5px !important;border-color:rgba(255,255,255,.08) !important;background:rgba(0,0,0,.24) !important;box-shadow:none !important}
}
/* === end technical navigation redesign === */

/* Keep the header aligned without forcing a visible scrollbar gutter. */
@media(min-width:900px){html.no-page-scroll header.sticky>.container{transform:translateX(var(--short-page-shift,0))}}

/* Global Back to Top control */
.markop-back-top{
  position:fixed;z-index:150000;right:8px;bottom:24px;
  width:54px;height:54px;display:grid;place-items:center;padding:0;border:1px solid rgba(53,212,78,.36);
  border-radius:11px;background:linear-gradient(145deg,rgba(10,24,15,.96),rgba(3,11,7,.98));
  color:#72e786;font:700 1.48rem/1 system-ui,sans-serif;box-shadow:0 16px 36px rgba(0,0,0,.45),0 0 20px rgba(53,212,78,.07);
  opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;cursor:pointer;
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.markop-back-top::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.045);border-radius:7px}
.markop-back-top:hover{color:#dff8e4;border-color:rgba(70,226,96,.7);transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 22px rgba(53,212,78,.14)}
.markop-back-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.markop-back-top:focus-visible{outline:2px solid #42dc5b;outline-offset:3px}
@media(max-width:899.98px){.markop-back-top{right:10px;bottom:18px;width:48px;height:48px;font-size:1.35rem}}
@media(prefers-reduced-motion:reduce){.markop-back-top{transition:none}}


/* MARKOPNET information architecture + footer */
.footer{overflow-x:clip}
.site-footer-inner{display:grid;gap:20px;width:100%;max-width:1200px;min-width:0;margin-left:auto;margin-right:auto;box-sizing:border-box}
.footer-links{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--accent)}
.footer-brand-line{width:100%;max-width:100%;min-width:0;color:var(--muted);font-size:13px;line-height:1.6;text-align:center;overflow-wrap:anywhere}
.footer-brand-mark{color:var(--text);font-weight:750;letter-spacing:.035em}
.footer-brand-mark span{color:var(--accent)}
.footer-brand-line a{color:var(--accent);font-weight:750;text-decoration:none;transition:color .2s ease}
.footer-brand-line a:hover,.footer-brand-line a:focus-visible{color:#8affaa;text-decoration:underline;text-underline-offset:3px}
.footer-bottom{width:100%;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:#738078;font-size:13px;text-align:center}
.nav-dropdown>.nav-link{font:inherit;letter-spacing:inherit}
.offer-card{display:flex;flex-direction:column;gap:14px;min-height:100%}
.info-grid.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.offer-card.featured{border-color:rgba(99,255,157,.42);box-shadow:0 18px 50px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04)}
.offer-card .service-points{margin-bottom:auto}
.offer-price{margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);color:var(--accent);font-weight:700}
.pricing-note{margin-top:18px;padding:22px 24px;display:grid;grid-template-columns:minmax(180px,.35fr) 1fr;gap:20px;align-items:start}
.pricing-note p{margin:0}
.process-list{display:grid;gap:14px}
.process-step{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:start;padding:24px}
.process-step>span{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(99,255,157,.35);border-radius:16px;color:var(--accent);font-family:'MarkopnetNav',Inter,sans-serif;font-size:20px;font-weight:700;background:rgba(99,255,157,.06)}
.process-step h2{margin:0 0 8px}
.process-step p{margin:0}
.process-rules{padding:28px}
.process-rules h2{margin-top:0}
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.rule-grid p{margin:0;padding:15px 0;border-top:1px solid rgba(255,255,255,.09)}
.tools-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tool-directory-card{display:flex;flex-direction:column;gap:18px;padding:24px;color:inherit;text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.tool-directory-card:hover{transform:translateY(-4px);border-color:rgba(99,255,157,.4);box-shadow:0 20px 50px rgba(0,0,0,.28)}
.tool-directory-card h2{font-size:1.25rem;margin:0 0 8px}
.tool-directory-card p{margin:0 0 16px}
.tool-directory-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;border:1px solid rgba(99,255,157,.34);background:linear-gradient(145deg,rgba(99,255,157,.16),rgba(99,255,157,.025));color:var(--accent);font-family:'MarkopnetNav',Inter,sans-serif;font-size:22px;font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.07)}
@media(max-width:900px){.info-grid.three{grid-template-columns:1fr;gap:16px}.tools-directory{grid-template-columns:1fr}.pricing-note{grid-template-columns:1fr}.rule-grid{grid-template-columns:1fr}}
@media(max-width:640px){.site-footer-inner{gap:16px}.footer-links{gap:12px 20px}.footer-brand-line{font-size:12.5px}.process-step{grid-template-columns:52px 1fr;gap:14px;padding:18px}.process-step>span{width:46px;height:46px;border-radius:13px;font-size:17px}}