/* =========================================================================
   Sakac tecH — design tokens
   ========================================================================= */

:root {
  /* Native form controls, scrollbars and <select> popups follow the
     active palette instead of the OS scheme. */
  color-scheme: dark;
  --sakac-tech-bg: #0B0F16;
  --sakac-tech-bg-rgb: 11, 15, 22;
  --sakac-tech-surface: #101624;
  --sakac-tech-surface-alt: #0D1220;
  --sakac-tech-chrome: #0E1420;
  --sakac-tech-text: #E6EDF6;
  --sakac-tech-text-strong: #C3D0E0;
  --sakac-tech-text-soft: #B9C6D9;
  --sakac-tech-muted-1: #8FA3BD;
  --sakac-tech-muted-2: #8496AB;
  --sakac-tech-muted-3: #6B7C93;
  --sakac-tech-muted-4: #5B6E88;
  /* Accent splits three ways: `accent` for links (dims in light mode for
     contrast), `accent-text` for accent-coloured labels/kickers (darkens
     further in light mode), `accent-fill` for solid button/pill fills (the
     mockup keeps the same #62B6FF fill in both themes, always with dark
     text on it). */
  --sakac-tech-accent: #62B6FF;
  --sakac-tech-accent-hover: #8FCBFF;
  --sakac-tech-accent-text: #62B6FF;
  --sakac-tech-accent-fill: #62B6FF;
  --sakac-tech-accent-fill-hover: #8FCBFF;
  --sakac-tech-on-accent: #0B0F16;
  --sakac-tech-accent-soft: rgba(98, 182, 255, .5);
  /* Same three-way split for the coral secondary: constant fill, a text tone
     that follows the theme, and the darker "strong" tone the subpages use
     for kickers and metric values. */
  --sakac-tech-secondary: #FF9E7A;
  --sakac-tech-secondary-text: #FF9E7A;
  --sakac-tech-secondary-strong: #C97A50;
  --sakac-tech-border: rgba(148, 180, 220, .1);
  --sakac-tech-border-card: rgba(148, 180, 220, .12);
  --sakac-tech-border-input: rgba(148, 180, 220, .18);
  --sakac-tech-border-menu: rgba(148, 180, 220, .22);
  --sakac-tech-border-control: rgba(148, 180, 220, .25);
  --sakac-tech-border-strong: rgba(148, 180, 220, .3);
  --sakac-tech-header-bg: rgba(11, 15, 22, .75);
  --sakac-tech-menu-bg: rgba(11, 15, 22, .97);
  --sakac-tech-fab-bg: rgba(16, 22, 36, .9);
  --sakac-tech-shot-stripes: repeating-linear-gradient(45deg, #131A2A, #131A2A 10px, #0F1522 10px, #0F1522 20px);
  --sakac-tech-font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sakac-tech-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* Layout: the mockup container is width:100%, max-width 1720px including
     its own fluid gutter padding (border-box). --sakac-tech-content is what is
     left for content at full width; the containment rule below centres
     children against it. */
  --sakac-tech-maxw: 1720px;
  --sakac-tech-maxw-narrow: 1440px;
  --sakac-tech-gutter: clamp(20px, 4.5vw, 88px);
  --sakac-tech-content: calc(var(--sakac-tech-maxw) - 2 * var(--sakac-tech-gutter));
  --sakac-tech-content-narrow: calc(var(--sakac-tech-maxw-narrow) - 2 * var(--sakac-tech-gutter));
  /* Radii scale straight from the mockups: chips/pills 3, controls/buttons 4,
     cards 6, big panels (terminal, blockquote, price rows) 12. */
  --sakac-tech-radius-chip: 3px;
  --sakac-tech-radius-control: 4px;
  --sakac-tech-radius-card: 6px;
  --sakac-tech-radius-panel: 12px;
  --sakac-tech-header-h: 67px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --sakac-tech-bg: #F7F9FC;
  --sakac-tech-bg-rgb: 247, 249, 252;
  --sakac-tech-surface: #FFFFFF;
  --sakac-tech-surface-alt: #EDF2F8;
  --sakac-tech-text: #08111B;
  --sakac-tech-text-strong: #142334;
  --sakac-tech-text-soft: #1F2E3E;
  --sakac-tech-muted-1: #3F5064;
  --sakac-tech-muted-2: #445466;
  --sakac-tech-muted-3: #6C7C90;
  --sakac-tech-muted-4: #7C8CA0;
  --sakac-tech-accent: #1F6FC4;
  --sakac-tech-accent-hover: #14508F;
  --sakac-tech-accent-text: #12558F;
  --sakac-tech-accent-soft: rgba(18, 85, 143, .5);
  /* fit(#FF9E7A) walked toward black until 4.6:1 on #F7F9FC — the same
     algorithm the mockup runs at runtime. */
  --sakac-tech-secondary-text: #995F49;
  --sakac-tech-secondary-strong: #995F49;
  --sakac-tech-border: #E2E9F3;
  --sakac-tech-border-card: #DEE6F1;
  --sakac-tech-border-input: #D2DCEA;
  --sakac-tech-border-menu: #D2DCEA;
  --sakac-tech-border-control: #C9D5E6;
  --sakac-tech-border-strong: #C9D5E6;
  --sakac-tech-header-bg: rgba(247, 249, 252, .82);
  --sakac-tech-menu-bg: rgba(247, 249, 252, .97);
  --sakac-tech-fab-bg: rgba(255, 255, 255, .92);
  --sakac-tech-shot-stripes: repeating-linear-gradient(45deg, #E7EEF7, #E7EEF7 10px, #F1F5FB 10px, #F1F5FB 20px);
}

/* =========================================================================
   Base
   ========================================================================= */

/* theme.json presets are static hex values, so any block coloured through the
   palette (including content written under the old sakac-tech theme, which used
   a `muted` slug Sakac tecH doesn't have) would ignore the light/dark toggle and
   stay near-white on a light background. Re-point the preset vars at the
   theme tokens — declared on `body`, the same element the light overrides sit
   on, so the substitution picks up the active theme's values. */
body {
  --wp--preset--color--bg: var(--sakac-tech-bg);
  --wp--preset--color--surface: var(--sakac-tech-surface);
  --wp--preset--color--surface-alt: var(--sakac-tech-surface-alt);
  --wp--preset--color--ink: var(--sakac-tech-text);
  --wp--preset--color--ink-strong: var(--sakac-tech-text-strong);
  --wp--preset--color--ink-soft: var(--sakac-tech-text-soft);
  --wp--preset--color--muted-1: var(--sakac-tech-muted-1);
  --wp--preset--color--muted-2: var(--sakac-tech-muted-2);
  --wp--preset--color--muted-3: var(--sakac-tech-muted-3);
  --wp--preset--color--muted-4: var(--sakac-tech-muted-4);
  --wp--preset--color--accent: var(--sakac-tech-accent);
  --wp--preset--color--accent-hover: var(--sakac-tech-accent-hover);
  --wp--preset--color--secondary: var(--sakac-tech-secondary);
  --wp--preset--color--secondary-strong: var(--sakac-tech-secondary-strong);
  /* legacy sakac-tech slug, still present in existing post content */
  --wp--preset--color--muted: var(--sakac-tech-muted-1);
}

/* WP block wrappers are border-box; the theme's own containers must match or
   equal max-widths resolve to different edges and sections stop lining up. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--sakac-tech-bg);
  color: var(--sakac-tech-text);
  font-family: var(--sakac-tech-font-sans);
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(98, 182, 255, .35); }

/* <main> is not the first child of .wp-site-blocks (the header part is), so
   WP's flow layout gives it a 24px block-start margin — visible as a gap
   between the header and a full-bleed hero. The footer template part gets the
   same 24px for the same reason — visible as a hole between the last section
   (most obviously the project prev/next strip) and the footer's border-top. */
.wp-site-blocks > main { margin-block-start: 0 !important; }
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0 !important; }

/* Anchor targets must clear the sticky header when jumped to. */
[id] { scroll-margin-top: calc(var(--sakac-tech-header-h) + 6px); }

body a { color: var(--sakac-tech-accent); text-decoration: none; }
body a:hover { color: var(--sakac-tech-accent-hover); }

.sakac-tech-kicker {
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-secondary-text);
  margin-bottom: 12px;
  display: block;
}

.sakac-tech-section {
  padding: clamp(64px, 10vw, 110px) var(--sakac-tech-gutter);
  border-bottom: 1px solid var(--sakac-tech-border);
}

.sakac-tech-section--alt { background: var(--sakac-tech-surface-alt); }

.sakac-tech-section__inner {
  max-width: var(--sakac-tech-content);
  margin: 0 auto;
}

/* Own containment (sections/hero use WP flow layout, not constrained — the
   global constrained rule's !important auto-margins centre max-width children,
   which fights the design's left alignment). The calc margin puts every
   child's LEFT edge on the container edge: full-width children end up
   centered, narrower ones (the h2) stay left-aligned with the kicker instead
   of floating to the middle. */
.sakac-tech-section > * {
  max-width: var(--sakac-tech-content);
  margin-left: max(0px, calc((100% - var(--sakac-tech-content)) / 2));
  margin-right: max(0px, calc((100% - var(--sakac-tech-content)) / 2));
}

.sakac-tech-hero__content {
  width: 100%;
  max-width: var(--sakac-tech-content);
  margin: 0 auto;
}

.sakac-tech-section h2 {
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -.025em;
  font-weight: 700;
  /* Only block margins — the inline (left/right) margins come from the
     `.sakac-tech-section > *` containment rule; a `margin` shorthand here would
     zero them and push the h2 out to the page edge. */
  margin-top: 0;
  margin-bottom: 46px;
  max-width: 22ch;
  transform-origin: left center;
}

/* Hero content children left-align inside .sakac-tech-hero__content (its own
   container). Section h2s are handled by the calc margins above — do NOT
   zero them here or the h2 escapes the container to the page edge. */
