/* ==========================================================================
   الكاشير — Landing page
   Palette and type are lifted straight from the app (lib/app/theme), so the
   site and the product read as one thing.
   ========================================================================== */

@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy: #1b2a41;
  --navy-700: #162234;
  --navy-900: #0e1726;
  --navy-500: #2e4364;
  --gold: #c9a227;
  --gold-300: #e5c25c;
  --gold-050: #fbf3e4;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #e1e4e8;
  --text: #1a1d21;
  --muted: #6b7280;
  --success: #1e874b;
  --danger: #c0392b;

  --service-tint: #eaf1fa;
  --product-tint: #fbf3e4;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(16, 24, 40, 0.14);
  --shadow-lg: 0 32px 64px -24px rgba(14, 23, 38, 0.32);

  --max: 1180px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Cairo', 'Noto Naskh Arabic', 'Noto Nastaliq Urdu',
    'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans',
    system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--gold);
  color: var(--navy-900);
}

/* Numbers, currency, versions and file names stay LTR even inside Arabic. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
}

.nav.is-stuck {
  background: rgba(14, 23, 38, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-md);
}

.nav__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.brand small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-300);
  line-height: 1;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  min-width: 0;
}

.nav__links a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  /* Nine links + brand + actions get tight well before the 1024px breakpoint;
     without this the labels break onto a second line inside the header. */
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.nav__links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.nav__links + .nav__actions {
  margin-inline-start: 0;
}

.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.lang:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

.lang svg {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding-inline: 26px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
    background 0.2s, color 0.2s;
}

