/* ═══════════════════════════════════════════════════════════════════════════
   AllurePOS Website: site.css (dark redesign, 2026-09-27)
   Source of truth: the owner's Design canvas "AllurePOS Website Redesign"
   (Desktop · 1440 and Mobil · 390 artboards). Shared by index.html, blog.html
   and article.html; linked after fonts.css and Tabler Icons.

   - Ground #0B0C0F, panels #14161B / #1A1D24, ink #F3F0E8, one amber accent
     #F0B347 (with #1A1204 on it). Semantic green #6EDBA5 / red #E5534B.
   - Type: Manrope (body, 800 headings), Instrument Serif italic for the one
     emphasised phrase of a heading, JetBrains Mono for kickers, numbers and
     the product mock-ups. Nothing under 13px, touch targets 44px and up.
   - Layout: a 1280px column with 80px gutters at 1200px and wider (the 1440
     artboard), 40px between 900 and 1199, 20px at 899 and below.
   - Motion only where the design asks (floating hero pieces, the tilt of a
     card under a fine pointer, the hero parallax); all off under
     prefers-reduced-motion. Nothing is loaded from the network.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0B0C0F;
  --bg-2: #0F1116;
  --panel: #14161B;
  --panel-2: #1A1D24;
  --panel-3: #2A2D36;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.18);
  --ink: #F3F0E8;
  --ink-2: #C9CBD1;
  --muted: #A9ACB4;
  --muted-2: #8E9199;
  --accent: #F0B347;
  --accent-ink: #1A1204;
  --accent-deep: #5A4310;
  --accent-text: #F3D89A;
  --accent-soft: rgba(240, 179, 71, 0.12);
  --accent-line: rgba(240, 179, 71, 0.35);
  --ok: #6EDBA5;
  --ok-text: #B9F0D4;
  --ok-bg: #10251C;
  --danger: #E5534B;
  --danger-text: #FF9A94;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --gutter: 80px;
  --max: 1280px;
  --head: 88px;
  --block: 140px;
  --hit: 44px;
  --shadow-deep: 0 50px 90px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 30px 60px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 1199px) {
  :root { --gutter: 40px; --block: 104px; }
}
@media (max-width: 899px) {
  :root { --gutter: 20px; --head: 64px; --block: 80px; }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.site main { flex: 1 0 auto; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.em { font: italic 400 1em/1 var(--font-serif); letter-spacing: -0.01em; }
.em--accent { color: var(--accent); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--hit);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn .ti { font-size: 20px; line-height: 1; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { border-color: var(--line-3); color: var(--ink); background: transparent; }
.btn--dark { background: var(--accent-ink); color: var(--ink); }
.btn--outline-dark { border-color: rgba(26, 18, 4, 0.35); color: var(--accent-ink); background: transparent; }
.btn--xl { min-height: 54px; padding: 0 26px; font-size: 16px; }
.btn--lg { min-height: 50px; }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: 13px; border-radius: 9px; }
.btn--block { width: 100%; }
.btn--icon { width: var(--hit); padding: 0; border-radius: var(--r-sm); border-color: var(--line-2); background: transparent; }
.btn--icon .ti { font-size: 22px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
  .btn--dark:hover { filter: brightness(1.25); }
  .btn--outline-dark:hover { background: rgba(26, 18, 4, 0.08); }
  .btn--icon:hover { background: rgba(255, 255, 255, 0.06); }
}
.btn:active { transform: translateY(0); filter: brightness(0.96); }
.btn[disabled] { opacity: 0.6; cursor: default; }


/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(11, 12, 15, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--head);
}
.brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--hit);
  color: var(--ink);
}
/* The real logo mark (icons/logo-mark.png), not a letter: same box as before. */
.brand__mark {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
}
.brand__name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.brand__name b { font-weight: 800; color: var(--accent); }
.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.nav__link[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--accent); }
}
.site-bar__actions { display: flex; align-items: center; gap: 12px; }
.site-bar__cta { padding-inline: 20px; font-size: 14px; }
.site-bar__login { padding-inline: 18px; font-size: 14px; font-weight: 700; }

/* Language: two mono keys in a pill (the same on every page). */
.lang {
  display: inline-flex;
  padding: 0;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.lang__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 700 13px/1 var(--font-mono);
}
.lang__btn[aria-pressed="true"], .lang__btn.active { background: rgba(255, 255, 255, 0.1); color: var(--ink); }

