/* FAAI · shared site styles
   ─────────────────────────
   Single source of truth for the marketing pages — originally extracted
   from the per-locale inline <style> blocks that had been maintained in
   triplicate (the duplication that produced the HLB footer-logo
   specificity bug), now maintained directly in this file. Edit HERE;
   the pages only carry a version-stamped <link> plus two locale vars.
   Bump the ?vYYYY-MM-DD query in all three index.html when you change
   this file.

   Locale-specific bits stay out of here:
     - The two mobile TCO ::before labels read CSS custom properties
       (--tco-calc-label / --tco-total-label) set in each page's small
       inline <style>.
     - The [data-palette="burgundy"] archive block at the end only
       matches when /si?p=burgundy sets that attribute, so it is inert
       on HR/EN (which have no burgundy toggle).
*/
/* Production palette — HLB International blue (#1B5C73, sampled from the
   HLB Finservis logo) on cool near-white surfaces. These ARE the default
   tokens; the only alternative palette is the [data-palette="burgundy"]
   archive block near the end of this sheet (activated via /si?p=burgundy). */
:root{
  --bg:#F4F7F8;
  --paper:#FFFFFF;
  --surface:#EBEFF1;
  --ink:#0F1518;
  --ink-2:#26313A;
  --muted:#5C6970;
  --line:#DDE2E5;
  --line-2:#BFC7CC;
  --pos:#2D7745;
  --pos-soft:#D6E5DA;
  --neg:#B14A2A;
  --neg-soft:#F0D9CC;
  --hl:#1B5C73;
  --accent:#D6E2E7;
  --serif:'Geist','Söhne','Inter Tight', system-ui, -apple-system, sans-serif;
  --sans:'Geist','Söhne','Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --maxw:1240px;
  --pad-x:max(20px, 4vw);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  font-feature-settings:"ss01","cv11","tnum" 0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mono{font-family:var(--mono);font-feature-settings:"tnum","zero"}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em}
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:11.5px;
  color:var(--muted);
}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ============ NAV ============ */
.topbar{
  border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 88%, white);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(8px);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  /* Vertical-only padding — the parent .container provides horizontal padding (--pad-x);
     a shorthand here would zero it out and misalign the brand against the hero content. */
  padding-top:14px;padding-bottom:14px;
}
/* Brand as a burgundy badge — cream F·I, gold AA + gold bridge bar inside */
.brand{
  display:inline-flex;align-items:baseline;line-height:1;
  background:var(--hl);
  padding:6px 11px 9px;
  border-radius:6px;
  text-decoration:none;
  transition:background .15s ease;
}
.brand:hover{background:color-mix(in oklab, var(--hl) 88%, black)}
.brand .ch{font-family:var(--serif);font-size:28px;letter-spacing:-0.03em;line-height:1;color:#FFFFFF}
.brand .bridge{display:inline-flex;align-items:baseline;position:relative;padding:0 1px;margin:0 -1px}
.brand .bridge .ch{color:#A8CCD6}
.brand .bridge::after{content:"";position:absolute;left:2px;right:2px;bottom:-2px;height:1px;background:#A8CCD6}
.brand.lg{padding:10px 18px 14px;border-radius:8px}
.brand.lg .ch{font-size:56px}
.brand.lg .bridge::after{bottom:-4px;height:1.5px;left:3px;right:3px}
.brand-mark{
  width:26px;height:26px;border-radius:7px;
  background:var(--ink);color:var(--bg);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0;
}
.nav-links{display:flex;gap:22px;align-items:center;font-size:14.5px;color:var(--ink-2)}
.nav-links a{padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:color .15s ease, border-color .15s ease}
.nav-links a:hover{border-bottom-color:var(--hl);color:var(--hl)}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  display:flex;gap:2px;align-items:center;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;
}
.lang b{color:var(--ink)}
.lang span{padding:0 2px}
.lang a{color:var(--muted);text-decoration:none;padding:0 2px;transition:color .15s ease}
.lang a:hover{color:var(--hl)}
.lang .soon{color:color-mix(in oklab, var(--muted) 55%, transparent);padding:0 2px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:999px;
  font-size:14.5px;font-weight:500;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .08s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
/* Brand color carries through every interactive element.
   Hover dims slightly and lifts on a soft brand-tinted shadow. */
.btn[disabled],.btn:disabled{opacity:0.55;cursor:default;pointer-events:none;filter:saturate(0.4)}
.btn-primary{background:var(--hl);color:#FFFFFF}
.btn-primary:hover{
  background:color-mix(in oklab, var(--hl) 84%, black);
  color:#FFFFFF;
  box-shadow:0 6px 22px -8px color-mix(in oklab, var(--hl) 60%, transparent);
}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--hl);color:var(--hl)}
.btn-arr::after{content:"→";font-family:var(--mono);transition:transform .15s}
.btn:hover .btn-arr::after, .btn-arr:hover::after{transform:translateX(3px)}
.btn-text{color:var(--ink);padding:11px 4px;font-size:14.5px;font-weight:500;transition:color .18s ease}
.btn-text:hover{color:var(--hl)}

/* ============ HAMBURGER + MOBILE MENU ============ */
.hamburger{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  border:1px solid var(--line-2);border-radius:10px;
  background:transparent;padding:0;cursor:pointer;
  transition:border-color .15s ease;
}
.hamburger:hover{border-color:var(--hl)}
.hamburger span{
  display:block;width:18px;height:1.5px;background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
  transform-origin:center;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:60;
  visibility:hidden;opacity:0;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.mobile-menu[data-open="true"]{
  visibility:visible;opacity:1;
  transition:opacity .2s ease;
}
.mobile-menu-overlay{
  position:absolute;inset:0;
  background:color-mix(in oklab, var(--ink) 50%, transparent);
  backdrop-filter:blur(2px);
}
.mobile-menu-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(86%, 360px);
  background:var(--paper);
  padding:24px 26px 32px;
  display:flex;flex-direction:column;gap:8px;
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
  box-shadow:-12px 0 32px -16px rgba(14,20,15,0.25);
}
.mobile-menu[data-open="true"] .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.mobile-menu-close{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);background:transparent;
  font-family:var(--mono);font-size:18px;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;
  transition:border-color .15s ease, color .15s ease;
}
.mobile-menu-close:hover{border-color:var(--hl);color:var(--hl)}
.mobile-menu-nav{display:flex;flex-direction:column;gap:0;margin-top:12px}
.mobile-menu-nav a{
  display:block;padding:16px 0;
  font-family:var(--serif);font-size:22px;letter-spacing:-0.01em;
  border-bottom:1px solid var(--line);color:var(--ink);
  transition:color .15s ease;
}
.mobile-menu-nav a:hover{color:var(--hl)}
.mobile-menu-foot{
  margin-top:24px;display:flex;flex-direction:column;gap:14px;
}
.mobile-menu-foot .btn{justify-content:center}
.mobile-menu-foot .lang{align-self:flex-start}
.mobile-menu-foot .login-link{
  text-align:center;font-size:14px;color:var(--muted);
  padding:6px;border-bottom:1px solid var(--line);
}

/* ============ HERO ============ */
/* Directional linear gradient — warm cream upper-left, subtle burgundy lower-right.
   Composed (not amorphous): clear 135° vector, defined stops, anchors to the brand
   badge in upper-left and the 3D cube in lower-right. */
.hero{
  padding:72px 0 56px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 38%, var(--bg)) 0%,
    var(--bg) 28%,
    var(--bg) 62%,
    color-mix(in oklab, var(--hl) 10%, var(--bg)) 100%
  );
}

/* ============ 3D FAAI CUBE — hero centerpiece (developed) ============
   Layered transforms: an outer .cube-tilt that responds to mouse-parallax (JS),
   a middle .cube-float that bobs gently on a 5s loop (CSS), and the inner .cube
   that rotates at a steady 18s linear loop. Each face has a radial light gradient
   for true 3D depth + a soft burgundy floor reflection underneath. */

.cube-stage{
  position:relative;width:100%;height:480px;
  display:grid;place-items:center;
  perspective:1300px;perspective-origin:50% 40%;
}

/* Floor reflection — soft burgundy ellipse, gently pulses */
.cube-floor{
  position:absolute;left:50%;bottom:14%;
  transform:translateX(-50%);
  width:280px;height:32px;border-radius:50%;
  background:radial-gradient(ellipse,
    color-mix(in oklab, var(--hl) 38%, transparent) 0%,
    color-mix(in oklab, var(--hl) 12%, transparent) 50%,
    transparent 80%);
  filter:blur(10px);
  z-index:-1;
  animation:cube-floor-pulse 18s ease-in-out infinite;
}
@keyframes cube-floor-pulse{
  0%, 100%{transform:translateX(-50%) scaleX(1) scaleY(1);opacity:0.7}
  50%     {transform:translateX(-50%) scaleX(1.15) scaleY(0.85);opacity:0.95}
}

/* Outer wrapper — responds to mouse parallax via JS */
.cube-tilt{
  width:240px;height:240px;
  transform-style:preserve-3d;
  transition:transform 0.4s cubic-bezier(.2,.7,.2,1);
}

/* Middle wrapper — gentle floating bob, independent of rotation */
.cube-float{
  width:100%;height:100%;
  transform-style:preserve-3d;
  animation:cube-float 5s ease-in-out infinite;
}
@keyframes cube-float{
  0%, 100%{transform:translateY(0)}
  50%     {transform:translateY(-14px)}
}