.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn--gold {
  background: linear-gradient(180deg, var(--gold-300), var(--gold));
  color: var(--navy-900);
  box-shadow: 0 10px 30px -10px rgba(201, 162, 39, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(201, 162, 39, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.btn--navy {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn--navy:hover {
  background: var(--navy-500);
  transform: translateY(-2px);
}

.btn--sm {
  height: 44px;
  padding-inline: 18px;
  font-size: 14px;
  border-radius: 10px;
}

.btn--sm svg {
  width: 16px;
  height: 16px;
}

/* Download button gets a slow shine sweep. */
.btn--gold {
  position: relative;
  overflow: hidden;
}

.btn--gold::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: skewX(-18deg);
  animation: shine 4.5s var(--ease) infinite;
}

@keyframes shine {
  0%,
  62% {
    inset-inline-start: -60%;
  }
  92%,
  100% {
    inset-inline-start: 130%;
  }
}

/* ---------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  padding-block: calc(var(--nav-h) + 72px) 110px;
  background: radial-gradient(
      1100px 620px at 78% -8%,
      rgba(201, 162, 39, 0.18),
      transparent 62%
    ),
    radial-gradient(
      820px 520px at 8% 0%,
      rgba(46, 67, 100, 0.75),
      transparent 60%
    ),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Hexagons — the Geo.Tech mark, tiled very faintly. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16z' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'/%3E%3C/svg%3E");
  opacity: 0.9;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(
    70% 60% at 50% 30%,
    #000 30%,
    transparent 100%
  );
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding-inline: 14px;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: var(--gold-300);
  font-size: 13px;
  font-weight: 700;
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 0 rgba(229, 194, 92, 0.7);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 194, 92, 0.6);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(229, 194, 92, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 194, 92, 0);
  }
}

.hero h1 {
  margin-block: 22px 18px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.hero h1 .hl {
  position: relative;
  color: var(--gold-300);
  white-space: nowrap;
}

.hero h1 .hl::after {
  content: '';
  position: absolute;
  inset-inline: -2px;
  inset-block-end: 4px;
  height: 10px;
  background: rgba(201, 162, 39, 0.22);
  border-radius: 3px;
  z-index: -1;
}

.hero__lead {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.76);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 34px;
}

.hero__meta {
  margin-block-start: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hero__meta .sep {
  opacity: 0.4;
}

.hero__points {
  margin-block-start: 34px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

.hero__points li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.check {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: rgba(30, 135, 75, 0.2);
  border: 1px solid rgba(46, 204, 113, 0.45);
  display: grid;
  place-items: center;
}

.check svg {
  width: 11px;
  height: 11px;
  stroke: #4ade80;
  stroke-width: 3;
  fill: none;
}

/* --------------------------------------------------------- hero visual --- */

.stage {
  position: relative;
  perspective: 1600px;
}

.tablet {
  position: relative;
  border-radius: 22px;
  padding: 12px;
  background: linear-gradient(160deg, #3a4a63, #1a2334);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: rotateY(-9deg) rotateX(3deg) rotate(-0.6deg);
  transition: transform 0.9s var(--ease);
}

.stage:hover .tablet {
  transform: rotateY(-4deg) rotateX(1deg);
}

/* ------------------------------------------------------- the POS mockup -- */

.app {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}

.app__bar {
  height: 42px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 12px;
  font-weight: 600;
  font-size: 12.5px;
}

.app__bar .spacer {
  margin-inline-start: auto;
}

.app__bar .chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.app__body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 296px;
}

.app__catalog {
  padding: 10px;
  border-inline-end: 1px solid var(--border);
}

.app__tabs {
  display: flex;
  gap: 6px;
  margin-block-end: 9px;
}

.app__tabs span {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
}

.app__tabs .on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.tile {
  background: var(--service-tint);
  border: 1px solid #d7e3f2;
  border-radius: 9px;
  padding: 9px 8px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.tile.prod {
  background: var(--product-tint);
  border-color: #efdcb4;
}

.tile b {
  font-size: 11px;
  font-weight: 600;
}

.tile i {
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.tile.tapped {
  animation: tap 0.5s var(--ease);
}

@keyframes tap {
  40% {
    transform: scale(0.94);
    box-shadow: inset 0 0 0 2px var(--gold);
  }
  100% {
    transform: scale(1);
  }
}

.app__cart {
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 11.5px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--border);
}

.cart__head span {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.cart__lines {
  padding-block: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  animation: lineIn 0.45s var(--ease) both;
}

@keyframes lineIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.line .q {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
}

.line .n {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line .v {
  font-size: 11px;
  font-weight: 700;
}

.cart__totals {
  border-block-start: 1px dashed var(--border);
  padding-block-start: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
}

.cart__totals div {
  display: flex;
  justify-content: space-between;
}

.cart__totals .grand {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  margin-block-start: 4px;
}

.cart__totals .grand span:last-child {
  color: var(--navy);
}

.cart__pay {
  margin-block-start: 9px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold));
  color: var(--navy-900);
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px -8px rgba(201, 162, 39, 0.9);
}

/* ------------------------------------------------------------- receipt --- */

.receipt {
  position: absolute;
  z-index: 2;
  /* Lies on the counter beside the till, over the catalogue corner — never over
     the cart, which is the half of the mockup that has to stay readable. */
  inset-inline-start: -58px;
  inset-block-end: -184px;
  width: 180px;
  background: #fff;
  color: #111;
  padding: 13px 12px 18px;
  font-size: 9px;
  line-height: 1.7;
  box-shadow: var(--shadow-lg);
  transform: rotate(-4deg);
  /* the torn strip at the bottom */
  -webkit-mask-image: linear-gradient(#000 0 0),
    conic-gradient(from -45deg at 50% 0, #000 90deg, transparent 0);
  -webkit-mask-size: 100% calc(100% - 7px), 12px 7px;
  -webkit-mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-image: linear-gradient(#000 0 0),
    conic-gradient(from -45deg at 50% 0, #000 90deg, transparent 0);
  mask-size: 100% calc(100% - 7px), 12px 7px;
  mask-position: 0 0, 0 100%;
  mask-repeat: no-repeat, repeat-x;
  animation: print 1.6s var(--ease) 0.5s both;
}

@keyframes print {
  from {
    clip-path: inset(0 0 100% 0);
    transform: rotate(-4deg) translateY(-24px);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: rotate(-4deg) translateY(0);
  }
}

.receipt__logo {
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
  opacity: 0.9;
  filter: grayscale(1) contrast(1.4);
}

.receipt__shop {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
}

.receipt__sub {
  text-align: center;
  color: #555;
  font-size: 9px;
  margin-block-end: 8px;
}

.receipt hr {
  border: 0;
  border-block-start: 1px dashed #bbb;
  margin-block: 7px;
}

.receipt .r {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.receipt .r span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.receipt .r.head {
  color: #666;
  font-size: 9px;
  font-weight: 600;
}

.receipt .r.tot {
  font-weight: 700;
  font-size: 13px;
  margin-block-start: 3px;
}

.receipt .thanks {
  text-align: center;
  margin-block-start: 9px;
  font-weight: 600;
}

.receipt .barcode {
  margin-block-start: 8px;
  height: 24px;
  background: repeating-linear-gradient(
    90deg,
    #111 0 1px,
    transparent 1px 3px,
    #111 3px 5px,
    transparent 5px 6px,
    #111 6px 8px,
    transparent 8px 11px
  );
  opacity: 0.85;
}

/* Floating "offline" badge on the stage. */
.badge-float {
  position: absolute;
  z-index: 3;
  inset-inline-end: -30px;
  inset-block-start: -26px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  animation: float 6s ease-in-out infinite;
}

.badge-float svg {
  width: 18px;
  height: 18px;
  stroke: #4ade80;
  fill: none;
  stroke-width: 2;
}

.badge-float small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* --------------------------------------------------------- marquee bar --- */

.strip {
  background: var(--navy-900);
  border-block-start: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
  padding-block: 16px;
  overflow: hidden;
}

.strip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-size: 13.5px;
  font-weight: 600;
}

.strip__row b {
  color: var(--gold-300);
  font-weight: 700;
}

.strip__row .d {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

/* -------------------------------------------------------------- layout --- */

.sec {
  padding-block: 104px;
}

.sec--tint {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.sec__head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: 56px;
}

.sec__tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-block-end: 12px;
}

.sec__head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
}

.sec__head p {
  margin-block-start: 14px;
  color: var(--muted);
  font-size: 17px;
}

/* ------------------------------------------------------------ features --- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.sec--tint .card {
  background: var(--bg);
}

.card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-300));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  border-color: #cfd6de;
  box-shadow: var(--shadow-md);
}

.card:hover::before {
  transform: scaleX(1);
}

.card__ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--navy-500), var(--navy));
  box-shadow: 0 8px 18px -10px rgba(27, 42, 65, 0.9);
  margin-block-end: 16px;
}

.card__ico svg {
  width: 22px;
  height: 22px;
  stroke: var(--gold-300);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 {
  font-size: 18px;
  margin-block-end: 8px;
}

.card p {
  color: var(--muted);
  font-size: 15px;
}

/* --------------------------------------------------------------- steps --- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: s;
}

.step {
  position: relative;
  padding: 28px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.step__n {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-050);
  border: 1px solid #eddcae;
  color: var(--gold);
  font-weight: 700;
  font-size: 16px;
  margin-block-end: 14px;
}

.step h3 {
  font-size: 17px;
  margin-block-end: 6px;
}

.step p {
  font-size: 14.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------ printers --- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  margin-block-end: 16px;
  letter-spacing: -0.02em;
}

.split > div > p {
  color: var(--muted);
  font-size: 17px;
}

.conn {
  margin-block-start: 26px;
  display: grid;
  gap: 10px;
}

.conn__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s, transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.sec--tint .conn__item {
  background: var(--bg);
}

.conn__item:hover {
  border-color: var(--gold);
  transform: translateX(0) translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.conn__item svg {
  width: 22px;
  height: 22px;
  flex: none;
  stroke: var(--navy);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conn__item b {
  font-size: 15px;
  display: block;
}

.conn__item span {
  font-size: 13px;
  color: var(--muted);
}

.conn__item .ok {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
  background: rgba(30, 135, 75, 0.1);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --------------------------------------------------------- white label --- */

.wl {
  position: relative;
  border-radius: 24px;
  padding: 4px;
  background: linear-gradient(
    140deg,
    rgba(201, 162, 39, 0.45),
    rgba(27, 42, 65, 0.1) 45%,
    rgba(201, 162, 39, 0.25)
  );
}

.wl__inner {
  border-radius: 20px;
  background: linear-gradient(165deg, var(--navy), var(--navy-900));
  color: #fff;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: center;
  overflow: hidden;
}

.wl__inner h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  margin-block-end: 14px;
}

.wl__inner > div > p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 24px;
}

.pill {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}

.pill:hover {
  background: rgba(201, 162, 39, 0.18);
  border-color: rgba(201, 162, 39, 0.5);
  transform: translateY(-2px);
}

/* Two mini receipts, same binary, two different shops. */
.wl__proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mini {
  background: #fff;
  color: #111;
  border-radius: 4px;
  padding: 12px 10px 16px;
  font-size: 8.5px;
  line-height: 1.7;
  box-shadow: var(--shadow-md);
}

.mini:first-child {
  transform: rotate(-3deg);
  direction: rtl;
  text-align: right;
}

.mini:last-child {
  transform: rotate(3deg);
  direction: ltr;
  text-align: left;
}

.mini b {
  display: block;
  text-align: center;
  font-size: 10px;
}

.mini em {
  display: block;
  text-align: center;
  font-style: normal;
  color: #666;
  font-size: 7.5px;
  margin-block-end: 5px;
}

.mini .r {
  display: flex;
  justify-content: space-between;
}

.mini hr {
  border: 0;
  border-block-start: 1px dashed #ccc;
  margin-block: 5px;
}

/* --------------------------------------------------------------- stats --- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.stat {
  padding: 26px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.stat b {
  display: block;
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stat span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* ----------------------------------------------------------------- faq --- */

.faq {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

.q {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.q[open] {
  border-color: #cfd6de;
  box-shadow: var(--shadow-sm);
}

.q summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 16.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.q summary::-webkit-details-marker {
  display: none;
}

.q summary::after {
  content: '';
  margin-inline-start: auto;
  width: 10px;
  height: 10px;
  flex: none;
  border-inline-end: 2px solid var(--muted);
  border-block-end: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.q[open] summary::after {
  transform: rotate(-135deg);
}

.q p {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 15.5px;
}

/* ------------------------------------------------------------ download --- */

.dl {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(
      900px 420px at 50% -30%,
      rgba(201, 162, 39, 0.25),
      transparent 60%
    ),
    linear-gradient(165deg, var(--navy), var(--navy-900));
  color: #fff;
  text-align: center;
  padding: 66px 32px 58px;
  box-shadow: var(--shadow-lg);
}

.dl::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16z' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'/%3E%3C/svg%3E");
  mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 100%);
  -webkit-mask-image: radial-gradient(
    60% 70% at 50% 40%,
    #000,
    transparent 100%
  );
}

.dl > * {
  position: relative;
}

.dl img.win {
  width: 66px;
  height: 66px;
  margin-inline: auto;
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px #000;
}

.dl h2 {
  margin-block: 20px 12px;
  font-size: clamp(28px, 3.6vw, 42px);
}

.dl p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  max-width: 52ch;
  margin-inline: auto;
}

.dl__btns {
  margin-block-start: 32px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.dl__facts {
  margin-block-start: 26px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.dl__facts b {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

.hash {
  margin-block-start: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.hash code {
  direction: ltr;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: rgba(255, 255, 255, 0.8);
  word-break: break-all;
}

.note {
  margin-block-start: 26px;
  margin-inline: auto;
  max-width: 620px;
  display: flex;
  gap: 12px;
  text-align: start;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(217, 142, 4, 0.1);
  border: 1px solid rgba(217, 142, 4, 0.35);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
}

.note svg {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: #f0b323;
  fill: none;
  stroke-width: 2;
  margin-block-start: 3px;
}

/* -------------------------------------------------------------- footer --- */

.foot {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.6);
  padding-block: 60px 26px;
  font-size: 14px;
}

/* top: four columns */
.foot__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-block-end: 40px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}
.foot__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.foot__col h3 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.foot__col a {
  color: rgba(255, 255, 255, 0.62);
  padding-block: 5px;
  transition: color 0.18s var(--ease);
}
.foot__col a:hover {
  color: var(--gold-300);
}

/* brand column */
.foot__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 800;
  margin-block-end: 16px;
  line-height: 1.2;
}
.foot__logo img {
  width: 40px;
  height: 40px;
}
.foot__logo small {
  display: block;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-300);
}
.foot__tagline {
  margin: 0 0 20px;
  max-width: 36ch;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

/* bottom bar */
.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-block-start: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.foot__bar a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.18s var(--ease);
}
.foot__bar a:hover {
  color: var(--gold-300);
}
.foot__geotech {
  color: var(--gold-300);
  font-weight: 700;
}
.foot__bar-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 860px) {
  .foot__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }
  .foot__about {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .foot__grid {
    grid-template-columns: 1fr;
  }
  .foot__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------- reveals --- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------- responsive --- */

/* Between the desktop layout and the 1024px collapse the full link row no
   longer fits at full size — shrink the row progressively instead. */
@media (max-width: 1440px) {
  .nav__inner {
    gap: 18px;
    padding-inline: 18px;
  }
  .nav__links a {
    padding: 8px 10px;
    font-size: 14px;
  }
}

@media (max-width: 1200px) {
  .nav__inner {
    gap: 12px;
  }
  .nav__links {
    gap: 0;
  }
  .nav__links a {
    padding: 8px 7px;
    font-size: 13px;
  }
  .lang {
    padding-inline: 10px;
  }
  .lang span {
    display: none;
  }
}

@media (max-width: 1024px) {
  .hero__grid,
  .split {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .stage {
    max-width: 560px;
    margin-inline: auto;
    padding-inline-start: 34px;
  }
  .tablet {
    transform: none;
  }
  .steps,
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .wl__inner {
    grid-template-columns: 1fr;
    padding: 42px 30px;
  }
  .nav__links {
    display: none;
  }
}

@media (max-width: 640px) {
  .sec {
    padding-block: 72px;
  }
  .hero {
    padding-block: calc(var(--nav-h) + 48px) 80px;
  }
  .hero__points {
    grid-template-columns: 1fr;
  }
  .steps,
  .stats {
    grid-template-columns: 1fr;
  }
  .app__body {
    grid-template-columns: 1fr;
  }
  .app__cart {
    border-block-start: 1px solid var(--border);
  }
  .receipt {
    display: none;
  }
  .badge-float {
    inset-inline-start: auto;
    inset-inline-end: 8px;
    inset-block-start: -14px;
  }
  .stage {
    padding-inline-start: 0;
  }
  /* Only the page's own calls-to-action go full width — not the one in the nav,
     which would blow the header past the viewport and give the page a
     horizontal scrollbar. */
  .hero__cta .btn,
  .dl__btns .btn {
    width: 100%;
  }
  .nav__inner {
    gap: 12px;
    padding-inline: 16px;
  }
  .brand small {
    display: none;
  }
  .lang span {
    display: none;
  }
  .lang {
    padding-inline: 12px;
  }
  .dl {
    padding: 46px 20px;
  }
  .hash {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================ i18n / a11y ==
   Added for the multilingual build: a skip link for keyboard/screen-reader
   users, and the language menu that replaces the old two-way toggle button.
   ========================================================================== */

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 200;
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 12px;
  outline: 3px solid #fff;
}

/* ---- language menu ---- */
.langmenu {
  position: relative;
}
.langmenu > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s, border-color 0.2s;
}
.langmenu > summary::-webkit-details-marker {
  display: none;
}
.langmenu > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-inline-end: 2px solid rgba(255, 255, 255, 0.7);
  border-block-end: 2px solid rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
  margin-block-start: -3px;
  transition: transform 0.2s var(--ease);
}
.langmenu[open] > summary::after {
  transform: rotate(-135deg);
  margin-block-start: 3px;
}
.langmenu > summary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}
.langmenu > summary svg {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
.langmenu__list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: grid;
  gap: 2px;
  z-index: 120;
}
.langmenu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.langmenu__list a:hover {
  background: var(--service-tint);
}
.langmenu__list a[aria-current='page'] {
  color: var(--navy);
  background: var(--gold-050);
}
.langmenu__list a[aria-current='page']::after {
  content: '✓';
  color: var(--gold);
  font-weight: 800;
}

/* Close-on-click-outside is handled in JS; this keeps focus styles tidy. */
.langmenu > summary:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

/* ============================================================ contact page ==
   Contact form, direct-email card, banners, and the new demo nav pill.
   ========================================================================== */

/* the "Live demo" nav pill stands out a touch from the plain nav links */
.nav__demo {
  color: var(--gold-300) !important;
  font-weight: 700;
}
.nav__demo:hover {
  background: rgba(201, 162, 39, 0.16) !important;
  color: #fff !important;
}

/* "or try the live demo" line under the download buttons */
.dl__demo {
  margin-block-start: 14px;
  font-size: 14px;
}
.dl__demo a {
  color: rgba(255, 255, 255, 0.82);
  border-block-end: 1px dashed rgba(255, 255, 255, 0.4);
  padding-block-end: 1px;
}
.dl__demo a:hover {
  color: #fff;
}

/* the contact page sits under the fixed (already-solid) nav */
.page-contact {
  background: var(--bg);
}
.contact {
  padding-block: calc(var(--nav-h) + 48px) 80px;
}
.contact .sec__head {
  margin-inline: 0;
  text-align: start;
  max-width: 720px;
}
.contact h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin-block: 10px 14px;
}
.contact .sec__head p {
  color: var(--muted);
  font-size: 17px;
}

.contact__grid {
  margin-block-start: 36px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }
}

.contact__form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(20px, 3vw, 32px);
}

.cform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) {
  .cform__row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: block;
  margin-block-end: 16px;
}
.field > span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-block-end: 7px;
}
.field > span i {
  color: var(--danger);
  font-style: normal;
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #9aa1ab;
}
/* Set by main.js when a required field fails the pre-submit check, so the
   visitor sees which field to fix instead of a generic "couldn't send". */
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--danger);
  background: #fdf3f2;
}
.field input[aria-invalid='true']:focus,
.field textarea[aria-invalid='true']:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
}