/* 899px and below: the links move into the menu; a small Demo key and the menu key stay. */
.site-menu-btn { display: none; }
.site-bar__demo { display: none; }
.site-menu {
  position: fixed;
  inset: calc(var(--head) + 8px) var(--gutter) auto auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  max-height: calc(100vh - var(--head) - 24px);
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--panel-2);
  box-shadow: var(--shadow-card);
}
.site-menu:not(:popover-open) { display: none; }
.site-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--hit);
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600;
}
.site-menu__item .ti { font-size: 20px; color: var(--accent); }
.site-menu__item:active { background: rgba(255, 255, 255, 0.08); }
.site-menu__lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
@media (max-width: 1365px) {
  .site-bar__login { display: none; }
  .site-menu-btn { display: inline-flex; }
  .nav { gap: 0; }
  .nav__link { padding: 0 9px; font-size: 14px; }
}
/* Index header (it has the popover): 1100 px and below the Demo link replaces the big CTA; 1023 px and below the nav moves into the popover. */
@media (max-width: 1099px) {
  .site-bar__cta { display: none; }
  .site-bar__demo { display: inline-flex; }
}
@media (max-width: 1023px) {
  .site-bar:has(#site-menu) .nav { display: none; }
}
@media (max-width: 899px) {
  .nav, .site-bar__login, .site-bar__cta, .site-bar > .lang { display: none; }
  .site-menu-btn, .site-bar__demo { display: inline-flex; }
  .brand__mark { width: 30px; height: 30px; border-radius: 7px; }
  .brand__name { font-size: 18px; }
}
@supports not selector(:popover-open) {
  .site-menu, .site-menu-btn { display: none !important; }
  @media (max-width: 899px) { .site-bar > .lang { display: inline-flex; } }
}


/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 72px;
  padding-bottom: 24px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%);
  pointer-events: none;
}
.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 1 600px;
  flex-direction: column;
  gap: 28px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 36px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: rgba(240, 179, 71, 0.08);
  color: var(--accent-text);
  font: 500 13px/1.3 var(--font-mono);
  letter-spacing: 0.04em;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.dot--pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 219, 165, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(110, 219, 165, 0); }
}
.hero__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(42px, 4.7vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__lede {
  max-width: 520px;
  margin: 0;
  color: #B4B7BF;
  font-size: 19px;
  line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 8px;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 600;
}
.hero__notes > span { display: inline-flex; align-items: center; gap: 8px; }
.hero__notes .ti { font-size: 16px; color: var(--ok); }

/* The 3D scene: a fixed 640x600 stage, scaled by --scene-scale (set by app.js
   from the available width; 1 on the 1440 artboard). */
.scene-wrap {
  position: relative;
  flex: 0 0 auto;
  width: calc(640px * var(--scene-scale, 1));
  height: calc(600px * var(--scene-scale, 1));
}
.scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 600px;
  perspective: 1500px;
  perspective-origin: 55% 45%;
  transform: scale(var(--scene-scale, 1));
  transform-origin: top left;
}
.scene__glow {
  position: absolute;
  left: 120px;
  top: 110px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 179, 71, 0.26) 0%, rgba(240, 179, 71, 0) 68%);
  filter: blur(14px);
  pointer-events: none;
}
.scene__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(8deg + var(--rx, 0deg))) rotateY(calc(-14deg + var(--ry, 0deg)));
  transition: transform 140ms ease-out;
}
/* The terminal frame holds a real kasir screenshot (icons/kasa-ekran.png, 1366x768): a 16:9 screen in the
   design's 520px frame. */
.pos {
  position: absolute;
  left: 120px;
  top: 150px;
  width: 520px;
  height: 316px;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--panel-3) 0%, #14161B 60%);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pos__screen {
  width: 496px;
  height: 292px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
}
.pos__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* The printout: the accredited sample receipt (icons/racun-1600-811.png, 888x1950), 232px wide like the
   design's receipt, the whole receipt visible (QR included). It floats in front of the terminal. */
.receipt {
  position: absolute;
  left: -24px;
  top: 40px;
  width: 208px;
  border-radius: 6px;
  background: #FBFAF6;
  box-shadow: 0 40px 70px rgba(0, 0, 0, 0.6);
  transform: translateZ(150px) rotateZ(-4deg);
  overflow: hidden;
}
.receipt img { display: block; width: 100%; height: auto; }

.kds-ticket {
  position: absolute;
  left: 430px;
  top: 20px;
  width: 210px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: var(--shadow-card);
  transform: translateZ(90px) rotateZ(3deg);
}
.kds-ticket img { display: block; width: 100%; height: auto; }

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.kds-ticket__head .num { color: var(--accent); font-weight: 400; letter-spacing: 0; }
.kds-ticket__rows { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.kds-ticket__rows > div { display: flex; align-items: center; gap: 8px; }
.kds-ticket__rows .done { color: var(--muted-2); text-decoration: line-through; }
.chk { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 4px; flex-shrink: 0; }
.chk--on { border: 0; background: var(--ok); color: var(--bg); }
.chk--on .ti { font-size: 10px; }
.kds-ticket__state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-top: 12px;
  border-radius: 8px;
  background: rgba(240, 179, 71, 0.14);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}