.sakac-tech-hero h1,
.sakac-tech-hero__sub,
.sakac-tech-terminal {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   Keyframes
   ========================================================================= */

@keyframes sakac-tech-wordIn { 0% { opacity: 0; transform: translateY(14px) skewY(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes sakac-tech-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sakac-tech-gridDrift { 0% { background-position: 0 0; } 100% { background-position: 56px 56px; } }
@keyframes sakac-tech-heroDrift { 0% { transform: scale(1.04) translateX(0); } 100% { transform: scale(1.1) translateX(-1.5%); } }
@keyframes sakac-tech-mesh2 { 0% { transform: translate(10%, 12%) scale(1.15); } 100% { transform: translate(-10%, -10%) scale(.95); } }
@keyframes sakac-tech-menuIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes sakac-tech-traceFlow { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } }
@keyframes sakac-tech-padBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes sakac-tech-fabIn { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 100% { opacity: 1; transform: none; } }

/* =========================================================================
   Header / nav
   ========================================================================= */

/* WP wraps a template part in its own element, and a sticky child can only
   stick inside that wrapper — which is exactly as tall as the header, so the
   header scrolled away. The wrapper itself has to be the sticky one. */
header.wp-block-template-part {
  position: sticky;
  top: var(--sakac-tech-adminbar, 0px);
  z-index: 50;
}

/* Logged-in offset: the WP admin bar is fixed over the top of the page, so
   the sticky header has to stick below it — 32px on desktop, 46px under
   783px. Under 600px core makes the bar position:absolute (it scrolls away
   with the page), so the offset goes back to 0 or the header would stick
   with a permanent hole above it. Redefining --sakac-tech-header-h in the
   same stroke shifts everything measured from the stuck header's bottom
   edge (anchor scroll-margins, sticky filters, both asides) automatically. */
body.admin-bar {
  --sakac-tech-adminbar: 32px;
  /* 67px mirrors the :root --sakac-tech-header-h token. */
  --sakac-tech-header-h: calc(67px + var(--sakac-tech-adminbar));
}

@media (max-width: 782px) {
  body.admin-bar { --sakac-tech-adminbar: 46px; }
}

@media (max-width: 600px) {
  body.admin-bar { --sakac-tech-adminbar: 0px; }
}

.sakac-tech-header {
  position: sticky;
  top: var(--sakac-tech-adminbar, 0px);
  z-index: 50;
  background: var(--sakac-tech-header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sakac-tech-border-card);
}

.sakac-tech-header__bar {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: 14px var(--sakac-tech-gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.sakac-tech-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--sakac-tech-text);
}

.sakac-tech-logo:hover { color: var(--sakac-tech-text); }

/* The mark is the "pločica" from the v2 sheet: a board with mounting holes and
   an S-shaped copper trace that a coral impulse runs through. Colours come from
   the accent/secondary tokens so the mark follows the light theme too. */
.sakac-tech-logo__mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
}

.sakac-tech-logo__board,
.sakac-tech-logo__hole { stroke: var(--sakac-tech-accent-soft); }

.sakac-tech-logo__trace { stroke: var(--sakac-tech-accent-text); }

.sakac-tech-logo__pulse {
  stroke: var(--sakac-tech-secondary-text);
  animation: sakac-tech-traceFlow 2.6s linear infinite;
}

.sakac-tech-logo__pad { fill: var(--sakac-tech-accent-text); }
.sakac-tech-logo__pad--coral { fill: var(--sakac-tech-secondary-text); }
.sakac-tech-logo__pad--live { animation: sakac-tech-padBlink 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .sakac-tech-logo__pulse { display: none; }
  .sakac-tech-logo__pad--live { animation: none; }
}

.sakac-tech-header__nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 15px;
  align-items: center;
}

.sakac-tech-header__nav > a { margin-right: 6px; }
.sakac-tech-header__nav a { color: var(--sakac-tech-muted-1); }
.sakac-tech-header__nav a:hover,
.sakac-tech-header__nav a[aria-current="page"] { color: var(--sakac-tech-text); }

/* The CTA sits inside .sakac-tech-header__nav, whose link-color rule above has
   higher specificity than .sakac-tech-header__cta alone — re-assert the button
   text color or "Kontakt" renders washed-out muted-on-accent. */
.sakac-tech-header__nav a.sakac-tech-header__cta { color: var(--sakac-tech-on-accent); }
.sakac-tech-header__nav a.sakac-tech-header__cta:hover { color: var(--sakac-tech-on-accent); }

.sakac-tech-header__cta {
  background: var(--sakac-tech-accent-fill);
  color: var(--sakac-tech-on-accent);
  font-weight: 600;
  font-size: 14px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--sakac-tech-radius-control);
  display: inline-flex;
  align-items: center;
  transition: all .2s;
}

.sakac-tech-header__cta:hover {
  background: var(--sakac-tech-accent-fill-hover);
  transform: translateY(-1px);
}

/* Buttons — native wp:button blocks put the className on the .wp-block-button
   wrapper, not the visible/clickable element — style the nested
   .wp-block-button__link anchor directly (and keep a plain `a.sakac-tech-btn`
   selector for the few places the class sits on a bare <a>). */
.sakac-tech-btn .wp-block-button__link,
a.sakac-tech-btn,
button.sakac-tech-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sakac-tech-accent-fill);
  color: var(--sakac-tech-on-accent);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 16px);
  height: 44px;
  padding: 0 clamp(18px, 2.6vw, 28px);
  border-radius: var(--sakac-tech-radius-control);
  border: none;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--sakac-tech-font-sans);
}

.sakac-tech-btn .wp-block-button__link:hover,
a.sakac-tech-btn:hover,
button.sakac-tech-btn:hover {
  background: var(--sakac-tech-accent-fill-hover);
  color: var(--sakac-tech-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(98, 182, 255, .3);
}

.sakac-tech-btn--outline .wp-block-button__link,
a.sakac-tech-btn--outline {
  background: transparent;
  color: var(--sakac-tech-text);
  font-weight: 500;
  border: 1px solid var(--sakac-tech-border-strong);
  box-shadow: none;
}

.sakac-tech-btn--outline .wp-block-button__link:hover,
a.sakac-tech-btn--outline:hover {
  background: transparent;
  border-color: var(--sakac-tech-accent);
  color: var(--sakac-tech-accent);
  box-shadow: none;
}

/* Square bordered controls: theme toggle (38px, desktop) */
.sakac-tech-theme-toggle {
  background: transparent;
  border: 1px solid var(--sakac-tech-border-control);
  border-radius: var(--sakac-tech-radius-control);
  cursor: pointer;
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-grid;
  place-items: center;
  color: var(--sakac-tech-muted-1);
  transition: all .2s;
}

.sakac-tech-theme-toggle:hover { border-color: var(--sakac-tech-accent); color: var(--sakac-tech-accent); }
.sakac-tech-theme-toggle svg { width: 15px; height: 15px; display: block; }

/* Sun in dark mode, moon in light — CSS swap keyed off the body attribute.
   Selectors repeat the base class so they outrank `.sakac-tech-theme-toggle svg`. */
.sakac-tech-theme-toggle svg.sakac-tech-theme-toggle__moon { display: none; }
:root[data-theme="light"] .sakac-tech-theme-toggle svg.sakac-tech-theme-toggle__sun { display: none; }
:root[data-theme="light"] .sakac-tech-theme-toggle svg.sakac-tech-theme-toggle__moon { display: block; }

/* Language dropdown (desktop) / segmented codes (inside the mobile menu). */
.sakac-tech-lang { position: relative; }

.sakac-tech-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--sakac-tech-border-control);
  border-radius: var(--sakac-tech-radius-control);
  cursor: pointer;
  height: 38px;
  padding: 0 10px;
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-text);
  transition: all .2s;
}

.sakac-tech-lang__btn:hover { border-color: var(--sakac-tech-accent); color: var(--sakac-tech-accent); }
.sakac-tech-lang__btn svg { transition: transform .2s; }
.sakac-tech-lang.is-open .sakac-tech-lang__btn svg { transform: rotate(180deg); }

.sakac-tech-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-menu);
  border-radius: var(--sakac-tech-radius-control);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  z-index: 80;
  display: none;
}

.sakac-tech-lang.is-open .sakac-tech-lang__menu {
  display: block;
  animation: sakac-tech-menuIn .18s cubic-bezier(.2, .7, .2, 1);
}

.sakac-tech-lang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-muted-1);
  padding: 11px 14px;
}

.sakac-tech-lang__item:hover { background: rgba(98, 182, 255, .12); color: var(--sakac-tech-text); }
.sakac-tech-lang__item.is-current { background: rgba(98, 182, 255, .16); color: var(--sakac-tech-text); }
.sakac-tech-lang__code { font-weight: 600; }

/* Burger (mobile only) */
.sakac-tech-burger {
  display: none;
  background: transparent;
  border: none;
  color: var(--sakac-tech-text);
  padding: 10px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  place-items: center;
}

.sakac-tech-burger__box { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.sakac-tech-burger__bar { height: 2px; border-radius: 2px; background: var(--sakac-tech-text); transition: transform .2s, opacity .2s; }
.sakac-tech-burger__bar--mid { background: var(--sakac-tech-accent-text); width: 16px; }

/* Open state: the two outer bars fold into the coral-free accent X. */
.sakac-tech-burger[aria-expanded="true"] .sakac-tech-burger__bar { background: var(--sakac-tech-accent-text); }
.sakac-tech-burger[aria-expanded="true"] .sakac-tech-burger__bar:first-child { transform: translateY(7px) rotate(45deg); }
.sakac-tech-burger[aria-expanded="true"] .sakac-tech-burger__bar--mid { opacity: 0; }
.sakac-tech-burger[aria-expanded="true"] .sakac-tech-burger__bar:last-child { transform: translateY(-7px) rotate(-45deg); }

.sakac-tech-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* WP's flow layout gives every non-first child of the header group a
     margin-block-start (24px blockGap) — and on an absolutely positioned box
     that margin stacks on top of `top: 100%`, opening a visible gap between
     the header and the dropdown. */
  margin: 0;
  z-index: 60;
  flex-direction: column;
  padding: 10px var(--sakac-tech-gutter) 24px;
  /* Opaque and full-height: at .97 the hero title read through the menu
     items like a rendering glitch, and a short panel left the page
     scrolling underneath. The body is scroll-locked while it is open. */
  background: var(--sakac-tech-bg);
  min-height: calc(100dvh - var(--sakac-tech-header-h));
  max-height: calc(100dvh - var(--sakac-tech-header-h));
  overflow-y: auto;
  border-bottom: 1px solid var(--sakac-tech-border-card);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
}

body.sakac-tech-menu-open { overflow: hidden; }

.sakac-tech-mobile-menu.is-open {
  display: flex;
  animation: sakac-tech-menuIn .25s cubic-bezier(.2, .7, .2, 1);
}

.sakac-tech-mobile-menu > a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--sakac-tech-text);
  padding: 15px 4px;
  font-size: 18px;
  font-weight: 500;
  border-bottom: 1px solid rgba(148, 180, 220, .08);
}

:root[data-theme="light"] .sakac-tech-mobile-menu > a { border-bottom-color: var(--sakac-tech-border); }

.sakac-tech-mobile-menu__num {
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-accent-text);
}

.sakac-tech-mobile-menu__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.sakac-tech-mobile-menu__row .sakac-tech-header__cta {
  flex: 1;
  justify-content: center;
  height: auto;
  padding: 13px;
  font-size: 15px;
}

.sakac-tech-mobile-menu__row .sakac-tech-theme-toggle { width: 44px; height: 44px; }
.sakac-tech-mobile-menu__row .sakac-tech-theme-toggle svg { width: 17px; height: 17px; }

/* Inside the mobile row the same dropdown markup renders as a segmented
   control: codes only, inline, no popover chrome. */
.sakac-tech-mobile-menu__row .sakac-tech-lang__btn { display: none; }
.sakac-tech-mobile-menu__row .sakac-tech-lang__menu {
  display: flex;
  position: static;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--sakac-tech-border-control);
  border-radius: var(--sakac-tech-radius-control);
  box-shadow: none;
  overflow: hidden;
}
.sakac-tech-mobile-menu__row .sakac-tech-lang__item {
  width: auto;
  padding: 13px 12px;
  min-height: 44px;
  color: var(--sakac-tech-muted-1);
}
.sakac-tech-mobile-menu__row .sakac-tech-lang__item + .sakac-tech-lang__item { border-left: 1px solid rgba(148, 180, 220, .2); }
.sakac-tech-mobile-menu__row .sakac-tech-lang__item.is-current { color: var(--sakac-tech-text); }
.sakac-tech-mobile-menu__row .sakac-tech-lang__name { display: none; }

/* Absolute overlay on the header's bottom edge, NOT a flow child: the track
   is JS-appended only on single posts, and as a normal child it added its 2px
   to the header — the one page type with a 69px header while every other page
   sat at 67px. bottom:-1px lays it over the header's 1px border (same
   border-card colour), so the empty track is invisible and only the accent
   progress fill reads as new. .sakac-tech-header is sticky, hence positioned,
   so it's a valid absolute containing block. */
.sakac-tech-header__progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--sakac-tech-border-card);
}

.sakac-tech-header__progress {
  height: 2px;
  background: var(--sakac-tech-accent);
  width: 0%;
}

@media (max-width: 880px) {
  .sakac-tech-header__nav > a,
  .sakac-tech-header__desktop-only { display: none; }
  .sakac-tech-burger { display: grid; }
}

/* =========================================================================
   Hero (terminal variant)
   ========================================================================= */

.sakac-tech-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82vh;
  /* 130px of top padding pushed the CTA buttons under the fold on 1440×900;
     the content is centred in 82vh anyway, so the padding only needs to
     keep it off the header and the bottom edge. */
  padding: clamp(28px, 6vw, 80px) var(--sakac-tech-gutter);
}

/* Both hero photos are picked here, by theme, rather than swapped from the
   toggle script: the light variant must be part of the first paint (the
   theme attribute is set in <head> before this stylesheet loads) and only
   one of the two files should ever be downloaded. Paths are relative to
   this file. */
.sakac-tech-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-bg.webp');
  background-size: cover;
  background-position: 68% center;
  animation: sakac-tech-heroDrift 26s ease-in-out infinite alternate;
  z-index: 0;
}

:root[data-theme="light"] .sakac-tech-hero__bg {
  background-image: url('../images/hero-bg-light.webp');
}