.cform__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-start: 4px;
}
.cform__foot small {
  color: var(--muted);
  font-size: 13px;
}
.cform button[aria-busy='true'] {
  opacity: 0.7;
  pointer-events: none;
}

/* success / error banners */
.cbanner {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  margin-block-end: 20px;
}
.cbanner--ok {
  background: rgba(30, 135, 75, 0.1);
  border: 1px solid rgba(30, 135, 75, 0.4);
  color: #14663a;
}
.cbanner--err {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.38);
  color: #a3271c;
}

/* direct-contact card */
.contact__direct {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-md);
}
.contact__direct h2 {
  font-size: 19px;
  margin-block-end: 16px;
}
.contact__email {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  padding: 14px;
  transition: background 0.18s, border-color 0.18s;
}
.contact__email:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(201, 162, 39, 0.6);
}
.contact__email svg {
  width: 26px;
  height: 26px;
  color: var(--gold-300);
  flex: none;
}
.contact__email small {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.contact__email b {
  font-size: 15px;
  word-break: break-all;
}
.contact__note {
  margin-block-start: 14px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}
.contact__back {
  margin-block-start: 18px;
}
.contact__back a {
  color: var(--gold-300);
  font-weight: 600;
  font-size: 14px;
}
.contact__back a:hover {
  color: #fff;
}

/* ------------------------------------------------------------ legal --- */

.page-legal {
  background: var(--bg);
}
.legal {
  padding-block: calc(var(--nav-h) + 48px) 80px;
}
.legal .sec__head {
  margin-inline: 0;
  text-align: start;
  max-width: 760px;
}
.legal h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin-block: 10px 14px;
}
.legal .sec__head p {
  color: var(--muted);
  font-size: 17px;
}
.legal__updated {
  margin-block-start: 12px !important;
  font-size: 14px !important;
  color: var(--muted) !important;
}
.legal__body {
  max-width: 760px;
  margin-block-start: 40px;
  color: #33373e;
  font-size: 16px;
  line-height: 1.85;
}
.legal__body h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--navy-900);
  letter-spacing: -0.01em;
  margin-block: 40px 14px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--border);
}
.legal__body h2:first-child {
  margin-block-start: 0;
}
.legal__body h3 {
  font-size: 17px;
  color: var(--navy-900);
  margin-block: 24px 8px;
}
.legal__body p {
  margin-block: 12px 0;
}
.legal__body ul {
  margin-block: 12px 0;
  padding-inline-start: 22px;
  list-style: disc;
}
.legal__body li {
  margin-block: 8px 0;
}
.legal__body strong {
  color: var(--navy-900);
  font-weight: 700;
}
.legal__body a {
  color: var(--gold);
  font-weight: 600;
}
.legal__body a:hover {
  color: var(--navy-900);
}
.legal__back {
  margin-block-start: 40px !important;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--border);
}
.legal__back a {
  font-size: 15px;
}