.sync-pill {
  position: absolute;
  left: 380px;
  top: 500px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(110, 219, 165, 0.35);
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-text);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  transform: translateZ(190px) rotateZ(-2deg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.sync-pill .dot { width: 10px; height: 10px; }
.sync-pill__short { display: none; }
.offline-badge {
  position: absolute;
  left: 200px;
  top: 64px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--ink-2);
  transform: translateZ(60px);
  font: 400 13px/1 var(--font-mono);
  white-space: nowrap;
}
.offline-badge .ti { font-size: 14px; color: var(--accent); }
.float-a { animation: floatA 6s ease-in-out infinite; }
.float-b { animation: floatB 7s ease-in-out infinite; }
.float-c { animation: floatC 5s ease-in-out infinite; }
@keyframes floatA { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes floatB { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes floatC { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (max-width: 1199px) {
  .hero { gap: 24px; }
  .hero__copy { flex-basis: 50%; }
  /* Tablet: the scene has half the width; the offline badge gives way and the receipt sits closer to the stage. */
  .offline-badge { display: none; }
  .receipt { transform: translateZ(60px) rotateZ(-4deg); }
}
@media (max-width: 899px) {
  .hero { flex-direction: column; align-items: stretch; padding-top: 44px; padding-bottom: 0; }
  .hero__copy { flex-basis: auto; gap: 20px; }
  .hero__lede { font-size: 16px; }
  .hero__actions > .btn { flex: 1 1 100%; }
  .hero__notes { display: none; }
  .scene-wrap { align-self: center; margin-top: 8px; }
  .offline-badge { display: none; }
  .receipt { left: 8px; top: 40px; width: 200px; transform: translateZ(60px) rotateZ(-4deg); }
  /* The mobile artboard: the KDS ticket top right and a short sync pill bottom left. */
  .kds-ticket { top: 0; }
  .sync-pill { left: 20px; top: 500px; font-size: 15px; transform: translateZ(190px) rotateZ(-3deg); }
  .sync-pill__long { display: none; }
  .sync-pill__short { display: inline; }
}


/* ── Sections ───────────────────────────────────────────────────────────── */

.section { padding-top: var(--block); }
.section--first { padding-top: 120px; }
@media (max-width: 899px) { .section--first { padding-top: 72px; } }
.section__head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.section__head--center { align-items: center; margin-inline: auto; text-align: center; }
.section__split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.section__split > p { max-width: 380px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.kicker {
  margin: 0;
  color: var(--accent);
  font: 400 13px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h2--md { font-size: clamp(32px, 3vw, 44px); line-height: 1.08; }
.lede { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.lede--sm { font-size: 15px; }
.check-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.check-list > li { display: flex; align-items: center; gap: 10px; }
.check-list .ti { font-size: 16px; color: var(--ok); flex-shrink: 0; }
@media (max-width: 899px) {
  .section__split { flex-direction: column; align-items: flex-start; gap: 16px; }
}


/* ── Trust strip ────────────────────────────────────────────────────────── */

.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  min-height: 120px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.trust__item { display: flex; align-items: center; gap: 14px; padding: 16px 8px; }
.trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--accent);
}
.trust__icon .ti { font-size: 20px; }
.trust__text { display: flex; flex-direction: column; }
.trust__title { font-size: 14px; font-weight: 800; }
.trust__sub { color: var(--muted-2); font-size: 13px; }
.trust__sub--mono { font-family: var(--font-mono); }
@media (max-width: 899px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; padding: 8px 0; }
  .trust__item { padding: 10px 0; }
  .trust__icon { display: none; }
  .trust__sub { display: none; }
}


/* ── Features: tabs + showcase, then six cards ──────────────────────────── */

.showcase { display: flex; gap: 32px; height: 560px; margin-top: 56px; }
.tabs { display: flex; flex-direction: column; gap: 8px; width: 380px; flex-shrink: 0; }
.tab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tab[aria-selected="true"] { background: var(--panel); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .tab:hover { background: rgba(255, 255, 255, 0.06); } }
.tab__title { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 800; }
.tab__num { color: var(--muted-2); font: 400 13px/1 var(--font-mono); }
.tab__desc { color: var(--muted); font-size: 14px; line-height: 1.5; }
.screen {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--panel);
}
.screen::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 179, 71, 0.18) 0%, rgba(240, 179, 71, 0) 70%);
  pointer-events: none;
}
.pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
}
.pane[hidden] { display: none; }
.pane__head { display: flex; align-items: center; justify-content: space-between; }
.pane__title { font-size: 18px; font-weight: 800; }
.pane__meta { color: var(--muted-2); font: 400 13px/1.3 var(--font-mono); }
.pane__shot {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: #FFFFFF;
}
.pane__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tables { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  font-weight: 800;
}
.table small { color: var(--muted-2); font-size: 13px; font-weight: 400; }
.table--open { background: rgba(240, 179, 71, 0.16); border-color: rgba(240, 179, 71, 0.5); }
.table--open small { color: var(--accent-text); }
.table--bill { background: rgba(110, 219, 165, 0.12); border-color: rgba(110, 219, 165, 0.4); }
.table--bill small { color: var(--ok-text); }
.pane__row { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; }
.menu-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.menu-key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 10px;
  background: var(--panel-2);
  font-size: 13px;
  font-weight: 700;
}
.menu-key--on { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.menu-key--item { border: 1px solid var(--line); font-weight: 400; }
.bill {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 220px;
  flex-shrink: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  font-size: 13px;
}
.bill__label { color: var(--muted-2); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.bill__line { display: flex; justify-content: space-between; gap: 8px; }
.bill__total {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 15px;
  font-weight: 800;
}
.kds-grid { display: grid; flex: 1 1 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.kds-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ok);
  border-radius: var(--r-md);
  background: var(--bg-2);
  font-size: 13px;
}
.kds-card--late { border-top-color: var(--danger); }
.kds-card--soon { border-top-color: var(--accent); }
.kds-card__head { display: flex; justify-content: space-between; font-weight: 800; }
.kds-card__head .num { color: var(--ok-text); font-weight: 400; }
.kds-card--late .kds-card__head .num { color: var(--danger-text); }
.kds-card--soon .kds-card__head .num { color: var(--accent-text); }
.kds-card .done { color: var(--muted-2); text-decoration: line-through; }
.kds-card .note { color: var(--muted-2); }
.kds-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin-top: 6px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 800;
}
.kds-card__btn--done { background: var(--ok); color: var(--bg); }
.pane--pda { flex-direction: row; align-items: center; gap: 40px; }
.phone {
  flex-shrink: 0;
  width: 230px;
  height: 470px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 34px;
  background: var(--panel-2);
  box-shadow: var(--shadow-card);
  transform: perspective(1000px) rotateY(-14deg) rotateX(4deg);
}
.phone__screen {
  display: flex;
  flex-direction: column;
  width: 206px;
  height: 446px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--bg-2);
}
.phone__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px; font-size: 14px; font-weight: 800; }
.phone__head .mono { color: var(--muted-2); font-size: 13px; font-weight: 400; }
.phone__chips { display: flex; gap: 6px; padding: 0 16px 10px; }
.chip { padding: 6px 10px; border-radius: 999px; background: var(--panel-2); font-size: 13px; font-weight: 700; }
.chip--on { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.phone__list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; font-size: 13px; }
.phone__item { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px; border-radius: 10px; background: var(--panel-2); }
.phone__item .num { color: var(--muted-2); }
.phone__send {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: auto 12px 12px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
}
.pane__copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pane__copy h3 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.pane__copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.stat--warn { border-color: rgba(240, 179, 71, 0.4); }
.stat__label { color: var(--muted-2); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.stat--warn .stat__label { color: var(--accent-text); }
.stat__value { font: 800 28px/1.1 var(--font-mono); }
.stat__sub { color: var(--muted); font-size: 13px; }
.stat__sub--ok { color: var(--ok-text); }
.sheet { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); font-size: 13px; }
.sheet__row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.sheet__row:last-child { border-bottom: 0; }
.sheet__row--head { color: var(--muted-2); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }
.sheet .st-bad { color: var(--danger-text); font-weight: 700; }
.sheet .st-low { color: var(--accent-text); font-weight: 700; }
.sheet .st-ok { color: var(--ok-text); font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 200px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon .ti { font-size: 22px; }
.card__title { margin: 0; font-size: 19px; font-weight: 800; }
.card__desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.tilt { transform-style: preserve-3d; transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease; }
@media (hover: hover) and (pointer: fine) {
  .tilt:hover { transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-6px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); border-color: rgba(240, 179, 71, 0.45); }
}
@media (max-width: 1199px) {
  .showcase { height: auto; }
  .tabs { width: 300px; }
  .screen { min-height: 520px; }
  .tables { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .showcase { display: none; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .card { min-height: 0; padding: 22px; gap: 12px; border-radius: 18px; }
  .card__icon { width: 40px; height: 40px; border-radius: 11px; }
  .card__title { font-size: 18px; }
}


/* ── Fiscal: three steps and the isometric stack ────────────────────────── */

.fiscal { display: flex; align-items: center; gap: 60px; }
.fiscal__copy { display: flex; flex: 0 0 560px; flex-direction: column; gap: 28px; }
.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; align-items: flex-start; gap: 16px; }
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 14px/1 var(--font-mono);
}
.step__text { display: flex; flex-direction: column; gap: 4px; }
.step__title { font-size: 16px; font-weight: 800; }
.step__desc { color: var(--muted); font-size: 14px; line-height: 1.5; }
.iso-wrap {
  position: relative;
  flex: 1 1 auto;
  height: calc(560px * var(--iso-scale, 1));
  min-width: 0;
}
.iso {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 560px;
  perspective: 1400px;
  transform: scale(var(--iso-scale, 1));
  transform-origin: top left;
}
.iso__stack {
  position: absolute;
  left: 80px;
  top: 60px;
  width: 420px;
  height: 420px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-32deg);
}
.plate {
  position: absolute;
  display: flex;
  align-items: flex-end;
  transition: transform 0.5s ease;
}
.plate--purs { left: 0; top: 0; width: 420px; height: 420px; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; background: #101318; box-shadow: 0 60px 100px rgba(0, 0, 0, 0.6); transform: translateZ(0); }
.plate--lpfr { left: 40px; top: 40px; width: 340px; height: 340px; padding: 24px; border: 1px solid var(--accent-line); border-radius: 24px; background: var(--panel-2); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55); transform: translateZ(110px); }
.plate--esir { left: 80px; top: 80px; width: 260px; height: 260px; padding: 22px; border-radius: 20px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); transform: translateZ(220px); }
@media (hover: hover) and (pointer: fine) {
  .plate--purs:hover { transform: translateZ(24px); }
  .plate--lpfr:hover { transform: translateZ(134px); }
  .plate--esir:hover { transform: translateZ(244px); }
}
.plate__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: rotateZ(32deg) rotateX(-58deg);
  transform-origin: left bottom;
}
.plate__label small { font: 400 13px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--muted-2); }
.plate--lpfr .plate__label small { color: var(--accent-text); }
.plate--esir .plate__label small { color: var(--accent-deep); }
.plate__label b { font-size: 18px; font-weight: 800; }
.plate__grid { position: absolute; right: 40px; top: 40px; width: 180px; height: 120px; border: 1px solid var(--line); border-radius: 14px; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; }
.plate__card { position: absolute; right: 30px; top: 30px; display: flex; align-items: center; justify-content: center; width: 96px; height: 62px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: linear-gradient(135deg, #2E3340, #1A1D24); }
.plate__card span { width: 28px; height: 20px; border-radius: 4px; background: var(--accent); }
.plate__lines { position: absolute; right: 24px; top: 24px; display: flex; flex-direction: column; gap: 6px; width: 110px; height: 70px; padding: 10px; border-radius: 10px; background: rgba(26, 18, 4, 0.9); }
.plate__lines span { height: 6px; border-radius: 3px; background: rgba(243, 240, 232, 0.35); }
.plate__lines span:first-child { width: 70%; background: rgba(243, 240, 232, 0.6); }
.plate__lines span:nth-child(2) { width: 50%; }
.plate__lines span:nth-child(3) { width: 60%; }
.iso__tags { position: absolute; right: 0; top: 470px; display: flex; gap: 10px; }
.tag {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink-2);
  font: 400 13px/1 var(--font-mono);
  white-space: nowrap;
}
.tag--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; }
.tag--line { border-color: var(--accent-line); background: var(--panel-2); color: var(--accent-text); }
@media (max-width: 1199px) {
  .fiscal { gap: 32px; }
  .fiscal__copy { flex-basis: 50%; }
}
@media (max-width: 899px) {
  .fiscal { flex-direction: column; align-items: stretch; gap: 22px; }
  .fiscal__copy { flex-basis: auto; gap: 22px; }
  .fiscal .steps { order: 3; }
  .iso-wrap { order: 2; }
  .iso__tags { flex-direction: column; align-items: flex-end; gap: 8px; top: 16px; }
}