/* Exact scrim recipe from the mockup: a strong left-to-right dark wash
   (also hides the photo's bright top-left glow), a bottom fade, and an
   animated secondary-color glow blob bottom-right. */
.sakac-tech-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--sakac-tech-bg) 6%, rgba(var(--sakac-tech-bg-rgb), .86) 38%, rgba(var(--sakac-tech-bg-rgb), .35) 68%, rgba(var(--sakac-tech-bg-rgb), .12) 100%),
    linear-gradient(to top, var(--sakac-tech-bg) 0%, transparent 34%);
  z-index: 1;
}

.sakac-tech-hero__scrim::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  bottom: -220px;
  right: -100px;
  background: radial-gradient(circle, rgba(255, 158, 122, .19), transparent 65%);
  filter: blur(60px);
  animation: sakac-tech-mesh2 20s ease-in-out infinite alternate;
}

/* min-width: 0 — the content is a flex item, and without it the terminal's
   white-space:pre lines set a min-content floor that pushes the whole page
   wider than a phone viewport. */
.sakac-tech-hero__content { position: relative; z-index: 2; min-width: 0; }

.sakac-tech-hero h1 {
  font-size: clamp(32px, 7vw, 68px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 clamp(16px, 3vw, 26px);
  max-width: 15ch;
}

.sakac-tech-hero__word {
  color: var(--sakac-tech-secondary-text);
  display: inline-block;
  animation: sakac-tech-wordIn .55s cubic-bezier(.2, .7, .2, 1);
}

.sakac-tech-hero__sub {
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.6;
  color: var(--sakac-tech-muted-1);
  max-width: 54ch;
  margin: 0 0 clamp(20px, 4vw, 34px);
}

.sakac-tech-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 0; }

/* The terminal stays a dark artefact in both themes — the mockup pins its
   chrome to the dark palette and only relaxes the border in light mode. */
.sakac-tech-terminal {
  max-width: 560px;
  margin: 0 0 clamp(16px, 3vw, 26px);
  border-radius: var(--sakac-tech-radius-panel);
  border: 1px solid rgba(148, 180, 220, .18);
  background: #0E1420;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

:root[data-theme="light"] .sakac-tech-terminal { border-color: rgba(148, 180, 220, .28); }

.sakac-tech-terminal__bar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 180, 220, .1);
}

.sakac-tech-terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: #6B7C93; }
.sakac-tech-terminal__dot--accent { background: var(--sakac-tech-secondary); }

.sakac-tech-terminal__body {
  font-family: var(--sakac-tech-font-mono);
  font-size: clamp(11.5px, 3vw, 13.5px);
  line-height: 1.9;
  padding: clamp(12px, 3vw, 18px);
  height: clamp(118px, 30vw, 200px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #8FA3BD;
}

.sakac-tech-terminal__line { display: flex; gap: 8px; white-space: pre; }
.sakac-tech-terminal__prefix--cmd { color: var(--sakac-tech-secondary); }
.sakac-tech-terminal__prefix--ok { color: #62B6FF; }
.sakac-tech-terminal__prefix--run { color: var(--sakac-tech-secondary); }

.sakac-tech-terminal__caret {
  display: inline-block;
  animation: sakac-tech-blink 1s step-end infinite;
  color: #62B6FF;
}

/* =========================================================================
   Usluge / Proces / Projekti / Cijene — card grids
   ========================================================================= */

.sakac-tech-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 21vw, 360px), 1fr)); gap: 18px; }
.sakac-tech-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(215px, 17vw, 300px), 1fr)); gap: 18px; }

.sakac-tech-card {
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  padding: 30px;
  transition: all .25s;
}

.sakac-tech-card:hover { border-color: var(--sakac-tech-accent-soft); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }

.sakac-tech-card__glyph {
  font-family: var(--sakac-tech-font-mono);
  font-size: 22px;
  color: var(--sakac-tech-accent-text);
  margin-bottom: 18px;
  display: block;
}

/* The middle service card carries the coral glyph in the mockup. */
.sakac-tech-card__glyph--secondary { color: var(--sakac-tech-secondary-text); }

.sakac-tech-card h3 { font-size: 21px; font-weight: 600; margin: 0 0 12px; }
.sakac-tech-card h3 a,
.sakac-tech-blog-teaser-card h3 a { color: var(--sakac-tech-text); }
.sakac-tech-card:hover h3 a,
.sakac-tech-blog-teaser-card:hover h3 a { color: var(--sakac-tech-text); }
.sakac-tech-card p { font-size: 15px; line-height: 1.65; color: var(--sakac-tech-muted-1); margin: 0 0 18px; }
.sakac-tech-card__tag { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); margin-bottom: 0; }

/* Only the cards that actually carry a link become flex columns — that is
   what lets margin-top:auto pin the link to the bottom, so the three links
   line up even when the copy above them differs in length. The class is set
   in the pattern rather than matched with :has(), so the layout does not
   depend on selector support at all. */
.sakac-tech-card--linked {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sakac-tech-card__more { margin-top: auto; padding-top: 14px; font-size: 14px; margin-bottom: 0; }
.sakac-tech-card__more a {
  color: var(--sakac-tech-accent);
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.sakac-tech-card__more a:hover span,
.sakac-tech-card__more a:focus-visible span { transform: translateX(3px); }
.sakac-tech-card__more span { transition: transform 0.18s ease; }

.sakac-tech-step {
  border-left: 1px solid rgba(98, 182, 255, .35);
  padding: 4px 0 4px 22px;
}

.sakac-tech-step--last { border-left-color: var(--sakac-tech-secondary-text); }

.sakac-tech-step__num { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-accent-text); display: block; margin-bottom: 10px; }
.sakac-tech-step--last .sakac-tech-step__num { color: var(--sakac-tech-secondary-text); }
.sakac-tech-step h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.sakac-tech-step p { font-size: 14.5px; line-height: 1.6; color: var(--sakac-tech-muted-1); margin: 0; }

.sakac-tech-stack {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--sakac-tech-border);
}

.sakac-tech-stack__label { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-muted-2); display: block; margin-bottom: 18px; }
.sakac-tech-stack__tags { display: flex; flex-wrap: wrap; gap: 10px; }

.sakac-tech-pill {
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-muted-1);
  border: 1px solid var(--sakac-tech-border-input);
  border-radius: var(--sakac-tech-radius-chip);
  padding: 7px 16px;
  margin: 0;
  transition: all .2s;
}

.sakac-tech-pill:hover { border-color: var(--sakac-tech-accent); color: var(--sakac-tech-accent); }

/* Landing project teasers (wp:query cards) */
.sakac-tech-card--project { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.sakac-tech-project-card__shot {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: var(--sakac-tech-shot-stripes);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sakac-tech-muted-2);
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  text-align: center;
  padding: 12px;
  overflow: hidden;
}

.sakac-tech-project-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sakac-tech-project-card__shot:has(img) { padding: 0; }

.sakac-tech-card--project .sakac-tech-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.sakac-tech-card--project .sakac-tech-card__cat { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-accent-text); margin-bottom: 10px; display: block; }
.sakac-tech-card--project h3 { font-size: 20px; margin-bottom: 10px; }
.sakac-tech-card--project p { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }

.sakac-tech-project-card__metric { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-secondary-text); display: block; margin-top: auto; }

.sakac-tech-price-card {
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  padding: 30px;
  position: relative;
}

.sakac-tech-price-card--featured { border-color: var(--sakac-tech-secondary-text); }

.sakac-tech-price-card__badge {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--sakac-tech-secondary);
  color: #0B0F16;
  font-family: var(--sakac-tech-font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--sakac-tech-radius-chip);
  margin: 0;
}

.sakac-tech-price-card__kicker { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-1); display: block; margin-bottom: 16px; }
.sakac-tech-price-card h3 { font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.sakac-tech-price-card p { font-size: 14.5px; line-height: 1.6; color: var(--sakac-tech-muted-1); margin: 0 0 20px; }
.sakac-tech-price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sakac-tech-price-card li { font-size: 14px; color: var(--sakac-tech-text-soft); display: flex; gap: 10px; }
.sakac-tech-price-card li::before { content: '✓'; color: var(--sakac-tech-accent-text); }

/* Pricing shows two models side by side (mockup dropped the middle plan). */
.sakac-tech-grid-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 21vw, 360px), 1fr)); gap: 18px; align-items: start; }

/* =========================================================================
   Blog teaser (landing)
   ========================================================================= */

.sakac-tech-section__head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 0; flex-wrap: wrap; }
.sakac-tech-section__head-row h2 { margin-left: 0; margin-right: 0; }
.sakac-tech-section__head-link { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-accent); white-space: nowrap; }

.sakac-tech-blog-teaser-card {
  display: block;
  color: var(--sakac-tech-text);
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  padding: 26px;
  transition: all .25s;
}
.sakac-tech-blog-teaser-card:hover { border-color: var(--sakac-tech-accent-soft); background: var(--sakac-tech-surface); color: var(--sakac-tech-text); }
.sakac-tech-blog-teaser-card__meta { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); display: block; margin-bottom: 14px; }
.sakac-tech-blog-teaser-card h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; line-height: 1.35; }
.sakac-tech-blog-teaser-card p { font-size: 14px; line-height: 1.6; color: var(--sakac-tech-muted-1); margin: 0; }

/* =========================================================================
   Kontakt (landing section) — layout + re-skin of sakac-tech-contact-mailer
   ========================================================================= */

.sakac-tech-kontakt { position: relative; text-align: center; overflow: hidden; }

.sakac-tech-kontakt__glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  bottom: -260px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(98, 182, 255, .15), transparent 65%);
  filter: blur(50px);
  z-index: 0;
}

.sakac-tech-kontakt__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sakac-tech-kontakt h2 { margin: 0 0 14px; max-width: none; }
.sakac-tech-kontakt__sub { color: var(--sakac-tech-muted-1); font-size: 16px; line-height: 1.6; margin: 0 0 44px; }

.sakac-tech-kontakt .sakac-tech-contact-form { text-align: left; }

/* Mockup layout: name + email side by side (a true 50/50 — auto-fit used
   to squeeze a third, empty column into the 720px container), message and
   submit full width. The plugin renders fields as sequential divs — grid them. */
.sakac-tech-kontakt .sakac-tech-contact-form form,
.sakac-tech-kontakt form.sakac-tech-contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 600px) {
  .sakac-tech-kontakt .sakac-tech-contact-form form,
  .sakac-tech-kontakt form.sakac-tech-contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sakac-tech-kontakt .sakac-tech-contact-form .sakac-tech-contact-form__field--textarea,
.sakac-tech-kontakt .sakac-tech-contact-form .sakac-tech-contact-form__notice,
.sakac-tech-kontakt .sakac-tech-contact-form button[type="submit"],
.sakac-tech-kontakt .sakac-tech-contact-form p:last-of-type {
  grid-column: 1 / -1;
}

.sakac-tech-kontakt .sakac-tech-contact-form .sakac-tech-contact-form__field { margin-bottom: 0; }
.sakac-tech-kontakt .sakac-tech-contact-form p { margin: 0; }

/* The mockup form has placeholder-only fields; the accessible labels stay in
   the DOM for screen readers but leave the visual layout. */
.sakac-tech-kontakt .sakac-tech-contact-form__field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sakac-tech-kontakt .sakac-tech-contact-form__field { position: relative; }

.sakac-tech-kontakt .sakac-tech-contact-form input:not([type="checkbox"]):not([type="radio"]),
.sakac-tech-kontakt .sakac-tech-contact-form textarea,
.sakac-tech-kontakt .sakac-tech-contact-form select {
  width: 100%;
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-input);
  border-radius: var(--sakac-tech-radius-control);
  height: 46px;
  padding: 0 16px;
  color: var(--sakac-tech-text);
  font-family: var(--sakac-tech-font-sans);
  font-size: 15px;
  outline: none;
}

.sakac-tech-kontakt .sakac-tech-contact-form textarea { height: auto; padding: 15px 16px; resize: vertical; min-height: 120px; }

.sakac-tech-kontakt .sakac-tech-contact-form input:focus,
.sakac-tech-kontakt .sakac-tech-contact-form textarea:focus { border-color: var(--sakac-tech-accent); }

input::placeholder,
textarea::placeholder { color: var(--sakac-tech-muted-3); }