/* ======================================================================== */
/*  Articles & news — listing grid, cards, home teaser, single article      */
/* ======================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.badge--lang {
  background: var(--navy);
  color: #fff;
  text-transform: uppercase;
}

/* ---- listing grid ---- */
.artgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-block-start: 36px;
}
.artgrid__state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
  font-size: 16px;
}

.artcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.artcard:hover,
.artcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-300);
  outline: none;
}
.artcard__cover {
  aspect-ratio: 16 / 9;
  background: var(--bg);
  overflow: hidden;
}
.artcard__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.artcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
}
.artcard__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.artcard__date {
  color: var(--muted);
  font-size: 13px;
}
.artcard__title {
  font-size: 19px;
  line-height: 1.4;
  margin: 0;
}
.artcard__title a {
  color: var(--text);
  text-decoration: none;
}
.artcard__title a:hover {
  color: var(--navy-500);
}
.artcard__sum {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.artcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: auto;
  padding-block-start: 6px;
}
.artcard__more {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.artcard__more:hover {
  text-decoration: underline;
}
.artcard__langs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.artcard__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  background: var(--bg);
}
.artcard__lang:hover {
  border-color: var(--gold);
  color: var(--navy);
}

/* ---- home page "latest news" teaser ---- */
.news .sec__head {
  margin-block-end: 0;
}
.news__more {
  text-align: center;
  margin-block-start: 32px;
}