/* Inner cube — continuous Y rotation */
.cube{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  animation:cube-spin 18s linear infinite;
  will-change:transform;
}
/* Note: cube keeps rotating during hover — the mouse adds dramatic tilt on top */

/* Each face has a radial gradient suggesting light from above + a gold edge */
.cube .face{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%,
      color-mix(in oklab, #A8CCD6 18%, var(--hl)) 0%,
      var(--hl) 38%,
      color-mix(in oklab, var(--hl) 88%, black) 100%);
  border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 22px;gap:14px;
  border:1px solid color-mix(in oklab, #A8CCD6 32%, var(--hl));
  box-shadow:
    0 0 0 1px color-mix(in oklab, #A8CCD6 14%, transparent) inset,
    0 40px 100px -36px color-mix(in oklab, var(--hl) 78%, transparent);
  text-align:center;
}

/* Face content — label / chart / meta common patterns */
.cube .face-label{
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:0.18em;
  color:#A8CCD6;font-weight:500;
}
.cube .face-meta{
  font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:0.1em;
  color:color-mix(in oklab, #F8F2E4 70%, transparent);
}
.cube .face-meta-arrow{color:#A8CCD6;font-size:9px;margin-right:4px}
.cube .face-chart{width:100%;max-width:240px;height:auto;display:block}
.cube .face-chart-flat{height:50px}

/* FRONT: sparkline (no extra styles needed — svg fills face-chart) */

/* RIGHT: FAAI ocena gauge */
.cube .face-gauge{position:relative;width:130px;height:130px;display:grid;place-items:center}
.cube .face-gauge svg{position:absolute;inset:0;width:100%;height:100%}
.cube .face-grade{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:68px;line-height:1;color:#F8F2E4;
  letter-spacing:-0.04em;position:relative;z-index:1;
  text-shadow:0 2px 4px color-mix(in oklab, black 28%, transparent);
}
.cube .face-grade-tail{color:#A8CCD6}

/* LEFT: Z-score */
.cube .face-score-big{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:54px;line-height:1;color:#F8F2E4;letter-spacing:-0.03em;
  text-shadow:0 2px 4px color-mix(in oklab, black 28%, transparent);
}

/* TOP: 2x2 KPI grid */
.cube .face-kpi-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;
  width:100%;max-width:200px;
}
.cube .face-kpi{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:4px 8px;
  border-left:2px solid #A8CCD6;
}
.cube .face-kpi-val{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1;
  color:#F8F2E4;letter-spacing:-0.02em;
}
.cube .face-kpi-lbl{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:0.14em;color:#A8CCD6;
}

/* BOTTOM: pulse signal */
.cube .face-pulse{position:relative;width:78px;height:78px;display:grid;place-items:center}
.cube .face-pulse-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid #A8CCD6;opacity:0.6;
}
.cube .face-pulse-ring::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid #A8CCD6;opacity:0.3;
}
.cube .face-pulse-num{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:42px;color:#F8F2E4;line-height:1;letter-spacing:-0.02em;
}

/* Six-face positioning — translateZ(120px) = half the 240px cube edge */
.cube .face-front  {transform:translateZ(120px)}
.cube .face-back   {transform:rotateY(180deg) translateZ(120px)}
.cube .face-right  {transform:rotateY(90deg)  translateZ(120px)}
.cube .face-left   {transform:rotateY(-90deg) translateZ(120px)}
.cube .face-top    {transform:rotateX(90deg)  translateZ(120px)}
.cube .face-bottom {transform:rotateX(-90deg) translateZ(120px)}

@keyframes cube-spin{
  0%   {transform:rotateY(0deg)   rotateX(-12deg)}
  100% {transform:rotateY(360deg) rotateX(-12deg)}
}

/* Canvas particle network — 30 drifting dots + connecting hairlines, drawn in 2D.
   Lives behind the cube; unaffected by cube tilt/spin. */
.cube-canvas{
  position:absolute;inset:0;pointer-events:none;
  z-index:1;
  width:100%;height:100%;
}

/* Floating brand badges — paper pills that drift gently */
.cube-badge{
  position:absolute;z-index:5;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:99px;
  padding:8px 14px;
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--ink-2);
  display:inline-flex;align-items:baseline;gap:7px;
  white-space:nowrap;
  box-shadow:
    0 1px 0 rgba(110,38,48,0.04),
    0 14px 36px -12px color-mix(in oklab, var(--hl) 35%, transparent);
  transition:opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cube-badge.swap{opacity:0.15}
.badge-delta{
  top:10%;right:4%;
  background:var(--pos-soft);
  border-color:color-mix(in oklab, var(--pos) 20%, var(--line));
  color:var(--pos);
  animation:badge-drift-a 8s ease-in-out infinite;
}
.badge-delta .badge-arrow{font-size:9px}
.badge-delta .badge-val{font-weight:500}
.badge-delta .badge-sep{opacity:0.5}
.badge-score{
  bottom:14%;left:2%;
  animation:badge-drift-b 11s ease-in-out infinite;
}
.badge-score .badge-grade{
  font-family:var(--serif);font-style:italic;
  font-size:18px;line-height:1;color:var(--ink);
  letter-spacing:-0.02em;
}
.badge-score .badge-grade-tail{color:var(--hl)}
@keyframes badge-drift-a{
  0%, 100%{transform:translate(0,0)}
  50%     {transform:translate(-8px,-12px)}
}
@keyframes badge-drift-b{
  0%, 100%{transform:translate(0,0)}
  50%     {transform:translate(10px,-10px)}
}

/* Reduced motion — static angled pose, hide floor pulse + float + particles + badges */
@media (prefers-reduced-motion: reduce){
  .cube, .cube-float, .cube-floor,
  .particle, .cube-badge{animation:none}
  .cube{transform:rotateY(-30deg) rotateX(-12deg)}
}

@media (max-width:1040px){
  .cube-stage{height:420px}
}
@media (max-width:720px){
  .cube-stage{height:380px}
  .cube-tilt{width:220px;height:220px}
  .cube-floor{width:240px}
  .cube .glyph{font-size:160px}
  .cube .label.primary{font-size:18px}
  .cube .label.secondary{font-size:9px}
  .cube .face-front{transform:translateZ(110px)}
  .cube .face-back{transform:rotateY(180deg) translateZ(110px)}
  .cube .face-right{transform:rotateY(90deg) translateZ(110px)}
  .cube .face-left{transform:rotateY(-90deg) translateZ(110px)}
  .cube .face-top{transform:rotateX(90deg) translateZ(110px)}
  .cube .face-bottom{transform:rotateX(-90deg) translateZ(110px)}
  /* Trim noise on mobile — hide brand badges, canvas adapts on its own */
  .cube-badge{display:none}
}

/* ============ SIGNAL CONSTELLATION — mid-page "Signali" section ============
   A 6-tile ecosystem with a central AI core, SVG connection network,
   and flowing-dash lines suggesting data converging to intelligence. */
.signals{padding:96px 0;border-top:1px solid var(--line)}
.signals .section-head{margin-bottom:48px}
.signals .signal-stage{min-height:560px}

/* SVG connection network — flowing dashes from each tile toward the core */
.signal-net{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.signal-net .net-line{
  animation:net-flow 9s linear infinite;
}
.signal-net .nl-2{animation-delay:-1.5s}
.signal-net .nl-3{animation-delay:-3s}
.signal-net .nl-4{animation-delay:-4.5s}
.signal-net .nl-5{animation-delay:-6s}
.signal-net .nl-6{animation-delay:-7.5s}
@keyframes net-flow{
  from{stroke-dashoffset:0}
  to  {stroke-dashoffset:-44}
}

/* Central AI core — concentric rotating dashed rings + FAAI mark */
.signal-core{
  position:absolute;top:50%;left:50%;
  width:130px;height:130px;
  transform:translate(-50%, -50%);
  z-index:3;
}
.core-rings{position:absolute;inset:0;width:100%;height:100%}
.core-ring{transform-origin:60px 60px}
.core-ring-outer{animation:core-ring-spin 22s linear infinite}
.core-ring-mid{animation:core-ring-spin 16s linear infinite reverse}
@keyframes core-ring-spin{
  to{transform:rotate(360deg)}
}
.core-disc{
  position:absolute;inset:20%;
  background:var(--hl);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-align:center;
  box-shadow:
    0 0 0 1px color-mix(in oklab, #A8CCD6 30%, transparent) inset,
    0 12px 32px -12px color-mix(in oklab, var(--hl) 70%, transparent);
  animation:core-pulse 4s ease-in-out infinite;
}
@keyframes core-pulse{
  0%, 100%{transform:scale(1)}
  50%     {transform:scale(1.06)}
}
.core-mark{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;line-height:1;color:#F8F2E4;letter-spacing:-0.03em;
}
.core-bridge{color:#A8CCD6}
.core-tag{
  font-family:var(--mono);font-size:8px;
  text-transform:uppercase;letter-spacing:0.18em;
  color:color-mix(in oklab, #F8F2E4 65%, transparent);
}

/* Tile foot helper — small caption under chart content */
.signal-tile .tile-foot{
  font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--muted);
}
.signal-tile .tile-foot-sep{opacity:0.5;margin:0 4px}
.signal-tile .tile-foot b{color:var(--hl);font-weight:500}

/* Margin bars bar build-up animation */
.tile-margin .m-bar{
  transform-origin:bottom;
  animation:bar-grow 1s cubic-bezier(.2,.7,.2,1) backwards;
}
.tile-margin .m-bar:nth-child(2){animation-delay:0.12s}
.tile-margin .m-bar:nth-child(3){animation-delay:0.24s}
.tile-margin .m-bar:nth-child(4){animation-delay:0.36s}
.tile-margin .m-bar:nth-child(5){animation-delay:0.48s}
.tile-margin .m-bar:nth-child(6){animation-delay:0.6s}
.tile-margin .m-bar:nth-child(7){animation-delay:0.72s}
@keyframes bar-grow{
  from{transform:scaleY(0)}
  to  {transform:scaleY(1)}
}

/* Counter tile inline mini-spark — sits next to the label */
.tile-counter .tile-counter-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:6px;gap:14px;
}
.tile-counter .tile-counter-head .tile-label{margin-bottom:0}
.counter-spark{width:60px;height:22px;display:block;flex-shrink:0}
.counter-spark path{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:counter-spark-draw 4s ease-in-out infinite;
}
@keyframes counter-spark-draw{
  0%   {stroke-dashoffset:120}
  60%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:0}
}

/* KPI tile (Bruto marža top-right) */
.tile-kpi{
  display:flex;flex-direction:column;gap:6px;
  min-width:140px;
}
.tile-kpi .kpi-val{
  font-family:var(--serif);font-weight:400;font-size:34px;
  line-height:1;color:var(--ink);letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.tile-kpi .kpi-delta{
  font-family:var(--mono);font-size:11px;color:var(--pos);
  background:var(--pos-soft);padding:3px 8px;border-radius:99px;
  align-self:flex-start;
}

/* Pulse tile — multiple concentric rings for richer pulse */
.tile-pulse .pulse-dot-multi::before,
.tile-pulse .pulse-dot-multi::after{
  /* Inherit the existing pulse-ring keyframes via the original rule */
}
.tile-pulse .pulse-dot-multi{position:relative}
.tile-pulse .pulse-dot-multi .extra-ring{
  position:absolute;inset:-12px;border-radius:50%;
  border:1.5px solid #A8CCD6;opacity:0;
  animation:pulse-ring 2.4s ease-out infinite;
  animation-delay:1.8s;
}

/* ============ Original constellation styles (positioning + base tiles) ============ */

.signal-stage{
  position:relative;
  width:100%;
  min-height:500px;
  perspective:1400px;
  perspective-origin:50% 45%;
}

/* Subtle radial backdrop that breathes */
.signal-backdrop{
  position:absolute;inset:8% 6%;
  background:radial-gradient(circle at 55% 40%,
    color-mix(in oklab, var(--hl) 18%, transparent) 0%,
    color-mix(in oklab, var(--hl) 5%, transparent) 35%,
    transparent 70%);
  filter:blur(4px);
  animation:backdrop-breathe 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes backdrop-breathe{
  0%, 100%{opacity:0.7;transform:scale(1)}
  50%     {opacity:1;transform:scale(1.06)}
}

/* Base tile — paper card with depth + 3D float */
.signal-tile{
  position:absolute;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:
    0 1px 0 rgba(110,38,48,0.03),
    0 12px 32px -12px color-mix(in oklab, var(--hl) 28%, transparent);
  transform-style:preserve-3d;
  will-change:transform;
}
.tile-label{
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
  margin-bottom:8px;
}

/* Tile 1: Sparkline — top-left, wide */
.tile-spark{
  top:4%;left:2%;
  width:52%;
  animation:float-A 9s ease-in-out infinite;
}
.tile-spark svg{display:block;width:100%;height:80px}
.spark-line{
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:spark-draw 5s ease-in-out infinite;
}
.spark-fill{
  opacity:0;
  animation:spark-fill 5s ease-in-out infinite;
}
.spark-dot{
  opacity:0;
  animation:spark-dot 5s ease-in-out infinite;
  transform-origin:220px 18px;
}
@keyframes spark-draw{
  0%       {stroke-dashoffset:340}
  45%      {stroke-dashoffset:0}
  85%      {stroke-dashoffset:0}
  100%     {stroke-dashoffset:0}
}
@keyframes spark-fill{
  0%       {opacity:0}
  45%      {opacity:1}
  100%     {opacity:1}
}
@keyframes spark-dot{
  0%, 40%  {opacity:0;transform:scale(0.4)}
  55%      {opacity:1;transform:scale(1.4)}
  70%, 100%{opacity:1;transform:scale(1)}
}

/* Tile KPI (Bruto marža) — top-right small */
.tile-kpi{
  top:4%;right:3%;
  animation:float-E 8.5s ease-in-out infinite;
}
@keyframes float-E{
  0%, 100%{transform:translate3d(0,0,0) rotateX(2deg) rotateY(-3deg)}
  50%     {transform:translate3d(0,8px,12px) rotateX(2deg) rotateY(-2deg)}
}

/* Tile Score: FAAI ocena gauge — middle-right, square */
.tile-score{
  top:33%;right:4%;
  width:158px;height:158px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px;
  animation:float-B 10s ease-in-out infinite;
}
.tile-score svg{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px)}
.score-arc{
  stroke-dasharray:264;
  stroke-dashoffset:264;       /* hidden start */
  animation:score-sweep 6s cubic-bezier(.4,.2,.2,1) infinite;
}
@keyframes score-sweep{
  0%, 8%   {stroke-dashoffset:264}
  50%      {stroke-dashoffset:52}   /* ~80% sweep */
  92%, 100%{stroke-dashoffset:52}
}
.score-grade{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:62px;line-height:1;color:var(--ink);
  letter-spacing:-0.04em;
  margin-top:14px;
  position:relative;z-index:1;
  animation:score-breathe 3.2s ease-in-out infinite;
}
.score-tail{color:var(--hl)}
.tile-score .tile-label{margin-top:8px;margin-bottom:0}
@keyframes score-breathe{
  0%, 100%{transform:scale(1)}
  50%     {transform:scale(1.04)}
}

/* Tile Counter: Cash today — bottom-left */
.tile-counter{
  bottom:24%;left:4%;
  width:38%;
  animation:float-C 8s ease-in-out infinite;
}

/* Tile Margin: bridge bars — bottom-center NEW */
.tile-margin{
  bottom:4%;left:36%;
  width:30%;min-width:240px;
  animation:float-F 9.5s ease-in-out infinite;
}
.tile-margin .margin-svg{width:100%;height:64px;display:block;margin-top:4px}
@keyframes float-F{
  0%, 100%{transform:translate3d(0,0,0) rotateX(1deg) rotateY(1deg)}
  50%     {transform:translate3d(0,-10px,16px) rotateX(1deg) rotateY(2deg)}
}
.counter-val{
  font-family:var(--serif);font-weight:400;
  font-size:38px;letter-spacing:-0.025em;line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin-bottom:6px;
}
.counter-delta{
  font-family:var(--mono);font-size:11px;
  color:var(--pos);
  display:inline-flex;align-items:baseline;gap:6px;
  background:var(--pos-soft);
  padding:3px 8px;border-radius:99px;
}
.delta-suffix{color:color-mix(in oklab, var(--pos) 70%, var(--ink-2));font-weight:400;opacity:0.7}

/* Tile Pulse: Signali — bottom-right, square, burgundy */
.tile-pulse{
  bottom:6%;right:4%;
  width:114px;height:114px;
  background:var(--hl);
  color:#F8F2E4;
  border-color:color-mix(in oklab, #A8CCD6 30%, var(--hl));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14px;
  animation:float-D 11s ease-in-out infinite;
}
.tile-pulse .tile-label{color:color-mix(in oklab, #F8F2E4 60%, transparent)}
.pulse-dot{
  position:relative;
  width:14px;height:14px;border-radius:50%;
  background:#A8CCD6;
  margin-bottom:10px;
}
.pulse-dot::before,
.pulse-dot::after{
  content:"";position:absolute;inset:-4px;
  border-radius:50%;
  border:1.5px solid #A8CCD6;
  opacity:0;
  animation:pulse-ring 2.4s ease-out infinite;
}
.pulse-dot::after{animation-delay:1.2s}
@keyframes pulse-ring{
  0%   {opacity:0.7;transform:scale(0.6)}
  100% {opacity:0;transform:scale(3.2)}
}
.pulse-val{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:42px;line-height:1;color:#F8F2E4;
  letter-spacing:-0.02em;
}
.tile-pulse .tile-label{margin-top:4px;margin-bottom:0;letter-spacing:0.14em}

/* Independent float animations — each tile drifts on its own timing in 3D space */
@keyframes float-A{
  0%, 100%{transform:translate3d(0,0,0) rotateX(2deg) rotateY(-3deg)}
  50%     {transform:translate3d(0,-10px,18px) rotateX(2deg) rotateY(-2deg)}
}
@keyframes float-B{
  0%, 100%{transform:translate3d(0,0,0) rotateX(-2deg) rotateY(4deg)}
  50%     {transform:translate3d(0,12px,-8px) rotateX(-2deg) rotateY(5deg)}
}
@keyframes float-C{
  0%, 100%{transform:translate3d(0,0,0) rotateX(1deg) rotateY(2deg)}
  50%     {transform:translate3d(0,-8px,12px) rotateX(1deg) rotateY(3deg)}
}
@keyframes float-D{
  0%, 100%{transform:translate3d(0,0,0) rotateX(-3deg) rotateY(-2deg)}
  50%     {transform:translate3d(0,14px,-4px) rotateX(-3deg) rotateY(-3deg)}
}

/* Responsive: simpler arrangement on mobile — hide network + core + the two newer tiles */
@media (max-width:720px){
  .signals .signal-stage{min-height:420px}
  .signal-net, .signal-core{display:none}
  .tile-kpi, .tile-margin{display:none}
  .tile-spark{width:70%}
  .tile-score{width:130px;height:130px;top:auto;bottom:36%;right:4%}
  .tile-score svg{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
  .score-grade{font-size:48px}
  .tile-counter{width:60%;bottom:10%;left:4%}
  .counter-val{font-size:30px}
  .tile-pulse{width:100px;height:100px;right:6%;bottom:6%}
  .pulse-val{font-size:34px}
}

/* Respect motion preferences — show final state, no animation timers */
@media (prefers-reduced-motion: reduce){
  .signal-backdrop,
  .spark-line, .spark-fill, .spark-dot,
  .score-arc, .score-grade,
  .pulse-dot::before, .pulse-dot::after,
  .tile-spark, .tile-score, .tile-counter, .tile-pulse,
  .tile-kpi, .tile-margin,
  .signal-net .net-line,
  .core-ring-outer, .core-ring-mid, .core-disc,
  .counter-spark path,
  .tile-margin .m-bar{
    animation:none;
  }
  .spark-line{stroke-dashoffset:0}
  .spark-fill, .spark-dot{opacity:1}
  .score-arc{stroke-dashoffset:52}
  .counter-spark path{stroke-dashoffset:0}
}
/* minmax(0, ...) prevents long unbreakable words from blowing out the columns */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px, 6.2vw, 84px);
  line-height:1.06;letter-spacing:-0.025em;
  margin:18px 0 34px;
  padding-bottom:6px;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.hero h1 em{font-style:italic;color:var(--hl)}
.hero p.lead{
  font-size:19px;line-height:1.5;color:var(--ink-2);
  max-width:540px;
  text-wrap:pretty;
}
.hero-ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-meta{
  margin-top:28px;display:flex;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;
}
.hero-meta b{color:var(--ink);font-weight:500}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pos);margin-right:6px;vertical-align:middle}

/* ============ Acronym strip ============ */
.acronym{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:color-mix(in oklab, var(--paper) 70%, var(--bg));
}
.acronym .row{
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:22px 0;flex-wrap:wrap;
}
.acronym .item{
  display:inline-flex;align-items:baseline;gap:10px;
  padding:0 24px;border-right:1px solid var(--line-2);
}
.acronym .item:last-child{border-right:none}
.acronym .ch{
  font-family:var(--serif);font-size:38px;color:var(--ink);
  letter-spacing:-0.03em;line-height:1;
}
.acronym .item.bridge .ch{color:var(--hl)}
.acronym .word{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:0.18em;color:var(--ink-2);line-height:1;
}
.acronym .item.bridge .word{color:var(--hl)}
.acronym .tail{
  display:inline-flex;align-items:center;gap:8px;padding:0 24px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:0.22em;color:var(--muted);
}
.acronym .tail b{
  font-family:var(--serif);font-size:24px;color:var(--hl);
  letter-spacing:-0.02em;line-height:1;font-weight:400;
  text-transform:none;
}
@media (max-width:760px){
  .acronym .row{gap:6px 0;padding:18px 0}
  .acronym .item{padding:0 12px}
  .acronym .ch{font-size:28px}
  .acronym .word{font-size:9.5px;letter-spacing:0.14em}
  .acronym .tail{padding:0 12px;font-size:9.5px}
  .acronym .tail b{font-size:18px}
}

/* Integration strip */
.integrations{
  margin-top:54px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.integrations .label{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}
.intg-list{display:flex;gap:32px;flex-wrap:wrap;align-items:center}
.intg{
  display:flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:22px;color:var(--ink);
}
.intg .swatch{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;color:white;font-family:var(--mono);font-size:10px}
.intg.minimax .swatch{background:#0E140F}
.intg.vasco .swatch{background:#2F6B45}
.intg.odoo .swatch{background:#714B67}
.intg.ajpes .swatch{background:#6B6B61}
.intg.mcp .swatch{background:#9A3322}

/* ============ Dashboard mock ============ */
.dash{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 0 rgba(14,20,15,0.02), 0 18px 40px -28px rgba(14,20,15,0.18);
  font-size:13px;
}
.dash-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:14px;
}
.dash-bar .left{display:flex;align-items:center;gap:10px}
.dash-bar .traffic{display:flex;gap:5px}
.dash-bar .traffic span{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.dash-bar .crumb{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.dash-bar .crumb b{color:var(--ink);font-weight:500}
.dash-bar .status{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:flex;gap:14px;align-items:center;white-space:nowrap}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.kpi{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;background:var(--surface);
}
.kpi .k-label{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k-val{font-family:var(--serif);font-size:24px;letter-spacing:-0.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .k-delta{font-family:var(--mono);font-size:11px;margin-top:4px;display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px}
.kpi .k-delta.up{background:var(--pos-soft);color:var(--pos)}
.kpi .k-delta.down{background:var(--neg-soft);color:var(--neg)}

.dash-row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.card{
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:12px 14px;
}
.card h4{
  margin:0 0 6px;font-family:var(--mono);font-weight:500;
  font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);
  display:flex;justify-content:space-between;align-items:baseline;
}
.card h4 .h4-meta{color:var(--ink);font-weight:500}
.chart{height:130px;width:100%;display:block}

/* Alerts list */
.alerts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.alert{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:8px 4px;border-bottom:1px dashed var(--line);
}
.alert:last-child{border-bottom:none}
.alert .pill{
  font-family:var(--mono);font-size:10px;letter-spacing:0.06em;
  padding:2px 6px;border-radius:4px;text-transform:uppercase;
}
.pill.warn{background:#F5E6CA;color:#7A4E12}
.pill.bad{background:var(--neg-soft);color:var(--neg)}
.pill.ok{background:var(--pos-soft);color:var(--pos)}
.alert .msg{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.alert .amt{font-family:var(--mono);font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums}

/* sticker */
.sticker{
  position:absolute;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:0.06em;text-transform:uppercase;
  background:var(--bg);padding:2px 6px;
  border:1px dashed var(--line-2);border-radius:4px;
  pointer-events:none;
}

/* ============ Sections ============ */
section{padding:96px 0;border-top:1px solid var(--line);position:relative}
.section-head{
  /* h2 gets more room (it's the focal point); descriptor anchors to h2's bottom baseline */
  display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);gap:56px;
  margin-bottom:56px;
  align-items:end;
}
/* Eyebrow gets a short burgundy hairline above it — a small editorial signature
   that signals "section start" without the amorphous gradient washes */
.section-head .h-left .eyebrow{
  display:block;margin-bottom:14px;position:relative;padding-top:16px;
}
.section-head .h-left .eyebrow::before{
  content:"";position:absolute;top:0;left:0;
  width:32px;height:2px;background:var(--hl);
}
.section-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px, 4.2vw, 56px);
  line-height:1.05;letter-spacing:-0.02em;
  margin:0;text-wrap:balance;
}
.section-head h2 em{font-style:italic;color:var(--hl);white-space:nowrap}
.section-head .h-right{
  color:var(--ink-2);font-size:17px;max-width:440px;line-height:1.55;
  padding-bottom:8px;     /* optical alignment with h2's last-line baseline */
}
.section-head .h-right p{margin:0 0 10px}
.section-head .h-right p:last-child{margin-bottom:0}

/* ============ Problem ============ */
.problem-list{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0;
  border-top:1px solid var(--line);
}
.problem-list .item{
  grid-column:span 12;
  display:grid;grid-template-columns:96px 1fr 280px;gap:32px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--line);
}
.problem-list .item .num{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding-top:6px}
.problem-list .item .h{font-family:var(--serif);font-size:30px;line-height:1.1;letter-spacing:-0.015em;text-wrap:balance}
.problem-list .item .h em{font-style:italic;color:var(--hl)}
.problem-list .item .b{color:var(--muted);font-size:15px;line-height:1.55}

/* ============ Izziv detail (raw accounting evidence) ============ */
.izziv-detail{margin:0 0 56px;display:grid;gap:24px}
.izziv-intro h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px, 2.6vw, 32px);
  letter-spacing:-0.015em;line-height:1.15;
  margin:0 0 12px;text-wrap:balance;
}
.izziv-intro h3 em{font-style:italic;color:var(--hl)}
.izziv-intro p{font-size:16px;color:var(--ink-2);line-height:1.55;margin:0;max-width:720px}
.izziv-mocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.izziv-mock{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:16px;display:flex;flex-direction:column;gap:10px;
  min-height:230px;color:var(--ink);
}
.izziv-mock .mock-head{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line);
}
.izziv-mock .mock-tbl{font-family:var(--mono);font-size:11.5px;display:flex;flex-direction:column;gap:0;color:var(--ink-2)}
.izziv-mock .mock-tbl > div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--line)}
.izziv-mock .mock-tbl > div.strong{font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}
.izziv-mock .mock-tbl b{font-variant-numeric:tabular-nums;font-weight:500}
.izziv-mock .mock-chart{flex:1;display:block;width:100%;height:auto;color:var(--ink);min-height:120px}
.izziv-mock .mock-rows{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.65}
.izziv-mock .mock-rows > div{padding:2px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between}
.izziv-mock .mock-rows b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.izziv-mock .mock-foot{
  margin-top:auto;font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--hl);letter-spacing:-0.01em;padding-top:6px;
}
@media (max-width:900px){.izziv-mocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.izziv-mocks{grid-template-columns:minmax(0,1fr)} .izziv-mock{min-height:auto}}

/* ============ How it works ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step{padding:40px 32px 36px;border-right:1px solid var(--line);position:relative;background:var(--paper)}
.step:last-child{border-right:none}
.step .step-num{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.step .step-num b{
  width:22px;height:22px;border-radius:50%;background:var(--hl);color:#F8F2E4;
  display:grid;place-items:center;font-size:11px;font-weight:500;
}
.step h3{font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:-0.015em;margin:8px 0 12px;line-height:1.05}
.step p{color:var(--ink-2);font-size:15.5px;margin:0 0 18px}
.step .viz{
  margin-top:10px;height:120px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:12px;display:flex;flex-direction:column;justify-content:space-between;
}

/* ============ Benefits ============ */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.benefit{background:var(--paper);padding:28px 26px 30px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.benefit .b-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.benefit .b-icon{
  width:34px;height:34px;border-radius:8px;
  border:1px solid color-mix(in oklab, var(--hl) 25%, transparent);
  background:color-mix(in oklab, var(--hl) 9%, var(--bg));
  color:var(--hl);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500;
}
.benefit .b-tag{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;padding-top:8px}
.benefit h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-0.015em;margin:0;text-wrap:balance}
.benefit p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.benefit .demo{
  margin-top:6px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--surface);line-height:1.5;
}

/* ============ V živo — application screenshot gallery ============
   Visual proof: a 2-column grid of actual FAAI dashboards from the live
   product. Lazy-loaded PNGs sit in /public/screenshots/. Each card has
   a subtle hover lift and gold border accent.
*/
.app-shots{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px;margin-top:32px;
}
.app-shot{
  margin:0;display:flex;flex-direction:column;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:var(--paper);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-shot:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--hl) 30%, var(--line-2));
  box-shadow:0 14px 32px -14px color-mix(in oklab, var(--ink) 22%, transparent);
}
.app-shot img{
  display:block;width:100%;height:auto;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.app-shot figcaption{
  padding:16px 22px 20px;display:flex;flex-direction:column;gap:4px;
}
.app-shot .shot-eyebrow{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);
}
.app-shot .shot-title{
  font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-0.01em;color:var(--ink);
  margin-top:2px;
}
.app-shot .shot-title em{font-style:italic;color:var(--hl)}
.app-shot .shot-meta{
  color:var(--ink-2);font-size:14.5px;line-height:1.5;margin-top:4px;
}
.app-shots-note{
  margin-top:24px;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;text-align:center;
}
@media (max-width:780px){
  .app-shots{grid-template-columns:1fr;gap:18px}
  .app-shot figcaption{padding:14px 16px 18px}
  .app-shot .shot-title{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .app-shot{transition:none}
  .app-shot:hover{transform:none}
}
/* Cursor signal: the screenshots are clickable for fullscreen view. */
.app-shot picture{cursor:zoom-in;display:block}

/* ============ Lightbox — native <dialog> fullscreen image viewer ============
   Open: click on any .app-shot picture.
   Close: ESC (native), backdrop click, or × button. Tab trap is built
   into <dialog>, so no extra keyboard work needed.
*/
.lightbox{
  width:100vw;height:100vh;max-width:100vw;max-height:100vh;
  margin:0;border:none;padding:0;
  background:transparent;color:var(--paper);
}
.lightbox[open]{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;
}
.lightbox::backdrop{
  background:rgba(20, 18, 16, 0.92);
  backdrop-filter:blur(4px);
}
.lightbox img{
  display:block;width:auto;height:auto;
  max-width:min(96vw, 1600px);max-height:82vh;
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  background:var(--surface);
}
.lightbox-caption{
  font-family:var(--mono);font-size:12.5px;color:var(--paper);opacity:0.85;
  text-transform:uppercase;letter-spacing:0.08em;text-align:center;
  max-width:90vw;line-height:1.5;
}
.lightbox-caption b{color:var(--paper);opacity:1;font-weight:500}
.lightbox-close{
  position:absolute;top:18px;right:24px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(248, 242, 228, 0.35);
  background:rgba(20, 18, 16, 0.5);
  color:var(--paper);
  font-family:var(--mono);font-size:24px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease, background .15s ease;
}
.lightbox-close:hover,.lightbox-close:focus-visible{
  border-color:var(--paper);
  background:rgba(20, 18, 16, 0.75);
  outline:none;
}
@media (max-width:680px){
  .lightbox[open]{padding:12px}
  .lightbox-close{top:10px;right:12px;width:38px;height:38px;font-size:20px}
  .lightbox img{max-height:76vh}
}

/* ============ Capabilities ============ */
.cap-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:start}
.cap-list{border-top:1px solid var(--line)}
.cap-list .row{
  display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:padding .15s ease;
}
.cap-list .row .t{min-width:0;overflow-wrap:break-word}
.cap-list .row .n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.cap-list .row .t{font-family:var(--serif);font-size:22px;letter-spacing:-0.01em}
.cap-list .row .c{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.cap-list .row:hover{padding-left:6px}
.cap-list .row.active{background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 50%, transparent), transparent)}
.cap-list .row.active .t{color:var(--hl)}

.cap-preview{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:18px;min-height:540px;
}
.cap-preview .pre-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:12px}
.cap-preview .pre-head h4{margin:0;font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-0.015em}
.cap-preview .pre-head .meta{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
.cap-preview .pre-body{display:flex;flex-direction:column;gap:18px}
.cap-preview p.descr{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.cap-preview .panel{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:20px 22px;min-height:340px}

/* Capability panel — abstract icon + views list + example question */
.cap-body{display:flex;flex-direction:column;gap:22px}
.cap-body .cap-icon{
  width:56px;height:56px;display:grid;place-items:center;
  border:1px solid color-mix(in oklab, var(--hl) 22%, transparent);
  background:color-mix(in oklab, var(--hl) 5%, var(--surface));
  border-radius:12px;
}
.cap-body .cap-icon svg{width:38px;height:38px;display:block}
.cap-body .cap-views-label,
.cap-body .cap-question-label{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:0.12em;color:var(--muted);margin-bottom:8px;
}
.cap-body .cap-views-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.cap-body .cap-views-list li{
  position:relative;padding:6px 0 6px 22px;
  font-size:14.5px;color:var(--ink-2);line-height:1.45;
  border-bottom:1px dashed var(--line);
}
.cap-body .cap-views-list li:last-child{border-bottom:none}
.cap-body .cap-views-list li::before{
  content:"";position:absolute;left:0;top:13px;
  width:8px;height:1px;background:var(--hl);
}
.cap-body .cap-question{
  margin-top:6px;padding:16px 18px;
  background:color-mix(in oklab, var(--hl) 6%, var(--surface));
  border:1px solid color-mix(in oklab, var(--hl) 16%, var(--line));
  border-radius:10px;
}
.cap-body .cap-question-text{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:19px;line-height:1.3;letter-spacing:-0.01em;
  color:var(--ink);text-wrap:balance;
}

/* ============ Why FAAI (compare table) ============ */
.compare{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);
}
.compare .ch{
  display:grid;grid-template-columns:1.4fr repeat(2,1fr);
  border-bottom:1px solid var(--line);
}
.compare .ch > div{padding:18px 22px;border-right:1px solid var(--line);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.compare .ch > div:last-child{border-right:none}
.compare .ch > div.faai{color:var(--hl);background:var(--accent)}
.compare .row{
  display:grid;grid-template-columns:1.4fr repeat(2,1fr);
  border-bottom:1px solid var(--line);
}
.compare .row:last-child{border-bottom:none}
.compare .row > div{padding:22px;border-right:1px solid var(--line);font-size:15px;color:var(--ink-2);line-height:1.5}
.compare .row > div:last-child{border-right:none}
.compare .row > div.q{font-family:var(--serif);font-size:22px;color:var(--ink);letter-spacing:-0.01em;line-height:1.2}
.compare .row > div.faai{background:color-mix(in oklab, var(--accent) 55%, var(--paper));color:var(--ink)}
.compare .row > div.faai b{color:var(--hl);font-weight:500}

/* ============ TCO COMPARISON ============ */
/* Money-anchored comparison shown directly after .compare — turns "feature parity"
   into a TCO conversation. The FAAI row is highlighted in the same accent
   that .compare uses for its FAAI column, for visual continuity. */
.tco-wrap{margin-top:56px;padding-top:48px;border-top:1px solid var(--line)}
.tco-eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.12em;font-size:11.5px;color:var(--muted);display:block;margin-bottom:14px}
.tco-h3{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.12;letter-spacing:-0.015em;margin:0 0 8px;text-wrap:balance}
.tco-h3 em{font-style:italic;color:var(--hl)}
.tco-lead{font-size:15.5px;color:var(--ink-2);line-height:1.55;margin:0 0 30px;max-width:640px}
.tco{
  display:grid;grid-template-columns:1.7fr 1.4fr 1fr;
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--paper);
}
.tco-h{
  padding:14px 22px;background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:0.1em;font-weight:500;
}
.tco-h-right{text-align:right}
.tco-cell{
  padding:20px 22px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-2);line-height:1.5;
}
.tco-label{font-family:var(--sans);color:var(--ink);font-weight:500}
.tco-label .sub{display:block;margin-top:4px;font-weight:400;color:var(--muted);font-size:13px}
.tco-calc{font-family:var(--mono);font-size:13.5px;color:var(--muted);line-height:1.45}
.tco-total{font-family:var(--mono);font-size:15.5px;color:var(--ink);font-weight:500;text-align:right;white-space:nowrap}
.tco-total .sub{display:block;margin-top:3px;font-weight:400;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.08em}
.tco-cell.tco-faai{background:color-mix(in oklab, var(--accent) 55%, var(--paper));border-top:1px solid var(--line-2)}
.tco-cell.tco-faai.tco-label{color:var(--hl)}
.tco-cell.tco-faai.tco-total{color:var(--hl);font-weight:600}
.tco-note{
  margin-top:22px;padding:16px 20px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface);font-size:14px;color:var(--ink-2);
  display:flex;align-items:flex-start;gap:12px;
}
.tco-note::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--hl);margin-top:7px}
.tco-note b{color:var(--hl);font-weight:500}
@media (max-width:720px){
  .tco{grid-template-columns:1fr}
  .tco-h:nth-of-type(2),.tco-h:nth-of-type(3){display:none}
  .tco-cell{border-top:none;border-bottom:1px solid var(--line);padding:14px 18px}
  .tco-cell.tco-label{padding-top:18px;font-size:16px}
  .tco-cell.tco-calc::before{content:var(--tco-calc-label);color:var(--muted);font-family:var(--sans);text-transform:uppercase;font-size:10.5px;letter-spacing:0.1em;display:block;margin-bottom:2px}
  .tco-cell.tco-total{text-align:left;font-size:17px}
  .tco-cell.tco-total::before{content:var(--tco-total-label);color:var(--muted);font-family:var(--sans);text-transform:uppercase;font-size:10.5px;letter-spacing:0.1em;display:block;margin-bottom:2px}
  .tco-cell.tco-total .sub{text-align:left}
  .tco-h3{font-size:26px}
}