.sakac-tech-kontakt .sakac-tech-contact-form button[type="submit"] {
  background: var(--sakac-tech-accent-fill);
  color: var(--sakac-tech-on-accent);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 16px);
  height: 46px;
  padding: 0;
  border: none;
  border-radius: var(--sakac-tech-radius-control);
  cursor: pointer;
  font-family: var(--sakac-tech-font-sans);
  transition: all .2s;
  width: 100%;
}

.sakac-tech-kontakt .sakac-tech-contact-form button[type="submit"]:hover {
  background: var(--sakac-tech-accent-fill-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(98, 182, 255, .3);
}

.sakac-tech-kontakt__or { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); margin-top: 20px; }
/* Underlined, not just a lighter grey: inside a sentence, colour alone
   leaves the link invisible to anyone who cannot distinguish the two greys. */
.sakac-tech-kontakt__or a {
  color: var(--sakac-tech-muted-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sakac-tech-kontakt__or a:hover,
.sakac-tech-kontakt__or a:focus-visible { color: var(--sakac-tech-accent); }

.sakac-tech-kontakt .sakac-tech-contact-form__notice {
  border-radius: var(--sakac-tech-radius-control);
  padding: 14px 18px;
  margin-bottom: 4px;
  font-size: 14px;
}

/* Doubled class: the mailer prints its own pastel notice colours in an
   inline <style> inside the form (specificity 0-1-0, later in the
   document), so a single-class rule here loses in both themes. */
.sakac-tech-contact-form__notice.sakac-tech-contact-form__notice--success { background: rgba(111, 207, 151, .12); border: 1px solid rgba(111, 207, 151, .35); color: #6FCF97; }
.sakac-tech-contact-form__notice.sakac-tech-contact-form__notice--error { background: rgba(255, 122, 122, .12); border: 1px solid rgba(255, 122, 122, .35); color: #FF7A7A; }
:root[data-theme="light"] .sakac-tech-contact-form__notice.sakac-tech-contact-form__notice--success { background: rgba(30, 122, 76, .08); border-color: rgba(30, 122, 76, .3); color: #1E7A4C; }
:root[data-theme="light"] .sakac-tech-contact-form__notice.sakac-tech-contact-form__notice--error { background: rgba(178, 58, 58, .08); border-color: rgba(178, 58, 58, .3); color: #B23A3A; }

/* =========================================================================
   Footer / FAB
   ========================================================================= */

.sakac-tech-footer {
  padding: 36px 0;
  border-top: 1px solid var(--sakac-tech-border);
}

/* Same box formula as .sakac-tech-header__bar: max-width 1720 INCLUDING the
   gutter as the inner's own border-box padding. The gutter used to sit on the
   outer element instead, so the inner's 1720 was pure content — a full
   2×gutter wider than the header/main content and starting at a different x
   on wide screens. */
.sakac-tech-footer__inner {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: 0 var(--sakac-tech-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}

.sakac-tech-footer .sakac-tech-logo { font-size: 17px; }
.sakac-tech-footer .sakac-tech-logo__mark { width: 24px; height: 24px; }
.sakac-tech-footer__tag { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); margin-left: 6px; }
.sakac-tech-footer__nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.sakac-tech-footer__nav a { color: var(--sakac-tech-muted-1); }
.sakac-tech-footer__nav a:hover { color: var(--sakac-tech-accent); }
.sakac-tech-footer__rights { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); }

.sakac-tech-scroll-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 70;
  width: 46px;
  height: 46px;
  border-radius: var(--sakac-tech-radius-chip);
  border: 1px solid rgba(98, 182, 255, .35);
  background: var(--sakac-tech-fab-bg);
  backdrop-filter: blur(12px);
  color: var(--sakac-tech-accent-text);
  font-size: 17px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transition: all .2s;
}

.sakac-tech-scroll-top.is-visible { display: flex; animation: sakac-tech-fabIn .3s cubic-bezier(.2, .7, .2, 1); }
.sakac-tech-scroll-top:hover { background: var(--sakac-tech-accent-fill); color: var(--sakac-tech-on-accent); border-color: var(--sakac-tech-accent-fill); transform: translateY(-3px); }

/* -----------------------------------------------------------------
   Pages (about, legal) — plain constrained content
   ----------------------------------------------------------------- */

.sakac-tech-page {
  padding-top: clamp(48px, 8vw, 96px);
  --sakac-tech-page-pad-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(56px, 9vw, 112px);
}

/* -----------------------------------------------------------------
   Shared sub-page hero: animated blueprint grid + kicker + h1 + lede.
   Used by usluge / projekti / blog / kontakt page headers.
   ----------------------------------------------------------------- */

.sakac-tech-page-hero { position: relative; overflow: hidden; }

.sakac-tech-page-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(98, 182, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 182, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: sakac-tech-gridDrift 12s linear infinite;
  mask-image: radial-gradient(ellipse 85% 90% at 35% 15%, black 20%, transparent 72%);
  margin-block-start: 0 !important;
}

.sakac-tech-page-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 84px) var(--sakac-tech-gutter) clamp(26px, 4vw, 44px);
  margin-block-start: 0 !important;
}

.sakac-tech-page-hero .sakac-tech-kicker { color: var(--sakac-tech-secondary-strong); margin-bottom: 14px; }

.sakac-tech-page-hero h1 {
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 18px;
  max-width: 20ch;
  text-wrap: pretty;
}

.sakac-tech-page-hero p {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.65;
  color: var(--sakac-tech-muted-1);
  max-width: 58ch;
  margin: 0;
}

/* -----------------------------------------------------------------
   Service pages (detail) — landing vocabulary, shorter photo hero
   ----------------------------------------------------------------- */

.sakac-tech-hero--page {
  min-height: clamp(360px, 52vh, 520px);
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(48px, 7vw, 84px);
}

/* Static subpage hero: same photos as the landing (picked per theme on
   .sakac-tech-hero__bg above), just without the drift animation. */
.sakac-tech-hero__bg--page {
  animation: none;
}

.sakac-tech-hero--page .wp-block-post-title {
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
  max-width: 20ch;
}

.sakac-tech-hero--page .sakac-tech-hero__sub {
  margin-top: 18px;
  max-width: 60ch;
}

/* Body sections. The skeleton uses .sakac-tech-section, so spacing, the alternating
   background and the containment all come from the landing page rules already
   defined above — only the last border needs removing. */
.sakac-tech-page--service .sakac-tech-section:last-child { border-bottom: none; }

.sakac-tech-page--service .sakac-tech-section h2 {
  font-size: clamp(24px, 3.4vw, 38px);
  /* margin-block, not the shorthand: `.sakac-tech-section > *` sets the inline
     margins that hold every child on the container edge, and a shorthand
     would reset them to 0 and push the heading out to the left. */
  margin-block: 10px 26px;
}

.sakac-tech-page--service .sakac-tech-section > p,
.sakac-tech-page--service .sakac-tech-section > ul {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--sakac-tech-muted-1);
}

.sakac-tech-page--service .sakac-tech-section > ul { padding-left: 1.2em; }
.sakac-tech-page--service .sakac-tech-section > ul li { margin-top: 0.5em; }

.sakac-tech-service-faq__q { margin-bottom: 6px; font-size: 18px; }
.sakac-tech-service-faq__a { color: var(--sakac-tech-muted-1); max-width: 68ch; }
.sakac-tech-service-faq + .sakac-tech-service-faq { margin-top: 26px; }

/* -----------------------------------------------------------------
   Usluge hub — alternating service rows with photos
   ----------------------------------------------------------------- */

.sakac-tech-svc-rows {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) var(--sakac-tech-gutter) clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.5vw, 36px);
}

.sakac-tech-svc-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  overflow: hidden;
  background: var(--sakac-tech-surface);
}

.sakac-tech-svc-row--flip { grid-template-columns: 1.15fr 1fr; }

.sakac-tech-svc-row__shot {
  position: relative;
  min-height: 260px;
  background: var(--sakac-tech-shot-stripes);
}

.sakac-tech-svc-row--flip .sakac-tech-svc-row__shot { order: 2; }

.sakac-tech-svc-row__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sakac-tech-svc-row__body {
  padding: clamp(28px, 4.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  order: 1;
}

.sakac-tech-svc-row__kicker { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-accent-text); margin: 0; }

.sakac-tech-svc-row h2 {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
  max-width: 20ch;
}

.sakac-tech-svc-row__lede { font-size: 15.5px; line-height: 1.7; color: var(--sakac-tech-muted-1); margin: 0; max-width: 56ch; }

.sakac-tech-svc-row__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 22px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.sakac-tech-svc-row__points li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  color: var(--sakac-tech-text-strong);
}

.sakac-tech-svc-row__points li::before {
  content: '▸';
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-secondary-strong);
}

.sakac-tech-svc-row__stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sakac-tech-svc-row__stack .sakac-tech-pill { font-size: 12px; padding: 5px 12px; }

@media (max-width: 880px) {
  .sakac-tech-svc-row,
  .sakac-tech-svc-row--flip { grid-template-columns: 1fr; }
  .sakac-tech-svc-row--flip .sakac-tech-svc-row__shot { order: 0; }
  .sakac-tech-svc-row__body { order: 1; }
}

/* Narrow centered CTA band (usluge / projekti / blog CTA sections). */
.sakac-tech-cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--sakac-tech-border); }
.sakac-tech-cta-band--alt { background: var(--sakac-tech-surface-alt); }

.sakac-tech-cta-band__glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  bottom: -250px;
  left: 50%;
  margin-left: -230px;
  background: radial-gradient(circle, rgba(98, 182, 255, .15), transparent 65%);
  filter: blur(50px);
  margin-block-start: 0 !important;
}

.sakac-tech-cta-band__inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(52px, 9vw, 88px) var(--sakac-tech-gutter);
  text-align: center;
  margin-block-start: 0 !important;
}

.sakac-tech-cta-band h2 {
  font-size: clamp(26px, 4.4vw, 38px);
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 0 0 12px;
}

.sakac-tech-cta-band p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sakac-tech-muted-1);
  margin: 0 0 28px;
}

.sakac-tech-cta-band a.sakac-tech-btn { height: 46px; }

/* =========================================================================
   Blog listing
   ========================================================================= */

.sakac-tech-cat-filter {
  border-top: 1px solid var(--sakac-tech-border);
  border-bottom: 1px solid var(--sakac-tech-border);
  position: sticky;
  top: var(--sakac-tech-header-h);
  z-index: 40;
  background: var(--sakac-tech-header-bg);
  backdrop-filter: blur(14px);
}

.sakac-tech-cat-filter__row {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: 12px var(--sakac-tech-gutter);
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.sakac-tech-cat-pill {
  flex: none;
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-muted-1);
  background: transparent;
  border: 1px solid var(--sakac-tech-border-input);
  border-radius: var(--sakac-tech-radius-chip);
  padding: 7px 16px;
  cursor: pointer;
  transition: all .2s;
  min-height: 38px;
}

.sakac-tech-cat-pill:hover { border-color: var(--sakac-tech-accent); color: var(--sakac-tech-accent); }
.sakac-tech-cat-pill.is-active { background: var(--sakac-tech-accent-fill); color: var(--sakac-tech-on-accent); border-color: var(--sakac-tech-accent-fill); }

.sakac-tech-blog-featured-wrap {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) var(--sakac-tech-gutter) clamp(20px, 4vw, 32px);
}

.sakac-tech-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  overflow: hidden;
  color: var(--sakac-tech-text);
  background: var(--sakac-tech-surface);
  transition: all .25s;
}

.sakac-tech-featured:hover { border-color: var(--sakac-tech-accent-soft); color: var(--sakac-tech-text); transform: translateY(-3px); }

.sakac-tech-featured__shot {
  background: var(--sakac-tech-shot-stripes);
  min-height: 240px;
  position: relative;
  overflow: hidden;
}