/* ---- single article page ---- */
.page-article .nav,
.page-articles .nav {
  position: sticky;
}
.article__wrap {
  max-width: 760px;
}
.article__crumb {
  margin: 0 0 16px;
  font-size: 14px;
}
.article__crumb a {
  color: var(--muted);
  text-decoration: none;
}
.article__crumb a:hover {
  color: var(--navy);
}
.article__head h1 {
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.25;
  margin: 0 0 14px;
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.article__langs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-block-start: 22px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.article__langs-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.article__langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  background: var(--surface);
}
.article__langs a:hover {
  border-color: var(--gold);
  background: var(--gold-050);
}
.article__cover {
  width: 100%;
  border-radius: var(--radius);
  margin-block-start: 26px;
  display: block;
}
.article__body {
  margin-block-start: 28px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
}
.article__body h2 {
  font-size: 24px;
  margin: 34px 0 12px;
}
.article__body h3 {
  font-size: 20px;
  margin: 28px 0 10px;
}
.article__body p {
  margin: 0 0 18px;
}
.article__body ul,
.article__body ol {
  margin: 0 0 18px;
  padding-inline-start: 24px;
}
.article__body li {
  margin: 0 0 8px;
}
.article__body a {
  color: var(--gold);
  text-decoration: underline;
}
.article__back {
  margin-block-start: 40px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--border);
}
.article__missing {
  text-align: center;
  padding: 80px 0;
}
.article__missing h1 {
  font-size: 30px;
  margin-block-end: 12px;
}

@media (max-width: 640px) {
  .artgrid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- demo ---- */
/* The online demo runs inside the site, in an iframe under the normal nav.
   The app is the content here, so it gets the whole viewport below the bar;
   the footer sits just past the fold for anyone who scrolls. */

.demo {
  padding-block-start: var(--nav-h);
  display: flex;
  flex-direction: column;
  /* dvh, not vh: on mobile the URL bar collapses and vh would overshoot. */
  min-height: 100dvh;
  background: var(--bg);
}

.demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--gold-050);
  border-block-end: 1px solid var(--border);
}

.demo__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy);
}

.demo__note svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gold);
}

.demo__new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}

.demo__new svg {
  width: 14px;
  height: 14px;
}

/* The icon is drawn pointing away from the text; in RTL that reads backwards. */
[dir="rtl"] .demo__new svg {
  transform: scaleX(-1);
}

.demo__frame {
  flex: 1 1 auto;
  width: 100%;
  /* Without an explicit min-height a flex-basis:auto iframe collapses to its
     default 150px in some engines before the app paints. */
  min-height: 70vh;
  border: 0;
  display: block;
  background: var(--surface);
}

/* ============================================================== buy / thanks ==
   Purchase page, home buy-CTA, and the post-payment key screen. */
.dl__buy {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.dl__buy p { margin: 0 0 .75rem; color: var(--muted); }

.buy__price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  background: var(--gold-050);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius);
}
.buy__price small { color: var(--muted); }
.buy__price b { font-size: 1.6rem; color: var(--navy-900); min-width: 5ch; }
.price-skel {
  display: inline-block;
  width: 5ch;
  height: 1.15rem;
  border-radius: 6px;
  background: linear-gradient(90deg, #efe3c4 25%, #f7eed6 50%, #efe3c4 75%);
  background-size: 200% 100%;
  animation: priceSkel 1.1s ease-in-out infinite;
}
@keyframes priceSkel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.buy__list { list-style: none; padding: 0; margin: 0 0 1rem; }
.buy__list li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin-bottom: .5rem;
  color: rgba(255, 255, 255, 0.88);   /* on the dark navy summary card */
}
.buy__list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--gold-300);
  font-weight: 700;
}

.thanks__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.15rem;
  margin: .5rem 0 1rem;
  background: var(--gold-050);
  border: 1px dashed var(--gold-300);
  border-radius: var(--radius);
}
.thanks__key code {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy-900);
  word-break: break-all;
}
.thanks__spinner { font-size: 2rem; text-align: center; margin: 1rem 0; }
.thanks__note { color: var(--muted); }

/* ============================================================ downloads == */
/* Two OS download buttons on the home page (inside the dark .dl block) and the
   dedicated /releases/ version-history page. Buttons carry each platform's
   official logo and link to /releases/get.php (the stable "latest" redirect);
   releases.js fills the live version/size and disables a platform with no build. */

.dl__os {
  margin-block-start: 32px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
.dlos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.dlos__btn {
  min-width: 250px;
}
.dlos__meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  min-height: 1.2em;
}
.dlos__meta .ltr {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.dlos.is-soon .dlos__btn {
  filter: grayscale(0.7);
  opacity: 0.55;
}
.dlos__soon {
  color: var(--gold-300);
  font-weight: 600;
}

/* a link styled button that is not (yet) available */
.btn.is-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.55;
  filter: grayscale(0.7);
}
.btn.is-disabled::after {
  display: none;
}

.dl__demo {
  margin-block-start: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.6);
}
.dl__demo .sep {
  opacity: 0.5;
}

/* --------------------------------------------------- /releases/ page ------ */

.page-releases .nav {
  position: sticky;
}
.releases .sec__head {
  margin-block-end: 8px;
}