/* ── Architecture ───────────────────────────────────────────────────────── */

.arch { display: grid; grid-template-columns: 1fr 1fr 220px 1fr 1fr; gap: 20px; align-items: center; margin-top: 48px; }
.arch__card { display: flex; flex-direction: column; gap: 12px; height: 168px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.arch__card .ti { font-size: 24px; color: var(--accent); }
.arch__title { font-size: 16px; font-weight: 800; }
.arch__desc { color: var(--muted); font-size: 13px; line-height: 1.5; }
.arch__cloud { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.arch__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 14px rgba(240, 179, 71, 0.12), 0 0 0 28px rgba(240, 179, 71, 0.05);
}
.arch__orb .ti { font-size: 40px; }
.arch__cloud b { font-size: 15px; font-weight: 800; }
.arch__cloud small { color: var(--muted-2); font: 400 13px/1.3 var(--font-mono); }
@media (max-width: 1199px) {
  .arch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch__cloud { grid-column: 1 / -1; order: -1; }
  .arch__card { height: auto; }
}
@media (max-width: 599px) {
  .arch { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}


/* ── Pricing ────────────────────────────────────────────────────────────── */

.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.seg__btn {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.seg__btn.active, .seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pricing__seg { margin-top: 12px; }
/* Two cards since 2.45.0 (package + L-PFR): centred, each at most 440px wide. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 440px)); justify-content: center; gap: 20px; align-items: stretch; margin-top: 44px; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--panel);
}
.plan--featured { border-color: var(--accent); background: var(--panel-2); box-shadow: 0 30px 80px rgba(240, 179, 71, 0.12); }
.plan__flag {
  position: absolute;
  top: -14px;
  left: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan__head { display: flex; flex-direction: column; gap: 6px; }
.plan__name { margin: 0; font-size: 20px; font-weight: 800; }
.plan__desc { margin: 0; color: var(--muted); font-size: 14px; }
.plan__price { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.plan__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.plan__amount { font: 800 48px/1 var(--font-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan__unit { color: var(--muted); font-size: 14px; }
.plan__vat { color: var(--muted-2); font-size: 13px; white-space: nowrap; }
.plan__note { min-height: 1.3em; color: var(--muted-2); font-size: 13px; }
.plan__was { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 14px; }
.plan__was s { font-family: var(--font-mono); }
.plan__was .badge { padding: 3px 8px; border-radius: 999px; background: rgba(110, 219, 165, 0.14); color: var(--ok-text); font-size: 13px; font-weight: 700; }
.plan .check-list { flex: 1 1 auto; gap: 12px; }
@media (max-width: 1199px) { .plan { padding: 28px; } .plan__amount { font-size: 40px; } }
@media (max-width: 899px) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
  .plan { padding: 26px; gap: 18px; border-radius: 20px; }
  .plan__flag { left: 26px; }
  .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .seg__btn { min-height: 44px; padding: 0; font-size: 13px; }
}


/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { display: flex; gap: 80px; }
.faq__intro { display: flex; flex: 0 0 420px; flex-direction: column; gap: 16px; }
.faq__intro a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.faq__list { flex: 1 1 auto; min-width: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq__q:hover { background: rgba(255, 255, 255, 0.04); } }
.faq__q::after {
  content: "\ea5f";
  content: "\ea5f" / "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--line-3);
  border-radius: 50%;
  font: 14px/1 "tabler-icons";
  transition: transform 0.3s ease, background 0.3s ease;
}
.faq__item[open] > .faq__q::after { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.faq__a { margin: 0; padding: 0 60px 24px 8px; color: var(--muted); font-size: 15px; line-height: 1.65; }
@media (max-width: 899px) {
  .faq { flex-direction: column; gap: 20px; }
  .faq__intro { flex-basis: auto; }
  .faq__q { padding: 18px 0; font-size: 16px; gap: 14px; }
  .faq__q::after { width: 30px; height: 30px; }
  .faq__a { padding: 0 0 18px; font-size: 14.5px; }
}


/* ── CTA band ───────────────────────────────────────────────────────────── */

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 64px 72px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--accent);
  color: var(--accent-ink);
}
.cta::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 360px;
  height: 360px;
  border: 60px solid rgba(26, 18, 4, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.cta__copy { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cta__copy .h2 { color: var(--accent-ink); }
.cta__copy p { max-width: 560px; margin: 0; color: var(--accent-deep); font-size: 17px; }
.cta__actions { position: relative; display: flex; flex-shrink: 0; gap: 12px; }
.cta__actions .btn { min-height: 56px; }
@media (max-width: 1199px) {
  .cta { flex-direction: column; align-items: flex-start; padding: 48px; }
}
@media (max-width: 899px) {
  .cta { padding: 36px 26px; gap: 18px; border-radius: 22px; }
  .cta::before { right: -80px; top: -90px; width: 240px; height: 240px; border-width: 40px; }
  .cta__copy p { font-size: 15px; }
  .cta__actions { flex-direction: column; width: 100%; }
  .cta__actions .btn { min-height: 52px; }
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: var(--block);
  padding: 56px var(--gutter) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.site-footer__inner { display: flex; flex-direction: column; gap: 48px; width: 100%; max-width: var(--max); margin-inline: auto; }
.site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer__brand .brand__mark { width: 32px; height: 32px; border-radius: 7px; }
.site-footer__brand .brand__name { font-size: 18px; }
.site-footer__tagline { max-width: 340px; margin: 0; color: var(--muted-2); font-size: 14px; line-height: 1.6; }
.site-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__col { display: flex; flex-direction: column; gap: 0; min-width: 0; font-size: 14px; }
.site-footer__title { margin: 0 0 6px; color: var(--ink); font-weight: 800; }
.site-footer__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .site-footer__link:hover { color: var(--accent); } }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--muted-2);
  font-size: 13px;
}
.site-footer__bottom p { margin: 0; }
.site-footer--mini { margin-top: 72px; padding-top: 32px; gap: 0; }
.site-footer--mini .site-footer__bottom { border-top: 0; padding-top: 0; }

.site-footer__company { margin: 0; color: var(--muted-2); font-size: 13px; line-height: 1.6; }
.site-footer__company a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.paystrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.paystrip span { display: inline-flex; align-items: center; gap: 14px; }
.paystrip img { height: 24px; width: auto; background: #fff; border-radius: 4px; padding: 2px 6px; }
.paystrip a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ── Legal pages (Uslovi, Privatnost) ──────────────────────────────────── */
.legal h2 { margin: 32px 0 8px; font-size: 22px; font-weight: 800; }
.legal p { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
/* Inline text links (footer company line, legal body, consent) get a bigger tap target without
   disturbing the surrounding line flow: expand the box with padding, then pull it back with an
   equal negative margin. */
.consent a, .site-footer__company a, .legal a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
.legal__table { width: 100%; margin: 12px 0 24px; border-collapse: collapse; font-size: 14px; }
.legal__table th, .legal__table td { padding: 10px 12px; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.legal__table th { width: 180px; color: var(--ink); font-weight: 700; background: var(--bg-2); }
.legal__table td { color: var(--ink-2); }
@media (max-width: 1023px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .site-footer { gap: 28px; margin-top: 72px; padding: 40px var(--gutter) 32px; }
  .site-footer__inner { gap: 28px; }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .site-footer__col:last-child { grid-column: 1 / -1; }
  .site-footer__bottom { padding-top: 16px; }
}


/* ── Registration modal, toasts ─────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-deep);
  animation: sheet-in 180ms var(--ease);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 16px 28px; border-bottom: 1px solid var(--line); }
.modal__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 800; }
.modal__title .ti { font-size: 22px; color: var(--accent); }
.modal__body { padding: 24px 28px 28px; }
.modal__text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.saas-modal-tabs { display: none; }
.steps-form { display: none; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { color: var(--ink-2); font-size: 13px; font-weight: 700; }
.input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
  font: 400 15px/1.2 var(--font-sans);
}
.input::placeholder { color: var(--muted-2); }
.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 179, 71, 0.2); }
.input--otp { font: 500 26px/1 var(--font-mono); letter-spacing: 0.3em; text-align: center; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.form-alert { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(229, 83, 75, 0.15); color: var(--danger-text); font-size: 13px; font-weight: 700; }
.order-summary { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); font-size: 14px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.consent a { color: var(--accent-text); text-decoration: underline; }
.billing-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.billing-fields > legend { padding: 0; margin-bottom: 4px; }
.tx { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 24px 0; font-size: 16px; }
.tx dt { color: var(--muted-2); }
.tx dd { margin: 0; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }
.toasts {
  position: fixed;
  top: calc(var(--head) + 8px);
  right: var(--gutter);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 2 * var(--gutter)));
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  font-weight: 600;
}
.toast .ti { font-size: 20px; flex-shrink: 0; }
.toast--ok .ti { color: var(--ok); }
.toast--danger .ti { color: var(--danger-text); }
.toast--warn .ti { color: var(--accent); }
.toast--info .ti { color: var(--ink-2); }
.toast__title { margin: 0; }
#saas-modal[style*="flex"] ~ .toasts { display: none; }
.toasts > .toast--danger:has(~ .toast--ok) { display: none; }


/* ── Blog index, teaser and article ─────────────────────────────────────── */

.page-hero { display: flex; flex-direction: column; gap: 16px; padding: 72px 0 8px; }
.page-hero .hero__title { font-size: clamp(36px, 4vw, 56px); }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-top: 44px; }
@media (min-width: 900px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.35s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .post:hover { border-color: var(--accent-line); transform: translateY(-4px); } }
.post__cover { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); background: var(--panel-2) center / cover no-repeat; }
.post__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px 24px; }
.post__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; }
.post__excerpt { flex: 1 1 auto; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.post__meta { margin: 0; color: var(--muted-2); font: 400 13px/1.3 var(--font-mono); }
.post__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0; color: var(--accent-text); font-size: 14px; font-weight: 700; }
.post__more .ti { font-size: 18px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); text-align: center; }
.empty .ti { font-size: 32px; color: var(--muted-2); }
.empty p { margin: 0; }
.site-blog .posts { min-height: 240px; }