.sakac-tech-featured__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.sakac-tech-featured__body { padding: clamp(26px, 4vw, 40px); }
.sakac-tech-featured__meta { display: flex; align-items: center; gap: 10px; font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); margin-bottom: 16px; }
.sakac-tech-featured__badge { color: #0B0F16; background: var(--sakac-tech-secondary); padding: 3px 10px; border-radius: var(--sakac-tech-radius-chip); font-weight: 500; }
.sakac-tech-featured h2 { font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 14px; }
.sakac-tech-featured p { font-size: 15px; line-height: 1.65; color: var(--sakac-tech-muted-1); margin: 0 0 20px; }
.sakac-tech-featured__more { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-accent); }

@media (max-width: 820px) {
  .sakac-tech-featured { grid-template-columns: 1fr; }
}

.sakac-tech-blog-grid-wrap {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: 0 var(--sakac-tech-gutter) clamp(56px, 9vw, 96px);
}

.sakac-tech-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 22vw, 380px), 1fr)); gap: 18px; }

.sakac-tech-blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  overflow: hidden;
  color: var(--sakac-tech-text);
  transition: all .25s;
}

.sakac-tech-blog-card:hover { border-color: var(--sakac-tech-accent-soft); background: var(--sakac-tech-surface); color: var(--sakac-tech-text); transform: translateY(-3px); }

.sakac-tech-blog-card__image { display: block; background: var(--sakac-tech-shot-stripes); height: 180px; flex: none; overflow: hidden; }
.sakac-tech-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sakac-tech-blog-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sakac-tech-blog-card__cat { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-accent-text); }
.sakac-tech-blog-card__title { font-size: 19px; font-weight: 600; line-height: 1.35; }
.sakac-tech-blog-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--sakac-tech-muted-1); }
/* muted-2, not muted-4: 12px mono on the card surface measured 3.3:1 in light and 3.7:1 in dark — under AA. */
.sakac-tech-blog-card__meta { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); margin-top: auto; padding-top: 12px; }

.sakac-tech-blog-empty {
  border: 1px dashed var(--sakac-tech-border-menu);
  border-radius: var(--sakac-tech-radius-card);
  padding: 48px 24px;
  text-align: center;
  color: var(--sakac-tech-muted-1);
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
}

/* Same vertical rhythm as every other .sakac-tech-section — the newsletter
   block never carried that class, so it had no padding of its own and sat
   pressed against the footer's border-top. */
.sakac-tech-newsletter {
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: clamp(64px, 10vw, 110px) var(--sakac-tech-gutter);
}

.sakac-tech-newsletter__glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  bottom: -250px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(98, 182, 255, .15), transparent 65%);
  filter: blur(50px);
}

.sakac-tech-newsletter__inner { position: relative; max-width: 620px; margin: 0 auto; }
.sakac-tech-newsletter h2 { font-size: clamp(26px, 4.4vw, 38px); letter-spacing: -.025em; font-weight: 700; margin: 0 0 12px; max-width: none; }
.sakac-tech-newsletter p { font-size: 15.5px; line-height: 1.6; color: var(--sakac-tech-muted-1); margin: 0 0 28px; }

.sakac-tech-newsletter__form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sakac-tech-newsletter__form input[type="email"] {
  flex: 1 1 240px;
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-input);
  border-radius: var(--sakac-tech-radius-control);
  padding: 0 16px;
  height: 46px;
  color: var(--sakac-tech-text);
  font-family: var(--sakac-tech-font-sans);
  font-size: 15px;
  outline: none;
}
.sakac-tech-newsletter__form input[type="email"]:focus { border-color: var(--sakac-tech-accent); }

.sakac-tech-newsletter__form .sakac-tech-btn { height: 46px; padding: 0 24px; font-size: 15px; }

.sakac-tech-newsletter__success { font-family: var(--sakac-tech-font-mono); font-size: 14px; color: var(--sakac-tech-secondary-text); }
.sakac-tech-newsletter__error { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-secondary-text); margin-top: 14px; }
.sakac-tech-newsletter__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   Blog post
   ========================================================================= */

/* The reading-progress bar is appended to the shared header by JS on posts. */

.sakac-tech-post-hero {
  position: relative;
  height: clamp(340px, 52vw, 520px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0;
}

.sakac-tech-post-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 60% center;
  animation: sakac-tech-heroDrift 28s ease-in-out infinite alternate;
}

.sakac-tech-post-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--sakac-tech-bg) 4%, rgba(var(--sakac-tech-bg-rgb), .82) 42%, rgba(var(--sakac-tech-bg-rgb), .3) 78%, rgba(var(--sakac-tech-bg-rgb), .05) 100%);
}

.sakac-tech-post-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: 0 var(--sakac-tech-gutter) clamp(30px, 5vw, 52px);
}

.sakac-tech-post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--sakac-tech-font-mono);
  font-size: 12.5px;
  color: var(--sakac-tech-text-soft);
  margin-bottom: 18px;
  max-width: 760px;
}

.sakac-tech-post-hero__pill {
  background: rgba(98, 182, 255, .18);
  border: 1px solid rgba(98, 182, 255, .45);
  color: #9BCDFF;
  padding: 4px 12px;
  border-radius: var(--sakac-tech-radius-chip);
}

:root[data-theme="light"] .sakac-tech-post-hero__pill { color: #12558F; }

.sakac-tech-post-hero__dot { opacity: .5; }

.sakac-tech-post-hero h1 {
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0;
  max-width: 760px;
  text-wrap: pretty;
}

/* Two-column body: article + sticky sidebar, centered as a pair. */
.sakac-tech-post-layout {
  /* Same container AND the same fluid column split as the project single
     (.sakac-tech-project-body): 1.7fr prose to 1fr aside, filling the full
     1720px width. A ch-capped prose measure looked narrower than project
     pages no matter how wide the container was, because fixed-measure
     columns just center inside it instead of growing with it. */
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 60px) var(--sakac-tech-gutter) clamp(56px, 9vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 960px) {
  .sakac-tech-post-layout { grid-template-columns: 1fr; }
  .sakac-tech-post-aside { position: static !important; }
}

.sakac-tech-post-prose {
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--sakac-tech-text-strong);
  min-width: 0;
}

.sakac-tech-post-lede {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.6;
  color: var(--sakac-tech-text-strong);
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--sakac-tech-border-card);
  text-wrap: pretty;
}

.sakac-tech-post-prose h2 {
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 38px 0 18px;
  color: var(--sakac-tech-text);
  scroll-margin-top: calc(var(--sakac-tech-header-h) + 20px);
}

.sakac-tech-post-prose h3 { font-size: 20px; font-weight: 600; margin: 30px 0 14px; color: var(--sakac-tech-text); }
.sakac-tech-post-prose p { margin: 0 0 22px; }
.sakac-tech-post-prose strong { color: var(--sakac-tech-text); }
.sakac-tech-post-prose ul,
.sakac-tech-post-prose ol { margin: 0 0 22px; padding-left: 22px; }
.sakac-tech-post-prose li { margin-bottom: 8px; }
.sakac-tech-post-prose img { max-width: 100%; height: auto; border-radius: var(--sakac-tech-radius-panel); }

.sakac-tech-price-rows { display: flex; flex-direction: column; gap: 10px; margin: 0 0 38px; }

.sakac-tech-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-panel);
  padding: 18px clamp(20px, 2vw, 26px);
}

.sakac-tech-price-row__label { font-weight: 600; font-size: 16px; flex: 1 1 200px; color: var(--sakac-tech-text); }
.sakac-tech-price-row__value { font-family: var(--sakac-tech-font-mono); color: var(--sakac-tech-accent-text); font-size: 14px; white-space: nowrap; }

.sakac-tech-pullquote,
.sakac-tech-post-prose blockquote {
  margin: 0 0 38px;
  padding: 24px 26px;
  border-left: 2px solid var(--sakac-tech-accent);
  background: var(--sakac-tech-surface);
  border-radius: 0 var(--sakac-tech-radius-panel) var(--sakac-tech-radius-panel) 0;
  font-style: normal;
}

.sakac-tech-pullquote p,
.sakac-tech-post-prose blockquote p { font-size: 19px; line-height: 1.6; margin: 0; color: var(--sakac-tech-text); }

.sakac-tech-post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  padding: 26px;
  margin: 38px 0;
}

.sakac-tech-post-cta__text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; }
.sakac-tech-post-cta__title { font-size: 18px; font-weight: 600; color: var(--sakac-tech-text); }
.sakac-tech-post-cta__desc { font-size: 14.5px; color: var(--sakac-tech-muted-1); line-height: 1.55; }

/* Sidebar */
.sakac-tech-post-aside {
  position: sticky;
  top: calc(var(--sakac-tech-header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sakac-tech-post-aside__label {
  display: block;
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-muted-2);
  margin-bottom: 14px;
}

.sakac-tech-post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--sakac-tech-border-card);
}

.sakac-tech-post-author__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #62B6FF, #2E7FD6);
  display: grid; place-items: center;
  font-family: var(--sakac-tech-font-mono);
  color: #0B0F16; font-weight: 500; font-size: 13px;
}

.sakac-tech-post-author__name { display: block; font-size: 14.5px; font-weight: 500; }
.sakac-tech-post-author__role { display: block; font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); }

.sakac-tech-post-toc__list { display: flex; flex-direction: column; gap: 2px; }

.sakac-tech-post-toc__list a {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sakac-tech-muted-1);
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--sakac-tech-border-input);
}

.sakac-tech-post-toc__list a:hover,
.sakac-tech-post-toc__list a.is-active { color: var(--sakac-tech-accent); border-left-color: var(--sakac-tech-accent); }

.sakac-tech-post-related { padding-top: 24px; border-top: 1px solid var(--sakac-tech-border-card); }
.sakac-tech-post-related__list { display: flex; flex-direction: column; gap: 12px; }

.sakac-tech-post-related__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-panel);
  padding: 18px;
  color: var(--sakac-tech-text);
  transition: all .25s;
}

.sakac-tech-post-related__card:hover {
  border-color: var(--sakac-tech-accent-soft);
  background: var(--sakac-tech-surface);
  color: var(--sakac-tech-text);
  transform: translateY(-2px);
}

.sakac-tech-post-related__cat { font-family: var(--sakac-tech-font-mono); font-size: 11.5px; color: var(--sakac-tech-accent-text); }
.sakac-tech-post-related__title { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.sakac-tech-post-related__meta { font-family: var(--sakac-tech-font-mono); font-size: 11.5px; color: var(--sakac-tech-muted-2); }
.sakac-tech-post-related__all { display: inline-block; margin-top: 16px; font-family: var(--sakac-tech-font-mono); font-size: 12.5px; }

/* =========================================================================
   Inherited (no mockup): pages, 404, category
   ========================================================================= */

.sakac-tech-plain-hero { max-width: var(--sakac-tech-content); margin: 0 auto; padding: clamp(48px, 8vw, 80px) 0 24px; }
.sakac-tech-plain-hero h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.025em; font-weight: 700; margin: 0; }

.sakac-tech-404 { max-width: 640px; margin: 0 auto; padding: clamp(80px, 12vw, 140px) 20px; text-align: center; }
.sakac-tech-404__code { font-family: var(--sakac-tech-font-mono); font-size: 15px; color: var(--sakac-tech-secondary-text); margin-bottom: 16px; }
.sakac-tech-404 h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 16px; }
.sakac-tech-404 p { color: var(--sakac-tech-muted-1); margin: 0 0 28px; }

/* Optional photo behind a legal / static page hero: set the page's
   featured image (a translation falls back to its original's). Same
   recipe as the post hero — cover, slow drift, a scrim that fades into
   the page background so the text stays readable in both themes. */
.sakac-tech-page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 68% center;
  animation: sakac-tech-heroDrift 28s ease-in-out infinite alternate;
  margin-block-start: 0 !important;
}

.sakac-tech-page-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(var(--sakac-tech-bg-rgb), .92) 0%, rgba(var(--sakac-tech-bg-rgb), .72) 38%, rgba(var(--sakac-tech-bg-rgb), .2) 72%, rgba(var(--sakac-tech-bg-rgb), .05) 100%),
    linear-gradient(to top, var(--sakac-tech-bg) 0%, rgba(var(--sakac-tech-bg-rgb), .55) 30%, rgba(var(--sakac-tech-bg-rgb), 0) 70%);
  margin-block-start: 0 !important;
}