/* the two "latest build" cards */
.rel-latest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-block: 36px 44px;
}
.rel-plat {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  flex-wrap: wrap;
}
.rel-plat__ico {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--bg);
  color: var(--navy);
  flex: none;
}
.rel-plat__body {
  flex: 1;
  min-width: 120px;
}
.rel-plat__body h2 {
  margin: 0 0 4px;
  font-size: 22px;
}
.rel-plat__meta {
  color: var(--muted);
  font-size: 14px;
}
.rel-plat__btn {
  flex: none;
}
.rel-plat.is-soon {
  opacity: 0.9;
}
.rel-plat.is-soon .rel-plat__ico {
  filter: grayscale(0.7);
}

/* the full version log, split by platform */
.rel-log {
  margin-block-start: 8px;
}
.rel-log__state {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-size: 16px;
}
.rel-log__state--soon {
  padding: 20px 0;
}
.rel-track {
  margin-block-end: 44px;
}
.rel-track__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin: 0 0 18px;
  padding-block-end: 12px;
  border-block-end: 2px solid var(--border);
  color: var(--navy);
}
.rel-track__title svg {
  flex: none;
}

.rel-ver {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-block-end: 16px;
}
.rel-ver.is-latest {
  border-color: var(--gold-300);
  box-shadow: 0 0 0 1px var(--gold-300), var(--shadow-sm);
}
.rel-ver__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rel-ver__id {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rel-ver__num {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}
.rel-ver__badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-050);
  color: #8a6d12;
  font-size: 12px;
  font-weight: 700;
}
.rel-ver__facts {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13.5px;
  margin-inline-start: auto;
}
.rel-ver__dl {
  flex: none;
}
.rel-ver__head .rel-ver__dl {
  margin-inline-start: 0;
}

.rel-notes {
  margin-block-start: 16px;
  color: var(--text);
  line-height: 1.7;
}
.rel-notes p {
  margin: 0 0 8px;
}
.rel-notes__list {
  margin: 0;
  padding-inline-start: 22px;
}
.rel-notes__list li {
  margin-block-end: 6px;
}

.rel-ver__hash {
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px dashed var(--border);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
}
.rel-ver__hash span {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rel-ver__hash code {
  word-break: break-all;
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 6px;
}

@media (max-width: 560px) {
  .rel-ver__facts {
    margin-inline-start: 0;
    width: 100%;
  }
  .dlos__btn {
    min-width: 220px;
  }
}

/* =========================================================== FEATURES ===== */
/* Shared narrow wrap + 3-up steps + breadcrumb used by feature pages.        */

.wrap--narrow { max-width: 820px; }

.steps--3 { grid-template-columns: repeat(3, 1fr); }

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-block-end: 18px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--navy); }

/* ---------------------------------------------------- feature hero -------- */
.fhero {
  position: relative;
  padding-block: clamp(28px, 5vw, 56px) clamp(36px, 6vw, 72px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 39, 0.10), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.fhero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.fhero .eyebrow { color: var(--gold); background: rgba(201,162,39,0.12); }
.fhero__copy .eyebrow__ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.fhero__copy .eyebrow__ico svg { width: 18px; height: 18px; stroke: var(--gold); }
.fhero h1 {
  margin-block: 18px 16px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.fhero__lead {
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  max-width: 52ch;
}
.fhero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 24px 22px;
}
.fhero__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.fhero__points li { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* --------------------------------------------------- feature visual ------- */
.fhero__visual { display: grid; place-items: center; }

.fxstage {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
}
.fxstage::before {
  content: '';
  position: absolute;
  inset: 8% 12%;
  background: radial-gradient(closest-side, rgba(27,42,65,0.10), transparent);
  filter: blur(24px);
  z-index: 0;
}
.fxpanel {
  position: relative;
  z-index: 1;
  width: min(340px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 20px;
  animation: fxfloat 6s var(--ease) infinite;
}
@keyframes fxfloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.fxava {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy-500), var(--navy));
  color: var(--gold-300);
  font-weight: 800;
}
.fxava--2 { background: linear-gradient(160deg, #3a5a86, #22354f); }
.fxava--3 { background: linear-gradient(160deg, var(--gold-300), var(--gold)); color: var(--navy-900); }
.fxwho { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.fxwho b { font-size: 15px; }
.fxwho i { font-style: normal; font-size: 12px; color: var(--muted); }

/* loyalty */
.fxrowhead { display: flex; align-items: center; gap: 12px; }
.fxheart { margin-inline-start: auto; color: #e0607a; }
.fxheart svg { width: 22px; height: 22px; animation: fxbeat 1.8s ease-in-out infinite; }
@keyframes fxbeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.18)} 30%{transform:scale(1)} }
.fxpoints { display: flex; align-items: baseline; gap: 8px; margin-block: 18px 8px; }
.fxbig { font-size: 44px; font-weight: 800; color: var(--navy-900); letter-spacing: -0.02em; }
.fxpoints span { color: var(--muted); font-weight: 600; }
.fxprog { height: 8px; border-radius: 999px; background: var(--gold-050); overflow: hidden; }
.fxprog i {
  display: block; height: 100%; width: 72%;
  background: linear-gradient(90deg, var(--gold), var(--gold-300));
  border-radius: 999px;
  transform-origin: inline-start;
  animation: fxfill 1.6s var(--ease) both;
}
@keyframes fxfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fxnote { margin-block: 10px 14px; font-size: 13px; color: var(--muted); }
.fxup { color: #1e9e6a; font-weight: 800; }
.fxredeem {
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--gold-050);
  border: 1px dashed var(--gold-300);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* accounting */
.fxcaption { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-block-end: 12px; }
.fxpl { display: grid; gap: 9px; }
.fxpl__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.fxpl__row span { color: var(--muted); }
.fxpl__row b { color: var(--navy-900); }
.fxpl__row--neg b { color: #c0553f; }
.fxpl__net {
  display: flex; justify-content: space-between; align-items: center;
  margin-block-start: 6px; padding-block-start: 12px;
  border-top: 1px solid var(--border);
}
.fxpl__net span { font-weight: 800; color: var(--navy); }
.fxpl__net b { font-size: 22px; font-weight: 800; color: #1e9e6a; }
.fxbars { display: flex; align-items: flex-end; gap: 8px; height: 64px; margin-block-start: 18px; }
.fxbars span {
  flex: 1; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--gold-300), var(--gold));
  height: var(--h);
  transform-origin: bottom;
  animation: fxgrow 1.1s var(--ease) both;
}
.fxbars span:nth-child(2){animation-delay:.08s}.fxbars span:nth-child(3){animation-delay:.16s}
.fxbars span:nth-child(4){animation-delay:.24s}.fxbars span:nth-child(5){animation-delay:.32s}
.fxbars span:nth-child(6){animation-delay:.40s}
@keyframes fxgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* commissions */
.fxpanel--comm { display: grid; gap: 10px; }
.fxbarber {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 12px; background: var(--bg);
}
.fxdue { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.fxdue i { font-style: normal; font-size: 11px; color: var(--muted); }
.fxdue b { font-size: 16px; color: var(--navy-900); }
.fxbarber--pay { background: var(--gold-050); border: 1px solid var(--gold-300); }
.fxbtn {
  margin-inline-start: auto;
  border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold));
  color: var(--navy-900); font-weight: 800; font-size: 13px;
  animation: fxpulse 2.2s ease-in-out infinite;
}
@keyframes fxpulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.5)} 70%{box-shadow:0 0 0 10px rgba(201,162,39,0)} }