.reading { max-width: calc(680px + 2 * var(--gutter)); }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: var(--hit); margin-top: 32px; color: var(--muted); font-size: 14px; font-weight: 700; }
.back .ti { font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--accent); } }
.article__title { margin: 24px 0 8px; font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.article__meta { margin: 0 0 24px; color: var(--muted-2); font: 400 13px/1.3 var(--font-mono); }
.article__cover { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); object-fit: cover; }
.article__content { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.article__content p { margin: 0 0 18px; }
.article__content h2 { margin: 40px 0 10px; color: var(--ink); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.article__content h3 { margin: 28px 0 8px; color: var(--ink); font-size: 21px; font-weight: 800; }
.article__content ul { margin: 0 0 18px; padding-left: 22px; }
.article__content li { margin: 6px 0; }
.article__content strong { color: var(--ink); font-weight: 800; }
.faq--article { margin-top: 48px; }
.faq__title { margin: 0 0 12px; font-size: 24px; font-weight: 800; }
.article__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 48px; padding: 32px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--panel); }
.article__cta h3 { margin: 0; font-size: 22px; font-weight: 800; }
.article__cta p { margin: 0 0 8px; color: var(--muted); font-size: 15px; }


/* Monri Lightbox as a window over the dimmed page (2026-09-29, same rule as admin.css in AllurePOS 2.33.5). Monri's lightbox.js puts its card form
   in an iframe (.monri_lightbox_app) that fills the whole window, inside a fixed wrapper div it
   appends to <body>, and the Monri page paints its own grey background: the popup looked like a
   new page. On a screen of at least 760 x 560 the wrapper dims the page and the iframe becomes a
   centred window (Monri's X still closes it). Phones, and browsers without :has(), keep Monri's
   full-screen form. lightbox.js shows and hides both with inline display ('' / none) and sizes the
   iframe inline at 100% x 100%: max-width / max-height cap it without !important. */