.sakac-tech-page-hero--image {
  min-height: clamp(380px, 46vh, 560px);
  display: flex;
  align-items: flex-end;
  /* The page template pads main at the top; with a photo the hero must
     start right under the header, like the post hero does. */
  margin-top: calc(-1 * var(--sakac-tech-page-pad-top, 0px)) !important;
}
.sakac-tech-page-hero--image .sakac-tech-page-hero__inner { z-index: 1; }

/* WP flow layout adds margin-block-start to every child — including
   absolutely positioned ones, which shifts inset:0 layers down and lets
   the photo's top edge peek out above the scrim. Pin them.
   Zero only the block-start margin — a `margin: 0` shorthand here would also
   kill the `margin: 0 auto` centring these containers rely on. */
.sakac-tech-hero__bg,
.sakac-tech-hero__scrim,
.sakac-tech-kontakt__glow,
.sakac-tech-newsletter__glow,
.sakac-tech-post-hero__bg,
.sakac-tech-post-hero__scrim,
.sakac-tech-post-hero__inner {
  margin-block-start: 0 !important;
}

/* =========================================================================
   Cookie consent (sakac-tech-cookie-consent) — re-skin to the mockup card:
   bottom-left, mono "kolačići" kicker, square toggles, icon reopen FAB.
   ========================================================================= */

.sakac-tech-cookie {
  position: fixed;
  /* Bottom-right: bottom-left sat exactly over the landing hero's lead and
     CTA buttons on a 1440×900 screen; the right third of every hero is
     photo only. */
  inset: auto clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px) auto;
  z-index: 90;
  width: min(520px, calc(100vw - 2 * clamp(16px, 3vw, 28px)));
  color: var(--sakac-tech-text);
  font-family: var(--sakac-tech-font-sans);
}

.sakac-tech-cookie__panel {
  border: 1px solid var(--sakac-tech-border-menu);
  border-radius: var(--sakac-tech-radius-card);
  background: var(--sakac-tech-menu-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
}

.sakac-tech-cookie__content,
.sakac-tech-cookie__preferences,
.sakac-tech-cookie__actions { padding: 16px 24px; }
.sakac-tech-cookie__content { padding-top: 22px; gap: 0.5rem; }
.sakac-tech-cookie__actions { padding-bottom: 22px; }

.sakac-tech-cookie__eyebrow {
  color: var(--sakac-tech-accent-text);
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}

.sakac-tech-cookie h2 {
  color: var(--sakac-tech-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.sakac-tech-cookie p {
  color: var(--sakac-tech-text-strong);
  font-size: 14px;
  line-height: 1.6;
}

.sakac-tech-cookie__policy {
  color: var(--sakac-tech-accent);
  font-family: var(--sakac-tech-font-mono);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: lowercase;
}

.sakac-tech-cookie__preferences {
  border-top: 1px solid var(--sakac-tech-border-card);
  background: transparent;
  gap: 10px;
}

.sakac-tech-cookie__category {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.sakac-tech-cookie__category > input[type="checkbox"] { margin-top: 2px; }

.sakac-tech-cookie__cat-tag {
  font-family: var(--sakac-tech-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--sakac-tech-muted-2);
  margin-left: 4px;
}

.sakac-tech-cookie__category strong {
  color: var(--sakac-tech-text);
  font-family: var(--sakac-tech-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
}

.sakac-tech-cookie__category em { color: var(--sakac-tech-muted-1); font-size: 12.5px; margin-top: 2px; }

.sakac-tech-cookie__detected {
  color: var(--sakac-tech-muted-3);
  font-family: var(--sakac-tech-font-mono);
  font-size: 11px;
  margin-top: 6px;
}

/* Checkbox → square toggle switch (40×22, knob 16×16), per mockup. */
.sakac-tech-cookie__category input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  flex: none;
  border-radius: var(--sakac-tech-radius-chip);
  border: 1px solid var(--sakac-tech-border-strong);
  background: rgba(148, 180, 220, .12);
  position: relative;
  cursor: pointer;
  transition: all .2s;
  margin: 0;
}

.sakac-tech-cookie__category input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: var(--sakac-tech-muted-1);
  transition: all .2s;
}

.sakac-tech-cookie__category input[type="checkbox"]:checked {
  background: rgba(98, 182, 255, .9);
  border-color: #62B6FF;
}

.sakac-tech-cookie__category input[type="checkbox"]:checked::after {
  left: 20px;
  background: #0B0F16;
}

.sakac-tech-cookie__category input[type="checkbox"]:disabled { cursor: default; }

.sakac-tech-cookie__actions { border-top: 1px solid var(--sakac-tech-border-card); gap: 10px; }

.sakac-tech-cookie__actions button {
  min-height: 38px;
  border: 1px solid var(--sakac-tech-border-strong);
  border-radius: var(--sakac-tech-radius-control);
  padding: 0 18px;
  font-family: var(--sakac-tech-font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sakac-tech-muted-1);
  background: transparent;
  transition: all .2s;
}

.sakac-tech-cookie__actions [data-sakac-tech-cookie-accept] {
  color: var(--sakac-tech-on-accent);
  border-color: transparent;
  background: var(--sakac-tech-accent-fill);
  font-weight: 600;
  box-shadow: none;
}

.sakac-tech-cookie__actions [data-sakac-tech-cookie-save] {
  color: var(--sakac-tech-accent);
  border-color: rgba(98, 182, 255, .45);
  background: transparent;
  font-weight: 600;
  box-shadow: none;
}

/* "postavke" is a plain mono text button in the mockup. */
.sakac-tech-cookie__actions [data-sakac-tech-cookie-customize] {
  border: none;
  background: transparent;
  color: var(--sakac-tech-muted-1);
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  font-weight: 400;
  padding: 0 10px;
}

.sakac-tech-cookie__actions [data-sakac-tech-cookie-customize]:hover,
.sakac-tech-cookie__actions [data-sakac-tech-cookie-customize]:focus {
  border: none;
  color: var(--sakac-tech-accent);
  background: transparent;
}

.sakac-tech-cookie__actions button:hover,
.sakac-tech-cookie__actions button:focus {
  transform: none;
  filter: none;
  box-shadow: none;
  border-color: var(--sakac-tech-accent);
  color: var(--sakac-tech-text);
}

.sakac-tech-cookie__actions [data-sakac-tech-cookie-accept]:hover,
.sakac-tech-cookie__actions [data-sakac-tech-cookie-accept]:focus {
  background: var(--sakac-tech-accent-fill-hover);
  border-color: transparent;
  color: var(--sakac-tech-on-accent);
}

.sakac-tech-cookie__actions [data-sakac-tech-cookie-save]:hover,
.sakac-tech-cookie__actions [data-sakac-tech-cookie-save]:focus {
  background: rgba(98, 182, 255, .12);
  border-color: rgba(98, 182, 255, .45);
  color: var(--sakac-tech-accent);
}

/* Reopen control: 46px icon square, bottom-left, mirroring the mockup FAB. */
.sakac-tech-cookie-toggle {
  position: fixed;
  left: clamp(16px, 3vw, 28px);
  right: auto;
  bottom: clamp(16px, 3vw, 28px);
  z-index: 89;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--sakac-tech-border-menu);
  border-radius: var(--sakac-tech-radius-chip);
  background: var(--sakac-tech-fab-bg);
  color: var(--sakac-tech-muted-2);
  font-size: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .2s;
  text-transform: none;
}

.sakac-tech-cookie-toggle::before {
  content: '';
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c0 2 1.5 3.5 3.5 3.5 0 2 2 3.5 4 3.5.5 0 1.5 0 1.5 2Z'/%3E%3Ccircle cx='9' cy='10' r='0.6' fill='%23000'/%3E%3Ccircle cx='13' cy='15' r='0.6' fill='%23000'/%3E%3Ccircle cx='8.5' cy='15.5' r='0.6' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c0 2 1.5 3.5 3.5 3.5 0 2 2 3.5 4 3.5.5 0 1.5 0 1.5 2Z'/%3E%3Ccircle cx='9' cy='10' r='0.6' fill='%23000'/%3E%3Ccircle cx='13' cy='15' r='0.6' fill='%23000'/%3E%3Ccircle cx='8.5' cy='15.5' r='0.6' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sakac-tech-cookie-toggle:hover,
.sakac-tech-cookie-toggle:focus {
  color: var(--sakac-tech-accent);
  border-color: var(--sakac-tech-accent);
  background: var(--sakac-tech-fab-bg);
  transform: none;
  filter: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .sakac-tech-cookie { inset: auto 1rem 1rem 1rem; width: auto; }
  .sakac-tech-cookie__actions { flex-direction: row; }
  .sakac-tech-cookie__actions button { width: auto; flex: 1 1 auto; }
}

/* =========================================================================
   Projects archive
   ========================================================================= */

/* Sits directly under the shared header, reading as one unit with it. */
.sakac-tech-projects-filter {
  position: sticky;
  top: var(--sakac-tech-header-h);
  z-index: 40;
  background: var(--sakac-tech-header-bg);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--sakac-tech-border);
  border-bottom: 1px solid var(--sakac-tech-border);
}

.sakac-tech-projects-filter__row {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: 12px var(--sakac-tech-gutter);
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.sakac-tech-projects-list {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) var(--sakac-tech-gutter) clamp(56px, 9vw, 96px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(18px, 3vw, 28px);
}

.sakac-tech-project-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  overflow: hidden;
  background: var(--sakac-tech-surface);
  transition: all .25s;
}

.sakac-tech-project-row:hover {
  border-color: var(--sakac-tech-accent-soft);
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}

.sakac-tech-project-row[hidden] { display: none; }

.sakac-tech-project-row__shot {
  display: block;
  position: relative;
  min-height: 260px;
  background: var(--sakac-tech-shot-stripes);
}

.sakac-tech-project-row__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.sakac-tech-project-row__body {
  padding: clamp(26px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sakac-tech-project-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-muted-2);
}

.sakac-tech-project-row__industry { color: var(--sakac-tech-accent-text); }
.sakac-tech-project-row__dot { opacity: .5; }

.sakac-tech-project-row h2 {
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}

.sakac-tech-project-row h2 a { color: var(--sakac-tech-text); }
.sakac-tech-project-row:hover h2 a { color: var(--sakac-tech-text); }

.sakac-tech-project-row__body > p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sakac-tech-muted-1);
  margin: 0;
}

.sakac-tech-project-row__stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sakac-tech-project-row__stack .sakac-tech-pill { font-size: 12px; padding: 5px 12px; }

.sakac-tech-project-row__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--sakac-tech-border);
}

.sakac-tech-project-row__metric-value { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--sakac-tech-text); }
.sakac-tech-project-row__metric-value--accent { color: var(--sakac-tech-secondary-strong); }
.sakac-tech-project-row__metric-label { font-family: var(--sakac-tech-font-mono); font-size: 11.5px; color: var(--sakac-tech-muted-2); margin-top: 2px; }
.sakac-tech-project-row__more { margin-left: auto; font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-accent); }

.sakac-tech-projects-empty {
  border: 1px dashed var(--sakac-tech-border-menu);
  border-radius: var(--sakac-tech-radius-card);
  padding: 48px 24px;
  text-align: center;
  color: var(--sakac-tech-muted-1);
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
}

@media (min-width: 1500px) {
  .sakac-tech-projects-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sakac-tech-project-row { grid-template-columns: 1fr; }
  .sakac-tech-projects-empty { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .sakac-tech-project-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Project single (case study)
   ========================================================================= */

.sakac-tech-project-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 55vh, 640px);
  display: flex;
  align-items: flex-end;
}

.sakac-tech-project-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--sakac-tech-surface);
  margin-block-start: 0 !important;
}

.sakac-tech-project-hero__bg--empty { background: var(--sakac-tech-shot-stripes); }

.sakac-tech-project-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--sakac-tech-bg) 4%, rgba(var(--sakac-tech-bg-rgb), .88) 34%, rgba(var(--sakac-tech-bg-rgb), .5) 62%, rgba(var(--sakac-tech-bg-rgb), .18) 100%),
    linear-gradient(to top, var(--sakac-tech-bg) 2%, rgba(var(--sakac-tech-bg-rgb), .55) 26%, transparent 55%);
  margin-block-start: 0 !important;
}

.sakac-tech-project-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--sakac-tech-gutter) clamp(26px, 4vw, 44px);
  margin-block-start: 0 !important;
}