/* ============ Pricing ============ */
.price{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);
}
.price .left{padding:48px;border-right:1px solid var(--line);background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 60%, var(--paper)), var(--paper))}
.price .right{padding:48px;display:flex;flex-direction:column;gap:18px;justify-content:flex-start}
.price .right ul{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.price .right li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:15.5px;color:var(--ink-2)}
.price .right li::before{
  content:"";margin-top:7px;width:8px;height:8px;background:var(--hl);border-radius:50%;
}
.price .tag{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px}
.price h3{font-family:var(--serif);font-weight:400;font-size:48px;letter-spacing:-0.025em;margin:0 0 8px;line-height:1.02}
.price .free{font-family:var(--serif);font-size:84px;line-height:1;letter-spacing:-0.035em;margin:18px 0 4px}
.price .free small{font-family:var(--sans);font-size:18px;color:var(--muted);letter-spacing:0;margin-left:8px}
.price .then{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.price .then b{color:var(--ink);font-weight:500}
.price .fineprint{font-size:13px;color:var(--muted);margin-top:auto}

/* ============ PRICE CARDS — annual vs monthly (2025-11) ============ */
.price-tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 8px}
.price-card{
  position:relative;
  padding:24px 22px 22px;
  border:1px solid var(--line-2);border-radius:12px;
  background:var(--paper);
}
.price-card.popular{
  border-color:var(--hl);
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 55%, var(--paper)), var(--paper));
}
.popular-badge{
  position:absolute;top:-10px;right:14px;
  background:var(--hl);color:#F8F2E4;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;
  padding:4px 11px;border-radius:99px;font-weight:500;
}
.price-card .ptag{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.12em;
  color:var(--muted);margin-bottom:10px;display:block;
}
.price-card.popular .ptag{color:var(--hl)}
.price-num{
  font-family:var(--serif);font-weight:400;font-size:56px;line-height:1;letter-spacing:-0.025em;
  color:var(--ink);
  display:flex;align-items:baseline;gap:6px;
}
.price-card.popular .price-num{color:var(--hl)}
.price-per{
  font-family:var(--sans);font-size:18px;color:var(--muted);font-weight:400;letter-spacing:0;
}
.price-sub{
  font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:0.02em;
}
.price-save{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);line-height:1.45;
}
.price-save b{color:var(--hl);font-weight:500}
.price-save-muted{color:var(--muted)}
@media (max-width:720px){
  .price-tabs{grid-template-columns:1fr}
  .price-num{font-size:48px}
}