@supports selector(:has(*)) {
  @media (min-width: 760px) and (min-height: 560px) {
    div:has(> iframe.monri_lightbox_app) {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(12, 13, 16, 0.62);
    }
    iframe.monri_lightbox_app {
      flex: 0 0 auto;
      max-width: min(920px, calc(100% - 48px));
      max-height: min(980px, calc(100% - 48px));
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    }
  }
}

/* ── Motion off ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .float-c, .dot--pulse { animation: none; }
  .tilt, .plate, .scene__stage, .post, .btn, .faq__q::after { transition: none; }
  .tilt:hover { transform: none; }
  .modal { animation: none; }
}

/* Pricing: one package + add-ons (catalog 2.45.0) */
.addons { display: grid; gap: 0; margin: 8px 0; text-align: left; }
.addons__title { margin: 16px 0 4px; font-size: 15px; }
/* One add-on: [checkbox] name ........ price, and the benefit line under the name. */
.addons__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; }
.addons__row input[type="checkbox"] { margin: 0; }
.addons__name { font-weight: 600; }
.addons__price { opacity: .85; white-space: nowrap; font-size: 14px; }
.addons__desc { grid-column: 2 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); font-weight: 400; }
.addons__tills { grid-template-columns: minmax(0, 1fr) 72px; cursor: default; }
.addons__tills .addons__desc { grid-column: 1 / -1; }
.addons__note { font-size: 13px; opacity: .85; margin: 10px 0 8px; }
.cart__total { margin: 12px 0; }
#cart-extra-terminals { width: 72px; margin-left: auto; }