.sakac-tech-project-hero__back { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-text-soft); }
.sakac-tech-project-hero__back:hover { color: var(--sakac-tech-accent); }

.sakac-tech-project-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-muted-2);
  margin: 22px 0 14px;
}

.sakac-tech-project-hero__industry { color: var(--sakac-tech-secondary-strong); }

.sakac-tech-project-hero h1 {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 18px;
  max-width: 24ch;
  text-wrap: pretty;
}

.sakac-tech-project-hero__lede {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.65;
  color: var(--sakac-tech-muted-1);
  max-width: 60ch;
  margin: 0;
}

.sakac-tech-project-stats {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(14px, 2vw, 24px) var(--sakac-tech-gutter) 0;
}

.sakac-tech-project-stats__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
  padding: clamp(8px, 1.5vw, 16px) 6px clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--sakac-tech-border);
}

.sakac-tech-project-stats__value { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.sakac-tech-project-stats__value--accent { color: var(--sakac-tech-secondary-strong); }
.sakac-tech-project-stats__label { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-muted-2); margin-top: 3px; }

.sakac-tech-project-body {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) var(--sakac-tech-gutter) clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.sakac-tech-project-body__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 52px);
}

.sakac-tech-project-body__num {
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-accent-text);
  margin-bottom: 14px;
  display: block;
}

.sakac-tech-project-challenge {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
  color: var(--sakac-tech-text-strong);
  margin: 0;
  max-width: 68ch;
  text-wrap: pretty;
}

.sakac-tech-project-approach { display: flex; flex-direction: column; gap: 22px; }

.sakac-tech-project-approach__item {
  border-left: 1px solid rgba(98, 182, 255, .35);
  padding: 2px 0 2px 22px;
}

.sakac-tech-project-approach__item h2,
.sakac-tech-project-approach__item h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; max-width: none; }
.sakac-tech-project-approach__item p { font-size: 15px; line-height: 1.65; color: var(--sakac-tech-muted-1); margin: 0; max-width: 62ch; }

.sakac-tech-project-results { display: flex; flex-direction: column; gap: 14px; }

.sakac-tech-project-results__item { display: flex; gap: 12px; align-items: baseline; }
.sakac-tech-project-results__check { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-secondary-strong); flex: none; }
.sakac-tech-project-results__text { font-size: 15.5px; line-height: 1.6; color: var(--sakac-tech-text-strong); }

.sakac-tech-project-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: calc(var(--sakac-tech-header-h) + 24px);
}

.sakac-tech-project-aside__card {
  border: 1px solid var(--sakac-tech-border-card);
  background: var(--sakac-tech-surface);
  border-radius: var(--sakac-tech-radius-card);
  padding: 26px;
}

.sakac-tech-project-aside__label {
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-muted-2);
  margin-bottom: 14px;
  display: block;
}

.sakac-tech-project-aside__stack { display: flex; flex-wrap: wrap; gap: 8px; }
.sakac-tech-project-aside__stack .sakac-tech-pill { font-size: 12px; padding: 5px 12px; }

.sakac-tech-project-aside__card--cta {
  border-color: rgba(98, 182, 255, .3);
  background: rgba(98, 182, 255, .05);
}

.sakac-tech-project-aside__card--cta .sakac-tech-project-aside__label { color: var(--sakac-tech-accent-text); margin-bottom: 10px; }
.sakac-tech-project-aside__card--cta p { font-size: 14.5px; line-height: 1.6; color: var(--sakac-tech-text-strong); margin: 0 0 18px; }
.sakac-tech-project-aside__card--cta a.sakac-tech-btn { height: 46px; font-size: 14.5px; padding: 0 20px; }

@media (max-width: 960px) {
  .sakac-tech-project-body { grid-template-columns: 1fr; }
  .sakac-tech-project-aside { position: static; }
}

.sakac-tech-project-nav {
  border-top: 1px solid var(--sakac-tech-border);
  background: var(--sakac-tech-surface-alt);
}

.sakac-tech-project-nav__inner {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 30px) var(--sakac-tech-gutter);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.sakac-tech-project-nav__inner a { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-muted-1); }
.sakac-tech-project-nav__inner a:hover { color: var(--sakac-tech-accent); }
.sakac-tech-project-nav__next { text-align: right; }

/* "Ostali projekti" strip on legacy single-project content. */
.sakac-tech-project-more { border-top: 1px solid var(--sakac-tech-border); }

/* =========================================================================
   Kontakt page — chip-driven inquiry form + aside
   ========================================================================= */

.sakac-tech-kontakt-page {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 28px) var(--sakac-tech-gutter) clamp(56px, 9vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 880px) {
  .sakac-tech-kontakt-page { grid-template-columns: 1fr; }
}

.sakac-tech-kontakt-page__form { min-width: 0; }

/* Plugin form re-skin, kontakt-page flavour: stacked groups, mono labels. */
.sakac-tech-kontakt-page .sakac-tech-contact-form form,
.sakac-tech-kontakt-page form.sakac-tech-contact-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sakac-tech-kontakt-page .sakac-tech-contact-form__field { margin-bottom: 0; }
.sakac-tech-kontakt-page .sakac-tech-contact-form p { margin: 0; }

.sakac-tech-kontakt-page .sakac-tech-contact-form__field label {
  display: block;
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-accent-text);
  margin-bottom: 12px;
}

.sakac-tech-kontakt-page .sakac-tech-contact-form__field label br { display: none; }

.sakac-tech-kontakt-page .sakac-tech-contact-form input:not([type="checkbox"]):not([type="radio"]),
.sakac-tech-kontakt-page .sakac-tech-contact-form textarea {
  width: 100%;
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-input);
  border-radius: var(--sakac-tech-radius-control);
  height: 46px;
  padding: 0 16px;
  color: var(--sakac-tech-text);
  font-family: var(--sakac-tech-font-sans);
  font-size: 15px;
  outline: none;
}

.sakac-tech-kontakt-page .sakac-tech-contact-form textarea { height: auto; min-height: 140px; padding: 15px 16px; line-height: 1.6; resize: vertical; }

.sakac-tech-kontakt-page .sakac-tech-contact-form input:focus,
.sakac-tech-kontakt-page .sakac-tech-contact-form textarea:focus { border-color: var(--sakac-tech-accent); }

/* Chip-target fields: JS builds the chip UI and hides the raw text input. */
.sakac-tech-kontakt-page .sakac-tech-contact-form__field.sakac-tech-chips-enhanced input { display: none; }

/* The 06 group carries one visible label (on the name field); e-mail and
   company keep accessible labels but rely on placeholders visually. */
.sakac-tech-kontakt-page [data-sakac-tech-field="reply_email"] label,
.sakac-tech-kontakt-page [data-sakac-tech-field="firma"] label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: 0;
}

.sakac-tech-kontakt-page .sakac-tech-contact-form__field { position: relative; }

/* Compact section rhythm for sub-page bands (mockups pad these tighter
   than the landing sections). */
.sakac-tech-section--compact { padding-top: clamp(48px, 8vw, 88px); padding-bottom: clamp(48px, 8vw, 88px); }

.sakac-tech-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sakac-tech-chip {
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-muted-1);
  background: transparent;
  border: 1px solid var(--sakac-tech-border-input);
  border-radius: var(--sakac-tech-radius-chip);
  padding: 9px 18px;
  cursor: pointer;
  transition: all .2s;
  min-height: 38px;
}

.sakac-tech-chip:hover { border-color: var(--sakac-tech-accent); color: var(--sakac-tech-accent); }
.sakac-tech-chip.is-selected { background: var(--sakac-tech-accent-fill); color: var(--sakac-tech-on-accent); border-color: var(--sakac-tech-accent-fill); }

/* The contact fields (06) sit side by side. */
.sakac-tech-kontakt-page .sakac-tech-contact-form__contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  /* Only the first field keeps a visible label (the 06 heading) — bottom-align
     the inputs so the label-less fields line up with it. */
  align-items: end;
}

.sakac-tech-kontakt-page .sakac-tech-contact-form button[type="submit"] {
  background: var(--sakac-tech-accent-fill);
  color: var(--sakac-tech-on-accent);
  font-weight: 600;
  font-size: 16px;
  height: 46px;
  padding: 0 28px;
  border: none;
  border-radius: var(--sakac-tech-radius-control);
  cursor: pointer;
  align-self: flex-start;
  font-family: var(--sakac-tech-font-sans);
  transition: all .2s;
}

.sakac-tech-kontakt-page .sakac-tech-contact-form button[type="submit"]:hover {
  background: var(--sakac-tech-accent-fill-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(98, 182, 255, .3);
}

.sakac-tech-kontakt-page .sakac-tech-contact-form__notice {
  border-radius: var(--sakac-tech-radius-control);
  padding: 14px 18px;
  font-size: 14px;
}

/* JS swaps the form for this card after a successful PRG redirect. */
.sakac-tech-kontakt-success {
  border: 1px solid rgba(98, 182, 255, .35);
  background: rgba(98, 182, 255, .06);
  border-radius: var(--sakac-tech-radius-card);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}

.sakac-tech-kontakt-success__kicker { font-family: var(--sakac-tech-font-mono); font-size: 13px; color: var(--sakac-tech-accent-text); margin-bottom: 12px; }
.sakac-tech-kontakt-success h2 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; max-width: none; }
.sakac-tech-kontakt-success p { font-size: 15.5px; line-height: 1.65; color: var(--sakac-tech-muted-1); margin: 0; }

.sakac-tech-kontakt-aside { display: flex; flex-direction: column; gap: 18px; }

.sakac-tech-kontakt-aside__card {
  border: 1px solid var(--sakac-tech-border-card);
  background: var(--sakac-tech-surface);
  border-radius: var(--sakac-tech-radius-card);
  padding: 28px;
}

.sakac-tech-kontakt-aside__label {
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-muted-2);
  margin-bottom: 16px;
  display: block;
}

.sakac-tech-kontakt-aside__steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sakac-tech-kontakt-aside__steps li { display: flex; gap: 12px; align-items: baseline; }
.sakac-tech-kontakt-aside__steps .sakac-tech-kontakt-aside__num { font-family: var(--sakac-tech-font-mono); font-size: 12px; color: var(--sakac-tech-accent-text); flex: none; }
.sakac-tech-kontakt-aside__steps span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--sakac-tech-text-strong); }

.sakac-tech-kontakt-aside__direct { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.sakac-tech-kontakt-aside__direct span { color: var(--sakac-tech-muted-1); }

/* =========================================================================
   Cross-component odds and ends
   ========================================================================= */

/* Kicker tone helpers: sub-page heroes run the darker coral, except the blog
   hero which keeps the landing's bright secondary; sections outside a page
   hero opt into the darker tone with --strong. */
.sakac-tech-kicker--strong { color: var(--sakac-tech-secondary-strong); }
.sakac-tech-page-hero .sakac-tech-kicker.sakac-tech-kicker--sec { color: var(--sakac-tech-secondary-text); }

/* Usluge hub: remote-work section type overrides. */
.sakac-tech-remote__h2 { font-size: clamp(26px, 4.4vw, 40px); margin-bottom: 14px; }
.sakac-tech-remote__lede { font-size: 15.5px; line-height: 1.7; color: var(--sakac-tech-muted-1); margin-top: 0; margin-bottom: 36px; max-width: 60ch; }
.sakac-tech-step--remote h3 { font-size: 17px; }

/* Landing project teasers are anchors — keep card text out of link blue. */
a.sakac-tech-card--project,
a.sakac-tech-card--project:hover { color: var(--sakac-tech-text); }

/* Case-study article column: post content children space out like the mockup
   (WP wraps post content in its own div, so the gap lives there). */
.sakac-tech-project-body__main .wp-block-post-content {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 52px);
}

.sakac-tech-project-body__main .wp-block-post-content > .wp-block-group { margin-block-start: 0; }
.sakac-tech-project-body__num + p { margin-top: 0; }
.sakac-tech-project-results__item { margin: 0; }
.sakac-tech-project-approach__item > * { margin-block-start: 0; }