/* ============ Security ============ */
.sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sec-cell{padding:32px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:var(--paper);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.sec-cell:nth-child(2n){border-right:none}
.sec-cell:nth-last-child(-n+2){border-bottom:none}
.sec-cell .ico{
  width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);
  display:grid;place-items:center;color:var(--hl);
}
.sec-cell h4{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-0.01em;margin:0 0 4px}
.sec-cell p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ============ SVETOVANJE → mailto CTA blok ============ */
.svet-mailto{
  margin-top:32px;padding:26px 30px;
  border:1px solid var(--line-2);border-radius:14px;
  background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.svet-mailto-text{flex:1;min-width:280px}
.svet-mailto-eyebrow{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px}
.svet-mailto-headline{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-0.01em;margin-bottom:6px;text-wrap:balance}
.svet-mailto-headline em{font-style:italic;color:var(--hl)}
.svet-mailto-sub{color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:540px}
.svet-mailto .btn{flex-shrink:0}
@media (max-width:680px){
  .svet-mailto{flex-direction:column;align-items:stretch;padding:22px 22px}
  .svet-mailto .btn{align-self:flex-start}
  .svet-mailto-headline{font-size:21px}
}

/* ============ KONTAKT FORM ============ */
.svet-form-wrap{
  margin-top:32px;padding:32px 36px;
  border:1px solid var(--line-2);border-radius:14px;
  background:var(--surface);
}
/* Collapsed-by-default CTA (form expands on click) */
.svet-collapsed{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.svet-collapsed-text{flex:1;min-width:280px}
.svet-collapsed-text .eyebrow{display:inline-block;margin-bottom:8px}
.svet-collapsed-text h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-0.01em;margin:0 0 6px;text-wrap:balance}
.svet-collapsed-text h3 em{font-style:italic;color:var(--hl)}
.svet-collapsed-text p{color:var(--ink-2);font-size:14.5px;line-height:1.5;margin:0;max-width:540px}
.svet-collapsed-text .quick-tags{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.svet-collapsed-text .quick-tags span{padding:3px 9px;border:1px solid var(--line-2);border-radius:99px;background:var(--paper)}
.svet-collapsed .btn{flex-shrink:0}
/* Conditional fields — JS toggles `hidden` attribute */
.svet-cond[hidden]{display:none !important}
/* Smooth expand */
.svet-expanded{animation:svet-expand .25s cubic-bezier(.2,.7,.2,1)}
@keyframes svet-expand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.svet-expanded{animation:none}}
@media (max-width:680px){
  .svet-collapsed{flex-direction:column;align-items:stretch}
  .svet-collapsed .btn{align-self:flex-start}
}
.svet-form-head{margin-bottom:24px;max-width:560px}
.svet-form-head .eyebrow{display:inline-block;margin-bottom:8px}
.svet-form-head h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-0.015em;margin:0 0 8px;text-wrap:balance}
.svet-form-head h3 em{font-style:italic;color:var(--hl)}
.svet-form-head p{color:var(--ink-2);font-size:15px;margin:0;line-height:1.5}
.svet-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.svet-form .field{display:flex;flex-direction:column;gap:6px;position:relative}
.svet-form .field-wide{grid-column:span 2}
.svet-form label{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;font-weight:500;
}
.svet-form .req{color:var(--hl);font-weight:500}
.svet-form input[type=text],
.svet-form input[type=email],
.svet-form input[type=tel],
.svet-form input[type=datetime-local],
.svet-form select,
.svet-form textarea{
  font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:8px;
  padding:11px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
  width:100%;
}
.svet-form select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B6B61' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:10px;padding-right:36px}
.svet-form input:focus,
.svet-form select:focus,
.svet-form textarea:focus{
  outline:none;border-color:var(--hl);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--hl) 18%, transparent);
}
.svet-form textarea{resize:vertical;min-height:96px;line-height:1.45}
.svet-form .field-hint{font-size:12.5px;color:var(--muted);margin-top:4px;font-family:var(--sans);text-transform:none;letter-spacing:0;line-height:1.4}
.svet-form .hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.svet-form .field-consent{margin-top:4px}
.svet-form .field-consent label{
  font-family:var(--sans);font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--ink-2);line-height:1.5;font-weight:400;
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
}
.svet-form .field-consent input{margin-top:3px;flex-shrink:0;accent-color:var(--hl)}
.svet-form .field-consent a{color:var(--hl);border-bottom:1px solid var(--line-2)}
.svet-form-turnstile{grid-column:span 2;min-height:65px}
.svet-form-actions{grid-column:span 2;margin-top:6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.svet-form-actions .fineprint{font-size:12.5px;color:var(--muted);max-width:300px;line-height:1.4}
.sf-result{
  grid-column:span 2;padding:14px 18px;border-radius:8px;font-size:14px;line-height:1.5;
}
.sf-result.sf-ok{background:color-mix(in oklab, #2F6B45 12%, var(--surface));color:var(--ink);border:1px solid color-mix(in oklab, #2F6B45 35%, var(--line-2))}
.sf-result.sf-ok strong{color:#2F6B45}
.sf-result.sf-err{background:color-mix(in oklab, #9A3322 10%, var(--surface));color:var(--ink);border:1px solid color-mix(in oklab, #9A3322 35%, var(--line-2))}
@media (max-width:680px){
  .svet-form-wrap{padding:24px 22px}
  .svet-form{grid-template-columns:1fr;gap:16px}
  .svet-form .field-wide,.svet-form-actions,.svet-form-turnstile,.sf-result{grid-column:span 1}
  .svet-form-head h3{font-size:24px}
}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line)}
.faq details{
  border-bottom:1px solid var(--line);padding:22px 0;
}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:20px;align-items:start;
  font-family:var(--serif);font-size:26px;letter-spacing:-0.015em;line-height:1.2;
  transition:color .15s ease;
}
.faq summary:hover{color:var(--hl)}
.faq summary:hover::after{color:var(--hl)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--mono);font-size:22px;color:var(--muted);
  transition:transform .2s ease;line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--hl)}
.faq .ans{padding-top:14px;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:780px}

/* ============ Final CTA ============ */
.final{
  background:var(--ink);color:var(--bg);
  border-radius:18px;
  padding:64px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;
}
.final h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-0.025em;margin:0;text-wrap:balance}
.final h2 em{font-style:italic;color:color-mix(in oklab, var(--pos) 55%, var(--bg))}
.final p{color:color-mix(in oklab, var(--bg) 70%, transparent);font-size:18px;margin:18px 0 0;max-width:540px}
.final .actions{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.final .btn-primary{background:var(--bg);color:var(--ink)}
.final .btn-primary:hover{background:#fff}
.final .btn-ghost{border-color:color-mix(in oklab, var(--bg) 35%, transparent);color:var(--bg)}
.final .btn-ghost:hover{border-color:var(--bg)}
.final-wrap{padding:80px 0 120px}

/* ============ Footer ============ */
footer{padding:56px 0 40px;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3, 1fr);gap:32px;margin-bottom:48px}
.foot-top h5{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin:0 0 14px;font-weight:500}
.foot-top ul{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink-2)}
.foot-top ul a:hover{color:var(--ink)}
.foot-bot{display:flex;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
.foot-legal{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:16px;font-family:var(--sans);font-size:11.5px;line-height:1.6;color:var(--muted);text-transform:none;letter-spacing:0}
.foot-legal-text{flex:1;min-width:0}
.foot-legal b{color:var(--ink-2);font-weight:500}
.foot-legal a{color:var(--muted);border-bottom:1px solid var(--line)}
.foot-legal a:hover{color:var(--hl);border-bottom-color:var(--hl)}
/* HLB Finservis brand mark — official PNG logo at /hlb-finservis.png.
   Sized to a fixed pixel height so the lockup keeps its aspect
   ratio at every viewport. Underline override bumped to
   .foot-legal a.foot-hlb specificity so the generic .foot-legal a
   rule does not draw a line under the image. */
.foot-legal a.foot-hlb{border-bottom:none}
.foot-hlb{
  display:inline-flex;align-items:center;flex-shrink:0;
  text-decoration:none;
  transition:transform .15s ease, opacity .15s ease;
}
.foot-hlb:hover{transform:translateY(-1px);opacity:0.78}
.foot-hlb img{display:block;height:30px;width:auto}
@media (max-width:560px){
  .foot-legal{flex-direction:column;gap:10px}
  .foot-hlb img{height:26px}
}

/* ============ Responsive ============ */
@media (max-width: 1040px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .benefit[style*="grid-column:span 3"]{grid-column:span 2 !important}
  .section-head{grid-template-columns:1fr;gap:24px}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .cap-wrap{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
  .price .left{border-right:none;border-bottom:1px solid var(--line)}
  .final{grid-template-columns:1fr;gap:32px;padding:48px}
  .final .actions{align-items:flex-start}
  .compare .ch, .compare .row{grid-template-columns:1fr 1fr 1fr}
  .cap-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 720px){
  html{overflow-x:hidden}              /* safety net for any stubborn overflow */
  body{font-size:16px}
  .nav{gap:12px;padding-top:10px;padding-bottom:10px}
  .nav-links{display:none}
  .nav .lang{display:none}              /* shown in the mobile menu instead */
  .nav-right > .btn-text{display:none}  /* "Prijava" lives in the mobile menu */
  .nav-right{gap:8px}
  .hamburger{display:flex}
  .brand .ch{font-size:24px}
  .btn{padding:9px 14px;font-size:13.5px}
  .hero h1{font-size:clamp(32px, 9.5vw, 44px);hyphens:auto}
  .dash-bar .crumb{max-width:180px}
  .dash-bar .status{display:none}      /* "Sinhronizirano · pred 4 min" — nice-to-have, hide on mobile */
  .cap-wrap{grid-template-columns:minmax(0,1fr)}
  .cap-list .row{grid-template-columns:30px minmax(0,1fr) auto;gap:12px;padding:12px 0}
  .cap-list .row .t{font-size:18px}
  .cap-list .row .c{font-size:10px}
  .cap-preview{padding:14px}
  .cap-preview .pre-head h4{font-size:22px}
  .cap-preview .panel{padding:10px;min-height:auto}
  /* JS-generated panel content uses inline 4-col grids; collapse to 2-col on mobile */
  .cap-preview .panel > div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .cap-preview .panel > div[style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .cap-preview .panel [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr) !important}
  .cap-preview .panel svg{max-width:100%;height:auto}
  section{padding:64px 0}
  .hero{padding:40px 0 32px}
  .hero h1{margin:14px 0 22px}
  .hero p.lead{font-size:17px}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{justify-content:center}
  .hero-meta{gap:14px;font-size:10.5px}
  .integrations{flex-direction:column;align-items:flex-start;gap:12px}
  .intg-list{gap:18px}
  .intg{font-size:18px}
  /* Dashboard mock — keep it visible but compact */
  .dash{padding:10px;font-size:12px}
  .dash-bar{padding:2px 4px 8px;margin-bottom:10px}
  .dash-bar .crumb{font-size:10px}
  .dash-bar .status{font-size:10px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:10px}
  .kpi .k-label{font-size:9.5px;letter-spacing:0.06em}
  .kpi .k-val{font-size:22px;margin-top:4px}
  .kpi .k-delta{font-size:10px}
  .dash-row{grid-template-columns:1fr;gap:8px}
  .card{padding:10px 12px}
  .alert .msg{font-size:12px;line-height:1.3}
  .alert .amt{font-size:10.5px}
  .steps{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--line);padding:32px 24px 28px}
  .step h3{font-size:26px}
  .benefits{grid-template-columns:1fr}
  .benefit{padding:24px 22px;min-height:auto}
  .benefit:last-child{grid-column:span 1 !important}
  /* Varnost section: single column on mobile, bottom border only between cells */
  .sec-grid{grid-template-columns:1fr}
  .sec-cell{padding:22px 20px;border-right:none;border-bottom:1px solid var(--line);gap:16px}
  .sec-cell:nth-child(2n){border-right:none}            /* override desktop rule */
  .sec-cell:nth-last-child(-n+2){border-bottom:1px solid var(--line)} /* override desktop rule */
  .sec-cell:last-child{border-bottom:none}
  .sec-cell h4{font-size:19px}
  .sec-cell p{font-size:14px}
  .problem-list .item{grid-template-columns:1fr;gap:8px}
  .problem-list .item .h{font-size:24px}
  .problem-list .item .num{padding-top:0}
  .foot-top{grid-template-columns:1fr 1fr;gap:24px}
  .compare .ch, .compare .row{grid-template-columns:1fr}
  .compare .ch > div, .compare .row > div{border-right:none;border-bottom:1px solid var(--line)}
  .compare .row > div.q{font-size:20px;padding-bottom:8px}
  .final{padding:36px}
  .final .actions{align-items:stretch}
  .final .actions .btn{justify-content:center}
  .price .left, .price .right{padding:32px}
  .price .free{font-size:64px}
  .faq summary{font-size:22px}
  .cap-preview{padding:14px;min-height:auto}
  .cap-preview .panel{min-height:280px}
  .section-head h2{font-size:34px}
}

/* ============ HLB-blue display layer (production default) ============
   Typographic and component-level rules that complete the HLB palette
   declared in :root at the top of this sheet. Kept late in the cascade
   so they win over the historical base rules above by source order —
   that base is preserved untouched to keep diffs honest against the
   pre-HLB design.

   Inline burgundy SVG accents (cube faces, signal constellation,
   capability-tile glyphs) are hue-rotated via CSS filter rather than
   rewritten — the artwork stays burgundy at the source, which is also
   what lets the burgundy archive below simply switch the filter off.

   Burgundy revert preview: /si?p=burgundy (toggle script in SI <head>).
   Full historical snapshot at /snapshots/disciplined-burgundy.css. */
h1 em,
h2 em,
h3 em,
.serif em,
p em{
  font-style:normal;font-weight:600;color:var(--hl);
}
/* The base layer styles several <em>s through class selectors that
   outrank the element-level rule above ((0,1,1)+ vs (0,0,2)) — the old
   [data-palette] prefix used to win those fights on specificity. Restate
   exactly the ones the prefixed rule used to beat. Deliberately NOT
   listed: .problem-list .item .h em and .app-shot .shot-title em — those
   two were never covered by the prefixed rule and have always rendered
   italic in the HLB production look. */
.hero h1 em,
.section-head h2 em,
.izziv-intro h3 em,
.tco-h3 em,
.svet-mailto-headline em,
.svet-collapsed-text h3 em,
.svet-form-head h3 em{
  font-style:normal;font-weight:600;color:var(--hl);
}
/* Words must stay whole — never auto-hyphenate. Croatian "računovodstveni"
   was breaking as "raču-novodstveni" on the narrow hero column.
   hyphens:manual honours explicit &shy; only; combined with overflow-wrap:
   normal + word-break:keep-all the browser will wrap to a new line instead
   of splitting a glyph cluster. */
h1{font-weight:500;letter-spacing:-0.025em;overflow-wrap:normal;word-break:keep-all;hyphens:manual}
h2{font-weight:600;letter-spacing:-0.022em;overflow-wrap:normal;word-break:keep-all;hyphens:manual}
h3{font-weight:500;letter-spacing:-0.015em;overflow-wrap:normal;word-break:keep-all;hyphens:manual}
.section-head h2{font-weight:600;letter-spacing:-0.022em}
.hero h1{
  font-weight:500;font-size:clamp(32px, 5.2vw, 68px);letter-spacing:-0.028em;line-height:1.05;
}
body{
  background:linear-gradient(180deg, #F4F7F8 0%, #E6ECEE 100%);
}
.brand-mark{background:var(--hl);color:#FFFFFF}
.final{background:var(--hl);color:#FFFFFF}
.final h2 em{color:#A8CCD6;font-weight:600;font-style:normal}
.final .btn-primary{background:#FFFFFF;color:var(--hl)}
.final .btn-primary:hover{background:#EBEFF1}
.final .btn-ghost{border-color:rgba(255,255,255,0.4);color:#FFFFFF}
.final .btn-ghost:hover{border-color:#FFFFFF;color:#FFFFFF}
.price .accent{color:var(--hl)}
.price .pill{background:var(--accent);color:var(--hl)}
/* Inline burgundy SVG → HLB blue via hue-rotate. Empirically tuned
   #6E2630 → #1B5C73 (~195° rotation, slightly desaturated, lightly
   dimmed to match the cool surface). Covers cube faces, signal
   constellation, and capability-tile glyphs. */
.face-front .face-chart,
.face-right .face-chart,
.face-left .face-chart,
.face-back .face-chart,
.face-top .face-chart,
.face-bottom .face-chart{
  filter:hue-rotate(195deg) saturate(0.7) brightness(0.95);
}
.signal-net,
.signal-core,
.signal-tile svg,
.cap-preview svg{
  filter:hue-rotate(195deg) saturate(0.75) brightness(0.95);
}
.tco-row.faai{background:var(--accent);border-color:var(--hl)}
.tco-row.faai .tco-name b{color:var(--hl)}
.foot-legal a{color:var(--muted);border-bottom-color:var(--line-2)}
.foot-legal a:hover{color:var(--hl);border-bottom-color:var(--hl)}
.foot-legal a.foot-hlb{color:var(--hl);border-bottom:none}

/* ============ PALETTE: Burgundy archive (revert preview via ?p=burgundy) ============
   The prior production palette, kept as a one-click A/B against the
   HLB blue that now lives directly in :root. Activated only by
   /si?p=burgundy through the toggle script in the SI <head>. Full
   historical record at /snapshots/disciplined-burgundy.css. */
[data-palette="burgundy"]{
  --bg:#F1EADC;
  --paper:#F8F2E4;
  --surface:#FFFBEF;
  --ink:#1B1310;
  --ink-2:#2E241F;
  --muted:#7A6A5B;
  --line:#E0D5BF;
  --line-2:#C9BCA1;
  --pos:#3A6B33;
  --pos-soft:#DCE5D2;
  --neg:#C0431F;
  --neg-soft:#F4DAD0;
  --hl:#6E2630;
  --accent:#ECDBC7;
  --serif:'Geist','Söhne','Inter Tight', system-ui, -apple-system, sans-serif;
}
[data-palette="burgundy"] h1 em,
[data-palette="burgundy"] h2 em,
[data-palette="burgundy"] h3 em,
[data-palette="burgundy"] .serif em,
[data-palette="burgundy"] p em{
  font-style:normal;font-weight:600;color:var(--hl);
}
[data-palette="burgundy"] h1{font-weight:500;letter-spacing:-0.025em;overflow-wrap:normal;word-break:keep-all;hyphens:manual}
[data-palette="burgundy"] h2{font-weight:600;letter-spacing:-0.022em;overflow-wrap:normal;word-break:keep-all;hyphens:manual}
[data-palette="burgundy"] h3{font-weight:500;letter-spacing:-0.015em;overflow-wrap:normal;word-break:keep-all;hyphens:manual}
[data-palette="burgundy"] .section-head h2{font-weight:600;letter-spacing:-0.022em}
[data-palette="burgundy"] .hero h1{
  font-weight:500;font-size:clamp(32px, 5.2vw, 68px);letter-spacing:-0.028em;line-height:1.05;
}
[data-palette="burgundy"] .brand-mark{background:var(--hl);color:var(--bg)}
[data-palette="burgundy"] .final{background:var(--hl);color:#F8F2E4}
[data-palette="burgundy"] .final h2 em{color:#E8D08A;font-weight:600;font-style:normal}
[data-palette="burgundy"] .final .btn-primary{background:#F8F2E4;color:var(--hl)}
[data-palette="burgundy"] .final .btn-primary:hover{background:#fff}
[data-palette="burgundy"] .price .accent{color:var(--hl)}
[data-palette="burgundy"] .price .pill{background:var(--accent);color:var(--hl)}
[data-palette="burgundy"] .tco-row.faai{background:var(--accent);border-color:var(--hl)}
[data-palette="burgundy"] .tco-row.faai .tco-name b{color:var(--hl)}
[data-palette="burgundy"] .foot-legal a{color:var(--muted);border-bottom-color:var(--line-2)}
[data-palette="burgundy"] .foot-legal a:hover{color:var(--hl);border-bottom-color:var(--hl)}
[data-palette="burgundy"] .foot-legal a.foot-hlb{color:var(--hl);border-bottom:none}
/* Counter-overrides for HLB defaults that the burgundy era never had:
   the cool body gradient goes back to flat cream, and the hue-rotate
   that maps the burgundy SVG artwork to blue switches off — the
   artwork is burgundy at the source. */
[data-palette="burgundy"] body{background:var(--bg)}
[data-palette="burgundy"] .face-front .face-chart,
[data-palette="burgundy"] .face-right .face-chart,
[data-palette="burgundy"] .face-left .face-chart,
[data-palette="burgundy"] .face-back .face-chart,
[data-palette="burgundy"] .face-top .face-chart,
[data-palette="burgundy"] .face-bottom .face-chart,
[data-palette="burgundy"] .signal-net,
[data-palette="burgundy"] .signal-core,
[data-palette="burgundy"] .signal-tile svg,
[data-palette="burgundy"] .cap-preview svg{
  filter:none;
}

/* ============ COOKIE CONSENT BANNER ============ */
.cc-banner{
  position:fixed;bottom:16px;left:16px;right:16px;
  z-index:80;max-width:760px;margin:0 auto;
  background:var(--paper);border:1px solid var(--line-2);border-radius:12px;
  padding:16px 18px;
  box-shadow:0 16px 40px -12px rgba(14,20,15,0.18);
  font-size:14px;line-height:1.5;
  animation:cc-slide-up .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes cc-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cc-banner-inner{display:flex;flex-direction:column;gap:14px}
@media (min-width:720px){.cc-banner-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}}
.cc-banner-text{color:var(--ink-2);max-width:540px}
.cc-banner-text strong{color:var(--ink);display:block;margin-bottom:2px;font-weight:500}
.cc-banner-text a{color:var(--hl);border-bottom:1px solid var(--line-2);transition:border-color .15s ease}
.cc-banner-text a:hover{border-bottom-color:var(--hl)}
.cc-banner-actions{display:flex;gap:8px;flex-shrink:0}
.cc-btn{
  font-family:inherit;font-size:13.5px;font-weight:500;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.cc-btn-primary{background:var(--hl);color:#F8F2E4}
.cc-btn-primary:hover{background:color-mix(in oklab, var(--hl) 84%, black)}
.cc-btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.cc-btn-ghost:hover{border-color:var(--hl);color:var(--hl)}
@media (prefers-reduced-motion: reduce){.cc-banner{animation:none}}