/* L-PFR sold alone (2.48.0): the sign-up modal drops the restaurant fields; the "Moje licence" page. */
body.saas-lpfr .saas-restaurant-only { display: none; }
#lpfr-qty { width: 72px; margin-left: auto; }
.lpfr-card { margin: 24px 0; padding: 20px; border: 1px solid var(--line, rgba(255, 255, 255, 0.12)); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
.lpfr-card h3 { margin: 20px 0 8px; font-size: 16px; }
.lpfr-card__head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.lpfr-card__name { margin: 0; font-size: 20px; font-weight: 800; }
.lpfr-card__pib { color: var(--muted-2); font-size: 14px; }
.lpfr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lpfr-table th, .lpfr-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.lpfr-table th { color: var(--muted-2); font-weight: 600; }
.lpfr-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lpfr-codes li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.lpfr-code { font: 600 18px/1.4 ui-monospace, monospace; letter-spacing: .06em; }
.lpfr-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.1); }
.lpfr-pill--ok { background: rgba(110, 219, 165, 0.14); color: var(--ok-text); }
.lpfr-pill--warn { background: rgba(240, 179, 71, 0.16); color: var(--accent-text); }
.lpfr-pill--bad { background: rgba(229, 83, 75, 0.15); color: var(--danger-text); }
.lpfr-buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.lpfr-buy .input { width: 90px; }
.lpfr-login { display: grid; gap: 12px; max-width: 420px; }
.lpfr-howto { margin-top: 16px; }
.lpfr-howto li { margin: 4px 0; }