/* Old-format case studies (Problem/Rješenje/Rezultati blocks). The whole study
   is ONE group with a 1.2rem blockGap, so the section rhythm has to come from
   the theme: generous space above every h2, air inside columns and lists, and
   the Rezultati columns styled as v2 cards. */
.sakac-tech-project-body__main h2 { font-size: clamp(20px, 2.6vw, 26px); margin: clamp(26px, 3.5vw, 42px) 0 14px; }
.sakac-tech-project-body__main h2:first-child { margin-top: 0; }
.sakac-tech-project-body__main p { color: var(--sakac-tech-muted-1); line-height: 1.7; }
.sakac-tech-project-body__main .sakac-tech-project-challenge { color: var(--sakac-tech-text-strong); }
.sakac-tech-project-body__main .sakac-tech-project-approach__item p { color: var(--sakac-tech-muted-1); }

.sakac-tech-project-body__main .wp-block-columns { gap: clamp(16px, 2.2vw, 26px); }

/* Klijent / Platforma / Uloga headings read as mono labels, like v2 kickers. */
.sakac-tech-project-body__main .wp-block-column > h3 {
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--sakac-tech-accent-text);
  margin: 0 0 10px;
}

.sakac-tech-project-body__main ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sakac-tech-project-body__main li { color: var(--sakac-tech-muted-1); line-height: 1.65; }

.sakac-tech-project-body__main .wp-block-column.sakac-tech-panel {
  background: var(--sakac-tech-surface);
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  padding: 20px 22px;
}

.sakac-tech-project-body__main .wp-block-column.sakac-tech-panel > h4 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sakac-tech-secondary-strong);
  margin: 0 0 10px;
}

/* Case-study body images: v2 card frame + mono caption. */
.sakac-tech-project-body__main figure.wp-block-image { margin: clamp(6px, 1vw, 10px) 0 0; }

.sakac-tech-project-body__main figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
}

.sakac-tech-project-body__main figure.wp-block-image figcaption {
  font-family: var(--sakac-tech-font-mono);
  font-size: 12px;
  color: var(--sakac-tech-muted-2);
  margin: 10px 0 0;
  text-align: left;
}

/* Case-study CTA buttons: first is the accent action, the rest go outline. */
.sakac-tech-project-body__main .wp-block-button__link {
  background: var(--sakac-tech-accent-fill);
  color: var(--sakac-tech-on-accent);
  border-radius: var(--sakac-tech-radius-control);
  font-size: 15px;
  font-weight: 500;
  padding: 11px 22px;
  transition: all .2s;
}

.sakac-tech-project-body__main .wp-block-button__link:hover {
  background: var(--sakac-tech-accent-fill-hover);
  color: var(--sakac-tech-on-accent);
}

.sakac-tech-project-body__main .wp-block-button:not(:first-child) .wp-block-button__link {
  background: none;
  border: 1px solid var(--sakac-tech-border-control);
  color: var(--sakac-tech-text);
}

.sakac-tech-project-body__main .wp-block-button:not(:first-child) .wp-block-button__link:hover {
  border-color: var(--sakac-tech-accent);
  color: var(--sakac-tech-accent);
  background: none;
}

/* -----------------------------------------------------------------
 * Legal pages (privacy, cookies, impressum)
 *
 * Same container as the hero above them and as blog posts / project
 * singles, so the text starts on the same left edge as everything
 * else instead of floating in a centred 1080px column. Running text is
 * still capped per paragraph — 1720px of prose is unreadable — while
 * tables and definition lists may use the width. Tables scroll inside
 * their own box so a long cookie name never widens the page on a phone.
 * --------------------------------------------------------------- */

.sakac-tech-legal {
  width: 100%;
  max-width: var(--sakac-tech-maxw);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 20px) var(--sakac-tech-gutter) clamp(48px, 8vw, 96px);
  /* Exactly the blog post / project single column split (1.7fr prose to a
     1fr aside) — the aside column simply stays empty here — so the text
     measure is identical on every page and grows with the viewport the
     same way. A ch cap looked narrower than the blog on wide screens. */
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 0 clamp(36px, 5vw, 72px);
  align-items: start;
}

.sakac-tech-legal > * { grid-column: 1; min-width: 0; }

@media (max-width: 960px) {
  .sakac-tech-legal { grid-template-columns: minmax(0, 1fr); }
}

.sakac-tech-legal__updated {
  font-size: 13px;
  color: var(--sakac-tech-text-soft);
  opacity: .8;
}

.sakac-tech-legal__section { padding-block: clamp(20px, 3vw, 34px); }

.sakac-tech-legal__section + .sakac-tech-legal__section {
  border-top: 1px solid var(--sakac-tech-border);
}

.sakac-tech-legal__section h2 {
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}

.sakac-tech-legal__section h3 {
  font-size: 15px;
  letter-spacing: .01em;
  margin: 0 0 8px;
}

.sakac-tech-legal__section p {
  color: var(--sakac-tech-text-soft);
  line-height: 1.7;
  margin: 0 0 14px;
}

.sakac-tech-legal__section--highlight {
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
  background: var(--sakac-tech-surface-alt);
  padding: clamp(20px, 3vw, 32px);
  margin-block: clamp(20px, 3vw, 32px);
}

/* The highlight box owns its border, so the generic divider would double it. */
.sakac-tech-legal__section--highlight + .sakac-tech-legal__section,
.sakac-tech-legal__section--highlight { border-top: 0; }

.sakac-tech-legal__list,
.sakac-tech-legal__checks {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  color: var(--sakac-tech-text-soft);
  line-height: 1.7;
}

.sakac-tech-legal__list li,
.sakac-tech-legal__checks li {
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 8px;
}

.sakac-tech-legal__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 12px;
  width: 6px;
  height: 1px;
  background: var(--sakac-tech-accent-text);
}

.sakac-tech-legal__checks li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--sakac-tech-accent-text);
  font-size: 13px;
}

.sakac-tech-legal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.sakac-tech-legal__link {
  color: var(--sakac-tech-accent-text);
  text-decoration: none;
  font-size: 14px;
}

.sakac-tech-legal__link:hover { text-decoration: underline; }

.sakac-tech-legal-controller {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 6px 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.sakac-tech-legal-controller dt { color: var(--sakac-tech-text-soft); opacity: .75; }
.sakac-tech-legal-controller dd { margin: 0; color: var(--sakac-tech-text); }
.sakac-tech-legal-controller a { color: var(--sakac-tech-accent-text); text-decoration: none; }
.sakac-tech-legal-controller a:hover { text-decoration: underline; }

.sakac-tech-legal-table,
.sakac-tech-cookie-table { margin: 0 0 24px; }

.sakac-tech-cookie-table__title {
  font-size: 15px;
  margin: 0 0 6px;
}

.sakac-tech-cookie-table__intro,
.sakac-tech-cookie-table__empty {
  color: var(--sakac-tech-text-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.sakac-tech-legal-table__scroll,
.sakac-tech-cookie-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--sakac-tech-border-card);
  border-radius: var(--sakac-tech-radius-card);
}

.sakac-tech-legal-table table,
.sakac-tech-cookie-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.sakac-tech-legal-table th,
.sakac-tech-cookie-table th {
  text-align: start;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sakac-tech-text-soft);
  background: var(--sakac-tech-surface-alt);
  padding: 10px 14px;
  border-bottom: 1px solid var(--sakac-tech-border-card);
}

.sakac-tech-legal-table td,
.sakac-tech-cookie-table td {
  padding: 12px 14px;
  vertical-align: top;
  color: var(--sakac-tech-text-soft);
  line-height: 1.6;
  border-bottom: 1px solid var(--sakac-tech-border);
}

.sakac-tech-legal-table tr:last-child td,
.sakac-tech-cookie-table tr:last-child td { border-bottom: 0; }

.sakac-tech-cookie-table td code {
  font-size: 12.5px;
  color: var(--sakac-tech-text);
  word-break: break-all;
}

.sakac-tech-cookie-table td small {
  display: block;
  font-size: 11px;
  opacity: .7;
}

.sakac-tech-cookie-manage {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--sakac-tech-radius-control);
  border: 1px solid var(--sakac-tech-border-control);
  background: none;
  color: var(--sakac-tech-text);
  transition: border-color .15s ease, color .15s ease;
}

.sakac-tech-cookie-manage:hover {
  border-color: var(--sakac-tech-accent);
  color: var(--sakac-tech-accent-text);
}

.sakac-tech-footer__nav--legal a { opacity: .75; }
.sakac-tech-footer__nav--legal a:hover { opacity: 1; }

.sakac-tech-cookie__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* -----------------------------------------------------------------
 * Scheduled-post preview notice (functions.php wp_body_open) — sits
 * above the sticky header in normal flow, so it scrolls away on its
 * own instead of fighting the header's sticky z-index.
 * --------------------------------------------------------------- */

.sakac-tech-scheduled-notice {
  background: var(--sakac-tech-surface-alt);
  border-bottom: 1px solid var(--sakac-tech-border-card);
  color: var(--sakac-tech-secondary-strong);
  font-family: var(--sakac-tech-font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  padding: 9px var(--sakac-tech-gutter);
}

/* Scheduled-post admin preview badges (blog-featured-post.php,
   sakac_tech_render_blog_card()) — blue instead of the coral "featured"/
   category treatment, so a not-yet-live post reads as a distinct state
   rather than just another category. */
.sakac-tech-featured__badge--scheduled { background: var(--sakac-tech-accent-fill); color: var(--sakac-tech-on-accent); }

.sakac-tech-blog-card__cat--scheduled {
  display: inline-block;
  color: var(--sakac-tech-on-accent);
  background: var(--sakac-tech-accent-fill);
  padding: 2px 8px;
  border-radius: var(--sakac-tech-radius-chip);
  font-weight: 500;
}

/* =========================================================================
   Consent checkbox (contact forms) + newsletter consent
   ========================================================================= */

/* The mailer renders a checkbox as heading + row; on the landing form the
   heading goes the same way as the other labels (placeholder-only look),
   the caption carries the sentence. Full width in the landing grid. */
.sakac-tech-kontakt .sakac-tech-contact-form .sakac-tech-contact-form__field--checkbox { grid-column: 1 / -1; }
.sakac-tech-kontakt .sakac-tech-contact-form__field--checkbox .sakac-tech-contact-form__field-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sakac-tech-kontakt-page .sakac-tech-contact-form__field-heading {
  display: block;
  font-family: var(--sakac-tech-font-mono);
  font-size: 13px;
  color: var(--sakac-tech-accent-text);
  margin-bottom: 12px;
}

.sakac-tech-contact-form .sakac-tech-contact-form__choice-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.sakac-tech-contact-form input.sakac-tech-contact-form__checkbox {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--sakac-tech-accent-fill);
}

.sakac-tech-contact-form .sakac-tech-contact-form__choice-caption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sakac-tech-muted-1);
  font-weight: 400;
}

.sakac-tech-contact-form .sakac-tech-contact-form__choice-caption a {
  color: var(--sakac-tech-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sakac-tech-contact-form__field--invalid .sakac-tech-contact-form__choice-caption { color: #FF7A7A; }
:root[data-theme="light"] .sakac-tech-contact-form__field--invalid .sakac-tech-contact-form__choice-caption { color: #B23A3A; }

.sakac-tech-newsletter__consent {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 4px auto 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sakac-tech-muted-1);
  text-align: left;
  max-width: 560px;
  cursor: pointer;
}

.sakac-tech-newsletter__consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--sakac-tech-accent-fill);
}

.sakac-tech-newsletter__consent a {
  color: var(--sakac-tech-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================================
   Print: nothing the scroll effects hid may stay transparent on paper
   ========================================================================= */
@media print {
  [data-reveal],
  main h1, main h2, main h3, main p,
  [data-fx-hero], .sakac-tech-hero__content, [data-fx-parallax] {
    opacity: 1 !important;
    transform: none !important;
  }
  .sakac-tech-cookie, .sakac-tech-scroll-top, .sakac-tech-mobile-menu { display: none !important; }
}

/* Blog: "load more" under the grid */
.sakac-tech-blog-more { display: flex; justify-content: center; margin-top: 28px; }
.sakac-tech-blog-more[hidden] { display: none; }
.sakac-tech-blog-grid[aria-busy="true"] { opacity: .6; transition: opacity .2s; }