/* thermal receipt */
.fxreceipt {
  width: 250px;
  background: #fff;
  color: #111;
  border-radius: 6px;
  padding: 18px 16px 22px;
  box-shadow: var(--shadow-lg);
  font-family: "Courier New", monospace;
  font-size: 12px;
  position: relative;
  z-index: 1;
}
.fxreceipt__logo { display: block; margin: 0 auto 8px; opacity: .9; }
.fxreceipt__shop { text-align: center; font-weight: 800; font-size: 14px; }
.fxreceipt__sub { text-align: center; color: #555; font-size: 10px; margin-block-start: 2px; }
.fxreceipt hr { border: 0; border-top: 1px dashed #bbb; margin: 8px 0; }
.fxreceipt .r { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
.fxreceipt .r.tot { font-weight: 800; font-size: 14px; }
.fxreceipt__thanks { text-align: center; margin-block-start: 10px; font-weight: 700; }
.fxbarcode {
  height: 34px; margin-block-start: 10px;
  background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 8px);
}

/* offline */
.fxpanel--offline { text-align: center; }
.fxwifi {
  width: 66px; height: 66px; margin: 4px auto 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(192,85,63,0.10);
  color: #c0553f;
}
.fxwifi svg { width: 34px; height: 34px; }
.fxofftitle { display: block; font-size: 18px; color: var(--navy-900); }
.fxpills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block: 16px; }
.fxpill { padding: 7px 12px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 700; }
.fxpill--ok { background: rgba(30,158,106,0.12); color: #1e7a55; }
.fxlocal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--gold-050); border: 1px solid var(--gold-300);
  color: var(--navy-900); font-weight: 700; font-size: 13px;
}
.fxlocal svg { width: 18px; height: 18px; stroke: var(--gold); }

/* team / permissions */
.fxpanel--team { display: grid; gap: 8px; }
.fxuser { display: flex; align-items: center; gap: 12px; }
.fxuser--2 { margin-block-start: 8px; padding-block-start: 14px; border-top: 1px solid var(--border); }
.fxbadge {
  margin-inline-start: auto; padding: 5px 11px; border-radius: 999px;
  background: var(--bg); font-size: 12px; font-weight: 700; color: var(--muted);
}
.fxbadge--all { background: rgba(30,158,106,0.12); color: #1e7a55; }
.fxperm { display: grid; gap: 6px; padding-inline-start: 52px; }
.fxperm__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--navy); }
.fxperm__row--off { color: var(--muted); }
.fxdot { width: 20px; height: 12px; border-radius: 999px; background: #cfd6de; position: relative; transition: background .3s; }
.fxdot::after { content: ''; position: absolute; top: 1px; inset-inline-start: 1px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: inset-inline-start .3s; }
.fxdot--on { background: #1e9e6a; }
.fxdot--on::after { inset-inline-start: 9px; }

/* ------------------------------------------------ benefits reuse ---------- */
.fbenefits .card__ico svg { stroke: var(--gold-300); }

/* --------------------------------------------------------- CTA band ------- */
.fcta {
  text-align: center;
  padding: clamp(30px, 5vw, 52px) clamp(20px, 4vw, 48px);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.fcta h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.fcta p { color: rgba(255,255,255,0.75); max-width: 56ch; margin: 12px auto 0; }
.fcta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 24px; }
.fcta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.fcta .btn--ghost:hover { background: rgba(255,255,255,0.10); }

/* ------------------------------------------------- related features ------- */
.frelated { display: flex; flex-wrap: wrap; gap: 12px; }
.frel {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-weight: 700; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.frel:hover { transform: translateY(-3px); border-color: #cfd6de; box-shadow: var(--shadow-sm); }
.frel__ico { display: inline-flex; width: 20px; height: 20px; }
.frel__ico svg { width: 20px; height: 20px; stroke: var(--gold); }
.frelated__back { margin-block-start: 22px; }
.frelated__back a { font-weight: 700; color: var(--navy); }

/* ------------------------------------------------ features index grid ----- */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.fcard {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.fcard::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold-300));
  transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.fcard:hover { transform: translateY(-5px); border-color: #cfd6de; box-shadow: var(--shadow-md); }
.fcard:hover::before { transform: scaleY(1); }
.fcard__ico {
  width: 50px; height: 50px; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy-500), var(--navy));
  box-shadow: 0 8px 18px -10px rgba(27,42,65,0.9);
}
.fcard__ico svg { width: 24px; height: 24px; stroke: var(--gold-300); }
.fcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fcard__body b { font-size: 16px; color: var(--navy-900); }
.fcard__body span { font-size: 14px; color: var(--muted); line-height: 1.55; }
.fcard__go { margin-inline-start: auto; flex: none; color: var(--gold); transition: transform .3s var(--ease); }
.fcard__go svg { width: 22px; height: 22px; }
.fcard:hover .fcard__go { transform: translateX(4px); }
[dir="rtl"] .fcard__go svg { transform: scaleX(-1); }
[dir="rtl"] .fcard:hover .fcard__go { transform: translateX(-4px); }

/* --------------------------------------------- home card "learn more" ----- */
.card__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: 14px;
  font-weight: 700; font-size: 14px; color: var(--gold);
}
.card__more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.card:hover .card__more svg { transform: translateX(3px); }
[dir="rtl"] .card__more svg { transform: scaleX(-1); }
[dir="rtl"] .card:hover .card__more svg { transform: translateX(-3px); }
.home-features-all { text-align: center; margin-block-start: 34px; }

/* ------------------------------------------------------- responsive ------- */
@media (max-width: 860px) {
  .fhero__grid { grid-template-columns: 1fr; }
  .fhero__visual { order: -1; }
  .steps--3 { grid-template-columns: 1fr; }
}

/* ------------------------------------------ feature mockups (part 2) ------ */
/* invoicing — service/product tile grid */
.fxtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fxtile {
  padding: 14px 6px; border-radius: 12px; text-align: center;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--navy);
}
.fxtile.prod { background: var(--gold-050); border-color: #eddcae; }
.fxtile.on { box-shadow: inset 0 0 0 2px var(--gold); animation: fxtap 1.8s var(--ease) infinite; }
@keyframes fxtap { 0%,100%{box-shadow: inset 0 0 0 2px var(--gold);} 50%{box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 6px rgba(201,162,39,.16);} }
.fxsale__total {
  display: flex; justify-content: space-between; align-items: center;
  margin-block: 16px 12px; padding-block-start: 14px; border-top: 1px solid var(--border);
  font-weight: 800; color: var(--navy-900);
}
.fxsale__total b { font-size: 22px; }
.fxsale__pay {
  text-align: center; padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold));
  color: var(--navy-900); font-weight: 800;
}

/* vat */
.fxtoggle { display: flex; align-items: center; justify-content: space-between; margin-block-end: 14px; font-weight: 700; color: var(--navy); }
.fxpl__row.fxvat b, .fxpl__row.fxvat span { color: var(--gold); font-weight: 800; }
.fxvatnum { margin-block-start: 12px; text-align: center; font-size: 11px; color: var(--muted); letter-spacing: .04em; }

/* daily report */
.fxrepgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fxrep { padding: 12px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.fxrep i { font-style: normal; font-size: 11px; color: var(--muted); }
.fxrep b { font-size: 17px; color: var(--navy-900); }
.fxsplit { height: 10px; border-radius: 999px; margin-block-start: 14px; background: #cfd6de; overflow: hidden; }
.fxsplit span { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--navy), var(--navy-500)); border-radius: 999px; animation: fxfill 1.4s var(--ease) both; transform-origin: inline-start; }

/* inventory */
.fxpanel--stock { display: grid; gap: 8px; }
.fxstock__row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bg); }
.fxstock__row span { flex: 1; font-weight: 600; color: var(--navy); }
.fxstock__row b { font-size: 17px; color: var(--navy-900); min-width: 2ch; text-align: center; }
.fxstock__row--out { background: rgba(192,85,63,0.08); }
.fxtag { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.fxtag--ok { background: rgba(30,158,106,0.14); color: #1e7a55; }
.fxtag--low { background: rgba(201,162,39,0.18); color: #977706; }
.fxtag--out { background: rgba(192,85,63,0.14); color: #c0553f; }

/* backup */
.fxpanel--backup { text-align: center; }
.fxbk { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block: 4px 14px; color: var(--navy); }
.fxbk__file, .fxbk__usb { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--bg); }
.fxbk__file svg, .fxbk__usb svg { width: 26px; height: 26px; }
.fxbk__usb { background: var(--gold-050); color: var(--gold); }
.fxbk__arrow svg { width: 22px; height: 22px; color: var(--gold); animation: fxslide 1.6s var(--ease) infinite; }
@keyframes fxslide { 0%,100%{transform:translateX(0);opacity:.6} 50%{transform:translateX(4px);opacity:1} }
[dir="rtl"] .fxbk__arrow svg { transform: scaleX(-1); }
[dir="rtl"] .fxbk { flex-direction: row-reverse; }

/* languages */
.fxpanel--lang { display: grid; gap: 7px; }
.fxlang { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 11px; background: var(--bg); font-weight: 700; color: var(--navy); }
.fxlang.on { background: var(--gold-050); border: 1px solid var(--gold-300); }

/* ==========================================================================
   Mobile navigation
   Below 1024px `.nav__links` is hidden, which used to leave the header with no
   way into Features / Printers / FAQ / Downloads / Articles / Demo / Buy /
   Contact at all — the only routes were the hero buttons and the footer. The
   burger and drawer below restore those links, and the header's gold download
   CTA moves into the drawer so the bar itself stops being crowded.
   Markup is built by main.js from the links already in the header, so it stays
   correct for every page and language without touching the templates.
   ========================================================================== */

.navburger {
  display: none;
  /* The bars inside are absolutely positioned, so the containing block has to
     be the button itself — set here, not in the media query, so the two can
     never drift apart. */
  position: relative;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}

.navburger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.navburger:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

/* Three bars that fold into an X. Transforms only, so it stays on the
   compositor and costs nothing on a low-end phone. */
.navburger span {
  position: absolute;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.28s var(--ease), opacity 0.18s linear;
}

.navburger span:nth-child(1) { transform: translateY(-6px); }
.navburger span:nth-child(3) { transform: translateY(6px); }

.nav.is-open .navburger span:nth-child(1) { transform: rotate(45deg); }
.nav.is-open .navburger span:nth-child(2) { opacity: 0; }
.nav.is-open .navburger span:nth-child(3) { transform: rotate(-45deg); }

.navdrawer {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  display: none;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 20px 22px;
  background: rgba(14, 23, 38, 0.97);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-md);
  /* The bar is transparent until you scroll; an open drawer needs its own
     edge so it never floats over the hero with nothing separating them. */
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.nav.is-open .navdrawer {
  display: block;
  animation: navdrawer-in 0.22s var(--ease) both;
}

@keyframes navdrawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.navdrawer a {
  display: block;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

.navdrawer a:hover,
.navdrawer a:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.navdrawer a[aria-current='page'] {
  color: var(--gold-300);
  background: rgba(201, 162, 39, 0.12);
}

/* The demo link is the one coloured call-to-action inside the list. */
.navdrawer a.nav__demo {
  color: var(--gold-300);
}

.navdrawer .btn {
  width: 100%;
  margin-block-start: 12px;
}

@media (max-width: 1024px) {
  .navburger {
    display: inline-flex;
  }
  /* Moved into the drawer, so the bar is just brand + language + burger. */
  .nav__actions .btn--gold {
    display: none;
  }
}

/* Keyboard and screen-reader users get the same links; when JS has not run
   the drawer never exists, so nothing here can trap focus in a hidden panel. */
@media (prefers-reduced-motion: reduce) {
  .nav.is-open .navdrawer { animation: none; }
  .navburger span { transition: none; }
}